/* ============================================================
   ROCKET LEAGUE NATIVE-MENU THEME — v2
   Reference: ui-ux-test-2.html (in-game Settings screen mockup).
   Skewed uppercase "cartridge" tabs/buttons, glowing cyan accents,
   dark blue gradient panels, Trebuchet MS. Applied as an override
   layer on top of the real app.css classes home.js renders.
   ============================================================ */

:root {
  --rl-bg-top:#294b80;
  --rl-bg-mid:#122749;
  --rl-bg-bottom:#030712;

  --rl-panel:#0b1830;
  --rl-panel-hi:#142b4e;

  --rl-cyan:#45bdf5;
  --rl-cyan-2:#8eeaff;
  --rl-cyan-3:#dffaff;
  --rl-line:rgba(63,190,236,.42);
  --rl-line-soft:rgba(63,190,236,.20);

  --rl-text:#eef7ff;
  --rl-muted:#aebed0;

  --rl-gold:#ffd432;
}

/* #home already renders as an opaque, full-viewport overlay above the live
   board editor (app.css: position:fixed;inset:0;z-index:45) -- give it this
   theme's own OPAQUE background directly instead of relying on html/body,
   so it keeps fully masking the editor underneath. */
body.home-open #home {
  background:
    radial-gradient(1200px 420px at 50% -140px, rgba(78,146,220,.30), transparent 60%),
    linear-gradient(180deg,var(--rl-bg-top) 0%,var(--rl-bg-mid) 38%,var(--rl-bg-bottom) 100%) !important;
  color:var(--rl-text) !important;
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif !important;
}

body.home-open #home::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(70,198,238,.07), transparent 1px) 0 0/80px 80px,
    linear-gradient(rgba(70,198,238,.045), transparent 1px) 0 0/80px 80px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.28),transparent 62%);
}

/* ---------- top nav — the tab bar (ui-ux-test-2.html .tabs/.tab) ---------- */
#home .hm-top {
  min-height:82px !important;
  padding:10px 22px !important;
  background:linear-gradient(180deg,rgba(14,35,66,.97),rgba(5,14,29,.98)) !important;
  border-bottom:1px solid var(--rl-line) !important;
  box-shadow:inset 0 -1px 0 rgba(126,229,255,.08), 0 6px 20px rgba(0,0,0,.24) !important;
}

#home .hm-brand .hm-word {color:#f4fbff !important; text-shadow:0 0 8px rgba(127,220,255,.22)}
#home .hm-brand .hm-word span {color:var(--rl-gold) !important}
#home .hm-brand .hm-sub {color:#86a2bc !important; text-transform:uppercase; letter-spacing:.4px}

#home .hm-nav {gap:7px !important; align-items:flex-end !important; overflow-x:visible !important; padding:0 6px !important}

#home .hm-nav button {
  position:relative !important;
  min-width:74px !important;
  padding:9px 16px 8px !important;
  color:#dcecfa !important;
  border:1px solid rgba(71,169,207,.55) !important;
  border-bottom-color:rgba(71,169,207,.25) !important;
  border-radius:9px 9px 3px 3px !important;
  background:linear-gradient(180deg,rgba(24,74,109,.92),rgba(10,42,68,.92)) !important;
  box-shadow:inset 0 0 8px rgba(65,180,221,.14), 0 0 3px rgba(72,177,218,.4) !important;
  transition:.14s ease !important;
}
#home .hm-nav button svg {margin-right:2px}

#home .hm-nav button:hover {
  background:linear-gradient(180deg,#234b84,#15325c) !important;
  color:#fff !important;
  border-color:rgba(120,210,250,.8) !important;
}
#home .hm-nav button:hover .ic {stroke:#fff !important}

#home .hm-nav button.on {
  background:linear-gradient(180deg,#fffbe8 0%,#ffe9a8 55%,#fff6d6 100%) !important;
  color:#4a3402 !important;
  border-color:#fff3cf !important;
  box-shadow:0 0 14px rgba(255,212,50,.55), inset 0 0 6px rgba(255,255,255,.6) !important;
}
#home .hm-nav button.on .ic {stroke:#4a3402 !important}
#home .hm-nav button.on::after {
  content:'';
  position:absolute;
  bottom:-7px; left:50%;
  transform:translateX(-50%);
  width:15px; height:9px;
  background:#ffe9a8;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  filter:drop-shadow(0 0 4px rgba(255,212,50,.6));
}

#home .hm-user {
  border:1px solid rgba(90,177,215,.5) !important;
  background:linear-gradient(180deg,#173558,#0b1e36) !important;
  box-shadow:inset 0 0 10px rgba(83,191,235,.08) !important;
}

/* ---------- hero — glowing uppercase title language ---------- */
#home .hm-hero {
  margin:20px 20px 16px !important;
  padding:22px 26px !important;
  border:1px solid var(--rl-line) !important;
  border-radius:6px !important;
  background:
    radial-gradient(700px 140px at 18% 0%,rgba(60,142,207,.15),transparent 70%),
    linear-gradient(180deg,rgba(18,45,81,.86),rgba(8,21,43,.9)) !important;
  box-shadow:0 0 0 1px rgba(75,195,237,.08), 0 0 18px rgba(36,127,178,.08) !important;
}
@media (min-width:960px) {
 #home .hm-hero {flex-wrap:nowrap !important} 
}
#home .hm-hero h1 {
  margin:0 0 6px !important;
  color:var(--rl-cyan-2) !important;
  font-family:"Arial Narrow","Segoe UI Light",sans-serif !important;
  font-size:34px !important;
  font-weight:300 !important;
  letter-spacing:1px !important;
  text-transform:uppercase !important;
  text-shadow:0 0 8px rgba(73,199,245,.85), 0 0 18px rgba(73,199,245,.35) !important;
}
#home .hm-hero p {color:#b5c5d5 !important}

