/* ================================================
   Online Game landing page (/online-game): Dead Sector
   Builds on styles.css. The page body is always dark (it sits over gameplay
   imagery); the nav and footer follow the site theme. Every rule is scoped to
   body.og-page or an og- class, and headings get explicit colors so the light
   theme heading overrides in styles.css cannot turn them dark.
   ================================================ */

.og-page {
    --og-bg: #0d0d0d;
    --og-bg-2: #111111;
    --og-bg-3: #1a1a1a;
    --og-card: #252525;
    --og-text: #ffffff;
    --og-body: #e8e8e8;
    --og-muted: #a3a3a3;
    --og-line: rgba(255, 255, 255, 0.08);
    --og-green-line: rgba(34, 197, 94, 0.35);
    --og-radius: 8px;
    --og-dock-h: calc(64px + env(safe-area-inset-bottom, 0px));
}

html body.og-page {
    background: var(--og-bg);
}

/* Text colour only on the always-dark parts: body text colour must stay with the site
   theme, or the footer (which inherits it) turns near white on its light background. */
.og-main,
.og-dock {
    color: var(--og-body);
}

.og-main:focus {
    outline: none;
}

.og-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.og-skip {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 0.75rem 1.1rem;
    background: var(--accent);
    color: #0d0d0d;
    font-weight: 700;
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
}

.og-skip:focus {
    transform: none;
}

.og-page :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Controls that sit on video or imagery get a dark halo behind the ring. */
.og-hero :focus-visible,
.og-player :focus-visible,
.og-final :focus-visible,
.og-dock :focus-visible {
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.6);
}

.og-accent {
    color: var(--accent);
}

.og-main h1,
.og-main h2,
.og-main h3 {
    color: var(--og-text);
}

/* Keep each accent phrase whole ("Run them for real.", "airsoft rules") and balance the lines.
   inline-block, not nowrap: the phrase moves to the next line as a unit, yet can still wrap
   inside itself when it is wider than the column (a wide fallback font on a phone). */
.og-main h2 {
    text-wrap: balance;
}

.og-main h2 .og-accent {
    display: inline-block;
}

.og-main .og-accent {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
}

/* ---------- Shared pieces ---------- */

.og-section {
    position: relative;
    padding: 5.5rem 0;
}

.og-head {
    margin-bottom: 2.5rem;
}

.og-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
}

.og-eyebrow::before {
    content: '';
    width: 24px;
    height: 2px;
    background: currentColor;
    flex-shrink: 0;
}

.og-lede {
    max-width: 42rem;
    margin-top: 0.75rem;
    font-size: 1.05rem;
    color: var(--og-muted);
}

/* HUD corner brackets (decorative). */
.og-brackets {
    position: absolute;
    inset: 16px;
    pointer-events: none;
    z-index: 2;
}

.og-brackets i {
    position: absolute;
    width: 28px;
    height: 28px;
    border: 0 solid rgba(34, 197, 94, 0.7);
}

.og-brackets i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.og-brackets i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.og-brackets i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.og-brackets i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

.og-brackets--tight {
    inset: 10px;
}

.og-brackets--tight i {
    width: 18px;
    height: 18px;
}

/* Static film grain and 1 px scanlines (decorative). */
.og-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.og-grain::before,
.og-grain::after {
    content: '';
    position: absolute;
    inset: 0;
}

.og-grain::before {
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.og-grain::after {
    opacity: 0.05;
    background: repeating-linear-gradient(0deg, #000 0 1px, transparent 1px 3px);
}

/* Plain-text media buttons (Play, Pause, Full screen). */
.og-textbtn {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    font-family: var(--font-primary);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(13, 13, 13, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.og-textbtn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #0d0d0d;
}

.og-textbtn[hidden] {
    display: none;
}

.og-tag {
    display: inline-block;
    padding: 0.12rem 0.45rem;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 2px;
    vertical-align: middle;
}

/* Buttons on the always-dark page body keep their dark-theme look in light theme
   (the light theme maps --primary, the green button text, to near white). */
.og-page .og-main .btn--primary,
.og-page .og-dock .btn--primary {
    color: #0d0d0d;
}

.og-page .og-main .btn--secondary {
    background: rgba(13, 13, 13, 0.35);
    color: #ffffff;
    border-color: #ffffff;
}

.og-page .og-main .btn--secondary:hover {
    background: #ffffff;
    color: #0d0d0d;
}

.og-page .og-main .btn--outline {
    color: var(--accent);
    border-color: var(--accent);
}

.og-page .og-main .btn--outline:hover {
    background: var(--accent);
    color: #0d0d0d;
}

/* ---------- 1. Hero ---------- */

.og-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 80px;
    overflow: hidden;
    background: var(--og-bg);
    color: var(--og-text);
}

.og-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--og-bg);
}

.og-hero__poster,
.og-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.og-hero__video {
    opacity: 0;
    transition: opacity 600ms ease;
}

.og-hero.is-playing .og-hero__video {
    opacity: 1;
}

