@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Instrument+Serif:ital@1&family=Instrument+Sans:wght@400;500;600&family=Manrope:wght@700;800&family=Noto+Sans+Arabic:wght@700;800&display=swap');

/* ============ Aura tokens ============ */
:root {
  --bg: #0e0c0e;
  --bg-2: #171317;
  --fg: #f6f1ec;
  --fg-2: #beb3ac;
  --muted: #7c726c;
  --hair: rgba(255,255,255,0.13);
  --hair-2: rgba(255,255,255,0.24);
  --c1: #ff7a59;
  --c2: #ffa24a;
  --c3: #ffc46b;
  --on-grad: #2a1208;
  --danger: #ff8a80;
  --grad: linear-gradient(135deg, var(--c1), var(--c2) 55%, var(--c3));
  --font-display: Syne, 'Instrument Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Instrument Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-caption: Manrope, 'Noto Sans Arabic', 'Instrument Sans', -apple-system, 'Segoe UI', system-ui, 'Noto Sans', 'Noto Sans JP', 'Noto Sans SC', sans-serif;
  --sat: env(safe-area-inset-top); --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left); --sar: env(safe-area-inset-right);
  --ease: cubic-bezier(.2,.8,.2,1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-body); color: var(--fg); background: var(--bg);
  overflow: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select { font: inherit; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hidden { display: none !important; }

/* film grain + aura */
.grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.aura { position: absolute; left: 50%; top: 50%; width: min(90vw, 420px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,140,80,.30), rgba(255,120,60,.06) 48%, transparent 70%); filter: blur(22px); pointer-events: none; }
.screen { position: fixed; inset: 0; z-index: 1; animation: screenIn .42s var(--ease) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }

/* mark */
.mark { display: block; overflow: visible; width: 100%; height: auto; }

/* ============ HOME ============ */
.home { display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(var(--sat) + 22px) 0 0; }
.home > * { position: relative; }
.hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 24px 18px; flex: 1 0 auto; justify-content: center; }
.hero > :not(.aura) { position: relative; }
.hero-mark { width: 150px; animation: floaty 7s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .hero-mark { animation: none; } }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: 0; word-spacing: .08em; margin: 16px 0 6px; line-height: 1; color: var(--fg); }
.tagline { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--fg-2); line-height: 1.3; }

.sheet { flex: none; padding: 8px 26px calc(var(--sab) + 22px); }
.form { display: grid; }
.f { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0; min-height: 50px; border-bottom: 1px solid var(--hair); font-size: 15px; }
.f .k { color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; flex: none; }
.f .v { color: var(--fg); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f .chev { width: 12px; height: 12px; color: var(--muted); flex: none; stroke-width: 2; }
.f-input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--fg); font-size: 15px; font-weight: 500; text-align: right; padding: 14px 0; }
.f-input::placeholder { color: var(--muted); font-weight: 400; }
.f-select select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; appearance: none; cursor: pointer; }
.f-select:active { background: rgba(255,255,255,.03); }

.panel { display: grid; gap: 14px; margin-top: 22px; }
.go {
  height: 56px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--grad); color: var(--on-grad); font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  box-shadow: 0 14px 40px rgba(255,140,80,.22); transition: transform .12s var(--ease), filter .2s;
}
.go:active { transform: scale(.985); filter: brightness(1.05); }
.go[disabled] { opacity: .6; }
.go svg { width: 18px; height: 18px; stroke-width: 2; }
.alt { margin: 0; text-align: center; font-size: 13.5px; color: var(--fg-2); display: flex; justify-content: center; align-items: center; gap: 10px; }
.lnk { color: var(--fg); border-bottom: 1px solid var(--hair-2); padding-bottom: 1px; font-size: 13.5px; }
.lnk:active { color: var(--c2); }
.alt .sep { color: var(--muted); }
.code-input {
  width: 100%; height: 56px; border: 0; border-bottom: 1px solid var(--hair-2); background: none; color: var(--fg); outline: none;
  text-align: center; font-family: var(--font-caption); font-weight: 800; font-size: 24px; letter-spacing: .24em; text-transform: uppercase; padding: 0 0 0 .24em; font-variant-numeric: tabular-nums;
}
.code-input::placeholder { color: var(--muted); font-size: 12px; letter-spacing: .16em; font-weight: 700; }
.code-input:focus { border-bottom-color: var(--c2); }
.error { margin: 10px 0 0; text-align: center; color: var(--danger); font-size: 13px; min-height: 16px; }
.install { margin: 6px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.install .lnk { font-size: 12.5px; color: var(--fg-2); }
.install-note { font-size: 11.5px; }

.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; color: var(--fg-2); border-radius: 12px; transition: color .2s, transform .1s; }
.icon-btn:active { transform: scale(.94); color: var(--fg); }
.icon-btn svg { width: 18px; height: 18px; stroke-width: 1.6; transition: transform .3s var(--ease); }
/* header controls sit as a matched set beside the voice switch */
.rbar-actions .icon-btn { width: 38px; height: 30px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--hair-2); }
.rbar-actions .icon-btn svg { width: 15px; height: 15px; stroke-width: 1.8; }
.rbar-actions { align-items: center; gap: 8px; }
.icon-btn.rot svg { transform: rotate(180deg); }
.icon-btn { position: relative; }