/* ---------- signed-out gate (same #home overlay, gate variant) ---------- */
#home .hm-gate-hero h1 {
  color:var(--rl-cyan-2) !important;
  font-family:"Arial Narrow","Segoe UI Light",sans-serif !important;
  font-weight:300 !important; letter-spacing:1px !important; text-transform:uppercase !important;
  text-shadow:0 0 8px rgba(73,199,245,.85), 0 0 18px rgba(73,199,245,.35) !important;
}
#home .hm-gate-hero p {color:#b5c5d5 !important}
#home .hm-gate-btn {
  border:1px solid rgba(66,151,194,.55) !important;
  border-radius:7px !important;
  background:linear-gradient(180deg,rgba(20,46,81,.95) 0%,rgba(9,23,44,.98) 55%,rgba(4,10,21,.99) 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(96,206,245,.04), 0 5px 16px rgba(0,0,0,.2) !important;
  color:var(--rl-text) !important;
}
#home .hm-gate-btn:hover {
  border-color:rgba(96,213,255,.8) !important;
  box-shadow:0 7px 20px rgba(0,0,0,.3),0 0 12px rgba(56,172,225,.13) !important;
}
#home .hm-gate-btn .hm-ico {
  background:linear-gradient(180deg,#16496b,#0a2843) !important;
  border:1px solid rgba(76,188,233,.65) !important;
  color:var(--rl-cyan-2) !important;
}
#home .hm-gate-btn > div > span {color:#8fa9bf !important}
#home .hm-gate-btn.primary {
  background:linear-gradient(180deg,#fffbe8 0%,#ffe9a8 55%,#fff6d6 100%) !important;
  border-color:#fff3cf !important;
  color:#4a3402 !important;
  box-shadow:0 0 14px rgba(255,212,50,.4) !important;
}
#home .hm-gate-btn.primary .hm-ico {
  background:rgba(74,52,2,.12) !important; border-color:rgba(74,52,2,.35) !important; color:#4a3402 !important;
}
#home .hm-gate-btn.primary > div > span {color:rgba(74,52,2,.75) !important}

#home .hm-chip {
  border:1px solid rgba(72,159,201,.5) !important;
  background:linear-gradient(180deg,rgba(21,50,84,.94),rgba(9,24,45,.97)) !important;
  border-radius:5px !important;
  color:#e9f7ff !important;
  box-shadow:inset 0 0 8px rgba(63,179,225,.06) !important;
}
#home .hm-chip:hover {
  border-color:rgba(108,220,255,.8) !important;
  box-shadow:0 0 8px rgba(68,185,235,.18), inset 0 0 9px rgba(66,180,229,.1) !important;
}
#home .hm-chip.alert {
  border-color:rgba(255,212,50,.7) !important;
  box-shadow:inset 0 0 9px rgba(255,212,50,.06) !important;
}

/* ---------- feature cards ----------
   Explicit, stepped column counts (rather than pure auto-fit reflow) so the
   row always composes cleanly — auto-fit's own breakpoints land wherever
   6 cards happen to stop fitting (e.g. an awkward 5-across-plus-1-orphan
   split around 1300-1500px); 3-then-2-then-1 always reads as intentional. */
#home .hm-cards {
  gap:14px !important; padding:0 20px !important;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;
}
@media (max-width:1540px){ #home .hm-cards{grid-template-columns:repeat(3,1fr) !important} }
@media (max-width:820px){ #home .hm-cards{grid-template-columns:repeat(2,1fr) !important} }
@media (max-width:540px){ #home .hm-cards{grid-template-columns:1fr !important} }

#home .hm-card {
  border:1px solid rgba(66,151,194,.55) !important;
  border-radius:7px !important;
  background:linear-gradient(180deg,rgba(20,46,81,.95) 0%,rgba(9,23,44,.98) 55%,rgba(4,10,21,.99) 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(96,206,245,.04), 0 5px 16px rgba(0,0,0,.2) !important;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease !important;
}
#home .hm-card:hover {
  transform:translateY(-2px);
  border-color:rgba(96,213,255,.8) !important;
  box-shadow:0 7px 20px rgba(0,0,0,.3),0 0 12px rgba(56,172,225,.13) !important;
}
/* Team Hub's list content is naturally taller than the other cards' fixed
   16:9 artwork — let it size to its own content instead of grid-stretching
   (the default) to match, which would otherwise drag every image card in
   its row up to Team Hub's height too. */
#home .hm-card-hub{align-self:start !important}

/* Reserve the SAME head height on every card regardless of whether its own
   title/description happen to wrap — otherwise a card with a longer title
   (uppercase runs wider than the original mixed-case design assumed) gets a
   taller head than its row-mates, and the artwork/CTA below it drift out of
   alignment. Sized for worst case: a 2-line uppercase title + 3-line body. */
#home .hm-card-head {padding:14px !important; min-height:122px !important; background:linear-gradient(180deg,rgba(29,68,112,.34),transparent) !important}
#home .hm-card h2 {
  color:var(--rl-cyan-2) !important;
  font-family:"Arial Narrow","Segoe UI",sans-serif !important;
  font-size:18px !important; font-weight:500 !important; line-height:1.22 !important;
  letter-spacing:.15px !important; text-transform:uppercase !important;
  text-shadow:0 0 5px rgba(44,164,224,.25) !important;
}
#home .hm-card p {color:#a9bfd2 !important}
#home .hm-ico {
  background:linear-gradient(180deg,#16496b,#0a2843) !important;
  border:1px solid rgba(76,188,233,.65) !important;
  box-shadow:0 0 7px rgba(60,182,232,.16) !important;
}
#home .hm-ico .ic {stroke:currentColor !important}

/* area-specific icon colors, matching the production Home cards */
#home .tint-blue .hm-ico {
  color:#3d9dff !important;
  background:linear-gradient(180deg,rgba(61,157,255,.22),rgba(61,157,255,.05)) !important;
  border-color:rgba(61,157,255,.55) !important;
  box-shadow:0 0 7px rgba(61,157,255,.22) !important;
}
#home .tint-green .hm-ico {
  color:#5ac878 !important;
  background:linear-gradient(180deg,rgba(90,200,120,.22),rgba(90,200,120,.05)) !important;
  border-color:rgba(90,200,120,.55) !important;
  box-shadow:0 0 7px rgba(90,200,120,.22) !important;
}
#home .tint-teal .hm-ico {
  color:#3cc8be !important;
  background:linear-gradient(180deg,rgba(60,200,190,.22),rgba(60,200,190,.05)) !important;
  border-color:rgba(60,200,190,.55) !important;
  box-shadow:0 0 7px rgba(60,200,190,.22) !important;
}
#home .tint-purple .hm-ico {
  color:#9678ff !important;
  background:linear-gradient(180deg,rgba(150,120,255,.22),rgba(150,120,255,.05)) !important;
  border-color:rgba(150,120,255,.55) !important;
  box-shadow:0 0 7px rgba(150,120,255,.22) !important;
}
#home .tint-gold .hm-ico {
  color:#ffd54a !important;
  background:linear-gradient(180deg,rgba(255,213,74,.22),rgba(255,213,74,.05)) !important;
  border-color:rgba(255,213,74,.55) !important;
  box-shadow:0 0 7px rgba(255,213,74,.22) !important;
}
#home .hm-visual {
  margin:0 14px !important;
  border:1px solid rgba(81,185,226,.42) !important;
  border-radius:5px !important;
  background:#050b14 !important;
  box-shadow:inset 0 0 12px rgba(0,0,0,.45) !important;
}
#home .hm-visual img {opacity:.94; filter:saturate(.92) contrast(1.05)}

