/* The match HUD on every screen size (#72 musts 5 and 6, #71). The HTML is the same everywhere
   (Game/HudLayout.cs); these rules lay it out:
   - big screens: cards down the sides, timer in the top middle (app.css);
   - tablet portrait: the cards in rows under the timer;
   - xs (a phone upright, under 600 px wide): a 44 px top bar, a 28 px strip of chips that
     scrolls sideways, a drawer with the full cards on a tap, only events about you in the feed;
   - s-land (a phone on its side, under 500 px tall): a 40 px top bar and side strips at most
     64 px wide, the same drawer.
   Boxes that stay on screen carry data-hud; js/hud-layout.ts measures them and the camera fits
   the arena into the rest, so no HUD box covers the arena. Safe areas (notch, rounded corners,
   home bar) are kept clear on phones. */

:root {
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
}

/* Big screens: the players block is only a wrapper; the panels sit at the sides (app.css). */
.hud-players {
  display: contents;
}

.hud-bar {
  display: none;
}

.pg-left {
  left: calc(1.4em + var(--sa-l));
}

.pg-right {
  right: calc(1.4em + var(--sa-r));
}

.pg-pause-btn {
  top: calc(1.2em + var(--sa-t));
  right: calc(1.4em + var(--sa-r));
}

/* ------------------------------------------------------------ tablet portrait: cards in rows */
@media (orientation: portrait) and (min-width: 600px) and (max-width: 1199px) {
  .hud-players {
    position: absolute;
    top: calc(var(--sa-t) + 4.4em);
    left: calc(var(--sa-l) + 1em);
    right: calc(var(--sa-r) + 1em);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
  }

  .pg-panel {
    display: contents;
  }

  .pg-card {
    width: 14em;
    padding: 0.5em 0.7em;
  }

  /* With the touch controls: the touch hint has the line under the timer, the cards start under
     it, and they are narrower (four in a row, so 8 players take 2 rows, not 3), which leaves the
     arena more of the screen (#70). */
  html:has(#touch) .hud-players {
    top: calc(var(--sa-t) + 3.4em + var(--fs-small) * 1.4 + 12px);
    gap: 0.4em;
  }

  html:has(#touch) .pg-card {
    width: calc(25% - 0.6em);
    min-width: 9.5em;
    padding: 0.35em 0.5em;
    font-size: max(var(--fs-small), 0.85em);
  }
}

