/* Landscape defaults. Inline composition from the visual editor takes precedence. */
@media (orientation: landscape) and (max-height: 500px) {
  .shell:has(#gameScreen:not([hidden])) {
    padding: max(0px, env(safe-area-inset-top)) max(0px, env(safe-area-inset-right))
      max(0px, env(safe-area-inset-bottom)) max(0px, env(safe-area-inset-left));
  }
  #gameScreen .world-wrap { border: 0; box-shadow: none; }
  #gameScreen .world-footer {
    position: absolute; inset: 0; display: block; padding: 0;
    border: 0; background: transparent; pointer-events: none;
  }
  #gameScreen .mobile-controls {
    position: absolute; left: 12px; right: 12px; bottom: 8px;
    display: flex; align-items: end; justify-content: space-between;
    min-height: 0; padding: 0; background: transparent; pointer-events: none;
  }
  #gameScreen .mobile-controls > * { pointer-events: auto; }
  #gameScreen .joystick { width: var(--ui-joystick-size); height: var(--ui-joystick-size); }
  #gameScreen .joystick-label { display: none; }
  #gameScreen .ability-hud {
    position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%);
    width: auto; max-width: 55%; padding: 0; background: transparent;
  }
  #gameScreen .game-dock {
    top: 8px; right: 8px; bottom: auto; left: auto;
    display: flex; flex-direction: row; gap: 4px; padding: 0; max-width: 75%; zoom: 1;
  }
  #gameScreen .dock-button { min-width: 44px; min-height: 44px; padding: 5px; }
  #gameScreen .chat-toggle { left: 8px; top: 48px; bottom: auto; min-width: 44px; min-height: 44px; zoom: 1; }
  #gameScreen .battle-stats { right: 12px; bottom: 120px; width: 180px; zoom: 1; }
  #gameScreen .battle-stats summary { min-height: 44px; box-sizing: border-box; }
  #gameScreen .battle-stats-content { max-height: 180px; overflow: auto; }
  #gameScreen :is(#gameDock, #chatToggle, #battleStats) { zoom: 1; }
  #gameScreen .chat-card {
    position: absolute; left: 50%; top: 12%; bottom: auto; transform: translateX(-50%);
    width: min(420px, 65%); height: 230px; min-height: 0; max-height: 80%;
    resize: none; z-index: 5;
  }
  #gameScreen .chat-card #messages { min-height: 0; }
  #gameScreen .chat-resize-handle { display: none; }
  #gameScreen .chat-card #chatForm { flex-shrink: 0; }
  #gameScreen .menu-overlay { inset: 0; width: auto; max-height: 100%; border-radius: 0; }
  #gameScreen #floatPanelClose {
    min-width: calc(44px / var(--ui-panel-scale, 1));
    min-height: calc(44px / var(--ui-panel-scale, 1));
  }
  #gameScreen .world-wrap:has(#menuOverlay:not([hidden])) :is(.mobile-controls, .ability-hud, #gameDock, #eventNoticeSidebar) {
    visibility: hidden; pointer-events: none;
  }
  #gameScreen .world-wrap:has(#menuOverlay:not([hidden])) .mobile-controls > * { pointer-events: none; }
  #gameScreen .winner-overlay { overflow: auto; max-height: 100%; }
  #gameScreen .skill-info-popup { top: 50%; max-height: 80vh; overflow: auto; }
}