/* real on/off switch for voice */
.switch { display: inline-flex; align-items: center; padding: 0; -webkit-tap-highlight-color: transparent; }
.sw-track {
  position: relative; width: 60px; height: 30px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid var(--hair-2);
  transition: background .25s, border-color .25s; display: block;
}
.sw-txt { position: absolute; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-weight: 700; font-size: 9px; letter-spacing: .12em; transition: opacity .2s; }
.sw-on { left: 9px; color: var(--on-grad); opacity: 0; }
.sw-off { right: 7px; color: var(--muted); opacity: 1; }
.sw-knob {
  position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: #f6f1ec; display: grid; place-items: center; color: #7c726c;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
  transition: transform .25s var(--ease), color .25s;
}
.sw-knob svg { width: 13px; height: 13px; stroke-width: 2; }
.switch.on .sw-track { background: var(--grad); border-color: transparent; }
.switch.on .sw-on { opacity: 1; }
.switch.on .sw-off { opacity: 0; }
.switch.on .sw-knob { transform: translateX(30px); color: var(--c1); }
.switch:active .sw-knob { transform: scale(.94); }
.switch.on:active .sw-knob { transform: translateX(30px) scale(.94); }
.fs-float { position: absolute; top: calc(var(--sat) + 12px); right: 12px; z-index: 3; }
.icon-btn .i-exit { display: none; }
html.is-fs .icon-btn .i-enter { display: none; }
html.is-fs .icon-btn .i-exit { display: block; }

