:root {
      --bg: #0b1022;
      --panel: #121826;
      --text: #e5e7eb;
      --muted: #94a3b8;
      --primary: #22d3ee;
      --ok: #10b981;
      --gap: 10px;
    }
    * { box-sizing: border-box; }
    body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; color: var(--text); background: var(--bg); }
    .app { max-width: 900px; margin: 20px auto; padding: 12px; }
    header { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .title { display: flex; gap: 8px; align-items: center; }
    .title h1 { margin: 0; font-size: 1.2rem; }
    .badge { background: var(--primary); color: #04121a; padding: 3px 8px; border-radius: 999px; font-weight: 700; font-size: .8rem; }
    .panel { background: var(--panel); border: 1px solid #1f2937; border-radius: 12px; padding: 10px; display: flex; gap: 10px; align-items: center; }
    select, button { border: 1px solid #1f2937; background: #0d1424; color: var(--text); padding: 8px 10px; border-radius: 10px; font-size: .95rem; cursor: pointer; }
    button:disabled { opacity: .6; cursor: not-allowed; }
    .stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 10px 0; }
    .stat { background: var(--panel); border: 1px solid #1f2937; border-radius: 12px; padding: 8px 10px; }
    .stat small { color: var(--muted); font-size: .75rem; display:block; }
    .board { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap); background: #0d1424; border: 1px solid #1f2937; border-radius: 12px; padding: var(--gap); }
    .card { position: relative; min-height: 64px; aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 10px; border: 1px solid #23314d; background: #0b1222; color: var(--text); font-size: 1.6rem; transition: background .12s ease; user-select: none; }
    .card.hidden { background: #0b1222; color: transparent; }
    .card.hidden::after { content: "?"; color: var(--muted); font-size: 1.1rem; }
    .card.matched { outline: 2px solid var(--ok); background: #0f1f1a; }
    .footer { margin-top: 8px; color: var(--muted); font-size: .85rem; text-align: center; }
    @media (max-width: 720px) { .stats { grid-template-columns: repeat(2,1fr); } header { flex-direction: column; align-items: stretch; } }