/* ─────────────────────────────────────────────────────────────────
   style.css  —  Fantasy Card Breaks
   Scheme: brightened gold/charcoal — Barlow Condensed display
   ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #18191f;
  --bg-surface:  #21232c;
  --bg-card:     #2a2d38;
  --bg-card-2:   #323644;
  --accent:      #f7ce46;
  --accent-dim:  #c9a52a;
  --accent-glow: rgba(247,206,70,0.18);
  --red:         #f04a55;
  --green:       #4cd880;
  /* ── Text colours ──────────────────────────────────────────────────────
     RAISED for legibility. The previous values were readable if you already
     knew what they said, and measurably not otherwise:

                     on --bg   --bg-surface  --bg-card  --bg-card-2
       --muted        3.45        3.08         2.70        2.36    <- old
       --text-dim     7.84        7.00         6.14        5.38    <- old

     WCAG AA requires 4.5:1 for normal text. The old --muted failed on EVERY
     background in the app, worst at 2.36:1, and it is the colour used for
     roughly 80 rules -- including the week label and next-game line under a
     player's name, which are also the smallest type on screen. Small text and
     low contrast compound; that combination was the specific complaint.

     These values clear 7:1 (AA's threshold for small text, and AAA's for
     normal) against all four backgrounds:

                     on --bg   --bg-surface  --bg-card  --bg-card-2
       --muted       10.58        9.44         8.27        7.25
       --text-dim    13.66       12.20        10.69        9.37
       --text        17.53       15.65        13.72       12.02

     NOT all set to pure white, deliberately. Three tiers that are all clearly
     legible still tell the eye which line is the player's name and which is
     the supporting detail, and that hierarchy is what makes a list scannable
     rather than a wall of identical text -- it helps most the people who are
     struggling to read it in the first place. The old problem was that the
     bottom tier was invisible, not that tiers exist.

     If you want to try flat pure white anyway, set --muted and --text-dim
     both to #ffffff. Everything routes through these three variables, so it
     is a two-line experiment. */
  --muted:       #c3c9d8;   /* was #676e82 - failed AA on every background */
  --text:        #ffffff;   /* was #eef0f6 */
  --text-dim:    #dfe3ee;   /* was #a8adbf */
  --border:      rgba(255,255,255,0.08);
  --border-med:  rgba(255,255,255,0.15);
  --border-accent: rgba(247,206,70,0.35);
  --radius:      8px;
  --radius-lg:   14px;
  --font-display:'Barlow Condensed', sans-serif;
  --font-body:   'Barlow', sans-serif;
  --header-h:    60px;
  --card-flip-duration: 0.45s; /* controlled by Settings → Card Animation Speed */
}

html, body {
  height: 100%;
  overflow: hidden; /* prevent full-page scroll — each screen manages its own */
  background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.screen {
  display: none;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height — handles mobile browser chrome */
  flex-direction: column;
  overflow: hidden; /* header stays put; only inner main scrolls */
}
.screen.active { display: flex; }
.hidden { display: none !important; }

/* All main content areas scroll internally */
.lobby-main,
.lb-main,
.settings-main,
.break-main,
.profile-main {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0; /* critical — allows flex child to shrink below content size */
}

/* ── App header ─────────────────────────────────────────────────── */
.app-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-med);
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
}
.header-logo { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: 0.04em; color: var(--accent); white-space: nowrap; }
.header-left  { display: flex; align-items: center; }
.header-center { flex: 1; display: flex; justify-content: center; }
.header-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }

/* ── League tabs ────────────────────────────────────────────────── */
.league-tabs { display: flex; gap: 3px; background: var(--bg); border-radius: var(--radius); padding: 4px; }
.league-tab {
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.06em;
  padding: 5px 14px; border-radius: 5px; border: none;
  background: transparent; color: var(--text-dim); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.league-tab:hover:not(.disabled) { background: var(--bg-card); color: var(--text); }
.league-tab.active { background: var(--accent); color: #111; }
.league-tab.disabled { opacity: 0.3; cursor: not-allowed; }

/* ── Balance / avatar ───────────────────────────────────────────── */
.user-balance { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.balance-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.balance-value { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--green); }
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-card-2); border: 1.5px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--accent);
}
.btn-icon { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 4px; transition: color 0.15s; }
.btn-icon:hover { color: var(--text); }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn-primary {
  font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: 0.05em;
  background: var(--accent); color: #111; border: none;
  padding: 12px 24px; border-radius: var(--radius); cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn-primary:hover  { background: #ffd740; }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn-primary.full-width { width: 100%; }

.btn-secondary {
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.04em;
  background: transparent; color: var(--accent);
  border: 1.5px solid var(--accent); padding: 11px 24px; border-radius: var(--radius);
  cursor: pointer; transition: background 0.15s;
}
.btn-secondary:hover { background: var(--accent-glow); }
.btn-secondary.full-width { width: 100%; }

.btn-ghost {
  font-family: var(--font-body); font-size: 14px;
  background: none; border: 1px solid var(--border-med); color: var(--text-dim);
  padding: 7px 14px; border-radius: var(--radius); cursor: pointer;
  transition: border-color 0.15s, color 0.15s; white-space: nowrap;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-ghost-sm {
  font-size: 13px; background: none; border: none; color: var(--muted);
  padding: 6px 0; cursor: pointer; transition: color 0.15s;
}
.btn-ghost-sm:hover { color: var(--accent); }

.btn-icon-back {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-card-2); border: 1px solid var(--border-med);
  color: var(--accent); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.btn-icon-back:hover { background: var(--bg-card); }

/* ── Forms ──────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.form-group label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], select {
  background: var(--bg);
  border: 1px solid var(--border-med);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body); font-size: 15px;
  padding: 10px 14px; outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
input:focus, select:focus { border-color: var(--accent); }
input::placeholder { color: var(--muted); }

.error-msg { color: var(--red); font-size: 13px; margin-top: 6px; }
.form-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; margin-bottom: 10px; margin-top: 4px; }
.section-label { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text-dim); margin: 28px 0 14px; }

/* ── LOGIN SCREEN ───────────────────────────────────────────────── */
#screen-login, #screen-register { background: var(--bg); justify-content: center; align-items: center; }

/* #2 — .screen is height:100dvh with overflow:hidden, so anything taller than
   the viewport was CLIPPED, not scrolled. On the register screen (long form +
   ID upload) that put the Create Account button off-screen and unreachable on
   mobile. height:100% + overflow-y:auto makes this the scroll container, and
   align-items:flex-start + margin:auto on the card keeps it centred when there
   IS room without clipping the top when there isn't (the classic flexbox
   centred-overflow trap). */
.login-bg {
  width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(247,206,70,0.09) 0%, transparent 70%);
}
.login-card {
  margin: auto;                /* centres vertically only when it fits */
  background: var(--bg-surface);
  border: 1px solid var(--border-med);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  width: 100%; max-width: 420px;
}
.register-card { max-width: 520px; padding: 32px 32px; }

.logo-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.logo-mark   { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--accent); letter-spacing: 0.04em; line-height: 1; }
.logo-text   { display: flex; flex-direction: column; line-height: 1.1; }
.logo-title  { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text); }
.logo-sub    { font-family: var(--font-display); font-size: 13px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.login-tagline { color: var(--text-dim); font-size: 14px; margin-bottom: 24px; }

.login-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-med); }
.login-divider span { font-size: 12px; color: var(--muted); }

.register-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.register-title  { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--text); }

.terms-text { font-size: 12px; color: var(--muted); text-align: center; margin: 14px 0 16px; line-height: 1.6; }

/* ── ID Upload ──────────────────────────────────────────────────── */
.id-upload-area {
  border: 2px dashed var(--border-med);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 10px;
  min-height: 110px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.id-upload-area:hover { border-color: var(--accent); background: var(--accent-glow); }
.id-upload-area.has-image { border-color: var(--green); border-style: solid; padding: 8px; }
.id-upload-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.id-upload-icon  { font-size: 28px; }
.id-upload-text  { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text-dim); }
.id-upload-sub   { font-size: 12px; color: var(--muted); }
.id-preview      { width: 100%; max-height: 160px; object-fit: contain; border-radius: var(--radius); }
.id-upload-note  { font-size: 11px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }

/* ── LOBBY ──────────────────────────────────────────────────────── */
.lobby-main {
  flex: 1;
  /* Top padding trimmed 28px -> 12px: the sport selector sat in a large well
     of empty space under the header. Sides/bottom unchanged. */
  padding: 12px 24px 28px;
  max-width: 1100px; margin: 0 auto; width: 100%;
}
.lobby-hero { margin-bottom: 14px; }
.lobby-headline { font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--text); letter-spacing: 0.01em; }
.lobby-sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
.loading-state, .empty-state { padding: 60px 0; text-align: center; color: var(--muted); font-size: 15px; }

/* ── Contest table — DraftKings-style horizontal rows ───────────── */
.contest-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 8px;
}

.contest-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px; /* reduced from 600px */
}

/* Table headers */
.contest-table thead tr {
  background: var(--bg-card-2);
  border-bottom: 1px solid var(--border-med);
}
.contest-table th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 10px 14px;
  text-align: left;
  white-space: nowrap;
}

/* Column width hints — fluid, not fixed */
.cth-name    { width: 38%; }
.cth-league  { width: 7%;  }
.cth-time    { width: 20%; }
.cth-entries { width: 12%; }
.cth-cost    { width: 8%;  }
.cth-action  { width: 15%; }

/* Table rows */
.contest-row {
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
  cursor: default;
}
.contest-row:last-child { border-bottom: none; }
.contest-row:hover { background: var(--bg-card); }
/* Reserved for contests that are FULL in the lobby — a genuinely unavailable
   row. It was also being applied to every ended entry in History, which
   dimmed the whole table to 50% and made it far harder to read than Upcoming.
   Ended is a normal state, not an unavailable one. */
.contest-row.contest-full { opacity: 0.5; }
.contest-row.my-entry-row { background: rgba(247,206,70,0.03); }
.contest-row.my-entry-row:hover { background: rgba(247,206,70,0.07); }

.contest-table td {
  padding: 12px 14px;
  vertical-align: middle;
  font-size: 14px;
  color: var(--text);
}

/* Column-specific styles */
.cr-name   { }
.cr-title  { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); line-height: 1.2; }
.cr-subtitle { font-size: 11px; color: var(--muted); margin-top: 2px; }

.cr-league { text-align: center; }

.cr-time-main { font-size: 13px; color: var(--text); }
.cr-time-sub  { font-size: 11px; color: var(--muted); margin-top: 2px; }

.cr-entries-count { font-size: 13px; color: var(--text-dim); }

/* Capacity fill bar */
.cr-fill-bar {
  height: 3px;
  background: var(--border-med);
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}
.cr-fill-inner {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.cr-cost { text-align: center; }

.cr-action { text-align: right; white-space: nowrap; }

/* Enter / action button */
.btn-enter-row {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  background: var(--accent-glow);
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 7px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-enter-row:hover   { background: rgba(247,206,70,0.25); }
.btn-enter-row:disabled { opacity: 0.3; cursor: not-allowed; border-color: var(--border-med); color: var(--muted); background: none; }
.btn-edit-entry  { margin-right: 4px; }

/* ── BREAK — PICK PHASE ─────────────────────────────────────────── */
.break-main { flex: 1; overflow-y: auto; padding: 24px; }
.pick-phase { max-width: 900px; margin: 0 auto; }
.pick-header h2 { font-family: var(--font-display); font-weight: 800; font-size: 30px; margin-bottom: 8px; }
.pick-header p  { color: var(--text-dim); font-size: 14px; margin-bottom: 16px; }
.pick-counter { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--accent); margin-bottom: 20px; }

.face-down-deck-box {
  border: 1px solid var(--border-med);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  padding: 12px;
  margin-bottom: 20px;
}
.face-down-deck {
  display: flex; flex-wrap: wrap; gap: 8px;
  /* Centres a partial last row instead of left-aligning it. The 34-card deck
     rarely divides evenly into the available columns, so the final row was
     always a ragged stub hanging off the left. */
  justify-content: center;
}
.facedown-card {
  width: 70px; height: 88px;
  background: var(--bg-card); border: 1.5px solid var(--border-med);
  border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color 0.15s, transform 0.15s, background 0.15s; user-select: none;
}
.facedown-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.facedown-card.picked { border-color: var(--accent); background: var(--accent-glow); transform: translateY(-4px); }
.card-back-logo { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--muted); letter-spacing: 0.06em; }
.facedown-card.picked .card-back-logo { color: var(--accent); }

/* ── BREAK — ASSIGN PHASE ───────────────────────────────────────── */
.assign-phase { max-width: 740px; margin: 0 auto; }
.assign-progress { font-family: var(--font-display); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 18px; }

.flipped-card {
  background: var(--bg-card); border: 2px solid var(--accent);
  border-radius: var(--radius-lg); padding: 18px 26px; margin-bottom: 24px;
  display: inline-flex; flex-direction: column; gap: 4px; min-width: 160px;
  animation: cardFlip var(--card-flip-duration) ease;
}
@keyframes cardFlip { from { opacity: 0; transform: rotateY(90deg) scale(0.9); } to { opacity: 1; transform: rotateY(0deg) scale(1); } }
.card-abbr      { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--accent); }
.card-city      { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.card-team-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); }
.card-division  { font-size: 11px; color: var(--muted); }

.slot-picker-section h3, .roster-summary h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 12px;
}

.slot-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; margin-bottom: 24px; }
.slot-pick-btn {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border-radius: var(--radius);
  border: 1px solid var(--border-med); background: var(--bg-card);
  cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s;
}
.slot-pick-btn.slot-open:hover  { border-color: var(--accent); background: var(--accent-glow); }
.slot-pick-btn.slot-selected    { border-color: var(--accent); background: var(--accent-glow); }
.slot-pick-btn.slot-filled      { opacity: 0.55; cursor: default; }
.sp-label    { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--accent); letter-spacing: 0.06em; }
.sp-eligible { font-size: 11px; color: var(--text-dim); }
.sp-player   { font-size: 13px; color: var(--text); font-weight: 600; }
.sp-team     { font-size: 11px; color: var(--muted); }
.sp-locked   { font-size: 12px; align-self: flex-end; }

