:root{
  /* paper */
  --paper:#f7f0dc; --paper2:#fdf8ea; --paper3:#efe6cd;
  --ink:#16130d;   --ink2:#241f16;   --ink3:#332c20;
  /* accents */
  --turf:#37703c;  --turf-dk:#255029; --turf-lt:#5d9a55;
  --gold:#d99a2b;  --brick:#a94f2c;
  /* type */
  --txt:#2c2820; --dim:#6d6454; --faint:#9a8f7c;
  --line:#ddd2b3; --line2:#c6b993;
  --r:3px;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Barlow',system-ui,-apple-system,sans-serif;
  /* field texture -- swapped for a light-on-dark pair in night mode */
  --field-numbers:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjkyIiBoZWlnaHQ9IjQ2Ij48dGV4dCB4PSIxMDQiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjMTYxMzBkIiBmaWxsLW9wYWNpdHk9IjAuMDkiIHRleHQtYW5jaG9yPSJzdGFydCI+MTA8L3RleHQ+PHRleHQgeD0iMjkyIiB5PSIzNCIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCIgZmlsbD0iIzE2MTMwZCIgZmlsbC1vcGFjaXR5PSIwLjA5IiB0ZXh0LWFuY2hvcj0ic3RhcnQiPjIwPC90ZXh0Pjx0ZXh0IHg9IjQ4MCIgeT0iMzQiIGZvbnQtZmFtaWx5PSJtb25vc3BhY2UiIGZvbnQtc2l6ZT0iMjQiIGZvbnQtd2VpZ2h0PSI3MDAiIGZpbGw9IiMxNjEzMGQiIGZpbGwtb3BhY2l0eT0iMC4wOSIgdGV4dC1hbmNob3I9InN0YXJ0Ij4zMDwvdGV4dD48dGV4dCB4PSI2NjgiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjMTYxMzBkIiBmaWxsLW9wYWNpdHk9IjAuMDkiIHRleHQtYW5jaG9yPSJzdGFydCI+NDA8L3RleHQ+PHRleHQgeD0iODU2IiB5PSIzNCIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCIgZmlsbD0iIzE2MTMwZCIgZmlsbC1vcGFjaXR5PSIwLjA5IiB0ZXh0LWFuY2hvcj0ic3RhcnQiPjUwPC90ZXh0Pjx0ZXh0IHg9IjEwNDQiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjMTYxMzBkIiBmaWxsLW9wYWNpdHk9IjAuMDkiIHRleHQtYW5jaG9yPSJzdGFydCI+NDA8L3RleHQ+PHRleHQgeD0iMTIzMiIgeT0iMzQiIGZvbnQtZmFtaWx5PSJtb25vc3BhY2UiIGZvbnQtc2l6ZT0iMjQiIGZvbnQtd2VpZ2h0PSI3MDAiIGZpbGw9IiMxNjEzMGQiIGZpbGwtb3BhY2l0eT0iMC4wOSIgdGV4dC1hbmNob3I9InN0YXJ0Ij4zMDwvdGV4dD48dGV4dCB4PSIxNDIwIiB5PSIzNCIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCIgZmlsbD0iIzE2MTMwZCIgZmlsbC1vcGFjaXR5PSIwLjA5IiB0ZXh0LWFuY2hvcj0ic3RhcnQiPjIwPC90ZXh0Pjx0ZXh0IHg9IjE2MDgiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjMTYxMzBkIiBmaWxsLW9wYWNpdHk9IjAuMDkiIHRleHQtYW5jaG9yPSJzdGFydCI+MTA8L3RleHQ+PC9zdmc+");
  --field-lines:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NCIgaGVpZ2h0PSI0MCI+PGxpbmUgeDE9IjAuNzUiIHkxPSIwIiB4Mj0iMC43NSIgeTI9IjQwIiBzdHJva2U9IiMxNjEzMGQiIHN0cm9rZS1vcGFjaXR5PSIwLjA1IiBzdHJva2Utd2lkdGg9IjEuNSIvPjxsaW5lIHgxPSI0Ny4wIiB5MT0iNCIgeDI9IjQ3LjAiIHkyPSIxMSIgc3Ryb2tlPSIjMTYxMzBkIiBzdHJva2Utb3BhY2l0eT0iMC4wNiIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48bGluZSB4MT0iNDcuMCIgeTE9IjI5IiB4Mj0iNDcuMCIgeTI9IjM2IiBzdHJva2U9IiMxNjEzMGQiIHN0cm9rZS1vcGFjaXR5PSIwLjA2IiBzdHJva2Utd2lkdGg9IjEuNSIvPjwvc3ZnPg==");
  /* position accents */
  --pos-qb:#3f5d7d; --pos-rb:#5f7a3d; --pos-wr:#8a4a7a;
  --pos-te:#9c6b2e; --pos-k:#4a8a8a;  --pos-def:#5a4f8a;
}
/* Night mode -- an explicit toggle (persisted, not just system dark mode),
   so a paper-and-ink daytime look and a dark "night game" look share every
   rule below through the same tokens instead of needing two stylesheets. */
