/* ===== 2026 UI REFRESH =====
   A look layered over css/styles.css, loaded straight after it. Nothing in
   styles.css was edited for this, so taking the refresh back out is one
   line: delete its <link> in index.html (and the Barlow Condensed font
   link beside it). Every rule here only restyles -- no layout or
   show/hide behaviour lives in this file -- so removing it can't break a
   page, only return it to the old paint.

   Direction, from fantasy-app references: a deeper, more saturated violet,
   a navy-indigo dark mode instead of near-black, a condensed display face
   for titles and big numbers, chunkier rounded cards, and a glow on
   whatever is "on" (active tab, primary button).

   Premium themes (data-skin, Locker > Theme) keep their own colours: the
   token overrides below are scoped to :not([data-skin]), and every
   component rule underneath reads tokens or mixes from --accent, so a
   skin repaints it the same way it repaints the rest of the app. */

:root {
  --font-display: "Barlow Condensed", "Inter", sans-serif;
  --radius: 20px;
  --radius-sm: 12px;
}

:root:not([data-skin]) {
  --bg: #f6f3fd;
  --card-hover: #f3eefe;
  --border: #e6dff7;
  --text: #1d1838;
  --text-dim: #6c6787;
  --text-faint: #a29cbc;
  --accent: #7c4dff;
  --accent-2: #d14dff;
  --accent-soft: rgba(124, 77, 255, 0.13);
  --shadow: 0 1px 2px rgba(40, 24, 90, 0.05), 0 10px 30px rgba(60, 36, 130, 0.09);
}

:root[data-theme="dark"]:not([data-skin]) {
  --bg: #0d0f22;
  --bg-elevated: #161a35;
  --card: #161a35;
  --card-hover: #1f2446;
  --border: #272c52;
  --text: #eef0ff;
  --text-dim: #a2a6cc;
  --text-faint: #6d72a0;
  --accent: #9b7bff;
  --accent-2: #e070ff;
  --accent-soft: rgba(155, 123, 255, 0.20);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.42);
}

/* ---- Page backdrop ---- */
:root:not([data-skin]) body {
  background-image:
    radial-gradient(900px 420px at 10% -12%, rgba(124, 77, 255, 0.16), transparent 62%),
    radial-gradient(700px 360px at 100% -6%, rgba(209, 77, 255, 0.12), transparent 60%);
  background-attachment: fixed;
}
:root[data-theme="dark"]:not([data-skin]) body {
  background-image:
    radial-gradient(900px 440px at 8% -12%, rgba(124, 77, 255, 0.30), transparent 62%),
    radial-gradient(700px 380px at 100% -4%, rgba(209, 77, 255, 0.16), transparent 60%),
    radial-gradient(800px 500px at 50% 120%, rgba(58, 84, 220, 0.16), transparent 70%);
}

/* ---- Topbar ---- */
:root:not([data-skin]) .topbar { background: rgba(246, 243, 253, 0.78); }
:root[data-theme="dark"]:not([data-skin]) .topbar { background: rgba(13, 15, 34, 0.80); }
.topbar { border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent); }
.brand-mark { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent-soft); }
.brand-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ---- Pill navs: top tabs, sub-tabs, league section nav ---- */
.tabs, .subtabs, .section-nav {
  background: color-mix(in srgb, var(--card) 88%, transparent);
  box-shadow: var(--shadow);
}
.tab, .subtab, .section-nav-btn { font-weight: 700; }
.tab.active, .subtab.active, .section-nav-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---- Headings ---- */
.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5.4vw, 46px);
  line-height: 1.02;
  letter-spacing: 0;
  text-transform: uppercase;
}
.subview-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.account-section h3,
.scoring-info-title {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ---- Cards ---- */
.account-section,
.scoring-info,
.leader-card,
.modal,
.setup-door {
  border-radius: var(--radius);
}
.account-section { box-shadow: var(--shadow); }

/* On a page the section is now a bubble, so its text needs room from the
   edge. styles.css zeroes the top padding in a few places (.u-flush-top,
   the first Admin section) for the old flat look; put it back inside the
   bubble. */
.view .account-section { padding: 18px 20px; }
.view .account-section.u-flush-top { padding-top: 18px !important; }
#adminPanelBody > .subview > .account-section:first-child { padding-top: 18px; }

/* Inside a pop-up, or nested in another section, it stays the old flat
   divided block -- a bubble in a bubble reads as clutter. */
.modal .account-section,
.view .modal .account-section,
.view .account-section .account-section {
  box-shadow: none;
  border-radius: 0;
  padding: 18px 0 0;
}

/* Top Scorer / Top Assister: a little hero card each. */
.leader-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(260px 140px at 100% 0%, var(--accent-soft), transparent 70%),
    var(--card);
}
.leader-label {
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.leader-stat {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--text);
}

