/* Word Groups: home, the bar, the board of words, the bands. Light and plain, words big. */
:root{--l0:#BFE8CF;--l1:#FFD6A5;--l2:#F7B7C6;--l3:#4A5A78;--l0d:#7FCF9E;--l1d:#FFBE73;--l2d:#F28CA6;--l3d:#4A5A78}

/* ------------------------------------------------------------------ home */
.home{align-items:center;justify-content:center;gap:1.1em;padding:1em;text-align:center;overflow:hidden}
.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(31,85,184,.22)}
.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.08em}
.home-body{display:flex;flex-direction:column;align-items:center;gap:.8em;width:min(24em,100%)}
.home .pill{min-width:12em}
.home .row.daily{max-width:22em;background:var(--panel)}
.home .row.daily .mark{font-weight:800;color:var(--good);white-space:nowrap}
.links{display:flex;gap:.1em;justify-content:center;flex-wrap:wrap}
@media (orientation:landscape) and (max-height:520px){
  .home{flex-direction:row;gap:1.6em;padding:.6em 1em}
  html:not(.hw-embed) body:has(#home:not([hidden])) #home.home{padding-top:.6em!important}
  .home-head{padding-top:2.4em}
  html.hw-embed .home-head{padding-top:0}
  .home-icon{width:3em;height:3em}
  .title{font-size:2.1em}
  .home-body{gap:.5em;flex:0 1 20em}
}
@media (max-height:420px){.tagline{display:none}}

/* ---------------------------------------------------------------- game */
#game{flex-direction:column}
.side{display:contents}
.bar{order:0;display:flex;align-items:center;gap:.7em;padding:max(.5em,env(safe-area-inset-top)) .8em .2em}
.label{display:flex;flex-direction:column;line-height:1.15}
.label b{font-size:1.15em}
.label small{color:var(--ink-soft);font-size:.85em}
.felt{order:1;flex:1;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;padding:6px 10px;overflow:hidden}
.tries{order:2;display:flex;align-items:center;justify-content:center;gap:.6em;color:var(--ink-soft);font-size:.95em;min-height:30px}
.pips{display:flex;gap:7px}
.pips i{width:14px;height:14px;border-radius:50%;background:var(--ink);transition:transform .25s,background .25s,opacity .25s}
.pips i.used{background:transparent;box-shadow:inset 0 0 0 2px var(--hair);transform:scale(.8)}
.pips i.pop{animation:pip .4s}
@keyframes pip{40%{transform:scale(1.5);background:var(--bad)}}
.dock{order:3;display:flex;justify-content:center;gap:.6em;padding:.35em .6em max(.7em,env(safe-area-inset-bottom))}
.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}
.act{min-height:48px;min-width:6.2em;padding:0 1.1em;border-radius:999px;border:2px solid var(--ink);background:var(--panel);font-weight:700;font-size:1em}
.act.go{background:var(--accent);border-color:var(--accent);color:#fff}
.act:disabled{opacity:.38;cursor:default}
.act:not(:disabled):active{transform:translateY(1px)}
.icon-btn:focus-visible,.act:focus-visible{outline:3px solid var(--accent-hi);outline-offset:2px}

/* a short, wide screen (a phone on its side, a small frame): the controls go in a side column */
@media (orientation:landscape) and (max-height:520px){
  #game{flex-direction:row}
  .side{display:flex;flex-direction:column;justify-content:center;gap:.55em;padding:.5em 0 .5em max(.6em,env(safe-area-inset-left));flex:none;width:10.2em}
  .bar{padding:0;gap:.5em}
  .tries{flex-direction:column;gap:.25em;min-height:0}
  .dock{flex-direction:column;padding:0;gap:.45em}
  .act{min-width:0;width:100%;min-height:44px}
  .felt{padding:6px max(10px,env(safe-area-inset-right)) 6px 10px}
}

/* --------------------------------------------------------------- board */
.board{position:relative;flex:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.board.paused .tile .face,.board.paused .band{filter:blur(7px)}
.tile{position:absolute;left:0;top:0;padding:0;border:0;background:none;width:var(--tw);height:var(--th);
  transform:translate(var(--x),var(--y));transition:transform .26s cubic-bezier(.3,.7,.2,1);z-index:1}
.board.snap .tile{transition:none}
.tile .face{position:absolute;inset:0;display:grid;place-items:center;border-radius:12px;padding:0 6px;
  background:var(--panel);box-shadow:0 0 0 1.5px var(--hair) inset,0 2px 0 #D5DCE4,0 3px 8px rgba(22,32,43,.06);
  color:var(--ink);font-weight:700;line-height:1.1;text-align:center;transition:transform .12s,background .12s,color .12s}
.tile:hover .face{background:#F8FAFD}
.tile.sel .face{background:var(--accent);color:#fff;box-shadow:0 2px 0 var(--accent-lo),0 6px 14px rgba(31,85,184,.25);transform:scale(.96)}
.tile.sel:hover .face{background:var(--accent)}
.tile.cur .face{outline:3px solid var(--accent-hi);outline-offset:2px}
.tile:focus{outline:none}
.tile.hop .face{animation:hop .32s ease-out}
@keyframes hop{40%{transform:translateY(-10px) scale(1.02)}}
.tile.shake .face{animation:shake .36s}
@keyframes shake{20%{transform:translateX(-6px) scale(.96)}40%{transform:translateX(6px) scale(.96)}60%{transform:translateX(-4px) scale(.96)}80%{transform:translateX(3px) scale(.96)}}
.band{position:absolute;left:0;top:0;width:var(--bw);height:var(--th);transform:translate(0,var(--y));transition:transform .26s cubic-bezier(.3,.7,.2,1);
  border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 10px;overflow:hidden;animation:band .34s cubic-bezier(.2,.9,.3,1.3)}
.board.snap .band{transition:none;animation:none}
.band b{display:block;white-space:nowrap;font-weight:800;line-height:1.15}
.band span{display:block;white-space:nowrap;line-height:1.2;opacity:.85}
.band.l0{background:var(--l0);color:#16202B}.band.l1{background:var(--l1);color:#16202B}
.band.l2{background:var(--l2);color:#16202B}.band.l3{background:var(--l3);color:#fff}
@keyframes band{from{transform:translate(0,var(--y)) scale(.9);opacity:0}}

/* ---------------------------------------------------------------- cards */
.how p{margin:.35em 0}
.legend{display:flex;flex-wrap:wrap;gap:.4em;justify-content:center;margin:.6em 0 .2em}
.legend span{padding:.25em .7em;border-radius:999px;font-size:.85em;font-weight:700}
.legend .l0{background:var(--l0)}.legend .l1{background:var(--l1)}.legend .l2{background:var(--l2)}.legend .l3{background:var(--l3);color:#fff}
.guesses{display:flex;flex-direction:column;align-items:center;gap:4px;margin:.5em 0}
.guesses div{display:flex;gap:4px}
.guesses i{width:22px;height:22px;border-radius:5px}
.guesses .l0{background:var(--l0d)}.guesses .l1{background:var(--l1d)}.guesses .l2{background:var(--l2d)}.guesses .l3{background:var(--l3d)}
.card.result .sub{text-align:center;color:var(--ink-soft);margin:0}
.archive h3{margin:.8em 0 .4em;font-size:1em;color:var(--ink-soft)}
.archive h3:first-child{margin-top:0}
.nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px}
.nums button{min-height:44px;border-radius:10px;border:1px solid var(--hair);background:var(--panel);font-weight:700;padding:0}
.nums button.won{background:var(--l0);border-color:var(--l0d)}
.nums button.lost{border-color:var(--l2d);border-style:dashed}
.nums button.next{box-shadow:0 0 0 3px var(--accent) inset}
.nums button:focus-visible{outline:3px solid var(--accent-hi);outline-offset:2px}
.stats{flex-wrap:wrap}
.burst{position:fixed;inset:0;pointer-events:none;z-index:40}
@media (orientation:landscape) and (max-height:520px){
  .card{padding:.9em 1.1em .8em}
  .card h2{margin-bottom:.35em;font-size:1.3em}
  .card .actions{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:.5em}
  .guesses{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:8px;margin:.3em 0}
  .guesses i{width:14px;height:14px;border-radius:3px}
  .guesses div{gap:2px;flex-direction:column}
  .card .menu-rows{display:grid;grid-template-columns:1fr 1fr;gap:.4em}
  .card .menu-rows .row{min-height:44px;padding:.4em .8em}
}