:root{
    /* ---- Blue Lock world palette ---- */
    --pitch-top:#3fa34d; --pitch-side:#2f7d3a; --pitch-line:#eaf6ff;
    --blue:#1f6feb; --blue-deep:#123a99; --blue-dark:#0a1740;
    --cyan:#37e2ff; --cyan-glow:#8ff4ff;
    --navy:#060c26; --navy-2:#0c1638; --navy-3:#122154;
    --steel:#6f7a94; --steel-dark:#485068; --steel-light:#9aa6c4;

    --ego:#00e0ff; --gold:#ffd23f; --danger:#ff3b6b; --danger-glow:#ff85a6;

    --paper:#e8f0ff; --paper-dim:#9fb2d8;

    /* striker flow accents */
    --isagi:#2b7fff; --bachira:#22c7a9; --chigiri:#ff5470;
    --kunigami:#ff8a2b; --nagi:#c9d2e6; --rin:#3a4fd8;
  }

  *{margin:0;padding:0;box-sizing:border-box}
  img,svg{image-rendering:pixelated}
  html{scroll-behavior:smooth}
  body{
    background:var(--navy);
    color:var(--paper);
    font-family:'VT323',monospace;
    font-size:20px;
    line-height:1.35;
    overflow-x:hidden;
    -webkit-font-smoothing:none;
  }
  ::selection{background:var(--cyan);color:var(--navy)}
  h1,h2,h3,.px{font-family:'Press Start 2P',monospace;line-height:1.5;letter-spacing:.02em}
  a{color:inherit}

  /* ----- pixel scrollbar ----- */
  ::-webkit-scrollbar{width:14px}
  ::-webkit-scrollbar-track{background:#0a1230}
  ::-webkit-scrollbar-thumb{background:#1f6feb;border:3px solid #0a1740}

  /* =========================================================
     Reusable Minecraft surfaces
     ========================================================= */
  .pixel-shadow{filter:drop-shadow(4px 4px 0 rgba(0,0,0,.6))}

  /* steel/concrete block texture (the prison walls) */
  .steel-bg{
    background-color:var(--steel-dark);
    background-image:
      linear-gradient(45deg, rgba(0,0,0,.16) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.16) 75%),
      linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.06) 75%);
    background-size:16px 16px, 16px 16px;
    background-position:0 0, 8px 8px;
  }
  /* blue circuit / lock texture */
  .lock-bg{
    background-color:var(--blue-deep);
    background-image:
      linear-gradient(45deg, rgba(0,0,0,.18) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.18) 75%),
      linear-gradient(45deg, rgba(55,226,255,.09) 25%, transparent 25%, transparent 75%, rgba(55,226,255,.09) 75%);
    background-size:16px 16px,16px 16px;
    background-position:0 0,8px 8px;
  }

  /* the classic 3px Minecraft bevel: light top/left, dark bottom/right */
  .bevel{
    border:3px solid;
    border-color:#ffffff55 #00000088 #00000088 #ffffff55;
    box-shadow:inset -3px -3px 0 #00000055, inset 3px 3px 0 #ffffff22;
  }

  /* =========================================================
     Heads-up display (goal balls + flow shields + EGO bar)
     ========================================================= */
  .hud{
    position:fixed; left:0; right:0; bottom:64px; z-index:120;
    display:flex; justify-content:space-between; align-items:flex-end;
    padding:0 14px; pointer-events:none;
  }
  .balls,.flow{display:flex;gap:3px}
  .ball,.shield{width:20px;height:20px;position:relative;filter:drop-shadow(1px 1px 0 #000)}
  .ball svg,.shield svg{width:100%;height:100%}

  /* EGO / ranking progress bar */
  .egobar{
    position:fixed; left:14px; right:14px; bottom:50px; height:10px; z-index:120;
    background:#08102c; border:2px solid #000; pointer-events:none;
  }
  .egobar > i{display:block;height:100%;width:0;background:var(--ego);box-shadow:0 0 8px var(--ego)}
  .egotag{
    position:fixed; left:16px; bottom:26px; z-index:120; pointer-events:none;
    font-family:'Press Start 2P'; font-size:8px; color:var(--ego); text-shadow:1px 1px 0 #000;
  }

  /* =========================================================
     Top nav
     ========================================================= */
  body > nav{
    position:fixed; top:0; left:0; right:0; z-index:130;
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 14px;
    background:rgba(6,12,38,.85); backdrop-filter:blur(2px);
    border-bottom:3px solid #000;
  }
  .brand{
    font-family:'Press Start 2P'; font-size:13px; color:var(--paper);
    text-decoration:none; display:flex; align-items:center; gap:8px;
    text-shadow:2px 2px 0 #000;
  }
  .brand .blk{width:22px;height:22px;display:inline-block}
  .brand .jp{font-family:'Noto Sans JP';font-weight:900;color:var(--cyan);font-size:16px}
  .nav-rank{font-size:16px;color:var(--ego);text-shadow:1px 1px 0 #000}

  /* =========================================================
     Buttons — Minecraft menu style
     ========================================================= */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-family:'Press Start 2P'; font-size:12px; color:#fff; text-decoration:none;
    text-shadow:2px 2px 0 #000; cursor:pointer;
    padding:16px 22px;
    background:#28407e;
    background-image:linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.2));
    border:3px solid; border-color:#0000 #0000 #0000 #0000;
    box-shadow:inset -3px -3px 0 #00000066, inset 3px 3px 0 #ffffff33, 4px 4px 0 #000;
    transition:filter .1s, transform .05s;
    image-rendering:pixelated; width:100%; max-width:340px;
  }
  .btn:hover{filter:brightness(1.2) saturate(1.15)}
  .btn:active{transform:translate(2px,2px); box-shadow:inset -3px -3px 0 #00000066, inset 3px 3px 0 #ffffff33, 2px 2px 0 #000}
  .btn.cyan{background:#1287c9}
  .btn.ego{background:#0f6fd6}
  .btn.steel{background:#5a6480}
  .btn.small{padding:10px 14px;font-size:10px}

  /* =========================================================
     HERO / Title screen
     ========================================================= */
  .hero{
    min-height:100vh; position:relative; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center;
    padding:90px 16px 140px;
    background:
      radial-gradient(120% 80% at 50% 0%, #12306e 0%, #0a1a44 45%, var(--navy) 100%);
    overflow:hidden;
  }
  /* parallax pixel stars + stadium floodlight orb */
  .sky{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
  .orb{
    position:absolute; top:9%; right:11%; width:108px; height:108px; border-radius:2px;
    background:
      radial-gradient(circle at 38% 34%, #d6f6ff 0%, #37e2ff 45%, #1f6feb 78%, #0b2f7a 100%);
    box-shadow:0 0 55px 16px #37e2ff55, 0 0 100px 34px #1f6feb33;
    border:4px solid #00000033;
  }
  /* the "Blue Lock eye" pupil */
  .orb::after{content:"";position:absolute;inset:0;background-image:
    radial-gradient(circle at 50% 50%, #05173f 6px, transparent 7px),
    radial-gradient(circle at 50% 50%, #0a1740 13px, transparent 14px),
    radial-gradient(circle at 30% 26%, #ffffff88 3px, transparent 4px);}
  .star{position:absolute;width:3px;height:3px;background:#fff;opacity:0;animation:tw 3s infinite}
  @keyframes tw{0%,100%{opacity:.15}50%{opacity:.95}}

  /* floating blue spark particles rising like flares */
  .ember{position:absolute;width:6px;height:6px;background:var(--cyan-glow);box-shadow:0 0 8px var(--cyan);
    bottom:-10px;opacity:.85;animation:rise linear infinite}
  @keyframes rise{to{transform:translateY(-115vh) translateX(40px);opacity:0}}

  .splash{
    font-family:'Press Start 2P'; color:var(--gold); font-size:13px;
    transform:rotate(-14deg); position:absolute; right:8%; top:34%;
    text-shadow:2px 2px 0 #4a3a00; animation:bob 1.2s ease-in-out infinite; z-index:5;
    max-width:30vw; pointer-events:none;
  }
  @keyframes bob{0%,100%{transform:rotate(-14deg) scale(1)}50%{transform:rotate(-14deg) scale(1.08)}}

  .title-wrap{position:relative;z-index:4}
  .hero h1{
    font-size:clamp(30px,8.4vw,88px); color:#eaf2ff;
    text-shadow:5px 5px 0 #0a1740, 9px 9px 0 #00000088;
    letter-spacing:.04em; line-height:1.1;
  }
  .hero h1 .accent{color:var(--cyan)}
  .hero .kanji-big{
    font-family:'Noto Sans JP'; font-weight:900; font-size:clamp(38px,10vw,112px);
    color:var(--cyan); opacity:.14; position:absolute; inset:-10% 0 auto 0; z-index:-1;
    letter-spacing:.24em; white-space:nowrap;
  }
  .hero .tagline{
    margin:18px auto 4px; max-width:640px; color:var(--paper-dim); font-size:21px;
  }
  .hero .version{margin-top:6px;color:var(--steel);font-size:15px}

  .menu{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:34px;width:100%;position:relative;z-index:6}
  .menu-row{display:flex;gap:12px;width:100%;max-width:340px}
  .menu-row .btn{flex:1}

  /* soccer-pitch ground strip at bottom of hero */
  .ground{position:absolute;left:0;right:0;bottom:0;height:96px;z-index:1;pointer-events:none}
  .ground .turf{height:26px;background:var(--pitch-top);
    background-image:linear-gradient(90deg,#00000018 50%,transparent 50%);background-size:20px 26px;
    border-top:3px solid var(--pitch-line); border-bottom:4px solid #256a2f}
  .ground .soil{height:70px;background:var(--pitch-side);
    background-image:linear-gradient(90deg,#00000022 50%,transparent 50%);background-size:20px 20px}

  /* checkered blue divider */
  .checker{height:18px;width:100%;
    background-image:
      linear-gradient(45deg,var(--blue) 25%,transparent 25%),
      linear-gradient(-45deg,var(--blue) 25%,transparent 25%),
      linear-gradient(45deg,transparent 75%,var(--blue) 75%),
      linear-gradient(-45deg,transparent 75%,var(--blue) 75%);
    background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;
    background-color:#050a1f}

  /* =========================================================
     General section shell
     ========================================================= */
  section{position:relative;padding:84px 18px;z-index:2}
  .wrap{max-width:1080px;margin:0 auto}
  .section-title{
    font-size:clamp(18px,4vw,30px); color:#fff; text-shadow:3px 3px 0 #000;
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px;
  }
  .section-title .jp{font-family:'Noto Sans JP';font-weight:900;color:var(--cyan);font-size:.7em;opacity:.9}
  .section-sub{color:var(--paper-dim);font-size:19px;margin-bottom:34px;max-width:720px}

  /* About — written as a Minecraft "dossier" book */
  #about{background:var(--navy-2)}
  .book{
    max-width:760px;margin:0 auto;padding:30px 32px;
    background:#dfe9ff;background-image:linear-gradient(180deg,#eef4ff,#c8d7f4);
    color:#0c1740; border:4px solid #28407e;
    box-shadow:inset -4px -4px 0 #00000022, inset 4px 4px 0 #ffffff88, 8px 8px 0 #00000066;
    font-size:21px; line-height:1.5; position:relative;
  }
  .book::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;background:#28407e55;transform:translateX(-50%)}
  .book h3{font-size:14px;color:#123a99;margin-bottom:14px;text-shadow:1px 1px 0 #ffffffaa}
  .book p{margin-bottom:12px}
  .book .pg{position:absolute;bottom:8px;right:14px;font-size:15px;color:#28407e}
  .book b{color:#123a99}
  .book .stamp{
    position:absolute;top:16px;right:18px;transform:rotate(9deg);
    font-family:'Press Start 2P';font-size:9px;color:#ff3b6b;
    border:3px solid #ff3b6b;padding:6px 8px;opacity:.75;
  }

  /* =========================================================
     Egoist Weapons = enchantment / inventory grid
     ========================================================= */
  .weapons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
  .item-slot{
    background:#111d44; border:4px solid;border-color:#0a1230 #2c3d78 #2c3d78 #0a1230;
    padding:18px; position:relative; overflow:hidden;
    text-align:center; transition:transform .12s, filter .12s;
  }
  .item-slot:hover{transform:translateY(-4px);filter:brightness(1.12)}
  /* enchant glimmer sweep */
  .item-slot .ench{position:absolute;inset:0;pointer-events:none;opacity:.0;transition:opacity .2s;
    background:linear-gradient(120deg,transparent 30%,var(--flow,#37e2ff) 50%,transparent 70%);
    mix-blend-mode:screen;transform:translateX(-40%);animation:sweep 3.5s linear infinite}
  .item-slot:hover .ench{opacity:.28}
  @keyframes sweep{to{transform:translateX(140%)}}
  .item-slot .icon{font-size:44px;line-height:1;filter:drop-shadow(2px 2px 0 #000)}
  .item-slot h3{font-size:13px;margin:12px 0 2px;color:#fff;text-shadow:2px 2px 0 #000}
  .item-slot .jp{font-family:'Noto Sans JP';font-weight:700;color:var(--flow,#37e2ff);font-size:16px}
  .item-slot .wpn{
    display:inline-block;margin:8px 0 6px;font-family:'Press Start 2P';font-size:8px;
    color:#04122e;background:var(--flow,#37e2ff);padding:5px 7px;text-shadow:none;
  }
  .item-slot p{font-size:17px;color:var(--paper-dim);min-height:3em}
  .item-slot .bar{height:10px;background:#08102c;border:2px solid #000;margin:10px 0 4px}
  .item-slot .bar i{display:block;height:100%}
  .item-slot .dura{font-family:'Press Start 2P';font-size:8px;color:var(--steel-light)}

  /* =========================================================
     The Program = advancement cards
     ========================================================= */
  #program{background:var(--navy-2)}
  .adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
  .adv{
    position:relative;padding:20px 18px 18px;
    background:#0e1a42;border:4px solid;border-color:#25366f #060c26 #060c26 #25366f;
    box-shadow:6px 6px 0 #00000055;
  }
  .adv .no{position:absolute;top:-14px;left:14px;width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
    background:var(--cyan);color:#04122e;font-family:'Press Start 2P';font-size:12px;
    border:3px solid #000;box-shadow:2px 2px 0 #000}
  .adv h3{font-size:12px;color:#fff;text-shadow:2px 2px 0 #000;margin:8px 0 4px}
  .adv .jp{font-family:'Noto Sans JP';font-weight:700;color:var(--cyan);font-size:15px}
  .adv p{font-size:17px;color:var(--paper-dim);margin-top:8px}
  .adv .tag{display:inline-block;margin-top:12px;font-family:'Press Start 2P';font-size:7px;
    color:var(--gold);border:2px solid var(--gold);padding:4px 6px}

  /* =========================================================
     CTA strip
     ========================================================= */
  .cta{
    max-width:820px;margin:0 auto;text-align:center;padding:34px 26px;
    background:var(--blue-deep);
    background-image:linear-gradient(180deg,rgba(55,226,255,.14),rgba(0,0,0,.25));
    border:4px solid #000;
    box-shadow:inset -4px -4px 0 #00000066, inset 4px 4px 0 #ffffff22, 8px 8px 0 #00000066;
  }
  .cta h2{font-size:clamp(16px,3.4vw,24px);color:#fff;text-shadow:3px 3px 0 #000;margin-bottom:12px}
  .cta p{color:var(--paper-dim);font-size:19px;margin-bottom:22px}
  .cta .btn{margin:0 auto}

  /* =========================================================
     Footer
     ========================================================= */
  footer{
    text-align:center;padding:40px 18px 90px;background:var(--navy);
    border-top:3px solid #000;color:var(--paper-dim);font-size:17px;
  }
  footer .fblk{display:flex;justify-content:center;gap:6px;margin-bottom:14px}
  footer .fblk span{width:16px;height:16px;display:inline-block;border:2px solid #000}
  footer .px{font-size:9px;color:var(--steel);margin-top:8px}
  footer a{color:var(--cyan);text-decoration:none}

  /* =========================================================
     Striker Shootout (canvas game)
     ========================================================= */
  #game{background:var(--navy)}
  .game-hud{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
  .game-stat{
    flex:1;min-width:96px;background:#0e1a42;border:3px solid;
    border-color:#25366f #060c26 #060c26 #25366f;padding:10px 12px;text-align:center;
  }
  .game-stat .k{font-family:'Press Start 2P';font-size:8px;color:var(--steel-light);margin-bottom:6px}
  .game-stat .v{font-family:'Press Start 2P';font-size:16px;color:#fff;text-shadow:2px 2px 0 #000}
  .game-stat.best .v{color:var(--gold)}
  .game-stat .lives{display:flex;gap:3px;justify-content:center}
  .game-stat .lives span{width:14px;height:14px;background:var(--danger);
    box-shadow:1px 1px 0 #000;transition:opacity .2s}
  .game-stat .lives span.gone{opacity:.15;background:#3a4160}

  .game-stage{position:relative;max-width:520px;margin:0 auto;
    border:4px solid #000;box-shadow:8px 8px 0 #00000066;line-height:0}
  #gameCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}
  .game-overlay{
    position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;gap:12px;padding:20px;
    background:rgba(6,12,38,.86);backdrop-filter:blur(2px);
  }
  .game-overlay.hidden{display:none}
  .game-overlay h3{font-size:16px;color:var(--cyan);text-shadow:3px 3px 0 #000}
  .game-overlay .sub{color:var(--paper-dim);font-size:18px;max-width:360px;line-height:1.3}
  .game-help{text-align:center;color:var(--steel-light);font-size:17px;margin-top:16px}
  .game-help kbd{
    font-family:'Press Start 2P';font-size:9px;background:#0e1a42;color:#fff;
    border:2px solid #000;box-shadow:2px 2px 0 #000;padding:4px 6px;margin:0 2px;
  }

  /* =========================================================
     The Locker Room (character creator)
     ========================================================= */
  #locker{background:var(--navy-2)}
  .locker-grid{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
  .striker-card{
    background:var(--blue-deep);
    background-image:linear-gradient(180deg,rgba(55,226,255,.12),rgba(0,0,0,.28));
    border:4px solid #000;padding:16px;text-align:center;
    box-shadow:inset -4px -4px 0 #00000055, inset 4px 4px 0 #ffffff22, 8px 8px 0 #00000066;
  }
  #lockCanvas{display:block;width:180px;height:auto;margin:0 auto;image-rendering:pixelated;
    background:radial-gradient(circle at 50% 40%,#12306e,#08102c)}
  .lk-name{font-family:'Press Start 2P';font-size:13px;color:#fff;text-shadow:2px 2px 0 #000;margin-top:12px;word-break:break-word}
  .lk-sub{font-family:'Press Start 2P';font-size:8px;color:var(--cyan);margin-top:8px}

  .locker-panel{background:#0e1a42;border:4px solid;border-color:#25366f #060c26 #060c26 #25366f;padding:18px}
  .ctrl{margin-bottom:16px}
  .ctrl > label{display:block;font-family:'Press Start 2P';font-size:9px;color:var(--steel-light);margin-bottom:9px}
  .swatches{display:flex;flex-wrap:wrap;gap:7px}
  .sw{width:28px;height:28px;cursor:pointer;border:3px solid;
    border-color:#ffffff44 #00000088 #00000088 #ffffff44;box-shadow:2px 2px 0 #000;padding:0}
  .sw.active{outline:3px solid var(--cyan);outline-offset:2px}
  .fields{display:flex;gap:12px;flex-wrap:wrap}
  .field{flex:1;min-width:120px}
  .field input{
    width:100%;font-family:'VT323',monospace;font-size:22px;color:#fff;
    background:#08102c;border:3px solid #000;box-shadow:inset 2px 2px 0 #00000066;
    padding:6px 10px;text-transform:uppercase;
  }
  .field input:focus{outline:2px solid var(--cyan)}
  .pos-btns{display:flex;flex-wrap:wrap;gap:8px}
  .pos-btn{
    font-family:'Press Start 2P';font-size:8px;color:#cfe0ff;cursor:pointer;
    background:#16224e;border:3px solid;border-color:#2c3d78 #060c26 #060c26 #2c3d78;
    padding:9px 10px;box-shadow:2px 2px 0 #000;
  }
  .pos-btn.active{background:var(--cyan);color:#04122e}
  .locker-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
  @media (max-width:640px){ .locker-grid{grid-template-columns:1fr} }

  /* Egoist Dash reuses the shared .game-* classes */
  #dash{background:var(--navy-2)}
  #dashCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:none;cursor:pointer}
  .game-stat.flowst .v{color:var(--cyan)}

  /* Metavision reuses the shared .game-* classes */
  #reflex{background:var(--navy)}
  #reflexCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}

  /* Ball Control reuses the shared .game-* classes */
  #juggle{background:var(--navy-2)}
  #juggleCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}

  /* Chain Reaction reuses the shared .game-* classes */
  #chain{background:var(--navy)}
  #chainCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}

  /* Last Line reuses the shared .game-* classes */
  #keeper{background:var(--navy-2)}
  #keeperCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:none;cursor:pointer}

  /* Dead Ball reuses the shared .game-* classes */
  #freekick{background:var(--navy)}
  #freekickCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:none;cursor:pointer}

  /* Breakthrough reuses the shared .game-* classes */
  #dribble{background:var(--navy)}
  #dribbleCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:none;cursor:pointer}

  /* Wall Breaker reuses the shared .game-* classes */
  #breaker{background:var(--navy-2)}
  #breakerCanvas{display:block;width:100%;height:auto;background:#0a1740;
    image-rendering:pixelated;touch-action:none;cursor:pointer}

  /* Assist Chain reuses the shared .game-* classes */
  #snake{background:var(--navy)}
  #snakeCanvas{display:block;width:100%;height:auto;background:#0e1a42;
    image-rendering:pixelated;touch-action:none;cursor:pointer}

  /* Rising Star reuses the shared .game-* classes */
  #flap{background:var(--navy-2)}
  #flapCanvas{display:block;width:100%;height:auto;background:#0a1740;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}

  /* Rank Up reuses the shared .game-* classes */
  #rankup{background:var(--navy)}
  #rankupCanvas{display:block;width:100%;height:auto;background:#0a1740;
    image-rendering:pixelated;touch-action:none;cursor:pointer}

  /* Ego Tower reuses the shared .game-* classes */
  #tower{background:var(--navy-2)}
  #towerCanvas{display:block;width:100%;height:auto;background:#0a1740;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}

  /* Scout Report reuses the shared .game-* classes */
  #memory{background:var(--navy)}
  #memoryCanvas{display:block;width:100%;height:auto;background:#0e1a42;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}

  /* Onslaught reuses the shared .game-* classes */
  #onslaught{background:var(--navy-2)}
  #onslaughtCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:none;cursor:pointer}

  /* One-Two reuses the shared .game-* classes */
  #pass{background:var(--navy)}
  #passCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}

  /* Header Attack reuses the shared .game-* classes */
  #aerial{background:var(--navy-2)}
  #aerialCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}

  /* Penalty Shootout reuses the shared .game-* classes */
  #pk{background:var(--navy)}
  #pkCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}

  /* Crossbar Challenge reuses the shared .game-* classes */
  #crossbar{background:var(--navy-2)}
  #crossbarCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}

  /* Sliding Tackle reuses the shared .game-* classes */
  #tackle{background:var(--navy)}
  #tackleCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:none;cursor:pointer}

  /* Volley reuses the shared .game-* classes */
  #volley{background:var(--navy-2)}
  #volleyCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}

  /* Through Ball reuses the shared .game-* classes */
  #through{background:var(--navy)}
  #throughCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}

  /* Corner Kick reuses the shared .game-* classes */
  #corner{background:var(--navy-2)}
  #cornerCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}

  /* First Touch reuses the shared .game-* classes */
  #touch{background:var(--navy)}
  #touchCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}

  /* Long Shot reuses the shared .game-* classes */
  #longshot{background:var(--navy-2)}
  #longshotCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}

  /* Chip Shot reuses the shared .game-* classes */
  #chip{background:var(--navy)}
  #chipCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}

  /* Poacher reuses the shared .game-* classes */
  #poacher{background:var(--navy-2)}
  #poacherCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:none;cursor:pointer}

  /* Long Throw reuses the shared .game-* classes */
  #throwin{background:var(--navy)}
  #throwinCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:manipulation;cursor:pointer}

  /* Dribble Slalom reuses the shared .game-* classes */
  #slalom{background:var(--navy-2)}
  #slalomCanvas{display:block;width:100%;height:auto;background:#2f7d3a;
    image-rendering:pixelated;touch-action:none;cursor:pointer}

  /* =========================================================
     reveal on scroll
     ========================================================= */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .5s, transform .5s}
  .reveal.in{opacity:1;transform:none}

  @media (max-width:620px){
    body{font-size:19px}
    .splash{position:static;display:inline-block;margin-top:14px;max-width:90vw;transform:rotate(-6deg)}
    .orb{width:72px;height:72px;top:11%;right:8%}
    .hud{bottom:58px}
  }
/* ===================== SPLIT-PAGE ADDITIONS ===================== */
/* --- arcade hub hero --- */
.hub-hero{position:relative;overflow:hidden;padding:64px 18px 40px;text-align:center;
  border-bottom:4px solid #0a1740;background:radial-gradient(120% 90% at 50% 0%,#123 0%,#0a1230 60%,#060a1c 100%)}
.hub-head{position:relative;z-index:2;max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px}
.hub-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:640px}
.pill{font-family:'Press Start 2P',monospace;font-size:9px;line-height:1.4;color:#eaf6ff;
  text-decoration:none;padding:8px 10px;background:#12306e;border:2px solid #37e2ff;border-radius:3px;
  box-shadow:2px 2px 0 #0a1740;transition:transform .08s,background .12s}
.pill:hover{background:#1f6feb;transform:translate(-1px,-1px)}
/* --- landing directory cards --- */
.dir{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;max-width:520px;margin:4px 0}
.dir-card{display:flex;flex-direction:column;gap:5px;text-align:left;text-decoration:none;
  padding:14px 14px 12px;background:#0e1f52;border:3px solid #37e2ff;border-radius:4px;
  box-shadow:4px 4px 0 #0a1740;transition:transform .08s,box-shadow .08s,background .12s}
.dir-card:hover{background:#153a8c;transform:translate(-2px,-2px);box-shadow:6px 6px 0 #0a1740}
.dir-card .dc-jp{font-family:'Noto Sans JP',sans-serif;font-weight:900;font-size:13px;color:#8ff4ff}
.dir-card .dc-t{font-family:'Press Start 2P',monospace;font-size:13px;color:#fff}
.dir-card .dc-d{font-family:'VT323',monospace;font-size:16px;line-height:1.15;color:#bcd4ff}
.dir-card .dc-n{font-family:'Press Start 2P',monospace;font-size:9px;color:#ffd23f;margin-top:2px}
@media(max-width:520px){.dir{grid-template-columns:1fr}}
.site-foot{text-align:center;padding:34px 18px;font-family:'VT323',monospace;font-size:18px;color:#9fb6e6;
  border-top:4px solid #0a1740;background:#060a1c}