/* Would You Bail Me Out? — one stage, many scenes (docs/bail-me-out/DIRECTORS-SCRIPT.md). Pictures: public/bailmeout/img
   (tools/bailmeout/prepare_art.php); each character <img> carries its own width, CSS only places and animates it. */
:root {
  --sky: #DDF1FF; --sky2: #CFE7FB; --navy: #1F2B4D; --navy2: #2C3B66; --bars: #4A5A86; --orange: #FF7A2F;
  --orange-d: #C4521A; --gold: #FFE08A; --pink: #FF4F8B; --ink: #23222B; --paper: #FFF6E5; --line: #C7DCEC;
  --green: #1E9E5A; --green-bg: #E7F8EE; --muted: #4A5680;
  --night: #121933; --night2: #1A2344; --cream: #FFF3D6; --soft: #C9D4EE; --hand: 'Shantell Sans', 'Nunito', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0B1026; }
body { font-family: 'Nunito', system-ui, sans-serif; color: #fff; -webkit-tap-highlight-color: transparent; }
/* Korean wraps between words (at spaces), never inside one; a word too long for its box may still break */
:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; }
:lang(ja) body { word-break: auto-phrase; }   /* Japanese lines break between phrases (never チェッ / ク); ignored where unsupported */
button { font: inherit; color: inherit; }
/* the night sky every scene sits on: deep navy, a soft moon glow top right, twinkling stars */
.bmo-stage { position: relative; max-width: 460px; min-height: 100%; margin: 0 auto; overflow: hidden; color: #fff;
  background: radial-gradient(circle at 86% 4%, rgba(255,236,170,.22) 0, rgba(255,236,170,0) 26%),
    radial-gradient(ellipse at 50% -10%, #2C3B66 0%, var(--night2) 45%, var(--night) 100%); }
.bmo-stage::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .75;
  background-image: radial-gradient(1.6px 1.6px at 12% 8%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 31% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 74% 12%, #FFE7A8 50%, transparent 51%), radial-gradient(1.2px 1.2px at 58% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 90% 36%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 7% 44%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 40% 52%, #FFE7A8 50%, transparent 51%), radial-gradient(1.2px 1.2px at 82% 64%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 18% 76%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 64% 86%, #fff 50%, transparent 51%);
  background-size: 100% 900px; animation: bmo-twinkle 4s ease-in-out infinite alternate; }
@keyframes bmo-twinkle { to { opacity: .35; } }
.bmo-noscript { padding: 24px; }

/* ── scenes ─────────────────────────────────────────────────────────────────────────────────────────────── */
.bmo-scene { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; gap: 16px;
  padding: 24px 20px calc(28px + env(safe-area-inset-bottom)); animation: bmo-enter .45s cubic-bezier(.2,.9,.3,1.2) both; }
.bmo-scene.is-night { color: #fff; }
.bmo-scene.is-leaving { animation: bmo-leave .25s ease-in both; }
@keyframes bmo-enter { from { opacity: 0; transform: translateX(40px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bmo-leave { to { opacity: 0; transform: translateX(-40px); } }

.bmo-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bmo-brand { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 20px; text-decoration: none; color: inherit; }
.bmo-brand span { color: var(--pink); }
.bmo-tag { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 2px; color: var(--gold); }
.bmo-h1 { margin: 0; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 40px; line-height: 1.02; text-wrap: balance; }
.bmo-h2 { margin: 0; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 28px; line-height: 1.08; text-wrap: balance; }
.bmo-sub { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.38; color: var(--soft); text-wrap: pretty; }
.bmo-small { font-size: 14px; font-weight: 700; color: #A9B6D8; }
/* names are always marked: gold, with a hand-drawn underline (DBM marks every name) */
.bmo-name { color: var(--gold); white-space: nowrap; padding-bottom: .12em; display: inline-block; line-height: 1.05;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M3 6 C30 2 60 9 117 4' fill='none' stroke='%23FF6FA5' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .32em no-repeat; }
.bmo-paper .bmo-name, .bmo-pick .bmo-name { color: #E0457B; }
.bmo-key { color: var(--pink); }
.bmo-hand { font-family: var(--hand); }
.bmo-hl { color: #fff; background: var(--orange); padding: 0 10px; border-radius: 12px; }
.bmo-center { text-align: center; align-items: center; }
.bmo-grow { flex: 1 1 auto; }

/* ── buttons, inputs ────────────────────────────────────────────────────────────────────────────────────── */
/* tactile 3D buttons (DBM's build: light rim, glossy gradient, deep shadow, lifts on hover, sinks on press) */
.bmo-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 62px; width: 100%;
  border: 3px solid rgba(255,255,255,.55); border-radius: 26px; color: #fff; font-family: 'Baloo 2', sans-serif;
  font-weight: 800; font-size: 23px; cursor: pointer; text-decoration: none; text-shadow: 0 2px 0 rgba(120,40,0,.35);
  background: linear-gradient(180deg, #FFB067 0%, #FF8A3D 38%, #FF7A2F 62%, #EE5F1C 100%);
  box-shadow: 0 6px 0 #B9481A, 0 14px 26px rgba(0,0,0,.38), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(160,50,0,.18);
  transition: transform .12s, box-shadow .12s, filter .12s; }
@media (hover: hover) { .bmo-btn:hover { transform: translateY(-1px); filter: brightness(1.05); } }
.bmo-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #B9481A, 0 6px 12px rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.5); filter: brightness(.98); }
.bmo-btn[disabled] { opacity: .45; pointer-events: none; }
.bmo-btn.is-dark { background: linear-gradient(180deg, #3A4C82 0%, #2C3B66 55%, #1F2B4D 100%); border-color: rgba(255,255,255,.25);
  box-shadow: 0 6px 0 #0B1026, 0 14px 26px rgba(0,0,0,.38), inset 0 2px 0 rgba(255,255,255,.18); text-shadow: none; }
.bmo-btn.is-light { background: linear-gradient(180deg, #fff 0%, #F1F5FF 100%); color: var(--navy); border-color: #fff; text-shadow: none;
  box-shadow: 0 4px 0 #9FB0D6, 0 10px 20px rgba(0,0,0,.3); font-size: 18px; min-height: 52px; }
.bmo-btn.is-small { min-height: 50px; font-size: 15.5px; line-height: 1.1; padding: 0 10px; }
/* the main call to action gives a little "tada" now and then (DBM: 1 s at 1.8 s, repeating) */
.bmo-btn.is-tada { animation: bmo-tada 3.2s ease-in-out 1.8s infinite; }
@keyframes bmo-tada { 0%, 70%, 100% { transform: none; } 74% { transform: scale(.96) rotate(-2deg); } 80%, 88% { transform: scale(1.035) rotate(2deg); } 84%, 92% { transform: scale(1.035) rotate(-2deg); } }
.bmo-row { display: flex; gap: 10px; }
.bmo-row > * { flex: 1 1 0; }
.bmo-link { background: none; border: 0; color: var(--soft); font-weight: 800; font-size: 15px; text-decoration: underline; cursor: pointer; padding: 10px; }
.bmo-input { width: 100%; height: 58px; border-radius: 16px; border: 3px solid var(--navy); padding: 0 16px;
  font: 800 22px 'Nunito', sans-serif; color: var(--navy); background: #fff; }
.bmo-input:focus { outline: 3px solid var(--orange); outline-offset: 2px; }
.bmo-error { color: #FF9A8E; font-weight: 800; font-size: 14px; min-height: 18px; }

/* ── paper, cards ───────────────────────────────────────────────────────────────────────────────────────── */
.bmo-paper { position: relative; background: var(--paper); color: var(--navy); border: 4px solid var(--ink); border-radius: 22px; padding: 20px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 8px 0 rgba(0,0,0,.35), 0 18px 30px rgba(0,0,0,.25); }
.bmo-paper.is-clip { padding-top: 30px; }
.bmo-paper.is-clip::before { content: ''; position: absolute; left: 50%; top: -18px; margin-left: -48px; width: 96px; height: 30px;
  border-radius: 10px; background: #8A97B8; border: 4px solid var(--ink); }
.bmo-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bmo-pick { position: relative; background: #fff; color: var(--navy); border: 4px solid var(--line); border-radius: 20px; padding: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: 18px; line-height: 1.15; text-align: center; cursor: pointer; min-height: 64px; justify-content: center; }
.bmo-pick.is-selected { border-color: var(--orange); box-shadow: 0 5px 0 var(--orange-d); }
.bmo-pick.is-right { border-color: var(--green); background: var(--green-bg); color: #145F38; }
.bmo-pick.is-wrong { border-color: var(--orange-d); background: #FFF4EC; color: #8A3A12; }
.bmo-pick.is-dim { opacity: .55; }
.bmo-pick img:not(.bmo-art) { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: #E6EEF7; }   /* question pictures */
.bmo-crime { min-height: 92px; text-align: center; align-items: center; justify-content: center; font-size: 17px; line-height: 1.2; text-wrap: balance;
  border-radius: 18px; box-shadow: 0 3px 0 #D3E2EF; transition: transform .12s, border-color .2s, box-shadow .2s; }
.bmo-crime:active { transform: translateY(2px); box-shadow: 0 1px 0 #D3E2EF; }
/* at the police desk the options must fit under the scene (reactions stay visible): picture beside the text */
.bmo-picks.is-compact { gap: 10px; }
.bmo-picks.is-compact .bmo-pick { flex-direction: row; justify-content: flex-start; text-align: left; padding: 8px; font-size: 16px; min-height: 72px; }
.bmo-picks.is-compact .bmo-pick img:not(.bmo-art) { width: 52px; flex: none; }
.bmo-back { width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--navy); font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* ── characters and set pictures ────────────────────────────────────────────────────────────────────────── */
.bmo-art { display: block; max-width: none; height: auto; user-select: none; -webkit-user-drag: none; }
/* every character breathes (the separate `scale` property, so it runs alongside the reaction animations, which move
   `transform`); --breath is a random start per character (app.js) so they never breathe in step */
.bmo-char { transform-origin: 50% 100%; animation: bmo-breathe 3s ease-in-out var(--breath, 0s) infinite; }
@keyframes bmo-breathe { 50% { scale: 1.015 1.035; } }
.bmo-fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.bmo-char.is-bob { animation: bmo-bob 2.6s ease-in-out infinite, bmo-breathe 3s ease-in-out var(--breath, 0s) infinite; }
.bmo-char.is-hop { animation: bmo-hop .26s ease-in-out infinite alternate; }
@keyframes bmo-hop { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-7px) rotate(2deg); } }
.bmo-char.is-jump { animation: bmo-jump .6s cubic-bezier(.3,1.6,.5,1) both, bmo-breathe 3s ease-in-out var(--breath, 0s) infinite; }
.bmo-char.is-shake { animation: bmo-shake .5s ease-in-out both, bmo-breathe 3s ease-in-out var(--breath, 0s) infinite; }
.bmo-char.is-pop { animation: bmo-pop .45s cubic-bezier(.3,1.7,.5,1) both, bmo-breathe 3s ease-in-out var(--breath, 0s) infinite; }
/* the one speaking bobs and sways while their line types out (on the holder: `translate`/`rotate` stack with its own
   transform, e.g. the friend turned around to leave) */
.is-talking { animation: bmo-talk .19s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes bmo-talk { from { translate: 0 0; rotate: -1.4deg; } to { translate: 0 -3px; rotate: 1.4deg; } }
@keyframes bmo-bob { 50% { transform: translateY(-4px) scaleY(1.02); } }
@keyframes bmo-jump { 0% { transform: scale(1,1); } 30% { transform: translateY(4px) scale(1.08,.9); } 60% { transform: translateY(-26px) scale(.95,1.06); } 100% { transform: none; } }
@keyframes bmo-shake { 20%, 60% { transform: translateX(-6px) rotate(-2deg); } 40%, 80% { transform: translateX(6px) rotate(2deg); } }
@keyframes bmo-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── the set: window, cell, desk ────────────────────────────────────────────────────────────────────────── */
/* the barred window of the landing / the creator's cell: the cell picture, the one peeking, the bars picture in front */
.bmo-window { position: relative; width: 290px; height: 290px; margin: 6px auto 0; border-radius: 36px; background: var(--navy2);
  border: 6px solid var(--ink); overflow: hidden; box-shadow: 0 14px 0 #B9DDF5; }
.bmo-window .bmo-char { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: -34px; z-index: 1; }
.bmo-window .bmo-window-bars { z-index: 2; animation: bmo-bars-drop .45s ease-out both; }
/* the station's cell bars, drawn in the art's style (dark outline, blue-grey metal) so they can swing open */
.bmo-bars { position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(90deg, transparent 0 20px, var(--ink) 20px 23px, var(--bars) 23px 31px, var(--ink) 31px 34px); }
.bmo-bars::before, .bmo-bars::after { content: ''; position: absolute; left: 0; right: 0; height: 12px; background: var(--bars);
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.bmo-bars::before { top: 10px; } .bmo-bars::after { bottom: 14px; }
@keyframes bmo-bars-drop { from { transform: translateY(-100%); } }

.bmo-set { position: relative; height: clamp(220px, 38dvh, 330px); border-radius: 24px; background: #CFE3F2; border: 4px solid var(--ink); overflow: hidden;
  transition: height .4s ease; }
/* the camera: only the lens (set picture + cast) zooms; the frame, bubbles and stamps stay inside the box */
.bmo-lens { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.3,.9,.3,1); transform-origin: 50% 60%; }
.bmo-set-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; pointer-events: none; }
.bmo-lens.cam-officer { transform: scale(1.12) translateX(14px); }
.bmo-lens.cam-cell { transform: scale(1.12) translateX(-18px); }
.bmo-lens.cam-shake { animation: bmo-cam-shake .3s; }
@keyframes bmo-cam-shake { 25% { translate: -5px 2px; } 75% { translate: 5px -2px; } }
.bmo-cell { position: absolute; right: 0; top: 0; bottom: 0; width: 41%; background: var(--navy2); border-left: 4px solid var(--ink); overflow: hidden;
  z-index: 1; transition: width .6s cubic-bezier(.3,.9,.3,1); }
.bmo-cell.is-wide { width: 100%; border-left: 0; }   /* the cellmates twist: the whole set becomes the cell */
.bmo-creator { position: absolute; left: 0; right: 0; bottom: -6px; display: flex; justify-content: center; z-index: 1; }
.bmo-cell .bmo-bars.is-open, .bmo-set > .bmo-bars.is-open { transform-origin: left center; transform: perspective(300px) rotateY(60deg); transition: transform .8s ease-out; }
.bmo-set > .bmo-bars { z-index: 4; }
.bmo-officer { position: absolute; left: -18px; bottom: -4px; }   /* a cinematic crop: the desk edge of the frame */
/* the cast squash and stretch from their feet when they act */
.bmo-officer, .bmo-friend, .bmo-creator, .bmo-arrestee { transform-origin: 50% 100%; }
.bmo-friend { position: absolute; left: -170px; bottom: -6px; z-index: 2; }   /* moves by stroll(): on its own feet */
/* a character out on the station floor (out of the cell, the hug, walking off together) */
.bmo-walker { position: absolute; bottom: -6px; z-index: 3; transform-origin: 50% 100%; }
.bmo-friend.is-in { left: 104px; }
.bmo-friend.is-cell { left: calc(100% - 140px); }
.bmo-friend.is-out { left: -200px; transform: scaleX(-1); }   /* sneaks back out the way they came in */
.bmo-arrestee { position: absolute; right: 18px; bottom: -6px; z-index: 2; }   /* the creator at the desk, being booked */
/* police lights washing over the station during the arrest */
.bmo-siren { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(255,40,70,.5), transparent 45%, transparent 55%, rgba(40,110,255,.5)); animation: bmo-siren .7s steps(2) 6; opacity: 0; }
@keyframes bmo-siren { 0% { opacity: .9; } 50% { opacity: .9; transform: scaleX(-1); } 100% { opacity: 0; } }
/* the creator's cell once a friend has got them out: the bars lift away */
.bmo-window.is-free .bmo-window-bars { transform: translateY(-105%); transition: transform .9s cubic-bezier(.5,0,.3,1) .3s; animation: none; }
.bmo-pair { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; z-index: 3; }
.bmo-prop { position: absolute; z-index: 3; }
.is-gone { display: none !important; }
.bmo-cell .bmo-rain { position: absolute; inset: 0; background: repeating-linear-gradient(105deg, transparent 0 16px, rgba(160,205,255,.45) 16px 18px);
  animation: bmo-rain .5s linear infinite; }
@keyframes bmo-rain { to { background-position: 0 40px; } }

/* ── bubbles, stamps, signs ─────────────────────────────────────────────────────────────────────────────── */
/* comic speech bubbles: one ink outline, a drawn curved tail (an SVG that covers the outline where it joins), and a
   shadow that follows bubble + tail together (drop-shadow, not box-shadow) */
.bmo-bubble { position: absolute; z-index: 3; max-width: 220px; background: #fff; border: 3px solid var(--ink); border-radius: 18px;
  padding: 9px 14px 10px; font-family: var(--hand); font-weight: 800; font-size: 15.5px; line-height: 1.25; color: var(--navy); rotate: -1deg;
  text-align: center; text-wrap: balance; filter: drop-shadow(0 3px 0 rgba(12,16,38,.5)) drop-shadow(0 8px 12px rgba(0,0,0,.2)); animation: bmo-pop .35s cubic-bezier(.3,1.7,.5,1) both; }
.bmo-bubble.is-right { rotate: 1deg; }
/* the tail (34 × 26, drawn 1:1 so its line is as thick as the outline): its ends run along the outline and curve away, so bubble and
   tail read as one drawn shape; a soft round tip 7.5 px in from its left edge (app.js aim() places it over the speaker) */
.bmo-bubble::after { content: ''; position: absolute; left: 16px; bottom: -26px; width: 34px; height: 26px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cpath d='M0 1.5C4 1.5 7 2.5 8.5 5.5C10 9 9 15 6 21C5 23 7 25 9 23.5C15 18 22 10 27 5C29 3 31 1.5 34 1.5L34 0L0 0Z' fill='%23fff'/%3E%3Cpath d='M0 1.5C4 1.5 7 2.5 8.5 5.5C10 9 9 15 6 21C5 23 7 25 9 23.5C15 18 22 10 27 5C29 3 31 1.5 34 1.5' fill='none' stroke='%2323222B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.bmo-bubble.is-right::after { left: auto; right: 16px; scale: -1 1; }
.bmo-stamp { position: absolute; z-index: 4; border: 5px solid var(--green); color: var(--green); background: #F1FFF6; border-radius: 12px;
  padding: 2px 12px; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: 2px; pointer-events: none;
  animation: bmo-stamp .4s cubic-bezier(.3,1.5,.5,1) both; }
.bmo-stamp.is-wrong { border-color: var(--orange-d); color: var(--orange-d); background: #FFF4EC; }
.bmo-stamp.is-red { border-color: #D7263D; color: #D7263D; background: transparent; font-size: 14px; padding: 0 6px; border-width: 3px; border-radius: 8px; letter-spacing: 1px; }
@keyframes bmo-stamp { from { transform: scale(2.4) rotate(var(--r, -12deg)); opacity: 0; } to { transform: rotate(var(--r, -12deg)); opacity: 1; } }

.bmo-meter { background: var(--navy); color: #fff; border-radius: 20px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; border: 4px solid var(--ink); }
.bmo-meter-top { display: flex; justify-content: space-between; align-items: baseline; }
.bmo-meter-label { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; }
.bmo-meter-q { font-size: 13px; font-weight: 800; color: #DCE4F5; white-space: nowrap; }
.bmo-meter-amount { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 32px; line-height: 1; }
.bmo-meter-amount small { font-size: 16px; color: #DCE4F5; }
.bmo-meter-bar { height: 12px; border-radius: 6px; background: #34406A; overflow: hidden; }
.bmo-meter-bar i { display: block; height: 100%; background: var(--orange); border-radius: 6px; transition: width .6s ease; }
.bmo-meter-delta { font-size: 14px; font-weight: 800; }
.bmo-meter-delta.is-down { color: #9EF0BE; } .bmo-meter-delta.is-up { color: #FFB08A; }

/* ── news, mugshot, polaroid ────────────────────────────────────────────────────────────────────────────── */
.bmo-tv { border-radius: 24px; background: var(--navy2); border: 5px solid var(--ink); overflow: hidden; box-shadow: 0 10px 0 #16203C; }
.bmo-tv-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--orange); font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: 2px; color: #fff; }
.bmo-tv-bar::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: #fff; animation: bmo-blink 1s steps(2) infinite; }
@keyframes bmo-blink { 50% { opacity: 0; } }
.bmo-heightwall { position: relative; height: 230px; background: #DDE6F1; display: flex; justify-content: center; align-items: flex-end; overflow: hidden; }
.bmo-heightwall > :not(.bmo-fill):not(.bmo-bubble) { position: relative; z-index: 1; margin-bottom: -6px; }
/* the art is never mirrored: in a right-to-left language the wall keeps its cast where the picture has it; its words still read RTL */
[dir="rtl"] .bmo-heightwall { direction: ltr; } [dir="rtl"] .bmo-heightwall .bmo-bubble { direction: rtl; }
.bmo-tv-text { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; color: #fff; }
.bmo-ticker { background: var(--gold); color: var(--navy); padding: 8px 0; font-weight: 800; font-size: 14px; white-space: nowrap; overflow: hidden; text-transform: uppercase; }
.bmo-ticker span { display: inline-block; animation: bmo-ticker 16s linear infinite; }   /* four copies: move by one */
@keyframes bmo-ticker { to { transform: translateX(-25%); } }
[dir="rtl"] .bmo-ticker span { animation-name: bmo-ticker-rtl; }
@keyframes bmo-ticker-rtl { to { transform: translateX(25%); } }
.bmo-flash { position: fixed; inset: 0; background: #fff; z-index: 50; pointer-events: none; animation: bmo-flash .7s ease-out both; }
@keyframes bmo-flash { from { opacity: 1; } to { opacity: 0; } }
.bmo-polaroid { position: relative; background: #fff; padding: 12px 12px 18px; border-radius: 8px; border: 4px solid var(--ink); transform: rotate(-2deg);
  box-shadow: 0 10px 0 #B9DDF5; animation: bmo-drop .6s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes bmo-drop { from { transform: translateY(-60px) rotate(8deg); opacity: 0; } }
.bmo-polaroid .bmo-heightwall { height: 300px; }
.bmo-plate { margin-top: 12px; background: var(--navy); color: #fff; border-radius: 12px; padding: 8px 12px; border: 3px solid var(--ink); text-align: center; }
.bmo-plate span { font-size: 15px; font-weight: 800; color: #DCE4F5; }
/* the name written on the mugshot's blank board (box measured by prepare_art.php) */
.bmo-mugshot { position: relative; }
.bmo-board { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: #fff; text-align: center; line-height: 1; overflow: hidden; pointer-events: none; }
.bmo-board b { font-family: 'Baloo 2', sans-serif; font-weight: 800; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bmo-board span { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--gold); white-space: nowrap; }

/* ── ending cards, wall ─────────────────────────────────────────────────────────────────────────────────── */
.bmo-endcard { position: relative; height: 270px; border-radius: 24px; border: 4px solid var(--ink); overflow: hidden; background: var(--navy2);
  display: flex; justify-content: center; align-items: flex-end; gap: 2px; }
.bmo-endcard > :not(.bmo-fill):not(.bmo-rain) { position: relative; z-index: 1; margin-bottom: -4px; }
.bmo-endcard .bmo-rain { position: absolute; inset: 0; background: repeating-linear-gradient(105deg, transparent 0 16px, rgba(160,205,255,.45) 16px 18px);
  animation: bmo-rain .5s linear infinite; }
.bmo-ending-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 46px; line-height: 1; margin: 0; text-wrap: balance; animation: bmo-pop .5s .1s both; }   /* two even lines, never one word (or one Han character) alone */
.bmo-quote { font-size: 18px; font-weight: 700; line-height: 1.4; }
.bmo-wall { display: flex; flex-direction: column; gap: 10px; }
.bmo-wall-row { display: flex; align-items: center; gap: 12px; background: #fff; color: var(--navy); border-radius: 18px; padding: 12px 14px; border: 3px solid var(--line); animation: bmo-enter .4s both; }
.bmo-wall-rank { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--navy); color: #fff; font-family: 'Baloo 2', sans-serif; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.bmo-wall-name { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 19px; line-height: 1.1; word-break: break-word; }
.bmo-wall-score { margin-left: auto; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 19px; flex: none; }
.bmo-chip { display: inline-block; font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 999px; margin-top: 4px; }
.bmo-chip.cellmates { background: var(--navy); color: var(--gold); } .bmo-chip.freed { background: var(--green-bg); color: #145F38; }
.bmo-chip.barely { background: #FFF1D6; color: #7A4A00; } .bmo-chip.left { background: #FFE8DC; color: #8A3A12; }
.bmo-confetti { position: absolute; top: -20px; width: 12px; height: 12px; border-radius: 3px; z-index: 5; animation: bmo-fall 2.6s linear forwards; pointer-events: none; }
@keyframes bmo-fall { 80% { opacity: 1; } to { transform: translateY(380px) rotate(540deg); opacity: 0; } }
/* the score reveal: a board drops onto the set with a spring, the number bumps on every point */
.bmo-reveal { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: rgba(18,25,51,.55); }
.bmo-reveal-card { position: relative; background: var(--cream); border: 5px solid var(--ink); border-radius: 26px; padding: 26px 30px 12px; text-align: center;
  box-shadow: 0 8px 0 var(--ink), 0 22px 40px rgba(0,0,0,.4), inset 0 2px 0 #fff; transform-origin: 50% 100%; max-width: 86%;
  background-image: linear-gradient(180deg, #FFFDF8 0%, #FFF0CF 100%);
  animation: bmo-board-drop 1.3s both; }
/* DBM's spring (visualDuration .5, bounce .6, sampled) where the browser has linear(); a hand-made bounce otherwise */
@supports (animation-timing-function: linear(0, 1)) {
  .bmo-reveal-card { animation: bmo-board-drop-spring 1.3s linear(0, .0458, .1651, .331, .5186, .7064, .878, 1.0219, 1.1317, 1.2054, 1.2445, 1.2535, 1.2381, 1.2053, 1.1618, 1.1138, 1.0666, 1.0241, .989, .9627, .9455, .937, .9359, .9407, .9497, .961, .9732, .9851, .9956, 1.0041, 1.0104, 1.0143, 1.0162, 1.0161, 1.0147, 1.0123, 1.0094, 1.0063, 1.0033, 1.0007, .9986, .9971, .9962, 1, 1) both; }
}
@keyframes bmo-board-drop-spring { from { transform: translateY(-140%) scale(.96); } to { transform: none; } }
@keyframes bmo-board-drop { 0% { transform: translateY(-140%) scale(.96); } 45% { transform: translateY(6%) scale(1.02, .97); }
  65% { transform: translateY(-4%); } 82% { transform: translateY(1.5%); } 100% { transform: none; } }
.bmo-reveal-card .bmo-strip { top: -20px; }
.bmo-reveal-card > :not(.bmo-doodles):not(.bmo-strip) { position: relative; z-index: 1; }
.bmo-reveal-label { font-family: var(--hand); font-weight: 800; font-size: 18px; line-height: 1.2; color: var(--muted); text-wrap: balance; }
.bmo-reveal-label .bmo-name { color: #E0457B; }
.bmo-reveal-score { font-family: 'Baloo 2', sans-serif; font-weight: 800; line-height: 1; color: var(--navy); direction: ltr; }
/* DBM's digits: a thick white shell, a bold coloured face, a drop shadow */
.bmo-reveal-score b { display: inline-block; font-size: 96px; color: #2872FF; min-width: 1.1em; text-align: end; margin-right: 4px; -webkit-text-stroke: 12px #fff; paint-order: stroke fill;
  filter: drop-shadow(0 5px 0 rgba(35,34,43,.35)); }
.bmo-reveal-score b.is-bump { animation: bmo-bump .28s cubic-bezier(.3,1.8,.5,1); }
@keyframes bmo-bump { from { transform: scale(1.35); } }
.bmo-reveal-score span { font-size: 40px; color: var(--muted); }
.bmo-reveal.is-high .bmo-reveal-score b { color: var(--green); } .bmo-reveal.is-mid .bmo-reveal-score b { color: #C98A00; }
.bmo-reveal.is-low .bmo-reveal-score b { color: #D7263D; }
.bmo-reveal.is-leaving { animation: bmo-fade-out .3s both; }
@keyframes bmo-fade-out { to { opacity: 0; } }

/* ── toast, share ───────────────────────────────────────────────────────────────────────────────────────── */
.bmo-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--navy); color: #fff;
  padding: 12px 18px; border-radius: 999px; font-weight: 800; font-size: 15px; animation: bmo-pop .3s both; max-width: 90vw; text-align: center; }
.bmo-share { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.bmo-share .bmo-btn { font-family: 'Nunito', sans-serif; font-size: 17px; min-height: 54px; border-radius: 18px; gap: 8px; text-shadow: none; }
.bmo-share-ico { display: inline-flex; flex: none; width: 22px; height: 22px; } .bmo-share-ico svg { width: 100%; height: 100%; }
.bmo-share .is-ig { background: linear-gradient(45deg, #F9A13A 0%, #E1306C 45%, #8A3AB9 100%) !important; }
.bmo-share .is-wa { background: #1FAF5A; box-shadow: 0 4px 0 #157A3F; }
.bmo-share .is-ig { background: #C13584; box-shadow: 0 4px 0 #8C2460; }
.bmo-share .is-sc { background: #FFF35C; color: var(--navy); box-shadow: 0 4px 0 #C9BE2C; }
.bmo-share .is-line { background: #06C755; box-shadow: 0 4px 0 #048A3B; }
.bmo-share .is-tg { background: #2AABEE; box-shadow: 0 4px 0 #1B7DB0; }
.bmo-share .is-cp { background: #fff; color: var(--navy); box-shadow: 0 4px 0 var(--line); }
/* the docked sound button: top-right of the stage on every scene, above the scene's own header */
.bmo-sound { position: absolute; z-index: 30; top: calc(12px + env(safe-area-inset-top)); right: 12px; width: 40px; height: 40px;
  border-radius: 50%; border: 3px solid var(--ink); background: #fff; font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 var(--ink); padding: 0; }
.bmo-sound:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.bmo-scene > .bmo-top, .bmo-meter > .bmo-meter-top:first-child { padding-right: 46px; }   /* keep clear of the sound button */
.bmo-skip-hint { position: absolute; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); font-size: 12px; font-weight: 800; color: var(--soft); opacity: .7; }

/* ══ presentation system (docs/bail-me-out/PRESENTATION.md) ══════════════════════════════════════════════════ */
/* logo lockup: sticker lettering with the cat and the bear peeking from behind it */
.bmo-logo { position: relative; text-align: center; padding: 18px 0 4px; line-height: .92; font-family: 'Baloo 2', sans-serif; font-weight: 800; }
.bmo-logo-top { position: relative; z-index: 2; display: inline-block; font-family: var(--hand); font-size: 22px; color: #fff; rotate: -4deg;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.bmo-logo-main { position: relative; z-index: 2; display: block; font-size: clamp(42px, 14.5vw, 58px); letter-spacing: 1px; color: #fff; -webkit-text-stroke: 10px var(--ink);
  paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink), 0 10px 18px rgba(0,0,0,.4); }
.bmo-logo-main .is-gold { color: var(--gold); } .bmo-logo-main .is-pink { color: var(--pink); }
/* a logo line never splits inside a word: too wide → it shrinks (app.js fitLogo), or breaks only between its parts */
.bmo-logo-top, .bmo-logo-main { white-space: nowrap; }
.bmo-logo-main.is-split { white-space: normal; } .bmo-logo-main.is-split span { white-space: nowrap; }
/* scripts with tall letters (Chinese, Japanese, Korean, Indic, Thai, Arabic) need more room between the logo's lines,
   or the small top line hides behind the big one */
.bmo-logo:is(:lang(zh), :lang(ja), :lang(ko), :lang(bn), :lang(ta), :lang(th), :lang(ar), :lang(ne)) { line-height: 1.12; }
.bmo-logo:is(:lang(zh), :lang(ja), :lang(ko), :lang(bn), :lang(ta), :lang(th), :lang(ar), :lang(ne)) .bmo-logo-top { margin-bottom: 4px; }
.bmo-logo:lang(ko) .bmo-logo-top { margin-bottom: 9px; }   /* Hangul sits tallest of all */
.bmo-logo:lang(ar) .bmo-logo-site { margin-top: 16px; }   /* Arabic letters hang low: the badge sits clear below them */
.bmo-logo-peek { position: absolute; z-index: 1; top: -4px; width: 86px; height: 70px; overflow: hidden; }
.bmo-logo-peek.is-left { left: 4px; rotate: -12deg; } .bmo-logo-peek.is-right { right: 4px; rotate: 12deg; }
.bmo-logo-peek .bmo-char { position: absolute; left: 50%; top: 0; translate: -50% 0; }
/* living doodles: pop in, then float forever (DBM: 2.3–3.7 s, −4…−8 px, ±4–10°) */
.bmo-doodles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* decorations always stay behind the content */
.bmo-scene > :not(.bmo-doodles):not(.bmo-skip-hint):not(.bmo-loader) { position: relative; z-index: 1; }
.bmo-casefile > .bmo-q, .bmo-casefile > .bmo-picks, .bmo-casefile > div:not(.bmo-doodles):not(.bmo-qhead) { position: relative; z-index: 1; }
.bmo-doodle { position: absolute; display: block; opacity: .75; }
.bmo-doodle svg { display: block; width: 100%; height: auto; overflow: visible; animation: bmo-float var(--fd, 3s) ease-in-out var(--fdl, 0s) infinite alternate; }
@keyframes bmo-float { from { translate: 0 0; rotate: 0deg; } to { translate: 0 var(--fy, -6px); rotate: var(--fr, 6deg); } }
/* branded loader (the scene behind it is loading its pictures) */
.bmo-loader { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.bmo-loader .bmo-logo { animation: bmo-logo-bob 1.6s ease-in-out infinite alternate; }
@keyframes bmo-logo-bob { to { translate: 0 -6px; } }
.bmo-dots { display: flex; gap: 8px; }
.bmo-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); animation: bmo-dot .9s ease-in-out infinite; }
.bmo-dots i:nth-child(2) { background: var(--pink); animation-delay: .16s; } .bmo-dots i:nth-child(3) { background: #8FC8FF; animation-delay: .32s; }
@keyframes bmo-dot { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -8px; } }
/* hero card (landing): the cell with both of them behind the bars under the hanging bail sign */
.bmo-hero { position: relative; height: clamp(180px, calc(100dvh - 505px), 300px);   /* minus the language field (as tall as before without it) */  border-radius: 34px; border: 5px solid var(--ink); overflow: hidden; background: var(--navy2);
  box-shadow: 0 10px 0 rgba(0,0,0,.4), 0 24px 40px rgba(0,0,0,.35); }
.bmo-hero .bmo-char { display: block; margin: 0 auto; }
.bmo-hero .bmo-hero-sign { position: absolute; left: 50%; top: -6px; translate: -50% 0; z-index: 3; transform-origin: 50% 0; animation: bmo-swing 3.4s ease-in-out infinite alternate; }
/* the word painted on the hanging board (below its chains) */
.bmo-hero-sign > span { position: absolute; left: 0; right: 0; top: 52%; translate: 0 -50%; text-align: center; font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: 22px; letter-spacing: 3px; color: #FFF3D6; text-shadow: 0 2px 0 #6B3A12, 0 0 1px #6B3A12; pointer-events: none; }
@keyframes bmo-swing { from { rotate: -3deg; } to { rotate: 3deg; } }
.bmo-hero .bmo-window-bars { z-index: 2; }
/* how to play: three steps */
.bmo-steps { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border: 1.5px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 24px rgba(0,0,0,.2); }
.bmo-step { display: flex; align-items: center; gap: 12px; }
.bmo-step b { flex: none; width: 40px; height: 40px; border-radius: 14px; background: var(--cream); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 20px; rotate: -6deg; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.bmo-step span { font-weight: 800; font-size: 15px; line-height: 1.3; color: var(--soft); } .bmo-step span strong { color: #fff; display: block; font-family: 'Baloo 2', sans-serif; font-size: 17px; letter-spacing: .5px; }
/* the landing's language switch under the logo (Don't Block Me's): globe · this language · round arrow; a tap opens
   the list of every language in its own name */
.bmo-langfield { display: flex; align-items: center; gap: 10px; width: 100%; height: 50px; margin: 0; padding: 0 6px 0 14px; border-radius: 18px;
  background: #fff; border: 2.5px solid var(--ink); box-shadow: 0 3px 0 rgba(12,16,38,.3); color: var(--navy); cursor: pointer; text-align: start;
  font: 800 17px/1.1 'Baloo 2', sans-serif; -webkit-tap-highlight-color: transparent; }
.bmo-langfield:active { translate: 0 2px; box-shadow: 0 1px 0 rgba(12,16,38,.3); }
.bmo-langfield:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.bmo-langfield-globe { flex: none; font-size: 22px; line-height: 1; }
.bmo-langfield b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 2px; }
.bmo-langfield-arrow { flex: none; position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--pink); box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); }
.bmo-langfield-arrow::after { content: ''; position: absolute; left: 50%; top: 44%; width: 9px; height: 9px; border: solid #fff; border-width: 0 3px 3px 0; border-radius: 1px; translate: -50% -50%; rotate: 45deg; }
.bmo-langcard { padding: 10px 10px 14px; }
.bmo-langlist { max-height: min(62vh, 520px); overflow-y: auto; overscroll-behavior: contain; margin: 0 -2px 12px; }
.bmo-langlist a { display: block; padding: 13px 12px; border-bottom: 1px solid #E6EDF5; text-align: center; text-decoration: none; color: var(--navy);
  font: 800 18px/1.25 'Baloo 2', sans-serif; border-radius: 12px; }
.bmo-langlist a:last-child { border-bottom: 0; }
.bmo-langlist a:is(:lang(ar), :lang(th)) { font-size: 21px; }   /* the phone's own font for these runs small */
.bmo-langlist a:active, .bmo-langlist a:focus-visible { background: #F1F6FC; outline: none; }
.bmo-langlist a.is-now { background: #FFE8F1; color: #E0457B; }
.bmo-langlist a.is-now::after { content: ' ✓'; }
.bmo-langclose { width: 100%; min-height: 50px; font-size: 18px; }
/* a character asking something from a sticker bubble (name step, crime, news) */
.bmo-asker { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4px; min-height: 160px; }
.bmo-sticker { position: relative; max-width: 220px; padding: 14px 20px; border-radius: 22px; background: #FFE3EE; color: var(--navy); border: 3px solid var(--ink);
  font-family: var(--hand); font-weight: 800; font-size: 22px; line-height: 1.15; rotate: -4deg; white-space: nowrap; margin-bottom: 70px;
  filter: drop-shadow(0 4px 0 rgba(12,16,38,.55)) drop-shadow(0 10px 14px rgba(0,0,0,.25)); }
.bmo-sticker::after { content: ''; position: absolute; right: 24px; bottom: -34px; width: 44px; height: 34px; scale: -1 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34'%3E%3Cpath d='M0 1.5C5 1.5 9 3 11 7C13 12 12 19.5 8 27C6.5 30 9 32.5 11.5 30.5C19.5 23.5 28.5 13 35 6.5C38 3.5 40 1.5 44 1.5L44 0L0 0Z' fill='%23FFE3EE'/%3E%3Cpath d='M0 1.5C5 1.5 9 3 11 7C13 12 12 19.5 8 27C6.5 30 9 32.5 11.5 30.5C19.5 23.5 28.5 13 35 6.5C38 3.5 40 1.5 44 1.5' fill='none' stroke='%2323222B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.bmo-sticker .bmo-key { color: #E0457B; }
/* the two character cards (who are you?), tilted like stickers */
.bmo-gcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 6px; }
.bmo-gcard { position: relative; min-height: 220px; border-radius: 28px; background: var(--cream); border: 4px solid var(--ink); color: var(--navy);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 10px 8px 12px; cursor: pointer; overflow: hidden;
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 20px; box-shadow: 0 8px 0 rgba(0,0,0,.4); transition: background .2s, transform .15s; }
.bmo-gcard:first-child { rotate: -5deg; } .bmo-gcard:last-child { rotate: 5deg; }
.bmo-gcard.is-selected { background: #FFD3E4; border-color: #C50B51; }
.bmo-gcard:active { transform: scale(.97); }
/* the case file (statement questions, charge sheet): punched paper, a police-tape strip that sticks on, a label strip */
.bmo-casefile { position: relative; background: var(--cream); color: var(--navy); border: 4px solid var(--ink); border-radius: 18px 18px 26px 26px;
  padding: 34px 18px 18px 30px; box-shadow: 0 8px 0 rgba(0,0,0,.4), 0 20px 32px rgba(0,0,0,.3);
  background-image: repeating-linear-gradient(180deg, transparent 0 33px, rgba(80,110,170,.13) 33px 35px); }
.bmo-casefile::before { content: ''; position: absolute; left: 9px; top: 26px; bottom: 26px; width: 10px;
  background: radial-gradient(circle, #2A3558 4px, transparent 5px) 0 0 / 10px 30px repeat-y; }
.bmo-tape { position: absolute; left: -12px; top: 8px; z-index: 2; width: 120px; height: 26px; rotate: -16deg;
  background: repeating-linear-gradient(-45deg, #FFD23F 0 12px, #23222B 12px 22px); border: 2px solid var(--ink); opacity: .95;
  animation: bmo-tape .39s cubic-bezier(.3,1.5,.5,1) .22s both; }
@keyframes bmo-tape { from { rotate: -24deg; scale: .88; opacity: 0; } 60% { rotate: -14deg; scale: 1.05; opacity: 1; } to { rotate: -16deg; scale: 1; } }
.bmo-strip { position: absolute; left: 50%; top: -18px; translate: -50% 0; rotate: -3deg; z-index: 2; padding: 6px 16px; border-radius: 6px; background: var(--gold);
  border: 3px solid var(--ink); font-family: var(--hand); font-weight: 800; font-size: 15px; color: #6B4A00; white-space: nowrap; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.bmo-casefile .bmo-q { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 26px; line-height: 1.15; text-align: center; padding: 10px 74px 6px 4px; min-height: 70px; }
.bmo-casefile .bmo-name { color: #E0457B; }
.bmo-qhead { position: absolute; right: -10px; top: -30px; z-index: 3; width: 104px; height: 104px; border-radius: 30% 70% 60% 40% / 50% 40% 60% 50%; background: rgba(143,200,255,.35);
  display: flex; align-items: center; justify-content: center; }
.bmo-qhead img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(0,0,0,.25)); animation: bmo-float 2.9s ease-in-out infinite alternate; --fy: -7px; --fr: 3deg; }
/* answer rows on the statement (picture + label + a hand-drawn underline that draws itself) */
.bmo-opts { display: flex; flex-direction: column; gap: 14px; }
.bmo-opt { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 14px 10px 10px; border-radius: 28px; background: #fff; color: var(--navy);
  border: 3px solid var(--ink); box-shadow: 4px 5px 0 rgba(0,0,0,.4); cursor: pointer; text-align: left; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 19px; line-height: 1.15;
  transition: background .15s, transform .12s; }
.bmo-opt:active { transform: translate(2px, 3px); box-shadow: 2px 2px 0 rgba(0,0,0,.4); }
.bmo-opt img { flex: none; width: 84px; height: 84px; object-fit: cover; border-radius: 20px; background: #E6EEF7; }
.bmo-opt .bmo-opt-text { display: flex; flex-direction: column; gap: 4px; }
.bmo-opt svg { width: 70px; height: 10px; overflow: visible; }
.bmo-opt svg path { stroke-dasharray: 120; stroke-dashoffset: 120; animation: bmo-draw 2.2s cubic-bezier(.22,1,.36,1) var(--d, .2s) forwards; }
@keyframes bmo-draw { to { stroke-dashoffset: 0; } }
.bmo-opt.is-selected { background: #FF5C8D; color: #fff; border-color: #C50B51; }
/* progress tiles 1–10 (current raised; ✓ green / ✕ red) */
.bmo-tiles { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.bmo-tiles i { height: 26px; border-radius: 9px; background: rgba(255,255,255,.12); color: #A9B6D8; font-style: normal; font-weight: 900; font-size: 13px;
  display: flex; align-items: center; justify-content: center; transition: background .25s, transform .25s; }
.bmo-tiles i.is-now { background: #158CFF; color: #fff; transform: translateY(-1px) scale(1.05); box-shadow: 0 3px 0 #0B4F9A; }
.bmo-tiles i.is-right { background: #B5F1C8; color: #16733D; } .bmo-tiles i.is-wrong { background: #FFD3D8; color: #B9213E; }
/* the friend's answers at the station: picture cards (picture on top, label under), big enough to read at a glance */
.bmo-picks.is-cards { gap: 12px; }
.bmo-picks.is-cards .bmo-pick { justify-content: flex-start; padding: 8px 8px 6px; border-radius: 22px; border: 3px solid var(--ink); min-height: 0; gap: 4px;
  font-size: 16px; line-height: 1.15; box-shadow: 0 5px 0 #0D1330, 0 12px 20px rgba(0,0,0,.25); overflow: hidden; transition: transform .12s, box-shadow .12s; }
/* the label fills the rest of the card, centred: both cards line up whatever the picture or the label length */
.bmo-picks.is-cards .bmo-pick > span:not(.bmo-badge):not(.bmo-stamp) { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 2.5em; text-wrap: balance; }
.bmo-picks.is-cards .bmo-pick img:not(.bmo-art) { width: 100%; height: 72px; aspect-ratio: auto; object-fit: cover; border-radius: 15px; }
.bmo-picks.is-cards.is-two .bmo-pick img:not(.bmo-art) { height: clamp(96px, 20dvh, 172px); }   /* two big pictures, as DBM */
.bmo-picks.is-cards .bmo-pick:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.bmo-picks.is-cards .bmo-pick.is-right img:not(.bmo-art) { box-shadow: inset 0 0 0 999px rgba(34,197,94,.42); filter: saturate(.9); }
.bmo-picks.is-cards .bmo-pick.is-wrong img:not(.bmo-art) { filter: grayscale(.2) brightness(.9); }
.bmo-picks.is-cards .bmo-pick.is-right { border-color: #16733D; } .bmo-picks.is-cards .bmo-pick.is-wrong { border-color: #B9213E; }
.bmo-meter .bmo-tiles { margin-top: 2px; }
/* answer badges on the picture: ✓ / ✕ with a tinted overlay (DBM option states) */
.bmo-pick .bmo-badge { position: absolute; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; color: #fff; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.3); animation: bmo-pop .35s cubic-bezier(.3,1.7,.5,1) both; }
.bmo-pick.is-right .bmo-badge { background: #22C55E; } .bmo-pick.is-wrong .bmo-badge { background: #EF4444; }
/* emotion stickers popping by a character's head (sparkles, sweat, anger, hearts, tears, shock) */
.bmo-fx { position: absolute; z-index: 5; pointer-events: none; font-size: 26px; line-height: 1; animation: bmo-fx 1.1s cubic-bezier(.2,1.2,.4,1) forwards; }
@keyframes bmo-fx { 0% { opacity: 0; scale: .3; translate: 0 6px; } 25% { opacity: 1; scale: 1.15; } 45% { scale: 1; } 80% { opacity: 1; translate: 0 -10px; } 100% { opacity: 0; translate: 0 -16px; } }
/* the call to action after an ending: rays title, a pointing finger, the button */
.bmo-cta { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px 18px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); border: 1.5px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 24px rgba(0,0,0,.2); }
.bmo-cta-title { display: flex; align-items: center; gap: 8px; font-family: var(--hand); font-weight: 800; font-size: 21px; color: #fff; white-space: nowrap; }
.bmo-rays { display: inline-flex; width: 24px; height: 24px; color: var(--gold); } .bmo-rays svg { width: 100%; height: 100%; }
.bmo-cta .bmo-btn { font-size: clamp(18px, 5.6vw, 22px); text-wrap: balance; line-height: 1.1; padding: 6px 14px; }   /* a long label (Tamil) wraps inside */
.bmo-finger { font-size: 34px; animation: bmo-point .9s ease-in-out infinite alternate; }
@keyframes bmo-point { to { translate: 0 8px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .bmo-lens.cam-officer, .bmo-lens.cam-cell { transform: none; }
}

/* the friend's own row on the wall (DBM's "YOU 👇") */
.bmo-wall-row.is-you { position: relative; border-color: #158CFF; background: #EAF4FF; box-shadow: 0 0 0 3px rgba(21,140,255,.25); margin-top: 14px; }
.bmo-you { position: absolute; left: 14px; top: -13px; padding: 2px 10px; border-radius: 999px; background: #158CFF; color: #fff;
  font-family: var(--hand); font-weight: 800; font-size: 13px; box-shadow: 0 2px 0 #0B4F9A; }
/* the invitation pop-up after an ending */
.bmo-invite { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(8,12,30,.72); animation: bmo-fade-in .25s both; }
@keyframes bmo-fade-in { from { opacity: 0; } }
.bmo-invite-card { position: relative; width: 100%; max-width: 380px; background: var(--cream); color: var(--navy); border: 4px solid var(--ink);
  border-radius: 36px; padding: 0 20px 22px; text-align: center; box-shadow: 0 8px 0 var(--ink), 0 24px 48px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 10px; }
.bmo-invite-close { position: absolute; right: 12px; top: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink);
  background: #fff; color: var(--ink); font-size: 18px; font-weight: 900; cursor: pointer; }
.bmo-invite-art { position: relative; height: 190px; margin: 0 -20px; border-radius: 32px 32px 0 0; overflow: hidden; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(circle at 50% 45%, #FFD3E4 0, #F7A8C8 35%, #8FB4F5 100%); }
.bmo-invite-art .bmo-char { position: relative; z-index: 1; margin-bottom: -10px; }
.bmo-invite-confetti i { position: absolute; width: 10px; height: 14px; border-radius: 3px; animation: bmo-drift 3.2s ease-in-out infinite alternate; }
@keyframes bmo-drift { from { translate: 0 -4px; rotate: var(--turn); } to { translate: 0 8px; rotate: calc(var(--turn) * -1); } }
.bmo-invite-title { margin: 6px 0 0; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 36px; line-height: 1; }
.bmo-invite-card .bmo-sub { color: #34406A; }
.bmo-invite-card .bmo-btn { font-size: clamp(17px, 5.2vw, 22px); text-wrap: balance; line-height: 1.1; padding: 0 12px; }
/* short phones: a tighter bail panel and scene gaps so the question + both answers fit without scrolling */
@media (max-height: 700px) {
  .bmo-meter { padding: 8px 12px; gap: 5px; }
  .bmo-meter-amount { font-size: 26px; }
  .bmo-tiles i { height: 22px; }
  .bmo-scene { gap: 10px; padding-top: 14px; }
}
.bmo-scene.is-centred { justify-content: center; }
/* (.bmo-stage raises it over the scene-wide "children are position: relative" rule) */
.bmo-stage .bmo-scene.is-centred > .bmo-top { position: absolute; top: 24px; left: 20px; right: 20px; }

/* ══ friend's station, DBM-clear (2026-10-12 side-by-side review) ═══════════════════════════════════════════ */
.bmo-scene.is-station { gap: 12px; padding-top: 16px; }
/* the bail as one compact row + the 1–10 tiles */
.bmo-meter.is-compact { padding: 9px 12px 10px; gap: 7px; border-radius: 18px; }
.bmo-meter.is-compact .bmo-meter-top { align-items: center; gap: 8px; }
.bmo-meter.is-compact .bmo-meter-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.bmo-meter.is-compact .bmo-meter-amount { font-size: 22px; white-space: nowrap; }
.bmo-meter.is-compact .bmo-meter-bar { height: 7px; }
.is-station .bmo-set { height: clamp(196px, 34dvh, 300px); }
/* the question: whole, big, readable at once — DBM's hero element */
.bmo-qcard { position: relative; display: flex; align-items: center; gap: 12px; color: var(--navy); border: 3px solid var(--ink); border-radius: 24px;
  padding: 20px 16px 14px 12px; min-height: 98px; background: linear-gradient(180deg, #FFFDF8 0%, #FFF0CF 100%);
  box-shadow: 0 5px 0 #0D1330, 0 16px 26px rgba(0,0,0,.28), inset 0 2px 0 #fff; }
/* "QUESTION 2 / 10": a centred ink pill on the card's top edge */
.bmo-qcard .bmo-strip { left: 50%; translate: -50% 0; top: -14px; rotate: none; padding: 3px 14px 2px; border: 2px solid var(--gold); border-radius: 999px;
  background: var(--ink); color: var(--gold); font-family: 'Baloo 2', sans-serif; font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
/* the topic's sticker in its own soft tile beside the words (the words get the full width) */
.bmo-qcard-head { flex: none; width: 70px; height: 70px; padding: 5px; border-radius: 20px; object-fit: contain; order: -1;
  background: radial-gradient(circle at 50% 38%, #fff 0, #FFE3B8 100%); box-shadow: inset 0 0 0 2px rgba(35,34,43,.08);
  animation: bmo-float 2.9s ease-in-out infinite alternate; --fy: -3px; --fr: 2deg; }
.bmo-qcard-text { flex: 1 1 auto; min-width: 0; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(19px, 5.2vw, 23px); line-height: 1.18; text-wrap: balance; }
.bmo-qcard-text .bmo-name { color: #E0457B; }
/* answers solid from the first frame (no washed-out cards) */
.is-station .bmo-picks.is-cards .bmo-pick { background: #fff; }
/* ground shadows: everyone stands on the floor */
.bmo-officer::before, .bmo-friend::before, .bmo-creator::before, .bmo-walker::before, .bmo-arrestee::before {
  content: ''; position: absolute; left: 50%; bottom: 4px; width: 62%; max-width: 120px; height: 14px; translate: -50% 0; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(25,20,40,.35) 0, rgba(25,20,40,0) 70%); pointer-events: none; }
.bmo-creator::before { width: 90px; }
/* name tags at the stage's corners */
.bmo-tag-name { position: absolute; bottom: 8px; z-index: 5; max-width: 42%; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.92);
  color: var(--navy); border: 2px solid var(--ink); font-family: var(--hand); font-weight: 800; font-size: 12px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; box-shadow: 0 2px 0 rgba(0,0,0,.3); pointer-events: none; }
.bmo-tag-name.is-left { left: 8px; } .bmo-tag-name.is-right { right: 8px; }
/* the verdict and the ending: the stage takes the screen (DBM: board at the top, the cast below) */
.is-film .bmo-meter, .is-film .bmo-qcard, .is-film .bmo-picks, .is-film .bmo-skip-hint { display: none; }
/* DBM's floating stage, our way: the station as a diorama at the bottom, the night sky above for the board and words */
.is-film .bmo-set { --lens-h: clamp(270px, 80vw, 330px); height: min(calc(100dvh - 64px), 620px); background: none; border: 0; box-shadow: none;
  overflow: visible; transition: height .5s cubic-bezier(.3,.9,.3,1); }
.is-film .bmo-lens { top: auto; height: var(--lens-h); border: 4px solid var(--ink); border-radius: 26px; overflow: hidden;
  box-shadow: 0 10px 0 rgba(0,0,0,.45), 0 30px 50px rgba(0,0,0,.45); }
.is-film .bmo-set > .bmo-bubble { top: auto !important; bottom: calc(var(--lens-h) - 54px); z-index: 7; }
.is-film .bmo-tag-name { bottom: 10px; }
/* the cut into the climax: a dip to black over the whole screen (finish()) */
.bmo-cut { position: fixed; inset: 0; z-index: 40; background: #07091A; opacity: 0; pointer-events: none; }
/* the climax (finish()): the lights go down at the edges and film bars slide in over the diorama; they lift for the ending */
.bmo-drama { position: absolute; inset: 0; z-index: 6; pointer-events: none; animation: bmo-fade-in .6s ease both;
  background: radial-gradient(120% 90% at 50% 62%, rgba(10,12,30,0) 45%, rgba(10,12,30,.55) 100%); }
.bmo-drama::before, .bmo-drama::after { content: ''; position: absolute; left: 0; right: 0; height: 22px; background: #07091A;
  animation: bmo-bar-in .7s cubic-bezier(.3,.9,.3,1) both; }
.bmo-drama::before { top: 0; transform-origin: 50% 0; } .bmo-drama::after { bottom: 0; transform-origin: 50% 100%; }
.bmo-drama.is-leaving { animation: bmo-fade-out .5s ease both; }
@keyframes bmo-bar-in { from { transform: scaleY(0); } to { transform: none; } }
/* the verdict hangs from the top on two strings (DBM's "your score" board) */
.is-film .bmo-reveal { inset: 0 0 auto 0; padding-top: 22px; background: none; }
.bmo-reveal-card::before, .bmo-reveal-card::after { content: ''; position: absolute; top: -300px; width: 3px; height: 300px; background: linear-gradient(180deg, rgba(201,212,238,0), #C9D4EE 70%); }
.bmo-reveal-card::before { left: 22%; } .bmo-reveal-card::after { right: 22%; }
.bmo-reveal { align-items: flex-start; padding-top: 14px; background: linear-gradient(180deg, rgba(18,25,51,.45) 0, rgba(18,25,51,0) 55%); }
.bmo-officer { z-index: 1; }
/* the friend's first screen: headline, name and the button all above the fold (DBM) */
.bmo-tv .bmo-heightwall { height: clamp(150px, 24dvh, 210px); }
/* the board stays hung after the count (the cast react under it) */
.bmo-reveal.is-hung .bmo-reveal-card { scale: .82; transform-origin: 50% 0; transition: scale .5s cubic-bezier(.3,1.3,.5,1); }
.bmo-scene.is-news { gap: 12px; }
.is-news .bmo-logo { padding-top: 0; }
.is-news .bmo-logo-main { font-size: clamp(34px, 11vw, 46px); }
.is-news .bmo-tv .bmo-heightwall { height: clamp(140px, 21dvh, 190px); }
/* the diorama is the frame: no camera zoom on it (it would crop its own border) */
.is-film .bmo-lens.cam-officer, .is-film .bmo-lens.cam-cell { transform: none; }
/* wider bubbles in the sky so lines read in two lines, not five */
.is-film .bmo-set > .bmo-bubble { max-width: min(220px, 58%) !important; }
.bmo-qcard[hidden] { display: none; }
/* the arrested one always fits the news picture whole (short phones) */
.bmo-tv .bmo-heightwall > div[data-who] > .bmo-char { height: calc(100% - 6px) !important; width: auto !important; }
.bmo-tv .bmo-heightwall > div[data-who] { height: 100%; display: flex; align-items: flex-end; }
/* stamps scale with the question-time stage */
.is-station:not(.is-film) .bmo-set .bmo-stamp { font-size: clamp(18px, 3.4dvh, 26px); padding: 0 10px; border-width: 4px; }
.bmo-tv .bmo-bubble { font-size: 13px; padding: 7px 10px; top: 10px !important; max-width: 47% !important; }
/* the diorama hangs just under the board (no empty sky on short phones; centred on tall ones) */
.is-film .bmo-set { height: min(calc(var(--lens-h) + 230px), calc(100dvh - 64px)); margin-top: max(0px, calc((100dvh - 64px - var(--lens-h) - 230px) / 3)); }
.bmo-officer { z-index: 1; } .bmo-friend { z-index: 3; }   /* the friend always in front of the Officer */
/* aimed tails (app.js aim()): under the bubble at the speaker's x, or on the side facing them */
/* a speaker's line shows its tail only once it is aimed (never a default tail that then jumps) */
.bmo-bubble[data-speaker]:not(.is-aimed)::after { visibility: hidden; }
.bmo-bubble.is-aimed::after { left: var(--tail-x, 16px); right: auto; scale: none; }
.bmo-bubble.is-aimed.tail-flip::after { scale: -1 1; }
/* beside the speaker: the same tail turned to that side (turned about its base corner, the base on the outline) */
.bmo-bubble.tail-r::after { left: 100%; right: auto; bottom: auto; top: calc(var(--tail-y, 14px) + 34px); transform-origin: 0 0; rotate: -90deg; scale: none; }
.bmo-bubble.tail-l::after { left: 0; right: auto; bottom: auto; top: calc(var(--tail-y, 14px) + 34px); transform-origin: 0 0; rotate: 90deg; scale: -1 1; }
/* crime: the creator peeks over the charge sheet's top-right corner (behind it, head and paws above the edge) */
.bmo-sheetwrap { position: relative; margin-top: 88px; }   /* room for the bear's line above the tag */
.bmo-sheetwrap > .bmo-casefile { z-index: 1; }
.bmo-peek { position: absolute; right: 10px; top: -92px; z-index: 0; transform-origin: 50% 100%; }
.bmo-sheetwrap > .bmo-bubble { z-index: 2; }
.bmo-crime .bmo-stamp.is-red { bottom: -9px !important; right: 6px !important; background: #FFF6E5; }
/* questions: the topic's character sits in the card's bottom-right corner (DBM), not floating outside it */
.bmo-casefile .bmo-q { min-height: 128px; padding: 16px 96px 14px 4px; display: block; }
.bmo-qhead { top: auto; bottom: -16px; right: -10px; width: 116px; height: 116px; background: none; border-radius: 0; }
.bmo-qhead img { width: 116px; height: 116px; }
.is-film .bmo-set > .bmo-bubble { transition: left .25s ease, translate .9s cubic-bezier(.3,.9,.3,1); }
/* the climax plays mid-screen (the sky is empty until the board comes); the stage glides back down as the board drops */
.is-film .bmo-lens, .is-film .bmo-set > .bmo-bubble { translate: 0 calc(-1 * var(--climb, 0px)); }
.is-film .bmo-set.is-climax { --climb: calc(min(230px, 100dvh - 64px - var(--lens-h)) / 2 - 8px); }
.is-film .bmo-lens { transition: transform .6s cubic-bezier(.3,.9,.3,1), translate .9s cubic-bezier(.3,.9,.3,1); }
/* arrest: the charge sheet under the scene */
.bmo-record { margin: 26px 4px 0; padding: 30px 18px 18px 40px; position: relative; }
.bmo-record[hidden] { display: none; }
.bmo-record-name { font: 800 24px/1.15 'Baloo 2', system-ui, sans-serif; color: #1D2342; overflow-wrap: anywhere; }
.bmo-record-crime { font-weight: 700; font-size: 15px; color: #4A5578; margin-top: 4px; padding-right: 110px; }
.bmo-record .bmo-stamp { position: absolute; }
/* two-answer pictures: the whole picture, never a cropped head (DBM shows the full figure) */
.bmo-picks.is-cards.is-two .bmo-pick img:not(.bmo-art) { object-fit: contain; background: #fff; }
/* CORRECT / WRONG is stamped on the answer that was picked (the evidence), never over the cast */
.bmo-picks.is-cards .bmo-pick .bmo-stamp { left: 50%; top: 40%; translate: -50% -50%; font-size: 21px; padding: 0 10px; border-width: 4px; letter-spacing: 1.5px; white-space: nowrap;
  background: rgba(255,255,255,.94); box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.bmo-record .bmo-stamp { font-size: 22px; padding: 2px 12px; }
/* a sticker animation drawn at its still pose's size and spot (app.js pic()): the box is the still pose; the sticker
   overflows it where the action reaches (jumps, tears, hearts) */
.bmo-animated { position: relative; display: block; flex: none; }
.bmo-animated > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; user-select: none; }
/* arrest: a taller stage (the screen has the room) so the lines sit above the heads on short phones */
.bmo-scene.is-centred .bmo-set { height: clamp(290px, 50dvh, 390px); }
/* the visitor-pass label */
.bmo-scene.is-news > .bmo-h2 { font-size: 24px; }
/* short phones: the news screen's "Go bail … out" stays on the first screen */
@media (max-height: 700px) {
  .is-news .bmo-tv .bmo-heightwall { height: 108px; }
  .bmo-scene.is-news > .bmo-h2 { font-size: 19px; line-height: 1.2; margin-top: 4px; }
  .is-news .bmo-error:empty { min-height: 0; margin: 0; }
  .is-news .bmo-logo { margin-bottom: -6px; }
}
/* short phones: question-time lines are wider and shorter (two lines), so they sit above the heads, not on faces */
@media (max-height: 700px) {
  .is-station:not(.is-film) .bmo-set .bmo-bubble { font-size: 13px; line-height: 1.25; padding: 6px 10px; max-width: 64% !important; top: 6px !important; }
}
@media (max-height: 700px) {
  /* the CORRECT / WRONG stamp lands at the friend's feet, never across the face */
  .is-station:not(.is-film) .bmo-set .bmo-stamp { bottom: -4px !important; }
}
/* the ending film: the verdict board names them; name tags would label empty spots once people move */
.is-film .bmo-tag-name { opacity: 0; transition: opacity .3s; }
/* every button: centred text with breathing room (a long label on a narrow phone shrinks instead of hugging the edge) */
.bmo-btn { text-align: center; padding-left: 16px; padding-right: 16px; line-height: 1.15; }
@media (max-width: 380px) { .bmo-btn { font-size: clamp(17px, 5.4vw, 21px); } }
/* the case file's two small buttons (More crimes · Surprise me) share a row: each label on one line */
.bmo-casefile .bmo-row .bmo-btn { min-width: 0; text-wrap: balance; font-size: clamp(13.5px, 4.1vw, 15.5px); padding: 4px 8px; gap: 6px; }   /* a long label (German, Tamil) wraps inside its button */
/* name tags leave at once when the film starts (no fade under the verdict board) */
.is-film .bmo-tag-name { transition: none; }
/* a visit that hasn't reached the server yet: stays until it has (app.js sendVisit) */
.bmo-notice { position: fixed; left: 12px; right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 61; display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 10px 16px; border-radius: 18px; background: #FFF3D6; color: var(--navy); border: 3px solid var(--ink); box-shadow: 0 6px 0 rgba(0,0,0,.35);
  font-weight: 800; font-size: 14px; line-height: 1.25; max-width: 460px; margin: 0 auto; }
.bmo-notice span { flex: 1; }
.bmo-notice button { flex: none; border: 0; border-radius: 12px; padding: 9px 14px; background: var(--orange, #FF7A2F); color: #fff; font: inherit; cursor: pointer; }
.bmo-notice.is-busy button { opacity: .5; pointer-events: none; }
/* toasts: centred without a transform (the pop-in animation owns transform) and the full width to wrap in */
.bmo-toast { left: 16px; right: 16px; transform: none; width: max-content; max-width: calc(100vw - 32px); margin: 0 auto; bottom: max(24px, env(safe-area-inset-bottom)); }
/* tall screens (tablets, desktop): the question-time scene sits in the middle, not stuck to the top */
@media (min-height: 900px) and (min-width: 600px) {
  .bmo-scene.is-station:not(.is-film) { justify-content: center; }
}
/* every phone: the CORRECT / WRONG stamp sits on the floor line (its art is ~40 px tall: the faces are well above) */
.is-station:not(.is-film) .bmo-set .bmo-stamp { bottom: -6px !important; }
/* narrow phones (≤ 340 px): the arrest charge is long — a wider, flatter bubble so it stays above the Officer */
@media (max-width: 340px) {
  .bmo-scene.is-centred .bmo-set .bmo-bubble { max-width: 74% !important; font-size: 13.5px; padding: 7px 10px; }
}
/* landing: the title in plain words, right under the logo */
.bmo-meaning { margin: -10px 0 0; text-align: center; font-family: var(--hand); font-weight: 800; font-size: 16px; color: var(--gold); letter-spacing: .2px; }
/* short phones: the news card tightens so "Start the quiz" stays on the first screen */
@media (max-height: 700px) {
  .bmo-scene.is-news { gap: 10px; padding-top: 14px; }
  .is-news .bmo-tv-bar { padding: 6px 14px; font-size: 15px; }
  .is-news .bmo-tv-text { padding: 8px 14px 10px; gap: 2px; }
  .is-news .bmo-tv-text .bmo-h2 { font-size: 21px; line-height: 1.15; }
  .is-news .bmo-tv-text .bmo-sub { font-size: 14px; line-height: 1.3; }
  .is-news .bmo-ticker { padding: 5px 0; font-size: 12.5px; }
  .bmo-scene.is-news > .bmo-h2 { font-size: 17px; }
}
@media (max-height: 600px) {
  .is-news .bmo-tv .bmo-heightwall { height: 84px; }
  .is-news .bmo-tv-text .bmo-sub { display: none; }   /* the crime is in the ticker card's story already; the button comes first */
}
/* creator's first questions: why they answer */
.bmo-hint { color: var(--gold); font-weight: 800; font-size: clamp(12.5px, 3.7vw, 14px); margin: -2px 0 12px; text-wrap: balance; line-height: 1.25; }   /* a long hint (German, Tamil) wraps to two even lines instead of being cut */
/* narrow phones: the corner picture shrinks and the question keeps a readable line length */
@media (max-width: 380px) {
  .bmo-casefile .bmo-q { padding-right: 70px; font-size: 22px; min-height: 108px; }
  .bmo-qhead, .bmo-qhead img { width: 86px; height: 86px; }
  .bmo-qhead { bottom: -10px; right: -6px; }
}
/* PAID / PERFECT 10 stamped on the score board: inside its corner, clear of the lines below */
.bmo-reveal-card .bmo-stamp { font-size: 17px; padding: 1px 9px; border-width: 3px; right: 10px !important; bottom: 10px !important; }
/* the step label keeps its place on the right whether or not there is a back button */
.bmo-top > .bmo-tag:only-child { margin-left: auto; }
/* the score in the end card's header: it takes the rest of the row beside the mini logo, right-aligned, so it stays one line */
.bmo-top > .bmo-logo + .bmo-tag { flex: 1 1 0; min-width: 0; text-align: end; letter-spacing: .5px; line-height: 1.15; }
/* the charge sheet: room under the police tape so it never crosses the first crime */
.bmo-sheetwrap > .bmo-casefile { padding-top: 46px; }
/* a centred title as the first thing on a screen keeps clear of the sound button (top right) */
.bmo-scene > .bmo-h1.bmo-center:first-child, .bmo-scene > .bmo-doodles + .bmo-h1.bmo-center { padding: 0 44px; }
/* the question card's label pill needs its own room under the stage */
.is-station .bmo-qcard { margin-top: 6px; }
/* narrow phones: the Officer's "Name, please" wraps beside him instead of running off the screen */
@media (max-width: 360px) { .bmo-sticker { white-space: normal; font-size: 19px; padding: 12px 16px; } }
/* short phones: a flatter question card and smaller pictures so both answers stay on the first screen */
@media (max-height: 700px) {
  .bmo-qcard { min-height: 0; padding: 17px 12px 10px 10px; gap: 10px; }
  .bmo-qcard-head { width: 52px; height: 52px; padding: 3px; border-radius: 16px; }
  .bmo-qcard-text { font-size: clamp(17px, 5vw, 20px); }
  .bmo-picks.is-cards.is-two .bmo-pick img:not(.bmo-art) { height: clamp(74px, 14dvh, 120px); }
  .bmo-picks.is-cards .bmo-pick > span:not(.bmo-badge):not(.bmo-stamp) { min-height: 2.3em; }
  .is-station:not(.is-film) .bmo-set { height: clamp(170px, 31dvh, 260px); }
}
/* narrow phones: no room for "NAME'S BAIL" beside the amount and its change — the amount speaks for itself (a "Q…"
   stub would not); the stamp fits inside a narrow answer card */
@media (max-width: 340px) {
  .bmo-meter.is-compact .bmo-meter-label { display: none; }
  .bmo-meter.is-compact .bmo-meter-top { justify-content: flex-start; }
  .bmo-picks.is-cards .bmo-pick .bmo-stamp { font-size: 17px; padding: 0 7px; border-width: 3px; letter-spacing: 1px; }
}

/* ══ 2026-10-13 premium pass (side-by-side with Don't Block Me) ══════════════════════════════════════════════════ */
/* 1. DBM's soft daylight sky on every screen; only the arrest and the "left in jail" ending keep the night */
html, body { background: #D6EEFF; }
.bmo-stage { color: var(--navy);
  background: radial-gradient(60% 9% at 18% 14%, rgba(255,255,255,.9) 0, rgba(255,255,255,0) 100%),
    radial-gradient(48% 7% at 84% 38%, rgba(255,255,255,.75) 0, rgba(255,255,255,0) 100%),
    radial-gradient(55% 8% at 22% 72%, rgba(255,255,255,.7) 0, rgba(255,255,255,0) 100%),
    linear-gradient(180deg, #BFE4FF 0%, #DDF1FF 45%, #F2F9FF 100%); }
.bmo-stage::before { opacity: 0; animation: none; }
.bmo-stage:has(> .bmo-scene.is-night) { color: #fff;
  background: radial-gradient(circle at 86% 4%, rgba(255,236,170,.22) 0, rgba(255,236,170,0) 26%),
    radial-gradient(ellipse at 50% -10%, #2C3B66 0%, var(--night2) 45%, var(--night) 100%); }
.bmo-stage:has(> .bmo-scene.is-night)::before { opacity: .75; animation: bmo-twinkle 4s ease-in-out infinite alternate; }
.bmo-scene:not(.is-night) { color: var(--navy); }
.bmo-scene:not(.is-night) .bmo-sub { color: var(--muted); }
.bmo-scene:not(.is-night) .bmo-small { color: #5E6B92; }
.bmo-scene:not(.is-night) .bmo-tag, .bmo-scene:not(.is-night) .bmo-meaning { color: #E0457B; }
.bmo-scene:not(.is-night) .bmo-name { color: #E0457B; }
.bmo-scene:not(.is-night) .bmo-link, .bmo-scene:not(.is-night) .bmo-skip-hint { color: var(--muted); }
.bmo-scene:not(.is-night) .bmo-hint { color: var(--orange-d); }
.bmo-scene:not(.is-night) .bmo-error { color: #D2334A; }
.bmo-scene:not(.is-night) .bmo-back { box-shadow: 0 3px 0 #B9D3EC; }
/* glass panels → white cards (the night ones were translucent white on navy) */
.bmo-scene:not(.is-night) .bmo-steps, .bmo-scene:not(.is-night) .bmo-cta {
  background: #fff; border: 3px solid #fff; box-shadow: 0 5px 0 #B9D3EC, 0 14px 26px rgba(40,90,150,.16); }
.bmo-scene:not(.is-night) .bmo-step span { color: var(--muted); }
.bmo-scene:not(.is-night) .bmo-step span strong, .bmo-scene:not(.is-night) .bmo-cta-title { color: var(--navy); }
.bmo-scene:not(.is-night) .bmo-rays { color: var(--orange); }
/* the question-time progress: DBM's white panel with soft tiles */
.bmo-scene:not(.is-night) .bmo-meter { background: #fff; color: var(--navy); border: 3px solid #fff; box-shadow: 0 5px 0 #B9D3EC, 0 12px 22px rgba(40,90,150,.14); }
.bmo-scene:not(.is-night) .bmo-meter-label { color: #E0457B; }
.bmo-scene:not(.is-night) .bmo-tiles i { background: #EAF2FC; color: #8A96B8; }
.bmo-scene:not(.is-night) .bmo-qcard { box-shadow: 0 5px 0 #B9D3EC, 0 14px 24px rgba(40,90,150,.16), inset 0 2px 0 #fff; }
.bmo-scene.is-station:not(.is-film) .bmo-set { box-shadow: 0 6px 0 rgba(31,43,77,.18), 0 16px 28px rgba(40,90,150,.18); }

/* 2. the ending film: DBM's island in the sky — the station diorama floats big in the daylight, the board hangs above */
.is-film .bmo-set { --lens-h: clamp(290px, 88vw, 360px); }
.is-film .bmo-lens { box-shadow: 0 8px 0 rgba(31,43,77,.22), 0 26px 40px rgba(40,90,150,.28); }
.is-film .bmo-reveal { background: none; }
.bmo-scene:not(.is-night) .bmo-reveal-card::before, .bmo-scene:not(.is-night) .bmo-reveal-card::after { background: linear-gradient(180deg, rgba(110,135,175,0), #6E87AF 70%); }
/* 3. speech bubbles as DBM draws them: big hand lettering, the line's key word in colour with a hand underline */
.bmo-bubble { font-size: 17px; line-height: 1.22; padding: 10px 16px 11px; }
.bmo-say-key { color: #E0457B; padding-bottom: .1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M3 6 C30 2 60 9 117 4' fill='none' stroke='%23FFB3CB' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .3em no-repeat; }
/* the ending film's lines are the story's big moments: bigger still, and wider so they read in two lines */
.is-film .bmo-set > .bmo-bubble { font-size: 19px; max-width: min(250px, 66%) !important; padding: 11px 18px 12px; }
/* the bigger diorama reaches up: its lines sit a little lower and the hung board a little smaller, so they never touch */
.is-film .bmo-set > .bmo-bubble { bottom: calc(var(--lens-h) - 84px); }
.bmo-reveal.is-hung .bmo-reveal-card { scale: .74; }
/* the news card keeps its own dark panel in daylight: its lines stay light */
.bmo-scene:not(.is-night) .bmo-tv-text .bmo-sub { color: var(--soft); }

/* ══ motion pass (DBM's own motion: bounceIn 35% → 112% → 96% → 100%, and a scene that floats) ══════════════════ */
@keyframes bmo-bounce-in { 0% { opacity: 0; transform: scale(.35); } 60% { opacity: 1; transform: scale(1.12); } 82% { transform: scale(.96); } 100% { opacity: 1; transform: none; } }
/* a line grows out of the speaker's mouth: from its tail, with DBM's bounce */
.bmo-bubble { animation: bmo-bounce-in .5s cubic-bezier(.34,1.56,.64,1) both; transform-origin: calc(var(--tail-x, 16px) + 8px) 110%; }
.bmo-bubble.is-right:not(.is-aimed) { transform-origin: calc(100% - 24px) 110%; }
.bmo-bubble.tail-r { transform-origin: 105% calc(var(--tail-y, 14px) + 30px); } .bmo-bubble.tail-l { transform-origin: -5% calc(var(--tail-y, 14px) + 30px); }
.bmo-char.is-pop { animation: bmo-bounce-in .6s cubic-bezier(.34,1.56,.64,1) both, bmo-breathe 3s ease-in-out var(--breath, 0s) infinite; }
.bmo-fx { animation-timing-function: cubic-bezier(.34,1.56,.64,1); }
/* the stage floats like DBM's island (2.9 s, alternate): the whole diorama breathes, never still */
@keyframes bmo-scene-float { from { transform: translateY(0) scale(1); } to { transform: translateY(-5px) scale(1.015); } }
.is-station .bmo-set, .bmo-scene.is-centred .bmo-set { animation: bmo-scene-float 2.9s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .is-station .bmo-set, .bmo-scene.is-centred .bmo-set { animation: none; } }
/* the perfect-10 title: gold sticker lettering with the logo's ink outline (gold alone vanishes on the daylight sky) */
.bmo-ending-title.is-gold { color: #FFC21A; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }

/* ══ deep visual QA fixes (2026-10-13) ══════════════════════════════════════════════════════════════════════════ */
/* every top row keeps clear of the sound button (the creator's question screens wrap theirs in a column) */
.bmo-top { padding-right: 46px; }
/* the loading cover is a screen of its own: the sky (or the night), never the last scene showing through it */
.bmo-loader { background: linear-gradient(180deg, #BFE4FF 0%, #DDF1FF 45%, #F2F9FF 100%); }
.bmo-stage:has(> .bmo-scene.is-night) .bmo-loader { background: radial-gradient(ellipse at 50% -10%, #2C3B66 0%, var(--night2) 45%, var(--night) 100%); }
/* a line pops once, gently (DBM's keyframes with an easing that doesn't overshoot again on top of them) */
.bmo-bubble { animation: bmo-bounce-in .42s cubic-bezier(.25,.8,.35,1) both; }
@keyframes bmo-bounce-in { 0% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.06); } 82% { transform: scale(.98); } 100% { opacity: 1; transform: none; } }
.bmo-char.is-pop { animation: bmo-bounce-in .5s cubic-bezier(.25,.8,.35,1) both, bmo-breathe 3s ease-in-out var(--breath, 0s) infinite; }
/* the arrest stage is wide: the charge reads in 3–4 lines, not a narrow column of 6 */
.bmo-scene.is-centred .bmo-set .bmo-bubble { max-width: min(250px, 66%) !important; }
/* the plea on the news picture sits beside the one in jail: tall enough for its tail to point at them from the side */
/* centred as one line of text (flex made the highlighted word its own column beside the rest) */
.bmo-tv .bmo-bubble { min-height: 66px; align-content: center; }
/* the ending film sits in the middle of the screen (board + diorama as one group): no empty band of sky under it */
.is-film .bmo-set { margin-top: max(0px, calc((100dvh - 64px - var(--lens-h) - 230px) / 2)); }
/* the creator's progress bar ends before the sound button too */
.bmo-scene > div > .bmo-meter-bar { margin-right: 46px; }
/* the invite after "left in jail": a rainy blue window instead of the party colours */
.bmo-invite-art.is-sad { background: linear-gradient(180deg, #5C6F9E 0%, #8FA3CC 100%); }
.bmo-invite-art.is-sad::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(105deg, transparent 0 16px, rgba(200,225,255,.4) 16px 18px); animation: bmo-rain .5s linear infinite; }

/* ══ owner feedback 2026-10-14 ════════════════════════════════════════════════════════════════════════════════ */
/* answer states: the card tints green / red and a small solid ✓ / ✕ sits in the card's top-right corner, in the
   tinted margin above the photo, so the answer's picture stays fully visible (owner 2026-10-14: nothing in the
   middle of the picture) and long two-line labels are never covered */
.bmo-picks.is-cards .bmo-pick .bmo-badge { left: auto; top: 5px; bottom: auto; right: 5px; translate: none; width: 28px; height: 28px; font-size: 15px;
  color: #fff; border: 2px solid #fff; box-shadow: 0 2px 0 rgba(12,16,38,.3), 0 4px 10px rgba(0,0,0,.18); z-index: 3; }
.bmo-picks.is-cards .bmo-pick.is-right .bmo-badge { background: #22C55E !important; } .bmo-picks.is-cards .bmo-pick.is-wrong .bmo-badge { background: #F43F5E !important; }
.bmo-picks.is-cards .bmo-pick.is-right { background: #DDF7E6 !important; border-color: #22C55E; box-shadow: 0 5px 0 #16A34A; }
.bmo-picks.is-cards .bmo-pick.is-wrong { background: #FFE4E8 !important; border-color: #F43F5E; box-shadow: 0 5px 0 #BE123C; }
.bmo-picks.is-cards .bmo-pick.is-wrong img:not(.bmo-art) { box-shadow: inset 0 0 0 999px rgba(244,63,94,.32); filter: none; }
/* DBM's sharing: one big SHARE NOW button (the phone's share sheet), a small line under it */
.bmo-share-one { display: flex; flex-direction: column; gap: 10px; }
.bmo-share-now { min-height: 64px; font-size: 24px; letter-spacing: .5px; gap: 12px; }
.bmo-share-now .bmo-share-ico { width: 26px; height: 26px; }
.bmo-scene:not(.is-night) .bmo-share-one .bmo-small { color: var(--navy); font-family: var(--hand); font-size: 15px; }
/* the scoreboard, DBM's way: a ribbon title between trophies, a count pill, rows with a face, a rank badge, a big score
   and a progress bar */
.bmo-wall { display: flex; flex-direction: column; gap: 14px; }
.bmo-board-head { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 6px 0 4px; }
.bmo-board-ribbon { display: flex; align-items: center; gap: 10px; padding: 10px 22px; border-radius: 18px; rotate: -2deg;
  background: linear-gradient(180deg, #FFE9A3 0%, #FFD86B 100%); border: 3px solid var(--ink); box-shadow: 0 5px 0 rgba(31,43,77,.25);
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 26px; color: var(--navy); }
.bmo-board-ribbon b { font-size: 26px; }
.bmo-board-count { padding: 4px 14px; border-radius: 999px; background: #fff; color: var(--navy); font-weight: 800; font-size: 14px; box-shadow: 0 3px 0 #B9D3EC; }
.is-night .bmo-board-count { box-shadow: none; }
.bmo-wall-row { position: relative; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 22px; border: 3px solid #fff; background: #fff;
  box-shadow: 0 5px 0 #B9D3EC, 0 12px 22px rgba(40,90,150,.14); }
.bmo-wall-rank { position: absolute; left: -8px; top: -10px; width: 28px; height: 28px; border-radius: 50%; font-size: 14px; z-index: 2;
  background: var(--navy); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.bmo-wall-rank.is-top { background: #FFC21A; color: var(--ink); }
.bmo-wall-face { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #FFE3EC; border: 3px solid #fff; box-shadow: 0 0 0 2px #FFD0DE; }
.bmo-wall-face img { width: 100%; height: 130%; object-fit: cover; object-position: 50% 0; display: block; }
.bmo-wall-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.bmo-wall-line { display: flex; align-items: baseline; gap: 8px; }
.bmo-wall-line .bmo-wall-name { flex: 1 1 auto; min-width: 0; font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmo-wall-score { margin-left: 0; font-size: 15px; color: #6E7BA0; } .bmo-wall-score b { font-size: 26px; color: #E0457B; }
.bmo-wall-bar { height: 8px; border-radius: 999px; background: #FFE3EC; overflow: hidden; }
.bmo-wall-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #FF7AA8, #E0457B); }
.bmo-wall-row.is-cellmates .bmo-wall-score b { color: #D99A00; } .bmo-wall-row.is-cellmates .bmo-wall-bar i { background: linear-gradient(90deg, #FFD86B, #F5A400); }
.bmo-wall-row.is-left .bmo-wall-score b { color: #6E7BA0; } .bmo-wall-row.is-left .bmo-wall-bar i { background: #A9B6D8; }
.bmo-wall-main .bmo-chip { align-self: flex-start; margin-top: 0; }
.bmo-wall-row.is-you { border-color: #158CFF; background: #F2F8FF; }
.bmo-you { left: auto; right: 14px; }
/* the cloudz.fun badge under the logo (DBM's logo carries the site the same way) */
.bmo-logo-site { direction: ltr; unicode-bidi: isolate; position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; text-decoration: none;
  font-family: var(--hand); font-weight: 800; font-size: 20px; color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.bmo-logo-site span { color: var(--pink); } .bmo-logo-site i { font-style: normal; color: #FFC21A; -webkit-text-stroke: 3px var(--ink); font-size: 14px; }
/* the small logo in a screen's corner */
.bmo-logo.is-mini { zoom: .36; padding: 0; text-align: left; flex: none; }
.bmo-logo.is-mini .bmo-logo-peek { display: none; }
.bmo-logo.is-mini .bmo-logo-site { font-size: 34px; }
/* landing: soft daylight shadows that never run into the words under them, and room between them */
.bmo-scene:not(.is-night) .bmo-hero { box-shadow: 0 6px 0 rgba(31,43,77,.22), 0 14px 22px rgba(40,90,150,.18); margin-bottom: 8px; }
.bmo-scene:not(.is-night) .bmo-hero + .bmo-sub { color: var(--navy); margin-top: 6px; }
.bmo-scene:not(.is-night) .bmo-btn.is-tada + .bmo-small { color: var(--navy); margin-top: 6px; }
/* the word on the hanging board: optically centred (letter-spacing adds space after the last letter) */
.bmo-hero-sign > span { letter-spacing: 3px; text-indent: 3px; top: 61%; }
/* the game's own confirm box (create another / delete): the invite card with the Officer and two buttons */
.bmo-ask-card { text-align: center; padding-bottom: 20px; }
.bmo-ask-art { display: flex; justify-content: center; margin: -6px 0 4px; }
.bmo-ask-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.bmo-ask-row .bmo-btn { min-height: 54px; font-size: 18px; padding: 0 10px; }
.bmo-btn.is-danger { background: linear-gradient(180deg, #FF7A8A 0%, #F43F5E 60%, #E11D48 100%); box-shadow: 0 6px 0 #9F1239, 0 12px 22px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.4); }
/* LOCKED UP: a real rubber stamp, centred across the charge sheet (double ruled border, red ink, a little see-through) */
.bmo-record .bmo-stamp { left: 50% !important; top: 54% !important; right: auto !important; bottom: auto !important; translate: -50% -50%;
  font-size: 30px; line-height: 1.1; padding: 4px 20px; letter-spacing: 3px; white-space: nowrap; border-radius: 10px;
  color: #D7263D; border: 4px solid #D7263D; background: rgba(255,246,229,.82); box-shadow: inset 0 0 0 3px #FFF6E5, inset 0 0 0 5px #D7263D;
  text-shadow: 0 0 1px rgba(215,38,61,.6); opacity: .95; }
.bmo-record .bmo-record-crime { padding-right: 0; }
.bmo-then { margin-top: -4px; }
.bmo-scene:not(.is-night) .bmo-then { color: var(--navy); }
/* LOCKED UP, final: a fitted rubber stamp (the frame hugs the words, text centred; letter-spacing evened out on the
   left) in its own reserved space at the sheet's bottom-right, so the name and the charge stay readable under it */
.bmo-record { padding-bottom: 66px; }
.bmo-record .bmo-stamp { position: absolute !important; left: auto !important; top: auto !important; right: 18px !important; bottom: 14px !important; translate: none;
  width: max-content; text-align: center; font-size: 23px; line-height: 1; padding: 8px 15px 7px 18px; letter-spacing: 3px; border-radius: 9px; }
.bmo-logo.is-mini { zoom: .46; }
/* the cat and the bear peek OVER the title (owner 2026-10-14: on phones their faces hid behind "bail" / "out?"): more
   room on top, both raised so the eyes clear the lettering; the bear tucked in a little, off the sound button */
.bmo-logo:not(.is-mini) { padding-top: 32px; }
.bmo-logo:not(.is-mini) .bmo-logo-peek { top: -8px; width: 108px; }   /* the whole head fits: no straight cut down a cheek or an ear */
.bmo-logo:not(.is-mini) .bmo-logo-peek.is-left { left: 0; } .bmo-logo:not(.is-mini) .bmo-logo-peek.is-right { right: 11px; rotate: 9deg; }
.is-news .bmo-logo:not(.is-mini) { padding-top: 32px; }   /* same lift as the landing: the faces clear the smaller news title too */
/* Tamil letters run wider than any other script here: the news card's lines step down so the name field and its button
   stay on the first screen */
:lang(ta) .is-news .bmo-tv-text .bmo-h2 { font-size: 19px; line-height: 1.2; }
:lang(ta) .is-news .bmo-tv-text .bmo-sub { font-size: 13px; }
:lang(ta) .bmo-scene.is-news > .bmo-h2 { font-size: 17px; line-height: 1.3; }
/* a common small Android (360×740) and similar: the whole news card, the name field and its button fit on the first screen */
@media (min-height: 701px) and (max-height: 780px) {
  .is-news .bmo-tv .bmo-heightwall { height: 122px; }
  .is-news .bmo-logo:not(.is-mini) { padding-top: 22px; }
  .bmo-scene.is-news { gap: 10px; }
  .is-news .bmo-tv-text .bmo-h2 { font-size: 22px; line-height: 1.12; }
  .bmo-scene.is-news > .bmo-h2 { font-size: 20px; line-height: 1.15; }   /* German / Tamil lines run long */
}
/* the scoreboard's room is kept while it loads, so the links under it never jump when it arrives */
.bmo-wall:empty { min-height: 104px; }
/* under the game, below its first screen (as Don't Block Me's footer): the ad, then the site's "Play something fun" row */
.bmo-footer { max-width: 460px; margin: 0 auto; padding: 24px 0 12px; color: var(--navy); }
.bmo-footer-ad { margin: 0 12px 8px; min-height: 100px; }
/* the landing's words written by the server (page.blade.php), under the loader until the game draws its scene */
.bmo-ssr { padding: 24px 20px; } .bmo-ssr .bmo-steps { margin: 0; list-style: none; }
/* Don't Block Me's small ad (300×100) under the share buttons of the share screen and the creator's wall */
.bmo-top-ad { flex: none; display: block; min-height: 100px; }   /* a plain block, like the footer ad's: AdSense's own full-width enlargement then lines up with the screen edges */
/* the share block, as Don't Block Me's share screen: link + Copy, the big app button, the app tiles */
.bmo-linkrow { display: flex; align-items: center; gap: 8px; min-width: 0; padding-block: 6px; padding-inline: 12px 6px; border-radius: 18px; background: #fff;
  border: 2px solid var(--line); box-shadow: 0 3px 0 rgba(31,43,77,.08); }
.bmo-linkrow-ico { flex: none; display: flex; color: #4C8DF6; } .bmo-linkrow-ico .bmo-share-ico, .bmo-linkrow-ico svg { width: 20px; height: 20px; }
.bmo-linkrow-url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate;
  font: 700 14px/1.2 'Nunito', sans-serif; color: var(--navy); }
.bmo-copy { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 12px;
  background: #FFE7A0; color: var(--navy); font: 800 15px/1 'Baloo 2', sans-serif; text-transform: capitalize; cursor: pointer; }
.bmo-copy .bmo-share-ico, .bmo-copy svg { width: 16px; height: 16px; } .bmo-copy.is-done { background: #C8F1D3; }
.bmo-share-main { min-height: 60px; font-size: clamp(16px, 5vw, 21px); gap: 10px; text-shadow: none; }   /* one line on a 320 px phone too */
.bmo-share-main .bmo-share-ico, .bmo-share-main svg { width: 28px; height: 28px; }
.bmo-share-main.is-wa { background: #1FAF5A; box-shadow: 0 5px 0 #157A3F; }
.bmo-share-main.is-line { background: #06C755; box-shadow: 0 5px 0 #048A3B; }
.bmo-share-main.is-kakao { background: #FEE500; color: #191919; box-shadow: 0 5px 0 #C9B500; }
.bmo-sharetiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bmo-sharetile { display: flex; align-items: center; gap: clamp(6px, 2.2vw, 10px); min-width: 0; min-height: 54px; padding: 8px clamp(7px, 2.4vw, 10px); border: 0; border-radius: 16px;
  background: #fff; color: var(--navy); font: 800 clamp(12.5px, 3.8vw, 15px)/1.1 'Nunito', sans-serif; text-align: start; text-decoration: none; cursor: pointer;
  box-shadow: 0 3px 0 var(--line), 0 6px 14px rgba(31,43,77,.08); -webkit-tap-highlight-color: transparent; }
.bmo-sharetile:active { translate: 0 2px; box-shadow: 0 1px 0 var(--line); }
.bmo-sharetile > span:last-child { min-width: 0; overflow-wrap: break-word; }   /* a long name (Ứng dụng khác) wraps between words, never cut */
.bmo-sharetile-badge { flex: none; display: flex; align-items: center; justify-content: center; width: clamp(28px, 9vw, 36px); height: clamp(28px, 9vw, 36px); border-radius: 50%; color: #fff; }
.bmo-sharetile-badge svg { width: 20px; height: 20px; }
.bmo-sharetile.is-ig .bmo-sharetile-badge { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.bmo-sharetile.is-sc .bmo-sharetile-badge { background: #FFFC00; color: #111; }
.bmo-sharetile.is-fb .bmo-sharetile-badge { background: #1877F2; }
.bmo-sharetile.is-ms .bmo-sharetile-badge { background: linear-gradient(45deg, #0695FF, #A334FA 60%, #FF6968); }
.bmo-sharetile.is-tg .bmo-sharetile-badge { background: #2AABEE; }
.bmo-sharetile.is-wa .bmo-sharetile-badge { background: #1FAF5A; }
.bmo-sharetile.is-other .bmo-sharetile-badge { background: #E8EEF7; color: #4C8DF6; }
.bmo-sharetile.is-other .bmo-sharetile-badge svg { width: 16px; height: 16px; }
.bmo-sharetile.is-line .bmo-sharetile-badge { background: #06C755; }
.bmo-share-main.is-long { font-size: clamp(14px, 4.3vw, 17px); } .bmo-share-main > span { white-space: nowrap; }
@media (max-width: 340px) { .bmo-sharetile { font-size: 11.5px; } }   /* the smallest phones: "приложения" stays one word */
/* the creator's wall: a friend's row opens their answers */
.bmo-wall-row.is-open { cursor: pointer; transition: transform .12s; }
.bmo-wall-row.is-open:active { transform: scale(.98); }
.bmo-wall-row.is-open:focus-visible { outline: 3px solid #158CFF; outline-offset: 2px; }
.bmo-wall-see { align-self: flex-start; font-size: 13px; font-weight: 800; color: #158CFF; }
/* a friend's answers: head card, the Officer's remark, one card per question */
.bmo-friend-answers { display: flex; flex-direction: column; gap: 14px; }
.bmo-friend-answers-head { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 22px; background: #fff; color: var(--navy);
  border: 3px solid #fff; box-shadow: 0 5px 0 #B9D3EC, 0 12px 22px rgba(40,90,150,.14); }
.bmo-friend-answers-head .bmo-wall-face { width: 64px; height: 64px; }
.bmo-friend-answers-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.bmo-friend-answers-title { margin: 0; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 22px; line-height: 1.12; overflow-wrap: anywhere; }
.bmo-friend-answers-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.bmo-friend-answers-line .bmo-chip { margin-top: 0; }
.bmo-friend-answers-head.is-cellmates .bmo-wall-score b { color: #D99A00; } .bmo-friend-answers-head.is-left .bmo-wall-score b { color: #6E7BA0; }
.bmo-friend-answers-officer { display: flex; align-items: flex-end; gap: 6px; }
.bmo-friend-answers-officer > .bmo-char, .bmo-friend-answers-officer > .bmo-art, .bmo-friend-answers-officer > span:first-child { flex: none; }
.bmo-friend-answers-say { position: relative; flex: 1 1 auto; margin-bottom: 28px; background: #fff; color: var(--navy); border: 3px solid var(--ink); border-radius: 18px;
  padding: 10px 14px; font-family: var(--hand); font-weight: 700; font-size: 16px; line-height: 1.3; }
.bmo-friend-answers-say::before { content: ''; position: absolute; inset-inline-start: -11px; bottom: 14px; width: 16px; height: 16px; background: #fff;
  border-inline-start: 3px solid var(--ink); border-bottom: 3px solid var(--ink); rotate: 45deg; }
[dir="rtl"] .bmo-friend-answers-say::before { rotate: -45deg; }
.bmo-friend-answers-list { display: flex; flex-direction: column; gap: 12px; }
.bmo-friend-answers-card { background: #fff; color: var(--navy); border-radius: 20px; padding: 12px; border: 3px solid #fff;
  box-shadow: 0 4px 0 #B9D3EC; border-inline-start: 7px solid #22C55E; }
.bmo-friend-answers-card.is-wrong { border-inline-start-color: #F43F5E; }
.bmo-friend-answers-q { display: flex; gap: 10px; align-items: flex-start; font-weight: 800; font-size: 16px; line-height: 1.3; margin-bottom: 10px; }
.bmo-friend-answers-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 13px;
  display: flex; align-items: center; justify-content: center; }
.bmo-friend-answers-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bmo-friend-answers-picks.is-one { grid-template-columns: minmax(0, 60%); justify-content: center; }
.bmo-friend-answers-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0;
  padding: 6px 6px 8px; border-radius: 16px; border: 3px solid #22C55E; background: #F0FCF4; }
.bmo-friend-answers-pick.is-wrong { border-color: #F43F5E; background: #FFF1F3; }
.bmo-friend-answers-pick img { width: 100%; height: 84px; object-fit: contain; border-radius: 11px; background: #fff; }
.bmo-friend-answers-pick .bmo-badge { position: absolute; top: 4px; inset-inline-end: 4px; width: 26px; height: 26px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 14px; background: #22C55E; border: 2px solid #fff; }
.bmo-friend-answers-pick.is-wrong .bmo-badge { background: #F43F5E; }
.bmo-friend-answers-text { max-width: 100%; font-weight: 800; font-size: 14px; line-height: 1.2; }
.bmo-friend-answers-by { max-width: 100%; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: #fff; color: #6E7BA0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 340px) { .bmo-friend-answers-pick img { height: 68px; } .bmo-friend-answers-title { font-size: 19px; } .bmo-friend-answers-q { font-size: 15px; }
  .bmo-friend-answers-card { padding: 10px 8px; } .bmo-friend-answers-picks { gap: 6px; } .bmo-friend-answers-pick { padding: 5px 3px 7px; } .bmo-friend-answers-text { font-size: 12.5px; }
  .bmo-friend-answers-say { font-size: 14px; padding: 8px 10px; } }
/* a long name (up to 15 letters) never pushes a bubble or a question past its box on a small phone: the box keeps its
   width and the name may break at its own space ("QA / Zoyaaaaaaaaa"), never inside a word */
.bmo-friend-answers-say, .bmo-friend-answers-q > span:last-child, .bmo-friend-answers-title { min-width: 0; }
.bmo-friend-answers .bmo-name { display: inline; white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bmo-friend-answers span[style*="nowrap"] { white-space: normal !important; }   /* "Zoya-এর" may wrap only after its hyphen */
/* the scoreboard ribbon on the smallest phones: a long word ("ஸ்கோர்போர்டு") stays inside the screen */
@media (max-width: 340px) { .bmo-board-ribbon { max-width: 100%; gap: 6px; padding: 9px 12px; font-size: 21px; } .bmo-board-ribbon b { font-size: 20px; } }