/* Bản xem lại tĩnh: nút điều khiển, màn chờ, đố vui tĩnh */
html, body { touch-action: manipulation; }
.layer.page { bottom: 0; }

.topbar { position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 40; display: flex; gap: 8px; align-items: center; transition: opacity .35s; }
.topbar select, .topbar button, .sound-hint { font: 600 15px 'Inter', system-ui, sans-serif; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(16, 14, 28, .78); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; }
.topbar select { max-width: min(62vw, 320px); padding: 0 10px; }
.topbar button { width: 44px; font-size: 22px; line-height: 1; padding: 0; }
.topbar button[hidden] { display: none; }
.topbar select option, .topbar select optgroup { background: #17142a; color: #fff; }

.nav { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 20px; background: rgba(16, 14, 28, .8); border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .6); transition: opacity .35s; }
.nav button { min-width: 110px; height: 58px; padding: 0 18px; font: 700 20px 'Inter', system-ui, sans-serif; border: 0; border-radius: 14px; color: #fff; background: rgba(255, 255, 255, .15); cursor: pointer; }
.nav button.next { background: #6f5cff; }
.nav button:disabled { opacity: .35; cursor: default; }
.nav button:not(:disabled):active { transform: scale(.97); }
.ind { min-width: 96px; text-align: center; color: #e6e2ff; font: 600 14px/1.35 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; }

.sound-hint { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 41; padding: 0 18px; background: rgba(111, 92, 255, .92); }
.sound-hint[hidden] { display: none; }

body.idle .nav, body.idle .topbar { opacity: 0; pointer-events: none; }
body.idle:not(.on-start), body.idle:not(.on-start) * { cursor: none !important; }
body.on-start .nav, body.on-start .topbar { display: none; }

@media (max-width: 600px) {
  .nav { left: 12px; right: 12px; justify-content: space-between; gap: 6px; }
  .nav button { flex: 1; min-width: 0; height: 60px; padding: 0 8px; }
  .ind { min-width: 78px; font-size: 13px; }
  .topbar { left: 12px; right: 12px; }
  .topbar select { flex: 1; max-width: none; }
}
body.portrait .phonecap { padding-bottom: 130px; }

/* Màn chờ */
.start { display: none; position: fixed; inset: 0; z-index: 30; place-items: center; padding: 24px; background: var(--bg, #0a0a10); overflow: hidden; }
body.on-start .start { display: grid; }
.start video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.start-card { position: relative; width: min(640px, 100%); text-align: center; }
.start-dot { width: 14px; height: 14px; margin: 0 auto 22px; border-radius: 50%; background: var(--accent, #8b7bff); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent, #8b7bff) 25%, transparent); }
.start h1 { margin: 0 0 14px; font-size: clamp(30px, 6vw, 58px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.start p { margin: 0 0 30px; font-size: clamp(16px, 2.4vw, 22px); line-height: 1.55; color: var(--muted, #8d8aa6); }
.start button { min-height: 64px; padding: 0 40px; border: 0; border-radius: 18px; font: 700 22px 'Inter', system-ui, sans-serif; color: #fff; background: #6f5cff; cursor: pointer; box-shadow: 0 18px 40px -14px #6f5cff; }
.start button:active { transform: scale(.98); }
.start small { display: block; margin-top: 20px; font-size: 14px; color: var(--muted, #8d8aa6); }

/* Đố vui, bình chọn (tĩnh) */
#layer-static { overflow-y: auto; background: radial-gradient(1200px 700px at 15% 10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%), var(--bg); }
.sx { width: min(1100px, 92vw); margin: 0 auto; padding: 56px 0 150px; }
.sx-k { margin-bottom: 14px; font-size: 15px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.sx .poll-q { margin-bottom: 28px; }
.sx-opt { cursor: default; }
.sx-q { margin: 0 0 22px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); font-size: clamp(16px, 2.2vw, 22px); line-height: 1.45; }
.sx-q ol { margin: 10px 0 0; padding-left: 26px; font-size: .88em; color: var(--muted); }
.sx-q li { margin: 4px 0; }
.sx-note { margin-top: 26px; padding: 14px 18px; border-radius: 14px; border: 1px dashed var(--line); color: var(--muted); font-size: clamp(14px, 1.8vw, 18px); text-align: center; }
.sx .sx-opt:not(:disabled):hover { translate: none; border-color: var(--line); box-shadow: none; }
.start p { color: var(--ink); opacity: .78; }
.start video { opacity: .28; }

/* Nhạc nền */
.topbar #b-music, .topbar #b-speed { width: auto; padding: 0 14px; font-size: 14px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; }
.topbar #b-music[aria-pressed="false"] { opacity: .65; }
@media (max-width: 600px) { .topbar #b-music, .topbar #b-speed { padding: 0 10px; font-size: 13px; } }
/* Thanh điều khiển video: chừa chỗ cho nút Tiếp/Lùi */
#layer-video.on { background: #000; }
#layer-video video.on { height: calc(100% - var(--navh, 0px)); }
.topbar #b-speed[hidden] { display: none; }
@media (max-width: 600px) {
  .topbar { gap: 6px; }
  .topbar select { min-width: 0; flex: 1 1 0; }
  .topbar button { flex: none; }
  .topbar #b-music, .topbar #b-speed { padding: 0 8px; font-size: 12px; }
  .topbar #b-fs { width: 40px; }
}