:root {
  --paper: #f8f5ef;
  --panel: #fffdfa;
  --line: #ded7ca;
  --text: #1f2730;
  --muted: #8d887e;
  --soft: #eee8dc;
  --blue: #2877ad;
  --red: #bd5651;
  --green: #3f6b55;
  --gold: #d5a93f;
  --shadow: 0 12px 40px rgba(33, 28, 19, 0.08);
  --font-mini: clamp(10px, 0.76vw, 12px);
  --font-caption: clamp(10px, 0.82vw, 13px);
  --font-meta: clamp(11px, 0.9vw, 14px);
  --font-body: clamp(12px, 1vw, 16px);
  --font-control: clamp(13px, 1.05vw, 16px);
  --font-subtitle: clamp(15px, 1.3vw, 20px);
  --font-ios-input: 16px;
  --radius-pill: 999px;
  --baseline-tight: -1px;
  --baseline-dot: -2px;
  --size-hair: 1px;
  --line-w: 1px;
  --hairline-w: 0.5px;
  --focus-outline-w: 2px;
  --dash-line-w: 1px;
  --size-dot-xs: 8px;
  --size-dot-sm: 9px;
  --size-icon-shield: 13px;
  --row-h-micro: 23px;
  --row-h-tight: 24px;
  --field-w-compact: 120px;
  --micro-pad-inline: clamp(1px, 0.4vw, 2px);
  --micro-pad-bottom: clamp(1px, 0.4vw, 2px);
  --bottom-nav-space-mobile: calc(clamp(64px, 7vw, 74px) + env(safe-area-inset-bottom));
  --bottom-nav-space-landscape: calc(clamp(68px, 5vw, 76px) + env(safe-area-inset-bottom));
  --bottom-nav-space: var(--bottom-nav-space-mobile);
  --page-max-mobile: 430px;
  --page-max-tablet: min(98vw, 930px);
  --page-max-landscape: min(96vw, 1200px);
  --page-max-desktop: min(94vw, 1400px);
  --page-max-wide: min(92vw, 1720px);
  --page-max: var(--page-max-mobile);
  --nav-max-wide: min(640px, 100%);
  --page-pad-x-mobile: clamp(12px, 3.7vw, 14px);
  --page-pad-x-tablet: clamp(12px, 1.8vw, 20px);
  --page-pad-x-landscape: clamp(14px, 1.6vw, 28px);
  --page-pad-x-desktop: clamp(18px, 1.6vw, 38px);
  --page-pad-x-wide: clamp(34px, 2vw, 54px);
  --page-pad-x: var(--page-pad-x-mobile);
  --page-pad-top-mobile: clamp(12px, 3.6vw, 14px);
  --page-pad-top-tablet: clamp(16px, 2.4vw, 24px);
  --page-pad-top-landscape: clamp(18px, 2vw, 28px);
  --page-pad-top: var(--page-pad-top-mobile);
  --panel-pad-mobile: clamp(9px, 2.6vw, 10px);
  --panel-pad-tablet: clamp(12px, 1.8vw, 18px);
  --panel-pad-landscape: clamp(18px, 1.3vw, 24px);
  --panel-pad: var(--panel-pad-mobile);
  --panel-gap-mobile: clamp(9px, 2.7vw, 10px);
  --panel-gap-tablet: clamp(12px, 1.8vw, 18px);
  --panel-gap-landscape: clamp(16px, 1.1vw, 20px);
  --panel-gap: var(--panel-gap-mobile);
  --panel-radius: clamp(7px, 1.4vw, 8px);
  --list-card-radius: clamp(8px, 1.6vw, 10px);
  --table-radius: var(--panel-radius);
  --topbar-gap-mobile: clamp(10px, 3vw, 12px);
  --topbar-gap-tablet: clamp(12px, 2vw, 18px);
  --topbar-gap-landscape: clamp(16px, 1vw, 20px);
  --topbar-gap: var(--topbar-gap-mobile);
  --topbar-margin-bottom-mobile: clamp(10px, 2.4vw, 12px);
  --topbar-margin-bottom-tablet: clamp(12px, 1.8vw, 18px);
  --topbar-margin-bottom-landscape: clamp(16px, 1.3vw, 18px);
  --topbar-margin-bottom: var(--topbar-margin-bottom-mobile);
  --brand-gap: clamp(2px, 0.7vw, 3px);
  --match-brand-gap: clamp(4px, 1.4vw, 6px);
  --brand-title-font-mobile: clamp(23px, 6.1vw, 27px);
  --brand-title-font-tablet: clamp(26px, 2.8vw, 34px);
  --brand-title-font-landscape: clamp(32px, 2.1vw, 36px);
  --brand-title-font: var(--brand-title-font-mobile);
  --brand-sub-font-mobile: var(--font-meta);
  --brand-sub-font-tablet: clamp(11px, 1.1vw, 13px);
  --brand-sub-font-landscape: clamp(12px, 0.8vw, 13px);
  --brand-sub-font: var(--brand-sub-font-mobile);
  --title-action-gap: clamp(6px, 1.4vw, 8px);
  --saga-action-size-mobile: clamp(22px, 5.6vw, 24px);
  --saga-action-size-tablet: clamp(24px, 2.4vw, 30px);
  --saga-action-size: var(--saga-action-size-mobile);
  --players-saga-action-size: clamp(38px, 10vw, 42px);
  --saga-action-radius: clamp(6px, 1.5vw, 7px);
  --saga-action-shift-y: clamp(0px, 0.25vw, 1px);
  --saga-focus-outline: clamp(2px, 0.5vw, 3px);
  --icon-button-size-mobile: clamp(38px, 8.8vw, 42px);
  --icon-button-size-tablet: clamp(42px, 4.6vw, 48px);
  --icon-button-size: var(--icon-button-size-mobile);
  --account-popover-top: calc(var(--icon-button-size) + clamp(3px, 0.9vw, 5px));
  --account-popover-pad: clamp(5px, 1.2vw, 6px);
  --account-popover-radius: clamp(14px, 2vw, 16px);
  --account-menu-gap: clamp(3px, 0.8vw, 4px);
  --account-menu-font: clamp(11px, 1vw, 12px);
  --nav-max-mobile: min(430px, 100%);
  --nav-max-landscape: clamp(560px, 52vw, 700px);
  --nav-max: var(--nav-max-mobile);
  --nav-pad-y-mobile: clamp(5px, 1vw, 8px);
  --nav-pad-y-landscape: clamp(6px, 0.7vw, 8px);
  --nav-pad-y: var(--nav-pad-y-mobile);
  --nav-pad-x: clamp(12px, 3vw, 24px);
  --nav-gap: clamp(3px, 1vw, 8px);
  --nav-button-h-mobile: clamp(38px, 4.8vw, 42px);
  --nav-button-h-landscape: clamp(40px, 3vw, 44px);
  --nav-button-h: var(--nav-button-h-mobile);
  --nav-plus-size: var(--nav-button-h);
  --nav-plus-long: clamp(16px, 2vw, 18px);
  --nav-plus-short: clamp(2.5px, 0.42vw, 3px);
  --nav-font-size: clamp(13px, 1.1vw, 15px);
  --nav-cols: repeat(5, minmax(0, 1fr));
  --nav-cols-member: repeat(4, minmax(0, 1fr));
  --overview-table-min: clamp(720px, 86vw, 1080px);
  --overview-player-table-min: clamp(530px, 78vw, 920px);
  --overview-sticky-col: clamp(82px, 10vw, 132px);
  --overview-num-col: clamp(42px, 5vw, 62px);
  --overview-name-col: clamp(92px, 12vw, 160px);
  --overview-small-col: clamp(56px, 6.5vw, 82px);
  --overview-a3-col: clamp(54px, 6.2vw, 82px);
  --overview-rebellion-col: clamp(54px, 6.2vw, 82px);
  --overview-player-col: clamp(56px, 7vw, 88px);
  --overview-player-cell-min-pad-x: clamp(2px, 0.4vw, 3px);
  --overview-player-cell-pad-trim: clamp(1px, 0.4vw, 2px);
  --overview-row-h: clamp(24px, 2.9vw, 38px);
  --overview-cell-pad-x: clamp(3px, 0.75vw, 8px);
  --overview-body-font: clamp(11px, 0.92vw, 14px);
  --overview-head-font: clamp(12px, 0.98vw, 14px);
  --overview-first-font: clamp(12px, 1.05vw, 15px);
  --overview-note-margin-top: clamp(2px, 0.8vw, 3px);
  --overview-note-margin-bottom: 0;
  --overview-note-font: var(--font-mini);
  --overview-note-line: 1.12;
  --overview-table-margin-top: clamp(7px, 1.8vw, 8px);
  --overview-table-radius: clamp(7px, 1.6vw, 8px);
  --overview-player-head-font: clamp(10px, 1vw, 11px);
  --overview-panel-pad: var(--panel-pad);
  --overview-panel-radius: var(--panel-radius);
  --overview-panel-space: var(--panel-gap);
  --overview-title-font: var(--panel-title-font);
  --overview-head-margin: var(--panel-head-margin);
  --overview-tabs-gap: var(--tabs-gap);
  --overview-tab-h: var(--tab-h);
  --overview-tab-weight: 760;
  --overview-total-tab-cols: repeat(6, minmax(0, 1fr));
  --overview-stage-tab-cols: repeat(3, minmax(0, 1fr));
  --overview-record-tab-cols: repeat(7, minmax(0, 1fr));
  --match-row-date-col: clamp(86px, 18vw, 96px);
  --match-row-gap: clamp(7px, 1.6vw, 10px);
  --match-row-pad-y: clamp(8px, 1.7vw, 10px);
  --match-row-pad-x: clamp(9px, 2.1vw, 12px);
  --match-row-date-font: clamp(13px, 3.5vw, 15px);
  --match-row-sub-font: clamp(11px, 2.8vw, 12px);
  --match-live-felt-min: clamp(320px, 36vw, 420px);
  --pill-h: clamp(24px, 4.8vw, 28px);
  --pill-pad-x: clamp(8px, 1.8vw, 10px);
  --pill-font: clamp(11px, 2.7vw, 12px);
  --panel-head-gap: clamp(8px, 2vw, 12px);
  --panel-head-margin: clamp(9px, 2.2vw, 12px);
  --panel-title-font: clamp(18px, 4.8vw, 20px);
  --panel-subtitle-font: clamp(15px, 3.8vw, 17px);
  --tabs-gap: clamp(5px, 1.2vw, 6px);
  --tabs-pad-bottom: clamp(3px, 1vw, 4px);
  --tab-h: clamp(30px, 7.8vw, 34px);
  --tab-min-w: clamp(44px, 11vw, 50px);
  --tab-pad-x: clamp(8px, 2.4vw, 10px);
  --tab-font: clamp(11px, 2.9vw, 12px);
  --overview-tab-font: clamp(11px, 2.9vw, 12px);
  --overview-tab-pad-x: clamp(3px, 0.9vw, 4px);
  --rank-expand-size: clamp(27px, 7vw, 30px);
  --rank-expand-font: clamp(12px, 3.5vw, 14px);
  --match-top-action-gap: clamp(6px, 1.5vw, 8px);
  --sync-state-size: clamp(22px, 5.8vw, 24px);
  --sync-state-icon: clamp(18px, 4.9vw, 20px);
  --page-back-size: var(--icon-button-size);
  --page-back-icon: clamp(17px, 2.8vw, 18px);
  --rank-list-gap: clamp(7px, 0.9vw, 9px);
  --rank-no-col: clamp(24px, 3.5vw, 36px);
  --rank-row-min-h: clamp(42px, 5vw, 64px);
  --rank-row-gap: clamp(7px, 1.2vw, 12px);
  --rank-row-pad-y: clamp(6px, 1vw, 10px);
  --rank-row-pad-x: clamp(10px, 1.55vw, 18px);
  --rank-list-margin-top: clamp(8px, 1.5vw, 10px);
  --rank-no-font: clamp(16px, 1.6vw, 18px);
  --rank-unranked-font: clamp(15px, 1.4vw, 16px);
  --rank-name-font: clamp(15px, 1.8vw, 18px);
  --rank-meta-font: clamp(10px, 1.1vw, 12px);
  --rank-value-font: clamp(16px, 2vw, 22px);
  --rank-value-gap: clamp(4px, 0.8vw, 5px);
  --rank-trophy-size: clamp(18px, 1.6vw, 20px);
  --rank-avatar-size: clamp(22px, 5.6vw, 24px);
  --rank-avatar-radius: clamp(6px, 1.6vw, 7px);
  --rank-avatar-font: clamp(13px, 3.7vw, 15px);
  --detail-hand-sticky-col: clamp(34px, 3.5vw, 42px);
  --detail-hand-score-col: clamp(74px, 8vw, 104px);
  --detail-hand-icon-col: clamp(28px, 3.2vw, 40px);
  --detail-hand-result-col: clamp(40px, 4vw, 52px);
  --detail-hand-rank-col: clamp(52px, 5.6vw, 76px);
  --detail-hand-tribute-col: clamp(96px, 11vw, 140px);
  --detail-hand-table-min: calc(var(--detail-hand-sticky-col) + var(--detail-hand-score-col) + var(--detail-hand-icon-col) + var(--detail-hand-result-col) + var(--detail-hand-rank-col) + var(--detail-hand-rank-col) + var(--detail-hand-rank-col) + var(--detail-hand-rank-col) + var(--detail-hand-tribute-col));
  --detail-round-col: clamp(58px, 6vw, 76px);
  --detail-round-winner-col: clamp(36px, 4vw, 48px);
  --detail-round-level-col: clamp(54px, 5.6vw, 72px);
  --detail-round-score-col: clamp(48px, 5vw, 66px);
  --detail-round-deal-col: clamp(42px, 4.5vw, 56px);
  --detail-round-table-min: calc(var(--detail-round-col) + var(--detail-round-winner-col) + var(--detail-round-level-col) + var(--detail-round-level-col) + var(--detail-round-score-col) + var(--detail-round-score-col) + var(--detail-round-deal-col));
  --hand-round-margin: clamp(7px, 1.8vw, 8px);
  --hand-round-title-h: clamp(32px, 7.4vw, 34px);
  --hand-round-title-gap: clamp(6px, 1.6vw, 8px);
  --hand-round-title-pad-x: clamp(8px, 2.4vw, 10px);
  --hand-round-title-font: clamp(12.5px, 3.4vw, 14px);
  --hand-round-team-font: clamp(10.8px, 2.8vw, 12px);
  --hand-section-margin-top: clamp(8px, 1.6vw, 10px);
  --hand-section-title-margin-bottom: clamp(5px, 1.2vw, 6px);
  --detail-stats-cols: repeat(2, minmax(0, 1fr));
  --detail-stats-gap: var(--player-stat-gap);
  --detail-stat-min-h: clamp(40px, 6.5vw, 46px);
  --detail-stat-pad-y: clamp(5px, 1vw, 7px);
  --detail-stat-pad-x: clamp(7px, 1.2vw, 10px);
  --detail-stat-label-font: clamp(10px, 1.05vw, 12px);
  --detail-stat-value-font: clamp(15px, 1.45vw, 18px);
  --detail-stat-shield-size: clamp(14px, 3vw, 16px);
  --detail-stats-bottom: clamp(8px, 2.2vw, 10px);
  --detail-pills-gap: clamp(2px, 0.8vw, 3px);
  --detail-pill-h: clamp(22px, 5.5vw, 24px);
  --detail-pill-min-w: clamp(26px, 6.4vw, 28px);
  --detail-pill-pad-x: clamp(4px, 1.2vw, 5px);
  --detail-crown-size: clamp(11px, 2.9vw, 12px);
  --detail-crown-gap: clamp(5px, 1.2vw, 6px);
  --detail-shield-gap: clamp(2px, 0.8vw, 3px);
  --detail-title-gap: clamp(8px, 1.8vw, 10px);
  --detail-title-margin: clamp(5px, 1.2vw, 6px);
  --detail-title-font: clamp(15px, 3.8vw, 16px);
  --detail-inline-gap: clamp(5px, 1.4vw, 6px);
  --detail-meta-gap: clamp(6px, 1.8vw, 8px);
  --detail-meta-margin: clamp(4px, 1.1vw, 5px);
  --detail-meta-font: clamp(10px, 2.8vw, 11px);
  --detail-meta-icon: clamp(12px, 3.1vw, 13px);
  --detail-team-font: clamp(11px, 3vw, 12px);
  --detail-team-margin: clamp(7px, 1.8vw, 9px);
  --detail-section-gap: clamp(8px, 1.8vw, 10px);
  --detail-section-margin: clamp(5px, 1.2vw, 6px);
  --detail-section-title-font: clamp(15px, 3.8vw, 16px);
  --detail-export-font: clamp(10px, 2.5vw, 11px);
  --detail-toggle-font: clamp(15px, 3.8vw, 16px);
  --detail-table-row-h: clamp(33px, 8vw, 37px);
  --detail-table-cell-pad-x: clamp(2.5px, 0.9vw, 4px);
  --detail-table-font: clamp(10.8px, 3vw, 12px);
  --detail-table-radius: var(--table-radius);
  --detail-void-badge-h: clamp(19px, 4.6vw, 20px);
  --detail-void-badge-pad-x: clamp(7px, 1.8vw, 8px);
  --detail-void-note-margin: clamp(6px, 1.6vw, 8px);
  --player-grid-gap: clamp(7px, 1.2vw, 16px);
  --player-card-min: clamp(318px, 34vw, 430px);
  --player-card-pad: clamp(8px, 1.2vw, 14px);
  --player-stat-gap: clamp(4px, 0.8vw, 8px);
  --player-stat-min-h: clamp(32px, 5.4vw, 36px);
  --player-stat-pad-x: clamp(6px, 1.3vw, 8px);
  --player-stat-radius: var(--panel-radius);
  --player-stat-label-font: clamp(12px, 3.2vw, 14px);
  --player-stat-value-font: clamp(12px, 3.2vw, 14px);
  --player-head-gap: clamp(6px, 1.4vw, 8px);
  --player-head-margin: clamp(6px, 1.5vw, 8px);
  --player-medal-size: clamp(16px, 4.2vw, 19px);
  --player-status-font: var(--font-mini);
  --player-dates-font: clamp(10px, 2.7vw, 11px);
  --player-dates-margin-top: clamp(6px, 1.5vw, 7px);
  --player-dates-pad-top: clamp(6px, 1.5vw, 7px);
  --player-dates-line: 1.55;
  --player-dates-title-gap: clamp(6px, 1.6vw, 8px);
  --player-dates-title-margin: clamp(2px, 0.8vw, 3px);
  --player-date-link-col: clamp(64px, 16vw, 72px);
  --player-date-link-gap-x: clamp(3px, 1vw, 5px);
  --player-date-link-gap-y: var(--size-hair);
  --member-strip-gap: clamp(5px, 1vw, 10px);
  --member-chip-min-h: clamp(66px, 16vw, 76px);
  --member-chip-radius: var(--list-card-radius);
  --member-chip-gap: clamp(2px, 0.8vw, 3px);
  --member-chip-name-font: var(--font-mini);
  --member-avatar-size: clamp(42px, 11vw, 50px);
  --member-avatar-font: clamp(30px, 8.4vw, 38px);
  --avatar-base-size: clamp(36px, 8.8vw, 42px);
  --avatar-base-radius: clamp(8px, 2.3vw, 10px);
  --avatar-base-font: clamp(19px, 5.2vw, 22px);
  --player-avatar-size: clamp(30px, 3.6vw, 38px);
  --player-avatar-radius: clamp(7px, 1.2vw, 8px);
  --player-avatar-font: clamp(15px, 1.7vw, 17px);
  --player-name-size: clamp(18px, 1.9vw, 22px);
  --dates-summary-size: clamp(27px, 6.8vw, 30px);
  --dates-summary-font: clamp(12px, 3.4vw, 14px);
  --match-live-gap: clamp(10px, 1.6vw, 18px);
  --match-felt-height: clamp(218px, 32vw, 320px);
  --match-felt-min-height: clamp(206px, 48vw, 218px);
  --match-score-gap: clamp(8px, 1.6vw, 10px);
  --match-score-divider-col: clamp(18px, 4.6vw, 20px);
  --match-score-margin-bottom: clamp(8px, 1.8vw, 10px);
  --match-score-min-h: clamp(58px, 14vw, 68px);
  --match-score-font: clamp(30px, 7.8vw, 34px);
  --match-score-crown-size: clamp(22px, 5.8vw, 24px);
  --match-score-crown-left: calc(50% - clamp(50px, 12vw, 52px));
  --match-score-crown-top: clamp(8px, 2.2vw, 10px);
  --match-colon-font: clamp(22px, 5.8vw, 24px);
  --match-status-h: clamp(22px, 5.2vw, 24px);
  --match-status-font: clamp(11px, 2.7vw, 12px);
  --felt-radius: var(--panel-radius);
  --felt-ring-x: clamp(48px, 15vw, 74px);
  --felt-ring-y: clamp(58px, 17vw, 74px);
  --felt-chip-edge: clamp(7px, 1.8vw, 8px);
  --felt-chip-h: clamp(22px, 5.2vw, 24px);
  --felt-chip-pad-x: clamp(7px, 1.8vw, 8px);
  --felt-chip-gap: clamp(5px, 1.3vw, 6px);
  --felt-chip-font: clamp(10px, 2.7vw, 11px);
  --felt-shield-min-w: clamp(32px, 8vw, 34px);
  --felt-shield-pad-trim: clamp(1.5px, 0.5vw, 2px);
  --felt-tool-edge: clamp(7px, 1.8vw, 8px);
  --felt-tool-gap: clamp(4px, 1.2vw, 5px);
  --felt-tool-size: clamp(25px, 6.2vw, 26px);
  --felt-tool-icon: clamp(14px, 3.6vw, 15px);
  --felt-seat-min-w: clamp(96px, 13vw, 116px);
  --felt-seat-h: clamp(36px, 4.2vw, 40px);
  --felt-seat-gap: clamp(5px, 1.3vw, 6px);
  --felt-seat-pad-x: clamp(10px, 2.8vw, 12px);
  --felt-seat-font: clamp(12px, 2.9vw, 13px);
  --felt-seat-rank-size: clamp(15px, 3.8vw, 16px);
  --felt-seat-rank-font: clamp(9px, 2.4vw, 10px);
  --felt-seat-edge: clamp(10px, 2.8vw, 12px);
  --lead-card-mini-w: clamp(18px, 4.5vw, 22px);
  --lead-card-gap: clamp(5px, 1.3vw, 7px);
  --felt-center-gap: clamp(3px, 1vw, 4px);
  --felt-center-font: clamp(10px, 2.7vw, 11px);
  --felt-center-sub-font: clamp(9px, 2.4vw, 10px);
  --felt-tribute-font: clamp(12px, 3.3vw, 14px);
  --felt-prompt-gold: #e4c15a;
  --felt-end-gap: clamp(8px, 2.2vw, 9px);
  --felt-end-button-size: clamp(27px, 6.2vw, 29px);
  --felt-end-icon-box: clamp(16px, 3.8vw, 17px);
  --felt-end-symbol-size: clamp(16px, 3.8vw, 17px);
  --confirm-box-w: min(236px, calc(100vw - 48px));
  --confirm-box-min-h: clamp(118px, 30vw, 126px);
  --confirm-box-radius: clamp(16px, 4.2vw, 18px);
  --confirm-text-font: clamp(13px, 3.4vw, 14px);
  --confirm-action-gap: clamp(14px, 4vw, 18px);
  --confirm-icon-size: clamp(32px, 8.5vw, 36px);
  --confirm-icon-svg: clamp(14px, 3.8vw, 15px);
  --modal-safe-top-min: clamp(42px, 11vw, 44px);
  --modal-safe-top-offset: clamp(34px, 9.6vw, 38px);
  --modal-anchor-safe-top: clamp(16px, 4vw, 20px);
  --compact-confirm-w: min(184px, calc(100vw - 68px));
  --compact-confirm-min-h: clamp(104px, 28vw, 112px);
  --compact-confirm-gap: clamp(10px, 2.5vw, 12px);
  --compact-confirm-icon: clamp(27px, 6.8vw, 28px);
  --meta-date-picker-size: var(--size-hair);
  --round-card-margin: clamp(9px, 2.4vw, 10px);
  --round-title-h: clamp(34px, 8.8vw, 36px);
  --round-title-pad-x: clamp(9px, 2.4vw, 10px);
  --round-title-gap: clamp(8px, 2.5vw, 10px);
  --round-title-font: clamp(13px, 3.4vw, 14px);
  --round-title-meta-gap: clamp(4px, 1.3vw, 5px);
  --round-action-size: clamp(23px, 5.8vw, 24px);
  --round-action-font: clamp(17px, 4.6vw, 18px);
  --round-stop-size: clamp(8px, 2vw, 9px);
  --round-stop-radius: clamp(1.5px, 0.4vw, 2px);
  --round-meta-pill-pad-y: clamp(2px, 0.7vw, 3px);
  --round-meta-pill-pad-x: clamp(5px, 1.6vw, 6px);
  --round-meta-pill-font: clamp(11px, 2.9vw, 12px);
  --record-row-h: clamp(31px, 7.6vw, 35px);
  --record-cell-pad-x: var(--size-hair);
  --record-font: clamp(10.8px, 2.85vw, 12px);
  --record-result-font: clamp(11px, 3vw, 12px);
  --record-team-dot: var(--size-dot-sm);
  --team-dot-size: var(--size-icon-shield);
  --mini-row-h: clamp(34px, 8.5vw, 38px);
  --mini-row-round-col: clamp(40px, 10vw, 44px);
  --mini-row-score-col: clamp(76px, 19vw, 84px);
  --mini-row-action-col: minmax(0, 1fr);
  --mini-row-count-col: clamp(32px, 8vw, 36px);
  --mini-row-cols: var(--mini-row-round-col) var(--mini-row-score-col) var(--mini-row-action-col) var(--mini-row-count-col);
  --mini-row-gap: clamp(7px, 2vw, 8px);
  --mini-row-pad-x: clamp(9px, 2.5vw, 10px);
  --mini-row-font: clamp(12px, 3.2vw, 13px);
  --match-record-min: clamp(430px, 44vw, 560px);
  --match-record-table-min: clamp(430px, 54vw, 640px);
  --match-record-index-col: clamp(32px, 3.4vw, 42px);
  --match-record-score-col: clamp(62px, 7vw, 88px);
  --match-record-shield-col: clamp(28px, 3.2vw, 38px);
  --match-record-player-col: clamp(44px, 5vw, 66px);
  --match-record-result-col: clamp(38px, 4vw, 50px);
  --match-record-tribute-col: clamp(56px, 7vw, 92px);
  --watch-record-index-col: clamp(28px, 3vw, 36px);
  --watch-record-score-col: clamp(54px, 5.6vw, 70px);
  --watch-record-shield-col: clamp(24px, 2.6vw, 32px);
  --watch-record-player-col: clamp(54px, 6.2vw, 84px);
  --watch-record-result-col: clamp(38px, 4vw, 50px);
  --watch-record-tribute-col: clamp(68px, 7vw, 100px);
  --watch-match-record-table-min: calc(var(--watch-record-index-col) + var(--watch-record-score-col) + var(--watch-record-shield-col) + (var(--watch-record-player-col) * 4) + var(--watch-record-result-col) + var(--watch-record-tribute-col));
  --export-preview-w: min(clamp(300px, 54vw, 760px), 88vw);
  --export-preview-max-h: min(82dvh, 760px);
  --export-preview-scroll-max-h: min(70dvh, 700px);
  --export-topbar-margin: clamp(8px, 2.4vw, 10px);
  --export-actions-gap: clamp(7px, 1.8vw, 8px);
  --export-share-size: clamp(38px, 8.8vw, 40px);
  --export-share-icon: clamp(19px, 4.8vw, 20px);
  --export-preview-radius: clamp(16px, 4vw, 18px);
  --export-preview-pad: clamp(9px, 1.4vw, 12px);
  --export-preview-gap: clamp(8px, 1.2vw, 12px);
  --export-preview-scroll-radius: clamp(10px, 2.8vw, 12px);
  --export-card-radius: clamp(10px, 2.8vw, 12px);
  --export-card-pad: clamp(9px, 2.4vw, 10px);
  --export-card-gap: clamp(9px, 2.4vw, 10px);
  --export-head-gap: clamp(10px, 2.8vw, 12px);
  --export-head-pad-x: clamp(1px, 0.6vw, 2px);
  --export-title-font: clamp(21px, 5.8vw, 22px);
  --export-meta-font: clamp(10.8px, 2.8vw, 12px);
  --export-section-radius: clamp(9px, 2.6vw, 10px);
  --export-section-pad: clamp(9px, 2.4vw, 10px);
  --export-section-meta-margin: clamp(5px, 1.5vw, 6px);
  --export-section-team-margin: clamp(7px, 1.8vw, 8px);
  --export-section-head-margin: clamp(5px, 1.5vw, 6px);
  --export-section-title-font: clamp(14.5px, 3.9vw, 16px);
  --export-hand-row-h: clamp(35px, 8.4vw, 39px);
  --export-hand-cell-pad-x: clamp(2.5px, 0.9vw, 4px);
  --export-hand-font: clamp(10.5px, 2.75vw, 12px);
  --export-hand-no-col: clamp(34px, 8.5vw, 36px);
  --export-hand-score-col: clamp(84px, 20vw, 92px);
  --export-hand-shield-col: clamp(48px, 12vw, 52px);
  --export-hand-result-col: clamp(40px, 10vw, 44px);
  --export-hand-rank-col: clamp(48px, 11vw, 56px);
  --export-hand-tribute-col: clamp(94px, 22vw, 106px);
  --export-hand-shield-size: var(--size-icon-shield);
  --export-hand-table-min: calc(var(--export-hand-no-col) + var(--export-hand-score-col) + var(--export-hand-shield-col) + var(--export-hand-result-col) + var(--export-hand-rank-col) + var(--export-hand-rank-col) + var(--export-hand-rank-col) + var(--export-hand-rank-col) + var(--export-hand-tribute-col));
  --export-team-dot-size: var(--size-dot-xs);
  --export-footer-gap: clamp(3px, 1vw, 4px);
  --export-footer-pad-top: clamp(9px, 2.4vw, 10px);
  --lite-icon-size: clamp(15px, 2vw, 17px);
  --login-pad-x: clamp(18px, 5vw, 32px);
  --login-card-w-mobile: min(236px, calc(100vw - 44px));
  --login-card-w-tablet: min(260px, 32vw);
  --login-card-w: var(--login-card-w-mobile);
  --login-min-h: calc(100vh - clamp(96px, 14vw, 110px));
  --login-app-pad-bottom: clamp(22px, 5.2vw, 26px);
  --login-gap: clamp(10px, 2.8vw, 12px);
  --login-card-gap: clamp(5px, 1.4vw, 6px);
  --login-card-pad-mobile: clamp(7px, 1.8vw, 8px);
  --login-card-pad-tablet: clamp(8px, 1.2vw, 10px);
  --login-card-pad: var(--login-card-pad-mobile);
  --login-card-radius: clamp(10px, 2.8vw, 12px);
  --login-title-font: clamp(24px, 6.8vw, 27px);
  --login-title-sub-font: clamp(11px, 0.9vw, 12px);
  --login-title-gap: clamp(3px, 1vw, 4px);
  --login-field-h-mobile: clamp(34px, 8.2vw, 36px);
  --login-field-h-tablet: clamp(36px, 3.8vw, 40px);
  --login-field-h: var(--login-field-h-mobile);
  --login-field-radius: clamp(8px, 2.2vw, 9px);
  --login-confirm-font: clamp(16px, 4.2vw, 17px);
  --login-error-min-h: clamp(13px, 3.4vw, 14px);
  --login-error-shift-y: clamp(-1px, -0.25vw, 0px);
  --login-confirm-margin-top: clamp(1px, 0.7vw, 2px);
  --menu-panel-pad: clamp(4px, 1.1vw, 5px);
  --menu-list-gap: clamp(3px, 0.9vw, 4px);
  --menu-row-h-mobile: clamp(42px, 9.5vw, 46px);
  --menu-row-h-tablet: clamp(44px, 4.5vw, 50px);
  --menu-row-h: var(--menu-row-h-mobile);
  --menu-row-radius: var(--list-card-radius);
  --menu-row-pad-y: clamp(6px, 1.6vw, 7px);
  --menu-row-pad-x: clamp(7px, 1.8vw, 8px);
  --menu-row-gap: clamp(7px, 1.8vw, 8px);
  --menu-icon-col-mobile: clamp(30px, 7vw, 32px);
  --menu-icon-col-tablet: clamp(30px, 3.4vw, 34px);
  --menu-icon-col: var(--menu-icon-col-mobile);
  --menu-icon-size-mobile: clamp(26px, 6.4vw, 28px);
  --menu-icon-size-tablet: clamp(28px, 3.1vw, 32px);
  --menu-icon-size: var(--menu-icon-size-mobile);
  --menu-svg-size-mobile: clamp(14px, 3.8vw, 15px);
  --menu-svg-size-tablet: clamp(15px, 1.5vw, 17px);
  --menu-svg-size: var(--menu-svg-size-mobile);
  --menu-title-font-mobile: clamp(13px, 3.4vw, 14px);
  --menu-title-font-tablet: clamp(14px, 1.25vw, 15px);
  --menu-title-font: var(--menu-title-font-mobile);
  --menu-arrow-font-mobile: clamp(16px, 4.5vw, 18px);
  --menu-arrow-font-tablet: clamp(17px, 1.7vw, 19px);
  --menu-arrow-font: var(--menu-arrow-font-mobile);
  --menu-arrow-col: clamp(18px, 4.8vw, 20px);
  --account-panel-max: min(360px, 100%);
  --account-menu-w-mobile: clamp(124px, 30vw, 144px);
  --account-menu-w-tablet: clamp(136px, 18vw, 156px);
  --account-menu-w: var(--account-menu-w-mobile);
  --account-menu-button-h: clamp(30px, 4.2vw, 34px);
  --admin-panel-pad-mobile: clamp(7px, 1.25vw, 12px);
  --admin-panel-pad-tablet: clamp(10px, 1.5vw, 16px);
  --admin-panel-pad: var(--admin-panel-pad-mobile);
  --admin-view-label-margin: clamp(1px, 0.5vw, 2px) 0 clamp(5px, 1.2vw, 6px);
  --admin-section-gap-mobile: clamp(5px, 0.9vw, 9px);
  --admin-section-gap-tablet: clamp(7px, 1vw, 10px);
  --admin-section-gap: var(--admin-section-gap-mobile);
  --admin-section-space-mobile: clamp(8px, 1.3vw, 12px);
  --admin-section-space-tablet: clamp(8px, 1.4vw, 12px);
  --admin-section-space: var(--admin-section-space-mobile);
  --admin-row-min-h-mobile: clamp(42px, 5vw, 52px);
  --admin-row-min-h-tablet: clamp(44px, 5.2vw, 54px);
  --admin-row-min-h: var(--admin-row-min-h-mobile);
  --admin-row-pad-y: clamp(5px, 0.9vw, 8px);
  --admin-row-pad-x-mobile: clamp(7px, 1.2vw, 12px);
  --admin-row-pad-x-tablet: clamp(7px, 1.2vw, 12px);
  --admin-row-pad-x: var(--admin-row-pad-x-mobile);
  --admin-row-gap-mobile: clamp(7px, 1.1vw, 11px);
  --admin-row-gap-tablet: clamp(8px, 1.2vw, 12px);
  --admin-row-gap: var(--admin-row-gap-mobile);
  --admin-row-radius: clamp(8px, 1.2vw, 10px);
  --admin-avatar-size-mobile: clamp(28px, 3.4vw, 34px);
  --admin-avatar-size-tablet: clamp(28px, 3.4vw, 34px);
  --admin-avatar-size: var(--admin-avatar-size-mobile);
  --admin-avatar-radius: clamp(7px, 1vw, 8px);
  --admin-icon-size: clamp(28px, 3.2vw, 32px);
  --admin-action-size: clamp(27px, 3.2vw, 30px);
  --admin-icon-max: clamp(16px, 2.2vw, 18px);
  --admin-icon-inset: clamp(8px, 1.2vw, 10px);
  --admin-name-font: clamp(12px, 1.08vw, 13px);
  --admin-avatar-font: clamp(14px, 1.3vw, 15px);
  --admin-action-pad-x: clamp(6px, 1vw, 7px);
  --admin-badge-h: clamp(20px, 2.6vw, 22px);
  --admin-badge-font: clamp(9.5px, 0.9vw, 10px);
  --admin-split-gap: clamp(5px, 1vw, 6px);
  --admin-mini-gap: clamp(5px, 1vw, 6px);
  --admin-mini-pad-x: clamp(8px, 1.5vw, 10px);
  --member-head-margin-top: clamp(1px, 0.5vw, 2px);
  --member-head-font: clamp(10px, 1vw, 11px);
  --member-add-font: clamp(18px, 2vw, 22px);
  --member-role-font: clamp(9.5px, 0.9vw, 10px);
  --member-role-toggle-min: clamp(44px, 5vw, 48px);
  --member-role-toggle-h: clamp(25px, 3vw, 28px);
  --member-role-toggle-pad-x: clamp(7px, 1.1vw, 9px);
  --member-role-toggle-font: clamp(10px, 1vw, 11px);
  --member-text-gap: clamp(1px, 0.4vw, 2px);
  --admin-mini-h-mobile: clamp(36px, 4.2vw, 42px);
  --admin-mini-h-tablet: clamp(38px, 4.5vw, 44px);
  --admin-mini-h: var(--admin-mini-h-mobile);
  --admin-mini-icon: clamp(18px, 2.4vw, 20px);
  --member-add-size: clamp(28px, 3.4vw, 32px);
  --member-manager-head-gap-mobile: clamp(8px, 1.4vw, 12px);
  --member-manager-head-gap-tablet: clamp(8px, 1.4vw, 12px);
  --member-manager-head-gap: var(--member-manager-head-gap-mobile);
  --account-profile-avatar-mobile: clamp(36px, 7.8vw, 42px);
  --account-profile-avatar-tablet: clamp(40px, 4.2vw, 46px);
  --account-profile-avatar: var(--account-profile-avatar-mobile);
  --account-profile-gap: clamp(8px, 1.6vw, 10px);
  --account-profile-pad-y: clamp(7px, 1.2vw, 8px);
  --account-profile-pad-x: clamp(7px, 1.2vw, 8px);
  --account-profile-pad-bottom: clamp(10px, 2vw, 12px);
  --account-profile-radius: clamp(9px, 1.5vw, 10px);
  --account-profile-avatar-font: clamp(20px, 2.4vw, 22px);
  --account-profile-name-font: clamp(15px, 1.4vw, 16px);
  --account-actions-gap: clamp(5px, 1vw, 6px);
  --account-actions-pad-bottom: clamp(1px, 0.5vw, 2px);
  --member-form-box-w-mobile: min(286px, calc(100vw - 44px));
  --member-form-box-w-tablet: min(310px, 48vw);
  --member-form-box-w: var(--member-form-box-w-mobile);
  --member-form-pad: clamp(14px, 3.8vw, 16px);
  --member-form-gap: clamp(8px, 2.4vw, 10px);
  --member-form-status-min-h: clamp(16px, 3.8vw, 18px);
  --member-form-status-font: clamp(13px, 3.4vw, 15px);
  --member-form-field-gap: clamp(7px, 1.7vw, 8px);
  --member-form-input-w-mobile: min(clamp(144px, 40vw, 168px), calc(100vw - 120px));
  --member-form-input-w-tablet: clamp(154px, 18vw, 176px);
  --member-form-input-w: var(--member-form-input-w-mobile);
  --member-form-input-h: clamp(32px, 7.2vw, 34px);
  --member-form-input-font: var(--font-ios-input);
  --editor-title-font: 13px;
  --editor-pad: calc((var(--confirm-box-w) - var(--member-form-input-w)) / 2 - var(--line-w));
  --editor-width-growth: calc((var(--editor-pad) - 15px) * 2);
  --editor-section-gap: 12px;
  --editor-content-gap: 10px;
  --editor-field-gap: 7px;
  --editor-field-h: 32px;
  --editor-field-radius: 8px;
  --editor-button-size: 33px;
  --editor-action-gap: 16px;
  --editor-radius: 16px;
  --editor-compact-w: 236px;
  --member-picker-icon: clamp(30px, 7.5vw, 34px);
  --member-picker-max-mobile: min(202px, 100%);
  --member-picker-max-tablet: min(230px, 100%);
  --member-picker-max: var(--member-picker-max-mobile);
  --member-picker-gap: clamp(5px, 1.4vw, 6px);
  --member-picker-radius: clamp(8px, 2vw, 9px);
  --member-picker-pad: clamp(1px, 0.6vw, 2px);
  --member-picker-font: clamp(16px, 4.2vw, 18px);
  --account-modal-w-mobile: min(232px, calc(100vw - 56px));
  --account-modal-w-tablet: min(248px, 34vw);
  --account-modal-w: var(--account-modal-w-mobile);
  --account-modal-radius: clamp(14px, 2.4vw, 16px);
  --account-modal-pad: clamp(11px, 3vw, 13px);
  --account-modal-gap: clamp(8px, 2.2vw, 10px);
  --account-confirm-gap: clamp(12px, 3.2vw, 14px);
  --account-confirm-icon-mobile: clamp(27px, 6.8vw, 28px);
  --account-confirm-icon-tablet: clamp(28px, 3vw, 30px);
  --account-confirm-icon: var(--account-confirm-icon-mobile);
  --confirm-box-gap: clamp(12px, 3vw, 16px);
  --confirm-icon-font: clamp(16px, 4.5vw, 18px);
  --compact-confirm-radius: clamp(14px, 3.6vw, 16px);
  --compact-confirm-icon-font: clamp(14px, 3.8vw, 15px);
  --hand-edit-w: min(312px, calc(100vw - 34px));
  --hand-edit-pad: clamp(10px, 2.8vw, 12px);
  --hand-edit-gap: clamp(9px, 2.4vw, 10px);
  --hand-edit-head-gap: clamp(8px, 2.4vw, 12px);
  --hand-edit-title-font: clamp(14px, 3.6vw, 15px);
  --hand-edit-shield-icon: clamp(15px, 4vw, 17px);
  --hand-edit-felt-h: clamp(166px, 41vw, 176px);
  --hand-edit-ring-x: clamp(40px, 13vw, 47px);
  --hand-edit-ring-y: clamp(54px, 15vw, 61px);
  --hand-edit-seat-min-w: clamp(96px, 26vw, 102px);
  --hand-edit-seat-h: clamp(32px, 8vw, 34px);
  --hand-edit-seat-edge: clamp(9px, 2.5vw, 10px);
  --hand-edit-seat-y: clamp(18px, 5vw, 20px);
  --hand-edit-rank-size: clamp(20px, 5vw, 21px);
  --hand-edit-seat-gap: clamp(4px, 1.4vw, 5px);
  --hand-edit-seat-pad-x: clamp(7px, 2.2vw, 9px);
  --hand-edit-name-w: clamp(60px, 18vw, 66px);
  --hand-edit-name-font: clamp(10px, 2.8vw, 11px);
  --hand-edit-save-w: clamp(112px, 32vw, 118px);
  --hand-edit-save-radius: var(--list-card-radius);
  --setup-edit-outline: clamp(1px, 0.5vw, 2px);
  --setup-edit-outline-offset: clamp(1px, 0.6vw, 2px);
  --setup-edit-name-inset: clamp(20px, 5.8vw, 24px);
  --setup-seat-pad-right: clamp(20px, 2.8vw, 28px);
  --setup-seat-pad-left: clamp(9px, 1.6vw, 12px);
  --setup-seat-font: clamp(12px, 1.25vw, 14px);
  --setup-edit-icon-edge: clamp(8px, 1.3vw, 11px);
  --setup-edit-icon-size: clamp(12px, 1.3vw, 14px);
  --hand-edit-save-h: clamp(32px, 8vw, 34px);
  --emoji-modal-w-mobile: min(292px, 92vw);
  --emoji-modal-w-tablet: min(360px, 62vw);
  --emoji-modal-w: var(--emoji-modal-w-mobile);
  --emoji-option-size-mobile: clamp(32px, 7vw, 38px);
  --emoji-option-size-tablet: clamp(36px, 4.2vw, 42px);
  --emoji-option-size: var(--emoji-option-size-mobile);
  --emoji-option-gap: clamp(4px, 1vw, 6px);
  --emoji-option-radius-mobile: clamp(7px, 1.6vw, 8px);
  --emoji-option-radius-tablet: clamp(8px, 1.1vw, 10px);
  --emoji-option-radius: var(--emoji-option-radius-mobile);
  --emoji-option-font-mobile: clamp(15px, 3.8vw, 17px);
  --emoji-option-font-tablet: clamp(16px, 1.7vw, 19px);
  --emoji-option-font: var(--emoji-option-font-mobile);
  --emoji-option-pad: clamp(1px, 0.5vw, 2px);
  --avatar-preview-w-mobile: min(260px, 78vw);
  --avatar-preview-w-tablet: min(300px, 44vw);
  --avatar-preview-w: var(--avatar-preview-w-mobile);
  --avatar-preview-frame-mobile: clamp(168px, 48vw, 190px);
  --avatar-preview-frame-tablet: clamp(176px, 20vw, 204px);
  --avatar-preview-frame: var(--avatar-preview-frame-mobile);
  --avatar-preview-pad: clamp(16px, 3vw, 20px);
  --avatar-preview-gap: clamp(10px, 2vw, 14px);
  --avatar-preview-radius-mobile: clamp(17px, 3.8vw, 20px);
  --avatar-preview-radius-tablet: clamp(18px, 2vw, 22px);
  --avatar-preview-radius: var(--avatar-preview-radius-mobile);
  --avatar-preview-name-font: clamp(12px, 2.8vw, 13px);
  --avatar-preview-frame-radius-mobile: clamp(24px, 6vw, 28px);
  --avatar-preview-frame-radius-tablet: clamp(26px, 2.8vw, 32px);
  --avatar-preview-frame-radius: var(--avatar-preview-frame-radius-mobile);
  --avatar-preview-frame-font-mobile: clamp(76px, 20vw, 84px);
  --avatar-preview-frame-font-tablet: clamp(80px, 8vw, 92px);
  --avatar-preview-frame-font: var(--avatar-preview-frame-font-mobile);
  --password-modal-input-offset: clamp(64px, 10vw, 70px);
  --password-modal-estimated-height: clamp(244px, 42vw, 260px);
  --account-title-font: clamp(11px, 2.8vw, 12px);
  --account-confirm-font: clamp(14px, 3.6vw, 15px);
  --import-panel-pad: clamp(8px, 2vw, 10px);
  --import-modal-w-mobile: min(clamp(220px, 62vw, 240px), calc(100vw - 44px));
  --import-modal-w-tablet: min(252px, 34vw);
  --import-modal-w: var(--import-modal-w-mobile);
  --export-modal-w-mobile: min(clamp(204px, 56vw, 220px), calc(100vw - 56px));
  --export-modal-w-tablet: min(232px, 30vw);
  --export-modal-w: var(--export-modal-w-mobile);
  --import-modal-radius: clamp(14px, 2.4vw, 16px);
  --import-modal-pad: clamp(11px, 3vw, 14px);
  --export-modal-pad: clamp(10px, 2.6vw, 12px);
  --import-modal-gap: clamp(8px, 2vw, 10px);
  --export-modal-gap: clamp(7px, 1.8vw, 9px);
  --import-picker-h: clamp(32px, 7.8vw, 34px);
  --import-picker-pad-x: clamp(10px, 2.6vw, 12px);
  --import-picker-font: clamp(11px, 1vw, 12px);
  --import-picker-icon: clamp(18px, 2.4vw, 20px);
  --import-file-min-h: clamp(22px, 5.4vw, 24px);
  --import-file-font: clamp(10px, 1vw, 11px);
  --import-action-font: clamp(15px, 4vw, 17px);
  --import-preview-gap: clamp(6px, 1.5vw, 8px);
  --import-actions-gap: clamp(12px, 3.6vw, 14px);
  --import-action-size-mobile: clamp(27px, 6.8vw, 28px);
  --import-action-size-tablet: clamp(28px, 3vw, 30px);
  --import-action-size: var(--import-action-size-mobile);
  --import-action-svg-mobile: clamp(14px, 3.8vw, 15px);
  --import-action-svg-tablet: clamp(15px, 1.6vw, 16px);
  --import-action-svg: var(--import-action-svg-mobile);
  --review-summary-gap: clamp(4px, 1vw, 7px);
  --review-summary-cols: repeat(3, minmax(0, 1fr));
  --review-stat-h: clamp(31px, 4.5vw, 36px);
  --review-stat-font: clamp(10px, 1vw, 12px);
  --review-list-gap: clamp(7px, 1.1vw, 10px);
  --review-card-pad: clamp(7px, 1.2vw, 10px);
  --review-card-radius: var(--list-card-radius);
  --review-card-gap: clamp(6px, 1vw, 9px);
  --review-head-gap: clamp(6px, 1vw, 10px);
  --review-date-font: clamp(12px, 1.1vw, 13px);
  --review-tag-h: clamp(20px, 2.6vw, 23px);
  --review-tag-pad-x: clamp(6px, 1vw, 8px);
  --review-tag-font: clamp(9.5px, 0.9vw, 10px);
  --review-compare-gap: clamp(5px, 1vw, 8px);
  --review-option-min: clamp(140px, 18vw, 168px);
  --review-option-pad: clamp(6px, 1vw, 8px);
  --review-option-radius: var(--panel-radius);
  --review-option-title-gap: clamp(3px, 0.8vw, 4px);
  --review-option-title-font: clamp(11px, 1vw, 12px);
  --review-option-body-font: clamp(10px, 0.95vw, 11px);
  --review-diff-min-h: clamp(24px, 3.2vw, 28px);
  --review-diff-pad-y: clamp(4px, 0.8vw, 5px);
  --review-diff-strong-gap: clamp(4px, 0.8vw, 5px);
  --review-diff-pad-x: clamp(6px, 1vw, 8px);
  --review-action-min: clamp(76px, 17vw, 96px);
  --review-action-h: clamp(32px, 4.4vw, 36px);
  --review-action-font: clamp(11px, 1vw, 12px);
  --void-row-min-h: clamp(40px, 5vw, 52px);
  --void-row-pad-y: clamp(5px, 0.8vw, 8px);
  --void-row-pad-x: clamp(7px, 1.2vw, 12px);
  --void-row-gap: clamp(6px, 1.2vw, 12px);
  --void-action-size: clamp(26px, 3.2vw, 30px);
  --void-meta-font: clamp(10px, 1vw, 11px);
  --void-meta-margin-top: clamp(1px, 0.5vw, 2px);
  --void-section-gap: clamp(4px, 0.8vw, 7px);
  --void-section-space: clamp(8px, 1.4vw, 12px);
  --void-section-head-h: clamp(26px, 3.2vw, 30px);
  --void-section-toggle-w: clamp(26px, 3vw, 28px);
  --void-section-toggle-h: clamp(22px, 2.7vw, 24px);
  --detail-team-dot-size: clamp(8px, 1vw, 9px);
  --detail-inline-icon-size: clamp(12px, 1.4vw, 13px);
  --match-meta-gap: clamp(3px, 0.7vw, 4px);
  --match-meta-icon-size: clamp(12px, 1.4vw, 13px);
  --first-lead-pad-x: clamp(3px, 0.8vw, 4px);
  --first-lead-pill-w: clamp(20px, 4.8vw, 22px);
  --first-lead-pill-h: clamp(17px, 4.2vw, 18px);
  --legacy-round-body-gap: clamp(1px, 0.4vw, 2px);
  --rules-cards-gap: clamp(2px, 0.6vw, 3px);
  --rules-card-mini-radius: clamp(3px, 0.8vw, 4px);
  --history-log-button-h: clamp(26px, 3.2vw, 30px);
  --history-log-button-pad-x: clamp(8px, 1vw, 10px);
  --history-log-button-font: clamp(10.5px, 1vw, 11.5px);
  --history-save-button-h: clamp(22px, 2.8vw, 24px);
  --history-save-button-pad-x: clamp(12px, 1.5vw, 14px);
  --history-save-button-font: clamp(11px, 1.05vw, 12px);
  --history-log-list-gap: clamp(3px, 0.8vw, 4px);
  --history-log-item-pad-y: clamp(5px, 1vw, 6px);
  --history-log-item-font: clamp(10px, 1vw, 11px);
  --history-edit-actions-gap: clamp(5px, 1vw, 6px);
  --history-pencil-icon: clamp(12px, 1.2vw, 13px);
  --history-log-modal-w: min(clamp(292px, 42vw, 330px), calc(100vw - 34px));
  --history-log-modal-min-h: clamp(116px, 24vw, 126px);
  --history-log-modal-max-h: min(68vh, clamp(400px, 54vw, 440px));
  --history-log-modal-pad: clamp(13px, 2.4vw, 16px) clamp(12px, 2vw, 14px) clamp(12px, 2vw, 14px);
  --history-log-modal-gap: clamp(8px, 1.6vw, 10px);
  --history-log-modal-list-max-h: min(46vh, clamp(260px, 42vw, 300px));
  --history-impact-margin-top: clamp(-4px, -0.4vw, -3px);
  --history-impact-font: clamp(10px, 1vw, 11px);
  --history-impact-list-gap: clamp(4px, 0.9vw, 5px);
  --history-impact-list-margin: clamp(7px, 1.2vw, 8px);
  --history-impact-row-label: clamp(54px, 8vw, 58px);
  --history-impact-row-gap: clamp(6px, 1.1vw, 7px);
  --history-impact-summary-margin: clamp(1px, 0.5vw, 2px);
  --history-save-note-margin: clamp(7px, 1.2vw, 8px);
  --history-confirm-w: min(clamp(320px, 48vw, 356px), calc(100vw - 34px));
  --history-confirm-max-h: min(72vh, clamp(460px, 60vw, 520px));
  --history-confirm-pad: clamp(14px, 2.4vw, 16px) clamp(12px, 2vw, 14px) clamp(12px, 2vw, 14px);
  --history-confirm-gap: clamp(8px, 1.6vw, 10px);
  --history-confirm-title-font: clamp(12px, 1.1vw, 13px);
  --history-confirm-impact-max-h: min(46vh, clamp(300px, 44vw, 340px));
  --history-confirm-row-label: clamp(50px, 7vw, 54px);
  --history-confirm-row-gap: clamp(7px, 1.2vw, 8px);
  --history-confirm-row-pad-y: clamp(5px, 1vw, 6px);
  --history-confirm-row-pad-x: clamp(7px, 1.2vw, 8px);
  --history-confirm-row-radius: clamp(7px, 1vw, 8px);
  --history-confirm-value-font: clamp(10px, 1vw, 11px);
  --history-confirm-actions-margin: clamp(1px, 0.5vw, 2px);
  --toast-top: max(clamp(16px, 4vw, 20px), env(safe-area-inset-top));
  --toast-offset-y: clamp(10px, 2.4vw, 12px);
  --toast-pad-y: clamp(8px, 2.4vw, 10px);
  --toast-pad-x: clamp(12px, 3.5vw, 16px);
  --detail-mobile-pill-h: clamp(24px, 6.2vw, 26px);
  --detail-mobile-pill-min-w: clamp(26px, 6.8vw, 28px);
  --legacy-round-card-margin: clamp(8px, 1.4vw, 10px);
  --legacy-round-radius: clamp(8px, 1.2vw, 10px);
  --legacy-round-head-pad-y: clamp(8px, 1.2vw, 10px);
  --legacy-round-head-pad-x: clamp(9px, 1.6vw, 12px);
  --legacy-round-head-font: clamp(13px, 1.2vw, 15px);
  --legacy-round-cell-min: clamp(82px, 23vw, 128px);
  --legacy-round-cell-min-h: clamp(44px, 6vw, 54px);
  --legacy-round-cell-pad: clamp(7px, 1.2vw, 9px);
  --legacy-round-cell-gap: clamp(3px, 0.8vw, 4px);
  --legacy-round-label-font: clamp(11px, 1vw, 12px);
  --legacy-round-value-font: clamp(16px, 1.45vw, 18px);
  --rules-panel-pad: clamp(10px, 1.6vw, 12px);
  --rules-compact-gap: clamp(8px, 1.4vw, 10px);
  --rules-compact-title: clamp(19px, 4.8vw, 22px);
  --rules-compact-sub: clamp(10px, 1vw, 12px);
  --rules-combo-gap: clamp(5px, 1vw, 7px);
  --rules-combo-min: clamp(86px, 24vw, 116px);
  --rules-combo-min-h: clamp(78px, 14vw, 94px);
  --rules-combo-pad: clamp(6px, 1.2vw, 8px);
  --rules-combo-name-font: clamp(12px, 1.2vw, 14px);
  --rules-combo-en-font: clamp(10px, 1.05vw, 11.5px);
  --rules-combo-en-margin-top: clamp(1px, 0.4vw, 2px);
  --rules-card-mini-w: clamp(17px, 4.6vw, 20px);
  --rules-card-mini-h: clamp(24px, 6.3vw, 28px);
  --rules-card-mini-font: clamp(10px, 2.7vw, 12px);
  --rules-cards-min-h: clamp(26px, 6.8vw, 30px);
  --rules-inline-min-h: calc(100dvh - clamp(144px, 16vw, 156px) - env(safe-area-inset-bottom));
  --rules-host-topbar-margin-bottom: clamp(8px, 2.4vw, 10px);
  --rules-host-topbar-pad-bottom: clamp(7px, 2vw, 8px);
  --rules-inline-narrow-bleed: clamp(4px, 1.9vw, 8px);
  --empty-card-min-h: clamp(188px, 48vw, 255px);
  --empty-state-gap: clamp(7px, 1.6vw, 10px);
  --empty-icon-size: clamp(24px, 6.5vw, 30px);
  --empty-text-font: clamp(12px, 3.1vw, 14px);
  --compact-empty-min-h: clamp(52px, 11vw, 72px);
  --setup-grid-gap: clamp(6px, 1.5vw, 8px);
  --setup-field-min-h: clamp(44px, 9vw, 52px);
  --setup-field-pad-y: clamp(6px, 1.4vw, 7px);
  --setup-field-pad-x: clamp(8px, 2vw, 10px);
  --setup-field-radius: var(--login-card-radius);
  --setup-field-gap: clamp(2px, 0.8vw, 3px);
  --setup-date-picker-inset-x: clamp(8px, 2.4vw, 10px);
  --setup-date-picker-bottom: clamp(6px, 1.8vw, 7px);
  --setup-date-picker-h: clamp(22px, 5.8vw, 24px);
  --setup-date-font: clamp(13px, 3.7vw, 15px);
  --setup-input-font: clamp(15px, 4vw, 16px);
  --setup-table-margin: clamp(8px, 2.4vw, 10px);
  --setup-seat-w: clamp(96px, 13vw, 126px);
  --setup-seat-h: clamp(38px, 4.2vw, 44px);
  --setup-seat-edge: clamp(12px, 2vw, 18px);
  --setup-seat-name-offset: clamp(30px, 7vw, 34px);
  --setup-seat-name-w: calc(var(--setup-seat-w) - var(--setup-seat-name-offset));
  --setup-ring-x: clamp(64px, 15vw, 118px);
  --setup-ring-y: clamp(74px, 10vw, 112px);
  --setup-start-size: clamp(27px, 3.2vw, 34px);
  --copyright-font: clamp(10px, 1vw, 11px);
  --copyright-margin-top: clamp(14px, 2.2vw, 20px);
  --member-strip-cols: repeat(4, minmax(0, 1fr));
  --member-strip-cols-wide: repeat(8, minmax(0, 1fr));
  --admin-split-cols: repeat(2, minmax(0, 1fr));
  --admin-single-cols: minmax(0, 1fr);
  --player-stat-cell-min: clamp(92px, 28vw, 104px);
  --stats-grid-cols: repeat(auto-fit, minmax(min(100%, var(--player-stat-cell-min)), 1fr));
  --stat-item-cols: auto minmax(0, 1fr);
  --setup-grid-cols: repeat(2, minmax(0, 1fr));
  --admin-section-cols-wide: repeat(2, minmax(0, 1fr));
  --player-list-cols: repeat(auto-fit, minmax(min(100%, var(--player-card-min)), 1fr));
  --review-compare-cols: repeat(auto-fit, minmax(min(100%, var(--review-option-min)), 1fr));
  --match-score-cols: minmax(0, 1fr) var(--match-score-divider-col) minmax(0, 1fr);
  --legacy-round-cols: repeat(auto-fit, minmax(min(100%, var(--legacy-round-cell-min)), 1fr));
  --rules-combo-cols: repeat(auto-fit, minmax(min(100%, var(--rules-combo-min)), 1fr));
  --detail-stats-cols-wide: repeat(2, minmax(0, 1fr));
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Arial, sans-serif;
  scroll-padding-bottom: var(--bottom-nav-space);
}