/* ------------------------------------------------------------ phones (xs and s-land) */
@media (max-width: 599px) and (orientation: portrait),
  (max-height: 499px) and (orientation: landscape) {
  .pg-hud {
    /* The text setting grows the phone HUD up to 125 %, so the bar and strip still fit. */
    --hud-scale: min(var(--scale), 1.25);
    --bar-h: 44px;
    --strip-h: calc(28px * max(1, var(--hud-scale)));
  }

  .hud-bar {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--sa-t) + var(--bar-h));
    background: var(--ui);
    border-bottom: 1px solid var(--ui-line);
  }

  .pg-top {
    top: var(--sa-t);
  }

  .pg-round,
  .sg-timer,
  .tg-clock {
    display: flex;
    align-items: center;
    gap: 0.3em;
    height: var(--bar-h);
    font-size: calc(22px * var(--hud-scale));
    line-height: 1;
  }

  .pg-round span {
    font-size: calc(14px * var(--hud-scale));
  }

  .pg-pause-btn {
    top: calc(var(--sa-t) + 4px);
    right: calc(var(--sa-r) + 6px);
    height: calc(var(--bar-h) - 8px);
    min-width: 48px;
    justify-content: center;
    font-size: calc(15px * var(--hud-scale));
  }

  .pg-pause-btn span,
  .pg-pause-btn kbd {
    display: none;
  }

  .code-chip {
    top: calc(var(--sa-t) + 8px);
    left: calc(var(--sa-l) + 6px);
    height: calc(var(--bar-h) - 16px);
    display: flex;
    align-items: center;
    padding: 0 8px;
    font-size: calc(12px * var(--hud-scale));
  }

  .code-chip.hidden {
    display: none;
  }

  /* Short popups go just under the HUD. */
  .pg-banner {
    font-size: calc(13px * var(--hud-scale));
  }

  .pg-feed {
    top: calc(var(--sa-t) + var(--bar-h) + var(--strip-h) + 10px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    align-items: center;
    font-size: max(var(--fs-small), calc(12px * var(--hud-scale)));
  }

  /* With the touch controls the touch hint has the line under the bar (hints.css): the feed goes
     one line lower, so the two never draw over each other (#70). */
  html:has(#touch) .pg-feed {
    top: calc(var(--sa-t) + var(--bar-h) + var(--strip-h) + 22px + var(--fs-small) * 1.4);
  }

  /* Only the events about a seat played here (a phone shows one player). */
  .pg-feed-line:not(.mine) {
    display: none;
  }

  .toast {
    top: calc(var(--sa-t) + var(--bar-h) + var(--strip-h) + 10px);
    font-size: calc(13px * var(--hud-scale));
  }

  .pg-hints {
    bottom: calc(var(--sa-b) + 6px);
    max-width: 94vw;
    font-size: max(var(--fs-small), calc(11px * var(--hud-scale)));
  }

  .sg-bottom {
    bottom: calc(var(--sa-b) + 6px);
    gap: 4px;
  }

  .sg-fraction {
    gap: 2px;
    padding: 3px;
  }

  .sg-pill {
    min-width: 48px;
    min-height: 40px;
    padding: 0 6px;
    font-size: calc(14px * var(--hud-scale));
  }

  .sg-pill kbd,
  .sg-ability kbd {
    display: none;
  }

  .sg-ability {
    min-height: 40px;
    margin-left: 2px;
    font-size: calc(14px * var(--hud-scale));
  }

  /* Chips: the shape, the main number; your own chip has a ring. */
  .pg-hud:not(.drawer-open) .pg-card {
    flex: none;
    gap: 4px;
    padding: 0 8px 0 5px;
    height: calc(var(--strip-h) - 2px);
    border-radius: 13px;
    border-left-width: 1px;
    font-size: calc(13px * var(--hud-scale));
    pointer-events: auto;
    cursor: pointer;
  }

  .pg-hud:not(.drawer-open) .pg-card:has(.pg-you) {
    box-shadow: inset 0 0 0 2px var(--c);
  }

  .pg-hud:not(.drawer-open) .pg-card-icon svg {
    width: 15px;
    height: 15px;
  }

  .pg-hud:not(.drawer-open) :is(.pg-card-name, .pg-card-sub, .sg-meter, .tg-share .bar) {
    display: none;
  }

  .pg-hud:not(.drawer-open) .pg-card-stats {
    margin: 0;
    gap: 3px;
    font-size: calc(13px * var(--hud-scale));
  }

  .pg-hud:not(.drawer-open) .pg-card-stats :is(.kos, .status, .powers) {
    display: none;
  }

  .pg-hud:not(.drawer-open) .pg-card-stats .pips {
    gap: 2px;
    flex-wrap: wrap;
  }

  .pg-hud:not(.drawer-open) .pg-card-stats .pips i {
    width: 7px;
    height: 7px;
    border-width: 2px;
  }

  /* Siegeometry: the units only; Tessellate: the share only. */
  .pg-hud:not(.drawer-open) .sg-card .pg-card-stats > span:not(:first-child) {
    display: none;
  }

  .pg-hud:not(.drawer-open) .sg-card .pg-card-stats > span:first-child {
    font-size: 0;
  }

  .pg-hud:not(.drawer-open) .sg-card .pg-card-stats b,
  .pg-hud:not(.drawer-open) .tg-share b {
    font-size: calc(13px * var(--hud-scale));
  }

  .pg-hud:not(.drawer-open) .tg-share {
    width: auto;
    margin: 0;
  }

  .pg-hud:not(.drawer-open) .tg-share b {
    min-width: 0;
  }

  .pg-hud:not(.drawer-open) .tg-card .pg-card-stats {
    display: none;
  }

  /* The drawer: every full card over the arena; a tap anywhere on it closes it. */
  .pg-hud.drawer-open .hud-players {
    position: absolute;
    z-index: 6;
    top: calc(var(--sa-t) + var(--bar-h) + 4px);
    left: calc(var(--sa-l) + 6px);
    right: calc(var(--sa-r) + 6px);
    height: auto;
    max-height: calc(100% - var(--sa-t) - var(--bar-h) - var(--sa-b) - 10px);
    overflow-x: hidden;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13em, 1fr));
    align-content: start;
    gap: 0.5em;
    padding: 0.6em;
    overflow-y: auto;
    border-radius: 0.9em;
    border: 1px solid var(--ui-line);
    background: rgba(18, 16, 26, 0.96);
    box-shadow: 0 1em 3em rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    cursor: pointer;
  }

  .pg-hud.drawer-open .pg-panel {
    display: contents;
  }

  .pg-hud.drawer-open .hud-players::after {
    content: 'Tap to close';
    grid-column: 1 / -1;
    text-align: center;
    font-size: max(var(--fs-small), 0.75em);
    color: var(--ui-dim);
  }

  /* Pause and results: inside the safe area, scroll inside, the buttons always in reach. */
  .pg-overlay {
    padding: max(6px, var(--sa-t)) max(6px, var(--sa-r)) max(6px, var(--sa-b)) max(6px, var(--sa-l));
  }

  .pg-dialog {
    max-height: 100%;
    overflow-y: auto;
    padding-bottom: 0;
    background: #15131d;
  }

  .pg-actions {
    position: sticky;
    z-index: 1;
    bottom: 0;
    margin: 0.5em -0.5em 0;
    padding: 0.5em 0.5em 0.9em;
    background: #15131d;
    box-shadow: 0 -0.6em 0.8em #15131d;
  }

  .pg-actions .btn {
    min-height: 44px;
  }
}

