:root { color-scheme: dark; --red:#5a0a0a; --red-soft:#8b1a1a; --bg:#0e0e10; --ink:#f4ecd8; --muted:#c97676; --gold:#d4a047; }
* { 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:920px; 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; }
.back { color:var(--muted); text-decoration:none; font-size:1.4rem; padding:.3rem .6rem; border-radius:6px; }
.ghost { background:transparent; color:var(--ink); border:1px solid rgba(244,236,216,.25); border-radius:8px; padding:.4rem .8rem; font:inherit; cursor:pointer; }

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

.cripto-board { background:#1a1014; border:1px solid var(--red); border-radius:10px; padding:1.4rem 1.2rem; margin:.8rem 0 1.2rem; min-height:200px; }
.cripto-board .loading { color:var(--muted); text-align:center; padding:2rem 0; }
.crypt-line { display:flex; flex-wrap:wrap; gap:.15rem; margin-bottom:.7rem; }
.crypt-pair { display:flex; flex-direction:column; align-items:center; min-width:1.6em; padding:.1rem .15rem; }
.crypt-pair .cipher { font-family:"Courier New",monospace; font-weight:700; font-size:1.15rem; color:var(--gold); }
.crypt-pair .plain  { font-family:"Courier New",monospace; font-weight:700; font-size:1.05rem; min-height:1.2em; color:var(--ink); border-bottom:1px solid rgba(244,236,216,.2); cursor:pointer; padding:0 .25em; transition:background .12s; }
.crypt-pair .plain:hover { background:rgba(244,236,216,.08); }
.crypt-pair.active .plain { background:var(--gold); color:#1a1014; border-color:var(--gold); }
.crypt-pair.solved .plain { color:var(--gold); border-color:transparent; }
.crypt-pair.solved .cipher { opacity:.45; }
.crypt-pair.symbol .cipher { color:rgba(244,236,216,.4); }
.crypt-pair.symbol .plain { display:none; }

.cripto-keyboard { background:#1a1014; border:1px solid var(--red); border-radius:10px; padding:1rem; }
.kbd-help { color:var(--muted); font-size:.85rem; margin:0 0 .6rem; }
.kbd { display:grid; grid-template-columns:repeat(7, 1fr); gap:.3rem; margin-bottom:.7rem; }
.kbd button {
  aspect-ratio:1; padding:.45rem 0; background:rgba(244,236,216,.08); color:var(--ink);
  border:1px solid rgba(244,236,216,.18); border-radius:6px; font:inherit; font-weight:700; cursor:pointer;
}
.kbd button:hover:not(:disabled) { background:rgba(244,236,216,.15); }
.kbd button:disabled { opacity:.3; cursor:default; }
.kbd button.used { background:var(--red); color:#fff; border-color:var(--red); }
.hint-btn { background:transparent; color:var(--gold); border:1px dashed var(--gold); border-radius:8px; padding:.5rem 1rem; font:inherit; cursor:pointer; font-size:.85rem; }
.hint-btn:hover { background:rgba(212,160,71,.1); }

.game-finale { text-align:center; padding:2rem 1rem; }
.game-finale h2 { font-size:1.5rem; margin:0 0 .8rem; }
.game-finale .reveal { margin:.5rem 0; line-height:1.55; max-width:60ch; margin-inline:auto; font-style:italic; color:var(--gold); }
.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; }