.roster-summary { margin-bottom: 24px; }
.roster-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.rs-slot { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; }
.rs-slot.rs-filled { border-color: var(--border-med); }
.rs-label  { font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.rs-player { font-size: 12px; color: var(--text); margin-top: 2px; }
.rs-empty  { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── Player select panel ─────────────────────────────────────────── */
.player-select-panel {
  /* Class applied programmatically to show the panel — layout controlled by #player-select-panel ID rules */
  background: var(--bg-surface);
}
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.psp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
.psp-header h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.psp-team { color: var(--accent); }
.player-select-loading { padding: 24px; text-align: center; color: var(--muted); font-size: 14px; }

/* ── Player rows ─────────────────────────────────────────────────── */
.player-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.player-row:hover { background: var(--bg-card); }
.player-row.unavailable { opacity: 0.4; }
.player-pos { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--accent); min-width: 32px; text-align: center; }
.player-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.player-name { font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
/* The matchup line ("Sun 1:00 PM ET BUF@MIA") was truncated with an ellipsis,
   so on a narrow screen the opponent — the part that matters most — was the
   first thing cut. It wraps to a second line instead.

   Wrapping rather than a hover marquee: there is no hover on a touchscreen, so
   a scroll-on-hover effect would leave mobile users with no way to read it at
   all. Two static lines work everywhere. */
.player-team {
  font-size: 12px;
  color: var(--muted);
  white-space: normal;
  overflow-wrap: anywhere;   /* a long unbroken token still cannot force overflow */
  line-height: 1.35;
}
.player-proj { display: flex; flex-direction: column; align-items: center; min-width: 40px; }
.proj-val    { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); }
.proj-label  { font-size: 10px; color: var(--muted); text-transform: uppercase; }

.inj-badge   { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; }
.inj-out     { background: rgba(240,74,85,0.15); color: var(--red); }
.inj-q       { background: rgba(247,206,70,0.15); color: var(--accent); }

.btn-draft-player {
  background: var(--accent-glow); border: 1px solid var(--accent);
  color: var(--accent); font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.04em;
  padding: 6px 10px; border-radius: 6px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background 0.15s;
}
.btn-draft-player:hover:not([disabled]) { background: rgba(247,206,70,0.28); }
.btn-draft-player[disabled] { opacity: 0.25; cursor: not-allowed; }

.btn-select-edit {
  background: var(--accent-glow); border: 1px solid var(--accent);
  color: var(--accent); font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.04em;
  padding: 6px 10px; border-radius: 6px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  transition: background 0.15s;
}
.btn-select-edit:hover { background: rgba(247,206,70,0.28); }

.empty-pool { padding: 32px; text-align: center; color: var(--muted); font-size: 14px; }
.submitting-state { padding: 60px 24px; text-align: center; font-size: 16px; color: var(--text-dim); }

/* ── Edit picks screen ──────────────────────────────────────────── */
.edit-phase { max-width: 760px; margin: 0 auto; padding-bottom: 40px; }
.edit-intro h2 { font-family: var(--font-display); font-weight: 800; font-size: 28px; margin-bottom: 6px; }
.edit-intro p  { color: var(--text-dim); font-size: 14px; margin-bottom: 24px; }
.edit-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 20px; }

.edit-slot {
  background: var(--bg-card); border: 1px solid var(--border-med);
  border-radius: var(--radius-lg); padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.edit-slot-label { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; }
.edit-slot-team  { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text); }
.edit-slot-player { font-size: 13px; color: var(--text-dim); min-height: 20px; }
.loading-name { color: var(--muted); font-style: italic; }
.empty-name   { color: var(--muted); }
.btn-edit-slot {
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.04em;
  background: none; border: 1px solid var(--border-med); color: var(--text-dim);
  padding: 6px 10px; border-radius: 6px; cursor: pointer; margin-top: 4px;
  transition: border-color 0.15s, color 0.15s;
}
.btn-edit-slot:hover { border-color: var(--accent); color: var(--accent); }

.edit-player-panel {
  background: var(--bg-surface); border: 1px solid var(--border-med);
  border-radius: var(--radius-lg); padding: 18px; margin-top: 16px;
  animation: slideUp 0.22s ease;
}
.edit-player-list { max-height: 360px; overflow-y: auto; }

/* ── Leaderboard ────────────────────────────────────────────────── */
.lb-main { flex: 1; padding: 28px 24px; max-width: 800px; margin: 0 auto; width: 100%; }
.lb-hero { margin-bottom: 22px; }
.lb-hero h2 { font-family: var(--font-display); font-weight: 800; font-size: 34px; }
.lb-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.lb-contest-name { font-size: 13px; color: var(--muted); flex: 1; text-align: right; }
.lb-table { width: 100%; border-collapse: collapse; margin-bottom: 28px; }
.lb-table th {
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border-med);
}
.lb-table td { padding: 13px 14px; font-size: 15px; border-bottom: 1px solid var(--border); color: var(--text); }
.lb-table tr:hover td { background: var(--bg-card); }
.lb-table tr.my-entry td { background: rgba(247,206,70,0.07); color: var(--accent); font-weight: 600; }
.rank-cell { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--muted); width: 50px; }
.lb-table tr:nth-child(1) .rank-cell { color: var(--accent); }
.lb-table tr:nth-child(2) .rank-cell { color: #d8dce8; }  /* was #b0b0b0 */

/* ── Leaderboard: points behind the leader ──────────────────────────────── */
.lb-back-cell   { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Deliberately not --red. A gap is information, not an error, and every row
   below first place has one. Red on almost every row stops meaning anything. */
.lb-back-gap    { color: var(--text-dim); font-weight: 600; }
.lb-back-leader { color: var(--muted); }

/* ── Roster modal: expandable box score ─────────────────────────────────── */
.roster-row-expandable { cursor: pointer; }
.roster-row-expandable:hover { background: rgba(255,255,255,0.04); }

/* Rotates on open. The only affordance saying a row does anything, so it has
   to be visible against the points value it sits beside. */
/* Matches the selection screen's [i] so the affordance means one thing
   everywhere in the app. */
.roster-stats-col { width: 34px; text-align: right; }
.roster-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255,182,18,0.55);
  color: var(--accent);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 700; font-size: 12px; line-height: 1;
}
.roster-row-open .roster-info-btn {
  background: var(--accent); color: #1a1a22;
}

.roster-detail-row > td { padding: 0 !important; border-top: none !important; }
.roster-detail {
  padding: 10px 12px 12px;
  background: var(--bg);
  border-left: 3px solid var(--accent);
}
.roster-detail-loading,
.roster-detail-empty { color: var(--text-dim); font-size: 12px; padding: 6px 0; }

/* ── Projection list, one row per source ────────────────────────────────── */
.proj-list {
  background: var(--bg-card);
  border-radius: 6px;
  padding: 9px 11px;
  margin-bottom: 10px;
}
.proj-list-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin-bottom: 6px;
}
.proj-list-head > span:first-child {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent);
}
/* Amber, not red. Sources disagreeing is information, not a fault. */
.proj-list-spread {
  font-size: 10px; color: var(--muted); white-space: nowrap;
}
.proj-src-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 3px 0;
  font-size: 12px;
}
.proj-src-row + .proj-src-row { border-top: 1px solid rgba(255,255,255,0.06); }
.proj-src-name { color: var(--text-dim); }
.proj-src-pts {
  font-family: var(--font-display); font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums;
}
/* The first row is the source the app actually displays. */
.proj-src-row:first-of-type .proj-src-pts { color: var(--accent); }
.proj-src-tag {
  margin-left: 6px; padding: 0 4px;
  border-radius: 3px; background: rgba(255,255,255,0.08);
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted);
}

/* ── Collapsible season group ───────────────────────────────────────────── */
.stat-season { margin-bottom: 6px; }
.stat-season:last-child { margin-bottom: 0; }

/* The whole row is the toggle, not just the marker — a 12px triangle is a
   poor tap target on a phone. */
.stat-season-summary {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 7px 8px;
  background: var(--bg-card);
  border-radius: 6px;
  border-left: 3px solid var(--accent);
}
.stat-season-summary::-webkit-details-marker { display: none; }
/* Own marker, so it can sit on the left and rotate. */
.stat-season-summary::before {
  content: '\25b8';
  color: var(--accent);
  font-size: 11px;
  transition: transform 0.15s ease;
  margin-right: 2px;
}
.stat-season[open] > .stat-season-summary::before { transform: rotate(90deg); }

.stat-season-name {
  flex: 1;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text);
}
/* Marked with a dotted underline only. The figure is our own DraftKings
   scoring of the real box score and is right; the underline is there so a
   hover explains where it came from, not to cast doubt on it. */
.stat-week-pts-computed { border-bottom: 1px dotted rgba(255,255,255,0.25); }

/* ── Moderation notice ──────────────────────────────────────────────────── */
.moderation-card { max-width: 420px; }
.moderation-body { margin: 14px 0 4px; text-align: left; }
.moderation-item {
  background: var(--bg-card);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.moderation-item-what {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--accent); margin-bottom: 5px;
}
/* The refused value, quoted. It has already been replaced, so without this the
   user is guessing at which name was rejected. */
.moderation-item-value {
  font-family: var(--font-display); font-size: 15px;
  color: var(--text); margin-bottom: 6px;
}
.moderation-item-reason {
  font-size: 13px; line-height: 1.5; color: var(--text); margin-bottom: 8px;
}
.moderation-item-next {
  font-size: 12px; line-height: 1.45; color: var(--text-dim);
}
.moderation-actions {
  display: flex; flex-direction: column; gap: 9px; margin-top: 16px;
}

.stat-season-past {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.09);
  color: var(--text-dim);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  vertical-align: 1px;
}

