/* Direction: Play Plus — sporty arcade: electric blue + purple, orange / lime highlights, rounded and loud */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f3f5ff;
  --surface: #ffffff;
  --surface-2: #e7eaff;
  --border: #d3d9f8;
  --border-strong: #adaebd;
  --ink: #15123b;
  --muted: #53537a;
  --accent: #3a3df0;
  --accent-hover: #3134cc;
  --accent-ink: #ffffff;
  --accent-text: #2d2fc4;
  --accent-strong: #3a3df0;
  --accent-soft: #e2e4ff;
  --accent-border: #a0a2f8;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #d8e7e8;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #ebe2e1;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #ecdbe4;
  --danger-strong: #b91c1c;
  --chart-1: #3a3df0;
  --chart-2: #ca15bf;
  --chart-3: #8f1806;
  --chart-4: #8e730f;
  --chart-5: #015d2b;
  --chart-6: #1a8899;

  --font-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -0.01em;
  --radius-card: 22px;
  --radius-btn: 999px;
  --radius-input: 14px;
  --shadow-card: 0 10px 28px -14px rgba(58, 61, 240, 0.4);
  --x-orange: #ff8a2b;
  --x-lime: #a3e635;
  --x-purple: #7c3aed;
  --x-sky: #8ec5ff;
  --x-pink: #ff6fa8;
  --x-gold: #ffd23f;
  --x-silver: #d5d9e6;
  --x-bronze: #e8a672;
  --x-on-bright: #15123b;
  --x-on-photo: #ffffff;
  --gradient-hero: linear-gradient(135deg, #3a3df0 0%, #7c3aed 100%);
  --gradient-orange: linear-gradient(135deg, #ff8a2b 0%, #ffc233 100%);
  --gradient-lime: linear-gradient(135deg, #a3e635 0%, #5eead4 100%);
  --gradient-sky: linear-gradient(135deg, #38bdf8 0%, #a5d4ff 100%);
  --gradient-pink: linear-gradient(135deg, #ff6fa8 0%, #ff9d5c 100%);
  --gradient-night: linear-gradient(160deg, #2a2ad6 0%, #5b21b6 100%);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Nunito", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #040512;
  --surface: #1d1e2a;
  --surface-2: #11121e;
  --border: #272833;
  --border-strong: #4f5059;
  --ink: #f3f5ff;
  --muted: #9395a0;
  --accent: #3a3df0;
  --accent-hover: #585af2;
  --accent-ink: #ffffff;
  --accent-text: #7c7ff5;
  --accent-strong: #7174f4;
  --accent-soft: #101143;
  --accent-border: #1c1e76;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #08201b;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2b1610;
  --warning-strong: #c06e2f;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2c0a14;
  --danger-strong: #cd5c5c;
  --chart-1: #495afa;
  --chart-2: #da44cd;
  --chart-3: #e53217;
  --chart-4: #a3851a;
  --chart-5: #11994e;
  --chart-6: #259baf;
}

/* Play Plus — the pieces no primitive covers */
.side { background: var(--gradient-night); color: var(--x-on-photo); }
.topbar { background: var(--gradient-night); color: var(--x-on-photo); }
.nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; border-radius: 999px; font-weight: 700; color: var(--x-on-photo); transition: background 0.15s, transform 0.15s; }
.nav-link:hover { background: color-mix(in srgb, var(--x-on-photo) 18%, transparent); }
.nav-link:active { transform: scale(0.98); }
.nav-link:focus-visible { outline: 3px solid var(--x-lime); outline-offset: 2px; }
.nav-link.is-active { background: var(--x-orange); color: var(--x-on-bright); }
.nav-count { margin-left: auto; min-width: 1.5rem; padding: 0 0.5rem; text-align: center; border-radius: 999px; background: var(--x-lime); color: var(--x-on-bright); font-size: 0.8rem; font-weight: 800; }

.g-hero { background: var(--gradient-hero); color: var(--x-on-photo); }
.g-orange { background: var(--gradient-orange); color: var(--x-on-bright); }
.g-lime { background: var(--gradient-lime); color: var(--x-on-bright); }
.g-sky { background: var(--gradient-sky); color: var(--x-on-bright); }
.g-pink { background: var(--gradient-pink); color: var(--x-on-bright); }
.g-night { background: var(--gradient-night); color: var(--x-on-photo); }

.btn-hot { background: var(--x-orange); color: var(--x-on-bright); font-weight: 800; border-color: transparent; }
.btn-hot:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-hot:active { transform: translateY(0) scale(0.98); }
.btn-lime { background: var(--x-lime); color: var(--x-on-bright); font-weight: 800; border-color: transparent; }
.btn-lime:hover { filter: brightness(1.05); }
.btn-danger-soft { color: var(--danger-strong); }

.stat { border-radius: var(--radius-card); padding: 1.25rem 1.4rem; box-shadow: var(--shadow-card); animation: rise 0.5s ease both; transition: transform 0.2s; }
.stat:hover { transform: translateY(-3px) rotate(-0.4deg); }
.stat:nth-child(2) { animation-delay: 0.05s; } .stat:nth-child(3) { animation-delay: 0.1s; }
.stat:nth-child(4) { animation-delay: 0.15s; } .stat:nth-child(5) { animation-delay: 0.2s; } .stat:nth-child(6) { animation-delay: 0.25s; }
@keyframes rise { from { transform: translateY(14px); } to { transform: translateY(0); } }
html.reduced-motion .stat { animation: none; }
html.reduced-motion .stat:hover { transform: none; }

.st { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.75rem; border-radius: 999px; font-size: 0.8rem; font-weight: 800; color: var(--x-on-bright); white-space: nowrap; }
.st-upcoming, .st-Upcoming { background: var(--x-sky); }
.st-live, .st-Ongoing { background: var(--x-orange); }
.st-completed, .st-Completed { background: var(--x-lime); }
.st-live::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--x-on-bright); animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
html.reduced-motion .st-live::before { animation: none; }
.demo-tag { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: var(--accent-soft); color: var(--accent-strong); }

.emoji-bubble { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; font-size: 1.8rem; flex: none; }

.table-wrap { overflow-x: auto; }
.standings { width: 100%; border-collapse: separate; border-spacing: 0 0.5rem; min-width: 560px; }
.standings th { text-align: center; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0.25rem 0.6rem; }
.standings th:nth-child(2), .standings td:nth-child(2) { text-align: left; }
.standings td { text-align: center; padding: 0.75rem 0.6rem; background: var(--surface-2); font-weight: 700; }
.standings td:first-child { border-radius: 16px 0 0 16px; }
.standings td:last-child { border-radius: 0 16px 16px 0; }
.standings tr.rank-1 td { background: var(--x-gold); color: var(--x-on-bright); }
.standings tr.rank-2 td { background: var(--x-silver); color: var(--x-on-bright); }
.standings tr.rank-3 td { background: var(--x-bronze); color: var(--x-on-bright); }
.standings td.pts { font-family: var(--font-display); font-size: 1.2rem; }

.bar-track { height: 0.9rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; display: flex; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--gradient-hero); min-width: 0.4rem; transition: width 0.6s ease; }
.seg-w { background: var(--x-lime); } .seg-d { background: var(--x-sky); } .seg-l { background: var(--x-orange); }
.seg { height: 100%; }
.dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-right: 0.3rem; }

.bracket { display: flex; gap: 2rem; overflow-x: auto; padding-bottom: 0.5rem; }
.bracket-col { display: flex; flex-direction: column; justify-content: space-around; gap: 1rem; min-width: 230px; flex: 1; }
.bracket-match { border: 2px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow-card); }
.bracket-team { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.6rem 0.9rem; font-weight: 700; }
.bracket-team + .bracket-team { border-top: 1px solid var(--border); }
.bracket-team.win { background: var(--x-lime); color: var(--x-on-bright); }
.bracket-team.tbd { color: var(--muted); font-style: italic; font-weight: 600; }

.notice { border-left: 6px solid var(--border); }
.notice.unread { border-left-color: var(--x-orange); background: var(--accent-soft); }

.modal form { display: grid; gap: 0.9rem; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 5rem; }
.pw-toggle { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); }

.login-bg { background: var(--gradient-night); color: var(--x-on-photo); }
.confetti { position: absolute; font-size: 2.2rem; animation: floaty 5s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-14px) rotate(8deg); } }
html.reduced-motion .confetti { animation: none; }