/* ---- Buttons ---- */
.btn-primary {
  font-weight: 800;
  letter-spacing: 0.005em;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 38%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 48%, transparent);
}
.btn-primary:disabled { box-shadow: none; }
.btn-secondary {
  font-weight: 700;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn-secondary:hover { background: var(--card-hover); }

/* ---- Inputs ---- */
.search-box,
.league-view-select,
.form-field input,
.form-field select {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* ---- Tables ---- */
.table-wrap { border-radius: var(--radius); }
.pl-table th {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  color: var(--text-faint);
  background: color-mix(in srgb, var(--accent) 4%, var(--card));
}
.pl-table td { border-bottom-color: color-mix(in srgb, var(--border) 65%, transparent); }
.pl-table td.pos {
  font-family: var(--font-display);
  font-size: 17px;
  padding-left: 14px;
}
.pl-table th.pos { padding-left: 14px; }
.pl-table td.pts {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text);
}
.pl-table tr:hover td { background: var(--card-hover); }

/* Zone stripes: thicker, and the row picks up a whisper of its colour. */
.pl-table tr.ucl { box-shadow: inset 4px 0 0 var(--accent); }
.pl-table tr.europa { box-shadow: inset 4px 0 0 var(--accent-2); }
.pl-table tr.conf { box-shadow: inset 4px 0 0 var(--lime); }
.pl-table tr.rel { box-shadow: inset 4px 0 0 var(--red); }
.pl-table tr.ucl td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.pl-table tr.rel td { background: color-mix(in srgb, var(--red) 4%, transparent); }
.swatch { border-radius: 50%; }

/* ---- Game cards (league doors) ---- */
.setup-door.game-card {
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.setup-door.game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 22%, transparent);
}
.game-card-art::after {
  /* A soft sheen across the top of every card's art. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), transparent 45%);
  pointer-events: none;
}
.game-card .setup-door-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* ---- Modals ---- */
:root:not([data-skin]) .modal-overlay {
  background: rgba(20, 14, 48, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
:root[data-theme="dark"]:not([data-skin]) .modal-overlay { background: rgba(4, 5, 16, 0.7); }
.modal { box-shadow: 0 24px 60px rgba(20, 12, 60, 0.28); }

/* ---- Logged-out hero ---- */
.hero-wordmark,
.hero-line {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.hero-line {
  font-size: clamp(36px, 7vw, 68px);
  line-height: 0.98;
}
.hero-cta {
  font-size: 16px;
  padding: 15px 34px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ---- Dark-mode literal surfaces patched in styles.css ---- */
:root[data-theme="dark"]:not([data-skin]) .global-chat-header { background: #1c2042; }

@media (max-width: 680px) {
  /* Condensed caps are narrower than the old Inter title, so the phone
     topbar's truncation cap can afford the full name. */
  .brand-title { font-size: 17px; max-width: 130px; }

  /* On a phone the sub-tabs are a grid of separate buttons (styles.css),
     not one pill -- the pill background above would paint a box behind
     them, so take it back off. */
  .subtabs { background: none; box-shadow: none; }
}