/* Kiboko UI. One dark look: rooftop signage meets a film title card.
   Sections: tokens · page · buttons · header · title · HUD · fight overlays · controls · cards · move panel · small screens · motion. */
:root{
  color-scheme:dark;
  --ink:#070d13;--ink-2:#0f1a22;--bone:#efe6d2;--bone-dim:rgba(239,230,210,.64);--bone-faint:rgba(239,230,210,.24);
  --signal:#e2be7c;--signal-hot:#f4d79d;--steel:#8fa3ad;--alarm:#ff5d4d;--guard:#74d3e6;
  --line:rgba(239,230,210,.2);--plate:rgba(7,13,19,.6);--plate-solid:rgba(7,13,19,.93);
  --f-display:'Big Shoulders Display','Impact','Haettenschweiler','Arial Narrow',sans-serif;
  --f-label:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --gl:max(16px,env(safe-area-inset-left,0px));--gr:max(16px,env(safe-area-inset-right,0px));
  --pad-l:max(var(--gl),5vw);--pad-r:max(var(--gr),5vw);
  --bar:clamp(12px,5vh,46px);
  --shadow:0 0 2px rgba(0,0,0,.75),0 1px 6px rgba(0,0,0,.55);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--ink);color:var(--bone);overflow:hidden;font-family:var(--f-label);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:0}
h1,h2,h3,p{margin:0}
#game{position:fixed;inset:0;overflow:hidden;background:var(--ink)}
#world,#world canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.atmosphere{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,9,14,.78) 0,rgba(5,9,14,0) 26%),linear-gradient(0deg,rgba(5,9,14,.62) 0,rgba(5,9,14,0) 18%)}
#game.title-mode .atmosphere{background:linear-gradient(90deg,rgba(5,9,14,.9) 0,rgba(5,9,14,.56) 36%,rgba(5,9,14,0) 68%),linear-gradient(0deg,rgba(5,9,14,.8) 0,rgba(5,9,14,0) 44%)}
#impact-flash{position:absolute;inset:0;background:#fff3dc;opacity:0;pointer-events:none;mix-blend-mode:screen}
/* letterbox bars: on for the title, off in the fight */
.bars i{position:absolute;left:0;right:0;top:0;height:calc(var(--bar) + var(--sat));background:#000;transform:translateY(-101%);transition:transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.bars i+i{top:auto;bottom:0;height:calc(var(--bar) + var(--sab));transform:translateY(101%)}
#game.title-mode .bars i{transform:none}

/* ---- buttons ---- */
.btn{font:600 15px/1 var(--f-label);letter-spacing:.22em;text-transform:uppercase;color:var(--bone);background:rgba(7,13,19,.55);border:1px solid rgba(239,230,210,.42);min-height:46px;padding:2px 22px 0;text-align:center;transition:background .12s,border-color .12s,color .12s}
.btn:hover{border-color:var(--bone);background:rgba(239,230,210,.12)}
.btn:active{background:rgba(239,230,210,.22)}
.btn.primary{background:var(--signal);border-color:var(--signal);color:var(--ink);font-size:18px;letter-spacing:.3em;min-height:52px;padding:2px 40px 0 44px}
.btn.primary:hover{background:var(--signal-hot);border-color:var(--signal-hot)}
.btn.primary:disabled{background:transparent;color:var(--steel);border-color:var(--line);cursor:default}
.btn.small{min-height:34px;font-size:12px;padding:1px 14px 0}
button:focus-visible,a:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.btn.primary:focus-visible{outline-color:var(--bone)}
kbd{display:inline-block;font:500 10px/1 var(--f-mono);color:var(--bone);border:1px solid rgba(239,230,210,.45);background:rgba(7,13,19,.45);padding:3px 4px 2px;margin:0 1px;min-width:18px;text-align:center;text-transform:uppercase}
.tag{font:900 15px/1 var(--f-display);letter-spacing:.04em;color:var(--ink);background:var(--signal);padding:4px 7px 3px}
.dim{color:var(--bone-dim)}
.eyebrow{font:600 12px/1 var(--f-label);letter-spacing:.28em;text-transform:uppercase;color:var(--steel)}

/* ---- header ---- */
header{position:absolute;z-index:6;top:calc(var(--sat) + 12px);left:var(--pad-l);right:var(--pad-r);display:flex;align-items:center;justify-content:space-between;pointer-events:none}
#game.title-mode header{top:calc(var(--bar) + var(--sat) + 14px)}
header>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;color:var(--bone);text-decoration:none;font:600 12px/1 var(--f-label);letter-spacing:.26em;text-shadow:var(--shadow)}
#game.title-mode .brand{visibility:hidden}
.header-actions{display:flex;gap:8px}
#sound[aria-pressed="false"]{color:var(--steel)}