.stat-season-meta {
  font-size: 11px; color: var(--text-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.stat-season[open] > .stat-season-summary { margin-bottom: 4px; }

/* Season summary — the first thing in the panel, before the week list. */
.stat-summary {
  padding: 2px 0 9px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
  margin-bottom: 4px;
}
/* Named explicitly, because preseason and regular-season week numbers BOTH
   restart at 1. Two rows reading "Week 2" without this look like a duplicate
   rather than two different competitions. */
.stat-summary-season {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--accent);
  margin-bottom: 3px;
}
.stat-summary-nums { display: flex; flex-wrap: wrap; gap: 12px; }
.stat-sum-item {
  font-size: 12px; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.stat-sum-item b {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; color: var(--text);
  margin-right: 2px;
}
.stat-sum-none { font-size: 12px; color: var(--text-dim); }
.stat-summary-note {
  font-size: 11px; color: var(--muted); margin-top: 4px;
}

.stat-week {
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.stat-week:last-child { border-bottom: none; }


/* NO max-height and NO internal scrolling here, deliberately.
   A scroll container inside a scrolling page makes the browser guess which one
   a swipe meant, and it guesses wrong at the boundaries -- the panel catches a
   flick intended for the page, or the page steals one intended for the panel.
   A long panel simply makes the page longer, which every user already knows
   how to deal with. */

/* The week this entry actually scored from. A left rule and a tag rather than
   a background tint: the panel already sits on a tinted surface, and a second
   tint on top of it is close to invisible on a phone in daylight. */
.stat-week-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.stat-week-no  { font-size: 12px; font-weight: 600; color: var(--text); }
/* Dimmer than the week number and lighter in weight: it qualifies the week
   rather than competing with it. */
.stat-week-opp {
  margin-left: 6px;
  font-size: 11px; font-weight: 500;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.stat-week-pts {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums;
}
/* 12px, not the 10px used elsewhere for secondary text. This is the actual
   content of the panel, not a caption, and the whole reason the panel exists
   is that people could not read the small grey lines. */
.stat-week-line {
  font-size: 12px; color: var(--text-dim); margin-top: 2px; line-height: 1.45;
}

/* Projection disclaimer. Rendered only when projections are live — see
   selectSlot(). Deliberately not styled as a warning: it is a standing
   limitation of the data, not an alert, and a red banner at the top of every
   draft would be ignored within a week. */
.proj-disclaimer {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
  background: rgba(255,255,255,0.05);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 7px 10px;
  margin: 0 0 10px;
}
.proj-disclaimer-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid rgba(255,182,18,0.55);
  color: var(--accent);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic; font-weight: 700; font-size: 10px;
  vertical-align: -2px;
}

/* ── Player selection: previous weeks ───────────────────────────────────── */
/* The row is a flex line with a fixed height; the stats panel has to break out
   onto its own line beneath it rather than squeeze in beside the Select
   button. */
.player-row { flex-wrap: wrap; }

.btn-psp-stats {
  /* A 24px circle, not a labelled button.
     The text version ("Last weeks") was discoverable and too wide: on a phone
     it squeezed the player name and matchup line into an ellipsis, which cost
     more information than the stats panel adds. [i] is a recognised
     request-for-detail and needs no label to be read as one. */
  flex: 0 0 auto;
  width: 24px; height: 24px;
  margin-right: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,182,18,0.55);
  background: transparent;
  color: var(--accent);
  /* Serif italic: the conventional look of an info glyph, and it stops a lone
     "i" reading as a stray character. */
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-psp-stats:hover { background: rgba(255,182,18,0.16); color: var(--text); }
.btn-psp-stats-open  { background: var(--accent); color: #1a1a22; border-color: var(--accent); }

.psp-stats {
  flex: 1 0 100%;
  margin-top: 8px;
  padding: 8px 10px 10px;
  background: var(--bg);
  border-radius: 6px;
  border-left: 3px solid var(--accent);
}

/* Hides the whole app while the region check runs.
   Without this the login form is briefly visible and interactive, which is long
   enough for a password manager to autofill and submit. Lifted by revealApp()
   on either the answer or the timeout, so it can never strand the app. */
body.geo-checking .screen,
body.geo-checking #bottom-nav,
body.geo-checking #btn-refresh-tab { visibility: hidden !important; }

/* Route out of a disabled Enter button. Small and secondary — it should read
   as a next step, not compete with the contests around it. */
.btn-verify-link {
  display: block; width: 100%;
  margin-top: 5px; padding: 4px 6px;
  background: transparent;
  border: 1px solid rgba(255,182,18,0.5);
  border-radius: 5px;
  color: var(--accent);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer;
}
.btn-verify-link:hover { background: rgba(255,182,18,0.14); }

/* An announcement, not a fault. Accent rather than the maintenance amber, so
   the two are distinguishable at a glance and a real outage keeps its urgency. */
.maintenance-banner.banner-notice {
  background: rgba(255,182,18,0.10);
  border-color: rgba(255,182,18,0.45);
  color: var(--text);
}
.maintenance-banner.banner-notice .mb-icon { color: var(--accent); }

/* Marks a genuinely optional field so the other four read as required without
   needing an asterisk on each. */
.label-optional { font-weight: 400; color: var(--muted); font-size: 0.85em; }

/* ── Age verification screen ────────────────────────────────────────────── */
.age-verify-wrap { max-width: 460px; margin: 0 auto; padding: 28px 22px; text-align: center; }
.age-verify-icon { font-size: 38px; margin-bottom: 12px; }
.age-verify-title {
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  color: var(--text); margin: 0 0 10px; line-height: 1.2;
}
.age-verify-message { font-size: 14px; line-height: 1.55; color: var(--text-dim); margin: 0 0 20px; }
.age-verify-why {
  background: rgba(240,74,85,0.10);
  border-left: 3px solid var(--red);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 18px;
  font-size: 13px; line-height: 1.5;
  color: var(--text);
  text-align: left;
}

.age-verify-upload {
  background: var(--bg-card); border-radius: 8px;
  padding: 16px; margin-bottom: 18px; text-align: left;
}
.age-verify-label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--text); margin-bottom: 8px;
}
.age-verify-hint { font-size: 11px; line-height: 1.5; color: var(--muted); margin: 8px 0 12px; }
.age-verify-preview {
  display: block; width: 100%; max-height: 190px; object-fit: contain;
  border-radius: 6px; margin-bottom: 12px; background: var(--bg);
}
.age-verify-status { font-size: 12px; line-height: 1.5; color: var(--text-dim); margin: 10px 0 0; }

/* ── Region restricted screen ───────────────────────────────────────────── */
.restricted-available {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 16px;
  text-align: left;
}
.restricted-avail-label {
  display: block;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); margin-bottom: 4px;
}
.restricted-avail-list {
  font-size: 13px; line-height: 1.5; color: var(--text-dim);
}
.restricted-wrap {
  max-width: 460px;
  margin: 0 auto;
  padding: 48px 22px;
  text-align: center;
}
.restricted-icon {
  font-size: 42px;
  color: var(--accent);
  margin-bottom: 14px;
  line-height: 1;
}
.restricted-title {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 800;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.2;
}
.restricted-lead {
  font-size: 14px; line-height: 1.55;
  color: var(--text-dim);
  margin: 0 0 22px;
}
.restricted-facts {
  background: var(--bg-card);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.restricted-fact {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.restricted-fact-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted);
}
.restricted-fact-value {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700; color: var(--text);
}
.restricted-note {
  font-size: 12px; line-height: 1.5;
  color: var(--text-dim);
  margin: 0 0 14px;
}
/* Buttons stack rather than sit side by side. Someone reading this page is
   being told no, and a cramped row of two buttons on a phone is the wrong
   moment to make the next step fiddly. */
.restricted-actions {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 22px;
}

/* ── Leaderboard: minutes remaining ─────────────────────────────────────── */
.lb-clock {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.lb-table tr:nth-child(3) .rank-cell { color: #c87533; }
.pts-cell { font-family: var(--font-display); font-weight: 800; font-size: 20px; text-align: right; }
.lb-actions { display: flex; justify-content: center; padding-top: 12px; }

/* Post-submit primary action, above the standings table. Sits at the top so
   it's reachable without scrolling past a long leaderboard — on a big contest
   the old bottom placement was several screens down. */
.lb-actions-top {
  padding-top: 0;
  margin-bottom: 14px;
}
.lb-actions-top .btn-primary {
  min-width: 200px;
}
@media (max-width: 680px) {
  .lb-actions-top { margin-bottom: 10px; }
  .lb-actions-top .btn-primary { width: 100%; min-width: 0; }
}

/* ── Toast ──────────────────────────────────────────────────────── */
/* white-space:nowrap forced every toast onto ONE line, so anything longer than
   the screen ran off both edges — on mobile the verification message was cut
   off at both ends and unreadable. Wrapping plus a width cap keeps it on
   screen at any length. */
.toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card-2); color: var(--text);
  border: 1px solid var(--border-med); border-radius: var(--radius);
  padding: 12px 20px; font-size: 14px; z-index: 9999;
  max-width: min(92vw, 440px);
  width: max-content;
  text-align: center;
  line-height: 1.4;
  overflow-wrap: anywhere;   /* a long unbroken token can't push it wide */
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
  animation: toastIn 0.25s ease;
}

@media (max-width: 680px) {
  /* Sit above the bottom nav rather than behind it. */
  .toast {
    bottom: calc(var(--bottom-nav-h, 64px) + 12px + env(safe-area-inset-bottom, 0px));
    max-width: 92vw;
    font-size: 13px;
    padding: 11px 16px;
  }
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(12px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.toast-success { border-color: var(--green); color: var(--green); }
.toast-error   { border-color: var(--red);   color: var(--red); }

/* ── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-med); border-radius: 4px; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .form-row { grid-template-columns: 1fr; }
  .login-card, .register-card { padding: 28px 20px; }
  .app-header { padding: 0 10px; gap: 6px; }
  .lobby-main { padding: 8px 14px 16px; }
  .lb-main    { padding: 16px; }
  .lobby-hero { margin-bottom: 10px; }
  .slot-picker { grid-template-columns: repeat(2, 1fr); }
  .edit-slots  { grid-template-columns: repeat(2, 1fr); }

  /* Hide balance label on small screens, keep value */
  .balance-label { display: none; }
  .balance-value { font-size: 15px; }

  /* Compact header nav */
  .btn-header-nav { padding: 4px 6px; font-size: 13px; }
  .btn-logout-text { font-size: 12px; padding: 4px 8px; }

  /* Move league tabs below header as a scrollable strip */
  .header-center { display: none; }
  .lobby-league-strip {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding: 8px 16px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }
  .lobby-league-strip::-webkit-scrollbar { display: none; }
  .lobby-league-strip .league-tab { flex-shrink: 0; }
}

/* ── Formation: fluid slots that scale with viewport ─────────────── */
@media (max-width: 420px) {
  /* Shrink slots so 3-wide rows fit on 320px screens */
  .formation-grid { --slot-w: 88px; }   /* spacer + card cell follow automatically */
  .formation-slot { height: 118px; }
  .formation-row { gap: 8px; }
  .formation-grid { gap: 8px; }
  .formation-phase { padding: 12px 8px 24px; }
  .formation-slot-label { font-size: 13px; }
  .formation-slot-eligible { font-size: 9px; }

  /* The card is a grid cell now, so it can't cover the SF slot — these are
     purely size tweaks to keep the 2-up SF row inside a narrow viewport. */
  .draggable-card { width: 84px; height: 112px; }
  .draggable-name { font-size: 11px; }
  .drag-hint-label { font-size: 9px; }

}


/* ── Pick phase mobile layout (all phone widths, not just <=420) ── */
@media (max-width: 680px) {
  /* ── Pick phase: everything on screen at once ──────────────────
     Layout is header → instructions → counter → deck box → buttons.
     The phase fills the viewport height and does NOT scroll, so the
     deck and both action buttons are always reachable. 100dvh (not
     100vh) because mobile browser chrome shrinks the visual viewport
     and 100vh would push the buttons under it. */
  /* Height chain: .screen (100dvh) → .break-main (flex:1) → #break-main-content
     → .pick-phase. Every link needs height:100% + min-height:0 so the deck box
     ends up with the ACTUAL remaining space.

     This replaced a min-height:calc(100dvh - header) on .pick-phase, which was
     the cause of the scrolling: .break-main is already exactly that tall, so
     asking the content for the same height AGAIN — plus padding — guaranteed
     overflow. Nothing here computes viewport maths now; it just fills its box. */
  .break-main { padding: 10px; }

  /* #break-main-content is a flex column with MIN-height 100% — not height 100%
     — because it hosts every break screen, not just the football pick phase.
       • min-height:100% + flex:1 on .pick-phase → the pick phase fills the
         viewport exactly and needs no scroll.
       • Content taller than the viewport (golf tier picker, golf mode select,
         the assign board) simply grows past it and .break-main scrolls as normal.
     An earlier version used height:100% here with overflow:hidden on
     .break-main, which fitted the football deck but CLIPPED every taller golf
     screen — the bottom half of the mode list became unreachable. */
  #break-main-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }
  .pick-phase {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* max-width + overflow-x guard: the screenshot showed "Choose Your Cards"
       clipped at the LEFT edge, which only happens when the page is wider than
       the viewport and has scrolled sideways. Nothing here should be able to
       push past the screen. */
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Every OTHER break screen keeps its natural height and scrolls. flex:0 0 auto
     is explicit so a flex item can never be squashed below its content — golf's
     mode list and tier picker are both taller than the viewport by design. */
  #break-main-content > .golf-flow,
  #break-main-content > .formation-phase,
  #break-main-content > .submitting-state,
  #break-main-content > .error-msg {
    flex: 0 0 auto;
  }

  /* Compact the copy above the deck so the cards get the room. */
  /* The screenshot showed "Choose Your Cards" clipped off the top — the phase
     is a fixed-height column, so anything that does not fit is cut rather than
     scrolled. Tightening the copy gives the heading room. */
  .pick-header h2 { font-size: 18px; margin-bottom: 2px; }
  .pick-header p  { font-size: 11.5px; margin-bottom: 6px; }
  .pick-counter   { font-size: 16px; margin-bottom: 6px; }

  /* The deck box takes the leftover space and centres the grid in it. */
  .face-down-deck-box {
    flex: 1 1 auto;
    min-height: 0;          /* lets the box shrink below its content size */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin-bottom: 10px;
  }

  /* 34 cards over 7 columns = 5 rows (last row holds 6).
     BOTH axes are 1fr, so the grid divides the space it's given rather than
     deriving its height from its width. aspect-ratio on the card is gone
     deliberately — with it, card height came from card width and the grid
     could demand more height than existed, which is unfixable by any amount
     of trimming elsewhere. The card art keeps its own shape via
     object-fit:contain on the image below. */
  /* 34 cards over SIX columns = 6 rows (last row holds 4).

     NO PERCENTAGE HEIGHTS AND NO ASPECT-RATIO ANYWHERE IN THIS SUBTREE.
     Two previous attempts collapsed the cards to ~20px dots, and both failed
     the same way: the grid took its height from aspect-ratio, which leaves its
     1fr tracks INDEFINITE, so `height: %` on anything inside had nothing to
     resolve against and fell back to content size — where the content was
     sizing itself from its parent.

     Instead the card WIDTH is set in viewport units and the row height follows
     from the image's own 864x1184 proportions. Every value resolves in one
     direction, top down, so nothing can collapse. */
  .face-down-deck {
    display: grid;
    /* Overridden inline by renderPickPhase() from the actual deck size — the
       fallback here only applies if that ever fails to run. */
    grid-template-columns: repeat(var(--deck-cols, 6), auto);
    grid-auto-rows: auto;
    justify-content: center;
    align-content: center;
    gap: 9px;
    width: 100%;
    margin: auto;
    min-height: 0;
  }

  /* THE CARD carries the frame, not the image, and it does NOT fill its cell.
     A 5:7 card inside a square cell is height-limited, so width comes out at
     about 71% of the cell — the leftover becomes visible space around every
     card, on top of the grid gap. That is where the separation comes from;
     making the gap alone bigger just inflated the box.

     The border used to sit on .card-img-back, but object-fit:contain letterboxes
     the art inside that element, so the frame was drawn around the element box
     rather than the art you can see. */
  .facedown-card {
    /* 92%, not 100%: at full height the card met the cell edge, so the only
       vertical separation was the 8px gap while horizontally there was ~23px.
       The rows looked joined even though the columns did not. */
    height: 92%;
    width: auto;
    /* Matches the ART's real proportions (fcb-card.png is 864x1184 = 0.730),
       NOT a nominal 5:7 (0.714). The frame was slightly taller than the image
       it contained, which is what read as the cards being stretched. */
    aspect-ratio: 864 / 1184;
    max-width: 100%;
    margin: auto;                      /* centres the card in its cell */
    min-height: 0;
    padding: 3px;
    box-sizing: border-box;
    background: var(--bg-card);
    border: 2px solid var(--border-med);
    border-radius: 7px;
    /* Shadow kept TIGHT — a soft 6px blur spread into the gap and made
       neighbouring cards look like they were touching. */
    box-shadow: 0 1px 3px rgba(0,0,0,0.55);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .facedown-card:hover {
    border-color: var(--accent);
    transform: none;                   /* lifting shifts it into its neighbour */
  }
  /* Selection reads as a glow around the whole card rather than a thicker
     line, which at this size just looked like the card had grown. */
  /* Selection: a 2px ring only. The previous version added a 10px blur, which
     is WIDER THAN THE GAP — the glow from one selected card reached its
     neighbours and looked like overlap. */
  .facedown-card.picked {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
    transform: none;
  }

  .card-img-back {
    width: 100%; height: 100%;
    object-fit: contain;               /* never crop when the cell shrinks */
    border: none;                      /* the frame is on the card now */
    border-radius: 4px;
    box-shadow: none;
  }

  /* Badge tucked fully inside the card — at -4px it overlapped the tile above
     and to the right, which is what made the selected cards look joined. */
  .facedown-card.picked::after {
    top: 2px; right: 2px;
    width: 15px; height: 15px; font-size: 9px;
    line-height: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  }
  /* The picked check-mark badge would clip against the box edge at this
     size — pull it inside the card. */
  .facedown-card.picked::after {
    top: -4px; right: -4px;
    width: 16px; height: 16px; font-size: 9px;
  }

  /* Buttons sit at the bottom, side by side — stacking them costs ~50px
     of height that the deck needs. */
  .pick-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    gap: 8px;
  }
  .pick-actions .btn-secondary { flex: 0 0 34%; }
  .pick-actions .btn-primary   { flex: 1 1 auto; }
  .pick-actions button { padding: 12px 8px; font-size: 13px; }
}

/* Short viewports (360x640 and similar) — optional polish. */
@media (max-width: 680px) and (max-height: 700px) {
  /* The deck now shrinks to fit on its own, so this is no longer load-bearing —
     it just buys the cards more room on short screens by trimming the copy. */
  .pick-header h2 { font-size: 17px; margin-bottom: 2px; }
  .pick-header p  { font-size: 11px; margin-bottom: 4px; }
  .pick-counter   { font-size: 15px; margin-bottom: 4px; }
  .face-down-deck-box { padding: 4px; margin-bottom: 8px; }
  .pick-actions button { padding: 10px 8px; font-size: 12px; }
}

/* ── Player panel: full-width on mobile, constrained on desktop ─── */
#player-select-panel.hidden { display: none; }
#player-select-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 65vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border-top: 2px solid var(--accent);
  border-radius: 16px 16px 0 0;
  padding: 16px 16px 32px;
  z-index: 300;
  animation: slideUpPanel 0.25s ease;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.5);
}
/* Constrain to formation width on wider screens */
@media (min-width: 600px) {
  #player-select-panel {
    left: 50%;
    right: auto;
    width: 380px;
    transform: translateX(-50%);
    border-radius: 16px 16px 0 0;
    /* Use the centered keyframe so the slide keeps translateX(-50%) throughout
       (the default slideUpPanel drops it, causing a from-the-right snap). */
    animation: slideUpPanelCentered 0.25s ease;
  }
}

/* ── Leaderboard table: collapse on mobile ───────────────────────── */
@media (max-width: 560px) {
  /* Hide the Player column — team name + points is enough at a glance */
  .lb-table th:nth-child(3),
  .lb-table td:nth-child(3) { display: none; }

  /* Tighten padding */
  .lb-table th,
  .lb-table td { padding: 10px 8px; font-size: 13px; }
  .rank-cell   { font-size: 17px; width: 36px; }
  .pts-cell    { font-size: 17px; }

  /* Payout column — hide until implemented */
  .lb-table th:nth-child(5),
  .lb-table td:nth-child(5) { display: none; }
}

