.screen{min-height:100dvh}
.hidden{display:none !important}

/* ----- menu ----- */
.menu-wrap{max-width:720px;padding:clamp(16px,4vh,40px) 20px 32px}
.menu-wrap h1{margin:0 0 .1em}
.menu-wrap .sub{margin:0 0 clamp(20px,4vh,36px)}
.pick{margin:0 0 clamp(18px,3.5vh,32px)}
.pick-title{
  text-align:center;font-size:clamp(1rem,2.2vw,1.35rem);font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;
  margin:0 0 .6em;color:var(--navy);opacity:.62;
}
.levels,.sets{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:0}
.btn.set{font-size:1.15rem;padding:.65em .5em;border-radius:20px;display:grid;gap:.15em;background:var(--cream);opacity:.72}
.btn.set span{font-size:.85rem;opacity:.7}
.btn.set.is-on{opacity:1;background:var(--ice);box-shadow:0 5px 0 rgba(16,26,61,.25),0 0 0 4px var(--navy) inset}
.pick-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));column-gap:22px}
/* numbers have no upper or lower case, so that row goes quiet */
.pick.is-off{opacity:.4;pointer-events:none}
.btn.level{font-size:1.5rem;padding:.85em .5em;border-radius:24px;display:grid;gap:.15em}
.btn.level span{font-size:1rem;opacity:.6}
.btn.level:nth-child(1){background:var(--sky)}
.btn.level:nth-child(2){background:var(--sun)}
.btn.level:nth-child(3){background:var(--peach)}
.btn.level:nth-child(4){background:var(--orange);color:var(--cream)}
.btn.level:nth-child(4) span{opacity:.85}
.back{text-align:center;margin:clamp(10px,2.5vh,22px) 0 0}

/* ----- play layout: 1 narrow side col + big board ----- */
.layout{
  display:grid;grid-template-columns:minmax(150px,26vw) 1fr;
  gap:clamp(8px,2vw,24px);padding:clamp(8px,2vw,20px);
  height:100dvh;
}
.side{display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  width:100%;max-width:min(100%,44vh);margin:0 auto}
.target-box{
  background:var(--cream);border-radius:26px;padding:.55em;text-align:center;
  width:100%;max-width:min(100%,24vh);flex:none;
  position:relative;z-index:2;  /* the open lid tucks behind it */
  box-shadow:0 6px 0 rgba(16,26,61,.08);
}
.target-label{
  font-size:clamp(1.4rem,3.8vw,2.4rem);font-weight:800;line-height:1.1;
  display:flex;align-items:center;justify-content:center;gap:.3em;opacity:.9;
}
.target-label .magnifier{width:1.15em;height:1.15em;flex:none;color:var(--navy)}
.target{
  /* letter matches the board tiles */
  font-size:clamp(1.2rem,5vw,3.2rem);font-weight:800;
  aspect-ratio:1;display:grid;place-items:center;
  border-radius:18%;margin:.55em auto 0;width:100%;
  box-shadow:0 5px 0 rgba(16,26,61,.2);
}

