/* Construction Lab. Landscape iPad first; portrait works. Nothing scrolls. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root {
  --sky: #4fb3ff; --ink: #3a2a14; --muted: #7a6a52; --card: #fff8ea;
  --accent: #ff8a1f; --accent-dark: #c9661a;
  --tile: clamp(72px, 8.2vw, 108px);
  --gap: 16px;
  --slot: clamp(76px, 10vmin, 112px);
  --hammer: clamp(96px, 13vmin, 136px);
  --top-inset: max(env(safe-area-inset-top), 20px);
  --bottom-inset: calc(env(safe-area-inset-bottom) + 24px);
}
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: var(--sky); }
body {
  font-family: "Grandstander", "SF Pro Rounded", ui-rounded, -apple-system, system-ui, sans-serif;
  color: var(--ink); -webkit-user-select: none; user-select: none; touch-action: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; touch-action: none; }
img { -webkit-user-drag: none; pointer-events: none; }

/* ---------- splash ---------- */
#splash { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: linear-gradient(180deg, #4fb3ff, #bfe9ff 70%, #8fd56a 70.5%, #6fc24f); }
#splash.gone { opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.splash-card { text-align: center; padding: 24px; background: rgba(255,255,255,.75); border-radius: 36px; box-shadow: 0 10px 0 rgba(0,0,0,.08); }
.splash-pic { width: clamp(120px, 22vmin, 200px); height: auto; animation: bob 2s ease-in-out infinite; }
.splash-card h1 { font-size: clamp(34px, 7vmin, 64px); margin: .1em 0 .1em; letter-spacing: -.02em; }
.splash-card p { color: var(--muted); font-size: clamp(15px, 2.6vmin, 22px); margin: 0 0 1.2em; }
@keyframes bob { 50% { transform: translateY(-14px); } }
.big-btn { background: var(--accent); color: #fff; font-size: clamp(22px, 3.6vmin, 32px); font-weight: 800;
  padding: .6em 1.4em; border-radius: 999px; box-shadow: 0 7px 0 var(--accent-dark); min-height: 64px; }
.big-btn:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--accent-dark); }

/* ---------- the site ---------- */
#app { position: fixed; inset: 0; }
#site { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cloud { animation: drift var(--dur) linear infinite; }
@keyframes drift { from { transform: translateX(-200px); } to { transform: translateX(1800px); } }
.sun-rays { transform-box: fill-box; transform-origin: 50% 50%; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.win-inner { transform-box: fill-box; transform-origin: 50% 50%; }
.door-inner { transform-box: fill-box; transform-origin: 50% 100%; }
.floor { transform-box: fill-box; }
.building { cursor: pointer; }
#foundation.gone { opacity: 0; transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) { .cloud, .sun-rays, .splash-pic { animation: none; } }

/* ---------- clipboard and hammer ---------- */
#topbar { position: absolute; left: 0; right: 0; top: var(--top-inset); display: flex; justify-content: center; align-items: center;
  gap: clamp(14px, 3vw, 40px); pointer-events: none; }
#topbar > * { pointer-events: auto; }
#clipboard { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--card);
  border: 4px solid #e2c89a; border-radius: 26px; box-shadow: 0 8px 0 rgba(0,0,0,.1); transition: transform .35s ease, opacity .35s; }
#clipboard.folded { transform: translateY(-140%) scale(.8); opacity: 0; }
.slot { position: relative; width: var(--slot); height: var(--slot); border-radius: 18px; background: #fff; border: 4px dashed #d8c8a8; display: grid; place-items: center;
  transition: transform .16s, border-color .2s, background-color .2s; }
