/* ---- layout & chrome only; all gameplay visuals live on the canvas ---- */
:root {
  --red:  #ff5d6e;
  --blue: #58a6ff;
  --bg:   #07080f;
  --panel:#11131f;

  /* Scoring ring colors. Canvas reads these from CSS. */
  --ring-10:  #58a6ff;
  --ring-20:  #74e0b5;
  --ring-30:  #ffd0a3;
  --ring-50:  #fffd8f;
  --ring-100: #dfa9ff;

  --ring-stroke-alpha: 0.62;
  --ring-fill-alpha: 0.055;
  --ring-text-alpha: 0.88;
  --ring-core-alpha: 0.78;

  --ring-active-stroke-boost: 0.10;
  --ring-active-fill-boost: 0.018;
  --ring-active-glow: 7;
  --ring-active-line-boost: 0.55;
  --ring-active-pulse-speed: 240;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  background: var(--bg);
  color: #dfe6ff;
  font-family: "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- scoreboard (hidden: HUD now lives inside the canvas launch zone) ----
   DOM kept so updateHUD() keeps working without JS changes. */
#scoreboard {
  display: none;
  width: min(560px, 100vw);
  align-items: stretch;
  justify-content: space-between;
  padding: 8px 14px 4px;
  gap: 10px;
}
.score-card {
  flex: 1;
  background: var(--panel);
  border: 1px solid #222742;
  border-radius: 10px;
  padding: 6px 12px;
  text-align: center;
  transition: box-shadow .25s, border-color .25s;
}
.score-card .name { font-size: 11px; letter-spacing: 2px; opacity: .75; }
.score-card .pts  { font-size: 26px; font-weight: 700; line-height: 1.1; }
.score-card .proj { font-size: 11px; min-height: 14px; opacity: .85; }
#card-red  .name, #card-red  .pts { color: var(--red); }
#card-blue .name, #card-blue .pts { color: var(--blue); }
/* glow derives from the CSS variable so custom marble colors carry through */
.score-card.active-red  { border-color: var(--red);  box-shadow: 0 0 14px color-mix(in srgb, var(--red) 35%, transparent); }
.score-card.active-blue { border-color: var(--blue); box-shadow: 0 0 14px color-mix(in srgb, var(--blue) 35%, transparent); }
#round-info {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-width: 120px; text-align: center;
}
#round-label { font-size: 12px; letter-spacing: 1px; opacity: .8; }
#shot-label  { font-size: 14px; font-weight: 600; }

/* ---- table canvas ---- */
#table-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  padding: 8px 0 4px;
}
canvas#table {
  display: block;
  touch-action: none;       /* we handle all pointer gestures ourselves */
  border-radius: 12px;
}

/* ---- footer buttons ---- */
#footer {
  width: min(560px, 100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 10px;
}
#footer .hint { display: none; } /* premium view: hint lives off-screen */
#footer.dev-hidden { display: none; }
body.broadcast-mode #footer,
body.site-embed-mode #footer { display: none; }
/* Dev footer controls hidden unless ?dev=1 (body.dev-tools-enabled) */
.dev-control { display: none; }
body.dev-tools-enabled .dev-control { display: inline-block; }

/* Challenge mode footer: hide normal controls, show only the challenge row */
body.challenge-footer-active #footer .public-control,
body.challenge-footer-active #footer .dev-control,
body.challenge-footer-active #footer .hint { display: none; }
button {
  background: var(--panel);
  color: #dfe6ff;
  border: 1px solid #2c3252;
  border-radius: 8px;
  padding: 6px 16px;
  font-size: 13px;
  cursor: pointer;
}
button:hover { border-color: #4a5380; }

/* ---- live physics tuning panel (toggle with T) ---- */
#tuner {
  position: fixed;
  top: 60px; right: 10px;
  width: 230px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #0d0f1add;
  border: 1px solid #2c3252;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 11px;
  display: none;
  z-index: 10;
  backdrop-filter: blur(4px);
}
#tuner.open { display: block; }
#tuner h3 { font-size: 12px; margin-bottom: 6px; letter-spacing: 1px; }
#tuner h3.section { margin-top: 12px; padding-top: 8px; border-top: 1px solid #2c3252; }
#tuner label { display: block; margin-top: 7px; opacity: .85; }
#tuner input[type=range] { width: 100%; }
#tuner input[type=color] {
  width: 100%; height: 22px; margin-top: 2px;
  border: 1px solid #2c3252; border-radius: 4px;
  background: none; padding: 0; cursor: pointer;
}
#tuner .val { float: right; opacity: .7; }
#aim-debug {
  margin-top: 8px; padding-top: 6px; border-top: 1px solid #2c3252;
  font-size: 10px; opacity: .7; font-family: monospace;
}

/* ---- analytics consent card (geometry from canvas mapping in analytics.js) ---- */
.analytics-consent[hidden] {
  display: none !important;
}

.analytics-consent {
  position: fixed;
  z-index: 50;
  display: block;
  padding: 0;
  margin: 0;
  pointer-events: none;
  background: none;
  overflow: visible;
  box-sizing: border-box;
}

