:root{
  --vv-mint:#9cf6df;--vv-violet:#a967ff;--vv-coral:#ff5c7c;--vv-amber:#ffc56d;
  --vv-ink:#05050a;--vv-panel:rgba(8,8,16,.82);--vv-chrome:#c9d7d4;
  --vv-fast:140ms;--vv-slow:900ms;--vv-effects:1;
}
@font-face{font-family:'Orbitron VV';src:url('./fonts/Orbitron-900.woff2') format('woff2');font-weight:900;font-display:swap}
html[data-effects="reduced"]{--vv-effects:.35}
html[data-effects="off"]{--vv-effects:0}
body{overflow-x:hidden}

/* Identity: two eras in one mark—90s-saturated marquee meets pixel-glitch neon.
   No -webkit-text-stroke + filter:drop-shadow together here: that combo
   mis-composites against a gradient background-clip:text fill in Chromium
   (separate anti-aliasing pass vs. the gradient edge) and throws a visible
   red/cyan channel-split ghost along the glyphs. text-shadow paints straight
   from the glyph alpha mask and stays clean with any fill, so it carries all
   the edge definition + glow below instead. */
#logo{position:relative;isolation:isolate}
#logo-main{display:flex;align-items:flex-end;gap:.12em;font-size:clamp(42px,5.4vw,76px);
  letter-spacing:0;animation:none!important;text-transform:uppercase;white-space:nowrap}
.vv-word-vintage{font-family:'Orbitron VV','Orbitron',sans-serif;font-size:.69em;font-weight:900;letter-spacing:.035em;line-height:1;
  color:transparent;background:linear-gradient(100deg,#ff2bd6 0%,#ff9a3c 24%,#ffe135 46%,#39ff8f 64%,#00e5ff 82%,#b537ff 100%);
  background-size:200% 100%;animation:vvVintageShimmer 6s ease-in-out infinite;
  -webkit-background-clip:text;background-clip:text;
  text-shadow:2px 2px 0 rgba(8,4,14,.85),4px 4px 0 rgba(8,4,14,.5),0 0 18px rgba(255,255,255,.35)}
@keyframes vvVintageShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.vv-word-vibes{font-family:'DotGothic16',monospace;font-size:.71em;letter-spacing:-.06em;line-height:1;
  color:#fff060;transform:skew(-6deg);
  text-shadow:2.5px 0 #ff1ad6,-2.5px 0 #00e5ff,0 0 18px rgba(255,240,96,.75),0 0 34px rgba(255,26,214,.35)}
.vv-mega-badge{position:absolute;right:0;bottom:-16px;padding:2px 6px;border:1px solid rgba(255,197,109,.45);
  color:var(--vv-amber);background:#08080d;font:7px 'Share Tech Mono',monospace;letter-spacing:.24em}
#logo::before{content:'';position:absolute;inset:-10px -18px -12px -14px;z-index:-1;opacity:.7;
  border-left:2px solid rgba(156,246,223,.3);border-radius:50%;background:radial-gradient(ellipse at 30% 100%,rgba(169,103,255,.13),transparent 64%)}

/* Low-cost smoke: tiny repeated textures moved only with compositor transforms. */
#vv-smoke{position:fixed;inset:0;z-index:3;overflow:hidden;pointer-events:none;opacity:calc(.42 * var(--vv-effects));mix-blend-mode:screen}
.vv-smoke-layer{position:absolute;left:-12%;bottom:-8%;width:124%;height:38%;will-change:transform,opacity;
  background:
    radial-gradient(ellipse at 12% 78%,rgba(156,246,223,.28),transparent 18%),
    radial-gradient(ellipse at 42% 70%,rgba(169,103,255,.2),transparent 20%),
    radial-gradient(ellipse at 84% 82%,rgba(255,92,124,.2),transparent 18%);
  mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.7) 35%,transparent 100%);
  -webkit-mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.7) 35%,transparent 100%);
  transform:translate3d(0,0,0);animation:vvSmokeDrift 28s ease-in-out infinite alternate}
.vv-smoke-layer:nth-child(2){bottom:-4%;opacity:.48;transform:scaleX(-1);animation-duration:39s;animation-direction:alternate-reverse}
@keyframes vvSmokeDrift{to{transform:translate3d(5%,-14%,0) scale(1.08)}}
body.vv-scrolling #vv-smoke,body.vv-launching #vv-smoke{opacity:0}

/* Console rail becomes a compact hardware dock. */
#platform-bar{padding:14px 20px 8px;gap:9px;background:
  linear-gradient(90deg,rgba(156,246,223,.05),transparent 22%,rgba(169,103,255,.08) 62%,transparent),
  linear-gradient(180deg,rgba(6,6,13,.98),rgba(13,8,22,.94));
  border-block:1px solid rgba(156,246,223,.14);box-shadow:inset 0 1px rgba(255,255,255,.04),0 12px 34px rgba(0,0,0,.4)}
.ptab{width:98px;min-height:92px;padding:9px 7px 10px;overflow:hidden;border:1px solid rgba(255,255,255,.05)!important;
  border-radius:12px 12px 4px 4px!important;background:linear-gradient(155deg,rgba(255,255,255,.035),rgba(0,0,0,.16))!important;
  clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%,0 7px)}