:root[data-theme="dark"]{
  --paper:#1b1812; --paper2:#221e17; --paper3:#2a251c;
  --ink:#f3ead2;   --ink2:#e9ddc0;   --ink3:#dcccaa;
  --turf:#4a9a4f;  --turf-dk:#6bbf67; --turf-lt:#8fd488;
  --gold:#e8c157;  --brick:#e08a5c;
  --txt:#e9ddc0; --dim:#a89a7e; --faint:#7d715a;
  --line:#3a3324; --line2:#4a4130;
  --field-numbers:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNjkyIiBoZWlnaHQ9IjQ2Ij48dGV4dCB4PSIxMDQiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjZjNlYWQyIiBmaWxsLW9wYWNpdHk9IjAuMSIgdGV4dC1hbmNob3I9InN0YXJ0Ij4xMDwvdGV4dD48dGV4dCB4PSIyOTIiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjZjNlYWQyIiBmaWxsLW9wYWNpdHk9IjAuMSIgdGV4dC1hbmNob3I9InN0YXJ0Ij4yMDwvdGV4dD48dGV4dCB4PSI0ODAiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjZjNlYWQyIiBmaWxsLW9wYWNpdHk9IjAuMSIgdGV4dC1hbmNob3I9InN0YXJ0Ij4zMDwvdGV4dD48dGV4dCB4PSI2NjgiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjZjNlYWQyIiBmaWxsLW9wYWNpdHk9IjAuMSIgdGV4dC1hbmNob3I9InN0YXJ0Ij40MDwvdGV4dD48dGV4dCB4PSI4NTYiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjZjNlYWQyIiBmaWxsLW9wYWNpdHk9IjAuMSIgdGV4dC1hbmNob3I9InN0YXJ0Ij41MDwvdGV4dD48dGV4dCB4PSIxMDQ0IiB5PSIzNCIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCIgZmlsbD0iI2YzZWFkMiIgZmlsbC1vcGFjaXR5PSIwLjEiIHRleHQtYW5jaG9yPSJzdGFydCI+NDA8L3RleHQ+PHRleHQgeD0iMTIzMiIgeT0iMzQiIGZvbnQtZmFtaWx5PSJtb25vc3BhY2UiIGZvbnQtc2l6ZT0iMjQiIGZvbnQtd2VpZ2h0PSI3MDAiIGZpbGw9IiNmM2VhZDIiIGZpbGwtb3BhY2l0eT0iMC4xIiB0ZXh0LWFuY2hvcj0ic3RhcnQiPjMwPC90ZXh0Pjx0ZXh0IHg9IjE0MjAiIHk9IjM0IiBmb250LWZhbWlseT0ibW9ub3NwYWNlIiBmb250LXNpemU9IjI0IiBmb250LXdlaWdodD0iNzAwIiBmaWxsPSIjZjNlYWQyIiBmaWxsLW9wYWNpdHk9IjAuMSIgdGV4dC1hbmNob3I9InN0YXJ0Ij4yMDwvdGV4dD48dGV4dCB4PSIxNjA4IiB5PSIzNCIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjcwMCIgZmlsbD0iI2YzZWFkMiIgZmlsbC1vcGFjaXR5PSIwLjEiIHRleHQtYW5jaG9yPSJzdGFydCI+MTA8L3RleHQ+PC9zdmc+");
  --field-lines:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NCIgaGVpZ2h0PSI0MCI+PGxpbmUgeDE9IjAuNzUiIHkxPSIwIiB4Mj0iMC43NSIgeTI9IjQwIiBzdHJva2U9IiNmM2VhZDIiIHN0cm9rZS1vcGFjaXR5PSIwLjA3IiBzdHJva2Utd2lkdGg9IjEuNSIvPjxsaW5lIHgxPSI0Ny4wIiB5MT0iNCIgeDI9IjQ3LjAiIHkyPSIxMSIgc3Ryb2tlPSIjZjNlYWQyIiBzdHJva2Utb3BhY2l0eT0iMC4wOCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz48bGluZSB4MT0iNDcuMCIgeTE9IjI5IiB4Mj0iNDcuMCIgeTI9IjM2IiBzdHJva2U9IiNmM2VhZDIiIHN0cm9rZS1vcGFjaXR5PSIwLjA4IiBzdHJva2Utd2lkdGg9IjEuNSIvPjwvc3ZnPg==");
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background-color:var(--paper);
  background-image: var(--field-numbers), var(--field-lines);
  background-repeat:repeat-x, repeat;
  background-position:top left, top left;
  color:var(--txt); font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--turf-dk);text-underline-offset:3px}
.screen{display:none;min-height:100vh}
.screen.active{display:block}

/* shared type helpers */
.on-clock,.dial-lbl,.pos-head,.hero-badge,.final-badge,.topbar-score .lbl,.slot-tag,.fr-tag,.pick-pos{
  font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;
}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--mono); font-size:.8rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; border:2px solid var(--ink); border-radius:var(--r);
  padding:.8rem 1.5rem; cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform .1s, box-shadow .1s, background .12s, color .12s;
}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn-primary{background:var(--turf);color:var(--paper2)}
.btn-primary:hover{background:var(--turf-dk)}
.btn-ghost{background:var(--paper2);color:var(--ink)}
.btn-ghost:hover{background:var(--paper3)}
.btn-lg{
  padding:2.4rem 2rem;font-size:clamp(1.4rem,5vw,2rem);letter-spacing:.16em;
  border-width:4px;box-shadow:12px 12px 0 var(--ink);width:100%;
}
.btn-lg:hover{transform:translate(4px,4px);box-shadow:8px 8px 0 var(--ink)}
.btn-lg:active{transform:translate(8px,8px);box-shadow:4px 4px 0 var(--ink)}

/* ---------- account ---------- */
.link-btn{
  background:none;border:0;padding:0;cursor:pointer;font-family:var(--mono);
  font-size:.68rem;font-weight:700;letter-spacing:.05em;color:var(--turf-dk);
  text-decoration:underline;text-underline-offset:2px;
}
.link-btn:hover{color:var(--turf)}
.account-bar-row{
  max-width:1280px;margin:0 auto;padding:1rem 1.25rem 0;
  display:flex;justify-content:flex-end;align-items:center;gap:.8rem;
}
.account-bar{
  text-align:right;font-family:var(--mono);font-size:.7rem;color:var(--dim);
}
.account-bar .sep{margin:0 .35rem;color:var(--faint)}
.account-bar b{color:var(--ink)}
.premium-badge{
  font-family:var(--mono);font-weight:700;font-size:.64rem;letter-spacing:.04em;color:var(--gold);
}
.theme-toggle{
  background:var(--paper2);border:2px solid var(--ink);border-radius:999px;color:var(--ink);
  font-size:.85rem;line-height:1;width:2rem;height:2rem;cursor:pointer;
  display:grid;place-items:center;box-shadow:2px 2px 0 var(--ink);transition:.12s;flex:none;
}
.theme-toggle:hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);background:var(--paper3)}
.theme-toggle:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}

.auth-modal[hidden]{display:none}
.auth-modal{
  position:fixed;inset:0;background:rgba(22,19,13,.55);z-index:80;
  display:flex;align-items:center;justify-content:center;padding:1.25rem;
}
.auth-card{
  position:relative;width:100%;max-width:360px;background:var(--paper2);
  border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);
  padding:2rem 1.6rem 1.6rem;text-align:left;
}
.auth-close{
  position:absolute;top:.7rem;right:.8rem;background:none;border:0;cursor:pointer;
  font-size:1.4rem;line-height:1;color:var(--dim);font-family:var(--sans);
}
.auth-close:hover{color:var(--ink)}
.auth-title{font-family:var(--serif);font-weight:800;font-size:1.5rem;margin-bottom:1.2rem;color:var(--ink)}
.auth-card .lb-name-input{width:100%;display:block;margin-bottom:.7rem}
.auth-submit{width:100%;margin-top:.3rem}
.challenge-modal-copy{font-family:var(--mono);font-size:.78rem;color:var(--dim);line-height:1.5;margin-bottom:1.1rem}
.challenge-modal-share{width:100%;margin-bottom:.7rem}
.auth-switch{font-family:var(--mono);font-size:.72rem;color:var(--dim);margin-top:1.1rem;text-align:center}

/* ---------- start ---------- */
/* The pylon/goal-line stripe every end zone actually has -- the one purely
   decorative touch that ties the page to its name before a word of copy
   loads. Sits above the account bar, full-bleed, independent of the
   max-width content column below it. */