.analytics-consent-card {
  container-type: inline-size;

  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(20px, 5vw, 28px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4vw, 22px);
  border: 1px solid rgba(88, 166, 255, 0.42);
  border-radius: 18px;
  background: rgba(13, 15, 26, 0.94);
  color: #dfe6ff;
  box-shadow:
    0 0 0 1px rgba(154, 218, 239, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  pointer-events: auto;
  overflow: hidden;
  box-sizing: border-box;
  transform: translateY(var(--analytics-slide-distance, 320px));
  opacity: 0.72;
  transition:
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 240ms ease-out;
}

.analytics-consent.is-open .analytics-consent-card {
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .analytics-consent-card {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

.analytics-consent-title {
  margin: 0;
  font-size: clamp(21px, 6cqw, 26px);
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.analytics-consent-body {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  padding-right: 12px;

  font-size: clamp(16px, 4.4cqw, 19px);
  line-height: 1.5;
  color: rgba(235, 240, 255, 0.96);

  scrollbar-width: thin;
  scrollbar-color:
    rgba(88, 190, 230, 0.9)
    rgba(5, 10, 24, 0.55);
}

.analytics-consent-body::-webkit-scrollbar {
  width: 10px;
}

.analytics-consent-body::-webkit-scrollbar-track {
  background: rgba(5, 10, 24, 0.55);
  border: 1px solid rgba(88, 166, 255, 0.12);
  border-radius: 999px;
}

.analytics-consent-body::-webkit-scrollbar-thumb {
  min-height: 54px;
  border: 2px solid rgba(5, 10, 24, 0.75);
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(154, 218, 239, 0.96),
    rgba(30, 170, 200, 0.8)
  );
  box-shadow:
    0 0 8px rgba(88, 190, 230, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.analytics-consent-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(190, 237, 250, 1),
    rgba(50, 190, 220, 0.95)
  );
}

.analytics-consent-body::-webkit-scrollbar-corner {
  background: transparent;
}

.analytics-consent-body p {
  margin: 0 0 0.95em;
}

.analytics-consent-body p:last-child {
  margin-bottom: 0;
}

.analytics-consent-body ul {
  margin: 0 0 1em;
  padding-left: 1.25em;
}

.analytics-consent-body li {
  margin: 0.42em 0;
  padding-left: 0.12em;
  font-size: inherit;
  line-height: 1.45;
}

.analytics-consent-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  flex: 0 0 auto;
  margin-top: 4px;
}

.analytics-consent-accept,
.analytics-consent-decline {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: clamp(52px, 14cqw, 60px);

  padding: 15px 18px;
  border-radius: 13px;

  font-size: clamp(17px, 4.8cqw, 20px);
  line-height: 1.2;
  font-weight: 900;
  text-align: center;

  cursor: pointer;
}

.analytics-consent-accept {
  border: 1px solid rgba(154, 218, 239, 0.55);
  background: linear-gradient(180deg, #4db8e8 0%, #2a8fc4 100%);
  color: #07111f;
}

.analytics-consent-accept:hover {
  filter: brightness(1.06);
}

.analytics-consent-accept:focus-visible {
  outline: 2px solid #9adaef;
  outline-offset: 2px;
}

.analytics-consent-decline {
  border: 1px solid rgba(88, 166, 255, 0.35);
  background: rgba(17, 19, 31, 0.92);
  color: #dfe6ff;
}

.analytics-consent-decline:hover {
  border-color: rgba(154, 218, 239, 0.5);
  background: rgba(24, 28, 44, 0.95);
}

.analytics-consent-decline:focus-visible {
  outline: 2px solid #9adaef;
  outline-offset: 2px;
}

.analytics-consent-privacy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;

  margin-top: 2px;
  min-height: 44px;
  padding: 9px 10px;

  border: none;
  background: none;
  color: rgba(154, 218, 239, 0.96);

  font-size: clamp(15px, 4cqw, 17px);
  line-height: 1.2;
  font-weight: 800;

  text-decoration: underline;
  text-underline-offset: 3px;
}

.analytics-consent-privacy:hover {
  color: #ffffff;
}

.analytics-consent-privacy:focus-visible {
  outline: 2px solid #9adaef;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- new match confirmation modal ---- */
.new-match-confirm[hidden] {
  display: none;
}

.new-match-confirm {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 6, 12, 0.72);
  backdrop-filter: blur(5px);
}

.new-match-confirm-card {
  width: min(380px, calc(100vw - 36px));
  padding: 18px;
  border: 1px solid rgba(154, 218, 239, 0.32);
  border-radius: 16px;
  background: rgba(13, 15, 26, 0.96);
  color: #dfe6ff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62);
  text-align: center;
}

.new-match-confirm-card h2 {
  margin: 0 0 10px;
  font-size: 22px;
  color: #ffffff;
}

.new-match-confirm-copy {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(223, 230, 255, 0.78);
}

.new-match-current-setup {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 800;
  color: #9adaef;
}

.new-match-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.new-match-confirm-actions button {
  min-height: 40px;
}

#new-match-restart {
  background: rgba(30, 170, 200, 0.9);
  color: #07111f;
  font-weight: 800;
}

/* ---- match setup overlay ---- */
.match-setup-overlay[hidden],
#match-setup-board-section[hidden] {
  display: none;
}

.match-setup-overlay {
  position: fixed;
  inset: 0;
  z-index: 94;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 6, 12, 0.72);
  backdrop-filter: blur(5px);
}

