:root {
  --bg: #0a0708;
  --panel: #170a0d;
  --panel-2: #210d12;
  --border: #3a1a20;
  --text: #f2e8ea;
  --muted: #b39aa0;
  --accent: #e01e3c;
  --accent-2: #b3122c;
  --danger: #ff5c6c;
  --ok: #3fb950;
  --adult: #ff2d6e;
  --grad: linear-gradient(135deg, #ff2d4a 0%, #e01e3c 50%, #7d0f22 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Never allow sideways scroll: decorative orbs/glows can extend past the edge
   on narrow screens. They are background visuals, so clipping them is correct. */
html { overflow-x: hidden; background: #080506; }

/* Chat app: pin the shell to the visible viewport so the mobile keyboard can't
   scroll or "float" the page. Height is driven by JS from visualViewport (the
   true visible height) because iOS vh/dvh don't reset reliably with the keyboard.
   Only the messages list scrolls. */
.app-body {
  position: fixed;
  inset: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  /* Pad the bottom by the on-screen keyboard height (set from visualViewport in
     app.js) so the composer sits just above the keyboard, instead of iOS panning
     the whole page up. When the keyboard closes, --kb goes to 0 and it resets. */
  padding-bottom: var(--kb, 0px);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1200px 720px at 50% -8%, rgba(224, 30, 60, 0.28), transparent 62%),
    radial-gradient(900px 620px at 88% 12%, rgba(179, 18, 44, 0.14), transparent 60%),
    linear-gradient(180deg, #0c0708 0%, #0a0708 45%, #080506 100%);
  background-attachment: fixed;
}

/* Subtle starfield */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.6;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 24% 62%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.6px 1.6px at 38% 28%, rgba(255,175,185,0.9), transparent),
    radial-gradient(1px 1px at 47% 74%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.3px 1.3px at 58% 12%, #fff, transparent),
    radial-gradient(1px 1px at 66% 48%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 74% 82%, rgba(255,175,185,0.9), transparent),
    radial-gradient(1px 1px at 82% 22%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.2px 1.2px at 90% 58%, #fff, transparent),
    radial-gradient(1px 1px at 33% 88%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.4px 1.4px at 6% 45%, rgba(255,175,185,0.8), transparent),
    radial-gradient(1px 1px at 95% 82%, rgba(255,255,255,0.6), transparent);
  background-repeat: no-repeat;
}
body > * { position: relative; z-index: 1; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}

.brand { font-weight: 800; font-size: 20px; letter-spacing: -0.5px; }
.brand span { color: var(--accent); }

.brand-link { display: inline-flex; align-items: center; }
.logo-img { height: 30px; width: auto; display: block; }
.topnav { display: flex; align-items: center; gap: 20px; }
.nav-link { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav-link:hover { color: var(--text); }

.adult-btn {
  background: linear-gradient(135deg, var(--adult), #ff6a4d);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(255, 61, 127, 0.35);
}
.adult-btn:hover { filter: brightness(1.08); }

.screen { display: none; flex: 1; flex-direction: column; }
.screen.active { display: flex; }

#landing {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  gap: 18px;
}

#landing h1 { font-size: 40px; letter-spacing: -1px; }
.sub { color: var(--muted); font-size: 18px; }

.online-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--muted);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }

.mode-grid { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.mode-card {
  width: 220px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 20px;
  cursor: pointer;
  color: var(--text);
  transition: transform 0.12s, border-color 0.12s;
}
.mode-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.mode-emoji { font-size: 40px; }
.mode-title { font-size: 20px; font-weight: 700; margin-top: 10px; }
.mode-desc { color: var(--muted); font-size: 14px; margin-top: 4px; }

.fineprint { color: var(--muted); font-size: 12px; max-width: 460px; margin-top: 12px; }

/* Chat */
#chat { max-width: 720px; width: 100%; margin: 0 auto; padding: 12px; }
.status-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 4px; border-bottom: 1px solid var(--border);
}
.status { font-size: 14px; color: var(--muted); }
.status.connected { color: var(--ok); }
.mode-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }

.voice-panel { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; }
.voice-orb {
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center; font-size: 48px;
  box-shadow: 0 0 40px rgba(224, 60, 80, 0.4);
}
.voice-orb.talking { animation: pulse 0.8s infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.voice-hint { color: var(--muted); font-size: 14px; }

.messages { flex: 1; overflow-y: auto; padding: 12px 4px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.msg { max-width: 75%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 1.4; word-wrap: break-word; }
.msg.me { align-self: flex-end; background: var(--accent-2); color: #fff; border-bottom-right-radius: 4px; }
.msg.them { align-self: flex-start; background: var(--panel-2); border-bottom-left-radius: 4px; }
.msg.sys { align-self: center; background: transparent; color: var(--muted); font-size: 13px; font-style: italic; }

.typing { color: var(--muted); font-size: 13px; padding: 0 8px 6px; }

.composer { display: flex; gap: 8px; padding: 8px 0; }
#input {
  flex: 1; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; color: var(--text);
  font-size: 16px; /* 16px+ stops iOS from auto-zooming when the field is focused */
}
#input:focus { outline: none; border-color: var(--accent); }
.send-btn { background: var(--accent-2); color: #fff; border: none; border-radius: 12px; padding: 0 20px; font-weight: 700; cursor: pointer; }

.controls { display: flex; gap: 8px; padding: 8px 0; }
.ctrl { flex: 1; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-weight: 600; cursor: pointer; }
.ctrl.skip:hover { border-color: var(--accent); }
.ctrl.report:hover { border-color: var(--danger); color: var(--danger); }
.ctrl.stop:hover { border-color: var(--muted); }

/* Modals */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 28px; max-width: 420px; width: 100%; text-align: center; }
.modal h2 { font-size: 22px; margin-bottom: 10px; }
.modal p { color: var(--muted); font-size: 15px; line-height: 1.5; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions.column { flex-direction: column; }
.modal-btn { flex: 1; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-weight: 600; cursor: pointer; }
.modal-btn.primary { background: linear-gradient(135deg, var(--adult), #ff6a4d); border: none; color: #fff; }
.modal-btn:hover { filter: brightness(1.1); }
.modal-fine { font-size: 12px; margin-top: 14px; }

.hidden { display: none !important; }

/* Brand hero */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero { position: relative; display: flex; justify-content: center; margin-bottom: 4px; }
.hero-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(179, 18, 44, 0.35), transparent 70%);
  filter: blur(20px); z-index: 0;
}
.hero-mascot {
  position: relative; z-index: 1; width: 190px; height: auto;
  border-radius: 24px;
  filter: drop-shadow(0 12px 30px rgba(224, 30, 60, 0.35));
}

/* Sticker row */
.sticker-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.sticker-row img {
  width: 78px; height: 78px; object-fit: contain;
  transition: transform 0.15s;
  filter: drop-shadow(0 6px 14px rgba(224, 30, 60, 0.25));
}
.sticker-row img:hover { transform: translateY(-6px) scale(1.08); }

/* Footer */
.site-footer {
  margin-top: 40px; padding: 28px 20px; border-top: 1px solid var(--border);
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.footer-mark { width: 34px; height: 34px; object-fit: contain; opacity: 0.9; }
.footer-nav { display: flex; gap: 22px; align-items: center; }
.footer-nav a, .link-btn {
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px;
  background: none; border: none; cursor: pointer; font-family: inherit;
}
.footer-nav a:hover, .link-btn:hover { color: var(--text); }
.footer-copy { color: var(--muted); font-size: 13px; }

/* Brand page */
.brand-page { max-width: 960px; margin: 0 auto; padding: 20px; width: 100%; }
.brand-hero { position: relative; text-align: center; padding: 40px 10px 30px; }
.brand-hero-mascot { position: relative; z-index: 1; width: 160px; border-radius: 24px; filter: drop-shadow(0 12px 30px rgba(224, 30, 60, 0.35)); }
.brand-hero h1 { font-size: 36px; letter-spacing: -1px; margin-top: 16px; }
.brand-hero .sub { max-width: 560px; margin: 10px auto 0; }

.brand-block { padding: 28px 0; border-top: 1px solid var(--border); }
.brand-block h2 { font-size: 24px; margin-bottom: 6px; }
.block-note { color: var(--muted); font-size: 15px; margin-bottom: 18px; max-width: 620px; }

.logo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.logo-cell { border-radius: 16px; padding: 28px; display: flex; flex-direction: column; align-items: center; gap: 14px; border: 1px solid var(--border); }
.logo-cell.dark { background: #0d1117; }
.logo-cell.light { background: #e6edf3; }
.logo-cell img { max-width: 100%; height: 34px; }
.logo-cell img.mark { height: 60px; }
.logo-cell span { font-size: 13px; color: var(--muted); }
.logo-cell.light span { color: #57606a; }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.swatch { border-radius: 14px; padding: 22px 16px; min-height: 96px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.swatch span { font-weight: 700; font-size: 15px; }
.swatch code { font-size: 12px; opacity: 0.85; }

.expression-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; }
.expression-grid figure { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 16px; text-align: center; }
.expression-grid img { width: 96px; height: 96px; object-fit: contain; }
.expression-grid figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }

.voice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.voice-card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
.voice-card h3 { font-size: 17px; margin-bottom: 8px; }
.voice-card p { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ===== Clean call / chat screen ===== */
.call-screen { max-width: 100%; padding: 0; position: relative; align-items: center; justify-content: center; overflow: hidden; }

.call-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; padding: 16px 20px;
}
.call-chip {
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); color: var(--text);
  padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer;
}
.call-chip span { opacity: 0.7; margin-right: 2px; }
.call-chip:hover { background: rgba(255, 255, 255, 0.12); }
.call-chip.report:hover { color: var(--danger); border-color: var(--danger); }
.call-timer { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 16px; font-weight: 700; letter-spacing: 1px; }

/* Searching */
.searching { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.search-orb { position: relative; width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; }
.search-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(179, 18, 44, 0.35), transparent 68%);
  filter: blur(8px); animation: breathe 2.4s ease-in-out infinite;
}
.search-mascot { position: relative; z-index: 1; width: 190px; height: 190px; object-fit: contain; animation: bob 2.2s ease-in-out infinite; }
.search-text { font-size: 20px; font-weight: 700; }
.search-dots { display: flex; gap: 7px; }
.search-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: blink 1.2s infinite; }
.search-dots span:nth-child(2) { animation-delay: 0.2s; }
.search-dots span:nth-child(3) { animation-delay: 0.4s; }
.search-hint { max-width: 340px; text-align: center; color: var(--muted); font-size: 14.5px; line-height: 1.5; margin-top: 4px; }
.hint-switch { display: inline-block; margin-top: 10px; padding: 9px 18px; border: none; border-radius: 999px; background: var(--accent-2); color: #fff; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; transition: filter 0.15s, transform 0.1s; }
.hint-switch:hover { filter: brightness(1.08); }
.hint-switch:active { transform: scale(0.96); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes breathe { 0%, 100% { transform: scale(0.92); opacity: 0.65; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* Connected stage */
.stage { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.avatar-wrap { position: relative; width: 210px; height: 210px; display: flex; align-items: center; justify-content: center; }
.pulse-ring {
  position: absolute; inset: 26px; border-radius: 50%; border: 2px solid var(--accent);
  box-shadow: 0 0 60px rgba(179, 18, 44, 0.5); animation: pulsering 2s ease-out infinite;
}
.avatar {
  position: relative; z-index: 1; width: 150px; height: 150px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(179, 18, 44, 0.6);
  background: radial-gradient(circle at 50% 40%, #241b3a, #0d1117);
}
.stranger-name { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; }
.stranger-meta { color: var(--muted); font-size: 15px; }
@keyframes pulsering { 0% { transform: scale(0.9); opacity: 0.9; } 70% { transform: scale(1.3); opacity: 0; } 100% { opacity: 0; } }

/* Chat panel (bottom sheet) */
.chat-panel {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 104px;
  width: min(680px, 92%); max-height: 44vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  z-index: 4; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.chat-panel .messages { min-height: 120px; padding: 14px; }
.chat-panel .composer { padding: 10px; border-top: 1px solid var(--border); margin: 0; }
.chat-panel .send-btn { min-width: 46px; padding: 0; }

/* Control pill */
.control-pill {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; align-items: center; gap: 10px; padding: 10px;
  background: rgba(20, 26, 35, 0.9); backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.pill-btn {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.1s;
}
.pill-btn:hover { background: rgba(255, 255, 255, 0.16); }
.pill-btn:active { transform: scale(0.94); }
.pill-btn.muted { background: var(--danger); }
.pill-btn.active { background: var(--accent-2); }
.pill-btn.end { width: auto; padding: 0 22px; border-radius: 999px; background: var(--danger); font-weight: 800; font-size: 14px; letter-spacing: 0.5px; white-space: nowrap; flex: none; gap: 6px; }
.pill-btn.end:hover { background: #ff4155; }
.pill-btn.skip { width: auto; padding: 0 20px; border-radius: 999px; background: rgba(224, 30, 60, 0.18); color: #ffc8d0; font-weight: 800; font-size: 14px; letter-spacing: 0.5px; white-space: nowrap; flex: none; gap: 7px; }
.pill-btn.skip:hover { background: rgba(224, 30, 60, 0.3); color: #fff; }
.pill-btn.skip .skip-ico { font-size: 15px; line-height: 1; }

/* ===== Mini-games ===== */
.game-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.game-choice {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px;
  color: var(--text); font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.game-choice:hover { border-color: var(--accent); }
.game-choice:active { transform: scale(0.98); }
.gc-emoji { font-size: 20px; }

.game-panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 8;
  width: min(360px, 94%); max-height: 86%; overflow-y: auto; padding: 16px 18px 18px;
  background: rgba(20, 14, 34, 0.98); backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.game-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.game-title { font-size: 17px; font-weight: 800; }
.game-close {
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 14px; line-height: 1;
}
.game-close:hover { background: rgba(255, 255, 255, 0.18); }
.game-status { text-align: center; color: var(--muted); font-weight: 700; font-size: 15px; margin: 4px 0 14px; min-height: 20px; }

.ttt-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 252px; max-width: 100%; margin: 0 auto; }
.ttt-cell {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  font-size: 40px; font-weight: 800; line-height: 1; color: var(--text);
  cursor: pointer; font-family: inherit; transition: border-color 0.15s, background 0.15s;
}
.ttt-cell:not(:disabled):hover { border-color: var(--accent); background: var(--panel-2); }
.ttt-cell:disabled { cursor: default; }
.ttt-cell.x { color: #ff5a6e; }
.ttt-cell.o { color: #ff6fae; }
.game-foot { display: flex; justify-content: center; margin-top: 16px; min-height: 0; }
.game-foot .modal-btn { margin: 0; }

/* Connect Four */
.c4-board { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: 100%; max-width: 300px; margin: 0 auto; background: rgba(224, 30, 60, 0.12); padding: 6px; border-radius: 12px; }
.c4-cell {
  aspect-ratio: 1 / 1; border-radius: 50%; border: none; cursor: pointer;
  background: var(--panel-2); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.1s;
}
.c4-cell:not(:disabled):hover { transform: scale(1.06); }
.c4-cell.r { background: radial-gradient(circle at 38% 32%, #ff8a9b, #f0384e); }
.c4-cell.y { background: radial-gradient(circle at 38% 32%, #ffe08a, #f2c53d); }

/* Win / lose banner */
.game-status.win { font-size: 22px; color: #ffd23f; text-shadow: 0 0 18px rgba(255, 210, 63, 0.45); }
.game-status.lose { font-size: 18px; color: var(--muted); }

/* Confetti burst (winner only) */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i {
  position: absolute; top: -14px; width: 9px; height: 15px; border-radius: 2px; opacity: 0.95;
  animation-name: confFall; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes confFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--x, 0px), 108vh) rotate(760deg); opacity: 0.9; }
}

.toast {
  position: fixed; bottom: calc(108px + var(--kb, 0px)); left: 50%; transform: translateX(-50%); z-index: 40;
  background: rgba(20, 14, 34, 0.96); border: 1px solid var(--border); color: var(--text);
  padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); max-width: 90%; text-align: center;
}

@media (max-width: 500px) {
  #landing h1 { font-size: 30px; }
  .mode-card { width: 100%; }
  .hero-mascot { width: 150px; }
  .brand-hero h1 { font-size: 28px; }
  .search-mascot { width: 150px; }
  .avatar { width: 120px; height: 120px; }
  .chat-panel { bottom: 96px; max-height: 40vh; }
}

/* ============ Marketing homepage ============ */
#landing { text-align: left; padding: 0; gap: 0; }
#landing.screen.active { display: block; }

.home { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 4px; margin-bottom: 20px;
  backdrop-filter: blur(10px);
}
.nav .logo-img { height: 30px; }
.nav-center { display: flex; gap: 30px; }
.nav-center .nav-link { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 15px; position: relative; }
.nav-center .nav-link:hover { color: var(--text); }
.nav-center .nav-link.active { color: var(--text); }
.nav-center .nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); border-radius: 2px; }
.nav-right { display: flex; align-items: center; gap: 12px; }

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, #e01e3c, #ff2d4a); color: #fff; border: none;
  padding: 11px 22px; border-radius: 12px; font-weight: 700; font-size: 15px; cursor: pointer;
  font-family: inherit; box-shadow: 0 6px 20px rgba(224, 30, 60, 0.35); transition: transform 0.1s, filter 0.15s;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary.lg { padding: 15px 28px; font-size: 16px; border-radius: 14px; }
.btn-outline {
  background: transparent; color: var(--text); border: 1px solid var(--border);
  padding: 15px 26px; border-radius: 14px; font-weight: 700; font-size: 16px; cursor: pointer; font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.btn-outline:hover { border-color: var(--accent); background: rgba(179, 18, 44, 0.08); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); padding: 10px 18px; border-radius: 12px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; }
.btn-ghost.adult { border-color: rgba(255, 61, 154, 0.5); color: #ff87bd; }
.btn-ghost.adult:hover { background: rgba(255, 61, 154, 0.12); }

/* Hero */
.hero-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 40px; padding: 90px 0 120px; min-height: 66vh; }
.hero-copy, .hero-art { min-width: 0; }
.avatars { justify-content: center; }
.hero-copy h1 { font-size: 60px; line-height: 1.04; letter-spacing: -1.5px; font-weight: 800; }
.hero-sub { color: var(--muted); font-size: 18px; line-height: 1.55; margin-top: 20px; max-width: 440px; }
.hero-btns { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.social-proof { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.avatars { display: flex; }
.avatars img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); margin-left: -10px; background: var(--panel-2); }
.avatars img:first-child { margin-left: 0; }
.online-line { color: var(--muted); font-size: 15px; display: flex; align-items: center; gap: 8px; }

.hero-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; }
.hero-art .hero-glow {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 30, 60, 0.45), rgba(179, 18, 44, 0.12) 45%, transparent 70%);
  filter: blur(10px); z-index: 0; animation: breathe 4s ease-in-out infinite;
}
.hero-mascot { position: relative; z-index: 1; width: 300px; height: auto; filter: drop-shadow(0 20px 40px rgba(224, 30, 60, 0.4)); animation: bob 4s ease-in-out infinite; }
.spark { position: absolute; color: #ff8095; font-size: 20px; z-index: 1; animation: twinkle 3s ease-in-out infinite; }
.spark.s1 { top: 14%; left: 20%; } .spark.s2 { top: 26%; right: 16%; font-size: 14px; animation-delay: .5s; }
.spark.s3 { bottom: 24%; left: 14%; font-size: 16px; animation-delay: 1s; } .spark.s4 { bottom: 30%; right: 20%; animation-delay: 1.5s; }
@keyframes twinkle { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }
.hi-bubble {
  position: absolute; top: 10%; right: 8%; z-index: 2;
  background: linear-gradient(135deg, #e01e3c, #ff2d4a); color: #fff; font-weight: 800; font-size: 22px;
  padding: 12px 20px; border-radius: 18px 18px 18px 4px; box-shadow: 0 8px 24px rgba(224, 30, 60, 0.5);
  animation: bob 3.5s ease-in-out infinite;
}

/* Features */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 40px 0 100px; }
.feature { text-align: center; padding: 20px; position: relative; }
.feature:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: var(--border); }
.feat-icon { width: 66px; height: 66px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; background: rgba(224, 30, 60, 0.12); border: 1px solid rgba(224, 30, 60, 0.25); }
.feature h3 { font-size: 19px; margin-bottom: 10px; }
.feature p { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* How it works */
.how { text-align: center; padding: 50px 0 110px; }
.how h2 { font-size: 34px; letter-spacing: -0.5px; margin-bottom: 56px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { text-align: center; padding: 0 10px; }
.step-num { width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%; background: linear-gradient(135deg, #e01e3c, #ff2d4a); color: #fff; font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(224, 30, 60, 0.4); }
.step h4 { font-size: 18px; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* CTA band */
.cta-band {
  display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: 20px;
  background: linear-gradient(135deg, rgba(224, 30, 60, 0.18), rgba(179, 18, 44, 0.08));
  border: 1px solid rgba(224, 30, 60, 0.3); border-radius: 24px; padding: 60px; margin-bottom: 100px; overflow: hidden;
}
.cta-copy h2 { font-size: 34px; line-height: 1.1; letter-spacing: -0.5px; }
.cta-copy p { color: var(--muted); font-size: 16px; margin: 16px 0 26px; max-width: 420px; }
.cta-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 220px; }
.cta-art .hero-glow.small { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(224, 30, 60, 0.4), transparent 68%); filter: blur(8px); }
.cta-mascot { position: relative; z-index: 1; width: 200px; height: auto; filter: drop-shadow(0 16px 30px rgba(224, 30, 60, 0.4)); animation: bob 4s ease-in-out infinite; }

/* Footer */
.footer { border-top: 1px solid var(--border); padding: 60px 0 40px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 3fr; gap: 30px; }
.footer-brand .logo-img { height: 28px; margin-bottom: 14px; }
.footer-brand p { color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: 18px; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.footer-col h5 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 14px; }
.footer-col a, .footer-linkbtn { display: block; color: var(--text); text-decoration: none; font-size: 14px; margin-bottom: 10px; opacity: 0.85; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; text-align: left; }
.footer-col a:hover, .footer-linkbtn:hover { color: var(--accent); opacity: 1; }
.footer-bottom { text-align: center; color: var(--muted); font-size: 13px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--border); }

@media (max-width: 820px) {
  .hero-wrap { grid-template-columns: 1fr; text-align: center; padding: 24px 0 54px; min-height: auto; }
  .hero-copy h1 { font-size: 40px; }
  .hero-sub, .hero-btns, .social-proof { margin-left: auto; margin-right: auto; justify-content: center; }
  .hero-art { min-height: 320px; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .feature::after { display: none; }
  .steps { grid-template-columns: 1fr; }
  .cta-band { grid-template-columns: 1fr; text-align: center; }
  .cta-copy p { margin-left: auto; margin-right: auto; }
  .hero-btns .cta-stack, .cta-band .cta-stack { align-items: center; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .nav-center { display: none; }
}

/* Small phones: keep the top nav on one line (logo + Start Chatting) */
@media (max-width: 480px) {
  .nav { padding: 16px 2px; margin-bottom: 6px; gap: 10px; }
  .nav .brand-word { font-size: 19px; letter-spacing: 0.5px; }
  .nav .brand-lockup { gap: 9px; }
  .nav .orb.brand-orb { --s: 32px; }
  .nav-right .btn-primary { padding: 10px 15px; font-size: 14px; }
}

/* ============ CSS Orb (brand mark) ============ */
.orb {
  --s: 300px;
  position: relative; width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #3d0a12 0%, #24070d 34%, #150609 62%, #0b0305 100%);
  box-shadow:
    0 0 3px 1px rgba(255,120,140, 0.65),
    0 0 60px 6px rgba(224, 30, 60, 0.45),
    0 0 130px 20px rgba(224, 30, 60, 0.22),
    inset 0 0 40px 6px rgba(224, 30, 60, 0.35),
    inset 0 -12px 30px rgba(120, 12, 34, 0.55),
    inset 0 16px 26px rgba(255, 170, 180, 0.32);
  flex: none;
}
.orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 58%, rgba(224, 30, 60, 0.7) 70%, transparent 80%);
  mix-blend-mode: screen; pointer-events: none;
}
/* Domino mask across the eyes (paints below the eyes, so they glow through). */
.orb::before {
  content: ""; position: absolute; pointer-events: none;
  left: 50%; top: 30%; transform: translateX(-50%);
  width: 78%; height: 34%;
  background: linear-gradient(180deg, #17090c 0%, #060304 100%);
  border-radius: 47% 47% 44% 44% / 60% 60% 48% 48%;
  box-shadow: 0 1px 7px 1px rgba(224, 30, 60, 0.5), inset 0 2px 3px rgba(255, 120, 140, 0.16);
}
.orb .eye {
  position: absolute; top: 44%; width: 13%; height: 15%; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, #ffe7ea 55%, #ffb6c0 100%);
  box-shadow: 0 0 12px 2px rgba(255,255,255,0.8), 0 0 26px 6px rgba(255,120,140,0.7);
  transition: transform 0.3s ease, height 0.3s ease, border-radius 0.3s ease, top 0.3s ease;
}
.orb .eye.l { left: 33%; }
.orb .eye.r { right: 33%; }

/* Size variants */
.orb.hero-orb { --s: 300px; }
.hero-orb-wrap { animation: orbFloat 5s ease-in-out infinite; }
.orb.cta-orb { --s: 190px; animation: orbFloat 5s ease-in-out infinite; }
.orb.avatar-orb { --s: 150px; }
.orb.brand-orb, .orb.mini { --s: 40px; box-shadow: 0 0 2px 1px rgba(255,120,140,0.6), 0 0 16px 3px rgba(224,30,60,0.5), inset 0 0 12px 2px rgba(224,30,60,0.4), inset 0 4px 8px rgba(255,170,180,0.35); }
@keyframes orbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* States */
.orb.searching .eye { animation: lookAround 2.4s ease-in-out infinite, eyeBlink 3.2s ease-in-out infinite; }
@keyframes lookAround { 0%,100% { transform: translateX(-22%); } 50% { transform: translateX(22%); } }
@keyframes eyeBlink { 0%, 88%, 100% { height: 15%; top: 44%; } 92%, 95% { height: 1.5%; top: 50%; } }
.orb.connected .eye, .orb.happy .eye { height: 7%; top: 46%; border-radius: 60% 60% 0 0; }
.orb.matchfound .eye { transform: scale(1.25); }
.orb.pulse { animation: orbPulse 1.6s ease-in-out infinite; }
@keyframes orbPulse { 0%,100% { box-shadow: 0 0 3px 1px rgba(255,120,140,0.65), 0 0 60px 6px rgba(224,30,60,0.4), inset 0 0 40px 6px rgba(224,30,60,0.35), inset 0 -12px 30px rgba(120,12,34,0.55), inset 0 16px 26px rgba(255,170,180,0.32); } 50% { box-shadow: 0 0 4px 2px rgba(255,120,140,0.9), 0 0 90px 14px rgba(224,30,60,0.6), inset 0 0 46px 8px rgba(224,30,60,0.45), inset 0 -12px 30px rgba(120,12,34,0.55), inset 0 16px 26px rgba(255,170,180,0.4); } }

/* Brand lockup (orb + wordmark) */
.brand-lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; filter: drop-shadow(0 0 10px rgba(224, 30, 60, 0.28)); }
/* Wordmark: rounded "Quicksand", crimson "BDSM" + white "Chat". Markup: BDSM<b>Chat</b> */
.brand-word {
  display: inline-block;
  font-family: "Quicksand", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700; font-size: 26px; letter-spacing: 0.5px; text-transform: none; color: var(--accent);
}
.brand-word b { font-weight: 700; margin-left: 0.16em; color: #fff; }
/* Wordmark only in the logo, no orb. */
.brand-lockup .brand-orb { display: none; }

/* ===== Living mask mascot ===== */
/* The mask floats, sways, and "breathes" so it feels alive, with a pulsing red aura. */
.mask-live {
  position: relative;
  display: block;
  width: min(var(--mw, 300px), 84vw);
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 1536 / 1024;
  background: url("/assets/mask.png") center/contain no-repeat;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(224, 30, 60, 0.45));
  transform-origin: 50% 58%;
  will-change: transform;
  animation: maskAlive 8.5s ease-in-out infinite;
}
/* Pulsing red glow behind the eye area, gives the mask a living stare */
.mask-live::before {
  content: ""; position: absolute; z-index: -1; inset: 8% -4% -18%;
  background:
    radial-gradient(26% 30% at 36% 60%, rgba(255, 40, 66, 0.55), transparent 70%),
    radial-gradient(26% 30% at 63% 60%, rgba(255, 40, 66, 0.55), transparent 70%);
  filter: blur(16px);
  animation: maskEyes 4.6s ease-in-out infinite;
}
@keyframes maskAlive {
  0%   { transform: translateY(0) rotate(-1.4deg) scale(1); }
  22%  { transform: translateY(-9px) rotate(0.9deg) scale(1.018); }
  46%  { transform: translateY(-3px) rotate(1.7deg) scaleX(1.012) scaleY(0.984); }
  68%  { transform: translateY(5px) rotate(0.4deg) scale(0.992); }
  86%  { transform: translateY(-2px) rotate(-1deg) scale(1.006); }
  100% { transform: translateY(0) rotate(-1.4deg) scale(1); }
}
@keyframes maskEyes { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.95; } }
.hero-mask { --mw: 540px; }
.ms-mask { --mw: 230px; }
.search-mask { --mw: 210px; }
.avatar-mask { --mw: 200px; }
.cta-mask { --mw: 250px; }
.page-mask { --mw: 300px; margin: 0 auto 8px; }
.mini-mask { --mw: 52px; margin-right: -12px; filter: drop-shadow(0 0 8px rgba(224, 30, 60, 0.5)); }

/* In the app (the actual product), use the clean head-on mask with a gentler,
   barely-there movement, it faces you like the stranger you're talking to. */
.ms-mask, .search-mask, .avatar-mask {
  background-image: url("/assets/mask-headon.png");
  aspect-ratio: 640 / 426;
  animation: maskSlight 6.5s ease-in-out infinite;
}
@keyframes maskSlight {
  0%, 100% { transform: translateY(0) rotate(-0.6deg) scale(1); }
  33%      { transform: translateY(-4px) rotate(0.5deg) scale(1.008); }
  66%      { transform: translateY(3px) rotate(-0.2deg) scale(0.996); }
}
@media (prefers-reduced-motion: reduce) {
  .mask-live { animation: none; }
  .mask-live::before { animation: none; opacity: 0.6; }
}

.orb.search-orb-el { --s: 180px; }

/* ===== SEO content + FAQ ===== */
.eyebrow { font-size: 15px; font-weight: 700; letter-spacing: 0.3px; margin-bottom: 14px; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.section-head h2 { font-size: 32px; letter-spacing: -0.5px; margin-bottom: 12px; }
.section-head p { color: var(--muted); font-size: 16px; }

.content { max-width: 760px; margin: 0 auto; padding: 20px 0 90px; display: grid; gap: 40px; }
.content-block h2 { font-size: 26px; letter-spacing: -0.4px; margin-bottom: 12px; }
.content-block p { color: var(--muted); font-size: 16.5px; line-height: 1.7; }

.faq { max-width: 760px; margin: 0 auto; padding: 10px 0 90px; }
.faq > h2 { font-size: 32px; letter-spacing: -0.5px; text-align: center; margin-bottom: 34px; }
.faq-list { display: grid; gap: 12px; }
.faq-item {
  background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: 14px;
  padding: 4px 20px; transition: border-color 0.15s;
}
.faq-item[open] { border-color: rgba(179, 18, 44, 0.4); }
.faq-item summary {
  list-style: none; cursor: pointer; font-size: 17px; font-weight: 600; color: var(--text);
  padding: 16px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 22px; color: var(--accent); font-weight: 400; transition: transform 0.2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--muted); font-size: 15.5px; line-height: 1.65; padding: 0 0 18px; }

@media (max-width: 500px) {
  .content-block h2, .faq > h2, .section-head h2 { font-size: 24px; }
}

/* ===== Hero orb moods (JS toggles classes on #heroOrb) ===== */
.orb.hero-orb .eye { transition: transform 0.28s ease, height 0.28s ease, border-radius 0.28s ease, top 0.28s ease; }
.m-blink .eye { animation: moodBlink 0.55s ease-in-out; }
@keyframes moodBlink { 0%, 100% { height: 15%; top: 44%; } 45%, 60% { height: 1.5%; top: 50%; } }
.m-wink .eye.l { animation: moodBlink 0.55s ease-in-out; }
.m-look .eye { animation: moodLook 1.5s ease-in-out; }
@keyframes moodLook { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-28%); } 62% { transform: translateX(28%); } }
.m-happy .eye { height: 7%; top: 46%; border-radius: 60% 60% 0 0; }
.m-surprised .eye { transform: scale(1.4); }
.m-surprised { animation: moodPop 0.55s ease-out; }
@keyframes moodPop { 0% { transform: scale(1); } 40% { transform: scale(1.09); } 100% { transform: scale(1); } }
.m-mad .eye { height: 10%; }
.m-mad .eye.l { transform: translateY(-8%) rotate(22deg); }
.m-mad .eye.r { transform: translateY(-8%) rotate(-22deg); }
.m-mad { animation: moodShake 0.5s ease-in-out; }
@keyframes moodShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7%); } 40% { transform: translateX(7%); } 60% { transform: translateX(-5%); } 80% { transform: translateX(5%); } }
.m-dizzy .eye.l { transform: translate(12%, -5%); }
.m-dizzy .eye.r { transform: translate(-12%, 5%); }
.m-dizzy { animation: moodWobble 1.2s ease-in-out; }
@keyframes moodWobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(7deg); } 75% { transform: rotate(-7deg); } }

/* ===== Twinkling starfield ===== */
.starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.starfield .star {
  position: absolute; border-radius: 50%; background: #fff;
  animation: twinkle var(--tw, 4s) ease-in-out infinite; animation-delay: var(--dl, 0s);
}
@keyframes twinkle {
  0%, 100% { opacity: var(--o, 0.6); transform: scale(1); }
  50% { opacity: 0.12; transform: scale(0.65); }
}

/* ===== Shooting stars / comets (motion driven by JS, each unique) ===== */
.shooting-star {
  position: fixed; z-index: 0; height: 1.6px; pointer-events: none; will-change: transform, opacity;
  width: var(--len, 90px);
  background: linear-gradient(90deg, rgba(255, 210, 215, 0) 0%, rgba(255, 175, 185, 0.12) 45%, rgba(255, 240, 242, 0.92) 100%);
  border-radius: 999px; filter: drop-shadow(0 0 3px rgba(255, 120, 140, 0.55));
}
.shooting-star::after {
  content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  width: 3.5px; height: 3.5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 7px 2px rgba(255, 210, 215, 0.9);
}
@media (prefers-reduced-motion: reduce) {
  .starfield, .shooting-star { display: none !important; }
  .hero-orb-wrap, .m-mad, .m-surprised, .m-dizzy { animation: none !important; }
}

/* ===== Links styled as buttons ===== */
a.btn-primary, a.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }

/* ===== Hero/CTA button stack with 18+ note ===== */
.cta-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.page-cta .cta-stack { align-items: center; }
.age-note { font-size: 13px; color: var(--muted); }

/* ===== App page top bar ===== */
.app-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  background: rgba(12, 7, 24, 0.65); backdrop-filter: blur(10px);
  position: relative; z-index: 10; flex: none;
}
.brand-lockup.sm .brand-word { font-size: 19px; }
.brand-lockup.sm .orb.brand-orb { --s: 30px; }
.app-topbar-right { display: flex; align-items: center; gap: 12px; }
.mode-toggle { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.mode-btn { background: transparent; border: none; color: var(--muted); font-weight: 600; font-size: 14px; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s; }
.mode-btn.active { background: var(--accent-2); color: #fff; }
.btn-ghost.adult.sm { padding: 8px 14px; font-size: 13px; }

/* ===== Content pages (About, Guidelines) ===== */
.page { max-width: 760px; margin: 0 auto; padding: 30px 0 90px; }
.page-head { text-align: center; margin-bottom: 40px; }
.orb.page-orb { --s: 90px; margin: 0 auto 20px; }
.page-head h1 { font-size: 42px; letter-spacing: -1px; margin-top: 6px; }
.page-lead { color: var(--muted); font-size: 18px; line-height: 1.6; max-width: 620px; margin: 16px auto 0; }
.prose h2 { font-size: 26px; letter-spacing: -0.4px; margin: 38px 0 12px; }
.prose p { color: var(--muted); font-size: 16.5px; line-height: 1.75; margin-bottom: 14px; }
.prose ul { color: var(--muted); font-size: 16.5px; line-height: 1.7; margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.notice { background: rgba(179, 18, 44, 0.1); border: 1px solid rgba(179, 18, 44, 0.35); border-radius: 14px; padding: 18px 20px; color: var(--text); font-size: 15.5px; line-height: 1.6; margin: 10px 0 22px; }
.notice strong { color: #fff; }
.page-fine { font-size: 14px; opacity: 0.8; margin-top: 26px; }
.page-cta { text-align: center; margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 10px; }

@media (max-width: 560px) {
  .page-head h1 { font-size: 30px; }
  /* Two tight rows: brand + toggle on top, actions below */
  .app-topbar { flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; }
  .brand-lockup.sm .brand-word { font-size: 17px; }
  .mode-toggle { order: 1; padding: 3px; }
  .mode-btn { padding: 7px 13px; font-size: 13px; }
  .app-topbar-right { order: 2; width: 100%; justify-content: flex-end; gap: 8px; }
  .call-timer { margin-right: auto; font-size: 14px; }
  .upsell-btn { padding: 10px 15px; font-size: 14px; }
  .call-chip { padding: 8px 12px; }
}

/* ===== Speaking indicator (who is talking) ===== */
.speak-ring {
  position: absolute; inset: 18px; border-radius: 50%; opacity: 0;
  transition: opacity 0.15s ease; pointer-events: none;
}
.avatar-wrap.talk-them .speak-ring {
  opacity: 1; border: 3px solid #ff5a6e;
  box-shadow: 0 0 46px 10px rgba(179, 18, 44, 0.7), inset 0 0 24px rgba(179, 18, 44, 0.5);
  animation: speakPulse 0.7s ease-in-out infinite;
}
.avatar-wrap.talk-me .speak-ring {
  opacity: 1; border: 3px solid #22d3ee;
  box-shadow: 0 0 46px 10px rgba(34, 211, 238, 0.62), inset 0 0 24px rgba(34, 211, 238, 0.45);
  animation: speakPulse 0.7s ease-in-out infinite;
}
.avatar-wrap.talk-them .pulse-ring, .avatar-wrap.talk-me .pulse-ring { opacity: 0.25; }
@keyframes speakPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } }
.speak-label { min-height: 20px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--muted); transition: color 0.15s; }
.speak-label.them { color: #ffa0b0; }
.speak-label.me { color: #6fe9f7; }

/* ===== Microphone blocked notice ===== */
.mic-blocked { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 7; }
.mic-blocked-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  padding: 30px 28px; max-width: 400px; width: 100%; text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.mic-blocked-card .mb-emoji { font-size: 40px; }
.mic-blocked-card h3 { font-size: 20px; margin: 12px 0 8px; }
.mic-blocked-card p { color: var(--muted); font-size: 15px; line-height: 1.5; }
.mb-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.mb-actions .btn-outline { padding: 12px 18px; }

/* ===== 18+ AI Chat upsell button (monetization CTA) ===== */
.upsell-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #e01e3c 0%, #ff2d4a 45%, #ff2d6e 100%);
  color: #fff; border: none; border-radius: 999px;
  padding: 10px 18px; font-weight: 800; font-size: 14px; cursor: pointer;
  font-family: inherit; letter-spacing: 0.2px; white-space: nowrap;
  box-shadow: 0 4px 20px rgba(224, 30, 60, 0.5);
  animation: upsellPulse 2.4s ease-in-out infinite;
  transition: transform 0.12s, box-shadow 0.15s, filter 0.15s;
}
.upsell-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 7px 28px rgba(224, 30, 60, 0.7); }
.upsell-btn:active { transform: translateY(0) scale(0.97); }
.upsell-emoji { font-size: 15px; }
.upsell-arrow { transition: transform 0.15s; font-weight: 900; }
.upsell-btn:hover .upsell-arrow { transform: translateX(4px); }
@keyframes upsellPulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(224, 30, 60, 0.4); }
  50% { box-shadow: 0 4px 30px rgba(224, 30, 60, 0.8); }
}
@media (prefers-reduced-motion: reduce) { .upsell-btn { animation: none; } }

/* ===== Landing page "more ways to chat" chips ===== */
.related { max-width: 900px; margin: 0 auto; padding: 20px 0 80px; text-align: center; }
.related > h2 { font-size: 28px; letter-spacing: -0.4px; margin-bottom: 26px; }
.related-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.related-chip {
  display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.related-chip:hover { border-color: var(--accent); background: rgba(179, 18, 44, 0.1); transform: translateY(-2px); }

/* ===== Language switcher ===== */
.lang-switch { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 26px 0 4px; }
.lang-switch a {
  color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; border: 1px solid transparent; transition: all 0.15s;
}
.lang-switch a:hover { color: var(--text); border-color: var(--border); }
.lang-switch a.active { color: var(--text); background: rgba(179, 18, 44, 0.14); border-color: rgba(179, 18, 44, 0.4); }

/* ===== RTL support (Arabic) ===== */
[dir="rtl"] .hero-copy, [dir="rtl"] .section-head, [dir="rtl"] .content-block, [dir="rtl"] .faq > h2, [dir="rtl"] .how, [dir="rtl"] .cta-copy { text-align: right; }
[dir="rtl"] .faq-item summary { flex-direction: row-reverse; }
[dir="rtl"] .hero-sub, [dir="rtl"] .page-lead { margin-left: 0; margin-right: 0; }
[dir="rtl"] .cta-band, [dir="rtl"] .hero-wrap { direction: rtl; }

/* ===== 3D dice (skip / next stranger) ===== */
.dice {
  display: inline-grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  width: 22px; height: 22px; padding: 3px; border-radius: 6px;
  background: linear-gradient(140deg, #ffffff 0%, #ffe7ea 55%, #ffc6d0 100%);
  box-shadow: inset 0 -2px 3px rgba(120, 90, 180, 0.4), inset 0 2px 2px rgba(255, 255, 255, 0.85), 0 2px 5px rgba(0, 0, 0, 0.45);
  transform: rotate(-10deg); transition: transform 0.2s;
}
.dice b { align-self: center; justify-self: center; width: 3.4px; height: 3.4px; border-radius: 50%; background: #4a2e7a; }
.dice b:nth-child(1) { grid-area: 1 / 1; }
.dice b:nth-child(2) { grid-area: 1 / 3; }
.dice b:nth-child(3) { grid-area: 2 / 2; }
.dice b:nth-child(4) { grid-area: 3 / 1; }
.dice b:nth-child(5) { grid-area: 3 / 3; }
#skipBtn:hover .dice { animation: diceRoll 0.6s ease; }
#skipBtn:active .dice { transform: rotate(-10deg) scale(0.88); }
@keyframes diceRoll { from { transform: rotate(-10deg); } to { transform: rotate(350deg); } }

/* ===== Mode choice screen (Text / Voice) ===== */
.mode-select { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; z-index: 6; }
.mode-select .ms-orb { --s: 96px; margin-bottom: 14px; }
.mode-select h2 { font-size: 26px; letter-spacing: -0.4px; }
.ms-sub { color: var(--muted); font-size: 15px; margin-bottom: 24px; text-align: center; }
.mode-cards { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.mode-pick {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 210px; padding: 26px 20px; border-radius: 18px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  font-family: inherit; transition: transform 0.12s, border-color 0.12s, background 0.12s;
}
.mode-pick:hover { transform: translateY(-3px); border-color: var(--accent); background: rgba(179, 18, 44, 0.06); }
.mp-emoji { font-size: 34px; }
.mp-title { font-size: 19px; font-weight: 700; }
.mp-sub { font-size: 13px; color: var(--muted); }

/* ===== Static orb expressions (keep TWO clear eyes, just a subtle mood) ===== */
.orb.e-wink .eye.l { height: 4%; top: 49%; border-radius: 3px; }        /* left eye winks shut */
.orb.e-mad .eye.l { transform: translateY(-8%) rotate(26deg); }         /* eyes tilt inward (angry) */
.orb.e-mad .eye.r { transform: translateY(-8%) rotate(-26deg); }
.orb.e-happy .eye { height: 8%; top: 45%; border-radius: 50% 50% 0 0; } /* upward arcs (happy) */
.orb.e-sleepy .eye { height: 4%; top: 50%; border-radius: 3px; }        /* half-closed (sleepy) */
/* Animated preview orbs (one blinks, one looks around) */
.orb.a-blink .eye { animation: eyeBlink 4s ease-in-out infinite; }
.orb.a-look .eye { animation: lookAround 3.2s ease-in-out infinite; }

/* ===== Blog index ===== */
.blog-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 6px; }
.blog-card { display: block; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 22px; text-decoration: none; color: var(--text); transition: transform 0.12s, border-color 0.12s; }
.blog-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.blog-card h2 { font-size: 18px; margin-bottom: 8px; letter-spacing: -0.3px; }
.blog-card p { color: var(--muted); font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.blog-card-link { color: var(--accent); font-weight: 600; font-size: 14px; }

/* ===== Blog post article ===== */
.blog-post { max-width: 720px; }
.blog-back { display: inline-block; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; margin-bottom: 20px; }
.blog-back:hover { color: var(--accent); }
.blog-post .post-h1 { font-size: 36px; line-height: 1.12; letter-spacing: -0.8px; margin: 6px 0 8px; }
.blog-post .post-meta { color: var(--muted); font-size: 14px; margin-bottom: 26px; }
.blog-post .prose h2, .blog-post h2 { font-size: 24px; margin: 34px 0 12px; letter-spacing: -0.3px; }
.blog-post ul { color: var(--muted); font-size: 16.5px; line-height: 1.7; margin: 0 0 14px; padding-left: 22px; }
.blog-post li { margin-bottom: 8px; }
.blog-card-meta { color: var(--accent); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px !important; }

/* ===== Text mode: proper chat window (compact header + full messages + composer) ===== */
/* Compact chat layout: used by text mode AND by voice when the chat is open. */
.call-screen.text-mode, .call-screen.voice-chat { justify-content: flex-start; }

/* Compact "who you're chatting with" header */
.text-mode #stage, .voice-chat #stage {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px;
  width: min(760px, 94%); margin: 12px auto 0; padding: 6px 6px 14px;
  border-bottom: 1px solid var(--border); flex: none;
}
.text-mode .avatar-wrap, .voice-chat .avatar-wrap { width: 44px; height: 44px; flex: none; }
.text-mode #strangerAvatar, .voice-chat #strangerAvatar {
  --s: 44px;
  box-shadow: 0 0 2px 1px rgba(255, 120, 140, 0.55), 0 0 12px 2px rgba(224, 30, 60, 0.45),
    inset 0 0 12px 2px rgba(224, 30, 60, 0.4), inset 0 4px 8px rgba(255, 170, 180, 0.35);
  transition: box-shadow 0.18s ease;
}
.text-mode .pulse-ring, .text-mode .speak-ring, .text-mode #speakLabel,
.voice-chat .pulse-ring, .voice-chat .speak-ring, .voice-chat #speakLabel { display: none; }
/* Voice-with-chat keeps a "who's speaking" cue as a glow on the mini orb */
.voice-chat .avatar-wrap.talk-them #strangerAvatar {
  box-shadow: 0 0 3px 2px rgba(255, 130, 150, 0.95), 0 0 22px 7px rgba(179, 18, 44, 0.75),
    inset 0 0 14px 3px rgba(224, 30, 60, 0.5);
}
.voice-chat .avatar-wrap.talk-me #strangerAvatar {
  box-shadow: 0 0 3px 2px rgba(111, 233, 247, 0.95), 0 0 22px 7px rgba(60, 200, 230, 0.65),
    inset 0 0 14px 3px rgba(60, 200, 230, 0.4);
}
.text-mode .stranger-text, .voice-chat .stranger-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.text-mode .stranger-name, .voice-chat .stranger-name { font-size: 17px; }
.text-mode .stranger-meta, .voice-chat .stranger-meta { font-size: 13px; }

/* Messages fill the space, composer pinned at the bottom, no floating card */
.text-mode #chatPanel, .voice-chat #chatPanel {
  position: relative; left: auto; right: auto; bottom: auto; transform: none;
  width: min(760px, 94%); max-height: none; flex: 1; min-height: 0;
  margin: 0 auto 92px; background: transparent; border: none; box-shadow: none;
  display: flex; flex-direction: column;
}
.text-mode #chatPanel .messages, .voice-chat #chatPanel .messages { flex: 1; min-height: 0; padding: 18px 2px; }
/* One solid full-width input bar with the send button embedded on the right */
.text-mode #chatPanel .composer, .voice-chat #chatPanel .composer {
  padding: 6px 6px 6px 4px; margin: 8px 0 6px; gap: 6px; align-items: center;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.text-mode #chatPanel .composer:focus-within, .voice-chat #chatPanel .composer:focus-within {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224, 30, 60, 0.18);
}
.text-mode #chatPanel #input, .voice-chat #chatPanel #input {
  background: transparent; border: none; border-radius: 12px; padding: 12px 14px;
}
.text-mode #chatPanel #input:focus, .voice-chat #chatPanel #input:focus { border: none; outline: none; }
.text-mode #chatPanel .send-btn, .voice-chat #chatPanel .send-btn {
  flex: none; width: 44px; height: 44px; padding: 0; border-radius: 12px; font-size: 17px;
}