.endzone-stripe{
  height:9px;width:100%;
  background:repeating-linear-gradient(-45deg,
    var(--turf) 0 16px, var(--gold) 16px 32px);
  border-bottom:2px solid var(--ink);
}
.hero-badge{
  display:inline-block;font-size:.62rem;color:var(--ink);
  border:2px solid var(--ink);background:var(--paper2);
  padding:.4rem .8rem;border-radius:var(--r);margin-bottom:1.6rem;font-weight:700;
}
.wordmark{
  font-family:var(--serif);font-weight:900;text-transform:uppercase;
  font-size:clamp(3.4rem,13vw,6.4rem);line-height:.92;letter-spacing:-.02em;color:var(--ink);
  text-shadow:5px 5px 0 var(--gold);
}
.wordmark span{display:inline}
.wordmark .accent{color:var(--turf);margin-left:.14em}
@media(max-width:480px){.wordmark{text-shadow:3px 3px 0 var(--gold)}}
.tagline{
  font-family:var(--serif);font-style:italic;font-weight:600;color:var(--ink2);
  margin:1.1rem auto 2.4rem;font-size:clamp(1.15rem,3.4vw,1.55rem);line-height:1.35;
  max-width:34ch;padding-bottom:1.4rem;border-bottom:3px solid var(--ink);
}
.tagline em{color:var(--turf-dk);font-style:italic}

.howto{margin-top:2rem}
.howto summary{
  display:inline-flex;align-items:center;gap:.5rem;list-style:none;cursor:pointer;
  font-family:var(--mono);font-weight:700;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--paper2);border:2px solid var(--ink);border-radius:var(--r);color:var(--ink);
  padding:.55rem 1rem;box-shadow:var(--shadow-sm);transition:transform .1s,box-shadow .1s,background .12s;
}
.howto summary::-webkit-details-marker{display:none}
.howto summary::after{content:'+';font-size:1rem;line-height:1;font-weight:700}
.howto[open] summary::after{content:'\2212'}
.howto summary:hover{background:var(--turf);color:var(--paper2)}
.howto summary:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.howto-body{
  background:var(--paper2);border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--shadow);padding:1.6rem;text-align:left;margin-top:1.1rem;
  animation:rv .22s ease-out;
}
.rules{list-style:none;counter-reset:r}
.rules li{
  counter-increment:r;position:relative;padding-left:2.5rem;margin-bottom:.95rem;
  color:var(--ink2);font-size:.97rem;
}
.rules li::before{
  content:counter(r);position:absolute;left:0;top:.02rem;
  width:1.7rem;height:1.7rem;border-radius:var(--r);
  background:var(--turf);border:2px solid var(--ink);color:var(--paper2);
  font-family:var(--mono);font-weight:700;font-size:.72rem;display:grid;place-items:center;
}
.rules b{color:var(--ink);font-weight:700}
.roster-preview{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.4rem;padding-top:1.4rem;border-top:2px dashed var(--line2)}
.roster-preview span{
  font-family:var(--mono);font-weight:700;font-size:.7rem;letter-spacing:.1em;
  background:var(--paper);border:2px solid var(--ink);color:var(--ink);
  padding:.34rem .62rem;border-radius:var(--r);
}
.roster-preview .flex{background:var(--gold);color:var(--ink)}