/* ── Profile stats grid: 2-col on mobile ────────────────────────── */
@media (max-width: 420px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .rg-text    { font-size: 10px; }
  .deposit-presets { grid-template-columns: repeat(3, 1fr); }
}

/* ── Roster modal: full screen on mobile ────────────────────────── */
@media (max-width: 560px) {
  .modal-card { max-height: 96vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .modal-overlay { align-items: flex-end; padding: 0; }

  /* Hide team card image column in roster table on small screens */
  /* Hide the CARD-IMAGE column on mobile, not "column 2".
     nth-child(2) was written for the football table (Slot | Team card | Player
     | Pos | Pts) but the golf table is Tier | Golfer | Country | Pts — so the
     same rule hid the golfer's NAME, leaving only tier, country and points.
     Targeting the class means each table drops the right column. */
  .roster-table td.roster-card-cell,
  .roster-table th.roster-card-col { display: none; }
  .roster-table th,
  .roster-table td { padding: 8px 8px; }

  /* Names get the reclaimed width; long ones ellipsis rather than wrap. */
  .roster-player-name {
    max-width: 0;            /* lets the cell shrink so ellipsis engages */
    width: 60%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .roster-pos { white-space: nowrap; }
}

/* ── My entries grid: single column on mobile ───────────────────── */
@media (max-width: 500px) {
  
  .entry-actions { flex-direction: row; }
}


/* ── Logo images ────────────────────────────────────────────────── */
.header-logo-img {
  height: 36px; width: auto;
  filter: drop-shadow(0 0 6px rgba(247,206,70,0.4));
}
.login-logo-img {
  width: 56px; height: 56px; object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(247,206,70,0.35));
}

/* ── Leaderboard nav button ─────────────────────────────────────── */
.btn-lb-nav {
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.04em;
  background: var(--accent-glow); border: 1px solid var(--border-accent);
  color: var(--accent); padding: 6px 14px; border-radius: var(--radius);
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
.btn-lb-nav:hover { background: rgba(247,206,70,0.28); }

/* ── Leaderboard contest picker ─────────────────────────────────── */
.lb-contest-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.lb-contest-item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: border-color 0.15s;
}
.lb-contest-item:hover { border-color: var(--border-med); }
.lb-ci-left { display: flex; flex-direction: column; gap: 4px; }
.lb-ci-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); }
.lb-ci-meta { font-size: 12px; color: var(--muted); }
#lb-actions { margin-top: 20px; }

/* ── Card images — face-down pick phase (DESKTOP) ───────────────────
   ⚠ THIS BLOCK SITS AFTER THE @media (max-width: 680px) RULES.
   Later rules of equal specificity win regardless of the media query, so
   everything here was overriding the mobile layout — which is why desktop
   looked right while mobile kept showing lifted cards, badges hanging off the
   corner and cropped art. Anything mobile-specific below must therefore be
   re-stated in the mobile block, or moved above it. Keep desktop-only values
   here and nothing else. */
.facedown-card {
  width: 76px; height: 106px;
  background: none; border: none;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; padding: 0;
  position: relative;
  transition: transform 0.15s, filter 0.15s;
}
.facedown-card:hover { transform: translateY(-5px); filter: brightness(1.15); }
.facedown-card.picked {
  transform: translateY(-8px);
  filter: brightness(1.1) drop-shadow(0 0 10px rgba(247,206,70,0.7));
}
.facedown-card.picked::after {
  content: '✓';
  position: absolute; top: -8px; right: -8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: #111;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.card-img-back {
  width: 100%; height: 100%;
  border-radius: 8px; object-fit: cover;
  display: block;
  border: 2px solid var(--border-med);
  box-shadow: 0 1px 3px rgba(0,0,0,0.45);
  background: var(--bg-card);
  transition: border-color 0.15s;
}
.facedown-card:hover .card-img-back  { border-color: var(--accent); }
.facedown-card.picked .card-img-back { border-color: var(--accent); }

/* ── Card images — face-down pick phase (MOBILE) ────────────────────
   Restated here because the desktop block above sits AFTER the earlier 680px
   media query, and later rules of equal specificity win.

   The IMAGE's width is the only size declared. An <img> with a width and
   `height: auto` uses its intrinsic 864x1184 ratio, so the height always
   resolves and the card can never collapse. The card wrapper simply shrinks to
   fit it. */
@media (max-width: 680px) {
  .facedown-card {
    /* Sized by its content — no width/height of its own to resolve. */
    width: auto;
    height: auto;
    padding: 0;
    display: block;
    background: none;
    border: none;
    position: relative;
    cursor: pointer;
    /* No lift on touch: translateY moves the card into its neighbour's space,
       and there is no hover on a touchscreen for it to belong to. */
    transform: none;
    filter: none;
    transition: none;
  }
  .facedown-card:hover,
  .facedown-card.picked { transform: none; filter: none; }

  /* THE one dimension in this subtree. 12.2vw over six columns leaves roughly
     a third of the width as gaps; clamp keeps it sane on a small phone and
     stops it ballooning on a tablet. */
  .card-img-back {
    /* Width is bounded by BOTH axes.
       12.2vw alone overflowed short screens: six rows of a 0.73-ratio card is
       roughly 8.2x the card width in height, and on a 360x640 phone that came
       to 406px against ~335px of room. The dvh term caps the card so six rows
       always fit; whichever limit is smaller wins.
       vh is included first as a fallback for anything without dvh. */
    /* Sized from the COLUMN and ROW counts rather than a fixed 6.
       75vw / cols and 40dvh / rows reproduce the previous values at 6x6
       (12.5vw, 6.7dvh) while letting a smaller deck use bigger cards —
       a 4x4 deck gets 18.75vw instead of squeezing into a sixth of the width.
       Whichever axis is tighter still wins, so nothing overflows.
       The vh line is a fallback for anything without dvh. */
    width: clamp(26px, min(75vw / var(--deck-cols, 6), 40vh  / var(--deck-rows, 6)), 96px);
    width: clamp(26px, min(75vw / var(--deck-cols, 6), 40dvh / var(--deck-rows, 6)), 96px);
    height: auto;              /* intrinsic ratio — cannot fail to resolve */
    display: block;
    object-fit: contain;
    background: var(--bg-card);
    border: 2px solid var(--border-med);
    border-radius: 6px;
    /* Tight shadow — a soft blur spreads into the gap and makes neighbouring
       cards look joined. */
    box-shadow: 0 1px 3px rgba(0,0,0,0.55);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .facedown-card:hover .card-img-back { border-color: var(--accent); }

  /* Selection is a 2px ring. The desktop glow is a 10px drop-shadow — wider
     than the gap — so it reached neighbouring cards and read as overlap. */
  .facedown-card.picked .card-img-back {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
  }

  /* Badge inside the card. At -8px it hung over the tile above and to the
     right, which was most of what looked like overlap. */
  .facedown-card.picked::after {
    top: 3px; right: 3px;
    width: 15px; height: 15px;
    font-size: 9px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  }
}

/* ── Card images — assign phase (flipped/revealed) ──────────────── */
.flipped-card-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 24px;
}
.card-img-front {
  width: 140px; height: 196px;
  border-radius: 12px; object-fit: cover; display: block;
  border: 2px solid var(--accent);
  box-shadow: 0 0 20px rgba(247,206,70,0.35);
}
.card-flip-anim {
  animation: cardFlip var(--card-flip-duration) ease;
}
@keyframes cardFlip {
  0%   { opacity: 0; transform: rotateY(90deg) scale(0.85); }
  60%  { opacity: 1; transform: rotateY(-8deg) scale(1.03); }
  100% { opacity: 1; transform: rotateY(0deg) scale(1); }
}
.card-img-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  border-radius: 0 0 10px 10px;
  padding: 10px 10px 8px;
}
.card-overlay-city { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.92); }
.card-overlay-name { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #fff; line-height: 1.1; }
.card-overlay-div  { font-size: 10px; color: rgba(255,255,255,0.86); margin-top: 1px; }

/* ── Roster summary — mini card images ──────────────────────────── */
.rs-slot.rs-filled .rs-team-img {
  width: 32px; height: 44px;
  border-radius: 4px; object-fit: cover;
  margin-bottom: 4px; display: block;
  border: 1px solid var(--border-med);
}

/* ── Edit slot mini cards ────────────────────────────────────────── */
.edit-slot-card-img {
  width: 48px; height: 67px;
  border-radius: 6px; object-fit: cover;
  border: 1px solid var(--border-med);
  margin-bottom: 6px; display: block;
}

/* ── Wildcard picker ─────────────────────────────────────────────── */
.wildcard-banner {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-bottom: 24px; text-align: center;
}
.wildcard-badge {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  color: var(--accent); letter-spacing: 0.06em;
  text-shadow: 0 0 16px rgba(247,206,70,0.5);
}
.wildcard-desc { font-size: 14px; color: var(--text-dim); max-width: 380px; line-height: 1.5; }

/* Layout lives in the filmstrip rule further down — this grid version is
   superseded. Kept as a comment marker so the two aren't reintroduced. */
.wildcard-team-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--bg-card); border: 1px solid var(--border-med);
  border-radius: var(--radius-lg); padding: 8px 6px;
  cursor: pointer; transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.wildcard-team-btn:hover {
  border-color: var(--accent); background: var(--accent-glow);
  transform: translateY(-3px);
}
.wc-team-img  { width: 72px; height: 100px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-med); }
.wc-team-abbr { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--accent); }
.wc-team-name { font-size: 10px; color: var(--text-dim); text-align: center; line-height: 1.2; }
.wc-team-div  { font-size: 9px; color: var(--muted); text-align: center; }

/* ── My Entries cards ────────────────────────────────────────────── */
.my-entry-card { border-color: var(--border-med); }
.my-entry-card.ended { opacity: 0.75; }
.entry-team-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--accent); }
.pts-meta { color: var(--green); font-weight: 600; }
.status-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.live-badge   { background: rgba(76,216,112,0.15); color: var(--green); }
.ended-badge  { background: rgba(255,255,255,0.07); color: var(--muted); }

.entry-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.btn-entry-action {
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.03em;
  padding: 8px 14px; border-radius: var(--radius);
  border: 1px solid var(--border-med); background: var(--bg-card-2);
  color: var(--text-dim); cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex: 1; text-align: center; min-width: 110px;
}
.btn-entry-action:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }
.btn-edit-entry { }
.btn-view-lb    { }

/* ── Leaderboard table updates ──────────────────────────────────── */
.lb-row-clickable { cursor: pointer; }
.lb-row-clickable:hover td { background: var(--bg-card-2); }
.lb-team-cell   { font-weight: 600; }
.lb-player-cell { color: var(--text-dim); }
.payout-cell    { color: var(--muted); font-family: var(--font-display); font-size: 15px; text-align: right; }

/* ── Roster detail modal ─────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000; padding: 20px;
  animation: fadeIn 0.18s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-med);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 560px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  animation: slideUp 0.22s ease;
}
.modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--accent); }
.modal-sub   { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.modal-body  { overflow-y: auto; padding: 16px 22px 22px; }

.roster-table { width: 100%; border-collapse: collapse; }
.roster-table th {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-med);
}
.roster-table td { padding: 10px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.roster-table tr:last-child td { border-bottom: none; }
.roster-table tr:hover td { background: var(--bg-card); }

.roster-slot-label {
  font-family: var(--font-display); font-weight: 800; font-size: 12px;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap;
}
.roster-mini-card {
  width: 30px; height: 42px;
  border-radius: 4px; object-fit: cover;
  border: 1px solid var(--border-med); display: block;
}
.roster-player-name { font-size: 14px; font-weight: 600; color: var(--text); }
.roster-pos { font-size: 12px; color: var(--muted); }
.roster-pts {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  color: var(--text); text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════
   FORMATION PHASE — 1-3-3-1 card slot grid + draggable card
   ═══════════════════════════════════════════════════════════════════ */

.formation-phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Bottom padding was 100px to clear the old fixed card. The card is in the
     grid now, so the board no longer reserves dead space beneath it. */
  padding: 16px 12px 28px;
  min-height: calc(100vh - var(--header-h));
  position: relative;
}

.formation-progress {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin-bottom: 20px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.formation-hint {
  font-family: var(--font-body); font-weight: 400; font-size: 12px;
  text-transform: none; letter-spacing: 0; color: var(--muted); opacity: 0.7;
}

/* ── Formation grid ──────────────────────────────────────────────── */
.formation-grid {
  --slot-w: 96px;          /* mobile override in the 420px query below */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 360px;
}

.formation-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

/* SF row holds the SF slot + the card being placed. align-items:center keeps
   the card visually level with the slot even though it carries a hint label
   underneath, and the shared basis stops either cell squeezing the other. */
/* SF row = [spacer][SF][card]. Gap must equal .formation-row's gap or the
   columns shift. align-items:flex-start keeps the card's TOP level with the
   SF slot's top — centering would ride it up, because the card cell is taller
   than the slot (it carries the hint label underneath). */
.formation-row-with-card {
  align-items: flex-start;
}

.formation-slot-spacer {
  width: var(--slot-w);
  flex: 0 0 auto;
  visibility: hidden;
  pointer-events: none;
}

/* ── Individual slot ─────────────────────────────────────────────── */
/* Slot width lives in --slot-w (set on .formation-grid) because the SF-row
   spacer and the card cell must match it EXACTLY or the bottom row stops
   lining up with the columns above. */
.formation-slot {
  width: var(--slot-w);
  height: 130px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  user-select: none;
}

.formation-slot.slot-empty {
  background: var(--bg-card);
  border: 2.5px solid var(--accent);
  cursor: pointer;
}
.formation-slot.slot-empty:hover,
.formation-slot.slot-empty.slot-selected {
  background: var(--accent-glow);
  border-color: var(--accent);
  transform: scale(1.04);
}
.formation-slot.slot-empty.drag-over {
  background: rgba(247,206,70,0.22);
  border-color: #ffd740;
  transform: scale(1.07);
  box-shadow: 0 0 18px rgba(247,206,70,0.4);
}

.formation-slot.slot-locked {
  border: 2px solid var(--border-med);
  background: var(--bg-card-2);
  cursor: default;
  overflow: hidden;
}

.formation-slot-label {
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  color: var(--accent); letter-spacing: 0.06em; text-align: center;
}
.formation-slot-eligible {
  font-size: 10px; color: var(--text-dim); text-align: center; margin-top: 4px;
  line-height: 1.3;
}
.formation-drop-hint {
  font-size: 9px; color: var(--muted); text-align: center; margin-top: 6px;
  text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6;
}

/* Locked slot content */
.formation-card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 8px;
}
.formation-slot-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
  border-radius: 0 0 8px 8px;
  padding: 6px 6px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.formation-slot-player {
  font-size: 10px; font-weight: 600; color: #fff; text-align: center;
  line-height: 1.2; word-break: break-word;
}
.formation-slot-lock { font-size: 10px; }

