/* Hangman Words: the sky, home, the balloon, the word, the letter keys. Light, big letters. */
body{background:#DCEFFF}
.sky{position:fixed;inset:0;background:linear-gradient(180deg,#8FCDFF 0%,#C4E5FF 45%,#EEF8FF 100%);overflow:hidden;pointer-events:none}
.cloud{position:absolute;width:9em;height:3em;border-radius:3em;background:#fff;opacity:.8;filter:blur(.5px);
  box-shadow:2.2em -1.2em 0 .2em #fff,4.6em -.4em 0 -.2em #fff;animation:drift 70s linear infinite}
.cloud.c1{top:10%;left:-12em}
.cloud.c2{top:38%;left:-12em;transform:scale(.7);animation-duration:95s;animation-delay:-40s;opacity:.65}
.cloud.c3{top:70%;left:-12em;transform:scale(1.2);animation-duration:120s;animation-delay:-80s;opacity:.55}
@keyframes drift{to{translate:calc(100vw + 24em) 0}}
.screen{z-index:1}

/* ------------------------------------------------------------------ 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.08em;font-weight:600}
.home-body{display:flex;flex-direction:column;align-items:center;gap:.7em;width:min(25em,100%)}
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4em;width:100%}
.cat{border:2px solid transparent;background:rgba(255,255,255,.88);border-radius:.8em;min-height:48px;padding:.3em .2em;font-weight:700;font-size:.95em;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1em;box-shadow:0 2px 6px rgba(23,34,58,.08)}
.cat i{width:.8em;height:.8em;border-radius:50%;background:var(--c)}
.cat[aria-pressed=true]{border-color:var(--c);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent)}
.stepper{display:flex;align-items:center;gap:.6em;background:rgba(255,255,255,.88);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}
.cat: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:2.1em}
  .home-body{gap:.45em;flex:0 1 23em}
  .cat{min-height:44px;flex-direction:row;gap:.35em;font-size:.9em}
  .home .pill{padding:.45em 1.6em}
}
@media (max-height:440px){.tagline{display:none}.home-icon{display:none}}

/* ---------------------------------------------------------------- game */
#game{display:grid;gap:.4em;padding:max(.45em,env(safe-area-inset-top)) .6em max(.55em,env(safe-area-inset-bottom));width:100%;max-width:36em;margin:0 auto;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"bar" "stage" "word" "keys"}
@media (min-aspect-ratio:11/10){
  #game{max-width:72em;column-gap:1em;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"bar bar" "stage word" "stage keys"}
}
.bar{grid-area:bar;display:flex;align-items:center;justify-content:space-between;gap:.6em}
.icon-btn{width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.92);display:grid;place-items:center;padding:0;position:relative;box-shadow:0 2px 8px rgba(23,34,58,.12)}
.icon-btn svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.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}
.icon-btn.hint:disabled{opacity:.4;cursor:default}
.icon-btn.hint.glow{animation:glow 1.6s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 6px rgba(245,165,36,.35)}}
.where{display:flex;flex-direction:column;align-items:center;gap:.2em;background:rgba(255,255,255,.85);border-radius:1em;padding:.25em 1em;box-shadow:0 2px 8px rgba(23,34,58,.08)}
.where b{font-size:1.05em}
.steps{display:flex;gap:.3em}
.steps i{width:.6em;height:.6em;border-radius:50%;background:#D4DFEB}
.steps i.on{background:var(--good)}

.stage{grid-area:stage;position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.balloon-wrap{flex:1;min-height:0;width:100%;display:flex;justify-content:center;transition:transform 1.2s cubic-bezier(.5,0,.75,0)}
.balloon{height:100%;width:auto;max-width:100%;overflow:visible;animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3%) rotate(1.5deg)}}
.balloon .body{transform-box:fill-box;transform-origin:50% 100%;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.balloon .skin{fill:var(--bc,#F2545B);transition:fill .3s}
.balloon .eyes.shut,.balloon .mouth{display:none}
.balloon .mouth.happy{display:inline}
.stage.worried .mouth.happy{display:none}.stage.worried .mouth.worried{display:inline}
.stage.oh .mouth{display:none!important}.stage.oh .mouth.oh{display:inline!important}
.stage.lost .eyes.open{display:none}.stage.lost .eyes.shut{display:inline}
.stage.lost .mouth{display:none!important}.stage.lost .mouth.worried{display:inline!important}
.stage.won .mouth{display:none!important}.stage.won .mouth.happy{display:inline!important}
.stage.wobble .balloon-wrap{animation:wobble .5s ease-out}
@keyframes wobble{20%{transform:rotate(-7deg) translateX(-4%)}45%{transform:rotate(6deg) translateX(3%)}70%{transform:rotate(-3deg)}}
.stage.hop .balloon-wrap{animation:hop .4s ease-out}
@keyframes hop{40%{transform:translateY(-5%) scale(1.03)}}
.stage.won .balloon-wrap{transform:translateY(-120vh)}
.stage.lost .balloon-wrap{transform:translateY(8%) rotate(-8deg);transition:transform 1.2s ease-out}
.puff{position:absolute;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 0 0 2px rgba(23,34,58,.08);pointer-events:none;animation:puff .7s ease-out forwards}
@keyframes puff{to{transform:translate(var(--dx),var(--dy)) scale(2.2);opacity:0}}
.air{display:flex;gap:.35em;justify-content:center;padding:.3em .6em;background:rgba(255,255,255,.7);border-radius:999px;margin-top:.25em}
.air i{width:.85em;height:.85em;border-radius:50%;background:var(--bc,#F2545B);transition:transform .3s,background .3s}
.air i.gone{background:#CBD6E2;transform:scale(.7)}

.wordbox{grid-area:word;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;min-width:0}
.clue{font-weight:700;color:var(--ink-soft);font-size:1em;background:rgba(255,255,255,.75);border-radius:999px;padding:.1em .9em}
.slots{display:flex;gap:var(--gap,6px);justify-content:center;max-width:100%}
.slot{width:var(--slot,52px);height:calc(var(--slot,52px) * 1.18);border-radius:.35em;background:rgba(255,255,255,.95);border-bottom:4px solid #9AAEC4;
  display:grid;place-items:center;font:900 calc(var(--slot,52px) * .66)/1 var(--sans);text-transform:uppercase;color:var(--ink)}
.slot.given{color:#2E6FD8}
.slot.pop{animation:pop .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes pop{0%{transform:scale(.3) rotate(-10deg)}100%{transform:none}}
.slot.show{color:var(--bad);opacity:.85}
.slot.win{animation:jump .6s ease-out both;animation-delay:calc(var(--i) * 60ms);border-bottom-color:var(--good)}
@keyframes jump{40%{transform:translateY(-35%)}}

.keys{grid-area:keys;display:grid;grid-template-columns:repeat(var(--cols,7),minmax(0,1fr));gap:6px;width:100%;max-width:40em;margin:0 auto;align-self:end}
.key{height:var(--kh,52px);min-height:44px;border:0;border-radius:.45em;background:#fff;color:var(--ink);font:800 calc(var(--kh,52px) * .48)/1 var(--sans);text-transform:uppercase;
  box-shadow:0 3px 0 #B7C6D6,0 4px 10px rgba(23,34,58,.1);padding:0;transition:background .2s,color .2s,transform .08s}
.key:active{transform:translateY(2px);box-shadow:0 1px 0 #B7C6D6}
.key.hit{background:var(--good);color:#fff;box-shadow:0 3px 0 #136B3E}
.key.miss{background:#D9E1EA;color:#8D9AAB;box-shadow:none}
.key.given{background:#2E6FD8;color:#fff;box-shadow:0 3px 0 #1F4FA0}
.key.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.key.bump{animation:bump .3s}
@keyframes bump{40%{transform:scale(1.15)}}

/* 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 .reveal{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin:.2em 0 .5em}
.card .reveal span{width:1.7em;height:2em;display:grid;place-items:center;border-radius:.3em;background:var(--paper);font:900 1.3em/1 var(--sans);text-transform:uppercase;border-bottom:3px solid var(--good)}
.card.lost .reveal span{border-bottom-color:#9AAEC4}
.card .reveal span.was{color:var(--bad)}
.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.6em}
.how li{margin:.25em 0}
.how{padding-left:1.1em;margin:0}
@media (max-height:420px){
  .card{padding:.8em 1em .7em}
  .card h2{font-size:1.25em;margin-bottom:.3em}
  .card .actions{margin-top:.4em}
  .card .stats{margin:0}
  .card .reveal span{height:1.6em;width:1.4em;font-size:1.1em}
  .card:has(.rows){width:min(36em,100%)}
  .card .rows:has(> :nth-child(3)){display:grid;grid-template-columns:1fr 1fr;gap:.4em}
  .card .row{min-height:44px;padding:.35em .8em}
  .card .rows:has(> :nth-child(3)) .row:first-child{grid-column:1/-1}
}
.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));white-space:nowrap;box-shadow:0 6px 18px rgba(23,34,58,.25)}