/* ---- title ---- */
#title-panel{position:absolute;inset:0;z-index:4;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  padding:calc(var(--bar) + var(--sat) + 20px) var(--pad-r) calc(var(--bar) + var(--sab) + clamp(16px,4.5vh,48px)) var(--pad-l)}
.t-main{min-width:0;flex:1 1 auto}
.t-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font:600 13px/1.2 var(--f-label);letter-spacing:.24em;text-transform:uppercase}
h1{font:900 clamp(52px,15.5vw,208px)/.8 var(--f-display);letter-spacing:.15em;margin:clamp(10px,2vh,22px) -.15em clamp(12px,2.2vh,24px) -.035em;color:var(--bone);white-space:nowrap;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.t-premise{position:relative;padding-top:16px;border-top:1px solid var(--line);font:500 clamp(17px,1.55vw,22px)/1.3 var(--f-label);letter-spacing:.03em;color:rgba(239,230,210,.9);max-width:30em}
.t-premise::before{content:'';position:absolute;left:0;top:-2px;width:72px;height:3px;background:var(--signal)}
.select-fighter{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(14px,2.6vh,24px)}
.select-fighter button{display:flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;background:rgba(7,13,19,.55);border:1px solid rgba(239,230,210,.28);text-align:left;transition:border-color .12s,background .12s}
.select-fighter button:hover{border-color:var(--bone)}
.select-fighter button.selected{border-color:var(--signal);background:rgba(226,190,124,.14);box-shadow:inset 0 -3px 0 var(--signal)}
.choice-portrait{width:46px;height:46px;overflow:hidden;background:var(--ink-2);flex:none}
.choice-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;filter:grayscale(1) contrast(1.2) brightness(.85);transition:filter .15s}
.select-fighter button.selected img,.select-fighter button:hover img{filter:none}
.choice-name{font:700 17px/1 var(--f-label);letter-spacing:.14em;color:var(--bone)}
.select-fighter button.selected .choice-name{color:var(--signal-hot)}
.t-actions{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin-top:clamp(14px,2.6vh,24px)}
.seg{display:flex}
.seg button{min-height:46px;padding:1px 16px 0;font:600 13px/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);background:rgba(7,13,19,.55);border:1px solid rgba(239,230,210,.35);margin-left:-1px}
.seg button:first-child{margin-left:0}
.seg button:hover{color:var(--bone)}
.seg button.selected{background:var(--bone);border-color:var(--bone);color:var(--ink);position:relative}
.t-note{margin-top:12px;font:400 11px/1.5 var(--f-mono);letter-spacing:.04em;color:var(--steel);max-width:52ch}
.t-note:empty{display:none}
.t-legend{display:none;flex:none;text-align:right;text-shadow:var(--shadow);padding-bottom:2px}
.t-legend>div{display:flex;justify-content:flex-end;align-items:center;gap:18px;margin-top:9px;font:500 12px/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:rgba(239,230,210,.78);white-space:nowrap}
.t-legend kbd{margin-right:3px}
.t-legend .lg-touch{margin-top:13px;padding-top:11px;border-top:1px solid var(--line);color:var(--bone-dim)}
.t-legend em{font-style:normal;color:var(--signal);letter-spacing:.26em}
@media(min-width:1180px) and (min-height:600px){.t-legend{display:block}}
/* who you face, top right */
#title-caption{position:absolute;z-index:4;right:var(--pad-r);top:calc(var(--bar) + var(--sat) + 62px);display:flex;align-items:center;gap:8px;padding:7px 10px 6px;border-left:3px solid var(--signal);background:var(--plate);font:500 11px/1 var(--f-mono);letter-spacing:.1em;color:var(--signal-hot)}
#title-caption b{font-weight:400;color:var(--steel)}
#title-caption small{font-size:11px;color:var(--bone-dim)}
#title-caption small:not(:empty)::before{content:'• ';color:var(--steel)}