/* ── Draggable card ──────────────────────────────────────────────── */
/* The card being placed lives INSIDE the formation grid as the second cell of
   the SF row (a 1-3-3-2 layout), not as a fixed overlay.

   It was previously position:fixed, bottom, left:50% — the same horizontal
   centre as the single-slot SF row — so on narrow screens it sat directly on
   top of the SF slot and hid it. Making it a flow element means the row simply
   makes room, and no viewport size can produce an overlap. */
.draggable-card-wrap {
  /* Same footprint as a slot so the card sits squarely in the FLEX2 column. */
  width: var(--slot-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.draggable-card {
  width: 90px;
  height: 126px;
  border-radius: 10px;
  border: 2.5px solid var(--accent);
  box-shadow: 0 0 20px rgba(247,206,70,0.45), 0 8px 24px rgba(0,0,0,0.5);
  cursor: grab;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.draggable-card:hover  { transform: scale(1.06); }
.draggable-card:active { cursor: grabbing; }
.draggable-card.dragging {
  opacity: 0.75;
  transform: scale(1.1) rotate(2deg);
  box-shadow: 0 0 32px rgba(247,206,70,0.7), 0 16px 32px rgba(0,0,0,0.6);
}

.draggable-card-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.draggable-card-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, transparent 100%);
  padding: 8px 6px 5px;
}
/* Week fixture on the card being drafted.

   TOP of the card, not the bottom.
   .draggable-card-overlay is already absolute at bottom:0, so anchoring this
   there too stacked two text blocks in the same space on a 90x126px card and
   both were unreadable. They are not siblings that can flow past each other --
   both are absolutely positioned, so neither pushes the other.

   Top also survives the one case the bottom cannot: the overlay is suppressed
   for the two Los Angeles teams, whose artwork spells the name out, and their
   matchup still has to appear. Keeping the two blocks at opposite ends means
   neither depends on the other existing. */
.card-matchup {
  position: absolute;
  left: 0; right: 0; top: 0;
  /* Column, not row: "@ PIT Sun 1:00 PM" does not fit across 90px on one
     line, and shrinking it far enough to fit would undo the contrast work. */
  display: flex; flex-direction: column; align-items: center;
  padding: 3px 4px 6px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 60%, transparent 100%);
  pointer-events: none;   /* the card is draggable; do not eat the gesture */
}
.card-matchup-opp {
  font-family: var(--font-display);
  font-weight: 700; font-size: 12px; line-height: 1.1;
  color: #ffffff;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.card-matchup-time {
  font-size: 9px; font-weight: 600; line-height: 1.2;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
}

.draggable-city { font-size: 9px; color: rgba(255,255,255,0.88); text-transform: uppercase; letter-spacing: 0.06em; }
.draggable-name { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: #fff; line-height: 1.1; }

.drag-hint-label {
  font-size: 10px; color: var(--muted); text-align: center;
  letter-spacing: 0.04em;
}

/* ── Player select panel — floats over the formation ─────────────── */
@keyframes slideUpPanel {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
/* Desktop: preserve horizontal centering while sliding up. */
@keyframes slideUpPanelCentered {
  from { transform: translateX(-50%) translateY(100%); }
  to   { transform: translateX(-50%) translateY(0); }
}

/* ── Deposit screen ──────────────────────────────────────────────── */
.pick-actions {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 20px; flex-wrap: wrap; justify-content: center;
}
.pick-actions .btn-primary  { flex: 1; min-width: 180px; }
.pick-actions .btn-secondary { white-space: nowrap; }

/* ── Edit formation phase ────────────────────────────────────────── */
/* .edit-formation-phase removed. Its 40px of bottom padding, plus a trailing
   button in the markup, made the edit screen taller than the draft screen and
   gave it a scrollbar the draft screen does not have. The two now share
   .formation-phase and are laid out identically. */
.edit-swap-hint {
  font-size: 9px; color: var(--accent); opacity: 0.7;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.formation-slot.slot-locked.edit-slot {
  cursor: pointer;
}
.formation-slot.slot-locked.edit-slot:hover,
.formation-slot.slot-locked.edit-slot.slot-selected {
  border-color: var(--accent);
  border-width: 2px;
  border-style: solid;
}

/* ── In-progress banner ──────────────────────────────────────────── */
.in-progress-banner {
  background: var(--bg-card);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 20px;
  animation: slideUp 0.25s ease;
}
.ipb-content {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.ipb-icon  { font-size: 24px; flex-shrink: 0; }
.ipb-text  { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ipb-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.ipb-name  { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--accent); }
.ipb-warn  { font-size: 13px; color: var(--text-dim); flex: 1; }
.ipb-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ── Resume notice (inside break screen) ────────────────────────── */
.resume-notice {
  max-width: 400px; margin: 60px auto 0;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 0 20px;
}
.resume-icon { font-size: 40px; }
.resume-notice h2 {
  font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--text);
}
.resume-notice p { font-size: 14px; color: var(--text-dim); line-height: 1.6; }
.resume-sub { color: var(--muted) !important; font-size: 13px !important; }

/* ── Responsible Gambling bar ────────────────────────────────────── */
:root { --rg-bar-h: 32px; }
.rg-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--rg-bar-h);
  background: #1a0a00;
  border-bottom: 1px solid rgba(247,206,70,0.25);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; padding: 0 16px;
}
.rg-text { font-size: 11px; color: rgba(255,255,255,0.90); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.rg-link:hover { text-decoration: underline; }

/* Push all content below the RG bar */
body { padding-top: var(--rg-bar-h); }
.screen {
  height: calc(100vh - var(--rg-bar-h));
  height: calc(100dvh - var(--rg-bar-h));
}

/* ── Header nav buttons ──────────────────────────────────────────── */
.btn-header-nav {
  font-size: 14px; background: none; border: none;
  color: var(--muted); cursor: pointer; padding: 4px 8px;
  border-radius: var(--radius); transition: color 0.15s, background 0.15s;
}
.btn-header-nav:hover { color: var(--text); background: var(--bg-card); }
.btn-logout-text {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; color: var(--muted); border: 1px solid var(--border-med);
  padding: 5px 12px;
}
.btn-logout-text:hover { color: var(--red); border-color: var(--red); background: none; }

/* Disabled back button */
.btn-ghost.btn-disabled,
.btn-ghost:disabled {
  opacity: 0.25; cursor: not-allowed; pointer-events: none;
}

/* ── Settings screen ─────────────────────────────────────────────── */
.settings-main { flex: 1; padding: 24px 20px; max-width: 560px; margin: 0 auto; width: 100%; }
.settings-section-title {
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); margin: 24px 0 10px;
}
.settings-group {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
.setting-info { display: flex; flex-direction: column; gap: 2px; }
.setting-label { font-size: 15px; color: var(--text); font-weight: 500; }
.setting-sub   { font-size: 12px; color: var(--muted); }

/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--bg-card-2); border-radius: 26px;
  border: 1px solid var(--border-med);
  transition: background 0.2s;
}
.toggle-slider::before {
  content: ''; position: absolute;
  height: 18px; width: 18px; left: 3px; bottom: 3px;
  background: var(--muted); border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background: rgba(247,206,70,0.2); border-color: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); background: var(--accent); }

/* RG settings block */
.rg-settings { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.rg-settings-text { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.btn-rg-link {
  display: block; padding: 10px 14px;
  background: var(--bg-card-2); border: 1px solid var(--border-med);
  border-radius: var(--radius); color: var(--text-dim);
  font-size: 14px; text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.btn-rg-link:hover { border-color: var(--accent); color: var(--accent); }

/* ── Profile screen ──────────────────────────────────────────────── */
.profile-hero {
  display: flex; align-items: center; gap: 20px;
  padding: 24px 0 20px;
}
.profile-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--bg-card-2); border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 30px;
  color: var(--accent); flex-shrink: 0;
}
.profile-identity { display: flex; flex-direction: column; gap: 3px; }
.profile-name  { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--text); }
.profile-team  { font-size: 14px; color: var(--accent); font-weight: 600; }
.profile-email { font-size: 12px; color: var(--muted); }

.profile-balance-card {
  background: var(--bg-card); border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg); padding: 16px 20px;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.pbc-label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.pbc-value { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--green); }

.stats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px;
}
.stat-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 12px; text-align: center;
}
.stat-val   { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--accent); }
.stat-label { font-size: 11px; color: var(--muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.06em; }


/* ── Deposit screen ──────────────────────────────────────────────── */
.deposit-balance-card {
  background: var(--bg-card); border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg); padding: 16px 20px;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}

.deposit-presets {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  margin-bottom: 20px;
}
@media (max-width: 480px) { .deposit-presets { grid-template-columns: repeat(3, 1fr); } }

.deposit-preset-btn {
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  background: var(--bg-card); border: 1.5px solid var(--border-med);
  color: var(--text-dim); border-radius: var(--radius-lg); padding: 14px 8px;
  cursor: pointer; text-align: center;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.deposit-preset-btn:hover   { border-color: var(--accent); color: var(--accent); }
.deposit-preset-btn.selected {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-glow);
}

.deposit-custom { margin-bottom: 20px; }
.deposit-custom-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--border-med);
  border-radius: var(--radius); padding: 0 14px; margin-top: 8px;
}
.deposit-currency-symbol {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
  color: var(--muted);
}
.deposit-custom-row input {
  border: none; background: transparent; font-size: 20px;
  font-family: var(--font-display); font-weight: 700;
  color: var(--text); padding: 12px 0; flex: 1;
}
.deposit-custom-row input:focus { outline: none; }

.deposit-selected {
  font-size: 14px; color: var(--text-dim);
  margin-bottom: 14px; text-align: center;
}
.deposit-selected strong { color: var(--accent); }

/* ── PayPal buttons ──────────────────────────────────────────────────
   The buttons render inside PayPal's own iframe, so their contents cannot be
   restyled from here — and PayPal draws its tagline, funding labels and legal
   text in dark grey, which is unreadable on the app's near-black background.

   A LIGHT SURFACE behind them fixes every one of those at once, without
   fighting the SDK. It also matches how PayPal expects to be embedded, so the
   gold button reads the way it does everywhere else. */
.paypal-button-wrap {
  max-width: 360px;
  margin: 0 auto 20px;
  background: #ffffff;
  padding: 14px 14px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--border-med);
}

/* Anything PayPal renders into the PARENT document (rather than the iframe)
   inherits the app's light-on-dark colours and vanishes against the white
   panel. Force dark text inside the wrapper. */
.paypal-button-wrap,
.paypal-button-wrap * {
  color: #2c2e2f;
}

.deposit-status {
  padding: 12px 16px; border-radius: var(--radius);
  font-size: 14px; margin-bottom: 16px; text-align: center;
}
.deposit-status-success { background: rgba(76,216,112,0.12); color: var(--green); border: 1px solid var(--green); }
.deposit-status-error   { background: rgba(240,74,85,0.1);   color: var(--red);   border: 1px solid var(--red); }
.deposit-status-pending { background: rgba(247,206,70,0.1);  color: var(--accent);border: 1px solid var(--accent); }
.deposit-status-info    { background: var(--bg-card); color: var(--text-dim); border: 1px solid var(--border-med); }

.deposit-disclaimer {
  font-size: 12px; color: var(--muted); line-height: 1.6;
  border-top: 1px solid var(--border); padding-top: 16px;
  margin-bottom: 24px; display: flex; flex-direction: column; gap: 6px;
}

/* ── Transaction history ─────────────────────────────────────────── */
.transaction-list {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.txn-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  gap: 12px;
}
.txn-row:last-child { border-bottom: none; }
.txn-left  { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.txn-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }

.txn-type   { font-weight: 600; font-size: 14px; color: var(--text); }
.txn-date   { font-size: 11px; color: var(--muted); }
.txn-notes  { font-size: 11px; color: var(--muted); font-style: italic; }

.txn-amount { font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.txn-credit { color: var(--green); }
.txn-debit  { color: var(--red); }
.txn-balance{ font-size: 11px; color: var(--muted); }

.txn-status { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 2px 7px; border-radius: 4px; }
.txn-status-completed { background: rgba(76,216,112,0.12); color: var(--green); }
.txn-status-pending   { background: rgba(247,206,70,0.1);  color: var(--accent); }
.txn-status-failed    { background: rgba(240,74,85,0.1);   color: var(--red); }
.txn-status-refunded  { background: rgba(255,255,255,0.07);color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE — gold accent on white/light grey
   Applied when <body class="light-mode">
   ═══════════════════════════════════════════════════════════════════ */
body.light-mode {
  --bg:           #f0f1f5;
  --bg-surface:   #ffffff;
  --bg-card:      #ffffff;
  --bg-card-2:    #e8eaf0;
  --accent:       #c9a52a;        /* deeper gold — readable on white */
  --accent-dim:   #9e7e1a;
  --accent-glow:  rgba(201,165,42,0.15);
  --red:          #d93545;
  --green:        #1e9e52;
  --muted:        #8a90a0;
  --text:         #1a1c24;
  --text-dim:     #4a4f60;
  --border:       rgba(0,0,0,0.08);
  --border-med:   rgba(0,0,0,0.14);
  --border-accent:rgba(201,165,42,0.4);
}

/* Surfaces that need explicit overrides on light mode */
body.light-mode html,
body.light-mode { background: var(--bg); }

body.light-mode .app-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-med);
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}

