/* AI Fighters - 8-bit look. Font: Press Start 2P (OFL, bundled in fonts/). Colours from the NES-style palette. */
@font-face{font-family:"Press Start 2P";src:url("../fonts/PressStart2P-Regular.ttf") format("truetype");font-display:swap}
/* intro cinematic title type: Bebas Neue (OFL, bundled in fonts/, see fonts/BebasNeue-OFL.txt) */
@font-face{font-family:"Bebas Neue";src:url("../fonts/BebasNeue-Regular.ttf") format("truetype");font-display:swap}
:root{--blk:#000;--wht:#fcfcfc;--yel:#f8b800;--org:#e45c10;--red:#e40058;--blu:#0000bc;--vio:#4428bc;--cyn:#00e8d8;--gry:#7c7c7c}
html,body{margin:0;height:100%;background:var(--blk);overflow:hidden;color:var(--wht);
  font-family:"Press Start 2P",ui-monospace,monospace;line-height:1.6;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
#app{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
#stage{position:relative;flex:none;border:0}
#game{display:block;width:100%;height:100%;background:var(--blk);image-rendering:crisp-edges;image-rendering:pixelated}
canvas{image-rendering:crisp-edges;image-rendering:pixelated}
.tag{position:absolute;right:4px;bottom:3px;font-size:8px;opacity:.5;pointer-events:none;color:var(--wht)}

.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:16px;box-sizing:border-box;text-align:center;z-index:10;
  background:var(--blk) repeating-linear-gradient(0deg,#0000 0 3px,#4428bc22 3px 4px)}
.screen.on{display:flex}
.screen::before{content:"";position:absolute;inset:10px;border:4px solid var(--vio);outline:4px solid var(--blu);outline-offset:4px;pointer-events:none}
h1{font-size:clamp(22px,7vw,56px);margin:0;font-weight:400;color:var(--yel);text-shadow:4px 4px 0 var(--red),8px 8px 0 var(--blu);letter-spacing:1px}
h2{margin:0;font-weight:400;font-size:clamp(13px,3.6vw,24px);color:var(--yel);text-shadow:3px 3px 0 var(--red)}
p{margin:0}
button{font:inherit;cursor:pointer;border-radius:0;touch-action:manipulation;color:var(--wht)}
.big{font-size:16px;padding:14px 24px;background:var(--org);border:4px solid var(--wht);box-shadow:6px 6px 0 var(--blk),6px 6px 0 4px var(--red)}
.big:active,.small:active{transform:translate(4px,4px);box-shadow:none}
.big:focus-visible,.small:focus-visible,.card:focus-visible{outline:4px dashed var(--yel);outline-offset:4px}
.small{font-size:10px;background:var(--blu);padding:10px 16px;border:4px solid var(--wht);box-shadow:4px 4px 0 var(--vio)}
.hint{font-size:8px;color:var(--cyn);max-width:520px}
.disclaimer{font-size:9px;color:var(--wht);max-width:440px;margin-top:6px;padding:8px;border:2px dashed var(--gry)}
.credit{font-size:11px;color:var(--wht);line-height:1.6;position:relative;z-index:1}
.credit a{color:var(--yel);text-decoration:underline;text-underline-offset:3px;padding:6px 2px;touch-action:manipulation}
@media (hover:hover){.credit a:hover{color:var(--cyn)}}
.credit a:focus-visible{color:var(--cyn);outline:none}
#title-credit{margin-top:6px}
.credit.sm{font-size:8px;opacity:.85}
@media (max-height:420px){#scr-title{gap:8px}#scr-title h1{font-size:clamp(22px,6vh,40px)}.big{padding:10px 20px}.disclaimer{margin-top:0;padding:5px}}
/* difficulty selector (title): three chunky 8-bit toggles, big tap targets, the chosen one lit up */
#diff{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
#diff .dlbl{font-size:8px;color:var(--cyn);width:100%}
.dbtn{font-size:10px;min-width:96px;min-height:44px;padding:8px 10px;background:#100818;border:4px solid var(--gry);color:#bcbcbc;box-shadow:4px 4px 0 var(--blk);touch-action:manipulation}
.dbtn.sel{background:var(--blu);border-color:var(--yel);color:var(--yel);box-shadow:4px 4px 0 var(--red)}
.dbtn.sel::before{content:"\25B6 "}
.dbtn:focus-visible{outline:4px dashed var(--yel);outline-offset:3px}
.dbtn:active{transform:translate(3px,3px);box-shadow:none}
@media (hover:hover){.dbtn:not(.sel):hover{color:var(--wht);border-color:var(--wht)}}
@media (max-height:420px){#diff .dlbl{display:none}.dbtn{min-height:44px;padding:6px 10px}}
#over-challenge{font-size:11px;color:var(--yel);text-shadow:2px 2px 0 var(--red);min-height:0}
#over-challenge:empty{display:none}
#over-challenge.champ{animation:champ .5s steps(2) infinite}
@keyframes champ{50%{color:var(--cyn)}}
.pdiff{font-size:7px;color:var(--cyn);text-align:center;margin-top:4px}
#over-title{font-size:clamp(14px,4vw,28px)}
#over-sub{font-size:10px;color:var(--cyn)}

#cards{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.card{background:#000;border:4px solid var(--wht);padding:10px 8px;width:160px;text-align:center;box-shadow:6px 6px 0 var(--vio);font-size:8px}
.card:hover,.card:focus{border-color:var(--yel);background:#24188c}
.card canvas{width:144px;height:123px;image-rendering:pixelated;display:block;margin:0 auto 6px;background:#0000}
.card b{display:block;font-size:10px;font-weight:400;color:var(--yel);margin-bottom:4px}
.card small{display:block;font-size:7px;color:var(--wht);margin-top:4px;line-height:1.5}

#tag{position:fixed;right:10px;bottom:8px;font-size:7px;opacity:.6;z-index:20;pointer-events:none}
body.fighting #tag{display:none}
#btn-mute{position:fixed;top:6px;right:6px;z-index:30;font-size:7px;padding:5px 6px;background:var(--blk);border:2px solid var(--gry);opacity:.85}
body.fighting #btn-mute{top:auto;bottom:6px;right:50%;transform:translateX(50%)}

/* touch controls: round glossy arcade buttons with pixel-art icons + a bevelled pixel D-pad */
#controls{display:none;width:100%;box-sizing:border-box;justify-content:space-between;align-items:center;padding:12px 18px}
body.touch #controls{display:flex;flex:none;height:230px;max-width:520px;margin-top:24px}
#dpad{position:relative;width:150px;height:150px;touch-action:none;--arm:#3c3c4c;--hi:#7c7c8c;--lo:#1c1c24;
  background:linear-gradient(var(--arm),var(--arm)) center/34% 100% no-repeat,linear-gradient(var(--arm),var(--arm)) center/100% 34% no-repeat;
  filter:drop-shadow(0 4px 0 #101010) drop-shadow(3px 0 0 #101010) drop-shadow(-3px 0 0 #101010) drop-shadow(0 -3px 0 #101010)}
#dpad::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--hi),var(--hi)) 50% 0/34% 4px no-repeat,linear-gradient(var(--hi),var(--hi)) 0 33%/33% 4px no-repeat,linear-gradient(var(--hi),var(--hi)) 100% 33%/33% 4px no-repeat,
    linear-gradient(var(--lo),var(--lo)) 50% 100%/34% 4px no-repeat,linear-gradient(var(--lo),var(--lo)) 0 67%/33% 4px no-repeat,linear-gradient(var(--lo),var(--lo)) 100% 67%/33% 4px no-repeat}
#dpad::after{content:"";position:absolute;left:41%;top:41%;width:18%;height:18%;border-radius:50%;background:#26262e;box-shadow:inset 0 2px 0 #101010}
#dpad i{position:absolute;width:34%;height:33%;pointer-events:none;display:flex;align-items:center;justify-content:center;transition:transform .04s}
#dpad i .ar{width:42%;image-rendering:pixelated;filter:drop-shadow(0 2px 0 #101010)}
#dpad .u{top:0;left:33%}#dpad .d{bottom:0;left:33%}#dpad .l{left:0;top:33.5%}#dpad .r{right:0;top:33.5%}
#dpad .d .ar{transform:rotate(180deg)}#dpad .l .ar{transform:rotate(-90deg)}#dpad .r .ar{transform:rotate(90deg)}
/* pressed direction: that arm sinks and lights up */
#dpad.U .u,#dpad.D .d,#dpad.L .l,#dpad.R .r{background:#e4e4f0;box-shadow:inset 0 4px 0 #8c8c9c;transform:translateY(2px)}
#dpad.U .u .ar,#dpad.D .d .ar,#dpad.L .l .ar,#dpad.R .r .ar{filter:none}
#actions{display:grid;grid-template-columns:repeat(2,68px);grid-template-rows:repeat(2,68px);gap:12px}
.act{--c:#888;--hi:#ccc;--dk:#444;position:relative;width:68px;height:68px;padding:0;touch-action:none;border-radius:50%;border:3px solid #101010;color:#fcfcfc;
  background:radial-gradient(circle at 34% 28%,var(--hi) 0 20%,var(--c) 21% 58%,var(--dk) 59% 100%);
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.32),inset 0 3px 0 rgba(255,255,255,.4),0 5px 0 #101010;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .04s,filter .04s}
/* gloss: a pixel shine blob + a sparkle dot */
.act::before{content:"";position:absolute;left:20%;top:12%;width:24%;height:11%;background:#fff;opacity:.75;border-radius:2px;
  box-shadow:-4px 4px 0 -1px rgba(255,255,255,.55);pointer-events:none}
.act::after{content:"";position:absolute;right:22%;top:18%;width:4px;height:4px;background:#fff;opacity:.6;pointer-events:none}
.act .ico{width:52%;height:auto;image-rendering:pixelated;filter:drop-shadow(0 2px 0 rgba(0,0,0,.45));pointer-events:none;margin-top:4px}
.act .lbl{font-size:6px;line-height:1;letter-spacing:.5px;opacity:.9;text-shadow:1px 1px 0 #101010;pointer-events:none}
.act .ico-sup{display:none}
.act.on{transform:translateY(4px);filter:brightness(.78);box-shadow:inset 0 4px 0 rgba(0,0,0,.4),inset 0 -2px 0 rgba(255,255,255,.2),0 1px 0 #101010}
#btn-punch{--c:#f04818;--hi:#fca044;--dk:#a01800}#btn-kick{--c:#1e5bff;--hi:#6cb4ff;--dk:#0b2fa8}
#btn-block{--c:#14b414;--hi:#80f070;--dk:#006800}#btn-special{--c:#9c2ce0;--hi:#e09cff;--dk:#4c0884}
/* arcade slant: right column sits a little higher */
#btn-block,#btn-punch{top:-10px}
/* SUPER ready: the SP button turns into a glowing gold lightning button labelled SUPER (meter full) */
#btn-special.super{--c:#f8b800;--hi:#fff8b0;--dk:#b85800;color:#fcfcfc;border-color:#fff;animation:supglow .5s steps(2) infinite}
#btn-special.super .ico-sp{display:none}#btn-special.super .ico-sup{display:block;width:48%}
#btn-special.super .lbl{font-size:7px;color:#fff8b0;text-shadow:1px 1px 0 #101010,-1px 0 0 #101010,0 -1px 0 #101010,1px 0 0 #101010}
@keyframes supglow{0%{box-shadow:inset 0 -5px 0 rgba(0,0,0,.32),inset 0 3px 0 rgba(255,255,255,.4),0 5px 0 #101010,0 0 0 3px #e40058,0 0 14px 6px #f8b800}
  100%{box-shadow:inset 0 -5px 0 rgba(0,0,0,.32),inset 0 3px 0 rgba(255,255,255,.4),0 5px 0 #101010,0 0 0 3px #00e8d8,0 0 22px 10px #f878f8;filter:brightness(1.2)}}
#btn-special.super.on{transform:translateY(4px);filter:brightness(.85)}
.card small.sup{color:var(--yel)}

/* landscape phones: controls overlay the game */
@media (orientation:landscape){
  body.touch #controls{position:fixed;left:0;right:0;bottom:0;padding:10px 24px;pointer-events:none;flex:none;max-width:none;height:auto;margin:0}
  body.touch #controls > *{pointer-events:auto;opacity:.82}
  body.touch #dpad{width:130px;height:130px}
  body.touch #actions{grid-template-columns:repeat(2,58px);grid-template-rows:repeat(2,58px);gap:8px}
  body.touch .act{width:58px;height:58px}
  body.touch .act .lbl{font-size:5px}
}

/* pause button: under the round timer, between the win pips (clear of the health bars and the credit) */
#btn-pause{display:none;position:absolute;left:50%;top:12.4%;transform:translateX(-50%);width:6%;height:8%;min-width:26px;min-height:20px;
  z-index:15;padding:0;font-size:clamp(7px,1.6vw,12px);letter-spacing:-1px;background:#100818;border:2px solid var(--yel);
  box-shadow:2px 2px 0 var(--blk);color:var(--wht);opacity:.85;touch-action:manipulation}
body.fighting #btn-pause{display:block}
body.paused #btn-pause,body.cine #btn-pause{display:none}
#btn-pause:active{transform:translate(-50%,2px);box-shadow:none}
/* pause overlay: retro box over the frozen fight */
#pause{display:none;position:absolute;inset:0;z-index:25;align-items:center;justify-content:center;
  background:#000a repeating-linear-gradient(0deg,#0000 0 3px,#0006 3px 4px)}
#pause.on{display:flex}
#pause .pbox{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:14px 18px;background:#100818;
  border:4px solid var(--wht);outline:4px solid var(--vio);box-shadow:8px 8px 0 var(--blk)}
#pause h3{margin:0 0 4px;font-weight:400;font-size:clamp(12px,3vw,20px);color:var(--yel);text-shadow:3px 3px 0 var(--red);text-align:center}
.pbtn{font-size:clamp(8px,1.6vw,11px);padding:8px 14px 8px 22px;background:#0000;border:2px solid #0000;text-align:left;position:relative}
.pbtn.sel{border-color:var(--yel);background:#24188c}
.pbtn.sel::before{content:"";position:absolute;left:8px;top:50%;margin-top:-4px;border:4px solid transparent;border-left:6px solid var(--yel);border-right:0}
.phint{font-size:7px;color:var(--gry);text-align:center;margin-top:4px}
body.paused #controls{opacity:.25;pointer-events:none}