/* ============================================================================
   Microframe Sports — OMNIBOARD LIVE DEMO + OMNI OS TOUR
   ----------------------------------------------------------------------------
   Companion stylesheet to product-lines.css, loaded only on the Omniboards
   pages. Two namespaces:

     .od-  / .odc-  — the interactive rig: a live 16×6 Omniboard face driven by
                      a 1:1 recreation of the iPad Football scoring controller
                      (source of truth: Flutter-Football-Controller repo —
                      Views/Sports/Football.dart, Widgets/OmniControlsSheet.dart,
                      Widgets/OmniBrightnessButton.dart, Widgets/TimeoutPicker.dart).
     .oos-           — the Omni OS (board web editor) walkthrough sections.

   Both the board face (600×240) and the controller (1180×760) are laid out on
   FIXED design-pixel stages and scaled to fit their wrappers with a transform
   (--od-bscale / --od-scale, set by omni-demo.js). All values inside a stage
   are design pixels — do not convert them to responsive units.
   ========================================================================== */

/* ════════════════════════ 1. RIG LAYOUT ═══════════════════════════ */
.od-rig {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 1080px;
    margin: 0 auto;
}

/* ── Board ──────────────────────────────────────────────────────────────── */
/* The board is STICKY: full-bleed while it is the star, then it docks to a
   compact pinned monitor while the visitor works the controller below — the
   score change always lands somewhere they can see it. */
