:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--bg: #0e0f12;--card: #151821;--muted: #9096a6;--text: #e7e9ee;--accent: #6aa6ff;--accent-2: #7ef0b6;--danger: #ff7781;--ok: #7cf7a1;--border: #242837;--key: #1f2432}*{box-sizing:border-box}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;background:radial-gradient(1200px 600px at 15% -10%,#1a2030,transparent),var(--bg);color:var(--text)}.app{max-width:980px;margin:0 auto;padding:24px}.topbar{align-items:center;justify-content:center;align-content:center;gap:16px;margin-bottom:16px}h1{margin:0;letter-spacing:.02em}.mode-switch{display:flex;gap:8px;align-items:center}.mode-switch select{background:#0f1320;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px 10px;outline:none}.stats{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.stat{background:var(--card);border:1px solid var(--border);padding:8px 12px;border-radius:12px;text-align:center;min-width:76px}.stat-value{display:block;font-weight:700}.stat-label{color:var(--muted);font-size:12px}.lives{display:flex;gap:4px;align-items:center;padding-left:6px}.heart{font-size:18px;opacity:.25;transition:transform .25s ease,opacity .25s ease}.heart.full{opacity:1;transform:translateY(-1px);color:var(--danger)}.stage{background:linear-gradient(180deg,#111523,#0e111b);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 10px 30px #00000040 inset}.person{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;width:100%;background:#ffffff08;border:1px solid var(--border);border-radius:12px;padding:10px}.person-emoji{font-size:28px}.person-name{font-weight:700}.person-blurb{color:var(--muted);font-size:14px;line-height:1.2}.gallows{width:100%;max-width:360px;height:240px}.svgl{stroke:#c8cbe2;stroke-width:4;stroke-linecap:round;fill:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}.part.fade{animation:partIn .35s ease both}.part.drop{animation:ropeDrop .4s cubic-bezier(.2,.7,.2,1) both}@keyframes partIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes ropeDrop{0%{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}.gallows.swing{animation:swing 1.6s ease-in-out infinite;transform-origin:130px 40px}@keyframes swing{0%,to{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}.dude.gasp{animation:gasp .25s ease;transform-origin:130px 40px}@keyframes gasp{0%{transform:scale(.98)}to{transform:scale(1)}}.gallows.rescued .dude{animation:drop .55s ease forwards,cheer .9s ease .6s 1}@keyframes drop{to{transform:translateY(65px)}}@keyframes cheer{0%,to{transform:translateY(65px) rotate(0)}30%{transform:translateY(60px) rotate(-6deg)}60%{transform:translateY(60px) rotate(6deg)}}.wordcard{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 10px 30px #00000040}.wordcard.flash-correct{animation:pulseOk .35s ease}.wordcard.flash-wrong{animation:shake .35s ease}@keyframes pulseOk{0%{box-shadow:0 0 #7cf7a133}70%{box-shadow:0 0 0 12px #7cf7a100}to{box-shadow:0 0 0 0 transparent}}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.tiles{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.tile{width:42px;height:56px;display:grid;place-items:center;border-radius:10px;background:var(--key);border:1px solid var(--border);color:var(--text);font-weight:700;font-size:24px;text-transform:uppercase;position:relative}.tile:after{content:"";position:absolute;left:8px;right:8px;bottom:10px;height:3px;background:#2e3345;border-radius:3px}.tile.revealed:after{background:transparent}.controls{display:flex;justify-content:center;align-items:center}.letter-input{width:120px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#0f1320;color:var(--text);outline:none}.letter-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #6aa6ff26}.btn{padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:#121727;color:var(--text);cursor:pointer;transition:transform .06s ease,background .2s ease}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn.primary{background:linear-gradient(180deg,#2a74ff,#1b58d8);border-color:#1e4fb7}.btn.ghost{background:transparent}.keyboard{margin-top:8px;display:grid;grid-template-columns:repeat(13,1fr);gap:6px;max-width:640px}@media (max-width: 520px){.keyboard{grid-template-columns:repeat(10,1fr)}}.key{padding:10px 0;border-radius:8px;background:var(--key);border:1px solid var(--border);color:var(--text);font-weight:600;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s ease,transform .06s ease,border-color .2s ease}.key:hover{transform:translateY(-1px)}.key:disabled{opacity:.45;cursor:not-allowed;transform:none}.key-correct{background:#7cf7a12e;border-color:#2a6f4e}.key-wrong{background:#ff77812e;border-color:#7a3136}.history{margin-top:12px;color:var(--muted);font-size:14px}.banner{margin-top:12px;padding:12px;border-radius:10px;font-weight:700;border:1px solid var(--border)}.banner.win{background:#7cf7a11a;border-color:#2a6f4e;color:var(--ok)}.banner.lose{background:#ff77811a;border-color:#7a3136;color:var(--danger)}.footer{margin-top:18px;display:flex;justify-content:center}.muted{color:var(--muted)}
