:root {
  color-scheme: dark;
  font-family: Inter, "Be Vietnam Pro", system-ui, sans-serif;
  color: #edf2f8;
  background: #05070a;
  --panel: #0f151f;
  --glass: rgba(10, 14, 20, .78);
  --line: rgba(171, 194, 222, .14);
  --muted: #8d9aaa;
  --accent: #e7b85e;
  --blue: #83aee7;
}

* { box-sizing: border-box; }
/* Kín màn hình như trang chánh điện: trang không cuộn, không kéo nảy; chỉ ngăn kéo (hàng chờ, chat) cuộn bên trong. */
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 320px; background: #05070a; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.room-shell { position: fixed; inset: 0; display: flex; flex-direction: column; padding: 0 env(safe-area-inset-right, 0) 0 env(safe-area-inset-left, 0); }
/* Đi nhanh sang map khác (các khu của chùa). */
.quick-travel { position: relative; }
.quick-travel-toggle { min-height: 36px; padding: 0 12px; color: var(--accent); background: var(--glass); border: 1px solid rgba(231, 184, 94, .35); border-radius: 999px; font-size: 12px; cursor: pointer; }
.quick-travel-panel { position: absolute; z-index: 12; left: 0; top: calc(100% + 6px); width: 180px; display: grid; gap: 5px; padding: 6px; background: #111925; border: 1px solid #314157; border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, .6); }
.quick-travel-panel button { min-height: 40px; padding: 0 10px; color: #e7edf5; background: #182231; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; text-align: left; cursor: pointer; }
.quick-travel-panel button[aria-current="true"] { color: #1a1206; background: var(--accent); font-weight: 700; }
.connection { display: inline-flex; align-items: center; }
.connection i { width: 7px; height: 7px; background: #6f7883; border-radius: 50%; }
.connection.online i { background: #79d18f; box-shadow: 0 0 12px #79d18f; }
.connection.connecting i { background: #e4b95f; }

.room-layout { flex: 1; min-height: 0; }

/* Khán phòng chiếm cả trang; các thanh giao diện nổi trên cảnh, iframe YouTube đặt đúng khung màn chiếu. */
.stage { position: relative; height: 100%; min-height: 0; overflow: hidden; background: #05070a; container-type: inline-size; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.stage input { -webkit-user-select: text; user-select: text; }
.stage.fake-full { position: fixed; z-index: 20; inset: 0; height: 100%; border-radius: 0; }
#scene, #scene3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; touch-action: manipulation; }
/* Rạp 3D tự xử lý chạm (đi, chọn ghế): trình duyệt không cuộn/phóng trang khi kéo trên khán phòng. */
#scene3d { touch-action: none; }
.screen-slot { position: absolute; z-index: 2; overflow: hidden; background: #000; }
/* Góc "Khán giả" của rạp 3D quay lưng về màn chiếu: player thu thành khung nhỏ ở góc, vẫn hiện đủ, không bị che. */
.screen-slot.pip { border: 1px solid rgba(231, 184, 94, .55); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.screen-slot #player, .screen-slot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.screen-idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; color: #9fb6d6; text-align: center; background: radial-gradient(circle at 50% 40%, #1b2c42, #070b11 72%); }
.screen-idle strong { font-family: Georgia, serif; font-size: clamp(15px, 2.2vw, 24px); font-weight: 500; }
.screen-idle span { max-width: 80%; color: #6f839c; font-size: 11px; }

/* Màn tải lúc mở trang (che khung nhập tên tới khi biết vào thẳng hay cần nhập). */
.boot { position: absolute; z-index: 40; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 38%, #1b2536, #05070a 70%); transition: opacity .3s ease; }
.boot.boot-out { opacity: 0; pointer-events: none; }
.boot-card { width: min(78%, 300px); display: grid; justify-items: center; gap: 10px; text-align: center; }
.boot-title { margin: 0 0 6px; color: var(--accent); font-family: Georgia, serif; font-size: 24px; }
.boot-step { min-height: 1.4em; margin: 0; color: #dbe5f2; font-size: 14px; }
.boot-bar { width: 100%; height: 8px; overflow: hidden; background: rgba(255, 255, 255, .08); border: 1px solid rgba(231, 184, 94, .35); border-radius: 999px; }
.boot-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #b8862e, #ffe296); border-radius: 999px; }
.boot-pct { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.hud { position: absolute; z-index: 3; }
.stage.hud-off .hud, .stage.hud-off .reaction-picker { display: none; }
.hud button { cursor: pointer; }
.glass { background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(8px); }

/* Thanh trên: hàng tên phòng + đi nhanh (trái), trạng thái phòng (giữa), nút nhanh (phải); dưới là đang chiếu + vote. */
.hud-top { left: 12px; right: 12px; top: max(12px, env(safe-area-inset-top, 0)); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bar actions" "now ."; align-items: start; gap: 8px 10px; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.hud-bar { grid-area: bar; justify-self: start; min-width: 0; display: flex; align-items: center; gap: 6px; }
.room-chip { display: flex; align-items: center; gap: 7px; height: 36px; margin: 0; padding: 0 12px; background: var(--glass); border: 1px solid var(--line); border-radius: 999px; font-family: Georgia, serif; font-size: 15px; font-weight: 500; white-space: nowrap; }
.hud-actions { grid-area: actions; }
.hud-now { grid-area: now; }
.hud-now { max-width: 340px; padding: 10px 12px; background: var(--glass); border: 1px solid var(--line); border-radius: 14px; }
.kicker { margin: 0 0 3px; color: var(--accent); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.now-title { margin: 0; overflow: hidden; font-size: 13px; font-weight: 650; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.now-meta { min-height: 14px; margin: 2px 0 8px; color: var(--muted); font-size: 10px; }
.vote-row { display: flex; align-items: center; gap: 8px; }
.vote-row small { color: var(--muted); font-size: 10px; line-height: 1.3; }
.skip { flex: none; height: 30px; padding: 0 10px; color: #e7edf5; background: #182231; border: 1px solid var(--line); border-radius: 9px; font-size: 11px; }
.skip:disabled { opacity: .5; cursor: default; }
.skip.voted { color: #1a1206; background: var(--accent); border-color: var(--accent); }
.skip-bar { height: 3px; margin-top: 8px; overflow: hidden; background: #182231; border-radius: 2px; }
.skip-bar i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .3s ease; }
.hud-status { height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--glass); border: 1px solid var(--line); border-radius: 999px; font-size: 11px; white-space: nowrap; }
.hud-status .live { color: var(--muted); }
.hud-status .live.on { color: #79d18f; }
.hud-actions { justify-self: end; display: flex; gap: 6px; }
.hud-actions button, .show-hud { width: 36px; height: 36px; color: #dbe5f2; background: var(--glass); border: 1px solid var(--line); border-radius: 10px; }
.hud-actions .coin { width: auto; padding: 0 10px; border-radius: 999px; white-space: nowrap; }
.hud-actions .coin b { color: var(--accent); font-variant-numeric: tabular-nums; }
.hud-actions .coin { position: relative; }
.hud-actions .coin.has-quest::after { content: ""; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; background: #ff5a5a; border: 2px solid #0b0f15; border-radius: 50%; }

/* Thanh công cụ bên phải. */
.hud-tools { right: 12px; top: 50%; transform: translateY(-50%); display: grid; gap: 4px; padding: 6px 4px; background: var(--glass); border: 1px solid var(--line); border-radius: 14px; }
.hud-tools button { position: relative; width: 58px; padding: 6px 2px; display: grid; justify-items: center; gap: 2px; color: #cfd8e3; background: transparent; border: 0; border-radius: 10px; }
.hud-tools button b { font-size: 17px; font-weight: 400; }
.hud-tools button span { font-size: 9px; }
.hud-tools button[aria-pressed="true"] { background: rgba(231, 184, 94, .18); color: var(--accent); }
.badge { position: absolute; top: 2px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; color: #1a1206; background: var(--accent); border-radius: 8px; font-size: 9px; font-style: normal; font-weight: 800; line-height: 16px; }
.reaction-picker { position: absolute; z-index: 4; right: 84px; top: 50%; display: flex; gap: 4px; padding: 6px; background: #111925; border: 1px solid #314157; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.reaction-picker button { width: 40px; height: 40px; background: transparent; border: 0; border-radius: 50%; font-size: 22px; cursor: pointer; }
.reaction-picker button:active { transform: scale(1.25); }

/* Thanh dưới: góc nhìn (trái), âm lượng (phải). Ô nhập chat nằm ngay dưới lịch sử trong ngăn Trò chuyện. */
.hud-bottom { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0)); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.cameras { display: flex; gap: 2px; padding: 4px; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; }
.cameras button { min-height: 34px; padding: 0 8px; color: #cfd8e3; background: transparent; border: 0; border-radius: 8px; font-size: 12px; white-space: nowrap; }
.cameras button span { margin-left: 4px; }
.cameras button[aria-pressed="true"] { color: #1a1206; background: var(--accent); }
.volume { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; background: var(--glass); border: 1px solid var(--line); border-radius: 12px; }
.volume button { height: 34px; min-width: 34px; color: #dbe5f2; background: transparent; border: 0; border-radius: 8px; }
.volume .unmute { padding: 0 10px; color: #1a1206; background: var(--accent); font-weight: 700; }
.volume input { width: 90px; accent-color: var(--accent); }
.volume small { width: 32px; color: var(--muted); font-size: 10px; text-align: right; }
.show-hud { position: absolute; z-index: 3; right: 12px; bottom: 12px; }
/* Cần điều khiển: kéo núm để đi (như chánh điện). */
.joystick { position: absolute; z-index: 3; left: 16px; bottom: 120px; width: 112px; height: 112px; background: rgba(10, 14, 20, .45); border: 1px solid rgba(231, 184, 94, .35); border-radius: 50%; touch-action: none; }
.joystick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; background: rgba(231, 184, 94, .85); border-radius: 50%; box-shadow: 0 4px 14px rgba(0,0,0,.5); pointer-events: none; }
.stage.hud-off .joystick, .stage.hud-off .near-sit { display: none; }

/* Xem ngang: ẩn mọi thanh, màn chiếu cao kín màn hình; vài nút nhỏ ở dải trống bên phải. */
.stage.zoom-mode .hud, .stage.zoom-mode .joystick, .stage.zoom-mode .near-sit, .stage.zoom-mode .show-hud, .stage.zoom-mode .drawer { display: none !important; }
.stage.zoom-mode .reaction-picker { left: auto; right: 64px; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; border-radius: 999px; }
.zoom-bar { position: absolute; z-index: 4; right: max(8px, env(safe-area-inset-right, 0)); top: 50%; transform: translateY(-50%); display: grid; gap: 8px; }
.zoom-bar button { width: 44px; height: 44px; color: #e7edf5; background: var(--glass); border: 1px solid var(--line); border-radius: 50%; font-size: 17px; cursor: pointer; }
.rotate-hint { position: absolute; z-index: 4; left: 50%; bottom: 46%; transform: translateX(-50%); margin: 0; padding: 8px 14px; color: #1a1206; background: var(--accent); border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.stage.zoom-mode .room-notice { bottom: 12px; }
@media (orientation: portrait) {
  .zoom-bar { top: auto; right: auto; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0)); transform: translateX(-50%); grid-auto-flow: column; }
  .stage.zoom-mode .reaction-picker { right: auto; left: 50%; top: auto; bottom: 76px; transform: translateX(-50%); flex-direction: row; }
  .stage.zoom-mode .room-notice { bottom: 76px; }
}
/* Đứng ngay trước ghế trống: nút "Ngồi" to, giữa màn, trên thanh công cụ. */
.near-sit { position: absolute; z-index: 4; left: 50%; bottom: 120px; min-width: 132px; min-height: 46px; padding: 0 20px; color: #24180d; background: linear-gradient(180deg, #ffe296, #eab447); border: 1px solid rgba(90, 55, 16, .55); border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); transform: translateX(-50%); font-size: 16px; font-weight: 800; cursor: pointer; touch-action: manipulation; }

/* Sơ đồ ghế (Đổi ghế): hàng 1 là hàng cuối rạp, màn chiếu ở trên cùng như nhìn từ ghế. */
.seat-map-screen { margin: 4px 18px 10px; padding: 3px 0; color: #9fb6d6; background: linear-gradient(#26364d, #111925); border-radius: 4px 4px 14px 14px; font-size: 9px; letter-spacing: .3em; text-align: center; }
.seat-map { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(5, 1fr) 14px repeat(5, 1fr); gap: 4px; align-content: start; }
.seat-map button { aspect-ratio: 1; min-width: 0; padding: 0; color: #f3d9a8; background: #6b1422; border: 1px solid #8a1d2e; border-radius: 6px 6px 3px 3px; font-size: 8px; cursor: pointer; }
.seat-map button.taken { color: #a7b0bd; background: #2a3240; border-color: #343e4f; cursor: not-allowed; }
.seat-map button.mine { color: #1a1206; background: var(--accent); border-color: var(--accent); font-weight: 800; }
.legend { display: inline-block; padding: 0 5px; border-radius: 4px; font-size: 9px; font-weight: 600; }
.legend.free { color: #f3d9a8; background: #6b1422; }
.legend.taken { color: #a7b0bd; background: #2a3240; }
.legend.mine { color: #1a1206; background: var(--accent); }
.legend.love { color: #ffe3ee; background: #b0245e; }
/* Ghế đôi: hai nửa sofa liền nhau, nhung hồng, trái tim ở giữa. */
.seat-map button.couple:not(.taken, .mine) { color: #ffe3ee; background: #b0245e; border-color: #d23a78; }
.seat-map button.couple-l { position: relative; margin-right: -4px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 0; }
.seat-map button.couple-r { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; }
.seat-map button.couple-l::after { content: "❤"; position: absolute; z-index: 1; right: -5px; top: 50%; transform: translateY(-50%); color: #ff8fb5; font-size: 8px; pointer-events: none; }
.room-notice { position: absolute; z-index: 3; left: 50%; bottom: 70px; transform: translateX(-50%); max-width: 90%; margin: 0; padding: 0 12px; color: var(--accent); font-size: 12px; text-align: center; text-shadow: 0 1px 4px #000; pointer-events: none; }

/* Ngăn kéo: máy tính là cột phải (bộ vẽ chừa chỗ, không đè màn chiếu). */
.drawer { position: absolute; z-index: 5; right: 12px; top: 12px; bottom: 12px; width: 340px; display: flex; flex-direction: column; padding: 14px; background: rgba(13, 19, 28, .96); border: 1px solid #314157; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.drawer-head h2 { margin: 0; font-family: Georgia, serif; font-size: 17px; font-weight: 500; }
.drawer-head button { width: 32px; height: 32px; color: #cfd8e3; background: #182231; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.drawer-part { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.part-meta { margin: 8px 0; color: var(--muted); font-size: 11px; }

.inline-form { display: grid; grid-template-columns: 1fr 40px; gap: 8px; }
.inline-form input { min-width: 0; height: 40px; padding: 0 12px; color: #e7edf5; background: #080c12; border: 1px solid var(--line); border-radius: 10px; outline: 0; }
.inline-form input:focus { border-color: var(--blue); }
.inline-form button { border: 0; color: #17202b; background: var(--accent); border-radius: 10px; font-size: 18px; font-weight: 800; cursor: pointer; }
.inline-form :disabled { opacity: .45; cursor: not-allowed; }

.queue-list { flex: 1; overflow-y: auto; margin: 0; padding: 0; list-style: none; display: grid; align-content: start; gap: 6px; counter-reset: queue; }
.queue-list li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; padding: 7px 8px; background: rgba(255,255,255,.03); border-radius: 9px; font-size: 12px; counter-increment: queue; }
.queue-list li::before { content: counter(queue); color: var(--muted); font-size: 11px; text-align: right; }
.queue-list b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.queue-list small { color: var(--muted); font-size: 10px; }

.messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 12px; }
.message { margin: 0; padding: 8px 10px; color: #c6d2df; background: rgba(255,255,255,.035); border-radius: 10px; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.message b { display: block; margin-bottom: 2px; color: var(--accent); font-size: 10px; }
.message.system { color: var(--muted); background: transparent; font-style: italic; }
.chat-compose { flex: none; width: 100%; min-height: 44px; display: grid; grid-template-columns: minmax(0, 1fr) auto 38px; align-items: center; gap: 6px; padding: 3px 3px 3px 12px; background: #080c12; border: 1px solid var(--line); border-radius: 12px; }
.chat-compose:focus-within { border-color: var(--blue); }
.chat-compose input { min-width: 0; color: #e7edf5; background: transparent; border: 0; outline: 0; font-size: 13px; }
.chat-compose small { color: var(--muted); font-size: 10px; }
.chat-compose button { width: 38px; height: 38px; color: #1a1206; background: var(--accent); border: 0; border-radius: 9px; font-size: 14px; cursor: pointer; }
.chat-compose :disabled { opacity: .45; cursor: not-allowed; }

.people { flex: 1; overflow: auto; display: grid; align-content: start; gap: 6px; }
.person { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 5px; border-radius: 9px; background: rgba(255,255,255,.025); }
.avatar { width: 28px; height: 28px; display: grid; place-items: center; color: #17202b; background: #9fb2c8; border-radius: 50%; font-size: 11px; font-weight: 800; }
.person b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.person small { color: var(--muted); font-size: 10px; }
.person.me .avatar { background: var(--accent); }
.person.disconnected { opacity: .55; }
.empty { margin: auto; color: #687687; font-size: 11px; line-height: 1.6; text-align: center; }

.join-layer { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(4, 7, 11, .82); }
.join-card { width: min(400px, 100%); padding: 30px; display: flex; flex-direction: column; gap: 12px; background: #111925; border: 1px solid #314157; border-radius: 20px; box-shadow: 0 30px 90px #000; }
.join-card h2 { margin: 0; font-family: Georgia, serif; font-size: 30px; font-weight: 500; }
.join-card > p:not(.kicker,.form-error) { margin: -3px 0 7px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.join-card label { color: #aab6c5; font-size: 11px; }
.join-card input { height: 46px; padding: 0 13px; color: #fff; background: #090e15; border: 1px solid #344258; border-radius: 10px; outline: 0; }
.join-card input:focus { border-color: var(--blue); }
.join-card button { height: 48px; border: 0; color: #241a08; background: var(--accent); border-radius: 10px; font-weight: 800; cursor: pointer; }
.join-card button:disabled { opacity: .55; cursor: wait; }
.join-card > a { color: var(--muted); font-size: 11px; text-align: center; }
.form-error { min-height: 16px; margin: -4px 0; color: #ee8e8e; font-size: 11px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Màn hẹp vừa: thanh dưới xuống hai hàng. */
@media (max-width: 1100px) {
  .hud-bottom { grid-template-columns: 1fr auto; }
}

/* Điện thoại: khán phòng gần kín màn hình; trên là đang chiếu + trạng thái, dưới là công cụ, góc nhìn, chat. */
@media (max-width: 700px) {
  /* Hàng 1: phòng, đi nhanh, số người. Hàng 2: đang chiếu + vote, nút nhanh bên phải. */
  .hud-top { left: 8px; right: 8px; top: max(8px, env(safe-area-inset-top, 0)); grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "bar bar" "now actions"; gap: 6px; }
  .hud-bar { gap: 5px; }
  .room-chip { height: 34px; gap: 6px; font-size: 13px; padding: 0 9px; }
  .quick-travel-toggle { min-height: 34px; padding: 0 9px; font-size: 11px; }
  .hud-status { height: 34px; min-width: 0; padding: 0 9px; }
  .hud-status .live { display: none; }
  #onlineCount { overflow: hidden; text-overflow: ellipsis; }
  .hud-now { max-width: none; padding: 7px 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: center; }
  .hud-now .kicker, .hud-now .now-meta { display: none; }
  .now-title { -webkit-line-clamp: 1; font-size: 12px; }
  .vote-row { grid-column: 2; grid-row: 1; }
  .vote-row small { display: none; }
  .skip-bar { grid-column: 1 / -1; margin-top: 6px; }
  .hud-status { font-size: 10px; }
  .hud-actions { align-self: center; gap: 4px; }
  .hud-actions button { width: 32px; height: 32px; }
  .hud-tools { left: 8px; right: 8px; top: auto; bottom: 104px; transform: none; display: flex; justify-content: space-between; padding: 3px; }
  .hud-tools button { width: auto; flex: 1; padding: 4px 0; }
  .hud-tools button b { font-size: 15px; }
  .reaction-picker { left: 50%; right: auto; top: auto; bottom: 158px; transform: translateX(-50%); }
  .joystick { left: 12px; bottom: 168px; width: 104px; height: 104px; }
  .near-sit { left: auto; right: 16px; bottom: 196px; transform: none; }
  .hud-bottom { left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom, 0)); grid-template-columns: 1fr auto; gap: 6px; }
  .cameras { grid-column: 1; grid-row: 1; justify-content: space-between; padding: 3px; }
  .cameras button { flex: 1; padding: 0 2px; font-size: 14px; }
  .cameras button span { display: none; }
  .volume { grid-column: 2; grid-row: 1; padding: 2px; }
  .volume input, .volume small { display: none; }
  .room-notice { bottom: 160px; }
  .drawer { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 48%; border-radius: 18px 18px 0 0; }
}