button,
input {
  font: inherit;
}

@supports (-webkit-touch-callout: none) {
  input,
  textarea,
  select,
  [contenteditable="true"] {
    font-size: var(--font-ios-input) !important;
  }
}

.app {
  width: 100%;
  max-width: var(--page-max);
  min-height: 100vh;
  margin: 0 auto;
  padding: var(--page-pad-top) var(--page-pad-x) var(--bottom-nav-space);
  position: relative;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--topbar-gap);
  margin-bottom: var(--topbar-margin-bottom);
}

.brand {
  display: grid;
  gap: var(--brand-gap);
}

#match .topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: var(--match-brand-gap);
}

#match .brand {
  min-width: 0;
}

.brand h1 {
  margin: 0;
  font-size: var(--brand-title-font);
  line-height: 1.05;
  letter-spacing: 0;
}

.title-with-image-action {
  display: inline-flex;
  align-items: center;
  gap: var(--title-action-gap);
}

.saga-image-button {
  width: var(--saga-action-size);
  height: var(--saga-action-size);
  border: 0;
  padding: 0;
  border-radius: var(--saga-action-radius);
  background: transparent;
  display: inline-grid;
  place-items: center;
  transform: translateY(var(--saga-action-shift-y));
}

.saga-image-button img {
  width: 100%;
  height: 100%;
  border-radius: var(--saga-action-radius);
  display: block;
  object-fit: cover;
}