/* Text mode pill = Skip + End only. Voice-chat keeps the mic + chat toggle
   (the toggle collapses back to the big orb view). */
.text-mode #micBtn, .text-mode #chatToggle { display: none; }

.ms-party-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 15px; border: 1px solid rgba(224,30,60,.5); background: rgba(224,30,60,.08); border-radius: 999px; padding: 12px 22px; transition: border-color .15s, background .15s, transform .1s; }
.ms-party-link:hover { border-color: var(--accent); background: rgba(224,30,60,.16); transform: translateY(-1px); }
.ms-party-badge { font-size: 10px; font-weight: 800; letter-spacing: .5px; background: var(--accent); color: #fff; border-radius: 6px; padding: 3px 6px; }
.ms-party-arrow { color: var(--accent); font-weight: 800; }

/* ============ Parties (group text rooms) ============ */
/* The party page scrolls normally (unlike the fixed-height chat screen). */
.app-body.party-page { position: static; inset: auto; height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; padding-bottom: 40px; }
.party-lobby { max-width: 620px; margin: 0 auto; padding: 24px 18px 60px; }
.party-hero { text-align: center; margin: 8px 0 28px; }
.party-hero .ms-mask { --mw: 150px; margin: 0 auto 8px; }
.party-hero h1 { font-family: "Quicksand", sans-serif; font-size: 34px; }
.party-hero .ms-sub { max-width: 520px; margin: 6px auto 0; }
.party-you { color: var(--muted); font-size: 14px; margin-top: 10px; }
.party-you b { color: var(--accent); }

/* Shared button */
.party-btn { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 12px 20px; font-weight: 700; cursor: pointer; font-size: 15px; }
.party-btn:hover { border-color: var(--accent); }
.party-btn.small { padding: 8px 14px; font-size: 13px; }
.party-error { color: var(--accent); font-size: 13px; font-weight: 600; text-align: center; margin-top: 10px; }
.party-fineprint { color: var(--muted); font-size: 12px; margin-top: 16px; line-height: 1.5; text-align: center; }

/* Primary create CTA */
.party-cta { display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; cursor: pointer;
  background: linear-gradient(135deg, var(--panel-2), var(--panel)); border: 1px solid var(--border); border-radius: 18px; padding: 20px 22px; transition: border-color .15s, transform .1s; }
.party-cta:hover { border-color: var(--accent); transform: translateY(-1px); }
.pcta-emoji { font-size: 30px; line-height: 1; }
.pcta-main { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.pcta-title { font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 19px; color: var(--text); }
.pcta-sub { color: var(--muted); font-size: 13px; }
.pcta-arrow { color: var(--accent); font-size: 22px; font-weight: 700; }

/* Join-by-code bar */
.party-joinbar { display: flex; gap: 10px; margin-top: 14px; }
.party-joinbar input { flex: 1; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px; color: var(--text); font-size: 15px; text-transform: uppercase; letter-spacing: 1px; }
.party-joinbar input::placeholder { text-transform: none; letter-spacing: normal; color: var(--muted); }
.party-joinbar input:focus { outline: none; border-color: var(--accent); }

.party-listwrap { margin-top: 34px; }
.party-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.party-list-head h2 { font-size: 17px; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; }

/* Create wizard */
.modal.wizard { max-width: 440px; text-align: left; }
.wiz-steps { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; }
.wiz-dot { width: 26px; height: 4px; border-radius: 999px; background: var(--border); transition: background .2s; }
.wiz-dot.active { background: var(--accent); }
.wiz-step h2 { font-size: 20px; margin-bottom: 6px; }
.wiz-step > p { color: var(--muted); font-size: 14px; margin-bottom: 16px; line-height: 1.45; }
.wiz-input { width: 100%; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; color: var(--text); font-size: 15px; margin-bottom: 12px; }
.wiz-input:focus { outline: none; border-color: var(--accent); }
.wiz-input.invalid { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(224,30,60,.15); }
.wiz-actions { display: flex; gap: 10px; margin-top: 8px; }
.modal-btn.primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.modal-btn.primary:hover { background: var(--accent); }
.modal-btn.ghost { flex: 0 0 auto; min-width: 96px; }

.choice-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.choice-card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; cursor: pointer;
  background: var(--panel-2); border: 1.5px solid var(--border); border-radius: 14px; padding: 14px 16px 14px 46px; position: relative; }
.choice-card .cc-emoji { position: absolute; left: 15px; top: 14px; font-size: 20px; }
.choice-card .cc-title { font-weight: 700; font-size: 15px; color: var(--text); }
.choice-card .cc-sub { color: var(--muted); font-size: 12.5px; }
.choice-card.selected { border-color: var(--accent); background: rgba(224,30,60,.08); }

.size-chips { display: flex; gap: 10px; margin-bottom: 18px; }
.size-chip { flex: 1; background: var(--panel-2); border: 1.5px solid var(--border); border-radius: 12px; padding: 14px 0; font-size: 17px; font-weight: 700; color: var(--text); cursor: pointer; }
.size-chip.selected { border-color: var(--accent); background: rgba(224,30,60,.08); color: var(--accent); }
.party-list { display: flex; flex-direction: column; gap: 10px; }
.party-empty { color: var(--muted); font-size: 14px; padding: 20px; text-align: center; background: var(--panel); border: 1px dashed var(--border); border-radius: 14px; }
.party-card { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.pc-main { flex: 1; min-width: 0; }
.pc-name { font-weight: 700; font-size: 16px; }
.pc-topic { color: var(--muted); font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-side { display: flex; align-items: center; gap: 12px; }
.pc-count { color: var(--muted); font-size: 13px; font-weight: 600; }
.pc-join { background: var(--accent-2); border: none; color: #fff; border-radius: 999px; padding: 8px 18px; font-weight: 700; cursor: pointer; }
.pc-join:disabled { background: var(--panel-2); color: var(--muted); cursor: not-allowed; }

/* Room */
.party-room { max-width: 940px; margin: 0 auto; padding: 28px 26px; display: flex; flex-direction: column; height: calc(100vh - 64px); }
.room-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.room-name { font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 22px; }
.room-topic { color: var(--muted); font-size: 13px; }
.room-actions { display: flex; align-items: center; gap: 12px; }
.room-count { color: var(--muted); font-size: 13px; font-weight: 600; }
.room-share { display: flex; gap: 8px; margin: 12px 0 4px; align-items: center; }
.room-share input { flex: 1; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; color: var(--muted); font-size: 13px; }
.room-code { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.room-code b { color: var(--accent); letter-spacing: 2px; font-family: "Quicksand", sans-serif; }
.room-note { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.room-body { flex: 1; display: grid; grid-template-columns: 240px 1fr; gap: 18px; min-height: 0; }
.room-members { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px; overflow-y: auto; }
.rm-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 10px; }
.member-list { display: flex; flex-direction: column; gap: 8px; }
.member { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.m-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.m-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-badge { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; padding: 2px 6px; border-radius: 6px; background: var(--panel-2); color: var(--muted); }
.m-badge.host { background: var(--accent-2); color: #fff; }
.m-badge.you { border: 1px solid var(--border); }
.m-kick { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 2px 4px; }
.m-kick:hover { color: var(--accent); }
.room-chat { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; min-height: 0; }
.party-messages { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.pmsg { max-width: 78%; }
.pmsg.me { align-self: flex-end; text-align: right; }
.pmsg.them { align-self: flex-start; }
.pmsg.sys { align-self: center; color: var(--muted); font-size: 13px; font-style: italic; max-width: 90%; text-align: center; }
.pmsg-handle { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.pmsg-text { display: inline-block; padding: 9px 13px; border-radius: 14px; font-size: 15px; line-height: 1.4; background: var(--panel-2); word-wrap: break-word; text-align: left; }
.pmsg.me .pmsg-text { background: var(--accent-2); color: #fff; }
.room-chat .composer { padding: 12px; border-top: 1px solid var(--border); }

@media (max-width: 720px) {
  .party-cols { grid-template-columns: 1fr; }
  .party-room { height: calc(100vh - 56px); padding: 12px; }
  .room-body { grid-template-columns: 1fr; }
  .room-members { max-height: 120px; }
}

/* Member action icons (private text / voice) */
.member { position: relative; }
.m-acts { display: inline-flex; gap: 2px; margin-left: 4px; }
.m-act { background: none; border: none; cursor: pointer; font-size: 14px; opacity: .55; padding: 2px 3px; line-height: 1; transition: opacity .12s, transform .1s; }
.m-act:hover { opacity: 1; transform: scale(1.15); }
.m-act.report { opacity: 1; color: var(--muted); font-size: 16px; margin-left: 2px; }
.m-act.report:hover { color: var(--accent); }

/* Report dialog */
.report-reasons { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 18px; }
.report-reason { text-align: left; background: var(--panel-2); border: 1.5px solid var(--border); border-radius: 12px; padding: 12px 14px; color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; }
.report-reason:hover { border-color: var(--accent); }
.report-reason.selected { border-color: var(--accent); background: rgba(224,30,60,.1); }
.modal-btn.primary:disabled { opacity: .45; cursor: not-allowed; }

/* Full-screen private 1-1 (text or voice) */
.dm-screen { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; z-index: 85; }
.dm-topbar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.dm-back { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px; color: var(--text); font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; }
.dm-back:hover { border-color: var(--accent); }
.dm-topbar-peer { flex: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.dm-peer-name { font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.dm-status { font-size: 12px; color: var(--muted); }
.dm-icon-btn { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; min-width: 40px; height: 40px; padding: 0 10px; cursor: pointer; font-size: 15px; color: var(--text); }
.dm-icon-btn:hover { border-color: var(--accent); }
.dm-icon-btn.muted { color: var(--accent); border-color: var(--accent); }
.dm-stage { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 20px 12px; }
.dm-stage .avatar-mask { --mw: 180px; }
.dm-stage-name { font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 22px; }
.dm-stage-mode { color: var(--muted); font-size: 14px; }
.dm-messages { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 720px; margin: 0 auto; }
.dm-composer { padding: 12px 16px 20px; width: 100%; max-width: 720px; margin: 0 auto; }
.dm-composer input { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 13px 16px; color: var(--text); font-size: 16px; }
.dm-composer input:focus { outline: none; border-color: var(--accent); }
/* Text mode: skip the big stage, let the conversation fill the screen */
.dm-screen.text .dm-stage { display: none; }
.dm-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--border); color: var(--text); padding: 12px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; z-index: 90; box-shadow: 0 12px 34px rgba(0,0,0,.45); max-width: 90vw; text-align: center; }