/* Same treatment as the homepage .hero__overlay, plus a centre scrim for the copy. */
.og-hero__shade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 62% 58% at 50% 54%, rgba(13, 13, 13, 0.6) 0%, rgba(13, 13, 13, 0) 72%),
        linear-gradient(to bottom, rgba(26, 26, 26, 0.7) 0%, rgba(26, 26, 26, 0.5) 50%, rgba(26, 26, 26, 0.9) 86%, #0d0d0d 100%);
}

.og-hero__brackets {
    inset: 104px 24px 24px;
}

.og-hero__bars span {
    position: absolute;
    left: 0;
    right: 0;
    height: 8vh;
    background: #000000;
    z-index: 3;
    animation: og-bar-out 900ms cubic-bezier(0.7, 0, 0.2, 1) 120ms both;
}

.og-hero__bars span:first-child {
    top: 80px;
    transform-origin: top;
}

.og-hero__bars span:last-child {
    bottom: 0;
    transform-origin: bottom;
}

@keyframes og-bar-out {
    from { transform: scaleY(1); }
    to { transform: scaleY(0); }
}

.og-hero__content {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    padding: 3rem var(--container-padding);
    text-align: center;
}

.og-page .og-hero .og-hero__badge {
    margin-bottom: 1.25rem;
    color: var(--accent);
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(34, 197, 94, 0.55);
}

/* One line in any font, so the web-font swap cannot change the hero's height (layout shift). */
.og-page .og-hero .og-hero__title,
.og-hero__tag {
    white-space: nowrap;
}

@media (max-width: 359px) {
    .og-page .og-hero .og-hero__title,
    .og-hero__tag {
        white-space: normal;
    }
}

.og-page .og-hero .og-hero__title {
    margin: 0;
    font-size: clamp(3.5rem, 11vw, 9rem);
    line-height: 0.9;
    letter-spacing: 0.04em;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.6);
}

.og-hero__tag {
    margin-top: 0.5rem;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.2vw, 2.6rem);
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.og-hero__lede {
    max-width: 36rem;
    margin: 1.25rem auto 2rem;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: #eeeeee;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
}