/* ---------- daily challenge ---------- */
.daily-card{
  background:var(--paper2);border:3px solid var(--ink);border-radius:var(--r);
  box-shadow:10px 10px 0 var(--ink);padding:1.8rem 1.6rem 2rem;margin:0 auto 1.6rem;
  max-width:560px;text-align:center;
}
.daily-top{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-bottom:1.1rem}
.daily-kicker{
  font-family:var(--mono);font-weight:700;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);
}
.daily-date{
  font-family:var(--mono);font-weight:700;font-size:.68rem;letter-spacing:.08em;
  color:var(--turf-dk);padding:.1rem .4rem;border:2px solid var(--line2);border-radius:var(--r);
}
.daily-streak-row[hidden]{display:none}
.daily-streak-row{
  display:flex;align-items:center;justify-content:center;gap:.5rem;margin:-.4rem 0 1.1rem;
  font-family:var(--mono);font-size:.7rem;color:var(--dim);
}
.daily-streak-row b{color:var(--gold);font-size:.85rem}
.daily-streak-sep{color:var(--faint)}
.btn-xl{
  display:block;width:100%;padding:1.7rem 1.2rem;font-size:clamp(1.05rem,3.6vw,1.4rem);
  letter-spacing:.12em;border-width:3px;box-shadow:9px 9px 0 var(--ink);
  background:var(--gold);color:var(--ink);
}
.btn-xl:hover{transform:translate(3px,3px);box-shadow:6px 6px 0 var(--ink);background:#e2a83c}
.btn-xl:active{transform:translate(6px,6px);box-shadow:3px 3px 0 var(--ink)}
.btn-challenge-play{background:var(--turf);color:var(--paper2)}
.btn-challenge-play:hover{background:var(--turf-dk)}
.challenge-card{border-color:var(--turf-dk);box-shadow:10px 10px 0 var(--turf-dk)}
.daily-status{font-family:var(--mono);font-size:.72rem;color:var(--dim);margin-top:1.1rem;line-height:1.5}
/* Once today's round is done, the score itself is the headline -- bigger and
   bolder than any of the surrounding start-screen copy, gold to match the
   result screen's plate. */
.daily-score{
  display:flex;align-items:baseline;justify-content:center;gap:.55rem;
  background:var(--paper3);border:3px solid var(--ink);border-radius:var(--r);
  box-shadow:6px 6px 0 var(--ink);padding:.85rem 1.4rem;margin-bottom:1.4rem;
}
.daily-score[hidden]{display:none}
.daily-score-num{
  font-family:var(--serif);font-weight:900;font-size:clamp(2.4rem,8vw,3.2rem);
  color:var(--gold);line-height:1;letter-spacing:-.02em;
}
.daily-score-lbl{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
.start-layout{
  max-width:1280px;margin:0 auto;padding:0 1.25rem;
  display:grid;grid-template-columns:260px minmax(0,680px) 260px;justify-content:center;
  gap:0 2rem;grid-template-areas:"trivia top side";align-items:start;
}
.hero-top{grid-area:top;text-align:center;padding-top:clamp(2rem,6vh,4.5rem)}
/* Sits outside start-layout entirely -- rather than being confined to the
   grid's ~680px middle column, it gets the site's full 1280px content
   width, same as the topbar stripe, so the mode buttons actually use the
   space the trivia/leaderboard columns leave empty once they end. */
.hero-bottom{text-align:center;max-width:680px;margin:0 auto;padding:0 1.25rem 2.2rem}
.home-lb,.home-trivia{max-width:260px;margin:0;margin-top:clamp(2rem,6vh,4.5rem)}
.home-lb{grid-area:side}
.home-trivia{grid-area:trivia;text-align:left}
#home-lb,#home-trivia{position:sticky;top:1.5rem;border-top-width:5px}
#home-lb{border-top-color:var(--turf-dk)}
#home-trivia{border-top-color:var(--gold)}
.lb-row-you{border-top:2px dashed var(--line2);margin-top:.3rem;padding-top:.6rem;font-weight:700}
.lb-row-you .lb-name{color:var(--turf-dk)}
/* Ranks 1-5 left, 6-10 right, rather than one ten-row column -- at full
   strength this list would grow taller than the wordmark/trivia content
   next to it and push the mode buttons (which come right after
   start-layout in the page flow) further down. Two columns keeps it
   about as tall as the trivia card beside it instead. Explicit
   grid-row per item rather than relying on grid auto-placement, since
   auto-placement's row cursor doesn't reliably wrap column 2 back to
   row 1 once column 1 is several rows deep. */
#home-lb-list{display:grid;grid-template-columns:1fr 1fr;column-gap:.8rem}
#home-lb-list .lb-empty{grid-column:1/-1}
/* min-width:0 because a flex row placed in a 1fr grid track otherwise
   keeps the track from shrinking below the un-truncated name's full
   width -- .lb-name's own min-width:0 only lets *it* shrink once .lb-row
   already has a constrained width to divide up. */
#home-lb-list .lb-row{gap:.3rem;font-size:.7rem;padding:.3rem 0;min-width:0}
#home-lb-list .lb-rank{width:1rem}
#home-lb-list .lb-row:nth-child(1){grid-column:1;grid-row:1}
#home-lb-list .lb-row:nth-child(2){grid-column:1;grid-row:2}
#home-lb-list .lb-row:nth-child(3){grid-column:1;grid-row:3}
#home-lb-list .lb-row:nth-child(4){grid-column:1;grid-row:4}
#home-lb-list .lb-row:nth-child(5){grid-column:1;grid-row:5}
#home-lb-list .lb-row:nth-child(6){grid-column:2;grid-row:1}
#home-lb-list .lb-row:nth-child(7){grid-column:2;grid-row:2}
#home-lb-list .lb-row:nth-child(8){grid-column:2;grid-row:3}
#home-lb-list .lb-row:nth-child(9){grid-column:2;grid-row:4}
#home-lb-list .lb-row:nth-child(10){grid-column:2;grid-row:5}
#home-lb-list .lb-row-you{grid-column:1/-1;grid-row:6}
.trivia-pts-row{display:flex;align-items:baseline;gap:.4rem;margin:.3rem 0 .6rem}
.trivia-pts{font-family:var(--serif);font-weight:900;font-size:2.1rem;color:var(--gold);line-height:1;letter-spacing:-.02em}
.trivia-pts-lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.trivia-name{font-family:var(--mono);font-weight:700;font-size:.78rem;color:var(--ink);margin-bottom:.6rem;line-height:1.4}
.trivia-blurb{font-family:var(--serif);font-style:italic;font-size:.86rem;color:var(--ink2);line-height:1.55}
@media (max-width:1100px){
  .start-layout{grid-template-columns:minmax(0,560px);grid-template-areas:"top" "trivia" "side"}
  .home-lb,.home-trivia{max-width:560px;width:100%;margin:1.6rem 0}
  #home-lb,#home-trivia{position:static}
}
/* Icons live as ::before content rather than markup so they can't be wiped
   out by the JS that rewrites #btn-daily's textContent on every render.
   Each is a plain white silhouette used as a mask -- background-color:
   currentColor means it always matches that button's own text color, so
   it tracks night mode automatically with no per-theme overrides. */
#btn-start::before,
#btn-start-blind::before,
#btn-start-auction::before,
#btn-daily::before{
  content:'';display:inline-block;width:1.15em;height:1.15em;
  margin-right:.55rem;vertical-align:-.18em;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
#btn-start::before{
  -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMiwyIEgyMiBWMjIgSDIgWiBNNyw3IG0tMi4yLDAgYTIuMiwyLjIgMCAxLDAgNC40LDAgYTIuMiwyLjIgMCAxLDAgLTQuNCwwIE0xNyw3IG0tMi4yLDAgYTIuMiwyLjIgMCAxLDAgNC40LDAgYTIuMiwyLjIgMCAxLDAgLTQuNCwwIE03LDE3IG0tMi4yLDAgYTIuMiwyLjIgMCAxLDAgNC40LDAgYTIuMiwyLjIgMCAxLDAgLTQuNCwwIE0xNywxNyBtLTIuMiwwIGEyLjIsMi4yIDAgMSwwIDQuNCwwIGEyLjIsMi4yIDAgMSwwIC00LjQsMCBNMTIsMTIgbS0yLjIsMCBhMi4yLDIuMiAwIDEsMCA0LjQsMCBhMi4yLDIuMiAwIDEsMCAtNC40LDAnLz48L3N2Zz4=");
  mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMiwyIEgyMiBWMjIgSDIgWiBNNyw3IG0tMi4yLDAgYTIuMiwyLjIgMCAxLDAgNC40LDAgYTIuMiwyLjIgMCAxLDAgLTQuNCwwIE0xNyw3IG0tMi4yLDAgYTIuMiwyLjIgMCAxLDAgNC40LDAgYTIuMiwyLjIgMCAxLDAgLTQuNCwwIE03LDE3IG0tMi4yLDAgYTIuMiwyLjIgMCAxLDAgNC40LDAgYTIuMiwyLjIgMCAxLDAgLTQuNCwwIE0xNywxNyBtLTIuMiwwIGEyLjIsMi4yIDAgMSwwIDQuNCwwIGEyLjIsMi4yIDAgMSwwIC00LjQsMCBNMTIsMTIgbS0yLjIsMCBhMi4yLDIuMiAwIDEsMCA0LjQsMCBhMi4yLDIuMiAwIDEsMCAtNC40LDAnLz48L3N2Zz4=");
}
#btn-start-blind::before{
  -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHJlY3QgeD0nMScgeT0nOCcgd2lkdGg9JzknIGhlaWdodD0nOCcgcng9JzIuNScgZmlsbD0nI2ZmZicvPjxyZWN0IHg9JzE0JyB5PSc4JyB3aWR0aD0nOScgaGVpZ2h0PSc4JyByeD0nMi41JyBmaWxsPScjZmZmJy8+PHJlY3QgeD0nMTAnIHk9JzEwJyB3aWR0aD0nNCcgaGVpZ2h0PScyJyBmaWxsPScjZmZmJy8+PC9zdmc+");
  mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHJlY3QgeD0nMScgeT0nOCcgd2lkdGg9JzknIGhlaWdodD0nOCcgcng9JzIuNScgZmlsbD0nI2ZmZicvPjxyZWN0IHg9JzE0JyB5PSc4JyB3aWR0aD0nOScgaGVpZ2h0PSc4JyByeD0nMi41JyBmaWxsPScjZmZmJy8+PHJlY3QgeD0nMTAnIHk9JzEwJyB3aWR0aD0nNCcgaGVpZ2h0PScyJyBmaWxsPScjZmZmJy8+PC9zdmc+");
}
#btn-start-auction::before{
  -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMyw2IEwxNSw2IEwyMiwxMiBMMTUsMTggTDMsMTggWiBNOCwxMiBtLTIuMiwwIGEyLjIsMi4yIDAgMSwwIDQuNCwwIGEyLjIsMi4yIDAgMSwwIC00LjQsMCcvPjwvc3ZnPg==");
  mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBmaWxsPScjZmZmJyBkPSdNMyw2IEwxNSw2IEwyMiwxMiBMMTUsMTggTDMsMTggWiBNOCwxMiBtLTIuMiwwIGEyLjIsMi4yIDAgMSwwIDQuNCwwIGEyLjIsMi4yIDAgMSwwIC00LjQsMCcvPjwvc3ZnPg==");
}
#btn-daily::before{
  -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTIsMTIgUTEyLDIgMjIsMTIgUTEyLDIyIDIsMTIgWicvPjwvc3ZnPg==");
  mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZmlsbD0nI2ZmZicgZD0nTTIsMTIgUTEyLDIgMjIsMTIgUTEyLDIyIDIsMTIgWicvPjwvc3ZnPg==");
}
.btn-blind{background:var(--ink);color:var(--paper2);position:relative;overflow:visible}
.btn-auction{background:var(--brick);color:var(--paper2)}
.btn-auction:hover{background:#8f4325}
.btn-blind:hover{background:var(--ink3)}
.fan-fav-badge{
  position:absolute;top:-.75rem;right:-.7rem;
  background:var(--gold);color:var(--ink);
  font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:.3rem .55rem;border:2px solid var(--ink);
  border-radius:999px;box-shadow:3px 3px 0 var(--ink);
  transform:rotate(7deg);pointer-events:none;
}

/* ---------- hero modes: auction | daily challenge | blind, classic below ---------- */
/* Lives outside start-layout on purpose -- see the comment on .hero-bottom
   above. Same 1280px content width as the topbar stripe and account bar,
   so the buttons actually use the page's full width instead of being
   boxed into the ~680px column between the trivia and leaderboard cards. */
.hero-modes{max-width:1280px;margin:0 auto 2.4rem;padding:0 1.25rem}
/* Classic and blind flank the daily card as tall side panels, with
   auction as its own full-width banner underneath -- the daily challenge
   is the one thing worth returning for every day, so it stays the visual
   center instead of getting buried among four equal-weight buttons. All
   four are one flex/grid container (.mode-quad) rather than a panel-trio
   plus a separate banner sibling, specifically so mobile's stack order
   and desktop's panels-vs-banner arrangement can be set independently --
   `order` controls the former, `grid-area` the latter, and neither
   depends on these elements' actual DOM order. Below 760px there isn't
   room for a card and two panels side by side without squeezing the
   daily card's own content, so it collapses to a single stacked column,
   daily first since it's the one thing worth checking every day. */
.mode-quad{
  display:flex;flex-direction:column;gap:1.2rem;margin-bottom:1.2rem;
}
@media(max-width:759px){
  .mode-trio-daily{order:1}
  #btn-start-blind{order:2}
  .mode-classic{order:3}
  .mode-auction{order:4}
  .auction-presets{order:5}
}
.mode-trio-daily{margin:0;max-width:none}
.btn-panel{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  width:100%;min-height:160px;padding:1.6rem 1rem;
  font-size:clamp(1.05rem,2vw,1.6rem);letter-spacing:.1em;
  border-width:4px;box-shadow:9px 9px 0 var(--ink);position:relative;overflow:visible;
}
.btn-panel:hover{transform:translate(3px,3px);box-shadow:6px 6px 0 var(--ink)}
.btn-panel:active{transform:translate(6px,6px);box-shadow:3px 3px 0 var(--ink)}
/* Same specificity as the shared icon rule above (one id + one pseudo) --
   declared later, so these two win the tie: a bigger glyph stacked above
   the label instead of inline before it, sized for a tile rather than a
   line of text. Targets whichever two buttons are the panels right now
   (classic + blind) rather than a role-neutral selector, since which
   button is a panel vs. the banner is exactly what this layout swaps. */
#btn-start::before,
#btn-start-blind::before{
  width:2.6em;height:2.6em;margin:0;vertical-align:0;
}
.btn-lg{margin-bottom:.4rem}
@media(min-width:760px){
  .mode-quad{
    display:grid;grid-template-columns:1fr 1.6fr 1fr;align-items:stretch;gap:1.4rem;
    grid-template-areas:"classic daily blind" "auction auction auction" "presets presets presets";
  }
  .mode-classic{grid-area:classic}
  .mode-trio-daily{grid-area:daily}
  #btn-start-blind{grid-area:blind}
  .mode-auction{grid-area:auction}
  .auction-presets{grid-area:presets;margin-top:0}
}
.auction-presets{
  display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap;
  margin-top:1rem;
}
.auction-presets-lbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.preset-chip{
  font-family:var(--mono);font-weight:700;font-size:.68rem;letter-spacing:.04em;
  background:var(--paper2);border:2px solid var(--line2);color:var(--dim);
  padding:.4rem .75rem;border-radius:999px;cursor:pointer;transition:.12s;
}
.preset-chip:hover{border-color:var(--brick);color:var(--ink)}
.preset-chip.active{background:var(--brick);border-color:var(--brick);color:var(--paper2)}
.src-note{color:var(--dim);font-size:.8rem;margin-top:1.4rem;font-family:var(--mono)}
.disclaimer{
  color:var(--dim);font-size:.72rem;line-height:1.65;font-family:var(--mono);
  width:100%;box-sizing:border-box;margin:1.4rem 0 0;padding:1.6rem 1.25rem 2.4rem;
  border-top:2px solid var(--line2);text-align:center;
}
.footer-links{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:1.2rem 0}
.footer-link{
  font-family:var(--mono);font-weight:700;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;
  background:var(--paper2);border:2px solid var(--line2);color:var(--dim);
  padding:.4rem .9rem;border-radius:999px;text-decoration:none;transition:.12s;display:inline-block;
}
.footer-link:hover{border-color:var(--turf-dk);color:var(--ink)}
.footer-copyright{font-size:.68rem;margin-top:.6rem}
.footer-copyright a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.footer-copyright a:hover{color:var(--turf-dk)}

