:root{
  /* === MIAMI VICE — sunset gradient (deep night → purple → magenta → orange) === */
  --sky-1:#150a3a;     /* deep navy night */
  --sky-2:#5e1a7a;     /* electric violet */
  --sky-3:#ff1f8f;     /* hot magenta */
  --sky-4:#ff7a3d;     /* sunset orange */

  --cream:#fff0db;     /* warm sand */
  --ink:#0e0a2c;       /* deeper indigo black */
  --ink-soft:#3a2e6e;

  --pink:#ff1f8f;      /* hot magenta */
  --pink-deep:#c41a7a;
  --yellow:#ffd23f;    /* keep — neon highlight */
  --peach:#ffa177;
  --orange:#ff7a3d;    /* sunset */
  --green:#1ee3cf;     /* neon teal (Miami accent) */
  --green-deep:#14a896;
  --lilac:#a26bff;     /* electric purple */
  --red:#ff3450;
  --cyan:#00d9ff;      /* electric blue */

  --hp:#1ee3cf;
  --atk:#ff7a3d;
  --def:#00d9ff;
  --spd:#ffd23f;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  color:var(--ink);
  overflow-x:hidden;
  font-size:16px;line-height:1.5;
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 35%,var(--sky-3) 70%,var(--sky-4) 100%);
  background-attachment:fixed;
  min-height:100vh;
}
@media(hover:hover) and (pointer:fine){
  body{
    /* High-contrast white crosshair with dark outline so it's visible on any background */
    cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><rect x="9" y="1" width="4" height="8" fill="%23fff" stroke="%230e0a2c" stroke-width="1"/><rect x="9" y="13" width="4" height="8" fill="%23fff" stroke="%230e0a2c" stroke-width="1"/><rect x="1" y="9" width="8" height="4" fill="%23fff" stroke="%230e0a2c" stroke-width="1"/><rect x="13" y="9" width="8" height="4" fill="%23fff" stroke="%230e0a2c" stroke-width="1"/></svg>') 11 11, crosshair;
  }
}
/* On the SF splash, default OS cursor (more familiar for new visitors) */
body.splash-mode{cursor:auto}
body.splash-mode button,
body.splash-mode a{cursor:pointer}
@supports(-webkit-touch-callout:none){
  body{background-attachment:scroll}
}
.jp{font-family:'Noto Sans JP',sans-serif;font-weight:700}
.pixel{font-family:'Press Start 2P',monospace}
.display{font-family:'Bowlby One',sans-serif;letter-spacing:.5px}
::selection{background:var(--pink);color:var(--cream)}
a{color:inherit}
img,svg{image-rendering:pixelated}

/* CRT SCANLINES — subtle */
body::before{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.05) 3px,rgba(0,0,0,.05) 4px);
}
body::after{
  content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 65%,rgba(26,17,64,.18) 100%);
}

/* CLOUDS */
.clouds{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.cloud{position:absolute;background:#fff;border-radius:50%;filter:drop-shadow(0 8px 0 rgba(26,17,64,.08));opacity:.95}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.c1{width:140px;height:50px;top:6%;left:-10%;animation:drift 60s linear infinite}
.c1::before{width:70px;height:70px;top:-30px;left:30px}
.c1::after{width:50px;height:50px;top:-18px;left:80px}
.c2{width:180px;height:60px;top:22%;left:-15%;animation:drift 80s linear infinite;animation-delay:-20s;opacity:.85}
.c2::before{width:90px;height:90px;top:-45px;left:40px}
.c2::after{width:60px;height:60px;top:-25px;left:110px}
.c3{width:120px;height:42px;top:42%;left:-10%;animation:drift 70s linear infinite;animation-delay:-40s;opacity:.7}
.c3::before{width:60px;height:60px;top:-25px;left:25px}
.c3::after{width:45px;height:45px;top:-15px;left:65px}
.c4{width:160px;height:55px;top:62%;left:-15%;animation:drift 90s linear infinite;animation-delay:-10s;opacity:.6}
.c4::before{width:75px;height:75px;top:-35px;left:35px}
.c4::after{width:55px;height:55px;top:-22px;left:95px}
.c5{width:130px;height:46px;top:78%;left:-10%;animation:drift 75s linear infinite;animation-delay:-55s;opacity:.5}
.c5::before{width:65px;height:65px;top:-28px;left:28px}
.c5::after{width:48px;height:48px;top:-16px;left:72px}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(120vw)}}

main{position:relative;z-index:2}

/* HUD BAR — top arcade UI */
.hud{
  background:var(--ink);
  color:var(--yellow);
  border-bottom:4px solid var(--ink);
  padding:8px 18px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Press Start 2P',monospace;
  font-size:9px;letter-spacing:1.5px;
  flex-wrap:wrap;gap:10px;
}
.hud-left,.hud-middle,.hud-right{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hud-middle{ justify-content:center }
.hud-stat{display:flex;align-items:center;gap:6px}
.hud-stat .lbl{color:var(--cream);opacity:.7}
.hud-stat .val{color:var(--yellow)}
.hud-stat .coin{display:inline-block;width:10px;height:10px;background:var(--yellow);border:1px solid var(--ink);border-radius:50%;box-shadow:inset -2px -2px 0 #b8861d}
.hud-stat .heart{color:var(--red);font-size:10px}
.hud .blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* Vitality (health bar) — SF2 style yellow-green-red gradient */
.hud-player{ display:flex; flex-direction:column; gap:3px; min-width:180px }
.hud-player-label{
  font-size:8px; color:var(--cream); opacity:.8;
  letter-spacing:1.2px;
  display:flex; justify-content:space-between; gap:8px;
}
.hud-player-label .jp{ color:var(--yellow); font-size:8px; opacity:.85 }
.hud-vitality{
  position:relative;
  height:12px;
  width:200px;
  background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.85) 100%);
  border:2px solid var(--yellow);
  border-radius:2px;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--ink);
}
.hud-vitality-fill{
  height:100%;
  width:92%;
  background:linear-gradient(90deg, #7fcf6f 0%, #00d9ff 100%);
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.3),
    inset 0 2px 0 rgba(255,255,255,.3),
    0 0 8px currentColor;
  transition:width .35s ease-out, background .25s;
}
.hud-vitality-grid{
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0, transparent 18px, rgba(0,0,0,.45) 18px, rgba(0,0,0,.45) 20px);
  pointer-events:none;
}

/* Combo counter — center HUD */
.hud-combo{
  display:flex; flex-direction:column; align-items:center; gap:0;
  padding:2px 10px;
  border:2px solid transparent;
  border-radius:3px;
  opacity:.35;
  transition:opacity .15s, border-color .15s, transform .15s;
}
.hud-combo.live{
  opacity:1;
  border-color:var(--yellow);
  background:rgba(255,210,63,.08);
}
.hud-combo.hot{
  background:linear-gradient(180deg, rgba(255,31,143,.3) 0%, rgba(255,138,61,.3) 100%);
  border-color:var(--pink);
  animation:combo-pulse .35s ease-in-out infinite alternate;
}
.hud-combo .combo-num{
  font-family:'Bagel Fat One', sans-serif;
  font-size:22px; line-height:.95;
  color:var(--yellow);
  -webkit-text-stroke:.5px var(--ink);
  text-shadow:2px 2px 0 var(--pink);
  letter-spacing:1px;
}
.hud-combo .combo-x{
  font-family:'Press Start 2P', monospace;
  font-size:7px; color:var(--cream);
  letter-spacing:1.5px;
  margin-top:1px;
}
@keyframes combo-pulse{
  from { transform:scale(var(--combo-pulse, 1))    }
  to   { transform:scale(calc(var(--combo-pulse, 1) + .04)) }
}
.hud-combo.milestone{ animation:combo-flash .5s ease-out }
@keyframes combo-flash{
  0%   { filter:brightness(1)   }
  25%  { filter:brightness(2.5) drop-shadow(0 0 12px var(--yellow)) }
  100% { filter:brightness(1)   }
}

.hud-score-block .lbl{ color:var(--cream); opacity:.7; margin-right:6px }

@media(max-width:640px){
  .hud{ font-size:8px; padding:6px 10px; gap:6px }
  .hud-player{ min-width:140px }
  .hud-vitality{ width:140px; height:10px }
  .hud-combo .combo-num{ font-size:18px }
  .hud-combo .combo-x{ font-size:6px }
  .hud-score-block{ display:none }
}
@media(prefers-reduced-motion:reduce){
  .hud-combo.hot{ animation:none }
}

/* NAV */
nav.topnav{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(255,247,230,.82);
  border-bottom:4px solid var(--ink);
  padding:12px 24px;
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;
}
.nav-left{display:flex;align-items:center;gap:24px}
.logo{
  font-family:'Bowlby One',sans-serif;
  font-size:22px;color:var(--ink);
  text-decoration:none;
  text-shadow:2px 2px 0 var(--pink),4px 4px 0 var(--ink);
  letter-spacing:1px;
}
.logo .star{color:var(--yellow);text-shadow:2px 2px 0 var(--orange)}
.logo .flower{color:var(--pink-deep);font-size:.85em;margin-left:2px}
.nav-links{display:flex;gap:6px;list-style:none;align-items:center}
.nav-links a{
  color:var(--ink);text-decoration:none;
  font-family:'Press Start 2P',monospace;
  font-weight:400;font-size:9px;
  text-transform:uppercase;letter-spacing:1px;
  padding:8px 12px;border-radius:8px;
  transition:.1s;display:inline-flex;align-items:center;gap:6px;
  border:2px solid transparent;
}
.nav-links a:hover{background:var(--pink);color:#fff;border-color:var(--ink)}
.nav-links a.active{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
.nav-right{display:flex;gap:12px;align-items:center}
.nav-jp{font-size:11px;color:var(--ink-soft);letter-spacing:2px}
.cart-btn{
  background:var(--ink);color:var(--cream);
  border:3px solid var(--ink);
  box-shadow:3px 3px 0 var(--pink);
  padding:8px 16px;
  font-family:'Press Start 2P',monospace;
  font-size:10px;cursor:pointer;
  border-radius:8px;letter-spacing:1px;transition:.1s;
  text-decoration:none;display:inline-block;
}
.cart-btn:hover{background:var(--pink);box-shadow:3px 3px 0 var(--ink)}
.cart-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--pink)}
.menu-toggle{display:none;background:transparent;border:3px solid var(--ink);border-radius:8px;padding:8px 14px;font-family:'Press Start 2P',monospace;font-size:10px;cursor:pointer}

/* HAMBURGER + SIDE MENU PANEL */
.hamburger{
  width:44px;height:44px;
  background:var(--ink);border:3px solid var(--ink);
  box-shadow:3px 3px 0 var(--pink);
  border-radius:8px;cursor:pointer;padding:0;
  display:inline-flex;flex-direction:column;
  justify-content:center;align-items:center;gap:4px;
  transition:.1s;
}
.hamburger span{display:block;width:20px;height:3px;background:var(--cream);border-radius:2px}
.hamburger:hover{background:var(--pink);box-shadow:3px 3px 0 var(--ink)}
.hamburger:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--pink)}

.menu-overlay{
  position:fixed;inset:0;background:rgba(26,17,64,.5);
  backdrop-filter:blur(4px);opacity:0;pointer-events:none;
  transition:opacity .25s;z-index:101;
}
.menu-overlay.open{opacity:1;pointer-events:auto}

.menu-panel{
  position:fixed;top:0;right:-400px;bottom:0;
  width:380px;max-width:90vw;background:var(--cream);
  border-left:4px solid var(--ink);
  transition:right .25s steps(8);
  z-index:102;display:flex;flex-direction:column;
}
.menu-panel.open{right:0}
.menu-panel-head{
  padding:20px;border-bottom:4px solid var(--ink);
  display:flex;justify-content:space-between;align-items:center;
  background:var(--ink);color:var(--yellow);
}
.menu-panel-head h3{
  font-family:'Press Start 2P',monospace;font-size:13px;
  color:var(--yellow);letter-spacing:1.5px;text-transform:uppercase;
}
.menu-panel-list{flex:1;padding:20px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.menu-panel-list a{
  font-family:'Press Start 2P',monospace;font-size:12px;
  padding:18px 20px;background:#fff;
  border:3px solid var(--ink);box-shadow:3px 3px 0 var(--pink);
  text-decoration:none;color:var(--ink);
  text-transform:uppercase;letter-spacing:1.5px;
  border-radius:8px;display:flex;justify-content:space-between;
  align-items:center;transition:.1s;
}
.menu-panel-list a:nth-child(2n){box-shadow:3px 3px 0 var(--yellow)}
.menu-panel-list a:nth-child(3n){box-shadow:3px 3px 0 var(--green)}
.menu-panel-list a:nth-child(4n){box-shadow:3px 3px 0 var(--lilac)}
.menu-panel-list a:nth-child(5n){box-shadow:3px 3px 0 var(--orange)}
.menu-panel-list a:hover{background:var(--pink);color:#fff;transform:translate(-2px,-2px)}
.menu-panel-list a.active{background:var(--ink);color:var(--yellow)}
.menu-panel-list a .arrow{color:var(--pink-deep);font-size:14px}
.menu-panel-list a.active .arrow{color:var(--yellow)}
.menu-panel-foot{
  padding:16px 20px;border-top:4px solid var(--ink);background:var(--ink);
  color:var(--cream);display:flex;justify-content:space-between;align-items:center;
  font-family:'Press Start 2P',monospace;font-size:9px;letter-spacing:1px;
}
.menu-panel-foot .jp{font-family:'Noto Sans JP',sans-serif;font-weight:700;color:var(--yellow);font-size:11px;letter-spacing:2px}

/* PAGE HEAD */
.page-head{padding:50px 20px 30px;text-align:center}
.page-head .eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;border:3px solid var(--ink);
  padding:8px 16px;border-radius:8px;
  box-shadow:3px 3px 0 var(--ink);
  font-family:'Press Start 2P',monospace;
  font-weight:400;font-size:9px;
  text-transform:uppercase;letter-spacing:2px;
  margin-bottom:24px;
}
.page-head .eyebrow .dot{width:8px;height:8px;background:var(--green);box-shadow:0 0 0 3px rgba(127,207,111,.3);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.page-head h1{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(28px,6vw,64px);
  line-height:1.05;
  color:var(--cream);
  text-shadow:
    3px 3px 0 var(--ink),
    6px 6px 0 var(--pink),
    9px 9px 0 var(--cyan);
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom:8px;
}
.page-head .jp-sub{
  font-family:'Noto Sans JP',sans-serif;font-weight:900;
  font-size:clamp(13px,1.5vw,18px);
  color:var(--cyan);letter-spacing:4px;
  margin:24px 0 12px;
  text-shadow:0 0 10px rgba(0,217,255,.45);
}
.page-head p.lead{
  font-size:clamp(15px,1.6vw,18px);
  color:var(--cream);
  max-width:560px;margin:0 auto;font-weight:500;
  text-shadow:1px 1px 0 var(--ink);
}

/* HOMEPAGE TITLE SCREEN */
.title-screen{
  min-height:88vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px 80px;
  text-align:center;position:relative;
}
.mega-logo{
  font-family:'Bowlby One',sans-serif;
  font-size:clamp(56px,14vw,180px);
  line-height:.85;
  color:var(--cream);
  text-shadow:
    5px 5px 0 var(--ink),
    10px 10px 0 var(--pink),
    15px 15px 0 var(--cyan);
  letter-spacing:3px;
  text-transform:uppercase;
  transform:rotate(-2deg);
  margin-bottom:16px;
}
.mega-logo .l2{
  display:block;
  color:var(--yellow);
  text-shadow:5px 5px 0 var(--ink),10px 10px 0 var(--orange),15px 15px 0 var(--pink);
  transform:rotate(3deg);
  margin-top:14px;
}
.title-screen .tagline{
  font-family:'Press Start 2P',monospace;
  font-size:11px;color:var(--ink);letter-spacing:3px;
  margin:24px 0 32px;
}
.title-screen .press-start{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(13px,1.6vw,18px);color:var(--ink);
  margin:24px 0 8px;letter-spacing:3px;
}
.title-screen .press-start .arrow{color:var(--pink-deep);margin-right:6px}
.title-screen .jp-press{
  font-family:'Noto Sans JP',sans-serif;font-weight:900;
  font-size:14px;color:var(--ink-soft);
  letter-spacing:6px;margin-bottom:36px;
}
.title-screen .copyright{
  margin-top:48px;
  font-family:'Press Start 2P',monospace;font-size:8px;
  color:var(--ink-soft);letter-spacing:2px;
}

/* SPRITE MASCOT */
.sprite{image-rendering:pixelated;animation:sprite-bob 1s steps(2) infinite}
@keyframes sprite-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* BUTTONS — arcade style */
.btn{
  font-family:'Press Start 2P',monospace;
  font-size:14px;
  padding:18px 32px;
  border:none;cursor:pointer;
  text-decoration:none;text-transform:uppercase;
  transition:.1s;letter-spacing:2px;
  border-radius:8px;
  display:inline-flex;align-items:center;gap:10px;
}
.btn-primary{
  background:var(--ink);color:var(--cream);
  border:4px solid var(--ink);
  box-shadow:6px 6px 0 var(--pink);
}
.btn-primary:hover{background:var(--pink);box-shadow:6px 6px 0 var(--ink)}
.btn-primary:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--pink)}
.btn-ghost{
  background:#fff;color:var(--ink);
  border:4px solid var(--ink);box-shadow:6px 6px 0 var(--yellow);
}
.btn-ghost:hover{background:var(--yellow);box-shadow:6px 6px 0 var(--ink)}
.btn-ghost:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--yellow)}
.btn-yellow{
  background:var(--yellow);color:var(--ink);
  border:4px solid var(--ink);box-shadow:6px 6px 0 var(--pink);
}
.btn-yellow:hover{background:var(--pink);color:#fff;box-shadow:6px 6px 0 var(--ink)}

/* DECO */
.deco{position:absolute;pointer-events:none}
.deco-sun{width:120px;height:120px;animation:spin 20s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.deco-flower{animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,-8deg))}50%{transform:translateY(-12px) rotate(calc(var(--r,-8deg) + 4deg))}}

