/* ========================================
   TEA AI Tournament Studio - Publish Engine UI
   Phase 4: Tournament Engine & Publish System
   ======================================== */

.pub-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--space-6);
    align-items: start;
}

.mvp-section {
    /* BUG FIX (MVP banner rendered tiny/cramped with truncated player
       names): this card used to be a third item auto-flowing into the
       .pub-layout grid, which only has a 360px-wide first column and a
       1fr second column — with 2 cards already filling row 1, the MVP
       card landed in row 2's 360px column, squeezing its whole card
       layout (built for a wide banner) into a phone-width box. Spanning
       both columns gives it the same room as the main Preview banner. */
    grid-column: auto;
    min-width: 0;
}
.pub-layout > .card { min-width: 0; }

@media (max-width: 900px) {
    .pub-layout {
        grid-template-columns: 1fr;
    }
}

.pub-field-row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.pub-color-input {
    width: 44px;
    height: 36px;
    padding: 2px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    background: transparent;
    cursor: pointer;
}

.pub-logo-upload {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.pub-logo-preview {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.pub-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pub-preview-wrap {
    overflow-x: auto;
    padding: var(--space-4);
    background: repeating-conic-gradient(#20202e 0% 25%, #17171f 0% 50%) 50% / 20px 20px;
    border-radius: var(--radius-lg);
}

.pub-preview-scroll-hint {
    display: none;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0 0 var(--space-2);
}

@media (max-width: 1060px) {
    /* Banner is a fixed 1000px wide; below that viewport width the wrap
       has to scroll horizontally to show all of it. */
    .pub-preview-scroll-hint {
        display: block;
    }
}

/* This node is captured pixel-for-pixel by the Export Engine
   (html2canvas), so anything visually here IS the export. */
.pub-banner {
    width: 1000px;
    /* Deliberately NOT max-width: 100% — this node is rasterized
       pixel-for-pixel by html2canvas for every export, so it must always
       lay out at its true 1000px width. Shrinking it to fit a narrow
       phone screen would clip the right-hand columns (overflow: hidden
       below) instead of just scaling them down, and the export would
       inherit that same crop. .pub-preview-wrap has overflow-x: auto, so
       on narrow screens the preview scrolls horizontally instead. */
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-family: var(--font-body);
    box-shadow: var(--shadow-lg);
}

.pub-banner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-8);
    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
}

.pub-banner-brand {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.pub-banner-logo {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    object-fit: contain;
    background: rgba(255, 255, 255, 0.08);
}

.pub-banner-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.pub-banner-date {
    font-size: var(--text-sm);
    opacity: 0.75;
}

.pub-banner-org-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.pub-standings-bar {
    display: none; /* only shown by templates that want it (pill-tropical) */
    text-align: center;
    padding: var(--space-2);
    margin: 0 var(--space-8) var(--space-4);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.15em;
    font-size: var(--text-sm);
}

.pub-banner-table-wrap {
    padding: 0 var(--space-8) var(--space-6) var(--space-8);
}

.pub-banner-table {
    width: 100%;
    font-size: var(--text-sm);
}

.pub-row {
    display: grid;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
}

/* Keep each exported row on an exact pixel grid. In particular, borders
   must be included in row height rather than added outside it; otherwise
   html2canvas can make the bottom edges appear to step down on mobile. */
.pub-row-team {
    height: 48px;
    min-height: 48px;
    box-sizing: border-box;
    align-items: center;
}

.pub-cell {
    /* BUG FIX (team name / rank number render shifted down in the
       exported PNG): same root cause as the .pub-banner-rank fix below
       — html2canvas does not reliably honor the parent .pub-row's grid
       align-items:center, so cell content that looked vertically
       centered on-screen drifted toward the bottom once rasterized.
       Padding is now horizontal-only and line-height does the vertical
       centering instead, which html2canvas captures correctly. */
    padding: 0 12px;
    height: 48px;
    min-height: 0;
    line-height: 48px;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pub-row:not(.pub-row-team) .pub-cell {
    height: 40px;
    line-height: 40px;
}

.pub-cell-head {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

.pub-row:first-child {
    border-bottom: 2px solid currentColor;
    margin-bottom: 4px;
}

.pub-team-cell {
    text-align: left;
    font-weight: 600;
}

.pub-row-team {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pub-row-team:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

/* Podium rows get a faint tint matching their rank badge color, so the
   top finishers visually "pop" against the rest of the table — this is
   layered on top of (and overrides) the plain odd/even striping above. */
.pub-banner-row-1 {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.14), transparent 65%) !important;
}

.pub-banner-row-2 {
    background: linear-gradient(90deg, rgba(200, 200, 200, 0.10), transparent 65%) !important;
}

.pub-banner-row-3 {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.10), transparent 65%) !important;
}

.pub-banner-row-4 {
    background: linear-gradient(90deg, rgba(111, 168, 220, 0.08), transparent 65%) !important;
}

.pub-banner-rank {
    /* Export-safe centering: flex gives rank icons a stable box and avoids
       the baseline drift seen in html2canvas captures on Android browsers. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    /* Row cells are 48px tall: (48 - 38) / 2 = 5px puts the number or
       medal exactly on the row's vertical centre line. */
    margin: 5px auto 0;
    line-height: 1;
    text-align: center;
    border-radius: 50%;
    font-weight: 800;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}
.pub-rank-icon {
    /* Larger, clean raster medals export reliably and stay centered. */
    display: block;
    width: 38px;
    height: 38px;
    margin: 0;
    object-fit: contain;
    flex: 0 0 auto;
}
/* A fixed-size badge wrapper keeps the fire/trophy artwork centered without
   changing the team row's line box or pushing its bottom border downward. */
.pub-rush-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 34px;
    height: 38px;
    margin-left: 4px;
    flex: 0 0 34px;
    border-radius: 50%;
    box-sizing: border-box;
    overflow: hidden;
}

.pub-rush-badge-flame {
    background: radial-gradient(circle, rgba(255, 111, 0, 0.24), rgba(255, 111, 0, 0) 72%);
}

.pub-rush-badge-champion {
    width: 36px;
    background: radial-gradient(circle, rgba(255, 199, 55, 0.22), rgba(255, 199, 55, 0) 72%);
}

.pub-rush-icon {
    display: block;
    width: 28px;
    height: 35px;
    margin: 0;
    object-fit: contain;
    flex: 0 0 auto;
}

.pub-rush-badge-champion {
    width: 38px;
    flex-basis: 38px;
    height: 38px;
}

.pub-rush-badge-champion .pub-rush-icon {
    width: 36px;
    height: 36px;
}