.match-setup-card {
  width: min(430px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(154, 218, 239, 0.32);
  border-radius: 16px;
  background: rgba(13, 15, 26, 0.97);
  color: #dfe6ff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62);
}

.match-setup-card h2 {
  margin: 0 0 14px;
  font-size: 22px;
  color: #ffffff;
  text-align: center;
}

.match-setup-section {
  margin-top: 14px;
}

.match-setup-label {
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(223, 230, 255, 0.72);
}

.match-setup-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.match-setup-row button,
.match-setup-board,
.match-setup-actions button {
  min-height: 40px;
}

.match-setup-row button.selected,
.match-setup-board.selected {
  background: rgba(30, 170, 200, 0.9);
  color: #07111f;
  font-weight: 800;
  border-color: rgba(154, 218, 239, 0.75);
}

.match-setup-board-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.match-setup-board-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.match-setup-board-group-label {
  padding: 4px 4px 7px;
  border-bottom: 1px solid rgba(154, 218, 239, 0.18);
  color: rgba(154, 218, 239, 0.82);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.match-setup-board-section {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.match-setup-board-scroll {
  min-height: 0;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 6px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(154, 218, 239, 0.62) rgba(5, 10, 24, 0.62);
}

.match-setup-board-scroll::-webkit-scrollbar {
  width: 8px;
}

.match-setup-board-scroll::-webkit-scrollbar-track {
  background: rgba(5, 10, 24, 0.62);
  border-radius: 999px;
}

.match-setup-board-scroll::-webkit-scrollbar-thumb {
  background: rgba(154, 218, 239, 0.62);
  border-radius: 999px;
  border: 2px solid rgba(5, 10, 24, 0.62);
}

.match-setup-board-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(154, 218, 239, 0.86);
}

.match-setup-board {
  text-align: left;
}

.match-setup-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

#match-setup-start {
  background: rgba(30, 170, 200, 0.9);
  color: #07111f;
  font-weight: 800;
}

.match-setup-summary {
  margin-top: 14px;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(223, 230, 255, 0.72);
  text-align: center;
}

/* ---- online multiplayer flow ---- */
.multiplayer-ui-overlay[hidden] {
  display: none;
}

.multiplayer-ui-overlay {
  position: fixed;
  inset: 0;
  z-index: 96;

  display: grid;
  place-items: center;

  padding: 18px;

  background:
    rgba(5, 6, 12, 0.62);

  backdrop-filter:
    blur(5px);
}

.multiplayer-ui-panel {
  width:
    min(
      410px,
      calc(100vw - 36px)
    );

  max-height:
    calc(100dvh - 36px);

  overflow: hidden;

  border:
    1px solid
    rgba(
      154,
      218,
      239,
      0.34
    );

  border-radius:
    18px;

  background:
    rgba(
      13,
      15,
      26,
      0.97
    );

  color:
    #dfe6ff;

  box-shadow:
    0 18px 54px
    rgba(
      0,
      0,
      0,
      0.68
    );
}

.multiplayer-ui-content {
  display: flex;
  flex-direction: column;

  max-height:
    calc(100dvh - 36px);

  overflow-y: auto;

  padding: 22px;
}

.multiplayer-ui-content.multiplayer-ui-content-lobby {
  /*
   * The connected lobby itself stays fixed.
   *
   * The board picker owns its own constrained scroll region,
   * so opening the board menu must never create a scrollbar
   * on the entire Online Match prompt.
   */
  overflow-y: hidden;
  overflow-x: visible;
}

.multiplayer-ui-header {
  text-align: center;
}

.multiplayer-ui-kicker {
  margin-bottom: 8px;

  color:
    #9adaef;

  font-size: 11px;
  font-weight: 900;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}

.multiplayer-ui-header h2 {
  margin: 0;

  color:
    #ffffff;

  font-size: 26px;
  line-height: 1.1;

  font-weight: 950;
}

.multiplayer-ui-copy {
  margin:
    12px auto 0;

  max-width: 330px;

  color:
    rgba(
      223,
      230,
      255,
      0.82
    );

  font-size: 14px;
  line-height: 1.45;
}

.multiplayer-ui-match-complete-reason {
  margin:
    14px auto 0;

  max-width: 330px;

  color:
    rgba(
      223,
      230,
      255,
      0.9
    );

  font-size: 14px;
  line-height: 1.4;
}

.multiplayer-ui-match-complete-reason strong {
  color:
    #9adaef;

  font-weight: 850;
}

.multiplayer-ui-match-complete-board {
  margin:
    6px auto 0;

  max-width: 330px;

  color:
    rgba(
      223,
      230,
      255,
      0.82
    );

  font-size: 14px;
  line-height: 1.4;
}

.multiplayer-ui-match-complete-board strong {
  color:
    #dfe6ff;

  font-weight: 750;
}

.multiplayer-ui-actions {
  display: grid;
  gap: 10px;

  margin-top: 22px;
}

.multiplayer-ui-invite-actions {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 10px;
}

.multiplayer-ui-invite-actions button {
  width: 100%;
  min-width: 0;
}

.multiplayer-ui-actions button {
  width: 100%;
  min-height: 48px;

  padding:
    12px 16px;

  font-size: 15px;
  font-weight: 850;
}

.multiplayer-ui-primary {
  border-color:
    rgba(
      154,
      218,
      239,
      0.68
    );

  background:
    linear-gradient(
      180deg,
      #4db8e8 0%,
      #2a8fc4 100%
    );

  color:
    #07111f;
}

.multiplayer-ui-primary:hover {
  filter:
    brightness(1.06);
}

.multiplayer-ui-secondary {
  border-color:
    rgba(
      154,
      218,
      239,
      0.42
    );

  color:
    #dfe6ff;
}

.multiplayer-ui-back {
  border-color:
    transparent;

  background:
    transparent;

  color:
    rgba(
      185,
      202,
      245,
      0.84
    );
}

.multiplayer-ui-divider {
  display: flex;
  align-items: center;
  gap: 10px;

  margin:
    5px 0 1px;

  color:
    rgba(
      185,
      202,
      245,
      0.7
    );

  font-size: 12px;
  font-weight: 750;
}

.multiplayer-ui-divider::before,
.multiplayer-ui-divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background:
    rgba(
      154,
      218,
      239,
      0.16
    );
}