.og-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.og-hero__req {
    margin-top: 1.1rem;
    font-size: 0.84rem;
    color: #d6d6d6;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

.og-hero__toggle {
    margin-top: 1rem;
}

/* Live bar: hidden until GET /game/status answers. */
.og-live {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem 1.5rem;
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.8rem 1.2rem;
    text-align: left;
    background: rgba(13, 13, 13, 0.82);
    border: 1px solid var(--og-green-line);
    border-left: 3px solid var(--accent);
    border-radius: var(--og-radius);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.og-live[hidden] {
    display: none;
}

.og-live__kicker {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
}

.og-live__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.og-live[data-state="live"] .og-live__dot {
    animation: og-pulse 2s ease-out infinite;
}

@keyframes og-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    70%, 100% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
}

.og-live[data-state="starting"] {
    border-left-color: var(--warning);
}

.og-live[data-state="starting"] .og-live__kicker {
    color: var(--warning);
}

.og-live__match {
    min-width: 0;
    font-size: 0.95rem;
    color: #ffffff;
    text-wrap: balance;
}

/* Each part of the match line ("Domination on Clarksburg." / "In play.") stays whole
   (inline-block, so a part wider than a narrow phone still wraps inside itself). */
.og-live__match span {
    display: inline-block;
}

.og-live__stat {
    font-size: 0.9rem;
    color: var(--og-body);
}

.og-live__match:empty,
.og-live__stat:empty {
    display: none;
}

.og-live__join {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.og-live__join:hover {
    color: var(--accent-hover);
}

.og-live__join[hidden] {
    display: none;
}

@media (min-width: 768px) {
    /* The bottom padding reserves the live bar's space so it never shifts the copy. */
    .og-hero {
        padding-bottom: 6.5rem;
    }

    .og-live {
        position: absolute;
        left: 50%;
        bottom: 2.25rem;
        width: min(1200px, calc(100% - 6rem));
        margin: 0;
        transform: translateX(-50%);
    }

    .og-hero__toggle {
        position: absolute;
        top: 116px;
        right: 40px;
        margin: 0;
    }
}

/* Tablets: four columns leave the match line too narrow, so the count moves under it and
   the match reads on one line ("Domination on Clarksburg. In play."). */
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 501px) {
    .og-live {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .og-live__stat {
        grid-column: 2;
        grid-row: 2;
    }

    .og-live__join {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 767px) {
    .og-hero__content {
        margin: 0 auto;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .og-hero__brackets {
        inset: 92px 12px 12px;
    }

    .og-hero__brackets i {
        width: 18px;
        height: 18px;
    }

    .og-hero__actions {
        flex-direction: column;
        align-items: stretch;
        max-width: 22rem;
        margin: 0 auto;
    }

    .og-live {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.35rem;
    }
}

/* ---------- 2. Reel ---------- */

.og-reel {
    background:
        linear-gradient(rgba(34, 197, 94, 0.04) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(34, 197, 94, 0.04) 1px, transparent 1px) 0 0 / 40px 40px,
        var(--og-bg);
    padding-top: 4.5rem;
}

@media (min-width: 1024px) {
    .og-head--split {
        display: grid;
        grid-template-columns: auto minmax(0, 34rem);
        justify-content: space-between;
        align-items: end;
        column-gap: 3rem;
        margin-bottom: 2rem;
    }

    .og-head--split .og-eyebrow {
        grid-column: 1 / -1;
    }

    .og-head--split .og-lede {
        margin-top: 0;
        text-align: right;
        text-wrap: balance;
    }
}

.og-reel__layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.og-player {
    position: relative;
    overflow: hidden;
    background: var(--og-bg-2);
    border: 1px solid var(--og-line);
    border-radius: var(--og-radius);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

.og-player__screen {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--og-bg-2);
}

/* Full screen keeps the control bar under the picture. */
.og-player:fullscreen {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: #000000;
}

.og-player:fullscreen .og-player__screen {
    flex: 1;
    aspect-ratio: auto;
    background: #000000;
}

.og-player__still,
.og-player__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.og-player:fullscreen .og-player__still,
.og-player:fullscreen .og-player__video {
    object-fit: contain;
}

.og-player__still {
    transform-origin: 60% 45%;
}

.og-player__still.is-broken {
    visibility: hidden;
}

.og-player__video {
    opacity: 0;
    transition: opacity 350ms ease;
}

.og-player.is-video .og-player__video {
    opacity: 1;
}

.og-card {
    position: absolute;
    left: 4%;
    bottom: 7%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 88%;
    padding: 0.6rem 1rem 0.7rem 1.1rem;
    border-left: 3px solid var(--accent);
    background: linear-gradient(90deg, rgba(13, 13, 13, 0.85), rgba(13, 13, 13, 0.35));
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 450ms ease, transform 450ms ease;
    pointer-events: none;
}

.og-player.is-carding .og-card {
    opacity: 1;
    transform: none;
}

.og-card__kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
}

.og-card__name {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 4.25rem);
    line-height: 0.9;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
}

.og-card__spots {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.og-player__corner {
    position: absolute;
    top: 1.1rem;
    left: 1.25rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0.65rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(13, 13, 13, 0.6);
    border-radius: 2px;
    transition: opacity 450ms ease;
}

.og-player.is-carding .og-player__corner {
    opacity: 0;
}

.og-diamond {
    width: 9px;
    height: 9px;
    border: 2px solid var(--accent);
    transform: rotate(45deg);
    flex-shrink: 0;
}

.og-player__badge {
    position: absolute;
    top: 1.1rem;
    right: 1.25rem;
    z-index: 3;
    padding: 0.3rem 0.6rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(13, 13, 13, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 2px;
}

/* Real footage carries the accent edge of the page's other overlays (map card, live bar);
   the still fallback keeps the plain frame. */
.og-player__badge[data-kind="footage"] {
    border-color: rgba(34, 197, 94, 0.45);
    border-left: 3px solid var(--accent);
}

.og-player__badge[hidden] {
    display: none;
}

.og-end {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1rem;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(13, 13, 13, 0.78) 0%, rgba(13, 13, 13, 0.94) 72%);
}

.og-end[hidden] {
    display: none;
}

.og-end__eyebrow {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent);
}

.og-end__title {
    margin-bottom: 1rem;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7vw, 6rem);
    line-height: 0.9;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
}

.og-end__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.og-end__actions .btn {
    min-height: 44px;
}

.og-player__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    border-top: 1px solid var(--og-line);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.06), transparent);
}

.og-player__play {
    min-width: 5.5rem;
}

.og-segments {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.og-segments span {
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
}

.og-segments i,
.og-tab__bar i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--accent);
    transform: scaleX(var(--p, 0));
    transform-origin: left;
}

.og-segments span.is-done i {
    transform: none;
}

.og-player__count {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--og-muted);
}

.og-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.og-tab {
    position: relative;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    min-height: 44px;
    padding: 0.5rem;
    overflow: hidden;
    text-align: left;
    color: var(--og-text);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--og-line);
    border-radius: var(--og-radius);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.og-tab__thumb {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 5px;
    background: var(--og-bg-2);
}

.og-tab__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.7) brightness(0.75);
    transition: filter var(--transition-fast);
}

.og-tab__thumb img.is-broken {
    visibility: hidden;
}

.og-tab__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.og-tab__name {
    font-family: var(--font-display);
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: 0.08em;
}

.og-tab__sub {
    margin-top: 0.3rem;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--og-muted);
}

.og-tab__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
}

.og-tab:hover {
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.05);
}

.og-tab:hover .og-tab__thumb img,
.og-tab[aria-selected="true"] .og-tab__thumb img {
    filter: none;
}

.og-tab[aria-selected="true"] {
    border-color: var(--accent);
    background: rgba(34, 197, 94, 0.09);
    box-shadow: inset 3px 0 0 var(--accent);
}

.og-tab[aria-selected="true"] .og-tab__name {
    color: var(--accent);
}

.og-panel {
    margin-top: 0.9rem;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--og-line);
    border-radius: var(--og-radius);
}

