:root { --text:#111; --muted:#666; --bg:#fff; --surface:#f5f5f5; --border:#e5e5e5; }
/* ...existing styles... */
html,body { height:100%; background:var(--bg); color:var(--text); font-family:"Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.site-header { padding:32px 16px; text-align:center; }
.brand { font-weight:700; margin:0; }
.subtitle { color:var(--muted); margin-top:8px; }
.container { max-width:960px; margin:0 auto; padding:16px; }
/* ...existing styles... */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.game-card { border:1px solid var(--border); background:#fff; padding:16px; text-align:left; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; border-radius:8px; }
.game-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.06); }
.game-card h2 { margin:0 0 6px 0; font-size:1.2rem; }
.game-card p { margin:0 0 6px 0; color:var(--muted); }
.game-card small { color:var(--muted); }
/* ...existing styles... */
.card { border:1px solid var(--border); border-radius:10px; padding:16px; background:#fff; }
.card h3 { margin:0 0 8px 0; }
.options { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin-top:12px; }
button.primary { background:#111; color:#fff; border:0; padding:10px 14px; border-radius:8px; cursor:pointer; }
button.ghost { background:transparent; border:1px solid var(--border); color:#111; padding:10px 14px; border-radius:8px; cursor:pointer; }
button.choice { border:1px solid var(--border); background:#fff; padding:10px; border-radius:8px; cursor:pointer; }
.feedback { margin-top:10px; padding:10px; background:var(--surface); border:1px solid var(--border); border-radius:8px; }
.meta { color:var(--muted); font-size:.9rem; }
.controls { display:flex; gap:8px; margin-top:16px; }
/* ...existing styles... */
/* Print */
@media print {
  .site-header, #menu, .controls, .site-footer { display:none; }
  #game-area { display:block !important; }
  .card { page-break-inside:avoid; margin-bottom:12px; }
}