.saga-image-button:focus-visible {
  outline: var(--focus-outline-w) solid rgba(43, 120, 181, 0.55);
  outline-offset: var(--saga-focus-outline);
}

#players .brand {
  position: relative;
}

#players .title-with-image-action {
  position: relative;
  display: block;
  width: fit-content;
}

#players .saga-image-button {
  position: absolute;
  left: calc(100% + var(--title-action-gap));
  top: 0;
  width: var(--players-saga-action-size);
  height: var(--players-saga-action-size);
  transform: none;
}

.brand span {
  color: var(--muted);
  font-size: var(--brand-sub-font);
  font-weight: 400;
}

.title-with-image-action .title-text {
  color: var(--text);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.icon-button {
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  border-radius: 50%;
  border: var(--line-w) solid var(--line);
  background: rgba(255, 253, 250, 0.8);
  color: var(--text);
  display: inline-grid;
  place-items: center;
  padding: 0;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(36, 30, 18, 0.04);
}

.topbar-actions {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.account-menu-popover {
  position: absolute;
  top: var(--account-popover-top);
  right: 0;
  z-index: 30;
  display: none;
  width: var(--account-menu-w);
  padding: var(--account-popover-pad);
  border: var(--line-w) solid rgba(222, 215, 202, 0.92);
  border-radius: var(--account-popover-radius);
  background: rgba(255, 253, 250, 0.98);
  box-shadow: 0 16px 38px rgba(40, 32, 18, 0.12);
}

.account-menu-popover.open {
  display: block;
}

.account-menu-admin,
.account-menu-member {
  display: none;
}

body.role-admin .account-menu-admin,
body.role-member .account-menu-member,
body.role-recorder .account-menu-member {
  display: grid;
  gap: var(--account-menu-gap);
}

.account-menu-popover button {
  width: 100%;
  height: var(--account-menu-button-h);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font-size: var(--account-menu-font);
  font-weight: 650;
  letter-spacing: 0;
}

.account-menu-popover button:hover,
.account-menu-popover button:focus-visible {
  background: var(--soft);
  outline: none;
}

.account-menu-popover button[hidden] {
  display: none;
}

.match-top-actions {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--match-top-action-gap);
}

.match-meta-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.match-status-line {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-left: auto;
}

.match-status-viewers::after {
  content: "·";
  margin: 0 5px;
}

.match-status-line [data-match-status] {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: right;
}

.match-status-viewers {
  flex-shrink: 0;
}

.match-status-viewers[hidden] {
  display: none;
}

.sync-state {
  display: none;
  width: var(--sync-state-size);
  height: var(--sync-state-size);
  border: 0;
  background: transparent;
  color: rgba(141, 136, 126, 0.62);
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  box-shadow: none;
}

.sync-state svg {
  width: var(--sync-state-icon);
  height: var(--sync-state-icon);
  display: block;
}

.sync-state .sync-cloud {
  display: none;
}

body.role-member #match .sync-state {
  display: inline-flex;
}

body.sync-issue #match .sync-state .sync-eye {
  display: none;
}

body.sync-issue #match .sync-state .sync-cloud {
  display: block;
}

.page-back-button {
  width: var(--page-back-size);
  min-width: var(--page-back-size);
  height: var(--page-back-size);
  padding: 0;
  border-color: rgba(222, 215, 202, 0.86);
  background: rgba(255, 253, 250, 0.72);
  color: rgba(141, 136, 126, 0.92);
  box-shadow: none;
}

.page-back-button svg {
  width: var(--page-back-icon);
  height: var(--page-back-icon);
  display: block;
}

.screen {
  display: none;
  min-width: 0;
}

.screen.active {
  display: block;
}

.pull-refresh-indicator {
  position: fixed;
  z-index: 80;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  min-height: clamp(28px, 6.8vw, 34px);
  padding: 0 clamp(12px, 3.2vw, 16px);
  border: var(--line-w) solid rgba(222, 215, 202, 0.76);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 250, 0.92);
  color: rgba(126, 117, 103, 0.78);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-meta);
  font-weight: 550;
  line-height: 1;
  box-shadow: 0 8px 22px rgba(40, 32, 18, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 16px));
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.pull-refresh-indicator.visible {
  opacity: 1;
  transform: translate(-50%, var(--pull-refresh-offset, 0px));
}

.panel {
  background: var(--panel);
  border: var(--line-w) solid var(--line);
  border-radius: var(--panel-radius);
  padding: var(--panel-pad);
  box-shadow: 0 6px 20px rgba(40, 32, 18, 0.03);
  margin-bottom: var(--panel-gap);
  min-width: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--panel-head-gap);
  margin-bottom: var(--panel-head-margin);
}

.panel h2,
.panel h3 {
  margin: 0;
}

.panel h2 {
  font-size: var(--panel-title-font);
}

.panel h3 {
  font-size: var(--panel-subtitle-font);
}

.tabs {
  display: flex;
  gap: var(--tabs-gap);
  overflow-x: auto;
  padding: 0 0 var(--tabs-pad-bottom);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: 0 0 auto;
  height: var(--tab-h);
  min-width: var(--tab-min-w);
  padding: 0 var(--tab-pad-x);
  border-radius: var(--radius-pill);
  border: var(--line-w) solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: var(--tab-font);
  font-weight: 850;
}

.tab.active {
  background: var(--soft);
  color: var(--text);
}

.rank-list,
.match-list,
.player-list {
  display: grid;
  gap: var(--rank-list-gap);
}

.total-rank-list {
  margin-top: var(--rank-list-margin-top);
}

.player-list {
  grid-template-columns: var(--player-list-cols);
  gap: var(--player-grid-gap);
}

.variety-board {
  margin-top: clamp(24px, 4vw, 42px);
  padding-top: clamp(16px, 2.8vw, 26px);
  border-top: var(--line-w) solid var(--line);
}

.variety-board[hidden],
body:not(.role-admin) .variety-board {
  display: none;
}

.variety-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(14px, 2.4vw, 20px);
}

.variety-board-head h2 {
  margin: 0;
  font-size: var(--overview-title-font);
  font-weight: 780;
}

.variety-board-head span {
  color: var(--muted);
  font-size: var(--font-mini);
  font-weight: 500;
}

.variety-board-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 30px);
}

.variety-group {
  min-width: 0;
}

.variety-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.variety-group h3 {
  margin: 0;
  font-size: var(--panel-subtitle-font);
  font-weight: 720;
}

.variety-row {
  padding: clamp(10px, 1.7vw, 14px) 0;
  border-bottom: var(--line-w) solid #e7e0d3;
}

.variety-row-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
}

.variety-row-main strong,
.variety-row-main span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.variety-row-main strong {
  color: var(--text);
  font-size: var(--font-body);
  font-weight: 720;
}

.variety-row-main span {
  color: var(--green);
  font-size: var(--font-body);
  font-weight: 650;
  text-align: right;
}

.variety-reason {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: var(--font-mini);
  font-weight: 450;
  line-height: 1.45;
}

.variety-comparisons {
  display: grid;
  gap: 2px;
  margin-top: 4px;
  color: color-mix(in srgb, var(--muted) 82%, transparent);
  font-size: var(--font-mini);
  font-weight: 430;
  line-height: 1.45;
}

.variety-comparisons p {
  margin: 0;
}

.variety-comparison-result {
  color: var(--green);
  font-weight: 680;
}

.variety-empty {
  padding: 14px 0;
  border-bottom: var(--line-w) solid #e7e0d3;
  color: var(--muted);
  font-size: var(--font-meta);
  font-weight: 500;
}

@media (min-width: 900px) {
  .variety-board-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .variety-group + .variety-group {
    padding-left: clamp(16px, 2vw, 26px);
    border-left: var(--line-w) solid var(--line);
  }
}

.rank-row,
.match-row,
.player-card {
  border: var(--line-w) solid #e7e0d3;
  background: rgba(255, 253, 250, 0.72);
  border-radius: var(--list-card-radius);
}

.rank-row {
  display: grid;
  grid-template-columns: var(--rank-no-col) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--rank-row-gap);
  min-height: var(--rank-row-min-h);
  padding: var(--rank-row-pad-y) var(--rank-row-pad-x);
}

.rank-row[data-player-jump] {
  cursor: pointer;
}

.rank-row[data-player-jump]:active {
  transform: scale(0.995);
  background: rgba(238, 232, 220, 0.46);
}

.rank-no {
  color: var(--muted);
  font-size: var(--rank-no-font);
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-no.unranked {
  color: rgba(141, 136, 126, 0.46);
  font-size: var(--rank-unranked-font);
  font-weight: 400;
}

.rank-avatar {
  width: var(--rank-avatar-size);
  height: var(--rank-avatar-size);
  border-radius: var(--rank-avatar-radius);
  border: var(--line-w) solid rgba(222, 215, 202, 0.8);
  background: rgba(255, 253, 250, 0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--rank-avatar-font);
  overflow: hidden;
}

.rank-name {
  font-size: var(--rank-name-font);
  font-weight: 780;
}

.rank-row.unranked .rank-name,
.rank-row.unranked .rank-value {
  color: rgba(141, 136, 126, 0.56);
}

.rank-meta {
  color: var(--muted);
  font-size: var(--rank-meta-font);
  font-weight: 400;
  margin-top: clamp(2px, 0.35vw, 4px);
}

.rank-value {
  display: inline-flex;
  align-items: center;
  gap: clamp(7px, 1.15vw, 10px);
  font-size: var(--rank-value-font);
  font-weight: 820;
}

.rank-change {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(36px, 5.8vw, 44px);
  height: clamp(23px, 3.8vw, 29px);
  border-radius: var(--radius-pill);
  padding: 0 clamp(7px, 1.2vw, 9px);
  font-size: 1em;
  font-weight: 820;
  line-height: 1;
}

.rank-change.up {
  background: rgba(202, 164, 59, 0.14);
  color: #b8902e;
}

.rank-change.down {
  background: rgba(60, 130, 167, 0.12);
  color: #3c82a7;
}

.rank-trophy {
  width: var(--rank-trophy-size);
  height: var(--rank-trophy-size);
  display: block;
}

.rank-trophy.gold {
  color: #d5a93f;
}

.rank-trophy.silver {
  color: #aeb4bb;
}

.rank-trophy.bronze {
  color: #b47743;
}

.rank-tabs .tab {
  cursor: pointer;
}

.rank-ability-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rank-ability-icon {
  display: none;
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  color: #a97910;
  stroke-width: 2.6;
}

@media (max-width: 620px) {
  .rank-tabs .rank-ability-tab {
    border-color: #d7bd7a;
  }
}

@media (min-width: 621px) {
  .rank-ability-label {
    gap: 0.34em;
  }

  .rank-ability-icon {
    display: block;
  }

  .rank-tabs .tab.active .rank-ability-icon {
    color: #895d08;
  }
}

.overview-tabs {
  display: grid;
  gap: var(--tabs-gap);
  overflow: visible;
}

.overview-tabs.total {
  grid-template-columns: var(--overview-total-tab-cols);
}

.overview-tabs.stage {
  grid-template-columns: var(--overview-stage-tab-cols);
}

.overview-tabs.records {
  grid-template-columns: var(--overview-record-tab-cols);
}

.overview-tabs .tab {
  min-width: 0;
  width: 100%;
  padding: 0 var(--overview-tab-pad-x);
  font-size: var(--overview-tab-font);
  font-weight: var(--overview-tab-weight);
}

.rank-expand {
  width: var(--rank-expand-size);
  height: var(--rank-expand-size);
  min-height: var(--rank-expand-size);
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(238, 233, 221, 0.58);
  color: var(--muted);
  padding: 0;
  font-size: var(--rank-expand-font);
  font-weight: 650;
}

.rank-expand.is-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.overview-note {
  margin: var(--overview-note-margin-top) 0 var(--overview-note-margin-bottom);
  color: var(--muted);
  font-size: var(--overview-note-font);
  font-weight: 400;
  line-height: var(--overview-note-line);
}

#overview .panel {
  padding: var(--overview-panel-pad);
  border-radius: var(--overview-panel-radius);
}

#overview .panel + .panel {
  margin-top: var(--overview-panel-space);
}

#overview .panel h2 {
  font-size: var(--overview-title-font);
}

#overview .panel-head {
  margin-bottom: var(--overview-head-margin);
}

#overview .tabs {
  gap: var(--overview-tabs-gap);
}

#overview .tab {
  height: var(--overview-tab-h);
}

.overview-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  isolation: isolate;
  margin-top: var(--overview-table-margin-top);
  border: var(--line-w) solid #ece6da;
  border-radius: var(--overview-table-radius);
  background: #fff;
}

.overview-table {
  min-width: var(--overview-table-min);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: 0;
  background: #fff;
}

.overview-table th,
.overview-table td {
  height: var(--overview-row-h);
  padding: 0 var(--overview-cell-pad-x);
  border-top: var(--hairline-w) dashed rgba(215, 207, 194, 0.58);
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--overview-body-font);
  font-weight: 400;
  line-height: 1.12;
}

.overview-table th:first-child,
.overview-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  width: var(--overview-sticky-col);
  min-width: var(--overview-sticky-col);
  max-width: var(--overview-sticky-col);
  font-size: var(--overview-first-font);
  background: #fffdfa;
  box-shadow: var(--hairline-w) 0 0 rgba(220, 212, 198, 0.74), 8px 0 10px rgba(248, 245, 239, 0.78);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.overview-table thead th {
  height: var(--overview-row-h);
  border-top: 0;
  color: var(--muted);
  background: #f3efe7;
  font-size: var(--overview-head-font);
  font-weight: 500;
}

.overview-table thead th:first-child {
  z-index: 3;
  background: #f3efe7;
}

.overview-table td.strong {
  font-weight: 520;
}

.overview-table .num-col {
  width: var(--overview-num-col);
}

.overview-table .name-col {
  width: var(--overview-name-col);
  white-space: normal;
  overflow-wrap: anywhere;
}

.overview-table .small-col {
  width: var(--overview-small-col);
}

.overview-table .a3-col {
  width: var(--overview-a3-col);
}

.overview-table .rebellion-col {
  width: var(--overview-rebellion-col);
}

.overview-table .danger {
  color: var(--red);
  font-weight: 820;
}

.records-panel-head {
  align-items: baseline;
}

.records-total {
  color: var(--muted);
  font-size: var(--font-meta);
  font-weight: 500;
  white-space: nowrap;
}

.records-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 26px);
  margin-top: clamp(10px, 2vw, 16px);
  min-height: 32px;
}

.records-pagination[hidden] {
  display: none;
}

.records-page-button {
  position: relative;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #b8b3aa;
  display: inline-grid;
  place-items: center;
  padding: 0;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 400;
  line-height: 1;
}

.records-page-button:not(:disabled) {
  cursor: pointer;
}

.records-page-button:disabled {
  color: #ded9d1;
  cursor: default;
}

.records-page-button.active {
  color: var(--text);
  font-weight: 500;
}

.records-page-button.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 18px;
  height: var(--hairline-w);
  background: currentColor;
  transform: translateX(-50%);
}

.overview-table.player-metric-table {
  min-width: var(--overview-player-table-min);
}

.overview-table.player-metric-table th:not(:first-child),
.overview-table.player-metric-table td:not(:first-child) {
  width: var(--overview-player-col);
  min-width: var(--overview-player-col);
  max-width: var(--overview-player-col);
  padding: 0 max(var(--overview-player-cell-min-pad-x), calc(var(--overview-cell-pad-x) - var(--overview-player-cell-pad-trim)));
}

.overview-table.player-metric-table th:not(:first-child) {
  font-size: var(--overview-player-head-font);
}

.overview-table.player-metric-table td.metric-muted {
  color: #b3ada3;
}

.match-row {
  display: grid;
  grid-template-columns: var(--match-row-date-col) 1fr auto;
  align-items: center;
  gap: var(--match-row-gap);
  padding: var(--match-row-pad-y) var(--match-row-pad-x);
}

.date {
  font-size: var(--match-row-date-font);
  font-weight: 850;
}

.record-date-with-photo {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.record-photo-indicator {
  position: absolute;
  left: calc(100% + 5px);
  top: 50%;
  display: inline-flex;
  width: 13px;
  height: 13px;
  color: #5f5b54;
  opacity: 1;
  transform: translateY(-50%);
}

.record-photo-indicator[hidden] {
  display: none;
}

.record-photo-indicator svg {
  width: 100%;
  height: 100%;
}

.sub {
  color: var(--muted);
  font-size: var(--match-row-sub-font);
  font-weight: 700;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pill-h);
  padding: 0 var(--pill-pad-x);
  border-radius: var(--radius-pill);
  background: var(--soft);
  color: var(--muted);
  font-size: var(--pill-font);
  font-weight: 850;
  white-space: nowrap;
}

.login {
  min-height: var(--login-min-h);
  display: grid;
  align-content: center;
  gap: var(--login-gap);
  justify-items: center;
  padding: 0 var(--login-pad-x);
}

.login-card {
  width: var(--login-card-w);
  display: grid;
  gap: var(--login-card-gap);
  padding: var(--login-card-pad);
  border: var(--line-w) solid rgba(222, 215, 202, 0.78);
  border-radius: var(--login-card-radius);
  background: rgba(255, 253, 250, 0.58);
  box-shadow: 0 10px 26px rgba(36, 30, 18, 0.035);
}

.login-title {
  text-align: center;
  margin-bottom: 0;
}

.login-title h1 {
  margin: 0 0 var(--login-title-gap);
  font-size: var(--login-title-font);
  font-weight: 760;
  letter-spacing: 0;
}

.member-strip {
  display: grid;
  grid-template-columns: var(--member-strip-cols);
  gap: var(--member-strip-gap);
}

.member-chip {
  min-width: 0;
  min-height: var(--member-chip-min-h);
  border: 0;
  border-radius: var(--member-chip-radius);
  background: transparent;
  color: var(--text);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--member-chip-gap);
}

.member-chip.active {
  background: transparent;
}

.member-chip .avatar {
  width: var(--member-avatar-size);
  height: var(--member-avatar-size);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--member-avatar-font);
}

.member-chip strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--member-chip-name-font);
  font-weight: 650;
}

.member-chip.active strong {
  color: var(--text);
  font-weight: 760;
}

.login-title p {
  margin: 0;
  color: var(--muted);
  font-size: var(--login-title-sub-font);
  font-weight: 400;
}

.field,
.confirm-bar {
  width: 100%;
  height: var(--login-field-h);
  border-radius: var(--login-field-radius);
  border: var(--line-w) solid rgba(222, 215, 202, 0.78);
  background: rgba(255, 253, 250, 0.76);
  text-align: center;
  color: var(--text);
  font-weight: 400;
  font-size: var(--font-ios-input);
}

.login-error {
  min-height: var(--login-error-min-h);
  margin: var(--login-error-shift-y) 0 0;
  color: #b84a4a;
  font-size: var(--font-mini);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.login-error.visible {
  opacity: 1;
}

.confirm-bar {
  margin-top: var(--login-confirm-margin-top);
  border-color: rgba(60, 116, 85, 0.2);
  background: rgba(60, 116, 85, 0.86);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--login-confirm-font);
  font-weight: 560;
}