/* === PALM TREE deco — gentle sway from base === */
.deco-palm{
  transform-origin:50% 100%;
  animation:palm-sway 6s ease-in-out infinite;
}
.deco-palm[style*="scaleX(-1)"]{
  /* mirrored palm needs a separate animation that preserves the flip */
  animation:palm-sway-flip 6s ease-in-out infinite;
}
@keyframes palm-sway{
  0%,100%{transform:rotate(var(--r,-3deg))}
  50%{transform:rotate(calc(var(--r,-3deg) + 5deg))}
}
@keyframes palm-sway-flip{
  0%,100%{transform:scaleX(-1) rotate(var(--r,3deg))}
  50%{transform:scaleX(-1) rotate(calc(var(--r,3deg) - 5deg))}
}
.deco-star{animation:wiggle 3s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(-10deg) scale(1)}50%{transform:rotate(10deg) scale(1.1)}}

/* TICKER */
.ticker{
  background:var(--ink);color:var(--yellow);
  padding:14px 0;overflow:hidden;
  border-block:4px solid var(--ink);
  font-family:'Press Start 2P',monospace;
  font-size:11px;letter-spacing:2px;
  transform:rotate(-1.5deg);
  margin:-20px -10px;
  position:relative;z-index:3;
  box-shadow:0 6px 0 rgba(26,17,64,.15);
}
.ticker-track{display:flex;gap:40px;white-space:nowrap;animation:scroll 32s linear infinite}
.ticker-track .star{color:var(--pink)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SECTIONS */
section{padding:70px 20px;position:relative}
.section-eyebrow{
  text-align:center;
  font-family:'Press Start 2P',monospace;
  font-size:10px;color:var(--cyan);
  margin-bottom:14px;letter-spacing:2px;
  text-shadow:0 0 8px rgba(0,217,255,.5);
}
.section-title{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(20px,4vw,40px);
  color:var(--cream);
  text-shadow:4px 4px 0 var(--pink),8px 8px 0 var(--ink);
  margin-bottom:8px;text-align:center;
  letter-spacing:2px;line-height:1.2;text-transform:uppercase;
}
.section-jp{
  text-align:center;color:var(--cream);opacity:.8;
  font-family:'Noto Sans JP',sans-serif;font-weight:700;
  font-size:14px;margin-bottom:48px;letter-spacing:3px;
}

/* LEVEL SELECT (menu.html) */
.level-select{max-width:760px;margin:0 auto;padding:20px 20px 80px}
.level-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;list-style:none}
.level-list li a{
  display:flex;align-items:center;gap:18px;
  background:#fff;border:4px solid var(--ink);
  border-radius:12px;
  padding:20px 22px;
  text-decoration:none;color:var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  transition:.12s;position:relative;
}
.level-list li:nth-child(2n) a{box-shadow:6px 6px 0 var(--pink)}
.level-list li:nth-child(3n) a{box-shadow:6px 6px 0 var(--yellow)}
.level-list li:nth-child(4n) a{box-shadow:6px 6px 0 var(--green)}
.level-list li:nth-child(5n) a{box-shadow:6px 6px 0 var(--lilac)}
.level-list li a:hover{transform:translate(-3px,-3px)}
.level-num{
  flex:0 0 60px;height:60px;
  background:var(--yellow);border:3px solid var(--ink);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Press Start 2P',monospace;font-size:18px;
  color:var(--ink);box-shadow:inset -3px -3px 0 rgba(0,0,0,.15);
}
.level-list li:nth-child(2n) .level-num{background:var(--pink)}
.level-list li:nth-child(3n) .level-num{background:var(--green)}
.level-list li:nth-child(4n) .level-num{background:var(--lilac)}
.level-info{flex:1}
.level-info strong{
  font-family:'Press Start 2P',monospace;
  font-size:14px;letter-spacing:1.5px;text-transform:uppercase;
  display:block;margin-bottom:6px;
}
.level-info .jp-tag{font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:11px;color:var(--ink-soft);letter-spacing:2px}
.level-info .stars{margin-top:8px;color:var(--orange);font-size:14px;letter-spacing:2px}
.level-info .stars .empty{color:#ccc}
.level-arrow{font-family:'Press Start 2P',monospace;font-size:18px;color:var(--pink-deep)}

/* POKEDEX-STYLE PRODUCT CARDS */
.products-section{background:rgba(255,247,230,.65);border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.dex-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;max-width:1300px;margin:0 auto;
}
.dex-card{
  background:#fff;border:4px solid var(--ink);
  border-radius:12px;overflow:hidden;
  position:relative;transition:transform .15s;
  box-shadow:8px 8px 0 var(--ink);
}
.dex-card:nth-child(2n){box-shadow:8px 8px 0 var(--pink)}
.dex-card:nth-child(3n){box-shadow:8px 8px 0 var(--yellow)}
.dex-card:nth-child(4n){box-shadow:8px 8px 0 var(--green)}
.dex-card:nth-child(5n){box-shadow:8px 8px 0 var(--lilac)}
.dex-card:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--ink)}
.dex-head{
  background:var(--ink);color:var(--yellow);
  padding:8px 14px;
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Press Start 2P',monospace;font-size:9px;letter-spacing:1.5px;
  border-bottom:4px solid var(--ink);
}
.dex-head .num{color:var(--cream);opacity:.7}
.dex-head .lvl{background:var(--pink);color:var(--ink);padding:3px 8px;border-radius:4px;font-size:8px}
.dex-img-wrap{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-bottom:4px solid var(--ink);position:relative;overflow:hidden}
.pimg-1{background:linear-gradient(135deg,#ffe8a8,#ffb87a)}
.pimg-2{background:linear-gradient(135deg,#ffb1cc,#ff7a99)}
.pimg-3{background:linear-gradient(135deg,#b9e6a3,#7fcf6f)}
.pimg-4{background:linear-gradient(135deg,#a8d8f5,#6bb5e0)}
.pimg-5{background:linear-gradient(135deg,#d4b3ff,#9c7aed)}
.pimg-6{background:linear-gradient(135deg,#fff0a8,#ffd23f)}
.dex-img-wrap::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(26,17,64,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,17,64,.04) 1px,transparent 1px);
  background-size:20px 20px;
}
.dex-tag{
  position:absolute;top:14px;left:14px;
  background:var(--red);color:var(--cream);
  font-family:'Press Start 2P',monospace;font-size:8px;
  padding:6px 10px;border-radius:4px;border:2px solid var(--ink);
  text-transform:uppercase;letter-spacing:1px;z-index:2;
}
.dex-tag.new{background:var(--green-deep)}
.dex-tag.deal{background:var(--pink-deep)}
.dex-img{width:55%;height:55%;filter:drop-shadow(0 6px 0 rgba(26,17,64,.2));position:relative;z-index:1}
.dex-info{padding:16px 18px}
.dex-name{font-family:'Press Start 2P',monospace;font-size:12px;color:var(--ink);margin-bottom:4px;letter-spacing:1px;line-height:1.3}
.dex-meta{color:var(--ink-soft);font-size:11px;margin-bottom:14px;font-weight:500;text-transform:uppercase;letter-spacing:1px;font-family:'Press Start 2P',monospace}
.dex-stats{display:grid;gap:6px;margin-bottom:14px}
.stat-row{display:grid;grid-template-columns:36px 1fr 28px;align-items:center;gap:8px;font-family:'Press Start 2P',monospace;font-size:8px;letter-spacing:1px}
.stat-bar{height:10px;background:var(--cream);border:2px solid var(--ink);border-radius:2px;overflow:hidden;position:relative}
.stat-bar-fill{height:100%;background:var(--hp);position:relative}
.stat-bar-fill.atk{background:var(--atk)}
.stat-bar-fill.def{background:var(--def)}
.stat-bar-fill.spd{background:var(--spd)}
.stat-bar-fill::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 3px,rgba(0,0,0,.1) 3px,rgba(0,0,0,.1) 4px)}
.stat-val{color:var(--ink);text-align:right;font-size:8px}
.dex-foot{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:3px dashed var(--ink)}
.dex-price{font-family:'Press Start 2P',monospace;font-size:18px;color:var(--ink);letter-spacing:1px}
.dex-price .cents{font-size:10px;color:var(--ink-soft)}
.add-btn{
  background:var(--ink);color:var(--cream);
  border:3px solid var(--ink);box-shadow:3px 3px 0 var(--pink);
  width:42px;height:42px;border-radius:8px;
  font-family:'Press Start 2P',monospace;font-size:16px;
  cursor:pointer;transition:.1s;
}
.add-btn:hover{background:var(--pink);box-shadow:3px 3px 0 var(--ink)}
.add-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--pink)}

/* CARD GRID (rewards / retailers) */
.card-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;max-width:1200px;margin:0 auto;
}
.card{
  background:#fff;border:4px solid var(--ink);
  border-radius:12px;padding:24px;
  box-shadow:6px 6px 0 var(--ink);transition:.12s;
}
.card:nth-child(2n){box-shadow:6px 6px 0 var(--pink);background:var(--cream)}
.card:nth-child(3n){box-shadow:6px 6px 0 var(--yellow)}
.card:nth-child(4n){box-shadow:6px 6px 0 var(--green);background:var(--cream)}
.card:hover{transform:translate(-2px,-2px)}
.card .icon{
  width:56px;height:56px;border-radius:8px;
  border:3px solid var(--ink);background:var(--yellow);
  display:flex;align-items:center;justify-content:center;
  font-family:'Press Start 2P',monospace;font-size:20px;
  margin-bottom:14px;
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.15);
}
.card:nth-child(2) .icon{background:var(--pink)}
.card:nth-child(3) .icon{background:var(--green)}
.card:nth-child(4) .icon{background:var(--lilac)}
.card h3{font-family:'Press Start 2P',monospace;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:10px;line-height:1.3}
.card p{color:var(--ink-soft);font-size:14px;font-weight:500}
.card .meta{margin-top:14px;padding-top:12px;border-top:3px dashed var(--ink);display:flex;justify-content:space-between;font-family:'Press Start 2P',monospace;font-size:9px;letter-spacing:1px}
.card .meta .v{color:var(--pink-deep)}

/* XP BAR — rewards */
.xp-card{
  max-width:780px;margin:0 auto 48px;
  background:var(--ink);color:var(--cream);
  border:4px solid var(--ink);border-radius:12px;
  padding:28px;box-shadow:8px 8px 0 var(--pink);
}
.xp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.xp-top .name{font-family:'Press Start 2P',monospace;font-size:14px;color:var(--yellow);letter-spacing:1.5px}
.xp-top .lvl{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--cream);background:var(--pink-deep);padding:6px 12px;border-radius:6px;letter-spacing:1px}
.xp-bar-wrap{margin-bottom:10px}
.xp-bar-lbl{display:flex;justify-content:space-between;font-family:'Press Start 2P',monospace;font-size:9px;color:var(--cream);margin-bottom:6px;letter-spacing:1px}
.xp-bar{height:18px;background:#000;border:3px solid var(--cream);border-radius:4px;overflow:hidden;position:relative}
.xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--yellow));width:62%;position:relative;transition:width 1s;animation:xp-fill 2s ease-out}
@keyframes xp-fill{from{width:0}to{width:62%}}
.xp-bar-fill::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 6px,rgba(0,0,0,.15) 6px,rgba(0,0,0,.15) 8px)}
.xp-perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:18px}
.xp-perk{background:rgba(255,255,255,.08);border:2px solid var(--cream);padding:10px 12px;border-radius:6px;text-align:center;font-family:'Press Start 2P',monospace;font-size:8px;letter-spacing:1px;color:var(--cream)}
.xp-perk.unlocked{background:var(--green-deep);border-color:var(--green);color:#fff}
.xp-perk.locked{opacity:.5}

/* QUEST LOG (events) */
.quest-list{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.quest{
  background:#fff;border:4px solid var(--ink);border-radius:12px;
  padding:22px 26px;box-shadow:6px 6px 0 var(--pink);
  display:grid;grid-template-columns:auto 100px 1fr auto;gap:20px;align-items:center;
}
.quest:nth-child(2n){box-shadow:6px 6px 0 var(--yellow)}
.quest:nth-child(3n){box-shadow:6px 6px 0 var(--green)}
.quest:nth-child(4n){box-shadow:6px 6px 0 var(--lilac)}
.quest-status{
  width:42px;height:42px;border-radius:50%;
  border:3px solid var(--ink);background:var(--yellow);
  display:flex;align-items:center;justify-content:center;
  font-family:'Press Start 2P',monospace;font-size:14px;
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.15);
}
.quest-date{
  background:var(--ink);color:var(--yellow);
  border-radius:8px;padding:12px 8px;text-align:center;
  font-family:'Press Start 2P',monospace;letter-spacing:1px;
}
.quest-date .d{font-size:24px;display:block;line-height:1}
.quest-date .m{font-size:9px;color:var(--cream);text-transform:uppercase;margin-top:6px;display:block;letter-spacing:1px}
.quest-info h3{font-family:'Press Start 2P',monospace;font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;line-height:1.3}
.quest-info p{color:var(--ink-soft);font-weight:500;font-size:14px;margin-bottom:6px}
.quest-info .pin{display:inline-block;font-family:'Press Start 2P',monospace;font-size:8px;color:var(--ink);background:var(--cream);padding:5px 10px;border-radius:4px;border:2px solid var(--ink);letter-spacing:1px;margin-top:4px}
.quest-info .reward{display:inline-block;margin-left:6px;background:var(--yellow);border:2px solid var(--ink);padding:5px 10px;border-radius:4px;font-family:'Press Start 2P',monospace;font-size:8px;letter-spacing:1px;margin-top:4px}
@media(max-width:760px){.quest{grid-template-columns:auto 80px 1fr}.quest .btn{grid-column:1/-1}}

/* DIALOGUE BOX — 8-bit speech bubble */
.dialogue{
  max-width:720px;margin:0 auto;
  background:var(--ink);color:var(--cream);
  border:4px solid var(--cream);border-radius:8px;
  padding:24px 28px;box-shadow:0 0 0 4px var(--ink),6px 6px 0 4px var(--pink);
  position:relative;font-family:'Press Start 2P',monospace;
  font-size:11px;line-height:1.8;letter-spacing:1px;
}
.dialogue::after{
  content:"▼";position:absolute;
  bottom:-8px;right:24px;
  color:var(--cream);font-size:14px;
  animation:blink 1s steps(2) infinite;
}
.dialogue .speaker{
  display:inline-block;
  background:var(--yellow);color:var(--ink);
  padding:4px 10px;border:2px solid var(--cream);
  border-radius:4px;
  font-size:9px;margin-bottom:12px;letter-spacing:1px;
}

/* FORM */
.form-wrap{max-width:560px;margin:0 auto;background:#fff;border:4px solid var(--ink);border-radius:12px;padding:36px;box-shadow:10px 10px 0 var(--pink)}
.form-wrap label{display:block;font-family:'Press Start 2P',monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;margin-top:20px}
.form-wrap label:first-child{margin-top:0}
.form-wrap input,.form-wrap textarea,.form-wrap select{
  width:100%;background:var(--cream);
  border:3px solid var(--ink);border-radius:6px;
  padding:14px 16px;font-family:'DM Sans',sans-serif;
  font-size:15px;font-weight:500;color:var(--ink);
  outline:none;transition:.1s;
}
.form-wrap input:focus,.form-wrap textarea:focus,.form-wrap select:focus{box-shadow:4px 4px 0 var(--ink)}
.form-wrap textarea{min-height:120px;resize:vertical;font-family:'DM Sans',sans-serif}
.form-wrap button{
  margin-top:28px;width:100%;
  background:var(--ink);color:var(--yellow);
  border:3px solid var(--ink);box-shadow:5px 5px 0 var(--pink);
  padding:16px;font-family:'Press Start 2P',monospace;
  font-size:14px;letter-spacing:2px;cursor:pointer;
  border-radius:8px;text-transform:uppercase;transition:.1s;
}
.form-wrap button:hover{background:var(--pink-deep);color:#fff}
.form-wrap button:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--pink)}

/* PROSE */
.prose{max-width:760px;margin:0 auto;background:#fff;border:4px solid var(--ink);border-radius:12px;padding:44px 36px;box-shadow:10px 10px 0 var(--yellow)}
.prose h2{font-family:'Press Start 2P',monospace;font-size:16px;text-transform:uppercase;letter-spacing:2px;color:var(--ink);margin:32px 0 14px;line-height:1.4}
.prose h2:first-child{margin-top:0}
.prose h2 .num{color:var(--pink-deep);margin-right:10px}
.prose p{color:var(--ink-soft);font-weight:500;margin-bottom:14px;font-size:15px;line-height:1.7}
.prose ul{padding-left:20px;margin-bottom:14px}
.prose li{color:var(--ink-soft);font-weight:500;margin-bottom:6px;font-size:15px}
.prose strong{color:var(--ink)}
.prose .note{background:var(--cream);border:3px solid var(--ink);border-radius:8px;padding:18px 22px;margin:22px 0;font-weight:500;font-size:14px;line-height:1.6}

/* CTA */
.cta-section{
  background:var(--ink);color:var(--cream);
  padding:80px 20px;text-align:center;position:relative;overflow:hidden;
}
.cta-section::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%,rgba(255,126,185,.2),transparent 40%),
    radial-gradient(circle at 80% 70%,rgba(255,210,63,.15),transparent 40%);
  pointer-events:none;
}
.cta-section h2{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(22px,4vw,40px);
  margin-bottom:8px;color:var(--yellow);
  text-shadow:4px 4px 0 var(--pink-deep);
  letter-spacing:2px;text-transform:uppercase;
  position:relative;line-height:1.3;
}
.cta-section .cta-jp{font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:13px;color:var(--cream);opacity:.7;letter-spacing:4px;margin-bottom:24px;position:relative}
.cta-section p{font-size:16px;margin-bottom:32px;position:relative;font-weight:500}
.newsletter{
  display:flex;gap:8px;max-width:520px;margin:0 auto;
  background:#fff;padding:6px;
  border:4px solid var(--cream);border-radius:8px;
  box-shadow:6px 6px 0 var(--pink);position:relative;
}
.newsletter input{
  flex:1;background:transparent;color:var(--ink);
  border:none;outline:none;
  padding:12px 16px;font-family:'DM Sans',sans-serif;
  font-size:15px;font-weight:500;
}
.newsletter input::placeholder{color:var(--ink-soft);text-transform:uppercase;letter-spacing:1px;font-weight:700;font-size:12px;font-family:'Press Start 2P',monospace}
.newsletter button{
  background:var(--ink);color:var(--yellow);border:none;
  padding:10px 20px;font-family:'Press Start 2P',monospace;
  font-size:11px;cursor:pointer;border-radius:4px;
  letter-spacing:1.5px;transition:.1s;
}
.newsletter button:hover{background:var(--pink-deep);color:#fff}

/* FOOTER */
footer{background:var(--cream);padding:54px 20px 24px;border-top:4px solid var(--ink);position:relative}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;max-width:1200px;margin:0 auto 36px}
.foot-brand p{color:var(--ink-soft);font-size:14px;max-width:300px;margin-top:14px;font-weight:500}
.foot-brand .jp-tag{display:inline-block;margin-top:14px;background:var(--ink);color:var(--cream);padding:6px 14px;border-radius:6px;font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:11px;letter-spacing:2px}
.foot-col h4{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--ink);margin-bottom:14px;letter-spacing:1.5px;text-transform:uppercase}
.foot-col a{display:block;color:var(--ink-soft);text-decoration:none;font-size:14px;margin-bottom:8px;font-weight:500;transition:.1s}
.foot-col a:hover{color:var(--pink-deep);transform:translateX(4px)}
.foot-bottom{border-top:3px dashed var(--ink);padding-top:22px;max-width:1200px;margin:0 auto;color:var(--ink-soft);font-size:13px;text-align:center;font-weight:500}
.foot-bottom .pixel{font-size:9px;color:var(--ink);letter-spacing:2px;margin-bottom:8px;display:block}
.socials{display:flex;gap:8px;margin-top:14px}
.socials a{width:38px;height:38px;border:3px solid var(--ink);border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;font-family:'Press Start 2P',monospace;font-size:10px;color:var(--ink);text-decoration:none;transition:.1s;box-shadow:2px 2px 0 var(--ink)}
.socials a:hover{background:var(--pink);color:#fff;transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}

/* CART DRAWER */
.drawer{position:fixed;top:0;right:-460px;bottom:0;width:440px;max-width:92vw;background:var(--cream);border-left:4px solid var(--ink);transition:right .25s steps(8);z-index:100;display:flex;flex-direction:column}
.drawer.open{right:0}
.drawer-head{padding:20px;border-bottom:4px solid var(--ink);display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:var(--yellow)}
.drawer-head h3{font-family:'Press Start 2P',monospace;font-size:13px;color:var(--yellow);letter-spacing:1.5px;text-transform:uppercase}
.close-btn{background:var(--pink);color:#fff;border:3px solid var(--cream);width:36px;height:36px;border-radius:6px;font-family:'Press Start 2P',monospace;font-size:14px;cursor:pointer}
.close-btn:hover{background:var(--pink-deep)}
.drawer-body{flex:1;padding:20px;overflow-y:auto}
.empty{color:var(--ink-soft);text-align:center;margin-top:50px;font-size:15px;font-weight:500}
.empty .pixel{font-size:9px;color:var(--ink);display:block;margin-top:14px;letter-spacing:2px}
.empty-emoji{font-size:48px;margin-bottom:12px;display:block}
.cart-item{display:flex;gap:14px;padding:12px;margin-bottom:10px;background:#fff;border:3px solid var(--ink);border-radius:6px;align-items:center;box-shadow:3px 3px 0 var(--ink)}
.cart-item-thumb{width:52px;height:52px;background:var(--sky-3);border:3px solid var(--ink);border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cart-item-thumb svg{width:80%;height:80%}
.cart-item-info{flex:1}
.cart-item-name{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--ink);letter-spacing:.5px;line-height:1.4}
.cart-item-price{color:var(--ink-soft);font-size:13px;margin-top:4px;font-weight:600}
.cart-item-remove{background:var(--pink-deep);color:#fff;border:2px solid var(--ink);width:30px;height:30px;border-radius:4px;cursor:pointer;font-family:'Press Start 2P',monospace;font-size:11px}
.drawer-foot{padding:20px;border-top:4px solid var(--ink);background:#fff}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px;font-family:'Press Start 2P',monospace;font-size:11px;color:var(--ink);letter-spacing:1px;text-transform:uppercase}
.total-amt{color:var(--pink-deep);font-size:18px}
.checkout{width:100%;background:var(--ink);color:var(--yellow);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--pink);padding:16px;font-family:'Press Start 2P',monospace;font-size:14px;letter-spacing:2px;cursor:pointer;border-radius:8px;text-transform:uppercase;transition:.1s}
.checkout:hover{background:var(--pink-deep);color:#fff}
.checkout:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--pink)}
.overlay{position:fixed;inset:0;background:rgba(26,17,64,.5);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:99}
.overlay.open{opacity:1;pointer-events:auto}

/* RESPONSIVE */
@media(max-width:880px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--cream);border-bottom:3px solid var(--ink);padding:14px;gap:8px;align-items:stretch}
  .nav-links.open{display:flex}
  .menu-toggle{display:inline-block}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hud{font-size:8px;letter-spacing:1px}
  .hud-stat{gap:4px}
}
@media(max-width:520px){
  section{padding:48px 16px}
  .form-wrap,.prose{padding:28px 20px}
  .foot-grid{grid-template-columns:1fr}
  nav.topnav{padding:10px 14px}
  .level-list li a{padding:16px 18px}
  .hud{padding:6px 12px}
  .hud-left,.hud-right{gap:10px}
}

/* === MOBILE / RESPONSIVE POLISH (added) === */
@media(max-width:760px){
  /* Tone down the heavy 3-layer text-shadows on mobile so glyphs stay legible */
  .mega-logo{
    text-shadow:3px 3px 0 var(--ink),6px 6px 0 var(--pink),9px 9px 0 var(--ink);
    letter-spacing:1px;
  }
  .mega-logo .l2{
    text-shadow:3px 3px 0 var(--ink),6px 6px 0 var(--orange),9px 9px 0 var(--ink);
  }
  .page-head h1{
    text-shadow:2px 2px 0 var(--ink),4px 4px 0 var(--pink),6px 6px 0 var(--ink);
    letter-spacing:1px;
  }
  /* Hide nav japanese tag — recovered horizontal space on mobile */
  .nav-jp{display:none}
  /* Trim HUD on mobile: keep coins + lvl + time, drop player/score/hearts */
  .hud-left:first-child{display:none}
  .hud-stat .heart{display:none}
  /* Title screen breathing room */
  .title-screen{min-height:auto;padding:32px 16px 56px}
  .title-screen .tagline{margin:18px 0 22px}
  .title-screen .jp-press{letter-spacing:3px;margin-bottom:24px}
  /* Floating decorative SVGs steal too much room — shrink + soften */
  .deco{opacity:.7}
  .deco-sun{width:80px;height:80px}
  .deco-flower{width:54px!important}
  .deco-star{width:44px!important}
  /* Cards: lighter offset shadows on small viewports */
  .dex-card{box-shadow:5px 5px 0 var(--ink)}
  .dex-card:nth-child(2n){box-shadow:5px 5px 0 var(--pink)}
  .dex-card:nth-child(3n){box-shadow:5px 5px 0 var(--yellow)}
  .dex-card:nth-child(4n){box-shadow:5px 5px 0 var(--green)}
  .dex-card:nth-child(5n){box-shadow:5px 5px 0 var(--lilac)}
  .dex-card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
  .level-list li a{box-shadow:4px 4px 0 var(--ink)}
  .level-list li:nth-child(2n) a{box-shadow:4px 4px 0 var(--pink)}
  .level-list li:nth-child(3n) a{box-shadow:4px 4px 0 var(--yellow)}
  .level-list li:nth-child(4n) a{box-shadow:4px 4px 0 var(--green)}
  .level-list li:nth-child(5n) a{box-shadow:4px 4px 0 var(--lilac)}
  /* Buttons stay tappable but trim padding so two CTAs fit on a phone row */
  .btn{font-size:12px;padding:14px 22px;letter-spacing:1.5px}
  /* Section title shadow lighter */
  .section-title{text-shadow:3px 3px 0 var(--pink)}
  /* Quest grid — already collapses, just clean up reward chips wrap */
  .quest{padding:18px 18px}
  .quest-info h3{font-size:11px;letter-spacing:.5px}
}

@media(max-width:520px){
  /* HUD: keep 1 line max */
  .hud{flex-wrap:nowrap;overflow:hidden}
  .hud .hud-stat{flex-shrink:0}
  /* Logo shouldn't tilt as hard on tiny screens (clipping) */
  .mega-logo{transform:rotate(-1deg)}
  .mega-logo .l2{transform:rotate(2deg)}
  /* CTA buttons: stack full-width for thumb reach */
  .title-cta{flex-direction:column!important;width:100%;max-width:280px;margin:0 auto}
  .title-cta .btn{width:100%;justify-content:center}
  /* Dex card: smaller numbers on tiny screens so one product fits cleanly */
  .dex-name{font-size:11px}
  .dex-meta{font-size:9px}
  .dex-price{font-size:16px}
  .add-btn{width:38px;height:38px;font-size:14px}
  /* Cart drawer + side menu fit small phones */
  .menu-panel,.drawer{width:88vw}
  .menu-panel-list a{font-size:11px;padding:14px 16px}
  /* Newsletter stack on very small */
  .newsletter{flex-direction:column;padding:8px}
  .newsletter input{width:100%;padding:12px 14px}
  .newsletter button{width:100%;padding:14px}
  /* CTA inner padding */
  .cta-section{padding:60px 16px}
  /* Page head padding */
  .page-head{padding:36px 16px 20px}
  /* Quest layout — collapse stat circle into header row, stack rest */
  .quest{grid-template-columns:auto 1fr;gap:14px;padding:16px}
  .quest-date{grid-row:1;grid-column:2;justify-self:start;display:inline-flex;gap:6px;padding:8px 12px}
  .quest-date .d{font-size:18px}
  .quest-date .m{margin:0;display:inline}
  .quest-info{grid-column:1/-1}
  .quest .btn{grid-column:1/-1;width:100%;justify-content:center}
  /* Form input+button comfy thumb size */
  .form-wrap input,.form-wrap textarea{padding:12px 14px;font-size:14px}
}

@media(max-width:380px){
  .mega-logo{font-size:48px;letter-spacing:0}
  .page-head h1{letter-spacing:0}
  .ticker{font-size:9px;padding:10px 0}
  .hud{font-size:7px;letter-spacing:.5px;padding:6px 10px}
  .logo{font-size:18px}
  .cart-btn{font-size:9px;padding:6px 10px}
}

/* === A11Y / FOCUS === */
:focus-visible{outline:3px solid var(--pink-deep);outline-offset:3px;border-radius:4px}
button:focus-visible,a:focus-visible{outline-color:var(--pink-deep)}
.btn:focus-visible,.cart-btn:focus-visible,.add-btn:focus-visible,.hamburger:focus-visible,.checkout:focus-visible{outline-offset:5px}

/* Skip link for keyboard users */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:var(--ink);color:var(--yellow);
  padding:12px 18px;border:3px solid var(--yellow);border-radius:6px;
  font-family:'Press Start 2P',monospace;font-size:11px;letter-spacing:1px;
  text-decoration:none;
}
.skip-link:focus{left:8px;top:8px}

