/* ===================== Operation Arsenal — styles ===================== */

:root {
  --red: #EF0107;
  --red-light: #ff4d47;
  --red-dark: #b5000a;
  --ink: #170303;
  --white: #f7f7f8;
  --pitch-green-1: #2a8f4d;
  --pitch-green-2: #1c6b39;
  --great: #22c55e;
  --good: #84cc16;
  --ok: #eab308;
  --poor: #ef4444;

  --glass-bg: rgba(255, 255, 255, 0.07);
  --glass-bg-strong: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-hover: rgba(255, 255, 255, 0.15);

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--white);
}

body {
  background: #7a0708 url('../assets/background.jpg') center / cover no-repeat fixed;
  position: relative;
  overflow-x: hidden;
}

.halftone-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.10;
  background-image: radial-gradient(circle, #000 1px, transparent 1.3px);
  background-size: 6px 6px;
  mix-blend-mode: multiply;
}

button, select, input, textarea {
  font-family: var(--font);
}

/* ---------- Header / logo / nav ---------- */

.oa-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid var(--glass-border);
  flex-wrap: wrap;
}

.oa-logo {
  display: flex;
  align-items: center;
  flex-direction: column;
  line-height: 0.95;
  cursor: default;
  user-select: none;
}

.oa-logo-img {
  display: none;
  max-height: 52px;
  width: auto;
}

.oa-logo-top, .oa-logo-bottom {
  font-family: var(--font);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.5px;
}

.oa-logo-top { color: var(--white); }
.oa-logo-bottom { color: var(--red-light); }

.oa-nav {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.nav-btn {
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 20px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-btn:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); border-color: var(--white); }
.nav-btn.active {
  background: var(--red);
  color: var(--white);
  border-color: var(--white);
  box-shadow: 0 4px 14px rgba(239, 1, 7, 0.45);
}

#global-logout-btn {
  margin-left: 10px;
  flex-shrink: 0;
}

.stream-mode-btn {
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  color: var(--white);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: padding 0.2s ease, width 0.2s ease;
}
.stream-mode-btn:hover { background: var(--glass-hover); }
.stream-mode-btn .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #888;
  flex-shrink: 0;
}
.hamburger-btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  backdrop-filter: blur(18px);
}
.hamburger-bar { width: 16px; height: 2px; border-radius: 2px; background: var(--white); }

body.stream-mode .stream-mode-btn .dot { background: var(--great); box-shadow: 0 0 6px var(--great); }
body.stream-mode .stream-mode-btn {
  border-color: var(--great);
  padding: 10px;
  width: 34px;
  height: 34px;
  justify-content: center;
}
body.stream-mode .stream-mode-btn .stream-mode-label { display: none; }

.signups-toggle-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--poor); flex-shrink: 0; margin-right: 6px; }
.signups-toggle-btn.open .dot { background: var(--great); box-shadow: 0 0 6px var(--great); }

/* ---------- Layout / tabs ---------- */

#oa-main {
  position: relative;
  z-index: 2;
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.25s ease; }

/* .bingo-brought-by is position: fixed, so it doesn't reserve any space in
   the document flow — without this, scrolling to the "end" of a panel that
   ends right behind the banner leaves its last ~50px permanently covered,
   with no further scroll available to reveal it. */
.tab-panel:has(> .bingo-brought-by) { padding-bottom: 62px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.games-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  max-width: 480px;
  margin: 18vh auto 0;
  padding: 36px 30px;
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  background:
    linear-gradient(135deg, transparent 92%, rgba(0, 0, 0, 0.16) 92%, rgba(0, 0, 0, 0.16) 100%),
    linear-gradient(155deg, #ffffff 0%, #f1eeec 55%, #e2ddd9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -6px 10px rgba(0, 0, 0, 0.05),
    0 10px 24px rgba(0, 0, 0, 0.32);
}
.games-coming-soon-badge {
  font-family: var(--font);
  font-weight: 900;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--white);
  padding: 10px 22px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(155deg, var(--red-light) 0%, var(--red) 55%, var(--red-dark) 100%);
  box-shadow: 0 6px 16px rgba(239, 1, 7, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.games-coming-soon-text {
  font-size: 15px;
  font-weight: 600;
  color: #16100f;
  opacity: 0.75;
  margin: 0;
}

.games-menu-title {
  font-family: var(--font);
  font-weight: 900;
  font-size: 26px;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: center;
}
.games-menu-subtitle { text-align: center; font-size: 14px; font-weight: 600; opacity: 0.7; margin: 4px 0 28px; }
.games-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  max-width: 1000px;
  margin: 0 auto;
}
.game-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.game-card-title {
  font-family: var(--font);
  font-weight: 800;
  font-size: 18px;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.game-card-description { font-size: 13.5px; font-weight: 500; opacity: 0.8; line-height: 1.5; flex: 1; }
.game-card-play-btn { align-self: flex-start; }
.game-card-coming-soon {
  align-self: flex-start;
  font-family: var(--font);
  font-weight: 900;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--white);
  padding: 9px 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(155deg, var(--red-light) 0%, var(--red) 55%, var(--red-dark) 100%);
  box-shadow: 0 4px 12px rgba(239, 1, 7, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.invincibles-back-btn { margin-bottom: 16px; }

.btn {
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  cursor: pointer;
  border: 1px solid var(--glass-border);
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn-primary { background: var(--red); color: var(--white); border-color: transparent; box-shadow: 0 4px 14px rgba(239, 1, 7, 0.4); }
.btn-primary:hover { background: #ff241a; }
.btn-ghost { background: var(--glass-bg); color: var(--white); backdrop-filter: blur(14px); }
.btn-ghost:hover { background: var(--glass-hover); }
.btn-small { font-size: 13px; padding: 7px 13px; }

/* ---------- Pitch toolbar ---------- */

.pitch-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  margin-bottom: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.pitch-toolbar-top { justify-content: space-between; margin-bottom: 16px; }
.pitch-toolbar-bottom { margin-bottom: 0; margin-top: 16px; }

.toolbar-group { display: flex; align-items: center; gap: 10px; }
.toolbar-group label { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.85; }

.toolbar-submit { flex-wrap: wrap; }
#pitch-opponent-input {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--white);
  font-weight: 600;
  min-width: 190px;
}
#pitch-opponent-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.pitch-submit-status { font-size: 12.5px; font-weight: 600; }
.pitch-submit-status.ht-submit-ok { color: var(--great); }
.pitch-submit-status.ht-submit-error { color: var(--red-light); }

.pitch-toolbar-fan { justify-content: center; }
.pitch-fan-rate-hint { font-size: 15px; font-weight: 700; text-align: center; color: var(--white); }
/* A red-tinted word on this toolbar's translucent-over-red background was
   too low-contrast to read at a glance — a solid white pill instead. */
.pitch-fan-rate-hint strong {
  display: inline-block;
  background: var(--white);
  color: var(--red);
  padding: 2px 9px;
  border-radius: 6px;
  font-weight: 800;
}

.pitch-opponent {
  text-align: center;
  font-family: var(--font);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--white);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.bench-wrap {
  max-width: 640px;
  margin: 24px auto 0;
  padding: 18px 16px 0;
  border-top: 1px solid var(--glass-border);
}
.bench-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 10px;
}
.bench-slot.player-slot { position: static; transform: none; }
.bench-slot .slot-avatar { width: 62px; height: 62px; border-radius: 16px; font-size: 19px; }

#formation-select {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--white);
  font-weight: 700;
}

.avg-display { margin-left: auto; }
.avg-label { text-transform: uppercase; font-size: 12px; font-weight: 700; opacity: 0.75; }
.avg-value {
  font-family: var(--font);
  font-weight: 800;
  font-size: 20px;
  color: var(--white);
  background: var(--red);
  border-radius: var(--radius-sm);
  padding: 3px 14px;
}

.toolbar-actions { display: flex; gap: 10px; }

.motm-panel {
  max-width: 640px;
  margin: 24px auto 0;
  padding: 18px 16px 0;
  border-top: 1px solid var(--glass-border);
}
.motm-list { display: flex; justify-content: center; gap: 12px; margin-top: 10px; }
.motm-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 88px;
  padding: 10px 6px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  color: var(--white);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.motm-row:hover { background: var(--glass-bg-strong); }
.motm-row-mine { border: 1.5px solid var(--red-light); background: rgba(239, 1, 7, 0.28); }
.motm-row-photo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  background: linear-gradient(145deg, var(--red-light), var(--red-dark));
  border: 2px solid rgba(255, 255, 255, 0.35);
}
.motm-row-name { font-size: 12px; font-weight: 700; }
.motm-row-pct { font-size: 15px; font-weight: 900; color: var(--red-light); }
.motm-list-readonly .motm-row { cursor: default; }
.motm-list-readonly .motm-row:hover { background: var(--glass-bg); }

/* Shown in place of real players until any fan ratings have come in —
   there's nothing to tally yet, so nothing to point the crown at. */
.motm-row-placeholder { opacity: 0.6; }
.motm-row-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.4);
}

