/* Two-Minute Drill: editorial game-day design layer, 2026-10-21.
   Scoped to avoid altering simulation coordinates, field animations or controls. */
:root {
  --paper:#f3f2e9; --card:#fffef9; --ink:#14281f; --muted:#52645b; --line:#d3dbd0;
  --key:#e7ebe1; --key-hi:#dce4d7; --key-ink:#14281f;
  --accent:#e9b542; --accent-dark:#182b21; --brand-green:#315c43;
}
html {scroll-behavior:smooth}
body {background:var(--paper);background-image:radial-gradient(#315c430b 1px,transparent 1px);background-size:18px 18px}
a {text-underline-offset:3px}
a:focus-visible {outline:3px solid #deac34;outline-offset:3px}
.top {background:var(--accent-dark);border-bottom:3px solid #dcae42;box-shadow:0 3px 18px #0a25151a;color:#fff}
.top .in {max-width:1120px;min-height:66px;padding:9px 22px;grid-template-columns:1fr auto 1fr}
.top .tl {order:2;gap:6px}
.top .tr {order:3}
.top .site-brand {order:1;display:flex;align-items:center;gap:9px;min-width:0}
.top .site-brand a {color:#fff;text-decoration:none;font:900 clamp(19px,2.1vw,28px)/.9 var(--display);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.top .site-brand a::before {content:none}
.top .site-brand a img {display:block;width:174px;max-width:100%;height:auto}
.top .site-brand small {display:none}
.top .site-brand img {object-fit:contain}
.top .icon {color:#f2f7ed}
.top .icon:hover {background:#ffffff20}
.top .acctbtn {background:#ffffff12;color:#fff;border-color:#ffffff55}
.top .acctbtn:hover {background:#ffffff20}
.hero-eyebrow,.section-eyebrow {font:800 11px/1.4 var(--body);letter-spacing:.22em;text-transform:uppercase;color:#e7b94f}
.hero-cta,.hero-secondary {display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font:900 12px/1 var(--body);letter-spacing:.07em;text-transform:uppercase;border-radius:8px;min-height:48px;padding:0 19px;transition:transform .2s,background .2s}
.hero-cta {background:#efbd48;color:#152a1f;box-shadow:0 4px 0 #c79427}
.hero-cta:hover {background:#ffd270;transform:translateY(-2px)}
.hero-secondary {color:#fff;border:1px solid #b5cbb98c}
.hero-secondary:hover {background:#ffffff18}
.game-section-head {max-width:620px;text-align:center;margin:4px auto 8px;padding:0 8px}
.game-section-head .section-eyebrow {color:#55705b;font-size:10px;letter-spacing:.13em}
.game-section-head h1 {font:900 clamp(29px,3.2vw,38px)/1.08 var(--display);letter-spacing:.025em;text-transform:uppercase;margin:3px 0;color:var(--ink)}
.game-section-head h1 em {color:#b38a24;font-style:normal}
.game-section-head p {margin:3px auto 0;max-width:55ch;font-size:12px;color:var(--muted);line-height:1.4}
.wrap {padding-top:12px;padding-bottom:26px}
.wrap .modes {gap:7px;margin-bottom:7px}
.wrap .modes a {font-size:11px;font-weight:800;min-height:35px;display:inline-flex;align-items:center;border-radius:7px;padding:7px 15px;letter-spacing:.07em;background:var(--card);box-shadow:0 2px 0 #0b2a1910}
.wrap .modes a[aria-current="page"] {background:#204933;color:white;border-color:#204933}
/* Pro is intentionally not offered as an entry point, even when runtime enables it.
   Preserve deep-link behavior and the existing Pro implementation. */
#modeArch, #bmenu a[href="#archive"] {display:none !important}
.wrap #intro:not([hidden]),.wrap #arch:not([hidden]),.wrap #done:not([hidden]) {border:1px solid var(--line);background:var(--card);border-radius:14px;padding:20px;box-shadow:0 12px 38px #0d2e1c0d}
.wrap #intro:has(.match-card):not([hidden]) {padding:0;border:0;background:transparent;box-shadow:none}
.intro .match-card {display:grid;gap:13px;min-width:0;padding:clamp(17px,3.3vw,29px);border:1px solid #6fa37d;border-radius:19px;color:#fff;text-align:left;overflow:hidden;background:linear-gradient(180deg,transparent 48%,#051f151e),repeating-linear-gradient(180deg,#2b754b 0 58px,#276741 58px 116px);box-shadow:0 14px 36px #133b2528}
.intro .match-card .cat {color:#d9f0df;font-size:11px}
.intro .match-card h2.title {color:#f9d47c;font-size:clamp(28px,6vw,39px);margin:0;line-height:1.05}
.intro .match-card .game {color:#e7f4e9;font-size:13px;text-align:left;line-height:1.55}
.intro .match-card .big {font-size:clamp(45px,10vw,65px);color:#fff;line-height:.95}
.intro .match-card .big .left {font-size:clamp(19px,5vw,25px);color:#d3efdd}
.intro .match-card .matchup {margin:3px 0;padding:12px 0;border-top:1px solid #ffffff47;border-bottom:1px solid #ffffff47;gap:9px}
.intro .match-card .matchup .t {min-width:0}
.intro .match-card .matchup .nm {color:#fff;text-wrap:balance;text-align:center;font-size:12px}
.intro .match-card .matchup .sc {color:#fff;font-size:clamp(32px,8vw,44px)}
.intro .match-card .matchup .you {color:#ffe09c}
.intro .match-card .chips {justify-content:start}
.intro .match-card .chips span {background:#ffffff17;border-color:#ffffff54;color:#fff;font-size:12px}
.intro .match-card .btn.play {display:block;width:100%;min-height:60px;padding:12px 15px;border-radius:12px;background:#fff;color:#14281f;box-shadow:0 3px 0 #d2ddcf;font:900 22px/1 var(--display);letter-spacing:.06em;text-transform:uppercase}
.intro .match-card .btn.play:hover {background:#fff3c0}
.intro .match-card .who {font-size:13px;color:#e6f1e6}
.intro .match-card .match-snapshot {font:800 16px/1.5 var(--body);color:#fff;padding:14px 0;border-block:1px solid #ffffff47}
.intro .match-card.side-choice .sidepicks {grid-template-columns:1fr}
.intro .match-card.side-choice .sidepick {background:#f6f6ea;color:#1d3728;box-shadow:0 3px 0 #abc4b0}
.intro .match-card.side-choice .sidepick.dk {color:#1d3728}
.intro .match-card.side-choice .sidepick:hover {background:#fff3c0}
.wrap #play .fieldbox {box-shadow:0 15px 40px #0b281522}
.editorial-content {max-width:1100px;margin:20px auto 0;padding:0 22px}
.editorial-topline {display:flex;gap:12px;justify-content:space-between;align-items:end;margin-bottom:17px;border-bottom:1px solid var(--line);padding-bottom:13px}
.editorial-content h2 {font:900 clamp(28px,3.2vw,41px)/1.05 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0}
.editorial-content .section-eyebrow {color:#53795a;display:block;margin-bottom:8px}
.feature-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.feature-card {display:block;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:22px;text-decoration:none;color:var(--ink);transition:transform .2s,border .2s}
.feature-card:hover {transform:translateY(-3px);border-color:#95ad97}
.feature-number {display:inline-flex;background:#e4eade;border-radius:5px;padding:6px 9px;font:900 12px var(--body);color:#356047}
.feature-card h3 {font:900 26px/1 var(--display);text-transform:uppercase;margin:21px 0 10px}
.feature-card p {font:400 13px/1.7 var(--body);color:var(--muted);margin:0}
.feature-card .text-link {display:inline-block;margin-top:16px;font:800 12px var(--body);color:#1d6745}
.survivor-details {max-width:1100px;margin:28px auto 0;padding:26px 22px 0;border-top:1px solid var(--line)}
.survivor-details .section-eyebrow {color:#53795a}
.survivor-details h2 {font:900 clamp(29px,3.2vw,41px)/1.1 var(--display);text-transform:uppercase;margin:9px 0 14px}
.survivor-details > p {max-width:80ch;font-size:14px;line-height:1.8;color:var(--muted)}
.survivor-details .feature-grid {margin:20px 0}
.siteinfo {max-width:1100px;margin:32px auto 0;padding:26px 22px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 25px}
.siteinfo > h2 {grid-column:1/-1;font-size:31px;margin-bottom:6px}
.siteinfo > p:first-of-type {grid-column:1/-1;max-width:83ch;font-size:15px;line-height:1.75}
.siteinfo h3 {font-size:22px;color:#234c37;margin:15px 0 1px}
.siteinfo p {line-height:1.7;font-size:13px;margin:0 0 12px}
.home-faq {margin:24px auto 15px;border-top:1px solid var(--line);padding-top:22px}
.home-faq h2 {margin-bottom:15px}
.faq-stack {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.faq-stack article {background:var(--card);border:1px solid var(--line);border-radius:12px;padding:17px 20px}
.faq-stack h3 {font:900 20px var(--display);text-transform:uppercase;margin:0 0 8px}
.faq-stack p {margin:0;font:400 13px/1.65 var(--body);color:var(--muted)}
.sitefoot {max-width:1100px;border-top:2px solid #d5decf;padding:20px 22px 30px;font-size:12px}
.sitefoot nav {gap:10px 24px;margin-bottom:14px}
.sitefoot nav a {color:var(--ink)}
body:has(#play:not([hidden])) .game-section-head {display:none}
body:has(#play:not([hidden])) .top .in {min-height:48px}
body:has(#play:not([hidden])) .wrap {padding-top:8px}
body.bcast .top {background:var(--paper);color:var(--ink);border-color:var(--line)}
body.bcast .top .site-brand a,body.bcast .top .icon {color:var(--ink)}
body.bcast .top .site-brand small {color:var(--muted)}
/* Keep the cream wordmark legible when the in-game header switches to paper. */
body.bcast .top .site-brand a {display:inline-block;background:#182b21;border-radius:6px;padding:1px 6px;margin-left:-6px}
/* Editorial subpages */
.content-page .top {position:relative}
.content-page .doc-container {max-width:1080px;padding:36px 22px 70px;margin:auto}
.content-page .doc-nav {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:30px}
.content-page .doc-brand {font:900 26px var(--display);letter-spacing:.03em}
.content-page .doc-brand a {color:var(--ink);text-decoration:none}
.content-page .doc-brand img {display:block;width:192px;max-width:100%;height:auto}
.content-page .doc-nav .hero-cta {min-height:38px}
.content-page .doc-lede {background:#173e2d;color:#fff;border-radius:16px;padding:32px clamp(20px,4vw,48px);margin-bottom:32px;position:relative;overflow:hidden}
.content-page .doc-lede::after {content:"02:00";position:absolute;right:-15px;bottom:-30px;font:900 155px var(--display);color:#ffffff0c;pointer-events:none}
.content-page .doc-lede h1 {font:900 clamp(40px,5vw,66px)/1 var(--display);max-width:15ch;margin:8px 0 14px;text-transform:uppercase;position:relative;z-index:1}
.content-page .doc-lede p {color:#deeadf;max-width:63ch;line-height:1.7;position:relative;z-index:1}
.content-page .doc-layout {display:grid;grid-template-columns:minmax(0,2fr) minmax(190px,.8fr);gap:36px}
.content-page .doc-article {min-width:0;font-size:15px;line-height:1.8}
.content-page .doc-article h2 {font:900 30px/1.15 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:32px 0 12px}
.content-page .doc-article h3 {font:900 22px/1.15 var(--display);text-transform:uppercase;margin:24px 0 8px}
.content-page .doc-article p,.content-page .doc-article li {color:var(--ink)}
.content-page .doc-article p {margin:0 0 18px}
.content-page .doc-article li {margin:0 0 8px}
.content-page .doc-aside {align-self:start;position:sticky;top:25px;background:var(--card);border:1px solid var(--line);padding:18px;border-radius:12px}
.content-page .doc-aside h2 {font:900 20px var(--display);margin:0 0 11px;text-transform:uppercase}
.content-page .doc-aside a {display:block;padding:10px 0;border-top:1px solid var(--line);text-decoration:none;font-size:13px;font-weight:700;color:#245c3d}
.content-page .doc-note {background:#e8eee6;border-left:4px solid #ba8d28;padding:16px 20px;border-radius:0 8px 8px 0;margin:22px 0}
.content-page .crumbs {font:800 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:15px}
.content-page .crumbs a {color:var(--muted)}
.content-page .doc-footer {max-width:1080px;margin:0 auto;padding:18px 22px 35px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.content-page .doc-footer nav {display:flex;flex-wrap:wrap;gap:8px 21px;margin-bottom:14px}
.content-page .doc-footer a {color:var(--ink);font-weight:700;text-decoration:none}
@media (max-width:790px) {
  .feature-grid {grid-template-columns:1fr}
  .feature-card {padding:17px 20px}
  .feature-card h3 {margin-top:12px}
  .siteinfo {grid-template-columns:1fr}
  .siteinfo > h2,.siteinfo > p:first-of-type {grid-column:1}
  .faq-stack {grid-template-columns:1fr}
  .editorial-content,.siteinfo {padding-left:16px;padding-right:16px}
  .content-page .doc-layout {grid-template-columns:1fr}
  .content-page .doc-aside {position:static}
}
@media (max-width:560px) {
  .top .in {padding:8px 12px;gap:8px;grid-template-columns:minmax(0,1fr) auto auto;min-height:56px}
  .top .site-brand a {font-size:20px}
  .top .site-brand a img {width:138px}
  .top .site-brand small {display:none}
  .top .tl {gap:0}
  .top .icon {width:34px;height:34px}
  .wrap {padding-top:8px}
  .game-section-head {margin-top:0;margin-bottom:6px;padding:0 4px}
  .game-section-head .section-eyebrow {font-size:9px}
  .game-section-head h1 {font-size:29px}
  .game-section-head p {font-size:11px}
  .editorial-topline {align-items:start}
  .sitefoot {padding-inline:15px}
  .content-page .doc-container {padding:20px 15px 40px}
  .content-page .doc-lede {padding:27px 20px}
}
@media (prefers-reduced-motion:reduce) {html{scroll-behavior:auto}.hero-cta,.feature-card {transition:none}}
/* Standalone guides and legal documents use the same typography as the game. */
@font-face {font-family:"Big Shoulders Display";font-display:swap;font-style:normal;font-weight:700 900;src:url("/fonts/big-shoulders-display-v24-latin.woff2") format("woff2")}
@font-face {font-family:"Libre Franklin";font-display:swap;font-style:normal;font-weight:400 800;src:url("/fonts/libre-franklin-v20-latin.woff2") format("woff2")}
:root {--display:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;--body:"Libre Franklin",Arial,sans-serif}
.content-page {font-family:var(--body);line-height:1.55;color:var(--ink)}
.content-page *, .legacy-doc * {box-sizing:border-box}
.content-page button,.content-page a,.legacy-doc button,.legacy-doc a {touch-action:manipulation}
.content-page a:hover,.legacy-doc a:hover {text-decoration:underline}
.content-page .hero-cta:hover {text-decoration:none}
/* Legacy static pages retain scripts, charts and content but are given a consistent site frame. */
.legacy-doc {font-family:var(--body);line-height:1.7;color:var(--ink)}
.legacy-doc > .wrap {max-width:960px;margin:auto;padding:22px 22px 40px;display:block}
.legacy-doc > .wrap > header {background:#173e2d;color:#fff;border:0;border-radius:13px;padding:16px 23px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.legacy-doc .doc-brand {margin:0;font:900 25px/1.15 var(--display);letter-spacing:.04em;text-transform:uppercase}
.legacy-doc .doc-brand a {color:#fff;text-decoration:none}
.legacy-doc .doc-brand img {display:block;width:192px;max-width:100%;height:auto}
.legacy-doc .doc-brand small {display:block;font:700 11px/1.4 var(--body);letter-spacing:.1em;color:#d5e0d2}
.legacy-doc > .wrap > header a.play {display:inline-flex;align-items:center;background:#f0bd49;color:#172c21;text-decoration:none;padding:10px 14px;border-radius:6px;min-height:40px;font:800 12px var(--body);white-space:nowrap}
.legacy-doc > .wrap > main {background:var(--card);padding:23px clamp(17px,4vw,45px) 37px;border:1px solid var(--line);border-radius:13px;margin-top:17px;box-shadow:0 12px 35px #173e2d0b}
.legacy-doc > .wrap > main h1 {font:900 clamp(35px,5vw,54px)/1.05 var(--display);letter-spacing:.02em;text-transform:uppercase;margin:0 0 20px}
.legacy-doc > .wrap > main h2 {font-family:var(--display);font-weight:900;font-size:clamp(23px,3vw,30px);letter-spacing:.02em;text-transform:uppercase;color:#214831;margin:31px 0 10px}
.legacy-doc > .wrap > main p,.legacy-doc > .wrap > main li {line-height:1.8}
.legacy-doc > .wrap > .sitefoot {max-width:100%;padding:22px 0}
.legacy-doc .doc-guide-links {border-bottom:1px solid var(--line);padding-bottom:17px;color:var(--muted)}
@media(max-width:560px) {.content-page .doc-brand img,.legacy-doc .doc-brand img{width:145px}.legacy-doc > .wrap{padding:12px}.legacy-doc > .wrap > header{padding:13px}.legacy-doc .doc-brand{font-size:22px}.legacy-doc > .wrap > main{padding:21px 18px 28px}}
/* Preserve the existing theme toggle and operating-system dark preference. */
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {--paper:#111d16;--card:#1b2a20;--ink:#ecf3e9;--muted:#b4c4b8;--line:#385044;--key:#293e31;--key-hi:#334b3a;--key-ink:#f0f6ec}
  :root:not([data-theme="light"]) .siteinfo h3,
  :root:not([data-theme="light"]) .feature-card .text-link {color:#a6d6b0}
  :root:not([data-theme="light"]) .feature-number {background:#315443;color:#e4f5e8}
}
:root[data-theme="dark"] {--paper:#111d16;--card:#1b2a20;--ink:#ecf3e9;--muted:#b4c4b8;--line:#385044;--key:#293e31;--key-hi:#334b3a;--key-ink:#f0f6ec}
:root[data-theme="dark"] .siteinfo h3,
:root[data-theme="dark"] .feature-card .text-link {color:#a6d6b0}
:root[data-theme="dark"] .feature-number {background:#315443;color:#e4f5e8}