/* === REDUCED-MOTION === */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .clouds{display:none}
  .deco{animation:none!important}
  .sprite{animation:none!important}
  .ticker-track{animation:none!important;justify-content:center;flex-wrap:wrap}
  .reveal{opacity:1!important;transform:none!important}
}

/* === SCROLL-REVEAL (used by shared.js IntersectionObserver) === */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1);
  will-change:opacity,transform;
}
.reveal.in{opacity:1;transform:none}
.reveal.delay-1{transition-delay:.08s}
.reveal.delay-2{transition-delay:.16s}
.reveal.delay-3{transition-delay:.24s}

/* === SCROLL HINT on title screen === */
.scroll-hint{
  margin-top:36px;
  font-family:'Press Start 2P',monospace;
  font-size:9px;letter-spacing:2px;
  color:var(--ink-soft);
  display:inline-flex;flex-direction:column;align-items:center;gap:6px;
  animation:scroll-hint-bob 2s ease-in-out infinite;
}
.scroll-hint .chev{font-size:12px;color:var(--pink-deep)}
@keyframes scroll-hint-bob{
  0%,100%{transform:translateY(0);opacity:.7}
  50%{transform:translateY(6px);opacity:1}
}

/* === BOOT / CRT POWER-ON === */
.boot{
  position:fixed;inset:0;z-index:99999;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.boot::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(127,207,111,.08) 0%,transparent 60%);
}
.boot .boot-text{
  font-family:'Press Start 2P',monospace;
  color:var(--green);font-size:11px;letter-spacing:2px;
  opacity:.85;
}
.boot .boot-line{
  position:absolute;left:0;right:0;
  height:50%;background:#fff;
  animation:boot-collapse .55s ease-in-out forwards;
  animation-delay:.45s;
}
.boot .boot-line.top{top:0;transform-origin:top}
.boot .boot-line.bot{bottom:0;transform-origin:bottom}
@keyframes boot-collapse{
  0%{transform:scaleY(0)}
  35%{transform:scaleY(1)}
  100%{transform:scaleY(0)}
}
.boot.gone{
  animation:boot-fade .35s ease-out forwards;
  animation-delay:.95s;
}
@keyframes boot-fade{to{opacity:0;visibility:hidden}}

/* === SUBTLE SHIMMER on mega-logo === */
.mega-logo{position:relative}

/* === KONAMI CONFETTI (triggered by shared.js) === */
.konami-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(60px);
  background:var(--ink);color:var(--yellow);
  border:3px solid var(--yellow);border-radius:8px;
  padding:14px 22px;
  font-family:'Press Start 2P',monospace;font-size:11px;letter-spacing:2px;
  box-shadow:5px 5px 0 var(--pink);
  z-index:10000;opacity:0;
  transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.2,1);
}
.konami-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* === IMPROVED NEWSLETTER feedback === */
.newsletter.done{background:var(--green);border-color:var(--ink)}
.newsletter.done input{display:none}
.newsletter.done button{background:var(--ink);color:var(--yellow);width:100%}

/* === Z-index/overflow safety === */
main{overflow-x:clip}

