@font-face {
  font-family: 'Retro Gaming';
  src: url('fonts/Retro Gaming.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/*
 * Bixel front end. Pixel-UI rules of thumb used throughout:
 *  - 'Retro Gaming' is drawn on an 11 px grid: type sizes are 11 / 22 / 33 / 44 / 55 px.
 *  - Frames are notched (no rounded corners) and shadows are hard (no blur), in whole
 *    multiples of --ui-px (3 px desktop, 2 px phones, 4 px on 4K; see game-ui.css).
 *  - Pixel art (portraits, sprite canvases, the live scene) is only scaled by nearest neighbour.
 */

:root {
  --menu-gutter: clamp(16px, 3vw, 40px);
  --menu-label: 22px;
  --menu-hint: 11px;
  --menu-btn-height: 64px;
  --menu-stack-width: 400px;
  --menu-dock-height: 52px;
  /* Set by the attract scene (CSS px per art px); the showcase stage is sized from it. */
  --scene-px: 3;
  /* The chat and friends drawers start below the logo block and the player card. */
  --menu-drawer-top: 132px;
}

/* Match the scene's resolveSceneScale() before it runs, so the showcase does not jump. */
@media (max-width: 1249px), (max-height: 749px) {
  :root { --scene-px: 2; }
}

@media (min-width: 1750px) and (min-height: 1050px) {
  :root { --scene-px: 4; }
}

@media (min-width: 2250px) and (min-height: 1350px) {
  :root { --scene-px: 5; }
}

@media (min-width: 2750px) and (min-height: 1650px) {
  :root { --scene-px: 6; }
}

@media (min-width: 3250px) and (min-height: 1950px) {
  :root { --scene-px: 7; }
}

html {
  height: 100%;
  background: var(--ui-void);
}

body.menu-page {
  position: relative;
  min-height: 100%;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 68% 55%, rgba(64, 56, 40, 0.32), transparent 70%),
    linear-gradient(180deg, #0b0b0c 0%, var(--ui-void) 100%);
  color: var(--ui-text);
  font-family: var(--ui-font);
  -webkit-font-smoothing: none;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------------ backdrop */

.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.menu-backdrop__scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  opacity: 0;
  transform-origin: 0 0;
  transition: opacity 900ms ease;
  will-change: transform;
}

.menu-backdrop__scene[data-ready='true'] {
  opacity: 1;
}

.menu-backdrop__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 6, 7, 0.74) 0, rgba(6, 6, 7, 0.34) 34%, rgba(6, 6, 7, 0) 52%),
    linear-gradient(180deg, rgba(6, 6, 7, 0.6) 0, rgba(6, 6, 7, 0) 18%, rgba(6, 6, 7, 0) 76%, rgba(6, 6, 7, 0.78) 100%);
}

/* ------------------------------------------------------------------ shell */

.menu-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    max(14px, env(safe-area-inset-top))
    max(var(--menu-gutter), env(safe-area-inset-right))
    calc(var(--menu-dock-height) + 26px + env(safe-area-inset-bottom))
    max(var(--menu-gutter), env(safe-area-inset-left));
  gap: 18px;
}

.menu-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/* 'Bixel' wordmark: off-white pixel type with a hazard-amber extrusion (the boot loader title
   in game-ui.css uses the same treatment). */
.menu-logo {
  display: grid;
  gap: 6px;
  margin: 0;
  line-height: 0.9;
}

.menu-logo__word {
  color: var(--ui-text-bright);
  font-size: 66px;
  font-weight: normal;
  text-shadow:
    0 var(--ui-px) 0 var(--ui-amber),
    0 calc(2 * var(--ui-px)) 0 var(--ui-amber-edge),
    0 calc(3 * var(--ui-px)) 0 var(--ui-frame),
    0 calc(5 * var(--ui-px)) 0 rgba(0, 0, 0, 0.45);
}

/* Tagline as a strip of black-on-amber quarantine tape. */
.menu-logo__tag {
  justify-self: start;
  padding: 2px calc(2 * var(--ui-px)) 1px;
  background: var(--ui-amber);
  box-shadow:
    0 0 0 var(--ui-px) var(--ui-frame),
    0 calc(2 * var(--ui-px)) 0 var(--ui-px) rgba(0, 0, 0, 0.45);
  color: var(--ui-amber-ink);
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ player card */

.player-card {
  display: grid;
  grid-template-columns: auto minmax(0, auto) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: min(620px, 62vw);
  margin: var(--ui-px);
  padding: 10px 12px 10px 10px;
}

.player-card__portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  background:
    radial-gradient(circle at 50% 72%, rgba(242, 177, 52, 0.22), transparent 70%),
    var(--ui-well);
  box-shadow:
    inset 0 0 0 var(--ui-px) var(--ui-steel-lo),
    0 0 0 var(--ui-px) var(--ui-frame);
  cursor: pointer;
}

.player-card__portrait img {
  width: 48px;
  height: 48px;
}

.player-card__portrait:hover {
  box-shadow:
    inset 0 0 0 var(--ui-px) var(--ui-amber),
    0 0 0 var(--ui-px) var(--ui-frame);
}

