.word { font:800 clamp(1.6rem, 7vw, 2.6rem)/1.2 ui-monospace, Menlo, monospace; letter-spacing:.12em; min-height:1.3em; text-transform:uppercase; text-align:center; }
.kb { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:520px; }
.key { width:40px; height:44px; padding:0; font-weight:800; text-transform:uppercase; } .key.hit { background:#14532d; border-color:#4ade80; } .key.miss { background:#4c1d1d; border-color:#f87171; opacity:.6; }

main svg[aria-label="Hangman drawing"] { padding:8px; border:7px solid #a57146; border-radius:16px; background:linear-gradient(145deg,#fff6dd,#e9d6ae); box-shadow:0 11px 22px rgba(93,57,26,.2); }
.word { width:min(100%,520px); padding:14px 10px; border-radius:14px; background:#e6f4ff; border:3px solid #95bce1; color:#174c7d; box-shadow:0 5px 0 #6a9bcc; }
.key { border:2px solid #3775ac; border-bottom-width:4px; border-radius:8px; background:linear-gradient(145deg,#6db8ea,#327cb8); color:#fff; box-shadow:0 3px 7px rgba(29,74,113,.18); }
.key.hit { background:#4eaa72; border-color:#378a59; color:#fff; }
.key.miss { background:#a9b8c5; border-color:#8799a8; color:#fff; opacity:.72; }