*{box-sizing:border-box}:root{--green: #6aaa64;--yellow: #c9b458;--gray: #787c7e;--bg: #0f1020;--panel: #1a1b34;--line: #34355a;--text: #f4f4fb;--muted: #a6a7c4;--gold: #e6c34a}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:radial-gradient(120% 100% at 50% 0%,#22224a 0%,var(--bg) 60%);color:var(--text);min-height:100vh}.wrap{max-width:520px;margin:0 auto;padding:2rem 1rem 4rem;text-align:center}h1{font-size:2.6rem;letter-spacing:.12em;margin:.2rem 0 0}h1 .y{color:var(--gold)}.tag{color:var(--muted);margin:.25rem 0 1.5rem}.riddle{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:1rem 1.1rem;margin:0 0 1.25rem;font-size:1.05rem;line-height:1.5;text-align:left;white-space:pre-line}.grid{display:grid;gap:6px;max-width:360px;margin:0 auto 1.25rem}.tile{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;text-transform:uppercase;border:2px solid var(--line);border-radius:6px;color:var(--text)}.tile.filled{border-color:#5a5c86}.tile.correct{background:var(--green);border-color:var(--green)}.tile.present{background:var(--yellow);border-color:var(--yellow);color:#14141f}.tile.absent{background:var(--gray);border-color:var(--gray)}.controls{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}input,select{padding:.6rem .75rem;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:1rem}input{text-transform:uppercase;letter-spacing:.25em;text-align:center;min-width:9rem}button{padding:.6rem 1.1rem;border-radius:8px;border:0;background:var(--gold);color:#14141f;font-weight:700;cursor:pointer;font-size:1rem}button:disabled{opacity:.5;cursor:not-allowed}button.hint{background:transparent;color:var(--gold);border:1px solid var(--gold)}.start{display:flex;flex-direction:column;gap:1rem;align-items:center;margin-top:2rem}.start label{display:flex;gap:.5rem;align-items:center;color:var(--muted)}.keyboard{display:flex;flex-direction:column;gap:6px;margin-top:1.25rem}.krow{display:flex;gap:5px;justify-content:center}.key{flex:1 1 auto;min-width:0;max-width:42px;height:52px;padding:0;border-radius:6px;background:#4a4c74;color:var(--text);font-size:1rem;font-weight:700;text-transform:uppercase}.key.wide{max-width:66px;flex-grow:1.5;font-size:.75rem}.key.correct{background:var(--green)}.key.present{background:var(--yellow);color:#14141f}.key.absent{background:#2b2c48;color:#7f80a6}.hint-row{grid-column:1 / -1;display:flex;align-items:center;gap:.5rem;padding:.6rem .7rem;border:2px dashed var(--gold);border-radius:6px;background:transparent;color:var(--gold);font-style:italic;font-size:.9rem;line-height:1.35;text-align:left;cursor:pointer;font-weight:400;text-transform:none}.hint-row:hover{background:#e6c34a1f}.modal-backdrop{position:fixed;inset:0;background:#060610b8;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:50}.modal{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:12px;padding:1.4rem 1.4rem 1.2rem;max-width:440px;width:100%;text-align:left;box-shadow:0 20px 60px #00000080}.modal-title{color:var(--gold);font-weight:700;font-size:1.05rem;margin-bottom:.75rem}.modal-body{margin:0 0 1.2rem;line-height:1.55;white-space:pre-line;color:var(--text)}.modal button{width:100%}.error{color:#ff8a8a}.over{margin-top:1rem;display:flex;flex-direction:column;gap:.75rem;align-items:center}.over .won{color:var(--green);font-weight:700}.over .lost{color:#ff8a8a;font-weight:700}.meta{color:var(--muted);font-size:.85rem;margin-top:1.5rem}