.multiplayer-ui-form {
  margin-top: 22px;
}

.multiplayer-ui-label {
  display: block;

  margin-bottom: 8px;

  color:
    rgba(
      223,
      230,
      255,
      0.76
    );

  font-size: 12px;
  font-weight: 850;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}

.multiplayer-ui-inline-label {
  display: flex;
  align-items: baseline;
  gap: 4px;

  white-space: nowrap;
}

.multiplayer-ui-inline-label strong {
  flex: 0 0 auto;
}

.multiplayer-ui-inline-label-note {
  color: rgba(185, 202, 245, 0.65);

  font-size: 12px;
  font-weight: 400;

  letter-spacing: normal;
  text-transform: none;

  line-height: 1.35;
}

.multiplayer-ui-input {
  width: 100%;
  min-height: 48px;

  padding:
    11px 13px;

  border:
    1px solid
    rgba(
      154,
      218,
      239,
      0.4
    );

  border-radius:
    11px;

  background:
    rgba(
      5,
      10,
      24,
      0.92
    );

  color:
    #ffffff;

  font:
    800 16px
    "Segoe UI",
    system-ui,
    sans-serif;

  outline: none;

  user-select: text;
  -webkit-user-select: text;
}

.multiplayer-ui-board-select {
  appearance: none;
  -webkit-appearance: none;

  padding-right: 42px;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      rgba(223, 230, 255, 0.9) 50%
    ),
    linear-gradient(
      135deg,
      rgba(223, 230, 255, 0.9) 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 15px) 50%;

  background-size:
    5px 5px,
    5px 5px;

  background-repeat:
    no-repeat;
}

/* ---- multiplayer custom board picker ---- */

.multiplayer-ui-board-picker {
  position: relative;
  z-index: 10;
  width: 100%;
}

.multiplayer-ui-board-picker summary {
  list-style: none;
}

.multiplayer-ui-board-picker summary::-webkit-details-marker {
  display: none;
}

.multiplayer-ui-board-picker-trigger {
  width: 100%;
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 11px 14px;

  border:
    1px solid
    rgba(
      154,
      218,
      239,
      0.4
    );

  border-radius: 11px;

  background:
    rgba(
      5,
      10,
      24,
      0.92
    );

  color: #ffffff;

  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;

  cursor: pointer;

  outline: none;
}

.multiplayer-ui-board-picker-trigger:hover {
  border-color:
    rgba(
      154,
      218,
      239,
      0.68
    );
}

.multiplayer-ui-board-picker-trigger:focus-visible {
  border-color:
    rgba(
      154,
      218,
      239,
      0.88
    );

  box-shadow:
    0 0 0 3px
    rgba(
      154,
      218,
      239,
      0.12
    );
}

.multiplayer-ui-board-picker-trigger.is-locked {
  cursor: default;
  opacity: 0.72;
}

.multiplayer-ui-board-readonly {
  cursor: default;
}

.multiplayer-ui-board-readonly:hover {
  border-color:
    rgba(
      154,
      218,
      239,
      0.4
    );
}

.multiplayer-ui-board-picker-chevron {
  width: 9px;
  height: 9px;

  flex: 0 0 auto;

  border-right:
    2px solid
    rgba(
      223,
      230,
      255,
      0.86
    );

  border-bottom:
    2px solid
    rgba(
      223,
      230,
      255,
      0.86
    );

  transform:
    rotate(45deg)
    translateY(-2px);

  transition:
    transform
    140ms ease;
}

.multiplayer-ui-board-picker[open]
  .multiplayer-ui-board-picker-chevron {
  transform:
    rotate(225deg)
    translate(-2px, -2px);
}