/* CTA buttons — "cartridge" skew, matching ui-ux-test-2.html .ui-button.
   Fixed min-height + centered text means a button whose label wraps to 2
   lines ("Open Perspective & 3D →") still lands at the same height and
   vertical text position as a 1-line button ("Open Live Board →") — the
   smaller font-size/letter-spacing here (vs. the card title) also keeps
   the longest labels to 2 lines instead of 3. */
#home .hm-cta {
  position:relative !important;
  margin:12px 14px 14px !important;
  min-height:52px !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  text-align:center !important;
  border:1px solid rgba(80,181,225,.75) !important;
  border-radius:4px !important;
  color:var(--rl-cyan-3) !important;
  background:linear-gradient(180deg,#174c70,#0b3150) !important;
  box-shadow:inset 0 0 8px rgba(71,196,240,.1) !important;
  text-transform:uppercase !important;
  font-size:13px !important; line-height:1.25 !important;
  letter-spacing:.2px !important;
  font-weight:600 !important;
  transform:skewX(-6deg) translateZ(0);
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  will-change:transform;
}
#home .hm-cta > * {display:inline-block}
#home .hm-cta:hover {
  color:#fff !important;
  border-color:#7edfff !important;
  background:linear-gradient(180deg,#1d5c86,#0d385d) !important;
  box-shadow:0 0 8px rgba(91,210,251,.24),inset 0 0 10px rgba(91,210,251,.12) !important;
}
#home .hm-cta.gold {
  color:#fff8c9 !important;
  border-color:rgba(255,212,50,.7) !important;
  background:linear-gradient(180deg,#534719,#2b260d) !important;
}

#home .tint-green, #home .tint-teal, #home .tint-purple, #home .tint-blue {--tint:var(--rl-cyan) !important}
#home .tint-gold {border-color:rgba(255,212,50,.7) !important}
#home .tint-gold .hm-card-head {background:linear-gradient(180deg,rgba(255,212,50,.08),transparent) !important}
#home .tint-gold h2 {color:#ffe86e !important}

/* ---------- Team Hub list ---------- */
#home .hm-hubrow {
  border:1px solid rgba(73,158,200,.45) !important;
  background:linear-gradient(180deg,rgba(22,49,82,.91),rgba(10,25,47,.94)) !important;
  border-radius:4px !important;
}
#home .hm-hubrow:hover {border-color:rgba(105,210,248,.7) !important}
#home .hm-hubrow b {color:#e7f8ff !important}
#home .hm-hubrow span {color:#91a9bf !important}

/* ---------- quick actions ---------- */
#home .hm-quick {
  margin:18px 0 !important;
  padding:15px 20px !important;
  border-top:1px solid var(--rl-line) !important;
  border-bottom:1px solid var(--rl-line) !important;
  background:linear-gradient(180deg,rgba(14,35,66,.97),rgba(5,14,29,.98)) !important;
}
#home .hm-quick-label {color:var(--rl-gold) !important; text-transform:uppercase !important; letter-spacing:.4px !important}
#home .hm-quick > button {
  border:1px solid rgba(67,151,194,.5) !important;
  border-radius:5px !important;
  background:linear-gradient(180deg,#152e4f,#0b1c34) !important;
  color:#edf8ff !important;
}
#home .hm-quick > button:hover {border-color:#65c7ed !important; background:linear-gradient(180deg,#1a3d65,#0c2947) !important}
#home .hm-q-ic {border:1px solid rgba(78,176,218,.4) !important; background:#102c4a !important}

/* ---------- lower dashboard panels ---------- */
#home .hm-panels {gap:14px !important; padding:0 20px 20px !important}
#home .hm-panel {
  border:1px solid rgba(66,151,194,.5) !important;
  border-radius:7px !important;
  background:linear-gradient(180deg,rgba(14,34,63,.97),rgba(5,14,29,.98)) !important;
  box-shadow:inset 0 0 0 1px rgba(92,203,240,.03) !important;
}
#home .hm-panel-head {
  padding:11px 12px !important;
  color:var(--rl-cyan-2) !important;
  border-bottom:1px solid rgba(67,161,203,.28) !important;
  background:linear-gradient(180deg,rgba(31,69,110,.36),rgba(18,42,73,.15)) !important;
  text-transform:uppercase !important;
  letter-spacing:.3px !important;
  font-size:13px !important;
}
#home .hm-panel-head button {color:#7bd8ff !important}
#home .hm-dim, #home .hm-empty {color:#8198ad !important}

