@font-face{font-family:'Silkscreen';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/silkscreen-latin-400-normal.woff2) format('woff2'),url(../fonts/silkscreen-latin-400-normal.woff) format('woff')}
@font-face{font-family:'Silkscreen';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/silkscreen-latin-700-normal.woff2) format('woff2'),url(../fonts/silkscreen-latin-700-normal.woff) format('woff')}

/* Layout: one-screen arcade cabinet. Game canvas on top, thumb controls below (portrait) or in the side gutters (landscape). */
:root{
  --night:#120b1f;      /* cabinet body */
  --panel:#1f1534;      /* control well */
  --rim:#3a2a5c;        /* button rims */
  --pink:#ff4fa3;       /* Pinku's turban */
  --saffron:#ffb02e;    /* kurta, highlights */
  --ink:#f6ecff;        /* text */
  --muted:#a493c4;      /* secondary text */
  --pixel:'Silkscreen', 'Courier New', monospace;
  --read:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--night)}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--pixel);-webkit-tap-highlight-color:transparent}
html.playing,html.playing body{overflow:hidden;overscroll-behavior:none}
/* the game fills the first screen; the about section sits below it */
#app{position:relative;height:100vh;height:100dvh;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);
  touch-action:manipulation;display:flex;flex-direction:column;align-items:center;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#cv{touch-action:none}
#stage{position:relative;flex:none;background:#000;box-shadow:0 0 0 2px var(--rim),0 10px 40px rgba(0,0,0,.6)}
#cv{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,2vmin,14px);
  background:rgba(14,8,26,.88);text-align:center;padding-inline:16px;overflow:auto}
.logo{margin:0;font-weight:700;line-height:.95;letter-spacing:.02em;text-wrap:balance}
.logo .a{display:block;color:var(--saffron);font-size:clamp(14px,4.2vmin,26px)}
.logo .b{display:block;color:var(--pink);font-size:clamp(26px,9vmin,58px);text-shadow:3px 3px 0 #5a1238}
.tag{color:var(--muted);font-size:clamp(9px,2.4vmin,13px);max-width:34ch}
.levels{display:grid;grid-template-columns:repeat(5,auto);gap:6px}
.lv{font:700 clamp(11px,2.8vmin,15px) var(--pixel);width:clamp(30px,8vmin,44px);aspect-ratio:1;max-width:100%;border:2px solid var(--rim);background:var(--panel);color:var(--ink);border-radius:4px}
.lv:disabled{opacity:.3}
.lv.on{border-color:var(--saffron);color:var(--saffron)}
.row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.btn{font:700 clamp(12px,3vmin,16px) var(--pixel);padding:.55em 1.1em;border-radius:4px;border:2px solid var(--pink);background:var(--pink);color:#2a0716;letter-spacing:.06em}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rim)}
.btn:focus-visible,.lv:focus-visible,.pbtn:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}
.help{color:var(--muted);font-size:clamp(8px,2.1vmin,11px);line-height:1.5}
#pause{position:absolute;top:2px;right:2px;font:700 10px var(--pixel);background:rgba(0,0,0,.4);color:var(--ink);border:1px solid var(--rim);border-radius:3px;padding:3px 6px;opacity:.8}

/* thumb controls */
#pad{position:relative;flex:1;width:100%;display:flex;justify-content:space-between;align-items:flex-end;padding-inline:16px;padding-block:12px 28px;gap:12px;pointer-events:none}
#pad>*{pointer-events:auto}
#app.land #pad{position:absolute;left:0;right:0;bottom:env(safe-area-inset-bottom,0px);flex:none;align-items:flex-end;padding-block:10px}
#app.land .dpad,#app.land .pbtn{opacity:.55}
#app.nopad #pad{display:none}
.dpad{position:relative;width:clamp(120px,42vmin,180px);aspect-ratio:1;border-radius:50%;background:var(--panel);box-shadow:inset 0 0 0 3px var(--rim);touch-action:none}
.dpad i{position:absolute;width:0;height:0;border:clamp(9px,2.6vmin,13px) solid transparent}
.dpad .l{left:10%;top:50%;transform:translateY(-50%);border-right-color:var(--muted);border-left:0}
.dpad .r{right:10%;top:50%;transform:translateY(-50%);border-left-color:var(--muted);border-right:0}
.dpad .u{top:10%;left:50%;transform:translateX(-50%);border-bottom-color:var(--muted);border-top:0}
.dpad .d{bottom:10%;left:50%;transform:translateX(-50%);border-top-color:var(--muted);border-bottom:0}
.dpad i.hot{filter:brightness(2.2)}
.dpad b{position:absolute;inset:34%;border-radius:50%;background:var(--rim)}
.btns{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;gap:10px;align-items:end}
.pbtn{font:700 clamp(10px,2.6vmin,13px) var(--pixel);border-radius:50%;aspect-ratio:1;border:3px solid var(--rim);background:var(--panel);color:var(--ink);touch-action:none;display:grid;place-items:center}
.pbtn.jump{grid-row:1/3;grid-column:2;width:clamp(78px,25vmin,112px);background:var(--pink);border-color:#c2307a;color:#2a0716}
.pbtn.fire{width:clamp(56px,17vmin,78px);border-color:var(--saffron);color:var(--saffron)}
.pbtn.jet{width:clamp(56px,17vmin,78px)}
.pbtn.jet.on{background:var(--saffron);color:#2a0716}
.pbtn.down{filter:brightness(1.4);transform:scale(.95)}
@media (prefers-reduced-motion:reduce){.pbtn.down{transform:none}}

/* menu extras: studio badge, credit, small buttons */
.overlay{z-index:5;justify-content:flex-start}
/* centred when it fits, scrolls from the top when it doesn't (never clips the dancer) */
.overlay::before,.overlay::after{content:'';flex:1 1 0;min-height:0}
#menu{background:rgba(14,8,26,.9)}
.brand{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));left:calc(10px + env(safe-area-inset-left,0px));display:flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-size:9px;letter-spacing:.08em;z-index:2}
.brand img{height:clamp(18px,4.5vmin,28px);width:auto;display:block}
.brand:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}
.credit{color:var(--muted);font-size:clamp(8px,1.9vmin,10px);letter-spacing:.06em}
.credit a{color:var(--saffron);text-decoration:none}
.btn.small{font-size:clamp(9px,2.2vmin,12px);padding:.45em .8em}
.more{color:var(--saffron);font-size:clamp(9px,2.1vmin,11px);text-decoration:none;letter-spacing:.06em}
.more:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}