/* ---------- static pages: terms / privacy / faq ---------- */
.static-page{max-width:720px;margin:0 auto;padding:clamp(2rem,6vh,3.5rem) 1.25rem 4rem}
.static-back{
  font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;display:inline-block;margin-bottom:2rem;
}
.static-back:hover{color:var(--turf-dk)}
.static-title{
  font-family:var(--serif);font-weight:900;font-size:clamp(2rem,6vw,2.8rem);
  color:var(--ink);letter-spacing:-.01em;
}
.static-updated{font-family:var(--mono);font-size:.66rem;color:var(--faint);letter-spacing:.04em;margin:.7rem 0 2.6rem}
.static-body h2{font-family:var(--serif);font-weight:800;font-size:1.25rem;color:var(--ink);margin:2.1rem 0 .8rem}
.static-body h2:first-child{margin-top:0}
.static-body p{color:var(--ink2);line-height:1.7;margin-bottom:1rem;font-size:.95rem}
.static-body ul{margin:0 0 1.1rem 1.3rem;color:var(--ink2);line-height:1.7;font-size:.95rem}
.static-body li{margin-bottom:.4rem}
.static-body a{color:var(--turf-dk)}
.static-faq-item{margin-bottom:1.8rem}
.static-faq-q{
  font-family:var(--mono);font-weight:700;font-size:.85rem;color:var(--ink);
  margin-bottom:.5rem;display:flex;gap:.5rem;
}
.static-faq-q::before{content:'Q.';color:var(--turf-dk);flex:none}
.static-faq-a{color:var(--ink2);line-height:1.7;font-size:.95rem;padding-left:1.4rem}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:.7rem 1.25rem;background:var(--paper2);border-bottom:3px solid var(--ink);
}
.topbar-left{display:flex;align-items:center;gap:.85rem;min-width:0}
.btn-menu{
  font-family:var(--mono);font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);color:var(--ink);
  padding:.42rem .7rem;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:.1s;white-space:nowrap;
}
.btn-menu:hover{background:var(--turf);color:var(--paper2);transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}
.btn-menu:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.blind-flag{
  font-family:var(--mono);font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--ink);color:var(--gold);border:2px solid var(--ink);border-radius:var(--r);padding:.24rem .55rem;
}
.blind-flag[hidden]{display:none}
.daily-flag{
  font-family:var(--mono);font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--gold);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r);padding:.24rem .55rem;
}
.daily-flag[hidden]{display:none}
.auction-flag{
  font-family:var(--mono);font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--brick);color:var(--paper2);border:2px solid var(--ink);border-radius:var(--r);padding:.24rem .55rem;
}
.auction-flag[hidden]{display:none}
.challenge-flag{
  font-family:var(--mono);font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  background:var(--turf);color:var(--paper2);border:2px solid var(--ink);border-radius:var(--r);padding:.24rem .55rem;
}
.challenge-flag[hidden]{display:none}
.topbar-brand{
  font-family:var(--serif);font-weight:900;text-transform:uppercase;
  letter-spacing:-.01em;font-size:1.5rem;color:var(--ink);display:flex;gap:.3rem;
}
.topbar-brand .accent{color:var(--turf)}
@media(max-width:560px){.topbar-brand{display:none}}
.topbar-scores{display:flex;gap:.6rem}
.topbar-score{
  display:flex;flex-direction:column-reverse;align-items:center;gap:.05rem;
  background:var(--ink);border:2px solid var(--ink);border-radius:var(--r);
  padding:.3rem 1.1rem .38rem;box-shadow:var(--shadow-sm);
}
.topbar-score[hidden]{display:none}
.topbar-score .lbl{font-size:.55rem;color:var(--paper3);letter-spacing:.2em}
.topbar-score .val{font-family:var(--mono);font-weight:700;font-size:1.45rem;color:var(--gold);line-height:1.05}
#topbar-budget{background:var(--brick);border-color:var(--brick)}
#topbar-budget .val{color:var(--paper2)}
.per-slot{font-family:var(--mono);font-size:.55rem;color:var(--paper3);opacity:.85;letter-spacing:.04em}

