/* Consumer-facing match detail hierarchy. Presentation only. */

/* The event is the hero: real teams, real logos and already-loaded recent form. */
html:root .pd-md-v12 .pd-md-hero { padding-top:20px; }
html:root .pd-md-v12 .pd-md-hero-teams { max-width:900px; }
html:root .pd-md-v12 .pd-v5-team-side { display:none; }
html:root .pd-md-v12 .pd-md-hero-team {
 grid-template-rows:auto auto;
 row-gap:8px;
}
html:root .pd-md-v12 .pd-md-hero-team .rt-team-logo { grid-area:1/1/3/2; }
html:root .pd-md-v12 .pd-md-hero-team .pd-md-hero-name { grid-area:1/2; font-size:29px; font-weight:850; }
html:root .pd-md-v12 .pd-md-hero-team .pd-v12-hero-form { grid-area:2/2; justify-content:flex-start; }
html:root .pd-md-v12 .pd-md-hero-team.is-away .rt-team-logo { grid-area:1/2/3/3; }
html:root .pd-md-v12 .pd-md-hero-team.is-away .pd-md-hero-name { grid-area:1/1; }
html:root .pd-md-v12 .pd-md-hero-team.is-away .pd-v12-hero-form { grid-area:2/1; justify-content:flex-end; }

html:root .pd-md-v12 .pd-v12-hero-form {
 display:flex;
 align-items:center;
 gap:5px;
 min-width:0;
}
html:root .pd-md-v12 .pd-v12-hero-form small { margin-right:3px; color:var(--rt-muted); font-size:9px; white-space:nowrap; }
html:root .pd-md-v12 .pd-v12-hero-form>span {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:19px;
 height:19px;
 border-radius:50%;
 color:#fff;
 font-size:9px;
 font-weight:800;
}
html:root .pd-md-v12 .pd-v12-hero-form .is-W { background:var(--rt-positive); }
html:root .pd-md-v12 .pd-v12-hero-form .is-D { background:var(--rt-muted); }
html:root .pd-md-v12 .pd-v12-hero-form .is-L { background:var(--rt-negative); }

/* Korean-first service headings. */
html:root .pd-md-v12 .pd-v6-heading .pd-md-panel-title { font-size:23px; }
html:root .pd-md-v12 .pd-v6-heading p { flex-basis:auto; margin-left:2px; }
html:root .pd-md-v12 .pd-v5-title-group .pd-md-panel-title { font-size:20px; }
html:root .pd-md-v12 .pd-v7-slip-empty strong { font-size:15px; }

/* One page-level rhythm; component padding and internal content gaps stay independent. */
html:root .pd-md-v12 { --pd-v12-section-gap:20px; }
html:root .pd-md-v12 > :is(#pd-predict,#pd-analysis,#pd-toon,#pd-comments) {
 margin-top:var(--pd-v12-section-gap);
 margin-bottom:0;
}

/* Both primary section titles use bare V9 glyphs. */
html:root .pd-md-v12 #pd-v6-odds-title,
html:root .pd-md-v12 #pd-analysis>.pd-v5-section-head h2 { display:inline-flex; align-items:center; gap:8px; }
html:root .pd-md-v12 :is(.pd-v12-predict-title-icon,.pd-v8-analysis-icon) {
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:20px;
 height:20px;
 flex:0 0 20px;
 border:0;
 border-radius:0;
 color:var(--rt-data-blue);
 background:transparent;
 box-shadow:none;
}
html:root .pd-md-v12 :is(.pd-v12-predict-title-icon,.pd-v8-analysis-icon) .pd-v9-icon {
 width:20px;
 height:20px;
 flex-basis:20px;
}

/* Preview-style analysis identities, using the same resolved team images. */
html:root .pd-md-v12 .pd-v12-flow-identity { display:flex; align-items:center; gap:8px; min-width:0; }
html:root .pd-md-v12 .pd-v12-flow-identity .rt-team-logo {
 position:relative;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 flex:0 0 30px;
 width:30px;
 height:30px;
 overflow:hidden;
 border-radius:7px;
 background:var(--rt-surface-2);
}
html:root .pd-md-v12 .pd-v12-flow-identity .rt-team-logo img {
 position:absolute;
 inset:0;
 display:block;
 width:100%;
 height:100%;
 object-fit:contain;
 background:var(--rt-surface-1);
}
html:root .pd-md-v12 .pd-v12-flow-identity .rt-team-initial { font-size:9px; }
html:root .pd-md-v12 .pd-v8-flow-name strong { font-size:15px; }

html:root .pd-md-v12 .pd-v12-compare-legend {
 display:flex;
 justify-content:space-between;
 gap:16px;
 margin:-3px 34px 10px;
 font-size:9px;
 font-weight:750;
}
html:root .pd-md-v12 .pd-v12-compare-legend span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html:root .pd-md-v12 .pd-v12-compare-legend span:first-child { color:var(--rt-data-blue); }
html:root .pd-md-v12 .pd-v12-compare-legend span:last-child { color:var(--rt-brand); text-align:right; }

/* The list title already says team + sample. Remove the duplicate system caption. */
html:root .pd-md-v12 .pd-md-form-col .pd-md-form-team::before { display:none; }
html:root .pd-md-v12 .pd-md-form-name { font-size:15px; font-weight:800; }
html:root .pd-md-v12 .pd-md-form-n { color:var(--rt-muted); font-size:10px; }
html:root .pd-md-v12 .pd-v5-toon .pd-v5-empty { color:var(--rt-muted); }

@media(max-width:700px) {
 html:root .pd-md-v12 .pd-md-hero { padding-top:15px; }
 html:root .pd-md-v12 .pd-md-hero-team,
 html:root .pd-md-v12 .pd-md-hero-team.is-away { display:flex; gap:5px; }
 html:root .pd-md-v12 .pd-md-hero-team .rt-team-logo,
 html:root .pd-md-v12 .pd-md-hero-team.is-away .rt-team-logo { order:1; }
 html:root .pd-md-v12 .pd-md-hero-team .pd-md-hero-name,
 html:root .pd-md-v12 .pd-md-hero-team.is-away .pd-md-hero-name { order:2; font-size:16px; text-align:center; }
 html:root .pd-md-v12 .pd-md-hero-team .pd-v12-hero-form,
 html:root .pd-md-v12 .pd-md-hero-team.is-away .pd-v12-hero-form { order:3; justify-content:center; }
 html:root .pd-md-v12 .pd-v12-hero-form small { display:none; }
 html:root .pd-md-v12 .pd-v12-hero-form>span { width:17px; height:17px; font-size:8px; }
 html:root .pd-md-v12 .pd-v6-heading .pd-md-panel-title { font-size:20px; }
 html:root .pd-md-v12 .pd-v6-heading p { margin:4px 0 0; }
 html:root .pd-md-v12 .pd-v12-flow-identity .rt-team-logo { flex-basis:26px; width:26px; height:26px; }
 html:root .pd-md-v12 .pd-v12-compare-legend { margin-left:29px; margin-right:29px; }
}

@media(max-width:900px) {
 html:root .pd-md-v12 { --pd-v12-section-gap:16px; }
}

@media(max-width:350px) {
 html:root .pd-md-v12 .pd-v12-hero-form { gap:3px; }
 html:root .pd-md-v12 .pd-v12-hero-form>span { width:16px; height:16px; }
 html:root .pd-md-v12 .pd-v12-compare-legend { margin-left:24px; margin-right:24px; font-size:8px; }
}