#home .hm-row {
  margin:7px 8px !important;
  border:1px solid rgba(61,139,181,.4) !important;
  border-radius:4px !important;
  background:linear-gradient(180deg,rgba(22,49,82,.9),rgba(10,25,47,.94)) !important;
  color:#eaf7ff !important;
}
#home .hm-row:hover:not(.static) {
  border-color:rgba(88,199,241,.72) !important;
  background:linear-gradient(180deg,rgba(27,65,103,.95),rgba(11,32,57,.97)) !important;
}
#home .hm-row b {color:#edf9ff !important}
#home .hm-row img {border:1px solid rgba(81,185,226,.4) !important; box-shadow:0 0 4px rgba(60,182,232,.15) !important}
#home .hm-row span {color:#8fa8be !important}
#home .hm-evico {background:#102d4d !important; border:1px solid rgba(70,161,201,.36) !important; color:#85ddff !important}

/* ---------- footer ---------- */
#home .hm-foot {
  border-top:1px solid rgba(62,160,202,.4) !important;
  background:linear-gradient(180deg,rgba(7,17,34,.92),rgba(2,7,15,.98)) !important;
  color:#7f9bb4 !important;
}
#home .hm-foot-brand b {color:#ffe86e !important}

/* ---------- generic icon treatment ---------- */
#home .ic {stroke:#8fa9bf !important}
#home button:hover .ic, #home .hm-panel-head button:hover {stroke:var(--rl-cyan-2) !important; color:var(--rl-cyan-2) !important}

#home, #home * {scrollbar-color:#28658a #07101f; scrollbar-width:thin}
#home *::-webkit-scrollbar {width:10px;height:10px}
#home *::-webkit-scrollbar-track {background:#07101f}
#home *::-webkit-scrollbar-thumb {background:linear-gradient(#347ba4,#17435f); border:2px solid #07101f; border-radius:8px}

@media (max-width:1300px) {

  #home .hm-nav button {min-width:60px !important; padding:9px 10px 8px !important}
  #home .hm-hero h1 {font-size:28px !important}

}

/* ============================================================
   GLOBAL MODAL / POPOVER / FORM CHROME
   #modal, #modal-scrim, #popover and #toast are shared app-wide
   (Team Hub, Playbook, Film Room, Live Board all open dialogs
   into the SAME #modal element modal.js manages) — deliberately
   NOT scoped under #home, so every dialog anywhere in the app
   gets this look, not just the ones opened from Home.
   ============================================================ */

#modal-scrim{
  background:rgba(3,7,18,.72) !important;
  backdrop-filter:blur(4px) !important;
}

#modal, #popover{
  background:
    linear-gradient(180deg,rgba(20,46,81,.97) 0%,rgba(9,23,44,.98) 55%,rgba(4,10,21,.99) 100%) !important;
  border:1px solid var(--rl-line) !important;
  box-shadow:0 0 0 1px rgba(75,195,237,.10), 0 16px 50px rgba(0,0,0,.55), 0 0 30px rgba(36,127,178,.10) !important;
  color:var(--rl-text) !important;
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif !important;
}
#modal, #modal *, #popover, #popover * { scrollbar-color:#28658a #07101f; scrollbar-width:thin; }
#modal::-webkit-scrollbar, #popover::-webkit-scrollbar { width:10px; }
#modal::-webkit-scrollbar-track, #popover::-webkit-scrollbar-track { background:#07101f; }
#modal::-webkit-scrollbar-thumb, #popover::-webkit-scrollbar-thumb {
  background:linear-gradient(#347ba4,#17435f); border:2px solid #07101f; border-radius:8px;
}

#modal-x{
  background:linear-gradient(180deg,rgba(24,74,109,.92),rgba(10,42,68,.92)) !important;
  border:1px solid rgba(71,169,207,.55) !important;
  color:#dcecfa !important;
  box-shadow:0 0 6px rgba(60,182,232,.16) !important;
}
#modal-x:hover{
  background:linear-gradient(180deg,#234b84,#15325c) !important;
  border-color:rgba(120,210,250,.8) !important;
  color:#fff !important;
}

#modal h2{
  color:var(--rl-cyan-2) !important;
  font-family:"Arial Narrow","Segoe UI Light",sans-serif !important;
  font-weight:400 !important; letter-spacing:.5px !important; text-transform:uppercase !important;
  text-shadow:0 0 6px rgba(73,199,245,.5) !important;
}

#modal button, #modal .file-label, #popover button, #analytics button, #analytics .file-label{
  background:linear-gradient(180deg,rgba(24,74,109,.92),rgba(10,42,68,.92)) !important;
  border:1px solid rgba(71,169,207,.55) !important;
  color:#dcecfa !important;
  border-radius:6px !important;
  transition:.14s ease !important;
}
/* Plain inline text-link buttons (player names in Games/Results/game-
   detail tables) — needs a real class, not an inline style, since the
   button rule above is !important and beats an un-!important inline
   style; a class selector at the same specificity as "#analytics button"
   plus the extra .link-btn class wins. */
#modal button.link-btn, #popover button.link-btn, #analytics button.link-btn{
  background:none !important; border:0 !important; padding:0 !important;
  border-radius:0 !important; color:var(--rl-cyan-2) !important;
  text-decoration:underline; font-weight:700 !important;
}
#modal button.link-btn:hover, #analytics button.link-btn:hover{
  background:none !important; color:#fff !important;
}

#modal button:hover, #popover button:hover, #analytics button:hover{
  background:linear-gradient(180deg,#234b84,#15325c) !important;
  border-color:rgba(120,210,250,.8) !important;
  color:#fff !important;
}
#modal button.primary, #analytics button.primary{
  background:linear-gradient(180deg,#fffbe8 0%,#ffe9a8 55%,#fff6d6 100%) !important;
  color:#4a3402 !important;
  border-color:#fff3cf !important;
  box-shadow:0 0 10px rgba(255,212,50,.4) !important;
}
#modal button.primary:hover, #analytics button.primary:hover{ box-shadow:0 0 14px rgba(255,212,50,.6) !important; }
#modal button.danger, #popover button.danger, #analytics button.danger{ color:#ff8a8a !important; }
#modal button:disabled, #modal button:disabled:hover, #analytics button:disabled, #analytics button:disabled:hover{
  background:linear-gradient(180deg,rgba(24,74,109,.5),rgba(10,42,68,.5)) !important;
  color:#7f94ac !important; border-color:rgba(71,169,207,.3) !important;
}

