/* Scenario, finished-game and local statistics screens. */
.screen.intro,.screen.summary { display: grid; justify-items: center; }
.intro-card { width: min(520px,100%); border: 0; border-radius: 0; background: transparent; text-align: center; }
.intro-top { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 0 15px; }
.intro-top .eyebrow { color: var(--muted); font-size: 14px; font-weight: 600; }
.intro-tag { color: var(--muted); font-size: 14px; }
.intro-body { display: flex; flex-direction: column; gap: 15px; padding: 0 0 16px; }
.intro-state { color: #f2f5ed; font: 900 56px/.95 var(--font-display); text-transform: uppercase; }
.intro-clock { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0 6px; margin-top: -4px; color: var(--muted); font: 800 26px/1.1 var(--font-display); text-transform: uppercase; }
.intro-period { font: 500 14px/1.3 var(--font); }
.intro-time { font: inherit; }
.matchup { display: grid; grid-template-columns: minmax(0,1fr) 140px minmax(0,1fr); align-items: center; gap: 14px; margin-block: 5px 1px; }
.m-side { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.team-code { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffffff38; border-radius: 50%; background: var(--team-color); font: 900 23px/1 var(--font-display); letter-spacing: .01em; }
.m-name { font-size: 14px; color: var(--text-2); line-height: 1.25; }
.m-name b { font-weight: 500; overflow-wrap: anywhere; }
.m-role { font-size: 14px; color: var(--muted); line-height: 1.2; }
.m-side.me .m-role { color: var(--text); }
.intro-score { display: flex; align-items: center; justify-content: center; gap: 9px; }
.m-score { font: 900 42px/1 var(--font-display); color: #f2f5ed; }
.m-divider { color: var(--muted); font: 700 30px/1 var(--font-display); }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 0; list-style: none; }
.facts li { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 5px 9px; border: 1px solid #ffffff24; border-radius: 5px; font-size: 14px; }
.facts li:first-child { flex-basis: 100%; padding: 0 0 2px; border: 0; }
.facts li > span { color: var(--muted); }
.facts b { font-size: 14px; font-weight: 600; color: var(--text); }
.pips { display: inline-flex; align-items: center; gap: 4px; min-height: 16px; }
.pips i { width: 10px; height: 4px; border-radius: 1px; background: #3a443e; }
.pips i.on { background: #eef5ed; }
.challenge { color: var(--text-2); font-size: 18px; line-height: 1.5; }
.intro-note { color: #ee8585; font-size: 14px; font-weight: 600; line-height: 1.5; text-transform: uppercase; }
.start { min-height: 60px; border: 1px solid #dbe3df; border-radius: 6px; background: #eaf0ed; color: #101713; font: 900 30px/1 var(--font-display); text-transform: uppercase; }
.start:hover { background: #fff; color: #101713; }
.start .kbd { border-color: #10171340; color: #34423a; }
.intro-save { margin-top: -5px; }
.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-block: 5px 14px; }
  .intro-body { gap: 14px; }
  .matchup { grid-template-columns: minmax(0,1fr) 116px minmax(0,1fr); gap: 5px; }
  .team-code { width: 40px; height: 40px; font-size: 22px; }
  .intro-score { gap: 7px; }
  .m-score { font-size: 42px; }
  .challenge { font-size: 18px; }
  .score-card { padding: 23px 16px; }
  .tiles { grid-template-columns: repeat(2,minmax(0,1fr)); }
}