: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; }
.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(3,1fr); gap:.4rem; padding:.7rem 0; font-size:.85rem; color:var(--muted); }
.game-status strong { color:var(--ink); font-size:1rem; }

.caca-layout { display:grid; gap:1rem; grid-template-columns:minmax(280px, 1fr) 200px; align-items:start; margin-top:.5rem; }
@media (max-width:680px){ .caca-layout { grid-template-columns:1fr; } }

.grid-wrap { background:#1a1014; border:1px solid var(--red); border-radius:10px; padding:.5rem; overflow:hidden; }
.cp-grid { display:grid; gap:1px; touch-action: none; user-select:none; }
.cp-cell {
  aspect-ratio: 1;
  display:flex; align-items:center; justify-content:center;
  background:rgba(244,236,216,.04); color:var(--ink);
  font-family: "Courier New", monospace; font-weight:700;
  font-size: clamp(.7rem, 1.6vw, 1rem);
  border-radius:3px; cursor:pointer;
  transition: background .12s;
}
.cp-cell.sel { background:var(--gold); color:#1a1014; }
.cp-cell.found { background:var(--red); color:#fff; }
.cp-cell.found.sel { background:var(--red); }

.words-list { background:#1a1014; border:1px solid var(--red); border-radius:10px; padding:.8rem 1rem; }
.words-list h3 { margin:0 0 .5rem; font-size:.9rem; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; }
.words-list ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.25rem; }
.words-list li { font-size:.95rem; padding:.2rem 0; transition:opacity .2s; }
.words-list li.found { color:var(--gold); text-decoration:line-through; opacity:.7; }

.game-finale { text-align:center; padding:2rem 1rem; }
.game-finale h2 { font-size:1.6rem; margin:0 0 .8rem; }
.game-finale .score { font-size:2.5rem; color:var(--gold); 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; }