/* Word Ladder: home, the ladder, the next word, the letter keys. Light, warm, big letters. */
body{background:linear-gradient(180deg,#DCEBFA 0%,#EEF2EC 55%,#F5F1E6 100%)}
.screen{z-index:1}
:root{--wood:#C98B4A;--wood-lo:#9A6531;--ok:#2FA36B;--ok-lo:#1E7A4D;--gold:#F6C453}

/* ------------------------------------------------------------------ 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(23,34,58,.18)}
.title{font:900 clamp(2.2em,9.5vw,3.4em)/1 var(--sans);letter-spacing:-.01em;margin:0;color:var(--ink)}
.tagline{margin:0;color:var(--ink-soft);font-size:1.1em;font-weight:600}
.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(--gold);background:#fff;border-radius:1em;padding:.5em 1em;display:flex;flex-direction:column;align-items:center;gap:.1em;
  box-shadow:0 3px 0 #E3B23C,0 6px 16px rgba(23,34,58,.1)}
.daily b{font-size:1.15em}
.daily small{color:var(--ink-soft);font-size:.85em}
.daily.done{border-color:var(--ok);box-shadow:0 3px 0 var(--ok-lo),0 6px 16px rgba(23,34,58,.1)}
.daily:active{transform:translateY(2px)}
.stepper{display:flex;align-items:center;gap:.6em;background:rgba(255,255,255,.9);border-radius:999px;padding:.2em;box-shadow:0 2px 6px rgba(23,34,58,.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,.tile: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:2.1em}
  .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}}

/* ---------------------------------------------------------------- game */
#game{display:grid;gap:.45em;padding:max(.45em,env(safe-area-inset-top)) .6em max(.55em,env(safe-area-inset-bottom));width:100%;max-width:34em;margin:0 auto;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"bar" "ladder" "pad"}
@media (min-aspect-ratio:11/10){
  #game{max-width:66em;column-gap:1.2em;grid-template-columns:minmax(0,1fr) minmax(min(350px,60%),1.25fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"bar pad" "ladder pad"}
  .entry-wrap{align-self:center}
}
.bar{grid-area:bar;display:flex;align-items:center;justify-content:space-between;gap:.5em}
.tools{display:flex;gap:.4em}
.icon-btn{width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.94);display:grid;place-items:center;padding:0;position:relative;box-shadow:0 2px 8px rgba(23,34,58,.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:.4;cursor:default}
.icon-btn.hint span{position:absolute;right:-3px;top:-3px;min-width:20px;height:20px;border-radius:10px;background:#F5A524;color:#fff;font:800 13px/20px var(--sans);text-align:center}
.where{display:flex;flex-direction:column;align-items:center;gap:.05em;background:rgba(255,255,255,.88);border-radius:1em;padding:.2em .9em;box-shadow:0 2px 8px rgba(23,34,58,.08);min-width:0;text-align:center}
.where b{font-size:1.05em;line-height:1.2}
.where span{font-size:.82em;color:var(--ink-soft);white-space:nowrap}

/* the ladder: two wooden rails, a word on each rung */
.ladder-wrap{grid-area:ladder;position:relative;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ladder{--rh:40px;list-style:none;margin:0;padding:4px calc(var(--rh) * .9);position:relative;display:flex;flex-direction:column;gap:4px;max-height:100%}
.ladder::before,.ladder::after{content:"";position:absolute;top:-2px;bottom:-2px;width:calc(var(--rh) * .26);min-width:7px;border-radius:6px;
  background:linear-gradient(90deg,var(--wood),#E0A868 45%,var(--wood-lo));box-shadow:0 2px 6px rgba(80,48,16,.25)}
.ladder::before{left:calc(var(--rh) * .3)}
.ladder::after{right:calc(var(--rh) * .3)}
.rung{position:relative;display:flex;justify-content:center;align-items:center;height:var(--rh)}
.rung::before{content:"";position:absolute;left:calc(var(--rh) * -.65);right:calc(var(--rh) * -.65);top:50%;height:calc(var(--rh) * .16);min-height:4px;transform:translateY(-50%);
  background:linear-gradient(180deg,#E0A868,var(--wood-lo));border-radius:4px;z-index:0}
.rung .word{display:flex;gap:calc(var(--rh) * .08);position:relative;z-index:1}
.rung .tag{position:absolute;right:calc(100% + var(--rh) * .95);font-size:max(11px,calc(var(--rh) * .3));font-weight:800;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.t{width:calc(var(--rh) * .92);height:var(--rh);border-radius:calc(var(--rh) * .16);display:grid;place-items:center;background:#fff;color:var(--ink);
  font:900 calc(var(--rh) * .6)/1 var(--sans);text-transform:uppercase;box-shadow:0 2px 0 #CDBFA4}
.t.ok{background:var(--ok);color:#fff;box-shadow:0 2px 0 var(--ok-lo)}
.t.new:not(.ok){box-shadow:0 0 0 2px var(--accent) inset,0 2px 0 #CDBFA4}
.t.blank{background:rgba(255,255,255,.45);box-shadow:0 0 0 1.5px rgba(154,101,49,.35) inset}
.t.ghost{background:#FFF7DE;color:#8A6A1F;box-shadow:0 0 0 2px var(--gold) inset}
.goal.reached .t{background:var(--gold);color:#4A3405;box-shadow:0 2px 0 #C99A2B}
.rung.next .t{box-shadow:0 0 0 2px var(--accent) inset;animation:breathe 1.6s ease-in-out infinite}
.rung.next .t.ok{box-shadow:0 0 0 2px var(--accent) inset,0 2px 0 var(--ok-lo)}
@keyframes breathe{50%{transform:translateY(-2px)}}
.rung.land .word{animation:land .4s cubic-bezier(.3,1.7,.5,1)}
@keyframes land{0%{transform:scale(.6) translateY(30%);opacity:.3}100%{transform:none}}
.ladder.won .rung .word{animation:jump .7s ease-out both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes jump{40%{transform:translateY(-30%)}}
.ladder.lost .goal .t{opacity:.55}

/* the next word and the keys */
.entry-wrap{grid-area:pad;display:flex;flex-direction:column;align-items:center;gap:.55em;min-width:0;width:100%}
.entry{display:flex;gap:8px;justify-content:center}
.entry.shake{animation:shake .36s}
.tile{--et:64px;width:var(--et);height:calc(var(--et) * 1.08);border:0;border-radius:.3em;padding:0;background:#fff;color:var(--ink);
  font:900 calc(var(--et) * .62)/1 var(--sans);text-transform:uppercase;box-shadow:0 4px 0 #CDBFA4,0 6px 14px rgba(23,34,58,.1);position:relative;transition:background .15s,color .15s}
.entry .tile{width:var(--et);height:calc(var(--et) * 1.08)}
.entry{--et:64px}
.entry .tile{font-size:calc(var(--et) * .62)}
.tile.ok{background:var(--ok);color:#fff;box-shadow:0 4px 0 var(--ok-lo)}
.tile.chg{background:#E8F1FD;color:var(--accent-lo)}
.tile.chg.ok{background:var(--ok);color:#fff}
.tile.cur::after{content:"";position:absolute;left:14%;right:14%;bottom:-11px;height:5px;border-radius:3px;background:var(--accent);animation:blink 1.1s ease-in-out infinite}
.tile.cur{outline:3px solid var(--accent);outline-offset:-3px}
@keyframes blink{50%{opacity:.35}}
.tile.pop{animation:pop .26s cubic-bezier(.3,1.8,.5,1)}
@keyframes pop{0%{transform:scale(.8)}100%{transform:none}}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

.keys{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;width:100%;max-width:32em;margin:6px auto 0}
.key{height:var(--kh,52px);min-height:44px;border:0;border-radius:.45em;background:#fff;color:var(--ink);font:800 calc(var(--kh,52px) * .46)/1 var(--sans);text-transform:uppercase;
  box-shadow:0 3px 0 #CDBFA4,0 4px 10px rgba(23,34,58,.08);padding:0;transition:background .2s,color .2s,transform .08s;display:grid;place-items:center}
.key:active{transform:translateY(2px);box-shadow:0 1px 0 #CDBFA4}
.key svg{width:52%;height:52%;fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.key.go{background:#C9D3DE;color:#fff;font-size:calc(var(--kh,52px) * .38);box-shadow:0 3px 0 #A9B4C0;text-transform:none}
.key.go:not(:disabled){background:var(--accent);box-shadow:0 3px 0 var(--accent-lo)}
.key.go.ready{background:var(--ok);box-shadow:0 3px 0 var(--ok-lo),0 0 0 4px rgba(47,163,107,.25)}
.key.go:disabled{cursor:default}

/* 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 .stars{display:flex;justify-content:center;gap:.15em;font-size:2.2em;line-height:1;color:#D9D2C2}
.card .stars .on{color:#F5A524;animation:starpop .45s cubic-bezier(.3,1.8,.5,1) both;animation-delay:calc(var(--k) * 140ms)}
@keyframes starpop{0%{transform:scale(0) rotate(-40deg)}100%{transform:none}}
.card .chain{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.2em .35em;margin:.4em 0;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.card .chain span{background:var(--paper);border-radius:.35em;padding:.1em .4em}
.card .chain i{color:var(--ink-dim);font-style:normal}
.card .chain.answer span{background:#E8F5EE}
.card .line{text-align:center;color:var(--ink-soft);margin:.2em 0}
.card .up{text-align:center;font-weight:800;color:var(--good);font-size:1.1em}
.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}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em;margin:.4em auto 0;max-width:16em}
.cal span{aspect-ratio:1;display:grid;place-items:center;border-radius:50%;font-size:.75em;color:var(--ink-dim)}
.cal .done{background:var(--ok);color:#fff;font-weight:700}
.cal .today{outline:2px solid var(--accent);outline-offset:-2px;color:var(--ink)}
@media (max-height:480px){
  .card .stats{margin:0}
  .card.result .stats{display:none}
  .card.result .brand{margin:0}
  .card .stars{font-size:1.6em}
  .card .chain{margin:.2em 0;font-size:.9em}
  .card .line{margin:0}
  .card:has(.cal){width:min(36em,100%)}
  .cal{max-width:12em;gap:.1em}
}
.burst{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:15}
.toast{bottom:auto;top:max(4.2em,calc(env(safe-area-inset-top) + 3.8em));pointer-events:none;box-shadow:0 6px 18px rgba(23,34,58,.25);max-width:92vw;white-space:normal;text-align:center}