:root{
  --ink:#0a0b10;
  --cream:#f7e8c9;
  --orange:#ff7a2f;
  --red:#ff3b4e;
  --gold:#ffc857;
  --teal:#0d2b2d;
  --accent:#ff7a2f;
  --display:"Arial Black","Arial Bold",Impact,"Helvetica Neue",system-ui,sans-serif;
  --ui:"Helvetica Neue",Arial,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:#07080c;color:var(--cream);font-family:var(--ui);
  overflow:hidden;overscroll-behavior:none;position:fixed;inset:0;width:100%;
  touch-action:none;
}
[hidden]{display:none !important}
#app{position:fixed;inset:0;overflow:hidden;isolation:isolate}
#stage{position:absolute;inset:0}
#stage canvas{display:block}
#vignette{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(0,0,0,0) 46%, rgba(4,4,8,.55) 100%),
    linear-gradient(180deg, rgba(6,6,10,.5) 0%, rgba(6,6,10,0) 18%, rgba(6,6,10,0) 74%, rgba(6,6,10,.55) 100%);
}
.screen{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom))}
.scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(7,8,12,.92) 0%, rgba(7,8,12,.74) 34%, rgba(7,8,12,.18) 66%, rgba(7,8,12,.5) 100%);pointer-events:none}
.scrim.solid{background:rgba(6,7,11,.82);backdrop-filter:blur(6px)}
.title-inner{position:relative;z-index:2;width:min(640px,100%);text-align:center;transform:translateY(-17vh)}
.kicker{font-family:var(--ui);font-weight:800;font-size:clamp(10px,1.6vh,13px);letter-spacing:.42em;color:var(--gold);text-transform:uppercase;opacity:.95}
.logo{font-family:var(--display);text-transform:uppercase;line-height:.8;letter-spacing:-.012em;transform:skewX(-7deg);margin:.14em 0 .18em;user-select:none}
.logo span{display:block;font-size:clamp(38px,min(12.5vh,15vw),108px);font-weight:900;white-space:nowrap}
.logo span:first-child{color:var(--cream);filter:drop-shadow(0 5px 0 rgba(0,0,0,.55))}
.logo span.hot{
  background:linear-gradient(176deg,#ffe08a 0%,var(--orange) 52%,var(--red) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.6));
}
.logo.small span{font-size:clamp(32px,min(9vh,11vw),70px)}
	.sub{font-size:clamp(10px,1.7vh,15px);letter-spacing:.13em;text-transform:uppercase;color:rgba(247,232,201,.8);margin-bottom:clamp(16px,3.4vh,34px)}
.cta{
  font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(20px,3.4vh,30px);color:#160c05;border:none;cursor:pointer;
  background:linear-gradient(180deg,#ffd36b,var(--orange) 58%,#e05a14);
  padding:clamp(12px,2.2vh,18px) clamp(38px,9vw,64px);
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);
  box-shadow:0 8px 0 rgba(0,0,0,.5), 0 0 34px rgba(255,122,47,.4);
  transition:transform .08s ease, filter .15s ease;
  animation:pulse 2.4s ease-in-out infinite;
}
.cta:hover{filter:brightness(1.08)}
.cta:active{transform:translateY(3px) scale(.985);box-shadow:0 4px 0 rgba(0,0,0,.5)}
@keyframes pulse{0%,100%{box-shadow:0 8px 0 rgba(0,0,0,.5),0 0 24px rgba(255,122,47,.28)}50%{box-shadow:0 8px 0 rgba(0,0,0,.5),0 0 46px rgba(255,122,47,.55)}}
.meta{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:center;margin-top:clamp(14px,2.6vh,26px);min-height:22px}
#title .meta{position:relative;margin-top:clamp(8px,1.6vh,16px);flex-direction:column;align-items:center;gap:5px;z-index:3}
#title .board{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px}
.best{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(247,232,201,.6)}
.best b{color:var(--gold);font-size:14px;margin-left:4px}
.board{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;font-size:11px;letter-spacing:.08em;color:rgba(247,232,201,.66)}
.board .row{display:flex;gap:5px;align-items:baseline;white-space:nowrap}
.board a{color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(247,232,201,.3)}
.board b{color:var(--gold)}
.howto{margin-top:clamp(12px,2.2vh,20px);font-size:clamp(10px,1.5vh,12px);line-height:1.7;letter-spacing:.13em;text-transform:uppercase;color:rgba(247,232,201,.52)}
#title .howto{position:absolute;left:0;right:0;bottom:0;margin:0;padding:26px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(6,6,10,.92),rgba(6,6,10,.6) 55%,rgba(6,6,10,0));font-size:10px;line-height:1.8;pointer-events:none;text-align:center}
.howto b{color:var(--gold);font-weight:800;letter-spacing:.2em;margin-right:5px}
.howto p+p{margin-top:2px}

.screen .panel{
  position:relative;z-index:2;width:min(520px,100%);text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:clamp(20px,4vh,34px) 22px;background:rgba(10,11,16,.72);
  border:1px solid rgba(247,232,201,.16);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
}
.panel h2{font-family:var(--display);font-size:clamp(34px,7vh,58px);line-height:1;text-transform:uppercase;letter-spacing:-.01em;transform:skewX(-6deg);color:var(--cream);text-shadow:0 4px 0 rgba(0,0,0,.6)}
.panel .cta{margin-top:8px}
.ghost{
  background:none;border:none;color:rgba(247,232,201,.62);font-family:var(--ui);font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;font-size:11px;padding:8px 10px;cursor:pointer;
}
.ghost:hover{color:var(--cream)}
.scoreline{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:rgba(247,232,201,.7)}
.scoreline b{font-family:var(--display);font-size:clamp(28px,5vh,42px);color:var(--gold);letter-spacing:.02em;margin-left:8px;vertical-align:-4px}
#end .best{margin-top:-4px}
#end .board{margin-top:2px}

/* HUD */
#hud{position:absolute;z-index:10;left:0;right:0;top:0;padding:max(10px, env(safe-area-inset-top)) 12px 0;display:grid;grid-template-columns:1fr auto 1fr;gap:min(2.6vw,18px);align-items:start;pointer-events:none}
#hud .fighter{display:flex;flex-direction:column;gap:5px;min-width:0}
.clock #timer.low{color:#ff6b5e;text-shadow:0 3px 0 rgba(0,0,0,.7),0 0 18px rgba(255,70,50,.6)}
#hud .tag{display:flex;align-items:center;gap:8px;font-size:clamp(9px,1.3vh,11px);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(247,232,201,.9);text-shadow:0 2px 3px rgba(0,0,0,.8)}
#hud .right .tag{justify-content:flex-end}
.pips{display:inline-flex;gap:4px}
.pips i{width:9px;height:9px;transform:rotate(45deg);border:1px solid rgba(247,232,201,.5);background:rgba(0,0,0,.35);display:block}
.pips i.on{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px rgba(255,200,87,.7)}
.bar{position:relative;height:clamp(13px,2.2vh,19px);transform:skewX(-16deg);background:rgba(6,7,11,.85);border:1.5px solid rgba(247,232,201,.55);overflow:hidden;box-shadow:0 3px 0 rgba(0,0,0,.45), inset 0 0 0 2px rgba(0,0,0,.5)}
.bar .fill,.bar .lag{position:absolute;top:0;bottom:0;left:0;width:100%}
.bar .fill{background:linear-gradient(180deg,#ffe08a 0%,var(--orange) 45%,#d94f14 100%)}
.bar .lag{background:rgba(255,245,225,.85);transition:width .55s cubic-bezier(.2,.8,.2,1) .12s}
.right .bar{transform:skewX(16deg)}
.right .bar .fill,.right .bar .lag{left:auto;right:0}
#hud .right .bar .fill{background:linear-gradient(180deg,#ff9aa3 0%,var(--red) 50%,#a5122a 100%)}
.clock{text-align:center;min-width:52px;line-height:1}
.clock #timer{font-family:var(--display);font-size:clamp(24px,4.4vh,34px);color:var(--cream);text-shadow:0 3px 0 rgba(0,0,0,.7);letter-spacing:.02em}
.clock small{display:block;font-size:8px;letter-spacing:.22em;color:rgba(247,232,201,.55);margin-top:4px}
.clock small b{color:var(--gold)}
#combo{position:absolute;left:12px;top:calc(max(10px, env(safe-area-inset-top)) + 54px);font-family:var(--display);font-style:italic;font-size:clamp(15px,2.6vh,22px);letter-spacing:.02em;color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.65);opacity:0;transform:translateY(-4px) skewX(-8deg);transition:opacity .15s ease, transform .15s ease}
#combo.on{opacity:1;transform:translateY(0) skewX(-8deg)}
#pausebtn{position:absolute;right:12px;top:calc(max(10px, env(safe-area-inset-top)) + 56px);pointer-events:auto}
.chip{
  background:rgba(8,9,14,.55);border:1px solid rgba(247,232,201,.35);color:rgba(247,232,201,.8);
  font-family:var(--ui);font-weight:800;font-size:10px;letter-spacing:.18em;padding:7px 10px;cursor:pointer;
  backdrop-filter:blur(4px);border-radius:2px;
}
.chip:hover{color:var(--cream);border-color:rgba(247,232,201,.6)}
#soundbtn{position:absolute;z-index:40;right:12px;top:max(10px, env(safe-area-inset-top));pointer-events:auto}
#soundbtn.muted{color:rgba(247,232,201,.4);text-decoration:line-through}
#hint{position:absolute;z-index:9;left:0;right:0;bottom:14px;text-align:center;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,232,201,.42);pointer-events:none}
#hint .keys{color:var(--gold);font-weight:800}

#banner{position:absolute;z-index:20;left:0;right:0;top:34%;text-align:center;pointer-events:none;opacity:0;padding:0 10px;overflow:hidden}
#banner .big{
  display:inline-block;font-family:var(--display);font-size:clamp(26px,min(10.5vh,12.6vw),92px);line-height:.9;letter-spacing:.01em;
  text-transform:uppercase;white-space:nowrap;transform:skewX(-6deg) scale(1.06);color:var(--cream);
  text-shadow:0 5px 0 rgba(0,0,0,.65), 0 0 42px rgba(255,122,47,.55);
}
#banner .small{display:block;font-size:clamp(12px,1.9vh,15px);letter-spacing:.4em;color:var(--gold);margin-top:10px}
#banner.show{animation:bannerIn .42s cubic-bezier(.2,1.4,.4,1) forwards}
#banner.show .big{color:var(--orange)}
#banner.hot .big{color:var(--gold)}
#banner.win .big{color:#8ff0a4}
@keyframes bannerIn{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:none}}

@media (pointer:fine){#pad{display:none !important}
  #hint{display:block}
  }
@media (pointer:coarse){#hint{display:none}}
@media (max-aspect-ratio:1/1){
  #hint{display:none}
  #title .title-inner{transform:translateY(-16vh)}
}
@media (min-aspect-ratio:1/1){
  #title .title-inner{text-align:left;width:min(560px,46vw);margin-right:auto;margin-left:4vw;transform:translateY(-15vh)}
  .meta{justify-content:flex-start}
}
@media (max-height:520px){
  .logo span{font-size:clamp(40px,17vh,74px)}
  .sub{display:none}
  .howto{display:none}
  .cta{padding:10px 34px;font-size:20px}
}

/* ============================================================ navigation */
#title{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
#title .title-inner{transform:translateY(-8vh)}
#title .howto{bottom:calc(74px + env(safe-area-inset-bottom))}
#title .meta{margin-top:clamp(8px,1.6vh,16px)}

.menu{position:relative;z-index:3;display:flex;flex-direction:column;gap:5px;width:min(370px,88%);margin:0 auto}
.menu.small{width:min(320px,100%);margin-top:10px;gap:3px}
.menu-item{
  position:relative;display:flex;align-items:center;gap:10px;
  background:rgba(10,11,16,.6);border:1px solid rgba(247,232,201,.14);
  color:rgba(247,232,201,.86);cursor:pointer;text-align:left;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(13px,2.1vh,19px);padding:clamp(7px,1.3vh,11px) 14px;
  clip-path:polygon(0 0,100% 0,calc(100% - 11px) 100%,0 100%);
  transition:background .12s ease,color .12s ease,transform .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.menu.small .menu-item{font-size:clamp(12px,1.9vh,16px);padding:7px 14px}
.menu-item .mi-num{font-family:var(--ui);font-weight:800;font-size:9px;letter-spacing:.16em;color:rgba(255,200,87,.55);min-width:22px}
.menu-item .mi-label{flex:1;font-weight:900}
.menu-item .mi-note{font-family:var(--ui);font-weight:700;font-size:9px;letter-spacing:.18em;color:rgba(247,232,201,.42);text-transform:uppercase}
.menu-item::after{content:"";position:absolute;right:12px;top:50%;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:9px solid transparent;transform:translateY(-50%)}
.menu-item.is-sel{
  background:linear-gradient(90deg,var(--red) 0%,#b3122a 62%,rgba(179,18,42,.08) 100%);
  border-color:rgba(255,214,140,.65);color:#fff6e0;
  transform:translateX(5px);
  box-shadow:0 6px 18px rgba(0,0,0,.42);
}
.menu-item.is-sel .mi-note{color:rgba(255,246,224,.82)}
.menu-item.is-sel .mi-num{color:#ffe08a}
.menu-item:active{transform:translateX(2px) scale(.995)}
.menu-item:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.nav-screen{padding-top:max(14px, env(safe-area-inset-top));padding-bottom:calc(80px + env(safe-area-inset-bottom));align-items:stretch;justify-content:flex-start}
.nav-screen .scrim.solid{overflow:hidden}
.nav-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(2px) brightness(.34) saturate(1.08)}
.nav-screen .scrim.solid{background:linear-gradient(180deg,rgba(6,7,11,.9),rgba(6,7,11,.55) 45%,rgba(6,7,11,.86))}
.nav-inner{position:relative;z-index:2;width:min(920px,100%);margin:0 auto;display:flex;flex-direction:column;height:100%;min-height:0;padding:0 clamp(10px,2.4vw,26px)}
.nav-head{text-align:left;flex:0 0 auto;margin-bottom:clamp(6px,1.4vh,14px)}
.nav-head .kicker{font-size:clamp(8px,1.3vh,11px)}
.nav-title{
  font-family:var(--display);text-transform:uppercase;line-height:.92;letter-spacing:-.01em;
  font-size:clamp(24px,5.4vh,52px);color:var(--cream);transform:skewX(-6deg);
  text-shadow:0 4px 0 rgba(0,0,0,.6);margin:.08em 0 .12em;
}
.nav-sub{font-family:var(--ui);font-weight:800;font-size:clamp(8px,1.5vh,11px);letter-spacing:.22em;text-transform:uppercase;color:rgba(247,232,201,.56)}
.nav-sub b{color:var(--gold)}
#char-name,#arena-name{color:var(--cream)}

.grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(3px,.9vh,9px);width:100%;flex:0 0 auto}
.slot{
  position:relative;display:block;padding:0;overflow:hidden;cursor:pointer;
  height:clamp(40px,8.4vh,88px);border:1px solid rgba(247,232,201,.2);
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 6px,rgba(0,0,0,.03) 6px 12px),
    linear-gradient(160deg,rgba(58,34,48,.9),rgba(12,10,15,.94));
  clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%);
  transition:border-color .1s ease,transform .1s ease,box-shadow .1s ease;
}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.slot .num{
  position:absolute;left:4px;top:2px;z-index:2;font-family:var(--ui);font-weight:800;
  font-size:clamp(7px,1.2vh,10px);letter-spacing:.06em;color:rgba(255,246,224,.85);
  background:rgba(6,6,10,.62);padding:0 3px;
}
.slot .lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:clamp(11px,2vh,18px);color:rgba(247,232,201,.16);letter-spacing:.05em}
.slot.locked{cursor:pointer}
.slot.locked img{display:none}
.slot.is-sel{
  border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 0 0 2px rgba(255,200,87,.55),0 8px 20px rgba(0,0,0,.55);
  z-index:3;
}
.slot.is-sel .num{background:var(--red);color:#fff6e0}
.slot.is-pick{border-color:rgba(255,200,87,.55)}
.slot.is-pick::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold)}

