/*
 * HiFOCUS Signage player.
 * The stage is a fixed 1920x1080 (or 1080x1920) canvas that player.js scales to the screen,
 * so every size here is in real TV pixels. Animate transforms and opacity only.
 */

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    background: #000;
    cursor: none;
}

[x-cloak] { display: none !important; }

#viewport {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    background: #000;
}

.stage {
    position: absolute;
    left: 0;
    top: 0;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    transform-origin: 0 0;
    background: #0B0B0F;
    color: #F5F5F7;
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* overwritten from the tenant's colours by player.js */
    --accent: #F59E0B;
    --accent-rgb: 245, 158, 11;
    --accent-2: #EF4444;
    --accent-ink: #9A5B00;
    --on-accent: #111111;
}

/* ---------- Themes (per layer, so a slide can override) ---------- */

.theme-dark {
    --bg-1: #0B0B0F;
    --bg-2: #15151C;
    --bg-rgb: 11, 11, 15;
    --fg: #F5F5F7;
    --muted: rgba(245, 245, 247, .64);
    --glass: rgba(24, 24, 32, .52);
    --glass-solid: rgba(20, 20, 27, .86);
    --glass-border: rgba(255, 255, 255, .10);
    --leader: rgba(255, 255, 255, .28);
    --price: var(--accent);
    --shade: linear-gradient(180deg, rgba(11, 11, 15, .55), rgba(11, 11, 15, .82));
    --shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 12px 24px -8px rgba(0, 0, 0, .45);
}

.theme-light {
    --bg-1: #F8F3EC;
    --bg-2: #EADFD0;
    --bg-rgb: 248, 243, 236;
    --fg: #2A1F17;
    --muted: rgba(42, 31, 23, .64);
    --glass: rgba(255, 252, 247, .62);
    --glass-solid: rgba(255, 252, 247, .9);
    --glass-border: rgba(42, 31, 23, .10);
    --leader: rgba(42, 31, 23, .3);
    --price: var(--accent-ink);
    --shade: linear-gradient(180deg, rgba(248, 243, 236, .72), rgba(234, 223, 208, .86));
    --shadow: 0 30px 60px -24px rgba(74, 52, 30, .45), 0 10px 20px -8px rgba(74, 52, 30, .2);
}

/* ---------- Layers ---------- */

.layers, .layer {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

.layer {
    overflow: hidden;
    color: var(--fg);
    background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.content {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    will-change: transform, opacity;
}

/* Blurred, darkened, enlarged copy of the photo. It is rendered at quarter size and scaled up,
   so the blur stays cheap. Static: it is never animated. */
.bg-photo {
    position: absolute;
    left: -4%;
    top: -4%;
    width: 27%;
    height: 27%;
    transform: scale(4);
    transform-origin: 0 0;
}
.bg-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(9px) saturate(1.25);
}
.bg-shade {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: var(--shade);
}

.glow {
    position: absolute;
    width: 1300px;
    height: 1300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), .34) 0%, rgba(var(--accent-rgb), .10) 38%, rgba(var(--accent-rgb), 0) 66%);
    pointer-events: none;
    will-change: transform;
}

.photo-full {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
    will-change: transform;
}
.photo-full img,
.photo-full video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-full .fit-contain { object-fit: contain; }

.scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.scrim-left {
    background: linear-gradient(90deg, rgba(var(--bg-rgb), .96) 0%, rgba(var(--bg-rgb), .82) 32%, rgba(var(--bg-rgb), .2) 58%, rgba(var(--bg-rgb), 0) 72%);
}
.scrim-bottom {
    background: linear-gradient(0deg, rgba(var(--bg-rgb), .9) 0%, rgba(var(--bg-rgb), .45) 30%, rgba(var(--bg-rgb), 0) 55%);
}
.scrim.portrait-only { display: none; }
.portrait .scrim.portrait-only { display: block; }
.scrim-bl {
    background: linear-gradient(25deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .35) 38%, rgba(0, 0, 0, 0) 60%);
}

/* ---------- Building blocks ---------- */

