/* Word Grid: home, the bar, the letters, the found words. Light and plain, letters big. */

/* ------------------------------------------------------------------ home */
.home{align-items:center;justify-content:center;gap:1.1em;padding:1em;text-align:center;overflow:auto}
.home-head{display:flex;flex-direction:column;align-items:center;gap:.35em}
.home-icon{width:4em;height:4em;border-radius:1em;box-shadow:0 6px 18px rgba(31,85,184,.25)}
.title{font:900 clamp(2.2em,9vw,3.4em)/1 var(--sans);letter-spacing:-.01em;margin:0;color:var(--ink)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.05em}
.home-body{display:flex;flex-direction:column;align-items:center;gap:.7em;width:min(24em,100%)}
.home .choices{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:.4em}
.home .choice{font-weight:600}
.home .pill{min-width:12em}
.home .row.daily{max-width:24em}
.row .go{font-size:1.6em;line-height:1;color:var(--accent)}
.row.daily.done b::after{content:" ✓";color:var(--good)}
.links{display:flex;gap:.2em;justify-content:center;flex-wrap:wrap}
.home > :first-child{margin-top:auto}.home > :last-child{margin-bottom:auto}
@media (orientation:landscape) and (max-height:520px){
  .home{flex-direction:row;gap:1.4em;padding:.5em 1em}
  .home > *{margin-block:auto!important}
  html:not(.hw-embed) body:has(#home:not([hidden])) #home.home{padding-top:.5em!important}
  .home-head{flex:0 1 auto;padding-top:2.6em}
  html.hw-embed .home-head{padding-top:0}
  .home-icon{width:3em;height:3em}
  .title{font-size:2.1em}
  .home-body{gap:.4em;flex:0 1 21em}
  .home .choice{padding:.3em .5em}
  .home .row.daily{padding:.3em .8em}
  .home .pill{padding:.5em 1.6em}
}
@media (max-height:420px){.tagline{display:none}}

/* ---------------------------------------------------------------- game */
#game{display:grid;gap:.35em;padding:max(.45em,env(safe-area-inset-top)) .7em max(.45em,env(safe-area-inset-bottom));
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr) auto minmax(4.6em,21%);
  grid-template-areas:"bar" "meter" "word" "felt" "dock" "found";max-width:40em;margin:0 auto}