.multiplayer-ui-board-picker-menu {
  /*
   * The board list is a real dropdown overlay.
   *
   * It must not participate in the lobby's document flow,
   * otherwise opening it makes the entire Online Match panel
   * taller and causes the whole dialog to scroll.
   */
  position: absolute;

  top:
    calc(
      100% +
      6px
    );

  left: 0;

  z-index: 20;

  width: 100%;

  /*
   * JavaScript sets the exact maximum height when the picker opens,
   * based on the available space inside the Online Match panel.
   */
  max-height: 420px;

  overflow-y: auto;
  overflow-x: hidden;

  padding:
    8px 6px
    8px 8px;

  border:
    1px solid
    rgba(
      154,
      218,
      239,
      0.34
    );

  border-radius: 11px;

  background:
    rgba(
      12,
      16,
      31,
      0.99
    );

  box-shadow:
    0 16px 34px
    rgba(
      0,
      0,
      0,
      0.58
    );

  overscroll-behavior:
    contain;

  -webkit-overflow-scrolling:
    touch;

  /*
   * Match the branded scrollbar language already used
   * by Match Setup and the Player Card.
   */
  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(
      154,
      218,
      239,
      0.72
    )
    rgba(
      5,
      10,
      24,
      0.62
    );
}

.multiplayer-ui-board-picker-menu::-webkit-scrollbar {
  width: 8px;
}

.multiplayer-ui-board-picker-menu::-webkit-scrollbar-track {
  background:
    rgba(
      5,
      10,
      24,
      0.62
    );

  border-radius:
    999px;
}

.multiplayer-ui-board-picker-menu::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      180deg,
      rgba(
        154,
        218,
        239,
        0.92
      ),
      rgba(
        30,
        170,
        200,
        0.72
      )
    );

  border-radius:
    999px;

  border:
    2px solid
    rgba(
      5,
      10,
      24,
      0.72
    );
}

.multiplayer-ui-board-picker-menu::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(
      180deg,
      rgba(
        190,
        237,
        250,
        1
      ),
      rgba(
        50,
        190,
        220,
        0.92
      )
    );
}

.multiplayer-ui-board-picker-menu::-webkit-scrollbar-corner {
  background:
    transparent;
}

.multiplayer-ui-board-picker-group + 
.multiplayer-ui-board-picker-group {
  margin-top: 11px;
}

.multiplayer-ui-board-picker-group-label {
  margin: 0 4px 4px;
  padding: 3px 2px 6px;

  border-bottom:
    1px solid
    rgba(
      154,
      218,
      239,
      0.18
    );

  color:
    rgba(
      154,
      218,
      239,
      0.78
    );

  font-size: 12px;
  font-weight: 900;

  letter-spacing:
    0.06em;

  text-transform:
    uppercase;
}

.multiplayer-ui-board-picker-group-options {
  display: grid;
  gap: 2px;
}

.multiplayer-ui-board-picker-option {
  width: 100%;
  min-height: 34px;

  display: flex;
  align-items: center;

  padding: 7px 9px;

  border: 1px solid transparent;
  border-radius: 6px;

  background:
    transparent;

  color:
    rgba(
      245,
      248,
      255,
      0.94
    );

  font-size: 14px;
  font-weight: 750;

  line-height: 1.2;
  text-align: left;
}

.multiplayer-ui-board-picker-option:hover,
.multiplayer-ui-board-picker-option:focus-visible {
  border-color:
    rgba(
      154,
      218,
      239,
      0.2
    );

  background:
    rgba(
      88,
      166,
      255,
      0.1
    );

  outline: none;
}

.multiplayer-ui-board-picker-option.is-selected {
  border-color:
    rgba(
      88,
      166,
      255,
      0.34
    );

  background:
    rgba(
      88,
      166,
      255,
      0.18
    );

  color: #ffffff;
}

@media (max-width: 420px) {
  .multiplayer-ui-board-picker-option {
    min-height: 38px;
  }
}

.multiplayer-ui-input:focus {
  border-color:
    rgba(
      154,
      218,
      239,
      0.88
    );

  box-shadow:
    0 0 0 3px
    rgba(
      154,
      218,
      239,
      0.12
    );
}

.multiplayer-ui-inline-error {
  margin-top: 8px;

  color:
    #ffb8c2;

  font-size: 13px;
  line-height: 1.35;
}

.multiplayer-ui-inline-error[hidden] {
  display: none;
}

@media (max-width: 420px) {
  .multiplayer-ui-content {
    padding:
      20px 16px;
  }

  .multiplayer-ui-header h2 {
    font-size:
      24px;
  }
}

.multiplayer-ui-optional {
  margin-left: 5px;
  color: rgba(185, 202, 245, 0.58);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.multiplayer-ui-field-note {
  margin-top: 7px;
  color: rgba(185, 202, 245, 0.65);
  font-size: 12px;
  line-height: 1.35;
}

/* ---- multiplayer rematch: previous match summary ---- */

.multiplayer-ui-last-match {
  width: 100%;
  margin-top: 4px;
  margin-bottom: 18px;
}

.multiplayer-ui-last-match-row {
  width: 100%;
  min-height: 48px;

  display: flex;
  align-items: center;

  padding: 0 16px;

  border:
    1px solid
    rgba(
      154,
      218,
      239,
      0.4
    );

  border-radius: 11px;

  background:
    rgba(
      5,
      10,
      24,
      0.92
    );

  color: #dfe6ff;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.multiplayer-ui-center {
  text-align: center;
}

.multiplayer-ui-room-code-input {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.multiplayer-ui-loading {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin: 30px 0 14px;
  color: rgba(223, 230, 255, 0.86);
  text-align: center;
}

.multiplayer-ui-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(154, 218, 239, 0.2);
  border-top-color: rgba(154, 218, 239, 0.95);
  border-radius: 999px;
  animation: multiplayer-ui-spin 800ms linear infinite;
}

@keyframes multiplayer-ui-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .multiplayer-ui-spinner {
    animation-duration: 1600ms;
  }
}