#popover .po-title{ color:var(--rl-cyan-2) !important; text-transform:uppercase; letter-spacing:.3px; }

/* Selected/active toggle-button states inside #modal, #popover, and
   #analytics. The base button rules above win over the original app.css
   class-only rules (an id selector beats two classes on specificity
   regardless of !important), which silently erased every selected-state
   highlight app-wide: lineup/roster picker toggles, Team Hub's active
   tab, RSVP buttons, film event-type filters, the kickoff formation
   popover's current-pick highlight, etc. Restoring all of them here with
   one consistent gold "selected" treatment, at high enough specificity
   (button+class, !important) to actually win. */
#modal button.on, #modal button.active, #modal .team-toggle.on,
#analytics button.on, #analytics button.active,
.hub-tabs button.active, .hub-rsvp button.on, #hub-push.on,
#modal .fev-type.on, #modal #film-draw-tools button.active,
#modal #film-cal-btn.on, #modal #film-split-btn.on,
#popover button.on, #popover button.active, #popover .ko-pin.on {
  background:linear-gradient(180deg,#fffbe8 0%,#ffe9a8 55%,#fff6d6 100%) !important;
  color:#4a3402 !important;
  border-color:#fff3cf !important;
  box-shadow:0 0 8px rgba(255,212,50,.4) !important;
}
#modal button.on:hover, #modal button.active:hover, #modal .team-toggle.on:hover,
#analytics button.on:hover, #analytics button.active:hover,
#popover button.on:hover, #popover button.active:hover {
  box-shadow:0 0 12px rgba(255,212,50,.6) !important;
}
#popover.grid button.active { box-shadow:0 0 8px rgba(255,212,50,.4), inset 0 0 0 1px var(--rl-gold) !important; }

/* text/date/number inputs + selects + textareas — the dark inset field
   style from the reference Settings screenshot (settings.png) */
#modal input[type=text], #modal input[type=password], #modal input[type=email],
#modal input[type=date], #modal input[type=datetime-local], #modal input[type=number],
#modal select, #modal textarea,
#analytics input[type=text], #analytics input[type=password], #analytics input[type=email],
#analytics input[type=date], #analytics input[type=datetime-local], #analytics input[type=number],
#analytics select, #analytics textarea{
  background:linear-gradient(180deg,#111820 0%,#020405 70%,#0c171b 100%) !important;
  border:1px solid #357799 !important;
  color:#fff !important;
  box-shadow:inset 0 0 6px rgba(255,255,255,.06), 0 0 3px rgba(69,189,245,.22) !important;
}
#modal input::placeholder, #modal textarea::placeholder,
#analytics input::placeholder, #analytics textarea::placeholder{ color:#6f8aa0 !important; }
/* <option> ignores the <select>'s gradient background (native popup
   rendering) — without an explicit solid background-color here, the white
   text color above is white-on-native-white until hovered, i.e. invisible. */
#modal select option, #analytics select option{
  background-color:#0c171b !important;
  color:#fff !important;
}

/* checkbox — the square, glowing-check style from settings.png */
#modal input[type=checkbox], #analytics input[type=checkbox]{
  appearance:none; -webkit-appearance:none; width:22px; height:22px; margin:0; flex:0 0 auto;
  border:1px solid #346f8a !important; border-radius:4px !important;
  background:linear-gradient(#071019,#0a0f13) !important;
  box-shadow:inset 0 0 4px rgba(255,255,255,.03), 0 0 3px rgba(71,194,235,.35) !important;
  position:relative;
}
#modal input[type=checkbox]:checked, #analytics input[type=checkbox]:checked{ background:linear-gradient(180deg,#164a63,#0e3449) !important; }
#modal input[type=checkbox]:checked::after, #analytics input[type=checkbox]:checked::after{
  content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:#e7fdff; text-shadow:0 0 6px rgba(93,231,255,.8);
}

.board-item{
  background:linear-gradient(180deg,rgba(22,49,82,.9),rgba(10,25,47,.94)) !important;
  border:1px solid rgba(61,139,181,.4) !important;
}
.board-item:hover{ border-color:rgba(88,199,241,.72) !important; }
.board-item .bi-name{ color:#edf9ff !important; }
.board-item .bi-date{ color:#8fa8be !important; }

#toast{
  background:linear-gradient(180deg,rgba(20,46,81,.97),rgba(9,23,44,.98)) !important;
  border:1px solid var(--rl-line) !important;
  color:var(--rl-text) !important;
  box-shadow:0 8px 30px rgba(0,0,0,.5), 0 0 16px rgba(36,127,178,.15) !important;
}

/* ============================================================
   ANALYTICS — its own fixed layer (#analytics, body.analytics-open),
   same pattern as Playbook: results/reports/games are page-shaped
   content, not a modal dialog. Home's own .hm-top nav stays visible
   above it (not drawn here) — see #analytics's CSS comment in app.css.
   Reuses hub.js's .hub-* classes for its content (below — unscoped
   there too, so Team Hub sharing them costs nothing extra).
   ============================================================ */
#analytics{
  background:
    radial-gradient(1200px 420px at 50% -140px, rgba(78,146,220,.30), transparent 60%),
    linear-gradient(180deg,var(--rl-bg-top) 0%,var(--rl-bg-mid) 38%,var(--rl-bg-bottom) 100%) !important;
  color:var(--rl-text) !important;
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif !important;
}
#analytics, #analytics * { scrollbar-color:#28658a #07101f; scrollbar-width:thin; }
#analytics *::-webkit-scrollbar{ width:10px }
#analytics *::-webkit-scrollbar-track{ background:#07101f }
#analytics *::-webkit-scrollbar-thumb{ background:linear-gradient(#347ba4,#17435f); border:2px solid #07101f; border-radius:8px }

/* ============================================================
   TEAM HUB content classes — shared with Analytics above (both use
   the same .hub-* row/card/table vocabulary from hub.js). Team Hub
   itself still renders inside #modal for now.
   ============================================================ */