.menu-panel {
  padding: var(--menu-panel-pad);
}

.menu-list {
  display: grid;
  gap: var(--menu-list-gap);
}

.menu-item {
  min-height: var(--menu-row-h);
  border: 0;
  border-radius: var(--menu-row-radius);
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-columns: var(--menu-icon-col) 1fr var(--menu-arrow-col);
  align-items: center;
  gap: var(--menu-row-gap);
  padding: var(--menu-row-pad-y) var(--menu-row-pad-x);
  text-align: left;
  font: inherit;
}

.menu-item:active {
  background: rgba(238, 233, 221, 0.42);
}

.menu-icon {
  width: var(--menu-icon-size);
  height: var(--menu-icon-size);
  border-radius: 50%;
  border: var(--line-w) solid rgba(222, 215, 202, 0.86);
  background: rgba(255, 253, 250, 0.82);
  color: var(--muted);
  display: inline-grid;
  place-items: center;
}

.menu-icon svg {
  width: var(--menu-svg-size);
  height: var(--menu-svg-size);
  display: block;
}

.menu-text {
  display: grid;
  gap: 0;
}

.menu-title {
  font-size: var(--menu-title-font);
  font-weight: 680;
}

.menu-arrow {
  color: rgba(141, 136, 126, 0.72);
  font-size: var(--menu-arrow-font);
  font-weight: 400;
}

.admin-panel {
  padding: var(--admin-panel-pad);
}

.member-account-panel {
  display: none;
}

body.role-member .admin-account-panel {
  display: none;
}

body.role-member .member-account-panel {
  display: block;
}

.admin-view-label {
  margin: var(--admin-view-label-margin);
  color: var(--muted);
  font-size: var(--font-meta);
  font-weight: 500;
}

.admin-section {
  display: grid;
  gap: var(--admin-section-gap);
}

.admin-section + .admin-section {
  margin-top: var(--admin-section-space);
  padding-top: var(--admin-section-space);
  border-top: var(--dash-line-w) dashed rgba(219, 211, 195, 0.72);
}

.admin-row {
  min-height: var(--admin-row-min-h);
  border-radius: var(--admin-row-radius);
  display: grid;
  grid-template-columns: var(--admin-icon-size) 1fr auto;
  align-items: center;
  gap: var(--admin-row-gap);
  padding: var(--admin-row-pad-y) var(--admin-row-pad-x);
}

.admin-row:active {
  background: rgba(238, 233, 221, 0.42);
}

.admin-avatar,
.admin-icon {
  width: var(--admin-avatar-size);
  height: var(--admin-avatar-size);
  border-radius: var(--admin-avatar-radius);
  border: var(--line-w) solid rgba(222, 215, 202, 0.86);
  background: rgba(255, 253, 250, 0.82);
  display: inline-grid;
  place-items: center;
  overflow: hidden;
}

.admin-avatar {
  font-size: var(--admin-avatar-font);
}

.admin-icon {
  color: var(--muted);
}

.admin-icon svg,
.admin-action svg {
  width: min(var(--admin-icon-max), calc(var(--admin-action-size) - var(--admin-icon-inset)));
  height: min(var(--admin-icon-max), calc(var(--admin-action-size) - var(--admin-icon-inset)));
  display: block;
}

.admin-name {
  min-width: 0;
  font-size: var(--admin-name-font);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--admin-section-gap);
}

.admin-badge,
.admin-action {
  min-width: var(--admin-action-size);
  height: var(--admin-action-size);
  border-radius: 50%;
  border: var(--line-w) solid rgba(222, 215, 202, 0.86);
  background: rgba(255, 253, 250, 0.72);
  color: var(--muted);
  display: inline-grid;
  place-items: center;
  padding: 0 var(--admin-action-pad-x);
  font-size: var(--admin-badge-font);
  font-weight: 520;
  line-height: 1;
}

.admin-badge {
  height: var(--admin-badge-h);
  min-width: 0;
  border: 0;
  background: rgba(238, 233, 221, 0.66);
  border-radius: var(--radius-pill);
  padding: 0 var(--admin-action-pad-x);
}

.admin-action {
  width: var(--admin-action-size);
  padding: 0;
}

.admin-split-actions {
  display: grid;
  grid-template-columns: var(--admin-split-cols);
  gap: var(--admin-split-gap);
}

#admin .admin-account-panel,
:is(#member-manage, #recorder-manage, #venue-group-manage, #history-edit-manage, #review,
  #void-match-manage, #photo-manage, #photo-storage-audit, #active-match-manage) > .panel {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}

#admin .admin-account-panel {
  padding: clamp(12px, 2.5%, 24px);
}

.admin-control-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 3%, 24px);
  align-items: start;
}

.admin-control-column {
  min-width: 0;
  display: grid;
  grid-auto-rows: minmax(44px, auto);
  gap: 12px;
  align-content: start;
}

.admin-control-column .admin-name {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  line-height: 1.4;
}

.admin-actions-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-mini-button {
  min-height: var(--admin-mini-h);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 250, 0.78);
  color: var(--text);
  display: grid;
  grid-template-columns: var(--admin-mini-icon) auto;
  align-items: center;
  justify-content: center;
  gap: var(--admin-mini-gap);
  padding: 0 var(--admin-mini-pad-x);
  text-align: center;
}

.admin-mini-button:active {
  background: rgba(238, 233, 221, 0.42);
}

.admin-mini-button .admin-icon {
  width: var(--admin-mini-icon);
  height: var(--admin-mini-icon);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.admin-mini-button .admin-icon svg {
  width: var(--admin-mini-icon);
  height: var(--admin-mini-icon);
}

.admin-mini-button.text-only {
  grid-template-columns: var(--admin-single-cols);
}

.admin-member-row {
  grid-template-columns: var(--admin-single-cols);
  min-height: var(--admin-mini-h);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 250, 0.78);
  text-align: center;
  padding: 0 var(--admin-mini-pad-x);
}

.admin-capsule-row {
  grid-template-columns: var(--admin-single-cols);
  min-height: var(--admin-mini-h);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 250, 0.78);
  justify-content: center;
  padding: 0 var(--admin-mini-pad-x);
  text-align: center;
}

.member-manage-panel {
  padding: var(--admin-panel-pad);
}

.member-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--member-manager-head-gap);
  margin: var(--member-head-margin-top) 0 var(--admin-section-space);
}

.member-manager-head span {
  color: var(--muted);
  font-size: var(--member-head-font);
  font-weight: 500;
}

.member-manager-count {
  margin-left: auto;
  color: var(--muted);
  font-size: var(--member-head-font);
  font-weight: 500;
}

.storage-audit-section {
  gap: var(--admin-section-space);
}

.storage-audit-summary {
  border-left: 3px solid var(--gold);
  border-radius: var(--admin-row-radius);
  background: rgba(238, 233, 221, 0.48);
  color: var(--muted);
  padding: clamp(10px, 1.5vw, 14px) var(--admin-row-pad-x);
  font-size: var(--font-body);
  font-weight: 600;
  line-height: 1.45;
}

.storage-audit-actions > button[hidden] {
  display: none;
}

.storage-audit-list {
  display: grid;
  gap: 0;
}

.storage-audit-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--admin-row-gap);
  padding: var(--admin-row-pad-y) var(--admin-row-pad-x);
  min-width: 0;
}

.storage-audit-item-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.storage-audit-item + .storage-audit-item {
  border-top: var(--dash-line-w) dashed rgba(219, 211, 195, 0.64);
}

.storage-audit-item-copy strong {
  color: var(--text);
  font-size: var(--font-control);
  font-weight: 650;
}

.storage-audit-item-copy span {
  color: var(--muted);
  font-size: var(--font-meta);
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.storage-audit-cleanup-button {
  flex: 0 0 auto;
}

.storage-audit-wait {
  color: var(--muted);
  font-size: var(--font-meta);
  font-weight: 400;
  white-space: nowrap;
}

.member-add-button {
  width: var(--member-add-size);
  height: var(--member-add-size);
  border: var(--line-w) solid var(--line);
  border-radius: 50%;
  background: rgba(255, 253, 250, 0.82);
  color: var(--text);
  display: inline-grid;
  place-items: center;
  padding: 0;
  font-size: var(--member-add-font);
  font-weight: 420;
  line-height: 1;
}

.member-row {
  min-height: var(--admin-row-min-h);
  border-radius: var(--admin-row-radius);
  display: grid;
  grid-template-columns: var(--admin-icon-size) 1fr auto;
  align-items: center;
  gap: var(--admin-row-gap);
  padding: var(--admin-row-pad-y) var(--admin-row-pad-x);
}

.member-row + .member-row {
  border-top: var(--dash-line-w) dashed rgba(219, 211, 195, 0.64);
}

.venue-group-columns,
.venue-group-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) var(--admin-action-size);
  align-items: center;
  gap: var(--admin-row-gap);
}

.venue-group-columns {
  padding: 0 var(--admin-row-pad-x) 8px;
  color: var(--muted);
  font-size: var(--admin-name-font);
  font-weight: 650;
  text-align: center;
}

.venue-group-row {
  min-height: var(--admin-row-min-h);
  padding: var(--admin-row-pad-y) var(--admin-row-pad-x);
}

.venue-group-row + .venue-group-row {
  border-top: var(--dash-line-w) dashed rgba(219, 211, 195, 0.64);
}

.venue-group-source,
.venue-group-category {
  min-width: 0;
}

.venue-group-source {
  overflow-wrap: anywhere;
  font-size: var(--admin-name-font);
  font-weight: 600;
  text-align: center;
}

.venue-group-source input,
.venue-group-category input,
.venue-group-category select {
  width: 100%;
  min-height: var(--admin-mini-h);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 250, 0.78);
  color: var(--text);
  padding: 0 var(--admin-mini-pad-x);
  text-align: center;
  font-family: inherit;
  font-size: var(--admin-name-font);
  font-weight: 600;
  line-height: 1.2;
}

.venue-group-category {
  display: grid;
  gap: 6px;
}

.venue-group-category select {
  text-align-last: center;
}

.venue-group-category input[hidden] {
  display: none;
}

.venue-group-arrow {
  color: var(--muted);
  text-align: center;
}

.venue-group-actions {
  display: flex;
  justify-content: center;
  gap: var(--admin-section-gap);
  margin-top: var(--admin-section-space);
}

.venue-group-status {
  min-height: 1.5em;
  margin: var(--admin-section-space) 0 0;
  color: var(--muted);
  font-size: var(--member-head-font);
  font-weight: 500;
  text-align: center;
}

.venue-group-status.error {
  color: var(--red);
}

.member-text {
  min-width: 0;
  display: grid;
  gap: var(--member-text-gap);
}

.member-role-line {
  color: var(--muted);
  font-size: var(--member-role-font);
  font-weight: 400;
}

.member-role-toggle {
  min-width: var(--member-role-toggle-min);
  height: var(--member-role-toggle-h);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 250, 0.82);
  color: var(--muted);
  display: inline-grid;
  place-items: center;
  padding: 0 var(--member-role-toggle-pad-x);
  font-size: var(--member-role-toggle-font);
  font-weight: 560;
  white-space: nowrap;
}

.member-role-toggle.recorder {
  background: rgba(49, 111, 79, 0.12);
  border-color: rgba(49, 111, 79, 0.28);
  color: var(--felt);
}

.member-row.disabled .admin-avatar,
.member-row.disabled .admin-name,
.member-row.disabled .member-role-line {
  opacity: 0.46;
}

.account-profile {
  display: grid;
  grid-template-columns: var(--account-profile-avatar) 1fr;
  align-items: center;
  gap: var(--account-profile-gap);
  padding: var(--account-profile-pad-y) var(--account-profile-pad-x) var(--account-profile-pad-bottom);
}

.account-profile .admin-avatar {
  width: var(--account-profile-avatar);
  height: var(--account-profile-avatar);
  border-radius: var(--account-profile-radius);
  font-size: var(--account-profile-avatar-font);
}

.account-profile-text {
  min-width: 0;
  display: grid;
  gap: var(--member-text-gap);
}

.account-profile-text .admin-name {
  font-size: var(--account-profile-name-font);
  font-weight: 700;
  line-height: 1.1;
}

.account-actions {
  display: grid;
  gap: var(--account-actions-gap);
  padding: 0 var(--micro-pad-inline) var(--account-actions-pad-bottom);
}

#account .panel {
  width: 100%;
  max-width: var(--account-panel-max);
  margin-inline: auto;
}

.member-form-box {
  width: var(--member-form-box-w);
  padding: var(--member-form-pad);
  gap: var(--member-form-gap);
}

.member-form-status {
  min-height: var(--member-form-status-min-h);
  color: var(--text);
  font-size: var(--member-form-status-font);
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
}

.member-form-status.error {
  color: var(--red);
}

.member-form-status.success {
  color: var(--green-deep);
}

.member-form-fields {
  display: grid;
  gap: var(--member-form-field-gap);
  justify-items: center;
}

.member-form-fields input {
  width: var(--member-form-input-w);
  height: var(--member-form-input-h);
  border: var(--line-w) solid var(--line);
  border-radius: var(--login-field-radius);
  background: rgba(255, 253, 250, 0.94);
  color: var(--text);
  text-align: center;
  outline: none;
  font-size: var(--member-form-input-font);
  font-weight: 500;
}

.member-form-fields input::placeholder {
  color: rgba(141, 136, 126, 0.72);
}

.member-form-box.mismatch .member-form-fields input {
  border-color: rgba(185, 76, 69, 0.55);
  background: rgba(185, 76, 69, 0.06);
}

.member-emoji-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--member-picker-icon), var(--member-picker-icon)));
  width: 100%;
  max-width: var(--member-picker-max);
  justify-content: center;
  gap: var(--member-picker-gap);
}

.member-emoji-picker button {
  width: var(--member-picker-icon);
  height: var(--member-picker-icon);
  border: var(--line-w) solid rgba(222, 215, 202, 0.82);
  border-radius: var(--member-picker-radius);
  background: rgba(255, 253, 250, 0.88);
  display: grid;
  place-items: center;
  padding: var(--member-picker-pad);
  font-size: var(--member-picker-font);
  overflow: hidden;
}

.member-emoji-picker button.active {
  background: rgba(49, 111, 79, 0.12);
  border-color: rgba(49, 111, 79, 0.48);
  box-shadow: 0 0 0 2px rgba(49, 111, 79, 0.08);
}

.member-emoji-picker button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.review-summary {
  display: grid;
  grid-template-columns: var(--review-summary-cols);
  gap: var(--review-summary-gap);
  margin-bottom: var(--review-list-gap);
}

.review-stat {
  min-height: var(--review-stat-h);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 250, 0.72);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: var(--review-stat-font);
  font-weight: 520;
  white-space: nowrap;
}

.review-list {
  display: grid;
  gap: var(--review-list-gap);
}

.review-card {
  border: var(--line-w) solid #e7e0d3;
  border-radius: var(--review-card-radius);
  background: rgba(255, 253, 250, 0.72);
  padding: var(--review-card-pad);
  display: grid;
  gap: var(--review-card-gap);
}

.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--review-head-gap);
}

.review-date {
  font-size: var(--review-date-font);
  font-weight: 620;
}

.review-tag {
  min-height: var(--review-tag-h);
  padding: 0 var(--review-tag-pad-x);
  border-radius: var(--radius-pill);
  background: var(--soft);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  font-size: var(--review-tag-font);
  font-weight: 520;
  white-space: nowrap;
}

.review-compare {
  display: grid;
  grid-template-columns: var(--review-compare-cols);
  gap: var(--review-compare-gap);
}

.review-option {
  border: var(--dash-line-w) dashed rgba(215, 207, 194, 0.72);
  border-radius: var(--review-option-radius);
  padding: var(--review-option-pad);
  min-width: 0;
}

.review-option strong {
  display: block;
  margin-bottom: var(--review-option-title-gap);
  font-size: var(--review-option-title-font);
  font-weight: 650;
}

.review-option p {
  margin: 0;
  color: var(--muted);
  font-size: var(--review-option-body-font);
  font-weight: 400;
  line-height: 1.35;
}

.review-diff {
  min-height: var(--review-diff-min-h);
  border-radius: var(--review-option-radius);
  background: rgba(238, 233, 221, 0.38);
  color: var(--muted);
  display: flex;
  align-items: center;
  padding: var(--review-diff-pad-y) var(--review-diff-pad-x);
  font-size: var(--review-option-body-font);
  font-weight: 400;
  line-height: 1.25;
}

.review-diff strong {
  color: var(--text);
  font-weight: 560;
  margin-right: var(--review-diff-strong-gap);
  white-space: nowrap;
}

.review-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--review-action-min), 1fr));
  gap: var(--review-summary-gap);
}

.review-action {
  min-height: var(--review-action-h);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 250, 0.78);
  color: var(--text);
  font-size: var(--review-action-font);
  font-weight: 650;
}

.import-panel {
  padding: var(--import-panel-pad);
}

.import-modal-box {
  width: var(--import-modal-w);
  min-height: 0;
  border-radius: var(--import-modal-radius);
  padding: var(--import-modal-pad);
  box-sizing: border-box;
  gap: var(--import-modal-gap);
}

.export-modal-box {
  width: var(--export-modal-w);
  padding: var(--export-modal-pad);
  gap: var(--export-modal-gap);
}

.import-picker {
  min-height: var(--import-picker-h);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 250, 0.78);
  color: var(--text);
  display: grid;
  place-items: center;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  font-size: var(--import-picker-font);
  font-weight: 650;
  padding: 0 var(--import-picker-pad-x);
  text-align: center;
  overflow-wrap: anywhere;
}

.import-picker .admin-icon,
.import-picker .admin-icon svg {
  width: var(--import-picker-icon);
  height: var(--import-picker-icon);
}

.import-preview {
  display: grid;
  gap: var(--import-preview-gap);
  width: 100%;
}

.import-file {
  min-height: var(--import-file-min-h);
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: var(--import-file-font);
  font-weight: 400;
  text-align: center;
  line-height: 1.35;
  white-space: pre-line;
}

.import-file.error {
  color: var(--red);
}

.match-image-import-panel {
  display: grid;
  gap: 14px;
}

.match-image-import-status {
  min-height: 46px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: var(--font-meta);
  font-weight: 450;
  text-align: center;
}

.match-image-import-status.error {
  color: var(--red);
}

.match-image-review[hidden],
.match-image-import-file {
  display: none !important;
}

.match-image-review {
  display: grid;
  gap: 14px;
}

.match-image-review-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.match-image-review-fields label,
.match-image-round-head label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: var(--font-meta);
  font-weight: 500;
}

.match-image-review-fields input,
.match-image-review-fields select,
.match-image-round-head select,
.match-image-hand-table select {
  width: 100%;
  min-width: 0;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--input-radius);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--font-body);
  font-weight: 450;
  padding: 0 10px;
}

.match-image-players {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.match-image-player-select {
  display: grid;
  gap: 4px;
}

.match-image-player-select span {
  color: var(--muted);
  font-size: var(--font-meta);
  text-align: center;
}

.match-image-player-select select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font: inherit;
  font-size: var(--font-body);
  font-weight: 550;
  text-align: center;
  padding: 0 8px;
}

.match-image-player-select.blue select { color: var(--blue); }
.match-image-player-select.red select { color: var(--red); }

.match-image-warnings {
  padding: 9px 10px;
  border-left: 3px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  color: var(--muted);
  font-size: var(--font-meta);
  line-height: 1.55;
}

.match-image-rounds {
  display: grid;
  gap: 10px;
}

.match-image-round-card {
  border: 1px solid var(--line);
  border-radius: var(--list-card-radius);
  overflow: hidden;
  background: var(--paper);
}

.match-image-round-head {
  display: flex;
  align-items: end;
  justify-content: flex-start;
  gap: 10px;
  padding: 9px 10px;
  background: var(--paper-strong);
}

.match-image-round-head strong {
  font-size: var(--font-panel-title);
}

.match-image-round-head label {
  width: auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.match-image-round-head label select {
  width: 108px;
}

.match-image-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.match-image-hand-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  table-layout: fixed;
}

.match-image-hand-table th,
.match-image-hand-table td {
  height: 42px;
  padding: 4px 5px;
  border-top: 1px dashed var(--line);
  text-align: center;
  font-size: var(--font-body);
}

.match-image-hand-table thead th {
  color: var(--muted);
  font-size: var(--font-meta);
  border-top: 0;
}

.match-image-hand-table th:first-child { width: 48px; }
.match-image-hand-table th:nth-child(2) { width: 72px; }
.match-image-hand-table th:nth-last-child(-n + 2) { width: 42px; }
.match-image-hand-table .blue { color: var(--blue); }
.match-image-hand-table .red { color: var(--red); }
.match-image-hand-table select { height: 32px; padding: 0 5px; text-align: center; }

.match-image-rebellion {
  width: 22px;
  height: 22px;
  accent-color: var(--green);
}

.match-image-insert-hand,
.match-image-remove-hand {
  position: relative;
}

.match-image-insert-hand::after,
.match-image-remove-hand::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 3px);
  z-index: 3;
  width: max-content;
  max-width: 120px;
  padding: 4px 6px;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  color: var(--muted);
  box-shadow: 0 3px 8px rgba(37, 44, 39, 0.05);
  font-size: var(--font-mini);
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.match-image-insert-hand:hover::after,
.match-image-insert-hand:focus-visible::after,
.match-image-remove-hand:hover::after,
.match-image-remove-hand:focus-visible::after {
  opacity: 0.82;
  transform: translateY(0);
}

.match-image-review-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.match-image-review-summary {
  padding: 13px 15px;
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  background: color-mix(in srgb, var(--gold) 9%, var(--paper));
  color: var(--ink);
  font-size: var(--font-body);
  font-weight: 650;
  line-height: 1.58;
  text-align: left;
  white-space: pre-line;
}

.match-image-review-summary.ready {
  border-left-color: var(--green);
  background: color-mix(in srgb, var(--green) 8%, var(--paper));
}

.match-image-round-card > .admin-mini-button {
  width: calc(100% - 20px);
  min-height: 36px;
  margin: 8px 10px 10px;
}

@media (max-width: 620px) {
  .match-image-review-fields { grid-template-columns: 1fr; }
  .match-image-players { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.import-actions {
  display: flex;
  justify-content: center;
  gap: var(--import-actions-gap);
}

.import-action {
  width: var(--import-action-size);
  height: var(--import-action-size);
  border: var(--line-w) solid var(--line);
  border-radius: 50%;
  background: rgba(255, 253, 250, 0.78);
  color: var(--text);
  display: grid;
  place-items: center;
  padding: 0;
  font-size: var(--import-action-font);
  font-weight: 500;
  line-height: 1;
}

.import-action svg {
  width: var(--import-action-svg);
  height: var(--import-action-svg);
  display: block;
}

.import-action.confirm {
  color: var(--text);
}

.import-file-input {
  display: none;
}

.account-modal-box {
  width: var(--account-modal-w);
  min-height: 0;
  border-radius: var(--account-modal-radius);
  padding: var(--account-modal-pad);
  box-sizing: border-box;
  gap: var(--account-modal-gap);
}

.confirm-box.account-modal-box {
  width: var(--account-modal-w);
  min-height: 0;
  border-radius: var(--account-modal-radius);
  padding: var(--account-modal-pad);
  box-sizing: border-box;
  gap: var(--account-modal-gap);
}

.confirm-box.emoji-modal-box {
  width: calc(var(--emoji-modal-w) + var(--editor-width-growth));
  grid-template-rows: auto minmax(0, 1fr) auto;
}

#password-modal.open,
#add-member-modal.open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--modal-top, max(var(--modal-safe-top-min), calc(env(safe-area-inset-top) + var(--modal-safe-top-offset))));
}

.confirm-box.password-modal-box {
  width: var(--editor-compact-w);
}

.password-fields {
  gap: var(--editor-field-gap);
}

.password-fields input {
  max-width: 100%;
  height: var(--editor-field-h);
  border-radius: var(--editor-field-radius);
}

.account-modal-title {
  color: var(--text);
  font-size: var(--account-title-font);
  font-weight: 560;
  line-height: 1.2;
  text-align: center;
}

#password-modal.mismatch .account-input {
  border-color: rgba(186, 68, 62, 0.48);
  background: rgba(186, 68, 62, 0.06);
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: var(--emoji-option-gap);
  justify-items: center;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.emoji-option {
  width: min(100%, var(--emoji-option-size));
  height: auto;
  aspect-ratio: 1;
  border: var(--line-w) solid var(--line);
  border-radius: var(--emoji-option-radius);
  background: rgba(255, 253, 250, 0.78);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  font-size: var(--emoji-option-font);
  overflow: hidden;
  padding: var(--emoji-option-pad);
}

.emoji-option.active {
  border-color: rgba(49, 111, 79, 0.55);
  background: rgba(49, 111, 79, 0.1);
  box-shadow: 0 0 0 2px rgba(49, 111, 79, 0.14);
}

.avatar img,
.rank-avatar img,
.admin-avatar img,
.emoji-option img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

[data-avatar-preview] {
  cursor: zoom-in;
}

.avatar-preview-box {
  width: var(--avatar-preview-w);
  min-height: 0;
  border-radius: var(--avatar-preview-radius);
  padding: var(--avatar-preview-pad);
  gap: var(--avatar-preview-gap);
}

.avatar-preview-name {
  color: var(--text);
  font-size: var(--avatar-preview-name-font);
  font-weight: 620;
  line-height: 1.2;
}

.avatar-preview-frame {
  width: var(--avatar-preview-frame);
  height: var(--avatar-preview-frame);
  border: var(--line-w) solid var(--line);
  border-radius: var(--avatar-preview-frame-radius);
  background: rgba(255, 253, 250, 0.92);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: var(--avatar-preview-frame-font);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.avatar-preview-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  -webkit-user-select: auto;
  user-select: auto;
  -webkit-touch-callout: default;
}

.account-modal-box .confirm-actions {
  gap: var(--account-confirm-gap);
}

.emoji-modal-box .confirm-actions {
  margin-top: 0;
}

.account-modal-box .confirm-icon {
  width: var(--account-confirm-icon);
  height: var(--account-confirm-icon);
  padding: 0;
  font-size: var(--account-confirm-font);
}

.stats-grid {
  display: grid;
  grid-template-columns: var(--stats-grid-cols);
  gap: var(--player-stat-gap);
}

.stat {
  min-height: var(--player-stat-min-h);
  border: var(--line-w) solid #e7e0d3;
  border-radius: var(--player-stat-radius);
  padding: 0 var(--player-stat-pad-x);
  display: grid;
  grid-template-columns: var(--stat-item-cols);
  align-items: center;
  gap: var(--player-stat-gap);
}

.stat span {
  color: var(--muted);
  font-size: var(--player-stat-label-font);
  font-weight: 400;
  white-space: nowrap;
}

.stat .stat-rank-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.stat-rank-label .player-rank-medal {
  width: 1.15em;
  height: 1.15em;
}

.stat strong {
  font-size: var(--player-stat-value-font);
  font-weight: 700;
  line-height: 1;
  text-align: right;
}

.player-card {
  padding: var(--player-card-pad);
  scroll-margin-top: calc(var(--page-pad-top) + clamp(48px, 12vw, 72px));
}

.player-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--player-head-margin);
}