/* ============ ROOM ============ */
.room { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); }
.room > * { position: relative; min-width: 0; }
.rbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(var(--sat) + 14px) calc(var(--sar) + 14px) 6px calc(var(--sal) + 20px); }
.peer { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { display: none; }
.avatar.idle { display: block; width: 40px; flex: none; }
.avatar.idle .mark { width: 40px; }
.peer-text { display: flex; align-items: baseline; gap: 8px; min-width: 0; line-height: 1.2; }
.peer-text b { font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peer-sub { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.peer-sub b { color: var(--fg-2); letter-spacing: .12em; font-weight: 700; font-family: var(--font-caption); font-size: 12px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.on { background: var(--c2); }
.dot.talk { background: var(--c2); box-shadow: 0 0 10px var(--c2); animation: ring 1.2s infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255,162,74,.55);} 100% { box-shadow: 0 0 0 9px transparent;} }
.rbar-actions { display: inline-flex; gap: 2px; }

.stage { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 0 calc(var(--sar) + 20px) 0 calc(var(--sal) + 20px); }
.stage > * { min-width: 0; }
.live-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding-top: 6px; }
.live { width: 100%; max-height: 100%; text-align: center; font-family: var(--font-caption); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04;
  overflow-wrap: anywhere; hyphens: none; transition: font-size .16s var(--ease), color .2s; will-change: font-size; color: var(--fg); }
.live .interim { color: var(--fg-2); }
.live .prev { display: block; margin: 0 0 .25em; color: var(--muted); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
.live .prev.age1 { font-size: .5em; }
.live .prev.age2 { font-size: .38em; opacity: .75; }
.live .cur { display: block; }

.live.final { color: var(--fg); }
.live.empty { color: var(--muted); font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.nw { white-space: nowrap; }
.caret { display: inline-block; width: 3px; height: .8em; margin-left: .1em; background: var(--c2); vertical-align: -0.06em; border-radius: 2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* waiting / QR */
.waiting { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; max-height: 100%; text-align: center; }
.qr-tile { padding: 8px; background: #fff; border-radius: 16px; }
.qr-tile img { display: block; width: min(46vw, 32vh, 190px); height: auto; aspect-ratio: 1; border-radius: 8px; }
.winfo { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.wlabel { margin: 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .16em; font-weight: 500; }
.code-text { font-family: var(--font-caption); font-weight: 800; font-size: 28px; letter-spacing: .22em; margin-left: .22em; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.whint { margin: 4px 0 0; color: var(--muted); font-size: 13px; max-width: 30ch; line-height: 1.4; }
.wactions { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.wactions .lnk { display: inline-flex; align-items: center; gap: 6px; }
.wactions .lnk svg { width: 14px; height: 14px; stroke-width: 1.8; }

/* dock: push-to-talk */
.dock { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; padding: 6px calc(var(--sar) + 20px) calc(var(--sab) + 22px) calc(var(--sal) + 20px); }
.mine { max-width: 100%; min-height: 18px; color: var(--fg-2); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-body), 'Noto Sans Arabic'; opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s var(--ease); }
.mine.show { opacity: 1; transform: none; }
.mine .interim { color: var(--muted); }
.ptt-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ptt { position: relative; width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center; color: var(--fg);
  border: 1.5px solid var(--hair-2); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .15s var(--ease), background .2s, color .2s, border-color .2s, box-shadow .2s; }
.ptt svg { width: 36px; height: 36px; stroke-width: 1.6; }
.ptt-ring, .ptt-glow, .ptt-core { display: contents; }
.ptt.on { background: var(--grad); color: var(--on-grad); border-color: transparent; transform: scale(1.04);
  box-shadow: 0 0 0 10px rgba(255,140,80,.12), 0 0 60px rgba(255,140,80,.35); }
.ptt.on::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(255,160,90,.45); animation: ripple 1.6s ease-out infinite; }
@keyframes ripple { to { transform: scale(1.35); opacity: 0; } }
.ptt-label { font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--fg-2); font-weight: 500; transition: color .2s; text-align: center; }
.ptt.on + .ptt-label { color: var(--c2); }
.lang-strip { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11.5px; }
.lang-strip b { color: var(--fg-2); font-weight: 500; }
.sep { width: 1px; height: 10px; background: var(--hair-2); }

.toast { position: fixed; left: 50%; bottom: calc(var(--sab) + 200px); transform: translateX(-50%) translateY(6px); z-index: 20;
  background: var(--bg-2); border: 1px solid var(--hair); border-radius: 12px; padding: 10px 14px; font-size: 13px; color: var(--fg);
  opacity: 0; transition: opacity .25s, transform .25s var(--ease); pointer-events: none; max-width: 88vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* ============ Face to face ============ */
.mode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; }
.mode-opt { text-align: left; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 16px; display: grid; gap: 2px; color: var(--fg-2); transition: border-color .2s, box-shadow .2s; }
.mode-opt b { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--fg); }
.mode-opt span { font-size: 12px; color: var(--muted); }
.mode-opt.active { border-color: var(--c2); box-shadow: inset 0 0 0 1px var(--c2); }
.heard-row { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 0 2px; min-height: 30px; width: 100%; min-width: 0; }
.dirpill { flex: none; font-family: var(--font-caption); font-weight: 800; font-size: 11px; letter-spacing: .12em; color: var(--on-grad); background: var(--grad); border-radius: 999px; padding: 4px 9px; }
.heard { color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; max-width: 100%; font-family: var(--font-body), 'Noto Sans Arabic'; }
.ptt-row { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; padding: 0 6px; }
.ptt.side { width: 96px; height: 96px; }
.ptt.side svg { width: 30px; height: 30px; }
.ptt-row .ptt-label { letter-spacing: .02em; text-transform: none; font-size: 12.5px; font-family: var(--font-body); max-width: 14ch; text-align: center; display: grid; gap: 1px; }
.ptt-sub { font-size: 10px; color: var(--muted); letter-spacing: .06em; }
.ptt-row .ptt.on + .ptt-label { color: var(--c2); }
.ptt-row .ptt.dim { opacity: .35; }
#f2f .peer { gap: 8px; }
.swap-mid { align-self: center; display: grid; place-items: center; width: 54px; height: 44px; border-radius: 999px;
  background: rgba(255,255,255,.08); border: 1px solid var(--hair-2); }
.swap-mid svg { width: 19px; height: 19px; stroke-width: 1.8; }
.swap-mid:active { transform: scale(.94); }


/* ============ QR scanner ============ */
.scanner { position: fixed; inset: 0; z-index: 40; background: #000; display: grid; grid-template-rows: auto 1fr auto; animation: screenIn .3s var(--ease) both; }
.scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-shade { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.scan-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--sat) + 14px) calc(var(--sar) + 14px) 8px calc(var(--sal) + 20px); }
.scan-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.viewfinder { position: relative; z-index: 2; align-self: center; justify-self: center; width: min(68vw, 62vh, 300px); aspect-ratio: 1; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }
.viewfinder i { position: absolute; width: 30px; height: 30px; border: 2px solid var(--c2); border-radius: 4px; }
.viewfinder i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 20px; }
.viewfinder i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 20px; }
.viewfinder i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 20px; }
.viewfinder i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 20px; }
.scan-line { position: absolute; left: 10px; right: 10px; top: 0; height: 1.5px; background: linear-gradient(90deg, transparent, var(--c2), transparent); box-shadow: 0 0 12px var(--c2); animation: scanline 2.2s ease-in-out infinite; }
@keyframes scanline { 0% { top: 6%; } 50% { top: 92%; } 100% { top: 6%; } }
.scan-bottom { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 20px calc(var(--sab) + 26px); text-align: center; }
.scan-bottom p { margin: 0; color: var(--fg-2); font-size: 14px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-weight: 500; font-size: 13.5px; border: 1px solid var(--hair-2); color: var(--fg); }
.pill svg { width: 15px; height: 15px; }
.pill.active { background: var(--grad); color: var(--on-grad); border-color: transparent; }