/* === COMPACT DEX GRID (shop) === */
.dex-grid.compact{
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:18px;
  max-width:1200px;
}
.dex-grid.compact .dex-card{
  cursor:pointer;
  transition:transform .15s,box-shadow .15s;
  box-shadow:5px 5px 0 var(--ink);
}
.dex-grid.compact .dex-card:nth-child(2n){box-shadow:5px 5px 0 var(--pink)}
.dex-grid.compact .dex-card:nth-child(3n){box-shadow:5px 5px 0 var(--yellow)}
.dex-grid.compact .dex-card:nth-child(4n){box-shadow:5px 5px 0 var(--green)}
.dex-grid.compact .dex-card:nth-child(5n){box-shadow:5px 5px 0 var(--lilac)}
.dex-grid.compact .dex-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.dex-grid.compact .dex-card:focus-visible{outline:3px solid var(--pink-deep);outline-offset:4px}
.dex-grid.compact .dex-head{font-size:8px;padding:6px 10px}
.dex-grid.compact .dex-head .lvl{font-size:7px;padding:2px 6px}
.dex-grid.compact .dex-name{font-size:10px;letter-spacing:.5px;line-height:1.35}
.dex-grid.compact .dex-meta{font-size:8px;letter-spacing:.5px;margin-bottom:10px}
.dex-grid.compact .dex-info{padding:12px 14px}
.dex-grid.compact .dex-foot{padding-top:10px;border-top:2px dashed var(--ink)}
.dex-grid.compact .dex-price{font-size:14px}
.dex-grid.compact .dex-price .cents{font-size:8px}
.dex-grid.compact .add-btn{width:34px;height:34px;font-size:14px;box-shadow:2px 2px 0 var(--pink)}
.dex-grid.compact .dex-tag{font-size:7px;padding:4px 7px;top:8px;left:8px}
.dex-grid.compact .dex-img-wrap{aspect-ratio:1}
.dex-grid.compact .dex-img{width:60%;height:60%}
@media(max-width:520px){
  .dex-grid.compact{grid-template-columns:repeat(2,1fr);gap:12px}
  .dex-grid.compact .dex-card{box-shadow:4px 4px 0 var(--ink)!important}
  .dex-grid.compact .dex-name{font-size:9px}
  .dex-grid.compact .dex-meta{font-size:7px}
  .dex-grid.compact .dex-price{font-size:13px}
  .dex-grid.compact .add-btn{width:30px;height:30px;font-size:12px}
  .dex-grid.compact .dex-info{padding:10px 12px}
}

/* === PRODUCT MODAL === */
.product-modal{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  padding:20px;
}
.product-modal.open{display:flex}
.product-modal-bg{
  position:absolute;inset:0;
  background:rgba(26,17,64,.7);
  backdrop-filter:blur(6px);
  animation:fade-in .25s ease-out;
}
.product-modal-card{
  position:relative;
  background:#fff;
  border:4px solid var(--ink);
  border-radius:14px;
  box-shadow:12px 12px 0 var(--pink);
  max-width:880px;width:100%;
  max-height:90vh;
  display:grid;grid-template-columns:1fr 1fr;
  overflow:hidden;
  animation:modal-pop .35s cubic-bezier(.2,.8,.2,1);
}
.product-modal-img{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  border-right:4px solid var(--ink);
  min-height:340px;
  overflow:hidden;
}
.product-modal-img::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(26,17,64,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,17,64,.05) 1px,transparent 1px);
  background-size:24px 24px;
}
.product-modal-img > .dex-img,
.product-modal-img > svg{
  width:62%;max-width:280px;height:auto;
  filter:drop-shadow(0 8px 0 rgba(26,17,64,.25));
  position:relative;z-index:1;
}
.product-modal-img .dex-tag{
  top:16px;left:16px;
  font-size:9px;padding:6px 10px;
  border-width:2px;
}
.product-modal-info{
  padding:0;
  overflow-y:auto;
  display:flex;flex-direction:column;
  max-height:90vh;
}
.product-modal-info .modal-head{
  background:var(--ink);color:var(--yellow);
  padding:14px 70px 14px 20px; /* extra right padding leaves room for the close × button */
  display:flex;justify-content:flex-start;align-items:center;gap:14px;
  font-family:'Press Start 2P',monospace;font-size:10px;
  letter-spacing:1.5px;
  border-bottom:4px solid var(--ink);
  flex-shrink:0;
}
.product-modal-info .modal-head .num{color:var(--cream);opacity:.8}
.product-modal-info .modal-head .lvl{
  background:var(--pink);color:var(--ink);
  padding:4px 10px;border-radius:4px;font-size:9px;
}
.product-modal-info .modal-body{
  padding:24px 28px;
  flex:1;
  overflow-y:auto;
}
.product-modal-info .modal-name{
  font-family:'Press Start 2P',monospace;
  font-size:18px;color:var(--ink);
  letter-spacing:1.5px;line-height:1.3;
  margin-bottom:8px;
}
.product-modal-info .modal-meta{
  font-family:'Press Start 2P',monospace;
  font-size:9px;color:var(--ink-soft);
  letter-spacing:1.5px;
  margin-bottom:18px;
}
.product-modal-info .modal-desc{
  font-size:14px;color:var(--ink);
  font-weight:500;line-height:1.6;
  margin-bottom:20px;
}
.product-modal-info .dex-stats{margin:0 0 22px;gap:8px;display:grid}
.product-modal-foot{
  padding:18px 24px;
  background:var(--cream);
  border-top:4px solid var(--ink);
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-shrink:0;
}
.product-modal-foot .dex-price{font-size:24px}
.product-modal-foot .dex-price .cents{font-size:11px}
.modal-add{
  background:var(--ink);color:var(--yellow);
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--pink);
  padding:14px 22px;
  font-family:'Press Start 2P',monospace;
  font-size:11px;letter-spacing:1.5px;
  border-radius:8px;cursor:pointer;
  transition:.1s;
}
.modal-add:hover{background:var(--pink);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.modal-add:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--pink)}
.product-modal-close{
  position:absolute;top:10px;right:10px;
  z-index:20;
  background:var(--pink);color:#fff;
  border:3px solid var(--cream);
  width:36px;height:36px;
  border-radius:8px;
  font-family:'Press Start 2P',monospace;
  font-size:14px;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  transition:.1s;
}
.product-modal-close:hover{background:var(--pink-deep);transform:rotate(90deg)}
.product-modal-close:active{transform:translate(2px,2px) rotate(90deg);box-shadow:1px 1px 0 var(--ink)}

@media(max-width:720px){
  .product-modal{padding:0}
  .product-modal-card{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    max-height:100vh;height:100%;
    border-radius:0;border:none;
    box-shadow:none;
  }
  .product-modal-img{
    min-height:240px;max-height:40vh;
    border-right:none;border-bottom:4px solid var(--ink);
  }
  .product-modal-img > .dex-img,
  .product-modal-img > svg{max-width:200px;width:55%}
  .product-modal-info{max-height:none}
  .product-modal-info .modal-name{font-size:14px}
  .product-modal-info .modal-body{padding:18px 20px}
  .product-modal-foot{padding:14px 18px}
  .product-modal-foot .dex-price{font-size:20px}
  .modal-add{padding:12px 16px;font-size:10px}
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes modal-pop{
  from{transform:scale(.88) translateY(20px);opacity:0}
  to{transform:none;opacity:1}
}
body.modal-open{overflow:hidden}

/* === GLITCH effect on mega-logo hover === */
@media(hover:hover){
  .mega-logo:hover{animation:logo-glitch .25s steps(2) infinite}
  .mega-logo:hover .l2{animation:logo-glitch .25s steps(2) infinite reverse}
}
@keyframes logo-glitch{
  0%   { text-shadow:5px 5px 0 var(--ink),10px 10px 0 var(--pink),15px 15px 0 var(--ink); transform:translate(0,0) rotate(-2deg); }
  25%  { text-shadow:-2px 5px 0 #00ffff,5px 5px 0 #ff00ff,15px 15px 0 var(--ink); transform:translate(2px,-1px) rotate(-2deg); }
  50%  { text-shadow:5px -2px 0 var(--ink),-3px 8px 0 var(--pink-deep),18px 13px 0 #00ffff; transform:translate(-2px,1px) rotate(-2deg); }
  75%  { text-shadow:8px 5px 0 #ff00ff,5px 12px 0 var(--ink),12px 8px 0 #00ffff; transform:translate(1px,2px) rotate(-2deg); }
  100% { text-shadow:5px 5px 0 var(--ink),10px 10px 0 var(--pink),15px 15px 0 var(--ink); transform:translate(0,0) rotate(-2deg); }
}
@media(prefers-reduced-motion:reduce){
  .mega-logo:hover{animation:none}
  .mega-logo:hover .l2{animation:none}
}

/* === HOVER reactions on landing decorations & mascot === */
@media(hover:hover){
  /* Decos become interactive */
  .deco{pointer-events:auto;cursor:pointer;transition:filter .2s}
  /* SUN — spin faster + yellow glow */
  .deco-sun:hover{animation:spin 1.2s linear infinite,glow-sun .5s alternate infinite}
  @keyframes glow-sun{from{filter:drop-shadow(0 0 0 var(--yellow))}to{filter:drop-shadow(0 0 14px var(--yellow))}}
  /* STAR — wiggle + green glow */
  .deco-star:hover{animation:wiggle .35s ease-in-out infinite,glow-grn .4s alternate infinite}
  @keyframes glow-grn{from{filter:drop-shadow(0 0 0 var(--green))}to{filter:drop-shadow(0 0 12px var(--green))}}
  /* BOLT — zap + glow */
  .deco-bolt:hover{animation:bolt-zap .15s steps(2) infinite,glow-yel .25s alternate infinite}
  @keyframes bolt-zap{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(8deg) scale(1.1)}}
  @keyframes glow-yel{from{filter:drop-shadow(0 0 0 var(--yellow))}to{filter:drop-shadow(0 0 14px var(--yellow))}}
  /* HEART — beat */
  .deco-heart:hover{animation:heart-beat .5s ease-in-out infinite}
  @keyframes heart-beat{0%,100%{transform:scale(1)}25%{transform:scale(1.25)}50%{transform:scale(.95)}75%{transform:scale(1.18)}}
  /* PEACE — spin + lilac glow */
  .deco-peace:hover{animation:spin 1s linear infinite,glow-lilac .5s alternate infinite}
  @keyframes glow-lilac{from{filter:drop-shadow(0 0 0 var(--lilac))}to{filter:drop-shadow(0 0 14px var(--lilac))}}
  /* MUSHROOM — bob + magenta glow */
  .deco-mushroom:hover{animation:bob 1s ease-in-out infinite,glow-pink .4s alternate infinite}
  @keyframes glow-pink{from{filter:drop-shadow(0 0 0 var(--pink))}to{filter:drop-shadow(0 0 12px var(--pink))}}
  /* PALM TREES — shake harder, glow teal */
  .deco-palm:hover{animation:palm-shake .25s ease-in-out infinite!important;filter:drop-shadow(0 0 12px var(--green))}
  @keyframes palm-shake{
    0%,100%{transform:rotate(var(--r,-3deg)) translateY(0)}
    25%{transform:rotate(calc(var(--r,-3deg) - 8deg)) translateY(-3px)}
    50%{transform:rotate(var(--r,-3deg)) translateY(-1px)}
    75%{transform:rotate(calc(var(--r,-3deg) + 8deg)) translateY(-3px)}
  }
  .deco-palm[style*="scaleX(-1)"]:hover{animation:palm-shake-flip .25s ease-in-out infinite!important}
  @keyframes palm-shake-flip{
    0%,100%{transform:scaleX(-1) rotate(var(--r,3deg)) translateY(0)}
    25%{transform:scaleX(-1) rotate(calc(var(--r,3deg) + 8deg)) translateY(-3px)}
    50%{transform:scaleX(-1) rotate(var(--r,3deg)) translateY(-1px)}
    75%{transform:scaleX(-1) rotate(calc(var(--r,3deg) - 8deg)) translateY(-3px)}
  }
  /* MASCOT pixel sprite — jumps + green glow */
  .sprite{cursor:pointer;transition:transform .15s}
  .sprite:hover{animation:sprite-jump .3s ease-out infinite,glow-grn .5s alternate infinite}
  @keyframes sprite-jump{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.05)}}
  /* VERIFIED stamp — full spin + magenta glow */
  .verified-stamp{cursor:pointer;pointer-events:auto;transition:filter .2s}
  .verified-stamp:hover{animation:stamp-spin 2s linear infinite!important;filter:drop-shadow(0 0 14px var(--pink-deep))}
  @keyframes stamp-spin{from{transform:rotate(-12deg)}to{transform:rotate(348deg)}}
}
@media(prefers-reduced-motion:reduce){
  .deco:hover,.sprite:hover,.verified-stamp:hover{animation:none!important;filter:none!important}
}

/* === TILT 3D — applied via JS, smooth transition out === */
.dex-grid.compact .dex-card,
.cat-tile{
  transform-style:preserve-3d;
  will-change:transform;
}
.dex-grid.compact .dex-card.tilting,
.cat-tile.tilting{
  transition:transform .05s linear;
}
.dex-grid.compact .dex-card:not(.tilting),
.cat-tile:not(.tilting){
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .15s;
}

/* === TIP POPUP === */
.tip-popup{
  position:fixed;
  bottom:24px;right:24px;max-width:320px;
  background:#fff;
  border:4px solid var(--ink);border-radius:10px;
  box-shadow:6px 6px 0 var(--pink);
  padding:14px 18px 14px 14px;
  z-index:80;
  display:flex;gap:10px;align-items:flex-start;
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
  color:var(--ink);line-height:1.5;
  animation:tip-in .35s cubic-bezier(.2,.8,.2,1);
}
.tip-popup.out{animation:tip-out .25s ease-in forwards}
.tip-popup .tip-icon{
  flex-shrink:0;width:36px;height:36px;
  background:var(--yellow);border:3px solid var(--ink);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;
}
.tip-popup .tip-content{flex:1}
.tip-popup .tip-label{
  font-family:'Press Start 2P',monospace;
  font-size:8px;letter-spacing:1.5px;color:var(--pink-deep);
  margin-bottom:4px;
}
.tip-popup .tip-close{
  position:absolute;top:6px;right:6px;
  background:transparent;border:none;cursor:pointer;
  font-family:'Press Start 2P',monospace;font-size:11px;
  color:var(--ink-soft);padding:4px 6px;
}
.tip-popup .tip-close:hover{color:var(--pink-deep)}
@keyframes tip-in{
  from{opacity:0;transform:translate(20px,10px) scale(.9)}
  to{opacity:1;transform:none}
}
@keyframes tip-out{
  to{opacity:0;transform:translate(20px,10px) scale(.9)}
}
@media(max-width:520px){
  .tip-popup{
    bottom:80px;left:14px;right:14px;max-width:none;
    font-size:12px;
  }
}

/* === ACHIEVEMENT TOAST === */
.achievement-toast{
  position:fixed;
  top:24px;left:50%;transform:translateX(-50%) translateY(-200%);
  z-index:10000;
  background:var(--ink);
  border:4px solid var(--yellow);
  border-radius:10px;
  box-shadow:6px 6px 0 var(--pink);
  padding:12px 20px;
  display:flex;align-items:center;gap:14px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.achievement-toast.show{transform:translateX(-50%) translateY(0)}
.achievement-toast .ach-icon{
  width:44px;height:44px;
  background:var(--yellow);border:3px solid var(--cream);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
}
.achievement-toast .ach-text{
  font-family:'Press Start 2P',monospace;
  color:var(--cream);
  font-size:9px;letter-spacing:1.5px;line-height:1.5;
}
.achievement-toast .ach-text .ach-name{
  color:var(--yellow);font-size:11px;display:block;margin-bottom:3px;
}
@media(max-width:520px){
  .achievement-toast{
    left:14px;right:14px;transform:translateY(-200%);max-width:none;
  }
  .achievement-toast.show{transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .achievement-toast{transition:opacity .3s}
  .achievement-toast.show{opacity:1;transform:translateX(-50%)}
}

/* === STREET FIGHTER CHARACTER SELECT === */
.char-select-screen{
  padding:32px 16px 80px!important;
  position:relative;z-index:5;
  text-align:center;
}
.char-select-header{margin-bottom:30px}
.char-select-eyebrow{
  font-family:'Press Start 2P',monospace;
  font-size:10px;letter-spacing:3px;
  color:var(--cyan);
  text-shadow:0 0 10px rgba(0,217,255,.6);
  margin-bottom:14px;
}
.char-select-title{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(20px,4vw,40px);
  color:var(--cream);
  text-shadow:
    3px 3px 0 var(--ink),
    6px 6px 0 var(--pink),
    9px 9px 0 var(--cyan);
  letter-spacing:3px;
  margin:0 0 12px;
}
.char-select-jp{
  font-family:'Noto Sans JP',sans-serif;font-weight:900;
  font-size:14px;color:var(--cyan);letter-spacing:5px;
  text-shadow:0 0 10px rgba(0,217,255,.5);
}
.char-select-footer{
  margin-top:30px;
  font-family:'Press Start 2P',monospace;
  font-size:11px;letter-spacing:3px;
  color:var(--cream);
  display:flex;justify-content:center;align-items:center;gap:14px;
}
.char-select-footer .blink{color:var(--pink);font-size:14px}
.char-select-footer .jp{font-family:'Noto Sans JP',sans-serif;font-weight:700;color:var(--cyan)}

.char-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  max-width:1100px;margin:0 auto;
}
.char-card{
  position:relative;
  background:
    radial-gradient(ellipse 100% 80% at 50% 35%,
      color-mix(in srgb, var(--char-color) 70%, #fff) 0%,
      var(--char-color) 35%,
      color-mix(in srgb, var(--char-color) 55%, #0e0a2c) 75%,
      #0e0a2c 100%);
  border:4px solid var(--ink);
  border-radius:8px;
  padding:0;
  cursor:pointer;
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:
    inset 0 0 0 2px var(--yellow),
    inset 0 0 0 5px var(--ink),
    inset 0 -50px 80px -30px rgba(0,0,0,.55),
    5px 5px 0 var(--ink),
    0 0 0 1px rgba(0,0,0,.4);
  transition:transform .15s cubic-bezier(.3,.8,.4,1), box-shadow .15s;
  font-family:'Press Start 2P',monospace;
  animation:char-idle 3.6s ease-in-out infinite;
}
.char-card::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(0,0,0,.08) 3px,rgba(0,0,0,.08) 4px),
    radial-gradient(circle at 50% 40%, transparent 40%, rgba(0,0,0,.35) 100%);
  pointer-events:none;
  z-index:1;
}
.char-card::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--char-color) 60%, #fff) 0%, transparent 60%);
  opacity:0;mix-blend-mode:screen;
  pointer-events:none;
  transition:opacity .25s;
  z-index:2;
}
@keyframes char-idle{
  0%,100%{ transform:translateY(0) }
  50%   { transform:translateY(-2px) }
}
.char-card:hover{
  transform:translate(-3px,-5px) scale(1.05);
  box-shadow:
    inset 0 0 0 2px var(--yellow),
    inset 0 0 0 5px var(--ink),
    inset 0 -50px 80px -30px rgba(0,0,0,.4),
    8px 10px 0 var(--ink),
    0 0 30px var(--char-color),
    0 0 60px color-mix(in srgb, var(--char-color) 50%, transparent);
  animation-play-state:paused;
  z-index:3;
}
.char-card:hover::after{ opacity:.5 }
.char-card:active{
  transform:translate(2px,2px) scale(.97);
  box-shadow:
    inset 0 0 0 2px var(--yellow),
    inset 0 0 0 5px var(--ink),
    2px 2px 0 var(--ink),
    0 0 50px var(--char-color);
}
.char-card.is-selected{
  animation:char-selected-flash .35s ease-out;
  z-index:5;
}
@keyframes char-selected-flash{
  0%   { filter:brightness(1)   saturate(1)   }
  35%  { filter:brightness(3.5) saturate(2.5) }
  100% { filter:brightness(1)   saturate(1)   }
}
.char-card:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.char-card-num{
  position:absolute;top:8px;left:8px;
  font-family:'Bagel Fat One',sans-serif;
  font-size:13px;color:var(--yellow);
  letter-spacing:1px;
  background:var(--ink);
  padding:2px 8px 1px;border-radius:3px;
  border:2px solid var(--yellow);
  -webkit-text-stroke:.5px var(--ink);
  text-shadow:1px 1px 0 var(--ink);
  z-index:4;
}
.char-card-tag{
  position:absolute;top:8px;right:8px;
  font-family:'Press Start 2P',monospace;
  font-size:7px;letter-spacing:1px;
  background:var(--ink);color:var(--yellow);
  padding:4px 6px;border-radius:3px;
  border:2px solid var(--yellow);
  text-shadow:1px 1px 0 rgba(0,0,0,.5);
  z-index:4;
}
.char-card-tag.new{background:var(--green-deep);color:#fff}
.char-card-tag.deal{background:var(--pink-deep);color:#fff}
.char-card-portrait{
  flex:1;display:flex;align-items:flex-end;justify-content:center;
  padding:14px 8px 0;
  position:relative;z-index:1;
  filter:drop-shadow(0 6px 0 rgba(14,10,44,.45));
  min-height:180px;
}
.char-card-portrait img{
  display:block;
  width:auto;
  height:170px;
  max-width:100%;
  object-fit:contain;
  transition:transform .2s;
}
@media(max-width:520px){
  .char-card-portrait{min-height:130px}
  .char-card-portrait img{height:120px}
}
.char-card:hover .char-card-portrait img{
  animation:char-bob .55s ease-in-out infinite;
}
@keyframes char-bob{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-10px) scale(1.04)}
}
.char-card-info{
  background:linear-gradient(180deg, color-mix(in srgb, var(--ink) 92%, var(--char-color)) 0%, var(--ink) 100%);
  color:var(--cream);
  padding:8px 8px 12px;
  border-top:3px solid var(--yellow);
  text-align:center;
  position:relative;z-index:3;
  box-shadow:inset 0 2px 0 rgba(0,0,0,.4);
}
.char-card-name{
  font-family:'Bagel Fat One',sans-serif;
  font-size:22px;
  font-weight:400;
  color:var(--cream);
  letter-spacing:1.5px;
  text-shadow:
    2px 2px 0 var(--char-color),
    3px 3px 0 rgba(0,0,0,.6);
  margin-bottom:3px;
  line-height:1;
  -webkit-text-stroke:.5px var(--ink);
}
.char-card-tagline{
  font-family:'Press Start 2P',monospace;
  font-size:7px;color:var(--yellow);
  letter-spacing:1.5px;line-height:1.4;
  text-transform:uppercase;
  text-shadow:1px 1px 0 var(--ink);
  opacity:.92;
}

@media(max-width:880px){
  .char-grid{grid-template-columns:repeat(3,1fr);gap:12px}
}
@media(max-width:520px){
  .char-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .char-card-name{font-size:16px;letter-spacing:1px}
  .char-card-tagline{font-size:6px}
  .char-card-num{font-size:10px;padding:1px 5px}
  .char-card-tag{font-size:6px;padding:2px 4px}
  .char-select-title{font-size:22px;letter-spacing:1px}
  .char-select-eyebrow{font-size:9px}
}
@media(max-width:380px){
  .char-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .char-card-portrait{padding:12px 6px 6px}
  .char-card-portrait svg{width:80px!important;height:80px!important}
}
@media(prefers-reduced-motion:reduce){
  .char-card:hover .char-card-portrait svg{animation:none}
  .char-card:hover{transform:none}
}

/* === SPLASH MODE — shown first, hides everything else === */
body.splash-mode{overflow:hidden}
body:not(.splash-mode) .splash{display:none!important}
body.splash-mode > main > .title-screen,
body.splash-mode > main > footer,
body.splash-mode .audio-widget,
body.splash-mode .hud,
body.splash-mode nav.topnav,
body.splash-mode .clouds,
body.splash-mode .menu-panel,
body.splash-mode .menu-overlay,
body.splash-mode .drawer,
body.splash-mode .overlay,
body.splash-mode #product-modal,
body.splash-mode .skip-link,
body.splash-mode .tip-popup,
body.splash-mode .achievement-toast,
body.splash-mode .konami-toast{display:none!important}

.splash{
  position:relative;z-index:2;
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:24px;padding:28px 20px;
  text-align:center;
  background:
    radial-gradient(ellipse at 25% 80%, rgba(255,31,143,.35) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 20%, rgba(0,217,255,.28) 0%, transparent 55%),
    linear-gradient(180deg, #0c0826 0%, #2a1454 50%, #0c0826 100%);
}

/* === SF1 ARCADE — full screen scene with HUD, fighters, brand at bottom === */
.sf-arcade{
  background:
    radial-gradient(ellipse at center, #2a1454 0%, #0c0826 70%, #0e0a2c 100%) !important;
  image-rendering:pixelated;
  padding:0!important;gap:0!important;
  min-height:100vh;
  display:flex!important;flex-direction:column!important;
  justify-content:center!important;
  align-items:center!important;
}
/* Arcade cabinet frame holding the scene screenshot */
.sf-screen-wrap{
  flex:1 1 auto;
  display:flex;align-items:center;justify-content:center;
  width:100%;
  padding:14px 16px 8px;
  min-height:0;
}
.sf-screen-cab{
  background:#0e0a2c;
  border:5px solid var(--ink);
  border-radius:6px;
  padding:5px;
  box-shadow:
    inset 0 0 0 2px var(--yellow),
    6px 6px 0 var(--pink),
    10px 10px 0 var(--ink),
    0 0 40px rgba(255,210,63,.22);
  max-width:min(680px, 88vw);
  width:auto;
}
.sf-screen-img{
  display:block;
  width:100%;
  height:auto;
  max-height:46vh;        /* smaller: leaves room for the logo below */
  object-fit:contain;
  image-rendering:pixelated;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
}
@media(max-width:520px){
  .sf-screen-wrap{padding:14px 10px}
  .sf-screen-cab{padding:4px;box-shadow:inset 0 0 0 2px var(--yellow),4px 4px 0 var(--pink),8px 8px 0 var(--ink)}
}
/* Top HUD bar (P1 / FIGHT! / HI) */
.sf-hud-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 16px;
  background:#0e0a2c;
  border-bottom:3px solid var(--ink);
  font-family:'Press Start 2P',monospace;
  font-size:11px;letter-spacing:2px;
  flex-shrink:0;
}
.sf-hud-block{display:flex;align-items:center;gap:8px}
.sf-hud-lbl{color:var(--cream);opacity:.8}
.sf-hud-val{color:var(--yellow)}
.sf-hud-fight{
  color:var(--yellow);
  font-size:14px;letter-spacing:5px;
  text-shadow:2px 2px 0 var(--red), -1px -1px 0 var(--red);
}
/* Health bars */
.sf-health-row{
  display:flex;align-items:center;gap:14px;
  padding:6px 16px 10px;
  background:#0e0a2c;
  flex-shrink:0;
}
.sf-name-block{flex:1;display:flex;flex-direction:column;gap:4px}
.sf-name-block.right{align-items:flex-end}
.sf-fighter-name{
  font-family:'Press Start 2P',monospace;
  font-size:10px;letter-spacing:2px;
  color:var(--yellow);
  text-shadow:1px 1px 0 var(--ink);
}
.sf-health-bar{
  width:100%;height:14px;
  background:#000;
  border:2px solid var(--cream);
  border-radius:2px;
  overflow:hidden;
  position:relative;
}
.sf-health-fill{
  height:100%;width:78%;
  background:linear-gradient(90deg,#7fcf6f 0%, #ffd23f 60%, #ff7a3d 100%);
  position:relative;
  transition:width 1s;
  animation:sf-health-pulse 1.5s ease-in-out infinite;
}
.sf-health-fill.right{
  width:62%;
  background:linear-gradient(90deg,#7fcf6f 0%, #ffd23f 60%, #ff7a3d 100%);
}
.sf-health-fill::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0,transparent 4px,rgba(0,0,0,.15) 4px,rgba(0,0,0,.15) 5px);
}
@keyframes sf-health-pulse{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.15)}
}
.sf-vs-mid{
  font-family:'Bowlby One',sans-serif;
  font-size:24px;color:var(--cream);
  letter-spacing:2px;
  text-shadow:2px 2px 0 var(--red);
  flex-shrink:0;padding:0 6px;
}