.og-panel__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--og-muted);
}

.og-panel__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.6rem 0 0.4rem;
}

.og-panel__list li {
    padding: 0.2rem 0.55rem;
    font-size: 0.84rem;
    color: var(--og-body);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--og-line);
    border-radius: 3px;
}

.og-panel__note {
    margin-top: 0.4rem;
    font-size: 0.88rem;
    color: var(--og-muted);
}

.og-panel__note[hidden],
.og-panel__link[hidden] {
    display: none;
}

.og-panel__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.og-panel__link:hover {
    color: var(--accent-hover);
}

/* ---------- 3. Modes and playlists ---------- */

.og-modes {
    background: var(--og-bg-2);
}

.og-modes__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.og-mode {
    overflow: hidden;
    background: var(--og-bg-3);
    border: 1px solid var(--og-line);
    border-radius: var(--og-radius);
    transition: border-color var(--transition-base), transform var(--transition-base);
}

.og-mode:hover {
    border-color: rgba(34, 197, 94, 0.55);
    transform: translateY(-3px);
}

.og-mode__art {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
        repeating-linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0 12px, transparent 12px 24px),
        var(--og-bg-2);
}

.og-mode__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 3.2rem;
    letter-spacing: 0.12em;
    color: rgba(34, 197, 94, 0.85);
}

.og-mode__art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--transition-base), transform var(--transition-slow);
}

.og-mode__art.is-loaded img {
    opacity: 1;
}

.og-mode__art.is-missing img {
    display: none;
}

.og-mode:hover .og-mode__art img {
    transform: scale(1.04);
}

.og-mode__body {
    padding: 1rem 1.2rem 1.2rem;
}

.og-mode__code {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--accent);
}

.og-main .og-mode__name {
    margin: 0.2rem 0 0.35rem;
    font-size: 1.6rem;
    line-height: 1.05;
}

.og-mode__line {
    font-size: 0.93rem;
    color: var(--og-muted);
}

.og-mode__limit {
    margin-top: 0.8rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--og-body);
}

.og-playlists {
    position: relative;
    margin-top: 2.5rem;
    padding: 1.75rem 1.75rem 1.5rem;
    background: var(--og-bg);
    border: 1px solid var(--og-line);
    border-radius: var(--og-radius);
}

.og-main .og-playlists__title {
    margin-bottom: 1.1rem;
    font-size: 1.8rem;
}

.og-playlists__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.og-playlist {
    padding: 1rem 1.1rem;
    background: var(--og-bg-3);
    border: 1px solid var(--og-line);
    border-radius: 6px;
}

.og-playlist__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.og-playlist__name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--og-text);
}

/* Reserved width so a count arriving later does not reflow the name. */
.og-playlist__count {
    min-width: 5.5rem;
    min-height: 1.4rem;
    text-align: right;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--accent);
}

.og-playlist__modes {
    margin-top: 0.4rem;
    font-size: 0.88rem;
    color: var(--og-body);
}

.og-playlist__size {
    margin-top: 0.4rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--og-muted);
}

.og-playlist__note {
    margin-top: 0.4rem;
    font-size: 0.84rem;
    color: var(--og-muted);
}

/* ---------- 4. Rules and classes ---------- */

.og-rules {
    background: var(--og-bg);
}

.og-rules__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
    gap: 2.5rem;
    align-items: start;
}

/* Two columns: the intro column runs the full height of the taller rule grid and the HIT
   card takes up the rest of it (content centred, capped), so no empty block is left under it. */
@media (min-width: 1024px) {
    .og-rules__layout {
        align-items: stretch;
    }

    .og-rules__intro {
        display: flex;
        flex-direction: column;
    }

    .og-rules__intro .og-hit {
        flex: 1 1 auto;
        align-content: center;
        max-height: 30rem;
        margin-top: auto;
    }
}

.og-hit {
    display: grid;
    justify-items: start;
    gap: 0.35rem;
    max-width: 28rem;
    padding: 1.6rem 1.6rem 1.4rem;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(0, 0, 0, 0) 60%), #140d0d;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-left: 4px solid var(--error);
    border-radius: var(--og-radius);
}

.og-hit__word {
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 9vw, 7rem);
    line-height: 0.85;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--error);
}

.og-hit__call {
    margin-bottom: 0.9rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.og-hit__timer {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
}

.og-hit__ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    font-weight: 700;
    font-size: 0.95rem;
}

.og-hit__ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--error) 0 86%, rgba(255, 255, 255, 0.14) 86% 100%);
    -webkit-mask: radial-gradient(circle, transparent 20px, #000 21px);
    mask: radial-gradient(circle, transparent 20px, #000 21px);
}

.og-hit__label {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
}

.og-rules__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.og-rule {
    padding: 1.4rem 1.4rem 1.3rem;
    background: var(--og-bg-3);
    border: 1px solid var(--og-line);
    border-radius: var(--og-radius);
}

.og-rule__num {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--font-display);
    font-size: 2.2rem;
    line-height: 1;
    color: var(--accent);
}

