/* Scenario, finished-game and local statistics screens. */
.screen.intro,.screen.summary { display: grid; justify-items: center; }
.intro-card { width: min(740px,100%); overflow: hidden; background: var(--panel); }
.intro-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 16px; padding: 15px 24px; border-bottom: 1px solid var(--border); background: #17251b; }
.intro-top .eyebrow { color: var(--accent); font-weight: 600; }
.intro-tag { color: var(--muted); font-size: 14px; }
.intro-body { display: flex; flex-direction: column; gap: 17px; padding: 24px; }
.matchup { display: grid; grid-template-columns: minmax(0,1fr) 130px minmax(0,1fr); align-items: center; gap: 15px; }
.m-side { display: grid; grid-template-columns: auto auto; align-items: center; gap: 7px 12px; min-width: 0; }
.m-side.home { direction: rtl; }
.m-side.home > * { direction: ltr; }
.team-code { display: grid; place-items: center; min-width: 56px; height: 48px; border: 1px solid #ffffff38; border-bottom: 3px solid var(--team-color); border-radius: 5px; background: #ffffff08; color: #fff; font: 750 28px/1 var(--font-display); letter-spacing: .025em; }
.m-score { justify-self: end; font: 750 64px/.9 var(--font-display); color: #fff; }
.m-name { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; font-size: 14px; color: var(--muted); line-height: 1.3; }
.m-name b { color: var(--text-2); font-weight: 600; }
.m-role { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.m-side.me .m-role { color: var(--accent); }
.intro-clock { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: stretch; padding: 5px 0; border-inline: 1px solid var(--border); text-align: center; }
.intro-period { font-size: 14px; color: var(--muted); }
.intro-time { font: 750 49px/1.1 var(--font-display); color: #fff; }
.intro-state { color: var(--text-2); font: 500 17px/1.4 var(--font); margin-top: 3px; }
.strip { width: 100%; height: auto; max-height: 48px; }
.strip-turf { fill: #21452c; }
.strip-line { stroke: #ffffff4d; stroke-width: 1; }
.strip-mid { stroke: #ffffff80; stroke-width: 1.2; }
.strip-gain { fill: #40d98932; }
.strip-los { stroke: #eaf8e8; stroke-width: 1.5; }
.strip-ball { fill: #bc8650; stroke: #fff; stroke-width: 1; }
.strip-arrow { fill: #fff; }
.facts { display: grid; grid-template-columns: 1.6fr 1fr 1fr; padding: 13px 0; margin: 0; list-style: none; border-block: 1px solid var(--border); gap: 12px; }
.facts li { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 14px; }
.facts li > span { color: var(--muted); }
.facts b { font-size: 15px; font-weight: 600; color: var(--text); }
.pips { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; }
.pips i { width: 17px; height: 5px; border-radius: 1px; background: #34473a; }
.pips i.on { background: #eef5ed; }
.intro-note,.challenge { color: var(--text-2); font-size: 14px; line-height: 1.6; }
.intro-note { padding-left: 10px; border-left: 2px solid var(--accent); }
.start { font: 700 23px/1.2 var(--font-display); min-height: 49px; }
.intro-save { text-align: center; margin-top: -7px; }
.end-card { display: flex; flex-direction: column; gap: 13px; padding: 20px; background: var(--panel); animation: fade .2s; }
.end-head { font-size: 38px; line-height: 1; }
.res-W .end-head { color: var(--g); }
.res-L .end-head { color: var(--r); }
.surv-line { font-size: 14px; color: var(--text-2); }
.surv-line.out { color: var(--r); }
.surv-line.alive { color: var(--g); }
.vs { border: 1px solid var(--border); border-radius: 7px; }
.vs-head { padding: 9px 11px; font-size: 14px; font-weight: 600; background: var(--surface-2); }
.vs-rows > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; padding: 8px 11px; border-top: 1px solid var(--border); font-size: 14px; }
.vs-rows span { color: var(--muted); }
.real-line,.typical { color: var(--muted); font-size: 14px; line-height: 1.6; }
.typical b { color: var(--text-2); }
.lookalike { padding: 13px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.lookalike .eyebrow { color: var(--muted); }
.ll-name { color: var(--text); font: 750 29px/1.2 var(--font-display); margin-top: 4px; }
.lookalike p { color: var(--text-2); font-size: 14px; margin-top: 7px; }
.score-card { display: flex; flex-direction: column; gap: 16px; padding: 26px; width: min(600px,100%); text-align: center; }
.score-card > .lookalike,.score-card > .share,.score-card > .board,.score-card > .run-games,.score-card > .name-form { text-align: left; }
.big-score { display: flex; align-items: flex-start; justify-content: center; }
.big-score b { font: 750 112px/.9 var(--font-display); color: var(--text); }
.big-score > span { font: 600 34px/1 var(--font-display); color: var(--muted); }
.big-caption { font-size: 17px; font-weight: 600; line-height: 1.35; }
.streak { display: inline-flex; align-self: center; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.streak svg { width: 16px; height: 16px; }
.score-card .squares { justify-content: center; }
.vs-line { font-size: 14px; }
.vs-line.better { color: var(--g); }
.vs-line.worse { color: var(--r); }
.share { display: flex; flex-direction: column; gap: 8px; }
.share-text { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 7px; background: #101a13; color: var(--text-2); font: 400 14px/1.5 var(--font); resize: none; }
.countdown { color: var(--muted); font-size: 14px; }
.countdown b { color: var(--text-2); }
.run-games { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.run-games li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 2px 9px; align-items: center; padding: 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); }
.run-games small { grid-column: 2; color: var(--muted); font-size: 14px; }
.run-games .grade { grid-row: span 2; }
.rg-main { font-size: 14px; }
.name-form { display: flex; gap: 7px; }
.name-form input { flex: 1; min-width: 0; height: 44px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface-2); }
.board { padding: 13px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); text-align: left; }
.hist { display: flex; gap: 3px; height: 60px; align-items: end; margin-top: 9px; }
.hist span { flex: 1; background: var(--border-strong); }
.hist span.me { background: var(--accent); }
.hist-axis { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.top { margin: 9px 0 0; padding: 0; list-style: none; counter-reset: rank; font-size: 14px; }
.top li { display: grid; grid-template-columns: 24px 1fr auto; gap: 6px; padding: 5px 0; border-top: 1px solid var(--border); }
.top li::before { counter-increment: rank; content: counter(rank) "."; color: var(--muted); }
.top li.me { color: var(--accent); }
.stats { display: flex; flex-direction: column; gap: 16px; }
.tiles { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.tile { display: flex; align-items: center; flex-direction: column; gap: 4px; padding: 12px 5px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); text-align: center; }
.tile b { font: 700 34px/1 var(--font-display); }
.tile small { color: var(--muted); font-size: 14px; }
.bars { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: 60px 1fr 25px; align-items: center; gap: 8px; font-size: 14px; }
.bar-label { color: var(--muted); }
.bar-track { height: 16px; border-radius: 3px; overflow: hidden; background: var(--surface-3); }
.bar-fill { display: block; height: 100%; background: var(--border-strong); }
.bar-row.today .bar-fill { background: var(--accent); }
.help { display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.help h3 { font-size: 22px; margin-bottom: 6px; }
.help ol { display: flex; flex-direction: column; gap: 5px; padding-left: 19px; margin: 0; font-size: 14px; }
.help-modes { display: grid; gap: 12px; }
.help-modes > div { padding: 13px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.grade-key { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.grade-key li { display: grid; grid-template-columns: 25px 65px minmax(0,1fr); align-items: center; gap: 9px; font-size: 14px; }
.grade-key li span:last-child { color: var(--text-2); }
.subbar .tiles { display: inline-flex; gap: 4px; }
.subbar .tiles i { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 3px; font-size: 14px; font-style: normal; color: #0b110e; background: var(--border-strong); }
.subbar .tile-W { background: var(--g); }
.subbar .tile-L { background: var(--r); }
.subbar .tile-T { background: var(--y); }
.subbar .tile-now { background: transparent; color: var(--text-2); border: 1px solid var(--border-strong); }
.subbar .tile-more { width: auto; padding-inline: 4px; color: var(--text-2); }
@media (max-width: 560px) {
  .intro-top { padding: 13px 15px; }
  .intro-body { padding: 18px 15px; gap: 15px; }
  .matchup { grid-template-columns: minmax(0,1fr) 88px minmax(0,1fr); gap: 10px; }
  .m-side { grid-template-columns: 1fr; justify-items: center; gap: 4px; text-align: center; }
  .team-code { min-width: 47px; height: 39px; font-size: 25px; }
  .m-score { justify-self: center; font-size: 48px; margin-top: 4px; }
  .m-name { justify-content: center; display: block; }
  .m-name > span { display: none; }
  .m-name b { font-size: 14px; overflow-wrap: anywhere; }
  .m-role { font-size: 14px; }
  .intro-time { font-size: 41px; }
  .intro-state { font-size: 14px; }
  .facts { grid-template-columns: 1.35fr 1fr 1fr; gap: 8px; }
  .facts b { font-size: 14px; }
  .pips { gap: 4px; }
  .pips i { width: 13px; }
  .score-card { padding: 23px 16px; }
  .tiles { grid-template-columns: repeat(2,minmax(0,1fr)); }
}