/* about section, below the game */
.info{background:var(--night);color:#e9defa;font-family:var(--read);font-size:16px;line-height:1.65;padding-inline:16px;padding-block:56px 32px;border-top:2px solid var(--rim)}
.info .wrap{max-width:68ch;margin:0 auto;display:grid;gap:40px}
.info h2{font-family:var(--pixel);font-weight:700;color:var(--pink);font-size:clamp(18px,4.5vw,26px);line-height:1.2;margin:0 0 12px;text-wrap:balance;letter-spacing:.02em}
.info h3{font-family:var(--pixel);font-weight:400;color:var(--saffron);font-size:15px;margin:0 0 6px;letter-spacing:.04em}
.info p{margin:0 0 12px}
.info a{color:var(--saffron)}
.info .lede{font-size:18px;color:var(--ink)}
.info ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.info .tablewrap{overflow-x:auto}
.info table{border-collapse:collapse;width:100%;min-width:420px;font-size:15px}
.info th,.info td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rim);vertical-align:top}
.info th{font-family:var(--pixel);font-weight:400;color:var(--muted);font-size:12px;letter-spacing:.06em}
.info kbd{font-family:var(--pixel);font-size:12px;background:var(--panel);border:1px solid var(--rim);border-radius:3px;padding:1px 6px;color:var(--ink);white-space:nowrap}
.info .points{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;font-variant-numeric:tabular-nums}
.info .points div{background:var(--panel);border:1px solid var(--rim);border-radius:4px;padding:8px 10px;display:flex;justify-content:space-between;gap:8px}
.info .points b{font-family:var(--pixel);font-weight:400;color:var(--saffron)}
.info details{border-bottom:1px solid var(--rim);padding:10px 0}
.info summary{cursor:pointer;font-weight:600;color:var(--ink)}
.info summary:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}
.info details p{margin:8px 0 0}
.playbtn{display:inline-block;font-family:var(--pixel);font-weight:700;background:var(--pink);color:#2a0716!important;text-decoration:none;padding:10px 18px;border-radius:4px;letter-spacing:.06em}
.site-foot{display:grid;gap:12px;justify-items:center;text-align:center;padding-top:24px;border-top:1px solid var(--rim);font-size:14px;color:var(--muted)}
.site-foot img{height:44px;width:auto}
.site-foot .fine{font-size:12px;max-width:60ch}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

.hero{width:clamp(64px,20vmin,124px);aspect-ratio:24/18;max-width:100%;image-rendering:pixelated}