:root {
  --bg: rgba(10, 14, 24, 0.82);
  --fg: #e7edf7;
  --muted: #8d9ab0;
  --accent: #4fc3f7;
  --danger: #ef5350;
  --border: rgba(120, 160, 220, 0.25);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #05060c; color: var(--fg);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--danger); min-height: 1.2em; margin: 6px 0 0; }

.overlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(3, 5, 12, 0.45); z-index: 20; padding: 16px;
}
.card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 14px;
  padding: 24px 26px; width: min(420px, 100%); backdrop-filter: blur(6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.card h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: 0.04em; }
.card .sub { margin: 0 0 18px; color: var(--muted); }
label, .field { display: block; margin: 12px 0; font-weight: 600; }
input {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit;
  color: var(--fg); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border); border-radius: 8px; outline: none;
}
input:focus { border-color: var(--accent); }
#colors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
.swatch {
  aspect-ratio: 1; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
}
.swatch.selected { border-color: #fff; transform: scale(1.08); }
.swatch:disabled { opacity: 0.18; cursor: not-allowed; }
button {
  font: inherit; color: var(--fg); background: rgba(79, 195, 247, 0.18);
  border: 1px solid var(--accent); border-radius: 8px; padding: 9px 14px; cursor: pointer;
}
button:hover:not(:disabled) { background: rgba(79, 195, 247, 0.3); }
button:disabled { opacity: 0.5; cursor: default; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.modes button { padding: 11px 10px; font-weight: 700; font-size: 16px; text-align: center; }
.modes button small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.3; }
#practice { background: rgba(255, 183, 77, 0.14); border-color: #ffb74d; }
#practice:hover:not(:disabled) { background: rgba(255, 183, 77, 0.26); }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#hud button { pointer-events: auto; }
.panel {
  position: absolute; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
}
#panel-players { top: 12px; left: 12px; min-width: 220px; max-width: 300px; }
.panel-head { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
#players { list-style: none; margin: 0; padding: 0; }
#players li { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 6px; }
#players li.speaking { background: rgba(102, 187, 106, 0.22); }
#players li.away { opacity: 0.5; }
#players .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.3); }
#players .pname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#players .ping { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
#panel-status { top: 12px; right: 12px; text-align: right; min-width: 150px; }
#ping, #stats { font-variant-numeric: tabular-nums; }
#stats { color: #ffca28; margin-top: 2px; }
#bar {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; align-items: center;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 8px;
}
#bar button.active { background: rgba(239, 83, 80, 0.25); border-color: var(--danger); }
#btn-mode.active { background: rgba(255, 202, 40, 0.2); border-color: #ffca28; }
#me-speaking {
  width: 14px; height: 14px; border-radius: 50%; margin: 0 4px;
  background: #3a4252; transition: background 0.1s, box-shadow 0.1s;
}
#me-speaking.tx { background: #5b6b55; }
#me-speaking.on { background: #66bb6a; box-shadow: 0 0 10px #66bb6a; }
#help { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; text-shadow: 0 1px 2px #000; }
#click-hint {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--bg); padding: 10px 16px; border-radius: 10px; border: 1px solid var(--border);
}

#labels { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.label {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-weight: 700; font-size: 13px; text-shadow: 0 1px 3px #000, 0 0 2px #000;
  display: flex; gap: 4px; align-items: center; will-change: transform;
}
.label .spk { opacity: 0; transition: opacity 0.12s; }
.label.speaking .spk { opacity: 1; }
.label.speaking .n { color: #a5f3a8; }

@media (max-width: 640px) {
  #panel-players { min-width: 0; max-width: 46vw; font-size: 12px; }
  #help { display: none; }
}

#render-error {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 15;
  max-width: min(520px, calc(100% - 32px)); background: var(--bg); border: 1px solid var(--danger);
  border-radius: 10px; padding: 12px 16px; pointer-events: none;
}

/* ------------------------------------------------------------ install hints */
.tip {
  margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; font-size: 13px;
  background: rgba(79, 195, 247, 0.12); border: 1px solid var(--border);
}
.share-icon { display: inline-block; padding: 0 3px; border: 1px solid var(--muted); border-radius: 4px; font-size: 11px; }
.tip-btn { width: 100%; margin-top: 10px; }

