@charset "UTF-8";
/* ↑ must stay the very first line: the server sends this file as plain "text/css" (no charset), and a load that doesn't
   inherit the page's encoding (e.g. a preload / early hint) would read the UTF-8 "›" "✓" "₹" as Windows-1252 ("›") */
/* Display font for Hangul: Bebas Neue has no Korean glyphs, so every Bebas stack continues with this variable.
   Default = Bebas itself (India renders exactly as before); Korea's page sets it to Do Hyeon (index.blade.php). */
:root { --bb-display-hangul: 'Bebas Neue'; }
/* Korea market pages (data-bb-market="kr", set by index.blade.php only while Korea is ON — /ko with Korea switched off
   plays India and keeps India's exact look): lines break between words, not inside them (Hangul may otherwise break
   between any two syllables: "시나리/오"); a single over-long word still wraps instead of overflowing. Game UI only. */
html[data-bb-market="kr"] .bb-root, html[data-bb-market="kr"] [class^="bb-"], html[data-bb-market="kr"] [class*=" bb-"] { word-break: keep-all; overflow-wrap: break-word; }
/* Korean fit (QA 320–430px): the role card's Spin label stays on one line ("돌리기 🎰"). The mode cards need nothing
   extra: Korea's badge is "✓ ON" like India's, so both keep the same vertically centred card. */
html[data-bb-market="kr"] .bb-root .bb-slot .bb-btn--spin { white-space: nowrap; }
/* BLOCKBUSTER — cinema-night theme, mobile-first (docs/blockbuster-game/ARCHITECTURE.md).
   Scoped under .bb-root so nothing leaks into the site chrome. */
.bb-root {
    --bb-bg: #140b1f; --bb-bg2: #1f1030; --bb-card: #2a1742; --bb-card2: #341c52; --bb-line: rgba(255,255,255,.12);
    --bb-text: #fdf6ff; --bb-muted: #bba9cf; --bb-gold: #f5c518; --bb-orange: #f44a25; --bb-pink: #ed1681;
    --bb-good: #2ecc71; --bb-bad: #ff4d5e; --bb-radius: 16px;
    background: radial-gradient(1200px 500px at 50% -120px, #3a1a5c 0%, var(--bb-bg) 60%) var(--bb-bg);
    color: var(--bb-text); font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    padding: 18px 12px 40px; min-height: 80vh;
}
/* No layout shift (CLS) when the app draws itself: the server sends only a short "Loading…" (or the home marquee), and
   bb-app.js then renders the screen. The shell always fills at least one screen, so the ad, SEO copy and site footer below
   it start below the fold and never jump; flow-root keeps a first child's margin inside the shell (no 8 px slide). */
.bb-shell { max-width: 560px; margin: 0 auto; display: flow-root; min-height: calc(100vh - 60px); min-height: calc(100svh - 60px); }
.bb-root *, .bb-root *::before, .bb-root *::after { box-sizing: border-box; }
.bb-root button { font-family: inherit; }
.bb-loading { text-align: center; padding: 80px 0; font-size: 20px; }
.bb-muted { color: var(--bb-muted); font-size: 13px; }
.bb-root .bb-h2 { color: var(--bb-gold); }
.bb-h2 { font-family: 'Bebas Neue', var(--bb-display-hangul), 'Poppins', sans-serif; font-size: 34px; letter-spacing: 1px; margin: 4px 0 2px; color: var(--bb-gold); line-height: 1; }
.bb-root .bb-h3 { color: var(--bb-text); }
.bb-h3 { font-size: 16px; font-weight: 800; margin: 22px 0 10px; }
.bb-h3 small { font-weight: 400; color: var(--bb-muted); }
.bb-sub { color: var(--bb-muted); margin: 4px 0 0; font-size: 14px; }
.bb-head { margin: 6px 0 14px; position: relative; }
.bb-back { background: none; border: 0; color: var(--bb-muted); padding: 4px 0; font-size: 14px; cursor: pointer; }

/* buttons */
.bb-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; border-radius: 999px;
    background: linear-gradient(135deg, var(--bb-orange), var(--bb-pink)); color: #fff; font-weight: 800; font-size: 16px; padding: 12px 22px;
    cursor: pointer; box-shadow: 0 6px 20px rgba(237,22,129,.35); transition: transform .12s, filter .12s; }
@media (hover: hover) { .bb-btn:hover { filter: brightness(1.08); } }
.bb-btn:active { transform: scale(.97); }
.bb-btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.bb-btn small { font-weight: 400; font-size: 12px; opacity: .9; }
.bb-btn--xl { width: 100%; font-size: 22px; padding: 16px 20px; border-radius: 20px; }
.bb-btn--sm { font-size: 13px; padding: 7px 14px; }
.bb-btn--ghost { background: transparent; border: 1.5px solid var(--bb-line); box-shadow: none; color: var(--bb-text); }
.bb-btn--daily { width: 100%; margin-top: 12px; border-radius: 16px; }
.bb-btn--spin { width: 100%; background: linear-gradient(135deg, #ffb703, var(--bb-orange)); font-size: 18px; }
.bb-link { background: none; border: 0; color: var(--bb-muted); text-decoration: underline; cursor: pointer; font-size: 14px; padding: 10px; display: block; margin: 10px auto 0; }
.bb-pulse { animation: bb-pulse 1.6s ease-in-out infinite; }
@keyframes bb-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,197,24,.6); } 50% { box-shadow: 0 0 0 12px rgba(245,197,24,0); } }
.bb-actions { text-align: center; margin: 22px 0 6px; }
.bb-actions--stack { display: flex; flex-direction: column; gap: 10px; }

