/* ============================================================
   OBS / broadcast overlay showcase tiles
   Shared by the basketball landing "OBS overlays" showcase and
   the /scorekeeper/ls/basketball/obs-overlays gallery page.

   Building blocks:
     .obs-frame            — a faux "stream" video panel (the backdrop)
       .obs-frame--court / --studio / --crowd / --stream  (backdrops)
     score-bug shapes composited into the frame:
       .obs-corner  .obs-ribbon  .obs-pill  .obs-square  .obs-lowerthird
     themes:  .t-dark .t-light .t-neon .t-team .t-chroma
     position: .pos-tl .pos-tr .pos-bl .pos-br .pos-bottom .pos-top
     team icon: .obs-badge (generated monogram)
     grid card: .obs-tile  (frame + caption + CTA)
   ============================================================ */

.obs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
}
@media (max-width: 980px) { .obs-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (max-width: 640px)  { .obs-grid { grid-template-columns: 1fr; } }

/* Tile card ----------------------------------------------------- */
.obs-tile {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(10, 10, 10, 0.10);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 18px 40px -28px rgba(10, 10, 10, 0.45);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.obs-tile:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -26px rgba(10, 10, 10, 0.5); }
.obs-tile-body { padding: 1.05rem 1.15rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.obs-tile-title {
    font-family: 'Fraunces', Georgia, serif; font-weight: 800;
    font-size: 1.12rem; letter-spacing: -0.015em; line-height: 1.15;
    color: #0a0a0a; margin: 0 0 0.3rem;
}
.obs-tile-sub {
    font-family: 'Inter', system-ui, sans-serif; font-size: 0.85rem;
    line-height: 1.45; color: #52524f; margin: 0 0 0.9rem;
}
.obs-tile-cta {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: 'Inter', system-ui, sans-serif; font-size: 0.82rem; font-weight: 700;
    letter-spacing: 0.01em; color: #0066cc; text-decoration: none;
    border-bottom: 1px solid transparent; padding-bottom: 1px; transition: border-color 0.15s ease, gap 0.15s ease;
}
.obs-tile-cta i { font-size: 0.72rem; transition: transform 0.15s ease; }
.obs-tile-cta:hover { border-color: #0066cc; }
.obs-tile-cta:hover i { transform: translateX(3px); }

/* Preview frame (the "stream") --------------------------------- */
.obs-frame {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-bottom: 1px solid rgba(10, 10, 10, 0.06);
    font-family: 'Inter', system-ui, sans-serif;
    isolation: isolate;
}
.obs-frame::before { /* soft broadcast vignette */
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: radial-gradient(120% 80% at 50% 30%, transparent 55%, rgba(0, 0, 0, 0.28) 100%);
    pointer-events: none;
}
.obs-frame--court   { background: linear-gradient(160deg, #e0b072 0%, #c68f45 52%, #93602c 100%); }
.obs-frame--court::after { /* faint center-court line */
    content: ''; position: absolute; z-index: 0; left: 50%; top: -18%; width: 46%; height: 136%;
    transform: translateX(-50%); border: 2px solid rgba(255, 255, 255, 0.14); border-radius: 50%;
}
.obs-frame--studio  { background: radial-gradient(circle at 28% 18%, #24324a 0%, #0b1220 72%); }
.obs-frame--crowd   { background: linear-gradient(180deg, #10242c 0%, #1f3b45 58%, #2c5364 100%); }
.obs-frame--stream  { background: radial-gradient(circle at 72% 26%, #16294550 0%, #0a1526 70%), #0a1526; }
.obs-frame--dusk    { background: linear-gradient(150deg, #3a1c47 0%, #1c1230 55%, #0d0a1a 100%); }
.obs-frame--paper   { background: radial-gradient(circle at 30% 20%, #ffffff 0%, #eceae4 78%); }

/* generic score-bug positioning */
[class*="obs-"][class*="pos-"] { position: absolute; z-index: 2; }
.pos-tl { top: 11px; left: 11px; }
.pos-tr { top: 11px; right: 11px; }
.pos-bl { bottom: 11px; left: 11px; }
.pos-br { bottom: 11px; right: 11px; }
.pos-bottom { left: 11px; right: 11px; bottom: 11px; }
.pos-top    { left: 11px; right: 11px; top: 11px; }

/* Generated team monogram icon --------------------------------- */
.obs-badge {
    flex: none; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: #fff; letter-spacing: -0.02em;
}
.obs-badge--home { background: #2ba8ff; }
.obs-badge--away { background: #f97316; }
.obs-badge--sq { border-radius: 5px; }

/* ---- Corner scorebug (mirrors the real .overlay-corner) ------- */
.obs-corner {
    display: flex; flex-direction: column; min-width: 132px;
    border-radius: 8px; overflow: hidden; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    background: var(--bug-bg, rgba(0, 0, 0, 0.9));
}
.obs-corner .oc-head {
    display: flex; align-items: center; gap: 5px; padding: 5px 9px;
    background: var(--bug-accent, linear-gradient(135deg, #f97316, #ea580c));
}
.oc-head i { font-size: 10px; color: #fff; }
.oc-sport { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #fff; }
.oc-period { margin-left: auto; background: rgba(255, 255, 255, 0.22); padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 700; color: #fff; }
.obs-corner .oc-team { display: flex; align-items: center; gap: 8px; padding: 6px 9px; }
.obs-corner .oc-team + .oc-team { border-top: 1px solid var(--bug-border, rgba(255, 255, 255, 0.14)); }
.oc-name { flex: 1; font-size: 11px; font-weight: 600; color: var(--bug-fg, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 82px; }
.oc-score { font-size: 18px; font-weight: 800; color: var(--bug-fg, #fff); font-variant-numeric: tabular-nums; min-width: 24px; text-align: right; }
.oc-stats { display: flex; justify-content: center; gap: 4px; padding: 4px 9px; font-size: 9px; color: var(--bug-muted, rgba(255, 255, 255, 0.6)); border-top: 1px solid var(--bug-border, rgba(255, 255, 255, 0.14)); }
.oc-stats b { color: var(--bug-fg, #fff); font-weight: 700; }

/* ---- Ribbon (mirrors .overlay-ribbon) ------------------------ */
.obs-ribbon {
    display: flex; align-items: stretch;
    border-radius: 10px; overflow: hidden; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    background: var(--bug-bg, rgba(0, 0, 0, 0.85));
}
.obs-ribbon .or-sport {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 8px 12px; min-width: 58px;
    background: var(--bug-accent, linear-gradient(135deg, #f97316, #ea580c));
}
.or-sport i { font-size: 17px; color: #fff; margin-bottom: 2px; }
.or-sport span { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #fff; }
.obs-ribbon .or-score { display: flex; align-items: center; gap: 12px; padding: 6px 16px; flex: 1; justify-content: center; }
.or-team { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 62px; }
.or-team .or-name { font-size: 10px; font-weight: 600; color: var(--bug-fg, #fff); white-space: nowrap; }
.or-team .or-pts { font-size: 30px; font-weight: 800; line-height: 1; color: var(--bug-fg, #fff); font-variant-numeric: tabular-nums; }
.or-vs { font-size: 15px; font-weight: 300; color: var(--bug-muted, rgba(255, 255, 255, 0.5)); }
.obs-ribbon .or-info {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 8px 14px; min-width: 62px; border-left: 1px solid var(--bug-border, rgba(255, 255, 255, 0.12));
}
.or-info .or-plabel { font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--bug-muted, rgba(255, 255, 255, 0.55)); }
.or-info .or-pval { font-size: 21px; font-weight: 800; line-height: 1; color: var(--bug-fg, #fff); }

/* ---- Compact pill -------------------------------------------- */
.obs-pill {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px; border-radius: 999px;
    background: var(--bug-bg, rgba(0, 0, 0, 0.82)); box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
    font-size: 12px; font-weight: 700; color: var(--bug-fg, #fff); white-space: nowrap;
}
.obs-pill .op-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bug-solid, #f97316); }
.obs-pill .op-score { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.obs-pill .op-per { font-size: 10px; font-weight: 700; color: var(--bug-muted, rgba(255, 255, 255, 0.6)); }

/* ---- Square badge -------------------------------------------- */
.obs-square {
    width: 96px; padding: 9px; border-radius: 10px;
    background: var(--bug-bg, rgba(0, 0, 0, 0.86)); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    text-align: center;
}
.obs-square .os-per { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--bug-muted, rgba(255, 255, 255, 0.6)); margin-bottom: 5px; }
.obs-square .os-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 3px 0; }
.obs-square .os-name { font-size: 10px; font-weight: 600; color: var(--bug-fg, #fff); }
.obs-square .os-pts { font-size: 16px; font-weight: 800; color: var(--bug-fg, #fff); font-variant-numeric: tabular-nums; }

/* ---- Full-width lower third ---------------------------------- */
.obs-lowerthird {
    display: flex; align-items: center; gap: 0;
    border-radius: 8px; overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    background: var(--bug-bg, rgba(8, 12, 20, 0.92));
}
.obs-lowerthird .olt-cap { padding: 8px 12px; background: var(--bug-accent, linear-gradient(135deg, #f97316, #ea580c)); display: flex; align-items: center; gap: 6px; }
.olt-cap i { color: #fff; font-size: 14px; }
.olt-cap span { color: #fff; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; }
.obs-lowerthird .olt-team { display: flex; align-items: center; gap: 8px; padding: 8px 14px; flex: 1; }
.obs-lowerthird .olt-team + .olt-team { border-left: 1px solid var(--bug-border, rgba(255, 255, 255, 0.12)); }
.olt-name { font-size: 11px; font-weight: 600; color: var(--bug-fg, #fff); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.olt-sub { font-size: 8px; color: var(--bug-muted, rgba(255, 255, 255, 0.55)); text-transform: uppercase; letter-spacing: 0.4px; }
.olt-pts { font-size: 22px; font-weight: 800; color: var(--bug-fg, #fff); font-variant-numeric: tabular-nums; }
.obs-lowerthird .olt-clock { padding: 8px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid var(--bug-border, rgba(255, 255, 255, 0.12)); }
.olt-clock .olt-time { font-size: 16px; font-weight: 800; color: var(--bug-fg, #fff); font-variant-numeric: tabular-nums; }
.olt-clock .olt-plabel { font-size: 8px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--bug-muted, rgba(255, 255, 255, 0.55)); }

/* ===== THEMES (set the bug custom props) ====================== */
.t-dark  { --bug-bg: rgba(6, 10, 18, 0.92); --bug-fg: #fff; --bug-muted: rgba(255, 255, 255, 0.6); --bug-border: rgba(255, 255, 255, 0.14); --bug-solid: #f97316; }
.t-light { --bug-bg: rgba(255, 255, 255, 0.96); --bug-fg: #14161c; --bug-muted: #7c8090; --bug-border: rgba(0, 0, 0, 0.10); --bug-solid: #ea580c; }
.t-light .oc-period { background: rgba(0, 0, 0, 0.08); color: #14161c; }
.t-neon  { --bug-bg: rgba(11, 6, 26, 0.90); --bug-fg: #f0eaff; --bug-muted: rgba(214, 200, 255, 0.6); --bug-border: rgba(150, 120, 255, 0.28); --bug-accent: linear-gradient(135deg, #a855f7, #22d3ee); --bug-solid: #22d3ee; }
.t-team  { --bug-bg: rgba(8, 12, 20, 0.92); --bug-fg: #fff; --bug-muted: rgba(255, 255, 255, 0.6); --bug-border: rgba(255, 255, 255, 0.12); --bug-accent: linear-gradient(135deg, #1e3a8a, #b91c1c); --bug-solid: #ef4444; }
.t-chroma { --bug-bg: rgba(6, 10, 18, 0.94); --bug-fg: #fff; --bug-muted: rgba(255, 255, 255, 0.6); --bug-border: rgba(255, 255, 255, 0.14); }

/* Chroma frame shows the green key + a "green-screen" note */
.obs-frame--chroma { background: #00b140; }
.obs-frame--chroma::before { background: none; }
.obs-chroma-tag {
    position: absolute; z-index: 3; top: 10px; left: 10px;
    font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.28); padding: 3px 7px; border-radius: 5px;
}

/* Team-color square badges for the "team colors" tile */
.obs-corner.use-teamcolors .oc-team:nth-child(2) .obs-badge { background: #1e3a8a; }
.obs-corner.use-teamcolors .oc-team:nth-child(3) .obs-badge { background: #b91c1c; }

/* "LIVE" chip for realism (opt-in) */
.obs-live {
    position: absolute; z-index: 3; top: 10px; right: 11px;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 8px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: #fff; background: rgba(0, 0, 0, 0.34); padding: 3px 7px; border-radius: 999px;
}
.obs-live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.9); }