.multiplayer-ui-room-card {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid rgba(154, 218, 239, 0.24);
  border-radius: 14px;
  background: rgba(5, 10, 24, 0.72);
  text-align: center;
}

.multiplayer-ui-room-card span {
  display: block;
  color: rgba(185, 202, 245, 0.68);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.multiplayer-ui-room-card strong {
  display: block;
  margin-top: 7px;
  color: #ffffff;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.multiplayer-ui-share-field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 14px;
}

.multiplayer-ui-share-field button {
  min-height: 48px;
  padding: 10px 14px;
  white-space: nowrap;
}

.multiplayer-ui-centered-error {
  margin-top: 16px;
  text-align: center;
}

@media (max-width: 420px) {
  .multiplayer-ui-share-field {
    grid-template-columns: 1fr;
  }

  .multiplayer-ui-share-field button {
    width: 100%;
  }
}

.multiplayer-ui-player-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
  margin-bottom: 18px;
}

.multiplayer-ui-player-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(154, 218, 239, 0.18);
  border-radius: 14px;
  background: rgba(5, 10, 24, 0.72);
}

.multiplayer-ui-player-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(223, 230, 255, 0.82);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.multiplayer-ui-seat-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
}

.multiplayer-ui-player-red .multiplayer-ui-seat-dot {
  background: var(--red);
  box-shadow: 0 0 8px rgba(255, 93, 110, 0.5);
}

.multiplayer-ui-player-blue .multiplayer-ui-seat-dot {
  background: var(--blue);
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.5);
}

.multiplayer-ui-local-badge {
  margin-left: auto;
  padding: 3px 6px;
  border: 1px solid rgba(154, 218, 239, 0.28);
  border-radius: 999px;
  color: #9adaef;
  font-size: 9px;
  letter-spacing: 0.06em;
}

.multiplayer-ui-player-name {
  margin-top: 12px;
  overflow: hidden;
  color: #ffffff;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multiplayer-ui-player-status {
  margin-top: 7px;
  color: rgba(185, 202, 245, 0.68);
  font-size: 12px;
  font-weight: 750;
}

.multiplayer-ui-player-card.is-ready {
  border-color: rgba(82, 214, 143, 0.48);
  box-shadow: inset 0 0 0 1px rgba(82, 214, 143, 0.08);
}

.multiplayer-ui-player-card.is-ready .multiplayer-ui-player-status {
  color: #8be4b4;
}

.multiplayer-ui-player-card.is-disconnected {
  border-color: rgba(255, 111, 127, 0.38);
  opacity: 0.78;
}

.multiplayer-ui-player-card.is-disconnected .multiplayer-ui-player-status {
  color: #ffb8c2;
}

.multiplayer-ui-player-card.is-waiting {
  border-style: dashed;
  opacity: 0.76;
}

.multiplayer-ui-music-section {
  margin-top: 12px;
}

.multiplayer-ui-lobby-status {
  min-height: 28px;
  margin: 16px 0 -6px;
  color: rgba(223, 230, 255, 0.82);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.multiplayer-ui-actions button:disabled {
  cursor: not-allowed;
  filter: none;
  opacity: 0.48;
}

@media (max-width: 420px) {
  .multiplayer-ui-player-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    gap: 8px;
  }

  .multiplayer-ui-player-card {
    min-width: 0;
    padding: 11px 10px;
  }

  .multiplayer-ui-player-heading {
    gap: 5px;
    font-size: 11px;
  }

  .multiplayer-ui-seat-dot {
    width: 8px;
    height: 8px;
  }

  .multiplayer-ui-local-badge {
    padding: 2px 5px;
    font-size: 8px;
  }

  .multiplayer-ui-player-name {
    margin-top: 9px;
    font-size: 14px;
  }

  .multiplayer-ui-player-status {
    margin-top: 5px;
    font-size: 11px;
  }
}

/* ---- online multiplayer disconnect prompt ---- */

.multiplayer-ui-reconnect-section {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 54px;

  margin-top: 18px;
  padding: 14px 12px;

  border-top:
    1px solid
    rgba(
      154,
      218,
      239,
      0.22
    );

  border-bottom:
    1px solid
    rgba(
      154,
      218,
      239,
      0.22
    );

  text-align: center;
}

.multiplayer-ui-reconnect-status {
  display: block;

  color:
    #9adaef;

  font-size: 17px;
  font-weight: 900;
  line-height: 1.2;

  text-align: center;
}