body.light-mode .login-bg {
  background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201,165,42,0.12) 0%, transparent 70%);
}
body.light-mode .login-card,
body.light-mode .register-card {
  background: var(--bg-surface);
  border-color: var(--border-med);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

body.light-mode .contest-table-wrap {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
body.light-mode .contest-row:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

body.light-mode .formation-slot.slot-empty {
  background: #f8f8fc;
}
body.light-mode .formation-slot.slot-locked {
  background: #f0f1f6;
}

body.light-mode .facedown-card {
  background: #f0f1f6;
}
body.light-mode .facedown-card.picked {
  background: rgba(201,165,42,0.15);
}

body.light-mode .player-row:hover { background: #f4f5f8; }
body.light-mode .player-row       { border-color: var(--border); }

body.light-mode .stat-card { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }

body.light-mode .lb-table tr:hover td { background: #f4f5f8; }

body.light-mode .settings-group {
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

body.light-mode .toggle-slider {
  background: #d8dae4;
}

body.light-mode .in-progress-banner {
  background: #fffbe8;
  border-color: var(--accent);
}

body.light-mode .rg-bar {
  background: #fff8e1;
  border-bottom-color: rgba(201,165,42,0.3);
}
body.light-mode .rg-text { color: rgba(0,0,0,0.5); }

body.light-mode .modal-card {
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
}

body.light-mode .draggable-card {
  box-shadow: 0 0 16px rgba(201,165,42,0.4), 0 8px 20px rgba(0,0,0,0.15);
}

body.light-mode .league-tabs { background: #e4e6ee; }
body.light-mode .league-tab.active { background: var(--accent); color: #fff; }

body.light-mode .btn-ghost {
  border-color: var(--border-med);
  color: var(--text-dim);
}
body.light-mode .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

body.light-mode input[type="text"],
body.light-mode input[type="email"],
body.light-mode input[type="password"],
body.light-mode input[type="tel"],
body.light-mode input[type="number"],
body.light-mode select {
  background: #f4f5f8;
  border-color: var(--border-med);
  color: var(--text);
}

/* ── Settings select dropdowns ───────────────────────────────────── */
.setting-select-wrap { flex-shrink: 0; }
.setting-select {
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--bg-card-2);
  border: 1px solid var(--border-med);
  border-radius: var(--radius);
  color: var(--text);
  padding: 7px 28px 7px 12px;
  cursor: pointer;
  width: auto;
  min-width: 160px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23676e82' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.setting-select:focus { border-color: var(--accent); outline: none; }
.setting-select option { background: var(--bg-surface); }

body.light-mode .setting-select {
  background-color: #f0f1f5;
  border-color: var(--border-med);
  color: var(--text);
}

/* ── Support screen ──────────────────────────────────────────────── */
.support-intro { margin-bottom: 24px; }
.support-title {
  font-family: var(--font-display); font-weight: 800; font-size: 28px;
  color: var(--text); margin-bottom: 8px;
}
.support-subtitle { font-size: 14px; color: var(--text-dim); line-height: 1.6; }

textarea {
  width: 100%; background: var(--bg); border: 1px solid var(--border-med);
  border-radius: var(--radius); color: var(--text);
  font-family: var(--font-body); font-size: 15px;
  padding: 10px 14px; outline: none; resize: vertical;
  min-height: 140px; line-height: 1.6;
  transition: border-color 0.15s;
}
textarea:focus { border-color: var(--accent); }
textarea::placeholder { color: var(--muted); }

.support-char-count {
  font-size: 11px; color: var(--muted); text-align: right;
  margin-top: 4px;
}

/* Success state */
.support-success {
  text-align: center; padding: 40px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.support-success-icon {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(76,216,112,0.15); border: 2px solid var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--green);
}
.support-success h3 {
  font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--text);
}
.support-success p { font-size: 14px; color: var(--text-dim); line-height: 1.6; max-width: 400px; }

/* Light mode overrides */
body.light-mode textarea {
  background: #f4f5f8; border-color: var(--border-med); color: var(--text);
}

/* ── Bottom navigation bar ───────────────────────────────────────── */
:root { --bottom-nav-h: 64px; }

.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--bottom-nav-h);
  background: var(--bg-surface);
  border-top: 1px solid var(--border-med);
  display: flex;
  align-items: stretch;
  z-index: 500; /* above everything including player panels */
  box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
}
/* When hidden (login/register/break screens) */
.bottom-nav.hidden { display: none !important; }

.bottom-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 11px 4px;
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
  position: relative;
}
.bottom-nav-btn:hover:not(.bottom-nav-disabled) {
  color: var(--text-dim);
  background: rgba(255,255,255,0.04);
}
.bottom-nav-btn.active {
  color: var(--accent);
}
.bottom-nav-btn.active::after {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
}
.bottom-nav-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bnb-icon  { font-size: 20px; line-height: 1; }
.bnb-label { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }
.bnb-soon  {
  position: absolute;
  top: 6px; right: 6px;
  font-size: 8px; font-weight: 700;
  background: var(--muted); color: var(--bg);
  padding: 1px 4px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* Screens that show the bottom nav — pad content so nothing hides behind it */
#screen-lobby .lobby-main,
#screen-leaderboard .lb-main,
#screen-profile .settings-main,
#screen-settings .settings-main,
#screen-edit .break-main,
#screen-deposit .settings-main,
#screen-support .settings-main {
  padding-bottom: calc(var(--bottom-nav-h) + 8px);
}

/* Lobby scroll area must clear the fixed bottom nav, or the last list item
   (e.g. the final contest on the Scores tab) is hidden behind it. */
.lobby-main {
  padding-bottom: calc(var(--bottom-nav-h) + 16px) !important;
}

/* Tab content panels */
.lobby-tab-content { width: 100%; }
.lobby-tab-content.hidden { display: none; }

/* ── Scores tab ──────────────────────────────────────────────────── */
.scores-list { display: flex; flex-direction: column; gap: 14px; }

.scores-contest-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  transition: border-color 0.15s;
}
.scores-contest-card:hover { border-color: var(--border-med); }

.scores-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 10px; gap: 12px;
}
.scores-contest-name {
  font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text);
}
.scores-contest-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }

.scores-rank-badge {
  display: flex; flex-direction: column; align-items: center;
  background: var(--accent-glow); border: 1px solid var(--border-accent);
  border-radius: var(--radius); padding: 6px 12px; flex-shrink: 0;
}
.scores-rank       { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--accent); }
.scores-rank-total { font-size: 10px; color: var(--muted); }

.scores-pts-row {
  margin-bottom: 12px;
}
.scores-pts-val   { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--text); }
.scores-pts-label { font-size: 13px; color: var(--muted); }

.scores-lb-mini { margin-top: 8px; }
.scores-lb-mini th,
.scores-lb-mini td { padding: 7px 10px; }

.scores-see-more { text-align: center; margin-top: 10px; }

/* Light mode overrides */
body.light-mode .bottom-nav {
  background: var(--bg-surface);
  border-top-color: var(--border-med);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}
body.light-mode .bottom-nav-btn.active { color: var(--accent-dim); }
body.light-mode .scores-contest-card { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }

/* Cost inline badge — only visible when cost column is hidden */
.cr-cost-inline { display: none; }
@media (max-width: 480px) {
  .cr-cost-inline { display: inline-block; }
}
/* Targets phones in landscape (short viewport, wider than tall) */
@media (max-height: 500px) and (orientation: landscape) {
  /* Tighten all table padding */
  .contest-table th,
  .contest-table td { padding: 8px 10px; font-size: 13px; }

  /* Hide registration close subtitle — saves space */
  .cr-time-sub { display: none; }

  /* Hide capacity fill bar */
  .cr-fill-bar { display: none; }

  /* Hide league badge column — redundant in single-league context */
  .cth-league,
  .cr-league { display: none; }

  /* Compress entry button */
  .btn-enter-row { padding: 5px 10px; font-size: 12px; }

  /* Tighten title font */
  .cr-title { font-size: 14px; }
  .cr-subtitle { font-size: 10px; }

  /* Reduce bottom nav height so more content fits */
  :root { --bottom-nav-h: 52px; }
  .bnb-icon  { font-size: 16px; }
  .bnb-label { font-size: 12px; }

  /* Reduce lobby hero text */
  .lobby-headline { font-size: 28px; }
}

/* ── Contest table: narrow portrait (< 480px) ───────────────────── */
@media (max-width: 480px) {
  /* Drop time, entries, league and cost columns — keep name + action only */
  .cth-time,    .contest-table td:nth-child(3),
  .cth-entries, .contest-table td:nth-child(4),
  .cth-league,  .contest-table td:nth-child(2),
  .cth-cost,    .contest-table td:nth-child(5) { display: none; }

  /* Move cost into the name cell as a small badge */
  .cr-title::after { content: ''; } /* reset if needed */

  .contest-table { min-width: unset; width: 100%; }
  .contest-table th,
  .contest-table td { padding: 10px 10px; }
  .btn-enter-row { padding: 7px 12px; font-size: 12px; }
  .cr-title { font-size: 14px; }

  /* Show cost inline in the name cell since cost column is hidden */
  .cr-cost-inline {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 13px;
    margin-left: 6px;
  }
  .cr-cost-inline.free { color: var(--green); }
  .cr-cost-inline.paid { color: var(--accent); }
}


/* ═══════════════════════════════════════════════════════════════════
   GOLF BREAK — tier-based pack draw (golf.js)
   Uses theme tokens so it follows the light/dark toggle, and
   --card-flip-duration so it respects Settings → Card Animation Speed.
   All classes are golf-/gc- prefixed to avoid collisions.
   ═══════════════════════════════════════════════════════════════════ */
.golf-flow { padding: 8px 4px 96px; max-width: 760px; margin: 0 auto; }

.golf-head { text-align: center; margin-top: 6px; }
.golf-eyebrow {
  font-family: var(--font-display); letter-spacing: .3em; text-transform: uppercase;
  font-size: 12px; color: var(--accent); font-weight: 600;
}
.golf-roundline {
  font-family: var(--font-display); font-weight: 700; font-size: 30px;
  letter-spacing: .04em; text-transform: uppercase; margin: 2px 0 0; color: var(--text);
}
.golf-sub { color: var(--text-dim); font-size: 14px; margin: 5px 0 0; }

/* progress pips */
.golf-pips { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin: 18px 0 4px; }
.golf-pip {
  min-width: 40px; padding: 5px 6px 6px; border-radius: var(--radius);
  border: 1px solid var(--border-med); background: var(--bg-card);
  display: flex; flex-direction: column; align-items: center; gap: 2px; transition: .25s;
}
.golf-pip .gp-n { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--muted); line-height: 1; }
.golf-pip .gp-lbl { font-size: 8.5px; letter-spacing: .02em; color: var(--muted); text-transform: uppercase; max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.golf-pip.filled { border-color: var(--accent); background: var(--accent-glow); }
.golf-pip.filled .gp-n   { color: var(--accent); }
.golf-pip.filled .gp-lbl { color: var(--text-dim); }

/* card grid */
.golf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }
@media (max-width: 560px) { .golf-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* shorter card: the ⛳ art block that padded the middle is gone, so the name
   block takes the slack instead of leaving dead space */
.golf-card { aspect-ratio: 5 / 5.1; perspective: 1000px; }
.gc-inner {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform var(--card-flip-duration, .45s) cubic-bezier(.2,.7,.2,1);
}
.golf-grid.opened .gc-inner { transform: rotateY(180deg); }
.gc-face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius-lg); overflow: hidden; }

/* back */
.gc-back {
  background: radial-gradient(120% 80% at 50% 0%, var(--accent-glow) 0%, var(--bg-card-2) 55%), var(--bg-card);
  border: 1px solid var(--border-accent); display: grid; place-items: center; text-align: center;
}
.gc-back::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--border-accent); border-radius: var(--radius); }
.gc-backinner { position: relative; }
.gc-pin  { font-size: 20px; opacity: .85; }
.gc-mono { font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; color: var(--accent); font-size: 20px; }
.gc-tag  { font-family: var(--font-display); letter-spacing: .26em; font-size: 8.5px; color: var(--muted); text-transform: uppercase; margin-top: 5px; }
.gc-corner { position: absolute; width: 0; height: 0; border-style: solid; }
.gc-corner.tl { top: 0; left: 0; border-width: 16px 16px 0 0; border-color: var(--accent) transparent transparent transparent; }
.gc-corner.br { bottom: 0; right: 0; border-width: 0 0 16px 16px; border-color: transparent transparent var(--accent) transparent; }

/* front */
.gc-front {
  transform: rotateY(180deg);
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  border: 1px solid var(--border-med); display: flex; flex-direction: column; padding: 9px;
}
.golf-card.pickable .gc-front { cursor: pointer; }
.golf-card.pickable:hover .gc-front { border-color: var(--border-accent); }
.golf-card.selected .gc-front {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset, 0 6px 22px -8px var(--accent-glow);
}
.gc-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.gc-tier {
  font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 5px; color: #15140f;
}
.gc-tier-1 { background: #FFD24D; } .gc-tier-2 { background: #F7CE46; }
.gc-tier-3 { background: #E89B0C; } .gc-tier-4 { background: #CE8208; }
.gc-tier-5 { background: #B06A0A; color: #fff; } .gc-tier-6 { background: #8F5410; color: #fff; }
.gc-tier-7 { background: #6F4111; color: #fff; }
.gc-cc { font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: .04em; color: var(--text-dim); border: 1px solid var(--border); border-radius: 5px; padding: 2px 5px; white-space: nowrap; }
.gc-who { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.gc-who .gc-fn { font-size: 11.5px; color: var(--text-dim); line-height: 1; }
.gc-who .gc-ln { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: .01em; line-height: 1.02; text-transform: uppercase; color: var(--text); }
.gc-stats { display: flex; justify-content: space-between; gap: 4px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border); }
.gc-stat { display: flex; flex-direction: column; align-items: center; flex: 1; line-height: 1.05; }
.gc-stat-v { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--accent); }
.gc-stat-k { font-size: 7.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }

.gc-ribbon {
  position: absolute; top: 9px; right: -30px; transform: rotate(38deg);
  background: var(--accent); color: #15140f; font-family: var(--font-display); font-weight: 700;
  font-size: 9px; letter-spacing: .14em; padding: 3px 34px; text-transform: uppercase;
}
.golf-card.locked .gc-front { filter: saturate(.5) brightness(.62); border-color: var(--border-accent); }
.gc-check { position: absolute; left: 8px; bottom: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #15140f; display: grid; place-items: center; font-size: 12px; font-weight: 700; }

/* action bar */
.golf-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, transparent, var(--bg) 34%);
  padding: 22px 16px calc(16px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; align-items: center; max-width: 760px; margin: 0 auto;
}
.golf-hint { flex: 1; color: var(--text-dim); font-size: 13px; min-height: 18px; }
.golf-btn { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { .gc-inner { transition: none; } }


/* ── Golf pack-opening animation (golf.js) ─────────────────────────
   Drop → rip → burst into 7 → flip. Timings tunable via the vars below;
   the flip beat reuses --card-flip-duration (Settings → Card Speed). */
.golf-flow { --golf-drop-dur: .55s; --golf-spread-dur: .5s; }

.golf-stage { position: relative; min-height: 360px; }

/* sealed cards are hidden until the pack rips and bursts them out */
.golf-card.preopen { opacity: 0; }
/* sealed grid is taken out of flow so the stage keeps a constant height and
   the pack sits in the same spot for every tier (5/6/7 no longer drift off-screen) */
.golf-grid.sealed { position: absolute; left: 0; right: 0; top: 0; }

/* the dropped pack, sitting in the upper-middle of the stage so its label
   clears the action bar / hint below (was top:50%, which crowded them) */
.golf-pack {
  position: absolute; top: 38%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(116px, 40%, 178px); aspect-ratio: 5 / 7;
  z-index: 5; cursor: pointer; outline: none;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.5));
  animation: golf-pack-drop var(--golf-drop-dur) cubic-bezier(.2,1.05,.3,1) both;
}
.golf-pack:focus-visible { box-shadow: 0 0 0 3px var(--accent-glow); border-radius: var(--radius-lg); }
.golf-pack-img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-lg); border: 1px solid var(--border-accent);
}
.golf-pack-label {
  position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); letter-spacing: .18em; text-transform: uppercase;
  font-size: 11px; color: var(--accent); white-space: nowrap;
  animation: golf-pulse 1.4s ease-in-out infinite;
}
.golf-pack.ripping { animation: golf-pack-rip .26s ease-in forwards; pointer-events: none; }

