/* SlotVault — Aurora canvas, ported from Mockup B and adapted to dynamic brand hue. */

:root {
  --brand-hue: 265;
  --bg:#070611;
  --ink:#f3f0ff; --ink-soft:rgba(243,240,255,.66); --ink-faint:rgba(243,240,255,.4);
  --glass:rgba(255,255,255,.06); --glass-hi:rgba(255,255,255,.11); --line:rgba(255,255,255,.10);
  --nav-drawer-bg: rgba(9,7,22,0.93);
  --accent: hsl(var(--brand-hue) 92% 75%);
  --accent-2: hsl(calc(var(--brand-hue) + 50) 86% 72%);
  --accent-3: hsl(calc(var(--brand-hue) - 50) 90% 65%);
  --tile-shadow:0 30px 70px -28px rgba(0,0,0,.85), 0 8px 22px -10px hsl(var(--brand-hue) 80% 30% / .45);
  --halo:0 0 0 1px hsl(var(--brand-hue) 92% 75% / .6),
         0 0 50px hsl(var(--brand-hue) 92% 75% / .45),
         0 30px 60px -20px hsl(var(--brand-hue) 90% 60% / .35);
}

[data-theme="light"] {
  --bg:#ece7fb;
  --ink:#15102a; --ink-soft:rgba(21,16,42,.62); --ink-faint:rgba(21,16,42,.38);
  --glass:rgba(255,255,255,.55); --glass-hi:rgba(255,255,255,.78);
  --nav-drawer-bg: rgba(240,237,252,0.95);
  --line:hsl(var(--brand-hue) 60% 30% / .12);
  --accent: hsl(var(--brand-hue) 80% 55%);
  --accent-2: hsl(calc(var(--brand-hue) + 50) 75% 50%);
  --accent-3: hsl(calc(var(--brand-hue) - 50) 85% 50%);
  --tile-shadow:0 30px 70px -30px hsl(var(--brand-hue) 60% 30% / .35),
                0 6px 18px -8px hsl(var(--brand-hue) 60% 30% / .18);
  --halo:0 0 0 1px hsl(var(--brand-hue) 80% 55% / .5),
         0 0 38px hsl(var(--brand-hue) 80% 55% / .28),
         0 24px 50px -18px hsl(var(--brand-hue) 80% 55% / .3);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) { color-scheme: light; }
}

* { box-sizing: border-box; }
html, body {
  margin:0; height:100%; overflow:hidden; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Inter","SF Pro Text",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:-.005em;
  transition:background .4s ease,color .4s ease;
}

/* Aurora background */
.sv-aurora { position:fixed; inset:-15%; z-index:0; pointer-events:none; filter:blur(60px) saturate(1.2); opacity:.8; }
.sv-aurora b { position:absolute; border-radius:50%; mix-blend-mode:screen; animation:sv-drift 22s ease-in-out infinite; display:block; }
[data-theme="light"] .sv-aurora b { mix-blend-mode:multiply; opacity:.55; }
.sv-aurora .a1 { width:54vw; height:54vw; left:-10vw; top:-15vw; background:radial-gradient(circle,var(--accent),transparent 65%); }
.sv-aurora .a2 { width:48vw; height:48vw; right:-8vw; top:10vh; background:radial-gradient(circle,var(--accent-2),transparent 65%); animation-delay:-7s; animation-duration:28s; }
.sv-aurora .a3 { width:46vw; height:46vw; left:25vw; bottom:-20vw; background:radial-gradient(circle,var(--accent-3),transparent 65%); animation-delay:-14s; animation-duration:32s; }
@keyframes sv-drift {
  0%,100% { transform:translate(0,0) scale(1); }
  33% { transform:translate(6vw,-4vh) scale(1.08); }
  66% { transform:translate(-5vw,5vh) scale(.95); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-aurora b { animation: none; }
}

body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Canvas */
#sv-stage { position:fixed; inset:0; cursor:grab; touch-action:none; user-select:none; z-index:5; perspective:1400px; }
#sv-stage.grabbing { cursor:grabbing; }
#sv-plane { position:absolute; left:50%; top:50%; will-change:transform; }

@keyframes sv-reel-in {
  0%   { opacity:0; transform:translateY(-70px) scale(.93); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
.sv-tile {
  position:absolute; width:340px; height:191px; border-radius:24px; overflow:hidden;
  background:#111 center/cover no-repeat; cursor:pointer;
  box-shadow:var(--tile-shadow); border:1px solid rgba(255,255,255,.08);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
  transform-style:preserve-3d;
}
.sv-tile.reel-enter {
  animation: sv-reel-in .52s cubic-bezier(.16,.85,.2,1) both;
}
/* LQIP blur-up: blurred low-res placeholder fades to crisp full image */
.sv-tile--loading { filter:blur(8px) brightness(.75); transition:filter .45s ease; }
.sv-tile::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    linear-gradient(140deg,rgba(255,255,255,.10),transparent 35%),
    linear-gradient(180deg,transparent 50%,rgba(0,0,0,.65));
}
.sv-tile::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.18),transparent 40%);
  opacity:0; transition:opacity .3s;
}
.sv-tile:hover { box-shadow:var(--halo); z-index:10; }
.sv-tile:hover::after { opacity:1; }
.sv-tile:hover .t-meta, .sv-tile:hover .t-cta, .sv-tile:hover .t-rating, .sv-tile:hover .t-prov { opacity:1; transform:translateY(0); }

.t-prov {
  position:absolute; top:12px; left:12px; height:24px; padding:0 9px; border-radius:7px;
  background:rgba(0,0,0,.55); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:#fff; font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  display:flex; align-items:center; opacity:0; transform:translateY(-3px); transition:.25s;
}
.t-rating {
  position:absolute; top:12px; right:12px; display:flex; align-items:center; gap:5px;
  height:24px; padding:0 10px; border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:-.01em;
  box-shadow:0 4px 14px hsl(var(--brand-hue) 80% 50% / .5);
  opacity:0; transform:translateY(-3px); transition:.25s;
}
.t-rating svg { width:10px; height:10px; }
.t-meta {
  position:absolute; left:12px; bottom:12px; right:54px;
  opacity:0; transform:translateY(4px); transition:.25s;
}
.t-title { font-size:15px; font-weight:700; color:#fff; letter-spacing:-.018em; line-height:1.2; text-shadow:0 1px 12px rgba(0,0,0,.7); }
.t-stats { display:flex; gap:10px; margin-top:5px; color:rgba(255,255,255,.85); font-size:11px; font-weight:500; font-feature-settings:"tnum"; }
.t-stats span { display:flex; align-items:center; gap:4px; }
.t-stats span::before { content:""; width:4px; height:4px; border-radius:50%; background:var(--accent); }
.t-cta {
  position:absolute; bottom:12px; right:12px; width:36px; height:36px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 8px 22px hsl(var(--brand-hue) 80% 60% / .55);
  opacity:0; transform:translateY(4px); transition:.25s;
}
.t-cta svg { width:13px; height:13px; margin-left:1px; }

/* Top dock */
.sv-dock {
  position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:50;
  display:flex; align-items:center; gap:8px; padding:8px; border-radius:999px;
  background:var(--glass); backdrop-filter:blur(28px) saturate(1.6); -webkit-backdrop-filter:blur(28px) saturate(1.6);
  border:1px solid var(--line);
  box-shadow:0 12px 40px -12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  max-width:calc(100vw - 36px);
}
.sv-brand {
  display:flex; align-items:center; padding:0 12px; height:38px; border-radius:999px;
  background:var(--glass-hi); text-decoration:none;
}
.sv-brand-logo {
  height:26px; width:auto; display:block;
}
.sv-search { display:flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:999px; background:transparent; width:300px; }
.sv-search input { flex:1; border:0; background:transparent; color:var(--ink); font:inherit; font-size:13px; outline:0; }
.sv-search input::placeholder { color:var(--ink-faint); }
.sv-search-warming { animation: sv-search-warm 1s ease-in-out infinite; }
@keyframes sv-search-warm {
  0%,100% { opacity: 1; }
  50%      { opacity: .55; }
}
.sv-search svg { width:14px; height:14px; color:var(--ink-soft); }
.sv-kbd { font-size:10px; color:var(--ink-faint); padding:2px 6px; border:1px solid var(--line); border-radius:5px; }
.sv-sep { width:1px; align-self:stretch; background:var(--line); margin:6px 2px; }
.sv-pill {
  height:38px; padding:0 14px; border-radius:999px; display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:.2s;
  border:0; background:transparent; font-family:inherit; white-space:nowrap;
}
.sv-pill:hover { color:var(--ink); }
.sv-pill.active {
  background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff;
  box-shadow:0 6px 18px hsl(var(--brand-hue) 80% 60% / .4);
}
.sv-iconbtn {
  width:38px; height:38px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); cursor:pointer; transition:.2s; border:0; background:transparent;
}
.sv-iconbtn:hover { color:var(--accent); background:var(--glass-hi); }
.sv-iconbtn svg { width:15px; height:15px; }

