:root{
  --bg:#e6dbfb; --grid:rgba(91,42,134,.16); --glow:rgba(255,42,109,.28);
  --ink:#0b0614; --deep:#1a0b2e; --plum:#2d1b4e; --pink:#ff2a6d; --pink2:#ff71ce; --cyan:#01cdfe; --mint:#05ffa1; --lav:#b967ff; --sun:#fffb96; --pale:#e8e4ff;
  --fs:16px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0d0221; --grid:rgba(185,103,255,.17); --glow:rgba(255,42,109,.38); } }
:root[data-theme="dark"]{ --bg:#0d0221; --grid:rgba(185,103,255,.17); --glow:rgba(255,42,109,.38); }
html{ height:100%; scroll-padding-top:env(safe-area-inset-top,0px); }
body{
  height:100%; margin:0; overflow:hidden; color:var(--pale);
  background:
    radial-gradient(120% 55% at 50% 118%, var(--glow), transparent 62%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/28px 28px,
    var(--bg);
  font-family:"DotGothic16","Hiragino Sans","Noto Sans JP",sans-serif;
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent;
}
#safe{ position:fixed; visibility:hidden; pointer-events:none; padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); }
#stage{ position:fixed; overflow:hidden; background:var(--ink);
  box-shadow:0 0 0 2px var(--pink2), 0 0 0 5px var(--ink), 0 0 0 7px var(--cyan), 0 0 46px rgba(1,205,254,.32); }
#gl,#fx{ position:absolute; left:0; top:0; width:100%; height:100%; display:block; }
#gl{ image-rendering:crisp-edges; image-rendering:pixelated; }
#fx{ image-rendering:crisp-edges; image-rendering:pixelated; }
#ui{ position:absolute; inset:0; pointer-events:none; font-size:var(--fs); }
#ui [hidden]{ display:none !important; }
button{ font-family:inherit; -webkit-appearance:none; appearance:none; cursor:pointer; touch-action:manipulation; }
button:focus-visible{ outline:3px solid var(--sun); outline-offset:3px; }

#bootPlay{ position:absolute; border:0; background:transparent; pointer-events:auto; }
#bootText{ position:absolute; left:0; right:0; margin:0; text-align:center; color:var(--pale); letter-spacing:.08em; pointer-events:none; }
.chip{ position:absolute; pointer-events:auto; background:var(--deep); color:var(--pale); border:2px solid var(--lav); font-size:calc(var(--fs)*.85); padding:.35em .7em; }
#chipSound{ left:10px; top:10px; }

.px-btn{ pointer-events:auto; position:relative; font-size:var(--fs); line-height:1.1; color:var(--pale); background:var(--deep);
  border:2px solid var(--cyan); padding:.62em 1.05em; box-shadow:4px 4px 0 var(--pink); letter-spacing:.06em; white-space:nowrap; }
.px-btn.alt{ border-color:var(--lav); box-shadow:4px 4px 0 var(--plum); }
.pxt{ display:inline-block; vertical-align:middle; background:currentColor; -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; image-rendering:pixelated; }
.px-btn:hover,.px-btn:focus-visible{ background:var(--pink); color:var(--ink); border-color:var(--sun); outline:none; }
.px-btn.alt:hover,.px-btn.alt:focus-visible{ background:var(--lav); }
.px-btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--pink); }
.menu-v{ position:absolute; left:50%; transform:translateX(-50%); bottom:7%; display:flex; flex-direction:column; align-items:stretch; gap:.75em; pointer-events:none; min-width:min(15em,80%); }
.menu-v .px-btn::before{ content:""; position:absolute; left:-1.1em; top:50%; transform:translateY(-50%); border-left:.6em solid var(--sun); border-top:.4em solid transparent; border-bottom:.4em solid transparent; opacity:0; }
.menu-v .px-btn:hover::before,.menu-v .px-btn:focus-visible::before{ opacity:1; animation:blink .5s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.menu-v p,.note{ margin:.2em 0 0; text-align:center; font-size:calc(var(--fs)*.78); color:var(--pale); background:rgba(11,6,20,.72); padding:.3em .7em; }
.row{ display:flex; gap:1em; justify-content:center; flex-wrap:wrap; pointer-events:none; }

#carSel{ position:absolute; inset:0; pointer-events:none; transition:opacity .1s; }
#carSel.lock{ opacity:0; }
#carSel.lock *{ pointer-events:none !important; }
.arrow{ position:absolute; top:40%; width:calc(var(--fs)*2.8); height:calc(var(--fs)*2.8); pointer-events:auto; background:var(--deep); border:2px solid var(--cyan); box-shadow:3px 3px 0 var(--pink); }
.arrow::after{ content:""; position:absolute; left:50%; top:50%; border-top:.7em solid transparent; border-bottom:.7em solid transparent; }
.arrow.l{ left:3%; } .arrow.r{ right:3%; }
#carDesc{ display:none; }
@media (orientation: landscape){ #carSel .arrow{ top:auto; bottom:4%; } }
.arrow.l::after{ border-right:1em solid var(--sun); transform:translate(-62%,-50%); }
.arrow.r::after{ border-left:1em solid var(--sun); transform:translate(-38%,-50%); }
.arrow:hover,.arrow:focus-visible{ background:var(--pink); }
.sel-foot{ position:absolute; left:0; right:0; bottom:4%; display:flex; flex-direction:column; align-items:center; gap:.8em; pointer-events:none; }

#stageSel{ position:absolute; inset:0; display:grid; gap:.7em; padding:calc(var(--fs)*2.9) 3% 3%; background:rgba(11,6,20,.42); pointer-events:auto; }
#stageSel.land{ grid-template-columns:1.32fr 1fr; grid-template-rows:1fr auto; grid-template-areas:"grid detail" "act act"; }
#stageSel.port{ grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto auto; grid-template-areas:"detail" "grid" "act"; }
#stageGrid{ grid-area:grid; display:grid; grid-template-columns:repeat(4,1fr); gap:.45em; align-content:start; min-height:0; }
.card{ pointer-events:auto; position:relative; padding:3px 3px .3em; background:var(--deep); border:2px solid var(--plum); color:var(--pale); text-align:left; font-size:calc(var(--fs)*.62); line-height:1.25; min-width:0; }
.card canvas{ display:block; width:100%; height:auto; image-rendering:pixelated; margin-bottom:.25em; }
.card .nm{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card .md{ position:absolute; right:4px; top:4px; padding:0 .3em; font-size:.95em; color:var(--ink); }
.card.on{ border-color:var(--mint); box-shadow:0 0 0 2px var(--pink), 0 0 14px rgba(5,255,161,.45); }
.card:focus-visible{ outline:2px solid var(--sun); outline-offset:2px; }
#stageDetail{ grid-area:detail; display:flex; gap:.8em; min-height:0; overflow:hidden; background:rgba(26,11,46,.82); border:2px solid var(--lav); padding:.6em; }
#stageSel.land #stageDetail{ flex-direction:column; }
#stageSel.land #pcBig{ max-height:38%; }
#stageSel.land #stageDetail .info{ gap:.25em; }
#stageSel.land #stageDetail p{ font-size:calc(var(--fs)*.72); line-height:1.35; }
#pcBig{ display:block; image-rendering:pixelated; width:100%; height:auto; max-height:46%; object-fit:contain; align-self:center; }
#stageSel.port #stageDetail{ flex-direction:column; }
#stageSel.port #pcBig{ width:100%; flex:1 1 0; min-height:72px; max-height:none; object-fit:contain; object-position:center bottom; align-self:stretch; }
#stageSel.port #stageDetail .info{ flex:0 0 auto; }
#stageSel.port #stageGrid{ align-content:end; }
#stageSel.port.tall #stageGrid{ grid-template-columns:repeat(3,1fr); }
#stageSel.port.tall .card{ font-size:calc(var(--fs)*.72); }
#stageDetail .info{ min-width:0; display:flex; flex-direction:column; gap:.35em; }
#stageDetail h3{ margin:0; font-weight:400; font-size:calc(var(--fs)*1.08); color:var(--sun); letter-spacing:.05em; }
#stageDetail p{ margin:0; font-size:calc(var(--fs)*.78); line-height:1.45; }
.tags{ display:flex; flex-wrap:wrap; gap:.3em; }
.tag{ font-size:calc(var(--fs)*.62); padding:.15em .45em; border:1px solid var(--cyan); color:var(--cyan); }
.diff i{ display:inline-block; width:.7em; height:.7em; margin-right:.18em; background:var(--plum); vertical-align:-.05em; }
.diff i.f{ background:var(--pink); }
#stageSel.land .acts{ justify-content:flex-end; }
#stageSel.land #stageGrid{ align-content:center; }
.menu-v.compact{ gap:.42em; bottom:4%; }
.menu-v.two{ display:grid; grid-template-columns:1fr 1fr; gap:.6em .9em; min-width:min(25em,86%); }
.menu-v.two p{ grid-column:1 / -1; }
.menu-v.compact p{ display:none; }
.menu-v.compact .px-btn{ padding:.42em .9em; }
#stageSel .acts{ grid-area:act; display:flex; gap:.9em; justify-content:center; align-items:center; flex-wrap:wrap; }
#lvSel{ pointer-events:auto; display:flex; align-items:stretch; border:2px solid var(--lav); background:var(--deep); box-shadow:4px 4px 0 var(--plum); }
#lvSel .lvl{ align-self:center; padding:0 .6em; font-size:calc(var(--fs)*.7); color:var(--pale); opacity:.75; white-space:nowrap; }
#lvSel button{ font:inherit; font-size:calc(var(--fs)*.8); color:var(--pale); background:transparent; border:0; border-left:2px solid var(--plum); padding:.55em .8em; letter-spacing:.06em; cursor:pointer; }
#lvSel button:hover{ background:var(--plum); }
#lvSel button.on[data-lv="0"]{ background:var(--mint); color:var(--ink); }
#lvSel button.on[data-lv="1"]{ background:var(--cyan); color:var(--ink); }
#lvSel button.on[data-lv="2"]{ background:var(--pink); color:var(--ink); }
#lvSel button:focus-visible{ outline:2px solid var(--sun); outline-offset:-4px; }
#stageSel.port #lvSel{ order:-1; flex-basis:100%; justify-content:center; box-shadow:none; border-width:0; background:transparent; }
#stageSel.port #lvSel button{ border:2px solid var(--plum); margin-left:-2px; }
#stageSel.port #lvSel button:not(.on){ background:var(--deep); }

#btnPause{ position:absolute; left:50%; transform:translateX(-50%); top:8px; width:38px; height:38px; pointer-events:auto; background:rgba(26,11,46,.7); border:2px solid var(--lav); }
#btnPause::before,#btnPause::after{ content:""; position:absolute; top:10px; width:5px; height:14px; background:var(--pale); }
#btnPause::before{ left:11px; } #btnPause::after{ right:11px; }
.overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9em; background:rgba(11,6,20,.7); pointer-events:auto; }
#resultMenu{ position:absolute; left:0; right:0; bottom:6%; }
#tutMenu{ justify-content:flex-end; padding-bottom:9%; background:rgba(11,6,20,.3); }

#pad{ position:fixed; pointer-events:none; z-index:5; }
#pad[hidden]{ display:none; }
#pad .cluster{ position:absolute; bottom:0; display:flex; gap:12px; align-items:flex-end; pointer-events:none; }
#pad .cl{ left:0; } #pad .cr{ right:0; }
.key{ pointer-events:auto; position:relative; padding:0; border:2px solid var(--cyan); color:var(--pale); background:rgba(26,11,46,.86);
  font-size:max(12px,calc(14px*var(--ks,1))); white-space:nowrap; touch-action:none; box-shadow:3px 3px 0 var(--pink); }
.key.dir{ width:calc(84px*var(--ks,1)); height:calc(84px*var(--ks,1)); }
.key.dir::after{ content:""; position:absolute; left:50%; top:50%; border-top:14px solid transparent; border-bottom:14px solid transparent; }
#kL::after{ border-right:21px solid var(--sun); transform:translate(-62%,-50%); }
#kR::after{ border-left:21px solid var(--sun); transform:translate(-38%,-50%); }
.key.drift{ width:calc(118px*var(--ks,1)); height:calc(118px*var(--ks,1)); border-radius:50%; background:rgba(255,42,109,.88); border-color:var(--sun); color:var(--ink); font-size:calc(16px*var(--ks,1)); box-shadow:3px 3px 0 var(--lav); }
.key.on{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--pink); background:var(--cyan); color:var(--ink); }
.key.drift.on{ background:var(--sun); }
#pad[data-mode="over"] .key{ opacity:.84; }
#pad[data-mode="over"] .cl{ left:10px; bottom:10px; } #pad[data-mode="over"] .cr{ right:10px; bottom:10px; }
#pad[data-mode="below"] .cluster{ bottom:50%; transform:translateY(50%); }

#bgfx{ position:fixed; left:0; top:0; width:100%; height:100%; display:block; image-rendering:crisp-edges; image-rendering:pixelated; z-index:0; }
#stage{ z-index:2; }
#marq,#tick{ position:fixed; z-index:2; display:block; image-rendering:crisp-edges; image-rendering:pixelated; }
.side{ position:fixed; z-index:2; box-sizing:border-box; padding:14px 14px 12px; background:rgba(11,6,20,.8); border:2px solid var(--lav); box-shadow:4px 4px 0 var(--pink); color:var(--pale); font-size:14px; overflow:hidden; }
.side[hidden]{ display:none; }
.side h4{ margin:0 0 10px; font-weight:400; font-size:15px; letter-spacing:.14em; color:var(--cyan); }
.side h4 small{ color:var(--lav); font-size:12px; letter-spacing:.04em; margin-left:.6em; }
#sideList{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
#sideList li{ display:grid; grid-template-columns:2.1em 10px 1fr auto; align-items:center; gap:8px; padding:4px 7px; background:rgba(45,27,78,.7); font-size:13px; white-space:nowrap; }
#sideList li .nm{ overflow:hidden; text-overflow:ellipsis; }
#sideList li .cp{ width:10px; height:10px; }
#sideList li .gp{ color:var(--silver,#a99fd1); font-size:12px; }
#sideList li.me{ background:var(--pink); color:var(--ink); } #sideList li.me .gp{ color:var(--ink); }
#sideList li.gold{ box-shadow:inset 3px 0 0 #ffe14d; }
dl.keys{ display:grid; grid-template-columns:auto 1fr; gap:9px 10px; margin:0 0 12px; align-items:center; font-size:13px; }
dl.keys dt{ display:flex; gap:4px; } dl.keys dd{ margin:0; line-height:1.35; }
.kc{ position:relative; display:inline-block; min-width:26px; height:24px; padding:0 5px; box-sizing:border-box; border:2px solid var(--pale); box-shadow:2px 2px 0 var(--plum); font-size:11px; line-height:20px; text-align:center; color:var(--pale); }
.kc.ar::after{ content:""; position:absolute; left:50%; top:50%; border:6px solid transparent; }
.kc.l::after{ border-right-color:var(--sun); border-left-width:0; transform:translate(-60%,-50%); }
.kc.r::after{ border-left-color:var(--sun); border-right-width:0; transform:translate(-40%,-50%); }
.kc.d::after{ border-top-color:var(--sun); border-bottom-width:0; transform:translate(-50%,-40%); }
.side .small{ margin:0 0 12px; font-size:12px; line-height:1.5; color:#a99fd1; }
#nowInfo{ margin:0; font-size:13px; line-height:1.6; color:var(--sun); }
#pad .cl{ pointer-events:auto; touch-action:none; }
#pad .cl .key{ pointer-events:none; }
#pad .cl .key.dir{ height:calc(96px*var(--ks,1)); }
#padPause{ position:absolute; left:50%; top:4px; transform:translateX(-50%); width:46px; height:34px; pointer-events:auto; background:rgba(26,11,46,.86); border:2px solid var(--lav); display:none; }
#padPause::before,#padPause::after{ content:""; position:absolute; top:8px; width:5px; height:14px; background:var(--pale); }
#padPause::before{ left:14px; } #padPause::after{ right:14px; }
#pad[data-mode="below"] #padPause{ display:block; }
#pad .cl{ padding:5px; gap:0; background-color:rgba(13,2,33,.72); border:1px solid rgba(1,205,254,.55);
  background-image:linear-gradient(#fffb96,#fffb96),linear-gradient(#fffb96,#fffb96),linear-gradient(#fffb96,#fffb96),linear-gradient(#fffb96,#fffb96),linear-gradient(#fffb96,#fffb96),linear-gradient(#fffb96,#fffb96),linear-gradient(#fffb96,#fffb96),linear-gradient(#fffb96,#fffb96);
  background-size:14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px,14px 2px,2px 14px; background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%; background-repeat:no-repeat; }
#pad .cl::after{ content:""; position:absolute; left:50%; top:20%; bottom:20%; width:2px; margin-left:-1px; background:rgba(185,103,255,.55); }
#pad .key.dir{ background:transparent; border:0; box-shadow:none; width:calc(92px*var(--ks,1)); height:calc(96px*var(--ks,1)); }
#pad .key.dir::before,#pad .key.dir::after{ content:""; position:absolute; top:50%; border-top:12px solid transparent; border-bottom:12px solid transparent; transform:translateY(-50%); }
#kL::before{ left:28%; border-right:16px solid #01cdfe; } #kL::after{ left:50%; border-right:16px solid rgba(1,205,254,.4); }
#kR::before{ right:28%; border-left:16px solid #01cdfe; } #kR::after{ right:50%; left:auto; border-left:16px solid rgba(1,205,254,.4); }
#pad #kL.on{ background:linear-gradient(90deg,rgba(255,42,109,.85),rgba(255,42,109,0)); transform:none; box-shadow:none; }
#pad #kR.on{ background:linear-gradient(270deg,rgba(255,42,109,.85),rgba(255,42,109,0)); transform:none; box-shadow:none; }
#pad #kL.on::before,#pad #kL.on::after{ border-right-color:#fffb96; } #pad #kR.on::before,#pad #kR.on::after{ border-left-color:#fffb96; }
#pad .key.drift{ border:0; color:#0b0614; background:conic-gradient(var(--dc,#01cdfe) calc(var(--chg,0) * 360deg), rgba(232,228,255,.16) 0); box-shadow:0 0 0 2px #fffb96, 3px 3px 0 2px #b967ff; }
#pad .key.drift::before{ content:""; position:absolute; inset:10%; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ff71ce,#ff2a6d 55%,#8f1150); }
#pad .key.drift::after{ content:""; position:absolute; left:50%; bottom:0; width:3px; height:11%; background:#fffb96; transform:translateX(-50%); pointer-events:none; }
#pad .key.drift.on{ transform:none; } #pad .key.drift.on::before{ background:radial-gradient(circle at 35% 30%,#fffb96,#ffe14d 55%,#ff9e3d); }
#pad .key.drift.boost{ box-shadow:0 0 0 2px #05ffa1, 0 0 20px #ff2a6d, 3px 3px 0 2px #b967ff; }
#pad .key span{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; line-height:1.15; pointer-events:none; }
#pad .key .pxt{ display:block; margin:0 auto; }
#pad .key small{ font-size:.6em; letter-spacing:.14em; opacity:.85; }
@media (prefers-reduced-motion: reduce){ .menu-v .px-btn:hover::before,.menu-v .px-btn:focus-visible::before{ animation:none; } .px-btn:active,.key.on{ transform:none; } }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:-1px; }
.nojs{ position:fixed; left:16px; right:16px; top:40%; z-index:20; margin:0; padding:14px 16px; background:#1a0b2e; border:2px solid #b967ff; color:#e8e4ff; font:15px/1.6 "DotGothic16",sans-serif; text-align:center; }
/* credits and links live below the game, one screen down: on the title screen the page can be scrolled to them, everywhere else it stays locked */
#pageFoot{ position:relative; z-index:10; margin-top:100vh; margin-top:100lvh; padding:22px 16px calc(28px + env(safe-area-inset-bottom,0px)); background:var(--ink); border-top:2px solid var(--pink);
  box-shadow:0 -2px 0 var(--cyan) inset; text-align:center; font:13px/2 "DotGothic16","Hiragino Sans","Noto Sans JP",sans-serif; color:var(--pale); }
#pageFoot p{ margin:4px 0 0; color:#a99fd1; font-size:12px; }
#pageFoot .links{ display:flex; justify-content:center; flex-wrap:wrap; gap:4px 22px; }
#pageFoot a{ color:var(--pale); text-underline-offset:3px; touch-action:manipulation; }
#pageFoot .credit a{ color:#a99fd1; }
#pageFoot a:hover,#pageFoot a:focus-visible{ color:var(--sun); }
#pageFoot .bar{ margin:0 .3em; opacity:.6; }
html.scrollable,html.scrollable body{ height:auto; }
html.scrollable body{ overflow-x:hidden; overflow-y:auto; touch-action:pan-y; }