.player-card__info {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.player-card__name {
  overflow: hidden;
  max-width: 240px;
  color: var(--ui-text-bright);
  font-size: 22px;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 var(--ui-frame);
  white-space: nowrap;
}

.connection-status {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.status-indicator {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: #5d6569;
  box-shadow: 0 0 0 2px var(--ui-frame);
}

.status-indicator.connected {
  background: var(--ui-toxic);
  box-shadow: 0 0 0 2px var(--ui-frame), 0 0 0 4px rgba(124, 240, 90, 0.22);
}

.status-indicator.connected + .status-text {
  color: var(--ui-toxic);
}

.status-text {
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.player-card__tickets {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ui-amber);
  font-size: 11px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.player-card__tickets[data-empty='true'] .player-card__ticket-count,
.player-card__tickets[data-empty='true'] .player-card__ticket-unit {
  color: var(--ui-red-text);
}

.pixel-icon--ticket {
  width: 16px;
  height: 16px;
  color: var(--ui-amber);
  filter: drop-shadow(0 2px 0 var(--ui-frame));
}

.player-card__ticket-count,
.player-card__ticket-unit {
  color: #ffe2a3;
}

/* The count and its unit read as one word ("5 tickets"). */
.player-card__ticket-unit {
  margin-left: -3px;
}

.player-card__ticket-timer {
  color: var(--ui-text-muted);
}

.player-card__auth,
.player-card__wallet {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-card__auth .ui-button,
.player-card__wallet .ui-button {
  width: auto;
  min-height: 38px;
  white-space: nowrap;
}

/* Logging in is secondary to Play: the top bar's login buttons use the amber-outline plate, so
   the menu keeps one solid amber call to action. */
.player-card__auth .ui-button--primary {
  --b-face: #211c12;
  --b-face-hi: #2a2416;
  --b-edge: #120f09;
  --b-o: var(--ui-amber-edge);
  --b-text: var(--ui-amber-text);
  --b-hl: rgba(255, 244, 222, 0.07);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

@media (hover: hover) {
  .player-card__auth .ui-button--primary:hover {
    --b-face: #2c2415;
    --b-face-hi: #382d18;
    --b-o: var(--ui-amber);
    --b-text: var(--ui-amber-hi);
    --b-glow: 0 0 0 0 transparent;
  }
}

.player-card__auth .ui-button--primary:focus-visible {
  --b-o: var(--ui-frame);
}

/* The single "Log in" button replaces both provider buttons on small screens. */
.player-card__login {
  display: none !important;
}

.player-card__address {
  min-height: 38px;
  padding: 6px 10px;
  border: 0;
  background: var(--ui-well);
  box-shadow: inset 0 0 0 var(--ui-px) var(--ui-steel-lo);
  color: var(--ui-text-muted);
  cursor: pointer;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.player-card__address:hover {
  color: var(--ui-text);
  box-shadow: inset 0 0 0 var(--ui-px) var(--ui-amber);
}

/* Focus is white only (the outline is set with the other player-card controls below). */
.player-card__address:focus-visible {
  color: var(--ui-text);
  box-shadow: inset 0 0 0 var(--ui-px) var(--ui-frame);
}

.player-card__address[data-tooltip='Copied!'] {
  color: var(--ui-toxic);
}

/* ------------------------------------------------------------------ main area */

.menu-main {
  display: grid;
  grid-template-columns: minmax(0, var(--menu-stack-width)) minmax(0, 1fr);
  grid-template-areas: 'stack showcase';
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  min-height: 0;
}

/* --- play stack -------------------------------------------------------------------------- */

.menu-stack {
  grid-area: stack;
  display: grid;
  gap: 14px;
  margin: calc(2 * var(--ui-px));
  padding: 16px;
  --px-face: rgba(15, 16, 17, 0.9);
}

.menu.home-menu {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu.home-menu li {
  margin: 0;
  min-width: 0;
}

.menu-btn {
  --btn-face: #1b1e20;
  --btn-face-hi: #222629;
  --btn-edge: #0e1011;
  --btn-outline: var(--ui-frame);
  --btn-accent: var(--ui-amber);
  --btn-text: var(--ui-text);
  --btn-glow: 0 0 0 0 transparent;
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: var(--menu-btn-height);
  margin: var(--ui-px);
  padding: 10px 16px 12px 14px;
  background: linear-gradient(180deg, var(--btn-face-hi) 0 50%, var(--btn-face) 50% 100%);
  box-shadow:
    inset 0 calc(-1 * var(--ui-px)) 0 0 var(--btn-edge),
    inset 0 var(--ui-px) 0 0 rgba(255, 244, 222, 0.07),
    inset var(--ui-px) 0 0 0 rgba(255, 244, 222, 0.025),
    0 calc(-1 * var(--ui-px)) 0 0 var(--btn-outline),
    0 var(--ui-px) 0 0 var(--btn-outline),
    calc(-1 * var(--ui-px)) 0 0 0 var(--btn-outline),
    var(--ui-px) 0 0 0 var(--btn-outline),
    0 calc(2 * var(--ui-px)) 0 0 rgba(0, 0, 0, 0.5),
    var(--btn-glow);
  color: var(--btn-text);
  cursor: pointer;
  text-decoration: none;
  transition: transform 90ms steps(2), filter 90ms steps(2);
}

button.menu-btn,
button.menu-mini-btn {
  width: calc(100% - 2 * var(--ui-px));
  border: 0;
  border-radius: 0;
  font-family: var(--ui-font);
  text-align: left;
}

button.menu-mini-btn {
  text-align: center;
}

.menu-btn__icon {
  width: 32px;
  height: 32px;
  color: var(--btn-accent);
}

.menu-btn__text {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.menu-btn__label {
  font-size: var(--menu-label);
  letter-spacing: 2px;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}

.menu-btn__hint {
  overflow: hidden;
  color: var(--ui-text-muted);
  font-size: var(--menu-hint);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Selector arrow: the classic menu cursor appears on the hovered / focused entry. */
.menu-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-6 * var(--ui-px));
  width: calc(3 * var(--ui-px));
  height: calc(5 * var(--ui-px));
  background: var(--btn-accent);
  clip-path: polygon(0 0, 34% 0, 34% 20%, 67% 20%, 67% 40%, 100% 40%, 100% 60%, 67% 60%, 67% 80%, 34% 80%, 34% 100%, 0 100%);
  opacity: 0;
  transform: translateY(-50%);
}

.menu-btn:hover,
.menu-btn:focus-visible {
  --btn-outline: var(--ui-amber);
  --btn-face: #222629;
  --btn-face-hi: #2a2f32;
  --btn-glow: var(--ui-glow-amber);
  outline: none;
  transform: translateX(var(--ui-px));
}

.menu-btn:hover::before,
.menu-btn:focus-visible::before {
  opacity: 1;
}

/* Keyboard focus: black frame, 2 px white frame outside it (white is focus only, amber is hover). */
.menu-btn:focus-visible {
  --btn-outline: var(--ui-frame);
  --btn-glow: 0 0 0 0 transparent;
  outline: 2px solid var(--ui-focus);
  outline-offset: var(--ui-px);
}

.menu-btn:active {
  transform: translate(var(--ui-px), var(--ui-px));
}

/* The one call to action: solid hazard amber, black stencil text, a striped bumper. */
.menu-btn--primary {
  --btn-face: var(--ui-amber-lo);
  --btn-face-hi: var(--ui-amber);
  --btn-edge: var(--ui-amber-edge);
  --btn-accent: var(--ui-amber-ink);
  --btn-text: var(--ui-amber-ink);
  min-height: calc(var(--menu-btn-height) + 8px);
  padding-right: calc(16px + 7 * var(--ui-px));
}

.menu-btn--primary .menu-btn__label {
  text-shadow: 0 2px 0 rgba(255, 228, 160, 0.45);
}

.menu-btn--primary .menu-btn__hint {
  color: #3e2a06;
}

.menu-btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(5 * var(--ui-px));
  background: var(--ui-stripe-amber) 0 0 / var(--ui-tile) repeat;
  box-shadow: inset var(--ui-px) 0 0 0 var(--ui-frame);
}

.menu-btn--primary:hover,
.menu-btn--primary:focus-visible {
  --btn-face: var(--ui-amber);
  --btn-face-hi: var(--ui-amber-hi);
  --btn-outline: var(--ui-frame);
}

/* The selector arrow sits outside the amber face, so it stays amber there. */
.menu-btn--primary::before {
  background: var(--ui-amber);
}

/* Ranked costs a ticket: a narrower strip of amber tape marks the stakes. */
.menu-btn--ranked {
  --btn-accent: var(--ui-gold);
  padding-right: calc(16px + 6 * var(--ui-px));
}

.menu-btn--ranked::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(4 * var(--ui-px));
  background: var(--ui-stripe-amber) 0 0 / var(--ui-tile) repeat;
  box-shadow: inset var(--ui-px) 0 0 0 var(--ui-frame);
}

.menu-btn--ranked:hover,
.menu-btn--ranked:focus-visible {
  --btn-face: #262113;
  --btn-face-hi: #2f2917;
}

/* Ticket readout inside the Ranked entry. */
.ranked-ticket-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
  color: var(--ui-text-muted);
  font-size: var(--menu-hint);
  line-height: 1.3;
  text-transform: none;
}

.ranked-ticket-balance > span[hidden] {
  display: none;
}

.ranked-ticket-summary {
  color: #ffe2a3;
}

.ranked-ticket-buckets {
  color: var(--ui-text-muted);
}

.ranked-ticket-countdown {
  color: var(--ui-amber);
  font-variant-numeric: tabular-nums;
}

.ranked-button[aria-busy='true'] .ranked-ticket-summary {
  color: var(--ui-amber);
}

/* Out of tickets: dimmed, no tape, and the refill countdown is the message (no alert). */
.ranked-button[data-ticket-state='insufficient'] {
  --btn-accent: #7d6a3c;
  --btn-text: #8f989b;
  filter: saturate(0.4);
  cursor: not-allowed;
}

.ranked-button[data-ticket-state='insufficient']::after {
  display: none;
}

.ranked-button[data-ticket-state='insufficient'] .menu-btn__label,
.ranked-button[data-ticket-state='insufficient'] .menu-btn__icon {
  opacity: 0.6;
}

.ranked-button[data-ticket-state='insufficient'] .ranked-ticket-countdown {
  color: var(--ui-warning);
}

.ranked-button[data-ticket-state='insufficient']:hover,
.ranked-button[data-ticket-state='insufficient']:active {
  transform: none;
}

.ranked-button[data-ticket-state='network-error'] .ranked-ticket-summary {
  color: var(--ui-red-text);
}

.ranked-button.is-nudged {
  animation: menu-nudge 280ms steps(4);
}

@keyframes menu-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(calc(-2 * var(--ui-px))); }
  75% { transform: translateX(calc(2 * var(--ui-px))); }
}

.menu-stack__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 2px;
}

.menu-mini-btn {
  --mini-outline: var(--ui-steel);
  --mini-face: #181a1c;
  --mini-face-hi: #1d2023;
  --mini-glow: 0 0 0 0 transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin: var(--ui-px);
  padding: 8px 10px;
  background: linear-gradient(180deg, var(--mini-face-hi) 0 50%, var(--mini-face) 50% 100%);
  box-shadow:
    inset 0 calc(-1 * var(--ui-px)) 0 0 #0e1011,
    0 calc(-1 * var(--ui-px)) 0 0 var(--mini-outline),
    0 var(--ui-px) 0 0 var(--mini-outline),
    calc(-1 * var(--ui-px)) 0 0 0 var(--mini-outline),
    var(--ui-px) 0 0 0 var(--mini-outline),
    0 calc(2 * var(--ui-px)) 0 0 rgba(0, 0, 0, 0.5),
    var(--mini-glow);
  color: var(--ui-text);
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.menu-mini-btn .pixel-icon {
  width: 16px;
  height: 16px;
  color: var(--ui-amber);
}

.menu-mini-btn:hover {
  --mini-outline: var(--ui-amber);
  --mini-face: #1f2225;
  --mini-face-hi: #25292c;
  --mini-glow: var(--ui-glow-amber);
}

.menu-mini-btn:focus-visible {
  --mini-outline: var(--ui-frame);
  outline: 2px solid var(--ui-focus);
  outline-offset: var(--ui-px);
}

/* --- hero showcase ----------------------------------------------------------------------- */

.hero-showcase {
  grid-area: showcase;
  display: grid;
  justify-items: center;
  gap: 14px;
  justify-self: center;
  /* Wide enough for the longest weapon line ("Shotgun · 5 pellets · short range") on one row. */
  width: min(100%, 420px);
}

/*
 * Bracketed stage. Once the live scene is up, the scene's hero stands inside it (the stage is a
 * window onto the arena); otherwise the stage's own canvas plays the same turntable.
 */
.hero-showcase__stage {
  position: relative;
  width: calc(var(--scene-px) * 88px);
  height: calc(var(--scene-px) * 80px);
  max-width: 100%;
}

.hero-showcase__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse 60% 55% at 50% 62%, rgba(242, 177, 52, 0.12), rgba(10, 11, 12, 0.78) 72%);
  opacity: 0;
  transition: opacity 400ms ease;
}