/* Stage scene container — transparent so the .sf-arcade SF1 bg shows through */
.sf-stage{
  position:relative;
  flex:1 1 auto;
  min-height:420px !important;
  overflow:hidden;
  background:transparent !important;
}
.sf-stage-img{
  display:block !important;
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  image-rendering:pixelated;
  pointer-events:none;
  z-index:1;
}
@media(max-width:520px){
  .sf-stage{min-height:320px !important}
}
.sf-stage-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}
/* FIGHT! callout in middle */
.sf-fight-text{
  position:absolute;
  top:18%;left:50%;
  transform:translateX(-50%) rotate(-3deg);
  font-family:'Bowlby One',sans-serif;
  font-size:clamp(38px,7vw,80px);
  color:var(--yellow);
  letter-spacing:6px;
  text-shadow:
    4px 4px 0 var(--red),
    8px 8px 0 var(--ink),
    0 0 24px var(--yellow);
  z-index:5;
  pointer-events:none;
  animation:sf-fight-pop 1s ease-in-out infinite;
}
@keyframes sf-fight-pop{
  0%,100%{transform:translateX(-50%) rotate(-3deg) scale(1);opacity:1}
  50%{transform:translateX(-50%) rotate(-3deg) scale(1.12);opacity:.9}
}
/* HD Fighter portraits in front of the stage */
.sf-fighter-stage{
  position:absolute;
  bottom:0;
  height:85%;
  z-index:6;
  filter:drop-shadow(6px 8px 0 rgba(14,10,44,.65)) drop-shadow(0 0 12px rgba(255,210,63,.25));
  display:flex;align-items:flex-end;
}
.sf-fighter-img{
  display:block;
  height:100%;
  width:auto;
  max-width:42vw;
  object-fit:contain;
  object-position:center bottom;
  image-rendering:auto;
}
.sf-fighter-stage-l{
  left:2%;
  animation:sf-fighter-bob 1.6s ease-in-out infinite;
}
.sf-fighter-stage-r{
  right:2%;
  transform:scaleX(-1);
  animation:sf-fighter-bob-r 1.6s ease-in-out infinite;
  animation-delay:.8s;
}
@media(max-width:520px){
  .sf-fighter-img{max-width:46vw}
  .sf-fighter-stage{height:75%}
}
@keyframes sf-fighter-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes sf-fighter-bob-r{
  0%,100%{transform:scaleX(-1) translateY(0)}
  50%{transform:scaleX(-1) translateY(-6px)}
}

/* Bottom HUD (credit + start) */
.sf-bottom-hud{
  display:flex;justify-content:center;align-items:center;
  padding:6px 16px;
  background:#0e0a2c;
  border-top:3px solid var(--ink);
  flex-shrink:0;
  gap:14px;
}
.sf-credit{
  font-family:'Press Start 2P',monospace;
  font-size:10px;letter-spacing:2px;
  color:var(--cream);opacity:.8;
}
.sf-start-btn-arcade{
  background:var(--red);
  color:var(--cream);
  border:3px solid var(--cream);
  box-shadow:
    inset 0 0 0 2px var(--ink),
    4px 4px 0 var(--ink),
    0 0 24px rgba(255,52,80,.7);
  padding:14px 32px;
  font-family:'Press Start 2P',monospace;
  font-size:13px;letter-spacing:3px;
  border-radius:4px;
  cursor:pointer;
  transition:transform .12s, box-shadow .12s;
  animation:sf-start-pulse 1.2s ease-in-out infinite;
}
.sf-start-btn-arcade .arrow{color:var(--yellow);margin-right:6px}
.sf-start-btn-arcade:hover{
  background:var(--yellow);color:var(--ink);
  animation-play-state:paused;
  box-shadow:
    inset 0 0 0 2px var(--ink),
    4px 4px 0 var(--ink),
    0 0 32px rgba(255,210,63,.9);
}
.sf-start-btn-arcade:active{
  transform:translate(2px,2px);
  box-shadow:
    inset 0 0 0 2px var(--ink),
    2px 2px 0 var(--ink);
}
@keyframes sf-start-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}

/* Brand title at the bottom — main marquee */
.sf-brand-title{
  display:flex;flex-direction:column;align-items:center;
  gap:6px;padding:18px 16px 22px;
  background:linear-gradient(180deg,#0e0a2c 0%,#150a3a 100%);
  border-top:4px solid var(--ink);
  text-align:center;
  flex-shrink:0;
  margin:0;
  position:relative;
  overflow:hidden;
}
.sf-brand-title::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    transparent 0,transparent 7px,
    rgba(255,210,63,.05) 7px,rgba(255,210,63,.05) 8px);
  pointer-events:none;
}
/* === GOLDEN STATE logo IMG in nav + footer === */
a.logo.logo-img{
  display:inline-flex;align-items:center;
  height:46px;
  text-decoration:none;
  text-shadow:none;
}
a.logo.logo-img img{
  height:100%;width:auto;display:block;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.5));
}
footer .foot-brand a.logo.logo-img{height:60px;margin-bottom:8px}
@media(max-width:520px){
  a.logo.logo-img{height:38px}
  footer .foot-brand a.logo.logo-img{height:50px}
}

/* === GOLDEN STATE official logo image — SF arcade style === */
.sf-brand-logo{
  padding:6px 16px 16px !important;
  background:transparent !important;
  border-top:none !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  gap:4px;
  flex-shrink:0;
}
.sf-brand-logo::before{display:none !important}
.sf-brand-img{
  display:block;
  width:auto;
  max-width:min(440px, 78vw);
  height:auto;
  max-height:22vh;
  object-fit:contain;
  /* Subtle warm glow + breathing animation for the arcade feel */
  filter:
    drop-shadow(0 0 18px rgba(255,210,63,.35))
    drop-shadow(0 6px 0 rgba(0,0,0,.4));
  animation:logo-pulse 2.4s ease-in-out infinite;
}
@keyframes logo-pulse{
  0%,100%{
    filter:drop-shadow(0 0 14px rgba(255,210,63,.3)) drop-shadow(0 6px 0 rgba(0,0,0,.4));
    transform:scale(1);
  }
  50%{
    filter:drop-shadow(0 0 32px rgba(255,138,61,.55)) drop-shadow(0 0 16px rgba(232,68,47,.4)) drop-shadow(0 6px 0 rgba(0,0,0,.5));
    transform:scale(1.03);
  }
}
@media(max-width:520px){
  .sf-brand-img{max-width:92vw;max-height:24vh}
}
@media(prefers-reduced-motion:reduce){
  .sf-brand-img{animation:none}
}