/* ------------------------------------------------------------ touch devices */
body {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
input { -webkit-user-select: text; user-select: text; }
button { touch-action: manipulation; }
body.touch input { font-size: 16px; } /* iOS zooms into smaller inputs */

#touch-layer { position: fixed; inset: 0; z-index: 8; touch-action: none; }
#stick {
  --size: 124px;
  position: absolute; width: var(--size); height: var(--size);
  left: calc(env(safe-area-inset-left) + 96px);
  top: calc(100% - env(safe-area-inset-bottom) - 96px);
  transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06); opacity: 0.5; pointer-events: none;
  transition: opacity 0.15s;
}
#stick.active { opacity: 1; transition: none; }
#knob {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.4); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

#btn-ptt {
  position: absolute; width: 96px; height: 96px; border-radius: 50%;
  right: calc(env(safe-area-inset-right) + 28px); bottom: calc(env(safe-area-inset-bottom) + 34px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 30px; line-height: 1; touch-action: none;
  background: rgba(10, 14, 24, 0.6); border: 2px solid rgba(255, 255, 255, 0.35);
}
#btn-ptt span { font-size: 11px; font-weight: 600; }
#btn-ptt.down { background: rgba(102, 187, 106, 0.45); border-color: #66bb6a; box-shadow: 0 0 18px #66bb6a; }
#btn-fs { margin-top: 6px; padding: 4px 8px; font-size: 12px; }

body.touch #help { display: none; }
body.touch .label { font-size: 12px; }
body.touch #panel-players {
  top: calc(env(safe-area-inset-top) + 8px); left: calc(env(safe-area-inset-left) + 8px);
  min-width: 0; max-width: 34vw; max-height: 48vh; overflow: hidden; padding: 6px 8px; font-size: 12px;
}
body.touch #panel-status {
  top: calc(env(safe-area-inset-top) + 8px); right: calc(env(safe-area-inset-right) + 8px);
  min-width: 0; padding: 6px 8px; font-size: 12px;
}
body.touch #bar { bottom: calc(env(safe-area-inset-bottom) + 10px); padding: 6px; gap: 6px; }
body.touch #bar button { padding: 8px 12px; }

/* Landscape only, in game, on touch devices. */
#rotate { display: none; z-index: 30; background: #05060c; }
.rotate-icon { font-size: 44px; text-align: center; }
#rotate h1 { text-align: center; }
#rotate p { text-align: center; margin: 4px 0 0; }
@media (orientation: portrait) {
  body.touch.in-game #rotate { display: grid; }
}

/* Short screens (phones in landscape): compact, scrollable lobby. */
@media (max-height: 540px) {
  .overlay { place-items: start center; overflow-y: auto; padding: 10px; }
  .card { padding: 14px 18px; }
  .card h1 { font-size: 20px; }
  .card .sub { display: none; }
  label, .field { margin: 8px 0; }
  input { padding: 8px 10px; }
  #colors { grid-template-columns: repeat(12, 1fr); gap: 6px; }
  #lobby .card { width: min(560px, 100%); }
}

/* ------------------------------------------------------------ the round */
#round-top {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(440px, 46vw);
}
#taskbar {
  position: relative; width: 100%; height: 22px; border-radius: 11px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border);
}
#taskbar .fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(#7bd88f, #43a047); transition: width 0.4s; }
#taskbar span { position: relative; display: block; text-align: center; font-size: 12px; font-weight: 700; line-height: 20px; text-shadow: 0 1px 2px #000; }
#banner {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px;
  text-align: center; font-size: 13px;
}
#btn-start { font-weight: 700; padding: 10px 18px; background: rgba(102, 187, 106, 0.3); border-color: #66bb6a; }
#panel-tasks { top: 12px; left: 12px; min-width: 220px; max-width: 300px; }
body.playing #panel-players { display: none; }
#tasks { list-style: none; margin: 0; padding: 0; }
#tasks li { display: grid; grid-template-columns: 16px 1fr auto; gap: 6px; padding: 2px 0; align-items: baseline; }
#tasks li .room { font-size: 11px; }
#tasks li.done { color: #7bd88f; }
#tasks li.done span:nth-child(2) { text-decoration: line-through; opacity: 0.7; }
.impostor, .label.impostor .n { color: #ff6b6b !important; }

#actions {
  position: absolute; right: calc(env(safe-area-inset-right) + 18px); bottom: 90px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
#actions button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 96px; min-height: 76px; max-width: 150px; border-radius: 16px; font-size: 26px; line-height: 1;
  background: rgba(10, 14, 24, 0.7); border: 2px solid rgba(255, 255, 255, 0.35);
}
#actions button span { font-size: 11px; font-weight: 700; line-height: 1.2; }
#actions button:not(:disabled) { border-color: #ffca28; box-shadow: 0 0 14px rgba(255, 202, 40, 0.5); }
#btn-kill:not(:disabled) { border-color: #ef5350 !important; box-shadow: 0 0 14px rgba(239, 83, 80, 0.6) !important; }
body.touch #actions { bottom: calc(env(safe-area-inset-bottom) + 146px); }