.motm-tie-picker {
  max-width: 640px;
  margin: 0 auto 14px;
  padding: 14px 16px;
  background: rgba(239, 1, 7, 0.15);
  border: 1.5px solid var(--red-light);
  border-radius: var(--radius-md);
  text-align: center;
}
.motm-tie-label { font-family: var(--font); font-weight: 700; font-size: 13.5px; color: var(--white); }
.motm-tie-options { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.motm-tie-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 76px;
  padding: 8px 6px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  color: var(--white);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.motm-tie-option:hover { background: var(--glass-bg-strong); border-color: var(--red-light); }
.motm-tie-option .slot-avatar { width: 44px; height: 44px; border-radius: 12px; }

/* ---------- Pitch ---------- */

.pitch-wrap {
  display: flex;
  justify-content: center;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.pitch {
  position: relative;
  width: min(600px, 100%);
  aspect-ratio: 76 / 100;
  background: repeating-linear-gradient(0deg, var(--pitch-green-1) 0, var(--pitch-green-1) 40px, var(--pitch-green-2) 40px, var(--pitch-green-2) 80px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.pitch-lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }

.pitch-slots { position: absolute; inset: 0; }

.player-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 100px;
}

.slot-avatar-wrap {
  position: relative;
  margin-bottom: 4px;
}

.slot-avatar {
  position: relative;
  overflow: hidden;
  width: 76px;
  height: 76px;
  border-radius: 21px;
  background: linear-gradient(145deg, var(--red-light), var(--red-dark));
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
  font-family: var(--font);
  font-weight: 800;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease;
}
.player-slot:hover .slot-avatar { transform: scale(1.08); }

.slot-avatar-empty { opacity: 0.85; }

.slot-avatar-silhouette {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  color: rgba(255, 255, 255, 0.55);
}

.slot-avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.slot-avatar-photo.loaded { opacity: 1; }

.slot-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--white);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  padding: 1px 6px;
  white-space: nowrap;
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.slot-rating-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 24px;
  height: 20px;
  padding: 0 4px;
  font-size: 11px;
  font-family: var(--font);
  font-weight: 800;
  color: var(--white);
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rating-poor { background: var(--poor); }
.rating-ok { background: var(--ok); }
.rating-good { background: var(--good); }
.rating-great { background: var(--great); }

.slot-rating-badge-fan {
  top: auto;
  bottom: -6px;
  left: auto;
  right: -6px;
  transform: none;
  min-width: 20px;
  height: 17px;
  font-size: 9.5px;
  background: var(--white);
  color: var(--ink);
  border-color: var(--red);
}

.player-slot.fan-rateable { cursor: pointer; }

.motm .slot-avatar { box-shadow: 0 0 0 3px gold, 0 4px 12px rgba(0, 0, 0, 0.6); }
.motm-crown {
  position: absolute;
  top: -24px;
  font-size: 10px;
  font-weight: 800;
  color: gold;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ---------- Popover ---------- */

.popover {
  position: fixed;
  z-index: 50;
  width: min(270px, calc(100vw - 24px));
  background: rgba(30, 10, 10, 0.85);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  color: var(--white);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.popover-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--white);
  opacity: 0.7;
  line-height: 1;
}
.popover-close:hover { opacity: 1; }

.popover-slot-label {
  font-family: var(--font);
  font-weight: 800;
  font-size: 15px;
  color: var(--red-light);
  margin-bottom: 10px;
}

.popover-current-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.popover-current-avatar-wrap .slot-avatar { width: 84px; height: 84px; border-radius: 22px; margin: 0 auto; }
.popover-current-name { font-weight: 800; font-size: 16px; color: var(--white); text-align: center; }

/* A player already in the starting XI is changed via the photo picker
   below, not this native dropdown — it just duplicated the same names
   the picker already shows, so it (and the position label above it)
   stay hidden on every screen size, not just mobile. */
#popover-slot-label,
#popover-player-select {
  display: none;
}
#popover-player-select option { color: #000; }

.popover-player-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 14px;
}
.popover-player-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 60px;
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 2px;
}
.popover-player-picker-item .slot-avatar { width: 42px; height: 42px; margin: 0 auto; }
.popover-player-picker-item.selected .slot-avatar { border-color: var(--red-light); box-shadow: 0 0 0 2px var(--red); }
.popover-player-picker-item span {
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rating-display {
  font-family: var(--font);
  font-weight: 900;
  font-size: 34px;
  text-align: center;
  color: var(--red-light);
}

#rating-range, #fan-rating-range { width: 100%; margin: 10px 0 14px; accent-color: var(--red); }
#fan-rating-range:disabled { opacity: 0.5; }

.popover-actions { display: flex; justify-content: flex-end; }

.fan-rating-summary { display: flex; gap: 8px; margin-bottom: 10px; }
.fan-rating-summary-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 6px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}
.fan-rating-summary-label {
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.7;
  text-align: center;
}
.fan-rating-summary-value { font-family: var(--font); font-weight: 800; font-size: 18px; color: var(--white); }
.fan-rating-your-label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: center;
  opacity: 0.7;
}
.fan-rating-locked-note {
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  color: var(--great);
}
.fan-rating-status { font-size: 12.5px; font-weight: 600; margin-top: 10px; text-align: center; }
.fan-rating-status.ht-submit-ok { color: var(--great); }
.fan-rating-status.ht-submit-error { color: var(--red-light); }

/* ---------- Manage squad modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal {
  position: relative;
  width: min(520px, 100%);
  max-height: 84vh;
  overflow-y: auto;
  background: rgba(30, 10, 10, 0.9);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  color: var(--white);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-header h2 { font-family: var(--font); font-weight: 800; color: var(--white); margin: 0; }
.modal-header .popover-close { position: static; }

.squad-add-form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.squad-add-form input[type="text"] { flex: 1; }
.squad-add-form input, .squad-add-form select {
  padding: 8px 10px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--glass-bg-strong);
  color: var(--white);
  font-weight: 600;
}
.squad-add-form input[type="number"] { width: 64px; }

.squad-group-heading {
  font-family: var(--font);
  font-weight: 800;
  color: var(--red-light);
  margin: 12px 0 6px;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.squad-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.squad-row-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  font-size: 13px;
}
.squad-row-name {
  flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  background: var(--glass-bg-strong); color: var(--white); font-weight: 600;
}
.squad-row-remove {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--white);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.squad-row-remove:hover { background: var(--poor); border-color: transparent; }

.modal-footer { margin-top: 16px; text-align: right; }

.vid-preview-modal { width: min(680px, 100%); }
.vid-preview-modal-author { font-size: 13px; opacity: 0.7; margin: -6px 0 14px; }
.vid-preview-modal-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
}

.account-modal { max-width: 400px; }
.account-modal-current { font-size: 13px; opacity: 0.8; margin: -6px 0 14px; }
.account-modal-current strong { color: var(--white); }
.account-form { display: flex; flex-direction: column; gap: 4px; }
.account-form-label {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  opacity: 0.7;
  margin-top: 10px;
}
.account-form-label span { text-transform: none; font-weight: 500; }
.account-form input {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--white);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
}
.account-form-error { font-size: 13px; font-weight: 600; color: var(--red-light); margin-top: 12px; }
.account-form-success { font-size: 13px; font-weight: 600; color: var(--great); margin-top: 12px; }

.account-admin-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
}
.account-admin-heading {
  font-family: var(--font);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--red-light);
  margin: 0 0 4px;
}
.account-admin-hint { font-size: 12px; opacity: 0.7; margin: 0 0 10px; }
.account-admin-delete-row { display: flex; gap: 8px; }
.account-admin-delete-row input {
  flex: 1;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--white);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
}
.account-admin-error { font-size: 13px; font-weight: 600; color: var(--red-light); margin-top: 10px; }
.account-admin-success { font-size: 13px; font-weight: 600; color: var(--great); margin-top: 10px; }

/* ---------- Hot takes ---------- */

.ht-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.ht-layout-centered { justify-content: center; }

.ht-sidebar {
  width: 300px;
  flex-shrink: 0;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  max-height: 78vh;
  overflow-y: auto;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.ht-sidebar-title {
  font-family: var(--font);
  font-weight: 800;
  font-size: 16px;
  margin: 0 0 10px;
  color: var(--white);
  text-align: center;
}
.ht-sidebar-title:not(:first-child) { margin-top: 24px; }

.ht-add-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.ht-add-form textarea {
  resize: vertical;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--white);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
}
.ht-add-form textarea::placeholder { color: rgba(255, 255, 255, 0.5); }

.ht-queue-list, .ht-history-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

.ht-empty { font-size: 13px; opacity: 0.65; font-weight: 500; }

.ht-queue-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  background: var(--glass-bg-strong);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 500;
}
.ht-queue-item.up-next { background: rgba(239, 1, 7, 0.3); border-color: var(--red); }
.ht-queue-remove { background: none; border: none; color: var(--white); font-size: 16px; cursor: pointer; opacity: 0.7; }
.ht-queue-remove:hover { opacity: 1; }