.og-main .og-rule h3 {
    margin-bottom: 0.45rem;
    font-size: 1.45rem;
    line-height: 1.05;
}

.og-rule p {
    font-size: 0.93rem;
    color: var(--og-muted);
}

.og-classes {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--og-line);
}

.og-classes__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.5rem;
    margin-bottom: 1.1rem;
}

.og-main .og-classes__title {
    font-size: 1.9rem;
}

.og-classes__lede {
    color: var(--og-muted);
}

.og-classes__list {
    border: 1px solid var(--og-line);
    border-radius: var(--og-radius);
    overflow: hidden;
}

.og-class {
    display: grid;
    grid-template-columns: 3rem 9rem minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: baseline;
    gap: 0.25rem 1.25rem;
    padding: 0.95rem 1.25rem;
    background: var(--og-bg-3);
    border-bottom: 1px solid var(--og-line);
}

.og-class:last-child {
    border-bottom: 0;
}

.og-class__idx {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--accent);
}

.og-class__name {
    font-family: var(--font-display);
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
}

.og-class__primary {
    color: var(--og-body);
}

.og-class__tag {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);
    white-space: nowrap;
}

.og-class__trait {
    font-size: 0.92rem;
    color: var(--og-muted);
}

/* ---------- 5. Launch, load out, deploy ---------- */

.og-deploy {
    background: var(--og-bg-2);
}

.og-deploy__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.og-step,
.og-check,
.og-controls__card {
    padding: 1.3rem 1.25rem;
    background: var(--og-bg-3);
    border: 1px solid var(--og-line);
    border-radius: var(--og-radius);
}

.og-step {
    display: flex;
    gap: 1rem;
}

.og-step__num {
    font-family: var(--font-display);
    font-size: 3.2rem;
    line-height: 0.85;
    color: var(--accent);
}

.og-main .og-step h3,
.og-main .og-check h3,
.og-main .og-controls__card h3 {
    margin-bottom: 0.4rem;
    font-size: 1.55rem;
    line-height: 1;
}

.og-step p {
    font-size: 0.9rem;
    color: var(--og-muted);
}

.og-check {
    border-color: var(--og-green-line);
}

.og-check__static {
    font-size: 0.9rem;
    color: var(--og-body);
}

.og-check__static[hidden],
.og-check__list[hidden] {
    display: none;
}

.og-check__list li {
    padding: 0.35rem 0;
    font-size: 0.88rem;
    color: #ffffff;
    border-bottom: 1px dashed var(--og-line);
}

.og-check__list li:last-child {
    border-bottom: 0;
}

.og-check__list li.is-ok {
    color: var(--accent);
}

.og-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.og-keys {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    margin-top: 0.6rem;
}

.og-keys > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--og-line);
}

.og-keys dt {
    font-size: 0.88rem;
    color: var(--og-muted);
}

.og-keys dd {
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--og-muted);
    text-align: right;
}

.og-page kbd {
    display: inline-block;
    min-width: 1.8rem;
    padding: 0.1rem 0.45rem;
    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom-width: 3px;
    border-radius: 3px;
}

.og-controls__note {
    margin-top: 0.8rem;
    font-size: 0.85rem;
    color: var(--og-muted);
}

.og-touch {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.og-touch li,
.og-progress__list li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.92rem;
    color: var(--og-body);
}

.og-touch li::before,
.og-progress__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border: 2px solid var(--accent);
    transform: rotate(45deg);
}

.og-progress {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    margin-top: 1rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--og-green-line);
    border-radius: var(--og-radius);
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.07), transparent 70%);
}

.og-progress__list {
    flex: 1 1 40rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 1.75rem;
}

.og-progress__list strong {
    color: #ffffff;
}

.og-progress__discord {
    text-align: center;
}

/* ---------- 6. Leaderboards ---------- */

/* The table always holds 10 rows of a fixed height and the loading, empty and error
   messages sit over it, so nothing below moves when the boards arrive. */
.og-board {
    background: var(--og-bg);
    --og-row-h: 3rem;
}

.og-board__panel {
    position: relative;
    padding: 1.5rem 1.5rem 1.25rem;
    background: var(--og-bg-2);
    border: 1px solid var(--og-line);
    border-radius: var(--og-radius);
}

.og-board__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1rem;
}

.og-board__tabs,
.og-board__periods {
    display: flex;
    gap: 0.4rem;
}

