/* Mafia: a noir night town. The stage (scene + the Stranger) on top, the town's seats, what I can do now, my secret card. */
:root {
  --ink: #110d15; --ink-2: #1a1420; --ink-3: #261d2d; --line: rgba(255, 255, 255, 0.09);
  --text: #f4ece0; --text-dim: #ab9f95; --gold: #e9b949; --gold-2: #c08a1e; --blood: #c0313f; --blood-2: #8e1b28; --violet: #8a5cf0;
  --town: #e6b450; --ok: #3fbf74; --moon: #9fb8ff;
  --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif; --display: 'Lobster', 'Rubik', serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { background: radial-gradient(120% 70% at 50% 0%, #2a1c2a 0%, var(--ink) 62%) fixed, var(--ink); color: var(--text); font: 500 15px/1.35 var(--font);
  overscroll-behavior: none; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input { font: inherit; }
[hidden] { display: none !important; }
.app { position: relative; height: 100dvh; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; }
body.wide .app { max-width: 1280px; }
.grow { flex: 1; }
.center { text-align: center; }
.tiny { font-size: 11px; margin-top: 14px; }

/* ---------------------------------------------------------------- shared pieces */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 12px; font-weight: 700; font-size: 16px;
  background: var(--ink-3); border: 1px solid var(--line); transition: transform 0.08s, filter 0.15s; }
.btn:active { transform: scale(0.97); }
.btn.big { min-height: 54px; font-size: 18px; width: 100%; }
.btn.small { min-height: 34px; font-size: 13px; padding: 0 12px; }
.btn.gold { background: linear-gradient(180deg, #f3cf6d, var(--gold-2)); color: #2a1a02; border: 0; box-shadow: 0 3px 0 #85600f; }
.btn.on { background: rgba(63, 191, 116, 0.2); border-color: var(--ok); }
.btn.ghost { background: transparent; }
.btn[disabled] { filter: grayscale(1) brightness(0.6); pointer-events: none; }
.btnrow { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--ink-3); border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.chip.role img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.chip.role.mafia, .hchip.mafia { border-color: rgba(192, 49, 63, 0.7); background: rgba(192, 49, 63, 0.18); }
.chip.role.maniac, .hchip.maniac { border-color: rgba(138, 92, 240, 0.7); background: rgba(138, 92, 240, 0.18); }
.chip.role.town { border-color: rgba(230, 180, 80, 0.5); }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); position: relative; flex: none; }
.icon-btn .dot { position: absolute; top: 2px; inset-inline-end: 2px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--blood); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.face { position: relative; width: var(--fs, 40px); height: var(--fs, 40px); border-radius: 50%; overflow: hidden; flex: none; background: var(--ink-3); border: 2px solid rgba(255, 255, 255, 0.25); }
.face img, .face video { width: 100%; height: 100%; object-fit: cover; display: block; }
.face video { transform: scaleX(-1); }
.face.off { filter: grayscale(1) brightness(0.55); }
.face.talking { box-shadow: 0 0 0 3px var(--ok); }
.face.xs { --fs: 24px; border-width: 1px; }
.face.xxs { --fs: 18px; border-width: 1px; }
.toast { position: fixed; z-index: 90; left: 50%; top: calc(env(safe-area-inset-top) + 54px); transform: translateX(-50%); max-width: min(92vw, 480px); padding: 10px 16px; border-radius: 12px;
  background: #2f2533; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); font-weight: 600; text-align: center; animation: toast-in 0.2s ease-out; }
.toast.warn { background: #4a1a20; border-color: #a52b3a; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -8px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pulse { 50% { transform: scale(1.06); } }
.muted { color: var(--text-dim); }
.why { text-align: center; color: var(--gold); font-weight: 700; font-size: 14px; min-height: 18px; margin: 4px 0; }

/* ---------------------------------------------------------------- join */
.join { flex: 1; overflow-y: auto; padding: 18px 18px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; max-width: 560px; margin: 0 auto; width: 100%; }
.brand { display: flex; align-items: center; gap: 14px; }
.hostface { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 2px rgba(233, 185, 73, 0.5), 0 6px 22px rgba(0, 0, 0, 0.6); background: #000; }
.hostface img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.brand h1 { margin: 0; font: 400 40px/1 var(--display); color: var(--gold); text-shadow: 0 3px 0 #000; }
.brand p { margin: 4px 0 0; color: var(--text-dim); font-weight: 600; font-style: italic; }
.topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.topline .tools { display: flex; align-items: center; gap: 8px; }
.langs { display: inline-flex; background: var(--ink-3); border-radius: 99px; padding: 3px; border: 1px solid var(--line); flex: none; }
.langs button { padding: 5px 12px; border-radius: 99px; font-weight: 700; font-size: 13px; color: var(--text-dim); }
.langs button.on { background: var(--text); color: var(--ink); }
.field { width: 100%; height: 52px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.16); background: #0a070c; color: var(--text); padding: 0 14px; font-size: 18px; font-weight: 600; outline: none; user-select: text; -webkit-user-select: text; }
.field:focus { border-color: var(--gold); }
.label { font-weight: 700; font-size: 14px; color: var(--text-dim); margin: 0 0 8px; }
.faces { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.faces button { aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid transparent; background: var(--ink-3); position: relative; max-width: 76px; justify-self: center; width: 100%; }
.faces button img { width: 100%; height: 100%; object-fit: cover; }
.faces button.on { border-color: var(--gold); transform: scale(1.06); }
.faces .selfie { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; gap: 1px; background: #33283a; }
.faces .selfie b { font-size: 20px; }
.cam { position: relative; width: 210px; height: 210px; border-radius: 50%; overflow: hidden; margin: 0 auto; border: 4px solid var(--gold); background: #000; }
.cam video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.cam-row { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.roomno { font-size: 13px; font-weight: 700; color: var(--text-dim); display: flex; align-items: baseline; gap: 6px; flex: none; }
.roomno b { font-size: 28px; color: var(--text); font-weight: 800; letter-spacing: 0.02em; }

/* ---------------------------------------------------------------- lobby */
.lobby { flex: 1; overflow-y: auto; padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
body.wide .lobby { max-width: 720px; margin: 0 auto; width: 100%; }
.roomline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.host-say { display: flex; align-items: center; gap: 10px; }
.host-say .hostface { width: 56px; height: 56px; }
.host-say .bubble { flex: 1; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); border-radius: 14px; padding: 9px 12px; font-style: italic; font-size: 14px; min-height: 20px; }
.panel { background: var(--ink-2); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.panel .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.panel h3 { margin: 0; font-size: 16px; }
.panel .n { background: var(--gold); color: #2a1a02; font-weight: 800; border-radius: 99px; padding: 1px 9px; font-size: 13px; }
.crowd { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px 6px; }
.member { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; text-align: center; }
.member .face { --fs: 52px; }
.member.me .face { border-color: var(--gold); }
.member .nm { font-size: 12px; font-weight: 700; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member small { position: absolute; top: -6px; inset-inline-end: 4px; }
.sheet .member { flex-direction: row; gap: 10px; padding: 6px 0; }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.setrow:last-child { border-bottom: 0; }
.setrow .k { font-weight: 700; font-size: 14px; }
.setrow .k small { display: block; color: var(--text-dim); font-weight: 500; font-size: 12px; }
.seg { display: inline-flex; background: var(--ink); border-radius: 10px; padding: 3px; border: 1px solid var(--line); flex-wrap: wrap; }
.seg button { padding: 6px 9px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--text-dim); }
.seg button.on { background: var(--gold); color: #2a1a02; }
.roles-pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 8px 0; }
.rolet { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 12px; border: 2px solid var(--line); opacity: 0.45; filter: grayscale(0.8); transition: 0.15s; }
.rolet img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; }
.rolet span { font-size: 11px; font-weight: 700; }
.rolet.on { opacity: 1; filter: none; border-color: var(--gold); background: rgba(233, 185, 73, 0.1); }
.rolet.on.mafia { border-color: var(--blood); background: rgba(192, 49, 63, 0.14); }
.rolet.on.maniac { border-color: var(--violet); background: rgba(138, 92, 240, 0.14); }
.sec { margin: 10px 0 6px; font-size: 12px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.deal { display: flex; flex-wrap: wrap; gap: 6px; }
details.more summary { font-weight: 700; cursor: pointer; padding: 4px 0; }
.how { display: grid; gap: 6px; font-size: 13.5px; color: var(--text-dim); }
.how div { display: flex; gap: 8px; align-items: flex-start; }
.how b { font-size: 18px; }
.lobby-foot { display: flex; flex-direction: column; gap: 8px; position: sticky; bottom: 0; padding-top: 6px; background: linear-gradient(transparent, var(--ink) 30%); }
.scoreline { text-align: center; font-weight: 800; font-size: 15px; margin: 6px 0; }
.qr { background: #fff; border-radius: 16px; padding: 10px; width: 180px; height: 180px; flex: none; }
.qr img { width: 100%; height: 100%; }
.tvjoin { display: flex; gap: 18px; align-items: center; background: var(--ink-2); border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.tvjoin .big { font-size: 22px; font-weight: 800; }
.tvjoin .url { font-size: 28px; font-weight: 800; color: var(--gold); }

/* ---------------------------------------------------------------- the game */
.game { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.topbar { display: flex; align-items: center; gap: 6px; padding: calc(env(safe-area-inset-top) + 8px) 10px 6px; }
.topbar .icon-btn { width: 32px; height: 32px; font-size: 15px; }
.topbar { gap: 5px; }
.topbar .icon-btn.callbtn { padding: 0 6px; font-size: 12px; }
.phase { font: 400 21px/1 var(--display); min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--gold); white-space: nowrap; }
.timer { font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; padding: 4px 9px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); white-space: nowrap; }
.timer:empty { display: none; }
.timer.low { background: var(--blood); animation: pulse 1s infinite; }
.cols { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
.stage { position: relative; flex: none; min-height: 200px; margin: 0 10px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; }
.scene { position: absolute; inset: 0; background: #000 center 40% / cover no-repeat; transition: background-image 0.6s; }
.scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 6, 14, 0.15) 0%, rgba(10, 6, 14, 0.25) 45%, rgba(10, 6, 14, 0.9) 100%); }
.dark .scene { filter: saturate(0.9) brightness(0.85); }
.stage-in { position: relative; z-index: 1; padding: 10px; display: flex; justify-content: center; }
.stage-in:empty { min-height: 90px; }
.stage .host-say { position: relative; z-index: 2; padding: 0 10px 10px; transition: opacity 0.3s; }
.stage .host-say .hostface { width: 46px; height: 46px; }
.stage .host-say.quiet .bubble { opacity: 0; }
.stage .host-say.talking .hostface { animation: glow 1.4s infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 3px rgba(233, 185, 73, 0.75), 0 0 26px rgba(233, 185, 73, 0.6); } }
.stage .bubble { background: rgba(14, 9, 18, 0.78); backdrop-filter: blur(4px); font-size: 15px; }
.cardback { width: min(62vw, 230px); aspect-ratio: 3 / 4; border-radius: 16px; border: 2px solid var(--gold); background: repeating-linear-gradient(45deg, #2a1420 0 10px, #1d0e17 10px 20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px; text-align: center; font-weight: 700; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); animation: pulse 2s infinite; }
.cardback .q { font: 400 70px/1 var(--display); color: var(--gold); }
.rolecard { display: flex; gap: 12px; align-items: stretch; width: 100%; max-width: 480px; background: rgba(14, 9, 18, 0.88); border: 2px solid var(--gold); border-radius: 16px; padding: 10px; animation: flipin 0.45s; }
.rolecard.mafia { border-color: var(--blood); box-shadow: 0 0 24px rgba(192, 49, 63, 0.45); }
.rolecard.maniac { border-color: var(--violet); box-shadow: 0 0 24px rgba(138, 92, 240, 0.45); }
@keyframes flipin { from { transform: perspective(600px) rotateY(90deg); opacity: 0; } }
.rolecard img { width: 42%; max-width: 170px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; flex: none; }
.rc-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rc-txt h2 { margin: 0; font-size: 24px; }
.rc-txt p { margin: 2px 0; font-size: 13.5px; color: #e4d9cc; }
.rc-txt small { color: var(--text-dim); font-weight: 700; }
.side-tag { align-self: flex-start; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: rgba(230, 180, 80, 0.2); color: var(--town); }
.mafia .side-tag { background: rgba(192, 49, 63, 0.25); color: #ff8592; }
.maniac .side-tag { background: rgba(138, 92, 240, 0.25); color: #c6adff; }
.fam { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hchip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); font-size: 12.5px; font-weight: 700; border: 1px solid var(--line); }
.hchip.bad { background: rgba(192, 49, 63, 0.3); border-color: var(--blood); }
.hchip b { color: var(--gold); }
.news { width: 100%; text-align: center; animation: fade 0.5s; }
.news h2 { margin: 4px 0 8px; font-size: 21px; text-shadow: 0 2px 8px #000; }
.news.win h2 { font: 400 34px/1.1 var(--display); color: var(--gold); }
.news.win.mafia h2 { color: #ff6b78; }
.news.win.maniac h2 { color: #c6adff; }
.sheet .news img { width: 100%; border-radius: 14px; }
.deadrow { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.deadone { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.deadone .face { --fs: 74px; border: 3px solid #ddd; filter: grayscale(0.7); }
.hunch { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 8px; }
.hunch small { width: 100%; color: #ddd; font-weight: 700; }
.side { flex: 1; display: flex; flex-direction: column; padding: 8px 10px 0; gap: 8px; }
.seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 4px; }
.seats.n5, .seats.n6, .seats.n9 { grid-template-columns: repeat(3, 1fr); }
.seats.n13, .seats.n14, .seats.n15, .seats.n16 { grid-template-columns: repeat(5, 1fr); }
.seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 4px; border-radius: 14px; border: 2px solid transparent; transition: 0.15s; min-width: 0; }
.seat .face { --fs: 58px; }
.seats.n13 .seat .face, .seats.n14 .seat .face, .seats.n15 .seat .face, .seats.n16 .seat .face { --fs: 48px; }
.seat .nm { font-size: 12px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat.me .face { border-color: var(--gold); }
.seat.mate .face { border-color: var(--blood); box-shadow: 0 0 0 2px rgba(192, 49, 63, 0.4); }
.seat.can { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }
.seat.can:active { transform: scale(0.95); }
.seat.sel { border-color: var(--gold); background: rgba(233, 185, 73, 0.15); }
.ph-night .seat.sel { border-color: var(--moon); background: rgba(159, 184, 255, 0.15); }
.seat.dead { opacity: 0.45; }
.seat.dead .face { filter: grayscale(1); }
.seat.out { animation: pulse 1.2s infinite; }
.seat .x { position: absolute; top: 18px; font-size: 34px; color: #ff4d5e; font-weight: 900; text-shadow: 0 2px 4px #000; pointer-events: none; }
.seat .rb { position: absolute; top: 2px; inset-inline-start: 4px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; background: var(--ink-3); border: 1px solid var(--town); }
.seat .rb.mafia { border-color: var(--blood); background: #3a0f17; }
.seat .rb.maniac { border-color: var(--violet); background: #24154a; }
.seat .ok { position: absolute; top: 2px; inset-inline-end: 6px; font-size: 16px; }
.seat .votes { position: absolute; top: 0; inset-inline-end: 2px; min-width: 24px; height: 24px; border-radius: 12px; background: var(--blood); color: #fff; font-weight: 900; font-size: 14px; display: flex; align-items: center; justify-content: center; padding: 0 6px; box-shadow: 0 2px 6px #000; }
.seat .who { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.seat .who .face { --fs: 18px; border-width: 1px; margin-inline-end: -5px; }
.prompt { padding: 4px 2px 10px; display: flex; flex-direction: column; gap: 6px; }
.prompt h3 { margin: 2px 0; font-size: 18px; text-align: center; }
.note { margin: 0; text-align: center; font-weight: 600; color: #ddd2c4; }
.note.small { font-size: 12.5px; color: var(--text-dim); }
.note.lull { font-size: 16px; color: #ffc6e8; }
.ghostnote { color: #bcd0ff; }
.steptag { margin: 0; text-align: center; font-size: 12px; color: var(--moon); font-style: italic; }
.mebar { flex: none; display: flex; gap: 8px; align-items: center; padding: 6px 10px calc(env(safe-area-inset-bottom) + 8px); border-top: 1px solid var(--line); background: rgba(10, 6, 14, 0.85); }
.mycard { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: var(--ink-3); border: 1px dashed rgba(233, 185, 73, 0.5); font-weight: 700; font-size: 14px; }
.mycard .eye { font-size: 18px; }
.hidden-role { filter: blur(7px); transition: filter 0.2s; margin-inline-start: auto; }
.mycard:active .hidden-role { filter: none; }
.ghost .stage { filter: saturate(0.6); }
.dark .seat video { filter: blur(10px) brightness(0.5); } /* night: cameras are dimmed on every screen ("eyes closed") */
.secret { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; background: rgba(5, 3, 8, 0.82); animation: fade 0.2s; }
.secret-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px; border-radius: 20px; background: var(--ink-2); border: 2px solid var(--ok); max-width: 86vw; text-align: center; animation: flipin 0.4s; }
.secret.yes .secret-box { border-color: var(--blood); box-shadow: 0 0 40px rgba(192, 49, 63, 0.6); }
.secret-box .face { --fs: 96px; }
.secret-box b { font-size: 22px; }

/* night tasks */
.quest { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.qcard { background: rgba(159, 184, 255, 0.07); border: 1px solid rgba(159, 184, 255, 0.22); border-radius: 14px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.qcard b { font-size: 14px; }
.quest .field { height: 44px; font-size: 16px; }
.phrase { font-size: 17px; font-weight: 700; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); letter-spacing: 0.01em; }
.phrase .ok { color: #6fe39b; }
.phrase.bad { box-shadow: inset 0 0 0 2px var(--blood); }
.windows { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.win { aspect-ratio: 3 / 4; border-radius: 8px 8px 3px 3px; background: linear-gradient(#1a2033, #0e1220); border: 2px solid #3a3f58; transition: background 0.15s; }
.win.lit { background: radial-gradient(circle at 50% 40%, #ffe6a0, #e9a93a); border-color: #ffd36e; box-shadow: 0 0 14px rgba(255, 200, 90, 0.7); }
.win.got { background: #3fbf74; border-color: #9ff0bf; }
.notes { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.notes small { color: #ddd; font-weight: 700; }
.pnote { margin: 0; padding: 5px 12px; border-radius: 4px; background: #f3e7c9; color: #2b2015; font: italic 600 14px/1.3 var(--font); transform: rotate(-1deg); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); max-width: 92%; }
.pnote:nth-child(odd) { transform: rotate(1.2deg); }
.clues { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: #ffe2a0; }

/* recap, chat */
.logrow { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.logrow span { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.logrow .vvs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.vv { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--text-dim); }
.chatlist { max-height: 46dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 0 10px; }
.cmsg { display: flex; gap: 8px; align-items: flex-start; }
.cmsg div { background: rgba(192, 49, 63, 0.16); border: 1px solid rgba(192, 49, 63, 0.35); border-radius: 12px; padding: 5px 10px; max-width: 80%; }
.cmsg.mine div { background: rgba(255, 255, 255, 0.07); border-color: var(--line); }
.cmsg small { color: var(--text-dim); font-weight: 700; font-size: 11px; }
.cmsg p { margin: 0; user-select: text; -webkit-user-select: text; }
.chatin { display: flex; gap: 8px; }

/* laptops and TVs: the stage left, the town right */
body.wide .cols { flex-direction: row; gap: 14px; padding: 0 14px 10px; overflow: hidden; }
body.wide .stage { flex: 1.25; margin: 0; min-height: 0; }
body.wide .scene { background-position: center; }
body.wide .side { flex: 1; overflow-y: auto; padding: 0; }
body.wide .seat .face { --fs: 74px; }
.tv .seat .face, body.wide .tv .seat .face { --fs: 92px; }
.tv .seat .nm { font-size: 16px; }
.tv .prompt h3 { font-size: 26px; }
.tv .seat .who .face { --fs: 26px; }
body.wide .seat .nm { font-size: 14px; }
body.wide .stage .bubble { font-size: 20px; }
body.wide .stage .host-say .hostface { width: 72px; height: 72px; }
body.wide .news h2 { font-size: 28px; }
body.wide .phase { font-size: 30px; }

/* ---------------------------------------------------------------- sheets */
.sheet-bg { position: fixed; inset: 0; z-index: 70; background: rgba(5, 3, 8, 0.6); animation: fade 0.18s; }
.sheet { position: fixed; z-index: 71; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100vw, 560px); max-height: 84dvh; overflow-y: auto; background: #1d1622; border-radius: 20px 20px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.1); padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); animation: sheet-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1); box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.5); }
@keyframes sheet-in { from { transform: translate(-50%, 40px); opacity: 0; } }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); margin: 0 auto 8px; }
.sheet h2 { margin: 4px 0 10px; font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.sheet h2 .x { margin-inline-start: auto; }
.sheet .rolecard { max-width: none; }
.rule { display: flex; gap: 10px; padding: 7px 0; font-size: 14.5px; font-weight: 500; }
.rule b { font-size: 20px; width: 26px; flex: none; text-align: center; }
.vol { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-weight: 700; font-size: 14px; }
.vol span { width: 72px; }
.vol input { flex: 1; accent-color: var(--gold); }
.unlock { position: fixed; z-index: 80; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 90px); padding: 10px 16px; border-radius: 99px; background: var(--gold); color: #2a1a02; font-weight: 800; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5); animation: pulse 1.6s infinite; }

/* ---------------------------------------------------------------- the call (from Code Names) */
.icon-btn.callbtn { width: auto; min-width: 38px; padding: 0 9px; border-radius: 99px; font-size: 15px; white-space: nowrap; }
.topbar .icon-btn.callbtn { width: auto; min-width: 32px; padding: 0 7px; font-size: 13px; }
.callbtn.incall { background: #2e9e5b; border-color: #5fe39a; box-shadow: 0 0 0 3px rgba(63, 191, 116, 0.35); }
.callbtn.live { border-color: #5fe39a; animation: callwait 1.6s infinite; }
@keyframes callwait { 50% { box-shadow: 0 0 0 4px rgba(63, 191, 116, 0.45); } }
.btn.callgo { background: linear-gradient(180deg, #4fd28a, #2e9e5b); color: #04210f; border: 0; box-shadow: 0 3px 0 #1d6e3e; }
.btn.hangup { background: linear-gradient(180deg, #f06a55, #c8402b); color: #fff; border: 0; box-shadow: 0 3px 0 #8a2617; }
.ring { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; background: rgba(8, 10, 18, 0.97); backdrop-filter: blur(8px); }
.ring-box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; text-align: center; width: min(92vw, 420px); }
.ring-face .face { --fs: 128px; border: 3px solid #5fe39a; animation: ringpulse 1.3s infinite; }
@keyframes ringpulse { 0% { box-shadow: 0 0 0 0 rgba(95, 227, 154, 0.6); } 100% { box-shadow: 0 0 0 26px rgba(95, 227, 154, 0); } }
.ring-name { font-size: 24px; font-weight: 800; line-height: 1.25; }
.ring-kind { font-size: 16px; font-weight: 700; color: var(--text-dim); }
.ring-btns { display: flex; gap: 48px; margin-top: 26px; }
.ring-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--text); background: none; border: 0; }
.ring-btn b { width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; }
.ring-btn.no b { background: #d8462f; }
.ring-btn.yes b { background: #2e9e5b; animation: pulse 1.2s infinite; }
.callnote { margin: 6px 0; padding: 8px 10px; border-radius: 10px; background: var(--ink-3); font-weight: 600; font-size: 13.5px; }
.callnote.team { background: rgba(63, 191, 116, 0.16); border: 1px solid rgba(63, 191, 116, 0.35); }
.btn.callgo { background: linear-gradient(180deg, #4fd28a, #2e9e5b); color: #04210f; border: 0; box-shadow: 0 3px 0 #1d6e3e; }
.btn.hangup { background: linear-gradient(180deg, #f06a55, #c8402b); color: #fff; border: 0; box-shadow: 0 3px 0 #8a2617; }

/* phones stay upright (owner 10-12): upright.js turns the page back when a phone is sideways */
html.lockp body { position: fixed; top: 0; left: 0; width: 100vh; height: 100vw; overflow: hidden; transform-origin: top left; }
html.a90 body { transform: rotate(-90deg) translateX(-100%); }
html.a270 body { transform: rotate(90deg) translateY(-100%); }
html.lockp .app { height: 100%; }
html.lockp .sheet { width: min(100vh, 560px); max-height: 82vw; }
html.lockp .toast { max-width: min(92vh, 480px); }
html.lockp .ring-box { width: min(92vh, 420px); }