.multiplayer-ui-preserved-copy {
  margin:
    16px auto 0;

  max-width: 330px;

  color:
    rgba(
      223,
      230,
      255,
      0.88
    );

  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

.multiplayer-ui-disconnect-actions {
  display: grid;
  gap: 10px;

  margin-top: 12px;
}

.multiplayer-ui-disconnect-actions button {
  width: 100%;
  min-height: 48px;

  padding:
    12px 16px;

  font-size: 15px;
  font-weight: 850;
}

.multiplayer-ui-disconnect-copy-status {
  min-height: 18px;
  margin-top: 8px;
  margin-bottom: 0;
}

.multiplayer-ui-leave-section {
  margin-top: 20px;
  padding-top: 18px;

  border-top:
    1px solid
    rgba(
      154,
      218,
      239,
      0.18
    );
}

.multiplayer-ui-danger {
  width: 100%;
  min-height: 48px;

  padding:
    12px 16px;

  border:
    1px solid
    rgba(
      255,
      74,
      88,
      0.9
    );

  border-radius: 10px;

  background:
    rgba(
      110,
      20,
      32,
      0.16
    );

  color:
    #ff5c68;

  font: inherit;
  font-size: 15px;
  font-weight: 900;

  cursor: pointer;

  transition:
    background 120ms ease,
    border-color 120ms ease,
    transform 120ms ease;
}

.multiplayer-ui-danger:hover {
  border-color:
    #ff5c68;

  background:
    rgba(
      140,
      24,
      39,
      0.28
    );
}

.multiplayer-ui-danger:active {
  transform:
    translateY(
      1px
    );
}

.multiplayer-ui-danger:focus-visible {
  outline:
    2px solid
    rgba(
      255,
      92,
      104,
      0.8
    );

  outline-offset: 3px;
}

@media (max-width: 420px) {
  .multiplayer-ui-invite-actions {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    gap: 8px;
  }

  .multiplayer-ui-invite-actions button {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
  }
}

/* ---- local player name modal ---- */
.player-name-modal[hidden] {
  display: none;
}

.player-name-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 6, 12, 0.72);
  backdrop-filter: blur(5px);
}

.player-name-modal-card {
  width: min(360px, calc(100vw - 36px));
  padding: 18px;
  border: 1px solid rgba(154, 218, 239, 0.32);
  border-radius: 16px;
  background: rgba(13, 15, 26, 0.96);
  color: #dfe6ff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62);
}

.player-name-modal-card h2 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.15;
  color: #ffffff;
}

.player-name-modal-card p {
  margin: 8px 0 14px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(223, 230, 255, 0.78);
}

.player-name-modal-card input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(154, 218, 239, 0.38);
  border-radius: 10px;
  background: rgba(5, 10, 24, 0.92);
  color: #ffffff;
  font: 700 16px "Segoe UI", system-ui, sans-serif;
  outline: none;
}

.player-name-modal-card input:focus {
  border-color: rgba(154, 218, 239, 0.82);
  box-shadow: 0 0 0 3px rgba(154, 218, 239, 0.12);
}

.player-name-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.player-name-modal-actions button {
  flex: 1;
  min-height: 38px;
  padding: 8px 10px;
}

.player-name-save {
  background: rgba(30, 170, 200, 0.95);
  color: #07111f;
  border-color: rgba(154, 218, 239, 0.62);
  font-weight: 900;
}

.player-name-clear {
  flex-basis: 100%;
  color: #ffcf91;
  border-color: rgba(255, 178, 95, 0.42);
}

/* ---- main menu overlay ---- */
.main-menu-overlay[hidden] {
  display: none;
}

.main-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 93;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 6, 12, 0.72);
  backdrop-filter: blur(5px);
}

.main-menu-card {
  width: min(390px, calc(100vw - 36px));
  padding: 18px;
  border: 1px solid rgba(154, 218, 239, 0.32);
  border-radius: 16px;
  background: rgba(13, 15, 26, 0.97);
  color: #dfe6ff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.62);
}

.main-menu-card h2 {
  margin: 0 0 14px;
  font-size: 22px;
  color: #ffffff;
  text-align: center;
}

.main-menu-list {
  display: grid;
  gap: 8px;
}

.main-menu-list button {
  min-height: 42px;
  text-align: left;
}

.main-menu-actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.main-menu-actions button {
  min-height: 40px;
}

/* Use dynamic viewport height on browsers that support it so the layout
   fills the real visible area rather than the full scroll height. */
@supports (height: 100dvh) {
  html,
  body,
  #app {
    height: 100dvh;
  }
}

/* On narrow mobile screens: lift canvas up slightly above the browser
   navigation bar (e.g. Reddit in-app browser). Consent geometry is owned by
   canvas mapping in analytics.js — do not set wrapper position/size here.
   Typography and spacing stay on the main consent rules (no mobile shrink). */
@media (max-width: 700px) {
  #table-wrap {
    align-items: flex-start;
    padding-top: 2px;
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  canvas#table {
    margin-top: 8px;
  }
}

/* Challenge gameplay mobile fit:
   The challenge footer already takes real page space, so do not also reserve
   the old mobile bottom padding. Also remove the negative top margin that
   clips the top of the board on phones. */
@media (max-width: 700px) {
  body.challenge-footer-active #table-wrap {
    align-items: center;
    padding-top: 4px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  }

  body.challenge-footer-active canvas#table {
    margin-top: 0;
  }

  body.challenge-footer-active #footer {
    padding-top: 4px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- local player card / save stats prompt ---- */
.player-card-overlay[hidden] {
  display: none;
}

.player-card-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(5, 6, 12, 0.74);
  backdrop-filter: blur(6px);
}

