/* ═══════════════════════════════════════════════════════════
   GuterSpieler.com — design system
   Tailwind (CDN) handles utilities; this file owns the identity:
   glass, glow, mesh, motion and every game-specific surface.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────── */
:root {
  --bg-0:#0F172A; --bg-1:#1E293B; --bg-2:#0B1220;
  --violet:#8B5CF6; --violet-dim:#6D3EF0;
  --cyan:#06B6D4;   --cyan-dim:#0891B2;
  --yellow:#FACC15; --coral:#EF4444; --lime:#4ADE80;
  --text:#F8FAFC;   --muted:#94A3B8;

  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.09);
  --brd:rgba(255,255,255,.11);
  --brd-2:rgba(255,255,255,.18);
  --shadow:0 24px 60px -20px rgba(2,6,23,.85);

  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --nav-h:74px;
  --stage-h:min(70dvh,660px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

[data-theme="light"] {
  --bg-0:#EEF2FF; --bg-1:#E2E8F0; --bg-2:#F8FAFC;
  --text:#0F172A; --muted:#475569;
  --glass:rgba(255,255,255,.62);
  --glass-2:rgba(255,255,255,.8);
  --brd:rgba(15,23,42,.10);
  --brd-2:rgba(15,23,42,.18);
  --shadow:0 24px 60px -24px rgba(30,41,59,.32);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 24px); }

body {
  margin:0; min-height:100dvh;
  background:var(--bg-0); color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked { overflow:hidden; }

h1,h2,h3,h4,.font-display { font-family:'Outfit',system-ui,sans-serif; letter-spacing:-.02em; }
::selection { background:var(--violet); color:#fff; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Scrollbar */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb {
  background:linear-gradient(var(--violet),var(--cyan));
  border-radius:99px; border:3px solid var(--bg-0);
}

/* ── 2. Ambient background ─────────────────────────────────── */
.mesh { position:fixed; inset:0; z-index:-1; overflow:hidden; background:
  radial-gradient(1200px 700px at 50% -10%, rgba(139,92,246,.20), transparent 60%),
  linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-2) 100%); }

.mesh__blob { position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; will-change:transform; }
.mesh__blob--a { width:46vw; height:46vw; left:-10vw; top:-8vw; background:var(--violet); animation:drift 26s var(--ease-out) infinite alternate; }
.mesh__blob--b { width:38vw; height:38vw; right:-8vw; top:22vh; background:var(--cyan); opacity:.38; animation:drift 32s var(--ease-out) infinite alternate-reverse; }
.mesh__blob--c { width:32vw; height:32vw; left:24vw; bottom:-14vw; background:#DB2777; opacity:.22; animation:drift 38s var(--ease-out) infinite alternate; }

.mesh__grid {
  position:absolute; inset:0; opacity:.28;
  background-image:linear-gradient(rgba(148,163,184,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(148,163,184,.10) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
}
@keyframes drift { to { transform:translate3d(8vw,6vh,0) scale(1.18); } }

/* ── 3. Primitives ─────────────────────────────────────────── */
.glass {
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--brd);
  border-radius:var(--r-lg);
}

.btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.72rem 1.35rem; border:1px solid transparent; border-radius:99px;
  font-family:'Outfit',sans-serif; font-weight:700; font-size:.95rem; line-height:1;
  color:var(--text); cursor:pointer; overflow:hidden; white-space:nowrap;
  text-decoration:none; background:var(--glass-2); isolation:isolate;
  transition:transform .22s var(--ease-spring), box-shadow .3s var(--ease-out), filter .3s;
}
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0) scale(.96); }
.btn--sm { padding:.5rem 1rem; font-size:.85rem; }
.btn--lg { padding:1rem 1.9rem; font-size:1.05rem; }