.grid.arenas{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,1.6vw,16px)}
.arena{
  position:relative;padding:0;overflow:hidden;cursor:pointer;height:auto;aspect-ratio:16/10;
  border:1px solid rgba(247,232,201,.22);background:#100e12;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
  transition:border-color .1s ease,transform .1s ease,box-shadow .1s ease;
}
.arena img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
.arena .lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,6,10,.62);font-family:var(--display);font-size:clamp(9px,1.7vh,14px);letter-spacing:.2em;color:rgba(247,232,201,.72);text-transform:uppercase}
.arena .tag{position:absolute;left:0;right:0;bottom:0;padding:5px 8px;background:linear-gradient(0deg,rgba(6,6,10,.92),rgba(6,6,10,0));font-family:var(--ui);font-weight:800;font-size:clamp(7px,1.2vh,10px);letter-spacing:.16em;text-transform:uppercase;color:rgba(247,232,201,.86);z-index:2}
.arena.is-sel{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 0 0 2px rgba(255,200,87,.55),0 10px 24px rgba(0,0,0,.55)}
.arena.is-pick::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--gold);z-index:3}

#nav{
  position:absolute;z-index:36;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background:linear-gradient(0deg,rgba(6,6,10,.97) 30%,rgba(6,6,10,.78) 76%,rgba(6,6,10,0));
  border-top:1px solid rgba(255,200,87,.16);
}
.nav-dpad{display:flex;gap:4px}
.nav-dir{
  width:clamp(32px,4.8vh,42px);height:clamp(32px,4.8vh,42px);
  display:flex;align-items:center;justify-content:center;
  background:rgba(16,14,18,.9);border:1px solid rgba(247,232,201,.28);color:rgba(247,232,201,.8);
  font-size:clamp(9px,1.5vh,12px);cursor:pointer;border-radius:3px;
  -webkit-tap-highlight-color:transparent;touch-action:none;
}
.nav-dir:active,.nav-dir:hover{background:rgba(179,18,42,.8);border-color:var(--gold);color:#fff6e0}
.nav-actions{display:flex;gap:6px;flex-wrap:nowrap}
.nav-act{
  display:flex;align-items:center;gap:5px;
  background:rgba(16,14,18,.9);border:1px solid rgba(247,232,201,.26);
  color:rgba(247,232,201,.9);cursor:pointer;
  font-family:var(--ui);font-weight:800;font-size:clamp(8px,1.35vh,11px);letter-spacing:.14em;
  text-transform:uppercase;padding:clamp(6px,1.2vh,9px) clamp(7px,1.6vw,12px);
  border-radius:3px;-webkit-tap-highlight-color:transparent;
}
.nav-act .nglyph{
  display:inline-block;background:rgba(255,200,87,.16);border:1px solid rgba(255,200,87,.32);
  color:var(--gold);font-size:clamp(7px,1.05vh,9px);letter-spacing:.08em;padding:1px 4px;
}
.nav-act:hover,.nav-act:active{background:rgba(179,18,42,.85);border-color:var(--gold);color:#fff6e0}
.nav-act:focus-visible,.nav-dir:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

#toast{
  position:absolute;z-index:38;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));
  transform:translate(-50%,10px);opacity:0;pointer-events:none;
  background:rgba(6,6,10,.94);border:1px solid rgba(255,200,87,.4);
  color:var(--gold);font-family:var(--ui);font-weight:800;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;padding:8px 14px;white-space:nowrap;
  transition:opacity .15s ease,transform .15s ease;
}
#toast.on{opacity:1;transform:translate(-50%,0)}

#pause,#end{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
#pause .panel,#end .panel{gap:8px}

@media (max-width:520px){
  .menu-item .mi-note{display:none}
  .nav-act .nglyph{display:none}
  .menu{width:min(320px,92%)}
}
@media (max-height:520px){
  #title .title-inner{transform:translateY(-3vh)}
  #title .howto{display:block;bottom:calc(70px + env(safe-area-inset-bottom));padding:10px 10px 7px;font-size:8px}
  .nav-title{font-size:clamp(20px,5.6vh,36px)}
  .nav-head{margin-bottom:5px}
  .slot{height:clamp(34px,8.6vh,52px)}
  .menu-item{padding:5px 12px;font-size:clamp(11px,1.9vh,15px)}
}

/* HUD portrait + name row */
#hud .who{display:flex;align-items:center;gap:7px;min-width:0}
#hud .right .who{flex-direction:row-reverse}
#hud .portrait{
  flex:0 0 auto;width:clamp(26px,4.4vh,38px);height:clamp(26px,4.4vh,38px);
  overflow:hidden;border:1.5px solid rgba(247,232,201,.6);
  background:#0a0b10;box-shadow:0 3px 0 rgba(0,0,0,.45);
}
#hud .portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 10%}
#hud .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#title .meta{
  align-self:center;background:rgba(6,6,10,.46);border:1px solid rgba(247,232,201,.14);
  padding:5px 12px;margin-top:clamp(8px,1.6vh,16px);
}
#title .best{color:rgba(247,232,201,.72)}
#title .board{color:rgba(247,232,201,.6)}

