:root { color-scheme: dark; font-family: Inter, "Segoe UI", Arial, sans-serif; background: #10070f; color: #fff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #10070f; }
.control-page { background: radial-gradient(circle at 70% -20%, #58113c 0, #160914 45%, #09050a 100%); }
.control-shell { width: min(1480px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 64px; }
.control-header, .panel-heading, .field-row, .header-actions, .pending-item { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.control-header { margin-bottom: 25px; align-items: flex-start; }
.header-actions { flex-wrap: wrap; justify-content: flex-end; }
.eyebrow { margin: 0 0 8px; color: #ff3ca6; font: 800 11px/1.1 "Segoe UI", sans-serif; letter-spacing: .18em; }
.eyebrow.warn { color: #ffcf62; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(32px, 4vw, 58px); letter-spacing: -.05em; }
h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.muted { color: #c1a8bb; }
.small { font-size: 12px; }
.grid-top, .champion-grid { display: grid; grid-template-columns: minmax(300px, .88fr) minmax(480px, 1.45fr); gap: 18px; align-items: stretch; }
.panel { border: 1px solid #62224c; border-radius: 18px; background: rgba(35, 10, 30, .87); box-shadow: 0 16px 60px rgba(0,0,0,.3); padding: 22px; }
.import-panel, .preview-panel { min-height: 470px; }
.dropzone { min-height: 180px; margin: 24px 0 16px; border: 1px dashed #9b4d80; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.dropzone:hover { border-color: #ff3ca6; background: rgba(255,60,166,.08); }
.dropzone input { display: none; }
label { font-size: 12px; color: #c1a8bb; }
input, textarea, select { display: block; width: 100%; margin-top: 7px; border: 1px solid #71305b; border-radius: 9px; background: #1b0717; color: #fff; padding: 10px 12px; font: inherit; }
textarea { margin: 16px 0 10px; resize: vertical; }
.field-row { align-items: end; }
.field-row label { flex: 1; }
.button { border: 1px solid #77335f; border-radius: 9px; padding: 10px 14px; background: #37142e; color: #fff; text-decoration: none; cursor: pointer; font: 800 12px/1 "Segoe UI", sans-serif; }
.button:hover { border-color: #ff3ca6; }
.button.primary { background: #ff168f; border-color: #ff168f; color: #fff; }
.button.ghost { background: transparent; }
.button.danger { color: #ffacbe; border-color: #8c3a57; background: transparent; }
.small-button { padding: 7px 9px; font-size: 11px; }
.status-pill { display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border: 1px solid #77335f; border-radius: 999px; color: #dec8d9; font-size: 12px; }
.status-pill.ok { color: #8de0ac; border-color: #386d4c; }.status-pill.warn { color: #ffcf62; border-color: #7b5d28; }.status-pill.error { color: #ff9090; border-color: #753d42; }
details { margin-top: 22px; color: #dec8d9; font-size: 12px; } summary { cursor: pointer; }.import-panel .muted { margin-bottom: 0; }
.preview-panel iframe { width: 100%; aspect-ratio: 16 / 9; border: 1px solid #62224c; border-radius: 10px; background: #080308; margin-top: 24px; }
.champion-grid, .ranking-panel, .pending-panel { margin-top: 18px; }
.champion-point-panel, .logo-panel { min-height: 230px; }
.rule-badge { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border: 1px solid #ff3ca6; border-radius: 999px; color: #ff7bc2; font: 800 10px/1 "Segoe UI", sans-serif; letter-spacing: .12em; }
.champion-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }.champion-chip { display: inline-flex; align-items: center; min-height: 29px; padding: 0 10px; border: 1px solid #8e376b; border-radius: 999px; background: rgba(255,60,166,.08); color: #ff9dd0; font: 800 11px/1 "Segoe UI", sans-serif; }.champion-chip.winner { border-color: #ff3ca6; background: #ff168f; color: #fff; }
.logo-picker { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }.logo-choice { min-height: 86px; padding: 6px 5px 4px; border: 1px solid #6c2e56; border-radius: 10px; background: #1b0717; color: #c1a8bb; cursor: pointer; font: 800 9px/1 "Segoe UI", sans-serif; overflow: hidden; }.logo-choice:hover, .logo-choice.selected { border-color: #ff3ca6; box-shadow: 0 0 0 1px rgba(255,60,166,.35) inset; }.logo-choice img { display: block; width: 100%; height: 58px; object-fit: contain; margin-bottom: 4px; }
.champion-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }.table-wrap { overflow-x: auto; margin-top: 18px; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th { color: #ba91ae; font-size: 10px; text-transform: uppercase; letter-spacing: .13em; text-align: left; } th, td { padding: 11px 9px; border-bottom: 1px solid #4a1d3c; } td:not(:nth-child(2)), th:not(:nth-child(2)) { text-align: right; }.rank, .points { color: #ff5cb3; font-weight: 900; }.team-name { font-weight: 800; }.code-cell { color: #c88eb6; font-size: 11px; }.empty-cell { text-align: center !important; color: #c1a8bb; padding: 30px; }.pending-item { padding: 15px 0; border-bottom: 1px solid #4a1d3c; align-items: flex-start; }.pending-item:last-child { border-bottom: 0; }.pending-item strong, .pending-item .muted { display: block; }.mapping-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }.hidden { display: none; }.champion-state { color: #ff7bc2; font-size: 11px; font-weight: 900; }.champion-table-row { background: rgba(255,22,143,.09); }.champion-table-row .team-name { color: #ffb9dc; }

/* All broadcast pages use the supplied 1920x1080 artwork as an untouched base layer. */
.broadcast-page { display: grid; place-items: center; min-height: 100vh; overflow: hidden; background: #090308; }
.broadcast-canvas { position: relative; width: min(100vw, 177.7778vh); height: min(100vh, 56.25vw); min-width: 0; min-height: 0; overflow: hidden; background: #090308; aspect-ratio: 16 / 9; }
.broadcast-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: fill; user-select: none; pointer-events: none; }

/* IMG_1571 / Point Table: 8 rows on the left and 7 on the right. */
.point-rows { position: absolute; inset: 0; z-index: 2; }
.point-row { position: absolute; top: calc(45.88% + var(--slot) * 4.583333%); height: 3.9%; display: flex; align-items: center; color: #fff; font-family: "Barlow Condensed", "Arial Narrow", "Segoe UI", Arial, sans-serif; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,.95); white-space: nowrap; }
.point-team, .point-stat { position: absolute; top: 0; height: 100%; display: flex; align-items: center; overflow: hidden; }.point-team { padding-left: .55%; }.point-stat { justify-content: center; color: #8f0044; font-size: clamp(11px, 1.45vw, 31px); text-shadow: 0 1px 0 rgba(255,255,255,.8); }.point-row.left, .point-row.right { left: 0; width: 100%; }.point-row.left .point-team { left: 13.4%; width: 22.2%; }.point-row.left .point-kills { left: 40.35%; width: 4.25%; }.point-row.left .point-booyah { left: 36.1%; width: 4.0%; }.point-row.left .point-points { left: 44.7%; width: 4.25%; }.point-row.right .point-team { left: 55.2%; width: 22.4%; }.point-row.right .point-kills { left: 82.25%; width: 4.25%; }.point-row.right .point-booyah { left: 78.0%; width: 4.0%; }.point-row.right .point-points { left: 86.6%; width: 4.3%; }

/* IMG_1572 / MVP: five rows with fixed identity, K.D and A! columns. */
.mvp-rows { position: absolute; inset: 0; z-index: 2; }
.mvp-row { position: absolute; left: 0; top: calc(20% + var(--slot) * 12.963%); width: 100%; height: 12.8%; color: #fff; font-family: "Barlow Condensed", "Arial Narrow", "Segoe UI", Arial, sans-serif; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,.95); white-space: nowrap; }
.mvp-logo { position: absolute; left: 19.1%; top: 4%; width: 6%; height: 92%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.8)); }
.mvp-identity { position: absolute; left: 26.8%; top: 0; width: 11.2%; height: 100%; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.mvp-identity strong, .mvp-identity small { overflow: hidden; text-overflow: ellipsis; }.mvp-identity strong { line-height: .98; }.mvp-identity small { margin-top: 3px; color: rgba(255,255,255,.78); font: 700 clamp(8px, .65vw, 13px)/1 "Segoe UI", Arial, sans-serif; }
.mvp-stat { position: absolute; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; font-size: clamp(12px, 1.5vw, 30px); }.mvp-kd { left: 39.1%; width: 6.7%; }.mvp-kills { left: 45.6%; width: 6.7%; }

/* IMG_1573 / Champion: the supplied art carries the title; only the selected logo is dynamic. */
.champion-overlay { position: absolute; left: 37%; top: 37%; z-index: 2; width: 26%; height: 43%; display: grid; place-items: center; background: transparent; text-align: center; }.champion-logo-frame { width: 55%; aspect-ratio: 1; display: grid; place-items: center; background: transparent; }.champion-logo-frame img { width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,.8)); }
@media (max-width: 900px) { .grid-top, .champion-grid { grid-template-columns: 1fr; }.control-header { flex-direction: column; }.header-actions { justify-content: flex-start; }.logo-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); } }