/* ══════════════════════════════════════════════════════════════════════
   Drama app — phone-first, one column everywhere.
   On a desktop the same column (max 480px) is centered on a dark backdrop;
   there is no side chat pane. Comments in English by project rule.
   ══════════════════════════════════════════════════════════════════════ */
:root {
    --dr-accent: #f0a6c8; --dr-accent-2: #7cd4ff; --dr-ink: #f4f1f7; --dr-dim: rgba(244,241,247,.62);
    --dr-glass: rgba(255,255,255,.06); --dr-line: rgba(255,255,255,.1); --dr-bg: #0c0a12; --dr-col: 480px;
}
body { background: var(--dr-bg); color: var(--dr-ink); }

/* ── Home ───────────────────────────────────────────────────────────── */
/* The home page scrolls itself: base.css sets body overflow:hidden (werewolf's app feel). */
.dr-home { --dr-top: calc(env(safe-area-inset-top) + 12px); position: fixed; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--dr-top) 16px 48px; }
.dr-home > * { max-width: var(--dr-col); margin-left: auto; margin-right: auto; }
.dr-topbar { display: flex; justify-content: space-between; align-items: center; padding: 2px 0 8px; }   /* the profile page's own top row */
/* ── Home header: brand left, the person's tools right, one row ── */
/* The header stays put while the posters scroll under it: sticky at the top of the scrolling home, painted on the page
   ground. A sticky child cannot enter its parent's padding, so the lobby has no top padding of its own: the header
   carries the safe-area + gap itself and sits flush against the top, nothing shows through above it */
