/* Minimal, schnelle UI – mobile-first */
:root{
  --bg:#0b1220; --fg:#e5e7eb; --muted:#9ca3af; --brand:#22d3ee; --card:#111827; --accent:#34d399;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 700px at 10% -10%,#0f172a 10%, #0b1220 60%) fixed;color:var(--fg);font:500 16px/1.4 system-ui, Segoe UI, Roboto, Helvetica, Arial}
h1,h2{margin:.2rem 0 .6rem}
h1 span{color:var(--brand)}
.appbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(17,24,39,.8);backdrop-filter:blur(6px);border-bottom:1px solid #111}
.wrap{max-width:960px;margin:0 auto;padding:16px}
.hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:8px;align-items:center;margin-bottom:12px}
.hud .hud-item{background:var(--card);padding:10px 12px;border-radius:12px;text-align:center}
.board{display:grid;gap:8px;grid-template-columns:repeat(4,1fr);outline:none}
@media(min-width:540px){.board{grid-template-columns:repeat(6,1fr)}}
.card{position:relative;background:linear-gradient(145deg,#0f172a,#0b1220);border:1px solid #111;border-radius:16px;aspect-ratio:1/1;display:grid;place-items:center;cursor:pointer;transform-style:preserve-3d;transition:transform .3s ease, box-shadow .2s}
.card:focus-visible{outline:2px solid var(--brand)}
.card .face{position:absolute;inset:0;border-radius:16px;display:grid;place-items:center;font-size:calc(36px + 1.2vw);backface-visibility:hidden}
.card .front{background:var(--card)}
.card .back{transform:rotateY(180deg);background:#0e1a2f;border:1px solid #0a1222}
.card.flipped{transform:rotateY(180deg)}
.card.matched{box-shadow:0 0 0 2px var(--accent) inset;cursor:default;opacity:.98}
.panel{margin-top:18px;padding:16px;background:var(--card);border:1px solid #111;border-radius:16px}
.panel-actions{display:flex;gap:8px;margin-top:8px}
.btn{padding:10px 14px;border-radius:12px;border:1px solid #223;cursor:pointer;background:#0e1a2f;color:var(--fg)}
.btn.primary{background:linear-gradient(135deg,var(--brand),#5eead4);color:#06131a;border:none}
.btn.ghost{background:transparent;border:1px dashed #334155;color:var(--muted)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.foot{padding:32px 16px;color:var(--muted);text-align:center}