body[data-scene='fallback'] .hero-showcase__canvas {
  opacity: 1;
}

/* No animation modules at all (offline blip, old browser): the plate's portrait stands alone
   rather than an empty bracket frame. */
body[data-scene='failed'] .hero-showcase__stage {
  display: none;
}

.hero-showcase__bracket {
  position: absolute;
  width: calc(6 * var(--ui-px));
  height: calc(6 * var(--ui-px));
  border-color: var(--ui-amber);
  border-style: solid;
  border-width: 0;
  filter: drop-shadow(0 var(--ui-px) 0 var(--ui-frame));
}

.hero-showcase__bracket--tl { top: 0; left: 0; border-top-width: var(--ui-px); border-left-width: var(--ui-px); }
.hero-showcase__bracket--tr { top: 0; right: 0; border-top-width: var(--ui-px); border-right-width: var(--ui-px); }
.hero-showcase__bracket--bl { bottom: 0; left: 0; border-bottom-width: var(--ui-px); border-left-width: var(--ui-px); }
.hero-showcase__bracket--br { bottom: 0; right: 0; border-bottom-width: var(--ui-px); border-right-width: var(--ui-px); }

.hero-showcase__plate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: calc(100% - 4 * var(--ui-px));
  margin: calc(2 * var(--ui-px));
  padding: 10px 12px 10px 10px;
}

.hero-showcase__portrait {
  width: 48px;
  height: 48px;
  background:
    radial-gradient(circle at 50% 72%, rgba(242, 177, 52, 0.2), transparent 70%),
    var(--ui-well);
  box-shadow: inset 0 0 0 var(--ui-px) var(--ui-steel-lo);
}

.hero-showcase__text {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.hero-showcase__name {
  margin: 0;
  overflow: hidden;
  color: var(--ui-text-bright);
  font-size: 22px;
  font-weight: normal;
  letter-spacing: 2px;
  line-height: 1;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 var(--ui-frame);
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-showcase__weapon {
  margin: 0;
  color: var(--ui-amber-text);
  font-size: 11px;
  line-height: 1.3;
}

.hero-showcase__change {
  width: auto;
}

/* ------------------------------------------------------------------ footer */

.menu-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* Scoped: leadrboard.css styles .social-icons for the in-game result card. */
.menu-footer .social-icons {
  display: flex;
  gap: 6px;
  margin: 0;
}

.menu-footer .social-icons a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: var(--ui-text-dim);
  transform: none;
  transition: color 120ms steps(2);
}

.menu-footer .social-icons svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.65));
}

.menu-footer .social-icons a:hover {
  border: 0;
  background: none;
  color: var(--ui-amber);
}

.menu-footer .social-icons a:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 0;
}

#versionWatermark {
  color: var(--ui-text-dim);
  font-size: 11px;
  user-select: none;
}

/* ------------------------------------------------------------------ toast */

.menu-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--menu-dock-height) + 34px + env(safe-area-inset-bottom));
  z-index: 2600;
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 16px;
  color: var(--ui-text);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
  transform: translateX(-50%);
  --px-outline: var(--ui-amber);
}

.menu-toast[data-tone='error'] {
  --px-outline: var(--ui-red);
  color: #ffd9d3;
}

/* ------------------------------------------------------------------ dialogs */
/* Window plate, steel tape, buttons, inputs and tabs come from the kit in game-ui.css. */

.name-dialog .ui-input {
  text-align: center;
  font-size: 22px;
  min-height: 54px;
}

.name-dialog .ui-actions {
  margin-top: 20px;
}

.popup-auth-buttons {
  display: grid;
  gap: 12px;
  width: min(100%, 340px);
  margin: 0 auto;
}

.popup-auth-buttons .popup-connect-btn {
  width: 100%;
  margin: 0;
}

.login-dialog .close-button,
.duos-dialog .close-button {
  width: min(100%, 220px);
  margin: 18px auto 0;
}

/* Duos */
.duos-dialog__create {
  width: min(100%, 340px);
}

.duos-dialog__join {
  width: min(100%, 340px);
  margin: 0 auto;
}

.duos-dialog__join-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.duos-dialog__join-row .ui-button {
  width: auto;
  min-height: 54px;
}

.duos-dialog__code {
  min-height: 54px;
  font-size: 22px;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
}