.layout{display:grid;grid-template-columns:262px 1fr;gap:1.4rem;max-width:1180px;margin:0 auto;padding:1.4rem 1.25rem 3rem}
.layout>*{min-width:0}
@media(max-width:860px){.layout{grid-template-columns:1fr}}

/* ---------- roster ---------- */
.roster-col{display:flex;flex-direction:column;min-width:0}
.roster{display:flex;flex-direction:column;gap:.45rem;align-content:start}
@media(max-width:860px){.roster{flex-direction:row;flex-wrap:wrap}}
.roster-note{
  font-family:var(--mono);font-size:.66rem;color:var(--dim);line-height:1.5;margin-top:.5rem;
}
.roster-note:first-of-type{margin-top:.8rem;padding-top:.7rem;border-top:2px dashed var(--line2)}
/* Only a veiled board hands out the star -- and auction's means something
   different (best value vs. average, not most raw points), so it gets its
   own explanation rather than sharing blind mode's. */
.roster-note-star{display:none}
#screen-game.blind .roster-note-star{display:block}
.roster-note-star-value{display:none}
#screen-game.auction .roster-note-star-value{display:block}
.roster-note-auction{display:none}
#screen-game.auction .roster-note-auction{display:block}
.slot{
  position:relative;display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;border-radius:var(--r);
  background:var(--paper2);border:2px solid var(--line2);min-height:48px;transition:.13s;
}
.slot.done{padding-bottom:.62rem}
@media(max-width:860px){.slot{flex:1 1 calc(33.333% - .4rem);min-width:0}}
/* Three across leaves a filled slot no room for the name next to the score. */
@media(max-width:600px){.slot{flex:1 1 calc(50% - .4rem)}}
.slot.on{border-color:var(--ink);background:var(--paper2);box-shadow:var(--shadow-sm)}
.slot.done{border-color:var(--ink);background:var(--paper3);border-left:5px solid var(--team-color, var(--ink))}
.slot-tag{font-weight:700;font-size:.66rem;color:var(--dim);width:40px;flex:none}
.slot-tag.pos-flex{color:var(--gold)}
.slot.on .slot-tag{color:var(--turf-dk)}
.slot.done .slot-tag{color:var(--ink)}
/* Same specificity as the two rules above (three classes each) -- placed
   after them, so the position color wins the tie once a slot is filled. */
