:root {
  --bg: #0f1411;
  --panel: #18201b;
  --border: #2a362e;
  --text: #e8efe9;
  --muted: #8fa396;
  --accent: #facc15;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.app {
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

select, input, button {
  font: inherit;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  min-height: 36px;
}

button { cursor: pointer; }
button:hover { border-color: var(--muted); }
button.primary { background: var(--accent); color: #111; border-color: var(--accent); min-width: 48px; }

.picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.picker select { width: 100%; min-width: 0; }
.picker #play { grid-column: 1 / -1; }
.seed {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.seed label { color: var(--muted); }
.seed input { width: 90px; min-width: 0; }
.seed button { margin-left: auto; }

.stage { position: relative; }
#field {
  display: block;
  width: 100%;
  height: min(68vh, 150vw);
  border-radius: 10px;
  touch-action: manipulation;
}
.result {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  background: rgba(10, 14, 12, 0.85);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 600;
  white-space: nowrap;
}

.transport {
  display: flex;
  align-items: center;
  gap: 6px;
}
.transport button, .transport select { padding: 6px 10px; flex: none; }
.transport input[type="range"] { flex: 1; min-width: 0; padding: 0; accent-color: var(--accent); }
.clock { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: right; }

.toggles { display: flex; gap: 16px; color: var(--muted); }
.toggles input { min-height: 0; accent-color: var(--accent); }

.log {
  position: relative; /* rows' offsetTop is measured from here */
  list-style: none;
  margin: 0;
  padding: 8px 0;
  max-height: 220px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.log li {
  display: grid;
  grid-template-columns: 3.2em 1fr;
  gap: 8px;
  padding: 3px 4px;
  color: #5b6b60;
  border-radius: 6px;
}
.log li .t { font-variant-numeric: tabular-nums; }
.log li.past { color: var(--text); }
.log li.past .t { color: var(--muted); }
.log li.current { background: #24302a; }

/* --- full game page & replay mode ------------------------------------------------- */
.back { color: #93c5fd; text-decoration: none; font-size: 0.9rem; align-self: center; }
.situation { font-size: 0.85rem; opacity: 0.85; flex-basis: 100%; }
.game-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.game-controls label { font-size: 0.85rem; display: flex; gap: 0.3rem; align-items: center; }
.game-controls input { width: 4.5rem; }
.scoreboard { font-size: 1.4rem; font-weight: 600; margin: 0.75rem 0 0.25rem; }
.report { white-space: pre; overflow-x: auto; font-size: 0.75rem; line-height: 1.35; background: rgba(255, 255, 255, 0.04); padding: 0.75rem; border-radius: 8px; }
.pbp { list-style: none; padding: 0; margin: 0.75rem 0; }
.pbp li { padding: 0.4rem 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.85rem; }
.pbp li.note { opacity: 0.7; font-style: italic; }
.pbp li a { color: inherit; text-decoration: none; display: block; }
.pbp li a:hover { background: rgba(255, 255, 255, 0.06); }
.pbp .hdr { font-size: 0.75rem; opacity: 0.7; display: block; }
.pbp .calls { font-size: 0.72rem; opacity: 0.55; display: block; }
.pbp .flag { color: #facc15; font-size: 0.75rem; display: block; }
.pbp .miss { color: #f97316; font-size: 0.72rem; opacity: 0.8; display: block; }
.pbp .score { float: right; font-size: 0.75rem; opacity: 0.7; }
/* a live game's no-huddle snap (the offense hurried to it) */
.pbp .nohuddle { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 3px; background: #fcd34d; color: #5b2a06; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; vertical-align: 1px; }

/* --- play creator ------------------------------------------------------------------- */
.app.creator { max-width: 780px; }
.creator .picker { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row label { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.row label select { min-width: 0; max-width: 100%; }
.row #name { flex: 1; min-width: 140px; }
.check { color: var(--text) !important; }
.check input { min-height: auto; }
.seg { display: inline-flex; }
.seg button { border-radius: 0; }
.seg button:first-child { border-radius: 8px 0 0 8px; }
.seg button:last-child { border-radius: 0 8px 8px 0; }
.seg button.on { background: var(--accent); color: #111; border-color: var(--accent); }
.creator-stage canvas { display: block; touch-action: none; border-radius: 10px; }
.mode-bar { position: absolute; left: 8px; right: 8px; top: 8px; background: rgba(0, 0, 0, 0.75); padding: 6px 10px; border-radius: 8px; font-size: 0.85rem; }
.mode-bar button { min-height: 28px; padding: 2px 8px; margin-left: 6px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.panel-head { display: flex; gap: 8px; align-items: baseline; }
.muted { color: var(--muted); font-size: 0.85rem; }
.cmds { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.cmds li { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.cmds li.warn { color: #f97316; font-size: 0.85rem; list-style: none; margin-left: -20px; }
.cmd-tools button { min-height: 28px; padding: 0 8px; }
.palette { display: flex; flex-direction: column; gap: 6px; }
.pal-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pal-group .muted { width: 100%; }
.pal-group button { min-height: 32px; padding: 4px 10px; }
.sub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sub label { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.status { min-height: 1.2em; font-size: 0.85rem; color: #86efac; }
.status.bad { color: #f97316; }

/* --- gameplan editor ------------------------------------------------------------------- */
.buckets { display: flex; flex-direction: column; gap: 8px; }
.buckets summary { cursor: pointer; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .cols { grid-template-columns: 1fr; } }
.cmds input[type="number"] { width: 3.6rem; min-height: 28px; padding: 2px 6px; }
.buckets select { margin-top: 4px; max-width: 100%; }

/* --- league pages ---------------------------------------------------------------- */
.app.league { max-width: 900px; }
.league-head h2 { margin: 6px 0 2px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.tabs a, .chip { color: var(--text); text-decoration: none; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); font-size: 0.9rem; }
.tabs a.on, .chip.on { background: var(--accent); color: #111; border-color: var(--accent); }
.chip { padding: 3px 8px; font-size: 0.8rem; }
table.standings { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 0.85rem; }
table.standings th { background: linear-gradient(#3a3a3a, #111); color: #fff; text-align: left; padding: 5px 6px; font-weight: 700; }
table.standings td { padding: 3px 6px; border-bottom: 1px solid var(--border); }
table.standings tr.div td { background: rgba(255, 255, 255, 0.08); font-weight: 700; font-style: italic; }
table.standings a, .games a, .bracket a, .team-head a { color: #93c5fd; text-decoration: none; }
.games { list-style: none; padding: 0; }
.games li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.games .won, .bracket .won { font-weight: 700; }
.games .box { margin-left: 8px; font-size: 0.8rem; }
.small { font-size: 0.75rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 600px) { .grid2 { grid-template-columns: 1fr; } }
.bracket { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; overflow-x: auto; }
.bracket .round { display: flex; flex-direction: column; justify-content: space-around; gap: 8px; }
.bracket .match { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; font-size: 0.85rem; }
.injury { color: #f97316; font-size: 0.75rem; }
.team-head h2 { margin: 0 0 4px; }

/* --- coach admin ------------------------------------------------------------------ */
.userbar { flex-direction: row; }
.coach-card h3 { margin: 0; }
.attr { display: grid; grid-template-columns: 90px 1fr 28px; gap: 6px; align-items: center; font-size: 0.85rem; margin: 3px 0; }
.meter { height: 10px; background: #1e3a1e; border-radius: 6px; overflow: hidden; }
.meter div { height: 100%; background: linear-gradient(90deg, #3f8f2f, #6cc04a); }
.open { color: #facc15; }
form.perm { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 8px 0; }
form.perm label { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); max-width: 420px; }
form.perm input[type="number"] { width: 5rem; }
.perm-group { background: #b91c1c; color: #fff; font-weight: 700; padding: 2px 8px; border-radius: 6px; margin-top: 6px; max-width: 420px; }
.staff-box td:first-child { font-weight: 700; }

/* Team Admin: letter grades */
.bad { color: #f97316; }
td.grade { font-weight: 600; text-align: center; }
.g-A { color: #4ade80; }
.g-B { color: #a3e635; }
.g-C { color: #facc15; }
.g-D { color: #fb923c; }
.g-F { color: #f87171; }
.g-\? { color: var(--muted, #888); }
table.roster td, table.roster th { padding: 3px 5px; }
td .meter { display: inline-block; width: 80px; vertical-align: middle; }

[hidden] { display: none !important; }
ul.hub li { margin: 6px 0; }

/* ======================================================================================
   Site theme (looks like the current site): green striped field, gray content area,
   white cards with yellow headers, green menus, buttons and dropdowns.
   ====================================================================================== */
:root {
  --panel: #ffffff;
  --border: #c3c3c3;
  --text: #1c1c1c;
  --muted: #5d6b60;
  --accent: #f0c419;
  --link: #2b6a0e;
  color-scheme: light;
}
body {
  color: var(--text);
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%) fixed,
    repeating-linear-gradient(115deg, #24741c 0 9px, #1d6216 9px 18px) fixed;
  min-height: 100vh;
}
a { color: var(--link); }

/* --- site header --- */
header.site { max-width: 1080px; margin: 0 auto; padding: 8px 12px 0; }
.site-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo { display: inline-flex; flex-direction: column; line-height: 0.85; text-decoration: none; transform: rotate(-4deg); }
.logo span { font: 900 30px/0.9 Impact, "Arial Black", sans-serif; letter-spacing: 1px; color: #d7ef4a;
  text-shadow: 2px 2px 0 #0d3b08, -1px -1px 0 #0d3b08, 1px -1px 0 #0d3b08, -1px 1px 0 #0d3b08, 0 4px 6px rgba(0, 0, 0, 0.5); }
.logo span + span { margin-left: 34px; color: #f4f9d0; font-size: 26px; }
.site-user { flex: 1; display: flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; font-size: 0.85rem; flex-wrap: wrap; }
.site-user b { color: #e5f54a; }
.site-user a { color: #fff; text-decoration: none; }
.site-user a:hover { text-decoration: underline; }
.site-user .sep { color: #b7d99c; }
.site-user select { background: transparent; color: #e5f54a; border: 0; font-weight: 700; min-height: 0; padding: 2px; }
.site-user select option { color: #111; background: #fff; }
.site-week { background: linear-gradient(#f3f1d6, #dcd9b0); color: #6f7d00; border-radius: 10px; padding: 6px 12px; font-size: 0.95rem; box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0, 0, 0, 0.4); }
.site-week b { color: #5b6600; }
.site-nav { display: flex; flex-wrap: wrap; margin-top: 8px; background: linear-gradient(#4aa02c, #2b7a17 50%, #17520c); border: 1px solid #0f3f08; border-radius: 6px; padding-left: 24px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.nav-item { position: relative; }
.nav-item > a, .nav-item > .soon { display: block; color: #fff; font-weight: 700; font-size: 0.82rem; padding: 7px 10px; text-decoration: none; border-left: 1px solid rgba(0, 0, 0, 0.35); border-right: 1px solid rgba(255, 255, 255, 0.18); }
.nav-item > .soon { opacity: 0.6; cursor: default; }
.nav-item > a:hover { background: rgba(255, 255, 255, 0.15); }
.nav-drop { display: none; position: absolute; left: 0; top: 100%; z-index: 20; min-width: 170px; background: #fff; border: 1px solid #0f3f08; border-radius: 0 0 6px 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.nav-item:hover .nav-drop, .nav-item:focus-within .nav-drop { display: block; }
.nav-drop a { display: block; padding: 6px 12px; color: #1d4d0d; text-decoration: none; font-weight: 600; font-size: 0.85rem; }
.nav-drop a:hover { background: #e6f2d8; }

/* --- the content area --- */
.app { background: #cfcfcf; border-radius: 8px; margin: 8px auto 24px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
.app.league { max-width: 1080px; }
.league-head h2, .team-head h2 { color: #1f3d12; }
.panel { background: #fff; border: 1px solid #b9b9b9; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.panel > h3:first-child, .card-title { margin: -10px -10px 2px; padding: 5px 10px; text-align: center; color: #fff; font-size: 1.05rem;
  background: linear-gradient(#f5d43f, #e2b40f); border-radius: 8px 8px 0 0; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); }
.panel > h3:first-child a, .card-title a { color: #fff; }
.panel.blue > h3:first-child { background: linear-gradient(#78a6cf, #4f82b1); }

/* --- controls --- */
select, input, button { color: var(--text); background: #fff; border: 1px solid #9ca39d; border-radius: 6px; }
select { background: linear-gradient(#5db62a, #3f8f1e); color: #fff; border-color: #2c6b14; font-weight: 600; }
select option, select optgroup { background: #fff; color: #111; }
button { background: linear-gradient(#64bd30, #3a8a18); color: #fff; border-color: #24600f; font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
button:hover { filter: brightness(1.08); border-color: #24600f; }
button:disabled { filter: grayscale(0.8); opacity: 0.6; cursor: default; }
button.primary, .seg button.on { background: linear-gradient(#f8dc4c, #dcae10); color: #3b2c00; border-color: #a77f00; text-shadow: none; }
.tabs a, .chip { background: linear-gradient(#64bd30, #3a8a18); color: #fff; border: 1px solid #24600f; font-weight: 700; }
.tabs a.on, .chip.on { background: linear-gradient(#f8dc4c, #dcae10); color: #3b2c00; border-color: #a77f00; }
.row label, .sub label, .seed label, form.perm label { color: #33402f; }
.check { color: var(--text) !important; }

/* --- tables and lists --- */
table.standings { background: #fff; border: 1px solid #b0b0b0; }
table.standings th { background: linear-gradient(#4a4a4a, #0d0d0d); color: #fff; font-style: italic; letter-spacing: 0.2px; }
table.standings td { border-bottom: 1px solid #dadada; }
table.standings tbody tr:nth-child(even) td { background: #f3f3f3; }
table.standings tr.div td { background: #e4ecd9 !important; }
table.standings a, .games a, .bracket a, .team-head a, .back { color: var(--link); }
.games li, .pbp li { border-bottom-color: #d4d4d4; }
.bracket .match { background: #fff; border-color: #b9b9b9; }
.report { background: #fff; border: 1px solid #c4c4c4; color: #111; }
.pbp li a:hover { background: #eef5e6; }
.pbp .flag { color: #a16207; }
.pbp .miss, .injury { color: #c2410c; }

/* --- status, grades, meters --- */
.status { color: #166534; font-weight: 600; }
.status.bad, .bad { color: #c2410c; }
.open { color: #b45309; font-weight: 700; }
.muted { color: var(--muted); }
.g-A { color: #15803d; } .g-B { color: #4d7c0f; } .g-C { color: #a16207; } .g-D { color: #c2410c; } .g-F { color: #b91c1c; }
.meter { background: #dfe7d6; border: 1px solid #b9c7ad; }

/* --- the play viewer and creator keep their dark field --- */
.result, .mode-bar { color: #fff; }
.log li { color: #8a8a8a; }
.log li.past { color: var(--text); }
.log li.current { background: #e2efd3; }

/* --- home page --- */
.hero { display: grid; grid-template-columns: 200px 1fr; gap: 16px; background: linear-gradient(#cfe03a, #bccd22); border: 1px solid #8a9a10; border-radius: 6px; padding: 16px; color: #1c1c1c; }
.hero h1 { margin: 0 0 8px; color: #1c5e12; font-size: 1.5rem; }
.hero p { margin: 6px 0; }
.hero .helmet { font: 900 56px/1 Impact, sans-serif; color: #5d6a0c; text-align: center; align-self: center; }
.hero .helmet small { display: block; font: 600 14px/1.3 system-ui, sans-serif; color: #2b6a0e; margin-top: 8px; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; background: #3d4a3a; border-radius: 6px; padding: 14px 18px; color: #e5f54a; }
.features h3 { color: #fff; text-align: center; margin: 4px 0 8px; }
.features ul { margin: 0; padding-left: 18px; }
.features li { margin: 6px 0; }
.dash { display: grid; grid-template-columns: 280px 1fr; gap: 10px; align-items: start; }
.dash .side, .dash .main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.coach-mini { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; margin: 4px 0; }
.badge { width: 64px; height: 64px; border-radius: 6px; border: 2px solid #222; background: radial-gradient(circle, #f0f0f0, #9a9a9a); display: grid; place-items: center; font: 800 9px/1.1 system-ui; color: #555; text-align: center; }
.badge.hired { background: radial-gradient(circle, #f6e58a, #c9a20f); color: #4a3b00; }
@media (max-width: 760px) {
  .hero, .dash, .features { grid-template-columns: 1fr; }
  .site-week { width: 100%; }
}

/* --- home: hiring page / team home (three columns like the current site) --- */
.dash3 { display: grid; grid-template-columns: 260px minmax(0, 1fr) 260px; gap: 10px; align-items: start; }
.dash3 > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dash3:has(> div:last-child:empty) { grid-template-columns: 260px minmax(0, 1fr); }
.dash3 > div:empty { display: none; }
.badge.team { background: #fff; color: #b91c1c; font: 900 15px/1 Impact, sans-serif; border-color: #222; box-shadow: inset 0 0 0 4px #b91c1c; }
.iconbar { flex-direction: row; justify-content: space-around; flex-wrap: wrap; border-color: #4f82b1; border-width: 3px; }
.iconbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; padding: 6px 4px; border-radius: 4px; color: #2b5a0e; text-decoration: none; font-size: 0.75rem; }
.iconbar a:nth-child(even) { background: #ececec; }
.iconbar a span { font-size: 1.8rem; line-height: 1; filter: grayscale(0.4); }
.iconbar a:hover { background: #e2efd3; }
.greenbar { display: block; width: 100%; text-align: center; background: linear-gradient(#56ab25, #3a8a18); color: #fff; border: 1px solid #2c6b14; border-radius: 6px; padding: 5px 10px; font-weight: 600; min-height: 0; }
.dash3 .panel.blue table.standings { margin: 0; }
@media (max-width: 900px) { .dash3 { grid-template-columns: 1fr !important; } }

/* playbook: the formation bar */
.formbar { background: linear-gradient(#f5d43f, #e2b40f); border-radius: 6px; padding: 6px 8px; }

/* practice page (like the old one) */
.prac-top { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: start; }
.sessbox table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.sessbox th { background: #111; color: #fff; text-align: left; padding: 2px 6px; font-style: italic; }
.sessbox td { padding: 2px 6px; color: #2b6a0e; font-weight: 600; }
.sessbox td + td { text-align: right; color: #111; }
h3.bluehead, .panel > h3.bluehead:first-child { background: linear-gradient(#78a6cf, #4f82b1); }
button.link { background: none; border: 0; color: var(--link); text-shadow: none; min-height: 0; padding: 2px 6px; font-weight: 600; }
button.link.on { color: #111; text-decoration: underline; }
.subnav { display: flex; gap: 18px; background: #555; border-radius: 6px; padding: 6px 14px; }
.subnav a, .subnav span { color: #fff; font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.subnav span { color: #e5f54a; }
@media (max-width: 700px) { .prac-top { grid-template-columns: 1fr; } }

/* the play viewer: wide enough for the whole field */
.app.viewer-app { max-width: 820px; }
.viewer-app #field { height: min(78vh, 125vw); }

/* play creator: the field big on the left (like PSE's), the tools and the lineup stacked on the right */
.app.creator.creator3 { max-width: 1560px; }
.creator-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: 'stage tools' 'stage lineup'; gap: 10px; align-items: start; }
.creator-grid > .creator-stage { grid-area: stage; }
.creator-grid > .tools-side { grid-area: tools; position: static; max-height: none; }
.creator-grid > .lineup-side { grid-area: lineup; position: static; max-height: none; }
.creator-grid > * { min-width: 0; }
.tools-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow-y: auto; }
.lineup-side { position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow-y: auto; }
.lineup-side > h3:first-child { background: linear-gradient(#78a6cf, #4f82b1); }
table.lineup { font-size: 0.78rem; margin: 4px 0 8px; }
table.lineup td { padding: 2px 4px; }
table.lineup td.slot { font-weight: 700; white-space: nowrap; }
table.lineup tr[data-lslot] { cursor: pointer; }
table.lineup tr.on td { background: #fff3b0 !important; }
@media (max-width: 1100px) { .creator-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 760px) { .creator-grid { grid-template-columns: 1fr; grid-template-areas: 'stage' 'tools' 'lineup'; } }

/* depth chart board (like the old one) */
.dc-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 10px; align-items: start; }
.dc-grid > * { min-width: 0; }
.dc-slot { display: grid; grid-template-columns: 56px 1fr; gap: 6px; margin: 4px 0; padding: 4px; border-radius: 6px; cursor: pointer; }
.dc-slot.on { background: #fff3b0; }
.dc-label { background: #ddd; border: 1px solid #999; border-radius: 4px; font-weight: 800; padding: 4px; text-align: center; }
.dc-label small { display: block; font-weight: 600; color: #555; }
.dc-list { list-style: none; margin: 0; padding: 0; border: 2px solid #1f5a10; border-radius: 4px; background: #1f5a10; min-height: 30px; }
.dc-p { background: linear-gradient(#3f8f1e, #2c6b14); color: #fff; font-weight: 700; padding: 5px 8px; margin: 2px; border-radius: 3px; cursor: grab; }
.dc-p .muted { color: #cfe8c0; }
.dc-p.first { background: linear-gradient(#5db62a, #3f8f1e); }
.dc-p.sel { background: linear-gradient(#f5a623, #e08a00); }
.dc-list li.muted { background: none; color: #cfe8c0; padding: 6px; }
.dc-tools button { min-height: 28px; padding: 0 10px; }
.pchip { display: inline-block; padding: 2px 10px; border-radius: 4px; cursor: pointer; font-weight: 600; }
.pchip.on { background: linear-gradient(#5db62a, #3f8f1e); color: #fff; }
.pchip:not(.on) { color: #1c1c1c; }
.ok { color: #c2410c; }
.coachcell { white-space: nowrap; color: #555; }
.dc-table td { padding: 2px 4px; }
.dc-table td.dc-name { white-space: nowrap; }
button.tabbtn { min-height: 26px; padding: 0 10px; font-size: 0.8rem; }
button.tabbtn.on { background: linear-gradient(#8b5cf6, #6d28d9); border-color: #4c1d95; }
@media (max-width: 900px) { .dc-grid { grid-template-columns: 1fr; } }
.scrollx { overflow-x: auto; }

/* admin player editor */
.edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.edit-grid fieldset { border: 1px solid #c3c3c3; border-radius: 6px; padding: 6px 8px; }
.edit-grid legend { font-weight: 700; color: #1f5a10; }
.edit-grid label { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 0.85rem; margin: 2px 0; }
.edit-grid input { width: 4.5rem; min-height: 28px; padding: 2px 6px; }

/* ======================================================================================
   Matching the current site more closely: Arial, tighter type, flat box colors (blue #598FB9, red #DB2828,
   yellow #ECC731), green drop-down menus, a single-row icon bar and the home timeline.
   ====================================================================================== */
header.site, .app { font-family: Arial, Helvetica, sans-serif; }
.app.league { font-size: 14px; padding-top: 10px; }
.status:empty { display: none; }
.site-nav { min-height: 31px; padding-left: 30px; }
.nav-item > a, .nav-item > .soon { font: 400 12px/31px Arial, Helvetica, sans-serif; padding: 0 9px; }
.nav-drop { background: #3b8a1d; border: 1px solid #000; border-bottom: 0; border-radius: 0; min-width: 200px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); }
.nav-drop a { color: #fff; font: 12px/18px Verdana, Arial, sans-serif; padding: 1px 0 1px 6px; border-bottom: 1px solid #000; }
.nav-drop a:hover { background: #000; color: #fff; }
.site-week { background: #d3d3d3; border-radius: 12px; color: #798300; font-weight: 700; box-shadow: none; }
.site-week b { color: #5b6600; }

/* boxes: a colored frame around white content, the title in white on the frame */
.panel { border-radius: 8px; box-shadow: none; }
.panel.blue, .panel.red, .panel.yellow { border: 4px solid #598fb9; padding-top: 8px; }
.panel.blue > h3:first-child { background: #598fb9; margin: -12px -14px 4px; border-radius: 4px 4px 0 0; font-size: 16px; text-shadow: none; }
.panel.red { border-color: #db2828; }
.panel.red > h3:first-child { background: #db2828; margin: -12px -14px 4px; border-radius: 4px 4px 0 0; font-size: 16px; text-shadow: none; }
.panel.yellow { border-color: #ecc731; }
.panel.yellow > h3:first-child { background: #ecc731; margin: -12px -14px 4px; border-radius: 4px 4px 0 0; font-size: 16px; text-shadow: none; }
.panel > h3:first-child { font-size: 16px; }
table.standings { font: 12px Arial, Helvetica, sans-serif; }
.dash3 .panel.blue table.standings td { padding: 2px 4px; }

/* the icon bar: one row, like the current site */
.iconbar { flex-wrap: nowrap; border: 4px solid #598fb9; padding: 4px; gap: 0; }
.iconbar a { flex: 1; min-width: 0; font-size: 11px; padding: 4px 2px; }
.iconbar a span { font-size: 1.6rem; }

/* the home timeline: next game on top (yellow), what's happened below, what's coming behind the button */
.timeline { display: flex; flex-direction: column; background: #fff; border-radius: 8px; padding: 3px; }
.tl-item { display: grid; grid-template-columns: 54px 1fr; gap: 6px; align-items: end; background: #f2f3f5; border: 1px outset #999; border-radius: 5px; margin: 2px; padding: 5px; color: #336600; font-size: 13px; min-height: 42px; text-decoration: none; }
.tl-item.now { background: #ffff33; }
.tl-item .tl-icon { width: 46px; height: 40px; display: grid; place-items: center; font-size: 30px; line-height: 1; }
.tl-item .tl-icon.team { font: 900 13px/1 Impact, sans-serif; color: #b91c1c; background: #fff; border: 2px solid #222; border-radius: 4px; }
.tl-item b { color: #2b4a00; }
.tl-future { display: none; }
.tl-future.show { display: flex; flex-direction: column; }
.greenbar.next { background: #4aa516; color: #a8e07a; font-weight: 400; }

/* section sub-menus: the dark gray bar under the main menu (SCHEDULE · STANDINGS · ...), like the current site */
.tabs { background: linear-gradient(#5c5c5c, #3d3d3d); border-radius: 6px; padding: 3px 8px; gap: 0; flex-wrap: wrap; }
.tabs a, .tabs a.on { background: none; border: 0; border-radius: 0; color: #fff; font: 400 11px/18px Arial, Helvetica, sans-serif; text-transform: uppercase; padding: 2px 9px; text-shadow: none; }
.tabs a:hover { color: #e5f54a; }
.tabs a.on { color: #a9a9a9; }
/* small selectors (positions, weeks, groups): connected green pills, the picked one white */
.chip { background: #4aa516; color: #fff; border: 0; border-radius: 0; font: 400 11px/16px Arial, Helvetica, sans-serif; padding: 1px 6px; text-shadow: none; }
.chip:first-child { border-radius: 9px 0 0 9px; }
.chip:last-child { border-radius: 0 9px 9px 0; }
.chip.on { background: #fff; color: #2b4a00; border: 0; }
.row:has(> .chip) { gap: 0; }
/* every blue-headed box gets the blue frame */
.panel:has(> h3.bluehead:first-child), .panel.lineup-side { border: 4px solid #598fb9; }
.panel > h3.bluehead:first-child, .lineup-side > h3:first-child { background: #598fb9; margin: -12px -14px 4px; border-radius: 4px 4px 0 0; font-size: 16px; text-shadow: none; }

/* Team Admin pages: sub-menu, playbook box, gameplan two-column (PSE layout) */
.tabs.subnav { margin: 0 0 8px; }
.panel.pbox { border: 4px solid #598fb9; }
.gp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
@media (max-width: 760px) { .gp-grid { grid-template-columns: 1fr; } }
.gp-main, .gp-side > .panel:first-child { border: 4px solid #598fb9; }
.gp-side { position: sticky; top: 8px; display: grid; gap: 10px; }
.gp-pick { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0; }
.gp-pick #name { flex: 1 1 140px; min-width: 0; }
.row.pills { gap: 0; margin: 8px 0 2px; }
.gp-rows { display: grid; gap: 4px; }
.gp-bar { display: flex; width: 100%; gap: 8px; align-items: baseline; background: #4aa516; color: #fff; border: 1px solid #2c6b14; border-radius: 6px; padding: 4px 10px; font: 700 12px/18px Arial, Helvetica, sans-serif; text-align: left; cursor: pointer; min-height: 0; }
.gp-bar:hover { background: #3f9212; }
.gp-hint { font-weight: 400; color: #d6f2bf; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-sum { font-weight: 400; white-space: nowrap; }
.gp-row.hit .gp-bar { background: #ecc731; color: #3b2c00; border-color: #a77f00; }
.gp-row.hit .gp-hint { color: #6b5600; }
.gp-body { display: none; padding: 6px 8px 8px; border: 1px solid #ccc; border-top: 0; border-radius: 0 0 6px 6px; }
.gp-row.open .gp-body { display: block; }
.gp-row.open .gp-bar { border-radius: 6px 6px 0 0; }
.gp-test { display: grid; gap: 6px; background: #e4e4e4; border-radius: 6px; padding: 8px; font-size: 12px; }
.gp-test label { display: flex; gap: 6px; align-items: center; justify-content: space-between; }
.gp-test input[type=range] { flex: 1; }
.gp-test b { min-width: 52px; text-align: right; }
.gp-result h3 { cursor: pointer; text-align: center; }
.gp-result table.standings { margin: 0; font-size: 12px; }
.gp-result td:last-child, .gp-result th:last-child { text-align: right; }

/* League and coach pages: no page title (the sub-menu is the header); PSE coach card and job search */
.league-head:has(> .subnav:first-child) .subnav, .league-head .subnav { margin-top: 0; }
.formbar + .panel { margin-top: 8px; }
.coach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px; }
.coach-top { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.coach-badge { flex: none; width: 64px; height: 64px; border: 2px solid #555; border-radius: 6px; display: grid; place-items: center; background: radial-gradient(#d9d9d9, #8f8f8f); color: #fff; font: 900 22px/1 Arial, sans-serif; text-shadow: 0 1px 2px #000; }
.coach-badge.off { font-size: 9px; letter-spacing: 0.5px; }
.coach-name { color: #336600; font-size: 15px; font-weight: 700; text-decoration: none; }
.coach-job { color: #336600; margin: 2px 0; }
.coach-job a { color: #336600; }
.panel.yellow > h3:first-child { color: #fff; text-align: center; }

/* Box score: line score, scoring + team stats side by side, player stat boxes */
.game-controls.formbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.game-controls.formbar label { color: #3b2c00; font-weight: 700; }
.box-head { border: 4px solid #598fb9; }
.box-back { float: right; color: #fff; font-size: 12px; font-weight: 400; }
table.linescore { margin: 0; }
table.linescore td, table.linescore th { text-align: center; }
table.linescore td:first-child, table.linescore th:first-child { text-align: left; }
table.linescore tr.won td { font-weight: 700; }
.box-top { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 10px; align-items: start; }
@media (max-width: 700px) { .box-top { grid-template-columns: 1fr; } }
table.teamstats td:not(:first-child), table.teamstats th:not(:first-child) { text-align: right; }
.nowrap { white-space: nowrap; }
#boxView .grid2 table.standings { margin: 0; }
#boxView .grid2 td:not(:first-child), #boxView .grid2 th:not(:first-child) { text-align: right; }
pre.report { margin: 0; }
#boxView .grid2 { align-items: start; }
table.linescore td:first-child, table.linescore th:first-child { width: 50%; }

/* Play creator: sub-menu, yellow control bar, command box (blue) and save/test box (yellow) */
.creator-bar { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.cbar-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cbar-row label { color: #3b2c00; font-weight: 700; display: flex; gap: 4px; align-items: center; }
.cbar-row #name { flex: 1 1 200px; min-width: 0; }
.cbar-row #template { max-width: 300px; }
.cbar-gap { flex: 1; }
.creator-bar .seg .chip { min-height: 0; padding: 4px 12px; font-size: 12px; font-weight: 700; }
.creator-bar .seg .chip.on { background: #fff; color: #2b4a00; }
.creator-stage { border: 4px solid #2c6b14; border-radius: 10px; background: #2c6b14; }
.save-box > h3:first-child { color: #fff; text-align: center; }

/* Practice page, PSE layout: framed session counter + practice type boxes, practices with a button column, results below */
#who { margin: 4px 0 8px; }
.prac-top { grid-template-columns: 290px 1fr; margin-bottom: 10px; }
.prac-top > .panel { border: 4px solid #598fb9; margin: 0; }
.sessbox { padding: 6px; }
.sessbox th { font-size: 11px; padding: 2px 4px; border-right: 1px solid #fff; }
.sessbox td { font-size: 12px; padding: 2px 4px; }
.sessbox td:nth-child(2) { border-right: 1px solid #d4d4d4; }
.sessbox td.short { color: #c2410c; }
.sessbox tr td.no-limit { color: #b45309; border-right: 0; }
.prac-list { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; align-items: start; }
.prac-btns { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.prac-btns .greenbar { text-decoration: none; font-size: 12px; cursor: pointer; }
.prac-btns .greenbar:disabled { opacity: 0.5; cursor: default; }
table.standings tr.sel td { background: #fff7c2 !important; }
@media (max-width: 700px) { .prac-list { grid-template-columns: 1fr; } .prac-btns { flex-direction: row; } }
.prac-top { grid-template-columns: 250px 1fr; }
.sessbox td, .sessbox td + td { text-align: left; color: #2b6a0e; }
.sessbox td:nth-child(even) { text-align: right; color: #111; }
.ptype .row { flex-wrap: wrap; }
.ptype #pPlay, .ptype #pVs { flex: 1 1 160px; min-width: 0; max-width: 100%; }

/* Scouting: yellow control bar, upcoming opponents (left) and the report (right) */
.scout-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.scout-bar label { color: #3b2c00; font-weight: 700; display: flex; gap: 4px; align-items: center; }
.scout-bar #scoutOpp { max-width: 280px; }
.scout-limit { color: #5b4700; margin-left: auto; }
.scout-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 10px; align-items: start; }
.scout-grid > .panel { margin: 0; }
@media (max-width: 760px) { .scout-grid { grid-template-columns: 1fr; } }
.scout-grid .ok { color: #2b6a0e; font-weight: 700; }
.scout-grid .grid2 { align-items: start; }
.scout-grid td.prep { white-space: nowrap; }
.scout-grid td.prep .meter { display: inline-block; width: 70px; vertical-align: middle; }

/* Film Room: film library (left), the picked film's play-by-play (right) */
.film-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 10px; align-items: start; }
.film-grid > .panel { margin: 0; }
@media (max-width: 760px) { .film-grid { grid-template-columns: 1fr; } }
.film-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.film-stat { flex: 1 1 80px; background: #f2f3f5; border: 1px outset #999; border-radius: 5px; padding: 4px 6px; text-align: center; }
.film-stat b { display: block; font-size: 18px; color: #1f3d12; }
.film-stat span { font-size: 11px; color: #555; }
.film-grid td.f-good { color: #2b6a0e; font-weight: 700; }
.film-grid td.f-bad { color: #c2410c; font-weight: 700; }
.film-grid .chip { display: inline-block; text-decoration: none; }
.film-grid table.standings a.chip { color: #fff; }

/* Depth chart, PSE look: narrow Depth Chart box, gray group tabs on Players, compact grade table */
.dc-grid { grid-template-columns: 290px minmax(0, 1fr); }
.dc-grid > .panel { margin: 0; }
.dc-grid #dcGroup, .dc-grid #dcFormation { flex: 1 1 100%; width: 100%; }
button.tabbtn { background: #f2f3f5; color: #000; border: 1px solid #999; border-radius: 3px; min-height: 0; min-width: 48px; padding: 2px 8px; font: 400 11px/16px Arial, Helvetica, sans-serif; text-shadow: none; box-shadow: none; }
button.tabbtn:hover { background: #e2e4e8; }
button.tabbtn.on { background: #598fb9; border-color: #3f6f96; color: #fff; font-weight: 700; }
.dc-grid .row:has(> .tabbtn) { gap: 3px; align-items: center; }
.dc-grid [data-dceval] { margin-left: auto; min-height: 0; padding: 3px 10px; font-size: 12px; }
.dc-table { font-size: 11px; }
.dc-table th, .dc-table td { padding: 2px 3px; }
.dc-table th { font-size: 10px; }
.dc-table .pchip { padding: 1px 6px; font-size: 11px; }
.dc-table td.coachcell { white-space: nowrap; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.dc-p { padding: 3px 7px; font-size: 13px; }

/* Roster, PSE look: compact rows, short Eval column, Roster Summary box on the right */
.roster-grid { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 10px; align-items: start; }
.roster-grid > .panel { margin: 0; }
/* (Narrow: one column, and a roster wider than the screen scrolls inside its panel — never the whole page sideways.) */
@media (max-width: 900px) { .roster-grid { grid-template-columns: minmax(0, 1fr); } .roster-grid > .panel { overflow-x: auto; } }
.roster-table { font-size: 12px; }
.roster-table th, .roster-table td { padding: 2px 4px; }
.roster-table th { font-size: 11px; }
.roster-table select[data-pos] { min-height: 0; height: 20px; padding: 0 18px 0 6px; font-size: 11px; line-height: 18px; border-radius: 4px; background-position: right 4px center; }
/* Edit Roster (PSE's look): bold green names, centered small columns, the grade card under a player. */
.roster-table td.pname { font-weight: 700; }
.roster-table td:not(.pname) { text-align: center; }
.roster-table td.tm { font-weight: 700; font-size: 11px; }
.roster-table td.evalc { white-space: nowrap; }
.roster-table td.evalc .grade { display: inline-block; min-width: 1.8em; }
.evalnum { font-weight: 700; color: #1f4f13; }
.roster-table td.evalc .evalnum { display: inline-block; min-width: 2em; text-align: right; margin-right: 6px; }
.eval-btn { min-height: 0; height: 18px; padding: 0 4px; margin-left: 4px; font-size: 11px; line-height: 16px; border-radius: 4px; }
.eval-btn.on { background: #facc15; }
tr.eval-card > td { background: #f4f8ef; text-align: left !important; padding: 4px 8px; }
/* Edit ratings (the commissioner's testing switch): the button beside a player, and his ratings in a row under him. */
.rate-btn { min-height: 0; height: 18px; padding: 0 6px; margin-left: 4px; font-size: 11px; line-height: 16px; border-radius: 4px; white-space: nowrap; }
.rate-btn.on { background: #facc15; }
/* On a phone it's two short lines ("Edit / ratings"): on one it pushes the roster past the screen's edge. */
@media (max-width: 520px) { .rate-btn { height: auto; padding: 1px 4px; margin-left: 0; line-height: 12px; white-space: normal; } }
.rate-form .row { align-items: center; margin: 4px 0; }
.eval-strip { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 11px; margin-bottom: 2px; }
.eval-attr b { margin-left: 2px; }
.roster-counts { font-size: 12px; margin-left: 8px; }
.roster-counts b { margin-left: 2px; }
.roster-side table.standings { font-size: 12px; margin-bottom: 6px; }
.roster-side td, .roster-side th { padding: 2px 4px; text-align: center; }
.roster-side td:first-child, .roster-side th:first-child { text-align: left; }
.roster-side tr.total td { font-weight: 700; border-top: 2px solid #999; }

/* Playoff bracket: four rounds plus the champion; each match centered between the two it comes from */
.pbracket { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)) 130px; gap: 0 18px; overflow-x: auto; padding-bottom: 4px; }
.pr { display: flex; flex-direction: column; min-width: 0; }
.pr h4 { margin: 0 0 6px; text-align: center; background: #4aa516; color: #fff; border-radius: 9px; font: 700 11px/18px Arial, Helvetica, sans-serif; text-transform: uppercase; }
.pr-games { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 6px; }
.pm { position: relative; background: #f2f3f5; border: 1px outset #999; border-radius: 5px; padding: 3px 5px; font-size: 12px; }
.pm-empty { opacity: 0.75; }
.pm-team { display: grid; grid-template-columns: 18px minmax(0, 1fr) 24px; gap: 4px; align-items: center; line-height: 18px; }
.pm-team + .pm-team { border-top: 1px solid #d4d4d4; }
.pm-seed { font-size: 10px; color: #666; text-align: right; }
.pm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-team b { text-align: right; }
.pm-team.won { font-weight: 700; }
.pm-team.won .pm-name a { color: #1f3d12; }
.pm-team.lost { color: #888; }
.pm-team.lost a { color: #888; }
.pm-site { font-size: 10px; color: #777; border-top: 1px dotted #ccc; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* connector stubs: out of each match to the right, into each later-round match from the left */
.pr:not(.pr-4):not(.pr-champ) .pm::after, .pr-4 .pm::after { content: ''; position: absolute; right: -10px; top: 50%; width: 9px; border-top: 2px solid #598fb9; }
.pr-2 .pm::before, .pr-3 .pm::before, .pr-4 .pm::before { content: ''; position: absolute; left: -10px; top: 50%; width: 9px; border-top: 2px solid #598fb9; }
.pchamp { background: #ffff33; border: 2px solid #a77f00; border-radius: 6px; padding: 10px 6px; text-align: center; font-weight: 700; font-size: 13px; }
.pchamp a { display: block; color: #1f3d12; margin-top: 2px; }
.pm a, .pchamp a { text-decoration: none; }
.pchamp { font-size: 26px; line-height: 1.1; } .pchamp a { font-size: 13px; } .pchamp .muted { font-size: 13px; }

/* Rankings: week bar, ranking table with movement, notes on the right */
.rank-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rank-bar label { color: #3b2c00; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.rank-bar .chip { text-decoration: none; }
.rank-grid { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 10px; align-items: start; }
.rank-grid > .panel { margin: 0; }
@media (max-width: 800px) { .rank-grid { grid-template-columns: 1fr; } }
.rank-table { font-size: 12px; }
.rank-table td, .rank-table th { padding: 2px 5px; }
.rank-table td.rk { font-weight: 700; text-align: right; width: 24px; }
.mv-up { color: #2b6a0e; font-weight: 700; }
.mv-down { color: #c2410c; font-weight: 700; }
.mv-new { background: #ecc731; color: #3b2c00; border-radius: 3px; padding: 0 4px; font-size: 10px; font-weight: 700; }
.rank-side b.small { display: block; margin: 6px 0 2px; color: #1f3d12; }
.rank-side table.standings { margin-top: 8px; font-size: 12px; }
.rank-side td, .rank-side th { padding: 2px 4px; }

/* Stats: category pills + conference in the yellow bar; leader boards; sortable full tables */
.stats-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.stats-bar label { color: #3b2c00; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.stats-bar .chip { text-decoration: none; }
.leader-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; align-items: start; }
.leader-grid > .panel { margin: 0; }
.leader-box table.standings { font-size: 12px; margin: 0 0 4px; }
.leader-box td { padding: 2px 4px; }
.leader-box td.rk, .stat-table td.rk { width: 18px; text-align: right; color: #666; }
.leader-box td.val { text-align: right; font-weight: 700; }
.leader-box tr.lead td { background: #fff7c2 !important; font-weight: 700; }
.leader-box a.more { color: #336600; }
.stat-table { font-size: 12px; }
.stat-table td, .stat-table th { padding: 2px 5px; }
.stat-table th a { color: #fff; text-decoration: none; }
.stat-table th.on { background: #598fb9; }
.stat-table td.on { font-weight: 700; background: #eef5fb; }
.stat-table td:nth-child(n+4), .stat-table th:nth-child(n+4) { text-align: right; }

/* Awards: season bar, the top award featured in yellow, a card for every other trophy */
.awards-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.awards-bar label { color: #3b2c00; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.awards-bar .small { color: #5b4700; }
.aw-feature { display: flex; gap: 16px; align-items: center; background: linear-gradient(#fff9c4, #ffec5c); border: 4px solid #ecc731; border-radius: 8px; padding: 12px 18px; margin-bottom: 10px; }
.aw-cup { font-size: 54px; line-height: 1; }
.aw-title { font: 900 22px/1.1 Arial, Helvetica, sans-serif; color: #3b2c00; }
.aw-feature .aw-name { font-size: 20px; }
.aw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.aw-grid > .panel { margin: 0; }
.aw-card { text-align: center; }
.aw-note { font-size: 11px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.aw-name { font-size: 16px; font-weight: 700; color: #1f3d12; }
.aw-who { font-size: 12px; color: #555; margin: 2px 0; }
.aw-who a { color: #336600; }
.aw-line { font-size: 12px; font-weight: 700; color: #2b4a00; background: #f2f3f5; border-radius: 4px; display: inline-block; padding: 2px 8px; margin-top: 2px; }
.aw-tbd { color: #888; font-style: italic; padding: 8px 0; }

/* Coach pages: account info bar, coach card (badge | contract & career | attributes), quieter commissioner strip */
.infobar { background: #d3d3d3; border-radius: 12px; color: #5b6600; font-size: 12px; padding: 4px 12px; margin: 0 0 10px; display: inline-block; }
.infobar b { color: #3d4500; }
.coach-card { border: 4px solid #598fb9; }
.coach-card > h3.bluehead a { color: #fff; text-decoration: none; }
.coach-body { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
@media (max-width: 760px) { .coach-body { grid-template-columns: 1fr; } }
.coach-id { text-align: center; }
.coach-id .coach-badge { margin: 4px auto 6px; width: 76px; height: 76px; font-size: 26px; }
.coach-id .coach-badge.off { font-size: 10px; }
.coach-id .coach-job { font-weight: 700; margin-bottom: 4px; }
.coach-card table.kv { border-collapse: collapse; width: 100%; font-size: 12px; margin-bottom: 8px; }
.coach-card table.kv th { text-align: left; color: #555; font-weight: 400; padding: 2px 6px 2px 0; width: 80px; white-space: nowrap; }
.coach-card table.kv td { font-weight: 700; padding: 2px 0; border-bottom: 1px solid #eee; }
.coach-card .kv-title { font-weight: 700; color: #1f3d12; font-size: 12px; text-transform: uppercase; margin-bottom: 2px; }
.coach-card .attr { grid-template-columns: 82px 1fr 24px; font-size: 12px; margin: 2px 0; }
.coach-card .meter { height: 8px; border-radius: 4px; }
.coach-apps { font-size: 12px; margin-bottom: 6px; }
.coach-apps button { min-height: 0; padding: 0 8px; font-size: 11px; }
.coach-card .row .chip { text-decoration: none; }
.cand-table { font-size: 12px; }
.cand-table td, .cand-table th { padding: 2px 5px; }
.cand-table button { min-height: 0; padding: 2px 12px; font-size: 12px; }
.panel.userbar { background: #ececec; border: 1px dashed #999; box-shadow: none; padding: 4px 8px; font-size: 12px; gap: 6px; }
.panel.userbar select, .panel.userbar input, .panel.userbar button { min-height: 0; height: 24px; font-size: 11px; padding-top: 0; padding-bottom: 0; }
.coach-info .row button { min-height: 0; padding: 3px 14px; font-size: 12px; }

/* Scores & schedule: week pills + filter in the yellow bar, games as score cards */
.sched-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sched-weeks { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sched-weeks b, .sched-bar label { color: #3b2c00; font-weight: 700; }
.sched-bar label { display: flex; gap: 6px; align-items: center; }
.sched-bar .chip { text-decoration: none; min-width: 14px; text-align: center; }
.sched-count { font-weight: 400; font-size: 13px; }
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.gcard { background: #f2f3f5; border: 1px outset #999; border-radius: 5px; padding: 4px 6px 3px; font-size: 13px; }
.gc-team { display: grid; grid-template-columns: 22px minmax(0, 1fr) 28px; gap: 4px; align-items: center; line-height: 20px; }
.gc-team + .gc-team { border-top: 1px solid #d4d4d4; }
.gc-rk { font-size: 10px; color: #b45309; font-weight: 700; text-align: right; }
.gc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #666; }
.gc-name a { color: #336600; text-decoration: none; }
.gc-rec { font-size: 10px; color: #888; }
.gc-team b { text-align: right; font-size: 14px; }
.gc-team.won .gc-name a, .gc-team.won b { color: #1f3d12; font-weight: 700; }
.gc-team.lost .gc-name a, .gc-team.lost b { color: #888; font-weight: 400; }
.gc-foot { display: flex; gap: 6px; align-items: center; font-size: 10px; color: #666; border-top: 1px dotted #ccc; margin-top: 2px; padding-top: 2px; }
.gc-foot > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-foot a { color: #336600; font-weight: 700; text-decoration: none; }
.gc-tag { background: #598fb9; color: #fff; border-radius: 3px; padding: 0 4px; font-weight: 700; }
.gc-tag.riv { background: #db2828; }
.gcard.final .gc-foot b { color: #111; }

/* Replay viewer: situation in the yellow bar, field (left) with the transport under it, The Play + Play Log (right) */
.app.viewer-app { max-width: 1180px; }
.viewer-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.viewer-bar .back { color: #3b2c00; font-weight: 700; font-size: 13px; white-space: nowrap; }
.viewer-bar .situation { flex: 1 1 300px; opacity: 1; color: #3b2c00; font-size: 13px; font-weight: 700; }
.viewer-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; align-items: start; }
.viewer-field .stage { border: 4px solid #2c6b14; border-radius: 10px; background: #2c6b14; }
.viewer-app #field { height: calc(100vh - 235px); min-height: 360px; border-radius: 6px; }
.viewer-field .transport { background: #e4e4e4; border: 1px solid #c4c4c4; border-radius: 6px; padding: 4px 6px; margin-top: 6px; }
.viewer-field .transport button, .viewer-field .transport select { min-height: 0; padding: 3px 10px; }
.viewer-side { display: grid; gap: 10px; position: sticky; top: 8px; }
.viewer-side > .panel { margin: 0; border: 4px solid #598fb9; }
.viewer-side table.kv { border-collapse: collapse; width: 100%; font-size: 12px; margin-bottom: 6px; }
.viewer-side table.kv th { text-align: left; color: #555; font-weight: 400; padding: 2px 6px 2px 0; width: 64px; vertical-align: top; }
.viewer-side table.kv td { font-weight: 700; padding: 2px 0; border-bottom: 1px solid #eee; }
.viewer-side .toggles { font-size: 12px; }
.viewer-side .log { max-height: calc(100vh - 420px); min-height: 160px; border-top: 0; padding-top: 0; font-size: 12px; }
@media (max-width: 860px) { .viewer-grid { grid-template-columns: 1fr; } .viewer-side { position: static; } .viewer-app #field { height: min(78vh, 125vw); } }
.viewer-bar select { width: auto; flex: 1 1 180px; min-width: 0; }
.viewer-bar .seed { display: flex; gap: 6px; align-items: center; flex: none; }
.viewer-bar .seed label { color: #3b2c00; font-weight: 700; }
.viewer-bar .seed input { width: 70px; }

/* Home: even icon bar; conference standings under the timeline; Top 10 on the right; your team highlighted */
.iconbar a:nth-child(even) { background: none; }
.iconbar a:hover { background: #e2efd3; }
.home-conf table.standings, .home-top table.standings { font-size: 12px; margin-bottom: 4px; }
.home-conf td, .home-conf th, .home-top td { padding: 2px 4px; }
.home-conf td:not(:first-child), .home-conf th:not(:first-child) { text-align: center; }
.home-conf small { color: #b45309; font-weight: 700; }
.home-top td.rk { width: 18px; text-align: right; font-weight: 700; }
.dash3 tr.me td { background: #fff7c2 !important; font-weight: 700; }
.home-conf a.small, .home-top a.small { color: #336600; }

/* Gameplan situations: run/pass split, then compact play tables (play · formation · weight · chance) */
.gp-split { display: flex; gap: 8px; align-items: center; margin: 2px 0 6px; font-size: 12px; }
.gp-split input[type=range] { flex: 1; max-width: 260px; }
.gp-split b { color: #1f3d12; }
.gp-body input[type=range], .gp-test input[type=range] { accent-color: #4aa516; }
.gp-table { font-size: 12px; margin: 0 0 2px; }
.gp-table td, .gp-table th { padding: 2px 4px; }
.gp-table td:nth-child(n+3), .gp-table th:nth-child(n+3) { text-align: center; width: 44px; }
.gp-table td:last-child, .gp-table th:last-child { width: 22px; }
.gp-table input[type=number] { width: 40px; min-height: 0; height: 20px; padding: 0 2px; font-size: 12px; text-align: center; }
.gp-table td.gp-ch { font-weight: 700; color: #1f3d12; }
.gp-x { min-height: 0; height: 18px; width: 18px; padding: 0; font-size: 12px; line-height: 16px; }
.gp-add { min-height: 0; height: 22px; font-size: 11px; padding: 0 20px 0 6px; margin: 0 0 8px; max-width: 100%; }
.gp-body, .gp-body .gp-split span { color: #111; } .gp-table td:first-child { color: #111; }

/* Depth chart slots: a small framed list per slot (dark header), numbered rows with the staff's OVR grade */
.dc-slot { display: block; padding: 0; margin: 6px 0; border: 1px solid #b9b9b9; border-radius: 4px; background: #fff; overflow: hidden; }
.dc-slot.on { border-color: #d4a514; box-shadow: 0 0 0 2px #ecc731; }
.dc-label { background: linear-gradient(#555, #2e2e2e); color: #fff; border: 0; border-radius: 0; font: 700 11px/18px Arial, Helvetica, sans-serif; padding: 0 6px; text-align: left; text-transform: uppercase; }
.dc-label small { display: inline; color: #ddd; font-weight: 400; margin-left: 4px; text-transform: none; }
.dc-list { border: 0; border-radius: 0; background: none; min-height: 22px; }
.dc-p { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 24px; gap: 4px; align-items: center; background: none; color: #111; font-weight: 400; font-size: 12px; padding: 2px 6px; margin: 0; border-radius: 0; border-top: 1px solid #eee; }
.dc-p:first-child { border-top: 0; }
.dc-p.first { background: #e8f5dc; font-weight: 700; }
.dc-p.sel { background: #fde68a; }
.dc-p .dc-n { color: #888; font-size: 10px; text-align: right; }
.dc-p .dc-pn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-p .dc-meta { font-size: 10px; color: #777; font-weight: 400; white-space: nowrap; }
.dc-p .dc-g { text-align: center; font-weight: 700; }
.dc-list li.muted { color: #999; padding: 3px 6px; }

/* Practice, second pass: hours meter (the home page's Daily Planner), compact rows */
.hours-meter { height: 8px; background: #dfe7d6; border: 1px solid #b9c7ad; border-radius: 4px; overflow: hidden; margin: 6px 2px 2px; }
.hours-meter div { height: 100%; background: linear-gradient(90deg, #3f8f2f, #6cc04a); }
.hours-meter.full div { background: linear-gradient(90deg, #d4a514, #ecc731); }
.hours-text { font-size: 11px; color: #555; text-align: center; }
.prac-list table.standings { font-size: 12px; }
.prac-list table.standings td, .prac-list table.standings th { padding: 3px 5px; }

/* Roster, second pass: sortable headers (click a column), size columns */
.roster-table th a { color: #fff; text-decoration: none; }
.roster-table th.on { background: #598fb9; }
.roster-table td.sz { color: #555; white-space: nowrap; }

/* Scouting, second pass: opponent records in the list; a snapshot strip atop the report */
.scout-grid small.rk { color: #b45309; font-weight: 700; }
.scout-snap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 2px 0 6px; }
.scout-snap > div { background: #f2f3f5; border: 1px outset #999; border-radius: 5px; padding: 3px 4px; text-align: center; }
.scout-snap b { display: block; font-size: 16px; color: #1f3d12; }
.scout-snap span { font-size: 10px; color: #555; }
.scout-recent { margin: 0 0 8px; color: #333; }
.scout-recent a { color: #336600; font-weight: 700; }
@media (max-width: 700px) { .scout-snap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Film room, second pass: filter pills, a By play breakdown; Prev / Next in the viewer */
.film-pills { gap: 0; margin: 6px 0; }
.film-pills .chip { text-decoration: none; }
.film-byplay { margin: 4px 0; font-size: 12px; }
.film-byplay summary { cursor: pointer; color: #336600; font-weight: 700; }
.film-byplay table.standings { font-size: 12px; margin: 4px 0; }
.film-byplay td:not(:first-child), .film-byplay th:not(:first-child) { text-align: right; }
.film-nav { display: flex; gap: 10px; align-items: center; font-size: 13px; color: #3b2c00; white-space: nowrap; }
.film-nav a { color: #1f3d12; font-weight: 700; text-decoration: none; background: #fff8; border-radius: 9px; padding: 1px 8px; }
.film-nav span { color: #a08a3c; }

/* Play creator, second pass: the command palette as framed groups of small gray buttons; a compact lineup */
.palette { gap: 6px; }
.pal-group { gap: 3px; border: 1px solid #b9b9b9; border-radius: 4px; padding: 0 4px 4px; background: #fff; overflow: hidden; }
.pal-group > span.muted { flex: 0 0 calc(100% + 8px); width: auto; margin: 0 -4px 2px; background: linear-gradient(#555, #2e2e2e); color: #fff; font: 700 11px/18px Arial, Helvetica, sans-serif; padding: 0 6px; text-transform: uppercase; opacity: 1; }
.pal-group button { min-height: 0; padding: 2px 9px; background: #f2f3f5; color: #1f3d12; border: 1px solid #999; border-radius: 3px; font: 700 12px/18px Arial, Helvetica, sans-serif; text-shadow: none; box-shadow: none; }
.pal-group button:hover { background: #e2efd3; border-color: #4aa516; }
.cmd-box .cmds li { font-size: 12px; background: #f2f3f5; border-radius: 4px; padding: 2px 4px; }
.cmd-box .cmd-tools button { min-height: 0; height: 20px; width: 20px; padding: 0; font-size: 11px; line-height: 18px; }
.lineup-side table.lineup { font-size: 11px; }
.lineup-side table.lineup td { padding: 2px 3px; vertical-align: middle; }
.lineup-side a.lu-edit { color: #336600; text-decoration: none; font-size: 12px; }
.lineup-side .lu-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lineup-side .lu-keys { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 10px; color: #444; }
.lineup-side .lu-keys span { white-space: nowrap; }
.lineup-side table.lineup td:last-child { text-align: center; font-weight: 700; width: 30px; }
.lineup-side .lu-name .muted { font-size: 10px; }

/* Playbook, second pass: plays (left) with filters, type, gameplan use; the formation diagram (right) */
.pb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; align-items: start; margin-top: 8px; }
.pb-grid > .panel { margin: 0; }
@media (max-width: 820px) { .pb-grid { grid-template-columns: 1fr; } }
.pb-filter { gap: 0; margin: 8px 0 4px; }
.pb-filter .chip { min-height: 0; cursor: pointer; }
.pb-table { font-size: 12px; }
.pb-table td, .pb-table th { padding: 3px 5px; }
.pb-table th a { color: #fff; }
.pb-run, .pb-pass, .pb-tag { display: inline-block; border-radius: 3px; padding: 0 5px; font-size: 10px; font-weight: 700; line-height: 15px; }
.pb-run { background: #e8f5dc; color: #2b6a0e; border: 1px solid #9ccc7a; }
.pb-pass { background: #e6f0fa; color: #2b5a8a; border: 1px solid #98b8d8; }
.pb-tag { background: #f2f3f5; color: #555; border: 1px solid #ccc; font-weight: 400; }
.pb-on { font-weight: 700; color: #1f3d12; }
.pb-side { border: 4px solid #598fb9; }
.fm-svg { display: block; width: 100%; height: auto; margin: 2px 0 6px; }
.fm-field { fill: #2e7d32; }
.fm-yard { stroke: #ffffff40; stroke-width: 1; }
.fm-los { stroke: #4fa3ff; stroke-width: 2; }
.fm-ball { fill: #8b4513; }
.fm-off { fill: #b91c1c; stroke: #fff; stroke-width: 1.5; }
.fm-def { fill: #fff; stroke: #1c1c1c; stroke-width: 1.5; }
.fm-svg text { font: 700 6.5px Arial, Helvetica, sans-serif; text-anchor: middle; }
.fm-svg g:has(.fm-off) text { fill: #fff; }
.fm-svg g:has(.fm-def) text { fill: #111; }
.fm-pers { margin-bottom: 2px; }

/* Standings, second pass: percentages and point differential; your team highlighted; a snapshot beside one conference */
.stand-grid { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 10px; align-items: start; }
.stand-grid > .panel { margin: 0; }
@media (max-width: 820px) { .stand-grid { grid-template-columns: 1fr; } }
.stand-table { font-size: 12px; }
.stand-table td, .stand-table th { padding: 2px 5px; }
.stand-table td:not(:first-child), .stand-table th:not(:first-child) { text-align: center; }
.stand-table td.pct { color: #666; font-size: 11px; }
.stand-table td.up { color: #2b6a0e; font-weight: 700; }
.stand-table td.down { color: #c2410c; }
table.standings tr.me td { background: #fff7c2 !important; font-weight: 700; }
.stand-side table.kv { border-collapse: collapse; width: 100%; font-size: 12px; margin-bottom: 6px; }
.stand-side table.kv th { text-align: left; color: #555; font-weight: 400; padding: 3px 6px 3px 0; vertical-align: top; width: 84px; }
.stand-side table.kv td { padding: 3px 0; border-bottom: 1px solid #eee; }
.stand-side b.small { display: block; margin: 6px 0 2px; color: #1f3d12; }
.gcard.mine { border: 2px solid #ecc731; box-shadow: 0 0 0 1px #a77f00; }

/* Small framed boxes with a dark header (staff, gameplan, schedule, jobs filled) — same look as the depth chart slots */
.mini-box { border: 1px solid #b9b9b9; border-radius: 4px; background: #fff; padding: 0 6px 6px; overflow: hidden; margin-bottom: 8px; }
.mini-h { margin: 0 -6px 4px; background: linear-gradient(#555, #2e2e2e); color: #fff; font: 700 11px/18px Arial, Helvetica, sans-serif; padding: 0 6px; text-transform: uppercase; }
.mini-box table.standings { font-size: 12px; margin: 0 0 4px; }
.mini-box table.standings td, .mini-box table.standings th { padding: 2px 4px; }
.mini-box select, .mini-box button, .mini-box input { min-height: 0; height: 24px; font-size: 12px; padding-top: 0; padding-bottom: 0; }
.mini-box .row { gap: 4px; flex-wrap: wrap; margin: 2px 0 4px; }
.mini-box a.small { color: #336600; }

/* Coach pages, second pass: My Teams (a strip, staff left, gameplan + schedule right); Job Search (filters, compact list, Jobs Filled) */
.team-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; font-size: 12px; }
.team-strip span { background: #f2f3f5; border: 1px outset #999; border-radius: 5px; padding: 2px 8px; }
.team-strip b { color: #1f3d12; }
.team-adm .row .chip { text-decoration: none; }
.adm-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; align-items: start; }
@media (max-width: 760px) { .adm-grid { grid-template-columns: 1fr; } }
.adm-grid details { font-size: 12px; margin: 4px 0; }
.adm-grid details summary { cursor: pointer; color: #336600; font-weight: 700; }
.adm-grid [data-terminate] { min-height: 0; height: 20px; font-size: 11px; padding: 0 6px; }
.jobs-filters label { font-size: 13px; }
.jobs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 10px; align-items: start; margin-top: 6px; }
@media (max-width: 760px) { .jobs-grid { grid-template-columns: 1fr; } }
.jobs-table { font-size: 12px; }
.jobs-table td, .jobs-table th { padding: 2px 5px; }
.jobs-table button { min-height: 0; height: 20px; padding: 0 10px; font-size: 11px; }
.jobs-table .ok { color: #2b6a0e; font-weight: 700; }
.team-adm > p.row { margin: 0 0 8px; }

/* Stat tiles (shared look with the scouting snapshot) */
.tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tiles > div { background: #f2f3f5; border: 1px outset #999; border-radius: 5px; padding: 3px 4px; text-align: center; }
.tiles b { display: block; font-size: 16px; color: #1f3d12; }
.tiles span { font-size: 10px; color: #555; }
@media (max-width: 700px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Team page, second pass: colored results; position pills */
.your-team { background: #ecc731; color: #3b2c00; border-radius: 9px; padding: 0 8px; font-size: 11px; vertical-align: middle; }
.team-sched { font-size: 12px; }
.team-sched td, .team-sched th { padding: 3px 5px; }
.team-sched tr.next td { background: #fff7c2 !important; }
.team-sched .res-w { color: #2b6a0e; }
.team-sched .res-l { color: #c2410c; }
.team-sched .res-next { background: #ecc731; color: #3b2c00; border-radius: 3px; padding: 0 5px; font-size: 10px; font-weight: 700; }
.team-pos { gap: 0; margin: 2px 0 6px; flex-wrap: wrap; }
.team-pos .chip { text-decoration: none; }
.team-roster { font-size: 12px; }
.team-roster td, .team-roster th { padding: 2px 5px; }

/* Box score, second pass: scoreboard header, game leaders, stat bars, play-by-play quarters and scoring plays */
.sb { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; margin: 2px 0 8px; }
.sb-side { display: flex; align-items: center; gap: 10px; }
.sb-side.right { justify-content: flex-end; text-align: right; }
.sb-mark { flex: none; width: 54px; height: 44px; display: grid; place-items: center; font: 900 15px/1 Impact, 'Arial Black', sans-serif; color: #b91c1c; background: #fff; border: 3px solid #222; border-radius: 6px; }
.sb-name { min-width: 0; font-size: 15px; font-weight: 700; line-height: 1.25; }
.sb-name a { color: #1f3d12; text-decoration: none; }
.sb-name span { display: block; font-size: 11px; font-weight: 400; color: #555; }
.sb-name small { display: block; font-size: 10px; font-weight: 400; color: #888; text-transform: uppercase; }
.sb-score { font: 900 34px/1 Arial, Helvetica, sans-serif; color: #1f3d12; margin-left: auto; }
.sb-side.right .sb-score { margin-left: 0; margin-right: auto; }
.sb-side.lost .sb-score, .sb-side.lost .sb-name a { color: #888; }
.sb-mid { text-align: center; }
.sb-mid b { display: block; background: #2e2e2e; color: #fff; border-radius: 4px; padding: 2px 10px; font-size: 12px; letter-spacing: 1px; }
.sb-mid span { display: block; font-size: 10px; color: #666; margin-top: 2px; }
.gl { gap: 0 16px; }
.gl-team { font-weight: 700; color: #1f3d12; border-bottom: 2px solid #598fb9; margin-bottom: 4px; }
.gl table.kv { width: 100%; border-collapse: collapse; font-size: 12px; }
.gl table.kv th { text-align: left; color: #555; font-weight: 400; width: 72px; vertical-align: top; padding: 3px 4px 3px 0; }
.gl table.kv td { padding: 3px 0; border-bottom: 1px solid #eee; }
table.teamstats .cmp { display: flex; height: 4px; margin-top: 2px; border-radius: 2px; overflow: hidden; background: #ddd; }
table.teamstats .cmp i { background: #598fb9; }
table.teamstats .cmp b { background: #4aa516; }
table.teamstats thead th:nth-child(2) { color: #a9c8e6; }
table.teamstats thead th:nth-child(3) { color: #9be07a; }
.pbp li.qhdr { background: linear-gradient(#555, #2e2e2e); color: #fff; font: 700 11px/18px Arial, Helvetica, sans-serif; text-transform: uppercase; padding: 1px 8px; border-radius: 3px; margin-top: 6px; border-bottom: 0; }
.pbp li.scoring { border-left: 4px solid #ecc731; background: #fffbe0; }
.pbp.only-scoring li:not(.scoring):not(.qhdr) { display: none; }
#pbpFilter { gap: 0; margin: 0 0 6px; }
#pbpFilter .chip { min-height: 0; cursor: pointer; }
@media (max-width: 640px) { .sb-mark { display: none; } .sb-score { font-size: 26px; } }
#boxView .gl table.kv td, #boxView .gl table.kv th { text-align: left; }

/* Replay viewer, second pass: keys hint, clickable log lines, who's who */
.keys-hint { font-size: 10px; color: #666; text-align: center; margin-top: 3px; }
.viewer-side .log li { cursor: pointer; }
.viewer-side .log li:hover { background: #eef5e6; }
.who-box summary { cursor: pointer; color: #336600; font-weight: 700; font-size: 12px; }
.who-box table.who { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 4px; }
.who-box table.who th { text-align: left; background: #2e2e2e; color: #fff; padding: 1px 6px; text-transform: uppercase; font-size: 10px; }
.who-box table.who td { padding: 1px 4px; border-bottom: 1px solid #eee; }
.who-box table.who td:nth-child(2) { color: #b91c1c; font-weight: 700; white-space: nowrap; }

/* Home, third pass: Around the League (left), team tiles, scout link on the next-game bar, planner hours */
.tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles.two b { font-size: 15px; }
.panel.blue > h3 a.plain { color: #fff; text-decoration: none; }
.greenbar.next .scout-link { color: #fff; font-weight: 700; margin-left: 8px; text-decoration: underline; }
.home-news .news-game { position: relative; display: block; text-decoration: none; background: #f2f3f5; border: 1px outset #999; border-radius: 5px; padding: 2px 6px; margin: 4px 0; font-size: 12px; color: #444; }
.home-news .news-game:hover { background: #e2efd3; }
.home-news .nw { display: flex; justify-content: space-between; gap: 6px; line-height: 17px; }
.home-news .nw span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-news .nw small { color: #b45309; font-weight: 700; }
.home-news .nw.won { font-weight: 700; color: #1f3d12; }
.home-news .upset { position: absolute; top: 50%; right: 34px; transform: translateY(-50%); background: #db2828; color: #fff; font-size: 9px; font-weight: 700; border-radius: 3px; padding: 0 4px; }
.home-news a.small { color: #336600; }

/* Gameplan, third pass: settings in framed boxes, a mini run/pass bar per situation, the plan your team uses */
.gp-settings .set-kv { width: 100%; border-collapse: collapse; font-size: 12px; }
.gp-settings .set-kv th { text-align: left; font-weight: 700; color: #333; width: 150px; padding: 4px 6px 4px 0; vertical-align: middle; }
.gp-settings .set-kv td { padding: 4px 0; border-bottom: 1px solid #eee; }
.gp-settings .set-kv input[type=number] { width: 60px; }
.gp-settings .set-kv input[type=range] { accent-color: #4aa516; vertical-align: middle; }
.gp-mini { flex: none; width: 46px; height: 6px; border-radius: 3px; background: #2b5a8a; overflow: hidden; align-self: center; }
.gp-mini i { display: block; height: 100%; background: #a8e07a; }
.in-use { margin: 2px 0 4px; color: #333; }
.in-use a { color: #336600; }

/* League Admin: the clock as tiles over the advance buttons; the player editor with a team picker */
.admin-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 8px; }
.admin-adv { gap: 6px; margin-bottom: 4px; }
pre.admin-log { max-height: 220px; overflow: auto; font-size: 11px; margin-top: 6px; }
pre.admin-log:empty { display: none; }
.admin-roster { font-size: 12px; }
.admin-roster td, .admin-roster th { padding: 2px 5px; }
/* Testing switches (each with what it does under it) and Assign a Team (the picked team's seats) */
label.test-switch { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: baseline; margin: 6px 0; max-width: 760px; }
label.test-switch span { grid-column: 2; }
.assign-box { max-width: 600px; margin-top: 6px; }
.assign-staff { width: 100%; }
.assign-staff td:last-child { text-align: right; }

/* Home for a coach without a job: compact Job Search; applied jobs as chips */
.home-jobs .applied { margin: 4px 0; }
.home-jobs .applied-job { display: inline-block; background: #f2f3f5; border: 1px solid #ccc; border-radius: 9px; padding: 0 2px 0 8px; margin: 2px 2px 0 0; }
.home-jobs .applied-job button { min-height: 0; height: 16px; width: 16px; padding: 0; font-size: 10px; line-height: 14px; border-radius: 8px; }
.coach-mini .badge.off { font-size: 7.5px; letter-spacing: 0; }

/* Team page, PSE layout: the team sub-menu joined under the league one; a gold banner holding three dark panels
   (the team, Team Capsule, Current Staff); then Scores & Schedule | Standings | Statistical Averages + Quick Leaders */
.app.league:has(.team-subnav) #tabs { margin-bottom: 0; border-radius: 6px 6px 0 0; }
.tabs.subnav.team-subnav { margin: -10px 0 10px; border-radius: 0 0 6px 6px; border-top: 1px solid #2a2a2a; padding-left: 22px; }
.team-banner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: #ecc731; border: 1px solid #a77f00; border-radius: 6px; padding: 6px; margin-bottom: 10px; }
.tb-panel { min-width: 0; background: #231f20; color: #fff; border: 1px solid #5a5a5a; border-radius: 6px; padding: 8px 12px; }
.tb-panel h4 { margin: 0 0 6px; text-align: center; font: 700 17px/1.2 Arial, Helvetica, sans-serif; color: #fff; }
.tb-team { display: flex; gap: 10px; align-items: flex-start; }
.tb-id { flex: 1; min-width: 0; }
.tb-name { font: 400 24px/1.15 Impact, 'Arial Black', sans-serif; letter-spacing: 0.5px; overflow-wrap: break-word; }
.tb-rank { color: #ecc731; }
.tb-rec { white-space: nowrap; }
.tb-conf { margin: 12px 0 6px; font: 400 20px/1.2 Impact, 'Arial Black', sans-serif; letter-spacing: 0.5px; }
.tb-conf span { font-size: 15px; color: #c9c9c9; }
.tb-note { margin-top: 4px; font-size: 12px; color: #d4d4d4; }
.tb-note a { color: #ffff99; text-decoration: none; }
.tb-note a:hover { text-decoration: underline; }
.tb-logo { flex: none; width: 104px; height: 92px; margin-top: 4px; display: grid; place-items: center; background: #fff; color: #b91c1c; border: 4px solid #ecc731; border-radius: 10px; box-shadow: inset 0 0 0 3px #222; font: 400 30px/1 Impact, 'Arial Black', sans-serif; letter-spacing: 1px; }
.cap-row { display: grid; grid-template-columns: 98px minmax(0, 150px); gap: 6px; align-items: center; font: 700 13px/17px Arial, Helvetica, sans-serif; }
.cap-bar { height: 13px; border-radius: 7px; background: #1d4d0d; border: 1px solid #0b2604; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); overflow: hidden; }
.cap-bar i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(#86d651, #3f9a1c); }
.cap-row.off { color: #7d7d7d; }
.cap-row.off .cap-bar { background: #2f2f2f; border: 1px dashed #5e5e5e; box-shadow: none; }
.tb-staff table { border-collapse: collapse; font: 13px/1.45 Arial, Helvetica, sans-serif; }
.tb-staff th { text-align: left; font-weight: 700; padding: 0 10px 0 0; white-space: nowrap; vertical-align: top; }
.tb-staff td, .tb-staff a { color: #ffff99; text-decoration: none; }
.tb-staff a:hover { text-decoration: underline; }
.team-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px; align-items: start; }
.team-col { min-width: 0; }
.team-col h3 { margin: 0 0 2px; text-align: center; font: 700 16px/1.3 Arial, Helvetica, sans-serif; color: #1c1c1c; }
.team-col table.standings { margin: 0 0 10px; }
.team-col table.standings td, .team-col table.standings th { padding: 2px 4px; }
.team-col td.ico-cell { width: 20px; text-align: center; }
.team-col a.ico { display: inline-block; line-height: 0; vertical-align: middle; }
table.team-stand td:not(:first-child), table.team-stand th:not(:first-child), table.team-avg td, table.team-avg th { text-align: center; }
table.team-avg th { line-height: 1.1; }
.team-quick td:last-child { white-space: nowrap; }
.team-col a.more { display: block; margin: -6px 0 10px; color: #336600; }
.team-leaders .grid2 { align-items: start; }
/* narrower: a smaller logo; schedule | standings, with the averages and leaders side by side under them */
@media (max-width: 1000px) {
  .tb-logo { width: 76px; height: 68px; font-size: 22px; }
  .tb-name { font-size: 21px; }
  .tb-conf { font-size: 18px; }
  .team-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-col-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; align-items: start; }
}
@media (max-width: 700px) {
  .team-banner, .team-cols, .team-col-stats { grid-template-columns: minmax(0, 1fr); }
}

/* Practice, PSE pass: the Practice Type box (type first, its controls after), the Practice Chart beside the Players
   box (dark green boards, OFF/DEF and group tabs, a yellow bar on each spot), the Practices table with type icons */
.prac-top { grid-template-columns: 250px minmax(0, 1fr); }
.ptype { gap: 4px; min-width: 0; }
.prow { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.prow > b { color: #111; font-size: 15px; }
.ptype select { min-height: 0; height: 24px; padding: 0 6px; border-radius: 10px; font: 400 14px/22px Arial, Helvetica, sans-serif; max-width: 100%; min-width: 0; }
.ptype #pType { flex: 0 1 240px; }
.ptype #pPlay, .ptype #pVs { flex: 1 1 170px; max-width: 240px; }
.ptype #pPlay { border: 2px solid #1d4d0d; }
.back-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(#63c431, #3f9b1b); color: #fff; border: 1px solid #2c6b14; border-radius: 8px; padding: 4px 14px; font: 400 15px/20px Arial, Helvetica, sans-serif; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.back-btn:hover { filter: brightness(1.08); }
.back-btn i { position: relative; width: 15px; height: 15px; border-radius: 50%; background: #fff; flex: none; }
.back-btn i::before { content: ''; position: absolute; left: 4px; top: 3.5px; border-style: solid; border-width: 4px 5px 4px 0; border-color: transparent #3f9b1b transparent transparent; }
.sched-btn { min-height: 0; padding: 1px 6px; border-radius: 8px; border: 2px solid #1d4d0d; font: 400 14px/18px Arial, Helvetica, sans-serif; text-shadow: none; }
.film-pill { min-height: 0; padding: 1px 6px; border-radius: 11px; background: #4aa516; border: 1px solid #2c6b14; color: #fff; font: italic 400 14px/18px Arial, Helvetica, sans-serif; text-shadow: none; }
.film-pill.on { background: linear-gradient(#f8dc4c, #dcae10); color: #3b2c00; border-color: #a77f00; font-weight: 700; }
.prow .reps { display: inline-flex; gap: 4px; align-items: center; color: #111; }
.prow .reps input { width: 64px; min-height: 0; height: 24px; padding: 0 4px 0 8px; border-radius: 12px; background: #1f6510; color: #fff; border: 1px solid #0f3f08; font: 400 14px Arial, Helvetica, sans-serif; }
.prow .reps.dim { opacity: 0.55; }
.prow .runby { color: #33402f; font-size: 12px; gap: 4px; display: inline-flex; align-items: center; }
.prow .runby select { height: 22px; font-size: 12px; }
.prow .reps input:disabled { cursor: default; }
.prow > b.prac-closed { color: #b42318; font-size: 14px; }

.pc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.pc-grid > .panel { margin: 0; min-width: 0; }
.pc-board { background: linear-gradient(#3c8a1d, #1f6510 34px); border: 1px solid #154a0a; border-radius: 10px; padding: 6px 10px 10px; }
.pc-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.pc-tab { display: inline-block; min-height: 0; min-width: 34px; padding: 4px 8px; border: 0; border-radius: 6px 6px 0 0; background: #5cb82b; color: #fff; font: 400 14px/18px Arial, Helvetica, sans-serif; text-align: center; text-shadow: none; box-shadow: none; }
.pc-tab.on { background: #fff; color: #1c1c1c; }
.pc-tab.off { opacity: 0.75; cursor: default; }
button.pc-tab:hover { filter: brightness(1.1); }
.pc-row { display: grid; grid-template-columns: 52px 8px minmax(0, 1fr); gap: 0 10px; align-items: center; width: 100%; min-height: 0; margin: 0 0 6px; padding: 6px 10px; background: #1f6510; border: 1px solid #5f9c42; border-radius: 0; color: #fff; text-align: left; text-shadow: none; box-shadow: none; font: 400 15px/20px Arial, Helvetica, sans-serif; }
.pc-row:last-child { margin-bottom: 0; }
.pc-row:hover { background: #276f15; filter: none; }
.pc-row b { font-size: 20px; font-weight: 400; white-space: nowrap; }
.pc-bar { width: 8px; height: 24px; border-radius: 1px; background: linear-gradient(90deg, #fff7a8, #ecd21c); border: 1px solid #a28d00; }
.pc-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-empty { color: #a8d58e; }
.pc-row.sel { background: #2f7d18; border-color: #ecc731; box-shadow: inset 0 0 0 2px #ecc731; }
.pc-hurt { display: inline-block; background: #db2828; color: #fff; border-radius: 3px; padding: 0 4px; font-size: 10px; font-weight: 700; line-height: 15px; vertical-align: middle; }
.pl-btns { display: flex; gap: 8px; margin: 0 0 2px; }
.pl-btns button { min-height: 0; min-width: 58px; padding: 1px 12px; border-radius: 9px; background: linear-gradient(#63c431, #3f9b1b); border: 2px solid #1d4d0d; color: #fff; font: 400 15px/18px Arial, Helvetica, sans-serif; text-shadow: none; }
.pl-btns button.on { border-color: #ecc731; }
table.pl-table { width: 100%; border-collapse: collapse; font: 13px Arial, Helvetica, sans-serif; color: #fff; }
.pl-table th { background: #000; color: #fff; text-align: left; font: 700 12px/16px Arial, Helvetica, sans-serif; padding: 1px 4px; }
.pl-table td { padding: 2px 4px; vertical-align: middle; }
.pl-table td:first-child { white-space: nowrap; }
.pl-btn { min-height: 0; max-width: 100%; padding: 2px 10px; border-radius: 6px; background: linear-gradient(#63c431, #45a51d); border: 1px solid #2c6b14; color: #fff; font: 400 14px/18px Arial, Helvetica, sans-serif; text-shadow: none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.pl-table tr.on .pl-btn { background: linear-gradient(#f8dc4c, #dcae10); color: #3b2c00; border-color: #a77f00; }
.pl-spot { display: inline-block; margin-left: 6px; background: #ecc731; color: #3b2c00; border-radius: 3px; padding: 0 4px; font-size: 10px; font-weight: 700; line-height: 15px; vertical-align: middle; }
.pl-table .pc-hurt { margin-left: 4px; }
.pl-eval { font-weight: 700; }
.pl-none { color: #cfe8c0; padding: 6px 4px; }
@media (max-width: 760px) { .pc-grid { grid-template-columns: minmax(0, 1fr); } }

/* Week: over its number (PSE), a small select when there are past weeks to look at */
.prac-week { display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 4px; font-size: 15px; line-height: 18px; color: #111; }
.prac-week span { font-weight: 700; }
.prac-week select { min-height: 0; height: 22px; padding: 0 4px; font-size: 13px; border-radius: 4px; }
.prac-table td { color: #2b6a0e; }
.prac-table td.pfilm a { color: #1f5f9e; text-decoration: underline; }
.prac-table td.ptick { width: 22px; text-align: center; }
.prac-table td.ptick input { min-height: 0; width: 14px; height: 14px; margin: 0; padding: 0; vertical-align: middle; }
.prac-table td.ptype-cell { white-space: nowrap; }
.prac-table td.ptype-cell b { color: #2b6a0e; font-size: 14px; }
.prac-table td.ptype-cell a { text-decoration: none; }
.prac-table td.pstat { color: #2b6a0e; font-weight: 700; }
.prac-table td.pcoach { color: #556b00; }
i.clip { display: inline-block; width: 11px; height: 14px; margin-right: 6px; vertical-align: -2px; border: 1px solid #333; border-radius: 1px; background: repeating-linear-gradient(#fff 0 2px, #555 2px 3px) 2px 3px / 6px 9px no-repeat, #fff; box-shadow: inset 0 2px 0 #333; }
.results-table td:nth-child(n+2), .results-table th:nth-child(n+2) { text-align: left; }
@media (max-width: 700px) {
  .prac-top { grid-template-columns: minmax(0, 1fr); }
  .back-btn { padding: 3px 10px; }
  .pc-row b { font-size: 17px; }
  .pc-row { grid-template-columns: 44px 8px minmax(0, 1fr); gap: 0 8px; font-size: 14px; }
  /* The Practices list fits a phone without scrolling sideways: Coach and Status give way, the tick boxes stay */
  .prac-table .pcoach, .prac-table .pstat { display: none; }
}
/* Back sits in the Practice Type box's top-right corner (PSE), on a phone too */
.ptype { position: relative; }
.ptype .back-btn { position: absolute; top: 8px; right: 10px; margin: 0; }
.ptype-head { padding-right: 104px; min-height: 30px; }
@media (max-width: 480px) {
  .pc-board { padding: 6px 6px 8px; }
  .pl-table td:first-child { white-space: normal; }
  .pl-btn { max-width: 150px; font-size: 13px; padding: 2px 8px; }
  .pl-table td, .pl-table th { padding: 2px 3px; }
}

/* Live games (step 11): the LIVE badge in the header, the toasts (an incoming Play now, the one you sent, a game of
   yours that kicked off), the game buttons on schedules and the home bar, LIVE tags on the score cards */
.site-live { display: flex; flex-wrap: wrap; gap: 6px; }
.site-live:empty { display: none; }
.site-live a { display: inline-flex; align-items: center; gap: 6px; background: #db2828; color: #fff; border: 1px solid #8f1414; border-radius: 12px; padding: 4px 10px; font: 700 12px/16px Arial, Helvetica, sans-serif; text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.site-live a:hover { filter: brightness(1.1); }
.site-live a b { background: #fff; color: #db2828; border-radius: 3px; padding: 0 4px; font-size: 10px; animation: lpc-pulse 1.4s ease-in-out infinite; }
@keyframes lpc-pulse { 50% { opacity: 0.4; } }
.lpc-toasts { position: fixed; right: 12px; bottom: 12px; z-index: 50; display: flex; flex-direction: column; gap: 8px; width: 300px; max-width: calc(100vw - 24px); font: 13px/1.35 Arial, Helvetica, sans-serif; }
.lpc-toast { position: relative; gap: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
.lpc-toast > h3:first-child { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; padding-right: 28px; }
.lpc-toast p { margin: 0; }
.lpc-toast .row { gap: 6px; }
.lpc-toast button:not(.lpc-x) { min-height: 0; padding: 3px 14px; }
.lpc-toast a.lpc-btn { font-size: 12px; padding: 3px 12px; }
.lpc-x { position: absolute; top: -4px; right: 0; min-height: 0; padding: 0 6px; background: none; border: 0; color: #fff; font: 700 18px/26px Arial, Helvetica, sans-serif; text-shadow: none; }
.lpc-x:hover { background: none; filter: none; color: #111; }
.lpc-left { font-weight: 700; color: #b45309; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .lpc-toasts { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: none; } }
/* the buttons pages put where a game is (data-lpc-game): small pills; Join (live) in red */
[data-lpc-game] { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; vertical-align: middle; }
[data-lpc-game]:empty { display: none; }
.lpc-btn, .gc-foot a.lpc-btn { display: inline-block; min-height: 0; padding: 0 8px; border-radius: 9px; background: linear-gradient(#64bd30, #3a8a18); color: #fff; border: 1px solid #24600f; font: 700 11px/16px Arial, Helvetica, sans-serif; text-decoration: none; text-shadow: none; white-space: nowrap; }
.lpc-btn.primary { background: linear-gradient(#f8dc4c, #dcae10); color: #3b2c00; border-color: #a77f00; }
.lpc-btn.go, .gc-foot a.lpc-btn.go { background: #db2828; border-color: #8f1414; color: #fff; }
.greenbar .lpc-btn:not(.go) { background: linear-gradient(#f8dc4c, #dcae10); color: #3b2c00; border-color: #a77f00; }
.lpc-wait { font-size: 11px; color: #555; white-space: nowrap; }
.greenbar .lpc-wait, .greenbar .lpc-wait .lpc-left { color: #fff; }
.live-tag, table.standings a.live-tag { display: inline-block; background: #db2828; color: #fff; border-radius: 3px; padding: 0 4px; font: 700 10px/15px Arial, Helvetica, sans-serif; text-decoration: none; vertical-align: middle; }
a.live-tag:hover { filter: brightness(1.1); }
.gcard.live { border: 2px solid #db2828; }
.gc-foot .live-tag { margin-right: 2px; }
.team-sched .res-when { margin-left: 4px; font-size: 11px; color: #555; white-space: nowrap; }
.team-sched [data-lpc-game] { margin-left: 4px; }
.greenbar.next .next-when b { color: #fff; }
.greenbar.next [data-lpc-game] { margin-left: 8px; }
/* Coach Admin: Game Time (your preferred kickoff, the team's home kickoff) */
.kick-team { margin: 2px 0 4px; font-size: 12px; }
.kick-team b { font-size: 14px; color: #1f3d12; }
.kick-row label { font-size: 12px; }
/* Playbooks (playbooks.js): a team's saved plays coded by their owner's seat there (HC gold, OC blue, DC red, RC
   purple — the server's SEAT_COLORS, set per play as --own); stock plays stay plain. */
.own-tag { display: inline-block; min-width: 20px; margin-right: 4px; padding: 0 3px; border-radius: 3px; background: var(--own, #777); color: #fff; font: 700 9px/14px Arial, Helvetica, sans-serif; font-style: normal; text-align: center; vertical-align: 1px; text-shadow: none; }
.own-name { color: var(--own); font-weight: 700; }
.own-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 3px 0; color: #333; font-size: 11px; line-height: 16px; }
.own-legend > span { white-space: nowrap; }
.own-legend .stock { color: #777; }
td.own-cell { box-shadow: inset 4px 0 0 var(--own); }