.duos-dialog__code::placeholder {
  letter-spacing: 3px;
}

/* Hero picker: a stakes window, so it carries amber tape. */
.hero-picker.ui-dialog {
  width: min(860px, calc(100vw - 40px));
}

.hero-picker.ui-dialog::before {
  background-image: var(--ui-stripe-amber);
}

/* "Play as Terminator" stays on one line. */
.hero-picker .ui-actions--row {
  width: min(100%, 500px);
}

.hero-picker__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: stretch;
  gap: 18px;
  margin-bottom: 16px;
}

.hero-picker__stage {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-content: center;
  gap: 8px;
  padding: 12px;
  background:
    radial-gradient(ellipse 62% 46% at 50% 50%, rgba(242, 177, 52, 0.16), transparent 72%),
    var(--ui-grime) 0 0 / var(--ui-grime-size) repeat,
    var(--ui-well);
  box-shadow: inset 0 0 0 var(--ui-px) var(--ui-steel-lo);
}

.hero-picker__canvas {
  width: 288px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 96 / 88;
}

.hero-picker__details {
  display: grid;
  gap: 8px;
  text-align: center;
}

.hero-picker__name {
  margin: 0;
  color: var(--ui-text-bright);
  font-size: 33px;
  font-weight: normal;
  letter-spacing: 3px;
  line-height: 1;
  text-shadow:
    0 var(--ui-px) 0 var(--ui-amber-edge),
    0 calc(2 * var(--ui-px)) 0 var(--ui-frame);
  text-transform: uppercase;
}

.hero-picker__weapon {
  margin: 0;
  color: var(--ui-amber-text);
  font-size: 11px;
  line-height: 1.4;
}

.hero-picker__tagline {
  margin: 0;
  color: var(--ui-text-muted);
  font-size: 11px;
  line-height: 1.6;
}

/* Ten heroes: a 3-column grid of cards, a lone card on the last row in the middle column (wide
   and landscape screens show two rows of five instead, below). */
.hero-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-content: center;
}

.hero-card:last-child:nth-child(3n + 1) {
  grid-column: 2;
}

.hero-card {
  --card-accent: var(--ui-accent);
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  margin: calc(2 * var(--ui-px));
  padding: 10px 8px 12px;
  border: 0;
  background: linear-gradient(180deg, #1c1f21 0, #151719 100%);
  box-shadow:
    0 calc(-1 * var(--ui-px)) 0 0 var(--ui-steel),
    0 var(--ui-px) 0 0 var(--ui-steel),
    calc(-1 * var(--ui-px)) 0 0 0 var(--ui-steel),
    var(--ui-px) 0 0 0 var(--ui-steel),
    0 calc(3 * var(--ui-px)) 0 0 rgba(0, 0, 0, 0.5);
  color: var(--ui-text);
  cursor: pointer;
  text-align: center;
}

.hero-card__portrait {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at 50% 75%, color-mix(in srgb, var(--card-accent) 26%, transparent), transparent 70%);
}

.hero-card__name {
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero-card__weapon {
  max-width: 100%;
  min-height: 2.6em;
  color: var(--ui-text-muted);
  font-size: 11px;
  line-height: 1.3;
}

.hero-card:hover {
  background: linear-gradient(180deg, #24282b 0, #1a1d1f 100%);
}

/* Hover frames are amber everywhere; the selected card keeps its accent frame (below). */
.hero-card:hover:not([aria-checked='true']) {
  box-shadow:
    0 calc(-1 * var(--ui-px)) 0 0 var(--ui-amber),
    0 var(--ui-px) 0 0 var(--ui-amber),
    calc(-1 * var(--ui-px)) 0 0 0 var(--ui-amber),
    var(--ui-px) 0 0 0 var(--ui-amber),
    0 calc(3 * var(--ui-px)) 0 0 rgba(0, 0, 0, 0.5);
}

/*
 * Selected: the hero's own accent (identity) drawn with the same notched frame as every window
 * (accent ring, black ring) plus a stepped hard-pixel glow in that accent.
 */
.hero-card[aria-checked='true'] {
  --card-glow-near: color-mix(in srgb, var(--card-accent) 42%, transparent);
  --card-glow-far: color-mix(in srgb, var(--card-accent) 16%, transparent);
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, color-mix(in srgb, var(--card-accent) 18%, transparent), transparent 75%),
    linear-gradient(180deg, #24282b 0, #191b1d 100%);
  box-shadow:
    0 calc(-1 * var(--ui-px)) 0 0 var(--card-accent),
    0 var(--ui-px) 0 0 var(--card-accent),
    calc(-1 * var(--ui-px)) 0 0 0 var(--card-accent),
    var(--ui-px) 0 0 0 var(--card-accent),
    0 0 0 calc(2 * var(--ui-px)) var(--ui-frame),
    0 calc(-2 * var(--ui-px) - 2px) 0 0 var(--card-glow-near),
    0 calc(2 * var(--ui-px) + 2px) 0 0 var(--card-glow-near),
    calc(-2 * var(--ui-px) - 2px) 0 0 0 var(--card-glow-near),
    calc(2 * var(--ui-px) + 2px) 0 0 0 var(--card-glow-near),
    0 calc(-2 * var(--ui-px) - 4px) 0 0 var(--card-glow-far),
    0 calc(2 * var(--ui-px) + 4px) 0 0 var(--card-glow-far),
    calc(-2 * var(--ui-px) - 4px) 0 0 0 var(--card-glow-far),
    calc(2 * var(--ui-px) + 4px) 0 0 0 var(--card-glow-far);
}

.hero-card[aria-checked='true'] .hero-card__name {
  color: var(--card-accent);
}

.hero-card[data-current='true']::after {
  content: "Current";
  padding: 3px 6px 2px;
  background: var(--ui-toxic-deep);
  box-shadow: 0 0 0 var(--ui-px) var(--ui-frame);
  color: var(--ui-toxic);
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
}

.hero-card:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: calc(2 * var(--ui-px));
}

.hero-picker__note {
  margin: 0 auto 14px;
  max-width: 52ch;
  color: var(--ui-text-muted);
  font-size: 11px;
  line-height: 1.6;
}

.hero-picker .ui-field-error {
  margin: -6px 0 12px;
  text-align: center;
}

/* Tablets and phones in portrait: the cards take four rows, so they show portrait + name only;
   the stage names the focused hero's weapon (the cards keep it in their aria-label). */
@media (max-width: 960px) {
  .hero-card__weapon {
    display: none;
  }
}

/* Desktop and landscape tablets: a wider window with the ten cards in two rows of five beside
   the stage (about the same card width as the 3-column grid). */
@media (min-width: 961px) {
  .hero-picker.ui-dialog {
    width: min(1100px, calc(100vw - 40px));
  }

  .hero-picker__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .hero-picker__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .hero-card:last-child:nth-child(3n + 1) {
    grid-column: auto;
  }
}

/* ------------------------------------------------------------------ drawers (chat + friends) */

.chat-panel,
.social-panel {
  position: fixed;
  top: max(var(--menu-drawer-top), calc(env(safe-area-inset-top) + 16px));
  bottom: calc(var(--menu-dock-height) + 30px + env(safe-area-inset-bottom));
  z-index: 1500;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 32px));
  max-height: 720px;
  margin: auto 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    var(--ui-grime) 0 0 / var(--ui-grime-size) repeat,
    linear-gradient(180deg, #1b1e20 0, #131517 54px, #111314 100%);
  box-shadow:
    0 calc(-1 * var(--ui-px)) 0 0 var(--ui-steel),
    0 var(--ui-px) 0 0 var(--ui-steel),
    calc(-1 * var(--ui-px)) 0 0 0 var(--ui-steel),
    var(--ui-px) 0 0 0 var(--ui-steel),
    0 0 0 calc(2 * var(--ui-px)) var(--ui-frame),
    0 calc(4 * var(--ui-px)) 0 calc(2 * var(--ui-px)) rgba(0, 0, 0, 0.5);
  font-family: var(--ui-font);
  visibility: visible;
  transform: translateX(0);
  transition: transform 200ms steps(5), visibility 0s linear 0s;
}

.chat-panel {
  left: max(16px, env(safe-area-inset-left));
}

.social-panel {
  right: max(16px, env(safe-area-inset-right));
}

.chat-panel.minimized {
  visibility: hidden;
  transform: translateX(calc(-100% - 40px));
  transition: transform 200ms steps(5), visibility 0s linear 200ms;
}

.social-panel.minimized {
  visibility: hidden;
  transform: translateX(calc(100% + 40px));
  transition: transform 200ms steps(5), visibility 0s linear 200ms;
}

.chat-panel.closed {
  display: none;
}

.chat-header,
.social-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: calc(8px + 2 * var(--ui-px)) 10px 8px 14px;
  border-bottom: var(--ui-px) solid var(--ui-frame);
  background: linear-gradient(180deg, #212427, #1a1d1f);
  box-shadow: inset 0 calc(-1 * var(--ui-px)) 0 0 var(--ui-steel-lo);
  color: var(--ui-text-bright);
  font-size: 11px;
  text-transform: uppercase;
}

/* Routine drawers carry the neutral steel tape. */
.chat-header::before,
.social-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(2 * var(--ui-px));
  background: var(--ui-stripe-steel) 0 0 / var(--ui-tile) repeat;
}

.chat-title,
.social-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  line-height: 1;
}

.chat-icon {
  display: inline-flex;
  color: var(--ui-amber);
}

/* Pixel icons drawn as crisp inline SVG (the pixel font has no icon glyphs). */
.pixel-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 0 var(--ui-shadow));
}

.chat-icon .pixel-icon {
  width: 22px;
  height: 22px;
}

.online-count {
  color: var(--ui-toxic);
  font-size: 11px;
}

.chat-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.chat-control-btn,
.social-control-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
}

.chat-control-btn:hover,
.social-control-btn:hover {
  background: rgba(242, 177, 52, 0.14);
  color: var(--ui-amber-hi);
}

/* 'X' drawn from two pixel bars. */
.panel-close-glyph {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
}

.panel-close-glyph::before,
.panel-close-glyph::after {
  content: "";
  position: absolute;
  top: 6px;
  left: -1px;
  width: 16px;
  height: 3px;
  background: currentColor;
  transform: rotate(45deg);
}

.panel-close-glyph::after {
  transform: rotate(-45deg);
}

.chat-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.online-users {
  border-bottom: var(--ui-px) solid var(--ui-steel-lo);
  background: rgba(0, 0, 0, 0.22);
}

.online-users-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 36px;
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.online-users-header:hover {
  color: var(--ui-text);
}

/* Pixel caret. */
.toggle-icon {
  width: 9px;
  height: 6px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 78% 33%, 78% 67%, 56% 67%, 56% 100%, 44% 100%, 44% 67%, 22% 67%, 22% 33%, 0 33%);
  transition: transform 120ms steps(2);
}

.online-users.collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.online-users-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 104px;
  padding: 0 12px 10px;
  overflow-y: auto;
  color: var(--ui-text);
  font-size: 11px;
}

.online-users.collapsed .online-users-list {
  display: none;
}

.online-user {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 3px 8px 3px 3px;
  background: rgba(255, 244, 222, 0.035);
}

.online-user-avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  image-rendering: pixelated;
  background: var(--ui-well);
}

.online-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-container {
  flex: 1;
  min-height: 0;
  padding: 10px 10px 10px 14px;
  overflow: hidden;
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding-right: 4px;
  overflow-y: auto;
}

.message {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 7px 8px;
  background: rgba(255, 244, 222, 0.035);
  box-shadow: inset var(--ui-px) 0 0 0 var(--ui-steel);
}

.message-avatar {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
  background: var(--ui-well);
}

.message-content {
  min-width: 0;
}

.message-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.message-author {
  overflow: hidden;
  color: var(--ui-amber-text);
  font-size: 11px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.message-time {
  flex: 0 0 auto;
  color: var(--ui-text-dim);
  font-size: 11px;
}

.message-text {
  color: #dde4e6;
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.chat-input-area {
  padding: 10px 12px;
  border-top: var(--ui-px) solid var(--ui-steel-lo);
  background: rgba(0, 0, 0, 0.25);
}

.auth-prompt,
.social-auth-prompt p {
  text-align: center;
}

.auth-prompt p,
.social-auth-prompt p {
  margin: 0 0 10px;
  color: var(--ui-text-muted);
  font-size: 11px;
  line-height: 1.6;
}

.chat-auth-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* With no MetaMask installed the Telegram button is the only provider: full width. */
body[data-login-metamask='hidden'] .chat-auth-buttons {
  grid-template-columns: 1fr;
}

.chat-auth-btn {
  min-width: 0;
  min-height: 38px;
  padding: 7px 8px;
}

.chat-input-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

#chatMessageInput,
#socialSearchInput,
#socialDmInput {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  border-radius: 0;
  font-size: 11px;
}

.send-btn {
  flex: 0 0 auto;
  width: auto;
}

/* Friends */
.social-count {
  min-width: 22px;
  padding: 3px 5px 2px;
  background: var(--ui-red-face);
  box-shadow: 0 0 0 2px var(--ui-frame);
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
  text-align: center;
}

.social-auth-prompt {
  display: none;
  flex: 1;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 20px;
}

.social-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.social-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px 10px 0;
}

.social-tab {
  min-width: 0;
  min-height: 34px;
  padding: 6px 4px;
  border: 0;
  background: var(--ui-face);
  box-shadow: inset 0 calc(-1 * var(--ui-px)) 0 0 var(--ui-steel-lo);
  color: var(--ui-text-muted);
  cursor: pointer;
  font-family: var(--ui-font);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.social-tab.active {
  background: linear-gradient(180deg, var(--ui-amber) 0 50%, var(--ui-amber-lo) 50% 100%);
  box-shadow: inset 0 calc(-1 * var(--ui-px)) 0 0 var(--ui-amber-edge);
  color: var(--ui-amber-ink);
}

.social-tab:hover:not(.active) {
  color: var(--ui-text);
}

.social-status {
  min-height: 22px;
  padding: 6px 14px 0;
  color: var(--ui-amber-text);
  font-size: 11px;
  line-height: 1.4;
}

.social-view {
  flex: 1;
  min-height: 0;
  padding: 6px 12px 12px;
  overflow: hidden;
}

.social-view[hidden] {
  display: none !important;
}

.social-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
  padding-right: 4px;
  overflow-y: auto;
}

.social-list--compact {
  height: auto;
  max-height: 140px;
  margin-bottom: 10px;
}

.social-empty {
  padding: 14px 12px;
  background: rgba(255, 244, 222, 0.035);
  color: var(--ui-text-muted);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

.social-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  padding: 8px;
  background: rgba(255, 244, 222, 0.035);
  box-shadow: inset var(--ui-px) 0 0 0 var(--ui-steel);
}

.social-row__avatar {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
  background: var(--ui-well);
}

.social-row__main {
  min-width: 0;
}

.social-row__name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ui-text-bright);
  font-size: 11px;
  line-height: 1.3;
  text-transform: uppercase;
}

.social-row__name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-online-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--ui-toxic);
  box-shadow: 0 0 0 2px var(--ui-frame), 0 0 0 4px rgba(124, 240, 90, 0.22);
}

.social-row__meta {
  margin-top: 4px;
  color: var(--ui-text-muted);
  font-size: 11px;
  line-height: 1.3;
}

.social-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.social-mini-btn {
  width: auto;
  min-height: 30px;
  padding: 5px 9px;
  font-size: 11px;
}

.social-subtitle {
  margin: 4px 0 8px;
  color: var(--ui-amber-text);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.social-search-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.social-dm-view {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.social-back-btn {
  align-self: flex-start;
  width: auto;
}

.social-dm-header {
  min-height: 22px;
  color: var(--ui-amber);
  font-size: 22px;
  line-height: 1;
  text-transform: uppercase;
}

.social-dm-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding-right: 4px;
  overflow-y: auto;
}

.social-dm-message {
  max-width: 86%;
  padding: 7px 9px;
  background: rgba(255, 244, 222, 0.035);
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.social-dm-message--own {
  align-self: flex-end;
  background: rgba(242, 177, 52, 0.16);
}

.social-dm-message__meta {
  margin-bottom: 3px;
  color: var(--ui-text-muted);
  font-size: 11px;
}

.social-dm-message a {
  color: var(--ui-amber-hi);
}

.social-dm-form {
  display: flex;
  gap: 8px;
  padding-top: 8px;
  border-top: var(--ui-px) solid var(--ui-steel-lo);
}

.social-list::-webkit-scrollbar,
.social-dm-messages::-webkit-scrollbar,
.messages-list::-webkit-scrollbar,
.online-users-list::-webkit-scrollbar {
  width: 6px;
}

.social-list::-webkit-scrollbar-thumb,
.social-dm-messages::-webkit-scrollbar-thumb,
.messages-list::-webkit-scrollbar-thumb,
.online-users-list::-webkit-scrollbar-thumb {
  background: var(--ui-steel);
}

/* --- dock buttons ------------------------------------------------------------------------- */

.dock-btn {
  position: fixed;
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  z-index: 1600;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: var(--menu-dock-height);
  height: var(--menu-dock-height);
  padding: 0 16px 0 14px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #222629 0 50%, #1b1e20 50% 100%);
  box-shadow:
    inset 0 calc(-1 * var(--ui-px)) 0 0 #0e1011,
    inset 0 var(--ui-px) 0 0 rgba(255, 244, 222, 0.06),
    0 calc(-1 * var(--ui-px)) 0 0 var(--ui-steel),
    0 var(--ui-px) 0 0 var(--ui-steel),
    calc(-1 * var(--ui-px)) 0 0 0 var(--ui-steel),
    var(--ui-px) 0 0 0 var(--ui-steel),
    0 0 0 calc(2 * var(--ui-px)) var(--ui-frame),
    0 calc(3 * var(--ui-px)) 0 calc(2 * var(--ui-px)) rgba(0, 0, 0, 0.45);
  color: var(--ui-amber);
  cursor: pointer;
  font-family: var(--ui-font);
}

.dock-btn--left {
  left: max(19px, calc(env(safe-area-inset-left) + 3px));
}

.dock-btn--right {
  right: max(19px, calc(env(safe-area-inset-right) + 3px));
}

.dock-btn .pixel-icon {
  width: 24px;
  height: 24px;
}

.dock-btn__label {
  color: var(--ui-text);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dock-btn:hover {
  background: linear-gradient(180deg, #2b3033 0 50%, #232629 50% 100%);
  box-shadow:
    inset 0 calc(-1 * var(--ui-px)) 0 0 #0e1011,
    inset 0 var(--ui-px) 0 0 rgba(255, 244, 222, 0.06),
    0 calc(-1 * var(--ui-px)) 0 0 var(--ui-amber),
    0 var(--ui-px) 0 0 var(--ui-amber),
    calc(-1 * var(--ui-px)) 0 0 0 var(--ui-amber),
    var(--ui-px) 0 0 0 var(--ui-amber),
    0 0 0 calc(2 * var(--ui-px)) var(--ui-frame),
    0 calc(3 * var(--ui-px)) 0 calc(2 * var(--ui-px)) rgba(0, 0, 0, 0.45);
}

.dock-btn[aria-expanded='true'] {
  background: linear-gradient(180deg, var(--ui-amber) 0 50%, var(--ui-amber-lo) 50% 100%);
  color: var(--ui-amber-ink);
}

.dock-btn[aria-expanded='true'] .dock-btn__label {
  color: var(--ui-amber-ink);
}

.dock-btn[aria-expanded='true'] .pixel-icon {
  filter: none;
}

/* Keyboard focus: 2 px white outside the element's own black ring. */
.chat-toggle-btn:focus-visible,
.social-toggle-btn:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: calc(2 * var(--ui-px));
}

.chat-control-btn:focus-visible,
.social-control-btn:focus-visible,
.social-tab:focus-visible,
.online-users-header:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: -2px;
}

.player-card__portrait:focus-visible,
.player-card__address:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: var(--ui-px);
}

.chat-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  background: var(--ui-red-face);
  box-shadow: 0 0 0 2px var(--ui-frame);
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
}

/* ------------------------------------------------------------------ responsive */

/* Laptop heights (1280x720 and similar): tighter stack. */
@media (max-height: 800px) and (min-width: 761px) {
  :root {
    --menu-btn-height: 56px;
  }

  .menu-shell {
    gap: 10px;
  }

  .menu-logo__word {
    font-size: 55px;
  }

  .menu-stack {
    gap: 10px;
    padding: 12px;
  }

  .menu.home-menu {
    gap: 8px;
  }

  /* Choose Hero: the rows of cards fit a 720 px screen; the stage names the focused hero's
     weapon (the cards keep it in their aria-label). */
  .hero-card__weapon {
    display: none;
  }
}

/* Tablets / narrow laptops: stack and showcase share the width evenly. */
@media (max-width: 1080px) {
  :root {
    --menu-stack-width: 360px;
  }

  .player-card {
    max-width: 70vw;
  }
}