/* ---- HUD ---- */
#hud{position:absolute;z-index:3;top:calc(var(--sat) + 58px);left:var(--pad-l);right:var(--pad-r);display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(12px,2.4vw,34px);align-items:start;pointer-events:none;text-shadow:var(--shadow)}
.fighter-name{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fighter-name span{font:900 clamp(22px,3vw,40px)/.9 var(--f-display);letter-spacing:.1em;color:var(--bone);white-space:nowrap}
.fighter-name small{font:500 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--steel)}
.fighter-hud.right .fighter-name{flex-direction:row-reverse}
.health-track{position:relative;height:14px;margin-top:8px;background:rgba(7,13,19,.7);border:1px solid rgba(239,230,210,.38);overflow:hidden}
.health,.health-lag{position:absolute;top:0;bottom:0;left:0;width:100%}
.health{background:var(--signal);transition:width .08s linear}
.health-lag{background:var(--bone);transition:width .5s .28s cubic-bezier(.3,.7,.2,1)}
.fighter-hud.right .health,.fighter-hud.right .health-lag{left:auto;right:0}
.fighter-hud.right .health{background:var(--alarm)}
.stats-line{display:flex;align-items:center;gap:8px;margin-top:8px;font:500 10px/1 var(--f-mono);letter-spacing:.12em;color:var(--steel)}
.fighter-hud.right .stats-line{flex-direction:row-reverse}
.round-pips{display:flex;gap:4px;margin-right:6px}
.fighter-hud.right .round-pips{margin:0 0 0 6px}
.round-pips i{width:9px;height:9px;border:1px solid var(--bone-dim)}
.round-pips i.won{background:var(--signal);border-color:var(--signal)}
.guard-track,.energy-track{position:relative;height:3px;width:clamp(40px,7vw,96px);background:rgba(239,230,210,.2)}
.guard-track i,.energy-track i{position:absolute;inset:0 auto 0 0;background:var(--guard)}
.energy-track{width:clamp(50px,9vw,130px);margin:0}
.energy-track i{background:var(--signal)}
.fighter-hud.right .guard-track i,.fighter-hud.right .energy-track i{inset:0 0 0 auto}
.energy-label{margin-left:10px;white-space:nowrap}
.fighter-hud.right .energy-label{margin:0 10px 0 0}
.energy-label.charged{color:var(--signal-hot);animation:pulse .6s ease-in-out infinite alternate}
@keyframes pulse{from{opacity:.55}to{opacity:1}}
.round-clock{text-align:center;min-width:74px}
.round-clock b{display:block;font:900 clamp(40px,5.4vw,70px)/.8 var(--f-display);letter-spacing:.04em;color:var(--bone)}
.round-clock span{display:block;margin-top:8px;font:500 10px/1 var(--f-mono);letter-spacing:.16em;color:var(--steel)}
.round-clock.danger b{color:var(--alarm)}

/* ---- fight overlays ---- */
#callout{position:absolute;z-index:5;left:0;right:0;top:36%;text-align:center;opacity:0;pointer-events:none}
#callout b{display:block;font:900 clamp(64px,15vw,210px)/.8 var(--f-display);letter-spacing:.14em;margin-right:-.14em;color:var(--bone);text-shadow:0 4px 40px rgba(0,0,0,.6)}
#callout small{display:block;margin-bottom:14px;font:600 14px/1 var(--f-label);letter-spacing:.34em;color:var(--signal-hot);text-shadow:var(--shadow)}
#combat-toast{position:absolute;z-index:5;left:50%;top:27%;transform:translateX(-50%);opacity:0;pointer-events:none;max-width:calc(100% - var(--gl) - var(--gr));padding:9px 14px 8px;border-left:3px solid var(--signal);background:var(--plate);font:600 14px/1.25 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--bone);white-space:nowrap}
.chain{position:absolute;z-index:4;left:var(--pad-l);top:43%;opacity:0;pointer-events:none;text-shadow:var(--shadow)}
.chain.right{left:auto;right:var(--pad-r);text-align:right}
.chain b{display:block;font:900 clamp(54px,8vw,110px)/.8 var(--f-display);color:var(--signal-hot)}
.chain span{display:block;margin-top:6px;font:500 11px/1 var(--f-mono);letter-spacing:.2em;color:var(--bone-dim)}
#entrance-card{position:absolute;z-index:4;left:var(--pad-l);bottom:calc(26vh + var(--sab));padding-left:16px;text-shadow:var(--shadow)}
#entrance-card i{position:absolute;left:0;top:2px;bottom:2px;width:3px;background:var(--signal)}
#entrance-card b{display:block;font:900 clamp(34px,6vw,84px)/.9 var(--f-display);letter-spacing:.14em;animation:wipe 1s steps(24,end) both}
#entrance-card span{display:block;margin-top:8px;font:400 12px/1.3 var(--f-mono);letter-spacing:.14em;color:var(--bone-dim)}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
#skip-intro{position:absolute;z-index:6;right:var(--pad-r);bottom:calc(var(--sab) + 60px)}

