@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
    --ink: #0A0A0C;            /* near-black: footer bg, tape/team-card panels, nav */
    --surface: #FFFFFF;        /* card/table/input surfaces, header bg */
    --page-bg: #EDEDED;        /* light grey main content background */
    --text: #131313;           /* primary body text on light surfaces */
    --marquee-red: #0D7EFF;    /* link + accent color, site-wide (kept this variable
                                   name to avoid touching every file that references
                                   it — it's now the brand's blue, not red) */
    --steel: #7C838C;          /* photo placeholder gray */
    --concrete: #5A5F66;       /* muted secondary text / captions */
    --paper-dim: #C7CBD1;      /* borders and dividers on light surfaces */
    --display: 'Anton', 'Arial Narrow', sans-serif;
    --body: 'Inter', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

html { overflow-x: hidden; }

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: var(--body);
    line-height: 1.5;
    overflow-x: hidden;
}

a { color: var(--marquee-red); }

/* Quill wraps every line in its own <p>. Every paragraph gets a
   comfortable default gap (matching how it already looks while writing
   in the editor) — short punchy one-line "beats" still get real
   breathing room between them. Pressing Enter twice leaves a genuinely
   empty paragraph in between, which reads as an intentional bigger
   pause and gets extra space on top of the default. */
p { margin: 0 0 0.7em; }
p:last-child { margin-bottom: 0; }
p:empty,
p:has(> br:only-child) { margin: 1.4em 0; }

img { max-width: 100%; display: block; }

:focus-visible {
    outline: 2px solid var(--marquee-red);
    outline-offset: 2px;
}

.wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---- Header ---- */
.marquee {
    background: var(--ink);
    color: #fff;
    border-bottom: 3px solid var(--marquee-red);
}
.marquee .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}
.marquee .brand {
    font-family: var(--display);
    font-size: 2.2rem;
    letter-spacing: 1px;
    color: #fff;
    text-decoration: none;
}
.marquee .brand span { color: var(--marquee-red); }
.site-logo { height: 72px; display: block; }
.marquee nav {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.marquee nav a {
    text-decoration: none;
    color: #fff;
    font-family: var(--display);
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    padding-bottom: 4px;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.marquee nav a:hover, .marquee nav a.active {
    color: var(--marquee-red);
    border-bottom-color: var(--marquee-red);
}

/* ---- iCONs dropdown ---- */
.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.nav-dropdown .dropdown-trigger {
    text-decoration: none;
    color: var(--marquee-red);
    font-family: var(--display);
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-bottom: 2px solid transparent;
    padding-bottom: 4px;
    display: inline-block;
}
.nav-dropdown:hover .dropdown-trigger,
.nav-dropdown.open .dropdown-trigger {
    border-bottom-color: var(--marquee-red);
}
.nav-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0;
    background: var(--surface);
    border: 1px solid var(--paper-dim);
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    min-width: 170px;
    z-index: 20;
    padding: 6px 0;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.open .dropdown-menu {
    display: block;
}
.nav-dropdown .dropdown-menu a {
    display: block;
    padding: 9px 16px;
    color: var(--marquee-red);
    font-family: var(--display);
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: none;
}
.nav-dropdown .dropdown-menu a:hover {
    background: rgba(13,126,255,0.08);
}

/* ---- Account topbar (above the main header) ---- */
.topbar {
    background: var(--ink);
    border-bottom: 1px solid var(--paper-dim);
}
.topbar .wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: #cfcac5;
}
.topbar a {
    color: var(--marquee-red);
    text-decoration: none;
}
.topbar a:hover { color: #fff; }

main { min-height: 60vh; padding: 36px 0 60px; }

h1, h2, h3 {
    font-family: var(--display);
    letter-spacing: 0.5px;
    margin: 0 0 14px;
    color: var(--text);
}
h1 { font-size: 2.6rem; }
h2 { font-size: 1.9rem; }
h3 { font-size: 1.3rem; }

.eyebrow {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--marquee-red);
    display: block;
    margin-bottom: 6px;
}

.btn {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 18px;
    background: var(--marquee-red);
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 2px;
    transition: filter 0.15s ease;
}
.btn:hover { filter: brightness(0.85); }
.btn.gold { background: #fff; color: var(--marquee-red); border: 2px solid var(--marquee-red); }
.btn.gold:hover { background: var(--marquee-red); color: #fff; }
.btn.outline { background: transparent; color: var(--text); border: 2px solid var(--paper-dim); }
.btn.outline:hover { border-color: var(--marquee-red); color: var(--marquee-red); }

/* ---- Cards ---- */
.card {
    background: var(--surface);
    border: 1px solid var(--paper-dim);
    border-radius: 3px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.grid { display: grid; gap: 20px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid.cols-2.wrestler-layout { grid-template-columns: 280px 1fr; }
.hof-card-layout { grid-template-columns: 140px 1fr; }

/* ---- Tale of the tape (wrestler card / profile stat block) ---- */
.tape {
    background: var(--ink);
    color: #fff;
    border-radius: 3px;
    overflow: hidden;
}
.tape .tape-photo {
    aspect-ratio: 3/4;
    background: var(--steel) center/cover no-repeat;
    display: flex;
    align-items: flex-end;
}
.tape .tape-photo .name-plate {
    background: rgba(17,17,17,0.85);
    width: 100%;
    padding: 10px 12px;
}
.tape .name-plate .ring-name {
    font-family: var(--display);
    font-size: 1.4rem;
    color: #fff;
    line-height: 1;
}
.tape .name-plate .align-tag {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #cfcac5;
}
.tape-stats {
    padding: 12px;
    font-family: var(--mono);
    font-size: 0.78rem;
}
.tape-stats div {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.tape-stats div:last-child { border-bottom: none; }
.tape-stats .label { color: #b8b3ad; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.68rem; flex-shrink: 0; }
.tape-stats .value { color: #fff; font-weight: 600; min-width: 0; overflow-wrap: break-word; word-break: break-word; }

/* ---- Show / results ---- */
.show-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid var(--marquee-red);
    background: var(--surface);
    border-top: 1px solid var(--paper-dim);
    border-right: 1px solid var(--paper-dim);
    border-bottom: 1px solid var(--paper-dim);
    padding: 16px 20px;
    margin-bottom: 14px;
    text-decoration: none;
    color: var(--text);
}
.show-card .date {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--concrete);
    text-transform: uppercase;
}
.show-card .show-name {
    font-family: var(--display);
    font-size: 1.6rem;
    margin: 2px 0 0;
    color: var(--text);
}
.show-card .status {
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 4px 10px;
    background: var(--paper-dim);
    color: #fff;
    border-radius: 2px;
}
.show-card .status.completed { background: var(--marquee-red); color: #fff; }
.show-card .show-type {
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--marquee-red);
}
.show-card .show-type.premium {
    color: #fff;
    background: var(--marquee-red);
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 2px;
    display: inline-block;
}

.card-bout {
    border-bottom: 1px solid var(--paper-dim);
    padding: 16px 0;
}
.card-bout:last-child { border-bottom: none; }
.card-bout .order {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--marquee-red);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.card-bout .type { font-family: var(--mono); font-size: 0.78rem; color: var(--concrete); }
.card-bout .combatants {
    font-family: var(--display);
    font-size: 1.6rem;
    letter-spacing: 0.5px;
    margin: 4px 0;
    color: var(--text);
}
.card-bout .combatants .vs { color: var(--marquee-red); font-size: 1rem; margin: 0 8px; }
.card-bout .winner-tag {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: #fff;
    background: var(--ink);
    display: inline-block;
    padding: 2px 8px;
    border-radius: 2px;
    margin-top: 4px;
}

/* ---- Standings table ---- */
table.standings {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: 0.85rem;
    background: var(--surface);
}
table.standings th, table.standings td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--paper-dim);
    color: var(--text);
}
table.standings th {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    color: var(--concrete);
}
table.standings tr:hover { background: rgba(13,126,255,0.06); }

/* ---- Forms ---- */
.stack { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.stack.stack-wide { max-width: none; }
form label {
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--concrete);
    display: block;
    margin-bottom: 4px;
}
form input, form select, form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--paper-dim);
    background: var(--surface);
    color: var(--text);
    font-family: var(--body);
    font-size: 0.95rem;
    border-radius: 2px;
}
form input:focus, form select:focus, form textarea:focus {
    border-color: var(--marquee-red);
    outline: none;
}
form textarea { min-height: 140px; resize: vertical; }
select {
    font-family: var(--display);
    font-size: 1.15rem;
    letter-spacing: 0.5px;
}

/* ---- Move list checklist (wrestler style/moveset picker) ---- */
.move-category-label {
    font-family: var(--display);
    font-size: 1.05rem;
    color: var(--marquee-red);
    letter-spacing: 0.5px;
    cursor: pointer;
    padding: 8px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.move-category-picked {
    font-family: var(--mono);
    font-size: 0.7rem;
    color: var(--concrete);
    text-transform: none;
    letter-spacing: normal;
}
.move-category-block {
    border-bottom: 1px solid var(--paper-dim);
}
.move-category-block:last-child { border-bottom: none; }
.move-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 6px 14px;
    background: var(--surface);
    padding: 4px 4px 14px;
}
.move-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--body);
    font-size: 0.85rem;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text);
    cursor: pointer;
}
.move-checkbox input[type="checkbox"] {
    width: auto;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    accent-color: var(--marquee-red);
}
.move-checkbox input:disabled ~ span { color: var(--concrete); }