.player-id {
  display: flex;
  align-items: center;
  gap: var(--player-head-gap);
  min-width: 0;
}

.player-id h2 {
  max-width: min(38vw, 180px);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--player-name-size);
  font-weight: 780;
  line-height: 1;
}

.player-name-with-medals {
  display: flex;
  align-items: center;
  gap: clamp(3px, 0.8vw, 5px);
  min-width: 0;
}

.player-rank-medals {
  display: inline-flex;
  gap: 2px;
  flex: 0 0 auto;
}

.player-rank-medal {
  width: var(--player-medal-size);
  height: var(--player-medal-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.player-rank-medal.is-empty {
  visibility: hidden;
}

.player-rank-medal .rank-trophy {
  width: 100%;
  height: 100%;
}

.avatar {
  width: var(--avatar-base-size);
  height: var(--avatar-base-size);
  border-radius: var(--avatar-base-radius);
  border: var(--line-w) solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  font-size: var(--avatar-base-font);
  overflow: hidden;
}

.player-card .avatar {
  width: var(--player-avatar-size);
  height: var(--player-avatar-size);
  border-radius: var(--player-avatar-radius);
  font-size: var(--player-avatar-font);
}

.player-card .avatar[data-player-jump] {
  cursor: pointer;
}

.player-status {
  color: var(--muted);
  font-size: var(--player-status-font);
  font-weight: 400;
  opacity: 0.72;
}

.dates {
  display: none;
}

.player-card.open .dates {
  display: block;
  margin-top: var(--player-dates-margin-top);
  padding-top: var(--player-dates-pad-top);
  border-top: var(--dash-line-w) dashed rgba(219, 211, 195, 0.8);
  color: var(--muted);
  font-size: var(--player-dates-font);
  font-weight: 400;
  line-height: var(--player-dates-line);
}

.player-trends {
  display: none;
}

.player-card.open .player-trends {
  display: grid;
  gap: clamp(10px, 2vw, 14px);
  margin-top: clamp(10px, 2vw, 14px);
  padding-top: clamp(10px, 2vw, 14px);
  border-top: var(--dash-line-w) dashed rgba(219, 211, 195, 0.8);
}

.player-trends-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.player-trends-head strong {
  color: var(--text);
  font-size: clamp(13px, 3.3vw, 15px);
  line-height: 1.1;
  font-weight: 620;
}

.player-trends-head span {
  color: var(--muted);
  font-size: var(--font-mini);
  font-weight: 500;
  white-space: nowrap;
}

.player-trend-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(9px, 1.8vw, 12px);
}

.player-trend-chart {
  min-width: 0;
  border: var(--line-w) solid #e7e0d3;
  border-radius: var(--panel-radius);
  background: rgba(255, 253, 250, 0.54);
  padding: clamp(8px, 1.7vw, 11px);
}

.player-trend-title {
  margin-bottom: clamp(5px, 1vw, 7px);
  color: var(--text);
  font-size: clamp(12px, 3vw, 13px);
  font-weight: 620;
}

.player-trend-chart svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.player-trend-gridline {
  stroke: rgba(219, 211, 195, 0.92);
  stroke-width: var(--hairline-w);
  stroke-dasharray: 4 5;
}

.player-trend-axis,
.player-trend-date {
  fill: var(--muted);
  font-size: 8.8px;
  font-weight: 500;
}

.player-trend-path {
  fill: none;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.player-trend-rank-path {
  fill: none;
  stroke: rgba(202, 164, 59, 0.8);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 4 5;
}

.player-trend-path.avg,
.player-trend-path.firstRate {
  stroke: var(--blue);
}

.player-trend-dot.avg,
.player-trend-dot.firstRate {
  fill: var(--blue);
}

.player-trend-path.rate {
  stroke: var(--red);
}

.player-trend-dot.rate {
  fill: var(--red);
}

.player-trend-dot,
.player-trend-rank-point {
  cursor: help;
}

.player-trend-dot.last {
  stroke: #fffdfa;
  stroke-width: 2;
}

.player-trend-rank-dot {
  fill: rgba(202, 164, 59, 0.88);
  pointer-events: none;
  transition: transform 120ms ease, stroke-width 120ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

.player-trend-rank-hit {
  fill: transparent;
  pointer-events: all;
}

.player-trend-rank-point:hover .player-trend-rank-dot {
  transform: scale(1.35);
  stroke: #fffdfa;
  stroke-width: 1.4;
}

.player-trend-rank-tooltip {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  filter: drop-shadow(0 1px 2px rgba(44, 42, 38, 0.2));
}

.player-trend-rank-tooltip.is-visible {
  opacity: 1;
}

.player-trend-rank-tooltip rect {
  fill: #efede9;
  stroke: rgba(126, 120, 109, 0.46);
  stroke-width: 0.7;
}

.player-trend-rank-tooltip text {
  fill: #34383c;
  font-size: 8.4px;
  font-weight: 620;
  letter-spacing: 0;
}

.player-trend-value-label,
.player-trend-rank-label {
  font-size: 10.4px;
  font-weight: 760;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(255, 253, 250, 0.92);
  stroke-width: 3.2px;
  stroke-linejoin: round;
}

.player-trend-value-label.avg,
.player-trend-value-label.firstRate {
  fill: var(--blue);
}

.player-trend-value-label.rate {
  fill: var(--red);
}

.player-trend-rank-label {
  fill: rgba(168, 132, 40, 0.92);
}

.player-trend-empty {
  min-height: clamp(96px, 24vw, 122px);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: var(--font-mini);
  border: var(--line-w) dashed rgba(219, 211, 195, 0.8);
  border-radius: var(--panel-radius);
}

.dates-title {
  display: flex;
  justify-content: space-between;
  gap: var(--player-dates-title-gap);
  margin-bottom: var(--player-dates-title-margin);
  color: var(--text);
  font-weight: 500;
}

.date-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--player-date-link-col));
  justify-content: center;
  gap: var(--player-date-link-gap-y) var(--player-date-link-gap-x);
}

.date-link {
  border: 0;
  background: transparent;
  color: #6f6a62;
  padding: 0;
  font: inherit;
  font-weight: 400;
  text-align: left;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.16s ease;
}

.date-links:has(.date-link:hover) .date-link:not(:hover),
.date-links:has(.date-link:focus-visible) .date-link:not(:focus-visible) {
  color: #c7c0b6;
}

.date-links .date-link:hover,
.date-links .date-link:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

.dates-summary {
  width: var(--dates-summary-size);
  height: var(--dates-summary-size);
  border: 0;
  border-radius: 50%;
  background: rgba(238, 233, 221, 0.68);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: var(--dates-summary-font);
  font-weight: 650;
}

.scoreboard {
  display: grid;
  grid-template-columns: var(--match-score-cols);
  align-items: center;
  gap: var(--match-score-gap);
  margin-bottom: var(--match-score-margin-bottom);
}

.score {
  position: relative;
  min-height: var(--match-score-min-h);
  border-radius: var(--panel-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--match-score-font);
  font-weight: 900;
  border: var(--line-w) solid transparent;
}

.win-mark {
  position: absolute;
  left: var(--match-score-crown-left);
  top: var(--match-score-crown-top);
  width: var(--match-score-crown-size);
  height: var(--match-score-crown-size);
  color: var(--gold);
  line-height: 1;
}

.win-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(-45deg);
  transform-origin: 50% 50%;
}

.score.blue {
  color: var(--blue);
  background: #edf5fb;
  border-color: var(--blue);
}

.score.red {
  color: var(--red);
  background: #fbf0ef;
}

.score.winner.blue {
  border-color: var(--blue);
  background: #edf5fb;
  color: var(--blue);
}

.score.winner.red {
  border-color: var(--red);
  background: #fbf0ef;
  color: var(--red);
}

.score:not(.current):not(.winner) {
  border-color: transparent;
  background: rgba(244, 242, 238, 0.72);
  color: rgba(28, 38, 49, 0.52);
}

.score.current.blue {
  border-color: var(--blue);
  background: #edf5fb;
  color: var(--blue);
}

.score.current.red {
  border-color: var(--red);
  background: #fbf0ef;
  color: var(--red);
}

.colon {
  color: var(--muted);
  text-align: center;
  font-size: var(--match-colon-font);
  font-weight: 900;
}

.felt {
  height: var(--match-felt-height);
  position: relative;
  border-radius: var(--felt-radius);
  background:
    radial-gradient(circle at 48% 47%, rgba(255, 255, 255, 0.22), transparent 34%),
    linear-gradient(135deg, #6f8d70, #2e5749);
  overflow: hidden;
  margin-bottom: 0;
}

.felt::after {
  content: "";
  position: absolute;
  inset: var(--felt-ring-y) var(--felt-ring-x);
  border: var(--line-w) solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
}

.felt-chip {
  position: absolute;
  top: var(--felt-chip-edge);
  min-height: var(--felt-chip-h);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  color: white;
  border: var(--line-w) solid rgba(255, 255, 255, 0.25);
  padding: 0 var(--felt-chip-pad-x);
  display: inline-flex;
  align-items: center;
  gap: var(--felt-chip-gap);
  font-size: var(--felt-chip-font);
  font-weight: 900;
  z-index: 2;
}

.felt-chip.left {
  left: var(--felt-chip-edge);
}

.felt-chip.right {
  right: var(--felt-chip-edge);
}

.felt-lead-prompt {
  position: absolute;
  left: var(--felt-chip-edge);
  top: calc(var(--felt-chip-edge) + var(--felt-chip-h) + clamp(4px, 1.1vw, 6px));
  width: calc((var(--first-lead-pill-w) * 2) + var(--felt-chip-gap) + (var(--first-lead-pad-x) * 2));
  color: var(--felt-prompt-gold);
  font-size: var(--felt-chip-font);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  letter-spacing: 0;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}

.felt-lead-prompt.is-visible,
.felt-breath-prompt {
  animation: feltPromptBreath 5s ease-in-out infinite;
}

.felt-lead-prompt.is-visible {
  opacity: 1;
}

.shield-chip {
  min-width: var(--felt-shield-min-w);
  justify-content: center;
  padding: 0 calc(var(--felt-chip-pad-x) - var(--felt-shield-pad-trim));
  font-size: var(--felt-chip-font);
  transition: background 0.16s ease, border-color 0.16s ease;
}

.shield-chip.rebellion-blue {
  background: var(--blue);
  border-color: rgba(255, 255, 255, 0.48);
}

.shield-chip.rebellion-red {
  background: var(--red);
  border-color: rgba(255, 255, 255, 0.48);
}

.lite-icon {
  width: var(--lite-icon-size);
  height: var(--lite-icon-size);
  display: inline-block;
  vertical-align: middle;
}

.lite-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lite-icon.blue {
  color: var(--blue);
}

.lite-icon.red {
  color: var(--red);
}

.lite-icon.muted {
  color: var(--muted);
}

.shield-chip.rebellion-blue .lite-icon,
.shield-chip.rebellion-red .lite-icon {
  color: white;
}

.felt-chip .lite-icon.muted {
  color: rgba(255, 255, 255, 0.82);
}

.shield-chip .lite-icon.muted {
  color: rgba(196, 202, 196, 0.72);
}

.match-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--match-meta-gap);
  color: var(--muted);
  font-size: var(--font-meta);
  font-weight: 600;
}

.match-meta .lite-icon {
  width: var(--match-meta-icon-size);
  height: var(--match-meta-icon-size);
  color: var(--muted);
}

.match-meta-button {
  border: 0;
  padding: 0;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  text-align: left;
}

.match-meta-button [data-match-meta-text] {
  font-size: var(--brand-sub-font);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.match-meta-button .lite-icon,
.match-meta-button .sync-state {
  flex-shrink: 0;
}

.match-meta-button:active {
  opacity: 0.72;
}

.first-lead-lite {
  padding: 0 var(--first-lead-pad-x);
}

.first-lead-lite span {
  width: var(--first-lead-pill-w);
  height: var(--first-lead-pill-h);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.first-lead-lite .active-blue {
  color: #fff;
  background: rgba(40, 120, 173, 0.86);
}

.first-lead-lite .active-red {
  color: #fff;
  background: rgba(189, 86, 81, 0.86);
}

.felt-actions-lite {
  position: absolute;
  right: var(--felt-tool-edge);
  bottom: var(--felt-tool-edge);
  z-index: 3;
  display: flex;
  gap: var(--felt-tool-gap);
}

.felt-tool-lite {
  width: var(--felt-tool-size);
  height: var(--felt-tool-size);
  padding: 0;
  border: var(--line-w) solid rgba(255, 255, 255, 0.34);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  line-height: 1;
}

.felt-tool-lite .lite-icon {
  width: var(--felt-tool-icon);
  height: var(--felt-tool-icon);
}

.seat {
  position: absolute;
  min-width: var(--felt-seat-min-w);
  height: var(--felt-seat-h);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 250, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--felt-seat-gap);
  padding: 0 var(--felt-seat-pad-x);
  font-size: var(--felt-seat-font);
  font-weight: 950;
  z-index: 3;
}

.seat-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-card-back {
  position: absolute;
  width: var(--lead-card-mini-w);
  height: calc(var(--lead-card-mini-w) / 0.68);
  border-radius: max(2px, calc(var(--lead-card-mini-w) * 0.16));
  background: #fffdfa;
  border: 1px solid rgba(222, 215, 202, 0.95);
  box-shadow: 0 2px 4px rgba(31, 39, 48, 0.14);
  flex: 0 0 auto;
  pointer-events: none;
  overflow: hidden;
  z-index: 4;
}

.seat.left .lead-card-back {
  left: calc(100% + var(--lead-card-gap));
  top: 50%;
  transform: translateY(-50%);
}

.seat.right .lead-card-back {
  right: calc(100% + var(--lead-card-gap));
  top: 50%;
  transform: translateY(-50%);
}

.seat.top .lead-card-back {
  left: 50%;
  top: calc(100% + var(--lead-card-gap));
  transform: translateX(-50%);
}

.seat.bottom .lead-card-back {
  left: 50%;
  bottom: calc(100% + var(--lead-card-gap));
  transform: translateX(-50%);
}

.lead-card-back::before {
  content: "";
  position: absolute;
  inset: max(1px, calc(var(--lead-card-mini-w) * 0.08));
  border-radius: max(1px, calc(var(--lead-card-mini-w) * 0.08));
  background-color: var(--card-back-color);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    inset 0 0 0 3px var(--card-back-color),
    inset 0 0 0 4px rgba(255, 255, 255, 0.46);
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0 20%, rgba(255, 255, 255, 0.68) 21% 24%, transparent 25%),
    linear-gradient(90deg, transparent 0 46%, rgba(255, 255, 255, 0.45) 47% 53%, transparent 54%),
    linear-gradient(0deg, transparent 0 46%, rgba(255, 255, 255, 0.45) 47% 53%, transparent 54%);
  background-size: 100% 100%;
}

.lead-card-back::after {
  content: "";
  position: absolute;
  inset: max(3px, calc(var(--lead-card-mini-w) * 0.22));
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 1px;
}

.lead-card-back.blue {
  --card-back-color: #1f477d;
}

.lead-card-back.red {
  --card-back-color: #bd5651;
}

.seat::before {
  content: "";
  width: var(--felt-seat-rank-size);
  height: var(--felt-seat-rank-size);
  border-radius: 50%;
  background: #aaa49a;
  flex: 0 0 auto;
}

.seat.blue {
  color: var(--blue);
}

.seat.red {
  color: var(--red);
}

.seat.rank-1::before,
.seat.rank-2::before,
.seat.rank-3::before,
.seat.rank-4::before {
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--felt-seat-rank-font);
  font-weight: 900;
}

.seat.blue.rank-1::before,
.seat.blue.rank-2::before,
.seat.blue.rank-3::before,
.seat.blue.rank-4::before {
  background: rgba(40, 119, 173, 0.88);
}

.seat.red.rank-1::before,
.seat.red.rank-2::before,
.seat.red.rank-3::before,
.seat.red.rank-4::before {
  background: rgba(189, 86, 81, 0.88);
}

.seat.rank-muted::before {
  background: #aaa49a !important;
  color: #fff;
}

.seat.rank-1::before {
  content: "1";
}

.seat.rank-2::before {
  content: "2";
}

.seat.rank-3::before {
  content: "3";
}

.seat.rank-4::before {
  content: "4";
}

.seat.top {
  top: var(--felt-seat-edge);
  left: 50%;
  transform: translateX(-50%);
}

.seat.left {
  left: var(--felt-seat-edge);
  top: 50%;
  transform: translateY(-50%);
}

.seat.right {
  right: var(--felt-seat-edge);
  top: 50%;
  transform: translateY(-50%);
}

.seat.bottom {
  left: 50%;
  bottom: var(--felt-seat-edge);
  transform: translateX(-50%);
}

.felt-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--felt-center-gap);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--felt-center-font);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  z-index: 2;
}

.felt-center span:first-child {
  color: rgba(255, 255, 255, 0.56);
  font-size: var(--felt-center-sub-font);
  font-weight: 600;
}

.felt-breath-prompt {
  color: var(--felt-prompt-gold);
  font-size: var(--felt-center-font);
  font-weight: 700;
  line-height: 1.5;
}

.felt-tribute-text,
.felt-rank-entry-text {
  max-width: min(68vw, 260px);
  font-size: var(--felt-tribute-font);
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@keyframes feltPromptBreath {
  0%, 100% {
    opacity: 0.52;
    text-shadow: 0 0 0 rgba(228, 193, 90, 0);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(228, 193, 90, 0.38);
  }
}

.felt-progress {
  position: absolute;
  left: var(--felt-seat-edge);
  bottom: var(--felt-seat-edge);
  color: rgba(255, 255, 255, 0.48);
  font-size: var(--felt-center-sub-font);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  z-index: 2;
  pointer-events: none;
}

.felt-end-actions {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--felt-end-gap);
  z-index: 4;
}

.felt-end-button {
  position: relative;
  width: var(--felt-end-button-size);
  height: var(--felt-end-button-size);
  padding: 0;
  border: var(--line-w) solid rgba(255, 255, 255, 0.36);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  display: inline-grid;
  place-items: center;
  line-height: 0;
}

.end-symbol {
  flex: 0 0 var(--felt-end-icon-box);
  width: var(--felt-end-icon-box);
  height: var(--felt-end-icon-box);
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: translate(-50%, -50%);
}

.end-symbol svg {
  width: var(--felt-end-symbol-size);
  height: var(--felt-end-symbol-size);
  display: block;
  overflow: visible;
}

.match-status {
  min-height: var(--match-status-h);
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(141, 136, 126, 0.68);
  font-size: var(--match-status-font);
  font-weight: 550;
}

.felt-end-button.primary {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.felt-end-button.secondary {
  color: rgba(255, 255, 255, 0.62);
}

body.no-current-match .felt-center.hand-end-center {
  display: none;
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  place-items: center;
  background: rgba(31, 39, 48, 0.18);
  padding: clamp(14px, 4vw, 24px);
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.confirm-overlay.open {
  display: grid;
}

#app-confirm-modal {
  z-index: 90;
}

#app-confirm-modal.roomy-confirm .compact-confirm-box {
  width: min(280px, calc(100vw - 48px));
  min-height: clamp(148px, 42vw, 164px);
  padding: clamp(22px, 6vw, 28px);
  gap: clamp(18px, 5vw, 22px);
}

#app-confirm-modal.roomy-confirm .compact-confirm-box p {
  max-width: 17em;
  line-height: 1.65;
}

#match-meta-edit.open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: var(--meta-modal-top, max(var(--modal-safe-top-min), calc(env(safe-area-inset-top) + var(--modal-safe-top-offset))));
}

.confirm-box {
  width: var(--confirm-box-w);
  min-height: var(--confirm-box-min-h);
  max-height: calc(100dvh - max(28px, env(safe-area-inset-top)) - max(28px, env(safe-area-inset-bottom)));
  overflow: auto;
  border: var(--line-w) solid rgba(222, 215, 202, 0.95);
  border-radius: var(--confirm-box-radius);
  background: rgba(255, 253, 250, 0.96);
  box-shadow: 0 18px 50px rgba(31, 39, 48, 0.16);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--confirm-box-gap);
}

.confirm-box p {
  margin: 0;
  color: var(--text);
  font-size: var(--confirm-text-font);
  font-weight: 650;
  text-align: center;
}

.compact-confirm-box {
  width: var(--compact-confirm-w);
  min-height: var(--compact-confirm-min-h);
  border-radius: var(--compact-confirm-radius);
  gap: var(--compact-confirm-gap);
  box-sizing: border-box;
}

.compact-confirm-box p {
  font-size: var(--font-control);
  font-weight: 600;
}

.compact-confirm-box .confirm-actions {
  gap: var(--confirm-action-gap);
}

.compact-confirm-box .confirm-icon {
  width: var(--compact-confirm-icon);
  height: var(--compact-confirm-icon);
  padding: 0;
  font-size: var(--compact-confirm-icon-font);
}

.confirm-actions {
  display: flex;
  gap: var(--confirm-action-gap);
}

.confirm-icon {
  width: var(--confirm-icon-size);
  height: var(--confirm-icon-size);
  border: var(--line-w) solid var(--line);
  border-radius: 50%;
  background: #fffdfa;
  color: var(--muted);
  display: grid;
  place-items: center;
  padding: 0;
  font-size: var(--confirm-icon-font);
  font-weight: 500;
  line-height: 1;
}

.confirm-icon.confirm {
  color: var(--green);
}

.confirm-icon.confirm.ready,
.import-action.confirm.ready {
  border-color: rgba(49, 111, 79, 0.42);
  background: rgba(49, 111, 79, 0.14);
  color: var(--green);
  box-shadow: 0 0 0 2px rgba(49, 111, 79, 0.08);
}

.confirm-icon svg {
  width: var(--confirm-icon-svg);
  height: var(--confirm-icon-svg);
  display: block;
}

.meta-edit-box {
  width: calc(var(--editor-compact-w) + var(--editor-width-growth));
  box-sizing: border-box;
}

.meta-edit-fields {
  width: 100%;
  display: grid;
  gap: var(--editor-field-gap);
}

.meta-edit-fields label {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: var(--editor-field-gap);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.meta-edit-fields input:not(.meta-date-picker),
.meta-date-button {
  width: 100%;
  min-width: 0;
  height: var(--editor-field-h);
  border: var(--line-w) solid var(--line);
  border-radius: var(--editor-field-radius);
  background: rgba(255, 253, 250, 0.94);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  padding: 0 6px;
  outline: none;
}

.meta-date-picker {
  position: absolute;
  width: var(--meta-date-picker-size);
  height: var(--meta-date-picker-size);
  opacity: 0;
  pointer-events: none;
}

.meta-date-manual {
  display: none;
}

.meta-date-field.manual-date .meta-date-button {
  display: none;
}

.meta-date-field.manual-date .meta-date-manual {
  display: block;
}

.hand-edit-box {
  width: var(--hand-edit-w);
  min-height: auto;
  align-content: start;
  justify-items: stretch;
  gap: var(--hand-edit-gap);
  padding: var(--hand-edit-pad);
  border-radius: var(--compact-confirm-radius);
}

.hand-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hand-edit-head-gap);
}

.hand-edit-title {
  margin: 0;
  font-size: var(--hand-edit-title-font);
  font-weight: 760;
}

.hand-edit-shield {
  z-index: 3;
  cursor: pointer;
}

.hand-edit-shield.blue .lite-icon.muted {
  color: var(--blue);
}

.hand-edit-shield.red .lite-icon.muted {
  color: var(--red);
}

.hand-edit-shield .lite-icon {
  width: var(--hand-edit-shield-icon);
  height: var(--hand-edit-shield-icon);
}

.hand-edit-lead {
  z-index: 3;
  cursor: pointer;
}

.hand-edit-felt {
  position: relative;
  height: var(--hand-edit-felt-h);
  border-radius: var(--felt-radius);
  background:
    radial-gradient(circle at 48% 47%, rgba(255, 255, 255, 0.22), transparent 34%),
    linear-gradient(135deg, #6f8d70, #2e5749);
  overflow: hidden;
}

.hand-edit-felt::after {
  content: "";
  position: absolute;
  inset: var(--hand-edit-ring-y) var(--hand-edit-ring-x);
  border: var(--line-w) solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
}

.edit-seat {
  position: absolute;
  z-index: 2;
  min-width: var(--hand-edit-seat-min-w);
  height: var(--hand-edit-seat-h);
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 250, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--hand-edit-seat-gap);
  padding: 0 var(--hand-edit-seat-pad-x);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

.edit-seat.top {
  top: var(--hand-edit-seat-y);
  left: 50%;
  transform: translateX(-50%);
}

.edit-seat.left {
  top: 50%;
  left: var(--hand-edit-seat-edge);
  transform: translateY(-50%);
}

.edit-seat.right {
  top: 50%;
  right: var(--hand-edit-seat-edge);
  transform: translateY(-50%);
}

.edit-seat.bottom {
  bottom: var(--hand-edit-seat-y);
  left: 50%;
  transform: translateX(-50%);
}

.edit-rank-button {
  width: var(--hand-edit-rank-size);
  height: var(--hand-edit-rank-size);
  flex: 0 0 var(--hand-edit-rank-size);
  border: 0;
  border-radius: 50%;
  background: #a8a39b;
  color: #fffdfa;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: var(--font-caption);
  font-weight: 760;
  line-height: 1;
}

.edit-rank-button.blue {
  color: var(--blue);
}

.edit-rank-button.red {
  color: var(--red);
}

.edit-name-input {
  width: calc(var(--hand-edit-name-w) + 14px);
  height: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: center;
  outline: none;
  padding: 0 14px 0 0;
  font-size: var(--hand-edit-name-font);
  font-weight: 600;
}

.edit-name-input.blue {
  color: var(--blue);
}

.edit-name-input.red {
  color: var(--red);
}

.hand-edit-save {
  justify-self: center;
  width: var(--hand-edit-save-w);
  height: var(--hand-edit-save-h);
  border: 0;
  border-radius: var(--hand-edit-save-radius);
  background: rgba(63, 107, 85, 0.48);
  color: white;
  font-size: var(--font-control);
  font-weight: 760;
  cursor: pointer;
}

.hand-edit-save.is-dirty:not(:disabled) {
  background: var(--green);
}

.hand-edit-save:disabled {
  cursor: default;
}

[data-open-hand-edit] {
  cursor: pointer;
}

.mini-table {
  border: var(--line-w) solid var(--line);
  border-radius: var(--list-card-radius);
  overflow: hidden;
  background: rgba(255, 253, 250, 0.76);
}

.mini-row {
  min-height: var(--mini-row-h);
  display: grid;
  grid-template-columns: var(--mini-row-cols);
  align-items: center;
  gap: var(--mini-row-gap);
  padding: 0 var(--mini-row-pad-x);
  border-bottom: var(--dash-line-w) dashed #e2dacb;
  font-size: var(--mini-row-font);
  font-weight: 760;
}

.mini-row.head {
  background: var(--soft);
  color: var(--muted);
  font-weight: 900;
}

.mini-row:last-child {
  border-bottom: 0;
}

.round-record-card {
  margin-top: var(--round-card-margin);
  display: block;
  width: 100%;
  min-width: 0;
}

#match .match-live.panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.round-record-title {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--round-title-h);
  padding: 0 var(--round-title-pad-x);
  border: var(--line-w) solid #e7e0d4;
  border-bottom: 0;
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
  background: #f3efe7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--round-title-gap);
}

.round-record-title strong {
  font-size: var(--round-title-font);
}

.round-title-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--round-title-meta-gap);
}

.round-record-action {
  position: relative;
  width: var(--round-action-size);
  height: var(--round-action-size);
  border: var(--line-w) solid rgba(126, 117, 103, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  color: var(--green);
  display: inline-grid;
  place-items: center;
  font-size: 0;
  font-weight: 600;
  line-height: 0;
  padding: 0;
  cursor: pointer;
}

.round-record-action:not(.end)::before,
.round-record-action:not(.end)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--round-action-size) * 0.42);
  height: max(1.5px, calc(var(--round-action-size) * 0.08));
  border-radius: var(--radius-pill);
  background: currentColor;
  transform: translate(-50%, -50%);
}

.round-record-action:not(.end)::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.round-record-action.end {
  color: rgba(126, 117, 103, 0.68);
}

.round-record-action.end::before {
  content: "";
  width: var(--round-stop-size);
  height: var(--round-stop-size);
  flex: 0 0 var(--round-stop-size);
  border-radius: var(--round-stop-radius);
  background: currentColor;
}

.round-meta-pill {
  padding: var(--round-meta-pill-pad-y) var(--round-meta-pill-pad-x);
  border-radius: var(--radius-pill);
  color: #7c766c;
  background: rgba(255, 255, 255, 0.62);
  font-size: var(--round-meta-pill-font);
  font-style: normal;
  font-weight: 550;
}

.round-meta-pill.blue {
  color: var(--blue);
}

.round-meta-pill.red {
  color: var(--red);
}

.record-table {
  display: block;
  clear: both;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

.record-table table {
  min-width: var(--match-record-table-min);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: var(--line-w) solid #ece6da;
  border-radius: 0 0 var(--table-radius) var(--table-radius);
  overflow: hidden;
}

.record-table th,
.record-table td {
  height: var(--record-row-h);
  padding: 0 var(--record-cell-pad-x);
  border-top: var(--dash-line-w) dashed rgba(211, 202, 187, 0.46);
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #fff;
  color: var(--text);
  font-size: var(--record-font);
  font-weight: 500;
  line-height: 1.32;
}

.record-table thead th {
  border-top: 0;
  background: var(--soft);
  color: var(--muted);
  font-size: var(--record-font);
  font-weight: 500;
}

.record-table tr > :first-child {
  width: var(--match-record-index-col);
}

.record-table tr > :nth-child(2) {
  width: var(--match-record-score-col);
}

.record-table tr > :nth-child(3) {
  width: var(--match-record-shield-col);
}

.record-table tr > :nth-child(4),
.record-table tr > :nth-child(5),
.record-table tr > :nth-child(6),
.record-table tr > :nth-child(7) {
  width: var(--match-record-player-col);
}

.record-table tr > :nth-child(8) {
  width: var(--match-record-result-col);
}

.record-table tr > :last-child {
  width: var(--match-record-tribute-col);
}

.record-table th:last-child,
.record-table td:last-child {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.12;
}

.record-table thead .blue,
.record-table .level-text .blue.active {
  color: var(--blue);
}

.record-table thead .red,
.record-table .level-text .red.active {
  color: var(--red);
}

.record-table .level-text i {
  color: var(--muted);
  font-style: normal;
}

.record-table .level-text small {
  color: var(--muted);
}

.record-table b,
.record-table .result-text {
  font-size: var(--record-result-font);
  font-weight: 500;
}

.record-table .team-dot {
  width: var(--record-team-dot);
  height: var(--record-team-dot);
  vertical-align: var(--baseline-tight);
}

.team-dot {
  width: var(--team-dot-size);
  height: var(--team-dot-size);
  border-radius: 50%;
  display: inline-block;
  vertical-align: var(--baseline-dot);
}

.team-dot.blue {
  background: var(--blue);
}

.team-dot.red {
  background: var(--red);
}

.result-text.red {
  color: var(--red);
  font-weight: 760;
}

.result-text.blue {
  color: var(--blue);
  font-weight: 760;
}

.blue-text {
  color: var(--blue);
}

.red-text {
  color: var(--red);
}

.detail-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--detail-title-gap);
  flex-wrap: nowrap;
  margin-bottom: var(--detail-title-margin);
}

.detail-title > div:first-child,
.detail-meta-left {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: var(--detail-inline-gap);
}

.detail-title h2 {
  margin: 0;
  font-size: var(--detail-title-font);
  line-height: 1.1;
  font-weight: 700;
  white-space: nowrap;
}

.detail-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--detail-meta-gap);
  margin-bottom: var(--detail-meta-margin);
}

.detail-meta-left {
  color: var(--muted);
  font-size: var(--detail-meta-font);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-meta-left .lite-icon {
  width: var(--detail-meta-icon);
  height: var(--detail-meta-icon);
  color: var(--muted);
  flex: 0 0 auto;
}

.detail-meta-left.detail-recorded-meta {
  flex-wrap: wrap;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}

.team-line {
  margin-top: 0;
  font-size: var(--font-mini);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-team-line {
  margin-bottom: var(--detail-team-margin);
  font-size: var(--detail-team-font);
  font-weight: 600;
  line-height: 1.3;
}

.detail-title-line {
  display: flex;
  align-items: center;
  gap: var(--detail-meta-gap);
}

.detail-title-line [data-open-export-preview] {
  align-self: center;
  display: inline-flex;
  align-items: flex-end;
  height: calc(var(--brand-title-font) * 1.05);
  padding: 0;
}

.match-title-line {
  --match-title-icon-size: 24px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.match-title-line h1 {
  margin: 0 4px 0 0;
  flex: 0 0 auto;
}

.match-title-line .detail-photo-button,
.detail-title-line .detail-photo-button {
  width: clamp(42px, 8.4vw, 44px);
  min-width: clamp(42px, 8.4vw, 44px);
  height: clamp(42px, 8.4vw, 58px);
  border-radius: clamp(10px, 2vw, 14px);
  align-self: center;
  padding: 0;
}

.match-title-line .detail-photo-button svg,
.detail-title-line .detail-photo-button svg {
  width: 58%;
  height: 58%;
}

.match-top-actions .watch-match-back-button {
  width: var(--page-back-size);
  min-width: var(--page-back-size);
  height: var(--page-back-size);
  border-color: rgba(222, 215, 202, 0.82);
  border-radius: 999px;
  background: rgba(255, 253, 250, 0.6);
  color: rgba(126, 117, 103, 0.66);
  box-shadow: none;
  padding: 0;
}

.match-top-actions .watch-match-back-button svg {
  width: var(--page-back-icon);
  height: var(--page-back-icon);
}

#match .match-top-actions .watch-match-back-button {
  display: none;
}

body.match-back-visible #match .match-top-actions .watch-match-back-button {
  display: inline-grid;
}

.detail-note-button {
  margin-left: calc(-1 * clamp(7px, 1.4vw, 12px));
  line-height: 1;
}

.match-title-line .detail-note-button,
.detail-title-line .detail-note-button {
  margin-left: 0;
}

.detail-photo-button .detail-action-emoji {
  display: block;
  font-size: clamp(14px, 3.6vw, 16px);
  line-height: 1;
  transform: translateY(-1px);
}

.match-title-line .detail-photo-button .detail-action-emoji,
.detail-title-line .detail-photo-button .detail-action-emoji {
  font-size: clamp(24px, 4.9vw, 34px);
}

.match-title-line .detail-photo-button {
  width: calc(var(--match-title-icon-size) + 8px);
  min-width: calc(var(--match-title-icon-size) + 8px);
  flex: 0 0 calc(var(--match-title-icon-size) + 8px);
}

.match-title-line .detail-photo-button .detail-action-emoji {
  width: 1em;
  height: 1em;
  font-size: var(--match-title-icon-size);
  text-align: center;
}

@media (min-width: 760px) {
  .match-title-line {
    --match-title-icon-size: 34px;
  }
}

.detail-photo-button {
  width: clamp(24px, 5.6vw, 28px);
  min-width: clamp(24px, 5.6vw, 28px);
  height: clamp(22px, 5vw, 26px);
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: rgba(138, 133, 121, 0.78);
}

.detail-photo-button svg {
  width: clamp(14px, 3.6vw, 16px);
  height: clamp(14px, 3.6vw, 16px);
  display: block;
}

.detail-photo-button[hidden] {
  display: none;
}

.current-match-photo-button[hidden],
.current-match-note-button[hidden],
.current-match-photos[hidden],
.detail-match-photos[hidden],
.export-match-photos[hidden] {
  display: none !important;
}

.current-match-photos,
.detail-match-photos,
.export-match-photos {
  margin-top: var(--panel-gap, clamp(10px, 2vw, 16px));
}

.current-match-photo-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(108px, 100%), 1fr));
  gap: clamp(8px, 1.3vw, 14px);
}

.current-match-photo-card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 8px;
  border: var(--line-w) solid rgba(222, 215, 202, 0.9);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.current-match-photo-card .photo-thumb-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.current-match-photo-card .photo-thumb,
.current-match-photo-card .photo-thumb-fallback {
  border-radius: 10px;
}

.current-match-photo-card .photo-caption {
  color: var(--muted);
  font-size: var(--font-tiny);
  font-weight: 450;
}

.match-note-panel[hidden] {
  display: none !important;
}

.match-note-panel {
  margin-top: var(--panel-gap, clamp(10px, 2vw, 16px));
}

.match-note-body {
  color: var(--text);
  font-size: var(--detail-table-font);
  font-weight: 400;
  line-height: 1.55;
  white-space: pre-wrap;
}

.match-note-box {
  width: min(calc(clamp(292px, 48vw, 420px) + var(--editor-width-growth)), calc(100vw - 34px));
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}

.match-note-input {
  width: 100%;
  min-height: 0;
  height: clamp(120px, 28vw, 160px);
  max-height: 100%;
  resize: vertical;
  border: var(--line-w) solid var(--line);
  border-radius: var(--editor-field-radius);
  background: rgba(255, 253, 250, 0.96);
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  padding: 12px;
  outline: none;
}

.match-note-box .match-note-hint {
  min-height: 1.2em;
  margin: -4px 2px 0;
  color: rgba(138, 133, 121, 0.44);
  font-size: var(--font-tiny);
  font-weight: 400;
  text-align: right;
}

.match-note-box .match-note-hint.error {
  color: var(--red);
}

.current-match-photo-add-card {
  min-height: clamp(108px, 24vw, 132px);
  place-items: center;
  align-content: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
}

.current-match-photo-add-card svg {
  width: clamp(31px, 7.6vw, 34px);
  height: clamp(31px, 7.6vw, 34px);
  padding: clamp(7px, 1.8vw, 8px);
  border: var(--line-w) solid var(--line);
  border-radius: 50%;
  background: #fffdfa;
  color: var(--green);
}

@media (min-width: 720px) {
  .current-match-photo-list {
    grid-template-columns: repeat(auto-fit, minmax(128px, 160px));
  }
}

.detail-top-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--detail-meta-gap);
}

.void-state-badge {
  display: none;
  min-height: var(--detail-void-badge-h);
  padding: 0 var(--detail-void-badge-pad-x);
  border-radius: var(--radius-pill);
  background: rgba(238, 233, 221, 0.76);
  color: var(--muted);
  font-size: var(--font-mini);
  font-weight: 500;
  align-items: center;
}

#detail.voided .void-state-badge {
  display: inline-flex;
}

.void-note {
  display: none;
  margin: 0 0 var(--detail-void-note-margin);
  color: var(--muted);
  font-size: var(--font-mini);
  font-weight: 400;
  line-height: 1.35;
}

#detail.voided .void-note {
  display: block;
}

.void-admin-button {
  color: var(--muted);
}

[data-void-admin-badge] {
  display: none;
}

body.match-voided #admin [data-void-admin-badge] {
  display: inline-flex;
}

[data-void-row-badge] {
  display: none;
}

.void-match-row {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: var(--void-row-min-h);
  gap: var(--void-row-gap);
  padding: var(--void-row-pad-y) var(--void-row-pad-x);
}

.void-match-row + .void-match-row {
  border-top: var(--dash-line-w) dashed rgba(219, 211, 195, 0.64);
}

.void-match-row .admin-name {
  display: block;
  max-width: none;
}

.void-match-row .admin-actions {
  justify-self: end;
}

.void-match-row .admin-action {
  color: rgba(141, 136, 126, 0.72);
}

.void-match-row .admin-action:focus,
.void-match-row .admin-action:focus-visible {
  outline: 0;
  border-color: rgba(222, 215, 202, 0.86);
}

.void-match-row.voided [data-void-row-badge] {
  display: inline-flex;
}

.void-match-row.voided {
  opacity: 0.62;
}

.void-match-row.voided [data-open-void-match] {
  display: none;
}

.history-edit-impact {
  margin-top: var(--history-impact-margin-top);
  color: var(--muted);
  font-size: var(--history-impact-font);
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
}

.history-impact-list {
  display: grid;
  gap: var(--history-impact-list-gap);
  margin-top: var(--history-impact-list-margin);
  text-align: left;
}

.history-impact-summary {
  margin-top: var(--history-impact-summary-margin);
  color: rgba(141, 136, 126, 0.86);
  font-size: var(--history-impact-font);
  font-weight: 400;
  line-height: 1.35;
}

.history-impact-row {
  display: grid;
  grid-template-columns: var(--history-impact-row-label) minmax(0, 1fr);
  gap: var(--history-impact-row-gap);
  align-items: start;
}

.history-impact-row strong {
  color: var(--text);
  font-weight: 600;
}

.history-impact-values {
  min-width: 0;
  overflow-wrap: anywhere;
}

.history-impact-new {
  color: var(--text);
  font-weight: 600;
}

.history-impact-arrow {
  padding: 0 calc(var(--history-impact-row-gap) * 0.55);
  color: rgba(141, 136, 126, 0.7);
}

.history-save-note {
  margin-top: var(--history-save-note-margin);
  color: rgba(141, 136, 126, 0.82);
}

#history-edit-confirm .compact-confirm-box {
  width: var(--history-confirm-w);
  max-height: var(--history-confirm-max-h);
  padding: var(--history-confirm-pad);
  align-content: start;
  gap: var(--history-confirm-gap);
}

#history-edit-confirm .compact-confirm-box p {
  font-size: var(--history-confirm-title-font);
  line-height: 1.25;
}

#history-edit-confirm .history-edit-impact {
  width: 100%;
  max-height: var(--history-confirm-impact-max-h);
  overflow: auto;
  padding: 0 var(--micro-pad-inline);
  box-sizing: border-box;
  text-align: left;
}

#history-edit-confirm .history-impact-list {
  gap: var(--history-confirm-row-gap);
  margin-top: var(--history-impact-list-margin);
}

#history-edit-confirm .history-impact-row {
  grid-template-columns: var(--history-confirm-row-label) minmax(0, 1fr);
  gap: var(--history-confirm-row-gap);
  padding: var(--history-confirm-row-pad-y) var(--history-confirm-row-pad-x);
  border-radius: var(--history-confirm-row-radius);
  background: rgba(238, 233, 221, 0.35);
}

#history-edit-confirm .history-impact-row strong {
  font-size: var(--history-confirm-value-font);
}

#history-edit-confirm .history-impact-values {
  font-size: var(--history-confirm-value-font);
  line-height: 1.35;
}

#history-edit-confirm .confirm-actions {
  justify-content: center;
  margin-top: var(--history-confirm-actions-margin);
}

.app-toast {
  position: fixed;
  left: 50%;
  top: var(--toast-top);
  z-index: 70;
  transform: translate(-50%, calc(-1 * var(--toast-offset-y)));
  opacity: 0;
  pointer-events: none;
  border: var(--line-w) solid rgba(222, 215, 202, 0.86);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 249, 0.94);
  box-shadow: 0 12px 32px rgba(51, 42, 33, 0.13);
  color: var(--text);
  font-size: var(--font-caption);
  font-weight: 600;
  line-height: 1;
  padding: var(--toast-pad-y) var(--toast-pad-x);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.app-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.history-save-button,
[data-cancel-history-edit] {
  display: none;
}

#detail [data-open-history-edit] {
  display: none;
}

.match-image-preview-confirm {
  display: none;
}

#detail.match-image-preview [data-open-match-photos],
#detail.match-image-preview [data-open-detail-match-note],
#detail.match-image-preview [data-open-export-preview],
#detail.match-image-preview [data-open-history-edit],
#detail.match-image-preview [data-cancel-history-edit],
#detail.match-image-preview [data-save-history-edit],
#detail.match-image-preview .void-state-badge,
#detail.match-image-preview .void-note,
#detail.match-image-preview [data-detail-match-photos],
#detail.match-image-preview [data-detail-match-note] {
  display: none;
}

#detail.match-image-preview .match-image-preview-confirm {
  display: inline-grid;
  box-shadow: none;
}

#detail.match-image-preview .match-image-preview-confirm:disabled {
  opacity: 0.58;
  cursor: default;
}

body.history-editing [data-open-history-edit],
body.history-editing [data-open-export-preview],
body.history-editing [data-open-match-photos] {
  display: none;
}

#detail.history-editing [data-open-history-edit],
#detail.history-editing [data-open-export-preview],
#detail.history-editing [data-open-match-photos] {
  display: none;
}

#detail.history-editing .history-save-button,
.history-save-button.active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--history-save-button-h);
  padding: 0 var(--history-save-button-pad-x);
  border-radius: var(--radius-pill);
  background: rgba(238, 232, 221, 0.94);
  color: rgba(141, 136, 126, 0.92);
  font-size: var(--history-save-button-font);
  font-weight: 650;
  line-height: var(--history-save-button-h);
  border-color: rgba(222, 215, 202, 0.88);
}

#detail.history-editing .history-save-button[aria-disabled="true"],
.history-save-button.active[aria-disabled="true"] {
  opacity: 1;
  cursor: default;
}

#detail.history-editing .history-save-button.is-dirty,
.history-save-button.is-dirty {
  background: var(--green);
  border-color: var(--green);
  color: #fffdfa;
}

body.history-editing [data-open-history-hand-edit] {
  cursor: pointer;
}

body.history-editing [data-open-detail-meta] {
  cursor: pointer;
}

body.history-editing [data-open-detail-meta]:active {
  opacity: .72;
}

.history-edited-row {
  background: rgba(191, 77, 75, 0.06);
}

.history-log-list {
  display: grid;
  gap: var(--history-log-list-gap);
}

.history-log-item {
  padding: var(--history-log-item-pad-y) 2px;
  border-top: var(--dash-line-w) dashed rgba(219, 211, 195, 0.64);
  color: var(--muted);
  font-size: var(--history-log-item-font);
  font-weight: 400;
  line-height: 1.35;
}

.history-log-item:first-child {
  border-top: 0;
}

.history-edit-summary-button {
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0;
  color: inherit;
}

.history-edit-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--history-edit-actions-gap);
}

#history-edit-manage .void-match-row {
  text-align: left;
}

#history-edit-manage .void-match-row .admin-name {
  color: var(--text);
}

.history-edit-pencil {
  width: var(--void-action-size);
  height: var(--void-action-size);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 250, 0.78);
  color: var(--muted);
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}

.history-log-button {
  min-height: var(--history-log-button-h);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 250, 0.78);
  color: var(--muted);
  padding: 0 var(--history-log-button-pad-x);
  font-size: var(--history-log-button-font);
  font-weight: 600;
  white-space: nowrap;
}

.history-log-modal-box {
  width: var(--history-log-modal-w);
  min-height: var(--history-log-modal-min-h);
  max-height: var(--history-log-modal-max-h);
  padding: var(--history-log-modal-pad);
  align-content: start;
  gap: var(--history-log-modal-gap);
}

.history-log-modal-list {
  width: 100%;
  max-height: var(--history-log-modal-list-max-h);
  overflow: auto;
  display: grid;
  gap: var(--history-log-list-gap);
}


.history-edit-pencil svg {
  width: var(--history-pencil-icon);
  height: var(--history-pencil-icon);
}

.void-row-meta {
  display: block;
  margin-top: var(--void-meta-margin-top);
  color: var(--muted);
  font-size: var(--void-meta-font);
  font-weight: 400;
  line-height: 1.25;
}

.void-row-players {
  display: block;
  margin-top: var(--void-meta-margin-top);
  font-size: var(--void-meta-font);
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.void-section {
  display: grid;
  gap: var(--void-section-gap);
}

.void-section + .void-section {
  margin-top: var(--void-section-space);
  padding-top: var(--void-section-space);
  border-top: var(--dash-line-w) dashed rgba(219, 211, 195, 0.64);
}

.void-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--void-section-head-h);
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--font-control);
  font-weight: 700;
  text-align: left;
  padding: 0 var(--micro-pad-inline);
}

.void-section-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--void-section-toggle-w);
  height: var(--void-section-toggle-h);
  border: var(--line-w) solid rgba(222, 215, 202, 0.86);
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: rgba(250, 248, 243, 0.72);
  font-size: var(--font-control);
  font-weight: 700;
  line-height: 1;
}

.void-section-toggle.expanded {
  transform: rotate(180deg);
}

.detail-pills {
  display: flex;
  gap: var(--detail-pills-gap);
  flex: 0 0 auto;
}

.detail-pills .pill {
  min-height: var(--detail-pill-h);
  min-width: var(--detail-pill-min-w);
  padding: 0 var(--detail-pill-pad-x);
  background: transparent;
  color: var(--text);
  font-size: var(--font-mini);
  font-weight: 500;
}

.match-photos-box {
  width: min(calc(clamp(292px, 48vw, 420px) + var(--editor-width-growth)), calc(100vw - 34px));
  max-height: min(78dvh, 640px);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.match-photos-context {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(8px, 2vw, 14px);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.match-photos-context strong {
  color: var(--text);
  font-weight: 500;
}

.photo-upload-row {
  /* The file input must not add an empty grid row between metadata and photos. */
  display: none;
}

.photo-add-card {
  min-height: clamp(72px, 18vw, 92px);
  aspect-ratio: 1;
  justify-self: center;
  border: var(--line-w) dashed rgba(222, 215, 202, 0.98);
  border-radius: 9px;
  background: rgba(255, 253, 250, 0.62);
  color: var(--muted);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 0;
  font-size: var(--font-tiny);
  font-weight: 560;
}

.photo-add-card svg {
  width: clamp(31px, 7.6vw, 34px);
  height: clamp(31px, 7.6vw, 34px);
  padding: clamp(7px, 1.8vw, 8px);
  border: var(--line-w) solid var(--line);
  border-radius: 50%;
  background: #fffdfa;
  color: var(--green);
}

.photo-count-chip {
  min-width: clamp(62px, 13vw, 76px);
  height: var(--detail-pill-h);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 250, 0.96);
  color: var(--muted);
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 clamp(9px, 1.8vw, 12px);
  font-size: var(--font-tiny);
  font-weight: 600;
}

.photo-count-chip svg {
  width: clamp(13px, 3vw, 15px);
  height: clamp(13px, 3vw, 15px);
}

.photo-count-chip .photo-emoji {
  font-size: clamp(13px, 3vw, 15px);
  line-height: 1;
}

.photo-status {
  min-height: 1.2em;
  margin: 0;
  color: var(--muted);
  font-size: var(--font-tiny);
  font-weight: 500;
  text-align: center;
}

.photo-status:empty {
  display: none;
}

.photo-status.error {
  color: var(--red);
}

.photo-grid {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(72px, 18vw, 92px), 1fr));
  gap: clamp(7px, 1.8vw, 10px);
  overflow: auto;
  min-height: clamp(76px, 18vw, 92px);
  max-height: min(46dvh, 420px);
  padding-right: 2px;
}

.photo-grid.is-add-only {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 0;
  padding-block: var(--editor-field-gap);
  padding-right: 0;
}

.photo-grid.is-add-only .photo-add-card {
  width: clamp(118px, 28vw, 142px);
  min-height: clamp(100px, 24vw, 126px);
}

.photo-grid.is-add-only + .confirm-actions {
  margin-top: 0;
}

.photo-card {
  position: relative;
  display: grid;
  gap: 4px;
  align-content: start;
}

.photo-upload-recovery {
  min-width: 0;
  padding: 12px;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-wrap: anywhere;
}

.photo-upload-recovery > span {
  color: var(--muted);
  font-size: 12px;
}

.photo-upload-recovery .member-role-toggle {
  justify-self: start;
  max-width: 100%;
  min-height: 36px;
  height: auto;
  white-space: normal;
}

.photo-card .plain-button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.photo-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  min-width: 0;
  display: block;
}

.photo-thumb {
  width: 100%;
  aspect-ratio: 1;
  border: var(--line-w) solid rgba(222, 215, 202, 0.9);
  border-radius: 9px;
  background: #f7f3eb;
  object-fit: cover;
  display: block;
}

.photo-thumb-wrap .photo-thumb,
.photo-thumb-wrap .photo-thumb-fallback {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.photo-thumb-fallback {
  width: 100%;
  aspect-ratio: 1;
  border: var(--line-w) solid rgba(222, 215, 202, 0.9);
  border-radius: 9px;
  background: #f7f3eb;
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: var(--font-tiny);
  font-weight: 700;
}

.photo-thumb-fallback[hidden] {
  display: none;
}

.photo-thumb-placeholder {
  display: block;
}

.photo-thumb-placeholder .photo-thumb-fallback {
  display: grid;
  height: 100%;
}

.photo-meta {
  color: var(--muted);
  font-size: var(--font-tiny);
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}

.photo-meta strong,
.photo-meta span {
  display: block;
  overflow-wrap: anywhere;
}

.photo-meta strong {
  color: var(--text);
  font-weight: 620;
}

.photo-caption {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: center;
  line-height: 1.16;
}

.photo-caption strong,
.photo-caption span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.photo-preview-caption {
  color: var(--muted);
  font-size: var(--font-tiny);
  font-weight: 450;
  text-align: center;
}

.photo-pending-card,
.photo-info-edit-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: clamp(62px, 16vw, 82px) minmax(0, 1fr) auto;
  gap: clamp(8px, 2vw, 10px);
  align-items: center;
  border: var(--line-w) solid rgba(222, 215, 202, 0.9);
  border-radius: 10px;
  background: rgba(255, 253, 250, 0.78);
  padding: clamp(7px, 1.7vw, 9px);
}

.photo-pending-card .photo-thumb,
.photo-info-edit-card .photo-thumb {
  border-radius: 8px;
}

.photo-info-edit-card .plain-button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

@container (max-width: 280px) {
  .photo-pending-card,
  .photo-info-edit-card {
    grid-template-columns: minmax(0, 1fr) 28px;
  }

  .photo-pending-card > .photo-thumb-wrap,
  .photo-info-edit-card > .plain-button {
    grid-column: 1 / -1;
    width: 72px;
    justify-self: center;
  }
}

.photo-pending-fields {
  display: grid;
  gap: var(--editor-field-gap);
  justify-self: center;
  justify-items: center;
  width: min(100%, clamp(156px, 42vw, 230px));
  min-width: 0;
}