.pub-banner-rank-1 {
    background: linear-gradient(135deg, #ffd700, #b8860b);
    color: #1a1200;
    font-size: 14px;
}

.pub-banner-rank-2 {
    background: linear-gradient(135deg, #e8e8e8, #a0a0a0);
    color: #1a1a1a;
    font-size: 13px;
}

.pub-banner-rank-3 {
    background: linear-gradient(135deg, #cd7f32, #8b5a2b);
    color: #1a1200;
    font-size: 13px;
}

.pub-banner-rank-4 {
    background: linear-gradient(135deg, #6fa8dc, #3d6ea5);
    color: #051020;
    font-size: 12px;
}

.pub-banner-footer {
    padding: var(--space-4) var(--space-8);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pub-banner-footer-custom {
    font-size: var(--text-xs);
    opacity: 0.85;
    margin-bottom: 2px;
}

.pub-banner-footer-brand {
    font-size: var(--text-xs);
    opacity: 0.65;
}

/* ── 5 selectable point-table templates ──────────────────────────────
   Same HTML/data every time — only the visual skin changes. Each one
   sets its own default look; theme.primaryColor/secondaryColor from the
   color pickers still apply on top via inline styles in the JS (title
   color, rank-1 gradient accents, grand-total color), so switching
   templates and then tweaking colors both work together. */

/* 1) Classic Dark — the original look, kept as the default. */
.pub-tpl-classic-dark .pub-banner-header {
    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
}

/* 2) Pill Tropical — rounded cream "pill" rows with a green top/bottom
   accent line and a green "OVERALL STANDINGS" bar with a lighter center,
   modeled on the beach/scrim-style point tables. */
.pub-tpl-pill-tropical .pub-standings-bar {
    display: block;
    color: #fff;
    background: linear-gradient(90deg, #1f6b2e, #4a9c4f 50%, #1f6b2e);
    border: 2px solid #163f1c;
    border-radius: var(--radius-md);
}

.pub-tpl-pill-tropical .pub-row-team {
    background: linear-gradient(180deg, #fbf3d0, #f0e2a8) !important;
    color: #2a2405;
    /* Fixed outer height + inset strokes keep every pill border on the same
       horizontal line in both browser preview and html2canvas export. Real
       borders/padding used to add extra row height and make the lower edges
       appear to step downward on some Android captures. */
    height: 52px;
    min-height: 52px;
    box-sizing: border-box;
    border: none;
    border-radius: var(--radius-full);
    margin: 0 0 6px;
    padding: 0;
    overflow: hidden;
    box-shadow: inset 0 2px 0 #2f7d32, inset 0 -2px 0 #2f7d32;
}

.pub-tpl-pill-tropical .pub-row-team.pub-banner-row-1,
.pub-tpl-pill-tropical .pub-row-team.pub-banner-row-2,
.pub-tpl-pill-tropical .pub-row-team.pub-banner-row-3,
.pub-tpl-pill-tropical .pub-row-team.pub-banner-row-4 {
    background: linear-gradient(180deg, #fff8e0, #f5e8b0) !important;
}

.pub-tpl-pill-tropical .pub-cell {
    color: #2a2405;
    height: 52px;
    min-height: 0;
    line-height: 52px;
    box-sizing: border-box;
}

.pub-tpl-pill-tropical .pub-banner-rank {
    width: 42px;
    height: 42px;
    margin-top: 5px; /* (52 - 42) / 2 */
}

.pub-tpl-pill-tropical .pub-banner-title {
    color: #1f6b2e;
    text-shadow: none;
}

/* 3) Neon Grid — dark cyberpunk look with glowing cyan/purple row borders. */
.pub-tpl-neon-grid .pub-row-team {
    border: 1px solid rgba(0, 212, 255, 0.35) !important;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    box-shadow: 0 0 10px rgba(122, 60, 255, 0.15);
}

.pub-tpl-neon-grid .pub-banner-title {
    text-shadow: 0 0 12px currentColor, 0 2px 10px rgba(0, 0, 0, 0.5);
}

.pub-tpl-neon-grid .pub-cell-head {
    color: #00d4ff;
    opacity: 1;
}

/* 4) Gold Glow — black + gold premium/championship look. */
.pub-tpl-gold-glow .pub-banner-header {    border-bottom: 2px solid #b8860b;
}

.pub-tpl-gold-glow .pub-row-team {
    border: 1px solid rgba(255, 215, 0, 0.25) !important;
    margin-bottom: 3px;
}

.pub-tpl-gold-glow .pub-banner-title {
    /* BUG FIX (title renders as a solid gold block with the text
       completely invisible in the exported PNG, though it looks fine in
       the live preview): html2canvas does not support
       `background-clip: text` — it paints the element's full background
       box as a plain rectangle without clipping it to the glyph shapes,
       and since color is transparent here there is nothing left to draw
       the letters with. This is a CSS-masking limitation, not something
       tunable via html2canvas options, so the export path can't use a
       clipped gradient for text at all. Solid gold + a glow shadow reads
       just as "gold" for a banner title and renders identically in both
       the live preview and every exported format. */
    color: #ffd700;
    text-shadow: 0 0 14px rgba(255, 215, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.35);
}

.pub-tpl-gold-glow .pub-cell-head {
    color: #ffd700;
    opacity: 0.85;
}

/* 5) Minimal Clean — light background, dark text, subtle lines. No
   heavy gradients — for organizers who want a plain, corporate look. */
.pub-tpl-minimal-clean {
    background: #f5f5f8;
    color: #1a1a24;
}

.pub-tpl-minimal-clean .pub-banner-header {
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.pub-tpl-minimal-clean .pub-banner-title {
    color: #1a1a24;
    text-shadow: none;
}

.pub-tpl-minimal-clean .pub-row-team {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.pub-tpl-minimal-clean .pub-row-team:nth-child(even) {
    background: rgba(0, 0, 0, 0.03) !important;
}

.pub-tpl-minimal-clean .pub-banner-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ── 3 poster-style templates (Halloween / Ice Blue / Red & Gold) ─────
   Same table and same columns as every other template — only the look
   changes. Everything below deliberately avoids things html2canvas
   cannot draw in PNG/PDF exports (no -webkit-text-stroke, no
   background-clip:text, no CSS masks): solid colors, gradients,
   borders, border-radius and text-shadow only. Cell heights/line-height
   are left alone so the exported rank numbers stay vertically aligned. */

.pub-tpl-halloween,
.pub-tpl-ice-blue,
.pub-tpl-red-gold {
    position: relative;
}

.pub-tpl-halloween .pub-banner-header,
.pub-tpl-ice-blue .pub-banner-header,
.pub-tpl-red-gold .pub-banner-header {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-bottom: none;
    padding: 40px var(--space-8) 20px;
}

.pub-tpl-halloween .pub-banner-brand,
.pub-tpl-ice-blue .pub-banner-brand,
.pub-tpl-red-gold .pub-banner-brand {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
}

.pub-tpl-halloween .pub-banner-org-logo,
.pub-tpl-ice-blue .pub-banner-org-logo,
.pub-tpl-red-gold .pub-banner-org-logo {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 56px;
    height: 56px;
}

.pub-tpl-halloween .pub-banner-date,
.pub-tpl-ice-blue .pub-banner-date,
.pub-tpl-red-gold .pub-banner-date {
    font-size: var(--text-base);
    letter-spacing: 0.12em;
    opacity: 0.95;
    margin-top: 4px;
}

.pub-tpl-halloween .pub-row:first-child,
.pub-tpl-ice-blue .pub-row:first-child,
.pub-tpl-red-gold .pub-row:first-child {
    border-bottom: none;
    border-radius: 10px;
    margin-bottom: 8px;
}

.pub-tpl-halloween .pub-cell-head,
.pub-tpl-ice-blue .pub-cell-head,
.pub-tpl-red-gold .pub-cell-head {
    opacity: 1;
    font-weight: 700;
    letter-spacing: 0.03em;
    /* tight side padding so "BOOYAH" / "KILL PTS" / "POS PTS" fit their
       64-68px columns instead of being cut off with "..." */
    padding: 0 2px;
}

.pub-tpl-halloween .pub-row-team,
.pub-tpl-ice-blue .pub-row-team,
.pub-tpl-red-gold .pub-row-team {
    border-radius: 10px;
    margin-bottom: 7px;
}

.pub-tpl-halloween .pub-cell,
.pub-tpl-ice-blue .pub-cell,
.pub-tpl-red-gold .pub-cell {
    font-weight: 700;
}

/* Halloween Night — purple/blue night, pink accents, dark rows */
.pub-tpl-halloween .pub-banner-title {
    font-family: 'Creepster', var(--font-display), cursive;
    font-size: 68px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.04em;
    color: #ff9be0;
    text-shadow: 0 4px 0 #0b3a4d, 0 0 22px rgba(255, 155, 224, 0.55);
}

.pub-tpl-halloween .pub-standings-bar {
    display: block;
    color: #ff9be0;
    font-style: italic;
    font-size: var(--text-base);
    margin-bottom: var(--space-3);
}

.pub-tpl-halloween .pub-row:first-child {
    background: #ff9be0;
    color: #2a0f4a;
}

.pub-tpl-halloween .pub-row-team {
    background: rgba(7, 24, 62, 0.88) !important;
    border: 1px solid rgba(90, 150, 255, 0.55) !important;
    color: #fff;
}

.pub-tpl-halloween .pub-team-cell {
    font-family: Georgia, 'Times New Roman', serif;
    text-transform: uppercase;
    color: #ff9be0;
}

/* Ice Blue — white header bar, white team cells, light-blue number cells */
.pub-tpl-ice-blue .pub-banner-title {
    font-family: 'Oswald', var(--font-display), sans-serif;
    font-size: 72px;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 6px 18px rgba(0, 20, 50, 0.6);
}

.pub-tpl-ice-blue .pub-standings-bar {
    display: block;
    width: 340px;
    margin: 0 auto var(--space-4);
    background: #f4f8fc;
    color: #1d4b7a;
    font-family: 'Oswald', var(--font-display), sans-serif;
    font-style: italic;
    border-radius: 4px;
}

.pub-tpl-ice-blue .pub-row:first-child {
    background: #f4f8fc;
    color: #1d4b7a;
}

.pub-tpl-ice-blue .pub-row-team {
    background: transparent !important;
    border: none !important;
}

.pub-tpl-ice-blue .pub-row-team .pub-cell {
    background: #a9d9fb;
    color: #0e3560;
    border-radius: 6px;
}

.pub-tpl-ice-blue .pub-row-team .pub-team-cell {
    background: #f4f8fc;
    color: #12375d;
    text-transform: uppercase;
}

.pub-tpl-ice-blue .pub-row-team .pub-cell:last-child {
    color: #0b3a66 !important;
}

/* Red & Gold — red rows with gold borders, gold header, cream total cell */
.pub-tpl-red-gold .pub-banner-title {
    font-family: 'Oswald', var(--font-display), sans-serif;
    font-size: 70px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: 0.03em;
    color: #fff;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}

.pub-tpl-red-gold .pub-standings-bar {
    display: block;
    width: 340px;
    margin: 0 auto var(--space-4);
    background: linear-gradient(180deg, #d9170f, #8c0b07);
    border: 2px solid #e5b24a;
    color: #fff;
    border-radius: 6px;
}

.pub-tpl-red-gold .pub-row:first-child {
    background: linear-gradient(180deg, #ffe7a3, #f0b73a);
    color: #5a0a0a;
}

.pub-tpl-red-gold .pub-row-team {
    background: linear-gradient(180deg, #d9170f, #8c0b07) !important;
    border: 2px solid #e5b24a !important;
    color: #fff;
}

.pub-tpl-red-gold .pub-team-cell {
    text-transform: uppercase;
}

.pub-tpl-red-gold .pub-row-team .pub-cell:last-child {
    background: linear-gradient(180deg, #fff3cf, #e9c26a);
    color: #6b0909 !important;
    border-radius: 4px;
}


.pub-bg-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
}

.pub-bg-swatch {
    height: 56px;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-default);
    background-color: var(--bg-elevated);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s ease, transform 0.1s ease;
}

.pub-bg-swatch:hover {
    transform: scale(1.03);
}

.pub-bg-swatch-active {
    border-color: var(--color-accent);
}

.pub-bg-swatch-none {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.pub-export-bar {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-5);
}

/* ── MVP / Rusher Leaders banner ─────────────────────────────────────
   Card layout: one big "#1" card on the left, a 2x2 grid of #2-#5 on
   the right, matching the official Free Fire World Series style the
   organizer asked to match. Pure CSS/gradients — no external images. */

#mvp-banner {
    /* BUG FIX (see .mvp-section above): fixed to the same 1000px width the
       main .pub-banner uses (rather than stretching/shrinking to whatever
       narrow column it happened to be squeezed into), so the card grid's
       relative sizing has enough room for names/labels to not get clipped,
       and exports come out at the same large, consistent resolution as
       the main leaderboard banner. Deliberately NOT max-width: 100%, same
       reasoning as .pub-banner above it in this file — html2canvas
       rasterizes this node at its true layout width for every export, so
       shrinking it to fit a narrow phone screen would have this card
       grid's `overflow: hidden` clip content instead of scaling it, and
       the export would inherit that crop. .pub-preview-wrap (shared with
       the main banner) already scrolls horizontally on narrow screens.
       Background is no longer a fixed purple gradient — it's set inline
       by renderMVPBanner() in pages/publish.html from the same Banner
       Background/Theme Colors the main banner uses. */
    width: 1200px;
    margin: 0 auto;
    background: linear-gradient(160deg, #2a1550 0%, #4a1f6e 45%, #7a2d8f 100%);
    border-radius: var(--radius-lg);
    padding: 28px;
    color: #fff;
    font-family: var(--font-display);
    overflow: hidden;
    position: relative;
}

.mvp-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.mvp-org-logo {
    width: 76px;
    height: 76px;
    object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6));
}

.mvp-head-text {
    min-width: 0;
}

/* Big slanted title: gold "MVP" + white "LEADERBOARD", heavy dark outline
   shadow so it reads on any background. */
.mvp-title {
    font-family: 'Oswald', 'Orbitron', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 58px;
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 0 3px 0 rgba(0, 0, 0, 0.75), 0 0 18px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
}
.mvp-title-a { color: #ffd21a; }
.mvp-title-b { color: #ffffff; }

.mvp-subtitle {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 26px 4px 14px;
    background: #ffd21a;
    color: #10121a;
    font-family: 'Oswald', 'Orbitron', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}

.mvp-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 16px;
}

.mvp-grid-rest {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Card = solid dark panel with a rank-colored border + glow. Tint/glow
   colors come from inline CSS variables (plain rgba, no color-mix). */
.mvp-card {
    position: relative;
    background:
        radial-gradient(circle at 50% 30%, var(--mvp-tint, rgba(255,255,255,0.15)), transparent 70%),
        linear-gradient(180deg, #11131c 0%, #07080d 100%);
    border: 2px solid var(--mvp-accent, #ffd21a);
    border-radius: 14px;
    box-shadow: 0 0 20px 1px var(--mvp-glow, rgba(255,210,26,0.5)), inset 0 0 24px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 194px;
}

.mvp-crown {
    position: absolute;
    top: 6px;
    left: 96px;
    width: 40px;
    height: 40px;
    z-index: 3;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));
}

.mvp-card-top {
    min-height: 404px;
}

.mvp-rank-badge {
    position: absolute;
    top: 12px;
    left: 0;
    z-index: 2;
    background: var(--mvp-accent, #ffd21a);
    color: #0b0c12;
    font-family: 'Oswald', 'Orbitron', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    padding: 6px 24px 6px 16px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.mvp-card-top .mvp-rank-badge {
    font-size: 44px;
    padding: 8px 34px 8px 20px;
}

.mvp-photo {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.mvp-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Photos are cropped 16:9 before upload; "cover" fills the frame and this
       keeps the face/head area in view if a frame is a little taller/wider. */
    object-position: center 18%;
}

.mvp-silhouette {
    width: 46%;
    max-width: 96px;
    fill: var(--mvp-accent, #ffd21a);
    opacity: 0.32;
    padding-top: 28px;
}
.mvp-card-top .mvp-silhouette {
    max-width: 200px;
}

/* ELIMS chip: dark backing so the number is always legible. */
.mvp-stats {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: rgba(0, 0, 0, 0.62);
    border-radius: 8px;
    padding: 4px 12px 4px 14px;
    line-height: 1;
}
.mvp-stat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #ffffff;
    opacity: 0.85;
}
.mvp-stat-value {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 36px;
    line-height: 1.1;
    color: var(--mvp-accent, #ffd21a);
}
.mvp-card-top .mvp-stat-value {
    font-size: 64px;
}
.mvp-card-top .mvp-stat-label {
    font-size: 14px;
}

.mvp-name-bar {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.92), rgba(8, 9, 14, 0.88));
    border-top: 2px solid var(--mvp-accent, #ffd21a);
}
.mvp-card-top .mvp-name-bar {
    padding: 14px 20px;
}
.mvp-name-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mvp-player-name {
    font-family: 'Oswald', 'Orbitron', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.15;
    text-transform: uppercase;
    color: #ffffff;
    overflow-wrap: anywhere;
}
.mvp-card-top .mvp-player-name {
    font-size: 34px;
}

.mvp-team-name {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mvp-accent, #ffd21a);
    overflow-wrap: anywhere;
}
.mvp-card-top .mvp-team-name {
    font-size: 17px;
}

.mvp-tag {
    font-family: 'Oswald', 'Orbitron', sans-serif;
    font-style: italic;
    font-weight: 700;
    font-size: 36px;
    line-height: 1;
    color: var(--mvp-accent, #ffd21a);
    text-shadow: 0 0 12px var(--mvp-glow, rgba(255,210,26,0.6));
}

/* Removed the old @media (max-width: 640px) override that collapsed
   .mvp-grid/.mvp-grid-rest to a single column — that only made sense back
   when #mvp-banner had max-width: 100% and actually shrank with the
   viewport. Now it's fixed at 1000px like .pub-banner (see the BUG FIX
   comment on #mvp-banner above), so this container never gets narrow
   enough to need it, and leaving it in would have made the 5-card grid
   collapse to a single column at the same fixed 1000px width — a much
   worse layout than what it was "fixing". .pub-preview-wrap handles small
   screens with horizontal scroll instead, exactly like the main banner. */

.pub-tpl-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: var(--space-2);
}

.pub-tpl-swatch {
    height: 44px;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    padding: 0 var(--space-2);
}

.pub-tpl-swatch-active {
    border-color: var(--color-accent);
}


/* 6) Premium Green Arena — new optional premium skin. Existing templates
   remain unchanged; this theme is additive and uses the same live data. */
.pub-tpl-premium-green-arena {
    background: radial-gradient(ellipse at top, #174c35 0%, #071a14 54%, #050c0a 100%);
    color: #f5f8ed;
}
.pub-tpl-premium-green-arena .pub-banner-header {
    background: linear-gradient(110deg, rgba(11, 67, 39, .96), rgba(20, 107, 57, .82), rgba(7, 26, 20, .94));
    border-bottom: 2px solid #74f39b;
}
.pub-tpl-premium-green-arena .pub-banner-title {
    color: #a6ffbd;
    text-shadow: 0 0 14px rgba(76, 255, 132, .24);
}
.pub-tpl-premium-green-arena .pub-banner-date { color: #d6f5df; }
.pub-tpl-premium-green-arena .pub-standings-bar {
    display: block;
    margin-bottom: 12px;
    border: 1px solid #55d982;
    border-radius: 10px;
    color: #f7fff8;
    background: linear-gradient(90deg, #0c3b25, #227b43 50%, #0c3b25);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 4px 16px rgba(0,0,0,.2);
}
.pub-tpl-premium-green-arena .pub-row:not(.pub-row-team) {
    color: #d6f5df;
    border-bottom: 2px solid #55d982;
}
.pub-tpl-premium-green-arena .pub-row-team {
    background: linear-gradient(90deg, rgba(239, 246, 216, .98), rgba(255, 252, 229, .96)) !important;
    color: #152c1d;
    border: 1px solid rgba(93, 210, 127, .9);
    border-radius: 12px;
    margin-bottom: 5px;
    box-shadow: 0 2px 0 rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.8);
}
.pub-tpl-premium-green-arena .pub-row-team .pub-cell { color: #152c1d; }
.pub-tpl-premium-green-arena .pub-row-team [style*="font-weight:800"] { color: #087d39 !important; }
.pub-tpl-premium-green-arena .pub-banner-footer {
    border-top: 1px solid rgba(116, 243, 155, .38);
    color: #d6f5df;
}



/* ═══ v29c: 5 NEW point-table skins, each with its own font + 3 color combos ═══
   royal-violet, sunset-blaze, aqua-wave, carbon-steel, rose-luxe.
   All colors come from --k-* variables set per combo (.pub-var-1/2/3 on the
   root), so choosing a combo recolors header, rows, team names, totals and
   footer together. Export-safe: solid colors, gradients, borders, radius and
   text-shadow only. Placed BEFORE the Champion/BANNED row rules so those win. */

.pub-tpl-royal-violet,
.pub-tpl-sunset-blaze,
.pub-tpl-aqua-wave,
.pub-tpl-carbon-steel,
.pub-tpl-rose-luxe { position: relative; }
.pub-tpl-royal-violet .pub-banner-header,
.pub-tpl-sunset-blaze .pub-banner-header,
.pub-tpl-aqua-wave .pub-banner-header,
.pub-tpl-carbon-steel .pub-banner-header,
.pub-tpl-rose-luxe .pub-banner-header {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    border-bottom: none;
    padding: 40px var(--space-8) 20px;
}
.pub-tpl-royal-violet .pub-banner-brand,
.pub-tpl-sunset-blaze .pub-banner-brand,
.pub-tpl-aqua-wave .pub-banner-brand,
.pub-tpl-carbon-steel .pub-banner-brand,
.pub-tpl-rose-luxe .pub-banner-brand {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
}
.pub-tpl-royal-violet .pub-banner-org-logo,
.pub-tpl-sunset-blaze .pub-banner-org-logo,
.pub-tpl-aqua-wave .pub-banner-org-logo,
.pub-tpl-carbon-steel .pub-banner-org-logo,
.pub-tpl-rose-luxe .pub-banner-org-logo {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 56px;
    height: 56px;
}
.pub-tpl-royal-violet .pub-banner-date,
.pub-tpl-sunset-blaze .pub-banner-date,
.pub-tpl-aqua-wave .pub-banner-date,
.pub-tpl-carbon-steel .pub-banner-date,
.pub-tpl-rose-luxe .pub-banner-date {
    font-size: var(--text-base);
    letter-spacing: 0.12em;
    opacity: 0.95;
    margin-top: 4px;
    color: var(--k-date);
}
.pub-tpl-royal-violet .pub-standings-bar,
.pub-tpl-sunset-blaze .pub-standings-bar,
.pub-tpl-aqua-wave .pub-standings-bar,
.pub-tpl-carbon-steel .pub-standings-bar,
.pub-tpl-rose-luxe .pub-standings-bar {
    display: block;
    width: 340px;
    margin: 0 auto var(--space-4);
}
.pub-tpl-royal-violet .pub-row:first-child,
.pub-tpl-sunset-blaze .pub-row:first-child,
.pub-tpl-aqua-wave .pub-row:first-child,
.pub-tpl-carbon-steel .pub-row:first-child,
.pub-tpl-rose-luxe .pub-row:first-child {
    border-bottom: none;
    margin-bottom: 8px;
}
.pub-tpl-royal-violet .pub-cell-head,
.pub-tpl-sunset-blaze .pub-cell-head,
.pub-tpl-aqua-wave .pub-cell-head,
.pub-tpl-carbon-steel .pub-cell-head,
.pub-tpl-rose-luxe .pub-cell-head {
    opacity: 1;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0 2px;
}
.pub-tpl-royal-violet .pub-row-team,
.pub-tpl-sunset-blaze .pub-row-team,
.pub-tpl-aqua-wave .pub-row-team,
.pub-tpl-carbon-steel .pub-row-team,
.pub-tpl-rose-luxe .pub-row-team {
    margin-bottom: 7px;
}
.pub-tpl-royal-violet .pub-cell,
.pub-tpl-sunset-blaze .pub-cell,
.pub-tpl-aqua-wave .pub-cell,
.pub-tpl-carbon-steel .pub-cell,
.pub-tpl-rose-luxe .pub-cell {
    font-weight: 700;
}
.pub-tpl-royal-violet .pub-team-cell,
.pub-tpl-sunset-blaze .pub-team-cell,
.pub-tpl-aqua-wave .pub-team-cell,
.pub-tpl-carbon-steel .pub-team-cell,
.pub-tpl-rose-luxe .pub-team-cell {
    text-transform: uppercase;
}

/* 8) royal-violet */
.pub-tpl-royal-violet,
.pub-tpl-royal-violet.pub-var-1 {
    --k-bg: radial-gradient(ellipse at top,#4a1d8f 0%,#1c0b3f 55%,#0a0418 100%);
    --k-title: #ffd76a;
    --k-tsh: 0 4px 0 #2a0d52, 0 0 22px rgba(255,215,106,.45);
    --k-date: #e9d5ff;
    --k-bar: linear-gradient(90deg,#4c1d95,#7c3aed 50%,#4c1d95);
    --k-barb: #ffd76a;
    --k-bart: #ffffff;
    --k-head: linear-gradient(180deg,#ffe7a3,#e0a82e);
    --k-headt: #3b1670;
    --k-row: linear-gradient(90deg,rgba(40,14,92,.94),rgba(76,29,149,.84));
    --k-rowb: rgba(255,215,106,.75);
    --k-rowt: #ffffff;
    --k-team: #ffe9a8;
    --k-tot: linear-gradient(180deg,#fff0c2,#e6b94a);
    --k-tott: #3b1670;
    --k-footb: rgba(255,215,106,.35);
    --k-foott: #e9d5ff;
    --k-edge: #ffd76a;
}
.pub-tpl-royal-violet.pub-var-2 {
    --k-bg: radial-gradient(ellipse at top,#1e3a8a 0%,#0b1640 55%,#050a1f 100%);
    --k-title: #e5e7eb;
    --k-tsh: 0 4px 0 #172554, 0 0 22px rgba(147,197,253,.5);
    --k-date: #bfdbfe;
    --k-bar: linear-gradient(90deg,#1e3a8a,#3b82f6 50%,#1e3a8a);
    --k-barb: #cbd5e1;
    --k-bart: #ffffff;
    --k-head: linear-gradient(180deg,#f1f5f9,#94a3b8);
    --k-headt: #0f172a;
    --k-row: linear-gradient(90deg,rgba(10,22,64,.94),rgba(30,58,138,.84));
    --k-rowb: rgba(203,213,225,.75);
    --k-rowt: #ffffff;
    --k-team: #dbeafe;
    --k-tot: linear-gradient(180deg,#ffffff,#aab4c5);
    --k-tott: #0f172a;
    --k-footb: rgba(203,213,225,.35);
    --k-foott: #bfdbfe;
    --k-edge: #cbd5e1;
}
.pub-tpl-royal-violet.pub-var-3 {
    --k-bg: radial-gradient(ellipse at top,#0f5132 0%,#06281a 55%,#02120b 100%);
    --k-title: #ffd76a;
    --k-tsh: 0 4px 0 #052e1c, 0 0 22px rgba(255,215,106,.4);
    --k-date: #bbf7d0;
    --k-bar: linear-gradient(90deg,#065f46,#10b981 50%,#065f46);
    --k-barb: #ffd76a;
    --k-bart: #ffffff;
    --k-head: linear-gradient(180deg,#ffe7a3,#e0a82e);
    --k-headt: #052e1c;
    --k-row: linear-gradient(90deg,rgba(3,40,24,.94),rgba(6,95,70,.84));
    --k-rowb: rgba(255,215,106,.7);
    --k-rowt: #ffffff;
    --k-team: #ffe9a8;
    --k-tot: linear-gradient(180deg,#fff0c2,#e6b94a);
    --k-tott: #052e1c;
    --k-footb: rgba(255,215,106,.35);
    --k-foott: #bbf7d0;
    --k-edge: #ffd76a;
}
.pub-tpl-royal-violet:not(.pub-has-bg) { background: var(--k-bg); }
.pub-tpl-royal-violet { color: var(--k-rowt); }
.pub-tpl-royal-violet .pub-banner-title {
    font-family: 'Cinzel', var(--font-display), serif;
    font-size: 66px;
    font-weight: 900;
    font-style: normal;
    text-transform: none;
    letter-spacing: .04em;
    line-height: 1.15;
    color: var(--k-title);
    text-shadow: var(--k-tsh);
}
.pub-tpl-royal-violet .pub-standings-bar {
    background: var(--k-bar);
    border: 2px solid var(--k-barb);
    border-radius: 6px;
    color: var(--k-bart);
    font-family: 'Cinzel', var(--font-display), serif;
    font-weight: 700;
    font-style: normal;
}
.pub-tpl-royal-violet .pub-row:first-child { background: var(--k-head); color: var(--k-headt); border-radius: 8px; }
.pub-tpl-royal-violet .pub-row-team {
    background: var(--k-row) !important;
    border: 1px solid var(--k-rowb) !important;
    
    border-radius: 8px;
    color: var(--k-rowt);
}
.pub-tpl-royal-violet .pub-team-cell { color: var(--k-team); }
.pub-tpl-royal-violet .pub-row-team .pub-cell:last-child {
    background: var(--k-tot);
    color: var(--k-tott) !important;
    border-radius: 6px;
}
.pub-tpl-royal-violet .pub-banner-footer { border-top: 1px solid var(--k-footb); color: var(--k-foott); }

/* 9) sunset-blaze */
.pub-tpl-sunset-blaze,
.pub-tpl-sunset-blaze.pub-var-1 {
    --k-bg: linear-gradient(180deg,#2b0a3d 0%,#7a1b52 40%,#c2410c 78%,#f59e0b 100%);
    --k-title: #fff3c4;
    --k-tsh: 0 4px 0 #8a1c0a, 0 0 24px rgba(255,159,28,.6);
    --k-date: #ffe0a8;
    --k-bar: linear-gradient(90deg,#ffb703,#ff4d6d);
    --k-barb: rgba(255,255,255,.35);
    --k-bart: #2a0612;
    --k-head: linear-gradient(90deg,#ffb703,#ff4d6d);
    --k-headt: #2a0612;
    --k-row: rgba(35,6,30,.86);
    --k-rowb: rgba(255,183,3,.8);
    --k-rowt: #ffffff;
    --k-team: #ffd68a;
    --k-tot: linear-gradient(180deg,#ffe08a,#ffa400);
    --k-tott: #3a0a1a;
    --k-footb: rgba(255,224,138,.4);
    --k-foott: #fff3c4;
    --k-edge: #ffb703;
}
.pub-tpl-sunset-blaze.pub-var-2 {
    --k-bg: linear-gradient(180deg,#2e1065 0%,#9d174d 45%,#ec4899 80%,#fbcfe8 100%);
    --k-title: #ffffff;
    --k-tsh: 0 4px 0 #831843, 0 0 24px rgba(251,207,232,.7);
    --k-date: #fbcfe8;
    --k-bar: linear-gradient(90deg,#22d3ee,#a78bfa);
    --k-barb: rgba(255,255,255,.4);
    --k-bart: #1e1b4b;
    --k-head: linear-gradient(90deg,#22d3ee,#a78bfa);
    --k-headt: #1e1b4b;
    --k-row: rgba(46,16,101,.86);
    --k-rowb: rgba(251,207,232,.8);
    --k-rowt: #ffffff;
    --k-team: #fbcfe8;
    --k-tot: linear-gradient(180deg,#a5f3fc,#22d3ee);
    --k-tott: #1e1b4b;
    --k-footb: rgba(251,207,232,.4);
    --k-foott: #ffffff;
    --k-edge: #22d3ee;
}
.pub-tpl-sunset-blaze.pub-var-3 {
    --k-bg: linear-gradient(180deg,#140404 0%,#7f1d1d 40%,#ea580c 78%,#facc15 100%);
    --k-title: #fff7d6;
    --k-tsh: 0 4px 0 #450a0a, 0 0 26px rgba(250,204,21,.6);
    --k-date: #fde68a;
    --k-bar: linear-gradient(90deg,#facc15,#ef4444);
    --k-barb: rgba(255,255,255,.35);
    --k-bart: #2a0505;
    --k-head: linear-gradient(90deg,#facc15,#ef4444);
    --k-headt: #2a0505;
    --k-row: rgba(24,4,4,.88);
    --k-rowb: rgba(250,204,21,.8);
    --k-rowt: #ffffff;
    --k-team: #fde68a;
    --k-tot: linear-gradient(180deg,#fef08a,#f59e0b);
    --k-tott: #3b0a0a;
    --k-footb: rgba(254,240,138,.4);
    --k-foott: #fff7d6;
    --k-edge: #facc15;
}
.pub-tpl-sunset-blaze:not(.pub-has-bg) { background: var(--k-bg); }
.pub-tpl-sunset-blaze { color: var(--k-rowt); }
.pub-tpl-sunset-blaze .pub-banner-title {
    font-family: 'Righteous', var(--font-display), serif;
    font-size: 70px;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.15;
    color: var(--k-title);
    text-shadow: var(--k-tsh);
}
.pub-tpl-sunset-blaze .pub-standings-bar {
    background: var(--k-bar);
    border: 2px solid var(--k-barb);
    border-radius: 30px;
    color: var(--k-bart);
    font-family: 'Righteous', var(--font-display), serif;
    font-weight: 400;
    font-style: normal;
}
.pub-tpl-sunset-blaze .pub-row:first-child { background: var(--k-head); color: var(--k-headt); border-radius: 22px; }
.pub-tpl-sunset-blaze .pub-row-team {
    background: var(--k-row) !important;
    border: 1px solid var(--k-rowb) !important;
    
    border-radius: 22px;
    color: var(--k-rowt);
}
.pub-tpl-sunset-blaze .pub-team-cell { color: var(--k-team); }
.pub-tpl-sunset-blaze .pub-row-team .pub-cell:last-child {
    background: var(--k-tot);
    color: var(--k-tott) !important;
    border-radius: 18px;
}
.pub-tpl-sunset-blaze .pub-banner-footer { border-top: 1px solid var(--k-footb); color: var(--k-foott); }

/* 10) aqua-wave */
.pub-tpl-aqua-wave,
.pub-tpl-aqua-wave.pub-var-1 {
    --k-bg: linear-gradient(165deg,#04212d 0%,#0a5c6e 50%,#05303d 100%);
    --k-title: #eaffff;
    --k-tsh: 0 4px 0 #064e5c, 0 0 22px rgba(45,212,191,.6);
    --k-date: #99f6e4;
    --k-bar: #ecfeff;
    --k-barb: #2dd4bf;
    --k-bart: #0f5b66;
    --k-head: #ccfbf1;
    --k-headt: #0f4c5c;
    --k-row: linear-gradient(90deg,rgba(240,253,250,.97),rgba(204,251,241,.94));
    --k-rowb: #5eead4;
    --k-rowt: #0b3b46;
    --k-team: #0f766e;
    --k-tot: linear-gradient(180deg,#0f766e,#064e4a);
    --k-tott: #ecfeff;
    --k-footb: rgba(94,234,212,.4);
    --k-foott: #ccfbf1;
    --k-edge: #14b8a6;
}
.pub-tpl-aqua-wave.pub-var-2 {
    --k-bg: linear-gradient(165deg,#0b1d4a 0%,#1d4ed8 50%,#0a1a45 100%);
    --k-title: #f0f9ff;
    --k-tsh: 0 4px 0 #1e3a8a, 0 0 22px rgba(96,165,250,.6);
    --k-date: #bae6fd;
    --k-bar: #f0f9ff;
    --k-barb: #60a5fa;
    --k-bart: #1e40af;
    --k-head: #dbeafe;
    --k-headt: #1e3a8a;
    --k-row: linear-gradient(90deg,rgba(239,246,255,.97),rgba(191,219,254,.94));
    --k-rowb: #93c5fd;
    --k-rowt: #172554;
    --k-team: #1d4ed8;
    --k-tot: linear-gradient(180deg,#1d4ed8,#172554);
    --k-tott: #eff6ff;
    --k-footb: rgba(147,197,253,.4);
    --k-foott: #dbeafe;
    --k-edge: #3b82f6;
}
.pub-tpl-aqua-wave.pub-var-3 {
    --k-bg: linear-gradient(165deg,#052e16 0%,#15803d 50%,#064e2b 100%);
    --k-title: #f7fee7;
    --k-tsh: 0 4px 0 #14532d, 0 0 22px rgba(163,230,53,.6);
    --k-date: #d9f99d;
    --k-bar: #f7fee7;
    --k-barb: #a3e635;
    --k-bart: #365314;
    --k-head: #ecfccb;
    --k-headt: #365314;
    --k-row: linear-gradient(90deg,rgba(247,254,231,.97),rgba(217,249,157,.94));
    --k-rowb: #bef264;
    --k-rowt: #1a2e05;
    --k-team: #3f6212;
    --k-tot: linear-gradient(180deg,#4d7c0f,#1a2e05);
    --k-tott: #f7fee7;
    --k-footb: rgba(190,242,100,.4);
    --k-foott: #d9f99d;
    --k-edge: #84cc16;
}
.pub-tpl-aqua-wave:not(.pub-has-bg) { background: var(--k-bg); }
.pub-tpl-aqua-wave { color: var(--k-rowt); }
.pub-tpl-aqua-wave .pub-banner-title {
    font-family: 'Pacifico', var(--font-display), serif;
    font-size: 60px;
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.15;
    color: var(--k-title);
    text-shadow: var(--k-tsh);
}
.pub-tpl-aqua-wave .pub-standings-bar {
    background: var(--k-bar);
    border: 2px solid var(--k-barb);
    border-radius: 30px;
    color: var(--k-bart);
    font-family: 'Pacifico', var(--font-display), serif;
    font-weight: 400;
    font-style: normal;
}
.pub-tpl-aqua-wave .pub-row:first-child { background: var(--k-head); color: var(--k-headt); border-radius: 10px; }
.pub-tpl-aqua-wave .pub-row-team {
    background: var(--k-row) !important;
    border: 1px solid var(--k-rowb) !important;
    border-left: 6px solid var(--k-edge) !important;
    border-radius: 10px;
    color: var(--k-rowt);
}
.pub-tpl-aqua-wave .pub-team-cell { color: var(--k-team); }
.pub-tpl-aqua-wave .pub-row-team .pub-cell:last-child {
    background: var(--k-tot);
    color: var(--k-tott) !important;
    border-radius: 6px;
}
.pub-tpl-aqua-wave .pub-banner-footer { border-top: 1px solid var(--k-footb); color: var(--k-foott); }

/* 11) carbon-steel */
.pub-tpl-carbon-steel,
.pub-tpl-carbon-steel.pub-var-1 {
    --k-bg: repeating-linear-gradient(45deg,#0b0c0f 0,#0b0c0f 6px,#12141a 6px,#12141a 12px);
    --k-title: #e5e7eb;
    --k-tsh: 0 3px 0 #7f1d1d, 0 0 18px rgba(255,255,255,.22);
    --k-date: #fca5a5;
    --k-bar: #16181d;
    --k-barb: #9ca3af;
    --k-bart: #f3f4f6;
    --k-head: linear-gradient(180deg,#d1d5db,#7b8088);
    --k-headt: #0b0c0f;
    --k-row: linear-gradient(90deg,#171a20,#252a33);
    --k-rowb: #4b5563;
    --k-rowt: #f3f4f6;
    --k-team: #ffffff;
    --k-tot: linear-gradient(180deg,#f3f4f6,#aeb4bd);
    --k-tott: #111318;
    --k-footb: rgba(239,68,68,.45);
    --k-foott: #d1d5db;
    --k-edge: #ef4444;
}
.pub-tpl-carbon-steel.pub-var-2 {
    --k-bg: repeating-linear-gradient(45deg,#0b0c0f 0,#0b0c0f 6px,#12141a 6px,#12141a 12px);
    --k-title: #e0f2fe;
    --k-tsh: 0 3px 0 #0e7490, 0 0 20px rgba(34,211,238,.45);
    --k-date: #67e8f9;
    --k-bar: #16181d;
    --k-barb: #67e8f9;
    --k-bart: #f3f4f6;
    --k-head: linear-gradient(180deg,#cffafe,#67b8c9);
    --k-headt: #082f49;
    --k-row: linear-gradient(90deg,#171a20,#252a33);
    --k-rowb: #164e63;
    --k-rowt: #f3f4f6;
    --k-team: #e0f7ff;
    --k-tot: linear-gradient(180deg,#ecfeff,#7dd3e8);
    --k-tott: #083344;
    --k-footb: rgba(34,211,238,.45);
    --k-foott: #a5f3fc;
    --k-edge: #06b6d4;
}
.pub-tpl-carbon-steel.pub-var-3 {
    --k-bg: repeating-linear-gradient(45deg,#0b0c0f 0,#0b0c0f 6px,#12141a 6px,#12141a 12px);
    --k-title: #fef3c7;
    --k-tsh: 0 3px 0 #92400e, 0 0 20px rgba(245,158,11,.45);
    --k-date: #fcd34d;
    --k-bar: #16181d;
    --k-barb: #fcd34d;
    --k-bart: #f3f4f6;
    --k-head: linear-gradient(180deg,#fde68a,#d09a2a);
    --k-headt: #1c1204;
    --k-row: linear-gradient(90deg,#171a20,#252a33);
    --k-rowb: #57451a;
    --k-rowt: #f3f4f6;
    --k-team: #fff7e0;
    --k-tot: linear-gradient(180deg,#fff3c4,#e6b035);
    --k-tott: #1c1204;
    --k-footb: rgba(245,158,11,.45);
    --k-foott: #fde68a;
    --k-edge: #f59e0b;
}
.pub-tpl-carbon-steel:not(.pub-has-bg) { background: var(--k-bg); }
.pub-tpl-carbon-steel { color: var(--k-rowt); }
.pub-tpl-carbon-steel .pub-banner-title {
    font-family: 'Black Ops One', var(--font-display), serif;
    font-size: 56px;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.15;
    color: var(--k-title);
    text-shadow: var(--k-tsh);
}
.pub-tpl-carbon-steel .pub-standings-bar {
    background: var(--k-bar);
    border: 1px solid var(--k-barb);
    border-bottom: 3px solid var(--k-edge);
    border-radius: 4px;
    color: var(--k-bart);
    font-family: 'Black Ops One', var(--font-display), serif;
    font-weight: 400;
    font-style: normal;
}
.pub-tpl-carbon-steel .pub-row:first-child { background: var(--k-head); color: var(--k-headt); border-radius: 4px; }
.pub-tpl-carbon-steel .pub-row-team {
    background: var(--k-row) !important;
    border: 1px solid var(--k-rowb) !important;
    border-left: 5px solid var(--k-edge) !important;
    border-radius: 4px;
    color: var(--k-rowt);
}
.pub-tpl-carbon-steel .pub-team-cell { color: var(--k-team); }
.pub-tpl-carbon-steel .pub-row-team .pub-cell:last-child {
    background: var(--k-tot);
    color: var(--k-tott) !important;
    border-radius: 4px;
}
.pub-tpl-carbon-steel .pub-banner-footer { border-top: 1px solid var(--k-footb); color: var(--k-foott); }

/* 12) rose-luxe */
.pub-tpl-rose-luxe,
.pub-tpl-rose-luxe.pub-var-1 {
    --k-bg: radial-gradient(ellipse at top,#6b1a3a 0%,#2c0b1a 56%,#14050c 100%);
    --k-title: #ffd9d2;
    --k-tsh: 0 3px 0 #7a2b3f, 0 0 22px rgba(244,167,157,.5);
    --k-date: #ffc9bf;
    --k-bar: linear-gradient(90deg,#f4c2b8,#d98e82);
    --k-barb: #ffe3dc;
    --k-bart: #4a0f24;
    --k-head: linear-gradient(90deg,#f8d1c8,#d99a8f);
    --k-headt: #4a0f24;
    --k-row: linear-gradient(90deg,rgba(255,241,237,.97),rgba(250,214,206,.95));
    --k-rowb: #e3a99f;
    --k-rowt: #4a0f24;
    --k-team: #8a1f43;
    --k-tot: linear-gradient(180deg,#7a1f40,#4a0f24);
    --k-tott: #ffe3dc;
    --k-footb: rgba(255,201,191,.4);
    --k-foott: #ffc9bf;
    --k-edge: #f4a79d;
}
.pub-tpl-rose-luxe.pub-var-2 {
    --k-bg: radial-gradient(ellipse at top,#2a2a2e 0%,#101012 56%,#050506 100%);
    --k-title: #f5e6c8;
    --k-tsh: 0 3px 0 #5a4a1f, 0 0 22px rgba(245,230,200,.4);
    --k-date: #e7d3a7;
    --k-bar: linear-gradient(90deg,#f5e6c8,#c9a45c);
    --k-barb: #fff3d6;
    --k-bart: #2a1f08;
    --k-head: linear-gradient(90deg,#f7ebd0,#c9a45c);
    --k-headt: #2a1f08;
    --k-row: linear-gradient(90deg,rgba(255,250,236,.97),rgba(245,230,200,.95));
    --k-rowb: #c9a45c;
    --k-rowt: #2a1f08;
    --k-team: #7a5a14;
    --k-tot: linear-gradient(180deg,#2e2e33,#0b0b0d);
    --k-tott: #f5e6c8;
    --k-footb: rgba(201,164,92,.4);
    --k-foott: #e7d3a7;
    --k-edge: #c9a45c;
}
.pub-tpl-rose-luxe.pub-var-3 {
    --k-bg: radial-gradient(ellipse at top,#5b1a7a 0%,#230a33 56%,#10041a 100%);
    --k-title: #f3e8ff;
    --k-tsh: 0 3px 0 #581c87, 0 0 22px rgba(216,180,254,.5);
    --k-date: #e9d5ff;
    --k-bar: linear-gradient(90deg,#e9d5ff,#c084fc);
    --k-barb: #f5e9ff;
    --k-bart: #3b0764;
    --k-head: linear-gradient(90deg,#f3e8ff,#c084fc);
    --k-headt: #3b0764;
    --k-row: linear-gradient(90deg,rgba(250,245,255,.97),rgba(233,213,255,.95));
    --k-rowb: #d8b4fe;
    --k-rowt: #2e1065;
    --k-team: #7e22ce;
    --k-tot: linear-gradient(180deg,#6b21a8,#3b0764);
    --k-tott: #f3e8ff;
    --k-footb: rgba(216,180,254,.4);
    --k-foott: #e9d5ff;
    --k-edge: #c084fc;
}
.pub-tpl-rose-luxe:not(.pub-has-bg) { background: var(--k-bg); }
.pub-tpl-rose-luxe { color: var(--k-rowt); }
.pub-tpl-rose-luxe .pub-banner-title {
    font-family: 'Playfair Display', var(--font-display), serif;
    font-size: 62px;
    font-weight: 900;
    font-style: italic;
    text-transform: none;
    letter-spacing: .02em;
    line-height: 1.15;
    color: var(--k-title);
    text-shadow: var(--k-tsh);
}
.pub-tpl-rose-luxe .pub-standings-bar {
    background: var(--k-bar);
    border: 2px solid var(--k-barb);
    border-radius: 30px;
    color: var(--k-bart);
    font-family: 'Playfair Display', var(--font-display), serif;
    font-weight: 900;
    font-style: italic;
}
.pub-tpl-rose-luxe .pub-row:first-child { background: var(--k-head); color: var(--k-headt); border-radius: 12px; }
.pub-tpl-rose-luxe .pub-row-team {
    background: var(--k-row) !important;
    border: 1px solid var(--k-rowb) !important;
    
    border-radius: 12px;
    color: var(--k-rowt);
}
.pub-tpl-rose-luxe .pub-team-cell { color: var(--k-team); }
.pub-tpl-rose-luxe .pub-row-team .pub-cell:last-child {
    background: var(--k-tot);
    color: var(--k-tott) !important;
    border-radius: 8px;
}
.pub-tpl-rose-luxe .pub-banner-footer { border-top: 1px solid var(--k-footb); color: var(--k-foott); }
.pub-tpl-royal-violet .pub-banner-row-1,
.pub-tpl-sunset-blaze .pub-banner-row-1,
.pub-tpl-aqua-wave .pub-banner-row-1,
.pub-tpl-carbon-steel .pub-banner-row-1,
.pub-tpl-rose-luxe .pub-banner-row-1 { box-shadow: 0 0 0 1px rgba(255, 215, 106, 0.95), 0 0 16px rgba(255, 200, 60, 0.45); }
.pub-tpl-royal-violet .pub-banner-row-2,
.pub-tpl-sunset-blaze .pub-banner-row-2,
.pub-tpl-aqua-wave .pub-banner-row-2,
.pub-tpl-carbon-steel .pub-banner-row-2,
.pub-tpl-rose-luxe .pub-banner-row-2 { box-shadow: 0 0 0 1px rgba(209, 213, 219, 0.9), 0 0 12px rgba(209, 213, 219, 0.30); }
.pub-tpl-royal-violet .pub-banner-row-3,
.pub-tpl-sunset-blaze .pub-banner-row-3,
.pub-tpl-aqua-wave .pub-banner-row-3,
.pub-tpl-carbon-steel .pub-banner-row-3,
.pub-tpl-rose-luxe .pub-banner-row-3 { box-shadow: 0 0 0 1px rgba(205, 127, 50, 0.95), 0 0 12px rgba(205, 127, 50, 0.32); }

/* ═══ v29i: 2 NEW point-table skins modelled on real Free Fire tournament posters ═══
   league-green = "League Stage Standings" (green city look, bright yellow row pills)
   gxf-red      = "Overall Standing" (red look, white team pills + red stat blocks)
   Same data / same columns (M1, M2, M3 ... Booyah, Kill, Pos, Total) — only the skin differs.
   Colors come from --k-* variables per combo (.pub-var-1/2/3). Placed BEFORE the
   Champion / BANNED row rules so those still win. Export-safe (solid/gradient/border/radius). */
.pub-tpl-league-green,
.pub-tpl-gxf-red { position: relative; }
.pub-tpl-league-green .pub-banner-header,
.pub-tpl-gxf-red .pub-banner-header {
    flex-direction: column; justify-content: center; text-align: center;
    border-bottom: none; padding: 36px var(--space-8) 12px;
}
.pub-tpl-league-green .pub-banner-brand,
.pub-tpl-gxf-red .pub-banner-brand { flex-direction: column; text-align: center; gap: var(--space-3); }
.pub-tpl-league-green .pub-banner-org-logo,
.pub-tpl-gxf-red .pub-banner-org-logo { position: absolute; top: 20px; right: 24px; width: 56px; height: 56px; }
.pub-tpl-league-green .pub-banner-date,
.pub-tpl-gxf-red .pub-banner-date { font-size: var(--text-base); letter-spacing: .12em; opacity: .95; margin-top: 4px; color: var(--k-date); }
.pub-tpl-league-green .pub-banner-title,
.pub-tpl-gxf-red .pub-banner-title {
    font-family: 'Anton', var(--font-display), sans-serif;
    font-size: 54px; font-weight: 400; font-style: normal;
    text-transform: uppercase; letter-spacing: .03em; line-height: 1.12;
    color: var(--k-title); text-shadow: var(--k-tsh);
}
.pub-tpl-league-green .pub-standings-bar,
.pub-tpl-gxf-red .pub-standings-bar {
    display: block; margin: 0 var(--space-8) 14px; padding: 4px 0 8px;
    font-family: 'Anton', var(--font-display), sans-serif;
    font-weight: 400; font-style: normal; font-size: 30px;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--k-bart); background: var(--k-bar);
    border-bottom: 3px solid var(--k-edge);
}
.pub-tpl-league-green:not(.pub-has-bg),
.pub-tpl-gxf-red:not(.pub-has-bg) { background: var(--k-bg); }
.pub-tpl-league-green,
.pub-tpl-gxf-red { color: var(--k-rowt); }
.pub-tpl-league-green .pub-row:first-child,
.pub-tpl-gxf-red .pub-row:first-child { border-bottom: none; margin-bottom: 8px; }
.pub-tpl-league-green .pub-cell-head,
.pub-tpl-gxf-red .pub-cell-head { opacity: 1; font-weight: 700; letter-spacing: .04em; padding: 0 2px; color: var(--k-headt); }
.pub-tpl-league-green .pub-row-team,
.pub-tpl-gxf-red .pub-row-team { margin-bottom: 7px; }
.pub-tpl-league-green .pub-cell,
.pub-tpl-gxf-red .pub-cell { font-weight: 800; }
.pub-tpl-league-green .pub-team-cell,
.pub-tpl-gxf-red .pub-team-cell { text-transform: uppercase; }
.pub-tpl-league-green .pub-banner-footer,
.pub-tpl-gxf-red .pub-banner-footer { border-top: 1px solid var(--k-footb); color: var(--k-foott); }

/* ── 13) league-green: one long bright pill per team ── */
.pub-tpl-league-green,
.pub-tpl-league-green.pub-var-1 {
    --k-bg: radial-gradient(ellipse at 50% 0%,#2f8f1c 0%,#0f4a12 48%,#05200a 100%);
    --k-title: #ffffff;
    --k-tsh: 0 4px 0 #0a3a0c, 0 0 22px rgba(246,238,47,.35);
    --k-date: #f6ee2f;
    --k-bar: transparent; --k-bart: #ffffff; --k-edge: #f6ee2f;
    --k-headt: #f6ee2f;
    --k-row: linear-gradient(180deg,#fbf55a,#ece31c);
    --k-rowb: #fff98a; --k-rowt: #101505; --k-team: #101505;
    --k-tot: rgba(16,21,5,.14); --k-tott: #101505;
    --k-footb: rgba(246,238,47,.4); --k-foott: #e6f7c8;
}
.pub-tpl-league-green.pub-var-2 {
    --k-bg: radial-gradient(ellipse at 50% 0%,#1d4fb8 0%,#0a1f5c 50%,#040b24 100%);
    --k-tsh: 0 4px 0 #07184a, 0 0 22px rgba(56,189,248,.45);
    --k-date: #7dd3fc; --k-edge: #38bdf8; --k-headt: #7dd3fc;
    --k-row: linear-gradient(180deg,#e6f9ff,#8fdcf8);
    --k-rowb: #c5f0ff; --k-rowt: #06203a; --k-team: #06203a;
    --k-tot: rgba(6,32,58,.14); --k-tott: #06203a;
    --k-footb: rgba(56,189,248,.4); --k-foott: #bae6fd;
}
.pub-tpl-league-green.pub-var-3 {
    --k-bg: radial-gradient(ellipse at 50% 0%,#6d28d9 0%,#2a0a55 50%,#0e0220 100%);
    --k-tsh: 0 4px 0 #1e0842, 0 0 22px rgba(251,146,60,.45);
    --k-date: #fdba74; --k-edge: #fb923c; --k-headt: #fdba74;
    --k-row: linear-gradient(180deg,#ffc878,#ff9a1f);
    --k-rowb: #ffd9a0; --k-rowt: #2a1200; --k-team: #2a1200;
    --k-tot: rgba(42,18,0,.16); --k-tott: #2a1200;
    --k-footb: rgba(251,146,60,.4); --k-foott: #fed7aa;
}
.pub-tpl-league-green .pub-row:first-child { background: transparent; color: var(--k-headt); }
.pub-tpl-league-green .pub-row-team {
    background: var(--k-row) !important;
    border: 1px solid var(--k-rowb) !important;
    border-radius: 10px;
    color: var(--k-rowt);
    box-shadow: 0 3px 0 rgba(0,0,0,.28);
}
.pub-tpl-league-green .pub-team-cell { color: var(--k-team); }
.pub-tpl-league-green .pub-banner-rank { background: rgba(16,21,5,.12); color: var(--k-rowt); }
.pub-tpl-league-green .pub-row-team .pub-cell:last-child {
    background: var(--k-tot);
    color: var(--k-tott) !important;
    border-radius: 8px;
    font-size: 1.1em;
}

/* ── 14) gxf-red: red stat blocks + white team pill, #1 team in yellow ── */
.pub-tpl-gxf-red,
.pub-tpl-gxf-red.pub-var-1 {
    --k-bg: radial-gradient(ellipse at 30% 0%,#8f0e0e 0%,#3a0505 52%,#120202 100%);
    --k-title: #ffffff;
    --k-tsh: 0 4px 0 #b30000, 0 0 24px rgba(255,60,40,.5);
    --k-date: #ffb4a8;
    --k-bar: transparent; --k-bart: #ffffff; --k-edge: #ff3b30;
    --k-head: linear-gradient(180deg,#2a0606,#140202);
    --k-headt: #ffffff;
    --k-cell: linear-gradient(180deg,#d41a1a,#8f0b0b);
    --k-cellb: rgba(255,255,255,.22); --k-cellt: #ffffff;
    --k-pill: linear-gradient(180deg,#ffffff,#e8e8ea); --k-pillt: #17090a;
    --k-first: linear-gradient(180deg,#fff44f,#e8c800); --k-firstt: #2a2000;
    --k-rowt: #ffffff;
    --k-footb: rgba(255,59,48,.45); --k-foott: #ffd0ca;
}
.pub-tpl-gxf-red.pub-var-2 {
    --k-bg: radial-gradient(ellipse at 30% 0%,#2b2b30 0%,#0e0e10 55%,#030304 100%);
    --k-tsh: 0 4px 0 #6b5200, 0 0 24px rgba(250,204,21,.45);
    --k-date: #fde68a; --k-edge: #facc15;
    --k-head: linear-gradient(180deg,#2d2d33,#141417);
    --k-cell: linear-gradient(180deg,#34343b,#18181c);
    --k-cellb: rgba(250,204,21,.45); --k-cellt: #fde68a;
    --k-footb: rgba(250,204,21,.4); --k-foott: #fde68a;
}
.pub-tpl-gxf-red.pub-var-3 {
    --k-bg: radial-gradient(ellipse at 30% 0%,#14409a 0%,#081c52 52%,#030a22 100%);
    --k-tsh: 0 4px 0 #0a2a80, 0 0 24px rgba(96,165,250,.55);
    --k-date: #bfdbfe; --k-edge: #3b82f6;
    --k-head: linear-gradient(180deg,#0e2a6e,#061538);
    --k-cell: linear-gradient(180deg,#2563eb,#123a9c);
    --k-cellb: rgba(255,255,255,.25); --k-cellt: #ffffff;
    --k-footb: rgba(96,165,250,.45); --k-foott: #dbeafe;
}
.pub-tpl-gxf-red .pub-row:first-child .pub-cell {
    background: var(--k-head);
    color: var(--k-headt);
    border-radius: 6px;
}
.pub-tpl-gxf-red .pub-row-team {
    background: transparent !important;
    border: none !important;
    color: var(--k-rowt);
}
.pub-tpl-gxf-red .pub-row-team .pub-cell {
    height: 40px; line-height: 40px;
    background: var(--k-cell);
    border: 1px solid var(--k-cellb);
    border-radius: 6px;
    color: var(--k-cellt);
}
.pub-tpl-gxf-red .pub-row-team .pub-cell:last-child { color: var(--k-cellt) !important; font-size: 1.1em; }
.pub-tpl-gxf-red .pub-row-team .pub-team-cell {
    background: var(--k-pill);
    color: var(--k-pillt);
    padding-left: 14px;
}
/* v70: the yellow #1-team pill was removed - rank 1 now has the same white pill as every other team */
.pub-tpl-gxf-red .pub-banner-rank { margin-top: 1px; background: transparent; }

/* ═══ v29c: color combos 2 & 3 for the older skins (combo 1 = original look) ═══ */
.pub-tpl-gold-glow.pub-var-2 .pub-banner-title { color:#e5e7eb; text-shadow:0 0 14px rgba(229,231,235,.55), 0 2px 10px rgba(0,0,0,.35); }
.pub-tpl-gold-glow.pub-var-2 .pub-banner-header { border-bottom:2px solid #94a3b8; }
.pub-tpl-gold-glow.pub-var-2 .pub-row-team { border:1px solid rgba(226,232,240,.35) !important; }
.pub-tpl-gold-glow.pub-var-2 .pub-cell-head { color:#e5e7eb; }
.pub-tpl-gold-glow.pub-var-3 .pub-banner-title { color:#fda4af; text-shadow:0 0 14px rgba(253,164,175,.55), 0 2px 10px rgba(0,0,0,.35); }
.pub-tpl-gold-glow.pub-var-3 .pub-banner-header { border-bottom:2px solid #e11d48; }
.pub-tpl-gold-glow.pub-var-3 .pub-row-team { border:1px solid rgba(253,164,175,.35) !important; }
.pub-tpl-gold-glow.pub-var-3 .pub-cell-head { color:#fda4af; }
.pub-tpl-halloween.pub-var-2 .pub-banner-title { color:#ffa94d; text-shadow:0 4px 0 #3b1200, 0 0 22px rgba(255,169,77,.55); }
.pub-tpl-halloween.pub-var-2 .pub-banner-date { color:#ffd8a8; }
.pub-tpl-halloween.pub-var-2 .pub-standings-bar { color:#ffa94d; }
.pub-tpl-halloween.pub-var-2 .pub-row:first-child { background:#ffa94d; color:#2a1200; }
.pub-tpl-halloween.pub-var-2 .pub-row-team { background:rgba(40,16,4,.88) !important; border:1px solid rgba(255,146,43,.6) !important; }
.pub-tpl-halloween.pub-var-2 .pub-team-cell { color:#ffa94d; }
.pub-tpl-halloween.pub-var-3 .pub-banner-title { color:#a3ff6b; text-shadow:0 4px 0 #052e16, 0 0 22px rgba(163,255,107,.5); }
.pub-tpl-halloween.pub-var-3 .pub-banner-date { color:#d9f99d; }
.pub-tpl-halloween.pub-var-3 .pub-standings-bar { color:#a3ff6b; }
.pub-tpl-halloween.pub-var-3 .pub-row:first-child { background:#a3ff6b; color:#052e16; }
.pub-tpl-halloween.pub-var-3 .pub-row-team { background:rgba(4,32,16,.88) !important; border:1px solid rgba(74,222,128,.55) !important; }
.pub-tpl-halloween.pub-var-3 .pub-team-cell { color:#a3ff6b; }
.pub-tpl-ice-blue.pub-var-2 .pub-standings-bar { background:#fff1f7; color:#9d174d; }
.pub-tpl-ice-blue.pub-var-2 .pub-row:first-child { background:#fff1f7; color:#9d174d; }
.pub-tpl-ice-blue.pub-var-2 .pub-row-team .pub-cell { background:#fbcfe8; color:#5b0f33; }
.pub-tpl-ice-blue.pub-var-2 .pub-row-team .pub-team-cell { background:#fff1f7; color:#6b0f3a; }
.pub-tpl-ice-blue.pub-var-2 .pub-row-team .pub-cell:last-child { color:#7a0f3f !important; }
.pub-tpl-ice-blue.pub-var-3 .pub-standings-bar { background:#f0fdf4; color:#14532d; }
.pub-tpl-ice-blue.pub-var-3 .pub-row:first-child { background:#f0fdf4; color:#14532d; }
.pub-tpl-ice-blue.pub-var-3 .pub-row-team .pub-cell { background:#bbf7d0; color:#052e16; }
.pub-tpl-ice-blue.pub-var-3 .pub-row-team .pub-team-cell { background:#f0fdf4; color:#14532d; }
.pub-tpl-ice-blue.pub-var-3 .pub-row-team .pub-cell:last-child { color:#064e2b !important; }
.pub-tpl-red-gold.pub-var-2 .pub-standings-bar { background:linear-gradient(180deg,#2563eb,#172554); border:2px solid #cbd5e1; }
.pub-tpl-red-gold.pub-var-2 .pub-row:first-child { background:linear-gradient(180deg,#f1f5f9,#aab4c5); color:#172554; }
.pub-tpl-red-gold.pub-var-2 .pub-row-team { background:linear-gradient(180deg,#1d4ed8,#172554) !important; border:2px solid #cbd5e1 !important; }
.pub-tpl-red-gold.pub-var-2 .pub-row-team .pub-cell:last-child { background:linear-gradient(180deg,#ffffff,#cbd5e1); color:#172554 !important; }
.pub-tpl-red-gold.pub-var-3 .pub-standings-bar { background:linear-gradient(180deg,#16a34a,#052e16); border:2px solid #e5b24a; }
.pub-tpl-red-gold.pub-var-3 .pub-row:first-child { background:linear-gradient(180deg,#ffe7a3,#f0b73a); color:#052e16; }
.pub-tpl-red-gold.pub-var-3 .pub-row-team { background:linear-gradient(180deg,#15803d,#052e16) !important; border:2px solid #e5b24a !important; }
.pub-tpl-red-gold.pub-var-3 .pub-row-team .pub-cell:last-child { background:linear-gradient(180deg,#fff3cf,#e9c26a); color:#052e16 !important; }
.pub-tpl-premium-green-arena.pub-var-2 { background:radial-gradient(ellipse at top,#1e3a8a 0%,#0a1433 54%,#050a1a 100%); }
.pub-tpl-premium-green-arena.pub-var-2 .pub-banner-header { background:linear-gradient(110deg,rgba(17,40,110,.96),rgba(37,99,235,.82),rgba(7,16,40,.94)); border-bottom:2px solid #60a5fa; }
.pub-tpl-premium-green-arena.pub-var-2 .pub-banner-title { color:#bfdbfe; text-shadow:0 0 14px rgba(96,165,250,.3); }
.pub-tpl-premium-green-arena.pub-var-2 .pub-banner-date { color:#dbeafe; }
.pub-tpl-premium-green-arena.pub-var-2 .pub-standings-bar { border:1px solid #60a5fa; background:linear-gradient(90deg,#0f2a6b,#2563eb 50%,#0f2a6b); }
.pub-tpl-premium-green-arena.pub-var-2 .pub-row:not(.pub-row-team) { color:#dbeafe; border-bottom:2px solid #60a5fa; }
.pub-tpl-premium-green-arena.pub-var-2 .pub-row-team { background:linear-gradient(90deg,rgba(232,240,255,.98),rgba(244,248,255,.96)) !important; border:1px solid rgba(96,165,250,.9); color:#0f1f4a; }
.pub-tpl-premium-green-arena.pub-var-2 .pub-row-team .pub-cell { color:#0f1f4a; }
.pub-tpl-premium-green-arena.pub-var-2 .pub-row-team [style*="font-weight:800"] { color:#1d4ed8 !important; }
.pub-tpl-premium-green-arena.pub-var-2 .pub-banner-footer { border-top:1px solid rgba(96,165,250,.38); color:#dbeafe; }
.pub-tpl-premium-green-arena.pub-var-3 { background:radial-gradient(ellipse at top,#7f1d1d 0%,#2a0808 54%,#120404 100%); }
.pub-tpl-premium-green-arena.pub-var-3 .pub-banner-header { background:linear-gradient(110deg,rgba(110,17,17,.96),rgba(220,38,38,.82),rgba(40,7,7,.94)); border-bottom:2px solid #f87171; }
.pub-tpl-premium-green-arena.pub-var-3 .pub-banner-title { color:#fecaca; text-shadow:0 0 14px rgba(248,113,113,.3); }
.pub-tpl-premium-green-arena.pub-var-3 .pub-banner-date { color:#fee2e2; }
.pub-tpl-premium-green-arena.pub-var-3 .pub-standings-bar { border:1px solid #f87171; background:linear-gradient(90deg,#6e1111,#dc2626 50%,#6e1111); }
.pub-tpl-premium-green-arena.pub-var-3 .pub-row:not(.pub-row-team) { color:#fee2e2; border-bottom:2px solid #f87171; }
.pub-tpl-premium-green-arena.pub-var-3 .pub-row-team { background:linear-gradient(90deg,rgba(255,228,230,.98),rgba(255,241,242,.96)) !important; border:1px solid rgba(248,113,113,.9); color:#4a0d0d; }
.pub-tpl-premium-green-arena.pub-var-3 .pub-row-team .pub-cell { color:#4a0d0d; }
.pub-tpl-premium-green-arena.pub-var-3 .pub-row-team [style*="font-weight:800"] { color:#b91c1c !important; }
.pub-tpl-premium-green-arena.pub-var-3 .pub-banner-footer { border-top:1px solid rgba(248,113,113,.38); color:#fee2e2; }


/* ═══ v29d: title font options 2 & 3 for every design (option 1 = the design's own font) ═══ */
.pub-tpl-gold-glow.pub-font-2 .pub-banner-title { font-size: 26px; font-family: 'Abril Fatface', var(--font-display), serif; font-weight: 400; font-style: normal; letter-spacing: .03em; }
.pub-tpl-gold-glow.pub-font-3 .pub-banner-title { font-size: 31px; font-family: 'Bebas Neue', var(--font-display), sans-serif; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: .06em; }
.pub-tpl-halloween.pub-font-2 .pub-banner-title { font-family: 'Eater', var(--font-display), cursive; font-weight: 400; font-style: normal; letter-spacing: .03em; }
.pub-tpl-halloween.pub-font-3 .pub-banner-title { font-family: 'Pirata One', var(--font-display), cursive; font-weight: 400; font-style: normal; letter-spacing: .03em; }
.pub-tpl-ice-blue.pub-font-2 .pub-banner-title { font-family: 'Audiowide', var(--font-display), sans-serif; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: .02em; }
.pub-tpl-ice-blue.pub-font-3 .pub-banner-title { font-family: 'Staatliches', var(--font-display), sans-serif; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: .04em; }
.pub-tpl-red-gold.pub-font-2 .pub-banner-title { font-family: 'Anton', var(--font-display), sans-serif; font-weight: 400; font-style: normal; font-size: 76px; text-transform: uppercase; letter-spacing: .03em; }
.pub-tpl-red-gold.pub-font-3 .pub-banner-title { font-family: 'Bebas Neue', var(--font-display), sans-serif; font-weight: 400; font-style: normal; font-size: 86px; text-transform: uppercase; letter-spacing: .05em; }
.pub-tpl-premium-green-arena.pub-font-2 .pub-banner-title { font-size: 22px; font-family: 'Bungee', var(--font-display), sans-serif; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: .02em; }
.pub-tpl-premium-green-arena.pub-font-3 .pub-banner-title { font-size: 28px; font-family: 'Rajdhani', var(--font-display), sans-serif; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: .06em; }
.pub-tpl-royal-violet.pub-font-2 .pub-banner-title { font-family: 'Cinzel Decorative', var(--font-display), serif; font-weight: 900; font-style: normal; font-size: 60px; text-transform: none; letter-spacing: .02em; }
.pub-tpl-royal-violet.pub-font-2 .pub-standings-bar { font-family: 'Cinzel Decorative', var(--font-display), serif; font-weight: 900; font-style: normal; }
.pub-tpl-royal-violet.pub-font-3 .pub-banner-title { font-family: 'UnifrakturCook', var(--font-display), serif; font-weight: 700; font-style: normal; font-size: 72px; text-transform: none; letter-spacing: .01em; }
.pub-tpl-royal-violet.pub-font-3 .pub-standings-bar { font-family: 'UnifrakturCook', var(--font-display), serif; font-weight: 700; font-style: normal; }
.pub-tpl-sunset-blaze.pub-font-2 .pub-banner-title { font-family: 'Lobster', var(--font-display), cursive; font-weight: 400; font-style: normal; font-size: 68px; text-transform: none; letter-spacing: 0; }
.pub-tpl-sunset-blaze.pub-font-2 .pub-standings-bar { font-family: 'Lobster', var(--font-display), cursive; font-weight: 400; font-style: normal; }
.pub-tpl-sunset-blaze.pub-font-3 .pub-banner-title { font-family: 'Permanent Marker', var(--font-display), cursive; font-weight: 400; font-style: normal; font-size: 62px; text-transform: uppercase; letter-spacing: .02em; }
.pub-tpl-sunset-blaze.pub-font-3 .pub-standings-bar { font-family: 'Permanent Marker', var(--font-display), cursive; font-weight: 400; font-style: normal; }
.pub-tpl-aqua-wave.pub-font-2 .pub-banner-title { font-family: 'Lilita One', var(--font-display), sans-serif; font-weight: 400; font-style: normal; font-size: 68px; text-transform: uppercase; letter-spacing: .03em; }
.pub-tpl-aqua-wave.pub-font-2 .pub-standings-bar { font-family: 'Lilita One', var(--font-display), sans-serif; font-weight: 400; font-style: normal; }
.pub-tpl-aqua-wave.pub-font-3 .pub-banner-title { font-family: 'Chewy', var(--font-display), cursive; font-weight: 400; font-style: normal; font-size: 70px; text-transform: uppercase; letter-spacing: .03em; }
.pub-tpl-aqua-wave.pub-font-3 .pub-standings-bar { font-family: 'Chewy', var(--font-display), cursive; font-weight: 400; font-style: normal; }
.pub-tpl-carbon-steel.pub-font-2 .pub-banner-title { font-family: 'Russo One', var(--font-display), sans-serif; font-weight: 400; font-style: normal; font-size: 58px; text-transform: uppercase; letter-spacing: .04em; }
.pub-tpl-carbon-steel.pub-font-2 .pub-standings-bar { font-family: 'Russo One', var(--font-display), sans-serif; font-weight: 400; font-style: normal; }
.pub-tpl-carbon-steel.pub-font-3 .pub-banner-title { font-family: 'Teko', var(--font-display), sans-serif; font-weight: 700; font-style: normal; font-size: 76px; text-transform: uppercase; letter-spacing: .06em; }
.pub-tpl-carbon-steel.pub-font-3 .pub-standings-bar { font-family: 'Teko', var(--font-display), sans-serif; font-weight: 700; font-style: normal; }
.pub-tpl-rose-luxe.pub-font-2 .pub-banner-title { font-family: 'Great Vibes', var(--font-display), cursive; font-weight: 400; font-style: normal; font-size: 78px; text-transform: none; letter-spacing: 0; }
.pub-tpl-rose-luxe.pub-font-2 .pub-standings-bar { font-family: 'Great Vibes', var(--font-display), cursive; font-weight: 400; font-style: normal; }
.pub-tpl-rose-luxe.pub-font-3 .pub-banner-title { font-family: 'Cormorant Garamond', var(--font-display), serif; font-weight: 700; font-style: italic; font-size: 68px; text-transform: none; letter-spacing: .02em; }
.pub-tpl-rose-luxe.pub-font-3 .pub-standings-bar { font-family: 'Cormorant Garamond', var(--font-display), serif; font-weight: 700; font-style: italic; }

/* ---- Champion Rush champion row: glow + faint CHAMPION watermark ----
   Applies to EVERY template. Only the single champion team's row gets
   .pub-row-champion (see renderBannerHTML). The watermark is a real
   <span> (not a ::before/::after) so the native exporter, which copies
   elements' computed styles, captures it too. */
.pub-row-team.pub-row-champion {
    position: relative;
    box-shadow:
        0 0 0 2px rgba(255, 214, 64, 0.95),
        0 0 22px 4px rgba(255, 196, 40, 0.60),
        inset 0 0 26px rgba(255, 224, 120, 0.30) !important;
}
.pub-row-champion > .pub-cell {
    position: relative;
    z-index: 1;
}
/* CHAMPION watermark: letter-spaced "C H A M P I O N" sitting along the
   bottom of the champion's row, blended into the background. Color and
   transparency come from the Publish page (--champ-color / --champ-opacity). */
.pub-champ-watermark {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 26px;
    line-height: 26px;
    letter-spacing: 0.65em;
    text-indent: 0.65em;
    color: var(--champ-color, #ffffff);
    opacity: var(--champ-opacity, 0.2);
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
    overflow: hidden;
}

/* ---- BANNED row (hack / third-party tool) ----
   Whole row turns into a warning strip with a repeating BANNED watermark.
   Fill = --ban-color, watermark text = --ban-text at --ban-opacity. */
.pub-row-team.pub-row-banned {
    position: relative;
    background: var(--ban-bg, rgba(214, 31, 44, 0.9)) !important;
    border-radius: 8px;
    box-shadow:
        0 0 0 2px var(--ban-color, #d61f2c),
        0 0 16px 2px var(--ban-glow, rgba(214, 31, 44, 0.75)) !important;
}
.pub-row-team.pub-row-banned > .pub-cell,
.pub-row-team.pub-row-banned > .pub-cell[style] {
    position: relative;
    z-index: 1;
    color: #ffffff !important;
}
.pub-ban-watermark {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0.35em;
    color: var(--ban-text, #ffffff);
    opacity: var(--ban-opacity, 0.25);
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
    overflow: hidden;
}

/* ---- Penalty & Ban panel (Publish page, inside Banner Settings) ---- */
.pub-adj {
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
    padding-top: var(--space-4);
    margin-top: var(--space-2);
}
.pub-adj-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}
.pub-adj-saved {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.pub-adj-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: var(--space-3);
}
.pub-adj-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 2px;
}
.pub-adj-empty {
    font-size: var(--text-sm);
    color: var(--text-muted);
}
.pub-adj-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
}
.pub-adj-row.is-banned {
    border-color: rgba(214, 31, 44, 0.7);
    background: rgba(214, 31, 44, 0.12);
}
.pub-adj-name {
    font-size: var(--text-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pub-adj-pts {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
}
.pub-adj-input {
    width: 72px;
    padding: 4px 8px;
    text-align: center;
}
.pub-adj-ban {
    border: 1px solid rgba(214, 31, 44, 0.7);
    background: transparent;
    color: #ff5a64;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
    min-width: 62px;
}
.pub-adj-ban.on {
    background: #d61f2c;
    color: #ffffff;
}
.pub-adj-fx {
    margin-top: var(--space-4);
}
.pub-fx-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.pub-fx-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.pub-fx-slider {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}
.pub-fx-slider input[type="range"] {
    width: 100%;
}

/* ── MVP banner: character figure + six designs ──────────────────────
   Class on #mvp-banner picks the design (mvp-tpl-<id>); the default
   rules above are "Neon Arena". Rank colors arrive per card as
   --mvp-accent / --mvp-tint / --mvp-glow (see MVP_TEMPLATES). */

.mvp-photo { position: relative; min-height: 0; }
.mvp-figure {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 94%;
    width: auto;
    max-width: 100%;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}
.mvp-card-top .mvp-figure { height: 96%; }

/* ---- 2. Violet Night: centered title, purple glass cards, big rank numbers ---- */
.mvp-tpl-violet-night .mvp-header { justify-content: center; text-align: center; }
.mvp-tpl-violet-night .mvp-title { font-size: 60px; }
.mvp-tpl-violet-night .mvp-title-a { color: #ffcf33; text-shadow: 0 0 22px rgba(255, 207, 51, 0.7), 0 3px 0 rgba(0, 0, 0, 0.8); }
.mvp-tpl-violet-night .mvp-title-b { color: #ead7ff; text-shadow: 0 0 20px rgba(192, 132, 252, 0.8), 0 3px 0 rgba(0, 0, 0, 0.8); }
.mvp-tpl-violet-night .mvp-subtitle {
    background: transparent; color: #ffffff; clip-path: none;
    letter-spacing: 0.32em; padding: 4px 18px;
    border-top: 2px solid #c77dff; border-bottom: 2px solid #c77dff;
}
.mvp-tpl-violet-night .mvp-card {
    background: radial-gradient(circle at 50% 28%, var(--mvp-tint), transparent 70%), linear-gradient(180deg, #230e52 0%, #0a0420 100%);
    border-radius: 6px;
}
.mvp-tpl-violet-night .mvp-rank-badge {
    background: transparent; clip-path: none; color: var(--mvp-accent);
    padding: 0 0 0 14px; top: 6px; font-size: 52px;
    text-shadow: 0 0 16px var(--mvp-glow), 0 3px 0 rgba(0, 0, 0, 0.9);
}
.mvp-tpl-violet-night .mvp-card-top .mvp-rank-badge { font-size: 84px; top: 2px; padding: 0 0 0 18px; }
.mvp-tpl-violet-night .mvp-name-bar { background: linear-gradient(90deg, rgba(20, 6, 48, 0.95), rgba(40, 14, 90, 0.85)); }

/* ---- 3. Tech Green: HUD frames, hex rank badge, team name on a color strip ---- */
.mvp-tpl-tech-green .mvp-title-a { color: #b6ff3c; text-shadow: 0 0 20px rgba(120, 255, 60, 0.7), 0 3px 0 rgba(0, 0, 0, 0.8); }
.mvp-tpl-tech-green .mvp-title-b { color: #f2fff0; }
.mvp-tpl-tech-green .mvp-subtitle { background: #4cf07a; color: #03140a; }
.mvp-tpl-tech-green .mvp-card {
    border-radius: 3px;
    border-width: 1px;
    background: radial-gradient(circle at 50% 30%, var(--mvp-tint), transparent 70%), linear-gradient(135deg, #07281a 0%, #020a06 100%);
    box-shadow: 0 0 16px 1px var(--mvp-glow), inset 0 0 0 4px rgba(0, 0, 0, 0.55), inset 0 0 0 5px var(--mvp-tint);
}
.mvp-tpl-tech-green .mvp-rank-badge {
    top: 12px; left: 12px;
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    padding: 10px 20px; font-size: 26px;
}
.mvp-tpl-tech-green .mvp-card-top .mvp-rank-badge { font-size: 38px; padding: 14px 28px; }
.mvp-tpl-tech-green .mvp-name-bar { background: rgba(0, 0, 0, 0.78); border-top: none; align-items: flex-end; }
.mvp-tpl-tech-green .mvp-team-name {
    display: inline-block; align-self: flex-start;
    background: var(--mvp-accent); color: #04120a;
    padding: 2px 12px 2px 8px; margin-top: 4px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

/* ---- 4. Sunset Gold: wide #1 card on top, four cards in a row ---- */
.mvp-tpl-sunset-gold .mvp-title-a { color: #ffc933; text-shadow: 0 0 22px rgba(255, 150, 40, 0.8), 0 3px 0 rgba(0, 0, 0, 0.8); }
.mvp-tpl-sunset-gold .mvp-subtitle { background: linear-gradient(90deg, #ffc933, #ff8a3c); }
.mvp-tpl-sunset-gold .mvp-grid { grid-template-columns: 1fr; }
.mvp-tpl-sunset-gold .mvp-grid-rest { grid-template-columns: repeat(4, 1fr); }
.mvp-tpl-sunset-gold .mvp-card {
    background: radial-gradient(circle at 50% 30%, var(--mvp-tint), transparent 70%), linear-gradient(180deg, #1a0f1e 0%, #080509 100%);
    min-height: 236px;
}
.mvp-tpl-sunset-gold .mvp-card-top {
    display: grid;
    grid-template-columns: 310px 1fr;
    grid-template-rows: 1fr auto;
    min-height: 250px;
}
.mvp-tpl-sunset-gold .mvp-card-top .mvp-photo { grid-column: 1; grid-row: 1 / span 2; }
.mvp-tpl-sunset-gold .mvp-card-top .mvp-name-bar { grid-column: 2; grid-row: 2; border-top: none; border-left: 2px solid var(--mvp-accent); }
.mvp-tpl-sunset-gold .mvp-card-top .mvp-stats { right: 18px; top: 18px; }
.mvp-tpl-sunset-gold .mvp-card-top .mvp-crown { left: 190px; }
.mvp-tpl-sunset-gold .mvp-card-top .mvp-player-name { font-size: 44px; }

/* ---- 5. Shield Rank: shield badges, #1 card + vertical list of four ---- */
.mvp-tpl-shield-rank .mvp-title-a { color: #ffd21a; text-shadow: 0 0 20px rgba(255, 210, 26, 0.6), 0 3px 0 rgba(0, 0, 0, 0.85); }
.mvp-tpl-shield-rank .mvp-subtitle { background: rgba(0, 0, 0, 0.7); color: #ffd21a; border: 2px solid #ffd21a; clip-path: none; border-radius: 4px; }
.mvp-tpl-shield-rank .mvp-card {
    background: radial-gradient(circle at 50% 30%, var(--mvp-tint), transparent 72%), linear-gradient(180deg, #0f1730 0%, #050813 100%);
}
.mvp-tpl-shield-rank .mvp-rank-badge {
    top: 8px; left: 12px;
    clip-path: polygon(0 0, 100% 0, 100% 68%, 50% 100%, 0 68%);
    padding: 8px 14px 18px; font-size: 24px;
}
.mvp-tpl-shield-rank .mvp-card-top .mvp-rank-badge { font-size: 40px; padding: 12px 22px 28px; }
.mvp-tpl-shield-rank .mvp-grid-rest { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-card {
    display: grid;
    grid-template-columns: 104px 1fr auto;
    min-height: 0;
    align-items: stretch;
}
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-photo { grid-column: 1; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-rank-badge { transform: scale(0.8); transform-origin: top left; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-name-bar { grid-column: 2; border-top: none; background: transparent; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-stats { position: static; grid-column: 3; align-self: center; margin-right: 12px; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-stat-value { font-size: 30px; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-player-name { font-size: 22px; }

/* ---- 6. Frost Ice: cool navy cards, round rank badges ---- */
.mvp-tpl-frost-ice .mvp-title-a { color: #7cf0ff; text-shadow: 0 0 22px rgba(124, 240, 255, 0.7), 0 3px 0 rgba(0, 0, 0, 0.8); }
.mvp-tpl-frost-ice .mvp-subtitle { background: #7cf0ff; color: #04121f; }
.mvp-tpl-frost-ice .mvp-card {
    background: radial-gradient(circle at 50% 28%, var(--mvp-tint), transparent 70%), linear-gradient(180deg, #11284a 0%, #060f20 100%);
    border-radius: 18px;
}
.mvp-tpl-frost-ice .mvp-rank-badge {
    top: 10px; left: 10px; clip-path: none; border-radius: 50%;
    width: 54px; height: 54px; padding: 0; display: flex; align-items: center; justify-content: center;
    font-size: 24px; box-shadow: 0 0 14px var(--mvp-glow);
}
.mvp-tpl-frost-ice .mvp-card-top .mvp-rank-badge { width: 76px; height: 76px; font-size: 34px; }
.mvp-tpl-frost-ice .mvp-stats { border: 1px solid var(--mvp-accent); }
.mvp-tpl-frost-ice .mvp-name-bar { background: linear-gradient(90deg, rgba(4, 12, 28, 0.95), rgba(14, 36, 70, 0.9)); }

/* MVP design picker (Publish page) */
.mvp-tpl-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-2);
    margin: var(--space-3) 0;
}
.mvp-tpl-chip {
    height: 52px;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.mvp-tpl-chip.active { border-color: #ffffff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }

/* ---- fixes after visual review ---- */
.mvp-card:not(.mvp-card-top) .mvp-figure { height: 110%; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-photo,
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-name-bar,
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-stats { grid-row: 1; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-figure { height: 112%; }
.mvp-tpl-tech-green .mvp-team-name {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11.5px;
}
.mvp-tpl-tech-green .mvp-card-top .mvp-team-name { font-size: 16px; }
.mvp-tpl-violet-night .mvp-card-top .mvp-crown { left: 150px; top: 12px; }
.mvp-name-text { overflow: hidden; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-card { grid-template-columns: 160px 1fr auto; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-figure { left: auto; right: 4px; transform: none; height: 108%; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-name-bar { padding-left: 4px; }


/* ---- MVP player team logo (small round badge left of the name) ---- */
.mvp-team-logo {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: #000;
    border: 2px solid var(--mvp-accent, #ffd21a);
}
.mvp-card-top .mvp-team-logo { width: 58px; height: 58px; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-team-logo { width: 32px; height: 32px; }
.mvp-name-bar .mvp-team-logo + .mvp-name-text { flex: 1; }

/* ---- MVP Photos & Logos panel (separate from the banner settings) ---- */
.mvp-media {
    margin-top: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
}
.mvp-media > summary {
    cursor: pointer;
    padding: var(--space-3) var(--space-4);
    font-weight: 700;
    font-size: var(--text-sm);
}
.mvp-media-body { padding: 0 var(--space-4) var(--space-4); }
.mvp-media-hint { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-3); line-height: 1.6; }
.mvp-media-hint b { color: var(--text-secondary); }
.mvp-media-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: 8px 0;
    border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
}
.mvp-media-who { min-width: 0; }
.mvp-media-who b { display: block; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mvp-media-who span { font-size: var(--text-xs); color: var(--text-muted); }
.mvp-media-slot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mvp-media-thumb {
    width: 64px; height: 36px;           /* 16:9 */
    border-radius: 6px; overflow: hidden;
    border: 1px solid var(--border-default);
    background: var(--bg-primary, #0b0b10);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: var(--text-muted);
}
.mvp-media-thumb.logo { width: 36px; height: 36px; border-radius: 50%; }   /* 1:1 */
.mvp-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mvp-media-btns { display: flex; gap: 4px; }
.mvp-media-btns .btn { padding: 2px 8px; font-size: 11px; }


/* ---- MVP role chip (small, under the team name) ---- */
.mvp-role {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    margin-top: 3px;
    padding: 1px 7px 1px 5px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.5;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--mvp-accent, #ffd21a);
}
.mvp-role svg { width: 12px; height: 12px; color: var(--mvp-accent, #ffd21a); flex: none; }
.mvp-card-top .mvp-role { font-size: 13px; padding: 2px 10px 2px 7px; gap: 6px; margin-top: 5px; }
.mvp-card-top .mvp-role svg { width: 16px; height: 16px; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-role { margin-top: 2px; font-size: 9px; padding: 0 6px 0 4px; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-role svg { width: 10px; height: 10px; }

/* MVP manage page: role dropdown + 2-column slots */
.mvp-media-row { grid-template-columns: 1fr 1fr; }
.mvp-media-head { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3); }
.mvp-media-head .mvp-media-who { flex: 1; }
.mvp-media-role { max-width: 150px; }

/* Keep every small card the same height: one-line team name, bigger role icon */
.mvp-grid-rest .mvp-team-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.mvp-role { font-size: 10.5px; }
.mvp-role svg { width: 15px; height: 15px; stroke-width: 2.2; }
.mvp-card-top .mvp-role svg { width: 20px; height: 20px; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-role svg { width: 12px; height: 12px; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-name-bar { min-width: 0; overflow: hidden; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-team-logo { width: 28px; height: 28px; }


/* ---- v16: role / IGL chips sit tight above the player name, top-left ---- */
.mvp-role-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    margin: 0 0 1px 0;
    align-self: flex-start;
}
.mvp-role-row .mvp-role { margin-top: 0; align-self: auto; white-space: nowrap; }
.mvp-role-igl { background: var(--mvp-accent, #ffd21a); color: #0a0a0f; }
.mvp-role-igl svg { color: #0a0a0f; }
.mvp-card-top .mvp-role-row { gap: 6px; margin-bottom: 2px; }
.mvp-tpl-shield-rank .mvp-grid-rest .mvp-role-row { gap: 3px; }

/* Manage MVP: editable name inputs */
.mvp-edit-names { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.mvp-edit-names input { width: 100%; min-width: 0; }
.mvp-igl-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* Leaderboard page: banner preview + buttons directly under it */
.lb-section-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.lb-mvp-card { margin-top: var(--space-5); }

.lb-actions-right { justify-content: flex-end; }
.lb-mvp-fit { width: 100%; overflow: hidden; border-radius: var(--radius-lg); cursor: pointer; position: relative; }
.lb-mvp-fit #mvp-banner { margin: 0; }


/* =====================================================================
   v17: wider MVP banner (1200px), bigger #2-#5 cards, safer name text,
   and four new layouts (Center Stage, Podium, Hero Bottom, Top Duo).
   ===================================================================== */

/* names never wrap onto the next line (that overlapped the team name in exports) */
.mvp-player-name, .mvp-team-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* the four classic-grid designs: #1 left, #2-#5 bigger on the right */
#mvp-banner:is(.mvp-tpl-neon-arena, .mvp-tpl-violet-night, .mvp-tpl-tech-green, .mvp-tpl-frost-ice) .mvp-grid { grid-template-columns: 1fr 1.4fr; }
#mvp-banner:is(.mvp-tpl-neon-arena, .mvp-tpl-violet-night, .mvp-tpl-tech-green, .mvp-tpl-frost-ice) .mvp-grid-rest .mvp-card { min-height: 252px; }
#mvp-banner:is(.mvp-tpl-neon-arena, .mvp-tpl-violet-night, .mvp-tpl-tech-green, .mvp-tpl-frost-ice) .mvp-card-top { min-height: 520px; }
#mvp-banner:is(.mvp-tpl-neon-arena, .mvp-tpl-violet-night, .mvp-tpl-tech-green, .mvp-tpl-frost-ice) .mvp-grid-rest .mvp-player-name { font-size: 26px; }
#mvp-banner:is(.mvp-tpl-neon-arena, .mvp-tpl-violet-night, .mvp-tpl-tech-green, .mvp-tpl-frost-ice) .mvp-grid-rest .mvp-team-name { font-size: 15px; }
#mvp-banner:is(.mvp-tpl-neon-arena, .mvp-tpl-violet-night, .mvp-tpl-tech-green, .mvp-tpl-frost-ice) .mvp-grid-rest .mvp-stat-value { font-size: 44px; }

/* Sunset Gold: wider top card, taller row of four */
.mvp-tpl-sunset-gold .mvp-card-top { grid-template-columns: 400px 1fr; min-height: 290px; }
.mvp-tpl-sunset-gold .mvp-card-top .mvp-crown { left: 200px; }
#mvp-banner.mvp-tpl-sunset-gold .mvp-grid-rest .mvp-card { min-height: 290px; }
/* Shield Rank: roomier list rows */
#mvp-banner.mvp-tpl-shield-rank .mvp-grid-rest .mvp-card { min-height: 118px; }

/* ---- shared by the four new layouts ---- */
#mvp-banner:is(.mvp-tpl-center-stage, .mvp-tpl-podium, .mvp-tpl-hero-bottom, .mvp-tpl-top-duo) .mvp-grid-rest { display: contents; }
#mvp-banner:is(.mvp-tpl-center-stage, .mvp-tpl-podium, .mvp-tpl-hero-bottom, .mvp-tpl-top-duo) .mvp-grid { gap: 18px; }
#mvp-banner:is(.mvp-tpl-center-stage, .mvp-tpl-podium, .mvp-tpl-hero-bottom, .mvp-tpl-top-duo) .mvp-card-top { grid-area: top; }
#mvp-banner:is(.mvp-tpl-center-stage, .mvp-tpl-podium, .mvp-tpl-hero-bottom, .mvp-tpl-top-duo) .mvp-grid-rest .mvp-card:nth-child(1) { grid-area: c2; }
#mvp-banner:is(.mvp-tpl-center-stage, .mvp-tpl-podium, .mvp-tpl-hero-bottom, .mvp-tpl-top-duo) .mvp-grid-rest .mvp-card:nth-child(2) { grid-area: c3; }
#mvp-banner:is(.mvp-tpl-center-stage, .mvp-tpl-podium, .mvp-tpl-hero-bottom, .mvp-tpl-top-duo) .mvp-grid-rest .mvp-card:nth-child(3) { grid-area: c4; }
#mvp-banner:is(.mvp-tpl-center-stage, .mvp-tpl-podium, .mvp-tpl-hero-bottom, .mvp-tpl-top-duo) .mvp-grid-rest .mvp-card:nth-child(4) { grid-area: c5; }
#mvp-banner:is(.mvp-tpl-center-stage, .mvp-tpl-podium, .mvp-tpl-hero-bottom, .mvp-tpl-top-duo) .mvp-card { min-height: 250px; }
#mvp-banner:is(.mvp-tpl-center-stage, .mvp-tpl-podium, .mvp-tpl-hero-bottom, .mvp-tpl-top-duo) .mvp-grid-rest .mvp-player-name { font-size: 24px; }
#mvp-banner:is(.mvp-tpl-center-stage, .mvp-tpl-podium, .mvp-tpl-hero-bottom, .mvp-tpl-top-duo) .mvp-grid-rest .mvp-team-name { font-size: 14px; }
#mvp-banner:is(.mvp-tpl-center-stage, .mvp-tpl-podium, .mvp-tpl-hero-bottom, .mvp-tpl-top-duo) .mvp-grid-rest .mvp-stat-value { font-size: 40px; }

/* ---- Center Stage: #1 tall in the middle, two cards each side ---- */
#mvp-banner.mvp-tpl-center-stage .mvp-title-a { color: #ffc933; text-shadow: 0 0 22px rgba(255, 90, 90, 0.7), 0 3px 0 rgba(0, 0, 0, 0.8); }
#mvp-banner.mvp-tpl-center-stage .mvp-subtitle { background: linear-gradient(90deg, #ffc933, #ff5a5a); }
#mvp-banner.mvp-tpl-center-stage .mvp-grid { grid-template-columns: 1fr 1.5fr 1fr; grid-template-areas: "c2 top c4" "c3 top c5"; }
#mvp-banner.mvp-tpl-center-stage .mvp-card-top { min-height: 520px; }
#mvp-banner.mvp-tpl-center-stage .mvp-card { border-radius: 16px; }

/* ---- Podium: #2 | #1 (tallest) | #3, then #4 and #5 underneath ---- */
#mvp-banner.mvp-tpl-podium .mvp-title-a { color: #ffd700; text-shadow: 0 0 22px rgba(255, 215, 0, 0.6), 0 3px 0 rgba(0, 0, 0, 0.8); }
#mvp-banner.mvp-tpl-podium .mvp-subtitle { background: #c9d2e4; color: #0a0e1a; }
#mvp-banner.mvp-tpl-podium .mvp-header { justify-content: center; text-align: center; }
#mvp-banner.mvp-tpl-podium .mvp-grid { grid-template-columns: repeat(6, 1fr); grid-template-areas: "c2 c2 top top c3 c3" "c4 c4 c4 c5 c5 c5"; align-items: end; }
#mvp-banner.mvp-tpl-podium .mvp-card-top { min-height: 470px; }
#mvp-banner.mvp-tpl-podium .mvp-grid-rest .mvp-card:nth-child(1),
#mvp-banner.mvp-tpl-podium .mvp-grid-rest .mvp-card:nth-child(2) { min-height: 370px; }
#mvp-banner.mvp-tpl-podium .mvp-grid-rest .mvp-card:nth-child(3),
#mvp-banner.mvp-tpl-podium .mvp-grid-rest .mvp-card:nth-child(4) { min-height: 230px; }

/* ---- Hero Bottom: #2-#5 in a row on top, wide #1 underneath ---- */
#mvp-banner.mvp-tpl-hero-bottom .mvp-title-a { color: #2ef2d0; text-shadow: 0 0 22px rgba(46, 242, 208, 0.6), 0 3px 0 rgba(0, 0, 0, 0.8); }
#mvp-banner.mvp-tpl-hero-bottom .mvp-subtitle { background: #2ef2d0; color: #021614; }
#mvp-banner.mvp-tpl-hero-bottom .mvp-grid { grid-template-columns: repeat(4, 1fr); grid-template-areas: "c2 c3 c4 c5" "top top top top"; }
#mvp-banner.mvp-tpl-hero-bottom .mvp-grid-rest .mvp-card { min-height: 270px; }
#mvp-banner.mvp-tpl-hero-bottom .mvp-card-top {
    display: grid;
    grid-template-columns: 440px 1fr;
    grid-template-rows: 1fr auto;
    min-height: 310px;
}
#mvp-banner.mvp-tpl-hero-bottom .mvp-card-top .mvp-photo { grid-column: 1; grid-row: 1 / span 2; }
#mvp-banner.mvp-tpl-hero-bottom .mvp-card-top .mvp-name-bar { grid-column: 2; grid-row: 2; border-top: none; border-left: 2px solid var(--mvp-accent); }
#mvp-banner.mvp-tpl-hero-bottom .mvp-card-top .mvp-stats { right: 22px; top: 18px; }
#mvp-banner.mvp-tpl-hero-bottom .mvp-card-top .mvp-crown { left: 150px; }
#mvp-banner.mvp-tpl-hero-bottom .mvp-card-top .mvp-player-name { font-size: 46px; }

/* ---- Top Duo: #1 wide + #2 on the first row, #3 #4 #5 on the second ---- */
#mvp-banner.mvp-tpl-top-duo .mvp-title-a { color: #ff4d6d; text-shadow: 0 0 22px rgba(255, 77, 109, 0.6), 0 3px 0 rgba(0, 0, 0, 0.8); }
#mvp-banner.mvp-tpl-top-duo .mvp-subtitle { background: linear-gradient(90deg, #ff4d6d, #ffd21a); }
#mvp-banner.mvp-tpl-top-duo .mvp-grid { grid-template-columns: repeat(3, 1fr); grid-template-areas: "top top c2" "c3 c4 c5"; }
#mvp-banner.mvp-tpl-top-duo .mvp-card-top { min-height: 350px; }
#mvp-banner.mvp-tpl-top-duo .mvp-grid-rest .mvp-card:nth-child(1) { min-height: 350px; }
#mvp-banner.mvp-tpl-top-duo .mvp-grid-rest .mvp-card:nth-child(1) .mvp-player-name { font-size: 32px; }

/* ═══ v29e: MVP Leaderboard - title font options 2 & 3 per design (option 1 = Oswald italic, as before) ═══ */
.mvp-tpl-neon-arena.mvp-font-2 .mvp-title { font-family: 'Audiowide', 'Oswald', sans-serif; font-size: 52px; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: .03em; }
.mvp-tpl-neon-arena.mvp-font-3 .mvp-title { font-family: 'Russo One', 'Oswald', sans-serif; font-size: 54px; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: .03em; }
.mvp-tpl-violet-night.mvp-font-2 .mvp-title { font-family: 'Cinzel Decorative', 'Oswald', serif; font-size: 52px; font-weight: 900; font-style: normal; text-transform: uppercase; letter-spacing: .02em; }
.mvp-tpl-violet-night.mvp-font-3 .mvp-title { font-family: 'UnifrakturCook', 'Oswald', serif; font-size: 62px; font-weight: 700; font-style: normal; text-transform: none; letter-spacing: .01em; }
.mvp-tpl-tech-green.mvp-font-2 .mvp-title { font-family: 'Rajdhani', 'Oswald', sans-serif; font-size: 62px; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: .06em; }
.mvp-tpl-tech-green.mvp-font-3 .mvp-title { font-family: 'Teko', 'Oswald', sans-serif; font-size: 72px; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: .06em; }
.mvp-tpl-sunset-gold.mvp-font-2 .mvp-title { font-family: 'Lobster', 'Oswald', cursive; font-size: 60px; font-weight: 400; font-style: normal; text-transform: none; letter-spacing: 0; }
.mvp-tpl-sunset-gold.mvp-font-3 .mvp-title { font-family: 'Righteous', 'Oswald', sans-serif; font-size: 56px; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: .03em; }
.mvp-tpl-shield-rank.mvp-font-2 .mvp-title { font-family: 'Black Ops One', 'Oswald', sans-serif; font-size: 52px; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: .04em; }
.mvp-tpl-shield-rank.mvp-font-3 .mvp-title { font-family: 'Anton', 'Oswald', sans-serif; font-size: 60px; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: .03em; }
.mvp-tpl-frost-ice.mvp-font-2 .mvp-title { font-family: 'Staatliches', 'Oswald', sans-serif; font-size: 62px; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: .05em; }
.mvp-tpl-frost-ice.mvp-font-3 .mvp-title { font-family: 'Pacifico', 'Oswald', cursive; font-size: 52px; font-weight: 400; font-style: normal; text-transform: none; letter-spacing: 0; }
.mvp-tpl-center-stage.mvp-font-2 .mvp-title { font-family: 'Bebas Neue', 'Oswald', sans-serif; font-size: 70px; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: .05em; }
.mvp-tpl-center-stage.mvp-font-3 .mvp-title { font-family: 'Abril Fatface', 'Oswald', serif; font-size: 54px; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: .02em; }
.mvp-tpl-podium.mvp-font-2 .mvp-title { font-family: 'Cinzel', 'Oswald', serif; font-size: 54px; font-weight: 900; font-style: normal; text-transform: uppercase; letter-spacing: .04em; }
.mvp-tpl-podium.mvp-font-3 .mvp-title { font-family: 'Playfair Display', 'Oswald', serif; font-size: 52px; font-weight: 900; font-style: italic; text-transform: none; letter-spacing: .02em; }
.mvp-tpl-hero-bottom.mvp-font-2 .mvp-title { font-family: 'Lilita One', 'Oswald', sans-serif; font-size: 58px; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: .03em; }
.mvp-tpl-hero-bottom.mvp-font-3 .mvp-title { font-family: 'Chewy', 'Oswald', cursive; font-size: 60px; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: .03em; }
.mvp-tpl-top-duo.mvp-font-2 .mvp-title { font-family: 'Bungee', 'Oswald', sans-serif; font-size: 50px; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: .02em; }
.mvp-tpl-top-duo.mvp-font-3 .mvp-title { font-family: 'Permanent Marker', 'Oswald', cursive; font-size: 50px; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: .02em; }

/* MVP slide inside the dashboard carousel: the 1200px banner is scaled down to the slide width by JS (js/banner-bar.js). */
.mvp-fit { width: 100%; overflow: hidden; position: relative; }
.mvp-fit > #mvp-banner { margin: 0; transform-origin: top left; }

/* v29i fonts for league-green / gxf-red */
.pub-tpl-league-green.pub-font-2 .pub-banner-title,
.pub-tpl-gxf-red.pub-font-2 .pub-banner-title { font-family: 'Bebas Neue', var(--font-display), sans-serif; font-size: 64px; letter-spacing: .05em; }
.pub-tpl-league-green.pub-font-2 .pub-standings-bar,
.pub-tpl-gxf-red.pub-font-2 .pub-standings-bar { font-family: 'Bebas Neue', var(--font-display), sans-serif; font-size: 34px; }
.pub-tpl-league-green.pub-font-3 .pub-banner-title,
.pub-tpl-gxf-red.pub-font-3 .pub-banner-title { font-family: 'Teko', var(--font-display), sans-serif; font-weight: 700; font-size: 70px; letter-spacing: .04em; }
.pub-tpl-league-green.pub-font-3 .pub-standings-bar,
.pub-tpl-gxf-red.pub-font-3 .pub-standings-bar { font-family: 'Teko', var(--font-display), sans-serif; font-weight: 700; font-size: 36px; }

/* ── Optional team logo next to the team name (Publish page panel + banner) ── */
.pub-team-logo {
    display: inline-block;
    width: 30px;
    height: 30px;
    object-fit: contain;
    vertical-align: middle;
    border-radius: 6px;
}
.pub-team-logo-before { margin-right: 8px; }
.pub-team-logo-after { margin-left: 8px; }
.pub-tpl-gxf-red .pub-team-logo { width: 26px; height: 26px; }
.pub-tlogo-pos { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.pub-tlogo-row { display: flex; align-items: center; gap: var(--space-2); }
.pub-tlogo-row .pub-adj-name { flex: 1; min-width: 0; }
.pub-tlogo-thumb { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; background: rgba(255,255,255,.08); }


/* ═══════════════════════════════════════════════════════════════════════
   PHASE 1 — OVERALL STANDINGS  STYLE A (Yellow Header / Classic Grid)
                                STYLE B (Blue / Slanted Grid)
   Renderer: js/engine/overall-styles.js (separate from the 12 older designs).
   Every rule is scoped to .pub-tpl-overall-style-a / -b, so nothing above
   can be affected. Export-safe on purpose: solid fills, clip-path polygons,
   line-height centering, no transforms on text.
   Colors come from --o-* variables set per combination (.pub-var-1/2/3).
   ═══════════════════════════════════════════════════════════════════════ */
.ov-root { position: relative; box-sizing: border-box; width: 100%; overflow: hidden; }
.ov-root > * { position: relative; z-index: 1; }
.ov-root > .ov-bg-slot { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* Phase 2: background art layer */
.ov-banner-slot:empty, .ov-brand-slot:empty { display: none; }  /* Phase 2: event brush banner / TEA AI branding */
.ov-head { text-align: center; }
.ov-org-logo { display: block; margin: 0 auto; object-fit: contain; }
.ov-table { margin: 0 auto; }
.ov-row { display: grid; box-sizing: border-box; }
.ov-c { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-align: center; }
.ov-c > span { display: block; width: 100%; overflow: hidden; text-overflow: clip; }
.ov-team-logo { display: block; object-fit: contain; margin: 0 auto; }
.ov-empty { text-align: center; opacity: .8; padding: 20px; }
.ov-foot { text-align: center; }
.ov-foot:empty { display: none; }
.ov-row-banned { filter: grayscale(1) brightness(.6); }

/* Proportions below are measured from the reference pictures (A: 1254px square,
   table = 65% width; B: 1280x1600, table = 89% width) and scaled to the 1000px banner,
   so the background art stays visible around the table exactly like the reference. */
/* ───────────── STYLE A ───────────── */
.pub-tpl-overall-style-a {
    --o-accent: #f6a800; --o-accent2: #ffd35a; --o-headt: #111111;
    --o-stat: #5a5d62; --o-statt: #ffffff;
    --o-cell: #ffffff; --o-cellt: #1b1b1b; --o-logo: #3e4146;
    --o-bg: radial-gradient(ellipse at 50% 20%, #3a3126 0%, #14110d 70%);
    --o-titlet: #ffffff; --o-foott: #f3e2b0;
    min-height: 1000px; padding: 12px 0 28px; color: var(--o-cellt);
}
.pub-tpl-overall-style-a.pub-var-2 { --o-accent: #e5242b; --o-accent2: #ff6a6f; --o-headt: #ffffff; --o-bg: radial-gradient(ellipse at 50% 20%, #3b1417 0%, #120707 70%); --o-foott: #ffc9cb; }
.pub-tpl-overall-style-a.pub-var-3 { --o-accent: #1fb6e0; --o-accent2: #7fdcf5; --o-headt: #04222c; --o-bg: radial-gradient(ellipse at 50% 20%, #12323d 0%, #060f13 70%); --o-foott: #bdeaf6; }
.pub-tpl-overall-style-a:not(.pub-has-bg) { background: var(--o-bg); }
.pub-tpl-overall-style-a .ov-org-logo { width: 120px; height: 120px; }
.pub-tpl-overall-style-a .ov-title-big {
    font-family: 'Barlow Condensed', 'Oswald', sans-serif; font-weight: 700; font-style: italic;
    font-size: 80px; line-height: 80px; letter-spacing: .01em; text-transform: uppercase;
    color: var(--o-titlet); margin: 14px auto 0; padding: 0 60px; text-shadow: 0 4px 14px rgba(0,0,0,.55);
}
.pub-tpl-overall-style-a.pub-font-2 .ov-title-big { font-family: 'Anton', sans-serif; font-style: normal; font-weight: 400; font-size: 66px; letter-spacing: .03em; }
.pub-tpl-overall-style-a.pub-font-3 .ov-title-big { font-family: 'Teko', sans-serif; font-style: normal; font-weight: 700; font-size: 90px; }
.pub-tpl-overall-style-a .ov-date { margin: -6px 0 -16px; line-height: 22px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 20px; letter-spacing: .12em; color: var(--o-accent2); text-transform: uppercase; }

.pub-tpl-overall-style-a .ov-table {
    width: 650px; margin-top: 21px;
    background: repeating-linear-gradient(135deg, #17130c 0 6px, #2a2112 6px 9px);
    border-bottom: 5px solid var(--o-accent); box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.pub-tpl-overall-style-a .ov-row { grid-template-columns: 56px 62px 1fr 62px 68px 66px 61px 68px; column-gap: 0; }
.pub-tpl-overall-style-a .ov-row-head { background: var(--o-accent); height: 36px; margin-bottom: 18px; }
.pub-tpl-overall-style-a .ov-row-head .ov-c { height: 36px; }
.pub-tpl-overall-style-a .ov-row-head .ov-c > span { line-height: 36px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: .04em; color: var(--o-headt); }
.pub-tpl-overall-style-a .ov-row-head .ov-c2 > span { text-align: left; padding-left: 12px; }
.pub-tpl-overall-style-a .ov-row-team { height: 37px; margin-bottom: 7px; }
.pub-tpl-overall-style-a .ov-row-team .ov-c { height: 37px; border-right: 1px solid rgba(0,0,0,.18); }
.pub-tpl-overall-style-a .ov-row-team .ov-c > span { line-height: 37px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-style: italic; font-size: 21px; }
.pub-tpl-overall-style-a .ov-row-team .ov-c0 { background: var(--o-cell); color: var(--o-cellt); }
.pub-tpl-overall-style-a .ov-row-team .ov-c1 { background: var(--o-logo); }
.pub-tpl-overall-style-a .ov-row-team .ov-c1 > span { line-height: 0; padding-top: 3px; }
.pub-tpl-overall-style-a .ov-team-logo { width: 31px; height: 31px; }
.pub-tpl-overall-style-a .ov-row-team .ov-c2 { background: var(--o-cell); color: var(--o-cellt); }
.pub-tpl-overall-style-a .ov-row-team .ov-c2 > span { text-align: left; padding-left: 12px; font-size: 20px; text-transform: uppercase; }
/* v56: alternate dark / white / dark / white / dark like the HIS ESP reference: MP dark, TB white, PP dark, KP white, TP dark */
.pub-tpl-overall-style-a .ov-row-team .ov-c3,
.pub-tpl-overall-style-a .ov-row-team .ov-c5,
.pub-tpl-overall-style-a .ov-row-team .ov-c7 { background: var(--o-stat); color: var(--o-statt); }
.pub-tpl-overall-style-a .ov-row-team .ov-c4,
.pub-tpl-overall-style-a .ov-row-team .ov-c6 { background: var(--o-cell); color: var(--o-cellt); }
.pub-tpl-overall-style-a .ov-row-team .ov-c7 > span { font-weight: 700; }
.pub-tpl-overall-style-a .ov-foot { margin-top: 24px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: .08em; text-transform: uppercase; color: var(--o-foott); }

/* ───────────── STYLE B ───────────── */
.pub-tpl-overall-style-b {
    --o-bg1: #1b55e0; --o-bg2: #0f33a8;
    --o-navy: #0a1a52; --o-navyt: #ffffff;
    --o-white: #f4f6ff; --o-whitet: #0a1a52;
    --o-head: #0a1a52; --o-headt: #dbe6ff; --o-totalhead: #86b6ff; --o-totalheadt: #0a1a52;
    --o-title: #f4f7ff; --o-small: #dbe6ff; --o-foott: #dbe6ff;
    --o-s: 12px;
    min-height: 1250px; padding: 40px 0 34px; color: var(--o-whitet);
}
.pub-tpl-overall-style-b.pub-var-2 { --o-bg1: #d3202a; --o-bg2: #8c0f17; --o-navy: #3a0508; --o-white: #fff5f5; --o-whitet: #3a0508; --o-head: #3a0508; --o-headt: #ffd9db; --o-totalhead: #ff9aa0; --o-totalheadt: #3a0508; --o-title: #fff5f5; --o-small: #ffd9db; --o-foott: #ffd9db; }
.pub-tpl-overall-style-b.pub-var-3 { --o-bg1: #12a45f; --o-bg2: #08683a; --o-navy: #042a19; --o-white: #f1fff7; --o-whitet: #042a19; --o-head: #042a19; --o-headt: #c9f7de; --o-totalhead: #8ef0bd; --o-totalheadt: #042a19; --o-title: #f1fff7; --o-small: #c9f7de; --o-foott: #c9f7de; }
.pub-tpl-overall-style-b:not(.pub-has-bg) {
    background:
        linear-gradient(115deg, transparent 0 14%, rgba(255,255,255,.07) 14% 30%, transparent 30% 48%, rgba(0,0,0,.14) 48% 66%, transparent 66% 82%, rgba(255,255,255,.05) 82% 100%),
        linear-gradient(180deg, var(--o-bg1), var(--o-bg2));
}
.pub-tpl-overall-style-b .ov-org-logo { width: 104px; height: 104px; margin: 0 auto; }   /* v64: logo sits at the TOP CENTRE above the title (was pinned to the left) */
.pub-tpl-overall-style-b .ov-title-small { font-family: 'Barlow Condensed', 'Oswald', sans-serif; font-weight: 600; font-size: 24px; line-height: 40px; letter-spacing: .14em; text-transform: uppercase; color: var(--o-small); padding: 0 130px; }
.pub-tpl-overall-style-b .ov-title-big { white-space: nowrap; font-family: 'Bebas Neue', 'Anton', sans-serif; font-weight: 400; -webkit-text-stroke: 2px var(--o-title); font-size: 104px; line-height: 104px; letter-spacing: .005em; color: var(--o-title); margin: 70px 0 0; }
.pub-tpl-overall-style-b.pub-font-2 .ov-title-big { font-family: 'Anton', sans-serif; -webkit-text-stroke: 0; font-size: 86px; line-height: 104px; }
.pub-tpl-overall-style-b.pub-font-3 .ov-title-big { font-family: 'Teko', sans-serif; font-weight: 700; -webkit-text-stroke: 0; font-size: 118px; line-height: 104px; }
.pub-tpl-overall-style-b .ov-date-strip { width: 262px; height: 36px; margin: 28px auto 0; background: var(--o-white); clip-path: polygon(var(--o-s) 0, 100% 0, calc(100% - var(--o-s)) 100%, 0 100%); }
.pub-tpl-overall-style-b .ov-date-strip span { display: block; line-height: 36px; font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .03em; color: var(--o-bg1); text-transform: uppercase; }

.pub-tpl-overall-style-b .ov-table { width: 890px; margin-top: 24px; }
.pub-tpl-overall-style-b .ov-row { grid-template-columns: 69px 52px 1fr 67px 67px 68px 66px 80px; column-gap: 6px; }
/* every cell is the same parallelogram: top edge shifted right by --o-s */
.pub-tpl-overall-style-b .ov-c { clip-path: polygon(var(--o-s) 0, 100% 0, calc(100% - var(--o-s)) 100%, 0 100%); }
/* logo + name share ONE white shape: logo = left slant only, name = right slant only */
.pub-tpl-overall-style-b .ov-c1 { margin-right: -6px; clip-path: polygon(var(--o-s) 0, 100% 0, 100% 100%, 0 100%); }
.pub-tpl-overall-style-b .ov-c2 { clip-path: polygon(0 0, 100% 0, calc(100% - var(--o-s)) 100%, 0 100%); }
.pub-tpl-overall-style-b .ov-row-head { margin-bottom: 20px; }
.pub-tpl-overall-style-b .ov-row-head .ov-c { height: 29px; background: var(--o-head); }
.pub-tpl-overall-style-b .ov-row-head .ov-c > span { line-height: 29px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: .06em; color: var(--o-headt); }
.pub-tpl-overall-style-b .ov-row-head .ov-c2 > span { text-align: left; padding-left: 14px; }
.pub-tpl-overall-style-b .ov-row-head .ov-c-total { background: var(--o-totalhead); }
.pub-tpl-overall-style-b .ov-row-head .ov-c-total > span { color: var(--o-totalheadt); }
.pub-tpl-overall-style-b .ov-row-team { margin-bottom: 10px; }
.pub-tpl-overall-style-b .ov-row-team .ov-c { height: 51px; background: var(--o-white); color: var(--o-whitet); }
.pub-tpl-overall-style-b .ov-row-team .ov-c > span { line-height: 51px; font-family: 'Bebas Neue', 'Oswald', sans-serif; font-weight: 400; font-size: 33px; }
.pub-tpl-overall-style-b .ov-row-team .ov-c0,
.pub-tpl-overall-style-b .ov-row-team .ov-c-total { background: var(--o-navy); color: var(--o-navyt); }
.pub-tpl-overall-style-b .ov-row-team .ov-c1 > span { line-height: 0; padding-top: 7px; padding-left: 8px; }
.pub-tpl-overall-style-b .ov-team-logo { width: 37px; height: 37px; }
.pub-tpl-overall-style-b .ov-row-team .ov-c2 > span { text-align: left; padding-left: 6px; font-size: 31px; letter-spacing: .01em; text-transform: uppercase; }
.pub-tpl-overall-style-b .ov-foot { margin-top: 22px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: .1em; text-transform: uppercase; color: var(--o-foott); }

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 2 — Overall STYLE A / STYLE B: background layer, Event Label
   (brush stroke), headline extras, TEA AI branding, settings panel.
   Everything is scoped to .ov-* / .pub-ov-* so the 12 older designs are untouched.
   ═══════════════════════════════════════════════════════════════════════ */
.ov-banner-slot:empty, .ov-banner-slot-bottom:empty, .ov-brand-slot:empty { display: none; }

/* Main background = its own layer. object-fit:cover = crop to fit, never stretch. */
.ov-bg-slot { overflow: hidden; }
.ov-bg-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.ov-bg-dim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; }

/* Event label (brush + 2-part text). Row decides the left / right / centre position. */
.ov-label-row { padding: 6px 30px; line-height: 0; }
.ov-label-row-top-left, .ov-label-row-bottom-left { text-align: left; }
.ov-label-row-top-right, .ov-label-row-bottom-right { text-align: right; }
.ov-label-row-bottom-center { text-align: center; }
.ov-label { position: relative; display: inline-block; padding: 0 78px; height: 86px; line-height: 86px; white-space: nowrap;
            font-family: 'Bebas Neue', 'Oswald', sans-serif; font-size: 44px; letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.ov-label-brush { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.ov-label-text { position: relative; z-index: 1; text-shadow: 0 2px 0 rgba(0,0,0,.28); }
.ov-label-t1, .ov-label-t2 { display: inline; }
.ov-label-gap { display: inline-block; width: .32em; }
/* "Match Headline" = same font as the main title of the chosen style / font preset */
.pub-tpl-overall-style-a .ov-label-match { font-family: 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 700; font-size: 42px; }
.pub-tpl-overall-style-a.pub-font-2 .ov-label-match { font-family: 'Anton', sans-serif; font-style: normal; font-weight: 400; font-size: 38px; }
.pub-tpl-overall-style-a.pub-font-3 .ov-label-match { font-family: 'Teko', sans-serif; font-style: normal; font-weight: 700; font-size: 50px; }
.pub-tpl-overall-style-b .ov-label-match { font-family: 'Bebas Neue', sans-serif; font-weight: 400; }
.pub-tpl-overall-style-b.pub-font-2 .ov-label-match { font-family: 'Anton', sans-serif; font-size: 38px; }
.pub-tpl-overall-style-b.pub-font-3 .ov-label-match { font-family: 'Teko', sans-serif; font-weight: 700; font-size: 50px; }

/* Extra headline lines */
.ov-organizer { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 22px; line-height: 28px; letter-spacing: .14em; text-transform: uppercase; margin: 4px 0; }
.pub-tpl-overall-style-a .ov-organizer { color: var(--o-accent2); }
.pub-tpl-overall-style-b .ov-organizer { color: var(--o-small); padding: 0 130px; }
.ov-title-sub { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-style: italic; font-size: 36px; line-height: 44px; letter-spacing: .08em; text-transform: uppercase; color: var(--o-titlet); margin: 4px 0 0; }
.pub-tpl-overall-style-a.pub-font-2 .ov-title-sub { font-family: 'Anton', sans-serif; font-style: normal; font-weight: 400; }
.pub-tpl-overall-style-a.pub-font-3 .ov-title-sub { font-family: 'Teko', sans-serif; font-style: normal; font-weight: 700; font-size: 44px; }

/* TEA AI branding (small + elegant, centred under everything) */
.ov-brand-slot { padding-top: 2px; }
.ov-brand { text-align: center; margin-top: 10px; }
.ov-brand-name { font-family: 'Bebas Neue', 'Oswald', sans-serif; font-size: 22px; line-height: 24px; letter-spacing: .34em; padding-left: .34em; color: var(--o-foott); }
.ov-brand-wa { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: .16em; color: var(--o-foott); opacity: .85; }

/* Settings panel (Publish page, shown only for STYLE A / STYLE B) */
.pub-ov-section { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,.08); }
.pub-ov-section > .form-label { margin-bottom: var(--space-2); }
.pub-ov-el { padding: var(--space-2); margin-bottom: var(--space-2); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }
.pub-ov-el-head { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 600; margin-bottom: 6px; }
.pub-ov-el-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pub-ov-el-row select.form-input { flex: 1 1 140px; min-width: 0; }
.pub-ov-el-row label { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); flex: 1 1 140px; }
.pub-ov-el-row input[type=range] { flex: 1; min-width: 60px; }
.pub-ov-combos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pub-ov-combo { position: relative; border: 2px solid transparent; border-radius: 10px; padding: 0; overflow: hidden; background: #1f2937; cursor: pointer; text-align: center; }
.pub-ov-combo.pub-ov-active { border-color: #fff; }
.pub-ov-combo-prev { display: block; padding: 10px 6px; font-family: 'Bebas Neue', 'Oswald', sans-serif; font-size: 20px; letter-spacing: .04em; line-height: 24px; }
.pub-ov-combo-name { display: block; padding: 3px 4px; font-size: 10px; color: #cbd5e1; background: rgba(0,0,0,.35); }
.pub-ov-pos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.pub-ov-colors { display: flex; gap: 14px; flex-wrap: wrap; }
.pub-ov-colors label { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-secondary); }
.pub-ov-wa-note { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 3 — brush Event Label on the 12 older designs, highlighter colour,
   Champion / BANNED rows for STYLE A / STYLE B.  (append-only block)
   ═══════════════════════════════════════════════════════════════════════ */

/* floating brush label (older designs) - absolute layer, never moves the table */
.pub-ev-host { position: relative; }
.pub-ev { position: absolute; z-index: 6; line-height: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.pub-ev.pub-ev-dragging { cursor: grabbing; outline: 2px dashed rgba(255,255,255,.7); outline-offset: 4px; }
.pub-ev-top-left      { top: 12px;    left: 16px; }
.pub-ev-top-right     { top: 12px;    right: 16px; }
.pub-ev-bottom-left   { bottom: 12px; left: 16px; }
.pub-ev-bottom-right  { bottom: 12px; right: 16px; }
.pub-ev-bottom-center { bottom: 12px; left: 50%; }
.pub-ev .ov-label-row { padding: 0; }
.pub-ev .ov-label-match { font-family: var(--font-display), 'Bebas Neue', sans-serif; font-weight: 700; font-size: 42px; }
.pub-ev-hidelogo .pub-banner-org-logo { visibility: hidden; }

/* highlighter colour (older designs): champion row ring / glow + #1 row tint */
.pub-hl-on .pub-row-team.pub-row-champion {
    box-shadow: 0 0 0 2px var(--hl-color), 0 0 22px 4px var(--hl-glow), inset 0 0 26px var(--hl-inset) !important;
}
/* v62 FIX: the old "#1 row tint" rule REPLACED the row background (shorthand + !important, same specificity as the design's own
   row rule and loaded later), so the first row of almost every older design turned see-through and the banner picture showed
   through. Removed: the first row keeps the design's own background again, exactly like before the highlighter was added.
   (The highlighter colour still drives the Champion row ring / glow above.) */

/* STYLE A / B: champion + banned rows (same logic as the older designs) */
.ov-row-team { position: relative; }
.pub-tpl-overall-style-a { --o-ring: var(--o-accent); --o-glow: rgba(246,168,0,.62); }
.pub-tpl-overall-style-a.pub-var-2 { --o-glow: rgba(229,36,43,.62); }
.pub-tpl-overall-style-a.pub-var-3 { --o-glow: rgba(31,182,224,.62); }
.pub-tpl-overall-style-b { --o-ring: var(--o-totalhead); --o-glow: rgba(134,182,255,.62); }
.pub-tpl-overall-style-b.pub-var-2 { --o-glow: rgba(255,154,160,.62); }
.pub-tpl-overall-style-b.pub-var-3 { --o-glow: rgba(142,240,189,.62); }
.ov-row-team.ov-row-champ { box-shadow: 0 0 0 3px var(--hl-color, var(--o-ring)), 0 0 22px 4px var(--hl-glow, var(--o-glow)); z-index: 1; }
.ov-champ-watermark {
    position: absolute; left: 0; right: 0; bottom: 0; text-align: center; z-index: 2; pointer-events: none;
    font-family: 'Barlow Condensed', 'Oswald', sans-serif; font-weight: 800; font-size: 17px; line-height: 17px;
    letter-spacing: .65em; text-indent: .65em; white-space: nowrap; overflow: hidden;
    color: var(--champ-color, #ffffff); opacity: var(--champ-opacity, .2);
}
.ov-row-team.ov-row-banned {
    filter: none;
    background: var(--ban-bg, rgba(214,31,44,.9));
    box-shadow: 0 0 0 2px var(--ban-color, #d61f2c), 0 0 16px 2px var(--ban-glow, rgba(214,31,44,.75));
}
.ov-row-team.ov-row-banned .ov-c { background: transparent !important; color: #ffffff !important; position: relative; z-index: 1; }
.ov-ban-watermark {
    position: absolute; left: 10px; right: 10px; top: 0; height: 100%; z-index: 0; pointer-events: none;
    display: flex; align-items: center; justify-content: space-between; white-space: nowrap; overflow: hidden;
    font-family: 'Barlow Condensed', 'Oswald', sans-serif; font-weight: 800; font-size: 20px; line-height: 1; letter-spacing: .3em;
    color: var(--ban-text, #ffffff); opacity: var(--ban-opacity, .25);
}

/* panels (Publish page) */
.pub-hl-presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pub-hl-dot { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.pub-hl-dot.pub-ov-active { border-color: #fff; }
.pub-hl-auto { font-size: var(--text-xs); }

/* boxed designs: highlight only, no CHAMPION / BANNED words */
.pub-nomark .pub-champ-watermark, .pub-nomark .pub-ban-watermark { display: none; }

/* v53: penalty (minus) chips + add-team form */
.pub-adj-active { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-3); }
.pub-adj-chip {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2);
    padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border-subtle, rgba(255,255,255,.1));
}
.pub-adj-chip.is-banned { border-color: rgba(214,31,44,.7); background: rgba(214,31,44,.12); }
.pub-adj-tag { font-size: var(--text-sm); color: #ff7a82; white-space: nowrap; }
.pub-adj-x {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(214,31,44,.7);
    background: transparent; color: #ff5a64; font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
}
.pub-adj-x:active { background: #d61f2c; color: #fff; }
.pub-adj-form {
    display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-3);
    padding: var(--space-3); border-radius: 10px; border: 1px solid var(--border-subtle, rgba(255,255,255,.1));
}
.pub-adj-form.hidden { display: none; }
.pub-adj-flabel { font-size: var(--text-xs); color: var(--text-secondary); }
.pub-adj-fbtns { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: 4px; }

/* v55: staged penalty editing */
.pub-adj-chip.is-pending { border-style: dashed; border-color: #f0b429; }
.pub-adj-chip em { font-style: normal; font-size: var(--text-xs); color: #f0b429; }
.pub-adj-savebar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);
    padding: 8px 10px; border-radius: 8px; border: 1px solid #f0b429; background: rgba(240,180,41,.1);
    font-size: var(--text-xs);
}
.pub-adj-savebar span { flex: 1 1 100%; }
.pub-adj-savebar.hidden { display: none; }


/* v56: TEA AI + WhatsApp branding on the 12 older designs (replaces the old "Powered By" line) */
.pub-banner-footer-teabrand .ov-brand { text-align: center; margin-top: 6px; }
.pub-banner-footer-teabrand .ov-brand-name { font-family: 'Bebas Neue', 'Oswald', sans-serif; font-size: 22px; line-height: 24px; letter-spacing: .34em; padding-left: .34em; color: inherit; opacity: .95; }
.pub-banner-footer-teabrand .ov-brand-wa { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: .16em; color: inherit; opacity: .8; }

/* v56: org name is now the big headline on Style B too (no small org line above it) */
.pub-tpl-overall-style-b .ov-head .ov-title-big { margin-top: 24px; }

/* v56: Champion Rush fire / trophy on Style A / B */
.ov-rush-icon { display: inline-block; vertical-align: middle; object-fit: contain; margin-left: 8px; position: relative; top: -1px; }
.pub-tpl-overall-style-a .ov-rush-icon { width: 20px; height: 26px; }
.pub-tpl-overall-style-a .ov-rush-trophy { width: 26px; height: 26px; }
.pub-tpl-overall-style-b .ov-rush-icon { width: 28px; height: 36px; }
.pub-tpl-overall-style-b .ov-rush-trophy { width: 36px; height: 36px; }

/* v56: label sits Bottom Center (above the branding) -> branding moves to the bottom-left corner. Other spots: branding stays below, centred. */
.ov-brand-left .ov-brand, .ov-brand-left.pub-banner-footer-teabrand .ov-brand { text-align: left; padding-left: 26px; }
.ov-brand-left .ov-brand-name { padding-left: 0; }


/* ═══════════════ v57 — Style A / B polish: sizes like the HIS ESP reference, logo fill, bigger header text,
   footer lines, smaller org name, brand always on, new brush label typography ═══════════════ */
.pub-tpl-overall-style-a .ov-title-big { font-size: 100px; line-height: 100px; padding: 0 30px; margin-top: 6px; }
.pub-tpl-overall-style-a .ov-date { margin: 2px 0 -10px; }
/* OVERALL STANDINGS: same size as on the older designs (Anton 30px) */
.ov-standings { font-family: 'Anton', 'Bebas Neue', sans-serif; font-weight: 400; font-size: 30px; line-height: 36px; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.pub-tpl-overall-style-a .ov-standings { color: #fff; text-shadow: 0 3px 10px rgba(0,0,0,.55); }
.pub-tpl-overall-style-b .ov-standings { color: var(--o-small); margin-top: 10px; }
.pub-tpl-overall-style-b .ov-title-big { font-size: 104px; line-height: 104px; }
.pub-tpl-overall-style-b.pub-font-3 .ov-title-big { font-size: 118px; }

/* header: taller + bolder (reference header text is ~25% bigger than before) */
.pub-tpl-overall-style-a .ov-row-head { height: 40px; margin-bottom: 18px; }
.pub-tpl-overall-style-a .ov-row-head .ov-c { height: 40px; }
.pub-tpl-overall-style-a .ov-row-head .ov-c > span { line-height: 40px; font-weight: 800; font-size: 24px; letter-spacing: .05em; }
.pub-tpl-overall-style-b .ov-row-head .ov-c { height: 34px; }
.pub-tpl-overall-style-b .ov-row-head .ov-c > span { line-height: 34px; font-weight: 800; font-size: 20px; letter-spacing: .06em; }
/* rows: 38px + 6px gap = same 44px pitch as the reference */
.pub-tpl-overall-style-a .ov-row-team { height: 38px; margin-bottom: 6px; }
.pub-tpl-overall-style-a .ov-row-team .ov-c { height: 38px; }
.pub-tpl-overall-style-a .ov-row-team .ov-c > span { line-height: 38px; font-weight: 700; font-size: 22px; }
.pub-tpl-overall-style-a .ov-row-team .ov-c2 > span { font-size: 22px; }

/* team logo = fills the whole logo box (same picture, zoomed + blurred behind, sharp logo on top) */
.ov-row-team .ov-c1 > span { position: relative; display: block; overflow: hidden; padding: 0 !important; line-height: 0 !important; }
.ov-logo-bg { position: absolute; inset: -8px; background-size: cover; background-position: center; filter: blur(7px) brightness(.62); }
.ov-row-team .ov-c1 .ov-team-logo { position: relative; z-index: 1; margin: 0 auto; object-fit: cover; }
.pub-tpl-overall-style-a .ov-row-team .ov-c1 .ov-team-logo { width: 38px; height: 38px; }
.pub-tpl-overall-style-b .ov-row-team .ov-c1 .ov-team-logo { width: 52px; height: 51px; }

/* footer text with accent lines either side (like "— HIS ESP ORG —" in the reference) */
.pub-tpl-overall-style-a .ov-foot { display: flex; align-items: center; justify-content: center; gap: 18px; font-weight: 700; font-size: 24px; color: #fff; }
.pub-tpl-overall-style-a .ov-foot::before, .pub-tpl-overall-style-a .ov-foot::after { content: ''; display: block; width: 110px; height: 4px; background: var(--o-accent); }
.pub-tpl-overall-style-b .ov-foot { display: flex; align-items: center; justify-content: center; gap: 18px; font-weight: 700; }
.pub-tpl-overall-style-b .ov-foot::before, .pub-tpl-overall-style-b .ov-foot::after { content: ''; display: block; width: 110px; height: 4px; background: var(--o-totalhead); }

/* design buttons: long names wrap inside the button instead of spilling out */
.pub-tpl-swatch[data-tpl^="overall-style"] { grid-column: 1 / -1; height: auto; min-height: 48px; padding: 8px 12px; white-space: normal; line-height: 1.25; font-size: 12px; }

/* brand: a little bigger and clearer */
.ov-brand-name { font-size: 24px; line-height: 26px; }
.ov-brand-wa { font-size: 15px; line-height: 18px; font-weight: 700; opacity: .95; }

/* ───── Event label typography (reference: heavy italic, tilted, dark depth under the letters) ───── */
.ov-label { height: 96px; line-height: 96px; padding: 0 84px; font-size: 52px; letter-spacing: .015em; }
.ov-label-text { text-shadow: 0 3px 0 rgba(0,0,0,.38), 0 0 10px rgba(0,0,0,.35); -webkit-text-stroke: 1px rgba(0,0,0,.22); }
.ov-label-skew { display: inline-block; transform: skewX(-9deg); }
.pub-tpl-overall-style-a .ov-label-match, .pub-tpl-overall-style-b .ov-label-match { font-family: 'Kanit', 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 900; font-size: 46px; }
.pub-ev .ov-label-match { font-family: 'Kanit', 'Barlow Condensed', sans-serif; font-style: italic; font-weight: 900; font-size: 46px; }
.ov-label-two { height: 196px; line-height: 1; padding: 0 70px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; }
.ov-label-two .ov-label-text { display: flex; flex-direction: column; align-items: center; }
.ov-label-two .ov-label-t1 { font-size: 1.35em; line-height: 1; }
.ov-label-two .ov-label-t2 { font-size: .78em; line-height: 1.1; margin-top: 6px; }
.ov-label-two.ov-label-match .ov-label-text, .ov-label-two .ov-label-text.ov-label-skew { display: flex; }
.ov-brand-left .ov-brand { text-align: left; }

/* v59: two-line label has a taller brush so the streaks stay outside the text */
.ov-label-two .ov-label-t2 { margin-top: 4px; }

/* v59: Style B header words (PLACE / KILLS / TOTAL) must not touch the cell edge */
.pub-tpl-overall-style-b .ov-row-head .ov-c > span { font-size: 17px; letter-spacing: .03em; }

/* ═══ v60: Publish / Manage MVP — the PREVIEW stays fixed on the right, only the settings (left) scroll ═══
   Each column is its own scroll area that fits the screen height, so while you scroll down to ban a squad or
   add minus points the preview never leaves the screen. (Side-by-side layout only; the narrow phone layout
   keeps preview-first, settings-below.) */
@media (min-width: 769px) {
    .pub-layout { align-items: start; }
    .pub-layout > .card {
        position: sticky;
        top: calc(var(--header-height, 64px) + 12px);
        max-height: calc(100vh - var(--header-height, 64px) - 24px);
        max-height: calc(100dvh - var(--header-height, 64px) - 24px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .pub-layout > .card::-webkit-scrollbar { width: 8px; }
    .pub-layout > .card::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 8px; }
}

/* v61: gaps between the rows are TRANSPARENT (the background art shows through, like the reference) */
.pub-tpl-overall-style-a .ov-table { background: transparent; box-shadow: none; }
.pub-tpl-overall-style-b .ov-table { background: transparent; box-shadow: none; }


/* ═══ v63: STYLE A / B brush label = FLOATING layer (never changes the banner height -> background no longer zooms) ═══ */
.ov-root > .ov-float-slot { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 6; pointer-events: none; }
.ov-float-slot:empty { display: none; }
.ov-float { position: absolute; line-height: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; pointer-events: auto; transform-origin: center center; }
.ov-float.ov-float-dragging { cursor: grabbing; outline: 2px dashed rgba(255,255,255,.7); outline-offset: 4px; }
.ov-float-top-left      { top: 12px;    left: 30px; }
.ov-float-top-right     { top: 12px;    right: 30px; }
.ov-float-bottom-left   { bottom: 12px; left: 30px; }
.ov-float-bottom-right  { bottom: 12px; right: 30px; }
.ov-float-bottom-center { bottom: 12px; left: 50%; }
.ov-float .ov-label-row { padding: 0; }


/* v64: Style B - the title sits right under the centred logo */
.pub-tpl-overall-style-b .ov-org-logo + .ov-title-big { margin-top: 14px; }

/* ═══ v64: GXF Red - mixed colour blocks instead of one flat colour ═══
   rank + Kill Pts = main colour, team = white pill, match columns alternate main / light,
   Booyah + Pos Pts = accent colour, Total = white.  Three combos, each with its own mix. */
.pub-tpl-gxf-red, .pub-tpl-gxf-red.pub-var-1 {
    --k-b: linear-gradient(180deg,#ffffff,#ececee); --k-bt: #a30f0f;
    --k-c: linear-gradient(180deg,#ffffff,#ececee); --k-ct: #a30f0f;   /* v70: Booyah + Pos Pts yellow -> white */
    --k-t: linear-gradient(180deg,#ffffff,#f1f1f3); --k-tt: #c40d0d;
}
.pub-tpl-gxf-red.pub-var-2 {
    --k-b: linear-gradient(180deg,#facc15,#d9a806); --k-bt: #1a1400;
    --k-c: linear-gradient(180deg,#facc15,#d9a806); --k-ct: #1a1400;   /* v69: Black Gold Booyah + Pos Pts = same gold as the match columns */
    --k-t: linear-gradient(180deg,#ffffff,#f1f1f3); --k-tt: #18181c;   /* v69: Total = white */
}
.pub-tpl-gxf-red.pub-var-3 {
    --k-b: linear-gradient(180deg,#ffffff,#e8eefc); --k-bt: #123a9c;
    --k-c: linear-gradient(180deg,#ffffff,#e8eefc); --k-ct: #123a9c;   /* v70: Booyah + Pos Pts yellow -> white */
    --k-t: linear-gradient(180deg,#ffffff,#eef3ff); --k-tt: #123a9c;
}
/* v71: Red White + Blue White - ONE alternating line from M1 to Total: red, white, red, white ...
   (rank = red, team = white pill, then every 2nd cell is white). So the last cell (Total) is white when the number of
   matches is even and red/blue when it is odd. Booyah / Kill / Pos just continue the line. */
.pub-tpl-gxf-red:not(.pub-var-2) .pub-row-team .pub-cell:nth-of-type(n+4):nth-of-type(even) { background: var(--k-b); color: var(--k-bt); }
.pub-tpl-gxf-red:not(.pub-var-2) .pub-row-team .pub-cell:last-of-type:nth-of-type(even) { color: var(--k-bt) !important; }
.pub-tpl-gxf-red:not(.pub-var-2) .pub-row-team .pub-cell:last-of-type:nth-of-type(odd) { color: var(--k-cellt) !important; }
/* Black Gold: dark / gold match columns, Booyah + Pos Pts gold, Total always white (team name = white pill) */
.pub-tpl-gxf-red.pub-var-2 .pub-row-team .pub-cell:nth-of-type(n+4):nth-of-type(even):nth-last-of-type(n+5) { background: var(--k-b); color: var(--k-bt); }
.pub-tpl-gxf-red.pub-var-2 .pub-row-team .pub-cell:nth-last-of-type(4),
.pub-tpl-gxf-red.pub-var-2 .pub-row-team .pub-cell:nth-last-of-type(2) { background: var(--k-c); color: var(--k-ct); }
.pub-tpl-gxf-red.pub-var-2 .pub-row-team .pub-cell:last-of-type { background: var(--k-t); color: var(--k-tt) !important; }

/* ═══ v67: Ice Blue - mixed colour blocks (same idea as GXF Red) ═══
   rank + Kill Pts = the design's light colour (unchanged), team = white pill, match columns alternate light / white,
   Booyah + Pos Pts = vivid accent, Total = deep colour with white text. Each of the 3 combos has its own mix. */
.pub-tpl-ice-blue, .pub-tpl-ice-blue.pub-var-1 {
    --i-b: linear-gradient(180deg,#ffffff,#eaf3fb); --i-bt: #1d4b7a;
    --i-c: linear-gradient(180deg,#4cc3fb,#1aa3ee); --i-ct: #05223d;
    --i-t: linear-gradient(180deg,#1d5b99,#0e3560); --i-tt: #ffffff;
}
.pub-tpl-ice-blue.pub-var-2 {
    --i-b: linear-gradient(180deg,#fff7fb,#ffe3f1); --i-bt: #6b0f3a;
    --i-c: linear-gradient(180deg,#f685bd,#ec4899); --i-ct: #3f0723;
    --i-t: linear-gradient(180deg,#b81f5c,#8a1146); --i-tt: #ffffff;
}
.pub-tpl-ice-blue.pub-var-3 {
    --i-b: linear-gradient(180deg,#f7fffa,#e0f9ea); --i-bt: #14532d;
    --i-c: linear-gradient(180deg,#5eea96,#22c55e); --i-ct: #052e16;
    --i-t: linear-gradient(180deg,#178a4c,#0b5a30); --i-tt: #ffffff;
}
.pub-tpl-ice-blue .pub-row-team .pub-cell:nth-of-type(n+4):nth-of-type(even):nth-last-of-type(n+5) { background: var(--i-b); color: var(--i-bt); }
.pub-tpl-ice-blue .pub-row-team .pub-cell:nth-last-of-type(4),
.pub-tpl-ice-blue .pub-row-team .pub-cell:nth-last-of-type(2) { background: var(--i-c); color: var(--i-ct); }
.pub-tpl-ice-blue .pub-row-team .pub-cell:last-of-type:nth-of-type(n) { background: var(--i-t); color: var(--i-tt) !important; }

/* ═══ v70/v71: GXF Red - Champion Rush champion row ═══
   Red White + Blue White: every WHITE block of the champion row (team name, white match cells, and Booyah / Kill / Pos / Total
   wherever the alternating line makes them white) turns yellow. Red / blue blocks stay.
   Black Gold: only the team name + Total turn gold. Done by re-defining the colour variables on the champion row itself. */
.pub-tpl-gxf-red:not(.pub-var-2) .pub-row-champion {
    --k-pill: linear-gradient(180deg,#fff44f,#e8c800); --k-pillt: #2a2000;
    --k-b: linear-gradient(180deg,#fff44f,#e8c800); --k-bt: #2a2000;
}
.pub-tpl-gxf-red.pub-var-2 .pub-row-champion {
    --k-pill: linear-gradient(180deg,#ffd84a,#e0a800); --k-pillt: #1a1400;
    --k-t: linear-gradient(180deg,#ffd84a,#e0a800); --k-tt: #1a1400;
}

/* ═══ v71: BANNED row on Ice Blue + GXF Red ═══
   The red warning row was hidden behind the white/blue cell blocks and the white text was unreadable.
   Now the cells go see-through inside a banned row, so the red row + the repeating BANNED text show (same as the other designs). */
.pub-tpl-gxf-red .pub-row-team.pub-row-banned .pub-cell,
.pub-tpl-ice-blue .pub-row-team.pub-row-banned .pub-cell {
    background: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.35);
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* ═══ v71: CHAMPION tag (Ice Blue, GXF Red, Style A, Style B) ═══
   These 4 designs are made of solid cell blocks, so the faint C H A M P I O N watermark was hidden / cut by the cells.
   Instead a small tag sits on the top edge of the champion's row (half in the gap above it, half on the row), in the
   highlighter colour (gold by default). It never covers a number, and the table does not move. */
.pub-champ-tag, .ov-champ-tag {
    position: absolute; top: -9px; right: 16px; z-index: 6;
    height: 18px; padding: 0 11px; border-radius: 9px;
    background: var(--hl-color, #ffd640); color: var(--hl-text, #2a2000);
    font-family: 'Barlow Condensed', var(--font-display), sans-serif; font-weight: 800; font-size: 13px; line-height: 18px;
    letter-spacing: .22em; text-indent: .22em; white-space: nowrap; pointer-events: none;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,.85), 0 3px 8px rgba(0,0,0,.45);
}
.pub-nomark .pub-champ-tag { display: none; }
/* v71: tag height tuned per design so it never touches a number */
.pub-tpl-overall-style-a .ov-champ-tag { top: -11px; }
.pub-tpl-overall-style-b .ov-champ-tag { top: -13px; }