/* Cabinet surfaces use the spare space without cropping the fighting screen. */
body #game{background:linear-gradient(90deg,#140c13,#412022 2%,#100d14 5%,#20131b 50%,#100d14 95%,#412022 98%,#140c13);border-inline:3px solid #c99547;box-shadow:inset 0 0 35px #000}
#game .topbar{position:relative;z-index:60;background:linear-gradient(#643723,#26161b 48%,#110c13);border-bottom:2px solid #d8a54e;box-shadow:0 4px 14px #000;padding-inline:clamp(8px,3vw,40px);height:44px}
#game .topbar>span{color:#ffdc87;text-shadow:0 2px #000,0 0 12px #d78229;letter-spacing:1px}
#game .topbar>div{display:flex;gap:6px;align-items:center}
#game .topbar button{min-height:32px;border:1px solid #a77d48;border-radius:5px;background:linear-gradient(#392a34,#17101b);color:#fff2d3}
#game .topbar #leave{background:linear-gradient(#ffe2a2,#c59747);color:#21111a;font-weight:800}
#game #demo-change{display:none}
body.cpu-exhibition #game #demo-change{display:inline-block}
body.cpu-exhibition #game{grid-template-rows:44px minmax(0,1fr)}
#game .arena-shell{position:relative;min-height:0;padding:12px 16px;box-sizing:border-box;align-items:center;background:radial-gradient(ellipse at center,#49252700 40%,#060508d9 95%),repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 5px)}
#game .arena-shell:before{content:"";position:absolute;top:14px;width:min(70%,280px);height:clamp(0px,calc((100% - (100vw - 32px)*.75)/2 - 26px),130px);background:url('assets/logo-ring-arcade26-158.webp?v=158') center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 0 12px #c9663333)}
#game #arena{flex:none;box-sizing:content-box;outline:2px solid #a4783d;border:0;border-radius:8px;box-shadow:0 0 0 7px #08080d,0 0 0 10px #423138,0 0 0 12px #171016,0 15px 30px #000,0 0 36px #ef923733;overflow:hidden}
#game .controls{background:linear-gradient(#573827,#271c24 14%,#110e17 85%);border-top:2px solid #a87942;box-shadow:inset 0 3px #eabe6533,0 -8px 25px #0008}
#game .overlay{z-index:50}
@media(min-width:800px) and (min-height:650px){
 body #game,body.cpu-exhibition #game,body[data-input="gamepad"] #game{grid-template-rows:82px minmax(0,1fr) auto}
 body.cpu-exhibition #game,body[data-input="gamepad"] #game{grid-template-rows:82px minmax(0,1fr)}
 #game .topbar{height:82px}
 #game .topbar>span{font-size:0;width:260px;height:76px;background:url('assets/logo-ring-arcade26-158.webp?v=158') center/contain no-repeat;filter:drop-shadow(0 0 10px #ff9b4533)}
 #game .topbar>span b{display:none}
 #game .topbar:after{content:"";position:absolute;left:calc(50% - 80px);width:160px;height:30px;pointer-events:none;background:repeating-linear-gradient(0deg,#08080b 0 3px,#6a4434 3px 5px);border:2px solid #956b40;border-radius:8px;box-shadow:inset 0 0 12px #000}
 #game .overlay{top:calc(var(--play-top,0px) + 82px + env(safe-area-inset-top));height:calc(var(--play-height,100dvh) - 82px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
}
#game #pausemusic{background:#241925;color:#ffe1a0;border:1px solid #9d7546;padding:5px;border-radius:4px}
@media(max-width:600px){body.cpu-exhibition #game .topbar>span{display:none}body.cpu-exhibition #game .topbar>div{width:100%;justify-content:space-between}#game .topbar{padding-inline:8px}}
@media(orientation:landscape) and (max-height:600px){#game .topbar{height:36px}body.cpu-exhibition #game{grid-template-rows:36px minmax(0,1fr)}}

/* Equal circular action targets, with a larger movement stick and more ring space. */
#game .arena-shell{padding:4px}
#game .actions{--face:74px;--diamond-step:70px;position:relative;display:block;width:calc(2 * var(--diamond-step) + var(--face));min-width:calc(2 * var(--diamond-step) + var(--face));height:calc(2 * var(--diamond-step) + var(--face));padding:0;margin-left:auto}
#game .actions button,#game .actions .power{position:absolute;box-sizing:border-box;width:var(--face);height:var(--face);min-width:var(--face);min-height:var(--face);max-width:var(--face);max-height:var(--face);border-radius:50%;padding:4px;font-size:9px;right:auto;bottom:auto}
#game .actions .punch{left:0;top:var(--diamond-step)}
#game .actions .context{left:var(--diamond-step);top:0}
#game .actions .power{left:calc(50% - 22px);top:calc(50% - 22px);width:44px;height:44px;min-width:44px;min-height:44px;max-width:44px;max-height:44px;background:linear-gradient(#8752b6,#48266b);border-color:#d7b2ff;color:#fff;font-size:6px;padding:1px}
#game .actions .kick{left:var(--diamond-step);top:calc(2 * var(--diamond-step))}
#game .actions .block{left:calc(2 * var(--diamond-step));top:var(--diamond-step)}
#game .actions .button-symbol{font-size:26px;line-height:26px}
#game .actions small{margin:0;font-size:9px}
#game .actions .power .button-symbol{font-size:18px;line-height:18px}
#game .actions .power small{display:none}
#game #joystick{width:136px;height:136px;min-width:136px;flex-basis:136px}
#game #stick{width:60px;height:60px;left:36px;top:36px}
#game .controls{gap:6px;padding:8px max(4px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));transform:none;margin-bottom:0}
@media(max-width:389px),(orientation:landscape) and (max-height:600px){
 #game .actions{--face:66px;--diamond-step:64px}
 #game #joystick{width:120px;height:120px;min-width:120px;flex-basis:120px}
 #game #stick{left:28px;top:28px}
}
@media(max-width:349px){#game .actions{transform:scale(.92);transform-origin:right center;margin-left:-17px}#game #joystick{width:110px;height:110px;min-width:110px;flex-basis:110px}#game #stick{left:23px;top:23px}}
#exhibition-options{margin:8px auto;width:min(540px,100%);padding:8px 12px;background:#1d1327;color:#fff3dc;border:1px solid #806384;border-radius:8px}#exhibition-options[hidden]{display:none}#exhibition-options summary{cursor:pointer;font-size:13px;text-align:right;color:#ffdc9c}


#exhibition-options h2{clear:both;padding-top:12px}
#exhibition-options p{line-height:1.5}
#exhibition-options .cpu-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
#exhibition-options fieldset{min-width:0;border:1px solid #806384;border-radius:8px;padding:10px}
#exhibition-options label{display:block;margin:8px 0}
#exhibition-options select{display:block;width:100%;background:#110c1a;color:#fff;padding:12px 4px;border:1px solid #806384;border-radius:5px;margin-top:6px;font:inherit}
#online-selection-back{margin:10px auto;display:block}
#online-selection-back[hidden]{display:none}
#select[data-online-selecting=true] .mode-picker,#select[data-online-selecting=true] .match-options{display:none}

#player-logo[src*="logo-adriano"],#opponent-logo[src*="logo-adriano"],#versus-player[src*="logo-adriano"],#versus-enemy[src*="logo-adriano"]{scale:.86}

@media(orientation:landscape) and (max-height:600px){
 #game .controls{background:none;border:0;box-shadow:none;pointer-events:none;padding:0 5px;bottom:8px;align-items:flex-end}
 #game .controls>*{pointer-events:auto}
}

/*167: slightly larger stick and matching outer margins for touch controls.*/
@media(max-width:720px),(pointer:coarse){
 #game .controls{padding-left:max(14px,env(safe-area-inset-left),env(safe-area-inset-right));padding-right:max(14px,env(safe-area-inset-left),env(safe-area-inset-right))}
 #game #joystick{width:150px;height:150px;min-width:150px;flex-basis:150px}
 #game #stick{left:calc(50% - 30px);top:calc(50% - 30px)}
 #game #joystick b{left:0;width:100%;text-align:center}
}
@media(max-width:389px),(orientation:landscape) and (max-height:600px){#game #joystick{width:134px;height:134px;min-width:134px;flex-basis:134px}}
@media(max-width:349px){#game #joystick{width:120px;height:120px;min-width:120px;flex-basis:120px}}
/* Keep the enlarged stick and unchanged button diameters inside narrow phones. */
@media(max-width:720px),(pointer:coarse){#game .controls{gap:4px}#game .actions{--diamond-step:64px}}
@media(max-width:389px){#game .actions{--diamond-step:58px}}
@media(max-width:359px){#game #joystick{width:130px;height:130px;min-width:130px;flex-basis:130px}#game .actions{--diamond-step:56px}}
@media(max-width:349px){#game #joystick{width:120px;height:120px;min-width:120px;flex-basis:120px}#game .actions{--diamond-step:50px;transform:none;margin-left:auto}}

/*173: complete brand inside its own header box; frame glow stays inside phone. */
body #game{background:linear-gradient(90deg,#160307,#340610 2%,#080709 6%,#10090d 50%,#080709 94%,#340610 98%,#160307);border-inline:2px solid #ff2547;box-shadow:inset 0 0 16px #ff163d30}
#game .topbar{background:linear-gradient(#26050e,#10080c);border-bottom:2px solid #ff2547;box-shadow:inset 0 -2px 8px #ff174430}
#game .topbar>span.combat-brand{display:flex;align-items:center;justify-content:flex-start;flex:1;min-width:0;width:auto;height:100%;background:none;filter:none;font-size:0}
#game .combat-brand img{display:block;width:100%;max-width:260px;height:100%;max-height:76px;object-fit:contain;object-position:left center;padding:3px 0}
#game .topbar button,#game #pausemusic{background:#210b13;border-color:#ff3557;color:#fff}
#game .topbar #leave{background:linear-gradient(#dd153b,#910b27);color:#fff}
#game .topbar:after{border-color:#eb2048;background:repeating-linear-gradient(0deg,#08080b 0 3px,#4c0c1e 3px 5px)}
#game .arena-shell:before{display:none}
#game #arena{outline:2px solid #ff294c;border-radius:6px;box-shadow:inset 0 0 0 1px #ff7490,0 0 3px #ff1744,inset 0 0 16px #ff174425}
#game .controls{background:linear-gradient(#290813,#10080d 18%,#09070a);border-top:2px solid #ff2547;box-shadow:inset 0 2px 10px #ff174430}
@media(max-width:799px),(max-height:649px){
 #game .combat-brand img{max-height:40px;max-width:220px}
 #game .topbar{gap:6px;padding-inline:6px}
 #game .topbar>div{flex-shrink:0}
 body.cpu-exhibition #game .topbar>span.combat-brand{display:flex}
 body.cpu-exhibition #game .topbar>div{width:auto}
 #game .topbar #demo-change{max-width:82px;padding:3px;font-size:10px}
}
@media(orientation:landscape) and (max-height:600px){#game .controls{background:transparent;border-top:0;box-shadow:none;pointer-events:none}#game .controls button,#game #joystick{pointer-events:auto}}

/*175: club crest in header, game title immediately above the ring.*/
#game .topbar .combat-brand img{width:38px;height:38px;object-fit:contain}#game .arena-shell{flex-direction:column;gap:4px}.arena-brand{display:block;flex:none;height:clamp(28px,5vh,56px);max-width:70%;object-fit:contain}@media(max-height:500px){.arena-brand{height:26px}#game .topbar .combat-brand img{width:30px;height:30px}}

/*180: circular crest crop removes the white rectangular surround.*/
#game .topbar .combat-brand img{clip-path:circle(38.5% at 50% 50%);transform:scale(1.27);padding:0}@media(orientation:portrait) and (max-width:720px){#game .arena-shell{align-items:center;justify-content:center}.arena-brand{width:96%;max-width:96%;object-fit:contain}}

/*184: retain title position, reduce visual logo by30%, remove duplicate crest.*/
#game .topbar .combat-brand img{display:none}.arena-brand{transform:scale(.7);transform-origin:center}