#markers { position: fixed; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.marker {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
  background: #ffca28; color: #222; font-weight: 900; text-align: center; line-height: 22px;
  box-shadow: 0 0 10px rgba(255, 202, 40, 0.8); will-change: transform;
}
.marker.near { animation: pulse 0.8s infinite alternate; }
@keyframes pulse { to { box-shadow: 0 0 20px #ffca28; } }

#reveal {
  position: fixed; top: 22%; left: 50%; transform: translateX(-50%); z-index: 22; pointer-events: none;
  width: min(520px, calc(100% - 32px)); text-align: center; padding: 18px 22px; border-radius: 14px;
  background: rgba(10, 14, 24, 0.88); border: 2px solid var(--border); animation: pop 0.25s ease-out;
}
#reveal.crew { border-color: #4fc3f7; }
#reveal.imp { border-color: #ef5350; }
#reveal .role { font-size: 28px; font-weight: 800; letter-spacing: 0.02em; }
#reveal .role.crew { color: #4fc3f7; }
#reveal .role.imp { color: #ff6b6b; }
#reveal p { margin: 8px 0 0; }
#reveal .big { font-size: 20px; font-weight: 700; }
@keyframes pop { from { transform: translateX(-50%) scale(0.85); opacity: 0; } }
body.ghost canvas#game { filter: saturate(0.45) brightness(0.95); }

/* ------------------------------------------------------------ task minigames */
#task { z-index: 25; background: rgba(3, 5, 12, 0.55); }
.task-card {
  width: min(600px, 100%); background: #1a2233; border: 2px solid var(--border); border-radius: 14px;
  padding: 10px 12px 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.task-card.task-ok { border-color: #66bb6a; }
.task-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.task-title { font-weight: 800; font-size: 17px; }
.task-room { color: var(--muted); font-size: 12px; flex: 1; }
.task-close { padding: 4px 10px; }
.task-status { margin-top: 8px; text-align: center; min-height: 1.4em; color: #ffe082; }
.task-ok .task-status { color: #7bd88f; font-weight: 700; }
.mg-area {
  position: relative; width: 100%; height: min(300px, 56vh); border-radius: 10px; overflow: hidden;
  background: #2b3448; touch-action: none;
}
.shake { animation: shake 0.35s; }
@keyframes shake { 25% { translate: -8px 0; } 50% { translate: 8px 0; } 75% { translate: -4px 0; } }
.gone { opacity: 0; transform: scale(0.3) rotate(40deg) !important; transition: all 0.3s; pointer-events: none; }
.dragging { z-index: 5; cursor: grabbing; }
.lines { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.lines i { display: block; height: 3px; background: #c9ccd3; border-radius: 2px; }
.lines i:nth-child(2) { width: 80%; }
.lines i:nth-child(3) { width: 60%; }

/* printer */
.printer { position: absolute; left: 22%; right: 22%; top: 14%; bottom: 14%; background: #d7dbe2; border-radius: 12px; box-shadow: inset 0 -10px 0 #b7bcc6; }
.printer-slot { position: absolute; left: 8%; right: 8%; top: 18%; height: 54%; background: #3a3f4a; border-radius: 6px; }
.printer-panel { position: absolute; right: 6%; bottom: 8%; width: 20%; height: 10%; background: #6b7487; border-radius: 3px; }
.sheet {
  position: absolute; width: 18%; height: 30%; background: #f6f6f0; border-radius: 2px; cursor: grab;
  transform: rotate(var(--r)); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  background-image: linear-gradient(135deg, transparent 45%, rgba(0,0,0,0.12) 50%, transparent 55%), linear-gradient(45deg, transparent 40%, rgba(0,0,0,0.1) 50%, transparent 60%);
}

/* mail */
.mail { display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 10px; }
.letter { position: relative; width: min(240px, 60%); padding: 12px 14px; background: #f3efe3; color: #333; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.4); }
.letter .stamp { position: absolute; right: 10px; top: 10px; width: 26px; height: 30px; border-radius: 2px; }
.letter .to { font-size: 16px; }
.holes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.hole { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; background: #5d4630; border-color: #8a6a48; font-weight: 700; }
.hole .tag { width: 30px; height: 8px; border-radius: 2px; }

/* coffee */
.coffee-machine { position: absolute; left: calc(40% - 60px); top: 0; width: 120px; height: 30%; background: #444b59; border-radius: 0 0 10px 10px; }
.coffee-machine::after { content: ''; position: absolute; left: 48px; bottom: -10px; width: 24px; height: 12px; background: #2a2f3a; border-radius: 0 0 4px 4px; }
.coffee-stream { position: absolute; left: calc(40% - 5px); top: 30%; bottom: 118px; width: 10px; background: #5d3a1a; transform: scaleY(0); transform-origin: top; transition: transform 0.12s; }
.coffee-stream.on { transform: scaleY(1); }
.cup { position: absolute; left: calc(40% - 45px); bottom: 8px; width: 90px; height: 110px; background: rgba(255,255,255,0.12); border: 4px solid #eee; border-top: none; border-radius: 0 0 18px 18px; overflow: hidden; }
.cup-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(#a0703f, #5d3a1a); }
.cup-band { position: absolute; left: 0; right: 0; border-top: 2px dashed #7bd88f; border-bottom: 2px dashed #7bd88f; background: rgba(123, 216, 143, 0.15); }
.pour { position: absolute; right: 16px; bottom: 16px; padding: 22px 20px; font-weight: 800; touch-action: none; }
.pour.down { background: rgba(160, 112, 63, 0.6); }

/* plant */
.pot { position: absolute; right: 18%; bottom: 8%; width: 110px; height: 90px; background: #b45f3c; border-radius: 4px 4px 22px 22px; --wet: 0; }
.pot .soil { position: absolute; left: 6px; right: 6px; top: 4px; height: 14px; border-radius: 7px; background: rgb(calc(170 - var(--wet) * 110), calc(130 - var(--wet) * 90), calc(80 - var(--wet) * 60)); }
.leaf { position: absolute; bottom: 80px; width: 22px; height: 60px; background: #5a9e4b; border-radius: 50% 50% 40% 40%; transform-origin: bottom center; }
.leaf.l1 { left: 22px; transform: rotate(-25deg); }
.leaf.l2 { left: 44px; height: 80px; }
.leaf.l3 { left: 66px; transform: rotate(25deg); }
.can { position: absolute; left: 10%; top: 12%; width: 110px; height: 80px; cursor: grab; transition: transform 0.15s; transform-origin: 40% 60%; }
.can-body { position: absolute; left: 20px; top: 22px; width: 60px; height: 52px; background: #4f9fd8; border-radius: 8px 8px 12px 12px; box-shadow: inset -8px 0 0 rgba(0,0,0,0.15); }
.can-spout { position: absolute; left: 70px; top: 30px; width: 44px; height: 10px; background: #4f9fd8; border-radius: 4px; transform: rotate(-35deg); transform-origin: left center; }
.can-spout::after { content: ''; position: absolute; right: -6px; top: -5px; width: 10px; height: 20px; background: #3b82b8; border-radius: 3px; }
.can-handle { position: absolute; left: 6px; top: 6px; width: 46px; height: 40px; border: 7px solid #3b82b8; border-right: none; border-bottom: none; border-radius: 22px 0 0 0; }
.can.pouring { transform: rotate(30deg); }
.meter { position: absolute; left: 10%; bottom: 10%; width: 36%; height: 14px; border-radius: 7px; background: rgba(255,255,255,0.12); overflow: hidden; }
.meter-fill { height: 100%; width: 0; background: #4fc3f7; }

/* server */
.server { display: flex; align-items: center; justify-content: center; gap: 30px; }
.sticky { padding: 16px 18px; background: #ffe066; color: #333; transform: rotate(-4deg); font-size: 14px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.4); }
.sticky b { font-size: 26px; letter-spacing: 0.1em; }
.keypad { display: grid; grid-template-columns: repeat(3, 56px); gap: 6px; }
.pin-display { grid-column: 1 / -1; text-align: center; padding: 8px; background: #0b1a0b; color: #66ff88; font: 700 22px monospace; letter-spacing: 0.3em; border-radius: 6px; }
.pin-display.ok { color: #7bd88f; }
.key { padding: 10px 0; font-size: 18px; font-weight: 700; }
@media (max-height: 420px) { .keypad { grid-template-columns: repeat(6, 46px); } .key { padding: 6px 0; } }

/* shred */
.shredder { position: absolute; left: 66%; top: 18%; width: 28%; height: 64%; background: #3d4352; border-radius: 10px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; font-weight: 800; color: #ef5350; letter-spacing: 0.15em; }
.shredder-slot { position: absolute; left: 10%; right: 10%; top: 14px; height: 8px; background: #111; border-radius: 4px; }
.doc { position: absolute; width: 16%; height: 40%; padding: 6px; background: #fbfbf7; color: #333; border-radius: 3px; cursor: grab; transform: rotate(var(--r)); box-shadow: 0 2px 6px rgba(0,0,0,0.4); font-size: 11px; overflow: hidden; }
.doc-title { font-weight: 700; }
.doc-stamp { position: absolute; left: 2px; right: 2px; bottom: 16%; transform: rotate(-12deg); border: 2px solid #d32f2f; color: #d32f2f; font-size: 8px; font-weight: 900; text-align: center; }
.shredded { transform: translateY(40px) scaleY(0.2) !important; }

/* fuses */
.fuses { display: flex; align-items: center; justify-content: center; }
.breaker-box { display: flex; gap: 10px; padding: 16px; background: #59606e; border-radius: 10px; box-shadow: inset 0 0 0 4px #474d59; }
.breaker { position: relative; width: 52px; height: 130px; padding: 0; background: #2b2f38; border-color: #1c1f25; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 0; }
.breaker .lamp { width: 14px; height: 14px; border-radius: 50%; background: #ef5350; box-shadow: 0 0 8px #ef5350; }
.breaker .lever { width: 26px; height: 50px; border-radius: 5px; background: #ddd; transform: translateY(18px); transition: transform 0.12s; }
.breaker.on .lamp { background: #66bb6a; box-shadow: 0 0 8px #66bb6a; }
.breaker.on .lever { transform: translateY(-18px); }

/* screen */
.screen { display: flex; align-items: center; justify-content: center; background: #4a3f36; }
.tv { position: relative; width: 82%; aspect-ratio: 16 / 9; max-height: 88%; border: 10px solid #111; border-radius: 6px; }
.tv canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tv-dirt { cursor: crosshair; touch-action: none; }

/* phones in landscape */
@media (max-height: 540px) {
  #task { place-items: center; padding: 6px; }
  .task-card { padding: 6px 8px 8px; }
  .task-head { margin-bottom: 4px; }
  .mg-area { height: calc(100vh - 110px); }
  #round-top { top: calc(env(safe-area-inset-top) + 8px); }
  #reveal { top: 12%; padding: 10px 14px; }
  #reveal .role { font-size: 22px; }
}
body.touch #panel-tasks {
  top: calc(env(safe-area-inset-top) + 8px); left: calc(env(safe-area-inset-left) + 8px);
  min-width: 0; max-width: 32vw; padding: 6px 8px; font-size: 11px;
}
body.touch #tasks li .room { display: none; }

/* ------------------------------------------------------------ meetings, powers, sabotage */
#actions { flex-wrap: wrap-reverse; max-height: calc(100vh - 120px); align-content: flex-end; }
#actions button.small-act { min-height: 56px; min-width: 84px; font-size: 20px; }
#btn-ability:not(:disabled) { border-color: #4fc3f7 !important; box-shadow: 0 0 14px rgba(79, 195, 247, 0.6) !important; }
#btn-report:not(:disabled) { border-color: #ff7043 !important; box-shadow: 0 0 16px rgba(255, 112, 67, 0.7) !important; }
#btn-lights:not(:disabled), #btn-lock:not(:disabled) { border-color: #ef5350 !important; box-shadow: none !important; }
#lock-menu {
  position: absolute; right: calc(env(safe-area-inset-right) + 130px); bottom: 90px; pointer-events: auto;
  display: flex; flex-direction: column; gap: 6px; min-width: 200px;
}
#lock-rooms { display: flex; flex-direction: column; gap: 6px; }
#lock-menu button { text-align: left; }

#notes { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; font-size: 13px; }
#notes div { padding: 1px 0; }
.clean { color: #7bd88f; }

#dark {
  position: fixed; inset: 0; pointer-events: none; z-index: 4; opacity: 0; transition: opacity 0.6s;
  background: radial-gradient(circle at 50% 55%, transparent 0, transparent 14vmin, rgba(0, 0, 0, 0.9) 42vmin);
}
body.dark #dark { opacity: 1; }

#toasts {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 23; pointer-events: none;
  display: flex; flex-direction: column; gap: 6px; align-items: center; width: min(520px, 92vw);
}
.toast {
  background: rgba(10, 14, 24, 0.92); border: 1px solid var(--border); border-radius: 10px; padding: 8px 14px;
  font-size: 14px; text-align: center; animation: toast-in 0.25s ease-out;
}
.toast.bad { border-color: #ef5350; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } }

#meeting {
  position: fixed; inset: 0; z-index: 21; display: grid; place-items: center; padding: 12px;
  background: rgba(3, 5, 12, 0.35); pointer-events: none;
}
#meeting[hidden] { display: none; }
.m-card {
  pointer-events: auto; width: min(760px, 100%); max-height: 100%; overflow: auto;
  background: rgba(12, 16, 28, 0.94); border: 2px solid #ff7043; border-radius: 16px; padding: 14px 16px;
}
.m-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#m-title { font-size: 22px; font-weight: 800; }
#m-timer { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: #ffca28; }
#m-sub { margin: 4px 0 10px; font-size: 14px; }
#m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.m-player {
  display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  text-align: left; padding: 8px 10px; border-radius: 10px; min-height: 52px;
  background: rgba(255, 255, 255, 0.06); border: 2px solid transparent;
}
.m-player .dot { width: 16px; height: 16px; border-radius: 50%; grid-row: span 2; }
.m-player .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-player .st { font-size: 12px; color: var(--muted, #9aa3b2); min-height: 14px; }
.m-player.out { opacity: 0.45; }
.m-player.selected { border-color: #ffca28; background: rgba(255, 202, 40, 0.15); }
.m-player.mine { border-color: #4fc3f7; }
.m-player.fired { border-color: #ef5350; opacity: 1; }
.m-player:disabled { cursor: default; opacity: 1; }
.m-player.out:disabled { opacity: 0.45; }
.m-player .voters { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.m-player .voters i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.m-foot { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
#m-confirm { font-weight: 800; background: rgba(255, 202, 40, 0.25); border-color: #ffca28; }
.m-skipvotes { font-size: 13px; }

@media (max-height: 500px) {
  .m-card { padding: 8px 10px; }
  #m-title { font-size: 17px; }
  #m-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 5px; }
  .m-player { min-height: 40px; padding: 5px 8px; }
  #actions button.small-act { min-height: 46px; min-width: 70px; }
}

/* Practice sandbox */
#btn-practice { padding: 6px 14px; background: rgba(255, 183, 77, 0.2); border-color: #ffb74d; font-weight: 700; }
body.touch #btn-practice .key { display: none; }
body.practice #btn-mute, body.practice #btn-mode, body.practice #voice-status, body.practice #me-speaking { display: none; }
#practice-menu {
  top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: auto; z-index: 15;
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto;
  border-color: #ffb74d;
}
#practice-menu .panel-head .muted { text-transform: none; letter-spacing: 0; }
.pm-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.pm-label { width: 64px; line-height: 1.2; color: var(--muted); font-size: 12px; }
.pm-row button.on { background: rgba(255, 183, 77, 0.35); border-color: #ffb74d; font-weight: 700; }
#pm-tip { margin: 10px 0; line-height: 1.45; }
.pm-foot { border-top: 1px solid var(--border); padding-top: 10px; }
#pm-close { margin-left: auto; }
#btn-practice .key { font-size: 12px; font-weight: 400; color: var(--muted); }