:root{
      --bg:#081225;
      --panel:#10213f;
      --panel-dark:#07152c;
      --mint:#7cff9b;
      --lime:#9cff57;
      --cyan:#58d8ff;
      --pink:#ff5fd2;
      --gold:#ffd84f;
      --cream:#ecffe6;
      --ink:#07101d;
      --blue:#244d8b;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:'Press Start 2P', cursive;
      color:var(--cream);
      overflow-x:hidden;
      image-rendering:pixelated;
      background:#081225;
    }

    .app-shell{
      width:100%;
      min-height:100vh;
      position:relative;
      overflow:hidden;
      background:
        radial-gradient(circle at 18% 14%, rgba(95,207,255,.14) 0 1px, transparent 2px),
        radial-gradient(circle at 66% 10%, rgba(255,255,255,.3) 0 1px, transparent 2px),
        radial-gradient(circle at 84% 22%, rgba(255,255,255,.35) 0 1px, transparent 2px),
        linear-gradient(#081225 0%, #0b1b3f 54%, #132f55 100%);
    }

    .scanlines:before{
      content:"";
      position:absolute; inset:0;
      background:repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 1px, transparent 1px 4px);
      opacity:.28;
      pointer-events:none;
      z-index:30;
    }

    .pixel-grid:after{
      content:"";
      position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
      background-size:8px 8px;
      pointer-events:none;
      z-index:29;
    }

    .star{
      position:absolute;
      width:4px;height:4px;background:#fff;
      box-shadow:0 0 0 2px rgba(255,255,255,.15);
      animation:twinkle 2.6s infinite steps(2,end);
    }
    @keyframes twinkle{50%{opacity:.25;transform:scale(.5)}}

    .cloud{
      position:absolute;
      width:120px;height:32px;
      background:#183464;
      box-shadow:
        16px -16px 0 #214574,
        40px -16px 0 #214574,
        72px -8px 0 #214574,
        96px 0 0 #183464;
      opacity:.8;
    }

    .mountains{
      position:absolute;left:0;right:0;bottom:142px;height:190px;
      background:
        linear-gradient(135deg, transparent 0 48%, #18396e 49% 51%, transparent 52%) 0 0/160px 160px repeat-x,
        linear-gradient(225deg, transparent 0 48%, #112b59 49% 51%, transparent 52%) 0 0/160px 160px repeat-x;
      opacity:.85;
    }

    .ground{
      position:absolute;left:0;right:0;bottom:0;height:152px;background:#153625;
      border-top:8px solid #7ddc55;
      box-shadow:0 -8px 0 #3b8f3e, 0 -16px 0 #225f30;
    }
    .ground:before{
      content:"";
      position:absolute;inset:0;
      background:
        linear-gradient(45deg, #1d4e30 25%, transparent 25%) 0 0/32px 32px,
        linear-gradient(-45deg, #1d4e30 25%, transparent 25%) 0 0/32px 32px;
      opacity:.6;
    }

    .platform{
      position:absolute;
      width:150px;height:34px;
      background:#7b4b23;
      border-top:8px solid #d59642;
      border-bottom:8px solid #4d2d16;
      box-shadow:0 8px 0 #2a1b12;
    }
    .platform:after{
      content:"";
      position:absolute;inset:0;
      background:repeating-linear-gradient(90deg, transparent 0 32px, rgba(0,0,0,.22) 32px 36px);
    }

    .pipe{
      position:absolute;bottom:152px;width:72px;height:112px;background:#29b84f;
      border-left:8px solid #62ef72;border-right:8px solid #14712e;
      box-shadow:0 8px 0 #103f24;
    }
    .pipe:before{
      content:"";position:absolute;left:-14px;top:-22px;width:92px;height:28px;
      background:#33d85d;border-left:8px solid #7cff8d;border-right:8px solid #127034;border-bottom:8px solid #148739;
    }

    .tree{
      position:absolute;bottom:152px;width:24px;height:84px;background:#8c5a2e;
      box-shadow:8px 0 0 #6d421d;
    }
    .tree:before{
      content:"";position:absolute;left:-28px;top:-58px;width:80px;height:64px;background:#1f9a55;
      box-shadow:
        8px -16px 0 #34c56e,
        28px -28px 0 #55e184,
        48px -10px 0 #2ab867,
        16px 16px 0 #157a45;
    }

    .cat{
      position:absolute;bottom:152px;width:42px;height:26px;background:#f8d2a2;
      box-shadow:0 8px 0 #b57d57;
    }
    .cat:before{
      content:"";position:absolute;left:4px;top:-10px;width:28px;height:14px;background:#f8d2a2;
      clip-path:polygon(0 100%,15% 0,35% 100%,65% 100%,85% 0,100% 100%);
    }
    .cat:after{
      content:"";position:absolute;right:-12px;top:8px;width:16px;height:8px;background:#f8d2a2;
      box-shadow:8px -4px 0 #f8d2a2;
    }

    .hud{
      position:relative;z-index:10;
      width:100%;
      padding:18px 28px 12px;
      background:rgba(4,12,28,.88);
      border-bottom:4px solid #1b5e78;
      box-shadow:0 4px 0 rgba(0,0,0,.45);
    }

    .hud-inner{
      max-width:1420px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;
    }

    .brand{
      color:var(--mint);font-size:14px;text-shadow:3px 3px 0 #123f25;
      white-space:nowrap;
    }

    .nav{
      display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;
    }
    .nav a{
      color:#83d6ff;
      text-decoration:none;
      font-size:9px;
      padding:8px 0;
      transition:.2s ease;
      text-shadow:2px 2px 0 #09213a;
    }
    .nav a:hover,.nav a:focus{
      color:var(--gold);
      transform:translateY(-2px);
      outline:none;
    }

    .hud-stats{display:flex;align-items:center;gap:14px;white-space:nowrap}
    .stat-box{
      background:#0b1831;border:3px solid #2f80a7;box-shadow:3px 3px 0 #04101d;
      padding:8px 10px;font-size:9px;color:var(--mint);
    }
    .coin-box{color:var(--gold);display:flex;align-items:center;gap:7px}
    .coin{
      width:18px;height:18px;background:var(--gold);border:3px solid #fff09a;border-radius:50%;
      box-shadow:2px 2px 0 #9d6500;display:inline-block;animation:bob 1.8s infinite steps(2,end);
    }
    @keyframes bob{50%{transform:translateY(-3px)}}

    .hero{
      position:relative;z-index:4;
      max-width:1180px;
      margin:0 auto;
      padding:86px 28px 56px;
      display:grid;
      grid-template-columns:1.12fr .88fr;
      gap:42px;
      align-items:center;
    }

    .hero-panel{
      background:rgba(8,21,46,.88);
      border:5px solid #55c9ff;
      box-shadow:8px 8px 0 #07101e, inset 0 0 0 4px #143e67;
      padding:28px;
      position:relative;
    }
    .hero-panel:before,.hero-panel:after{
      content:"";position:absolute;width:18px;height:18px;background:var(--gold);top:-11px;
      box-shadow:0 0 0 4px #8d6a17;
    }
    .hero-panel:before{left:-11px}
    .hero-panel:after{right:-11px}

    .kicker{font-size:10px;color:var(--gold);margin-bottom:20px;letter-spacing:1px}
    .hero-name{
      color:var(--mint);
      line-height:1.3;
      text-shadow:4px 4px 0 #0d5a2a;
      margin:0 0 18px;
    }
    .hero-role{
      color:#8cdcff;
      margin:0 0 20px;
      line-height:1.7;
      text-shadow:2px 2px 0 #0a2c49;
    }
    .hero-copy{
      color:#d8f5db;
      font-family:'Space Mono', monospace;
      line-height:1.8;
      max-width:580px;
      margin-bottom:24px;
    }

    .pixel-btn{
      display:inline-flex;align-items:center;gap:10px;
      border:none;cursor:pointer;
      padding:14px 16px;
      background:var(--pink);
      color:#fff;
      font-family:'Press Start 2P',cursive;
      font-size:10px;
      box-shadow:5px 5px 0 #7a225b;
      border:3px solid #ffb7ec;
      transition:.18s ease;
    }
    .pixel-btn:hover,.pixel-btn:focus{
      transform:translate(-2px,-2px);
      box-shadow:7px 7px 0 #7a225b;
      outline:3px solid var(--gold);
      outline-offset:3px;
    }

    .hero-side{
      position:relative;height:360px;
    }
    .game-window{
      position:absolute;right:0;top:22px;width:340px;background:#0a1b38;border:5px solid #78eaff;
      box-shadow:8px 8px 0 #06111e,inset 0 0 0 4px #163b67;
      padding:18px;
    }
    .window-top{
      display:flex;justify-content:space-between;color:var(--mint);font-size:8px;margin-bottom:16px;
    }
    .mini-scene{
      height:168px;background:linear-gradient(#142456 0 60%,#1f4772 60% 100%);
      position:relative;overflow:hidden;border:4px solid #11315c;
    }
    .mini-scene .moon{
      position:absolute;right:24px;top:20px;width:34px;height:34px;background:#f6f2b6;
      box-shadow:0 0 0 6px rgba(255,255,255,.08);
    }
    .mini-scene .mini-platform{
      position:absolute;bottom:22px;left:18px;width:110px;height:24px;background:#7a4b22;border-top:6px solid #e0a048;
    }
    .mini-scene .mini-platform.two{left:162px;bottom:64px;width:86px}
    .mini-scene .mini-cat{
      position:absolute;bottom:46px;left:60px;width:26px;height:18px;background:#f7d0a0;
    }
    .mini-scene .mini-pipe{
      position:absolute;bottom:24px;right:28px;width:34px;height:56px;background:#29bd51;border-left:5px solid #72f28a;border-right:5px solid #13733a;
    }
    .mini-scene .mini-pipe:before{
      content:"";position:absolute;left:-8px;top:-10px;width:44px;height:14px;background:#30d860;
    }

    .bar-label{font-size:8px;color:#d7ffe0;margin:14px 0 8px}
    .bar{height:14px;background:#08111f;border:3px solid #1b5e78;position:relative}
    .bar > span{display:block;height:100%;background:linear-gradient(90deg,#3be65b,#c6ff5a);width:78%}
    .bar.xp > span{background:linear-gradient(90deg,#4dcbff,#9f7cff);width:64%}

    .section{
      position:relative;z-index:5;
      max-width:1180px;
      margin:0 auto;
      padding:34px 28px 20px;
    }
    .section-title{
      color:var(--gold);
      text-shadow:3px 3px 0 #6d4900;
      margin-bottom:24px;
      line-height:1.5;
    }

    .feature-grid{
      display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
    }
    .feature-card{
      min-height:188px;
      background:#10213f;
      border:5px solid #4cc8ff;
      box-shadow:6px 6px 0 #06101d,inset 0 0 0 4px #173b61;
      padding:18px 16px;
      position:relative;
      transition:.18s ease;
      cursor:pointer;
    }
    .feature-card:hover,.feature-card:focus-within{
      transform:translate(-3px,-4px);
      box-shadow:9px 10px 0 #06101d,inset 0 0 0 4px #173b61;
    }
    .feature-card:nth-child(2){border-color:#53e987}
    .feature-card:nth-child(3){border-color:#ffd34f}
    .feature-card:nth-child(4){border-color:#ff76d7}

    .feature-icon{
      width:42px;height:42px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;
      background:#081325;border:4px solid currentColor;box-shadow:4px 4px 0 rgba(0,0,0,.35);
      color:var(--gold);
    }
    .feature-card h3{
      margin:0 0 12px;
      line-height:1.5;
      color:var(--mint);
      text-shadow:2px 2px 0 #123e25;
    }
    .feature-card p{
      margin:0;
      font-family:'Space Mono', monospace;
      line-height:1.7;
      color:#d8ecf7;
    }

    .vault{
      padding-top:58px;padding-bottom:80px;
    }
    .vault-head{
      display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px;
    }
    .vault-copy{
      font-family:'Space Mono', monospace;
      color:#b7d7d1;
      line-height:1.7;
      max-width:440px;
    }
    .vault-grid{
      display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
    }
    .vault-card{
      background:#0d1e38;border:5px solid #315d82;box-shadow:6px 6px 0 #06101d,inset 0 0 0 4px #173252;
      padding:20px;min-height:162px;position:relative;
    }
    .lock{
      color:var(--gold);
      width:30px;height:30px;margin-bottom:14px;
    }
    .vault-card h3{
      margin:0 0 10px;color:#c5ffd2;text-shadow:2px 2px 0 #194227;line-height:1.5;
    }
    .vault-card p{
      margin:0 0 14px;font-family:'Space Mono',monospace;color:#a7c9d6;line-height:1.6;
    }
    .progress{
      height:12px;background:#07111e;border:3px solid #315d82;
    }
    .progress span{display:block;height:100%;background:linear-gradient(90deg,#ffd84f,#ff9a4f)}

    footer{
      position:relative;z-index:5;
      background:#07111f;
      border-top:5px solid #1c5673;
      padding:24px 28px;
      text-align:center;
      box-shadow:0 -5px 0 rgba(0,0,0,.35);
    }
    footer p{
      margin:0 0 12px;
      color:#8bdcff;
      line-height:1.8;
    }
    footer .links{
      font-family:'Space Mono', monospace;
      color:#bfd8e8;
      line-height:1.8;
    }

    @media (max-width: 980px){
      .hud-inner{flex-direction:column;gap:12px}
      .hero{grid-template-columns:1fr;padding-top:58px}
      .hero-side{height:300px}
      .game-window{left:0;right:auto;max-width:100%}
      .feature-grid{grid-template-columns:repeat(2,1fr)}
    }

    @media (max-width: 640px){
      .hud{padding:14px 14px 10px}
      .nav{gap:10px}
      .nav a{font-size:7px}
      .brand{font-size:11px}
      .stat-box{font-size:7px;padding:6px 8px}
      .hero{padding:44px 16px 34px}
      .hero-panel{padding:20px}
      .hero-side{height:250px}
      .game-window{width:100%}
      .section{padding-left:16px;padding-right:16px}
      .feature-grid,.vault-grid{grid-template-columns:1fr}
      .vault-head{display:block}
      .cloud{transform:scale(.7)}
    }

      /* Reusable Global Retro Score Popup */
      .coin-popup {
          position: fixed;
          top: 70px;
          right: 5vw;
          color: #ffd84f;
          font-family: 'Press Start 2P', monospace;
          font-size: 14px;
          text-shadow: 2px 2px 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000, 1px 1px 0px #000;
          z-index: 1000;
          pointer-events: none;
          animation: coinFloat 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
      }
      
      @keyframes coinFloat {
          0% { transform: translateY(0) scale(1); opacity: 1; }
          100% { transform: translateY(-40px) scale(1.4); opacity: 0; }
      }
      /* ========================================= */
      /* GLOBAL MOBILE NAV BAR OPTIMIZATION        */
      /* ========================================= */
      @media (max-width: 768px) {
          .hud { padding: 12px 15px; }
          .hud-inner { 
              display: flex; 
              flex-wrap: wrap; 
              justify-content: space-between; 
              align-items: center; 
              gap: 10px; 
          }
          /* Forces Brand and Stats to the top row */
          .brand { order: 1; font-size: 1.1rem; margin: 0; }
          .hud-stats { order: 2; margin: 0; gap: 8px; }
          .stat-box { padding: 8px 10px; font-size: 0.7rem; }
          
          /* Forces Nav to the bottom row, making it scrollable with large tap targets */
          .nav { 
              order: 3; 
              width: 100%; 
              display: flex; 
              overflow-x: auto; 
              justify-content: flex-start; 
              gap: 12px; 
              padding: 15px 0 5px 0; 
              border-top: 2px dashed #1b5e78; 
              margin-top: 5px;
              -webkit-overflow-scrolling: touch;
          }
          .nav::-webkit-scrollbar { display: none; }
          .nav a { 
              font-size: 0.75rem !important; 
              padding: 10px 15px !important; 
              white-space: nowrap; 
              background: rgba(255,255,255,0.05); 
              border: 1px solid #1b5e78; 
              border-radius: 4px;
          }
      }