/* ---- Moveset picker: breaks out of a narrow surrounding form to use the full page width ---- */
.moveset-picker-full {
    width: 100%;
    max-width: none;
    border: 1px solid var(--paper-dim);
    border-radius: 2px;
    max-height: 600px;
    overflow-y: auto;
    padding: 4px 10px;
}
.moveset-picker-full > label {
    display: block;
    position: sticky;
    top: 0;
    background: var(--surface);
    padding: 8px 0;
    z-index: 2;
}

/* ---- Match result combatant card (horizontal, thumbnail + stacked stats) ---- */
.combatant-card {
    display: flex;
    align-items: stretch;
    width: 320px;
    max-width: 100%;
    background: var(--ink);
    color: #fff;
    border-radius: 3px;
    overflow: hidden;
    text-align: left;
}

/* ---- Latest Promo mic flair (homepage) ---- */
.latest-promo-wrap { position: relative; display: flex; }
.latest-promo-card {
    flex: 1;
    position: relative;
    background: var(--ink);
    color: #fff;
    border-radius: 3px;
    overflow: hidden;
    display: flex;
    min-height: 160px;
}
.latest-promo-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    opacity: 0.35;
    z-index: 0;
}
.latest-promo-content {
    position: relative;
    z-index: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.btn.outline.latest-promo-btn {
    margin-top: auto;
    align-self: flex-start;
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}
.btn.outline.latest-promo-btn:hover { border-color: var(--marquee-red); color: var(--marquee-red); }
.mic-flair {
    position: absolute;
    bottom: -30px;
    right: -22px;
    width: 130px;
    height: auto;
    transform: rotate(8deg);
    filter: drop-shadow(2px 5px 8px rgba(0,0,0,0.45));
    pointer-events: none;
    animation: mic-float 3.4s ease-in-out infinite;
    z-index: 2;
}
@keyframes mic-float {
    0%, 100% { transform: rotate(8deg) translateY(0); }
    50% { transform: rotate(11deg) translateY(-7px); }
}
@media (max-width: 480px) {
    .mic-flair { width: 92px; bottom: -20px; right: -14px; }
}

/* ---- Upcoming/Latest Show TV flair (homepage) ---- */
.tv-flair {
    position: absolute;
    bottom: -18px;
    width: 175px;
    height: auto;
    filter: drop-shadow(2px 5px 8px rgba(0,0,0,0.4));
    pointer-events: none;
    animation: tv-float 4s ease-in-out infinite;
    z-index: 2;
}
.tv-flair-left { left: -24px; transform: rotate(-6deg); }
.tv-flair-right { right: -24px; transform: rotate(6deg); }
@keyframes tv-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}
@media (max-width: 480px) {
    .tv-flair { width: 120px; bottom: -12px; }
    .tv-flair-left { left: -14px; }
    .tv-flair-right { right: -14px; }
}
.combatant-card .combatant-photo,
.combatant-card img.combatant-photo {
    flex-shrink: 0;
    display: block;
}
.combatant-card div.combatant-photo {
    width: 100px;
    background: var(--steel);
}
.combatant-card img.combatant-photo {
    height: auto;
    max-height: 200px;
    width: auto;
    max-width: 170px;
    object-fit: contain;
    background: var(--steel);
    align-self: center;
}
.combatant-card .combatant-info {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
}
.combatant-card .combatant-name {
    font-family: var(--display);
    font-size: 1.15rem;
    color: #fff;
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
    line-height: 1.1;
}
.combatant-card .stat-line {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: #cfcac5;
    line-height: 1.6;
    word-break: break-word;
}
.combatant-card .stat-line .stat-label {
    color: #8a8580;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 4px;
}