.ht-submissions-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ht-submission-item {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.ht-submission-text { font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.ht-submission-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ht-submission-author { font-size: 11.5px; opacity: 0.65; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-submission-dismiss { background: none; border: none; color: var(--white); font-size: 16px; cursor: pointer; opacity: 0.6; line-height: 1; }
.ht-submission-dismiss:hover { opacity: 1; }

.ht-submit-status { font-size: 12.5px; font-weight: 600; margin-top: 8px; }
.ht-submit-status.ht-submit-ok { color: var(--great); }
.ht-submit-status.ht-submit-error { color: var(--red-light); }

/* A smaller, more compact variant for the fan "suggest something" boxes. */
#ht-submit-box .ht-add-form,
#vid-submit-box .ht-add-form { gap: 6px; margin-bottom: 0; }
#ht-submit-box textarea,
#vid-submit-box input,
#ht-submit-box .btn,
#vid-submit-box .btn { padding: 7px 10px; font-size: 12.5px; }
#ht-submit-box .ht-sidebar-title,
#vid-submit-box .ht-sidebar-title { font-size: 14px; margin-bottom: 6px; }

.ht-history-item {
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 500;
  border-left: 3px solid var(--ok);
  background: var(--glass-bg-strong);
}
.ht-history-item.ht-history-agree { border-left-color: var(--great); background: rgba(34, 197, 94, 0.12); }
.ht-history-item.ht-history-disagree { border-left-color: var(--poor); background: rgba(239, 68, 68, 0.12); }
.ht-history-verdict { font-family: var(--font); font-weight: 800; font-size: 11px; margin-top: 3px; letter-spacing: 0.5px; }

/* ---------- Hot take stage ---------- */

.ht-stage {
  position: relative;
  flex: 1;
  min-height: 560px;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.ht-drop-zone {
  position: absolute;
  top: 0; bottom: 0;
  width: 16%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  z-index: 1;
}
.ht-drop-zone span {
  font-family: var(--font);
  font-weight: 900;
  writing-mode: vertical-rl;
  letter-spacing: 4px;
  font-size: 22px;
  opacity: 0.9;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.ht-drop-left { left: 0; background: linear-gradient(90deg, rgba(239, 68, 68, 0.4), transparent); }
.ht-drop-left span { transform: rotate(180deg); color: #ffb3af; }
.ht-drop-right { right: 0; background: linear-gradient(270deg, rgba(34, 197, 94, 0.4), transparent); }
.ht-drop-right span { color: #a6ffcc; }
.ht-drop-zone.zone-active { box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.25); }
.ht-drop-zone.zone-active span { opacity: 1; }

/* Fans get clickable vote zones instead of the admin's drag gesture. */
.ht-stage-voting .ht-drop-zone { cursor: pointer; }
.ht-stage-voting .ht-drop-zone.zone-voted { box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.3); }
.ht-stage-voting .ht-drop-zone.zone-voted span { opacity: 1; }
.ht-stage-voting .ht-drop-left.zone-voted { background: linear-gradient(90deg, rgba(239, 68, 68, 0.65), transparent); }
.ht-stage-voting .ht-drop-right.zone-voted { background: linear-gradient(270deg, rgba(34, 197, 94, 0.65), transparent); }

.ht-stage-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 340px;
  width: 100%;
  /* Its own box spans the full stage width (overlapping the drop zones at
     the edges), but only the pack/card inside should actually catch
     clicks — otherwise this transparent wrapper blocks the fan vote
     buttons underneath it. */
  pointer-events: none;
}
.ht-stage-center .ht-pack,
.ht-stage-center .ht-card {
  pointer-events: auto;
}

/* Pack */

.ht-pack {
  width: 190px;
  height: 260px;
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(135deg, var(--red) 0 18px, var(--red-dark) 18px 36px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease;
}
.ht-pack:hover { transform: translateY(-4px) scale(1.02); }

.ht-pack-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.ht-pack-face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.ht-pack-crest {
  font-family: var(--font);
  font-weight: 900;
  font-size: 42px;
  color: var(--white);
}

.ht-card-logo-img {
  display: none;
  max-width: 78%;
  max-height: 140px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

.ht-pack-hint {
  margin-top: 14px;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--white);
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--red);
  border-radius: 999px;
  padding: 6px 14px;
}
.ht-pack-hint.shake { animation: hintShake 0.4s ease-in-out; }
@keyframes hintShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.ht-pack.pack-empty { cursor: not-allowed; filter: saturate(0.55) brightness(0.85); }

.ht-pack::after {
  content: "";
  position: absolute;
  top: -50%; left: -20%;
  width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: rotate(20deg);
  animation: sheen 2.6s ease-in-out infinite;
}
@keyframes sheen {
  0% { left: -30%; }
  50% { left: 120%; }
  100% { left: 120%; }
}

.ht-pack.opening { animation: packShake 0.5s ease-in-out, packFlash 0.65s ease-in-out; }
@keyframes packShake {
  0%,100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-6px) rotate(-3deg); }
  40% { transform: translateX(6px) rotate(3deg); }
  60% { transform: translateX(-8px) rotate(-4deg) scale(1.03); }
  80% { transform: translateX(8px) rotate(4deg) scale(1.05); }
}
@keyframes packFlash {
  0%,70% { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6); }
  85% { box-shadow: 0 0 80px 30px #fff8; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 0; }
}

/* Card */

.ht-card {
  width: 220px;
  min-height: 280px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 4px 4px 0 var(--red), 0 16px 34px rgba(0, 0, 0, 0.55);
  cursor: grab;
  touch-action: none;
  position: relative;
  user-select: none;
}
.ht-card:active { cursor: grabbing; }

.ht-card-text {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(15px, 2.4vw, 20px);
  line-height: 1.3;
  margin-top: 64px;
}

.ht-card-submitter {
  font-family: var(--font);
  font-weight: 700;
  font-size: 12px;
  opacity: 0.6;
  margin-top: 10px;
}

.ht-card-logo-watermark {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 130px;
  max-height: 76px;
}

.ht-card-crest-fallback {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font);
  font-weight: 900;
  font-size: 15px;
  color: var(--red);
}

.ht-card.revealing { animation: cardReveal 0.4s cubic-bezier(.2,1.4,.4,1); }
@keyframes cardReveal {
  from { transform: scale(0.4) rotateY(90deg); opacity: 0; }
  to { transform: scale(1) rotateY(0); opacity: 1; }
}

.ht-card.landed-agree { border-color: var(--great); box-shadow: 0 0 0 4px var(--great), 0 16px 34px rgba(0, 0, 0, 0.55); }
.ht-card.landed-disagree { border-color: var(--poor); box-shadow: 0 0 0 4px var(--poor), 0 16px 34px rgba(0, 0, 0, 0.55); }

.ht-verdict {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-14deg) scale(0);
  font-family: var(--font);
  font-weight: 900;
  font-size: 28px;
  padding: 8px 20px;
  border: 4px solid currentColor;
  border-radius: var(--radius-md);
  pointer-events: none;
  z-index: 3;
}
.ht-verdict.show { animation: stampIn 0.35s ease-out forwards; }
@keyframes stampIn {
  0% { transform: translate(-50%, -50%) rotate(-14deg) scale(2.2); opacity: 0; }
  70% { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-14deg) scale(1); opacity: 1; }
}
.verdict-agree { color: var(--great); background: rgba(34, 197, 94, 0.15); }
.verdict-disagree { color: var(--poor); background: rgba(239, 68, 68, 0.15); }

/* Meter */

.ht-meter {
  width: min(560px, 90%);
  margin-top: 22px;
}
.ht-meter-track {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--poor), rgba(255,255,255,0.15) 48%, rgba(255,255,255,0.15) 52%, var(--great));
  border: 1px solid var(--glass-border);
  overflow: visible;
}
.ht-meter-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; opacity: 0.9; }
.ht-meter-marker {
  position: absolute;
  top: 50%;
  width: 18px; height: 18px;
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: left 0.2s ease;
}
.ht-meter-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: 8px;
  color: var(--white);
  opacity: 1;
}
.ht-live-tally {
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0.8;
  margin-top: 10px;
}

.ht-waiting {
  max-width: 280px;
  text-align: center;
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  opacity: 0.7;
  line-height: 1.4;
}

/* ---------- Video reactions ---------- */

.vid-layout { display: flex; gap: 20px; align-items: flex-start; }

.vid-add-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.vid-add-form input {
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--white);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
}
.vid-add-form input::placeholder { color: rgba(255, 255, 255, 0.5); }

.vid-add-error {
  font-size: 12.5px;
  font-weight: 600;
  color: #ffb4b1;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid var(--poor);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}

.vid-queue-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }

.vid-queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass-bg-strong);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 6px;
  cursor: pointer;
}
.vid-queue-item:hover { background: var(--glass-hover); }
.vid-queue-item.active { border-color: var(--red); background: rgba(239, 1, 7, 0.25); }

.vid-queue-thumb {
  width: 60px;
  height: 34px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.4);
}

.vid-queue-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  padding: 2px;
}

