/* 05-mobile.css: mobile and narrow-screen defaults.
   Mobile variables are in group 5 of 00-variables.css. Later responsive files may override these rules. */

/* ===================================================================
   UP TO 560 px: SHOP TABS
   =================================================================== */
@media (max-width: 560px) { .shop-categories { grid-template-columns: var(--ui-shop-tabs-columns-mobile); } }

/* ===================================================================
   UP TO 600 px: MATCH RESULTS
   =================================================================== */
@media (max-width: 600px) {
  .kill-rank-list li { display: flex; flex-wrap: wrap; gap: 4px 6px; }
  .kill-rank-name { flex: 1 1 100px; }
  .winner-results { width: 100%; }
  .podium { gap: 5px; }
  /* Editor podium sizes multiplied by mobile scale (Game settings > Result screen). */
  .podium-player { --podium-portrait-size: calc(var(--result-podium-size-3, 220px) * var(--result-mobile-podium-scale, .45)); min-width: 0; padding: 0; }
  .podium-player.rank-1 { --podium-portrait-size: calc(var(--result-podium-size-1, 266px) * var(--result-mobile-podium-scale, .45)); }
  .podium-player.rank-2 { --podium-portrait-size: calc(var(--result-podium-size-2, 244px) * var(--result-mobile-podium-scale, .45)); }
  #gameScreen .world-wrap canvas.podium-skin { width: calc(80px * var(--result-mobile-podium-scale, .5)); height: calc(80px * var(--result-mobile-podium-scale, .5)); }
  /* Results cover the mobile screen because the map area is too small and battle controls are unused. */
  .winner-overlay { position: fixed; inset: 0; z-index: 40; }
  /* Team results use one row per team, with up to five cards side by side. */
  .winner-overlay.layout-teams { gap: 10px; padding: 14px 8px; }
  .team-results { gap: 6px; }
  .team-result-row h3 { margin-bottom: 6px; font-size: 18px; }
  .team-result-cards { gap: 10px 6px; }
  /* The editor's card times its phone scale. */
  .team-result-card { --result-phone-card: calc(var(--result-card-width, 150px) * var(--result-mobile-card-scale, .87));
    flex: 0 1 var(--result-phone-card); width: var(--result-phone-card); min-width: 0; max-width: var(--result-phone-card); padding: 0; }
  .team-result-square { width: 100%; height: calc(var(--result-portrait-height, 150px) * var(--result-mobile-card-scale, .87)); }
  .team-result-skin { width: calc(var(--result-phone-card) * var(--result-skin-zoom, var(--ui-team-result-skin-zoom))); }
}

/* ===================================================================
   UP TO 800 px AND 720 px: SCREENS, CHAT, AND JOYSTICKS
   =================================================================== */
@media (max-width: 800px) {
  .game-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .types {
    grid-template-columns: 1fr;
  }

  .shop-items {
    grid-template-columns: var(--ui-shop-columns-compact);
  }
}