/* ============ Landscape phones ============ */
@media (orientation: landscape) and (max-height: 520px) {
  .home { flex-direction: row; align-items: stretch; padding: calc(var(--sat) + 8px) 0 0; }
  .hero .aura { width: min(70vh, 360px); }
  .fs-float { right: auto; left: calc(var(--sal) + 12px); }
  .credit-float { left: auto; right: 12px; }
  .hero { flex: 1 1 44%; min-height: 0; padding: 10px 24px; }
  .hero-mark { width: 118px; }
  .wordmark { font-size: 26px; margin: 10px 0 4px; }
  .tagline { font-size: 16px; }
  .sheet { flex: 1 1 56%; margin: 0; overflow-y: auto; padding: 8px 22px calc(var(--sab) + 12px) 8px; align-self: center; }
  .f { min-height: 44px; }
  .panel { margin-top: 14px; gap: 10px; }
  .go { height: 48px; font-size: 15px; }

  .rbar { padding: calc(var(--sat) + 8px) calc(var(--sar) + 12px) 2px calc(var(--sal) + 16px); }
  .avatar.idle, .avatar.idle .mark { width: 34px; }
  .stage { padding: 0 calc(var(--sar) + 16px) 0 calc(var(--sal) + 16px); }
  .dock { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 2px calc(var(--sar) + 16px) calc(var(--sab) + 10px) calc(var(--sal) + 16px); }
  .mine { grid-column: 1; grid-row: 1; justify-self: start; max-width: 100%; }
  .lang-strip { grid-column: 1; grid-row: 2; justify-self: start; }
  .ptt-wrap { grid-column: 2; grid-row: 1 / span 2; flex-direction: row-reverse; gap: 14px; }
  #f2f .dock { grid-template-columns: auto 1fr auto; }
  #f2f .ptt-row { display: contents; }
  #f2f .ptt-row .ptt-wrap:first-child { grid-column: 1; grid-row: 1 / span 2; }
  #f2f .ptt-row .ptt-wrap:last-child { grid-column: 3; grid-row: 1 / span 2; }
  #f2f .lang-strip { grid-column: 2; grid-row: 2; justify-self: center; align-self: start; }
  #f2f .swap-mid { grid-column: 2; grid-row: 1; justify-self: center; align-self: end; margin-bottom: 2px; }
  .ptt-row .ptt-wrap { flex-direction: column; gap: 4px; }
  .ptt.side { width: 66px; height: 66px; }
  .ptt-row .ptt-label { display: block; font-size: 10.5px; }
  .ptt { width: 78px; height: 78px; }
  .ptt svg { width: 26px; height: 26px; }
  .ptt-label { font-size: 10px; letter-spacing: .2em; max-width: 9ch; text-align: right; line-height: 1.5; }
  .toast { bottom: calc(var(--sab) + 92px); }
  .waiting { flex-direction: row; gap: 26px; }
  .qr-tile img { width: min(30vw, 56vh, 180px); }
  .winfo { align-items: flex-start; text-align: left; }
  .code-text { font-size: 26px; margin-left: 0; }
  .whint { max-width: 32ch; }
  .scanner { grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr; }
  .scan-top { grid-column: 1 / -1; grid-row: 1; align-self: start; }
  .viewfinder { grid-column: 2; grid-row: 1; width: min(60vh, 260px); }
  .scan-bottom { grid-column: 1 / -1; grid-row: 1; align-self: end; padding-bottom: calc(var(--sab) + 12px); }
}

