/* ── THESPURSWATCH SHARED STYLES ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  /* GoalSides: black, white and green. The games were built against
     these variable names, so remapping here re-themes every screen
     without touching a single game rule. */
  --navy:      #0d0f0d;   /* near-black, the base surface */
  --navy-mid:  #161a16;
  --navy-dark: #050605;
  --yellow:    #8ecf28;   /* the logo green, wherever an accent was gold */
  --yellow-h:  #7ab421;
  --white:     #ffffff;
  --bg:        #000000;
  --text:      #f2f4f2;
  --muted:     #9aa39a;
  --border:    #232823;
  --light:     #12150f;

  --green:     #8ecf28;
  --green-dim: #5f8f1c;
}
html { scroll-behavior: smooth; touch-action: manipulation; }
body {
  background: #000; color: var(--text);
  font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
.wrap { max-width: 780px; margin: 0 auto; padding: 0 1.2rem; }

/* Battle is a game screen, not an article - locking it to a phone-width
   column (rather than the site's normal 780px reading width) means it
   never floats in the middle of a wide desktop window with dead space
   either side, and since every Battle layout below the 560px breakpoint
   was specifically designed and measured at mobile widths, staying
   under that breakpoint here keeps it in that intended mode always,
   regardless of the actual browser window size. */
body.tsw-battle-page .wrap { max-width: 480px; }

/* ── HEADER ── */
header { background: var(--navy-dark); border-bottom: 3px solid var(--yellow); }
.header-inner {
  max-width: 780px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.2rem; gap: 1rem;
}
.logo-name { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; color: var(--white); line-height: 1; }
.logo-name span { color: var(--yellow); }
.logo-tag { font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.28); margin-top: 0.12rem; }
.header-right { display: flex; align-items: center; gap: 0.7rem; }
.header-right a { font-size: 0.7rem; color: rgba(255,255,255,0.4); font-weight: 600; transition: color 0.2s; }
.header-right a:hover { color: var(--yellow); }
.btn-sub { background: var(--yellow); color: var(--navy); padding: 0.42rem 1rem; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; transition: background 0.2s; display: inline-block; white-space: nowrap; }
.btn-sub:hover { background: var(--yellow-h); color: white; }

