:root{
  --bg:#06111f;
  --bg2:#0d1d31;
  --panel:rgba(10,20,36,.72);
  --border:rgba(173,220,255,.14);
  --text:#eef7ff;
  --muted:#90a8c8;
  --cyan:#69f1f0;
  --blue:#69a8ff;
  --purple:#8b7dff;
  --green:#33db9a;
  --shadow:0 16px 34px rgba(0,0,0,.34);
  --board-size:min(92vw, 92dvh);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 12%, rgba(105,241,240,.14), transparent 24%),
    radial-gradient(circle at 85% 14%, rgba(139,125,255,.14), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(105,168,255,.12), transparent 28%),
    linear-gradient(180deg,var(--bg),var(--bg2));
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}
.game-screen{
  height:100dvh;
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:6px;
  padding:
    max(6px, env(safe-area-inset-top))
    max(6px, env(safe-area-inset-right))
    max(6px, env(safe-area-inset-bottom))
    max(6px, env(safe-area-inset-left));
}
.top-controls{
  display:flex;
  justify-content:center;
  gap:8px;
}
.icon-btn{
  width:44px; height:44px;
  border:none; border-radius:13px;
  color:var(--text);
  font-size:1rem; font-weight:700;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease, opacity .12s ease;
}
.icon-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.icon-btn:active{transform:scale(.97)}
.icon-btn.primary{
  color:#071420;
  background:linear-gradient(145deg, var(--cyan), var(--blue));
}
.icon-btn.off{opacity:.48; filter:grayscale(.25)}
.mini-stats{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:6px;
  max-width:880px;
  width:min(100%, 880px);
  justify-self:center;
}
.mini-pill{
  min-height:38px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 9px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.mini-pill span{font-size:.9rem}
.mini-pill strong{
  font-size:clamp(.84rem, 1.35vw, .98rem);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.board-stage{
  min-height:0;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.game-board{
  width:var(--board-size);
  height:var(--board-size);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(6px, 1vmin, 12px);
  padding:clamp(4px, .8vmin, 10px);
}
.card{
  position:relative;
  width:100%;
  height:100%;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  perspective:1200px;
}
.card-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.card.flipped .card-inner,
.card.matched .card-inner{transform:rotateY(180deg)}
.card-face{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:clamp(12px, 1.9vmin, 22px);
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.card-face::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.22), transparent 28%, transparent 74%, rgba(0,0,0,.16));
  pointer-events:none;
}
.card-face::after{
  content:"";
  position:absolute; inset:1px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
}
.card-back{
  background:linear-gradient(155deg, #132846, #0a1730 58%, #08111f);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
.back-core{
  width:54%;
  height:54%;
  border-radius:18px;
  transform:rotate(-11deg);
  background:linear-gradient(155deg, rgba(255,255,255,.2), rgba(255,255,255,.05));
  box-shadow:0 10px 20px rgba(0,0,0,.25);
  position:relative;
}
.back-core::before, .back-core::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:radial-gradient(circle, var(--cyan), var(--blue));
  box-shadow:0 0 16px rgba(105,241,240,.42);
}
.back-core::before{width:18%;height:18%;top:14%;left:14%}
.back-core::after{width:24%;height:24%;bottom:12%;right:12%}
.card-front{
  transform:rotateY(180deg);
  background:linear-gradient(160deg, #89f8ff, #6aa9ff 56%, #355fe1);
  box-shadow:0 14px 26px rgba(74,149,255,.3), inset 0 1px 0 rgba(255,255,255,.18);
}
.card-front.alt{background:linear-gradient(160deg, #c0a3ff, #847dfd 56%, #4d46d4)}
.card.matched .card-front{
  background:linear-gradient(160deg, #88ffd7, #39dca2 56%, #14936b);
}
.symbol{
  position:relative;
  z-index:2;
  font-size:clamp(1.5rem, 4.8vmin, 3.15rem);
  line-height:1;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.26));
  transform:translateZ(18px) scale(1.04);
}
.glow{
  position:absolute;
  left:14%; right:14%; bottom:8%;
  height:14%;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,255,255,.62), transparent 70%);
  filter:blur(10px);
  opacity:.55;
}
.card.matched{animation:pulse .45s ease}
@keyframes pulse{
  0%{transform:scale(1)}
  45%{transform:scale(1.04)}
  100%{transform:scale(1)}
}
.overlay{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background:rgba(4, 10, 18, .78);
  z-index:12;
}
.hidden{display:none}
.panel{
  width:min(340px, 100%);
  padding:22px 16px;
  border-radius:22px;
  text-align:center;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
}
.panel-icon{font-size:2.5rem; margin-bottom:4px}
.panel h1, .panel h2{margin:0 0 8px}
.panel p{margin:0 0 14px; color:var(--muted)}
.name-input{
  width:100%;
  height:48px;
  border:none;
  outline:none;
  border-radius:14px;
  padding:0 14px;
  color:var(--text);
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  margin-bottom:12px;
}
.play-btn{
  width:100%;
  height:50px;
  border:none;
  border-radius:14px;
  cursor:pointer;
  font-weight:800;
  color:#071420;
  background:linear-gradient(145deg, var(--cyan), var(--blue));
  box-shadow:0 12px 24px rgba(103,169,255,.22);
}
@media (min-width: 1000px){
  .game-screen{padding:8px 10px}
  .game-board{gap:12px}
}
@media (max-width: 760px){
  .top-controls{justify-content:space-between}
  .icon-btn{width:42px;height:42px}
  .mini-pill{min-height:36px}
}
@media (max-width: 520px){
  .mini-stats{
    grid-template-columns:repeat(2, 1fr);
    width:100%;
  }
  .game-screen{gap:5px}
  .game-board{
    gap:7px;
    padding:2px;
  }
  .symbol{font-size:clamp(1.45rem, 8.4vw, 2.25rem)}
}