/* Anagram Scramble: home, the words to find, the build row, the rack, the tools. Light and calm;
   square paper tiles with a soft edge. Sizes come from game.js (--t tile, --b answer box). */

/* ---------------------------------------------------------------- home */
.home{align-items:center;justify-content:center;gap:1.4em;padding:1.2em;text-align:center}
.home-head,.home-body{display:flex;flex-direction:column;align-items:center;gap:.7em}
.logo{display:flex;gap:.25em}
.logo i{font:700 1.25em/1 var(--sans);font-style:normal;width:1.7em;height:1.7em;display:grid;place-items:center;border-radius:.3em;background:var(--panel);
  box-shadow:0 3px 0 #C9D2DE,0 6px 12px rgba(22,32,43,.08);animation:bob 3s ease-in-out infinite}
.logo i:nth-child(2n){animation-delay:-1.5s;transform:translateY(3px)}
.logo i:nth-child(4){background:#FDE68A;box-shadow:0 3px 0 #E3C35B,0 6px 12px rgba(22,32,43,.08)}
@keyframes bob{50%{transform:translateY(-3px)}}
.title{font:700 clamp(2em,8vw,3.2em)/1.05 var(--sans);margin:0;letter-spacing:-.01em}
.tagline{margin:0;color:var(--ink-soft);font-size:1.1em}
.stepper{display:flex;align-items:center;gap:.8em}
.step{width:50px;height:50px;border-radius:50%;border:1px solid var(--hair);background:var(--panel);font-size:1.5em;line-height:1;display:grid;place-items:center;padding:0}
.step:disabled{opacity:.35;cursor:default}
.step:focus-visible{outline:3px solid var(--accent-hi);outline-offset:2px}
.lv{min-width:8.5em;display:flex;flex-direction:column}
.lv b{font-size:1.25em}
.lv small{color:var(--ink-soft);font-size:.85em}
.home .pill{min-width:12em}
.home .pill.soft small{display:block;font-size:.7em;font-weight:600;opacity:.8}
.links{display:flex;gap:.2em;justify-content:center;flex-wrap:wrap}
@media (max-height:480px){
  .home{flex-direction:row;gap:2em;padding:.6em 1em}
  .home-head{max-width:46%}
  .home-body{gap:.45em}
  .title{font-size:clamp(1.6em,5vw,2.4em)}
  .logo i{width:1.45em;height:1.45em;font-size:1em}
  .home .pill{min-height:46px;padding:.45em 1.6em;font-size:1.05em}
  .step{width:46px;height:46px}
  .links .link{padding:.3em .4em;font-size:.9em}
}
@media (max-height:480px) and (max-width:760px){html:not(.hw-embed) #home{padding-top:58px!important}}

/* ----------------------------------------------------------------- bar */
.play{--t:56px;--b:24px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:.5em;padding:max(.4em,env(safe-area-inset-top)) .6em .3em;flex:none}
.icon-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--hair);background:var(--panel);display:grid;place-items:center;padding:0}
.icon-btn svg,.tool svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:focus-visible,.tool:focus-visible,.tile:focus-visible,.slot:focus-visible{outline:3px solid var(--accent-hi);outline-offset:2px}
.where{display:flex;align-items:baseline;gap:.6em;font-size:1.05em}
.clock{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);background:var(--panel);border:1px solid var(--hair);border-radius:999px;padding:.1em .7em}
.clock.low{color:#fff;background:var(--bad);border-color:var(--bad);animation:tick 1s ease-in-out infinite}
.clock.none{display:none}
@keyframes tick{50%{transform:scale(1.06)}}
.score{min-width:46px;text-align:right;font-weight:700;font-size:1.15em;font-variant-numeric:tabular-nums;position:relative}
.score.bump span{display:inline-block;animation:bump .35s ease-out}
@keyframes bump{40%{transform:scale(1.35);color:var(--accent)}}

/* ------------------------------------------------------------- the main */
.main{flex:1;min-height:0;display:flex;flex-direction:column;gap:.5em;padding:0 .75em max(.6em,env(safe-area-inset-bottom));max-width:1000px;width:100%;margin:0 auto}
.board-side{flex:1;min-height:0;display:flex;flex-direction:column;gap:.35em}
.play-side{flex:none;display:flex;flex-direction:column;align-items:center;gap:calc(var(--t)*.2)}
.play.land .main{flex-direction:row;gap:1em;max-width:none}
.play.land .board-side{flex:1 1 44%}
.play.land .play-side{flex:0 0 auto;justify-content:center}

.goal{flex:none;text-align:center;color:var(--ink-soft);font-size:.95em;display:flex;justify-content:center;gap:.9em;flex-wrap:wrap}
.goal span{display:inline-flex;align-items:center;gap:.3em}
.goal b{color:var(--ink)}
.goal .star{width:1.1em;height:1.1em;fill:none;stroke:var(--gold);stroke-width:2;stroke-linejoin:round}
.goal .got .star{fill:var(--gold)}
.goal .met b{color:var(--good)}

/* the words to find: rows of little boxes, shortest first */
.answers{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;
  gap:calc(var(--b)*.3) calc(var(--b)*.6);overflow:hidden;padding:.2em 0}
.ans{display:flex;gap:max(2px,calc(var(--b)*.08))}
.ans i{width:var(--b);height:var(--b);display:grid;place-items:center;border-radius:calc(var(--b)*.2);background:var(--panel);border:1px solid var(--hair);
  font:700 calc(var(--b)*.62)/1 var(--sans);font-style:normal;text-transform:uppercase;color:var(--ink)}
.ans.full i{border-color:var(--gold);background:#FFFBEB}
.ans i.shown{color:var(--accent)}
.ans.found i{background:var(--accent);border-color:var(--accent);color:#fff;animation:flip .45s ease-out backwards}
.ans.full.found i{background:var(--gold);border-color:var(--gold);color:#3B2A00}
.ans.missed i{color:var(--ink-dim);background:var(--paper)}
.ans.again i{animation:ping .5s ease-out}
@keyframes flip{from{transform:rotateX(90deg)}}
@keyframes ping{40%{transform:scale(1.2);box-shadow:0 0 0 3px var(--accent-hi)}}

/* the build row and the rack: same tile, the build row has sockets */
.build,.rack{display:flex;gap:calc(var(--t)*.12);justify-content:center}
.slot,.tile{width:var(--t);height:var(--t);border-radius:calc(var(--t)*.18);display:grid;place-items:center;padding:0;
  font:700 calc(var(--t)*.56)/1 var(--sans);text-transform:uppercase;color:var(--ink)}
.slot{border:2px dashed #C3CCD8;background:transparent}
.slot.on{border:0;background:var(--panel);box-shadow:0 3px 0 #9DB6F5,0 6px 12px rgba(22,32,43,.1);color:var(--accent-lo);animation:land .16s ease-out}
.slot:not(.on){pointer-events:none}
@keyframes land{from{transform:translateY(calc(var(--t)*.5)) scale(.8);opacity:.3}}
.tile{border:0;background:var(--panel);box-shadow:0 4px 0 #C9D2DE,0 8px 14px rgba(22,32,43,.1);transition:transform .12s,opacity .12s,box-shadow .12s}
.tile:active{transform:translateY(2px);box-shadow:0 2px 0 #C9D2DE,0 4px 8px rgba(22,32,43,.1)}
.tile.used{opacity:.22;transform:scale(.86);box-shadow:none;background:#E5E9EF;color:transparent}
.build.good .slot.on{background:var(--good);color:#fff;box-shadow:0 3px 0 #0F5E2C}
.build.dupe .slot.on{background:#EEF2F6;color:var(--ink-soft)}
.build.no{animation:shake .32s}
.rack.no{animation:shake .32s}
@keyframes shake{20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}

.tools{display:flex;gap:.55em;justify-content:center;align-items:center}
.tool{height:50px;min-width:50px;border-radius:999px;border:1px solid var(--hair);background:var(--panel);display:inline-flex;align-items:center;justify-content:center;gap:.25em;padding:0 .8em;position:relative}
.tool:disabled{opacity:.4;cursor:default}
.tool .n{font-weight:700;font-size:.9em}
.tool.go{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;min-width:6.2em;padding:0 1.2em;box-shadow:0 2px 0 var(--accent-lo)}
.tool.go:active{transform:translateY(2px);box-shadow:none}

/* points that float up from the score; the long word's banner */
.float{position:fixed;z-index:15;font-weight:800;color:var(--accent);pointer-events:none;animation:rise .9s ease-out forwards;font-size:1.2em}
.float.big{color:#B7791F;font-size:1.6em}
@keyframes rise{to{transform:translateY(-48px);opacity:0}}
.burst{position:fixed;inset:0;pointer-events:none;z-index:19}

/* result card */
.card.result{text-align:center}
.card .brand{font-size:.8em;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin:-.2em 0 .3em;font-weight:600}
.card .reveal{display:flex;justify-content:center;gap:.25em;margin:.2em 0 .5em}
.card .reveal i{font:700 1.3em/1 var(--sans);font-style:normal;width:1.7em;height:1.7em;display:grid;place-items:center;border-radius:.3em;background:#FFFBEB;border:1px solid var(--gold);text-transform:uppercase;animation:flip .4s ease-out backwards}
.card .sum{margin:.2em 0 .5em;color:var(--ink-soft)}
.card .sum b{color:var(--ink)}
.card .list{display:flex;flex-wrap:wrap;gap:.3em .5em;justify-content:center;max-height:7.5em;overflow:auto;font-size:.85em;padding:.3em;border-radius:.6em;background:var(--paper)}
.card .list span{color:var(--ink-dim)}
.card .list span.got{color:var(--ink);font-weight:700}
.card .help{margin:0;padding-left:1.1em}
.card .help li{margin:.25em 0}
.card kbd{font:600 .85em var(--sans);border:1px solid var(--hair);border-bottom-width:2px;border-radius:.3em;padding:0 .35em;background:var(--paper)}
@media (max-height:480px){
  .card .reveal i{width:1.4em;height:1.4em;font-size:1.1em}
  .card .list{max-height:3.6em}
}
.row .toggle{pointer-events:none}
.row[aria-pressed=true] .toggle{background:var(--accent)}
.row[aria-pressed=true] .toggle::after{left:1.5em}
.toast{top:max(3.4em,calc(env(safe-area-inset-top) + 3em));bottom:auto}