.mobile-skill-cancel { display: none; }
@media (min-width: 721px) and (min-height: 501px) {
  #gameScreen #mobileSkillCancel:not([hidden]) {
    display: grid; place-items: center; position: absolute; z-index: 30;
    top: 8px; left: 50%; transform: translateX(-50%);
    min-width: 52px; min-height: 48px; padding: 2px 12px;
    color: var(--z-light-text); background: var(--z-wine-dark, #40252e);
    border: 3px solid var(--z-copper); font-size: 27px; touch-action: none;
    pointer-events: auto;
  }
  #gameScreen #mobileSkillCancel.cancel-target { outline: 4px solid #fff3c6; background: #9d3030; }
}
@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) {
  #gameScreen #mobileSkillCancel:not([hidden]) {
    display: grid; place-items: center; position: absolute; z-index: 30;
    top: 8px; left: 50%; transform: translateX(-50%);
    min-width: 52px; min-height: 48px; padding: 2px 12px;
    color: var(--z-light-text); background: var(--z-wine-dark, #40252e);
    border: 3px solid var(--z-copper); font-size: 27px; touch-action: none;
    pointer-events: auto;
  }
  #gameScreen #mobileSkillCancel.cancel-target { outline: 4px solid #fff3c6; background: #9d3030; }
  #gameScreen .aim-joystick.skill-armed { outline: 3px solid var(--z-light-text); }
  #gameScreen .aim-joystick.skill-unavailable { outline-style: dashed; filter: grayscale(.8); }
  .mobile-aim-skill { display: grid; place-items: center; position: absolute; inset: 0; font-size: 24px; pointer-events: none; }
  .mobile-aim-skill img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
}
@media (orientation: landscape) and (max-height: 500px) {
  /* Independent places reproduce the owner's arc and remain draggable in the HUD editor. */
  #gameScreen #mobileSkillCancel:not([hidden]) { left: 25%; }
  #gameScreen #abilityHud {
    position: absolute; inset: 0; width: 100%; max-width: none; height: 100%;
    transform: none; display: block; zoom: 1; padding: 0; pointer-events: none;
    --ui-ability-slot-size: 48px;
  }
  #gameScreen #abilityHud .ability-slots { display: contents; }
  #gameScreen #abilityHud .ability-slot-wrap { position: absolute; width: 48px; height: 48px; }
  #gameScreen #abilityHud .ability-slot-wrap > .ability-slot { width: 100%; height: 100%; }
  #gameScreen #abilityHud [data-skill-place="1"] { right: 142px; bottom: 36px; }
  #gameScreen #abilityHud [data-skill-place="2"] { right: 142px; bottom: 128px; }
  #gameScreen #abilityHud [data-skill-place="3"] { right: 66px; bottom: 152px; }
  #gameScreen #abilityHud [data-skill-place="4"] { right: 218px; bottom: 112px; }
  #gameScreen #abilityHud [data-skill-place="5"] { right: 282px; bottom: 68px; }
  #gameScreen #abilityHud [data-skill-place="6"] { right: 346px; bottom: 68px; }
  #gameScreen #abilityHud [data-skill-place="7"] { right: 346px; bottom: 160px; }
  #gameScreen #abilityHud [data-skill-place="8"] { right: 282px; bottom: 160px; }
  #gameScreen #abilityHud [data-dash] { position: absolute; right: 218px; bottom: 12px; width: 48px; height: 48px; }
  #gameScreen #abilityHud .energy-bar { position: absolute; left: 38%; bottom: 8px; width: min(22%, calc(62% - 274px)); max-width: none; }
  #gameScreen #abilityHud .energy-text { font-size: 14px; line-height: 16px; }
  #gameScreen #abilityHud .ability-actives { position: absolute; left: 38%; bottom: 45px; max-width: 24%; }
  #gameScreen .battle-stats { left: 130px; right: auto; bottom: 8px; width: min(140px, 18vw); }
}

#mobileOrientationNotice{position:fixed;inset:0;z-index:2147483000;background:#101419;display:grid;place-items:center;padding:24px;overflow:auto;}
#mobileOrientationNotice[hidden]{display:none;}
.orientation-card{width:100%;max-width:440px;text-align:center;display:grid;gap:20px;color:var(--text,#f4e4c0);}
.orientation-card h2,.orientation-card p{margin:0;}.orientation-card small{line-height:1.5;}
.mobile-orientation-blocked .shell{visibility:hidden;pointer-events:none;}

/* Keyboard changes only the chat's visible space, never the arena scale. */
.mobile-chat-typing .shell:has(#gameScreen:not([hidden])) { min-height: var(--chat-game-height); }
.mobile-chat-typing #chatCard { max-height: var(--chat-keyboard-height) !important; translate: var(--chat-keyboard-shift, none) !important; min-height: 0 !important; }
.mobile-chat-typing #messages { min-height: 0 !important; }
.mobile-chat-typing #chatForm { flex-shrink: 0; }

.mobile-chat-typing #gameScreen .world-wrap { width: var(--chat-frame-width) !important; }
.mobile-chat-typing #world { height: var(--chat-canvas-height) !important; min-height: var(--chat-canvas-height) !important; max-height: var(--chat-canvas-height) !important; }
@media (any-pointer: coarse) { #chatInput { font-size: max(var(--ui-chat-input-size, 18px), calc(16px / var(--ui-scale, 1))) !important; } }

/* Presentations cover gameplay navigation, including controls positioned by the editor. */
#gameScreen:has(#winnerOverlay:not([hidden])) :is(#gameDock, #dockRetractToggle, #eventNoticeSidebar, #menuOverlay) {
  visibility: hidden !important; pointer-events: none !important;
}
@media (orientation: landscape) and (max-height: 500px) {
  #gameScreen .game-view > #winnerOverlay {
    position: fixed; inset: 0; zoom: 1; z-index: 30000;
    box-sizing: border-box; max-height: none; overflow: hidden;
    padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); gap: 6px;
  }
  #winnerOverlay .winner-results, #winnerOverlay.is-intro .winner-results {
    flex: 1 1 0; min-height: 0; width: 100%; overflow: hidden;
    padding: 8px; box-sizing: border-box; align-items: center;
  }
  #winnerOverlay .team-results { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #winnerOverlay :is(.winner-actions, .battle-intro-progress, #winnerTitle) { flex-shrink: 0; }
  #winnerOverlay .battle-intro-progress { padding: 0 8px; }
}