/* ============================================================ arcade controller + HUD */
#combo,#pausebtn{display:none}
#hud{grid-template-rows:auto auto}
#hud .ultra{display:flex;align-items:center;gap:5px;min-width:0}
#hud .right .ultra{flex-direction:row-reverse}
#hud .stock{font-family:var(--display);font-size:clamp(12px,2.4vmin,17px);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.7);min-width:10px;text-align:center}
#hud .ubar{position:relative;flex:1;height:clamp(6px,1.3vmin,9px);background:rgba(4,12,24,.8);border:1.5px solid rgba(140,220,255,.75);box-shadow:0 0 10px rgba(70,190,255,.45);overflow:hidden;border-radius:2px}
#hud .ubar i{position:absolute;top:0;bottom:0;left:0;width:0;background:linear-gradient(180deg,#d6f6ff,#38b8ff 55%,#1572d6);transition:width .15s ease}
#hud .right .ubar i{left:auto;right:0}
#hud .ubar s{position:absolute;top:0;bottom:0;width:2px;background:rgba(4,12,24,.9);left:33.3%}
#hud .ubar s+s{left:66.6%}
#hud .ul-label{font-family:var(--ui);font-weight:900;font-size:clamp(7px,1.4vmin,10px);letter-spacing:.06em;color:#fff;text-shadow:0 1px 2px #000;white-space:nowrap}
#hud .ul-label b{color:#7fd8ff}
#hud .assist{display:flex;align-items:center;gap:5px;opacity:.55;filter:grayscale(.7);transition:opacity .2s,filter .2s}
#hud .right .assist{flex-direction:row-reverse}
#hud .assist.ready{opacity:1;filter:none}
#hud .aface{width:clamp(18px,3.6vmin,26px);height:clamp(18px,3.6vmin,26px);border-radius:50%;overflow:hidden;border:1.5px solid #8ff0a4;background:#111;flex:0 0 auto}
#hud .assist.ready .aface{box-shadow:0 0 10px rgba(143,240,164,.8)}
#hud .aface img{width:100%;height:100%;object-fit:cover;object-position:50% 10%;display:block}
#hud .alabel{position:relative;display:block;width:clamp(42px,9vmin,62px);height:clamp(11px,2vmin,14px);background:rgba(6,20,12,.75);border:1px solid rgba(143,240,164,.6);overflow:hidden}
#hud .alabel i{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(180deg,#b9ffcb,#3fcf72)}
#hud .alabel em{position:relative;display:block;text-align:center;font-style:normal;font-family:var(--ui);font-weight:900;font-size:clamp(6px,1.2vmin,8px);line-height:clamp(11px,2vmin,14px);letter-spacing:.12em;color:#062010}

#topbtns{grid-column:1/-1;display:flex;justify-content:center;gap:clamp(6px,1.6vmin,14px);margin-top:2px;pointer-events:none}
.tbtn{
  pointer-events:auto;user-select:none;touch-action:none;cursor:pointer;
  font-family:var(--display);font-size:clamp(11px,2.7vmin,19px);letter-spacing:.04em;color:#ffc21a;
  background:linear-gradient(180deg,rgba(40,36,30,.92),rgba(14,12,10,.92));
  border:2px solid #e3a21a;border-radius:9px;padding:clamp(5px,1.1vmin,8px) clamp(12px,3vmin,26px);
  box-shadow:0 3px 0 rgba(0,0,0,.55),inset 0 1px 0 rgba(255,230,160,.18);text-shadow:0 2px 0 rgba(0,0,0,.6);
}
.tbtn.hold,.tbtn:active{transform:translateY(2px);background:#3a2a0a;box-shadow:0 1px 0 rgba(0,0,0,.55),0 0 16px rgba(255,194,26,.55)}

.hits{position:absolute;top:calc(max(10px, env(safe-area-inset-top)) + clamp(120px,24vmin,160px));font-family:var(--display);font-size:clamp(24px,6.4vmin,46px);line-height:1;color:#ffc21a;letter-spacing:-.01em;
  text-shadow:-2px -2px 0 #2a1700,2px -2px 0 #2a1700,-2px 2px 0 #2a1700,2px 2px 0 #2a1700,0 5px 0 rgba(0,0,0,.55);opacity:0;transition:opacity .2s ease;pointer-events:none;white-space:nowrap}
.hits.left{left:max(16px,4vw)}
.hits.right{right:max(16px,4vw)}
.hits.on{opacity:1}
.hits.pop{animation:hitpop .22s cubic-bezier(.2,1.8,.4,1)}
@keyframes hitpop{0%{transform:scale(1.45)}100%{transform:scale(1)}}

#stage-n{position:fixed;left:50%;transform:translateX(-50%);top:var(--lvl-top,92px);display:flex;align-items:center;gap:8px;padding:4px 12px 4px 10px;max-width:calc(100vw - 16px);
  background:linear-gradient(90deg,rgba(14,8,4,.82),rgba(30,14,6,.82));border:1px solid rgba(255,194,26,.55);border-radius:4px;box-shadow:0 3px 10px rgba(0,0,0,.45);
  font-family:var(--display);font-size:clamp(10px,2.4vmin,14px);letter-spacing:.06em;color:#ffc21a;text-shadow:0 2px 0 rgba(0,0,0,.8);pointer-events:none;white-space:nowrap;overflow:hidden;z-index:8}
#stage-n b{color:#ffc21a;overflow:hidden;text-overflow:ellipsis}
#stage-n span{color:var(--cream);font-weight:700;opacity:.92;padding-left:8px;border-left:1px solid rgba(255,194,26,.45)}

#banner.round .big{color:#ffc21a !important;font-size:clamp(40px,min(13vh,15vw),110px);
  text-shadow:-3px -3px 0 #2a1700,3px -3px 0 #2a1700,-3px 3px 0 #2a1700,3px 3px 0 #2a1700,0 7px 0 rgba(0,0,0,.6)}
#banner.ko .big{color:#ff1d25 !important;font-size:clamp(80px,min(28vh,34vw),240px);font-style:italic;transform:skewX(-10deg);
  text-shadow:-4px -4px 0 #1a0505,4px -4px 0 #1a0505,-4px 4px 0 #1a0505,4px 4px 0 #1a0505,10px 12px 0 rgba(20,4,4,.75)}
#banner.ko.show{animation:koIn .5s cubic-bezier(.2,1.6,.35,1) forwards}
@keyframes koIn{0%{opacity:0;transform:scale(2.4)}100%{opacity:1;transform:none}}

/* left analogue stick, six face buttons on the right */
#pad{position:absolute;z-index:15;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;
  padding:0 max(10px, env(safe-area-inset-right)) calc(26px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));pointer-events:none}
