/* Mobile menus only. Loaded after style.css; combat control geometry stays there.
   VisualViewport variables are maintained by app.js for keyboards/browser chrome. */
body.touch-mode {
  --mobile-menu-top: 56px;
  --mobile-menu-height: max(0px, calc(var(--mobile-viewport-height, 100dvh) - var(--mobile-safe-top) - var(--mobile-safe-bottom)));
}
.touch-mode:not(.in-game) .topbar {
  position: fixed; top: calc(var(--mobile-viewport-top, 0px) + var(--mobile-safe-top));
  left: 0; right: 0; height: var(--mobile-menu-top);
  padding: 0 calc(var(--mobile-safe-right) + 12px) 0 calc(var(--mobile-safe-left) + 12px);
  gap: 8px; background: #10151bf2;
}
.touch-mode:not(.in-game) .brand { display: none; }
.touch-mode:not(.in-game) .brand-mark { width: 24px; gap: 3px; }
.touch-mode:not(.in-game) .brand-mark i { width: 5px; }
.touch-mode:not(.in-game) .brand small { font-size: 6px; letter-spacing: 1px; }
.touch-mode:not(.in-game) .top-nav { display: flex; margin: 0 52px 0 auto; gap: 4px; height: 44px; flex-shrink: 0; }
.touch-mode:not(.in-game) .top-nav > :not(#settings-top):not(#controls-top) { display: none; }
.touch-mode:not(.in-game) .top-nav #settings-top,
.touch-mode:not(.in-game) .top-nav #controls-top { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 11px; letter-spacing: 0; }
.touch-mode:not(.in-game) .connection { display: flex; flex-wrap: wrap; gap: 4px; position: absolute; top: 6px; bottom: 6px; left: calc(var(--mobile-safe-left) + 12px); align-content: center; margin: 0; width: max(0px, calc(100% - var(--mobile-safe-left) - var(--mobile-safe-right) - 176px)); font-size: 9px; }
.touch-mode:not(.in-game) #connection-label { min-width: 0; max-width: calc(100% - 9px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.touch-mode:not(.in-game) #latency { margin-left: 0; flex-shrink: 0; }
.touch-mode:not(.in-game) .mobile-chat-open { top: calc(var(--mobile-viewport-top, 0px) + var(--mobile-safe-top) + 6px); right: calc(var(--mobile-safe-right) + 12px); }
.touch-mode .welcome {
  top: calc(var(--mobile-viewport-top, 0px) + var(--mobile-safe-top) + var(--mobile-menu-top)); bottom: auto;
  height: max(0px, calc(var(--mobile-menu-height) - var(--mobile-menu-top)));
  padding: 12px calc(var(--mobile-safe-right) + 16px) 24px calc(var(--mobile-safe-left) + 16px);
  overflow-x: hidden; scroll-padding-block: 16px; -webkit-overflow-scrolling: touch;
}
.touch-mode .intro { min-width: 0; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 16px; }
.touch-mode .intro > *, .touch-mode .entry-card { min-width: 0; max-width: 100%; }
.touch-mode .intro h1 { font-size: clamp(38px, 7vw, 64px); overflow-wrap: anywhere; }
.touch-mode .intro .eyebrow { flex-wrap: wrap; }
.touch-mode #connect-form { padding: 14px 12px; }
.touch-mode .entry-tabs > button { min-width: 0; padding: 0 12px; }
.touch-mode .form-note { flex-wrap: wrap; line-height: 1.6; }
.touch-mode .welcome input { scroll-margin-block: 16px; }
.touch-mode .room-panel {
  top: calc(var(--mobile-viewport-top, 0px) + var(--mobile-safe-top) + var(--mobile-menu-top)); bottom: auto;
  height: max(0px, calc(var(--mobile-menu-height) - var(--mobile-menu-top) - 8px));
  max-width: 600px; overflow-x: hidden; scroll-padding-block: 12px; -webkit-overflow-scrolling: touch;
}
.touch-mode.in-game .room-panel { --mobile-menu-top: 64px; }
.touch-mode .room-panel :is(p, small, label, strong) { overflow-wrap: anywhere; }
.touch-mode .room-panel select { min-width: 0; max-width: 100%; font-size: 16px; }
.touch-mode .room-panel .panel-eyebrow { position: sticky; top: -16px; z-index: 1; background: #111923; padding-block: 4px; }
.touch-mode .room-panel .bot-remove { min-width: 44px; min-height: 44px; }
.touch-mode .room-panel .card-settings > label { min-height: 44px; flex-wrap: wrap; }
.touch-mode .room-panel .primary-button { padding-block: 10px; height: auto; }
.touch-mode .room-panel .slot { gap: 6px; }
.touch-mode .room-panel .slot-badge { max-width: 68px; overflow-wrap: anywhere; }
/* Put every overlay in the actual visible area, including a raised keyboard. */
.touch-mode dialog {
  position: fixed; inset: auto; top: calc(var(--mobile-viewport-top, 0px) + var(--mobile-safe-top) + 12px);
  left: calc(var(--mobile-safe-left) + 12px); right: calc(var(--mobile-safe-right) + 12px);
  margin: 0 auto; width: auto; max-width: 580px; min-width: 0;
  max-height: max(0px, calc(var(--mobile-menu-height) - 24px)); overflow-x: hidden;
  padding: 16px; scroll-padding-block: 52px 16px;
}
.touch-mode dialog .dialog-close { position: sticky; float: right; top: 0; right: auto; z-index: 2; margin: -8px -8px 0 8px; width: 44px; height: 44px; border-radius: 8px; background: #182a36; }
.touch-mode dialog > .eyebrow { min-height: 36px; letter-spacing: 1px; }
.touch-mode dialog :is(fieldset, label, select, input) { min-width: 0; }
.touch-mode dialog :is(p, small, legend) { overflow-wrap: anywhere; }
.touch-mode .guide-grid { grid-template-columns: 1fr; gap: 12px; margin: 16px 0; }
.touch-mode .guide-grid article { display: block; }
.touch-mode .guide-grid p { font-size: 12px; margin: 4px 0; }
.touch-mode .guide-grid h3 { margin: 0; }
.touch-mode .mobile-guide-note { font-size: 12px; line-height: 1.9; }
.touch-mode .invert-setting { min-height: 44px; }
.touch-mode .audio-settings { padding: 12px 8px; }
.touch-mode .audio-settings > div { grid-template-columns: 54px minmax(0, 1fr) 32px 44px; gap: 4px; }
.touch-mode .settings-actions { flex-wrap: wrap; }
.touch-mode .settings-actions button { min-height: 44px; height: auto; }
.touch-mode .card-picker {
  inset: auto; top: calc(var(--mobile-viewport-top, 0px) + var(--mobile-safe-top));
  left: var(--mobile-safe-left); right: var(--mobile-safe-right); height: var(--mobile-menu-height);
  padding: 12px; overflow: hidden;
}
.touch-mode .card-picker-panel { min-width: 0; max-height: 100%; padding: 16px; overflow-x: hidden; scroll-padding-block: 72px 16px; }
.touch-mode .card-picker-heading { position: sticky; top: -16px; z-index: 1; background: #101d28; padding-block: 8px; gap: 8px; }
.touch-mode .card-picker-heading h2 { min-width: 0; font-size: 19px; }
.touch-mode .card-picker-heading button { flex-shrink: 0; max-width: 144px; }
.touch-mode .card-options { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.touch-mode .card-options article { min-width: 0; overflow-wrap: anywhere; }
.touch-mode .card-options button { min-height: 44px; }
.touch-mode .end-panel, .touch-mode .end-panel.ffa-result {
  top: calc(var(--mobile-viewport-top, 0px) + var(--mobile-safe-top) + 12px);
  left: calc(var(--mobile-safe-left) + 12px); right: calc(var(--mobile-safe-right) + 12px);
  bottom: auto; transform: none; margin: 0 auto; width: auto; max-width: 420px;
  max-height: max(0px, calc(var(--mobile-menu-height) - 24px)); padding: 20px;
  overflow-x: hidden; scroll-padding-block: 12px;
}
.touch-mode .end-panel h2 { font-size: 34px; overflow-wrap: anywhere; }
.touch-mode .end-panel .secondary-button { min-height: 44px; height: auto; padding-block: 10px; }
.touch-mode .room-chat.is-composing { min-height: 0; overflow: hidden; }
.touch-mode .room-chat.is-composing #chat-body { flex: 0 1 auto; min-height: 0; }
.touch-mode .chat-heading { position: sticky; top: -8px; z-index: 1; background: #0c1b26; }
.touch-mode .chat-heading label { min-width: 0; flex-wrap: wrap; }
.touch-mode .chat-heading select { min-width: 0; max-width: 100%; }
.touch-mode .chat-compose input { min-width: 0; scroll-margin-block: 12px; }
.touch-mode .chat-message, .touch-mode #chat-status { overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .touch-mode .intro { display: block; padding-top: 0; }
  .touch-mode .intro h1 { font-size: clamp(38px, 12vw, 56px); margin: 12px 0; }
  .touch-mode .intro .entry-card { width: 100%; }
  .touch-mode .mobile-assist-setting { grid-template-columns: minmax(0, 1fr); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .touch-mode .intro h1 { font-size: clamp(36px, 7vw, 52px); margin: 10px 0; }
  .touch-mode .intro > .eyebrow { font-size: 8px; letter-spacing: 0; }
  .touch-mode .room-panel { max-width: 760px; }
  .touch-mode .room-panel h2 { margin-block: 8px; }
  .touch-mode .card-options { grid-template-columns: 1fr; }
  .touch-mode .card-options article { padding: 12px; }
  .touch-mode .card-options p { margin: 8px 0; }
}

/* Compact menu chrome in both orientations; never apply this to arena HUD/camera. */
.touch-mode .intro { display: block; padding-top: 0; max-width: 600px; }
.touch-mode .intro > .eyebrow,
.touch-mode .intro-copy,
.touch-mode .intro-foot,
.touch-mode .room-panel > .muted { display: none; }
.touch-mode .intro h1,
.touch-mode .room-panel > h2 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.touch-mode .intro .entry-card { width: 100%; }
.touch-mode .entry-tabs { min-height: 44px; }
.touch-mode .room-panel { padding-top: 8px; }
.touch-mode .room-panel .panel-eyebrow { top: -8px; min-height: 44px; padding-block: 0; letter-spacing: .8px; }
.touch-mode .room-panel .room-code { min-height: 44px; padding: 4px 10px; margin-block: 8px; }
.touch-mode .room-panel .room-code > span:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.touch-mode .room-panel .room-code strong { margin-top: 0; font-size: 22px; line-height: 1.2; letter-spacing: 3px; }
.touch-mode .room-panel .room-code small { letter-spacing: 1px; }

/* The entry form no longer reserves a column for promotional copy. */
.touch-mode .intro { display: block; max-width: 600px; padding-top: 0; }
.touch-mode .intro .entry-card { width: 100%; grid-column: auto; grid-row: auto; }

/* Native quick-match selector stays readable without iOS zoom. */
.touch-mode #quick-game-mode { font-size:16px; min-width:0; max-width:100%; }
.touch-mode .entry-tabs > button { padding-inline:8px; min-height:44px; }

.touch-mode .entry-secondary{padding:10px 12px;gap:8px}
.touch-mode .entry-back{min-height:44px}
.touch-mode .entry-card #connect-button{min-height:60px}
.touch-mode .entry-card .auxiliary-entry #connect-button{min-height:44px}

/* Keep the web game's main actions in the first mobile viewport. */
.touch-mode .welcome:not(.hidden){display:flex;align-items:center;padding:8px calc(var(--mobile-safe-right) + 16px) 8px calc(var(--mobile-safe-left) + 16px);gap:0}
.touch-mode .welcome .intro{width:46%;max-width:360px;align-self:auto}
.touch-mode .welcome #connect-form{padding:0;gap:4px}
.touch-mode .welcome #connect-button{font-size:34px;min-height:56px;justify-content:flex-start}
.touch-mode .welcome #quick-mode-field{margin:0;gap:8px}
.touch-mode .welcome .entry-secondary{padding:4px 0;gap:0}
.touch-mode .welcome .entry-secondary button{font-size:16px;min-height:44px}
.touch-mode .entry-nickname{margin-top:0}
.touch-mode .entry-nickname input{font-size:16px;min-height:44px}
@media(orientation:portrait){.touch-mode .welcome:not(.hidden){align-items:flex-end}.touch-mode .welcome .intro{width:100%;max-width:420px}.touch-mode .welcome .entry-secondary{flex-direction:row;gap:24px}.touch-mode .welcome #connect-button{font-size:40px;min-height:60px}}
@media(orientation:landscape) and (max-height:640px){.touch-mode .welcome .entry-secondary{flex-direction:row;gap:18px}.touch-mode .welcome .entry-secondary button{font-size:13px}.touch-mode .welcome #connect-button{font-size:32px;min-height:52px}.touch-mode .welcome .intro{width:48%}}

/* The centered menu is first; decorative player yields to expanded forms. */
.touch-mode .welcome:not(.hidden){justify-content:center;align-items:flex-end}
.touch-mode .welcome .intro{width:min(440px,100%)}
.touch-mode .welcome #connect-button{justify-content:center}
.touch-mode .welcome .entry-secondary{flex-direction:row;justify-content:space-between;gap:16px;padding:4px 0}
@media(orientation:landscape) and (max-height:640px){.touch-mode .welcome:not(.hidden){justify-content:flex-start;align-items:center}.touch-mode .welcome .intro{width:48%}.touch-mode .welcome #connect-button{justify-content:flex-start}}

/* Preserve the bounded safe-area column and wrapping beside menu controls. */
body.touch-mode:not(.in-room):not(.in-game) .topbar .connection{flex-wrap:wrap;white-space:normal}