/* home */
.bb-marquee { text-align: center; padding: 26px 12px 20px; border-radius: 22px; margin-bottom: 18px; position: relative; overflow: hidden;
    background: linear-gradient(180deg, #2b1245, #1a0b2a); border: 2px solid rgba(245,197,24,.35); }
.bb-bulbs { position: absolute; inset: 6px; border-radius: 18px; pointer-events: none; border: 4px dotted #ffe38a; opacity: .85; animation: bb-bulbs 1.2s steps(2) infinite; }
@keyframes bb-bulbs { 50% { opacity: .35; } }
.bb-logo { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 58px; letter-spacing: 3px; margin: 0; line-height: 1;
    background: linear-gradient(180deg, #fff6c9, var(--bb-gold) 55%, #c98a00); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 4px 24px rgba(245,197,24,.25); }
.bb-logo span { -webkit-text-fill-color: initial; }
.bb-tagline { margin: 8px 0 0; color: #ffe9b0; font-size: 15px; }
.bb-resume { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--bb-card); border: 1px solid var(--bb-gold); border-radius: 14px; padding: 10px 14px; margin-bottom: 14px; }
.bb-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }

.bb-mode b { font-size: 15px; }
.bb-mode { background: var(--bb-card); border: 1.5px solid var(--bb-line); color: var(--bb-text); border-radius: 14px; padding: 10px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.bb-mode small { color: var(--bb-muted); font-size: 12px; }
.bb-mode.is-on { border-color: var(--bb-gold); background: var(--bb-card2); box-shadow: 0 0 0 2px rgba(245,197,24,.25) inset; }
.bb-statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0 10px; text-align: center; }
.bb-statrow div { background: var(--bb-card); border-radius: 12px; padding: 10px 4px; }
.bb-statrow b { display: block; font-size: 16px; }
.bb-statrow span { font-size: 11px; color: var(--bb-muted); }
.bb-jodis { background: var(--bb-card); border-radius: 14px; padding: 10px 14px; margin-top: 8px; }
.bb-jodis summary { cursor: pointer; font-weight: 600; }
.bb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bb-chip { font-size: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--bb-muted); }
.bb-chip--got { background: rgba(245,197,24,.16); color: #ffe38a; }
.bb-chip--bad { background: rgba(255,77,94,.16); color: #ffb3bb; }
.bb-chip em { font-style: normal; background: var(--bb-pink); color: #fff; border-radius: 6px; padding: 0 5px; font-size: 10px; margin-left: 4px; }
.bb-disclaimer { text-align: center; font-size: 11px; color: var(--bb-muted); margin-top: 16px; }

/* genres */
.bb-genres { display: grid; gap: 12px; }
.bb-genre { display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; text-align: left; border: 0; border-radius: var(--bb-radius);
    padding: 16px; color: #fff; cursor: pointer; transition: transform .12s; }
.bb-genre:active { transform: scale(.98); }
.bb-genre__emoji { grid-row: 1 / 4; font-size: 44px; align-self: center; }
.bb-genre__name { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 28px; letter-spacing: 1px; line-height: 1; }
.bb-genre__line { font-size: 14px; opacity: .92; }
.bb-genre__hint { font-size: 12px; margin-top: 6px; background: rgba(0,0,0,.25); border-radius: 999px; padding: 3px 10px; justify-self: start; }
.bb-g-ACT { background: linear-gradient(135deg, #d62828, #f77f00); }
.bb-g-ROM { background: linear-gradient(135deg, #ff5d8f, #b5179e); }
.bb-g-HOR { background: linear-gradient(135deg, #1b4332, #5a189a); }
.bb-g-SPY { background: linear-gradient(135deg, #0b132b, #3a506b); }
.bb-g-FAM { background: linear-gradient(135deg, #f4a261, #e76f51); }
.bb-g-SPO { background: linear-gradient(135deg, #2a9d8f, #1d3557); }
.bb-g-COM { background: linear-gradient(135deg, #f15bb5, #fb8500); }
.bb-g-CRI { background: linear-gradient(135deg, #1b1b1b, #9d0208); }
.bb-g-HIS { background: linear-gradient(135deg, #7f5539, #c98a00); }
.bb-g-DRA { background: linear-gradient(135deg, #415a77, #7b2cbf); }
.bb-g-SCI { background: linear-gradient(135deg, #003566, #00b4d8); }
.bb-g-DAN { background: linear-gradient(135deg, #7209b7, #f72585); }
.bb-g-PAT { background: linear-gradient(135deg, #e36414, #138808); }
.bb-g-MYT { background: linear-gradient(135deg, #9d0208, #e85d04 60%, #faa307); }

/* casting */
.bb-sticky { position: sticky; top: 0; z-index: 20; margin: 0 -12px; padding: 8px 12px; background: rgba(20,11,31,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--bb-line); }
.bb-budget__nums { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--bb-muted); flex-wrap: wrap; }
.bb-budget__nums b { color: var(--bb-text); }
.bb-budget__nums b.is-low { color: var(--bb-bad); }
.bb-meter { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; }
.bb-meter__lbl { white-space: nowrap; min-width: 92px; }
.bb-meter__bar { flex: 1; height: 8px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; }
.bb-meter__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--bb-gold), var(--bb-orange)); border-radius: 99px; transition: width .4s; }
.bb-board { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bb-slot { position: relative; background: var(--bb-card); border: 1.5px dashed var(--bb-line); border-radius: var(--bb-radius); padding: 10px; min-height: 104px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.bb-slot.is-done { border-style: solid; border-color: rgba(46,204,113,.45); }
.bb-slot.is-pending { border-style: solid; border-color: var(--bb-gold); box-shadow: 0 0 18px rgba(245,197,24,.25); }
.bb-slot.is-done { flex-direction: row; flex-wrap: wrap; align-items: center; }
.bb-slot.is-done .bb-slot__role { width: 100%; }
.bb-slot__role { font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bb-slot__who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bb-slot__who b { font-size: 13px; line-height: 1.2; }
.bb-slot__who small { color: var(--bb-muted); font-size: 11px; }
.bb-slot__pending { color: var(--bb-gold); font-size: 13px; font-weight: 600; margin: auto 0; }
.bb-era { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.12); white-space: nowrap; }
.bb-era--E70 { background: #e76f51; } .bb-era--E90 { background: #e63973; } .bb-era--E00 { background: #7b2cbf; } .bb-era--E10 { background: #2a9d8f; } .bb-era--E20 { background: #3a56d4; }
.bb-era--big { font-size: 14px; padding: 4px 12px; }
.bb-reel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800;
    background: repeating-linear-gradient(0deg, #1a0b2a 0 6px, #22103a 6px 12px); color: var(--bb-gold); border-radius: var(--bb-radius); letter-spacing: 1px; }
.bb-reel.is-landed { animation: bb-land .45s ease-out; background: linear-gradient(135deg, #3b1a5a, #1a0b2a); }
@keyframes bb-land { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
.bb-picker { margin-top: 14px; background: linear-gradient(180deg, var(--bb-card2), var(--bb-bg2)); border: 1.5px solid var(--bb-gold); border-radius: 20px; padding: 12px; scroll-margin-top: 90px; }
.bb-picker__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.bb-picker__head .bb-btn { white-space: nowrap; flex-shrink: 0; flex-direction: row; }
.bb-picker__head small { display: block; color: var(--bb-muted); font-size: 12px; margin-top: 4px; }
.bb-cards { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }   /* minmax(0): a long name can't widen the column past a 320 px screen */
.bb-card { position: relative; width: 100%; text-align: left; background: var(--bb-card); color: var(--bb-text); border: 1.5px solid var(--bb-line); border-radius: 14px; padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, transform .12s; }
.bb-card:active { transform: scale(.985); }
@media (hover: hover) { .bb-card:not(.is-off):hover { border-color: rgba(245,197,24,.6); } }
.bb-card.is-selected { border-color: var(--bb-gold); background: var(--bb-card2); box-shadow: 0 0 0 2px rgba(245,197,24,.3) inset; }
.bb-card.is-off { opacity: .45; filter: grayscale(.6); cursor: not-allowed; }
.bb-card__top { display: flex; align-items: center; gap: 10px; }
.bb-card__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bb-card__who b { font-size: 15px; line-height: 1.2; }
.bb-card__who small { color: var(--bb-muted); font-size: 12px; }
.bb-hint { font-style: normal; font-size: 11px; color: #ffe38a; margin-top: 2px; }
.bb-superstar { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px; background: #f5c518; color: #3a2a00; font-size: 10px; font-weight: 800; vertical-align: middle; }
.bb-warn { background: #ffe1e1; color: #6b0f1a; border-radius: 12px; padding: 9px 12px; margin: 10px 0; font-size: 13px; font-weight: 700; }
.bb-fee { font-weight: 800; color: var(--bb-gold); white-space: nowrap; font-size: 15px; }
.bb-card__stats { display: flex; gap: 14px; font-size: 12px; color: var(--bb-muted); flex-wrap: wrap; }
.bb-stars { color: var(--bb-gold); letter-spacing: 1px; }
.bb-trait { font-size: 12px; color: #e6d8f5; background: rgba(0,0,0,.2); border-radius: 8px; padding: 5px 8px; }
.bb-trait b { color: #ffb3d9; }
.bb-card__off { position: absolute; right: 10px; bottom: 8px; font-size: 12px; font-weight: 800; color: var(--bb-bad); }
.bb-card--mini { padding: 8px 10px; }
.bb-none { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(255,255,255,.07); border-radius: 12px; }
.bb-av { flex-shrink: 0; border-radius: 14px; display: block; }
.bb-tip { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff3c4; color: #3a2a00; border-radius: 12px; padding: 10px 12px; margin: 10px 0; font-size: 13px; font-weight: 600; }
.bb-tip button { border: 0; background: #3a2a00; color: #fff3c4; border-radius: 999px; padding: 5px 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }

/* title / release */
.bb-form { display: flex; gap: 8px; }
.bb-input { flex: 1; min-width: 0; font-size: 18px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--bb-line); background: var(--bb-card); color: var(--bb-text); font-family: inherit; }
.bb-input:focus { outline: none; border-color: var(--bb-gold); }
.bb-tagline-box { margin-top: 16px; background: var(--bb-card); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.bb-tagline-box small { color: var(--bb-muted); }
.bb-tagline-box b { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 22px; letter-spacing: 1px; color: #ffe38a; }
.bb-windows { display: grid; gap: 10px; }
.bb-window { display: flex; gap: 12px; align-items: center; text-align: left; background: var(--bb-card); color: var(--bb-text); border: 1.5px solid var(--bb-line); border-radius: var(--bb-radius); padding: 12px; cursor: pointer; }
.bb-window.is-selected { border-color: var(--bb-gold); }
@media (hover: hover) { .bb-window:hover { border-color: rgba(245,197,24,.6); } }
.bb-window__emoji { font-size: 36px; }
.bb-window__body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.bb-window__body b { font-size: 17px; }
.bb-window__body small { color: var(--bb-muted); font-size: 13px; }
.bb-window__meters { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 12px; margin-top: 6px; }
@media (max-width: 400px) { .bb-window__meters { grid-template-columns: 1fr; } }
.bb-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.bb-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.15); }
.bb-dots--crowd i.on { background: var(--bb-good); }
.bb-dots--risk i.on { background: var(--bb-bad); }

/* poster (placeholder until Phase 2 poster generator) */
.bb-poster { position: relative; aspect-ratio: 9 / 13; border-radius: 18px; overflow: hidden; margin: 12px auto; max-width: 300px; box-shadow: 0 16px 40px rgba(0,0,0,.5); text-align: center; color: #fff; }
.bb-poster--big { max-width: 360px; }
.bb-poster::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.85) 80%); }
.bb-poster__villain { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); opacity: .35; filter: grayscale(.4); }
.bb-poster__leads { position: absolute; top: 22%; left: 0; right: 0; display: flex; justify-content: center; align-items: flex-end; gap: 6px; z-index: 1; }
.bb-poster .bb-av--art { background: none !important; border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 10px rgba(245,197,24,.35)); -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); mask-image: linear-gradient(to bottom, #000 72%, transparent 98%); }  /* painted cast = cut-outs on posters, not card tiles */
.bb-poster__leads .bb-av--art { margin: 0 -10px; }
.bb-poster__bottom { position: absolute; left: 6%; right: 6%; bottom: 3%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bb-poster__tag { font-size: 10px; letter-spacing: 2px; opacity: .9; }
.bb-poster__title { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 34px; line-height: .95; letter-spacing: 1px; text-shadow: 0 3px 12px rgba(0,0,0,.6); color: #fff2b3; word-break: break-word; }
.bb-poster--big .bb-poster__title { font-size: 42px; }
.bb-poster__credits { font-size: 8px; opacity: .8; line-height: 1.4; }
.bb-poster__release { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--bb-gold); }
.bb-poster__foot { font-size: 8px; opacity: .6; }
.bb-poster__gross, .bb-poster__badge { position: absolute; z-index: 2; }
.bb-poster__gross { top: 3%; right: 4%; font-size: 10px; font-weight: 800; background: rgba(0,0,0,.6); padding: 4px 8px; border-radius: 8px; }
.bb-poster__badge { top: 3%; left: 4%; font-size: 10px; background: rgba(0,0,0,.6); padding: 4px 8px; border-radius: 8px; }
.bb-stamp { position: absolute; z-index: 3; top: 12%; left: 4%; transform: rotate(-14deg); font-size: 22px !important; border: 4px solid var(--c); color: var(--c); background: rgba(255,255,255,.85);
    font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 30px; letter-spacing: 2px; padding: 2px 16px; border-radius: 8px; white-space: nowrap; }

/* mahurat summary */
.bb-summary { background: var(--bb-card); border-radius: var(--bb-radius); padding: 12px 14px; }
.bb-summary__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--bb-line); font-size: 14px; }
.bb-summary__row .bb-link { margin: 0; padding: 0; display: inline; }
.bb-summary__cast { list-style: none; margin: 6px 0; padding: 0; }
.bb-summary__cast li { display: grid; grid-template-columns: 22px 82px 1fr auto; gap: 6px; padding: 5px 0; font-size: 13px; border-bottom: 1px dashed var(--bb-line); }
.bb-summary__cast span { color: var(--bb-muted); }
.bb-summary__cast em { font-style: normal; color: var(--bb-gold); font-weight: 600; }

/* simulation */
.bb-simhead { position: sticky; top: 0; z-index: 20; text-align: center; background: rgba(20,11,31,.95); backdrop-filter: blur(6px); margin: 0 -12px; padding: 10px 12px; border-bottom: 1px solid var(--bb-line); }
.bb-simhead__lbl { font-size: 12px; color: var(--bb-muted); text-transform: uppercase; letter-spacing: 2px; }
.bb-simhead__num { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 44px; color: var(--bb-gold); line-height: 1.05; }
.bb-simhead__ms { min-height: 20px; font-weight: 800; font-size: 14px; color: #7dffb0; }
.bb-simhead__ms.is-pop { animation: bb-pop .6s ease-out; }
@keyframes bb-pop { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
.bb-simskip { position: absolute; right: 12px; top: 12px; }
.bb-feed { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
.bb-beat { background: var(--bb-card); border-radius: var(--bb-radius); padding: 12px; opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .35s; scroll-margin-top: 120px; }
.bb-beat.is-in { opacity: 1; transform: none; }
.bb-beat--intro { background: transparent; padding: 0; }
.bb-beat__lbl { font-size: 12px; color: var(--bb-muted); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 4px; }
.bb-fdfs { text-align: center; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: clamp(22px, 7.2vw, 30px); letter-spacing: 2px; white-space: nowrap; color: var(--bb-gold); }
.bb-bignum { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 40px; color: #fff; line-height: 1; margin-bottom: 8px; }
.bb-weekline { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 6px; }
.bb-weekline b { color: var(--bb-gold); }
.bb-news { display: flex; gap: 8px; align-items: flex-start; background: #fff; color: #1b1b1b; border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-family: Georgia, serif; }
.bb-news--up { border-left: 5px solid var(--bb-good); }
.bb-news--down { border-left: 5px solid var(--bb-bad); }
.bb-news--shock { background: #2a0008; color: #ffd6dc; border-left: 5px solid #ff2e4d; box-shadow: 0 0 0 2px rgba(255,46,77,.35); animation: bb-shock .45s ease-in-out 2; }
@keyframes bb-shock { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .bb-news--shock, .bb-war { animation: none; } }
.bb-news--opp { background: #fff8d6; border-left: 5px solid #f5c518; box-shadow: 0 0 0 2px rgba(245,197,24,.35); }

/* 🚨 War Room */
.bb-war { border-radius: 14px; padding: 12px; margin: 12px 0; animation: bb-warin .5s ease-out; }
.bb-war--shock { background: linear-gradient(160deg, #3a0010, #1a0008); border: 2px solid #ff2e4d; }
.bb-war--opportunity { background: linear-gradient(160deg, #3a2c00, #1a1400); border: 2px solid #f5c518; }
@keyframes bb-warin { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bb-war__head { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 26px; letter-spacing: 2px; text-align: center; }
.bb-war__ask { text-align: center; font-size: 14px; color: #f3e7c9; margin-bottom: 10px; }
.bb-war__opts { display: grid; gap: 8px; }
.bb-war__opt { text-align: left; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 10px 12px; cursor: pointer; font: inherit; }
.bb-war__opt:focus-visible { background: rgba(255,255,255,.16); outline: none; border-color: #fff; }
@media (hover: hover) { .bb-war__opt:hover { background: rgba(255,255,255,.16); border-color: #fff; } }
.bb-war__opt.is-gamble { border-color: #f5c518; }
.bb-war__opt b { display: block; font-size: 15px; margin: 2px 0; }
.bb-war__opt small { display: block; font-size: 12px; color: #d9d9e3; line-height: 1.35; }
.bb-war__tag { font-size: 11px; font-weight: 700; color: #ffe38a; }
.bb-war__done { text-align: center; padding: 6px 0; }
/* answered: the box keeps its height (bb-app.js locks it — no layout shift), so centre the result in it */
.bb-war[data-done] { display: flex; flex-direction: column; justify-content: center; }
.bb-war__done b { display: block; font-size: 20px; margin-top: 4px; }
.bb-war__done--win b { color: #7dffa8; }
.bb-war__done--lose b { color: #ff8a9a; }

/* shareable journey line on verdict / clash result */
.bb-story { margin: 12px auto; max-width: 520px; padding: 10px 12px; border-radius: 12px; font-weight: 700; font-size: 15px; line-height: 1.35; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); }
.bb-story--comeback, .bb-story--masterstroke { border-color: #f5c518; color: #ffe38a; }
.bb-story--backfire, .bb-story--cursed { border-color: #ff8a9a; color: #ffd6dc; }
.bb-tweet { background: rgba(0,0,0,.25); border-radius: 12px; padding: 8px 10px; margin-top: 6px; font-size: 14px; }
.bb-tweet__h { font-size: 12px; color: #9fd3ff; font-weight: 600; }
.bb-tweet__m { font-size: 11px; color: var(--bb-muted); margin-top: 3px; }
.bb-clash { text-align: center; font-weight: 800; font-size: 18px; color: #ffb3bb; }
.bb-clash small { display: block; font-weight: 400; font-size: 12px; color: var(--bb-muted); margin-top: 4px; }
.bb-clash--solo { color: #7dffb0; }
.bb-critic { font-size: 18px; font-weight: 800; }
.bb-critic span { color: var(--bb-gold); font-size: 22px; letter-spacing: 2px; }
/* critic stars (bb-app.js criticStars): one ★ glyph for all, so half stars render the same on every phone */
/* letter-spacing 0 + margin for the gap: each star's box is exactly one glyph wide, so the 50% overlay is exactly half */
.bb-cstar { position: relative; display: inline-block; font-style: normal; letter-spacing: 0; margin-right: 2px; color: rgba(255,255,255,.25); }
.bb-cstar:last-child { margin-right: 0; }
.bb-cstar.is-on { color: var(--bb-gold); }
.bb-cstar.is-half::before { content: '★'; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; white-space: nowrap; color: var(--bb-gold); }
.bb-beat blockquote { margin: 6px 0 0; font-style: italic; color: #e6d8f5; }
.bb-jodi { text-align: center; background: linear-gradient(135deg, rgba(245,197,24,.2), rgba(237,22,129,.2)); border-radius: 12px; padding: 12px; }
.bb-jodi div { font-weight: 800; color: var(--bb-gold); font-size: 18px; }
.bb-jodi--bad { background: rgba(255,77,94,.15); }
.bb-jodi--bad div { color: var(--bb-bad); }

/* verdict */
.bb-verdict { text-align: center; }
.bb-verdict__stamp { display: inline-flex; align-items: center; gap: 10px; margin: 12px auto 16px; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 44px; letter-spacing: 3px;
    color: var(--c); border: 5px solid var(--c); border-radius: 12px; padding: 4px 22px; transform: rotate(-6deg); animation: bb-stamp .6s cubic-bezier(.2,1.6,.4,1) both; background: rgba(255,255,255,.04); }
.bb-verdict__stamp span { font-size: 36px; }
@keyframes bb-stamp { 0% { transform: scale(3) rotate(-6deg); opacity: 0; } 100% { transform: scale(1) rotate(-6deg); opacity: 1; } }
.bb-verdict__lbl { font-size: 12px; color: var(--bb-muted); letter-spacing: 2px; text-transform: uppercase; }
.bb-verdict__gross { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 64px; color: var(--bb-gold); line-height: 1; }
.bb-roast { font-size: 17px; font-style: italic; margin: 10px 0; color: #ffe9b0; }

/* report card */
.bb-report { text-align: left; background: var(--bb-card); border-radius: var(--bb-radius); padding: 4px 14px 14px; }
.bb-report__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bb-report__list li { display: block; text-align: left; padding: 8px 10px; border-radius: 10px; font-size: 14px; }
.bb-report__list--pos li { background: rgba(46,204,113,.12); }
.bb-report__list--pos li::before { content: '✅ '; }
.bb-report__list--neg li { background: rgba(255,77,94,.12); }
.bb-report__list--neg li::before { content: '❌ '; }
.bb-report .bb-meter { margin-top: 12px; }

/* modal + toast */
/* modals + toasts are appended to <body>, OUTSIDE .bb-root: give them the same design tokens, or every var() inside
   them (button gradients, gold accents) is invalid and silently renders as nothing */
.bb-modal, .bb-toast {
    --bb-bg: #140b1f; --bb-bg2: #1f1030; --bb-card: #26153d; --bb-card2: #321b52; --bb-line: rgba(255,255,255,.10); --bb-line2: rgba(255,255,255,.18);
    --bb-text: #fdf6ff; --bb-muted: #bba9cf; --bb-gold: #f5c518; --bb-orange: #f44a25; --bb-pink: #ed1681;
    --bb-good: #2ecc71; --bb-bad: #ff4d5e; --bb-radius: 16px;
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --r1: 12px; --r2: 16px; --r3: 22px;
}
.bb-modal { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.bb-modal__box { background: #1f1030; color: #fdf6ff; border-radius: 20px; padding: 20px; max-width: 460px; width: 100%; font-family: 'Poppins', sans-serif; }
.bb-modal__box .bb-h2 { color: #f5c518; }
.bb-modal__box ol { padding-left: 20px; line-height: 1.6; }
.bb-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0; background: #1f1030; color: #fff; border: 1px solid #f5c518; padding: 10px 18px; border-radius: 999px; z-index: 1001; transition: all .3s; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; }
.bb-toast--in { transform: translate(-50%, 0); opacity: 1; }

@media (min-width: 560px) {
    .bb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bb-cards--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
    .bb-logo { font-size: 46px; }
    .bb-board { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .bb-pulse, .bb-bulbs, .bb-verdict__stamp, .bb-reel.is-landed { animation: none; }
    .bb-beat { transition: none; }
}

/* Phase 2 — poster image, share screen, film page */
.bb-posterslot { margin: 12px auto; max-width: 360px; }
.bb-posterslot .bb-poster { margin: 0 auto; }
.bb-posterimg { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 18px; box-shadow: 0 16px 40px rgba(0,0,0,.55); animation: bb-fadein .5s ease-out; }
@keyframes bb-fadein { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.bb-printing { aspect-ratio: 9 / 16; display: flex; align-items: center; justify-content: center; border-radius: 18px; background: repeating-linear-gradient(135deg, var(--bb-card) 0 14px, var(--bb-card2) 14px 28px); color: var(--bb-muted); font-weight: 600; background-size: 200% 200%; animation: bb-stripes 1.2s linear infinite; }
@keyframes bb-stripes { to { background-position: 40px 0; } }
.bb-nick { background: var(--bb-card); border: 1.5px solid var(--bb-gold); border-radius: var(--bb-radius); padding: 14px; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.bb-nick small { color: var(--bb-muted); }
.bb-nick .bb-link { margin: 0 auto; }
.bb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bb-row .bb-btn { font-size: 14px; padding: 10px 8px; }
.bb-linkbox { font-size: 12px; color: var(--bb-muted); background: rgba(0,0,0,.25); border-radius: 10px; padding: 8px 10px; word-break: break-all; text-align: center; }
.bb-filmintro { font-size: 18px; font-weight: 800; text-align: center; line-height: 1.35; margin: 8px 0 4px; color: #ffe9b0; }
.bb-filmnote { text-align: center; color: var(--bb-muted); font-size: 14px; margin: 6px 0 0; }

/* Phase 3 — Aaj Ki Release: daily button, rank box, leaderboard, countdown */
.bb-btn--alt { background: linear-gradient(135deg, #7b2cbf, #3a56d4); box-shadow: 0 6px 20px rgba(58,86,212,.35); margin-top: 12px; }
.bb-btn--done { background: linear-gradient(135deg, #2a9d4b, #1d6fd8); box-shadow: 0 6px 20px rgba(42,157,75,.3); }
.bb-statrow--4 { grid-template-columns: repeat(4, 1fr); }
.bb-statrow--4 b { font-size: 14px; }
.bb-homelinks { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.bb-homelinks .bb-link { margin: 6px 0 0; }
.bb-dailybox { background: linear-gradient(135deg, rgba(245,197,24,.18), rgba(237,22,129,.14)); border: 1.5px solid rgba(245,197,24,.5); border-radius: var(--bb-radius); padding: 12px 14px; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.bb-dailybox--practice { background: rgba(255,255,255,.06); border-color: var(--bb-line); }
.bb-dailybox__tag { font-size: 12px; color: var(--bb-muted); text-transform: uppercase; letter-spacing: 1px; }
.bb-dailybox small { color: var(--bb-muted); }
.bb-rank { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 32px; letter-spacing: 1px; color: #fff; }
.bb-streak { font-weight: 800; color: #ffb347; }
.bb-lbnick { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.bb-lbnick .bb-input { font-size: 15px; padding: 9px 12px; }
.bb-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--bb-card); border-radius: 999px; padding: 4px; margin-bottom: 12px; }
.bb-tab { border: 0; border-radius: 999px; padding: 9px; background: transparent; color: var(--bb-muted); font-weight: 700; cursor: pointer; }
.bb-tab.is-on { background: linear-gradient(135deg, var(--bb-orange), var(--bb-pink)); color: #fff; }
.bb-center { text-align: center; }
.bb-lblist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bb-lbrow { display: grid; grid-template-columns: 52px 1fr auto; gap: 8px; align-items: center; background: var(--bb-card); border-radius: 12px; padding: 9px 12px; }
.bb-lbrow.is-me { border: 1.5px solid var(--bb-gold); background: var(--bb-card2); }
.bb-lbrow__rank { font-weight: 800; color: var(--bb-gold); }
.bb-lb .bb-lbrow:nth-child(1) .bb-lbrow__rank::after { content: ' 🥇'; }
.bb-lb .bb-lbrow:nth-child(2) .bb-lbrow__rank::after { content: ' 🥈'; }
.bb-lb .bb-lbrow:nth-child(3) .bb-lbrow__rank::after { content: ' 🥉'; }
.bb-lbrow.is-pinned .bb-lbrow__rank::after { content: ''; }
.bb-lbrow__who { display: flex; flex-direction: column; min-width: 0; }
.bb-lbrow__who b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-lbrow__who small { color: var(--bb-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-lbrow__gross { font-weight: 800; font-size: 14px; white-space: nowrap; }
.bb-lbgap { text-align: center; color: var(--bb-muted); }
.bb-printing--short { aspect-ratio: auto; height: 120px; }
.bb-dailycard { text-align: center; background: var(--bb-card); border-radius: 20px; padding: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bb-dailycard__title { font-weight: 800; font-size: 18px; }
.bb-verdict__stamp--sm { font-size: 30px; margin: 6px auto; padding: 2px 14px; }
.bb-verdict__stamp--sm span { font-size: 24px; }
.bb-countdown { text-align: center; margin: 16px 0 4px; }
.bb-countdown small { display: block; color: var(--bb-muted); text-transform: uppercase; letter-spacing: 2px; font-size: 11px; }
.bb-countdown b { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 44px; color: var(--bb-gold); letter-spacing: 2px; }
.bb-link--inline { display: inline; margin: 0; padding: 0; color: #fff; }
.bb-lbrow { grid-template-columns: 74px 1fr auto; }
.bb-lbrow__rank { white-space: nowrap; font-size: 15px; }
.bb-verdict__stamp--sm { white-space: nowrap; font-size: 24px; letter-spacing: 1px; max-width: 100%; }

/* Phase 4 — Box Office Clash */
.bb-small { font-size: 12px; }
.bb-lockline { background: rgba(245,197,24,.12); border: 1px dashed rgba(245,197,24,.5); border-radius: 12px; padding: 8px 12px; margin: 8px 0; font-size: 13px; text-align: center; color: #ffe9b0; }
.bb-newsbadge { display: block; width: 100%; margin-bottom: 12px; border: 0; border-radius: 14px; padding: 10px 14px; font-weight: 800; font-size: 15px; cursor: pointer;
    background: linear-gradient(135deg, #ffd166, #f44a25); color: #2b0f00; animation: bb-pulse 1.6s ease-in-out infinite; }
.bb-new { font-style: normal; background: var(--bb-pink); color: #fff; border-radius: 6px; padding: 0 6px; font-size: 10px; margin-left: 4px; vertical-align: middle; }
.bb-clashgrid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; margin-top: 10px; }
.bb-vs { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 34px; color: var(--bb-pink); text-shadow: 0 0 18px rgba(237,22,129,.6); }
.bb-clashside { text-align: center; min-width: 0; }
.bb-clashside__who { font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-clashside__title { font-size: 12px; color: var(--bb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-clashside.is-win .bb-posterimg { box-shadow: 0 0 0 3px var(--bb-gold), 0 12px 30px rgba(245,197,24,.35); }
.bb-posterslot--half { margin: 6px auto; max-width: 180px; }
.bb-posterslot--half .bb-printing { font-size: 26px; }
.bb-race { background: var(--bb-card); border-radius: var(--bb-radius); padding: 12px; margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.bb-race__week { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 22px; color: var(--bb-gold); text-align: center; letter-spacing: 2px; }
.bb-racerow { display: grid; grid-template-columns: 76px 1fr 86px; gap: 8px; align-items: center; font-size: 13px; }
.bb-racerow__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-racerow__bar { height: 16px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.bb-racerow__bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #6ea8fe, #3a56d4); transition: width .6s ease-out; }
.bb-racerow:last-child .bb-racerow__bar i { background: linear-gradient(90deg, var(--bb-orange), var(--bb-pink)); }
.bb-racerow__bar.is-win { box-shadow: 0 0 0 2px var(--bb-gold); }
.bb-racerow b { text-align: right; white-space: nowrap; }
.bb-clashwin { text-align: center; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 30px; letter-spacing: 1px; color: var(--bb-gold); margin: 6px 0; animation: bb-stamp .6s cubic-bezier(.2,1.6,.4,1) both; }
.bb-lbrow.is-won { border-left: 4px solid var(--bb-good); }
.bb-lbrow.is-lost { border-left: 4px solid var(--bb-bad); }
.bb-lbrow__gross small { display: block; font-weight: 400; color: var(--bb-muted); font-size: 11px; text-align: right; }
.bb-lbrow--link { padding: 0; }
.bb-lbrow--link a { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px 12px; color: inherit; text-decoration: none; grid-column: 1 / -1; }

/* Phase 5 — Friend Casting: Star Profiles, Cast a Friend, filmography */
.bb-btn--friend { width: 100%; margin-top: 6px; font-size: 13px; padding: 7px 10px; }
.bb-era--friend { background: linear-gradient(135deg, #ffb703, #f44a25); }
.bb-picker--friend { border-color: #ffb703; }
.bb-card--friend { border-color: rgba(255,183,3,.35); }
.bb-newsbadge--cast { background: linear-gradient(135deg, #a0e7e5, #6ea8fe); color: #081a33; }
.bb-joinbox { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(255,183,3,.12); border: 1.5px dashed rgba(255,183,3,.6); border-radius: 14px; padding: 10px 12px; margin: 12px 0; font-size: 13px; }
.bb-joinbox .bb-btn { flex-shrink: 0; flex-direction: row; }
.bb-castshares { background: var(--bb-card); border: 1.5px solid rgba(255,183,3,.5); border-radius: var(--bb-radius); padding: 12px; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.bb-castshares__btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.bb-castshares__btns .bb-btn { flex-direction: row; margin: 0; }
.bb-quote { background: var(--bb-card); border-radius: var(--bb-radius); padding: 12px 14px; margin: 10px 0; }
.bb-quote small { color: var(--bb-muted); }
.bb-quote blockquote { margin: 6px 0 0; font-size: 17px; font-weight: 600; color: #ffe9b0; }
.bb-btn--danger { color: #ff9aa5; border-color: rgba(255,77,94,.5); }
.bb-pe { display: flex; flex-direction: column; gap: 8px; }
.bb-pe__preview { display: flex; justify-content: center; margin: 4px 0 8px; }
.bb-pe__preview .bb-av { border-radius: 28px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.bb-pe__lbl { font-size: 12px; color: var(--bb-muted); text-transform: uppercase; letter-spacing: 1px; }
.bb-pe__row { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.bb-pe__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bb-chip--opt { border: 1.5px solid var(--bb-line); background: var(--bb-card); color: var(--bb-text); cursor: pointer; font-size: 13px; padding: 6px 12px; }
.bb-chip--opt.is-on { border-color: var(--bb-gold); background: var(--bb-card2); color: #ffe38a; }
.bb-swatch { width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; }
.bb-swatch.is-on { border-color: var(--bb-gold); box-shadow: 0 0 0 3px rgba(245,197,24,.35); }
.bb-starcard { display: flex; gap: 14px; align-items: center; background: var(--bb-card); border-radius: 20px; padding: 14px; }
.bb-starcard .bb-av { border-radius: 24px; }
.bb-starcard__who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bb-starcard__who b { font-size: 22px; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; letter-spacing: 1px; }
.bb-starcard__who small { color: var(--bb-muted); }
.bb-starcard__who .bb-chip { align-self: flex-start; }
.bb-lbrow--circle { grid-template-columns: 40px 1fr auto; }
.bb-lbrow--circle a { color: inherit; }
.bb-starpage .bb-btn--sm { margin: 10px auto; display: flex; }
.bb-root ul.bb-lblist, .bb-root ol.bb-lblist { padding-left: 0; margin-left: 0; }

/* Phase 6 — ads (banner = project's existing unit, below the game) + local test overlay + rewarded UI */
.bb-ad { max-width: 560px; }
.bb-adov { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; padding: 16px; font-family: 'Poppins', sans-serif; }
.bb-adov__box { background: #fff; color: #111; border-radius: 18px; padding: 28px 22px; width: 100%; max-width: 360px; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.bb-adov__tag { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: #777; }
.bb-adov__big { font-size: 24px; font-weight: 800; }
.bb-adov__count { color: #555; }
.bb-adov__skip { border: 0; background: #eee; border-radius: 999px; padding: 8px 14px; font-weight: 700; cursor: pointer; }
.bb-locked { display: flex; flex-direction: column; align-items: center; gap: 8px; background: rgba(255,255,255,.05); border: 1.5px dashed var(--bb-line); border-radius: 12px; padding: 10px; margin: 12px 0; font-size: 13px; color: var(--bb-muted); }
.bb-locked .bb-btn { flex-direction: row; }
.bb-tips__list { background: var(--bb-card); border-radius: var(--bb-radius); padding: 14px 14px 14px 34px; line-height: 1.6; display: flex; flex-direction: column; gap: 8px; }

/* Celebrity Stars (§5.13) */
.bb-era--CRK { background: linear-gradient(135deg, #1d6fd8, #2a9d4b); }
.bb-jodi--crk { background: linear-gradient(135deg, rgba(29,111,216,.25), rgba(42,157,75,.25)); }
.bb-link--muted { color: var(--bb-muted); font-size: 11px; }
.bb-input--light { background: #fff; color: #111; border-color: #ccc; margin: 6px 0; width: 100%; font-size: 15px; }
.bb-era--E80 { background: #ef476f; }
.bb-jodi--aff { background: linear-gradient(135deg, rgba(255,209,102,.25), rgba(244,74,37,.2)); }

/* ════════════════════════════════════════════════════════════════════════════
   v2 PREMIUM MOBILE LAYER (2026-09-25): one spacing/type/radius system, native-app
   feel (bottom action dock, bottom-sheet modals, 44–58px touch targets, safe areas),
   and guards so the site's global h3/li/summary/link styles can't leak into the game.
   ════════════════════════════════════════════════════════════════════════════ */
.bb-root {
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
    --r1: 12px; --r2: 16px; --r3: 22px;
    --bb-card: #26153d; --bb-card2: #321b52; --bb-line: rgba(255,255,255,.10); --bb-line2: rgba(255,255,255,.18);
    padding: var(--s3) var(--s4) calc(var(--s6) + env(safe-area-inset-bottom));
    font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
    overflow-x: clip;
}
.bb-root button, .bb-root summary { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.bb-root :focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 2px; }

/* leak guards (site CSS) */
.bb-root p, .bb-root h1, .bb-root h2, .bb-root h3, .bb-root blockquote { margin-top: 0; }
.bb-root ul, .bb-root ol { margin-top: 0; margin-bottom: 0; }
.bb-root li { text-align: left; }
.bb-root a { text-decoration: none; }

/* type scale */
.bb-root h2.bb-h2 { font-size: clamp(30px, 9.4vw, 40px); line-height: .95; margin: 0 0 var(--s1); letter-spacing: .5px; }
.bb-root p.bb-sub { font-size: 14px; margin: var(--s1) 0 0; }
.bb-root h3.bb-h3 { font-family: 'Poppins', sans-serif; font-size: 17px !important; /* site master forces h3 sizes */ font-weight: 800; line-height: 1.25; margin: var(--s6) 0 var(--s3);
    display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; letter-spacing: 0; }
.bb-root h3.bb-h3 small { font-size: 13px; font-weight: 500; }
.bb-head { margin: var(--s2) 0 var(--s4); }

/* back = pill */
.bb-root .bb-back { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 6px 14px 6px 10px; margin: 0 0 var(--s3);
    background: rgba(255,255,255,.07); border-radius: 999px; color: #e7dcf5; font-size: 13px; font-weight: 600; }

/* buttons */
.bb-root .bb-btn { min-height: 48px; font-size: 16px; line-height: 1.2; letter-spacing: .2px; padding: 12px 22px; }
.bb-root .bb-btn--xl { min-height: 58px; font-size: 19px; border-radius: 18px; padding: 14px 18px; }
.bb-root .bb-btn--xl small { font-size: 12.5px; }
.bb-root .bb-btn--sm { min-height: 38px; font-size: 13px; padding: 8px 14px; }
.bb-root .bb-btn--ghost { border-color: var(--bb-line2); background: rgba(255,255,255,.04); }
.bb-root .bb-btn[disabled] { background: #3a2a52; color: rgba(255,255,255,.55); opacity: 1; }
.bb-root .bb-btn:active:not([disabled]) { transform: scale(.97); filter: brightness(.95); }
.bb-root .bb-link { text-decoration: none; font-weight: 600; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.bb-root .bb-btn--release { background: linear-gradient(135deg, #ffb703, var(--bb-orange) 55%, var(--bb-pink)); box-shadow: 0 10px 30px rgba(244,74,37,.45); }

/* native bottom action dock */
.bb-dockspace { height: calc(100px + env(safe-area-inset-bottom) + var(--bb-ad-lift, 0px)); }
.bb-dock { position: fixed; left: 0; right: 0; bottom: var(--bb-ad-lift, 0px); z-index: 900; padding: 20px var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(20,11,31,0) 0, #140b1f 18px); pointer-events: none; }
.bb-dock__in { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
.bb-dock__in .bb-btn { width: 100%; }
.bb-dock__hint { text-align: center; color: var(--bb-muted); font-size: 12.5px; }
.bb-toast { bottom: calc(108px + env(safe-area-inset-bottom)); }

/* home */
.bb-marquee { padding: 24px 14px 20px; margin-bottom: var(--s4); border-radius: var(--r3); }
.bb-root h1.bb-logo { font-size: clamp(40px, 12.4vw, 60px); white-space: nowrap; }
.bb-root h1.bb-logo span { font-size: .7em; vertical-align: .12em; }
.bb-root p.bb-tagline { font-size: 14.5px; margin: var(--s2) auto 0; max-width: 300px; line-height: 1.4; }
.bb-home .bb-btn--xl + .bb-btn--xl { margin-top: var(--s3); }
.bb-modes { gap: var(--s2); margin-top: var(--s3); }
.bb-mode { padding: 12px; border-radius: var(--r2); min-height: 64px; justify-content: center; }
.bb-mode b { font-size: 14.5px; }
.bb-mode small { font-size: 12px; line-height: 1.3; }
.bb-root .bb-statrow { gap: var(--s2); margin: var(--s4) 0 var(--s2); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb-root .bb-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb-root .bb-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 359px) {
    .bb-tile { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 10px 6px; min-height: 76px; }
    .bb-tile__lbl { white-space: normal; font-size: 12.5px; }
}
@media (max-width: 380px) {
    .bb-root .bb-joinbox { flex-direction: column; align-items: stretch; text-align: center; }
    .bb-root .bb-joinbox .bb-btn { width: 100%; }
}
.bb-root .bb-statrow div { border-radius: 14px; padding: 12px 4px 10px; background: var(--bb-card); border: 1px solid var(--bb-line); }
.bb-root .bb-statrow b { font-size: 16px; white-space: nowrap; line-height: 1.2; }
.bb-root .bb-statrow span { font-size: 11px; display: block; margin-top: 2px; }
.bb-root .bb-statrow b { font-size: 15px; }
.bb-root .bb-link.bb-link--muted { display: inline; min-height: 0; padding: 0; margin: 0; text-decoration: underline; font-weight: 500; }
.bb-root .bb-jodis { border: 1px solid var(--bb-line); border-radius: var(--r2); padding: 0 var(--s4); }
.bb-root .bb-jodis summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 50px; font-size: 15px; font-weight: 700; cursor: pointer; }
.bb-root .bb-jodis summary::-webkit-details-marker { display: none; }
.bb-root .bb-jodis summary > span { flex: 1; }
.bb-root .bb-jodis summary b { color: var(--bb-gold); font-size: 14px; }
.bb-root .bb-jodis summary::after { content: '\203A'; font-size: 22px; color: var(--bb-muted); transition: transform .2s; margin-left: 4px; }
.bb-root .bb-jodis[open] summary::after { transform: rotate(90deg); }
.bb-root .bb-jodis[open] { padding-bottom: var(--s4); }
.bb-root .bb-jodis .bb-chips { margin-top: 0; }
.bb-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); margin-top: var(--s3); }
.bb-tile { display: flex; align-items: center; gap: 10px; min-height: 56px; min-width: 0; padding: 10px 12px; text-align: left;
    background: var(--bb-card); border: 1px solid var(--bb-line); border-radius: var(--r2); color: var(--bb-text); font: inherit; cursor: pointer; transition: transform .12s, border-color .15s; }
.bb-tile:active { transform: scale(.97); }
.bb-tile__ic { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1;
    background: rgba(255,255,255,.07); border-radius: 10px; }
.bb-tile__lbl { font-size: 13.5px; font-weight: 600; line-height: 1.2; color: #eee4fa; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-root .bb-disclaimer { font-size: 11px; line-height: 1.5; margin-top: var(--s5); }

/* genre */
.bb-genres { gap: var(--s3); }
.bb-genre { grid-template-columns: 52px 1fr; padding: 16px 14px; border-radius: var(--r3); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.bb-genre__emoji { font-size: 40px; justify-self: center; }
.bb-genre__name { font-size: 27px; }
.bb-genre__line { font-size: 13.5px; line-height: 1.35; margin-top: 2px; }
.bb-genre__hint { font-size: 12px; margin-top: 8px; padding: 4px 10px; }

/* casting */
.bb-root .bb-sticky { margin: 0 calc(-1 * var(--s4)) var(--s2); padding: 10px var(--s4); }
.bb-root .bb-board { grid-template-columns: 1fr 1fr; gap: 10px; }
.bb-slot { padding: 10px; min-height: 112px; border-radius: var(--r2); }
.bb-slot__role { font-size: 12.5px; }
.bb-root .bb-slot .bb-btn--spin { min-height: 44px; font-size: 16px; margin-top: auto; flex-direction: row; }
/* a tile with ONLY a Spin button (Director: friends can't direct) keeps it right under the label, level with the Spin
   buttons of the tiles beside it, instead of dropping to the bottom of the stretched grid cell */
.bb-root .bb-slot .bb-btn--spin:last-child { margin-top: 0; }
.bb-root .bb-slot .bb-btn--friend { min-height: 34px; font-size: 12px; flex-direction: row; }
.bb-picker { border-width: 1px; border-radius: var(--r3); padding: 14px 12px; box-shadow: 0 16px 36px rgba(0,0,0,.35); }
.bb-cards { gap: 10px; }
.bb-card { padding: 12px; border-radius: var(--r2); gap: 8px; border-width: 1px; }
.bb-card__who small { font-size: 12px; line-height: 1.35; }
.bb-superstar { margin: 2px 0; align-self: flex-start; }
.bb-fee { align-self: flex-start; padding-top: 2px; }
.bb-trait { line-height: 1.4; padding: 7px 10px; border-radius: 10px; }
.bb-card__off { position: static; align-self: flex-end; margin-top: -4px; }
.bb-root .bb-tip { border-radius: var(--r1); line-height: 1.35; }
.bb-root .bb-tip button { min-height: 32px; }

/* title */
.bb-root .bb-form { gap: var(--s2); align-items: stretch; }
.bb-root .bb-form .bb-input { font-size: 17px; min-height: 52px; }
.bb-root .bb-form .bb-btn { flex: 0 0 auto; min-height: 52px; padding: 0 16px; font-size: 15px; flex-direction: row; }
.bb-tagline-box { border-radius: var(--r2); padding: 14px; }
.bb-root .bb-form .bb-input { width: 100%; }
/* title field with a built-in 🎲 (premium: gold dice, spin while rolling, soft flash when the name lands) */
.bb-titlefield { position: relative; margin-top: var(--s2); }
.bb-root .bb-titlefield .bb-input { width: 100%; min-height: 60px; padding-right: 72px; font-size: 18px; font-weight: 600; border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--bb-card); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: box-shadow .2s, border-color .2s; }
.bb-root .bb-titlefield .bb-input.is-rolling { color: #ffe38a; border-color: rgba(245,197,24,.6); }
.bb-root .bb-titlefield .bb-input.is-landed { border-color: var(--bb-gold); box-shadow: 0 0 0 4px rgba(245,197,24,.18), inset 0 1px 0 rgba(255,255,255,.06); }
.bb-dice { position: absolute; top: 50%; right: 7px; transform: translateY(-50%); width: 48px; height: 48px; border: 0; border-radius: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1;
    background: radial-gradient(120% 120% at 30% 20%, #fff3b0, var(--bb-gold) 45%, #e08a00); box-shadow: 0 6px 18px rgba(245,197,24,.45), inset 0 -3px 0 rgba(0,0,0,.18);
    transition: transform .15s; animation: bb-dicepulse 2.6s ease-in-out infinite; }
.bb-dice:active { transform: translateY(-50%) scale(.92); }
.bb-dice span { display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.bb-dice.is-rolling { animation: none; }
.bb-dice.is-rolling span { animation: bb-diceroll .5s linear infinite; }
@keyframes bb-diceroll { to { transform: rotate(360deg); } }
@keyframes bb-dicepulse { 0%, 100% { box-shadow: 0 6px 18px rgba(245,197,24,.45), inset 0 -3px 0 rgba(0,0,0,.18); } 50% { box-shadow: 0 6px 26px rgba(245,197,24,.75), inset 0 -3px 0 rgba(0,0,0,.18); } }
.bb-titlehint { margin: 8px 2px 0; font-size: 12.5px; color: var(--bb-muted); }
@media (prefers-reduced-motion: reduce) { .bb-dice, .bb-dice.is-rolling span { animation: none; } }
.bb-sugg { margin-top: var(--s3); }
.bb-sugg small { display: block; color: var(--bb-muted); font-size: 12.5px; margin-bottom: var(--s2); }
.bb-sugg__chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.bb-sugg__chip { border: 1px solid var(--bb-line2); background: var(--bb-card); color: var(--bb-text); font: inherit; font-size: 14px; font-weight: 600;
    min-height: 40px; padding: 8px 14px; border-radius: 999px; cursor: pointer; max-width: 100%; text-align: left; transition: transform .12s, border-color .15s; }
.bb-sugg__chip:active { transform: scale(.96); }
.bb-sugg__chip.is-on { border-color: var(--bb-gold); background: var(--bb-card2); color: #ffe38a; }
.bb-sugg__more { background: rgba(245,197,24,.12); border-color: rgba(245,197,24,.45); color: var(--bb-gold); }

/* release windows */
.bb-window { padding: 14px 12px; border-radius: var(--r2); gap: 12px; }
.bb-window__emoji { width: 44px; flex: 0 0 44px; text-align: center; font-size: 34px; line-height: 1; }
.bb-window__body b { font-size: 16px; }
.bb-window__body small { font-size: 12.5px; line-height: 1.35; }

/* mahurat */
.bb-summary { border-radius: var(--r2); padding: 6px 14px; }
.bb-summary__row { min-height: 46px; padding: 8px 0; }
.bb-summary__row:last-child { border-bottom: 0; }
.bb-root .bb-summary__row .bb-link { min-height: 30px; display: inline-flex; padding: 4px 12px; margin: 0; border-radius: 999px; background: rgba(245,197,24,.12); color: var(--bb-gold); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.bb-root .bb-summary__cast li { grid-template-columns: 22px minmax(64px, 30%) 1fr auto; align-items: center; }
.bb-root .bb-summary__cast li span, .bb-root .bb-summary__cast li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* simulation */
.bb-root .bb-simhead { margin: 0 calc(-1 * var(--s4)); padding: 10px var(--s4); }
.bb-root .bb-simskip { right: var(--s4); top: 50%; transform: translateY(-50%); }
.bb-beat { border-radius: var(--r2); padding: 14px; }
.bb-news { border-radius: var(--r1); line-height: 1.35; }
.bb-tweet { border-radius: var(--r1); padding: 10px 12px; line-height: 1.4; }

/* verdict + report */
.bb-root p.bb-roast { font-size: 16px; line-height: 1.4; margin: var(--s3) auto; max-width: 440px; }
.bb-root .bb-joinbox { text-align: left; line-height: 1.35; }
.bb-root .bb-joinbox > span { flex: 1; min-width: 0; }
.bb-root .bb-report { padding: 2px var(--s4) var(--s4); border-radius: var(--r2); }
.bb-root .bb-report .bb-report__list { padding: 0; }
.bb-root .bb-report .bb-report__list > li { display: block; width: auto; margin: 0; padding: 10px 12px; border-radius: var(--r1); font-size: 14px; line-height: 1.4; list-style: none; text-align: left; }
.bb-root .bb-report .bb-report__list > li.bb-report__none { background: rgba(255,255,255,.05); color: var(--bb-muted); }
.bb-root .bb-report .bb-report__list > li.bb-report__none::before { content: ''; }
.bb-root .bb-actions { margin: var(--s5) 0 var(--s2); }
.bb-root .bb-actions--stack .bb-btn { width: 100%; }

/* leaderboard */
.bb-root .bb-tab { font-size: 14px; min-height: 42px; }
.bb-root .bb-lbrow { grid-template-columns: 60px 1fr auto; min-height: 58px; border-radius: 14px; }

/* War Room: bigger touch targets */
.bb-war__opt { min-height: 64px; padding: 12px 14px; border-radius: 14px; }
.bb-war__opt:active { transform: scale(.98); }

/* bottom-sheet modals on phones */
@media (max-width: 599px) {
    .bb-modal { align-items: flex-end; padding: 0; }
    .bb-modal__box { border-radius: 24px 24px 0 0; max-height: 88vh; overflow-y: auto; padding: 22px 18px calc(20px + env(safe-area-inset-bottom)); animation: bb-sheet .28s ease-out; }
}
@keyframes bb-sheet { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }

/* selected = unmistakable: gold ring + glow + a "✓ Picked" pill on the top edge (its words: --bb-picked-label, set by
   bb-app.js from the pack's ui.pickedTag — Korea "✓  선택"; India has none and keeps this default) */
.bb-card.is-selected, .bb-window.is-selected { border-color: var(--bb-gold); background: var(--bb-card2);
    box-shadow: 0 0 0 1px var(--bb-gold) inset, 0 8px 24px rgba(245,197,24,.18); }
.bb-window { position: relative; }
.bb-card.is-selected::after, .bb-window.is-selected::after { content: var(--bb-picked-label, '\2713  Picked'); position: absolute; top: -10px; left: 14px;
    padding: 2px 10px; border-radius: 999px; background: linear-gradient(135deg, #ffd84a, var(--bb-gold)); color: #241036;
    font-size: 11px; font-weight: 800; letter-spacing: .3px; line-height: 16px; box-shadow: 0 3px 10px rgba(0,0,0,.35); animation: bb-pop .22s ease-out; }
.bb-cards, .bb-windows { padding-top: 6px; }
@keyframes bb-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* auto-scroll must stop BELOW the sticky headers (collection counter in the sim, budget bar while casting) */
.bb-beat, .bb-war { scroll-margin-top: 104px; scroll-margin-bottom: 16px; }
.bb-picker, .bb-board, #bb-musichead, .bb-castguide { scroll-margin-top: 84px; }

/* verdict: "make another" gets its own gold look so it doesn't compete with Share */
.bb-btn--next { background: linear-gradient(135deg, #ffd84a, var(--bb-gold) 55%, #ff9f1c); color: #241036; box-shadow: 0 6px 20px rgba(245,197,24,.3); }

.bb-nowrap { white-space: nowrap; }
/* headings wrap into even lines (no lonely "🎬" or single word on line 2 at 320-375 px) */
.bb-root .bb-h2, .bb-root .bb-clashwin, .bb-root .bb-mcempty b { text-wrap: balance; }
/* resume box: label on top, two equal buttons below (the ▶ / Start over pair used to stack unevenly under 400 px) */
.bb-resume { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
.bb-resume > span { font-weight: 700; }
.bb-resume__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bb-resume__btns .bb-btn { width: 100%; min-height: 40px; flex-direction: row; }
/* leaderboard on narrow phones: the 74 px rank column squeezed names to "Anonymous P…" */
@media (max-width: 400px) {
    .bb-root .bb-lbrow { grid-template-columns: 50px minmax(0, 1fr) auto; gap: 6px; padding-left: 10px; padding-right: 10px; }
    .bb-root .bb-lbrow__rank { font-size: 14px; }
}
/* WhatsApp: brand green, logo + label on one line, a "preparing link" state while the poster preview uploads */
.bb-btn--wa { flex-direction: row; gap: 10px; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; box-shadow: 0 6px 20px rgba(37,211,102,.35); }
.bb-btn--wa svg { flex: 0 0 auto; }
.bb-btn--wa.is-wait { opacity: .7; }
.bb-btn--wa.is-wait span::after { content: '…'; }
.bb-root .bb-btn.is-wait { opacity: .7; }
/* Era Skip rolling (instant, before the new era's cards arrive): old cards fade + can't be tapped, badge pulses */
.bb-picker.is-rolling .bb-cards { opacity: .25; filter: blur(1.5px); pointer-events: none; transition: opacity .15s, filter .15s; }
.bb-picker.is-rolling .bb-era--big { animation: bb-roll-pulse .5s ease-in-out infinite alternate; }
.bb-picker.is-rolling .bb-era--big.is-landed { animation: none; transform: scale(1.06); }
.bb-picker.is-rolling [data-act="skip"] { opacity: .8; }
@keyframes bb-roll-pulse { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .bb-picker.is-rolling .bb-era--big { animation: none; } }
/* Challenge: the exact message the friend gets, shown before sharing (chat-bubble look) */
.bb-msgbox { text-align: left; background: rgba(255,255,255,.06); border: 1px solid rgba(245,197,24,.35); border-radius: 16px 16px 16px 4px; padding: 10px 14px 12px; }
.bb-msgbox small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--bb-muted); margin-bottom: 4px; }
.bb-msgbox p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--bb-text, #fff); overflow-wrap: anywhere; }
.bb-keedabar { margin: 0 0 var(--s3); padding: 9px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; color: #f3d9ff;
    background: rgba(237,22,129,.12); border: 1px dashed rgba(237,22,129,.45); }
/* Star Profile: cartoon / photo switch, photo box, crop sheet, photo avatars */
.bb-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin: var(--s4) 0 var(--s3); border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--bb-line); }
.bb-seg__opt { border: 0; border-radius: 999px; min-height: 42px; font: inherit; font-weight: 700; font-size: 14px; color: var(--bb-muted); background: transparent; cursor: pointer; }
.bb-seg__opt.is-on { color: #241036; background: linear-gradient(135deg, #ffd84a, var(--bb-gold)); box-shadow: 0 4px 14px rgba(245,197,24,.3); }
.bb-photobox { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s3); }
.bb-photobox__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bb-photobox__row .bb-btn { width: 100%; flex-direction: row; }
.bb-av--photo { object-fit: cover; border-radius: 22%; background: #2a1742; box-shadow: 0 0 0 2px rgba(245,197,24,.5); }
.bb-av--art { object-fit: cover; object-position: center 20%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }  /* painted portrait tile */
.bb-crop { width: 100%; max-height: 60vh; aspect-ratio: 1 / 1; background: #0d0616; border-radius: 16px; overflow: hidden; margin: 10px 0 14px; }
.bb-crop img { display: block; max-width: 100%; }
.bb-cropmodal .bb-modal__box { max-width: 460px; width: 100%; }
/* last-film card has one button → full width */
.bb-resume--last .bb-resume__btns { grid-template-columns: 1fr; }
/* phones in landscape / very short screens: dock + budget bar ate ~180 of 360 px → compact both */
@media (max-height: 480px) {
    .bb-dock { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
    .bb-dock__hint { display: none; }
    .bb-root .bb-dock .bb-btn--xl { min-height: 44px; padding-top: 8px; padding-bottom: 8px; font-size: 18px; }
    .bb-dockspace { height: calc(64px + env(safe-area-inset-bottom) + var(--bb-ad-lift, 0px)); }
    .bb-root .bb-sticky { padding-top: 6px; padding-bottom: 6px; }
    .bb-root .bb-sticky .bb-meter { margin-top: 2px; }
    .bb-root .bb-marquee { padding: 12px 14px 10px; }
    .bb-root h1.bb-logo { font-size: 40px; }
    /* phone landscape: a 9:16 poster at full width is 3 screens tall → fit it to ~80% of the screen height so the
       WhatsApp / Share buttons sit right under it */
    .bb-root .bb-posterslot { max-width: min(360px, 44vh); }
}
/* narrow phones: a centred "₹1,806 CR" runs into the Skip button → scoreboard layout (number left, Skip right) */
@media (max-width: 400px) {
    .bb-root .bb-simhead { text-align: left; }
    .bb-root .bb-simhead__num { font-size: 40px; }
}
/* picker header: when Close/Skip wraps to its own line it should hug the right edge, not sit under the title */
.bb-root .bb-picker__head > .bb-btn { margin-left: auto; }
@media (max-width: 340px) { .bb-root .bb-picker .bb-btn { white-space: nowrap; font-size: 14px; padding-left: 12px; padding-right: 12px; } }
/* phones up to 380 px: "Cast a Friend" must stay on one line inside the half-width slot */
@media (max-width: 380px) {
    .bb-root .bb-slot .bb-btn--friend { font-size: 11px; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
}
/* home tiles: long labels ("My Challenges") wrap to 2 lines instead of "My Challeng…" */
.bb-tile__lbl { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }

/* Hit Jodis: progress + hint + discovered chips + one "still hidden" chip */
.bb-jprog { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin: 2px 0 10px; }
.bb-jprog i { display: block; height: 100%; min-width: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--bb-gold), var(--bb-orange), var(--bb-pink)); }
.bb-jhint { font-size: 12.5px; line-height: 1.45; color: var(--bb-muted); margin: 0 0 10px; }
.bb-chip--more { border: 1px dashed rgba(245,197,24,.45); background: rgba(245,197,24,.08); color: var(--bb-gold); font-weight: 700; }

/* How to play: compact numbered steps, readable size, close button always reachable */
.bb-modal__box ol { list-style: none; counter-reset: bbstep; margin: 12px 0 16px; padding: 0; display: grid; gap: 8px; }
.bb-modal__box ol > li { counter-increment: bbstep; position: relative; margin: 0; padding: 10px 12px 10px 44px; border-radius: 12px; background: rgba(255,255,255,.05);
    font-size: 14.5px; line-height: 1.45; color: var(--bb-text); text-align: left; }
.bb-modal__box ol > li::before { content: counter(bbstep); position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, var(--bb-gold), var(--bb-orange)); color: #241036; font-weight: 800; font-size: 13px; line-height: 24px; text-align: center; }
.bb-modal__box > .bb-btn[data-close] { position: sticky; bottom: 0; width: 100%;
    box-shadow: 0 -22px 22px 6px var(--bb-bg2), 0 6px 20px rgba(237,22,129,.35); } /* solid band so steps don't show through */

/* Star Profile: the avatar preview stays on screen while you change skin / hair / outfit further down */
.bb-pe__preview { position: sticky; top: 0; z-index: 6; margin: 4px calc(-1 * var(--s4)) 8px; padding: 8px 0 10px;
    background: linear-gradient(180deg, rgba(20,11,31,.97) 70%, rgba(20,11,31,0)); backdrop-filter: blur(4px); }
.bb-pe__preview .bb-av, .bb-pe__preview svg { width: 104px !important; height: 104px !important; }

/* share / challenge screen: name box first, full-width input on phones, one-line link, no wrapped labels */
.bb-nick { margin: var(--s3) 0 var(--s4); }
@media (max-width: 480px) {
    .bb-root .bb-nick .bb-form { flex-direction: column; }
    .bb-root .bb-nick .bb-form .bb-btn { width: 100%; }
}
.bb-linkbox { word-break: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-family: ui-monospace, Menlo, Consolas, monospace; }
.bb-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bb-row .bb-btn { white-space: nowrap; flex-direction: row; min-width: 0; }
@media (max-width: 360px) { .bb-root .bb-row .bb-btn { font-size: 13px; padding-left: 6px; padding-right: 6px; } }

/* verdict / film-page action stacks: one even rhythm (the purple button used to carry an extra 12px) */
.bb-root .bb-actions--stack { display: flex; flex-direction: column; gap: 10px; }
.bb-root .bb-actions--stack > .bb-btn { margin: 0; }
.bb-root .bb-actions--stack > .bb-btn--xl + .bb-btn { margin-top: 4px; }

/* clash result: a loss reads as a dare to come back, not a trophy moment */
/* the stamp is rotated: keep it to two balanced lines so its tilted ends never leave the screen */
.bb-root .bb-clashwin { max-width: 290px; margin-left: auto; margin-right: auto; }
.bb-clashwin--lose { color: #ffb3c1; font-size: 26px; }
.bb-photofinish { margin: 8px auto 4px; max-width: 320px; padding: 8px 12px; border-radius: 12px; text-align: center; font-size: 13px; font-weight: 600;
    color: #ffe38a; background: rgba(245,197,24,.1); border: 1px dashed rgba(245,197,24,.4); }

/* My Challenges: record header + film cards */
.bb-mcrec { margin: var(--s4) 0 var(--s3); padding: 14px 16px; border-radius: var(--r3); border: 1px solid rgba(245,197,24,.35);
    background: radial-gradient(120% 140% at 0% 0%, rgba(245,197,24,.16), transparent 60%), var(--bb-card); }
.bb-mcrec small { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bb-muted); }
.bb-mcrec__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.bb-mcrec__row span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: rgba(255,255,255,.05); font-size: 11.5px; color: var(--bb-muted); }
.bb-mcrec__row b { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 30px; line-height: 1; color: var(--bb-text); letter-spacing: 1px; }
.bb-mcrec__w b { color: #5ee08f; }
.bb-mcrec__l b { color: #ff7a8a; }
.bb-mclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* the site's global `ul li { margin: auto }` shrinks grid/flex items to content width; our lists are always full width */
.bb-root .bb-mclist > li, .bb-root .bb-lblist > li { margin: 0; width: 100%; box-sizing: border-box; }
.bb-mc { border-radius: var(--r3); background: var(--bb-card); border: 1px solid var(--bb-line); overflow: hidden; box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.bb-mc.is-new { border-color: rgba(237,22,129,.6); box-shadow: 0 0 0 1px rgba(237,22,129,.35), 0 10px 24px rgba(237,22,129,.15); }
.bb-mc__main { display: flex; align-items: center; gap: 12px; padding: 12px; color: var(--bb-text); text-decoration: none; }
.bb-mc__main:active { background: rgba(255,255,255,.04); }
.bb-mc__poster { flex: 0 0 56px; width: 56px; height: 72px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 30px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 14px rgba(0,0,0,.3); }
.bb-mc__poster:not([class*="bb-g-"]) { background: linear-gradient(160deg, #3a2257, #1c0f2e); }
.bb-mc__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bb-mc__title { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 22px; font-weight: 400; letter-spacing: .5px; line-height: 1.05; color: #ffe38a;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-mc__gross { font-size: 13px; font-weight: 700; color: var(--bb-text); }
.bb-mc__stats { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.bb-mc__stats i { font-style: normal; padding: 1px 8px; border-radius: 999px; }
.bb-mc__stats i.w { background: rgba(46,204,113,.16); color: #5ee08f; }
.bb-mc__stats i.l { background: rgba(255,90,110,.14); color: #ff7a8a; }
.bb-mc__bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,90,110,.25); overflow: hidden; min-width: 30px; }
.bb-mc__bar i { display: block; height: 100%; padding: 0; border-radius: 99px; background: linear-gradient(90deg, #2ecc71, #5ee08f); }
.bb-mc__go { font-size: 26px; color: var(--bb-muted); padding-left: 2px; }
.bb-mc__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--bb-line); background: rgba(0,0,0,.18); }
.bb-mc__last { font-size: 12.5px; color: var(--bb-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-mc__share { flex-shrink: 0; border: 1px solid rgba(245,197,24,.45); background: rgba(245,197,24,.12); color: var(--bb-gold); font: inherit; font-size: 12.5px; font-weight: 700;
    min-height: 34px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.bb-mc__share:active { transform: scale(.96); }
.bb-mcempty { margin-top: var(--s5); padding: 28px 20px 22px; text-align: center; border-radius: var(--r3); border: 1px dashed rgba(245,197,24,.35); background: var(--bb-card); }
.bb-mcempty__art { font-size: 56px; line-height: 1; margin-bottom: 10px; filter: drop-shadow(0 8px 18px rgba(245,197,24,.3)); }
.bb-mcempty b { display: block; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 28px; font-weight: 400; letter-spacing: 1px; color: #ffe38a; }
.bb-mcempty p { color: var(--bb-muted); font-size: 14px; line-height: 1.45; margin: 6px auto 18px; max-width: 300px; }

/* inputs 16px+ so iOS never zooms */
.bb-root .bb-lbnick .bb-input, .bb-root .bb-input--light { font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .bb-modal__box, .bb-tile, .bb-war__opt, .bb-card.is-selected::after, .bb-window.is-selected::after { animation: none; transition: none; } }

/* Home SEO copy (resources/views/blockbuster/_seo.blade.php) — server-rendered, readable, low-key: sits under the game */
.bb-seo { max-width: 560px; margin: 30px auto 0; padding: 20px 18px 8px; border-top: 1px solid var(--bb-line); color: var(--bb-muted); font-size: 14px; line-height: 1.6; }
.bb-seo[hidden] { display: none; }
.bb-root .bb-seo h2 { font-family: 'Bebas Neue', var(--bb-display-hangul), 'Poppins', sans-serif; font-size: 26px; letter-spacing: .5px; line-height: 1.1; color: var(--bb-gold); margin: 0 0 10px; }
.bb-root .bb-seo h3 { font-size: 15px; font-weight: 700; color: var(--bb-text); margin: 20px 0 8px; }
.bb-seo p { margin: 0 0 10px; }
.bb-seo b { color: var(--bb-text); font-weight: 600; }
.bb-seo__steps { margin: 0; padding-left: 20px; }
.bb-seo__steps li { margin: 0 0 8px; padding-left: 2px; }
.bb-seo__list { list-style: none; margin: 0; padding: 0; }
.bb-seo__list li { margin: 0 0 7px; }
.bb-seo__faq details { background: var(--bb-card); border: 1px solid var(--bb-line); border-radius: 12px; margin: 0 0 8px; padding: 0 14px; }
.bb-seo__faq summary { cursor: pointer; color: var(--bb-text); font-weight: 600; padding: 12px 18px 12px 0; list-style: none; position: relative; }
.bb-seo__faq summary::-webkit-details-marker { display: none; }
.bb-seo__faq summary::after { content: '+'; position: absolute; right: 0; top: 10px; color: var(--bb-gold); font-size: 18px; font-weight: 700; }
.bb-seo__faq details[open] summary::after { content: '−'; }
.bb-seo__faq details p { margin: 0 0 12px; }

/* Star Profile career moments + growth (Profiles::recordCastings gains, Profiles::growth) */
.bb-career { margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,201,77,.14), rgba(237,22,129,.14)); border: 1px solid rgba(245,197,24,.35); }
.bb-career b { display: block; color: var(--bb-gold); font-size: 14px; margin-bottom: 2px; }
.bb-career p { margin: 2px 0 0; font-size: 14px; color: var(--bb-text); line-height: 1.45; }
.bb-career__title { font-weight: 700; color: var(--bb-gold) !important; }
.bb-castshares__career { display: block; margin-top: 6px; color: var(--bb-muted); font-size: 12.5px; line-height: 1.4; }
.bb-growth { margin: 14px 0 6px; padding: 14px; border-radius: 16px; background: var(--bb-card); border: 1px solid var(--bb-line); }
.bb-root .bb-growth .bb-h3 { margin: 0 0 10px; }
.bb-growth__row { margin: 0 0 12px; }
.bb-growth__top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; }
.bb-growth__bar { height: 8px; border-radius: 8px; background: rgba(255,255,255,.1); margin: 6px 0 4px; overflow: hidden; }
.bb-growth__bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #ffc94d, var(--bb-pink)); }
.bb-growth__row small { color: var(--bb-muted); font-size: 12.5px; }
.bb-growth__title { margin: 4px 0 8px; font-size: 14px; font-weight: 600; color: var(--bb-text); }
.bb-cchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bb-cchip { font-style: normal; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: rgba(46,204,113,.16); color: #7ee2a8; }
.bb-cchip--down { background: rgba(255,77,94,.16); color: #ff8f9b; }
.bb-cchip--title { background: rgba(245,197,24,.18); color: var(--bb-gold); }
.bb-cchip--muted { background: rgba(255,255,255,.08); color: var(--bb-muted); }
.bb-stars__off { font-style: normal; color: rgba(255,255,255,.28); }
/* "Request removal" (inline fine print): bigger invisible tap area (~33px) without changing the text's look or layout */
.bb-root .bb-disclaimer .bb-link.bb-link--muted { padding: 8px 4px; margin: -8px -4px; }

/* ── ₹1000 Crore Club celebration (2026-09-28) ────────────────────────────────────────────────────────────────
   Appended to <body> (outside .bb-root), so it carries its own tokens. Order of the show: velvet curtains part (0–1.1 s),
   spotlights sweep, the marquee card slams in (0.55 s), the gross counts up, confetti + ₹ coins (canvas). */
.bb-club { --gold: #f5c518; --gold2: #ffe38a; --pink: #ed1681; --orange: #f44a25; position: fixed; inset: 0; z-index: 1002; display: flex; align-items: center;
    justify-content: center; padding: 16px; overflow: hidden; font-family: 'Poppins', sans-serif; color: #fff;
    background: radial-gradient(120% 90% at 50% 40%, rgba(58,26,92,.92), rgba(8,3,14,.97) 70%); animation: bb-club-in .35s ease both; }
.bb-club.is-out { animation: bb-club-out .26s ease both; }
@keyframes bb-club-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bb-club-out { to { opacity: 0; } }
.bb-club__confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.bb-club__beams { position: absolute; left: 50%; top: -30%; width: 160vmax; height: 160vmax; transform: translateX(-50%); z-index: 0; pointer-events: none; opacity: .55;
    background: conic-gradient(from 0deg at 50% 0%, transparent 0deg, rgba(255,227,138,.28) 8deg, transparent 18deg, transparent 40deg, rgba(237,22,129,.22) 48deg,
        transparent 58deg, transparent 300deg, rgba(255,227,138,.28) 310deg, transparent 320deg, transparent 340deg, rgba(123,97,255,.22) 348deg, transparent 356deg);
    animation: bb-club-sweep 5s ease-in-out infinite alternate; }
@keyframes bb-club-sweep { from { transform: translateX(-50%) rotate(-14deg); } to { transform: translateX(-50%) rotate(14deg); } }
.bb-club__curtain { position: absolute; top: 0; bottom: 0; width: 51%; z-index: 4; pointer-events: none;
    background: repeating-linear-gradient(90deg, #7a0a18 0 18px, #a3162a 18px 30px, #5c0612 30px 44px), #8b0f1f; box-shadow: inset 0 -40px 60px rgba(0,0,0,.45); }
.bb-club__curtain::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: repeating-linear-gradient(90deg, var(--gold) 0 10px, #b8860b 10px 20px); }
.bb-club__curtain--l { left: 0; animation: bb-curtain-l 1.1s cubic-bezier(.7, 0, .2, 1) .15s both; }
.bb-club__curtain--r { right: 0; animation: bb-curtain-r 1.1s cubic-bezier(.7, 0, .2, 1) .15s both; }
@keyframes bb-curtain-l { to { transform: translateX(-102%); } }
@keyframes bb-curtain-r { to { transform: translateX(102%); } }
.bb-club__card { position: relative; z-index: 2; width: 100%; max-width: 400px; max-height: calc(100% - 8px); overflow-y: auto; text-align: center; padding: 26px 20px 18px; border-radius: 26px;
    background: radial-gradient(120% 80% at 50% 0%, rgba(245,197,24,.22), transparent 60%), linear-gradient(160deg, #2c1448, #150a24);
    border: 2px solid var(--gold); box-shadow: 0 0 0 6px rgba(245,197,24,.12), 0 0 60px rgba(245,197,24,.35), 0 30px 80px rgba(0,0,0,.6);
    animation: bb-club-slam .55s cubic-bezier(.2, 1.3, .35, 1) .75s both; }
/* marquee bulbs around the card */
.bb-club__card::before { content: ''; position: absolute; inset: 7px; border-radius: 20px; pointer-events: none;
    border: 3px dotted rgba(255,241,176,.75); opacity: .5; animation: bb-club-bulbs .9s steps(2) infinite; }
@keyframes bb-club-bulbs { 50% { opacity: 1; } }
@keyframes bb-club-slam { 0% { opacity: 0; transform: scale(2.2) rotate(-6deg); } 70% { opacity: 1; transform: scale(.96) rotate(1deg); } 100% { transform: scale(1) rotate(0); } }
.bb-club__trophy { font-size: 64px; line-height: 1; filter: drop-shadow(0 8px 20px rgba(245,197,24,.6)); animation: bb-club-float 2.4s ease-in-out 1.3s infinite; }
@keyframes bb-club-float { 50% { transform: translateY(-8px) rotate(-4deg); } }
.bb-club__badge { position: relative; display: inline-block; margin: 10px 0 4px; padding: 6px 16px; border-radius: 10px; overflow: hidden;
    font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 30px; letter-spacing: 2px; line-height: 1.1; color: #2a1600;
    background: linear-gradient(135deg, #fff1b0, var(--gold) 45%, #d99a00 70%, #fff1b0); box-shadow: 0 6px 22px rgba(245,197,24,.45); }
.bb-club__badge::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; transform: translateX(-150%) skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent); animation: bb-club-shine 2.2s ease-in-out 1.5s infinite; }
@keyframes bb-club-shine { 0% { transform: translateX(-150%) skewX(-20deg); } 55%, 100% { transform: translateX(330%) skewX(-20deg); } }
.bb-club__head { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 34px; letter-spacing: 1.5px; line-height: 1.05; margin-top: 8px; }
/* gradient text on the words only (a gradient-clipped emoji turns into a pale box) */
.bb-club__headtxt { background: linear-gradient(90deg, var(--gold2), #fff, var(--gold2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bb-club__title { margin-top: 6px; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 24px; letter-spacing: 1px; color: #ffd6e8; word-break: break-word; }
.bb-club__gross { margin: 6px 0 2px; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 58px; line-height: 1; color: var(--gold);
    text-shadow: 0 0 24px rgba(245,197,24,.55); font-variant-numeric: tabular-nums; }
.bb-club__gross.is-done { animation: bb-club-pop .45s ease; }
@keyframes bb-club-pop { 50% { transform: scale(1.12); } }
.bb-club__sub { margin: 8px auto 16px; max-width: 320px; font-size: 14px; line-height: 1.45; color: #e7d9f5; }
.bb-club__btns { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.bb-club .bb-btn { border: 0; border-radius: 18px; color: #fff; font-weight: 800; font-size: 18px; padding: 14px 18px; min-height: 52px; cursor: pointer; width: 100%;
    background: linear-gradient(135deg, var(--orange), var(--pink)); box-shadow: 0 8px 24px rgba(237,22,129,.45); font-family: inherit; }
.bb-club .bb-btn:active { transform: scale(.97); }
.bb-club__bow { background: none; border: 0; color: #d8c6ee; font: inherit; font-size: 15px; font-weight: 600; padding: 10px; cursor: pointer; }
.bb-club__bow:focus-visible, .bb-club .bb-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 360px) { .bb-club__gross { font-size: 48px; } .bb-club__badge { font-size: 25px; } .bb-club__head { font-size: 29px; } .bb-club__trophy { font-size: 54px; } }
.bb-club--still *, .bb-club--still { animation: none !important; }
.bb-club--still .bb-club__curtain, .bb-club--still .bb-club__beams { display: none; }
/* the lasting mark: a gold ribbon on the verdict / My Films viewer; a gold frame on the poster wall */
.bb-clubribbon { display: flex; justify-content: center; margin: 4px 0 2px; }
.bb-clubribbon span { position: relative; overflow: hidden; display: inline-block; padding: 5px 16px; border-radius: 999px; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 18px;
    letter-spacing: 1.5px; color: #2a1600; background: linear-gradient(135deg, #fff1b0, #f5c518 50%, #d99a00); box-shadow: 0 6px 20px rgba(245,197,24,.35); }
.bb-clubribbon span::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; transform: translateX(-150%) skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent); animation: bb-club-shine 3s ease-in-out infinite; }
.bb-root .bb-mfcard.is-club { box-shadow: 0 0 0 3px #f5c518, 0 0 30px rgba(245,197,24,.55), 0 12px 26px rgba(0,0,0,.38); animation: bb-club-glow 2.4s ease-in-out infinite alternate; }
@keyframes bb-club-glow { to { box-shadow: 0 0 0 3px #ffe38a, 0 0 44px rgba(245,197,24,.85), 0 12px 26px rgba(0,0,0,.38); } }
@media (prefers-reduced-motion: reduce) { .bb-root .bb-mfcard.is-club { animation: none; } }
@media (prefers-reduced-motion: reduce) { .bb-club, .bb-club * , .bb-clubribbon span::after { animation: none !important; } .bb-club .bb-club__curtain, .bb-club .bb-club__beams { display: none; } }

/* ── Release date = a cinema ticket (2026-09-28) ─────────────────────────────────────────────────────────────
   Stub (festival emoji, tinted by crowd: c4 gold → c1 muted) · perforation · name in the poster face · crowd / clash chips.
   Tap: instant press, then the gold BOOKED stamp (is-booked) while the other tickets step back (is-booking). */
.bb-root .bb-windows { gap: 12px; }
.bb-root .bb-window { --tier: #7b2cbf; --tier2: #3a1a5c; position: relative; display: flex; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
    text-align: left; border-radius: 18px; border: 1px solid var(--bb-line2, rgba(255,255,255,.18)); background: linear-gradient(135deg, var(--bb-card2), var(--bb-card));
    box-shadow: 0 10px 24px rgba(0,0,0,.28); transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, opacity .25s ease, filter .25s ease; }
.bb-root .bb-window--c4 { --tier: #f5c518; --tier2: #f44a25; }
.bb-root .bb-window--c3 { --tier: #ed1681; --tier2: #7b2cbf; }
.bb-root .bb-window--c2 { --tier: #7b61ff; --tier2: #3a1a5c; }
.bb-root .bb-window--c1 { --tier: #5a4a72; --tier2: #2a1742; }
.bb-root .bb-window:active { transform: scale(.975); }
@media (hover: hover) { .bb-root .bb-window:hover { border-color: rgba(245,197,24,.55); box-shadow: 0 12px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(245,197,24,.25); } }
.bb-window:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 3px; }
.bb-root .bb-window__stub { position: relative; flex: 0 0 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    padding: 12px 4px; background: linear-gradient(160deg, var(--tier), var(--tier2)); border-right: 2px dashed rgba(12,5,22,.55); }
/* the perforation notches, top and bottom */
.bb-window__stub::before, .bb-window__stub::after { content: ''; position: absolute; right: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--bb-bg); }
.bb-window__stub::before { top: -8px; }
.bb-window__stub::after { bottom: -8px; }
.bb-root .bb-window__emoji { width: auto; flex: none; font-size: 34px; line-height: 1; filter: drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.bb-window__admit { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.bb-root .bb-window__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; padding: 12px 14px 12px 16px; }
.bb-root .bb-window__name { font-family: 'Bebas Neue', var(--bb-display-hangul), 'Poppins', sans-serif; font-weight: 400; font-size: 24px; letter-spacing: .6px; line-height: 1; color: #fff2b3; }
.bb-root .bb-window__body small { color: var(--bb-muted); font-size: 12.5px; line-height: 1.35; font-style: italic; }
.bb-window__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bb-wchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.08);
    font-size: 11.5px; color: var(--bb-muted); white-space: nowrap; }
.bb-root .bb-window__body .bb-wchip b { color: var(--bb-text); font-weight: 700; font-size: inherit; }   /* not the old 16px body rule */
.bb-wchip .bb-dots i { width: 7px; height: 7px; }
/* picked: gold edge + glow; the BOOKED stamp stays on it (static when you come back to change the date) */
.bb-root .bb-window.is-selected { border-color: var(--bb-gold); box-shadow: 0 0 0 1px var(--bb-gold), 0 12px 30px rgba(245,197,24,.25); }
.bb-root .bb-window.is-selected::after { display: none; }                  /* replaces the generic "✓ Picked" tag */
.bb-window__stamp { position: absolute; right: 8px; top: 8px; transform: rotate(-8deg); padding: 2px 8px; border: 2px solid var(--bb-gold);
    border-radius: 7px; background: rgba(20,11,31,.88); color: var(--bb-gold); font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 16px; letter-spacing: 1.5px;
    white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.bb-window.is-selected .bb-window__stamp { opacity: 1; }
.bb-window.is-booked .bb-window__stamp { animation: bb-ticket-stamp .38s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes bb-ticket-stamp { from { opacity: 0; transform: rotate(-8deg) scale(2.4); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
.bb-windows.is-booking .bb-window:not(.is-booked) { opacity: .35; filter: saturate(.5); pointer-events: none; }
.bb-windows.is-booking .bb-window.is-booked { transform: scale(1.015); }
@media (max-width: 360px) {
    .bb-root .bb-window__stub { flex-basis: 62px; }
    .bb-root .bb-window__emoji { font-size: 28px; }
    .bb-root .bb-window__name { font-size: 21px; }
    .bb-wchip { font-size: 11px; padding: 3px 8px; }
}
@media (prefers-reduced-motion: reduce) { .bb-window.is-booked .bb-window__stamp { animation: none; } .bb-root .bb-window { transition: none; } }

/* ── My Films (2026-09-28): home stat links, poster wall, film viewer ───────────────────────────────────── */
.bb-root a.bb-btn { text-decoration: none; color: #fff; }
.bb-root a.bb-btn--ghost { color: var(--bb-text); }
/* home "Films made" / "Best film": same tiles as the streak, tappable (gold edge + a small chevron) */
.bb-root .bb-statrow .bb-statlink { position: relative; display: block; width: 100%; background: var(--bb-card); border: 0; border-radius: 12px; padding: 10px 4px;
    color: inherit; font: inherit; text-align: center; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(245,197,24,.3); transition: transform .12s, box-shadow .12s; }
@media (max-width: 380px) { .bb-root .bb-statrow b { font-size: 13.5px; white-space: nowrap; } }   /* "😐 ₹1,234 Cr" fits a 320 px phone */
.bb-statlink span::after { content: ' ›'; color: var(--bb-gold); font-weight: 700; }   /* "Films made ›": tappable, never over the number */
.bb-statlink:active { transform: scale(.96); }
@media (hover: hover) { .bb-root .bb-statrow .bb-statlink:hover { box-shadow: inset 0 0 0 1px rgba(245,197,24,.6); } }
.bb-statlink:focus-visible, .bb-mfcard:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 2px; }

.bb-mfacct { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; padding: 12px 14px; border-radius: var(--r2); border: 1px dashed rgba(245,197,24,.45);
    background: radial-gradient(120% 140% at 0% 0%, rgba(245,197,24,.14), transparent 60%), var(--bb-card); }
.bb-mfacct__txt { flex: 1; min-width: 0; }
.bb-mfacct__txt b { display: block; color: #ffe38a; font-size: 14px; }
.bb-mfacct__txt small { display: block; color: var(--bb-muted); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.bb-mfacct__btns { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.bb-root .bb-mfacct__btns .bb-btn { flex-direction: row; min-height: 40px; padding: 8px 16px; font-size: 14px; white-space: nowrap; }
.bb-root .bb-mfacct__login { color: var(--bb-muted); font-size: 13px; text-decoration: underline; padding: 6px 8px; }
.bb-root .bb-mfacct--ok { display: block; margin: 2px 0 12px; padding: 0; border: 0; background: none; text-align: center; font-size: 13px; color: #7ee2a8; }
@media (max-width: 380px) {
    .bb-mfacct { flex-direction: column; align-items: stretch; text-align: center; }
    .bb-mfacct__btns { flex-direction: row; justify-content: center; gap: 10px; }
}
.bb-mfcount { text-align: center; color: var(--bb-muted); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; margin: 2px 0 12px; }
/* the poster wall: fixed 2:3 cards (nothing inside can change a card's size → no layout shift while portraits load) */
.bb-mfgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 480px) { .bb-mfgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bb-root .bb-mfgrid > li { margin: 0; width: 100%; min-width: 0; }
.bb-root .bb-mfcard { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; padding: 0; border: 0; border-radius: 16px; overflow: hidden; isolation: isolate;
    color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 12px 26px rgba(0,0,0,.38); transition: transform .15s; }
.bb-mfcard:not([class*="bb-g-"]) { background: linear-gradient(160deg, #3a2257, #1c0f2e); }
.bb-mfcard::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(90% 50% at 50% 0%, rgba(255,255,255,.18), transparent 70%), linear-gradient(to bottom, rgba(0,0,0,.28) 0%, transparent 26%, transparent 42%, rgba(12,5,22,.94) 80%); }
.bb-root .bb-mfcard.is-best { box-shadow: 0 0 0 2px var(--bb-gold), 0 12px 30px rgba(245,197,24,.28); }
.bb-mfcard:active { transform: scale(.97); }
@media (hover: hover) { .bb-mfcard:hover { transform: translateY(-3px); } }
.bb-mfcard__art { position: absolute; left: 0; right: 0; top: 13%; z-index: 0; display: flex; justify-content: center; align-items: flex-end; }
.bb-mfcard__art .bb-av { width: 50%; height: auto; margin: 0 -7%; border-radius: 0; background: none !important; box-shadow: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%); mask-image: linear-gradient(to bottom, #000 68%, transparent 100%); }
.bb-mfcard__art .bb-av:last-child { position: relative; width: 58%; z-index: 1; }
.bb-mfcard__top { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 2; display: flex; align-items: flex-start; gap: 6px; }
.bb-mfcard__tags { display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; }
.bb-mfcard__crown { flex-shrink: 0; padding: 2px 7px; border-radius: 999px; background: linear-gradient(135deg, #ffe08a, #f5a623); color: #3a2000; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.bb-mfcard__mode { margin-left: auto; min-width: 0; max-width: 100%; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.5); font-size: 10.5px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-mfcard__foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px; }
.bb-mfcard__title { max-width: 100%; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-weight: 400; font-size: 22px; line-height: .95; letter-spacing: .5px; color: #fff2b3;
    text-shadow: 0 2px 8px rgba(0,0,0,.75); word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bb-mfcard__stamp { max-width: 100%; padding: 1px 8px; border-radius: 6px; background: var(--vc, #6b5a80); color: #fff; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 15px;
    letter-spacing: 1px; line-height: 1.35; text-shadow: 0 1px 2px rgba(0,0,0,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: rotate(-2deg); transform-origin: left center; }
.bb-mfcard__gross { font-size: 13px; font-weight: 800; color: var(--bb-gold); }
.bb-root .bb-mfmore { width: 100%; margin-top: 14px; }
.bb-root #bb-mf > p.bb-small { margin-top: 18px; }   /* the "older films" note: clear of the poster glow */
/* one film */
.bb-mfview__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--bb-muted); }
.bb-mfview__mode { padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--bb-text); font-weight: 700; }
.bb-root .bb-mfview__title { margin: 12px 0 4px; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-weight: 400; font-size: clamp(34px, 10vw, 48px); line-height: .95; letter-spacing: 1px;
    color: #fff2b3; word-break: break-word; text-shadow: 0 4px 18px rgba(245,197,24,.25); }
.bb-mfview__tag { margin: 0 0 2px; font-style: italic; font-size: 14px; color: var(--bb-muted); }
.bb-mfvs { margin: 12px 0; }
.bb-mfvs small { display: block; margin-top: 2px; }
.bb-root .bb-mfvs__link { display: inline-block; margin-top: 6px; padding: 4px; color: var(--bb-gold); font-weight: 700; font-size: 13px; text-decoration: none; }
.bb-root .bb-mfview__rephead { margin: 22px 0 8px; text-align: left; }
@media (prefers-reduced-motion: reduce) { .bb-mfcard, .bb-statlink { transition: none; } }

/* ── Home hero, premium (2026-09-28): theatre marquee · Aaj Ki Release premiere ticket · Quick Film clapperboard ──────
   The marquee markup is ALSO server-rendered (index.blade.php): same classes, so the page never jumps on load. */
.bb-root .bb-marquee { isolation: isolate; padding: 30px 16px 24px; border-radius: 24px; border: 2px solid rgba(245,197,24,.55);
    background: radial-gradient(90% 70% at 50% 0%, rgba(245,197,24,.18), transparent 60%), radial-gradient(70% 90% at 50% 120%, rgba(237,22,129,.28), transparent 60%),
        linear-gradient(180deg, #2a0f45, #12061f);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -30px 60px rgba(0,0,0,.45), 0 18px 40px rgba(0,0,0,.45), 0 0 40px rgba(245,197,24,.12); }
/* chaser bulbs: a lit row along the top and the bottom edge */
.bb-root .bb-bulbs { inset: 7px 12px; border: 0; border-radius: 0; opacity: 1; animation: none; z-index: 1; }
.bb-root .bb-bulbs::before, .bb-root .bb-bulbs::after { content: ''; position: absolute; left: 0; right: 0; height: 10px;
    background: radial-gradient(circle, #fff7d1 0 2.4px, rgba(255,206,84,.75) 3.3px, transparent 5px) 0 50% / 18px 10px repeat-x;
    filter: drop-shadow(0 0 3px rgba(255,200,60,.9)); animation: bb-bulb-chase 1s steps(2) infinite; }
.bb-root .bb-bulbs::before { top: 0; }
.bb-root .bb-bulbs::after { bottom: 0; animation-delay: -.5s; }
@keyframes bb-bulb-chase { to { background-position: 9px 50%; } }
/* two soft spotlights sweeping behind the title */
.bb-marquee__beams { position: absolute; left: 50%; top: -60%; width: 220%; height: 220%; transform: translateX(-50%); z-index: -1; pointer-events: none; opacity: .5;
    background: conic-gradient(from 180deg at 50% 0%, transparent 0deg, transparent 150deg, rgba(255,227,138,.20) 162deg, transparent 172deg, transparent 188deg,
        rgba(237,22,129,.18) 198deg, transparent 210deg, transparent 360deg);
    animation: bb-marquee-sweep 7s ease-in-out infinite alternate; }
@keyframes bb-marquee-sweep { from { transform: translateX(-50%) rotate(-10deg); } to { transform: translateX(-50%) rotate(10deg); } }
.bb-marquee__kicker { position: relative; z-index: 2; display: table; margin: 0 auto 8px; padding: 4px 12px; border-radius: 999px;
    border: 1px solid rgba(255,105,180,.7); background: rgba(237,22,129,.12); color: #ffd6ea; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
    line-height: 16px; vertical-align: top;   /* fixed: its height must not change when the web font replaces the fallback (layout shift) */
    text-shadow: 0 0 8px rgba(255,64,160,.9); box-shadow: 0 0 14px rgba(237,22,129,.35), inset 0 0 8px rgba(237,22,129,.25); animation: bb-neon 4s linear infinite; }
@keyframes bb-neon { 0%, 18%, 22%, 100% { opacity: 1; } 20% { opacity: .55; } }
/* the logo: moving metallic gold, a dark "extrusion" and a warm glow */
.bb-root h1.bb-logo { position: relative; z-index: 2; letter-spacing: clamp(1px, .9vw, 4px); font-size: clamp(36px, 11.6vw, 60px);
    background: linear-gradient(100deg, #c98a00 0%, #fff6c9 18%, #f5c518 36%, #c98a00 52%, #fff6c9 70%, #f5c518 88%, #c98a00 100%) 0 0 / 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
    filter: drop-shadow(0 3px 0 #6b3d00) drop-shadow(0 0 18px rgba(245,197,24,.35)); animation: bb-logo-shine 7s linear infinite; }
.bb-root h1.bb-logo span { -webkit-text-fill-color: initial; filter: none; }
@keyframes bb-logo-shine { to { background-position: -220% 0; } }
.bb-root .bb-marquee p.bb-tagline { position: relative; z-index: 2; color: #ffe9b0; text-shadow: 0 1px 8px rgba(0,0,0,.5); }

/* shared: the two big home cards */
.bb-root .bb-hcard { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 14px;
    padding: 16px 16px 16px 14px; border: 0; border-radius: 22px; color: #fff; text-align: left; cursor: pointer; font: inherit;
    transition: transform .12s ease, box-shadow .2s ease, filter .2s ease; }
.bb-root .bb-hcard:active { transform: scale(.975); }
@media (hover: hover) { .bb-root .bb-hcard:hover { filter: brightness(1.07); transform: translateY(-2px); } }
.bb-hcard:focus-visible { outline: 2px solid var(--bb-gold); outline-offset: 3px; }
/* a glossy light sweep every few seconds */
/* (moved with transform, never `left`: animating left re-lays-out every frame and counts as layout shift) */
.bb-root .bb-hcard::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; z-index: 0; pointer-events: none;
    transform: translateX(-140%) skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
    animation: bb-hcard-sheen 4.5s ease-in-out infinite; }
@keyframes bb-hcard-sheen { 0%, 60% { transform: translateX(-140%) skewX(-20deg); } 100% { transform: translateX(440%) skewX(-20deg); } }
.bb-hcard > span { position: relative; z-index: 1; }
.bb-root .bb-hcard__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
/* one line, fixed height: a wrap that comes and goes (fonts loading, the timer ticking) would move everything below */
.bb-root .bb-hcard__kicker { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; height: 18px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px;
    text-transform: uppercase; color: rgba(255,255,255,.92); white-space: nowrap; min-width: 0; overflow: hidden; }
.bb-root .bb-hcard__kicker > span:not(.bb-hcard__timer) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bb-root .bb-hcard__timer { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.22); letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.bb-hcard__clock { font-style: normal; }
@media (max-width: 380px) { .bb-root .bb-hcard__kicker { font-size: 9.5px; letter-spacing: .8px; gap: 5px; } .bb-root .bb-hcard__timer { padding: 1px 5px; } }
@media (max-width: 340px) { .bb-hcard__clock { display: none; } }   /* "LIVE NOW 06:12:40" fits a 320 px phone */
.bb-root .bb-hcard__title { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: .8px; color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.bb-root .bb-hcard__sub { font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,.88); }
.bb-root .bb-hcard__go { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.2); border: 1.5px solid rgba(255,255,255,.55); font-size: 17px; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.bb-hcard__live { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: bb-live 1.4s ease-out infinite; }
@keyframes bb-live { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.75); } 100% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } }

/* Aaj Ki Release: a premiere ticket (notched sides, calendar tile) */
.bb-root .bb-hcard--daily { background: linear-gradient(120deg, #ff7a3d 0%, #f44a25 30%, #ed1681 75%, #b5179e 100%);
    box-shadow: 0 14px 32px rgba(237,22,129,.38), inset 0 1px 0 rgba(255,255,255,.25); }
/* first visit: a gold ring pulses out of the ticket (keeps the card's own glow, unlike the generic .bb-pulse) */
.bb-root .bb-hcard--daily.bb-pulse { animation: bb-hcard-pulse 1.8s ease-out infinite; }
@keyframes bb-hcard-pulse { 0% { box-shadow: 0 14px 32px rgba(237,22,129,.38), 0 0 0 0 rgba(245,197,24,.75); }
    100% { box-shadow: 0 14px 32px rgba(237,22,129,.38), 0 0 0 14px rgba(245,197,24,0); } }
.bb-root .bb-hcard--daily.is-done { background: linear-gradient(120deg, #1faa59 0%, #169a8a 45%, #1d6fd8 100%); box-shadow: 0 14px 32px rgba(29,111,216,.35), inset 0 1px 0 rgba(255,255,255,.25); }
.bb-root .bb-hcard--daily::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(circle at 0 50%, var(--bb-bg) 0 9px, transparent 10px), radial-gradient(circle at 100% 50%, var(--bb-bg) 0 9px, transparent 10px); }
.bb-root .bb-hcard__cal { flex: 0 0 60px; height: 66px; display: flex; flex-direction: column; overflow: hidden; margin-left: 4px; border-radius: 12px; background: #fff;
    color: #1b0d2a; transform: rotate(-5deg); box-shadow: 0 8px 18px rgba(0,0,0,.28); text-align: center; }
.bb-hcard__cal small { display: block; background: #e11d48; color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 0; }
.bb-hcard--daily.is-done .bb-hcard__cal small { background: #169a8a; }
.bb-hcard__cal b { flex: 1; display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-weight: 400; font-size: 34px; line-height: 1; }

/* Quick Film: a clapperboard (striped clapper along the top, slate icon, ACTION!) */
.bb-root .bb-hcard--quick { padding-top: 26px; background: linear-gradient(120deg, #6a2bd9 0%, #4b3fd6 45%, #1d8fe0 100%);
    box-shadow: 0 14px 32px rgba(58,86,212,.38), inset 0 1px 0 rgba(255,255,255,.2); }
.bb-root .bb-hcard__clap { position: absolute; top: 0; left: 0; right: 0; height: 12px; z-index: 1;
    background: repeating-linear-gradient(-55deg, #15101f 0 14px, #f4f1ea 14px 28px); box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.bb-root .bb-hcard__icon { flex: 0 0 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin-left: 4px; border-radius: 16px; font-size: 32px;
    background: rgba(12,6,24,.35); border: 1px solid rgba(255,255,255,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.bb-root .bb-hcard__go--action { width: auto; height: auto; padding: 7px 12px; border-radius: 999px; background: #15101f; border: 1.5px solid var(--bb-gold);
    font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 18px; letter-spacing: 1.5px; color: var(--bb-gold); }

@media (max-width: 360px) {
    .bb-root .bb-hcard { gap: 10px; padding-left: 10px; padding-right: 12px; }
    .bb-root .bb-hcard__cal, .bb-root .bb-hcard__icon { flex-basis: 50px; }
    .bb-root .bb-hcard__cal { height: 58px; }
    .bb-root .bb-hcard__icon { height: 50px; font-size: 27px; }
    .bb-root .bb-hcard__title { font-size: 26px; }
    .bb-root .bb-hcard__go { width: 38px; height: 38px; font-size: 15px; }
    .bb-root .bb-hcard__go--action { width: auto; height: auto; padding: 6px 9px; font-size: 16px; }
    .bb-root .bb-hcard__kicker { font-size: 9.5px; letter-spacing: 1.2px; }
}
@media (prefers-reduced-motion: reduce) {
    .bb-root .bb-bulbs::before, .bb-root .bb-bulbs::after, .bb-marquee__beams, .bb-marquee__kicker, .bb-root h1.bb-logo,
    .bb-root .bb-hcard::after, .bb-hcard__live, .bb-root .bb-hcard--daily.bb-pulse { animation: none; }
}

/* ── Classic / Filmy Keeda: premium mode cards (2026-09-28) ─────────────────────────────────────────────────── */
.bb-root .bb-mode { position: relative; overflow: hidden; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; min-height: 70px;
    padding: 12px 10px; border-radius: 18px; border: 1.5px solid var(--bb-line2, rgba(255,255,255,.18)); text-align: left;
    background: linear-gradient(150deg, var(--bb-card2), var(--bb-card)); box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: transform .12s, box-shadow .2s, border-color .2s; }
.bb-root .bb-mode:active { transform: scale(.97); }
.bb-mode__icon { flex: 0 0 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 20px;
    background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.12); }
.bb-mode--classic .bb-mode__icon { background: radial-gradient(circle at 50% 35%, rgba(245,197,24,.45), rgba(120,70,0,.35)); }
.bb-mode--keeda .bb-mode__icon { background: radial-gradient(circle at 50% 35%, rgba(123,97,255,.55), rgba(40,10,80,.45)); }
.bb-mode__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bb-root .bb-mode__txt b { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-weight: 400; font-size: 21px; letter-spacing: .6px; line-height: 1; color: #fff; }
.bb-root .bb-mode__txt small { font-size: 11.5px; line-height: 1.3; color: var(--bb-muted); }
.bb-mode__on { position: absolute; top: 6px; right: 8px; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    color: #2a1600; background: var(--bb-gold); opacity: 0; transform: scale(.8); transition: opacity .2s, transform .2s; }
.bb-root .bb-mode.is-on { border-color: var(--bb-gold); box-shadow: 0 0 0 1px var(--bb-gold), 0 0 22px rgba(245,197,24,.28), 0 8px 20px rgba(0,0,0,.25);
    background: radial-gradient(120% 120% at 0% 0%, rgba(245,197,24,.18), transparent 55%), linear-gradient(150deg, var(--bb-card2), var(--bb-card)); }
.bb-root .bb-mode--keeda.is-on { border-color: #9d7bff; box-shadow: 0 0 0 1px #9d7bff, 0 0 22px rgba(123,97,255,.35), 0 8px 20px rgba(0,0,0,.25);
    background: radial-gradient(120% 120% at 0% 0%, rgba(123,97,255,.25), transparent 55%), linear-gradient(150deg, #2a1a52, #1a0f33); }
.bb-mode--keeda.is-on .bb-mode__on { background: #b69cff; }
.bb-mode.is-on .bb-mode__on { opacity: 1; transform: scale(1); }
@media (max-width: 360px) { .bb-root .bb-mode { gap: 8px; padding: 10px 8px; } .bb-mode__icon { flex-basis: 30px; height: 30px; font-size: 16px; } .bb-root .bb-mode__txt b { font-size: 17px; letter-spacing: .3px; white-space: nowrap; } }
/* ≤340px "✓ ON" would cover the end of the title, so the badge shrinks to a round ✓ disc in the corner (the gold
   border + glow already mark the chosen card; the badge is aria-hidden, the button carries aria-checked) */
@media (max-width: 340px) {
    .bb-root .bb-mode__on { top: 5px; right: 5px; width: 17px; height: 17px; padding: 0; font-size: 0; display: flex; align-items: center; justify-content: center; }
    .bb-root .bb-mode__on::before { content: '✓'; font-size: 10px; line-height: 1; letter-spacing: 0; }
}

/* ── Genre cards: cinematic poster cards (2026-09-28) ───────────────────────────────────────────────────────── */
.bb-root .bb-genre { position: relative; overflow: hidden; isolation: isolate; padding: 18px 40px 16px 14px; border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -40px 60px rgba(0,0,0,.28), 0 12px 28px rgba(0,0,0,.35); }
/* film grain + a top light so every genre colour reads as a lit poster */
.bb-root .bb-genre::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(120% 80% at 15% 0%, rgba(255,255,255,.22), transparent 55%), repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px); }
.bb-root .bb-genre::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 26%; z-index: -1; pointer-events: none;
    transform: translateX(-160%) skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); }
@media (hover: hover) { .bb-root .bb-genre:hover::after { transition: transform .8s ease; transform: translateX(520%) skewX(-20deg); }
    .bb-root .bb-genre:hover { transform: translateY(-2px); } }
.bb-genre__mark { position: absolute; right: -14px; bottom: -22px; z-index: -1; font-size: 110px; line-height: 1; opacity: .16; transform: rotate(-12deg); pointer-events: none;
    filter: saturate(1.3); }
.bb-root .bb-genre__emoji { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; font-size: 30px;
    background: rgba(0,0,0,.28); border: 1.5px solid rgba(255,255,255,.4); box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.35); }
.bb-root .bb-genre__name { font-size: 30px; letter-spacing: 1px; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.bb-root .bb-genre__line { font-style: italic; opacity: .95; }
.bb-root .bb-genre__hint { background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(2px); font-weight: 600; }
.bb-genre__go { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); font-family: Arial, Helvetica, sans-serif; font-size: 24px;
    font-weight: 700; line-height: 1; padding-bottom: 3px; box-sizing: border-box; }
@media (max-width: 360px) { .bb-root .bb-genre { padding-right: 34px; } .bb-root .bb-genre__emoji { width: 44px; height: 44px; font-size: 25px; } .bb-root .bb-genre__name { font-size: 26px; }
    .bb-genre__go { width: 26px; height: 26px; right: 8px; font-size: 17px; } }

/* ── Casting board: credit-style role headers (2026-09-28) — each role has its own colour, badge and plain-words line ── */
.bb-root .bb-slot { --role: #f5c518; --role2: #f44a25; border: 1.5px solid rgba(255,255,255,.12); border-top: 0; padding: 0 10px 10px; gap: 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--role) 10%, var(--bb-card)), var(--bb-card) 60%); }
.bb-root .bb-slot--hero { --role: #f5c518; --role2: #f08a00; }
.bb-root .bb-slot--heroine { --role: #ff5fa2; --role2: #d6247a; }
.bb-root .bb-slot--villain { --role: #ff4d5e; --role2: #8b0f1f; }
.bb-root .bb-slot--director { --role: #9d7bff; --role2: #5a2bd6; }
/* the header strip: a role-coloured band with the emoji badge, the name and what the role is */
.bb-root .bb-slot__role { position: relative; margin: 0 -10px; padding: 9px 10px 8px; gap: 8px; flex-wrap: nowrap; font-size: 12px;
    background: linear-gradient(120deg, var(--role), var(--role2)); color: #1a0d05; border-radius: 0; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.bb-root .bb-slot--villain .bb-slot__role, .bb-root .bb-slot--director .bb-slot__role { color: #fff; }
.bb-root .bb-slot.is-done .bb-slot__role { width: auto; flex: 0 0 calc(100% + 20px); }
.bb-slot__badge { flex: 0 0 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 17px;
    background: rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.bb-slot__rtxt { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1; }
.bb-root .bb-slot__rtxt b { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-weight: 400; font-size: 23px; letter-spacing: 1.2px; line-height: .95; text-transform: uppercase; }
.bb-root .bb-slot__rtxt small { font-size: 10.5px; font-weight: 700; opacity: .85; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-slot__era { display: block; margin-top: 3px; }
.bb-slot__pending .bb-slot__era { display: inline-block; margin: 0 6px 0 0; }
.bb-root .bb-slot__era .bb-era { font-size: 10px; padding: 1px 7px; color: #fff; }
.bb-root .bb-slot.is-done { border-color: color-mix(in srgb, var(--role) 55%, transparent); }
.bb-root .bb-slot.is-pending { border-color: var(--bb-gold); box-shadow: 0 0 0 1px var(--bb-gold), 0 0 22px rgba(245,197,24,.3); }
@media (max-width: 360px) { .bb-slot__badge { flex-basis: 26px; height: 26px; font-size: 15px; } .bb-root .bb-slot__rtxt b { font-size: 20px; } .bb-root .bb-slot__rtxt small { font-size: 9.5px; } }
/* a filled slot on a phone: a long surname ("Deverakonda") breaks with a hyphen instead of running out of the card */
.bb-root .bb-slot__who b { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 380px) {
    .bb-root .bb-slot.is-done { gap: 6px; }
    .bb-root .bb-slot.is-done > .bb-av, .bb-root .bb-slot.is-done > svg.bb-av { width: 36px; height: 36px; }
    .bb-root .bb-slot__who b { font-size: 12px; }
}
/* 320 px phones: 11 px keeps common long surnames ("Chakraborty", "Mandanna") whole; only a truly long word still breaks */
@media (max-width: 340px) {
    .bb-root .bb-slot__who b { font-size: 11px; letter-spacing: -.1px; }
    .bb-root .bb-slot.is-done { gap: 5px; padding-left: 8px; padding-right: 8px; }
    .bb-root .bb-slot.is-done .bb-slot__role { margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
    .bb-root .bb-slot.is-done .bb-slot__role { flex-basis: calc(100% + 16px); }
    .bb-root .bb-slot.is-done > .bb-av, .bb-root .bb-slot.is-done > svg.bb-av { width: 34px; height: 34px; }
}

/* ── Clarity + brand pass (2026-09-28, css v72) ──────────────────────────────────────────────────────────────────────
   "Cloudz.fun presents" credit over the logo · genre "script desk" · casting guide + progress · How to play sheet. */
/* the studio credit, like the line before a film's title card; fixed line-height = no layout shift when fonts load */
.bb-marquee__presents { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 4px;
    font-size: 12px; line-height: 16px; letter-spacing: 2px; color: #ffe9b0; font-style: italic; font-weight: 500; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.bb-marquee__presents b { font-style: normal; font-weight: 800; letter-spacing: 1px; color: #fff6c9; }
.bb-marquee__presents::before, .bb-marquee__presents::after { content: ''; flex: 0 1 34px; height: 1px; }
.bb-marquee__presents::before { background: linear-gradient(90deg, transparent, rgba(245,197,24,.8)); }
.bb-marquee__presents::after { background: linear-gradient(90deg, rgba(245,197,24,.8), transparent); }
@media (max-width: 340px) { .bb-marquee__presents { font-size: 11px; letter-spacing: 1.5px; gap: 8px; } .bb-marquee__presents::before, .bb-marquee__presents::after { flex-basis: 22px; } }

/* genre screen: how many scripts this film deals, so 3 cards never read as "the game only has 3 genres" */
.bb-root .bb-scriptdesk { display: flex; align-items: center; gap: 12px; margin: -4px 0 14px; padding: 10px 14px; border-radius: 14px;
    background: linear-gradient(100deg, rgba(245,197,24,.14), rgba(237,22,129,.08) 70%); border: 1px solid rgba(245,197,24,.35); }
.bb-scriptdesk__icon { flex: 0 0 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 18px;
    background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(245,197,24,.35); }
.bb-root .bb-scriptdesk b { display: block; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-weight: 400; font-size: 20px; letter-spacing: 1px; line-height: 1.05; color: #ffe38a; }
.bb-root .bb-scriptdesk small { display: block; font-size: 12px; color: var(--bb-muted); margin-top: 1px; }

/* casting board: the next step in words + a 5-step rail (4 roles + music) */
.bb-root .bb-castguide { position: relative; margin: 0 0 12px; padding: 10px 12px 11px; border-radius: 14px; background: rgba(255,255,255,.04);
    border: 1px solid var(--bb-line); border-left: 3px solid var(--bb-gold); }
.bb-root .bb-castguide.is-music { border-color: rgba(245,197,24,.55); border-left-color: var(--bb-gold); background: rgba(245,197,24,.08); }
.bb-root .bb-castguide.is-done { border-left-color: #2ecc71; background: rgba(46,204,113,.07); }
.bb-castguide__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bb-root p.bb-castguide__text { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--bb-text); }
.bb-castguide__count { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .5px; line-height: 16px;
    color: #241036; background: linear-gradient(135deg, var(--bb-gold), #ffb703); white-space: nowrap; }
.bb-root .bb-castguide.is-done .bb-castguide__count { background: linear-gradient(135deg, #7ee2a8, #2ecc71); }
.bb-castguide__rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 9px; }
.bb-castguide__rail i { display: flex; align-items: center; justify-content: center; height: 22px; border-radius: 6px; font-style: normal; font-size: 12px;
    background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); filter: grayscale(1); opacity: .55; transition: background .25s, opacity .25s; }
.bb-castguide__rail i.is-on { background: linear-gradient(135deg, rgba(245,197,24,.45), rgba(244,74,37,.35)); box-shadow: inset 0 0 0 1px rgba(245,197,24,.6); filter: none; opacity: 1; }
.bb-castguide__rail i.is-now { filter: none; opacity: 1; box-shadow: inset 0 0 0 1.5px var(--bb-gold); animation: bb-guide-now 1.4s ease-in-out infinite; }
@keyframes bb-guide-now { 50% { background: rgba(245,197,24,.2); } }
.bb-root .bb-castguide__go { margin-top: 10px; width: 100%; }
.bb-root h3.bb-h3 small.bb-req { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: .15em;
    color: #ffe38a; background: rgba(245,197,24,.14); border: 1px solid rgba(245,197,24,.45); }
.bb-root h3.bb-h3 small.bb-req.is-ok { color: #7ee2a8; background: rgba(46,204,113,.12); border-color: rgba(46,204,113,.5); }

/* How to play: goal card → steps → ways to play → collection ladder */
.bb-modal__box.bb-how { max-height: 88vh; overflow-y: auto; }
.bb-how__goal { margin: 10px 0 4px; padding: 14px; border-radius: 16px; text-align: center; border: 1px solid rgba(245,197,24,.5);
    background: radial-gradient(80% 90% at 50% 0%, rgba(245,197,24,.2), transparent 70%), linear-gradient(180deg, #2a0f45, #170826); }
.bb-how__goal small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #ffd6ea; }
.bb-how__goal b { display: block; margin: 4px 0 2px; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-weight: 400; font-size: 26px; letter-spacing: 1px; line-height: 1.05;
    background: linear-gradient(180deg, #fff6c9, var(--bb-gold) 60%, #c98a00); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bb-how__goal span { display: block; font-size: 13px; color: var(--bb-muted); line-height: 1.4; }
.bb-modal__box h3.bb-how__head { margin: 18px 0 8px; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-weight: 400; font-size: 22px !important; letter-spacing: 1px; line-height: 1; color: var(--bb-gold); }
.bb-modal__box.bb-how ol { margin-top: 0; }
.bb-how__modes { display: grid; gap: 8px; }
.bb-how__mode { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); }
.bb-how__mode > span { flex: 0 0 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 16px; background: rgba(0,0,0,.3); }
.bb-how__mode p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--bb-muted); text-align: left; }
.bb-how__mode p b { display: block; color: var(--bb-text); font-size: 14px; }
.bb-modal__box p.bb-how__sub { margin: -4px 0 8px; font-size: 13px; color: var(--bb-muted); }
.bb-how__ladder { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 5px; }
.bb-how__ladder li { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 13.5px;
    background: rgba(255,255,255,.05);   /* fallback without color-mix() */
    background: linear-gradient(90deg, color-mix(in srgb, var(--v) 22%, transparent), rgba(255,255,255,.03)); border-left: 3px solid var(--v); }
.bb-how__ladder li span { font-weight: 700; color: var(--bb-text); }
.bb-how__ladder li b { color: #ffe38a; white-space: nowrap; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .bb-castguide__rail i.is-now { animation: none; } }

/* casting board: the sticky "box office counter" (replaces the plain Budget / Used / Left line) */
.bb-root .bb-sticky:has(.bb-cashbox) { background: linear-gradient(180deg, rgba(26,10,42,.97), rgba(20,11,31,.94)); border-bottom: 1px solid rgba(245,197,24,.35);
    box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.bb-cashbox__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bb-cashbox__left { display: flex; flex-direction: column; min-width: 0; line-height: 1; }
.bb-cashbox__left small { font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: var(--bb-muted); white-space: nowrap; }
.bb-cashbox__left b { margin-top: 3px; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-weight: 400; font-size: 30px; letter-spacing: 1px; line-height: .95; white-space: nowrap;
    background: linear-gradient(180deg, #fff6c9, var(--bb-gold) 55%, #c98a00); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 10px rgba(245,197,24,.3)); }
.bb-root .bb-cashbox.is-low .bb-cashbox__left b { background: linear-gradient(180deg, #ffd0d5, #ff4d5e); -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(0 0 10px rgba(255,77,94,.4)); }
.bb-cashbox__left b.is-changed { animation: bb-cash-tick .5s ease-out; }
@keyframes bb-cash-tick { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
.bb-cashbox__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; text-align: right; }
.bb-cashbox__spent { font-size: 11.5px; color: var(--bb-muted); white-space: nowrap; }
.bb-cashbox__mkt { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; color: #ffe9b0;
    background: rgba(245,197,24,.1); border: 1px solid rgba(245,197,24,.35); }
.bb-cashbox__mkt b { font-weight: 800; color: #ffe38a; }
.bb-cashbox__mkt--0 { background: rgba(255,77,94,.12); border-color: rgba(255,77,94,.45); }
.bb-cashbox__mkt--0 b { color: #ff8f9a; }
.bb-cashbox__mkt--3 { background: rgba(46,204,113,.12); border-color: rgba(46,204,113,.45); }
.bb-cashbox__mkt--3 b { color: #7ee2a8; }
/* the spend bar: pink-orange = spent, the lit gold track = what's still in the bank */
.bb-cashbox__bar { position: relative; height: 6px; margin-top: 7px; border-radius: 99px; overflow: hidden;
    background: linear-gradient(90deg, rgba(245,197,24,.35), rgba(245,197,24,.18)); box-shadow: inset 0 0 0 1px rgba(245,197,24,.25); }
.bb-cashbox__bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--bb-pink), var(--bb-orange)); transition: width .45s ease; }
@media (max-width: 360px) { .bb-cashbox__left b { font-size: 26px; } .bb-cashbox__spent { font-size: 10.5px; } .bb-cashbox__mkt { font-size: 10.5px; padding: 2px 6px; } }
@media (prefers-reduced-motion: reduce) { .bb-cashbox__left b.is-changed { animation: none; } .bb-cashbox__bar i { transition: none; } }

/* box office screen: the sticky "box office counter" — LIVE + week, the running total in gold, a track to the ₹1000 Cr
   club, the milestone line, and a static row of marquee bulbs along the bottom edge. Skip sits in its own column. */
.bb-root .bb-simhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; text-align: left;
    padding: 10px var(--s4) 14px; border-bottom: 1px solid rgba(245,197,24,.45);
    background: radial-gradient(70% 120% at 0% 0%, rgba(245,197,24,.14), transparent 60%), radial-gradient(60% 120% at 100% 100%, rgba(237,22,129,.18), transparent 60%),
        linear-gradient(180deg, rgba(34,12,56,.98), rgba(20,11,31,.96));
    box-shadow: 0 10px 22px rgba(0,0,0,.4); }
.bb-root .bb-simhead::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 6px; pointer-events: none; opacity: .8;
    background: radial-gradient(circle, #fff3c4 0 1.4px, rgba(255,206,84,.6) 2.2px, transparent 3.2px) 0 50% / 12px 6px repeat-x; }
.bb-simhead__top { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.bb-simhead__live { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 800;
    letter-spacing: 1.2px; text-transform: uppercase; color: #fff; background: #e0213a; box-shadow: 0 0 12px rgba(224,33,58,.55); line-height: 16px; }
.bb-simhead__live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: bb-live-dot 1.2s ease-in-out infinite; }
@keyframes bb-live-dot { 50% { opacity: .25; } }
.bb-root .bb-simhead__lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; color: var(--bb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-simhead__wk { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; line-height: 16px; color: #ffe38a;
    background: rgba(245,197,24,.12); border: 1px solid rgba(245,197,24,.4); }
.bb-simhead__wk:empty { display: none; }
.bb-root .bb-simhead__num { grid-column: 1; margin-top: 2px; font-size: 46px; line-height: 1; letter-spacing: 1px; white-space: nowrap;
    background: linear-gradient(180deg, #fff6c9, var(--bb-gold) 55%, #c98a00); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 0 #5a3300) drop-shadow(0 0 14px rgba(245,197,24,.35)); }
.bb-root .bb-simskip { grid-column: 2; grid-row: 2; position: static; transform: none; align-self: center; }
.bb-simhead__goal { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.bb-simhead__track { position: relative; flex: 1; height: 7px; border-radius: 99px; overflow: hidden; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px rgba(245,197,24,.3); }
.bb-simhead__track i { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); border-radius: 99px;
    background: linear-gradient(90deg, var(--bb-pink), var(--bb-orange) 60%, var(--bb-gold)); }
.bb-simhead__track.is-club { box-shadow: inset 0 0 0 1px var(--bb-gold), 0 0 14px rgba(245,197,24,.6); }
.bb-simhead__track.is-club i { background: linear-gradient(90deg, #c98a00, #fff6c9, var(--bb-gold), #fff6c9, #c98a00) 0 0 / 200% 100%; animation: bb-club-shine 1.6s linear infinite; }
@keyframes bb-club-shine { to { background-position: -200% 0; } }
.bb-simhead__trophy { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: #ffe38a; white-space: nowrap; }
.bb-root .bb-simhead__ms { grid-column: 1 / -1; min-height: 18px; margin-top: 4px; font-size: 13px; line-height: 18px; text-align: center; color: #7dffb0; text-shadow: 0 0 10px rgba(46,204,113,.45); }
@media (max-width: 360px) { .bb-root .bb-simhead__num { font-size: 40px; } .bb-root .bb-simhead__lbl { letter-spacing: 1px; } }
@media (prefers-reduced-motion: reduce) { .bb-simhead__live i, .bb-simhead__track.is-club i { animation: none; } }

/* ── Result screen: the premiere card (2026-09-28) — the verdict colour (--c) lights the card; gold marquee bulbs top
   and bottom; title → stamp → gross (metallic gold) → Critics / Budget / Returns tiles → the roast as a pull quote ── */
.bb-root .bb-vcard { position: relative; isolation: isolate; overflow: hidden; margin: 6px 0 14px; padding: 22px 14px 18px; border-radius: 24px;
    /* fallbacks first: browsers without color-mix() (Chrome/WebView < 111, iOS < 16.2) drop the declarations below */
    border: 2px solid rgba(245,197,24,.6); background: linear-gradient(180deg, #25103d, #12061f); box-shadow: 0 18px 40px rgba(0,0,0,.45);
    border: 2px solid color-mix(in srgb, var(--c) 55%, rgba(245,197,24,.6));
    background: radial-gradient(85% 60% at 50% 0%, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%),
        radial-gradient(70% 70% at 50% 115%, rgba(237,22,129,.22), transparent 65%), linear-gradient(180deg, #25103d, #12061f);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 18px 40px rgba(0,0,0,.45), 0 0 34px color-mix(in srgb, var(--c) 22%, transparent);
    animation: bb-vcard-in .5s ease-out both; }
@keyframes bb-vcard-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bb-root .bb-vcard::before, .bb-root .bb-vcard::after { content: ''; position: absolute; left: 14px; right: 14px; height: 8px; pointer-events: none; z-index: 1;
    background: radial-gradient(circle, #fff7d1 0 1.8px, rgba(255,206,84,.7) 2.6px, transparent 4px) 0 50% / 15px 8px repeat-x; filter: drop-shadow(0 0 2px rgba(255,200,60,.8)); }
.bb-root .bb-vcard::before { top: 6px; }
.bb-root .bb-vcard::after { bottom: 6px; }
.bb-vcard__title { position: relative; z-index: 2; margin: 2px 0 0; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 22px; letter-spacing: 1.5px; line-height: 1.1;
    color: #fff3d6; text-shadow: 0 2px 10px rgba(0,0,0,.6); overflow-wrap: anywhere; }
.bb-root .bb-vcard .bb-verdict__stamp { position: relative; z-index: 2; margin: 10px auto 12px; background: rgba(0,0,0,.35);
    box-shadow: 0 0 18px rgba(0,0,0,.4);
    box-shadow: 0 0 22px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 14px color-mix(in srgb, var(--c) 25%, transparent); }
.bb-root .bb-vcard .bb-verdict__lbl { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: #ffe9b0; }
.bb-root .bb-vcard .bb-verdict__lbl::before, .bb-root .bb-vcard .bb-verdict__lbl::after { content: ''; flex: 0 1 36px; height: 1px; }
.bb-root .bb-vcard .bb-verdict__lbl::before { background: linear-gradient(90deg, transparent, rgba(245,197,24,.8)); }
.bb-root .bb-vcard .bb-verdict__lbl::after { background: linear-gradient(90deg, rgba(245,197,24,.8), transparent); }
.bb-root .bb-vcard .bb-verdict__gross { margin-top: 4px; font-size: clamp(56px, 19vw, 76px); letter-spacing: 1.5px; white-space: nowrap;
    background: linear-gradient(100deg, #c98a00 0%, #fff6c9 20%, #f5c518 40%, #c98a00 55%, #fff6c9 75%, #f5c518 100%) 0 0 / 220% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 3px 0 #5a3300) drop-shadow(0 0 20px rgba(245,197,24,.4)); animation: bb-logo-shine 6s linear 2; }   /* two sweeps, then still: no endless repaint */
/* the three trade numbers */
.bb-vstats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 4px; }
.bb-vstat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: 9px 4px 8px; border-radius: 14px;
    background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.bb-vstat small { font-size: 10px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--bb-muted); }
.bb-root .bb-vstat b { font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-weight: 400; font-size: 24px; letter-spacing: .5px; line-height: 1; color: #fff3d6; white-space: nowrap; }
.bb-vstat b em { font-style: normal; font-size: .62em; opacity: .7; margin-left: 1px; }
.bb-root .bb-vstat .bb-critic { font-size: 11px; line-height: 1; }
.bb-root .bb-vstat .bb-critic .bb-cstar { margin-right: 1px; }
.bb-root .bb-vstat.is-up b { color: #7ee2a8; text-shadow: 0 0 12px rgba(46,204,113,.45); }
.bb-root .bb-vstat.is-down b { color: #ff8f9a; text-shadow: 0 0 12px rgba(255,77,94,.4); }
/* the roast: a pull quote with big gold quote marks */
.bb-root .bb-vcard p.bb-roast { position: relative; z-index: 2; margin: 10px auto 8px; padding: 0 8px; max-width: 420px; font-size: 15.5px; line-height: 1.45; color: #ffe9b0; }
.bb-root .bb-vcard p.bb-roast::before { content: '“'; display: block; height: 20px; margin-bottom: 2px; font-family: Georgia, serif; font-size: 44px; font-style: normal; line-height: 36px; color: rgba(245,197,24,.55); }
@media (max-width: 360px) { .bb-root .bb-vstat b { font-size: 21px; } .bb-vstat small { letter-spacing: .8px; } .bb-root .bb-vcard { padding-left: 10px; padding-right: 10px; } }
@media (prefers-reduced-motion: reduce) { .bb-root .bb-vcard, .bb-root .bb-vcard .bb-verdict__gross { animation: none; } }

/* ── Box Office Clash result, premium (2026-09-28): marquee title band · glowing VS medallion · poster frames · a trade
   chart race (LIVE week → FINAL) · gold winner ribbon / pink revenge ribbon ── */
.bb-root .bb-clashhead { position: relative; overflow: hidden; margin: 4px 0 12px; padding: 16px 12px 14px; border-radius: 20px; text-align: center;
    border: 2px solid rgba(245,197,24,.55); background: radial-gradient(80% 90% at 50% 0%, rgba(237,22,129,.28), transparent 65%), linear-gradient(180deg, #2a0f45, #12061f);
    box-shadow: 0 14px 30px rgba(0,0,0,.4), 0 0 26px rgba(237,22,129,.18); }
.bb-root .bb-clashhead::before, .bb-root .bb-clashhead::after { content: ''; position: absolute; left: 12px; right: 12px; height: 8px; pointer-events: none;
    background: radial-gradient(circle, #fff7d1 0 1.8px, rgba(255,206,84,.7) 2.6px, transparent 4px) 0 50% / 15px 8px repeat-x; filter: drop-shadow(0 0 2px rgba(255,200,60,.8)); }
.bb-root .bb-clashhead::before { top: 5px; }
.bb-root .bb-clashhead::after { bottom: 5px; }
.bb-root .bb-clashhead .bb-h2 { margin: 0; font-size: clamp(30px, 9vw, 40px); letter-spacing: 2px;
    background: linear-gradient(180deg, #fff6c9, var(--bb-gold) 55%, #c98a00); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 0 #5a3300) drop-shadow(0 0 14px rgba(245,197,24,.35)); }
/* VS medallion */
.bb-root .bb-vs { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; font-size: 22px; letter-spacing: 1px; color: #fff;
    background: radial-gradient(circle at 35% 30%, #ff6fb5, var(--bb-pink) 45%, #7a0a45); border: 2px solid rgba(255,227,138,.85);
    box-shadow: 0 0 0 4px rgba(237,22,129,.18), 0 0 24px rgba(237,22,129,.6); text-shadow: 0 1px 0 rgba(0,0,0,.4); animation: bb-vs-pulse 2.4s ease-in-out infinite; }
.bb-root .bb-vs span { transform: translateY(1px); }
@keyframes bb-vs-pulse { 50% { box-shadow: 0 0 0 7px rgba(237,22,129,.1), 0 0 34px rgba(237,22,129,.75); } }
.bb-root .bb-clashside__who { display: inline-flex; align-items: center; justify-content: center; gap: 4px; max-width: 100%; margin-bottom: 6px; padding: 2px 10px;
    border-radius: 999px; font-size: 12.5px; letter-spacing: .5px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.bb-root .bb-clashside.is-win .bb-clashside__who { color: #241036; background: linear-gradient(135deg, #fff6c9, var(--bb-gold)); box-shadow: 0 0 16px rgba(245,197,24,.5); }
.bb-root .bb-clashside__title { margin-top: 6px; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 16px; letter-spacing: .8px; color: #fff3d6; }
/* the race: a trade chart card */
.bb-root .bb-race { position: relative; margin: 14px 0; padding: 14px 12px 14px; gap: 12px; border-radius: 18px; border: 1px solid rgba(245,197,24,.35);
    background: radial-gradient(90% 80% at 50% 0%, rgba(245,197,24,.1), transparent 70%), linear-gradient(180deg, #221039, #160a26); box-shadow: 0 12px 26px rgba(0,0,0,.35); }
.bb-root .bb-race__week { align-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: 999px; font-size: 18px; letter-spacing: 1.5px;
    color: #fff; background: #e0213a; box-shadow: 0 0 14px rgba(224,33,58,.5); }
.bb-root .bb-race__week::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: bb-live-dot 1.2s ease-in-out infinite; }
.bb-root .bb-race.is-final .bb-race__week { color: #241036; background: linear-gradient(135deg, #fff6c9, var(--bb-gold)); box-shadow: 0 0 16px rgba(245,197,24,.5); }
.bb-root .bb-race.is-final .bb-race__week::before { display: none; }
.bb-root .bb-racerow { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; }
.bb-root .bb-racerow__name { font-size: 12.5px; letter-spacing: .3px; }
.bb-root .bb-racerow__bar { height: 18px; background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.bb-root .bb-racerow__bar i { box-shadow: 0 0 12px rgba(110,168,254,.45); }
.bb-root .bb-racerow:last-child .bb-racerow__bar i { box-shadow: 0 0 12px rgba(237,22,129,.5); }
.bb-root .bb-racerow__bar.is-win { box-shadow: inset 0 0 0 1px var(--bb-gold), 0 0 16px rgba(245,197,24,.55); }
.bb-root .bb-racerow b { min-width: 74px; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-weight: 400; font-size: 20px; letter-spacing: .5px; color: #ffe38a; }
/* the winner ribbon */
.bb-root .bb-clashwin { position: relative; max-width: 330px; margin: 12px auto; padding: 10px 18px; border-radius: 14px; font-size: 26px; line-height: 1.05; color: #241036;
    background: linear-gradient(100deg, #c98a00, #fff6c9 30%, var(--bb-gold) 55%, #fff6c9 80%, #c98a00) 0 0 / 220% 100%;
    box-shadow: 0 10px 26px rgba(245,197,24,.35), 0 0 0 2px rgba(255,255,255,.25) inset;
    animation: bb-stamp .6s cubic-bezier(.2,1.6,.4,1) both, bb-logo-shine 5s linear .6s 2; }
.bb-root .bb-clashwin--lose { color: #fff; font-size: 22px; background: linear-gradient(135deg, #b0124f, var(--bb-pink) 50%, #ff5f8f);
    box-shadow: 0 10px 26px rgba(237,22,129,.35), 0 0 0 2px rgba(255,255,255,.2) inset; animation: bb-stamp .6s cubic-bezier(.2,1.6,.4,1) both; }
@media (max-width: 360px) { .bb-root .bb-racerow { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px; } .bb-root .bb-racerow b { min-width: 64px; font-size: 18px; } .bb-root .bb-vs { width: 40px; height: 40px; font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .bb-root .bb-vs, .bb-root .bb-race__week::before, .bb-root .bb-clashwin { animation: none; } }
/* the longest stamp ("💀 DISASTER", "👑 ALL-TIME BLOCKBUSTER") must sit inside the card with air around it on small phones */
.bb-root .bb-vcard .bb-verdict__stamp { max-width: calc(100% - 24px); }
@media (max-width: 380px) { .bb-root .bb-vcard .bb-verdict__stamp { font-size: 34px; letter-spacing: 2px; padding: 3px 14px; border-width: 4px; } .bb-root .bb-vcard .bb-verdict__stamp span { font-size: 28px; } }
/* "👑 All-Time Blockbuster": one line, smaller, so it reads as a stamp and not a paragraph */
.bb-root .bb-vcard .bb-verdict__stamp.is-long { white-space: nowrap; max-width: none; font-size: 27px; letter-spacing: 1.2px; padding: 3px 14px; }
.bb-root .bb-vcard .bb-verdict__stamp.is-long span { font-size: 22px; }
@media (max-width: 380px) { .bb-root .bb-vcard .bb-verdict__stamp.is-long { font-size: 20px; letter-spacing: .6px; padding: 3px 9px; gap: 5px; } .bb-root .bb-vcard .bb-verdict__stamp.is-long span { font-size: 17px; } }

/* ── The challenger's results page (/f/{code}, owner view): record card with marquee bulbs + fight-card rows ── */
.bb-root .bb-resboard { position: relative; overflow: hidden; margin-top: 4px; padding-top: 20px; padding-bottom: 16px; text-align: center;
    background: radial-gradient(80% 90% at 50% 0%, rgba(237,22,129,.22), transparent 65%), linear-gradient(180deg, #2a0f45, #12061f);
    border: 2px solid rgba(245,197,24,.5); box-shadow: 0 14px 30px rgba(0,0,0,.4); }
.bb-root .bb-resboard::before, .bb-root .bb-resboard::after { content: ''; position: absolute; left: 12px; right: 12px; height: 8px; pointer-events: none;
    background: radial-gradient(circle, #fff7d1 0 1.8px, rgba(255,206,84,.7) 2.6px, transparent 4px) 0 50% / 15px 8px repeat-x; filter: drop-shadow(0 0 2px rgba(255,200,60,.8)); }
.bb-root .bb-resboard::before { top: 5px; }
.bb-root .bb-resboard::after { bottom: 5px; }
.bb-root .bb-resboard > small { color: #ffe9b0; font-weight: 700; }
.bb-root p.bb-resboard__line { margin: 10px 0 2px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--bb-text); }
.bb-reslist { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.bb-resrow { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px;
    background: linear-gradient(100deg, rgba(245,197,24,.12), rgba(255,255,255,.03) 60%); border: 1px solid rgba(245,197,24,.4); border-left: 4px solid var(--bb-gold); }
.bb-resrow.is-lost { background: linear-gradient(100deg, rgba(237,22,129,.14), rgba(255,255,255,.03) 60%); border-color: rgba(237,22,129,.4); border-left-color: var(--bb-pink); }
.bb-resrow__badge { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-size: 18px; background: rgba(0,0,0,.3);
    box-shadow: inset 0 0 0 1px rgba(245,197,24,.45); }
.bb-resrow.is-lost .bb-resrow__badge { box-shadow: inset 0 0 0 1px rgba(237,22,129,.5); }
.bb-resrow__who { display: flex; flex-direction: column; min-width: 0; }
.bb-resrow__who b { font-size: 14px; font-weight: 800; color: var(--bb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-resrow__who small { font-size: 12px; color: var(--bb-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-resrow__score { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.bb-resrow__score > span { display: flex; align-items: baseline; gap: 5px; font-family: 'Bebas Neue', var(--bb-display-hangul), sans-serif; font-size: 17px; letter-spacing: .4px; line-height: 1; color: #d9cde8; white-space: nowrap; }
.bb-resrow__score > span.is-you { font-size: 21px; color: #ffe38a; }
.bb-resrow__score small { font-family: 'Poppins', sans-serif; font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--bb-muted); }
@media (max-width: 340px) { .bb-resrow { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; padding: 9px 10px; } .bb-resrow__badge { width: 30px; height: 30px; font-size: 16px; } }
/* phones ≤380 px: the two collections move under the name, so the friend's name and film get the full width */
@media (max-width: 380px) {
    .bb-resrow { grid-template-columns: 34px minmax(0, 1fr); row-gap: 6px; }
    .bb-resrow__badge { grid-row: 1 / 3; align-self: center; }
    .bb-resrow__score { grid-column: 2; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 14px; }
}

/* sound on/off (bb-sound.js): a small round button above the game's bottom action bar and any bottom-pinned ad */
.bb-soundbtn { position: absolute; z-index: 3; top: 0; right: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    padding: 0; border-radius: 50%; font-size: 16px; line-height: 1; cursor: pointer; color: #fff; background: rgba(26,10,42,.82);
    border: 1.5px solid rgba(245,197,24,.55); box-shadow: 0 4px 12px rgba(0,0,0,.3); transition: transform .12s ease, opacity .2s ease;
    -webkit-tap-highlight-color: transparent; }
.bb-soundbtn:active { transform: scale(.92); }
.bb-soundbtn:focus-visible { outline: 3px solid #ed1681; outline-offset: 2px; }
.bb-soundbtn.is-muted { opacity: .7; border-color: rgba(255,255,255,.25); }
/* where it docks (bb-sound.js dockButton): screen heading → top-right, the title keeps clear of it */
.bb-root .bb-head.has-soundbtn { position: relative; }
.bb-root .bb-head.has-soundbtn > .bb-h2:first-child, .bb-root .bb-head.has-soundbtn > .bb-h2:first-child + .bb-sub { padding-right: 46px; }
/* home → a small badge in the marquee's top-right corner, on the bulb row (clear of the kicker pill below it) */
.bb-root .bb-marquee > .bb-soundbtn { top: 5px; right: 8px; width: 30px; height: 30px; font-size: 13px; background: #1c0a2e; }
@media (max-width: 374px) { .bb-root .bb-marquee.has-soundbtn { padding-top: 40px; } }
/* LIVE box office → the end of the sticky counter's top row (stays in reach while the film runs) */
.bb-root .bb-simhead__top > .bb-soundbtn { position: static; flex: 0 0 auto; margin-left: auto; width: 28px; height: 28px; font-size: 13px; box-shadow: none; }
/* screens without a heading (result, poster, clash result) → a slim right-aligned row above the game */
.bb-soundrow { display: flex; justify-content: flex-end; margin: 0 0 6px; }
.bb-soundrow[hidden] { display: none; }
.bb-soundrow > .bb-soundbtn { position: static; }
@media (prefers-reduced-motion: reduce) { .bb-soundbtn { transition: none; } }