.photo-pending-fields input,
.photo-pending-fields select {
  width: 100%;
  max-width: 230px;
  min-width: 0;
  height: var(--editor-field-h);
  border: var(--line-w) solid var(--line);
  border-radius: var(--editor-field-radius);
  background: rgba(255, 253, 250, 0.96);
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  padding: 0 10px;
  outline: none;
  text-align: center;
  text-align-last: center;
}

.photo-pending-remove {
  width: 28px;
  height: 28px;
  border: var(--line-w) solid var(--line);
  border-radius: 50%;
  background: rgba(255, 253, 250, 0.92);
  color: var(--muted);
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.match-photos-confirm {
  color: var(--green);
}

.match-photos-confirm[disabled] {
  color: rgba(142, 138, 129, 0.5);
}

/* Match the add-member input's side inset on all edges. */
.confirm-box.member-form-box {
  padding-block: var(--editor-pad);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: start;
}

.member-form-box .member-form-fields {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  grid-auto-rows: min-content;
}

.confirm-overlay:has(.editor-modal-box) {
  grid-template-columns: minmax(0, 1fr);
}

.confirm-box.editor-modal-box {
  max-width: min(100%, calc(100vw - 2 * clamp(14px, 4vw, 24px)));
  min-height: 0;
  padding: var(--editor-pad);
  border-radius: var(--editor-radius);
  background: #fffdfa;
  opacity: 1;
  align-content: start;
  justify-items: stretch;
  gap: var(--editor-section-gap);
}

.editor-modal-box .editor-modal-title {
  margin: 0;
  color: var(--text);
  font-size: var(--editor-title-font);
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

.editor-modal-box .confirm-actions {
  width: 100%;
  justify-content: center;
  gap: var(--editor-action-gap);
}

.editor-modal-box .confirm-icon {
  width: var(--editor-button-size);
  height: var(--editor-button-size);
  flex: none;
  padding: 0;
  font-size: 18px;
}

.confirm-box.match-photos-box {
  display: flex;
  flex-direction: column;
  gap: var(--editor-content-gap);
}

.match-photos-box > :not(.photo-grid) {
  flex: none;
}

.match-photos-box .photo-grid {
  min-height: 0;
  flex: 0 1 auto;
}

.match-photos-box .editor-modal-title {
  margin-bottom: calc(var(--editor-section-gap) - var(--editor-content-gap));
}

.match-photos-box .confirm-actions {
  margin-top: calc(var(--editor-section-gap) - var(--editor-content-gap));
}

.photo-delete-button {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 250, 0.84);
  color: var(--muted);
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

.photo-empty {
  min-height: clamp(74px, 18vw, 90px);
  border: var(--line-w) dashed rgba(222, 215, 202, 0.9);
  border-radius: 10px;
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: var(--font-mini);
  font-weight: 520;
}

.photo-preview-box {
  width: min(88vw, 620px);
  max-height: calc(100dvh - 34px);
  padding: clamp(9px, 2vw, 12px);
  gap: clamp(8px, 2vw, 10px);
}

.photo-preview-box img {
  width: 100%;
  max-height: min(70dvh, 620px);
  object-fit: contain;
  border-radius: 12px;
  display: block;
  background: #f7f3eb;
}

.photo-preview-box img[hidden],
.photo-preview-fallback[hidden] {
  display: none !important;
}

.photo-preview-fallback {
  width: 100%;
  min-height: min(52dvh, 360px);
  border: var(--line-w) solid var(--line);
  border-radius: 14px;
  background: #f7f3eb;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: clamp(18px, 5vw, 28px);
}

.photo-preview-file-badge {
  width: clamp(76px, 18vw, 112px);
  aspect-ratio: 1;
  border: var(--line-w) solid var(--line);
  border-radius: 18px;
  background: rgba(255, 253, 250, 0.78);
  display: grid;
  place-items: center;
  font-size: clamp(18px, 4vw, 28px);
  font-weight: 820;
  letter-spacing: 0;
}

.photo-preview-fallback strong {
  color: var(--ink);
  font-size: var(--font-strong);
  line-height: 1.25;
}

.photo-preview-fallback p {
  margin: 0;
  max-width: 24em;
  font-size: var(--font-mini);
  line-height: 1.5;
}

.photo-preview-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.photo-preview-action {
  min-width: 92px;
  height: 38px;
  border: var(--line-w) solid var(--line);
  border-radius: 999px;
  background: rgba(255, 253, 250, 0.88);
  color: var(--ink);
  font: inherit;
  font-size: var(--font-mini);
  font-weight: 720;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
}

.detail-stats {
  grid-template-columns: var(--detail-stats-cols);
  gap: var(--detail-stats-gap);
  margin-bottom: var(--detail-stats-bottom);
}

.detail-stats .stat {
  min-height: var(--detail-stat-min-h);
  padding: var(--detail-stat-pad-y) var(--detail-stat-pad-x);
}

.detail-stats .stat span {
  font-size: var(--detail-stat-label-font);
  font-weight: 500;
  white-space: nowrap;
}

.detail-stats .stat .stat-label-crown {
  display: inline-flex;
  align-items: center;
  gap: var(--detail-crown-gap);
}

.detail-stats .stat .stat-shield-label {
  display: inline-flex;
  align-items: center;
  gap: var(--detail-shield-gap);
}

.detail-stats .stat .stat-shield-chip {
  width: var(--detail-stat-shield-size);
  height: var(--detail-stat-shield-size);
  display: inline-grid;
  place-items: center;
  flex: 0 0 var(--detail-stat-shield-size);
}

.detail-stats .stat .stat-shield-chip .lite-icon {
  width: var(--detail-stat-shield-size);
  height: var(--detail-stat-shield-size);
}

.detail-stats .stat .stat-shield-chip.blue .lite-icon {
  color: var(--blue);
}

.detail-stats .stat .stat-shield-chip.red .lite-icon {
  color: var(--red);
}

.detail-stats .stat .mini-crown {
  width: var(--detail-crown-size);
  height: var(--detail-crown-size);
  color: var(--gold);
  transform: rotate(30deg);
  transform-origin: center;
  flex: 0 0 auto;
}

.detail-stats .stat strong {
  font-size: var(--detail-stat-value-font);
  font-weight: 650;
  line-height: 1.15;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.detail-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--detail-section-gap);
  margin-bottom: var(--detail-section-margin);
}

.detail-section-head > div {
  display: flex;
  align-items: baseline;
  gap: var(--detail-section-gap);
}

.detail-section-head h2 {
  margin: 0;
  font-size: var(--detail-section-title-font);
  font-weight: 700;
}

.detail-export {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--detail-export-font);
  font-weight: 500;
  line-height: 1.2;
  padding: 0 0 var(--micro-pad-bottom);
}

.detail-toggle {
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--detail-toggle-font);
  font-weight: 500;
}

.detail-toggle.is-hidden {
  visibility: hidden;
}

.detail-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
  isolation: isolate;
}

.detail-table {
  width: 100%;
  min-width: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  border: var(--line-w) solid #e7e0d3;
  border-radius: var(--detail-table-radius);
  overflow: hidden;
  background: #fff;
}

.round-summary-table {
  min-width: var(--detail-round-table-min);
}

.round-summary-table tr > :nth-child(1) {
  width: var(--detail-round-col);
}

.round-summary-table tr > :nth-child(2) {
  width: var(--detail-round-winner-col);
}

.round-summary-table tr > :nth-child(3),
.round-summary-table tr > :nth-child(4) {
  width: var(--detail-round-level-col);
}

.round-summary-table tr > :nth-child(5),
.round-summary-table tr > :nth-child(6) {
  width: var(--detail-round-score-col);
}

.round-summary-table tr > :nth-child(7) {
  width: var(--detail-round-deal-col);
}

.detail-table th,
.detail-table td {
  height: var(--detail-table-row-h);
  padding: 0 var(--detail-table-cell-pad-x);
  border-top: var(--hairline-w) dashed rgba(215, 207, 194, 0.58);
  text-align: center;
  vertical-align: middle;
  color: var(--text);
  font-size: var(--detail-table-font);
  font-weight: 400;
  line-height: 1.32;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-table thead th {
  height: var(--detail-table-row-h);
  border-top: 0;
  background: #f3efe7;
  color: var(--muted);
  font-weight: 500;
}

.detail-table .round-label {
  font-weight: 600;
}

.detail-table .winner {
  font-weight: 600;
}

.detail-table .winner-dot {
  margin: 0 auto;
}

.detail-table .team-dot {
  width: var(--detail-team-dot-size);
  height: var(--detail-team-dot-size);
  vertical-align: var(--baseline-tight);
}

.detail-table .lite-icon {
  width: var(--detail-inline-icon-size);
  height: var(--detail-inline-icon-size);
}

.detail-table .blue-text,
.detail-table .red-text {
  font-weight: 500;
}

.detail-table .blue-text {
  color: var(--blue);
}

.detail-table .red-text {
  color: var(--red);
}

.detail-table .result-lose {
  color: var(--muted);
  font-weight: 400;
}

.detail-table .result-fail {
  color: var(--red);
  font-weight: 500;
}

.hand-section {
  margin-top: var(--hand-section-margin-top);
}

.hand-section h2 {
  margin: 0 0 var(--hand-section-title-margin-bottom);
  font-size: var(--font-subtitle);
  font-weight: 700;
}

.hand-round {
  margin-top: var(--hand-round-margin);
}

.hand-round-title {
  min-height: var(--hand-round-title-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hand-round-title-gap);
  padding: 0 var(--hand-round-title-pad-x);
  border: var(--line-w) solid #e7e0d3;
  border-bottom: 0;
  border-radius: var(--detail-table-radius) var(--detail-table-radius) 0 0;
  background: var(--soft);
  color: var(--text);
  font-size: var(--hand-round-title-font);
  font-weight: 600;
}

.hand-round-title .round-title-teams {
  min-width: 0;
  font-size: var(--hand-round-team-font);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hand-round .detail-table {
  border-radius: 0 0 var(--detail-table-radius) var(--detail-table-radius);
  min-width: var(--detail-hand-table-min);
}

.hand-round .detail-table th,
.hand-round .detail-table td {
  border-top: var(--hairline-w) dashed rgba(215, 207, 194, 0.52);
}

.hand-round .detail-table th:first-child,
.hand-round .detail-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  width: var(--detail-hand-sticky-col);
  min-width: var(--detail-hand-sticky-col);
  max-width: var(--detail-hand-sticky-col);
  background: #fffdfa;
  box-shadow: var(--hairline-w) 0 0 rgba(220, 212, 198, 0.74), 6px 0 8px rgba(248, 245, 239, 0.72);
  transform: translateZ(0);
  backface-visibility: hidden;
}

.hand-round .detail-table tr > :nth-child(2) {
  width: var(--detail-hand-score-col);
}

.hand-round .detail-table tr > :nth-child(3) {
  width: var(--detail-hand-icon-col);
}

.hand-round .detail-table tr > :nth-child(4) {
  width: var(--detail-hand-result-col);
}

.hand-round .detail-table tr > :nth-child(5) {
  width: var(--detail-hand-rank-col);
}

.hand-round .detail-table tr > :nth-child(6),
.hand-round .detail-table tr > :nth-child(7),
.hand-round .detail-table tr > :nth-child(8) {
  width: var(--detail-hand-rank-col);
}

.hand-round .detail-table tr > :nth-child(9) {
  width: var(--detail-hand-tribute-col);
}

.hand-round .detail-table thead th:first-child {
  z-index: 3;
  background: #f3efe7;
}

.hand-round .detail-table th:nth-child(9),
.hand-round .detail-table td:nth-child(9) {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.12;
}

#detail .hand-round .detail-table tbody td:nth-child(5),
#detail .hand-round .detail-table tbody td:nth-child(6),
#detail .hand-round .detail-table tbody td:nth-child(7),
#detail .hand-round .detail-table tbody td:nth-child(8) {
  color: var(--text);
  font-weight: 400;
}

@media (max-width: 420px) {
  .detail-title h2 {
    font-size: var(--font-subtitle);
  }

  .team-line {
    font-size: var(--font-mini);
  }

  .detail-pills .pill {
    min-height: var(--detail-mobile-pill-h);
    min-width: var(--detail-mobile-pill-min-w);
    font-size: var(--font-mini);
  }
}

.export-result-screen .topbar {
  margin-bottom: var(--export-topbar-margin);
}

.export-top-actions {
  display: flex;
  align-items: center;
  gap: var(--export-actions-gap);
}

.export-share-button {
  width: var(--export-share-size);
  height: var(--export-share-size);
}

.export-share-button svg {
  width: var(--export-share-icon);
  height: var(--export-share-icon);
}

.export-share-button.is-working {
  opacity: 0.5;
  pointer-events: none;
}

.export-preview-box {
  width: var(--export-preview-w);
  height: var(--export-preview-max-h);
  max-height: calc(100dvh - 24px);
  box-sizing: border-box;
  border: var(--line-w) solid rgba(222, 215, 202, 0.82);
  border-radius: var(--export-preview-radius);
  background: rgba(255, 253, 250, 0.98);
  box-shadow: 0 18px 50px rgba(31, 39, 48, 0.16);
  padding: var(--export-preview-pad);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--export-preview-gap);
  justify-items: center;
  overflow: hidden;
}

.export-preview-scroll {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--export-preview-scroll-radius);
  background: #f7f3eb;
  display: grid;
  align-content: start;
  gap: var(--export-preview-gap);
}

.export-preview-scroll img {
  display: block;
  width: 100%;
  height: auto;
}

.export-image-card {
  background: #fffdfa;
  border: var(--line-w) solid var(--line);
  border-radius: var(--export-card-radius);
  box-shadow: 0 12px 30px rgba(37, 44, 39, 0.08);
  display: grid;
  gap: var(--export-card-gap);
  padding: var(--export-card-pad);
}

.export-image-card.export-image-spread {
  width: max-content;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 0;
}

.export-render-host {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 720px;
  background: #f7f3eb;
  pointer-events: none;
  z-index: -1;
}

.export-render-host.is-spread {
  width: 1472px;
}

.export-render-host > .export-render-card {
  width: 720px;
  max-width: 720px;
}

.export-render-host.is-spread > .export-render-card {
  width: 1472px;
  max-width: 1472px;
}

.export-svg-root {
  width: 100%;
  min-height: 100%;
  padding: 0;
  box-sizing: border-box;
  background: #f7f3eb;
}

.export-image-page {
  width: 720px;
  box-sizing: border-box;
  background: #fffdfa;
  border: var(--line-w) solid var(--line);
  border-radius: var(--export-card-radius);
  box-shadow: 0 12px 30px rgba(37, 44, 39, 0.08);
  display: grid;
  gap: var(--export-card-gap);
  padding: var(--export-card-pad);
}

.export-image-page-continuation {
  align-self: flex-start;
}

.export-image-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--export-head-gap);
  padding: 0 var(--export-head-pad-x);
}

.export-image-title {
  display: grid;
  gap: 0;
}

.export-image-title h2 {
  margin: 0;
  color: var(--text);
  font-size: var(--export-title-font);
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
}

.export-image-title span,
.export-image-code {
  color: var(--muted);
  font-size: var(--export-meta-font);
  font-weight: 500;
}

.export-image-section {
  background: #fffefa;
  border: var(--line-w) solid rgba(224, 216, 202, 0.9);
  border-radius: var(--export-section-radius);
  padding: var(--export-section-pad);
}

.export-image-section .detail-meta-row {
  margin-bottom: var(--export-section-meta-margin);
}

.export-image-section .detail-team-line {
  margin-bottom: var(--export-section-team-margin);
}

.export-overview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 18px);
  margin-bottom: var(--export-section-team-margin);
}

.export-overview-head h2 {
  margin: 0;
  color: var(--text);
  font-size: var(--export-section-title-font);
  font-weight: 700;
  line-height: 1.2;
}

.export-overview-head .detail-team-line {
  min-width: 0;
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.export-image-card .detail-stats {
  margin-bottom: var(--export-detail-stats-bottom);
}

.export-image-card .detail-stats .stat.is-highlight {
  border-color: rgba(217, 179, 69, 0.58);
  background: rgba(255, 248, 224, 0.78);
}

.export-image-card .detail-stats .stat.is-highlight strong {
  font-weight: 820;
}

.export-image-card .detail-section-head {
  margin-bottom: var(--export-section-head-margin);
}

.export-image-card .detail-section-head h2,
.export-image-card .hand-section h2 {
  font-size: var(--export-section-title-font);
  font-weight: 700;
}

.export-image-card .hand-section {
  margin-top: var(--export-hand-section-top);
}

.export-image-card .hand-round .detail-table th,
.export-image-card .hand-round .detail-table td {
  height: var(--export-hand-row-h);
  padding: 0 var(--export-hand-cell-pad-x);
  font-size: var(--export-hand-font);
  line-height: 1.36;
}

.export-image-card .hand-round .detail-table tbody .blue-text,
.export-image-card .hand-round .detail-table tbody .red-text {
  color: var(--text);
  font-weight: 400;
}

.export-image-card .hand-round .detail-table tbody td:nth-child(2) .blue-text,
.export-image-card .hand-round .detail-table tbody td:nth-child(2) .red-text,
.export-image-card .hand-round .detail-table tbody td:nth-child(3) .blue-text,
.export-image-card .hand-round .detail-table tbody td:nth-child(3) .red-text,
.export-image-card .hand-round .detail-table tbody td:nth-child(4).blue-text,
.export-image-card .hand-round .detail-table tbody td:nth-child(4).red-text {
  font-weight: 500;
}

.export-image-card .hand-round .detail-table tbody td:nth-child(2) .blue-text,
.export-image-card .hand-round .detail-table tbody td:nth-child(3) .blue-text,
.export-image-card .hand-round .detail-table tbody td:nth-child(4).blue-text {
  color: var(--blue);
}

.export-image-card .hand-round .detail-table tbody td:nth-child(2) .red-text,
.export-image-card .hand-round .detail-table tbody td:nth-child(3) .red-text,
.export-image-card .hand-round .detail-table tbody td:nth-child(4).red-text {
  color: var(--red);
}

.export-image-card .hand-round .detail-table {
  table-layout: fixed;
  width: 100%;
  min-width: var(--export-hand-table-min);
}

.export-image-card .hand-round .detail-table .hand-no-cell,
.export-image-card .hand-round .detail-table th:nth-child(1) {
  width: var(--export-hand-no-col);
  min-width: var(--export-hand-no-col);
}

.export-image-card .hand-round .detail-table .score-cell,
.export-image-card .hand-round .detail-table th:nth-child(2) {
  width: var(--export-hand-score-col);
  min-width: var(--export-hand-score-col);
  white-space: normal;
  line-height: 1.18;
}

.export-image-card .hand-round .detail-table .rebellion-cell,
.export-image-card .hand-round .detail-table th:nth-child(3) {
  width: var(--export-hand-shield-col);
  min-width: var(--export-hand-shield-col);
  text-align: center;
}

.export-image-card .hand-round .detail-table .rebellion-cell .lite-icon,
.export-image-card .hand-round .detail-table th:nth-child(3) .lite-icon {
  width: var(--export-hand-shield-size);
  height: var(--export-hand-shield-size);
  min-width: var(--export-hand-shield-size);
  flex: 0 0 var(--export-hand-shield-size);
  align-items: center;
  justify-content: center;
  display: inline-flex;
}

.export-image-card .hand-round .detail-table .rebellion-cell .lite-icon svg,
.export-image-card .hand-round .detail-table th:nth-child(3) .lite-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.export-image-card .hand-round .detail-table th:nth-child(4),
.export-image-card .hand-round .detail-table td:nth-child(4) {
  width: var(--export-hand-result-col);
  min-width: var(--export-hand-result-col);
}

.export-image-card .hand-round .detail-table .rank-cell {
  width: var(--export-hand-rank-col);
  min-width: var(--export-hand-rank-col);
  color: #374151;
  font-weight: 500;
}

.export-image-card .hand-round .detail-table th:nth-child(5),
.export-image-card .hand-round .detail-table th:nth-child(6),
.export-image-card .hand-round .detail-table th:nth-child(7),
.export-image-card .hand-round .detail-table th:nth-child(8) {
  width: var(--export-hand-rank-col);
  min-width: var(--export-hand-rank-col);
}

.export-image-card .hand-round .detail-table .tribute-cell {
  width: var(--export-hand-tribute-col);
  min-width: var(--export-hand-tribute-col);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.18;
}

.export-image-card .hand-round .detail-table th:last-child {
  width: var(--export-hand-tribute-col);
  min-width: var(--export-hand-tribute-col);
}

.export-image-card .hand-round .detail-table .tribute-cell .tribute-text {
  white-space: normal;
  overflow-wrap: anywhere;
}

.export-image-card .hand-round .detail-table .tribute-cell .team-dot {
  width: var(--export-team-dot-size);
  height: var(--export-team-dot-size);
  vertical-align: var(--baseline-tight);
}

.export-image-card .copyright {
  padding: var(--export-footer-pad-top) 0 0;
}

.export-image-footer {
  display: grid;
  gap: var(--export-footer-gap);
  padding-top: var(--export-footer-pad-top);
  color: var(--muted);
  text-align: center;
  font-size: var(--font-mini);
  font-weight: 400;
}

.round-card {
  border: var(--line-w) solid var(--line);
  border-radius: var(--legacy-round-radius);
  overflow: hidden;
  margin-top: var(--legacy-round-card-margin);
}

.round-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--soft);
  padding: var(--legacy-round-head-pad-y) var(--legacy-round-head-pad-x);
  font-size: var(--legacy-round-head-font);
  font-weight: 900;
}

.round-body {
  display: grid;
  grid-template-columns: var(--legacy-round-cols);
  gap: var(--legacy-round-body-gap);
  background: var(--line);
}

.round-body div {
  background: var(--panel);
  min-height: var(--legacy-round-cell-min-h);
  padding: var(--legacy-round-cell-pad);
  display: grid;
  gap: var(--legacy-round-cell-gap);
}

.round-body span {
  color: var(--muted);
  font-size: var(--legacy-round-label-font);
  font-weight: 800;
}

.round-body strong {
  font-size: var(--legacy-round-value-font);
}

.rules-panel {
  padding: var(--rules-panel-pad);
}

.rules-compact-head {
  margin-bottom: var(--rules-compact-gap);
}

.rules-compact-head h2 {
  font-size: var(--rules-compact-title);
  line-height: 1;
}

.rules-compact-head span {
  color: var(--muted);
  font-size: var(--rules-compact-sub);
  font-weight: 750;
}

.combo-grid {
  display: grid;
  grid-template-columns: var(--rules-combo-cols);
  gap: var(--rules-combo-gap);
}

.combo-card {
  min-height: var(--rules-combo-min-h);
  border: var(--line-w) solid #d9e5ef;
  border-radius: var(--legacy-round-radius);
  background: #edf5fa;
  padding: var(--rules-combo-pad);
  display: grid;
  align-content: space-between;
}

.combo-name {
  font-size: var(--rules-combo-name-font);
  font-weight: 860;
  line-height: 1.1;
}

.combo-en {
  color: #97a2ad;
  font-size: var(--rules-combo-en-font);
  font-weight: 760;
  margin-top: var(--rules-combo-en-margin-top);
}

.cards {
  display: flex;
  gap: var(--rules-cards-gap);
  align-items: center;
  min-height: var(--rules-cards-min-h);
  overflow: hidden;
}

.card-mini {
  width: var(--rules-card-mini-w);
  height: var(--rules-card-mini-h);
  border-radius: var(--rules-card-mini-radius);
  background: linear-gradient(#ffffff, #eaf2fa);
  border: var(--line-w) solid #c8d7e6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--rules-card-mini-font);
  font-weight: 900;
  box-shadow: 0 2px 4px rgba(38, 62, 88, 0.08);
}

.card-mini.red-suit {
  color: #b24e58;
}

.card-mini.black-suit {
  color: #193147;
}

.combo-note {
  font-size: var(--font-meta);
  font-weight: 760;
  color: #27323d;
  line-height: 1.1;
}

.rules-view {
  display: block;
  width: 100%;
}

#rules .topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  margin: calc(-1 * var(--page-pad-top)) calc(-1 * var(--page-pad-x)) var(--rules-host-topbar-margin-bottom);
  padding: var(--page-pad-top) var(--page-pad-x) var(--rules-host-topbar-pad-bottom);
  background: var(--paper);
}

.rules-inline {
  display: block;
  width: 100%;
  min-height: var(--rules-inline-min-h);
  background: transparent;
}

@media (max-width: 420px) {
  .rules-inline {
    width: calc(100% + var(--rules-inline-narrow-bleed));
    margin-left: calc(var(--rules-inline-narrow-bleed) / -2);
  }
}

.rules-fallback-link {
  display: grid;
  place-items: center;
  min-height: 160px;
  color: var(--muted);
  font-size: var(--font-meta);
  text-decoration: none;
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: rgba(255, 253, 250, 0.92);
  backdrop-filter: blur(18px);
  border-top: var(--line-w) solid var(--line);
  padding: var(--nav-pad-y) max(var(--nav-pad-x), env(safe-area-inset-left))
    max(var(--nav-pad-y), env(safe-area-inset-bottom))
    max(var(--nav-pad-x), env(safe-area-inset-right));
}

.is-login .bottom-nav {
  display: none;
}

.is-login .app {
  padding-bottom: var(--login-app-pad-bottom);
}

.nav-inner {
  max-width: var(--nav-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--nav-cols);
  align-items: center;
  gap: var(--nav-gap);
}

.nav {
  border: 0;
  background: transparent;
  color: var(--muted);
  min-height: var(--nav-button-h);
  border-radius: var(--radius-pill);
  font-size: var(--nav-font-size);
  font-weight: 850;
}

.nav.active {
  background: var(--soft);
  color: var(--text);
}

.nav.plus {
  width: var(--nav-plus-size);
  height: var(--nav-plus-size);
  min-height: var(--nav-plus-size);
  padding: 0;
  justify-self: center;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
  font-size: 0;
  position: relative;
}

.nav.plus::before,
.nav.plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--nav-plus-long);
  height: var(--nav-plus-short);
  border-radius: var(--radius-pill);
  background: currentColor;
  transform: translate(-50%, -50%);
}

.nav.plus::after {
  width: var(--nav-plus-short);
  height: var(--nav-plus-long);
}

body.role-member .nav.plus {
  display: none;
}

body.role-member .nav-inner {
  grid-template-columns: var(--nav-cols-member);
}

body.role-member #match .match-status-line,
body.role-member #match .felt-end-actions,
body.role-member #match .felt-actions-lite {
  display: none;
}

body.role-member #match .match-meta-button,
body.role-member #match [data-open-hand-edit],
body.role-member #match [data-open-end-match] {
  pointer-events: none;
}

.match-empty {
  min-height: var(--empty-card-min-h);
  display: grid;
  place-items: center;
}

.match-empty.has-watch-list {
  align-content: start;
  gap: clamp(12px, 3vw, 18px);
  place-items: stretch;
  min-height: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.match-empty.has-watch-list .empty-state {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: grid;
  justify-items: stretch;
  gap: clamp(8px, 2vw, 10px);
  text-align: left;
}

.watch-match-overview-title {
  justify-self: start;
  color: var(--muted);
  font-size: var(--font-meta);
  font-weight: 650;
  line-height: 1.3;
}

.watch-match-jump-nav {
  justify-self: stretch;
  display: grid;
  justify-content: stretch;
  gap: clamp(7px, 1.8vw, 10px);
  width: 100%;
}

.watch-match-jump-nav.is-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.watch-match-jump-nav.is-two .watch-match-jump-button:first-child {
  justify-self: end;
}

.watch-match-jump-nav.is-two .watch-match-jump-button:nth-child(2) {
  justify-self: start;
}

.watch-match-jump-button {
  min-height: clamp(28px, 6.8vw, 34px);
  padding: 0 clamp(12px, 3.2vw, 16px);
  border: var(--line-w) solid rgba(222, 215, 202, 0.82);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 250, 0.82);
  color: var(--muted);
  font-size: var(--font-meta);
  font-weight: 550;
  line-height: 1;
}

.watch-match-list {
  display: grid;
  gap: clamp(8px, 2vw, 10px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

@media (min-width: 768px) {
  .watch-match-jump-nav.is-two {
    gap: clamp(12px, 1.5vw, 18px);
  }

  .watch-match-list.is-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: clamp(12px, 1.5vw, 18px);
  }
}

.watch-match-button {
  text-align: left;
}

.watch-match-button .admin-actions {
  justify-content: flex-end;
}

.watch-match-detail-card {
  display: grid;
  gap: clamp(8px, 1.8vw, 11px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  scroll-margin-top: clamp(14px, 4vw, 22px);
  padding: clamp(12px, 3vw, 16px);
  border: 1px solid var(--line);
  border-radius: var(--card-radius-sm);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow-soft);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.watch-match-detail-card:active {
  transform: translateY(1px);
}

.watch-match-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 2vw, 12px);
  min-width: 0;
}

.watch-match-detail-head strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--font-small);
  font-weight: 650;
}

.watch-match-detail-meta,
.watch-match-latest {
  color: var(--muted);
  font-size: var(--font-mini);
  font-weight: 500;
  line-height: 1.45;
}

.watch-match-detail-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}

.watch-match-viewers {
  white-space: nowrap;
}

.watch-match-scores {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
}

.watch-match-score {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  aspect-ratio: 5 / 7;
  border-radius: 4px;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.watch-match-score.blue {
  background: var(--blue);
}

.watch-match-score.red {
  background: var(--red);
}

.watch-match-score:not(.is-active) {
  background: #8d8d8d;
}

.watch-match-latest {
  display: grid;
  gap: 4px;
}

.watch-match-detail-card .round-record-card {
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.watch-match-detail-card .record-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

.watch-match-detail-card .record-table table {
  width: max(100%, var(--watch-match-record-table-min));
  min-width: var(--watch-match-record-table-min);
  overflow: visible;
  touch-action: pan-y pinch-zoom;
}

.watch-match-detail-card .record-table th,
.watch-match-detail-card .record-table td {
  touch-action: pan-y pinch-zoom;
  padding-left: clamp(1px, 0.35vw, 3px);
  padding-right: clamp(1px, 0.35vw, 3px);
}

.watch-match-detail-card .record-table tr > :first-child {
  width: var(--watch-record-index-col);
}

.watch-match-detail-card .record-table tr > :nth-child(2) {
  width: var(--watch-record-score-col);
}

.watch-match-detail-card .record-table tr > :nth-child(3) {
  width: var(--watch-record-shield-col);
}

.watch-match-detail-card .record-table tr > :nth-child(4),
.watch-match-detail-card .record-table tr > :nth-child(5),
.watch-match-detail-card .record-table tr > :nth-child(6),
.watch-match-detail-card .record-table tr > :nth-child(7) {
  width: var(--watch-record-player-col);
}

.watch-match-detail-card .record-table tr > :nth-child(8) {
  width: var(--watch-record-result-col);
}

.watch-match-detail-card .record-table tr > :last-child {
  width: var(--watch-record-tribute-col);
}

body.match-started-clean #match .watch-match-detail-card .round-record-card {
  display: block;
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--empty-state-gap);
  color: var(--muted);
  text-align: center;
}

.empty-state .lite-icon {
  width: var(--empty-icon-size);
  height: var(--empty-icon-size);
  color: rgba(141, 136, 126, 0.5);
}

.empty-state strong {
  color: var(--muted);
  font-size: var(--empty-text-font);
  font-weight: 500;
}

.compact-empty {
  min-height: var(--compact-empty-min-h);
  align-content: center;
}

.setup-grid {
  display: grid;
  grid-template-columns: var(--setup-grid-cols);
  gap: var(--setup-grid-gap);
}

.setup-field {
  min-height: var(--setup-field-min-h);
  border: var(--line-w) solid var(--line);
  border-radius: var(--setup-field-radius);
  background: #fffdfa;
  padding: var(--setup-field-pad-y) var(--setup-field-pad-x);
  display: grid;
  align-content: center;
  gap: var(--setup-field-gap);
}

.setup-field.date-field {
  position: relative;
}

.setup-field span {
  color: var(--muted);
  font-size: var(--font-mini);
  font-weight: 500;
}

.setup-field strong,
.setup-date-button,
.setup-field input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: center;
}

.setup-date-button {
  padding: 0;
  font-size: var(--setup-date-font);
  font-weight: 650;
}

.setup-field input {
  font-size: var(--setup-input-font);
  font-weight: 500;
}

.setup-date-picker {
  position: absolute;
  left: var(--setup-date-picker-inset-x);
  right: var(--setup-date-picker-inset-x);
  bottom: var(--setup-date-picker-bottom);
  width: calc(100% - (var(--setup-date-picker-inset-x) * 2));
  height: var(--setup-date-picker-h);
  opacity: 0;
  pointer-events: auto;
  z-index: 1;
}

.setup-date-manual {
  display: none;
}

.setup-field.manual-date .setup-date-button {
  display: none;
}

.setup-field.manual-date .setup-date-manual {
  display: block;
  position: relative;
  z-index: 2;
}

.setup-field.manual-date .setup-date-picker {
  display: none;
}

.setup-field input::placeholder {
  color: rgba(141, 136, 126, 0.78);
}

.setup-table {
  margin-top: var(--setup-table-margin);
  border-radius: var(--felt-radius);
  background:
    radial-gradient(circle at 48% 47%, rgba(255, 255, 255, 0.22), transparent 34%),
    linear-gradient(135deg, #6f8d70, #2e5749);
  height: var(--match-felt-height);
  min-height: var(--match-felt-min-height);
  position: relative;
  overflow: hidden;
}

.setup-table::before {
  content: "";
  position: absolute;
  inset: var(--setup-ring-y) var(--setup-ring-x);
  border: var(--line-w) solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
}

.setup-seat {
  position: absolute;
  width: var(--setup-seat-w);
  height: var(--setup-seat-h);
  border: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 250, 0.92);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--setup-seat-pad-right) 0 var(--setup-seat-pad-left);
  font-size: var(--setup-seat-font);
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(18, 46, 39, 0.1);
}

.player-picker {
  position: relative;
  cursor: pointer;
  font-weight: 600;
}

.setup-seat.player-picker {
  position: absolute;
}

.player-picker .seat-name {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  line-height: 1.2;
}

.player-picker.is-empty {
  color: var(--muted);
  font-weight: 450;
}

.player-picker.is-empty .seat-name {
  color: var(--muted);
}

.setup-seat.is-empty .seat-name {
  color: inherit;
}

.player-picker .picker-chevron {
  position: absolute;
  right: 8px;
  width: 12px;
  height: 12px;
  top: calc(50% - 6px);
  color: var(--muted);
  pointer-events: none;
}

.edit-name-input .picker-chevron {
  right: 0;
}

.player-picker[aria-expanded="true"] .picker-chevron {
  transform: rotate(180deg);
}

.player-picker:focus-visible,
.player-picker[aria-expanded="true"],
.edit-seat:has(.player-picker:focus-visible),
.edit-seat:has(.player-picker[aria-expanded="true"]) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.edit-seat .player-picker:focus-visible,
.edit-seat .player-picker[aria-expanded="true"] {
  outline: none;
}

.player-picker-menu {
  position: fixed;
  z-index: 95;
  box-sizing: border-box;
  padding: 4px 0;
  border: var(--line-w) solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 6px 20px rgba(33, 28, 19, 0.16);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}

.player-picker-menu[hidden] {
  display: none;
}

.player-picker-option {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 450;
  text-align: left;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.player-picker-option + .player-picker-option {
  border-top: var(--hairline-w) solid var(--line);
}

.player-picker-option.is-active,
.player-picker-option:hover {
  background: var(--soft);
}

.player-picker-option[aria-selected="true"] {
  color: var(--blue);
}

.player-picker-option.is-empty {
  color: var(--muted);
}

.start-match:disabled {
  opacity: 0.4;
  cursor: default;
}

.setup-seat.top {
  top: var(--setup-seat-edge);
  left: 50%;
  transform: translateX(-50%);
}

.setup-seat.left {
  left: var(--setup-seat-edge);
  top: 50%;
  transform: translateY(-50%);
}

.setup-seat.right {
  right: var(--setup-seat-edge);
  top: 50%;
  transform: translateY(-50%);
}

.setup-seat.bottom {
  bottom: var(--setup-seat-edge);
  left: 50%;
  transform: translateX(-50%);
}

.setup-seat.blue {
  color: var(--blue);
}

.setup-seat.red {
  color: var(--red);
}

.setup-note {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--font-meta);
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  pointer-events: none;
}

.start-match {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--setup-start-size);
  height: var(--setup-start-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.9);
  display: inline-grid;
  place-items: center;
}

.start-match svg {
  width: var(--setup-start-size);
  height: var(--setup-start-size);
  display: block;
}

.no-current-match #match .match-meta-row,
.no-current-match #match .scoreboard,
.no-current-match #match .match-live {
  display: none;
}

body:not(.no-current-match) #match .match-empty {
  display: none;
}

body.match-started-clean #match .round-record-card,
body.match-started-clean #match .felt-end-actions {
  display: none;
}

body.match-started-clean.has-match-deals #match .round-record-card {
  display: block;
}

body.round-ended #match .felt-end-actions {
  display: flex;
}

body.round-ended #match .felt-center.hand-end-center {
  display: none;
}

.copyright {
  text-align: center;
  color: var(--muted);
  font-size: var(--copyright-font);
  font-weight: 400;
  margin: var(--copyright-margin-top) 0 0;
}

@media (min-width: 760px) {
  :root {
    --page-max: var(--page-max-tablet);
    --page-pad-x: var(--page-pad-x-tablet);
    --page-pad-top: var(--page-pad-top-tablet);
    --panel-pad: var(--panel-pad-tablet);
    --panel-gap: var(--panel-gap-tablet);
    --topbar-gap: var(--topbar-gap-tablet);
    --topbar-margin-bottom: var(--topbar-margin-bottom-tablet);
    --brand-title-font: var(--brand-title-font-tablet);
    --brand-sub-font: var(--brand-sub-font-tablet);
    --font-mini: clamp(10.5px, 0.78vw, 12px);
    --font-caption: clamp(11px, 0.82vw, 13px);
    --font-meta: clamp(12px, 0.9vw, 14px);
    --font-body: clamp(13px, 1vw, 16px);
    --font-control: clamp(13.5px, 1.05vw, 16px);
    --font-subtitle: clamp(16px, 1.3vw, 20px);
    --saga-action-size: var(--saga-action-size-tablet);
    --players-saga-action-size: var(--saga-action-size-tablet);
    --icon-button-size: var(--icon-button-size-tablet);
    --login-card-w: var(--login-card-w-tablet);
    --login-card-pad: var(--login-card-pad-tablet);
    --login-field-h: var(--login-field-h-tablet);
    --menu-row-h: var(--menu-row-h-tablet);
    --menu-icon-col: var(--menu-icon-col-tablet);
    --menu-icon-size: var(--menu-icon-size-tablet);
    --menu-svg-size: var(--menu-svg-size-tablet);
    --menu-title-font: var(--menu-title-font-tablet);
    --menu-arrow-font: var(--menu-arrow-font-tablet);
    --nav-max: var(--nav-max-wide);
    --account-menu-w: var(--account-menu-w-tablet);
    --admin-panel-pad: var(--admin-panel-pad-tablet);
    --admin-section-gap: var(--admin-section-gap-tablet);
    --admin-section-space: var(--admin-section-space-tablet);
    --admin-row-min-h: var(--admin-row-min-h-tablet);
    --admin-row-gap: var(--admin-row-gap-tablet);
    --admin-row-pad-x: var(--admin-row-pad-x-tablet);
    --admin-avatar-size: var(--admin-avatar-size-tablet);
    --admin-mini-h: var(--admin-mini-h-tablet);
    --member-manager-head-gap: var(--member-manager-head-gap-tablet);
    --account-profile-avatar: var(--account-profile-avatar-tablet);
    --member-form-box-w: var(--member-form-box-w-tablet);
    --member-form-input-w: var(--member-form-input-w-tablet);
    --editor-title-font: 15px;
    --editor-width-growth: calc((var(--editor-pad) - 16px) * 2);
    --editor-section-gap: 16px;
    --editor-content-gap: 12px;
    --editor-field-gap: 8px;
    --editor-field-h: 34px;
    --editor-field-radius: 9px;
    --editor-button-size: 40px;
    --editor-action-gap: 18px;
    --editor-radius: 18px;
    --editor-compact-w: 252px;
    --member-picker-max: var(--member-picker-max-tablet);
    --account-modal-w: var(--account-modal-w-tablet);
    --account-confirm-icon: var(--account-confirm-icon-tablet);
    --emoji-modal-w: var(--emoji-modal-w-tablet);
    --emoji-option-size: var(--emoji-option-size-tablet);
    --emoji-option-radius: var(--emoji-option-radius-tablet);
    --emoji-option-font: var(--emoji-option-font-tablet);
    --avatar-preview-w: var(--avatar-preview-w-tablet);
    --avatar-preview-frame: var(--avatar-preview-frame-tablet);
    --avatar-preview-radius: var(--avatar-preview-radius-tablet);
    --avatar-preview-frame-radius: var(--avatar-preview-frame-radius-tablet);
    --avatar-preview-frame-font: var(--avatar-preview-frame-font-tablet);
    --import-modal-w: var(--import-modal-w-tablet);
    --export-modal-w: var(--export-modal-w-tablet);
    --import-action-size: var(--import-action-size-tablet);
    --import-action-svg: var(--import-action-svg-tablet);
    --export-title-font: clamp(22px, 2.4vw, 26px);
    --export-section-title-font: clamp(16px, 1.55vw, 18px);
    --export-hand-row-h: clamp(38px, 4.3vw, 43px);
    --export-hand-font: clamp(11.5px, 1.15vw, 13px);
    --export-hand-score-col: clamp(88px, 9vw, 110px);
    --export-hand-shield-col: clamp(50px, 5vw, 58px);
    --export-hand-tribute-col: clamp(104px, 10vw, 132px);
    --match-row-date-col: clamp(92px, 10vw, 122px);
    --match-row-gap: clamp(9px, 1.2vw, 14px);
    --match-row-pad-y: clamp(9px, 1.2vw, 12px);
    --match-row-pad-x: clamp(11px, 1.6vw, 16px);
    --match-row-date-font: clamp(14px, 1.3vw, 16px);
    --match-row-sub-font: clamp(11px, 1vw, 13px);
    --overview-body-font: clamp(11.5px, 0.92vw, 14.5px);
    --overview-head-font: clamp(12px, 0.98vw, 14.5px);
    --overview-first-font: clamp(12.5px, 1.05vw, 15.5px);
    --overview-note-font: clamp(10.5px, 0.9vw, 12px);
    --overview-table-margin-top: clamp(8px, 1vw, 10px);
    --overview-table-radius: clamp(8px, 1vw, 10px);
    --overview-player-head-font: clamp(11px, 0.9vw, 12.5px);
    --overview-panel-pad: clamp(12px, 1.8vw, 18px);
    --overview-panel-radius: clamp(8px, 1vw, 10px);
    --overview-panel-space: clamp(12px, 1.8vw, 18px);
    --overview-title-font: clamp(20px, 2.4vw, 24px);
    --overview-head-margin: clamp(12px, 1.8vw, 16px);
    --overview-tabs-gap: clamp(6px, 1vw, 9px);
    --overview-tab-h: clamp(32px, 3.2vw, 38px);
    --overview-tab-font: clamp(12px, 1.1vw, 14px);
    --overview-total-tab-cols: repeat(auto-fit, minmax(min(100%, clamp(74px, 10vw, 96px)), 1fr));
    --overview-record-tab-cols: repeat(auto-fit, minmax(min(100%, clamp(68px, 9vw, 92px)), 1fr));
    --tab-font: clamp(12px, 1.1vw, 14px);
    --pill-h: clamp(25px, 3vw, 30px);
    --pill-pad-x: clamp(8px, 1.1vw, 12px);
    --rank-avatar-size: clamp(24px, 2.4vw, 28px);
    --rank-avatar-font: clamp(15px, 1.4vw, 17px);
    --rank-meta-font: clamp(11px, 0.95vw, 13px);
    --player-stat-min-h: clamp(34px, 3.8vw, 40px);
    --player-stat-cell-min: clamp(108px, 13vw, 132px);
    --player-stat-pad-x: clamp(7px, 1vw, 10px);
    --player-stat-label-font: clamp(12px, 1.05vw, 14px);
    --player-stat-value-font: clamp(13px, 1.15vw, 15px);
    --player-head-margin: clamp(7px, 1vw, 10px);
    --member-chip-name-font: clamp(12px, 0.95vw, 14px);
    --member-chip-min-h: clamp(84px, 7.2vw, 94px);
    --member-avatar-size: clamp(64px, 6vw, 72px);
    --member-avatar-font: clamp(46px, 4.8vw, 56px);
    --avatar-base-size: clamp(40px, 4.2vw, 46px);
    --avatar-base-font: clamp(21px, 2.2vw, 24px);
    --player-avatar-size: clamp(32px, 3.2vw, 40px);
    --player-avatar-font: clamp(16px, 1.55vw, 18px);
    --player-dates-font: clamp(11.5px, 0.9vw, 13px);
    --player-date-link-col: clamp(80px, 8vw, 88px);
    --dates-summary-size: clamp(28px, 2.8vw, 32px);
    --detail-stats-cols: var(--detail-stats-cols-wide);
    --detail-stats-gap: clamp(6px, 1vw, 10px);
    --detail-stat-min-h: clamp(42px, 5vw, 54px);
    --detail-stat-pad-x: clamp(7px, 1vw, 10px);
    --detail-table-font: clamp(11.5px, 1vw, 13px);
    --hand-round-title-font: clamp(13px, 1.2vw, 15px);
    --hand-round-team-font: clamp(11.5px, 1vw, 13px);
    --match-score-min-h: clamp(66px, 5.6vw, 78px);
    --match-score-font: clamp(34px, 3.5vw, 42px);
    --match-score-crown-size: clamp(24px, 2.5vw, 28px);
    --match-score-crown-left: calc(50% - clamp(52px, 5.6vw, 62px));
    --match-colon-font: clamp(24px, 2.4vw, 28px);
    --felt-ring-x: clamp(74px, 10vw, 120px);
    --felt-ring-y: clamp(74px, 7.2vw, 96px);
    --felt-chip-h: clamp(24px, 2.7vw, 28px);
    --felt-chip-font: clamp(11px, 1.1vw, 12px);
    --felt-tool-size: clamp(26px, 2.8vw, 30px);
    --felt-tool-icon: clamp(15px, 1.5vw, 17px);
    --felt-seat-min-w: clamp(108px, 10vw, 126px);
    --felt-seat-h: clamp(39px, 3.8vw, 44px);
    --felt-seat-font: clamp(13px, 1.25vw, 14px);
    --felt-seat-rank-size: clamp(16px, 1.6vw, 18px);
    --felt-seat-edge: clamp(12px, 1.7vw, 18px);
    --lead-card-mini-w: clamp(20px, 1.9vw, 24px);
    --lead-card-gap: clamp(7px, 0.8vw, 10px);
    --felt-end-button-size: clamp(28px, 2.8vw, 31px);
    --confirm-box-w: min(252px, calc(100vw - 64px));
    --confirm-box-min-h: clamp(126px, 13vw, 138px);
    --confirm-icon-size: clamp(36px, 3.8vw, 40px);
    --compact-confirm-w: min(196px, calc(100vw - 80px));
    --compact-confirm-icon: clamp(28px, 3vw, 30px);
    --round-title-h: clamp(36px, 3.7vw, 40px);
    --round-title-font: clamp(14px, 1.35vw, 15px);
    --round-action-size: clamp(24px, 2.5vw, 27px);
    --round-meta-pill-font: clamp(12px, 1.1vw, 13px);
    --record-row-h: clamp(33px, 3.25vw, 38px);
    --record-font: clamp(12px, 1.05vw, 13.5px);
    --record-result-font: clamp(12px, 1.1vw, 13.5px);
    --mini-row-h: clamp(38px, 4vw, 42px);
    --mini-row-font: clamp(13px, 1.2vw, 14px);
    --hand-edit-w: min(360px, calc(100vw - 42px));
    --hand-edit-felt-h: clamp(176px, 23vw, 206px);
    --hand-edit-seat-min-w: clamp(102px, 11vw, 118px);
    --hand-edit-seat-h: clamp(34px, 3.6vw, 40px);
    --hand-edit-name-w: clamp(66px, 7vw, 76px);
  }

  .member-strip {
    --member-strip-cols: var(--member-strip-cols-wide);
    gap: var(--member-strip-gap);
  }

  #admin .admin-account-panel .admin-section:not(.admin-control-grid) {
    grid-template-columns: var(--admin-section-cols-wide);
    gap: var(--admin-section-gap);
  }

  #admin .admin-account-panel .admin-section > .admin-capsule-row {
    grid-column: 1 / -1;
  }

  #admin .admin-split-actions {
    gap: var(--admin-section-gap);
  }

  #member-manage .admin-actions,
  #recorder-manage .admin-actions {
    gap: var(--admin-section-gap);
  }

  #detail .detail-table th,
  #detail .detail-table td {
    font-size: var(--detail-table-font);
  }

  .avatar-preview-frame {
    width: var(--avatar-preview-frame);
    height: var(--avatar-preview-frame);
  }

}

@media (min-width: 980px) {
  :root {
    --bottom-nav-space: var(--bottom-nav-space-landscape);
    --page-max: var(--page-max-landscape);
    --page-pad-x: var(--page-pad-x-landscape);
    --page-pad-top: var(--page-pad-top-landscape);
    --panel-pad: var(--panel-pad-landscape);
    --panel-gap: var(--panel-gap-landscape);
    --topbar-gap: var(--topbar-gap-landscape);
    --nav-max: var(--nav-max-landscape);
    --nav-pad-y: var(--nav-pad-y-landscape);
    --nav-button-h: var(--nav-button-h-landscape);
    --nav-plus-size: var(--nav-button-h);
    --topbar-margin-bottom: var(--topbar-margin-bottom-landscape);
    --brand-title-font: var(--brand-title-font-landscape);
    --brand-sub-font: var(--brand-sub-font-landscape);
    --players-saga-action-size: clamp(50px, 3.3vw, 56px);
    --saga-action-size: var(--saga-action-size-tablet);
    --saga-action-shift-y: 0px;
    --overview-panel-pad: clamp(18px, 1.25vw, 22px);
    --overview-panel-radius: clamp(10px, 0.9vw, 13px);
    --overview-panel-space: clamp(16px, 1.2vw, 18px);
    --overview-title-font: clamp(24px, 1.8vw, 28px);
    --overview-head-margin: clamp(14px, 1.1vw, 16px);
    --overview-tabs-gap: clamp(8px, 0.7vw, 9px);
    --overview-tab-h: clamp(38px, 2.6vw, 40px);
    --overview-tab-font: clamp(13px, 0.95vw, 14px);
    --overview-total-tab-cols: repeat(auto-fit, minmax(min(100%, clamp(82px, 7vw, 108px)), 1fr));
    --overview-record-tab-cols: repeat(auto-fit, minmax(min(100%, clamp(76px, 6.2vw, 102px)), 1fr));
    --overview-note-font: clamp(11px, 0.8vw, 12px);
    --overview-note-line: 1.35;
    --overview-note-margin-top: clamp(6px, 0.55vw, 7px);
    --overview-note-margin-bottom: clamp(1px, 0.2vw, 2px);
    --overview-table-margin-top: clamp(10px, 0.8vw, 12px);
    --player-stat-cell-min: clamp(118px, 9vw, 150px);
    --detail-stats-cols: repeat(5, minmax(0, 1fr));
    --detail-title-font: clamp(22px, 1.7vw, 27px);
    --detail-meta-font: clamp(13px, 0.9vw, 15px);
    --detail-meta-icon: clamp(15px, 1vw, 17px);
    --detail-team-font: clamp(16px, 1vw, 18px);
    --detail-stat-min-h: clamp(54px, 4vw, 66px);
    --detail-stat-pad-y: clamp(9px, 0.85vw, 12px);
    --detail-stat-pad-x: clamp(12px, 1vw, 16px);
    --detail-stat-label-font: clamp(13px, 0.9vw, 15px);
    --detail-stat-value-font: clamp(18px, 1.3vw, 22px);
    --detail-stat-shield-size: clamp(16px, 1.1vw, 18px);
    --detail-crown-size: clamp(14px, 1vw, 16px);
    --detail-table-font: clamp(12px, 0.9vw, 14px);
    --hand-round-title-font: clamp(14px, 0.95vw, 16px);
    --hand-round-team-font: clamp(12px, 0.82vw, 14px);
    --rank-meta-font: clamp(12px, 0.9vw, 14px);
    --member-chip-name-font: clamp(13px, 0.82vw, 15px);
    --player-dates-font: clamp(12px, 0.82vw, 14px);
    --player-date-link-col: clamp(86px, 5vw, 94px);
    --rules-combo-name-font: clamp(14px, 1vw, 16px);
    --rules-combo-en-font: clamp(12px, 0.88vw, 14px);
  }

  .app {
    padding-inline: var(--page-pad-x);
  }

  .brand span {
    font-weight: 400;
  }

  #overview .tab {
    font-weight: var(--overview-tab-weight);
  }

  #overview .overview-table th,
  #overview .overview-table td {
    line-height: 1.22;
  }

  #overview .overview-table thead th {
    font-weight: 500;
  }

  #overview .overview-table.player-metric-table th:not(:first-child) {
    font-size: var(--overview-player-head-font);
  }

  #match .match-live {
    display: grid;
    grid-template-columns: var(--match-score-cols);
    gap: var(--match-score-gap);
    align-items: start;
    padding-inline: 0;
  }

  #match .match-live .felt {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  #match .match-live .round-record-card {
    grid-column: 3;
    margin-top: 0;
  }

}

@media (min-width: 1280px) {
  :root {
    --page-max: var(--page-max-desktop);
    --page-pad-x: var(--page-pad-x-desktop);
  }
}

@media (min-width: 1728px) {
  :root {
    --page-max: var(--page-max-wide);
    --page-pad-x: var(--page-pad-x-wide);
  }
}