: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:780px; 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); flex-wrap:wrap; }
.game-header h1 { flex:1; min-width:120px; 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); }

.diff { display:flex; gap:.3rem; }
.diff button { background:transparent; color:var(--ink); border:1px solid rgba(244,236,216,.2); border-radius:6px; padding:.35rem .65rem; font:inherit; font-size:.85rem; cursor:pointer; }
.diff button.active { background:var(--red); border-color:var(--red); color:#fff; }

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

.memo-board { display:grid; gap:.5rem; }
.memo-board[data-cols="2"] { grid-template-columns:repeat(2,1fr); }
.memo-board[data-cols="4"] { grid-template-columns:repeat(4,1fr); }
.memo-board[data-cols="5"] { grid-template-columns:repeat(5,1fr); }

.card-mem { aspect-ratio: 3/4; perspective: 600px; cursor: pointer; }
.card-mem button {
  all:unset; display:block; width:100%; height:100%; position:relative;
  cursor:pointer; transform-style:preserve-3d; transition:transform .35s;
  border-radius:10px; overflow:hidden;
}
.card-mem.flipped button { transform: rotateY(180deg); }
.card-mem.matched button { transform: rotateY(180deg); opacity:.55; cursor:default; }

.face { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:.4rem; backface-visibility:hidden; border-radius:10px; }
.face.back { background:linear-gradient(135deg,#4a0808 0%,#2a0404 100%); border:1px solid var(--red); }
.face.back::after { content:'§'; color:rgba(244,236,216,.18); font-size:2.5rem; font-family: serif; }
.face.front { background:#1a1014; border:1px solid var(--red); transform: rotateY(180deg); flex-direction:column; gap:.2rem; line-height:1.2; }
.face.front .label { color:var(--muted); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }
.face.front .value { color:var(--ink); font-size:.78rem; font-weight:600; line-height:1.18; word-break: break-word; hyphens:auto; }
.face.front .value.big { font-size:1.05rem; }

.card-mem.matched .face.front { border-color: var(--gold); }

.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; }

@media (max-width:480px) {
  .face.front .value { font-size:.7rem; }
  .face.front .value.big { font-size:.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .card-mem button { transition: none; }
}