/* Shared match dialog: one compact comparison before play, the existing report afterwards. */
html.match-dialog-open{overflow:hidden}
.match-dialog{--match-dialog-width:1120px;width:min(var(--match-dialog-width),calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;padding:0;border:1px solid var(--line);border-radius:14px;color:var(--text);background:var(--surface);box-shadow:0 24px 100px #0005;overflow:auto;overscroll-behavior:contain}
.match-dialog.is-preview{--match-dialog-width:800px}
.match-dialog::backdrop{background:#030a14a6;backdrop-filter:blur(5px)}
.match-dialog-toolbar{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:14px;min-height:57px;padding:10px 18px;background:var(--surface);border-bottom:1px solid var(--line)}
.match-dialog-toolbar>h2{flex:1;min-width:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.match-dialog-full{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;font-size:12px;color:var(--muted)}
.match-dialog-close{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:7px;color:var(--muted);background:var(--surface-2);font:25px/1 Arial,sans-serif}
.match-dialog-close:hover{color:var(--text);background:var(--surface-3)}
.match-dialog-body{min-height:180px;padding:18px 22px 22px}
.match-dialog-loading,.match-dialog-error{min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--muted);text-align:center}
.match-dialog-loading::before{content:"";width:24px;height:24px;border:2px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:match-dialog-spin .9s linear infinite}
.match-dialog-error>div{display:flex;gap:16px;align-items:center;justify-content:center}.match-dialog-error button{padding:7px 16px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--text)}.match-dialog-error a{color:var(--blue);font-size:13px}
.match-dialog .match-scoreboard{padding:12px 18px;border-radius:9px;background:var(--surface-2)}
.match-dialog .scoreboard-meta{font-size:12px;gap:8px;margin-bottom:10px}
.match-dialog .scoreboard-teams{gap:16px;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
.match-dialog .scoreboard-team{gap:8px;min-width:0}.match-dialog .scoreboard-team h1,.match-dialog .scoreboard-team h2{font-size:18px;line-height:1.3;overflow-wrap:anywhere}.match-dialog .scoreboard-team>span{font-size:11px}
.match-dialog .team-mark-large{width:46px;height:46px;flex-basis:46px;font-size:14px}.match-dialog .team-mark-large img{padding:4px}
.match-dialog .scoreboard-score>small{display:none}.match-dialog .scoreboard-score>strong{font-size:32px;line-height:1.2}.match-dialog .scoreboard-score>.result-tag{margin-top:5px;font-size:11px}
.match-dialog .match-game-tabs{margin-top:16px}.match-dialog .section-block{margin-top:16px}.match-dialog .game-panel{padding:0}.match-dialog .br-game-heading{margin-bottom:10px}

.match-preview{margin-top:18px;min-width:0}
.match-preview-heading{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:10px}.match-preview-heading>h2{font-size:14px;font-weight:650}.match-preview-heading>span{font-size:11px;color:var(--muted)}
.match-preview-compare{display:grid;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);gap:10px;align-items:start}
.match-preview-lineup{display:grid;grid-template-rows:repeat(5,60px);min-width:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.match-preview-player{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 12px;background:color-mix(in srgb,var(--blue) 3%,var(--surface))}.match-preview-player-b{background:color-mix(in srgb,var(--red) 3%,var(--surface))}.match-preview-player+div{border-top:1px solid var(--line)}
.match-preview-person{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.match-preview-player-b{flex-direction:row-reverse}.match-preview-player-b .match-preview-person{flex-direction:row-reverse;text-align:right}
.match-preview-photo{position:relative;display:grid;place-items:center;width:38px;height:42px;flex:0 0 38px;overflow:hidden;border-radius:5px;background:var(--surface-3);color:var(--muted);font-size:17px}.match-preview-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.match-preview-photo>img[hidden]{display:none}
.match-preview-identity{display:flex;flex-direction:column;gap:3px;min-width:0}.match-preview-identity strong{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.match-preview-identity small{font-size:11px;line-height:1.2;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match-preview-player-meta{display:flex;align-items:center;gap:7px;min-width:0}.match-preview-player-meta>small{min-width:0;flex:1}.match-preview-player-meta>.grade-badge{flex-shrink:0}.match-preview-player-b .match-preview-player-meta{flex-direction:row-reverse}
.match-preview-player .grade-badge{font-size:12px;min-width:28px;min-height:23px;padding:3px 6px}
.match-preview-roles{display:grid;grid-template-rows:repeat(5,60px);padding:1px 0}.match-preview-roles>span{display:grid;place-items:center;color:var(--muted)}.match-preview-roles .role-icon{width:23px;height:23px}
.match-preview-unannounced{font-size:12px;color:var(--muted)}
.match-preview .series-support{margin-top:14px;padding:11px 13px 8px;border-radius:8px;background:var(--surface-2)}.match-preview .support-heading{margin-bottom:5px}.match-preview .support-heading h2{font-size:13px}.match-preview .support-heading>span{font-size:11px}.match-preview .support-choices{gap:62px}.match-preview .support-choice{min-height:36px;padding:4px 7px}.match-preview .support-choice strong{font-size:17px}.match-preview .support-team-name{font-size:13px}.match-preview .support-track{height:5px}.match-preview .support-feedback{font-size:11px}
[data-theme=light] .match-dialog{box-shadow:0 24px 100px #12345c26}[data-theme=light] .match-dialog::backdrop{background:#20334666}
@keyframes match-dialog-spin{to{transform:rotate(1turn)}}
@media(max-width:700px){.match-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 24px);border-radius:10px}.match-dialog-toolbar{gap:8px;min-height:51px;padding:8px 12px}.match-dialog-toolbar>h2{font-size:13px}.match-dialog-full{font-size:11px}.match-dialog-body{padding:12px 10px 16px}.match-dialog .match-scoreboard{padding:10px}.match-dialog .scoreboard-meta{font-size:10px;flex-wrap:wrap}.match-dialog .scoreboard-teams{gap:8px}.match-dialog .scoreboard-team h1,.match-dialog .scoreboard-team h2{font-size:14px}.match-dialog .team-mark-large{width:34px;height:34px;flex-basis:34px}.match-dialog .scoreboard-score>strong{font-size:25px}.match-dialog .scoreboard-score>.result-tag{font-size:10px;padding:2px 6px}.match-preview-heading{gap:8px}.match-preview-heading>span{max-width:180px;text-align:right;font-size:10px}.match-preview-compare{grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr);gap:5px}.match-preview-lineup,.match-preview-roles{grid-template-rows:repeat(5,57px)}.match-preview-player{gap:5px;padding:7px 6px}.match-preview-person{gap:5px}.match-preview-photo{width:28px;height:34px;flex-basis:28px;font-size:14px}.match-preview-identity strong{font-size:12px}.match-preview-identity small{font-size:10px}.match-preview-player .grade-badge{font-size:10px;min-width:21px;min-height:21px;padding:2px 3px}.match-preview-roles .role-icon{width:19px;height:19px}.match-preview .support-choices{gap:22px}.match-preview .support-choice{min-height:36px;flex-wrap:wrap}.match-preview .support-team-name{font-size:12px;width:100%}.match-preview .support-choice strong{font-size:15px}.match-preview .support-choice-action{font-size:10px;padding:1px 5px}}
@media(prefers-reduced-motion:reduce){.match-dialog-loading::before{animation:none}}
/* The report's mobile layout uses stacked stats; preserve its original row height. */
@media(max-width:760px){.match-dialog .match-report-page{--br-row:154px}}

/* Paint-only refinements: preserve the report and five-row comparison geometry. */
.match-dialog{
  border-color:color-mix(in srgb,var(--muted) 16%,var(--line));
  box-shadow:0 32px 100px #02071366,0 8px 24px #02071326,inset 0 1px 0 #ffffff0a;
}
.match-dialog[open]{animation:match-dialog-enter .24s cubic-bezier(.16,1,.3,1) both}
.match-dialog[open]::backdrop{animation:match-dialog-backdrop-enter .22s ease-out both}
.match-dialog::backdrop{background:#020a16b3;backdrop-filter:blur(7px);transition:background-color .2s ease}
.match-dialog-toolbar{
  background:color-mix(in srgb,var(--surface-2) 42%,var(--surface));
  border-bottom-color:color-mix(in srgb,var(--line) 85%,transparent);
  box-shadow:inset 0 1px 0 #ffffff06;
}
.match-dialog-full{transition:color .16s ease}
.match-dialog-full>span{display:inline-block;transition:transform .16s ease}
.match-dialog-full:is(:hover,:focus-visible){color:var(--blue)}
.match-dialog-close{transition:color .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease}
.match-dialog-close:is(:hover,:focus-visible){border-color:color-mix(in srgb,var(--blue) 42%,var(--line));color:var(--text);box-shadow:0 2px 8px #020a1614}
.match-dialog-body>[data-match-fragment]{animation:match-dialog-content-enter .18s ease-out both}
.match-dialog .match-scoreboard{border-color:color-mix(in srgb,var(--muted) 12%,var(--line));box-shadow:inset 0 1px 0 #ffffff05}
.match-dialog .scoreboard-team .team-mark{transition:box-shadow .18s ease,background-color .18s ease}
.match-dialog .scoreboard-team{--match-side:var(--blue)}
.match-dialog .scoreboard-team:last-child{--match-side:var(--red)}

.match-dialog .match-preview-lineup:first-child{--match-side:var(--blue)}
.match-dialog .match-preview-lineup:last-child{--match-side:var(--red)}
.match-dialog .match-preview-lineup{border-color:color-mix(in srgb,var(--match-side) 18%,var(--line));box-shadow:0 3px 12px #020a1608}
.match-dialog .match-preview-player{
  --match-side:var(--blue);
  background:color-mix(in srgb,var(--match-side) 4%,var(--surface));
  box-shadow:inset 2px 0 0 color-mix(in srgb,var(--match-side) 26%,transparent);
  transition:background-color .18s ease,box-shadow .18s ease;
}
.match-dialog .match-preview-player-b{--match-side:var(--red);box-shadow:inset -2px 0 0 color-mix(in srgb,var(--match-side) 26%,transparent)}
.match-dialog .match-preview-player:nth-child(even){background:color-mix(in srgb,var(--match-side) 3%,var(--surface-2))}
.match-dialog .match-preview-player:has(.match-preview-person:focus-visible){background:color-mix(in srgb,var(--match-side) 8%,var(--surface))}
.match-dialog .match-preview-person:focus-visible{outline:2px solid var(--match-side);outline-offset:3px;border-radius:4px}
.match-dialog .match-preview-photo{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--match-side) 20%,var(--line));transition:box-shadow .18s ease}
.match-dialog .match-preview-photo>img{transition:transform .24s cubic-bezier(.2,.7,.3,1)}
.match-dialog .match-preview-identity>strong{transition:color .16s ease}
.match-dialog .match-preview-person:focus-visible .match-preview-identity>strong{color:var(--match-side)}
.match-dialog .match-preview-person:focus-visible .match-preview-photo{box-shadow:0 0 0 2px color-mix(in srgb,var(--match-side) 28%,transparent)}
.match-dialog .match-preview-roles>span{position:relative;isolation:isolate}
.match-dialog .match-preview-roles>span::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border:1px solid color-mix(in srgb,var(--line) 65%,transparent);border-radius:50%;background:color-mix(in srgb,var(--surface-2) 65%,transparent)}
.match-dialog .match-preview-roles>span:focus-visible{color:var(--blue);outline:0}
.match-dialog .match-preview-roles>span:focus-visible::before{border-color:var(--blue);outline:2px solid color-mix(in srgb,var(--blue) 22%,transparent);outline-offset:2px}

.match-dialog .match-preview .series-support{border-color:color-mix(in srgb,var(--muted) 12%,var(--line));box-shadow:inset 0 1px 0 #ffffff05}
.match-dialog .match-preview .support-choice{
  background:var(--surface);
  border-color:color-mix(in srgb,currentColor 17%,var(--line));
  box-shadow:none;
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .14s ease;
}
.match-dialog .match-preview .support-choice[aria-pressed=true]{background:color-mix(in srgb,currentColor 10%,var(--surface));border-color:color-mix(in srgb,currentColor 70%,var(--line));box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 12%,transparent)}
.match-dialog .match-preview .support-choice[aria-pressed=true] .support-choice-action{background:color-mix(in srgb,currentColor 10%,transparent)}
.match-dialog .match-preview .support-choice:focus-visible{outline-color:currentColor;outline-offset:3px}
.match-dialog .match-preview .support-help:focus-visible{outline-color:var(--blue)}
.match-dialog .match-preview .support-choice:not(:disabled):active{transform:translateY(0);box-shadow:inset 0 1px 3px color-mix(in srgb,currentColor 8%,transparent)}
.match-dialog .match-preview .support-choice:disabled{background:transparent;border-color:var(--line);box-shadow:none;transform:none;cursor:default}
.match-dialog .match-preview .support-choice-action{transition:background-color .16s ease}
.match-dialog .match-preview .support-track{box-shadow:inset 0 0 0 1px #020a1608}
.match-dialog .match-preview .support-fill-a{background:var(--blue)}
.match-dialog .match-preview .support-fill-b{background:var(--red)}

[data-theme=light] .match-dialog{box-shadow:0 28px 84px #17365326,0 7px 22px #17365312,inset 0 1px 0 #fff}
[data-theme=light] .match-dialog::backdrop{background:#19344d73}
[data-theme=light] .match-dialog .match-preview-lineup{box-shadow:0 2px 8px #17365306}

@media(hover:hover) and (pointer:fine){
  .match-dialog-full:hover>span{transform:translate(1px,-1px)}
  .match-dialog .scoreboard-team:hover .team-mark{box-shadow:0 0 0 2px color-mix(in srgb,var(--match-side) 17%,transparent)}
  .match-dialog .match-preview-player:has(.match-preview-person:hover){background:color-mix(in srgb,var(--match-side) 8%,var(--surface))}
  .match-dialog .match-preview-person:hover .match-preview-photo{box-shadow:0 0 0 2px color-mix(in srgb,var(--match-side) 28%,transparent)}
  .match-dialog .match-preview-person:hover .match-preview-photo>img{transform:scale(1.04)}
  .match-dialog .match-preview-person:hover .match-preview-identity>strong{color:var(--match-side)}
  .match-dialog .match-preview .support-choice:not(:disabled):hover{background:color-mix(in srgb,currentColor 7%,var(--surface));border-color:color-mix(in srgb,currentColor 55%,var(--line));box-shadow:0 3px 10px color-mix(in srgb,currentColor 7%,transparent);transform:translateY(-1px)}
  .match-dialog .match-preview .support-choice:not(:disabled):active{transform:translateY(0);box-shadow:inset 0 1px 3px color-mix(in srgb,currentColor 8%,transparent)}
}
@keyframes match-dialog-enter{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes match-dialog-backdrop-enter{from{opacity:0}to{opacity:1}}
@keyframes match-dialog-content-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:700px){.match-dialog .match-preview-roles>span::before{width:24px;height:24px}}
@media(prefers-reduced-motion:reduce){
  .match-dialog,.match-dialog::backdrop,.match-dialog *,.match-dialog *::before,.match-dialog *::after{animation:none!important;transition:none!important}
  .match-dialog-full>span,.match-dialog .match-preview-photo>img,.match-dialog .match-preview .support-choice{transform:none!important}
}
@media(forced-colors:active){
  .match-dialog,.match-dialog .match-preview-lineup,.match-dialog .match-preview-player,.match-dialog .match-preview .series-support,.match-dialog .match-preview .support-choice{box-shadow:none;border-color:CanvasText}
  .match-dialog::backdrop{background:Canvas;backdrop-filter:none}
  .match-dialog .match-preview-roles>span::before{background:Canvas;border-color:CanvasText}
  .match-dialog .match-preview-person:focus-visible{outline-color:Highlight}
  .match-dialog .match-preview .support-choice[aria-pressed=true]{border-color:Highlight;outline:1px solid Highlight;outline-offset:-3px}
  .match-dialog .match-preview .support-choice:disabled{color:GrayText;border-color:GrayText;outline:none}
}

/* Touch targets and reading order share the same public fragment as desktop. */
.match-dialog-close{width:44px;height:44px;touch-action:manipulation}
.match-dialog-full{min-height:44px;padding-inline:6px;touch-action:manipulation}
.match-dialog-error :is(button,a){display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.match-dialog .match-preview-person{min-height:44px}
.match-dialog .match-game-tabs{overscroll-behavior-x:contain;scrollbar-width:thin;scroll-padding-inline:4px}
.match-dialog .match-game-tabs a{min-height:44px;touch-action:manipulation}
@media(max-width:700px){
  .match-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));border-radius:13px;scrollbar-width:thin}
  .match-dialog-toolbar{min-height:60px;padding:7px 8px 7px 13px;gap:7px}
  .match-dialog-toolbar>h2{font-size:14px}
  .match-dialog-full{font-size:12px}
  .match-dialog-body{padding:10px 10px calc(14px + env(safe-area-inset-bottom,0px));min-width:0}
  .match-dialog .scoreboard-team h1,.match-dialog .scoreboard-team h2{font-size:14px;line-height:1.4;white-space:normal;text-wrap:wrap;overflow-wrap:anywhere;max-width:100%}
  .match-dialog .scoreboard-score>strong{min-width:2.8em;font-size:26px}
  .match-dialog .scoreboard-meta{font-size:11px;line-height:1.5}
  .match-dialog .match-preview{margin-top:15px}
  .match-dialog .match-preview-heading{align-items:flex-start}
  .match-dialog .match-preview-heading>span{max-width:155px;line-height:1.5;font-size:11px}
  .match-dialog .match-preview-compare{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:4px}
  .match-dialog .match-preview-lineup,.match-dialog .match-preview-roles{grid-template-rows:repeat(5,76px)}
  .match-dialog .match-preview-player{padding:7px 6px}
  .match-dialog .match-preview-person{gap:6px;width:100%;min-height:60px}
  .match-dialog .match-preview-photo{width:28px;height:35px;flex-basis:28px}
  .match-dialog .match-preview-identity{flex:1;gap:4px}
  .match-dialog .match-preview-identity strong{font-size:13px;line-height:1.3;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .match-dialog .match-preview-player-meta{gap:3px;min-height:21px}
  .match-dialog .match-preview-identity small{font-size:10px}
  .match-dialog .match-preview-player .grade-badge{min-width:21px;font-size:10px;padding:2px 3px}
  .match-dialog .match-preview .series-support{padding:10px;margin-top:12px}
  .match-dialog .match-preview .support-choices{gap:10px}
  .match-dialog .match-preview .support-choice{min-height:60px;gap:5px;padding:7px 8px;touch-action:manipulation}
  .match-dialog .match-preview .support-team-name{font-size:12px;white-space:normal;overflow-wrap:anywhere;line-height:1.4}
  .match-dialog .match-preview .support-choice-action{font-size:11px}
  .match-dialog .support-help{display:inline-grid;place-items:center;min-width:44px;min-height:44px}
  .match-dialog .support-heading{min-height:33px}
  .match-dialog .support-feedback{line-height:1.5}
}

.match-report-owner-actions{display:flex;justify-content:flex-end;margin-top:18px;margin-bottom:0}.match-report-owner-actions .button{min-height:44px}