/* Control window — "night world" chrome with paper sticker cards for the teams. */
body { display: grid; grid-template-rows: auto auto 1fr; height: 100vh; overflow: hidden; font-size: 14px;
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(179,90,147,.45), transparent 70%), linear-gradient(180deg, #4A1C50, #3A163E 60%, #2E1132); }
.muted { color: rgba(255,244,223,.62); font-size: 12px; }
h2 { margin: 0; font: 700 18px/1 var(--font-condensed); letter-spacing: .04em; text-transform: uppercase; color: var(--mbh-honey-soft); }

/* ---------- buttons & fields ---------- */
.btn { height: 34px; padding: 0 14px; border-radius: 999px; border: none; cursor: pointer; white-space: nowrap;
  font: 700 14px/1 var(--font-condensed); letter-spacing: .05em; text-transform: uppercase;
  background: rgba(58,22,62,.55); color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.75);
  transition: transform .12s var(--ease-out), box-shadow .2s, background .2s; }
.btn:hover { box-shadow: 0 0 0 2px var(--mbh-honey); }
.btn:active { transform: scale(.96); }
.btn-cta { background: var(--gradient-cta); box-shadow: 0 0 0 2px var(--mbh-cta-rim), 0 0 16px 2px var(--mbh-cta-glow); text-shadow: 0 1px 0 rgba(58,22,62,.35); }
.btn-cta:hover { box-shadow: 0 0 0 2px var(--mbh-cta-rim), 0 0 24px 6px rgba(255,91,79,.75); }
.btn-danger { box-shadow: 0 0 0 2px rgba(255,155,138,.8); color: var(--mbh-coral-soft); }
.btn-danger:hover { background: rgba(216,52,58,.35); box-shadow: 0 0 0 2px var(--mbh-coral); }
.btn-ghost { box-shadow: none; background: transparent; color: rgba(255,244,223,.75); }
.btn-ghost:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.btn-small { height: 28px; padding: 0 11px; font-size: 12.5px; }
.btn.active { background: var(--mbh-honey); color: var(--mbh-ink); box-shadow: 0 0 0 2px var(--mbh-ink), 0 0 0 4px var(--mbh-honey-soft); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.field { width: 100%; height: 34px; padding: 0 12px; border-radius: 10px; border: 2px solid rgba(255,244,223,.25); background: rgba(26,10,28,.45); color: var(--mbh-cream); outline: none; margin-top: 8px; }
.field:focus { border-color: var(--mbh-honey); }
.field.big { height: 42px; font: 700 20px var(--font-condensed); letter-spacing: .03em; text-transform: uppercase; }
select { height: 34px; border-radius: 10px; border: 2px solid rgba(255,244,223,.25); background: #2E1132; color: var(--mbh-cream); padding: 0 8px; }
input[type=range] { accent-color: var(--mbh-honey); }

.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-weight: 600; font-size: 13px; }
.switch.row { display: flex; margin: 9px 0; }
.switch input { display: none; }
.switch span { width: 36px; height: 20px; border-radius: 999px; background: rgba(255,244,223,.2); position: relative; transition: background .2s; flex: none; }
.switch span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease-pop); }
.switch input:checked + span { background: var(--mbh-teal); }
.switch input:checked + span::after { transform: translateX(16px); }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid rgba(255,244,223,.12); background: rgba(26,10,28,.35); }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { width: 34px; height: 34px; }
.brand-name { font: 400 22px/1 var(--font-script); color: var(--mbh-cream); }
.brand-sub { margin-top: 3px; font: 700 11px/1.4 var(--font-condensed); letter-spacing: .14em; text-transform: uppercase; color: var(--mbh-honey-soft); }
.tv-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tv-controls select { max-width: 210px; }
.tv-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 0 10px; height: 28px; border-radius: 999px; background: rgba(26,10,28,.5); margin-right: 4px; white-space: nowrap; }
.tv-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--mbh-gray-500); }
.tv-status.open i { background: var(--mbh-honey); }
.tv-status.full i { background: #3EE08F; box-shadow: 0 0 8px #3EE08F; }
.seg { display: flex; background: rgba(26,10,28,.55); border-radius: 999px; padding: 4px; box-shadow: inset 0 0 0 2px rgba(255,244,223,.18); }
.seg button { border: none; background: transparent; color: var(--mbh-cream); height: 32px; padding: 0 16px; border-radius: 999px; cursor: pointer; font: 700 15px var(--font-condensed); letter-spacing: .05em; text-transform: uppercase; }
.seg button.on { background: var(--gradient-cta); color: #fff; box-shadow: 0 0 12px var(--mbh-cta-glow); }

/* ---------- soundboard ---------- */
.sb-tools { display: flex; align-items: center; gap: 8px; }
.vol { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--font-condensed); letter-spacing: .08em; color: rgba(255,244,223,.75); }
.vol input { width: 90px; }
.vol.wide { display: flex; margin-top: 10px; }
.vol.wide input { flex: 1; width: auto; }
.sb-groups { display: flex; flex-direction: column; gap: 8px; padding-right: 2px; margin-top: 8px; }
.sb-group h3 { margin: 0 0 5px; display: flex; align-items: center; gap: 8px; font: 700 13px var(--font-condensed); letter-spacing: .12em; text-transform: uppercase; }
.sb-group h3 i { width: 10px; height: 10px; border-radius: 50%; background: var(--cat); border: 2px solid var(--mbh-ink); }
.sb-group[data-cat="cute"] { --cat: var(--mbh-coral); --cat-soft: var(--mbh-coral-soft); }
.sb-group[data-cat="bad"] { --cat: var(--mbh-silver); --cat-soft: var(--mbh-silver-soft); }
.sb-group[data-cat="oddball"] { --cat: var(--mbh-teal); --cat-soft: var(--mbh-teal-soft); }
.sb-group[data-cat="big"] { --cat: var(--mbh-honey); --cat-soft: var(--mbh-honey-soft); }
.pads { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 7px; }
.pad { position: relative; height: 46px; border-radius: 12px; border: 3px solid var(--mbh-ink); background: var(--cat); color: var(--mbh-ink); cursor: pointer; text-align: left; padding: 6px 8px; box-shadow: 3px 3px 0 var(--mbh-ink); overflow: hidden; transition: transform .07s; }
.pad:active, .pad.hit { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--mbh-ink); }
.pad { display: flex; align-items: center; }
.pad .p-label { display: block; font: 700 14px/1.02 var(--font-condensed); text-transform: uppercase; letter-spacing: .02em; padding-right: 20px; }
.pad .p-react { display: none; }
.pad kbd { position: absolute; right: 4px; top: 4px; min-width: 16px; height: 16px; border-radius: 5px; background: rgba(26,20,24,.85); color: #fff; font: 700 10px/16px var(--font-sans); text-align: center; text-transform: uppercase; }
.pad .prog { position: absolute; left: 0; bottom: 0; height: 5px; background: var(--mbh-ink); width: 0; }
.pad.playing { background: var(--cat-soft); }
.pad.missing { opacity: .45; }
.pad.missing::after { content: "missing file"; position: absolute; right: 8px; bottom: 6px; font: 700 10px var(--font-sans); }
.pad.add { background: transparent; border-style: dashed; border-color: rgba(255,244,223,.35); color: rgba(255,244,223,.7); box-shadow: none; display: none; place-items: center; text-align: center; font: 700 15px var(--font-condensed); text-transform: uppercase; }
.editing .pad.add { display: grid; }
.editing .pad:not(.add) { outline: 2px dashed var(--mbh-cream); outline-offset: 2px; }
.sb-foot { display: flex; align-items: center; gap: 14px; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,244,223,.12); }
.out { display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--font-condensed); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,244,223,.75); }
.out select { max-width: 240px; }

