/* Sliding 15 Puzzle: a calm light table (Nordic: soft grey, one teal accent), big friendly tiles. */
:root{--bg:#EDF1F3;--bg2:#DFE6EA;--paper:#FFFFFF;--ink:#1B2730;--ink-soft:#4B5B66;--ink-dim:#7A8892;--line:rgba(27,39,48,.14);
  --teal:#14806F;--teal-lo:#0D5E52;--teal-hi:#E2F3EF;--tray:#C9D4DA;color-scheme:light}
body{background:radial-gradient(120% 90% at 50% 0%,#F8FAFB,var(--bg) 55%,var(--bg2));color:var(--ink);font-size:19px}
.screen{background:none}

/* type and buttons */
.title{font:800 clamp(2.1em,7.5vmin,3.6em)/1.02 var(--sans);color:var(--ink);text-shadow:none;letter-spacing:-.015em;text-wrap:balance}
.pill{font:700 1.15em/1 var(--sans);color:#fff;background:var(--teal);box-shadow:0 2px 0 var(--teal-lo),0 8px 18px rgba(20,128,111,.28);
  min-height:52px;padding:.8em 2.6em;transition:transform .08s,filter .15s}
.pill:hover{filter:brightness(1.06)}
.pill:active{transform:translateY(2px);box-shadow:0 0 0 var(--teal-lo),0 4px 10px rgba(20,128,111,.25)}
.link{color:var(--teal);min-height:44px;font-weight:600;font-size:1em}
.jewel{width:48px;height:48px;border:1px solid var(--line);background:var(--paper);box-shadow:0 1px 3px rgba(20,30,40,.12);transition:transform .08s}
.jewel:active{transform:scale(.94)}
.jewel svg{stroke:var(--ink)}
.jewel[aria-pressed=true]{background:var(--teal);border-color:var(--teal)}
.jewel[aria-pressed=true] svg{stroke:#fff}
.jewel:disabled{opacity:.38}
.jewel:focus-visible,.pill:focus-visible,.link:focus-visible,.choice:focus-visible,.toggle:focus-visible,.row:focus-visible,.board.play:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.board.play:focus{outline:none}

/* cards */
.veil{background:rgba(27,39,48,.38)}
.card{background:var(--paper);border:1px solid var(--line);box-shadow:0 20px 50px rgba(20,30,40,.25);color:var(--ink)}
.card h2{font:800 1.5em/1.15 var(--sans);color:var(--ink)}
.card .x{border-color:var(--line);color:var(--ink);width:44px;height:44px}
.card .x svg{stroke:var(--ink)}
.card > .row{margin-top:.45em;min-height:48px;color:var(--ink)}
.card > .row small{color:var(--ink-soft)}
.row{background:var(--bg);border-color:var(--line)}
.choice{border-color:var(--line);background:var(--bg);color:var(--ink);min-width:3em;min-height:44px;font-weight:700;font-size:1.05em}
.choice[aria-pressed=true]{background:var(--teal);color:#fff;border-color:var(--teal)}
.choice:disabled{opacity:.45;cursor:default}
.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:.4em}
.levels .choice{padding:.35em 0;min-width:0}
.styles{justify-content:center;margin-top:.2em}
.styles .choice{min-width:6.5em}
.toggle{background:#C3CDD4;border-color:var(--line);width:3.2em;height:1.8em}
.toggle::after{background:#fff}
.toggle[aria-pressed=true]{background:var(--teal)}
.toggle[aria-pressed=true]::after{background:#fff;left:1.55em}
.stats{color:var(--ink-soft)}
.stats b{font:800 1.7em/1.1 var(--sans);color:var(--ink)}
.note{color:var(--ink-soft);margin:.3em 0}
.note.big{font-size:1.15em;color:var(--ink);font-weight:700}
.card .rows .note{text-align:left;margin:0}
.toast{background:var(--ink);color:#fff;border:0}

/* the tray and its tiles (board, home preview and peek share them) */
.tray{position:relative;padding:var(--pad,10px);border-radius:18px;background:linear-gradient(180deg,#CFD9DF,var(--tray));
  box-shadow:inset 0 2px 6px rgba(20,30,40,.22),0 1px 0 #fff,0 14px 30px rgba(20,30,40,.12)}
.board{position:relative;left:auto;top:auto;--g:max(3px,calc(var(--cell)*.055))}
.tile{position:absolute;left:0;top:0;width:var(--cell);height:var(--cell);padding:calc(var(--g)/2);border:0;background:none;margin:0;
  box-shadow:none;border-radius:0;filter:none;opacity:1;transition:transform .14s cubic-bezier(.25,1.3,.5,1);will-change:transform;touch-action:none;-webkit-user-select:none;user-select:none}
.board.still .tile{transition:none}
.face{display:grid;place-items:center;width:100%;height:100%;border-radius:calc(var(--cell)*.14);position:relative;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF,#F1F4F6);box-shadow:0 calc(var(--cell)*.035) 0 #B9C5CC,0 calc(var(--cell)*.06) calc(var(--cell)*.1) rgba(20,30,40,.2)}
.num{font:800 calc(var(--cell)*.44)/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;transition:color .2s}
.tile.ok .num{color:var(--teal)}
.tile.ok .face:not(.pic){background:linear-gradient(180deg,#FFFFFF,var(--teal-hi))}
.face.pic{background-repeat:no-repeat;background-color:#888}
.face.pic::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.18)}
.badge{position:absolute;left:6%;top:5%;font:800 calc(var(--cell)*.2)/1 var(--sans);color:#fff;background:rgba(20,30,40,.55);
  border-radius:999px;padding:.2em .42em;min-width:1.5em;text-align:center}
.tile.ok .badge{background:rgba(20,128,111,.85)}
.face.done{background:linear-gradient(180deg,#2BA38F,var(--teal))}
.face.done .num{color:#fff}
.tile.pop .face{animation:pop .3s ease-out}
.tile.shake{animation:none}
.tile.shake .face{animation:shake .28s}
.tile:focus{outline:none}.tile:focus-visible .face{outline:3px solid var(--teal);outline-offset:-3px}
.tile.wave .face{animation:wave .5s ease-out var(--d) both}
.tile.last .face{animation:landin .35s ease-out both}
.tile.last.wave .face{animation:landin .35s ease-out both,wave .5s ease-out calc(var(--d) + .3s) both}
@keyframes pop{40%{transform:scale(1.07)}}
@keyframes shake{20%{transform:translateX(-5%)}50%{transform:translateX(4%)}80%{transform:translateX(-2%)}}
@keyframes wave{40%{transform:translateY(-12%) scale(1.06);filter:brightness(1.12)}}
@keyframes landin{from{opacity:0;transform:scale(.4)}}
.board.solved .tile{cursor:default}
.board.mini .tile{transition:none}
.peek-layer{position:absolute;inset:var(--pad,10px);border-radius:12px;background:rgba(237,241,243,.94);z-index:3;display:grid;place-items:center;cursor:pointer;animation:fade .15s}
.peek-layer .board{opacity:.95}
@keyframes fade{from{opacity:0}}
.fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:15}

/* home: preview and words side by side when wide, stacked when tall */
.home{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(1em,5vw,3.2em);padding:1.2em;text-align:center}
.home-art{position:relative;flex:none}
.home-art .tray{--pad:8px}
.thumb-tag{position:absolute;left:50%;bottom:-.8em;transform:translateX(-50%);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.3em .9em;font-size:.82em;font-weight:700;white-space:nowrap;box-shadow:0 2px 6px rgba(20,30,40,.1)}
.home-side{display:flex;flex-direction:column;align-items:center;gap:.7em;max-width:22em}
.tagline{color:var(--ink-soft);text-shadow:none;margin:0}
.links{display:flex;gap:.4em;flex-wrap:wrap;justify-content:center}
.streak{color:var(--ink-soft);margin:0;font-size:.9em}
@media (orientation:portrait){.home{flex-direction:column;gap:1.7em}}
@media (max-height:440px){.home{padding:.5em 1em}.home .title{font-size:2em}.home-side{gap:.25em}.pill{min-height:48px;padding:.6em 2.2em}.tagline{font-size:.9em}}

/* the game: bar over the board, or beside it on a short wide screen */
#game{display:flex;flex-direction:column}
.bar{width:min(100%,max(var(--S,320px) + 24px,330px));margin:0 auto;padding:max(.5em,env(safe-area-inset-top)) max(.6em,env(safe-area-inset-right)) .2em max(.6em,env(safe-area-inset-left))}
.status{display:flex;flex-direction:column;align-items:center;line-height:1.2;min-width:0;text-align:center}
.lvl-name{font-weight:800;font-size:1.05em;white-space:nowrap}
.count{color:var(--ink-soft);font-size:.92em;font-variant-numeric:tabular-nums;white-space:nowrap}
.tools{display:flex;gap:.45em}
.felt{flex:1;position:relative;min-height:0;display:grid;place-items:center;overflow:hidden}
.felt .tray{--pad:clamp(6px,1.4vmin,12px)}
.board.play{touch-action:none}
@media (orientation:landscape) and (max-height:540px){
  #game{flex-direction:row}
  .bar{flex-direction:column;justify-content:center;width:auto;margin:0;gap:.6em;padding:.5em .3em .5em max(.6em,env(safe-area-inset-left))}
  .bar .tools{flex-direction:column}
  .status{font-size:.82em;max-width:7.5em}
  .lvl-name{white-space:normal}
  .count{white-space:normal}
  .felt{padding-right:max(0px,env(safe-area-inset-right))}
}
@media (max-height:480px){.card .stats{margin:0;gap:1.2em}.card .stats b{font-size:1.3em}.card .note{margin:.1em 0}.card .note.big{font-size:1em}.card > .row{margin-top:0}}
@media (max-height:480px){.card .rows{gap:.15em}.card .rows .note{font-size:.88em;line-height:1.3}.card .pill{min-height:44px;padding:.5em 2em}.card > .note{font-size:.88em}}
.card > .row.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.card > .row.primary small{color:#E2F3EF}
@media (max-height:480px){.card:has(.levels){width:min(36em,100%)}.levels{grid-template-columns:repeat(10,1fr);gap:.3em}.levels .choice{min-height:44px}.styles .choice{min-height:44px;padding:.3em .8em}}