main { max-width: 560px; margin: auto; padding: 14px 12px }
#game { margin: 12px auto; padding: 20px 16px }
.hm-tools { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px }
.hm-conn { margin: 0 0 8px }
.hm-daily { margin: 12px auto; padding: 16px; max-width: 540px }
.hm-daily-head { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.hm-daily h2 { margin: 0; font-size: 1.3rem }
.hm-daily-text { margin: 8px 0 12px; font-weight: 700 }
.hm-left { border: 2px solid var(--lg-bad); border-radius: 16px; padding: 12px 14px; margin: 0 0 12px; background: var(--lg-cream) }
.hm-left p { margin: 0 0 10px; font-weight: 800; color: var(--lg-bad) }
.hm-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0 4px }
.hm-tiers .lg-button { min-height: 44px; padding: 8px 4px; font-size: .95rem }
.hm-tiers .lg-button[aria-pressed=true], .hm-cats .lg-button[aria-pressed=true] { background: var(--lg-pink); border: 2px solid var(--lg-rose) }
.hm-tiernote { margin: 4px 0 8px; min-height: 1.3em; font-size: .9rem }
.hm-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 12px 0 }
.hm-cats .lg-button { min-height: 52px; font-size: 1.05rem }
.hm-wordform label { display: block; font-weight: 800; margin: 14px 0 6px }
.hm-wordform input[type=password], .hm-wordform input[type=text] { width: 100%; min-height: 48px; border: 1px solid var(--lg-line); border-radius: 12px; background: var(--lg-cream); padding: 10px; color: var(--lg-ink); font-size: 1.2rem; letter-spacing: .08em; text-transform: uppercase }
.hm-wordform label.hm-show { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; margin: 6px 0 }
.hm-wordform label.hm-show input { width: 22px; height: 22px }
.hm-error { color: var(--lg-bad); font-weight: 800; min-height: 1.4em; margin: 6px 0 }
.hm-cover { text-align: center; padding: 24px 8px; border: 2px dashed var(--lg-line); border-radius: 20px; margin: 12px 0 }
.hm-cover h2 { font-size: 1.7rem; margin: 0 0 8px }
.hm-cover h2:focus { outline: none }
.hm-scoreline { font-weight: 800; margin: 6px 0; min-height: 1.4em }
.hm-stage { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap }
#gallows { width: 170px; max-width: 45%; height: auto; flex: 0 0 auto }
#gallows .hm-frame { stroke: var(--lg-muted) }
#gallows .hm-body { stroke: var(--lg-rose) }
/* Each body part is drawn stroke by stroke: pathLength=1 lets stroke-dashoffset run 1 to 0. Reduced motion is handled by shared/ui.css (transitions off). */
#gallows [data-part] { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .45s ease-out, opacity 0s linear .45s }
#gallows [data-part].on { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset .45s ease-out, opacity 0s }
#gallows.snap [data-part] { transition: none }
.hm-side { text-align: center; min-width: 120px; max-width: 220px }
.hm-lives { font-size: 1.25rem; font-weight: 800; margin: 4px 0 }
.hm-lives strong { font-size: 1.9rem; color: var(--lg-rose) }
.hm-lives-hearts { font-size: 1.2rem; letter-spacing: .15em; margin: 4px 0 10px; min-height: 1.6em; color: var(--lg-rose) }
.hm-hint { font-size: .9rem; padding: 8px 12px; line-height: 1.25; text-align: center }
.hm-hintnote { font-size: .85rem; margin: 6px 0 0; min-height: 1.2em }
.hm-mask { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin: 12px 0; border-radius: 12px }
.hm-mask:focus-visible { outline: 3px solid var(--lg-leaf); outline-offset: 4px }
.hm-word { display: inline-flex; flex-wrap: nowrap }
.hm-slot { width: 30px; height: 42px; border-bottom: 4px solid var(--lg-ink); display: inline-flex; align-items: flex-end; justify-content: center; font-family: 'Fredoka', system-ui, sans-serif; font-size: 1.9rem; line-height: 1.15; font-weight: 500; margin: 0 2px }
.hm-slot.missed { color: var(--lg-bad); border-bottom-color: var(--lg-bad) }
.hm-msg { min-height: 1.6em; font-weight: 800; text-align: center; margin: 6px 0 }
.hm-theirs { text-align: center; margin: 4px 0 12px; font-weight: 700 }
.hm-keys { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 10px auto 0; max-width: 420px }
.hm-key { position: relative; min-height: 46px; min-width: 0; padding: 4px 0; border-radius: 12px; border: 1px solid var(--lg-line); background: var(--lg-white); color: var(--lg-ink); font-weight: 800; font-size: 1.15rem }
.hm-key .mark { position: absolute; top: 1px; right: 4px; font-size: .7rem; line-height: 1 }
.hm-key.hit { background: var(--lg-tint-2); background: color-mix(in srgb, var(--lg-good) 16%, var(--lg-white)); border: 2px solid var(--lg-good); color: var(--lg-ink); opacity: 1 }
.hm-key.miss { background: var(--lg-tint-1); background: color-mix(in srgb, var(--lg-bad) 14%, var(--lg-white)); border: 2px dashed var(--lg-bad); color: var(--lg-ink); text-decoration: line-through; opacity: 1; cursor: default }
/* Letter text uses the full-contrast ink colour in every theme; the border style, tint and the check or cross mark carry the meaning (measured: green or red text on the tint fell to 4.1:1 in colour-blind mode). */
.hm-key .mark { color: var(--lg-ink) }
.hm-key.hit { cursor: default }
.hm-key:disabled:not(.hit):not(.miss) { opacity: .5 }
.hm-over { text-align: center; margin-top: 16px }
.hm-over .lg-row { justify-content: center }
.hm-reveal { margin: 0 0 8px; font-weight: 700; color: var(--lg-muted) }
.hm-streak { margin: 0 0 12px; font-weight: 800; min-height: 1.2em }
.hm-foot { text-align: center; margin: 18px 0 0 }
.hm-howto h3 { margin: 16px 0 6px; font-size: 1rem }
.hm-howto p, .hm-howto li { margin: 4px 0; line-height: 1.45 }
.hm-howto ul { padding-left: 20px; margin: 4px 0 }
@media (max-width: 420px) {
  main { padding: 8px 6px }
  #game { padding: 16px 10px }
  .hm-slot { width: 24px; height: 38px; font-size: 1.6rem; margin: 0 1px }
  .hm-mask { gap: 8px 12px }
  .hm-keys { gap: 5px }
  .hm-tiers .lg-button { font-size: .85rem }
}
/* ---- Hangman: modes, computer duel picker, PC stage ---- */
.hm-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}.hm-head a{display:inline-flex;align-items:center;min-height:44px}.hm-head h1{margin:6px 0}
.hm-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 14px}.hm-modes .lg-button{min-height:48px}
.hm-modes .lg-button[aria-pressed=true],.hm-levels .lg-button[aria-pressed=true]{background:var(--lg-pink);border:2px solid var(--lg-rose)}
.hm-levels{grid-template-columns:repeat(3,1fr)}
#duel-go{margin-top:8px;min-width:180px}
kbd{font:700 .78rem 'Nunito',system-ui,sans-serif;border:1px solid var(--lg-line);border-bottom-width:2px;border-radius:6px;padding:1px 6px;background:var(--lg-white)}
.hm-keyshint{font-size:.8rem;line-height:1.7;margin:0}
.hm-centre{display:flex;flex-direction:column;align-items:center}
.hm-side{text-align:center}
.hm-key{transition:background-color .12s,transform .06s}.hm-key:not(:disabled):hover{border-color:var(--lg-rose);background:var(--lg-pink)}.hm-key:not(:disabled):active{transform:translateY(1px)}
.hm-key:not(:disabled){cursor:pointer}
.hm-slot{border-bottom-width:5px;border-radius:2px}
#gallows .hm-frame{stroke:color-mix(in srgb,var(--lg-ink) 55%,var(--lg-line))}
.lg-button:not(:disabled):hover{border-color:var(--lg-rose)}
/* phones and tablets: one column; the rails dissolve into the page flow (scoreline and lives first, then the drawing, word, keys, then the other board and the result) */
@media(max-width:999px){
  .hm-playstage{display:block}
  .hm-railL,.hm-railR{display:block}
  .hm-railL{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px}
  .hm-railL .hm-scoreline{flex:1 1 100%}
  .hm-railL .hm-side{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;flex:1 1 100%}
  .hm-railL .hm-lives,.hm-railL .hm-lives-hearts{margin:0}
  #gallows{width:150px;max-width:50%;margin:0 auto;display:block}
}
@media(min-width:1000px){
  :root{--lg-topbar:150px}
  :root:has(.lg-roomchip){--lg-topbar:196px}
  main{max-width:1500px;padding:8px 16px}
  #game{background:none;border:0;box-shadow:none;padding:0;margin:4px auto}
  .hm-head{min-height:40px}.hm-head h1{font-size:1.8rem;margin:0}
  .hm-hmmain,.hm-playstage{--stage-h:calc(100dvh - var(--lg-topbar) - 16px)}
  .hm-playstage{grid-template-columns:260px minmax(0,1fr) 300px;padding:0}
  .lg-rail>*{flex-shrink:0}
  #gallows{width:auto;max-width:none;height:min(34vh,calc(var(--stage-h) - 360px),330px);min-height:150px;flex:0 0 auto}
  .hm-centre{justify-content:center;gap:6px}
  .hm-mask{margin:6px 0}
  .hm-slot{width:clamp(30px,3.2vw,48px);height:clamp(44px,5vw,64px);font-size:clamp(1.9rem,3.2vw,3rem)}
  .hm-keys{grid-template-columns:repeat(13,1fr);max-width:min(100%,760px);gap:8px;width:100%}
  .hm-key{min-height:clamp(44px,5.4vh,60px);font-size:1.25rem}
  .hm-railL .hm-lives{font-size:1.3rem}
  .hm-railL .hm-scoreline{font-size:1.05rem;line-height:1.4}
  .hm-over{text-align:left}.hm-over .lg-row{justify-content:flex-start}.hm-over h2{font-size:1.5rem;margin:0 0 6px}
  .hm-theirs{text-align:left;font-size:.9rem;overflow-wrap:anywhere}
  /* the menu screens become centred cards instead of a stretched column */
  #hm-pick,#hm-word,#hm-cover,.hm-left{max-width:640px;margin-left:auto;margin-right:auto}
  #game:has(#hm-pick:not([hidden])),#game:has(#hm-word:not([hidden])),#game:has(#hm-cover:not([hidden])){background:var(--lg-white);border:1px solid var(--lg-line);border-radius:var(--lg-radius);box-shadow:var(--lg-shadow);padding:20px 28px;max-width:760px}
  .hm-cats{grid-template-columns:repeat(4,1fr)}
  #lobby{display:block;max-width:760px;margin:0 auto}
  .lg-lobby{display:grid;grid-template-columns:1fr 1fr;column-gap:28px;align-content:start;max-width:none}
  .lg-lobby>a,.lg-lobby>p.lg-muted{display:none}
  .lg-lobby>h1,.lg-lobby>.lg-status,.lg-lobby>.lg-invite{grid-column:1/-1}
  .lg-lobby>label,.lg-lobby>.lg-avatars{grid-column:1}
  .lg-lobby>.lg-row{grid-column:2;grid-row:2/4;align-content:start}
  .lg-lobby>.lg-join{grid-column:2;grid-row:4}
  .lg-lobby>.lg-status{justify-self:start}
}
/* a rail with nothing to show (solo, daily and same-phone have no "other board" until the result) stays as invisible space so the word stays centred */
@media(min-width:1000px){.hm-railR:not(:has(> :not([hidden]))){visibility:hidden}}