/* Quad Word Guess: home, four boards, the letter keys. Light, indigo and amber, big letters.
   Marks carry a shape as well as a colour: right spot = filled square with a bar,
   other spot = amber circle, not in the word = flat grey. */
:root{--cell:#FFFFFF;--miss:#D9DBE8;--miss-ink:#5F6585}

/* ------------------------------------------------------------------ home */
.home{align-items:center;justify-content:center;gap:1em;padding:1em;text-align:center;overflow:auto}
.home-head{display:flex;flex-direction:column;align-items:center;gap:.35em}
.home-icon{width:4.2em;height:4.2em;border-radius:1em;box-shadow:0 6px 18px rgba(27,31,59,.2)}
.title{font:900 clamp(2em,8.5vw,3.2em)/1.05 var(--sans);letter-spacing:-.01em;margin:0;color:var(--ink)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.1em;font-weight:600;max-width:20em}
.home-body{display:flex;flex-direction:column;align-items:center;gap:.7em;width:min(24em,100%)}
.daily{width:100%;min-height:60px;border:2px solid var(--amber);background:#fff;border-radius:1em;padding:.5em 1em;display:flex;flex-direction:column;align-items:center;gap:.1em;
  box-shadow:0 3px 0 var(--amber-lo),0 6px 16px rgba(27,31,59,.1)}
.daily b{font-size:1.15em}
.daily small{color:var(--ink-soft);font-size:.85em}
.daily.done{border-color:var(--accent);box-shadow:0 3px 0 var(--accent-lo),0 6px 16px rgba(27,31,59,.1)}
.daily:active{transform:translateY(2px)}
.stepper{display:flex;align-items:center;gap:.6em;background:#fff;border-radius:999px;padding:.2em;box-shadow:0 2px 6px rgba(27,31,59,.08)}
.stepper span{min-width:6.5em;font-weight:800;font-size:1.1em}
.step{width:46px;height:46px;border-radius:50%;border:0;background:var(--paper);font-size:1.5em;font-weight:800;line-height:1;color:var(--accent-lo)}
.step:disabled{opacity:.3;cursor:default}
.home .pill{min-width:12em}
.links{display:flex;gap:.1em;justify-content:center;flex-wrap:wrap}
.home > :first-child{margin-top:auto}.home > :last-child{margin-bottom:auto}
.daily:focus-visible,.step:focus-visible,.key:focus-visible,.icon-btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media (orientation:landscape) and (max-height:540px){
  .home{flex-direction:row;gap:1.6em;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.4em}
  html.hw-embed .home-head{padding-top:0}
  .home-icon{width:3em;height:3em}
  .title{font-size:2em}
  .home-body{gap:.45em;flex:0 1 22em}
  .daily{min-height:48px;padding:.3em .8em}
  .home .pill{padding:.45em 1.6em}
}
@media (max-height:440px){.tagline{display:none}.home-icon{display:none}}

/* ------------------------------------------------------------------ play */
.play{display:grid;grid-template:"bar" auto "boards" minmax(0,1fr) "kbd" auto / minmax(0,1fr);
  padding:max(.4em,env(safe-area-inset-top)) max(.4em,env(safe-area-inset-right)) max(.4em,env(safe-area-inset-bottom)) max(.4em,env(safe-area-inset-left));gap:.35em}
.bar{grid-area:bar;display:flex;align-items:center;justify-content:space-between;gap:.5em}
.icon-btn{width:48px;height:48px;border-radius:50%;border:0;background:#fff;display:grid;place-items:center;padding:0;position:relative;box-shadow:0 2px 8px rgba(27,31,59,.12);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:disabled{opacity:.35;cursor:default}
.icon-btn.hint span{position:absolute;right:-3px;top:-3px;min-width:20px;height:20px;border-radius:10px;background:var(--amber-lo);color:#fff;font:800 13px/20px var(--sans);text-align:center}
.where{display:flex;flex-direction:column;align-items:center;gap:.05em;background:#fff;border-radius:1em;padding:.2em .9em;box-shadow:0 2px 8px rgba(27,31,59,.08);min-width:0;text-align:center}
.where b{font-size:1.05em;line-height:1.2}
.where span{font-size:.85em;color:var(--ink-soft);white-space:nowrap;font-weight:600}
.where span.low{color:var(--bad)}
@media (orientation:landscape) and (max-height:480px){
  .play{grid-template:"bar boards" minmax(0,1fr) "bar kbd" auto / auto minmax(0,1fr)}
  .bar{flex-direction:column;justify-content:space-between}
  .where{padding:.3em .4em;border-radius:.8em}
  .where b{font-size:.85em}
  .where span{font-size:.75em;white-space:normal}
}

.boards-wrap{grid-area:boards;position:relative;display:grid;place-items:center;min-height:0;min-width:0}
.boards{display:grid;gap:var(--bg,10px)}
.board{display:grid;grid-template-columns:repeat(5,var(--cw));grid-template-rows:var(--rows);gap:var(--cg,3px);padding:var(--bp,4px);border-radius:12px;
  background:rgba(255,255,255,.55);position:relative;transition:box-shadow .3s,background .3s}
.board.done{background:rgba(70,81,214,.08);box-shadow:0 0 0 2px var(--accent) inset}
.board.found{animation:found .6s ease-out}
@keyframes found{30%{transform:scale(1.05)}60%{transform:scale(.98)}}
.board .badge{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);background:var(--accent);color:#fff;border-radius:999px;padding:.15em .7em;
  font:800 max(12px,calc(var(--fs) * .8))/1.4 var(--sans);white-space:nowrap;box-shadow:0 3px 10px rgba(46,55,163,.3);pointer-events:none}
.board.miss .badge{background:var(--ink-soft)}
.cell{position:relative;display:grid;place-items:center;border-radius:max(3px,calc(var(--ch) * .14));background:var(--cell);border:2px solid var(--hair);
  font:800 var(--fs)/1 var(--sans);text-transform:uppercase;color:var(--ink);user-select:none;-webkit-user-select:none}
.cell.empty{background:rgba(255,255,255,.6);border:1px solid rgba(217,218,234,.8);border-radius:3px}
.cell.cur{border-color:#AEB2CF}
.cell.typed{border-color:var(--ink-soft)}
.cell.typed.pop{animation:pop .14s ease-out}
.cell.ghost{color:rgba(70,81,214,.42)}
.cell.ghost.hinted{animation:pop .3s ease-out;color:rgba(199,123,18,.85)}
.cell.next{border-color:var(--accent-hi)}
.cell.m2{background:var(--accent);border-color:var(--accent);color:#fff}
.cell.m2::after{content:"";position:absolute;left:32%;right:32%;bottom:11%;height:max(2px,calc(var(--ch) * .07));border-radius:2px;background:rgba(255,255,255,.85)}
.cell.m1{background:radial-gradient(circle closest-side,var(--amber) 0 90%,transparent 95%) #fff;border-color:var(--amber);color:var(--ink)}
.cell.m0{background:var(--miss);border-color:var(--miss);color:var(--miss-ink)}
.cell.flip{animation:flip .5s ease-in-out var(--d,0s) both}
@keyframes flip{
  0%{transform:rotateX(0);background:var(--cell);border-color:var(--ink-soft);color:var(--ink)}
  49%{transform:rotateX(90deg);background:var(--cell);border-color:var(--ink-soft);color:var(--ink)}
  50%{transform:rotateX(90deg)}
  100%{transform:rotateX(0)}}
@keyframes pop{40%{transform:scale(1.12)}}
.board.shake .cell.typed{animation:shake .38s}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.boards.won .board{animation:wave .7s ease-out calc(var(--i) * .1s) both}
@keyframes wave{40%{transform:translateY(-8px) scale(1.03)}}
.boards.lost .board:not(.done){opacity:.75}

/* ------------------------------------------------------------------ keys */
.kbd{grid-area:kbd;display:flex;flex-direction:column;gap:6px;width:100%;max-width:44em;margin:0 auto;touch-action:manipulation}
.krow{display:flex;gap:5px;justify-content:center}
.key{flex:1 1 0;min-width:0;height:var(--kh,52px);border:0;border-radius:8px;padding:0;background:#fff;position:relative;overflow:hidden;
  box-shadow:0 2px 0 #C9CBDD,0 3px 8px rgba(27,31,59,.08);font:800 calc(var(--kh,52px) * .42)/1 var(--sans);text-transform:uppercase;color:var(--ink);transition:transform .06s}
.key:active,.key.down{transform:translateY(2px);box-shadow:0 0 0 #C9CBDD}
.key.wide{flex:1.6 1 0;font-size:calc(var(--kh,52px) * .3);text-transform:none}
.key.enter{background:var(--accent);color:#fff;box-shadow:0 2px 0 var(--accent-lo)}
.key.enter.ready{animation:glow 1.2s ease-in-out infinite alternate}
@keyframes glow{to{box-shadow:0 2px 0 var(--accent-lo),0 0 0 4px rgba(109,119,238,.35)}}
.key svg{width:44%;height:44%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;position:relative}
.key .q{position:absolute;inset:0;display:grid;grid-template:1fr 1fr/1fr 1fr;pointer-events:none}
.key .q i{transition:background .25s}
.key .q i.m2{background:var(--accent)}
.key .q i.m1{background:radial-gradient(circle closest-side,var(--amber) 0 85%,transparent 92%)}
.key .q i.m0{background:var(--miss)}
.key .q i.off{background:transparent}
.key b{position:relative;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 6px #fff}
.key.gone{background:var(--miss);color:var(--miss-ink);box-shadow:0 2px 0 #B9BCD0}
.key.gone b{text-shadow:none}

/* the result card */
.card .brand{text-align:center;font-weight:800;font-size:.8em;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin:-.2em 0 .2em}
.card .answers{display:grid;grid-template-columns:1fr 1fr;gap:.4em;margin:.4em 0}
.card .answers span{display:flex;justify-content:space-between;align-items:center;gap:.4em;padding:.35em .7em;border-radius:.6em;background:var(--accent);color:#fff;font-weight:800;letter-spacing:.08em}
.card .answers span.missed{background:var(--miss);color:var(--ink)}
.card .answers small{font-weight:600;letter-spacing:0;opacity:.85}
.card .line{text-align:center;color:var(--ink-soft)}
.card .up{text-align:center;font-weight:800;color:var(--accent)}
.card.result .actions{flex-direction:row;justify-content:center;flex-wrap:wrap}
.card.result .pill{padding:.55em 1.4em}
.how li{margin:.25em 0}
.how{padding-left:1.1em;margin:0}
.how .eg{display:inline-flex;gap:3px;vertical-align:middle;--ch:26px;--cw:26px;--fs:15px}
.how .eg .cell{width:26px;height:26px}
.dist{display:flex;flex-direction:column;gap:3px;margin:.4em 0;font-size:.85em}
.dist div{display:flex;align-items:center;gap:.4em}
.dist i{display:block;height:1.2em;background:var(--accent);border-radius:4px;min-width:1.4em;color:#fff;font-style:normal;font-weight:700;text-align:right;padding:0 .35em;font-size:.85em;line-height:1.2em}
@media (max-height:480px){
  .card.result .stats{display:none}
  .card.result .brand{margin:0}
  .card .answers{grid-template-columns:repeat(4,1fr);gap:.3em;margin:.2em 0}
  .card .answers span{flex-direction:column;gap:0;padding:.2em .3em;font-size:.9em}
}
.toast{bottom:auto;top:22%;z-index:30;pointer-events:none}
.burst{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:15}