/* ---- Stacked variant: photo on top (full width, tall), stats below ---- */
.combatant-card.stacked {
    flex-direction: column;
    width: 170px;
}
.combatant-card.stacked .combatant-photo,
.combatant-card.stacked img.combatant-photo,
.combatant-card.stacked div.combatant-photo {
    width: 100%;
    height: 220px;
    max-width: none;
    object-fit: cover;
}
.combatant-card.stacked .combatant-info { width: 100%; }

.combatant-card.mini { flex-direction: column; width: 92px; }
.combatant-card.mini img.combatant-photo,
.combatant-card.mini div.combatant-photo {
    width: 100%;
    height: 92px;
    max-width: none;
    object-fit: cover;
}
.combatant-card.mini .combatant-info { width: 100%; padding: 6px; text-align: center; }
.combatant-card.mini .combatant-name { font-size: 0.72rem; display: block; }
.combatant-card-col.mini .theme-play-btn { font-size: 0.62rem; padding: 4px 6px; }

.error-box {
    background: rgba(221,2,1,0.08);
    border: 1px solid var(--marquee-red);
    color: #a80101;
    padding: 10px 14px;
    font-family: var(--mono);
    font-size: 0.82rem;
    border-radius: 2px;
}
.notice-box {
    background: #fff;
    border: 2px solid var(--marquee-red);
    color: var(--marquee-red);
    padding: 10px 14px;
    font-family: var(--mono);
    font-size: 0.82rem;
    border-radius: 2px;
}

/* ---- Tag team card ---- */
.team-card {
    background: var(--ink);
    color: #fff;
    border-radius: 3px;
    overflow: hidden;
}
.team-card .team-photos {
    display: flex;
}
.team-card .team-photos .half {
    flex: 1;
    aspect-ratio: 3/4;
    background: var(--steel) center/cover no-repeat;
}
.team-card .team-photo-single {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--steel) center/cover no-repeat;
}
.team-card .team-info {
    padding: 12px;
}
.team-card .team-name {
    font-family: var(--display);
    font-size: 1.4rem;
    color: #fff;
    line-height: 1;
    margin-bottom: 6px;
}
.team-card .team-members a {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: #cfcac5;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.team-card .team-members a:hover { color: #fff; }

/* ---- Footer ---- */
/* ---- Stable card (variable member count) ---- */
.stable-card {
    background: var(--ink);
    color: #fff;
    border-radius: 3px;
    overflow: hidden;
}
.stable-card .stable-photos {
    display: flex;
    flex-wrap: wrap;
}
.stable-card .stable-photos .member-photo {
    flex: 1 1 25%;
    min-width: 80px;
    aspect-ratio: 3/4;
    background: var(--steel) center/cover no-repeat;
}
.stable-card .stable-info {
    padding: 12px;
}
.stable-card .stable-name {
    font-family: var(--display);
    font-size: 1.4rem;
    color: #fff;
    line-height: 1;
    margin-bottom: 6px;
}
.stable-card .stable-members a {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: #cfcac5;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.stable-card .stable-members a:hover { color: #fff; }
.stable-card .stable-members .sep { color: #cfcac5; margin: 0 4px; }

/* ---- Latest Promos rotator ---- */
.promo-rotator {
    position: relative;
    width: 100%;
    height: 320px;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
    background: var(--ink);
}
.promo-slide {
    position: absolute;
    inset: 0;
    background-color: var(--steel);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease;
    text-decoration: none;
    display: flex;
    align-items: flex-end;
}
.promo-slide.active { opacity: 1; }
.promo-slide-caption {
    width: 100%;
    padding: 22px 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0));
}
.promo-slide-title {
    font-family: var(--display);
    font-size: 1.8rem;
    color: #fff;
    line-height: 1.1;
}
.promo-slide-name {
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #cfcac5;
    margin-top: 4px;
}

@media (max-width: 600px) {
    .promo-rotator { height: 220px; }
    .promo-slide-title { font-size: 1.4rem; }
}

/* ---- Quote of the Moment speech bubble ---- */
.speech-bubble {
    position: relative;
    background: var(--surface);
    color: var(--text);
    max-width: 480px;
    margin: 8px auto 44px;
    padding: 22px 26px;
    border-radius: 20px;
    border: 3px solid var(--marquee-red);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    transform: rotate(-1.5deg);
    transition: transform 0.2s ease;
}
.speech-bubble:hover { transform: rotate(0deg); }
.speech-bubble::before {
    content: '';
    position: absolute;
    bottom: -19px;
    left: 56px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 15px 0 15px;
    border-color: var(--marquee-red) transparent transparent transparent;
}
.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 59px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 16px 12px 0 12px;
    border-color: var(--surface) transparent transparent transparent;
}
.speech-bubble .quote-text {
    font-family: var(--display);
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 6px 0 12px;
}
.speech-bubble .quote-attribution {
    font-family: var(--mono);
    font-size: 0.8rem;
    text-align: right;
    margin: 0;
}
.speech-bubble.compact {
    max-width: none;
    width: 100%;
    margin: 8px 0 26px;
    padding: 16px 18px;
    flex: 1;
    min-width: 200px;
}
.speech-bubble.compact .quote-text { font-size: 1.15rem; margin: 2px 0 0; }

