/* Touch layout: portrait keeps controls beneath the image; landscape overlays the safe margins. */
.arena{aspect-ratio:auto}.battle-screen{position:relative;aspect-ratio:16/9;overflow:hidden}
.touch-controls{display:none!important}.mobile-guide{display:none}
.touch-mode .touch-controls{display:flex!important;position:relative;justify-content:space-between;align-items:center;margin:0;padding:14px 20px 18px;gap:15px;background:linear-gradient(#0d192b,#0a1423);min-height:214px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.touch-mode .battle-bottom p{display:none}.touch-mode .battle-bottom{justify-content:flex-end;margin-top:5px}
.touch-mode .mobile-guide{display:block;color:#8ca4bb;font-size:10px;line-height:1.8;padding:5px 2px}
.mobile-guide>span{color:var(--cyan);margin-right:6px}.mobile-guide button{margin-left:10px;font-size:10px}
.stick-area{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none;width:150px}
.joystick{width:140px;height:140px;display:grid;place-items:center;touch-action:none;border-radius:50%;cursor:grab;outline-offset:1px}
.joystick.engaged{cursor:grabbing}.stick-track{position:relative;width:128px;height:128px;border-radius:50%;border:1px solid #6b9bb54d;background:radial-gradient(circle,#23405880,#0d1d3080 65%);box-shadow:inset 0 0 25px #0003,0 0 0 6px #7be8fa07;pointer-events:none}
.stick-inner{position:absolute;inset:24px;border:1px dashed #76b2c22a;border-radius:50%}
.stick-arrow{position:absolute;color:#7397ab;font:15px monospace;line-height:18px}.stick-arrow.north{left:56px;top:5px}.stick-arrow.south{left:56px;bottom:5px}.stick-arrow.west{left:7px;top:54px}.stick-arrow.east{right:7px;top:54px}
.stick-knob{position:absolute;left:39px;top:39px;width:48px;height:48px;border-radius:50%;border:1px solid #92d5de80;background:radial-gradient(circle at 35% 25%,#49788b,#1e3d53);display:grid;place-items:center;box-shadow:0 5px 12px #0006;will-change:transform}.stick-knob span{color:#9cdfe9;font-size:20px;opacity:.7}
.engaged .stick-knob{border-color:var(--cyan);background:radial-gradient(circle at 35% 25%,#63a0ad,#28556c)}.stick-label{color:#93b4c5;font-size:9px;white-space:nowrap;line-height:16px}
.touch-mode .touch-actions{position:relative;display:block;flex:none;width:184px;height:184px}
.touch-mode .touch-actions button,.touch-mode .touch-actions button:nth-last-child(2),.touch-mode .touch-actions button:last-child{position:absolute;width:58px;height:58px;border-radius:50%;background:linear-gradient(145deg,#273d56cf,#122539dd);color:#d5e4ed;border:1px solid #60849b88;box-shadow:0 4px 12px #0004;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:none;user-select:none;padding:0}
.touch-actions button span{font:bold 22px var(--font);line-height:24px}.touch-actions button small{font-size:8px;font-weight:400;color:#9cb6c9}
.touch-mode .touch-actions .touch-x{left:63px;top:0}
.touch-mode .touch-actions .touch-a{left:126px;top:63px}
.touch-mode .touch-actions .touch-b{left:63px;top:126px;background:linear-gradient(145deg,#39687bcc,#173d50ee);border-color:#8be6ec99;color:#a5f2ff}
.touch-mode .touch-actions .touch-y{left:0;top:63px}
.touch-mode .touch-actions button.pressed,.touch-mode .touch-actions button.gamepad-pressed,.touch-mode .touch-actions button.fired{background:#5797b7;border-color:#fff;box-shadow:0 0 0 3px #d2ffffcc,0 0 18px 7px #67e8ffc9,inset 0 0 14px #e5ffff88;transform:scale(.92);color:#fff}
.touch-help{display:none}.touch-mode .touch-help{display:block;margin:15px 0;padding:14px;border:1px solid #7be8fa33;border-radius:10px;background:#7be8fa08}.touch-help strong{color:var(--cyan);font-size:14px}.touch-mode .keyboard-help,.touch-mode .control-table{display:none}
.arena:fullscreen .battle-screen{height:100%;aspect-ratio:auto}.arena:fullscreen canvas{object-fit:contain}
.touch-mode .arena:fullscreen .touch-controls{position:absolute;inset:auto 0 8px;background:transparent;pointer-events:none}
.touch-mode .arena:fullscreen .joystick,.touch-mode .arena:fullscreen .touch-actions button{pointer-events:auto}
.touch-mode .arena:fullscreen .stick-label{text-shadow:0 1px 5px #000}
@media(max-width:680px){
  .top-actions{gap:9px}.top-actions [data-control-toggle]{font-size:8px}.top-actions #sound-button span{display:none}.top-actions #sound-button{font-size:15px}.top-actions #help-button{font-size:9px}
  .touch-mode .battle{padding:10px 2% 20px}.touch-mode .battle-location{display:none}.touch-mode .battle-toolbar{gap:10px}.touch-mode .battle-toolbar>div:last-child{gap:14px}
  .touch-mode .touch-controls{padding:12px 8px 16px;gap:0}.stick-area{width:143px}.touch-mode .mobile-guide{font-size:9px}
  .touch-mode .battle-bottom{display:none}.touch-mode .training-panel{font-size:9px;padding:9px;gap:9px}.touch-mode .training-panel .text-button{font-size:9px}
  .touch-mode .banner{font-size:clamp(20px,6vw,65px);letter-spacing:2px}
}
@media(max-width:360px){.stick-area{width:128px}.joystick{width:124px;height:124px}.stick-track{transform:scale(.88)}.touch-mode .touch-actions{transform:scale(.86);transform-origin:right center;width:159px}}
@media(orientation:landscape){
  .touch-mode.playing{overscroll-behavior:none}.touch-mode.playing>.topbar,.touch-mode.playing>footer{display:none}
  .touch-mode.playing .battle{height:100dvh;max-width:none;padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:0}
  .touch-mode .battle-toolbar{height:40px;min-height:40px;margin:0;padding:0 4px;font-size:10px}.touch-mode .battle-toolbar button{min-height:36px;font-size:10px}
  .touch-mode .battle-toolbar>div:last-child{gap:15px}.touch-mode .battle-location{display:block}
  .touch-mode .arena{flex:1;min-height:0;width:100%;margin:0;max-height:none;border-radius:7px}
  .touch-mode .battle-screen{height:100%;aspect-ratio:auto}.touch-mode .battle-screen>canvas{width:100%;height:100%;object-fit:contain}
  .touch-mode .touch-controls{position:absolute;inset:auto 0 8px;background:transparent;pointer-events:none;min-height:184px;padding:0 12px}
  .touch-mode .joystick,.touch-mode .touch-actions button{pointer-events:auto}
  .touch-mode .stick-label{text-shadow:0 1px 5px #000}
  .touch-mode .hud-player{min-width:105px;gap:6px}.touch-mode .hud-avatar{width:29px;height:29px}.touch-mode .hud-name{font-size:8px}.touch-mode .percent{font-size:24px}.touch-mode .percent small{font-size:12px}.touch-mode .recovery-state{font-size:7px}
  .touch-mode .arena-top{inset:9px 16px auto}.touch-mode .arena-label{font-size:7px;letter-spacing:1px;width:120px}.touch-mode .timer{font-size:17px}
  .touch-mode .battle-bottom,.touch-mode .mobile-guide{display:none}
  .touch-mode .training-panel{margin:4px 0;font-size:8px;gap:10px;padding:3px 8px;flex:none}.touch-mode .training-panel .recovery-tip{display:none}.touch-mode .training-panel .text-button{padding:4px 0;font-size:9px}.touch-mode .training-panel input[type=number]{width:50px;padding:2px 5px}.touch-mode .training-panel input[type=checkbox]{margin:0}
  .touch-mode .overlay{z-index:5}.touch-mode .overlay-card{padding:14px;max-width:300px}.touch-mode .overlay-card h2{font-size:23px;margin:8px 0}.touch-mode .overlay-card p{font-size:10px;margin:8px 0 12px}.touch-mode .overlay-card .start-button{padding:11px}.touch-mode .overlay-card .eyebrow{font-size:8px}.touch-mode .overlay-card .secondary-button{padding:8px}.touch-mode .overlay-card .text-button{margin-top:4px;padding:6px}
}

.pace-badge{display:inline-block;color:#7be8fa;font-size:9px;border:1px solid #7be8fa33;border-radius:3px;padding:2px 5px;margin-left:8px}
.joystick.recovery-ready .stick-track{border-color:#7be8fa99;box-shadow:inset 0 0 25px #0003,0 0 12px #7be8fa22}.joystick.recovery-ready .stick-arrow.north{color:#bffaff;text-shadow:0 0 8px #7be8fa}.joystick.recovery-ready+.stick-label{color:#b3edf2}
.action-area{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none;width:184px}
.action-area .stick-label{width:210px;max-width:calc(100vw - 150px);min-height:24px;padding:4px 7px;text-align:center;white-space:normal;font-size:11px;font-weight:700;line-height:16px;color:#dcfaff;background:#071629e8;border:1px solid #7be8fa44;border-radius:6px;pointer-events:none}
.control-settings{display:flex;flex-direction:column;gap:9px;margin-bottom:16px;color:#9db4cc;font-size:11px}.control-settings select{margin-left:8px}.control-settings small{font-size:10px;color:#8eb9cd}
.battle-toolbar select{max-width:110px;font-size:10px;padding:4px 7px}.gamepad-help{color:#8fdfff!important}
body[data-control-layout=xbox] .touch-actions button[data-label=A]{color:#a5ffa8}
body[data-control-layout=xbox] .touch-actions button[data-label=B]{color:#ff9b9b}
body[data-control-layout=xbox] .touch-actions button[data-label=X]{color:#8accff}
body[data-control-layout=xbox] .touch-actions button[data-label=Y]{color:#ffec94}
@media(orientation:landscape){.touch-mode .touch-controls{align-items:flex-end}.touch-mode .battle-toolbar>div:last-child{gap:12px}.touch-mode .battle-location{font-size:9px}.action-area .stick-label{font-size:10px}.touch-mode .stick-area{padding-bottom:15px}}
@media(max-width:680px){.battle-toolbar select{max-width:90px;font-size:9px}.touch-mode .battle-location{display:none}}
.touch-mode .ultimate-meter{width:100px;height:6px}.touch-mode .ultimate-status{font-size:8px;line-height:11px}
@media(orientation:landscape){.touch-mode .ultimate-meter{width:92px;height:5px;margin-top:2px}.touch-mode .ultimate-status{font-size:7px;line-height:9px;margin-top:2px}}

/* Reserve a separate strip for damage, stocks and energy outside the playfield. */
.arena{--hud-height:78px;display:flex;flex-direction:column}
.arena .battle-screen{flex:none}
.arena .hud,.arena:fullscreen .hud{position:relative;inset:auto;flex:none;min-height:var(--hud-height);margin:0;padding:7px 10px;gap:12px;justify-content:center;background:#0a1524;border-top:1px solid #40576e;pointer-events:none}
.arena .hud-player{flex:1;min-width:0;max-width:270px;gap:7px;filter:none;align-items:center}
.arena .hud-avatar{flex:none;width:32px;height:38px;border-radius:5px}
.arena .hud-body{flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:14px 24px 12px 12px;column-gap:7px}
.arena .hud-name{grid-column:1/-1;font-size:10px;gap:5px;min-width:0;line-height:14px}
.arena .hud-name b{flex:none;font-size:8px;padding:1px 3px}
.arena .hud-name span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.arena .percent{grid-column:1;grid-row:2/4;font-size:28px;line-height:34px;align-self:center}
.arena .percent small{font-size:12px}
.arena .stocks{grid-column:2;grid-row:2;align-self:start;gap:4px;margin:3px 0 0}
.arena .stocks i{width:5px;height:5px}
.arena .ultimate-meter{grid-column:2;grid-row:2;align-self:end;width:100%;height:5px;margin:0 0 2px}
.arena .ultimate-status{grid-column:2;grid-row:3;font-size:8px;line-height:12px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arena .recovery-state{grid-column:1/-1;grid-row:4;font-size:8px;line-height:12px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arena:fullscreen .battle-screen{flex:1;min-height:0;height:auto;aspect-ratio:auto}
.touch-mode .arena:fullscreen .touch-controls{bottom:calc(var(--hud-height) + 8px)}
@media(orientation:landscape){
  .touch-mode .battle-screen{flex:1;min-height:0;height:auto}
  .touch-mode .touch-controls{bottom:calc(var(--hud-height) + 8px)}
}
@media(max-width:360px){
  .arena .hud,.arena:fullscreen .hud{padding-left:6px;padding-right:6px;gap:8px}
  .arena .hud-avatar{width:25px;height:32px}.arena .hud-player{gap:5px}
  .arena .hud-body{column-gap:5px}.arena .hud-name{font-size:9px}.arena .percent{font-size:25px}
}

/* Keep the dedicated strip visible on laptop screens as well as phones. */
.playing:not(.touch-mode)>.topbar,.playing:not(.touch-mode)>footer{display:none}
.playing:not(.touch-mode) .battle{height:100dvh;padding:8px 2%;display:flex;flex-direction:column}
.playing:not(.touch-mode) .battle-toolbar,.playing:not(.touch-mode) .training-panel,.playing:not(.touch-mode) .battle-bottom{flex:none}
.playing:not(.touch-mode) .arena{flex:1;min-height:0;max-height:none;width:100%;margin:0}
.playing:not(.touch-mode) .battle-screen{flex:1;min-height:0;height:auto;aspect-ratio:auto}
.playing:not(.touch-mode) .training-panel{margin-top:6px;gap:12px;padding:5px 10px}
.playing:not(.touch-mode) .training-panel .recovery-tip{display:none}
.playing:not(.touch-mode) .training-panel .text-button{padding:4px 0}
.battle-screen>canvas{object-fit:contain}
@media(orientation:landscape) and (max-height:500px){
  .touch-mode .touch-controls{min-height:168px}
  .touch-mode .action-area{width:148px;gap:6px}
  .touch-mode .action-area .stick-label{width:184px;line-height:14px}
  .touch-mode .touch-actions{width:148px;height:148px}
  .touch-mode .touch-actions button,.touch-mode .touch-actions button:nth-last-child(2),.touch-mode .touch-actions button:last-child{width:48px;height:48px}
  .touch-mode .touch-actions .touch-x{left:50px;top:0}.touch-mode .touch-actions .touch-a{left:100px;top:50px}
  .touch-mode .touch-actions .touch-b{left:50px;top:100px}.touch-mode .touch-actions .touch-y{left:0;top:50px}
}