:root { --ink:#10233f; --muted:#60718a; --line:#d9e3f0; --canvas:#f4f7fb; --panel:#fff; --blue:#2f63d9; --blue-soft:#eaf1ff; --green:#008b61; --green-soft:#e4f6ed; --red:#c93d58; --red-soft:#fbe8ee; --neutral:#65758b; --neutral-soft:#eef2f7; }
.rank-dialog{width:min(980px,calc(100vw - 32px))!important;height:min(88dvh,900px)!important;max-height:none!important;overflow:hidden!important}.rank-dialog-card{display:flex!important;height:100%!important;flex-direction:column!important;overflow:hidden!important}.rank-dialog-header{flex:0 0 auto!important}.rank-table-wrap{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:auto!important}@media(max-width:700px){.rank-dialog{width:calc(100vw - 24px)!important;height:88dvh!important}.rank-table-wrap{max-height:none!important}}
.rank-team-name-short{display:none}
.rank-unplayed summary{cursor:pointer;list-style:none}.rank-unplayed summary::-webkit-details-marker{display:none}.rank-unplayed summary h3::after{content:"⌄";display:inline-block;margin-left:8px;color:var(--muted);transition:transform .15s ease}.rank-unplayed:not([open]) summary h3::after{transform:rotate(-90deg)}
@media(max-width:700px){.rank-team-name-full{display:none}.rank-team-name-short{display:inline}.rank-table .rank-name small{display:none}.rank-table-wrap{min-height:240px!important}.rank-unplayed{flex:0 0 auto!important}.rank-unplayed[open]{max-height:42dvh;overflow:auto}}
.rank-dialog{width:min(980px,calc(100vw - 32px))!important;height:min(88dvh,900px)!important;max-height:none!important;overflow:hidden!important}.rank-dialog-card{display:flex!important;height:100%!important;flex-direction:column!important;overflow:hidden!important}.rank-dialog-header{flex:0 0 auto!important}.rank-table-wrap{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:auto!important}@media(max-width:700px){.rank-dialog{width:calc(100vw - 24px)!important;height:88dvh!important}.rank-table-wrap{overflow-x:hidden!important;max-height:none!important}.rank-table{min-width:0!important;table-layout:fixed}.rank-table th,.rank-table td{padding:8px 8px;font-size:12px}.rank-table th:nth-child(1),.rank-table td:nth-child(1){width:34px}.rank-table th:nth-child(2),.rank-table td:nth-child(2){width:auto}.rank-table th:nth-child(3),.rank-table td:nth-child(3){display:none}.rank-table th:nth-child(4),.rank-table td:nth-child(4){width:88px}.rank-table th:nth-child(5),.rank-table td:nth-child(5){width:63px}.rank-name{min-width:0;gap:4px}.rank-name img{width:29px;height:29px;padding:1px}.rank-name strong{font-size:12px;overflow-wrap:anywhere}.rank-name small{font-size:12px}.rank-record{font-size:12px}.rank-point{font-size:12px}}
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--canvas); font-family:"Noto Sans JP",system-ui,sans-serif; }
.app-shell { width:min(100%,1480px); min-height:100dvh; margin:0 auto; background:var(--canvas); box-shadow:0 0 28px rgba(24,48,82,.07); }
.topbar { min-height:94px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px clamp(24px,4vw,58px); background:var(--panel); border-bottom:1px solid var(--line); }
.brand h1,.section-header h2,.summary-team h2 { margin:2px 0 0; font-size:clamp(23px,2.4vw,32px); line-height:1.2; }
.eyebrow { color:#c78000; font-size:12px; font-weight:600; letter-spacing:0; }
.header-status { display:flex; align-items:center; justify-content:flex-end; gap:8px; }.last-updated { color:#49617e; background:#f7f9fc; border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:13px; font-weight:600; white-space:nowrap; }.api-status { color:#50709f; background:#edf3fb; border-radius:8px; padding:8px 12px; font-size:12px; font-weight:600; white-space:nowrap; }
.control-bar { display:grid; grid-template-columns:max-content minmax(250px,360px) minmax(300px,560px); gap:24px; align-items:end; padding:20px clamp(24px,4vw,58px); background:var(--panel); border-bottom:1px solid var(--line); }
.field,.scope-control,.target-control { position:relative; display:grid; gap:8px; }
.field span,.field-label { color:#49617e; font-size:13px; font-weight:600; }
select,.scope-trigger { width:100%; min-height:46px; padding:0 16px; color:var(--ink); background:#fff; border:1px solid #cfdceb; border-radius:8px; font:inherit; text-align:left; }
.scope-trigger { display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.target-mode { display:grid; grid-template-columns:repeat(2,minmax(72px,1fr)); overflow:hidden; border:1px solid #cfdceb; border-radius:8px; background:#fff; }.target-mode button { height:44px; padding:0 16px; border:0; border-right:1px solid #d7e0ef; background:transparent; color:#526783; font:inherit; font-weight:600; cursor:pointer; }.target-mode button:last-child { border-right:0; }.target-mode button.active { background:#315fd4; color:#fff; }
.scope-popover { position:absolute; z-index:10; top:72px; width:min(430px,calc(100vw - 48px)); padding:12px; background:#fff; border:1px solid #cbd8ea; box-shadow:0 16px 34px rgba(25,50,85,.18); border-radius:8px; }
.scope-popover label { display:flex; gap:8px; align-items:center; min-height:30px; padding:2px 8px; font-size:14px; cursor:pointer; }
.scope-popover hr { border:0; border-top:1px solid var(--line); margin:8px 0; }.scope-popover p { margin:4px 8px 8px; color:var(--muted); font-size:12px; font-weight:600; }
.season-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); max-height:220px; overflow:auto; }.season-options label { white-space:nowrap; }
.team-summary { display:flex; justify-content:space-between; gap:32px; align-items:center; padding:20px clamp(24px,4vw,58px); background:#f9fbfe; border-bottom:1px solid var(--line); }
.summary-team { display:flex; align-items:center; gap:16px; }.summary-team>img { width:76px; height:76px; object-fit:contain; background:white; border:1px solid var(--line); border-radius:12px; padding:8px; }.summary-team h2 { font-size:24px; }.summary-team p { margin:4px 0 0; color:var(--muted); font-size:14px; }
.summary-roster { display:flex; align-items:center; gap:20px; color:var(--muted); font-size:13px; font-weight:600; }.summary-roster>div { display:flex; gap:12px; }.summary-roster figure { width:54px; margin:0; text-align:center; color:var(--ink); font-size:12px; font-weight:600; }.summary-roster img { display:block; width:42px; height:42px; object-fit:cover; margin:0 auto 4px; border-radius:8px; background:#e8eef6; }
.summary-player-context { display:flex; align-items:center; gap:8px; margin-left:auto; color:#587094; font-size:13px; font-weight:600; }.summary-player-context img { width:40px; height:40px; object-fit:contain; border:1px solid var(--line); border-radius:8px; background:#fff; }
.matchup-section { padding:28px clamp(24px,4vw,58px) 48px; }.section-header { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:16px; }.section-header h2 { font-size:25px; }.section-header p { margin:0; color:var(--muted); font-size:13px; }
.matchup-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.matchup-grid-free-target { grid-template-columns:minmax(0,1fr); }.opponent-card-free { grid-column:1 / -1; }.opponent-card { overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 7px 20px rgba(24,48,82,.06); }.opponent-card::before { display:block; height:5px; background:linear-gradient(90deg,var(--target-accent) 0%,var(--target-accent) 42%,var(--opponent-accent) 58%,var(--opponent-accent) 100%); content:""; }.matchup-card-header { display:grid; grid-template-columns:minmax(0,1.35fr) 24px minmax(0,1fr); align-items:center; gap:8px; min-height:91px; padding:12px 16px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,var(--target-soft) 0%,var(--target-soft) 42%,var(--opponent-soft) 58%,var(--opponent-soft) 100%); }.card-team { display:flex; min-width:0; align-items:center; gap:8px; }.card-team-target { padding-left:8px; border-left:3px solid var(--target-accent); }.card-team-opponent { padding-right:8px; border-right:3px solid var(--opponent-accent); justify-content:flex-end; text-align:right; }.card-team img { flex:0 0 auto; object-fit:contain; background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:4px; }.card-team-target img { width:57px; height:57px; }.card-team-opponent img { width:42px; height:42px; }.card-team span { display:block; color:var(--muted); font-size:12px; font-weight:600; }.card-team h3 { margin:2px 0 0; overflow-wrap:anywhere; font-size:13px; line-height:1.25; }.card-team-target h3 { font-size:16px; }.versus { color:#7b8aa1; font-size:12px; text-align:center; }
.team-total { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); color:#49617e; font-size:12px; font-weight:600; }.scope-name-short { display:none; }.result { display:grid; grid-template-columns:max-content minmax(76px,max-content); align-items:baseline; justify-content:end; column-gap:12px; width:max-content; min-width:0; }.result strong { justify-self:end; color:var(--ink); font-size:14px; white-space:nowrap; }.record-stat { display:inline-block; font-variant-numeric:tabular-nums; white-space:nowrap; }.record-empty { display:inline-block; min-width:calc(6ch + 3em + 5px); text-align:center; }.result span { justify-self:end; min-width:76px; font-size:17px; font-weight:600; text-align:right; white-space:nowrap; }.result.positive span { color:var(--green); }.result.negative span { color:var(--red); }.result.neutral span { color:var(--neutral); }.team-result { box-sizing:content-box; padding:8px 8px; border-radius:6px; }.team-result.positive { background:var(--green-soft); }.team-result.negative { background:var(--red-soft); }.team-result.neutral { background:var(--neutral-soft); }
.player-results-label { display:flex; justify-content:space-between; padding:8px 16px 8px; color:var(--muted); font-size:12px; font-weight:600; }.player-result { display:flex; justify-content:space-between; align-items:center; gap:8px; min-height:54px; padding:8px 16px; border-top:1px solid #edf1f6; }.player-name { display:flex; align-items:center; gap:8px; min-width:0; font-size:13px; font-weight:600; }.player-name img { width:35px; height:35px; object-fit:cover; border-radius:6px; background:#e8eef6; }.player-result .result { min-width:150px; }.player-result .result strong { font-size:12px; }.player-result .result span { font-size:14px; }
.direct-details { border-top:1px solid var(--line); }.direct-details summary { padding:12px 16px; color:#315d9e; font-size:13px; font-weight:600; cursor:pointer; }.direct-details[open] summary { border-bottom:1px solid var(--line); background:#f8faff; }.direct-matrix { padding:12px; overflow:hidden; }.matrix-header,.matrix-row { display:grid; grid-template-columns:82px repeat(4,minmax(0,1fr)); gap:4px; }.matrix-header { align-items:end; margin-bottom:4px; }.matrix-header span { min-width:0; color:var(--muted); font-size:12px; font-weight:600; line-height:1.25; text-align:center; overflow-wrap:anywhere; }.matrix-row { min-height:40px; margin-bottom:4px; }.matrix-row>span:first-child { display:flex; align-items:center; padding-left:4px; color:var(--ink); font-size:12px; font-weight:600; }.matrix-cell { display:grid; align-content:center; gap:1px; padding:4px 1px; border-radius:4px; text-align:center; }.matrix-cell b { font-size:12px; line-height:1; }.matrix-cell em { font-size:12px; font-style:normal; font-weight:600; line-height:1; }.matrix-cell.positive { background:var(--green-soft); color:var(--green); }.matrix-cell.negative { background:var(--red-soft); color:var(--red); }.matrix-cell.neutral { background:var(--neutral-soft); color:var(--neutral); }.direct-matrix-wide { overflow-x:auto; overflow-y:hidden; padding-bottom:16px; overscroll-behavior-x:contain; scrollbar-color:#9cafc7 transparent; scrollbar-width:thin; }.direct-matrix-wide .matrix-header,.direct-matrix-wide .matrix-row { width:max-content; min-width:100%; grid-template-columns:82px repeat(var(--matrix-columns),126px); }.direct-matrix-wide .matrix-header>span:first-child,.direct-matrix-wide .matrix-row>span:first-child { position:sticky; z-index:1; left:0; background:#fff; }.startup-notice { position:fixed; z-index:30; top:16px; left:50%; width:max-content; max-width:calc(100vw - 36px); padding:12px 16px; color:#173d74; background:#edf4ff; border:1px solid #bfd1ed; border-radius:8px; box-shadow:0 12px 30px rgba(24,48,82,.18); font-size:14px; font-weight:600; text-align:center; transform:translateX(-50%); transition:opacity .25s ease,transform .25s ease; }.startup-notice.is-hidden { opacity:0; transform:translate(-50%,-8px); pointer-events:none; }
@media (max-width:1100px) { .team-summary { align-items:flex-start; flex-direction:column; gap:16px; } }
@media (max-width:700px) { .topbar { min-height:76px; padding:12px 20px; }.brand h1 { font-size:21px; }.header-status { align-items:flex-end; flex-direction:column; gap:4px; }.last-updated { padding:8px 8px; font-size:12px; }.api-status { padding:8px 8px; font-size:12px; }.control-bar { grid-template-columns:1fr; gap:12px; padding:16px 20px; }.target-mode { width:min(190px,100%); }.scope-popover { top:68px; width:calc(100vw - 36px); }.season-options { grid-template-columns:repeat(2,minmax(0,1fr)); }.team-summary { padding:16px 20px; }.summary-team>img { width:57px; height:57px; }.summary-team h2 { font-size:20px; }.summary-player-context { margin-left:0; }.summary-roster { display:block; }.summary-roster>span { display:block; margin-bottom:8px; }.matchup-section { padding:20px 20px 36px; }.section-header { display:block; margin-bottom:12px; }.section-header h2 { font-size:21px; }.section-header p { margin-top:8px; line-height:1.55; }.matchup-grid { grid-template-columns:1fr; gap:12px; }.matchup-card-header { min-height:78px; padding:8px 12px; }.card-team-target img { width:49px; height:49px; }.card-team-opponent img { width:36px; height:36px; }.card-team-target h3 { font-size:14px; }.card-team h3 { font-size:12px; }.team-total { gap:4px; padding:8px 12px; }.scope-name-full { display:none; }.scope-name-short { display:inline; }.team-result { padding:8px 4px; }.result { column-gap:8px; }.result strong { font-size:12px; }.result span { min-width:64px; font-size:15px; }.startup-notice { top:12px; padding:12px 12px; font-size:13px; } }
.section-tools{display:flex;align-items:flex-end;gap:16px}.rank-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.rank-button{min-height:34px;padding:8px 12px;color:#315d9e;background:#fff;border:1px solid #c8d6e9;border-radius:6px;font:inherit;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer}.rank-button:disabled{color:#8ca0b8;background:#f5f7fa;cursor:wait}.rank-dialog{width:min(820px,calc(100vw - 32px));max-height:84dvh;margin:auto;padding:0;color:var(--ink);background:#fff;border:1px solid #cbd8ea;border-radius:12px;box-shadow:0 24px 70px rgba(12,35,66,.28)}.rank-dialog::backdrop{background:rgba(11,28,52,.48)}.rank-dialog-card{overflow:hidden}.rank-dialog-header{display:flex;justify-content:space-between;gap:16px;padding:20px 24px 16px;border-bottom:1px solid var(--line);background:#f8faff}.rank-dialog-header h2{margin:4px 0 0;font-size:23px}.rank-dialog-header p{margin:8px 0 0;color:var(--muted);font-size:13px;font-weight:600}.rank-dialog-tools{display:flex;align-items:flex-start;gap:16px}.rank-target{display:flex;align-items:center;max-width:330px;gap:12px;text-align:right}.rank-target img{width:68px;height:68px;object-fit:contain;padding:4px;background:#fff;border:1px solid #dbe4ef;border-radius:8px}.rank-target small,.rank-target strong{display:block}.rank-target small{color:#617590;font-size:12px;font-weight:600}.rank-target strong{font-size:18px;line-height:1.2}.rank-close{display:grid;flex:0 0 auto;width:34px;height:34px;place-items:center;padding:0;color:#4b6381;background:#fff;border:1px solid #d8e1ed;border-radius:50%;font-size:25px;line-height:1;cursor:pointer}.rank-table-wrap{max-height:calc(84dvh - 130px);overflow:auto}.rank-table{width:100%;min-width:600px;border-collapse:collapse;font-size:13px}.rank-table th{position:sticky;z-index:1;top:0;padding:12px 16px;color:#4d6687;background:#fff;border-bottom:1px solid var(--line);font-size:12px;text-align:right}.rank-table th:nth-child(2){text-align:left}.rank-table td{padding:8px 16px;border-bottom:1px solid #e8eef5;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.rank-number{color:#8b6915;font-weight:600}.rank-name{display:flex;align-items:center;min-width:160px;gap:8px;text-align:left}.rank-name img,.rank-unplayed-player img{width:36px;height:36px;object-fit:contain;padding:2px;background:#fff;border:1px solid #dbe4ef;border-radius:6px}.rank-name strong,.rank-name small,.rank-unplayed-player strong,.rank-unplayed-player small{display:block}.rank-name strong,.rank-unplayed-player strong{font-size:13px}.rank-name small,.rank-unplayed-player small{margin-top:2px;color:var(--muted);font-size:12px;font-weight:600}.rank-record{font-weight:600}.rank-point{font-size:16px;font-weight:600}.rank-point.positive{color:var(--green)}.rank-point.negative{color:var(--red)}.rank-empty{padding:40px 16px!important;color:var(--muted);text-align:center!important}.rank-unplayed{padding:20px 24px 24px;border-top:1px solid var(--line);background:#f8faff}.rank-unplayed h3{margin:0;font-size:15px}.rank-unplayed>p{margin:4px 0 12px;color:var(--muted);font-size:12px}.rank-unplayed-list{display:flex;flex-wrap:wrap;gap:8px}.rank-unplayed-player{display:flex;align-items:center;min-width:170px;gap:8px;padding:8px 8px;background:#fff;border:1px solid #dce5f0;border-radius:6px}.rank-unplayed-player img{width:30px;height:30px}.rank-unplayed-player strong{font-size:12px}@media(max-width:700px){.section-tools{display:block;margin-top:12px}.rank-actions{justify-content:flex-start;margin-top:12px}.rank-button{flex:1 1 150px}.rank-dialog{width:calc(100vw - 24px)}.rank-dialog-header{padding:16px}.rank-dialog-header h2{font-size:20px}.rank-target{max-width:170px;gap:8px}.rank-target img{width:46px;height:46px}.rank-target strong{font-size:14px}.rank-table-wrap{max-height:calc(84dvh - 116px)}.rank-table{min-width:560px}.rank-unplayed{padding:16px 16px 20px}.rank-unplayed-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.rank-unplayed-player{min-width:0}}

.help-button { min-height:36px; padding:0 12px; color:#315d9e; background:#fff; border:1px solid #c8d6e9; border-radius:8px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
@media (hover: hover) { .help-button:hover { background:#f4f8ff; } }
.tour-overlay { position:fixed; z-index:90; inset:0; pointer-events:none; background:rgba(11,28,52,.34); }
.tour-card { position:fixed; z-index:102; width:min(340px,calc(100vw - 32px)); padding:20px; color:var(--ink); background:#fff; border:1px solid #a8c2ea; border-radius:8px; box-shadow:0 18px 45px rgba(10,31,62,.28); pointer-events:auto; }
.tour-step { display:block; color:#b98112; font-size:12px; font-weight:600; }
.tour-card h2 { margin:8px 0 0; font-size:19px; line-height:1.3; }
.tour-card p { margin:8px 0 16px; color:#49617e; font-size:13px; font-weight:600; line-height:1.65; }
.tour-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tour-actions div { display:flex; gap:8px; }
.tour-actions button { min-height:34px; padding:0 12px; border:1px solid #c8d6e9; border-radius:6px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.tour-back,.tour-skip { color:#55708f; background:#fff; }.tour-next { color:#fff; background:#3264d8; border-color:#3264d8!important; }.tour-actions button:disabled { opacity:.45; cursor:default; }
.is-tour-target { position:relative!important; z-index:101!important; outline:3px solid #4778e6; outline-offset:4px; border-radius:8px; box-shadow:0 0 0 8px rgba(71,120,230,.16)!important; }
@media(max-width:700px) { .help-button { min-height:30px; padding:0 8px; font-size:12px; }.tour-card { right:16px; bottom:16px; left:16px!important; top:auto!important; width:auto; padding:16px; }.tour-card h2 { font-size:18px; }.tour-card p { font-size:12px; }.is-tour-target { outline-offset:2px; box-shadow:0 0 0 5px rgba(71,120,230,.16)!important; } }


/* Shared type, spacing, surfaces and controls for the comparison workspace. */
:root { --surface-radius:12px; --control-radius:8px; --green:#087c59; --red:#b62e4c; }
body { line-height:1.5; }
h1,h2,h3 { font-weight:600; text-wrap:balance; }
button,input,select,summary { font:inherit; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.app-shell { box-shadow:none; }
.topbar { gap:24px; padding:24px clamp(24px,4vw,56px); }
.brand h1 { line-height:1.35; }
.eyebrow { font-size:12px; font-weight:600; color:#94660c; letter-spacing:0; }
.header-status { gap:8px; }
.last-updated,.api-status { border-radius:var(--control-radius); padding:8px 12px; font-size:12px; }
.control-bar { gap:24px; padding:16px clamp(24px,4vw,56px); grid-template-columns:144px minmax(0,360px) minmax(0,1fr); }
.field,.scope-control,.target-control { gap:8px; min-width:0; }
select,.scope-trigger { min-height:48px; padding:8px 16px; font-size:16px; border-radius:var(--control-radius); }
.target-mode button { min-height:48px; height:auto; padding:8px 16px; }
.scope-popover { top:calc(100% + 8px); width:min(480px,calc(100vw - 48px)); padding:12px; border-radius:var(--surface-radius); max-height:65dvh; overflow:auto; }
.scope-popover label { min-height:44px; padding:8px; gap:8px; }
.scope-popover input { width:20px; height:20px; flex:0 0 auto; accent-color:var(--blue); }
.scope-popover p { margin:8px; }
.season-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
.team-summary { gap:24px; padding:24px clamp(24px,4vw,56px); }
.summary-team { min-width:0; gap:16px; }
.summary-team>img { border-radius:var(--surface-radius); padding:8px; }
.summary-team p { margin:8px 0 0; }
.summary-roster { flex-wrap:wrap; gap:16px; }
.summary-roster>div { flex-wrap:wrap; gap:12px; }
.summary-roster figure { width:64px; font-size:12px; }
.summary-roster img { width:48px; height:48px; margin-bottom:4px; border-radius:var(--control-radius); }
.summary-player-context { flex-wrap:wrap; gap:8px; }
.matchup-section { padding:32px clamp(24px,4vw,56px) 48px; }
.section-header { gap:24px; }
.section-header h2 { font-size:24px; }
.section-tools { gap:16px; }
.rank-actions { gap:8px; }
.help-button,.rank-button,.tour-actions button { min-height:44px; padding:8px 12px; border-radius:var(--control-radius); font-size:14px; }
.matchup-grid { gap:24px; align-items:start; }
.opponent-card { border-radius:var(--surface-radius); box-shadow:none; }
.opponent-card::before { display:none; }
.matchup-card-header { padding:16px; background:var(--panel); gap:8px; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); }
.card-team { align-self:stretch; border:0; padding:8px; border-radius:var(--control-radius); }
.card-team-target { background:var(--target-soft); }
.card-team-opponent { background:var(--opponent-soft); }
.card-team img { padding:4px; border-radius:var(--control-radius); }
.card-team-target img,.card-team-opponent img { width:48px; height:48px; }
.card-team h3,.card-team-target h3 { font-size:14px; line-height:1.5; }
.card-team span { font-size:12px; }
.team-total { padding:12px 16px; gap:12px; flex-wrap:wrap; }
.result { gap:12px; font-variant-numeric:tabular-nums; }
.result strong,.player-result .result strong { font-size:14px; font-weight:600; }
.result span,.player-result .result span { font-size:16px; font-weight:600; }
.team-result { padding:8px 12px; border-radius:var(--control-radius); margin-left:auto; }
.player-results-label { padding:12px 16px 8px; font-size:12px; }
.player-result { min-height:64px; padding:12px 16px; gap:12px; flex-wrap:wrap; }
.player-name { font-size:14px; gap:8px; }
.player-name img { width:40px; height:40px; border-radius:var(--control-radius); }
.player-result .result { min-width:0; margin-left:auto; }
.direct-details summary { min-height:48px; padding:12px 16px; font-size:14px; }
.direct-matrix { padding:12px; overflow:auto; overscroll-behavior-x:contain; }
.matrix-header,.matrix-row,.direct-matrix-wide .matrix-header,.direct-matrix-wide .matrix-row { grid-template-columns:104px repeat(var(--matrix-columns,4),minmax(104px,1fr)); min-width:560px; gap:4px; }
.direct-matrix-wide .matrix-header,.direct-matrix-wide .matrix-row { grid-template-columns:104px repeat(var(--matrix-columns),126px); }
.matrix-header { margin-bottom:4px; }
.matrix-row { min-height:56px; margin-bottom:4px; }
.matrix-header span,.matrix-row>span:first-child,.matrix-cell b,.matrix-cell em { font-size:12px; line-height:1.5; font-weight:600; }
.matrix-row>span:first-child { padding:4px; }
.matrix-cell { padding:8px 4px; gap:4px; font-variant-numeric:tabular-nums; }
.rank-dialog { border-radius:var(--surface-radius); height:min(88dvh,900px)!important; }
.rank-dialog-header { padding:24px; flex-wrap:wrap; gap:16px; }
.rank-dialog-header h2 { font-size:24px; }
.rank-dialog-header p { margin:8px 0 0; }
.rank-target { gap:12px; }
.rank-target small { font-size:12px; }
.rank-target strong { line-height:1.5; }
.rank-target img { border-radius:var(--control-radius); padding:4px; }
.rank-close { min-width:44px; min-height:44px; }
.rank-table { min-width:620px; }
.rank-table th,.rank-table td { padding:12px 16px; font-size:14px; }
.rank-name strong,.rank-name small { font-size:14px; }
.rank-name strong { white-space:normal; }
.rank-name small { font-size:12px; }
.rank-name img,.rank-unplayed-player img { padding:4px; border-radius:var(--control-radius); }
.rank-point { font-size:16px; }
.rank-unplayed { padding:16px 24px; }
.rank-unplayed summary { min-height:44px; display:flex; align-items:center; }
.rank-unplayed-list { gap:8px; }
.rank-unplayed-player { gap:8px; padding:8px; border-radius:var(--control-radius); }
.tour-card { padding:24px; border-radius:var(--surface-radius); }
.tour-card p { margin:12px 0 16px; font-size:14px; }
.tour-actions div { gap:8px; }
.startup-notice { padding:12px 16px; border-radius:var(--control-radius); }
.design-test-note { margin:8px 0 0; color:var(--muted); font-size:12px; }
@media (max-width:1000px) { .matchup-grid { grid-template-columns:minmax(0,1fr); } }
@media (max-width:700px) {
  .topbar { flex-wrap:wrap; gap:16px; padding:16px; }
  .brand h1 { font-size:24px; overflow-wrap:anywhere; }
  .header-status { width:100%; flex-direction:row; justify-content:space-between; align-items:center; gap:8px; }
  .last-updated { white-space:normal; }
  .control-bar { grid-template-columns:minmax(0,1fr); gap:16px; padding:16px; }
  .scope-popover { width:100%; }
  .season-options { grid-template-columns:minmax(0,1fr); }
  .team-summary { padding:16px; gap:16px; }
  .summary-team { flex-wrap:wrap; }
  .summary-team h2 { font-size:20px; }
  .summary-roster>div { gap:8px; }
  .matchup-section { padding:24px 12px; }
  .matchup-grid { gap:16px; }
  .section-header { margin-bottom:16px; }
  .section-header h2 { font-size:20px; }
  .rank-actions { margin-top:12px; }
  .rank-button { flex:1 1 128px; white-space:normal; }
  .matchup-card-header { padding:12px; }
  .card-team { flex-direction:column; align-items:flex-start; gap:8px; }
  .card-team-opponent { align-items:flex-end; }
  .card-team h3 { font-size:14px; }
  .team-total { padding:12px; }
  .scope-name-full { display:inline; }
  .scope-name-short { display:none; }
  .player-result { padding:12px; }
  .player-name { font-size:14px; }
  .rank-dialog { width:calc(100vw - 16px)!important; height:88dvh!important; }
  .rank-dialog-header { padding:16px; }
  .rank-dialog-header h2 { font-size:20px; }
  .rank-dialog-tools { flex:1; justify-content:space-between; }
  .rank-table-wrap { overflow:auto!important; }
  .rank-table { min-width:620px!important; table-layout:auto; }
  .rank-table th,.rank-table td { font-size:14px; padding:12px; width:auto!important; }
  .rank-table th:nth-child(3),.rank-table td:nth-child(3) { display:table-cell; }
  .rank-team-name-full { display:none; }
  .rank-team-name-short { display:inline; }
  .rank-table .rank-name small { display:block; }
  .rank-name { min-width:180px; gap:8px; }
  .rank-name strong { font-size:14px; }
  .rank-name small { font-size:12px; }
  .rank-record { font-size:14px; }
  .rank-point { font-size:16px; }
  .rank-unplayed { padding:16px; }
  .rank-unplayed-list { grid-template-columns:minmax(0,1fr); }
  .tour-card { padding:16px; bottom:16px; }
  .tour-card p { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}