.btn--primary {
  background:linear-gradient(120deg,var(--violet),var(--cyan));
  color:#fff; box-shadow:0 10px 30px -10px rgba(139,92,246,.9);
}
.btn--primary:hover { box-shadow:0 16px 40px -10px rgba(139,92,246,1), 0 0 0 1px rgba(255,255,255,.25) inset; filter:brightness(1.08); }
.btn--primary::after {
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(120deg,var(--cyan),var(--violet));
  transition:opacity .35s;
}
.btn--primary:hover::after { opacity:1; }

.btn--ghost { border-color:var(--brd-2); background:transparent; }
.btn--ghost:hover { background:var(--glass-2); border-color:var(--violet); }
.btn--danger { background:linear-gradient(120deg,var(--coral),#F97316); color:#fff; }

/* Ripple */
.ripple {
  position:absolute; border-radius:50%; transform:scale(0); pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);
  animation:ripple .62s var(--ease-out) forwards;
}
@keyframes ripple { to { transform:scale(3.2); opacity:0; } }

.icon-btn {
  display:grid; place-items:center; width:40px; height:40px; flex:0 0 auto;
  border-radius:12px; border:1px solid var(--brd); background:var(--glass);
  color:var(--text); font-size:1rem; cursor:pointer;
  transition:transform .2s var(--ease-spring), border-color .25s, background .25s, box-shadow .25s;
}
.icon-btn:hover { transform:translateY(-2px); border-color:var(--violet); box-shadow:0 0 18px -4px var(--violet); }
.icon-btn:active { transform:scale(.9); }
.icon-btn--close:hover { border-color:var(--coral); box-shadow:0 0 18px -4px var(--coral); }

.pill {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .95rem; border-radius:99px;
  border:1px solid var(--brd-2); background:var(--glass);
  font-size:.8rem; font-weight:600; color:var(--muted); letter-spacing:.01em;
}
.pill__dot { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime); animation:blink 2s infinite; }
@keyframes blink { 50% { opacity:.35; } }

.chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip {
  padding:.5rem 1rem; border-radius:99px; cursor:pointer;
  border:1px solid var(--brd); background:var(--glass); color:var(--muted);
  font-size:.85rem; font-weight:600; font-family:'Outfit',sans-serif;
  transition:all .25s var(--ease-out);
}
.chip:hover { color:var(--text); border-color:var(--brd-2); }
.chip.is-active {
  color:#fff; border-color:transparent;
  background:linear-gradient(120deg,var(--violet),var(--cyan));
  box-shadow:0 8px 24px -10px var(--violet);
}

/* ── 4. Preloader ──────────────────────────────────────────── */
.preloader {
  position:fixed; inset:0; z-index:200; display:grid; place-content:center; justify-items:center; gap:1rem;
  background:var(--bg-0); transition:opacity .6s var(--ease-out), visibility .6s;
}
.preloader.is-done { opacity:0; visibility:hidden; }
.preloader__box { font-size:4rem; animation:tumble 1.4s var(--ease-spring) infinite; }
@keyframes tumble { 0%,100% { transform:translateY(0) rotate(-6deg); } 50% { transform:translateY(-18px) rotate(8deg); } }
.preloader__label { font-family:'Outfit',sans-serif; font-weight:900; font-size:1.4rem; letter-spacing:-.03em; }
.preloader__label span { color:var(--violet); }
.preloader__bar { width:180px; height:4px; border-radius:99px; background:var(--glass-2); overflow:hidden; }
.preloader__bar i { display:block; height:100%; width:40%; border-radius:99px; background:linear-gradient(90deg,var(--violet),var(--cyan)); animation:load 1.1s var(--ease-out) infinite; }
@keyframes load { 0% { transform:translateX(-110%); } 100% { transform:translateX(320%); } }

/* ── 5. Navbar ─────────────────────────────────────────────── */
.nav { position:fixed; top:14px; left:0; right:0; z-index:90; padding:0 clamp(12px,3vw,28px); }
.nav__inner {
  display:flex; align-items:center; gap:clamp(.6rem,2vw,1.4rem);
  max-width:1280px; margin:0 auto; padding:.6rem .7rem .6rem 1rem;
  height:var(--nav-h); border-radius:20px;
  box-shadow:0 10px 40px -18px rgba(2,6,23,.9);
  transition:background .35s, box-shadow .35s, transform .35s var(--ease-out);
}
.nav.is-stuck .nav__inner { background:var(--glass-2); box-shadow:0 18px 50px -22px rgba(2,6,23,1); }
.nav.is-hidden { transform:translateY(-130%); }

