:root { color-scheme: dark; --red:#5a0a0a; --red-soft:#8b1a1a; --bg:#0e0e10; --ink:#f4ecd8; --muted:#c97676; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:Georgia,"Times New Roman",serif; }
body { padding:1rem; max-width:680px; margin-inline:auto; }
html.is-embedded body { max-width:none; min-height:auto; }
html.is-embedded .back { display:none; }

.game-header { display:flex; align-items:center; gap:.6rem; padding:.4rem 0 1rem; border-bottom:1px solid rgba(244,236,216,.12); }
.game-header h1 { flex:1; margin:0; font-size:1.3rem; letter-spacing:.02em; }
.back { color:var(--muted); text-decoration:none; font-size:1.4rem; padding:.3rem .6rem; border-radius:6px; }
.back:hover { background:rgba(244,236,216,.08); }
.ghost { background:transparent; color:var(--ink); border:1px solid rgba(244,236,216,.25); border-radius:8px; padding:.4rem .8rem; font:inherit; cursor:pointer; }
.ghost:hover { background:rgba(244,236,216,.06); }

.game-status { display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; padding:.7rem 0; font-size:.85rem; color:var(--muted); }
.game-status strong { color:var(--ink); font-size:1rem; }

.game-card { padding:1.2rem 1rem; background:#1a1014; border:1px solid var(--red); border-radius:12px; margin:1rem 0; min-height:160px; }
.game-card .id { color:var(--muted); font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; margin:0 0 .5rem; }
.game-card .text { font-size:clamp(.95rem,2.5vw,1.1rem); line-height:1.55; margin:0; text-align:justify; hyphens:auto; }
.game-card .loading { color:var(--muted); margin:0; text-align:center; }

.game-actions { display:grid; gap:.55rem; margin:1rem 0; }
.action { padding:.95rem 1rem; background:var(--red); color:#fff; border:0; border-radius:10px; font:inherit; font-weight:600; cursor:pointer; transition:background .15s; }
.action:hover { background:var(--red-soft); }
.action:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.kbd-hint { color:var(--muted); font-size:.85rem; text-align:center; margin:.4rem 0 0; }

.game-feedback { padding:1rem; border-radius:10px; margin:1rem 0; font-size:1rem; line-height:1.5; }
.game-feedback.ok  { background:rgba(40,160,80,.12); border:1px solid rgba(40,160,80,.4); }
.game-feedback.err { background:rgba(200,40,40,.12); border:1px solid rgba(200,40,40,.4); }
.game-feedback h3 { margin:0 0 .4rem; font-size:1.1rem; }
.game-feedback .next { display:inline-block; margin-top:.7rem; padding:.5rem .9rem; background:var(--red); color:#fff; border-radius:8px; border:0; font:inherit; cursor:pointer; }

.game-finale { text-align:center; padding:2rem 1rem; }
.game-finale h2 { font-size:1.6rem; margin:0 0 .8rem; }
.game-finale .score { font-size:3rem; color:var(--muted); margin:.5rem 0; }
.game-finale .play-again { padding:.7rem 1.4rem; background:var(--red); color:#fff; border:0; border-radius:10px; font:inherit; font-weight:600; cursor:pointer; }

@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }