/* ===== Mobile Patch (keep existing design, fix responsiveness) ===== */
:root {
  --safe-x: 16px;
  --safe-y: 16px;
}

/* Prevent horizontal scroll everywhere */
html, body {
  width: 100%;
  overflow-x: hidden;
}

/* Make media and long content behave */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* Container: tighter padding on small screens */
@media (max-width: 820px) {
  .container {
    padding: 16px var(--safe-x) 28px;
  }

  /* Topbar: allow wrapping cleanly, no collisions */
  .topbar {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .topbar .muted {
    width: 100%;
    text-align: left;
  }

  /* Cards: full width, no weird overflow */
  .card {
    width: 100%;
    padding: 16px;
  }

  /* Generic rows: stack instead of squeezing */
  .row {
    gap: 10px;
  }

  /* Inputs/selects: full width on mobile */
  input, select {
    width: 100%;
    max-width: 100%;
  }

  /* Buttons: full-width where it makes sense */
  .btn {
    width: 100%;
  }

  /* Pills: wrap nicely */
  .pill {
    width: 100%;
    justify-content: space-between;
  }

  /* Remove fixed widths in inline styles (common culprit) */
  input[style*="width"] {
    width: 100% !important;
  }
}

/* ===== Host page specific ===== */
@media (max-width: 980px) {
  /* Split layout becomes single column */
  .hostSplit {
    grid-template-columns: 1fr;
  }

  /* Stop sticky scoreboard on mobile */
  .hostRight {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  /* Scoreboard cards: prevent squeeze */
  .teamHead {
    flex-wrap: wrap;
    gap: 10px;
  }

  .teamRight {
    width: 100%;
    justify-content: space-between;
  }

  /* Score buttons: allow wrap */
  .scoreBtns {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .scoreBtns .btn {
    width: auto;
  }

  /* Control button clusters: stack */
  .controlsTop,
  .controlsBottom {
    flex-wrap: wrap;
  }

  .controlsTop .btn,
  .controlsBottom .btn {
    width: 100%;
  }

  /* KV grid: stack labels/fields */
  .kvGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .kvField {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .kvField .field {
    flex: 1 1 180px;
    min-width: 0;
  }

  .kvField .btn {
    flex: 0 0 auto;
    width: auto;
  }
}

/* ===== Player page specific ===== */
@media (max-width: 820px) {
  body.play .container {
    min-height: auto; /* prevent awkward vertical behavior */
    display: block;   /* no flex centering fights on mobile */
  }

  body.play .card {
    max-width: 100%;
  }

  /* HUD pills: wrap and stay readable */
  body.play .hudRow {
    width: 100%;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  body.play .hudRow .pill {
    width: calc(50% - 6px); /* 2 per row */
    justify-content: space-between;
  }

  /* Timer: shrink slightly on mobile */
  body.play #time {
    font-size: 44px;
  }

  /* Team/Table buttons: full width for thumb */
  body.play .teamBtn {
    width: 100%;
    min-width: 0;
  }

  /* Buzz button: keep big but not absurd */
  body.play #buzz {
    height: 84px;
    font-size: 30px;
  }

  /* Lock banner: avoid overflow */
  #lockBanner {
    width: min(820px, calc(100vw - 28px));
    margin: 12px auto 0;
  }
}

/* Extra-small devices */
@media (max-width: 420px) {
  body.play .hudRow .pill {
    width: 100%; /* 1 per row */
  }

  body.play #time {
    font-size: 38px;
  }
}