/* ---- Heat ranking board ---- */
@keyframes heat-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(13,126,255,0.35), 0 6px 16px rgba(0,0,0,0.2); }
    50% { box-shadow: 0 0 24px rgba(255,122,0,0.6), 0 6px 16px rgba(0,0,0,0.2); }
}
.heat-board {
    background: var(--ink);
    color: #fff;
    border-radius: 16px;
    border: 3px solid #ff7a00;
    padding: 20px 22px;
    max-width: 420px;
    width: 100%;
    margin: 8px auto 44px;
    animation: heat-pulse 2.6s ease-in-out infinite;
}
.heat-board .heat-title {
    font-family: var(--display);
    font-size: 1.3rem;
    letter-spacing: 1px;
    color: #fff;
    margin: 4px 0 14px;
}
.heat-list { list-style: none; margin: 0; padding: 0; }
.heat-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.heat-list li:last-child { border-bottom: none; }
.heat-rank {
    font-family: var(--display);
    font-size: 1.1rem;
    color: #ff7a00;
    width: 22px;
    flex-shrink: 0;
}
.heat-photo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--steel) center/cover no-repeat;
    flex-shrink: 0;
}
.heat-name {
    flex: 1;
    min-width: 0;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    overflow-wrap: break-word;
}
.heat-flames { flex-shrink: 0; font-size: 0.9rem; letter-spacing: -1px; }

/* ---- Quill WYSIWYG editor (admin news/match text) ---- */
.quill-editor { background: var(--surface); font-family: var(--body); }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--paper-dim) !important; }
.ql-editor { font-family: var(--body); font-size: 0.95rem; color: var(--text); min-height: inherit; }
/* Quill's alignment toolbar outputs these classes on saved content.
   Quill's own stylesheet (which defines them) only loads on admin
   editing pages, not the public pages this content ends up displayed
   on — without these, alignment would silently do nothing once saved. */
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }
/* Match the public-page paragraph spacing exactly, so the editor shows
   the real result while typing — single Enter stays tight, double
   Enter (an empty line) shows the same bigger gap it will on the page.
   !important because Quill's own bundled theme CSS loads AFTER this
   stylesheet on every page that uses the editor, and would otherwise
   silently win the cascade and override this. */
.ql-editor p { margin: 0 0 0.7em !important; }
.ql-editor p:last-child { margin-bottom: 0 !important; }
.ql-editor p:empty,
.ql-editor p:has(> br:only-child) { margin: 1.4em 0 !important; }

/* ---- Champion aura: glow around a champion's photo, color set per title ---- */
.aura-silver { box-shadow: 0 0 22px 4px rgba(200,200,210,0.75), 0 0 45px 10px rgba(200,200,210,0.35); }
.aura-white { box-shadow: 0 0 22px 4px rgba(255,255,255,0.85), 0 0 45px 10px rgba(255,255,255,0.4); }
.aura-red { box-shadow: 0 0 22px 4px rgba(221,2,1,0.75), 0 0 45px 10px rgba(221,2,1,0.35); }

/* ---- Belt shine animation ---- */
@keyframes belt-shine {
    0% { transform: translateX(-120%) skewX(-20deg); }
    60%, 100% { transform: translateX(220%) skewX(-20deg); }
}
.belt-shine-wrap { position: relative; overflow: hidden; display: inline-block; }
.belt-shine-wrap::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 30%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
    animation: belt-shine 3.2s ease-in-out infinite;
    animation-delay: 1s;
    pointer-events: none;
}

