:root {
  color-scheme: light;
  --ink: #17242e;
  --muted: #6b7a83;
  --line: #dbe3e4;
  --paper: #f2f5f3;
  --white: #ffffff;
  --board: #0b1118;
  --board-2: #121d25;
  --green: #b9f27c;
  --green-ink: #1f3320;
  --orange: #ffae68;
  --focus: #3987ff;
  --shadow: 0 18px 48px rgba(18, 35, 43, .09);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--paper); }
button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.app-shell { min-height: 100vh; width: min(100%, 1680px); margin: 0 auto; padding: 0 clamp(14px, 3vw, 42px) 34px; }
.topbar { min-height: 84px; display: grid; grid-template-columns: auto auto minmax(220px, 1fr) auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; width: fit-content; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.brand-mark { height: 30px; display: flex; align-items: center; gap: 3px; padding: 5px 7px; border-radius: 8px; background: var(--ink); }
.brand-mark i { width: 3px; display: block; background: var(--green); border-radius: 4px; }
.brand-mark i:nth-child(1) { height: 9px; }.brand-mark i:nth-child(2) { height: 17px; }.brand-mark i:nth-child(3) { height: 12px; }
.brand-copy { display: grid; gap: 2px; letter-spacing: .12em; }
.brand-copy strong { font-size: 11px; font-weight: 850; }
.brand-copy small { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .18em; }
.language-picker { display: inline-flex; align-items: center; gap: 7px; margin-left: 4px; }
.language-icon { font-size: 15px; }
.language-picker select { max-width: 180px; height: 36px; padding: 0 28px 0 9px; border: 1px solid var(--line); border-radius: 8px; color: #40515a; background: #fff; font-size: 11px; font-weight: 700; }
.topbar-title { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 12px; }
h1 { margin: 0; font-size: clamp(19px, 2vw, 25px); line-height: 1.15; letter-spacing: -.045em; font-weight: 760; }
.local-badge { display: inline-flex; align-items: center; gap: 6px; color: #60725e; font-size: 9px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.local-badge span { width: 6px; height: 6px; border-radius: 50%; background: #65ad49; box-shadow: 0 0 0 3px rgba(101,173,73,.13); }
.usage-hint { flex-basis: 100%; color: #6b7a83; font-size: 10px; line-height: 1.4; }
.topbar-actions { grid-column: 4; display: flex; justify-content: flex-end; gap: 9px; }
.topbar { position: relative; }
.topbar-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: calc(100% - 460px); }
.button { border: 1px solid var(--line); border-radius: 10px; min-height: 42px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--ink); background: #fff; font-size: 13px; font-weight: 720; cursor: pointer; transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease; }
.button:hover { transform: translateY(-1px); border-color: #aebdc0; box-shadow: 0 5px 14px rgba(18,35,43,.07); }
.button:active { transform: translateY(0) scale(.985); }
.button-primary { border-color: var(--green); background: var(--green); color: var(--green-ink); }
.button-primary:hover { border-color: #a7e764; background: #a7e764; }
.button-quiet { background: transparent; }

.boards-area { padding-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 580px), 1fr)); align-items: start; gap: 22px; }
.scoreboard { min-width: 0; overflow: hidden; border: 1px solid #dbe2e1; border-radius: 17px; background: var(--white); box-shadow: var(--shadow); animation: rise-in .24s ease both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.board-heading { min-height: 64px; padding: 10px 14px 10px 19px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.board-heading-main { min-width: 0; display: flex; align-items: center; gap: 12px; flex: 1; }
.board-index { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #697d80; background: #edf2ef; font-size: 10px; font-weight: 850; letter-spacing: .04em; }
.board-title { min-width: 60px; max-width: 180px; padding: 5px 1px; border: 0; color: var(--ink); background: transparent; font-size: 14px; font-weight: 760; }
.board-heading select { width: min(100%, 225px); min-width: 120px; height: 37px; padding: 0 28px 0 10px; border: 1px solid var(--line); border-radius: 8px; color: #40515a; background-color: #fff; font-size: 11px; font-weight: 680; }
.board-actions { display: flex; align-items: center; gap: 4px; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; color: #60727b; background: transparent; font-size: 16px; cursor: pointer; }
.icon-button:hover { color: var(--ink); background: #edf2ef; }

.score-display { position: relative; overflow: hidden; color: #edf5f1; background: var(--board); }
.score-display::before { position: absolute; content: ""; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(transparent, rgba(255,255,255,.08) 18%, rgba(255,255,255,.08) 82%, transparent); }
.display-meta { min-height: 70px; padding: 12px 21px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.09); }
.clock-block { display: flex; align-items: center; gap: 13px; }
.clock-label { color: #91a2a9; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.clock-value, .shot-value { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-weight: 790; letter-spacing: -.055em; }
.clock-value { min-width: 92px; color: #f1f8f4; font-size: clamp(28px, 4vw, 43px); line-height: 1; }
.clock-sub { color: #98aab0; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.period-pill { min-width: 68px; text-align: right; }
.period-value { display: block; margin-top: 4px; color: var(--green); font-size: 17px; font-weight: 780; }
.shot-pill { display: none; min-width: 58px; padding-left: 13px; border-left: 1px solid rgba(255,255,255,.14); text-align: right; }
.shot-pill.visible { display: block; }
.shot-value { display: block; margin-top: 4px; color: var(--orange); font-size: 18px; }
.team-list { position: relative; }
.team-row { min-height: 110px; padding: 13px 18px 13px 21px; display: grid; grid-template-columns: minmax(120px, 1fr) minmax(78px, .42fr) auto; align-items: center; gap: 12px; position: relative; }
.team-row + .team-row { border-top: 1px solid rgba(255,255,255,.08); }
.team-row::before { content: ""; width: 3px; position: absolute; left: 0; top: 20px; bottom: 20px; border-radius: 0 4px 4px 0; background: var(--team-accent, var(--green)); opacity: .95; }
.team-identity { min-width: 0; }
.team-display-name { display: block; overflow: hidden; color: #f1f7f4; font-size: clamp(16px, 2vw, 20px); font-weight: 720; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.team-subtitle { display: block; margin-top: 5px; color: #90a0a5; font-size: 9px; font-weight: 780; letter-spacing: .13em; text-transform: uppercase; }
.team-score { min-width: 78px; color: var(--team-accent, var(--green)); text-align: center; font-size: clamp(56px, 8.2vw, 94px); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-weight: 760; letter-spacing: -.08em; line-height: .95; cursor: default; }
.team-stats { display: flex; gap: 7px; }
.stat { min-width: 52px; padding: 7px 8px 6px; border: 1px solid rgba(255,255,255,.11); border-radius: 8px; text-align: center; background: rgba(255,255,255,.035); }
.stat strong { display: block; color: #e3ebe7; font-size: 16px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 3px; color: #84969d; font-size: 8px; font-weight: 780; letter-spacing: .12em; }
.display-foot { min-height: 38px; padding: 8px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #82939a; background: var(--board-2); font-size: 9px; font-weight: 720; letter-spacing: .1em; text-transform: uppercase; }
.clock-state { display: inline-flex; align-items: center; gap: 7px; }
.clock-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #66767d; }
.clock-state.running { color: var(--green); }
.clock-state.running::before { background: var(--green); box-shadow: 0 0 0 3px rgba(185,242,124,.14); animation: breathe 1.3s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 0 0 5px rgba(185,242,124,.02); } }

.board-controls { padding: 14px 16px 15px; display: grid; grid-template-columns: minmax(180px, .85fr) minmax(270px, 1.5fr); gap: 14px; }
.control-group { min-width: 0; }
.control-heading { margin: 0 0 8px; display: flex; align-items: center; justify-content: space-between; color: #6c7c82; font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.timer-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mini-button { min-height: 34px; padding: 0 9px; border: 1px solid #dce4e3; border-radius: 8px; color: #344850; background: #fff; font-size: 10px; font-weight: 760; cursor: pointer; transition: background .12s ease, border-color .12s ease, transform .12s ease; }
.mini-button:hover { border-color: #b5c7c8; background: #f4f7f5; }
.mini-button:active { transform: scale(.97); }
.mini-button.emphasis { border-color: #c9e9aa; color: #2a4924; background: #f2faea; }
.mini-button:disabled { opacity: .45; cursor: not-allowed; }
.team-controls { display: grid; gap: 7px; }
.team-control-row { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(0, 2fr); gap: 6px 9px; align-items: center; }
.score-actions { min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.score-action { display: inline-flex; gap: 3px; }
.score-action .score-adjust { width: auto; min-width: 38px; padding: 0 5px; }
.control-team-label { width: 100%; min-width: 0; height: 32px; padding: 0 5px; overflow: hidden; border: 0; border-bottom: 1px solid #dce4e3; border-radius: 4px 4px 0 0; color: #50636a; background: transparent; font-size: 10px; font-weight: 730; text-overflow: ellipsis; white-space: nowrap; }
.score-adjust { width: 37px; height: 33px; padding: 0; border: 1px solid #dce4e3; border-radius: 8px; color: #43565c; background: #fff; font-size: 12px; font-weight: 780; cursor: pointer; }
.score-adjust:hover { border-color: #b4c7bf; background: #f5f8f5; }
.score-adjust.plus { border-color: #cae7ac; color: #355128; background: #f4faee; }
.stat-adjusters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.stat-step { display: inline-flex; align-items: center; gap: 3px; padding: 2px 5px; border-radius: 6px; background: #f2f5f3; color: #66777d; font-size: 8px; font-weight: 760; }
.score-guidance { margin: -2px 0 8px; color: #78888d; font-size: 9px; line-height: 1.5; }
.tiny-adjust { width: 25px; height: 29px; border: 0; border-radius: 6px; color: #61727a; background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.tiny-adjust:hover { background: #edf2ef; }
.tiny-adjust.stat-name { width: auto; padding: 0 2px; color: #859399; font-size: 8px; letter-spacing: .05em; cursor: default; }
.board-bottom { min-height: 44px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #edf1ef; }
.event-info { grid-column: 1 / -1; padding: 12px; border: 1px solid #e3eae6; border-radius: 11px; background: #fbfcfa; }
.event-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.event-fields label { display: grid; gap: 5px; color: #62757a; font-size: 9px; font-weight: 760; }
.event-fields input { width: 100%; min-width: 0; height: 36px; padding: 0 9px; border: 1px solid #dce5e1; border-radius: 7px; color: #31464b; background: #fff; font-size: 11px; }
.event-display { min-height: 0; padding: 0 18px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 18px; color: #dfece4; background: #18242b; text-align: center; }
.event-display:not([hidden]) { min-height: 56px; padding-top: 9px; padding-bottom: 9px; }
.event-display[hidden] { display: none; }
.event-display strong { font-size: clamp(15px, 2vw, 24px); font-weight: 820; }
.event-display span { color: #9eafb2; font-size: clamp(9px, 1vw, 13px); font-weight: 730; letter-spacing: .06em; }
.board.display-only { min-height: 100vh; display: flex; flex-direction: column; border: 0; border-radius: 0; background: var(--board); box-shadow: none; }
.display-mode { min-height: 100vh; background: var(--board); }
.display-mode .board-heading, .display-mode .board-controls, .display-mode .board-bottom { display: none; }
.display-mode .score-display { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.display-mode .team-list { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.display-mode .team-row { flex: 1; }
.display-mode .team-row { min-height: clamp(120px, 24vh, 240px); }
.display-mode .team-display-name { font-size: clamp(25px, 3.5vw, 60px); }
.display-mode .team-score { font-size: clamp(100px, 19vw, 330px); }
.display-mode .clock-value { font-size: clamp(65px, 9vw, 150px); }
.display-mode .event-display:not([hidden]) { min-height: clamp(56px, 9vh, 110px); }
.display-mode .event-display strong { font-size: clamp(24px, 3vw, 50px); }
.display-mode .event-display span { font-size: clamp(13px, 1.5vw, 23px); }
.app-shell.display-mode { width: 100%; max-width: none; min-height: 100vh; margin: 0; padding: 0; }
.display-mode .boards-area { min-height: 100vh; padding: 0; display: block; }
.display-mode .scoreboard { min-height: 100vh; border: 0; border-radius: 0; }
.display-mode .display-meta { min-height: 13vh; padding: 2vh 5vw; }
.display-mode .display-foot { min-height: 7vh; padding: 2vh 5vw; }
body.display-mode { color-scheme: dark; background: var(--board); }
@media (min-width: 861px) {
  .team-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-row { min-height: 150px; grid-template-columns: 1fr; justify-items: center; gap: 9px; text-align: center; }
  .team-row + .team-row { border-top: 0; border-left: 1px solid rgba(255,255,255,.08); }
  .team-row::before { top: 8px; bottom: auto; left: 50%; width: 34px; height: 3px; transform: translateX(-50%); }
  .team-stats { justify-content: center; }
  .display-mode .team-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .display-mode .team-row { min-height: 0; }
}

/* Reference-inspired single-match control room: live preview left, controls right. */
.boards-area { display: block; padding-top: 12px; }
.scoreboard { min-height: calc(100vh - 112px); display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .62fr); grid-template-rows: 56px minmax(0, 1fr); gap: 0 18px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none; }
.board-heading { grid-column: 1 / -1; min-height: 56px; padding: 0 3px 10px; }
.board-heading-main { gap: 16px; }.studio-title { color: #51636a; font-size: 10px; letter-spacing: .16em; }
.board-heading select { width: min(100%, 290px); height: 38px; }
.board-actions .display-open { min-height: 38px; }
.score-display { grid-column: 1; grid-row: 2; width: 100%; aspect-ratio: 16 / 9; min-height: 0; max-height: calc(100vh - 120px); align-self: start; border: 1px solid #253e55; border-radius: 14px; background-color: #061238; background-size: cover; background-position: center; box-shadow: 0 18px 48px rgba(8,25,45,.17); display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; isolation: isolate; }
.score-display::before { z-index: -1; inset: 0; width: auto; left: 0; background: linear-gradient(145deg,rgba(3,10,36,.2),rgba(3,10,36,.2)); }
.score-display::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: rgba(2,9,31,.05); pointer-events: none; }
.score-display.dim-background::after { background: rgba(2,9,31,.54); }
.score-display.font-condensed { font-family: "Bahnschrift Condensed", "Arial Narrow", Impact, sans-serif; }
.score-display.font-serif { font-family: Georgia, "Times New Roman", serif; }
.event-header { min-width: 0; padding: clamp(16px,3vh,38px) 18px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; }
.event-kicker { color: #9fdcff; font-size: clamp(9px,1vw,17px); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.event-title { color: #fff; font-size: clamp(18px,2.4vw,42px); font-weight: 900; line-height: 1.12; }
.event-subtitle { color: #d2e6ff; font-size: clamp(11px,1.2vw,20px); }
.round-tag { padding: 5px 13px; border: 1px solid #8cc8ff66; border-radius: 99px; color: #d9efff; font-size: clamp(9px,.85vw,15px); letter-spacing: .1em; }
.display-meta { min-height: 70px; padding: 9px 16px; justify-content: center; gap: clamp(14px,3vw,42px); background: #081a37ad; }
.clock-block { flex-direction: column; align-items: center; gap: 3px; }.clock-value { font-size: clamp(30px,5vw,78px); }.clock-sub { display: none; }
.period-pill,.shot-pill { min-width: 56px; text-align: center; }.period-value,.shot-value { font-size: clamp(20px,2.8vw,42px); }
.team-list { min-height: 0; padding: 10px clamp(8px,2vw,26px); display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; }
.team-row { min-width: 0; min-height: 0; padding: 6px 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: clamp(10px,2vw,26px); row-gap: clamp(3px,.6vh,9px); text-align: center; }
.team-row .team-score { order: 1; }
.team-row .team-brand { order: 2; }
.team-row .team-stats { order: 3; width: 100%; justify-content: center; }
.team-row[data-team-index="0"] .team-brand { order: 1; }
.team-row[data-team-index="0"] .team-score { order: 2; }
.team-row + .team-row { border-top: 0; border-left: 1px solid #ffffff24; }.team-row::before { left: 50%; top: 0; bottom: auto; width: 32px; height: 3px; transform: translateX(-50%); }
.team-mark,.team-photo { width: clamp(38px,5vw,76px); height: clamp(38px,5vw,76px); flex: none; border-radius: 50%; object-fit: cover; }
.team-mark { display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--team-accent),transparent 45%); background: color-mix(in srgb,var(--team-accent),#07152d 84%); color: var(--team-accent); font-size: clamp(12px,1.3vw,20px); font-weight: 850; }
.team-subtitle { margin: 0 0 3px; }.team-display-name { max-width: 100%; color: #f6faff; font-size: clamp(14px,1.8vw,28px); }
.team-english { display: block; margin-top: 3px; color: #b8cee2; font-size: clamp(8px,.85vw,13px); font-weight: 750; letter-spacing: .12em; }
.team-score { min-width: 0; color: var(--team-accent); font-size: clamp(52px,8vw,130px); font-weight: 900; line-height: .95; text-shadow: 0 6px 24px #0005; }
.team-stats { min-height: 26px; justify-content: center; }
.display-foot { min-height: 36px; padding: 8px 14px; justify-content: center; flex-wrap: wrap; gap: 8px 14px; background: #06132cd9; font-size: clamp(8px,.8vw,12px); }
.display-foot i { width: 4px; height: 4px; border-radius: 50%; background: #9ab4cc; }
.board-controls { grid-column: 2; grid-row: 2; max-height: calc(100vh - 125px); overflow-y: auto; padding: 0 8px 16px 0; display: flex; flex-direction: column; gap: 13px; scrollbar-width: thin; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; color: #263a43; font-size: 14px; }
.panel-heading span { color: #73848a; font-size: 10px; }
.control-group { padding: 12px; border: 1px solid #e0e7e5; border-radius: 11px; background: #fff; }
.control-heading { margin-bottom: 10px; color: #53666b; font-size: 9px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.form-grid label,.manual-time label { min-width: 0; display: grid; gap: 5px; color: #64777b; font-size: 9px; font-weight: 740; }
.form-grid input:not([type=checkbox]):not([type=range]),.form-grid select,.manual-time input { width: 100%; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid #dce5e1; border-radius: 7px; color: #31464b; background: #fff; font-size: 10px; }
.form-grid input[type=color] { width: 100%; height: 34px; padding: 3px; border: 1px solid #dce5e1; border-radius: 7px; }
.form-grid .switch-item { min-height: 34px; display: flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid #ebefed; border-radius: 7px; background: #fafcfb; }
.form-grid .switch-item input { accent-color: #3289df; }
.team-controls { gap: 12px; }.team-control-row { padding-bottom: 10px; border-bottom: 1px solid #edf1ef; }
.team-edit-fields { display: grid; gap: 7px; }.team-edit-fields label { display: grid; gap: 4px; color: #6b7c80; font-size: 8px; font-weight: 760; }
.team-edit-fields input { width: 100%; height: 33px; padding: 0 8px; border: 1px solid #dce5e1; border-radius: 7px; color: #31464b; font-size: 10px; }
.score-actions { align-items: center; }.score-action .score-adjust { min-width: 35px; }.score-guidance { margin: 0 0 10px; font-size: 9px; }
.timer-buttons { grid-template-columns: repeat(3,minmax(0,1fr)); }.manual-time { margin-top: 9px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; }
.settings-group { padding: 0; }.settings-group summary { padding: 12px; color: #53666b; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.settings-group .form-grid { padding: 0 12px 12px; }.settings-group>.mini-button { margin: 0 12px 12px; }
.range-control input { width: 100%; accent-color: #3389df; }.text-button.danger { color: #8b5b59; align-self: flex-start; }
.display-only { grid-template-columns: 1fr; grid-template-rows: 1fr; min-height: 100vh; justify-items: center; align-items: center; }.display-only .score-display { grid-column: 1; grid-row: 1; width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)); max-height: none; aspect-ratio: 16 / 9; justify-self: center; align-self: center; border: 0; border-radius: 0; }.display-only .board-heading,.display-only .board-controls { display: none; }
.score-display.style-stacked .team-list { grid-template-columns: 1fr; }
.score-display.style-stacked .team-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; text-align: left; }
.score-display.style-stacked .team-row + .team-row { border-left: 0; border-top: 1px solid #ffffff24; }
.score-display.style-stacked .team-row::before { left: 0; top: 50%; bottom: auto; width: 3px; height: 32px; transform: translateY(-50%); }
.score-display.style-stacked .team-mark,.score-display.style-stacked .team-photo { width: clamp(34px,4vw,58px); height: clamp(34px,4vw,58px); }
.score-display.style-stacked .team-score { font-size: clamp(42px,6vw,92px); }
.score-display.style-stacked .team-stats { min-width: 65px; }
.display-only .team-score { font-size: clamp(100px,17vw,290px); }.display-only .event-title { font-size: clamp(32px,4vw,68px); }.display-only .clock-value { font-size: clamp(75px,10vw,170px); }
@media (max-width: 980px) { .scoreboard { grid-template-columns: minmax(0,1fr) minmax(310px,.92fr); gap: 0 12px; }.board-controls { padding-right: 3px; }.team-row { padding-right: 4px; padding-left: 4px; } }
@media (max-width: 760px) { .scoreboard { display: flex; flex-direction: column; min-height: 0; gap: 8px; }.board-heading { min-height: 50px; flex: none; }.score-display { width: 100%; max-height: none; aspect-ratio: 16/10; flex: none; }.board-controls { max-height: none; overflow: visible; padding: 6px 0 18px; }.team-row { min-width: 0; }.display-only { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }.display-only .score-display { width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)); aspect-ratio: 16 / 9; flex: none; }.display-only .team-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } }
.text-button { border: 0; padding: 7px 2px; color: #677980; background: transparent; font-size: 10px; font-weight: 760; cursor: pointer; }
.text-button:hover { color: var(--ink); }
.text-button.danger:hover { color: #ac4a3e; }
.toast { position: fixed; z-index: 10; left: 50%; bottom: 18px; max-width: calc(100vw - 28px); padding: 10px 15px; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; color: #f4f9f5; background: #17242e; box-shadow: 0 9px 30px rgba(8,20,26,.2); font-size: 12px; font-weight: 680; opacity: 0; transform: translate(-50%, 8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.page-footer { padding: 17px 2px 0; text-align: center; color: #75848a; font-size: 10px; line-height: 1.8; }
.page-footer p { margin: 7px 0; }
.page-footer kbd { display: inline-block; padding: 1px 5px; border: 1px solid #d2dcda; border-radius: 4px; color: #52646b; background: #fff; font-family: inherit; font-size: 9px; font-weight: 760; }
.page-footer p > span { padding: 0 6px; color: #b5c0bd; }
.footer-note { color: #879398; }
.guide-panel { margin: 13px auto 0; max-width: 1000px; text-align: left; }
.guide-panel summary { width: fit-content; margin: 0 auto; padding: 7px 10px; border-radius: 7px; color: #52666c; font-size: 10px; font-weight: 780; cursor: pointer; }
.guide-panel summary:hover { background: #e6ece9; }
.guide-grid { padding: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.guide-grid h2 { margin: 0 0 5px; color: #354a52; font-size: 12px; }
.guide-grid p { max-width: 58ch; margin: 0; color: #65767d; font-size: 11px; line-height: 1.65; }

.app-shell:fullscreen { width: 100%; padding: clamp(14px, 2vw, 36px); overflow: auto; background: var(--board); }
.app-shell:fullscreen .boards-area { min-height: 100%; padding: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 650px), 1fr)); align-content: center; gap: 18px; }
.app-shell:fullscreen .scoreboard { border-color: rgba(255,255,255,.14); background: var(--board); box-shadow: none; }
.app-shell:fullscreen .board-heading, .app-shell:fullscreen .board-controls, .app-shell:fullscreen .board-bottom, .app-shell:fullscreen .page-footer { display: none; }
.app-shell:fullscreen .score-display { min-height: min(78vh, 880px); display: flex; flex-direction: column; justify-content: center; }
.app-shell:fullscreen .display-meta { min-height: 110px; padding: 20px clamp(24px, 4vw, 62px); }
.app-shell:fullscreen .clock-label { font-size: clamp(12px, 1.25vw, 18px); }
.app-shell:fullscreen .clock-value { min-width: 2.8em; font-size: clamp(70px, 9vw, 150px); }
.app-shell:fullscreen .clock-sub { font-size: clamp(12px, 1.2vw, 18px); }
.app-shell:fullscreen .period-value { font-size: clamp(30px, 3.6vw, 64px); }
.app-shell:fullscreen .shot-value { font-size: clamp(32px, 3.8vw, 68px); }
.app-shell:fullscreen .team-row { min-height: 0; flex: 1; grid-template-columns: minmax(160px, 1fr) minmax(120px, .6fr) auto; padding: 2vh clamp(24px, 4vw, 62px); }
.app-shell:fullscreen .team-display-name { font-size: clamp(25px, 3.4vw, 56px); }
.app-shell:fullscreen .team-subtitle { font-size: clamp(10px, 1.2vw, 17px); }
.app-shell:fullscreen .team-score { font-size: clamp(100px, 19vw, 330px); }
.app-shell:fullscreen .stat { min-width: clamp(60px, 7vw, 120px); padding: 12px 14px; }
.app-shell:fullscreen .stat strong { font-size: clamp(22px, 2.4vw, 42px); }
.app-shell:fullscreen .stat span { font-size: clamp(9px, .9vw, 15px); }
.app-shell:fullscreen .display-foot { min-height: 52px; padding: 13px clamp(24px, 4vw, 62px); font-size: clamp(10px, 1vw, 15px); }
.app-shell:fullscreen .score-display::before { opacity: .4; }

@media (max-width: 860px) {
  .topbar { grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; padding: 10px 0; }
  .brand { grid-row: 1; grid-column: 1; }.language-picker { grid-row: 1; grid-column: 2; justify-self: start; }.topbar-title { grid-row: 2; grid-column: 1 / -1; justify-content: flex-start; }.topbar-actions { grid-row: 1; grid-column: 3; }
  .boards-area { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  header.topbar > label.language-picker { display: inline-flex !important; visibility: visible !important; }
  .app-shell { padding: 0 12px 24px; }
  .topbar { min-height: 0; padding: 10px 0; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
  .brand-mark { width: 27px; height: 27px; }.brand-copy strong { font-size: 10px; }
  .topbar-title { grid-row: 2; grid-column: 1 / -1; gap: 8px; }
  .topbar > .language-picker { display: inline-flex; }
  .language-picker { grid-row: 1; grid-column: 2; margin: 0; justify-self: end; }
  .language-picker select { width: 96px; max-width: 96px; height: 32px; padding-left: 4px; font-size: 9px; }
  .language-icon { display: none; }
  h1 { font-size: 18px; }.local-badge { font-size: 8px; }
  .topbar-actions { grid-row: 3; grid-column: 1 / -1; justify-content: flex-end; gap: 6px; }
  .button { min-height: 32px; padding: 0 7px; font-size: 9px; white-space: nowrap; }.button-quiet span { display: none; }
  .boards-area { padding-top: 13px; gap: 13px; }
  .scoreboard { border-radius: 13px; }
  .board-heading { min-height: 55px; padding: 8px 9px 8px 11px; gap: 6px; }
  .board-heading-main { gap: 7px; }.board-index { width: 25px; height: 25px; font-size: 9px; }
  .board-title { max-width: 80px; font-size: 12px; }
  .board-heading select { width: min(49vw, 170px); min-width: 100px; height: 34px; padding-left: 7px; font-size: 9px; }
  .icon-button { width: 29px; height: 30px; }
  .display-meta { min-height: 60px; padding: 10px 12px; }
  .clock-block { gap: 8px; }.clock-label { font-size: 8px; }.clock-value { min-width: 75px; font-size: 31px; }.clock-sub { font-size: 8px; }
  .period-pill { min-width: 50px; }.period-value { font-size: 15px; }.shot-pill { min-width: 42px; padding-left: 8px; }.shot-value { font-size: 15px; }
  .team-row { min-height: 84px; padding: 10px 10px 10px 14px; grid-template-columns: minmax(75px, 1fr) minmax(68px, .55fr) auto; gap: 5px; }
  .team-list { display: block; }.team-row + .team-row { border-top: 1px solid rgba(255,255,255,.08); border-left: 0; }.team-row::before { top: 15px; bottom: 15px; left: 0; width: 3px; height: auto; transform: none; }
  .team-row::before { top: 15px; bottom: 15px; }
  .team-display-name { font-size: 15px; }.team-subtitle { font-size: 7px; letter-spacing: .09em; }
  .team-score { min-width: 60px; font-size: 58px; }
  .team-stats { gap: 3px; }.stat { min-width: 37px; padding: 5px 4px; border-radius: 6px; }.stat strong { font-size: 13px; }.stat span { font-size: 7px; letter-spacing: .04em; }
  .display-foot { min-height: 33px; padding: 7px 12px; font-size: 8px; }
  .board-controls { padding: 11px; grid-template-columns: 1fr; gap: 12px; }
  .event-info { grid-column: 1; padding: 10px; }.event-fields { grid-template-columns: 1fr 1fr; gap: 8px; }.event-fields input { height: 38px; }
  .control-heading { font-size: 8px; }
  .timer-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mini-button { min-height: 36px; font-size: 9px; }
  .team-control-row { grid-template-columns: 1fr; gap: 5px; }.score-actions { gap: 4px; }.score-action .score-adjust { min-width: 34px; height: 31px; }
  .control-team-label { font-size: 9px; }.score-adjust { width: 100%; min-width: 29px; height: 33px; font-size: 11px; }
  .stat-adjusters { gap: 1px; margin-left: 0; }.tiny-adjust { width: 19px; height: 28px; font-size: 9px; }.tiny-adjust.stat-name { display: none; }
  .board-bottom { padding: 0 11px; }
  .page-footer { padding-top: 12px; font-size: 9px; }.page-footer p > span { padding: 0 2px; }
  .guide-grid { padding: 13px; grid-template-columns: 1fr; gap: 14px; }
  .app-shell:fullscreen { padding: 10px; }
  .app-shell:fullscreen .boards-area { grid-template-columns: 1fr; }
  .app-shell:fullscreen .score-display { min-height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* ========== 深色科技控制台 · 参考页风格覆盖（Reference-inspired dark console） ========== */
body, .app-shell { background: #0a0f16; color: #dfe8ec; }
html { background: #0a0f16; }
:root {
  --panel: #111a26;
  --panel-2: #0c141e;
  --panel-line: rgba(255,255,255,.09);
  --ptext: #dfe8ec;
  --pmuted: #8ba0ab;
  --accent: #34d399;
  --accent-ink: #06241a;
  --accent2: #2dd4bf;
  --inputbg: #0d1721;
  --inputline: rgba(255,255,255,.13);
}
/* Top bar */
.topbar { border-bottom: 1px solid var(--panel-line); }
.brand, .brand-copy strong, h1 { color: #e8eff3; }
.brand-mark { background: #16222e; }
.brand-copy small, .topbar-title .local-badge { color: #7f9c8c; }
/* Scoreboard container */
.scoreboard { background: var(--panel-2); border-color: var(--panel-line); box-shadow: none; }
.board-heading { border-bottom: 1px solid var(--panel-line); }
.board-heading select { background: var(--inputbg); border-color: var(--inputline); color: #d5e2e8; }
.studio-title, .panel-heading { color: #7e95a1; }
/* Controls area */
.board-controls { background: transparent; }
.panel-heading { color: #cfdde4; }
.panel-heading span { color: var(--pmuted); }
.control-panel { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px; padding: 13px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--panel-line); margin-bottom: 9px; }
.panel-head h2 { margin: 0; color: #b9ccd6; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.panel-tag { color: var(--pmuted); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.panel-tag.status { color: #5f7783; }
.panel-tag.status.on { color: var(--accent); }
.score-guidance { color: #7c929d; }
/* Big clock */
.big-clock { text-align: center; font-variant-numeric: tabular-nums; color: #f4faf6; font-size: clamp(38px, 5vw, 64px); font-weight: 800; letter-spacing: -.03em; line-height: 1; padding: 4px 0 2px; }
.clock-stage { text-align: center; color: var(--pmuted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.clock-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mini-button { background: var(--panel-2); border-color: var(--inputline); color: #cfe0e6; }
.mini-button:hover { background: #18242f; border-color: #2a3a46; }
.mini-button.emphasis { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 800; }
.mini-button.emphasis:hover { background: #2ebd87; }
/* Stage row */
.stage-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 2px; }
.stage-label { color: var(--pmuted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.stage-pill { min-width: 56px; height: 34px; border: 1px solid var(--inputline); border-radius: 9px; background: var(--panel-2); color: #d9e7ec; font-size: 18px; font-weight: 700; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.stage-pill:hover { background: #18242f; border-color: #2a3a46; }
.stage-pill:disabled { opacity: .4; cursor: not-allowed; }
/* Manual set */
.manual-set { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-top: 10px; }
.manual-set label { color: var(--pmuted); font-size: 9px; font-weight: 740; display: grid; gap: 4px; }
.manual-set input { height: 34px; padding: 0 9px; border: 1px solid var(--inputline); border-radius: 8px; background: var(--inputbg); color: var(--ptext); font-size: 12px; }
/* Collapse panels */
.control-panel.collapse { padding: 0; }
.control-panel.collapse summary { padding: 12px 13px; color: #b9ccd6; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.control-panel.collapse summary::-webkit-details-marker { display: none; }
.control-panel.collapse summary::after { content: "+"; color: var(--pmuted); font-size: 15px; font-weight: 700; }
.control-panel.collapse[open] summary::after { content: "−"; }
.control-panel.collapse > :not(summary) { margin-left: 13px; margin-right: 13px; }
.control-panel.collapse > :not(summary):last-child { margin-bottom: 13px; }
/* Fields */
.form-grid label { color: var(--pmuted); font-size: 9px; font-weight: 740; display: grid; gap: 4px; }
.form-grid input:not([type=checkbox]):not([type=range]), .form-grid select, .manual-set input { background: var(--inputbg); border-color: var(--inputline); color: var(--ptext); }
.form-grid input[type=color] { background: var(--inputbg); border-color: var(--inputline); }
.sub-head { margin: 14px 0 8px; color: #93aab6; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
/* Switches */
.switch-list { display: grid; gap: 6px; margin-top: 12px; }
.switch-item { background: var(--panel-2); border-color: var(--panel-line); color: #c4d3da; }
.switch-item input { accent-color: var(--accent2); }
/* Badges */
.badge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.badge-box { padding: 10px; border: 1px solid var(--panel-line); border-radius: 10px; background: var(--panel-2); display: grid; gap: 8px; }
.badge-box > strong { color: #cfdee4; font-size: 11px; }
.badge-box .mini-row { display: flex; gap: 8px; align-items: flex-end; }
.badge-box .mini-row label { color: var(--pmuted); font-size: 9px; display: grid; gap: 4px; }
.badge-box .mini-row input[type=color] { height: 32px; width: 100%; padding: 3px; border: 1px solid var(--inputline); border-radius: 8px; background: var(--inputbg); }
.upload-control { position: relative; color: var(--pmuted); font-size: 9px; font-weight: 740; display: grid; gap: 4px; cursor: pointer; }
.upload-control input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-control .mini-button { justify-self: start; }
.upload-control input[type=file]:focus-visible + .mini-button { outline: 2px solid currentColor; outline-offset: 2px; }
/* Layout */
.range-control { display: grid; gap: 4px; color: var(--pmuted); font-size: 9px; font-weight: 740; }
.range-control input { accent-color: #3b82f6; }
/* Score rows (kept from controlRows) */
.team-control-row { border-bottom-color: var(--panel-line); }
.control-team-label { color: #c6d4da; border-bottom-color: var(--inputline); }
.team-edit-fields label { color: var(--pmuted); }
.team-edit-fields input { background: var(--inputbg); border-color: var(--inputline); color: var(--ptext); }
.score-adjust { background: var(--panel-2); border-color: var(--inputline); color: #d6e4e9; }
.score-adjust:hover { background: #18242f; border-color: #2a3a46; }
.score-adjust.plus { background: rgba(52,211,153,.13); border-color: rgba(52,211,153,.5); color: var(--accent); }
.stat-step { background: var(--panel-2); color: #8ba0ab; }
.tiny-adjust { color: #9db1ba; }
.tiny-adjust:hover { background: #18242f; }
/* Actions */
.panel-actions { display: flex; gap: 8px; padding-top: 2px; }
.text-button.danger { color: #d98f85; }
.text-button:hover { color: #eef2f4; }
.hint-text { color: #6f8490; font-size: 9px; line-height: 1.5; margin-top: 6px; }
/* Footer / guide */
.page-footer, .footer-note { color: #718690; }
.page-footer p > span { color: #53666e; }
.page-footer kbd { background: var(--inputbg); border-color: var(--inputline); color: #c6d4da; }
.guide-panel summary { color: #8fa5af; }
.guide-panel summary:hover { background: #121c27; }
.guide-grid { background: var(--panel); border-color: var(--panel-line); }
.guide-grid h2 { color: #c4d4db; }
.guide-grid p { color: #7d929d; }
/* 展示页隐藏顶部导航 */
.display-mode .topbar { display: none; }
/* 运动预设下拉（右侧面板首项） */
.sport-panel select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--inputline); border-radius: 9px; background: var(--inputbg); color: var(--ptext); font-size: 12px; font-weight: 600; }
/* 预览条（仅左侧预览列上方，右侧控制面板从顶部开始） */
.scoreboard { grid-template-rows: auto minmax(0, 1fr); }
.preview-bar { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 3px 8px; color: var(--pmuted); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.score-display { grid-column: 1; grid-row: 2; }
.board-controls { grid-column: 2; grid-row: 1 / 3; }
.preview-bar .pv-right { display: inline-flex; align-items: center; gap: 6px; }
.preview-bar .pv-right i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(52,211,153,.16); }
/* Score control：两队一行两列并排、紧凑、去英文标签 */
.team-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.team-control-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 0; border: 0; justify-items: center; text-align: center; }
.team-name-field { display: grid; gap: 3px; width: 100%; justify-items: center; color: var(--pmuted); font-size: 11px; font-weight: 740; text-align: center; }
.team-name-field input { width: 100%; max-width: 150px; height: 30px; padding: 0 8px; border: 1px solid var(--inputline); border-radius: 8px; background: var(--inputbg); color: var(--ptext); font-size: 11px; text-align: center; }
.score-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; }
.score-action .score-adjust { min-height: 30px; height: 30px; }
/* 键盘快捷键提示（记分板下方） */
.board-hint { margin: 0; padding: 12px 2px 0; text-align: center; color: #718690; font-size: 10px; line-height: 1.8; }
.board-hint kbd { display: inline-block; padding: 1px 5px; border: 1px solid var(--inputline); border-radius: 4px; color: #c6d4da; background: var(--inputbg); font-family: inherit; font-size: 9px; font-weight: 760; }
.board-hint span { padding: 0 6px; color: #53666e; }
.display-mode .board-hint { display: none; }
/* 控制页预览大屏：与全屏大屏布局一致（等比缩放、不压缩内容，仅加高容纳完整内容） */
@media (max-width: 760px) {
  .scoreboard:not(.display-only) .score-display { aspect-ratio: 16 / 9; }
}
/* 大屏布局（参考图）：三栏 左队 | 中间比分+计时 | 右队 */
.score-display { grid-template-rows: auto minmax(0, 1fr) auto; }
.team-list { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: clamp(6px, 1.5vw, 22px); }
.team-block { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(5px, 1vh, 14px); text-align: center; padding: 6px 8px; }
.team-block .team-brand { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 1vw, 14px); }
.score-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(3px, .6vh, 10px); min-width: 0; padding: 0 clamp(8px, 1.5vw, 22px); border-left: 1px solid #ffffff1c; border-right: 1px solid #ffffff1c; }
.center-stage { font-size: clamp(8px, .8vw, 14px); letter-spacing: .14em; color: #9ab4cc; text-transform: uppercase; }
.score-pair { display: flex; align-items: center; gap: clamp(5px, 1.2vw, 16px); }
.score-pair .sc { color: #eaf3f8; font-size: clamp(64px, 10vw, 190px); font-weight: 900; line-height: .9; font-variant-numeric: tabular-nums; text-shadow: 0 6px 24px #0005; }
.score-pair .sc-div { color: #7f97ab; font-size: clamp(38px, 5.5vw, 104px); font-weight: 700; line-height: .9; opacity: .9; }
.center-period { font-size: clamp(9px, 1vw, 16px); letter-spacing: .16em; color: #cfdae3; text-transform: uppercase; }
.center-clock { font-size: clamp(34px, 5vw, 88px); font-weight: 800; line-height: 1; color: #e8f1f7; font-variant-numeric: tabular-nums; text-shadow: 0 4px 20px #0005; }
.center-shot { font-size: clamp(8px, .8vw, 13px); letter-spacing: .12em; color: #9ab4cc; }
.center-shot b { color: #ffd9a0; }
.clock-stoppage { color: #ffd9a0; font-size: clamp(11px,1vw,17px); font-weight: 800; }
/* 全屏大屏放大 */
.display-mode .team-list { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.display-mode .score-pair .sc { font-size: clamp(110px, 16vw, 320px); }
.display-mode .center-clock { font-size: clamp(60px, 8vw, 160px); }
.display-mode .score-center { gap: clamp(4px, 1.2vh, 16px); }
.display-mode .team-block { gap: clamp(6px, 1.6vh, 20px); }
.display-mode .team-display-name { font-size: clamp(30px, 4.4vw, 88px); }
.app-shell:fullscreen .score-display { grid-template-rows: auto minmax(0, 1fr) auto; }
.app-shell:fullscreen .score-pair .sc { font-size: clamp(120px, 18vw, 360px); }
.app-shell:fullscreen .center-clock { font-size: clamp(70px, 10vw, 200px); }
/* 队徽+队名一列竖排，队名过长自动换行居中，不出屏 */
.team-block .team-brand { flex-direction: column; gap: clamp(5px, 1vh, 12px); }
.team-block .team-display-name { max-width: 100%; overflow-wrap: anywhere; line-height: 1.15; }
/* 布局微调滑块：数值显示 */
.range-control { display: flex; align-items: center; gap: 8px; }
.range-control input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer; }
.range-control .range-val { min-width: 36px; text-align: center; font-size: 11px; font-weight: 700; color: #9fd8c0; background: #0d1721; border: 1px solid var(--inputline); border-radius: 5px; padding: 2px 5px; font-variant-numeric: tabular-nums; }
/* F 全屏：大屏撑满视口、无滚动条、底部可见（三栏布局） */
.app-shell:fullscreen { overflow: hidden; padding: 0; }
.app-shell:fullscreen .boards-area { min-height: 100vh; grid-template-columns: 1fr; align-content: stretch; }
.app-shell:fullscreen .scoreboard { height: 100vh; margin: 0; }
.app-shell:fullscreen .score-display { height: 100vh; min-height: 0; max-height: none; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-content: initial; align-content: initial; }
.app-shell:fullscreen .team-list { min-height: 0; }
.app-shell:fullscreen .team-block { gap: clamp(6px, 1.6vh, 18px); }
.app-shell:fullscreen .team-display-name { font-size: clamp(24px, min(4vw, 5vh), 68px); }
.app-shell:fullscreen .team-subtitle { font-size: clamp(11px, min(1.4vw, 2vh), 18px); }
.app-shell:fullscreen .team-english { font-size: clamp(11px, min(1.3vw, 1.8vh), 17px); }
.app-shell:fullscreen .score-pair .sc { font-size: clamp(90px, min(22vw, 24vh), 400px); }
.app-shell:fullscreen .sc-div { font-size: clamp(50px, min(12vw, 13vh), 220px); }
.app-shell:fullscreen .center-stage { font-size: clamp(12px, min(1.5vw, 2.2vh), 20px); }
.app-shell:fullscreen .center-period { font-size: clamp(13px, min(1.7vw, 2.4vh), 22px); }
.app-shell:fullscreen .center-clock { font-size: clamp(50px, min(11vw, 12vh), 190px); }
.app-shell:fullscreen .stat { min-width: clamp(46px, 5vw, 96px); padding: clamp(6px, 1.1vh, 14px) clamp(6px, .9vw, 14px); }
.app-shell:fullscreen .stat strong { font-size: clamp(16px, min(2.4vw, 3vh), 40px); }
.app-shell:fullscreen .stat span { font-size: clamp(9px, min(1vw, 1.4vh), 14px); }
.app-shell:fullscreen .display-foot { min-height: clamp(36px, 6vh, 60px); padding: clamp(8px, 1.6vh, 14px) clamp(20px, 4vw, 60px); font-size: clamp(11px, min(1.4vw, 2vh), 16px); }
/* 操作说明：放到预览列（左列）正下方，与记分板一列，间距 20px */
.board-preview-col { grid-column: 1; grid-row: 1 / -1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.board-preview-col .score-display { grid-column: auto; grid-row: auto; }
.scoreboard:not(.display-only) .board-preview-col .score-display { max-height: min(52vh, calc(100vh - 140px)); }
.board-preview-col .board-hint { margin-top: 20px; }
.board-controls { grid-column: 2; grid-row: 1 / -1; }
.display-only .board-preview-col { display: contents; }

/* Scoreboard layouts selectable above the live preview. */
.preview-style-picker { display: inline-flex; align-items: center; gap: 7px; color: #91a5af; font-size: 9px; font-weight: 750; letter-spacing: .08em; white-space: nowrap; }
.preview-style-picker select { height: 28px; max-width: 170px; padding: 0 24px 0 8px; border: 1px solid var(--inputline); border-radius: 7px; color: #d5e2e8; background: var(--inputbg); font-size: 10px; font-weight: 650; letter-spacing: 0; }
.team-row-score { display: none; color: #f4faf6; font-variant-numeric: tabular-nums; font-size: clamp(38px, 6vw, 96px); font-weight: 900; line-height: 1; }

/* Style 2: each team gets its own scoreboard row, with the clock between them. */
.score-display.style-stacked .team-list { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0,1fr) auto minmax(0,1fr); gap: 0; }
.score-display.style-stacked .team-block { min-height: 0; flex-direction: row; justify-content: space-between; padding: 8px clamp(18px,4vw,64px); text-align: left; }
.score-display.style-stacked .team-block[data-team-index="0"] { grid-row: 1; }
.score-display.style-stacked .score-center { grid-row: 2; flex-direction: row; gap: clamp(14px,3vw,42px); padding: 8px 14px; border: 0; border-top: 1px solid #ffffff24; border-bottom: 1px solid #ffffff24; }
.score-display.style-stacked .team-block[data-team-index="1"] { grid-row: 3; }
.score-display.style-stacked .team-block .team-brand { flex-direction: row; justify-content: flex-start; }
.score-display.style-stacked .team-row-score { display: block; }
.score-display.style-stacked .score-pair { display: none; }
.score-display.style-stacked .center-clock { font-size: clamp(30px,5vw,76px); }

/* Style 3: compact, high-contrast broadcast scorebug. */
.score-display.style-scorebug { border-radius: 8px; border-top: 5px solid var(--accent); background-color: #07111c; }
.score-display.style-scorebug .event-header { padding-top: clamp(10px,2vh,22px); padding-bottom: 0; }
.score-display.style-scorebug .team-list { padding: 8px clamp(18px,4vw,62px); }
.score-display.style-scorebug .team-block { gap: 8px; }
.score-display.style-scorebug .team-block .team-brand { flex-direction: row; }
.score-display.style-scorebug .team-mark,.score-display.style-scorebug .team-photo { width: clamp(30px,4vw,58px); height: clamp(30px,4vw,58px); border-radius: 8px; }
.score-display.style-scorebug .team-display-name { font-size: clamp(16px,2vw,30px); }
.score-display.style-scorebug .score-center { min-width: 32%; padding: 0 clamp(12px,2vw,30px); border-color: #ffffff30; }
.score-display.style-scorebug .score-pair .sc { font-size: clamp(56px,8vw,128px); }
.score-display.style-scorebug .center-clock { font-size: clamp(28px,4vw,62px); }
.score-display.style-scorebug .team-row-score { display: none; }

/* Style 4: home and away color panels around a neutral score panel. */
.score-display.style-team-panels { background-image: linear-gradient(90deg,color-mix(in srgb,var(--team-home),#07111d 72%) 0%,#07111d 49.5%,#07111d 50.5%,color-mix(in srgb,var(--team-away),#07111d 72%) 100%); }
.score-display.style-team-panels .team-block { margin: clamp(8px,1.6vw,24px); border: 1px solid color-mix(in srgb,var(--team-accent),transparent 65%); border-radius: 16px; background: color-mix(in srgb,var(--team-accent),#07111d 86%); box-shadow: 0 14px 40px #0004; }
.score-display.style-team-panels .score-center { padding: 0 clamp(16px,2.5vw,38px); border: 1px solid #ffffff30; border-radius: 16px; background: #081421e8; box-shadow: 0 12px 32px #0005; }
.score-display.style-team-panels .team-mark,.score-display.style-team-panels .team-photo { width: clamp(48px,7vw,108px); height: clamp(48px,7vw,108px); }
.score-display.style-team-panels .team-row-score { display: none; }

/* Style 5: arena board with a strong header and a bright central score. */
.score-display.style-arena { background-image: radial-gradient(ellipse at 50% 48%,#183149 0%,#091827 58%,#06111d 100%); }
.score-display.style-arena .event-header { align-items: flex-start; padding-left: clamp(20px,4vw,60px); text-align: left; }
.score-display.style-arena .event-kicker { color: var(--accent); }
.score-display.style-arena .score-center { padding: 0 clamp(14px,2.6vw,40px); border: 0; }
.score-display.style-arena .score-pair { padding: clamp(10px,2vh,24px) clamp(18px,3vw,48px); border: 1px solid #ffffff35; border-radius: 18px; background: #030b14b8; box-shadow: 0 18px 50px #0006; }
.score-display.style-arena .score-pair .sc { font-size: clamp(72px,11vw,190px); }
.score-display.style-arena .team-mark,.score-display.style-arena .team-photo { width: clamp(54px,8vw,120px); height: clamp(54px,8vw,120px); border-radius: 20px; }
.score-display.style-arena .team-row-score { display: none; }

@media (max-width: 760px) {
  .preview-style-picker span { display: none; }
  .preview-style-picker select { max-width: 135px; }
}

/* Keep brand, locale and display action in distinct header tracks. */
@media (min-width: 861px) {
  .topbar { grid-template-columns: auto auto minmax(220px, 1fr) auto; gap: 14px; }
  .topbar-actions { grid-column: 4; }
}
@media (max-width: 860px) {
  .topbar { grid-template-columns: auto auto minmax(0, 1fr); }
  .topbar-title { position: static; transform: none; grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: 100%; justify-content: center; }
  .brand { grid-column: 1; }
  .language-picker { grid-column: 2; justify-self: start; }
  .topbar-actions { grid-column: 3; grid-row: 1; }
}
@media (max-width: 560px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  .language-picker { grid-column: 2; grid-row: 1; }
  .topbar-title { grid-column: 1 / -1; grid-row: 2; }
  .topbar-title { justify-content: center; }
  .topbar-actions { grid-column: 1 / -1; grid-row: 3; justify-content: flex-end; }
}

/* ===== Theme / color / font driven big screen (scorecounter-inspired) ===== */
.score-display { background-color: var(--sb-bg, #061238); border-color: var(--sb-border, #253e55); }
.score-display .event-title, .score-display .team-display-name { color: var(--sb-text, #fff); }
.score-display .score-pair .sc { color: var(--sb-text, #eaf3f8); }
.score-display .team-row-score { color: var(--sb-text, #f4faf6); }
.score-display .center-clock { color: var(--sb-timer, #e8f1f7); }
.score-display .center-stage, .score-display .center-period, .score-display .event-kicker, .score-display .event-subtitle { color: color-mix(in srgb, var(--sb-text, #eaf3f8) 78%, transparent); }
.score-display .display-foot { background: color-mix(in srgb, var(--sb-panel, #06132c) 92%, transparent); color: color-mix(in srgb, var(--sb-text, #eaf3f8) 64%, transparent); }
.score-display .score-center { border-color: color-mix(in srgb, var(--sb-text, #fff) 12%, transparent); }
.score-display.font-mono { font-family: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; }
.score-display.font-tech { font-family: "DIN Alternate", Eurostile, "Bahnschrift", ui-sans-serif, system-ui, sans-serif; letter-spacing: -.01em; }
.score-display.font-display { font-family: "Arial Black", "Helvetica Neue", Impact, ui-sans-serif, sans-serif; }

/* Field visibility list with eye toggles */
.field-toggle-list { display: grid; gap: 4px; margin-top: 8px; }
.field-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 4px 9px; border: 1px solid var(--panel-line); border-radius: 8px; background: var(--panel-2); color: #c4d3da; font-size: 10px; font-weight: 700; }
.field-toggle.on { color: #dbe9ee; }
.field-toggle.off { color: #6f8590; }
.eye-toggle { width: 30px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
.eye-toggle:hover { background: #18242f; }
.eye-toggle svg { width: 17px; height: 17px; display: block; }
.field-toggle.on .eye-toggle { color: var(--accent); }
.field-toggle.off .eye-toggle { color: #61727c; }

/* Theme swatches */
.theme-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.theme-swatch { display: grid; gap: 4px; justify-items: center; padding: 5px 4px; border: 1px solid var(--panel-line); border-radius: 9px; background: var(--panel-2); color: #9db1ba; font-size: 8px; font-weight: 700; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.theme-swatch:hover { border-color: #2a3a46; }
.theme-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; color: #eafaf2; }
.theme-swatch b { font-weight: 800; letter-spacing: .03em; }
.sw-thumb { width: 100%; height: 26px; display: flex; align-items: center; justify-content: center; gap: 3px; border-radius: 5px; }
.sw-thumb i { width: 7px; height: 7px; border-radius: 2px; }

/* Color pickers row */
.color-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.color-row label { display: grid; gap: 4px; color: var(--pmuted); font-size: 9px; font-weight: 740; }
.color-row input[type=color] { width: 100%; height: 30px; padding: 2px; border: 1px solid var(--inputline); border-radius: 7px; background: var(--inputbg); cursor: pointer; }

/* Keep big scores and long team names inside the 16:9 board */
.score-display .team-identity { min-width: 0; max-width: 100%; overflow: hidden; }
.score-display .team-display-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: block; }
.score-display.wide-score .score-pair .sc { font-size: clamp(56px, 8vw, 150px); }
.display-mode .score-display.wide-score .score-pair .sc { font-size: clamp(80px, 11vw, 190px); }

/* hidden attribute must win over display:flex rules (Scores / Date / Venue toggles) */
[hidden] { display: none !important; }

/* Compact eye toggles placed right after each field label */
.field-cell .field-head, .stage-label.field-head, .sub-head.with-eye, .team-name-field .field-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.team-name-field { display: grid; gap: 4px; }
.inline-eye { width: 22px; height: 18px; flex: none; border-radius: 4px; }
.inline-eye svg { width: 14px; height: 14px; }
.inline-eye[aria-pressed="true"] { color: var(--accent); }
.inline-eye[aria-pressed="false"] { color: #61727c; }
.panel-head .panel-head-eyes { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.panel-head-eyes .inline-eye { width: 24px; height: 20px; }

/* Form fields: label on top, eye toggle sits right after the input */
.field-cell { display: grid; gap: 4px; }
.field-input-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.field-input-row input:not([type=checkbox]):not([type=file]) { width: auto; flex: 1 1 auto; min-width: 0; }
.field-cell .field-label { display: block; }

/* Read-only team name inside Score control */
.team-name-view { display: grid; gap: 2px; justify-items: center; text-align: center; }
.team-name-label { color: var(--pmuted); font-size: 9px; font-weight: 740; letter-spacing: .04em; text-transform: uppercase; }
.team-name-view strong { color: var(--ptext); font-size: 13px; font-weight: 800; line-height: 1.25; word-break: break-word; }

/* Placeholder badge mark: no background, no border, no letters */
.team-mark { background: none; border: 0; color: transparent; box-shadow: none; }
.team-mark:empty { display: none; }

/* ===== Visual pickers: scoreboard style thumbnails + font samples ===== */
.style-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.style-swatch { display: grid; gap: 6px; padding: 7px 7px 8px; border: 1px solid #24384c; border-radius: 10px; background: #0b1725; color: inherit; cursor: pointer; text-align: center; font: inherit; }
.style-swatch:hover { border-color: #3a5a78; }
.style-swatch.is-active { border-color: var(--accent, #9be564); box-shadow: 0 0 0 1px var(--accent, #9be564) inset; background: #102335; }
.style-thumb { position: relative; display: block; height: 40px; border-radius: 6px; background: #08111d; border: 1px solid #ffffff12; overflow: hidden; }
.style-thumb i { position: absolute; display: block; border-radius: 2px; background: color-mix(in srgb, var(--accent, #9be564) 52%, #0b1725); }
.style-thumb .t2 { background: #e6f1ff; }
.style-thumb .t0 { background: color-mix(in srgb, var(--accent, #9be564) 82%, #0b1725); }
.style-thumb[data-thumb="matchup"] .t1 { left: 5%; top: 24%; width: 26%; height: 52%; }
.style-thumb[data-thumb="matchup"] .t2 { left: 40%; top: 22%; width: 20%; height: 56%; }
.style-thumb[data-thumb="matchup"] .t3 { left: 69%; top: 24%; width: 26%; height: 52%; }
.style-thumb[data-thumb="stacked"] .t1 { left: 8%; top: 8%; width: 84%; height: 24%; }
.style-thumb[data-thumb="stacked"] .t2 { left: 32%; top: 38%; width: 36%; height: 24%; }
.style-thumb[data-thumb="stacked"] .t3 { left: 8%; top: 68%; width: 84%; height: 24%; }
.style-thumb[data-thumb="scorebug"] .t0 { left: 4%; top: 6%; width: 92%; height: 12%; }
.style-thumb[data-thumb="scorebug"] .t1 { left: 6%; top: 40%; width: 24%; height: 44%; }
.style-thumb[data-thumb="scorebug"] .t2 { left: 40%; top: 32%; width: 20%; height: 58%; }
.style-thumb[data-thumb="scorebug"] .t3 { left: 70%; top: 40%; width: 24%; height: 44%; }
.style-thumb[data-thumb="team-panels"] .t1 { left: 5%; top: 16%; width: 25%; height: 66%; }
.style-thumb[data-thumb="team-panels"] .t2 { left: 37%; top: 10%; width: 26%; height: 78%; }
.style-thumb[data-thumb="team-panels"] .t3 { left: 70%; top: 16%; width: 25%; height: 66%; }
.style-thumb[data-thumb="arena"] .t1 { left: 6%; top: 40%; width: 14%; height: 24%; }
.style-thumb[data-thumb="arena"] .t2 { left: 26%; top: 16%; width: 48%; height: 66%; }
.style-thumb[data-thumb="arena"] .t3 { left: 80%; top: 40%; width: 14%; height: 24%; }
.style-thumb[data-thumb="duel"] .t1 { left: 6%; top: 18%; width: 44%; height: 62%; }
.style-thumb[data-thumb="duel"] .t2 { left: 50%; top: 21%; width: 42%; height: 24%; }
.style-thumb[data-thumb="duel"] .t3 { left: 50%; top: 54%; width: 42%; height: 24%; }
.style-thumb[data-thumb="hub"] .t1 { left: 24%; top: 8%; width: 52%; height: 22%; }
.style-thumb[data-thumb="hub"] .t2 { left: 6%; top: 40%; width: 40%; height: 46%; }
.style-thumb[data-thumb="hub"] .t3 { left: 54%; top: 40%; width: 40%; height: 46%; }
.sw-label { color: #b3c8db; font-size: 10px; font-weight: 700; line-height: 1.2; }

.font-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.font-swatch { display: grid; gap: 4px; padding: 9px 6px 7px; border: 1px solid #24384c; border-radius: 10px; background: #0b1725; color: #eaf2ff; cursor: pointer; text-align: center; font: inherit; }
.font-swatch:hover { border-color: #3a5a78; }
.font-swatch.is-active { border-color: var(--accent, #9be564); box-shadow: 0 0 0 1px var(--accent, #9be564) inset; background: #102335; }
.fw-sample { display: block; color: #f2f8ff; font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: .01em; }

/* ===== Layout safety: long names wrap, text never covered ===== */
.score-display .team-block { min-width: 0; }
.score-display .team-identity { min-width: 0; }
.score-display .team-display-name { max-width: 100%; overflow-wrap: anywhere; line-height: 1.12; }
.score-display .team-list { min-width: 0; }
.score-display .score-center { min-width: 0; }

/* stacked: readable rows, clock band separated */
.score-display.style-stacked .team-block { align-items: center; gap: clamp(8px,1.4vw,22px); }
.score-display.style-stacked .team-block .team-brand { flex: 0 1 auto; min-width: 0; }
.score-display.style-stacked .team-row-score { font-size: clamp(40px,6vw,104px); line-height: 1; }
.score-display.style-stacked .team-stats { flex: 0 0 auto; }
.score-display.style-stacked .center-stage { display: none; }

/* team panels: keep names inside their panel */
.score-display.style-team-panels .team-display-name { font-size: clamp(13px,1.5vw,24px); }
.score-display.style-team-panels .score-center { flex: 0 0 auto; max-width: 42%; }
.score-display.style-team-panels .team-block { overflow: hidden; }

/* arena: shrink score card so long names never collide */
.score-display.style-arena .score-center { max-width: 44%; padding: 0 clamp(8px,1.4vw,18px); }
.score-display.style-arena .score-pair { padding: clamp(6px,1.4vh,16px) clamp(10px,1.8vw,26px); }
.score-display.style-arena .score-pair .sc { font-size: clamp(48px,8vw,150px); }
.score-display.style-arena.wide-score .score-pair .sc { font-size: clamp(40px,6.4vw,116px); }
.score-display.style-arena .team-block { padding: 8px clamp(8px,1.4vw,20px); }

/* duel: one team per half, score on the right, clock band in the middle */
.score-display.style-duel .team-list { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto minmax(0,1fr); }
.score-display.style-duel .team-block { flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(10px,2vw,28px); padding: 10px clamp(16px,3vw,52px); text-align: left; }
.score-display.style-duel .team-block[data-team-index="0"] { grid-row: 1; }
.score-display.style-duel .team-block[data-team-index="1"] { grid-row: 3; }
.score-display.style-duel .score-center { grid-row: 2; flex-direction: row; gap: clamp(12px,2.4vw,34px); padding: 6px 16px; border: 0; border-top: 1px solid #ffffff26; border-bottom: 1px solid #ffffff26; }
.score-display.style-duel .score-pair { display: none; }
.score-display.style-duel .team-block .team-brand { flex-direction: row; justify-content: flex-start; }
.score-display.style-duel .team-row-score { display: block; font-size: clamp(46px,7vw,120px); }
.score-display.style-duel .center-clock { font-size: clamp(28px,4.4vw,72px); }

/* hub: clock band on top, two large scores side by side below */
.score-display.style-hub .team-list { grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: auto minmax(0,1fr); }
.score-display.style-hub .score-center { grid-column: 1 / -1; grid-row: 1; flex-direction: row; align-items: center; justify-content: center; gap: clamp(10px,2vw,28px); padding: 6px 16px 8px; border: 0; border-bottom: 1px solid #ffffff26; }
.score-display.style-hub .score-pair { display: none; }
.score-display.style-hub .team-block { grid-row: 2; padding: 8px 6px; }
.score-display.style-hub .team-block[data-team-index="1"] { border-left: 1px solid #ffffff1f; }
.score-display.style-hub .team-row-score { display: block; font-size: clamp(50px,8vw,140px); }
.score-display.style-hub .center-clock { font-size: clamp(30px,4.6vw,74px); }

/* team panels: wider centre so the two-digit score never reaches the side panels */
.score-display.style-team-panels .score-center { min-width: 34%; max-width: 40%; padding: 0 clamp(8px,1.4vw,18px); }
.score-display.style-team-panels .score-pair .sc { font-size: clamp(34px,5vw,100px); }
.score-display.style-team-panels.wide-score .score-pair .sc { font-size: clamp(30px,4.2vw,84px); }
.score-display.style-team-panels .center-clock { font-size: clamp(20px,3vw,52px); }
.score-display.style-team-panels .team-block { overflow: visible; }
.score-display.style-team-panels .team-display-name { font-size: clamp(12px,1.4vw,22px); }

/* row layouts: keep two-digit scores from pushing the stats off screen */
.score-display.style-duel .team-row-score, .score-display.style-hub .team-row-score { flex: 0 0 auto; }
.score-display.style-duel .team-stats, .score-display.style-hub .team-stats { flex: 0 0 auto; }

/* team panels: explicit grid so the centre column is wide enough for two-digit scores */
.score-display.style-team-panels .team-list { grid-template-columns: minmax(0,1fr) minmax(200px,36%) minmax(0,1fr); }
.score-display.style-team-panels .score-center { min-width: 0; max-width: none; }
.score-display.style-team-panels .score-pair { flex-wrap: nowrap; }
.score-display.style-team-panels .score-pair .sc { font-size: clamp(28px,3.6vw,74px); }

/* ===== Big-screen safety: long names wrap inside their column, scores stay capped ===== */
.score-display .team-brand { min-width: 0; max-width: 100%; }
.score-display .team-identity { min-width: 0; max-width: 100%; }
.score-display .team-display-name { width: 100%; word-break: break-word; }
.display-mode .score-display .team-display-name { font-size: clamp(20px,2.6vw,54px); }
.display-mode .score-display.wide-score .score-pair .sc { font-size: clamp(56px,8.4vw,150px); }
.display-mode .score-display.style-arena .score-center { max-width: 42%; }
.display-mode .score-display.style-arena .score-pair .sc { font-size: clamp(44px,6vw,104px); }
.display-mode .score-display.style-arena .score-pair { padding: clamp(6px,1.2vh,14px) clamp(8px,1.4vw,20px); }
.display-mode .score-display.style-team-panels .score-pair .sc { font-size: clamp(34px,4.4vw,84px); }
.display-mode .score-display.style-team-panels .team-list { grid-template-columns: minmax(0,1fr) minmax(190px,34%) minmax(0,1fr); }
.display-mode .score-display.style-scorebug .score-pair .sc { font-size: clamp(52px,7.4vw,132px); }

/* team names: allow two full lines instead of a single truncated line */
.score-display .team-display-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; text-overflow: clip; overflow: hidden; }

/* thumbnails: duel and hub match their real layouts */
.style-thumb[data-thumb="duel"] .t1 { left: 8%; top: 8%; width: 84%; height: 30%; }
.style-thumb[data-thumb="duel"] .t2 { left: 30%; top: 40%; width: 40%; height: 20%; }
.style-thumb[data-thumb="duel"] .t3 { left: 8%; top: 64%; width: 84%; height: 30%; }
.style-thumb[data-thumb="hub"] .t1 { left: 26%; top: 8%; width: 48%; height: 20%; }
.style-thumb[data-thumb="hub"] .t2 { left: 8%; top: 36%; width: 40%; height: 56%; }
.style-thumb[data-thumb="hub"] .t3 { left: 52%; top: 36%; width: 40%; height: 56%; }

/* ===== per-field display tuning (gear popover) ===== */
.gear-toggle { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--inputline, #24323f); border-radius: 5px; background: transparent; color: #7b8f9c; cursor: pointer; transition: color .12s ease, border-color .12s ease, background .12s ease; }
.gear-toggle svg { width: 14px; height: 14px; }
.gear-toggle:hover { color: #dbe9f0; border-color: #3a4d5c; }
.gear-toggle.is-tuned { color: var(--accent, #3ad29f); border-color: rgba(58,210,159,.5); background: rgba(58,210,159,.08); }
.field-input-row { gap: 4px; }

.tune-pop { position: absolute; z-index: 60; width: 244px; padding: 10px 12px 12px; border: 1px solid var(--inputline, #24323f); border-radius: 10px; background: #0e1a22; box-shadow: 0 18px 40px #000a; display: grid; gap: 8px; color: #cfe0e6; font-size: 10px; }
.tune-pop .tp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tune-pop .tp-head strong { font-size: 11px; font-weight: 800; letter-spacing: .02em; color: #eaf3f8; }
.tune-pop .tp-close { width: 20px; height: 20px; border: 0; border-radius: 5px; background: transparent; color: #7b8f9c; font-size: 12px; line-height: 1; cursor: pointer; }
.tune-pop .tp-close:hover { color: #fff; background: #1a2831; }
.tune-pop .tp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--pmuted, #8fa3ad); font-weight: 740; }
.tune-pop .tp-row input[type=color] { width: 52px; height: 24px; padding: 0; border: 1px solid var(--inputline, #24323f); border-radius: 5px; background: transparent; }
.tune-pop .range-control { display: flex; align-items: center; gap: 8px; color: var(--pmuted, #8fa3ad); font-weight: 740; }
.tune-pop .range-control input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent, #3ad29f); }
.tune-pop .range-val { min-width: 34px; text-align: center; font-size: 10px; font-weight: 700; color: #9fd8c0; background: #0d1721; border: 1px solid var(--inputline, #24323f); border-radius: 5px; padding: 1px 4px; font-variant-numeric: tabular-nums; }
.tune-pop .tp-actions { display: flex; justify-content: flex-end; }
.tune-pop .mini-button { min-height: 26px; font-size: 9px; }

.score-readout { display: flex; align-items: center; justify-content: center; gap: 6px; }
.score-readout b { min-width: 38px; padding: 2px 8px; border-radius: 6px; background: #0d1721; border: 1px solid var(--inputline, #24323f); color: #eaf3f8; font-size: 16px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.clock-readout { display: flex; align-items: center; justify-content: center; gap: 8px; }
.clock-readout .big-clock { flex: 1 1 auto; }

.tune-kicker, .tune-subtitle, .tune-round, .tune-period, .tune-date, .tune-venue, .tune-clock, .tune-score, .team-row-score { display: inline-block; }

/* clock: keep the gear next to the time, not pinned to the panel edge */
.clock-readout { display: flex; justify-content: center; align-items: center; gap: 8px; }
.clock-readout .big-clock { flex: 0 1 auto; }

/* grouped tools in a panel sub-heading */
.head-tools { display: inline-flex; align-items: center; gap: 6px; }

/* ===== game log under the preview ===== */
.game-log { margin-top: 14px; border: 1px solid var(--panel-line, #22323c); border-radius: 10px; background: var(--panel-2, #0f1a21); padding: 10px 12px 12px; }
.game-log .gl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.game-log h3 { margin: 0; color: #93aab6; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.game-log .gl-clear { border: 0; background: transparent; color: #6f8b98; font-size: 9px; font-weight: 760; letter-spacing: .06em; cursor: pointer; }
.game-log .gl-clear:hover { color: #cfe0e6; }
.game-log .gl-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; max-height: 190px; overflow: auto; scrollbar-width: thin; }
.game-log .gl-list li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 10px; color: #cfe0e6; }
.game-log .gl-list li.gl-reset .gl-text { color: #ffd166; }
.game-log .gl-time { color: #7ee0b3; font-weight: 800; font-variant-numeric: tabular-nums; }
.game-log .gl-text { min-width: 0; overflow-wrap: anywhere; }
.game-log .gl-empty { margin: 8px 0 0; color: #6f8b98; font-size: 10px; }

/* matchup: give the team name block the full column so long names fit */
.score-display.style-matchup .team-block { width: 100%; flex: 1 1 0; min-width: 0; }
.score-display.style-matchup .team-block .team-brand { flex: 1 1 auto; min-width: 0; }
.score-display.style-matchup .team-block .team-identity { width: 100%; }
.score-display.style-matchup .team-block .team-display-name { -webkit-line-clamp: 3; }

/* matchup columns: wider team columns, narrower centre block */
.score-display.style-matchup .team-list { grid-template-columns: minmax(0, 1fr) minmax(180px, .8fr) minmax(0, 1fr); }
.score-display.style-matchup .team-block { width: auto; }

/* balance long team names across lines instead of leaving an orphan character */
.score-display .team-display-name { text-wrap: balance; }

/* ===== Free / Pro watermark ===== */
.display-watermark { position: absolute; right: 16px; bottom: 12px; z-index: 5; display: flex; align-items: baseline; gap: 7px; padding: 5px 9px; border-radius: 6px; background: rgba(4, 12, 22, .42); color: rgba(255, 255, 255, .62); font: 700 10px/1.15 var(--sb-font, "Inter", system-ui, sans-serif); letter-spacing: .1em; text-transform: uppercase; pointer-events: none; white-space: nowrap; }
.display-watermark b { font-weight: 800; color: rgba(255, 255, 255, .8); letter-spacing: .08em; }
.display-watermark span { color: rgba(255, 255, 255, .5); }
.display-mode .display-watermark { right: 2vw; bottom: 1.6vh; font-size: clamp(9px, .82vw, 14px); padding: .8vh .9vw; }

/* ===== License panel ===== */
.license-panel .panel-tag.on { color: var(--accent); }
.license-status { margin: 0; color: #c8d7de; font-size: 11px; line-height: 1.5; font-weight: 650; }
.license-status span { color: var(--pmuted); font-size: 10px; font-weight: 600; }
.license-buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; padding: 9px 10px; border: 1px solid var(--panel-line); border-radius: 9px; background: var(--panel-2); }
.license-buy span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.license-buy b { color: #dfeaf0; font-size: 11px; font-weight: 750; }
.license-buy i { color: var(--accent); font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: .04em; }
.license-buy .mini-button { text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; }
.mini-button.primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.mini-button.primary:hover { background: var(--accent); filter: brightness(1.06); }
.license-activate { display: flex; gap: 7px; margin-top: 9px; }
.license-activate input { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 9px; border: 1px solid var(--inputline); border-radius: 8px; background: var(--inputbg); color: #dce9ef; font: 600 10px/1 "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; }
.license-activate input::placeholder { color: #6c8390; }
.license-activate .mini-button { flex: 0 0 auto; }
.hint-text { margin: 8px 0 0; color: #71868f; font-size: 10px; line-height: 1.55; }

/* Watermark lives inside the footer bar so it can never cover the date / venue text */
.display-foot .display-watermark { position: static; right: auto; bottom: auto; z-index: auto; margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 8px; border-radius: 5px; background: rgba(4, 12, 22, .5); color: rgba(255, 255, 255, .6); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.display-foot .display-watermark b { color: rgba(255, 255, 255, .82); font-weight: 800; font-size: inherit; }
.display-foot .display-watermark em { color: rgba(255, 255, 255, .5); font-style: normal; font-size: inherit; }
.display-foot.has-watermark { justify-content: space-between; }
.display-mode .display-foot.has-watermark { flex-wrap: nowrap; }
.display-mode .display-foot .display-watermark { font-size: clamp(9px, .8vw, 15px); padding: .7vh .8vw; }