@keyframes golf-pack-drop {
  0%   { transform: translate(-50%, -240%) rotate(-4deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(0); opacity: 1; }
}
@keyframes golf-pack-rip {
  0%   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
  40%  { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.3);  opacity: 0; }
}
@keyframes golf-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .golf-pack { animation: none; }
  .golf-pack.ripping { animation: none; opacity: 0; }
  .golf-card.preopen { opacity: 1; }
}


/* ── Golf draft-method chooser (golf.js) ──────────────────────────── */
.golf-methods {
  /* two across on wider screens so four styles don't become a long scroll */
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  max-width: 720px; margin: 26px auto 0;
}
@media (max-width: 560px) {
  .golf-methods { grid-template-columns: 1fr; max-width: 460px; }
}
.golf-method-card {
  text-align: left; cursor: pointer; color: var(--text);
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  border: 1px solid var(--border-med); border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg); padding: 16px 18px; transition: .16s;
}
.golf-method-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 10px 26px -12px var(--accent-glow); }
.golf-method-card .gm-name {
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  letter-spacing: .02em; text-transform: uppercase;
}
.golf-method-card .gm-tag { color: var(--text-dim); font-size: 13.5px; margin-top: 4px; line-height: 1.4; }

/* ── Maintenance notice (login) ─────────────────────────────────── */
.maintenance-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 193, 7, 0.55);
  background: rgba(255, 193, 7, 0.12);
  border-radius: 8px;
  color: #ffcf3a;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}
.maintenance-banner .mb-icon { font-size: 16px; line-height: 1; flex-shrink: 0; }


