/* Self-hosted subsets of Noto Sans JP (SIL OFL 1.1, see FONT-LICENSE.txt). */
@font-face{font-family:"Noto Sans JP";src:url("fonts/NotoSansJP-700.woff2") format("woff2");font-weight:500 800;font-display:swap;}
@font-face{font-family:"Noto Sans JP";src:url("fonts/NotoSansJP-900.woff2") format("woff2");font-weight:900;font-display:swap;}

:root{
  --u:1px;
  --ink:#0a0d14;
  --cyan:#3ee6ff;
  --amber:#ffb347;
  --red:#ff3b2f;
  --pink:#ff5fa2;
  --arm:#ff9f1c;--leg:#7cff6b;--head:#b28cff;
  --glass:rgba(9,13,22,0.82);
  --line:rgba(160,220,255,0.2);
  --font:"Noto Sans JP","Yu Gothic UI","Hiragino Sans","Meiryo",system-ui,sans-serif;
  --cut:calc(var(--u)*14);
}
html,body{margin:0;height:100%;overflow:hidden;background:#05070b;}
body{
  font-family:var(--font);color:#eef4ff;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  touch-action:none;
}
body:not([data-scene="title"]):not([data-scene="result"]) .game-home-link{display:none;}
/* nor on the result of a practice fight */
body[data-scene="result"][data-mode="practice"] .game-home-link{display:none;}
.stage{position:fixed;left:0;top:0;width:100vw;height:100vh;overflow:hidden;}
#view,#overlay{position:absolute;left:0;top:0;display:block;}
#view{touch-action:none;}
#overlay{pointer-events:none;}
.ui{position:absolute;inset:0;pointer-events:none;}
.ui>*{pointer-events:auto;}
[hidden]{display:none !important;}

/* ---------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--u)*10);
  min-height:max(40px,calc(var(--u)*50));padding:0 calc(var(--u)*26);
  border:calc(var(--u)*1.5) solid rgba(160,220,255,0.35);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  background:rgba(12,20,34,0.8);color:#fff;
  font:800 max(14px,calc(var(--u)*18))/1 var(--font);letter-spacing:0.06em;
  cursor:pointer;touch-action:manipulation;
  transition:transform 110ms ease,filter 120ms ease,background 160ms ease,border-color 160ms ease;
}
.btn:hover{border-color:rgba(62,230,255,0.8);background:rgba(18,32,52,0.92);}
.btn:active{transform:translateY(calc(var(--u)*2)) scale(0.98);}
.btn:focus-visible{outline:calc(var(--u)*3) solid var(--amber);outline-offset:calc(var(--u)*3);}
.btn.primary{
  border:none;color:var(--ink);font-weight:900;
  background:linear-gradient(100deg,#8ff4ff 0%,#e9fbff 45%,#ffd08a 100%);
  box-shadow:0 0 calc(var(--u)*26) rgba(62,230,255,0.45);
  filter:drop-shadow(0 calc(var(--u)*5) 0 #16606f);
}
.btn.primary:hover{filter:drop-shadow(0 calc(var(--u)*5) 0 #16606f) brightness(1.08);}
.btn.primary:active{transform:translateY(calc(var(--u)*4));filter:drop-shadow(0 calc(var(--u)*1) 0 #16606f);}
.btn.small{min-height:max(34px,calc(var(--u)*36));padding:0 calc(var(--u)*16);font-size:max(12px,calc(var(--u)*14));}
.btn-icon{
  width:calc(var(--u)*22);height:calc(var(--u)*22);flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3 L21 12 L5 21 Z' fill='%230a0d14'/%3E%3C/svg%3E") center/contain no-repeat;
}
.icon-btn{
  position:absolute;z-index:6;display:grid;place-items:center;
  width:max(42px,calc(var(--u)*46));height:max(42px,calc(var(--u)*46));border-radius:50%;
  border:calc(var(--u)*1.5) solid rgba(160,220,255,0.32);background:rgba(9,13,22,0.66);color:#fff;
  font:800 max(15px,calc(var(--u)*17))/1 var(--font);cursor:pointer;touch-action:manipulation;
}
.icon-btn:hover{background:rgba(18,32,52,0.92);}
.icon-btn:active{transform:scale(0.94);}
.icon-btn:focus-visible{outline:calc(var(--u)*3) solid var(--amber);outline-offset:calc(var(--u)*2);}
.pause-btn{top:max(10px,calc(var(--u)*14));right:max(10px,calc(var(--u)*14));}
.pause-btn span{width:calc(var(--u)*14);height:calc(var(--u)*16);min-width:12px;min-height:14px;border-left:max(4px,calc(var(--u)*4.5)) solid #fff;border-right:max(4px,calc(var(--u)*4.5)) solid #fff;box-sizing:border-box;}
.sound-btn{right:max(10px,calc(var(--u)*14));bottom:max(10px,calc(var(--u)*14));}
.sound-btn.muted{opacity:0.55;text-decoration:line-through;}
/* (on the title the volume sits in the settings at the bottom right instead) */
body:is([data-scene="play"],[data-scene="paused"],[data-scene="title"],[data-scene="splash"],[data-scene="pv"]) .sound-btn{display:none;}

/* ---------- panels */
.panel{
  background:var(--glass);border:calc(var(--u)*1.5) solid var(--line);
  clip-path:polygon(calc(var(--cut)*1.4) 0,100% 0,100% calc(100% - var(--cut)*1.4),calc(100% - var(--cut)*1.4) 100%,0 100%,0 calc(var(--cut)*1.4));
  backdrop-filter:blur(8px);
}
.sound-panel{
  position:absolute;right:max(10px,calc(var(--u)*14));bottom:max(60px,calc(var(--u)*70));z-index:7;
  display:grid;gap:calc(var(--u)*10);padding:calc(var(--u)*14) calc(var(--u)*16);width:max(200px,calc(var(--u)*240));
}
.sound-panel label,.volume label{display:grid;grid-template-columns:max(48px,calc(var(--u)*58)) 1fr;align-items:center;gap:calc(var(--u)*8);font:700 max(12px,calc(var(--u)*13))/1 var(--font);}
input[type=range]{width:100%;accent-color:var(--cyan);height:max(22px,calc(var(--u)*24));}
.pause-ui{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;
  width:min(92vw,max(300px,calc(var(--u)*400)));padding:calc(var(--u)*24) calc(var(--u)*26) calc(var(--u)*22);
  display:grid;gap:calc(var(--u)*14);text-align:center;box-sizing:border-box;
}
.pause-ui h2{margin:0;font:900 max(22px,calc(var(--u)*30))/1.1 var(--font);letter-spacing:0.22em;color:var(--cyan);}
.pause-ui .volume{display:grid;gap:calc(var(--u)*10);padding:calc(var(--u)*12) calc(var(--u)*4);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.pause-ui .volume .btn{justify-self:center;}
.row{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*10);}
.row .btn{padding:0 calc(var(--u)*10);font-size:max(13px,calc(var(--u)*15));}
.pause-keys{margin:0;font:700 max(11px,calc(var(--u)*12))/1.5 var(--font);color:#9fb3cf;white-space:pre-line;}
/* on a gamepad the focused control always shows (there is no keyboard to trigger :focus-visible) */
/* (the cut-corner buttons clip anything drawn outside them, so they get an inner ring) */
body[data-input="pad"] :is(.icon-btn,.game-home-link).pad-focus{outline:calc(var(--u)*3) solid var(--amber);outline-offset:calc(var(--u)*3);}
body[data-input="pad"] .btn.pad-focus:not(.mode-btn){border-color:var(--amber);box-shadow:inset 0 0 0 calc(var(--u)*3) var(--amber);}
body[data-input="pad"] .btn.primary.pad-focus{box-shadow:inset 0 0 0 calc(var(--u)*3) #c26a12,0 0 calc(var(--u)*26) rgba(62,230,255,0.45);}
body[data-input="pad"] input[type=range].pad-focus{outline:calc(var(--u)*2) solid var(--amber);outline-offset:calc(var(--u)*4);}

/* ---------- title */
.title-ui{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-left:max(24px,calc(var(--u)*90));
  background:linear-gradient(90deg,rgba(5,7,11,0.82) 0%,rgba(5,7,11,0.55) 34%,rgba(5,7,11,0) 62%);}
.logo{position:relative;pointer-events:none;}
.logo h1{margin:0;display:flex;flex-direction:column;line-height:0.86;font-weight:900;letter-spacing:0.02em;}
/* HUMANOID over a large ZERO */
.logo .l1{font-size:calc(var(--u)*46);letter-spacing:0.24em;background:linear-gradient(90deg,var(--cyan),#e9fbff 55%,var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent;}
.logo .l2{margin-top:calc(var(--u)*2);font-size:calc(var(--u)*128);line-height:0.84;letter-spacing:0.05em;color:#fff;
  text-shadow:0 0 calc(var(--u)*28) rgba(62,230,255,0.45),0 calc(var(--u)*4) 0 rgba(22,96,111,0.55);}
.logo .jp:empty{display:none;}
.logo .jp{margin:calc(var(--u)*8) 0 0;font:900 calc(var(--u)*20)/1 var(--font);letter-spacing:0.32em;color:#b9c7dc;}
/* difficulty: the chosen one between two arrows (left / right change it), a line saying what it
   changes below. Its colour: NORMAL green, HARD amber, IMPOSSIBLE red */
.diff{--dc:#9dffa0;--dcb:rgba(157,255,160,0.5);margin-top:calc(var(--u)*30);display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:calc(var(--u)*14);row-gap:calc(var(--u)*6);width:min(88vw,calc(var(--u)*380));}
.diff[data-diff="hard"]{--dc:#ffc46a;--dcb:rgba(255,196,106,0.5);}
.diff[data-diff="impossible"]{--dc:#ff6a5c;--dcb:rgba(255,106,92,0.55);}
.diff-k{white-space:nowrap;font:800 max(11px,calc(var(--u)*12))/1 var(--font);letter-spacing:0.14em;color:#9fb3cf;text-shadow:0 1px 4px rgba(0,0,0,0.9);}
.diff-sel{display:grid;grid-template-columns:auto 1fr auto;align-items:stretch;min-height:max(38px,calc(var(--u)*44));
  border:calc(var(--u)*1.5) solid var(--dcb);background:rgba(9,13,22,0.78);
  clip-path:polygon(calc(var(--cut)*0.6) 0,100% 0,100% calc(100% - var(--cut)*0.6),calc(100% - var(--cut)*0.6) 100%,0 100%,0 calc(var(--cut)*0.6));}
.diff-arrow{width:max(36px,calc(var(--u)*44));padding:0;border:none;background:transparent;color:var(--dc);font:900 max(13px,calc(var(--u)*15))/1 var(--font);cursor:pointer;touch-action:manipulation;}
.diff-arrow:hover{background:rgba(255,255,255,0.07);}
.diff-arrow:disabled{color:rgba(160,180,210,0.22);cursor:default;background:transparent;}
.diff-cur{display:grid;justify-items:center;align-content:center;gap:calc(var(--u)*5);padding:calc(var(--u)*4) 0;border:none;background:transparent;color:var(--dc);cursor:pointer;touch-action:manipulation;}
.diff-cur b{font:900 max(15px,calc(var(--u)*19))/1 var(--font);letter-spacing:0.18em;text-shadow:0 0 calc(var(--u)*12) var(--dcb);}
.diff-pips{display:flex;gap:calc(var(--u)*5);}
.diff-pips i{width:max(5px,calc(var(--u)*6));height:max(5px,calc(var(--u)*6));border-radius:50%;background:rgba(160,180,210,0.25);}
.diff[data-diff="normal"] .diff-pips i:nth-child(1),.diff[data-diff="hard"] .diff-pips i:nth-child(-n+2),.diff[data-diff="impossible"] .diff-pips i{background:var(--dc);}
.diff-cur:focus-visible{outline:calc(var(--u)*3) solid var(--amber);outline-offset:calc(var(--u)*-3);}
body[data-input="pad"] .diff-cur.pad-focus{outline:calc(var(--u)*3) solid var(--amber);outline-offset:calc(var(--u)*-3);}
.diff-note{grid-column:1/-1;margin:0;font:700 max(11px,calc(var(--u)*12))/1.35 var(--font);color:#b9c7dc;text-shadow:0 1px 4px rgba(0,0,0,0.9);}
/* the chosen difficulty, named on the boss select, the pause menu and the result */
.diff-tag{margin:0;font:900 max(11px,calc(var(--u)*12))/1 var(--font);letter-spacing:0.28em;color:var(--amber);}
.diff-tag:empty{display:none;}
.diff-tag[data-diff="normal"]{color:#9dffa0;}
.diff-tag[data-diff="impossible"]{color:#ff6a5c;}
.mode-btns{margin-top:calc(var(--u)*16);display:grid;gap:calc(var(--u)*12);width:min(88vw,calc(var(--u)*380));}
.mode-btn{display:grid;justify-items:start;align-content:center;gap:calc(var(--u)*6);min-height:max(56px,calc(var(--u)*72));padding:calc(var(--u)*10) calc(var(--u)*26);text-align:left;}
.mode-btn b{font:900 max(18px,calc(var(--u)*25))/1 var(--font);letter-spacing:0.14em;}
.mode-btn small{font:700 max(11px,calc(var(--u)*13))/1.3 var(--font);letter-spacing:0.04em;color:#b9c7dc;}
/* the gauntlet is the main game: a larger button above the practice mode */
.mode-btn.main{min-height:max(68px,calc(var(--u)*92));}
.mode-btn.main b{font-size:max(22px,calc(var(--u)*32));}
.mode-btn:not(.main){min-height:max(50px,calc(var(--u)*62));}
.mode-btn:not(.main) b{font-size:max(16px,calc(var(--u)*21));}
.mode-btn.focus{border:none;color:var(--ink);background:linear-gradient(100deg,#8ff4ff 0%,#e9fbff 45%,#ffd08a 100%);
  box-shadow:0 0 calc(var(--u)*26) rgba(62,230,255,0.45);filter:drop-shadow(0 calc(var(--u)*5) 0 #16606f);animation:breathe 1.8s ease-in-out infinite;}
.mode-btn.focus small{color:#23324a;}
.pv-btn{margin-top:calc(var(--u)*14);width:min(88vw,calc(var(--u)*380));justify-content:flex-start;padding:0 calc(var(--u)*26);letter-spacing:0.08em;color:#cfe0f5;}
@keyframes breathe{50%{box-shadow:0 0 calc(var(--u)*44) rgba(62,230,255,0.75);}}
/* language and volume, together at the bottom right */
.title-settings{position:absolute;right:max(12px,calc(var(--u)*28));bottom:max(12px,calc(var(--u)*28));
  display:grid;gap:calc(var(--u)*10);width:max(250px,calc(var(--u)*300));padding:calc(var(--u)*14) calc(var(--u)*18);box-sizing:border-box;}
.set-row{display:grid;grid-template-columns:max(66px,calc(var(--u)*80)) 1fr;align-items:center;gap:calc(var(--u)*10);}
.set-k{font:800 max(11px,calc(var(--u)*12))/1 var(--font);letter-spacing:0.14em;color:#9fb3cf;}
.lang-btns{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*6);}
.lang-btn{min-height:max(32px,calc(var(--u)*34));padding:0 calc(var(--u)*6);border:calc(var(--u)*1.5) solid rgba(160,220,255,0.3);
  background:rgba(12,20,34,0.8);color:#dfe8f5;font:800 max(12px,calc(var(--u)*14))/1 var(--font);cursor:pointer;touch-action:manipulation;}
.lang-btn:hover{border-color:rgba(62,230,255,0.8);}
.lang-btn[aria-pressed="true"]{border-color:transparent;color:var(--ink);background:linear-gradient(100deg,#8ff4ff 0%,#e9fbff 55%,#ffd08a 100%);}
.lang-btn:focus-visible{outline:calc(var(--u)*3) solid var(--amber);outline-offset:calc(var(--u)*2);}
body[data-input="pad"] .lang-btn.pad-focus{outline:calc(var(--u)*3) solid var(--amber);outline-offset:calc(var(--u)*2);}
.settings-toggles{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:calc(var(--u)*8);}
.settings-toggles .btn.small{padding:0 calc(var(--u)*10);letter-spacing:0;}
.pause-ui .settings-toggles{justify-content:center;}
[data-rumble][aria-pressed="true"]{border-color:var(--cyan);color:var(--cyan);}
/* the controls at the top right: the keys as key caps (the dash row in cyan), then the dash's
   invulnerability set apart in a glowing box */
.title-guide{position:absolute;right:max(12px,calc(var(--u)*28));top:max(12px,calc(var(--u)*28));
  display:grid;gap:calc(var(--u)*10);width:max(270px,calc(var(--u)*320));padding:calc(var(--u)*14) calc(var(--u)*18);box-sizing:border-box;}
.guide-k{margin:0;font:800 max(11px,calc(var(--u)*12))/1 var(--font);letter-spacing:0.14em;color:#9fb3cf;}
.guide-keys{margin:0;display:grid;gap:calc(var(--u)*6);}
.gk-row{display:grid;grid-template-columns:max(66px,calc(var(--u)*80)) 1fr;align-items:center;gap:calc(var(--u)*10);}
.gk-row dt{font:800 max(12px,calc(var(--u)*14))/1 var(--font);color:#dfe8f5;}
.gk-row dd{margin:0;display:flex;flex-wrap:wrap;gap:calc(var(--u)*5);}
.gk-row kbd{min-width:max(14px,calc(var(--u)*16));padding:max(3px,calc(var(--u)*4)) max(6px,calc(var(--u)*8));text-align:center;
  border:1px solid rgba(160,220,255,0.3);border-bottom-width:max(2px,calc(var(--u)*3));border-radius:max(4px,calc(var(--u)*5));
  background:rgba(12,20,34,0.9);font:800 max(11px,calc(var(--u)*13))/1 var(--font);color:#fff;}
.gk-row[data-act="dash"] dt{color:var(--cyan);text-shadow:0 0 8px rgba(62,230,255,0.6);}
.gk-row[data-act="dash"] kbd{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 calc(var(--u)*10) rgba(62,230,255,0.45);}
.guide-dash{display:grid;gap:calc(var(--u)*6);padding:calc(var(--u)*10) calc(var(--u)*12);
  border:calc(var(--u)*1.5) solid rgba(62,230,255,0.65);background:linear-gradient(120deg,rgba(62,230,255,0.16),rgba(62,230,255,0.04));
  box-shadow:inset 0 0 calc(var(--u)*18) rgba(62,230,255,0.14);}
.guide-dash p{margin:0;}
.gd-head{display:flex;align-items:center;gap:calc(var(--u)*8);}
.gd-head b{font:900 max(12px,calc(var(--u)*15))/1.2 var(--font);letter-spacing:0.06em;color:var(--cyan);text-shadow:0 0 calc(var(--u)*12) rgba(62,230,255,0.7);}
/* afterimages of R-0 dashing through a red slash */
.gd-icon{flex:none;width:max(34px,calc(var(--u)*42));height:auto;}
.gd-atk{fill:none;stroke:#ff5a4a;stroke-width:3.5;stroke-linecap:round;}
.gd-ghost{fill:var(--cyan);}
.gd-arrow{fill:none;stroke:var(--cyan);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.gd-body{font:700 max(11px,calc(var(--u)*13))/1.5 var(--font);color:#e9fbff;}
.gd-foot{font:700 max(10px,calc(var(--u)*11))/1.3 var(--font);color:#9fb3cf;}

/* ---------- splash: a gamepad is recommended (it fades into the title) */
.splash{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#05070b;transition:opacity 480ms ease;}
.splash.out{opacity:0;}
.splash-card{display:grid;justify-items:center;gap:calc(var(--u)*12);padding:0 24px;text-align:center;animation:splashin 700ms ease-out both;}
@keyframes splashin{from{opacity:0;transform:translateY(calc(var(--u)*12));}}
.pad-icon{width:max(120px,calc(var(--u)*180));height:auto;overflow:visible;filter:drop-shadow(0 0 calc(var(--u)*16) rgba(62,230,255,0.35));}
.pad-body{fill:rgba(62,230,255,0.07);stroke:var(--cyan);stroke-width:3;stroke-linejoin:round;}
.pad-key,.pad-btn{fill:#e6ebf2;}
.pad-stick{fill:none;stroke:#9fb3cf;stroke-width:2.5;}
.pad-a{fill:var(--amber);animation:pada 1.2s ease-in-out infinite;}
@keyframes pada{50%{opacity:0.3;}}
.splash-main{margin:calc(var(--u)*10) 0 0;font:900 max(20px,calc(var(--u)*34))/1.2 var(--font);letter-spacing:0.22em;color:#fff;}
.splash-sub{margin:0;font:700 max(12px,calc(var(--u)*16))/1.6 var(--font);letter-spacing:0.04em;color:#9fb3cf;}

/* ---------- demo PV: captions over the shots (in the middle on black, below on a shot) */
.pv{position:absolute;inset:0;z-index:15;cursor:pointer;}
.pv-black{position:absolute;inset:0;background:#030409;transition:opacity 420ms ease;}
.pv[data-kind="shot"] .pv-black{opacity:0;}
.pv.logo .pv-black{opacity:0.45;}
.pv-text{position:absolute;left:50%;width:min(88vw,calc(var(--u)*1040));text-align:center;pointer-events:none;opacity:0;}
.pv[data-kind="black"] .pv-text{top:50%;transform:translate(-50%,-50%);}
.pv[data-kind="shot"] .pv-text{bottom:max(64px,calc(var(--u)*96));transform:translateX(-50%);}
.pv-cap{margin:0;font:900 max(18px,calc(var(--u)*32))/1.5 var(--font);letter-spacing:0.06em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,0.95);}
.pv[data-kind="shot"] .pv-cap{font-size:max(16px,calc(var(--u)*27));}
.pv-cap.red{color:#ff6a5c;text-shadow:0 0 calc(var(--u)*26) rgba(255,59,47,0.6),0 2px 10px #000;}
.pv-by{margin:calc(var(--u)*16) 0 0;font:800 max(12px,calc(var(--u)*16))/1 var(--font);letter-spacing:0.32em;color:#ff8a70;}
.pv-by:empty{display:none;}
/* the ending: the shot darkens into black, a boss's name as a small caption, the closing thanks */
.pv.fade .pv-black{animation:pvfade 1.1s ease-in both;}
@keyframes pvfade{from{opacity:0;}to{opacity:1;}}
.pv .pv-cap.name{font:800 max(13px,calc(var(--u)*17))/1 var(--font);letter-spacing:0.34em;color:#e6eef8;}
.pv-by.thanks{margin-top:calc(var(--u)*30);font-size:max(11px,calc(var(--u)*15));letter-spacing:0.42em;color:#cfe0f5;}
.pv-logo{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);pointer-events:none;animation:pvlogo 1.4s ease-out both;}
.pv-logo .logo{transform:scale(1.15);}
@keyframes pvlogo{from{opacity:0;filter:blur(8px);}}
.pv-skip{position:absolute;right:max(16px,calc(var(--u)*30));bottom:max(12px,calc(var(--u)*20));margin:0;
  font:700 max(11px,calc(var(--u)*13))/1 var(--font);letter-spacing:0.08em;color:rgba(230,240,255,0.55);pointer-events:none;}

/* ---------- HUD */
.hud{position:absolute;inset:0;pointer-events:none;z-index:3;}
.hud-player{position:absolute;left:max(12px,calc(var(--u)*22));top:max(10px,calc(var(--u)*18));display:grid;gap:calc(var(--u)*8);}
.hp-row{display:flex;align-items:center;gap:calc(var(--u)*10);}
.unit{font:900 max(12px,calc(var(--u)*15))/1 var(--font);letter-spacing:0.1em;color:var(--cyan);text-shadow:0 0 8px rgba(62,230,255,0.6);}
.hp{display:flex;gap:calc(var(--u)*5);}
.hp i{width:max(14px,calc(var(--u)*22));height:max(12px,calc(var(--u)*18));background:linear-gradient(180deg,#bff7ff,var(--cyan));
  clip-path:polygon(25% 0,100% 0,75% 100%,0 100%);box-shadow:0 0 10px rgba(62,230,255,0.7);transition:background 200ms ease,opacity 200ms ease;}
.hp i.off{background:rgba(255,59,47,0.28);box-shadow:none;}
.hp.low i:not(.off){animation:lowhp 0.6s ease-in-out infinite;}
@keyframes lowhp{50%{background:linear-gradient(180deg,#fff,#ff8f86);}}
.hud-boss{position:absolute;left:50%;top:max(10px,calc(var(--u)*16));transform:translateX(-50%);width:min(56vw,calc(var(--u)*640));}
.boss-top{display:flex;align-items:baseline;gap:calc(var(--u)*10);margin-bottom:calc(var(--u)*4);}
.boss-top small{font:900 max(11px,calc(var(--u)*13))/1 var(--font);letter-spacing:0.14em;color:#ff8a70;text-shadow:0 1px 4px rgba(0,0,0,0.9);}
.boss-top .core-open{margin-left:auto;font:900 max(11px,calc(var(--u)*13))/1 var(--font);font-style:normal;letter-spacing:0.1em;color:#ff9ccf;opacity:0;transition:opacity 120ms ease;text-shadow:0 0 8px rgba(255,95,162,0.8);}
.hud-boss.open .core-open{opacity:1;animation:coreblink 0.3s ease-in-out infinite alternate;}
.boss-top b{font:900 max(14px,calc(var(--u)*20))/1 var(--font);letter-spacing:0.12em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,0.9);}
.boss-top span{font:700 max(11px,calc(var(--u)*13))/1 var(--font);color:#ffcf8a;text-shadow:0 1px 4px rgba(0,0,0,0.9);}
@keyframes coreblink{to{color:#fff;}}
.boss-bar{position:relative;height:max(10px,calc(var(--u)*14));background:rgba(8,10,16,0.8);border:1px solid rgba(255,255,255,0.18);
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);}
.boss-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;}
.boss-bar .lag{background:rgba(255,255,255,0.75);}
.boss-bar .fill{background:linear-gradient(90deg,#ff5a36,#ffb347);}
.hud-boss.p2 .boss-bar .fill{background:linear-gradient(90deg,#ff2d55,#ff7a45);}
.boss-bar .p2mark{position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;background:rgba(255,255,255,0.7);}
.hud-time{position:absolute;right:max(64px,calc(var(--u)*78));top:max(20px,calc(var(--u)*28));font:900 max(13px,calc(var(--u)*17))/1 var(--font);
  font-variant-numeric:tabular-nums;color:rgba(230,240,255,0.85);text-shadow:0 1px 4px rgba(0,0,0,0.9);letter-spacing:0.06em;}

/* ---------- in-game texts */
.namecard{position:absolute;left:50%;top:26%;transform:translateX(-50%);z-index:4;display:grid;justify-items:center;gap:calc(var(--u)*6);pointer-events:none;}
.namecard small{font:900 max(12px,calc(var(--u)*15))/1 var(--font);letter-spacing:0.4em;color:#ff8a70;}
.namecard b{font:900 max(34px,calc(var(--u)*76))/1 var(--font);letter-spacing:0.12em;color:#fff;text-shadow:0 0 calc(var(--u)*30) rgba(255,90,54,0.6),0 3px 0 rgba(0,0,0,0.6);}
.namecard span{font:900 max(14px,calc(var(--u)*22))/1 var(--font);letter-spacing:0.4em;color:#ffcf8a;}
.namecard.show{animation:card 2.3s ease both;}
@keyframes card{0%{opacity:0;transform:translateX(-50%) scale(1.3);letter-spacing:0.5em}12%{opacity:1;transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0}}
.big{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:4;display:grid;justify-items:center;pointer-events:none;}
.big b{font:900 max(40px,calc(var(--u)*92))/1 var(--font);font-style:italic;letter-spacing:0.04em;color:var(--c);
  text-shadow:0 0 calc(var(--u)*30) var(--c),0 4px 0 rgba(0,0,0,0.55);}
.big span{margin-top:calc(var(--u)*6);font:900 max(14px,calc(var(--u)*22))/1 var(--font);letter-spacing:0.2em;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,0.9);}
.big.show{animation:bigpop 1.2s cubic-bezier(.2,1.4,.4,1) both;}
@keyframes bigpop{0%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}14%{opacity:1;transform:translate(-50%,-50%) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-56%) scale(1)}}
.toast{position:absolute;left:50%;top:max(120px,calc(var(--u)*172));transform:translateX(-50%);z-index:4;white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis;
  padding:calc(var(--u)*10) calc(var(--u)*22);background:rgba(9,13,22,0.85);border:calc(var(--u)*1.5) solid var(--mc,var(--cyan));
  font:900 max(14px,calc(var(--u)*20))/1.2 var(--font);letter-spacing:0.04em;color:#fff;pointer-events:none;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);box-shadow:0 0 24px var(--mc,var(--cyan));}
.toast.show{animation:toastin 2.6s ease both;}
@keyframes toastin{0%{opacity:0;transform:translate(-50%,-14px)}10%{opacity:1;transform:translate(-50%,0)}85%{opacity:1}100%{opacity:0}}
.hint{position:absolute;left:50%;top:max(70px,calc(var(--u)*100));transform:translateX(-50%);z-index:4;white-space:nowrap;
  padding:calc(var(--u)*8) calc(var(--u)*18);border-radius:999px;background:rgba(62,230,255,0.14);border:1px solid rgba(62,230,255,0.55);
  font:800 max(13px,calc(var(--u)*17))/1.2 var(--font);color:#e9fbff;text-shadow:0 1px 4px rgba(0,0,0,0.9);pointer-events:none;}
.hint.show{animation:hintin 400ms ease both;}
@keyframes hintin{from{opacity:0;transform:translate(-50%,-10px)}}

/* ---------- normal mode: the boss select */
.select-ui{z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*14);
  padding:max(12px,calc(var(--u)*18));box-sizing:border-box;
  background:radial-gradient(ellipse at center,rgba(5,7,11,0.45),rgba(5,7,11,0.86));animation:fadein 300ms ease both;}
.select-head{display:grid;justify-items:center;gap:calc(var(--u)*6);pointer-events:none;text-align:center;}
.select-head small{font:900 max(12px,calc(var(--u)*14))/1 var(--font);letter-spacing:0.3em;color:var(--cyan);text-shadow:0 0 12px rgba(62,230,255,0.6);}
.select-head h2{margin:0;font:900 max(20px,calc(var(--u)*32))/1.2 var(--font);letter-spacing:0.08em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,0.9);}
.sel-progress{margin:0;font:800 max(12px,calc(var(--u)*14))/1.4 var(--font);color:var(--amber);text-shadow:0 1px 4px rgba(0,0,0,0.9);}
/* the bosses of a tier stacked in a column, tiers left to right (--c: the tier, --r: the place in it) */
.select-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:calc(var(--u)*10);width:min(96vw,calc(var(--u)*1200));}
.sel-card{grid-column:var(--c);grid-row:var(--r);position:relative;display:grid;align-content:start;gap:calc(var(--u)*5);min-height:calc(var(--u)*118);padding:calc(var(--u)*12) calc(var(--u)*12) calc(var(--u)*14);
  text-align:left;color:#fff;font-family:var(--font);cursor:pointer;touch-action:manipulation;
  background:linear-gradient(170deg,rgba(18,26,40,0.94),rgba(8,11,18,0.94));border:calc(var(--u)*1.5) solid rgba(160,220,255,0.22);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  transition:transform 140ms ease,border-color 140ms ease,box-shadow 140ms ease,opacity 160ms ease;animation:cardin 380ms ease both;}
@keyframes cardin{from{opacity:0;transform:translateY(calc(var(--u)*24)) scale(0.96);}}
.sel-card.focus,.sel-card:hover{border-color:var(--cyan);box-shadow:inset 0 0 calc(var(--u)*24) rgba(62,230,255,0.18),0 0 calc(var(--u)*20) rgba(62,230,255,0.35);transform:translateY(calc(var(--u)*-4));}
.sel-card:focus-visible{outline:calc(var(--u)*3) solid var(--amber);outline-offset:calc(var(--u)*2);}
.sel-tier{font:900 max(10px,calc(var(--u)*12))/1 var(--font);letter-spacing:0.14em;color:var(--amber);}
.sel-name{font:900 max(14px,calc(var(--u)*19))/1.1 var(--font);letter-spacing:0.06em;overflow-wrap:anywhere;}
.sel-title{font:700 max(10px,calc(var(--u)*12))/1.2 var(--font);color:#ffcf8a;}
.sel-state{margin-top:auto;font:900 max(10px,calc(var(--u)*12))/1 var(--font);letter-spacing:0.06em;color:#9fb3cf;font-variant-numeric:tabular-nums;}
.sel-card.won .sel-state{color:var(--cyan);}
.sel-card.locked{opacity:0.45;background:repeating-linear-gradient(135deg,rgba(14,18,28,0.95) 0 calc(var(--u)*10),rgba(20,24,34,0.95) calc(var(--u)*10) calc(var(--u)*20));}
.sel-card.locked .sel-name{color:#6c7a90;letter-spacing:0.3em;}
.sel-card.locked .sel-title{color:#6c7a90;}
.sel-card.locked.focus,.sel-card.locked:hover{opacity:0.7;border-color:rgba(255,106,92,0.7);box-shadow:none;}
.sel-card.shake{animation:shake 320ms ease;}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.sel-info{margin:0;min-height:1.4em;font:800 max(12px,calc(var(--u)*15))/1.4 var(--font);color:#fff;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,0.9);pointer-events:none;}
.select-foot{display:flex;align-items:center;gap:calc(var(--u)*16);}
.sel-keys{font:700 max(11px,calc(var(--u)*13))/1.4 var(--font);color:#9fb3cf;text-shadow:0 1px 4px rgba(0,0,0,0.9);pointer-events:none;}
body.portrait .select-ui{justify-content:flex-start;overflow:auto;}
/* tall: a tier has more than two bosses, so the cards are lower */
.select-grid.tall{gap:calc(var(--u)*7);}
.select-grid.tall .sel-card{min-height:calc(var(--u)*80);gap:calc(var(--u)*3);padding:calc(var(--u)*8) calc(var(--u)*10) calc(var(--u)*10);}
body.portrait .select-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:min(94vw,480px);gap:8px;}
body.portrait .sel-card{grid-column:auto;grid-row:auto;min-height:0;padding:10px 12px 12px;}
body.portrait .sel-keys{display:none;}
@media (max-height:560px){.sel-card{min-height:0;gap:3px;padding:8px 10px 10px;}.select-head h2{font-size:18px;}.select-ui{gap:8px;}}

/* ---------- result */
.result-ui{display:grid;place-items:center;background:radial-gradient(ellipse at center,rgba(5,7,11,0.35),rgba(5,7,11,0.8));animation:fadein 400ms ease both;z-index:7;}
@keyframes fadein{from{opacity:0}}
.result-card{
  width:min(92vw,max(320px,calc(var(--u)*460)));box-sizing:border-box;padding:calc(var(--u)*20) calc(var(--u)*26) calc(var(--u)*22);
  display:grid;gap:calc(var(--u)*11);justify-items:center;text-align:center;
  background:var(--glass);border:calc(var(--u)*1.5) solid var(--line);
  clip-path:polygon(calc(var(--cut)*1.6) 0,100% 0,100% calc(100% - var(--cut)*1.6),calc(100% - var(--cut)*1.6) 100%,0 100%,0 calc(var(--cut)*1.6));
  animation:pop 480ms cubic-bezier(.2,1.4,.4,1) both;max-height:96vh;overflow:auto;
}
@keyframes pop{from{transform:scale(0.88) translateY(calc(var(--u)*20));opacity:0}}
.result-kicker{margin:0;font:900 max(16px,calc(var(--u)*22))/1 var(--font);letter-spacing:0.3em;color:#ff6a5c;}
.is-clear .result-kicker{color:var(--cyan);text-shadow:0 0 18px rgba(62,230,255,0.6);}
.result-head{display:flex;align-items:center;gap:calc(var(--u)*16);}
.result-main{margin:0;font:900 max(30px,calc(var(--u)*52))/1 var(--font);letter-spacing:0.02em;font-variant-numeric:tabular-nums;}
.rank{
  margin:0;display:grid;place-items:center;width:max(46px,calc(var(--u)*62));height:max(46px,calc(var(--u)*62));
  font:900 max(26px,calc(var(--u)*36))/1 var(--font);color:var(--ink);background:#cfd6ea;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  animation:stamp 500ms 250ms cubic-bezier(.2,1.6,.4,1) both;
}
.rank[data-rank=S]{background:linear-gradient(135deg,#fff2c0,#ffb347);}
.rank[data-rank=A]{background:linear-gradient(135deg,#e0fdff,#3ee6ff);}
.rank[data-rank=B]{background:linear-gradient(135deg,#e8ffe2,#7cff6b);}
@keyframes stamp{from{transform:scale(2.2) rotate(-18deg);opacity:0}}
.record{margin:0;padding:calc(var(--u)*6) calc(var(--u)*16);background:linear-gradient(90deg,var(--cyan),var(--amber));color:var(--ink);font:900 max(12px,calc(var(--u)*15))/1 var(--font);letter-spacing:0.14em;animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{50%{transform:scale(1.08)}}
.stats{margin:0;width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*6);}
.stats div{padding:calc(var(--u)*8) 0;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.06);}
.stats dt{font:700 max(10px,calc(var(--u)*11))/1.2 var(--font);color:#9fb3cf;}
.stats dd{margin:calc(var(--u)*4) 0 0;font:900 max(18px,calc(var(--u)*24))/1 var(--font);font-variant-numeric:tabular-nums;}
.unlock{margin:0;padding:calc(var(--u)*6) calc(var(--u)*16);border:1px solid var(--amber);color:var(--amber);font:900 max(12px,calc(var(--u)*15))/1.2 var(--font);letter-spacing:0.08em;animation:pulse 1s ease-in-out infinite;}
.tip{margin:0;min-height:1.4em;font:700 max(12px,calc(var(--u)*14))/1.5 var(--font);color:#fff;opacity:0.92;}
.res-best{margin:0;font:800 max(11px,calc(var(--u)*13))/1 var(--font);color:#9fb3cf;}
.result-card .btn.primary{width:100%;min-height:max(48px,calc(var(--u)*58));font-size:max(16px,calc(var(--u)*21));}
.result-card .row{width:100%;}
.result-card .row .btn{min-height:max(40px,calc(var(--u)*44));}
.result-card .row:has(#res-secondary[hidden]){grid-template-columns:1fr;}

/* ---------- touch controls */
.touch{position:absolute;inset:auto 0 0 0;height:0;z-index:5;}
.touch button{
  position:absolute;display:grid;place-items:center;border:2px solid rgba(160,220,255,0.35);background:rgba(10,16,28,0.45);color:#e9fbff;
  font:900 max(13px,calc(var(--u)*16))/1 var(--font);touch-action:none;-webkit-user-select:none;user-select:none;
  box-shadow:inset 0 0 18px rgba(62,230,255,0.12);
}
.touch button.on{background:rgba(62,230,255,0.35);border-color:var(--cyan);}
.pad-l button{bottom:max(18px,env(safe-area-inset-bottom));width:max(68px,calc(var(--u)*92));height:max(68px,calc(var(--u)*92));border-radius:22%;font-size:max(20px,calc(var(--u)*26));}
.pad-l [data-k="left"]{left:max(16px,env(safe-area-inset-left));}
.pad-l [data-k="right"]{left:calc(max(16px,env(safe-area-inset-left)) + max(68px,calc(var(--u)*92)) + 14px);}
.pad-r button{border-radius:50%;}
.t-jump{right:max(18px,env(safe-area-inset-right));bottom:calc(max(18px,env(safe-area-inset-bottom)) + max(58px,calc(var(--u)*72)));width:max(84px,calc(var(--u)*106));height:max(84px,calc(var(--u)*106));border-color:rgba(62,230,255,0.6)!important;}
.t-atk{right:calc(max(18px,env(safe-area-inset-right)) + max(94px,calc(var(--u)*118)));bottom:max(14px,env(safe-area-inset-bottom));width:max(84px,calc(var(--u)*106));height:max(84px,calc(var(--u)*106));border-color:rgba(255,179,71,0.7)!important;font-size:max(15px,calc(var(--u)*18))!important;}
.t-dash{right:max(18px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:max(64px,calc(var(--u)*76));height:max(46px,calc(var(--u)*54));border-radius:14px!important;font-size:max(11px,calc(var(--u)*13))!important;}

/* ---------- misc */
.rotate-hint{display:none;}
body.portrait[data-scene="title"] .rotate-hint{display:block;position:absolute;left:50%;bottom:max(12px,2.5%);transform:translateX(-50%);margin:0;padding:8px 16px;border-radius:999px;
  background:rgba(9,13,22,0.8);border:1px solid var(--line);font:800 13px/1.3 var(--font);white-space:nowrap;}
body.portrait .title-ui{align-items:center;padding-left:0;background:linear-gradient(180deg,rgba(5,7,11,0.7),rgba(5,7,11,0.2) 60%,rgba(5,7,11,0.6));}
body.portrait .logo .l2{font-size:calc(var(--u)*104);}
/* (standing up there is no room in the corner: the settings follow the mode buttons) */
body.portrait .title-settings{position:static;margin-top:calc(var(--u)*22);width:min(88vw,calc(var(--u)*380));}
body.portrait .title-guide{position:static;margin-top:calc(var(--u)*22);width:min(88vw,calc(var(--u)*380));}
/* (a narrower label column, so four keys still fit on one line in the narrow column) */
body.portrait .gk-row{grid-template-columns:56px 1fr;gap:6px;}
/* (with the controls the column can be taller than the screen: it scrolls, clear of the link to the
   other games above and the hint to turn the device below, and stays centred while it fits) */
body.portrait .title-ui{justify-content:flex-start;overflow-y:auto;pointer-events:auto;padding-top:64px;padding-bottom:64px;}
body.portrait .title-ui>.logo{margin-top:auto;}
body.portrait .title-ui>.title-settings{margin-bottom:auto;}
.fallback{position:absolute;inset:0;display:grid;place-content:center;gap:8px;text-align:center;background:#05070b;font:800 16px/1.6 var(--font);padding:24px;}
.fallback p{margin:0;}

@media (prefers-reduced-motion: reduce){
  .mode-btn.focus,.record,.unlock,.rank,.result-card,.result-ui,.big.show,.namecard.show,.toast.show,.hp.low i,.sel-card,.select-ui,.splash-card,.pad-a,.pv-logo{animation:none!important;}
  .big.show,.namecard.show,.toast.show{opacity:1;}
}

/* short landscape screens (phones): the title packs tighter so the difficulty row still fits */
@media (max-height:480px){
  .logo .l2{font-size:min(calc(var(--u)*128),64px);}
  .logo .jp{display:none;}
  .diff{margin-top:8px;row-gap:3px;}
  .diff-sel{min-height:34px;}
  .diff-note{min-height:2.7em;}
  .mode-btns{margin-top:8px;gap:6px;}
  .mode-btn.main{min-height:52px;}
  .mode-btn:not(.main){min-height:42px;}
  .pv-btn{margin-top:6px;min-height:30px;}
}
/* (up to a little taller, the controls pack tighter so they stay clear of the settings below them:
   wider, each action with its keys flowing on as many to a line as fit, smaller key caps, without
   the heading and the dash's footnote) */
@media (max-height:520px){
  body:not(.portrait) .title-guide{width:min(calc(100vw - 330px),420px);gap:6px;padding:8px 10px;}
  body:not(.portrait) .guide-k,body:not(.portrait) .gd-foot{display:none;}
  body:not(.portrait) .guide-keys{display:flex;flex-wrap:wrap;column-gap:14px;row-gap:4px;}
  body:not(.portrait) .gk-row{display:flex;gap:4px;}
  body:not(.portrait) .gk-row dt{margin-right:2px;}
  body:not(.portrait) .gk-row dd{flex-wrap:nowrap;gap:3px;}
  body:not(.portrait) .gk-row kbd{min-width:10px;padding:2px 5px;}
  body:not(.portrait) .guide-dash{gap:3px;padding:6px 8px;}
  body:not(.portrait) .gd-body{line-height:1.4;}
}

/* ---------- portrait: HUD stacks, action buttons sit above the move pad */
body.portrait .diff-note{min-height:2.7em;}
body.portrait .hud-boss{top:max(84px,calc(var(--u)*120));width:calc(100vw - 28px);}
body.portrait .hud-time{top:max(64px,calc(var(--u)*80));right:max(12px,calc(var(--u)*18));}
body.portrait .hint{top:max(150px,calc(var(--u)*190));white-space:normal;width:max-content;max-width:88vw;text-align:center;}
body.portrait .toast{top:max(190px,calc(var(--u)*230));white-space:normal;max-width:90vw;text-align:center;}
body.portrait .t-atk{right:calc(max(18px,env(safe-area-inset-right)) + 104px);bottom:calc(max(18px,env(safe-area-inset-bottom)) + 96px);}
body.portrait .t-jump{right:max(18px,env(safe-area-inset-right));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 150px);}
body.portrait .t-dash{right:max(18px,env(safe-area-inset-right));bottom:calc(max(18px,env(safe-area-inset-bottom)) + 250px);}