/* ---------- music ---------- */
.now { background: rgba(26,10,28,.45); border-radius: 12px; padding: 12px; }
.now-label { font: 700 11px var(--font-condensed); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,244,223,.55); }
.now-title { font: 700 19px/1.2 var(--font-condensed); margin: 3px 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seek { display: flex; align-items: center; gap: 8px; font: 600 11px var(--font-sans); font-variant-numeric: tabular-nums; color: rgba(255,244,223,.7); }
.seek input { flex: 1; }
.transport { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.tbtn { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,244,223,.6); background: transparent; color: var(--mbh-cream); cursor: pointer; font-size: 15px; }
.tbtn.play { width: 50px; height: 50px; font-size: 19px; background: var(--gradient-cta); border: none; box-shadow: var(--glow-cta); }
.transport .btn { margin-left: auto; }
.music-opts { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 10px; }
.playlist { list-style: none; margin: 6px 0 0; padding: 0; border-radius: 10px; background: rgba(26,10,28,.25); min-height: 60px; }
.playlist li { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; border-bottom: 1px solid rgba(255,244,223,.07); cursor: pointer; font-size: 13px; }
.playlist li:hover { background: rgba(255,244,223,.07); }
.playlist li.cur { background: rgba(245,169,28,.22); color: var(--mbh-honey-soft); font-weight: 700; }
.playlist li.missing { opacity: .4; text-decoration: line-through; }
.playlist .n { width: 20px; color: rgba(255,244,223,.45); font-size: 11px; text-align: right; flex: none; }
.playlist .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playlist .x { border: none; background: transparent; color: rgba(255,244,223,.45); cursor: pointer; font-size: 14px; }
.playlist .x:hover { color: var(--mbh-coral-soft); }
.playlist:empty::before { content: "Add songs or a folder of music (MP3, M4A, WAV…)."; display: block; padding: 14px; color: rgba(255,244,223,.5); font-size: 12.5px; }
.pl-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

/* ---------- dialog + toast ---------- */
dialog { border: 3px solid var(--mbh-ink); border-radius: 18px; padding: 0; background: var(--mbh-plum); color: var(--mbh-cream); box-shadow: 6px 6px 0 var(--mbh-ink); width: 440px; max-height: 90vh; }
dialog::backdrop { background: rgba(26,10,28,.6); }
.dlg { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.dlg h3 { margin: 0; font: 700 22px var(--font-condensed); text-transform: uppercase; letter-spacing: .04em; color: var(--mbh-honey-soft); }
.dlg label { font-weight: 600; font-size: 13px; display: block; }
.dlg .two { display: grid; grid-template-columns: 1fr 110px; gap: 10px; }
.dlg select.field { padding: 0 8px; }
.dlg input[type=range] { width: 100%; }
.file-row { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-foot { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.spacer { flex: 1; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); opacity: 0; background: var(--mbh-ink); color: var(--mbh-cream); padding: 10px 18px; border-radius: 999px; font-weight: 600; transition: all .25s var(--ease-out); pointer-events: none; z-index: 99; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }


::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(255,244,223,.22); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ================= v2: run of show ================= */
.h3 { margin: 0; font: 700 14px/1 var(--font-condensed); letter-spacing: .1em; text-transform: uppercase; color: var(--mbh-honey-soft); }
.kicker { font: 700 12px/1 var(--font-condensed); letter-spacing: .14em; text-transform: uppercase; color: var(--mbh-honey-soft); }
.spacer { flex: 1; }
.empty { padding: 14px; border-radius: 10px; background: rgba(26,10,28,.3); color: rgba(255,244,223,.6); font-size: 13px; }
textarea.field.ta { height: auto; padding: 8px 12px; line-height: 1.4; resize: vertical; font: 13px/1.4 var(--font-sans); }

/* now chip */
.now-chip { -webkit-app-region: no-drag; display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(26,10,28,.55); box-shadow: inset 0 0 0 2px rgba(255,214,107,.35); min-width: 0; max-width: 460px; }
.now-chip .nc-dot { width: 9px; height: 9px; border-radius: 50%; background: #3EE08F; box-shadow: 0 0 8px #3EE08F; flex: none; }
.now-chip.dark .nc-dot { background: var(--mbh-coral); box-shadow: 0 0 8px var(--mbh-coral); }
.now-chip .nc-time { font: 600 12px var(--font-sans); color: rgba(255,244,223,.65); }
.now-chip b { font: 700 16px var(--font-condensed); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-chip .nc-step { font: 700 12px var(--font-condensed); letter-spacing: .08em; text-transform: uppercase; color: var(--mbh-honey-soft); white-space: nowrap; }
.now-chip .nc-step:empty { display: none; }

/* teams (compact) */
.teams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 12px 16px 4px; }
.tcard { --tc: var(--mbh-honey); background: var(--mbh-paper); color: var(--mbh-ink); border: 3px solid var(--mbh-ink); border-radius: 16px; box-shadow: var(--shadow-sticker); overflow: hidden; display: grid; grid-template-columns: auto 1fr; }
.tcard[data-color="teal"] { --tc: var(--mbh-teal); } .tcard[data-color="coral"] { --tc: var(--mbh-coral); }
.tcard[data-color="silver"] { --tc: var(--mbh-silver); } .tcard[data-color="plum"] { --tc: var(--mbh-stage-glow); }
.tcard.leader { box-shadow: var(--shadow-sticker), 0 0 0 3px var(--mbh-honey-soft), 0 0 22px 4px rgba(245,169,28,.55); }
.t-head { grid-column: 1 / -1; background: var(--tc); border-bottom: 3px solid var(--mbh-ink); display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
.t-name { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--mbh-ink); font: 700 19px var(--font-condensed); text-transform: uppercase; letter-spacing: .03em; padding: 2px 4px; border-radius: 6px; }
.t-name:focus { background: rgba(255,255,255,.55); }
.swatches { display: flex; gap: 4px; }
.swatches button { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--mbh-ink); cursor: pointer; padding: 0; }
.swatches button.on { outline: 2px solid var(--mbh-ink); outline-offset: 2px; }
.t-score { display: flex; align-items: center; justify-content: center; min-width: 108px; padding: 4px 8px; cursor: text; }
.t-score span, .t-score input { font: 700 58px/1 var(--font-condensed); font-variant-numeric: tabular-nums; color: var(--mbh-ink); }
.t-score input { width: 108px; text-align: center; border: 2px dashed var(--mbh-ink); border-radius: 10px; background: #fff; outline: none; }
.t-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 10px 8px 4px; align-content: center; }
.pbtn { height: 30px; border-radius: 10px; border: 3px solid var(--mbh-ink); cursor: pointer; font: 700 16px/1 var(--font-condensed); color: var(--mbh-ink); background: var(--tc); box-shadow: 2px 2px 0 var(--mbh-ink); transition: transform .08s; }
.pbtn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--mbh-ink); }
.pbtn.minus { background: #fff; }
.t-custom { display: flex; gap: 4px; }
.t-custom input { flex: 1; min-width: 0; height: 30px; border: 2px solid var(--mbh-ink); border-radius: 9px; padding: 0 6px; font: 600 13px var(--font-sans); color: var(--mbh-ink); background: #fff; }
.t-custom button { height: 30px; border-radius: 9px; border: 2px solid var(--mbh-ink); background: var(--mbh-paper-2); font: 700 12px var(--font-condensed); text-transform: uppercase; cursor: pointer; color: var(--mbh-ink); padding: 0 7px; }

/* main 3-column layout */
.ros { display: grid; grid-template-columns: 236px minmax(0, 1fr) 400px; gap: 14px; padding: 10px 16px 14px; min-height: 0; }
.panel { background: rgba(26,10,28,.38); border: 1px solid rgba(255,244,223,.12); border-radius: 16px; padding: 12px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }

/* segment list */
.seglist { display: flex; flex-direction: column; min-height: 0; padding: 12px 8px 10px; }
.seglist .panel-head { padding: 0 6px; }
.segs { list-style: none; margin: 4px 0 0; padding: 0; flex: 1; overflow: auto; }
.seg-item { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 10px; cursor: pointer; font-size: 13px; line-height: 1.2; border-left: 3px solid transparent; }
.seg-item:hover { background: rgba(255,244,223,.07); }
.seg-item .si-time { font: 600 11px var(--font-sans); color: rgba(255,244,223,.55); font-variant-numeric: tabular-nums; }
.seg-item .si-title { font-weight: 600; }
.seg-item .si-dur { font: 600 11px var(--font-sans); color: rgba(255,244,223,.45); }
.seg-item.k-round, .seg-item.k-finals { border-left-color: var(--mbh-coral); }
.seg-item.k-round .si-title, .seg-item.k-finals .si-title, .seg-item.k-awards .si-title { font-family: var(--font-condensed); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }
.seg-item.k-lines { border-left-color: var(--mbh-teal); }
.seg-item.k-awards { border-left-color: var(--mbh-honey); }
.seg-item.past { opacity: .5; }
.seg-item.live { background: var(--gradient-cta); color: #fff; opacity: 1; box-shadow: 0 0 14px var(--mbh-cta-glow); }
.seg-item.live .si-time, .seg-item.live .si-dur { color: rgba(255,255,255,.85); }
.seg-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 4px 0; border-top: 1px solid rgba(255,244,223,.12); margin-top: 6px; }

/* workspace */
.workspace { overflow: auto; min-height: 0; padding: 14px 16px 18px; }
.ws-head { display: flex; align-items: flex-start; gap: 14px; }
.ws-time { font: 700 26px/1 var(--font-condensed); color: var(--mbh-honey-soft); min-width: 62px; padding-top: 4px; font-variant-numeric: tabular-nums; }
.ws-time small { display: block; margin-top: 4px; font: 600 11px var(--font-sans); color: rgba(255,244,223,.55); }
.ws-title { flex: 1; min-width: 0; }
.ws-title h1 { margin: 0; font: 700 32px/1.05 var(--font-condensed); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.ws-cue { margin-top: 5px; font: italic 600 15px/1.35 var(--font-serif); color: var(--mbh-cream); }
.ws-actions { display: flex; align-items: center; gap: 8px; }
.mini-seg { display: flex; background: rgba(26,10,28,.55); border-radius: 999px; padding: 3px; box-shadow: inset 0 0 0 2px rgba(255,244,223,.16); }
.mini-seg button { border: none; background: transparent; color: var(--mbh-cream); height: 26px; padding: 0 11px; border-radius: 999px; cursor: pointer; font: 700 12px var(--font-condensed); letter-spacing: .06em; text-transform: uppercase; }
.mini-seg button.on { background: var(--mbh-honey); color: var(--mbh-ink); }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 76px; }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: rgba(255,244,223,.12); font: 700 12px var(--font-condensed); letter-spacing: .06em; text-transform: uppercase; }
.chip.c-silver { background: var(--mbh-silver); color: var(--mbh-ink); }
.chip.c-gold { background: var(--mbh-honey); color: var(--mbh-ink); }
.cues { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 76px; }
.cue-wrap { display: inline-flex; }
.cue-btn { height: 32px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--mbh-ink); cursor: pointer; font: 700 13px var(--font-condensed); letter-spacing: .05em; text-transform: uppercase; background: var(--mbh-teal); color: var(--mbh-ink); box-shadow: 3px 3px 0 var(--mbh-ink); }
.cue-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--mbh-ink); }
.cue-btn.sfx { background: var(--mbh-honey); }
.cue-btn.unset { background: transparent; color: var(--mbh-teal-soft); border: 2px dashed var(--mbh-teal-soft); box-shadow: none; }
.cue-btn.missing { opacity: .5; text-decoration: line-through; }
.cue-wrap .cue-btn { border-radius: 999px 0 0 999px; }
.cue-edit { height: 32px; width: 30px; border: 2px solid var(--mbh-ink); border-left: none; border-radius: 0 999px 999px 0; background: var(--mbh-teal-soft); color: var(--mbh-ink); cursor: pointer; box-shadow: 3px 3px 0 var(--mbh-ink); }
.ws-body { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.notes { margin: 0; padding: 12px 14px 12px 30px; background: rgba(26,10,28,.32); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; }
.notes li::marker { color: var(--mbh-honey); }
.script { background: var(--mbh-paper); color: var(--mbh-ink); border: 3px solid var(--mbh-ink); border-radius: 14px; box-shadow: var(--shadow-sticker); padding: 6px 20px; font: 17px/1.55 var(--font-sans); }
.script p { margin: 12px 0; }
.opener { padding: 10px 14px; border-radius: 12px; background: rgba(245,169,28,.15); border-left: 4px solid var(--mbh-honey); font: italic 600 14px/1.45 var(--font-serif); }
.ref-steps { background: rgba(26,10,28,.32); border-radius: 12px; padding: 10px 12px; }
.ref-steps summary { cursor: pointer; font: 700 13px var(--font-condensed); letter-spacing: .1em; text-transform: uppercase; color: var(--mbh-honey-soft); }
.ref-steps .notes { background: transparent; padding-top: 8px; }

/* question cards */
.qlist { display: flex; flex-direction: column; gap: 10px; }
.qcard { display: grid; grid-template-columns: 44px minmax(0, 1fr) 238px; gap: 12px; background: rgba(26,10,28,.42); border: 2px solid rgba(255,244,223,.14); border-radius: 14px; padding: 10px 12px; }
.qcard.cur { border-color: var(--mbh-honey); box-shadow: 0 0 0 2px rgba(245,169,28,.35), 0 0 22px rgba(245,169,28,.25); background: rgba(245,169,28,.09); }
.qcard.notv .q-text { opacity: .8; }
.q-num { font: 700 28px/1 var(--font-condensed); color: var(--mbh-honey-soft); padding-top: 2px; }
.q-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.qtype { display: inline-flex; height: 20px; align-items: center; padding: 0 8px; border-radius: 6px; font: 700 11px var(--font-condensed); letter-spacing: .08em; text-transform: uppercase; background: var(--mbh-silver); color: var(--mbh-ink); }
.qtype.t-mc { background: var(--mbh-teal); } .qtype.t-tf { background: var(--mbh-coral-soft); } .qtype.t-fill { background: var(--mbh-honey-soft); }
.qtype.t-audience { background: var(--mbh-stage-glow); color: #fff; } .qtype.t-open { background: var(--mbh-coral); } .qtype.t-number { background: var(--mbh-teal-soft); } .qtype.t-meor { background: var(--mbh-honey); }
.tag { display: inline-flex; height: 20px; align-items: center; padding: 0 8px; border-radius: 6px; font: 700 11px var(--font-sans); background: rgba(255,244,223,.14); }
.tag.note { background: rgba(255,155,138,.25); cursor: help; }
.tag.bank { background: rgba(20,163,154,.35); }
.q-text { font-size: 14.5px; line-height: 1.4; padding: 5px 8px; border-radius: 8px; color: rgba(255,244,223,.82); }
.q-text small { display: block; font: 700 10.5px var(--font-condensed); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,244,223,.5); margin-bottom: 1px; }
.q-text.active { background: rgba(255,244,223,.1); color: #fff; font-weight: 600; }
.q-text.active small { color: var(--mbh-honey-soft); }
.q-screen { margin-top: 4px; padding: 5px 8px; font: italic 14px/1.35 var(--font-serif); color: var(--mbh-cream); }
.q-screen small { display: block; font: normal 700 10.5px var(--font-condensed); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,244,223,.5); }
.q-opts { list-style: none; margin: 6px 0 0; padding: 0 0 0 8px; display: grid; gap: 3px; font-size: 13px; }
.q-opts b { display: inline-block; width: 20px; color: var(--mbh-honey-soft); font-family: var(--font-condensed); }
.q-opts i { color: rgba(255,244,223,.6); }
.q-live { margin-top: 8px; }
.aud-note { margin-top: 8px; padding: 7px 10px; border-radius: 8px; background: rgba(179,90,147,.25); font-size: 13px; line-height: 1.4; }
.q-side { display: flex; flex-direction: column; gap: 8px; }
.q-show { display: flex; gap: 6px; }
.q-show .btn { flex: 1; padding: 0 6px; }
.match { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.mt, .mchk { --tc: var(--mbh-honey); height: 42px; border-radius: 10px; border: 2px solid rgba(255,244,223,.35); background: rgba(26,10,28,.4); color: var(--mbh-cream); cursor: pointer; font: 600 10.5px/1.1 var(--font-sans); overflow: hidden; padding: 2px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; white-space: nowrap; text-overflow: ellipsis; }
.mt span { font: 700 16px/1 var(--font-condensed); }
.mt[data-color="teal"], .mchk[data-color="teal"], [data-color="teal"] { --tc: var(--mbh-teal); }
.mt[data-color="coral"], .mchk[data-color="coral"], [data-color="coral"] { --tc: var(--mbh-coral); }
.mt[data-color="silver"], .mchk[data-color="silver"], [data-color="silver"] { --tc: var(--mbh-silver); }
.mt[data-color="plum"], .mchk[data-color="plum"], [data-color="plum"] { --tc: var(--mbh-stage-glow); }
[data-color="honey"] { --tc: var(--mbh-honey); }
.mt.on, .mchk.on { background: var(--tc); color: var(--mbh-ink); border-color: var(--mbh-ink); box-shadow: 2px 2px 0 var(--mbh-ink); font-weight: 700; }
.q-tools { display: flex; gap: 4px; }
.q-tools button { flex: 1; height: 26px; border-radius: 8px; border: 1px solid rgba(255,244,223,.25); background: transparent; color: rgba(255,244,223,.8); cursor: pointer; font: 600 12px var(--font-sans); }
.q-tools button:first-child { flex: 2.2; }
.q-tools button:hover:not(:disabled) { background: rgba(255,244,223,.1); }
.q-tools button:disabled { opacity: .3; cursor: default; }
.add-q { align-self: flex-start; }

/* mission / totals / tiebreak / awards / lines */
.mcard, .tbcard, .totals, .awards-box, .lines-box { background: rgba(26,10,28,.42); border: 2px solid rgba(255,244,223,.14); border-radius: 14px; padding: 12px 14px; }
.mcard.cur, .tbcard.cur, .totals.cur { border-color: var(--mbh-honey); box-shadow: 0 0 0 2px rgba(245,169,28,.35); }
.tbcard.need { border-color: var(--mbh-coral); }
.m-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.m-pick { height: 30px; font: 700 14px var(--font-condensed); letter-spacing: .04em; text-transform: uppercase; }
.m-timer { display: inline-flex; align-items: center; gap: 6px; }
.m-timer b { font: 700 22px/1 var(--font-condensed); font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; }
.m-timer b.low { color: var(--mbh-honey-soft); }
.m-timer b.up { color: var(--mbh-coral); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.m-card-text { margin-top: 8px; font-size: 14px; line-height: 1.45; }
.m-reveal { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(245,169,28,.12); font-size: 13px; line-height: 1.45; }
.m-reveal b { font: 700 11px var(--font-condensed); letter-spacing: .12em; text-transform: uppercase; color: var(--mbh-honey-soft); margin-right: 4px; }
.m-aud { display: grid; gap: 6px; margin-top: 10px; }
.m-row, .tb-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; border-radius: 10px; border-left: 6px solid var(--tc); background: rgba(255,244,223,.05); }
.m-name { flex: 1; min-width: 0; font: 700 15px var(--font-condensed); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mstep { min-width: 44px; height: 32px; border-radius: 9px; border: 2px solid rgba(255,244,223,.35); background: transparent; color: var(--mbh-cream); cursor: pointer; font: 700 16px var(--font-condensed); }
.mstep.on { background: var(--mbh-honey); color: var(--mbh-ink); border-color: var(--mbh-ink); box-shadow: 2px 2px 0 var(--mbh-ink); }
.m-table { width: 100%; border-collapse: separate; border-spacing: 4px; margin-top: 8px; font-size: 13px; }
.m-table th { font: 700 12px var(--font-condensed); text-transform: uppercase; letter-spacing: .05em; padding: 4px; border-bottom: 3px solid var(--tc); }
.m-table th span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; margin: 0 auto; }
.m-table td:first-child { width: 42%; }
.m-table td { text-align: center; }
.m-table td:first-child { text-align: left; }
.m-table .mchk { width: 100%; height: 30px; font: 700 14px var(--font-condensed); }
.m-table .tot td { font: 700 16px var(--font-condensed); padding-top: 4px; }
.totals { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tot-list { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.tot-list span { padding: 3px 10px; border-radius: 8px; border-left: 5px solid var(--tc); background: rgba(255,244,223,.06); font: 600 15px var(--font-condensed); }
.tot-list b { text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.tb-alert { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(255,91,79,.22); border: 1px solid var(--mbh-coral); font-weight: 700; }
.tb-ok { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(20,163,154,.25); border: 1px solid var(--mbh-teal); font-weight: 700; }
.tb-rows { display: grid; gap: 6px; margin-top: 8px; }
.tb-row b { font: 700 22px var(--font-condensed); min-width: 26px; text-align: center; }
.tb-row:not(.tied) { opacity: .5; }
.dark-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: rgba(20,163,154,.18); border: 1px solid rgba(138,220,211,.5); font-weight: 700; }
.dark-bar.on { background: #120612; border-color: var(--mbh-coral); }
.aw-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-top: 8px; border-radius: 12px; background: rgba(255,244,223,.05); }
.aw-step.next { background: rgba(245,169,28,.15); box-shadow: inset 0 0 0 2px var(--mbh-honey); }
.aw-step.done { opacity: .6; }
.aw-place { font: 700 18px var(--font-condensed); text-transform: uppercase; letter-spacing: .05em; min-width: 120px; color: var(--mbh-honey-soft); }
.aw-names { flex: 1; display: flex; gap: 10px; flex-wrap: wrap; }
.aw-names span { padding: 3px 10px; border-radius: 8px; border-left: 5px solid var(--tc); background: rgba(255,244,223,.06); font: 600 15px var(--font-condensed); text-transform: uppercase; }
.prize-line { padding: 0 4px; }
.ln-sub { margin-top: 8px; font: italic 14px/1.4 var(--font-serif); color: var(--mbh-cream); }
.lns { margin: 10px 0 8px; padding-left: 26px; display: flex; flex-direction: column; gap: 6px; }
.lns li { padding: 8px 10px; border-radius: 10px; font-size: 16px; line-height: 1.4; background: rgba(255,244,223,.05); }
.lns li[data-line] { cursor: pointer; }
.lns li[data-line]:hover { background: rgba(255,244,223,.1); }
.lns li.cur { background: var(--mbh-paper); color: var(--mbh-ink); font-weight: 700; box-shadow: var(--shadow-sticker); }
.couples { display: grid; gap: 10px; }
.couple { border-radius: 14px; padding: 12px 14px; background: rgba(26,10,28,.42); border-left: 8px solid var(--tc); }
.cp-label { font: 700 17px var(--font-condensed); letter-spacing: .05em; text-transform: uppercase; color: var(--mbh-honey-soft); }
.cp-fields { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; margin: 6px 0 8px; }
.cp-fields label { font: 700 11px var(--font-condensed); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,244,223,.6); }
.cp-fields .field { margin-top: 3px; }
.cp-call { font-size: 13.5px; line-height: 1.45; color: rgba(255,244,223,.85); }
.cp-intro { margin-top: 5px; font-size: 13.5px; line-height: 1.45; }

/* right column */
.side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.preview-panel { padding-bottom: 10px; flex: none; }
.preview-box { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: 2px solid rgba(255,244,223,.25); background: #2A0F2D; }
.preview-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.tvmodes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 8px; }
.tvmodes button { white-space: nowrap; height: 28px; border: none; border-radius: 8px; background: rgba(255,244,223,.1); color: var(--mbh-cream); cursor: pointer; font: 700 12.5px var(--font-condensed); letter-spacing: .05em; text-transform: uppercase; }
.tvmodes button:hover { background: rgba(255,214,107,.22); }
.tvmodes button.on { background: var(--gradient-cta); color: #fff; box-shadow: 0 0 10px var(--mbh-cta-glow); }
.dark-row { margin: 8px 0 0 !important; font-size: 12.5px; }
.tabs-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 12px 10px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(255,244,223,.14); margin: 0 -12px 8px; padding: 0 12px; }
.tabs button { border: none; background: transparent; color: rgba(255,244,223,.65); height: 32px; padding: 0 12px; cursor: pointer; font: 700 14px var(--font-condensed); letter-spacing: .06em; text-transform: uppercase; border-bottom: 3px solid transparent; }
.tabs button.on { color: var(--mbh-honey-soft); border-bottom-color: var(--mbh-honey); }
.tab-body { flex: 1; min-height: 0; overflow: auto; padding-right: 2px; }
.tab-body[hidden] { display: none; }
.sb-tools { display: flex; align-items: center; gap: 6px; }
.sb-foot { margin-top: 10px; padding-top: 8px; }
.pl-head { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.opt-block { padding: 6px 2px 12px; border-bottom: 1px solid rgba(255,244,223,.1); margin-bottom: 8px; }
.opt-block .switch.row { margin: 7px 0; }

/* dialogs */
dialog { overflow: auto; }
.dlg-wide { width: 660px; }
dialog:has(.dlg-wide) { width: 680px; }
.dlg .three { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; }
.dlg .two-even { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dlg .tvchk { align-self: end; margin-bottom: 8px; }
.dlg .two { grid-template-columns: 1fr 160px; }
.opt-row { display: grid; grid-template-columns: 50px 1fr 1.4fr 28px; gap: 6px; }
.opt-row .field { margin-top: 6px; }
.opt-row .x, .md-row .x { border: none; background: transparent; color: rgba(255,244,223,.55); cursor: pointer; font-size: 14px; margin-top: 6px; }
.md-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.md-row .field { margin-top: 0; }
.md-kind { width: 18px; text-align: center; }
.md-label { flex: 1; }
.md-file { flex: 1; font-size: 12px; color: rgba(255,244,223,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-sfx { width: 170px; }
.swap-filter { display: flex; gap: 12px; align-items: center; }
.swap-filter .field { margin-top: 0; flex: 1; }
.swap-list { max-height: 52vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.sw-item { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; background: rgba(26,10,28,.45); font-size: 13.5px; line-height: 1.4; }
.sw-main { flex: 1; min-width: 0; }
.sw-meta { display: flex; gap: 6px; margin-bottom: 3px; }
.sw-btns { display: flex; gap: 6px; }
.ref { max-height: 56vh; overflow: auto; padding-right: 4px; }
.ref h4 { margin: 14px 0 6px; font: 700 15px var(--font-condensed); letter-spacing: .08em; text-transform: uppercase; color: var(--mbh-honey-soft); }
.ref .notes { font-size: 13px; }
.ref-sum { font: italic 14px/1.5 var(--font-serif); margin: 6px 0 0; }

@media (max-width: 1400px) {
  .ros { grid-template-columns: 212px minmax(0, 1fr) 360px; }
  .qcard { grid-template-columns: 38px minmax(0, 1fr) 210px; }
  .now-chip { max-width: 300px; }
}
.mt em { font-style: normal; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-row .switch { flex: none; }

/* bed music */
.bed-ctl { -webkit-app-region: no-drag; display: inline-flex; align-items: stretch; height: 34px; border-radius: 999px; box-shadow: 0 0 0 2px rgba(138,220,211,.6); overflow: hidden; flex: none; }
.bed-btn { display: inline-flex; align-items: center; gap: 8px; border: none; background: rgba(26,10,28,.55); color: var(--mbh-teal-soft); padding: 0 12px 0 14px; cursor: pointer; font: 700 14px var(--font-condensed); letter-spacing: .08em; text-transform: uppercase; }
.bed-btn i { width: 9px; height: 9px; border-radius: 50%; background: var(--mbh-gray-500); }
.bed-ctl.on { box-shadow: 0 0 0 2px var(--mbh-teal-soft), 0 0 14px rgba(20,163,154,.7); }
.bed-ctl.on .bed-btn { background: var(--mbh-teal); color: var(--mbh-ink); }
.bed-ctl.on .bed-btn i { background: var(--mbh-ink); animation: blink 1.2s steps(2) infinite; }
.bed-ctl.unset .bed-btn { color: rgba(255,244,223,.55); }
.bed-pick { border: none; border-left: 1px solid rgba(138,220,211,.4); background: rgba(26,10,28,.55); color: var(--mbh-cream); width: 30px; cursor: pointer; }
.bed-box { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(20,163,154,.12); border: 1px solid rgba(138,220,211,.3); }
.bed-name { font: 700 15px var(--font-condensed); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bed-name.missing { opacity: .5; text-decoration: line-through; }

/* ---------- 2.1: infographic cards, image questions, prompts ---------- */
.deck-box { background: rgba(26,10,28,.42); border: 2px solid rgba(255,244,223,.14); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.deck-box.cur { border-color: var(--mbh-honey); box-shadow: 0 0 0 2px rgba(245,169,28,.35); }
.deck-row { display: grid; grid-template-columns: minmax(0, 420px) minmax(200px, 1fr); gap: 14px; margin-top: 10px; align-items: start; }
.deck-now { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 2px solid rgba(255,244,223,.25); background: #2A0F2D; display: block; }
.deck-ctl { display: flex; flex-direction: column; gap: 10px; }
.deck-count { font: 700 15px var(--font-condensed); letter-spacing: .05em; text-transform: uppercase; }
.deck-count b { font-size: 22px; color: var(--mbh-honey-soft); }
.deck-prog { height: 6px; border-radius: 3px; background: rgba(255,244,223,.14); overflow: hidden; }
.deck-prog i { display: block; height: 100%; width: 0; background: var(--mbh-honey); transition: width .25s linear; }
.deck-every { font-size: 12px; color: rgba(255,244,223,.7); }
.deck-every .field { width: 90px; margin-top: 4px; display: block; }
.deck-strip { display: flex; gap: 6px; overflow-x: auto; margin-top: 12px; padding-bottom: 6px; }
.deck-strip img { flex: 0 0 auto; width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; border: 2px solid transparent; opacity: .55; cursor: pointer; }
.deck-strip img:hover { opacity: .9; }
.deck-strip img.on { opacity: 1; border-color: var(--mbh-honey); }
.q-img { margin-top: 6px; display: flex; align-items: center; gap: 10px; font: italic 13px var(--font-serif); color: rgba(255,244,223,.7); }
.q-img img { width: 150px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; border: 2px solid rgba(255,244,223,.25); }
.nopts { align-self: center; font: 700 12px var(--font-condensed); letter-spacing: .1em; text-transform: uppercase; }
.m-prompts { margin: 8px 0 0; padding-left: 22px; font-size: 14px; line-height: 1.5; }
.m-table tr.bonus td:first-child { color: var(--mbh-honey-soft); font-style: italic; }

/* co-host checklist (v5) */
.cohost { margin: 0 0 12px; padding: 8px 14px 6px; border-radius: 12px; background: rgba(120,160,220,.14); border-left: 4px solid #8fb3e8; }
.cohost summary { cursor: pointer; font: 700 12px/1.2 var(--font-display, inherit); letter-spacing: .12em; text-transform: uppercase; color: #b9d0f2; margin-bottom: 4px; }
.cohost ul { margin: 4px 0 2px; }



/* round: which steps ↓ / ↑ (Q / E) walk through */
.step-togs { display: inline-flex; align-items: center; gap: 10px; margin-left: 6px; font-size: 12px; }
.step-togs em { font-style: normal; opacity: .7; text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; }
.step-tog { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.step-tog input { accent-color: var(--mbh-honey, #F5A91C); width: 15px; height: 15px; margin: 0; }

/* ================= 3.0: browser app, Edit / Perform ================= */
.out-ctl { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.out-ctl select { max-width: 220px; height: 30px; }
.out-ico { font-size: 15px; }
.tv-controls { margin-left: 0; }
.mode-toggle { flex: none; }
.off-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }

.start-gate { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 16px;
  background: radial-gradient(ellipse 70% 50% at 50% 40%, rgba(179,90,147,.55), transparent 70%), #2E1132; }
.start-gate[hidden] { display: none; }
.start-gate img { width: 110px; }
.start-gate .sg-title { font: 400 54px/1 var(--font-script); color: var(--mbh-cream); }
.start-gate .btn { height: 52px; padding: 0 30px; font-size: 20px; }

/* ---- Perform: one screen, no editing ---- */
.pf-side { display: none; }
body.perform .ros { grid-template-columns: minmax(0, 1fr) 330px; }
body.perform .seglist, body.perform .side { display: none; }
body.perform .pf-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; }
body.perform .brand-sub, body.perform #tvScreen, body.perform #tvFull, body.perform .bed-pick { display: none; }
body.perform .teams { padding: 8px 14px 2px; gap: 10px; }
body.perform .swatches, body.perform .t-btns { display: none; }
body.perform .tcard { grid-template-columns: 1fr; }
body.perform .t-score { min-width: 0; padding: 2px 8px; }
body.perform .t-score span { font-size: 44px; }
body.perform .t-name { pointer-events: none; }
/* edit-only tools stay out of the way */
body.perform .q-tools, body.perform .add-q, body.perform .step-togs, body.perform .cue-edit, body.perform .m-pick,
body.perform .deck-strip, body.perform .deck-every, body.perform [data-act="edit-seg"] { display: none !important; }
body.perform .cue-wrap .cue-btn { border-radius: 999px; }
body.perform .cues { margin-left: 76px; }
body.perform .qcard { grid-template-columns: 44px minmax(0, 1fr) 250px; }
body.perform .q-text { font-size: 19px; line-height: 1.35; }
body.perform .q-text:not(.active) { opacity: .55; font-size: 15px; }
body.perform .match .mt { height: 54px; position: relative; }
body.perform .match .mt::after { position: absolute; top: 3px; right: 5px; font: 700 10px var(--font-sans); opacity: .7; }
body.perform .match .mt:nth-child(1)::after { content: "A"; }
body.perform .match .mt:nth-child(2)::after { content: "S"; }
body.perform .match .mt:nth-child(3)::after { content: "D"; }
.pf-head { display: flex; align-items: flex-start; gap: 14px; }
.pf-next { margin-left: auto; flex: none; max-width: 300px; padding: 6px 12px; border-radius: 12px; background: rgba(26,10,28,.55);
  font: 700 14px/1.3 var(--font-condensed); letter-spacing: .04em; text-transform: uppercase; color: var(--mbh-honey-soft); }
.pf-next kbd, .pk kbd, .pf-text kbd { display: inline-block; min-width: 20px; padding: 0 5px; margin-right: 4px; border-radius: 5px; background: var(--mbh-cream); color: var(--mbh-ink); font: 700 12px/20px var(--font-sans); text-align: center; }
.pf-text { margin-top: 14px; }
.pf-text .notes li, .pf-text .script p { font-size: 16px; line-height: 1.45; }
.pf-timer { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 12px; border-radius: 12px; background: rgba(26,10,28,.45); border: 2px solid rgba(255,244,223,.14); }
.pf-timer b { font: 700 30px/1 var(--font-condensed); font-variant-numeric: tabular-nums; }
.pf-timer b.low { color: var(--mbh-honey-soft); } .pf-timer b.up { color: var(--mbh-coral); }
.pf-timer .kicker { margin-right: auto; }

/* the 3×3 pad mirrors the keyboard */
.pad9 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pk { position: relative; height: 64px; border-radius: 14px; border: 3px solid var(--mbh-ink); background: var(--mbh-paper-2); color: var(--mbh-ink); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px; box-shadow: 3px 3px 0 var(--mbh-ink);
  font: 700 14px/1.05 var(--font-condensed); letter-spacing: .03em; text-transform: uppercase; text-align: center; transition: transform .07s; }
.pk span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk kbd { position: absolute; top: 4px; left: 5px; margin: 0; background: var(--mbh-ink); color: #fff; }
.pk.cta { background: var(--gradient-cta); color: #fff; }
.pk.team { --tc: var(--mbh-honey); background: var(--tc); }
.pk.team.off { opacity: .45; }
.pk.lit { box-shadow: 3px 3px 0 var(--mbh-ink), 0 0 0 3px var(--mbh-honey-soft), 0 0 16px rgba(245,169,28,.7); }
.pk.team.lit span::before { content: "✓ "; }
.pk:active, .pk.hit { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--mbh-ink); }
.pf-music { padding: 10px 12px; }
.pf-now { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pf-now b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px var(--font-condensed); text-transform: uppercase; letter-spacing: .03em; }
.pf-music-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pf-music-row .vol { margin-left: auto; }
.pf-music-row .vol input { width: 80px; }
.pf-sfx { padding: 10px 12px; }
.pf-sfx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pad.mini { height: 36px; padding: 4px 6px; border-width: 2px; box-shadow: 2px 2px 0 var(--mbh-ink); }
.pad.mini .p-label { font-size: 12px; padding-right: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pad.mini kbd { top: 3px; right: 3px; }
.pad.mini[data-cat="cute"] { --cat: var(--mbh-coral); --cat-soft: var(--mbh-coral-soft); }
.pad.mini[data-cat="bad"] { --cat: var(--mbh-silver); --cat-soft: var(--mbh-silver-soft); }
.pad.mini[data-cat="oddball"] { --cat: var(--mbh-teal); --cat-soft: var(--mbh-teal-soft); }
.pad.mini[data-cat="big"] { --cat: var(--mbh-honey); --cat-soft: var(--mbh-honey-soft); }
.pf-segnav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* small Chromebook screens (1366×768 and below) */
@media (max-width: 1400px) {
  .brand-name { font-size: 18px; }
  .brand-sub { display: none; }
  .out-ctl select { max-width: 160px; }
  .tv-controls select { max-width: 150px; }
  .ros { grid-template-columns: 210px minmax(0, 1fr) 360px; gap: 10px; padding: 8px 12px 10px; }
  body.perform .ros { grid-template-columns: minmax(0, 1fr) 300px; }
  body.perform .qcard { grid-template-columns: 38px minmax(0, 1fr) 220px; }
}
.teams { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tcard { min-width: 0; }
.t-btns { min-width: 0; }
body.perform .tcard { display: flex; align-items: stretch; }
body.perform .t-head { flex: 1; min-width: 0; border-bottom: none; border-right: 3px solid var(--mbh-ink); }
body.perform .t-score { flex: none; min-width: 96px; }
body.perform .t-score span { font-size: 40px; }
.pad.mini.missing::after { content: none; }
.pk.team.off { background: var(--mbh-paper-2); opacity: .55; box-shadow: none; }
body { grid-template-columns: minmax(0, 1fr); }
.topbar { min-width: 0; }
.topbar > * { flex-shrink: 0; }
.topbar .now-chip { flex: 0 1 auto; min-width: 120px; }
.pad9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1400px) {
  .brand > div { display: none; }
  .topbar { gap: 8px; }
  #tvFull { padding: 0 10px; }
  .now-chip { max-width: 260px; }
}
.pk small { font: 600 10.5px/1 var(--font-sans); text-transform: none; letter-spacing: 0; opacity: .8; }
.pk small:empty { display: none; }
.pk.team.lit span::before { content: none; }
.pk { padding: 18px 5px 4px; font-size: 13px; }

/* ================= 3.1 ================= */
/* Perform: run of show on the left, no explanatory text */
body.perform .ros { grid-template-columns: 210px minmax(0, 1fr) 300px; }
body.perform .seglist { display: flex; }
body.perform #showMenuBtn { display: none; }
body.perform .seg-item { padding: 6px 8px; grid-template-columns: 36px 1fr; }
body.perform .seg-item .si-dur { display: none; }
body.perform .m-card-text, body.perform .m-reveal, body.perform .m-prompts, body.perform .cp-call, body.perform .cp-intro,
body.perform .ln-sub, body.perform .lines-box > .muted, body.perform .aud-note, body.perform .prize-line, body.perform .q-tag-note,
body.perform .qcard .tag.note, body.perform .ws-cue, body.perform .tbcard .m-card-text { display: none !important; }
.pf-empty { margin-top: 18px; padding: 16px; border-radius: 12px; background: rgba(26,10,28,.35); color: rgba(255,244,223,.7); }
.pf-empty kbd { display: inline-block; min-width: 20px; padding: 0 5px; margin: 0 2px; border-radius: 5px; background: var(--mbh-cream); color: var(--mbh-ink); font: 700 12px/20px var(--font-sans); text-align: center; }
@media (max-width: 1400px) { body.perform .ros { grid-template-columns: 190px minmax(0, 1fr) 280px; } }

/* multiple choice: which answers are on the TV */
.q-opts.mc li.hidden { opacity: .45; }
.q-opts.mc li.shown { opacity: 1; }
.q-opts.mc li.shown b { background: var(--mbh-honey); color: var(--mbh-ink); }
.mc-hint { margin-top: 6px; font: 700 12px var(--font-condensed); letter-spacing: .06em; text-transform: uppercase; color: var(--mbh-honey-soft); }
.mc-hint kbd { display: inline-block; min-width: 18px; padding: 0 4px; margin-right: 3px; border-radius: 4px; background: var(--mbh-cream); color: var(--mbh-ink); font: 700 11px/18px var(--font-sans); text-align: center; }

/* Bell + Buzzer */
.pf-sfx-grid { grid-template-columns: 1fr 1fr; }
.pad.mini { height: 52px; }
.pad.mini .p-label { font-size: 17px; }