.slot .slot-tag.pos-qb{color:var(--pos-qb)}
.slot .slot-tag.pos-rb{color:var(--pos-rb)}
.slot .slot-tag.pos-wr{color:var(--pos-wr)}
.slot .slot-tag.pos-te{color:var(--pos-te)}
.slot .slot-tag.pos-k{color:var(--pos-k)}
.slot .slot-tag.pos-def{color:var(--pos-def)}
.slot-fill{flex:1;min-width:0}
.slot-empty{color:var(--faint);font-size:.82rem;font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot.on .slot-empty{color:var(--turf)}
.slot-player{font-size:.85rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-meta{font-family:var(--mono);font-size:.63rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot-star{color:var(--gold);-webkit-text-stroke:.4px var(--ink);margin-right:.24rem;font-size:.8rem}
.slot-score{flex:none;text-align:right;line-height:1.1}
.slot-pts{font-family:var(--mono);font-weight:700;font-size:.92rem;color:var(--turf-dk)}
/* Percentile of that week among every performance the game can roll at the
   position -- the rail is the same number, readable without stopping to read. */
.slot-pctl{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;color:var(--dim);margin-top:.1rem}
.slot-wrank{font-family:var(--mono);font-size:.58rem;letter-spacing:.03em;font-weight:700;color:var(--turf-dk);margin-top:.15rem;white-space:nowrap}
.slot-price{font-family:var(--mono);font-size:.58rem;letter-spacing:.03em;font-weight:700;color:var(--brick);margin-top:.15rem;white-space:nowrap}
.slot-vsavg{font-family:var(--mono);font-size:.58rem;letter-spacing:.03em;font-weight:700;color:var(--dim);margin-top:.15rem;white-space:nowrap}
.slot-vsavg.above{color:var(--turf-dk)}
.slot-vsavg.below{color:var(--brick)}
.slot-rail{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--line);border-radius:0 0 1px 1px;overflow:hidden}
.slot-rail i{display:block;height:100%;background:var(--turf)}
.pick-pts.veiled{color:var(--faint)}

/* ---------- stage ---------- */
.slot-banner{display:flex;align-items:baseline;gap:.7rem;margin-bottom:1rem;flex-wrap:wrap}
.on-clock{font-size:.6rem;color:var(--dim)}
#slot-name{
  font-family:var(--serif);font-weight:900;font-size:clamp(1.8rem,4.4vw,2.5rem);
  text-transform:uppercase;letter-spacing:-.015em;line-height:1;color:var(--ink);
}
.slot-hint{font-family:var(--mono);color:var(--dim);font-size:.78rem}

.roll-card{background:var(--paper2);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}

.rollbar{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:3px solid var(--ink);background:var(--paper3)}
.dial{position:relative;padding:.8rem .8rem 3.4rem;text-align:center;border-right:2px solid var(--line2)}
.dial:last-child{border-right:0}
.dial-lbl{display:block;font-size:.56rem;color:var(--dim);margin-bottom:.15rem}
.dial-val{display:block;font-family:var(--serif);font-weight:900;font-size:clamp(1.25rem,4.4vw,1.75rem);line-height:1.1;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.dial-val.spin{animation:spin .42s ease-out}
@keyframes rv{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@keyframes spin{0%{opacity:0;transform:translateY(-9px) scale(.94)}100%{opacity:1;transform:none}}
.reroll{
  position:absolute;bottom:.6rem;left:50%;transform:translateX(-50%);
  background:var(--gold);border:3px solid var(--ink);color:var(--ink);
  font-family:var(--mono);font-weight:700;font-size:clamp(.8rem,3.2vw,1rem);
  padding:.55rem 1rem;border-radius:var(--r);cursor:pointer;box-shadow:4px 4px 0 var(--ink);
  display:inline-flex;gap:.4rem;align-items:center;transition:.13s;white-space:nowrap;
}
.reroll:hover:not(:disabled){background:var(--turf);color:var(--paper2);transform:translateX(-50%) translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.reroll:active:not(:disabled){transform:translateX(-50%) translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.reroll:disabled{opacity:.34;cursor:not-allowed;border-color:var(--line2);background:var(--paper2);box-shadow:none}
.reroll em{font-style:normal;font-weight:700;color:var(--ink)}
.reroll:hover:not(:disabled) em{color:var(--paper2)}
.reroll:disabled em{color:var(--faint)}

.matchup{
  padding:.65rem 1rem;font-family:var(--mono);font-size:.73rem;color:var(--ink2);
  border-bottom:2px solid var(--line2);border-left:5px solid var(--team-color, var(--ink));
  display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;
}
.matchup .res{font-weight:700;padding:.1rem .42rem;border-radius:var(--r);font-size:.66rem;border:2px solid var(--ink);color:var(--paper2)}
.matchup .W{background:var(--turf-dk)}
.matchup .L{background:var(--brick)}
.matchup .T{background:var(--gold);color:var(--ink)}

.board{padding:.45rem}
.pos-group{margin-bottom:.3rem}
.pos-head{font-size:.58rem;color:var(--dim);padding:.6rem .7rem .32rem;border-bottom:1px solid var(--line);margin-bottom:.25rem}
.pos-head.pos-qb{color:var(--pos-qb);border-bottom-color:var(--pos-qb)}
.pos-head.pos-rb{color:var(--pos-rb);border-bottom-color:var(--pos-rb)}
.pos-head.pos-wr{color:var(--pos-wr);border-bottom-color:var(--pos-wr)}
.pos-head.pos-te{color:var(--pos-te);border-bottom-color:var(--pos-te)}
.pos-head.pos-k{color:var(--pos-k);border-bottom-color:var(--pos-k)}
.pos-head.pos-def{color:var(--pos-def);border-bottom-color:var(--pos-def)}
.pick{
  display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;
  background:transparent;border:2px solid transparent;border-radius:var(--r);
  padding:.5rem .65rem;cursor:pointer;transition:.12s;color:inherit;font:inherit;
}
.pick.elig:hover{background:var(--turf);border-color:var(--ink);box-shadow:var(--shadow-sm)}
.pick.inelig{opacity:.4;cursor:not-allowed}
.pick-pos{font-weight:700;font-size:.62rem;width:34px;flex:none;color:var(--dim)}
.pick.elig .pick-pos{color:var(--turf-dk)}
/* Same specificity as the eligible rule above (three classes each) --
   placed after it, so the tie goes to the position color, win or lose. */
.pick .pick-pos.pos-qb{color:var(--pos-qb)}
.pick .pick-pos.pos-rb{color:var(--pos-rb)}
.pick .pick-pos.pos-wr{color:var(--pos-wr)}
.pick .pick-pos.pos-te{color:var(--pos-te)}
.pick .pick-pos.pos-k{color:var(--pos-k)}
.pick .pick-pos.pos-def{color:var(--pos-def)}
.pick.elig:hover .pick-pos{color:var(--paper2)}
.pick-body{flex:1;min-width:0}
.pick-name{display:block;font-weight:600;font-size:.95rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-line{display:block;font-family:var(--mono);font-size:.66rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.05rem}
/* The stat the price is actually based on -- shown in place of the (hidden)
   line, since it's the one number an auction shopper needs to judge a price. */
.pick-avg{display:block;font-family:var(--mono);font-size:.66rem;color:var(--turf-dk);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.05rem}
.pick.elig:hover .pick-name,.pick.elig:hover .pick-line,.pick.elig:hover .pick-avg,.pick.elig:hover .pick-pts{color:var(--paper2)}
.pick-pts{font-family:var(--mono);font-weight:700;font-size:1.15rem;flex:none;min-width:62px;text-align:right;color:var(--ink)}
.pick.elig .pick-pts{color:var(--turf-dk)}
.pick-price{
  font-family:var(--mono);font-weight:700;font-size:.72rem;flex:none;white-space:nowrap;
  background:var(--paper3);border:2px solid var(--line2);border-radius:var(--r);
  padding:.12rem .4rem;color:var(--turf-dk);
}
.pick-price.tier-cheap{color:var(--turf-dk);border-color:var(--turf-lt)}
.pick-price.tier-mid{color:#96701c;border-color:var(--gold)}
:root[data-theme="dark"] .pick-price.tier-mid{color:#d9a53c}
.pick-price.tier-expensive{color:var(--brick);border-color:var(--brick)}
.pick-price.price-over{color:var(--brick);border-color:var(--brick)}
.pick.elig:hover .pick-price{background:var(--paper2);border-color:var(--paper2)}
.pick-take{
  font-family:var(--mono);font-weight:700;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--turf-dk);opacity:0;flex:none;transition:.12s;white-space:nowrap;
}
.pick.elig:hover .pick-take{opacity:1;color:var(--paper2)}
.pick.inelig .pick-take{opacity:1;color:var(--faint)}
@media(max-width:520px){.pick-take{display:none}}

.no-elig{padding:1.5rem 1rem;text-align:center;border-top:3px solid var(--ink);background:var(--paper3)}
.no-elig p{color:var(--ink2);margin-bottom:.9rem;font-family:var(--mono);font-size:.82rem}
.no-elig b{color:var(--turf-dk)}

/* ---------- result ---------- */
.result-wrap{max-width:660px;margin:0 auto;padding:clamp(2rem,6vh,4rem) 1.25rem 4rem;text-align:center}

/* The whole result -- badge, score, roster -- reads as one stamped card, so
   a screenshot of it (which is exactly what Share result and challenge
   links invite) is self-contained and self-identifying rather than just a
   number floating on the page background. */
.result-card{
  background:var(--paper2);border:4px solid var(--ink);border-radius:var(--r);
  box-shadow:14px 14px 0 var(--turf-dk);padding:2rem 1.6rem 1.6rem;margin-bottom:2rem;
}
.result-card.card-daily{box-shadow:14px 14px 0 var(--gold)}
.result-card.card-auction{box-shadow:14px 14px 0 var(--brick)}
@media(max-width:480px){
  .result-card{padding:1.5rem 1.1rem 1.2rem;box-shadow:8px 8px 0 var(--turf-dk)}
  .result-card.card-daily{box-shadow:8px 8px 0 var(--gold)}
  .result-card.card-auction{box-shadow:8px 8px 0 var(--brick)}
}
.result-card-brand{
  font-family:var(--serif);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;
  font-size:1.15rem;color:var(--ink);margin-bottom:1.2rem;
}
.result-card-brand .accent{color:var(--turf)}
.result-card-tag{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--faint);
  margin-top:1.6rem;padding-top:1rem;border-top:2px dashed var(--line2);
}
.final-badge{
  display:inline-block;font-size:.6rem;font-weight:700;color:var(--paper2);
  border:2px solid var(--ink);background:var(--ink);padding:.35rem .9rem;border-radius:var(--r);
}
.final-total{
  font-family:var(--serif);font-weight:900;font-size:clamp(4rem,15vw,6.5rem);
  color:var(--turf);line-height:.95;margin:1.1rem 0 .2rem;letter-spacing:-.03em;
}
.final-total small{
  display:block;font-family:var(--mono);font-weight:500;font-size:.65rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);margin-top:.7rem;
}

/* The daily score is the one number worth bragging about -- everyone played
   the exact same box scores today, so it earns a louder color and a bigger
   size than an unlimited-practice round's total. */
.daily-result .final-badge{background:var(--gold);color:var(--ink);border-color:var(--ink)}
.daily-result .final-total{color:var(--gold);font-size:clamp(4.5rem,17vw,7.5rem)}
.final-verdict{
  font-family:var(--serif);font-style:italic;font-weight:600;color:var(--ink2);
  font-size:1.15rem;margin:0 auto 1.6rem;max-width:32ch;padding-bottom:1.4rem;border-bottom:3px solid var(--ink);
}
.final-budget{font-family:var(--mono);font-size:.78rem;color:var(--dim);margin:-1rem auto 1.6rem;max-width:32ch}
.final-budget[hidden]{display:none}
/* ---------- leaderboard ---------- */
.lb-panel[hidden]{display:none}
.lb-panel{
  background:var(--paper2);border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:1.4rem;text-align:left;margin-bottom:2rem;
}
.lb-board[hidden]{display:none}
.lb-board-title{
  font-family:var(--mono);font-weight:700;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.8rem;
}
.lb-board-list{list-style:none}
.lb-row{
  display:flex;align-items:center;gap:.7rem;padding:.4rem 0;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.85rem;
}
.lb-row:last-child{border-bottom:0}
.lb-rank{color:var(--dim);width:1.6rem;flex:none}
.lb-name{flex:1;min-width:0;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-score{color:var(--turf-dk);font-weight:700;flex:none}
.lb-empty{color:var(--faint);font-size:.8rem;font-style:italic;padding:.3rem 0}
.lb-submit[hidden]{display:none}
.lb-submit{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem;padding-top:1.2rem;border-top:2px dashed var(--line2)}
.lb-name-input{
  flex:1;min-width:140px;font-family:var(--mono);font-size:.85rem;padding:.6rem .8rem;
  border:2px solid var(--ink);border-radius:var(--r);background:var(--paper);color:var(--ink);
}
.lb-name-input:focus{outline:2px solid var(--turf);outline-offset:1px}
.lb-submit-status{
  width:100%;font-family:var(--mono);font-size:.7rem;color:var(--dim);margin-top:.2rem;
}
.lb-submitted[hidden]{display:none}
.lb-submitted{
  font-family:var(--mono);font-size:.78rem;color:var(--turf-dk);font-weight:700;
  margin-top:1.2rem;padding-top:1.2rem;border-top:2px dashed var(--line2);
}
.final-roster{display:flex;flex-direction:column;gap:.4rem;text-align:left}
.fr-row{
  display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;
  background:var(--paper2);border:2px solid var(--ink);border-left:5px solid var(--team-color, var(--ink));
  border-radius:var(--r);box-shadow:var(--shadow-sm);
}
.fr-tag{font-weight:700;font-size:.64rem;color:var(--turf-dk);width:40px;flex:none}
.fr-tag.pos-qb{color:var(--pos-qb)} .fr-tag.pos-rb{color:var(--pos-rb)} .fr-tag.pos-wr{color:var(--pos-wr)}
.fr-tag.pos-te{color:var(--pos-te)} .fr-tag.pos-k{color:var(--pos-k)}  .fr-tag.pos-def{color:var(--pos-def)}
.fr-body{flex:1;min-width:0}
.fr-name{font-weight:600;font-size:.93rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-meta{font-family:var(--mono);font-size:.63rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-pts{font-family:var(--mono);font-weight:700;font-size:1.05rem;color:var(--ink);flex:none}
.final-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* ---------- loading ---------- */
.loading[hidden]{display:none}
.loading{position:fixed;inset:0;background:color-mix(in srgb, var(--paper) 82%, transparent);display:grid;place-items:center;z-index:60}
.ball{font-size:2.6rem;animation:tumble .9s linear infinite}
@keyframes tumble{0%{transform:rotate(0) translateY(0)}50%{transform:rotate(180deg) translateY(-14px)}100%{transform:rotate(360deg) translateY(0)}}

/* ---------- confetti ---------- */
/* A one-shot celebratory pop for a legendary pick, right where its name was
   clicked -- built as plain divs rather than a canvas or a library,
   consistent with the rest of the project having zero dependencies. */
.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:70;overflow:hidden}
.confetti-piece{
  position:absolute;width:8px;height:14px;opacity:.95;border-radius:1px;
  transform:translate(-50%,-50%);
  animation:confetti-burst ease-out forwards;
}
@keyframes confetti-burst{
  0%{transform:translate(-50%,-50%) translate(0,0) rotate(0deg);opacity:1}
  55%{opacity:1}
  100%{transform:translate(-50%,-50%) translate(var(--dx), calc(var(--dy) + var(--fall))) rotate(var(--rot));opacity:0}
}