.hub-season{ color:#8fa9bf !important }
.hub-next{
  border-color:rgba(255,212,50,.55) !important;
  background:rgba(255,212,50,.08) !important;
}
.hub-day{ border-top-color:rgba(66,151,194,.3) !important }
.hub-day-h{ color:#7f94ac !important }
.hub-day.today .hub-day-h{ color:var(--rl-gold) !important }
.hub-empty{ color:#7f94ac !important }

.hub-ev{
  border:1px solid rgba(61,139,181,.4) !important;
  background:linear-gradient(180deg,rgba(22,49,82,.9),rgba(10,25,47,.94)) !important;
}
.hub-ev.match, .hub-ev.tournament{ border-color:rgba(255,212,50,.55) !important }
.hub-ev-time{ color:#8fa9bf !important }
.hub-ev-sub{ color:#8fa9bf !important }
.hub-official{ color:var(--rl-gold) !important }
.hub-tally{ color:#8fa9bf !important }

.hub-cell{ border-color:rgba(61,139,181,.35) !important }
.hub-cell.hd{ color:#7f94ac !important }
.hub-cell.today{ border-color:var(--rl-gold) !important }
.hub-cell i{ color:#7f94ac !important }

.hub-foot{ border-top-color:rgba(66,151,194,.3) !important }

.hub-report{ border-color:rgba(66,151,194,.5) !important; border-radius:8px !important }
.hub-rep-row{ border-top-color:rgba(66,151,194,.3) !important }
.hub-rep-head{
  color:var(--rl-cyan-2) !important; background:rgba(31,69,110,.36) !important;
  text-transform:uppercase; letter-spacing:.3px;
}

.hub-roster{ gap:10px !important }
.hub-player{
  border:1px solid rgba(66,151,194,.5) !important;
  background:linear-gradient(180deg,rgba(20,46,81,.95),rgba(9,23,44,.98)) !important;
}
.hub-num{ color:var(--rl-gold) !important }

.hub-result-badge{ box-shadow:0 0 5px rgba(0,0,0,.4) !important }

.hub-chip{
  border:1px solid rgba(66,151,194,.5) !important;
  background:linear-gradient(180deg,rgba(20,46,81,.95),rgba(9,23,44,.98)) !important;
}
.hub-chip b{ color:var(--rl-gold) !important }
.hub-chip span{ color:#8fa9bf !important }

/* ============================================================
   PLAYBOOK — its own fixed layer (#playbook, body.playbook-open),
   separate from #home and #modal, so needs its own base treatment.
   ============================================================ */
#playbook{
  background:
    radial-gradient(1200px 420px at 50% -140px, rgba(78,146,220,.30), transparent 60%),
    linear-gradient(180deg,var(--rl-bg-top) 0%,var(--rl-bg-mid) 38%,var(--rl-bg-bottom) 100%) !important;
  color:var(--rl-text) !important;
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif !important;
}
#playbook .pb-top{
  background:linear-gradient(180deg,rgba(14,35,66,.97),rgba(5,14,29,.98)) !important;
  border-bottom:1px solid var(--rl-line) !important;
}

#playbook .pb-tabs button{
  border:1px solid rgba(71,169,207,.5) !important;
  color:#9db6cc !important;
}
#playbook .pb-tabs button.on{
  background:linear-gradient(180deg,#fffbe8 0%,#ffe9a8 55%,#fff6d6 100%) !important;
  color:#4a3402 !important; border-color:#fff3cf !important;
  box-shadow:0 0 8px rgba(255,212,50,.4) !important;
}
#playbook .pb-search input{
  background:linear-gradient(180deg,#111820 0%,#020405 70%,#0c171b 100%) !important;
  border:1px solid #357799 !important; color:#fff !important;
  box-shadow:inset 0 0 6px rgba(255,255,255,.06), 0 0 3px rgba(69,189,245,.22) !important;
}
#playbook .pb-btn{
  background:linear-gradient(180deg,rgba(24,74,109,.92),rgba(10,42,68,.92)) !important;
  border:1px solid rgba(71,169,207,.55) !important; color:#dcecfa !important;
}
#playbook .pb-btn:hover{ border-color:rgba(120,210,250,.8) !important; color:#fff !important }
#playbook .pb-btn.on, #playbook .pb-btn.primary{
  background:linear-gradient(180deg,#fffbe8 0%,#ffe9a8 55%,#fff6d6 100%) !important;
  color:#4a3402 !important; border-color:#fff3cf !important;
}
#playbook .pb-btn.pub{ background:rgba(90,200,120,.16) !important; border-color:rgba(90,200,120,.55) !important; color:#8fe3a6 !important }
#playbook .pb-btn.warn{ background:rgba(255,212,50,.1) !important; border-color:rgba(255,212,50,.5) !important; color:var(--rl-gold) !important }
#playbook .pb-icon{ background:linear-gradient(180deg,rgba(24,74,109,.92),rgba(10,42,68,.92)) !important; border-color:rgba(71,169,207,.55) !important }
#playbook .pb-user{ background:linear-gradient(180deg,#173558,#0b1e36) !important; border-color:rgba(90,177,215,.5) !important }

#playbook .pb-rail{ border-right-color:rgba(66,151,194,.3) !important }
#playbook .pb-g{ color:#7f94ac !important }
#playbook .pb-rail button{ color:#9db6cc !important }
#playbook .pb-rail button:hover, #playbook .pb-rail button.on{
  background:rgba(31,69,110,.4) !important; color:#eef7ff !important;
}
#playbook .pb-rail button .n{ color:var(--rl-gold) !important }
#playbook .pb-rail-plays{ border-top-color:rgba(66,151,194,.3) !important }

#playbook .pb-sh h2{
  color:var(--rl-cyan-2) !important;
  font-family:"Arial Narrow","Segoe UI Light",sans-serif !important;
  font-weight:400 !important; letter-spacing:.4px !important; text-transform:uppercase !important;
  text-shadow:0 0 6px rgba(73,199,245,.5) !important;
}
#playbook .pb-sh h2 i{ color:var(--rl-gold) !important }
#playbook .pb-layer, #playbook .pb-dim, #playbook .pb-empty{ color:#8198ad !important }
#playbook .pb-intro{ color:#c3d3e3 !important }

#playbook .pb-filt{ background:rgba(9,23,44,.6) !important; border-color:rgba(66,151,194,.4) !important }
#playbook .pb-filt button{ color:#9db6cc !important }
#playbook .pb-filt button.on{ background:rgba(69,189,245,.16) !important; color:var(--rl-cyan-2) !important }

#playbook .pb-rule{
  background:linear-gradient(180deg,rgba(20,46,81,.95) 0%,rgba(9,23,44,.98) 55%,rgba(4,10,21,.99) 100%) !important;
  border-color:rgba(66,151,194,.5) !important;
}
#playbook .pb-rule.situational{ border-color:rgba(69,189,245,.55) !important }
#playbook .pb-rule.draft{ border-color:var(--rl-gold) !important }
#playbook .pb-rule.flash{ box-shadow:0 0 0 3px var(--rl-gold) !important }
#playbook .pb-rule .code, #playbook .pb-ctx .code, #playbook .pb-hit .code{
  color:var(--rl-gold) !important; background:rgba(255,212,50,.12) !important;
}
#playbook .pb-rule .rb, #playbook .pb-prose{ color:#c3d3e3 !important }
#playbook .pb-badge.default, #playbook .pb-badge.experimental{ color:var(--rl-gold) !important; border-color:rgba(255,212,50,.5) !important }
#playbook .pb-badge.situational{ color:#7cc4f5 !important; border-color:rgba(69,189,245,.55) !important }
#playbook .pb-badge.dr{ background:var(--rl-gold) !important; border-color:var(--rl-gold) !important; color:#4a3402 !important }
#playbook .pb-conf{ color:var(--rl-gold) !important }
#playbook .pb-published{ border-top-color:rgba(66,151,194,.3) !important }
#playbook .pb-rule .rf{ border-top-color:rgba(66,151,194,.3) !important; color:#8198ad !important }
#playbook .pb-mini{ color:#8198ad !important }
#playbook .pb-mini:hover{ border-color:rgba(66,151,194,.5) !important; color:#eef7ff !important }
#playbook .pb-mini.ok{ color:#8fe3a6 !important; border-color:rgba(90,200,120,.5) !important }

#playbook .pb-callout{ border-left-color:var(--rl-gold) !important; background:rgba(255,212,50,.06) !important }
#playbook .pb-callout.later{ border-left-color:#9678ff !important; background:rgba(150,120,255,.08) !important }
#playbook .pb-callout.warning{ border-left-color:#ff6b6b !important; background:rgba(255,77,94,.08) !important }
#playbook .pb-callout .k{ color:#8198ad !important }

#playbook .pb-traffic > div{
  background:linear-gradient(180deg,rgba(22,49,82,.9),rgba(10,25,47,.94)) !important;
  border-color:rgba(61,139,181,.4) !important;
}