.ptab::before{content:'';position:absolute;inset:auto 12% 0;height:42%;opacity:0;transition:opacity var(--vv-fast);
  background:radial-gradient(ellipse at bottom,var(--pt-color),transparent 68%);filter:blur(12px)}
.ptab:hover::before,.ptab.active::before{opacity:.34}
.ptab-art{width:62px;height:42px;z-index:1}.ptab-name,.ptab-count{z-index:1}
.ptab-art{padding:4px;border-radius:8px;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 72%)}
.ptab.active{transform:translateY(-4px);border-color:var(--pt-color)!important;
  background:linear-gradient(155deg,color-mix(in srgb,var(--pt-color) 18%,transparent),rgba(4,4,10,.92))!important;
  box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 18px color-mix(in srgb,var(--pt-color) 30%,transparent)}
.ptab.active .ptab-art{transform:translateY(-2px) scale(1.14);filter:saturate(1.15) drop-shadow(0 0 8px var(--pt-color))}
.ptab-name{font-weight:700}
/* index.html's base .ptab-count rule sets the element's CSS `opacity` to .45 — that
   stacks multiplicatively with any color-alpha fix here (0.68 * 0.45 ≈ .31 rendered),
   so bumping color alone silently stayed dim. Override the opacity too so the per-tab
   game counts actually read at the brightness this rule intends. */
.ptab-count{color:rgba(225,238,235,.68)!important;opacity:1!important}
#vv-system-readout{flex-shrink:0;padding:4px 22px 5px;border-bottom:1px solid rgba(156,246,223,.08);
  background:rgba(6,6,12,.88);color:rgba(201,215,212,.45);font:8px 'Share Tech Mono',monospace;letter-spacing:.2em;text-transform:uppercase}
#vv-system-readout b{color:var(--vv-mint);text-shadow:0 0 10px currentColor}
#vv-effects-btn{min-height:34px;padding:7px 10px;border:1.5px solid rgba(169,103,255,.65);border-radius:3px;
  color:#d8bfff;background:rgba(169,103,255,.16);cursor:pointer;
  box-shadow:0 0 10px rgba(169,103,255,.2);
  font:9px 'Share Tech Mono',monospace;letter-spacing:.12em;white-space:nowrap}
#vv-effects-btn:hover,#vv-effects-btn:focus-visible{color:var(--vv-mint);border-color:rgba(156,246,223,.7);box-shadow:0 0 18px rgba(156,246,223,.22)}

.gc{contain:layout paint style}.gc:focus-visible,.ptab:focus-visible,#hero-play:focus-visible{outline:2px solid var(--vv-mint);outline-offset:3px}
button,.gc{touch-action:manipulation}

@media (max-width:760px){
  #header{align-items:flex-start;flex-wrap:wrap;padding-top:max(10px,env(safe-area-inset-top))}
  #logo-main{font-size:clamp(34px,10vw,48px)}.vv-mega-badge{display:none}
  #hdr-right{width:100%;min-width:0;margin-left:0;align-items:stretch}
  #hdr-actions{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:2px}
  #search-wrap{flex:0 0 150px}#search{width:100%}#fav-filter-btn,#mk-vault-btn,#setup-btn,#vv-effects-btn{min-height:44px;padding-inline:10px}
  #platform-bar{padding:12px 12px 8px}.ptab{width:88px;min-height:84px}.ptab-art{width:56px;height:38px}
  #vv-system-readout{padding-inline:14px}.gc-play{opacity:1}
  #vignette{opacity:.28}#scanlines{opacity:.36}
  .gc,.new-card,.recent-card{background:#0d1019!important;border-color:rgba(156,246,223,.22)!important}
  .gc-art img.loaded,.new-card-art img.loaded,.recent-card-art img.loaded{
    opacity:1!important;filter:saturate(1.12) brightness(1.18) contrast(1.04)!important}
  .gc-title,.new-card-title,.recent-card-title{color:#e9f7f3!important;text-shadow:0 1px 2px #000}
}
@media (pointer:coarse){#vv-smoke{opacity:.045}.vv-smoke-layer{animation:none}.gc:hover{transform:none}
  /* The max-width:760px block above bakes the saturation/brightness/contrast boost
     and legible title color into cover art because hover (saturate(1) brightness(1.02),
     barely a bump) never fires on touch. That block only triggers on narrow phone
     widths — a tablet or landscape phone is coarse-pointer too but reports a wider
     viewport, so it fell through with no fallback: same gap .gc-play had before its
     touch fix. Repeat the same declarations here, gated on pointer type instead of
     width, so every touch device gets them regardless of screen size. */
  .gc,.new-card,.recent-card{background:#0d1019!important;border-color:rgba(156,246,223,.22)!important}
  .gc-art img.loaded,.new-card-art img.loaded,.recent-card-art img.loaded{
    opacity:1!important;filter:saturate(1.12) brightness(1.18) contrast(1.04)!important}
  .gc-title,.new-card-title,.recent-card-title{color:#e9f7f3!important;text-shadow:0 1px 2px #000}
}
@media (prefers-reduced-motion:reduce){#vv-smoke{opacity:.035}.vv-smoke-layer{animation:none}.vv-word-vibes{transform:none}}
@media (orientation:landscape) and (max-height:520px){#header{padding-block:7px}#logo-sub,#logo-credit{display:none}#platform-bar{padding-top:5px}.ptab{min-height:62px}.ptab-art{height:28px}}