.slot svg { width: 100%; height: 100%; }
.slot-shape { fill: #efe6d4; stroke: #c9b48c; stroke-width: 5; stroke-linejoin: round; }
.slot-cross { fill: none; stroke: #c9b48c; stroke-width: 5; }
.slot.filled { border-style: solid; border-color: #c9b48c; }
.slot.filled .slot-shape { stroke: #5a4a30; }
.slot.filled .slot-cross { stroke: #5a4a30; }
.slot-pic { position: absolute; right: -8px; bottom: -8px; width: 38%; aspect-ratio: 1; border-radius: 50%; background: #fff center/78% no-repeat;
  box-shadow: 0 2px 0 rgba(0,0,0,.15); opacity: 0; transform: scale(.4); transition: transform .25s cubic-bezier(.3,1.6,.5,1), opacity .2s; }
.slot.filled .slot-pic { opacity: 1; transform: scale(1); }
.slot.pop { animation: pop .34s cubic-bezier(.3,1.6,.5,1); }
.slot.pulse { animation: pulse .5s ease 2; }
.slot.puff { animation: puffout .3s ease; }
@keyframes pop { 0% { transform: scale(.4); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes pulse { 50% { transform: scale(1.12); background: #fff2c8; } }
@keyframes puffout { 50% { transform: scale(.7); opacity: .3; } }
.op { font-size: clamp(26px, 4vmin, 40px); font-weight: 800; color: #c9b48c; }
.hammer { width: var(--hammer); height: var(--hammer); border-radius: 50%; background: var(--card); border: 5px solid #e2c89a;
  box-shadow: 0 8px 0 rgba(0,0,0,.12); display: grid; place-items: center; transition: transform .18s, opacity .3s, box-shadow .18s; }
.hammer img { width: 72%; height: 72%; }
.hammer.off { opacity: .55; filter: saturate(.6); }
.hammer.ready { animation: breathe 1.4s ease-in-out infinite; border-color: var(--accent); }
.hammer.jump { animation: jump .6s cubic-bezier(.3,1.6,.5,1) 2; border-color: var(--accent); }
.hammer:active { transform: translateY(5px) scale(.96); box-shadow: 0 3px 0 rgba(0,0,0,.12); }
@keyframes breathe { 50% { transform: scale(1.06); } }
@keyframes jump { 40% { transform: translateY(-22px) rotate(-12deg); } 70% { transform: translateY(0) rotate(6deg); } }

/* ---------- the material bank ---------- */
#bank { position: absolute; left: 0; right: 0; margin-inline: auto; width: fit-content; bottom: var(--bottom-inset);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); max-width: calc(10 * var(--tile) + 9 * var(--gap) + 28px);
  padding: 10px 14px; background: rgba(255,248,234,.85); border-radius: 30px; box-shadow: 0 8px 0 rgba(0,0,0,.1); }
#bank.bounce { animation: bounce .5s ease; }
@keyframes bounce { 30% { transform: translateY(-18px); } 60% { transform: translateY(6px); } }
.tile { position: relative; width: var(--tile); height: var(--tile); border-radius: 22px; display: grid; place-items: center;
  background: var(--c); border: 4px solid rgba(0,0,0,.14); box-shadow: 0 5px 0 rgba(0,0,0,.14); transition: transform .14s, filter .25s, opacity .25s; }
.tile img, .tile .pic { width: 74%; height: 74%; object-fit: contain; pointer-events: none; }
.tile:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.14); }
.tile.pop { animation: pop .3s cubic-bezier(.3,1.6,.5,1); }
.tile.used { filter: saturate(.25) brightness(1.05); opacity: .75; }
.tile.used::after { content: "✓"; position: absolute; right: -6px; top: -6px; width: 30px; height: 30px; border-radius: 50%; background: #2fb34a; color: #fff;
  font-weight: 900; font-size: 20px; display: grid; place-items: center; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.tile.wiggle { animation: wiggle .4s ease; }
@keyframes wiggle { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@media (orientation: portrait) {
  :root { --tile: clamp(72px, 13vw, 100px); }
  #bank { max-width: calc(5 * var(--tile) + 4 * var(--gap) + 28px); }
}

/* ---------- flying picture ---------- */
.flyer { position: fixed; z-index: 40; width: 80px; height: 80px; pointer-events: none; border-radius: 22px; background: var(--c) center/74% no-repeat; border: 4px solid rgba(0,0,0,.14); }

/* ---------- the stamp ---------- */
#stamp { position: absolute; right: 10px; bottom: 4px; font-size: 11px; color: rgba(0,0,0,.35); pointer-events: none; font-family: ui-monospace, monospace; }
#worker { transform-box: fill-box; transform-origin: 50% 100%; pointer-events: none; }