/* ---------------------------------------------------------------- theme: dark arena, ice accents */
:root[data-theme="dark"] {
  --rt-bg: #060c17;
  --rt-surface: rgba(14, 23, 40, .88);
  --rt-surface-2: rgba(20, 32, 54, .92);
  --rt-line: #22324f;
  --rt-ice: #6fd0ff;
  --rt-red: #ff5a5f;
  --rt-amber: #ffc857;
  --pico-background-color: var(--rt-bg);
  --pico-color: #e4ecf7;
  --pico-h1-color: #f4f8ff; --pico-h2-color: #f4f8ff; --pico-h3-color: #e9f0fb;
  --pico-muted-color: #8fa3c0;
  --pico-muted-border-color: var(--rt-line);
  --pico-card-background-color: var(--rt-surface);
  --pico-card-sectioning-background-color: var(--rt-surface-2);
  --pico-card-box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --pico-primary: var(--rt-ice);
  --pico-primary-hover: #a5e3ff;
  --pico-primary-background: #1a8bd1;
  --pico-primary-border: #1a8bd1;
  --pico-primary-hover-background: #23a0ea;
  --pico-primary-hover-border: #23a0ea;
  --pico-primary-inverse: #fff;
  --pico-primary-underline: rgba(111, 208, 255, .45);
  --pico-del-color: var(--rt-red);
  --pico-ins-color: #3ddc97;
  --pico-form-element-background-color: #0c1626;
  --pico-form-element-border-color: #2a3d5e;
  --pico-table-border-color: var(--rt-line);
  --pico-border-radius: .6rem;
}
body {
  background:
    radial-gradient(ellipse 80% 45% at 50% -8%, rgba(111, 208, 255, .16), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(255, 90, 95, .07), transparent 70%),
    var(--rt-bg);
  background-attachment: fixed;
  min-height: 100vh;
}
/* The rink, drawn faintly behind everything. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .16;
  background: url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 850" fill="none"%3E %3Crect x="12" y="12" width="1976" height="826" rx="280" stroke="%23cfe8ff" stroke-width="8"/%3E %3Cline x1="110" y1="60" x2="110" y2="790" stroke="%23ff4d4f" stroke-width="5"/%3E %3Cline x1="1890" y1="60" x2="1890" y2="790" stroke="%23ff4d4f" stroke-width="5"/%3E %3Cline x1="750" y1="12" x2="750" y2="838" stroke="%234da3ff" stroke-width="22"/%3E %3Cline x1="1250" y1="12" x2="1250" y2="838" stroke="%234da3ff" stroke-width="22"/%3E %3Cline x1="1000" y1="12" x2="1000" y2="838" stroke="%23ff4d4f" stroke-width="14" stroke-dasharray="40 14"/%3E %3Ccircle cx="1000" cy="425" r="150" stroke="%234da3ff" stroke-width="6"/%3E %3Ccircle cx="1000" cy="425" r="10" fill="%234da3ff"/%3E %3Cg stroke="%23ff4d4f" stroke-width="6"%3E%3Ccircle cx="310" cy="220" r="150"/%3E%3Ccircle cx="310" cy="630" r="150"/%3E%3Ccircle cx="1690" cy="220" r="150"/%3E%3Ccircle cx="1690" cy="630" r="150"/%3E%3C/g%3E %3Cg fill="%23ff4d4f"%3E%3Ccircle cx="310" cy="220" r="14"/%3E%3Ccircle cx="310" cy="630" r="14"/%3E%3Ccircle cx="1690" cy="220" r="14"/%3E%3Ccircle cx="1690" cy="630" r="14"/%3E%3Ccircle cx="830" cy="220" r="12"/%3E%3Ccircle cx="830" cy="630" r="12"/%3E%3Ccircle cx="1170" cy="220" r="12"/%3E%3Ccircle cx="1170" cy="630" r="12"/%3E%3C/g%3E %3Cpath d="M110 365 a60 60 0 0 1 0 120" fill="%234da3ff" fill-opacity=".5" stroke="%23ff4d4f" stroke-width="4"/%3E %3Cpath d="M1890 365 a60 60 0 0 0 0 120" fill="%234da3ff" fill-opacity=".5" stroke="%23ff4d4f" stroke-width="4"/%3E %3C/svg%3E") center 38vh / min(1500px, 150vw) auto no-repeat;
}
h1, h2 { text-transform: uppercase; letter-spacing: .04em; font-weight: 800; }
h3 { letter-spacing: .02em; }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background: rgba(6, 12, 23, .78); border-bottom: 1px solid var(--rt-line); }
.topbar nav { padding: .2rem 0; }
.topbar ul { gap: .1rem; }
.topbar li { padding-top: .5rem; padding-bottom: .5rem; white-space: nowrap; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  color: #f4f8ff !important; text-decoration: none; }
.brand svg { width: 1.6rem; height: 1.6rem; flex: none; }
.brand b { color: var(--rt-ice); }
.topbar a[aria-current="page"] { color: #fff; text-decoration: underline; text-decoration-color: var(--rt-red); text-decoration-thickness: 2px; text-underline-offset: .4rem; }
.topbar .who { color: var(--pico-muted-color); font-size: .9rem; }
@media (max-width: 700px) {
  .topbar nav { flex-direction: column; align-items: flex-start; }
  .topbar nav ul:last-child { flex-wrap: wrap; margin-top: -.6rem; }
  .topbar li { font-size: .92rem; padding: .35rem .5rem; }
}
main.container { padding-top: 1.5rem; }
article { border: 1px solid var(--rt-line); }
article > header { border-bottom: 1px solid var(--rt-line); }
p[role="alert"] { padding: .6rem .9rem; border-radius: var(--pico-border-radius); background: var(--rt-surface-2); border-left: 4px solid var(--rt-ice); }
p[role="alert"].error { border-left-color: var(--rt-red); }
p[role="alert"].success { border-left-color: var(--pico-ins-color); }
.site-footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--rt-line); font-size: .8rem; color: var(--pico-muted-color); }
.site-footer button { padding: .1rem .5rem; font-size: .75rem; margin: 0; }

.muted { color: var(--pico-muted-color); }
.countdown { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin: 1rem 0 1.5rem; }
.countdown > div { text-align: center; min-width: 5.2rem; padding: .7rem .6rem .5rem; border-radius: .5rem;
  background: linear-gradient(#0a1220, #050910); border: 1px solid #1d2b45; box-shadow: inset 0 0 18px rgba(0, 0, 0, .8), 0 6px 20px rgba(0, 0, 0, .4); }
.countdown .num { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: var(--rt-amber); text-shadow: 0 0 12px rgba(255, 200, 87, .55); font-variant-numeric: tabular-nums; }
.countdown .lbl { margin-top: .35rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pico-muted-color); }
.grid-divs { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.rank-list { list-style: none; padding: 0; margin: 0; }
.rank-list li { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; margin-bottom: .3rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
  background: rgba(8, 15, 27, .75); }
.rank-list li .pos { width: 1.4rem; text-align: right; color: var(--pico-muted-color); font-variant-numeric: tabular-nums; }
.rank-list li img { width: 28px; height: 28px; }
.rank-list li .name { flex: 1; }
.rank-list li .btns { display: flex; gap: .2rem; }
.rank-list li .btns button { padding: 0 .5rem; margin: 0; font-size: .8rem; line-height: 1.6; }
.rank-list.sortable li { cursor: grab; }
.rank-list li.sortable-ghost { opacity: .4; }
.rank-list li.sortable-chosen { border-color: var(--pico-primary); }
.offset { font-variant-numeric: tabular-nums; font-size: .85rem; min-width: 2.2rem; text-align: right; }
.offset.up { color: var(--pico-ins-color, #2a7); }
.offset.down { color: var(--pico-del-color, #c44); }
.offset.hit { color: var(--pico-primary); font-weight: 700; }
.badge { display: inline-block; font-size: .7rem; padding: .1rem .45rem; border-radius: 1rem; background: var(--pico-primary); color: var(--pico-primary-inverse); margin-left: .3rem; vertical-align: middle; }
.badge.warn { background: var(--pico-del-color, #c44); }
.lb td, .lb th { font-variant-numeric: tabular-nums; }
.lb .gap { color: var(--pico-muted-color); }
.lb tr.me td { font-weight: 700; }
.status { font-size: .85rem; color: var(--pico-muted-color); min-height: 1.2rem; }
.hero { text-align: center; padding: 1.5rem 0 1rem; }
.hero h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); background: linear-gradient(180deg, #fff, #9fdcff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero h1 { margin-bottom: .25rem; }
#trend { width: 100%; height: 360px; }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .9rem; }
.legend span::before { content: ""; display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .35rem; background: currentColor; vertical-align: -1px; }

.narrow { max-width: 26rem; margin: 2rem auto; }
form.inline { display: inline; margin: 0; }
button.link { background: none; border: none; padding: 0; margin: 0; width: auto; color: var(--pico-primary); text-decoration: underline; font-size: inherit; cursor: pointer; }
.error, small.error { color: var(--pico-del-color, #c44); display: block; }
/* Team cell: abbreviation over the full name, one line each; long names end in an ellipsis. */
.rank-list li .name { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.rank-list li .team-full { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Entry bar: always visible at the bottom of the ballot; loud while something isn't submitted. */
.entry-bar { position: sticky; bottom: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1rem; margin-top: 1.5rem; padding: .75rem 1rem; border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color); border: 2px solid var(--pico-ins-color, #2a7); box-shadow: 0 -4px 16px rgba(0,0,0,.35); }
.entry-bar.warn { border-color: var(--pico-del-color, #c44); }
.entry-bar.warn .state strong { color: var(--pico-del-color, #c44); }
.entry-bar .actions { display: flex; gap: .5rem; }
.entry-bar form { margin: 0; }
.entry-bar button { margin: 0; padding: .45rem 1.1rem; }
@media (max-width: 600px) { .entry-bar { padding: .5rem .75rem; } .entry-bar .long { display: none; } }
.rank-list li.changed { border-color: var(--pico-del-color, #c44); border-left-width: 4px; }
.rank-list li .was { font-size: .75rem; color: var(--pico-del-color, #c44); white-space: nowrap; }
/* Divisions: four across on wide screens, two on tablets, one on phones (the ballot stays at two). */
@media (min-width: 640px) { .grid-divs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .grid-divs:not(.ballot-grid) { grid-template-columns: repeat(4, 1fr); } }
/* Ballot: two divisions per row on wide screens so full team names fit; one column on phones. */
@media (min-width: 768px) { .grid-divs.ballot-grid { grid-template-columns: repeat(2, 1fr); } }
.login-btn { padding: .3rem .9rem !important; margin: 0; }

/* ---------------------------------------------------------------- rules page */
.kicker { text-transform: uppercase; letter-spacing: .25em; font-size: .75rem; color: var(--rt-red); font-weight: 700; margin-bottom: .25rem; }
.lede { max-width: 40rem; margin: 0 auto; color: #c3d2e6; font-size: 1.1rem; }
.section-title { margin: 2.5rem 0 1rem; font-size: 1.25rem; color: #cfe3f7; border-left: 4px solid var(--rt-red); padding-left: .7rem; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.steps article { margin: 0; position: relative; padding-top: 2.2rem; }
.steps h3 { margin-bottom: .4rem; }
.step-no { position: absolute; top: -.9rem; left: 1rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; color: #fff; background: radial-gradient(circle at 35% 30%, #3a4656, #0b0f14 70%); border: 2px solid var(--rt-ice); }
.formula { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: .6rem; margin-bottom: 1.5rem; }
.formula .token { flex: 1 1 12rem; max-width: 18rem; text-align: center; padding: 1rem; border-radius: var(--pico-border-radius);
  background: var(--rt-surface); border: 1px solid var(--rt-line); display: flex; flex-direction: column; gap: .3rem; }
.formula .token.result { border-color: var(--rt-ice); box-shadow: 0 0 24px rgba(111, 208, 255, .15); }
.formula .big { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.formula .token.result .big { color: var(--rt-ice); }
.formula small { color: var(--pico-muted-color); }
.formula .op { align-self: center; font-size: 2rem; font-weight: 300; color: var(--pico-muted-color); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.25rem; }
.grid-2 article { margin: 0; }
.small { font-size: .85rem; }
.bars { display: grid; gap: .45rem; margin-bottom: 1rem; }
.bar-row { display: grid; grid-template-columns: 6.5rem 1fr 2.5rem; align-items: center; gap: .6rem; }
.bar-label { font-size: .9rem; }
.bar { height: .9rem; border-radius: 1rem; background: #0b1424; overflow: hidden; border: 1px solid #1b2a44; }
.bar .fill { display: block; height: 100%; border-radius: 1rem; background: linear-gradient(90deg, #1a8bd1, var(--rt-ice)); }
.bar .fill.hit { background: linear-gradient(90deg, #d93a3f, var(--rt-red)); }
.bar-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; align-items: end; margin-bottom: 1rem; }
.tier { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .25rem; text-align: center; }
.tier-bar { flex: none; width: 100%; max-width: 4rem; border-radius: .4rem .4rem 0 0; background: linear-gradient(180deg, var(--rt-ice), #1a5f8f); }
.tier-w { font-weight: 800; font-size: 1.2rem; }
.tier-slots { font-size: .85rem; font-weight: 600; }
.example table { margin-bottom: .5rem; }
.example td, .example th { font-variant-numeric: tabular-nums; vertical-align: middle; }
.example tr.hit td { background: rgba(255, 90, 95, .07); }
.example td.pick { display: flex; align-items: center; gap: .5rem; }
.example td.pick img { width: 26px; height: 26px; }
.example td.pick .name { display: flex; flex-direction: column; line-height: 1.2; }
.example .num { text-align: right; white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.tiebreak { padding-left: 1.2rem; }
.tiebreak li { margin-bottom: .4rem; }
.mystery { margin-top: 1.25rem; border-color: #3b2f5c; background: linear-gradient(135deg, rgba(60, 40, 110, .35), var(--rt-surface)); }
@media (max-width: 600px) {
  .countdown { gap: .4rem; width: 100%; flex-wrap: nowrap; }
  .countdown > div { min-width: 0; flex: 1 1 0; padding: .55rem .2rem .4rem; }
  .countdown .num { font-size: 1.7rem; white-space: nowrap; }
  .countdown .lbl { font-size: .6rem; letter-spacing: .06em; white-space: nowrap; }
  .lb td, .lb th { padding: .5rem .45rem; font-size: .9rem; white-space: nowrap; }
}
.lb .badge { margin-left: .2rem; }

/* ---------------------------------------------------------------- season page */
.season-grid { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .season-grid { grid-template-columns: repeat(2, 1fr); } }
.season-grid article { margin: 0; min-width: 0; }
.season-chart { width: 100%; }
.season-legend { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .3rem .75rem; }
.season-legend li { display: flex; align-items: center; gap: .4rem; font-size: .85rem; margin: 0; list-style: none; }
.season-legend .dot { width: .7rem; height: .7rem; border-radius: 50%; flex: none; }
.your-pick { font-size: .72rem; font-weight: 700; padding: 0 .35rem; border-radius: .3rem; color: var(--rt-bg); background: var(--rt-amber); }
.metric-toggle { display: flex; align-items: center; gap: .6rem; max-width: 24rem; }
.metric-toggle select { margin: 0; }