/* ---- controls ---- */
#keyboard-hints{position:absolute;z-index:3;left:var(--pad-l);right:var(--pad-r);bottom:calc(var(--sab) + 14px);display:flex;align-items:flex-end;gap:18px;font:500 12px/1 var(--f-label);letter-spacing:.16em;color:rgba(239,230,210,.78);text-shadow:var(--shadow)}
#keyboard-hints>div{flex:1 1 0;min-width:0}
#keyboard-hints>div:empty,#keyboard-hints>div:has(>span:empty){display:none}
#keyboard-hints>div>span{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
#keyboard-hints span span{white-space:nowrap}
#keyboard-hints kbd{margin-right:3px}
#keyboard-hints b{color:var(--signal);letter-spacing:.2em}
#keyboard-hints .btn{flex:none;margin-left:auto}
@media(pointer:coarse){#keyboard-hints>div{display:none}#keyboard-hints{justify-content:center;bottom:calc(var(--sab) + 8px)}#keyboard-hints .btn{margin:0}}
#touch-controls{position:absolute;z-index:5;left:var(--gl);right:var(--gr);bottom:calc(var(--sab) + 18px);display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}
@media(pointer:fine){#touch-controls{display:none}}
.dpad,.attack-pad{display:grid;gap:8px;pointer-events:auto}
.dpad{grid-template-columns:repeat(3,58px);grid-template-rows:58px 58px}
.dpad button:nth-child(1){grid-area:2/1}.dpad button:nth-child(2){grid-area:1/2}.dpad button:nth-child(3){grid-area:2/3}.dpad button:nth-child(4){grid-area:2/2}
.attack-pad{grid-template-columns:76px 76px;grid-template-rows:62px 62px}
#touch-controls button{background:rgba(7,13,19,.5);border:1px solid rgba(239,230,210,.5);font:600 13px/1 var(--f-label);letter-spacing:.14em;color:var(--bone);touch-action:none}
.dpad button{font-size:20px}
#touch-controls button.held,#touch-controls button:active{background:rgba(239,230,210,.28);border-color:var(--bone)}
#touch-controls .special{color:var(--steel);border-color:var(--line)}
#touch-controls .special.ready{color:var(--ink);background:var(--signal);border-color:var(--signal)}
#rotate-tip{position:absolute;z-index:7;left:50%;top:calc(var(--sat) + 60px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 8px 8px 14px;border-left:3px solid var(--signal);background:var(--plate-solid);font:500 13px/1.2 var(--f-label);letter-spacing:.12em;white-space:nowrap}
#rotate-tip button{background:none;border:0;font-size:18px;padding:2px 8px}

/* ---- cards: round result / paused ---- */
.overlay{position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:rgba(5,9,14,.62);padding:12px var(--gr) 12px var(--gl)}
.card{width:min(430px,100%);max-height:calc(100vh - 24px - var(--sat) - var(--sab));overflow:auto;padding:26px 26px 24px;background:var(--plate-solid);border:1px solid var(--line);border-top:3px solid var(--signal)}
.card h2{font:900 clamp(40px,11vw,62px)/.86 var(--f-display);letter-spacing:.08em;text-transform:uppercase;margin:10px 0 12px}
.card-line{font:400 12px/1.5 var(--f-mono);letter-spacing:.04em;color:var(--steel)}
.card-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.card-actions .btn{text-align:left;padding-left:18px}
.binojo-cta{display:block;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);text-decoration:none;font:500 14px/1.35 var(--f-label);letter-spacing:.03em;color:var(--bone-dim)}
.binojo-cta b{display:block;margin-top:6px;font:600 13px/1 var(--f-label);letter-spacing:.22em;color:var(--signal)}
.binojo-cta:hover b{color:var(--signal-hot)}

/* ---- move panel ---- */
dialog#moves{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100vw);height:100%;max-height:none;max-width:none;padding:calc(10px + var(--sat)) 0 var(--sab);display:none;flex-direction:column;background:rgba(7,13,19,.96);color:var(--bone);border:0;border-left:1px solid var(--line)}
dialog#moves[open]{display:flex}
dialog#moves::backdrop{background:rgba(5,9,14,.55)}
.panel-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:12px 20px 14px 22px;border-bottom:1px solid var(--line)}
.panel-h h2{font:900 40px/.9 var(--f-display);letter-spacing:.1em;margin-top:8px}
.panel-b{flex:1 1 auto;overflow-y:auto;padding:6px 20px 24px 22px;-webkit-overflow-scrolling:touch}
#move-list h3{font:600 11px/1 var(--f-label);letter-spacing:.26em;color:var(--steel);margin:20px 0 0;padding-bottom:8px;border-bottom:1px solid var(--line)}
.move{display:grid;grid-template-columns:118px 1fr auto;gap:10px;align-items:center;padding:10px 0 9px;border-bottom:1px solid var(--line)}
.move .keys{display:flex;align-items:center;gap:1px}
.move .keys i{font-style:normal;color:var(--steel);margin:0 3px;font-size:12px}
.move b{font:600 15px/1.1 var(--f-label);letter-spacing:.08em;text-transform:uppercase;color:var(--bone)}
.move em{font:400 10px/1.3 var(--f-mono);font-style:normal;letter-spacing:.06em;color:var(--steel);text-align:right;max-width:13em}
.panel-note{font:400 11px/1.6 var(--f-mono);letter-spacing:.02em;color:var(--steel);margin:14px 0 18px}