.vid-queue-label {
  flex: 1;
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vid-stage {
  align-items: stretch;
  justify-content: flex-start;
}

.vid-fan-note {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 320px;
  margin: 0 auto;
  padding-bottom: 70px;
  text-align: center;
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  opacity: 0.7;
  line-height: 1.4;
}

/* TikTok-style vertical scroll-snap feed */

.vid-feed {
  position: relative;
  width: 100%;
  height: min(70vh, 640px);
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  border-radius: var(--radius-md);
  background: #000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  scrollbar-width: none;
}
.vid-feed::-webkit-scrollbar { display: none; }

.vid-slide {
  position: relative;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vid-slide-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.vid-slide-inner iframe, .vid-slide-inner video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #000;
}

/* Videos (unlike iframe embeds, which are landscape by convention) can be
   portrait — fill the full slide instead of being boxed into a fixed 16:9
   shape, so a portrait clip actually uses the available vertical space. */
.vid-slide-inner.vid-fill {
  aspect-ratio: unset;
  position: absolute;
  inset: 0;
}
.vid-slide-inner.vid-fill video { object-fit: contain; }

.vid-slide-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 24px;
}
.vid-slide-placeholder-icon { font-size: 32px; }
.vid-slide-placeholder-label { font-weight: 700; font-size: 14px; }

.vid-slide-open-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none;
}

.vid-slide-debug {
  margin-top: 14px;
  max-width: 90%;
  font-family: monospace;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.4);
  word-break: break-all;
}

.vid-feed-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  text-align: center;
  padding: 24px;
}

.vid-feed-controls {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 5;
}
.vid-feed-nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  color: var(--white);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(14px);
}
.vid-feed-nav-btn:hover { background: var(--glass-hover); }

.vid-fullscreen-logo {
  display: none;
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 6;
  align-items: center;
  opacity: 1;
  pointer-events: none;
}
.vid-fullscreen-logo img {
  display: none;
  max-height: 64px;
  max-width: 220px;
  object-fit: contain;
}
#vid-fullscreen-logo-fallback {
  font-family: var(--font);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--white);
}

.vid-fullscreen-close {
  display: none;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 6;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--red);
  border: none;
  cursor: pointer;
}
.vid-fullscreen-close::before,
.vid-fullscreen-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
}
.vid-fullscreen-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.vid-fullscreen-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.vid-fullscreen-close:hover { filter: brightness(1.1); }

.vid-stage.is-fullscreen {
  /* Covers the viewport ourselves rather than the real Fullscreen API —
     iOS Safari exposes Element.requestFullscreen() on non-video elements
     but silently no-ops when it's called, and on platforms where it does
     work, the browser draws its own native exit-fullscreen control on
     top of the page, stacking with our own close button as a second
     "X in a circle". This class is the one and only fullscreen
     presentation, everywhere, with no native API involved.

     #oa-main (its ancestor) is its own stacking context at z-index:2, so
     no z-index on this element alone can paint it above the header
     (z-index:5) — the whole #oa-main subtree is capped below it. Hiding
     the header instead sidesteps that entirely, and reads as more
     "actually fullscreen" anyway. */
  position: fixed;
  inset: 0;
  z-index: 500;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
  background: #000;
}
body.vid-fullscreen-active .oa-header { display: none; }
.vid-stage.is-fullscreen .vid-feed {
  height: 100%;
  border-radius: var(--radius-lg);
  border: 8px solid var(--red);
}
.vid-stage.is-fullscreen .vid-fullscreen-logo,
.vid-stage.is-fullscreen .vid-fullscreen-close {
  display: flex;
}
.vid-stage.is-fullscreen #vid-fullscreen-btn { display: none; }

/* ---------- Match Bingo ---------- */

.bingo-auth {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 40px 16px;
}

.bingo-auth-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: min(380px, 100%);
}

.bingo-auth-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.bingo-auth-card {
  width: 100%;
  background: rgba(30, 10, 10, 0.9);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.bingo-auth-card h2,
.bingo-auth-logo h2 {
  font-family: var(--font);
  font-weight: 900;
  font-size: 24px;
  margin: 0 0 6px;
}
.bingo-auth-card p {
  font-size: 14px;
  opacity: 0.75;
  margin: 0 0 18px;
}

.bingo-logo-img {
  display: none;
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}
.bingo-logo-img-small {
  max-height: 26px;
  width: auto;
  margin-bottom: 0;
}
.app-gate-logo-img {
  max-height: 90px;
  width: auto;
  margin-bottom: 0;
}

.bingo-auth-tabs {
  display: flex;
  gap: 6px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 18px;
}
.bingo-auth-tab {
  flex: 1;
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.bingo-auth-tab.active { background: var(--red); color: var(--white); }

.bingo-auth-form { display: flex; flex-direction: column; gap: 10px; }
.bingo-auth-form input {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--white);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
}
.bingo-auth-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.bingo-auth-error {
  font-size: 13px;
  font-weight: 600;
  color: var(--red-light);
}

.bingo-signups-closed {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 16px;
  line-height: 1.4;
}

.bingo-main {
  display: flex;
  flex-direction: column;
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 16px 90px;
}

/* Wrappers around the grid (+ its status boxes) and everything else —
   both a no-op on mobile (display:contents keeps their children as
   direct flex items of .bingo-main, same as before these wrappers
   existed, so the order rules below still control the single-column
   mobile layout unchanged), but become the two real flex columns of
   the desktop layout further down. */
#bingo-left { display: contents; }
#bingo-side { display: contents; }
#bingo-admin-row { display: contents; }

/* Everyone gets a bigger, centered logo up top and the status line moved
   below the grid — same layout for admins as for regular players. */
.bingo-main.bingo-view-centered .bingo-header { order: 0; justify-content: center; }
.bingo-main.bingo-view-centered .bingo-header-brand {
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.bingo-main.bingo-view-centered #bingo-main-logo-img { max-height: 70px; }
.bingo-main.bingo-view-centered #bingo-main-logo-fallback { font-size: 22px; }
.bingo-main.bingo-view-centered .bingo-welcome {
  border-left: none;
  padding-left: 0;
}
.bingo-main.bingo-view-centered .bingo-grid { order: 1; margin-bottom: 0; }
.bingo-main.bingo-view-centered .bingo-status { order: 2; margin: 18px 0 0; }
.bingo-main.bingo-view-centered .bingo-status-boxes { order: 2; margin: 18px 0 0; }
.bingo-main.bingo-view-centered .bingo-admin { order: 3; }
.bingo-main.bingo-view-centered .bingo-mark-section { order: 4; margin-top: 24px; }
.bingo-main.bingo-view-centered .bingo-leaderboard { order: 5; margin-top: 24px; }
.bingo-brought-by {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(180deg, var(--red) 0%, var(--red-dark) 100%);
  border-top: 2.5px solid var(--ink);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
  text-decoration: none;
  transition: filter 0.2s ease;
}
.bingo-brought-by:hover { filter: brightness(1.1); }
.bingo-brought-by-label {
  font-family: var(--font);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0.9;
  white-space: nowrap;
}
.bingo-brought-by-logo {
  height: 30px;
  width: auto;
  display: block;
}

.bingo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.bingo-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#bingo-main-logo-fallback {
  font-family: var(--font);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--white);
}
.bingo-welcome {
  font-size: 14px;
  opacity: 0.85;
  padding-left: 10px;
  border-left: 1px solid var(--glass-border);
}
.bingo-welcome strong { color: var(--white); }

.bingo-name-edit-btn {
  background: none;
  border: none;
  color: var(--white);
  opacity: 0.6;
  font-size: 13px;
  cursor: pointer;
  margin-left: 4px;
  padding: 2px 4px;
}
.bingo-name-edit-btn:hover { opacity: 1; }

.bingo-name-edit-form {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.bingo-name-edit-form input {
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--white);
  font-family: var(--font);
  font-size: 13px;
  width: 140px;
}

.bingo-status {
  text-align: center;
  font-family: var(--font);
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 16px;
}

.bingo-status-boxes { display: flex; gap: 10px; margin-bottom: 16px; }
.bingo-status-box {
  flex: 1;
  text-align: center;
  padding: 12px 10px;
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-weight: 800;
  font-size: 15px;
  color: var(--white);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.bingo-status-box-full { background: rgba(239, 1, 7, 0.3); border-color: var(--red-light); }

.bingo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 32px;
}
.bingo-grid { --tilt: 0deg; }
.bingo-cell {
  position: relative;
  aspect-ratio: 1;
  perspective: 900px;
  transform: rotate(var(--tilt));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* A gentle alternating tilt per card — like stickers, not a straight grid. */
.bingo-cell:nth-child(6n + 1) { --tilt: -2deg; }
.bingo-cell:nth-child(6n + 2) { --tilt: 1.5deg; }
.bingo-cell:nth-child(6n + 3) { --tilt: -1deg; }
.bingo-cell:nth-child(6n + 4) { --tilt: 2deg; }
.bingo-cell:nth-child(6n + 5) { --tilt: -1.5deg; }
.bingo-cell:nth-child(6n + 6) { --tilt: 1deg; }
.bingo-cell.marked { transform: rotate(var(--tilt)) scale(1.08); }

/* Hovering flips the card over to reveal the Gooner Guessr logo on the back. */
.bingo-cell-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.bingo-cell:hover .bingo-cell-inner { transform: rotateY(180deg); }

.bingo-cell-front,
.bingo-cell-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-family: var(--font);
  font-weight: 800;
  font-size: 12.5px;
  line-height: 1.3;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border-radius: 18px;
  border: 2.5px solid var(--ink);
}