#playbook .pb-table, #playbook .md-table{
  background:linear-gradient(180deg,rgba(20,46,81,.95),rgba(9,23,44,.98)) !important;
  border-color:rgba(66,151,194,.5) !important;
}
#playbook .pb-table th, #playbook .md-table th{
  background:rgba(31,69,110,.4) !important; color:var(--rl-cyan-2) !important;
}
#playbook .pb-table th, #playbook .pb-table td,
#playbook .md-table th, #playbook .md-table td{ border-top-color:rgba(66,151,194,.3) !important }
#playbook .pb-table .alt{ color:#8198ad !important }
#playbook .pb-rulelink{ color:var(--rl-cyan-2) !important }

#playbook .pb-att{ background:rgba(9,23,44,.7) !important; border-color:rgba(66,151,194,.5) !important }
#playbook .pb-addatt{ color:#8198ad !important; border-color:rgba(66,151,194,.4) !important }
#playbook .pb-addatt:hover{ color:var(--rl-gold) !important; border-color:var(--rl-gold) !important }
#playbook .pb-progress{ background:var(--rl-gold) !important }

#playbook .pb-ack{ border-color:rgba(66,151,194,.4) !important; color:#8198ad !important }

#playbook .pb-ctx{ border-left-color:rgba(66,151,194,.3) !important; color:#8198ad !important }
#playbook .pb-ctx > div > b{ color:#eef7ff !important }
#playbook .pb-ctx a{ color:#9db6cc !important }
#playbook .pb-ctx a:hover{ color:#eef7ff !important }

#playbook .pb-stale{ color:#ffb454 !important; border-color:rgba(255,138,42,.5) !important }
#playbook, #playbook * { scrollbar-color:#28658a #07101f; scrollbar-width:thin; }
#playbook *::-webkit-scrollbar{ width:10px }
#playbook *::-webkit-scrollbar-track{ background:#07101f }
#playbook *::-webkit-scrollbar-thumb{ background:linear-gradient(#347ba4,#17435f); border:2px solid #07101f; border-radius:8px }

/* ============================================================
   FILM ROOM — renders inside #modal (film.js), so the base #modal
   chrome already covers the outer panel/buttons; these fill in
   film-specific pieces: timeline, event chips, comment threads.
   ============================================================ */
#modal #film-timeline{ background:#0a1626 !important; border-color:rgba(66,151,194,.5) !important }
#modal #ftl-played{ background:rgba(255,255,255,.1) !important }
#modal .fev-type{ background:rgba(20,46,81,.7) !important; border-color:rgba(71,169,207,.4) !important; color:#9db6cc !important }
#modal .fchip{ background:rgba(20,46,81,.7) !important; border-color:rgba(71,169,207,.4) !important; color:#dcecfa !important }
#modal .fchip:hover{ background:rgba(31,69,110,.6) !important }
#modal .fchip.cur{ outline-color:var(--rl-gold) !important }
#modal .film-info{ color:#8198ad !important }
#modal .fc-unread{ color:var(--rl-gold) !important; background:rgba(255,212,50,.16) !important }

