:root{--bg:#191724;--panel:#232136;--ink:#e0def4;--muted:#908caa;--teal:#3dd6c4;--gold:#f6c177;--absent:#3f3b52;--line:#2a273f}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:var(--teal);text-decoration:none}
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
.brand{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em}.brand span{color:var(--teal)}
.top nav{display:flex;gap:16px;font-size:14px;font-weight:600}
.game-wrap{max-width:520px;margin:0 auto;padding:14px 12px 30px;text-align:center}
.game-head h1{font-size:21px;margin:6px 0 2px}.pill{background:var(--panel);color:var(--teal);border-radius:999px;padding:2px 10px;font-size:14px;vertical-align:middle}
.sub{color:var(--muted);font-size:14px;margin:2px 0 14px}
.board{display:flex;flex-direction:column;gap:6px;margin:0 auto 16px;width:min(92vw,390px)}
.g-row{display:flex;gap:6px;justify-content:center}
.g-cell{width:calc((min(92vw,390px) - 30px)/6);aspect-ratio:1;border:2px solid var(--line);border-radius:10px;display:grid;place-items:center;font-size:26px;font-weight:800;text-transform:uppercase;transition:.15s;background:transparent}
.g-cell.typing{border-color:var(--muted)}
.g-cell.filled{border-color:transparent;color:#191724}
.g-cell.correct{background:var(--teal)}
.g-cell.present{background:var(--gold)}
.g-cell.absent{background:var(--absent);color:var(--muted)}
.keyboard{display:flex;flex-direction:column;gap:6px;align-items:center;user-select:none}
.kb-row{display:flex;gap:5px;justify-content:center;width:100%}
.kb-key{flex:1;max-width:42px;padding:14px 0;border:0;border-radius:8px;background:var(--panel);color:var(--ink);font-weight:700;font-size:14px;text-transform:uppercase;cursor:pointer}
.kb-wide{max-width:64px;font-size:11px}
.kb-key.correct{background:var(--teal);color:#191724}.kb-key.present{background:var(--gold);color:#191724}.kb-key.absent{background:#2a273f;color:#6e6a86}
.toast{position:fixed;top:70px;left:50%;transform:translateX(-50%) translateY(-8px);background:var(--ink);color:var(--bg);padding:9px 18px;border-radius:9px;font-weight:700;opacity:0;pointer-events:none;transition:.2s;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal{position:fixed;inset:0;background:rgba(15,14,22,.75);display:none;place-items:center;z-index:40;padding:16px}
.modal.open{display:grid}
.modal-card{background:var(--panel);border-radius:18px;padding:26px 22px;max-width:400px;width:100%;text-align:center;position:relative}
.modal-x{position:absolute;top:8px;right:14px;background:none;border:0;color:var(--muted);font-size:26px;cursor:pointer}
.modal-card h2{margin:0 0 6px;font-size:24px}
.stats-row{display:flex;justify-content:space-around;margin:18px 0}
.stats-row div{display:flex;flex-direction:column}.stats-row strong{font-size:22px}.stats-row span{color:var(--muted);font-size:11.5px}
.share-btn{background:var(--teal);color:#191724;border:0;border-radius:10px;padding:13px 26px;font-size:16px;font-weight:800;cursor:pointer;width:100%}
.next-in{color:var(--muted);font-size:13.5px;margin:14px 0 4px}
.modal-hint{font-size:13px;margin:8px 0 0}
.article{max-width:640px;margin:0 auto;padding:28px 18px}
.article h1{font-size:26px}.article h2{font-size:19px;margin-top:22px}
.article p,.article li{line-height:1.6;color:var(--ink)}
.rules{list-style:none;padding:0}.rules li{margin:10px 0;display:flex;align-items:center;gap:10px}
.demo{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;font-weight:800;color:#191724}
.demo.correct{background:var(--teal)}.demo.present{background:var(--gold)}.demo.absent{background:var(--absent);color:var(--muted)}
.play-link{font-weight:700}
.hint-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:18px 0}
.hint-card{background:var(--panel);border-radius:14px;padding:18px;display:block;color:var(--ink)}
.hint-card h3{margin:0 0 4px;color:var(--teal)}.hint-card p{margin:0;color:var(--muted);font-size:14px}
.hint-card .soon{display:inline-block;margin-top:8px;font-size:11px;background:#2a273f;color:var(--gold);padding:2px 8px;border-radius:999px}
.hint-card.big{text-align:center;padding:22px}
.foot{border-top:1px solid var(--line);padding:18px;text-align:center}
.email-form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center}
.foot-cta{font-size:14px;color:var(--muted)}
.email-form input{padding:11px 14px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font-size:15px;min-width:200px}
.email-form button{padding:11px 18px;border-radius:9px;border:0;background:var(--teal);color:#191724;font-weight:800;font-size:14px;cursor:pointer}
.foot-note{color:#6e6a86;font-size:11.5px;max-width:560px;margin:12px auto 0;line-height:1.5}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:4px}
.hint-step,.reveal{background:var(--panel);border-radius:12px;margin:10px 0;overflow:hidden}
.hint-step summary,.reveal summary{padding:14px 16px;cursor:pointer;font-weight:700;list-style:none}
.hint-step summary::before{content:"▸ ";color:var(--teal)}
.hint-step[open] summary::before{content:"▾ "}
.hint-step p,.reveal p{padding:0 16px 14px;margin:0;color:var(--ink)}
.reveal{border:1px dashed var(--gold)}
.reveal summary{color:var(--gold)}
.answer-word{font-size:30px;font-weight:900;letter-spacing:.22em;color:var(--teal);text-align:center;padding:6px 0 18px !important}
.archive{font-size:13px;color:var(--muted);line-height:1.9;margin-top:20px}
.attr{font-size:11.5px;color:#6e6a86;margin-top:22px;line-height:1.5}
@media(max-width:420px){.g-cell{font-size:22px}.kb-key{padding:12px 0}}