.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); flex:0 0 auto; }
.brand__icon { position:relative; display:grid; place-items:center; width:38px; height:38px; font-size:1.5rem; transform-style:preserve-3d; }
.brand__lid { display:block; transition:transform .5s var(--ease-spring), filter .4s; }
.brand:hover .brand__lid { transform:translateY(-5px) rotate(-14deg) scale(1.12); filter:drop-shadow(0 6px 14px var(--violet)); }
.brand__icon::after {
  content:''; position:absolute; inset:-6px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle,var(--violet),transparent 68%); opacity:.45;
  animation:pulseGlow 2.6s ease-in-out infinite;
}
@keyframes pulseGlow { 50% { opacity:.9; transform:scale(1.22); } }
.brand__text { font-family:'Outfit',sans-serif; font-weight:900; font-size:1.16rem; letter-spacing:-.03em; }
.brand__tld { background:linear-gradient(90deg,var(--violet),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand--sm .brand__text { font-size:1rem; }

.nav__search { position:relative; flex:1 1 auto; max-width:340px; display:flex; align-items:center; }
.nav__search-icon { position:absolute; left:.85rem; font-size:.85rem; opacity:.7; pointer-events:none; }
.nav__search input {
  width:100%; padding:.62rem 2.4rem .62rem 2.3rem;
  border-radius:12px; border:1px solid var(--brd); background:var(--glass);
  color:var(--text); font-size:.9rem; outline:none;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.nav__search input::placeholder { color:var(--muted); }
.nav__search input:focus { border-color:var(--violet); box-shadow:0 0 0 3px rgba(139,92,246,.22); background:var(--glass-2); }
.nav__search input::-webkit-search-cancel-button { filter:invert(.6); }
.nav__kbd {
  position:absolute; right:.6rem; padding:.1rem .4rem; border-radius:6px;
  border:1px solid var(--brd-2); font-size:.7rem; color:var(--muted); pointer-events:none;
}

.nav__right { display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.ticker {
  display:flex; align-items:center; gap:.45rem; padding:.42rem .8rem;
  border-radius:12px; border:1px solid var(--brd); background:var(--glass);
}
.ticker__flame { font-size:.9rem; filter:drop-shadow(0 0 6px var(--yellow)); }
.ticker__value { font-family:'Outfit',sans-serif; font-weight:800; font-size:1rem; color:var(--yellow); font-variant-numeric:tabular-nums; }
.ticker__label { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

@media (max-width:1024px) { .nav__cta { display:none; } }
@media (max-width:860px)  { .ticker__label { display:none; } }
@media (max-width:680px)  { .nav__search { max-width:none; } .nav__kbd { display:none; } .ticker { display:none; } }

/* ── 6. Hero ───────────────────────────────────────────────── */
.hero {
  position:relative; min-height:100svh; display:grid; place-items:center;
  padding:calc(var(--nav-h) + 60px) clamp(16px,5vw,32px) 80px; text-align:center;
}
.hero__canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero__content { position:relative; max-width:900px; display:grid; justify-items:center; gap:1.5rem; }

.hero__title {
  margin:0; font-weight:900; line-height:1.02;
  font-size:clamp(2.5rem,7.2vw,5.4rem);
  text-wrap:balance;
}
.hero__title-accent {
  display:block;
  background:linear-gradient(100deg,var(--violet) 0%,var(--cyan) 50%,var(--yellow) 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 7s linear infinite;
}
@keyframes shimmer { to { background-position:220% center; } }

.hero__sub { margin:0; max-width:620px; color:var(--muted); font-size:clamp(1rem,2vw,1.16rem); line-height:1.65; text-wrap:pretty; }
.hero__actions { display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; }

.hero__stats { display:flex; flex-wrap:wrap; gap:clamp(1.2rem,5vw,3.2rem); margin:1.2rem 0 0; }
.hero__stats div { display:grid; gap:.15rem; }
.hero__stats dt { font-family:'Outfit',sans-serif; font-weight:900; font-size:clamp(1.6rem,4vw,2.2rem); background:linear-gradient(120deg,var(--violet),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero__stats dd { margin:0; font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; }

.hero__scroll { position:absolute; bottom:26px; left:50%; translate:-50% 0; width:24px; height:38px; border:2px solid var(--brd-2); border-radius:99px; }
.hero__scroll span { position:absolute; top:7px; left:50%; translate:-50% 0; width:4px; height:7px; border-radius:99px; background:var(--cyan); animation:scrolly 1.8s var(--ease-out) infinite; }
@keyframes scrolly { 0% { opacity:0; transform:translateY(0); } 40% { opacity:1; } 100% { opacity:0; transform:translateY(15px); } }

/* ── 7. Sections ───────────────────────────────────────────── */
.section { max-width:1280px; margin:0 auto; padding:clamp(56px,9vw,110px) clamp(16px,4vw,32px); }
.section__head { display:flex; flex-wrap:wrap; gap:1.2rem; align-items:flex-end; justify-content:space-between; margin-bottom:2.2rem; }
.section__title { margin:0; font-size:clamp(1.8rem,4.4vw,2.9rem); font-weight:800; }
.section__sub { margin:.45rem 0 0; color:var(--muted); font-size:.98rem; }
.section__sub code { padding:.1rem .35rem; border-radius:6px; background:var(--glass-2); font-size:.86em; }

/* ── 8. Carousel ───────────────────────────────────────────── */
.carousel { position:relative; }
.carousel__track {
  display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:.4rem .3rem 1.2rem; scrollbar-width:none;
}
.carousel__track::-webkit-scrollbar { display:none; }
.carousel__nav { display:flex; gap:.5rem; }

.slide {
  position:relative; flex:0 0 min(560px,86vw); scroll-snap-align:center;
  border-radius:var(--r-xl); overflow:hidden; cursor:pointer;
  min-height:290px; border:1px solid var(--brd);
  background:linear-gradient(140deg,var(--c1),var(--c2));
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.slide:hover { transform:translateY(-6px); box-shadow:0 30px 70px -30px var(--c1); }
.slide::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.28), transparent 55%),
             linear-gradient(to top, rgba(2,6,23,.92) 12%, rgba(2,6,23,.15) 70%);
}
.slide__emoji {
  position:absolute; right:-.1em; bottom:-.24em; font-size:13rem; line-height:1; opacity:.9;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));
  transition:transform .6s var(--ease-spring);
}
.slide:hover .slide__emoji { transform:translate(-14px,-14px) rotate(-8deg) scale(1.06); }
.slide__body { position:relative; z-index:2; padding:1.6rem; display:grid; gap:.55rem; align-content:end; height:100%; min-height:290px; }
.slide__kicker { font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.slide__title { margin:0; font-size:clamp(1.5rem,3.6vw,2.1rem); font-weight:900; color:#fff; }
.slide__desc { margin:0; max-width:58%; color:rgba(248,250,252,.86); font-size:.92rem; line-height:1.55; }
.slide__cta { margin-top:.7rem; justify-self:start; }
.carousel__dots { display:flex; gap:.4rem; justify-content:center; }
.carousel__dots i { width:22px; height:4px; border-radius:99px; background:var(--brd-2); cursor:pointer; transition:all .3s; }
.carousel__dots i.is-active { width:38px; background:linear-gradient(90deg,var(--violet),var(--cyan)); }

/* ── 9. Game grid ──────────────────────────────────────────── */
.grid { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }
.grid__empty { text-align:center; color:var(--muted); padding:3rem 0; }

.game-card { perspective:1100px; }
.game-card.is-hidden { display:none; }

.game-card__inner {
  position:relative; height:100%; display:flex; flex-direction:column;
  border-radius:var(--r-lg); overflow:hidden; cursor:pointer;
  border:1px solid var(--brd); background:var(--glass);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));
  transform-style:preserve-3d;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s;
}
.game-card:hover .game-card__inner {
  --s:1.03; border-color:var(--c1);
  box-shadow:0 0 0 1px var(--c1), 0 24px 60px -24px var(--c1), 0 0 42px -14px var(--c2);
}
.game-card__glow {
  position:absolute; inset:-40%; z-index:0; opacity:0; pointer-events:none;
  background:conic-gradient(from var(--a,0deg), var(--c1), var(--c2), var(--c1));
  filter:blur(42px); transition:opacity .45s;
  animation:spin 7s linear infinite;
}
.game-card:hover .game-card__glow { opacity:.32; }
@keyframes spin { to { --a:360deg; transform:rotate(360deg); } }

.game-card__art {
  position:relative; z-index:1; height:158px; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(135deg,var(--c1),var(--c2));
}
.game-card__art::before {
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:26px 26px;
  transition:transform .8s var(--ease-out);
}
.game-card:hover .game-card__art::before { transform:translate(-13px,-13px) scale(1.1); }
.game-card__art::after { content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(2,6,23,.55),transparent 60%); }
.game-card__emoji {
  position:relative; z-index:2; font-size:4.2rem; line-height:1;
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.45));
  transition:transform .5s var(--ease-spring);
}
.game-card:hover .game-card__emoji { transform:translateZ(40px) scale(1.16) rotate(-7deg); }

.game-card__badges { position:absolute; z-index:3; top:.7rem; left:.7rem; display:flex; flex-wrap:wrap; gap:.35rem; }
.badge {
  padding:.24rem .55rem; border-radius:7px; font-size:.62rem; font-weight:900;
  letter-spacing:.09em; text-transform:uppercase; color:#0F172A;
  backdrop-filter:blur(6px); box-shadow:0 4px 12px -4px rgba(0,0,0,.6);
}
.badge--hot { background:var(--coral); color:#fff; animation:hotPulse 1.8s ease-in-out infinite; }
@keyframes hotPulse { 50% { box-shadow:0 0 18px 2px rgba(239,68,68,.75); } }
.badge--new { background:var(--lime); }
.badge--multiplayer { background:var(--cyan); color:#04202B; }
.badge--score { background:var(--yellow); }

.game-card__body { position:relative; z-index:1; padding:1.05rem 1.15rem 1.2rem; display:grid; gap:.4rem; flex:1; }
.game-card__body h3 { margin:0; font-size:1.16rem; font-weight:800; }
.game-card__body p { margin:0; color:var(--muted); font-size:.86rem; line-height:1.55; }
.game-card__meta {
  display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.55rem; padding-top:.7rem;
  border-top:1px solid var(--brd); font-size:.76rem; color:var(--muted);
}
.game-card__meta b { color:var(--yellow); font-variant-numeric:tabular-nums; }

.game-card__overlay {
  position:absolute; inset:0; z-index:4; display:grid; place-items:center;
  background:rgba(15,23,42,.72); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .3s var(--ease-out);
}
.game-card:hover .game-card__overlay, .game-card:focus-within .game-card__overlay { opacity:1; }
.game-card__overlay .btn { transform:translateY(12px) scale(.92); transition:transform .4s var(--ease-spring); }
.game-card:hover .game-card__overlay .btn { transform:translateY(0) scale(1); }

/* ── 10. Leaderboard + features ────────────────────────────── */
.board { overflow:hidden; }
.board__row {
  display:grid; grid-template-columns:2.2rem 1fr auto auto; align-items:center; gap:1rem;
  padding:.95rem 1.3rem; border-bottom:1px solid var(--brd);
  transition:background .25s;
}
.board__row:last-child { border-bottom:0; }
.board__row:hover { background:var(--glass-2); }
.board__rank { font-family:'Outfit',sans-serif; font-weight:900; color:var(--muted); font-size:.95rem; }
.board__row:nth-child(1) .board__rank { color:var(--yellow); }
.board__name { display:flex; align-items:center; gap:.7rem; font-weight:600; }
.board__name span { font-size:1.3rem; }
.board__score { font-family:'Outfit',sans-serif; font-weight:900; font-size:1.1rem; color:var(--yellow); font-variant-numeric:tabular-nums; }
.board__play { font-size:.78rem; color:var(--muted); }
.board__empty { padding:2.4rem; text-align:center; color:var(--muted); }
@media (max-width:600px) { .board__play { display:none; } .board__row { grid-template-columns:1.8rem 1fr auto; } }

.features { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.feature { padding:1.5rem; display:grid; gap:.5rem; align-content:start; transition:transform .35s var(--ease-out), border-color .35s; }
.feature:hover { transform:translateY(-5px); border-color:var(--violet); }
.feature__icon { font-size:1.8rem; }
.feature h3 { margin:0; font-size:1.05rem; font-weight:800; }
.feature p { margin:0; color:var(--muted); font-size:.87rem; line-height:1.6; }

/* ── 11. Footer ────────────────────────────────────────────── */
.footer { border-top:1px solid var(--brd); background:rgba(2,6,23,.35); backdrop-filter:blur(12px); }
[data-theme="light"] .footer { background:rgba(255,255,255,.5); }
.footer__inner {
  max-width:1280px; margin:0 auto; padding:2.4rem clamp(16px,4vw,32px);
  display:flex; flex-wrap:wrap; gap:1.2rem; align-items:center; justify-content:space-between;
}
.footer__note { margin:0; color:var(--muted); font-size:.86rem; }
.footer__links { display:flex; gap:1.2rem; }
.footer__links a { color:var(--muted); text-decoration:none; font-size:.86rem; transition:color .25s; }
.footer__links a:hover { color:var(--violet); }

/* ── 12. Arena (game modal) ────────────────────────────────── */
.arena { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:clamp(8px,2vw,24px); }
.arena[hidden] { display:none; }
.arena__backdrop { position:absolute; inset:0; background:rgba(2,6,23,.82); backdrop-filter:blur(10px); animation:fadeIn .3s var(--ease-out); }
@keyframes fadeIn { from { opacity:0; } }

/* The panel tracks the loaded game's aspect ratio so a square cabinet
   is not marooned in a cinema-wide frame. 560px is the floor the
   header (title + score boxes + close) needs to stay readable. */
.arena__panel {
  --aspect:1;
  position:relative; z-index:2; max-height:96dvh; max-width:1080px;
  width:min(100%, max(560px, calc(var(--stage-h) * var(--aspect) + 40px)));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--glass-2); box-shadow:var(--shadow), 0 0 0 1px var(--brd-2), 0 0 90px -30px var(--violet);
  animation:arenaIn .5s var(--ease-spring);
}
@keyframes arenaIn { from { opacity:0; transform:translateY(28px) scale(.93); } }
.arena.is-closing .arena__panel { animation:arenaOut .25s var(--ease-out) forwards; }
@keyframes arenaOut { to { opacity:0; transform:scale(.94); } }

.arena__bar { display:flex; align-items:center; gap:1rem; padding:.85rem 1rem; border-bottom:1px solid var(--brd); }
.arena__id { display:flex; align-items:center; gap:.75rem; min-width:0; }
.arena__emoji { font-size:1.9rem; filter:drop-shadow(0 0 12px var(--violet)); }
.arena__title { margin:0; font-size:1.1rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arena__hint { margin:.1rem 0 0; font-size:.74rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.arena__scores { display:flex; gap:.5rem; margin-left:auto; }
.scorebox {
  display:grid; gap:.1rem; justify-items:center; min-width:74px;
  padding:.35rem .7rem; border-radius:12px; border:1px solid var(--brd); background:var(--glass);
}
.scorebox span { font-size:.62rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.scorebox b { font-family:'Outfit',sans-serif; font-weight:900; font-size:1.05rem; font-variant-numeric:tabular-nums; }
.scorebox--best b { color:var(--yellow); }
.scorebox--extra b { color:var(--coral); }
.scorebox.is-bumped { animation:bump .4s var(--ease-spring); }
@keyframes bump { 50% { transform:scale(1.18); border-color:var(--cyan); } }

/* A fixed stage height breaks the circular dependency between
   "canvas fits the stage" and "stage grows to fit the canvas". */
.arena__stage {
  position:relative; height:var(--stage-h); min-height:200px;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%, #101a33, #060B18 75%);
  overflow:hidden;
}
[data-theme="light"] .arena__stage { background:radial-gradient(circle at 50% 40%, #1E293B, #0F172A 78%); }
.arena__stage canvas { display:block; max-width:100%; max-height:100%; touch-action:none; }
.arena__stage.is-dom canvas { display:none; }
.arena__stage.shake { animation:shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%,90% { transform:translate3d(-2px,1px,0); }
  20%,80% { transform:translate3d(5px,-3px,0); }
  30%,50%,70% { transform:translate3d(-8px,3px,0); }
  40%,60% { transform:translate3d(8px,-2px,0); }
}
.arena__stage.flash::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--flash,#fff); animation:flashOut .28s var(--ease-out) forwards;
}
@keyframes flashOut { from { opacity:.5; } to { opacity:0; } }

.game-root { position:absolute; inset:0; display:none; }
.arena__stage.is-dom .game-root { display:block; }

.arena__controls {
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  padding:.7rem 1rem; border-top:1px solid var(--brd);
}
.ctrl-btn {
  display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .85rem;
  border-radius:11px; border:1px solid var(--brd); background:var(--glass);
  color:var(--text); font-size:.82rem; font-weight:600; cursor:pointer;
  transition:all .22s var(--ease-out);
}
.ctrl-btn:hover { border-color:var(--cyan); color:#fff; box-shadow:0 0 16px -6px var(--cyan); transform:translateY(-1px); }
.ctrl-btn:active { transform:scale(.94); }
.ctrl-btn.is-off { opacity:.5; }
.arena__keys { margin-left:auto; font-size:.7rem; color:var(--muted); letter-spacing:.03em; }
@media (max-width:760px) { .arena__keys { display:none; } .arena__hint { display:none; } .scorebox { min-width:62px; } }

/* Overlay screens (start / pause / game over) */
.overlay {
  position:absolute; inset:0; z-index:5; display:grid; place-items:center;
  background:rgba(6,11,24,.78); backdrop-filter:blur(6px);
  transition:opacity .3s var(--ease-out), visibility .3s;
}
.overlay.is-hidden { opacity:0; visibility:hidden; }
.overlay__card {
  max-width:min(440px,86%); padding:1.8rem; text-align:center; display:grid; gap:.7rem; justify-items:center;
  border-radius:var(--r-lg); border:1px solid var(--brd-2); background:var(--glass-2);
  animation:popIn .42s var(--ease-spring);
}
@keyframes popIn { from { opacity:0; transform:scale(.86) translateY(14px); } }
.overlay__title { margin:0; font-size:1.9rem; font-weight:900; }
.overlay__title.is-win { background:linear-gradient(100deg,var(--yellow),#F97316); -webkit-background-clip:text; background-clip:text; color:transparent; }
.overlay__title.is-lose { color:var(--coral); }
.overlay__text { margin:0; color:var(--muted); font-size:.95rem; line-height:1.6; }
.overlay__extra:empty { display:none; }
.overlay__actions { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:.3rem; }

.opt-group { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; }
.opt {
  padding:.42rem .85rem; border-radius:99px; cursor:pointer; font-size:.8rem; font-weight:700;
  border:1px solid var(--brd); background:var(--glass); color:var(--muted); font-family:'Outfit',sans-serif;
  transition:all .22s;
}
.opt:hover { color:var(--text); border-color:var(--brd-2); }
.opt.is-active { color:#fff; border-color:transparent; background:linear-gradient(120deg,var(--violet),var(--cyan)); }
.opt-label { font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }

/* ── 13. Memory Match (DOM game) ───────────────────────────── */
.mm { position:absolute; inset:0; display:flex; flex-direction:column; gap:.7rem; padding:clamp(.6rem,2vw,1.1rem); }
.mm__hud { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
.mm__stat {
  display:flex; align-items:center; gap:.4rem; padding:.3rem .75rem; border-radius:99px;
  border:1px solid var(--brd); background:var(--glass); font-size:.78rem; color:var(--muted);
}
.mm__stat b { font-family:'Outfit',sans-serif; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; }
.mm__stat.is-urgent b { color:var(--coral); }
.mm__grid { flex:1; display:grid; gap:clamp(.35rem,1.2vw,.7rem); place-content:center; min-height:0; overflow:auto; }

/* Sized off both axes so 6 × 4 still fits a phone in portrait. */
.mm-card { perspective:800px; cursor:pointer; aspect-ratio:3/4; width:clamp(38px,min(12vw,8vh),92px); }
.mm-card__inner {
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .5s var(--ease-spring);
}
.mm-card.is-flipped .mm-card__inner { transform:rotateY(180deg); }
.mm-card.is-matched .mm-card__inner { animation:matched .6s var(--ease-spring); }
@keyframes matched { 40% { transform:rotateY(180deg) scale(1.14); } 100% { transform:rotateY(180deg) scale(1); } }
.mm-card.is-matched { cursor:default; }
.mm-card.is-wrong .mm-card__inner { animation:wrongShake .45s; }
@keyframes wrongShake { 25% { transform:rotateY(180deg) translateX(-7px); } 75% { transform:rotateY(180deg) translateX(7px); } }

.mm-card__face {
  position:absolute; inset:0; display:grid; place-items:center;
  border-radius:14px; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:1px solid var(--brd-2); font-size:clamp(1.5rem,4vw,2.4rem);
}
.mm-card__face--back {
  background:linear-gradient(140deg,var(--violet),var(--cyan));
  box-shadow:inset 0 0 24px rgba(255,255,255,.22);
}
.mm-card__face--back::after { content:'📦'; font-size:.9em; filter:drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.mm-card__face--front { transform:rotateY(180deg); background:var(--glass-2); backdrop-filter:blur(8px); }
.mm-card.is-matched .mm-card__face--front { border-color:var(--lime); box-shadow:0 0 22px -6px var(--lime); }
.mm-card:not(.is-flipped):hover .mm-card__inner { transform:rotateY(-9deg) scale(1.05); }

/* ── 14. FX layer ──────────────────────────────────────────── */
.fx-canvas { position:fixed; inset:0; z-index:150; pointer-events:none; width:100%; height:100%; }

.toasts { position:fixed; z-index:160; bottom:20px; left:50%; translate:-50% 0; display:grid; gap:.5rem; justify-items:center; pointer-events:none; }
.toast {
  display:flex; align-items:center; gap:.6rem; padding:.7rem 1.1rem;
  border-radius:99px; border:1px solid var(--brd-2); background:var(--glass-2);
  backdrop-filter:blur(16px); font-size:.88rem; font-weight:600;
  box-shadow:var(--shadow); animation:toastIn .45s var(--ease-spring);
}
.toast.is-out { animation:toastOut .3s var(--ease-out) forwards; }
.toast--win { border-color:var(--yellow); box-shadow:0 0 30px -10px var(--yellow); }
@keyframes toastIn { from { opacity:0; transform:translateY(22px) scale(.9); } }
@keyframes toastOut { to { opacity:0; transform:translateY(12px) scale(.95); } }

/* ── 15. Scroll reveal ─────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease-out) var(--d,0s), transform .7s var(--ease-out) var(--d,0s); }
.reveal.is-in { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
  html { scroll-behavior:auto; }
}