.display {
    font-family: 'Bebas Neue', 'Sora', Impact, 'Arial Narrow', sans-serif;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: .9;
    margin: 0;
}

.glass {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    backdrop-filter: blur(22px) saturate(1.2);
    box-shadow: var(--shadow);
}
/* Low-power mode or no backdrop-filter support: use a more opaque fill instead. */
.lite .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background: var(--glass-solid); }
}

.frame {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: var(--shadow);
    transform: translateZ(0); /* keeps the rounded clip on transformed children in old WebViews */
    background: rgba(0, 0, 0, .25);
}
.frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.frame::after { /* vignette */
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 90px rgba(0, 0, 0, .42);
    pointer-events: none;
}

.sheen-clip { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.sheen {
    position: absolute;
    top: -10%;
    left: 0;
    width: 32%;
    height: 120%;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .16) 45%, rgba(255, 255, 255, .26) 50%, rgba(255, 255, 255, .16) 55%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-150%);
    will-change: transform;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px 11px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font: 800 22px/1 Inter, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 8px 24px -6px rgba(var(--accent-rgb), .55);
    will-change: transform;
}
.badge.badge-best {
    background: var(--accent-2);
    color: #fff;
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .45);
}
.badge-sm { padding: 8px 16px 7px; font-size: 16px; }

.divider {
    width: 140px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, rgba(var(--accent-rgb), 0) 100%);
    transform-origin: 0 50%;
}

.price {
    display: inline-block;
    font: 800 48px/1 Inter, sans-serif;
    color: var(--price);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    transform-origin: 50% 60%;
    will-change: transform;
}
.price .cur {
    font-size: .52em;
    font-weight: 700;
    vertical-align: .62em;
    margin-right: .08em;
}
.old-price {
    font: 600 44px/1 Inter, sans-serif;
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-thickness: 3px;
}

/* dotted price leader */
.leader {
    flex: 1 1 auto;
    min-width: 32px;
    height: 12px;
    margin: 0 18px;
    align-self: center;
    background-image: radial-gradient(circle, var(--leader) 2.4px, transparent 3px);
    background-size: 14px 12px;
    background-repeat: repeat-x;
    background-position: left center;
}

.brand {
    display: flex;
    align-items: center;
    font: 700 22px/1 Inter, sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--fg);
    opacity: .9;
    white-space: nowrap;
}
.board-head .brand { margin-left: 32px; margin-top: 12px; }
.brand img { height: 64px; width: auto; margin-right: 14px; }
.brand-dot {
    width: 14px;
    height: 14px;
    margin-right: 14px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 18px rgba(var(--accent-rgb), .8);
}
.brand-corner { position: absolute; top: 64px; right: 80px; }

/* ---------- Image / video slide with caption ---------- */

.caption {
    position: absolute;
    left: 96px;
    bottom: 96px;
    max-width: 980px;
    padding: 44px 56px 48px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(14, 14, 20, .78), rgba(14, 14, 20, .55));
    border: 1px solid rgba(255, 255, 255, .1);
    color: #F5F5F7;
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
}
.caption .badge { margin-bottom: 26px; }
.caption-title { font-size: 112px; }
.caption .divider { margin: 26px 0 24px; }
.caption .price { font-size: 84px; color: var(--accent); }

/* ---------- Hero Promo ---------- */

.hero-photo img { object-position: 68% 50%; }
.hero-text {
    position: absolute;
    left: 120px;
    top: 50%;
    width: 820px;
    transform: translateY(-50%);
}
.hero-text .badge { margin-bottom: 34px; }
.eyebrow {
    display: flex;
    align-items: center;
    font: 700 26px/1 Inter, sans-serif;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--accent);
}
.eyebrow-line { margin-right: 18px; width: 56px; height: 3px; background: var(--accent); border-radius: 2px; }
.hero-title { font-size: 168px; margin-top: 22px; }
.hero-text .divider { margin: 34px 0 30px; width: 180px; }
.hero-desc {
    margin: 0;
    font: 400 32px/1.45 Inter, sans-serif;
    color: var(--muted);
    max-width: 720px;
}
.hero-price { display: flex; align-items: baseline; margin-top: 44px; }
.hero-price .price { font-size: 124px; margin-right: 28px; }