/* ---- Achievement badges ---- */
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ink);
    color: #fff;
    border-radius: 20px;
    padding: 5px 12px 5px 8px;
    font-family: var(--mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: default;
}
.badge-pill .badge-icon { font-size: 1rem; }

/* ---- Momentum meter ---- */
.momentum-meter {
    background: var(--surface);
    border: 1px solid var(--paper-dim);
    border-radius: 3px;
    padding: 12px 14px;
    margin: 10px 0;
}
.momentum-bar-track { background: var(--page-bg); border-radius: 10px; height: 14px; overflow: hidden; margin-top: 6px; }
.momentum-bar-fill { height: 100%; background: linear-gradient(90deg, var(--marquee-red), #ff7a00); transition: width 0.4s ease; }

/* ---- Belt lineage timeline (title.php) ---- */
.lineage-timeline { display: flex; flex-direction: column; gap: 0; }
.lineage-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--paper-dim);
}
.lineage-photo {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--steel) center/cover no-repeat;
    flex-shrink: 0;
    border: 2px solid var(--marquee-red);
}
.lineage-bar-track { flex: 1; background: var(--page-bg); border-radius: 3px; height: 26px; position: relative; overflow: hidden; min-width: 80px; }
.lineage-bar-fill {
    height: 100%;
    background: var(--ink);
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #fff;
    font-family: var(--mono);
    font-size: 0.72rem;
    white-space: nowrap;
    min-width: fit-content;
}

/* ---- Predictions ---- */
.prediction-box { background: var(--surface); border: 1px solid var(--paper-dim); border-radius: 3px; padding: 12px 14px; margin-top: 12px; }
.prediction-results-bar { display: flex; height: 20px; border-radius: 10px; overflow: hidden; margin-top: 8px; background: var(--page-bg); }

/* ---- Promo reactions ---- */
.reaction-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.reaction-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--surface);
    border: 1px solid var(--paper-dim);
    border-radius: 20px;
    padding: 4px 12px;
    font-family: var(--mono);
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--text);
}
.reaction-btn.active { background: var(--marquee-red); border-color: var(--marquee-red); color: #fff; }
.reaction-btn:hover { border-color: var(--marquee-red); }

/* ---- Show comments ---- */
.comment-item { padding: 10px 0; border-bottom: 1px solid var(--paper-dim); }
.comment-item:last-child { border-bottom: none; }

/* ---- Site search ---- */
.site-search { display: flex; align-items: center; gap: 6px; }
.btn.outline.search-btn { color: #fff; border-color: rgba(255,255,255,0.5); }
.btn.outline.search-btn:hover { border-color: var(--marquee-red); color: var(--marquee-red); }
.site-search input {
    padding: 6px 10px;
    border: 1px solid var(--paper-dim);
    border-radius: 2px;
    font-family: var(--body);
    font-size: 0.85rem;
    width: 160px;
}

/* ---- Interactive show reading mode ---- */
.show-mode-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--paper-dim);
}
.mode-toggle {
    display: inline-flex;
    border: 1px solid var(--paper-dim);
    border-radius: 20px;
    overflow: hidden;
}
.mode-btn {
    background: var(--surface);
    border: none;
    padding: 6px 16px;
    font-family: var(--mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    color: var(--concrete);
}
.mode-btn.active { background: var(--ink); color: #fff; }

.now-playing-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: var(--ink);
    color: #fff;
    padding: 8px 14px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.8rem;
    margin-bottom: 16px;
}
.now-playing-bar button {
    background: none;
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    border-radius: 20px;
    padding: 3px 12px;
    font-family: var(--mono);
    font-size: 0.72rem;
    cursor: pointer;
}
.now-playing-bar button:hover { border-color: var(--marquee-red); color: var(--marquee-red); }

.inline-now-playing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-family: var(--mono);
    font-size: 0.75rem;
    margin: 8px 0;
}
.inline-stop-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.4);
    color: #fff;
    border-radius: 20px;
    padding: 2px 10px;
    font-family: var(--mono);
    font-size: 0.7rem;
    cursor: pointer;
}
.inline-stop-btn:hover { border-color: var(--marquee-red); color: var(--marquee-red); }

