/* =============================================================================
   Knockout "Showdown" — immersive full-screen prediction UI for semi-finals and
   the final. Ported from the design handoff; uses the app's self-hosted fonts
   (Space Grotesk for display, Inter for body) instead of the CDN Plus Jakarta.
   Standalone dark screen (its own background), independent of the app shell.
   ========================================================================== */

@keyframes sdSeam { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@keyframes sdFloatA { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(-2deg); } }
@keyframes sdFloatB { 0%,100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes sdVsPulse { 0%,100% { box-shadow: 0 8px 30px rgba(0,0,0,.55), 0 0 0 0 rgba(168,85,247,.35); } 50% { box-shadow: 0 8px 30px rgba(0,0,0,.55), 0 0 0 12px rgba(168,85,247,0); } }
@keyframes sdLivePulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }

body.showdown-body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(120% 90% at 50% -10%, #17111f 0%, #0a0a12 46%, #08080e 100%);
  font-family: 'Inter', system-ui, sans-serif;
  color: #fff;
}

/* Home-page takeover: the Showdown replaces the classic shell content but KEEPS
   the app rail (Home / Past matches / My wins / theme / logout) and footer so
   navigation still works. Only the dark radial ground + Showdown content change.
   Applied by home-router.js. */
body.app.showdown-active {
  background: radial-gradient(120% 90% at 50% -10%, #17111f 0%, #0a0a12 46%, #08080e 100%) !important;
}
/* Showdown content sits to the right of the rail (rail keeps its fixed position;
   body keeps its left padding from theme.css). Footer stays at the bottom. */
#showdown-home { min-height: calc(100vh - 60px); color: #fff; }
/* Keep the footer pinned to the very bottom regardless of DOM insertion order
   (auth.js appends it around the same time home-router appends #showdown-home). */
body.app.showdown-active footer.site-footer {
  order: 99; margin-top: auto;
  background: rgba(255,255,255,.02); border-top-color: rgba(255,255,255,.08);
}
/* Make the takeover body a flex column so margin-top:auto pushes the footer down
   and #showdown-home takes the remaining height. */
body.app.showdown-active { display: flex !important; flex-direction: column; min-height: 100vh; }
body.app.showdown-active #showdown-home { order: 1; flex: 1 0 auto; }
body.app.showdown-active .rail { order: 0; }
@media (max-width: 720px) {
  /* On mobile the rail is a top bar; the BOARD handle stays on the right edge. */
  body.app.showdown-active { padding: 10px !important; }
}

.sd-wrap { display: flex; flex-direction: column; align-items: center; padding: clamp(20px,5vw,44px) 16px 60px; }
.sd-loading { color: #8a8a9e; text-align: center; padding: 80px 0; }

.sd-head { text-align: center; margin-bottom: 20px; }
.sd-kicker { font-size: 12px; font-weight: 800; letter-spacing: 2.5px; color: #7d7d92; text-transform: uppercase; }
.sd-title { margin: 6px 0 0; font-size: clamp(24px,6vw,34px); font-weight: 800; color: #fff; letter-spacing: -.5px; font-family: 'Space Grotesk','Inter',sans-serif; }

/* Back link */
.sd-back { position: fixed; top: 18px; left: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 6px;
  background: #12121c; border: 1px solid rgba(255,255,255,.1); color: #c9c9d6; text-decoration: none;
  font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 12px; }
.sd-back:hover { color: #fff; border-color: rgba(255,255,255,.25); }

/* Card */
.sd-card { width: min(560px,100%); background: #111119; border: 1px solid rgba(255,255,255,.06); border-radius: 28px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }

/* Hero */
.sd-hero { position: relative; height: clamp(190px,44vw,242px); overflow: hidden; background: #0c0c14; }
.sd-hero-seam { position: absolute; top: -10%; left: 50%; width: 3px; height: 120%; transform: translateX(-50%) skewX(-16deg);
  background: linear-gradient(to bottom,transparent,rgba(255,255,255,.92),transparent); box-shadow: 0 0 26px 7px rgba(168,85,247,.5); z-index: 2; animation: sdSeam 2.6s ease-in-out infinite; }
.sd-ribbon { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 5; padding: 6px 16px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; box-shadow: 0 8px 24px rgba(0,0,0,.45); white-space: nowrap; }
.sd-teams-row { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(14px,5vw,34px); z-index: 3; }
.sd-team-hero { display: flex; flex-direction: column; align-items: center; gap: 11px; width: 40%; }
.sd-team-hero img { width: clamp(58px,16vw,82px); border-radius: 11px; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.sd-team-hero.a img { animation: sdFloatA 4.5s ease-in-out infinite; }
.sd-team-hero.b img { animation: sdFloatB 4.5s ease-in-out infinite; }
.sd-team-hero .nm { font-size: clamp(14px,3.8vw,19px); font-weight: 700; color: #fff; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.sd-vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: clamp(52px,13vw,64px); height: clamp(52px,13vw,64px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: clamp(14px,3.6vw,17px); color: #fff;
  background: #111119; background-image: linear-gradient(#111119,#111119),linear-gradient(135deg,#a855f7,#ec4899); background-origin: border-box; background-clip: padding-box,border-box; border: 2px solid transparent; z-index: 4; animation: sdVsPulse 2.6s ease-in-out infinite; }

/* Countdown */
.sd-cd { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 16px 6px; flex-wrap: wrap; }
.sd-cd-label { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: #7d7d92; }
.sd-cd-boxes { display: flex; gap: 7px; }
.sd-cd-box { min-width: 44px; background: #181822; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; padding: 7px 6px; text-align: center; }
.sd-cd-box .v { font-size: 19px; font-weight: 800; color: #fff; }
.sd-cd-box .u { font-size: 9px; font-weight: 700; letter-spacing: 1px; color: #6a6a7e; }
.sd-live { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(236,72,153,.14); border: 1px solid rgba(236,72,153,.4); }
.sd-live .dot { width: 9px; height: 9px; border-radius: 50%; background: #ec4899; animation: sdLivePulse 1.1s ease-in-out infinite; }
.sd-live .txt { font-size: 13px; font-weight: 800; letter-spacing: 1.5px; color: #f9a8d4; }

/* Score predictor */
.sd-sec-label { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: 2px; color: #7d7d92; }
.sd-score { padding: 14px 22px 6px; }
.sd-score-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 12px; }
.sd-score-col { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.sd-score-col .nm { font-size: 12px; font-weight: 700; color: #9a9aae; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-stepper { display: flex; align-items: center; gap: 12px; }
.sd-step { width: 38px; height: 38px; border-radius: 12px; background: #1b1b26; border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 20px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; }
.sd-step:disabled { color: #5a5a6e; cursor: not-allowed; opacity: .5; }
.sd-num { font-size: clamp(32px,9vw,42px); font-weight: 800; color: #fff; min-width: 34px; text-align: center; font-family: 'Space Grotesk','Inter',sans-serif; }
.sd-colon { font-size: 28px; font-weight: 800; color: #4a4a5e; padding-top: 22px; }

/* Winner pick */
.sd-winner { padding: 16px 22px 6px; }
.sd-winner-heading { text-align: center; font-size: 13px; font-weight: 700; color: #c9c9d6; }
.sd-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 13px; }
.sd-pill { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 12px; border-radius: 15px; font-family: inherit; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer; transition: all .2s; background: #15151f; border: 1.5px solid rgba(255,255,255,.08); }
.sd-pill img { width: 26px; border-radius: 5px; }
.sd-pill:disabled { cursor: not-allowed; opacity: .5; }

/* Fan support */
.sd-fan { margin: 16px 22px 6px; padding: 16px; background: #0d0d15; border: 1px solid rgba(255,255,255,.06); border-radius: 18px; }
.sd-fan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.sd-fan-head .t { font-size: 13px; font-weight: 700; color: #c9c9d6; }
.sd-fan-head .c { font-size: 12px; font-weight: 600; color: #7d7d92; }
.sd-fan-bar { display: flex; height: 34px; border-radius: 10px; overflow: hidden; background: #181822; }
.sd-fan-bar > div { display: flex; align-items: center; padding: 0 10px; font-size: 12px; font-weight: 800; color: #fff; transition: width .3s; text-shadow: 0 1px 2px rgba(0,0,0,.4); overflow: hidden; white-space: nowrap; min-width: 0; }
.sd-fan-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px; }
.sd-chip { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; font-family: inherit; font-size: 13px; font-weight: 700; color: #fff; cursor: pointer; transition: all .2s; background: #15151f; border: 1.5px solid rgba(255,255,255,.08); }
.sd-chip img { width: 22px; border-radius: 4px; }
.sd-chip .nm { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Submit */
.sd-submit-wrap { padding: 16px 22px 26px; }
.sd-submit { width: 100%; padding: 15px; border-radius: 16px; font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: .3px; transition: all .2s; cursor: pointer; border: none; color: #fff; }
.sd-submit:disabled { cursor: default; }
.sd-submit.locked { color: #8dd6a0; background: rgba(60,180,110,.14); border: 1.5px solid rgba(90,200,130,.4); }
.sd-note { text-align: center; font-size: 12px; color: #6a6a7e; margin-top: 10px; }

/* ---- Result view (published match) ---- */
.sd-result { padding: 22px 22px 28px; text-align: center; }
.sd-result-label { font-size: 12px; font-weight: 800; letter-spacing: 2.5px; color: #7d7d92; }
.sd-result-score { font-size: 56px; font-weight: 800; color: #fff; letter-spacing: -1px; margin: 6px 0 18px; font-family: 'Space Grotesk','Inter',sans-serif; }
.sd-result-pick { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; background: #15151f; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; }
.sd-result-pick .lbl { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; color: #9a9aae; }
.sd-result-pick .val { font-size: 16px; font-weight: 700; color: #fff; }
.sd-result-pts { font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#a855f7,#ec4899); padding: 5px 12px; border-radius: 999px; }
.sd-restags { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.sd-restag { font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.sd-restag.exact { background: rgba(245,196,81,.16); border: 1px solid rgba(245,196,81,.4); color: #f5c451; }
.sd-restag.winner { background: rgba(60,180,110,.16); border: 1px solid rgba(90,200,130,.4); color: #8dd6a0; }
/* light-mode result surfaces */
html[data-theme="light"] .sd-result-score { color: #1c1633; }
html[data-theme="light"] .sd-result-pick { background: #f4f1fc; border-color: rgba(28,22,51,.1); }
html[data-theme="light"] .sd-result-pick .val { color: #1c1633; }
html[data-theme="light"] .sd-result-label { color: #8b83a8; }

/* ---- Fixture tabs (Semi 1 / Semi 2 / Final) ---- */
.sd-tabs { display: inline-flex; gap: 4px; background: #12121c; padding: 5px; border-radius: 16px; border: 1px solid rgba(255,255,255,.06); margin-bottom: 22px; }
.sd-tab { padding: 9px 18px; border-radius: 12px; border: none; cursor: pointer; font-size: 13px; font-weight: 700; font-family: inherit; color: #c4c4d4; background: transparent; transition: all .2s; }
.sd-tab:hover { color: #fff; }
.sd-tab.active { color: #fff; background: linear-gradient(135deg,#a855f7,#ec4899); }
.sd-tab.active.gold { color: #2a1e00; background: linear-gradient(135deg,#f5c451,#e0972a); }

/* ---- BOARD panel ---- */
.sd-board-handle {
  position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 61;
  background: linear-gradient(135deg,#a855f7,#ec4899); color: #fff; border: none;
  border-radius: 14px 0 0 14px; padding: 18px 9px; cursor: pointer;
  box-shadow: -8px 0 24px rgba(168,85,247,.35); transition: right .32s cubic-bezier(.4,0,.2,1);
}
.sd-board-handle span { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 2px; font-size: 12px; font-weight: 800; }
.sd-board-handle.shifted { right: min(380px,92vw); }

.sd-board-overlay { position: fixed; inset: 0; background: rgba(4,4,10,.55); z-index: 55; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.sd-board-overlay.show { opacity: 1; visibility: visible; }

.sd-board {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(380px,92vw);
  background: #0e0e16; border-left: 1px solid rgba(255,255,255,.07);
  transform: translateX(101%); transition: transform .32s cubic-bezier(.4,0,.2,1);
  z-index: 60; display: flex; flex-direction: column; box-shadow: -30px 0 60px rgba(0,0,0,.5);
}
.sd-board.open { transform: translateX(0); }
.sd-board-top { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.sd-board-title { font-size: 16px; font-weight: 800; color: #fff; }
.sd-board-close { width: 32px; height: 32px; border-radius: 9px; background: #1b1b26; border: 1px solid rgba(255,255,255,.1); color: #c9c9d6; font-size: 16px; cursor: pointer; }
.sd-board-tabs { display: flex; gap: 4px; padding: 14px 16px; }
.sd-bt { flex: 1; padding: 9px 6px; border-radius: 11px; border: none; cursor: pointer; font-size: 12px; font-weight: 700; font-family: inherit; color: #8a8a9e; background: #15151f; transition: all .2s; }
.sd-bt.active { color: #fff; background: linear-gradient(135deg,#a855f7,#ec4899); }
.sd-board-body { flex: 1; overflow-y: auto; padding: 4px 16px 24px; }

/* Leaderboard rows */
.sd-lb-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px; margin-bottom: 7px; border: 1px solid transparent; }
.sd-lb-row.me { background: rgba(168,85,247,.12); border-color: rgba(168,85,247,.4); }
.sd-lb-rank { flex: none; width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.sd-lb-who { flex: 1; min-width: 0; }
.sd-lb-who .nm { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-lb-who .org { font-size: 11px; color: #7d7d92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-lb-pts { font-size: 16px; font-weight: 800; color: #c084fc; }
/* Leaderboard hover tooltip (points / matches): sit close under the name,
   simple flat surface, left-aligned to the name (not centered/far). */
.sd-lb-tip::after {
  font-size: 13px !important; font-weight: 700 !important;
  padding: 6px 12px !important; border-radius: 9px !important;
  top: calc(100% - 6px) !important;            /* tuck up close to the row */
  left: 48px !important; transform: none !important;  /* align under the name, not centered */
  background: #23233a !important;              /* simple flat panel, no gradient/heavy shadow */
  box-shadow: 0 4px 14px rgba(0,0,0,.35) !important;
  color: #fff !important;
}
.sd-lb-tip:hover::after { transform: none !important; }
.sd-lb-tip::before { display: none !important; }  /* drop the arrow for a cleaner look */

/* Fan rows */
.sd-fanrow { display: flex; align-items: center; gap: 11px; padding: 9px 2px; }
.sd-fanrow img { width: 26px; border-radius: 5px; flex: none; }
.sd-fanrow .nm { font-size: 14px; font-weight: 700; color: #fff; width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-fanrow .bar { flex: 1; height: 8px; background: #181822; border-radius: 6px; overflow: hidden; }
.sd-fanrow .bar > div { height: 100%; border-radius: 6px; background: linear-gradient(90deg,#a855f7,#ec4899); }
.sd-fanrow .ct { font-size: 14px; font-weight: 800; color: #c9c9d6; width: 24px; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .sd-hero-seam, .sd-team-hero img, .sd-vs, .sd-live .dot { animation: none; }
}

/* =============================================================================
   LIGHT MODE for the Showdown (home takeover, card, BOARD). Default is dark;
   these overrides apply only when the theme toggle is set to light. Soft
   lavender-tinted surfaces with dark text; brand accents/gradients unchanged.
   ========================================================================== */
html[data-theme="light"] body.showdown-body,
html[data-theme="light"] #showdown-home { color: #1c1633; }
html[data-theme="light"] body.showdown-body {
  background: radial-gradient(120% 90% at 50% -10%, #f0eafc 0%, #f3f1fb 46%, #ece8f7 100%);
}

/* Header text */
html[data-theme="light"] .sd-kicker { color: #8b83a8; }
html[data-theme="light"] .sd-title { color: #1c1633; }

/* Back link */
html[data-theme="light"] .sd-back { background: #fff; border-color: rgba(28,22,51,.12); color: #4a4468; }
html[data-theme="light"] .sd-back:hover { color: #1c1633; border-color: rgba(28,22,51,.3); }

/* Card + hero */
html[data-theme="light"] .sd-card { background: #ffffff; border-color: rgba(28,22,51,.10); box-shadow: 0 24px 60px -18px rgba(80,40,140,.28); }
html[data-theme="light"] .sd-hero { background: #f4f1fc; }
html[data-theme="light"] .sd-team-hero .nm { color: #1c1633; text-shadow: none; }
html[data-theme="light"] .sd-vs { color: #1c1633; background: #ffffff; background-image: linear-gradient(#fff,#fff),linear-gradient(135deg,#a855f7,#ec4899); }

/* Countdown */
html[data-theme="light"] .sd-cd-box { background: #f4f1fc; border-color: rgba(28,22,51,.08); }
html[data-theme="light"] .sd-cd-box .v { color: #1c1633; }
html[data-theme="light"] .sd-cd-label, html[data-theme="light"] .sd-sec-label { color: #8b83a8; }

/* Score steppers */
html[data-theme="light"] .sd-step { background: #f1edfb; border-color: rgba(28,22,51,.12); color: #1c1633; }
html[data-theme="light"] .sd-num { color: #1c1633; }
html[data-theme="light"] .sd-score-col .nm { color: #6b6785; }
html[data-theme="light"] .sd-colon { color: #b5aecb; }

/* Winner pills */
html[data-theme="light"] .sd-winner-heading { color: #4a4468; }
html[data-theme="light"] .sd-pill { background: #f4f1fc; border-color: rgba(28,22,51,.1); color: #1c1633; }

/* Fan support */
html[data-theme="light"] .sd-fan { background: #f7f4fd; border-color: rgba(28,22,51,.08); }
html[data-theme="light"] .sd-fan-head .t { color: #4a4468; }
html[data-theme="light"] .sd-fan-head .c { color: #8b83a8; }
html[data-theme="light"] .sd-fan-bar { background: #eae5f6; }
html[data-theme="light"] .sd-chip { background: #f4f1fc; border-color: rgba(28,22,51,.1); color: #1c1633; }

/* Tabs */
html[data-theme="light"] .sd-tabs { background: #fff; border-color: rgba(28,22,51,.12); }
html[data-theme="light"] .sd-tab { color: #3a3357; }        /* darker = clearly readable on white */
html[data-theme="light"] .sd-tab:hover { color: #1c1633; }
/* active tab keeps its gradient (dark text handled by existing rules) */

/* BOARD panel */
html[data-theme="light"] .sd-board { background: #ffffff; border-left-color: rgba(28,22,51,.1); box-shadow: -30px 0 60px rgba(80,40,140,.18); }
html[data-theme="light"] .sd-board-top { border-bottom-color: rgba(28,22,51,.08); }
html[data-theme="light"] .sd-board-title { color: #1c1633; }
html[data-theme="light"] .sd-board-close { background: #f1edfb; border-color: rgba(28,22,51,.12); color: #4a4468; }
html[data-theme="light"] .sd-bt { background: #f1edfb; color: #6b6785; }
html[data-theme="light"] .sd-lb-who .nm { color: #1c1633; }
html[data-theme="light"] .sd-lb-row.me { background: rgba(124,58,237,.10); border-color: rgba(124,58,237,.35); }
html[data-theme="light"] .sd-fanrow .nm { color: #1c1633; }
html[data-theme="light"] .sd-fanrow .bar { background: #eae5f6; }
html[data-theme="light"] .sd-fanrow .ct { color: #4a4468; }
html[data-theme="light"] .sd-lb-tip::after { background: #1c1633 !important; color: #fff !important; }

/* Loading text */
html[data-theme="light"] .sd-loading { color: #8b83a8; }