/* The page's own panels in MW2's popup style: Barracks (account), Options, About, install help, the bracket,
   the fallback dialogs, the in-map join gate and readiness bar. Every colour and size is a --mw2-* token
   (menu-theme.css); this file only says where each goes. Loaded last, so it wins over the panels' older look. */

/* -- the popup: grey band, drop shadow, the screen dimmed behind ------------------------------------------------ */
:is(.menu-dialog, #fullscreen-help, #settings .settings-panel, #entry-gate, #room-waiting) {
  box-sizing: border-box; color: var(--mw2-ink); font: var(--mw2-text)/1.35 var(--mw2-font); text-shadow: var(--mw2-text-shadow);
  background: var(--mw2-band); border: 0; border-radius: 0; box-shadow: var(--mw2-shadow);
}
:is(.menu-dialog, #fullscreen-help) { width: min(max(var(--mw2-popup), 320px), calc(100vw - 24px)); padding: 0 var(--mw2-pad) var(--mw2-pad); }
:is(.menu-dialog, #fullscreen-help)::backdrop { background: var(--mw2-dim); backdrop-filter: none; }
#settings { background: var(--mw2-dim); backdrop-filter: none; }
#settings .settings-panel { width: min(max(var(--mw2-panel), 340px), 760px, calc(100vw - 24px)); padding: 0 var(--mw2-pad) var(--mw2-pad); }

/* -- the title strip: MW2's gradient under the popup's name ------------------------------------------------------- */
:is(.menu-dialog .dialog-heading, #settings .section-title) {
  display: flex; align-items: center; justify-content: space-between; gap: var(--mw2-pad);
  min-height: calc(var(--mw2-unit) * 24); margin: 0 calc(-1 * var(--mw2-pad)) var(--mw2-pad); padding: 0 0 0 var(--mw2-pad); background: var(--mw2-title);
}
:is(.menu-dialog .dialog-heading h2, #settings .section-title h2, #fullscreen-help h2, #entry-gate strong) {
  margin: 0; font: 400 var(--mw2-title-size)/1.2 var(--mw2-font-title); letter-spacing: 0; text-transform: none; color: var(--mw2-ink); text-shadow: var(--mw2-text-shadow);
}
:is(#fullscreen-help h2, #entry-gate strong) { display: block; margin: 0 calc(-1 * var(--mw2-pad)) var(--mw2-pad); padding: calc(var(--mw2-unit) * 4) var(--mw2-pad); background: var(--mw2-title); }

/* -- rows: white text; the focused or pointed row is MW2's black selection bar with its slanted end ---------------- */
:is(.menu-dialog, #fullscreen-help, #settings .settings-panel, #entry-gate, #room-waiting) button:not(.map-step):not([role=tab]) {
  display: flex; align-items: center; justify-content: flex-end; gap: calc(var(--mw2-unit) * 4); width: 100%; min-width: 0; min-height: var(--mw2-row); margin: 0; box-sizing: border-box;
  padding: 0 var(--mw2-pad) 0 var(--mw2-row); font: 400 var(--mw2-text)/1.1 var(--mw2-font); letter-spacing: 0; color: var(--mw2-ink);
  text-shadow: var(--mw2-text-shadow); background: transparent; border: 0; border-radius: 0; clip-path: none; transition: none;
}
:is(.menu-dialog, #fullscreen-help, #settings .settings-panel, #entry-gate, #room-waiting) button:not(.map-step):not([role=tab]):is(:hover, :focus-visible, .primary, [type=submit], #entry-play):not(:disabled),
#settings .settings-tabs button:is(:hover, :focus-visible, [aria-selected=true]) {
  color: var(--mw2-ink); background: var(--mw2-select); outline: none; clip-path: polygon(calc(var(--mw2-row) * .6) 0, 100% 0, 100% 100%, 0 100%);
}
:is(.menu-dialog, #fullscreen-help, #settings .settings-panel, #entry-gate, #room-waiting) button:disabled { color: var(--mw2-ink-off); opacity: 1; }
/* The close button in a title strip is a short row of its own. */
:is(.menu-dialog, #settings .settings-panel) :is(.dialog-heading, .section-title) > button:not(.map-step) { flex: none; width: auto; min-width: var(--mw2-row); padding: 0 var(--mw2-pad); justify-content: center; }
/* Rows that sit side by side keep sharing their line. */
:is(.menu-dialog, #entry-gate) :is(.join-row, .invite-actions, .entry-tools) button:not(.map-step):not([role=tab]) { width: auto; flex: 1; }

/* -- tabs (Options' pages) are rows across ------------------------------------------------------------------------ */
#settings .settings-tabs { gap: 0; margin: 0 0 var(--mw2-pad); background: var(--mw2-field); }
#settings .settings-tabs button { min-height: var(--mw2-row); padding: 0 var(--mw2-pad); font: 400 var(--mw2-small)/1 var(--mw2-font); letter-spacing: 0; color: var(--mw2-ink-dim); text-shadow: var(--mw2-text-shadow); background: transparent; border: 0; border-radius: 0; }

/* -- fields: MW2's edit field is black at .3 under white text --------------------------------------------------- */
:is(.menu-dialog, #settings .settings-panel, #room-waiting) :is(input:not([type=checkbox]):not([type=range]), select) {
  height: var(--mw2-row); min-height: var(--mw2-row); padding: 0 calc(var(--mw2-unit) * 6); font: var(--mw2-text) var(--mw2-font); color: var(--mw2-ink);
  text-shadow: none; background: var(--mw2-field); border: 0; border-radius: 0;
}
:is(.menu-dialog, #settings .settings-panel, #room-waiting) :is(input, select):focus-visible { outline: max(1px, var(--mw2-unit)) solid var(--mw2-ink); outline-offset: 0; background: var(--mw2-field); }
:is(.menu-dialog, #settings .settings-panel) select option { color: var(--mw2-ink); background: #404040; }
:is(.menu-dialog, #settings .settings-panel, #room-waiting) :is(input[type=range], input[type=checkbox]) { accent-color: var(--mw2-ink); }
:is(.menu-dialog, #settings .settings-panel) label:not(.ready-choice) { color: var(--mw2-ink); font-size: var(--mw2-small); letter-spacing: 0; text-transform: none; }
#settings :is([role=tabpanel] > label, .settings-panel > label) { border-bottom: 1px solid #ffffff26; font-size: var(--mw2-small); letter-spacing: 0; }
#settings output { color: var(--mw2-ink); }
.menu-dialog .match-options { border: 0; background: var(--mw2-field); }
.menu-dialog .match-options legend { color: var(--mw2-ink); font-family: var(--mw2-font-title); letter-spacing: 0; }

/* -- text: notes dimmer, links in MW2's ^3 yellow ------------------------------------------------------------------ */
:is(.menu-dialog, #fullscreen-help, #settings .settings-panel, #entry-gate, #room-waiting) :is(p, small) { color: var(--mw2-ink-dim); font-size: var(--mw2-small); letter-spacing: 0; }
:is(.menu-dialog, #settings .settings-panel) a { color: var(--mw2-yellow); }
#settings .class-stats { color: var(--mw2-ink); background: var(--mw2-field); border-left: 0; }

/* -- the in-map join gate and readiness bar ------------------------------------------------------------------------ */
#entry-gate { width: min(max(var(--mw2-popup), 300px), calc(100vw - 32px)); padding: 0 var(--mw2-pad) var(--mw2-pad); }
#entry-gate p { margin: 0 0 var(--mw2-pad); }
#entry-play { min-height: calc(var(--mw2-row) * 1.3); }
.entry-tools { gap: 0; margin-top: calc(var(--mw2-unit) * 4); }
#room-waiting { width: min(max(var(--mw2-popup), 300px), calc(100vw - 24px)); padding: var(--mw2-pad); }
#room-waiting p { color: var(--mw2-ink); font: var(--mw2-text) var(--mw2-font-title); letter-spacing: 0; }
#room-waiting .ready-choice { color: var(--mw2-ink); }
:is(#room-waiting, .menu-dialog) .lobby-member { color: var(--mw2-ink-dim); background: var(--mw2-field); }
:is(#room-waiting, .menu-dialog) .lobby-member[data-self=true] { color: var(--mw2-ink); }
#map-lobby-players .lobby-member-status { color: var(--mw2-ink-off); }
#map-lobby-players .lobby-member-status[data-status=ready] { color: var(--mw2-ink); }

/* Short screens (a phone held sideways): the title strip stays in view while the panel scrolls. */
@media (max-height: 450px) {
  :is(.menu-dialog .dialog-heading, #settings .section-title) { position: sticky; top: 0; z-index: 1; background: var(--mw2-title), var(--mw2-band); }
}

/* Fingers, not cursors: hit areas for touch screens. The look on a mouse is unchanged; every rule is coarse-pointer only.
   44 px is the smallest target and 8 px the smallest gap between two of them. */

/* -- In-game HUD ------------------------------------------------------------------------------------------------- */
@media (pointer: coarse) {
  /* The look pad sat over the bottom of MENU and fullscreen (#touch-controls paints above #hud): start it under them.
     .hud-top is at 4vh, the buttons are 44 tall, then 8 px clear. */
  #touch-controls .look-pad { top: max(12%, calc(4vh + 52px)); }
  body.touch-visible #hud .hud-actions { gap: 8px; }
  /* A smaller BUTTON SIZE keeps 44 px circles (min-width), so space them by what is drawn, not by the smaller size. */
  #touch-controls { --gap: calc(max(44px, var(--button)) + 12px); }
  #spectator-bar button { min-width: 44px; min-height: 44px; }
}
@media (pointer: coarse) and (max-width: 420px) {
  #touch-controls { --gap: calc(max(44px, var(--button)) + 8px); }
}

/* -- Options and the touch layout editor: sliders --------------------------------------------------------------- */
@media (pointer: coarse) {
  /* A native slider keeps its thin track centred; the taller box is all grab area. pan-y lets a vertical swipe
     scroll the panel instead of dragging the value. */
  #settings .settings-panel input[type=range],
  #touch-layout-editor .layout-tools input[type=range] { height: 44px; margin-block: 0; touch-action: pan-y; }
  /* A knob a thumb can see under it: 26 px on a 6 px track (the native one is about 16 px). */
  #settings .settings-panel input[type=range] { appearance: none; -webkit-appearance: none; background: transparent; }
  #settings .settings-panel input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #ffffff47; }
  #settings .settings-panel input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: #ffffff47; }
  #settings .settings-panel input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border: 2px solid #000000a6; border-radius: 50%; background: var(--mw2-ink); box-shadow: 0 1px 4px #000000b3; }
  #settings .settings-panel input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 2px solid #000000a6; border-radius: 50%; background: var(--mw2-ink); }
  #settings .settings-panel input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
  /* Checkboxes: the whole row is the label; the box itself is drawn big enough to read at a glance. */
  #settings .settings-panel input[type=checkbox] { width: 24px; height: 24px; }

  #touch-layout-editor .layout-toolbar { gap: 8px; }
  #touch-layout-editor .layout-tools label { min-height: 44px; }
  #touch-layout-editor .layout-position input[type=number] { height: 44px; }
}

/* A phone held sideways: Options takes the width it has, so its rows and sliders are long enough for a thumb. */
@media (pointer: coarse) and (max-height: 520px) {
  #settings .settings-panel { width: min(720px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); }
}

/* -- Page dialogs ------------------------------------------------------------------------------------------------ */
@media (pointer: coarse) {
  /* Map arrows in Match Options keep their 36x32 look; the hit area reaches 44x44. */
  .menu-dialog .map-choice .map-step { position: relative; }
  .menu-dialog .map-choice .map-step::after { content: ''; position: absolute; inset: -6px -4px; }
  #menu .lobby-map .map-step::after { content: ''; position: absolute; inset: 0 -4px; }

  /* About's links: full-width rows a finger can hit. */
  .menu-dialog a:not(p a) { display: flex; align-items: center; min-height: 44px; padding-block: 0; }

  /* Fullscreen and Room menu are two different actions: keep a gutter between them. */
  #entry-gate .entry-tools { gap: 8px; }
  /* In-map readiness bar: the Ready row is a full target, clear of Invite. */
  #room-waiting { row-gap: 8px; }
  #room-waiting .ready-choice { min-height: 44px; }
}

/* -- Pause menu (HTML fallback) ---------------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .pause-items button, .pause-confirm button { min-height: max(44px, var(--ui-row)); }
  .pause-confirm div { gap: 8px; }
  /* A tap leaves :hover stuck on touch; do not slide the row into its neighbour's gutter. */
  .pause-items button:hover:not(:focus-visible), .pause-confirm button:hover:not(:focus-visible) { transform: none; }
}
@media (pointer: coarse) and (max-height: 520px) {
  .pause-items { row-gap: 8px; column-gap: 8px; }
  .pause-items button { min-height: 44px; }
}

/* -- Home and lobby (HTML fallback; short landscape screens) ------------------------------------------------------ */
@media (pointer: coarse) and (max-height: 599px) and (max-width: 999px), (pointer: coarse) and (max-height: 499px) {
  #menu { grid-template-rows: 44px minmax(0, 1fr) 44px; }
  #menu .topbar, #menu .home-footer { height: 44px; }
  #menu .fullscreen-button, #menu .install-area > [data-install],
  #menu .home-card button, #menu .home-card #resume-actions button,
  #menu .room-heading, #menu .room-heading button, #menu .ready-choice,
  #menu .lobby-panel button.primary, #menu #bracket-open { min-height: 44px; }
  #menu .home-actions, #menu .home-tools, #menu .home-card #resume-actions { gap: 8px; }
}

/* Server region (docs/REGIONS.md): shown only where the site offers more than one. */
#settings :is(#server-region-row, #server-region-note)[hidden] { display: none; }