#lobbyPanel.dr-home { padding-top: 0; }
.dr-header { position: sticky; top: 0; z-index: 20; background: var(--dr-bg); padding: calc(var(--dr-top) + 4px) 0 12px; margin-bottom: 14px; border-bottom: 1px solid var(--dr-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dr-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--dr-ink); text-decoration: none; }
.dr-brand-icon { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.dr-brand-name { font-size: 1.15rem; font-weight: 800; letter-spacing: .04em; line-height: 1; }
.dr-brand-tag { display: none; color: var(--dr-dim); font-size: .8rem; padding-left: 12px; border-left: 1px solid var(--dr-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-header-tools { display: flex; align-items: center; gap: 8px; flex: none; }
/* every tool is the same 34px pill: credits, the person */
.dr-credits, .dr-me-btn, .header-login-btn { height: 34px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--dr-line); background: var(--dr-glass); color: var(--dr-ink); border-radius: 999px; font-size: .84rem; cursor: pointer; }
.dr-credits { padding: 0 4px 0 12px; }
.dr-credits > i { color: #ffcf6b; font-size: .8rem; }
.dr-credits b { font-variant-numeric: tabular-nums; font-weight: 700; }
.dr-credits-buy { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--dr-accent); color: #2a1220; font-size: .68rem; margin-left: 2px; }
.dr-credits.is-guest b { display: none; }
.header-login-btn { padding: 0 14px; font-weight: 600; }
/* Avatar menu */
.dr-me { position: relative; }
.dr-me-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: #17141f; border: 1px solid var(--dr-line); border-radius: 14px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.45); z-index: 40; }
.dr-me-menu[hidden] { display: none; }
.dr-me-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--dr-line); margin-bottom: 6px; }
.dr-me-menu-head img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.dr-me-menu-head b { display: block; font-size: .92rem; }
.dr-me-menu-head span { display: block; font-size: .76rem; color: var(--dr-dim); }
.dr-me-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 10px; border: 0; background: transparent; color: var(--dr-ink); font: inherit; font-size: .9rem; text-align: left; border-radius: 10px; cursor: pointer; }
.dr-me-item i { width: 18px; text-align: center; color: var(--dr-dim); }
.dr-me-item:hover { background: rgba(255,255,255,.06); }
.dr-me-item.is-accent { color: var(--dr-accent); }
.dr-me-item.is-accent i { color: var(--dr-accent); }
@media (max-width: 560px) {
    .dr-me-menu { position: fixed; left: 0; right: 0; top: auto; bottom: 0; min-width: 0; border-radius: 18px 18px 0 0; padding: 8px 12px calc(env(safe-area-inset-bottom) + 12px); }
    .dr-me-item { padding: 13px 10px; font-size: .95rem; }
}
@media (max-width: 560px) {
    .dr-me-btn { padding: 0; width: 34px; justify-content: center; }
    .dr-me-name { display: none; }
}
.dr-section { margin-top: 18px; }
.dr-section-title { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dr-dim); margin-bottom: 8px; }
.dr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-chip { border: 1px solid var(--dr-line); background: var(--dr-glass); color: var(--dr-ink); border-radius: 999px; padding: 7px 14px; font-size: .88rem; cursor: pointer; }
.dr-chip.is-active { border-color: var(--dr-accent); background: rgba(240,166,200,.16); color: var(--dr-accent); }
.dr-hint { font-size: .8rem; color: var(--dr-dim); margin-top: 6px; min-height: 1.2em; white-space: pre-line; }
.dr-brief { width: 100%; margin-top: 10px; background: var(--dr-glass); border: 1px solid var(--dr-line); color: var(--dr-ink); border-radius: 12px; padding: 10px 12px; font-size: .92rem; resize: vertical; }
.dr-idea { font-size: .8rem; padding: 5px 11px; opacity: .85; }
.dr-search { width: 100%; margin: 6px 0 10px; background: var(--dr-glass); border: 1px solid var(--dr-line); color: var(--dr-ink); border-radius: 10px; padding: 9px 12px; font-size: .9rem; }
.dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.dr-card { position: relative; background: var(--dr-glass); border: 1px solid var(--dr-line); border-radius: 14px; padding: 8px 6px; text-align: center; cursor: pointer; transition: transform .12s, border-color .12s; }
.dr-card:active { transform: scale(.97); }
.dr-card.is-picked { border-color: var(--dr-accent); box-shadow: 0 0 0 2px rgba(240,166,200,.25); }
.dr-card-avatar { width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%; overflow: hidden; }
.dr-avatar-img, .dr-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dr-card-name { font-size: .86rem; font-weight: 600; }
.dr-card-desc { font-size: .7rem; color: var(--dr-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-card.is-offera { opacity: .45; }
.dr-card.is-offera .dr-card-tag { background: rgba(255,255,255,.18); color: var(--dr-ink); }
.dr-card-tag { position: absolute; top: 6px; left: 6px; font-size: .68rem; padding: 2px 7px; border-radius: 999px; background: var(--dr-accent); color: #2a1220; font-weight: 700; }
.dr-memory { display: none; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(124,212,255,.08); border: 1px solid rgba(124,212,255,.25); font-size: .84rem; }
.dr-memory-hook { margin-top: 4px; font-size: .8rem; color: var(--dr-ink); opacity: .85; font-style: italic; }
.dr-bottom { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(env(safe-area-inset-bottom) + 12px); background: linear-gradient(180deg, rgba(12,10,18,0), rgba(12,10,18,.96) 40%); }
.dr-bottom-inner { max-width: var(--dr-col); margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.dr-picked { font-size: .84rem; color: var(--dr-dim); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one line: four roles must not spill over the page */
.dr-start { width: 100%; padding: 14px; border: 0; border-radius: 14px; font-size: 1.05rem; font-weight: 700; color: #2a1220; background: linear-gradient(90deg, var(--dr-accent), #ffd2b3); cursor: pointer; }
.dr-start:disabled { opacity: .45; cursor: default; }

/* ── Room: one phone column ─────────────────────────────────────────── */
body.drama-room #chatContainer {
    position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--dr-col);
    height: 100dvh; height: var(--vv-h, 100dvh); display: flex; flex-direction: column; background: var(--dr-bg);
    backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; border: 0; overflow: hidden; overflow: clip;
}
/* The shell never scrolls: only the log, the panels and the menus do. overflow:hidden still lets focus() and
   scrollIntoView() scroll a box, and nothing can scroll it back — the whole room stayed shifted up with the log out
   of sight (2026-10-10). clip (iOS 16+) refuses the scroll; drama_overlay.js resets it on older WebKit. */
/* Anything from the shared chat template that is not the stage or the dialogue column takes no space */
body.drama-room #chatContainer > *:not(.drama-stage):not(.drama-chat) { display: none !important; }
/* Desktop: the column floats on a darker page with faint side lines */
@media (min-width: 600px) {
    body.drama-room { background: #06050a; }
    body.drama-room #chatContainer { border-left: 1px solid var(--dr-line); border-right: 1px solid var(--dr-line); }
}

/* Stage: top bar, frame, cast, actions */
.drama-stage { position: relative; flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); }
/* A card in the stage (role card, briefing, ending) used to take its height from the log: the stage never shrank, so
   with the keyboard up the log came down to one line or none. Now the picture gives way first (down to a strip), the
   cards scroll inside themselves, and the log keeps a floor (#messagesContainer min-height below). */
body.drama-room .drama-screen { flex-shrink: 1; min-height: 72px; }
body.drama-room .drama-brief, body.drama-room .drama-ending { max-height: 38vh; overflow-y: auto; }
.drama-topbar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 6px; }
.drama-back, .drama-menu-btn { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.drama-title { flex: 1; min-width: 0; font-weight: 700; font-size: .95rem; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drama-title::after { content: attr(data-turn); font-size: .72rem; opacity: .6; font-weight: 400; }

/* The frame: full width, capped at ~38% of the screen height; the picture is shown whole over a blurred copy of
   itself, so a portrait frame on a phone and a widescreen frame on a desktop both fit without cropping faces */
.drama-screen { position: relative; margin: 0 auto; width: calc(100% - 20px); height: min(38vh, 75vw); border-radius: 14px; background: #000; overflow: hidden; }
.drama-frame-img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; overflow: hidden; }
.drama-frame-img::before { content: ''; position: absolute; inset: -32px; background: var(--img) center/cover no-repeat; filter: blur(24px) brightness(.5); }
.drama-frame-img::after { content: ''; position: absolute; inset: 0; background: var(--img) center/contain no-repeat; }
.drama-frame-img.is-on { opacity: 1; }
/* The camera never sits still: each frame gets one slow move (zoom in, drift, zoom out) over 18s, held at the end */
.drama-frame-img.kb-1::after { animation: dr-kb-in 18s ease-out forwards; }
.drama-frame-img.kb-2::after { animation: dr-kb-drift 18s ease-in-out forwards; }
.drama-frame-img.kb-3::after { animation: dr-kb-out 18s ease-out forwards; }
@keyframes dr-kb-in { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes dr-kb-drift { from { transform: scale(1.1) translateX(2.5%); } to { transform: scale(1.1) translateX(-2.5%); } }
@keyframes dr-kb-out { from { transform: scale(1.14); } to { transform: scale(1.02); } }
/* Cinema mode during the cold open: black bars slide in, the title card fades through, captions sit on the bottom bar */
.drama-screen .drama-title-card { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 8%;
    font-size: clamp(1.3rem, 4vw, 2.2rem); font-weight: 800; letter-spacing: .14em; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.8); opacity: 0; pointer-events: none; z-index: 3; }
.drama-screen .drama-title-card.is-on { animation: dr-title 4.5s ease-in-out forwards; }
@keyframes dr-title { 0% { opacity: 0; letter-spacing: .3em; } 18% { opacity: 1; letter-spacing: .14em; } 78% { opacity: 1; } 100% { opacity: 0; } }
.drama-screen .drama-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px; font-size: .9rem; line-height: 1.45; color: #fff; text-align: center;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.75)); text-shadow: 0 1px 8px rgba(0,0,0,.9); opacity: 0; transition: opacity .6s; pointer-events: none; z-index: 2; }
.drama-screen .drama-caption.is-on { opacity: 1; }
/* The clip sits over the still (same contain fit over the blurred backdrop) and fades in once it can play */
.drama-screen .drama-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .9s ease; z-index: 1; pointer-events: none; }
.drama-screen .drama-clip.is-on { opacity: 1; }
.drama-screen.is-cinema { border-radius: 6px; }
.drama-screen.is-cinema::after { box-shadow: inset 0 0 50px rgba(0,0,0,.4), inset 0 7% 0 0 #000, inset 0 -7% 0 0 #000; transition: box-shadow .8s ease; }
@media (prefers-reduced-motion: reduce) {
    .drama-frame-img.kb-1::after, .drama-frame-img.kb-2::after, .drama-frame-img.kb-3::after { animation: none; }
    .drama-screen .drama-title-card.is-on { animation-duration: .01s; opacity: 0; }
}
.drama-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 50px rgba(0,0,0,.4); transition: box-shadow .8s ease; z-index: 1; }
.drama-screen-idle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--dr-dim); font-size: .88rem; letter-spacing: .08em; }

/* Painting in progress: a thin animated bar on the frame's bottom edge; a brief flash when the new image lands */
.drama-screen-pending { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.drama-screen-pending-bar { position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--dr-accent), transparent); animation: dr-sweep 1.2s linear infinite; }
@keyframes dr-sweep { from { left: -40%; } to { left: 100%; } }
.drama-screen.is-flash::before { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; animation: dr-flash .5s ease-out; pointer-events: none; z-index: 2; }
@keyframes dr-flash { 0% { opacity: .35; } 100% { opacity: 0; } }
/* Inventory tray: things you picked up through scene actions */
/* Meters: one row per tracked quantity, pips fill left to right; a fatal meter at 1 goes red */
.drama-meters { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px 0; font-size: .78rem; }
.drama-meter { display: flex; align-items: center; gap: 8px; }
.drama-meter-k { min-width: 64px; color: var(--dr-dim); white-space: nowrap; }
.drama-meter-pips { display: flex; gap: 3px; }
.drama-meter-pips i { width: 14px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.12); transition: background .3s; }
.drama-meter-pips i.on { background: #6fcf97; }
.drama-meter b { font-weight: 600; color: var(--dr-dim); font-size: .72rem; }
.drama-meter.is-danger .drama-meter-pips i.on { background: #e5533d; }
.drama-meter.is-danger .drama-meter-k, .drama-meter.is-danger b { color: #e5533d; }
.drama-meter.is-down { animation: dr-meter-down .6s ease; }
.drama-meter.is-up { animation: dr-meter-up .6s ease; }
@keyframes dr-meter-down { 0% { background: rgba(229,83,61,.35); } 100% { background: transparent; } }
@keyframes dr-meter-up { 0% { background: rgba(111,207,151,.35); } 100% { background: transparent; } }
.drama-action em { font-style: normal; font-size: .72rem; margin-left: 4px; }
.drama-action em.up { color: #6fcf97; } .drama-action em.down { color: #e5533d; }
.drama-inventory { display: flex; align-items: center; gap: 6px; padding: 8px 12px 0; font-size: .78rem; flex-wrap: wrap; }
.drama-inventory-k { color: var(--dr-dim); }
.drama-item { border: 1px solid rgba(255,210,179,.45); color: #ffd2b3; border-radius: 999px; padding: 2px 9px; }

/* HUD under the frame: meters on the left, the cast's faces on the right (tap for the cast tab) */
.drama-hud { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px 0; }
.drama-hud-tools { display: flex; gap: 6px; }
.drama-tool { border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: var(--dr-dim); border-radius: 999px; padding: 3px 9px; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; }
.drama-tool.is-on { color: var(--dr-accent); border-color: rgba(240,166,200,.5); }
/* Folded log: the list is gone, the frame grows, the input and the one-tap lines stay */
body.drama-log-folded #messagesContainer { display: none !important; }
body.drama-log-folded .drama-screen { height: min(52vh, 92vw); }
body.drama-log-folded .drama-chat { flex: 0 0 auto; margin-top: auto; }
body.drama-cc-off .drama-screen .drama-caption { display: none; }
/* The player's own line reads like every other line, not a chat bubble */
body.drama-room #messagesContainer .live-lyrics-line.user-line { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 7px 0 !important; max-width: none !important; margin-left: 0 !important; }
body.drama-room #messagesContainer .live-lyrics-line.user-line img, body.drama-room #messagesContainer .live-lyrics-line.user-line .participant-avatar { display: none !important; }
.drama-meters { padding: 0; }
.drama-cast { display: flex; gap: 10px; margin-left: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: pointer; }
.drama-cast::-webkit-scrollbar { display: none; }
.drama-person { position: relative; display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.drama-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.2); }
.drama-mood-badge { position: absolute; left: 18px; top: -4px; font-size: .7rem; }
.drama-person-name { font-size: .78rem; font-weight: 600; white-space: nowrap; }
.drama-person-meta { line-height: 1.2; }
.drama-role { font-size: .66rem; opacity: .55; margin-left: 4px; font-weight: 400; }
.drama-mood { font-size: .74rem; opacity: .85; }
.drama-panel-person { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--dr-line); }
.drama-panel-person .drama-avatar { width: 40px; height: 40px; }
.drama-panel-person .drama-person-name { font-size: .9rem; white-space: normal; }
.drama-avatar-letter { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: var(--dr-dim); font-size: .8rem; font-weight: 700; flex: 0 0 auto; }
.drama-panel-person.is-you .drama-avatar-letter { background: rgba(240,166,200,.2); color: var(--dr-accent); }
.drama-panel-sub { font-size: .74rem; color: var(--dr-dim); letter-spacing: .06em; text-transform: uppercase; margin-top: 10px; }

/* Actions: one horizontally scrolling row; scene actions first */
/* Actions: one button that opens a menu (a popover above it on desktop, a bottom sheet on phones) */
.drama-actions { position: relative; display: flex; padding: 8px 12px 4px; }
.drama-actions[hidden] { display: none; }
.drama-actions-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: var(--dr-ink); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: .84rem; cursor: pointer; }
.drama-actions-btn b { background: var(--dr-accent); color: #2a1220; border-radius: 999px; padding: 0 7px; font-size: .74rem; line-height: 1.5; }
.drama-actions-btn:disabled { opacity: .45; cursor: default; }
.drama-actions-caret { font-size: .62rem; color: var(--dr-dim); }
.drama-actions-menu { position: absolute; left: 12px; bottom: calc(100% + 6px); min-width: 260px; max-width: 360px; max-height: 60vh; overflow-y: auto; background: #17141f; border: 1px solid var(--dr-line); border-radius: 14px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.45); z-index: 40; }
.drama-actions-menu[hidden] { display: none; }
.drama-actions-sep { height: 1px; background: var(--dr-line); margin: 6px 4px; }
.drama-action { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 9px 10px; border: 0; background: transparent; color: var(--dr-ink); font: inherit; font-size: .9rem; text-align: left; border-radius: 10px; cursor: pointer; }
.drama-action small { font-size: .76rem; color: var(--dr-dim); }
.drama-action small em { font-style: normal; margin-left: 4px; }
.drama-action small em.up { color: #8fe0a8; } .drama-action small em.down { color: #f0a6a6; }
.drama-action:hover:not(:disabled) { background: rgba(255,255,255,.06); }
.drama-action.is-ctx .drama-action-k .pi { color: var(--dr-accent); }
.drama-action.is-off { opacity: .5; }
.drama-action.is-done { opacity: .55; }
.drama-action.is-gamble .drama-action-k { color: #ffd2b3; }
.drama-action-tag { font-size: .68rem; background: rgba(240,166,200,.18); color: var(--dr-accent); border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: middle; }
.drama-action:disabled { cursor: default; }
@media (max-width: 560px) {
    .drama-actions-menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-width: none; max-height: 70vh; border-radius: 18px 18px 0 0; padding: 8px 12px calc(env(safe-area-inset-bottom) + 12px); }
    .drama-action { padding: 12px 10px; font-size: .95rem; }
}
/* The mic sits in the input row now; a line above the box explaining it was one more thing to read */
body.drama-room #inputContainer .mic-hint, body.drama-room #micHint { display: none !important; }
.drama-action:disabled { opacity: .3; cursor: default; }
.drama-action.is-done { opacity: .4; text-decoration: line-through; }
.drama-action.is-gamble { border-color: #ffd2b3 !important; color: #ffd2b3 !important; animation: dr-pulse 1.2s ease-in-out infinite; }
.drama-action.is-suggested { border-color: var(--dr-accent-2) !important; color: var(--dr-accent-2) !important; animation: dr-pulse-blue 1.2s ease-in-out infinite; }
@keyframes dr-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,210,179,0);} 50% { box-shadow: 0 0 0 4px rgba(255,210,179,.35);} }
@keyframes dr-pulse-blue { 0%,100% { box-shadow: 0 0 0 0 rgba(124,212,255,0);} 50% { box-shadow: 0 0 0 4px rgba(124,212,255,.35);} }
.drama-toast { margin: 4px 12px 0; font-size: .8rem; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.07); display: inline-block; }

/* The panel: story / cast / settings. A sheet from the bottom on phones, a card at the top right on wide screens */
.drama-panel { position: fixed; left: 0; right: 0; bottom: 0; max-height: 72%; z-index: 30; display: flex; flex-direction: column; background: rgba(18,15,26,.98); border: 1px solid var(--dr-line); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.5); }
.drama-panel[hidden] { display: none; }
.drama-panel-tabs { display: flex; align-items: center; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid var(--dr-line); }
.drama-panel-tab { border: 0; background: none; color: var(--dr-dim); font: inherit; font-size: .86rem; padding: 8px 10px; border-bottom: 2px solid transparent; cursor: pointer; }
.drama-panel-tab.is-active { color: var(--dr-ink); border-bottom-color: var(--dr-accent); }
.drama-panel-close { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; cursor: pointer; }
.drama-panel-body { padding: 10px 14px 14px; overflow-y: auto; min-height: 0; }
.drama-panel-body[hidden] { display: none; }
.drama-brief-intro { font-size: .88rem; line-height: 1.5; margin: 6px 0 8px; }

/* Big-moment banner: a strip under the frame, never on the picture */
.drama-banner { margin: 0 12px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .35s, margin .3s; text-align: center; border-radius: 12px; background: rgba(240,166,200,.12); border: 1px solid rgba(240,166,200,.45); }
.drama-banner.is-on { max-height: 140px; opacity: 1; margin: 8px 12px 0; padding: 9px 12px; }
.drama-banner-title { font-size: 1.02rem; font-weight: 800; letter-spacing: .04em; color: var(--dr-accent); }
.drama-banner-sub { margin-top: 3px; font-size: .84rem; color: var(--dr-ink); line-height: 1.45; }

/* Briefing card: shown once at the start, reopenable from the menu */
.drama-brief { margin: 8px 12px 0; padding: 12px 14px; border-radius: 14px; background: rgba(124,212,255,.08); border: 1px solid rgba(124,212,255,.3); }
.drama-brief-title { font-weight: 800; font-size: .95rem; margin-bottom: 6px; color: var(--dr-accent-2); }
.drama-brief-row { display: flex; gap: 8px; font-size: .86rem; line-height: 1.45; margin: 4px 0; }
.drama-brief-k { flex: 0 0 auto; color: var(--dr-dim); white-space: nowrap; }
.drama-brief-how { margin-top: 8px; font-size: .78rem; color: var(--dr-dim); line-height: 1.45; }
.drama-brief-ok { margin-top: 10px; width: 100%; padding: 10px; border: 0; border-radius: 10px; font-weight: 700; color: #2a1220; background: linear-gradient(90deg, var(--dr-accent-2), #cfefff); cursor: pointer; }

/* Ending card */
.drama-ending { margin: 10px 12px 0; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--dr-line); }
.drama-ending-head { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.drama-ending-body { font-size: .9rem; line-height: 1.5; opacity: .92; }
.drama-ending-missed { font-size: .8rem; opacity: .7; margin: 8px 0; }
.drama-ending-collection { font-size: .82rem; margin-top: 8px; color: var(--dr-accent-2); }
.drama-ending-hook { font-size: .88rem; margin-top: 8px; color: var(--dr-ink); opacity: .9; font-style: italic; }
.drama-next-btn { margin-top: 12px; width: 100%; padding: 12px; border: 0; border-radius: 12px; font-weight: 700; color: #2a1220; background: linear-gradient(90deg, var(--dr-accent), #ffd2b3); cursor: pointer; }

/* Menu sheet under the top bar */
.drama-settings .drama-sheet-title { margin-top: 4px; }
.drama-sheet-title { font-weight: 700; margin-bottom: 4px; }
.drama-sheet-hint { font-size: .78rem; color: var(--dr-dim); margin-bottom: 8px; line-height: 1.4; }
.drama-sheet textarea,
.drama-settings textarea { width: 100%; box-sizing: border-box; background: var(--dr-glass); border: 1px solid var(--dr-line); color: var(--dr-ink); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: .9rem; resize: vertical; }
.drama-settings textarea::placeholder { color: var(--dr-dim); }
.drama-sheet-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.drama-sheet-end { width: 100%; margin-top: 10px; background: none; border: 0; color: rgba(255,120,120,.9); font-size: .84rem; padding: 6px; cursor: pointer; }

/* ── Dialogue: subtitles, not chat bubbles ──────────────────────────── */
/* No min-height: 0 here: the dialogue box must not shrink below the log's floor plus the input bar, or the stage won it all.
   The log counts for its floor only (a 0px basis below), so its lines never make the box ask for their full height. */
.drama-chat { flex: 1; display: flex; flex-direction: column; margin-top: 6px; border-top: 1px solid var(--dr-line); }
/* position: relative makes the log its lines' offsetParent. Without it a line's offsetTop counted from the shell's top,
   so the player's "scroll the playing line to the middle" (audioPlayer.js) overshot by the whole stage height and put
   the line under the picture, leaving only the not-yet-played (invisible) lines in view — the log looked empty. */
body.drama-room #messagesContainer { position: relative; flex: 1 1 0px; min-height: 96px; overflow-y: auto; padding: 8px 14px 10px; gap: 2px; display: flex; flex-direction: column; }
body.drama-room #messagesContainer .live-lyrics-line { padding: 7px 0; margin: 0; border: 0; border-radius: 0; background: none; opacity: .62; transform: none; cursor: default; }
body.drama-room #messagesContainer .live-lyrics-line.active { opacity: 1; }
body.drama-room #messagesContainer .live-lyrics-meta { display: flex !important; align-items: center; gap: 6px; font-size: .7rem !important; letter-spacing: .06em; text-transform: uppercase; color: var(--dr-dim) !important; margin-bottom: 2px; }
body.drama-room #messagesContainer .live-lyrics-meta img, body.drama-room #messagesContainer .live-lyrics-meta .participant-avatar { width: 16px !important; height: 16px !important; border-radius: 50%; object-fit: cover; }
body.drama-room #messagesContainer .live-lyrics-text { font-size: 1rem !important; line-height: 1.5; color: var(--dr-ink) !important; }
/* The narrator reads like a caption card: italic, dimmer */
body.drama-room #messagesContainer .live-lyrics-line.narrator-line .live-lyrics-text, body.drama-room #messagesContainer .live-lyrics-line[data-narrator="1"] .live-lyrics-text { font-style: italic; color: var(--dr-dim) !important; }
/* Your own lines sit on the right in the accent colour */
body.drama-room #messagesContainer .live-lyrics-line.user-line { text-align: right; }
body.drama-room #messagesContainer .live-lyrics-line.user-line .live-lyrics-meta { justify-content: flex-end; }
body.drama-room #messagesContainer .live-lyrics-line.user-line .live-lyrics-text { color: var(--dr-accent) !important; }

/* Input bar: pill text field, mic and send as round buttons */
body.drama-room #inputContainer { position: static; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--dr-bg); border-top: 1px solid var(--dr-line); }
body.drama-room #inputContainer .action-bar, body.drama-room #liveCurrentSubtitle, body.drama-room #toggleActionBarBtn { display: none !important; }
body.drama-room #inputContainer .mic-hint { font-size: .72rem; color: var(--dr-dim); text-align: center; margin-bottom: 6px; }
body.drama-room #inputContainer .input-row { display: flex; align-items: center; gap: 8px; }
body.drama-room #chatInput { flex: 1; min-width: 0; background: var(--dr-glass); border: 1px solid var(--dr-line); color: var(--dr-ink); border-radius: 999px; padding: 11px 14px; font-size: .95rem; }
body.drama-room #chatInput.is-armed { border-color: #ffd2b3 !important; box-shadow: 0 0 0 2px rgba(255,210,179,.4); }
body.drama-room .send-btn-live { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--dr-line); background: rgba(255,255,255,.08); color: var(--dr-ink); flex: 0 0 auto; }
body.drama-room #micBtn { background: rgba(240,166,200,.18) !important; border-color: rgba(240,166,200,.5) !important; color: var(--dr-accent) !important; }
body.drama-room #micBtn.speaking { background: var(--dr-accent) !important; color: #2a1220 !important; }
/* Werewolf room controls this app does not use */
body.drama-room .live-header, body.drama-room #participantDrawer, body.drama-room #liveVibeSelector, body.drama-room #replayBadge, body.drama-room #replayActions,
body.drama-room #liveLikeBtn, body.drama-room #liveDislikeBtn, body.drama-room #reportContentBtn, body.drama-room #humanSpeechActions,
body.drama-room #aiHintBtn, body.drama-room #endSpeechBtn, body.drama-room #sceneLayer, body.drama-room #liveAvatarOverlay, body.drama-room #bulletChatContainer { display: none !important; }

/* Programme cards on the home screen: the poster carries only the title and two small tags, so the faces and the action
   stay visible; the play button sits under it. The hook, faces and setting are in the briefing the card opens. */
.dr-programmes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 10px; }
.dr-prog { display: flex; flex-direction: column; gap: 6px; padding: 0; text-align: left; color: #fff; cursor: pointer; font: inherit; }
.dr-prog:focus-visible { outline: 2px solid #6fcf97; outline-offset: 2px; border-radius: 14px; }
.dr-prog-poster { position: relative; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: #1a2029 center / cover no-repeat; }
.dr-prog-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 70%, rgba(0,0,0,.78) 100%); }
.dr-prog-tag { position: absolute; top: 7px; max-width: calc(50% - 10px); padding: 2px 7px; border-radius: 9px; font-size: .64rem; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(0,0,0,.45); color: rgba(255,255,255,.88); backdrop-filter: blur(4px); }
.dr-prog-tag-genre { left: 7px; }
.dr-prog-tag-stat { right: 7px; }
.dr-prog-tag-stat.is-hot { color: #ffc29e; }
.dr-prog-tag-stat.is-cont { background: rgba(240,166,200,.85); color: #2a1220; font-weight: 700; }
/* Placed by its offsets, not padding: a line clamp clips at the padding box, so bottom padding showed half of a third line */
.dr-prog-title { position: absolute; left: 10px; right: 10px; bottom: 9px; padding: 0; font-size: .95rem; font-weight: 700; line-height: 1.25;
  text-wrap: balance; text-shadow: 0 1px 3px rgba(0,0,0,.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dr-prog-hook { font-size: .78rem; line-height: 1.35; color: rgba(255,255,255,.88); }
.dr-prog-play { width: 100%; border: 0; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: .84rem; font-weight: 700; color: #2a1220;
    background: linear-gradient(90deg, var(--dr-accent), #ffd2b3); cursor: pointer; }
.dr-prog-play:active { transform: scale(.98); }
/* Share card */
.drama-share-btn { display: block; width: 100%; margin: 10px 0 6px; padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font: inherit; cursor: pointer; }
.drama-share-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; padding: 16px; }
.drama-share-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 360px; width: 100%; }
.drama-share-inner img { width: 100%; max-height: 72vh; object-fit: contain; border-radius: 12px; }
.drama-share-hint { font-size: .8rem; color: rgba(255,255,255,.75); }

/* Co-op: human-played slots, the role picker and the goal card */
.drama-human-pill { display: inline-block; font-size: .62rem; padding: 0 6px; border-radius: 8px; background: rgba(111,207,151,.18); color: #6fcf97; margin-left: 4px; vertical-align: middle; }
.drama-roles-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.drama-role-opt { text-align: left; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; border-radius: 10px; padding: 9px 11px; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.drama-role-opt:disabled { opacity: .45; cursor: default; }
.drama-role-opt b { font-size: .9rem; } .drama-role-opt span { font-size: .78rem; color: var(--dr-dim); }
.drama-roles-custom { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0; }
.drama-roles-custom textarea { flex: 1; resize: none; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.25); color: #fff; padding: 8px; font: inherit; font-size: .85rem; }
.drama-role-card { border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 9px 11px; margin: 6px 0; font-size: .85rem; display: flex; flex-direction: column; gap: 4px; }
.drama-role-note { font-size: .76rem; color: #e9c46a; }
.drama-roles-btns { display: flex; gap: 6px; margin-top: 4px; }

/* Your-turn cue and cut-off subtitles */
.is-your-turn { animation: dr-turn-pulse 1.2s ease-in-out 4; box-shadow: 0 0 0 0 rgba(111,207,151,.6); }
@keyframes dr-turn-pulse { 0% { box-shadow: 0 0 0 0 rgba(111,207,151,.6); } 70% { box-shadow: 0 0 0 10px rgba(111,207,151,0); } 100% { box-shadow: 0 0 0 0 rgba(111,207,151,0); } }
.live-lyrics-line.cut-off { opacity: .45 !important; }
.drama-brief-intro { font-size: .86rem; line-height: 1.6; color: rgba(255,255,255,.9); margin: 4px 0 8px; }
@media (prefers-reduced-motion: reduce) { .is-your-turn { animation: none; } }

/* Card sheet before the curtain; a labelled row in the menu */
.dr-prog-sheet { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.7); display: flex; align-items: flex-end; justify-content: center; }
.dr-prog-sheet[hidden] { display: none; }
.dr-prog-sheet-inner { width: 100%; max-width: 480px; background: #151a21; border-radius: 16px 16px 0 0; padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 8px; }
.dr-prog-sheet-title { font-size: 1.1rem; font-weight: 700; }
.dr-prog-sheet-hook { font-size: .9rem; color: rgba(255,255,255,.85); line-height: 1.45; }
.dr-prog-sheet-btns { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.dr-prog-sheet-btns .dr-start { flex: 1; }
.drama-sheet-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .85rem; margin-top: 8px; color: var(--dr-dim); }
.drama-sheet-row select { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 4px 8px; font: inherit; }

/* ── Desktop: a wide screen with a mouse. Phones in landscape and tablets keep the phone column ── */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    body.drama-room #chatContainer {
        max-width: 920px; width: calc(100% - 48px); flex-direction: column;
        border: 1px solid var(--dr-line); border-radius: 16px; top: 16px; bottom: 16px; height: auto; overflow: hidden;
    }
    body.drama-room .drama-stage { flex: 0 1 auto; padding-top: 0; }
    body.drama-room .drama-screen { width: calc(100% - 24px); height: min(40vh, 420px); margin: 0 12px; }
    body.drama-log-folded.drama-room .drama-screen { height: min(62vh, 640px); }
    body.drama-room .drama-chat { flex: 1; }
    body.drama-room .drama-panel { left: auto; right: 12px; top: 52px; bottom: auto; width: 400px; max-height: calc(100% - 70px); border-radius: 14px; }
    body.drama-room #messagesContainer { padding: 16px 22px 12px; }
    body.drama-room #messagesContainer .live-lyrics-text { font-size: 1.05rem !important; }
    body.drama-room #inputContainer { padding: 12px 18px 14px; }
    /* Wider rows get their space back: actions wrap instead of scrolling, the cast strip too */
    body.drama-room .drama-cast { flex-wrap: wrap; overflow: visible; }
    body.drama-room .drama-meters { padding-left: 14px; }
    body.drama-room .drama-brief, body.drama-room .drama-ending, body.drama-room .drama-roles { margin: 10px 12px; }
}

/* ── Desktop home: several columns instead of one phone column ── */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    .dr-home { padding-left: 32px; padding-right: 32px; }
    .dr-home > * { max-width: 1080px; }
    .dr-brand-tag { display: inline; }
    .dr-brand-name { font-size: 1.25rem; }
    .dr-programmes { grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .dr-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
    .dr-roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .dr-roles > .dr-logline, .dr-roles > .dr-role-foot { grid-column: 1 / -1; }
    .dr-mine { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .dr-live-item { flex-basis: 260px; height: 140px; }
    .dr-bottom-inner { max-width: 1080px; flex-direction: row; align-items: center; justify-content: space-between; }
    .dr-bottom-inner .dr-start { width: auto; min-width: 260px; }
    .dr-castme { max-width: 560px; }
}

/* ── Phone held sideways (short, wide, touch): frame on the left, dialogue on the right, full width ── */
@media (orientation: landscape) and (max-height: 520px) and (hover: none) {
    body.drama-room #chatContainer { max-width: none; width: 100%; left: 0; transform: none; flex-direction: row; border: 0; }
    body.drama-room .drama-stage { flex: 0 0 46%; width: 46%; min-height: 0; overflow-y: auto; scrollbar-width: none; border-right: 1px solid var(--dr-line); }
    body.drama-room .drama-screen { width: calc(100% - 16px); margin: 0 8px; height: min(50vh, 56vw); }
    body.drama-room .drama-chat { flex: 1; min-width: 0; margin-top: 0; border-top: 0; }
    body.drama-room .drama-cast { flex-wrap: wrap; overflow: visible; }
}

/* One-tap lines above the input */
/* One row that scrolls sideways, never a block that grows downward: three wrapped suggestions were 80px tall and
   pushed the text input off the bottom of the screen. Each line stays readable — the row scrolls, the text is not cut. */
.drama-say { display: flex; flex: 0 0 auto; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; gap: 6px;
    align-items: center; padding: 6px 12px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.drama-say::-webkit-scrollbar { display: none; }
.drama-say[hidden] { display: none; }
/* Auto-play countdown: the line the AI is about to say for you, and the way to take it back */
.drama-auto-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px 0; font-size: .82rem; color: var(--dr-dim); min-width: 0; }
.drama-auto-bar[hidden] { display: none; }
.drama-auto-k { flex: none; }
.drama-auto-line { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.drama-auto-take { flex: none; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: .8rem; }
.drama-say-k { flex: 0 0 auto; font-size: .74rem; color: var(--dr-dim); margin-right: 2px; }
.drama-say-opt { flex: 0 0 auto; white-space: nowrap; border: 1px solid rgba(111,207,151,.45); background: rgba(111,207,151,.1); color: #fff; border-radius: 999px; padding: 6px 11px; font: inherit; font-size: .84rem; cursor: pointer; text-align: left; }
.drama-say-opt:active { background: rgba(111,207,151,.25); }

/* Roles listed on the card sheet before the curtain */
.dr-prog-roles { display: flex; flex-direction: column; gap: 4px; font-size: .86rem; margin: 2px 0; }
.dr-prog-role .dr-role-slot { font-size: .68rem; padding: 1px 6px; border-radius: 8px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); margin-right: 6px; }
.dr-prog-note { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* Home page shows only the cast; the library is behind the picker sheet */
.dr-grid-cast { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); margin-top: 10px; }
.dr-grid-cast:empty { display: none; }
.dr-prog-sheet-inner { max-height: 92vh; overflow: auto; }
.dr-sheet-scroll { max-height: 48vh; overflow: auto; padding: 2px; }
.dr-sheet-close { margin-left: auto; padding: 4px 10px; }
.dr-filter { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .8rem; color: var(--dr-dim); }
.dr-filter .dr-chip { padding: 4px 10px; font-size: .8rem; }
.dr-form { display: flex; flex-direction: column; gap: 8px; }
.dr-form label { font-size: .8rem; color: var(--dr-dim); display: flex; flex-direction: column; gap: 4px; }
.dr-form input, .dr-form textarea, .dr-form select { background: var(--dr-glass); border: 1px solid var(--dr-line); color: var(--dr-ink); border-radius: 10px; padding: 8px 10px; font: inherit; width: 100%; box-sizing: border-box; }
.dr-form-row { display: flex; gap: 8px; }
.dr-form-row > label { flex: 1; }
.dr-avatar-preview { width: 96px; height: 96px; flex: none; border-radius: 50%; overflow: hidden; background: var(--dr-glass); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.dr-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    .dr-prog-sheet { align-items: center; }
    .dr-prog-sheet-inner { border-radius: 16px; max-width: 640px; }
    .dr-sheet-scroll { max-height: 56vh; }
}

/* The player's own line in the log: no bubble, no account avatar; signed with the stage name, set to the right */
body.drama-room #messagesContainer .message.user { justify-content: flex-end; flex-direction: row; }
body.drama-room #messagesContainer .message.user .avatar { display: none !important; }
body.drama-room #messagesContainer .message.user .bubble { background: none !important; border: 0 !important; box-shadow: none !important; padding: 7px 0 !important; max-width: none !important; text-align: right; }
body.drama-room #messagesContainer .message.user .sender { color: var(--dr-accent); font-size: 0.8rem; opacity: .85; }
body.drama-room #messagesContainer .message.user .content { color: var(--dr-accent) !important; font-size: 1.05rem !important; font-weight: 500; }

/* Settings sheet: a checkbox row reads as one line, not as a stacked label */
.dr-form .dr-check { flex-direction: row; align-items: center; gap: 8px; color: var(--dr-ink); font-size: .9rem; }
.dr-form .dr-check input { width: auto; }

/* ── Me: this product's own profile page ─────────────────────────────── */
#profilePanel[hidden] { display: none; }
.dr-me-card { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.dr-me-face .dr-avatar-img, .dr-me-face img { width: 64px; height: 64px; border-radius: 20px; object-fit: cover; }
.dr-me-face .drama-avatar-letter { width: 64px; height: 64px; border-radius: 20px; font-size: 1.6rem; }
.dr-me-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dr-me-nick { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--dr-line); color: var(--dr-ink); font-size: 1.25rem; font-weight: 700; padding: 2px 0; }
.dr-me-nick:focus { outline: none; border-bottom-color: var(--dr-accent); }
.dr-me-stats { display: flex; gap: 10px; margin-bottom: 12px; }
.dr-me-stat { flex: 1; background: var(--dr-glass); border: 1px solid var(--dr-line); border-radius: 12px; padding: 10px; text-align: center; }
.dr-me-stat b { display: block; font-size: 1.2rem; }
.dr-me-stat span { font-size: .72rem; color: var(--dr-dim); }
.dr-mine-btns { display: flex; flex-direction: column; gap: 6px; }
.dr-chip.dr-danger { color: #ff6b6b; border-color: rgba(255,107,107,.35); }
.dr-me-nick-row { display: flex; align-items: center; gap: 8px; }
.dr-me-nick-row .dr-me-nick { flex: 1; min-width: 0; }
.drama-invite-link { width: 100%; margin-top: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; border-radius: 8px; padding: 8px; font-size: .8rem; }

/* Credits: the number is the point, the buy word is the invitation */
.drama-credits-chip { font-variant-numeric: tabular-nums; }
.drama-credits-chip.is-low { color: #ffb4b4; border-color: rgba(255,107,107,.45); }

/* Language switcher in the home top bar: compact, one tap, sits between the profile zone and the credits chip */

/* Audio still needs a tap (a browser that refuses even after the play button primed it): a chip by the frame, not a
   full-screen curtain over the episode that is already playing behind it. */
.audio-unlock-chip { position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 900;
    display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
    background: rgba(20,16,26,.92); border: 1px solid var(--dr-line); color: var(--dr-ink); font-size: .86rem;
    box-shadow: 0 6px 24px rgba(0,0,0,.45); }
.audio-unlock-chip .audio-unlock-icon { font-size: 1.05rem; }

/* The turn's goal strip: what you want and what it costs, riding on the frame so it costs no layout height */
.drama-goalstrip { position: absolute; left: 10px; right: 10px; top: 8px; z-index: 6; padding: 9px 40px 9px 11px;
    border-radius: 13px; background: rgba(8, 11, 20, .74); backdrop-filter: blur(7px);
    border: 1px solid rgba(124, 212, 255, .18); color: #e8eefc; font-size: 13px; line-height: 1.45;
    opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .3s, transform .3s; }
.drama-goalstrip.is-on { opacity: 1; transform: none; pointer-events: auto; }
.drama-goalstrip-row { display: flex; gap: 7px; align-items: flex-start; }
.drama-goalstrip-row + .drama-goalstrip-row { margin-top: 4px; opacity: .82; }
.drama-goalstrip-more { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border: 0;
    border-radius: 9px; background: rgba(255, 255, 255, .1); color: #e8eefc; font-size: 14px; cursor: pointer; }
/* The write-your-own curtain stays off the page until the player touches that flow (lobby.js flowTouched) */
.dr-script-go[hidden] { display: none !important; }
/* The last card of the grid opens the write-your-own flow: same tile, no poster, a dashed frame */
.dr-prog-create .dr-prog-poster { background: rgba(255, 255, 255, .03); border: 1.5px dashed rgba(255, 255, 255, .22);
  display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 12px; }
.dr-prog-create-icon { font-size: 40px; text-align: center; margin-bottom: 4px; }
.dr-prog-create .dr-prog-title { position: static; padding: 0; text-align: center; text-shadow: none; }
.dr-prog-create .dr-prog-hook { text-align: center; opacity: .8; }

/* ── Phone keyboard: the frame gives up height while the keyboard is up, and inner scrollers never bounce the shell ── */
body.drama-room .messages-container, body.drama-room .drama-panel, body.drama-room .drama-brief { overscroll-behavior: contain; }
body.kb-open.drama-room .drama-screen { height: min(26vh, 60vw); }
body.kb-open.drama-room .drama-hud { display: none; }
/* Inside the Protag app the status bar overlays the page: the header keeps clear of it */
body.native-app .dr-home { --dr-top: calc(env(safe-area-inset-top) + 16px); }

/* ── Protag icon set (js/core/protag_icons.js): inline SVG in an <i class="pi">, sized to the text around it ── */
.pi { display: inline-flex; width: 1.1em; height: 1.1em; vertical-align: -0.2em; flex: none; }
.pi svg { width: 100%; height: 100%; display: block; }
.pi[data-pi="spinner"] svg { animation: pi-spin 1s linear infinite; }
@keyframes pi-spin { to { transform: rotate(360deg); } }
.audio-unlock-icon .pi { width: 1.6em; height: 1.6em; }

/* ── Tablet (iPad, touch, 700px and up): the phone column no longer floats in the middle of a big screen ── */
@media (min-width: 700px) and (hover: none) {
    .dr-home { padding-left: 32px; padding-right: 32px; }
    .dr-home > * { max-width: 1000px; }
    .dr-brand-tag { display: inline; }
    .dr-brand-name { font-size: 1.25rem; }
    .dr-programmes { grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .dr-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
    .dr-roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .dr-roles > .dr-logline, .dr-roles > .dr-role-foot { grid-column: 1 / -1; }
    .dr-mine { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .dr-me-menu { position: absolute; left: auto; right: 0; top: calc(100% + 8px); bottom: auto; min-width: 240px; border-radius: 14px; padding: 6px; }
    .dr-me-btn { padding: 0 12px 0 3px; width: auto; }
    .dr-me-name { display: inline; }
}
/* iPad upright: one wider column, a bigger frame, the actions menu as a popover not a sheet */
@media (min-width: 700px) and (hover: none) and (orientation: portrait) {
    body.drama-room #chatContainer { max-width: 760px; }
    body.drama-room .drama-screen { height: min(46vh, 72vw); }
    body.drama-room.drama-log-folded .drama-screen { height: min(58vh, 92vw); }
    .drama-actions-menu { position: absolute; left: 12px; right: auto; bottom: calc(100% + 6px); top: auto; max-width: 400px; max-height: 60vh; border-radius: 14px; padding: 6px; }
}
/* iPad sideways: the frame on the left, the dialogue on the right, like a phone held sideways but with room to breathe */
@media (min-width: 900px) and (hover: none) and (orientation: landscape) {
    body.drama-room #chatContainer { max-width: none; width: 100%; left: 0; transform: none; flex-direction: row; border: 0; }
    body.drama-room .drama-stage { flex: 0 0 52%; width: 52%; min-height: 0; overflow-y: auto; scrollbar-width: none; border-right: 1px solid var(--dr-line); }
    body.drama-room .drama-screen { width: calc(100% - 32px); margin: 8px 16px 0; height: min(66vh, 60vw); }
    body.drama-room.drama-log-folded .drama-screen { height: min(72vh, 64vw); }
    body.drama-room .drama-chat { flex: 1; min-width: 0; margin-top: 0; border-top: 0; }
    body.drama-room #messagesContainer { display: block !important; }
    .drama-actions-menu { position: absolute; left: 12px; right: auto; bottom: calc(100% + 6px); top: auto; max-width: 400px; max-height: 60vh; border-radius: 14px; padding: 6px; }
}

/* ── Sheets (invite, feedback): a bottom sheet on phones, a centred card elsewhere ── */
.dr-sheet-wrap { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.dr-sheet-wrap[hidden] { display: none; }
.dr-sheet-back { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.dr-sheet { position: relative; width: 100%; max-width: 520px; background: #17141f; border: 1px solid var(--dr-line); border-radius: 18px 18px 0 0; padding: 14px 16px calc(env(safe-area-inset-bottom) + 16px); }
.dr-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 1.02rem; }
.dr-sheet-x { border: 0; background: transparent; color: var(--dr-dim); font-size: 1.1rem; cursor: pointer; padding: 4px; }
.dr-sheet-body { display: flex; flex-direction: column; gap: 12px; }
.dr-sheet-body p { margin: 0; line-height: 1.5; }
.dr-invite-link { display: flex; align-items: center; gap: 8px; }
.dr-invite-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--dr-glass); border: 1px solid var(--dr-line); border-radius: 10px; padding: 9px 10px; font-size: .82rem; }
.dr-invite-stats { display: flex; gap: 18px; color: var(--dr-dim); font-size: .84rem; }
.dr-invite-stats b { color: var(--dr-ink); font-size: 1.05rem; margin-right: 4px; }
.dr-thumbs { display: flex; gap: 10px; }
.dr-thumb { width: 48px; height: 44px; border: 1px solid var(--dr-line); background: var(--dr-glass); color: var(--dr-ink); border-radius: 12px; font-size: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dr-thumb.is-on { border-color: var(--dr-accent); background: rgba(240,166,200,.16); color: var(--dr-accent); }
.dr-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.dr-reasons[hidden] { display: none; }
.dr-me-tag { margin-left: auto; font-size: .72rem; background: var(--dr-accent); color: #2a1220; border-radius: 999px; padding: 1px 7px; }
.drama-rate { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; color: var(--dr-dim); font-size: .88rem; }
.drama-rate .dr-thumb { width: 42px; height: 38px; }
@media (min-width: 561px) {
    .dr-sheet-wrap { align-items: center; }
    .dr-sheet { border-radius: 18px; padding-bottom: 16px; }
}

/* The hook card: the ace line stands out */
.drama-goalstrip-row b { color: var(--dr-dim); font-weight: 600; margin-right: 4px; }
.drama-goalstrip-row.is-card { color: #ffd9a8; }
.drama-goalstrip-row.is-card b { color: #f0a6c8; }

/* ── Briefing screen before the curtain (replaces the card sheet) ── */
.dr-brief-scr { position: fixed; inset: 0; z-index: 900; background: #0e1116; display: flex; justify-content: center; }
.dr-brief-scr[hidden] { display: none; }
body.dr-brief-open { overflow: hidden; }
.dr-brief-inner { width: 100%; max-width: 480px; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; background: #151a21; }
.dr-brief-hero { position: relative; flex: 0 0 auto; aspect-ratio: 4 / 3; max-height: 46vh; background: #1d232c center 20% / cover no-repeat; }
.dr-brief-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,26,33,.15) 0%, rgba(21,26,33,0) 35%, rgba(21,26,33,.92) 100%); }
.dr-brief-hero-text { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.dr-brief-title { font-size: 1.35rem; font-weight: 800; line-height: 1.25; text-wrap: balance; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.dr-brief-hook { font-size: .95rem; color: rgba(255,255,255,.9); line-height: 1.45; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.dr-brief-close { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; display: grid; place-items: center; cursor: pointer; }
.dr-brief-body { display: flex; flex-direction: column; gap: 16px; padding: 14px 16px 8px; }
.dr-brief-sec { display: flex; flex-direction: column; gap: 8px; }
.dr-brief-sec h4 { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dr-accent); }
.dr-brief-sec p { margin: 0; font-size: .92rem; line-height: 1.6; color: rgba(255,255,255,.88); }
.dr-brief-row { display: flex; gap: 10px; font-size: .9rem; line-height: 1.5; color: rgba(255,255,255,.88); }
.dr-brief-k { flex: 0 0 auto; font-size: .7rem; line-height: 1.9; padding: 0 7px; border-radius: 8px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.75); white-space: nowrap; align-self: flex-start; }
.dr-brief-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.dr-brief-person { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--dr-glass); border: 1px solid var(--dr-line); min-width: 0; }
.dr-brief-person > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dr-brief-person b { font-size: .9rem; overflow-wrap: anywhere; }
.dr-brief-person small, .dr-brief-role small { font-size: .74rem; color: rgba(255,255,255,.65); line-height: 1.35; overflow-wrap: anywhere; }
.dr-brief-person.is-hidden { border-style: dashed; }
.dr-brief-face { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #2a313c; }
.dr-brief-face-blank { display: grid; place-items: center; font-weight: 700; color: rgba(255,255,255,.7); }
.dr-brief-roles { display: flex; flex-direction: column; gap: 8px; }
.dr-brief-role { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--dr-line); background: var(--dr-glass); color: var(--dr-ink); cursor: pointer; font: inherit; }
.dr-brief-role > div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dr-brief-role b { font-size: .92rem; }
.dr-brief-role em { font-style: normal; font-size: .68rem; font-weight: 600; margin-left: 4px; padding: 1px 6px; border-radius: 8px; background: rgba(240,166,200,.18); color: var(--dr-accent); }
.dr-brief-check { flex: 0 0 auto; opacity: 0; color: var(--dr-accent); }
.dr-brief-role.is-active { border-color: var(--dr-accent); background: rgba(240,166,200,.12); }
.dr-brief-role.is-active .dr-brief-check { opacity: 1; }
.dr-brief-role:focus-visible, .dr-brief-close:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }
.dr-brief-btns { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: center; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(21,26,33,0), #151a21 30%); }
.dr-brief-btns .dr-start { flex: 1; }
@media (min-width: 720px) {
    .dr-brief-scr { align-items: center; background: rgba(0,0,0,.75); }
    .dr-brief-inner { max-width: 640px; height: auto; max-height: 92vh; border-radius: 16px; }
    .dr-brief-hero { max-height: 40vh; }
}

/* ── A decision the player owns: someone at the door, a request for an audience ── */
.drama-decision { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: flex-end; justify-content: center; }
.drama-decision[hidden] { display: none; }
.drama-decision .dr-sheet-back { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.drama-decision-sheet { width: 100%; max-width: 520px; max-height: 84vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom) + 16px); }
.drama-decision-ask { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--dr-ink); }
.drama-decision-opts { display: flex; flex-direction: column; gap: 8px; }
.drama-decision-opt { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 12px 14px;
    border: 1px solid var(--dr-line); border-radius: 14px; background: var(--dr-glass); color: var(--dr-ink); cursor: pointer; font: inherit; }
.drama-decision-opt b { font-size: .98rem; font-weight: 700; }
.drama-decision-opt small { font-size: .8rem; line-height: 1.4; color: rgba(255,255,255,.62); }
.drama-decision-opt:active { border-color: var(--dr-accent); background: rgba(240,166,200,.14); }
.drama-decision-opt:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }
.drama-decision-opt:disabled { opacity: .5; cursor: default; }

/* Cast and suggested lines as dropdowns (2026-09-30): who is here, from the engine's presence; the lines in a menu */
.drama-cast { position: relative; overflow: visible; }
.drama-cast-btn, .drama-say-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: var(--dr-ink); border-radius: 999px; padding: 5px 11px 5px 6px; font: inherit; font-size: .82rem; cursor: pointer; }
.drama-say-btn { padding-left: 11px; }
.drama-say-btn b { background: var(--dr-accent); color: #2a1220; border-radius: 999px; padding: 0 7px; font-size: .74rem; line-height: 1.5; }
.drama-cast-face { width: 22px; height: 22px; margin-right: -10px; border: 1.5px solid #17141f; }
.drama-cast-face:last-of-type { margin-right: 0; }
/* Opens UPWARD: the cast button sits just above the input bar, and a menu dropping down was cut off by the bottom
   of the screen (owner screenshot, 2026-10-02) */
.drama-cast-menu { position: absolute; right: 0; bottom: calc(100% + 6px); min-width: 220px; max-width: min(320px, 90vw); max-height: 60vh; overflow-y: auto; background: #17141f; border: 1px solid var(--dr-line); border-radius: 14px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.45); z-index: 40; }
.drama-cast-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; }
.drama-cast-row.is-away { opacity: .5; }
.drama-say { position: relative; }
.drama-say-menu { position: absolute; left: 0; bottom: calc(100% + 6px); min-width: 260px; max-width: min(380px, 92vw); max-height: 50vh; overflow-y: auto; background: #17141f; border: 1px solid var(--dr-line); border-radius: 14px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.45); z-index: 40; display: flex; flex-direction: column; gap: 4px; }
.drama-say-menu .drama-say-opt { text-align: left; width: 100%; }
.drama-say-btn:disabled { opacity: .45; cursor: default; }
.drama-say-opt small { display: block; opacity: .6; font-size: .74rem; margin-top: 2px; }
/* The suggestion box was a scrolling row of chips (overflow-x: auto; overflow-y: hidden); as a dropdown its menu
   opens above the button and that overflow clipped it whole — the tap did nothing visible (iOS, 2026-09-30). */
.drama-say { overflow: visible; }
.drama-say-menu .drama-say-opt { flex: none; white-space: normal; border-radius: 10px; line-height: 1.4; }
/* `display: flex` on the menu beat the [hidden] attribute: the menu never closed after a pick (iOS, 2026-09-30) */
.drama-say-menu[hidden], .drama-cast-menu[hidden] { display: none !important; }
/* The opening curtain: a custom story's script and cast take one to two minutes after the room opens. It sits over
   the stage below the top bar (back stays reachable; the card's poster shows through) until /drama/state says the play is ready. */
.drama-opening { position: absolute; inset: calc(env(safe-area-inset-top) + 48px) 0 0 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: rgba(12,10,18,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--dr-ink); }
.drama-opening .pi { font-size: 1.6rem; color: var(--dr-accent); }
.drama-opening-title { font-size: 1rem; font-weight: 600; }
.drama-opening-sub { font-size: .84rem; color: var(--dr-dim); }

/* Someone is writing their line (drama_overlay._thinking): a small pill above the caption band, three dots breathing */
.drama-screen .drama-thinking { position: absolute; z-index: 3; left: 50%; bottom: 76px; transform: translate(-50%, 4px);
    padding: 5px 12px; border-radius: 16px; background: rgba(0,0,0,.55); color: #fff; font-size: .78rem;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease, transform .25s ease;
    pointer-events: none; white-space: nowrap; }
.drama-screen .drama-thinking.is-on { opacity: 1; transform: translate(-50%, 0); }
.drama-screen .drama-thinking::after { content: '…'; display: inline-block; width: 1.2em; animation: dr-think 1.2s steps(4) infinite;
    overflow: hidden; vertical-align: bottom; }
@keyframes dr-think { from { width: 0; } to { width: 1.2em; } }
@media (prefers-reduced-motion: reduce) { .drama-screen .drama-thinking::after { animation: none; } }

/* Who is talking (drama_overlay._speakerCue): the speaker's face and name over their spot in the frame, a ring that
   pulses while the voice plays, a small tail pointing down at them. Off the frame (画外) or unplaced: top-left. */
.drama-screen .drama-speaker { position: absolute; z-index: 3; top: 10px; left: 10px; display: flex; align-items: center; gap: 6px;
    padding: 3px 10px 3px 3px; border-radius: 22px; background: rgba(0,0,0,.55); color: #fff; font-size: .78rem; font-weight: 600;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transform: translateY(-4px) scale(.96);
    transition: opacity .25s ease, transform .25s ease, left .35s ease; pointer-events: none; white-space: nowrap; }
/* Below the speaker, pointing up at them: faces are never covered (above the heads, the cue sat on the back row's
   faces); the front row stands lower in the frame, so its cue sits lower too. Clear of the caption band. */
.drama-screen .drama-speaker.is-placed { left: var(--x); top: auto; bottom: 22%; transform: translate(-50%, 4px) scale(.96); }
.drama-screen .drama-speaker.is-placed.is-back { bottom: 34%; }
.drama-screen .drama-speaker.is-placed.is-front { bottom: 16%; }
.drama-screen .drama-speaker.is-on { opacity: 1; transform: translateY(0) scale(1); }
.drama-screen .drama-speaker.is-placed.is-on { transform: translate(-50%, 0) scale(1); }
.drama-screen .drama-speaker.is-placed::after { content: ''; position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
    border: 6px solid transparent; border-top: 0; border-bottom-color: rgba(0,0,0,.55); }
/* During a close-up the face fills the screen: the cue steps back to the corner */
.drama-screen.has-closeup .drama-speaker.is-placed.is-on { left: 10px; top: 10px; bottom: auto; transform: none; }
.drama-screen.has-closeup .drama-speaker.is-placed::after { display: none; }
.drama-screen .drama-speaker img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: top center;
    box-shadow: 0 0 0 2px rgba(243,194,106,.35); }
.drama-screen .drama-speaker.is-talking img { animation: dr-talk 0.9s ease-in-out infinite; }
@keyframes dr-talk { 0%, 100% { box-shadow: 0 0 0 2px rgba(243,194,106,.55); } 50% { box-shadow: 0 0 0 5px rgba(243,194,106,.15); } }
.drama-screen .drama-speaker-off:not(:empty) { font-style: normal; font-weight: 500; font-size: .66rem; padding: 1px 6px; border-radius: 8px; background: rgba(255,255,255,.18); }
/* The close-up: the same frame, pushed in on the speaker (origin = their spot, set by _maybeCloseUp). Over the frame,
   under the cue and the caption. A quick push, then a slow drift, held until the line ends. */
.drama-screen .drama-closeup { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .35s ease; pointer-events: none; overflow: hidden; }
.drama-screen .drama-closeup::before { content: ''; position: absolute; inset: -32px; background: var(--img) center/cover no-repeat; filter: blur(24px) brightness(.5); }
.drama-screen .drama-closeup::after { content: ''; position: absolute; inset: 0; background: var(--img) center/contain no-repeat;
    transform-origin: var(--ox, 50%) var(--oy, 38%); }
.drama-screen .drama-closeup.is-on { opacity: 1; }
.drama-screen .drama-closeup.is-on::after { animation: dr-closeup 7s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes dr-closeup { 0% { transform: translate(0, 0) scale(1.04); } 30% { transform: translate(calc(var(--tx, 0px) * .9), calc(var(--ty, 0px) * .9)) scale(2.15); } 100% { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(2.3); } }