:root{
    --bg:#0a0612;
    --bg2:#120a22;
    --panel:#1a1030;
    --ink:#f3f1ff;
    --dim:#b9aee6;
    --magenta:#ff2e88;
    --cyan:#21e6ff;
    --lime:#c6ff3d;
    --gold:#ffd23f;
    --shadow:0 0 0 2px #000, 0 0 12px rgba(33,230,255,.25);
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:
      radial-gradient(ellipse at 50% -10%, #2a1750 0%, var(--bg) 60%) fixed,
      var(--bg);
    color:var(--ink);
    font-family:'VT323',monospace;
    font-size:20px;
    line-height:1.5;
    overflow-x:hidden;
  }

  /* ---------- CRT overlays ---------- */
  .crt-scanlines, .crt-vignette, .crt-flicker{
    position:fixed; inset:0; pointer-events:none; z-index:9999;
  }
  .crt-scanlines{
    background:repeating-linear-gradient(
      to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 3px,
      rgba(0,0,0,.13) 4px, rgba(0,0,0,.13) 5px);
    mix-blend-mode:multiply;
  }
  .crt-vignette{
    background:radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.45) 100%);
    box-shadow:inset 0 0 120px rgba(0,0,0,.5);
  }
  .crt-flicker{ background:rgba(120,90,200,.025); animation:flicker .25s infinite }
  @keyframes flicker{ 0%{opacity:.1} 50%{opacity:.22} 100%{opacity:.08} }

  h1,h2,h3,.pixel{ font-family:'Press Start 2P',monospace; line-height:1.6 }

  a{ color:var(--cyan); text-decoration:none }
  a:hover{ color:var(--lime) }

  .neon-magenta{ color:var(--magenta); text-shadow:0 0 6px rgba(255,46,136,.8) }
  .neon-cyan{ color:var(--cyan); text-shadow:0 0 6px rgba(33,230,255,.8) }
  .neon-lime{ color:var(--lime); text-shadow:0 0 6px rgba(198,255,61,.8) }

  /* ---------- top bar ---------- */
  .topbar{
    position:sticky; top:0; z-index:50;
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 24px;
    background:linear-gradient(180deg, rgba(10,6,18,.95), rgba(10,6,18,.7));
    border-bottom:2px solid var(--magenta);
    backdrop-filter:blur(3px);
  }
  .brand{ font-family:'Press Start 2P'; font-size:14px; color:var(--gold);
    text-shadow:2px 2px 0 var(--magenta) }
  .nav{ display:flex; gap:18px; font-size:18px; flex-wrap:wrap }
  .nav a{ color:var(--dim) }
  .nav a:hover{ color:var(--cyan) }
  .nav-toggle{ display:none }

  /* ---------- mobile nav dropdown + ticker stacking ---------- */
  @media(max-width:640px){
    .nav-toggle{
      display:block; cursor:pointer;
      font-family:'Press Start 2P'; font-size:11px;
      color:#0a0612; background:var(--cyan);
      border:2px solid #000; border-radius:6px; padding:8px 12px;
    }
    .nav{
      position:absolute; top:100%; left:0; right:0;
      flex-direction:column; gap:0; flex-wrap:nowrap;
      background:linear-gradient(180deg, rgba(10,6,18,.98), rgba(10,6,18,.96));
      border-bottom:2px solid var(--magenta);
      max-height:0; overflow:hidden; transition:max-height .25s ease;
    }
    .nav.open{ max-height:360px }
    .nav a{ padding:16px 24px; font-size:22px; border-top:1px solid rgba(255,46,136,.25) }
    /* Recent Unlocks: centered label on top, scrolling badges underneath */
    .ach-ticker{ flex-direction:column }
    .ach-ticker-label{ justify-content:center; padding:8px 16px }
    .ach-ticker-viewport{ width:100% }
  }

  /* ---------- layout ---------- */
  .wrap{ max-width:1200px; margin:0 auto; padding:0 24px }
  .grid-main{ display:grid; grid-template-columns:1fr 320px; gap:32px; margin-top:40px }
  @media(max-width:900px){ .grid-main{ grid-template-columns:1fr } }

  /* ---------- hero ---------- */
  .hero{
    position:relative; padding:60px 0 30px; text-align:left;
    overflow:hidden;
  }
  .stars{ position:absolute; inset:0; z-index:-1;
    background-image:
      radial-gradient(1px 1px at 20% 30%, #fff, transparent),
      radial-gradient(1px 1px at 70% 60%, var(--cyan), transparent),
      radial-gradient(2px 2px at 40% 80%, var(--magenta), transparent),
      radial-gradient(1px 1px at 90% 20%, #fff, transparent),
      radial-gradient(1px 1px at 55% 15%, var(--lime), transparent);
    background-size:200px 200px; opacity:.5; animation:drift 12s linear infinite }
  @keyframes drift{ from{background-position:0 0} to{background-position:200px 200px} }

  .hero h1{ font-size:clamp(26px,5vw,52px); margin:0 0 8px;
    color:var(--cyan); text-shadow:4px 4px 0 var(--magenta), 0 0 20px rgba(33,230,255,.4) }
  .hero .sub{ font-family:'Press Start 2P'; font-size:12px; color:var(--lime); margin-bottom:24px }
  .hero p{ max-width:640px; font-size:22px; color:var(--ink) }
  .press-start{ display:inline-block; margin-top:26px; padding:14px 22px;
    font-family:'Press Start 2P'; font-size:12px; color:#0a0612; background:var(--gold);
    border:0; box-shadow:4px 4px 0 var(--magenta); cursor:pointer; animation:blink 1.1s steps(2) infinite }
  .press-start:hover{ background:var(--lime) }
  @keyframes blink{ 50%{ opacity:.45 } }

  /* ---------- now playing sidebar ---------- */
  .panel{ background:linear-gradient(180deg,var(--panel),var(--bg2));
    border:2px solid var(--cyan); box-shadow:var(--shadow); padding:18px }
  .panel.now{ position:sticky; top:84px }
  .panel h3{ font-size:11px; color:var(--gold); margin:0 0 14px;
    border-bottom:2px dashed var(--magenta); padding-bottom:10px }
  .cover{ aspect-ratio:3/4; width:100%; display:grid; place-items:center;
    text-align:center; font-family:'Press Start 2P'; font-size:11px; color:#000;
    border:2px solid #000; box-shadow:4px 4px 0 rgba(0,0,0,.6); padding:12px }
  .cover{ position:relative; overflow:hidden }
  .cover img, .face img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:auto }
  .cover.ph{ background:linear-gradient(160deg,#11151c,#2b3340 70%,#0a0d12); color:#dfe6f0 }
  .meta{ margin-top:14px; font-size:19px }
  .meta .ttl{ font-family:'Press Start 2P'; font-size:12px; color:var(--cyan); display:block; margin-bottom:8px }
  .bar{ height:14px; background:#000; border:2px solid var(--lime); margin:10px 0 4px }
  .bar > i{ display:block; height:100%; width:64%; background:repeating-linear-gradient(
    90deg,var(--lime) 0 6px, #0a0612 6px 8px) }
  .tag{ display:inline-block; font-size:18px; color:#000; background:var(--magenta);
    padding:1px 8px; margin:2px 4px 2px 0 }

  /* ---------- sections ---------- */
  section{ padding:54px 0; border-top:2px solid rgba(255,46,136,.25) }
  .sec-title{ font-size:18px; color:var(--magenta); margin:0 0 28px;
    text-shadow:3px 3px 0 #000 }
  .sec-title small{ display:block; font-family:'VT323'; font-size:20px; color:var(--dim); margin-top:8px }

  /* top 10 */
  .top10{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:20px }
  .game{ position:relative; perspective:800px }
  .game .flip{ position:relative; aspect-ratio:3/4; transition:transform .5s; transform-style:preserve-3d }
  .game:hover .flip{ transform:rotateY(180deg) }
  .face{ position:absolute; inset:0; backface-visibility:hidden;
    border:2px solid #000; box-shadow:4px 4px 0 rgba(0,0,0,.6);
    display:grid; place-items:center; text-align:center; padding:12px }
  .front{ font-family:'Press Start 2P'; font-size:10px; color:#000 }
  .back{ transform:rotateY(180deg); background:var(--bg2); border-color:var(--cyan);
    color:var(--ink); font-size:17px; flex-direction:column }
  .ra-badge{ position:absolute; top:-10px; right:-8px; z-index:3;
    font-family:'Press Start 2P'; font-size:9px; color:#000; background:var(--cyan);
    padding:5px 7px; border:2px solid #000; border-radius:10px; white-space:nowrap;
    box-shadow:0 0 8px rgba(33,230,255,.5) }
  .rank{ position:absolute; top:-12px; left:-12px; z-index:3;
    width:38px; height:38px; display:grid; place-items:center;
    font-family:'Press Start 2P'; font-size:12px; color:#000; background:var(--gold);
    border:2px solid #000; border-radius:50% }
  /* random-ish cover colors */
  .c1{background:linear-gradient(135deg,#ff2e88,#7a0f3d)} .c2{background:linear-gradient(135deg,#21e6ff,#0a4d63)}
  .c3{background:linear-gradient(135deg,#c6ff3d,#4a6310)} .c4{background:linear-gradient(135deg,#ffd23f,#7a5e00)}
  .c5{background:linear-gradient(135deg,#b15cff,#3d1066)} .c6{background:linear-gradient(135deg,#ff7b29,#7a3500)}
  .c7{background:linear-gradient(135deg,#3dffa1,#0a634a)} .c8{background:linear-gradient(135deg,#ff5151,#7a0f0f)}
  .c9{background:linear-gradient(135deg,#5c8cff,#0f2c7a)} .c10{background:linear-gradient(135deg,#ff2ecb,#5e0f7a)}

  /* collection */
  .shelf{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px }
  .console{ background:var(--bg2); border:2px solid var(--lime); padding:16px;
    text-align:center; font-size:18px; box-shadow:var(--shadow) }
  .console b{ font-family:'Press Start 2P'; font-size:10px; color:var(--lime); display:block; margin-bottom:8px }
  .console.backlog{ border-color:var(--dim); opacity:.85 }

  /* diary */
  .diary{ display:grid; gap:18px }
  .save{ display:grid; grid-template-columns:90px 1fr; gap:16px; align-items:center;
    background:var(--panel); border:2px solid var(--gold); padding:16px; box-shadow:var(--shadow) }
  .save .slot{ font-family:'Press Start 2P'; font-size:10px; color:var(--gold); text-align:center }
  .save h4{ margin:0 0 6px; font-family:'Press Start 2P'; font-size:11px; color:var(--cyan) }
  .save p{ margin:0; color:var(--dim); font-size:18px }
  @media(max-width:560px){ .save{ grid-template-columns:1fr } }

  /* profile */
  .profile{ display:grid; grid-template-columns:200px 1fr; gap:28px; align-items:start }
  @media(max-width:700px){ .profile{ grid-template-columns:1fr } }
  .avatar{ aspect-ratio:1; background:repeating-conic-gradient(#ff2e88 0 25%, #21e6ff 0 50%) 50%/30px 30px;
    border:3px solid var(--gold); image-rendering:pixelated; box-shadow:var(--shadow) }
  .stats{ display:grid; gap:12px }
  .stat{ font-size:19px }
  .stat .label{ font-family:'Press Start 2P'; font-size:10px; color:var(--lime); display:inline-block; width:140px }
  .statbar{ display:inline-block; vertical-align:middle; width:200px; max-width:50%; height:12px;
    background:#000; border:2px solid var(--cyan) }
  .statbar > i{ display:block; height:100%; background:var(--cyan) }

  /* footer */
  footer{ text-align:center; padding:50px 24px; border-top:2px solid var(--magenta) }
  .gameover{ font-family:'Press Start 2P'; font-size:22px; color:var(--magenta);
    text-shadow:3px 3px 0 #000; animation:blink 1.4s steps(2) infinite }
  .hiscore{ max-width:360px; margin:24px auto; text-align:left; font-size:18px }
  .hiscore .row{ display:flex; justify-content:space-between; border-bottom:1px dashed var(--dim) }

  @media(prefers-reduced-motion:reduce){
    *{ animation:none !important }
    .game:hover .flip{ transform:none }
  }

  /* ---------- more entries button ---------- */
  .more-row{ margin-top:30px; text-align:center }
  .more-btn{ display:inline-flex; align-items:center; gap:12px; padding:14px 22px;
    font-family:'Press Start 2P'; font-size:11px; color:#0a0612; background:var(--cyan);
    border:0; box-shadow:4px 4px 0 var(--magenta); cursor:pointer; text-decoration:none }
  .more-btn:hover{ background:var(--lime); color:#0a0612 }
  .more-btn .arrow{ animation:nudge .7s steps(2) infinite }
  @keyframes nudge{ 50%{ transform:translateX(5px) } }

  /* ---------- simple page header (sub-pages) ---------- */
  .page-head{ padding:50px 0 10px }
  .page-head h1{ font-size:clamp(22px,4vw,38px); color:var(--cyan); margin:0 0 8px;
    text-shadow:4px 4px 0 var(--magenta) }
  .page-head .crumb{ color:var(--lime); font-family:'Press Start 2P'; font-size:11px }


  /* ---- RetroAchievements ticker ---- */
  .ach-ticker{ display:flex; align-items:stretch; gap:0; border-top:2px solid #000;
    border-bottom:2px solid #000; background:linear-gradient(180deg,#140a26,#0a0612);
    overflow:hidden }
  .ach-ticker-label{ flex:0 0 auto; display:flex; align-items:center; padding:0 16px;
    font-family:'Press Start 2P'; font-size:10px; color:#000; background:var(--gold);
    white-space:nowrap }
  .ach-ticker-viewport{ flex:1 1 auto; overflow:hidden; position:relative }
  .ach-ticker-track{ display:inline-flex; gap:34px; padding:10px 0; white-space:nowrap;
    will-change:transform }
  .ach-ticker-track.scroll{ animation:ach-scroll 40s linear infinite }
  .ach-ticker:hover .ach-ticker-track.scroll{ animation-play-state:paused }
  .ach-item{ display:inline-flex; align-items:center; gap:10px; font-size:18px; color:var(--ink) }
  .ach-item img{ width:28px; height:28px; image-rendering:pixelated;
    box-shadow:0 0 0 2px #000, 0 0 8px rgba(255,210,63,.4) }
  .ach-item .ach-name{ font-family:'Press Start 2P'; font-size:9px; color:var(--cyan) }
  .ach-item .ach-game{ color:var(--dim) }
  .ach-item .ach-pts{ color:var(--gold); font-weight:bold }
  @keyframes ach-scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
  @media (prefers-reduced-motion: reduce){
    .ach-ticker-track{ animation:none }
    .ach-ticker-viewport{ overflow-x:auto }
  }