/* Phones and small tablets (portrait): one column, showcase on top. */
@media (max-width: 760px) {
  :root {
    --menu-btn-height: 58px;
    --menu-dock-height: 48px;
    --menu-gutter: 14px;
  }

  .menu-shell {
    gap: 12px;
  }

  .menu-topbar {
    align-items: center;
  }

  .menu-logo__word {
    font-size: 44px;
  }

  .menu-logo__tag {
    display: none;
  }

  .player-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    max-width: none;
    padding: 6px 8px 6px 6px;
  }

  .player-card__portrait {
    width: 44px;
    height: 44px;
  }

  .player-card__portrait img {
    width: 36px;
    height: 36px;
  }

  .player-card__name {
    max-width: 120px;
    font-size: 11px;
  }

  .player-card .connection-status {
    display: none;
  }

  /* Logged in, the card holds name + ticket count + Log out in ~210 px: the ticket readout
     shrinks to icon + number and the button tightens, so nothing runs under it. */
  .player-card__info {
    overflow: hidden;
  }

  .player-card__ticket-unit,
  .player-card__ticket-timer {
    display: none;
  }

  .player-card__wallet .ui-button {
    min-height: 34px;
    padding-inline: 8px;
  }

  .menu-footer #versionWatermark {
    display: none;
  }

  .player-card__auth .auth-button {
    display: none !important;
  }

  .player-card__login {
    display: inline-flex !important;
  }

  .player-card__wallet .player-card__address {
    display: none;
  }

  .menu-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'showcase'
      'stack';
    align-content: start;
    gap: 14px;
  }

  .menu-stack {
    padding: 12px;
  }

  .hero-showcase {
    width: 100%;
    gap: 8px;
  }

  .hero-showcase__stage {
    height: calc(var(--scene-px) * 72px);
  }

  .hero-picker__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 10px;
  }

  .hero-picker__stage {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: none;
    gap: 10px;
    padding: 8px;
  }

  .hero-picker__canvas {
    width: 144px;
  }

  .hero-picker__details {
    text-align: left;
  }

  .hero-picker__name {
    font-size: 22px;
  }

  .hero-picker__grid {
    gap: 6px;
  }

  /* Ten cards in four rows fit a phone screen: the stage above names the focused hero's
     weapon, so the cards show a smaller portrait + name only (the weapon stays in their
     aria-label). */
  .hero-card {
    gap: 4px;
    padding: 6px 2px 8px;
  }

  .hero-card__portrait {
    width: 64px;
    height: 64px;
  }

  .hero-card__weapon {
    display: none;
  }

  /* "TERMINATOR" fits a 90 px card down to 360 px wide phones. */
  .hero-card__name {
    letter-spacing: 0;
  }


  .chat-panel,
  .social-panel {
    top: max(12px, env(safe-area-inset-top));
    width: calc(100vw - 24px);
    max-height: none;
  }

  .chat-panel {
    left: 12px;
  }

  .social-panel {
    right: 12px;
  }
}

/* Short phones (iPhone SE, small Androids): a shorter stage keeps PLAY on the first screen. */
@media (max-width: 760px) and (max-height: 700px) {
  :root {
    --menu-btn-height: 52px;
  }

  .hero-showcase__stage {
    height: calc(var(--scene-px) * 58px);
  }

  .menu-logo__word {
    font-size: 33px;
  }

  .hero-card__portrait {
    width: 64px;
    height: 64px;
  }
}

/* Phones: logged in, the name gets the room and Log out becomes a pixel exit icon (the
   button's text stays its accessible name). */
@media (max-width: 480px) {
  .player-card__wallet .player-card__logout {
    width: calc(17 * var(--ui-px));
    min-width: 0;
    padding: 0;
    font-size: 0;
  }

  .player-card__logout::before {
    content: "";
    width: calc(12 * var(--ui-px));
    height: calc(12 * var(--ui-px));
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath fill='%23e8eef0' d='M1 1h6v1H1zM1 2h1v8H1zM1 10h6v1H1zM6 2h1v2H6zM6 8h1v2H6zM4 5h7v2H4zM8 3h1v2H8zM9 4h1v1H9zM8 7h1v2H8zM9 7h1v1H9z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45));
  }

  .player-card__name {
    max-width: none;
  }
}

/* Very narrow phones. */
@media (max-width: 380px) {
  .menu-logo__word {
    font-size: 33px;
  }

  .menu-btn {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding-inline: 10px;
  }

  .menu-btn__icon {
    width: 24px;
    height: 24px;
  }

  .dock-btn__label {
    display: none;
  }

  /* Keeps "Rifle · steady stream" on one row at 360 px. */
  .hero-showcase__plate {
    gap: 8px;
    padding-inline: 8px;
  }
}