@media (max-width: 720px), (orientation: landscape) and (max-height: 500px) {
  .shell {
    padding: 16px 10px;
  }

  .panel {
    margin: 20px auto;
    padding: 24px 18px;
  }

  .sidebar {
    display: flex;
  }

  .join-box {
    display: grid;
  }

  .brand {
    font-size: 18px;
  }

  .chat-card {
    height: 150px;
  }

  .mobile-controls {
    position: static;
    min-height: 124px;
    padding: 0 2px;
    display: flex;
    align-items: end;
    justify-content: space-between;
  }

  /* Several fingers at once (joysticks + skill): no browser zoom, text
     selection or long-press menu on the controls. */
  .mobile-controls, .mobile-ability, .ability-hud, .ability-slot {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  .joystick-group {
    display: grid;
    justify-items: center;
    gap: 5px;
    pointer-events: auto;
  }

  .joystick-label {
    color: #fff6dc;
    font: 18px var(--ui-game-font);
    text-shadow: 2px 2px var(--ink);
  }

  .joystick {
    position: relative;
    width: var(--ui-joystick-size);
    height: var(--ui-joystick-size);
    box-sizing: border-box;
    border: 3px solid #101419;
    border-radius: 50%;
    background: var(--ui-joystick-background);
    box-shadow: inset 0 0 0 3px #f7efd84d, 3px 3px 0 #10141999;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .aim-joystick { background: var(--ui-aim-joystick-background); }

  .joystick-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--ui-joystick-knob-size);
    height: var(--ui-joystick-knob-size);
    border: 3px solid var(--ink);
    border-radius: 50%;
    background: var(--ui-mobile-joystick-knob-background);
    box-shadow: 2px 2px 0 #101419;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .aim-joystick .joystick-knob { background: var(--ui-mobile-aim-knob-background); }

  .joystick.active { filter: brightness(1.15); }
}

/* ===================================================================
   UP TO 720 px: MOBILE GAME SCREEN
   Chat and controls below the canvas; panels slide up from the bottom.
   =================================================================== */
@media (max-width: 720px) {
  .lobby-hud { --lobby-requested-right: var(--ui-mobile-lobby-right); top: var(--ui-mobile-lobby-top); gap: var(--ui-mobile-lobby-gap); padding: var(--ui-mobile-lobby-padding); }
  .lobby-ready-count { font-size: var(--ui-mobile-lobby-count-size); }
  .lobby-hud button { padding: 6px; font-size: var(--ui-mobile-lobby-button-size); }
  .shell:has(#gameScreen:not([hidden])) { padding: var(--ui-mobile-shell-padding); }
  #gameScreen .world-wrap { border-width: 0; }
  #gameScreen .world-footer {
    position: static;
    inset: auto;
    z-index: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-top: 5px solid var(--ink);
    pointer-events: auto;
  }
  #gameScreen .chat-card {
    order: 1;
    position: static;
    width: 100%;
    height: var(--ui-mobile-chat-height);
    /* Never size chat from the full message history. */
    min-height: calc(var(--ui-mobile-chat-history-min-height) + 100px);
    max-width: none;
    max-height: none;
    resize: none;
    flex-shrink: 0;
    margin: 0;
    border: var(--ui-mobile-chat-border);
    border-radius: 0;
    box-shadow: none;
    background: var(--ui-mobile-chat-background);
    color: var(--ui-mobile-chat-color);
  }
  .chat-resize-handle { display: none; }
  #gameScreen .chat-card #messages { min-height: var(--ui-mobile-chat-history-min-height); }
  #gameScreen .chat-card #messages,
  #gameScreen .chat-card .section-title b { color: var(--ui-mobile-chat-color); }
  #gameScreen .chat-card .system { color: var(--ui-mobile-chat-system-color); }
  #gameScreen .chat-card .message .chat-name { color: var(--ui-mobile-chat-name-color); }
  #gameScreen .chat-card .message.own .chat-name { color: var(--ui-mobile-chat-own-name-color); }
  #gameScreen .chat-card .message.kill { color: var(--ui-mobile-chat-kill-color); }
  #gameScreen .mobile-controls {
    order: 2;
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    min-height: var(--ui-mobile-controls-height);
    padding: 8px 16px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ui-mobile-controls-background);
  }
  .chat-toggle { left: 1.5%; bottom: 1.5%; }
  .world-wrap:has(.menu-overlay:not([hidden])) .chat-toggle { display: none; }
  /* The panel rises above chat and controls, just below the dock. */
  .menu-overlay { top: var(--mobile-sheet-top, 45%); right: 0; bottom: 0; left: 0; width: auto; max-height: none; border-width: 3px 0 0; border-radius: 16px 16px 0 0; }
  .game-dock { right: 2%; bottom: 2%; gap: 4px; padding: 4px; border-radius: 12px; }
  /* Arena order: game world, skill bar, joysticks, then chat. */
  #gameScreen .ability-hud { position: static; left: auto; bottom: auto; transform: none; order: 0; justify-content: center; padding: var(--ui-mobile-ability-padding); background: var(--ui-mobile-controls-background); --ui-ability-slot-size: var(--ui-mobile-ability-slot-size); }
  #gameScreen .ability-hud { width: auto; align-items: center; }
  #gameScreen .battle-stats { top: auto; right: 8px; bottom: calc(var(--ui-dock-bottom) + 64px); width: 160px; max-width: 48%; font-size: 12px; }
  /* Center skill information in the game window. */
  #gameScreen .skill-info-popup { position: fixed; top: 40%; bottom: auto; width: min(92vw, 380px); transform: translate(-50%, -50%); }
  #gameScreen .energy-bar { width: min(100%, 240px); }
  #gameScreen[data-phase="battle"] .mobile-controls { order: 1; }
  /* Mobile spectating replaces the skill button between joysticks with the follow selector.
   Its player list opens upward. */
  #gameScreen .mobile-controls .spectator-follow { position: relative; left: auto; top: auto; transform: none; align-self: center; max-width: 60%; }
  #gameScreen .mobile-controls .spectator-follow-menu { top: auto; bottom: calc(100% + 6px); max-height: 180px; }
  #gameScreen[data-phase="battle"] .chat-card { order: 2; }
  .dock-button { min-width: 44px; padding: 7px 8px; }
  .dock-label { display: none; }
  .menu-content { padding: var(--ui-mobile-menu-content-padding); }
  .menu-content .types { grid-template-columns: 1fr; }
  .menu-content .join-box { display: grid; }
  .menu-content .actions > button { flex: 1 1 145px; white-space: normal; }
}

/* ===================================================================
   UP TO 380 px: SMALLER JOYSTICKS
   =================================================================== */
@media (max-width: 380px) { #gameScreen .joystick { width: var(--ui-mobile-joystick-size-narrow); height: var(--ui-mobile-joystick-size-narrow); } }

/* On mobile, class skin previews appear above their information. */
@media (max-width: 720px) { .class-skin-preview { grid-template-columns: minmax(0, 1fr); } }
/* Training on small screens: the coach spans the width, the intro's characters stack. */
@media (max-width: 720px) {
  .training-modes { grid-template-columns: minmax(0, 1fr); }
  .training-coach { top: 62px; left: var(--ui-ping-left); width: auto; font-size: 14px; }
  .tutorial-intro-classes { grid-template-columns: minmax(0, 1fr); }
  .tutorial-intro-class { grid-template-columns: 72px minmax(0, 1fr); justify-items: start; text-align: left; }
  .tutorial-intro-class canvas { grid-row: 1 / 4; width: 60px; height: 60px; }
  .tutorial-intro-stats { grid-column: 2; }
}
/* The event notices give way to the tutorial on small screens (they would cover it). */
@media (max-width: 900px) {
  body:is(.tutorial-intro-open, .training-guided) #gameScreen .world-wrap > #eventNoticeSidebar { display: none; }
}