@font-face{font-family:'BlockBoss Condensed';src:url('assets/ui-condensed-italic.ttf') format('truetype');font-style:italic;font-weight:100 900;font-display:swap}
/* Approved compact comic concept. Decorative layers never intercept a touch. */
:root{--ink:#151510;--paper:#ffedbd;--hot:#f35b22;--gold:#f7bc1d;--comic:Impact,Haettenschweiler,'BlockBoss Condensed','Arial Narrow',sans-serif;--edge-left:max(20px,env(safe-area-inset-left));--edge-right:max(20px,env(safe-area-inset-right));--edge-bottom:max(22px,env(safe-area-inset-bottom));--panel:polygon(16% 2%,88% 0,100% 17%,91% 91%,12% 100%,0 70%)}
header{left:var(--edge-left);right:var(--edge-right);top:max(17px,env(safe-area-inset-top));gap:16px;align-items:center;pointer-events:none;z-index:2}
.brand{position:relative;isolation:isolate;display:block;font:900 italic clamp(30px,3.8vw,56px)/1 var(--comic);letter-spacing:-1.5px;color:var(--paper);transform:rotate(-3deg);text-shadow:-2px -2px var(--ink),2px -2px var(--ink),-2px 2px var(--ink),3px 3px var(--ink);pointer-events:auto;padding:0 10px 8px 0;white-space:nowrap}
.brand span{color:var(--hot);margin-left:4px}
.brand::after{content:'';position:absolute;inset:70% -10% 0 -4%;z-index:-1;background:var(--hot);clip-path:polygon(8% 18%,100% 0,90% 53%,0 100%);filter:drop-shadow(2px 3px 0 var(--ink))}
.place{position:absolute;left:50%;top:5px;transform:translateX(-50%) skew(-12deg);padding:5px 18px 7px;border:3px solid var(--ink);border-bottom-width:5px;background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--hot);letter-spacing:0;white-space:nowrap}
.place b{font:900 italic clamp(16px,1.8vw,26px)/1 var(--comic);margin:0;letter-spacing:0}
.tools{margin-left:auto;gap:8px;pointer-events:auto}
.tools button{width:44px;height:44px;display:grid;place-items:center;position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:0;box-shadow:2px 3px 0 var(--hot);transform:skew(-8deg);padding:7px;color:var(--ink)}
.tools button[aria-pressed=false]{opacity:.65;background:#9d9986;box-shadow:2px 3px 0 var(--ink)}
.tools button[aria-pressed=false]::after{content:'';position:absolute;width:3px;height:80%;left:48%;top:10%;transform:rotate(35deg);background:var(--hot);box-shadow:1px 0 0 var(--ink);pointer-events:none}
.tools button:active{translate:1px 2px;box-shadow:1px 1px 0 var(--hot)}
.ui-icon{display:block;width:32px;height:32px;fill:currentColor;pointer-events:none;flex-shrink:0;overflow:visible}
.ui-icon .icon-detail{fill:none;stroke:var(--paper);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.ui-icon .icon-rays{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.tools .ui-icon{width:27px;height:27px}
#hud{left:var(--edge-left);right:auto;top:max(88px,calc(env(safe-area-inset-top) + 72px));z-index:1;filter:drop-shadow(2px 3px 0 #13130ecc)}
.healthbox{width:clamp(235px,32vw,370px);display:grid;grid-template-columns:58px 1fr;grid-template-rows:29px 24px 20px;gap:3px 0}
.fighter-label{font-weight:900;grid-area:1/1/2/3;display:flex;gap:6px;align-items:stretch;margin:0;font-family:var(--comic);font-style:italic;letter-spacing:0;line-height:1}
.fighter-label>b{flex:1;min-width:0;display:flex;align-items:center;padding:2px 13px 3px;background:var(--paper);border:2px solid var(--ink);transform:skew(-10deg);color:var(--ink);font-size:22px;white-space:nowrap}
.fighter-label>span{display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);padding:2px 9px;font:900 italic 18px/1 var(--comic);white-space:nowrap}
.bar{grid-area:2/1/3/3;height:auto;transform:skew(-12deg);border:3px solid var(--ink);background:var(--paper);padding:3px 4px;margin:0 1px}
.bar i{background:var(--hot);border-right:2px solid var(--ink);transition:width .15s linear}
.rage{grid-area:3/2/4/3;height:16px;background:var(--ink);padding:4px 5px;border:1px solid var(--paper);transform:skew(-12deg);margin:2px 10px 0 0;align-self:start}
.rage i{background:var(--gold)}
.healthbox>small{grid-area:3/1/4/2;height:20px;margin:0;display:flex;align-items:center;justify-content:center;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font:900 italic 15px/1 var(--comic);transform:skew(-12deg);letter-spacing:0}
#ragetext{display:none}
.dragon-mode .fighter-label>b{color:var(--ink);background:#ffe19a;font-size:19px}
#stick{left:var(--edge-left);bottom:var(--edge-bottom);width:clamp(96px,11vw,144px);height:clamp(96px,11vw,144px)}
.ring{position:relative;border:3px solid var(--ink);background:#28251bbc;box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 5px var(--ink),2px 4px 0 var(--hot),3px 5px 0 var(--ink)}
.ring::before{content:'';position:absolute;inset:4px;border:2px dashed var(--ink);border-radius:50%;transform:rotate(-17deg);pointer-events:none}
.ring::after{content:'';position:absolute;inset:8px;border-radius:50%;background:radial-gradient(var(--paper) .8px,transparent 1px);background-size:4px 4px;mask-image:linear-gradient(40deg,#000,transparent 30%);opacity:.65;pointer-events:none}
#knob{left:28%;top:28%;width:44%;height:44%;background:#aaa18a;border:2px solid var(--paper);box-shadow:1px 2px 0 var(--ink);z-index:1}
.actionpad{right:var(--edge-right);bottom:var(--edge-bottom);width:clamp(220px,24vw,310px);height:clamp(138px,15vw,194px);transform:none;transform-origin:bottom right}
.actionpad button{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;isolation:isolate;padding:7px 9px 11px;background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--ink);filter:drop-shadow(1px 2px 0 #10100dd9);transition:translate .06s ease,filter .06s ease}
.actionpad button::before,.actionpad button::after{content:'';position:absolute;pointer-events:none;clip-path:var(--panel);z-index:-2}
.actionpad button::before{inset:0;background:linear-gradient(170deg,var(--ink) 0 86%,var(--hot) 86% 94%,var(--ink) 94%)}
.actionpad button::after{inset:3px 4px 7px;background:var(--paper);z-index:-1}
.button-grain{position:absolute;inset:5px 7px 11px;clip-path:var(--panel);background:radial-gradient(var(--ink) .7px,transparent 1px);background-size:3px 3px;mask-image:linear-gradient(115deg,#000 0 8%,transparent 25% 78%,#000 95%);pointer-events:none;z-index:0}
.actionpad button>*{pointer-events:none}
.actionpad .ui-icon{width:34px;height:32px;z-index:1}
.actionpad .action-label{position:relative;z-index:1;font:900 italic 20px/.95 var(--comic);letter-spacing:-.3px;white-space:nowrap}
#attack{right:0;left:auto;bottom:0;top:auto;width:56%;height:54%;background:transparent;border:0;color:var(--ink);--panel:polygon(11% 7%,92% 0,100% 17%,91% 92%,9% 100%,0 78%)}
#attack::after{background:var(--hot)}
#attack .ui-icon{width:43px;height:39px;color:var(--paper);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
#attack .ui-icon .icon-detail{stroke:var(--ink)}
#attack .ui-icon .icon-rays{stroke:var(--paper);stroke-width:3}
#attack .action-label{font:900 italic 30px/.9 var(--comic);letter-spacing:.2px;color:var(--paper);text-shadow:-1px -1px var(--ink),1px -1px var(--ink),-1px 1px var(--ink),2px 2px var(--ink)}
#kick{left:0;right:auto;bottom:1px;top:auto;width:38%;height:46%;background:transparent;border:0}
#block{left:21%;right:auto;top:0;bottom:auto;width:34%;height:40%}
#special{right:0;left:auto;top:0;bottom:auto;width:43%;height:40%}
#special .action-label{font-size:17px;letter-spacing:-.4px}
#special.ready{box-shadow:none;border:0}
#special.cooling,#kick.cooling{opacity:.6;filter:grayscale(.75)}
.actionpad button.active{translate:0 3px;transform:none;filter:brightness(1.14) drop-shadow(0 1px 0 var(--ink))}
.actionpad button:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
#controls.transforming .actionpad button,#controls.transforming #stick{pointer-events:none}
#tip{left:190px;right:340px;bottom:9px;font-size:9px;color:var(--paper);opacity:.7}
#callout{font-family:var(--comic);font-style:italic;color:var(--paper);text-shadow:-2px -2px var(--ink),2px 2px var(--ink),3px 4px var(--hot);letter-spacing:1px}
#combo{color:var(--paper);text-shadow:2px 2px var(--ink);right:var(--edge-right)}
#combo b{font-family:var(--comic);font-style:italic}
.primary,.secondary{border:3px solid var(--ink);border-bottom-width:5px;border-radius:0;background:var(--hot);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.secondary{background:var(--paper)}
.primary:hover{background:#ff7237}
.menu-card h2{font-family:var(--comic);font-style:italic;color:var(--paper)}
#comboStyle{border-radius:0;border:2px solid var(--paper);color:var(--paper);background:#171a16}
@media(max-height:520px) and (orientation:landscape){
 :root{--edge-left:max(18px,env(safe-area-inset-left));--edge-right:max(18px,env(safe-area-inset-right));--edge-bottom:max(18px,env(safe-area-inset-bottom))}
 header{top:max(10px,env(safe-area-inset-top))}.brand{font-size:32px;padding-bottom:4px}.place{top:2px;padding:5px 12px 6px;border-width:2px;border-bottom-width:3px}.place b{font-size:17px}
 .tools{gap:5px}.tools button{width:38px;height:38px;padding:7px;border-width:2px}.tools .ui-icon{width:25px;height:25px}
 #hud{top:max(52px,calc(env(safe-area-inset-top) + 44px))}.healthbox{width:260px;grid-template-columns:50px 1fr;grid-template-rows:23px 20px 17px;gap:2px 0}.fighter-label>b{font-size:18px;padding:1px 9px}.fighter-label>span{font-size:15px;padding:1px 7px}.bar{border-width:2px;padding:3px}.healthbox>small{font-size:13px;height:17px}.rage{height:14px;padding:3px 4px;margin-top:1px}.dragon-mode .fighter-label>b{font-size:15px}
 #stick{width:94px;height:94px}#knob{left:28%;top:28%;width:44%;height:44%}
 .actionpad{width:216px;height:132px;transform:none}.actionpad .ui-icon{width:28px;height:25px}.actionpad .action-label{font-size:17px}#special .action-label{font-size:14px}#attack .ui-icon{width:35px;height:30px}#attack .action-label{font-size:26px}
 #tip{left:135px;right:245px;bottom:6px;font-size:8px}#callout{font-size:22px;top:34%}
}
@media(max-width:700px) and (orientation:portrait){
 :root{--edge-left:max(16px,env(safe-area-inset-left));--edge-right:max(16px,env(safe-area-inset-right));--edge-bottom:max(24px,env(safe-area-inset-bottom))}
 header{top:max(19px,env(safe-area-inset-top));align-items:flex-start;gap:8px}.brand{font-size:30px;padding:0 0 6px;letter-spacing:-1.2px}.brand::after{right:-6%}.place{display:none}.tools{gap:5px;padding-top:1px}.tools button{width:36px;height:38px;border-width:2px;padding:6px;box-shadow:1px 2px 0 var(--hot)}.tools .ui-icon{width:24px;height:24px}
 #hud{top:max(75px,calc(env(safe-area-inset-top) + 58px))}.healthbox{width:min(285px,calc(100vw - 36px));grid-template-rows:26px 23px 20px}.fighter-label>b{font-size:21px}.fighter-label>span{font-size:17px}.dragon-mode .fighter-label>b{font-size:17px}
 #stick{width:92px;height:92px;bottom:var(--edge-bottom)}#knob{left:28%;top:28%;width:44%;height:44%}
 .actionpad{width:204px;height:132px;transform:none;bottom:var(--edge-bottom)}.actionpad .ui-icon{width:29px;height:26px}.actionpad .action-label{font-size:16px}#special .action-label{font-size:14px}#attack .ui-icon{width:36px;height:32px}#attack .action-label{font-size:27px}
 #tip{display:none!important}#callout{font-size:27px;top:29%}#combo{right:18px;top:43%}
}
@media(max-width:359px) and (orientation:portrait){
 :root{--edge-left:max(12px,env(safe-area-inset-left));--edge-right:max(12px,env(safe-area-inset-right))}
 .brand{font-size:25px}.tools{gap:3px}.tools button{width:33px;height:36px;padding:5px}.tools .ui-icon{width:23px;height:23px}
 #stick{width:82px;height:82px}.actionpad{width:188px;height:128px}.actionpad .action-label{font-size:15px}#special .action-label{font-size:13px}#attack .action-label{font-size:25px}
 .healthbox{width:270px}.fighter-label>b{font-size:19px}.dragon-mode .fighter-label>b{font-size:16px}
}
@media(orientation:landscape) and (max-width:740px){.place{display:none}.healthbox{width:245px}.dragon-mode .fighter-label>b{font-size:14px}}
@media(pointer:coarse){#tip{display:none!important}}
@media(prefers-reduced-motion:reduce){.actionpad button,.bar i{transition:none}}

#attack .icon-punch{transform:rotate(-28deg)}

/* Closed fist linework adapted from Lucide hand-fist; see assets/ui-icons-LICENSE.txt. */
#attack .fist-fill{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
#attack .fist-lines{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}