/* Phones in landscape and other short screens: two columns, no hints. */
@media (max-height: 520px) and (min-width: 561px) {
  :root {
    --menu-btn-height: 44px;
    --menu-label: 22px;
    --menu-dock-height: 40px;
  }

  .menu-shell {
    gap: 8px;
    padding-bottom: calc(var(--menu-dock-height) + 16px + env(safe-area-inset-bottom));
  }

  .menu-logo__word {
    font-size: 33px;
  }

  .menu-logo__tag {
    display: none;
  }

  .player-card {
    padding: 4px 6px 4px 4px;
  }

  .player-card__portrait {
    width: 40px;
    height: 40px;
  }

  .player-card__portrait img {
    width: 36px;
    height: 36px;
  }

  .player-card__name {
    font-size: 11px;
  }

  .player-card__auth .auth-button {
    display: none !important;
  }

  .player-card__login {
    display: inline-flex !important;
  }

  .player-card__wallet .player-card__address {
    display: none;
  }

  .menu-main {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas: 'stack showcase';
    align-items: start;
    gap: 16px;
  }

  .menu-stack {
    gap: 6px;
    padding: 8px;
  }

  .menu.home-menu {
    gap: 4px;
  }

  .menu-btn {
    grid-template-columns: 24px minmax(0, 1fr);
    padding: 6px 12px 8px 10px;
  }

  .menu-btn__icon {
    width: 24px;
    height: 24px;
  }

  .menu-btn__hint {
    display: none;
  }

  /* Ranked keeps one short ticket line under its label (side by side it squeezed into a
     word-per-line column on 568-667 px wide phones): the balance, or at 0 tickets the refill
     countdown, which is the message then. The full readout is in the player card. */
  .menu-btn--ranked .menu-btn__text {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .ranked-ticket-balance {
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
  }

  .ranked-ticket-balance > span {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ranked-ticket-buckets,
  .ranked-ticket-countdown {
    display: none !important;
  }

  .ranked-button[data-ticket-state='insufficient'] .ranked-ticket-summary {
    display: none;
  }

  .ranked-button[data-ticket-state='insufficient'] .ranked-ticket-countdown:not([hidden]) {
    display: inline !important;
  }

  .menu-btn--primary {
    min-height: var(--menu-btn-height);
  }

  .menu-stack__row {
    gap: 8px;
    padding-top: 0;
  }

  .menu-mini-btn {
    min-height: 36px;
  }

  .hero-showcase {
    gap: 6px;
  }

  .hero-showcase__stage {
    height: calc(var(--scene-px) * 68px);
  }

  .hero-showcase__plate {
    padding: 6px 8px 6px 6px;
  }

  .hero-showcase__portrait {
    width: 36px;
    height: 36px;
  }

  .hero-showcase__name {
    font-size: 11px;
  }

  .menu-footer {
    display: none;
  }

  /* Choose Hero fits one short screen: small stage, the cards in two rows of five. */
  .popup h2 {
    margin-bottom: 10px;
    font-size: 22px;
  }

  .hero-picker.ui-dialog {
    padding-top: calc(10px + 3 * var(--ui-px));
    padding-bottom: 10px;
  }

  .hero-picker__body {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr);
    gap: 10px;
    margin-bottom: 10px;
  }

  .hero-picker__stage {
    padding: 6px;
  }

  .hero-picker__canvas {
    width: 144px;
  }

  .hero-picker__name {
    font-size: 22px;
  }

  .hero-picker__tagline,
  .hero-card__weapon {
    display: none;
  }

  .hero-picker__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .hero-card:last-child:nth-child(3n + 1) {
    grid-column: auto;
  }

  .hero-card {
    gap: 4px;
    padding: 4px 2px 6px;
  }

  .hero-card__portrait {
    width: 64px;
    height: 64px;
  }

  .hero-card__name {
    letter-spacing: 0;
  }

  /* Both dock buttons move under the showcase (the right column), icon-only, so they never
     cover the play stack. */
  .dock-btn {
    min-width: var(--menu-dock-height);
    padding: 0 10px;
  }

  .dock-btn__label {
    display: none;
  }

  .dock-btn--left {
    left: auto;
    right: calc(max(19px, calc(env(safe-area-inset-right) + 3px)) + var(--menu-dock-height) + 26px);
  }

  .menu-shell {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .chat-panel,
  .social-panel {
    top: max(8px, env(safe-area-inset-top));
    bottom: calc(var(--menu-dock-height) + 20px + env(safe-area-inset-bottom));
    max-height: none;
  }
}

/* The shortest landscape phones (568x320): a shorter stage keeps the hero plate clear of the
   dock buttons underneath it. */
@media (max-height: 360px) and (min-width: 561px) {
  .hero-showcase__stage {
    height: calc(var(--scene-px) * 50px);
  }
}

/* 4K and large desktop monitors: everything one step up the 11 px type grid. */
@media (min-width: 2200px) and (min-height: 1200px) {
  :root {
    --menu-drawer-top: 176px;
    --menu-label: 33px;
    --menu-hint: 22px;
    --menu-btn-height: 92px;
    --menu-stack-width: 600px;
    --menu-dock-height: 72px;
  }

  .menu-logo__word {
    font-size: 110px;
  }

  .menu-logo__tag {
    font-size: 22px;
    letter-spacing: 6px;
  }

  .menu-btn__label {
    letter-spacing: 3px;
  }

  .menu-btn__icon {
    width: 48px;
    height: 48px;
  }

  .menu-btn {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 18px;
    padding: 14px 22px 16px 18px;
  }

  .menu-mini-btn {
    min-height: 64px;
    font-size: 22px;
  }

  .menu-mini-btn .pixel-icon {
    width: 24px;
    height: 24px;
  }

  .player-card {
    max-width: min(980px, 62vw);
  }

  .player-card__portrait {
    width: 84px;
    height: 84px;
  }

  .player-card__portrait img {
    width: 72px;
    height: 72px;
  }

  .player-card__name {
    font-size: 33px;
    max-width: 400px;
  }

  .status-text,
  .player-card__tickets {
    font-size: 22px;
  }

  /* 22 px weapon type: wide enough for "Shotgun · 5 pellets · short range" on one row. */
  .hero-showcase {
    width: min(100%, 740px);
  }

  .hero-showcase__portrait {
    width: 72px;
    height: 72px;
  }

  .hero-showcase__name {
    font-size: 33px;
  }

  .hero-showcase__weapon,
  .ui-eyebrow {
    font-size: 22px;
  }

  .ui-eyebrow,
  .status-text,
  .dock-btn__label {
    letter-spacing: 2px;
  }

  .hero-showcase__name {
    letter-spacing: 3px;
  }

  .dock-btn__label {
    font-size: 22px;
  }

  .dock-btn .pixel-icon {
    width: 36px;
    height: 36px;
  }

  .chat-panel,
  .social-panel {
    width: 560px;
    max-height: 1100px;
  }

  .player-card__auth .ui-button,
  .player-card__wallet .ui-button,
  .player-card__address,
  .hero-showcase__change {
    min-height: 56px;
    padding: 10px 18px;
    font-size: 22px;
  }
}

/*
 * True 4K at 1 CSS px per device px (3840x2160): the main layout steps up again, and the
 * overlays, drawers and dock are zoomed 2x, which keeps the 11 px type grid exact (11 -> 22).
 */
@media (min-width: 3200px) and (min-height: 1800px) {
  :root {
    --menu-label: 44px;
    --menu-hint: 22px;
    --menu-btn-height: 124px;
    --menu-stack-width: 820px;
    --menu-dock-height: 64px;
    --menu-gutter: 64px;
  }

  .menu-shell {
    padding-bottom: calc(var(--menu-dock-height) * 2 + 60px);
  }

  .menu-logo__word {
    font-size: 154px;
  }

  .menu-btn__label {
    letter-spacing: 4px;
  }

  .hero-showcase__name {
    letter-spacing: 4px;
  }

  .menu-stack {
    gap: 24px;
    padding: 28px;
  }

  .menu.home-menu {
    gap: 20px;
  }

  .menu-btn {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 24px;
    padding: 18px 28px 22px 24px;
  }

  .menu-btn__icon {
    width: 64px;
    height: 64px;
  }

  .menu-btn__text {
    gap: 12px;
  }

  .menu-stack__row {
    gap: 20px;
  }

  .menu-mini-btn {
    min-height: 88px;
    gap: 14px;
  }

  .menu-mini-btn .pixel-icon {
    width: 32px;
    height: 32px;
  }

  .player-card {
    gap: 20px;
    max-width: min(1400px, 62vw);
    padding: 16px 20px 16px 16px;
  }

  .player-card__portrait {
    width: 112px;
    height: 112px;
  }

  .player-card__portrait img {
    width: 96px;
    height: 96px;
  }

  .player-card__name {
    font-size: 44px;
    max-width: 640px;
  }

  .player-card__auth .ui-button,
  .player-card__wallet .ui-button,
  .player-card__address,
  .hero-showcase__change {
    min-height: 80px;
    padding: 14px 24px;
  }

  .hero-showcase {
    width: min(100%, 820px);
    gap: 24px;
  }

  .hero-showcase__plate {
    gap: 24px;
    padding: 18px 22px 18px 18px;
  }

  .hero-showcase__portrait {
    width: 96px;
    height: 96px;
  }

  .hero-showcase__name {
    font-size: 44px;
  }

  .menu-footer .social-icons a {
    width: 72px;
    height: 72px;
  }

  .menu-footer .social-icons svg {
    width: 44px;
    height: 44px;
  }

  #versionWatermark {
    font-size: 22px;
  }

  .menu-page .ui-overlay > *,
  .chat-panel,
  .social-panel,
  .dock-btn,
  .menu-toast {
    zoom: 2;
  }

  .chat-panel,
  .social-panel {
    width: 380px;
    max-height: 720px;
  }

  .dock-btn__label {
    font-size: 11px;
    letter-spacing: 1px;
  }

  .dock-btn .pixel-icon {
    width: 24px;
    height: 24px;
  }
}

/*
 * Forced colours drop the box-shadow frames: give the menu's own controls real outlines (the
 * kit pieces are covered in game-ui.css), mark the selected states with Highlight, and keep
 * the pixel glyphs drawn from backgrounds visible.
 */
@media (forced-colors: active) {
  .menu-btn,
  .menu-mini-btn,
  .hero-card,
  .player-card__portrait,
  .player-card__address,
  .social-tab,
  .chat-control-btn,
  .social-control-btn {
    outline: 2px solid ButtonText;
    outline-offset: -2px;
  }

  .menu-btn--primary {
    --btn-text: HighlightText;
    --btn-accent: HighlightText;
    forced-color-adjust: none;
    background: Highlight;
  }

  .menu-btn--primary .menu-btn__hint {
    color: HighlightText;
  }

  .hero-card[aria-checked='true'],
  .social-tab.active,
  .dock-btn[aria-expanded='true'] {
    outline: 4px solid Highlight;
    outline-offset: -4px;
  }

  .menu-btn:focus-visible,
  .menu-mini-btn:focus-visible,
  .hero-card:focus-visible,
  .player-card__portrait:focus-visible,
  .player-card__address:focus-visible,
  .social-tab:focus-visible,
  .chat-control-btn:focus-visible,
  .social-control-btn:focus-visible,
  .dock-btn:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  .panel-close-glyph::before,
  .panel-close-glyph::after,
  .toggle-icon {
    forced-color-adjust: none;
    background: ButtonText;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-backdrop__scene,
  .hero-showcase__canvas,
  .menu-btn,
  .chat-panel,
  .social-panel,
  .chat-panel.minimized,
  .social-panel.minimized,
  .toggle-icon {
    transition: none;
  }

  .ranked-button.is-nudged {
    animation: none;
  }
}