/* Rewrite History is additive. All mobile layout rules live in the final media block. */
:root {
  --history-bg: #071018;
  --history-panel: #0d1825;
  --history-panel-2: #111e2e;
  --history-line: #263852;
  --history-text: #f3f7fb;
  --history-muted: #9aaac0;
  --history-green: #35e57a;
  --history-green-dark: #0a3823;
  --history-blue: #a9d7ff;
  --history-red: #f17c91;
  --history-gold: #ffcb61;
}

.history-page {
  min-height: 100vh;
  padding: 30px clamp(16px, 4vw, 62px) 72px;
  color: var(--history-text);
  background: var(--history-bg);
}

.history-session-mount { max-width: 760px; }
.history-session-mount .darts-session-box { margin: 0; padding: 9px 12px; border-radius: 12px; font-size: .82rem; }
.history-session-mount .darts-session-box span { font-size: .72rem; }

.history-shell { max-width: 1180px; margin: 0 auto; }
.history-eyebrow { color: var(--history-green); font-size: .72rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.history-hero { display: grid; grid-template-columns: 1fr 210px; gap: 36px; align-items: end; padding: 48px 0 46px; }
.history-hero h1 { max-width: 720px; margin: 11px 0 15px; font-size: clamp(3.2rem, 8vw, 7rem); line-height: .88; letter-spacing: -.055em; }
.history-lede { max-width: 700px; margin: 0; color: #bdcad9; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.52; }
.history-hero-actions, .history-dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.history-note { max-width: 650px; margin: 18px 0 0; color: #75869e; font-size: .78rem; line-height: 1.5; }
.history-hero-stat { padding: 20px; border: 1px solid #244d3e; border-radius: 18px; background: #0c231c; text-align: right; }
.history-hero-stat span, .history-hero-stat small { display: block; color: #a7cdb8; font-size: .76rem; }
.history-hero-stat strong { display: block; margin: 4px 0; color: var(--history-green); font-size: 3.8rem; line-height: 1; }
.history-btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border: 1px solid var(--history-line); border-radius: 11px; color: var(--history-text); background: var(--history-panel-2); font: inherit; font-weight: 900; text-decoration: none; cursor: pointer; }
.history-btn:hover, .history-btn:focus-visible { border-color: var(--history-blue); transform: translateY(-1px); }
.history-btn-primary { border-color: var(--history-green); color: #05140b; background: var(--history-green); }
.history-btn-bust { border-color: #9f3e59; color: #ffd3dc; background: #291723; }
.history-btn-quiet { color: #d0dbea; background: #121e2e; }
.history-section { margin-top: 24px; }
.history-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.history-section-head.compact { align-items: center; margin-bottom: 12px; }
.history-section h2 { margin: 6px 0 0; font-size: clamp(1.6rem, 3vw, 2.35rem); letter-spacing: -.03em; }
.history-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.history-card { position: relative; display: flex; min-height: 275px; flex-direction: column; padding: 22px; overflow: hidden; border: 1px solid var(--history-line); border-radius: 18px; background: var(--history-panel); }
.history-card::after { position: absolute; width: 170px; height: 170px; right: -80px; bottom: -90px; border-radius: 50%; background: var(--card-accent, #1b4b3a); opacity: .3; content: ""; }
.history-card[data-accent="heritage"] { --card-accent: #8d633c; }
.history-card[data-accent="power"] { --card-accent: #245dc9; }
.history-card[data-accent="world"] { --card-accent: #5b3bb1; }
.history-card[data-accent="future"] { --card-accent: #168b59; }
.history-card-top { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.history-card-year { color: var(--history-muted); font-size: .8rem; font-weight: 900; letter-spacing: .08em; }
.history-card h3 { margin: 10px 0 4px; font-size: 1.7rem; letter-spacing: -.03em; }
.history-card-match { margin: 0; color: var(--history-blue); font-size: .92rem; font-weight: 800; }
.history-card-story { margin: 14px 0; color: #adbacb; line-height: 1.45; }
.history-route { margin-top: auto; color: var(--history-text); font-size: 1.1rem; font-weight: 900; letter-spacing: .03em; }
.history-route small { display: block; margin-top: 4px; color: var(--history-muted); font-size: .72rem; font-weight: 700; letter-spacing: .01em; }
.history-card-actions { display: flex; align-items: center; gap: 10px; margin-top: 17px; }
.history-card-actions .history-btn { min-height: 42px; padding: 0 14px; font-size: .84rem; }
.history-card-source { margin: 12px 0 0; color: #708198; font-size: .68rem; line-height: 1.35; }
.history-card-source a { color: #86c8ff; font-weight: 800; }
.history-loading { padding: 28px; border: 1px dashed #2c3d55; border-radius: 15px; color: var(--history-muted); }
.history-player-stat { color: #b7c7d9; font-size: .86rem; text-align: right; }
.history-player-stat strong { color: var(--history-green); }
.history-filters { display: flex; gap: 8px; }
.history-filters select { min-height: 40px; max-width: 210px; padding: 0 30px 0 11px; border: 1px solid var(--history-line); border-radius: 9px; color: var(--history-text); background: var(--history-panel-2); font: inherit; font-size: .8rem; font-weight: 800; }
.history-leaderboard { overflow: hidden; border: 1px solid var(--history-line); border-radius: 15px; background: var(--history-panel); }
.history-leader-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 100px 105px; gap: 10px; align-items: center; min-height: 56px; padding: 8px 15px; border-bottom: 1px solid rgba(152, 171, 197, .11); }
.history-leader-row:last-child { border-bottom: 0; }
.history-leader-rank { color: var(--history-muted); font-weight: 900; }
.history-leader-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 850; }
.history-leader-result { color: var(--history-red); font-size: .78rem; font-weight: 900; }
.history-leader-result.is-winner { color: var(--history-green); }
.history-leader-value { color: #b8c5d6; font-size: .82rem; text-align: right; }
.history-leader-empty { padding: 25px 17px; color: var(--history-muted); }
.history-footer { max-width: 780px; margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(151, 173, 200, .14); color: #75869e; font-size: .75rem; line-height: 1.55; }
.history-footer strong { color: #aebdd0; }
.history-footer p { margin: 7px 0 0; }

.history-scorer { max-width: 1020px; padding-bottom: 26px; }
.history-scorer-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0 10px; }
.history-link-button { padding: 7px 0; border: 0; color: var(--history-blue); background: transparent; font: inherit; font-weight: 850; cursor: pointer; }
.history-live-badge, .history-mode-badge { padding: 6px 10px; border: 1px solid #2f684d; border-radius: 99px; color: var(--history-green); background: var(--history-green-dark); font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.history-match-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 18px 0 24px; }
.history-match-head h1 { margin: 6px 0 6px; font-size: clamp(2rem, 5vw, 3.7rem); letter-spacing: -.045em; }
.history-match-head p { max-width: 650px; margin: 0; color: var(--history-muted); }
.history-round-mark { padding: 12px 17px; border: 1px solid #3c3c2b; border-radius: 12px; color: var(--history-gold); background: #242117; text-align: right; }
.history-round-mark span { display: block; font-size: 2rem; font-weight: 950; line-height: 1; }
.history-round-mark small { color: #bfad78; font-size: .65rem; text-transform: uppercase; }
.history-scoreboard { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.history-score-card { padding: 20px 24px; border: 1px solid var(--history-line); border-radius: 16px; background: var(--history-panel); }
.history-score-card.is-active { border-color: #2c9b60; box-shadow: 0 0 0 2px rgba(53, 229, 122, .08); }
.history-score-card-pro { border-color: #3f365e; }
.history-score-label { display: block; color: var(--history-muted); font-size: .8rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.history-score-card strong { display: block; margin: 5px 0 9px; font-size: clamp(3.6rem, 8vw, 6rem); line-height: .92; letter-spacing: -.06em; }
.history-score-card-pro strong { color: #d7caff; }
.history-score-card div { display: flex; justify-content: space-between; gap: 10px; color: var(--history-muted); font-size: .76rem; }
.history-replay-status { min-height: 25px; margin: 13px 0; color: var(--history-blue); font-size: .85rem; font-weight: 800; }
.history-score-entry, .history-timeline-panel { padding: 21px; border: 1px solid var(--history-line); border-radius: 16px; background: var(--history-panel); }
.history-score-entry { margin-top: 14px; }
.history-score-entry-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.history-score-entry h2 { margin: 4px 0 0; font-size: 1.55rem; }
.history-visit-count { color: var(--history-muted); font-size: .78rem; font-weight: 850; }
.history-score-input { display: block; width: 100%; height: 92px; margin: 16px 0 12px; padding: 0 20px; border: 2px solid #36bd70; border-radius: 13px; outline: none; color: var(--history-text); background: #08121f; font: inherit; font-size: 3.7rem; font-weight: 950; text-align: center; }
.history-score-input:focus { box-shadow: 0 0 0 4px rgba(53, 229, 122, .15); }
.history-keypad { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.history-keypad button { min-height: 46px; border: 1px solid #304663; border-radius: 9px; color: #dce5f1; background: #142237; font: inherit; font-size: 1.1rem; font-weight: 900; cursor: pointer; }
.history-keypad button:hover, .history-keypad button:focus-visible { border-color: var(--history-green); }
.history-entry-actions { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 9px; margin-top: 10px; }
.history-entry-actions .history-btn { min-height: 48px; }
.history-score-help { margin: 11px 0 0; color: #7d8ea5; font-size: .73rem; line-height: 1.4; }
.history-timeline-panel { margin-top: 14px; }
.history-timeline { display: grid; gap: 7px; }
.history-visit { display: grid; grid-template-columns: 60px minmax(0, 1fr) 88px; gap: 10px; align-items: center; min-height: 46px; padding: 7px 10px; border-radius: 9px; background: #101d2c; }
.history-visit-number { color: var(--history-muted); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.history-visit-main strong { display: block; font-size: .92rem; }
.history-visit-main small { color: var(--history-muted); }
.history-visit-score { color: var(--history-green); font-size: 1.05rem; font-weight: 950; text-align: right; }
.history-visit.pro .history-visit-score { color: #d7caff; }
.history-visit.bust .history-visit-score { color: var(--history-red); }
.history-dialog { width: min(510px, calc(100% - 26px)); padding: 25px; border: 1px solid #344966; border-radius: 18px; color: var(--history-text); background: #0b1623; box-shadow: 0 20px 80px rgba(0,0,0,.55); }
.history-dialog::backdrop { background: rgba(2, 7, 13, .72); }
.history-dialog h2 { margin: 8px 0; font-size: 2rem; letter-spacing: -.04em; }
.history-dialog p { color: var(--history-muted); line-height: 1.45; }
.history-dialog-close { float: right; border: 0; color: var(--history-muted); background: transparent; font-size: 1.8rem; cursor: pointer; }
.history-dialog > form > label, .history-dialog fieldset { display: block; margin-top: 17px; }
.history-dialog label { color: #b9c6d8; font-size: .8rem; font-weight: 850; }
.history-dialog input[readonly] { width: 100%; min-height: 45px; margin-top: 6px; padding: 0 11px; border: 1px solid var(--history-line); border-radius: 9px; color: var(--history-text); background: #111e2e; font: inherit; }
.history-dialog fieldset { padding: 12px; border: 1px solid var(--history-line); border-radius: 12px; }
.history-dialog fieldset[hidden] { display: none !important; }
.history-dialog legend { padding: 0 5px; color: var(--history-muted); font-size: .75rem; font-weight: 850; }
.history-mode-option { display: flex; gap: 9px; align-items: center; padding: 9px 3px; cursor: pointer; }
.history-mode-option input { accent-color: var(--history-green); }
.history-mode-option span { display: grid; gap: 2px; }
.history-mode-option small { color: var(--history-muted); font-size: .7rem; font-weight: 500; }
.history-login-hint { margin: 14px 0 0; color: var(--history-gold) !important; font-size: .75rem; }
.history-result-dialog { text-align: center; }
.history-result-mark { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 10px; border: 1px solid #367b58; border-radius: 50%; color: var(--history-green); background: var(--history-green-dark); font-size: 1.7rem; }
.history-result-dialog.is-loss .history-result-mark { border-color: #814056; color: var(--history-red); background: #281620; }
.history-result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.history-result-stat { padding: 10px 5px; border-radius: 10px; background: #111e2e; }
.history-result-stat strong { display: block; font-size: 1.35rem; }
.history-result-stat span { color: var(--history-muted); font-size: .68rem; }
.history-achievements { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.history-achievement { padding: 5px 8px; border: 1px solid #367b58; border-radius: 99px; color: #a9e7c0; background: #102b20; font-size: .68rem; font-weight: 850; }
.history-darts-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
.history-darts-choice button { min-height: 76px; border: 1px solid #304663; border-radius: 11px; color: var(--history-text); background: var(--history-panel-2); font: inherit; cursor: pointer; }
.history-darts-choice button:hover, .history-darts-choice button:focus-visible { border-color: var(--history-green); }
.history-darts-choice strong, .history-darts-choice span { display: block; }
.history-darts-choice strong { font-size: 1.7rem; }
.history-darts-choice span { color: var(--history-muted); font-size: .7rem; }
.history-toast { position: fixed; left: 50%; bottom: 20px; z-index: 20; max-width: min(420px, calc(100% - 32px)); padding: 11px 15px; border: 1px solid #3e6487; border-radius: 10px; color: #e8f2ff; background: #12263a; box-shadow: 0 12px 32px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .18s ease, transform .18s ease; }
.history-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.history-scorer[hidden], .history-player-stat[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 720px) {
  html, body { min-height: 100%; }
  body.dmc-page-rewrite-history { background: var(--history-bg); }
  body.dmc-page-rewrite-history.dmc-history-playing { overflow: hidden; }
  .history-page { min-height: calc(100dvh - 72px); padding: 11px 11px calc(16px + env(safe-area-inset-bottom)); }
  .history-hero { display: block; padding: 20px 6px 22px; }
  .history-hero h1 { margin: 8px 0 10px; font-size: clamp(3rem, 15vw, 4.9rem); }
  .history-lede { font-size: .92rem; line-height: 1.4; }
  .history-hero-actions { gap: 7px; margin-top: 16px; }
  .history-hero-actions .history-btn { flex: 1 1 auto; min-height: 43px; padding: 0 12px; font-size: .78rem; }
  .history-note { margin-top: 12px; font-size: .67rem; }
  .history-hero-stat { display: none; }
  .history-section { margin-top: 16px; }
  .history-section-head { align-items: start; margin-bottom: 10px; }
  .history-section h2 { font-size: 1.55rem; }
  .history-card-grid { grid-template-columns: 1fr; gap: 9px; }
  .history-card { min-height: 0; padding: 15px; border-radius: 13px; }
  .history-card h3 { margin-top: 7px; font-size: 1.3rem; }
  .history-card-story { margin: 9px 0; font-size: .82rem; }
  .history-route { font-size: .9rem; }
  .history-route small { font-size: .64rem; }
  .history-card-actions { margin-top: 11px; }
  .history-card-actions .history-btn { min-height: 39px; font-size: .74rem; }
  .history-card-source { margin-top: 8px; font-size: .6rem; }
  .history-filters { width: 100%; }
  .history-filters label { flex: 1; }
  .history-filters select { width: 100%; max-width: none; min-height: 36px; font-size: .69rem; }
  .history-leaderboard-section .history-section-head { display: block; }
  .history-leaderboard-section .history-filters { margin-top: 10px; }
  .history-leader-row { grid-template-columns: 28px minmax(0, 1fr) 74px; gap: 6px; min-height: 48px; padding: 6px 9px; }
  .history-leader-result { font-size: .67rem; }
  .history-leader-value { display: none; }
  .history-footer { margin-top: 22px; font-size: .65rem; }
  .history-session-mount .darts-session-box { padding: 7px 9px; border-radius: 10px; font-size: .72rem; }
  .history-session-mount .darts-session-box span { font-size: .63rem; }
  .history-session-mount .darts-session-btn { padding: 6px 9px; font-size: .68rem; }

  /* Scorer mode: one viewport, no fixed blur, no layout animation and no page scroll. */
  body.dmc-history-playing .history-page { height: calc(100dvh - 72px); min-height: 0; padding: 0 8px 8px; overflow: hidden; }
  body.dmc-history-playing .history-archive { display: none; }
  body.dmc-history-playing .history-scorer { height: 100%; padding: 0; overflow: hidden; }
  body.dmc-history-playing .history-scorer-topline { height: 35px; padding: 4px 2px 0; }
  body.dmc-history-playing .history-link-button { font-size: .72rem; }
  body.dmc-history-playing .history-live-badge { padding: 4px 7px; font-size: .58rem; }
  body.dmc-history-playing .history-match-head { height: 48px; padding: 4px 2px 7px; align-items: center; }
  body.dmc-history-playing .history-match-head h1 { margin: 3px 0 0; font-size: 1.18rem; letter-spacing: -.03em; }
  body.dmc-history-playing .history-match-head p { display: none; }
  body.dmc-history-playing .history-match-head .history-eyebrow { font-size: .58rem; }
  body.dmc-history-playing .history-round-mark { padding: 5px 8px; }
  body.dmc-history-playing .history-round-mark span { font-size: 1.15rem; }
  body.dmc-history-playing .history-round-mark small { font-size: .49rem; }
  body.dmc-history-playing .history-scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  body.dmc-history-playing .history-score-card { padding: 9px 11px; border-radius: 11px; }
  body.dmc-history-playing .history-score-label { font-size: .59rem; }
  body.dmc-history-playing .history-score-card strong { margin: 3px 0 5px; font-size: clamp(2.8rem, 13vw, 4.6rem); }
  body.dmc-history-playing .history-score-card div { font-size: .58rem; }
  body.dmc-history-playing .history-replay-status { min-height: 17px; margin: 5px 2px; overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
  body.dmc-history-playing .history-score-entry { margin-top: 0; padding: 9px; border-radius: 11px; }
  body.dmc-history-playing .history-score-entry-head { min-height: 22px; }
  body.dmc-history-playing .history-score-entry h2 { margin: 2px 0 0; font-size: 1rem; }
  body.dmc-history-playing .history-score-entry .history-eyebrow { font-size: .56rem; }
  body.dmc-history-playing .history-visit-count { font-size: .62rem; }
  body.dmc-history-playing .history-score-input { height: 47px; margin: 6px 0 7px; padding: 0 10px; border-radius: 8px; font-size: 2.15rem; }
  body.dmc-history-playing .history-keypad { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  body.dmc-history-playing .history-keypad button { min-height: clamp(30px, 7.3vw, 42px); border-radius: 6px; font-size: .9rem; }
  body.dmc-history-playing .history-entry-actions { grid-template-columns: 1.35fr 1fr .65fr; gap: 5px; margin-top: 6px; }
  body.dmc-history-playing .history-entry-actions .history-btn { min-height: 37px; padding: 0 5px; border-radius: 7px; font-size: .67rem; }
  body.dmc-history-playing .history-score-help { display: none; }
  body.dmc-history-playing .history-timeline-panel { display: none; }
  body.dmc-history-playing .history-toast { bottom: calc(10px + env(safe-area-inset-bottom)); font-size: .72rem; }
  .history-darts-choice button { min-height: 66px; }
}