/* ---------- Category Board / Combo Board ---------- */

.board {
    display: flex;
    flex-direction: column;
    padding: 72px 96px 80px;
    box-sizing: border-box;
}
.board-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 44px;
}
.board-title { font-size: 96px; }
.board-head .divider { margin: 20px 0 18px; }
.board-sub { margin: 0; font: 500 28px/1.3 Inter, sans-serif; color: var(--muted); }

.board-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 32px 40px;
    min-height: 0;
}
.cols-2 .board-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 48px; }

.item {
    display: grid;
    grid-template-columns: 140px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "thumb head"
        "desc  desc"
        "price price";
    column-gap: 26px;
    row-gap: 12px;
    padding: 24px 28px 22px 24px;
    min-height: 0;
    will-change: transform, opacity;
}
.cols-2 .item {
    grid-template-columns: 170px 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "thumb head"
        "thumb desc"
        "thumb price";
    align-items: start;
}
.item.no-thumb { grid-template-columns: 1fr; grid-template-areas: "head" "desc" "price"; }

.item .thumb { grid-area: thumb; width: 140px; height: 140px; border-radius: 20px; }
.cols-2 .item .thumb { width: 170px; height: 170px; }
.item-head { grid-area: head; align-self: center; }
.item-head .badge { margin-bottom: 12px; }
.item-name { font: 700 40px/1.1 Inter, sans-serif; letter-spacing: -.01em; }
.item-desc { grid-area: desc; font: 400 24px/1.35 Inter, sans-serif; color: var(--muted); }
.item-price { grid-area: price; display: flex; align-items: flex-end; }
.item-price .leader { margin-left: 0; }

.combo-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: stretch;
    min-height: 0;
}
.combo {
    display: flex;
    flex-direction: column;
    padding: 20px 20px 30px;
    min-height: 0;
    will-change: transform, opacity;
}
.combo.featured {
    border: 2px solid rgba(var(--accent-rgb), .8);
    box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .12), var(--shadow);
}
.combo-photo { position: relative; width: 100%; height: 0; padding-bottom: 66%; }
.combo-photo img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.combo-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 26px 16px 0; }
.combo-body .badge { align-self: flex-start; margin-bottom: 16px; }
.combo-name { font-size: 64px; }
.combo-price { display: flex; align-items: flex-end; margin-top: auto; padding-top: 18px; }
.combo-price .price { font-size: 72px; }
.combo-price-label { font: 600 22px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* ---------- Promo Video ---------- */

.lower-third {
    position: absolute;
    left: 96px;
    right: 96px;
    bottom: 80px;
    display: flex;
    align-items: center;
    padding: 36px 56px 36px 0;
    border-radius: 28px;
    background: linear-gradient(90deg, rgba(14, 14, 20, .86) 0%, rgba(14, 14, 20, .66) 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #F5F5F7;
    overflow: hidden;
    will-change: transform, opacity;
}
.lt-bar { align-self: stretch; width: 10px; margin: -36px 40px -36px 0; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.lt-text { flex: 1 1 auto; margin-right: 40px; }
.lt-text .badge { margin-bottom: 18px; }
.lt-title { font-size: 104px; }
.lt-sub { margin: 12px 0 0; font: 500 32px/1.3 Inter, sans-serif; color: rgba(245, 245, 247, .72); }
.lt-price .price { font-size: 104px; color: var(--accent); }

/* ---------- Portrait (1080x1920) ---------- */

.portrait .caption { left: 64px; right: 64px; bottom: 96px; max-width: none; }
.portrait .caption-title { font-size: 104px; }

.portrait .hero .scrim-bottom {
    background: linear-gradient(0deg, rgba(var(--bg-rgb), .97) 0%, rgba(var(--bg-rgb), .88) 34%, rgba(var(--bg-rgb), 0) 62%);
}
.portrait .hero-photo img { object-position: 50% 50%; }
.portrait .hero .scrim-left { display: none; }
.portrait .hero-text { left: 72px; right: 72px; top: auto; bottom: 110px; width: auto; transform: none; }
.portrait .hero-title { font-size: 150px; }

.portrait .board { padding: 96px 64px 96px; }
.portrait .board-title { font-size: 120px; }
.portrait .board-grid,
.portrait .cols-2 .board-grid { grid-template-columns: 1fr; gap: 24px; }
.portrait .item {
    grid-template-columns: 170px 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "thumb head"
        "thumb desc"
        "thumb price";
}
.portrait .item .thumb { width: 170px; height: 170px; }

.portrait .combo-grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 32px; }
.portrait .combo { flex-direction: row; padding: 20px; }
.portrait .combo-photo { width: 420px; height: auto; padding-bottom: 0; flex: 0 0 auto; }
.portrait .combo-body { padding: 10px 16px 0 28px; }

.portrait .lower-third { left: 48px; right: 48px; bottom: 96px; flex-wrap: wrap; padding: 36px 48px 40px 0; }
.portrait .lt-title { font-size: 96px; }
.portrait .lt-price { width: 100%; padding-left: 50px; }

/* ---------- Wipe transition, particles, status ---------- */

.wipe {
    position: absolute;
    top: 0;
    height: 100%;
    visibility: hidden;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 70%, var(--accent-2) 100%);
    transform: skewX(-18deg);
    will-change: transform;
    z-index: 5;
}
.wipe-edge {
    position: absolute;
    top: 0;
    right: -36px;
    width: 36px;
    height: 100%;
    background: rgba(255, 255, 255, .55);
}

.particles { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 4; }
.particle {
    position: absolute;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), .9);
    opacity: 0;
    will-change: transform, opacity;
}

