/* One build for desktop, touch devices and Telegram WebViews. */
[hidden]{display:none!important}
:root{--safe-top:max(env(safe-area-inset-top,0px),var(--app-safe-top,0px));--safe-bottom:max(env(safe-area-inset-bottom,0px),var(--app-safe-bottom,0px));--safe-left:max(env(safe-area-inset-left,0px),var(--app-safe-left,0px));--safe-right:max(env(safe-area-inset-right,0px),var(--app-safe-right,0px))}
canvas{object-fit:contain}#gameWrap{aspect-ratio:16/9}
#mobileToolbar{letter-spacing:1px;gap:12px;min-height:34px}#platformLabel{font-size:9px;color:#52675a;margin-left:7px}.toolbar-actions{display:flex;gap:8px}.toolbar-actions button{padding:6px 10px;font-size:11px;min-height:34px}
#rotateHint{display:none}#appNotice{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#243d34;color:white;padding:12px 20px;font-size:13px;z-index:90;width:max-content;max-width:90vw;box-shadow:3px 3px #0003}
#leaveDialog{position:fixed;inset:0;z-index:80;background:#19291dd9;display:grid;place-items:center;padding:22px}#leaveDialog>.card{max-width:420px}#leaveDialog p{line-height:1.5}
#touchControls{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;flex:none;padding:4px 2px;user-select:none;-webkit-user-select:none;touch-action:none}#touchControls button{touch-action:none;-webkit-touch-callout:none;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px;min-width:48px;min-height:48px;border:2px solid #263a2d;box-shadow:3px 3px 0 #b8c5b5;transition:none;transform:none}#touchControls button b{font:900 23px monospace;line-height:1.1}#touchControls button span{font-size:9px;letter-spacing:.4px}#touchControls button.pressed{background:#b8d2a7;box-shadow:inset 0 0 0 2px #456349;transform:translateY(2px)}.touch-group{display:grid;gap:7px}.block{grid-column:1;grid-row:1;grid-row:span 2}.punch{grid-column:2;grid-row:1;background:#dce9ee}.kick{grid-column:2;grid-row:2;background:#f0dfc5}.touch-center{text-align:center;font:800 10px monospace;color:#3e5746}.touch-center small{display:block;font:11px/1.5 'Segoe UI',sans-serif;margin-top:8px;color:#637766}#touchHelp{text-align:center;font-size:10px;color:#526a59;margin:6px 0 0;flex:none}
body.touch-ui{display:block;padding:calc(var(--safe-top) + 7px) calc(var(--safe-right) + 8px) calc(var(--safe-bottom) + 7px) calc(var(--safe-left) + 8px);height:var(--app-height,100dvh);min-height:0;overflow:hidden;overscroll-behavior:none}
.touch-ui #app{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;position:relative}.touch-ui #mobileToolbar{width:100%;flex:none;margin-bottom:6px}.touch-ui #gameWrap{flex:none;margin:auto;border-width:2px;box-shadow:4px 4px #b6c3b5;overflow:hidden}.touch-ui #touchControls{margin-top:auto;padding-top:9px}.touch-ui #controlGuide,.touch-ui #moveGuide,.touch-ui #tip,.touch-ui .footer{display:none}.touch-ui #pauseButton{display:none!important}
.touch-ui .screen{position:fixed;inset:calc(var(--safe-top) + 49px) calc(var(--safe-right) + 8px) calc(var(--safe-bottom) + 8px) calc(var(--safe-left) + 8px);padding:20px;background:#f3f4eb;overscroll-behavior:contain;border:2px solid #a7b9a5}.touch-ui .screen.active{justify-content:flex-start}.touch-ui .menu-layout{margin:auto;max-width:820px;gap:26px}.touch-ui .center-screen{margin:auto;width:100%}.touch-ui .screen.settings{padding:16px}.touch-ui .settings-head{position:sticky;top:-16px;background:#f3f4eb;padding:8px 0;z-index:1}.touch-ui .menu-actions button{min-height:44px;padding:10px 12px}.touch-ui .pills{display:flex}.touch-ui .menu-layout h1{font-size:42px}.touch-ui .menu-layout .muted{font-size:13px}.touch-ui .eyebrow{margin-bottom:12px}.touch-ui .settings-grid{grid-template-columns:1fr 1fr}.touch-ui #localModeButton{font-size:12px}
.touch-ui #hud{top:10px;left:12px;right:12px;gap:12px;grid-template-columns:1fr 48px 1fr}.touch-ui .fighter-name{font-size:9px;margin-bottom:4px;letter-spacing:0;gap:5px}.touch-ui .fighter-name span:first-child{min-width:0}.touch-ui #timer{font-size:25px}.touch-ui #roundLabel{font-size:8px;margin-top:2px}.touch-ui .health-track{height:12px}.touch-ui .guard-track{margin-top:3px;height:3px}.touch-ui .score{font-size:12px;line-height:1;margin-top:4px}.touch-ui .move-name{font-size:9px;margin-top:3px;height:12px}.touch-ui #banner{font-size:26px}.touch-ui #bannerSub{font-size:10px;margin-top:4px}
@media(max-width:600px){.touch-ui .menu-layout{grid-template-columns:1fr;gap:18px}.touch-ui .menu-layout h1{font-size:38px;margin-bottom:10px}.touch-ui .menu-layout .muted{margin-bottom:0}.touch-ui .pills{display:none}.touch-ui .settings-grid{grid-template-columns:1fr}.touch-ui .touch-center{display:none}.touch-ui #rotateHint{display:block;text-align:center;font-size:11px;color:#526a59;margin:4px 0 8px;flex:none}.touch-ui #hud{top:7px;left:8px;right:8px;gap:6px}.touch-ui .fighter-name{font-size:8px}.touch-ui .move-name{font-size:8px}.touch-ui #touchHelp{font-size:9px;line-height:1.5;max-width:340px}.touch-ui .setting-row{flex-wrap:wrap}.touch-ui .toolbar-actions button{font-size:10px;padding:5px 8px}}
@media(orientation:landscape) and (max-height:500px){.touch-ui .screen{padding:12px 22px}.touch-ui .menu-layout h1{font-size:32px}.touch-ui .menu-layout .muted{font-size:12px}.touch-ui .menu-actions{gap:6px}.touch-ui .menu-actions button{min-height:37px;padding:7px 10px;font-size:12px}.touch-ui .eyebrow{margin-bottom:9px}.touch-ui .pills{display:none}.touch-ui #touchHelp{display:none}.touch-ui #touchControls{padding-top:5px}.touch-ui #mobileToolbar{min-height:30px;margin-bottom:2px}.touch-ui .toolbar-actions button{min-height:30px}.touch-ui #hud{top:6px}.touch-ui .score{font-size:10px}.touch-ui .move-name{display:none}.touch-ui #timer{font-size:22px}.touch-ui .health-track{height:10px}}
@media(max-width:350px){.touch-ui #platformLabel{display:none}}
@media(orientation:landscape) and (max-height:500px){.touch-ui #touchControls{position:absolute;left:0;right:0;bottom:7px;pointer-events:none;margin:0;padding:0}.touch-ui .touch-group{pointer-events:auto}.touch-ui .touch-center{display:none}.touch-ui .block{font-size:9px}}

/* Borderless arena and thumb controls. Two columns leave room for the fight. */
#gameWrap,.touch-ui #gameWrap{border:0;border-radius:0;box-shadow:none;background:#f6f5ed}
:root{--button-preferred:70px;--pad-size:min(var(--button-preferred),calc((100vw - var(--safe-left) - var(--safe-right) - 52px)/4))}
.directions,.attacks{grid-template-columns:repeat(2,var(--pad-size));grid-template-rows:repeat(2,var(--pad-size));gap:8px}
.directions .jump{grid-column:2;grid-row:1}.directions .crouch{grid-column:1;grid-row:1}
.directions .left{grid-column:1;grid-row:2}.directions .right{grid-column:2;grid-row:2}
#touchControls button{min-width:0;min-height:0;border-radius:10px;box-shadow:0 4px 0 #afbea9}
#touchControls button b{font-size:28px}#touchControls button span{font-size:11px;letter-spacing:.2px}
#touchControls .block{font-size:13px;background:#e4ebdd}
#touchControls button.pressed{background:#bdd6aa;box-shadow:inset 0 0 0 2px #456349;transform:translateY(3px)}
.touch-ui .touch-center{display:none}
@media(orientation:landscape) and (max-height:500px){.touch-ui #touchControls{bottom:10px}.touch-ui .touch-group{gap:8px}}
@media(orientation:landscape) and (max-height:500px){
 .touch-ui #rotateHint{display:none}
 .touch-ui .fighter-name{white-space:nowrap;overflow:hidden}
 .touch-ui .fighter-name span:first-child{overflow:hidden;text-overflow:ellipsis}
}
@media(orientation:landscape) and (max-width:680px) and (max-height:500px){
 .touch-ui .menu-layout{grid-template-columns:1fr 1.1fr;gap:16px}
 .touch-ui .menu-layout h1{font-size:26px}.touch-ui .menu-layout .muted{font-size:11px}
 .touch-ui .menu-actions button{font-size:10px;min-height:34px;padding:6px 7px}
 .touch-ui .screen{padding:12px}.touch-ui .eyebrow{font-size:8px}
 .touch-ui #hud{grid-template-columns:1fr 34px 1fr;gap:5px}
 .touch-ui .fighter-name{font-size:7px}.touch-ui #timer{font-size:18px}
}