/* ----- toy chest ----- */
.chest{width:100%;max-width:270px;aspect-ratio:1/.95;position:relative;margin:auto 0 6%;flex:none}
.chest.hauled{ /* backdrop of the win panel; size and centring set in JS */
  position:absolute;left:50%;top:50%;max-width:none;z-index:0;
}
.win-back{position:absolute;inset:0;display:grid;place-items:center;z-index:0;pointer-events:none;overflow:visible}
.chest-body{
  position:absolute;bottom:0;left:0;right:0;height:62%;
  background:linear-gradient(var(--peach),var(--orange) 55%,#c96a1c);border-radius:10px 10px 16px 16px;
  box-shadow:inset 0 -8px 0 rgba(16,26,61,.12),0 6px 0 rgba(16,26,61,.2);
}
.chest-latch{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:22%;height:34%;background:var(--sun);border-radius:6px;box-shadow:0 2px 0 rgba(16,26,61,.15)
}
.chest-lid{
  position:absolute;bottom:60%;left:0;right:0;height:36%;
  background:linear-gradient(var(--tan),var(--peach));border-radius:16px 16px 6px 6px;
  transform-origin:bottom left;transform:rotate(-34deg) translateY(-4px);
  box-shadow:0 5px 0 rgba(16,26,61,.22);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.chest.shut .chest-lid{transform:rotate(0deg)}
.chest.bump{animation:bump .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes bump{
  0%{transform:translateY(0) scale(1,1)}
  28%{transform:translateY(9px) scale(1.14,.84)}
  60%{transform:translateY(-4px) scale(.94,1.09)}
  100%{transform:translateY(0) scale(1,1)}
}
.chest.bump .chest-lid{animation:lidflap .42s ease-out}
@keyframes lidflap{35%{transform:rotate(-46deg)}}
[hidden]{display:none !important}
.side-btns{display:flex;gap:clamp(6px,1.5vw,14px);width:100%;justify-content:center;flex:none}
.btn.tiny{
  flex:1 1 0;min-width:0;display:grid;place-items:center;
  font-size:clamp(1.8rem,7vw,3.4rem);padding:.22em 0;line-height:1;
  border-radius:26px;text-decoration:none;
}
.btn.tiny .fs-icon{width:1em;height:1em;color:var(--navy)}
.fs-out{display:none}                       /* shown once we are full screen */
.btn.tiny.is-full .fs-in{display:none}
.btn.tiny.is-full .fs-out{display:inline}

/* ----- board ----- */
.board-area{display:flex;align-items:center;justify-content:center;min-width:0}
.board{
  display:grid;touch-action:none;gap:clamp(4px,1vw,12px);
  width:min(100%,calc(100dvh - 40px));aspect-ratio:1;
}
.tile{
  border:0;font:inherit;font-weight:800;color:var(--navy);
  border-radius:18%;display:grid;place-items:center;cursor:pointer;
  font-size:clamp(1.2rem,5vw,3.2rem);
  box-shadow:0 6px 0 rgba(16,26,61,.12);
  touch-action:none;              /* taps never turn into scrolls */
  transition:transform .12s ease, box-shadow .12s ease;
}
.tile.grab{ /* held under a finger: lifted, and follows the drag */
  z-index:5;transition:none;cursor:grabbing;
  box-shadow:0 12px 18px rgba(16,26,61,.28),0 6px 0 rgba(16,26,61,.12);
}
/* the symbol turns on its own, so the tile's press/drag/fall transforms stay free */
.glyph{display:inline-block;line-height:1}
.tile.empty{background:rgba(253,246,221,.35);box-shadow:none;cursor:default;color:transparent}

/* ----- flying tiles ----- */
.fly-layer{position:fixed;inset:0;pointer-events:none;z-index:20}
.flyer{
  position:fixed;display:grid;place-items:center;font-weight:800;color:var(--navy);
  border-radius:18%;box-shadow:0 6px 0 rgba(16,26,61,.12);
  will-change:transform;
}
/* still on the board, waiting its turn to leave — a small eager wiggle */
.flyer.queued{animation:queued .7s ease-in-out infinite}
@keyframes queued{50%{transform:scale(1.04) rotate(-1.5deg)}}

/* ----- win banner ----- */
.win{position:fixed;inset:0;background:rgba(199,232,251,.72);display:grid;place-items:center;z-index:30}
.win-card{
  position:relative;text-align:center;
  /* extra head-room so the chest's lid and latch stay visible above the text */
  padding:clamp(60px,15vh,130px) 16px 16px;
  min-width:min(80vw,340px);
  display:grid;justify-items:center;gap:14px;
  animation:pop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop{from{transform:scale(.5);opacity:0}}
/* white backers keep the text and buttons readable on top of the chest */
.win-hat{
  position:relative;z-index:1;background:#fff;border-radius:28px;padding:10px 26px;
  box-shadow:0 8px 0 rgba(16,26,61,.12),0 16px 34px rgba(16,26,61,.2);
}
.win-emoji{font-size:3.4rem;line-height:1}
.win-card h2{margin:.05em 0;font-size:2.4rem}
.win-card p{margin:0;opacity:.7}
.win-btns{
  position:relative;z-index:1;display:flex;gap:12px;justify-content:center;
  background:#fff;border-radius:999px;padding:12px 14px;
  box-shadow:0 8px 0 rgba(16,26,61,.12),0 16px 34px rgba(16,26,61,.2);
}
.btn.big{font-size:1.7rem;padding:.45em .7em;background:var(--sky);display:grid;gap:.05em;line-height:1.05}
.btn.big span{font-size:.62em;font-weight:800}
#btn-up{background:var(--orange);color:var(--cream)}  /* harder level */
#btn-next{background:var(--grass)}                    /* play again */

@media (max-width:560px){
  .layout{grid-template-columns:minmax(84px,26vw) 1fr}
  .board{width:min(100%,68dvh)}
}