#stick{position:relative;pointer-events:auto;touch-action:none;width:clamp(116px,31vmin,168px);height:clamp(116px,31vmin,168px);flex:0 0 auto}
#stick .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:radial-gradient(circle,rgba(255,255,255,.08),rgba(255,255,255,.02) 70%);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
#stick .knob{position:absolute;left:50%;top:50%;width:46%;height:46%;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 40% 35%,#ffd95a,#f2b818 60%,#c98d06);box-shadow:0 4px 0 rgba(0,0,0,.35),inset 0 -3px 0 rgba(0,0,0,.15);pointer-events:none}
#stick.hold .knob{box-shadow:0 2px 0 rgba(0,0,0,.35),0 0 18px rgba(255,210,60,.6)}
#pad .face{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(5px,1.4vmin,10px);pointer-events:none;align-items:center;justify-items:center}
.fbtn{
  pointer-events:auto;user-select:none;touch-action:none;cursor:pointer;
  width:clamp(44px,12.4vmin,74px);height:clamp(44px,12.4vmin,74px);border-radius:50%;position:relative;overflow:hidden;
  font-family:var(--display);font-size:clamp(12px,3.5vmin,20px);color:#fff;letter-spacing:.02em;
  border:3px solid rgba(0,0,0,.35);box-shadow:0 4px 0 rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.25);
  text-shadow:0 2px 0 rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;opacity:.93;
  transition:transform .05s ease,filter .05s ease;
}
.fbtn.red{background:radial-gradient(circle at 50% 35%,#ff4a4a,#d01f26 70%)}
.fbtn.blue{background:radial-gradient(circle at 50% 35%,#4466ff,#1a33c4 70%)}
.fbtn.gold{background:radial-gradient(circle at 50% 35%,#ffd23e,#e8a90c 70%)}
.fbtn.green{background:radial-gradient(circle at 50% 35%,#3ed06a,#178a3a 70%)}
.fbtn.ult{background:radial-gradient(circle at 50% 35%,#ff9a3c,#c2380c 70%);border-color:#ffd23e}
.fbtn.combo{background:radial-gradient(circle at 50% 35%,#c86bff,#6a1fb4 70%)}
.fbtn.grab{background:radial-gradient(circle at 50% 35%,#9aa3b5,#4a5263 70%)}
.fbtn.taunt{background:radial-gradient(circle at 50% 35%,#4a4036,#1c1712 70%);border-color:#e3a21a;color:#ffc21a}
.fbtn.guard{background:radial-gradient(circle at 50% 35%,#f2f2f2,#8c96a8 70%);color:#1c1712;text-shadow:none;border-color:#ffd23e}
.fbtn.ult,.fbtn.combo,.fbtn.grab,.fbtn.taunt,.fbtn.guard{font-size:clamp(8px,2.3vmin,13px);letter-spacing:0}
.fbtn span{position:relative;z-index:2}
.fbtn .cd{position:absolute;left:0;right:0;bottom:0;height:var(--cd,0%);background:rgba(0,0,0,.55);z-index:1;pointer-events:none}
.fbtn.off{filter:saturate(.35) brightness(.75)}
.fbtn.ult.ready{animation:ultpulse .8s ease-in-out infinite alternate}
@keyframes ultpulse{from{box-shadow:0 4px 0 rgba(0,0,0,.4),0 0 0 rgba(255,160,40,0)}to{box-shadow:0 4px 0 rgba(0,0,0,.4),0 0 22px rgba(255,170,50,.95)}}
.fbtn.hold,.fbtn:active{transform:translateY(3px) scale(.95);filter:brightness(1.25);box-shadow:0 1px 0 rgba(0,0,0,.4)}
@media (max-aspect-ratio:1/1){
  .hits{top:calc(max(10px, env(safe-area-inset-top)) + 150px)}
}
.tbtn,.fbtn,.hits,#stage-n,#banner .big,#hud .stock{font-weight:900}
.hits{font-style:italic}

/* landscape: START BLOCK TAUNT ride the top edge between the two bars, as in the reference */
@media (min-aspect-ratio:1/1){
  #hud{--tb:clamp(64px,10.5vw,118px);padding-top:max(6px, env(safe-area-inset-top));gap:min(1.6vw,12px)}
  #topbtns{position:absolute;top:max(6px, env(safe-area-inset-top));left:50%;transform:translateX(-50%);margin:0;gap:6px}
  .tbtn{width:var(--tb);padding:4px 0;font-size:clamp(11px,2.2vw,19px)}
  .clock{width:calc(var(--tb) * 3 + 12px);padding-top:calc(clamp(15px,2.2vw,23px) + 14px)}
  .clock #timer{font-size:clamp(16px,4vh,26px)}
  .clock small{margin-top:1px}
  #hud .fighter{flex-direction:row;flex-wrap:wrap;align-items:center;gap:3px 6px}
  #hud .fighter .who{order:0;flex:1}
  #hud .fighter .assist{order:1}
  #hud .right .assist{order:0}
  #hud .right .who{order:1}
  #hud .fighter .meter{order:2;flex:0 0 100%;display:flex;align-items:center;gap:6px}
  #hud .right .meter{flex-direction:row-reverse}
  #hud .meter .bar{flex:1}
  #hud .fighter .ultra{order:3;flex:0 0 100%}
  #hud .portrait{width:clamp(24px,6.4vh,40px);height:clamp(24px,6.4vh,40px)}
  .hits{top:calc(max(6px, env(safe-area-inset-top)) + clamp(84px,22vh,150px))}
  .fbtn{opacity:.86}
}
#hud .assist,#hud .alabel,#hud .aface{flex-shrink:0}
#hud .alabel em{white-space:nowrap}
#hud .who{flex-shrink:1;min-width:0}

/* ============================================================ start screen */
#load.press{z-index:60;padding:0;background:#05060a;cursor:pointer;overflow:hidden}
.press-bg{position:absolute;inset:-30px;background:url(assets/bg/start.jpg) center/cover no-repeat;filter:blur(18px) brightness(.45);transform:scale(1.08)}
.press-art{position:relative;z-index:1;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;pointer-events:none}
#load.ready .press-art{animation:pressPulse 1.6s ease-in-out infinite}
@keyframes pressPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
.press-foot{position:absolute;z-index:2;left:0;right:0;bottom:max(16px, env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px}
.press-foot .loadbar{width:min(260px,60vw);height:4px;background:rgba(255,255,255,.14);overflow:hidden}
.press-foot .loadbar i{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}
.press-foot .hintline{font-family:var(--display);font-size:clamp(11px,1.8vh,14px);letter-spacing:.3em;text-transform:uppercase;color:var(--cream);text-shadow:0 2px 4px #000}
#load.ready .loadbar{display:none}
#load.ready .press-foot{display:none}
@keyframes blink{50%{opacity:.35}}

/* long first line of the logo */
.logo span.long{font-size:clamp(26px,min(9vh,11vw),80px)}
@media (min-aspect-ratio:1/1){.logo span.long{font-size:clamp(26px,min(9vh,4.3vw),80px)}}

/* combo list */
.combo-list{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;text-align:left;font-size:clamp(10px,1.6vh,13px);letter-spacing:.08em;text-transform:uppercase;color:rgba(247,232,201,.85);max-height:46vh;overflow:auto}
.combo-list b{color:var(--gold);font-family:var(--display);letter-spacing:.04em;white-space:nowrap}
.combo-list span{white-space:nowrap}
#pause .combo-list{max-height:30vh}
.combo-list{font-size:clamp(9px,min(1.6vh,2.9vw),13px);letter-spacing:.04em;gap:5px 10px;width:100%}
.combo-list span{white-space:normal}

/* ============================================================ main menu, as uploaded */
@font-face{font-family:"Oswald";src:url(assets/fonts/oswald.woff2) format("woff2");font-weight:200 700;font-display:swap}
.mm{padding:0;display:block;--u:min(1vh,.62vw);font-family:"Oswald","Arial Narrow",Impact,sans-serif}
.mm-bg{position:absolute;inset:0;background:#07060a url(assets/ui/menu_bg.jpg) 70% 50%/cover no-repeat}
.mm-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,5,8,.55) 0%,rgba(6,5,8,.3) 30%,rgba(6,5,8,0) 55%)}
.mm:not(.main) .mm-bg::after{background:linear-gradient(90deg,rgba(6,5,8,.86) 0%,rgba(6,5,8,.66) 42%,rgba(6,5,8,.2) 75%)}
.mm-bg.dim::after{background:rgba(6,5,8,.78)}
.mm-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:flex-start;
  padding:max(calc(var(--u) * 5.2), env(safe-area-inset-top)) max(4vw, env(safe-area-inset-right)) max(calc(var(--u) * 3), env(safe-area-inset-bottom)) max(1.8vw, env(safe-area-inset-left));overflow:hidden}
.mm-logo{display:block;height:calc(var(--u) * 34.6);width:auto;max-width:94vw;object-fit:contain;object-position:left top;user-select:none;-webkit-user-drag:none;pointer-events:none;flex:0 0 auto}
.mm:not(.main) .mm-logo{height:calc(var(--u) * 17)}
.mm-head{position:relative;margin-top:calc(var(--u) * -.6);margin-left:calc(var(--u) * 1);width:calc(var(--u) * 38);min-width:220px;height:calc(var(--u) * 6.8);display:flex;align-items:center;
  background:url(assets/ui/brush.webp) left center/100% 100% no-repeat;flex:0 0 auto}
.mm-head span{padding-left:calc(var(--u) * 5.6);font-weight:600;font-size:max(18px,calc(var(--u) * 4.3));letter-spacing:.01em;color:#ece6e0;text-shadow:0 2px 0 rgba(0,0,0,.45);line-height:1}
.mm-kick{margin:calc(var(--u) * 1.4) 0 0 calc(var(--u) * 6.6);font-weight:500;font-size:max(11px,calc(var(--u) * 2));letter-spacing:.12em;text-transform:uppercase;color:rgba(236,230,224,.6)}
.mm-body{display:flex;flex-direction:column;align-items:flex-start;margin-top:calc(var(--u) * 2.4);margin-left:calc(var(--u) * 1);min-height:0;max-width:100%}
.mm-item{position:relative;display:flex;align-items:baseline;gap:calc(var(--u) * 1.6);background:none;border:0;cursor:pointer;text-align:left;
  font-family:inherit;font-weight:600;text-transform:uppercase;font-size:max(17px,calc(var(--u) * 4.3));line-height:1;letter-spacing:.012em;
  color:#c9c3bd;padding:calc(var(--u) * .85) calc(var(--u) * 3) calc(var(--u) * .85) calc(var(--u) * 5.6);min-height:calc(var(--u) * 6.05);
  text-shadow:0 2px 3px rgba(0,0,0,.6);isolation:isolate;transition:color .1s ease;-webkit-tap-highlight-color:transparent;max-width:100%}
.mm-item::before{content:"";position:absolute;z-index:-1;left:calc(var(--u) * 1.2);right:0;top:4%;bottom:4%;background:url(assets/ui/brush.webp) left center/100% 100% no-repeat;opacity:0;transform:scaleX(.6);transform-origin:left center;transition:opacity .12s ease,transform .14s ease}
.mm-item.is-sel{color:#fff}
.mm-item.is-sel::before{opacity:.8;transform:none}
.mm-item:focus-visible{outline:2px solid #e3a21a;outline-offset:2px}
.mm-item .note{font-weight:400;font-size:max(10px,calc(var(--u) * 1.8));letter-spacing:.1em;color:rgba(236,230,224,.5)}
.mm-item.is-sel .note{color:rgba(255,240,230,.85)}
.mm-item .val{font-weight:500;font-size:max(12px,calc(var(--u) * 2.4));letter-spacing:.08em;color:#ffc857;min-width:6em;text-align:center}
.mm-item .step{font-size:max(10px,calc(var(--u) * 1.9));color:rgba(255,200,87,.75);padding:0 .5em;cursor:pointer;align-self:center}
.mm-item.soon{color:rgba(201,195,189,.38)}
.mm-item.soon .note{color:rgba(236,230,224,.3)}
.mm-item input{font-family:inherit;font-weight:500;font-size:max(14px,calc(var(--u) * 2.6));letter-spacing:.08em;text-transform:uppercase;color:#ffc857;background:rgba(0,0,0,.45);border:1px solid rgba(255,200,87,.45);padding:.25em .5em;width:11em;outline:none;border-radius:2px}
.mm-item input::placeholder{color:rgba(255,200,87,.38)}
.mm-foot{margin-top:auto;display:flex;gap:calc(var(--u) * 3.2);padding-left:calc(var(--u) * 4);padding-top:calc(var(--u) * 1.6);flex:0 0 auto}
.mm-hint{display:flex;align-items:center;gap:calc(var(--u) * 1.3);background:none;border:0;cursor:pointer;font-family:inherit;font-weight:500;font-size:max(13px,calc(var(--u) * 2.5));letter-spacing:.04em;color:#c9c3bd;padding:4px 2px}
.mm-hint:hover{color:#fff}
.mm-hint i{position:relative;display:inline-block;width:max(20px,calc(var(--u) * 3.3));height:max(20px,calc(var(--u) * 3.3));border-radius:50%;border:2px solid #b9b3ad;flex:0 0 auto}
.mm-hint i.gx::before,.mm-hint i.gx::after{content:"";position:absolute;left:50%;top:50%;width:62%;height:2px;background:#b9b3ad;transform:translate(-50%,-50%) rotate(45deg)}
.mm-hint i.gx::after{transform:translate(-50%,-50%) rotate(-45deg)}
.mm-hint i.go::before{content:"";position:absolute;inset:22%;border-radius:50%;border:2px solid #d0353f}

/* landscape: two columns for the sub screens, the extra panel on the right */
@media (min-aspect-ratio:1/1){
  .mm:not(.main) .mm-inner{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto 1fr auto;column-gap:4vw;align-items:start}
  .mm:not(.main) .mm-logo,.mm:not(.main) .mm-head,.mm:not(.main) .mm-kick,.mm:not(.main) .mm-body,.mm:not(.main) .mm-foot{grid-column:1}
  .mm:not(.main) .mm-logo{grid-row:1}.mm:not(.main) .mm-head{grid-row:2}.mm:not(.main) .mm-kick{grid-row:3}.mm:not(.main) .mm-body{grid-row:4}.mm:not(.main) .mm-foot{grid-row:5}
  .mm .bracket,.mm .cf-stage,.mm .records-list,.mm .mm-combos,.mm .controls-panel{grid-column:2;grid-row:1 / 5;align-self:center;justify-self:center}
  .mm .rec-board{grid-column:2;grid-row:5}
  #story .mm-cards{position:absolute;right:4vw;top:50%;transform:translateY(-50%);width:min(52vw,640px)}
}
/* portrait: a phone held upright */
@media (max-aspect-ratio:1/1){
  .mm{--u:min(.86vh,1.9vw)}
  .mm-bg{background-position:68% 50%}
  .mm-bg::after{background:linear-gradient(180deg,rgba(6,5,8,.35) 0%,rgba(6,5,8,.5) 30%,rgba(6,5,8,.72) 60%,rgba(6,5,8,.88) 100%)}
  .mm:not(.main) .mm-bg::after{background:linear-gradient(180deg,rgba(6,5,8,.6),rgba(6,5,8,.86) 40%,rgba(6,5,8,.92))}
  .mm-inner{padding-left:max(3vw, env(safe-area-inset-left));padding-right:max(3vw, env(safe-area-inset-right))}
  .main .mm-logo{width:94vw;height:auto;max-height:34vh;align-self:center}
  .main .mm-head{margin-top:calc(var(--u) * 3)}
  .main .mm-item{font-size:max(19px,calc(var(--u) * 4.6));min-height:calc(var(--u) * 6.8)}
  .mm:not(.main) .mm-logo{height:auto;width:56vw;max-height:15vh}
  .mm-item .note{display:none}
  .mm .bracket,.mm .cf-stage,.mm .records-list,.mm .mm-combos,.mm .controls-panel{align-self:stretch;margin-top:calc(var(--u) * 2)}
  #story .mm-cards{margin-top:calc(var(--u) * 2.4)}
  .mm-foot{padding-bottom:6px}
}

/* story chapters */
.mm-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
#story .mm-body{width:100%}
.mm-item.card{display:block;padding:0;min-height:0;aspect-ratio:4/3;border:1px solid rgba(236,230,224,.22);overflow:hidden;background:#100c10}
.mm-item.card::before{display:none}
.mm-item.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(.9)}
.mm-item.card .cn,.mm-item.card .ct{position:absolute;left:6px;right:6px;line-height:1.1;text-shadow:0 2px 3px #000}
.mm-item.card .cn{bottom:calc(6px + 1.3em);font-size:max(9px,calc(var(--u) * 1.5));letter-spacing:.14em;color:#ffc857}
.mm-item.card .ct{bottom:6px;font-size:max(11px,calc(var(--u) * 2.1));color:#fff}
.mm-item.card.locked img{filter:brightness(.22) grayscale(1)}
.mm-item.card.locked .ct{color:rgba(236,230,224,.45)}
.mm-item.card.current{border-color:rgba(255,200,87,.6)}
.mm-item.card.is-sel{border:2px solid #e02a37;box-shadow:0 0 0 2px rgba(224,42,55,.35),0 0 18px rgba(224,42,55,.5)}
.mm-item.card.is-sel img{filter:brightness(.85)}

/* tournament bracket */
.bracket{display:flex;flex-direction:column;gap:8px;width:min(560px,100%)}
.brow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto minmax(0,1fr) minmax(0,.7fr);align-items:center;gap:10px;padding:8px 12px;background:rgba(10,8,12,.72);border:1px solid rgba(236,230,224,.16);font-size:max(11px,calc(var(--u) * 2));letter-spacing:.06em}
.brow .br{color:rgba(236,230,224,.7)}
.brow .bf{display:flex;align-items:center;gap:6px;color:#fff}
.brow .bf img{width:max(26px,calc(var(--u) * 5));height:max(26px,calc(var(--u) * 5));object-fit:cover;object-position:50% 10%;border:1px solid rgba(236,230,224,.4);background:#111}
.brow i{font-style:normal;color:#e02a37;font-weight:700}
.brow .bs{text-align:right;color:rgba(236,230,224,.5)}
.brow.won .bs{color:#8ff0a4}.brow.lost .bs{color:#ff6b6b}
.brow.next{border-color:#e02a37;box-shadow:inset 3px 0 0 #e02a37}.brow.next .bs{color:#ffc857}

/* create fighter */
.cf-stage{position:relative;display:flex;flex-direction:column;align-items:center;width:min(420px,100%)}
.cf-fig{position:relative;height:min(50vh,420px);aspect-ratio:460/470}
@media (max-aspect-ratio:1/1){.cf-fig{height:min(30vh,300px)}}
.cf-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.6))}
.tint{position:absolute;inset:0;mix-blend-mode:multiply;pointer-events:none;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.cf-label{font-weight:700;font-size:max(18px,calc(var(--u) * 4));letter-spacing:.04em;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.6)}

/* records, move list, controls */
.records-list{display:grid;grid-template-columns:auto auto;gap:6px 22px;font-size:max(12px,calc(var(--u) * 2.3));letter-spacing:.08em;background:rgba(10,8,12,.66);padding:14px 18px;border:1px solid rgba(236,230,224,.14)}
.records-list b{font-weight:500;color:rgba(236,230,224,.66)}
.records-list span{color:#ffc857;text-align:right}
.rec-board{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-family:var(--ui)}
.mm-combos{background:rgba(10,8,12,.66);padding:12px 16px;border:1px solid rgba(236,230,224,.14);max-height:52vh;font-family:var(--ui);width:min(520px,100%)}
@media (max-aspect-ratio:1/1){.mm-combos{max-height:40vh}}
.controls-panel{display:flex;flex-direction:column;gap:8px;max-width:520px;background:rgba(10,8,12,.8);padding:12px 16px;border:1px solid rgba(255,200,87,.3);font-family:var(--ui);font-size:max(11px,calc(var(--u) * 1.8));line-height:1.6;letter-spacing:.06em;text-transform:uppercase;color:rgba(236,230,224,.8)}
.controls-panel b{color:#ffc857;margin-right:6px}

/* ============================================================ fighter sheet */
.sheet{padding:0;display:block;font-family:"Oswald","Arial Narrow",Impact,sans-serif}
.sheet-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;gap:6px;
  padding:max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) calc(66px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));width:min(1100px,100%);margin:0 auto}
.sheet-top{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.sheet-logo{height:clamp(40px,9vh,86px);width:auto;pointer-events:none}
.sheet-title{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.sheet-title b{font-weight:700;font-size:clamp(18px,4.4vh,38px);color:#fff;letter-spacing:.01em;text-shadow:0 3px 0 rgba(0,0,0,.55)}
.sheet-title small{font-weight:500;font-size:clamp(9px,1.6vh,13px);letter-spacing:.16em;color:#ffc857;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sheet-title small+b+small{color:rgba(236,230,224,.6)}
.pv{position:relative;flex:1 1 auto;min-height:150px;overflow:hidden;border:1px solid rgba(255,200,87,.35);background:#0b0910}
.pv-sky{position:absolute;inset:0;background:url(assets/ui/sheet_sky.jpg) center 30%/cover no-repeat;filter:brightness(.62) saturate(1.05)}
.pv-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,6,10,.92) 0%,rgba(8,6,10,.15) 45%,rgba(8,6,10,.35) 100%)}
.pv-fig{position:absolute;left:4%;bottom:-2%;height:108%;aspect-ratio:460/470}
.pv-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(0,0,0,.7))}
.pv-fig.pop{animation:pvIn .28s cubic-bezier(.2,1.3,.4,1)}
@keyframes pvIn{0%{opacity:0;transform:translateX(-18px) scale(.96)}100%{opacity:1;transform:none}}
.pv-empty{position:absolute;inset:18% 20%;display:flex;align-items:center;justify-content:center;font-size:clamp(50px,14vh,120px);color:rgba(236,230,224,.2);border:2px dashed rgba(236,230,224,.18)}
.pv-plate{position:absolute;right:4%;bottom:10%;left:48%;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px}
.pv-plate b{font-weight:700;font-size:clamp(22px,min(7vh,7.4vw),64px);line-height:.95;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.6),0 0 24px rgba(224,42,55,.45)}
.pv-plate span{font-weight:500;font-size:clamp(10px,1.9vh,15px);letter-spacing:.14em;text-transform:uppercase;color:#ffc857}
#chars .grid{grid-template-columns:repeat(16,minmax(0,1fr));gap:clamp(3px,.8vh,7px);flex:0 0 auto}
#chars .slot{grid-column:span 2;height:clamp(36px,7.6vh,74px);border:1px solid rgba(236,230,224,.22);background:linear-gradient(160deg,rgba(40,36,42,.92),rgba(14,12,16,.96));clip-path:none;border-radius:2px}
#chars .slot:nth-child(33){grid-column:4 / span 2}
#chars .slot img{object-position:50% 10%}
#chars .slot .tint{-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 10%;mask-position:50% 10%}
#chars .slot .num{left:50%;top:auto;bottom:0;transform:translateX(-50%);background:rgba(10,8,8,.8);color:#ffc857;font-family:"Oswald",sans-serif;font-weight:500;padding:0 5px;border-radius:2px 2px 0 0;font-size:clamp(8px,1.3vh,11px)}
#chars .slot .plus{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(14px,3vh,26px);color:rgba(236,230,224,.28);padding-bottom:8px}
#chars .slot.is-pick::after{display:none}
#chars .slot.taken{opacity:.35}
#chars .slot.is-sel{border-color:#e02a37;box-shadow:0 0 0 2px rgba(224,42,55,.55),0 0 16px rgba(224,42,55,.5);transform:translateY(-2px)}
#chars .slot.is-sel .num{background:#e02a37;color:#fff}
#hud .portrait{position:relative}
#hud .portrait .tint{-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:50% 10%;mask-position:50% 10%}
@media (min-aspect-ratio:1/1){
  .pv-fig{left:8%}
  .pv-plate{left:42%}
}
@media (max-height:520px){
  #chars .slot{height:clamp(26px,6.6vh,40px)}
  .sheet-logo{height:38px}
}
#title.mm,#chars.sheet{padding:0}
.brow .bf .q{display:inline-flex;align-items:center;justify-content:center;width:max(26px,calc(var(--u) * 5));height:max(26px,calc(var(--u) * 5));border:1px dashed rgba(236,230,224,.35);font-style:normal;color:rgba(236,230,224,.5)}
/* character card on the sheet */
.pv-plate{top:6%;bottom:auto;justify-content:flex-start}
.pv-plate em{font-style:normal;font-weight:500;font-size:clamp(9px,1.6vh,13px);letter-spacing:.12em;color:rgba(236,230,224,.75)}
.pv-stats{display:flex;flex-direction:column;gap:3px;width:min(260px,100%);margin-top:4px}
.sbar{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;font-weight:500;font-size:clamp(8px,1.35vh,11px);letter-spacing:.1em;color:rgba(236,230,224,.8)}
.sbar span{text-align:left;min-width:6.6em}
.sbar i{position:relative;display:block;height:clamp(5px,1vh,8px);background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 18%,transparent 18% 20%);border-radius:1px}
.sbar b{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#ff5a1f,#ffa53a);border-radius:1px}
.pv-sig{display:flex;flex-direction:column;align-items:flex-end;gap:1px;margin-top:4px;font-weight:500;font-size:clamp(9px,1.5vh,12px);letter-spacing:.08em;color:#ffc857}
.pv-sig span::before{content:"\2022  ";color:#e02a37}
.pv-outfits{position:absolute;right:3%;bottom:4%;display:flex;gap:6px;z-index:3}
.ochip{position:relative;width:clamp(44px,8.4vh,80px);height:clamp(58px,11vh,104px);padding:0;border:1px solid rgba(236,230,224,.3);background:rgba(10,8,12,.75);cursor:pointer;overflow:hidden;border-radius:2px}
.ochip img{position:absolute;left:0;right:0;top:0;bottom:14px;width:100%;height:calc(100% - 14px);object-fit:contain;object-position:50% 100%}
.ochip span{position:absolute;left:0;right:0;bottom:0;height:14px;font-family:"Oswald",sans-serif;font-weight:500;font-size:8px;line-height:14px;letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ochip.cur{border-color:#ffc857}
.ochip.is-sel{border:2px solid #e02a37;box-shadow:0 0 12px rgba(224,42,55,.6)}
@media (max-aspect-ratio:1/1){
  .pv-sig{display:none}
  .pv-plate{left:44%}
  .pv-fig{left:-4%}
  .pv-stats{width:100%}
  .sbar span{min-width:5.4em}
}
/* card v2: everything in one column on the right, outfits in the flow so nothing overlaps */
.pv-plate{position:absolute;top:4%;bottom:4%;right:3%;left:44%;display:flex;flex-direction:column;align-items:flex-end;gap:3px;overflow:hidden}
.pv-plate b{font-size:clamp(20px,min(5.6vh,6.4vw),56px)}
.pv-cols{display:flex;gap:16px;justify-content:flex-end;align-items:flex-start;max-width:100%}
.pv-stats{width:min(230px,100%);flex:0 1 auto}
.pv-sig{margin-top:0;align-items:flex-start;flex:0 0 auto}
.pv-sig strong{font-weight:600;font-size:clamp(9px,1.4vh,12px);letter-spacing:.14em;color:#fff}
.pv-sig span{display:flex;gap:8px;justify-content:space-between;width:100%}
.pv-sig span::before{content:none}
.pv-sig u{text-decoration:none;color:#ffc857}
.pv-sig i{font-style:normal;color:rgba(236,230,224,.8);white-space:nowrap}
.pv-outfits{position:static;margin-top:auto;display:flex;gap:5px;flex-wrap:nowrap}
.ochip{width:clamp(38px,6.6vh,66px);height:clamp(52px,9vh,90px)}
.pv-pose{position:absolute;left:3%;top:4%;z-index:3;font-weight:600;font-size:clamp(10px,1.8vh,14px);letter-spacing:.12em;color:#fff;background:rgba(224,42,55,.85);padding:2px 8px;border-radius:2px}
.pv-pose:empty{display:none}
#chars .slot{height:clamp(30px,6.2vh,62px)}
#toast{top:calc(max(10px, env(safe-area-inset-top)) + 64px);bottom:auto}
@media (max-aspect-ratio:1/1){
  .pv-plate{left:40%;right:2%}
  .pv-plate b{font-size:clamp(18px,6.2vw,30px)}
  .pv-plate span,.pv-plate em{font-size:10px}
  .pv-cols{flex-direction:column;gap:4px;align-items:stretch;width:100%}
  .pv-stats{width:100%}
  .sbar{font-size:9px;gap:5px}
  .pv-sig{display:flex;font-size:9px;width:100%}
  .pv-fig{left:-6%;height:96%;bottom:0}
  .ochip{width:36px;height:48px}
  .ochip span{font-size:6.5px;height:11px;line-height:11px}
  .ochip img{bottom:11px;height:calc(100% - 11px)}
  #chars .slot{height:clamp(30px,5.2vh,46px)}
}
@media (max-width:560px){
  .nav-dpad{display:none}
  .nav-actions{flex:1;justify-content:space-between}
  .nav-act{flex:1;justify-content:center}
}
@media (min-aspect-ratio:1/1){
  .pv-fig{left:4%}
  .pv-plate{left:34%}
}
.pv-sig i,.sbar,.pv-plate{font-variant-numeric:tabular-nums}
.pv-sig i{font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-weight:700}
.pv-plate{background:linear-gradient(90deg,rgba(8,6,10,0),rgba(8,6,10,.55) 18%,rgba(8,6,10,.72));padding:6px 8px 6px 18px}
@media (max-aspect-ratio:1/1){
  .pv-fig{left:-21%;height:92%;bottom:1%}
  .pv-plate{left:45%;right:1%;top:2%;bottom:2%}
  .pv-pose{top:auto;bottom:3%;left:3%;font-size:9px}
}
@media (min-aspect-ratio:1/1){.pv-stats{flex:0 0 min(240px,40%);width:min(240px,40%)}}

/* ============================================================ music selection, as uploaded */
.ms .ms-wrap{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:minmax(220px,26%) minmax(0,1fr) minmax(0,34%);gap:2.2vw;
  padding:max(calc(var(--u) * 4), env(safe-area-inset-top)) max(3vw, env(safe-area-inset-right)) calc(max(calc(var(--u) * 3), env(safe-area-inset-bottom)) + 52px) max(1.8vw, env(safe-area-inset-left));box-sizing:border-box}
.ms .mm-bg::after{background:linear-gradient(90deg,rgba(6,5,8,.9) 0%,rgba(6,5,8,.72) 55%,rgba(6,5,8,.35) 100%) !important}
.ms-side{display:flex;flex-direction:column;min-height:0;min-width:0}
.ms-panel,.ms-art{min-width:0}
.ms .ms-side .mm-logo{height:auto;width:100%;max-height:20vh;object-position:left top}
.ms-side .mm-head{width:100%;min-width:0;margin-top:calc(var(--u) * 1)}
.ms-nav{display:flex;flex-direction:column;gap:calc(var(--u) * .9);margin-top:calc(var(--u) * 1.8);min-height:0}
.mm-item.ms-nv{align-items:center;gap:calc(var(--u) * 1.6);width:100%;box-sizing:border-box;font-size:max(14px,calc(var(--u) * 3));min-height:calc(var(--u) * 5.6);padding:calc(var(--u) * .6) calc(var(--u) * 2.2);
  background:linear-gradient(90deg,rgba(20,16,20,.86),rgba(20,16,20,.55));border:1px solid rgba(236,230,224,.16);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)}
.mm-item.ms-nv::before{display:none}
.mm-item.ms-nv .nv-ic{font-style:normal;width:1.3em;text-align:center;color:#e3a21a;font-size:.9em}
.mm-item.ms-nv.cur{background:linear-gradient(90deg,#b5121e,#7a0c14);color:#fff;border-color:#ff4a55}
.mm-item.ms-nv.is-sel{color:#fff;outline:2px solid #ff4a55;outline-offset:-2px}

.ms-panel{display:flex;flex-direction:column;min-height:0;background:rgba(10,8,12,.78);border:1px solid rgba(224,42,55,.55);box-shadow:0 0 24px rgba(224,42,55,.18) inset;padding:calc(var(--u) * 2.2) calc(var(--u) * 2.4)}
.ms-title{align-self:center;margin-bottom:calc(var(--u) * 1.8);padding:calc(var(--u) * .6) calc(var(--u) * 5);background:linear-gradient(90deg,transparent,#b5121e 18%,#b5121e 82%,transparent)}
.ms-title span{font-weight:700;font-size:max(18px,calc(var(--u) * 4.2));letter-spacing:.04em;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.ms-tabs{display:flex;gap:6px;margin-bottom:calc(var(--u) * 1.4)}
.mm-item.ms-tab{flex:1;justify-content:center;align-items:center;font-size:max(13px,calc(var(--u) * 2.6));min-height:calc(var(--u) * 5);padding:calc(var(--u) * .6) 8px;background:rgba(30,24,30,.9);border:1px solid rgba(236,230,224,.2)}
.mm-item.ms-tab::before{display:none}
.mm-item.ms-tab.cur{background:linear-gradient(180deg,#c8141f,#86101a);color:#fff;border-color:#ff4a55}
.mm-item.ms-tab.is-sel{outline:2px solid #ffc857;outline-offset:-2px;color:#fff}
.ms-list{display:flex;flex-direction:column;gap:4px;overflow-y:auto;min-height:0;flex:1 1 auto}
.mm-item.ms-row{width:100%;box-sizing:border-box;align-items:center;gap:calc(var(--u) * 1.6);font-size:max(14px,calc(var(--u) * 2.7));min-height:calc(var(--u) * 6.4);padding:calc(var(--u) * .8) calc(var(--u) * 1.6);background:rgba(24,20,24,.82);border:1px solid rgba(236,230,224,.12)}
.mm-item.ms-row::before{display:none}
.mm-item.ms-row .ms-n{font-size:.8em;color:rgba(236,230,224,.45);min-width:1.8em;text-align:center}
.mm-item.ms-row .ms-ic{width:0;height:0;border-left:.62em solid #e3a21a;border-top:.38em solid transparent;border-bottom:.38em solid transparent;flex:0 0 auto}
.mm-item.ms-row.shuf .ms-ic{border:0;width:.62em;height:.62em;background:#e3a21a;border-radius:50%}
.mm-item.ms-row .ms-t{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0}
.mm-item.ms-row .ms-t b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-item.ms-row .ms-t em{font-style:normal;font-weight:400;font-size:max(10px,.6em);letter-spacing:.08em;color:rgba(236,230,224,.5);text-transform:none}
.mm-item.ms-row .ms-d{font-size:.8em;color:rgba(236,230,224,.6)}
.mm-item.ms-row.is-sel{background:linear-gradient(90deg,rgba(181,18,30,.95),rgba(122,12,20,.85));color:#fff;border-color:#ff4a55}
.mm-item.ms-row.on .ms-t b{color:#ffc857}
.mm-item.ms-row.is-sel.on .ms-t b{color:#fff}
.mm-item.ms-row.on .ms-n{color:#ffc857}
.mm-item.ms-opt{margin-top:calc(var(--u) * 1.2);font-size:max(13px,calc(var(--u) * 2.4));padding-left:calc(var(--u) * 1.6);min-height:calc(var(--u) * 5);align-items:center}
.ms-note{margin:6px 0 0;font-size:max(10px,calc(var(--u) * 1.7));letter-spacing:.08em;color:rgba(236,230,224,.5);text-transform:uppercase}

.ms-art{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:0}
.ms-fig{position:absolute;left:50%;bottom:calc(var(--u) * 9 + 40px);transform:translateX(-50%);height:calc(100% - var(--u) * 9 - 40px);max-width:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 0 22px rgba(224,42,55,.35));pointer-events:none}
.ms-np{position:relative;display:flex;align-items:center;gap:12px;background:rgba(10,8,12,.88);border:1px solid rgba(224,42,55,.6);padding:10px 14px}
.ms-pp{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:2px solid #ff4a55;background:#b5121e;cursor:pointer;position:relative}
.ms-pp::before,.ms-pp::after{content:"";position:absolute;top:30%;height:40%;width:4px;background:#fff;left:36%}
.ms-pp::after{left:54%}
.ms-pp.paused::before{left:38%;width:0;height:0;top:28%;background:none;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.ms-pp.paused::after{display:none}
.ms-npt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.ms-npt b{font-weight:600;font-size:max(14px,calc(var(--u) * 2.8));color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-npt em{font-style:normal;font-size:max(10px,calc(var(--u) * 1.7));letter-spacing:.08em;color:rgba(236,230,224,.6)}
.ms-bar{height:4px;background:rgba(236,230,224,.18);margin-top:4px}
.ms-bar i{display:block;height:100%;width:0;background:#ff3340}
.ms-time{font-size:max(11px,calc(var(--u) * 2));color:rgba(236,230,224,.75);white-space:nowrap}
.ms .ms-foot{position:absolute;z-index:3;left:max(1.8vw, env(safe-area-inset-left));bottom:max(calc(var(--u) * 2), env(safe-area-inset-bottom));padding:0}
.mm-hint i.gy::before{content:"";position:absolute;left:34%;top:24%;border-left:9px solid #e3a21a;border-top:6px solid transparent;border-bottom:6px solid transparent}

@media (max-aspect-ratio:1/1){
  .ms .ms-wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding-left:max(3vw, env(safe-area-inset-left));padding-right:max(3vw, env(safe-area-inset-right))}
  .ms .ms-side .mm-logo{width:52vw;max-height:12vh}
  .ms-side .mm-head{display:none}
  .ms-nav{flex-direction:row;overflow-x:auto;gap:6px;margin-top:8px;padding-bottom:2px;scrollbar-width:none}
  .ms-nav::-webkit-scrollbar{display:none}
  .mm-item.ms-nv{width:auto;flex:0 0 auto;font-size:13px;min-height:36px;padding:6px 18px 6px 10px;white-space:nowrap}
  .ms-panel{padding:10px}
  .ms-art{display:block}
  .ms-fig{display:none}
}
@media (max-height:520px) and (min-aspect-ratio:1/1){
  .ms .ms-side .mm-logo{max-height:16vh}
  .mm-item.ms-nv{min-height:0;padding:3px 12px;font-size:13px}
  .ms-nav{gap:3px}
  .ms-note{display:none}
}

/* a short card in a fight when the shuffle moves to a new track */
#np-pop{position:absolute;z-index:40;left:50%;top:max(84px, calc(env(safe-area-inset-top) + 78px));transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 14px;
  background:rgba(10,8,12,.82);border:1px solid rgba(224,42,55,.6);font-family:"Oswald","Arial Narrow",Impact,sans-serif;color:#fff;pointer-events:none;white-space:nowrap;max-width:90vw}
#np-pop[hidden]{display:none}
#np-pop i{font-style:normal;color:#ff4a55}
#np-pop span{font-size:11px;letter-spacing:.14em;color:rgba(236,230,224,.6)}
#np-pop b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis}
#np-pop.go{animation:nppop 4.2s ease forwards}
@keyframes nppop{0%{opacity:0;transform:translate(-50%,-8px)}8%{opacity:1;transform:translate(-50%,0)}85%{opacity:1}100%{opacity:0}}
@media (max-aspect-ratio:1/1){.hits{top:calc(max(10px, env(safe-area-inset-top)) + 200px);z-index:6}}

/* ============================================================ battle mode sheet (seven cards, as the layout sheet) */
.bm{padding:0;display:block;font-family:"Oswald","Arial Narrow",Impact,sans-serif}
.bm-bg{position:absolute;inset:0;background:#0a0507 url(assets/ui/bg_battle.jpg) 50% 30%/cover no-repeat}
.bm-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 62%,rgba(8,4,6,.45),rgba(8,4,6,.15) 70%)}
.bm-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;
  padding:max(8px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  width:min(1180px,100%);margin:0 auto;gap:clamp(4px,1.2vh,12px)}
.bm-logo{height:clamp(54px,17vh,170px);width:auto;max-width:72vw;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.7));flex:0 0 auto}
.bm-title{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;margin-top:-1vh}
.bm-title b{font-family:var(--display);font-style:italic;font-weight:900;font-size:clamp(24px,6.6vh,64px);line-height:1;color:#f2ece6;letter-spacing:.01em;
  padding:.06em .8em;background:url(assets/ui/brush.webp) center/100% 100% no-repeat;transform:skewX(-8deg);text-shadow:0 3px 0 rgba(0,0,0,.7),0 0 18px rgba(0,0,0,.6)}
.bm-title small{margin-top:.35em;font-weight:600;letter-spacing:.24em;font-size:clamp(10px,1.8vh,16px);color:#e8e2dc;text-shadow:0 2px 0 #000}
.bm-row{display:flex;gap:clamp(6px,1.4vw,16px);width:100%;justify-content:center;flex:1 1 0;min-height:0}
.bm-row.bottom{width:88%}
.bm-card{position:relative;flex:1 1 0;min-width:0;padding:0;cursor:pointer;overflow:hidden;background:#0c0a0c;color:#fff;font-family:inherit;
  border:3px solid #6f6f72;border-radius:4px;box-shadow:inset 0 0 0 2px #1a1a1c,0 6px 16px rgba(0,0,0,.6);
  outline:1px solid rgba(255,255,255,.18);outline-offset:-6px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.bm-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.bm-card::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,4,6,.96) 0%,rgba(6,4,6,.72) 30%,rgba(6,4,6,0) 62%);z-index:1}
.bm-name{position:relative;z-index:2;font-family:var(--display);font-style:italic;font-weight:900;font-size:clamp(14px,3.5vh,34px);line-height:1;color:#f4f0ec;transform:skewX(-6deg);
  text-shadow:0 3px 0 rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.7);padding:0 .3em;white-space:nowrap}
.bm-name i{font-size:.62em;font-style:italic}
.bm-note{position:relative;z-index:2;margin:.45em 8% .7em;padding-top:.4em;border-top:1px solid rgba(236,230,224,.45);width:84%;font-weight:600;font-size:clamp(8px,1.45vh,13px);letter-spacing:.14em;text-transform:uppercase;color:#e8e2dc;line-height:1.3}
.bm-card.is-sel{border-color:#ff2a2a;box-shadow:0 0 0 2px rgba(255,40,40,.65),0 0 26px rgba(255,30,30,.75),inset 0 0 22px rgba(255,30,30,.35);transform:translateY(-2px);z-index:3}
.bm-card:active{transform:scale(.985)}
.bm-foot{flex:0 0 auto;width:100%;display:flex;align-items:center;gap:clamp(10px,3vw,34px);padding:2px 4px}
.bm-hint,.as-hint{display:flex;align-items:center;gap:8px;background:none;border:0;color:#e8e2dc;font-family:inherit;font-weight:600;font-size:clamp(12px,2vh,17px);letter-spacing:.08em;cursor:pointer;padding:4px 2px}
.hx{display:inline-flex;align-items:center;justify-content:center;width:1.6em;height:1.6em;border-radius:50%;border:2px solid currentColor;font-style:normal;font-weight:800;font-size:.95em;line-height:1}
.hx.dp{border-radius:3px;width:1.3em;height:1.3em;background:linear-gradient(currentColor,currentColor) center/34% 100% no-repeat,linear-gradient(currentColor,currentColor) center/100% 34% no-repeat;border:0;opacity:.85}
.hx.cx{color:#3d8bff}.hx.co{color:#ff3b3b}
.bm-hint .hx.cx,.bm-hint .hx.co{font-size:.9em}
.bm-tag{margin-left:auto;font-family:var(--display);font-style:italic;color:rgba(220,214,208,.55);font-size:clamp(11px,2vh,18px);transform:skewX(-8deg);white-space:nowrap}
.bm-keys{flex:0 0 auto;font-size:clamp(9px,1.4vh,12px);letter-spacing:.06em;color:rgba(232,226,220,.6);text-align:center}
body.touch .bm-keys{display:none}
@media (max-aspect-ratio:1/1){
  .bm-logo{height:clamp(48px,11vh,120px)}
  .bm-row,.bm-row.bottom{display:contents}
  .bm-inner{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:auto;align-content:start;justify-items:stretch}
  .bm-logo,.bm-title,.bm-foot,.bm-keys{grid-column:1/-1;justify-self:center}
  .bm-card{aspect-ratio:16/10.5;flex:none}
  .bm-card[data-action="survival"]{grid-column:1/-1;aspect-ratio:auto;height:clamp(90px,16vh,150px)}
  .bm-name{font-size:clamp(13px,4.4vw,24px);white-space:normal}
  .bm-title b{font-size:clamp(22px,9vw,48px);white-space:nowrap}
  .bm-note{font-size:clamp(8px,2.3vw,11px);margin-bottom:.55em}
  .bm-tag{display:none}
  .bm-foot{justify-content:center}
}

/* ============================================================ arena select sheet (3 x 3, as the layout sheet) */
.as{padding:0;display:block;font-family:"Oswald","Arial Narrow",Impact,sans-serif}
.as-bg{position:absolute;inset:0;background:#06070c url(assets/ui/bg_arenasel.jpg) 50% 50%/cover no-repeat}
.as-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(4,5,9,.5),rgba(4,5,9,.1) 75%)}
.as-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;width:min(1200px,100%);margin:0 auto;
  padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));gap:clamp(4px,1vh,10px)}
.as-top{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,40px);flex:0 0 auto;width:100%}
.as-logo{height:clamp(50px,16vh,170px);width:auto;max-width:46vw;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.7))}
.as-title{display:flex;flex-direction:column;align-items:flex-start}
.as-title b{font-family:var(--display);font-style:italic;font-weight:900;font-size:clamp(24px,7vh,70px);line-height:1;color:#ece8e4;transform:skewX(-8deg) rotate(-3deg);text-shadow:0 4px 0 rgba(0,0,0,.75)}
.as-title small{margin:.5em 0 0 .6em;letter-spacing:.42em;font-weight:600;font-size:clamp(10px,2vh,18px);color:#ddd6d0;text-shadow:0 2px 0 #000}
.as-mid{flex:1 1 0;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,24px)}
.as-side{font-family:var(--display);font-style:italic;font-size:clamp(12px,2.6vh,24px);line-height:1.05;color:rgba(214,206,198,.62);transform:skewX(-8deg) rotate(-4deg);text-shadow:0 2px 0 #000;flex:0 0 auto;width:clamp(70px,11vw,150px)}
.as-side.r{text-align:right;transform:skewX(-8deg) rotate(4deg)}
.as-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,1.4vw,16px);height:100%;max-height:100%;aspect-ratio:16/10.4;max-width:100%;min-width:0}
.as-grid .arena{position:relative;padding:0;overflow:hidden;cursor:pointer;border:3px solid #cfcfcf;border-radius:2px;background:#141416 repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 6px,rgba(0,0,0,.05) 6px 12px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 6px 16px rgba(0,0,0,.6);min-height:0;clip-path:none;aspect-ratio:auto;height:auto;transition:transform .1s ease,box-shadow .1s ease,border-color .1s ease}
.as-grid .arena img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(.92)}
.as-grid .arena::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,6,10,.85),rgba(6,6,10,0) 45%);z-index:1}
.as-grid .anum{position:absolute;left:.35em;top:.12em;z-index:2;font-family:var(--display);font-style:italic;font-size:clamp(14px,3.6vh,34px);color:#f0ece8;text-shadow:0 2px 0 #000,0 0 8px rgba(0,0,0,.7)}
.as-grid .tag{position:absolute;left:0;right:0;bottom:.35em;z-index:2;text-align:center;font-family:var(--display);font-style:italic;font-size:clamp(9px,2.1vh,20px);letter-spacing:.02em;color:#f0ece8;text-shadow:0 2px 0 #000;background:none;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-grid .plus{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(26px,7vh,70px);color:rgba(220,220,220,.6);font-weight:900;z-index:2}
.as-grid .arena.is-sel{border-color:#ff2323;box-shadow:0 0 0 2px rgba(255,35,35,.6),0 0 26px rgba(255,30,30,.8);transform:translateY(-2px);z-index:3}
.as-info{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;font-size:clamp(11px,1.9vh,15px);letter-spacing:.12em;color:#e8e2dc}
.as-info b{font-weight:600;color:#ffc857}
.as-info span[id=arena-text]{max-width:640px;letter-spacing:.04em;color:#ddd6d0;background:rgba(8,8,12,.7);padding:4px 12px;border:1px solid rgba(255,200,87,.35)}
.as-foot{flex:0 0 auto;display:flex;gap:clamp(10px,3vw,40px);justify-content:center;flex-wrap:wrap}
.hx.ga{color:#3ec05a}.hx.gb{color:#ff3434}.hx.gxx{color:#3d8bff}.hx.gy{color:#c9c3bd}
@media (max-aspect-ratio:1/1){
  .as-top{flex-direction:column;gap:2px}
  .as-logo{height:clamp(44px,10vh,110px)}
  .as-title{align-items:center}
  .as-title b{font-size:clamp(24px,8vw,44px)}
  .as-side{display:none}
  .as-mid{align-items:flex-start}
  .as-grid{width:100%;height:auto;aspect-ratio:auto;grid-auto-rows:auto}
  .as-grid .arena{aspect-ratio:3/3.6}
  .as-grid .tag{white-space:normal;font-size:clamp(10px,3.4vw,15px);line-height:1.05;bottom:.45em}
  .as-grid{gap:8px}
  .as-mid{flex:0 0 auto}
  .as-info{margin-top:4px}
  .as-foot{gap:10px 16px}
  .as-hint{font-size:13px}
}
body.touch #topbtns [data-btn="taunt"]{display:none}
/* START and BLOCK ride the two ends of the level plate's row, under the bars, so they cover neither the HUD nor the arena */
#topbtns{position:fixed;left:0;right:0;top:var(--lvl-top,140px);margin:0;transform:none;padding:0 max(8px,env(safe-area-inset-left));justify-content:space-between;z-index:9;gap:8px}
#topbtns .tbtn{width:auto;font-size:clamp(11px,1.6vw,15px);padding:4px 12px;border-radius:7px;opacity:.9}
#stage-n{max-width:calc(100vw - 190px)}
#stage-n span{overflow:hidden;text-overflow:ellipsis}
@media (min-aspect-ratio:1/1){ .clock{padding-top:0;width:auto;min-width:90px} }
@media (max-aspect-ratio:1/1){ #stage-n{font-size:10px;padding:4px 8px;max-width:calc(100vw - 170px)} #topbtns .tbtn{font-size:12px;padding:4px 10px} }
#topbtns [data-btn="block"]{margin-left:auto}

.fbtn.guard.hold{filter:brightness(1.15);box-shadow:0 0 0 3px #ffd23e,0 0 14px rgba(255,210,62,.7)}

/* ---- one selection, drawn like the logo: a red brush stroke with a chrome edge */
#app,#app *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#app input{-webkit-user-select:text;user-select:text}
::selection{background:transparent}
button,[role="button"]{-webkit-tap-highlight-color:transparent}
.mm-item:focus,.mm-item:focus-visible,.bm-card:focus,.bm-card:focus-visible{outline:none}
.mm-item::before{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 42%),url(assets/ui/brush.webp) left center/100% 100% no-repeat;filter:saturate(1.35) brightness(1.25)}
.mm-item::after{content:"";position:absolute;z-index:-1;left:calc(var(--u) * 2.4);top:12%;bottom:12%;width:3px;border-radius:2px;
  background:linear-gradient(180deg,#ffffff,#9a9aa2 45%,#f2f2f4 60%,#7d7d86);box-shadow:0 0 6px rgba(255,255,255,.35);opacity:0;transition:opacity .12s ease}
.mm-item.is-sel::before{opacity:1}
.mm-item.is-sel::after{opacity:1}
.mm-item.is-sel{color:#fff;text-shadow:0 2px 0 #4a0408,0 0 12px rgba(255,60,70,.35)}
.mm-item.card::after,.mm-item.ms-nv::after,.mm-item.ms-tab::after,.mm-item.ms-row::after{display:none}

/* ---- the main menu sits over a live fight */
#title.live .mm-bg{background:none}
#title.live .mm-bg::after{background:linear-gradient(90deg,rgba(6,5,8,.9) 0%,rgba(6,5,8,.78) 30%,rgba(6,5,8,.25) 44%,rgba(6,5,8,0) 52%)}
.demo-card{position:absolute;z-index:3;top:max(50px,calc(env(safe-area-inset-top) + 40px));right:max(14px,env(safe-area-inset-right));width:min(400px,40vw);
  display:flex;flex-direction:column;gap:7px;padding:10px 14px 12px;background:linear-gradient(180deg,rgba(14,10,14,.86),rgba(14,10,14,.72));
  border:1px solid rgba(236,230,224,.18);border-top:3px solid #d0202c;box-shadow:0 8px 24px rgba(0,0,0,.45);font-family:var(--ui);color:#ece6e0}
.dc-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:800;letter-spacing:.18em}
.dc-live{display:flex;align-items:center;gap:6px;color:#ff5a64}
.dc-live i{width:8px;height:8px;border-radius:50%;background:#ff3340;box-shadow:0 0 8px #ff3340;animation:dcblink 1.2s infinite}
@keyframes dcblink{50%{opacity:.25}}
.dc-arena{color:#ffc857}
.dc-vs{display:flex;align-items:center;gap:10px}
.dc-vs em{font-style:normal;font-family:inherit;font-weight:900;font-size:13px;color:#ff5a64;letter-spacing:.06em}
.dc-side{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.dc-side.r{align-items:flex-end;text-align:right}
.dc-side b{font-family:'Oswald',var(--ui);font-weight:600;font-size:19px;letter-spacing:.02em;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.dc-bar{display:block;width:100%;height:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25)}
.dc-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ffc857,#ff7a2f);transition:width .2s ease}
.dc-side.r .dc-bar{transform:scaleX(-1)}
.dc-guard{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.06em;color:rgba(236,230,224,.85)}
.dc-gk{font-weight:900;font-size:11px;letter-spacing:.12em;color:#1a1206;background:linear-gradient(180deg,#ffd76a,#e3a21a);padding:3px 8px;border-radius:12px;flex:0 0 auto}
.demo-card kbd,.controls-panel kbd{display:inline-block;min-width:1.5em;padding:1px 5px;margin:0 2px;border:1px solid rgba(236,230,224,.45);border-bottom-width:2px;border-radius:3px;font-family:inherit;font-size:.92em;font-weight:700;text-align:center;color:#fff;background:rgba(255,255,255,.06)}
.dc-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dc-np{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;font-weight:700;letter-spacing:.1em;color:#ffc857;white-space:nowrap;overflow:hidden}
.dc-np i{font-style:normal;color:#ff5a64}
.dc-np span{overflow:hidden;text-overflow:ellipsis}
.dc-go{flex:0 0 auto;display:flex;align-items:center;gap:8px;border:0;cursor:pointer;font-family:'Oswald',var(--ui);font-weight:600;font-size:16px;letter-spacing:.04em;color:#fff;
  padding:7px 14px 7px 16px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 50%),url(assets/ui/brush.webp) center/100% 100% no-repeat;filter:saturate(1.3)}
.dc-go small{font-family:var(--ui);font-size:10px;font-weight:800;border:1px solid rgba(255,255,255,.6);border-radius:3px;padding:0 4px}
.dc-go:hover{filter:saturate(1.5) brightness(1.15)}
body.touch .k-keys{display:none}
body:not(.touch) .k-touch{display:none}
@media (min-aspect-ratio:1/1) and (max-height:480px){
  .demo-card{gap:4px;padding:6px 10px 8px;width:min(330px,42vw)}
  .dc-side b{font-size:15px}
  .dc-guard{font-size:10px}
  .dc-go{font-size:13px;padding:4px 10px}
}
@media (max-aspect-ratio:1/1){
  .main .mm-logo{max-height:21vh}
  .main .mm-head{margin-top:calc(var(--u) * 1.2);height:calc(var(--u) * 5.4)}
  .main .mm-body{margin-top:calc(var(--u) * 1)}
  .main .mm-item{font-size:max(17px,calc(var(--u) * 3.6));min-height:calc(var(--u) * 5);padding-top:calc(var(--u) * .5);padding-bottom:calc(var(--u) * .5)}
  #title.live .mm-bg::after{background:linear-gradient(180deg,rgba(6,5,8,.86) 0%,rgba(6,5,8,.8) 40%,rgba(6,5,8,.15) 52%,rgba(6,5,8,0) 60%,rgba(6,5,8,0) 84%,rgba(6,5,8,.7) 100%)}
  #title.live .mm-foot{display:none}
  #title .mm-inner{height:auto}
  #title.live .main-grid,#title.live #main-menu{display:grid;grid-template-columns:auto auto;column-gap:4vw;align-items:start}
  #title.live .mm-logo{max-height:17vh}
  #title.live .main .mm-item,#title.live .mm-item{font-size:max(16px,calc(var(--u) * 3.2));padding-left:calc(var(--u) * 4.4);padding-right:calc(var(--u) * 2)}
  .demo-card{position:absolute;top:auto;right:max(3vw,env(safe-area-inset-right));left:max(3vw,env(safe-area-inset-left));bottom:max(8px,env(safe-area-inset-bottom));width:auto;gap:5px;padding:7px 10px 8px}
  .dc-side b{font-size:16px}
  .dc-guard{font-size:11px}
  .dc-go{font-size:14px;padding:5px 12px}
}

/* ---- options: bigger values, and the control map always on screen */
#options .mm-item .val{font-size:max(15px,calc(var(--u) * 3.2));min-width:7em;color:#ffd06a;text-shadow:0 2px 0 rgba(0,0,0,.5)}
#options .mm-item .step{font-size:max(13px,calc(var(--u) * 2.6))}
.controls-panel{display:none;max-width:min(620px,52vw);gap:10px;padding:14px 18px 16px;background:rgba(12,9,12,.84);border:1px solid rgba(236,230,224,.18);border-top:3px solid #d0202c;line-height:1.3}
.controls-panel.open{display:flex}
.cp-title{font-family:'Oswald',var(--ui);font-weight:600;font-size:max(16px,calc(var(--u) * 3));letter-spacing:.04em;color:#fff}
.cp-grid{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:6px 14px;align-items:center;font-size:max(11px,calc(var(--u) * 1.85))}
.cp-h{font-size:.85em;font-weight:800;letter-spacing:.16em;color:rgba(236,230,224,.5)}
.cp-a{font-weight:800;letter-spacing:.1em;color:#ffc857}
.cp-grid .gd{color:#fff}
.cp-grid .cp-a.gd{color:#1a1206;background:linear-gradient(180deg,#ffd76a,#e3a21a);padding:2px 8px;border-radius:3px;justify-self:start}
.cp-guard{font-style:normal;font-weight:900;font-size:.9em;color:#1a1206;background:linear-gradient(180deg,#ffd76a,#e3a21a);padding:3px 9px;border-radius:12px}
.cp-note{margin:0;font-size:max(10px,calc(var(--u) * 1.6));letter-spacing:.04em;text-transform:none;color:rgba(236,230,224,.65)}
@media (min-aspect-ratio:1/1){
  #options .controls-panel{display:flex}
  #options .mm-bg::after{background:linear-gradient(90deg,rgba(6,5,8,.82) 0%,rgba(6,5,8,.5) 45%,rgba(6,5,8,.35) 100%)}
}
@media (max-aspect-ratio:1/1){
  .controls-panel{max-width:none}
  .cp-grid{gap:4px 8px;font-size:11px}
}