/* Side */
/* ── Provider chip strip — horizontal scroll below dock ── */
.sv-prov-strip {
  position:fixed; top:82px; left:50%; transform:translateX(-50%); z-index:48;
  display:flex; gap:6px; padding:5px 24px;
  max-width:min(860px, calc(100vw - 32px));
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(to right,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);
}
.sv-prov-strip::-webkit-scrollbar { display:none; }
.sv-prov-chip {
  flex-shrink:0; height:30px; padding:0 14px; border-radius:999px;
  background:var(--glass); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--line); color:var(--ink-soft);
  font-size:11.5px; font-weight:600; font-family:inherit;
  cursor:pointer; white-space:nowrap; transition:.2s; letter-spacing:.02em;
}
.sv-prov-chip:hover { color:var(--accent); border-color:hsl(var(--brand-hue) 80% 60% / .35); }
.sv-prov-chip.active {
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; border-color:transparent;
  box-shadow:0 4px 14px hsl(var(--brand-hue) 80% 60% / .4);
}
/* Mobile: drop to bottom bar so it never fights the canvas */
@media (max-width:767px) {
  .sv-prov-strip {
    top:auto; bottom:24px; left:0; right:0; transform:none;
    max-width:100%; padding:5px 16px;
    mask-image:linear-gradient(to right,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
  }
}

/* HUD + stats */
.sv-stats {
  position:fixed; left:18px; bottom:18px; z-index:50; font-size:11px; color:var(--ink-faint); font-feature-settings:"tnum";
}
.sv-stats b { display:block; color:var(--ink); font-weight:700; letter-spacing:-.01em; font-size:13px; margin-bottom:2px; }

/* View Transition: game tile → modal launcher (shared element) */
::view-transition-group(game-hero) {
  animation-duration: .46s;
  animation-timing-function: cubic-bezier(.2,.82,.2,1);
}
::view-transition-old(game-hero),
::view-transition-new(game-hero) {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ══════════════════════════════════════════════════
   MODAL — Design B: Neon Terminal (dark + light)
══════════════════════════════════════════════════ */
.sv-modal-back {
  position:fixed; inset:0; z-index:100;
  background:rgba(6,4,16,.84);
  backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.sv-modal-back.show { opacity:1; pointer-events:auto; }

.sv-modal {
  position:fixed; inset:0; z-index:101;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:30px 24px;
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.sv-modal.show { opacity:1; pointer-events:auto; }

/* Card frame — sizing + entrance animation live here, no overflow clip   */
/* so the perimeter tracer ::after is never eaten by a clip boundary.     */
.sv-card-frame {
  position:relative;
  width:min(980px,100%); margin:0 auto;
  border-radius:22px;
  transform:scale(.97) translateY(10px);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.sv-modal.show .sv-card-frame { transform:scale(1) translateY(0); }



/* Card shell — keeps overflow:hidden to clip content to rounded corners  */
.sv-card {
  position:relative;
  width:100%; border-radius:22px; overflow:hidden;
  background:rgba(9,6,22,.97);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 0 0 1px hsl(var(--brand-hue) 90% 70% / .13),
    0 50px 130px -20px rgba(0,0,0,.9),
    0 0 100px -30px hsl(var(--brand-hue) 80% 60% / .22);
}
[data-theme="light"] .sv-card {
  background:#fff;
  border-color:hsl(var(--brand-hue) 60% 30% / .10);
  box-shadow:0 0 0 1px hsl(var(--brand-hue) 80% 55% / .10),
             0 30px 80px -15px hsl(var(--brand-hue) 60% 30% / .16);
}


/* ── ① Header ── */
.sv-mhead {
  position:relative; padding:26px 36px 22px;
  display:flex; flex-direction:column; gap:9px;
}
/* Left accent bar */
.sv-mhead::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--accent) 0%,var(--accent-2) 65%,transparent 100%);
  border-radius:0 2px 2px 0;
}

.sv-eyebrow {
  font-size:10px; font-weight:700; color:var(--accent);
  letter-spacing:.22em; text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.sv-eyebrow::before {
  content:''; display:inline-block; width:18px; height:1.5px;
  background:var(--accent); opacity:.7; border-radius:1px; flex:none;
}

.sv-title {
  font-size:30px; font-weight:900; letter-spacing:-.04em; line-height:1.08;
  color:var(--ink); margin:0;
}

/* Provider logos */
.sv-prov-logo {
  display:block; width:82%; max-width:130px; height:auto; max-height:56px;
  object-fit:contain; margin:10px auto 6px;
  transition:filter .3s;
}
/* Ensure the provider stat-val container centres its logo img both axes */
#sv-mv-prov {
  display:flex; align-items:center; justify-content:center;
  width:100%; margin-bottom:0;
  flex:1; /* grow to fill remaining card height so logo is vertically centred */
}
#sv-mv-prov .sv-prov-logo { margin:0; }
/* Purple glow on provider stat card hover */
.sv-stats-grid .sv-stat-card:nth-child(3) { transition:background .3s; }
.sv-stats-grid .sv-stat-card:nth-child(3):hover {
  background:radial-gradient(ellipse at center,rgba(109,40,217,.18) 0%,transparent 72%);
}
.sv-stats-grid .sv-stat-card:nth-child(3):hover .sv-prov-logo {
  filter:drop-shadow(0 0 10px rgba(168,85,247,.9)) drop-shadow(0 0 24px rgba(109,40,217,.6));
}
.sv-cta-wrap { padding:14px 28px 20px; }
.sv-real-cta {
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; height:52px; border-radius:14px; margin-top:0;
  background:linear-gradient(135deg,#6d28d9,#a855f7);
  color:#fff; font-size:14.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  text-decoration:none;
  box-shadow:0 10px 32px rgba(109,40,217,.55), 0 2px 8px rgba(0,0,0,.25);
  transition:transform .2s, box-shadow .2s;
}
.sv-real-cta:hover { transform:translateY(-2px); box-shadow:0 14px 48px rgba(109,40,217,.85), 0 4px 16px rgba(168,85,247,.35); }
.sv-real-cta:active { transform:translateY(0); }

.sv-rating-row { display:flex; align-items:center; gap:4px; }
.sv-star { display:flex; color:var(--ink-faint); }
.sv-star svg { width:13px; height:13px; }
.sv-star.on { color:var(--accent); }
.sv-rnum { font-size:12px; font-weight:700; color:var(--ink-soft); margin-left:5px; }

.sv-close {
  position:absolute; top:16px; right:16px;
  width:34px; height:34px; border-radius:50%;
  background:var(--glass); backdrop-filter:blur(10px);
  border:1px solid var(--line);
  color:var(--ink-soft); cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:5;
  transition:.2s;
}
.sv-close:hover { background:var(--accent); color:#fff; border-color:transparent; }

/* ── ② Gradient divider ── */
.sv-hdivider {
  height:1px;
  background:linear-gradient(90deg,
    hsl(var(--brand-hue) 92% 75% / .5) 0%,
    rgba(255,255,255,.06) 45%,
    transparent 100%);
}
[data-theme="light"] .sv-hdivider {
  background:linear-gradient(90deg,
    hsl(var(--brand-hue) 80% 55% / .55) 0%,
    hsl(var(--brand-hue) 60% 30% / .08) 45%,
    transparent 100%);
}

/* ── ③ Stats row — Power Meters ── */
.sv-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
@media(max-width:520px) {
  .sv-stats-grid { grid-template-columns:1fr 1fr; }
  /* Compact everything so launcher + CTA land above the fold on mobile */
  .sv-mhead { padding:14px 18px 10px; gap:6px; }
  .sv-title  { font-size:22px; }
  .sv-stat-card { padding:12px 10px 10px; }
  .sv-stat-val  { font-size:16px; margin-bottom:6px; }
  .sv-launcher-wrap { padding:6px 20px 10px; }
  .sv-cta-wrap { padding:8px 20px 14px; }
  .sv-real-cta { height:46px; font-size:13px; }
}

.sv-stat-card {
  padding:22px 14px 20px;
  border-right:1px solid rgba(255,255,255,.06);
  position:relative; overflow:hidden; transition:background .3s;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.sv-stat-card:last-child { border-right:none; }
[data-theme="light"] .sv-stat-card { border-right-color:hsl(var(--brand-hue) 60% 30% / .08); }
.sv-stat-card:hover { background:rgba(255,255,255,.025); }

.sv-stat-label {
  font-size:9.5px; font-weight:700; color:var(--ink-faint);
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:7px;
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.sv-stat-label svg { opacity:.45; flex-shrink:0; width:14px; height:14px; }
.sv-stat-val {
  font-size:19px; font-weight:800; letter-spacing:-.03em;
  line-height:1; margin-bottom:10px; transition:filter .3s;
}
.sv-stat-card:hover .sv-stat-val { filter:brightness(1.2); }

/* Per-card value colours */
.sv-stats-grid .sv-stat-card:nth-child(1) .sv-stat-val { color:#34d399; }
.sv-stats-grid .sv-stat-card:nth-child(2) .sv-stat-val { color:#fbbf24; }
.sv-stats-grid .sv-stat-card:nth-child(3) .sv-stat-val { color:#a5b4fc; font-size:15px; letter-spacing:-.01em; }
.sv-stats-grid .sv-stat-card:nth-child(4) .sv-stat-val { color:#fde047; }
[data-theme="light"] .sv-stats-grid .sv-stat-card:nth-child(1) .sv-stat-val { color:#059669; }
[data-theme="light"] .sv-stats-grid .sv-stat-card:nth-child(2) .sv-stat-val { color:#d97706; }
[data-theme="light"] .sv-stats-grid .sv-stat-card:nth-child(3) .sv-stat-val { color:#4f46e5; }
[data-theme="light"] .sv-stats-grid .sv-stat-card:nth-child(4) .sv-stat-val { color:#ca8a04; }
.sv-stats-grid .sv-stat-card:nth-child(5) .sv-stat-val { color:#f472b6; }
[data-theme="light"] .sv-stats-grid .sv-stat-card:nth-child(5) .sv-stat-val { color:#db2777; }

/* ── RTP radial dial ─────────────────────────────────────────── */
.sv-dial-wrap {
  position:relative; width:100px; height:54px;
  margin:4px auto 0; flex-shrink:0; overflow:visible;
}
.sv-dial-svg {
  width:100px; height:100px;
  position:absolute; top:-4px; left:0; overflow:visible;
}
.sv-dial-track {
  fill:none; stroke:rgba(255,255,255,.07);
  stroke-width:7; stroke-linecap:round;
}
.sv-dial-fill {
  fill:none; stroke:url(#sv-dial-grad);
  stroke-width:7; stroke-linecap:round;
  stroke-dasharray:125.66; stroke-dashoffset:125.66;
  filter:drop-shadow(0 0 6px rgba(52,211,153,.6));
  will-change:stroke-dashoffset;
}
[data-theme="light"] .sv-dial-fill { filter:drop-shadow(0 0 5px rgba(5,150,105,.5)); }
.sv-dial-needle {
  position:absolute; bottom:4px; left:50%;
  width:2px; height:42px;
  background:linear-gradient(to top, #34d399, transparent);
  transform-origin:bottom center;
  transform:translateX(-50%) rotate(-90deg);
  border-radius:1px;
  box-shadow:0 0 6px rgba(52,211,153,.8);
  will-change:transform;
}
.sv-dial-needle::after {
  content:''; position:absolute; bottom:-3px; left:50%;
  transform:translateX(-50%);
  width:7px; height:7px; border-radius:50%;
  background:#34d399;
  box-shadow:0 0 8px rgba(52,211,153,.9);
}
[data-theme="light"] .sv-dial-needle { background:linear-gradient(to top,#059669,transparent); box-shadow:0 0 6px rgba(5,150,105,.7); }
[data-theme="light"] .sv-dial-needle::after { background:#059669; }
.sv-dial-labels {
  position:absolute; bottom:-16px; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  font-size:7.5px; color:rgba(255,255,255,.22);
  letter-spacing:.08em; padding:0 2px;
}
.sv-dial-cur { color:rgba(52,211,153,.7); font-weight:700; }
[data-theme="light"] .sv-dial-cur { color:rgba(5,150,105,.8); }

/* ── Volatility orb container (matches liquid sphere footprint) ── */
.sv-vol-orb {
  width:76px; height:76px; border-radius:50%;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(251,191,36,.14);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; margin:0 auto 4px; flex-shrink:0;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.35);
  position:relative;
}
.sv-vol-orb-ring {
  position:absolute; inset:-3px; border-radius:50%;
  border:1.5px solid rgba(251,191,36,.18);
  animation:sv-vol-ring 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sv-vol-ring { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.9;transform:scale(1.06)} }
[data-theme="light"] .sv-vol-orb { border-color:rgba(180,100,0,.18); background:rgba(180,100,0,.04); }

/* Volatility bars — scaled to fit inside the orb */
.sv-vol-meter { display:flex; gap:3px; align-items:flex-end; height:24px; justify-content:center; }
.sv-vol-bar { width:6px; border-radius:2px 2px 0 0; background:rgba(255,255,255,.1); transform-origin:bottom; transition:background .3s,box-shadow .3s; }
.sv-vol-bar.on { background:linear-gradient(180deg,#fbbf24,#f59e0b); box-shadow:0 0 8px rgba(245,158,11,.5); }
.sv-vol-bar:nth-child(1){ height:6px; } .sv-vol-bar:nth-child(2){ height:10px; } .sv-vol-bar:nth-child(3){ height:15px; } .sv-vol-bar:nth-child(4){ height:19px; } .sv-vol-bar:nth-child(5){ height:24px; }
.sv-vol-label { font-size:8px; color:rgba(251,191,36,.75); font-weight:700; letter-spacing:.06em; text-transform:uppercase; min-height:10px; line-height:1; }
[data-theme="light"] .sv-vol-label { color:rgba(180,100,0,.8); }
@keyframes sv-vol-bounce { 0%,100%{ transform:scaleY(1); filter:brightness(1); } 50%{ transform:scaleY(1.35); filter:brightness(1.5); } }
.sv-stat-card:hover .sv-vol-bar.on { animation:sv-vol-bounce .55s ease-in-out infinite; }
.sv-stat-card:hover .sv-vol-bar.on:nth-child(1){ animation-delay:0s; }
.sv-stat-card:hover .sv-vol-bar.on:nth-child(2){ animation-delay:.1s; }
.sv-stat-card:hover .sv-vol-bar.on:nth-child(3){ animation-delay:.2s; }
.sv-stat-card:hover .sv-vol-bar.on:nth-child(4){ animation-delay:.3s; }
.sv-stat-card:hover .sv-vol-bar.on:nth-child(5){ animation-delay:.4s; }

/* ── Max Win burst ────────────────────────────────────────────── */
.sv-maxwin-burst {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  /* margin-top aligns orb with neighbours that have sv-stat-val (19px + 10px mb) above them */
  margin: 29px auto 4px;
  border-radius: 50%;
  background: rgba(244,114,182,.05);
  border: 1px solid rgba(244,114,182,.2);
  flex-shrink: 0;
}
/* Value inside the burst orb — shrink to fit */
.sv-maxwin-burst .sv-stat-val {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 14px;
  letter-spacing: -.02em;
  line-height: 1;
  text-align: center;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Outer pulsing ring — matches vol-orb-ring / rate-orb-ring prominence */
.sv-mw-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.sv-mw-ring-1 { inset: -3px; border: 1.5px solid rgba(244,114,182,.35); animation: sv-mw-ring-pulse 2.4s ease-in-out infinite; }
.sv-mw-ring-2 { inset: 5px;  border: 1px solid rgba(244,114,182,.1);   animation: sv-mw-ring-pulse 2.4s ease-in-out infinite .55s; }
@keyframes sv-mw-ring-pulse {
  0%,100% { opacity: .5; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.05); box-shadow: 0 0 14px rgba(244,114,182,.2); }
}

/* Particle container */
.sv-mw-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.sv-mw-p {
  position: absolute;
  top: 50%; left: 50%;
  width: 1.5px;
  border-radius: 1px;
  transform-origin: 0 0;
  opacity: 0;
  will-change: transform, opacity, height;
}
.sv-mw-p.sv-mw-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  transform-origin: center;
}

/* Value pop on burst */
@keyframes sv-mw-val-pop {
  0%   { transform: scale(1);    filter: none; }
  30%  { transform: scale(1.28); filter: brightness(1.6) drop-shadow(0 0 8px rgba(244,114,182,.9)); }
  65%  { transform: scale(1.06); filter: brightness(1.2); }
  100% { transform: scale(1);    filter: none; }
}
#sv-m-maxwin-card.sv-mw-firing .sv-stat-val,
.sv-maxwin-burst.sv-mw-firing .sv-stat-val,
.sv-maxwin-burst.sv-mw-firing + .sv-stat-val {
  animation: sv-mw-val-pop .65s cubic-bezier(.36,1.4,.64,1) forwards;
}

/* Line particle keyframes */
@keyframes sv-mw-line-out {
  0%   { height: 0;               opacity: 0;   transform: rotate(var(--a)) translateY(0); }
  18%  { opacity: .9; }
  55%  { height: var(--len, 12px); opacity: .85; transform: rotate(var(--a)) translateY(calc(var(--d, 28px) * -.5)); }
  100% { height: 2px;             opacity: 0;   transform: rotate(var(--a)) translateY(calc(var(--d, 28px) * -1)); }
}
/* Dot particle keyframes */
@keyframes sv-mw-dot-out {
  0%   { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) translateY(0) scale(1); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--a)) translateY(calc(var(--d, 28px) * -1)) scale(.25); }
}

/* Provider chip */

/* Rating stars */
/* Rating orb — 76px circle matching RTP liquid sphere + vol orb footprint */
/* Score is shown inside the ring — hide the redundant text value */
#sv-mv-rate { display:none !important; }

/* ── Rating score ring ─────────────────────────────────────── */
.sv-rate-ring-wrap {
  position:relative; width:90px; height:90px;
  margin:22px auto 4px; flex-shrink:0;
}
.sv-rate-ring-svg { width:90px; height:90px; overflow:visible; display:block; }
.sv-ring-track {
  fill:none; stroke:rgba(255,255,255,.055); stroke-width:7;
}
.sv-ring-tick {
  fill:none; stroke:rgba(255,255,255,.1); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:1 237.76; transition:stroke .4s;
}
.sv-ring-tick.sv-rt-lit { stroke:rgba(251,191,36,.75); }
.sv-ring-fill {
  fill:none; stroke:url(#sv-ring-grad); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:238.76; stroke-dashoffset:238.76;
  filter:drop-shadow(0 0 6px rgba(251,191,36,.5));
  will-change:stroke-dashoffset;
}
.sv-ring-comet {
  fill:none; stroke:#fef3c7; stroke-width:3; stroke-linecap:round;
  stroke-dasharray:4 234.76; stroke-dashoffset:238.76;
  filter:drop-shadow(0 0 9px rgba(254,243,199,1));
  will-change:stroke-dashoffset;
}
.sv-ring-score {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; pointer-events:none;
}
.sv-ring-number {
  font-size:20px; font-weight:900; letter-spacing:-.05em;
  color:#fbbf24; line-height:1;
  opacity:0; transition:opacity .4s;
}
.sv-ring-number.sv-rn-show { opacity:1; }
.sv-ring-denom {
  font-size:8px; font-weight:700; color:rgba(251,191,36,.4);
  letter-spacing:.04em;
  opacity:0; transition:opacity .4s .12s;
}
.sv-ring-denom.sv-rn-show { opacity:1; }
/* Stars below the ring */
.sv-ring-stars {
  display:flex; gap:4px; justify-content:center; margin-bottom:4px;
}
.sv-ring-stars .sv-rs-r {
  transform:scale(0); opacity:0; will-change:transform,opacity;
}
.sv-ring-stars .sv-rs-r svg { width:12px; height:12px; display:block; }
.sv-ring-stars .sv-rs-r.filled svg { fill:#fbbf24; filter:drop-shadow(0 0 4px rgba(251,191,36,.8)); }
.sv-ring-stars .sv-rs-r.empty  svg { fill:rgba(255,255,255,.1); }
@keyframes sv-rstar-pop { 0%{transform:scale(0);opacity:0} 55%{transform:scale(1.5);opacity:1} 80%{transform:scale(.9);opacity:1} 100%{transform:scale(1);opacity:1} }
.sv-rate-sub { font-size:9px; color:rgba(251,191,36,.6); font-weight:700; letter-spacing:.05em; text-transform:uppercase; min-height:11px; }
[data-theme="light"] .sv-rate-sub { color:rgba(161,110,0,.75); }

/* ── Star ratings — standalone game page (.sv-rs / .sv-rate-stars) ── */
.sv-rate-stars { display:flex; align-items:center; gap:2px; }
.sv-rs { display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.sv-rs svg { width:13px; height:13px; fill:rgba(255,255,255,.15); display:block; }
.sv-rs.on svg { fill:#fbbf24; filter:drop-shadow(0 0 4px rgba(251,191,36,.65)); }
[data-theme="light"] .sv-rs svg { fill:rgba(0,0,0,.12); }
[data-theme="light"] .sv-rs.on svg { fill:#ca8a04; }

/* ── Demo poster — hero img inside launcher, iframe covers it at z-index:3 ── */
.svgp-demo-poster {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1; display:block;
  border:0; pointer-events:none;
}

/* ── ④ Launcher ── */
.sv-launcher-wrap { padding:26px 100px 14px; }
.sv-launcher {
  position:relative; width:100%; aspect-ratio:16/9;
  background:#080614 center/cover no-repeat;
  border-radius:14px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  border:1px solid hsl(var(--brand-hue) 92% 75% / .22);
  box-shadow:0 0 50px hsl(var(--brand-hue) 80% 60% / .10),
             inset 0 0 80px rgba(0,0,0,.45);
}
.sv-launcher::before {
  content:''; position:absolute; inset:0;
  background:rgba(5,3,16,.65); pointer-events:none; z-index:0;
}
.sv-launcher iframe {
  position:absolute; inset:0; width:100%; height:100%;
  border:0; z-index:3; background:#000;
}

/* Play button */
.sv-play {
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:11px;
  padding:14px 26px; border:0; border-radius:9px; cursor:pointer;
  font:700 13.5px/1 inherit; letter-spacing:.06em; color:#fff;
  text-transform:uppercase; font-family:inherit;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 0 1px hsl(var(--brand-hue) 92% 75% / .4),
             0 14px 40px -6px hsl(var(--brand-hue) 80% 60% / .7);
}
.sv-play::before {
  content:''; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  filter:blur(14px); opacity:.45; z-index:-1;
  animation:sv-halo 2.5s ease-in-out infinite;
}
@keyframes sv-halo { 0%,100%{ opacity:.3; } 50%{ opacity:.7; } }
.sv-play svg { width:12px; height:12px; fill:currentColor; }

/* ── Rotate-to-landscape overlay (portrait mobile only) ── */
.sv-rotate-overlay {
  display:none; /* hidden by default; shown via media query below */
  position:absolute; inset:0; z-index:4;
  flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:rgba(5,3,20,.72); backdrop-filter:blur(6px);
  pointer-events:none;
}
.sv-rotate-icon {
  width:56px; height:56px; color:var(--accent);
  animation:sv-rotate-pulse 2.4s ease-in-out infinite;
}
.sv-rotate-icon svg { width:100%; height:100%; }
@keyframes sv-rotate-pulse {
  0%,100% { transform:rotate(0deg);   opacity:.85; }
  45%      { transform:rotate(-20deg); opacity:1;   }
  55%      { transform:rotate(-20deg); opacity:1;   }
  95%      { transform:rotate(0deg);   opacity:.85; }
}
.sv-rotate-label {
  font-size:14px; font-weight:700; color:#fff; letter-spacing:.04em; text-transform:uppercase;
}
.sv-rotate-sub {
  font-size:11px; color:var(--ink-soft); letter-spacing:.03em;
}

/* Portrait phones: show rotate prompt, hide play button.
   hover:none + pointer:coarse = real touch device; prevents triggering on
   a narrow desktop browser window (e.g. DevTools open). */
@media (max-width:767px) and (orientation:portrait) and (hover:none) and (pointer:coarse) {
  .sv-rotate-overlay { display:flex; }
  .sv-play { display:none; }
  /* Full-width, tall launcher so the rotate prompt has real presence */
  .sv-launcher-wrap { padding:0; }
  .sv-launcher { aspect-ratio:3/4; border-radius:0; }
  /* Bigger icon + text so the instruction is impossible to miss */
  .sv-rotate-icon { width:96px; height:96px; }
  .sv-rotate-label { font-size:20px; }
  .sv-rotate-sub { font-size:14px; }
}

/* Brief red flash when user clicks a launcher with no demo available */
@keyframes sv-nodemo-flash {
  0%,100% { box-shadow:inset 0 0 0 2px transparent; }
  40%      { box-shadow:inset 0 0 0 2px rgba(248,113,113,.6); }
}
.sv-launcher--flash { animation:sv-nodemo-flash .6s ease forwards; }

/* Landscape phones: full-bleed launcher — maximise the demo space */
@media (max-width:900px) and (orientation:landscape) {
  .sv-launcher-wrap { padding:10px 16px 10px; }
  .sv-launcher { aspect-ratio:16/9; }
  .sv-rotate-overlay { display:none !important; }
}

/* ── ⑤ Review ── */
.sv-mreview {
  padding:18px 36px 32px;
  border-top:1px solid rgba(255,255,255,.055);
  display:flex; flex-direction:column; gap:14px;
}
[data-theme="light"] .sv-mreview { border-top-color:hsl(var(--brand-hue) 60% 30% / .08); }

/* Excerpt blockquote */
.sv-desc {
  font-size:13.5px; line-height:1.65; color:var(--ink-soft); margin:0;
  padding:13px 16px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  border-left:2.5px solid var(--accent);
  border-radius:0 9px 9px 0;
}
[data-theme="light"] .sv-desc {
  background:hsl(var(--brand-hue) 60% 50% / .05);
  border-color:hsl(var(--brand-hue) 60% 30% / .09);
  border-left-color:var(--accent);
}

/* Review lazy-load state */
.sv-review-loading {
  font-size:12.5px; color:var(--ink-faint); text-align:center;
  padding:18px 0; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  animation:sv-pulse 1.6s ease-in-out infinite;
}

/* Full review body */
.sv-review-body { font-size:13.5px; line-height:1.75; color:var(--ink-soft); }
.sv-review-body:empty { display:none; }
.sv-review-body h2 {
  font-size:10.5px; font-weight:700; color:var(--accent);
  letter-spacing:.18em; text-transform:uppercase;
  margin:18px 0 7px;
  display:flex; align-items:center; gap:7px;
}
.sv-review-body h2::before {
  content:'//'; color:hsl(var(--brand-hue) 92% 75% / .45);
  font-size:12px; letter-spacing:0; font-weight:400;
}
[data-theme="light"] .sv-review-body h2::before { color:hsl(var(--brand-hue) 80% 55% / .4); }
.sv-review-body p { margin:0 0 10px; }
.sv-review-body strong { color:var(--ink); font-weight:600; }
.sv-review-body ul, .sv-review-body ol { margin:0 0 10px; padding-left:18px; }
.sv-review-body li { margin-bottom:4px; }

/* Pros / Cons classified lists */
.sv-pros-list, .sv-cons-list {
  list-style:none; padding:0; margin:0 0 12px;
  display:flex; flex-direction:column; gap:7px;
}
.sv-pros-list li {
  position:relative; padding-left:26px;
  color:#86efac; font-size:13.5px; line-height:1.55;
}
.sv-pros-list li::before {
  content:'✓'; position:absolute; left:0; top:0;
  font-size:12px; font-weight:900; line-height:1.6;
  color:#4ade80;
  text-shadow:0 0 10px rgba(74,222,128,.75), 0 0 22px rgba(74,222,128,.35);
}
.sv-cons-list li {
  position:relative; padding-left:26px;
  color:#fca5a5; font-size:13.5px; line-height:1.55;
}
.sv-cons-list li::before {
  content:'✕'; position:absolute; left:0; top:0;
  font-size:11px; font-weight:900; line-height:1.75;
  color:#f87171;
  text-shadow:0 0 10px rgba(248,113,113,.75), 0 0 22px rgba(248,113,113,.35);
}
[data-theme="light"] .sv-pros-list li { color:#166534; }
[data-theme="light"] .sv-pros-list li::before { color:#16a34a; text-shadow:0 0 8px rgba(22,163,74,.4); }
[data-theme="light"] .sv-cons-list li { color:#991b1b; }
[data-theme="light"] .sv-cons-list li::before { color:#dc2626; text-shadow:0 0 8px rgba(220,38,38,.4); }

/* Tags */
.sv-tags {
  display:flex; gap:6px; flex-wrap:wrap;
  padding-top:10px; border-top:1px solid rgba(255,255,255,.055);
}
[data-theme="light"] .sv-tags { border-top-color:hsl(var(--brand-hue) 60% 30% / .08); }
.sv-tag {
  font-size:10px; padding:5px 10px; border-radius:5px;
  background:var(--glass); border:1px solid var(--line);
  color:var(--ink-faint); font-weight:600; letter-spacing:.07em; text-transform:uppercase;
}

/* ── Legal nav pill ── */
.sv-pill--legal { opacity:.72; }
.sv-pill--legal.active,
.sv-pill--legal:hover { opacity:1; }

/* ── Legal tiles ── */
.sv-tile--legal {
  background: #13111e !important;
  background-image: none !important;
  border: 1px solid rgba(139,92,246,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sv-tile--legal:hover {
  border-color: rgba(168,85,247,.6);
  box-shadow: var(--halo);
}
.sv-tl-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 20px 20px;
  pointer-events: none;
}
.sv-tl-logo {
  width: 72px;
  height: auto;
  opacity: .85;
  filter: drop-shadow(0 0 12px rgba(168,85,247,.4));
}
.sv-tl-label {
  font-size: 13px;
  font-weight: 700;
  color: #a855f7;
  text-align: center;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Legal modal mode — hide gameplay UI ── */
.sv-modal--legal .sv-hdivider,
.sv-modal--legal .sv-stats-grid,
.sv-modal--legal .sv-launcher-wrap,
.sv-modal--legal .sv-cta-wrap,
.sv-modal--legal .sv-eyebrow,
.sv-modal--legal .sv-rating-row,
.sv-modal--legal .sv-desc,
.sv-modal--legal .sv-tags { display: none !important; }

.sv-modal--legal .sv-mhead { padding-bottom: 10px; }
.sv-modal--legal .sv-title { font-size: 28px; letter-spacing: -.02em; }
.sv-modal--legal .sv-mreview { padding-top: 8px; }

/* ── Desktop nav wrapper — transparent so children flow into dock ── */
.sv-nav { display:contents; }
.sv-burger { display:none; }

/* ── Hamburger button ── */
.sv-burger {
  width:38px; height:38px; border-radius:999px; flex-shrink:0;
  background:var(--glass-hi); border:1px solid var(--line);
  color:var(--ink-soft); cursor:pointer;
  align-items:center; justify-content:center;
  flex-direction:column; gap:4.5px; padding:0; transition:.2s;
}
.sv-burger span {
  display:block; width:16px; height:1.5px;
  background:currentColor; border-radius:2px;
  transition:transform .25s, opacity .25s;
  pointer-events:none;
}
.sv-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.sv-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.sv-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ── Mobile nav drawer ── */
@media (max-width:767px) {
  .sv-burger { display:flex; }

  /* Dock: pill with just logo + burger */
  .sv-dock { gap:10px; }

  /* Nav drawer — hidden by default, solid panel below dock */
  .sv-nav {
    display:none;
    position:fixed; top:82px; left:16px; right:16px; z-index:49;
    flex-direction:column; gap:4px; padding:10px;
    background:var(--nav-drawer-bg); backdrop-filter:blur(28px) saturate(1.6); -webkit-backdrop-filter:blur(28px) saturate(1.6);
    border:1px solid var(--line); border-radius:20px;
    box-shadow:0 16px 48px -12px rgba(0,0,0,.7);
  }
  .sv-nav.open { display:flex; }
  .sv-nav .sv-sep { display:none; }
  .sv-nav .sv-pill { border-radius:12px; justify-content:flex-start; width:100%; height:44px; font-size:14px; }
  .sv-nav .sv-search { width:100%; background:var(--glass-hi); border-radius:12px; }
  .sv-nav .sv-iconbtn { display:none; } /* theme toggle already accessible elsewhere */
}


/* ── Mobile tile scale — 50% smaller for "scrolling universe" feel ── */
/* Tablet landscape / small laptop — 4 tiles per row */
@media (max-width:1099px) and (min-width:768px) {
  .sv-tile { width:248px; height:140px; border-radius:18px; }
}
/* Large phone / portrait tablet — ~3 tiles per row */
@media (max-width:767px) and (min-width:480px) {
  .sv-tile { width:156px; height:88px; border-radius:13px;
    transform-style: flat; -webkit-transform-style: flat;
  }
}
/* Small phone — ~2.6 tiles per row */
@media (max-width:479px) {
  .sv-tile { width:132px; height:74px; border-radius:11px;
    transform-style: flat; -webkit-transform-style: flat;
  }
}
@media (max-width:767px) {
  .sv-tile {
    /* Disable 3D compositing — tilt effect never fires on touch.
       Keeping preserve-3d creates expensive GPU layers for every tile. */
    transform-style: flat;
    -webkit-transform-style: flat;
  }
  /* Force a single GPU compositing layer for the whole stage */
  #sv-stage { -webkit-transform: translateZ(0); transform: translateZ(0); }
  /* No hover on touch — hide all tile overlays permanently on mobile */
  .t-prov, .t-rating, .t-meta, .t-cta { display:none !important; }

  /* Modal review: tighter padding + smaller body text to avoid wall-of-text */
  .sv-mreview { padding:14px 20px 24px; }
  .sv-review-body { font-size:12px; line-height:1.7; }
  .sv-desc { font-size:12px; }
}

/* ── Legacy grid (used on single-slot_game.php) ── */
.sv-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sv-cell { padding:14px; border-radius:14px; background:var(--glass); border:1px solid var(--line); }
.sv-cell-k { font-size:10px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
.sv-cell-v {
  font-size:18px; font-weight:700; margin-top:4px; letter-spacing:-.02em;
  background:linear-gradient(135deg,var(--ink),var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ══════════════════════════════════════════════════════════════
   MEMORY GAME EASTER EGG
══════════════════════════════════════════════════════════════ */

/* ── Logo flip trigger ───────────────────────────────────────── */
#sv-logo-wrap {
  position:relative;
  perspective:600px;
  flex-shrink:0;
}
#sv-logo-flip {
  position:relative;
  display:flex;
  align-items:center;
  transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.4,0,.2,1);
}
#sv-logo-flip.sv-mem-flipped { transform:rotateX(180deg); }

/* Both faces hidden when rotated away */
.sv-brand,
#sv-egg-scene {
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Back face: egg scene */
#sv-egg-scene {
  position:absolute;
  inset:0;
  transform:rotateX(180deg);
  border-radius:999px;
  background:var(--glass-hi);
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  cursor:pointer;
  overflow:hidden;
}
#sv-egg-scene:hover .sv-egg-svg {
  filter:drop-shadow(0 0 8px hsl(var(--brand-hue) 92% 75% / .75));
}
.sv-egg-svg {
  width:18px; height:22px;
  flex-shrink:0;
  margin-bottom:1px;
  position:relative; z-index:1;
  filter:drop-shadow(0 0 4px hsl(var(--brand-hue) 92% 75% / .45));
  transition:filter .2s;
}
.sv-egg-grass {
  width:100%; height:10px; flex-shrink:0;
  background:#15803d;
  position:relative;
}
.sv-egg-grass::before {
  content:'';
  position:absolute; top:-4px; left:0; right:0; height:7px;
  background:
    radial-gradient(ellipse 3px 6px at 10% 100%,#16a34a 95%,transparent),
    radial-gradient(ellipse 3px 5px at 26% 100%,#15803d 95%,transparent),
    radial-gradient(ellipse 3px 6px at 42% 100%,#16a34a 95%,transparent),
    radial-gradient(ellipse 3px 5px at 58% 100%,#15803d 95%,transparent),
    radial-gradient(ellipse 3px 6px at 74% 100%,#16a34a 95%,transparent),
    radial-gradient(ellipse 3px 5px at 90% 100%,#15803d 95%,transparent);
}

/* Progress fill bar */
#sv-logo-progress {
  position:absolute;
  bottom:-1px; left:12px;
  height:2px; width:0;
  background:linear-gradient(to right,var(--accent),var(--accent-2));
  border-radius:1px;
  pointer-events:none;
  transition:none;
}
#sv-logo-progress.sv-filling {
  width:calc(100% - 24px);
  transition:width 2s linear;
}

/* Blur everything except overlay when game is active */
#sv-stage.sv-mem-blur   { filter:blur(6px) brightness(.32) saturate(.4);  transition:filter .7s ease; pointer-events:none; }
.sv-dock.sv-mem-blur     { filter:blur(4px) brightness(.32);               transition:filter .7s ease; pointer-events:none; }
.sv-aurora.sv-mem-blur   { filter:blur(60px) saturate(1.2) brightness(.35);transition:filter .7s ease; pointer-events:none; }

/* ── Countdown ───────────────────────────────────────────────── */
#sv-mem-cd {
  position:fixed; inset:0; z-index:210;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0; transition:opacity .25s;
}
#sv-mem-cd.sv-cd-on { opacity:1; }
#sv-mem-cd-num {
  font-size:clamp(120px,24vw,200px);
  font-weight:900; line-height:1; letter-spacing:-4px; user-select:none;
  color:hsl(var(--brand-hue) 92% 75% / .18);
  animation:sv-cd-pop .85s ease-in-out;
}
@keyframes sv-cd-pop {
  0%   { transform:scale(.4); opacity:0; }
  40%  { transform:scale(1.07); opacity:1; }
  70%  { transform:scale(.98); }
  100% { transform:scale(1); }
}

/* ── Game overlay ────────────────────────────────────────────── */
#sv-mem-overlay {
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  pointer-events:none; opacity:0; transition:opacity .4s;
}
#sv-mem-overlay.sv-mem-on { opacity:1; pointer-events:all; }

/* ── Secret tagline ──────────────────────────────────────────── */
#sv-mem-tagline {
  margin:0; padding:0;
  font-size:11px; letter-spacing:2.5px; text-transform:uppercase; font-weight:600;
  color:hsl(var(--brand-hue) 80% 68%);
  text-shadow:0 0 18px hsl(var(--brand-hue) 80% 60% / .55);
  opacity:.82;
}

/* ── Exit button — floating purple X, top-left ───────────────── */
#sv-mem-exit {
  position:absolute; top:18px; left:18px;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:hsl(var(--brand-hue) 70% 20% / .7);
  border:1px solid hsl(var(--brand-hue) 70% 60% / .35);
  color:hsl(var(--brand-hue) 80% 72%);
  cursor:pointer; font-family:inherit;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:background .2s, box-shadow .2s, transform .15s;
  z-index:201;
}
#sv-mem-exit:hover {
  background:hsl(var(--brand-hue) 70% 28% / .9);
  box-shadow:0 0 18px hsl(var(--brand-hue) 80% 60% / .45);
  transform:scale(1.08);
}
#sv-mem-exit:active { transform:scale(.95); }

/* ── HUD bar ─────────────────────────────────────────────────── */
#sv-mem-hud {
  display:flex; align-items:center; gap:24px;
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--line);
  border-radius:999px; padding:8px 26px;
  box-shadow:0 8px 32px rgba(0,0,0,.45);
}
.sv-mem-hud-item { display:flex; flex-direction:column; align-items:center; gap:1px; }
.sv-mem-hud-label { font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-faint); }
.sv-mem-hud-val   { font-size:20px; font-weight:800; color:var(--accent); line-height:1; font-variant-numeric:tabular-nums; }
.sv-mem-hud-sep   { width:1px; height:32px; background:var(--line); }

/* ── Card grid ───────────────────────────────────────────────── */
#sv-mem-grid {
  display:grid;
  grid-template-columns:repeat(4,240px);
  grid-template-rows:repeat(4,135px);
  gap:12px;
}

/* ── Individual card — 16:9 ──────────────────────────────────── */
.sv-mem-card {
  width:240px; height:135px;
  cursor:pointer; perspective:800px; border-radius:10px;
}
.sv-mem-inner {
  width:100%; height:100%; position:relative;
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  border-radius:10px;
}
.sv-mem-card.sv-m-flipped .sv-mem-inner,
.sv-mem-card.sv-m-matched .sv-mem-inner { transform:rotateY(180deg); }

.sv-mem-down, .sv-mem-up {
  position:absolute; inset:0; border-radius:10px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}

/* ── Face-down: site logo ────────────────────────────────────── */
.sv-mem-down {
  display:flex; align-items:center; justify-content:center;
  background-image:
    linear-gradient(hsl(var(--brand-hue) 92% 75% / .042) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--brand-hue) 92% 75% / .042) 1px, transparent 1px),
    linear-gradient(145deg, hsl(var(--brand-hue) 55% 7%), hsl(var(--brand-hue) 55% 4%));
  background-size:18px 18px, 18px 18px, 100% 100%;
  border:1px solid hsl(var(--brand-hue) 60% 35% / .38);
  box-shadow:0 2px 12px rgba(0,0,0,.55);
  transition:border-color .15s, box-shadow .15s;
}
.sv-mem-card:not(.sv-m-flipped):not(.sv-m-matched):hover .sv-mem-down {
  border-color:hsl(var(--brand-hue) 80% 60% / .55);
  box-shadow:0 0 14px hsl(var(--brand-hue) 80% 60% / .18);
}
/* SV corner pips */
.sv-mem-down::before, .sv-mem-down::after {
  content:'SV';
  position:absolute; font-size:7px; font-weight:800; letter-spacing:1px;
  color:hsl(var(--brand-hue) 60% 60% / .2);
}
.sv-mem-down::before { top:5px; left:7px; }
.sv-mem-down::after  { bottom:5px; right:7px; transform:rotate(180deg); }

.sv-mem-logo-bg {
  width:80px; height:45px;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  opacity:.6; filter:saturate(1.8) brightness(1.8);
  pointer-events:none; user-select:none;
}

/* ── Light mode — memory card backs ─────────────────────────── */
[data-theme="light"] .sv-mem-down {
  background-image:
    linear-gradient(hsl(var(--brand-hue) 70% 35% / .09) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--brand-hue) 70% 35% / .09) 1px, transparent 1px),
    linear-gradient(145deg, hsl(var(--brand-hue) 55% 90%), hsl(var(--brand-hue) 45% 84%));
  border-color: hsl(var(--brand-hue) 60% 52% / .3);
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
[data-theme="light"] .sv-mem-card:not(.sv-m-flipped):not(.sv-m-matched):hover .sv-mem-down {
  border-color: hsl(var(--brand-hue) 75% 52% / .55);
  box-shadow: 0 0 14px hsl(var(--brand-hue) 75% 55% / .2);
}
[data-theme="light"] .sv-mem-down::before,
[data-theme="light"] .sv-mem-down::after {
  color: hsl(var(--brand-hue) 65% 45% / .28);
}
/* Logo on light bg: invert + re-tint to dark purple so it reads */
[data-theme="light"] .sv-mem-logo-bg {
  filter: invert(1) sepia(1) saturate(4) hue-rotate(218deg) brightness(.58);
  opacity: .72;
}

/* ── Face-up: game tile image ────────────────────────────────── */
.sv-mem-up {
  transform:rotateY(180deg);
  background-size:cover; background-position:center;
  background-color:#0d0d16;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 2px 12px rgba(0,0,0,.55);
}

/* ── Match ───────────────────────────────────────────────────── */
.sv-mem-card.sv-m-matched .sv-mem-inner { animation:sv-match-pop .36s ease forwards; }
.sv-mem-card.sv-m-matched .sv-mem-up {
  border-color:rgba(251,191,36,.52);
  box-shadow:0 0 16px rgba(251,191,36,.3), 0 0 32px rgba(251,191,36,.1), inset 0 0 0 1px rgba(251,191,36,.15);
}
.sv-mem-card.sv-m-matched .sv-mem-up::after {
  content:'✓'; position:absolute; top:5px; right:7px;
  font-size:10px; color:#fbbf24;
  text-shadow:0 0 6px rgba(251,191,36,.7);
}
@keyframes sv-match-pop {
  0%   { transform:rotateY(180deg) scale(1); }
  45%  { transform:rotateY(180deg) scale(1.06); }
  100% { transform:rotateY(180deg) scale(1); }
}

/* ── Wrong shake (fires after flip lands) ────────────────────── */
.sv-mem-card.sv-m-wrong .sv-mem-inner { animation:sv-wrong-shake .42s ease; }
@keyframes sv-wrong-shake {
  0%   { transform:rotateY(180deg); }
  18%  { transform:rotateY(180deg) translateX(-6px); }
  36%  { transform:rotateY(180deg) translateX(6px); }
  54%  { transform:rotateY(180deg) translateX(-4px); }
  72%  { transform:rotateY(180deg) translateX(4px); }
  100% { transform:rotateY(180deg); }
}

/* ── Win screen ──────────────────────────────────────────────── */
@keyframes sv-win-in      { from { opacity:0; transform:scale(.7) translateY(40px); } to { opacity:1; transform:none; } }
@keyframes sv-trophy-spin { 0%{transform:scale(1) rotate(-8deg)} 25%{transform:scale(1.18) rotate(8deg)} 50%{transform:scale(1.1) rotate(-5deg)} 75%{transform:scale(1.22) rotate(6deg)} 100%{transform:scale(1) rotate(-8deg)} }
@keyframes sv-title-pop   { 0%,100%{text-shadow:0 0 40px #fbbf2488,0 0 90px #f59e0b55} 50%{text-shadow:0 0 80px #fbbf24cc,0 0 160px #f59e0baa,0 0 240px #fbbf2455} }
@keyframes sv-win-pulse   { 0%,100%{box-shadow:inset 0 0 120px hsl(var(--brand-hue) 80% 30% / .18)} 50%{box-shadow:inset 0 0 220px hsl(var(--brand-hue) 80% 50% / .32)} }
@keyframes sv-pb-glow     { 0%,100%{opacity:.7} 50%{opacity:1; text-shadow:0 0 12px hsl(var(--brand-hue) 80% 70% / .7)} }

#sv-mem-win {
  position:fixed; inset:0; z-index:220;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px;
  background:radial-gradient(ellipse at 50% 40%, hsl(var(--brand-hue) 60% 12% / .97) 0%, rgba(4,2,12,.97) 70%);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  pointer-events:none; opacity:0; transition:opacity .45s;
}
#sv-mem-win.sv-mem-win-on {
  opacity:1; pointer-events:all;
  animation:sv-win-pulse 2.8s ease-in-out infinite;
}

#sv-mem-win-emoji {
  font-size:clamp(56px,10vw,88px); line-height:1;
  animation:sv-trophy-spin 1.6s ease-in-out infinite;
  filter:drop-shadow(0 0 24px #fbbf2499);
}
#sv-mem-win-title {
  font-size:clamp(48px,9vw,82px); font-weight:900;
  letter-spacing:-1px; line-height:1; color:#fbbf24;
  animation:sv-title-pop 1.8s ease-in-out infinite;
}
#sv-mem-win-sub {
  font-size:13px; letter-spacing:3px; text-transform:uppercase;
  color:hsl(var(--brand-hue) 70% 72%);
  text-shadow:0 0 20px hsl(var(--brand-hue) 80% 60% / .5);
  margin-bottom:4px;
}
#sv-mem-win-stats {
  display:flex; gap:48px;
  background:hsl(var(--brand-hue) 60% 20% / .2);
  border:1px solid hsl(var(--brand-hue) 60% 60% / .28);
  border-radius:20px; padding:20px 52px;
  box-shadow:0 0 40px hsl(var(--brand-hue) 80% 50% / .15);
}
.sv-mem-win-stat { display:flex; flex-direction:column; align-items:center; gap:4px; }
.sv-mem-win-stat span:first-child { font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-faint); }
.sv-mem-win-stat span:last-child  { font-size:36px; font-weight:900; color:var(--accent); line-height:1; }
#sv-mem-pb {
  font-size:12px; letter-spacing:.5px; min-height:18px;
  color:hsl(var(--brand-hue) 75% 68%);
  animation:sv-pb-glow 2s ease-in-out infinite;
}
/* ── Win screen button row ───────────────────────────────────── */
#sv-mem-win-btns {
  display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center;
  margin-top:4px;
}
#sv-mem-play-again {
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; border:0; padding:14px 40px; border-radius:999px;
  font-size:14px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  cursor:pointer; font-family:inherit;
  box-shadow:0 6px 32px hsl(var(--brand-hue) 80% 60% / .55), 0 0 0 0 hsl(var(--brand-hue) 80% 60% / .4);
  transition:all .2s;
  animation:sv-btn-ping 2s ease-in-out infinite;
}
@keyframes sv-btn-ping {
  0%,100% { box-shadow:0 6px 32px hsl(var(--brand-hue) 80% 60% / .55), 0 0 0 0 hsl(var(--brand-hue) 80% 60% / .35); }
  60%     { box-shadow:0 6px 32px hsl(var(--brand-hue) 80% 60% / .55), 0 0 0 14px hsl(var(--brand-hue) 80% 60% / 0); }
}
#sv-mem-play-again:hover { transform:translateY(-2px) scale(1.04); box-shadow:0 10px 40px hsl(var(--brand-hue) 80% 60% / .7); }
#sv-mem-go-home {
  background:transparent;
  color:hsl(var(--brand-hue) 70% 70%);
  border:1px solid hsl(var(--brand-hue) 60% 50% / .45);
  padding:13px 30px; border-radius:999px;
  font-size:13px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  cursor:pointer; font-family:inherit;
  transition:all .2s;
}
#sv-mem-go-home:hover {
  border-color:hsl(var(--brand-hue) 70% 65% / .75);
  background:hsl(var(--brand-hue) 70% 20% / .25);
  transform:translateY(-1px);
}

/* ── Confetti canvas ─────────────────────────────────────────── */
#sv-mem-confetti { position:fixed; inset:0; z-index:215; pointer-events:none; }

/* ═══════════════════════════════════════════════════════════════
   PROVIDER GALAXY MODE
   z-index layer: 51-56 (above dock:50, below memory game:200+)
═══════════════════════════════════════════════════════════════ */

/* Star canvas — full-screen, above blurred dock in galaxy mode */
#sv-gal-star {
  position:fixed; inset:0; z-index:51; pointer-events:none;
  opacity:0; transition:opacity .85s ease;
}
#sv-gal-star.sv-gal-on { opacity:1; }

/* World container — all orbital tile <img> live here */
/* left:50% top:50% sets world origin at viewport centre   */
/* transform-origin:0 0 so scale(zoom) expands from centre */
#sv-gal-world {
  position:fixed; left:50%; top:50%;
  transform-origin:0 0;
  z-index:52;
  pointer-events:none;
  visibility:hidden;
}
#sv-gal-world.sv-gal-on { visibility:visible; pointer-events:all; }

/* Galaxy tiles — raw artwork, no text overlay */
.sv-gal-tile {
  position:absolute;
  width:140px; height:78px;
  border-radius:6px;
  object-fit:cover;
  will-change:transform;
  cursor:pointer;
  pointer-events:all;
  border:1px solid rgba(255,255,255,.07);
  opacity:0;
  transition:opacity .55s ease;
  transform:translate3d(0,0,0);
  image-rendering:auto;
}
.sv-gal-tile.sv-gal-loaded { opacity:1; }
.sv-gal-tile.sv-gal-dim    { opacity:.06 !important; pointer-events:none; transition:opacity .4s ease; }

/* Nebula glow layers (positioned in world-space via transform) */
.sv-gal-nebula {
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  will-change:opacity;
  transition:opacity .5s ease;
}

/* Provider labels — fixed, counter-scaled to stay readable */
.sv-gal-label {
  position:fixed; z-index:53;
  white-space:nowrap;
  font-size:10px; font-weight:900; letter-spacing:3.5px; text-transform:uppercase;
  transform-origin:50% 50%;
  will-change:transform,opacity;
  pointer-events:none;
  cursor:pointer;
  text-align:center;
  opacity:0; transition:opacity .4s ease;
}
.sv-gal-label.sv-gal-clickable { pointer-events:all; }
.sv-gal-label-dot {
  display:block; width:5px; height:5px; border-radius:50%;
  margin:4px auto 0;
}

/* Dark vignette — frames galaxy like a porthole */
#sv-gal-vignette {
  position:fixed; inset:0; z-index:54; pointer-events:none;
  background:radial-gradient(ellipse 56% 56% at 50% 50%, transparent 32%, rgba(7,6,17,.92) 100%);
  opacity:0; transition:opacity .7s ease;
}
#sv-gal-vignette.sv-gal-on { opacity:1; }

/* Warp speed lines */
#sv-gal-warp-lines {
  position:fixed; inset:0; z-index:55; pointer-events:none; overflow:hidden;
}
.sv-gal-wline {
  position:absolute; top:50%; left:50%; height:1px;
  transform-origin:0 50%;
  opacity:0;
}
.sv-gal-wline.sv-gal-go { animation:sv-gal-wl .55s ease-out forwards; }
@keyframes sv-gal-wl {
  0%   { width:0; opacity:.9; }
  75%  { width:160vw; opacity:.3; }
  100% { width:195vw; opacity:0; }
}

/* Warp flash */
#sv-gal-warp-flash {
  position:fixed; inset:0; z-index:55; pointer-events:none;
  background:hsl(var(--brand-hue) 80% 60% / .09); opacity:0;
}
#sv-gal-warp-flash.sv-gal-pop { animation:sv-gal-wflash .42s ease-out forwards; }
@keyframes sv-gal-wflash { 0%{opacity:1} 100%{opacity:0} }

/* Top-centre badge */
#sv-gal-badge {
  position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:56;
  padding:5px 18px; border-radius:999px;
  background:hsl(var(--brand-hue) 80% 10% / .68);
  border:1px solid hsl(var(--brand-hue) 70% 52% / .42);
  font-size:8.5px; font-weight:800; letter-spacing:4px; text-transform:uppercase;
  color:hsl(var(--brand-hue) 80% 76%);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; transition:opacity .45s, color .3s, background .3s, border-color .3s;
  pointer-events:none; white-space:nowrap;
}
#sv-gal-badge.sv-gal-on { opacity:1; }

/* Bottom hint */
#sv-gal-hint {
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:56;
  font-size:9px; letter-spacing:2px; text-transform:uppercase;
  color:var(--ink-faint); text-align:center; white-space:nowrap;
  opacity:0; transition:opacity .45s; pointer-events:none;
}
#sv-gal-hint.sv-gal-on { opacity:1; }

/* Pulsing exit X — top-left */
#sv-gal-exit {
  position:fixed; top:18px; left:18px; z-index:56;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:hsl(var(--brand-hue) 70% 13% / .88);
  border:1.5px solid hsl(var(--brand-hue) 70% 56% / .5);
  color:hsl(var(--brand-hue) 80% 77%);
  cursor:pointer; font-family:inherit;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  opacity:0; transition:opacity .35s; pointer-events:none;
  animation:sv-gal-xpulse 2.6s ease-in-out infinite;
}
#sv-gal-exit.sv-gal-on { opacity:1; pointer-events:all; }
#sv-gal-exit:hover { background:hsl(var(--brand-hue) 70% 23% / .92); animation:none; box-shadow:0 0 20px hsl(var(--brand-hue) 80% 58% / .4); }
#sv-gal-exit:active { transform:scale(.92); }
@keyframes sv-gal-xpulse {
  0%,100% { box-shadow:0 0 0 0 hsl(var(--brand-hue) 80% 60% / .55); }
  50%     { box-shadow:0 0 0 9px hsl(var(--brand-hue) 80% 60% / 0); }
}

/* Back button — focused → galaxy */
#sv-gal-back {
  position:fixed; top:70px; left:20px; z-index:56;
  padding:6px 14px; border-radius:999px;
  background:hsl(var(--brand-hue) 70% 13% / .78);
  border:1px solid hsl(var(--brand-hue) 60% 50% / .32);
  color:hsl(var(--brand-hue) 80% 74%);
  font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  cursor:pointer; font-family:inherit;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  opacity:0; transition:opacity .3s; pointer-events:none;
}
#sv-gal-back.sv-gal-on  { opacity:1; pointer-events:all; }
#sv-gal-back:hover { background:hsl(var(--brand-hue) 70% 21% / .92); }

/* Provider focus panel — bottom centre */
#sv-gal-panel {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%); z-index:56;
  padding:16px 30px; border-radius:16px; min-width:260px; text-align:center;
  background:rgba(7,6,17,.9);
  border:1px solid hsl(var(--brand-hue) 60% 50% / .2);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  opacity:0; transition:opacity .4s; pointer-events:none;
}
#sv-gal-panel.sv-gal-on { opacity:1; pointer-events:all; }
#sv-gal-panel-name {
  font-size:19px; font-weight:900; letter-spacing:-.3px; margin-bottom:5px;
}
#sv-gal-panel-sub {
  font-size:9px; letter-spacing:2.5px; text-transform:uppercase; color:var(--ink-faint);
}

/* Underlying canvas layers — galaxy blur (matches mem-blur intensity) */
#sv-stage.sv-gal-blur   { filter:blur(6px) brightness(.15) saturate(.3);  transition:filter .6s ease; pointer-events:none; }
.sv-dock.sv-gal-blur     { filter:blur(4px) brightness(.15);               transition:filter .6s ease; pointer-events:none; }
.sv-aurora.sv-gal-blur   { filter:blur(80px) saturate(.6) brightness(.12); transition:filter .6s ease; }