.od-boardwrap {
    position: sticky;
    top: 74px;                 /* clears the fixed marketing navbar */
    z-index: 30;
    width: 100%;
    /* Display only — when the pinned board floats over the controller, taps
       must always fall through to the controls beneath it. */
    pointer-events: none;
}
.od-boardwrap .od-boardstack {
    max-width: 1080px;
    margin-inline: auto;
    transition: max-width 0.35s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.od-boardwrap.is-docked .od-boardstack { max-width: min(440px, 88%); }
.od-boardwrap.is-docked .od-board__meta { display: none; }

/* Bezel: intentionally thin — the screen is the star, not the cabinet. */
.od-board {
    position: relative;
    padding: clamp(5px, 0.8vw, 9px);
    border-radius: 10px;
    background: linear-gradient(180deg, #20242b, #0b0d11 70%);
    border: 1px solid #33383f;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        0 0 70px rgba(70, 200, 90, calc(0.16 * var(--od-glow, 1)));
    transition: box-shadow 0.5s ease;
}
.od-board.is-sponsor { box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 70px rgba(255, 190, 80, calc(0.14 * var(--od-glow, 1))); }
.od-board.is-asleep  { box-shadow: 0 30px 80px rgba(0,0,0,0.55); }

.od-screenbox {
    position: relative;
    aspect-ratio: 600 / 240;
    overflow: hidden;
    border-radius: 4px;
    background: #000;
}
.od-screen {
    position: absolute;
    top: 0; left: 0;
    width: 600px;
    height: 240px;
    transform: scale(var(--od-bscale, 1));
    transform-origin: 0 0;
    /* Brightness control maps the board's 20–100% steps onto the whole screen. */
    filter: brightness(var(--od-bright, 1));
    transition: filter 0.45s ease;
}
.od-board.is-asleep .od-screen { filter: brightness(0); }

/* LED pixelization — present but deliberately quiet so content stays crisp. */
.od-led {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    background-image: radial-gradient(rgba(0, 0, 0, 0.55) 24%, transparent 26%);
    background-size: 3px 3px;
    opacity: 0.28;
}
/* Soft glass sheen + vignette over the panel */
.od-glass {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    background:
        linear-gradient(112deg, rgba(255,255,255,0.07) 0%, transparent 26%),
        radial-gradient(140% 120% at 50% 50%, transparent 62%, rgba(0,0,0,0.28) 100%);
}

/* Meta strip under the board: live chip left, dimensions small at right. */
.od-board__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.25rem 0;
    font-family: var(--pl-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--pl-faint);
}
.od-board__meta .od-live {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--pl-muted);
    font-weight: 600;
    text-transform: uppercase;
}
.od-live i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #43d17c;
    box-shadow: 0 0 8px rgba(67, 209, 124, 0.9);
    animation: od-live-pulse 2s ease-in-out infinite;
}
.od-board.is-asleep ~ * .od-live i,
.od-rig.is-asleep .od-live i { background: #5f7099; box-shadow: none; animation: none; }
@keyframes od-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── Board size bar: horizontal chips directly under the board ── */
.od-sizebar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    margin: 0.7rem auto 0;
    max-width: min(1080px, 100%);
    /* The board wrapper is pointer-events:none (display-only); the size chips
       are the one interactive thing inside it, so they opt back in. */
    pointer-events: auto;
}
.od-sizebar__label {
    font-family: var(--pl-font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pl-muted);
}
.od-sizebar__opts {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.od-sizebtn {
    padding: 0.4rem 0.7rem;
    border-radius: 9px;
    border: 1px solid var(--pl-glass-border);
    background: var(--pl-glass);
    color: var(--pl-text);
    font-family: var(--pl-font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.od-sizebtn:hover { border-color: rgba(var(--pl-accent-rgb), 0.5); color: var(--pl-ink); }
.od-sizebtn.is-active {
    border-color: var(--pl-accent);
    box-shadow: 0 0 0 1px var(--pl-accent), 0 0 14px rgba(var(--pl-accent-rgb), 0.25);
    color: var(--pl-ink);
}
.od-sizebar__unit {
    font-family: var(--pl-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--pl-faint);
    margin-left: 0.15rem;
}
/* When docked, the pinned monitor stays compact — the bar shrinks with it. */
.od-boardwrap.is-docked .od-sizebar { margin-top: 0.45rem; }
.od-boardwrap.is-docked .od-sizebtn { padding: 0.28rem 0.55rem; font-size: 0.7rem; }

/* ── Wireless link between board and controller ─────────────────────────── */
.od-link {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 560px;
    gap: 0.8rem;
    padding: clamp(0.9rem, 2vw, 1.4rem) 0;
}
.od-link__line {
    flex: 1;
    height: 0;
    border-top: 2px dashed rgba(var(--pl-accent-rgb), 0.45);
    animation: none;
}
.od-link__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--pl-glass-border);
    background: var(--pl-glass);
    font-family: var(--pl-font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pl-muted);
    white-space: nowrap;
}
.od-link__chip svg { width: 14px; height: 14px; fill: var(--pl-accent); }
/* Packet dots travel up the link when the controller sends an update. */
.od-link.is-tx .od-link__line { border-top-style: solid; border-image: none; }
.od-link.is-tx .od-link__chip {
    color: var(--pl-ink);
    border-color: rgba(var(--pl-accent-rgb), 0.6);
    box-shadow: 0 0 22px rgba(var(--pl-accent-rgb), 0.25);
}

/* ── Tablet (controller) ────────────────────────────────────────────────── */
/* Capped by viewport height so a laptop keeps the docked board AND most of
   the controller on screen at once. */
.od-tabwrap {
    position: relative;
    width: 100%;
    max-width: min(1080px, calc((100vh - 300px) * 1.45));
    margin-inline: auto;
}
.od-tablet {
    position: relative;
    padding: clamp(10px, 1.6vw, 18px);
    border-radius: clamp(18px, 2.6vw, 30px);
    background: linear-gradient(180deg, #2a2d33, #0e0f12);
    border: 1px solid #3a3e45;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}
.od-tablet__cam {
    position: absolute;
    top: 50%;
    left: clamp(3px, 0.5vw, 6px);
    transform: translateY(-50%);
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #1c2026;
    box-shadow: inset 0 0 2px #000, 0 0 3px rgba(120, 160, 255, 0.35);
}
.od-stagebox {
    position: relative;
    overflow: hidden;
    border-radius: clamp(8px, 1.1vw, 14px);
    background: #000;
}
/* Pan layer: on phones the controller keeps a minimum working size and the
   visitor pans it sideways instead of shrinking into an unusable thumbnail. */
.od-stagepan {
    position: relative;
    width: 100%;
    aspect-ratio: 1180 / 760;
}
@media (max-width: 640px) {
    .od-stagebox { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .od-stagepan { width: 640px; }
}
.od-stage {
    position: absolute;
    top: 0; left: 0;
    width: 1180px;
    height: 760px;
    transform: scale(var(--od-scale, 1));
    transform-origin: 0 0;
}
.od-tabnote {
    margin-top: 0.65rem;
    text-align: center;
    font-family: var(--pl-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    color: #ffffff;
}

/* ════════════════════ 2. BOARD FACE — SCOREBOARD ══════════════════ */
/* 600×240 design stage. Geometry + palette transcribed from the shipping 5×2
   football template (Omni Scoreboard firmware,
   tools/specs/football.py, tools/mockup_palettes.json). Green-neon palette:
   bg #011200→#023F01→#41AF09, accent/glow #65FF01, wells #000F00@80% with a
   2px white stroke, white nameplates #F7F9FC with #0B0F17 ink. */
.od-face { position: absolute; inset: 0; }
/* The REAL baked background plate from the shipping template (copied from the
   firmware's layouts/5x2/Football/assets). Wells, plates, hairlines, wordmark
   and all art are in the image — the demo only composites live text over it,
   exactly as the board's renderer does. */
.od-face__bg {
    position: absolute;
    inset: 0;
    background: #011200 url('/Content/img/omni-demo/football-5x2-bg.png') 0 0 / 600px 240px no-repeat;
}
/* Value well: transparent — the well art is baked into the background. */
.od-box {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #ffffff;
    font-family: var(--pl-font-mono);
    line-height: 1;
}
/* Nameplate text (HOME / AWAY) — dark ink over the baked white pill. */
.od-plate {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b0f17;
    font-family: var(--pl-font-mono);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
}
.od-box__label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #ffffff;
    text-transform: uppercase;
}
.od-box__val {
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 0 9px rgba(255, 255, 255, 0.5);
    font-variant-numeric: tabular-nums;
}
/* value flash when the controller pushes a change (fades back to the baked art) */
@keyframes od-box-flash {
    0%   { box-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 30px rgba(101, 255, 1, 0.85); }
    100% { box-shadow: none; }
}
.od-box.is-flash { animation: od-box-flash 0.55s ease-out; }

/* Placements — design px from the shipping template (600×240) */
.od-b-homename  { left: 37px;  top: 9px;  width: 139px; height: 23px; }
.od-b-awayname  { left: 424px; top: 9px;  width: 139px; height: 23px; }
.od-b-homescore { left: 37px;  top: 36px; width: 139px; height: 77px; }
.od-b-awayscore { left: 424px; top: 36px; width: 139px; height: 77px; }
.od-b-homescore .od-box__val, .od-b-awayscore .od-box__val { font-size: 56px; }
.od-b-clock { left: 209px; top: 44px; width: 182px; height: 66px; }
.od-b-clock .od-box__val { font-size: 46px; letter-spacing: 0.01em; }
/* Four stat cells: (76|190|304|418, 120) 106×73, caption row + hairline + value */
.od-b-qtr    { left: 76px;  top: 120px; width: 106px; height: 73px; }
.od-b-down   { left: 190px; top: 120px; width: 106px; height: 73px; }
.od-b-togo   { left: 304px; top: 120px; width: 106px; height: 73px; }
.od-b-ballon { left: 418px; top: 120px; width: 106px; height: 73px; }
.od-b-qtr .od-box__label, .od-b-down .od-box__label,
.od-b-togo .od-box__label, .od-b-ballon .od-box__label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 26px;      /* caption row; the divider hairline is baked in the art */
    font-size: 14px;
}
.od-b-qtr .od-box__val, .od-b-down .od-box__val,
.od-b-togo .od-box__val, .od-b-ballon .od-box__val {
    display: flex;
    align-items: center;
    flex: 1;
    font-size: 34px;
}



/* (Footer wordmark and flanking hairlines are baked into the background art.) */

/* ═════════════════════ 3. BOARD FACE — SPONSOR ════════════════════ */
/* Recreates the shipped sponsor canvas (sponsor-5x2.png): navy field, gold
   headline, six sponsor cards. */
.od-sponsor {
    position: absolute;
    inset: 0;
    display: none;
    background:
        repeating-linear-gradient(118deg, rgba(255,255,255,0.045) 0 30px, transparent 30px 90px),
        linear-gradient(165deg, #17203a 0%, #101830 55%, #0b1122 100%);
}
.od-screen.mode-sponsor .od-sponsor { display: block; }
.od-sponsor__title {
    position: absolute;
    top: 8px; left: 16px; right: 16px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.18);
    font-family: var(--pl-font-mono);
    font-size: 27px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffd400;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55), 0 0 18px rgba(255, 212, 0, 0.35);
}
.od-sponsor__grid {
    position: absolute;
    top: 58px; left: 14px; right: 14px; bottom: 12px;
    display: grid;
    /* the sponsor canvas spans whatever board width is selected */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-auto-rows: 1fr;
    gap: 10px;
}
.od-sp {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    border-radius: 9px;
    background: #f4f6fb;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}
.od-sp__logo {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: 10px;
    color: #fff;
    font-family: var(--pl-font-mono);
    font-size: 17px;
    font-weight: 700;
}
.od-sp__name {
    font-family: var(--pl-font-body);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #14181f;
    line-height: 1.15;
    text-transform: uppercase;
}
.od-sp__tag {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #4a5162;
    text-transform: uppercase;
}
.od-sp__tag::before { content: ""; width: 5px; height: 5px; border-radius: 2px; background: var(--sp, #4f7bff); }

/* ═════════════════════ 4. BOARD FACE — GAME HYPE ══════════════════ */
.od-hype {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    object-fit: cover;
    background: #000;
}
.od-screen.mode-hype .od-hype { display: block; }
/* Fallback frame if a clip fails to load: bold animated card à la hype-5x2 */
.od-hypefallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background:
        repeating-linear-gradient(118deg, rgba(255,255,255,0.05) 0 30px, transparent 30px 90px),
        linear-gradient(160deg, #4a1210, #200806);
    border: 4px solid #ffd76a;
}
.od-screen.mode-hypefallback .od-hypefallback { display: flex; }
.od-hypefallback span {
    font-family: var(--pl-font-mono);
    font-size: 64px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffd76a;
    text-shadow: 0 5px 0 rgba(0,0,0,0.5);
    animation: od-hype-slam 0.8s ease-in-out infinite alternate;
}
@keyframes od-hype-slam { from { transform: scale(1); } to { transform: scale(1.08); } }

.od-screen.mode-sponsor .od-face,
.od-screen.mode-hype .od-face,
.od-screen.mode-hypefallback .od-face { visibility: hidden; }

/* ════════════════════ 5. CONTROLLER (.odc) ════════════════════════ */
/* 1180×760 design stage. Colors and geometry from Football.dart:
   gradient #797979→#487436, white cards with a 40px chopped top-left corner +
   35px radius, dark #1D1D1D game-clock card, #ECECEC buttons r13. */
.odc {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #797979 0%, #487436 100%);
    font-family: var(--pl-font-body);
    -webkit-user-select: none;
    user-select: none;
}
.odc, .odc * { box-sizing: border-box; }
/* Zero-specificity reset (:where) so every .odc-* button rule below wins. */
.odc :where(button) { font-family: inherit; border: 0; background: none; padding: 0; cursor: pointer; color: inherit; }
.odc :where(button):active { transform: translateY(1px); }

/* ── App bar (AppBar black26, h45, extendBodyBehindAppBar) ── */
.odc__bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    height: 45px;
    padding: 0 10px 0 8px;
    background: rgba(0, 0, 0, 0.26);
    color: #fff;
}
.odc__menu { display: flex; align-items: center; padding: 6px; }
.odc__menu svg { width: 26px; height: 26px; fill: #fff; }
.odc__bartitle {
    margin-left: 4px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.92);
    text-transform: uppercase;
}
.odc__baractions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}
.odc__wifi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 140px;
    height: 35px;
    padding: 0 8px;
    border: 1px solid #fff;
    border-radius: 5px;
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
}
.odc__wifi svg { width: 17px; height: 17px; fill: #fff; }
.odc__abtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    min-width: 80px;
    padding: 0 8px;
    border-radius: 5px;
    background: #fff;
    color: #000;
    font-size: 15px;
    font-weight: 500;
}
.odc__abtn svg { width: 19px; height: 19px; fill: currentColor; }
.odc__abtn--red  { background: #f44336; color: #fff; }
.odc__abtn--blue { background: #2196f3; color: #fff; }
.odc__abtn--omni { font-weight: 700; font-size: 14px; }
.odc__abtn--omni.is-sponsor { background: #2196f3; color: #fff; }
.odc__field {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 50px;
    height: 36px;
    border-radius: 5px;
    background: #fff;
    color: #000;
    font-size: 18px;
    font-weight: 700;
}
.odc__field svg { width: 16px; height: 16px; fill: #000; }
.odc__gear { display: flex; padding: 2px; }
.odc__gear svg { width: 30px; height: 30px; fill: #fff; }

/* ── Layout rows (Padding l20 r20 b30 t80; row flex 8 / gap 7 / flex 7) ── */
.odc__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 80px 20px 30px;
}
.odc__row1 { flex: 8; display: flex; gap: 7px; min-height: 0; }
.odc__row2 { flex: 7; display: flex; gap: 7px; min-height: 0; }

/* Chopped-corner card: border-radius ∩ polygon reproduces Flutter's
   ChoppedCornerClipper over a rounded container. */
.odc-card {
    position: relative;
    background: #fff;
    border-radius: 0 35px 35px 35px;
    clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 40px);
}

/* ── Team cards (flex 4 each) ── */
.odc-team { flex: 4; display: flex; flex-direction: column; padding: 15px 0 0 30px; min-width: 0; }
.odc-team__name {
    font-family: var(--pl-font-mono);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #1d1d1d;
    line-height: 1.05;
    white-space: nowrap;
}
/* TimeoutPicker chip (Widgets/TimeoutPicker.dart) */
.odc-topick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    margin: 10px 0 8px;
    padding: 0 8px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(33, 150, 243, 0.7);
    align-self: flex-start;
}
.odc-topick__label { font-size: 12px; font-weight: 600; color: #fff; }
.odc-topick__win { display: flex; }
.odc-topick__num {
    width: 30px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
    font-variant-numeric: tabular-nums;
}
.odc-topick__num.is-sel { color: #2196f3; font-size: 18px; font-weight: 700; }
.odc-topick__num:not(.is-sel):not(:empty) { cursor: pointer; }

.odc-team__scorearea { position: relative; flex: 1; min-height: 0; margin-right: 12px; }
.odc-team__score {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pl-font-mono);
    font-size: 108px;
    font-weight: 700;
    color: #1d1d1d;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.odc-team__btns {
    position: absolute;
    inset: 0 0 6px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: repeat(4, 1fr);
    align-items: center;
}
.odc-team__btns .odc-sbtn:nth-child(odd)  { justify-self: start; margin-left: 4px; }
.odc-team__btns .odc-sbtn:nth-child(even) { justify-self: end; grid-column: 3; margin-right: 4px; }
.odc-sbtn {
    width: 60px;
    height: 45px;
    border-radius: 13px;
    background: #ececec;
    color: #191919;
    font-size: 18px;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.odc-sbtn:active { background: #dedede; }

/* ── Game clock card (flex 8, dark) ── */
.odc-clock {
    flex: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #1d1d1d;
    padding: 12px 20px 20px;
    min-width: 0;
}
.odc-clock__title { color: #fff; font-size: 25px; font-weight: 600; }
.odc-clock__dial {
    position: relative;
    width: 188px;
    height: 188px;
    margin: 5px auto 8px;
    flex: none;
}
.odc-clock__dial svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.odc-clock__dial .odc-ring-base { fill: none; stroke: #fff; stroke-width: 19; }
.odc-clock__dial .odc-ring-prog { fill: none; stroke: #1d1d1d; stroke-width: 21; stroke-linecap: butt; }
.odc-clock__time {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.odc-clock__ctrl { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: auto; }
.odc-clock__reset {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 118px;
    height: 62px;
    border: 2px solid #fff;
    border-radius: 14px;
}
.odc-clock__reset svg { width: 42px; height: 42px; fill: #fff; }
.odc-clock__start {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 66px;
    border-radius: 14px;
    background: #fff;
}
.odc-clock__start svg { width: 50px; height: 50px; fill: #1d1d1d; }

/* ── Mini cards column (Quarter / Timeout / Play) ── */
.odc__minis { flex: 4; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.odc-mini {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 6px 10px;
    min-height: 0;
}
.odc-mini__title { font-size: 19px; font-weight: 600; color: #191919; }
.odc-mini__row {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
}
.odc-qbtn {
    width: 50px;
    height: 45px;
    border-radius: 13px;
    background: #ececec;
    color: #1d1d1d;
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
}
.odc-mini__val { font-size: 38px; font-weight: 500; color: #191919; font-variant-numeric: tabular-nums; }
.odc-mini__time { font-size: 29px; font-weight: 500; color: #1d1d1d; font-variant-numeric: tabular-nums; cursor: pointer; }
.odc-mini--play .odc-mini__time { font-size: 34px; }
.odc-ibtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 45px;
    border-radius: 13px;
}
.odc-ibtn--ghost { border: 2px solid #1d1d1d; }
.odc-ibtn--ghost svg { width: 34px; height: 34px; fill: #1d1d1d; }
.odc-ibtn--dark { background: #191919; }
.odc-ibtn--dark svg { width: 32px; height: 32px; fill: #fff; }

/* Play-clock reload overlay (A / B) */
.odc-mini--play { position: relative; }
.odc-reload {
    position: absolute;
    inset: 5px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 30px;
    background: #fff;
    z-index: 2;
}
.odc-reload.is-open { display: flex; }
.odc-reload__label { font-size: 15px; color: #191919; }
.odc-reload__btns { display: flex; gap: 18px; }
.odc-reload__btns button {
    width: 84px;
    height: 40px;
    border: 1px solid #8a8a8a;
    border-radius: 20px;
    font-size: 16px;
    color: #000;
    background: #fff;
}

/* ── Field (white24 container, r24, 1px white border) ── */
.odc-field {
    position: relative;
    flex: 12;
    margin: 0 10px 10px;
    border-radius: 24px;
    border: 1px solid #fff;
    background: rgba(255, 255, 255, 0.24);
    overflow: hidden;
    min-width: 0;
}
.odc-field__scroll {
    position: absolute;
    inset: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    cursor: grab;
    display: flex;
    align-items: flex-end;
}
.odc-field__scroll::-webkit-scrollbar { display: none; }
.odc-field__scroll.is-drag { cursor: grabbing; scroll-behavior: auto; }
.odc-field__scroll svg { flex: none; display: block; }
/* Fixed center ball marker (yellow line + ball), exactly the app's overlay */
.odc-field__marker {
    position: absolute;
    left: 50%;
    bottom: 55px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}
.odc-field__marker svg { width: 30px; height: 30px; margin-bottom: 2px; }
.odc-field__marker i { display: block; width: 5px; height: 120px; background: #ffeb3b; }
/* HUD row along the top of the field */
.odc-field__hud {
    position: absolute;
    top: 10px; left: 0; right: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    z-index: 3;
    color: #101010;
}
.odc-hud__group { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.odc-hud__label { font-size: 17px; font-weight: 700; }
.odc-hud__stepper { display: flex; align-items: center; gap: 15px; }
.odc-hud__stepper button {
    width: 35px;
    height: 30px;
    border-radius: 5px;
    background: #191919;
    color: #fff;
    font-size: 20px;
    line-height: 1;
}
.odc-hud__num { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Toggles (Poss / Set Ball / Direction) */
.odc-hud__toggles { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.odc-hud__togglerow { display: flex; align-items: center; gap: 14px; }
.odc-toggle {
    position: relative;
    width: 100px;
    height: 50px;
    border-radius: 15px;
    background: #000;
    flex: none;
}
.odc-toggle--grey { background: #9e9e9e; }
.odc-toggle__knob {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 40px;
    height: 40px;
    border-radius: 15px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    transition: left 0.18s ease, background 0.18s ease;
}
.odc-toggle.is-right .odc-toggle__knob { left: 55px; }
.odc-toggle__knob svg { width: 18px; height: 18px; fill: #000; }
.odc-toggle--ball .odc-toggle__knob.is-active { background: #ffeb3b; }

/* ═════════════════ 6. SHEET / DIALOGS / TOAST (in-stage) ══════════ */
.odc-scrim {
    position: absolute;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
}
.odc-scrim.is-open { opacity: 1; pointer-events: auto; }

/* Omniboard controls sheet (OmniControlsSheet.dart, tablet metrics) */
.odc-sheet {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 41;
    width: 560px;
    max-height: 82%;
    transform: translate(-50%, 105%);
    border-radius: 16px 16px 0 0;
    background: #1d1d1d;
    overflow-y: auto;
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.odc-sheet.is-open { transform: translate(-50%, 0); }
.odc-sheet__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px 8px 24px;
    border-bottom: 1px solid #3a3a3a;
}
.odc-sheet__head svg { width: 24px; height: 24px; fill: #fff; }
.odc-sheet__title { color: #fff; font-size: 24px; font-weight: 700; }
.odc-sheet__close {
    margin-left: auto;
    padding: 8px 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
}
.odc-sheet__label {
    padding: 14px 24px 6px;
    color: rgba(255, 255, 255, 0.54);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}
.odc-sheet__row { display: flex; gap: 10px; padding: 0 24px; }
.odc-choice {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 56px;
    border-radius: 8px;
    background: #fff;
    color: #000;
    font-size: 16px;
    font-weight: 600;
}
.odc-choice svg { width: 22px; height: 22px; fill: currentColor; }
.odc-choice.is-sel { background: #2196f3; color: #fff; }
/* Brightness pill (OmniBrightnessButton.dart) */
.odc-bright {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 56px;
    border-radius: 5px;
    background: #fff;
    color: #000;
    font-size: 15px;
    font-weight: 700;
}
.odc-bright svg { width: 22px; height: 22px; fill: #000; }
.odc-bright .odc-bright__caret { width: 20px; height: 20px; fill: rgba(0, 0, 0, 0.54); }
/* Hype clip rows */
.odc-clip {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 10px 24px;
    text-align: left;
}
.odc-clip:hover { background: rgba(255, 255, 255, 0.06); }
.odc-clip svg { width: 34px; height: 34px; fill: #2196f3; flex: none; }
.odc-clip span { color: #fff; font-size: 19px; font-weight: 600; }
.odc-clip small { margin-left: auto; color: rgba(255,255,255,0.38); font-size: 12px; }
.odc-sheet__foot { height: 12px; }

/* Material-style dialog (brightness picker / timer edit / info) */
.odc-dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 42;
    min-width: 320px;
    max-width: 420px;
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0;
    pointer-events: none;
    border-radius: 28px;
    background: #fff;
    padding: 20px 22px 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    transition: transform 0.18s ease, opacity 0.18s ease;
}
.odc-dialog.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
.odc-dialog__title { font-size: 20px; font-weight: 600; color: #1c1c1c; margin: 0 0 12px; }
.odc-dialog__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 6px;
    font-size: 17px;
    color: #1c1c1c;
    text-align: left;
    border-radius: 10px;
}
.odc-dialog__opt:hover { background: rgba(0, 0, 0, 0.05); }
.odc-dialog__opt i {
    width: 18px; height: 18px;
    border: 2px solid rgba(0, 0, 0, 0.54);
    border-radius: 50%;
    flex: none;
    position: relative;
}
.odc-dialog__opt.is-sel i { border-color: #2196f3; }
.odc-dialog__opt.is-sel i::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #2196f3;
}
/* timer edit steppers */
.odc-dialog__pickers { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 0 10px; }
.odc-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.odc-pick button {
    width: 64px; height: 38px;
    border-radius: 10px;
    background: #ececec;
    font-size: 20px;
    color: #1d1d1d;
}
.odc-pick output {
    font-size: 40px;
    font-weight: 600;
    color: #1d1d1d;
    font-variant-numeric: tabular-nums;
    min-width: 74px;
    text-align: center;
}
.odc-pick small { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a8a; }
.odc-dialog__sep { font-size: 40px; font-weight: 600; color: #1d1d1d; padding-top: 18px; }
.odc-dialog__actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 6px; }
.odc-dialog__actions button {
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: #2166c7;
}
.odc-dialog__actions button:hover { background: rgba(33, 102, 199, 0.08); }

/* Snackbar toast */
.odc-toast {
    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: 45;
    transform: translate(-50%, 16px);
    padding: 12px 18px;
    border-radius: 8px;
    background: #2c2c2c;
    color: #fff;
    font-size: 15px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    white-space: nowrap;
}
.odc-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ═══════════════════════ 7. GUIDED TOUR ═══════════════════════════ */
/* Spotlight lives in stage coordinates so it scales with the controller. */
.od-tour { position: absolute; inset: 0; z-index: 60; pointer-events: none; }
.od-tour[hidden] { display: none; }
.od-tour__hole {
    position: absolute;
    border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(4, 8, 18, 0.62);
    outline: 3px solid var(--pl-accent, #ffb547);
    outline-offset: 2px;
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.25, 1);
    animation: od-hole-breathe 1.8s ease-in-out infinite;
}
@keyframes od-hole-breathe {
    0%, 100% { outline-offset: 2px; }
    50%      { outline-offset: 6px; }
}
.od-tour__card {
    position: absolute;
    z-index: 65;
    width: 320px;
    padding: 16px 18px 14px;
    border-radius: 14px;
    background: #10182e;
    border: 1px solid rgba(255, 181, 71, 0.5);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    color: #e8eeff;
    /* The card must NEVER block the control it is pointing at — only its own
       buttons take clicks; everything else falls through to the controller. */
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.od-tour__card .od-tour__skip,
.od-tour__card .od-tour__next { pointer-events: auto; }
.od-tour__step {
    font-family: var(--pl-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffb547;
}
.od-tour__title { font-size: 18px; font-weight: 700; margin: 5px 0 4px; color: #fff; }
.od-tour__body { font-size: 13.5px; line-height: 1.5; color: #b9c6e4; }
.od-tour__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.od-tour__skip { font-size: 12.5px; color: #8397be; text-decoration: underline; cursor: pointer; background: none; border: 0; }
.od-tour__next {
    padding: 8px 14px;
    border-radius: 999px;
    background: #ffb547;
    color: #221600;
    font-size: 13px;
    font-weight: 700;
    border: 0;
    cursor: pointer;
}
/* Free-play banner shown when the tour completes */
.od-freeplay {
    display: none;
    align-items: center;
    gap: clamp(1rem, 3vw, 1.75rem);
    margin: 1.1rem auto 0;
    max-width: 720px;
    padding: 0.95rem 1.35rem;
    border-radius: 16px;
    border: 1px solid rgba(var(--pl-accent-rgb), 0.4);
    background: var(--pl-glass);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--pl-text);
}
.od-freeplay.is-show { display: flex; }
.od-freeplay__text { flex: 1; min-width: 0; }
.od-freeplay b { display: block; margin-bottom: 0.15rem; color: var(--pl-ink); }
.od-freeplay button {
    flex: none;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    border: 1px solid var(--pl-accent);
    background: rgba(var(--pl-accent-rgb), 0.12);
    color: var(--pl-ink);
    font-size: 0.78rem;
    font-family: var(--pl-font-mono);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.od-freeplay button:hover { background: rgba(var(--pl-accent-rgb), 0.22); }
@media (max-width: 560px) {
    .od-freeplay { flex-direction: column; align-items: flex-start; }
    .od-freeplay button { align-self: stretch; text-align: center; }
}

/* ═══════════════ 8. OMNI OS WALKTHROUGH (.oos-) ═══════════════════ */
/* Three console panels: Edit → Build → Upload. Reuses .pl-console chrome. */
.oos-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    font-family: var(--pl-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pl-muted);
}
.oos-flow__node {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--pl-glass-border);
    background: var(--pl-glass);
}
.oos-flow__node svg { width: 15px; height: 15px; fill: var(--pl-accent); }
.oos-flow__arrow { color: var(--pl-faint); }

/* Steps stack vertically: text block above, full-width console below,
   so the mock UI gets the whole container width and stays legible. */
.oos-step { display: block; }
.oos-step + .oos-step { margin-top: clamp(3.5rem, 7vw, 6rem); }
.oos-step__text { max-width: 780px; }
.oos-step .pl-console { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.oos-step__num {
    font-family: var(--pl-font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--pl-accent);
    text-transform: uppercase;
}
.oos-step__title {
    font-family: var(--pl-font-display);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    color: var(--pl-ink);
    line-height: 1.12;
    margin: 0.45rem 0 0.7rem;
}
.oos-step__body { color: var(--pl-muted); font-size: 0.98rem; line-height: 1.65; }
.oos-tips { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.oos-tips li {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    font-size: 0.88rem;
    color: var(--pl-text);
    line-height: 1.5;
}
.oos-tips li::before {
    content: "→";
    color: var(--pl-accent);
    font-family: var(--pl-font-mono);
    font-weight: 700;
    flex: none;
}

/* ── Mini Omni OS mock screens inside .pl-console__body ──
   Recreates the real Omni OS shell: perf banner → app header → work area.
   Palette: bg #0a0e18 · panel #111c31 · input #0b1322 · border rgba(120,160,255,.12)
   text #e8eefc · dim #8a97b4 · accent #2f6dff · gold #ffd400 · green #4ee39a · danger #ef4d56 */
.oos-ui {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: clamp(0.9rem, 1.8vw, 1.4rem);
    background: #0a0e18;
    color: #e8eefc;
}
/* amber performance banner strip */
.oos-perf {
    padding: 5px 12px;
    border-radius: 6px;
    text-align: center;
    background: rgba(240, 163, 62, 0.12);
    border: 1px solid rgba(240, 163, 62, 0.38);
    color: #f0a33e;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}
/* app header row: logo · brand · status | actions · mode toggle · help */
.oos-appbar {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.oos-appbar__logo {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background: #2f6dff;
    flex: none;
}
.oos-appbar__brand { font-size: 0.95rem; font-weight: 800; color: #e8eefc; line-height: 1; }
.oos-appbar__sub { font-size: 0.72rem; color: #8a97b4; }
.oos-appbar__status { font-size: 0.72rem; font-weight: 600; color: #2f6dff; }
.oos-appbar__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
/* pill buttons */
.oos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 13px;
    border-radius: 999px;
    background: #111c31;
    border: 1px solid rgba(120, 160, 255, 0.16);
    color: #e8eefc;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.oos-btn--primary { background: #2f6dff; border-color: #2f6dff; color: #fff; }
/* Full-width buttons in narrow blades must wrap long labels, never widen the blade */
.oos-btn--block { white-space: normal; text-align: center; }
.oos-btn--danger { background: rgba(239, 77, 86, 0.08); border-color: rgba(239, 77, 86, 0.45); color: #ef4d56; }
.oos-btn--dim { color: #8a97b4; }
.oos-btn--block { width: 100%; }
.oos-btn--sm { padding: 3px 10px; font-size: 0.66rem; }
/* segmented mode toggle: Scoreboard | Sponsor | Game Hype → */
.oos-seg {
    display: inline-flex;
    padding: 2px;
    border-radius: 999px;
    background: #0b1322;
    border: 1px solid rgba(120, 160, 255, 0.16);
}
.oos-seg__opt {
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #8a97b4;
    white-space: nowrap;
}
.oos-seg__opt.is-on { background: #2f6dff; color: #fff; }
/* per-page work-area grids */
.oos-work { display: grid; gap: 12px; align-items: stretch; flex: 1; min-height: 400px; }
.oos-work--editor { grid-template-columns: 190px minmax(0, 1fr) 230px; }
.oos-work--sponsor { grid-template-columns: minmax(0, 1fr) 230px; }
/* hype page: one full-width panel column (mirrors the real hype.html stage) */
.oos-work--hype { grid-template-columns: minmax(0, 1fr); }
.oos-blade { display: grid; gap: 12px; align-content: start; min-width: 0; }
.oos-blade > * { min-width: 0; }
/* card panel (blades, forms, lists) */
.oos-panel {
    display: grid;
    gap: 9px;
    align-content: start;
    padding: 14px;
    border-radius: 10px;
    background: #111c31;
    border: 1px solid rgba(120, 160, 255, 0.12);
}
.oos-panel__hd {
    font-family: var(--pl-font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #8a97b4;
}
.oos-chip {
    padding: 5px 10px;
    border-radius: 6px;
    background: #0b1322;
    border: 1px solid rgba(120, 160, 255, 0.12);
    color: #8a97b4;
    font-size: 0.7rem;
    font-weight: 600;
}
.oos-tplrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.03);
    color: #8a97b4;
    font-size: 0.72rem;
    font-weight: 600;
}
.oos-tplrow.is-active { background: #2f6dff; color: #fff; }
/* sport-category header inside the template list (mirrors .tmpl-cat) */
.oos-cat {
    margin-top: 4px;
    font-family: var(--pl-font-mono);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5f6b86;
}
/* small green LIVE pill on the template currently on the display */
.oos-live {
    padding: 1px 8px;
    border-radius: 999px;
    background: #4ee39a;
    color: #04160d;
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.6;
}
/* center stage: dark canvas + row under it */
.oos-stage { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.oos-stage__canvas {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.2rem, 2.5vw, 2rem);
    border-radius: 10px;
    background: #060a13;
    border: 1px solid rgba(120, 160, 255, 0.12);
}
/* real template render inside the canvas, with a selection overlay */
.oos-shot {
    position: relative;
    width: 100%;
}
.oos-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}
/* blue selection rectangle + corner handles over an element on the render */
.oos-selrect {
    position: absolute;
    border: 1.5px solid #2f6dff;
    border-radius: 3px;
}
.oos-selrect i {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #2f6dff;
    border-radius: 2px;
}
.oos-selrect i:nth-child(1) { top: -5px; left: -5px; }
.oos-selrect i:nth-child(2) { top: -5px; right: -5px; }
.oos-selrect i:nth-child(3) { bottom: -5px; left: -5px; }
.oos-selrect i:nth-child(4) { bottom: -5px; right: -5px; }
/* gold field-binding badge (plain-English binding names, e.g. "Home Score") */
.oos-fbadge {
    position: absolute;
    top: -19px;
    left: -2px;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.72);
    border: 1px solid rgba(255, 212, 0, 0.55);
    color: #ffd400;
    font-family: var(--pl-font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.05em;
    line-height: 1.4;
    white-space: nowrap;
}
/* element palette under the editor canvas */
.oos-palette {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.oos-palette__label { font-size: 0.7rem; color: #8a97b4; }
.oos-palette__btn {
    padding: 4px 12px;
    border-radius: 6px;
    background: #111c31;
    border: 1px solid rgba(120, 160, 255, 0.14);
    color: #e8eefc;
    font-size: 0.7rem;
    font-weight: 600;
}
/* labelled input rows inside panels */
.oos-field { display: grid; gap: 4px; }
.oos-field__label { font-size: 0.66rem; color: #8a97b4; }
.oos-field__value {
    padding: 5px 10px;
    border-radius: 6px;
    background: #0b1322;
    border: 1px solid rgba(120, 160, 255, 0.12);
    color: #e8eefc;
    font-size: 0.72rem;
    font-weight: 600;
}
.oos-field__value--dim { color: #8a97b4; font-weight: 500; }
.oos-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.oos-swatch {
    display: block;
    height: 18px;
    border-radius: 5px;
    border: 1px solid rgba(120, 160, 255, 0.18);
}
.oos-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.66rem;
    color: #8a97b4;
}
.oos-note { margin: 0; font-size: 0.66rem; line-height: 1.45; color: #8a97b4; }
/* green mono status/progress readout (mirrors the real editor's .live box) */
.oos-liveline {
    margin: 0;
    padding: 7px 9px;
    border-radius: 6px;
    min-width: 0;
    overflow-wrap: anywhere;
    background: rgba(78, 227, 154, 0.06);
    border: 1px solid rgba(78, 227, 154, 0.14);
    color: #4ee39a;
    font-family: var(--pl-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.03em;
    line-height: 1.5;
}
/* X / Y / W / H mini-inputs row (Selected image group) */
.oos-xywh { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.oos-xywh .oos-field__value { padding: 4px 6px; text-align: center; }
/* blue-bordered action row under the sponsor canvas */
.oos-actionrow {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(47, 109, 255, 0.06);
    border: 1px solid rgba(47, 109, 255, 0.5);
}
.oos-actionrow__hint { font-size: 0.68rem; color: #8a97b4; }
.oos-previewbox {
    aspect-ratio: 5 / 2;
    overflow: hidden;
    border-radius: 6px;
    background: #0d1a14;
    border: 1px solid rgba(120, 160, 255, 0.12);
}
.oos-previewbox img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}
/* hype clip list (right panel of the Game Hype mock) */
.oos-upload { display: grid; gap: 10px; }
.oos-upload__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    background: #0b1322;
    border: 1px solid rgba(120, 160, 255, 0.12);
    font-size: 0.74rem;
    color: #e8eefc;
}
.oos-upload__name { font-weight: 700; white-space: nowrap; }
.oos-upload__meta {
    flex: 1;
    font-family: var(--pl-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: #8a97b4;
    white-space: nowrap;
}

/* ═══════════════════════ 9. RESPONSIVE ════════════════════════════ */
@media (max-width: 900px) {
    .oos-work { min-height: 0; }
    .oos-work--editor, .oos-work--sponsor, .oos-work--hype { grid-template-columns: 1fr; }
    .oos-appbar__right { margin-left: 0; width: 100%; justify-content: flex-start; }
}
@media (max-width: 640px) {
    .od-link { max-width: 88%; }
    .od-link__chip { font-size: 0.58rem; }
    .odc { /* tour cards may hug edges on tiny screens; stage scale handles the rest */ }
}

/* ═══════════ 10. MULTI-SPORT RIG: RAILS, TRUSS, PERSON, ENGINE ═══════════ */
/* Sport rail (left of the iPad) + board-size rail (right), truss-mounted
   school sign above the Omniboard, 6-ft reference figure, and the generic
   board-face renderer that draws any sport/size template from OD_LAYOUTS. */

/* ── School marquee: cut-out lettering on an open steel truss, mounted flush
   on the cabinet and spanning exactly the board width (real-install style). ── */
.od-boardstack { container-type: inline-size; }
/* Height + font-size are set by JS: a constant real-world 3 ft against the
   board's 6.3 ft LED height, flush edge-to-edge with the cabinet. */
.od-marquee {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    min-height: 30px;
    margin: 0;
    padding: 0 1.8%;
    box-sizing: border-box;
    border-top: max(2px, 0.045em) solid #343b45;
    border-bottom: max(2px, 0.055em) solid #343b45;
    background:
        repeating-linear-gradient(58deg, transparent 0 0.92em, rgba(52, 59, 69, 0.72) 0.92em 1.0em),
        repeating-linear-gradient(-58deg, transparent 0 0.92em, rgba(52, 59, 69, 0.72) 0.92em 1.0em);
    overflow: visible;
}
.od-marquee__word {
    font-family: var(--pl-font-mono);
    font-weight: 700;
    font-size: 1em;
    letter-spacing: 0.06em;
    line-height: 1;
    color: #dde3ec;
    -webkit-text-stroke: max(1px, 0.026em) #1c2748;
    text-shadow: 0 0.05em 0.04em rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}
.od-marquee__logo {
    font-size: 0.88em;
    line-height: 1;
    color: #ffd06a;
    -webkit-text-stroke: max(1px, 0.022em) #1c2748;
    text-shadow: 0 0.05em 0.04em rgba(0, 0, 0, 0.5);
}
.od-boardrow {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    width: 100%;
}
.od-boardrow .od-boardstack { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* manufacturer nameplate on the bezel */
.od-board__badge {
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translate(-50%, 0);
    padding: 1px 10px 2px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #3a4048, #23272d);
    border: 1px solid #4a515a;
    border-bottom: 0;
    font-family: var(--pl-font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.34em;
    color: #cfd8e6;
    text-indent: 0.34em;
    white-space: nowrap;
    z-index: 3;
}
/* 6-ft reference figure — height set by JS: screen height x (6.00 / 6.2992) */
.od-person {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding-bottom: 2px;
}
.od-person svg { display: block; width: auto; fill: #46536e; }
.od-person span {
    font-family: var(--pl-font-mono);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--pl-faint);
    white-space: nowrap;
}
.od-boardwrap.is-docked .od-marquee,
.od-boardwrap.is-docked .od-person { display: none; }

/* ── Tab zone: sport rail | iPad | size rail ── */
.od-tabzone {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: clamp(10px, 1.4vw, 18px);
    width: 100%;
}
.od-tabzone .od-tabwrap { flex: 1; min-width: 0; }
.od-rail {
    flex: none;
    width: 104px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* JS pins each rail to the tablet's exact top/height (desktop) so the
       seven buttons align with the iPad and with the opposite rail. */
    align-self: flex-start;
}
.od-rail .od-railbtn { flex: 1 1 0; min-height: 0; }
.od-rail__label {
    font-family: var(--pl-font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pl-muted);
    text-align: center;
    margin-bottom: 2px;
}
.od-railbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 4px 9px;
    border-radius: 14px;
    border: 1px solid var(--pl-glass-border);
    background: var(--pl-glass);
    color: var(--pl-text);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.od-railbtn i { font-size: 1.15rem; color: var(--pl-muted); transition: color 0.15s; }
.od-railbtn span {
    font-family: var(--pl-font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.od-railbtn b {
    font-family: var(--pl-font-mono);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.od-railbtn small {
    font-family: var(--pl-font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    color: var(--pl-faint);
}
.od-railbtn:hover { border-color: rgba(var(--pl-accent-rgb), 0.5); color: var(--pl-ink); }
.od-railbtn.is-active {
    border-color: var(--pl-accent);
    box-shadow: 0 0 0 1px var(--pl-accent), 0 0 18px rgba(var(--pl-accent-rgb), 0.25);
    color: var(--pl-ink);
}
.od-railbtn.is-active i { color: var(--pl-accent); }
/* iPad identity chip above the tablet */
.od-devicechip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 auto 8px;
    padding: 0.32rem 0.9rem;
    width: fit-content;
    border-radius: 999px;
    border: 1px solid var(--pl-glass-border);
    background: var(--pl-glass);
    font-family: var(--pl-font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pl-muted);
}
.od-devicechip b { color: var(--pl-ink); letter-spacing: 0.12em; }
@media (max-width: 900px) {
    .od-tabzone { flex-wrap: wrap; }
    .od-rail { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .od-rail__label { width: 100%; }
    .od-railbtn { flex-direction: row; padding: 8px 10px; gap: 7px; }
    .od-rail--sizes { order: 3; }
}

/* ── Controller page host ── */
.odc { background: #33383f; } /* neutral behind page transitions */
/* Layout-neutral: each page owns its own flex direction/gaps (football's
   .odc__body declares column+7px; sport modules declare their own rows). */
.odc-page {
    position: absolute;
    inset: 0;
    display: flex;
    padding: 80px 20px 30px;
}
.odc-page[hidden] { display: none; }
.odc-page--football { background: linear-gradient(180deg, #797979 0%, #487436 100%); }
/* the app's diagonal-dash texture pages (flat #757575 base) */
.odc-bg-tex { background: #757575; }
.odc-bg-tex::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(45deg,
        rgba(0,0,0,0.10) 0 10px, transparent 10px 26px,
        rgba(0,0,0,0.10) 26px 40px, transparent 40px 74px);
    -webkit-mask-image: repeating-linear-gradient(-45deg, #000 0 90px, transparent 90px 160px);
    mask-image: repeating-linear-gradient(-45deg, #000 0 90px, transparent 90px 160px);
}
.odc-page > * { position: relative; }
/* shared card modifiers + panels for sport pages */
.odc-card--dark { background: #191919; }
.odc-card--black { background: #000; }
.odc-teampanel {
    position: relative;
    background: rgba(128, 128, 128, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 35px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.odc-namechip {
    align-self: flex-start;
    margin: 15px 0 0 30px;
    padding: 2px 10px;
    border-radius: 10px;
    background: #fff;
    font-family: var(--pl-font-mono);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: #1d1d1d;
    line-height: 1.15;
    white-space: nowrap;
}
.odc-bigscore {
    font-family: var(--pl-font-mono);
    font-size: 110px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* ── Generic board-face components (engine-rendered) ── */
.odf {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--pl-font-mono);
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}
.odf.is-b { font-weight: 700; }
.odf.is-flash { animation: od-box-flash 0.55s ease-out; border-radius: 8px; }
.odf--dots { gap: 6px; }
.odf--dots i { border-radius: 50%; flex: none; }
.odf--dots i.is-pill { border-radius: 999px; }
.odf--progress { justify-content: flex-start; border-radius: 999px; overflow: hidden; }
.odf--progress i { display: block; height: 100%; }

/* board size caption pieces */
.od-spec b { color: var(--pl-muted); }

/* Physical scale across sizes: constant on-screen height, width per cabinet
   count (set by buildFace as --od-boardw). Docked keeps its own cap. */
.od-boardwrap:not(.is-docked) .od-boardrow .od-boardstack {
    flex: none;
    width: 100%;
    max-width: var(--od-boardw, 1080px);
}

/* ═══════════ 11. ATTENTION PULSE + MOBILE OMNI CONTROLS + MOBILE OMNI OS ═══════════ */

/* Desktop only: the Omni button pulses a red ring to draw the eye until the
   visitor opens it once (JS adds .is-tapped to stop the pulse). */
@media (min-width: 901px) {
    .odc__abtn--omni {
        border: 2px solid #f44336;
        animation: odc-omni-pulse 1s ease-in-out infinite;
    }
    .odc__abtn--omni.is-tapped {
        animation: none;
        border-color: transparent;
    }
    .odc__abtn--omni.is-sponsor { border-color: #f44336; }
    .od-mobileomni { display: none; }   /* desktop uses the in-iPad sheet */
}
@keyframes odc-omni-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.6); }
    50%      { box-shadow: 0 0 0 7px rgba(244, 67, 54, 0); }
}

/* ── Mobile (≤900px): no iPad, no scoring pages — just the Omni controls box
      so a phone visitor can drive the board (sponsor / blank / brightness /
      hype) without the unusable scaled-down controller. ── */
.od-mobileomni { display: none; }
@media (max-width: 900px) {
    .od-tabzone { display: none; }          /* hide the iPad + rails on phones */
    .od-mobileomni {
        display: block;
        width: 100%;
        max-width: 460px;
        margin: 0.6rem auto 0;
        border-radius: 16px;
        background: #1d1d1d;
        border: 1px solid #33383f;
        overflow: hidden;
    }
    .od-mobileomni__head {
        display: flex; align-items: center; gap: 0.55rem;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid #3a3a3a;
        color: #fff; font-weight: 700; font-size: 1.05rem;
    }
    .od-mobileomni__head svg { width: 22px; height: 22px; fill: #fff; }
    .od-mobileomni__label {
        padding: 0.9rem 1rem 0.4rem;
        color: rgba(255,255,255,.54);
        font-size: 0.72rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
    }
    .od-mobileomni__row { display: flex; gap: 0.5rem; padding: 0 1rem; }
    .od-mobileomni__row .odc-choice { height: 50px; font-size: 0.95rem; }
    /* Brightness — a dropdown menu like the tablet's picker. */
    .od-mobileomni__brightwrap { position: relative; padding: 0 1rem; }
    .od-mbright {
        display: flex; align-items: center; gap: 0.5rem; width: 100%;
        padding: 0.7rem 0.9rem; border-radius: 8px;
        border: 1px solid #4a4a4a; background: #2a2a2a; color: #fff;
        font-family: var(--pl-font-mono); font-size: 0.95rem; font-weight: 700; cursor: pointer;
    }
    .od-mbright svg { width: 20px; height: 20px; fill: #fff; }
    .od-mbright__caret { margin-left: auto; }
    .od-mbright__menu {
        position: absolute; left: 1rem; right: 1rem; top: calc(100% + 4px); z-index: 5;
        background: #2c2c2c; border: 1px solid #4a4a4a; border-radius: 10px; overflow: hidden;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    }
    .od-mbright__menu[hidden] { display: none; }
    .od-mbright__opt {
        display: flex; align-items: center; gap: 0.6rem; width: 100%;
        padding: 0.6rem 0.9rem; background: none; border: 0; color: #fff;
        font-family: var(--pl-font-mono); font-size: 0.9rem; text-align: left; cursor: pointer;
    }
    .od-mbright__opt:hover, .od-mbright__opt.is-active { background: rgba(255, 255, 255, 0.08); }
    .od-mbright__opt small { margin-left: auto; color: rgba(255, 255, 255, 0.45); font-size: 0.72rem; }
    .od-mobileomni__hint { padding: 0.35rem 1rem 0; color: rgba(255, 255, 255, 0.4); font-size: 0.72rem; }
    .od-mobileomni__clips { padding: 0.3rem 0 0.7rem; }
    /* The mobile box is outside the .odc button-reset scope, so clip buttons
       would otherwise get the browser's default (white) button background. */
    .od-mobileomni .odc-clip { background: transparent; border: 0; color: #fff; font-family: inherit; }
    .od-mobileomni .odc-clip:active { background: rgba(255, 255, 255, 0.08); }
    .od-mobileomni__foot { height: 0.5rem; }

    /* Omni OS mocks: keep the FULL horizontal editor layout and scale the whole
       console to fit the phone width (JS in _OmniOsTour sets the transform),
       with the step verbiage above the console. */
    .oos-step, .oos-step--flip { display: flex; flex-direction: column; }
    .oos-step__text { order: 0; max-width: none; }
    .oos-step .pl-console { order: 1; }
    .oos-work--editor { grid-template-columns: 190px minmax(0, 1fr) 230px; }
    .oos-work--sponsor { grid-template-columns: minmax(0, 1fr) 230px; }
    .oos-work { min-height: 360px; }
    .oos-ui { min-height: 0; }
    .oos-appbar__right { width: auto; margin-left: auto; }
    .oos-scaler { width: 100%; overflow: hidden; }
}

/* ═══════════ 12. HERO SPLIT — copy left, video card opposite (right) ═══════════ */
.pl-hero__inner.od-hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3.4rem);
    text-align: left;
    width: 100%;
    max-width: var(--pl-maxw);
}
.od-hero-split .od-hero-copy { min-width: 0; }
.od-hero-split .pl-kicker,
.od-hero-split .pl-cta-row { justify-content: flex-start; }
.od-hero-video { min-width: 0; width: 100%; }
.od-hero-video__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--pl-glass-border);
    box-shadow: var(--pl-shadow-hi), 0 0 60px rgba(var(--pl-accent-rgb), 0.12);
    background: #000;
}
.od-hero-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) {
    .pl-hero__inner.od-hero-split { grid-template-columns: 1fr; text-align: center; }
    .od-hero-split .pl-kicker,
    .od-hero-split .pl-cta-row { justify-content: center; }
    .od-hero-split .pl-measure { margin-inline: auto; }
    .od-hero-video { order: 2; }
}

/* ═══════════ 13. MOBILE: comparison table fits all columns ═══════════ */
/* The inline grid template on .pl-versus sets a 150px capability column, which
   squeezes the four comparison columns off-screen on phones. Reclaim room and
   let the headers wrap instead of clipping. */
@media (max-width: 640px) {
    .pl-versus { grid-template-columns: minmax(74px, 1fr) repeat(4, minmax(0, 1fr)) !important; }
    .pl-versus__cell { padding: 0.5rem 0.3rem !important; font-size: 0.68rem; }
    .pl-versus__head .pl-versus__cell {
        font-size: 0.6rem;
        line-height: 1.15;
        letter-spacing: 0.01em;
        white-space: normal;
        overflow-wrap: normal;          /* wrap at spaces, never split a word */
        text-align: center;
    }
    /* "Capability" is one long word — shrink it so it fits on one line */
    .pl-versus__head .pl-versus__cell:first-child {
        font-size: 0.5rem;
        letter-spacing: 0;
        white-space: nowrap;
    }
    .pl-versus__row .pl-versus__cell:first-child { text-align: left; }
}