.player-card-panel {
  position: relative;
  width: min(430px, calc(100vw - 36px));
  height: min(720px, calc(100dvh - 36px));
  max-height: calc(100dvh - 36px);
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(154, 218, 239, 0.34);
  border-radius: 18px;
  background: rgba(13, 15, 26, 0.97);
  color: #dfe6ff;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.68);
}

.player-card-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.player-card-header {
  flex: 0 0 auto;
  padding: 20px 20px 12px;
  border-bottom: 1px solid rgba(154, 218, 239, 0.14);
  background: rgba(13, 15, 26, 0.98);
}

.player-card-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 20px 16px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(154, 218, 239, 0.72) rgba(5, 10, 24, 0.62);
}

.player-card-scroll::-webkit-scrollbar {
  width: 8px;
}

.player-card-scroll::-webkit-scrollbar-track {
  background: rgba(5, 10, 24, 0.62);
  border-radius: 999px;
}

.player-card-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(154, 218, 239, 0.92),
    rgba(30, 170, 200, 0.72)
  );
  border-radius: 999px;
  border: 2px solid rgba(5, 10, 24, 0.72);
}

.player-card-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(154, 218, 239, 0.95);
}

.player-card-footer {
  flex: 0 0 auto;
  padding: 12px 20px 18px;
  border-top: 1px solid rgba(154, 218, 239, 0.14);
  background: rgba(13, 15, 26, 0.98);
}

.player-card-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  background: rgba(8, 14, 30, 0.88);
  color: rgba(223, 230, 255, 0.84);
  border: 1px solid rgba(154, 218, 239, 0.26);
  font-size: 22px;
  line-height: 1;
}

.player-card-kicker {
  margin: 0 38px 8px 0;
  color: #9adaef;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.player-card-panel h2 {
  margin: 0 38px 8px 0;
  color: #ffffff;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 950;
}

.player-card-panel h3 {
  margin: 18px 0 8px;
  color: rgba(245, 248, 255, 0.96);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.player-card-copy {
  margin: 0 0 14px;
  color: rgba(223, 230, 255, 0.82);
  font-size: 14px;
  line-height: 1.4;
}

.player-card-privacy {
  margin: 12px 0 0;
  color: rgba(223, 230, 255, 0.66);
  font-size: 12px;
  line-height: 1.35;
}

.player-card-match-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 10px;
}

.player-card-match-summary div,
.player-card-stat-grid div,
.player-card-best-board {
  padding: 12px;
  border: 1px solid rgba(154, 218, 239, 0.18);
  border-radius: 14px;
  background: rgba(7, 14, 32, 0.74);
}

.player-card-match-summary span,
.player-card-stat-grid span,
.player-card-best-board span {
  display: block;
  margin-bottom: 5px;
  color: rgba(185, 202, 245, 0.72);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.player-card-match-summary strong,
.player-card-stat-grid strong,
.player-card-best-board strong {
  display: block;
  color: #ffffff;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.15;
}

.player-card-identity {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 6px;
}

.player-card-identity strong {
  font-weight: 900;
}

.player-card-identity #player-card-edit-name {
  margin-left: auto;
  flex: 0 0 auto;
}

.player-card-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 10px;
}

.player-card-best-board {
  margin-top: 10px;
}

.player-card-history {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.player-card-history li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(154, 218, 239, 0.14);
  border-radius: 12px;
  background: rgba(5, 10, 24, 0.58);
}

.player-card-history li div {
  min-width: 0;
}

.player-card-history li strong {
  display: block;
  color: rgba(245, 248, 255, 0.94);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-card-history li span {
  display: block;
  margin-top: 2px;
  color: rgba(185, 202, 245, 0.66);
  font-size: 12px;
}

.player-card-history li b {
  color: #9adaef;
  font-size: 17px;
  font-weight: 950;
}

.player-card-history .player-card-empty {
  justify-content: center;
  color: rgba(223, 230, 255, 0.68);
  font-size: 13px;
}

.player-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 0;
  flex-wrap: wrap;
}

.player-card-actions button {
  flex: 1;
  min-height: 40px;
  padding: 9px 12px;
}

.player-card-primary {
  background: rgba(30, 170, 200, 0.95);
  color: #07111f;
  border-color: rgba(154, 218, 239, 0.68);
  font-weight: 950;
}

@media (max-width: 420px) {
  .player-card-header {
    padding: 18px 14px 12px;
  }

  .player-card-scroll {
    padding: 14px;
  }

  .player-card-footer {
    padding: 12px 14px 16px;
  }

  .player-card-match-summary,
  .player-card-stat-grid {
    grid-template-columns: 1fr;
  }

  .player-card-actions button {
    flex-basis: 100%;
  }
}

/* ---- player card footer entry point ---- */
#btn-player-card-footer {
  color: #9adaef;
  border-color: rgba(154, 218, 239, 0.55);
}

#btn-player-card-footer:hover {
  border-color: rgba(154, 218, 239, 0.9);
}

/* Five public footer buttons need tighter spacing on narrow screens. */
@media (max-width: 700px) {
  #footer {
    gap: 6px;
    padding-left: 8px;
    padding-right: 8px;
  }

  #footer .public-control {
    padding-left: 9px;
    padding-right: 9px;
    font-size: 12px;
  }
}