:root{
    --font-pixel:"Press Start 2P","DotGothic16","Courier New",monospace;
    --font-jp:"DotGothic16","Courier New",monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;
    user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
  html,body{width:100%;height:100%;overflow:hidden;background:#04040c;touch-action:none;
    font-family:var(--font-jp);}
  /* discrete tappable controls: allow tap (and scroll), block double-tap-zoom / magnifier loupe */
  #mute,#quickPause,.pbtn,.mc,.lvl,.stage,.creditLink{touch-action:manipulation;}
  #wrap,#crt{position:fixed;inset:0;touch-action:none;}
  #wrap{display:flex;align-items:center;justify-content:center;background:#04040c;}
  #screen{image-rendering:pixelated;image-rendering:crisp-edges;background:#000;touch-action:none;}
  /* ---------- loading screen (shown until fonts are ready) ---------- */
  #loading{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
    background:#04040c;transition:opacity .5s ease;}
  #loading.done{opacity:0;pointer-events:none;}
  .loadInner{display:flex;flex-direction:column;align-items:center;gap:18px;}
  .loadName{font:700 16px/1 "Courier New",monospace;color:#9fd8ff;letter-spacing:7px;
    text-shadow:0 0 12px rgba(0,229,255,.6);}
  .loadBar{width:190px;height:9px;background:#0d1730;overflow:hidden;
    box-shadow:0 0 0 2px #04040c,0 0 0 3px #2c4a7a;}
  .loadBar i{display:block;width:38%;height:100%;
    background:linear-gradient(90deg,#00e5ff,#ff3cb4);animation:loadSlide 1.1s ease-in-out infinite;}
  @keyframes loadSlide{0%{transform:translateX(-130%)}100%{transform:translateX(360%)}}
  .loadTxt{font:700 10px/1 "Courier New",monospace;color:#5f7398;letter-spacing:4px;
    animation:loadPulse 1.1s ease-in-out infinite;}
  @keyframes loadPulse{0%,100%{opacity:.35}50%{opacity:1}}
  /* pixel chrome helpers: hard stepped border via stacked box-shadow, no anti-alias */
  .px{position:relative;image-rendering:pixelated;}
  /* ---------- touch UI (steer L/R, split to opposite corners) ---------- */
  .tbtn{position:fixed;z-index:20;display:none;align-items:center;justify-content:center;
    touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
    -webkit-user-drag:none;-webkit-user-modify:read-only;
    background:rgba(8,14,34,.42);color:#bdf0ff;font-weight:900;
    box-shadow:0 0 0 2px #04040c,0 0 0 4px #37e6ff,inset 0 0 0 2px rgba(55,230,255,.18),0 0 16px rgba(55,230,255,.28);}
  .tbtn *{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
    -webkit-user-drag:none;-webkit-user-modify:read-only;}
  .tbtn i{font-size:40px;filter:drop-shadow(2px 2px 0 #06243a);pointer-events:none;}
  .tbtn:active,.tbtn.on{background:rgba(55,230,255,.28);box-shadow:0 0 0 2px #04040c,0 0 0 4px #7df3ff,inset 0 0 0 2px rgba(125,243,255,.35),0 0 20px rgba(55,230,255,.5);}
  #btnL{left:18px;bottom:20px;width:92px;height:104px;}
  #btnR{right:18px;bottom:20px;width:92px;height:104px;}
  /* ---------- overlays ---------- */
  .ovl{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;
    justify-content:flex-start;gap:14px;overflow-y:auto;padding:20px 14px 24px;
    background:
      linear-gradient(90deg,rgba(0,229,255,.08) 0 1px,transparent 1px 16px),
      linear-gradient(0deg,rgba(255,60,180,.07) 0 1px,transparent 1px 16px),
      repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px),
      linear-gradient(180deg,rgba(14,7,35,.95),rgba(3,4,14,.97));}
  #title.ovl{background:
      linear-gradient(90deg,rgba(0,229,255,.07) 0 1px,transparent 1px 16px),
      linear-gradient(0deg,rgba(255,60,180,.06) 0 1px,transparent 1px 16px),
      repeating-linear-gradient(0deg,rgba(0,0,0,.13) 0 2px,transparent 2px 4px),
      radial-gradient(ellipse at center,rgba(8,6,22,.38),rgba(2,3,10,.62));}
  .hidden{display:none !important;}
  #result.ovl{justify-content:center;background:
      linear-gradient(90deg,rgba(0,229,255,.06) 0 1px,transparent 1px 16px),
      linear-gradient(0deg,rgba(255,60,180,.05) 0 1px,transparent 1px 16px),
      repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 4px),
      radial-gradient(ellipse at center,rgba(4,6,18,.5),rgba(2,3,10,.72));}
  .logo{font-family:var(--font-pixel);font-weight:400;line-height:1.1;text-align:center;letter-spacing:0;
    font-size:clamp(25px,6.8vw,62px);color:#fff;margin-top:4px;
    text-shadow:
      4px 0 #ff3cb4, -4px 0 #00e5ff,
      0 4px 0 #1b0030, 4px 4px 0 #1b0030,
      0 0 18px rgba(255,60,180,.6);
    transform:skewX(-3deg);}
  .logoSub{font-family:var(--font-jp);color:#9fd8ff;font-size:clamp(10px,2.2vw,14px);letter-spacing:4px;font-weight:400;
    text-shadow:2px 2px 0 #06204a;}
  /* ---------- attract / press-button screen ---------- */
  #attract.ovl{justify-content:center;gap:16px;
    background:
      repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px 4px),
      radial-gradient(ellipse at center,rgba(4,5,16,.12) 38%,rgba(2,3,10,.62) 100%);}
  #attract .logo{font-size:clamp(34px,9vw,84px);margin-top:0;}
  #attract .logoSub{font-size:clamp(11px,2.6vw,17px);}
  .attractInner{display:flex;flex-direction:column;align-items:center;gap:12px;
    flex:1;justify-content:center;}
  #pressBtn{font-family:var(--font-pixel);font-size:clamp(12px,2.8vw,18px);color:#fff;
    letter-spacing:2px;margin-top:14px;
    text-shadow:0 0 10px rgba(0,229,255,.85),2px 2px 0 #1b0030;
    animation:pressBlink 1.05s steps(1) infinite;}
  @keyframes pressBlink{0%,52%{opacity:1}52.01%,100%{opacity:0}}
  /* footer: LICENSE + discreet credit links */
  .foot{display:flex;flex-direction:column;align-items:center;gap:7px;}
  .foot-abs{position:absolute;bottom:12px;left:0;right:0;}
  .credits{font-size:9px;color:#5f7398;text-align:center;line-height:1.7;letter-spacing:.5px;}
  .credits a{color:#7fa0c8;text-decoration:none;}
  .credits a:hover,.credits a:focus{color:#9fd8ff;text-decoration:underline;}
  /* difficulty (LEVEL) selector under KANI */
  #title .lvlTitle{margin-top:22px;}   /* space above LEVEL (beats .selectTitle shorthand) */
  #levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
  .lvl{cursor:pointer;text-align:center;font-family:var(--font-pixel);font-size:9px;color:#9fb6d8;
    padding:9px 0 8px;background:rgba(11,16,40,.9);
    box-shadow:0 0 0 2px #04040c,0 0 0 4px #1d2c4a;transition:transform .08s;}
  .lvl:hover{transform:translateY(-2px);}
  .lvl.sel{color:#fff;box-shadow:0 0 0 2px #04040c,0 0 0 4px #00e5ff,0 0 14px rgba(0,229,255,.5);
    transform:translateY(-2px);}
  .lvlLap{display:block;font-family:var(--font-jp);font-size:8px;color:#7fa0c8;margin-top:5px;letter-spacing:0;}
  .lvl.sel .lvlLap{color:#9fd8ff;}
  #menuShell{width:min(900px,100%);display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);gap:14px;align-items:start;}
  #title .selectBlock{background:rgba(7,10,25,.82);}
  .selectBlock{padding:10px;background:#070a19;display:flex;flex-direction:column;
    box-shadow:0 0 0 2px #04040c,0 0 0 4px #1d2c4a, inset 0 0 0 2px rgba(255,255,255,.03);}
  .selectTitle{font-family:var(--font-pixel);font-size:10px;color:#ffd23f;margin:0 0 9px;letter-spacing:0;
    text-shadow:2px 2px 0 #1b0030;}
  #machines,#stages{display:grid;gap:10px;}
  #machines{grid-template-columns:repeat(2,minmax(0,1fr));}
  #stages{grid-template-columns:1fr;flex:1 1 0;min-height:0;overflow-y:auto;
    padding-right:5px;scrollbar-width:thin;scrollbar-color:#2c4a7a #0a0f22;}
  #stages::-webkit-scrollbar{width:8px;}
  #stages::-webkit-scrollbar-track{background:#0a0f22;}
  #stages::-webkit-scrollbar-thumb{background:#2c4a7a;border:1px solid #04040c;}
  .mc,.stage{cursor:pointer;text-align:center;color:#cde;background:rgba(11,16,40,.9);
    box-shadow:0 0 0 2px #04040c,0 0 0 4px #1d2c4a;
    transition:transform .08s;}
  .mc{min-height:150px;padding:10px 10px 9px;}
  .stage{display:grid;grid-template-columns:34px 58px 1fr auto;gap:9px;align-items:center;min-height:58px;padding:9px 10px;text-align:left;}
  .stageMap{width:58px;height:42px;image-rendering:pixelated;background:#060a18;
    box-shadow:inset 0 0 0 1px rgba(120,160,220,.28);}
  .mc:hover,.stage:hover{transform:translateY(-2px);}
  .mc.sel,.stage.sel{box-shadow:0 0 0 2px #04040c,0 0 0 4px #00e5ff,0 0 18px rgba(0,229,255,.5);
    transform:translateY(-3px);}
  .mc .sushiPreview{width:104px;height:78px;image-rendering:pixelated;}
  .mc h3,.stage h3{font-family:var(--font-jp);font-size:13px;margin:3px 0 8px;color:#fff;font-weight:400;letter-spacing:0;}
  .stage h3{margin:0 0 5px;}
  .sinfo{min-width:0;overflow:hidden;}   /* let the 1fr column shrink so text never overflows the card */
  .stage p{font-size:10px;color:#7fa0c8;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .sfeat{font-size:9px;color:#ff9ec4;letter-spacing:0;margin-top:3px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:1px 1px 0 #1b0030;}
  .stage .no{font-family:var(--font-pixel);font-size:13px;color:#fff;text-align:center;background:#151b34;
    padding:8px 0;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35);}
  .stage .diff{font-size:10px;color:#ffd23f;white-space:nowrap;}
  /* per-stage trophy badge (gold/silver/bronze) overlaid on the course map; hidden when unearned */
  .smap{position:relative;display:inline-block;line-height:0;}
  .smap .trophy{display:none;position:absolute;top:-6px;right:-6px;font-size:13px;line-height:1;
    text-shadow:0 0 3px #000,1px 1px 0 #04040c,-1px 1px 0 #04040c;}
  .smap .trophy.t1,.smap .trophy.t2,.smap .trophy.t3{display:block;}
  .smap .trophy.t1{color:#ffd23f;}   /* gold  = 1st */
  .smap .trophy.t2{color:#e6eef8;}   /* silver= 2nd */
  .smap .trophy.t3{color:#e0915a;}   /* bronze= 3rd */
  .stat{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:6px;margin:5px 0;}
  .stat span{font-size:8px;color:#7fa0c8;text-align:right;letter-spacing:1px;}
  /* segmented pixel bar */
  .bar{height:7px;background:#0d1730;overflow:hidden;
    box-shadow:0 0 0 1px #04040c,0 0 0 2px #2c4a7a;
    background-image:repeating-linear-gradient(90deg,transparent 0 4px,#04040c 4px 5px);}
  .bar i{display:block;height:100%;
    background:repeating-linear-gradient(90deg,#00e5ff 0 4px,transparent 4px 5px),
      linear-gradient(90deg,#00e5ff,#ff3cb4);}
  .pbtn{font-family:var(--font-pixel);font-size:clamp(12px,2.2vw,17px);font-weight:400;letter-spacing:0;
    padding:14px 44px;color:#fff;cursor:pointer;border:0;
    background:#c00080;
    box-shadow:0 0 0 2px #04040c,0 0 0 4px #ff8ad6,0 6px 0 0 #57003a,0 6px 0 2px #04040c,0 0 20px rgba(255,60,180,.5);}
  #startBtn{margin:4px 0 6px;}
  .pbtn i{display:inline-flex;align-items:center;justify-content:center;font-size:.9em;margin-right:10px;vertical-align:middle;transform:translateY(-1px);}
  .pbtn:active{transform:translateY(4px);
    box-shadow:0 0 0 2px #04040c,0 0 0 4px #ff8ad6,0 2px 0 0 #57003a,0 2px 0 2px #04040c;}
  .pbtn.alt{background:#016b9c;
    box-shadow:0 0 0 2px #04040c,0 0 0 4px #7df3ff,0 6px 0 0 #013,0 6px 0 2px #04040c,0 0 16px rgba(0,229,255,.45);}
  .pbtn.alt:active{box-shadow:0 0 0 2px #04040c,0 0 0 4px #7df3ff,0 2px 0 0 #013,0 2px 0 2px #04040c;}
  #hint{color:#7f9ad0;font-size:10px;text-align:center;line-height:1.9;letter-spacing:0;
    padding:10px 18px;background:#080a1c;
    box-shadow:0 0 0 2px #04040c,0 0 0 4px #1d2c4a;}
  #title .foot{margin-top:10px;}
  .creditLink{font-family:var(--font-pixel);font-size:9px;color:#ffd23f;text-decoration:none;
    padding:9px 12px;background:#070a19;
    box-shadow:0 0 0 2px #04040c,0 0 0 4px #32456c;}
  .creditLink:hover,.creditLink:focus{color:#fff;box-shadow:0 0 0 2px #04040c,0 0 0 4px #00e5ff;}
  .creditLink i{margin-right:7px;}
  /* CRT scanlines + vignette over the canvas */
  #crt{position:fixed;inset:0;z-index:15;pointer-events:none;
    background:
      radial-gradient(ellipse at center,transparent 56%,rgba(0,0,8,.46) 100%),
      repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);}
  /* pause veil (auto-pause when the tab loses focus during a race) */
  #pause.ovl{z-index:50;justify-content:center;
    background:rgba(4,4,12,.82);backdrop-filter:blur(1px);}
  #pause .pauseInner{text-align:center;width:min(340px,calc(100vw - 36px));}
  #pause .pauseTitle{font-family:var(--font-pixel);font-size:clamp(22px,6vw,42px);color:#aef6ff;letter-spacing:2px;
    text-shadow:3px 3px 0 #1b0030,0 0 16px rgba(120,220,255,.5);}
  #pause .pauseActions{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:28px;}
  #pause .pauseActions .pbtn{width:100%;padding-left:16px;padding-right:16px;font-size:clamp(11px,2vw,15px);}
  /* results */
  #resBox{padding:24px 38px;text-align:center;color:#dfe9ff;min-width:300px;
    background:rgba(8,12,31,.92);
    box-shadow:0 0 0 2px #04040c,0 0 0 4px #00e5ff,0 0 30px rgba(0,229,255,.3);}
  #resHdr{font-family:var(--font-pixel);font-size:11px;letter-spacing:0;color:#7fa0c8;}
  #resRank{font-family:var(--font-pixel);font-size:54px;font-weight:400;line-height:1.25;
    background:linear-gradient(180deg,#fff,#ffd23f,#ff7a00);-webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(3px 3px 0 #1b0030);}
  #resLaps{margin:14px 0;font-family:var(--font-jp);font-size:12px;}
  .lr{display:flex;justify-content:space-between;gap:30px;padding:5px 4px;
    border-bottom:2px dotted #1c2c50;color:#7fa0c8;}
  .lr b{color:#fff;font-weight:700;}
  .lr em{color:#ffd23f;font-style:normal;}
  #resTotal{font-size:14px;font-weight:700;margin-bottom:14px;letter-spacing:1px;}
  #mute{position:fixed;top:12px;right:12px;z-index:40;width:40px;height:40px;
    border:0;background:#080a1c;color:#9fd8ff;font-size:16px;cursor:pointer;
    box-shadow:0 0 0 2px #04040c,0 0 0 3px #345;}
  #quickPause{position:fixed;top:12px;left:12px;z-index:45;display:inline-flex;align-items:center;gap:7px;
    height:40px;padding:0 11px;border:0;cursor:pointer;
    font-family:var(--font-pixel);font-size:8px;letter-spacing:0;color:#9fd8ff;background:#080a1c;
    box-shadow:0 0 0 2px #04040c,0 0 0 3px #345;}
  #quickPause i{font-size:10px;}
  #quickPause:active{transform:translateY(2px);}
  @media (max-width:720px){
    .ovl{padding:14px 10px 22px;gap:10px;}
    #menuShell{grid-template-columns:1fr;}
    /* stacked layout: let the stage list grow to its content and scroll the page */
    #stages{flex:0 0 auto;overflow-y:visible;padding-right:0;}
    #machines{grid-template-columns:repeat(2,minmax(0,1fr));}
    .mc{min-height:138px;padding:8px;}
    .mc .sushiPreview{width:88px;height:66px;}
    .pbtn{width:min(100%,360px);padding:13px 12px;}
    #startBtn{margin:14px 0 12px;}
    #hint{font-size:9px;padding:9px 10px;}
    #title .foot{margin-top:14px;}
    .creditLink{font-size:8px;}
  }
  @media (max-width:420px){
    #machines{grid-template-columns:1fr;}
    .stage{grid-template-columns:30px 58px minmax(0,1fr);gap:8px 12px;}
    .stage .diff{grid-column:2 / -1;justify-self:end;}
  }