.og-board__tab,
.og-board__period {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    font-family: var(--font-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--og-muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--og-line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.og-board__tab:hover,
.og-board__period:hover {
    color: var(--og-text);
    border-color: rgba(255, 255, 255, 0.3);
}

.og-board__tab[aria-selected="true"] {
    color: #0d0d0d;
    background: var(--accent);
    border-color: var(--accent);
}

.og-board__period[aria-pressed="true"] {
    color: var(--accent);
    border-color: var(--og-green-line);
    background: rgba(34, 197, 94, 0.08);
}

.og-board__body {
    position: relative;
}

.og-board__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.og-board__c-rank { width: 3.5rem; }
.og-board__c-lvl { width: 6rem; }
.og-board__c-kd { width: 5.5rem; }
.og-board__c-val { width: 7.5rem; }

.og-board__table th {
    height: 2.5rem;
    padding: 0 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: left;
    color: var(--og-muted);
    border-bottom: 1px solid var(--og-line);
}

.og-board__table td {
    height: var(--og-row-h);
    padding: 0 0.75rem;
    color: var(--og-body);
    border-bottom: 1px solid var(--og-line);
    white-space: nowrap;
}

.og-board__table tbody tr:last-child td {
    border-bottom: 0;
}

.og-board__table .og-board__kd,
.og-board__table .og-board__val {
    text-align: right;
}

.og-board__table th.is-ranked {
    color: var(--accent);
}

.og-board__table td.is-ranked {
    font-weight: 700;
    color: var(--og-text);
}

.og-board__rank {
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--og-muted);
}

.og-board__table th.og-board__rank {
    font-family: var(--font-primary);
    font-size: 0.7rem;
}

.og-board__row.is-top .og-board__rank {
    color: var(--accent);
}

/* Callsigns: player text, isolated (bdi) and cut to one line. */
.og-board__who {
    overflow: hidden;
}

.og-board__name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--og-text);
    text-align: left;
    unicode-bidi: isolate;
}

.og-board__sub {
    display: none;
    font-size: 0.72rem;
    color: var(--og-muted);
}

.og-board__pres {
    display: inline-block;
    margin-right: 0.4rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);
    border: 1px solid var(--og-green-line);
    border-radius: 2px;
    vertical-align: 0.1em;
}

.og-board__row.is-blank td {
    color: var(--og-muted);
}

/* The first open row's text may run over its empty neighbours. */
.og-board__row.is-blank .og-board__who {
    overflow: visible;
}

.og-board__open {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--og-muted);
}

/* While loading, before the first answer and when a board has no rows: the message covers
   the rows. With rows, it stays for screen readers only (it still announces). */
.og-board__state {
    position: absolute;
    top: 2.5rem;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 1rem;
    text-align: center;
    background: rgba(17, 17, 17, 0.82);
}

.og-board__msg {
    max-width: 30rem;
    font-weight: 600;
    color: var(--og-text);
}

.og-board__panel[data-state="loading"] .og-board__msg::after {
    content: '';
    display: block;
    width: 3rem;
    height: 2px;
    margin: 0.85rem auto 0;
    background: var(--accent);
    animation: og-board-pulse 1.2s ease-in-out infinite;
}

@keyframes og-board-pulse {
    0%, 100% { opacity: 0.25; transform: scaleX(0.4); }
    50% { opacity: 1; transform: scaleX(1); }
}

.og-board__first {
    font-weight: 700;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.og-board__first[hidden],
.og-board__retry[hidden] {
    display: none;
}

.og-board__panel[data-state="ready"] .og-board__state {
    top: auto;
    bottom: auto;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.og-board__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--og-line);
}

.og-board__note {
    flex: 1 1 22rem;
    /* Room for the longest note (the K/D rule), so switching tabs moves nothing. */
    min-height: 3em;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--og-muted);
}

@media (max-width: 1023px) {
    .og-board__note {
        min-height: 4.5em;
    }
}

/* Phones: the level moves under the callsign, so the callsign keeps most of the row. */
@media (max-width: 599px) {
    .og-board {
        --og-row-h: 3.4rem;
    }

    .og-board__panel {
        padding: 1rem 0.75rem 1rem;
    }

    .og-board__bar {
        flex-direction: column;
        align-items: stretch;
    }

    .og-board__tabs,
    .og-board__periods {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .og-board__periods {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .og-board__tab,
    .og-board__period {
        padding: 0.5rem 0.4rem;
        letter-spacing: 0.1em;
    }

    .og-board__c-rank { width: 2.4rem; }
    .og-board__c-lvl { width: 0; }
    .og-board__c-kd { width: 3.9rem; }
    .og-board__c-val { width: 5.2rem; }

    .og-board__table th,
    .og-board__table td {
        padding: 0 0.4rem;
    }

    /* The level column collapses (its cells stay for screen readers; the line under the
       callsign shows it on screen). display: none would shift the fixed columns. */
    .og-board__table th.og-board__lvl,
    .og-board__table td.og-board__lvl {
        padding: 0;
        overflow: hidden;
        font-size: 0;
        line-height: 0;
    }

    .og-board__table .og-board__lvl .og-board__pres {
        display: none;
    }

    .og-board__sub {
        display: block;
    }

    .og-board__foot .og-board__play {
        width: 100%;
        text-align: center;
    }
}

/* Short landscape phones: shorter rows. */
@media (max-height: 500px) and (orientation: landscape) {
    .og-board {
        --og-row-h: 2.5rem;
    }
}

/* ---------- 7. Real fields ---------- */

.og-real {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 460px;
    background: var(--og-bg-3);
}

.og-real__photo {
    position: relative;
    min-height: 320px;
    background: var(--og-bg-2);
}

.og-real__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% 30%;
}

.og-real__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem clamp(1.5rem, 5vw, 5rem);
}

