*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#100d16;color:#fff;font-family:Arial,Helvetica,sans-serif}body{overscroll-behavior:none}button,select{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ffda76;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}#app{min-height:100dvh;background:radial-gradient(ellipse at 50% 20%,#49213377,transparent 65%)}#select{max-width:1080px;margin:auto;padding:30px max(22px,env(safe-area-inset-left)) 26px}header{text-align:center}.eyebrow{font-size:14px;letter-spacing:4px;color:#e5bf78;font-weight:800}h1{font-size:clamp(38px,7vw,78px);font-style:italic;margin:8px 0 3px;line-height:1;letter-spacing:-2px;text-shadow:4px 4px #790f30}h1 em{color:#ffce68}p.edition{font-size:12px;letter-spacing:3px;color:#b7a6b5;margin:14px 0 25px}.edition span{color:#ed4770}.select-title{display:flex;align-items:center;justify-content:space-between;margin:10px 0}h2{font-size:21px;margin:12px 0}.select-title>span{font-size:12px;color:#b7a6b5;letter-spacing:1px}.roster{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{background:linear-gradient(150deg,#302332,#19151f);border:2px solid #4c3746;border-radius:3px;padding:0;overflow:hidden;text-align:left;position:relative;transition:transform .15s,border-color .15s}.card.selected{border-color:#ffce68;box-shadow:0 0 0 2px #ffce6833;transform:translateY(-4px)}.card canvas{width:100%;height:220px;object-fit:contain;background:radial-gradient(ellipse at 50% 80%,var(--color),transparent 65%)}.card .bio{padding:13px 15px;border-top:1px solid #ffffff17}.card strong{display:block;font-size:24px;letter-spacing:1px}.card .role{font-size:13px;display:block;color:#c3b4c4;margin-top:4px}.card .num{position:absolute;top:10px;left:12px;font-size:13px;color:#b7a6b5}.card.selected .num{color:#ffce68}.match-options{display:flex;align-items:center;gap:10px;margin:20px 0 15px;font-size:14px}.match-options select{background:#221b2a;border:1px solid #584354;border-radius:4px;padding:10px}.match-options .quiet{margin-left:auto}.quiet{background:transparent;border:1px solid #72576b;border-radius:4px;padding:11px 15px;font-size:14px}.start{display:block;background:#ffd16e;color:#20141c;border:0;border-bottom:4px solid #b7812e;padding:17px 25px;border-radius:4px;width:100%;font-size:19px;font-weight:900;text-transform:uppercase;letter-spacing:1px}.start:active{transform:translateY(2px)}#loadnote{text-align:center;font-size:13px;color:#c9b9c7;margin:10px 0}.help{font-size:14px;line-height:1.5;color:#c8b8c9;max-width:700px;margin:18px auto}.help summary{cursor:pointer;text-align:center;color:#efdfec}.topbar{height:45px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;font-size:13px;letter-spacing:1px;background:#130f18}.topbar b{color:#ffd16e;margin-left:8px}.topbar button{background:#2f2235;border:1px solid #624051;border-radius:3px;padding:6px 12px;margin-left:7px;font-size:14px}#game{max-width:1180px;margin:auto;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#arena{position:relative;aspect-ratio:1.6;background:#180d21;overflow:hidden}#canvas{width:100%;height:100%;display:block;touch-action:none}.hud{position:absolute;inset:14px 24px auto;display:grid;grid-template-columns:1fr 80px 1fr;gap:20px;pointer-events:none}.fighter-hud strong{font-size:22px;font-style:italic;text-shadow:2px 2px #160b1c}.hp{height:20px;border:2px solid #f8d88b;background:#371e31;box-shadow:0 3px 0 #0d0914;margin-top:4px;overflow:hidden}.hp i{display:block;width:100%;height:100%;background:linear-gradient(#fff89b,#f3b632);transition:width .1s}.enemy{text-align:right}.enemy .hp i,.enemy .energy i{margin-left:auto}.energy{height:5px;background:#130d22;margin:7px 0 4px;border:1px solid #a5a2b255}.energy i{display:block;width:100%;height:100%;background:#62dfed}.fighter-hud>span{font-size:11px;letter-spacing:2px;text-shadow:1px 1px #000}.clock{text-align:center;background:#190d23c9;border:1px solid #a77b62;padding:5px}.clock b{display:block;font-size:38px;color:#ffdf8c;line-height:1}.clock span{font-size:10px;white-space:nowrap;color:#d7c4ce}#announce{position:absolute;top:35%;width:100%;text-align:center;font-size:clamp(22px,6vw,58px);font-weight:900;font-style:italic;color:#ffda76;text-shadow:3px 4px #761730;pointer-events:none}.controls{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:14px 26px 12px;background:linear-gradient(#261c2d,#130e1b);border-top:2px solid #5c304c;touch-action:none}#joystick{width:124px;height:124px;flex:0 0 124px;border:2px solid #7d4b6b;border-radius:50%;background:radial-gradient(#312336,#19121e);position:relative;touch-action:none;box-shadow:inset 0 0 0 10px #ffffff04}#stick{position:absolute;width:52px;height:52px;left:34px;top:34px;background:radial-gradient(at 35% 25%,#ee8298,#b2254d 65%,#651331);border:2px solid #f09aae;border-radius:50%;box-shadow:0 6px 8px #0007;pointer-events:none}#joystick b{position:absolute;bottom:-19px;font-size:10px;letter-spacing:2px;left:40px;color:#a88f9f;pointer-events:none}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:350px}.actions button{border-radius:50px;min-height:51px;border:2px solid #b58b75;background:linear-gradient(#7d3e45,#4c202e);box-shadow:0 4px 0 #08060d;font-size:12px;font-weight:bold;padding:8px 10px;touch-action:none}.actions button:active,.actions button.active{transform:translateY(3px);filter:brightness(1.3);box-shadow:0 1px #08060d}.actions .small{background:#282333;border-color:#776580;font-size:11px}.actions .power{background:linear-gradient(#ba8836,#795424);border-color:#f4d58e;color:#fff3ce}.actions .unready{opacity:.45}.actions small{color:#b6a0ad;font-size:10px;margin-left:3px}.overlay{position:absolute;inset:0;background:#120a19dd;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;z-index:5;backdrop-filter:blur(5px)}.overlay h2{font-size:clamp(25px,6vw,60px);font-style:italic;color:#ffcf6e;margin:10px}.overlay>span{font-size:26px;letter-spacing:4px;color:#f28098}.overlay p{font-size:16px;margin:8px 0 18px}.overlay .start{max-width:330px}.overlay .quiet{margin-top:10px}.rotate{text-align:center;color:#a990aa;font-size:12px;margin:12px}.error{color:#ffa0ad!important}
@media(max-width:650px){#select{padding:22px 18px}.roster{grid-template-columns:repeat(2,1fr);gap:12px}.card canvas{height:155px}.card .bio{padding:9px 12px}.card strong{font-size:21px}.card .role{font-size:12px}.select-title>span{font-size:10px}h2{font-size:19px}.match-options{flex-wrap:wrap}.hud{inset:9px 11px auto;gap:10px;grid-template-columns:1fr 44px 1fr}.fighter-hud strong{font-size:14px}.hp{height:13px}.clock b{font-size:25px}.clock span{font-size:7px}.fighter-hud>span{font-size:8px}.energy{margin:4px 0}.controls{gap:14px;padding:20px 16px 25px}.actions{gap:9px;width:230px;grid-template-columns:repeat(2,1fr)}.actions button{min-height:47px;font-size:11px}.actions small{display:none}#joystick{width:104px;height:104px;flex-basis:104px}#stick{left:24px;top:24px}#joystick b{left:30px}.topbar{font-size:10px;padding:0 10px}.topbar b{margin-left:2px}.topbar button{font-size:12px}.overlay p{font-size:13px}.overlay .start{padding:10px 18px;font-size:15px}.overlay .quiet{padding:7px 15px}}

.logo-title{margin:2px auto 0;max-width:400px;height:165px;text-shadow:none}.logo-title img{display:block;width:100%;height:100%;object-fit:contain}.eyebrow b{letter-spacing:1px}.match-options{flex-wrap:wrap}.match-options .quiet{margin-left:0}.match-options #sound{margin-left:auto}.actions{grid-template-columns:repeat(3,1fr);width:380px}.actions button{min-height:45px}.actions .small{font-size:10px}.edition{margin-top:3px!important}.card canvas{height:230px}
@media(max-width:650px){.logo-title{height:125px;max-width:290px}.match-options{gap:7px}.match-options .quiet{font-size:12px;padding:10px}.match-options #sound{margin-left:auto}.actions{width:245px;gap:6px;grid-template-columns:repeat(3,1fr)}.actions button{font-size:10px;min-height:47px;padding:7px 5px}.actions .small{font-size:9px}.controls{gap:12px;padding-left:12px;padding-right:12px}.card canvas{height:155px}.eyebrow{letter-spacing:2px}}

.input-note{text-align:center;color:#c8bdce;font-size:14px;line-height:1.4;margin:9px 0}.help table{width:100%;border-collapse:collapse;text-align:left}.help td,.help th{padding:8px;border-bottom:1px solid #ffffff20}.actions{width:330px;grid-template-columns:1fr 1fr;gap:10px}.actions button{min-height:50px;font-size:14px}.actions .attack{grid-column:1 / -1;background:linear-gradient(#a64a56,#73213d);border-color:#ffb8b2;font-size:17px}.actions small{display:inline-block;font-size:12px;margin-left:8px}.actions .small{font-size:14px}.pause-level{display:flex;align-items:center;gap:12px;margin:15px 0;font-size:16px}.pause-level select{background:#38283d;border:1px solid #b699b2;padding:10px;border-radius:4px;color:white;font:inherit}.pad-focus{outline:3px solid #ffda76!important;outline-offset:4px}#pinhelp{position:absolute;z-index:4;left:50%;top:55%;transform:translateX(-50%);width:min(85%,430px);padding:12px;background:#1e0e29ed;border:2px solid #ffcf6e;text-align:center;pointer-events:none}#pinmessage{font-size:clamp(14px,2vw,22px);color:#ffe09e}#escapeprogress{height:13px;margin-top:9px;background:#503346;border:1px solid #c49dab}#escapefill{display:block;height:100%;background:#7be3b4;width:0}.clock span{font-size:11px;letter-spacing:0}.clock{min-width:80px}.hud{grid-template-columns:1fr 90px 1fr}body[data-input="gamepad"] .controls{display:none}body[data-input="gamepad"] .rotate{display:none}#game{touch-action:manipulation}.controls{padding-bottom:max(18px,env(safe-area-inset-bottom));}#joystick b{font-size:11px;left:36px}
@media(max-width:650px){.actions{width:min(235px,62vw);gap:8px}.actions button{min-height:48px;font-size:13px}.actions .small{font-size:13px}.actions .attack{font-size:16px}.actions small{display:none}.controls{padding:16px 12px max(24px,env(safe-area-inset-bottom));gap:12px}.hud{grid-template-columns:1fr 80px 1fr;gap:9px}.clock{min-width:0}.clock span{font-size:10px}.pause-level{font-size:14px}.input-note{font-size:13px}#pinhelp{top:48%;padding:8px}#select{padding-bottom:max(22px,env(safe-area-inset-bottom));}}


/* Combat uses the visible viewport; the canvas and its HUD share one fitted box. */
body.in-match{overflow:hidden;height:100dvh}
body.in-match #app{min-height:0}
#game{position:fixed;top:var(--play-top,0px);left:0;width:100%;height:var(--play-height,100dvh);max-width:none;margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:grid;grid-template-rows:44px minmax(0,1fr) auto;overflow:hidden;background:#100d16}
#game .topbar{height:44px;min-width:0;padding:0 12px;letter-spacing:0;gap:8px}
.topbar>div{display:flex;flex-shrink:0;gap:6px}
#game .topbar button{margin:0;min-width:40px;min-height:36px;padding:6px 10px}
.arena-shell{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:4px}
#game #arena{flex:none;margin:0;aspect-ratio:1.6;overflow:hidden;max-width:100%;max-height:100%;container-type:inline-size}
#canvas{object-fit:contain}
#game .hud{inset:8px 12px auto;grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);gap:12px}
#game .fighter-hud strong{font-size:clamp(12px,3cqw,22px);white-space:nowrap}
#game .hp{height:clamp(10px,2.5cqw,20px)}
#game .clock{min-width:0;padding:4px 2px}
#game .clock b{font-size:clamp(23px,5cqw,38px)}
#game .clock span{font-size:9px}
#game .fighter-hud>span{font-size:9px;letter-spacing:1px}
#game .energy{margin:4px 0;height:5px}
#game .controls{position:static;display:flex;align-items:center;justify-content:center;gap:28px;padding:10px 16px 18px;background:linear-gradient(#261c2d,#130e1b);border-top:2px solid #5c304c;pointer-events:auto}
#game #joystick{width:76px;height:76px;flex:0 0 76px;margin:0;opacity:1}
#game #stick{width:44px;height:44px;left:14px;top:14px}
#game #joystick b{left:0;width:100%;bottom:-14px;text-align:center;font-size:9px;letter-spacing:1px}
#game .actions{width:min(650px,75%);grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
#game .actions button{min-height:48px;padding:8px 4px;font-size:12px;opacity:1}
#game .actions .attack{grid-column:auto;font-size:13px}
#game .actions small{display:block;font-size:10px;margin:4px 0 0}
#game .rotate{display:none}
#game .overlay{position:fixed;inset:calc(var(--play-top,0px) + 44px + env(safe-area-inset-top)) env(safe-area-inset-right) auto env(safe-area-inset-left);height:calc(var(--play-height,100dvh) - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;padding:14px;justify-content:safe center}
#game .overlay h2{font-size:clamp(24px,5vw,46px);margin:8px}
#game .overlay p{margin:8px 0;font-size:13px}
#game .overlay>span{font-size:22px}
#game .overlay .start{padding:12px 20px;font-size:17px}
#game .pause-level{margin:10px 0}
body[data-input="gamepad"] #game .controls{display:none}
body[data-input="gamepad"] #game{grid-template-rows:44px minmax(0,1fr)}
.card .fighter-logo{display:block;width:100%;height:96px;object-fit:contain;filter:drop-shadow(0 3px 3px #0008)}
.card .bio{padding:9px 10px 12px;text-align:center}
@media(max-width:600px){
 #game .topbar{font-size:10px;padding:0 8px}
 #game .topbar b{display:none}
 #game .controls{gap:14px;padding:10px 12px 18px;justify-content:space-between}
 #game #joystick{width:88px;height:88px;flex-basis:88px}
 #game #stick{left:20px;top:20px}
 #game .actions{width:min(260px,calc(100% - 102px));grid-template-columns:1fr 1fr;gap:7px}
 #game .actions .attack{grid-column:1/-1}
 #game .actions button{min-height:44px;font-size:11px;padding:6px 3px}
 #game .actions small{display:none}
 body[data-input="keyboard"] #game .actions small{display:inline;font-size:9px;margin-left:4px}
 #game .hud{inset:6px 7px auto;gap:6px;grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr)}
 #game #announce{font-size:25px}
 #game #pinmessage{font-size:12px}
 #game #pinhelp{padding:6px;top:47%}
 .card .fighter-logo{height:76px}
}
@media(min-width:601px) and (max-height:500px){
 #game{grid-template-rows:44px minmax(0,1fr)}
 #game .arena-shell{margin:0 162px 0 104px}
 #game .controls{position:absolute;inset:44px 0 env(safe-area-inset-bottom);padding:0 10px;justify-content:space-between;pointer-events:none;background:none;border:0}
 #game .controls>*{pointer-events:auto}
 #game .actions{width:144px;grid-template-columns:1fr 1fr;gap:7px}
 #game .actions .attack{grid-column:1/-1}
 #game .actions button{min-height:46px;font-size:11px}
 #game .actions small{display:none}
 #game #joystick{width:84px;height:84px;flex-basis:84px}
 #game #stick{left:18px;top:18px}
 #game .hud{inset:5px 7px auto;gap:6px;grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr)}
 #game #announce{font-size:26px}
 #game #pinmessage{font-size:12px}
 body[data-input="gamepad"] #game .arena-shell{margin:0}
}

/* Arcade cabinet: four distinct buttons, a smaller special, and room for the ring. */
#game .arena-shell{margin:0;padding:0}
#game #arena{border:0;box-shadow:none}
#game .controls{gap:32px;padding:7px 20px 15px}
#game .actions{position:relative;width:280px;grid-template-columns:repeat(4,1fr);gap:12px;padding-right:0}
#game .actions button{width:60px;height:60px;min-height:60px;padding:4px 1px;border-radius:50%;font-size:10px;line-height:1.15;box-shadow:0 5px 0 #08050d, inset 0 2px 3px #fff4}
#game .actions .punch{background:linear-gradient(#ce4663,#7e203c);border-color:#ffa7b6}
#game .actions .kick{background:linear-gradient(#488cd4,#214871);border-color:#9ccfff}
#game .actions .context{background:linear-gradient(#c78f35,#715015);border-color:#ffe4a0}
#game .actions .block{background:linear-gradient(#58a883,#225f4d);border-color:#b6f3cf}
#game .actions .power{position:absolute;right:-65px;top:6px;width:48px;height:48px;min-height:48px;font-size:8px;background:linear-gradient(#7857b8,#493061);border-color:#d9b6ff}
#game .actions small{font-size:11px;margin-top:4px;color:#fff9}
#game .actions .unready{opacity:.45}
#game .energy{height:8px;border-radius:3px;overflow:visible;border-color:#8b7b9a}
.energy i{border-radius:2px;transition:width .12s linear}
#game .energy.ready{border-color:#fff0bb;box-shadow:0 0 9px #b877ff,0 0 18px #8e59df;animation:super-glow .65s ease-in-out infinite alternate}
#game .energy.ready i{background:linear-gradient(90deg,#e2acff,#fff4bc,#a4efff)}
#game .actions .power.ready{border-color:#fff1af;box-shadow:0 0 14px #bc86ff,inset 0 0 12px #fff4;animation:super-glow .65s ease-in-out infinite alternate}
@keyframes super-glow{to{filter:brightness(1.5);box-shadow:0 0 18px #d4a4ff,0 0 26px #a56cf8}}
#game .actions button.active{transform:translateY(3px);filter:brightness(1.35);box-shadow:0 2px #08050d}
@media(min-width:700px) and (min-height:501px){#game .controls{padding-right:85px}}
@media(max-width:699px){
 #game .controls{justify-content:space-between;gap:12px;padding:10px 16px 16px}
 #game .actions{width:196px;grid-template-columns:60px 60px;gap:9px;padding-right:0}
 #game .actions .power{right:0;top:41px;width:52px;height:52px;min-height:52px}
 #game .actions small{display:none}
 body[data-input=keyboard] #game .actions small{display:inline;font-size:9px;margin-left:3px}
 #game .actions button{font-size:10px}
}
@media(orientation:landscape) and (max-height:600px){
 #game{grid-template-rows:36px minmax(0,1fr)}
 #game .topbar{height:36px}
 #game .topbar button{min-height:30px;padding:4px 8px}
 #game .controls{position:absolute;inset:auto 0 12px;padding:0 14px;pointer-events:none;background:none;border:0;justify-content:space-between;align-items:end}
 #game .controls>*{pointer-events:auto}
 #game .actions{width:186px;grid-template-columns:56px 56px;gap:8px}
 #game .actions button{width:56px;height:56px;min-height:56px;font-size:9px}
 #game .actions .power{right:0;top:36px;width:48px;height:48px;min-height:48px;font-size:8px}
 #game .actions small{display:none}
 #game #joystick{width:84px;height:84px;flex-basis:84px}
 #game #stick{left:18px;top:18px}
 #game .hud{inset:5px 9px auto}
}
@media(prefers-reduced-motion:reduce){#game .energy.ready,#game .actions .power.ready{animation:none} .energy i{transition:none}}
@media(orientation:landscape) and (max-height:600px){
 #game .actions{width:286px;grid-template-columns:repeat(4,48px);gap:7px;padding-right:66px}
 #game .actions button{width:48px;height:48px;min-height:48px;font-size:8px}
 #game .actions .power{right:0;top:2px;width:44px;height:44px;min-height:44px;font-size:7px}
}
@media(max-width:360px) and (orientation:portrait){
 #game .controls{padding-left:10px;padding-right:10px;gap:8px}
 #game #joystick{width:76px;height:76px;flex-basis:76px}
 #game #stick{left:14px;top:14px}
 #game .actions{width:182px;grid-template-columns:56px 56px;gap:7px}
 #game .actions button{width:56px;height:56px;min-height:56px;font-size:9px}
 #game .actions .power{width:48px;height:48px;min-height:48px;top:36px;font-size:8px}
}

#combat-hint{display:none;pointer-events:none;position:absolute;bottom:12px;left:12px;right:12px;text-align:center;color:#fff2dc;font-size:11px;text-shadow:0 2px 4px #000;margin:0}body[data-input=gamepad] #combat-hint{display:block}
/* Gesture protection is scoped to combat; menus retain text zoom. */
#game{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game button{touch-action:manipulation}
#game #joystick{width:106px;height:106px;flex-basis:106px;touch-action:none}
#game #stick{width:50px;height:50px;left:26px;top:26px}
@media(orientation:landscape) and (max-height:600px){#game #joystick{width:102px;height:102px;flex-basis:102px}#game #stick{left:24px;top:24px}#game .controls{bottom:7px}}
@media(max-width:360px) and (orientation:portrait){#game #joystick{width:96px;height:96px;flex-basis:96px}#game #stick{left:21px;top:21px}}
.mode-picker{display:flex;justify-content:center;gap:12px;margin:0 0 12px;align-items:center}
.mode-picker span,.mode-picker button{padding:9px 18px;border:1px solid #79627d;font-size:14px;border-radius:5px}
.mode-picker span{color:#ffdf8b;background:#583247;border-color:#f5cd7e;font-weight:bold}
.mode-picker button:disabled{cursor:not-allowed;background:#211b29;opacity:.6}
/* Compact arcade progression: first opponent on the left, future rivals hidden. */
#tower{position:fixed;inset:0;overflow:auto;box-sizing:border-box;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:radial-gradient(ellipse at 70% 40%,#582849,#100d1a 70%);z-index:9}
#tower h2{color:#ffdb89;margin:8px 0 16px;font-size:clamp(20px,4vw,32px)}
.tower-stage{width:100%;max-width:720px;margin:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
#tower-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
#tower-list li{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 4px;border:1px solid #745575;background:#1a1225;border-radius:6px;text-align:center}
#tower-list li>b{font-size:20px;color:#a78bb0}
#tower-list li>strong{font-size:clamp(12px,3.2vw,16px);overflow-wrap:anywhere;line-height:1.2}
#tower-list li>span{font-size:12px;color:#c9b4cc;line-height:1.3}
#tower-list .current{border:2px solid #ffda7a;background:#392236}
#tower-list .current>b{color:#ffdf94}
#tower-list .cleared{opacity:.65;border-color:#63b99a}
#tower-list .unrevealed{color:#8e7898}
.versus-intro{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);align-items:center;justify-items:center;gap:14px}
.versus-intro>img{display:block;width:100%;max-width:280px;min-width:0;height:clamp(90px,20vw,150px);object-fit:contain;object-position:center;animation:logo-entry .4s ease-out both}
.versus-intro>b{font-size:30px;font-style:italic;color:#ffd785;text-shadow:2px 2px #951f4c}
.versus-intro button{grid-column:1/-1;width:min(100%,350px);min-height:44px;margin:0}
@keyframes logo-entry{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:600px){#tower{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.tower-stage{gap:14px}#tower-list{gap:6px}.versus-intro{column-gap:8px;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)}.versus-intro>b{font-size:24px}.versus-intro .start{font-size:16px;padding:12px 8px;letter-spacing:0}}
@media(orientation:landscape) and (max-height:500px){#tower{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}#tower h2{font-size:20px;margin:4px 0 8px}.tower-stage{gap:8px}#tower-list li{padding:5px;gap:2px}#tower-list li>b{font-size:16px}#tower-list li>span{display:none}.versus-intro{gap:6px 12px}.versus-intro>img{height:70px}.versus-intro button{grid-column:auto;width:100%;font-size:14px;padding:8px;min-height:44px}.versus-intro #tower-fight{grid-column:1/3}.versus-intro #tower-leave{grid-column:3}}
@media(prefers-reduced-motion:reduce){.versus-intro>img{animation:none}}

/* Larger thumb target where the viewport has room. */
@media(min-width:375px) and (orientation:portrait){#game #joystick{width:118px;height:118px;flex-basis:118px}#game #stick{left:32px;top:32px}}
@media(orientation:landscape) and (min-height:370px){#game #joystick{width:112px;height:112px;flex-basis:112px}#game #stick{left:29px;top:29px}}

#community{font-size:14px;text-align:center;margin:8px 0}#popular-fighter{color:#ffcd72}.admin-link{display:inline-block;padding:10px 14px;color:#ffcd72;touch-action:manipulation}
/* Face buttons follow the same diamond on touch, numeric keypad and DualSense. */
#game .actions{position:relative;display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,48px);gap:0;width:230px;min-width:230px;padding:0 62px 0 0;overflow:visible}
#game .actions button{position:relative;inset:auto;width:56px;height:56px;min-width:0;min-height:0;border-radius:50%;padding:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;margin:0;transform:none;font-size:9px}
#game .actions .context{grid-column:2;grid-row:1}#game .actions .block{grid-column:1;grid-row:2}#game .actions .kick{grid-column:3;grid-row:2}#game .actions .punch{grid-column:2;grid-row:3}
#game .actions .power{position:absolute;right:0;top:48px;width:54px;height:54px;left:auto;bottom:auto;font-size:7px}
#game .actions .button-symbol{font-style:normal;font-size:21px;line-height:22px}#game .actions small{font-size:9px;line-height:10px}
@media(max-width:600px){#game .controls{gap:10px;padding-left:10px;padding-right:10px;justify-content:space-between}#game .actions{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,42px);width:196px;min-width:196px;padding-right:52px}#game .actions button{width:48px;height:48px;font-size:8px}#game .actions .power{width:46px;height:46px;top:42px;font-size:6px}#game #joystick{width:112px;height:112px;min-width:112px}}

@media(max-width:600px){#game #joystick{flex-basis:112px}#game #stick{left:31px;top:31px}}
@media(orientation:landscape) and (max-height:600px){#game .actions{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,40px);width:198px;min-width:198px;padding-right:54px}#game .actions button{width:48px;height:48px;font-size:8px}#game .actions .power{width:46px;height:46px;top:40px;font-size:6px}}
/* Square punch / Cross kick / Circle guard / Triangle grab. Larger touch targets. */
#game .actions .punch{grid-column:1;grid-row:2}#game .actions .kick{grid-column:2;grid-row:3}#game .actions .block{grid-column:3;grid-row:2}
@media(pointer:coarse),(max-width:600px){#game .controls{padding:8px 10px;gap:8px}#game .actions{grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,49px);width:224px;min-width:224px;padding-right:50px}#game .actions button{width:58px;height:58px;font-size:9px}#game .actions .power{width:46px;height:46px;top:52px;font-size:6px}#game .actions .button-symbol{font-size:24px;line-height:24px}#game #joystick{width:106px;height:106px;min-width:106px;flex-basis:106px}#game #stick{left:28px;top:28px}}
@media(max-width:370px){#game .actions{grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,46px);width:210px;min-width:210px;padding-right:48px}#game .actions button{width:54px;height:54px}#game #joystick{width:92px;height:92px;min-width:92px;flex-basis:92px}#game #stick{left:21px;top:21px}}
@media(max-width:350px){#game .actions{grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,44px);width:196px;min-width:196px;padding-right:46px}#game .actions button{width:50px;height:50px}#game #joystick{width:80px;height:80px;min-width:80px;flex-basis:80px}#game #stick{left:15px;top:15px}}
/* Larger targets use the gaps in the diamond; the special sits above its right edge. */
@media(pointer:coarse),(max-width:600px){
 #game .actions{--face:70px;--step:47px;--row:54px;grid-template-columns:repeat(3,var(--step));grid-template-rows:repeat(3,var(--row));width:210px;min-width:210px;height:178px;padding:0}
 #game .actions button{width:var(--face);height:var(--face);font-size:10px}
 #game .actions .power{width:50px;height:50px;top:-4px;right:0;font-size:7px}
 #game .actions .button-symbol{font-size:28px;line-height:28px}
 #game #joystick{width:126px;height:126px;min-width:126px;flex-basis:126px}
 #game #stick{width:56px;height:56px;left:33px;top:33px}
 #game .controls{gap:8px;padding:12px 10px max(18px,env(safe-area-inset-bottom));align-items:center}
}
@media(max-width:360px){
 #game .actions{--face:60px;--step:42px;--row:47px;width:185px;min-width:185px;height:154px}
 #game .actions .power{width:46px;height:46px;font-size:6px}
 #game #joystick{width:102px;height:102px;min-width:102px;flex-basis:102px}
 #game #stick{left:21px;top:21px}
}
@media(orientation:portrait) and (max-width:720px){
 #game{grid-template-rows:44px minmax(0,1fr) auto}
 #game .arena-shell{align-items:center}
 #game #arena{aspect-ratio:auto}
}
@media(orientation:landscape) and (max-height:600px){
 #game .actions{--face:62px;--step:45px;--row:48px;width:205px;min-width:205px;height:158px}
 #game #joystick{width:120px;height:120px;min-width:120px;flex-basis:120px}
 #game #stick{left:30px;top:30px}
 #game .controls{padding:0 12px;bottom:8px}
}

/* Online lobby and separate action targets; keep the ring itself unchanged. */
#online-lobby{max-width:680px;margin:auto;padding:28px 18px}.lobby-card{background:#201728;border:1px solid #735167;padding:22px;border-radius:10px;margin:24px 0}.lobby-card label{display:block;margin-bottom:8px}.lobby-card input{width:100%;padding:13px;border:1px solid #8b6c80;border-radius:5px;background:#100d16;color:#fff;font:inherit}#online-status{line-height:1.45;min-height:42px;color:#e9c98c}#online-players{padding:0;list-style:none}#online-players li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid #674459}#online-players button{background:#d6a950;color:#1b1320;padding:12px;border:0;border-radius:5px;font-weight:900}#online-invite{border:2px solid #f7c967;padding:18px;margin:14px 0;background:#382036}#online-invite .quiet{margin-top:10px}.mode-picker{flex-wrap:wrap}
@media(pointer:coarse),(max-width:600px){#game .actions{--step:51px;--row:58px;width:224px;min-width:224px;height:186px}#game .controls{padding-top:2px;padding-bottom:max(28px,env(safe-area-inset-bottom))}}
@media(orientation:portrait) and (max-width:720px){#game .arena-shell{align-items:flex-end}#game .controls{transform:translateY(-12px);margin-bottom:-12px}}
@media(max-width:374px){#game .actions{--face:62px;--step:46px;--row:51px;width:205px;min-width:205px;height:166px}#game #joystick{width:102px;min-width:102px;flex-basis:102px}#game #stick{left:21px;top:21px}}
@media(orientation:landscape) and (max-height:600px){#game .controls{bottom:22px}#game .actions{--face:62px;--step:49px;--row:53px;width:216px;min-width:216px;height:174px}}

.lobby-player-info{display:flex;flex-direction:column;gap:5px;min-width:0}.lobby-player-info strong{overflow-wrap:anywhere}.lobby-ping{font-size:14px;color:#cebccc;font-variant-numeric:tabular-nums}.lobby-ping[data-quality=good]{color:#a3e1b2}.lobby-ping[data-quality=fair]{color:#f1ce83}.lobby-ping[data-quality=high]{color:#ffa5a5}#online-players button{flex-shrink:0}

/* Owner-only controls stay on the current game page. */
#admin-panel{width:min(920px,96vw);height:min(900px,92dvh);max-width:96vw;max-height:92dvh;padding:14px;border:1px solid #ffcd72;border-radius:16px;background:#100d16;color:#fff6e3;overflow:hidden}
#admin-panel[open]{display:flex;flex-direction:column;gap:10px}#admin-panel::backdrop{background:#08050de8}#admin-panel iframe{border:0;width:100%;flex:1;min-height:0;background:#100d16}#admin-panel p{margin:0;color:#ffcd72}#admin-panel .admin-close{align-self:flex-end;padding:10px 16px;background:#ffcd72;color:#201520;border:0;border-radius:8px;font:inherit;cursor:pointer}
.admin-link{background:#21162c;border:1px solid #8e7049;border-radius:8px;font:inherit;cursor:pointer}
.cpu-exhibition #penergy,.cpu-exhibition #enemy-label{font-size:14px}.cpu-exhibition #pinhelp,.cpu-exhibition .controls,.cpu-exhibition #combat-hint,.cpu-exhibition .rotate,.cpu-exhibition .pause-level{display:none!important}

/* Slightly clockwise face-button arrangement; labels stay upright. */
@media(pointer:coarse),(max-width:600px){
 #game .controls{padding-right:max(6px,env(safe-area-inset-right));padding-left:max(10px,env(safe-area-inset-left))}
 #game .actions{--face:74px;--pad-scale:1;display:block;width:218px;min-width:218px;height:200px;margin-left:auto}
 #game .actions button{position:absolute;width:var(--face);height:var(--face)}
 #game .actions .punch{left:0;top:64px}
 #game .actions .context{left:76px;top:0}
 #game .actions .block{left:144px;top:72px}
 #game .actions .kick{left:68px;top:126px}
 #game .actions .power{left:auto;right:0;top:-30px;width:50px;height:50px}
}
@media(max-width:389px){
 #game #joystick{width:108px;height:108px;min-width:108px;flex-basis:108px}
 #game #stick{left:26px;top:26px}
}
@media(max-width:359px),(orientation:landscape) and (max-height:600px){
 #game .actions{--face:66px;width:194px;min-width:194px;height:178px}
 #game .actions .punch{top:57px}
 #game .actions .context{left:68px}
 #game .actions .block{left:128px;top:64px}
 #game .actions .kick{left:60px;top:112px}
 #game .actions .power{top:-30px;width:46px;height:46px}
}
@media(max-width:359px){#game #joystick{width:94px;height:94px;min-width:94px;flex-basis:94px}#game #stick{left:19px;top:19px}}

/* Keep peer RTT readable inside the narrow mobile clock column. */
#game #network-status{margin-top:4px;border-top:1px solid #a77b6280;padding-top:3px}
#game #network-status[hidden]{display:none}
#game #network-status span{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.3;font-size:10px;letter-spacing:0}
#game #network-ping{color:#9ff3d0;font-weight:700;font-variant-numeric:tabular-nums}