/* ---- publisher card ---- */
#publisher-intro{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:var(--ink)}
.publisher-lockup{display:flex;flex-direction:column;align-items:center;gap:12px;animation:rise .7s ease both}
.publisher-lockup p{font:500 12px/1 var(--f-mono);letter-spacing:.3em;color:var(--steel)}
.publisher-lockup strong{font:900 clamp(40px,9vw,96px)/1 var(--f-display);letter-spacing:.16em;margin-right:-.16em;color:var(--bone);text-transform:uppercase}
.publisher-lockup strong span{color:var(--signal)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body.no-webgl #start{letter-spacing:.14em}

/* ---- narrow screens ---- */
@media(max-width:760px){
  :root{--pad-l:var(--gl);--pad-r:var(--gr)}
  h1{font-size:clamp(52px,20vw,150px)}
  .t-eyebrow{font-size:11px;letter-spacing:.2em}
  .select-fighter{display:grid;grid-template-columns:1fr 1fr}
  .select-fighter button{padding-right:8px}
  .choice-name{font-size:15px;letter-spacing:.1em}
  .t-actions .btn.primary{flex:1 1 100%}
  .t-actions .btn:not(.primary){flex:1 1 0;padding-left:8px;padding-right:8px}
  .seg{flex:1 1 0}.seg button{flex:1 1 0;padding:1px 4px 0}
  #title-caption{display:none}
  #hud{top:calc(var(--sat) + 56px);gap:10px}
  .energy-label{display:none}
  #combat-toast{white-space:normal;text-align:left;font-size:12px}
  .card{padding:22px 20px 20px}
}
@media(max-height:520px){
  h1{font-size:clamp(40px,20vh,120px);margin-top:6px;margin-bottom:8px}
  .t-premise{padding-top:8px;font-size:15px}
  .select-fighter{display:flex;margin-top:8px}.choice-portrait{width:34px;height:34px}
  .t-actions{margin-top:8px}.btn.primary{min-height:42px}.btn,.seg button{min-height:40px}
  #hud{top:calc(var(--sat) + 50px)}
  .health-track{height:10px;margin-top:5px}.stats-line{margin-top:5px}
  .card{padding:16px 20px}.card h2{font-size:clamp(30px,11vh,62px);margin:6px 0 8px}.card-actions{margin-top:12px;gap:6px}.binojo-cta{margin-top:10px;padding-top:10px}
  .dpad{grid-template-columns:repeat(3,50px);grid-template-rows:50px 50px}.attack-pad{grid-template-columns:68px 68px;grid-template-rows:52px 52px}
  #callout{top:30%}
}

/* ---- motion preferences ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---- touch and tight-space fixes ---- */
.fighter-hud{min-width:0}
.fighter-name span{overflow:hidden;text-overflow:ellipsis;min-width:0}
@media(pointer:coarse){
  .mode-select{display:none}
  #keyboard-hints{top:calc(var(--sat) + 124px);bottom:auto}
  #touch-controls button{letter-spacing:.08em;font-size:12px}
}
@media(max-height:520px){#title-caption{display:none}#keyboard-hints{top:calc(var(--sat) + 104px)}}
@media(max-width:520px){.fighter-name span{font-size:19px;letter-spacing:.06em}.fighter-name small{display:none}.guard-track{width:34px}.energy-track{width:40px}}