/* ── Deposit custom amount validation ───────────────────────────── */
.deposit-custom-hint { margin: 6px 2px 0; font-size: 12px; color: var(--muted); }
.deposit-custom-hint.invalid { color: #e5484d; }
#deposit-custom-amount.invalid { border-color: #e5484d; box-shadow: 0 0 0 1px #e5484d inset; }

/* ── Golf multiplier toggle (mode picker) ───────────────────────── */
.golf-mult-toggle {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  max-width: 720px; margin: 16px auto 0; padding: 14px 16px; text-align: left;
  background: #16161c; border: 1px solid #2c2c36; border-radius: var(--radius-lg, 12px);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.golf-mult-toggle.on { border-color: var(--accent, #FFB612); background: #1c1a12; }
.golf-mult-box {
  flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 6px;
  border: 2px solid #4a4a58; position: relative; transition: all .15s;
}
.golf-mult-toggle.on .golf-mult-box { background: var(--accent, #FFB612); border-color: var(--accent, #FFB612); }
.golf-mult-toggle.on .golf-mult-box::after {
  content: '\2713'; position: absolute; inset: 0; display: grid; place-items: center;
  color: #15140f; font-size: 14px; font-weight: 800;
}
.golf-mult-title { display: block; font-weight: 700; font-size: 14px; color: var(--text, #f4f4f6); }
.golf-mult-desc  { display: block; color: var(--text-dim, #9a9aa4); font-size: 12px; margin-top: 2px; }

/* ── Golf multiplier selection screen ───────────────────────────── */
.golf-mult-list { display: flex; flex-direction: column; gap: 9px; max-width: 460px; margin: 20px auto 0; }
.golf-mult-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left;
  background: #16161c; border: 1px solid #2c2c36; border-radius: 11px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.golf-mult-row.selected { border-color: var(--accent, #FFB612); background: #1c1a12; }
.golf-mult-check {
  flex: none; width: 22px; height: 22px; border-radius: 6px; border: 2px solid #4a4a58;
  display: grid; place-items: center; color: #15140f; font-size: 14px; font-weight: 800;
}
.golf-mult-row.selected .golf-mult-check { background: var(--accent, #FFB612); border-color: var(--accent, #FFB612); }
.golf-mult-tier {
  flex: none; font-family: var(--font-head, 'Oswald'), sans-serif; font-weight: 700; font-size: 13px;
  color: var(--accent, #FFB612); min-width: 28px;
}
.golf-mult-name { flex: 1; font-weight: 600; font-size: 14px; color: var(--text, #f4f4f6); }
.golf-mult-x {
  flex: none; font-family: var(--font-head, 'Oswald'), sans-serif; font-weight: 700; font-size: 16px;
  color: var(--accent, #FFB612);
}
.golf-mult-actions { max-width: 460px; margin: 18px auto 0; }
.golf-mult-actions .golf-btn { width: 100%; }

/* ── Offline overlay (app status = offline) ─────────────────────── */
.app-offline-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(8, 8, 12, 0.94); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 24px;
}
.app-offline-card {
  max-width: 380px; text-align: center;
  background: #16161c; border: 1px solid #2c2c36; border-radius: 16px;
  padding: 32px 26px;
}
.app-offline-icon { font-size: 40px; color: var(--accent, #FFB612); margin-bottom: 10px; }
.app-offline-card h2 { margin: 0 0 8px; font-family: var(--font-head, 'Oswald'), sans-serif; }
.app-offline-card p  { color: var(--text-dim, #9a9aa4); font-size: 14px; line-height: 1.5; margin: 0; }

/* Admin-only (private) contest badge — flags test contests in the lobby */
.cr-private-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-size: 10px; font-weight: 800; letter-spacing: .05em;
  color: #15140f; background: var(--accent, #FFB612); border-radius: 4px;
  vertical-align: middle;
}

/* Contest status pill (upcoming countdown / Playing / Ended) */
.cr-status {
  display: inline-block; font-family: var(--font-head, 'Oswald'), sans-serif;
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.cr-status-upcoming { color: var(--text, #f4f4f6); }
.cr-status-live {
  color: #38d66b;
}
.cr-status-live::before {
  content: '●'; margin-right: 5px; font-size: 10px; vertical-align: middle;
  animation: cr-pulse 1.6s ease-in-out infinite;
}
.cr-status-ended { color: var(--text-dim, #9a9aa4); }
@keyframes cr-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* Scores tab — per-entry lineup rows under one grouped leaderboard */
.scores-entries { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.scores-entry-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; background: #16161c; border: 1px solid #2a2a34; border-radius: 9px;
}
.scores-entry-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.scores-entry-rank {
  font-family: var(--font-head, 'Oswald'), sans-serif; font-weight: 700;
  color: var(--accent, #FFB612); font-size: 13px; min-width: 30px;
}
.scores-entry-team { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scores-entry-pts  { color: var(--text-dim, #9a9aa4); font-size: 12px; white-space: nowrap; }
.btn-view-lineup {
  flex: none; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
  color: #15140f; background: var(--accent, #FFB612); border: none; border-radius: 7px;
}
.btn-view-lineup:active { transform: translateY(1px); }

/* Floating refresh button — re-runs the active tab's data load */
.fab-refresh {
  position: fixed; right: 16px; bottom: calc(var(--bottom-nav-h, 64px) + 14px);
  width: 46px; height: 46px; border-radius: 50%; z-index: 60;
  background: var(--accent, #FFB612); color: #15140f; border: none;
  font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 3px 12px rgba(0,0,0,.4); display: grid; place-items: center;
}
.fab-refresh:active { transform: translateY(1px); }
.fab-refresh:disabled { opacity: .7; cursor: default; }
.fab-refresh-icon { display: inline-block; }
.fab-refresh.spinning .fab-refresh-icon { animation: fab-spin .7s linear infinite; }
@keyframes fab-spin { to { transform: rotate(360deg); } }

/* Contest card reward chips (mock/real top-3 payouts) */
.cr-rewards { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.cr-reward {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 700; color: var(--accent, #FFB612);
}
.cr-reward-place { font-size: 12px; }

/* Golf lineup multiplier tag in the roster modal */
.gc-mult-tag {
  font-family: var(--font-head, 'Oswald'), sans-serif; font-weight: 700;
  font-size: 11px; color: var(--accent, #FFB612); margin-left: 4px;
}


/* ── #4 View-lineup icon button ──────────────────────────────────────
   Was a full-width "View Lineup" text button that crowded the row and
   squeezed the team name and points into an unreadable sliver. */
.btn-view-lineup {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-med);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.btn-view-lineup:hover {
  color: var(--accent); border-color: var(--accent);
  background: var(--accent-glow);
}
/* Give the freed-up width back to the text that needed it. */
.scores-entry-row  { gap: 10px; }
.scores-entry-info { flex: 1 1 auto; min-width: 0; }
.scores-entry-team {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; color: var(--text);
}
.scores-entry-pts  { flex: 0 0 auto; font-weight: 700; color: var(--accent); }

/* ── #9 Entry-order badge (PLACEHOLDER numbering) ────────────────── */
.entry-no-badge {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  min-width: 18px; height: 18px; padding: 0 5px;
  margin-right: 7px;
  border-radius: 9px;
  background: var(--border-med);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.my-entry .entry-no-badge { background: var(--accent); color: #111; }

/* ── #8 Add Credits disabled until payments go live ──────────────── */
.coming-soon-wrap { position: relative; display: inline-flex; }
.coming-soon-wrap .btn-primary:disabled {
  opacity: 0.45; cursor: not-allowed; filter: grayscale(0.8);
}
.coming-soon-tag {
  position: absolute; top: -8px; right: -6px;
  padding: 1px 6px; border-radius: 8px;
  background: var(--bg-card); border: 1px solid var(--border-med);
  color: var(--muted);
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
  pointer-events: none;
}


/* ── #5 Ambient background ────────────────────────────────────────────
   Two slow-rotating accent glows plus a fine diagonal weave. Replaces an
   earlier scatter of small circles that read as speckle/noise rather than
   design — at low opacity, small hard-edged shapes look like dust on the
   screen, while large soft gradients read as intentional lighting.

   Brighter than the previous version (the accent glow peaks around 13%
   vs 5%) but still well under text, so contrast is unaffected. Pure CSS,
   nothing to download, fixed and pointer-events:none so it can never
   intercept a tap or affect layout.

   Motion is disabled under prefers-reduced-motion — slow ambient drift is
   a known migraine and vestibular trigger. */
.app-bg-pattern {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    /* fine diagonal weave — texture, not pattern */
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.014) 0px,
      rgba(255,255,255,0.014) 1px,
      transparent 1px,
      transparent 11px
    );
}

/* Large soft colour fields. Two elements so they can drift independently
   and cross, which keeps the gradient from looking static. */
.app-bg-pattern::before,
.app-bg-pattern::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}
.app-bg-pattern::before {
  width: 65vmax; height: 65vmax;
  top: -22vmax; left: -18vmax;
  background: radial-gradient(circle,
    rgba(247,206,70,0.13) 0%,
    rgba(247,206,70,0.05) 45%,
    transparent 70%);
  animation: bgGlowA 48s ease-in-out infinite alternate;
}
.app-bg-pattern::after {
  width: 55vmax; height: 55vmax;
  bottom: -20vmax; right: -16vmax;
  background: radial-gradient(circle,
    rgba(90,150,255,0.10) 0%,
    rgba(90,150,255,0.04) 45%,
    transparent 70%);
  animation: bgGlowB 62s ease-in-out infinite alternate;
}

@keyframes bgGlowA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14vmax, 10vmax, 0) scale(1.18); }
}
@keyframes bgGlowB {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-12vmax, -9vmax, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .app-bg-pattern::before,
  .app-bg-pattern::after { animation: none; }
}

/* Content must sit above the background. */
.screen { position: relative; z-index: 1; }


/* ── Formation (assign) phase: fit on mobile without scrolling ───────
   The 1-3-3-2 board plus progress line and player panel ran past the fold on
   short screens. Slots and the drawn card scale down together via --slot-w so
   the column alignment established by the spacer cell is preserved. */
@media (max-width: 680px) {
  .formation-phase { padding: 8px 6px 14px; }
  .formation-progress { font-size: 12px; margin-bottom: 6px; }
  .formation-hint { font-size: 10px; }

  /* Slot width scales with the screen instead of stepping between fixed sizes.
     min(28vw, 13dvh) is the key part: the board is 4 rows tall, so on a SHORT
     screen height runs out before width does, and a width-only rule would push
     the SF row under the fold. Whichever axis is tighter wins.

     dvh, not vh: on mobile `vh` measures the viewport with browser chrome
     HIDDEN, so it over-reports usable height by ~15% and the board silently
     overflows once the address bar is showing. A vh line is kept first as a
     fallback for anything that doesn't know dvh.

     Everything else derives from --slot-w, so the spacer-cell column alignment
     holds at every size. */
  .formation-grid {
    --slot-w: clamp(62px, min(28vw, 12vh),  118px);
    --slot-w: clamp(62px, min(28vw, 13dvh), 118px);
    gap: clamp(6px, 2.2vw, 11px);
    max-width: none;
  }
  /* 1.28 keeps the slot close to a card's proportions without the extra
     height a true 5:7 would add across four rows. */
  .formation-slot { height: calc(var(--slot-w) * 1.28); }

  /* NOTE: these are the class names buildFormationGrid() actually emits.
     An earlier pass styled .slot-label / .slot-pos / .slot-hint, which don't
     exist anywhere in the markup — the rules parsed fine and did nothing,
     which is exactly why the text never resized. */
  .formation-slot-label    { font-size: clamp(11px, 3.4vw, 16px); }
  .formation-slot-eligible { font-size: clamp(8px, 2.5vw, 11px); }
  .formation-drop-hint     { font-size: clamp(7px, 2.2vw, 10px); }
  .formation-slot-player   { font-size: clamp(8px, 2.5vw, 11px); }

  .draggable-card {
    width: calc(var(--slot-w) * 0.94);
    height: calc(var(--slot-w) * 0.94 * 1.34);
  }
  .draggable-city  { font-size: clamp(7px, 2vw, 9px); }
  .draggable-name  { font-size: clamp(8px, 2.4vw, 11px); }
  .drag-hint-label { font-size: clamp(7px, 2vw, 9px); }
}

/* ── Wildcard team picker: horizontal filmstrip ──────────────────────
   Was a wrapping grid of ~30 team cards, which pushed the page well past the
   fold and buried the banner. A single scrollable row keeps the whole picker
   in view; cards fade toward both edges so it's obvious there's more to
   either side, and scroll-snap makes it settle on a card rather than
   half-way between two. */
.wildcard-team-grid {
  /* Was a horizontally scrolling filmstrip. Showing every team at once means
     no scrolling and no hidden options — the trade is smaller cards, which is
     acceptable now that the three lines of text under each are gone.

     auto-fit + minmax lets the browser choose the column count for the width
     available, so it adapts from phone to desktop without breakpoints. */
  display: grid;
  /* minmax(58px, 92px) rather than 1fr: with 1fr the columns stretch to fill
     whatever width is available, so on desktop all ~30 teams sat on ONE very
     wide row of very wide cards. Capping the track at 92px means the browser
     adds ROWS once it runs out of horizontal room. */
  grid-template-columns: repeat(auto-fit, minmax(58px, 92px));
  justify-content: center;
  gap: 10px;
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 4px 12px;
  width: 100%;
  /* Bounded so a wide monitor does not produce a single row of 30. */
  max-width: 680px;
  margin-inline: auto;
}
.wildcard-team-grid::-webkit-scrollbar { width: 6px; }
.wildcard-team-grid::-webkit-scrollbar-thumb {
  background: var(--border-med); border-radius: 3px;
}

/* Leftovers from the horizontal filmstrip — `flex: 0 0 auto; width: 92px` and
   scroll-snap — were removed. In a grid the track sizes the item, so a fixed
   width fought auto-fit, and snap points on a wrapping grid do nothing.
   The edge-fade mask went too: it existed to hint at off-screen cards
   sideways, and there are none now. */
.wildcard-team-btn {
  width: 100%;
  transition: transform 0.15s, border-color 0.15s;
}
.wildcard-team-btn:hover { transform: translateY(-3px); }


/* ── Wildcard picker: ONLY the team strip scrolls ────────────────────
   #break-main-content.viewport-locked gets a DEFINITE height (set from JS in
   renderWildcardPicker). That matters: .wildcard-phase uses height:100%, and a
   percentage height resolves only against a definite parent. The default
   min-height:100% is an AUTO height, so height:100% silently became auto — the
   phase grew to content size, its overflow:hidden clipped nothing, and the
   whole panel scrolled while the strip scrolled inside it. Two scroll areas.

   The lock is scoped to this one phase so golf's taller screens still scroll
   normally. */
#break-main-content.viewport-locked { height: 100%; min-height: 0; }

.wildcard-phase {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

/* Pinned: never shrink, never scroll. */
.wildcard-phase .assign-progress,
.wildcard-phase .wildcard-banner {
  flex: 0 0 auto;
  max-width: 100%;
}

/* The strip is the ONLY scroll container. */
.wildcard-phase .wildcard-team-grid {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  align-items: center;
}

@media (max-width: 680px) {
  .wildcard-phase { padding: 8px 0 12px; }

  .wildcard-banner {
    gap: 6px;
    margin-bottom: 10px;
    padding: 0 12px;
  }
  /* min() against BOTH axes so a short screen can't let the art crowd out the
     strip, and max-width:100% so it can never widen the phase and introduce a
     horizontal scrollbar. */
  .wildcard-banner .card-img-front {
    width: clamp(64px, min(24vw, 13dvh), 110px);
    height: auto;
    max-width: 100%;
    aspect-ratio: 5 / 7;
  }
  .wildcard-badge { font-size: clamp(16px, 5vw, 22px); }
  .wildcard-desc  {
    font-size: clamp(11px, 3.2vw, 13px);
    max-width: 100%;
    margin: 0;
  }
  .wildcard-phase .wildcard-team-grid { padding: 6px 4px 10px; }
  .wildcard-team-btn { width: clamp(64px, 21vw, 92px); }
}


/* ── Password reveal toggle ──────────────────────────────────────────
   The eye sits INSIDE the field's box rather than beside it, so the input
   keeps its full width and the forms don't reflow. padding-right on the
   input reserves the space so long passwords never run under the icon. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 42px; }

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.pw-toggle:hover { color: var(--accent); background: var(--accent-glow); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* The icon is drawn with CSS masks from an inline SVG so there is no extra
   request and it inherits currentColor for the hover state. */
.pw-toggle::before {
  content: '';
  width: 18px; height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--eye) center / contain no-repeat;
          mask: var(--eye) center / contain no-repeat;
}
.pw-toggle.revealed::before {
  -webkit-mask-image: var(--eye-off);
          mask-image: var(--eye-off);
}

:root {
  --eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 12S5 5 12 5s10.5 7 10.5 7-3.5 7-10.5 7S1.5 12 1.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
  --eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.9 17.9A10.4 10.4 0 0 1 12 19.5C5 19.5 1.5 12 1.5 12a19 19 0 0 1 5.2-6.1m3.6-1.2A10.4 10.4 0 0 1 12 4.5c7 0 10.5 7.5 10.5 7.5a19 19 0 0 1-2.4 3.5M9.9 9.9a3.2 3.2 0 0 0 4.2 4.2'/%3E%3Cpath d='m3 3 18 18'/%3E%3C/svg%3E");
}


/* Place labels replaced the medal emoji — size them so 1st/2nd/3rd sit level
   with the amount rather than riding above it the way the glyphs did. */
.cr-reward-place {
  display: inline-block;
  min-width: 26px;
  margin-right: 4px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
}


/* ── Wildcard picker ─────────────────────────────────────────────────
   Card art only; the abbreviation / name / division lines were removed. */
.wildcard-team-btn {
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  transition: transform 0.12s;
}
.wildcard-team-btn:hover,
.wildcard-team-btn:focus-visible { transform: translateY(-3px); }
.wildcard-team-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wc-team-img {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  object-fit: contain;
  display: block;
  border: 2px solid var(--border-med);
  border-radius: 6px;
  background: var(--bg-card);
  transition: border-color 0.12s;
}
.wildcard-team-btn:hover .wc-team-img { border-color: var(--accent); }

/* The banner sits centred above the grid — it was left-aligned and read as
   though it belonged to the first card rather than to the whole picker. */
.wildcard-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.wildcard-banner .card-img-front { margin: 0 auto; }
.wildcard-desc { margin-left: auto; margin-right: auto; }


/* ── Career stats, per sport league ──────────────────────────────────
   Each sport gets its own labelled block. The heading carries the entry
   count so a sport with one entry is obviously not a large sample. */
.career-sport { margin-bottom: 22px; }

.career-sport-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-med);
}
.career-sport-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.career-sport-count {
  font-size: 12px;
  color: var(--muted);
}

@media (max-width: 680px) {
  .career-sport { margin-bottom: 18px; }
  .career-sport-name { font-size: 14px; }
}


/* ── Contest tab pager ───────────────────────────────────────────────
   Seven contests per page. Deliberately Prev/Next rather than numbered
   pages — these lists are short and numbers would be more chrome than help. */
.tab-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-med);
}
.tab-pager-btn {
  padding: 7px 14px;
  font-size: 13px;
  border: 1px solid var(--border-med);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.tab-pager-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.tab-pager-btn:disabled { opacity: 0.35; cursor: default; }
.tab-pager-pos { font-size: 12px; color: var(--muted); min-width: 96px; text-align: center; }

/* "3 entries" where a single-entry row shows the team name. */
.cr-entry-count {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 9px;
  background: var(--border-med);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 680px) {
  .tab-pager { gap: 8px; }
  .tab-pager-btn { padding: 8px 12px; font-size: 12px; }
  .tab-pager-pos { min-width: 82px; font-size: 11px; }
}


/* ── #3 Eligibility notice on registration ───────────────────────────
   Stated before the form, not buried in terms. Someone in a prohibited state
   should find out here rather than after uploading a government ID. */
.eligibility-notice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: rgba(247, 206, 70, 0.07);
  border: 1px solid var(--accent-glow);
}
.eligibility-notice strong { color: var(--accent); font-size: 13.5px; }
.eligibility-notice span   { color: var(--text-dim); font-size: 12px; line-height: 1.5; }

/* ── #5 Balance is a button now ──────────────────────────────────────
   It was a div; making it tappable is the natural route to Add Credits.
   Restated as a button so it does not inherit the browser default chrome. */
button.user-balance {
  background: none;
  border: none;
  padding: 0 4px;
  cursor: pointer;
  font: inherit;
  text-align: right;
  border-radius: var(--radius);
  transition: background 0.15s;
}
button.user-balance:hover { background: var(--accent-glow); }
button.user-balance:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ══ #6 CONTEST TABLE — PORTRAIT PHONES ══════════════════════════════
   The landscape block trims columns so the row fits. Portrait had no
   equivalent, so six columns were laid out in ~360px: the table overflowed
   and the LAST columns — Edit and Standings — were pushed off the right edge.
   Landscape "fixed" it only because the extra width happened to be enough.

   Same approach as landscape: drop what is redundant, keep the actions. The
   actions are the point of the row. */
@media (max-width: 680px) and (orientation: portrait) {
  .contest-table th,
  .contest-table td { padding: 8px 6px; font-size: 13px; }

  /* League is redundant — the contest name already says NFL. */
  .cth-league,
  .cr-league { display: none; }

  /* The kickoff subtitle repeats what the main line says. */
  .cr-time-sub { display: none; }

  /* Points column: the value stays, the "pts"/"best" suffix goes. */
  .cr-entries span:last-child { display: none; }

  /* Buttons shrink to their icons. ✏️ and 🏆 are unambiguous at this size,
     and it is the labels that were costing the width. */
  .btn-edit-entry,
  .btn-view-lb-tab {
    padding: 6px 8px;
    font-size: 0;            /* hides the text, keeps the emoji */
    min-width: 34px;
  }
  .btn-edit-entry::first-letter,
  .btn-view-lb-tab::first-letter { font-size: 15px; }

  .cr-action { padding-left: 2px; padding-right: 2px; }
  .cr-title    { font-size: 14px; }
  .cr-subtitle { font-size: 10.5px; }

  /* Last resort: if a long contest name still pushes the row wide, scroll the
     TABLE rather than letting it clip. Better a scrollbar than a hidden
     button. */
  .contest-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* ══ #7 EDIT-PICKS CARDS ═════════════════════════════════════════════
   Scoped to .edit-slot so the draft-phase formation board is untouched.

   The card art has the team abbreviation centred on it. All three labels used
   to sit in one overlay along the bottom, stacked under the artwork.

   Now:
     position   top RIGHT, out of the abbreviation's way
     name+hint  centred, raised to sit ~25% up from the bottom

   The dark backing behind the text stays for legibility — the card art is
   bright gold and white text on it is unreadable without something behind. */
.edit-slot .formation-slot-info {
  position: absolute;
  inset: 0;
  background: none;
  border-radius: 8px;
  padding: 0;
  display: block;          /* children are positioned individually */
}

/* ── Position: top right ── */
.edit-slot .formation-slot-label {
  position: absolute;
  top: 4px;
  right: 5px;
  margin: 0;
  padding: 2px 6px;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.3;
  color: var(--accent);
  text-transform: uppercase;
  /* A small pill rather than a full-width gradient — it covers far less of the
     artwork while keeping the text readable. */
  background: rgba(0, 0, 0, 0.72);
  border-radius: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

/* ── Name + hint: centred, raised off the bottom ──
   A single absolutely-positioned block holds both, so they stack as one unit
   and the 25% offset applies to the pair rather than to each separately. */
.edit-slot .formation-slot-player {
  position: absolute;
  left: 0; right: 0;
  bottom: 25%;             /* raised, as requested */
  margin: 0;
  padding: 2px 4px 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
  text-align: center;
  word-break: break-word;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.8);
}

.edit-slot .edit-swap-hint {
  position: absolute;
  left: 0; right: 0;
  /* Directly beneath the name. 25% minus roughly one line height keeps the
     pair together as the card scales. */
  bottom: calc(25% - 12px);
  margin: 0;
  padding: 0 4px;
  font-size: 8.5px;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--accent);
  text-align: center;
  text-transform: uppercase;
  opacity: 0.92;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95);
}

/* Soft backing behind the lower text only. Sized to the text band rather than
   the whole half, so it obscures as little art as possible. */
.edit-slot .formation-slot-info::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 12%;
  height: 30%;
  background: radial-gradient(ellipse at center,
              rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 60%, transparent 100%);
  border-radius: 8px;
  z-index: 0;
  pointer-events: none;
}

.edit-slot .formation-slot-label,
.edit-slot .formation-slot-player,
.edit-slot .edit-swap-hint { z-index: 1; }

@media (max-width: 680px) {
  .edit-slot .formation-slot-label  { font-size: 9.5px; padding: 1px 5px; }
  .edit-slot .formation-slot-player { font-size: 9px; }
  .edit-slot .edit-swap-hint        { font-size: 8px; bottom: calc(25% - 11px); }
}


/* ══ Entry picker ════════════════════════════════════════════════════
   Shown when a user has several entries in one contest and taps Edit. The
   Upcoming row is per CONTEST, so there is nowhere to say which lineup a
   button would open — this asks instead of guessing. */
.entry-pick-modal { max-width: 420px; padding: 20px; }

.entry-pick-modal .modal-title { margin: 0 0 4px; font-size: 18px; }
.entry-pick-modal .modal-sub {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

.entry-pick-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }

.entry-pick-row {
  display: grid;
  /* Entry number, team name, points. The name takes the slack so a long one
     truncates rather than pushing the points off the edge. */
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-med);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.entry-pick-row:hover { border-color: var(--accent); background: var(--bg-card-2); }
.entry-pick-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.epr-no {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  min-width: 30px;
}
.epr-team {
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.epr-pts {
  font-family: var(--font-display);
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}

.entry-pick-cancel { width: 100%; padding: 9px; }


/* Live-refresh timestamp on the leaderboard. Deliberately quiet — it is
   reassurance, not information anyone is looking for. */
.lb-updated {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}


/* ══ PROFILE PICTURE ═════════════════════════════════════════════════
   The avatar elements were plain divs holding a letter. They keep that
   fallback — the initial still shows when no picture is set — and gain a
   background image when one is. Background rather than an <img> child so the
   existing round shape, border and sizing survive untouched. */
.user-avatar.has-avatar,
.profile-avatar.has-avatar {
  background-size: cover;
  background-position: center;
  color: transparent;          /* hides the letter if anything re-renders it */
}

/* The large one is a button now, so it needs the div's styling restated —
   otherwise it inherits browser chrome. */
button.profile-avatar {
  border: 2px solid var(--border-med);
  padding: 0;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
button.profile-avatar:hover { border-color: var(--accent); transform: scale(1.03); }
button.profile-avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* A camera hint on hover, so it is discoverable without a visible label
   cluttering the hero. */
button.profile-avatar::after {
  content: '📷';
  position: absolute;
  right: -2px; bottom: -2px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.15s;
}
button.profile-avatar { position: relative; }
button.profile-avatar:hover::after,
button.profile-avatar:focus-visible::after { opacity: 1; }

/* ── Chooser sheet ── */
.avatar-sheet-card { max-width: 340px; padding: 22px 20px 16px; }
.avatar-sheet-actions {
  display: flex; flex-direction: column; gap: 10px;
  margin: 16px 0 12px;
}
.avatar-sheet-actions button { width: 100%; padding: 12px; }
.avatar-sheet-cancel { width: 100%; padding: 10px; }


/* Score flag button — deliberately quiet. It should be findable when something
   looks wrong, not an invitation to press. */
.btn-flag-score {
  font-size: 12px;
  padding: 7px 12px;
  color: var(--muted);
  border: 1px solid var(--border-med);
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.btn-flag-score:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); }
.btn-flag-score:disabled { opacity: 0.55; cursor: default; }