/* W help: the everyday arena. Holiday presets supply only the accent palette.
   The numerous cards use painted translucency; backdrop blur is limited to
   navigation and the single open dialog. Decorative layers never receive input. */
:root {
  --glass-rgb: 100, 157, 255;
  --glass-accent: #93bcff;
  --glass-card: linear-gradient(145deg, #ffffff08, #ffffff01 54%), #111b2bf0;
  --glass-edge: #d8e9ff1b;
  --glass-edge-bright: #cfe7ff39;
  --glass-shadow: 0 12px 38px #02071625, inset 0 1px 0 #ffffff06;
  --glass-navigation: #101828db;
  --glass-header: #0c1424d6;
  --glass-input: #0a1221e8;
}

:root:not([data-holiday]),
:root[data-holiday="standard"] {
  --bg: #090f1c;
  --surface: #111b2b;
  --surface2: #18243a;
  --border: #d8e9ff1b;
  --muted: #9baac1;
  --text: #eef4ff;
  --blue: #3063d7;
  --lightblue: #96c1ff;
}

:root[data-holiday]:not([data-holiday="standard"]) {
  --glass-rgb: var(--fest-rgb);
  --glass-accent: var(--fest-accent);
  --glass-card: linear-gradient(145deg, rgba(var(--fest-rgb), .065), #ffffff01 58%), var(--surface);
  --glass-edge: var(--border);
  --glass-edge-bright: color-mix(in srgb, var(--fest-accent) 34%, var(--border));
  --glass-navigation: color-mix(in srgb, var(--surface) 89%, transparent);
  --glass-header: color-mix(in srgb, var(--bg) 86%, transparent);
  --glass-input: color-mix(in srgb, var(--surface) 94%, #050b16);
}

:root[data-theme="light"] {
  --glass-card: linear-gradient(145deg, #ffffff, #ffffffb8 72%), #f6f9ff;
  --glass-edge: #43639323;
  --glass-edge-bright: #477bc44d;
  --glass-shadow: 0 12px 34px #29477709, inset 0 1px 0 #ffffff;
  --glass-navigation: #ffffffd9;
  --glass-header: #f6f9ffdb;
  --glass-input: #ffffffec;
  --glass-accent: #315fcb;
}

:root[data-theme="light"]:not([data-holiday]),
:root[data-theme="light"][data-holiday="standard"] {
  --bg: #f0f5fd;
  --surface: #ffffff;
  --surface2: #eaf1fc;
  --border: #43639323;
  --muted: #536783;
  --text: #182b48;
  --blue: #2e65df;
  --lightblue: #2d5fbd;
}

:root[data-theme="light"][data-holiday]:not([data-holiday="standard"]) {
  --glass-card: linear-gradient(145deg, #ffffff, #ffffffc4 72%), var(--surface2);
  --glass-navigation: color-mix(in srgb, var(--surface) 91%, transparent);
  --glass-header: color-mix(in srgb, var(--bg) 88%, transparent);
  --glass-accent: var(--fest-accent-strong);
}

/* Keep the ambient layer below content without trapping fixed navigation in
   a new stacking context: holiday particles remain between content and nav. */
#app { position: relative; }
main, .site-footer, .legal-footer, .legal-page > footer { position: relative; z-index: 1; }
:root body {
  background-color: var(--bg);
  background-image: radial-gradient(ellipse at 88% 2%, rgba(var(--glass-rgb), .065), transparent 48%);
}
:root[data-theme] :is(h1, h2, h3) { letter-spacing: -.035em; }
:root[data-theme] .brand { gap: 10px; }
:root[data-theme] .brand > span {
  font-size: 27px;
  font-weight: 760;
  letter-spacing: -1.1px;
  white-space: nowrap;
}
:root[data-theme] .brand img { border-radius: 12px; }
:root[data-theme] .brand-dot { color: var(--glass-accent); }
:root[data-theme] .workspace-label { line-height: 1.55; }
:root[data-theme] :is(.workspace-label small, .nav-label, .sidebar-version, .sidebar-version span) { color: var(--muted); }

:root[data-theme][data-holiday] .sidebar {
  background: var(--glass-navigation);
  border-right-color: var(--glass-edge);
  box-shadow: 12px 0 42px #02081708;
}
:root[data-theme][data-holiday] .topbar {
  background: var(--glass-header);
  border-bottom-color: var(--glass-edge);
  box-shadow: 0 1px 0 #ffffff03, 0 8px 28px #02081705;
}
:root[data-theme] .legal-header {
  position: relative;
  z-index: 30;
  background: var(--glass-header);
  border-bottom: 1px solid var(--glass-edge);
  border-radius: 0 0 20px 20px;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-effects="on"] :is(.sidebar, .topbar, .legal-header) {
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
  }
  :root[data-effects="on"] .modal {
    -webkit-backdrop-filter: blur(20px) saturate(118%);
    backdrop-filter: blur(20px) saturate(118%);
  }
}

:root[data-theme][data-holiday] :is(.panel, .tournament-card, .filter-bar, .team-invite-banner, .holiday-card) {
  background: var(--glass-card);
  border-color: var(--glass-edge);
  border-radius: 18px;
  box-shadow: var(--glass-shadow);
}
:root[data-theme][data-holiday] .tournament-card { overflow: hidden; }
:root[data-theme][data-holiday] :is(.alpha-card, .join-banner, .appearance-current) {
  border-radius: 18px;
  border-color: var(--glass-edge-bright);
  background: linear-gradient(128deg, rgba(var(--glass-rgb), .13), transparent 74%), var(--glass-card);
  box-shadow: var(--glass-shadow);
}
:root[data-theme] .alpha-card { padding: 18px 15px; }
:root[data-theme] .join-banner { overflow: hidden; }
:root[data-theme] .section-head h2 { font-size: clamp(21px, 1.7vw, 27px); }
:root[data-theme] .section-head p { line-height: 1.7; }
:root[data-theme] .card-content { padding: 23px; }
:root[data-theme] .card-content h3 { line-height: 1.32; letter-spacing: -.025em; }
:root[data-theme] .tournament-art { border-bottom: 1px solid #ffffff0b; }
:root[data-theme] .card-bottom { border-top-color: var(--glass-edge); }
:root[data-theme] .capacity { border-radius: 20px; overflow: hidden; }
:root[data-theme] .capacity > i { border-radius: inherit; }

:root[data-theme][data-holiday] .nav-link {
  border-radius: 11px;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
:root[data-theme][data-holiday] .nav-link.active {
  color: var(--lightblue);
  background: linear-gradient(105deg, rgba(var(--glass-rgb), .18), rgba(var(--glass-rgb), .055));
  box-shadow: inset 0 0 0 1px rgba(var(--glass-rgb), .15), inset 2px 0 var(--lightblue);
}
:root[data-theme][data-holiday] .nav-link:hover { background-color: rgba(var(--glass-rgb), .075); }
:root[data-theme] :is(.admin-tabs, .detail-tabs) { gap: 5px; }
:root[data-theme] :is(.admin-tabs a, .detail-tabs > a) { border-radius: 10px 10px 0 0; }
:root[data-theme] .admin-tabs a { padding-inline: 14px; }
:root[data-theme] .filter-bar { padding: 15px; }
:root[data-theme] .segmented { border-radius: 12px; }
:root[data-theme] .segmented > button { border-radius: 9px; }

:root[data-theme][data-holiday] :is(.button, .text-button, .icon-button, .language-toggle, .user-chip) {
  border-radius: 11px;
}
:root[data-theme][data-holiday] .button {
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
:root[data-theme][data-holiday] .primary {
  background: linear-gradient(145deg, color-mix(in srgb, var(--blue) 90%, #83c4ff), var(--blue) 70%);
  border-color: color-mix(in srgb, var(--blue) 63%, white);
  color: #fff;
  box-shadow: inset 0 1px 0 #ffffff29, 0 7px 20px rgba(var(--glass-rgb), .16);
}
:root[data-theme][data-holiday] .ghost {
  border-color: var(--glass-edge-bright);
  background: linear-gradient(150deg, #ffffff08, #ffffff02);
  color: var(--text);
  box-shadow: inset 0 1px 0 #ffffff05;
}
:root[data-theme="light"][data-holiday] .ghost { background: #ffffffba; }
:root[data-theme] :is(.theme-toggle, .holiday-effects-toggle, .language-toggle) {
  border-color: var(--glass-edge);
  background: linear-gradient(145deg, #ffffff08, #ffffff01);
  box-shadow: inset 0 1px 0 #ffffff07;
}
:root[data-theme] .user-chip { padding: 5px 9px 5px 5px; }
:root[data-theme] .user-avatar { border-radius: 10px; }
:root[data-theme] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  background: var(--glass-input);
  border-color: #617493;
  border-radius: 10px;
  color: var(--text);
  box-shadow: inset 0 1px 3px #0208170b;
}
:root[data-theme="light"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border-color: #8292ab; }
:root[data-theme] :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
:root[data-theme] :is(input, select, textarea):focus {
  border-color: var(--lightblue);
  outline: 3px solid rgba(var(--glass-rgb), .15);
}
:root[data-theme] .modal {
  background: var(--glass-navigation);
  border-color: var(--glass-edge-bright);
  border-radius: 23px;
  box-shadow: 0 28px 90px #02081755, inset 0 1px 0 #ffffff0d;
}
:root[data-theme] .toast {
  border-radius: 14px;
  background: var(--surface2);
  border-color: var(--glass-edge-bright);
  color: var(--text);
}
:root[data-theme] :is(.bracket-match, .map-choice, .map-draw, .captain-picks > div) { border-radius: 12px; }
:root[data-theme] .bracket-match { background: var(--surface2); border-color: var(--glass-edge-bright); }
:root[data-theme] :is(th, td) { border-color: var(--glass-edge); }
:root[data-theme] th { background: color-mix(in srgb, var(--surface2) 80%, transparent); }
:root[data-theme] .site-footer { border-top-color: var(--glass-edge); }
:root[data-theme] .site-footer b { letter-spacing: -.045em; }

/* The everyday cover: a lens-like frame and crisp, readable typography. */
:root[data-theme][data-holiday="standard"] .hero,
:root[data-theme]:not([data-holiday]) .hero {
  min-height: 410px;
  border-radius: 25px;
  border-color: #b5d7ff30;
  background: radial-gradient(ellipse at 83% 24%, #6f88ff24, transparent 45%),
    radial-gradient(ellipse at 93% 94%, #36d6e715, transparent 52%),
    linear-gradient(120deg, #14213b 0%, #152947 60%, #1d3155);
  box-shadow: inset 0 1px 0 #ffffff0f, 0 25px 60px #02081722;
}
:root[data-theme] .hero-copy { padding: 39px 39px 30px; }
:root[data-theme] .hero h1 {
  font-size: clamp(39px, 4.25vw, 69px);
  letter-spacing: -.055em;
  line-height: 1.045;
  font-weight: 760;
}
:root[data-theme] .hero h1 em { font-style: normal; }
:root[data-theme] .hero .eyebrow { font-size: 9px; letter-spacing: 1.7px; }
:root[data-theme][data-holiday="standard"] .hero h1 em,
:root[data-theme]:not([data-holiday]) .hero h1 em { color: #a9ceff; }
:root[data-theme] .hero-copy > p { font-size: 13px; line-height: 1.85; }
:root[data-theme] .hero-actions { gap: 12px; margin-top: 26px; }
:root[data-theme] .hero-foot { margin-top: 30px; }
:root[data-theme] .hero-foot > span:nth-child(2) { font-size: 12px; }
:root[data-theme] .hero-foot small { font-size: 10px; line-height: 1.6; }
:root[data-theme] .hero-coordinate { letter-spacing: 1.4px; }
:root[data-theme][data-holiday="standard"] .hero-grid {
  background-image: linear-gradient(#b6d9ff12 1px, transparent 1px), linear-gradient(90deg, #b6d9ff12 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(600px) rotateX(8deg) rotate(-10deg) scale(1.2);
  opacity: .42;
  mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
}
:root[data-theme][data-holiday="standard"] .hero::before {
  content: '';
  position: absolute;
  width: 43%;
  aspect-ratio: 1;
  right: 3%;
  top: 5%;
  z-index: 0;
  border: 1px solid #cae9ff39;
  border-radius: 43% 57% 62% 38% / 38% 42% 58% 62%;
  background: linear-gradient(135deg, #e0f7ff1b 3%, #b5c7ff08 29%, #619aff02 55%, #9cceff10 85%);
  box-shadow: inset 2px 2px 4px #e4f4ff0b, inset -15px -18px 45px #6282fa10, 0 20px 50px #07112322;
  transform: rotate(-18deg);
  pointer-events: none;
}
:root[data-theme][data-holiday="standard"] .hero::after {
  inset: 0;
  height: auto;
  z-index: 0;
  background: linear-gradient(130deg, #ffffff06, transparent 43%, #bcecff04 72%, transparent);
}
:root[data-theme][data-holiday="standard"] .hero-art {
  right: -21px;
  top: -28px;
  width: 59%;
  height: 470px;
  filter: drop-shadow(0 22px 26px #0614312b);
}
.hero-flat-art { display: none; pointer-events: none; }
:root[data-theme="light"][data-holiday="standard"] .hero {
  color: #182d50;
  border-color: #5a89ce35;
  background: radial-gradient(ellipse at 88% 24%, #c0d0ff8c, transparent 52%),
    radial-gradient(ellipse at 72% 98%, #b7e8ed88, transparent 60%),
    linear-gradient(115deg, #f8fbff 0%, #edf4ff 62%, #e3ecfc);
  box-shadow: inset 0 1px 0 #fff, 0 20px 50px #38547c10;
}
:root[data-theme="light"][data-holiday="standard"] .hero h1 em { color: #315fc5; }
:root[data-theme="light"][data-holiday="standard"] .hero :is(.eyebrow, .hero-season b) { color: #3c5e91; }
:root[data-theme="light"][data-holiday="standard"] .hero :is(.hero-copy > p, .hero-foot) { color: #4b6387; }
:root[data-theme="light"][data-holiday="standard"] .hero-foot :is(small, .hero-season) { color: #627795; }
:root[data-theme="light"][data-holiday="standard"] .hero-season { border-color: #6e8eb537; }
:root[data-theme="light"][data-holiday="standard"] .hero-coordinate,
:root[data-theme="light"][data-holiday="standard"] .hero-coordinate b { color: #5c76a4; }
:root[data-theme="light"][data-holiday="standard"] .hero .ghost { background: #ffffffac; color: #2a4d86; border-color: #7996bd65; }
:root[data-theme="light"][data-holiday="standard"] .hero::before { border-color: #fff9; background: linear-gradient(135deg, #fff9, #ffffff0a 55%, #ffffff59); }
:root[data-theme="light"][data-holiday="standard"] .hero-grid { opacity: .7; background-image: linear-gradient(#6b8ac718 1px, transparent 1px), linear-gradient(90deg, #6b8ac718 1px, transparent 1px); }

/* One quiet motion rhythm; animation is opt-in through the shared effects flag. */
@keyframes whelp-cover-float {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -9px, 0); }
}
@keyframes whelp-lens-float {
  from { transform: translate3d(0, 0, 0) rotate(-18deg); }
  to { transform: translate3d(0, -7px, 0) rotate(-15deg); }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-effects="on"] .hero-art { animation: whelp-cover-float 8s ease-in-out infinite alternate; }
  :root[data-effects="on"][data-holiday="standard"] .hero::before { animation: whelp-lens-float 11s ease-in-out infinite alternate; }
}
:root[data-effects-paused="true"] .hero-art,
:root[data-effects-paused="true"] .hero::before { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  :root[data-effects="on"][data-theme] .tournament-card:hover,
  :root[data-effects="on"][data-theme] .team-card:hover {
    transform: translateY(-4px);
    border-color: var(--glass-edge-bright);
    box-shadow: 0 18px 40px #0208171b, inset 0 1px 0 #ffffff0c;
  }
  :root[data-effects="on"][data-theme] .button:hover { transform: translateY(-2px); }
  :root[data-effects="on"][data-theme] .primary:hover { box-shadow: inset 0 1px 0 #ffffff3b, 0 10px 26px rgba(var(--glass-rgb), .24); }
}

@media (max-width: 1180px) {
  :root[data-theme] .brand > span { font-size: 25px; }
  :root[data-theme] .hero-copy { padding: 33px 29px 27px; }
  :root[data-theme] .hero-copy > p { font-size: 12px; }
  :root[data-theme] .card-content { padding: 20px; }
  :root[data-theme] .hero h1 { font-size: clamp(37px, 4.2vw, 55px); }
}
@media (max-width: 960px) {
  :root[data-theme] .brand { gap: 7px; }
  :root[data-theme] .brand > span { font-size: 24px; }
  :root[data-theme] .hero h1 { font-size: 39px; }
  :root[data-theme][data-holiday="standard"] .hero-art { width: 67%; right: -65px; top: 17px; height: 390px; opacity: .78; }
  :root[data-theme] .hero-copy > p { font-size: 11px; }
  :root[data-theme] .card-content { padding: 19px; }
}
@media (max-width: 720px) {
  :root[data-theme] .brand > span { font-size: 27px; }
  :root[data-theme][data-holiday] .sidebar { background: var(--surface); }
  :root[data-theme][data-holiday] :is(.panel, .tournament-card, .filter-bar, .team-invite-banner, .holiday-card, .join-banner) { border-radius: 15px; }
  :root[data-theme][data-holiday="standard"] .hero { min-height: 420px; border-radius: 21px; }
  :root[data-theme] .hero-copy { padding: 28px 25px; width: 100%; }
  :root[data-theme] .hero h1 { font-size: clamp(37px, 9.6vw, 49px); letter-spacing: -.05em; margin-top: 23px; }
  :root[data-theme] .hero .eyebrow { font-size: 7.5px; letter-spacing: 1.2px; }
  :root[data-theme] .hero-copy > p { font-size: 11px; max-width: 310px; }
  :root[data-theme] .hero-actions { margin-top: 25px; gap: 8px; }
  :root[data-theme] .hero-actions .button { min-height: 42px; padding: 12px 13px; font-size: 10px; }
  :root[data-theme] .hero-foot { margin-top: 28px; }
  :root[data-theme][data-holiday="standard"] .hero-art { width: 93%; height: 355px; right: -91px; top: 77px; opacity: .34; }
  :root[data-theme][data-holiday="standard"] .hero::before { width: 70%; top: 25%; right: -16%; opacity: .7; }
  :root[data-theme] .card-content { padding: 22px; }
  :root[data-theme] .modal { border-radius: 19px; }
  :root[data-theme] :is(.admin-tabs a, .detail-tabs > a) { padding-inline: 11px; }
  :root[data-theme] .section-head h2 { font-size: 22px; }
  :root[data-effects="on"] .sidebar,
  :root[data-effects="on"] .modal { -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root[data-effects="on"] .topbar { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
@media (max-width: 380px) {
  :root[data-theme] .hero-copy { padding-inline: 21px; }
  :root[data-theme] .hero h1 { font-size: 36px; }
  :root[data-theme] .top-actions { gap: 4px; }
  :root[data-theme] .user-chip { padding-right: 3px; }
}

/* Disable decoration and glass, not functional transforms such as the drawer. */
.legal-skip { z-index: 50; }
:root[data-effects="off"] *,
:root[data-effects="off"] *::before,
:root[data-effects="off"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
:root[data-effects="off"] :is(.sidebar, .topbar, .legal-header, .modal, .holiday-preview > .holiday-status),
:root[data-effects="off"] .modal::backdrop {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none;
}
:root[data-effects="off"][data-theme] :is(.panel, .tournament-card, .filter-bar, .team-invite-banner, .holiday-card, .modal, .sidebar, .alpha-card, .join-banner, .appearance-current) {
  background: var(--surface);
  box-shadow: none;
}
:root[data-effects="off"][data-theme] :is(.topbar, .legal-header) { background: var(--bg); }
:root[data-effects="off"][data-theme] :is(.button, .tournament-card, .team-card):hover { transform: none; }
:root[data-effects="off"][data-theme] .primary { background: var(--blue); box-shadow: none; }
:root[data-effects="off"] .hero::before,
:root[data-effects="off"] .hero::after,
:root[data-effects="off"] .hero-grid { display: none; }
:root[data-effects="off"] .hero-art { filter: none; transform: none; }
:root[data-effects="off"][data-holiday="standard"] .hero-art { display: none; }
:root[data-effects="off"][data-holiday="standard"] .hero-flat-art {
  display: block;
  position: absolute;
  z-index: 1;
  width: 28%;
  max-width: 220px;
  height: auto;
  right: 8%;
  top: 21%;
  opacity: .18;
  border-radius: 28%;
}
@media (max-width: 720px) {
  :root[data-effects="off"][data-holiday="standard"] .hero-flat-art {
    width: 56%;
    right: -12%;
    top: 38%;
    opacity: .085;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root *, :root *::before, :root *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  :root :is(.sidebar, .topbar, .legal-header, .modal, .holiday-preview > .holiday-status),
  :root .modal::backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  :root .hero::before { display: none; }
  :root .hero-art { transform: none; }
  :root :is(.button, .tournament-card, .team-card):hover { transform: none; }
}
@media (forced-colors: active) {
  :root .hero::before, :root .hero::after, :root .hero-grid { display: none; }
  :root :is(.panel, .button, .nav-link, .hero, .modal) { box-shadow: none; border-color: CanvasText; }
}