/* No keyboard on a touch phone: its key hints only take room; the touch hint stays (hints.css
   puts it under the top bar, #72 must 8). */
@media (max-width: 599px) and (orientation: portrait) and (pointer: coarse),
  (max-height: 499px) and (orientation: landscape) and (pointer: coarse) {
  .pg-hints .hint:not([data-hint='touch']) {
    display: none;
  }

  /* Paused: the pause menu says it all; the touch hint would draw over its buttons (#70). */
  .hints-paused .pg-hints {
    display: none;
  }
}

/* ------------------------------------------------------------ xs: the chip strip */
@media (max-width: 599px) and (orientation: portrait) {
  .hud-players {
    position: absolute;
    top: calc(var(--sa-t) + var(--bar-h));
    left: 0;
    right: 0;
    height: calc(var(--strip-h) + 4px);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 calc(var(--sa-r) + 6px) 0 calc(var(--sa-l) + 6px);
    overflow-x: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    pointer-events: auto;
    cursor: pointer;
  }

  .hud-players::-webkit-scrollbar {
    display: none;
  }

  .pg-panel {
    display: contents;
  }

  .pg-banner {
    margin-top: calc(var(--strip-h) + 8px);
  }

  .sg-bottom {
    width: calc(100% - 12px - var(--sa-l) - var(--sa-r));
  }

  .sg-fraction {
    width: 100%;
  }

  .sg-pill,
  .sg-ability {
    flex: 1;
    justify-content: center;
  }
}

/* ------------------------------------------------------------ s-land: side strips */
@media (max-height: 499px) and (orientation: landscape) {
  .pg-hud {
    --bar-h: 40px;
    --strip-h: 0px;
  }

  .pg-panel {
    top: calc(var(--sa-t) + var(--bar-h) + 6px);
    transform: none;
    width: auto;
    gap: 4px;
    max-height: calc(100% - var(--sa-t) - var(--bar-h) - var(--sa-b) - 12px);
    overflow-y: auto;
    scrollbar-width: none;
    pointer-events: auto;
  }

  .pg-left {
    left: calc(var(--sa-l) + 4px);
  }

  .pg-right {
    right: calc(var(--sa-r) + 4px);
  }

  /* A chip per player down each side: shape and number in a row, 26 px tall, so four fit
     above the touch controls' buttons. */
  .pg-hud:not(.drawer-open) .pg-card {
    justify-content: center;
    width: 60px;
    height: calc(26px * max(1, var(--hud-scale)));
    padding: 0 4px;
    border-radius: 10px;
  }

  .pg-hud:not(.drawer-open) .pg-card-stats {
    justify-content: center;
  }

  /* The touch controls take the lower part of both sides. */
  html:has(#touch) .pg-panel {
    max-height: calc(50% - var(--sa-t) - var(--bar-h) - 10px);
  }

  /* Pause and results on a short screen: smaller title and rows, so the buttons fit. */
  .pg-dialog {
    min-width: 0;
    width: min(38em, 100%);
    padding: 0.7em 1.2em 0;
  }

  .pg-dialog h2 {
    font-size: 1.5em;
  }

  /* The pause buttons in two rows (Resume, then the four pages), so the list ends above the
     End match / Quit footer (#70). Big text (data-fit narrow) keeps one column and scrolls. */
  :root:not([data-fit='narrow']) .pause-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4em;
    margin-top: 0.5em;
  }

  .pause-by {
    margin: 0 0 0.2em;
  }

  .pg-why {
    margin: 0 0 0.4em;
  }

  .pg-table {
    margin-bottom: 0.3em;
  }

  .pg-table td {
    padding: 0.15em 0.5em;
  }
}