:root{color-scheme:dark;--bg:#0d0d1a;--panel:#17182b;--line:#363b59;--text:#f5f4ff;--muted:#abb2ca;--accent:#a78bfa}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -15%,#29244c,var(--bg) 58%);color:var(--text);font-family:Raleway,Arial,sans-serif}
main{width:min(100% - 32px,760px);margin:36px auto 72px}
.back{display:inline-block;margin-bottom:28px;color:var(--accent);text-decoration:none;font-size:14px;font-weight:700}
.eyebrow{margin:0;color:var(--accent);text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:800}
h1{font-size:clamp(48px,10vw,86px);letter-spacing:-.07em;margin:4px 0 12px}
.intro{color:var(--muted);line-height:1.5;max-width:650px}
.modes{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 18px}
button{font:inherit;cursor:pointer}
.mode,.actions button{padding:11px 17px;border:1px solid var(--line);border-radius:10px;background:#101222;color:var(--muted);font-weight:800}
.mode.active{border-color:var(--accent);color:var(--accent);background:#25203e}
.board{margin:16px 0;padding:clamp(20px,4vw,30px);background:var(--panel);border:1px solid var(--line);border-radius:20px}
.board-top{display:flex;justify-content:space-between;gap:12px;color:var(--accent);font-size:12px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
#clues{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px;counter-reset:clue}
#clues li{counter-increment:clue;display:flex;gap:14px;align-items:flex-start;padding:15px;background:#101222;border:1px solid var(--line);border-radius:12px;line-height:1.5;font-weight:700}
#clues li::before{content:counter(clue,decimal-leading-zero);color:var(--accent);font-weight:900}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.actions button:hover:not(:disabled),.mode:hover{border-color:var(--accent);color:var(--text)}
button:disabled{opacity:.4;cursor:default}
label{display:block;margin-bottom:14px;font-size:18px;font-weight:800}
form{display:flex;gap:10px}
input{min-width:0;flex:1;padding:14px;border:1px solid var(--line);border-radius:10px;background:#101222;color:var(--text);font:inherit}
input:focus{border-color:var(--accent);outline:none}
.primary{padding:12px 22px;border:1px solid var(--accent);border-radius:10px;background:var(--accent);color:#171026;font-weight:900}
#message{min-height:24px;color:var(--accent);font-weight:800;line-height:1.5}
#guess-history{display:flex;flex-wrap:wrap;gap:8px}
#guess-history span{padding:7px 10px;border-radius:8px;background:#29243d;color:var(--muted);font-size:13px}
.text-button{margin-top:22px;padding:0;border:0;background:transparent;color:var(--muted);text-decoration:underline}
.text-button:hover{color:var(--text)}
.note{color:var(--muted);font-size:12px;line-height:1.5;margin-top:28px}
button:focus-visible,a:focus-visible{outline:3px solid #f7d77b;outline-offset:2px}
@media(max-width:500px){form{flex-direction:column}.primary{width:100%}}