.beat-reveal-btn {
    display: block;
    width: 100%;
    background: repeating-linear-gradient(135deg, var(--ink), var(--ink) 10px, #1a1a1a 10px, #1a1a1a 20px);
    color: #fff;
    border: 2px dashed var(--marquee-red);
    border-radius: 3px;
    padding: 16px;
    font-family: var(--display);
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    cursor: pointer;
    text-align: center;
    margin: 10px 0;
}
.beat-reveal-btn:hover { border-style: solid; }
.beat-trigger-text { text-decoration: underline; text-underline-offset: 3px; }
.beat-rehide-btn {
    background: none;
    border: none;
    color: var(--concrete);
    font-family: var(--mono);
    font-size: 0.72rem;
    cursor: pointer;
    padding: 4px 0;
    text-decoration: underline;
}
.beat-rehide-btn:hover { color: var(--marquee-red); }

@keyframes beat-flicker {
    0% { opacity: 0; filter: brightness(3) contrast(2); }
    10% { opacity: 1; filter: brightness(0.3); }
    20% { opacity: 0.2; filter: brightness(3); }
    30% { opacity: 1; filter: brightness(1); }
    45% { opacity: 0.3; filter: brightness(2) contrast(1.5); }
    60% { opacity: 1; filter: brightness(1); }
    100% { opacity: 1; filter: brightness(1); }
}
.beat-flicker { animation: beat-flicker 0.5s steps(2, end); }

.combatant-card-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.theme-play-btn {
    display: block;
    width: 100%;
    margin-top: 6px;
    background: var(--ink);
    border: 1px solid var(--paper-dim);
    color: #fff;
    border-radius: 3px;
    padding: 6px 10px;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    text-align: center;
}
.theme-play-btn:hover { border-color: var(--marquee-red); }
.theme-play-btn.playing { background: var(--marquee-red); border-color: var(--marquee-red); }

/* ---- Show intro video click-to-play overlay ---- */
.video-wrap { position: relative; width: 100%; margin-bottom: 24px; }
.video-click-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    cursor: pointer;
    font-family: var(--display);
    font-size: 1.4rem;
    letter-spacing: 1px;
    text-align: center;
    border-radius: 3px;
}
.video-click-overlay:hover { background: rgba(0,0,0,0.72); }
.video-play-icon {
    font-size: 2.6rem;
    color: var(--marquee-red);
}

/* ---- Deadline countdown widgets ---- */
.deadline-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 20px 0;
}
.deadline-box {
    background: var(--ink);
    color: #fff;
    border-radius: 3px;
    padding: 18px 24px;
    text-align: center;
    flex: 1;
    min-width: 260px;
    max-width: 400px;
}
.deadline-box .eyebrow { color: var(--marquee-red); }
.deadline-countdown {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 10px 0 14px;
}
.deadline-countdown > div { display: flex; flex-direction: column; align-items: center; }
.deadline-countdown .d-val, .deadline-countdown .h-val, .deadline-countdown .m-val, .deadline-countdown .s-val {
    font-family: var(--display);
    font-size: 1.8rem;
    line-height: 1;
}
.deadline-countdown .d-label {
    font-family: var(--mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b8b3ad;
    margin-top: 2px;
}
.deadline-box .btn.outline { color: #fff; border-color: rgba(255,255,255,0.5); }
.deadline-box .btn.outline:hover { border-color: var(--marquee-red); color: var(--marquee-red); }

footer {
    background: #000000;
    color: #cfcac5;
    text-align: center;
    padding: 24px 0;
    font-family: var(--mono);
    font-size: 0.75rem;
}
footer a { color: var(--marquee-red); }

.admin-table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 0.9rem; }
.admin-table th, .admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--paper-dim); text-align: left; color: var(--text); }
.admin-nav { display: flex; gap: 16px; margin-bottom: 24px; font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; }
.admin-nav a { text-decoration: none; color: var(--marquee-red); }

/* ---- Dashboard collapsible sections ---- */
.admin-collapse > summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--display);
    font-size: 1.15rem;
    letter-spacing: 0.3px;
    padding: 4px 0;
}
.admin-collapse > summary::-webkit-details-marker { display: none; }
.admin-collapse > summary::before {
    content: '\25B8';
    display: inline-block;
    margin-right: 8px;
    font-family: var(--mono);
    transition: transform 0.15s ease;
}
.admin-collapse[open] > summary::before { transform: rotate(90deg); }

.dash-section {
    background: var(--surface);
    border: 1px solid var(--paper-dim);
    border-radius: 3px;
    margin-bottom: 20px;
    overflow: hidden;
}
.dash-section > summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 18px;
    font-family: var(--display);
    font-size: 1.3rem;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dash-section > summary::-webkit-details-marker { display: none; }
.dash-section > summary::after {
    content: '\25BE';
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--marquee-red);
    transition: transform 0.15s ease;
    margin-left: 12px;
}
.dash-section[open] > summary::after { transform: rotate(180deg); }
.dash-section .dash-section-sub {
    font-family: var(--mono);
    font-size: 0.9rem;
    color: var(--concrete);
    text-transform: none;
    letter-spacing: normal;
    margin-left: 8px;
}
.dash-section-body {
    padding: 0 18px 18px;
    border-top: 1px solid var(--paper-dim);
}
.dash-subheading {
    font-family: var(--mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--marquee-red);
    margin: 18px 0 8px;
    padding-top: 16px;
    border-top: 1px dashed var(--paper-dim);
}
.dash-subheading:first-child { margin-top: 16px; padding-top: 0; border-top: none; }

/* =========================================================
   MOBILE — everything below only applies at narrow widths.
   Nothing here changes desktop rendering.
   ========================================================= */

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 5;
}
.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--marquee-red);
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 700px) {
    /* ---- Header / nav ---- */
    .marquee .wrap { flex-wrap: wrap; justify-content: space-between; }
    .site-logo { height: 64px; }
    .marquee .brand { font-size: 2rem; }
    .nav-toggle { display: flex; }
    .marquee nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-top: 16px;
        border-top: 1px solid var(--paper-dim);
    }
    .marquee nav.nav-open { display: flex; }
    .marquee nav a, .nav-dropdown { width: 100%; }
    .marquee nav a {
        padding: 14px 4px;
        border-bottom: 1px solid var(--paper-dim);
    }
    .nav-dropdown { position: static; }
    .nav-dropdown .dropdown-trigger {
        width: 100%;
        padding: 14px 4px;
        border-bottom: 1px solid var(--paper-dim);
    }
    .nav-dropdown .dropdown-menu {
        display: none;
        position: static;
        box-shadow: none;
        border: none;
        border-bottom: 1px solid var(--paper-dim);
        background: var(--page-bg);
        min-width: 0;
        padding: 0;
    }
    .nav-dropdown.open .dropdown-menu,
    .nav-dropdown:hover .dropdown-menu { display: block; }
    .nav-dropdown .dropdown-menu a {
        padding: 12px 4px 12px 24px;
        border-bottom: 1px solid var(--paper-dim);
    }
    .topbar .wrap { font-size: 0.68rem; justify-content: center; text-align: center; }

    /* ---- Typography scale-down ---- */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.55rem; }
    h3 { font-size: 1.15rem; }

    /* ---- Tables: scroll horizontally instead of squeezing/breaking ---- */
    table.standings, .admin-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* ---- Tall photo instances (e.g. wrestler bio full-body image) ---- */
    .tape-photo { max-height: 440px; }

    /* ---- Roster/team/stable grids: narrower auto-fit columns instead of one oversized full-width card ---- */
    .grid.cols-2, .grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .grid > * { min-width: 0; }

    /* ---- Wrestler bio: stack sidebar above content instead of a fixed 280px column ---- */
    .grid.cols-2.wrestler-layout { grid-template-columns: 1fr; }
    .wrestler-layout > * { min-width: 0; }

    /* ---- Hall of Fame list card: narrower fixed photo column so it doesn't force overflow ---- */
    .hof-card-layout { grid-template-columns: 90px 1fr; }

    /* ---- Admin inline button rows wrap more comfortably with a touch-friendly gap ---- */
    .admin-nav { gap: 12px 16px; }

    /* ---- Larger tap targets on small buttons ---- */
    .btn { padding: 11px 16px; }
}

@media (max-width: 480px) {
    .wrap { padding: 0 14px; }
    .site-logo { height: 52px; }
    .marquee .brand { font-size: 1.6rem; }
    h1 { font-size: 1.7rem; }
    .card, .tape-stats, .team-card .team-info, .stable-card .stable-info { padding: 14px; }
    .combatant-card { width: 100%; }
    .stack { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}