.bingo-cell-front {
  color: #16100f;
  /* A subtle diagonal corner-fold shadow, like a peeling sticker, layered
     under the card's own gradient. */
  background:
    linear-gradient(135deg, transparent 90%, rgba(0, 0, 0, 0.18) 90%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(155deg, #ffffff 0%, #f1eeec 55%, #e2ddd9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -6px 10px rgba(0, 0, 0, 0.05),
    0 5px 14px rgba(0, 0, 0, 0.28);
}
/* Diagonal gloss streak — the "shiny" part. Animated: a light band
   sweeps across the card, pauses off-screen, then repeats. Each cell
   gets a slightly different delay so a 3x3 grid doesn't flash in unison. */
.bingo-cell-front::before {
  content: "";
  position: absolute;
  top: -60%;
  left: 0;
  width: 35%;
  height: 220%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
  transform: rotate(18deg) translateX(-260%);
  pointer-events: none;
  animation: bingoShine 3.6s ease-in-out infinite;
}
@keyframes bingoShine {
  0% { transform: rotate(18deg) translateX(-260%); }
  35%, 100% { transform: rotate(18deg) translateX(360%); }
}
.bingo-cell:nth-child(2) .bingo-cell-front::before { animation-delay: 0.3s; }
.bingo-cell:nth-child(3) .bingo-cell-front::before { animation-delay: 0.6s; }
.bingo-cell:nth-child(4) .bingo-cell-front::before { animation-delay: 0.9s; }
.bingo-cell:nth-child(5) .bingo-cell-front::before { animation-delay: 1.2s; }
.bingo-cell:nth-child(6) .bingo-cell-front::before { animation-delay: 1.5s; }
.bingo-cell:nth-child(7) .bingo-cell-front::before { animation-delay: 1.8s; }
.bingo-cell:nth-child(8) .bingo-cell-front::before { animation-delay: 2.1s; }
.bingo-cell:nth-child(9) .bingo-cell-front::before { animation-delay: 2.4s; }

.bingo-cell.marked .bingo-cell-front {
  color: var(--white);
  background:
    linear-gradient(135deg, transparent 90%, rgba(0, 0, 0, 0.3) 90%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(155deg, var(--red-light) 0%, var(--red) 55%, var(--red-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -6px 12px rgba(0, 0, 0, 0.2),
    0 10px 22px rgba(239, 1, 7, 0.45);
}
.bingo-cell.marked .bingo-cell-front::before {
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.35) 48%, transparent 62%);
}
.bingo-cell.marked .bingo-cell-front::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--red);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.bingo-cell-back {
  transform: rotateY(180deg);
  background:
    linear-gradient(135deg, transparent 90%, rgba(0, 0, 0, 0.3) 90%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(155deg, var(--red-light) 0%, var(--red) 55%, var(--red-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -6px 12px rgba(0, 0, 0, 0.2),
    0 5px 14px rgba(0, 0, 0, 0.28);
}
.bingo-cell-back-logo {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
}

/* Placeholder grid shown before a game exists — face-down cards (same red
   back as a real card's flip side) with the middle one flipped "up" as a
   little centerpiece, instead of just leaving the board area empty. */
.bingo-cell-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 18px;
  border: 2.5px solid var(--ink);
  background:
    linear-gradient(135deg, transparent 90%, rgba(0, 0, 0, 0.3) 90%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(155deg, var(--red-light) 0%, var(--red) 55%, var(--red-dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -6px 12px rgba(0, 0, 0, 0.2),
    0 5px 14px rgba(0, 0, 0, 0.28);
}
.bingo-cell-placeholder-mid {
  background:
    linear-gradient(135deg, transparent 90%, rgba(0, 0, 0, 0.18) 90%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(155deg, #ffffff 0%, #f1eeec 55%, #e2ddd9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -6px 10px rgba(0, 0, 0, 0.05),
    0 5px 14px rgba(0, 0, 0, 0.28);
}

.bingo-admin {
  border-top: 1px solid var(--glass-border);
  padding-top: 20px;
}

.bingo-pool-input {
  width: 100%;
  resize: vertical;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--white);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 10px;
}
.bingo-pool-input:disabled { opacity: 0.5; }
.bingo-admin-error {
  font-size: 13px;
  font-weight: 600;
  color: var(--red-light);
  margin-top: 8px;
}

.bingo-admin-actions { display: flex; gap: 10px; margin-top: 16px; }

/* "Fun box" housing — the Completed Items list and the leaderboard each
   get their own sticker-card frame instead of just a divider line, echoing
   the bingo cards themselves (thick ink border, corner-fold shadow, cream
   card face) so they read as their own distinct pieces of the board. */
.bingo-fun-box {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 22px;
  border: 2.5px solid var(--ink);
  border-radius: 20px;
  color: #16100f;
  background:
    linear-gradient(135deg, transparent 92%, rgba(0, 0, 0, 0.16) 92%, rgba(0, 0, 0, 0.16) 100%),
    linear-gradient(155deg, #ffffff 0%, #f1eeec 55%, #e2ddd9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -6px 10px rgba(0, 0, 0, 0.05),
    0 10px 24px rgba(0, 0, 0, 0.32);
}
.bingo-fun-box-badge {
  position: absolute;
  top: -16px;
  right: 18px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
  border: 2.5px solid var(--ink);
  background: linear-gradient(155deg, var(--red-light) 0%, var(--red) 55%, var(--red-dark) 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.bingo-fun-box .ht-sidebar-title { color: #16100f; }

/* Give "Completed Items" equal breathing room above (box padding) and
   below (to the first item row) instead of sitting closer to one side. */
#bingo-mark-section.bingo-fun-box { padding-top: 16px; }
/* The badge span is a first sibling before the heading, so the
   ":not(:first-child)" auto-margin-top on .ht-sidebar-title would
   otherwise kick in here too — reset it back to 0. */
#bingo-mark-section .ht-sidebar-title { margin-top: 0; margin-bottom: 16px; }

.bingo-mark-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.bingo-mark-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 14px;
  background: rgba(0, 0, 0, 0.05);
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.bingo-mark-item span { min-width: 0; overflow-wrap: break-word; }
.bingo-mark-item:hover { border-color: var(--red-light); transform: translateY(-1px); }
.bingo-mark-item input {
  accent-color: var(--red);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.bingo-mark-empty { font-size: 13px; opacity: 0.65; font-weight: 500; text-transform: none; }
/* Neater at a glance, especially for stream viewers — already-happened
   items visibly fade back and strike through instead of blending in
   with everything still to come. */
.bingo-mark-item:has(input:checked) {
  opacity: 0.55;
  text-decoration: line-through;
  border-color: transparent;
  background: rgba(239, 1, 7, 0.12);
}

.bingo-leaderboard-tabs {
  display: flex;
  gap: 6px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 14px;
}
.bingo-leaderboard-tab {
  flex: 1;
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 10px;
  background: transparent;
  color: rgba(22, 16, 15, 0.6);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.bingo-leaderboard-tab.active { background: var(--red); color: var(--white); }

.bingo-dashboard { display: flex; flex-direction: column; gap: 6px; }
.bingo-dashboard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 700;
}
.bingo-dashboard-row.bingo-row-line { border-color: #d99a00; }
.bingo-dashboard-row.bingo-row-win { border-color: var(--red); background: rgba(239, 1, 7, 0.16); }
.bingo-dashboard-status { opacity: 0.7; }

.bingo-season-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.bingo-season-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 700;
}
.bingo-season-rank { width: 18px; flex-shrink: 0; opacity: 0.6; font-weight: 800; }
.bingo-season-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bingo-season-stats { opacity: 0.75; font-weight: 600; font-size: 12.5px; }
.bingo-season-points { color: var(--red-light); font-weight: 800; }
.bingo-season-row-me { border: 1.5px solid var(--red-light); background: rgba(239, 1, 7, 0.28); }
.bingo-season-gap { text-align: center; opacity: 0.4; font-weight: 900; letter-spacing: 2px; margin: -2px 0; }
.bingo-season-you {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: var(--red-light);
  border: 1px solid var(--red-light);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
}

/* ---------- Stream mode ---------- */

body.stream-mode .pitch-toolbar-top,
body.stream-mode .ht-sidebar,
body.stream-mode .bingo-admin-actions {
  display: none !important;
}
body.stream-mode .oa-header { padding: 10px 18px; }
body.stream-mode #oa-main { padding-top: 10px; }
body.stream-mode .ht-layout,
body.stream-mode .vid-layout { justify-content: center; }

/* ---------- Desktop-only enlargements ---------- */

@media (min-width: 901px) {
  /* Nav: bolder, more "sticker pack" in-brand look — uppercase, thicker
     borders, red-gradient active state with the same fold shadow the
     bingo cards use — as standalone buttons, not a boxed pill bar. */
  .oa-nav { gap: 10px; }
  .nav-btn {
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 800;
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 11px 22px;
  }
  .nav-btn:hover { border-color: var(--white); }
  .nav-btn.active {
    background: linear-gradient(155deg, var(--red-light) 0%, var(--red) 55%, var(--red-dark) 100%);
    border-color: var(--ink);
    box-shadow: 0 6px 16px rgba(239, 1, 7, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  #global-logout-btn { text-transform: uppercase; letter-spacing: 0.4px; }

  /* Hot Take Meter: let the stage and its card/pack breathe on wide
     screens instead of sitting small in a lot of empty space. */
  #tab-hottakes .ht-layout { gap: 28px; }
  #tab-hottakes .ht-sidebar { width: 360px; max-height: 84vh; }
  #tab-hottakes .ht-stage { min-height: 760px; padding: 40px; }
  #tab-hottakes .ht-pack { width: 300px; height: 400px; }
  #tab-hottakes .ht-card { width: 340px; min-height: 420px; padding: 34px 26px; }

  /* Gooner Guessr: logo + bigger bingo board (+ its complete/lines status
     boxes) on the left, hugging the left edge instead of sitting centered
     with a lot of dead space either side; everything else on the right,
     with the admin's mark-items and leaderboard as their own two columns
     instead of one long stacked list. */
  .bingo-main { max-width: 1320px; margin: 0; }
  .bingo-main.bingo-view-centered {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    /* #bingo-side is positioned (not in-flow, see below) so this needs
       to be the containing block its top/bottom offsets stretch against. */
    position: relative;
  }
  #bingo-left {
    display: flex;
    flex-direction: column;
    width: 560px;
    flex-shrink: 0;
    /* Same order-collision reasoning as #bingo-side below — needs an
       explicit order to land before it now that both are real flex
       items of .bingo-main instead of being merged in via contents. */
    order: 1;
  }
  .bingo-main.bingo-view-centered .bingo-header { margin-bottom: 18px; }
  .bingo-main.bingo-view-centered #bingo-main-logo-img { max-height: 90px; }
  .bingo-main.bingo-view-centered .bingo-status-boxes { margin: 20px 0 0; }
  #bingo-side {
    /* Taken out of flow and pinned to the top/bottom of .bingo-main
       (whose own height is then set by #bingo-left alone, its only
       remaining in-flow child) instead of being a normal flex column —
       that's what lets #bingo-side inherit #bingo-left's exact height
       regardless of how tall its header/welcome-line/status text happen
       to render, rather than guessing that height as a fixed number.
       left is #bingo-left's 560px width plus the row's 40px gap; top
       and bottom cancel out .bingo-main's own 8px/90px padding (the
       90px bottom is reserved for the fixed "brought to you by" bar)
       so this lines up with #bingo-left's actual content box, not
       .bingo-main's padding edge — an absolutely positioned child's
       offsets are relative to the *padding* box, but in-flow children
       like #bingo-left start inside the padding, at the content box. */
    position: absolute;
    top: 8px;
    bottom: 90px;
    left: 600px;
    right: 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .bingo-admin { flex-shrink: 0; }
  #bingo-admin-row {
    display: flex;
    align-items: stretch;
    gap: 24px;
    /* Fills whatever's left of #bingo-side's now-definite height (below
       the admin pool/buttons), so the fun boxes inside it can stretch
       down to that same bottom edge instead of just sizing to content. */
    flex: 1;
    min-height: 0;
    /* .bingo-admin carries order:3 from the mobile single-column rules
       above; #bingo-admin-row has no such rule (defaults to order:0), so
       without this it would jump ahead of the pool editor/start-game
       buttons in #bingo-side's real column here. */
    order: 10;
  }
  /* Completed Items gets a bit more of the row than the leaderboard —
     enough for its two-column item grid to breathe without needing its
     own left-right scrollbar. */
  #bingo-admin-row .bingo-mark-section {
    flex: 11;
    min-width: 0;
    margin-top: 0;
  }
  #bingo-admin-row .bingo-leaderboard {
    flex: 9;
    min-width: 0;
    margin-top: 0;
  }
  .bingo-mark-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
  #bingo-admin-row .bingo-leaderboard .bingo-dashboard,
  #bingo-admin-row .bingo-leaderboard .bingo-season {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
  /* Brand-red scrollbars for the fun boxes' internal scroll areas,
     instead of the browser's default grey ones. */
  .bingo-mark-list,
  #bingo-admin-row .bingo-leaderboard .bingo-dashboard,
  #bingo-admin-row .bingo-leaderboard .bingo-season {
    scrollbar-width: thin;
    scrollbar-color: var(--red) rgba(0, 0, 0, 0.1);
  }
  .bingo-mark-list::-webkit-scrollbar,
  #bingo-admin-row .bingo-leaderboard .bingo-dashboard::-webkit-scrollbar,
  #bingo-admin-row .bingo-leaderboard .bingo-season::-webkit-scrollbar {
    width: 8px;
  }
  .bingo-mark-list::-webkit-scrollbar-track,
  #bingo-admin-row .bingo-leaderboard .bingo-dashboard::-webkit-scrollbar-track,
  #bingo-admin-row .bingo-leaderboard .bingo-season::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
  .bingo-mark-list::-webkit-scrollbar-thumb,
  #bingo-admin-row .bingo-leaderboard .bingo-dashboard::-webkit-scrollbar-thumb,
  #bingo-admin-row .bingo-leaderboard .bingo-season::-webkit-scrollbar-thumb {
    background: var(--red);
    border-radius: 8px;
  }
  .bingo-mark-list::-webkit-scrollbar-thumb:hover,
  #bingo-admin-row .bingo-leaderboard .bingo-dashboard::-webkit-scrollbar-thumb:hover,
  #bingo-admin-row .bingo-leaderboard .bingo-season::-webkit-scrollbar-thumb:hover {
    background: var(--red-light);
  }

  /* Player Ratings: pitch on the left, substitutes in columns to its
     right, instead of the bench sitting in its own row below the pitch. */
  #pitch-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
  }
  #pitch-row .pitch-wrap { flex: 1; }
  #pitch-row .bench-wrap {
    flex: 1;
    max-width: none;
    margin: 0;
    padding: 20px;
    border-top: none;
    background: var(--glass-bg);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    align-self: stretch;
  }
  #pitch-row .bench-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    justify-items: center;
    align-content: start;
  }
}

/* ---------- Invincibles (admin-only draft game) ---------- */

.invincibles-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}
.invincibles-title {
  font-family: var(--font);
  font-weight: 900;
  font-size: 22px;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.invincibles-subtitle { font-size: 13px; font-weight: 600; opacity: 0.7; margin-top: 2px; }
.invincibles-tally { font-size: 13px; font-weight: 700; color: #f5c518; margin-top: 6px; }
.invincibles-tally-count { font-weight: 900; }
.invincibles-toolbar-actions { display: flex; align-items: center; gap: 10px; }

.invincibles-formation-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 480px;
  margin: 20px auto 0;
  padding: 28px 24px;
  text-align: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}
.invincibles-formation-screen-title {
  font-family: var(--font);
  font-weight: 800;
  font-size: 17px;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.invincibles-formation-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.invincibles-formation-option {
  padding: 16px 20px;
  min-width: 84px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--white);
  font-family: var(--font);
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.invincibles-formation-option:hover { transform: translateY(-2px); }
.invincibles-formation-option.selected {
  border-color: var(--red);
  background: rgba(239, 1, 7, 0.22);
  box-shadow: 0 0 0 2px var(--red);
}
.invincibles-hide-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-strong);
  color: var(--white);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.invincibles-hide-toggle input { accent-color: var(--red); cursor: pointer; }

.invincibles-status {
  text-align: center;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 16px;
}

.invincibles-board {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}
/* .invincibles-spin sits before .pitch-wrap in the DOM (mobile stacks in
   document order, and needs the spin/reveal panel on top per the mobile
   layout below) — order restores the desktop pitch-left, spin-right
   arrangement independently of that DOM order. */
.invincibles-board .pitch-wrap { flex: 1; min-width: 320px; order: 1; }
.invincibles-spin { order: 2; }

/* The squad's complete and the small toolbar button is easy to miss —
   this sits right below the finished pitch, where the player's eyes
   already are, and pulses so it reads as the obvious next step. */
.invincibles-simulate-cta {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 20px auto 0;
  padding: 18px 24px;
  font-size: 19px;
  text-align: center;
  animation: invinciblesCtaPulse 1.6s ease-in-out infinite;
}
@keyframes invinciblesCtaPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 14px rgba(239, 1, 7, 0.4); }
  50% { transform: scale(1.03); box-shadow: 0 4px 26px rgba(239, 1, 7, 0.75); }
}

.invincibles-slot-active .slot-avatar {
  box-shadow: 0 0 0 3px var(--red-light), 0 4px 12px rgba(0, 0, 0, 0.6);
  animation: invinciblesPulse 1.6s ease-in-out infinite;
}
@keyframes invinciblesPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
/* A pick is pending: this slot is a valid destination for the selected
   player — pulses gold to stand out from both the plain "?" slots and
   any already-filled ones. */
.invincibles-slot-eligible .slot-avatar {
  box-shadow: 0 0 0 3px #f5c518, 0 0 20px rgba(245, 197, 24, 0.7);
  animation: invinciblesEligiblePulse 1s ease-in-out infinite;
  cursor: pointer;
}
@keyframes invinciblesEligiblePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
/* Empty but not a valid destination for the pending pick — dimmed so the
   eligible slots read as the obvious next tap. */
.invincibles-slot-ineligible { opacity: 0.3; }
.invincibles-slot-season {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--red-light);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 1px 5px;
}

.invincibles-slot-avatar { display: flex; align-items: center; justify-content: center; }
.invincibles-slot-logo { width: 62%; height: 62%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }

.invincibles-spin {
  flex: 1;
  min-width: 280px;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  transition: border-color 0.15s ease;
}
/* The red title-flicker used to be the only spin cue, and it barely read
   against the site's own red theme. Gold reads as a clear "in progress"
   state instead, and the whole panel joins in — not just the title — so
   it's obvious at a glance, not just on close reading. */
.invincibles-spin.spinning {
  border-color: rgba(245, 197, 24, 0.8);
  animation: invinciblesPanelGlow 0.7s ease-in-out infinite;
}
@keyframes invinciblesPanelGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.25), 0 8px 30px rgba(0, 0, 0, 0.3); }
  50% { box-shadow: 0 0 0 5px rgba(245, 197, 24, 0.6), 0 0 36px rgba(245, 197, 24, 0.55), 0 8px 30px rgba(0, 0, 0, 0.3); }
}
.invincibles-spin-title {
  font-family: var(--font);
  font-weight: 800;
  font-size: 15px;
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 14px;
}
.invincibles-spin-title.spinning {
  color: #ffd84d;
  text-shadow: 0 0 16px rgba(245, 197, 24, 0.9);
  animation: invinciblesTitleFlicker 0.11s steps(1) infinite;
}
@keyframes invinciblesTitleFlicker {
  0% { opacity: 1; transform: translateY(0) scaleY(1); }
  25% { opacity: 0.55; transform: translateY(-4px) scaleY(1.1); }
  50% { opacity: 1; transform: translateY(1px) scaleY(0.94); }
  75% { opacity: 0.6; transform: translateY(-2px) scaleY(1.06); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
.invincibles-spin-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -6px 0 14px;
  font-family: var(--font);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #ffd84d;
}
.invincibles-spin-ring {
  width: 14px;
  height: 14px;
  border: 2.5px solid rgba(245, 197, 24, 0.3);
  border-top-color: #ffd84d;
  border-radius: 50%;
  animation: invinciblesRingSpin 0.6s linear infinite;
}
@keyframes invinciblesRingSpin {
  to { transform: rotate(360deg); }
}
.invincibles-spin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
.invincibles-spin-cards.settled { animation: invinciblesSettleFlash 0.4s ease-out; }
@keyframes invinciblesSettleFlash {
  0% { filter: brightness(1.7); }
  100% { filter: brightness(1); }
}
.invincibles-spin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: var(--glass-bg-strong);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.invincibles-spin-card:hover { border-color: var(--red-light); transform: translateY(-2px); }
.invincibles-spin-card.selected {
  border-color: #f5c518;
  box-shadow: 0 0 0 2px rgba(245, 197, 24, 0.5);
}
.invincibles-spin-card.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.invincibles-spin-card.disabled:hover { border-color: var(--glass-border); transform: none; }
.invincibles-spin-card-skeleton {
  min-height: 68px;
  border-style: dashed;
  cursor: default;
  border-color: rgba(245, 197, 24, 0.4);
  background: linear-gradient(100deg, var(--glass-bg-strong) 40%, rgba(245, 197, 24, 0.35) 50%, var(--glass-bg-strong) 60%);
  background-size: 250% 100%;
  animation: invinciblesSkeletonShimmer 0.9s linear infinite;
}
@keyframes invinciblesSkeletonShimmer {
  from { background-position: 120% 0; }
  to { background-position: -20% 0; }
}
.invincibles-spin-card-enter {
  animation: invinciblesCardEnter 0.32s ease-out backwards;
}
@keyframes invinciblesCardEnter {
  from { opacity: 0; transform: translateY(10px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.invincibles-spin-card-rating {
  font-family: var(--font);
  font-weight: 900;
  font-size: 17px;
  color: var(--white);
  border-radius: 8px;
  padding: 2px 10px;
}
.invincibles-rating-concealed { background: rgba(255, 255, 255, 0.12); border: 1px dashed rgba(255, 255, 255, 0.3); opacity: 0.8; }
.invincibles-spin-card-name { font-size: 11.5px; font-weight: 700; color: var(--white); text-align: center; line-height: 1.2; }
.invincibles-spin-card-position { font-size: 10px; font-weight: 700; opacity: 0.6; text-transform: uppercase; }
.invincibles-spin-empty { grid-column: 1 / -1; text-align: center; font-size: 13px; opacity: 0.7; }

.invincibles-result {
  max-width: 480px;
  margin: 20px auto 0;
  padding: 20px;
  text-align: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}
.invincibles-result-badge {
  display: inline-block;
  font-family: var(--font);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: var(--white);
  background: var(--glass-bg-strong);
  border: 1.5px solid var(--glass-border);
  border-radius: 999px;
  padding: 8px 20px;
  margin-bottom: 16px;
}
.invincibles-result-invincible {
  color: var(--ink);
  background: linear-gradient(155deg, #ffe37a 0%, #f5c518 55%, #c99400 100%);
  border-color: var(--ink);
  box-shadow: 0 4px 14px rgba(245, 197, 24, 0.5);
}
.invincibles-result-stats { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.invincibles-result-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.75;
  text-transform: uppercase;
}
.invincibles-result-stat span {
  font-family: var(--font);
  font-weight: 900;
  font-size: 20px;
  color: var(--white);
  opacity: 1;
}

.invincibles-result-simulating-title {
  font-family: var(--font);
  font-weight: 800;
  font-size: 16px;
  color: #ffd84d;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.invincibles-result-dots::after {
  content: "";
  animation: invinciblesDots 1.2s steps(4) infinite;
}
@keyframes invinciblesDots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
}
.invincibles-result-progress { font-size: 12px; font-weight: 700; opacity: 0.7; margin-bottom: 14px; }
.invincibles-result-form { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 16px; }
.invincibles-result-form-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-family: var(--font);
  font-weight: 900;
  font-size: 11px;
  color: var(--white);
  animation: invinciblesCardEnter 0.25s ease-out backwards;
}
.invincibles-result-form-w { background: var(--great); }
.invincibles-result-form-d { background: var(--ok); }
.invincibles-result-form-l { background: var(--poor); }

/* ---------- Higher or Lower ---------- */

.higherlower-scoreboard {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.higherlower-score-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 110px;
  padding: 10px 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}
.higherlower-score-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.7; }
.higherlower-score-value { font-family: var(--font); font-weight: 900; font-size: 26px; color: var(--white); }

.higherlower-category {
  text-align: center;
  font-family: var(--font);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--red-light);
  margin-bottom: 18px;
}

.higherlower-board {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 22px;
}

.higherlower-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(220px, 38vw);
  padding: 22px 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.higherlower-card-correct { border-color: var(--great); box-shadow: 0 0 0 2px var(--great), 0 8px 30px rgba(34, 197, 94, 0.35); }
.higherlower-card-wrong { border-color: var(--poor); box-shadow: 0 0 0 2px var(--poor), 0 8px 30px rgba(239, 68, 68, 0.35); }

.higherlower-card-avatar {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(145deg, var(--red-light), var(--red-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}
.higherlower-card-avatar .slot-avatar-silhouette { width: 55%; height: 55%; opacity: 0.85; }
.higherlower-card-avatar .slot-avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.higherlower-card-avatar .slot-avatar-photo.loaded { opacity: 1; }
.higherlower-initials-badge {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-weight: 900;
  font-size: 34px;
}

.higherlower-card-name { font-family: var(--font); font-weight: 800; font-size: 14px; text-align: center; color: var(--white); }
.higherlower-card-stat {
  font-family: var(--font);
  font-weight: 900;
  font-size: 20px;
  color: var(--white);
  background: var(--glass-bg-strong);
  border-radius: var(--radius-sm);
  padding: 4px 14px;
}
.higherlower-card-stat-hidden { color: var(--red-light); font-size: 24px; }

.higherlower-vs { font-family: var(--font); font-weight: 900; font-size: 15px; opacity: 0.5; }

.higherlower-guess-actions { display: flex; justify-content: center; gap: 14px; margin-bottom: 22px; }
.higherlower-guess-btn {
  min-width: 140px;
  font-size: 16px;
  font-weight: 800;
  padding: 14px 24px;
}
.higherlower-guess-lower { background: var(--glass-bg-strong); color: var(--white); border: 1.5px solid var(--glass-border); }
.higherlower-guess-lower:hover { background: var(--glass-hover); }
.higherlower-guess-higher { background: var(--red); color: var(--white); border: none; box-shadow: 0 4px 14px rgba(239, 1, 7, 0.4); }
.higherlower-guess-higher:hover { background: #ff241a; }

.higherlower-gameover {
  text-align: center;
  max-width: 420px;
  margin: 0 auto 24px;
  padding: 22px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
}
.higherlower-gameover-title { font-family: var(--font); font-weight: 800; font-size: 18px; color: var(--white); margin-bottom: 8px; }
.higherlower-gameover-score { font-size: 14px; opacity: 0.75; margin-bottom: 16px; }

.higherlower-leaderboard { max-width: 420px; margin: 0 auto; }
.higherlower-leaderboard-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.higherlower-leaderboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
}
.higherlower-leaderboard-rank { font-weight: 900; color: var(--red-light); width: 18px; }
.higherlower-leaderboard-name { flex: 1; }
.higherlower-leaderboard-score { font-weight: 800; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .ht-layout, .vid-layout { flex-direction: column; }
  .ht-sidebar, .ht-stage, .vid-stage { width: 100%; }
  .ht-sidebar { max-height: 300px; }
  .oa-nav { margin-left: 0; }
  .avg-display { margin-left: 0; }
}

@media (max-width: 700px) {
  #oa-main { padding: 14px; }

  .oa-header {
    position: relative;
    justify-content: center;
    padding: 18px 58px;
    gap: 0;
  }
  .oa-logo-img { max-height: 56px; }
  .oa-logo-top, .oa-logo-bottom { font-size: 22px; }

  .popover {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  /* #popover-slot-label is already hidden globally; this still covers
     #fan-rating-player-name, which shares the .popover-slot-label class. */
  .popover-slot-label,
  .popover-actions {
    display: none;
  }

  .bingo-admin-actions { justify-content: center; }

  /* 9 subs at 2 rows means 5 columns (5 + 4), not an organic wrap that
     could land on 3 rows depending on screen width. */
  .bench-slots {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    justify-items: center;
  }
  .bench-slot.player-slot { width: auto; }
  .bench-slot .slot-avatar { width: 46px; height: 46px; border-radius: 13px; font-size: 16px; }
  .bench-slot .slot-name { font-size: 10px; max-width: 58px; padding: 1px 3px; }

  .stream-mode-btn {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
  }

  .hamburger-btn { display: flex; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }

  .oa-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 12px;
    right: 12px;
    margin: 8px 0 0;
    flex-direction: column;
    gap: 6px;
    background: rgba(30, 10, 10, 0.92);
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    z-index: 20;
  }
  .oa-nav.mobile-open { display: flex; }
  .nav-btn {
    width: 100%;
    text-align: center;
    padding: 13px 20px;
    border-radius: var(--radius-sm);
    border: none;
  }
  #global-logout-btn {
    width: 100%;
    margin-left: 0;
  }

  .pitch-toolbar { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .toolbar-group { justify-content: space-between; }
  .avg-display { margin-left: 0; }
  .toolbar-actions { flex-direction: column; }
  .toolbar-actions .btn { width: 100%; }

  .pitch-toolbar-bottom {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .pitch-toolbar-bottom .toolbar-group { justify-content: flex-start; }
  .pitch-toolbar-bottom .avg-display { margin-left: auto; }

  .ht-stage, .vid-stage { min-height: 440px; padding: 16px; }
  .ht-stage { min-height: 460px; }
  .ht-stage-center { min-height: 340px; }

  .modal { padding: 16px; }
  .squad-add-form { flex-wrap: wrap; }
  .squad-add-form input[type="text"] { flex-basis: 100%; }

  .invincibles-toolbar { flex-direction: column; align-items: center; text-align: center; }
  .invincibles-toolbar-actions { justify-content: center; flex-wrap: wrap; }

  /* Spin/reveal panel on top, pitch below — a side-by-side row forced the
     pitch down to half the screen width, which made it unreadably small.
     Stacking lets the pitch use the full width instead, same as it does
     everywhere else on mobile, and the spin panel (the thing actually
     being interacted with while it's visible) stays above the fold.
     .invincibles-spin comes before .pitch-wrap in the DOM specifically so
     plain block stacking puts it first — order (used to restore pitch-
     left/spin-right on desktop) has no effect once this isn't a flex
     container any more.
     display: block rather than flex-direction: column: .pitch-wrap is
     itself a flex container whose only real content is an aspect-ratio
     box with nothing but absolutely-positioned children, so it has no
     content-based height of its own — nested as a flex ITEM of a
     column-direction parent, that empty intrinsic height collapses the
     whole pitch to near-nothing. Plain block stacking sizes each child by
     its normal (correct) height instead. */
  .invincibles-board { display: block; }
  .invincibles-board .pitch-wrap { min-width: 0; padding: 10px; }
  .invincibles-spin { min-width: 0; padding: 14px; margin-bottom: 12px; }

  /* Shrinking the pitch a bit (rather than letting it fill the full wrap
     width) buys back room for the bigger avatars below to fit on screen
     at once without the whole board outgrowing the viewport. */
  .invincibles-board .pitch { width: min(600px, 82%); margin: 0 auto; }

  /* Bigger than the old cramped sizing, re-tuned (together with
     MOBILE_MIN_GK_GAP in invincibles.js) against the tightest cluster of
     any formation (3-5-2's midfield five) so nothing touches in any of
     the 4 layouts even at the smaller pitch width above. */
  #invincibles-slots .player-slot { width: 60px; gap: 0; }
  #invincibles-slots .slot-avatar-wrap { margin-bottom: 2px; }
  #invincibles-slots .slot-avatar { width: 46px; height: 46px; border-radius: 12px; }
  #invincibles-slots .slot-name { font-size: 10px; max-width: 60px; padding: 0 2px; line-height: 1.1; }
  #invincibles-slots .slot-rating-badge { min-width: 17px; height: 15px; font-size: 8.5px; top: -5px; }
  #invincibles-slots .invincibles-slot-season { display: none; }

  /* Two columns rather than one long scrolling list — narrower cards, but
     there's enough width per card at this breakpoint to keep the rating,
     position and name readable in a row. */
  .invincibles-spin-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .invincibles-spin-card {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
  }
  .invincibles-spin-card-rating { order: 1; flex: 0 0 auto; min-width: 22px; padding: 2px 5px; font-size: 13px; }
  .invincibles-spin-card-position {
    order: 2;
    flex: 0 0 auto;
    width: 34px;
    font-size: 8px;
    line-height: 1.15;
    text-align: left;
    white-space: normal;
  }
  .invincibles-spin-card-name {
    order: 3;
    flex: 1;
    min-width: 0;
    font-size: 10.5px;
    line-height: 1.15;
    text-align: left;
    white-space: normal;
  }
  .invincibles-spin-card-skeleton { min-height: 34px; width: 100%; }

  .games-menu-title { margin-bottom: 4px; }
  .games-menu-subtitle { margin-top: 0; }

  .game-card-play-btn.btn-primary {
    background: var(--white);
    color: var(--red);
    box-shadow: none;
  }
  .game-card-play-btn.btn-primary:hover { background: var(--white); }
}

@media (max-width: 560px) {
  .ht-drop-zone { width: 10%; }
  .ht-pack { width: 210px; height: 290px; }
  .ht-card { width: 230px; min-height: 300px; }
}

@media (max-width: 480px) {
  .player-slot { width: 78px; }
  .slot-avatar { width: 57px; height: 57px; border-radius: 16px; font-size: 20px; }
  .slot-name { font-size: 13.5px; max-width: 90px; }
  .slot-rating-badge { min-width: 20px; height: 18px; font-size: 10.5px; top: -8px; }
  /* .slot-rating-badge-fan carries both classes, so the generic mobile rule
     above (same specificity, later in the cascade) was winning on "top" and
     dragging the fan badge back up next to the admin one — worst with a
     ".5" rating, whose extra character widens the admin badge enough for
     the two to visibly collide. Re-assert the fan badge's own corner here. */
  .slot-rating-badge-fan { top: auto; bottom: -6px; right: -6px; min-width: 17px; height: 15px; font-size: 9px; }

  .vid-queue-thumb { width: 48px; height: 28px; }
  .vid-feed { height: min(75vh, 560px); }
  .vid-feed-controls { right: 10px; top: 10px; }
  .vid-feed-nav-btn { width: 32px; height: 32px; font-size: 12px; }

  .modal-backdrop { padding: 10px; }
}

@media (max-width: 340px) {
  .player-slot { width: 66px; }
  .slot-avatar { width: 47px; height: 47px; border-radius: 13px; font-size: 17px; }
  .slot-name { font-size: 12px; max-width: 76px; }
}