:root {
  --bg: #0f1220;
  --panel: #171a2b;
  --card: #202642;
  --accent: #7c9cff;
  --good: #39d98a;
  --bad: #ff6b6b;
  --txt: #e8ecff;
  --muted: #aab3da;
  --shadow: 0 10px 25px rgba(0,0,0,.3);
  --radius: 16px;
  --symbol-size: clamp(28px, 5.8vw, 42px);
}
* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family: system-ui, sans-serif; background: var(--bg); color: var(--txt); }
header { padding:16px clamp(16px, 3vw, 28px) 0; }
h1 { font-size:clamp(20px, 3.5vw, 28px); margin:0 0 6px 0; font-weight:800; }
p.subtitle { margin:0; color:var(--muted); }
.topbar { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.panel { background:#151a2d; border:1px solid #242a4a; padding:10px 12px; border-radius:var(--radius); display:flex; gap:12px; align-items:center; }
select, button { background:#14182d; border:1px solid #2a3157; color:var(--txt); padding:10px 14px; border-radius:12px; font-weight:600; cursor:pointer; }
button.primary { background:linear-gradient(180deg,#3a5cff,#264cff); }
button.ghost { background:#14182d; }
.stats { display:flex; gap:14px; flex-wrap:wrap; }
.stat { background:#131732; border:1px solid #232a4e; padding:8px 10px; border-radius:12px; font-size:14px; }
.stat strong { font-size:16px; }
main { padding:0 clamp(16px, 3vw, 28px) 28px; }
.board { display:grid; gap:10px; width:100%; }
.board.grid-auto { grid-template-columns: repeat(var(--cols), minmax(clamp(64px,10vw,110px),1fr)); }
.card { position:relative; aspect-ratio:1/1; border-radius:14px; perspective:1000px; user-select:none; }
.face { position:absolute; inset:0; display:grid; place-items:center; border-radius:14px; backface-visibility:hidden; transition:transform .45s ease; border:1px solid #2b325c; }
.face.back { background:radial-gradient(120px 120px at 40% 30%, #283064, #1c2145); }
.face.front { background:linear-gradient(180deg,#131935,#0f1430); transform:rotateY(180deg); }
.card.flipped .front { transform:rotateY(0deg); }
.card.flipped .back { transform:rotateY(-180deg); }
.symbol { font-size:var(--symbol-size); font-weight:700; color:var(--accent); }
.card.matched .front { outline:2px solid var(--good); animation:pop .45s ease; }
@keyframes pop{0%{transform:scale(.96)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
.footer-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:6px; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); display:none; place-items:center; }
.modal.show { display:grid; }
.dialog { background:#121734; border:1px solid #2a3157; padding:24px; border-radius:20px; width:min(520px,92vw); text-align:center; }
@media(hover:none){ button,select { padding:12px 14px; } }

.game-container {
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

#backHomeBtn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(6px);
  transition: 0.3s ease;
}

#backHomeBtn:hover {
  background: rgba(0, 180, 255, 0.9);
  color: #000;
  transform: scale(1.05);
}