*{box-sizing:border-box}
:root{
  color-scheme:light;
  --nfl-blue:#013369;
  --nfl-red:#d50a0a;
  --bg:#f3f6fa;
  --surface:#ffffff;
  --surface2:#f7f9fc;
  --surface3:#eef3f8;
  --text:#0c1b2a;
  --muted:#60758b;
  --line:rgba(1,51,105,.15);
  --blue:#013369;
  --red:#d50a0a;
  --accent:#013369;
  --accent-contrast:#ffffff;
  --shadow:0 16px 45px rgba(1,51,105,.10);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#07111f;
  --surface:#0d1b2b;
  --surface2:#12243a;
  --surface3:#091624;
  --text:#f6f9fc;
  --muted:#9bb0c4;
  --line:rgba(255,255,255,.10);
  --blue:#4e8fd3;
  --red:#ff5252;
  --accent:#f4f7fb;
  --accent-contrast:#07111f;
  --shadow:0 18px 55px rgba(0,0,0,.28);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]):not([data-theme="dark"]){
    color-scheme:dark;
    --bg:#07111f;
    --surface:#0d1b2b;
    --surface2:#12243a;
    --surface3:#091624;
    --text:#f6f9fc;
    --muted:#9bb0c4;
    --line:rgba(255,255,255,.10);
    --blue:#4e8fd3;
    --red:#ff5252;
    --accent:#f4f7fb;
    --accent-contrast:#07111f;
    --shadow:0 18px 55px rgba(0,0,0,.28);
  }
}
body{
  margin:0;
  background:
    radial-gradient(circle at 8% -10%, color-mix(in srgb,var(--blue) 15%,transparent), transparent 32%),
    radial-gradient(circle at 94% 0%, color-mix(in srgb,var(--red) 10%,transparent), transparent 27%),
    var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
  min-height:100vh;
}
button{font:inherit}.app-shell{width:min(1440px,94vw);margin:0 auto;padding:26px 0 60px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:16px}
.top-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.theme-control{display:flex;padding:3px;background:var(--surface3);border:1px solid var(--line);border-radius:12px}
.theme-btn{border:0;background:transparent;color:var(--muted);padding:7px 10px;border-radius:9px;cursor:pointer;font-size:11px;font-weight:850;letter-spacing:.04em}
.theme-btn.active{background:var(--surface);color:var(--blue);box-shadow:0 2px 10px rgba(0,0,0,.08)}
h1{margin:0;font-size:clamp(28px,4vw,52px);letter-spacing:-.05em;color:var(--blue)}
html[data-theme="dark"] h1{color:#fff}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]):not([data-theme="dark"]) h1{color:#fff}
}
h2{margin:4px 0 0;letter-spacing:-.025em}
h3{font-size:11px;letter-spacing:.16em;color:var(--muted);margin:22px 0 8px}
.eyebrow{margin:0;color:var(--red);font-size:11px;letter-spacing:.17em;font-weight:900}
.hero,.content-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:18px}.hero{margin-bottom:18px}
.machine-panel,.status-panel,.choices-panel,.roster-panel,.results{
  background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 2.5%,transparent),transparent),var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow)
}
.machine-panel{min-height:360px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:28px}
.reels{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:min(650px,100%)}
.reel-wrap{text-align:center}
.slot-window{margin-top:8px;background:var(--surface3);border:2px solid color-mix(in srgb,var(--blue) 45%,var(--line));border-radius:16px;height:132px;overflow:hidden;box-shadow:inset 0 0 30px rgba(1,51,105,.08)}
.reel-track{height:100%;display:grid;grid-template-rows:1fr 1.35fr 1fr;align-items:center;transition:filter .2s}
.reel-item{display:grid;place-items:center;text-align:center;font-weight:950;letter-spacing:.03em;padding:0 10px}
.reel-item.muted{color:color-mix(in srgb,var(--muted) 55%,transparent);font-size:13px}
.reel-item.center{font-size:clamp(21px,3vw,32px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--red) 6%,transparent),transparent);color:var(--blue)}
html[data-theme="dark"] .reel-item.center{color:#fff}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]):not([data-theme="dark"]) .reel-item.center{color:#fff}
}
.reel-track.spinning{filter:blur(1.2px)}
.primary,.ghost{border-radius:12px;cursor:pointer;font-weight:900;letter-spacing:.04em}
.primary{border:0;background:linear-gradient(135deg,var(--nfl-red),#b20808);color:white;padding:13px 18px;box-shadow:0 8px 20px rgba(213,10,10,.18)}
.primary.big{margin-top:22px;width:180px;font-size:16px}
.ghost{border:1px solid var(--line);background:var(--surface2);color:var(--text);padding:10px 14px}
.ghost:disabled,.primary:disabled{opacity:.35;cursor:not-allowed}.ghost.small{font-size:12px;padding:8px 10px;margin-top:10px}
.status-panel{padding:34px;display:flex;justify-content:center;flex-direction:column;border-top:4px solid var(--blue)}
.status-panel h2{font-size:clamp(28px,3vw,44px)}.status-panel>p:not(.eyebrow){color:var(--muted);line-height:1.6;max-width:520px}
.content-grid{align-items:start}.choices-panel,.roster-panel{padding:22px}
.choices-panel{border-top:4px solid var(--red)}.roster-panel{border-top:4px solid var(--blue)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}.progress{font-weight:950;font-size:22px;color:var(--blue)}
.players{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.players.empty-state{display:grid;place-items:center;min-height:300px;color:var(--muted);border:1px dashed var(--line);border-radius:16px}
.player-card{background:var(--surface2);border:1px solid var(--line);border-radius:15px;padding:15px;cursor:pointer;text-align:left;color:var(--text);transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}
.player-card:hover{border-color:color-mix(in srgb,var(--blue) 55%,transparent);transform:translateY(-1px);box-shadow:0 8px 22px rgba(1,51,105,.08)}
.player-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.player-card strong{font-size:16px}.player-meta{color:var(--muted);font-size:12px;margin-top:3px}
.games-badge{white-space:nowrap;background:var(--surface3);border:1px solid var(--line);border-radius:999px;padding:5px 8px;font-size:10px;color:var(--muted)}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:13px}.stat{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px}.stat span{display:block;color:var(--muted);font-size:9px;letter-spacing:.08em;text-transform:uppercase}.stat b{display:block;margin-top:2px;font-size:14px}
.accolades{margin-top:10px;font-size:11px;color:var(--text)}
.slots{display:grid;gap:7px}.slot{background:var(--surface3);border:1px solid var(--line);border-radius:12px;min-height:50px;padding:9px 11px;display:flex;align-items:center;gap:10px}
.slot-label{width:42px;color:var(--red);font-weight:950;font-size:12px}.slot-player{flex:1;font-weight:750;font-size:13px}.slot-player.empty{color:var(--muted);font-weight:600}
.results{margin-top:18px;padding:36px;text-align:center;border-top:5px solid var(--red)}.record{font-size:clamp(58px,9vw,110px);font-weight:950;letter-spacing:-.07em;color:var(--blue)}.results p:not(.eyebrow){color:var(--muted)}.hidden{display:none!important}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:18px;z-index:10}.modal-card{width:min(520px,95vw);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;position:relative;box-shadow:var(--shadow)}.modal-close{position:absolute;right:15px;top:12px;border:0;background:none;color:var(--text);font-size:28px;cursor:pointer}.slot-choices{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:18px}.slot-choice{padding:12px;background:var(--surface3);border:1px solid var(--line);border-radius:10px;color:var(--text);cursor:pointer}
@media(max-width:850px){.hero,.content-grid{grid-template-columns:1fr}.players{grid-template-columns:1fr}.reels{grid-template-columns:1fr}.machine-panel{min-height:520px}.app-shell{width:min(96vw,760px)}.topbar{align-items:flex-start}.top-actions{max-width:220px}}

.mode-panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;gap:18px}
.mode-copy p:not(.eyebrow){margin:6px 0 0;color:var(--muted);font-size:13px}.mode-buttons{display:flex;background:var(--surface3);border:1px solid var(--line);padding:4px;border-radius:13px}
.mode-btn{border:0;background:transparent;color:var(--muted);padding:10px 16px;border-radius:10px;cursor:pointer;font-weight:900}.mode-btn.active{background:var(--blue);color:white}
.share-card{width:min(620px,100%);margin:26px auto 18px;background:var(--surface2);border:1px solid var(--line);border-radius:18px;padding:20px;text-align:left}
.share-card-head{display:flex;justify-content:space-between;align-items:center;gap:18px;border-bottom:1px solid var(--line);padding-bottom:14px}.share-brand{display:block;color:var(--red);font-size:11px;font-weight:950;letter-spacing:.14em}.share-card-head strong{display:block;margin-top:3px;font-size:19px}.share-record{font-size:38px;font-weight:950;color:var(--blue);letter-spacing:-.05em}
.share-scores{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.share-scores div{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px}.share-scores span{display:block;color:var(--muted);font-size:9px;letter-spacing:.09em}.share-scores b{display:block;font-size:19px;margin-top:2px}
.share-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.share-cell{aspect-ratio:1;border-radius:8px;display:grid;place-items:center;color:white;font-size:10px;font-weight:950}.share-cell.elite{background:#013369}.share-cell.great{background:#3478b8}.share-cell.good{background:#728ca6}.share-cell.risky{background:#d50a0a}
.share-foot{font-size:11px!important;margin:12px 0 0!important}.result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.share-status{font-size:12px;color:var(--muted)}
@media(max-width:650px){.mode-panel{align-items:flex-start;flex-direction:column}.share-grid{grid-template-columns:repeat(4,1fr)}}

.referral-area{margin-top:14px;text-align:center}
.invite-btn,.bonus-respin{border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-weight:900;cursor:pointer}
.invite-btn{background:var(--surface2);color:var(--text)}
.invite-btn:hover{border-color:var(--red)}
.bonus-respin{background:var(--blue);color:white;border-color:var(--blue);box-shadow:0 8px 20px rgba(1,51,105,.18)}
.referral-status{margin:7px 0 0;color:var(--muted);font-size:11px}
.share-modal-card{width:min(610px,95vw)}
.modal-subcopy{color:var(--muted);line-height:1.5}
.share-text-box{width:100%;min-height:170px;margin-top:14px;resize:vertical;border-radius:12px;border:1px solid var(--line);background:var(--surface3);color:var(--text);padding:14px;font:600 13px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}
.copy-actions{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.copy-status{font-size:12px;color:var(--muted)}


/* ===== GRIDIRON GLORY COMPACT MOBILE UI ===== */
@media (max-width: 700px) {
  body { font-size: 14px; }
  .wrap { padding: 10px !important; }

  header {
    margin-bottom: 8px !important;
    gap: 8px !important;
  }
  header h1 { font-size: clamp(28px, 9vw, 40px) !important; line-height: .95 !important; }
  .eyebrow { font-size: 10px !important; margin-bottom: 4px !important; }

  .top-actions { gap: 5px !important; }
  .theme-switch button, #newGameBtn {
    min-height: 34px !important;
    padding: 6px 9px !important;
    font-size: 11px !important;
  }

  .mode-bar {
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
  }
  .mode-bar h2 { font-size: 18px !important; margin: 2px 0 !important; }
  .mode-bar p { display: none !important; }

  main.grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Spin controls first and compact enough to stay visible with choices. */
  .machine {
    order: 1;
    padding: 10px !important;
    min-height: 0 !important;
  }
  .slots {
    gap: 7px !important;
    margin: 0 !important;
  }
  .slot { min-height: 74px !important; }
  .slot-label { font-size: 9px !important; margin-bottom: 3px !important; }
  .slot-window { min-height: 52px !important; }
  .slot-window .value,
  .slot-value { font-size: 23px !important; line-height: 1 !important; }
  #spinBtn {
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 8px !important;
    font-size: 14px !important;
  }

  /* Round information is useful, but doesn't need a large desktop card. */
  .round-card {
    order: 2;
    padding: 10px 12px !important;
    min-height: 0 !important;
  }
  .round-card h2 { font-size: 22px !important; margin: 2px 0 !important; }
  .round-card p { display: none !important; }

  /* Available players immediately follow the spin. */
  .available {
    order: 3;
    padding: 10px !important;
    min-height: 0 !important;
  }
  .available > .section-head { margin-bottom: 6px !important; }
  .available h2 { font-size: 18px !important; }

  /* Cards become dense horizontal choices instead of tall desktop cards. */
  #playersGrid,
  .players-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .player-card {
    padding: 9px 10px !important;
    min-height: 0 !important;
  }
  .player-card h3,
  .player-name {
    font-size: 16px !important;
    margin: 0 0 2px !important;
  }
  .player-card .meta,
  .player-meta { font-size: 10px !important; margin-bottom: 4px !important; }
  .player-card .stats,
  .player-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    margin: 4px 0 !important;
  }
  .player-card .stat,
  .player-stat {
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 11px !important;
  }
  .player-card button {
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* Starting lineup moves below player choices and collapses to a compact summary. */
  .team-card {
    order: 4;
    padding: 10px 12px !important;
    min-height: 0 !important;
  }
  .team-card h2 { font-size: 18px !important; margin: 2px 0 !important; }
  .roster { gap: 3px !important; }
  .roster-slot {
    min-height: 32px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  /* Keep modal actions thumb-friendly. */
  .modal-card { width: calc(100vw - 20px) !important; max-height: 88vh !important; overflow: auto !important; }
}

.era-index-badge{display:flex;flex-direction:column;align-items:flex-end;min-width:66px}.era-index-badge small{font-size:8px;letter-spacing:.08em;color:var(--muted);font-weight:900}.era-index-badge b{font-size:22px;color:var(--blue);line-height:1.05}@media(max-width:700px){.era-index-badge b{font-size:19px}.era-index-badge small{font-size:7px}}

/* Site footer */
.site-footer {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  padding: 24px 16px 28px;
  margin-top: 20px;
  font-size: 12px;
  line-height: 1.5;
  opacity: .68;
}
.site-footer a {
  color: inherit;
  text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  text-decoration: underline;
  opacity: 1;
}
@media (max-width: 700px) {
  .site-footer {
    padding: 18px 10px 22px;
    margin-top: 8px;
    font-size: 11px;
  }
}

#results { scroll-margin-top: 18px; }