#modal .fc-thread{
  background:linear-gradient(180deg,rgba(22,49,82,.9),rgba(10,25,47,.94)) !important;
  border-color:rgba(61,139,181,.4) !important;
}
#modal .fc-reply{ border-top-color:rgba(61,139,181,.3) !important }
#modal .fc-time{ color:var(--rl-gold) !important; background:rgba(255,212,50,.12) !important }
#modal .fc-time:hover{ background:rgba(255,212,50,.22) !important }
#modal .fc-hide{ color:#8198ad !important }
#modal .fc-replybtn{ color:#7cc4f5 !important }

#modal .fc-badge.win{ background:rgba(46,160,67,.2) !important; color:#4ade80 !important }
#modal .fc-badge.loss{ background:rgba(255,77,94,.2) !important; color:#ff8a94 !important }
#modal .fc-teams{ color:#8198ad !important }
#modal .fc-teams em{ color:#eef7ff !important }
#modal .fc-meta, #modal .fc-ff, #modal .fc-d{ color:#8198ad !important }

/* ============================================================
   LIVE BOARD EDITOR — #topbar/#palette/#ctxbar/#animbar are all
   unique to the board editor (#app), never reused elsewhere, so
   these are left unscoped like the Team Hub/Playbook sections.
   Deliberately NOT touching: the field/cars/ball themselves (drawn
   on <canvas>, not CSS-stylable) or .color-btn/.car-chip/.ball-chip
   (literal pickable colors — recoloring those would be misleading).
   ============================================================ */
#topbar{
  background:linear-gradient(180deg,rgba(14,35,66,.97),rgba(5,14,29,.98)) !important;
  border-bottom:1px solid var(--rl-line) !important;
}
#board-name{ color:var(--rl-text) !important }
#board-name:hover, #board-name:focus{ background:rgba(31,69,110,.4) !important }
#board-name.unsaved::after{ color:var(--rl-gold) !important }

#board-wrap{ background:var(--rl-bg-bottom) !important }

.tb-btn{
  background:linear-gradient(180deg,rgba(24,74,109,.92),rgba(10,42,68,.92)) !important;
  border:1px solid rgba(71,169,207,.55) !important;
  color:#dcecfa !important;
}
.tb-btn:hover{ border-color:rgba(120,210,250,.8) !important; color:#fff !important }
.tb-btn.toggle.on{
  background:linear-gradient(180deg,#fffbe8 0%,#ffe9a8 55%,#fff6d6 100%) !important;
  color:#4a3402 !important; border-color:#fff3cf !important;
  box-shadow:0 0 8px rgba(255,212,50,.4) !important;
}
#btn-account.on{ border-color:var(--rl-gold) !important; color:var(--rl-gold) !important }
#btn-save.unsaved{ border-color:var(--rl-gold) !important; color:var(--rl-gold) !important }
#btn-library.pending-sync::after{ background:var(--rl-gold) !important }

#palette{
  background:linear-gradient(180deg,rgba(14,35,66,.97),rgba(5,14,29,.98)) !important;
  border-right:1px solid var(--rl-line) !important;
}
.pal-btn{
  background:linear-gradient(180deg,rgba(24,74,109,.92),rgba(10,42,68,.92)) !important;
  border:1px solid rgba(71,169,207,.55) !important;
  color:#dcecfa !important;
}
.pal-btn:hover{ border-color:rgba(120,210,250,.8) !important }
.pal-btn.active{
  background:linear-gradient(180deg,#fffbe8 0%,#ffe9a8 55%,#fff6d6 100%) !important;
  color:#4a3402 !important; border-color:#fff3cf !important;
  box-shadow:0 0 8px rgba(255,212,50,.4) !important;
}
.pal-sep{ background:rgba(66,151,194,.4) !important }

#ctxbar{
  background:linear-gradient(180deg,rgba(20,46,81,.97),rgba(9,23,44,.98)) !important;
  border:1px solid var(--rl-line) !important;
  box-shadow:0 6px 24px rgba(0,0,0,.5), 0 0 16px rgba(36,127,178,.15) !important;
}
#ctxbar button{
  background:linear-gradient(180deg,rgba(24,74,109,.92),rgba(10,42,68,.92)) !important;
  border:1px solid rgba(71,169,207,.55) !important;
  color:#dcecfa !important;
}
#ctxbar button:hover{ border-color:rgba(120,210,250,.8) !important; color:#fff !important }

#animbar{
  background:linear-gradient(180deg,rgba(14,35,66,.97),rgba(5,14,29,.98)) !important;
  border-top:1px solid var(--rl-line) !important;
}
.an-btn{
  background:linear-gradient(180deg,rgba(24,74,109,.92),rgba(10,42,68,.92)) !important;
  border:1px solid rgba(71,169,207,.55) !important;
  color:#dcecfa !important;
}
.an-btn:hover{ border-color:rgba(120,210,250,.8) !important }
.an-btn.toggle.on, .an-btn.on{
  background:linear-gradient(180deg,#fffbe8 0%,#ffe9a8 55%,#fff6d6 100%) !important;
  color:#4a3402 !important; border-color:#fff3cf !important;
}
#an-time, #an-dur-wrap{ color:#8fa9bf !important }

/* ============================================================
   MOBILE (phone touch screens) — everything below this point only
   takes effect at max-width:600px, so desktop/tablet/smartboard are
   completely unaffected. Most of the theme's own !important rules
   above were written with no viewport in mind (fixed min-heights,
   min-widths, overflow:visible) and silently defeat app.css's own
   responsive breakpoints, since they load after app.css and carry
   the same or higher specificity — this section overrides just the
   specific properties that fight phone-width usability, one feature
   area at a time as they're covered.
   ============================================================ */
@media (max-width: 600px) {
  /* --- header/nav (every signed-in full-page area shares .hm-top) --- */
  #home .hm-top { min-height: 0 !important; padding: 8px 10px !important; }
  /* brand: crest icon only — the wordmark + BoostPad mark cost too much
     width to keep alongside a 9-button nav on a phone */
  #home .hm-brand img.bp, #home .hm-brand > div { display: none !important; }
  #home .hm-nav {
    gap: 3px !important; padding: 0 !important; overflow-x: auto !important;
    -webkit-overflow-scrolling: touch; justify-content: flex-start !important;
  }
  #home .hm-nav button { min-width: 52px !important; padding: 7px 9px !important; }
}