.sf-brand-word{
  font-family:'Bagel Fat One','Bowlby One',sans-serif;
  font-weight:400;                /* Bagel Fat One only ships at 400 — already chunky */
  font-size:clamp(56px,13vw,160px);
  font-style:italic;
  letter-spacing:-2px;
  line-height:.82;
  /* Iconic SF gradient: yellow top → red bottom */
  background:linear-gradient(180deg,
    #fff5b8 0%,
    #ffe14a 14%,
    #ffd23f 32%,
    #ffa233 50%,
    #ff6a26 70%,
    #e8442f 86%,
    #b81a1a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  /* Thick black outline */
  -webkit-text-stroke:6px #0a0a14;
  paint-order:stroke fill;
  /* Massive deep shadow + warm glow */
  filter:
    drop-shadow(0 0 1px #0a0a14)
    drop-shadow(6px 8px 0 #0a0a14)
    drop-shadow(0 0 24px rgba(255,138,61,.45));
  display:inline-block;
  position:relative;
  z-index:1;
  text-transform:uppercase;
}
/* "GOLDEN" — leans left, top of stack */
.sf-brand-word-1{
  transform:rotate(-5deg) skewX(-11deg);
  align-self:center;
  margin-bottom:-26px;          /* heavy overlap with the line below */
  z-index:2;
}
/* "STATE" — leans right, sits below GOLDEN with overlap */
.sf-brand-word-2{
  transform:rotate(3deg) skewX(-11deg);
  align-self:center;
  margin-top:0;
}
@media(max-width:760px){
  .sf-brand-word{font-size:64px;-webkit-text-stroke:5px #0a0a14}
  .sf-brand-word-1{margin-bottom:-16px}
}
@media(max-width:520px){
  .sf-brand-word{font-size:48px;-webkit-text-stroke:4px #0a0a14;letter-spacing:-1px}
  .sf-brand-word-1{margin-bottom:-12px}
}

/* legacy keep — sf-brand-line1 if used elsewhere */
.sf-brand-line1{
  font-family:'Bowlby One',sans-serif;
  font-size:clamp(40px,9vw,90px);
  color:#e8442f;
  font-style:italic;
  transform:skewX(-9deg);
  display:inline-block;
  -webkit-text-stroke:3px #0a0a14;
  line-height:1.05;
  position:relative;z-index:1;
}
.sf-brand-line2{
  font-family:'Bagel Fat One','Bowlby One',sans-serif;
  font-size:clamp(14px,2.6vw,22px);
  font-style:italic;
  letter-spacing:2px;
  background:linear-gradient(180deg, #fff5b8 0%, #ffd23f 50%, #ff8a3d 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  -webkit-text-stroke:2px #0a0a14;
  paint-order:stroke fill;
  transform:skewX(-11deg);
  display:inline-block;
  filter:drop-shadow(2px 2px 0 #0a0a14);
  margin-top:4px;
  position:relative;z-index:1;
}
.sf-brand-jp{
  font-family:'Noto Sans JP',sans-serif;font-weight:900;
  font-size:clamp(11px,1.8vw,15px);
  color:var(--cyan);letter-spacing:6px;
  text-shadow:0 0 8px rgba(0,217,255,.5);
  position:relative;z-index:1;
}

/* Mobile tweaks */
@media(max-width:760px){
  .sf-fighter-stage svg{width:120px!important;height:120px!important}
  .sf-fight-text{font-size:42px;letter-spacing:3px}
  .sf-hud-row,.sf-bottom-hud{padding:6px 10px;gap:8px}
  .sf-hud-row{font-size:9px;letter-spacing:1px}
  .sf-hud-fight{font-size:12px;letter-spacing:3px}
  .sf-fighter-name{font-size:9px}
  .sf-vs-mid{font-size:18px}
  .sf-credit{font-size:8px;letter-spacing:1px}
  .sf-start-btn-arcade{padding:10px 18px;font-size:11px;letter-spacing:2px}
  .sf-brand-line1{font-size:38px}
  .sf-brand-line2{font-size:14px;letter-spacing:5px}
}
@media(max-width:520px){
  .sf-fighter-stage svg{width:90px!important;height:90px!important}
  .sf-fighter-stage-l{left:4%}
  .sf-fighter-stage-r{right:4%}
  .sf-fight-text{font-size:32px;letter-spacing:2px}
  .sf-hud-fight{display:none}
  .sf-credit:last-of-type{display:none}
}
@media(prefers-reduced-motion:reduce){
  .sf-fight-text,.sf-fighter-stage-l,.sf-fighter-stage-r,.sf-start-btn-arcade,.sf-health-fill{animation:none!important}
}

/* === STREET FIGHTER 1 ARCADE-FLYER SPLASH (legacy keyframes kept for compat) === */
.sf-splash{
  background:
    radial-gradient(ellipse at center 70%, #ff7a3d 0%, #c41a7a 30%, #5e1a7a 60%, #0c0826 100%);
  overflow:hidden;
  gap:18px!important;
}
/* Sunset rays — repeating-conic mask */
.sf-rays{
  position:absolute;
  bottom:-20vh;left:50%;
  width:200vw;height:120vh;
  transform:translateX(-50%);
  background:repeating-conic-gradient(
    from 0deg at 50% 100%,
    rgba(255,210,63,.18) 0deg 6deg,
    transparent 6deg 16deg);
  pointer-events:none;z-index:0;
  animation:sf-rays-spin 60s linear infinite;
}
@keyframes sf-rays-spin{to{transform:translateX(-50%) rotate(360deg)}}
/* Horizon line */
.sf-horizon{
  position:absolute;
  bottom:32%;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent 0%,#ffd23f 30%,#ff8a3d 50%,#ffd23f 70%,transparent 100%);
  box-shadow:0 0 14px #ffd23f, 0 0 28px #ff8a3d;
  z-index:1;
}
/* Corner lightning bolts */
.sf-bolt{
  position:absolute;width:60px;height:120px;
  z-index:3;filter:drop-shadow(0 0 12px var(--yellow));
  animation:sf-bolt-blink 1.2s steps(2) infinite;
}
.sf-bolt-l{top:8%;left:6%;transform:rotate(-12deg)}
.sf-bolt-r{top:8%;right:6%;transform:scaleX(-1) rotate(-12deg)}
@keyframes sf-bolt-blink{50%{opacity:.4}}

.sf-tagline{
  position:relative;z-index:5;
  font-family:'Press Start 2P',monospace;
  font-size:9px;letter-spacing:5px;
  color:var(--cyan);
  text-shadow:0 0 8px rgba(0,217,255,.7), 1px 1px 0 var(--ink);
  margin-bottom:6px;
}

.sf-arena{
  position:relative;z-index:5;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,3vw,32px);
  width:100%;
}
.sf-fighter{
  flex:0 0 auto;
  filter:drop-shadow(4px 4px 0 var(--ink)) drop-shadow(0 0 18px rgba(255,210,63,.4));
  animation:sf-fighter-bob 1.4s ease-in-out infinite;
}
.sf-fighter-r{animation-delay:.7s;transform:scaleX(-1)}
@keyframes sf-fighter-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
.sf-fighter-r{
  animation:sf-fighter-bob-r 1.4s ease-in-out infinite;
  animation-delay:.7s;
}
@keyframes sf-fighter-bob-r{
  0%,100%{transform:scaleX(-1) translateY(0)}
  50%{transform:scaleX(-1) translateY(-8px)}
}
.sf-fighter svg{display:block}
@media(max-width:760px){
  .sf-fighter svg{width:90px!important;height:90px!important}
}
@media(max-width:520px){
  .sf-fighter svg{width:72px!important;height:72px!important}
  .sf-bolt{width:42px;height:80px}
  .sf-bolt-l{top:5%;left:3%}
  .sf-bolt-r{top:5%;right:3%}
}

.sf-title{
  position:relative;
  font-size:clamp(48px,11vw,140px)!important;
  margin:0!important;
  flex:1;min-width:0;
}
.sf-title{
  color:var(--yellow);
  text-shadow:
    3px 3px 0 var(--ink),
    -3px -3px 0 var(--ink),
    3px -3px 0 var(--ink),
    -3px 3px 0 var(--ink),
    6px 6px 0 var(--pink-deep),
    9px 9px 0 var(--ink),
    12px 12px 0 var(--cyan);
}
.sf-title .l2{
  color:var(--cream);
  text-shadow:
    3px 3px 0 var(--ink),
    -3px -3px 0 var(--ink),
    3px -3px 0 var(--ink),
    -3px 3px 0 var(--ink),
    6px 6px 0 var(--pink-deep),
    9px 9px 0 var(--ink),
    12px 12px 0 var(--cyan);
}
.sf-cbd{
  display:block;
  font-family:'Press Start 2P',monospace;
  font-size:clamp(14px,2.5vw,28px);
  color:var(--cream);
  letter-spacing:6px;
  margin-top:14px;
  text-shadow:
    2px 2px 0 var(--ink),
    4px 4px 0 var(--pink-deep);
  transform:rotate(0)!important;
}

.sf-vs{
  position:relative;z-index:5;
  font-family:'Bowlby One',sans-serif;
  font-size:clamp(20px,3.5vw,38px);
  color:var(--cream);
  letter-spacing:6px;
  text-shadow:3px 3px 0 var(--ink),6px 6px 0 var(--pink-deep);
  margin:0 0 4px;
}

/* SF arcade red START button */
.sf-start-btn{
  position:relative;z-index:5;
  background:var(--red)!important;
  color:var(--cream)!important;
  border:5px solid var(--ink)!important;
  box-shadow:
    inset 0 0 0 3px var(--cream),
    0 0 0 6px var(--red),
    8px 8px 0 6px var(--ink),
    0 0 30px var(--red)!important;
  padding:22px 56px!important;
  font-size:clamp(18px,3vw,28px)!important;
  letter-spacing:5px!important;
  border-radius:6px!important;
}
.sf-start-btn .arrow{color:var(--yellow)!important;text-shadow:2px 2px 0 var(--ink)}
.sf-start-btn:hover{
  background:var(--yellow)!important;
  color:var(--ink)!important;
  box-shadow:
    inset 0 0 0 3px var(--ink),
    0 0 0 6px var(--yellow),
    8px 8px 0 6px var(--ink),
    0 0 40px var(--yellow)!important;
  animation-play-state:paused;
}
.sf-start-btn:active{
  transform:translate(4px,4px);
  box-shadow:
    inset 0 0 0 3px var(--cream),
    0 0 0 6px var(--red),
    4px 4px 0 6px var(--ink)!important;
}

@media(max-width:520px){
  .sf-arena{flex-wrap:wrap}
  .sf-title{font-size:48px!important}
  .sf-cbd{font-size:14px;letter-spacing:4px}
}
@media(prefers-reduced-motion:reduce){
  .sf-rays{animation:none}
  .sf-fighter,.sf-fighter-r{animation:none!important}
  .sf-bolt{animation:none}
}
.splash-logo{
  font-size:clamp(64px,15vw,170px)!important;
  margin-bottom:0!important;
}
.splash-jp{
  font-family:'Noto Sans JP',sans-serif;font-weight:900;
  font-size:clamp(14px,2vw,20px);
  color:var(--cyan);letter-spacing:6px;
  text-shadow:0 0 14px rgba(0,217,255,.6);
}
.splash-copy{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  font-family:'Press Start 2P',monospace;
  font-size:9px;color:rgba(255,240,219,.5);
  letter-spacing:2px;
  white-space:nowrap;
}
.splash-start-btn{
  background:var(--pink);
  color:var(--cream);
  border:4px solid var(--cream);
  box-shadow:
    0 0 0 4px var(--pink),
    8px 8px 0 4px var(--cyan),
    16px 16px 0 4px var(--ink);
  padding:24px 56px;
  font-family:'Press Start 2P',monospace;
  font-size:clamp(16px,2.4vw,22px);
  letter-spacing:3px;
  border-radius:14px;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s;
  animation:splash-pulse 1.6s ease-in-out infinite;
}
.splash-start-btn .arrow{color:var(--yellow);margin-right:8px}
.splash-start-btn:hover{
  background:var(--pink-deep);
  box-shadow:
    0 0 0 4px var(--pink-deep),
    8px 8px 0 4px var(--yellow),
    16px 16px 0 4px var(--ink);
  animation-play-state:paused;
}
.splash-start-btn:active{
  transform:translate(4px,4px);
  box-shadow:
    0 0 0 4px var(--pink),
    4px 4px 0 4px var(--cyan),
    8px 8px 0 4px var(--ink);
}
@keyframes splash-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}
@media(max-width:520px){
  .splash-start-btn{padding:18px 36px;font-size:15px}
  .splash{gap:28px}
}
@media(prefers-reduced-motion:reduce){
  .splash-start-btn{animation:none}
}

/* === ARCADE STAGE PARALLAX (landing background) === */
.stage-parallax{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
  opacity:1; transition:opacity .6s ease;
}
body.splash-mode .stage-parallax{ opacity:0 }

/* Setting sun — far back glow */
.stage-sun{
  position:absolute;
  left:50%; bottom:24%;
  width:520px; height:520px;
  transform:translate(-50%, 50%);
  background:
    radial-gradient(circle, #ffd23f 0%, #ff8a3d 18%, #ff1f8f 38%, transparent 62%);
  filter:blur(2px);
  opacity:.85;
  animation:sun-pulse 6s ease-in-out infinite;
  will-change:transform;
}
@keyframes sun-pulse{
  0%,100%{ filter:blur(2px) brightness(1)   }
  50%   { filter:blur(4px) brightness(1.15) }
}

/* Skyline silhouette layer */
.stage-skyline{
  position:absolute; left:0; right:0; bottom:0;
  height:55%;
  pointer-events:none;
  will-change:transform;
  filter:drop-shadow(0 0 20px rgba(255,31,143,.4));
}
.stage-skyline svg{ width:100%; height:100%; display:block }

/* Neon perspective floor (foreground checker) */
.stage-floor{
  position:absolute; left:-10%; right:-10%; bottom:-2%;
  height:34%;
  background-image:
    linear-gradient(rgba(255,31,143,.55) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(255,31,143,.55) 1.5px, transparent 1.5px);
  background-size: 80px 80px;
  background-position: 0 0;
  transform: perspective(420px) rotateX(62deg);
  transform-origin:center bottom;
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%);
  opacity:.55;
  animation: floor-scroll 4s linear infinite;
  will-change:background-position;
}
@keyframes floor-scroll{
  from { background-position: 0 0     }
  to   { background-position: 0 80px  }
}

/* Particles — sparks rising */
.stage-particles{ position:absolute; inset:0; pointer-events:none }
.stage-particles .sp{
  position:absolute; bottom:-10px;
  width:4px; height:4px; border-radius:50%;
  background:#ffd23f;
  box-shadow:
    0 0 6px #ffd23f,
    0 0 14px #ff8a3d;
  opacity:0;
  animation: sp-rise 7s linear infinite;
}
.stage-particles .s1{ left:6%;  animation-delay:0s;    background:#ff1f8f; box-shadow:0 0 6px #ff1f8f,0 0 14px #ff1f8f }
.stage-particles .s2{ left:14%; animation-delay:1.2s;  background:#00d9ff; box-shadow:0 0 6px #00d9ff,0 0 14px #00d9ff }
.stage-particles .s3{ left:22%; animation-delay:2.4s }
.stage-particles .s4{ left:32%; animation-delay:0.6s;  background:#ff1f8f; box-shadow:0 0 6px #ff1f8f,0 0 14px #ff1f8f }
.stage-particles .s5{ left:42%; animation-delay:3.6s }
.stage-particles .s6{ left:52%; animation-delay:1.8s;  background:#00d9ff; box-shadow:0 0 6px #00d9ff,0 0 14px #00d9ff }
.stage-particles .s7{ left:62%; animation-delay:4.8s }
.stage-particles .s8{ left:72%; animation-delay:2.2s;  background:#ff1f8f; box-shadow:0 0 6px #ff1f8f,0 0 14px #ff1f8f }
.stage-particles .s9{ left:80%; animation-delay:5.4s }
.stage-particles .s10{left:88%; animation-delay:0.9s;  background:#00d9ff; box-shadow:0 0 6px #00d9ff,0 0 14px #00d9ff }
.stage-particles .s11{left:96%; animation-delay:3.0s }
.stage-particles .s12{left:46%; animation-delay:4.2s;  background:#ff1f8f; box-shadow:0 0 6px #ff1f8f,0 0 14px #ff1f8f }

@keyframes sp-rise{
  0%   { transform:translateY(0)     scale(1);   opacity:0   }
  10%  { opacity:.95 }
  100% { transform:translateY(-100vh) scale(.4);  opacity:0   }
}

@media(prefers-reduced-motion:reduce){
  .stage-sun,.stage-floor,.stage-particles .sp{ animation:none }
}
@media(max-width:520px){
  .stage-sun{ width:300px; height:300px }
  .stage-floor{ height:28% }
  .stage-particles .sp{ width:3px; height:3px }
}

/* === VS SCREEN — PLAYER vs CHALLENGER === */
.vs-screen{
  position:fixed; inset:0; z-index:9990;
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items:center;
  background:
    radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--vs-color, #ff1f8f) 70%, #0e0a2c) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, #ff8a3d 0%, transparent 60%),
    linear-gradient(135deg, var(--ink) 0%, #1a0a3e 50%, var(--ink) 100%);
  overflow:hidden;
  opacity:0;
  font-family:'Bagel Fat One', 'Bowlby One', sans-serif;
  color:var(--cream);
}
.vs-screen::before{
  /* diagonal speed-line backdrop */
  content:"";
  position:absolute; inset:-50%;
  background:repeating-linear-gradient(135deg,
    transparent 0, transparent 40px,
    rgba(255,255,255,.04) 40px, rgba(255,255,255,.04) 42px);
  pointer-events:none;
  animation:vs-lines 6s linear infinite;
}
@keyframes vs-lines{
  from { transform:translate(0,0)       }
  to   { transform:translate(-80px,80px) }
}
.vs-screen::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,.18) 3px, rgba(0,0,0,.18) 4px);
  pointer-events:none;
}
.vs-screen.in{
  opacity:1;
  transition:opacity .15s linear;
}
.vs-screen.in .vs-left{   transform:translateX(0); opacity:1 }
.vs-screen.in .vs-right{  transform:translateX(0); opacity:1 }
.vs-screen.in .vs-center{ transform:scale(1) rotate(0deg); opacity:1 }
.vs-screen.out{
  opacity:0;
  transition:opacity .3s ease;
}

.vs-half{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 30px;
  text-align:center;
  opacity:0;
  transition:transform .55s cubic-bezier(.2,.8,.3,1), opacity .35s;
}
.vs-left{ transform:translateX(-100%) }
.vs-right{ transform:translateX(100%) }

.vs-portrait{
  width:300px; height:400px;
  display:flex; align-items:flex-end; justify-content:center;
  margin-bottom:18px;
  filter:drop-shadow(8px 12px 0 rgba(0,0,0,.55))
         drop-shadow(0 0 30px var(--vs-color, #ff1f8f));
}
.vs-portrait img{
  max-width:100%; max-height:100%;
  width:auto; height:100%;
  object-fit:contain;
  animation:vs-portrait-in .55s ease-out;
}
.vs-portrait svg{ max-width:100%; max-height:100%; width:auto; height:100% }
.vs-portrait-q{
  font-family:'Bagel Fat One', sans-serif;
  font-size:280px;
  color:var(--cream);
  background:radial-gradient(circle at center, #555 0%, #222 70%);
  border-radius:50%;
  width:280px; height:280px;
  display:flex; align-items:center; justify-content:center;
  -webkit-text-stroke:4px var(--ink);
  text-shadow:6px 6px 0 var(--ink);
  filter:none;
}
@keyframes vs-portrait-in{
  from{ transform:scale(1.15); filter:brightness(1.6) }
  to  { transform:scale(1);    filter:brightness(1)   }
}

.vs-name{
  font-family:'Bagel Fat One', sans-serif;
  font-size:54px; line-height:1;
  color:var(--cream);
  -webkit-text-stroke:2px var(--ink);
  text-shadow:
    3px 3px 0 var(--vs-color, #ff1f8f),
    6px 6px 0 var(--ink);
  margin-bottom:8px;
  letter-spacing:1px;
}
.vs-tag{
  font-family:'Press Start 2P', monospace;
  font-size:10px; color:var(--yellow);
  letter-spacing:2px;
  text-shadow:2px 2px 0 var(--ink);
  margin-bottom:12px;
}
.vs-label{
  font-size:11px;
  color:var(--cyan);
  letter-spacing:3px;
  background:rgba(0,0,0,.55);
  border:2px solid var(--cyan);
  padding:5px 14px;
  text-shadow:1px 1px 0 var(--ink);
}

.vs-center{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 8px;
  opacity:0;
  transform:scale(.3) rotate(-12deg);
  transition:transform .5s cubic-bezier(.5,1.6,.4,1) .25s, opacity .3s ease .25s;
}
.vs-letters{
  font-family:'Bagel Fat One', sans-serif;
  font-size:200px;
  line-height:.9;
  color:var(--yellow);
  -webkit-text-stroke:4px var(--ink);
  text-shadow:
     6px 6px 0 var(--pink),
    12px 12px 0 var(--ink);
  animation:vs-pulse .55s ease-in-out infinite alternate;
}
@keyframes vs-pulse{
  from{ transform:scale(1)     }
  to  { transform:scale(1.08)  }
}
.vs-jp{
  font-size:24px;
  color:var(--cream);
  text-shadow:2px 2px 0 var(--ink);
  margin-top:6px;
}

@media(max-width:880px){
  .vs-portrait{ width:200px; height:280px }
  .vs-portrait-q{ width:200px; height:200px; font-size:200px }
  .vs-name{ font-size:34px }
  .vs-letters{ font-size:120px }
  .vs-jp{ font-size:16px }
  .vs-tag{ font-size:8px }
}
@media(max-width:520px){
  .vs-screen{ grid-template-columns: 1fr auto 1fr; gap:0 }
  .vs-half{ padding:18px 6px }
  .vs-portrait{ width:130px; height:180px; margin-bottom:8px }
  .vs-portrait-q{ width:120px; height:120px; font-size:120px }
  .vs-name{ font-size:22px }
  .vs-letters{ font-size:64px }
  .vs-jp{ font-size:12px }
  .vs-tag{ display:none }
  .vs-label{ font-size:8px; padding:3px 8px }
}
@media(prefers-reduced-motion:reduce){
  .vs-screen *{ animation:none !important; transition:opacity .2s !important; transform:none !important }
  .vs-screen.in .vs-left,.vs-screen.in .vs-right{ transform:none }
}

/* === CART TOAST — Capcom-style "+1 ÉQUIPÉ" notification === */
.cart-toast-stack{
  position:fixed; top:80px; right:14px;
  z-index:9200;
  display:flex; flex-direction:column; gap:10px;
  pointer-events:none;
  max-width:340px;
}
.cart-toast{
  pointer-events:auto;
  display:grid;
  grid-template-columns:64px 1fr;
  gap:10px;
  align-items:center;
  background:linear-gradient(180deg, color-mix(in srgb, var(--ct-color, #ff1f8f) 14%, #fff7eb) 0%, #fff7eb 100%);
  border:3px solid var(--ink);
  border-left:8px solid var(--ct-color, #ff1f8f);
  border-radius:6px;
  padding:8px 12px 8px 8px;
  box-shadow:
    inset 0 0 0 2px var(--yellow),
    5px 5px 0 var(--ink);
  font-family:'DM Sans', sans-serif;
  color:var(--ink);
  transform:translateX(120%);
  opacity:0;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), opacity .25s;
  cursor:pointer;
}
.cart-toast.in{ transform:translateX(0); opacity:1 }
.cart-toast.out{ transform:translateX(120%) scale(.95); opacity:0 }
.cart-toast .ct-portrait{
  width:60px; height:80px;
  display:flex; align-items:flex-end; justify-content:center;
  filter:drop-shadow(2px 4px 0 rgba(0,0,0,.35));
}
.cart-toast .ct-portrait img{
  max-width:100%; max-height:100%;
  width:auto; height:100%;
  object-fit:contain;
}
.cart-toast .ct-portrait-fallback{
  border-radius:50%;
  width:48px; height:48px;
  border:3px solid var(--ink);
  box-shadow:inset 0 -8px 0 rgba(0,0,0,.2);
  margin-bottom:6px;
}
.cart-toast .ct-body{ min-width:0 }
.cart-toast .ct-tag{
  display:inline-block;
  font-family:'Press Start 2P', monospace;
  font-size:9px;
  letter-spacing:1.5px;
  background:var(--ink);
  color:var(--yellow);
  padding:3px 6px;
  border-radius:3px;
  margin-bottom:4px;
}
.cart-toast .ct-name{
  font-family:'Bagel Fat One', sans-serif;
  font-size:16px; line-height:1.1;
  color:var(--ink);
  -webkit-text-stroke:.4px var(--ink);
  text-shadow:2px 2px 0 color-mix(in srgb, var(--ct-color, #ff1f8f) 80%, transparent);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:240px;
}
.cart-toast .ct-meta{
  font-family:'Press Start 2P', monospace;
  font-size:8px; letter-spacing:1px;
  color:var(--ink-soft);
  margin-top:4px;
}
.cart-toast .ct-cta{
  color:var(--pink);
  margin-left:8px;
}
.cart-toast:hover{ transform:translateX(-4px); box-shadow: inset 0 0 0 2px var(--yellow), 8px 8px 0 var(--ink) }
@media(max-width:520px){
  .cart-toast-stack{ top:auto; bottom:14px; right:8px; left:8px; max-width:none }
  .cart-toast{ grid-template-columns:48px 1fr; padding:6px 10px 6px 6px }
  .cart-toast .ct-portrait{ width:48px; height:60px }
  .cart-toast .ct-name{ font-size:13px; max-width:55vw }
}
@media(prefers-reduced-motion:reduce){
  .cart-toast{ transition:opacity .2s !important; transform:none !important }
  .cart-toast.in{ transform:none }
}

/* === INFO HUB / DOJO modals — arcade tabbed overlay === */
.info-modal{
  position:fixed; inset:0; z-index:9100;
  display:none;
  font-family:'DM Sans', system-ui, sans-serif;
}
.info-modal.open{ display:block }
.info-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(14,10,44,.78);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  animation:hub-fade .25s ease-out;
}
@keyframes hub-fade{ from{opacity:0} to{opacity:1} }
.info-modal-card{
  position:absolute;
  top:5%; left:50%; transform:translateX(-50%) translateY(0);
  width:min(960px, 94vw);
  max-height:90vh;
  background:linear-gradient(180deg, #fff7eb 0%, #f8e7c8 100%);
  color:var(--ink);
  border:4px solid var(--ink);
  border-radius:8px;
  box-shadow:
    inset 0 0 0 2px var(--yellow),
    8px 8px 0 var(--ink),
    0 0 60px rgba(255,31,143,.4);
  display:flex; flex-direction:column;
  overflow:hidden;
  animation:hub-slide .35s cubic-bezier(.2,.8,.3,1);
}
@keyframes hub-slide{
  from { transform:translateX(-50%) translateY(-30px); opacity:0 }
  to   { transform:translateX(-50%) translateY(0);     opacity:1 }
}
.info-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
  background:var(--ink); color:var(--cream);
  border-bottom:4px solid var(--yellow);
}
.info-modal-title{
  font-family:'Bagel Fat One', sans-serif;
  font-size:24px;
  letter-spacing:1.5px;
  margin:0;
  -webkit-text-stroke:.5px rgba(0,0,0,.4);
  text-shadow:2px 2px 0 var(--pink);
}
.info-modal-title .jp{ font-size:18px; color:var(--yellow); margin-left:10px; -webkit-text-stroke:0; text-shadow:none }
.info-modal-head .close-btn{
  background:var(--pink); color:#fff;
  border:2px solid var(--cream);
  width:38px; height:38px; border-radius:6px;
  font-size:22px; cursor:pointer;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s;
}
.info-modal-head .close-btn:hover{ transform:scale(1.1) rotate(90deg) }

.info-tabs{
  display:flex; gap:0;
  background:var(--ink);
  border-bottom:2px solid var(--yellow);
}
.info-tab{
  flex:1;
  font-family:'Press Start 2P', monospace;
  font-size:10px; letter-spacing:1.5px;
  background:transparent; color:var(--cream);
  border:none; border-right:2px solid var(--ink);
  padding:14px 8px;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.info-tab:last-child{ border-right:none }
.info-tab:hover{ background:rgba(255,210,63,.15); color:var(--yellow) }
.info-tab.active{
  background:linear-gradient(180deg, var(--pink) 0%, var(--pink-deep) 100%);
  color:var(--cream);
  text-shadow:1px 1px 0 var(--ink);
  box-shadow:inset 0 -3px 0 var(--yellow);
}

.info-modal-body{
  flex:1;
  overflow-y:auto;
  padding:24px 28px 28px;
}
.info-pane{ display:none }
.info-pane.active{ display:block; animation:pane-fade .2s ease-out }
@keyframes pane-fade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

.pane-eyebrow{
  font-size:10px; color:var(--pink); letter-spacing:2px;
  margin-bottom:6px;
}
.pane-title{
  font-family:'Bagel Fat One', sans-serif;
  font-size:36px; line-height:1; margin:0 0 4px;
  color:var(--ink);
  -webkit-text-stroke:1px var(--ink);
  text-shadow:3px 3px 0 var(--pink);
}
.pane-lead{ font-size:14px; color:var(--ink-soft); margin:8px 0 18px }
.pane-sub{
  font-family:'Press Start 2P', monospace;
  font-size:11px; letter-spacing:1.5px;
  color:var(--ink);
  margin:22px 0 10px;
  padding-bottom:6px;
  border-bottom:3px solid var(--yellow);
}

.info-form{ display:grid; gap:8px }
.info-form label{
  font-family:'Press Start 2P', monospace;
  font-size:9px; letter-spacing:1px;
  color:var(--ink); margin-top:6px;
}
.info-form input,.info-form select,.info-form textarea{
  font-family:'DM Sans', sans-serif;
  font-size:14px;
  padding:10px 12px;
  border:2.5px solid var(--ink);
  border-radius:4px;
  background:#fff;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.info-form input:focus,.info-form select:focus,.info-form textarea:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(255,31,143,.25);
}
.info-form textarea{ min-height:80px; resize:vertical }
.info-form button{
  margin-top:14px;
  font-family:'Press Start 2P', monospace;
  font-size:12px; letter-spacing:1.5px;
  background:var(--ink); color:var(--yellow);
  border:3px solid var(--ink);
  padding:14px 18px;
  border-radius:4px;
  box-shadow:4px 4px 0 var(--pink);
  cursor:pointer;
  transition:transform .12s, box-shadow .12s;
}
.info-form button:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--pink) }
.info-form button:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--pink) }

.info-contacts{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px;
  margin-top:20px; padding-top:16px;
  border-top:2px dashed var(--ink);
  font-size:13px;
}
.info-contacts strong{ color:var(--pink); margin-right:8px; font-size:18px }

.info-perks{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px;
  margin-bottom:18px;
}
.info-perks > div{
  background:rgba(255,255,255,.6);
  border:2.5px solid var(--ink);
  border-radius:6px;
  padding:12px;
  position:relative;
}
.info-perks .ip{
  position:absolute; top:-12px; left:10px;
  background:var(--yellow); color:var(--ink);
  border:2px solid var(--ink); border-radius:50%;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Bagel Fat One', sans-serif; font-size:16px;
}

.info-list{ list-style:none; padding:0; margin:8px 0 }
.info-list li{
  padding:8px 12px;
  border-left:4px solid var(--pink);
  background:rgba(255,255,255,.5);
  margin-bottom:6px;
  font-size:14px;
}
.info-list strong{ color:var(--ink) }

.info-prose h5{
  font-family:'Press Start 2P', monospace;
  font-size:11px; letter-spacing:1.5px;
  color:var(--ink);
  margin:18px 0 6px;
}
.info-prose p{ font-size:14px; line-height:1.6; margin:6px 0 }
.info-prose .note{
  background:var(--yellow);
  border:2.5px solid var(--ink);
  padding:10px 12px;
  font-size:13px;
  margin-top:18px;
  border-radius:4px;
}

.quest-list{ display:grid; gap:10px }
.quest-row{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:14px;
  align-items:center;
  background:rgba(255,255,255,.6);
  border:2.5px solid var(--ink);
  border-radius:6px;
  padding:12px;
  box-shadow:3px 3px 0 var(--ink);
}
.quest-row .quest-date{
  background:var(--ink); color:var(--cream);
  border-radius:4px;
  padding:8px 6px;
  text-align:center;
  font-family:'Bagel Fat One', sans-serif;
}
.quest-row .quest-date .d{ display:block; font-size:24px; line-height:1 }
.quest-row .quest-date .m{ display:block; font-size:11px; color:var(--yellow); letter-spacing:2px }
.quest-row .quest-info h5{
  font-family:'Press Start 2P', monospace;
  font-size:10px; letter-spacing:1px;
  margin:0 0 4px;
}
.quest-row .quest-info p{ font-size:13px; line-height:1.4; margin:0 0 4px; color:var(--ink-soft) }
.quest-row .quest-info .reward{
  display:inline-block;
  font-family:'Press Start 2P', monospace;
  font-size:9px;
  background:var(--pink); color:#fff;
  padding:3px 8px; border-radius:3px;
  letter-spacing:1px;
}

.xp-card{
  background:linear-gradient(180deg, var(--ink) 0%, #1a0a3e 100%);
  color:var(--cream);
  border:3px solid var(--yellow);
  border-radius:6px;
  padding:16px;
  margin-bottom:18px;
  box-shadow:5px 5px 0 var(--pink);
}
.xp-card .xp-top{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'Press Start 2P', monospace; font-size:10px; letter-spacing:1px;
  margin-bottom:10px;
}
.xp-card .xp-top .lvl{ color:var(--yellow) }
.xp-card .xp-bar{
  width:100%; height:18px;
  background:rgba(0,0,0,.4);
  border:2px solid var(--cream);
  border-radius:3px;
  overflow:hidden;
}
.xp-card .xp-bar-fill{
  height:100%;
  background:linear-gradient(90deg, var(--green) 0%, var(--yellow) 60%, var(--pink) 100%);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);
  transition:width .5s ease;
}
.xp-card .xp-bar-lbl{
  font-family:'Press Start 2P', monospace;
  font-size:9px; color:var(--cyan);
  margin-top:6px; text-align:right;
  letter-spacing:1px;
}
.xp-card .xp-perks{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;
}
.xp-card .xp-perk{
  font-family:'Press Start 2P', monospace;
  font-size:8px; letter-spacing:1px;
  padding:5px 8px; border-radius:3px;
  border:1.5px solid var(--cream);
}
.xp-card .xp-perk.unlocked{ background:var(--green-deep); color:#fff }
.xp-card .xp-perk.locked{ opacity:.5; background:transparent; color:var(--cream) }

@media(max-width:640px){
  .info-modal-card{ width:96vw; max-height:94vh; top:3% }
  .info-modal-title{ font-size:18px }
  .pane-title{ font-size:26px }
  .info-tab{ font-size:8px; padding:11px 6px; letter-spacing:1px }
  .info-modal-body{ padding:16px 16px 20px }
  .quest-row{ grid-template-columns:60px 1fr; padding:10px }
  .quest-row .quest-date .d{ font-size:18px }
}

/* === CRT TV OFF / ON transition (cathode-ray tube collapse + ignite) === */
.crt-off{
  animation:crt-off .55s cubic-bezier(.6,.05,.7,.05) forwards;
  transform-origin:center center;
  will-change:transform,filter,opacity;
}
@keyframes crt-off{
  0%{   transform:scale(1,1);                    filter:brightness(1) contrast(1); }
  30%{ transform:scale(1.03,.95);                filter:brightness(1.6) contrast(1.3); }
  60%{ transform:scale(1,.005);                  filter:brightness(3) contrast(2); opacity:1; }
  85%{ transform:scale(.02,.005);                filter:brightness(4); opacity:1; }
  100%{ transform:scale(0,0);                    opacity:0; }
}

.crt-on{
  animation:crt-on .6s cubic-bezier(.2,.8,.3,1) forwards;
  transform-origin:center center;
  will-change:transform,filter,opacity;
}
@keyframes crt-on{
  0%{   transform:scale(0,0);                    opacity:0; }
  10%{ transform:scale(.02,.005);                filter:brightness(4); opacity:1; }
  40%{ transform:scale(1,.005);                  filter:brightness(3) contrast(2); }
  70%{ transform:scale(1.04,.9);                 filter:brightness(1.6) contrast(1.3); }
  100%{ transform:scale(1,1);                    filter:brightness(1) contrast(1); }
}

/* When CRT is mid-transition we want the page background to be pure black (like a dead tube) */
body.crt-transitioning{background:#000 !important}
body.crt-transitioning::before,body.crt-transitioning::after{display:none !important}

@media(prefers-reduced-motion:reduce){
  .crt-off,.crt-on{animation:none!important;transform:none!important;opacity:1!important}
}

/* === LET'S GO transition overlay === */
.lets-go{
  position:fixed;inset:0;z-index:99999;
  background:radial-gradient(ellipse at center, rgba(255,31,143,.55) 0%, rgba(14,10,44,.97) 75%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;
  animation:lg-fade-in .3s ease-out;
}
.lets-go.out{animation:lg-fade-out .5s ease-in forwards}
.lets-go-text{
  font-family:'Bowlby One',sans-serif;
  font-size:clamp(60px,14vw,140px);
  color:var(--yellow);
  text-shadow:4px 4px 0 var(--ink),8px 8px 0 var(--pink),12px 12px 0 var(--cyan);
  letter-spacing:4px;
  animation:lg-bounce .8s cubic-bezier(.2,.8,.2,1);
}
.lets-go-arrow{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(16px,3vw,24px);
  color:var(--cyan);
  letter-spacing:6px;
  animation:lg-arrow 1s steps(3) infinite;
}
.lets-go-jp{
  font-family:'Noto Sans JP',sans-serif;font-weight:900;
  font-size:clamp(20px,3vw,32px);
  color:var(--pink);
  letter-spacing:8px;
  text-shadow:0 0 16px rgba(255,31,143,.7);
}
@keyframes lg-fade-in{from{opacity:0}to{opacity:1}}
@keyframes lg-fade-out{to{opacity:0;visibility:hidden}}
@keyframes lg-bounce{
  0%{transform:scale(.4) translateY(40px);opacity:0}
  60%{transform:scale(1.18);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes lg-arrow{
  0%{opacity:.4}
  33%{opacity:.7;transform:translateX(4px)}
  66%{opacity:1;transform:translateX(8px)}
  100%{opacity:.4}
}
@media(prefers-reduced-motion:reduce){
  .lets-go-text,.lets-go-arrow{animation:none}
}

/* === TITLE-SCREEN MODE (homepage) === */
body.title-only{min-height:100vh}
body.title-only main{min-height:100vh;display:flex;flex-direction:column}
body.title-only .title-screen{flex:1;min-height:auto;padding:24px 20px 80px;justify-content:center;position:relative;z-index:2}
body.title-only .copyright{margin-top:32px}
body.title-only .hud{display:none} /* keep title-screen pure */
body.title-only nav.topnav{background:rgba(14,10,44,.5);border-bottom:none;backdrop-filter:blur(8px)}
body.title-only .logo{color:var(--cream);text-shadow:2px 2px 0 var(--pink),4px 4px 0 var(--cyan)}
body.title-only .nav-jp{color:var(--cyan)}

/* === MIAMI VICE retrowave grid floor (only after splash exit) === */
body.title-only.splash-mode::after{display:none}
body.title-only::after{
  content:"";
  position:fixed;
  bottom:-60vh;left:-25vw;
  width:150vw;height:120vh;
  pointer-events:none;
  background:
    linear-gradient(to top, transparent 0%, rgba(14,10,44,.6) 70%, rgba(14,10,44,1) 100%),
    repeating-linear-gradient(0deg,
      transparent 0,
      transparent 38px,
      rgba(0,217,255,.5) 39px,
      rgba(0,217,255,.5) 40px),
    repeating-linear-gradient(90deg,
      transparent 0,
      transparent 78px,
      rgba(255,31,143,.45) 79px,
      rgba(255,31,143,.45) 80px);
  transform:perspective(420px) rotateX(64deg);
  transform-origin:center top;
  opacity:.85;
  z-index:1;
  animation:miami-grid 12s linear infinite;
}
@keyframes miami-grid{
  from{background-position:0 0, 0 0, 0 0}
  to  {background-position:0 0, 0 80px, 0 0}
}
body.title-only .clouds{display:none} /* clouds are too cute for Miami */
@media(prefers-reduced-motion:reduce){
  body.title-only::after{animation:none}
}

/* New sub-tagline under logo */
.title-sub{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  margin:20px 0 18px;
}
.title-sub-en{
  font-family:'Press Start 2P',monospace;
  font-size:11px;letter-spacing:3px;color:var(--ink);
  background:var(--cream);
  border:3px solid var(--ink);border-radius:6px;
  padding:8px 14px;box-shadow:3px 3px 0 var(--ink);
}
.title-sub-jp{
  font-family:'Noto Sans JP',sans-serif;font-weight:900;
  font-size:13px;color:var(--ink-soft);letter-spacing:5px;
}

/* === VERIFIED AUTHENTIC STAMP — top-right corner === */
.verified-stamp{
  position:absolute;top:10%;right:5%;
  width:115px;height:115px;
  pointer-events:none;
  animation:stamp-bob 4s ease-in-out infinite;
  z-index:3;
}
.verified-ring{
  position:absolute;inset:0;
  border:3px solid var(--ink);
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg, var(--pink-deep) 0deg 14deg, var(--ink) 14deg 28deg);
  box-shadow:4px 4px 0 var(--ink);
}
.verified-ring::before{
  content:"";position:absolute;inset:5px;
  background:var(--cream);
  border-radius:50%;
  border:2px dashed var(--ink);
}
.verified-inner{
  position:absolute;inset:12%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;
  background:var(--cream);
  border-radius:50%;
  padding:6px 4px;
}
.verified-star{
  font-size:14px;color:var(--pink-deep);line-height:1;
  margin-bottom:2px;
}
.verified-line{
  font-family:'Press Start 2P',monospace;
  font-size:7px;color:var(--ink);
  letter-spacing:.5px;line-height:1.3;
  white-space:nowrap;
}
.verified-jp{
  font-family:'Noto Sans JP',sans-serif;font-weight:900;
  font-size:9px;color:var(--pink-deep);
  letter-spacing:1px;
  margin-top:1px;
}
@keyframes stamp-bob{
  0%,100%{transform:rotate(-12deg) scale(1)}
  50%{transform:rotate(-9deg) scale(1.04)}
}
@media(max-width:880px){
  .verified-stamp{width:95px;height:95px;top:8%;right:4%}
  .verified-line{font-size:6px}
  .verified-jp{font-size:8px}
  .verified-star{font-size:12px}
}
@media(max-width:520px){
  .verified-stamp{width:78px;height:78px;top:6%;right:3%}
  .verified-line{font-size:5px;letter-spacing:0}
  .verified-jp{font-size:7px}
  .verified-star{font-size:10px;margin-bottom:1px}
}

/* === EXTRA DECOS === */
.deco-mushroom{animation:bob 4.5s ease-in-out infinite;animation-delay:-1s}
.deco-bolt{animation:wiggle 2.8s ease-in-out infinite}
.deco-heart{animation:bob 3.5s ease-in-out infinite;animation-delay:-2s}
.deco-peace{animation:spin 30s linear infinite}
@media(max-width:520px){
  .deco-mushroom,.deco-bolt,.deco-heart,.deco-peace{display:none}
}

/* === CURSOR TRAIL (desktop only) === */
.cursor-trail{
  position:fixed;
  width:6px;height:6px;
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:9999;
  border-radius:1px;
  box-shadow:0 0 0 1px rgba(26,17,64,.5);
  animation:trail-fade .6s linear forwards;
}
@keyframes trail-fade{
  0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + 12px)) scale(0)}
}
@media(prefers-reduced-motion:reduce){.cursor-trail{display:none}}

/* === COIN POP (when adding to cart) === */
.coin-pop{
  position:fixed;
  font-family:'Press Start 2P',monospace;
  font-size:14px;
  color:var(--yellow);
  text-shadow:2px 2px 0 var(--ink),3px 3px 0 var(--pink-deep);
  letter-spacing:1.5px;
  pointer-events:none;
  transform:translate(-50%,0);
  z-index:1000;
  animation:coin-pop-rise 1.3s cubic-bezier(.2,.85,.25,1) forwards;
}
@keyframes coin-pop-rise{
  0%{opacity:0;transform:translate(-50%,8px) scale(.6) rotate(-4deg)}
  20%{opacity:1;transform:translate(-50%,-12px) scale(1.15) rotate(-3deg)}
  60%{opacity:1;transform:translate(-50%,-50px) scale(1) rotate(2deg)}
  100%{opacity:0;transform:translate(-50%,-90px) scale(.95) rotate(2deg)}
}
@media(prefers-reduced-motion:reduce){.coin-pop{animation:none;display:none}}

/* === SOUND TOGGLE (inline in nav) === */
.sound-toggle{
  background:var(--ink);color:var(--yellow);
  border:3px solid var(--ink);
  box-shadow:3px 3px 0 var(--pink);
  width:42px;height:42px;
  font-size:14px;
  border-radius:8px;cursor:pointer;
  transition:.1s;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;
}
.sound-toggle:hover{background:var(--pink);box-shadow:3px 3px 0 var(--ink)}
.sound-toggle:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--pink)}
.sound-toggle.muted{background:var(--cream);color:var(--ink-soft);box-shadow:3px 3px 0 var(--ink-soft);filter:grayscale(.4)}
.sound-toggle.muted:hover{background:var(--cream);box-shadow:3px 3px 0 var(--ink)}
.sound-toggle.playing{animation:sound-pulse 1.6s ease-in-out infinite}
@keyframes sound-pulse{
  0%,100%{box-shadow:3px 3px 0 var(--pink)}
  50%{box-shadow:3px 3px 0 var(--yellow)}
}
@media(max-width:520px){
  .sound-toggle{width:36px;height:36px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  .sound-toggle{transition:none;animation:none!important}
}

/* === RETRO AUDIO PLAYER WIDGET === */
.audio-widget{
  position:fixed;bottom:20px;left:20px;
  width:180px;
  background:var(--ink);
  border:4px solid var(--ink);border-radius:10px;
  box-shadow:5px 5px 0 var(--pink),inset 0 0 0 2px var(--cream);
  padding:5px;
  z-index:40;
  animation:audio-fade-in .6s .8s ease-out backwards;
}
.audio-screen{
  background:#0a1f1a;
  border-radius:5px;
  padding:10px 12px;
  position:relative;
  overflow:hidden;
}
.audio-screen::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(127,207,111,.08) 3px,rgba(127,207,111,.08) 4px);
  pointer-events:none;
}
.audio-line{
  font-family:'Press Start 2P',monospace;
  color:#7fcf6f;font-size:8px;letter-spacing:1.5px;
  margin-bottom:6px;
  text-shadow:0 0 6px rgba(127,207,111,.5);
  position:relative;z-index:1;
}
.audio-line.audio-track{
  color:#ffd23f;font-size:9px;
  text-shadow:0 0 6px rgba(255,210,63,.5);
  margin-bottom:8px;
}
.audio-line.audio-foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:0;font-size:7px;color:#fff7e6;opacity:.7;
}
.audio-line.audio-foot .jp{
  font-family:'Noto Sans JP',sans-serif;font-weight:700;
  font-size:9px;color:#7fcf6f;letter-spacing:1px;
}
.audio-bar{
  height:6px;background:#062019;border:1px solid #7fcf6f;
  border-radius:2px;overflow:hidden;margin-bottom:8px;
  position:relative;z-index:1;
}
.audio-bar-fill{
  height:100%;width:42%;
  background:linear-gradient(90deg,#7fcf6f,#ffd23f,#ff7a3d);
  transition:width .5s ease-out;
  position:relative;
}
.audio-bar-fill::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0,transparent 3px,rgba(0,0,0,.2) 3px,rgba(0,0,0,.2) 4px);
}
@keyframes audio-fade-in{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}
@media(max-width:520px){
  .audio-widget{width:150px;bottom:14px;left:14px;padding:4px}
  .audio-screen{padding:8px 10px}
  .audio-line{font-size:7px;letter-spacing:1px}
  .audio-line.audio-track{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .audio-widget{animation:none}
  .audio-bar-fill{transition:none}
}

/* === CATEGORY TILES (homepage) === */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:22px;
  max-width:1100px;margin:0 auto;
}
.cat-tile{
  background:#fff;
  border:4px solid var(--ink);
  border-radius:14px;
  box-shadow:8px 8px 0 var(--ink);
  overflow:hidden;
  text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;
  transition:transform .15s,box-shadow .15s;
}
.cat-tile:nth-child(2n){box-shadow:8px 8px 0 var(--pink)}
.cat-tile:nth-child(3n){box-shadow:8px 8px 0 var(--yellow)}
.cat-tile:nth-child(4n){box-shadow:8px 8px 0 var(--green)}
.cat-tile:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--ink)}
.cat-tile:focus-visible{outline:3px solid var(--pink-deep);outline-offset:4px}
.cat-tile-img{
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  border-bottom:4px solid var(--ink);
  position:relative;overflow:hidden;
}
.cat-tile-img::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(26,17,64,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(26,17,64,.05) 1px,transparent 1px);
  background-size:24px 24px;
}
.cat-tile-img > svg{
  width:55%;max-width:140px;height:auto;
  filter:drop-shadow(0 6px 0 rgba(26,17,64,.22));
  position:relative;z-index:1;
}
.cat-tile-info{
  padding:18px 20px;flex:1;
  display:flex;flex-direction:column;gap:8px;
}
.cat-tile-name{
  font-family:'Press Start 2P',monospace;
  font-size:13px;letter-spacing:1.5px;color:var(--ink);
  line-height:1.3;
}
.cat-tile-jp{
  font-family:'Noto Sans JP',sans-serif;font-weight:700;
  font-size:11px;color:var(--ink-soft);letter-spacing:2px;
}
.cat-tile-cta{
  margin-top:auto;
  padding-top:12px;border-top:3px dashed var(--ink);
  font-family:'Press Start 2P',monospace;font-size:9px;
  color:var(--ink-soft);letter-spacing:1.5px;
  display:flex;justify-content:space-between;align-items:center;
}
.cat-tile-cta .arrow{color:var(--pink-deep)}
.cat-tile:hover .cat-tile-cta .arrow{color:var(--ink)}
@media(max-width:520px){
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .cat-tile{box-shadow:5px 5px 0 var(--ink)!important}
  .cat-tile-info{padding:12px 14px}
  .cat-tile-name{font-size:10px}
  .cat-tile-jp{font-size:9px}
  .cat-tile-cta{font-size:7px;padding-top:10px}
}

/* === CATEGORY TABS (shop) === */
.cat-tabs{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  max-width:1100px;margin:0 auto 32px;padding:0 20px;
}
.cat-tab{
  background:#fff;color:var(--ink);
  border:3px solid var(--ink);border-radius:8px;
  box-shadow:3px 3px 0 var(--ink);
  padding:10px 16px;
  font-family:'Press Start 2P',monospace;font-size:10px;
  letter-spacing:1.5px;cursor:pointer;
  transition:.1s;
}
.cat-tab:hover{background:var(--pink);color:#fff;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.cat-tab.active{background:var(--ink);color:var(--yellow);box-shadow:3px 3px 0 var(--pink)}
.cat-tab:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
@media(max-width:520px){
  .cat-tab{font-size:8px;padding:8px 10px;letter-spacing:1px}
  .cat-tabs{gap:6px;margin-bottom:24px}
}