.bar{grid-area:bar;display:flex;align-items:center;justify-content:space-between;gap:.6em}
.meter{grid-area:meter;position:relative;height:1.35em;border-radius:999px;background:#E3E8EE;overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--accent-hi),var(--accent));border-radius:999px;transition:width .35s ease-out}
.meter.met i{background:linear-gradient(90deg,#3FB57A,var(--good))}
.meter span{position:relative;display:block;text-align:center;font:700 .72em/1.9 var(--sans);color:var(--ink)}
.word{grid-area:word;height:1.9em;display:flex;align-items:center;justify-content:center;font:800 1.45em/1 var(--sans);letter-spacing:.08em;color:var(--ink);white-space:nowrap;overflow:hidden}
.word.ready{color:var(--good)}
.word.dupe{color:var(--ink-dim)}
.word.off{color:var(--bad);opacity:.75}
.word.msg{font-size:1.05em;letter-spacing:0;font-weight:700}
.word.msg.good{color:var(--good)}
.word.msg.bad{color:var(--ink-soft)}
.felt{grid-area:felt;position:relative;min-height:0;min-width:0;display:grid;place-items:center}
.dock{grid-area:dock;display:flex;align-items:center;justify-content:center;gap:.7em}
.dock .pill{padding:.5em 1.5em;min-width:0}
.bar .finish{padding:.45em 1.1em;min-height:44px;font-size:1em}
.found{grid-area:found;min-height:0;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--hair);border-radius:1em;padding:.4em .6em;overflow:hidden}
.found-head{font-size:.85em;color:var(--ink-soft);padding:0 .2em .25em}
.found ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3em;overflow-y:auto;min-height:0;align-content:flex-start;overscroll-behavior:contain}
.found li{background:#EAF1FD;color:var(--accent-lo);border-radius:.6em;padding:.12em .5em;font-weight:700;font-size:.92em;text-transform:uppercase;letter-spacing:.03em}
.found li.new{animation:chip .4s ease-out}
.found li.flash{animation:flash .6s}
@keyframes chip{from{transform:scale(.4);opacity:0}}
@keyframes flash{30%{background:#FCE7B0;color:#7A5200}}
.icon-btn{width:48px;height:48px;border-radius:14px;border:1px solid var(--hair);background:var(--panel);display:grid;place-items:center;padding:0;flex:none}
.icon-btn svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn:focus-visible{outline:3px solid var(--accent-hi);outline-offset:2px}
.clock{font:800 1.5em/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);min-width:3.2em;text-align:center}
.clock.low{color:var(--bad);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.55}}
.score{display:flex;align-items:baseline;gap:.3em;min-width:4.5em;justify-content:flex-end}
.score b{font:900 1.6em/1 var(--sans);font-variant-numeric:tabular-nums}
.score b.bump{animation:bump .35s}
.score small{color:var(--ink-soft);font-size:.85em}
@keyframes bump{40%{transform:scale(1.3);color:var(--good)}}

/* wide screens: the letters on the left, everything else beside them */
@media (min-aspect-ratio:11/10){
  #game{max-width:none;grid-template-columns:min(calc(100vh - 1.1em),54vw,40em) minmax(12em,26em);justify-content:center;column-gap:1.2em;
    grid-template-rows:auto auto auto minmax(0,1fr) auto;grid-template-areas:"felt bar" "felt meter" "felt word" "felt found" "felt dock"}
  .felt{height:100%}
  .dock{padding-bottom:.1em}
}

/* the letters */
.board{position:relative;border-radius:6%;background:#DCE3EB;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .35s ease-in-out;outline:none}
.board:focus-visible{box-shadow:0 0 0 3px var(--accent-hi)}
.cell{position:absolute;display:grid;place-items:center;border-radius:16%;background:linear-gradient(180deg,#fff,#F4F6F9);
  box-shadow:0 2px 0 #C3CCD6,0 4px 10px rgba(22,32,43,.08);color:var(--ink);font-weight:800;transition:background .12s,color .12s,transform .12s}
.cell span{display:block;transition:transform .35s ease-in-out;line-height:1;pointer-events:none}
.cell span.qu{font-size:.78em;letter-spacing:-.03em}
.cell.sel{background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:#fff;box-shadow:0 2px 0 var(--accent-lo),0 4px 12px rgba(31,85,184,.3);transform:scale(.96)}
.cell.cur{outline:3px solid #F2B233;outline-offset:2px}
.cell.good{background:linear-gradient(180deg,#4FC489,var(--good));color:#fff;box-shadow:0 2px 0 #176641}
.cell.dupe{background:linear-gradient(180deg,#FCE7B0,#F2C95C);color:#4A3400}
.cell.bad{animation:shake .32s}
@keyframes shake{25%{translate:-4px 0}75%{translate:4px 0}}
.board svg.trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.trail polyline{fill:none;stroke:#F2B233;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.board.paused .cell span{filter:blur(9px);opacity:.5}
canvas.burst{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}

/* cards */
.card.result{display:flex;flex-direction:column}
.card.result > *{flex:none}
.card.result .allwords{flex:1 1 auto;min-height:2.6em;overflow-y:auto;display:flex;flex-wrap:wrap;gap:.3em;align-content:flex-start;margin:.3em 0;padding:.2em;
  list-style:none;border-top:1px solid var(--hair);padding-top:.5em}
.allwords li{border-radius:.5em;padding:.1em .45em;font-size:.85em;text-transform:uppercase;letter-spacing:.03em;background:var(--paper);color:var(--ink-dim)}
.allwords li.got{background:#E3F4EA;color:#176641;font-weight:700}
.result .big{display:flex;justify-content:center;gap:1.6em;text-align:center;color:var(--ink-soft);font-size:.85em}
.result .big b{display:block;color:var(--ink);font:900 1.7em/1.1 var(--sans)}
.card .rules{margin:0;padding-left:1.2em}
.card .rules li{margin:.25em 0}
.pts{display:grid;grid-template-columns:repeat(5,1fr);gap:.3em;text-align:center;margin:.6em 0 .2em;font-size:.85em;color:var(--ink-soft)}
.pts b{display:block;color:var(--ink);font-size:1.25em}
@media (max-height:440px){
  .card{padding:.8em 1.1em .7em}
  .card h2{font-size:1.25em;margin-bottom:.3em}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.4em}
  .card .actions .pill{padding:.45em 1.6em}
  .result .big{font-size:.78em}
}
.result .brand{margin:-.5em 0 .5em;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.72em}
.toast{pointer-events:none}