/* MOSHBALL — 70s trading-card paper meets 16-bit arcade. */
:root {
  --cream: #f6ecd2;
  --paper: #fff8e6;
  --paper-2: #f1e3bd;
  --ink: #23183a;
  --ink-2: #5a4d6e;
  --purple: #3953a0;  /* accent text (kickers, labels): palette blue */
  --purple-d: #2a3f7a;
  /* Main background: off-white. */
  --main-bg: #f7f3ea;
  --red: #e23b2e;
  --orange: #f26a1b;
  --yellow: #ffd23f;
  --gold: #c9a43a;
  --blue: #1f4fa3;
  --sky: #6fb4ea;
  --navy: #1b2559;
  --brown: #6b2a1a;
  --green: #2f8f4e;
  --line: #23183a;
  --shadow: 4px 4px 0 var(--line);
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --chunk: "Bowlby One", "Arial Black", Impact, sans-serif;
  --script: "Shrikhand", "Bowlby One", cursive;
  --cond: "Oswald", "Arial Narrow", sans-serif;
  --v6: #ffd23f; --v5: #e23b2e; --v4: #f26a1b; --v3: #7b4bd1; --v2: #1f7fc9; --v1: #2f8f4e;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--cream);
  background-image:
    radial-gradient(rgba(107, 42, 26, .06) 1px, transparent 1px),
    radial-gradient(rgba(107, 42, 26, .04) 1px, transparent 1px);
  background-size: 6px 6px, 11px 11px;
  background-position: 0 0, 3px 4px;
  color: var(--ink);
  font: 500 15px/1.4 var(--cond);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
canvas.px, img.px { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden;
  background: var(--main-bg);
  transition: opacity .45s ease, visibility .45s;
}
.loader.out { opacity: 0; visibility: hidden; }
.loader-inner { display: grid; justify-items: center; padding: 24px 16px; width: min(440px, 100%); }
.loader-word {
  font: 400 clamp(28px, 8vw, 40px)/1 var(--chunk); color: var(--yellow); letter-spacing: .5px; margin-bottom: 18px;
  text-shadow: 2px 2px 0 var(--red), 4px 4px 0 var(--line);
}

/* The loading animation: a big 8-bit jump shot. The ball arcs in, drops through the net, swish, repeat. */
.court8 { position: relative; width: 360px; height: 250px; margin-bottom: 14px; }
.court8 img { position: absolute; image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, .35)); }
.hoop8 { position: absolute; left: 103px; top: 0; width: 154px; height: 168px; filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, .18)); }
.ball8 { left: 0; top: 190px; width: 54px; height: 54px; z-index: 1; animation: shot 1.6s infinite, spin .4s steps(4) infinite; }
.floor8 { position: absolute; left: -20px; right: -20px; bottom: 0; height: 6px; background: #cbbfa4; }
@keyframes shot {
  0%   { translate: 0 0; opacity: 1; animation-timing-function: steps(6); }
  35%  { translate: 80px -210px; animation-timing-function: steps(5); }
  55%  { translate: 152px -169px; animation-timing-function: steps(3); }
  72%  { translate: 152px -99px; opacity: 1; }
  82%  { translate: 152px -74px; opacity: 0; }
  100% { translate: 152px -74px; opacity: 0; }
}
@keyframes spin { to { rotate: 360deg; } }
@keyframes swish { 0%, 62% { transform: none; } 68% { transform: scaleY(1.05) translateY(2px); } 74%, 100% { transform: none; } }
@media (max-width: 420px) { .court8 { transform: scale(.8); transform-origin: top center; margin: 0 -36px -36px; } }
.loader-bar { width: min(300px, 80vw); height: 16px; margin: 6px 0 8px; border: 3px solid var(--line); background: var(--cream); padding: 2px; }
.loader-bar i { display: block; height: 100%; width: 0; background: var(--orange); animation: load 1.4s steps(14) forwards; }
@keyframes load { to { width: 100%; } }
.loader-tip { font: 9px var(--pixel); color: #333333; min-height: 12px; }
.loader-slogan { margin-top: 14px; padding: 0 8px; max-width: 340px; font: 700 15px/1.3 var(--cond); color: #333333; text-transform: uppercase; letter-spacing: 1px; text-align: center; text-wrap: balance; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px; padding: 10px 18px;
  padding-top: max(10px, env(safe-area-inset-top));
  padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right));
  background: var(--main-bg);
  border-bottom: 4px solid var(--line);
  box-shadow: 0 4px 0 #e9b44c, 0 8px 0 var(--line);
  margin-bottom: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.brand-logo { display: block; width: 150px; }
.brand-logo svg, .auth-logo svg, .hoop8 svg { display: block; width: 100%; height: auto; }
.auth-logo { width: min(240px, 72%); margin: 0 auto 6px; }
/* Alternate logo: the tile-letter basketball, shown in the footer. */
.foot-brand { display: inline-flex; align-items: center; gap: 10px; }
.alt-logo { width: 56px; height: 56px; flex-shrink: 0; }

.tabs-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.tabs { display: flex; gap: 6px; flex: 1; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; scroll-behavior: smooth; }
.tab-arrow { display: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  text-decoration: none; white-space: nowrap; font: 700 13px/1 var(--cond); text-transform: uppercase; letter-spacing: .5px;
  padding: 9px 12px; border: 3px solid var(--line); border-radius: 10px; background: var(--cream); color: var(--ink);
  box-shadow: 3px 3px 0 var(--line); transition: transform .08s;
}
.tabs a:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line); }
.tabs a.on { color: var(--cream); transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line); }
.tabs a.on.t-orange { background: var(--orange); }
.tabs a.on.t-red { background: var(--red); }
.tabs a.on.t-blue { background: var(--blue); }
.tabs a.on.t-purple { background: #7b4bd1; }
.tabs a.on.t-green { background: var(--green); }
.tabs a.on.t-yellow { background: var(--yellow); color: var(--ink); }
.tabs a.on.t-navy { background: var(--navy); }
.tabs a.on.t-pink { background: #d6337a; }
.me {
  display: flex; align-items: center; gap: 8px; text-decoration: none; color: #333333;
  font: 700 13px var(--cond); text-transform: uppercase; flex-shrink: 0;
}
.dot { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); display: inline-grid; place-items: center; font: 9px var(--pixel); color: #fff; flex-shrink: 0; }

.view { max-width: 1180px; margin: 0 auto; padding: 8px 18px 40px; }
.foot { max-width: 1180px; margin: 0 auto; padding: 16px 18px 40px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 8px/1.8 var(--pixel); color: var(--ink-2); }

/* ---------- shared bits ---------- */
h1.page {
  font: 400 clamp(30px, 6vw, 46px)/1 var(--chunk); margin: 14px 0 4px; color: var(--red);
  text-shadow: 3px 3px 0 var(--yellow), 5px 5px 0 var(--line); -webkit-text-stroke: 1px var(--line);
}
.kicker { font: 9px/1.8 var(--pixel); color: var(--purple); margin: 0 0 16px; letter-spacing: .5px; }
h2.sec { font: 400 22px/1 var(--chunk); margin: 26px 0 10px; color: var(--navy); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
h2.sec small { font: 8px var(--pixel); color: var(--ink-2); }
.card {
  background: var(--paper); border: 3px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 14px;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font: 400 15px/1 var(--chunk); letter-spacing: .5px; text-transform: uppercase;
  padding: 11px 16px; border: 3px solid var(--line); border-radius: 10px; background: var(--yellow); color: var(--ink);
  box-shadow: 3px 3px 0 var(--line); transition: transform .06s, box-shadow .06s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--line); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.red { background: var(--red); color: var(--cream); }
/* Lock it in, waiting on its tap: the lineup is saved either way, this is the "I'm done" button */
.btn.glow { animation: glow 1.2s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 3px 3px 0 var(--line), 0 0 0 4px rgba(255,210,63,.75), 0 0 18px 6px rgba(255,210,63,.55); } }
.btn.blue { background: var(--blue); color: var(--cream); }
.btn.green { background: var(--green); color: var(--cream); }
.btn.ghost { background: var(--paper); }
.btn.sm { font-size: 12px; padding: 7px 10px; border-width: 2px; box-shadow: 2px 2px 0 var(--line); }
.pill { display: inline-block; font: 7px/1 var(--pixel); padding: 4px 6px; border-radius: 4px; border: 2px solid var(--line); background: var(--paper-2); vertical-align: middle; }
.pill.inj { background: var(--red); color: #fff; }
.pill.live { background: var(--red); color: #fff; animation: blink 1s steps(2) infinite; }
.pill.final { background: var(--navy); color: #fff; }
.pill.lock { background: var(--ink); color: var(--yellow); }
@keyframes blink { 50% { opacity: .55; } }
.muted { color: var(--ink-2); }
.px-font { font-family: var(--pixel); }
input[type=text], input[type=password], input[type=number], input[type=search], input[type=email], input[type=tel], input[type=date], select {
  border: 3px solid var(--line); border-radius: 8px; background: var(--paper); padding: 9px 10px; font: 600 15px var(--cond);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.08); min-width: 0;
}
input:focus, select:focus, .btn:focus-visible, .tabs a:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
label.f { display: grid; gap: 4px; font: 8px var(--pixel); color: var(--purple); }

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60;
  font: 10px/1.6 var(--pixel); background: var(--ink); color: var(--yellow); padding: 12px 16px;
  border: 3px solid var(--yellow); border-radius: 8px; box-shadow: 4px 4px 0 var(--red); max-width: calc(100vw - 32px);
}
.toast.err { color: #fff; background: var(--red); border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }

/* value coin */
.val {
  --c: var(--v1);
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0;
  font: 11px/1 var(--pixel); color: #fff; background: var(--c); border: 3px solid var(--line); border-radius: 50%;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.25), inset 3px 3px 0 rgba(255,255,255,.3); text-shadow: 1px 1px 0 var(--line);
}
.val[data-v="6"] { --c: var(--v6); color: var(--ink); text-shadow: none; animation: shine 2s steps(4) infinite; }
.val[data-v="5"] { --c: var(--v5); } .val[data-v="4"] { --c: var(--v4); } .val[data-v="3"] { --c: var(--v3); }
.val[data-v="2"] { --c: var(--v2); } .val[data-v="1"] { --c: var(--v1); }
@keyframes shine { 50% { box-shadow: inset -3px -3px 0 rgba(0,0,0,.25), inset 3px 3px 0 #fff, 0 0 0 3px rgba(255,210,63,.5); } }

/* team chip */
.tm { display: inline-block; font: 7px/1 var(--pixel); padding: 4px 5px 3px; border-radius: 3px; border: 2px solid var(--line); color: #fff; letter-spacing: .5px; }

/* ---------- auth ---------- */
.auth { min-height: 82vh; display: grid; place-items: center; }
.auth-card { width: min(440px, 100%); text-align: center; }

.auth-card form { display: grid; gap: 12px; text-align: left; margin-top: 12px; }
.auth-switch { font: 8px/1.8 var(--pixel); margin-top: 14px; }
.auth-switch button { background: none; border: 0; color: var(--red); text-decoration: underline; cursor: pointer; font: inherit; }

/* ---------- picks ---------- */
.datebar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.datebar .day { font: 400 20px var(--chunk); color: var(--navy); min-width: 210px; text-align: center; }
.games-strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 4px 12px; margin: 0 -4px 6px; }
.game-tile {
  flex: 0 0 auto; min-width: 150px; background: var(--paper); border: 3px solid var(--line); border-radius: 12px; box-shadow: 3px 3px 0 var(--line);
  padding: 8px 10px; font: 600 13px/1.35 var(--cond);
}
.game-tile .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.game-tile .sc { font: 10px var(--pixel); }
.game-tile .odds { font: 7px/1.6 var(--pixel); color: var(--ink-2); margin-top: 4px; }
.game-tile .when { font: 7px var(--pixel); color: var(--purple); margin-top: 4px; }

.court {
  position: relative; border: 4px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden;
  background:
    linear-gradient(transparent 0 0),
    repeating-linear-gradient(90deg, #d79a55 0 34px, #cf9149 34px 68px);
  padding: 16px 14px 14px;
}
.court::before { /* paint + key lines */
  content: ""; position: absolute; left: 50%; bottom: -120px; width: 380px; height: 240px; transform: translateX(-50%);
  border: 4px solid rgba(255,248,230,.75); border-radius: 50%; pointer-events: none;
}
.court::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(75,42,145,.35), transparent 40%);
}
.court-head { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.court-head h3 { margin: 0; font: 400 24px/1 var(--chunk); color: var(--yellow); text-shadow: 2px 2px 0 var(--red), 4px 4px 0 var(--line); -webkit-text-stroke: 1px var(--line); }
.cap { min-width: 230px; }
.cap-label { display: flex; justify-content: space-between; font: 8px var(--pixel); color: var(--cream); text-shadow: 1px 1px 0 var(--line); margin-bottom: 4px; }
.cap-bar { height: 18px; border: 3px solid var(--line); background: var(--ink); display: grid; grid-template-columns: repeat(var(--cap), 1fr); gap: 2px; padding: 2px; }
.cap-bar i { background: #3b2d55; }
.cap-bar i.on { background: var(--yellow); }
.cap-bar.over i.on { background: var(--red); }
.lineup { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 10px; min-height: 230px; align-items: end; }
.slot { display: grid; justify-items: center; gap: 6px; text-align: center; }
.slot.empty .ghost {
  width: 96px; height: 150px; border: 3px dashed rgba(255,248,230,.75); border-radius: 12px; display: grid; place-items: center;
  font: 8px/1.6 var(--pixel); color: var(--cream); text-shadow: 1px 1px 0 var(--line); background: rgba(35,24,58,.2);
}
.slot .nm { font: 700 13px/1.1 var(--cond); text-transform: uppercase; color: var(--cream); background: var(--ink); border: 2px solid var(--line); padding: 3px 6px; border-radius: 6px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .meta { display: flex; gap: 6px; align-items: center; }
.slot .x { font: 8px var(--pixel); background: var(--red); color: #fff; border: 2px solid var(--line); border-radius: 6px; padding: 3px 5px; cursor: pointer; }
.court-actions { position: relative; z-index: 1; display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.court-actions .status { font: 8px/1.6 var(--pixel); color: var(--cream); text-shadow: 1px 1px 0 var(--line); margin-right: auto; }

/* jam sprite: big pixel head on a little body */
.jam { position: relative; width: 96px; height: 150px; animation: sway 1.1s steps(2) infinite; transform-origin: 50% 100%; }
.jam .head { position: absolute; left: 50%; top: 0; width: 76px; height: 76px; transform: translateX(-50%); z-index: 2; border-radius: 10px; }
.jam .body { position: absolute; left: 50%; bottom: 0; width: 72px; height: 90px; transform: translateX(-50%); z-index: 1; }
.jam .ball { position: absolute; right: 2px; bottom: 6px; width: 22px; height: 22px; z-index: 3; animation: dribble .55s cubic-bezier(.5,0,.5,1) infinite alternate; }
.jam.d1 { animation-delay: -.2s; } .jam.d2 { animation-delay: -.45s; } .jam.d3 { animation-delay: -.7s; } .jam.d4 { animation-delay: -.9s; }
.jam.d1 .ball { animation-delay: -.15s; } .jam.d2 .ball { animation-delay: -.3s; } .jam.d3 .ball { animation-delay: -.42s; }
@keyframes sway { 0% { transform: rotate(-2deg); } 100% { transform: rotate(2deg) translateY(-2px); } }
@keyframes dribble { from { transform: translateY(-38px); } to { transform: translateY(0) scaleY(.9); } }
.jam.dunk { animation: dunk .9s cubic-bezier(.3,1.6,.6,1) 1; }
.jam.dunk .ball { animation: none; transform: translate(-30px, -120px); transition: transform .3s; }
@keyframes dunk { 0% { transform: translateY(0); } 35% { transform: translateY(-70px) rotate(-6deg); } 60% { transform: translateY(-74px) rotate(4deg); } 100% { transform: translateY(0); } }
.jam.fire::after {
  content: ""; position: absolute; left: 50%; top: -18px; width: 90px; height: 70px; transform: translateX(-50%); z-index: 0;
  background: radial-gradient(ellipse at 50% 90%, #fff3a0 0 18%, #ffb31a 30%, #f04a1a 52%, transparent 68%);
  filter: blur(.5px); animation: flame .25s steps(2) infinite; image-rendering: pixelated;
}
@keyframes flame { 50% { transform: translateX(-50%) scaleY(1.15) scaleX(.92); } }
.onfire { font: 8px var(--pixel); color: var(--yellow); background: var(--red); border: 2px solid var(--line); padding: 3px 5px; border-radius: 4px; }

/* player pool */
.pool-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 18px 0 10px; }
.pool-tools input[type=search] { flex: 1 1 200px; }
.vfilter { display: flex; gap: 4px; }
.vfilter button { cursor: pointer; padding: 0; background: none; border: 0; opacity: .45; }
.vfilter button.on { opacity: 1; }
.pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 10px; }
.pcard {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 8px; text-align: left; cursor: pointer;
  background: var(--paper); border: 3px solid var(--line); border-radius: 12px; box-shadow: 3px 3px 0 var(--line); transition: transform .06s;
}
.pcard:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line); }
.pcard.picked { background: var(--yellow); }
.pcard.locked { opacity: .55; cursor: not-allowed; }
.pcard.cant { opacity: .6; }
.pcard .pic { width: 56px; height: 56px; border-radius: 8px; border: 2px solid var(--line); overflow: hidden; background: var(--sky); }
.pcard .pic canvas { width: 100%; height: 100%; display: block; }
.pcard .who { min-width: 0; }
.pcard .who b { display: block; font: 700 15px/1.1 var(--cond); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .who span { display: block; font: 600 12px/1.4 var(--cond); color: var(--ink-2); }
.pcard .who .tags { display: flex; gap: 4px; margin-top: 3px; flex-wrap: wrap; }
.pcard .fp { text-align: right; display: grid; justify-items: end; gap: 4px; }
.pcard .fp small { font: 7px var(--pixel); color: var(--ink-2); }

/* ---------- tables / boards ---------- */
table.t { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); border: 3px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.t th { font: 8px var(--pixel); text-align: left; padding: 10px 8px; background: var(--navy); color: var(--yellow); white-space: nowrap; }
.t td { padding: 9px 8px; border-top: 2px solid var(--paper-2); font: 600 15px var(--cond); white-space: nowrap; }
.t tr.mine td { background: #fff1b3; }
.t .num { text-align: right; font-family: var(--pixel); font-size: 10px; }
.t .rk { font: 10px var(--pixel); width: 34px; }
.tablewrap { overflow-x: auto; padding: 0 6px 8px 0; }
.userc { display: inline-flex; align-items: center; gap: 8px; }

.board { display: grid; gap: 12px; }
.brow { display: grid; grid-template-columns: 44px 170px 1fr 90px; gap: 12px; align-items: center; }
.brow .rank { font: 400 26px var(--chunk); color: var(--red); text-shadow: 2px 2px 0 var(--line); text-align: center; }
.brow .tot { font: 14px var(--pixel); text-align: right; }
.brow .picks { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.mini { flex: 0 0 auto; width: 82px; text-align: center; background: var(--paper-2); border: 2px solid var(--line); border-radius: 8px; padding: 4px; }
.mini canvas { width: 46px; height: 46px; display: block; margin: 0 auto 2px; border-radius: 6px; border: 2px solid var(--line); }
.mini b { display: block; font: 700 11px/1.1 var(--cond); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini i { display: block; font: normal 9px var(--pixel); margin-top: 2px; }
.mini .bn { font: 6px/1.3 var(--pixel); color: var(--red); margin-top: 2px; }
.mini.hidden { display: grid; place-items: center; height: 82px; font: 16px var(--pixel); color: var(--ink-2); background: repeating-linear-gradient(45deg, var(--paper-2) 0 6px, var(--paper) 6px 12px); }

.mcard { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.mcard .side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mcard .side.r { justify-content: flex-end; text-align: right; }
.mcard .side b { font: 700 16px/1.1 var(--cond); text-transform: uppercase; }
.mcard .sc { font: 13px var(--pixel); }
.mcard .vs { font: 400 18px var(--chunk); color: var(--red); text-align: center; }
.mcard .win b { color: var(--green); }
.wager { margin-top: 10px; padding-top: 10px; border-top: 2px dashed var(--paper-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font: 8px/1.6 var(--pixel); }
.wager input { width: 74px; }
.money { font-family: var(--pixel); font-size: 11px; }
.money.pos { color: var(--green); } .money.neg { color: var(--red); }

.lp-day { margin-bottom: 16px; }
.lp-day h3 { font: 10px var(--pixel); color: var(--purple); margin: 0 0 8px; }
.stack { display: grid; gap: 10px; }

.iou { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 10px; align-items: center; }
.iou .arrow { font: 9px var(--pixel); color: var(--red); text-align: center; }

.lb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.lb h3 { margin: 0 0 10px; font: 400 18px var(--chunk); color: var(--navy); }
.lb ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lb li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; font: 600 14px var(--cond); }
.lb li .n { font: 9px var(--pixel); color: var(--red); }
.lb li .v { font: 9px var(--pixel); }
.empty { padding: 26px; text-align: center; font: 9px/1.9 var(--pixel); color: var(--ink-2); }

/* sticker sheet for the rules page */
.stickers { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; background: var(--ink); padding: 10px; border-radius: 14px; border: 3px solid var(--line); box-shadow: var(--shadow); }
.sticker { background: #191226; border-radius: 10px; padding: 14px; color: var(--cream); display: grid; justify-items: center; text-align: center; gap: 8px; }
.sticker .badge { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; border: 4px solid var(--cream); font: 400 22px var(--chunk); }
.sticker b { font: 400 15px var(--chunk); }
.sticker span { font: 600 13px/1.3 var(--cond); color: #d9cfe9; }

/* how to play */
.rules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.rule { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; }
.rule-n { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--yellow); border: 3px solid var(--line); font: 11px var(--pixel); }
.rule h3 { margin: 4px 0 6px; font: 400 18px/1.15 var(--chunk); color: var(--red); }
.rule p { margin: 0; font: 500 15px/1.45 var(--cond); }
.stickers .sticker { align-content: start; }
.stickers .badge { font-size: 20px; }
.stickers .sticker b { font: 700 14px/1.2 var(--cond); text-transform: uppercase; letter-spacing: .5px; min-height: 2.4em; display: grid; place-items: center; }
.practice { background: var(--yellow); border: 3px solid var(--line); border-radius: 10px; box-shadow: 3px 3px 0 var(--line); padding: 10px 12px; margin: 0 0 14px; font: 600 14px/1.4 var(--cond); }
.practice b { font: 9px var(--pixel); margin-right: 6px; }

/* ? button + rulebook drawer */
.help-btn {
  position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 3px solid var(--line); background: var(--yellow); color: var(--ink); font: 13px var(--pixel); padding: 0 0 0 2px;
  box-shadow: 2px 2px 0 var(--line); margin-left: auto;
}
.help-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--line); }
.help-dot { position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: var(--red); border: 2px solid var(--line); animation: blink 1s steps(2) infinite; }
.guide { position: fixed; inset: 0; z-index: 40; }
.guide-backdrop { position: absolute; inset: 0; background: rgba(35, 24, 58, .55); opacity: 0; transition: opacity .25s; }
.guide-sheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%); display: flex; flex-direction: column;
  background: var(--cream); border-left: 4px solid var(--line); box-shadow: -6px 0 0 var(--red);
  transform: translateX(105%); transition: transform .28s cubic-bezier(.2, .9, .3, 1);
}
.guide.open .guide-backdrop { opacity: 1; }
.guide.open .guide-sheet { transform: none; }
.guide-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top)); background: var(--purple); border-bottom: 4px solid var(--line); }
.guide-head h2 { margin: 0; font: 400 24px/1 var(--chunk); color: var(--yellow); text-shadow: 2px 2px 0 var(--red), 3px 3px 0 var(--line); -webkit-text-stroke: 1px var(--line); }
.guide-x { width: 34px; height: 34px; border-radius: 8px; border: 3px solid var(--line); background: var(--cream); font-size: 14px; cursor: pointer; box-shadow: 2px 2px 0 var(--line); }
.guide-nav { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; border-bottom: 2px dashed var(--paper-2); scrollbar-width: none; flex-shrink: 0; }
.guide-nav::-webkit-scrollbar { display: none; }
.guide-nav button { flex: 0 0 auto; font: 700 12px var(--cond); text-transform: uppercase; padding: 6px 10px; border: 2px solid var(--line); border-radius: 8px; background: var(--paper); cursor: pointer; box-shadow: 2px 2px 0 var(--line); }
.guide-body { overflow-y: auto; padding: 4px 16px 40px; padding-bottom: max(40px, env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.guide-body section, .rules-page section { scroll-margin-top: 8px; }
.guide-body h3 { font: 400 20px/1.1 var(--chunk); color: var(--red); margin: 20px 0 8px; }
.guide-body p, .rules-page p { margin: 0 0 10px; font: 500 16px/1.5 var(--cond); }
.timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 4px dotted var(--purple); display: grid; gap: 12px; }
.timeline li { position: relative; display: grid; gap: 2px; font: 500 16px/1.45 var(--cond); }
.timeline li::before { content: ""; position: absolute; left: -27px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); border: 3px solid var(--line); }
.timeline b { font: 9px/1.4 var(--pixel); color: var(--purple); text-transform: uppercase; }
ul.plain { margin: 0 0 10px; padding-left: 18px; display: grid; gap: 6px; font: 500 16px/1.45 var(--cond); }
.stickers.compact { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; padding: 8px; margin: 4px 0 12px; }
.stickers.compact .sticker { padding: 10px 6px; }
.stickers.compact .badge { width: 54px; height: 54px; font-size: 16px; }
.stickers.compact .sticker b { font-size: 11px; }
.rules-page { display: grid; gap: 16px; }
.champ { display: grid; gap: 4px; margin: 6px 0 14px; padding: 12px 14px; border: 3px solid var(--line); border-radius: 12px; background: var(--navy); color: var(--cream); box-shadow: 3px 3px 0 var(--gold); }
.champ b { font: 9px/1.5 var(--pixel); color: var(--yellow); }
.champ span { font: 500 15px/1.45 var(--cond); }
.rules-page .sec { margin-top: 0; }

/* leagues */
.league-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.league-name { margin: 0 0 2px; font: 400 22px/1.1 var(--chunk); color: var(--red); }
.code-box { display: grid; justify-items: end; gap: 4px; }
.code-box small { font: 7px var(--pixel); color: var(--purple); }
.code-box code { font: 14px var(--pixel); background: var(--ink); color: var(--yellow); padding: 8px 10px; border-radius: 6px; letter-spacing: 1px; }
details.switch { border-top: 2px dashed var(--paper-2); padding-top: 8px; }
details.switch summary { cursor: pointer; font: 700 14px var(--cond); text-transform: uppercase; }
details.switch .card { box-shadow: none; border-width: 2px; margin-top: 8px; }
.pill.cl { background: var(--yellow); margin-left: 6px; }
.seg a.btn { text-decoration: none; }

/* commissioner directory */
.dir { display: grid; gap: 10px; }
.dir-row { display: grid; grid-template-columns: 1.1fr 1.4fr auto; gap: 12px; align-items: center; }
.dir-who { display: grid; gap: 4px; min-width: 0; }
.dir-contact { display: grid; gap: 2px; font: 600 14px/1.35 var(--cond); min-width: 0; overflow-wrap: anywhere; }
.dir-contact a { color: var(--blue); }
.dir-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.rename { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; border-top: 2px dashed var(--paper-2); padding-top: 10px; }
@media (max-width: 860px) { .rename { grid-template-columns: 1fr; } }
.temp { margin-bottom: 12px; display: grid; gap: 8px; background: #fff1b3; }
.temp code { font: 14px var(--pixel); background: var(--ink); color: var(--yellow); padding: 8px 10px; border-radius: 6px; justify-self: start; }
.temp textarea { width: 100%; border: 2px solid var(--line); border-radius: 8px; padding: 8px; font: 500 14px var(--cond); resize: none; }

/* player detail */
.pdetail { display: grid; grid-template-columns: 220px 1fr; gap: 18px; align-items: start; }
.pdetail .big { width: 100%; aspect-ratio: 1; border: 4px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); display: block; }
.statline { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }
.statline div { background: var(--paper-2); border: 2px solid var(--line); border-radius: 8px; padding: 8px; text-align: center; }
.statline b { display: block; font: 12px var(--pixel); }
.statline small { font: 7px var(--pixel); color: var(--ink-2); }

/* ---------- mini-games ---------- */
.mini-grid { display: grid; grid-template-columns: 360px 1fr; gap: 22px; align-items: start; }
.slip { display: grid; gap: 12px; background: #fffdf3; background-image: repeating-linear-gradient(0deg, transparent 0 27px, rgba(31,79,163,.12) 27px 28px); }
.slip h3 { margin: 0; font: 400 20px var(--chunk); color: #d6337a; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { cursor: pointer; font: 700 12px var(--cond); text-transform: uppercase; padding: 7px 10px; border: 2px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: 2px 2px 0 var(--line); }
.seg button.on { background: var(--navy); color: var(--yellow); transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--line); }
.seg.sides button { flex: 1; font: 400 16px var(--chunk); padding: 12px; }
.seg.sides button.on { background: var(--yellow); color: var(--ink); }
.slip-foot { display: flex; justify-content: space-between; align-items: end; gap: 10px; border-top: 2px dashed var(--line); padding-top: 12px; }
.tickets { display: grid; gap: 12px; }
.ticket { position: relative; border-style: solid; padding: 12px 14px; }
.ticket.mine { border-color: #d6337a; }
.ticket::before, .ticket::after { content: ""; position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: var(--cream); border: 3px solid var(--line); transform: translateY(-50%); }
.ticket::before { left: -10px; border-left-color: transparent; border-bottom-color: transparent; transform: translateY(-50%) rotate(45deg); }
.ticket::after { right: -10px; border-right-color: transparent; border-top-color: transparent; transform: translateY(-50%) rotate(45deg); }
.tk-head { display: flex; gap: 10px; align-items: center; }
.tk-pic { width: 44px; height: 44px; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.tk-pic canvas { width: 100%; height: 100%; display: block; }
.tk-kind { font: 7px/1.3 var(--pixel); background: var(--navy); color: var(--yellow); padding: 8px 6px; border-radius: 6px; border: 2px solid var(--line); text-align: center; width: 64px; flex-shrink: 0; }
.tk-title { flex: 1; min-width: 0; }
.tk-title b { display: block; font: 700 17px/1.1 var(--cond); text-transform: uppercase; }
.tk-title span { font: 8px var(--pixel); color: var(--ink-2); }
.tk-stamp { font: 400 14px var(--chunk); color: var(--red); border: 3px solid var(--red); border-radius: 6px; padding: 4px 8px; transform: rotate(-6deg); white-space: nowrap; }
.tk-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 2px dashed var(--paper-2); }
.tk-side { display: grid; gap: 4px; padding: 8px; border-radius: 8px; background: var(--paper-2); border: 2px solid transparent; }
.tk-side:last-child { text-align: right; justify-items: end; }
.tk-side b { font: 400 16px var(--chunk); }
.tk-side.won { background: #d7f2dd; border-color: var(--green); }
.tk-side.lost { opacity: .55; }
.tk-sides .vs { font: 400 16px var(--chunk); color: var(--red); }
.tk-now { margin-top: 8px; font: 10px var(--pixel); }
.tk-act { margin-top: 10px; display: flex; justify-content: flex-end; }

@media (max-width: 860px) {
  /* Phone menu: a swipeable rail with snap points, faded edges and blinking pixel arrows. */
  .tabs-wrap { order: 3; flex-basis: 100%; margin: 0 -12px; }
  .tabs {
    scroll-snap-type: x mandatory; scroll-padding: 0 36px; padding: 4px 36px 8px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
  }
  .tabs-wrap.at-start .tabs {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  }
  .tabs-wrap.at-end .tabs {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 34px, #000 100%);
  }
  .tabs a { scroll-snap-align: center; font-size: 12px; padding: 8px 11px; }
  .tab-arrow {
    display: grid; place-items: center; position: absolute; top: 50%; z-index: 2; width: 26px; height: 26px; margin-top: -15px;
    border: 2px solid var(--line); border-radius: 6px; background: var(--yellow); color: var(--ink); font-size: 10px; padding: 0;
    box-shadow: 2px 2px 0 var(--line); cursor: pointer; animation: nudge 1s steps(2) infinite; transition: opacity .2s;
  }
  .tab-arrow.left { left: 6px; --dir: -3px; }
  .tab-arrow.right { right: 6px; --dir: 3px; }
  .tabs-wrap.at-start .tab-arrow.left, .tabs-wrap.at-end .tab-arrow.right { opacity: 0; pointer-events: none; }
  .tabs a.on { animation: tabPop .35s cubic-bezier(.3,1.6,.6,1); }
  .datebar .day { min-width: 0; font-size: 18px; flex: 1 1 auto; text-align: center; }
  .datebar input[type=date] { flex: 1 1 100%; max-width: none !important; }
  .mini-grid { grid-template-columns: 1fr; }
  .top { flex-wrap: wrap; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 12px 8px; }

  .help-btn { margin-left: auto; }
  .me { margin-left: 8px; }
  .view { padding: 4px 12px 40px; }
  .grid2, .pdetail { grid-template-columns: 1fr; }
  /* Three on top, two centered below, always inside the court. */
  .lineup { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 4px; min-height: 0; }
  .lineup .slot { flex: 0 0 31%; min-width: 0; }
  .slot .nm { max-width: 100%; font-size: 12px; }
  .slot .meta { flex-wrap: wrap; justify-content: center; gap: 4px; }
  .slot.empty .ghost, .jam { width: 88px; }
  .court { padding: 14px 10px 12px; }
  .court-head h3 { font-size: 20px; }
  .cap { min-width: 0; flex: 1 1 100%; }
  /* 16px text in form fields stops iPhones from zooming in (and leaving the page cropped). */
  input, select, textarea { font-size: 16px !important; }
  /* Compact tables; minor columns hidden on phones. */
  .t th { padding: 8px 6px; font-size: 7px; }
  .t td { padding: 7px 6px; font-size: 14px; }
  .t .num { font-size: 9px; }
  .t .hide-sm { display: none; }
  .dir-row { grid-template-columns: 1fr; }
  .dir-act { justify-content: flex-start; }
  .pdetail .big { max-width: 240px; margin: 0 auto; }
  /* Live board: all five picks fit across a phone. */
  .brow .picks { overflow: visible; gap: 4px; }
  .mini { flex: 1 1 0; width: auto; min-width: 0; padding: 3px 2px; }
  .mini canvas { width: 100%; max-width: 44px; height: auto; aspect-ratio: 1; }
  .mini b { font-size: 10px; }
  .mini i { font-size: 8px; }
  .mini.hidden { height: 64px; }
  .brow { grid-template-columns: 34px 1fr 70px; }
  .brow .picks { grid-column: 1 / -1; }
  .iou { grid-template-columns: 1fr auto 1fr; }
  .iou .btn { grid-column: 1 / -1; }
  .brand-logo { width: 116px; }
}
@keyframes nudge { 50% { transform: translateX(var(--dir)); } }
@keyframes tabPop { 0% { transform: translate(2px, 2px) scale(.85); } 100% { transform: translate(2px, 2px) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Champions League ---------- */
.tabs a.on.t-gold { background: var(--gold); color: var(--ink); }
.practice.thin { background: var(--sky); }
.rules-page .timeline, .guide-body .timeline { margin-bottom: 12px; }
.cl-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cl-who .dot { flex-shrink: 0; font-size: 8px; }
.cl-nm { display: grid; min-width: 0; }
.cl-nm b { font: 700 15px/1.1 var(--cond); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-nm small { font: 600 12px/1.2 var(--cond); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-who.tbd b { color: var(--ink-2); font-weight: 500; }
.cl-note { font-size: 12px; white-space: normal; margin-top: 2px; }
.t td.wrap { white-space: normal; max-width: 0; width: 100%; }
.cl-mine { display: grid; gap: 6px; margin-bottom: 4px; }
.cl-mine > b { font: 8px var(--pixel); color: var(--purple); }
.cl-mine > span { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 600 15px var(--cond); }
.cl-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.cl-stages li { display: grid; gap: 2px; padding: 10px 12px; border: 3px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 2px 2px 0 var(--line); }
.cl-stages li b { font: 400 16px/1.1 var(--chunk); color: var(--navy); }
.cl-stages li span { font: 8px/1.6 var(--pixel); }
.cl-stages li small { font: 600 12px/1.2 var(--cond); color: var(--ink-2); }
.cl-stages li.now { background: var(--yellow); }
.cl-stages li.done { opacity: .6; }
.cl-path ol { margin: 4px 0; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.cl-path li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font: 500 15px/1.35 var(--cond); }
.cl-path li b { font: 8px var(--pixel); color: var(--cream); min-width: 96px; }
.cl-path li.won b { color: #8fe3a5; } .cl-path li.lost { opacity: .65; }
.cl-tonight { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.cl-tag { font-size: 7px; color: var(--purple); margin: 0 0 6px; }
.cl-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.cl-group { display: grid; gap: 10px; align-content: start; }
.cl-group h3 { margin: 0; font: 400 22px/1 var(--chunk); color: var(--red); }
.cl-gt { box-shadow: none; border-width: 2px; }
.cl-gt tr.adv td:first-child { box-shadow: inset 4px 0 0 var(--green); }
.cl-gt td { padding: 6px; }
.fixtures { display: grid; gap: 6px; margin-top: 8px; }
.fx { border: 2px solid var(--line); border-radius: 8px; background: var(--paper); overflow: hidden; }
.fx.mine { background: #fff1b3; }
.fx-row { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 50px 1fr 1fr; gap: 8px; align-items: center; padding: 6px 8px; cursor: pointer; }
.fx-row:disabled { cursor: default; }
.fx-row:focus-visible { outline: 3px solid var(--orange); }
.fx-md { font: 6px/1.6 var(--pixel); color: var(--purple); }
.fx-md i { font-style: normal; color: var(--ink-2); }
.fx-md i.lv { color: var(--red); }
.fx-side { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-width: 0; }
.fx-side .cl-nm small { display: none; }
.fx-side .cl-nm b { font-size: 13px; }
.fx-side .dot { width: 20px !important; height: 20px !important; font-size: 7px; border-width: 2px; }
.fx-side.win .cl-nm b { color: var(--green); }
.fx-sc { font: 9px var(--pixel); flex-shrink: 0; }
.cl-bracket { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; align-items: center; }
.cl-round { display: grid; gap: 12px; align-content: space-around; height: 100%; }
.cl-round-head { display: grid; gap: 2px; border-bottom: 3px solid var(--line); padding-bottom: 6px; align-self: start; }
.cl-round-head b { font: 400 18px/1.1 var(--chunk); color: var(--navy); }
.cl-round-head small { font: 600 12px/1.2 var(--cond); color: var(--ink-2); }
.series { padding: 10px; display: grid; gap: 6px; }
.series.mine { border-color: var(--orange); }
.series.live { background: #fff4ec; }
.sr-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; font: 7px/1.4 var(--pixel); color: var(--purple); flex-wrap: wrap; }
.sr-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 6px; }
.sr-row.win { background: #d7f2dd; }
.sr-row.you .cl-nm b { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; }
.cl-seed { font: 8px var(--pixel); width: 22px; height: 22px; display: grid; place-items: center; background: var(--navy); color: var(--yellow); border-radius: 4px; }
.cl-seed.blank { background: var(--paper-2); }
.sr-sc { font: 11px var(--pixel); }
.sr-nights { display: flex; gap: 4px; overflow-x: auto; padding: 4px 0 2px; border-top: 2px dashed var(--paper-2); }
.sr-n { flex: 0 0 auto; display: grid; gap: 2px; text-align: center; font: 7px/1.3 var(--pixel); padding: 4px 5px; border: 2px solid var(--line); border-radius: 6px; background: var(--paper-2); cursor: pointer; color: var(--ink-2); }
.sr-n small { font: 600 10px var(--cond); color: var(--ink); }
.sr-n .w { color: var(--green); }
.sr-n.live { background: #ffd9cf; }
.cl-lu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px; border-top: 2px dashed var(--paper-2); }
.cl-lu-side { display: grid; gap: 6px; min-width: 0; }
.cl-lu-head { display: flex; justify-content: space-between; gap: 6px; font: 700 13px var(--cond); text-transform: uppercase; }
.cl-lu-head span { font: 9px var(--pixel); }
.cl-lu .picks { display: flex; gap: 4px; flex-wrap: wrap; }
.cl-lu .mini { width: 64px; }
.cl-lu .mini canvas { width: 40px; height: 40px; }
.cl-lu-date { grid-column: 1 / -1; font: 7px var(--pixel); }
.cl-champion { display: grid; justify-items: center; gap: 6px; text-align: center; background: var(--gold); margin-bottom: 14px;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 14px, transparent 14px 28px); }
.cl-champion small { font: 8px var(--pixel); }
.cl-champion b { font: 400 30px/1 var(--chunk); color: var(--yellow); text-shadow: 2px 2px 0 var(--red), 4px 4px 0 var(--line); }
.cl-champion span { font: 700 15px var(--cond); text-transform: uppercase; }
.cl-date-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; align-items: end; }
.cl-date-row b { font: 400 16px var(--chunk); color: var(--navy); }
@media (max-width: 860px) {
  .cl-bracket { grid-auto-flow: row; grid-template-columns: 1fr; }
  .cl-round { height: auto; }
  .cl-groups, .cl-tonight { grid-template-columns: 1fr; }
  .cl-date-row { grid-template-columns: 1fr 1fr; }
  .cl-date-row > div { grid-column: 1 / -1; }
  .cl-lu .mini { flex: 1 1 0; width: auto; }
}

/* League Races browser on the Champions page */
.cl-races { display: grid; gap: 12px; }
.cl-races .t { box-shadow: none; }

/* ---------- sub-menu (Daily Picks, Live Scoring, League Play, Mini-Games) ---------- */
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }
.subtabs a { font: 700 13px/1 var(--cond); text-transform: uppercase; letter-spacing: .5px; text-decoration: none; color: var(--ink);
  padding: 8px 12px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper); box-shadow: 2px 2px 0 var(--line); }
.subtabs a:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--line); }
.subtabs a.on { background: var(--navy); color: var(--yellow); transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--line); }
.subtabs + h1.page, .subtabs + a.btn { margin-top: 12px; }
@media (max-width: 860px) {
  .subtabs { gap: 5px; }
  .subtabs a { font-size: 12px; padding: 7px 10px; }
}

/* ---------- phone alerts ---------- */
.alerts { display: grid; gap: 8px; justify-items: start; }
.alerts.compact { background: var(--yellow); margin-bottom: 14px; }
.alerts p { margin: 0; font: 500 15px/1.4 var(--cond); }
.alerts-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
.alerts-head b { font: 9px/1.5 var(--pixel); }
.x-close { border: 2px solid var(--line); background: var(--paper); border-radius: 6px; width: 28px; height: 28px; cursor: pointer; font-size: 12px; }

/* ---------- viewers & unpaid flags ---------- */
.viewer-pick { display: grid; gap: 6px; }
.viewer-pick small { font: 500 13px/1.35 var(--cond); }
.flag { font-size: 14px; margin-left: -2px; cursor: help; }
.iou-age { grid-column: 1 / -1; font: 7px/1.6 var(--pixel); color: var(--ink-2); }
.iou-age.late { color: var(--red); }
.iou.late { border-color: var(--red); }
.tk-warn { display: grid; gap: 8px; justify-items: end; width: 100%; }
.tk-warn span { font: 600 13px/1.35 var(--cond); color: var(--red); text-align: right; }

/* ---------- calling cards, badges, profile, Picks home screen ---------- */
.dot.emb { font-family: system-ui, sans-serif; line-height: 1; }
a.userc { text-decoration: none; color: inherit; }
a.userc:hover b { text-decoration: underline; }
.ccard { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 3px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; color: var(--ink); }
.ccard.big { padding: 22px 18px; margin-top: 10px; min-height: 120px; }
.cc-who { display: grid; gap: 2px; background: var(--paper); border: 2px solid var(--line); border-radius: 8px; padding: 6px 10px; box-shadow: 2px 2px 0 var(--line); }
.cc-who b { font: 400 22px/1 var(--chunk); }
.ccard.big .cc-who b { font-size: 28px; }
.cc-who small { font: 600 12px/1.2 var(--cond); text-transform: uppercase; color: var(--ink-2); }
.cc-emblem .dot { box-shadow: 3px 3px 0 var(--line); }
.card-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ccard.mini-cc { min-height: 64px; justify-content: center; cursor: pointer; box-shadow: 2px 2px 0 var(--line); font: inherit; }
.ccard.mini-cc b { background: var(--paper); border: 2px solid var(--line); border-radius: 6px; padding: 3px 6px; font: 700 11px/1.2 var(--cond); text-transform: uppercase; }
.ccard.mini-cc.on { outline: 4px solid var(--orange); outline-offset: 2px; }
.ccard.mini-cc.locked { filter: grayscale(1); opacity: .45; cursor: not-allowed; }
.flag-note { margin-top: 12px; }
.bc-h { font: 9px var(--pixel); color: var(--purple); margin: 14px 0 8px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.badge-tile { display: grid; justify-items: center; gap: 3px; text-align: center; padding: 10px 6px; border: 3px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: 2px 2px 0 var(--line); cursor: pointer; font: inherit; color: inherit; }
.badge-tile .bt-icon { font-size: 30px; line-height: 1.1; }
.badge-tile b { font: 700 12px/1.1 var(--cond); text-transform: uppercase; }
.badge-tile small { font: 7px var(--pixel); color: var(--ink-2); }
.badge-tile.tier-gold { background: #fff1b3; }
.badge-tile.tier-legend { background: linear-gradient(135deg, #ffd23f, #f26a1b); }
.badge-tile.tier-silver { background: #e7e3ef; }
.badge-tile.tier-shame { background: #f1d6cf; }
.badge-tile.locked { background: var(--paper-2); opacity: .55; }
.badge-tile.locked .bt-icon { filter: grayscale(1); font-size: 22px; }
.badge-detail { grid-column: 1 / -1; background: var(--paper); border: 3px dashed var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.badge-detail p { margin: 0; font: 500 14px/1.4 var(--cond); }
.badge-detail ul { margin: 0; }
.hb-h { margin: 0 0 8px; font: 400 17px var(--chunk); color: var(--navy); }
.mini-t { box-shadow: none; border-width: 2px; }
.mini-t td, .mini-t th { padding: 6px; }
.vbars { display: grid; gap: 6px; }
.vbar { display: grid; grid-template-columns: 30px 1fr 42px; gap: 8px; align-items: center; }
.vbar i { display: block; height: 14px; background: var(--orange); border: 2px solid var(--line); border-radius: 4px; }
.vbar small { font: 8px var(--pixel); text-align: right; }
.loyal { margin-top: 12px; } .loyal p { margin: 0 0 4px; font: 500 14px/1.35 var(--cond); }
.drawer { margin-top: 14px; }
.drawer > summary { display: none; }
.drawer.folded > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer; list-style: none; padding: 12px 14px; border: 3px solid var(--line); border-radius: 12px; background: var(--yellow); box-shadow: var(--shadow); font: 9px var(--pixel); }
.drawer.folded > summary::-webkit-details-marker { display: none; }
.drawer.folded > summary small { font: 600 13px var(--cond); text-transform: uppercase; }
.drawer.folded[open] > summary { margin-bottom: 10px; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.home-grid .card { display: grid; gap: 8px; align-content: start; text-decoration: none; color: inherit; }
.home-grid h3 { margin: 0; font: 400 17px var(--chunk); color: var(--navy); }
.home-grid h3 small { font: 7px var(--pixel); color: var(--ink-2); }
.home-grid p { margin: 0; font: 500 15px/1.35 var(--cond); }
.hm-tonight { background: var(--navy); color: var(--cream); }
.hm-big { font: 10px/1.5 var(--pixel); color: var(--yellow); }
.hm-score { font: 400 34px/1 var(--chunk); }
.hm-score small { font: 8px var(--pixel); }
.hm-tonight .muted { color: #d9cfe9; }
.hm-money p.late { color: var(--red); font-weight: 700; }
.race li { display: flex; justify-content: space-between; align-items: center; }
.race li span:last-child { font: 9px var(--pixel); }
.race li.me { background: #fff1b3; border-radius: 6px; }
.hb-row { display: flex; gap: 6px; flex-wrap: wrap; }
.hb { display: grid; justify-items: center; gap: 2px; width: 74px; padding: 6px 4px; border: 2px solid var(--line); border-radius: 10px; background: var(--paper); }
.hb i { font-style: normal; font-size: 24px; }
.hb small { font: 700 10px/1.1 var(--cond); text-transform: uppercase; text-align: center; }
.hb.tier-gold { background: #fff1b3; } .hb.tier-legend { background: #ffd23f; } .hb.tier-shame { background: #f1d6cf; }
.cc-rookie { background: repeating-linear-gradient(135deg, #f6ecd2 0 18px, #c9a43a 18px 36px); }
.cc-top_dog { background: repeating-conic-gradient(from 0deg at 18% 50%, #ffd23f 0 10deg, #e23b2e 10deg 20deg); }
.cc-brick { background: linear-gradient(#6b2a1a 2px, transparent 2px) 0 0/40px 20px, linear-gradient(90deg, #6b2a1a 2px, transparent 2px) 0 0/40px 40px, linear-gradient(90deg, #6b2a1a 2px, transparent 2px) 20px 20px/40px 40px, #a3472a; }
.cc-shark { background: radial-gradient(circle at 50% 120%, #6fb4ea 0 30%, transparent 31%) 0 0/36px 24px, #1f4fa3; }
.cc-high_roller { background: radial-gradient(#ffd23f 22%, transparent 24%) 0 0/18px 18px, #2f8f4e; }
.cc-iron_man { background: linear-gradient(135deg, #c9c3d6 25%, transparent 25%) -18px 0/36px 36px, linear-gradient(225deg, #c9c3d6 25%, transparent 25%) -18px 0/36px 36px, #5a4d6e; }
.cc-mvp { background: repeating-conic-gradient(from 0deg at 18% 50%, #c9a43a 0 10deg, #23183a 10deg 20deg); }
.cc-brick_season { background: linear-gradient(#23183a 2px, transparent 2px) 0 0/40px 20px, linear-gradient(90deg, #23183a 2px, transparent 2px) 0 0/40px 40px, linear-gradient(90deg, #23183a 2px, transparent 2px) 20px 20px/40px 40px, #6b2a1a; }
.cc-shark_season { background: radial-gradient(circle at 50% 120%, #6fb4ea 0 30%, transparent 31%) 0 0/36px 24px, #1b2559; }
.cc-roller_season { background: radial-gradient(#2f8f4e 22%, transparent 24%) 0 0/18px 18px, #1b2559; }
.cc-top_night { background: radial-gradient(#ffd23f 22%, transparent 24%) 0 0/18px 18px, #1b2559; }
.cc-diamond { background: repeating-conic-gradient(#6fb4ea 0 25%, #fff8e6 0 50%) 0 0/28px 28px; }
.cc-heat_check { background: repeating-conic-gradient(from 0deg at 18% 50%, #e23b2e 0 10deg, #f26a1b 10deg 20deg); }
.cc-triple_dip { background: repeating-linear-gradient(135deg, #d6337a 0 18px, #fff8e6 18px 36px); }
.cc-penny_pincher { background: radial-gradient(#fff8e6 22%, transparent 24%) 0 0/18px 18px, #c9a43a; }
.cc-hot_streak { background: linear-gradient(135deg, #ffd23f 25%, transparent 25%) -18px 0/36px 36px, linear-gradient(225deg, #ffd23f 25%, transparent 25%) -18px 0/36px 36px, #f26a1b; }
.cc-goose_egg { background: repeating-conic-gradient(#f6ecd2 0 25%, #d9cfe9 0 50%) 0 0/28px 28px; }
.cc-foul_bait { background: radial-gradient(circle at 30% 30%, #f26a1b 0 9%, transparent 10%) 0 0/30px 30px, radial-gradient(circle at 70% 70%, #fff8e6 0 7%, transparent 8%) 0 0/30px 30px, #ffd23f; }
.cc-long_arms { background: linear-gradient(90deg, transparent 44%, #fff8e6 44% 56%, transparent 56%) 0 0/28px 100%, repeating-linear-gradient(180deg, #23183a 0 14px, #5a4d6e 14px 28px); }
.cc-leking { background: repeating-linear-gradient(135deg, #552583 0 16px, #fdb927 16px 32px); }
.cc-best_friend { background: radial-gradient(circle at 50% 60%, #e23b2e 0 18%, transparent 19%) 0 0/34px 34px, #f6ecd2; }
.cc-bozo_dubbed { background: radial-gradient(circle, #e23b2e 0 22%, transparent 24%) 0 0/26px 26px, repeating-linear-gradient(45deg, #ffd23f 0 12px, #6fb4ea 12px 24px); }
.cc-ghost { background: radial-gradient(circle at 50% 120%, #5a4d6e 0 30%, transparent 31%) 0 0/36px 24px, #d9cfe9; }
.cc-cl_qualifier { background: repeating-linear-gradient(135deg, #4b2a91 0 18px, #ffd23f 18px 36px); }
.cc-cl_champion { background: repeating-conic-gradient(from 0deg at 18% 50%, #ffd23f 0 10deg, #4b2a91 10deg 20deg); }
.cc-dynasty { background: linear-gradient(90deg, #23183a 50%, transparent 50%) 0 0/24px 12px, linear-gradient(#c9a43a 60%, #23183a 60%) 0 0/24px 24px; }
.cc-comeback { background: linear-gradient(180deg, #a3472a 0 50%, #ffd23f 50% 100%); }
.cc-moneyball { background: linear-gradient(45deg, transparent 46%, #ffd23f 46% 54%, transparent 54%) 0 0/30px 30px, #2f8f4e; }
.cc-bench_mob { background: repeating-linear-gradient(90deg, #6b2a1a 0 6px, #c9a43a 6px 30px); }
.cc-lone_wolf { background: radial-gradient(circle at 78% 40%, #fff8e6 0 14%, transparent 15%), radial-gradient(#6fb4ea 8%, transparent 9%) 0 0/22px 22px, #1b2559; }
.cc-photo_finish { background: repeating-conic-gradient(#23183a 0 25%, #fff8e6 0 50%) 0 0/20px 20px; }
.cc-ride_or_die { background: repeating-linear-gradient(45deg, #e23b2e 0 10px, #fff8e6 10px 20px, #1f4fa3 20px 30px, #fff8e6 30px 40px); }
.cc-twins { background: linear-gradient(90deg, #d6337a 50%, #6fb4ea 50%) 0 0/36px 36px; }
.cc-all_knowing { background: radial-gradient(circle at 50% 45%, #fff8e6 0 6%, #b48cf2 7% 16%, transparent 17%) 0 0/34px 34px, linear-gradient(160deg, #2a1d5c, #7b4bd1); }
.cc-mystery { background: radial-gradient(#7b4bd1 18%, transparent 20%) 0 0/16px 16px, #23183a; }
.badge-tile.tier-mystery { background: #d9cfe9; border-style: dashed; }
.badge-tile.tier-mystery.locked .bt-icon { filter: none; }
/* Badges page */
.bdg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.bdg-row { display: flex; gap: 12px; background: var(--paper); border: 3px solid var(--line); border-radius: 14px; box-shadow: 3px 3px 0 var(--line); padding: 10px; min-width: 0; }
.bdg-row.tier-legend { background: #fff1b3; }
.bdg-row.secret { background: #ece6f5; border-style: dashed; }
.bdg-art.ccard { flex: 0 0 76px; height: 92px; padding: 0; justify-content: center; box-shadow: 2px 2px 0 var(--line); border-width: 2px; }
.bdg-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--paper); border: 3px solid var(--line); font-size: 26px; box-shadow: 2px 2px 0 var(--line); }
.bdg-row.tier-legend .bdg-icon { background: var(--yellow); }
.bdg-body { min-width: 0; flex: 1; display: grid; gap: 4px; align-content: start; }
.bdg-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bdg-name b { font: 400 17px/1.1 var(--chunk); }
.bdg-tag { font: 7px/1 var(--pixel); padding: 3px 5px; border: 2px solid var(--line); border-radius: 5px; background: var(--paper-2); }
.bdg-tag.sec { background: #7b4bd1; color: #fff; }
.bdg-tag.shame { background: #f1d6cf; }
.bdg-tag.you { background: var(--green); color: #fff; }
.bdg-desc, .bdg-hint { margin: 0; font-size: 14px; line-height: 1.3; }
.bdg-hint { font-style: italic; color: var(--ink-2); }
.bdg-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink-2); text-transform: uppercase; }
.bdg-stats b { color: var(--ink); font-size: 14px; }
.bdg-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; }
.bdg-recent .userc b { font-size: 13px; }
.fresh { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fresh li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 2px solid var(--line); border-radius: 10px; background: var(--paper-2); min-width: 0; }
.fresh li.tier-gold { background: #fff1b3; } .fresh li.tier-legend { background: #ffd23f; } .fresh li.tier-shame { background: #f1d6cf; }
.fresh .fh-icon { font-size: 22px; flex: 0 0 auto; }
.fresh .fh-what { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 5px; font-size: 14px; }
.fresh .fh-what .userc b { font-size: 14px; }
.fresh small { flex: 0 0 auto; font: 7px var(--pixel); text-transform: uppercase; }
.hm-fresh .more { display: inline-block; margin-top: 8px; font-size: 13px; }
@media (max-width: 420px) { .bdg-list { grid-template-columns: 1fr; } .bdg-art.ccard { flex-basis: 62px; height: 84px; } .bdg-icon { width: 42px; height: 42px; font-size: 22px; } }
@media (max-width: 860px) { .ccard.big { padding: 16px 12px; } .home-grid { grid-template-columns: 1fr; } .badge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
ol.plain.race { padding-left: 0; list-style: none; display: grid; gap: 4px; }
.race li { padding: 3px 6px; }
/* $7 and $8: small-slate standouts */
.val[data-v="7"] { --c: #e7e9ee; color: var(--ink); text-shadow: none; animation: shine 2s steps(4) infinite; }
.val[data-v="8"] { --c: #6fe3ff; color: var(--ink); text-shadow: none; animation: shine 1.2s steps(4) infinite; }
.pill.bump { background: #6fe3ff; }
.practice.bumped { background: #c9f2ff; }
.practice .nb { font: 700 15px var(--cond); margin: 0; }

/* ---------- Mini-Game counter offers ---------- */
.tk-counters { margin-top: 10px; padding-top: 10px; border-top: 2px dashed var(--paper-2); display: grid; gap: 8px; }
.tk-counters > b { font: 8px var(--pixel); color: var(--purple); }
.tk-counter { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 14px/1.35 var(--cond); }
.tk-counter-btns { display: flex; gap: 6px; }
.tk-counter-form { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.tk-counters small { font: 500 13px/1.35 var(--cond); }
.tk-act-row { display: flex; gap: 10px; justify-content: flex-end; align-items: center; flex-wrap: wrap; width: 100%; }
.btn.counter-btn { background: var(--yellow); color: var(--ink); }
.tk-counters:empty { display: none; }
/* Mini-Games fair odds */
.tk-risk { font: 7px/1.3 var(--pixel); color: var(--ink-2); }
.tk-odds { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 8px; font-size: 13px; }
.tk-odds b { font-weight: 800; }
.tk-dk { font: 7px/1 var(--pixel); padding: 4px 6px; border: 2px solid var(--line); border-radius: 5px; background: #2f8f4e; color: #fff; }
.tk-dk.avg { background: var(--paper-2); color: var(--ink); }
.tk-quote, .slip-quote { font-size: 13px; line-height: 1.35; }
.slip-quote { margin: 8px 0 4px; padding: 8px 10px; border: 2px dashed var(--line); border-radius: 10px; background: var(--paper-2); }
.slip-quote:empty, .tk-quote:empty { display: none; }
.slip-quote .bad, .tk-quote .bad { color: var(--red); }
/* Crumpled Paper */
.paper-how summary, .pp-sheet summary, .pp-edit summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.pp-ous { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 16px; }
.pp-ou { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px dashed var(--paper-2); min-width: 0; }
.pp-ou > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-line { font: 400 16px var(--chunk); }
.pp-ou .seg button, .pp-prop .seg button { padding: 6px 10px; }
.pp-awards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.pp-award select, .pp-award input, .pp-awards select, .pp-awards input { width: 100%; }
.pp-lock { font: 7px/1.3 var(--pixel); color: var(--green); }
.pp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.pp-slots { display: grid; gap: 6px; }
.pp-slot { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; }
.pp-slot select { width: 100%; }
.pp-prop { display: grid; gap: 6px; padding: 8px 0; border-bottom: 1px dashed var(--paper-2); }
.pp-prop .seg { flex-wrap: wrap; }
.pp-save { position: sticky; bottom: 0; display: grid; gap: 6px; justify-items: center; padding: 12px; margin-top: 12px; background: var(--main-bg); border-top: 3px solid var(--line); z-index: 5; }
.pp-edit { margin-top: 10px; }
.pp-edit-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px; margin: 6px 0; }
.pp-edit-row input { min-width: 0; }
.pp-edit-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.pp-sheet ul { margin-top: 8px; }
@media (max-width: 420px) { .pp-ous, .pp-awards, .pp-two { grid-template-columns: 1fr; } .pp-edit-row { grid-template-columns: 1fr; } .pp-save { padding: 8px; } .pp-save small { display: none; } }

/* Venmo */
.iou-venmo { grid-column: 1 / -1; font: 600 13px/1.4 var(--cond); }
.btn.venmo { background: #3d95ce; color: #fff; text-decoration: none; }
.venmo-ask { border: 4px solid var(--line); border-radius: 14px; box-shadow: 6px 6px 0 var(--red); background: var(--paper); color: var(--ink); padding: 18px; width: min(380px, calc(100vw - 32px)); }
.venmo-ask::backdrop { background: rgba(35, 24, 58, .55); }
.venmo-ask h3 { font: 12px/1.4 var(--pixel); margin: 0 0 10px; color: var(--red); }
.venmo-ask p { margin: 0 0 12px; }
.venmo-ask .row { display: flex; gap: 8px; margin-top: 12px; }

/* 💬 button + chat */
.chat-btn {
  position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 3px solid var(--line); background: var(--paper); text-decoration: none; font-size: 22px; line-height: 1;
  box-shadow: 2px 2px 0 var(--line); margin-left: auto;
}
.chat-btn[hidden] { display: none; }
.chat-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--line); }
.chat-btn:not([hidden]) + .help-btn { margin-left: 8px; }
.chat-count {
  position: absolute; top: -6px; right: -8px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; font: 8px/16px var(--pixel); font-style: normal;
  background: var(--red); color: #fff; border: 2px solid var(--line); text-align: center;
}
.chat-count[hidden] { display: none; }
.chat-row { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 12px 14px; }
.chat-row.room { margin-bottom: 18px; background: var(--yellow); }
.chat-row.new { border-color: var(--red); }
.chat-list { gap: 8px; }
.chat-ico { font-size: 22px; width: 28px; text-align: center; flex-shrink: 0; }
.chat-mid { display: grid; min-width: 0; flex: 1; }
.chat-mid b { font: 700 16px/1.2 var(--cond); }
.chat-prev { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.chat-end { display: grid; justify-items: end; gap: 4px; flex-shrink: 0; }
.chat-end small { font: 7px var(--pixel); color: var(--ink-2); }
.chat-unread { background: var(--red); color: #fff; border: 2px solid var(--line); border-radius: 10px; font: 8px/1 var(--pixel); padding: 4px 6px; }
.chat-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.chat-title { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; min-width: 0; }
.chat-title b { font: 700 20px/1.1 var(--cond); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; height: min(68vh, 640px); height: min(68dvh, 640px); }
.msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px; background: var(--cream); }
.msgs .empty { margin: auto; }
.msgs-more { align-self: center; margin: 10px 0 0; }
.msg { max-width: 80%; align-self: flex-start; display: grid; gap: 2px; }
.msg.mine { align-self: flex-end; justify-items: end; }
.msg-who { display: flex; align-items: center; gap: 6px; }
.msg.head { margin-top: 8px; }
.msg-who .dot { width: 22px; height: 22px; font-size: 7px; border-width: 2px; }
.msg-who b { font: 700 13px var(--cond); }
.msg-b { background: var(--paper); border: 2px solid var(--line); border-radius: 12px 12px 12px 4px; padding: 7px 11px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }
.msg.mine .msg-b { background: var(--yellow); border-radius: 12px 12px 4px 12px; }
.msg small { font: 6px var(--pixel); color: var(--ink-2); padding: 0 2px; }
.chat-send { display: flex; gap: 8px; padding: 10px; border-top: 3px solid var(--line); background: var(--paper); align-items: flex-end; }
.chat-send textarea { flex: 1; resize: none; min-height: 42px; border: 3px solid var(--line); border-radius: 8px; padding: 9px 10px; font: 500 16px/1.3 var(--cond); background: #fff; color: var(--ink); }
@media (max-width: 860px) {
  .chat-btn { margin-left: auto; }
  .chat-btn:not([hidden]) + .help-btn { margin-left: 8px; }
  .chat-card { height: calc(100dvh - 230px); min-height: 340px; }
}

/* Game Scores */
.sc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.sc-card { display: grid; gap: 8px; text-decoration: none; color: inherit; padding: 12px 14px; }
.sc-card:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--line); }
.sc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sc-top small { font: 6px/1.4 var(--pixel); color: var(--ink-2); text-align: right; }
.sc-top .when { font: 8px var(--pixel); color: var(--purple); }
.sc-team { display: flex; align-items: center; gap: 10px; }
.sc-name { flex: 1; display: grid; min-width: 0; }
.sc-name b { font: 700 17px/1.1 var(--cond); text-transform: uppercase; }
.sc-name small { font: 7px var(--pixel); color: var(--ink-2); margin-top: 2px; }
.sc-pts { font: 16px var(--pixel); color: var(--ink-2); }
.sc-team.won .sc-pts { color: var(--ink); }
.sc-team.won .sc-name b::after { content: " ◀"; color: var(--red); font-size: 12px; }
.sc-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font: 600 14px var(--cond); border-top: 2px dashed var(--paper-2); padding-top: 8px; }
.sc-foot .muted { font: 7px/2 var(--pixel); }
.sc-league { display: flex; gap: 6px; flex-wrap: wrap; }
.gm-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; text-align: center; margin-top: 14px; }
.gm-team { display: grid; justify-items: center; gap: 6px; }
.gm-team b { font: 700 16px/1.1 var(--cond); text-transform: uppercase; }
.gm-team small, .gm-mid small { font: 7px/1.6 var(--pixel); color: var(--ink-2); }
.gm-mid { display: grid; justify-items: center; gap: 6px; }
.gm-score { font: 20px var(--pixel); white-space: nowrap; }
.t.lines { margin-top: 12px; }
.t.lines td, .t.lines th { padding: 7px 8px; }
.t .num.tot { color: var(--red); }
.t .fpc { color: var(--purple); }
.t .hot { background: #fff1b3; }
.gm-fp { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 4px; padding: 10px 14px; background: var(--yellow); border: 3px solid var(--line); border-radius: 10px; box-shadow: 3px 3px 0 var(--line); }
.gm-fp small { font: 8px var(--pixel); }
.gm-fp b { font: 16px var(--pixel); }
.t.bx .bx-sub th { background: var(--paper-2); color: var(--ink); }
.t.bx tfoot td { border-top: 3px solid var(--line); font-weight: 700; }
.t.bx .bx-name { position: sticky; left: 0; background: var(--paper); z-index: 1; }
.t.bx .bx-sub th:first-child { position: sticky; left: 0; z-index: 1; }
.t tr.dnp td { color: var(--ink-2); }
.t .bn { font: 6px/1.4 var(--pixel); color: var(--red); white-space: normal; }
.t.cmp td:first-child { font-family: var(--pixel); font-size: 10px; }
.t.cmp td:nth-child(2) { text-align: center; font-size: 13px; }
.t.glog .res { font: 600 13px var(--cond); }
.pickers { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.pickers.sm { gap: 2px; margin-top: 3px; }
.pickers .userc b { font-size: 13px; }
.pa { display: grid; gap: 8px; padding: 12px 14px; }
.pa-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pa-head small { font: 7px var(--pixel); color: var(--ink-2); }
.pa-head b { font: 700 16px var(--cond); }
.pa-sides { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pa-side { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border: 2px solid var(--paper-2); border-radius: 8px; }
.pa-side.won { border-color: var(--green); background: #e6f4ea; }
.pa-side > b { font: 9px var(--pixel); }
.pa-sides .vs { font: 8px var(--pixel); color: var(--red); }
.sort-seg { margin-bottom: 10px; }
@media (max-width: 860px) {
  .sc-grid { grid-template-columns: 1fr; }
  .gm-head { grid-template-columns: 1fr auto 1fr; padding: 12px 8px; }
  .gm-team b { font-size: 13px; }
  .gm-score { font-size: 15px; }
}
@media (max-width: 860px) {
  .t.plist td:nth-child(2) { white-space: normal; min-width: 80px; }
  .t.plist td, .t.plist th { padding: 8px 4px; }
  .t.plist td:nth-child(2) .pill { margin-top: 3px; }
  .t.plist td:nth-child(2) .userc > span:first-child { display: none; }
  .t.plist td:nth-child(2) b { font-size: 14px; line-height: 1.15; }
  .t.plist .rk { width: 26px; font-size: 8px; }
}
.game-tile { text-decoration: none; color: inherit; }
.rank-seg { margin-bottom: 10px; }
.rank-seg .btn.on { background: var(--navy); color: var(--yellow); }
.rank-seg { flex-wrap: nowrap; }
.rank-seg .btn { flex: 0 1 auto; min-width: 0; padding: 8px 10px; }
@media (max-width: 420px) { .rank-seg .btn { font-size: 10px; padding: 8px 7px; } }

/* MOSH Bucks */
.money .usd { font: 600 11px var(--cond); color: var(--ink-2); }
.bk-rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 14px; padding: 12px 16px; background: var(--yellow); border: 3px solid var(--line); border-radius: 12px; box-shadow: 3px 3px 0 var(--line); }
.bk-rate b { font: 13px var(--pixel); }
.bk-rate span { font: 600 14px var(--cond); }
.bk-me { display: grid; gap: 8px; margin-bottom: 14px; }
.bk-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bk-row b { font: 8px var(--pixel); color: var(--ink-2); }
.bk-row span { font: 700 16px var(--cond); }
.bk-row.big { border-top: 2px dashed var(--paper-2); padding-top: 8px; }
.bk-row.big span { font: 11px/1.5 var(--pixel); }
.pos { color: var(--green); } .neg { color: var(--red); }
.bk-bar { height: 14px; border: 2px solid var(--line); border-radius: 7px; background: var(--paper-2); overflow: hidden; }
.bk-bar i { display: block; height: 100%; background: var(--green); }
.bk-how summary { cursor: pointer; font: 700 15px var(--cond); text-transform: uppercase; }
.bk-how ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.bk-form { margin-bottom: 12px; }
.bk-inputs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bk-inputs select { flex: 1 1 140px; }
.bk-inputs input { width: 72px; }
.bk-ch { display: grid; gap: 8px; padding: 12px 14px; }
.bk-ch-top, .bk-ch-bot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bk-ch .vs { font: 8px var(--pixel); color: var(--red); }
.lp-wager { margin-bottom: 14px; }
.king { margin-bottom: 14px; }
.king-card { border-color: var(--line); background: #fff4c7; }
.king-card.in { box-shadow: 4px 4px 0 var(--yellow), 6px 6px 0 var(--line); }
.king-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.king-head h3 { margin: 0; font-family: var(--chunk); letter-spacing: .5px; }
.king-line { margin: 8px 0; color: var(--ink); }
.king-list { display: grid; gap: 4px; margin: 6px 0 10px; }
.king-row { display: flex; align-items: center; gap: 6px; }
.king-row.mine b { text-decoration: underline; }
.king-row .crown { width: 22px; text-align: center; }
.king-row .sc { margin-left: auto; font-family: var(--chunk); }
.king-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.king-actions small { color: var(--ink); opacity: .7; }
.lp-wager.needed .card { border-color: var(--red); box-shadow: 4px 4px 0 var(--red); }
.wager input[type=number] { width: 64px; }

/* money bar on every page */
.wallet { display: flex; gap: 8px; align-items: stretch; margin: 0 0 14px; }
.wallet:empty { display: none; }
.wl-main { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; padding: 8px 12px; border: 3px solid var(--line); border-radius: 10px; background: var(--paper);
  box-shadow: 2px 2px 0 var(--line); text-decoration: none; color: var(--ink); font: 600 14px var(--cond); }
.wl-main b { font: 700 15px var(--cond); text-transform: uppercase; white-space: nowrap; }
.wl-main span { margin-left: auto; font: 7px var(--pixel); color: var(--ink-2); white-space: nowrap; }
.wl-main.owe { background: #ffe3dc; border-color: var(--red); box-shadow: 2px 2px 0 var(--red); }
.wl-main.owe b { color: var(--red); }
.wl-main.owed b { color: var(--green); }
.wl-prog { position: relative; flex: 0 0 104px; display: grid; place-items: center; overflow: hidden; border: 3px solid var(--line); border-radius: 10px;
  background: var(--paper-2); box-shadow: 2px 2px 0 var(--line); text-decoration: none; color: var(--ink); }
.wl-prog i { position: absolute; left: 0; top: 0; bottom: 0; background: #9fd8a8; }
.wl-prog span { position: relative; font: 7px var(--pixel); }
.wl-prog.done { background: #9fd8a8; }

/* bet buttons on the Live Board */
.brow { grid-template-columns: 44px 170px 1fr 90px 82px; }
.bet-btn { padding: 6px 8px; font-size: 12px; white-space: nowrap; justify-self: end; }
.bet-pill { justify-self: end; font: 7px/1 var(--pixel); padding: 6px 7px; border: 2px solid var(--line); border-radius: 6px; background: var(--paper-2); white-space: nowrap; }
.bet-pill.on { background: var(--yellow); }
@media (max-width: 860px) {
  .brow { grid-template-columns: 34px 1fr auto auto; }
  .brow .picks { order: 5; }  /* name, score and bet button on top; the lineup underneath */
}

/* Picks: lineup on the court isn't saved */
.unsaved { background: #fde3df; border: 3px solid var(--red); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; font-size: 14px; }
.unsaved b { color: var(--red); }

/* join requests */
.card.featured summary { cursor: pointer; font: 700 16px var(--cond); text-transform: uppercase; }
.card.featured p { margin: 10px 0 0; }
.card.featured .btn { margin-top: 10px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; color: inherit; cursor: pointer; }
.jr { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.jr-btns { display: flex; gap: 8px; }
.practice.relief { background: #e6f4ea; }

/* Matchup lineups (tap a head-to-head card) */
.mcard.tap { cursor: pointer; border-radius: 10px; }
.mcard.tap:hover, .mcard.tap:focus-visible { background: var(--paper-2); outline: none; }
.mlu-hint { display: block; font: 7px var(--pixel); color: var(--purple); margin-top: 4px; }
.mlu { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 4px 4px; border-top: 2px dashed var(--paper-2); margin-top: 8px; }
.mlu-side { display: grid; gap: 6px; align-content: start; min-width: 0; }
.mlu-side.win .mlu-head { color: var(--green); }
.mlu-head { display: flex; align-items: center; gap: 6px; font: 700 14px var(--cond); text-transform: uppercase; min-width: 0; }
.mlu-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlu-head span { font: 10px var(--pixel); }
.mlu-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mlu-picks li { display: grid; grid-template-columns: 34px 1fr auto; gap: 6px; align-items: center; padding: 4px 6px; border: 2px solid var(--line); border-radius: 8px; background: var(--paper-2); min-width: 0; }
.mlu-picks li.live { border-color: var(--red); }
.mlu-picks li.hidden { opacity: .7; border-style: dashed; }
.mlu-pic { width: 34px; height: 34px; display: block; border-radius: 6px; overflow: hidden; }
.mlu-pic canvas { width: 34px; height: 34px; display: block; }
.mlu-pic.q { display: grid; place-items: center; background: var(--paper); font: 12px var(--pixel); }
.mlu-nm { display: grid; min-width: 0; }
.mlu-nm b { font: 700 13px/1.15 var(--cond); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlu-nm small { font-size: 11px; color: var(--ink-2); line-height: 1.25; }
.mlu-live { color: var(--red) !important; font-weight: 700; }
.mlu-bonus { color: var(--green) !important; font-weight: 700; }
.mlu-fp { font: 10px var(--pixel); white-space: nowrap; }
.mlu-foot { grid-column: 1 / -1; font: 7px var(--pixel); }
@media (max-width: 560px) { .mlu { grid-template-columns: 1fr; } }

/* Cleanup: folding info boxes, starter pop-up, sub-menu spacing */
.subtabs + .wallet { margin-top: 12px; }
.subtabs { margin-bottom: 4px; }
.fold { border: 3px solid var(--line); border-radius: 12px; background: var(--paper); margin: 0 0 10px; box-shadow: 2px 2px 0 var(--line); }
.fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary b { font: 700 14px var(--cond); text-transform: uppercase; }
.fold summary small { margin-left: auto; font: 7px var(--pixel); color: var(--ink-2); }
.fold summary::after { content: "▾"; font-size: 14px; }
.fold[open] summary::after { content: "▴"; }
.fold > p, .fold > a { margin: 0 12px 10px; display: block; font-size: 14px; }
.champ-fold { background: #fff1b3; }
.jam.tap { cursor: pointer; }
.ppop { border: 4px solid var(--line); border-radius: 16px; padding: 0; max-width: min(380px, calc(100vw - 32px)); width: 100%; background: var(--paper); color: var(--ink); box-shadow: 6px 6px 0 var(--line); }
.ppop::backdrop { background: rgba(35, 24, 58, .55); }
.ppop-in { position: relative; display: grid; gap: 10px; padding: 16px; }
.ppop .x-close { position: absolute; top: 8px; right: 8px; }
.ppop-head { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding-right: 26px; }
.ppop-head canvas { width: 56px; height: 56px; border: 2px solid var(--line); border-radius: 8px; }
.ppop-head b { display: block; font: 400 18px/1.1 var(--chunk); }
.ppop-head small { display: block; font-size: 13px; color: var(--ink-2); }
.ppop-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ppop-stats div { border: 2px solid var(--line); border-radius: 8px; background: var(--paper-2); text-align: center; padding: 6px 2px; display: grid; gap: 2px; }
.ppop-stats b { font: 10px var(--pixel); }
.ppop-stats small { font: 7px var(--pixel); color: var(--ink-2); }
.ppop .btn { justify-self: start; }

/* ---------- MOSHBALL Football ---------- */
/* basketball / football switch in the header */
.sport-switch { display: flex; gap: 2px; border: 3px solid var(--line); border-radius: 999px; background: var(--ink); padding: 2px; flex-shrink: 0; }
.sport-switch button { display: flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; background: transparent; color: var(--cream); padding: 4px 8px; cursor: pointer; font: 700 12px var(--cond); text-transform: uppercase; }
.sport-switch button.on { background: var(--yellow); color: var(--ink); }
.sport-switch .ic { font-size: 16px; line-height: 1; }
.sport-switch .lb { display: none; }
@media (min-width: 1000px) { .sport-switch .lb { display: inline; } }
.sport-pick-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sport-pick-row .btn { flex: 1 1 140px; font-size: 18px; padding: 14px; }

/* the field: turf with yard lines in place of the hardwood */
.court.field { background: repeating-linear-gradient(90deg, #4f9a3a 0 44px, #5aa844 44px 88px); }
.court.field::before { left: 0; right: 0; bottom: auto; top: 0; width: auto; height: 100%; transform: none; border: 0; border-radius: 0;
  background: repeating-linear-gradient(90deg, transparent 0 86px, rgba(255,248,230,.55) 86px 88px); }
.court.field::after { background: linear-gradient(180deg, rgba(20,60,20,.35), transparent 45%); }
.nfl-lineup { grid-template-columns: repeat(4, 1fr); gap: 14px 8px; min-height: 0; }
.nfl-lineup .slot { position: relative; }
.nfl-lineup button.slot { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.nfl-lineup .slot.empty .ghost { height: 150px; }
.pos-tag { font: 8px var(--pixel); color: var(--ink); background: var(--yellow); border: 2px solid var(--line); border-radius: 6px; padding: 3px 5px; }

/* a player on the field */
.gfig { position: relative; width: 96px; height: 150px; animation: sway 1.1s steps(2) infinite; transform-origin: 50% 100%; }
.gfig .head { position: absolute; left: 50%; top: 0; width: 76px; height: 76px; transform: translateX(-50%); z-index: 2; border-radius: 10px; }
.gfig .body { position: absolute; left: 50%; bottom: 0; width: 72px; height: 90px; transform: translateX(-50%); z-index: 1; }
.gfig .fb { position: absolute; right: 6px; bottom: 40px; width: 26px; height: 16px; z-index: 3; }
.gfig.def .head { background: rgba(255,248,230,.85); border: 3px solid var(--line); }
.gfig.d1 { animation-delay: -.2s; } .gfig.d2 { animation-delay: -.45s; } .gfig.d3 { animation-delay: -.7s; } .gfig.d4 { animation-delay: -.9s; }
.gfig.tap { cursor: pointer; }
.gfig.cheer { animation: dunk .9s cubic-bezier(.3,1.6,.6,1) 1; }

/* the player list */
.pos-tabs { display: flex; gap: 4px; flex-wrap: wrap; flex-basis: 100%; }
.pos-tabs button { font: 8px var(--pixel); border: 2px solid var(--line); border-radius: 8px; background: var(--paper); padding: 7px 9px; cursor: pointer; }
.pos-tabs button.on { background: var(--yellow); box-shadow: 2px 2px 0 var(--line); }
.pcard .who .sl { font-size: 11px; color: var(--ink); }
.nfl-join p { margin: 0 0 12px; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .nfl-lineup { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 4px; }
  .nfl-lineup .slot { flex: none; min-width: 0; }
  .gfig, .nfl-lineup .slot.empty .ghost { width: 70px; height: 112px; }
  .gfig .head { width: 56px; height: 56px; }
  .gfig .body { width: 54px; height: 68px; }
  .gfig .fb { width: 20px; height: 12px; bottom: 30px; right: 2px; }
  .nfl-lineup .slot .nm { font-size: 11px; padding: 2px 4px; }
  .nfl-lineup .slot .meta .tm { display: none; }
}
/* football live board: eight picks wrap to two rows of four on a phone */
@media (max-width: 720px) {
  .nfl-brow .picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .nfl-brow .mini { width: auto; }
}
.mini.hidden small { display: block; font: 7px var(--pixel); color: var(--ink-2); }

/* ---------- football animations ---------- */
.gfig .body.pads { width: 84px; height: 84px; }
.gfig .fb { right: auto; left: 2px; }
.gfig .helmet { position: absolute; z-index: 4; transform: translate(-50%, -50%) rotate(-14deg); left: 84%; top: 66%; width: 44px; height: 44px;
  transition: left .5s cubic-bezier(.3,1.4,.6,1), top .5s cubic-bezier(.3,1.4,.6,1), width .5s, height .5s, transform .5s; }
.gfig.hat-on .helmet { left: 50%; top: 38px; width: 82px; height: 82px; transform: translate(-50%, -50%); }
.gfig { transition: transform .5s ease; }
.gfig.huddle { animation: none; transform: translate(var(--hx), var(--hy)) scale(.92); z-index: 5; }
.gfig.breaking { animation: none; transform: none; }
.gfig.kick { animation: kick .5s ease-out 1; }
@keyframes kick { 30% { transform: translateY(-6px) rotate(-8deg); } 60% { transform: translateY(-14px) rotate(10deg); } 100% { transform: none; } }

.fg-post { position: absolute; z-index: 6; left: 50%; top: 10px; width: 74px; height: 90px; transform: translateX(-50%); pointer-events: none; animation: popin .3s ease-out both; }
.fg-post::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46px; border: 6px solid #ffd23f; border-top: 0; box-shadow: 2px 2px 0 var(--line); }
.fg-post::after { content: ""; position: absolute; left: 50%; top: 40px; width: 6px; height: 50px; transform: translateX(-50%); background: #ffd23f; box-shadow: 2px 2px 0 var(--line); }
.fg-ball { position: absolute; z-index: 7; left: 0; top: 0; width: 28px; height: 18px; pointer-events: none; }
.fg-ball canvas { width: 100%; height: 100%; display: block; }
.fg-banner, .cel-banner { position: absolute; z-index: 8; left: 50%; top: 42%; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font: 400 34px/1 var(--chunk); color: var(--yellow); text-shadow: 3px 3px 0 var(--red), 5px 5px 0 var(--line); -webkit-text-stroke: 1px var(--line); animation: popin .35s cubic-bezier(.3,1.6,.6,1) both; }
@keyframes popin { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }

/* D/ST celebration */
.celebrate { position: absolute; inset: 0; z-index: 9; background: repeating-linear-gradient(90deg, #3f8a30 0 44px, #4a9a3a 44px 88px); overflow: hidden; cursor: pointer; transition: opacity .3s; animation: popin .25s ease-out both; }
.celebrate.out { opacity: 0; }
.celebrate .endzone { position: absolute; left: 0; right: 0; top: 0; height: 34%; display: grid; place-items: center; font: 400 26px/1 var(--chunk); color: rgba(255,248,230,.85);
  letter-spacing: 3px; border-bottom: 5px solid rgba(255,248,230,.8); text-shadow: 2px 2px 0 var(--line); overflow: hidden; white-space: nowrap; }
.celebrate .cel-banner { top: 47%; font-size: 30px; animation-delay: .5s; }
.crew { position: absolute; left: 0; right: 0; bottom: 10%; height: 84px; }
.dman { position: absolute; bottom: 0; width: 46px; height: 76px; animation: runin .55s ease-out both; }
.dman::before { content: ""; position: absolute; top: 12px; left: 50%; width: 18px; height: 18px; transform: translateX(-50%); background: #8c6042; }
.dman .pads { position: absolute; left: 0; bottom: 0; width: 46px; height: 46px; }
.dman .helmet { position: absolute; z-index: 1; left: 50%; top: 0; width: 36px; height: 36px; transform: translateX(-50%); }
@keyframes runin { from { transform: translateX(-420px); } to { transform: none; } }
/* routine 1: bowling for pins */
.c-bowl .bowler { left: 8%; animation: runin .5s ease-out both, crouch .3s .6s ease-out both; }
@keyframes crouch { to { transform: translateY(10px) rotate(-12deg); } }
.c-bowl .rollball { position: absolute; left: calc(8% + 40px); bottom: 2px; width: 22px; height: 14px; animation: roll .9s .9s linear both; }
.c-bowl .rollball canvas { width: 100%; height: 100%; display: block; }
@keyframes roll { from { opacity: 1; transform: translateX(0) rotate(0); } to { opacity: 1; transform: translateX(min(52vw, 360px)) rotate(900deg); } }
.c-bowl .pin { animation: runin .55s ease-out both, pinfall .45s ease-in both; }
.c-bowl .p1 { left: 62%; animation-delay: .1s, 1.7s; }
.c-bowl .p2 { left: calc(62% + 34px); bottom: 10px; animation-delay: .2s, 1.8s; }
.c-bowl .p3 { left: calc(62% + 68px); animation-delay: .3s, 1.9s; }
@keyframes pinfall { to { transform: rotate(80deg) translate(18px, 10px); } }
/* routine 2: the team photo */
.c-photo .crew { display: flex; justify-content: center; align-items: flex-end; gap: 4px; }
.c-photo .pose { position: relative; }
.c-photo .pose:nth-child(2) { animation-delay: .1s; } .c-photo .pose:nth-child(3) { animation-delay: .2s; } .c-photo .pose:nth-child(4) { animation-delay: .3s; }
.c-photo .shooter { left: 50%; bottom: -14px; margin-left: -23px; z-index: 2; animation: runin .5s .4s ease-out both, crouch .3s 1s ease-out both; }
.c-photo .flash { position: absolute; inset: -400px; background: #fff; opacity: 0; animation: flash .5s 1.9s ease-out both; pointer-events: none; }
@keyframes flash { 20% { opacity: .95; } 100% { opacity: 0; } }
/* routine 3: jump and bump */
.c-bump .crew { display: flex; justify-content: center; align-items: flex-end; gap: 0; }
.c-bump .bumper { position: relative; margin: 0 2px; }
.c-bump .bumper.l { animation: runin .5s ease-out both, bumpl .45s .8s ease-in-out 4 alternate; }
.c-bump .bumper.r { animation: runin .5s .1s ease-out both, bumpr .45s .8s ease-in-out 4 alternate; }
.c-bump .bumper:nth-child(3) { margin-left: 26px; }
@keyframes bumpl { to { transform: translate(8px, -30px) rotate(12deg); } }
@keyframes bumpr { to { transform: translate(-8px, -30px) rotate(-12deg); } }

@media (max-width: 720px) {
  .gfig .body.pads { width: 64px; height: 64px; }
  .gfig .helmet { width: 34px; height: 34px; }
  .gfig.hat-on .helmet { left: 50%; top: 28px; width: 60px; height: 60px; }
  .fg-banner, .cel-banner { font-size: 26px; }
  .celebrate .endzone { font-size: 18px; }
  .dman { width: 38px; height: 62px; }
  .dman .pads { width: 38px; height: 38px; }
  .dman .helmet { width: 30px; height: 30px; }
  .dman::before { top: 10px; width: 14px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) { .gfig, .gfig .helmet { transition: none; animation: none; } }

/* info boxes minimize to their title */
.practice .pmin { float: right; margin: -4px -6px 2px 8px; width: 26px; height: 26px; border: 2px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink);
  font: 700 16px/1 var(--cond); cursor: pointer; display: grid; place-items: center; padding: 0; }
.practice.min { padding-top: 8px; padding-bottom: 8px; }
.practice.min .pbody { display: none; }
.practice.min > b { cursor: pointer; }

/* how-to-play demo */
.demo { max-width: min(440px, calc(100vw - 32px)); }
.demo .demo-k { font: 7px var(--pixel); color: var(--purple); padding-right: 30px; }
.demo h2.sec { margin: 0; }
.demo .demo-t { margin: 0; font: 600 15px/1.4 var(--cond); word-spacing: .12em; }  /* an emoji's space is thin in this font */
.demo-dots { display: flex; gap: 6px; justify-content: center; }
.demo-dots i { width: 9px; height: 9px; border: 2px solid var(--line); border-radius: 50%; background: var(--paper); }
.demo-dots i.on { background: var(--red); }
.demo .row-btns { justify-content: space-between; }
.demo-replay { margin: 0 0 14px; }
.scene { position: relative; height: 130px; border: 3px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: repeating-linear-gradient(90deg, #d79a55 0 34px, #cf9149 34px 68px); }
.sport-nfl .scene { background: repeating-linear-gradient(90deg, #4f9a3a 0 44px, #5aa844 44px 88px); }
.s-pick { flex-direction: column; gap: 8px; padding: 0 10px; height: 150px; }
.s-slots { display: grid; gap: 6px; width: 100%; max-width: 360px; }
.s-slot { display: grid; justify-items: center; gap: 2px; background: var(--paper); border: 2px solid var(--line); border-radius: 8px; padding: 3px; opacity: 0; animation: slotin .3s ease-out both; }
.s-slot small { font: 6px var(--pixel); }
@keyframes slotin { from { opacity: 0; transform: translateY(-14px) scale(.8); } to { opacity: 1; transform: none; } }
.s-cap { width: 90%; height: 12px; border: 2px solid var(--line); background: var(--ink); padding: 1px; }
.s-cap i { display: block; height: 100%; background: var(--yellow); width: 0; animation: capfill linear both; animation-delay: .25s; }
@keyframes capfill { to { width: 94%; } }
.s-lock { font-size: 40px; }
.s-ball { animation: dribble .5s ease-in-out infinite alternate; }
.s-lockicon { animation: snap 1.6s ease-in-out infinite; }
@keyframes snap { 0%, 40% { transform: scale(.6) rotate(-20deg); opacity: .4; } 55% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.s-btn { font-size: 13px; pointer-events: none; }
.s-score { flex-direction: column; gap: 8px; padding: 10px 8px; height: auto; min-height: 130px; }
.s-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.s-chips .pill { animation: slotin .3s ease-out both; background: var(--paper); }
.s-total { font: 22px var(--pixel); color: var(--yellow); text-shadow: 2px 2px 0 var(--line); }
.s-league .dot, .s-money .dot { width: 46px; height: 46px; font-size: 14px; }
.s-league b { font: 400 26px var(--chunk); color: var(--yellow); text-shadow: 2px 2px 0 var(--red), 3px 3px 0 var(--line); }
.s-coin { position: absolute; top: -30px; left: 50%; font-size: 28px; animation: coindrop 1.6s ease-in infinite; }
@keyframes coindrop { 0% { transform: translate(-50%, 0); } 50%, 100% { transform: translate(-50%, 110px); } }
.s-win { position: absolute; right: 14%; top: 14px; font: 10px var(--pixel); background: var(--green); color: #fff; border: 2px solid var(--line); padding: 4px 6px; transform: rotate(10deg); animation: popin .3s 1s both; }
.s-arrow { font: 10px var(--pixel); color: var(--cream); text-shadow: 1px 1px 0 var(--line); animation: slide 1.4s ease-in-out infinite alternate; }
@keyframes slide { from { transform: translateX(-8px); } to { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .scene * { animation: none !important; opacity: 1 !important; } .s-cap i { width: 94%; } }
.pf-card { display: grid; gap: 10px; text-decoration: none; color: inherit; }
.pf-card p { margin: 0; }
.pf-card .btn { justify-self: start; }

/* loader, football edition: the ball sails in, clanks off the backboard and drops */
.clank8 { display: none; }
.court8.fb .ball8 { width: 66px; height: 46px; animation: clank 1.6s infinite; }
.court8.fb .hoop8 { animation: shake 1.6s infinite; }
.court8.fb .clank8 { display: block; position: absolute; left: 200px; top: 10px; z-index: 2; font: 12px var(--pixel); color: var(--red); text-shadow: 2px 2px 0 var(--line); opacity: 0; animation: clanktxt 1.6s infinite; }
@keyframes clank {
  0%   { translate: 0 0; rotate: 0deg; opacity: 1; animation-timing-function: steps(6); }
  40%  { translate: 140px -168px; rotate: 300deg; animation-timing-function: steps(4); }
  58%  { translate: 70px -120px; rotate: 420deg; animation-timing-function: steps(5); }
  84%  { translate: 30px 6px; rotate: 560deg; opacity: 1; }
  100% { translate: 22px 6px; rotate: 560deg; opacity: 0; }
}
@keyframes shake { 0%, 39% { transform: none; } 42% { transform: translateX(4px) rotate(1deg); } 46% { transform: translateX(-3px); } 50%, 100% { transform: none; } }
@keyframes clanktxt { 0%, 39% { opacity: 0; scale: .5; } 42% { opacity: 1; scale: 1.1; } 62% { opacity: 1; scale: 1; } 70%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .court8.fb .ball8, .court8.fb .hoop8, .court8.fb .clank8 { animation: none; } }
/* the sport switch pulses while the football announcement is up */
.sport-switch.pulse { animation: swpulse 1s ease-in-out infinite; }
@keyframes swpulse { 50% { box-shadow: 0 0 0 4px var(--yellow), 0 0 16px 6px rgba(255,210,63,.7); } }