/* ── SECTION LABEL ── */
.section-label { display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid rgba(212,196,74,0.45); padding-bottom: 0.5rem; margin: 1.8rem 0 1rem; }
.section-label h2 { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #d4c44a; }
.section-label a { font-size: 0.62rem; color: var(--muted); font-weight: 600; transition: color 0.2s; }
.section-label a:hover { color: #d4c44a; }

/* ── CATEGORY TAG ── */
.cat { display: inline-block; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; border-left: 3px solid var(--yellow); padding-left: 0.45rem; color: #67e8ff; margin-bottom: 0.4rem; }

/* ── ARTICLE CARD (image left, text right) ── */
.article-list { display: flex; flex-direction: column; background: linear-gradient(155deg, #141c6a 0%, #0a0e35 100%); border: 1px solid rgba(103,232,255,0.16); border-radius: 4px; margin-bottom: 1.8rem; box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.article-item { display: grid; grid-template-columns: 180px 1fr; border-bottom: 1px solid rgba(103,232,255,0.12); overflow: hidden; transition: background 0.15s; }
.article-item:last-child { border-bottom: none; }
.article-item:hover { background: rgba(103,232,255,0.06); }
.article-item-img { width: 180px; height: 125px; background: linear-gradient(135deg, #1a2d6e, #06102e); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; position: relative; }
.article-item-img span { font-size: 2.8rem; color: rgba(255,255,255,0.85); transition: transform 0.3s; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)); }
.article-item:hover .article-item-img span { transform: scale(1.1); }
.article-item-img::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(212,196,74,0.15), transparent 60%); }

.col-card-img { width: 100%; height: 155px; background: linear-gradient(135deg, #1a2d6e, #06102e); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.col-card-img span { font-size: 3.6rem; color: rgba(255,255,255,0.85); transition: transform 0.3s; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3)); }
.col-card:hover .col-card-img span { transform: scale(1.08); }
.col-card-img::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(212,196,74,0.15), transparent 60%); }

/* Category-themed thumbnail backgrounds so different story types look visually distinct */
.thumb-transfer { background: linear-gradient(135deg, #7a1f1f, #2b0a0a) !important; }
.thumb-match { background: linear-gradient(135deg, #145c3a, #052414) !important; }
.thumb-feature { background: linear-gradient(135deg, #4a2170, #1c0b30) !important; }
.thumb-news { background: linear-gradient(135deg, #1a2d6e, #06102e) !important; }
.thumb-opinion { background: linear-gradient(135deg, #7a4a12, #2e1a05) !important; }
.article-item-body { padding: 0.9rem 1rem; display: flex; flex-direction: column; justify-content: center; }
.article-item-title { font-family: 'Source Serif 4', serif; font-size: 0.9rem; font-weight: 700; line-height: 1.4; color: #f1f4ff; margin-bottom: 0.3rem; transition: color 0.2s; }
.article-item:hover .article-item-title { color: #ffd63d; }
.article-item-excerpt { font-size: 0.76rem; color: rgba(230,233,255,0.65); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.3rem; }
.article-item-meta { font-size: 0.62rem; color: rgba(230,233,255,0.5); font-weight: 500; }

/* ── TWO COL GRID ── */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 1.8rem; }
.col-card { background: linear-gradient(155deg, #141c6a 0%, #0a0e35 100%); border: 1px solid rgba(103,232,255,0.16); border-radius: 4px; display: block; overflow: hidden; transition: background 0.15s; box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.col-card:hover { background: linear-gradient(155deg, #1a237a 0%, #0d123f 100%); }
.col-card-body { padding: 0.85rem; }
.col-card-title { font-family: 'Source Serif 4', serif; font-size: 0.86rem; font-weight: 700; line-height: 1.38; color: #f1f4ff; margin-bottom: 0.28rem; transition: color 0.2s; }
.col-card:hover .col-card-title { color: #ffd63d; }
.col-card-excerpt { font-size: 0.72rem; color: rgba(230,233,255,0.65); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0.28rem; }
.col-card-meta { font-size: 0.6rem; color: rgba(230,233,255,0.5); }

/* ── HERO ── */
.hero { display: block; background: var(--navy-dark); position: relative; overflow: hidden; margin: 1.2rem 0; }
.hero-visual { height: 340px; background: linear-gradient(160deg, #1a2d6e 0%, #060b2a 100%); display: flex; align-items: center; justify-content: center; position: relative; }
.hero-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(6,11,42,0.1) 30%, rgba(6,11,42,0.96) 100%); }
.hero-bg-word { font-weight: 800; font-size: 10rem; color: rgba(255,255,255,0.025); letter-spacing: -0.04em; user-select: none; line-height: 1; }
.hero-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.4rem; z-index: 2; }
.hero-cat { display: inline-block; background: var(--yellow); color: var(--navy); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.18rem 0.55rem; margin-bottom: 0.5rem; }
.hero-title { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.35rem; color: var(--white); line-height: 1.25; margin-bottom: 0.4rem; transition: color 0.2s; }
.hero:hover .hero-title { color: var(--yellow); }
.hero-meta { font-size: 0.67rem; color: rgba(255,255,255,0.4); font-weight: 500; }

/* ── NEWSLETTER BLOCK ── */
.nl-block { background: var(--navy); padding: 2rem 1.5rem; text-align: center; margin-bottom: 1.8rem; }
.nl-block h2 { font-family: 'Source Serif 4', serif; font-weight: 700; font-style: italic; font-size: 1.2rem; color: var(--white); margin-bottom: 0.3rem; }
.nl-block p { font-size: 0.78rem; color: rgba(255,255,255,0.45); margin-bottom: 1.1rem; }
.nl-form { display: flex; max-width: 380px; margin: 0 auto; }
.nl-form input { flex: 1; border: none; padding: 0.65rem 0.85rem; font-family: 'Inter', sans-serif; font-size: 16px; outline: none; color: var(--text); }
.nl-form button { background: var(--yellow); color: var(--navy); border: none; padding: 0.65rem 1rem; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: background 0.2s; }
.nl-form button:hover { background: var(--yellow-h); color: white; }
.nl-note { font-size: 0.6rem; color: rgba(255,255,255,0.22); margin-top: 0.55rem; }

/* ── FIXTURES ── */
.mini { background: linear-gradient(155deg, #141c6a 0%, #0a0e35 100%); border: 1px solid rgba(103,232,255,0.16); border-radius: 4px; overflow: hidden; margin-bottom: 1.8rem; box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.mini-head { background: rgba(2,7,25,0.4); border-bottom: 1px solid rgba(103,232,255,0.16); padding: 0.55rem 0.9rem; display: flex; align-items: center; justify-content: space-between; }
.mini-head h3 { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: white; }
.mini-head h3 em { color: var(--yellow); font-style: normal; }
.mini-head a { font-size: 0.58rem; color: rgba(255,255,255,0.38); transition: color 0.2s; }
.mini-head a:hover { color: var(--yellow); }
.fix-lbl { padding: 0.28rem 0.9rem; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(230,233,255,0.55); background: rgba(2,7,25,0.35); border-bottom: 1px solid rgba(103,232,255,0.14); }
.fx { display: grid; grid-template-columns: 1fr 58px 1fr; align-items: center; padding: 0.45rem 0.9rem; border-bottom: 1px solid rgba(103,232,255,0.12); font-size: 0.7rem; color: rgba(230,233,255,0.85); }
.fx:last-child { border-bottom: none; }
.fx-h { font-weight: 600; }
.fx-a { font-weight: 600; text-align: right; }
.fx-h.sp, .fx-a.sp { color: #ffd63d; }
.fx-sc { text-align: center; font-weight: 700; font-size: 0.68rem; color: #d4c44a; background: rgba(212,196,74,0.12); border-radius: 2px; padding: 0.14rem 0.25rem; }
.fx-sc.up { color: rgba(230,233,255,0.5); font-weight: 500; font-size: 0.62rem; background: none; }

/* ── TABLE ── */
.tbl-h { display: grid; grid-template-columns: 18px 1fr 22px 22px 22px 28px; padding: 0.28rem 0.9rem; background: rgba(2,7,25,0.35); border-bottom: 1px solid rgba(103,232,255,0.14); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(230,233,255,0.55); }
.tbl-h span:not(:nth-child(2)) { text-align: center; }
.tbl-r { display: grid; grid-template-columns: 18px 1fr 22px 22px 22px 28px; padding: 0.36rem 0.9rem; border-bottom: 1px solid rgba(103,232,255,0.12); font-size: 0.7rem; color: rgba(230,233,255,0.85); transition: background 0.15s; }
.tbl-r:last-child { border-bottom: none; }
.tbl-r:hover { background: rgba(103,232,255,0.06); }
.tbl-r.spurs { background: rgba(212,196,74,0.1); font-weight: 700; }
.t-pos { color: rgba(230,233,255,0.5); font-size: 0.64rem; text-align: center; }
.t-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.7rem; }
.t-name.sp { color: #ffd63d; }
.t-n { text-align: center; color: rgba(230,233,255,0.5); font-size: 0.66rem; }
.t-pts { text-align: center; font-weight: 700; color: #d4c44a; }
.rel { border-left: 3px solid #e74c3c; }
.eur { border-left: 3px solid #3498db; }

/* ── SUPPORT ── */
.support-block { background: var(--white); border: 1px solid var(--border); padding: 1.6rem 1.4rem; text-align: center; margin-bottom: 1.8rem; }
.support-block h3 { font-family: 'Source Serif 4', serif; font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 0.3rem; }
.support-block p { font-size: 0.76rem; color: var(--muted); line-height: 1.6; margin-bottom: 0.9rem; max-width: 400px; margin-left: auto; margin-right: auto; }
.bmc-btn { display: inline-block; background: var(--yellow); color: var(--navy); padding: 0.55rem 1.4rem; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; transition: background 0.2s; }
.bmc-btn:hover { background: var(--yellow-h); color: white; }

/* ── FOOTER ── */
footer { background: var(--navy-dark); border-top: 3px solid var(--yellow); }
.footer-inner { max-width: 780px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1.5rem; padding: 2rem 1.2rem; border-bottom: 1px dotted rgba(255,255,255,0.14); }
.footer-logo { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1rem; color: white; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.footer-logo span { color: var(--yellow); }
.footer-about { font-size: 0.72rem; color: rgba(255,255,255,0.33); line-height: 1.65; margin-bottom: 0.8rem; }
/* Social row as dotted-border icon buttons that lift on hover, plus a
   back-to-top control - the parts of the reference footer that
   actually apply here. Its theme toggle is omitted (the site has no
   light mode to switch to) along with the six networks TheSpursWatch
   doesn't have accounts on. */
.footer-soc { display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: center; }
.footer-soc a,
.footer-top-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  color: rgba(255,255,255,0.45);
  background: none; cursor: pointer;
  border: 1px dotted rgba(255,255,255,0.28); border-radius: 10px;
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.footer-soc a svg, .footer-top-btn svg { width: 18px; height: 18px; }
.footer-soc a:hover,
.footer-top-btn:hover {
  transform: translateY(-4px);
  color: var(--yellow); border-color: rgba(212,196,74,0.6);
}
.footer-top-btn { margin-left: 0.35rem; }
.footer-top-btn svg { width: 15px; height: 15px; }

/* Visually hidden but still read by screen readers. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.footer-col h4 { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow); margin-bottom: 0.7rem; padding-bottom: 0.35rem; border-bottom: 1px dotted rgba(255,255,255,0.16); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.footer-col ul li a { font-size: 0.72rem; color: rgba(255,255,255,0.38); transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--yellow); }
.footer-bottom { background: #050830; padding: 0.9rem 1.2rem; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.4rem 1.2rem; text-align: center; }
.footer-copy { font-size: 0.62rem; color: rgba(255,255,255,0.18); }
.footer-links { display: flex; gap: 1.2rem; }
.footer-links a { font-size: 0.62rem; color: rgba(255,255,255,0.2); letter-spacing: 0.07em; text-transform: uppercase; transition: color 0.2s; }
.footer-links a:hover { color: var(--yellow); }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .article-item { grid-template-columns: 1fr; }
  .article-item-img { width: 100%; height: 170px; }
  .two-col { grid-template-columns: 1fr; }
  .hero-visual { height: 240px; }
  .hero-bg-word { font-size: 5rem; }
  .nl-form { flex-direction: column; }
  .header-inner { flex-wrap: wrap; gap: 0.6rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 400px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ── COOKIE BANNER ── */
/* Cookie notice — a notification card that drops in from the TOP.
   It used to be a full-width bar pinned to the bottom, which on
   mobile Safari sits underneath the browser's own bottom address/
   search bar, leaving the Accept and Decline buttons unreachable.
   Coming from the top avoids that entirely, and also keeps it clear
   of any bottom-anchored browser UI on Android. Styled as the Alert
   notification card: rounded, max 400px, its own shadow, an icon
   beside the copy and a close control top-right. */
.cookie-banner {
  position: fixed; z-index: 9999;
  top: calc(env(safe-area-inset-top, 0px) + 0.75rem);
  left: 0.75rem; right: 0.75rem;
  max-width: 400px; margin: 0 auto;
  background: #0d1130; color: #fff;
  border: 1px solid rgba(212,196,74,0.45); border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 18px 45px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.2);
  display: flex; gap: 0.75rem; align-items: flex-start;
  transform: translateY(calc(-100% - 2rem)); opacity: 0;
  transition: transform 0.42s cubic-bezier(0.22,1,0.36,1), opacity 0.3s ease;
  pointer-events: none;
}
.cookie-banner.show { transform: translateY(0); opacity: 1; pointer-events: auto; }

.cookie-banner-icon {
  flex-shrink: 0; margin-top: 0.1rem; font-size: 1.1rem; line-height: 1;
}
.cookie-banner-main { flex: 1; min-width: 0; }
.cookie-banner-title {
  font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 700;
  color: #fff; margin-bottom: 0.25rem;
}
.cookie-banner-text {
  font-size: 0.76rem; color: rgba(230,233,255,0.68); line-height: 1.5;
}
.cookie-banner-text a { color: var(--yellow); text-decoration: underline; }

.cookie-banner-btns { display: flex; gap: 0.5rem; padding-top: 0.75rem; }
.cookie-btn-accept {
  background: var(--yellow); color: var(--navy); border: none;
  border-radius: 8px; padding: 0.4rem 0.9rem;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.74rem;
  cursor: pointer; transition: background 0.2s;
}
.cookie-btn-accept:hover { background: var(--yellow-h); }
.cookie-btn-decline {
  background: transparent; color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.2); border-radius: 8px;
  padding: 0.4rem 0.9rem;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.74rem;
  cursor: pointer; transition: all 0.2s;
}
.cookie-btn-decline:hover { color: #fff; border-color: rgba(255,255,255,0.45); }

.cookie-banner-close {
  flex-shrink: 0; width: 28px; height: 28px; margin: -0.25rem -0.25rem 0 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 6px; cursor: pointer;
  color: rgba(255,255,255,0.55); transition: color 0.2s, background 0.2s;
}
.cookie-banner-close:hover { color: #fff; background: rgba(255,255,255,0.08); }
.cookie-banner-close svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) { .cookie-banner { transition: opacity 0.2s ease; } }

/* ── NOTIFICATION PROMPT ── */
.notif-prompt {
  position: fixed; top: 80px; right: 1.2rem; z-index: 9998;
  background: white; border: 1px solid var(--border);
  border-top: 3px solid var(--yellow);
  padding: 1.1rem 1.2rem; max-width: 300px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  transform: translateX(120%);
  transition: transform 0.4s ease;
}
.notif-prompt.show { transform: translateX(0); }
.notif-prompt-icon { font-size: 1.4rem; margin-bottom: 0.5rem; }
.notif-prompt-title { font-weight: 700; font-size: 0.82rem; color: var(--navy); margin-bottom: 0.3rem; }
.notif-prompt-text { font-size: 0.74rem; color: var(--muted); line-height: 1.55; margin-bottom: 0.9rem; }
.notif-prompt-btns { display: flex; gap: 0.5rem; }
.notif-btn-yes { background: var(--navy); color: white; border: none; padding: 0.45rem 1rem; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; flex: 1; }
.notif-btn-yes:hover { background: var(--navy-mid, #141c6a); }
.notif-btn-no { background: transparent; color: var(--muted); border: 1px solid var(--border); padding: 0.45rem 1rem; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.7rem; cursor: pointer; transition: all 0.2s; flex: 1; }
.notif-btn-no:hover { color: var(--text); border-color: #aaa; }

/* ============================================================
   STATS PAGE
   ============================================================ */
.stats-hero {
  background: var(--navy-dark, #090e3a);
  border-bottom: 3px solid var(--yellow);
  padding: 2.2rem 1.2rem 1.6rem;
  text-align: center;
}
.stats-hero h1 {
  font-family: 'Source Serif 4', serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: var(--white);
  margin-bottom: 0.4rem;
}
.stats-hero h1 span { color: var(--yellow); font-style: italic; }
.stats-hero p { font-size: 0.8rem; color: rgba(255,255,255,0.45); max-width: 460px; margin: 0 auto; line-height: 1.6; }

.stats-tabs {
  display: flex; gap: 0; overflow-x: auto;
  background: var(--navy-mid, #141c6a);
  position: sticky; top: 0; z-index: 90;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.stats-tabs::-webkit-scrollbar { display: none; }
.stats-tab-btn {
  flex-shrink: 0; padding: 0.75rem 1.1rem;
  font-family: 'Barlow', 'Inter', sans-serif; font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); background: none; border: none;
  border-bottom: 3px solid transparent; cursor: pointer;
  transition: color 0.2s, border-color 0.2s; white-space: nowrap;
}
.stats-tab-btn.active, .stats-tab-btn:hover { color: var(--yellow); border-bottom-color: var(--yellow); }

.stats-panel { display: none; padding: 1.5rem 0; }
.stats-panel.active { display: block; }

/* stat card grid for current season */
.stat-cards {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border); border: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.stat-card { background: var(--white); padding: 1.2rem 0.8rem; text-align: center; }
.stat-card .num { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.7rem; color: var(--navy); line-height: 1; }
.stat-card .lbl { font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 0.4rem; }

/* legacy records tables */
.legacy-table { width: 100%; background: var(--white); border: 1px solid var(--border); border-collapse: collapse; font-size: 0.78rem; margin-bottom: 1.5rem; }
.legacy-table th { background: var(--navy); color: white; padding: 0.5rem 0.7rem; text-align: left; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.legacy-table td { padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); }
.legacy-table tr:nth-child(even) td { background: var(--light); }
.legacy-table tr.gold td { background: rgba(212,196,74,0.12); font-weight: 700; }
.legacy-rank { color: var(--muted); font-weight: 700; width: 24px; }
.legacy-name { font-weight: 700; color: var(--text); }
.legacy-sub { font-size: 0.68rem; color: var(--muted); display: block; margin-top: 0.1rem; }

/* honours grid */
.honours-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin-bottom: 1.5rem; }
.honour-card { background: var(--white); padding: 1.2rem 0.8rem; text-align: center; }
.honour-card .trophy-count { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 2.2rem; color: var(--yellow-h, #bfb038); line-height: 1; }
.honour-card .trophy-name { font-size: 0.68rem; font-weight: 700; color: var(--navy); margin-top: 0.4rem; }
.honour-card .trophy-years { font-size: 0.6rem; color: var(--muted); margin-top: 0.3rem; line-height: 1.5; }

/* season history table */
.season-hist-table { width: 100%; background: var(--white); border: 1px solid var(--border); border-collapse: collapse; font-size: 0.76rem; margin-bottom: 1.5rem; }
.season-hist-table th { background: var(--navy); color: white; padding: 0.5rem 0.6rem; text-align: center; font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; }
.season-hist-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); text-align: center; }
.season-hist-table tr:nth-child(even) td { background: var(--light); }
.season-hist-table td.season-label { text-align: left; font-weight: 700; }
.pos-pill { display: inline-block; min-width: 22px; padding: 0.1rem 0.4rem; border-radius: 2px; font-weight: 700; color: white; font-size: 0.72rem; }
.pos-top { background: #2563eb; }
.pos-mid { background: #6b7280; }
.pos-low { background: #dc2626; }

/* compare tool */
.compare-wrap { background: var(--white); border: 1px solid var(--border); padding: 1.2rem; margin-bottom: 1.5rem; }
.compare-selects {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 0.8rem; align-items: center; margin-bottom: 1.2rem;
}
/* minmax(0,1fr) rather than 1fr: a grid track defaults to min-content
   width, so a long player name would otherwise force the columns wider
   than the screen instead of the input shrinking. */
.compare-selects { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
.compare-vs { font-family: 'Source Serif 4', serif; font-weight: 700; font-style: italic; font-size: 1.1rem; color: var(--yellow-h, #bfb038); text-align: center; }
.compare-select {
  width: 100%; padding: 0.6rem 0.7rem; border: 2px solid var(--navy);
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.82rem;
  background: var(--navy); color: white; cursor: pointer;
}

/* squad list live */
/* ---- Squad grid (team-component style photo cards) ----
   Player render on a tinted panel, shirt number in the corner, name
   and position beneath. Cards lift and the render scales slightly on
   hover. Falls back to an initials badge when a player has no render,
   so the grid stays intact as the squad changes. */
/* Squad marquee: two rows drifting in opposite directions, as in the
   team component. Card contents are duplicated in the markup, so the
   track translates exactly one copy's width and loops with no visible
   jump. It runs continuously - see the note on pointer-events below. */
.squad-grid {
  position: relative;
  display: flex; flex-direction: column; gap: 0.9rem;
  background: none; border: none; margin-bottom: 1.5rem;
  overflow: hidden;
}
/* Edge fades as overlay gradients rather than mask-image. A mask over
   a continuously-transformed 3000px-wide layer is a known source of
   repaint glitches and dropped layers on iOS Safari - plain overlays
   cost nothing and look identical. */
.squad-grid::before, .squad-grid::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34px;
  z-index: 2; pointer-events: none;
}
.squad-grid::before { left: 0; background: linear-gradient(to right, var(--navy-dark, #06102e), transparent); }
.squad-grid::after { right: 0; background: linear-gradient(to left, var(--navy-dark, #06102e), transparent); }
.squad-marquee { overflow: hidden; }
.squad-track { will-change: transform; backface-visibility: hidden; }
.squad-track {
  display: flex; width: max-content;
  /* Spacing lives on the cards, not as flex `gap`. With `gap` the
     track is (2n cards + 2n-1 gaps) wide, so translating -50% lands
     half a gap out and the loop visibly jumps. A trailing margin per
     card makes every card cost exactly the same, so -50% is precisely
     one copy. */
  animation: squadScroll calc(var(--count, 10) * 3.4s) linear infinite;
}
.squad-marquee.reverse .squad-track { animation-direction: reverse; }
/* The marquee no longer pauses, and the cards are not interactive.
   On touch, :hover sticks after a tap and :focus-within latches, so a
   single tap froze the carousel until you tapped somewhere else -
   which read as the carousel breaking. The cards are <article>s with
   nothing to click, so making them pass pointer events straight
   through costs nothing and removes the trap entirely. */
.squad-track, .squad-track * { pointer-events: none; }
.squad-track img { -webkit-user-drag: none; user-select: none; }
.squad-track .squad-card { flex: 0 0 150px; margin-right: 0.9rem; }
@keyframes squadScroll {
  /* Half the track = exactly one copy of the card set. translate3d
     keeps it on the GPU, which iOS handles far more reliably than a
     2D transform on a very wide element. */
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .squad-track { animation: none; flex-wrap: wrap; width: 100%; }
  .squad-grid { -webkit-mask-image: none; mask-image: none; }
}
.squad-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, #141c6a 0%, #0a0e35 100%);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.squad-card:hover {
  transform: translateY(-4px);
  border-color: rgba(212,196,74,0.45);
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}
.squad-photo {
  position: relative; aspect-ratio: 1 / 1.12; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 115%, rgba(212,196,74,0.22), transparent 60%),
    linear-gradient(160deg, #1b2472, #0b1038);
  display: flex; align-items: flex-end; justify-content: center;
}
.squad-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 0.35s ease;
}
.squad-card:hover .squad-photo img { transform: scale(1.06); }
.squad-initials {
  font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 2rem;
  color: rgba(255,255,255,0.28); align-self: center;
}
.squad-num {
  position: absolute; top: 8px; left: 9px;
  font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 0.95rem;
  color: var(--yellow); text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.squad-meta { padding: 0.6rem 0.7rem 0.7rem; text-align: left; }
.squad-name {
  margin: 0; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 700;
  color: #fff; line-height: 1.25;
}
.squad-pos {
  margin: 0.15rem 0 0; font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(230,233,255,0.5);
}

.stats-note { font-size: 0.7rem; color: var(--muted); background: var(--light); border-left: 3px solid var(--yellow); padding: 0.7rem 0.9rem; margin-bottom: 1.5rem; line-height: 1.6; }

@media (max-width: 640px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .honours-grid { grid-template-columns: repeat(2, 1fr); }
  /* The two name fields stay side by side at every width - stacking
     them was what put one player's name above the other. They shrink
     instead, and the dropdown under each one is what you actually type
     into, so both stay reachable with a thumb. */
  .compare-selects { gap: 0.4rem; }
  .compare-vs { font-size: 0.75rem; }
  .legacy-table, .season-hist-table { font-size: 0.68rem; }
}

/* ============================================================
   COMPARE TOOL — SEARCH AS YOU TYPE
   ============================================================ */
.tsw-search-wrap { position: relative; }
.tsw-search-input {
  width: 100%; padding: 0.7rem 0.9rem; border: 2px solid var(--navy);
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.85rem;
  background: var(--navy); color: white; outline: none;
}
.tsw-search-input::placeholder { color: rgba(255,255,255,0.4); font-weight: 500; }
.tsw-search-input { min-width: 0; text-overflow: ellipsis; }
@media (max-width: 520px) {
  .tsw-search-input { padding: 0.6rem 0.5rem; font-size: 0.76rem; }
}
@media (max-width: 380px) {
  .tsw-search-input { padding: 0.55rem 0.4rem; font-size: 0.7rem; }
}
.tsw-search-list {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  /* Above the results table and the New Player button, both of which are
     positioned and were painting over the list. */
  z-index: 200;
  background: white; border: 2px solid var(--navy); border-top: none;
  max-height: 260px; overflow-y: auto;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}

/* The Compare page puts two of these side by side, and on a narrow screen
   a half-width list is unreadable. This was written unscoped, so the fixed
   210px leaked onto every other search list on the site - including Guess
   the Spur, where the list should simply match its input. */
@media (max-width: 520px) {
  .compare-selects .tsw-search-list { width: 210px; max-width: 78vw; }
  .compare-selects > .tsw-search-wrap:first-child .tsw-search-list { left: 0; right: auto; }
  .compare-selects > .tsw-search-wrap:last-child  .tsw-search-list { right: 0; left: auto; }
}
.tsw-search-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 0.9rem; cursor: pointer; border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.tsw-search-item:last-child { border-bottom: none; }
.tsw-search-item:hover { background: var(--light); }
.tsw-search-name { font-weight: 700; font-size: 0.8rem; color: var(--text); }
.tsw-search-years { font-size: 0.66rem; color: var(--muted); }
.tsw-search-empty { padding: 0.8rem; font-size: 0.78rem; color: var(--muted); text-align: center; }
.compare-count-note { font-size: 0.68rem; color: var(--muted); text-align: center; margin-top: 0.6rem; }

/* ============================================================
   GAMES HUB
   ============================================================ */
.game-card {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, #131a3d 0%, #0a0e28 55%, #070a1c 100%);
  border: 1px solid rgba(139,92,246,0.28); border-radius: 22px;
  padding: 1.4rem; margin-bottom: 1.8rem;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 1px 0 rgba(255,255,255,0.06) inset, 0 12px 40px rgba(76,29,149,0.18), 0 4px 16px rgba(0,0,0,0.4);
}
/* Extremely faint tactical-pitch lines behind the content - a centre
   circle and halfway line, purple at near-zero opacity so it reads as
   texture, never competes with real content. */
.game-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 17%, rgba(167,139,250,0.05) 17.4%, rgba(167,139,250,0.05) 17.6%, transparent 18%),
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(167,139,250,0.06) calc(50% - 0.5px), rgba(167,139,250,0.06) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.game-card > * { position: relative; z-index: 1; }
.game-card h3 { font-family: 'Source Serif 4', serif; font-size: 1.15rem; font-weight: 700; color: #fff; margin-bottom: 0.4rem; }
.game-card p.game-desc { font-size: 0.8rem; color: rgba(230,233,255,0.65); line-height: 1.65; margin-bottom: 1rem; }

/* Guess the Spur */
.gts-input-wrap { position: relative; margin-bottom: 1rem; }
.gts-guesses { display: flex; flex-direction: column; gap: 1px; background: rgba(139,92,246,0.18); border: 1px solid rgba(139,92,246,0.28); border-radius: 8px; overflow: hidden; margin-bottom: 1rem; }
.gts-guess-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 1px; background: rgba(139,92,246,0.18); }
.gts-guess-row.header { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(230,233,255,0.55); }
.gts-cell { background: #0e1230; padding: 0.6rem 0.5rem; text-align: center; font-size: 0.78rem; font-weight: 600; color: #fff; display: flex; align-items: center; justify-content: center; gap: 0.2rem; }
.gts-cell.name-cell { justify-content: flex-start; font-weight: 700; }
.gts-cell.correct { background: rgba(46,125,70,0.28); color: #6ee89a; }
.gts-cell.wrong { background: rgba(184,48,47,0.25); color: #ff8b96; }
.gts-arrow { font-weight: 900; font-size: 0.9rem; }
.gts-arrow.up { color: #6ea8ff; }
.gts-arrow.down { color: #ff6978; }
.gts-arrow.eq { color: #6ee89a; }
.gts-status { text-align: center; font-weight: 700; font-size: 0.9rem; padding: 0.8rem; border-radius: 8px; margin-bottom: 1rem; }
.gts-status.win { background: rgba(46,125,70,0.25); color: #6ee89a; }
.gts-status.playing { background: rgba(139,92,246,0.14); color: rgba(230,233,255,0.7); }
.gts-count { font-size: 0.7rem; color: rgba(230,233,255,0.5); text-align: center; margin-bottom: 0.8rem; }

/* Higher or Lower */
.hl-wrap { display: flex; flex-direction: column; gap: 1px; background: rgba(139,92,246,0.18); border: 1px solid rgba(139,92,246,0.28); border-radius: 12px; overflow: hidden; margin-bottom: 1rem; }
.hl-player { background: linear-gradient(155deg, #171d47, #0d1130); color: white; padding: 1.5rem; text-align: center; }
.hl-player.revealed { background: linear-gradient(155deg, #0d1130, #070a1c); }
.hl-player-name { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.3rem; margin-bottom: 0.3rem; }
.hl-player-pos { font-size: 0.7rem; color: rgba(255,255,255,0.5); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.8rem; }
.hl-player-stat { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 2.4rem; color: #ffd63d; }
.hl-player-stat-label { font-size: 0.68rem; color: rgba(255,255,255,0.4); letter-spacing: 0.06em; text-transform: uppercase; }
.hl-vs { background: rgba(139,92,246,0.14); text-align: center; padding: 0.5rem; font-family: 'Source Serif 4', serif; font-style: italic; font-weight: 700; color: rgba(230,233,255,0.6); font-size: 0.9rem; }
.hl-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
.hl-btn { padding: 0.9rem; border-radius: 10px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; border: 2px solid rgba(139,92,246,0.4); background: rgba(139,92,246,0.1); color: #a78bfa; cursor: pointer; transition: all 0.2s; }
.hl-btn:hover { background: rgba(139,92,246,0.3); color: #fff; }
.hl-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.hl-streak-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; color: rgba(230,233,255,0.55); padding-top: 0.6rem; border-top: 1px solid rgba(139,92,246,0.2); }
.hl-streak-num { font-weight: 700; color: #ffd63d; font-size: 1rem; text-shadow: 0 0 8px rgba(255,214,61,0.35); }

/* Trivia Quiz */
.quiz-progress { font-size: 0.68rem; color: rgba(230,233,255,0.5); text-align: center; margin-bottom: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; }
.quiz-question { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.1rem; color: #fff; margin-bottom: 1.2rem; text-align: center; line-height: 1.4; }
.quiz-options { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.quiz-opt { padding: 0.85rem 1rem; border-radius: 10px; border: 2px solid rgba(139,92,246,0.28); background: rgba(2,7,25,0.5); color: #fff; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.85rem; text-align: left; cursor: pointer; transition: all 0.2s; }
.quiz-opt:hover { border-color: #a78bfa; }
.quiz-opt.correct { border-color: #6ee89a; background: rgba(46,125,70,0.28); color: #6ee89a; }
.quiz-opt.wrong { border-color: #ff8b96; background: rgba(184,48,47,0.25); color: #ff8b96; }
.quiz-opt:disabled { cursor: default; }
.quiz-score-final { text-align: center; padding: 2rem 1rem; }
.quiz-score-final .big-score { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 3rem; color: #ffd63d; text-shadow: 0 0 14px rgba(255,214,61,0.35); }
.quiz-score-final p { font-size: 0.85rem; color: rgba(230,233,255,0.55); margin: 0.5rem 0 1.2rem; }
.quiz-retry-btn { display: inline-block; border-radius: 10px; background: linear-gradient(155deg, #7c5cd6, #4c2a99); color: white; padding: 0.7rem 1.6rem; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; border: none; cursor: pointer; box-shadow: 0 3px 10px rgba(124,92,214,0.3); }

@media (max-width: 640px) {
  .gts-guess-row { grid-template-columns: 1.3fr 0.8fr 0.8fr 0.8fr 0.8fr; }
  .gts-cell { font-size: 0.68rem; padding: 0.5rem 0.3rem; }
  .hl-player-name { font-size: 1.05rem; }
  .hl-player-stat { font-size: 1.8rem; }
}

/* ============================================================
   SPURDLE — WORDLE-STYLE GAME
   ============================================================ */
.spurdle-grid { display: flex; flex-direction: column; gap: 6px; align-items: center; margin-bottom: 1.2rem; }
.spurdle-row { display: flex; gap: 6px; }
.spurdle-tile {
  width: 42px; height: 42px;
  border: 2px solid rgba(139,92,246,0.3); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.2rem;
  text-transform: uppercase; color: #fff;
  background: rgba(2,7,25,0.5);
  transition: transform 0.15s;
}
.spurdle-tile.filled { border-color: rgba(230,233,255,0.4); }
.spurdle-tile.correct { background: #2e7d46; border-color: #2e7d46; color: white; }
.spurdle-tile.present { background: #d4c44a; border-color: #d4c44a; color: #1a1400; }
.spurdle-tile.absent { background: #3a3f52; border-color: #3a3f52; color: rgba(255,255,255,0.6); }
.spurdle-tile.pop { animation: spurdlePop 0.15s ease; }
@keyframes spurdlePop { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }
.spurdle-shake { animation: spurdleShake 0.35s; }
@keyframes spurdleShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(6px)} }

.spurdle-msg { text-align: center; font-weight: 700; font-size: 0.85rem; border-radius: 8px; padding: 0.7rem; margin-bottom: 1rem; min-height: 2.4rem; }
.spurdle-msg.win { background: rgba(46,125,70,0.25); color: #6ee89a; }
.spurdle-msg.lose { background: rgba(184,48,47,0.22); color: #ff8b96; }
.spurdle-msg.info { background: rgba(139,92,246,0.14); color: rgba(230,233,255,0.6); }

.spurdle-input-row { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1.2rem; }
.spurdle-input {
  flex: 1; max-width: 280px; border-radius: 8px;
  padding: 0.7rem; border: 2px solid rgba(139,92,246,0.4); background: rgba(2,7,25,0.5); color: #fff; text-align: center;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1rem; letter-spacing: 0.15em;
  text-transform: uppercase; outline: none;
}
.spurdle-input:focus { border-color: #a78bfa; box-shadow: 0 0 10px rgba(139,92,246,0.4); }
.spurdle-input::placeholder { color: rgba(230,233,255,0.35); }
.spurdle-submit-btn {
  background: linear-gradient(155deg, #7c5cd6, #4c2a99); color: white; border: none; border-radius: 8px; padding: 0.7rem 1.3rem;
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 3px 10px rgba(124,92,214,0.3);
}
.spurdle-submit-btn:hover { filter: brightness(1.12); }

.spurdle-keyboard { display: flex; flex-direction: column; gap: 6px; align-items: center; margin-bottom: 1rem; }
.spurdle-kb-row { display: flex; gap: 4px; }
.spurdle-key {
  min-width: 30px; height: 42px; padding: 0 6px;
  background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.2); border-radius: 4px;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.75rem;
  text-transform: uppercase; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.spurdle-key:hover { background: rgba(139,92,246,0.3); }
.spurdle-key.wide { min-width: 50px; font-size: 0.62rem; }
.spurdle-key.correct { background: #2e7d46; border-color: #2e7d46; color: white; }
.spurdle-key.present { background: #d4c44a; border-color: #d4c44a; color: #1a1400; }
.spurdle-key.absent { background: #3a3f52; border-color: #3a3f52; color: rgba(255,255,255,0.6); }

@media (max-width: 400px) {
  .spurdle-tile { width: 34px; height: 34px; font-size: 1rem; }
  .spurdle-key { min-width: 24px; height: 38px; font-size: 0.68rem; }
  .spurdle-key.wide { min-width: 40px; font-size: 0.56rem; }
}

/* ============================================================
   SPURSBOXD
   ============================================================ */
.sb-edit-btn { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: white; padding: 0.4rem 0.9rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: all 0.2s; }
.sb-edit-btn:hover { background: rgba(255,255,255,0.1); }

.sb-filters { display: flex; gap: 0.6rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.sb-filter-select, .sb-filter-search { padding: 0.55rem 0.8rem; border: 1px solid var(--border); font-family: 'Inter', sans-serif; font-size: 0.78rem; background: white; color: var(--text); }
.sb-filter-search { flex: 1; min-width: 140px; }

.sb-match-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; margin-bottom: 1.5rem; }
/* ============================================================
   SPURSBOXD MATCH CARDS
   Rebuilt on the 21st.dev ArticleCard design: rounded card, a
   gradient wash over the surface, an uppercase tracked eyebrow, a
   large serif title, and a translucent blurred pill at the bottom
   left. Hover lifts, scales slightly and deepens the shadow.

   The card's own background image is left out - these are fixtures,
   not articles, and there is no per-match art to use. The gradient
   does the work instead, and it is not decorative: the two stops are
   set by COMPETITION and the wash on top is set by RESULT, so a card
   is readable at a glance before you read a word of it.
   ============================================================ */
.sb-match-card {
  position: relative; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between; gap: 0.55rem;
  min-height: 190px; padding: 1rem; border-radius: 12px;
  color: #fff;
  background: var(--sb-comp, #313234);   /* flat, not a gradient */
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Result wash: sits over the competition gradient, under the content. */
/* Result is a solid bar down the leading edge rather than a wash over
   the fill - a wash would tint the competition colour and undo the point
   of making these flat. */
.sb-match-card::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 5px;
  z-index: 0; pointer-events: none;
  background: var(--sb-res, transparent);
}
.sb-match-card > * { position: relative; z-index: 1; }
.sb-match-card { padding-left: 1.25rem; }   /* clear of the result bar */
.sb-match-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 14px 30px rgba(0,0,0,0.55); }
.sb-match-card:hover::before { opacity: 1; }

.sb-match-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.sb-match-comp {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.9);
}

/* ---- Competition badge ----
   The five official marks are all drawn for light backgrounds: measured
   against their own card fills the dominant ink sat between 1.3:1 and
   3.1:1, i.e. from invisible to barely there. Recolouring the cards
   cannot fix it - the Premier League lion needs a card lighter than
   luminance 0.152 to reach 3:1, while the card text needs darker than
   0.183, and no purple fits that gap. So the badges sit on a small
   light chip instead, which keeps every mark in its real brand colours
   and clears 3:1 on all five (worst is Europa at 3.3:1, the black cup
   against white).

   Only competitions with a supplied mark show one; the rest simply
   have no chip rather than a broken image. */
.sb-comp-badge {
  display: none;
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 5px;
  background: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.sb-match-card.comp-pl       .sb-comp-badge { display: block; background-image: url('images/comps/pl.png'); }
.sb-match-card.comp-ucl      .sb-comp-badge { display: block; background-image: url('images/comps/ucl.svg'); }
.sb-match-card.comp-uel      .sb-comp-badge { display: block; background-image: url('images/comps/uel.png'); }
.sb-match-card.comp-facup    .sb-comp-badge { display: block; background-image: url('images/comps/facup.png'); }
.sb-match-card.comp-eflcup   .sb-comp-badge { display: block; background-image: url('images/comps/eflcup.png'); }
.sb-match-badge {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em;
  padding: 0.12rem 0.45rem; color: #fff; border-radius: 999px; flex-shrink: 0;
  background: rgba(255,255,255,0.22); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.sb-match-badge.W { background: rgba(46,125,70,0.85); }
.sb-match-badge.D { background: rgba(107,114,128,0.85); }
.sb-match-badge.L { background: rgba(184,48,47,0.85); }

.sb-match-opp { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.25rem; line-height: 1.15; color: #fff; }
/* 0.85 is a measured floor, not a taste call: below it the meta
   line drops under 4.5:1 on the lighter competition gradients. */
.sb-match-meta { font-size: 0.66rem; color: rgba(255,255,255,0.85); }
.sb-match-score {
  display: inline-block; align-self: flex-start;
  font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1rem; color: #fff;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border-radius: 8px; padding: 0.28rem 0.7rem;
  transition: background 0.3s ease;
}
.sb-match-card:hover .sb-match-score { background: rgba(255,255,255,0.3); }
.sb-match-user-stars { margin-top: 0.2rem; }

/* ---- Competition colours ----
   Flat fills, not gradients: two blended stops made neighbouring
   competitions read alike at card size. These were chosen by searching
   for the set with the largest minimum perceptual separation (CIE76)
   that still clears 4.5:1 for white card text - the closest pair is now
   dE 27 apart, up from 17. ---- */
.sb-match-card.comp-pl        { --sb-comp: #610B6A; }   /* Premier League */
.sb-match-card.comp-ucl       { --sb-comp: #112D61; }   /* Champions League */
.sb-match-card.comp-uel       { --sb-comp: #643514; }   /* Europa League */
.sb-match-card.comp-uecl      { --sb-comp: #126146; }   /* Conference League */
.sb-match-card.comp-facup     { --sb-comp: #430E1B; }   /* FA Cup */
.sb-match-card.comp-eflcup    { --sb-comp: #055E70; }   /* EFL Cup */
.sb-match-card.comp-supercup  { --sb-comp: #5E5508; }   /* Super Cup */
.sb-match-card.comp-other     { --sb-comp: #313234; }   /* Other */

/* ---- Result: solid bar on the leading edge ----
   Lighter than the badge colours on purpose. The competition fills are
   all dark, so the deeper greens and reds sat at 1.2:1 against some of
   them - the bar was there but you could not see it. These are the most
   saturated versions that stay at 3:1 or better against every fill. ---- */
.sb-match-card.res-W { --sb-res: #27C260; }
.sb-match-card.res-D { --sb-res: #AEB7C4; }
.sb-match-card.res-L { --sb-res: #FF837A; }

/* Key so the colour coding is learnable rather than guessed at. */
.sb-legend { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1rem; align-items: center; }
.sb-legend-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(230,233,255,0.45); }
.sb-legend-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.63rem; font-weight: 600; color: rgba(230,233,255,0.8);
  padding: 0.22rem 0.55rem; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
}
.sb-legend-swatch { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.sb-legend-badge {
  width: 16px; height: 16px; flex-shrink: 0; border-radius: 4px;
  background: #fff no-repeat center; background-size: 12px 12px;
}

@media (prefers-reduced-motion: reduce) {
  .sb-match-card, .sb-match-card::before, .sb-match-score { transition: none; }
  .sb-match-card:hover { transform: none; }
}

/* Star widget */
.sb-stars { position: relative; display: inline-block; font-size: 1.3rem; line-height: 1; height: 1.3rem; user-select: none; }
.sb-stars .sb-stars-back, .sb-stars .sb-stars-front { white-space: nowrap; letter-spacing: 2px; }
.sb-stars .sb-stars-back { color: #d8d8d8; }
.sb-stars .sb-stars-front { position: absolute; top: 0; left: 0; overflow: hidden; color: var(--yellow-h, #bfb038); pointer-events: none; }
.sb-stars.interactive { cursor: pointer; }
.sb-stars-zones { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; }
.sb-star-zone { flex: 1; position: relative; }
.sb-star-zone::before, .sb-star-zone::after { content: ''; position: absolute; top: 0; bottom: 0; width: 50%; }
.sb-star-zone::before { left: 0; }
.sb-star-zone::after { left: 50%; }

/* Match modal */
.sb-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(2,4,20,0.75); z-index: 500; align-items: center; justify-content: center; padding: 1.2rem; }
.sb-modal-overlay.show { display: flex; }
.sb-modal { background: linear-gradient(155deg, #141c6a 0%, #0a0e35 100%); border: 1px solid rgba(103,232,255,0.2); border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); max-width: 440px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 1.5rem; position: relative; }
.sb-modal-close { position: absolute; top: 0.8rem; right: 0.8rem; background: none; border: none; font-size: 1.3rem; cursor: pointer; color: rgba(230,233,255,0.6); }
.sb-modal-comp { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #67e8ff; margin-bottom: 0.4rem; }
.sb-modal-title { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.3rem; color: #f1f4ff; margin-bottom: 0.3rem; }
.sb-modal-meta { font-size: 0.75rem; color: rgba(230,233,255,0.55); margin-bottom: 1rem; }
.sb-modal-score-row { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; }
.sb-modal-score { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 2rem; color: #d4c44a; text-shadow: 0 0 10px rgba(212,196,74,0.25); }
.sb-modal-rate-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(230,233,255,0.55); margin-bottom: 0.5rem; }
.sb-modal-stars-big { font-size: 2.2rem; margin-bottom: 1rem; }
.sb-modal-review { width: 100%; background: rgba(2,7,25,0.55); border: 1px solid rgba(103,232,255,0.2); border-radius: 4px; color: #f1f4ff; padding: 0.7rem; font-family: 'Inter', sans-serif; font-size: 0.82rem; resize: vertical; min-height: 70px; margin-bottom: 1rem; }
.sb-modal-review::placeholder { color: rgba(230,233,255,0.4); }
.sb-modal-save-btn { width: 100%; background: var(--yellow); color: var(--navy); border: none; border-radius: 4px; padding: 0.8rem; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; }
.sb-modal-save-btn:hover { background: var(--yellow-h); }

/* Diary */
.sb-diary-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 0.8rem; align-items: center; padding: 0.8rem 1rem; border-bottom: 1px solid rgba(103,232,255,0.14); background: linear-gradient(155deg, #141c6a 0%, #0a0e35 100%); }
.sb-diary-row:first-child { border-radius: 6px 6px 0 0; }
.sb-diary-row:last-child { border-bottom: none; border-radius: 0 0 6px 6px; }
.sb-diary-date { font-size: 0.68rem; color: rgba(230,233,255,0.55); }
.sb-diary-match { font-weight: 700; font-size: 0.85rem; color: #f1f4ff; }
.sb-diary-review { font-size: 0.72rem; color: rgba(230,233,255,0.6); margin-top: 0.2rem; font-style: italic; }

/* Profile stats */
.sb-stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.6rem; margin-bottom: 1.5rem; }
.sb-stat-box { background: linear-gradient(155deg, #141c6a 0%, #0a0e35 100%); border: 1px solid rgba(103,232,255,0.16); border-radius: 4px; padding: 1.2rem 0.8rem; text-align: center; }
.sb-stat-box .n { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.8rem; color: #d4c44a; text-shadow: 0 0 10px rgba(212,196,74,0.25); }
.sb-stat-box .l { font-size: 0.62rem; color: rgba(230,233,255,0.6); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.3rem; }

/* Import/export */
.sb-io-box { background: linear-gradient(155deg, #141c6a 0%, #0a0e35 100%); border: 1px solid rgba(103,232,255,0.16); border-radius: 4px; padding: 1.2rem; margin-bottom: 1.2rem; }
.sb-io-textarea { width: 100%; background: rgba(2,7,25,0.55); border: 1px solid rgba(103,232,255,0.2); border-radius: 4px; color: #f1f4ff; padding: 0.7rem; font-family: monospace; font-size: 0.68rem; min-height: 80px; margin-bottom: 0.8rem; }
.sb-follow-card { background: linear-gradient(155deg, #141c6a 0%, #0a0e35 100%); border: 1px solid rgba(103,232,255,0.16); border-radius: 4px; padding: 1rem 1.2rem; margin-bottom: 0.8rem; display: flex; justify-content: space-between; align-items: center; color: #f1f4ff; }

.sb-user-profile-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.6rem; margin-bottom: 1rem; }
.sb-user-profile-stat { background: rgba(2,7,25,0.5); border: 1px solid rgba(103,232,255,0.16); border-radius: 4px; padding: 0.6rem 0.4rem; text-align: center; }
.sb-user-profile-stat strong { display: block; font-family: 'Source Serif 4', serif; font-size: 1.2rem; color: #d4c44a; }
.sb-user-profile-stat span { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(230,233,255,0.55); }
.sb-user-profile-actions { display: flex; gap: 0.6rem; }
.sb-user-profile-actions .sb-modal-save-btn { flex: 1; }
.sb-invite-btn { background: linear-gradient(155deg, #7f4ca7, #4a1f6e) !important; }

@media (max-width: 640px) {
  .sb-stat-grid { grid-template-columns: repeat(2,1fr); }
  .sb-match-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ============================================================
   SPURSBOXD AUTH GATE + PROFILE EDIT
   ============================================================ */
.sb-auth-wrap { max-width: 380px; margin: 0 auto; padding: 1rem 0; }
.sb-auth-box { background: white; border: 1px solid var(--border); padding: 1.5rem; }
.sb-auth-title { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.2rem; color: var(--navy); margin-bottom: 0.4rem; text-align: center; }
.sb-auth-msg { font-size: 0.78rem; color: var(--muted); text-align: center; margin-bottom: 1.2rem; line-height: 1.6; }
.sb-auth-field { margin-bottom: 0.9rem; }
.sb-auth-field label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.3rem; }
.sb-auth-field input { width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--border); font-family: 'Inter', sans-serif; font-size: 16px; }
.sb-auth-submit-btn { width: 100%; background: var(--navy); color: white; border: none; padding: 0.8rem; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; margin-top: 0.3rem; }
.sb-auth-toggle-row { text-align: center; margin-top: 1.2rem; font-size: 0.78rem; color: var(--muted); }
.sb-auth-toggle-row button { background: none; border: none; color: var(--navy); font-weight: 700; text-decoration: underline; cursor: pointer; font-size: 0.78rem; margin-left: 0.3rem; }
.sb-auth-error { color: #b8302f; font-size: 0.75rem; text-align: center; margin-top: 0.6rem; min-height: 1rem; }

.sb-avatar-upload-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.sb-avatar-preview { width: 60px; height: 60px; border-radius: 50%; background: var(--light); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }

.sb-search-results { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }

/* ============================================================
   3D TILT + LIVELY THUMBNAILS
   ============================================================ */
.article-item, .col-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
  will-change: transform;
}
.article-item:hover, .col-card:hover {
  box-shadow: 0 16px 32px rgba(10,16,64,0.2);
  z-index: 2;
  position: relative;
}

.article-item-img, .col-card-img { position: relative; overflow: hidden; }

.article-item-img span, .col-card-img span {
  display: inline-block;
  animation: tswIconFloat 3.2s ease-in-out infinite;
}
@keyframes tswIconFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(-3deg); }
}

/* diagonal light sweep on hover */
.article-item-img::before, .col-card-img::before {
  content: '';
  position: absolute; top: 0; left: -75%; width: 45%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.3), transparent);
  transform: skewX(-20deg);
  transition: left 0.75s ease;
  pointer-events: none;
}
.article-item:hover .article-item-img::before,
.col-card:hover .col-card-img::before { left: 130%; }

/* subtle depth ring so tiles feel raised even at rest */
.article-item-img::after, .col-card-img::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), inset 0 -20px 30px rgba(0,0,0,0.25);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .article-item-img span, .col-card-img span { animation: none; }
  .article-item, .col-card { transition: none; }
}

/* ============================================================
   BUILD YOUR XI — AUCTION DRAFT GAME
   ============================================================ */
.bxi-header { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem; }
.bxi-trophy-badge {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.4rem; background: radial-gradient(circle at 35% 30%, #2a2410, #0d0a02 75%);
  border: 1px solid rgba(212,196,74,0.5); box-shadow: 0 0 14px rgba(212,196,74,0.35), inset 0 0 10px rgba(212,196,74,0.15);
}

.bxi-record-bar {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 1px;
  background: rgba(139,92,246,0.22); border: 1px solid rgba(139,92,246,0.22); border-radius: 12px; overflow: hidden;
  margin-bottom: 1.1rem;
}
.bxi-record-box { background: #0e1230; padding: 1rem 0.7rem; text-align: center; }
.bxi-record-icon {
  width: 34px; height: 34px; margin: 0 auto 0.5rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.35); color: #a78bfa;
}
.bxi-record-icon svg { width: 18px; height: 18px; }
.bxi-record-icon.gold { background: rgba(212,196,74,0.14); border-color: rgba(212,196,74,0.45); color: #ffd63d; filter: drop-shadow(0 0 5px rgba(255,214,61,0.5)); }
.bxi-record-box .n { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 1.6rem; color: #fff; line-height: 1; }
.bxi-record-box .l { font-size: 0.6rem; color: rgba(230,233,255,0.55); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.3rem; font-weight: 700; }
.bxi-record-box.streak .n { color: #ffd63d; text-shadow: 0 0 10px rgba(255,214,61,0.4); }

.bxi-duel-record-line { text-align: center; font-size: 0.76rem; color: rgba(230,233,255,0.6); margin-bottom: 0.8rem; }


.bxi-info-row {
  display: flex; align-items: flex-start; gap: 0.6rem; padding-top: 1rem; margin-bottom: 1rem;
  border-top: 1px solid rgba(139,92,246,0.22);
}
.bxi-info-icon {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(139,92,246,0.18); border: 1px solid rgba(139,92,246,0.5); color: #a78bfa;
  font-size: 0.68rem; font-weight: 800; font-style: normal; margin-top: 0.1rem;
}
.bxi-info-row p { margin: 0; font-size: 0.78rem; color: rgba(230,233,255,0.65); line-height: 1.55; text-align: left; }

.bxi-join-btn {
  background: linear-gradient(155deg, #ffe066, #d4a917 55%, #b8890a); color: #12082b; border: none; border-radius: 10px;
  padding: 0.6rem 1.2rem; font-weight: 900; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em;
  cursor: pointer; box-shadow: 0 3px 10px rgba(212,169,23,0.3);
}

.bxi-budget-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 1rem; }
.bxi-budget-bar { display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(155deg, #171d47, #0d1130); border: 1px solid rgba(139,92,246,0.28); border-radius: 4px; color: white; padding: 0.7rem 0.5rem; font-family: 'Inter', sans-serif; }
.bxi-budget-bar .lbl { font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.5); white-space: nowrap; }
.bxi-budget-bar .val { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.35rem; color: #ffd63d; line-height: 1.4; }

.bxi-squads { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-bottom: 1rem; }
.bxi-squad-col h4 { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(230,233,255,0.6); margin-bottom: 0.5rem; }
.bxi-slot { background: rgba(2,7,25,0.5); border: 1px dashed rgba(139,92,246,0.3); border-radius: 4px; padding: 0.5rem 0.65rem; margin-bottom: 0.5rem; font-size: 0.78rem; line-height: 1.3; color: rgba(230,233,255,0.45); display: flex; justify-content: space-between; align-items: center; }
.bxi-slot.filled { border: 1px solid rgba(139,92,246,0.28); border-left: 4px solid #ffd63d; color: #fff; }
.bxi-slot .stars { color: #ffd63d; font-size: 0.72rem; }
.bxi-slot .price { font-weight: 700; color: #ffd63d; }

.bxi-auction-card { background: linear-gradient(155deg, #171d47 0%, #0d1130 100%); border: 1px solid rgba(139,92,246,0.28); border-radius: 6px; padding: 1.3rem 1.1rem; text-align: center; margin-bottom: 1rem; }
.bxi-player-name { display: inline; font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.5rem; color: #fff; line-height: 1.2; }
.bxi-player-pos { display: inline; font-size: 0.82rem; color: rgba(230,233,255,0.55); }
.bxi-player-pos::before { content: ' · '; }
.bxi-player-stars { font-size: 1.25rem; color: #ffd63d; margin: 0.5rem 0 0.3rem; }
.bxi-player-value { font-size: 0.85rem; color: rgba(230,233,255,0.6); margin-bottom: 1rem; }
.bxi-bid-row { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1rem; }
.bxi-bid-row button { width: 42px; height: 42px; border-radius: 8px; border: 2px solid rgba(139,92,246,0.4); background: rgba(139,92,246,0.12); color: #a78bfa; font-weight: 800; font-size: 1.3rem; cursor: pointer; }
.bxi-bid-row button:hover { background: rgba(139,92,246,0.35); color: #fff; }
.bxi-bid-amount { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.7rem; color: #fff; min-width: 90px; }
.bxi-submit-bid-btn { -webkit-appearance: none; appearance: none; width: 100%; min-height: 3rem; border-radius: 8px; background: linear-gradient(155deg, #7c5cd6, #4c2a99); color: #fff; border: none; padding: 0.85rem; font-weight: 700; font-size: 0.88rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 14px rgba(124,92,214,0.3); margin-bottom: 0.6rem; }
.bxi-submit-bid-btn:hover:not(:disabled) { filter: brightness(1.12); }
.bxi-submit-bid-btn:disabled { background: rgba(139,92,246,0.18); color: rgba(255,255,255,0.4); opacity: 1; cursor: not-allowed; box-shadow: none; }

.bxi-result-flash { border-radius: 4px; padding: 0.8rem; text-align: center; font-weight: 700; font-size: 0.85rem; margin-bottom: 1rem; }
.bxi-result-flash.won { background: rgba(46,125,70,0.22); border: 1px solid rgba(78,232,138,0.35); color: #6ee89a; }
.bxi-result-flash.lost { background: rgba(184,48,47,0.2); border: 1px solid rgba(255,105,120,0.35); color: #ff8b96; }

.bxi-rating-cards { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin-bottom: 1.2rem; }
.bxi-rating-card { background: linear-gradient(155deg, #171d47 0%, #0d1130 100%); border: 1px solid rgba(139,92,246,0.28); border-radius: 4px; padding: 1.2rem; text-align: center; }
.bxi-rating-card.you { border-top: 3px solid #ffd63d; }
.bxi-rating-card.ai { border-top: 3px solid #a78bfa; }
.bxi-rating-card .rating-num { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 2.2rem; color: #fff; }
.bxi-rating-vs { font-family: 'Source Serif 4', serif; font-style: italic; font-weight: 700; color: rgba(230,233,255,0.5); font-size: 1.1rem; }

.bxi-sim-score { text-align: center; padding: 2rem 1rem; }
.bxi-sim-score .score-line { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 2.4rem; color: #fff; margin-bottom: 0.5rem; }
.bxi-sim-score .verdict { font-size: 0.95rem; font-weight: 700; margin-bottom: 1.2rem; }
.bxi-sim-score .verdict.win { color: #6ee89a; }
.bxi-sim-score .verdict.loss { color: #ff8b96; }
.bxi-sim-score .verdict.draw { color: rgba(230,233,255,0.55); }

/* Squads stay side by side even on narrow phones now - the whole
   point of the compact redesign was fitting both without stacking. */
/* ============================================================
   BIDDING WAR + SKIP UI ADDITIONS
   ============================================================ */
.bxi-budget-bar.ai { background: linear-gradient(155deg, #141c6a, #0a0e35); margin-top: -1px; }
.bxi-skip-row { display: flex; justify-content: space-between; font-size: 0.72rem; color: rgba(230,233,255,0.5); margin-bottom: 0.9rem; padding: 0 0.2rem; }
.bxi-skip-row span strong { color: #fff; }
.bxi-war-flash { background: rgba(139,92,246,0.12); border-left: 3px solid #ffd63d; border-radius: 3px; padding: 0.8rem 1rem; font-size: 0.82rem; margin-bottom: 1rem; text-align: center; font-weight: 700; color: #fff; }
.bxi-war-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
.bxi-raise-btn { -webkit-appearance: none; appearance: none; border-radius: 4px; background: linear-gradient(155deg, #7c5cd6, #4c2a99); color: #fff; border: none; padding: 0.85rem; min-height: 3rem; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; }
.bxi-raise-btn:hover:not(:disabled) { filter: brightness(1.12); }
.bxi-raise-btn:disabled { background: rgba(139,92,246,0.18); color: rgba(255,255,255,0.4); opacity: 1; cursor: not-allowed; }
.bxi-concede-btn { -webkit-appearance: none; appearance: none; border-radius: 4px; background: rgba(184,48,47,0.14); color: #ff8b96; border: 2px solid rgba(255,105,120,0.4); padding: 0.85rem; min-height: 3rem; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; }
.bxi-concede-btn:hover { background: rgba(184,48,47,0.25); }
.bxi-skip-btn { width: 100%; background: transparent; border: none; color: rgba(230,233,255,0.55); padding: 0.4rem; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: underline; cursor: pointer; margin-top: 0.2rem; }
.bxi-skip-btn:hover:not(:disabled) { border-color: #a78bfa; color: #fff; }
.bxi-skip-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ============================================================
   THE GAUNTLET — SPEED ROUND + ROUTE CHOICE + HEAD-TO-HEAD
   ============================================================ */
.gnt-mode-select { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 1.2rem; }
.gnt-mode-btn { background: linear-gradient(155deg, #171d47, #0d1130); border: 2px solid rgba(139,92,246,0.28); padding: 1.1rem; text-align: center; cursor: pointer; transition: all 0.2s; }
.gnt-mode-btn:hover { border-color: #fff; }
.gnt-mode-btn.active { border-color: var(--yellow); background: rgba(212,196,74,0.08); }
.gnt-mode-btn .title { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1rem; color: #fff; }
.gnt-mode-btn .sub { font-size: 0.68rem; color: rgba(230,233,255,0.55); margin-top: 0.2rem; }

.gnt-diff-row { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; }
.gnt-diff-btn { flex: 1; padding: 0.6rem; border: 2px solid rgba(139,92,246,0.28); background: linear-gradient(155deg, #171d47, #0d1130); color: #fff; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; }
.gnt-diff-btn.active { border-color: #fff; background: var(--navy); color: white; }

.gnt-start-btn { width: 100%; background: var(--yellow); color: #fff; border: none; padding: 1rem; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; margin-bottom: 1rem; }
.gnt-start-btn:hover { background: var(--yellow-h, #bfb038); }

.gnt-stats-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border: 1px solid rgba(139,92,246,0.28); margin-bottom: 1.2rem; }
.gnt-stats-strip .box { background: linear-gradient(155deg, #171d47, #0d1130); padding: 0.7rem 0.4rem; text-align: center; }
.gnt-stats-strip .box .n { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.2rem; color: #fff; }
.gnt-stats-strip .box .l { font-size: 0.56rem; color: rgba(230,233,255,0.55); text-transform: uppercase; letter-spacing: 0.04em; }

/* Round 1: speed round */
.gnt-timer { text-align: center; font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 2.6rem; color: #fff; margin-bottom: 0.3rem; }
.gnt-timer.low { color: #b8302f; }
.gnt-r1-score { text-align: center; font-size: 0.78rem; color: rgba(230,233,255,0.55); margin-bottom: 1rem; }
.gnt-r1-score strong { color: #fff; font-size: 1rem; }
.gnt-question-card { background: linear-gradient(155deg, #171d47, #0d1130); border: 1px solid rgba(139,92,246,0.28); padding: 1.3rem; margin-bottom: 1rem; }
.gnt-q-cat { display: inline-block; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #a78bfa; background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.3); border-radius: 4px; padding: 0.15rem 0.5rem; margin-bottom: 0.6rem; }
.gnt-q-text { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.05rem; color: #fff; line-height: 1.4; margin-bottom: 1rem; }
.gnt-opts { display: flex; flex-direction: column; gap: 0.55rem; }
.gnt-opt-btn { padding: 0.8rem 1rem; border: 2px solid rgba(139,92,246,0.28); background: linear-gradient(155deg, #171d47, #0d1130); color: #fff; font-weight: 600; font-size: 0.85rem; text-align: left; cursor: pointer; transition: all 0.15s; }
.gnt-opt-btn:hover { border-color: #fff; }
.gnt-opt-btn.correct { border-color: #1a7a3c; background: #d4f4dd; color: #1a7a3c; }
.gnt-opt-btn.wrong { border-color: #b8302f; background: #fbe4e4; color: #b8302f; }
.gnt-tf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.gnt-tf-btn { padding: 1rem; border: 2px solid rgba(139,92,246,0.28); background: linear-gradient(155deg, #171d47, #0d1130); color: #fff; font-weight: 800; font-size: 0.95rem; text-transform: uppercase; cursor: pointer; }
.gnt-tf-btn.true-btn:hover { border-color: #1a7a3c; }
.gnt-tf-btn.false-btn:hover { border-color: #b8302f; }
.gnt-tf-btn.correct { border-color: #1a7a3c; background: #d4f4dd; color: #1a7a3c; }
.gnt-tf-btn.wrong { border-color: #b8302f; background: #fbe4e4; color: #b8302f; }
.gnt-opt-btn:disabled, .gnt-tf-btn:disabled { cursor: default; opacity: 0.7; }
.gnt-opt-btn.correct:disabled, .gnt-opt-btn.wrong:disabled,
.gnt-tf-btn.correct:disabled, .gnt-tf-btn.wrong:disabled { opacity: 1; }

/* Round 2: route choice */
.gnt-route-grid { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: 1rem; }
.gnt-route-card { background: linear-gradient(155deg, #171d47, #0d1130); border: 2px solid rgba(139,92,246,0.28); padding: 1.1rem 1.3rem; cursor: pointer; transition: all 0.2s; display: flex; justify-content: space-between; align-items: center; }
.gnt-route-card:hover { border-color: #fff; }
.gnt-route-card .name { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.05rem; color: #fff; }
.gnt-route-card .desc { font-size: 0.72rem; color: rgba(230,233,255,0.55); margin-top: 0.2rem; }
.gnt-route-card.safe { border-left: 4px solid #2563eb; }
.gnt-route-card.standard { border-left: 4px solid var(--yellow); }
.gnt-route-card.risk { border-left: 4px solid #b8302f; }
.gnt-route-reward { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 1.3rem; color: #fff; }

/* Round 3: the track */
.gnt-track-wrap { background: var(--navy-dark, #090e3a); padding: 1.3rem 1rem; margin-bottom: 1.2rem; }
.gnt-track { position: relative; height: 46px; background: rgba(255,255,255,0.06); border-radius: 4px; margin-bottom: 0.6rem; overflow: hidden; }
.gnt-track-finish { position: absolute; right: 0; top: 0; bottom: 0; width: 4px; background: var(--yellow); }
.gnt-track-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: left 0.5s ease; }
.gnt-track-marker.you { background: var(--yellow); }
.gnt-track-marker.ai { background: #b8302f; }
.gnt-track-labels { display: flex; justify-content: space-between; font-size: 0.65rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.05em; }
.gnt-turn-indicator { text-align: center; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.5rem; margin-bottom: 0.8rem; }
.gnt-turn-indicator.you-turn { background: rgba(212,196,74,0.15); color: #fff; }
.gnt-turn-indicator.ai-turn { background: rgba(184,48,47,0.1); color: #b8302f; }

.gnt-result-screen { text-align: center; padding: 2rem 1rem; }
.gnt-result-screen .big-result { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 2rem; margin-bottom: 0.5rem; }
.gnt-result-screen .big-result.win { color: #1a7a3c; }
.gnt-result-screen .big-result.lose { color: #b8302f; }
.gnt-badge-earned { display: inline-block; background: var(--yellow); color: #fff; padding: 0.5rem 1rem; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; margin: 0.8rem 0; }

.gnt-score-card { background: var(--navy); color: white; padding: 1.5rem; margin: 1.2rem 0; text-align: center; }
.gnt-score-card .sc-title { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.2rem; color: var(--yellow); margin-bottom: 0.8rem; }
.gnt-score-card .sc-row { display: flex; justify-content: space-between; font-size: 0.82rem; padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.gnt-score-card .sc-row:last-child { border-bottom: none; }
.gnt-share-btn { width: 100%; background: linear-gradient(155deg, #171d47, #0d1130); color: #fff; border: none; padding: 0.8rem; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; margin-top: 1rem; }

.gnt-leaderboard-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 0.6rem; align-items: center; padding: 0.6rem 0.9rem; border-bottom: 1px solid rgba(139,92,246,0.18); background: linear-gradient(155deg, #171d47, #0d1130); font-size: 0.8rem; }
.gnt-leaderboard-row:last-child { border-bottom: none; }
.gnt-leaderboard-row .rank { font-family: 'Source Serif 4', serif; font-weight: 800; color: rgba(230,233,255,0.55); }
.gnt-leaderboard-row.me { background: rgba(212,196,74,0.1); }

.gnt-badges-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.6rem; margin-bottom: 1.2rem; }
.gnt-badge-item { background: linear-gradient(155deg, #171d47, #0d1130); border: 1px solid rgba(139,92,246,0.28); padding: 0.8rem 0.5rem; text-align: center; }
.gnt-badge-item.locked { opacity: 0.3; }
.gnt-badge-item .icon { font-size: 1.6rem; margin-bottom: 0.3rem; }
.gnt-badge-item .name { font-size: 0.62rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.03em; }

@media (max-width: 640px) {
  .gnt-mode-select { grid-template-columns: 1fr; }
  .gnt-stats-strip { grid-template-columns: repeat(2,1fr); }
  .gnt-badges-grid { grid-template-columns: repeat(2,1fr); }
}

/* ============================================================
   GAUNTLET — START GATES + BIGGER FINAL ROUND DISPLAY
   ============================================================ */
.gnt-round-gate { text-align: center; padding: 1.5rem 1rem; }
.gnt-round-gate .gate-title { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 1.4rem; color: #fff; margin-bottom: 0.5rem; }
.gnt-round-gate .gate-desc { font-size: 0.85rem; color: rgba(230,233,255,0.55); line-height: 1.6; margin-bottom: 1.3rem; max-width: 380px; margin-left: auto; margin-right: auto; }

.gnt-dual-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.gnt-dual-score .side { text-align: center; }
.gnt-dual-score .side .lbl { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(230,233,255,0.55); margin-bottom: 0.2rem; }
.gnt-dual-score .side .val { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 3.2rem; line-height: 1; }
.gnt-dual-score .side.you .val { color: #fff; }
.gnt-dual-score .side.ai .val { color: #b8302f; }
.gnt-dual-score .vs { font-family: 'Source Serif 4', serif; font-style: italic; font-weight: 700; color: rgba(230,233,255,0.55); font-size: 1.1rem; }

.gnt-chase-bar-wrap { background: var(--navy-dark, #090e3a); padding: 1rem; margin-bottom: 1rem; }
.gnt-chase-bar { position: relative; height: 40px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; margin-bottom: 0.4rem; }
.gnt-chase-bar-caught-zone { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #b8302f; }
.gnt-chase-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: left 0.5s ease; }
.gnt-chase-marker.you-marker { background: var(--yellow); right: 4%; left: auto !important; transform: translate(50%, -50%); }
.gnt-chase-marker.ai-marker { background: #b8302f; }
.gnt-chase-label { text-align: center; font-size: 0.65rem; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.05em; }

/* ============================================================
   NEWS PAGE — FILTERABLE SUBSECTIONS
   ============================================================ */
.news-filter-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.news-filter-btn {
  background: linear-gradient(155deg, #141c6a 0%, #0a0e35 100%); border: 1px solid rgba(103,232,255,0.22);
  color: rgba(230,233,255,0.75); padding: 0.55rem 1rem; font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 0.78rem; cursor: pointer; transition: all 0.2s; border-radius: 4px;
}
.news-filter-btn:hover { border-color: #67e8ff; color: #fff; }
.news-filter-btn.active { background: linear-gradient(155deg, #2a3390, #141c6a); border-color: #d4c44a; color: #ffd63d; }

.news-toolbar { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; margin-bottom: 1.5rem; }
.news-toolbar-field { display: flex; align-items: center; gap: 0.5rem; }
.news-toolbar-field label { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(230,233,255,0.55); }
.news-toolbar-field select {
  background: linear-gradient(155deg, #141c6a 0%, #0a0e35 100%); border: 1px solid rgba(103,232,255,0.22);
  color: #fff; padding: 0.4rem 0.6rem; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.76rem;
  border-radius: 4px; cursor: pointer;
}
.news-toolbar-field select:hover, .news-toolbar-field select:focus { border-color: #67e8ff; outline: none; }
.news-toolbar-field select option { background: #0a0e35; color: #fff; }

/* ============================================================
   "WRITE FOR US" CTA CARD
   ============================================================ */
.cta-write-img { background: linear-gradient(135deg, #7a6a1a, #3a3008) !important; }
.cta-write-item .article-item-title, .cta-write-item .col-card-title { color: #ffd63d; }
.cta-write-item:hover { background: var(--light); }

/* ============================================================
   SPURSBOXD — COMMUNITY RATINGS & REVIEWS
   ============================================================ */
.sb-match-community { display: flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; color: rgba(230,233,255,0.5); margin-top: 0.3rem; padding-top: 0.4rem; border-top: 1px solid rgba(103,232,255,0.14); }

.sb-modal-community { border-top: 1px solid rgba(103,232,255,0.14); margin-top: 1.2rem; padding-top: 1.2rem; }
.sb-modal-community-avg { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: rgba(230,233,255,0.85); margin-bottom: 1rem; }
.sb-reviews-title { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; margin-bottom: 0.7rem; }
.sb-reviews-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.9rem; }
.sb-review-row { display: flex; gap: 0.7rem; }
.sb-review-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: var(--yellow); font-weight: 800; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.sb-review-body { flex: 1; }
.sb-review-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.2rem; }
.sb-review-username { font-weight: 700; font-size: 0.78rem; color: #f1f4ff; }
.sb-review-text { font-size: 0.8rem; color: rgba(230,233,255,0.85); line-height: 1.5; font-style: italic; margin-bottom: 0.2rem; }
.sb-review-date { font-size: 0.62rem; color: rgba(230,233,255,0.5); }

/* ============================================================
   XP / LEVEL / PRESTIGE SYSTEM
   ============================================================ */
.xp-widget { background: white; border: 1px solid var(--border); padding: 1.2rem; margin-bottom: 1.5rem; }
.xp-widget-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.xp-widget-rank { display: flex; align-items: center; gap: 0.5rem; }
.xp-widget-level { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1rem; color: var(--navy); }
.xp-widget-badges-count { font-size: 0.68rem; color: var(--muted); }
.xp-bar-track { height: 10px; background: var(--light); border-radius: 5px; overflow: hidden; margin-bottom: 0.4rem; }
.xp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--yellow-h,#bfb038), var(--yellow)); border-radius: 5px; transition: width 0.5s ease; }
.xp-bar-label { font-size: 0.68rem; color: rgba(230,233,255,0.6); text-align: center; margin-bottom: 0.8rem; }
.xp-prestige-btn { width: 100%; background: var(--navy); color: var(--yellow); border: none; padding: 0.8rem; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; margin-bottom: 0.8rem; animation: xpPrestigePulse 1.6s ease-in-out infinite; }
@keyframes xpPrestigePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(212,196,74,0.5); } 50% { box-shadow: 0 0 0 8px rgba(212,196,74,0); } }
.xp-guest-note { font-size: 0.72rem; color: var(--muted); background: var(--light); padding: 0.7rem; margin-bottom: 0.8rem; line-height: 1.5; }
.xp-guest-note a { color: var(--navy); font-weight: 700; }

.xp-badges-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.5rem; }
.xp-badge-item { background: var(--light); padding: 0.6rem 0.3rem; text-align: center; }
.xp-badge-item.locked { opacity: 0.35; filter: grayscale(1); }
.xp-badge-item .icon { width: 34px; height: 34px; margin: 0 auto 0.3rem; }
.xp-badge-item .name { font-size: 0.56rem; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.2; }

/* Prestige icon — animated, shown next to usernames everywhere */
.xp-prestige-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--prestige-color, #8a8a8a);
  font-weight: 800;
  animation: xpPrestigeSpin 3s linear infinite, xpPrestigeGlow 2s ease-in-out infinite;
  filter: drop-shadow(0 0 3px var(--prestige-color, #8a8a8a));
}
@keyframes xpPrestigeSpin { 0%,92%,100% { transform: rotate(0deg); } 96% { transform: rotate(15deg); } }
@keyframes xpPrestigeGlow { 0%,100% { opacity: 0.85; } 50% { opacity: 1; filter: drop-shadow(0 0 6px var(--prestige-color, #8a8a8a)); } }
.xp-prestige-icon.xp-prestige-rainbow {
  animation: xpPrestigeSpin 3s linear infinite, xpRainbowShift 3s linear infinite;
}
@keyframes xpRainbowShift {
  0% { color: #ff004c; filter: drop-shadow(0 0 6px #ff004c); }
  20% { color: #ff9500; filter: drop-shadow(0 0 6px #ff9500); }
  40% { color: #ffe600; filter: drop-shadow(0 0 6px #ffe600); }
  60% { color: #35d46a; filter: drop-shadow(0 0 6px #35d46a); }
  80% { color: #4a90ff; filter: drop-shadow(0 0 6px #4a90ff); }
  100% { color: #ff004c; filter: drop-shadow(0 0 6px #ff004c); }
}
.xp-level-badge { background: var(--navy); color: var(--yellow); padding: 0.1rem 0.4rem; border-radius: 3px; font-weight: 700; font-family: 'Inter', sans-serif; }

/* Toasts */
.xp-toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 999; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
.xp-toast {
  background: var(--navy); color: white; padding: 0.7rem 1.1rem; display: flex; flex-direction: column; gap: 0.1rem;
  min-width: 180px; box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  transform: translateX(120%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease;
}
.xp-toast.show { transform: translateX(0); opacity: 1; }
.xp-toast-amount { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 0.95rem; color: var(--yellow); }
.xp-toast-level { font-size: 0.68rem; color: rgba(255,255,255,0.7); }
.xp-toast-badge { flex-direction: row; align-items: center; gap: 0.7rem; }
.xp-toast-badge-icon { width: 42px; height: 42px; flex-shrink: 0; }

@media (max-width: 500px) {
  .xp-badges-grid { grid-template-columns: repeat(3,1fr); }
  .xp-toast-container { left: 1rem; right: 1rem; align-items: stretch; }
  .xp-toast { min-width: 0; }
}

/* ============================================================
   PROFILE TAB — full badge collection with progress bars
   ============================================================ */
.xp-profile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; flex-wrap: wrap; gap: 0.8rem; }
.xp-profile-rank { display: flex; align-items: center; gap: 0.8rem; }
.xp-profile-level { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 1.2rem; color: #fff; }
.xp-profile-sub { font-size: 0.7rem; color: var(--muted); }
.xp-profile-badge-count { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.1rem; color: #fff; text-align: right; }
.xp-profile-badge-count span { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 0.6rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

.xp-profile-category { margin-top: 1.6rem; color: #fff; }
.xp-profile-category h3 { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; border-bottom: 2px solid var(--yellow); padding-bottom: 0.5rem; margin-bottom: 0.9rem; }
.xp-profile-badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
.xp-profile-badge-card { background: white; border: 1px solid var(--border); padding: 0.8rem 0.6rem; text-align: center; }
.xp-profile-badge-card.locked { background: var(--light); }
.xp-profile-badge-card.locked .icon { opacity: 0.35; filter: grayscale(1); }
.xp-profile-badge-card .icon { width: 40px; height: 40px; margin: 0 auto 0.4rem; }
.xp-profile-badge-card .name { font-size: 0.68rem; font-weight: 800; color: var(--navy); margin-bottom: 0.2rem; line-height: 1.2; }
.xp-profile-badge-card .desc { font-size: 0.6rem; color: var(--muted); line-height: 1.4; min-height: 2.2em; }
.xp-badge-progress { margin-top: 0.5rem; }
.xp-badge-progress-track { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 0.2rem; }
.xp-badge-progress-fill { height: 100%; background: var(--yellow-h, #bfb038); }
.xp-badge-progress-text { font-size: 0.58rem; color: var(--muted); font-weight: 700; }

@media (max-width: 640px) {
  .xp-profile-badge-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   DUEL A FRIEND — real-time 1v1 quiz via Supabase Realtime
   ============================================================ */
.duel-lobby { text-align: center; padding: 1rem; }
.duel-lobby-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 1.2rem; }
.duel-choice-card { background: linear-gradient(155deg, #171d47 0%, #0d1130 100%); border: 1px solid rgba(139,92,246,0.28); border-radius: 12px; padding: 1.3rem 1rem; cursor: pointer; transition: all 0.2s; }
.duel-choice-card:hover { border-color: #a78bfa; box-shadow: 0 0 12px rgba(139,92,246,0.3); }
.duel-choice-card .title { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1rem; color: #fff; margin-bottom: 0.3rem; }
.duel-choice-card .sub { font-size: 0.7rem; color: rgba(230,233,255,0.55); }

.duel-code-input-row { display: flex; gap: 0.6rem; margin-bottom: 1rem; }
.duel-code-input {
  flex: 1; padding: 0.8rem; border-radius: 10px; background: rgba(2,7,25,0.55); border: 2px solid rgba(139,92,246,0.3);
  color: #fff; text-align: center; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.3rem; letter-spacing: 0.3em; text-transform: uppercase;
}
.duel-code-input:focus { outline: none; border-color: #a78bfa; box-shadow: 0 0 10px rgba(139,92,246,0.4); }
.duel-code-input::placeholder { color: rgba(230,233,255,0.3); }
.duel-code-display { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 2.6rem; letter-spacing: 0.25em; color: #ffd63d; text-shadow: 0 0 16px rgba(255,214,61,0.4); background: rgba(2,7,25,0.55); border: 1px solid rgba(212,196,74,0.3); border-radius: 12px; padding: 1.2rem; margin-bottom: 1rem; }
.duel-copy-link-btn { background: linear-gradient(155deg, #ffe066, #d4a917 55%, #b8890a); color: #12082b; border: none; border-radius: 10px; padding: 0.7rem 1.2rem; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; margin-bottom: 1rem; box-shadow: 0 3px 10px rgba(212,169,23,0.3); }

.duel-waiting { text-align: center; padding: 2rem 1rem; }
.duel-waiting-spinner { width: 40px; height: 40px; border: 4px solid rgba(139,92,246,0.2); border-top-color: #a78bfa; border-radius: 50%; margin: 0 auto 1rem; animation: duelSpin 1s linear infinite; }
@keyframes duelSpin { to { transform: rotate(360deg); } }

.duel-vs-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.8rem; margin-bottom: 1.2rem; }
.duel-player-box { text-align: center; background: linear-gradient(155deg, #171d47, #0d1130); border: 1px solid rgba(139,92,246,0.28); border-radius: 12px; padding: 0.9rem 0.5rem; }
.duel-player-box.you { border-top: 3px solid #ffd63d; }
.duel-player-box.opponent { border-top: 3px solid #a78bfa; }
.duel-player-name { font-weight: 700; font-size: 0.82rem; color: #fff; margin-bottom: 0.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-player-score { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 1.7rem; color: #fff; }
.duel-vs-label { font-family: 'Source Serif 4', serif; font-style: italic; font-weight: 700; color: rgba(230,233,255,0.5); font-size: 0.95rem; }

.duel-question-progress { text-align: center; font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.6rem; }
.duel-timer-bar { height: 6px; background: rgba(139,92,246,0.15); border-radius: 3px; overflow: hidden; margin-bottom: 1rem; }
.duel-timer-fill { height: 100%; background: var(--yellow-h,#bfb038); transition: width 1s linear; }
.duel-opponent-status { text-align: center; font-size: 0.72rem; color: var(--muted); margin-top: 0.6rem; min-height: 1.2rem; }

.duel-result-screen { text-align: center; padding: 2rem 1rem; }
.duel-result-verdict { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 1.7rem; margin-bottom: 1rem; }
.duel-result-verdict.win { color: #6ee89a; }
.duel-result-verdict.lose { color: #ff8b96; }
.duel-result-verdict.draw { color: rgba(230,233,255,0.6); }

@media (max-width: 500px) {
  .duel-lobby-choice { grid-template-columns: 1fr; }
  .duel-code-display { font-size: 1.8rem; letter-spacing: 0.18em; }
}

/* ============================================================
   TOP TENS — name-the-top-10 ranked list game
   ============================================================ */
.tt-setup-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); border: 1px solid rgba(139,92,246,0.28); margin-bottom: 1.2rem; }
.tt-setup-stats .box { background: linear-gradient(155deg, #171d47, #0d1130); padding: 0.7rem 0.4rem; text-align: center; }
.tt-setup-stats .box .n { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.2rem; color: #fff; }
.tt-setup-stats .box .l { font-size: 0.56rem; color: rgba(230,233,255,0.55); text-transform: uppercase; letter-spacing: 0.04em; }

.tt-diff-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.tt-diff-btn { flex: 1; padding: 0.6rem; border: 2px solid rgba(139,92,246,0.28); background: linear-gradient(155deg, #171d47, #0d1130); color: #fff; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; cursor: pointer; }
.tt-diff-btn.active { border-color: #fff; background: var(--navy); color: white; }

.tt-mode-btns { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.2rem; }
.tt-mode-launch-btn { background: var(--yellow); color: #fff; border: none; padding: 0.9rem; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
.tt-mode-launch-btn.secondary { background: var(--navy); color: var(--yellow); }


.tt-play-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.8rem; gap: 0.8rem; }
.tt-category-title { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 1.05rem; color: #fff; line-height: 1.3; }
.tt-play-stats { display: flex; gap: 0.8rem; font-size: 0.68rem; color: rgba(230,233,255,0.55); flex-wrap: wrap; margin-bottom: 0.8rem; }
.tt-play-stats strong { color: #fff; font-family: 'Source Serif 4', serif; font-size: 0.95rem; }

.tt-rank-slots { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.tt-rank-slot { display: flex; align-items: center; gap: 0.8rem; background: rgba(2,7,25,0.5); border: 1px dashed rgba(139,92,246,0.3); border-radius: 8px; color: #fff; padding: 0.55rem 0.8rem; min-height: 2.3rem; transition: all 0.25s ease; }
.tt-rank-slot .rank-num { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 1.1rem; color: rgba(230,233,255,0.55); width: 22px; flex-shrink: 0; }
.tt-rank-slot.filled { background: linear-gradient(155deg, #171d47, #0d1130); border: 1px solid rgba(139,92,246,0.28); border-left: 4px solid var(--yellow); }
.tt-rank-slot.filled .rank-num { color: #fff; }
.tt-rank-slot .rank-name { font-weight: 700; font-size: 0.85rem; color: #fff; }
.tt-rank-slot.pop { animation: ttPop 0.4s ease; }
@keyframes ttPop { 0% { transform: scale(1); } 40% { transform: scale(1.03); background: rgba(212,196,74,0.25); } 100% { transform: scale(1); } }

.tt-input-row { display: flex; gap: 0.6rem; margin-bottom: 0.6rem; }
.tt-input { flex: 1; padding: 0.75rem; border: 2px solid var(--navy); font-family: 'Inter', sans-serif; font-size: 16px; }
.tt-submit-btn { background: var(--navy); color: white; border: none; padding: 0.75rem 1.2rem; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }

.tt-feedback { min-height: 1.4rem; font-size: 0.8rem; font-weight: 700; margin-bottom: 1rem; text-align: center; }
.tt-feedback.correct { color: #1a7a3c; }
.tt-feedback.wrong { color: #b8302f; }
.tt-feedback.info { color: rgba(230,233,255,0.55); }

.tt-hint-buttons { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.5rem; }
.tt-hint-btn { background: linear-gradient(155deg, #171d47, #0d1130); border: 1px solid rgba(139,92,246,0.28); padding: 0.55rem 0.5rem; font-size: 0.66rem; font-weight: 700; color: #fff; cursor: pointer; text-transform: uppercase; letter-spacing: 0.02em; }
.tt-hint-btn:hover:not(:disabled) { border-color: #fff; }
.tt-hint-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.tt-hint-btn .cost { color: #b8302f; font-weight: 800; }

.tt-result-screen { text-align: center; padding: 1.5rem 1rem; }
.tt-result-verdict { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 1.5rem; margin-bottom: 0.8rem; }
.tt-result-verdict.perfect { color: #d4af00; }
.tt-result-verdict.win { color: #1a7a3c; }
.tt-result-verdict.partial { color: #fff; }
.tt-result-verdict.lose { color: #b8302f; }
.tt-result-stats-row { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem; }
.tt-result-stats-row .stat { text-align: center; }
.tt-result-stats-row .stat .n { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 1.6rem; color: #fff; }
.tt-result-stats-row .stat .l { font-size: 0.62rem; color: rgba(230,233,255,0.55); text-transform: uppercase; letter-spacing: 0.04em; }
.tt-missed-list { text-align: left; background: rgba(2,7,25,0.5); border-radius: 8px; color: rgba(230,233,255,0.8); padding: 1rem; margin-top: 1rem; font-size: 0.8rem; }
.tt-missed-list .title { font-weight: 800; color: #fff; margin-bottom: 0.5rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }

.tt-stats-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.6rem; margin-bottom: 1.2rem; }
.tt-stats-grid .box { background: linear-gradient(155deg, #171d47, #0d1130); border: 1px solid rgba(139,92,246,0.28); padding: 0.8rem; text-align: center; }
.tt-stats-grid .box .n { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 1.3rem; color: #fff; }
.tt-stats-grid .box .l { font-size: 0.62rem; color: rgba(230,233,255,0.55); text-transform: uppercase; letter-spacing: 0.03em; }
.tt-missed-row { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px solid rgba(139,92,246,0.18); font-size: 0.8rem; }
.tt-empty-msg { padding: 1rem; text-align: center; font-size: 0.8rem; color: rgba(230,233,255,0.55); }

@media (max-width: 500px) {
  .tt-setup-stats { grid-template-columns: repeat(3,1fr); }
  .tt-hint-buttons { grid-template-columns: 1fr; }
  .tt-result-stats-row { gap: 1.2rem; }
}

/* ============================================================
   MULTIPLAYER REMATCH FLOW — shared across all duel modes
   ============================================================ */
.duel-rematch-status { min-height: 1.3rem; font-size: 0.78rem; font-weight: 700; color: #fff; margin-bottom: 0.6rem; }
.duel-leave-btn { width: 100%; background: none; border: 1px solid rgba(139,92,246,0.3); color: rgba(230,233,255,0.6); border-radius: 10px; padding: 0.6rem; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; margin-top: 0.5rem; }
.duel-leave-btn.compact { width: auto; display: inline-block; padding: 0.4rem 0.9rem; font-size: 0.68rem; margin-top: 0; margin-bottom: 1rem; border-radius: 7px; }
.duel-leave-btn:hover { border-color: #a78bfa; color: #fff; }

/* TSW 5-A-Side Duel — visible standing-bid negotiation text */
.bxi-standing-bid-text { text-align: center; font-size: 0.85rem; font-weight: 700; color: #fff; margin-bottom: 1rem; line-height: 1.5; }

/* Connection error feedback for multiplayer waiting rooms */
.duel-connection-error { background: #fbe4e4; color: #b8302f; padding: 0.8rem 1rem; margin-top: 1rem; font-size: 0.78rem; font-weight: 600; line-height: 1.5; text-align: left; }

/* ============================================================
   LIVE MATCH SIMULATION — fast-forwarded 90 minutes
   ============================================================ */
.bxi-sim-live-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-bottom: 0.8rem; }
.bxi-sim-live-team { text-align: center; }
.bxi-sim-live-team .name { font-size: 0.78rem; font-weight: 700; color: #fff; margin-bottom: 0.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bxi-sim-live-team .score { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 2.4rem; color: #fff; line-height: 1; }
.bxi-sim-live-clock { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.1rem; color: #fff; background: linear-gradient(155deg, #7c5cd6, #4c2a99); padding: 0.5rem 0.9rem; border-radius: 4px; }

.bxi-sim-progress-track { height: 6px; background: rgba(139,92,246,0.15); border-radius: 3px; overflow: hidden; margin-bottom: 1.2rem; }
.bxi-sim-progress-fill { height: 100%; background: var(--yellow-h, #bfb038); transition: width 0.1s linear; }

.bxi-sim-goal-banner { text-align: center; font-family: 'Source Serif 4', serif; font-weight: 800; font-size: 1.1rem; padding: 0; max-height: 0; overflow: hidden; opacity: 0; transition: all 0.3s ease; color: #fff; border-radius: 6px; }
.bxi-sim-goal-banner.show { max-height: 4rem; opacity: 1; padding: 0.8rem; margin-bottom: 1rem; }
.bxi-sim-goal-banner.mine { background: rgba(46,125,70,0.28); color: #6ee89a; }
.bxi-sim-goal-banner.theirs { background: rgba(184,48,47,0.25); color: #ff8b96; }

.bxi-sim-feed { display: flex; flex-direction: column; gap: 0.4rem; max-height: 180px; overflow-y: auto; }
.bxi-sim-feed-row { background: rgba(139,92,246,0.1); border-radius: 6px; padding: 0.5rem 0.8rem; font-size: 0.78rem; font-weight: 600; color: #fff; }

/* ============================================================
   WIN THE TREBLE — dark mode, EA FC Draft style. Scoped entirely
   to .wtt-panel so it doesn't affect the rest of the site.
   ============================================================ */
.wtt-panel { position: relative; overflow: hidden; background: #0e1555; color: #ffffff; margin: -1.5rem; padding: 1.5rem; min-height: 500px; }
.wtt-panel h3, .wtt-panel .game-desc { display: none; } /* this mode speaks through visuals, not headers */

.wtt-logo, .wtt-screen { position: relative; z-index: 10; }
.wtt-screen { display: none; }
.wtt-screen.active { display: block; animation: wttFadeIn 0.35s ease; }
@keyframes wttFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.wtt-logo { text-align: center; font-family: 'Russo One', sans-serif; font-weight: 800; font-size: 1.5rem; color: #d4c44a; letter-spacing: -0.01em; margin-bottom: 1.4rem; }
.wtt-logo span { color: #ffffff; }

/* Setup */
.wtt-setup-section { margin-bottom: 1.6rem; }
.wtt-setup-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: #a9adda; margin-bottom: 0.6rem; font-weight: 700; }
.wtt-club-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.5rem; }
.wtt-pick-btn { background: #141c6a; border: 2px solid #26307d; color: #ffffff; padding: 0.6rem 0.4rem; font-size: 0.66rem; font-weight: 700; text-align: center; cursor: pointer; transition: all 0.15s; }
.wtt-pick-btn:hover { border-color: #d4c44a; }
.wtt-pick-btn.selected { border-color: #d4c44a; background: #3a3418; color: #d4c44a; }
.wtt-name-input { width: 100%; background: #141c6a; border: 2px solid #26307d; color: #ffffff; padding: 0.8rem; font-size: 16px; font-weight: 700; text-align: center; }
.wtt-name-input:focus { outline: none; border-color: #d4c44a; }
.wtt-formation-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.6rem; }
.wtt-diff-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.5rem; }
.wtt-start-btn { width: 100%; background: #d4c44a; color: #0e1555; border: none; padding: 1.1rem; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; margin-top: 0.6rem; }

/* Scoped animated background - same visual recipe as Battle's page-wide
   one, but position:absolute + contained by .wtt-panel's own
   position:relative/overflow:hidden above, rather than position:fixed
   spanning the whole viewport. Keeps this dark, animated "gaming" feel
   isolated to the Treble panel without touching the rest of games.html,
   which stays light-themed for every other mini-game. */
.wtt-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.wtt-aurora {
  position: absolute; width: 160%; height: 160%; left: -30%; top: -30%;
  background:
    radial-gradient(circle at 20% 40%, rgba(0,68,255,.26), transparent 25%),
    radial-gradient(circle at 75% 25%, rgba(157,0,255,.28), transparent 27%),
    radial-gradient(circle at 80% 75%, rgba(255,0,190,.2), transparent 28%);
  filter: blur(45px);
  animation: wttAuroraMove 18s ease-in-out infinite alternate;
}
@keyframes wttAuroraMove {
  0% { transform: translate3d(-3%,-2%,0) scale(1); }
  35% { transform: translate3d(5%,3%,0) scale(1.08); }
  70% { transform: translate3d(-2%,7%,0) scale(1.12); }
  100% { transform: translate3d(7%,-3%,0) scale(1.05); }
}
.wtt-streaks {
  position: absolute; inset: -40%; opacity: .32;
  background: repeating-linear-gradient(132deg,
    transparent 0px, transparent 48px,
    rgba(81,60,255,.07) 49px, rgba(165,40,255,.13) 51px,
    transparent 54px, transparent 105px);
  animation: wttStreakMove 16s linear infinite;
}
@keyframes wttStreakMove {
  from { transform: translate3d(-80px,-80px,0); }
  to { transform: translate3d(120px,120px,0); }
}
.wtt-glow-blue {
  position: absolute; width: 380px; height: 380px; left: -200px; top: 20%; border-radius: 50%; filter: blur(70px); opacity: .55;
  background: radial-gradient(circle, rgba(0,71,255,.6), rgba(0,45,190,.18) 45%, transparent 72%);
  animation: wttBlueGlowMove 14s ease-in-out infinite alternate;
}
@keyframes wttBlueGlowMove { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(120px,80px,0) scale(1.2); } }
.wtt-glow-purple {
  position: absolute; width: 420px; height: 420px; right: -220px; top: 6%; border-radius: 50%; filter: blur(70px); opacity: .55;
  background: radial-gradient(circle, rgba(133,0,255,.6), rgba(96,0,200,.18) 45%, transparent 72%);
  animation: wttPurpleGlowMove 18s ease-in-out infinite alternate;
}
@keyframes wttPurpleGlowMove { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-110px,130px,0) scale(1.18); } }
.wtt-particles { position: absolute; inset: 0; overflow: hidden; }
.wtt-particle {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(190,150,255,.75);
  box-shadow: 0 0 4px rgba(185,110,255,.85), 0 0 8px rgba(140,40,255,.45);
  animation: wttParticleFloat var(--duration) linear infinite;
  animation-delay: var(--delay);
}
@keyframes wttParticleFloat {
  0% { transform: translate3d(0,60px,0); opacity: 0; }
  15% { opacity: .75; }
  75% { opacity: .45; }
  100% { transform: translate3d(var(--drift),-420px,0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wtt-aurora, .wtt-streaks, .wtt-glow-blue, .wtt-glow-purple, .wtt-particle { animation: none !important; }
}

/* Club tiles - replace the plain .wtt-pick-btn for club selection with
   real per-club colour identity. Same CSS variable convention as the
   Battle Collection club rows (--club-a/b/c, --club-bar, --c1/--c2) so
   both features share one visual language for club colour, driven by
   the exact same tswClubColors() data - no colours are duplicated or
   hard-coded here, only assigned inline per tile from that shared source.  */
.wtt-club-tile {
  position: relative; display: flex; align-items: center; gap: 0.7rem; min-height: 4.4rem;
  padding: 0.7rem 0.85rem; border-radius: 8px; cursor: pointer; overflow: hidden;
  border: 1px solid var(--club-bar); color: #fff;
  background: linear-gradient(110deg, var(--club-a) 0%, var(--club-b) 52%, var(--club-c) 100%);
  box-shadow: inset 0 0 18px rgba(255,255,255,.035), 0 0 8px rgba(0,0,0,.25);
  transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease;
}
.wtt-club-tile:hover { transform: translateY(-2px); filter: brightness(1.09); box-shadow: inset 0 0 20px rgba(255,255,255,.05), 0 0 14px rgba(255,255,255,.14); }
.wtt-club-tile:active { transform: scale(0.98); }
.wtt-club-tile .wtt-club-ball {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; position: relative; z-index: 2;
  border: 2px solid rgba(255,255,255,.85);
  background: linear-gradient(90deg, var(--c1) 0 50%, var(--c2) 50% 100%);
  box-shadow: 0 2px 7px rgba(0,0,0,.35), inset 0 0 6px rgba(255,255,255,.15);
}
.wtt-club-tile .wtt-club-tile-name { position: relative; z-index: 2; font-size: 0.82rem; font-weight: 800; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.wtt-club-tile.selected {
  transform: scale(1.015); box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 0 16px var(--club-bar), inset 0 0 22px rgba(255,255,255,.08);
}
.wtt-club-tile.selected::after {
  content: "\2713"; position: absolute; right: 8px; top: 6px; z-index: 5; width: 20px; height: 20px;
  display: grid; place-items: center; border-radius: 50%; color: #071019; background: #fff; font-size: 0.68rem; font-weight: 900;
}

/* Formation tiles - dark purple game tiles with a small pitch-dot icon
   built entirely from each formation's real DEF/MID/FWD split (see
   wttFormationIconHTML in wtt-live.js), not a fixed placeholder pattern. */
.wtt-formation-tile {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 0.9rem;
  min-height: 4.6rem; padding: 0.7rem; border-radius: 9px; cursor: pointer; color: #fff;
  border: 1px solid #7234c9;
  background: linear-gradient(120deg, rgba(30,12,61,.8), rgba(7,10,35,.92));
  box-shadow: inset 0 0 20px rgba(137,44,255,.04);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.wtt-formation-tile:hover { transform: translateY(-2px); border-color: #b142ff; box-shadow: 0 0 14px rgba(177,66,255,.2); }
.wtt-formation-tile:active { transform: scale(0.98); }
.wtt-formation-tile.selected {
  border-color: #d747ff;
  background: linear-gradient(120deg, rgba(93,17,141,.6), rgba(12,10,44,.95));
  box-shadow: 0 0 20px rgba(204,45,255,.33);
}
.wtt-pitch-icon { flex: 0 0 auto; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.wtt-pitch-row { display: flex; gap: 3px; justify-content: center; }
.wtt-pitch-dot { width: 6px; height: 6px; border-radius: 50%; background: #8d3be0; box-shadow: 0 0 5px rgba(141,59,224,.55); }
.wtt-pitch-dot.gk { background: #d4c44a; box-shadow: 0 0 5px rgba(212,196,74,.55); }
.wtt-formation-tile.selected .wtt-pitch-dot { background: #e766ff; box-shadow: 0 0 6px rgba(231,102,255,.7); }
.wtt-formation-tile.selected .wtt-pitch-dot.gk { background: #f0dc7a; }
.wtt-formation-name { font-size: 0.9rem; font-weight: 900; }

@media (max-width: 640px) {
  .wtt-club-tile { min-height: 4rem; gap: 0.55rem; padding: 0.6rem 0.65rem; }
  .wtt-club-tile .wtt-club-ball { flex-basis: 30px; width: 30px; height: 30px; }
  .wtt-club-tile .wtt-club-tile-name { font-size: 0.74rem; }
  .wtt-formation-tile { min-height: 4rem; gap: 0.7rem; }
}
.wtt-start-btn:hover { background: #fff; }
.wtt-start-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Draft screen */
.wtt-draft-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: 0.72rem; color: #a9adda; }
.wtt-draft-header strong { color: #d4c44a; }
.wtt-formation-slots { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-bottom: 1.2rem; }
.wtt-slot { width: 78px; background: #141c6a; border: 2px dashed #26307d; padding: 0.5rem 0.3rem; text-align: center; }
.wtt-slot.filled { border-style: solid; border-color: #d4c44a; background: #0f1a14; }
.wtt-slot .pos { font-size: 0.56rem; color: #a9adda; text-transform: uppercase; letter-spacing: 0.03em; }
.wtt-slot .nm { font-size: 0.62rem; font-weight: 800; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.15rem; }
.wtt-slot.filled .nm { color: #d4c44a; }
.wtt-slot .rt { font-family: 'Russo One', sans-serif; font-weight: 900; font-size: 1.3rem; color: #d4c44a; margin-top: 0.1rem; }

.wtt-avg-bar { display: grid; grid-template-columns: repeat(5,1fr); gap: 0.35rem; margin-bottom: 1rem; }
.wtt-avg-box { background: #141c6a; border: 1px solid #26307d; padding: 0.5rem 0.2rem; text-align: center; }
.wtt-avg-box .l { font-size: 0.52rem; color: #a9adda; text-transform: uppercase; letter-spacing: 0.02em; }
.wtt-avg-box .v { font-family: 'Russo One', sans-serif; font-weight: 900; font-size: 1.15rem; color: #ffffff; }
.wtt-avg-box.overall .v { color: #d4c44a; }

.wtt-spin-area { text-align: center; margin: 1.5rem 0; }
.wtt-spin-btn { width: 140px; height: 140px; border-radius: 50%; background: linear-gradient(135deg, #d4c44a, #bfb038); border: none; font-weight: 900; font-size: 1.1rem; letter-spacing: 0.02em; text-transform: uppercase; color: #0e1555; cursor: pointer; box-shadow: 0 0 0 6px rgba(212,196,74,0.18); transition: transform 0.15s; }
.wtt-spin-btn:hover:not(:disabled) { transform: scale(1.04); }
.wtt-spin-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.wtt-spin-btn.spinning { animation: wttPulse 0.5s ease infinite; }
@keyframes wttPulse { 0%,100% { box-shadow: 0 0 0 6px rgba(212,196,74,0.18); } 50% { box-shadow: 0 0 0 14px rgba(212,196,74,0.06); } }
.wtt-reroll-note { font-size: 0.7rem; color: #a9adda; margin-top: 0.7rem; }

.wtt-club-reveal { text-align: center; font-family: 'Russo One', sans-serif; font-weight: 800; font-size: 1.3rem; color: #d4c44a; margin-bottom: 1rem; min-height: 1.8rem; }
.wtt-squad-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.5rem; margin-bottom: 1rem; }
.wtt-squad-player { background: #141c6a; border: 2px solid #26307d; padding: 0.7rem; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 0.7rem; }
.wtt-squad-player:hover:not(.locked-out) { border-color: #d4c44a; }
.wtt-squad-player.locked-out { opacity: 0.25; cursor: not-allowed; }
.wtt-sp-rating-badge { flex-shrink: 0; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; background: #3a3418; border: 2px solid #d4c44a; font-family: 'Russo One', sans-serif; font-weight: 900; font-size: 1.4rem; color: #d4c44a; }
.wtt-sp-info { flex: 1; min-width: 0; }
.wtt-sp-name { font-weight: 800; font-size: 0.85rem; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtt-sp-meta { font-size: 0.66rem; color: #a9adda; margin-top: 0.15rem; }
.wtt-reroll-btn { background: none; border: 1px solid #26307d; color: #a9adda; padding: 0.75rem 1.4rem; min-height: 2.75rem; font-weight: 700; font-size: 0.72rem; text-transform: uppercase; cursor: pointer; margin-bottom: 1rem; }
.wtt-reroll-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Squad complete / ratings */
.wtt-ratings-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 0.4rem; margin-bottom: 1.2rem; }
.wtt-rating-box { background: #141c6a; border: 2px solid #26307d; padding: 0.7rem 0.3rem; text-align: center; }
.wtt-rating-box.overall { border-color: #d4c44a; }
.wtt-rating-box .l { font-size: 0.54rem; color: #a9adda; text-transform: uppercase; letter-spacing: 0.02em; }
.wtt-rating-box .v { font-family: 'Russo One', sans-serif; font-weight: 900; font-size: 1.9rem; color: #ffffff; }
.wtt-rating-box.overall .v { color: #d4c44a; }
.wtt-projection-box { background: #141c6a; border: 1px solid #26307d; padding: 1rem; text-align: center; font-size: 0.8rem; color: #c9cdf0; margin-bottom: 1.2rem; }

/* Simulating */
.wtt-sim-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }
.wtt-sim-phase { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: #d4c44a; font-weight: 800; }
.wtt-sim-progress-track { height: 5px; background: #141c6a; margin-bottom: 1rem; overflow: hidden; }
.wtt-sim-progress-fill { height: 100%; background: #d4c44a; transition: width 0.3s linear; }
.wtt-sim-scoreflash { text-align: center; font-family: 'Russo One', sans-serif; font-weight: 800; font-size: 1rem; color: #ffffff; min-height: 1.6rem; margin-bottom: 0.8rem; }
.wtt-sim-scoreflash .scorer { display: block; font-size: 0.66rem; font-weight: 400; color: #a9adda; margin-top: 0.15rem; }
.wtt-table { width: 100%; border-collapse: collapse; font-size: 0.66rem; }
.wtt-table th { text-align: left; color: #a9adda; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; padding: 0.3rem 0.2rem; border-bottom: 1px solid #26307d; }
.wtt-table td { padding: 0.28rem 0.2rem; border-bottom: 1px solid #141c6a; color: #c9cdf0; }
.wtt-table tr.me td { color: #d4c44a; font-weight: 800; }
.wtt-table td:first-child { width: 20px; }

/* Summary */
.wtt-treble-banner { text-align: center; padding: 2rem 1rem; margin-bottom: 1.2rem; }
.wtt-treble-banner.won { background: linear-gradient(135deg, #d4c44a, #bfb038); }
.wtt-treble-banner.won .headline { color: #0e1555; }
.wtt-treble-banner.lost { background: #141c6a; border: 2px solid #26307d; }
.wtt-treble-banner .headline { font-family: 'Russo One', sans-serif; font-weight: 900; font-size: 1.5rem; color: #ffffff; }
.wtt-treble-banner .sub { font-size: 0.78rem; margin-top: 0.4rem; opacity: 0.85; }
.wtt-summary-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.5rem; margin-bottom: 1.2rem; }
.wtt-summary-box { background: #141c6a; border: 1px solid #26307d; padding: 0.7rem; text-align: center; }
.wtt-summary-box .l { font-size: 0.58rem; color: #a9adda; text-transform: uppercase; letter-spacing: 0.02em; }
.wtt-summary-box .v { font-family: 'Russo One', sans-serif; font-weight: 800; font-size: 1rem; color: #ffffff; }
.wtt-playagain-btn { width: 100%; background: #d4c44a; color: #0e1555; border: none; padding: 1rem; font-weight: 800; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; }

@media (max-width: 640px) {
  .wtt-panel { margin: -1rem; padding: 1rem; overflow-x: hidden; }
  .wtt-club-grid { grid-template-columns: repeat(2,1fr); }
  .wtt-formation-grid, .wtt-diff-grid { grid-template-columns: repeat(2,1fr); }
  .wtt-squad-grid { grid-template-columns: 1fr; }
  .wtt-ratings-grid { grid-template-columns: repeat(3,1fr); }
  /* Kept at two across on mobile: one per row turned the end-of-season
     stats into a tall stack of full-width blocks rather than tiles. */
  .wtt-summary-grid { grid-template-columns: repeat(2,1fr); }
  .wtt-avg-bar { grid-template-columns: repeat(3,1fr); gap: 0.4rem 0.35rem; }
  .wtt-pick-btn { min-height: 2.75rem; font-size: 0.7rem; padding: 0.7rem 0.4rem; }
  .wtt-spin-btn { width: 120px; height: 120px; font-size: 1rem; }
  .wtt-slot { width: 70px; }
  .wtt-squad-player { padding: 0.8rem 0.7rem; }
  .wtt-sp-rating-badge { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; }
  .wtt-start-btn, .wtt-playagain-btn { min-height: 3rem; }
}

/* Win the Treble — end-of-run squad list with per-player goals/assists */
.wtt-squad-stat-row { display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: center; gap: 0.6rem; padding: 0.5rem 0.2rem; border-bottom: 1px solid #26307d; }
.wtt-sqs-pos { font-size: 0.6rem; color: #a9adda; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; }
.wtt-sqs-name { font-weight: 800; font-size: 0.82rem; color: #ffffff; }
.wtt-sqs-ga { font-family: 'Russo One', sans-serif; font-weight: 800; font-size: 0.85rem; color: #d4c44a; white-space: nowrap; }

/* ============================================================
   TSW CARDS — pack shop, opening reveal, collection browser
   ============================================================ */
.tsw-cards-header-bar { display: flex; justify-content: center; gap: 1.5rem; background: var(--navy); color: white; padding: 0.9rem; margin-bottom: 1.2rem; }
.tsw-cards-balance { display: flex; align-items: center; gap: 0.4rem; font-weight: 800; font-size: 0.95rem; }
.tsw-cards-balance .icon { font-size: 1.1rem; }
.tsw-cards-balance .coins { color: var(--yellow); }
.tsw-cards-balance .points { color: #4a90e2; }

.tsw-cards-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; border-bottom: 2px solid var(--border); }
.tsw-cards-tab-btn { background: none; border: none; padding: 0.7rem 1.1rem; font-weight: 700; font-size: 0.8rem; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tsw-cards-tab-btn.active { color: #fff; border-bottom-color: #a78bfa; }

.tsw-pack-shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.9rem; }

.tsw-pack-card {
  --pack-accent: #7a7f97; --pack-accent-rgb: 122,127,151;
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 1rem; border-radius: 16px; border: 1.5px solid rgba(var(--pack-accent-rgb),0.7);
  background:
    radial-gradient(circle at 72% 14%, rgba(var(--pack-accent-rgb),0.22), transparent 32%),
    linear-gradient(150deg, rgba(var(--pack-accent-rgb),0.1), #080c20 45%, #050713);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), inset 0 -20px 34px rgba(0,0,0,0.35), 0 8px 22px rgba(0,0,0,0.28);
  color: #f7f8ff;
}
.tsw-pack-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
  background: repeating-linear-gradient(135deg, transparent 0 26px, rgba(var(--pack-accent-rgb),0.05) 26px 28px);
}
.tsw-pack-card::after {
  content: ""; position: absolute; width: 85%; height: 2px; right: -18%; top: 30%;
  transform: rotate(-40deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--pack-accent), transparent);
  box-shadow: 0 0 10px rgba(var(--pack-accent-rgb),0.4);
}

.tsw-pack-bronze    { --pack-accent: #ad7b52; --pack-accent-rgb: 173,123,82; }
.tsw-pack-silver    { --pack-accent: #c0c8db; --pack-accent-rgb: 192,200,219; }
.tsw-pack-gold      { --pack-accent: #f7cf3b; --pack-accent-rgb: 247,207,59; }
.tsw-pack-elite     { --pack-accent: #b954ff; --pack-accent-rgb: 185,84,255; }
.tsw-pack-legendary {
  --pack-accent: #ff9b28; --pack-accent-rgb: 255,155,40; border-width: 2px;
  box-shadow: inset 0 0 30px rgba(255,155,40,0.1), 0 0 20px rgba(255,155,40,0.24);
}

.tsw-pack-card.featured { transform: translateY(-3px); }
.tsw-pack-ribbon {
  position: absolute; top: 16px; right: -32px; width: 130px; padding: 0.3rem 0;
  z-index: 6; transform: rotate(45deg); text-align: center; color: #191306;
  background: linear-gradient(180deg,#fff180,#eebd22); font-size: 0.56rem; font-weight: 900; letter-spacing: 0.04em;
}

.tsw-pack-top { position: relative; z-index: 2; }
.tsw-pack-tag {
  display: inline-block; padding: 0.25rem 0.5rem; border: 1px solid rgba(var(--pack-accent-rgb),0.6);
  color: var(--pack-accent); background: rgba(0,0,0,0.25); font-size: 0.6rem; font-weight: 900; letter-spacing: 0.06em;
}

.tsw-pack-art-area { position: relative; z-index: 2; height: 96px; display: grid; place-items: center; }
.tsw-pack-art-glow { position: absolute; width: 100px; height: 100px; border-radius: 50%; background: rgba(var(--pack-accent-rgb),0.28); filter: blur(30px); }
.tsw-pack-art {
  position: relative; width: 64px; height: 82px; display: grid; place-items: center; transform: rotate(-4deg);
  clip-path: polygon(7% 0, 93% 0, 100% 8%, 96% 92%, 90% 100%, 10% 100%, 4% 92%, 0 8%);
  background: linear-gradient(145deg, rgba(var(--pack-accent-rgb),0.85), rgba(var(--pack-accent-rgb),0.25) 40%, #060912);
  border: 2px solid var(--pack-accent); box-shadow: 0 0 14px rgba(var(--pack-accent-rgb),0.4);
}
.tsw-pack-art::before, .tsw-pack-art::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 7px;
  background: repeating-linear-gradient(90deg, var(--pack-accent) 0 5px, rgba(255,255,255,0.4) 5px 7px);
}
.tsw-pack-art::before { top: 0; }
.tsw-pack-art::after { bottom: 0; }
.tsw-pack-logo { position: relative; z-index: 2; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 900; font-style: italic; letter-spacing: -0.04em; color: #fff; }

.tsw-pack-info { position: relative; z-index: 2; text-align: center; margin-top: 0.3rem; }
.tsw-pack-info h3 { margin: 0; font-family: 'Source Serif 4', serif; font-size: 1.15rem; }
.tsw-pack-info p { margin: 0.25rem 0 0; color: #a7acc9; font-size: 0.66rem; line-height: 1.3; min-height: 1.7em; }

.tsw-pack-contents { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-top: 0.7rem; }
.tsw-pack-pill { padding: 0.4rem; text-align: center; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.035); }
.tsw-pack-pill span { display: block; color: #a7acc9; font-size: 0.52rem; font-weight: 800; letter-spacing: 0.03em; }
.tsw-pack-pill strong { display: block; margin-top: 0.15rem; color: #fff; font-size: 0.82rem; }
.tsw-pack-pill.support { border-color: rgba(247,207,59,0.3); }
.tsw-pack-pill.support strong { color: #f7cf3b; }

.tsw-pack-odds-area { position: relative; z-index: 2; margin-top: 0.7rem; padding: 0.6rem; border-radius: 10px; background: rgba(2,5,15,0.5); border: 1px solid rgba(255,255,255,0.06); }
.tsw-pack-odds-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.tsw-pack-odds-title span { color: #c5c9dd; font-size: 0.56rem; font-weight: 900; letter-spacing: 0.03em; }
.tsw-pack-odds-toggle { padding: 0; border: 0; cursor: pointer; color: var(--pack-accent); background: transparent; font-size: 0.56rem; font-weight: 900; }
.tsw-pack-odds-strip { display: flex; width: 100%; height: 9px; overflow: hidden; border-radius: 99px; background: #090c18; }
.tsw-pack-odds-strip i { height: 100%; }
.tsw-pack-odds-list { display: none; grid-template-columns: 1fr 1fr; gap: 0.25rem 0.5rem; margin-top: 0.55rem; }
.tsw-pack-odds-list.open { display: grid; }
.tsw-pack-odds-row { display: flex; justify-content: space-between; gap: 0.4rem; font-size: 0.58rem; color: #bcc0d3; }
.tsw-pack-odds-row strong { color: #fff; }

.tsw-pack-guarantee {
  position: relative; z-index: 2; margin-top: 0.6rem; padding: 0.5rem 0.6rem; display: flex; align-items: center; gap: 0.4rem;
  border-radius: 8px; color: #f6e89b; background: rgba(247,207,59,0.08); border: 1px solid rgba(247,207,59,0.2);
  font-size: 0.62rem; font-weight: 800; line-height: 1.3;
}
.tsw-pack-guarantee-icon { width: 14px; height: 14px; flex-shrink: 0; color: #f7cf3b; }

.tsw-pack-purchase { position: relative; z-index: 2; margin-top: auto; padding-top: 0.7rem; }
.tsw-pack-buy-btn {
  width: 100%; min-height: 46px; border: 1px solid var(--pack-accent); border-radius: 10px; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 0.35rem; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(var(--pack-accent-rgb),0.45), rgba(var(--pack-accent-rgb),0.72));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 10px rgba(var(--pack-accent-rgb),0.2);
  font-size: 0.8rem; font-weight: 900; transition: filter 0.15s ease, transform 0.15s ease;
}
.tsw-pack-buy-btn:active { transform: scale(0.98); filter: brightness(1.1); }
.tsw-pack-coin-icon { width: 15px; height: 15px; flex-shrink: 0; }
.tsw-pack-buy-btn small { flex-basis: 100%; color: rgba(255,255,255,0.75); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.03em; }

@media (max-width: 640px) {
  .tsw-pack-shop-grid { grid-template-columns: 1fr; gap: 0.7rem; }
  .tsw-pack-card { padding: 0.85rem; }
  .tsw-pack-art-area { height: 78px; }
  .tsw-pack-art { width: 52px; height: 68px; }
  .tsw-pack-info h3 { font-size: 1.05rem; }
  .tsw-pack-contents { margin-top: 0.55rem; }
  .tsw-pack-odds-area { margin-top: 0.55rem; }
  .tsw-pack-guarantee { margin-top: 0.5rem; }
  .tsw-pack-purchase { padding-top: 0.55rem; }
}

#tswCardsRevealArea { scroll-margin-top: 90px; }
.tsw-reveal-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.4rem; gap: 0.6rem; }
.tsw-reveal-eyebrow { color: #ffc928; font-size: 0.62rem; font-weight: 900; letter-spacing: 0.08em; }
.tsw-reveal-heading { margin: 0.2rem 0 0; font-family: 'Source Serif 4', serif; font-size: 1.5rem; color: var(--text, #1a1a2e); }
body.tsw-battle-page .tsw-reveal-heading { color: #f6f7ff; }
.tsw-reveal-counter { color: #8f8fa8; font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.tsw-reveal-counter strong { color: #ffc928; font-size: 1.2rem; }

.tsw-reveal-row {
  min-height: 470px; display: flex; align-items: center; justify-content: flex-start; gap: 0.7rem;
  perspective: 1400px; overflow-x: auto; padding: 0.8rem 0.3rem; scrollbar-width: none;
}
.tsw-reveal-row::-webkit-scrollbar { display: none; }

.tsw-reveal-slot { position: relative; flex: 0 0 auto; perspective: 1100px; transition: transform 0.25s ease, filter 0.25s ease; }
.tsw-reveal-slot .tswb-card, .tsw-reveal-slot .tswb-support-card { width: 200px; }
.tsw-reveal-slot.current { transform: translateY(-12px) scale(1.06); filter: drop-shadow(0 0 14px rgba(195,71,255,0.5)); }
.tsw-reveal-slot.just-revealed { animation: tswRevealPulse 0.65s ease; }
@keyframes tswRevealPulse {
  0% { transform: translateY(-12px) scale(1.06); }
  45% { transform: translateY(-18px) scale(1.14); }
  100% { transform: translateY(0) scale(1); }
}

.tsw-flip-card {
  position: relative; width: 200px; height: 460px; /* width matches the content's real needs - the old 130px was too narrow for the 3-column stat grid, clipping it on the right; height re-measured below once width was fixed */
  transform-style: preserve-3d; transition: transform 0.72s cubic-bezier(.2,.75,.2,1);
}
.tsw-reveal-slot.revealed .tsw-flip-card { transform: rotateY(180deg); }
.tsw-flip-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tsw-flip-back { display: flex; align-items: center; justify-content: center; } /* the back is just a small logo mark, not the front's dense content - centered at its own normal size rather than stretched to fill the front's taller box */
.tsw-flip-front { transform: rotateY(180deg); }
.tsw-flip-front .tswb-card, .tsw-flip-front .tswb-support-card { width: 200px; height: auto; }

.tsw-cardback-inner {
  width: 200px; aspect-ratio: 0.64; height: auto; display: grid; place-items: center; border-radius: 6px;
  border: 2px solid #ba47ff; clip-path: polygon(10% 0%, 90% 0%, 100% 6%, 100% 94%, 90% 100%, 10% 100%, 0% 94%, 0% 6%);
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,0.03) 22px 24px),
    radial-gradient(circle at 50% 40%, rgba(181,46,255,0.18), transparent 45%),
    linear-gradient(145deg, #18102f, #050713);
  box-shadow: 0 0 14px rgba(187,54,255,0.32), inset 0 0 20px rgba(126,32,255,0.14);
}
.tsw-cardback-inner span { color: #b84cff; font-size: 1.6rem; font-weight: 1000; font-style: italic; text-shadow: 0 0 12px rgba(194,70,255,0.5); }

.tsw-reveal-badge {
  position: relative; z-index: 5; text-align: center; margin-top: 0.4rem;
  padding: 0.25rem 0.3rem; border-radius: 6px; font-size: 0.56rem; font-weight: 900; line-height: 1.2;
}
.tsw-reveal-badge.new { background: #1a7a3c; color: #fff; }
.tsw-reveal-badge.dup { background: #142a52; color: #8fc0f5; border: 1px solid #4a90e2; }

/* Sits directly under the card row, in normal flow - not pinned to the
   viewport edge, just snug against the cards themselves. */
.tsw-reveal-actions {
  margin-top: 0.3rem;
  padding: 0.4rem 0.5rem 0;
  text-align: center;
}
.tsw-reveal-message { margin-top: 0; text-align: center; color: #d3b5f7; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.03em; animation: tswTapPulse 1.4s ease-in-out infinite; }
@keyframes tswTapPulse { 50% { opacity: 0.45; } }

.tsw-reveal-all-btn { display: block; margin: 0.6rem auto 0.8rem; padding: 0.5rem 0.9rem; border: 1px solid #7f4ca7; border-radius: 8px; color: #d7b5ee; background: #110b22; font-size: 0.62rem; font-weight: 900; cursor: pointer; }
.tsw-reveal-continue-btn { display: block; margin: 0.7rem auto 0.8rem; background: var(--navy); color: white; border: none; padding: 0.9rem 2rem; font-weight: 700; text-transform: uppercase; font-size: 0.8rem; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }

@media (min-width: 640px) {
  .tsw-reveal-slot .tswb-card, .tsw-reveal-slot .tswb-support-card, .tsw-flip-card, .tsw-flip-front .tswb-card, .tsw-flip-front .tswb-support-card, .tsw-cardback-inner { width: 230px; }
  .tsw-reveal-row { flex-wrap: wrap; overflow-x: visible; min-height: 470px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .tsw-flip-card, .tsw-reveal-slot { transition: none; }
  .tsw-reveal-slot.just-revealed, .tsw-reveal-message { animation: none; }
}

.tsw-cards-overall-progress { margin-bottom: 1.3rem; }
body.tsw-battle-page .tsw-cards-overall-progress { color: #f6f7ff; }

/* Shared progress bar fill transition - used by the overall panel,
   Special Collection panels, and (separately, its own rule below) the
   club rows. Width is set to 0 on render and animated to the real
   target by tswAnimateBarsIn() once the section scrolls into view. */
.tsw-scc-bar-track { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.tsw-scc-bar-fill { height: 100%; border-radius: 3px; background: rgba(var(--scc-rgb,184,84,255),0.9); box-shadow: 0 0 8px rgba(var(--scc-rgb,184,84,255),0.5); transition: width 1.1s cubic-bezier(.16,.84,.44,1); }

.tsw-collection-overall-panel {
  --scc-rgb: 184,84,255; display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem;
  border-radius: 12px; border: 1px solid rgba(var(--scc-rgb),0.55);
  background: radial-gradient(circle at 15% 20%, rgba(var(--scc-rgb),0.16), transparent 55%), linear-gradient(155deg, #14102c 0%, #0a0818 60%, #06050f 100%);
  box-shadow: 0 0 18px rgba(var(--scc-rgb),0.14);
}
.tsw-collection-overall-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: #d6a8fc; background: rgba(var(--scc-rgb),0.14); border: 1px solid rgba(var(--scc-rgb),0.4); }
.tsw-collection-overall-icon svg { width: 22px; height: 22px; }
.tsw-collection-overall-body { flex: 1; min-width: 0; }
.tsw-collection-overall-text { font-weight: 800; font-size: 0.82rem; color: #f3edff; margin-bottom: 0.5rem; }
.tsw-collection-overall-text .pct { color: #d6a8fc; font-weight: 900; }

/* Section headers (Special Collections / Clubs), shared style */
.tsw-collection-section-head { display: flex; align-items: center; justify-content: space-between; margin: 1.4rem 0 0.7rem; }
.tsw-collection-section-title { display: flex; align-items: center; gap: 0.45rem; font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1rem; color: #f3edff; }
body.tsw-battle-page .tsw-collection-section-title { color: #f3edff; }
.tsw-section-star, .tsw-section-trophy { width: 18px; height: 18px; color: #d4c44a; flex-shrink: 0; }
.tsw-view-all-btn {
  display: inline-flex; align-items: center; gap: 0.25rem; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; color: #d7d9f5; font-size: 0.68rem; font-weight: 800;
  padding: 0.4rem 0.7rem; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.tsw-view-all-btn svg { width: 13px; height: 13px; transition: transform 0.2s ease; }
.tsw-view-all-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.32); }
.tsw-view-all-btn:active { transform: scale(0.96); }
.tsw-view-all-btn.open svg { transform: rotate(90deg); }
body.tsw-battle-page .tsw-view-all-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: #d7d9f5; }
body.tsw-battle-page .tsw-view-all-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.32); }

/* Special Collections — dark neon panels, one colour identity per card
   via --scc-rgb (purple/blue/teal/red for GK/DEF/MID/FWD, rarity
   colours reused for everything behind View All). */
.tsw-scc-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.3rem; }
.tsw-scc-panel {
  position: relative; display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 0.9rem;
  border-radius: 12px; border: 1px solid rgba(var(--scc-rgb),0.5);
  background: radial-gradient(circle at 12% 15%, rgba(var(--scc-rgb),0.15), transparent 55%), linear-gradient(155deg, #131025 0%, #0a0916 55%, #07060e 100%);
  box-shadow: 0 0 14px rgba(var(--scc-rgb),0.1); transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tsw-scc-panel:hover { box-shadow: 0 0 20px rgba(var(--scc-rgb),0.24); border-color: rgba(var(--scc-rgb),0.8); }
.tsw-scc-panel:active { transform: scale(0.99); }
.tsw-scc-panel.complete { border-color: rgba(var(--scc-rgb),0.9); box-shadow: 0 0 20px rgba(var(--scc-rgb),0.28); }
.tsw-scc-icon {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  color: rgb(var(--scc-rgb)); background: rgba(var(--scc-rgb),0.14); border: 1.5px solid rgba(var(--scc-rgb),0.55);
}
.tsw-scc-icon svg { width: 22px; height: 22px; }
.tsw-scc-body { flex: 1; min-width: 0; }
.tsw-scc-title { font-weight: 800; font-size: 0.82rem; color: #f3edff; margin-bottom: 0.4rem; }
.tsw-scc-count { font-size: 0.66rem; color: #a9adda; font-weight: 700; margin-top: 0.3rem; }
.tsw-scc-reward-line { font-size: 0.62rem; color: #8a8fc0; margin-top: 0.35rem; }
.tsw-scc-reward-line .coins { color: #d4c44a; font-weight: 800; }
.tsw-scc-reward-line .packname { color: rgb(var(--scc-rgb)); font-weight: 800; }

/* Reuses the real Pack Store art (.tsw-pack-art / .tsw-pack-{id}) at a
   smaller size instead of a text placeholder for the reward preview. */
.tsw-scc-pack-mini { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; background: none; border: none; padding: 0; }
.tsw-scc-pack-mini .tsw-pack-art { width: 40px; height: 51px; }
.tsw-scc-pack-mini .tsw-pack-logo { font-size: 0.5rem; }
.tsw-scc-pack-label { font-size: 0.48rem; font-weight: 900; letter-spacing: 0.04em; text-align: center; line-height: 1.15; color: var(--pack-accent, #b954ff); }

/* Clubs — one dark gradient row per club, derived from real club
   colours via --club-a/b/c (light -> dark) and a two-tone circular
   marker via --c1/--c2, both set inline per row from TSW_CLUB_COLORS.
   No badges or logos - colour identity only. */
.tsw-club-list { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.3rem; }
.tsw-club-row {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.8rem; border-radius: 10px; cursor: pointer;
  background: linear-gradient(90deg, var(--club-a) 0%, var(--club-b) 28%, var(--club-c) 78%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15), 0 3px 10px rgba(0,0,0,0.25);
  transition: transform 0.14s ease, box-shadow 0.2s ease, filter 0.15s ease;
}
.tsw-club-row:hover { filter: brightness(1.08); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15), 0 4px 14px rgba(0,0,0,0.32); }
.tsw-club-row:active { transform: scale(0.99); }
.tsw-club-row.complete { border-color: rgba(212,196,74,0.7); box-shadow: 0 0 12px rgba(212,196,74,0.25); }
.tsw-club-circle {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(90deg, var(--c1) 50%, var(--c2) 50%);
  border: 2px solid rgba(255,255,255,0.55); box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.tsw-club-mid { flex: 1; min-width: 0; }
.tsw-club-name { font-weight: 800; font-size: 1rem; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.45); margin-bottom: 0.35rem; }
.tsw-club-bar-track { height: 5px; border-radius: 3px; background: rgba(0,0,0,0.32); overflow: hidden; }
.tsw-club-bar-fill { height: 100%; border-radius: 3px; background: var(--club-bar); box-shadow: 0 0 6px rgba(255,255,255,0.35); transition: width 1.1s cubic-bezier(.16,.84,.44,1); }
.tsw-club-count { flex-shrink: 0; font-size: 0.72rem; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.45); }
.tsw-club-chevron { flex-shrink: 0; width: 16px; height: 16px; color: rgba(255,255,255,0.75); }

@media (prefers-reduced-motion: reduce) {
  .tsw-scc-bar-fill, .tsw-club-bar-fill { transition: none; }
}


.tsw-collection-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.5rem; }
.tsw-mini-card { position: relative; border-radius: 6px; border: 2px solid #8a8a8a; padding: 0.6rem 0.3rem; text-align: center; background: linear-gradient(160deg,#5a5a5a 0%,#2a2a2a 55%,#111 100%); color: #fff; overflow: hidden; }
.tsw-mini-card::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 10px, rgba(255,255,255,0.05) 10px 12px); pointer-events: none; z-index: 0; }
.tsw-mini-card > * { position: relative; z-index: 1; }
.tsw-mini-card.rarity-common { border-color: #8a8a8a; background: linear-gradient(160deg,#8a8a8a 0%,#2a2a2a 55%,#111 100%); }
.tsw-mini-card.rarity-uncommon { border-color: #22c55e; background: linear-gradient(160deg,#4ade80 0%,#14532d 55%,#052e16 100%); }
.tsw-mini-card.rarity-rare { border-color: #4a90e2; background: linear-gradient(160deg,#6fa8f5 0%,#1a3a6b 55%,#0a1730 100%); }
.tsw-mini-card.rarity-super-rare { border-color: #3b5bdb; background: linear-gradient(160deg,#5c78e8 0%,#1c2a70 55%,#0a1030 100%); }
.tsw-mini-card.rarity-ultra-rare { border-color: #a855f7; background: linear-gradient(160deg,#c084fc 0%,#5a1f8a 55%,#1a0a30 100%); }
.tsw-mini-card.rarity-epic { border-color: #f97316; background: linear-gradient(160deg,#fb923c 0%,#7c2d12 55%,#2a0d04 100%); }
.tsw-mini-card.rarity-legendary { border-color: #d4c44a; background: linear-gradient(160deg,#f0dc7a 0%,#8a6f00 55%,#2a2000 100%); box-shadow: 0 0 12px rgba(212,196,74,0.4); }
.tsw-mini-card.rarity-mythic { border-color: #ef4444; background: linear-gradient(160deg,#f87171 0%,#7f1d1d 55%,#2a0808 100%); box-shadow: 0 0 12px rgba(239,68,68,0.35); }
.tsw-mini-card.rarity-immortal { border-color: #e5e7eb; background: linear-gradient(160deg,#f3f4f6 0%,#4b5563 55%,#0a0a0c 100%); box-shadow: 0 0 16px rgba(229,231,235,0.5); }
.tsw-mini-card.locked { opacity: 0.35; filter: grayscale(1); }
.tsw-mc-ovr { font-family: 'Russo One', sans-serif; font-weight: 900; font-size: 1.1rem; color: var(--navy); }
.tsw-mc-name { font-size: 0.62rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsw-mc-version { font-size: 0.52rem; color: var(--muted); text-transform: uppercase; }
.tsw-mc-level-badge { position: absolute; top: 0.3rem; left: 0.3rem; background: #1a7a3c; color: #fff; font-size: 0.5rem; font-weight: 800; padding: 0.05rem 0.3rem; border-radius: 2px; }

.tsw-cards-toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 999; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }
.tsw-cards-toast { background: var(--navy); color: var(--yellow); padding: 0.7rem 1.1rem; font-weight: 800; font-size: 0.85rem; box-shadow: 0 6px 16px rgba(0,0,0,0.25); transform: translateX(120%); opacity: 0; transition: all 0.3s ease; }
.tsw-cards-toast.show { transform: translateX(0); opacity: 1; }

@media (max-width: 640px) {
  .tsw-collection-grid { grid-template-columns: repeat(2,1fr); }
}

/* TSW Cards — pending packs, special collections, completion celebration */
.tsw-pending-packs-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem; }
.tsw-pending-pack-btn { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--yellow); color: var(--navy); border: none; padding: 0.7rem 1.1rem; font-weight: 800; font-size: 0.78rem; cursor: pointer; }
.tsw-pending-pack-icon { width: 16px; height: 16px; flex-shrink: 0; }
.tsw-pending-pack-btn .count { background: var(--navy); color: var(--yellow); padding: 0.05rem 0.4rem; margin-left: 0.4rem; font-size: 0.7rem; }

.tsw-completion-list { max-width: 480px; margin: 0 auto 1.5rem; }
.tsw-completion-row { background: white; border: 2px solid var(--yellow); padding: 1rem; margin-bottom: 0.6rem; text-align: center; }
.tsw-completion-label { font-family: 'Russo One', sans-serif; font-weight: 800; color: var(--navy); font-size: 0.95rem; margin-bottom: 0.3rem; }
.tsw-completion-reward { font-size: 0.72rem; color: var(--muted); }

/* ============================================================
   TSW BATTLE
   ============================================================ */
.tsw-deckslots-header { text-align: center; margin-bottom: 0.6rem; }
.tsw-battle-deck-count { font-weight: 800; color: #f5f5f5; font-size: 1rem; }

.tsw-deckslots-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; background: #0b0f1e; border: 1px solid #232a45; padding: 0.9rem 0.6rem; margin-bottom: 1.1rem; }
.tsw-deck-slot { width: 64px; height: 86px; border: 2px dashed #3a4266; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tsw-deck-slot.filled { border-style: solid; cursor: pointer; }
.tsw-deck-slot.filled.rarity-common { border-color: #8a8a8a; background: linear-gradient(160deg,#2a2a2a,#111); }
.tsw-deck-slot.filled.rarity-uncommon { border-color: #22c55e; background: linear-gradient(160deg,#14532d,#052e16); }
.tsw-deck-slot.filled.rarity-rare { border-color: #4a90e2; background: linear-gradient(160deg,#1a3a6b,#0a1730); }
.tsw-deck-slot.filled.rarity-super-rare { border-color: #3b5bdb; background: linear-gradient(160deg,#1c2a70,#0a1030); }
.tsw-deck-slot.filled.rarity-ultra-rare { border-color: #a855f7; background: linear-gradient(160deg,#5a1f8a,#1a0a30); }
.tsw-deck-slot.filled.rarity-epic { border-color: #f97316; background: linear-gradient(160deg,#7c2d12,#2a0d04); }
.tsw-deck-slot.filled.rarity-legendary { border-color: #d4c44a; background: linear-gradient(160deg,#8a6f00,#2a2000); }
.tsw-deck-slot.filled.rarity-mythic { border-color: #ef4444; background: linear-gradient(160deg,#7f1d1d,#2a0808); }
.tsw-deck-slot.filled.rarity-immortal { border-color: #e5e7eb; background: linear-gradient(160deg,#4b5563,#0a0a0c); }
.tsw-deck-slot .ovr { font-family: 'Russo One', sans-serif; font-weight: 900; font-size: 1.1rem; color: #fff; }
.tsw-deck-slot .nm { font-size: 0.48rem; font-weight: 700; color: #c9cdf0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 90%; }
.tsw-deck-slot .empty-icon { font-size: 1.3rem; color: #3a4266; }

.tsw-binder-toolbar { display: flex; gap: 1rem; justify-content: center; margin-bottom: 1rem; }
.tsw-binder-sort, .tsw-binder-filter { display: flex; align-items: center; gap: 0.4rem; }
.tsw-binder-sort label, .tsw-binder-filter label { font-size: 0.66rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.tsw-binder-sort select, .tsw-binder-filter select { border: 1px solid var(--border); padding: 0.4rem 0.5rem; font-size: 0.74rem; font-weight: 700; background: white; }

.tsw-card-binder { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.7rem; margin-bottom: 1.2rem; }
.tsw-binder-card {
  position: relative; aspect-ratio: 3/4.6; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: rgba(212,196,74,0.3); display: flex; flex-direction: column; padding: 0.5rem 0.4rem; text-align: center; border: 3px solid #8a8a8a; background: linear-gradient(160deg,#5a5a5a 0%,#2a2a2a 55%,#111 100%); overflow: hidden;
  /* A club can run to 80+ cards in this grid at once - skip layout/paint
     work for whichever ones are currently offscreen so fast scrolling
     stays smooth instead of the browser trying to keep everything
     (including per-card animations) fully rendered at all times. The
     browser still reserves this approximate box size up front, so nothing
     jumps around as real content swaps in while scrolling. */
  content-visibility: auto;
  contain-intrinsic-height: auto 230px;
}
.tsw-binder-card::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 14px, rgba(255,255,255,0.05) 14px 16px); pointer-events: none; z-index: 0; }
.tsw-binder-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -30%;
  width: 40%;
  height: 200%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.22) 45%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.22) 55%, transparent 100%);
  transform: rotate(8deg) translateX(0);
  animation: tswCardShine 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}
@keyframes tswCardShine {
  0% { transform: rotate(8deg) translateX(0); }
  35%, 100% { transform: rotate(8deg) translateX(340%); }
}
.tsw-binder-card > * { position: relative; z-index: 2; }
.tsw-binder-card:nth-child(3n+1)::after { animation-delay: 0s; }
.tsw-binder-card:nth-child(3n+2)::after { animation-delay: 1.2s; }
.tsw-binder-card:nth-child(3n)::after { animation-delay: 2.4s; }
/* Large browsing grids skip the continuous loop for mobile performance */
#tswCatalogueGrid .tsw-binder-card::after, #tswBattleOwnedGrid .tsw-binder-card::after {
  animation: none; display: none;
}
.tsw-binder-card.rarity-common { border-color: #8a8a8a; background: linear-gradient(160deg,#8a8a8a 0%,#2a2a2a 55%,#111 100%); }
.tsw-binder-card.rarity-uncommon { border-color: #22c55e; background: linear-gradient(160deg,#4ade80 0%,#14532d 55%,#052e16 100%); }
.tsw-binder-card.rarity-rare { border-color: #4a90e2; background: linear-gradient(160deg,#6fa8f5 0%,#1a3a6b 55%,#0a1730 100%); }
.tsw-binder-card.rarity-super-rare { border-color: #3b5bdb; background: linear-gradient(160deg,#5c78e8 0%,#1c2a70 55%,#0a1030 100%); }
.tsw-binder-card.rarity-ultra-rare { border-color: #a855f7; background: linear-gradient(160deg,#c084fc 0%,#5a1f8a 55%,#1a0a30 100%); }
.tsw-binder-card.rarity-epic { border-color: #f97316; background: linear-gradient(160deg,#fb923c 0%,#7c2d12 55%,#2a0d04 100%); }
.tsw-binder-card.rarity-legendary { border-color: #d4c44a; background: linear-gradient(160deg,#f0dc7a 0%,#8a6f00 55%,#2a2000 100%); box-shadow: 0 0 12px rgba(212,196,74,0.4); }
.tsw-binder-card.rarity-mythic { border-color: #ef4444; background: linear-gradient(160deg,#f87171 0%,#7f1d1d 55%,#2a0808 100%); box-shadow: 0 0 12px rgba(239,68,68,0.35); }
.tsw-binder-card.rarity-immortal { border-color: #e5e7eb; background: linear-gradient(160deg,#f3f4f6 0%,#4b5563 55%,#0a0a0c 100%); box-shadow: 0 0 16px rgba(229,231,235,0.5); }
.tsw-binder-card.in-deck { outline: 3px solid #fff; outline-offset: -3px; }

.tsw-bc-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; }
.tsw-bc-ratingblock { text-align: left; line-height: 1; }
.tsw-bc-ratingblock .ovr { font-family: 'Russo One', sans-serif; font-weight: 900; font-size: 1.4rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.tsw-bc-ratingblock .pos { font-size: 0.58rem; font-weight: 800; color: rgba(255,255,255,0.85); margin-top: 0.1rem; }
.tsw-binder-card .indeck-check { z-index: 2; background: #1a7a3c; color: white; font-size: 0.6rem; font-weight: 900; width: 1.15rem; height: 1.15rem; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tsw-binder-card .level-badge { position: absolute; top: 0.4rem; left: 50%; transform: translateX(-50%); z-index: 2; background: #1a7a3c; color: #fff; font-size: 0.5rem; font-weight: 800; padding: 0.05rem 0.3rem; border-radius: 2px; }
.tsw-bc-copies { position: absolute; top: 0.4rem; right: 0.35rem; z-index: 2; background: rgba(212,196,74,0.9); color: #12082b; font-size: 0.56rem; font-weight: 900; padding: 0.05rem 0.32rem; border-radius: 3px; }

.tsw-bc-portrait { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.tsw-bc-portrait svg { width: 62%; height: 62%; fill: rgba(0,0,0,0.4); filter: drop-shadow(0 0 6px rgba(255,255,255,0.15)); }

.tsw-binder-card .name-badge { position: relative; z-index: 1; font-size: 0.68rem; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.85); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; padding: 0.3rem 0; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(255,255,255,0.3); margin-bottom: 0.3rem; }

.tsw-bc-statgrid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.4rem; }
.tsw-bc-statcol { display: flex; flex-direction: column; gap: 0.12rem; }
.tsw-bc-stat { display: flex; justify-content: space-between; align-items: baseline; }
.tsw-bc-stat .l { font-size: 0.5rem; font-weight: 700; color: rgba(255,255,255,0.75); text-transform: uppercase; }
.tsw-bc-stat .v { font-family: 'Russo One', sans-serif; font-weight: 900; font-size: 0.8rem; color: #fff; }

.tsw-binder-card .hand-relevant-stat { position: relative; z-index: 1; background: rgba(212,196,74,0.9); color: #0e1555; font-weight: 900; font-size: 0.62rem; padding: 0.15rem 0.3rem; margin-bottom: 0.25rem; border-radius: 3px; }

.tsw-battle-deck-summary { text-align: center; color: #a9adda; margin-bottom: 1.2rem; font-size: 0.85rem; }

.tsw-ability-log { text-align: center; color: #d4c44a; font-size: 0.72rem; font-weight: 700; margin-bottom: 0.8rem; }
.tsw-battle-difficulty-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.7rem; }
.tsw-battle-difficulty-btn { background: white; border: 2px solid var(--border); padding: 1.2rem 0.8rem; text-align: center; cursor: pointer; }
.tsw-battle-difficulty-btn:hover { border-color: var(--navy); }
.tsw-battle-difficulty-btn .name { font-family: 'Russo One', sans-serif; font-weight: 800; font-size: 1rem; color: var(--navy); margin-bottom: 0.3rem; }
.tsw-battle-difficulty-btn .desc { font-size: 0.66rem; color: var(--muted); }

.tsw-battle-arena-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: 0.78rem; color: var(--muted); }
.tsw-battle-scoreline { text-align: center; font-family: 'Russo One', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--navy); margin-bottom: 1.2rem; }

.tsw-battle-stat-choices { display: grid; grid-template-columns: repeat(2,1fr); gap: 0.5rem; }
.tsw-stat-choice-btn { display: flex; justify-content: space-between; align-items: center; background: white; border: 2px solid var(--border); padding: 0.8rem 1rem; cursor: pointer; font-weight: 700; }
.tsw-stat-choice-btn:hover { border-color: var(--navy); }
.tsw-stat-choice-btn .label { font-size: 0.78rem; color: var(--text); }
.tsw-stat-choice-btn .value { font-family: 'Russo One', sans-serif; font-weight: 900; font-size: 1.2rem; color: var(--navy); }


.tsw-battle-result-score { text-align: center; color: var(--muted); margin-bottom: 0.8rem; }
.tsw-battle-result-reward { text-align: center; font-weight: 800; color: var(--yellow-h); background: var(--navy); padding: 0.7rem; margin-bottom: 1.2rem; }

@media (max-width: 640px) {
  .tsw-card-binder { grid-template-columns: repeat(2,1fr); }
  .tsw-deck-slot { width: 54px; height: 74px; }
  .tsw-battle-difficulty-grid { grid-template-columns: 1fr; }
  .tsw-battle-stat-choices { grid-template-columns: 1fr; }
}

.tsw-empty-owned-msg { grid-column: 1 / -1; text-align: center; padding: 2rem 1rem; color: var(--muted); font-size: 0.82rem; }
.tsw-empty-owned-msg a { color: var(--navy); text-decoration: underline; font-weight: 700; }

.tsw-rtg-status-box { background: var(--navy); padding: 1rem; margin-bottom: 0.8rem; }
.tsw-rtg-division-name { font-family: 'Russo One', sans-serif; font-weight: 800; color: var(--yellow); font-size: 1.05rem; margin-bottom: 0.5rem; }
.tsw-rtg-status-box .tsw-cpc-bar-track { background: rgba(255,255,255,0.15); }
.tsw-rtg-status-box .tsw-cpc-bar-fill { background: var(--yellow); }
.tsw-rtg-status-box .tsw-cpc-count { color: rgba(255,255,255,0.8); }

/* ============================================================
   TSW BATTLE — full-stat-visible hand table, inspired by (not
   copied from) the "all stats stacked per card" reference layout:
   one shared label column, then every card in hand gets its own
   column showing every stat value at once — no digging required.
   ============================================================ */

@media (max-width: 640px) {
}

/* ============================================================
   TSW BATTLE — card-carousel hand + head-to-head matchup reveal,
   built as flex-wrap grids (no horizontal scroll containers —
   that's exactly the pattern that caused mobile tap/overflow
   issues in the deck builder before, not repeating it here).
   ============================================================ */




@media (max-width: 640px) {
}

/* ============================================================
   TSW BATTLE — tab bar + condensed one-screen arena + pitch visual
   ============================================================ */
.tsw-battle-tabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; overflow-x: auto; }
.tsw-battle-tab-btn { flex-shrink: 0; background: none; border: none; border-bottom: 3px solid transparent; padding: 0.5rem 0.7rem; font-weight: 700; font-size: 0.76rem; color: #a9adda; cursor: pointer; }
.tsw-battle-tab-btn.active { color: #d4c44a; border-bottom-color: #d4c44a; }

/* Condensed arena — every element trimmed to fit one mobile screen */
#tswBattleArena .tsw-battle-scoreline { font-size: 1.05rem; margin-bottom: 0.4rem; }
#tswBattleArena .tsw-battle-scoreline span { color: #d4c44a; font-weight: 700; font-size: 0.88rem; }

@keyframes tswBallDrift { from { transform: translate(0,0); } to { transform: translate(8px, -6px); } }

#tswBattleArena .tsw-battle-hand { grid-template-columns: repeat(3,1fr); gap: 0.4rem; margin-bottom: 0.6rem; }
#tswBattleArena #tswBattleConfirmCardBtn { padding: 0.7rem; font-size: 0.8rem; margin-bottom: 0.6rem; }

@media (max-width: 640px) {
  #tswBattleArena .tsw-battle-hand { gap: 0.3rem; }
}

/* ============================================================
   TSW BATTLE — game-feel animations: this is the actual "gameplay"
   layer that was missing — tap feedback, a real clash sequence on
   reveal, and a celebration on match win, not static content swaps.
   ============================================================ */

.wtt-start-btn, .tsw-pending-pack-btn, .wtt-playagain-btn { transition: transform 0.1s ease; }
.wtt-start-btn:active, .tsw-pending-pack-btn:active, .wtt-playagain-btn:active { transform: scale(0.96); }






/* The tab bar and toolbar stick to the top of the viewport as you scroll
   through the cards — cards themselves flow normally in the page (no
   fixed-height container, which is what caused them to collapse on top
   of each other last time). Sticky positioning is the robust, standard
   way to do "header stays, content scrolls" without nested scroll
   regions or fragile viewport-height math. */
.tsw-battle-tabs { position: sticky; top: 0; z-index: 20; background: #0e1555; padding-top: 0.4rem; }
#tswTabCatalogue .tsw-binder-toolbar, #tswTabDeck .tsw-binder-toolbar {
  position: sticky; top: 44px; z-index: 19; background: #0e1555; padding: 0.5rem 0; margin-bottom: 0.6rem;
}

/* ============================================================
   Reward Board — face-down tile grid, per spec
   ============================================================ */
.tsw-reward-board-title { text-align: center; font-family: 'Russo One', sans-serif; font-size: 1rem; color: #d4c44a; margin: 1rem 0 0.6rem; }
.tsw-reward-board-title span { display: block; font-family: 'Inter', sans-serif; font-size: 0.7rem; color: #a9adda; font-weight: 700; margin-top: 0.2rem; }
.tsw-reward-board-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.5rem; margin-bottom: 1rem; }
.tsw-reward-tile { aspect-ratio: 1; background: linear-gradient(160deg,#1a2270,#0e1555); border: 2px solid #4a4fb8; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.15s ease; }
.tsw-reward-tile:active { transform: scale(0.93); }
.tsw-reward-tile-q { font-family: 'Russo One', sans-serif; font-size: 1.6rem; color: #4a4fb8; }
.tsw-reward-tile.revealed { cursor: default; border-color: #d4c44a; background: linear-gradient(160deg,#2a2410,#0e1555); animation: tswResultPop 0.35s cubic-bezier(.34,1.56,.64,1); }
.tsw-reward-tile-label { font-size: 0.6rem; font-weight: 800; color: #d4c44a; text-align: center; padding: 0.2rem; line-height: 1.25; }

/* Tiebreaker banner in the round reveal */
.tsw-tiebreak-banner { text-align: center; font-family: 'Russo One', sans-serif; font-size: 0.85rem; letter-spacing: 0.02em; color: #ff8a80; background: rgba(184,48,47,0.2); border: 1px solid #b8302f; padding: 0.5rem; margin-bottom: 0.6rem; border-radius: 4px; }

/* ============================================================
   TSW BATTLE — arena rebuilt to closely match the provided
   reference implementation: scoreboard, round heading, reveal
   zone with VS, hand section, and the card component itself.
   ============================================================ */
.tsw-scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0.8rem 0; }
.tsw-sb-player { display: flex; flex-direction: column; }
.tsw-sb-player.right { text-align: right; }
.tsw-sb-name { font-size: 0.7rem; color: #8fa2b8; letter-spacing: 0.05em; margin-bottom: 3px; }
.tsw-sb-score { font-family: 'Russo One', sans-serif; font-size: 1.8rem; }
.tsw-sb-label { color: #8fa2b8; font-size: 0.65rem; letter-spacing: 0.12em; text-align: center; text-transform: uppercase; }

.tsw-round-heading { text-align: center; margin: 0.6rem 0; }
.tsw-round-num { color: #8498ae; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 4px; }
.tsw-round-instruction { color: #91a3b8; margin-top: 6px; font-size: 0.78rem; }

.tsw-reveal-zone { min-height: 60px; display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 0.8rem 0; flex-wrap: wrap; }
.tsw-versus { font-size: 0.9rem; color: #64748b; font-weight: 800; }

.tsw-round-result-banner { text-align: center; font-family: 'Russo One', sans-serif; font-size: 1.1rem; margin: 0.6rem 0; }
.tsw-round-result-banner.win { color: #47dd91; }
.tsw-round-result-banner.loss { color: #ff6978; }

.tsw-hand-section { border-top: 1px solid rgba(255,255,255,0.08); padding: 0.9rem 0 0.5rem; margin-top: 0.6rem; }
.tsw-hand-title { color: #8498ae; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.6rem; margin-bottom: 0.6rem; text-align: center; }
.tsw-hand { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

.tsw-match-history { display: grid; gap: 0.4rem; text-align: left; margin: 0.8rem 0; }
.tsw-history-item { background: rgba(255,255,255,0.035); padding: 0.6rem 0.7rem; border-radius: 6px; color: #b8c5d4; font-size: 0.68rem; line-height: 1.4; }

/* Card component — the core visual matching the reference exactly */
.tsw-matchcard { position: relative; width: 130px; min-height: 175px; padding: 0.6rem; background: linear-gradient(160deg,#16263a,#0d1827); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; transition: transform 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; }
.tsw-matchcard.selectable { cursor: pointer; }
.tsw-matchcard.selectable:active { transform: translateY(-4px) scale(0.98); border-color: #38bdf8; }
.tsw-matchcard.winner { border-color: #46d98c; box-shadow: 0 0 0 2px rgba(70,217,140,0.15); animation: tswWinnerGlow 0.8s ease 2; }
.tsw-matchcard.loser { opacity: 0.55; }
.tsw-mc-rating { position: absolute; right: 0.5rem; top: 0.5rem; font-family: 'Russo One', sans-serif; font-size: 1.05rem; }
.tsw-mc-position { display: inline-block; font-size: 0.56rem; padding: 0.15rem 0.35rem; border-radius: 5px; background: rgba(255,255,255,0.08); color: #aad3ee; margin-bottom: 1.2rem; }
.tsw-mc-name { font-size: 0.78rem; font-weight: 800; line-height: 1.1; min-height: 1.7rem; }
.tsw-mc-club { color: #8296ab; font-size: 0.56rem; margin: 0.2rem 0 0.5rem; }
.tsw-mc-stats { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 0.4rem; display: grid; gap: 0.2rem; }
.tsw-mc-stat-row { display: flex; justify-content: space-between; font-size: 0.56rem; color: #c3cedb; }
.tsw-mc-stat-row.active { color: #38bdf8; font-weight: 800; }
.tsw-mc-total { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 0.35rem; padding-top: 0.4rem; display: flex; justify-content: space-between; font-weight: 800; color: #f1f5f9; font-size: 0.72rem; }

@media (max-width: 640px) {
  .tsw-matchcard { width: calc(50% - 0.3rem); }
  .tsw-hand .tsw-matchcard { width: calc(50% - 0.25rem); }
}

/* ============================================================
   TSW PROFILE GATE — shared Create Profile / Sign In modal.
   Self-contained dark-card design so it reads identically well
   regardless of the host page's own background (light pages like
   Cards/Games/Profile, or the dark Battle background).
   ============================================================ */
.tsw-gate-overlay {
  position: fixed; inset: 0; z-index: 4000; display: none;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgba(4,7,24,0.72); backdrop-filter: blur(6px);
  overflow-y: auto;
}
.tsw-gate-overlay.visible { display: flex; }

/* Card shell — matches the shadcn authentication-card proportions
   (max 440px, generous padding, soft border) in the site's dark
   palette. */
.tsw-gate-panel {
  position: relative; width: 100%; max-width: 440px;
  display: flex; flex-direction: column; gap: 1.4rem;
  background: linear-gradient(155deg, #171d47, #0d1130);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 1.6rem 1.25rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  margin: auto;
}
@media (min-width: 640px) { .tsw-gate-panel { padding: 2rem; } }

.tsw-gate-close {
  position: absolute; top: 0.6rem; right: 0.8rem;
  background: none; border: none; color: rgba(230,233,255,0.5);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.tsw-gate-close:hover { color: #fff; }

/* Centred icon medallion with the soft gradient ring */
.tsw-gate-head { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }
.tsw-gate-medallion {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 50%;
  background: linear-gradient(to bottom, rgba(163,163,163,0.16), transparent);
}
.tsw-gate-medallion-inner {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
  color: rgba(230,233,255,0.75);
}
.tsw-gate-medallion-inner svg { width: 24px; height: 24px; }
@media (min-width: 640px) {
  .tsw-gate-medallion { width: 88px; height: 88px; }
  .tsw-gate-medallion-inner { width: 60px; height: 60px; }
  .tsw-gate-medallion-inner svg { width: 30px; height: 30px; }
}

.tsw-gate-title {
  font-family: 'Source Serif 4', serif; font-weight: 700;
  font-size: 1.18rem; color: #fff; text-align: center; margin: 0;
}
.tsw-gate-desc {
  font-size: 0.8rem; color: rgba(230,233,255,0.62);
  text-align: center; margin: 0; line-height: 1.5; letter-spacing: -0.006em;
}
.tsw-gate-sep { height: 1px; width: 100%; background: rgba(255,255,255,0.1); }

.tsw-gate-form { display: flex; flex-direction: column; gap: 0.9rem; }
.tsw-gate-field { display: flex; flex-direction: column; gap: 0.45rem; }
.tsw-gate-field label {
  font-size: 0.76rem; font-weight: 600; color: rgba(230,233,255,0.9);
  letter-spacing: 0; text-transform: none;
}
.tsw-gate-field label .req { color: #ff8a80; }
.tsw-gate-field input {
  width: 100%; height: 40px; padding: 0 0.75rem;
  background: rgba(255,255,255,0.05); color: #fff;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 8px;
  font-size: 0.85rem; font-family: 'Inter', sans-serif;
}
.tsw-gate-field input::placeholder { color: rgba(230,233,255,0.38); }
.tsw-gate-field input:focus {
  outline: none; border-color: rgba(212,196,74,0.8);
  box-shadow: 0 0 0 3px rgba(212,196,74,0.18);
}

/* Password field with the trailing eye toggle */
.tsw-gate-pw { position: relative; }
.tsw-gate-pw input { padding-right: 2.4rem; }
.tsw-gate-eye {
  position: absolute; top: 0; right: 0; height: 100%; width: 2.25rem;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: rgba(230,233,255,0.55); border-radius: 0 8px 8px 0;
}
.tsw-gate-eye:hover { color: #fff; }
.tsw-gate-eye svg { width: 16px; height: 16px; }

.tsw-gate-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tsw-gate-check {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.76rem; color: rgba(230,233,255,0.9); cursor: pointer;
}
.tsw-gate-check input { width: 15px; height: 15px; accent-color: #d4c44a; cursor: pointer; }

.tsw-gate-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: #d4c44a; font-size: 0.76rem; font-weight: 600; font-family: 'Inter', sans-serif;
}
.tsw-gate-link:hover { text-decoration: underline; }
.tsw-gate-link.underline { text-decoration: underline; }

.tsw-gate-submit-btn {
  width: 100%; height: 40px; border: none; border-radius: 8px;
  background: #d4c44a; color: #0e1555;
  font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 800;
  cursor: pointer; transition: filter 0.15s ease;
}
.tsw-gate-submit-btn:hover { filter: brightness(1.08); }
.tsw-gate-submit-btn:disabled { opacity: 0.6; cursor: default; }

.tsw-gate-alt-btn {
  width: 100%; height: 40px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,0.05); color: #fff;
  border: 1px solid rgba(255,255,255,0.16);
  font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 600;
}
.tsw-gate-alt-btn:hover { background: rgba(255,255,255,0.09); }

.tsw-gate-note { font-size: 0.72rem; color: rgba(230,233,255,0.55); line-height: 1.5; margin: 0; }
.tsw-gate-footline {
  display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
  font-size: 0.76rem; color: rgba(230,233,255,0.6);
}

/* Six OTP boxes */
.tsw-gate-otp { display: flex; gap: 0.5rem; justify-content: space-between; }
.tsw-gate-otp-slot {
  flex: 1; min-width: 0; aspect-ratio: 1; max-height: 60px;
  text-align: center; font-size: 1.1rem; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 8px;
  font-family: 'Inter', sans-serif;
}
.tsw-gate-otp-slot:focus {
  outline: none; border-color: rgba(212,196,74,0.8);
  box-shadow: 0 0 0 3px rgba(212,196,74,0.18);
}

.tsw-gate-error { color: #ff8a80; font-size: 0.76rem; text-align: center; min-height: 1rem; line-height: 1.45; }
.tsw-gate-error.ok { color: #7fe39b; }

.tsw-gate-toggle-row { text-align: center; font-size: 0.78rem; color: rgba(230,233,255,0.6); }
.tsw-gate-toggle-row button { background: none; border: none; color: #d4c44a; font-weight: 700; text-decoration: underline; cursor: pointer; font-size: 0.78rem; margin-left: 0.3rem; font-family: 'Inter', sans-serif; }
/* ============================================================
   TSW PROFILE DASHBOARD (Phase 4) — cross-site profile page.
   Light theme, matching the rest of profile.html/games.html.
   ============================================================ */
.tsw-pf-signedout {
  max-width: 420px; margin: 2rem auto; text-align: center;
  background: var(--white); border: 1px solid var(--border); padding: 2rem 1.6rem;
}
.tsw-pf-signedout-title { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.3rem; color: var(--navy); margin-bottom: 0.6rem; }
.tsw-pf-signedout p { font-size: 0.82rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.3rem; }
.tsw-pf-signin-btn {
  background: var(--navy); color: white; border: none; padding: 0.8rem 1.6rem;
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
}

.tsw-pf-identity { display: flex; align-items: center; gap: 1rem; }
.tsw-pf-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: var(--navy); color: white; display: grid; place-items: center;
  font-family: 'Source Serif 4', serif; font-size: 1.5rem; font-weight: 700;
}
.tsw-pf-username { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.15rem; color: #fff; display: flex; align-items: center; gap: 0.4rem; }
.tsw-pf-level-sub { font-size: 0.76rem; color: var(--muted); margin-top: 0.2rem; }

.tsw-pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 700px) { .tsw-pf-grid { grid-template-columns: 1fr; } }

.tsw-pf-card-title { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.1rem; color: #fff; margin-bottom: 0.9rem; }
.tsw-pf-stat-row { display: flex; gap: 0.8rem; margin-bottom: 1.1rem; }
.tsw-pf-stat { flex: 1; text-align: center; background: var(--light); padding: 0.7rem 0.4rem; }
.tsw-pf-stat strong { display: block; font-family: 'Source Serif 4', serif; font-size: 1.15rem; color: var(--navy); }
.tsw-pf-stat span { display: block; font-size: 0.62rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.2rem; }

.tsw-pf-rtg-line { font-size: 0.78rem; color: var(--navy); background: var(--light); padding: 0.5rem 0.7rem; margin-bottom: 1rem; }
.tsw-pf-rtg-line strong { color: #a1841f; }

.tsw-pf-recent-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; margin-bottom: 0.5rem; }
.tsw-pf-recent-list { margin-bottom: 1.1rem; }
.tsw-pf-recent-item { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid rgba(139,92,246,0.2); font-size: 0.78rem; color: #fff; }
.tsw-pf-recent-item:last-child { border-bottom: none; }
.tsw-pf-recent-stars { color: #d4a72c; letter-spacing: 0.05em; }
.tsw-pf-empty { font-size: 0.78rem; color: rgba(230,233,255,0.6); padding: 0.6rem 0; margin-bottom: 1rem; }

.tsw-pf-link-btn { display: inline-block; font-size: 0.76rem; font-weight: 700; color: #a78bfa; text-decoration: underline; }

.tsw-pf-minigame-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin-bottom: 1.1rem; }
@media (max-width: 500px) { .tsw-pf-minigame-grid { grid-template-columns: 1fr; } }
.tsw-pf-minigame-item { background: var(--light); padding: 0.6rem 0.7rem; }
.tsw-pf-minigame-name { display: block; font-size: 0.7rem; font-weight: 700; color: var(--navy); margin-bottom: 0.15rem; }
.tsw-pf-minigame-stat { display: block; font-size: 0.72rem; color: var(--muted); }

/* ============================================================
   TSW 5-A-SIDE — more rectangular than curved, and given more
   vertical presence now that the coffee-support box below it is
   gone. Scoped to #panel-bxi so the standalone Duel a Friend quiz
   (which shares .duel-choice-card / .duel-code-input / etc.) keeps
   its own rounder look untouched.
   ============================================================ */
#panel-bxi .game-card { border-radius: 6px; padding: 1.8rem 1.5rem 2.2rem; }
#panel-bxi .duel-choice-card { border-radius: 4px; }
#panel-bxi .duel-code-input { border-radius: 3px; }
#panel-bxi .duel-code-display { border-radius: 4px; }
#panel-bxi .duel-copy-link-btn { border-radius: 4px; }
#panel-bxi .duel-leave-btn { border-radius: 4px; }
#panel-bxi .duel-waiting-spinner { border-radius: 50%; } /* the spin animation still wants a circle */

/* ============================================================
   ARTICLE CARD GRID + EXPANDABLE CARD  (news page only)
   ============================================================
   The ArticleCard design (full-bleed image, gradient wash,
   category kicker, title, "Read" pill) and the expandable-card
   behaviour, rebuilt natively - the originals are React + Tailwind
   + framer-motion, none of which this static site has. The
   expansion uses a FLIP transform from the tapped card's own
   rectangle, which is what framer-motion's layoutId does under the
   hood, so it still grows out of the card you actually pressed.

   Scoped to .tsw-card-grid so the same .article-item markup used on
   the homepage, transfers, match-analysis and every article's
   "More Articles" list is left completely alone.
   ============================================================ */
.article-list.tsw-card-grid {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  background: none; border: none; box-shadow: none; border-radius: 0;
}
@media (min-width: 620px) { .article-list.tsw-card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .article-list.tsw-card-grid { grid-template-columns: 1fr 1fr 1fr; } }

.tsw-card-grid .article-item {
  position: relative; display: block; height: 20rem;
  border: none; border-radius: 12px; overflow: hidden;
  padding: 1.5rem; color: #fff; cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,0.42);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tsw-card-grid .article-item:hover {
  background: none; transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 44px rgba(0,0,0,0.55);
}

/* The existing <img> becomes the card's background layer. */
.tsw-card-grid .article-item-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; z-index: 0;
}
.tsw-card-grid .article-item-img::after { content: none; }
.tsw-card-grid .article-item-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.tsw-card-grid .article-item:hover .article-item-img img { transform: scale(1.06); }

/* Gradient wash, tinted per category via --card-grad. */
.tsw-card-grid .article-item::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, var(--card-grad, rgba(10,14,53,0.95)), rgba(10,14,53,0.15));
  opacity: 0.82; transition: opacity 0.3s ease;
}
.tsw-card-grid .article-item:hover::before { opacity: 0.9; }

.tsw-card-grid .article-item-body {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 0;
}
.tsw-card-grid .article-item-body .cat {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; opacity: 0.85; margin-bottom: 0.4rem;
  background: none; padding: 0; color: #fff;
}
.tsw-card-grid .article-item-title {
  font-family: 'Source Serif 4', serif; font-size: 1.35rem; font-weight: 700;
  line-height: 1.2; color: #fff; margin-bottom: 0.45rem;
}
.tsw-card-grid .article-item:hover .article-item-title { color: #fff; }
.tsw-card-grid .article-item-excerpt {
  font-size: 0.76rem; line-height: 1.5; color: rgba(255,255,255,0.82);
  -webkit-line-clamp: 3;
}
.tsw-card-grid .article-item-meta {
  margin-top: auto; align-self: flex-start;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(4px);
  border-radius: 8px; padding: 0.45rem 0.8rem;
  font-size: 0.72rem; font-weight: 600; color: #fff;
  transition: background 0.3s ease;
}
.tsw-card-grid .article-item:hover .article-item-meta { background: rgba(255,255,255,0.3); }

/* Category tints, matching the reference's per-card gradients. */
.tsw-card-grid .article-item[data-subcat="news"]     { --card-grad: rgba(4,52,86,0.95); }
.tsw-card-grid .article-item[data-subcat="analysis"] { --card-grad: rgba(6,64,52,0.95); }
.tsw-card-grid .article-item[data-subcat="features"] { --card-grad: rgba(60,26,86,0.95); }
.tsw-card-grid .article-item[data-subcat="opinion"]  { --card-grad: rgba(86,34,10,0.95); }

/* "Want to write for us?" card keeps a flat treatment - it has no
   image to sit behind a gradient. */
.tsw-card-grid .cta-write-item { background: linear-gradient(155deg, #141c6a, #0a0e35); }
.tsw-card-grid .cta-write-item::before { content: none; }
.tsw-card-grid .cta-write-img { position: relative; height: auto; inset: auto; }

/* ---------- expanded view ---------- */
.tsw-exp-backdrop {
  position: fixed; inset: 0; z-index: 5000; opacity: 0;
  background: rgba(4,7,24,0.6); backdrop-filter: blur(8px);
  transition: opacity 0.28s ease; pointer-events: none;
}
.tsw-exp-backdrop.on { opacity: 1; pointer-events: auto; }

.tsw-exp-shell {
  position: fixed; inset: 0; z-index: 5001;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1rem; pointer-events: none;
}
.tsw-exp-shell.on { pointer-events: auto; }

.tsw-exp-card {
  position: relative; width: 100%; max-width: 850px;
  max-height: calc(100vh - 2rem); margin-top: 1rem;
  display: flex; flex-direction: column; overflow: hidden;
  background: #0d1130; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,0.65);
  transform-origin: top left;
  transition: transform 0.42s cubic-bezier(0.22,1,0.36,1), opacity 0.28s ease;
}
.tsw-exp-scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tsw-exp-hero { position: relative; width: 100%; height: 16rem; flex-shrink: 0; }
.tsw-exp-hero img { width: 100%; height: 100%; object-fit: cover; }
.tsw-exp-hero::after {
  content: ""; position: absolute; inset-x: 0; left: 0; right: 0; bottom: -1px;
  height: 70px; background: linear-gradient(to top, #0d1130, transparent);
}
.tsw-exp-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; padding: 1.5rem 1.5rem 0.5rem;
}
.tsw-exp-kicker { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #d4c44a; }
.tsw-exp-title { font-family: 'Source Serif 4', serif; font-size: 1.6rem; font-weight: 800; color: #fff; margin: 0.25rem 0 0.3rem; line-height: 1.2; }
.tsw-exp-meta { font-size: 0.72rem; color: rgba(230,233,255,0.55); }
.tsw-exp-close {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.16); cursor: pointer;
  transition: transform 0.4s ease, background 0.2s ease, color 0.2s ease;
}
.tsw-exp-close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.tsw-exp-close svg { width: 20px; height: 20px; transform: rotate(45deg); }
.tsw-exp-body { padding: 0 1.5rem 1.5rem; }
.tsw-exp-body .article-body { font-size: 0.95rem; }
.tsw-exp-footer {
  padding: 0 1.5rem 1.5rem; display: flex; gap: 0.6rem; flex-wrap: wrap;
}
.tsw-exp-openlink {
  display: inline-block; background: #d4c44a; color: #0e1555;
  border-radius: 8px; padding: 0.6rem 1rem;
  font-size: 0.78rem; font-weight: 800;
}
.tsw-exp-loading { padding: 2.5rem 1.5rem; text-align: center; color: rgba(230,233,255,0.6); font-size: 0.85rem; }

@media (prefers-reduced-motion: reduce) {
  .tsw-card-grid .article-item,
  .tsw-exp-card { transition: none; }
}

/* Typography for article content shown inside the dark expanded
   panel. Article pages are light-themed and define .article-body in
   their own inline <style>, which doesn't travel with the fetched
   markup - so without these the text inherits the site's dark #111
   body colour and renders almost invisibly on the dark panel. */
.tsw-exp-body .article-body {
  font-family: 'Source Serif 4', serif;
  color: rgba(230,233,255,0.86);
  line-height: 1.75;
}
.tsw-exp-body .article-body p { margin-bottom: 1.1rem; color: rgba(230,233,255,0.86); }
.tsw-exp-body .article-body h2 {
  font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 800;
  color: #d4c44a; margin: 1.8rem 0 0.7rem; padding-bottom: 0.45rem;
  border-bottom: 2px solid rgba(212,196,74,0.45);
}
.tsw-exp-body .article-body h3,
.tsw-exp-body .article-body h4 { color: #fff; margin: 1.2rem 0 0.5rem; }
.tsw-exp-body .article-body strong { color: #fff; }
.tsw-exp-body .article-body a { color: #67e8ff; text-decoration: underline; }
.tsw-exp-body .article-body ul,
.tsw-exp-body .article-body ol { margin: 0.8rem 0 1.2rem 1.3rem; }
.tsw-exp-body .article-body li { margin-bottom: 0.5rem; color: rgba(230,233,255,0.86); }
.tsw-exp-body .article-body img { border-radius: 8px; margin: 1rem 0; }
.tsw-exp-body .article-body blockquote {
  border-left: 3px solid #d4c44a; padding-left: 1rem;
  color: rgba(230,233,255,0.75); font-style: italic; margin: 1.2rem 0;
}

/* Stat callout boxes carry their own dark navy background on the
   article page; re-created here so they don't collapse into loose
   text when lifted out of it. */
.tsw-exp-body .stat-callout {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 1.2rem; margin: 1.6rem 0; text-align: center;
}
.tsw-exp-body .stat-callout .num {
  font-family: 'Source Serif 4', serif; font-weight: 800;
  font-size: 1.5rem; color: #d4c44a; line-height: 1.1;
}
.tsw-exp-body .stat-callout .lbl {
  font-family: 'Inter', sans-serif; font-size: 0.6rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(230,233,255,0.55); margin-top: 0.3rem;
}
@media (max-width: 520px) {
  .tsw-exp-body .stat-callout { grid-template-columns: 1fr; gap: 0.9rem; }
}
.tsw-exp-body .article-inline-illus {
  display: flex; align-items: center; justify-content: center;
  margin: 1.6rem 0; padding: 1.4rem; border-radius: 10px;
  background: linear-gradient(135deg, #1a2d6e, #06102e);
}
.tsw-exp-body .article-inline-illus svg { width: 80px; height: 80px; }





/* ============================================================
   RESIZABLE NAVBAR
   ============================================================
   Aceternity's resizable navbar: full width at the top of the page,
   then on scroll it narrows, lifts, blurs and gains a shadow. Rebuilt
   natively - the original is React + motion, which needs a build step
   this site doesn't have. The scroll state is a single class toggled
   from JS; everything else is CSS transitions.
   ============================================================ */
.rnav-wrap { position: sticky; top: 0; z-index: 500; width: 100%; }
/* At rest the navbar is a normal full-bleed site header: square
   corners, flush to the top and both edges, hairline along the bottom.
   On scroll it morphs into the floating rounded pill - narrower, inset
   from the edges, dropped down a little, fully rounded.

   Only the outer container morphs. The logo, menu items, colours,
   active-tab styling and hamburger are untouched by all of this.

   max-width uses 100vw rather than 100% so both ends of the transition
   are lengths - a percentage-to-length interpolation is well supported
   but not guaranteed, and would snap rather than glide if it failed.
   width:100% still governs the actual size, so 100vw never binds at
   rest and the scrollbar can't cause overflow. */
.rnav {
  width: 100%; max-width: 100vw; margin: 0 auto;
  padding: 0;
  transition: max-width 0.4s cubic-bezier(0.22,1,0.36,1),
              transform 0.4s cubic-bezier(0.22,1,0.36,1),
              padding 0.4s cubic-bezier(0.22,1,0.36,1);
}
/* Scrolled: narrower, floating, translucent + blurred. */
.rnav.scrolled { max-width: 820px; padding: 0.35rem 0.6rem; transform: translateY(10px); }

.rnav-body, .rnav-m-header {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.5rem 0.9rem;
  background: transparent; border: 1px solid transparent;
}
/* Radius and edge live on the two morphing surfaces (.rnav-body on
   desktop, .rnav-mobile on mobile), never on .rnav-m-header, which is
   just a row inside the mobile surface. */
.rnav-body {
  border-radius: 0;
  padding: 0.62rem clamp(0.9rem, 3vw, 2.4rem);
  /* Same dark navy in both states, so the squared header and the pill it
     morphs into read as one surface. The shader canvas paints over this,
     so it is also the fallback if WebGL is unavailable. */
  background: #090e3a;
  border-bottom-color: rgba(212,196,74,0.22);
  box-shadow: 0 3px 16px rgba(0,0,0,0.32);
  transition: background 0.4s ease, box-shadow 0.4s ease,
              border-color 0.4s ease, border-radius 0.4s cubic-bezier(0.22,1,0.36,1),
              padding 0.4s cubic-bezier(0.22,1,0.36,1),
              backdrop-filter 0.4s ease;
}
.rnav.scrolled .rnav-body {
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  background: #090e3a;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-color: rgba(212,196,74,0.26);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}

.rnav-body { justify-content: space-between; }
@media (max-width: 899px) { .rnav-body { display: none; } }

/* ---- logo ---- */
.rnav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.rnav-logo-name {
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.02rem;
  color: #fff; letter-spacing: -0.02em; white-space: nowrap;
}
.rnav-logo-name span { color: var(--yellow); }

/* ---- desktop items, with the hover pill the original animates ---- */
.rnav-items { display: flex; align-items: center; gap: 0.15rem; flex: 1; justify-content: center; }
.rnav-item {
  position: relative; padding: 0.42rem 0.7rem; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 500;
  color: rgba(255,255,255,0.8); text-decoration: none; white-space: nowrap;
  transition: color 0.2s ease;
}
.rnav-item span { position: relative; z-index: 1; }
.rnav-item::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: rgba(255,255,255,0.10); opacity: 0; transition: opacity 0.2s ease;
}
.rnav-item:hover { color: #fff; }
.rnav-item:hover::before { opacity: 1; }
.rnav-item.active { color: #fff; }
.rnav-item.active::before { opacity: 1; }

/* ---- buttons ---- */
.rnav-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.rnav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.45rem 0.9rem; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-size: 0.76rem; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease;
}
.rnav-btn:hover { transform: translateY(-1px); }
.rnav-btn.primary { background: var(--yellow); color: var(--navy); box-shadow: 0 2px 10px rgba(212,196,74,0.25); }
.rnav-btn.primary:hover { filter: brightness(1.08); }
.rnav-btn.secondary { background: rgba(255,255,255,0.07); color: #fff; border: 1px solid rgba(255,255,255,0.14); }
.rnav-btn.secondary:hover { background: rgba(255,255,255,0.13); }

/* ---- mobile ---- */
.rnav-mobile { display: none; }
@media (max-width: 899px) { .rnav-mobile { display: block; } }
.rnav-m-header { justify-content: space-between; }
@media (prefers-reduced-motion: reduce) {
  .rnav, .rnav-body, .rnav-m-header, .rnav-btn { transition: none; }
}

/* ---- Condensed mobile tab row ----
   Six shortcuts on their own line beneath the logo/burger row, so
   mobile isn't just a burger while desktop shows everything. The
   burger still opens the full menu (which adds Transfers and Stats).
   Sits inside the same rounded surface, and folds away once the
   navbar shrinks into its floating pill on scroll. */
.rnav-m-tabs {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.15rem; margin-top: 0.35rem; padding: 0 0.4rem 0.35rem;
  /* Seven destinations live here now that the burger is gone, so the
     row scrolls sideways on the narrowest phones rather than clipping
     anything out of reach. Vertical stays hidden for the max-height
     transition. */
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-height: 44px; opacity: 1;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
}
.rnav-m-tabs::-webkit-scrollbar { display: none; }
.rnav-m-tab {
  flex: 0 1 auto; min-width: 0;
  padding: 0.3rem 0.28rem; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 500;
  color: rgba(255,255,255,0.8); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.2s ease, background 0.2s ease;
}
.rnav-m-tab:hover { color: #fff; }
.rnav-m-tab.active { color: #fff; background: rgba(255,255,255,0.12); }

/* Scrolled: collapse the row so the navbar becomes the compact
   floating pill the component is built around. */
.rnav.scrolled .rnav-m-tabs {
  max-height: 0; opacity: 0; margin-top: 0;
}

/* Very narrow phones: trim the padding so all six still fit. */
@media (max-width: 359px) {
  .rnav-m-tabs { gap: 0; padding: 0 0.2rem; }
  .rnav-m-tab { font-size: 0.66rem; padding: 0.3rem 0.18rem; }
}

/* ---- Mobile: one pill around the whole navbar ----
   The scrolled bubble used to be painted on .rnav-m-header, which is
   only the logo/burger row - the tab row is its sibling, so it sat
   outside the bubble and the two halves came apart on scroll. The
   surface moves up to .rnav-mobile, which wraps both rows, so the
   whole thing shrinks into a single pill together.

   Two things have to follow from that: the header row must stop
   painting its own surface (or you get a pill inside a pill), and the
   drawer comes out of normal flow, otherwise opening it would stretch
   the pill down around the full menu. */
@media (max-width: 899px) {
  /* Square and full-bleed at rest, rounded pill once scrolled - the
     same morph the desktop bar does, on the container that wraps both
     the logo/burger row and the tab row. */
  .rnav-mobile {
    position: relative;
    border-radius: 0;
    background: #090e3a;
    border: 1px solid transparent;
    border-bottom-color: rgba(212,196,74,0.22);
    box-shadow: 0 3px 16px rgba(0,0,0,0.32);
    transition: background 0.4s ease, box-shadow 0.4s ease,
                border-color 0.4s ease,
                border-radius 0.4s cubic-bezier(0.22,1,0.36,1);
  }
  .rnav.scrolled .rnav-mobile {
    border-radius: 26px;
    background: #090e3a;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-color: rgba(212,196,74,0.26);
    box-shadow: 0 8px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  }

  /* Tabs stay put inside the pill rather than collapsing away, so the
     six shortcuts are still reachable once you've scrolled. */
  .rnav.scrolled .rnav-m-tabs {
    max-height: 44px;
    opacity: 1;
    margin-top: 0;
    padding-bottom: 0.4rem;
  }
}

/* ---- WebGL shader textures on the navbar ----
   Cosmetic only. tsw-nav-shader.js injects the canvases; if JS is off
   or WebGL is unavailable no layer is ever added and every surface
   keeps the background below it, so nothing depends on this rendering.

   The navbar texture runs unscrolled as well as scrolled - it is the
   navbar's surface now, not just the pill's - so there is no opacity
   gate on it any more.

   Each layer is clipped by its own border-radius rather than putting
   overflow:hidden on the container: the mobile drawer is absolutely
   positioned outside .rnav-mobile and would otherwise be cut off. */
.rnav-shader-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.rnav-shader { display: block; width: 100%; height: 100%; }

/* No scrim. The previous recipe ran bright colour through the middle
   of the bar and needed one; Pulsing Border keeps its light on a thin
   line pinned a few pixels from the rim and leaves the interior almost
   black. Measured on real renders, the band the text occupies sits at
   11.5-12.3:1 against an 80% white label with no scrim at all, so
   adding one would only dull the glow. */

/* Positioning context for the injected canvas. The border and radius
   are owned by the squared-header / pill morph rules above - setting
   border-color here would override the bottom-only hairline with a
   full box, so this rule deliberately only sets position. */
.rnav-body, .rnav-mobile { position: relative; }

/* Rows lifted above the injected canvas. */
.rnav-body > .rnav-logo,
.rnav-body > .rnav-items,
.rnav-body > .rnav-actions,
.rnav-m-header,
.rnav-m-tabs { position: relative; z-index: 1; }

/* ---- Shimmer wordmark ----
   A light glare that pans across "TheSpursWatch" in the navbar. The
   reference is React + framer-motion animating a background position;
   the same effect is a clipped gradient and one keyframe here, so it
   costs nothing and needs no library.

   Note this is an *effect*, not a typeface - the wordmark still uses
   Inter 800, it just gains a moving highlight. */
.rnav-logo-name {
  background-image: linear-gradient(
    100deg,
    #ffffff 0%, #ffffff 38%,
    rgba(255,255,255,0.55) 46%,
    #fff8c9 50%,
    rgba(255,255,255,0.55) 54%,
    #ffffff 62%, #ffffff 100%
  );
  background-size: 220% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: tswShimmer 4.5s linear infinite;
}
/* "Watch" keeps the gold, so the brand colour isn't lost to the
   gradient - it gets its own matching sweep instead. */
.rnav-logo-name span {
  background-image: linear-gradient(
    100deg,
    var(--yellow) 0%, var(--yellow) 38%,
    #fff3a8 46%, #ffffff 50%, #fff3a8 54%,
    var(--yellow) 62%, var(--yellow) 100%
  );
  background-size: 220% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: tswShimmer 4.5s linear infinite;
}
@keyframes tswShimmer {
  to { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rnav-logo-name, .rnav-logo-name span { animation: none; background-position: 50% 0; }
}

/* ---- Tag group filters (news page) ----
   React Aria / Jolly UI TagGroup pattern: a labelled, focusable list
   of pills with single selection and keyboard navigation. Rebuilt
   natively; the behaviour lives in news.html and mirrors into the
   original hidden selects so the existing filter logic is untouched. */
/* Collapsed by default: each group shows only its selected pill plus a
   small + to open the rest. Because the groups are inline they share
   one wrapped row instead of taking three, which is most of the space
   saved. Opening a group promotes it to its own full-width row, where
   it looks exactly as it always did. */
.taggroup {
  display: inline-flex; align-items: center;
  /* flex-wrap is load-bearing: without it a full-width label and the
     pill list are forced onto one line, which squeezes the pills into
     a narrow column down the right-hand side. */
  flex-wrap: wrap;
  gap: 0.5rem; margin: 0 1rem 0.5rem 0;
  max-width: 100%;
  vertical-align: top;
}
.taggroup.expanded { display: flex; width: 100%; align-items: baseline; }
.taggroup-label {
  flex: 0 0 auto;
  font-family: 'Inter', sans-serif; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(230,233,255,0.45);
}
.taggroup-list {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  align-items: center; min-width: 0; max-width: 100%;
}
/* Expanded on a wide screen: pills fill the space beside the heading. */
.taggroup.expanded .taggroup-list { flex: 1 1 auto; }

/* Only the selected pill survives collapse. The + button is always
   visible, so a group can always be reopened. */
.taggroup:not(.expanded) .tag:not(.selected) { display: none; }

.taggroup-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.45rem; height: 1.45rem; flex-shrink: 0;
  padding: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(230,233,255,0.7);
  transition: background 0.18s ease, color 0.18s ease,
              border-color 0.18s ease, transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
.taggroup-more:hover { background: rgba(255,255,255,0.1); color: #fff; }
.taggroup-more:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.taggroup-more svg { width: 0.72rem; height: 0.72rem; display: block; }
/* The + becomes an x by rotating, rather than swapping glyphs. */
.taggroup.expanded .taggroup-more { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .taggroup-more { transition: background 0.18s ease, color 0.18s ease; }
}

.tag {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.3rem 0.7rem; border-radius: 999px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 600;
  color: rgba(230,233,255,0.7);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.tag:hover { background: rgba(255,255,255,0.1); color: #fff; }
.tag:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.tag.selected {
  background: var(--yellow); color: var(--navy);
  border-color: var(--yellow); font-weight: 700;
}
.tag-hidden-select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

@media (max-width: 520px) {
  .taggroup { gap: 0.35rem; margin-right: 0.7rem; }
  /* Expanded on a phone: the heading takes its own line and the pills
     wrap full-width directly beneath it, so they stay aligned with
     their heading instead of forming a column beside it. flex-basis
     rather than min-width, so the wrap is explicit rather than a
     side effect of an over-wide item. */
  .taggroup.expanded { display: block; }
  .taggroup.expanded .taggroup-label { flex: 0 0 100%; display: block; margin-bottom: 0.35rem; }
  .taggroup.expanded .taggroup-list { flex: 1 1 100%; width: 100%; }
}



/* ============================================================
   DEEP SEA — homepage Fixtures / Table pair
   Recreates the 21st.dev "Deep Sea" gradient (Axis Blend):
   a straight linear gradient along 160deg, Space #000428 at 0%
   running to Ocean #004E92 at 100%.

   The recipe's remaining parameters describe an oversized layer
   that is blurred and warped on a canvas - the source itself notes
   the CSS form is an approximation and that an exported image is
   needed for the exact result. Rather than paste the flat
   two-stop version alone, the extra layers below approximate the
   ones that can be expressed in CSS:
     softness 26 / soften 4  -> a blurred oversized wash
     scale 68, centre 50/50  -> its size and placement
     wave 12 / distortion 28 -> the wash offset off-axis so the
                                blend is not a perfectly straight
                                ramp
   grain 0, vignette 0 and animated:false are honoured literally -
   there is no noise, no vignette, and nothing moves. The previous
   card's orbiting blob animation is gone with it.
   ============================================================ */

.bottom-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.8rem;
  /* Each card sizes to its own content. The table now runs to a full 20
     rows, and stretching the shorter fixtures card to match would leave
     a tall empty panel beside it. */
  align-items: start;
}
/* The pair previously carried these as inline styles, which no
   media query could override - hence the columns never stacked on
   a phone. Moved here so narrow screens get one card per row. */
@media (max-width: 640px) {
  .bottom-pair { grid-template-columns: 1fr; }
}

.tsw-blobcard {
  position: relative;
  padding: 5px;                 /* the lip the gradient shows through */
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 0;             /* .mini carries 1.8rem; the grid spaces these */
  /* The recipe, verbatim. */
  background-color: #000428;
  background-image: linear-gradient(160deg, #000428 0%, #004E92 100%);
  border: none;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
}

/* The soften layer. Oversized (scale 68 of the card, blown past the
   edges so the blur has nothing to fade into), centred per the
   recipe, then nudged off-axis to stand in for wave/distortion. */
.tsw-blob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 168%;
  aspect-ratio: 1.4;
  transform: translate(-50%, -50%) rotate(-20deg);
  border-radius: 50%;
  z-index: 0;
  filter: blur(38px);
  opacity: 0.55;
  background: radial-gradient(ellipse at 62% 34%,
    #004E92 0%, rgba(0,78,146,0.55) 45%, rgba(0,4,40,0) 72%);
  pointer-events: none;
}

.tsw-blob-glass {
  position: relative;
  z-index: 1;
  border-radius: 10px;
  overflow: hidden;             /* clips .mini-head square corners to the radius */
  /* Lighter than before: the gradient underneath is already dark, so a
     heavy tint would flatten it back to a single navy. */
  background: rgba(0, 6, 34, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  outline: 1px solid rgba(120, 180, 235, 0.20);
  outline-offset: -1px;
}

.tsw-blobcard .mini-head { background: rgba(0, 8, 38, 0.42); }
.tsw-blobcard .tbl-h { background: rgba(0, 8, 38, 0.38); }

/* Measured, not guessed: over the Deep Sea gradient the 38% timestamp and
   the 50% table columns fell to 3.45:1 and 4.12:1. These are the smallest
   values that clear 4.5:1 at both ends of the gradient, with headroom. */
.tsw-blobcard .t-pos,
.tsw-blobcard .t-n { color: rgba(230,233,255,0.62); }


@media (prefers-reduced-motion: reduce) {
  /* Nothing animates here any more; kept as a no-op guard so a future
     change to this block cannot silently reintroduce motion. */
  .tsw-blob { animation: none; }
}

/* backdrop-filter is only a refinement here - if a device lacks it the
   panel simply reads as a flat tint over the gradient. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tsw-blob-glass { background: rgba(0, 6, 34, 0.78); }
}

/* The Battle tile in the Games hub is an <a> rather than a <button>,
   since it navigates to another page instead of opening a panel. These
   two declarations are the only difference a link introduces. */
a.tswb-home-tile { text-decoration: none; color: inherit; }


/* ============================================================
   PROFILE CARDS — same ArticleCard treatment as the Spursboxd
   match cards, so the two pages read as one design.

   Applied via class only: every card keeps its original id and its
   contents are still written by tsw-profile-dashboard.js / xp-system.js,
   untouched. As with the match cards the background image is dropped
   (there is no per-card art) and the gradient carries the identity.
   ============================================================ */
.tsw-pf-card {
  position: relative; overflow: hidden;
  border-radius: 12px; padding: 1.2rem;
  color: #fff;
  background: linear-gradient(150deg, var(--pf-a, #141c6a), var(--pf-b, #0a0e35));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tsw-pf-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(4,7,20,0.45) 0%, rgba(4,7,20,0.18) 100%),
    radial-gradient(circle at 88% 8%, rgba(255,255,255,0.12), transparent 46%);
}
.tsw-pf-card > * { position: relative; z-index: 1; }
.tsw-pf-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0,0,0,0.55); }

/* The card titles pick up the eyebrow treatment from the reference. */
.tsw-pf-card .tsw-pf-card-title {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.9);
  font-family: 'Inter', sans-serif; margin-bottom: 0.8rem;
}

/* Inner stat blocks were built for a light panel; on the gradient they
   need to be translucent rather than solid, with light text. */
.tsw-pf-card .tsw-pf-stat { background: rgba(255,255,255,0.14); border-radius: 8px; }
.tsw-pf-card .tsw-pf-stat strong { color: #fff; }
.tsw-pf-card .tsw-pf-stat span { color: rgba(255,255,255,0.85); }
.tsw-pf-card .tsw-pf-rtg-line { background: rgba(255,255,255,0.12); border-radius: 8px; color: #fff; }
.tsw-pf-card .tsw-pf-rtg-line strong { color: #ffd735; }

.tsw-pf-card.pf-identity   { --pf-a:#3d1d78; --pf-b:#12082c; }
.tsw-pf-card.pf-spursboxd  { --pf-a:#7a6410; --pf-b:#241d02; }
.tsw-pf-card.pf-battle     { --pf-a:#8c1230; --pf-b:#2a0510; }
.tsw-pf-card.pf-minigames  { --pf-a:#0a6b4f; --pf-b:#03211a; }
.tsw-pf-card.pf-xp         { --pf-a:#0b3fa8; --pf-b:#05102f; }

@media (prefers-reduced-motion: reduce) {
  .tsw-pf-card { transition: none; }
  .tsw-pf-card:hover { transform: none; }
}

/* ============================================================
   SECTION NAV MENU — Stats and Spursboxd
   Rebuilt natively from the shadcn/Radix navigation-menu-05
   pattern. The whole point of that component is the underline:
   a 2px rule under each item that scales in from scaleX(0) on
   hover, focus and active, with no background change at all.
   That is reproduced exactly; Radix's roving focus and dropdown
   viewport are not, since these items are plain links to panels
   with no submenus.

   The tile grid stays as the landing screen underneath this - the
   menu is the persistent nav, the tiles are the first thing it
   navigates from.
   ============================================================ */
.tsw-navmenu {
  position: relative; z-index: 5;
  display: flex; align-items: center;
  gap: 2rem;
  margin: 0 0 1.3rem;
  padding: 0 0.15rem 0.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  /* Six items with icons will not fit a phone; scroll rather than wrap,
     so the menu stays one clean line at every width. */
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tsw-navmenu::-webkit-scrollbar { display: none; }

.tsw-navmenu-link {
  position: relative; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.625rem; height: 2.25rem; padding: 0.5rem 0.125rem;
  font-family: 'Inter', sans-serif; font-size: 0.875rem; font-weight: 500;
  color: rgba(255,255,255,0.62);
  background: none; border: none; cursor: pointer; white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease;
}
/* The scaling underline - the defining detail of the reference. */
.tsw-navmenu-link::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--yellow);
  transform: scaleX(0); transition: transform 0.22s cubic-bezier(0.22,1,0.36,1);
}
.tsw-navmenu-link:hover { color: #fff; }
.tsw-navmenu-link:hover::before { transform: scaleX(1); }
.tsw-navmenu-link:focus-visible { color: #fff; outline: none; }
.tsw-navmenu-link:focus-visible::before { transform: scaleX(1); }
.tsw-navmenu-link.active { color: #fff; }
.tsw-navmenu-link.active::before { transform: scaleX(1); }

.tsw-navmenu-link svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

@media (max-width: 640px) {
  .tsw-navmenu { gap: 1.35rem; }
  .tsw-navmenu-link { font-size: 0.82rem; gap: 0.45rem; }
  .tsw-navmenu-link svg { width: 1.05rem; height: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tsw-navmenu-link::before { transition: none; }
}

/* ============================================================
   PLAYER COMPARE — diverging bar layout
   Rebuilt natively from the 21st.dev statistics-card component
   (NumberFlow + framer-motion + lucide). Carried over: the candy
   striped track, the heavily rounded bar, the value sitting in a
   translucent pill inside the fill, the accent colour on the
   standout bar with its dot-and-pointer marker, the label beneath,
   and the staggered grow-in.

   Changed on purpose: the reference stacks VERTICAL bars side by
   side, which needs height to read. A head-to-head of two players
   over five stats works better as horizontal bars diverging from a
   centre line - both names stay on one row, and each stat puts the
   two values directly opposite each other. That was the actual
   complaint: .compare-cards collapsed to one column under 640px,
   which pushed the second player's name below the first.
   ============================================================ */
.tsw-cmp {
  border-radius: 14px; padding: 1.1rem 1rem 1.3rem;
  background: linear-gradient(155deg, #141c6a 0%, #0a0e35 100%);
  border: 1px solid rgba(103,232,255,0.16);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* --- header: both names on one row, always --- */
.tsw-cmp-head {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 0.6rem; align-items: center;
  padding-bottom: 0.9rem; margin-bottom: 0.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.tsw-cmp-player { min-width: 0; }
.tsw-cmp-player.p1 { text-align: right; }
.tsw-cmp-player.p2 { text-align: left; }
.tsw-cmp-name {
  font-family: 'Source Serif 4', serif; font-weight: 700;
  font-size: 1rem; line-height: 1.15; color: #fff;
  overflow-wrap: anywhere;
}
.tsw-cmp-pos {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); margin-top: 0.15rem;
}
.tsw-cmp-vs {
  font-family: 'Source Serif 4', serif; font-style: italic; font-weight: 700;
  font-size: 0.9rem; color: var(--yellow); flex-shrink: 0;
}

/* --- one stat --- */
.tsw-cmp-row { padding: 0.65rem 0 0.2rem; }
.tsw-cmp-label {
  text-align: center; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.65); margin-bottom: 0.35rem;
}
.tsw-cmp-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.tsw-cmp-side { display: flex; min-width: 0; }
.tsw-cmp-side.left { justify-content: flex-end; }
.tsw-cmp-side.right { justify-content: flex-start; }

/* Candy-striped track, straight from the reference's .candy-bg, retuned
   for a dark surface. */
.tsw-cmp-track {
  position: relative; width: 100%; height: 30px;
  border-radius: 999px; overflow: hidden;
  background-color: rgba(255,255,255,0.05);
  background-image: linear-gradient(
    135deg,
    rgba(255,255,255,0.07) 25%,
    transparent 25.5%,
    transparent 50%,
    rgba(255,255,255,0.07) 50.5%,
    rgba(255,255,255,0.07) 75%,
    transparent 75.5%,
    transparent);
  background-size: 10px 10px;
}
.tsw-cmp-fill {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center;
  width: 0;                       /* animated to --pct */
  min-width: 3.1rem;
  border-radius: 999px;
  background: rgba(148,163,184,0.55);
  transition: width 0.75s cubic-bezier(0.22,1,0.36,1);
}
.tsw-cmp-side.left  .tsw-cmp-fill { right: 0; justify-content: flex-start; padding-left: 0.15rem; }
.tsw-cmp-side.right .tsw-cmp-fill { left: 0;  justify-content: flex-end;  padding-right: 0.15rem; }
.tsw-cmp.is-in .tsw-cmp-fill { width: var(--pct, 0%); }

/* The standout bar picks up the reference's accent. */
.tsw-cmp-fill.win { background: #38bdf8; }
.tsw-cmp-fill.win .tsw-cmp-val { background: rgba(255,255,255,0.28); color: #062033; }

/* Value pill inside the fill, as in the reference. */
.tsw-cmp-val {
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; padding: 0 0.6rem; border-radius: 999px;
  /* Dark pill, not the reference's translucent white one: on the muted
     and tie bars a white pill left the value at 3.2-3.8:1. Measured
     dark 30% puts every state at 8:1 or better while keeping the bars
     at full strength. */
  background: rgba(2,6,23,0.30);
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.8rem;
  letter-spacing: -0.02em; color: #fff; white-space: nowrap;
}

/* Marker on the winning bar - the reference's dot with its pointer,
   reduced to a single small dot on the outer end of the bar. */
.tsw-cmp-fill.win::after {
  content: ''; position: absolute; top: 50%; width: 8px; height: 8px;
  border-radius: 50%; background: #38bdf8; border: 2px solid #fff;
  transform: translateY(-50%);
}
.tsw-cmp-side.left  .tsw-cmp-fill.win::after { left: -4px; }
.tsw-cmp-side.right .tsw-cmp-fill.win::after { right: -4px; }

/* A dead heat has no winner, so nothing is accented. */
.tsw-cmp-fill.tie { background: rgba(212,196,74,0.55); }

@media (max-width: 460px) {
  .tsw-cmp-name { font-size: 0.86rem; }
  .tsw-cmp-track { height: 26px; }
  .tsw-cmp-val { height: 20px; font-size: 0.72rem; padding: 0 0.45rem; }
  .tsw-cmp-fill { min-width: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tsw-cmp-fill { transition: none; }
}

/* The wrap is now just a container - the block above carries the surface. */
.compare-wrap { background: transparent; border: none; padding: 0; }


/* ============================================================
   ARTICLE CARD BORDER BEAM
   Rebuilt natively from the 21st.dev border-beam component. The
   published package ships only a re-export, so this is built from
   the component's behaviour: a light travelling continuously
   around the card's edge, over a faint static ring so the border
   reads all the way round even where the beam isn't.

   White and yellow, per the brief: the comet runs from the site
   yellow into a white hotspot and back.

   Pure CSS on ::after - the previous trail needed two nested
   elements injected by JS, which meant a script on every page
   that wanted the effect. A single masked pseudo-element does the
   same job, so it applies to any .tsw-card-grid card
   automatically, homepage and news alike, with nothing to load.
   ============================================================ */
@property --tsw-beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.tsw-card-grid .article-item {
  --beam-yellow: #d4c44a;
  --beam-white: #ffffff;
  --beam-ring: rgba(255,255,255,0.30);
  --beam-w: 1.5px;
  --beam-dur: 6s;
}

.tsw-card-grid .article-item::after {
  content: '';
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  box-sizing: border-box;
  border-radius: inherit;
  padding: var(--beam-w);
  /* Two layers, first listed on top: the travelling comet over a flat
     ring. Where the conic is transparent the ring shows through, which
     is what keeps a continuous border rather than a lone dot. */
  background:
    conic-gradient(
      from var(--tsw-beam-angle),
      transparent 0%,
      transparent 56%,
      var(--beam-yellow) 74%,
      var(--beam-white) 90%,
      var(--beam-yellow) 96%,
      transparent 100%),
    linear-gradient(var(--beam-ring), var(--beam-ring));
  /* Punch out the middle so only the edge band is painted. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: tswBeamSpin var(--beam-dur) linear infinite;
}

@keyframes tswBeamSpin {
  to { --tsw-beam-angle: 360deg; }
}

/* Staggered so a grid of cards doesn't sweep in lockstep. */
.tsw-card-grid .article-item:nth-child(3n+2)::after { animation-delay: -2s; }
.tsw-card-grid .article-item:nth-child(3n)::after   { animation-delay: -4s; }

@media (prefers-reduced-motion: reduce) {
  /* Beam parked; the static ring remains, so the border is still there. */
  .tsw-card-grid .article-item::after { animation: none; }
}

/* ============================================================
   MATCH REPORT GRAPHICS
   Global, not inline in the article. The expand-in-place overlay
   lifts an article's .article-body innerHTML and drops it into a
   panel on news.html - it does not carry the article's own <style>
   block. Anything defined only there renders unstyled in the
   overlay, which is why the goal icons ballooned to their intrinsic
   size while the full article page looked correct.
   (.stat-callout and .article-inline-illus were already global,
   which is why every other article expanded fine.)

   --mr-scale shrinks the whole set proportionally. Every dimension
   below is a multiple of it, so the overlay copy stays in the same
   proportions as the full-page one, just smaller.
   ============================================================ */
.article-body { --mr-scale: 1; }

.mr-score {
  background: linear-gradient(150deg, #141c6a, #0a0e35);
  color: #fff;
  padding: calc(1.4rem * var(--mr-scale)) calc(1.2rem * var(--mr-scale));
  margin: calc(1.8rem * var(--mr-scale)) 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: calc(1rem * var(--mr-scale));
  border-radius: 12px; border: 1px solid rgba(212,196,74,0.28);
}
.mr-score .team { text-align: center; font-family: 'Inter', sans-serif; }
.mr-score .team .nm { font-weight: 800; font-size: calc(0.82rem * var(--mr-scale)); letter-spacing: 0.08em; text-transform: uppercase; }
.mr-score .team .sub { font-size: calc(0.6rem * var(--mr-scale)); color: rgba(255,255,255,0.6); margin-top: 0.25rem; letter-spacing: 0.1em; text-transform: uppercase; }
.mr-score .line { font-family: 'Source Serif 4', serif; font-weight: 800; font-size: calc(2.2rem * var(--mr-scale)); color: var(--yellow); white-space: nowrap; }
.mr-score .meta {
  grid-column: 1 / -1; text-align: center; font-family: 'Inter', sans-serif;
  font-size: calc(0.62rem * var(--mr-scale)); letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: calc(0.8rem * var(--mr-scale));
}

.mr-timeline { margin: calc(1.8rem * var(--mr-scale)) 0; }
.mr-timeline h4 {
  font-family: 'Inter', sans-serif; font-size: calc(0.62rem * var(--mr-scale)); font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  margin-bottom: calc(0.7rem * var(--mr-scale));
}
.mr-goal {
  display: flex; align-items: center; gap: calc(0.8rem * var(--mr-scale));
  padding: calc(0.55rem * var(--mr-scale)) 0; border-bottom: 1px solid var(--border);
}
.mr-goal:last-child { border-bottom: none; }
.mr-min { flex-shrink: 0; width: calc(3rem * var(--mr-scale)); font-family: 'Inter', sans-serif; font-weight: 800; font-size: calc(0.78rem * var(--mr-scale)); color: var(--navy); }
/* The explicit box matters: with no CSS the inline SVG falls back to its
   intrinsic size and fills the column. */
.mr-goal svg { width: calc(18px * var(--mr-scale)); height: calc(18px * var(--mr-scale)); flex-shrink: 0; color: var(--yellow); }
.mr-who { font-family: 'Inter', sans-serif; font-weight: 700; font-size: calc(0.85rem * var(--mr-scale)); color: var(--text); }
.mr-note { font-family: 'Inter', sans-serif; font-size: calc(0.7rem * var(--mr-scale)); color: var(--muted); margin-left: auto; text-align: right; }

.mr-pitch { margin: calc(1.8rem * var(--mr-scale)) 0 0.4rem; }
.mr-pitch svg { width: 100%; max-width: calc(100% * var(--mr-scale)); height: auto; display: block; margin: 0 auto; border-radius: 12px; }
.mr-caption { font-size: calc(0.65rem * var(--mr-scale)); color: var(--muted); text-align: center; font-style: italic; margin-bottom: 1.5rem; }
.mr-subs { font-size: calc(0.78rem * var(--mr-scale)); color: var(--muted); line-height: 1.7; }
.mr-subs strong { color: var(--text); }

/* Expanded-in-place copy: identical, a touch smaller. */
.tsw-exp-body .article-body { --mr-scale: 0.88; }

/* Overlay treatment for the match graphics, matching how .stat-callout
   and .article-inline-illus are re-created above. The timeline uses
   --navy and --text on the article page; both measure ~1.05:1 against
   the overlay's dark panel, i.e. invisible, so they are re-coloured
   here rather than inherited. */
.tsw-exp-body .mr-timeline h4 { color: rgba(230,233,255,0.6); }
.tsw-exp-body .mr-goal { border-bottom-color: rgba(255,255,255,0.12); }
.tsw-exp-body .mr-min { color: #d4c44a; }
.tsw-exp-body .mr-who { color: #fff; }
.tsw-exp-body .mr-note { color: rgba(230,233,255,0.6); }
.tsw-exp-body .mr-caption { color: rgba(230,233,255,0.55); }
.tsw-exp-body .mr-subs { color: rgba(230,233,255,0.8); }
.tsw-exp-body .mr-subs strong { color: #fff; }
/* The SVG has its own border-radius; stop the generic image rule from
   adding margins that break the caption pairing. */
.tsw-exp-body .mr-pitch svg { margin: 0 auto; }

/* The inline photo and its credit are styled only in the article's own
   <style>, so in the overlay the wrapper had no height and the picture
   collapsed to nothing. Given both together here. */
.tsw-exp-body .article-inline-img {
  width: 100%; height: 200px; overflow: hidden; border-radius: 10px;
  margin: 1.6rem 0 0.4rem;
}
.tsw-exp-body .article-inline-img img {
  width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 10px;
}
.tsw-exp-body .article-photo-credit {
  font-size: 0.62rem; color: rgba(230,233,255,0.5);
  text-align: right; font-style: italic; margin-bottom: 1.4rem;
}

/* ============================================================
   WIN THE TREBLE — LANDING
   Rebuilt natively from the 21st.dev shader hero. That component
   renders two stacked MeshGradients through @paper-design/shaders-react
   (WebGL) with framer-motion driving the entrances. Reproduced here
   with the layered-gradient background this mode already had, so the
   landing shares the drifting-mesh feel without adding a WebGL
   context and two npm packages to a page that already runs a shader
   in the navbar.

   Colours are the two clubs: Manchester City sky #6CABDD and
   Manchester United red #DA291C, replacing the blue/purple the mode
   used before.
   ============================================================ */

/* Photo sits at the bottom of the stack, with the animated layers
   drifting over it. Only shown on the landing - during the draft it
   would compete with the squad cards. */
.wtt-bg-photo {
  position: absolute; inset: 0; z-index: 0;
  background: url('images/treble-hero-bg.jpg') center/cover no-repeat;
  opacity: 0; transition: opacity 0.5s ease;
}
.wtt-panel.is-landing .wtt-bg-photo { opacity: 0.42; }
/* Keeps the collage from overwhelming the text it sits behind. */
.wtt-panel.is-landing .wtt-bg-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(6,9,26,0.62), rgba(6,9,26,0.88));
}

/* ---- club colours on the existing animated layers ---- */
.wtt-glow-blue {
  background: radial-gradient(circle, rgba(108,171,221,.62), rgba(60,120,175,.20) 45%, transparent 72%);
}
.wtt-glow-purple {
  background: radial-gradient(circle, rgba(218,41,28,.62), rgba(160,25,18,.20) 45%, transparent 72%);
}
.wtt-aurora {
  background:
    radial-gradient(circle at 20% 40%, rgba(108,171,221,.30), transparent 32%),
    radial-gradient(circle at 78% 30%, rgba(218,41,28,.28), transparent 30%),
    radial-gradient(circle at 55% 80%, rgba(108,171,221,.20), transparent 30%),
    radial-gradient(circle at 80% 75%, rgba(218,41,28,.20), transparent 28%);
}
.wtt-streaks {
  background: repeating-linear-gradient(115deg,
    transparent 0, transparent 48px,
    rgba(108,171,221,.09) 49px,
    rgba(218,41,28,.13) 51px,
    transparent 54px, transparent 105px);
}

/* ---- hero ---- */
.wtt-hero { position: relative; z-index: 10; text-align: center; padding: 2.2rem 0.5rem 2.6rem; }

/* The reference's glass pill, with its hairline along the top edge. */
.wtt-hero-badge {
  position: relative; display: inline-flex; align-items: center;
  padding: 0.5rem 1.1rem; margin-bottom: 1.2rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.wtt-hero-badge::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(108,171,221,0.75), transparent);
}
.wtt-hero-badge span {
  font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em; color: rgba(255,255,255,0.92);
}

.wtt-hero-title { margin: 0 0 0.9rem; line-height: 0.95; }
.wtt-hero-title .l1,
.wtt-hero-title .l2 { display: block; font-family: 'Russo One', sans-serif; }
/* Light weight over heavy, as the reference stacks its lines. */
.wtt-hero-title .l1 {
  font-size: clamp(1.6rem, 6vw, 2.6rem); letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.85);
}
.wtt-hero-title .l2 {
  font-size: clamp(2.4rem, 10vw, 4.4rem); text-transform: uppercase;
  letter-spacing: -0.01em;
  /* The tail uses a lightened United red, not #DA291C: measured against
     the photo backdrop the brand red reaches only 2.6:1, below even the
     large-text threshold. #E0827B is the same hue at 4.65:1. The full
     brand red is still used on the glow layers, where nothing has to be
     read through it. */
  background: linear-gradient(100deg, #6CABDD 0%, #ffffff 46%, #E0827B 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 3px 14px rgba(0,0,0,0.55));
}

.wtt-hero-sub {
  max-width: 30rem; margin: 0 auto 1.6rem;
  font-family: 'Inter', sans-serif; font-size: 0.85rem; line-height: 1.65;
  color: rgba(255,255,255,0.82);
}

.wtt-hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.wtt-hero-btn {
  font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 700;
  padding: 0.8rem 1.6rem; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.28); color: #fff;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.wtt-hero-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.13); border-color: rgba(255,255,255,0.45); }
.wtt-hero-btn:active { transform: translateY(0); }
.wtt-hero-btn.primary {
  /* Darker than the sky blue used elsewhere: the button label is small
     bold white, and the lighter blue only reached 4.08:1. */
  background: linear-gradient(100deg, #3879A8, #C2231A);
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}
.wtt-hero-btn.primary:hover { filter: brightness(1.12); }
.wtt-hero-btn.ghost { background: transparent; border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.82); }

.wtt-hero-note {
  max-width: 26rem; margin: 1.1rem auto 0; padding: 0.7rem 0.9rem;
  border-radius: 10px; background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  font-family: 'Inter', sans-serif; font-size: 0.72rem; line-height: 1.55;
  color: rgba(255,255,255,0.85);
}
.wtt-hero-note[hidden] { display: none; }

.wtt-how-list {
  max-width: 34rem; margin: 0 auto 1.6rem; padding-left: 1.2rem;
  text-align: left; font-family: 'Inter', sans-serif;
  font-size: 0.82rem; line-height: 1.7; color: rgba(255,255,255,0.82);
}
.wtt-how-list li { margin-bottom: 0.7rem; }
.wtt-how-list strong { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .wtt-hero-btn { transition: none; }
  .wtt-hero-btn:hover { transform: none; }
}

/* ---- Win the Treble: multiplayer screen ---- */
.wtt-mp-list { display: flex; flex-direction: column; gap: 0.8rem; max-width: 32rem; margin: 0 auto 1.2rem; }

.wtt-mp-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 1.1rem 1.2rem; border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.wtt-mp-card:hover { transform: translateY(-2px); background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); }
.wtt-mp-card:active { transform: translateY(0); }
.wtt-mp-card:focus-visible { outline: 2px solid #6CABDD; outline-offset: 3px; }

.wtt-mp-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.4rem; }
.wtt-mp-name {
  font-family: 'Russo One', sans-serif; font-size: 1.05rem;
  color: #fff; letter-spacing: 0.01em;
}
/* Live pill. The dot is an element rather than an emoji so it renders the
   same on every platform and can carry the pulse. */
.wtt-mp-live {
  display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
  font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #ffb3ad;
  background: rgba(218,41,28,0.22); border: 1px solid rgba(255,120,110,0.45);
  padding: 0.25rem 0.55rem; border-radius: 999px;
}
.wtt-mp-live .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #ff5a4d;
  box-shadow: 0 0 0 0 rgba(255,90,77,0.65);
  animation: wttLivePulse 1.9s ease-out infinite;
}
@keyframes wttLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,90,77,0.6); }
  70%  { box-shadow: 0 0 0 7px rgba(255,90,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,90,77,0); }
}
.wtt-mp-desc {
  margin: 0; font-family: 'Inter', sans-serif;
  font-size: 0.78rem; line-height: 1.6; color: rgba(255,255,255,0.82);
}

@media (prefers-reduced-motion: reduce) {
  .wtt-mp-card { transition: none; }
  .wtt-mp-card:hover { transform: none; }
  .wtt-mp-live .dot { animation: none; }
}

/* ---- Win the Treble: lobby / play a friend ---- */
.wtt-lobby { max-width: 30rem; margin: 0 auto 1.2rem; display: flex; flex-direction: column; gap: 0.75rem; text-align: left; }

.wtt-field { display: block; }
.wtt-field-label {
  display: block; margin-bottom: 0.35rem;
  font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7);
}
.wtt-field-input {
  width: 100%; padding: 0.8rem 0.9rem; border-radius: 10px;
  font-family: 'Inter', sans-serif; color: #fff;
  /* 16px exactly. iOS Safari zooms the page in when a focused input is
     under 16px, and never zooms back out - which is why tapping the name
     or code field jumped the layout. Several other inputs on this site
     already use 16px for the same reason. */
  font-size: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
}
/* 0.62, not the usual 0.45: "e.g. Owen" is real guidance, and at 45%
   it measured 3.4:1 over the photo backdrop. This is 4.9:1. */
.wtt-field-input::placeholder { color: rgba(255,255,255,0.62); }
.wtt-field-input:focus {
  outline: none; border-color: #6CABDD;
  box-shadow: 0 0 0 3px rgba(108,171,221,0.25);
}
.wtt-field-error {
  font-family: 'Inter', sans-serif; font-size: 0.7rem; line-height: 1.5;
  /* Light enough to read on the dark panel; a plain red would sit near 2:1. */
  color: #ffb3ad;
}
.wtt-field-error[hidden] { display: none; }

/* The live dot beside "New live game", same pulse as the mode card. */
.wtt-mp-live-dot {
  display: inline-block; width: 8px; height: 8px; margin-right: 0.5rem;
  border-radius: 50%; background: #ff5a4d; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(255,90,77,0.65);
  animation: wttLivePulse 1.9s ease-out infinite;
}

.wtt-lobby-join { width: 100%; }

.wtt-join-row { display: flex; gap: 0.5rem; }
.wtt-join-row[hidden] { display: none; }
.wtt-join-row .wtt-field-input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.1em; }
.wtt-join-row .wtt-hero-btn { flex-shrink: 0; }

.wtt-solo-link {
  align-self: center; margin-top: 0.2rem; padding: 0.5rem 0.4rem;
  background: none; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 600;
  color: rgba(255,255,255,0.78); text-decoration: underline;
  text-underline-offset: 3px;
}
.wtt-solo-link:hover { color: #fff; }
.wtt-solo-link:focus-visible { outline: 2px solid #6CABDD; outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .wtt-mp-live-dot { animation: none; }
}

/* ---- Win the Treble: lobby room ---- */
.wtt-room { position: relative; z-index: 10; max-width: 34rem; margin: 0 auto; padding: 1.2rem 0.4rem 2rem; text-align: left; }

.wtt-room-top { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.2rem; }
.wtt-room-leave {
  background: none; border: none; cursor: pointer; padding: 0.4rem 0;
  font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 600;
  color: rgba(255,255,255,0.8);
}
.wtt-room-leave:hover { color: #fff; }
.wtt-room-heading {
  font-family: 'Russo One', sans-serif; font-size: 0.72rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.6);
}

.wtt-room-block {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 0.9rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.wtt-room-label {
  margin: 0 0 0.7rem; font-family: 'Inter', sans-serif;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.7);
}
/* 0.62, not 0.5: "Yours to choose" and "applies next round" are real
   instructions and measured 3.94:1 at 50% over the photo backdrop. */
.wtt-room-sub { font-weight: 600; letter-spacing: 0.06em; color: rgba(255,255,255,0.62); text-transform: none; }
.wtt-room-help { margin: 0.7rem 0 0; font-family: 'Inter', sans-serif; font-size: 0.72rem; line-height: 1.55; color: rgba(255,255,255,0.7); }

.wtt-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.wtt-code {
  font-family: 'Russo One', sans-serif; font-size: 1.5rem; letter-spacing: 0.22em;
  color: #fff; padding: 0.4rem 0.8rem; border-radius: 10px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.18);
}
.wtt-code-row .wtt-hero-btn { padding: 0.6rem 0.95rem; font-size: 0.72rem; }

.wtt-player-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.wtt-player {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.7rem 0.85rem; border-radius: 10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
.wtt-player.is-ready { border-color: rgba(108,171,221,0.5); background: rgba(108,171,221,0.12); }
.wtt-player.is-empty { border-style: dashed; background: transparent; }
.wtt-player-main { min-width: 0; }
.wtt-player-name {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.82rem; color: #fff;
}
.wtt-player.is-empty .wtt-player-name { color: rgba(255,255,255,0.62); font-weight: 600; }
.wtt-player-meta {
  display: flex; align-items: center; gap: 0.35rem; margin-top: 0.2rem;
  font-family: 'Inter', sans-serif; font-size: 0.68rem; color: rgba(255,255,255,0.68);
}
.wtt-conn { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex-shrink: 0; }
.wtt-player-ready {
  flex-shrink: 0; font-family: 'Inter', sans-serif; font-size: 0.66rem;
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  /* 0.72, not 0.6: "Not ready" is status, and 60% measured 4.33:1. */
  color: rgba(255,255,255,0.72);
}
.wtt-player.is-ready .wtt-player-ready { color: #9fd4ff; }
.wtt-tag {
  font-family: 'Inter', sans-serif; font-size: 0.55rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.12rem 0.4rem; border-radius: 999px;
}
.wtt-tag.host { background: rgba(212,196,74,0.2); color: #f0dc7a; border: 1px solid rgba(212,196,74,0.4); }
.wtt-tag.cpu { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.2); }

.wtt-addcpu { width: 100%; margin-top: 0.7rem; }
.wtt-addcpu:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.wtt-room-formations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
@media (max-width: 460px) { .wtt-room-formations { grid-template-columns: repeat(3, 1fr); } }

.wtt-seat-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.wtt-seat-label { font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.8); }
.wtt-seat-btns { display: flex; gap: 0.4rem; }
.wtt-seat-btn {
  width: 2.2rem; height: 2.2rem; border-radius: 8px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.8rem; color: #fff;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.wtt-seat-btn:hover { background: rgba(255,255,255,0.14); }
.wtt-seat-btn.selected { background: #3879A8; border-color: #6CABDD; }

.wtt-room-details {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; padding: 0.8rem 1rem; margin-bottom: 1rem;
}
.wtt-room-details summary {
  cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.78rem;
  font-weight: 700; color: rgba(255,255,255,0.88);
}
.wtt-room-details .wtt-how-list { margin-top: 0.8rem; margin-bottom: 0; }

.wtt-ready-btn { width: 100%; }
.wtt-room-status {
  margin: 0.7rem 0 0; text-align: center;
  font-family: 'Inter', sans-serif; font-size: 0.74rem; color: rgba(255,255,255,0.72);
}

@media (prefers-reduced-motion: reduce) {
  .wtt-seat-btn { transition: none; }
}

/* ---- Formation tiles on narrow screens ----
   The tile lays the pitch icon and the name out side by side, which
   leaves the name only a sliver of a three-column phone grid. Every
   hyphen in "4-2-3-1" is a break opportunity, so it stacked one
   character per line. Two fixes: never break the name, and stack the
   tile contents so the name gets the full tile width. */
.wtt-formation-name {
  white-space: nowrap;
  /* belt and braces: some engines still break on hyphens when the box
     is narrower than the word */
  word-break: keep-all;
  overflow-wrap: normal;
}

@media (max-width: 560px) {
  .wtt-formation-tile {
    flex-direction: column;
    gap: 0.4rem;
    padding-left: 0.35rem; padding-right: 0.35rem;
  }
  .wtt-formation-name { font-size: 0.82rem; }
}

/* Three across is tight once the name sits under the icon; drop to two
   on the narrowest phones so nothing is squeezed. */
@media (max-width: 420px) {
  .wtt-room-formations { grid-template-columns: repeat(2, 1fr); }
}

/* Connection state in the lobby header. An offline room used to look
   exactly like a joined one, which is how a failed join passed for a
   working one - this makes the difference impossible to miss. */
.wtt-conn-state {
  margin-left: auto; flex-shrink: 0;
  font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.25rem 0.6rem; border-radius: 999px;
}
.wtt-conn-state.is-idle { display: none; }
.wtt-conn-state.is-connecting { background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.25); }
.wtt-conn-state.is-online { background: rgba(74,222,128,0.16); color: #a7f3c4; border: 1px solid rgba(74,222,128,0.45); }
.wtt-conn-state.is-offline { background: rgba(218,41,28,0.2); color: #ffb3ad; border: 1px solid rgba(255,120,110,0.45); }

/* ---- Win the Treble: live draft progress ---- */
.wtt-progress-list { list-style: none; margin: 0 0 0.8rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.wtt-progress-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
  padding: 0.5rem 0.7rem; border-radius: 9px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
.wtt-progress-row.is-self { border-color: rgba(108,171,221,0.45); background: rgba(108,171,221,0.12); }
.wtt-progress-who {
  display: flex; align-items: center; gap: 0.4rem; min-width: 0;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.78rem; color: #fff;
}
.wtt-progress-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex-shrink: 0; }
.wtt-progress-count {
  flex-shrink: 0; font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: 0.74rem; color: rgba(255,255,255,0.82); font-variant-numeric: tabular-nums;
}
.wtt-progress-row.is-done .wtt-progress-count { color: #a7f3c4; }

.wtt-draft-timer {
  display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
  padding: 0.55rem 0.8rem; margin-bottom: 0.5rem; border-radius: 10px;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.14);
}
.wtt-timer-label { font-family: 'Inter', sans-serif; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.78); }
.wtt-timer-clock {
  font-family: 'Russo One', sans-serif; font-size: 1.05rem; color: #fff;
  font-variant-numeric: tabular-nums;
}
/* display:flex above outranks the hidden attribute, so [hidden] alone did
   nothing here - the solo draft still showed the clock. */
.wtt-draft-timer[hidden] { display: none; }
.wtt-draft-header[hidden] { display: none; }
.wtt-draft-timer.is-low { border-color: rgba(255,120,110,0.55); background: rgba(218,41,28,0.18); }
.wtt-draft-timer.is-low .wtt-timer-clock { color: #ffb3ad; }

.wtt-round-label {
  text-align: center; margin-bottom: 0.9rem;
  font-family: 'Inter', sans-serif; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72);
}
.wtt-spin-hint {
  margin: 0.6rem 0 0; text-align: center;
  font-family: 'Inter', sans-serif; font-size: 0.72rem; color: rgba(255,255,255,0.68);
}

/* ---- Win the Treble: XI locked in ---- */
.wtt-locked { text-align: center; margin-bottom: 1.2rem; }
.wtt-locked-tick { font-size: 2.2rem; line-height: 1; margin-bottom: 0.4rem; }
.wtt-locked-title { margin: 0 0 0.35rem; font-family: 'Russo One', sans-serif; font-size: 1.25rem; color: #fff; }
.wtt-locked-sub { margin: 0; font-family: 'Inter', sans-serif; font-size: 0.8rem; color: rgba(255,255,255,0.78); }

.wtt-xi-list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.wtt-xi-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
  padding: 0.5rem 0.75rem; border-radius: 8px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
}
.wtt-xi-name { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.82rem; color: #fff; min-width: 0; }
.wtt-xi-pos { font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); margin-left: 0.45rem; }
.wtt-xi-rating {
  flex-shrink: 0; font-family: 'Russo One', sans-serif; font-size: 0.9rem; color: #d4c44a;
  font-variant-numeric: tabular-nums;
}

.wtt-odds {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px; padding: 1rem 1.1rem; margin-bottom: 1.2rem;
}
.wtt-odds-head {
  margin: 0 0 0.8rem; font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72);
}
.wtt-odds-top { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.9rem; }
.wtt-odds-tile {
  text-align: center; padding: 0.8rem 0.5rem; border-radius: 10px;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.12);
}
.wtt-odds-tile .l {
  font-family: 'Inter', sans-serif; font-size: 0.56rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.65);
  margin-bottom: 0.3rem;
}
.wtt-odds-tile .v { font-family: 'Russo One', sans-serif; font-size: 1.6rem; color: #fff; line-height: 1; }

.wtt-odds-list { list-style: none; margin: 0 0 0.8rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.wtt-odds-row { display: flex; align-items: center; gap: 0.6rem; }
.wtt-odds-label {
  flex-shrink: 0; width: 7.6rem;
  font-family: 'Inter', sans-serif; font-size: 0.72rem; color: rgba(255,255,255,0.82);
}
.wtt-odds-bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.wtt-odds-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3879A8, #6CABDD); }
.wtt-odds-pct {
  flex-shrink: 0; width: 3.2rem; text-align: right;
  font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700; color: #fff;
  font-variant-numeric: tabular-nums;
}
.wtt-odds-note { margin: 0; font-family: 'Inter', sans-serif; font-size: 0.72rem; color: rgba(255,255,255,0.7); }

.wtt-leave-game { width: 100%; margin-top: 0.6rem; }

/* ---- Win the Treble: game-by-game season ---- */
.wtt-season-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.6rem; }
.wtt-season-title { margin: 0 0 0.2rem; font-family: 'Russo One', sans-serif; font-size: 1.05rem; color: #fff; }
.wtt-season-week {
  font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.65);
}
.wtt-skip-btn {
  flex-shrink: 0; cursor: pointer; padding: 0.5rem 0.8rem; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.24);
}
.wtt-skip-btn:hover { background: rgba(255,255,255,0.15); }
.wtt-skip-btn[hidden] { display: none; }

.wtt-feed { list-style: none; margin: 0.9rem 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.wtt-feed-row {
  padding: 0.55rem 0.7rem; border-radius: 9px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-left-width: 3px;
}
/* Result colour on the leading edge only, so a run of wins reads down the
   left without the rows shouting over the scorers. */
.wtt-feed-row.res-W { border-left-color: #27C260; }
.wtt-feed-row.res-D { border-left-color: #AEB7C4; }
.wtt-feed-row.res-L { border-left-color: #FF837A; }
.wtt-feed-line { display: flex; align-items: center; gap: 0.55rem; }
.wtt-feed-gw {
  flex-shrink: 0; width: 2.9rem;
  font-family: 'Inter', sans-serif; font-size: 0.66rem; font-weight: 800;
  color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums;
}
.wtt-feed-res {
  flex-shrink: 0; width: 1.1rem; text-align: center;
  font-family: 'Russo One', sans-serif; font-size: 0.78rem;
}
.res-W .wtt-feed-res { color: #27C260; }
.res-D .wtt-feed-res { color: #AEB7C4; }
.res-L .wtt-feed-res { color: #FF837A; }
.wtt-feed-opp {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 600; color: #fff;
}
.wtt-feed-score {
  flex-shrink: 0; font-family: 'Russo One', sans-serif; font-size: 0.85rem; color: #fff;
  font-variant-numeric: tabular-nums;
}
.wtt-feed-scorers {
  margin-top: 0.3rem; padding-left: 3.45rem;
  font-family: 'Inter', sans-serif; font-size: 0.68rem; line-height: 1.5;
  color: rgba(255,255,255,0.72);
}

.wtt-season-tally { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.6rem; }
.wtt-tally-box {
  text-align: center; padding: 0.6rem 0.3rem; border-radius: 10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
.wtt-tally-box .n { font-family: 'Russo One', sans-serif; font-size: 1.2rem; color: #fff; line-height: 1; }
.wtt-tally-box .l {
  margin-top: 0.25rem; font-family: 'Inter', sans-serif; font-size: 0.55rem;
  font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.62);
}
.wtt-tally-box.pts { border-color: rgba(212,196,74,0.45); background: rgba(212,196,74,0.14); }
.wtt-tally-box.pts .n { color: #f0dc7a; }

.wtt-season-line {
  text-align: center; font-family: 'Inter', sans-serif; font-size: 0.7rem;
  color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums;
}

/* ---- Win the Treble: season summary ---- */
.wtt-finish-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 1rem 0 0.9rem; }
.wtt-finish-tile {
  text-align: center; padding: 1rem 0.6rem; border-radius: 12px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
}
.wtt-finish-tile.projected { background: rgba(0,0,0,0.26); border-style: dashed; }
.wtt-finish-tile .l {
  font-family: 'Inter', sans-serif; font-size: 0.56rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.65);
}
.wtt-finish-tile .v { font-family: 'Russo One', sans-serif; font-size: 1.9rem; color: #fff; line-height: 1.1; margin: 0.25rem 0 0.15rem; }
.wtt-finish-tile.projected .v { color: rgba(255,255,255,0.82); }
.wtt-finish-tile .s { font-family: 'Inter', sans-serif; font-size: 0.7rem; color: rgba(255,255,255,0.7); }

.wtt-verdict {
  padding: 0.9rem 1rem; margin-bottom: 1.2rem; border-radius: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  font-family: 'Inter', sans-serif; font-size: 0.8rem; line-height: 1.65; color: rgba(255,255,255,0.86);
}

.wtt-sec-label {
  margin: 0 0 0.6rem; font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7);
}
/* Capped so the results don't push the head-to-head button off the page. */
.wtt-results-scroll {
  max-height: 19rem; overflow-y: auto; margin-bottom: 1.2rem;
  padding-right: 0.25rem;
  -webkit-overflow-scrolling: touch;
}

/* ---- Win the Treble: head to head ---- */
.wtt-h2h-waiting {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem;
  font-family: 'Inter', sans-serif; font-size: 0.74rem; color: rgba(255,255,255,0.75);
}
.wtt-h2h-lines { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.wtt-h2h-line {
  padding: 0.7rem 0.85rem; border-radius: 10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  font-family: 'Inter', sans-serif; font-size: 0.8rem; line-height: 1.55; color: rgba(255,255,255,0.86);
}

.wtt-session-list { list-style: none; margin: 0 0 0.2rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.wtt-session-row {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.7rem; border-radius: 9px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
.wtt-session-pos { flex-shrink: 0; width: 1.2rem; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.74rem; color: rgba(255,255,255,0.6); }
.wtt-session-name { flex: 1; min-width: 0; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.8rem; color: #fff; }
.wtt-session-tag { flex-shrink: 0; font-family: 'Inter', sans-serif; font-size: 0.64rem; font-weight: 700; color: #a7f3c4; }
.wtt-session-pts { flex-shrink: 0; width: 1.6rem; text-align: right; font-family: 'Russo One', sans-serif; font-size: 0.95rem; color: #f0dc7a; }

.wtt-awards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; }
@media (max-width: 420px) { .wtt-awards { grid-template-columns: 1fr; } }
.wtt-award {
  padding: 0.8rem 0.85rem; border-radius: 11px;
  background: rgba(0,0,0,0.26); border: 1px solid rgba(255,255,255,0.13);
}
.wtt-award-label {
  font-family: 'Inter', sans-serif; font-size: 0.56rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.68);
  margin-bottom: 0.35rem;
}
.wtt-award-name { font-family: 'Russo One', sans-serif; font-size: 0.95rem; color: #fff; line-height: 1.2; }
.wtt-award-stat { font-family: 'Inter', sans-serif; font-size: 0.74rem; color: #f0dc7a; margin-top: 0.15rem; }
.wtt-award-owner { font-family: 'Inter', sans-serif; font-size: 0.66rem; color: rgba(255,255,255,0.62); margin-top: 0.25rem; }

.wtt-h2h-table { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.wtt-h2h-row {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.6rem; border-radius: 8px;
  background: rgba(255,255,255,0.04);
  font-family: 'Inter', sans-serif; font-size: 0.74rem; color: rgba(255,255,255,0.82);
}
.wtt-h2h-row.is-manager { background: rgba(108,171,221,0.16); border: 1px solid rgba(108,171,221,0.4); color: #fff; font-weight: 700; }
.wtt-h2h-pos { flex-shrink: 0; width: 1.4rem; color: rgba(255,255,255,0.55); font-variant-numeric: tabular-nums; }
.wtt-h2h-row.is-manager .wtt-h2h-pos { color: rgba(255,255,255,0.8); }
.wtt-h2h-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtt-h2h-gd { flex-shrink: 0; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.6); }
.wtt-h2h-row.is-manager .wtt-h2h-gd { color: rgba(255,255,255,0.85); }
.wtt-h2h-pts { flex-shrink: 0; width: 3.4rem; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

/* One result on screen at a time: the new card drops in from above, the
   outgoing one slides down and fades. A fixed height stops the panel
   jumping as cards with and without scorers swap over. */
.wtt-feed { position: relative; min-height: 5.2rem; }
.wtt-feed .wtt-feed-row {
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.35s ease;
}
.wtt-feed .wtt-feed-row.is-entering { transform: translateY(-14px); opacity: 0; }
.wtt-feed .wtt-feed-row.is-leaving {
  position: absolute; left: 0; right: 0; top: 0;
  transform: translateY(46px); opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .wtt-feed .wtt-feed-row { transition: none; }
  .wtt-feed .wtt-feed-row.is-entering { transform: none; opacity: 1; }
  .wtt-feed .wtt-feed-row.is-leaving { opacity: 0; }
}

/* ---- Win the Treble: XI on a pitch ---- */
.wtt-xi-pitch { margin: 0 auto 1.3rem; max-width: 22rem; }
.wtt-xi-pitch svg { width: 100%; height: auto; display: block; }
.wtt-grass { fill: #0d5c2f; }
.wtt-lines { fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 1.5; }
.wtt-pt circle { fill: #f1f5ff; stroke: #0a0e35; stroke-width: 2; }
.wtt-pt.empty circle { fill: rgba(255,255,255,0.18); stroke: rgba(255,255,255,0.4); stroke-dasharray: 3 3; }
.wtt-pt-rt {
  font-family: 'Russo One', sans-serif; font-size: 12px; fill: #0a0e35;
}
.wtt-pt.empty .wtt-pt-rt { fill: rgba(255,255,255,0.7); }
.wtt-pt-nm {
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; fill: #ffffff;
  paint-order: stroke; stroke: rgba(6,9,26,0.85); stroke-width: 3px; stroke-linejoin: round;
}

/* ---- pitch: animation and the real cards on it ---- */
.wtt-pitch-wrap { position: relative; width: 100%; aspect-ratio: 320 / 452; }
.wtt-pitch-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wtt-stripes rect { fill: rgba(255,255,255,0.035); }

/* A light sweep crossing the pitch once the XI has landed. */
.wtt-pitch-sweep {
  fill: rgba(255,255,255,0.10);
  animation: wttPitchSweep 4.6s ease-in-out 1.1s infinite;
}
@keyframes wttPitchSweep {
  0%   { transform: translateX(0) skewX(-12deg); opacity: 0; }
  12%  { opacity: 1; }
  55%  { opacity: 1; }
  70%, 100% { transform: translateX(460px) skewX(-12deg); opacity: 0; }
}

/* The same card as the draft screen, placed on the pitch. */
.wtt-pitch-card {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.72);
  opacity: 0;
  width: 62px;
  padding: 0.35rem 0.2rem;
  animation: wttCardIn 0.5s cubic-bezier(0.22,1,0.36,1) forwards;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}
@keyframes wttCardIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)) scale(0.72); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.wtt-pitch-card .pos { font-size: 0.5rem; }
.wtt-pitch-card .nm { font-size: 0.56rem; }
.wtt-pitch-card .rt { font-size: 1rem; margin-top: 0; }

/* Settled cards breathe very slightly so the pitch isn't static. */
.wtt-pitch-card.filled::after {
  content: ''; position: absolute; inset: -2px; border-radius: 3px;
  border: 1px solid rgba(212,196,74,0.5);
  opacity: 0;
  animation: wttCardPulse 3.6s ease-in-out infinite;
  animation-delay: inherit;
  pointer-events: none;
}
@keyframes wttCardPulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.06); }
}

@media (max-width: 380px) {
  .wtt-pitch-card { width: 54px; }
  .wtt-pitch-card .rt { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wtt-pitch-card { animation: none; opacity: 1; transform: translate(-50%, -50%); }
  .wtt-pitch-card.filled::after,
  .wtt-pitch-sweep { animation: none; opacity: 0; }
}

/* ---- pitch cards coloured by position ----
   Values checked against the card background (#0f1a14): the rating text
   clears 4.5:1 on all four, the lowest being red at 4.74:1. */
.wtt-pitch-card.pos-gk.filled  { border-color: #d4c44a; }
.wtt-pitch-card.pos-def.filled { border-color: #3b82f6; }
.wtt-pitch-card.pos-mid.filled { border-color: #22c55e; }
.wtt-pitch-card.pos-fwd.filled { border-color: #ef4444; }

.wtt-pitch-card.pos-gk  .rt { color: #d4c44a; }
.wtt-pitch-card.pos-def .rt { color: #3b82f6; }
.wtt-pitch-card.pos-mid .rt { color: #22c55e; }
.wtt-pitch-card.pos-fwd .rt { color: #ef4444; }

/* The settled pulse takes the position colour too. */
.wtt-pitch-card.pos-gk.filled::after  { border-color: rgba(212,196,74,0.55); }
.wtt-pitch-card.pos-def.filled::after { border-color: rgba(59,130,246,0.55); }
.wtt-pitch-card.pos-mid.filled::after { border-color: rgba(34,197,94,0.55); }
.wtt-pitch-card.pos-fwd.filled::after { border-color: rgba(239,68,68,0.55); }

/* ---- Win the Treble: club squad offer ---- */
#wttSquadGrid { display: flex; flex-direction: column; gap: 0.3rem; }
.wtt-offer-row {
  border-radius: 9px; overflow: hidden;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
}
.wtt-offer-row.is-open { border-color: rgba(212,196,74,0.5); background: rgba(212,196,74,0.08); }
.wtt-offer-row.locked-out { opacity: 0.4; }

.wtt-offer-head {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  padding: 0.55rem 0.7rem; background: none; border: none; cursor: pointer; text-align: left;
}
.wtt-offer-head:disabled { cursor: default; }
.wtt-offer-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.82rem; color: #fff;
}
.wtt-offer-pos {
  flex-shrink: 0; font-family: 'Inter', sans-serif; font-size: 0.62rem;
  font-weight: 700; letter-spacing: 0.04em; color: rgba(255,255,255,0.66);
}
.wtt-offer-chev {
  flex-shrink: 0; color: rgba(255,255,255,0.5); font-size: 1rem;
  transition: transform 0.2s ease;
}
.wtt-offer-row.is-open .wtt-offer-chev { transform: rotate(90deg); }

.wtt-offer-tray {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  padding: 0.15rem 0.7rem 0.65rem;
}
.wtt-offer-tray[hidden] { display: none; }

.wtt-postile {
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  min-width: 3.6rem; padding: 0.4rem 0.5rem; border-radius: 8px; cursor: pointer;
  background: rgba(212,196,74,0.16); border: 1px solid rgba(212,196,74,0.55); color: #fff;
}
.wtt-postile:hover { background: rgba(212,196,74,0.28); }
.wtt-postile .pt-code { font-family: 'Russo One', sans-serif; font-size: 0.8rem; }
.wtt-postile .pt-state {
  font-family: 'Inter', sans-serif; font-size: 0.52rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.72);
}
/* Greyed out: that slot is already filled. */
.wtt-postile.taken {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.42); cursor: not-allowed;
}
.wtt-postile.taken .pt-state { color: rgba(255,255,255,0.4); }


/* ---- end-of-season stat tiles ---- */
.wtt-summary-box {
  padding: 0.75rem 0.6rem; border-radius: 11px; text-align: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13);
  display: flex; flex-direction: column; justify-content: center; min-height: 4.6rem;
}
.wtt-summary-box .l {
  font-family: 'Inter', sans-serif; font-size: 0.54rem; font-weight: 800;
  letter-spacing: 0.11em; text-transform: uppercase; color: rgba(255,255,255,0.62);
  margin-bottom: 0.3rem;
}
.wtt-summary-box .v {
  font-family: 'Russo One', sans-serif; font-size: 1.15rem; color: #fff; line-height: 1.25;
  overflow-wrap: anywhere;
}
/* Cup outcomes are sentences, not numbers - let them sit smaller so a
   tile like "Lost in the Quarter-Final" doesn't blow the row height. */
.wtt-summary-box.is-text .v { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.8rem; }

/* The two buttons sit side by side, so they must not both be gold. */
.wtt-table-btn {
  width: 100%; padding: 1.1rem; border: 1px solid rgba(108,171,221,0.55);
  background: rgba(108,171,221,0.16); color: #fff; cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.9rem;
  letter-spacing: 0.06em; text-transform: uppercase; border-radius: 10px;
  margin-bottom: 0.6rem;
}
.wtt-table-btn:hover { background: rgba(108,171,221,0.28); }

/* ---- position colours on draft slots and offer tiles ----
   GK yellow, defenders blue, midfield green, forwards red.
   Checked against the filled-card background (#0f1a14): the lowest is
   red at 4.74:1, so every rating stays above AA. */
.wtt-slot.pos-gk.filled  { border-color: #d4c44a; }
.wtt-slot.pos-def.filled { border-color: #3b82f6; }
.wtt-slot.pos-mid.filled { border-color: #22c55e; }
.wtt-slot.pos-fwd.filled { border-color: #ef4444; }
.wtt-slot.pos-gk  .rt { color: #d4c44a; }
.wtt-slot.pos-def .rt { color: #3b82f6; }
.wtt-slot.pos-mid .rt { color: #22c55e; }
.wtt-slot.pos-fwd .rt { color: #ef4444; }
/* Empty slots keep the position colour as a hint of what goes there. */
.wtt-slot.pos-gk  .pos { color: #d4c44a; }
.wtt-slot.pos-def .pos { color: #7cb0ff; }
.wtt-slot.pos-mid .pos { color: #6ee7a0; }
.wtt-slot.pos-fwd .pos { color: #ff9d97; }

.wtt-postile.pt-gk  { background: rgba(212,196,74,0.18); border-color: rgba(212,196,74,0.6); }
.wtt-postile.pt-def { background: rgba(59,130,246,0.18); border-color: rgba(96,165,250,0.6); }
.wtt-postile.pt-mid { background: rgba(34,197,94,0.18);  border-color: rgba(74,222,128,0.6); }
.wtt-postile.pt-fwd { background: rgba(239,68,68,0.18);  border-color: rgba(255,131,122,0.6); }
.wtt-postile.pt-gk:hover  { background: rgba(212,196,74,0.3); }
.wtt-postile.pt-def:hover { background: rgba(59,130,246,0.3); }
.wtt-postile.pt-mid:hover { background: rgba(34,197,94,0.3); }
.wtt-postile.pt-fwd:hover { background: rgba(239,68,68,0.3); }
/* Greyed out wins over the position colour when the slot is gone. */
.wtt-postile.taken,
.wtt-postile.taken:hover {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.42); cursor: not-allowed;
}

/* ---- offer row: coloured badge, nationality, position chips ---- */
.wtt-rating-badge {
  flex-shrink: 0; width: 2.5rem; height: 2.5rem;
  /* Square, not rounded. */
  border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  /* Inter at 900 rather than Russo One: Russo has a single weight and its
     figures are comparatively light, which is what made the number hard
     to read at this size. */
  font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: 1.1rem; letter-spacing: -0.02em;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
}
/* White numerals meant the fills had to come down: white on the old
   bright colours measured 1.78:1 on the keeper yellow and never cleared
   3.8:1 on any of them. These are the same hues, darkened until white
   clears 5.6:1, so the colour still reads as the position. */
.wtt-rating-badge.rb-gk  { background: #7A640C; }
.wtt-rating-badge.rb-def { background: #2464C9; }
.wtt-rating-badge.rb-mid { background: #0E7534; }
.wtt-rating-badge.rb-fwd { background: #C72424; }

.wtt-offer-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.wtt-offer-nat {
  font-family: 'Inter', sans-serif; font-size: 0.66rem; color: rgba(255,255,255,0.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wtt-offer-chips { flex-shrink: 0; display: flex; gap: 0.22rem; align-items: center; }
.wtt-poschip {
  padding: 0.14rem 0.34rem; border-radius: 5px;
  font-family: 'Inter', sans-serif; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.04em;
}
.wtt-poschip.pc-gk  { background: rgba(212,196,74,0.22); color: #f0dc7a; }
.wtt-poschip.pc-def { background: rgba(59,130,246,0.24); color: #9cc4ff; }
.wtt-poschip.pc-mid { background: rgba(34,197,94,0.22);  color: #7ee6a6; }
.wtt-poschip.pc-fwd { background: rgba(239,68,68,0.24);  color: #ffa39c; }

.wtt-place-label {
  font-family: 'Inter', sans-serif; font-size: 0.56rem; font-weight: 800;
  letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255,255,255,0.6);
  padding: 0 0.7rem 0.4rem;
}
.wtt-place-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 0.7rem 0.7rem; }
.wtt-placebtn {
  padding: 0.6rem 0.85rem; border-radius: 9px; cursor: pointer; border: none;
  font-family: 'Inter', sans-serif; font-size: 0.76rem; font-weight: 700;
}
.wtt-placebtn.pb-gk  { background: #d4c44a; color: #16150a; }
.wtt-placebtn.pb-def { background: #3b82f6; color: #04122e; }
.wtt-placebtn.pb-mid { background: #22c55e; color: #04210f; }
.wtt-placebtn.pb-fwd { background: #ef4444; color: #2b0505; }
.wtt-placebtn:hover { filter: brightness(1.1); }

/* ============================================================
   TSW 5-A-SIDE — LANDING
   The same layered-gradient treatment as Win the Treble (which was
   itself the native rebuild of the 21st.dev shader hero), so the two
   modes read as one family. Colours here are the shirt rather than
   the two Manchester clubs: Tottenham navy and white over the
   Bilbao XI.
   ============================================================ */
.bxi-panel { position: relative; overflow: hidden; isolation: isolate; }
.bxi-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bxi-stage { position: relative; z-index: 10; }

/* The whole backdrop is switched off outside the landing rather than
   faded by a class-driven opacity transition - that left the photo stuck
   at 0.4 behind the auction UI, and display is unambiguous. */
/* The animated layers run behind EVERY screen, exactly as .wtt-bg does
   in Win the Treble - that is what makes the Treble feel of a piece
   rather than a menu with plain screens behind it. Only the team photo
   is landing-only, because a photograph behind a live auction competes
   with it in a way a drifting gradient does not. */
.bxi-bg { display: block; }
.bxi-bg-photo { display: none; }
.bxi-panel.is-landing .bxi-bg-photo { display: block; }
.bxi-bg-photo {
  position: absolute; inset: 0;
  background: url('images/fiveaside-hero-bg.jpg') center 22%/cover no-repeat;
  opacity: 0.4;
}
.bxi-panel.is-landing .bxi-bg-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(6,10,32,0.58), rgba(6,10,32,0.9));
}

.bxi-aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 22% 34%, rgba(255,255,255,.16), transparent 30%),
    radial-gradient(circle at 76% 26%, rgba(108,140,220,.26), transparent 30%),
    radial-gradient(circle at 52% 78%, rgba(20,28,106,.5), transparent 34%);
  filter: blur(46px);
  animation: bxiAurora 19s ease-in-out infinite alternate;
}
@keyframes bxiAurora {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.09); }
}
.bxi-streaks {
  position: absolute; inset: -30%;
  background: repeating-linear-gradient(115deg,
    transparent 0, transparent 48px,
    rgba(255,255,255,.07) 49px, rgba(160,185,255,.11) 51px,
    transparent 54px, transparent 105px);
  animation: bxiStreaks 17s linear infinite;
}
@keyframes bxiStreaks {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(105px,-52px,0); }
}
.bxi-glow-a, .bxi-glow-b {
  position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%;
  filter: blur(52px);
}
.bxi-glow-a {
  left: -12%; top: 6%;
  background: radial-gradient(circle, rgba(255,255,255,.34), rgba(200,215,255,.12) 45%, transparent 72%);
  animation: bxiGlowA 15s ease-in-out infinite alternate;
}
.bxi-glow-b {
  right: -14%; bottom: 2%;
  background: radial-gradient(circle, rgba(20,28,106,.62), rgba(14,21,85,.2) 45%, transparent 72%);
  animation: bxiGlowB 18s ease-in-out infinite alternate;
}
@keyframes bxiGlowA { from { transform: translate(0,0); } to { transform: translate(14%, 10%); } }
@keyframes bxiGlowB { from { transform: translate(0,0); } to { transform: translate(-12%, -8%); } }

/* Title gradient in the shirt rather than the Treble's blue-to-red. */
#panel-bxi .wtt-hero-title .l2 {
  /* End stop lightened from #6f86d8: over the team photo that measured
     3.93:1, fine for large text but below the bar the other hero titles
     hold. This clears 4.5:1. */
  background: linear-gradient(100deg, #ffffff 0%, #cfd9ff 46%, #9BABE8 100%);
  -webkit-background-clip: text; background-clip: text;
}
#panel-bxi .wtt-hero-badge::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
}
/* White on this darker navy measures 5.9:1. */
#panel-bxi .wtt-hero-btn.primary { background: linear-gradient(100deg, #24306e, #131a4a); }

@media (prefers-reduced-motion: reduce) {
  .bxi-aurora, .bxi-streaks, .bxi-glow-a, .bxi-glow-b { animation: none; }
}

/* Share / end session sit side by side under Next round. */
.wtt-h2h-endrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.6rem; }
.wtt-h2h-endrow .wtt-hero-btn { width: 100%; }

/* ============================================================
   THE GAUNTLET — LANDING
   Third use of the layered-gradient hero (Treble, 5-a-side, this),
   in the Europa night palette from the photo rather than either of
   the other two.
   ============================================================ */
.gnt-panel { position: relative; overflow: hidden; isolation: isolate; }
/* Same as the 5-a-side: gradients behind everything, photo on the
   landing only. */
.gnt-bg { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.gnt-bg-photo { display: none; }
.gnt-panel.is-landing .gnt-bg-photo { display: block; }
.gnt-stage { position: relative; z-index: 10; }

.gnt-bg-photo {
  position: absolute; inset: 0;
  background: url('images/gauntlet-hero-bg.jpg') center 28%/cover no-repeat;
  opacity: 0.42;
}
.gnt-panel.is-landing .gnt-bg-photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(8,6,20,0.56), rgba(8,6,20,0.9));
}
.gnt-aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 24% 32%, rgba(255,196,60,.2), transparent 30%),
    radial-gradient(circle at 74% 28%, rgba(196,32,48,.28), transparent 30%),
    radial-gradient(circle at 50% 78%, rgba(30,20,70,.5), transparent 34%);
  filter: blur(46px);
  animation: gntAurora 20s ease-in-out infinite alternate;
}
@keyframes gntAurora {
  from { transform: translate3d(-3%,-2%,0) scale(1); }
  to   { transform: translate3d(3%,2%,0) scale(1.09); }
}
.gnt-streaks {
  position: absolute; inset: -30%;
  background: repeating-linear-gradient(115deg,
    transparent 0, transparent 48px,
    rgba(255,196,60,.08) 49px, rgba(196,32,48,.12) 51px,
    transparent 54px, transparent 105px);
  animation: gntStreaks 18s linear infinite;
}
@keyframes gntStreaks {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(105px,-52px,0); }
}
.gnt-glow-a, .gnt-glow-b { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; filter: blur(52px); }
.gnt-glow-a {
  left: -12%; top: 4%;
  background: radial-gradient(circle, rgba(255,196,60,.34), rgba(255,170,40,.12) 45%, transparent 72%);
  animation: gntGlowA 16s ease-in-out infinite alternate;
}
.gnt-glow-b {
  right: -14%; bottom: 0;
  background: radial-gradient(circle, rgba(196,32,48,.5), rgba(120,16,30,.18) 45%, transparent 72%);
  animation: gntGlowB 19s ease-in-out infinite alternate;
}
@keyframes gntGlowA { from { transform: translate(0,0); } to { transform: translate(13%,9%); } }
@keyframes gntGlowB { from { transform: translate(0,0); } to { transform: translate(-11%,-7%); } }

#panel-gauntlet .wtt-hero-title .l2 {
  background: linear-gradient(100deg, #ffd76a 0%, #ffffff 48%, #ff8f86 100%);
  -webkit-background-clip: text; background-clip: text;
}
#panel-gauntlet .wtt-hero-badge::before {
  background: linear-gradient(90deg, transparent, rgba(255,215,106,0.8), transparent);
}
#panel-gauntlet .wtt-hero-btn.primary { background: linear-gradient(100deg, #8a6a12, #8c2028); }

@media (prefers-reduced-motion: reduce) {
  .gnt-aurora, .gnt-streaks, .gnt-glow-a, .gnt-glow-b { animation: none; }
}

/* ---- Gauntlet: buzzer round ---- */
.gnt-buzz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.8rem; }
.gnt-buzz-card {
  padding: 1rem; border-radius: 14px; margin-top: 0.6rem;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
}
.gnt-buzz-q {
  font-family: 'Source Serif 4', serif; font-size: 1.05rem; line-height: 1.4;
  color: #fff; margin-bottom: 0.9rem; text-align: center;
}
.gnt-buzz-answers { display: grid; gap: 0.45rem; margin-bottom: 0.8rem; }
.gnt-buzz-answers[hidden] { display: none; }
.gnt-buzz-answer {
  padding: 0.75rem 0.9rem; border-radius: 10px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.18);
  font-family: 'Inter', sans-serif; font-size: 0.85rem; color: #fff;
}
.gnt-buzz-answer:hover { background: rgba(255,255,255,0.14); }
.gnt-buzz-answer.correct { background: rgba(34,197,94,0.3); border-color: #22c55e; }
.gnt-buzz-answer.wrong { background: rgba(239,68,68,0.3); border-color: #ef4444; }

.gnt-buzz-btn {
  width: 100%; padding: 1.15rem; border-radius: 12px; cursor: pointer; border: none;
  font-family: 'Russo One', sans-serif; font-size: 1.15rem; letter-spacing: 0.06em;
  color: #16150a; background: linear-gradient(160deg, #ffd76a, #e0a92c);
  box-shadow: 0 6px 0 rgba(0,0,0,0.35);
}
.gnt-buzz-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,0.35); }
.gnt-buzz-btn[disabled] {
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.45);
  box-shadow: none; cursor: not-allowed;
}
.gnt-buzz-btn.is-mine { background: linear-gradient(160deg, #7ee6a6, #22c55e); color: #04210f; }
.gnt-buzz-note {
  margin: 0.7rem 0 0; text-align: center;
  font-family: 'Inter', sans-serif; font-size: 0.72rem; color: rgba(255,255,255,0.7);
}
.wtt-progress-row.is-out { opacity: 0.45; }
.wtt-progress-row.is-buzzing { border-color: #ffd76a; background: rgba(255,215,106,0.16); }

/* ---- Gauntlet: the Expert's chase ---- */
.gnt-chase-track {
  padding: 0.9rem 1rem; border-radius: 12px; margin-bottom: 0.6rem;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.14);
}
.gnt-chase-row { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; }
.gnt-chase-row .l {
  font-family: 'Inter', sans-serif; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7);
}
.gnt-chase-row .v { font-family: 'Russo One', sans-serif; font-size: 1.2rem; color: #fff; }
.gnt-chase-bar {
  height: 8px; border-radius: 999px; margin: 0.5rem 0;
  background: rgba(255,255,255,0.12); overflow: hidden;
}
/* The Expert closing on you, so it fills towards your total. */
.gnt-chase-bar .fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #8c2028, #ef4444);
  transition: width 0.4s ease;
}
.gnt-chase-wrong {
  padding: 0.7rem 0.85rem; border-radius: 10px; margin-bottom: 0.8rem;
  background: rgba(239,68,68,0.16); border: 1px solid rgba(239,68,68,0.45);
  font-family: 'Inter', sans-serif; font-size: 0.78rem; color: #ffb3ad; text-align: center;
}
.gnt-chase-wrong[hidden] { display: none; }
.gnt-chase-wrong strong { color: #fff; }

/* ============================================================
   5-A-SIDE AND GAUNTLET — TREBLE VISUAL LANGUAGE
   ============================================================
   Both games were built in an older style: hard 4-8px corners,
   flat purple gradient panels, borders in a purple that appears
   nowhere else. Win the Treble uses translucent white panels over
   the page background, 12-14px radii, a blur, uppercase micro
   labels and Russo One for numerals.

   This restyles the existing classes rather than rewriting the
   markup, so the games keep working exactly as they do now.
   ============================================================ */

/* ---- panels ---- */
.bxi-auction-card,
.bxi-squads .bxi-squad-col,
.bxi-record-bar,
.bxi-skip-row,
.gnt-question-card,
.gnt-round-gate,
.gnt-score-card,
.gnt-stats-strip,
.gnt-track-wrap,
.gnt-result-screen {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* Inner tiles sit darker than the panel they're in, as the Treble
   odds and summary tiles do. */
.gnt-stats-strip .box,
.bxi-record-box,
.bxi-rating-card,
.gnt-dual-score > div {
  background: rgba(0,0,0,0.28) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
}
.gnt-stats-strip { gap: 0.5rem !important; padding: 0.6rem !important; }
.gnt-stats-strip .box { padding: 0.7rem 0.4rem !important; }
.gnt-stats-strip .n,
.bxi-record-box .n {
  font-family: 'Russo One', sans-serif !important; color: #fff !important;
}
.gnt-stats-strip .l,
.bxi-record-box .l {
  font-family: 'Inter', sans-serif !important; font-size: 0.55rem !important;
  font-weight: 800 !important; letter-spacing: 0.12em !important;
  text-transform: uppercase !important; color: rgba(255,255,255,0.62) !important;
}

/* ---- buttons: the Treble pill, not the old square ---- */
.bxi-submit-bid-btn,
.bxi-skip-btn,
.bxi-raise-btn,
.bxi-concede-btn,
.bxi-join-btn,
.gnt-start-btn,
.gnt-share-btn,
.gnt-back-btn {
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}
.bxi-skip-btn,
.bxi-concede-btn,
.gnt-back-btn,
.gnt-share-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  color: #fff !important;
}
.bxi-skip-btn:hover,
.bxi-concede-btn:hover,
.gnt-back-btn:hover,
.gnt-share-btn:hover { background: rgba(255,255,255,0.14) !important; }

/* ---- choice tiles: route, difficulty, mode ---- */
.gnt-route-grid > *,
.gnt-diff-btn,
.gnt-mode-btn {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 12px !important;
  color: #fff !important;
}
.gnt-route-grid > *:hover,
.gnt-diff-btn:hover,
.gnt-mode-btn:hover { background: rgba(255,255,255,0.12) !important; }
.gnt-diff-btn.active,
.gnt-mode-btn.active,
.gnt-route-grid > *.selected {
  background: rgba(108,171,221,0.18) !important;
  border-color: #6CABDD !important;
}

/* ---- answer buttons match the buzzer's ---- */
.gnt-tf-btn,
.gnt-question-card button:not(.gnt-buzz-answer) {
  border-radius: 10px !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
}
.gnt-tf-btn:hover,
.gnt-question-card button:not(.gnt-buzz-answer):hover { background: rgba(255,255,255,0.14) !important; }
.gnt-tf-btn.correct,
.gnt-question-card button.correct {
  background: rgba(34,197,94,0.3) !important; border-color: #22c55e !important;
}
.gnt-tf-btn.wrong,
.gnt-question-card button.wrong {
  background: rgba(239,68,68,0.3) !important; border-color: #ef4444 !important;
}

/* ---- headings and micro labels ---- */
.bxi-header,
.gnt-turn-indicator,
.gnt-chase-label,
.bxi-info-row,
.bxi-budget-row {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.62rem !important; font-weight: 800 !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,0.72) !important;
}
.gnt-timer,
.bxi-bid-amount,
.gnt-r1-score {
  font-family: 'Russo One', sans-serif !important;
  color: #fff !important; font-variant-numeric: tabular-nums;
}

/* ---- tracks and bars ---- */
.gnt-track,
.bxi-budget-bar,
.bxi-sim-progress-track {
  background: rgba(255,255,255,0.12) !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.bxi-sim-progress-fill { border-radius: 999px !important; }

/* ---- the question itself, same face as the buzzer ---- */
.gnt-q-text {
  font-family: 'Source Serif 4', serif !important;
  color: #fff !important;
}
.gnt-q-cat {
  font-family: 'Inter', sans-serif !important; font-size: 0.55rem !important;
  font-weight: 800 !important; letter-spacing: 0.14em !important;
  text-transform: uppercase !important; color: rgba(255,255,255,0.6) !important;
}

/* ---- the old purple accent, replaced ----
   Both games leaned on rgba(139,92,246,…) for borders, fills and the
   primary action. Treble uses gold for the committing action and plain
   white translucency for everything structural, so the purple only
   survives where it is genuinely decorative. */
.bxi-submit-bid-btn,
.bxi-raise-btn,
.gnt-start-btn {
  background: #d4c44a !important;
  background-image: none !important;
  color: #16150a !important;
  border: none !important;
}
.bxi-submit-bid-btn:hover,
.bxi-raise-btn:hover,
.gnt-start-btn:hover { filter: brightness(1.06); }
.bxi-submit-bid-btn:disabled,
.bxi-raise-btn:disabled {
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.45) !important;
}

.bxi-bid-row button {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  border-radius: 10px !important;
  color: #fff !important;
}
.bxi-bid-row button:hover { background: rgba(255,255,255,0.15) !important; }

.bxi-slot, .bxi-rating-card, .bxi-record-icon, .bxi-info-icon, .bxi-sim-feed-row {
  border-color: rgba(255,255,255,0.14) !important;
}
.bxi-slot.filled { border-color: rgba(212,196,74,0.5) !important; }
.bxi-war-flash {
  background: rgba(212,196,74,0.14) !important;
  border: 1px solid rgba(212,196,74,0.45) !important;
  border-radius: 12px !important;
  color: #fff !important;
}
/* Was `.bxi-budget-bar > *`, which painted a gradient behind EVERY child
   of the bubble - including the label and the figure, which is what put a
   lighter box behind "Your Budget £15.0m". Only the fill element should
   ever get it. */
.bxi-sim-progress-fill {
  background: linear-gradient(90deg, #3879A8, #6CABDD) !important;
}
.bxi-budget-bar, .duel-leave-btn { border-color: rgba(255,255,255,0.2) !important; }
/* Category chip on the question card, in the neutral treatment. */
.gnt-q-cat {
  display: inline-block;
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 999px !important;
  padding: 0.22rem 0.6rem !important;
}


/* The game screens are not .bxi-stage / .gnt-stage, so they need lifting
   above the background layer themselves or they render behind it. */
#panel-bxi > .game-card > *:not(.bxi-bg),
#panel-gauntlet > .game-card > *:not(.gnt-bg) {
  position: relative;
  z-index: 10;
}

/* ============================================================
   PANELS: TINTED, NOT GREY
   ============================================================
   A white tint over a dark background produces grey - it lifts
   lightness without adding any colour. The Treble gets away with it
   because its background is a saturated blue-to-red mesh, so the
   panels pick colour up from underneath. The 5-a-side background is
   navy and white, which has almost no chroma to lend, so everything
   came out battleship grey.

   Two changes: the panel tint itself now carries colour, and the
   5-a-side background gets a proper blue rather than navy-into-white.
   ============================================================ */
#panel-bxi .bxi-auction-card,
#panel-bxi .bxi-squad-col,
#panel-bxi .bxi-record-bar,
#panel-bxi .bxi-skip-row,
#panel-gauntlet .gnt-question-card,
#panel-gauntlet .gnt-round-gate,
#panel-gauntlet .gnt-score-card,
#panel-gauntlet .gnt-stats-strip,
#panel-gauntlet .gnt-track-wrap,
#panel-gauntlet .gnt-result-screen,
#panel-gauntlet .gnt-buzz-card,
#panel-gauntlet .gnt-chase-track {
  background: linear-gradient(160deg, rgba(88,116,208,0.16), rgba(40,54,128,0.16)) !important;
  border-color: rgba(140,168,255,0.26) !important;
}
#panel-gauntlet .gnt-question-card,
#panel-gauntlet .gnt-buzz-card,
#panel-gauntlet .gnt-chase-track,
#panel-gauntlet .gnt-stats-strip {
  /* the Gauntlet leans warm, to match its own landing */
  background: linear-gradient(160deg, rgba(214,150,60,0.14), rgba(150,44,60,0.16)) !important;
  border-color: rgba(255,196,120,0.26) !important;
}

/* Inner tiles stay darker but keep a tint rather than going flat black. */
#panel-bxi .bxi-record-box,
#panel-bxi .bxi-rating-card,
#panel-gauntlet .gnt-stats-strip .box,
#panel-gauntlet .gnt-dual-score > div {
  background: rgba(12,18,52,0.5) !important;
  border-color: rgba(140,168,255,0.2) !important;
}

/* Empty squad slots read as slots, not as grey bars. */
#panel-bxi .bxi-slot {
  background: rgba(12,18,52,0.4) !important;
  border-color: rgba(140,168,255,0.22) !important;
}
#panel-bxi .bxi-slot.filled {
  background: linear-gradient(160deg, rgba(212,196,74,0.16), rgba(140,110,30,0.14)) !important;
  border-color: rgba(212,196,74,0.55) !important;
}

/* ---- 5-a-side background: actual blue ----
   Was navy-to-white, which is what made the whole screen read grey. */
.bxi-aurora {
  background:
    radial-gradient(circle at 22% 34%, rgba(90,160,255,.34), transparent 32%),
    radial-gradient(circle at 76% 26%, rgba(120,90,235,.34), transparent 32%),
    radial-gradient(circle at 52% 78%, rgba(20,40,140,.55), transparent 36%) !important;
}
.bxi-glow-a {
  background: radial-gradient(circle, rgba(70,150,255,.42), rgba(60,110,220,.16) 45%, transparent 72%) !important;
}
.bxi-glow-b {
  background: radial-gradient(circle, rgba(120,80,230,.46), rgba(60,30,150,.18) 45%, transparent 72%) !important;
}
.bxi-streaks {
  background: repeating-linear-gradient(115deg,
    transparent 0, transparent 48px,
    rgba(120,180,255,.10) 49px, rgba(150,120,255,.14) 51px,
    transparent 54px, transparent 105px) !important;
}

/* ---- budget bubbles: yours blue, theirs red ----
   Both were the same neutral fill, so at a glance you had to read the
   label to know which was which. Values measured on the resulting fills:
   the gold figure sits at 7.6:1 on the blue and 8.2:1 on the red. */
#panel-bxi .bxi-budget-bar {
  background: linear-gradient(160deg, rgba(59,130,246,0.26), rgba(30,72,160,0.22)) !important;
  border: 1px solid rgba(120,170,255,0.45) !important;
}
#panel-bxi .bxi-budget-bar.ai {
  background: linear-gradient(160deg, rgba(239,68,68,0.26), rgba(150,30,36,0.22)) !important;
  border-color: rgba(255,140,132,0.45) !important;
}
#panel-bxi .bxi-budget-bar .lbl { color: rgba(255,255,255,0.8) !important; }
#panel-bxi .bxi-budget-bar .val { color: #ffffff !important; }
/* The bar that fills as money is spent takes the same side colour. */
#panel-bxi .bxi-budget-bar > .fill,
#panel-bxi .bxi-budget-bar > span.bar {
  background: linear-gradient(90deg, #3879A8, #6CABDD) !important;
}
#panel-bxi .bxi-budget-bar.ai > .fill,
#panel-bxi .bxi-budget-bar.ai > span.bar {
  background: linear-gradient(90deg, #a33, #ef4444) !important;
}

/* ---- Profile: customisation and settings panels ---- */
.pf-sec-label {
  font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7);
  margin-bottom: 0.5rem;
}
.pf-sec-note {
  margin: 0 0 1rem; font-family: 'Inter', sans-serif; font-size: 0.78rem;
  line-height: 1.6; color: rgba(255,255,255,0.72);
}
.pf-custom-preview { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.3rem; }
.pf-emblem-preview {
  width: 4.2rem; height: 4.2rem; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Russo One', sans-serif; font-size: 1.6rem; color: #fff;
  border: 2px solid rgba(255,255,255,0.28);
}
/* THFC needs to shrink to fit the circle. */
.pf-emblem-preview.is-word, .tsw-pf-avatar.is-word { font-size: 0.9rem; letter-spacing: 0.02em; }
.pf-emblem-name { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 0.95rem; color: #fff; }
.pf-emblem-hint {
  font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5);
}

.pf-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.3rem; }
.pf-swatch {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.22);
}
.pf-swatch:hover { transform: scale(1.06); }
.pf-swatch.selected { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.22); }

.pf-marks { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pf-mark {
  padding: 0.55rem 0.85rem; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 700;
}
.pf-mark:hover { background: rgba(255,255,255,0.14); }
.pf-mark.selected { background: rgba(212,196,74,0.2); border-color: #d4c44a; }

.pf-saved {
  margin: 0.9rem 0 0; font-family: 'Inter', sans-serif; font-size: 0.74rem;
  color: #a7f3c4;
}
.pf-saved[hidden] { display: none; }

.pf-signout { width: 100%; }
.pf-danger {
  width: 100%;
  background: rgba(239,68,68,0.16) !important;
  border: 1px solid rgba(255,131,122,0.5) !important;
  color: #ffb3ad !important;
}
.pf-danger:hover { background: rgba(239,68,68,0.26) !important; }

/* ============================================================
   FOOTBALL 501
   ============================================================ */
.f501-panel { position: relative; overflow: hidden; isolation: isolate; }
.f501-bg { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.f501-stage { position: relative; z-index: 10; }

.f501-aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 24% 32%, rgba(220,40,50,.30), transparent 32%),
    radial-gradient(circle at 74% 28%, rgba(30,150,90,.26), transparent 32%),
    radial-gradient(circle at 50% 78%, rgba(20,26,80,.55), transparent 36%);
  filter: blur(46px);
  animation: f501Aurora 20s ease-in-out infinite alternate;
}
@keyframes f501Aurora {
  from { transform: translate3d(-3%,-2%,0) scale(1); }
  to   { transform: translate3d(3%,2%,0) scale(1.09); }
}
.f501-streaks {
  position: absolute; inset: -30%;
  background: repeating-linear-gradient(115deg, transparent 0, transparent 48px,
    rgba(255,255,255,.06) 49px, rgba(220,60,60,.10) 51px, transparent 54px, transparent 105px);
  animation: f501Streaks 18s linear infinite;
}
@keyframes f501Streaks { from { transform: translate3d(0,0,0); } to { transform: translate3d(105px,-52px,0); } }
.f501-glow-a, .f501-glow-b { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; filter: blur(52px); }
.f501-glow-a { left: -12%; top: 4%; background: radial-gradient(circle, rgba(220,40,50,.34), transparent 72%); }
.f501-glow-b { right: -14%; bottom: 0; background: radial-gradient(circle, rgba(20,140,90,.34), transparent 72%); }

#panel-f501 .wtt-hero-title .l2 {
  background: linear-gradient(100deg, #ff6b6b 0%, #ffffff 48%, #6ee7a0 100%);
  -webkit-background-clip: text; background-clip: text;
}
#panel-f501 .wtt-hero-btn.primary { background: linear-gradient(100deg, #9c1f28, #1d6b46); }

/* ---- topic picker ---- */
.f501-topics { display: flex; flex-direction: column; gap: 0.5rem; max-width: 30rem; margin: 0 auto 1.2rem; }
.f501-topic {
  text-align: left; padding: 0.9rem 1rem; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.2); color: #fff;
}
.f501-topic:hover { background: rgba(255,255,255,0.14); }
.f501-topic .t { display: block; font-family: 'Russo One', sans-serif; font-size: 0.95rem; }
.f501-topic .b { display: block; margin-top: 0.2rem; font-family: 'Inter', sans-serif; font-size: 0.72rem; color: rgba(255,255,255,0.7); }

/* ---- scoreboard ---- */
.f501-scores { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.f501-score {
  text-align: center; padding: 0.7rem 0.5rem; border-radius: 12px;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.14);
}
.f501-score.is-turn { border-color: #d4c44a; background: rgba(212,196,74,0.16); }
.f501-score .who {
  font-family: 'Inter', sans-serif; font-size: 0.56rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7);
}
.f501-score .val { font-family: 'Russo One', sans-serif; font-size: 1.8rem; color: #fff; line-height: 1.1; }
.f501-topic-chip {
  font-family: 'Inter', sans-serif; font-size: 0.58rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.72);
  padding: 0.3rem 0.5rem; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
}

/* ---- the board ---- */
.f501-board-wrap { max-width: 20rem; margin: 0 auto; }
.f501-board { width: 100%; height: auto; display: block; }
.f501-rim { fill: #14100c; }
.f501-dbl-a { fill: #c8202c; } .f501-dbl-b { fill: #1d7a4c; }
.f501-trb-a { fill: #c8202c; } .f501-trb-b { fill: #1d7a4c; }
.f501-bed-a { fill: #f2e6cf; } .f501-bed-b { fill: #16130f; }
.f501-25 { fill: #1d7a4c; } .f501-bull { fill: #c8202c; }
.f501-num { fill: #fff; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 800; }

.f501-dart { animation: f501DartIn 0.26s cubic-bezier(0.22,1,0.36,1); }
@keyframes f501DartIn { from { opacity: 0; transform: translate(18px,-22px) scale(1.3); } to { opacity: 1; transform: none; } }
.f501-shaft { stroke: #e8e8ea; stroke-width: 2.2; }
.f501-tip { fill: #fff; stroke: #111; stroke-width: 1; }
.f501-flight { fill: #d4c44a; }

.f501-throw {
  text-align: center; min-height: 1.4rem; margin: 0.5rem 0 0.2rem;
  font-family: 'Russo One', sans-serif; font-size: 0.9rem; color: #d4c44a; letter-spacing: 0.04em;
}
.f501-feedback {
  text-align: center; margin-bottom: 0.9rem; min-height: 2.4rem;
  font-family: 'Inter', sans-serif; font-size: 0.82rem; line-height: 1.5; color: rgba(255,255,255,0.86);
}
.f501-feedback.is-bust { color: #ff9d97; }
.f501-feedback.is-win  { color: #7ee6a6; }
.f501-feedback.is-warn { color: #ffd76a; }

.f501-input-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.f501-input-row .wtt-field-input { flex: 1; min-width: 0; }

.f501-used-wrap { margin-bottom: 1rem; }
.f501-used { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.f501-used-chip {
  padding: 0.2rem 0.45rem; border-radius: 999px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14);
  font-family: 'Inter', sans-serif; font-size: 0.62rem; color: rgba(255,255,255,0.68);
}
.f501-quit { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .f501-aurora, .f501-streaks { animation: none; }
  .f501-dart { animation: none; }
}

/* ---- board texture ----
   The beds keep flat base colours; the fibre and lighting come from the
   SVG filters, so these are the underlying tones the texture sits on. */

/* ---- board texture ----
   Flat base tones; the fibre and the lighting come from the SVG filters
   layered over them, so these are just what the texture sits on. */
.f501-dbl-a { fill: #b81c28; } .f501-dbl-b { fill: #14663f; }
.f501-trb-a { fill: #b81c28; } .f501-trb-b { fill: #14663f; }
/* The lighting gradient lifts everything, so the dark bed starts nearly
   black or it renders as flat grey. */
.f501-bed-a { fill: #e8dabf; } .f501-bed-b { fill: #0a0907; }
.f501-25 { fill: #14663f; } .f501-bull { fill: #b81c28; }

.f501-spider { stroke: url(#f501Wire); stroke-width: 1.5; fill: none; opacity: 0.95; }
.f501-spider-shadow { stroke: #000; stroke-width: 2.2; fill: none; opacity: 0.45; }
.f501-num {
  fill: #f4f1e8; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 800;
  letter-spacing: 0.02em;
}

/* ---- the big score ----
   The number climbs as each dart lands, so it doubles as the running
   total for the throw rather than only the final figure. */
.f501-big {
  text-align: center; min-height: 3.6rem; line-height: 1;
  font-family: 'Russo One', sans-serif; font-size: 3.2rem;
  color: #fff; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 18px rgba(0,0,0,0.6);
  margin: 0.3rem 0 0.1rem;
}
.f501-big.is-pop { animation: f501Pop 0.34s cubic-bezier(0.22,1,0.36,1); }
@keyframes f501Pop {
  0%   { transform: scale(0.72); opacity: 0.4; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.f501-big.is-final { font-size: 3.8rem; }
.f501-big.is-good { color: #7ee6a6; }
.f501-big.is-win  { color: #d4c44a; }
.f501-big.is-bust { color: #ff9d97; text-decoration: line-through; text-decoration-thickness: 3px; }

@media (prefers-reduced-motion: reduce) {
  .f501-big.is-pop { animation: none; }
}

/* ---- Football 501: name suggestions ---- */
.f501-typeahead { position: relative; flex: 1; min-width: 0; }
.f501-typeahead .wtt-field-input { width: 100%; }

.f501-suggest {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 0.4rem);
  z-index: 40; margin: 0; padding: 0.25rem; list-style: none;
  max-height: 15rem; overflow-y: auto;
  border-radius: 12px;
  background: #101736;
  border: 1px solid rgba(140,168,255,0.3);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.55);
}
.f501-suggest[hidden] { display: none; }

.f501-sug {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.55rem 0.6rem; border-radius: 8px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.82rem; color: #fff;
}
.f501-sug:hover, .f501-sug.is-active { background: rgba(140,168,255,0.2); }
.f501-sug .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The only thing that ever appears here now is the word "used"; the
   figure is withheld on purpose. */
.f501-sug .vl {
  flex-shrink: 0; font-family: 'Inter', sans-serif; font-size: 0.68rem;
  color: rgba(255,255,255,0.5); letter-spacing: 0.06em; text-transform: uppercase;
}
.f501-sug.is-used { opacity: 0.45; }
.f501-sug.is-used .nm { text-decoration: line-through; }
.f501-sug.is-used .vl { color: rgba(255,255,255,0.5); font-family: 'Inter', sans-serif; font-size: 0.68rem; }

/* ---- Football 501: bust popup ----
   Sits over the board, because there is no throw to watch. */
.f501-board-wrap { position: relative; }
.f501-bustpop {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  /* 0.72 left the word at 3.59:1 over the cream beds - fine for large
     text but under AA. 0.84 takes it past 4.5. */
  background: rgba(8,6,16,0.84);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border-radius: 50%;
}
.f501-bustpop[hidden] { display: none; }
.f501-bustpop.is-in .f501-bustpop-inner { animation: f501BustIn 0.42s cubic-bezier(0.22,1,0.36,1); }
.f501-bustpop-inner { text-align: center; padding: 0 1.6rem; }
.f501-bustpop .w {
  font-family: 'Russo One', sans-serif; font-size: 2.6rem; letter-spacing: 0.06em;
  color: #ff6b6b; text-shadow: 0 4px 20px rgba(0,0,0,0.7);
}
.f501-bustpop .s {
  margin-top: 0.4rem; font-family: 'Inter', sans-serif; font-size: 0.76rem;
  line-height: 1.5; color: rgba(255,255,255,0.9);
}
@keyframes f501BustIn {
  0%   { transform: scale(0.6) rotate(-6deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .f501-bustpop.is-in .f501-bustpop-inner { animation: none; }
}


/* The guess table and the New Player button sit below the input, so the
   wrap needs to win the stacking order or the dropdown opens behind them. */
#panel-gts .tsw-search-wrap { position: relative; z-index: 200; }
#panel-gts .gts-guess-row.header,
#panel-gts .gts-guesses { position: relative; z-index: 1; }

/* ---- Football 501: match setup ---- */
.f501-setup-block { max-width: 26rem; margin: 0 auto 1.2rem; }
.f501-choice { display: flex; gap: 0.45rem; margin-top: 0.5rem; }
.f501-opt {
  flex: 1; padding: 0.75rem 0.4rem; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-family: 'Russo One', sans-serif; font-size: 1rem;
}
.f501-opt:hover { background: rgba(255,255,255,0.14); }
.f501-opt.is-on { background: rgba(212,196,74,0.2); border-color: #d4c44a; color: #fff; }
.f501-note {
  margin: 0.5rem 0 0; font-family: 'Inter', sans-serif; font-size: 0.7rem;
  color: rgba(255,255,255,0.6);
}

/* ---- scoreboard for 2-4 seats ---- */
.f501-roundbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; margin-bottom: 0.6rem;
}
.f501-roundno {
  font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7);
}
.f501-scores { display: grid; gap: 0.4rem; margin-bottom: 0.8rem; }
.f501-scores.seats-2 { grid-template-columns: repeat(2,1fr); }
.f501-scores.seats-3 { grid-template-columns: repeat(3,1fr); }
.f501-scores.seats-4 { grid-template-columns: repeat(2,1fr); }
.f501-score .wins {
  margin-top: 0.25rem; font-family: 'Inter', sans-serif; font-size: 0.6rem;
  font-weight: 800; letter-spacing: 0.06em; color: #d4c44a;
}
/* Checked out, waiting for the rest of the round to play out. */
.f501-score.is-out { border-color: #7ee6a6; background: rgba(34,197,94,0.16); }
.f501-score.is-out .val { color: #7ee6a6; }
/* Out of throws this round without checking out. */
.f501-score.is-done { opacity: 0.55; }
.f501-next { width: 100%; margin-bottom: 0.6rem; }

/* ---- Football 501: round topic plan ---- */
.f501-plan { display: flex; flex-direction: column; gap: 0.45rem; max-width: 26rem; margin: 0 auto 0.9rem; }
.f501-plan-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.6rem; border-radius: 10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
}
.f501-plan-row .n {
  flex-shrink: 0; min-width: 4.6rem;
  font-family: 'Inter', sans-serif; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.72);
}
.f501-plan-select {
  flex: 1; min-width: 0; padding: 0.5rem 0.55rem; border-radius: 8px;
  background: #101736; color: #fff; border: 1px solid rgba(140,168,255,0.32);
  font-family: 'Inter', sans-serif; font-size: 0.8rem;
}
.f501-plan-tools { display: flex; gap: 0.5rem; max-width: 26rem; margin: 0 auto 1.1rem; }
.f501-plan-tools .wtt-hero-btn { flex: 1; }
.f501-plan-tools .wtt-hero-btn[hidden] { display: none; }

/* ---- Football 501: standings between rounds ---- */
.f501-table { list-style: none; margin: 0 auto 1.2rem; padding: 0; max-width: 26rem; display: flex; flex-direction: column; gap: 0.4rem; }
.f501-table-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.65rem 0.8rem; border-radius: 11px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
}
.f501-table-row.is-winner { border-color: #7ee6a6; background: rgba(34,197,94,0.16); }
.f501-table-row .pos {
  flex-shrink: 0; width: 1.4rem; font-family: 'Russo One', sans-serif;
  font-size: 0.9rem; color: rgba(255,255,255,0.6);
}
.f501-table-row .nm { flex: 1; min-width: 0; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.86rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f501-table-row .last { flex-shrink: 0; font-family: 'Inter', sans-serif; font-size: 0.64rem; color: rgba(255,255,255,0.6); }
.f501-table-row .w { flex-shrink: 0; font-family: 'Russo One', sans-serif; font-size: 1.1rem; color: #d4c44a; }
.f501-starter { max-width: 26rem; margin: 0 auto 1rem; }
.f501-starter .f501-choice { flex-wrap: wrap; }
.f501-starter .f501-opt { flex: 1 1 40%; font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 700; }

/* ============================================================
   THE GAUNTLET — ROUND 2 BOARD
   ============================================================
   A vertical ladder instead of a progress bar. Home sits at the
   bottom, the start at the top, and the money on each rung makes
   the distance mean something. Beside it, who is playing and what
   the fund is worth.
   ============================================================ */
.gnt-board { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 0.9rem; align-items: start; }

.gnt-ladder-wrap {
  padding: 0.5rem; border-radius: 14px;
  background: linear-gradient(180deg, rgba(10,14,42,0.9), rgba(6,9,28,0.9));
  border: 1px solid rgba(140,168,255,0.28);
}
.gnt-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }

.gnt-rung {
  position: relative; display: grid; grid-template-columns: 1rem 1fr 1rem;
  align-items: center; gap: 0.2rem;
  padding: 0.4rem 0.3rem; border-radius: 6px;
  background: linear-gradient(180deg, #1e63d8, #12409a);
  border: 1px solid rgba(150,190,255,0.4);
  font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 800;
  color: #eaf1ff; text-align: center;
  /* the rungs taper towards home, as on the real board */
  width: 100%;
}
.gnt-rung .amt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gnt-rung .mk { font-size: 0.7rem; color: #ffd76a; line-height: 1; }

/* Rungs already passed sit darker. */
.gnt-rung.is-behind { background: linear-gradient(180deg, #14306e, #0d1f4c); opacity: 0.75; }
/* Where you are. */
.gnt-rung.is-you {
  background: linear-gradient(180deg, #2f8bff, #1b5fd0);
  border-color: #ffd76a; box-shadow: 0 0 0 1px rgba(255,215,106,0.5);
}
/* Where the Expert is. */
.gnt-rung.is-expert { border-color: #ff6b6b; box-shadow: 0 0 0 1px rgba(255,107,107,0.5); }
.gnt-rung.is-expert .mk.right { color: #ff8f86; }
.gnt-rung.is-home {
  background: linear-gradient(180deg, #1d7a4c, #0f5030);
  letter-spacing: 0.12em;
}

.gnt-board-side { display: flex; flex-direction: column; gap: 0.6rem; }
.gnt-team {
  padding: 0.7rem; border-radius: 14px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
}
.gnt-team-title {
  font-family: 'Inter', sans-serif; font-size: 0.55rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.65);
}
.gnt-team-pot {
  font-family: 'Russo One', sans-serif; font-size: 1.5rem; color: #ffd76a;
  line-height: 1.2; margin-bottom: 0.5rem;
}
.gnt-team-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.gnt-team-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
  padding: 0.35rem 0.45rem; border-radius: 7px;
  background: rgba(0,0,0,0.24); border: 1px solid rgba(255,255,255,0.1);
  font-family: 'Inter', sans-serif; font-size: 0.68rem; color: #fff;
}
.gnt-team-row.is-self { border-color: rgba(255,215,106,0.5); }
.gnt-team-row.is-out { opacity: 0.45; }
.gnt-team-row.is-out .who { text-decoration: line-through; }
.gnt-team-row .st {
  flex-shrink: 0; font-size: 0.58rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.gnt-board-stats { display: flex; flex-direction: column; gap: 0.35rem; }
.gnt-board-stats .s {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.45rem 0.55rem; border-radius: 9px;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.12);
}
.gnt-board-stats .l {
  font-family: 'Inter', sans-serif; font-size: 0.55rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.65);
}
.gnt-board-stats .v { font-family: 'Russo One', sans-serif; font-size: 1.05rem; color: #fff; }

@media (max-width: 400px) {
  .gnt-board { grid-template-columns: 1.05fr 1fr; gap: 0.5rem; }
  .gnt-rung { font-size: 0.64rem; padding: 0.34rem 0.2rem; }
}

/* ============================================================
   FOOTBALL BINGO
   ============================================================ */
.fb-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.8rem; border-radius: 14px 14px 4px 4px;
  background: linear-gradient(150deg, #4b31c9, #3a219f);
  border: 1px solid rgba(160,140,255,0.5);
}
.fb-card-num {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #2a1a70;
  font-family: 'Russo One', sans-serif; font-size: 1.15rem;
}
.fb-card-id { min-width: 0; }
.fb-card-club {
  font-family: 'Inter', sans-serif; font-size: 0.58rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.72);
}
.fb-card-name {
  font-family: 'Russo One', sans-serif; font-size: 1.15rem; color: #fff;
  line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-card-meta {
  font-family: 'Inter', sans-serif; font-size: 0.6rem; color: rgba(255,255,255,0.7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-card-actions { text-align: right; }
.fb-skip {
  background: none; border: none; cursor: pointer; padding: 0.2rem 0;
  font-family: 'Inter', sans-serif; font-size: 0.86rem; font-weight: 800;
  letter-spacing: 0.06em; color: #fff;
}
.fb-skip[disabled] { color: rgba(255,255,255,0.4); cursor: not-allowed; }
.fb-remaining {
  font-family: 'Inter', sans-serif; font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.06em; color: rgba(255,255,255,0.62); white-space: nowrap;
}

.fb-grid {
  /* minmax(0,1fr) rather than 1fr: a grid column's default minimum is
     its CONTENT width, so a long label like "EXACTLY 0 PL YELLOW CARDS"
     forced the column wider than its share and pushed the fourth column
     off the edge. Zero minimum lets the tiles shrink and the text wrap. */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  padding: 4px; border-radius: 0 0 14px 14px;
  background: rgba(0,0,0,0.35); margin-bottom: 0.8rem;
}
.fb-sq {
  min-width: 0; aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.15rem;
  padding: 0.3rem 0.24rem; cursor: pointer;
  background: #2c2f45; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px;
  color: #fff; text-align: center;
}
.fb-sq:hover { background: #3a3e5c; }
/* There is deliberately no "this one fits" state. Marking the valid
   squares gave the answer away. */
.fb-sq.is-filled { background: #1c6b3f; border-color: #2f9c60; cursor: default; }
.fb-sq-icon { font-size: 1rem; line-height: 1; }
.fb-sq-crit {
  font-family: 'Inter', sans-serif; font-weight: 800;
  letter-spacing: 0.01em; line-height: 1.2; color: #fff;
  /* Break between words, not through them - "NETHERLANDS" was splitting
     as NETHERLAND / S. */
  overflow-wrap: normal; word-break: keep-all; hyphens: none;
  max-width: 100%;
  /* Was 0.5rem and genuinely hard to read. This scales with the tile so
     it is as large as the box allows on any width. */
  font-size: clamp(0.6rem, 3.1vw, 0.78rem);
}
/* Longer labels step down rather than overflowing. */
.fb-sq.is-long .fb-sq-crit  { font-size: clamp(0.54rem, 2.7vw, 0.68rem); }
.fb-sq.is-vlong .fb-sq-crit { font-size: clamp(0.48rem, 2.3vw, 0.58rem); }
/* A single word too wide for the tile at any comfortable size. Smaller,
   and allowed to break rather than spill over the edge. */
.fb-sq.is-longword .fb-sq-crit {
  font-size: clamp(0.42rem, 2vw, 0.52rem);
  overflow-wrap: anywhere; word-break: normal;
}
.fb-sq-sub { font-family: 'Inter', sans-serif; font-size: clamp(0.46rem, 2vw, 0.56rem); color: rgba(255,255,255,0.6); }
.fb-sq-player {
  font-family: 'Inter', sans-serif; font-size: clamp(0.58rem, 2.9vw, 0.74rem); font-weight: 800;
  color: #fff; line-height: 1.2; overflow-wrap: normal; word-break: keep-all;
}
.fb-sq.is-filled .fb-sq-crit { color: rgba(255,255,255,0.62); font-size: clamp(0.44rem, 2vw, 0.54rem); }

.fb-status {
  text-align: center; min-height: 2.2rem; margin-bottom: 0.8rem;
  font-family: 'Inter', sans-serif; font-size: 0.8rem; color: rgba(255,255,255,0.86);
}
.fb-status.is-good { color: #7ee6a6; }
.fb-status.is-bad  { color: #ff9d97; }
.fb-status.is-warn { color: #ffd76a; }
.fb-result-title { font-family: 'Russo One', sans-serif; font-size: 1.4rem; color: #fff; text-align: center; }
.fb-result-sub {
  text-align: center; margin: 0.4rem 0 1rem;
  font-family: 'Inter', sans-serif; font-size: 0.82rem; color: rgba(255,255,255,0.75);
}

/* ---- Football Bingo: wildcard and daily ---- */
.fb-wildrow {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: linear-gradient(150deg, #43299f, #331f7e);
  border-left: 1px solid rgba(160,140,255,0.5); border-right: 1px solid rgba(160,140,255,0.5);
}
.fb-wild {
  flex-shrink: 0; padding: 0.45rem 0.8rem; border-radius: 8px; cursor: pointer;
  background: #d6f24a; border: none; color: #21260a;
  font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 800;
}
.fb-wild:hover { filter: brightness(1.06); }
.fb-wild[disabled] { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.45); cursor: not-allowed; }
/* No lit-up state either - it flagged which players covered several
   categories, which is exactly the judgement the player should make. */
.fb-wild-note {
  min-width: 0; font-family: 'Inter', sans-serif; font-size: 0.62rem;
  color: rgba(255,255,255,0.72); line-height: 1.3;
}
.fb-card.is-missed { opacity: 0.5; filter: grayscale(0.6); }
.fb-daily {
  text-align: center; margin-bottom: 0.7rem;
  font-family: 'Inter', sans-serif; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6);
}

/* ---- Win the Treble: restart ---- */
.wtt-restartbar { display: flex; justify-content: flex-end; margin-bottom: 0.6rem; }
.wtt-restartbar[hidden] { display: none; }
.wtt-restart {
  padding: 0.4rem 0.75rem; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.24);
  color: rgba(255,255,255,0.86);
  font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.06em;
}
.wtt-restart:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* ---- Football 501: possible answers ----
   A count of the players who would check you out from here. Deliberately
   a number and nothing more - naming them would do the remembering for
   you. */
.f501-outs {
  display: flex; align-items: baseline; justify-content: center; gap: 0.4rem;
  margin: 0 0 0.5rem; padding: 0.4rem 0.7rem; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
  width: fit-content; margin-left: auto; margin-right: auto;
}
.f501-outs[hidden] { display: none; }
.f501-outs .n { font-family: 'Russo One', sans-serif; font-size: 1rem; color: #7ee6a6; }
.f501-outs .l {
  font-family: 'Inter', sans-serif; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.7);
}
/* Getting tight. */
.f501-outs.is-tight { border-color: rgba(255,215,106,0.5); }
.f501-outs.is-tight .n { color: #ffd76a; }
/* Nothing on this score checks out at all. */
.f501-outs.is-none { border-color: rgba(255,107,107,0.5); }
.f501-outs.is-none .n { color: #ff9d97; }

/* ---- The Gauntlet: the Expert's three offers ---- */
.gnt-offer-card {
  padding: 0.9rem; border-radius: 14px; cursor: pointer; text-align: center;
  background: linear-gradient(180deg, rgba(30,99,216,0.28), rgba(18,64,154,0.28));
  border: 1px solid rgba(150,190,255,0.4);
}
.gnt-offer-card:hover { background: linear-gradient(180deg, rgba(47,139,255,0.4), rgba(27,95,208,0.4)); }
.gnt-offer-card.high { border-color: rgba(255,107,107,0.55); }
.gnt-offer-card.low  { border-color: rgba(126,230,166,0.55); }
.gnt-offer-amount { font-family: 'Russo One', sans-serif; font-size: 1.7rem; color: #ffd76a; line-height: 1.1; }
.gnt-offer-name {
  margin-top: 0.2rem; font-family: 'Inter', sans-serif; font-size: 0.62rem;
  font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
}
.gnt-offer-desc {
  margin-top: 0.35rem; font-family: 'Inter', sans-serif; font-size: 0.72rem;
  line-height: 1.4; color: rgba(255,255,255,0.78);
}
.gnt-offer-gap {
  margin-top: 0.45rem; font-family: 'Inter', sans-serif; font-size: 0.6rem;
  letter-spacing: 0.05em; color: rgba(255,255,255,0.55);
}
/* Once an offer is taken the other two go, so the board is about position
   rather than money. */
.gnt-offer-card.is-gone { display: none; }

/* The rungs carry no amounts now, just who is standing where. */
.gnt-rung .amt { font-size: 0.62rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.55); }
.gnt-rung.is-you .amt, .gnt-rung.is-expert .amt { color: #fff; }
.gnt-rung.is-home .amt { color: #fff; font-size: 0.66rem; }

/* ---- Football 501: final standings ---- */
.f501-final {
  margin-bottom: 0.9rem; padding: 0.9rem 0.8rem; border-radius: 14px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16);
}
.f501-final[hidden] { display: none; }
.f501-final-title {
  text-align: center; margin-bottom: 0.7rem;
  font-family: 'Russo One', sans-serif; font-size: 1.25rem; color: #fff;
}
.f501-final-sub {
  text-align: center; margin-top: 0.6rem;
  font-family: 'Inter', sans-serif; font-size: 0.66rem;
  letter-spacing: 0.04em; color: rgba(255,255,255,0.6);
}
.f501-final .f501-table { margin-bottom: 0; }
.f501-table-row.is-self { border-color: rgba(255,215,106,0.5); }


/* ============================================================
   PULL-TO-REFRESH LOCK
   ============================================================
   On mobile, dragging down at the top of the page reloads it. In an
   online 501 match that is fatal: the reload drops the player out of
   the room mid-turn, which reads as the game crashing.

   overscroll-behavior stops the browser turning an over-scroll into a
   refresh. It is applied only while a live online match is on screen -
   scrolling still works normally, and the rest of the site is
   untouched, so nobody loses pull-to-refresh where they expect it.
   ============================================================ */
html.f501-no-refresh,
body.f501-no-refresh {
  overscroll-behavior-y: contain;
  overscroll-behavior-x: none;
}

/* ============================================================
   GOALSIDES — SHELL
   ============================================================
   Header, hero, game tiles and footer. The three games below keep
   their own styling; only the palette above was remapped.
   ============================================================ */
.gs-header {
  position: sticky; top: 0; z-index: 300;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 1.2rem;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(142,207,40,0.28);
}
.gs-brand { display: flex; align-items: center; gap: 0.55rem; }
.gs-mark { width: 30px; height: 30px; object-fit: contain; }
.gs-wordmark {
  font-family: 'Russo One', sans-serif; font-size: 1.1rem;
  font-style: italic; letter-spacing: -0.01em; color: #fff;
}
.gs-wordmark span { color: var(--green); }
.gs-back {
  padding: 0.4rem 0.8rem; border-radius: 999px; cursor: pointer;
  background: rgba(142,207,40,0.14); border: 1px solid rgba(142,207,40,0.45);
  color: #d9f2b0; font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 800;
}
.gs-back:hover { background: rgba(142,207,40,0.24); color: #fff; }

.gs-hero { text-align: center; padding: 1.6rem 0 1.2rem; }
.gs-hero-logo { width: min(340px, 78vw); margin: 0 auto; }
.gs-hero-tag {
  margin-top: -0.4rem;
  font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--green);
}

.tswb-home-grid { display: grid; gap: 0.7rem; margin-bottom: 2rem; }
.gs-tile {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem;
  width: 100%; text-align: left; cursor: pointer;
  padding: 1rem; border-radius: 16px;
  background: linear-gradient(150deg, #0f120f, #070807);
  border: 1px solid #232823;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.gs-tile:hover { border-color: rgba(142,207,40,0.6); transform: translateY(-2px); }
.gs-tile-icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(142,207,40,0.12); border: 1px solid rgba(142,207,40,0.35);
  color: var(--green);
}
.gs-tile-icon svg { width: 24px; height: 24px; }
.gs-tile-copy { min-width: 0; }
.gs-tile-name {
  display: block; font-family: 'Russo One', sans-serif; font-size: 1.05rem; color: #fff;
}
.gs-tile-desc {
  display: block; margin-top: 0.2rem;
  font-family: 'Inter', sans-serif; font-size: 0.76rem; line-height: 1.45; color: var(--muted);
}
.gs-tile-go { font-size: 1.5rem; color: var(--green); }

.gs-footer {
  text-align: center; padding: 2rem 1.2rem 2.6rem;
  border-top: 1px solid #1a1e1a; color: var(--muted);
}
.gs-footer-mark { width: 34px; height: 34px; object-fit: contain; margin: 0 auto 0.6rem; opacity: 0.85; }
.gs-footer p { margin: 0.2rem 0; font-family: 'Inter', sans-serif; font-size: 0.76rem; }
.gs-footer .gs-small { font-size: 0.66rem; opacity: 0.7; }

/* The games were written for panels that sit inside a page; here they are
   the page. */
.stats-panel { display: none; }
.stats-panel.active { display: block; }

/* ============================================================
   GOALSIDES — GAME RETHEME
   ============================================================
   The three games paint their own backgrounds with hardcoded
   colours rather than the theme variables: 501 has a red/green
   dartboard aurora, the Treble a navy/gold one. Those are
   overridden here so every screen sits in black, white and green,
   while the game markup and behaviour are untouched.
   ============================================================ */

/* --- shared game surfaces --- */
.game-card, .stats-panel .game-card {
  background: linear-gradient(160deg, #0f120f, #060706) !important;
  border-color: #232823 !important;
}

/* --- Football 501 --- */
.f501-aurora {
  background:
    radial-gradient(circle at 24% 30%, rgba(142,207,40,.20), transparent 34%),
    radial-gradient(circle at 76% 26%, rgba(142,207,40,.12), transparent 32%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,.06), transparent 36%) !important;
}
.f501-streaks {
  background: repeating-linear-gradient(115deg, transparent 0, transparent 48px,
    rgba(255,255,255,.05) 49px, rgba(142,207,40,.10) 51px, transparent 54px, transparent 105px) !important;
}
.f501-glow-a { background: radial-gradient(circle, rgba(142,207,40,.22), transparent 72%) !important; }
.f501-glow-b { background: radial-gradient(circle, rgba(255,255,255,.10), transparent 72%) !important; }
/* The gradient has to stay clipped to the glyphs, and the text itself
   transparent, or the heading renders as a solid bar. The original rule
   set those elsewhere; overriding only the background dropped them. */
#panel-f501 .wtt-hero-title .l2 {
  background: linear-gradient(100deg, #8ecf28 0%, #ffffff 55%, #8ecf28 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
#panel-f501 .wtt-hero-btn.primary { background: linear-gradient(100deg, #6fae1c, #8ecf28) !important; color: #0d0f0d !important; }
.f501-score.is-turn { border-color: var(--green) !important; background: rgba(142,207,40,0.16) !important; }
.f501-big.is-win { color: var(--green) !important; }
.f501-opt.is-on { background: rgba(142,207,40,0.2) !important; border-color: var(--green) !important; }

/* --- Win the Treble --- */
.wtt-aurora, .wtt-bg-aurora {
  background:
    radial-gradient(circle at 26% 30%, rgba(142,207,40,.18), transparent 34%),
    radial-gradient(circle at 74% 28%, rgba(255,255,255,.07), transparent 32%),
    radial-gradient(circle at 50% 78%, rgba(142,207,40,.10), transparent 36%) !important;
}
.wtt-streaks, .wtt-bg-streaks {
  background: repeating-linear-gradient(115deg, transparent 0, transparent 48px,
    rgba(255,255,255,.05) 49px, rgba(142,207,40,.10) 51px, transparent 54px, transparent 105px) !important;
}
.wtt-glow-a { background: radial-gradient(circle, rgba(142,207,40,.22), transparent 72%) !important; }
.wtt-glow-b { background: radial-gradient(circle, rgba(255,255,255,.10), transparent 72%) !important; }
.wtt-hero-btn.primary { background: linear-gradient(100deg, #6fae1c, #8ecf28) !important; color: #0d0f0d !important; }
.wtt-hero-title .l2 {
  background: linear-gradient(100deg, #8ecf28 0%, #ffffff 55%, #8ecf28 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.wtt-ready-btn, .gnt-start-btn {
  background: linear-gradient(100deg, #6fae1c, #8ecf28) !important; color: #0d0f0d !important;
}

/* --- Football Bingo --- */
.fb-card { background: linear-gradient(150deg, #16210b, #0b1105) !important; border-color: rgba(142,207,40,0.45) !important; }
.fb-card-num { background: var(--green) !important; color: #0d0f0d !important; }
.fb-wildrow { background: linear-gradient(150deg, #131c0a, #0a0f05) !important; border-color: rgba(142,207,40,0.35) !important; }
.fb-wild { background: var(--green) !important; color: #0d0f0d !important; }
.fb-sq { background: #12150f !important; border-color: #232823 !important; }
.fb-sq:hover { background: #1b2018 !important; }
.fb-sq.is-filled { background: #2c5c14 !important; border-color: var(--green) !important; }

/* Anything still asking for the old gold lands on the green. */
.f501-outs .n, .f501-table-row .w, .gnt-team-pot { color: var(--green) !important; }

/* ---- Bingo: the result grid ---- */
.fb-mini-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  width: fit-content; margin: 0 auto 0.9rem;
}
.fb-mini {
  width: 22px; height: 22px; border-radius: 4px;
  background: #12150f; border: 1px solid #232823;
}
.fb-mini.is-hit  { background: var(--green); border-color: var(--green); }
.fb-mini.is-wild { background: #d6f24a; border-color: #d6f24a; }
#fbShareBtn { margin-bottom: 0.5rem; }
#fbAgainBtn[hidden] { display: none; }

/* A seat whose player has gone quiet. Kept on the board - they can come
   back to it - but visibly not there. */
.f501-score.is-away { opacity: 0.5; border-style: dashed; }
.f501-score .away {
  font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #ffd76a; margin-left: 0.2rem;
}

/* ---- Bingo: landing, matching the other two games ---- */
#panel-fb .game-card { position: relative; overflow: hidden; isolation: isolate; }
.fb-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fb-stage { position: relative; z-index: 10; }
#panel-fb .wtt-hero-title .l2 {
  background: linear-gradient(100deg, #8ecf28 0%, #ffffff 55%, #8ecf28 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
#panel-fb .fb-daily { margin: 0.2rem 0 1rem; }