.status {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, var(--bg-1), var(--bg-2));
    color: var(--fg);
    overflow: hidden;
}
.status-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1400px;
    height: 1400px;
    margin: -700px 0 0 -700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), .22) 0%, rgba(var(--accent-rgb), 0) 62%);
}
.status-inner { position: relative; }
.status-brand { font-size: 120px; }
.status-divider { margin: 28px auto; }
.status-message { font: 500 34px/1.3 Inter, sans-serif; color: var(--muted); }
.status-code { margin-top: 40px; font: 500 26px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.status-code strong { color: var(--accent); letter-spacing: .3em; margin-left: 12px; }

.demo-label {
    position: absolute;
    left: 32px;
    top: 28px;
    z-index: 20;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font: 600 20px/1 Inter, sans-serif;
    letter-spacing: .08em;
}

/* ---------- Category Board: one column per category (compact rows) ---------- */

.section-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    min-height: 0;
}
.sectioned.cols-2 .section-grid { grid-template-columns: repeat(2, 1fr); gap: 48px; }
.sectioned.cols-1 .section-grid { grid-template-columns: 1fr; }
.section {
    display: flex;
    flex-direction: column;
    padding: 28px 30px 20px;
    min-height: 0;
    overflow: hidden;
    will-change: transform, opacity;
}
.section-title { font-size: 60px; color: var(--fg); }
.section-divider { margin: 12px 0 10px; width: 90px; }
.rows {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
}
.row {
    display: flex;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid var(--glass-border);
    will-change: transform, opacity;
}
.row:last-child { border-bottom: 0; }
.row .thumb { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 16px; margin-right: 20px; }
.row-body { flex: 1 1 auto; min-width: 0; }
.row-top { display: flex; align-items: center; }
.row-top .item-name {
    font-size: 34px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.row-bottom .badge { margin-right: 10px; flex: 0 0 auto; padding: 6px 12px 5px; font-size: 14px; }
.row-bottom { display: flex; align-items: center; margin-top: 4px; }
.row-bottom .item-desc {
    flex: 0 1 auto;
    min-width: 0;
    font-size: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.row-bottom .leader { min-width: 24px; margin: 0 12px; }
.row-bottom .price { font-size: 40px; }
.sectioned.cols-2 .row .thumb { width: 96px; height: 96px; }
.sectioned.cols-2 .row-top .item-name { font-size: 40px; }
.sectioned.cols-2 .row-bottom .item-desc { font-size: 24px; }
.sectioned.cols-2 .row-bottom .price { font-size: 44px; }

/* ---------- Combo Board: items + combo price ---------- */

.combo-grid.count-2 { grid-template-columns: repeat(2, 1fr); padding: 0 200px; }
.combo-grid.count-1 { grid-template-columns: 1fr; padding: 0 560px; }
.combo-desc { margin: 12px 0 0; font: 400 24px/1.4 Inter, sans-serif; color: var(--muted); }
.price-muted { font-size: 40px !important; color: var(--muted); }
.combo-deal {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
.combo-deal-label { font: 700 22px/1 Inter, sans-serif; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.combo-deal-price { font-size: 112px; margin-top: 10px; }
.combo-save {
    margin-top: 12px;
    padding: 10px 22px 9px;
    border-radius: 999px;
    background: var(--accent-2);
    color: #fff;
    font: 800 22px/1 Inter, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    will-change: transform;
}
.has-deal .board-head { margin-bottom: 28px; }

.badge.badge-spicy { background: #DC2626; color: #fff; box-shadow: 0 8px 24px -6px rgba(220, 38, 38, .5); }
.badge.badge-veg { background: #16A34A; color: #fff; box-shadow: 0 8px 24px -6px rgba(22, 163, 74, .5); }

/* portrait: categories stack, each with its items in two compact columns */
.portrait .section-grid,
.portrait .sectioned.cols-2 .section-grid { grid-template-columns: 1fr; gap: 28px; }
.portrait .section { padding: 24px 28px 16px; }
.portrait .section-title { font-size: 56px; }
.portrait .rows { flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
.portrait .row { width: 50%; box-sizing: border-box; padding-right: 20px; border-bottom: 0; }
.portrait .row { padding-top: 12px; padding-bottom: 12px; }
.portrait .row .thumb { width: 96px; height: 96px; margin-right: 18px; }
.portrait .row-top .item-name { font-size: 32px; }
.portrait .row-bottom .item-desc { display: none; }
.portrait .row-bottom .leader { margin-left: 0; }
.portrait .row-bottom .price { font-size: 40px; }
.portrait .combo-grid.count-2,
.portrait .combo-grid.count-1 { grid-template-columns: 1fr; padding: 0; }
.portrait .has-deal .board-head { flex-direction: column; }
.portrait .combo-deal { align-items: flex-start; text-align: left; margin-top: 24px; }
.portrait .combo-deal-price { font-size: 96px; }

/* ?debug=1: tiny live-update socket indicator, top-right */
.socket-dot {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 30;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #EF4444;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .45);
}
.socket-dot.is-connected { background: #10B981; }
.socket-dot.is-connecting,
.socket-dot.is-initialized { background: #F59E0B; }

/* ---------- Brand promo (HiFOCUS self-advertisement) ---------- */

.bp-bg {
    position: absolute;
    top: -25%; right: -25%; bottom: -25%; left: -25%;
    background:
        radial-gradient(55% 60% at 22% 30%, rgba(var(--accent-rgb), .30) 0%, rgba(var(--accent-rgb), 0) 70%),
        radial-gradient(45% 55% at 78% 72%, rgba(239, 68, 68, .22) 0%, rgba(239, 68, 68, 0) 70%),
        linear-gradient(135deg, #0B0B0F 0%, #15151C 55%, #1A1013 100%);
    will-change: transform;
}
.bp-dots {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .09) 1.4px, transparent 1.6px);
    background-size: 36px 36px;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 55% 45%, #000 20%, transparent 80%);
    mask-image: radial-gradient(ellipse 75% 70% at 55% 45%, #000 20%, transparent 80%);
}
.bp-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}
.bp-blob-1 { width: 900px; height: 900px; left: -260px; top: -320px; background: radial-gradient(circle, rgba(var(--accent-rgb), .28) 0%, rgba(var(--accent-rgb), 0) 65%); }
.bp-blob-2 { width: 1000px; height: 1000px; right: -300px; bottom: -420px; background: radial-gradient(circle, rgba(239, 68, 68, .22) 0%, rgba(239, 68, 68, 0) 65%); }
.bp-blob-3 { width: 600px; height: 600px; left: 42%; top: 8%; background: radial-gradient(circle, rgba(255, 236, 200, .10) 0%, rgba(255, 236, 200, 0) 65%); }

.bp {
    display: flex;
    align-items: center;
    padding: 0 110px 60px 120px;
    box-sizing: border-box;
    color: #F5F5F7;
}
.bp-text { flex: 1 1 auto; min-width: 0; margin-right: 70px; }
.bp-eyebrow {
    display: flex;
    align-items: center;
    font: 700 24px/1 Inter, sans-serif;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: rgba(245, 245, 247, .72);
}
.bp-mark {
    width: 14px; height: 14px; margin-right: 18px; border-radius: 4px;
    background: linear-gradient(135deg, var(--accent), #EF4444);
    box-shadow: 0 0 22px rgba(var(--accent-rgb), .8);
}
.bp-title { margin-top: 26px; font-size: 150px; line-height: .9; }
.bp-divider { margin: 30px 0 26px; width: 200px; }
.bp-sub { margin: 0; font: 500 40px/1.25 Inter, sans-serif; color: rgba(245, 245, 247, .78); }
.bp-chips { list-style: none; margin: 44px 0 0; padding: 0; }
.bp-chip {
    display: flex;
    align-items: center;
    margin-top: 16px;
    padding: 16px 26px 16px 16px;
    max-width: 640px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    font: 600 28px/1.1 Inter, sans-serif;
    will-change: transform, opacity;
}
.bp-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin-right: 18px; border-radius: 50%; flex: none;
    color: #111; background: linear-gradient(135deg, var(--accent), #FDBA74);
    box-shadow: 0 6px 18px -4px rgba(var(--accent-rgb), .7);
    will-change: transform;
}
.bp-check svg { width: 24px; height: 24px; }

.bp-tv-wrap { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }
.bp-tv-glow {
    position: absolute; left: 50%; top: 45%; width: 1100px; height: 800px; margin: -400px 0 0 -550px;
    background: radial-gradient(closest-side, rgba(var(--accent-rgb), .30), rgba(var(--accent-rgb), 0));
    pointer-events: none;
}
.bp-tv {
    position: relative;
    padding: 18px;
    border-radius: 28px;
    background: linear-gradient(145deg, #2A2F3A 0%, #0D1017 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 50px 90px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .6);
}
.bp-screen {
    --tv-w: 860px;
    --mini-scale: .4479; /* 860 / 1920 */
    position: relative;
    width: var(--tv-w);
    height: 483.75px; /* 16:9 */
    border-radius: 12px;
    overflow: hidden;
    background: #0B0B0F;
    transform: translateZ(0);
}
.bp-mini { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.bp-mini-stage {
    position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
    transform-origin: 0 0;
    transform: scale(var(--mini-scale));
    background: linear-gradient(135deg, var(--bg-1), var(--bg-2));
    color: var(--fg);
}
/* the mini board sits over a moving background: no backdrop blur, solid glass instead */
.bp-mini .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-solid); }
.bp-mini-empty {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .35), rgba(239, 68, 68, .25));
    font-size: 64px; color: #fff;
}
.bp-live {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    display: inline-flex; align-items: center; padding: 6px 12px 6px 10px; border-radius: 999px;
    background: rgba(0, 0, 0, .6); color: #fff; font: 800 13px/1 Inter, sans-serif; letter-spacing: .18em;
}
.bp-live i { width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #EF4444; box-shadow: 0 0 10px #EF4444; }
.bp-stand { width: 240px; height: 14px; margin-top: 10px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #2A2F3A, #0D1017); }
.bp-screen .sheen { width: 26%; }

.bp-foot {
    position: absolute; left: 120px; right: 110px; bottom: 56px;
    display: flex; align-items: center; justify-content: space-between;
    font: 600 26px/1 Inter, sans-serif; color: rgba(245, 245, 247, .8);
}
.bp-site { display: inline-flex; align-items: center; letter-spacing: .02em; }
.bp-site svg { width: 30px; height: 30px; margin-right: 14px; color: var(--accent); }
.bp-cta {
    display: inline-flex; align-items: center;
    padding: 14px 26px 14px 16px; border-radius: 999px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
    color: #fff; font-weight: 700;
}
.bp-cta svg {
    width: 40px; height: 40px; margin-right: 14px; padding: 8px; box-sizing: border-box;
    border-radius: 50%; background: #25D366; color: #fff;
}
.bp-cta b { margin-left: 14px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .25); font-weight: 800; color: var(--accent); }

/* portrait 1080x1920: text on top, TV below, footer at the bottom */
.portrait .bp { flex-direction: column; justify-content: center; align-items: stretch; padding: 120px 80px 200px; }
.portrait .bp-text { margin: 0 0 80px; }
.portrait .bp-title { font-size: 138px; }
.portrait .bp-sub { font-size: 38px; }
.portrait .bp-chip { max-width: none; }
.portrait .bp-tv-wrap { align-self: center; }
.portrait .bp-screen { --tv-w: 880px; --mini-scale: .4583; height: 495px; } /* 880 / 1920 */
.portrait .bp-foot { left: 80px; right: 80px; bottom: 80px; flex-direction: column; align-items: flex-start; }
.portrait .bp-foot .bp-site { margin-bottom: 22px; }

/* tighter so three lines of headline + chips never crowd the footer */
.bp-title { font-size: 132px; margin-top: 22px; }
.bp-divider { margin: 26px 0 22px; }
.bp-sub { font-size: 36px; }
.bp-chips { margin-top: 34px; }
.bp-chip { margin-top: 14px; padding-top: 13px; padding-bottom: 13px; font-size: 26px; }

/* portrait: the text keeps its natural height (no stretching), TV right under it */
.portrait .bp { justify-content: flex-start; padding-top: 130px; }
.portrait .bp-text { flex: 0 0 auto; margin-bottom: 90px; }
.portrait .bp-title { font-size: 132px; }

/*
 * The mock TV is always a landscape screen, so its mini board keeps the landscape layout even
 * on a portrait stage. These undo the `.portrait …` rules above for anything inside it (plain
 * overrides with higher specificity; :not() with complex selectors would break old WebViews).
 */
.portrait .bp-mini-stage .board { padding: 72px 96px 80px; }
.portrait .bp-mini-stage .board-title { font-size: 96px; }
.portrait .bp-mini-stage .board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
.portrait .bp-mini-stage .item {
    grid-template-columns: 140px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "thumb head" "desc desc" "price price";
}
.portrait .bp-mini-stage .item .thumb { width: 140px; height: 140px; }
.portrait .bp-mini-stage .section-grid,
.portrait .bp-mini-stage .sectioned.cols-3 .section-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.portrait .bp-mini-stage .sectioned.cols-2 .section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.portrait .bp-mini-stage .section { padding: 28px 30px 20px; }
.portrait .bp-mini-stage .section-title { font-size: 60px; }
.portrait .bp-mini-stage .rows { flex-direction: column; flex-wrap: nowrap; align-content: normal; }
.portrait .bp-mini-stage .row { width: auto; padding: 9px 0; border-bottom: 1px solid var(--glass-border); }
.portrait .bp-mini-stage .row:last-child { border-bottom: 0; }
.portrait .bp-mini-stage .row .thumb { width: 84px; height: 84px; margin-right: 20px; }
.portrait .bp-mini-stage .row-top .item-name { font-size: 34px; }
.portrait .bp-mini-stage .row-bottom .item-desc { display: block; }
.portrait .bp-mini-stage .row-bottom .leader { margin: 0 12px; }
.portrait .bp-mini-stage .row-bottom .price { font-size: 40px; }