.og-real__copy h2 {
    margin-bottom: 1rem;
}

.og-real__copy > p:not(.og-eyebrow) {
    max-width: 34rem;
    font-size: 1.05rem;
    color: var(--og-muted);
}

.og-real__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

/* ---------- 8. FAQ ---------- */

.og-faq {
    background: var(--og-bg);
}

.og-faq__inner {
    max-width: calc(48rem + 2 * var(--container-padding));
}

.og-faq__item {
    border-bottom: 1px solid var(--og-line);
}

.og-faq__item summary {
    position: relative;
    display: block;
    min-height: 44px;
    padding: 1.15rem 2.75rem 1.15rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    list-style: none;
    color: #ffffff;
    cursor: pointer;
}

.og-faq__item summary::-webkit-details-marker {
    display: none;
}

/* Plus / minus drawn with two CSS bars. */
.og-faq__item summary::before,
.og-faq__item summary::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    width: 14px;
    height: 2px;
    margin-top: -1px;
    background: var(--accent);
    transition: transform var(--transition-fast);
}

.og-faq__item summary::after {
    transform: rotate(90deg);
}

.og-faq__item[open] summary::after {
    transform: rotate(0deg);
}

.og-faq__item summary:hover {
    color: var(--accent);
}

.og-faq__item p {
    max-width: 44rem;
    padding-bottom: 1.25rem;
    color: var(--og-muted);
}

/* ---------- 9. Final call to action ---------- */

.og-final {
    position: relative;
    isolation: isolate;
    padding: 7rem 0;
    overflow: hidden;
    text-align: center;
    color: var(--og-text);
    background: var(--og-bg);
}

.og-final__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.og-final__media img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    opacity: 0.2;
}

.og-main .og-final h2 {
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 0.95;
}

.og-final__lede {
    max-width: 34rem;
    margin: 0.75rem auto 2rem;
    font-size: 1.1rem;
    color: var(--og-body);
}

.og-final__req {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    max-width: 60rem;
    margin: 3rem auto 0;
    text-align: left;
}

.og-final__req > div {
    padding: 1rem 1.1rem;
    background: rgba(13, 13, 13, 0.72);
    border: 1px solid var(--og-line);
    border-top: 2px solid var(--accent);
    border-radius: 6px;
}

.og-final__req dt {
    margin-bottom: 0.3rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}

.og-final__req dd {
    font-size: 0.92rem;
    color: var(--og-body);
}

/* ---------- 10. Phone dock ---------- */

.og-dock {
    display: none;
}

@media (max-width: 767px) {
    .og-dock {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 900;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        height: var(--og-dock-h);
        padding: 0 1rem env(safe-area-inset-bottom, 0px);
        background: rgba(13, 13, 13, 0.95);
        border-top: 1px solid var(--og-green-line);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        transform: translateY(110%);
        visibility: hidden;
        transition: transform 300ms ease, visibility 0s linear 300ms;
    }

    .og-dock.is-visible {
        transform: none;
        visibility: visible;
        transition: transform 300ms ease, visibility 0s;
    }

    .og-dock__text {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--og-muted);
    }

    .og-dock__text strong {
        font-family: var(--font-display);
        font-size: 1.35rem;
        font-weight: 400;
        letter-spacing: 0.06em;
        color: #ffffff;
    }

    .og-dock__play {
        min-height: 44px;
        padding: 0.6rem 1.2rem;
    }

    body.og-dock-on .back-to-top {
        bottom: calc(30px + var(--og-dock-h)) !important;
    }

    /* The final call to action is its own way out: the site's back-to-top button would sit
       on the PLAY DEAD SECTOR button, so it steps aside while that section is on screen.
       (!important beats the inline opacity and visibility main.js sets.) */
    body.og-final-on .back-to-top {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none;
    }
}

/* ---------- Section reveal (only with JS, never with reduced motion) ---------- */

.og-js .og-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms ease, transform 600ms ease;
}

.og-js .og-reveal.is-in {
    opacity: 1;
    transform: none;
}