/* ============ Rotated landscape (portrait device, no orientation lock — e.g. iOS Safari) ============ */
html.rotated .room {
  animation: none;
  inset: auto; top: 0; left: 0; width: 100dvh; height: 100dvw;
  transform-origin: 0 0; transform: rotate(90deg) translateY(-100%);
  --sat: 0px; --sab: 0px; --sal: env(safe-area-inset-top); --sar: env(safe-area-inset-bottom);
}
html.rotated .toast { display: none; }
html.rotated .rbar { padding: calc(var(--sat) + 8px) calc(var(--sar) + 12px) 2px calc(var(--sal) + 16px); }
html.rotated .avatar.idle, html.rotated .avatar.idle .mark { width: 34px; }
html.rotated .stage { padding: 0 calc(var(--sar) + 16px) 0 calc(var(--sal) + 16px); }
html.rotated .dock { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; text-align: left; padding: 2px calc(var(--sar) + 16px) calc(var(--sab) + 10px) calc(var(--sal) + 16px); }
html.rotated .mine { grid-column: 1; grid-row: 1; justify-self: start; max-width: 100%; }
html.rotated .lang-strip { grid-column: 1; grid-row: 2; justify-self: start; }
html.rotated .ptt-wrap { grid-column: 2; grid-row: 1 / span 2; flex-direction: row-reverse; gap: 14px; }
html.rotated .ptt { width: 78px; height: 78px; }
html.rotated .ptt svg { width: 26px; height: 26px; }
html.rotated .ptt-label { font-size: 10px; letter-spacing: .2em; max-width: 9ch; text-align: right; line-height: 1.5; }
html.rotated .toast { bottom: calc(var(--sab) + 92px); }
html.rotated .waiting { flex-direction: row; gap: 26px; }
html.rotated .qr-tile img { width: min(30vh, 56vw, 180px); }
html.rotated .winfo { align-items: flex-start; text-align: left; }
html.rotated .code-text { font-size: 24px; margin-left: 0; }
html.rotated .whint { max-width: 32ch; }

/* ============ credits ============ */
.credit-pill { margin: 4px 0 0; text-align: center; color: var(--muted); font-size: 12.5px; letter-spacing: .04em; }
.paywall { position: fixed; inset: 0; z-index: 60; background: rgba(8,6,8,.74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; }
.paywall.hidden { display: none; }
.pw-card { background: #161115; border: 1px solid var(--hair-2); border-radius: 20px; padding: 28px 24px 24px; max-width: 360px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.pw-card h2 { font-family: var(--font-display); font-size: 20px; letter-spacing: -0.01em; margin: 0 0 10px; }
.pw-card p { color: var(--fg-2); font-size: 14px; line-height: 1.55; margin: 0 0 20px; }
.pw-card .go { width: 100%; }

.credit-chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 34px; height: 30px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--hair-2); background: rgba(255,255,255,.08);
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: .02em; color: var(--fg-2);
  font-variant-numeric: tabular-nums; }
.credit-chip svg { width: 12px; height: 12px; fill: none; stroke: var(--c2); stroke-width: 2; stroke-linejoin: round; flex: none; }
.credit-chip b { font-weight: 700; color: var(--fg); }
.credit-chip i { font-style: normal; font-family: var(--font-body); font-weight: 600; font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.credit-chip.zero b { color: var(--c1); }
.credit-chip.zero { border-color: rgba(255,122,89,.5); }
.credit-float { position: absolute; top: calc(var(--sat) + 12px); left: calc(var(--sal) + 12px); z-index: 3; }
.credit-chip { cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }