/* ==========================================================================
   Retro Mode ― 90's nostalgic homepage skin
   Two intensities: .retro-lite (soft nostalgia) / .retro-full (loud & proud)
   ========================================================================== */

@keyframes retro-blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }
@keyframes retro-marquee{ 0%{ transform:translateX(100%); } 100%{ transform:translateX(-100%); } }
@keyframes retro-wordart{ to{ background-position:200% center; } }

/* ---- shared bits: reuses every existing --token, so cards/buttons/borders
        repaint automatically without per-component overrides ---- */
body.retro-lite,
body.retro-full{ color-scheme:light; }

/* ==========================================================================
   LITE ― muted sepia nostalgia, no strobing, no rainbow
   ========================================================================== */
body.retro-lite{
  --ink:#4a3728;
  --ink-soft:#6b5744;
  --ink-faint:#9c8a76;
  --bg:#f5efe0;
  --surface:#fffdf6;
  --surface-alt:#efe4cc;
  --line:#d8c9a3;
  --line-strong:#c2ad7c;
  --accent:#b5651d;
  --accent-deep:#8a4b12;
  --accent-soft:#f0dfc0;
  --shadow:2px 2px 0 rgba(74,55,40,.18);
}
body.retro-lite{
  background-image:radial-gradient(#e9dcbc 1px, transparent 1px);
  background-size:16px 16px;
}
body.retro-lite h1,
body.retro-lite h2,
body.retro-lite h3,
body.retro-lite h4{
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  text-shadow:1px 1px 0 #fff;
}
body.retro-lite .kicker,
body.retro-lite .crumbs{ font-family:"Noto Serif JP",serif; font-style:italic; }
body.retro-lite section{ border-top-width:2px; border-top-color:var(--accent-soft); }
body.retro-lite .site-header{ border-bottom:2px solid var(--accent-soft); }
body.retro-lite .site-footer{ border-top:2px solid var(--accent-soft); }
body.retro-lite .foot-col ul{ list-style:none; }
body.retro-lite .foot-col li{ position:relative; padding-left:1.2em; }
body.retro-lite .foot-col li::before{ content:"☆"; position:absolute; left:0; color:var(--accent); }

body.retro-lite .site-nav .links a[href="product-grid.html"],
body.retro-lite .mobile-panel a[href="product-grid.html"]{ position:relative; }
body.retro-lite .site-nav .links a[href="product-grid.html"]::after,
body.retro-lite .mobile-panel a[href="product-grid.html"]::after{
  content:"NEW"; margin-left:6px; padding:1px 5px; border-radius:3px;
  background:var(--accent); color:#fff; font-size:9px; font-weight:900;
  font-family:"JetBrains Mono",monospace; vertical-align:middle;
}

body.retro-lite .retro-toggle{
  background:var(--accent-soft); border-color:var(--accent-deep); color:var(--accent-deep); font-weight:700;
}

body.retro-lite .retro-marquee{
  display:block; overflow:hidden; white-space:nowrap;
  background:#3b2c1f; border-bottom:2px solid var(--accent); padding:6px 0;
}
body.retro-lite .retro-marquee-inner{
  display:inline-block; padding-left:100%;
  color:#f0dfc0; font-family:"Zen Maru Gothic","Noto Sans JP",sans-serif;
  font-weight:700; font-size:13px;
  animation:retro-marquee 26s linear infinite;
}

body.retro-lite .retro-counter{
  display:flex; align-items:center; gap:10px; justify-content:center;
  margin:22px auto 0; padding:10px 16px; width:fit-content;
  background:#3b2c1f; border:2px solid var(--accent); border-radius:6px;
}
body.retro-lite .retro-counter .retro-counter-label{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; color:#e8c48a; letter-spacing:.1em;
}
body.retro-lite .retro-counter .retro-counter-digits{
  font-family:"JetBrains Mono",monospace; font-size:18px; font-weight:700;
  color:#e8c48a; background:#241a11; padding:3px 8px; border-radius:3px; letter-spacing:.15em;
}

/* ==========================================================================
   FULL ― loud, blinking, rainbow-bordered 90's homepage
   ========================================================================== */
body.retro-full{
  --ink:#1a0033;
  --ink-soft:#4b0082;
  --ink-faint:#8a2be2;
  --bg:#00e5ff;
  --surface:#fffbcc;
  --surface-alt:#ffd6f7;
  --line:#ff00aa;
  --line-strong:#ff00aa;
  --accent:#ff2fa0;
  --accent-deep:#c400ff;
  --accent-soft:#fff23d;
  --shadow:3px 3px 0 #000;
}

body.retro-full{
  font-family:"DotGothic16","MS Gothic",monospace;
}

body.retro-full h2,
body.retro-full h3,
body.retro-full h4{
  font-family:"DotGothic16","MS Gothic",monospace;
  color:#c400ff;
  text-shadow:2px 2px 0 #fff, 4px 4px 0 rgba(0,0,0,.35);
  -webkit-text-stroke:.4px #4b0082;
}

/* h1 gets the full 90's WordArt treatment: rainbow gradient fill, italic, outline */
body.retro-full h1{
  display:inline-block;
  font-family:"DotGothic16","MS Gothic",monospace;
  font-style:italic;
  font-weight:900;
  background-image:linear-gradient(90deg,#ff2323,#ff9900,#fff700,#4dff4d,#00e1ff,#ff2fd6,#ff2323);
  background-size:250% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:
    drop-shadow(1px 0 0 #1a0033) drop-shadow(-1px 0 0 #1a0033)
    drop-shadow(0 1px 0 #1a0033) drop-shadow(0 -1px 0 #1a0033)
    drop-shadow(3px 3px 0 rgba(0,0,0,.4));
  transform:skewX(-8deg);
  animation:retro-wordart 5s linear infinite;
}
body.retro-full h1 .hl,
body.retro-lite h1 .hl{ background:none; }

body.retro-full a{ text-decoration:underline; text-decoration-color:var(--accent-deep); }
body.retro-full .site-nav .links a,
body.retro-full .foot-col a,
body.retro-full .crumbs a,
body.retro-full .logo{ text-decoration:none; }

body.retro-full section{
  border-top-width:5px;
  border-image:linear-gradient(90deg,#ff0000,#ff9900,#fff700,#33ff00,#00e1ff,#7000ff,#ff00c8) 1;
}
body.retro-full .card,
body.retro-full .site-header,
body.retro-full .site-footer{
  border-color:transparent;
  border-image:linear-gradient(90deg,#ff0000,#ff9900,#fff700,#33ff00,#00e1ff,#7000ff,#ff00c8) 1;
}
body.retro-full .site-header{ border-image-width:0 0 4px 0; }
body.retro-full .site-footer{ border-image-width:4px 0 0 0; }

body.retro-full .foot-col ul{ list-style:none; }
body.retro-full .foot-col li{ position:relative; padding-left:1.2em; }
body.retro-full .foot-col li::before{
  content:"★"; position:absolute; left:0; color:#fff700;
  text-shadow:0 0 3px #c400ff;
}

body.retro-full .site-nav .links a[href="product-grid.html"],
body.retro-full .mobile-panel a[href="product-grid.html"]{ position:relative; }
body.retro-full .site-nav .links a[href="product-grid.html"]::after,
body.retro-full .mobile-panel a[href="product-grid.html"]::after{
  content:"NEW!"; margin-left:6px; padding:1px 5px; border-radius:3px;
  background:#ff0000; color:#fff; font-size:9px; font-weight:900;
  font-family:"JetBrains Mono",monospace; letter-spacing:0;
  animation:retro-blink 1s step-start infinite;
  vertical-align:middle;
}

body.retro-full .retro-toggle{
  font-family:"DotGothic16","MS Gothic",monospace;
  background:#fff700; border-color:#000; color:#c400ff; font-weight:900;
}

body.retro-full .retro-marquee{
  display:block; overflow:hidden; white-space:nowrap;
  background:#000; border-bottom:3px dashed #fff700; padding:6px 0;
}
body.retro-full .retro-marquee-inner{
  display:inline-block; padding-left:100%;
  color:#33ff00; font-family:"DotGothic16","MS Gothic",monospace;
  font-weight:900; font-size:14px; text-shadow:0 0 6px #33ff00;
  animation:retro-marquee 16s linear infinite;
}

body.retro-full .retro-counter{
  display:flex; align-items:center; gap:10px; justify-content:center;
  margin:22px auto 0; padding:10px 16px; width:fit-content;
  background:#000; border:2px solid #33ff00; border-radius:6px;
}
body.retro-full .retro-counter .retro-counter-label{
  font-family:"JetBrains Mono",monospace; font-size:10.5px; color:#33ff00; letter-spacing:.1em;
}
body.retro-full .retro-counter .retro-counter-digits{
  font-family:"JetBrains Mono",monospace; font-size:18px; font-weight:700;
  color:#33ff00; background:#001a00; padding:3px 8px; border-radius:3px;
  letter-spacing:.15em; text-shadow:0 0 6px #33ff00;
}

/* ---- toggle button (default/off state) ---- */
.retro-toggle{
  font-size:12.5px; font-weight:700; padding:8px 14px; border-radius:8px;
  border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink);
  cursor:pointer; white-space:nowrap;
}

/* ---- marquee banner / access counter: hidden unless a retro mode is on ---- */
.retro-marquee{ display:none; }
.retro-counter{ display:none; }

@media (max-width:820px){
  .site-header .in > .site-nav > .retro-toggle{ display:none; }
}

.mobile-panel .retro-toggle{
  margin-top:8px; width:100%; text-align:left; display:block;
  border:none; border-radius:0; background:none; padding:11px 4px;
  font-weight:700; font-size:14.5px; color:var(--ink-soft);
}
body.retro-lite .mobile-panel .retro-toggle,
body.retro-full .mobile-panel .retro-toggle{ background:none; }