@media print {
    .og-js .og-reveal {
        opacity: 1;
        transform: none;
    }

    .og-dock,
    .og-hero__bars {
        display: none !important;
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
    .og-class {
        grid-template-columns: 2.5rem 8rem minmax(0, 1.4fr) minmax(0, 1fr);
    }

    /* Four playlist cards and the two-column key table need 1200px to breathe. */
    .og-playlists__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .og-controls {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1023px) {
    .og-reel__layout,
    .og-rules__layout,
    .og-real {
        grid-template-columns: minmax(0, 1fr);
    }

    .og-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .og-tab {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .og-tab__name {
        font-size: 1.35rem;
    }

    .og-modes__grid,
    .og-deploy__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .og-hit {
        max-width: none;
    }

    .og-class {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: 0.3rem 1rem;
    }

    .og-class__primary,
    .og-class__trait {
        grid-column: 2;
    }

    .og-real__photo {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767px) {
    .og-section {
        padding: 3.75rem 0;
    }

    .og-reel {
        padding-top: 3.25rem;
    }

    .og-head {
        margin-bottom: 1.75rem;
    }

    .og-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .og-player__bar {
        gap: 0.5rem;
        padding: 0.5rem 0.6rem;
    }

    .og-card {
        padding: 0.4rem 0.7rem 0.5rem 0.8rem;
    }

    .og-card__kicker {
        font-size: 0.62rem;
    }

    .og-card__spots {
        display: none;
    }

    .og-player__corner {
        top: 0.7rem;
        left: 0.7rem;
        font-size: 1rem;
    }

    .og-player__badge {
        top: 0.7rem;
        right: 0.7rem;
    }

    .og-end__eyebrow {
        display: none;
    }

    .og-end__title {
        margin-bottom: 0.5rem;
    }

    .og-rules__grid,
    .og-progress__list,
    .og-keys {
        grid-template-columns: minmax(0, 1fr);
    }

    .og-playlists {
        padding: 1.25rem 1rem 1rem;
    }

    .og-real__copy {
        padding: 3rem var(--container-padding);
    }

    .og-final {
        padding: 5rem 0;
    }

    .og-final__req {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 639px) {
    .og-modes__grid,
    .og-playlists__grid,
    .og-deploy__row {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Horizontal mode cards: still on the left, text on the right. */
    .og-mode {
        display: grid;
        grid-template-columns: 40% minmax(0, 1fr);
    }

    .og-mode__art {
        aspect-ratio: auto;
        min-height: 100%;
    }

    .og-mode__fallback {
        font-size: 1.9rem;
    }

    .og-mode__body {
        padding: 0.8rem 0.9rem 0.9rem;
    }

    .og-main .og-mode__name {
        font-size: 1.3rem;
    }

    .og-mode__line {
        font-size: 0.86rem;
    }

    .og-mode__limit {
        margin-top: 0.5rem;
        font-size: 0.66rem;
    }

    .og-rule {
        padding: 1.1rem 1.15rem;
    }

    .og-real__actions .btn,
    .og-progress__discord {
        width: 100%;
    }

    .og-player__count {
        display: none;
    }
}

/* Phones held sideways: compact hero with PLAY NOW in the first screen, reel beside the tabs. */
@media (max-height: 500px) and (orientation: landscape) {
    .og-hero {
        padding-bottom: 0;
    }

    .og-hero__content {
        margin: 0 auto;
        padding-top: 1.25rem;
        padding-bottom: 1.5rem;
    }

    .og-hero__bars {
        display: none;
    }

    .og-hero__brackets {
        inset: 90px 14px 14px;
    }

    .og-page .og-hero .og-hero__badge {
        margin-bottom: 0.5rem;
    }

    .og-page .og-hero .og-hero__title {
        font-size: clamp(2.5rem, 8vw, 4rem);
    }

    .og-hero__tag {
        margin-top: 0.3rem;
        font-size: 1.35rem;
    }

    .og-hero__lede,
    .og-hero__req {
        display: none;
    }

    .og-hero__actions {
        flex-direction: row;
        justify-content: center;
        max-width: none;
        margin-top: 1rem;
    }

    .og-hero__actions .btn--large {
        padding: 0.8rem 1.6rem;
    }

    /* Out of the flow (top right, under the nav) so it never pushes the live bar off screen. */
    .og-hero__toggle {
        position: absolute;
        top: 92px;
        right: 14px;
        margin: 0;
    }

    .og-live {
        position: static;
        width: 100%;
        margin-top: 1rem;
        transform: none;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        gap: 0.35rem 1rem;
        padding: 0.4rem 1rem;
    }

    .og-reel .og-eyebrow,
    .og-reel .og-lede {
        display: none;
    }

    .og-card__spots {
        display: none;
    }
}

/* Narrow landscape screens have no free corner beside the centred badge: the toggle
   follows the live bar instead of sitting between it and the buttons. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 639px) {
    .og-hero__content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .og-hero__toggle {
        position: static;
        order: 1;
        margin-top: 0.75rem;
    }
}

@media (max-height: 500px) and (orientation: landscape) and (min-width: 600px) {
    .og-reel__layout {
        grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
        gap: 1rem;
    }

    .og-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .og-tab {
        padding: 0.35rem;
    }

    .og-tab__sub {
        display: none;
    }

    .og-tab__name {
        font-size: 1.1rem;
    }

    /* A slim control bar, so the picture and its controls fit under the nav together
       (Watch the Fields lands the player right below it). */
    .og-player__bar {
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .og-hero__bars {
        display: none;
    }

    .og-page .btn--glow,
    .og-live__dot,
    .og-live[data-state="live"] .og-live__dot,
    .og-board__panel[data-state="loading"] .og-board__msg::after {
        animation: none !important;
    }

    .og-hero__video,
    .og-player__video,
    .og-card,
    .og-player__corner,
    .og-mode,
    .og-mode__art img,
    .og-dock {
        transition: none !important;
    }

    .og-mode:hover,
    .og-mode:hover .og-mode__art img,
    .og-card {
        transform: none !important;
    }

    .og-js .og-reveal {
        opacity: 1;
        transform: none;
    }
}