/* One safe-area boundary for the whole app; children must not add it twice. */
:root{
 --phone-top:max(env(safe-area-inset-top,0px),var(--mini-safe-top,0px));
 --phone-right:max(env(safe-area-inset-right,0px),var(--mini-safe-right,0px));
 --phone-bottom:max(env(safe-area-inset-bottom,0px),var(--mini-safe-bottom,0px));
 --phone-left:max(env(safe-area-inset-left,0px),var(--mini-safe-left,0px));
}
#app,.telegram-app #app{
 position:relative;box-sizing:border-box;min-width:0;min-height:0;
 width:min(100%,var(--visible-width,100vw));
 height:min(100%,var(--visible-height,100dvh),var(--mini-height,100dvh));
 padding:var(--phone-top) var(--phone-right) var(--phone-bottom) var(--phone-left);
 overflow:hidden;
}
#game,.telegram-app #game,#selection,#ladderScreen{
 box-sizing:border-box;width:100%;max-width:100%;height:100%;max-height:100%;min-height:0;min-width:0;
}
#game{isolation:isolate}
.classic-attacks{position:absolute;right:var(--control-pad);bottom:var(--control-bottom);display:grid;grid-template-columns:repeat(3,var(--control-button));gap:var(--control-gap);pointer-events:auto}
.classic-attacks[hidden]{display:none}
.classic-attacks button{width:var(--control-button);height:var(--control-button);padding:0;border:2px solid #edc58f;border-radius:12px;background:#181e29ed;color:#fff1d8;font:bold 16px Arial;touch-action:none;user-select:none}
.classic-attacks [data-key="block"],.classic-attacks [data-key="run"]{font-size:12px;border-color:#92c6de}
.classic-attacks button.down{background:#edc58f;color:#17120c}
#game[data-controls="classic"] .simple-attacks{display:none}
#game:not([data-phase="fight"]) .classic-attacks{visibility:hidden;pointer-events:none}
#controlMode{width:52px;font-size:12px}
.league-bar{flex-wrap:wrap}
.league-entry{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
#telegramLaunch{font-weight:700}
#arena{inset:0;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
#rotate{display:none!important}
#opening,.telegram-app #opening{position:absolute;inset:var(--phone-top) var(--phone-right) var(--phone-bottom) var(--phone-left);min-width:0;min-height:0;padding:16px;overflow:auto}
#opening .opening-title{font-size:clamp(42px,min(14vw,18dvh),110px)}
#opening p{margin:12px 0;font-size:12px;letter-spacing:2px}
#opening .opening-story{font-size:14px;letter-spacing:0}
#opening .opening-rule{margin:10px 0}
#opening button{min-width:0;width:min(100%,280px);flex:none}
#faceoff{grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr);padding:24px 16px 64px}
.versus-fighter{min-width:0;min-height:0}
#skipIntro{bottom:10px;max-width:calc(100% - 24px);white-space:nowrap}
dialog,.telegram-app dialog{max-width:calc(var(--visible-width,100vw) - 24px);max-height:calc(var(--visible-height,100dvh) - var(--phone-top) - var(--phone-bottom) - 20px)}

/* Two deliberate thumb zones. Every button, including special, is in the grid. */
#combatControls{
 position:absolute;inset:auto 0 0;height:var(--control-deck,184px);max-height:100%;
 pointer-events:none;z-index:6;
 background:linear-gradient(0deg,#080b12e8,#080b1270 70%,transparent);
}
#moveStick{
 left:var(--control-pad,12px);bottom:var(--control-bottom,36px);right:auto;top:auto;
 width:var(--control-stick,104px);height:var(--control-stick,104px);padding:0;
 border:2px solid #d3b083a6;border-radius:50%;
 background:radial-gradient(circle at 50% 45%,#303033e8,#17191ded 62%,#080b11);
 box-shadow:inset 0 0 0 10px #f5d1a60b,inset 0 2px 4px #ffffff12,0 4px 10px #0007;
 pointer-events:auto;touch-action:none;overflow:hidden;
}
#moveStick::before,#moveStick::after{content:'';position:absolute;background:#ebc68a32;pointer-events:none;border-radius:2px}
#moveStick::before{width:1px;height:72%}#moveStick::after{width:72%;height:1px}
#moveStick .stick-knob{
 position:relative;z-index:1;width:44%;height:44%;flex:none;box-sizing:border-box;
 border:2px solid #ffddb0;border-radius:50%;
 background:radial-gradient(circle at 35% 25%,#f5d3a1,#be874c 65%,#815329);
 box-shadow:inset 0 2px 3px #fff4,0 3px 8px #0008;
}
.simple-attacks{
 left:auto;right:var(--control-pad,12px);bottom:var(--control-bottom,36px);top:auto;
 width:calc(var(--control-button,64px)*2 + var(--control-gap,8px));
 height:calc(var(--control-button,64px) + var(--control-special,51px) + var(--control-gap,8px));
 display:grid;grid-template-columns:repeat(2,var(--control-button,64px));
 grid-template-rows:var(--control-special,51px) var(--control-button,64px);
 gap:var(--control-gap,8px);align-items:end;justify-items:end;pointer-events:auto;
}
.simple-attacks button{
 box-sizing:border-box;position:relative;inset:auto;margin:0;padding:0;min-width:0;min-height:0;
 width:var(--control-button,64px);height:var(--control-button,64px);
 border:2px solid var(--button-accent,#e6bd80);border-radius:50%;
 background:radial-gradient(circle at 35% 25%,#36302a,#1d1c20 72%);color:#fff1d8;
 box-shadow:inset 0 2px 3px #fff2,0 3px 8px #0008;
 font:800 14px/1 Arial,sans-serif;letter-spacing:.4px;touch-action:none;
 transition:background-color 60ms,color 60ms;user-select:none;-webkit-user-select:none;
}
.simple-attacks [data-simple="hand"]{grid-column:1;grid-row:2;--button-accent:#f3c485}
.simple-attacks [data-simple="foot"]{grid-column:2;grid-row:2;--button-accent:#a6d9ea}
.simple-attacks button.down{background:#edc58f;color:#140e0a;box-shadow:inset 0 3px 7px #50300d60,0 0 0 2px #ffedd266}
.simple-attacks #specialAttack{
 position:relative;inset:auto;grid-column:2;grid-row:1;
 width:var(--control-special,51px);height:var(--control-special,51px);
 border-color:var(--special-color,#ffcf84);
 background:radial-gradient(circle,#181820 61%,transparent 64%),conic-gradient(var(--special-color,#ffcf84) var(--charge,100%),#45434b 0);
}
#specialAttack b{font-size:22px;line-height:1}#specialCountdown{font:700 11px/1.2 Arial,sans-serif;letter-spacing:0}
#controlLegend{
 position:absolute;left:var(--control-pad,12px);right:var(--control-pad,12px);bottom:6px;top:auto;
 width:auto;max-width:100%;height:var(--control-legend,24px);overflow:hidden;
 display:flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:none;
 font:11px/1.2 Arial,sans-serif;letter-spacing:0;color:#c5bda9;pointer-events:none;
}
#inputHistory{bottom:calc(var(--control-deck,184px) + 4px);left:50%;max-width:90%;overflow:hidden;text-overflow:ellipsis}
#finisherChoices{top:50%;left:50%;transform:translate(-50%,-50%);width:min(340px,calc(100% - 24px));box-sizing:border-box;max-height:calc(100% - 16px);overflow:auto}

/* Names may shrink within their track; the HUD can never widen the game. */
#hud{inset:8px 8px auto;gap:8px;max-width:calc(100% - 16px)}
#hud .health{flex:1 1 0;min-width:0;padding:5px 7px}
#hud .health>div:first-child{min-width:0;gap:4px}
#pname,#ename{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(12px,2.5vw,22px)}
#pscore,#escore{flex:none;font-size:12px;letter-spacing:1px;white-space:nowrap}
#hud .timer{flex:none;min-width:44px;padding:5px}
#hud .timer strong{font-size:30px}#hud .timer span{font-size:9px}
#hud .health small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:9px;letter-spacing:.5px}
.battle-tools{top:84px;gap:6px;z-index:7}
.battle-tools button,#debugToggle{width:36px;height:30px}
#practiceHud{top:120px;left:8px;right:8px;max-width:calc(100% - 16px);gap:8px;flex-wrap:wrap}
#networkStatus{top:120px;max-width:calc(100% - 20px);white-space:normal;text-align:center}
#combatDebug{top:150px;left:8px;right:8px;max-height:calc(100% - 155px);overflow:hidden}
#game[data-layout="portrait"] #arena{top:132px;bottom:auto;height:max(0px,calc(100% - var(--control-deck,184px) - 142px))}
#game[data-layout="portrait"] #faceoff{grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);gap:6px;padding-inline:10px}
#game[data-layout="portrait"] #combo,#game[data-layout="portrait"] #enemyCombo{top:34%;font-size:17px}
#game[data-layout="landscape"] #combatControls{background:linear-gradient(0deg,#080b1260,transparent)}
#game[data-layout="landscape"] #inputHistory{bottom:10px;max-width:35%}
@media(max-height:400px){
 #opening .opening-story{display:none}
 #hud{top:4px;left:6px;right:6px}
 #hud .health-track{height:8px;margin-top:3px}#hud .health small{display:none}
 #hud .timer strong{font-size:24px}#hud .health,#hud .timer{padding:3px 5px}
 .battle-tools{top:61px}.battle-tools button,#debugToggle{height:28px}
 #practiceHud,#networkStatus{top:95px;font-size:10px}
 #combatDebug{top:120px;max-height:calc(100% - 125px);font-size:9px}
 #specialAttack b{font-size:18px}
}