:root {
  --bg: #0b0b0f;
  --panel: #15151b;
  --panel-2: #1c1c24;
  --border: #2a2a33;
  --text: #f2f2f5;
  --muted: #9a9aa6;
  --accent: #ff2d87;
  --accent-2: #ff5fa2;
  --danger: #ff5c6c;
  --ok: #3fb950;
  --adult: #ff2d87;
  --grad: linear-gradient(135deg, #ff2d87 0%, #ff5fa2 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: #08080b; }

/* Chat app: pin the shell to the VISIBLE viewport so the mobile keyboard can't
   scroll or "float" the page. The shell's height is driven by JS from
   visualViewport.height (the true visible height above the keyboard) because iOS
   vh/dvh don't reset reliably with the keyboard. Sizing the shell to exactly the
   space above the keyboard means the composer is already in view, so iOS has no
   reason to pan the page up on focus. Only the messages list scrolls. */
.app-body {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--app-h, 100dvh);
  min-height: 0; /* cancel `body { min-height: 100vh }` so the shell can shrink above the keyboard */
  overflow: hidden;
}

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(1100px 620px at 50% -12%, rgba(255, 45, 135, 0.10), transparent 62%),
    linear-gradient(180deg, #0d0d12 0%, #0b0b0f 45%, #08080b 100%);
  background-attachment: fixed;
}

/* Subtle starfield */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; /* starfield off for the Instinct look */
  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, 194, 220,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, 194, 220,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, 194, 220,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(108, 140, 255, 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; }
/* GIF messages: image bubble, no padding/background */
.msg.msg-media { padding: 0; background: transparent !important; max-width: 220px; }
.msg-gif { display: block; width: 100%; height: auto; border-radius: 14px; }

/* GIF picker */
.gif-btn { flex: none; background: var(--panel); border: 1px solid var(--border); color: var(--muted); border-radius: 12px; padding: 0 12px; font-weight: 800; font-size: 12px; letter-spacing: .04em; cursor: pointer; font-family: inherit; transition: color .15s, border-color .15s; }
.gif-btn:hover { color: var(--text); border-color: var(--accent); }
/* Voice-note mic button + recording bar */
.mic-btn-chat { flex: none; background: var(--panel); border: 1px solid var(--border); color: var(--muted); border-radius: 12px; padding: 0 12px; font-size: 16px; cursor: pointer; }
.mic-btn-chat:hover { color: var(--text); border-color: var(--accent); }
.rec-bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; margin: 8px 0 6px; }
.rec-cancel, .rec-send { flex: none; width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }
.rec-cancel { background: var(--panel-2); color: var(--muted); }
.rec-cancel:hover { color: var(--danger); }
.rec-send { background: var(--accent-2); color: #fff; margin-left: auto; }
.rec-dot { width: 11px; height: 11px; border-radius: 50%; background: #ff5a5a; flex: none; animation: recPulse 1s ease-in-out infinite; }
@keyframes recPulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); font-size: 15px; }
.rec-hint { color: var(--muted); font-size: 13px; }
/* Voice-note bubble player (WhatsApp-style) */
.msg.msg-voice { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.vn-play { flex: none; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255, 255, 255, .18); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.msg.them .vn-play { background: var(--accent-2); }
.vn-track { flex: 1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.msg.them .vn-track { background: rgba(255, 255, 255, .14); }
.vn-fill { height: 100%; width: 0; background: #fff; }
.msg.them .vn-fill { background: var(--accent); }
.vn-time { flex: none; font-variant-numeric: tabular-nums; font-size: 12px; opacity: .85; min-width: 34px; text-align: right; }
.gif-picker { display: flex; flex-direction: column; gap: 8px; padding: 10px; margin: 0 0 6px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; }
.gif-search-row { display: flex; gap: 8px; }
.gif-search { flex: 1; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; color: var(--text); font-size: 16px; font-family: inherit; }
.gif-search:focus { outline: none; border-color: var(--accent); }
.gif-close { flex: none; width: 38px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-size: 14px; }
.gif-close:hover { color: var(--text); }
.gif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-rows: 108px; gap: 6px; max-height: 300px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.gif-item { border: none; background: var(--panel-2); border-radius: 10px; overflow: hidden; cursor: pointer; padding: 0; line-height: 0; }
.gif-item img { display: block; width: 100%; height: 100%; object-fit: cover; } /* fixed-height rows (grid-auto-rows) give a definite height; img fills it. No overlap, works everywhere. */
.gif-item:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.gif-note { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 14px; padding: 24px 0; }
.gif-attrib { text-align: right; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); opacity: .7; }
.gif-attrib b { color: var(--text); font-weight: 800; }

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

.composer { display: flex; gap: 8px; padding: 8px 0; }
#input {
  flex: 1; min-width: 0; /* allow the field to shrink so the GIF/mic/send buttons always fit */
  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 */
}
.composer { gap: 6px; }
.gif-btn, .mic-btn-chat { padding: 0 10px; }
#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; }
a.modal-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; } /* confirm is a real anchor (crawlable) styled as a button */

/* ===== 18+ entry gate (shown before the chat) ===== */
.age-entry { position: fixed; inset: 0; z-index: 200; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: radial-gradient(70% 55% at 50% 28%, rgba(255, 45, 135, .18), transparent 70%), #0b0b0f;
  display: flex; align-items: center; justify-content: center; padding: 54px 20px; }
.ae-back { position: absolute; top: 16px; left: 18px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; z-index: 1; }
.ae-back:hover { color: var(--text); }
.age-entry-inner { width: 100%; max-width: 480px; text-align: center; }
.ae-brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.ae-brand .brand-mascot { width: 30px; height: 30px; }
.ae-brand .brand-word { font-size: 20px; }
.ae-title { font-size: 34px; font-weight: 800; letter-spacing: -0.5px; margin: 0 0 12px; color: #fff; }
.ae-lead { color: var(--muted); font-size: 15.5px; line-height: 1.55; margin: 0 auto 24px; max-width: 420px; }
.ae-check { display: flex; align-items: flex-start; gap: 12px; text-align: left; max-width: 470px; margin: 0 auto 22px; padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); cursor: pointer; }
.ae-check input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }
.ae-check span { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.ae-check a { color: var(--accent); text-decoration: none; }
.ae-check a:hover { text-decoration: underline; }
.ae-online { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.ae-online.hidden { display: none; }
.ae-online b { color: var(--text); }
.ae-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; margin-right: 5px; vertical-align: middle; }
.ae-agree { border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 17px; color: #fff; padding: 16px 42px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 14px 44px -8px rgba(255, 45, 135, .6); transition: filter .15s, transform .1s; }
.ae-agree:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ae-agree:active { transform: translateY(0) scale(.98); }
.ae-agree:disabled { opacity: .4; cursor: not-allowed; filter: none; transform: none; box-shadow: none; }
@media (max-width: 560px) { .ae-title { font-size: 28px; } .ae-lead { font-size: 14.5px; } .ae-rules li { font-size: 14px; } }
.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(255, 45, 135, 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(255, 45, 135, 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(255, 45, 135, 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(255, 45, 135, 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 */
/* ===== Premium "anticipation" searching experience ===== */
.searching { display: flex; flex-direction: column; align-items: center; gap: 20px; box-sizing: border-box; }
/* Center the anticipation view (even when text-mode top-aligns the chat), and reserve the
   bottom zone so the centered card never sits under the absolute SKIP/END pill. */
.call-screen.is-searching { justify-content: center !important; padding-bottom: 120px; box-sizing: border-box; }

/* Full-screen, slowly drifting aurora backdrop (GPU: transform/opacity only) */
.search-aura { position: fixed; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 38% at 30% 32%, rgba(255, 45, 135, .30), transparent 70%),
    radial-gradient(42% 42% at 72% 40%, rgba(255, 95, 160, .16), transparent 70%),
    radial-gradient(48% 48% at 50% 76%, rgba(40, 40, 50, .24), transparent 70%);
  animation: auraDrift 16s ease-in-out infinite alternate; will-change: transform; }
@keyframes auraDrift { 0% { transform: translate3d(-3%, -2%, 0) scale(1.05); } 100% { transform: translate3d(3%, 3%, 0) scale(1.18); } }

/* Orb stage: converging particles + radar rings + the orb */
.search-orb-stage { position: relative; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; }
.search-particles { position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; }
.sr-ring { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%;
  border: 1px solid rgba(255, 45, 135, .5); box-shadow: inset 0 0 24px rgba(255, 45, 135, .25); opacity: 0; z-index: 1;
  animation: srPing 3.6s cubic-bezier(.22, .61, .36, 1) infinite; will-change: transform, opacity; }
.sr-ring:nth-child(3) { animation-delay: 1.2s; }
.sr-ring:nth-child(4) { animation-delay: 2.4s; }
@keyframes srPing { 0% { transform: scale(.5); opacity: 0; } 14% { opacity: .85; } 100% { transform: scale(2.15); opacity: 0; } }

/* Glassmorphic copy card */
.search-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 16px 28px; border-radius: 18px; min-width: 260px; max-width: 90vw;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 40px -18px rgba(0, 0, 0, .6); }
.search-state { font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: #fff; }
.search-sub { font-size: 14px; color: var(--muted); }
.search-state, .search-sub { transition: opacity .45s ease, transform .45s ease; will-change: opacity, transform; }
.search-state.swap, .search-sub.swap { opacity: 0; transform: translateY(7px); }
/* Lives INSIDE the single glass card (below the sub-copy) so there's never a second box to overlap */
.search-hint { margin-top: 10px; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.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); }
/* Quiet-queue AI pitch (the funnel): shown when no one's around to chat */
.hint-quiet-title { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.hint-quiet-sub { font-size: 14px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
.hint-ai { display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; padding: 10px 18px; border: none; border-radius: 999px; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, #ff5f8c, #ff2d87); box-shadow: 0 8px 24px -8px rgba(255, 95, 140, .6); transition: filter .15s, transform .1s; }
.hint-ai:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hint-ai:active { transform: translateY(0) scale(.97); }
.hint-ai-wrap { margin-top: 8px; }
.hint-quiet-note { font-size: 12.5px; color: var(--muted); opacity: .8; margin-top: 12px; }
/* Subtle inline AI link (kept low-key on purpose) */
.hint-ai-link { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.hint-ai-link:hover { color: #ff5fa2; }
@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(255, 45, 135, 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(255, 45, 135, 0.6);
  background: radial-gradient(circle at 50% 40%, #1c1c24, #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(255, 45, 135, 0.18); color: #ffc2dc; font-weight: 800; font-size: 14px; letter-spacing: 0.5px; white-space: nowrap; flex: none; gap: 7px; }
.pill-btn.skip:hover { background: rgba(255, 45, 135, 0.3); color: #fff; }
.pill-btn.skip .skip-ico { font-size: 15px; line-height: 1; }
/* Phones: the 5-button voice control bar (mic, text, game, skip, end) can out-grow
   a narrow viewport and clip the outer buttons. Tighten spacing so it always fits. */
@media (max-width: 480px) {
  .control-pill { gap: 6px; padding: 8px; max-width: calc(100vw - 20px); }
  .control-pill .pill-btn { width: 46px; height: 46px; font-size: 16px; }
  .control-pill .pill-btn.skip, .control-pill .pill-btn.end { width: auto; height: 46px; }
  .control-pill .pill-btn.skip { padding: 0 13px; font-size: 13px; }
  .control-pill .pill-btn.end { padding: 0 15px; font-size: 13px; }
}

/* ===== 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(21, 21, 27, 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: #ff7ab3; }
.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(255, 45, 135, 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: 108px; left: 50%; transform: translateX(-50%); z-index: 40;
  background: rgba(21, 21, 27, 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; }
.nav-login { color: var(--text); text-decoration: none; font-weight: 700; font-size: 15px; opacity: .82; padding: 8px 6px; transition: opacity .15s, color .15s; }
.nav-login:hover { opacity: 1; color: var(--accent); }

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, #ff5fa2, #ff2d87); 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(255, 45, 135, 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(255, 45, 135, 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 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(255, 45, 135, 0.45), rgba(255, 45, 135, 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(255, 45, 135, 0.4)); animation: bob 4s ease-in-out infinite; }
.spark { position: absolute; color: #ff7ab3; 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: 8%; right: 6%; z-index: 2; white-space: nowrap;
  background: linear-gradient(135deg, #ff5fa2, #ff2d87); color: #fff; font-weight: 800; font-size: 17px;
  padding: 10px 16px; border-radius: 16px 16px 16px 4px; box-shadow: 0 8px 24px rgba(255, 45, 135, 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(255, 45, 135, 0.12); border: 1px solid rgba(255, 45, 135, 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, #ff5fa2, #ff2d87); color: #fff; font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(255, 45, 135, 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(255, 45, 135, 0.18), rgba(255, 45, 135, 0.08));
  border: 1px solid rgba(255, 45, 135, 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(255, 45, 135, 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(255, 45, 135, 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%, #1c1c24 0%, #15151b 34%, #160a29 62%, #0b0518 100%);
  box-shadow:
    0 0 3px 1px rgba(255, 194, 220, 0.65),
    0 0 60px 6px rgba(255, 45, 135, 0.45),
    0 0 130px 20px rgba(255, 45, 135, 0.22),
    inset 0 0 40px 6px rgba(255, 45, 135, 0.35),
    inset 0 -12px 30px rgba(40, 40, 50, 0.55),
    inset 0 16px 26px rgba(255, 194, 220, 0.32);
  flex: none;
}
.orb::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 58%, rgba(180, 100, 255, 0.7) 70%, transparent 80%);
  mix-blend-mode: screen; pointer-events: none;
}
.orb .eye {
  position: absolute; top: 44%; width: 13%; height: 15%; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #ffffff 0%, #fff0f6 55%, #ffc2dc 100%);
  box-shadow: 0 0 12px 2px rgba(255,255,255,0.8), 0 0 26px 6px rgba(255, 194, 220,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, 194, 220,0.6), 0 0 16px 3px rgba(255, 45, 135,0.5), inset 0 0 12px 2px rgba(255, 45, 135,0.4), inset 0 4px 8px rgba(255, 194, 220,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, 194, 220,0.65), 0 0 60px 6px rgba(255, 45, 135,0.4), inset 0 0 40px 6px rgba(255, 45, 135,0.35), inset 0 -12px 30px rgba(40, 40, 50,0.55), inset 0 16px 26px rgba(255, 194, 220,0.32); } 50% { box-shadow: 0 0 4px 2px rgba(255, 194, 220,0.9), 0 0 90px 14px rgba(255, 45, 135,0.6), inset 0 0 46px 8px rgba(255, 45, 135,0.45), inset 0 -12px 30px rgba(40, 40, 50,0.55), inset 0 16px 26px rgba(255, 194, 220,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(255, 45, 135, 0.28)); }
/* Wordmark logo: rounded "Outfit" font, white "Talk" + purple-gradient "Random".
   Markup stays TALK<b>RANDOM</b>; CSS lowercases then re-caps the first letters. */
.brand-word {
  display: inline-block;
  font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700; font-size: 27px; letter-spacing: 0; text-transform: lowercase; color: #fff;
}
.brand-word::first-letter { text-transform: uppercase; }
.brand-word b {
  display: inline-block; margin-left: 0.16em; font-weight: 700;
  background: linear-gradient(96deg, #ff2d87 0%, #ff2d87 55%, #ff5fa2 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.brand-word b::first-letter { text-transform: uppercase; }
/* The provided logo is wordmark-only, so hide the orb inside the header lockups. */
.brand-lockup .brand-orb { display: none; }
/* Speech-bubble mascot icon in the header lockup */
.brand-mascot { display: inline-flex; width: 30px; height: 30px; flex: none; filter: drop-shadow(0 2px 8px rgba(255, 45, 135, .45)); }
.brand-mascot svg { width: 100%; height: 100%; display: block; }

.orb.search-orb-el { --s: 150px; z-index: 2; animation: orbBreathe 3.4s ease-in-out infinite; will-change: transform; }
@keyframes orbBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } }

/* ===== 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(255, 45, 135, 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, 194, 220, 0) 0%, rgba(255, 194, 220, 0.12) 45%, rgba(255, 240, 246, 0.92) 100%);
  border-radius: 999px; filter: drop-shadow(0 0 3px rgba(255, 194, 220, 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, 194, 220, 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; }
  /* Anticipation search: drop motion, keep a gentle presence */
  .search-aura, .sr-ring, .orb.search-orb-el { animation: none !important; }
  .search-particles { display: none !important; }
  .search-state, .search-sub { transition: opacity .3s ease; }
  .search-state.swap, .search-sub.swap { transform: none; }
}

/* ===== 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; }
/* Absolutely centered in the header so it sits at the TRUE center (unaffected by the
   differing widths of the logo vs the avatar on either side). */
.mode-toggle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); 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(255, 45, 135, 0.1); border: 1px solid rgba(255, 45, 135, 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; }
  /* One inline row: brand, Text/Voice toggle, timer, avatar (Report now lives on the match) */
  .app-topbar { flex-wrap: nowrap; gap: 6px; padding: 10px 12px; }
  .brand-lockup.sm { flex-shrink: 0; gap: 7px; }
  .brand-lockup.sm .brand-word { font-size: 16px; white-space: nowrap; } /* never wrap the wordmark */
  .mode-toggle { padding: 3px; gap: 3px; }
  .mode-btn { padding: 6px 11px; font-size: 12.5px; }
  .app-topbar-right { gap: 8px; }
  .call-timer { font-size: 13px; }
}

/* ===== 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 #ff7ab3;
  box-shadow: 0 0 46px 10px rgba(255, 45, 135, 0.7), inset 0 0 24px rgba(255, 45, 135, 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: #ffc2dc; }
.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, #ff5fa2 0%, #ff2d87 45%, #ff5fa2 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(255, 45, 135, 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(160, 90, 255, 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(255, 45, 135, 0.4); }
  50% { box-shadow: 0 4px 30px rgba(255, 45, 135, 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(255, 45, 135, 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(255, 45, 135, 0.14); border-color: rgba(255, 45, 135, 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%, #fff0f6 55%, #ffc2dc 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: #22222a; }
.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: safe center; gap: 6px; padding: 18px 24px; z-index: 6; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mode-select .ms-orb { --s: 72px; margin-bottom: 8px; }
.mode-select h2 { font-size: 26px; letter-spacing: -0.4px; }
.ms-sub { color: var(--muted); font-size: 15px; margin-bottom: 14px; text-align: center; }
.mode-cards { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 680px; }
@media (min-width: 561px) { .mode-cards .mode-pick { flex: 1 1 170px; width: auto; } } /* Text / Voice / Video, equal cards in a row */
.mode-pick {
  position: relative; /* so .mp-badge (18+) anchors to the card */
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 210px; padding: 20px 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(255, 45, 135, 0.06); }
.mp-emoji { font-size: 34px; }
.mp-title { font-size: 19px; font-weight: 700; }
.mp-sub { font-size: 13px; color: var(--muted); }
.mode-pick.disabled { position: relative; opacity: 0.5; cursor: not-allowed; }
.mode-pick.disabled:hover { transform: none; border-color: var(--border); background: var(--panel); }
.mode-pick.disabled .mp-emoji { filter: grayscale(1); }
.mp-badge {
  position: absolute; top: 10px; right: 10px;
  background: rgba(255, 45, 135, 0.18); color: #ffc2dc;
  border: 1px solid rgba(255, 45, 135, 0.4);
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px;
}

/* The 18+ AI Chat card — warm accent so it reads as the spicy option, no header pill needed */
/* Wide primary AI CTA (the funnel), sits below the two mode cards */
.mode-ai { width: 100%; max-width: 600px; margin-top: 14px; display: flex; align-items: center; gap: 16px; text-align: left; padding: 16px 22px; border-radius: 16px; cursor: pointer; font-family: inherit; color: var(--text); border: 1px solid rgba(255, 95, 140, .5); background: linear-gradient(135deg, rgba(255, 80, 120, .14), rgba(255, 45, 135, .14)); transition: transform .12s, border-color .12s, background .12s, box-shadow .12s; }
.mode-ai:hover { transform: translateY(-2px); border-color: #ff5f8c; box-shadow: 0 14px 40px -12px rgba(255, 95, 140, .5); background: linear-gradient(135deg, rgba(255, 80, 120, .2), rgba(255, 45, 135, .2)); }
.mode-ai:active { transform: translateY(0) scale(.995); }
.mode-ai-emoji { font-size: 30px; flex: none; }
.mode-ai-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mode-ai-title { font-size: 19px; font-weight: 800; color: #ffb3cf; }
.mode-ai-sub { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.mode-ai-arrow { font-size: 22px; font-weight: 800; color: #ff5f8c; flex: none; transition: transform .15s; }
.mode-ai:hover .mode-ai-arrow { transform: translateX(4px); }
/* Video isn't live yet: a quiet coming-soon note, not a full card */
.mode-video-note { margin-top: 14px; font-size: 13px; color: var(--muted); opacity: .72; display: inline-flex; align-items: center; gap: 8px; }
.mvn-badge { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: rgba(255, 45, 135, .18); border: 1px solid rgba(255, 45, 135, .4); color: #ffc2dc; }

/* "Chat skipped" state: a clear beat when the partner leaves, with a Next button */
.skipped-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; z-index: 6; }
.skipped-banner { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 440px; padding: 20px 22px; border-radius: 20px; background: linear-gradient(135deg, #2a2a33 0%, #ff5fa2 100%); box-shadow: 0 18px 50px -14px rgba(255, 45, 135, .6); }
.skipped-ico { font-size: 38px; line-height: 1; flex-shrink: 0; }
.skipped-copy { text-align: left; }
.skipped-title { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -0.3px; }
.skipped-sub { font-size: 14.5px; color: rgba(255, 255, 255, .82); margin-top: 3px; }
.skipped-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 440px; }
.skipped-next { width: 100%; padding: 15px; border-radius: 14px; border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 17px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 30px -8px rgba(255, 45, 135, .6); transition: transform .1s, filter .15s; }
.skipped-next:hover { filter: brightness(1.08); transform: translateY(-1px); }
.skipped-next:active { transform: translateY(0) scale(.99); }
.skipped-end { background: transparent; border: none; color: var(--muted); font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; padding: 6px 12px; }
.skipped-end:hover { color: var(--text); }

/* ===== Mobile: compact horizontal mode cards so all options fit without scrolling ===== */
@media (max-width: 560px) {
  .mode-select { gap: 3px; padding: 18px 16px 22px; justify-content: flex-start; }
  .mode-select .ms-orb { --s: 58px; margin-bottom: 4px; }
  .mode-select h2 { font-size: 21px; }
  .ms-sub { font-size: 13px; margin-bottom: 14px; max-width: 300px; }
  .mode-cards { flex-direction: column; flex-wrap: nowrap; gap: 10px; width: 100%; max-width: 380px; }
  .mode-pick {
    width: 100%; padding: 14px 16px; border-radius: 14px; text-align: left;
    display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto;
    row-gap: 2px; column-gap: 14px; align-items: center;
  }
  .mode-pick:hover { transform: none; }
  .mp-emoji { grid-row: 1 / 3; grid-column: 1; font-size: 28px; justify-self: center; }
  .mp-title { grid-column: 2; align-self: end; font-size: 17px; }
  .mp-sub { grid-column: 2; align-self: start; font-size: 12px; }
  .mp-badge { top: 8px; right: 12px; }
  .ms-party-link { margin-top: 16px; font-size: 14px; padding: 11px 18px; }
}

/* ===== 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, 194, 220, 0.55), 0 0 12px 2px rgba(255, 45, 135, 0.45),
    inset 0 0 12px 2px rgba(255, 45, 135, 0.4), inset 0 4px 8px rgba(255, 194, 220, 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, 194, 220, 0.95), 0 0 22px 7px rgba(255, 45, 135, 0.75),
    inset 0 0 14px 3px rgba(255, 45, 135, 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; }

/* Report the matched user, sits WITH them (moved out of the header). Only visible while
   the stage is shown, i.e. once you're matched. */
.stage-report { flex: none; background: rgba(255, 255, 255, .05); border: 1px solid var(--border); color: var(--muted); width: 38px; height: 38px; border-radius: 50%; font-size: 15px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s, background .15s; }
.stage-report:hover { color: var(--danger); border-color: var(--danger); background: rgba(255, 90, 90, .08); }
.text-mode .stage-report, .voice-chat .stage-report { margin-left: auto; } /* push to the far right, beside the match */

/* 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(255, 45, 135, 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; }

/* While the on-screen keyboard is open (body.kb-open, set from visualViewport in
   app.js): hide the floating Skip/End pill and let the composer sit right above
   the keyboard, so typing feels clean and native instead of a cramped stack. */
body.kb-open .control-pill { opacity: 0; pointer-events: none; }
/* Sit the composer right on top of the keyboard (not floating high above it) and
   reclaim the space the hidden Skip/End pill used to reserve. */
body.kb-open .call-screen.text-mode #chatPanel,
body.kb-open .call-screen.voice-chat #chatPanel { margin-bottom: 4px; }
body.kb-open .text-mode #chatPanel .composer,
body.kb-open .voice-chat #chatPanel .composer { margin-bottom: 2px; }

/* ============================ Parties ============================ */
.ms-party-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--text); text-decoration: none; font-weight: 700; font-size: 15px; border: 1px solid rgba(255, 45, 135,.5); background: rgba(255, 45, 135,.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(255, 45, 135,.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: "Outfit", 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: "Outfit", 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(255, 45, 135,.15); }
.wiz-actions { display: flex; gap: 10px; margin-top: 8px; }
.party-page .modal-btn.primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.party-page .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(255, 45, 135,.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(255, 45, 135,.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: "Outfit", 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: "Outfit", 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(255, 45, 135,.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: "Outfit", 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: "Outfit", 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; }

/* ============================ Accounts / secure-your-handle ============================ */
.secure-bar {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 9px 14px; background: rgba(255, 45, 135,.12);
  border-bottom: 1px solid rgba(255, 45, 135,.3); color: var(--text);
  font-size: 14px; font-weight: 600; position: relative; z-index: 8;
}
.secure-bar b { color: var(--accent); }
.secure-cta {
  background: var(--accent-2); color: #fff; border: none; border-radius: 999px;
  padding: 7px 16px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit;
}
.secure-cta:hover { filter: brightness(1.1); }
.secure-x {
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 4px 6px; position: absolute; right: 10px;
}
.secure-x:hover { color: var(--text); }
.secure-input {
  width: 100%; box-sizing: border-box; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 16px; color: var(--text); font-size: 16px;
  margin: 6px 0 2px; font-family: inherit;
}
.secure-input:focus { outline: none; border-color: var(--accent); }
.secure-msg { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--accent); text-align: center; }
.auth-wrap {
  max-width: 480px; margin: 0 auto; padding: 60px 24px; display: flex; flex-direction: column;
  align-items: center; gap: 20px; text-align: center;
}
.auth-wrap h1 { font-family: "Outfit", sans-serif; font-size: 24px; }
@media (max-width: 480px) {
  .secure-bar { font-size: 13px; gap: 8px; padding: 8px 34px 8px 12px; }
}
.secure-handle-status { font-size: 13px; font-weight: 600; min-height: 18px; margin: 0 0 4px 2px; }
.secure-handle-status.checking { color: var(--muted); }
.secure-handle-status.ok { color: var(--ok); }
.secure-handle-status.taken { color: var(--danger); }
.secure-handle-wrap { position: relative; margin: 6px 0 2px; }
.secure-handle-wrap .secure-input { margin: 0; }
.secure-at { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 16px; font-weight: 700; pointer-events: none; }
.secure-input.has-at { padding-left: 30px; }
.secure-perks-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 2px 0 8px; text-align: left; }
.secure-perks { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.secure-perks li { position: relative; padding-left: 24px; font-size: 14px; color: var(--text); text-align: left; }
.secure-perks li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }

/* ============================ History + Friends (social) ============================ */
.topbar-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 7px 13px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; position: relative; }
.topbar-chip:hover { border-color: var(--accent); }
.chip-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; margin-left: 2px; }
@media (max-width: 640px) { .topbar-chip .tc-label { display: none; } }

.modal.sheet { max-width: 560px; width: 100%; padding: 0; text-align: left; display: flex; flex-direction: column; max-height: 80vh; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 12px; }
.sheet-head h2 { margin: 0; }
.sheet-sub { color: var(--muted); font-size: 14px; margin: 2px 0 0; }
.sheet-x { background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; padding: 4px; }
.sheet-x:hover { color: var(--text); }
.sheet-tabs { display: flex; gap: 8px; padding: 0 22px 6px; }
.sheet-tab { background: transparent; border: none; color: var(--muted); font-weight: 700; font-size: 14px; padding: 8px 10px; cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; }
.sheet-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.social-list { overflow-y: auto; padding: 6px 14px 18px; display: flex; flex-direction: column; gap: 8px; }
.social-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 30px 10px; }
.social-row { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.social-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 17px; }
.social-main { flex: 1; min-width: 0; }
.social-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-meta { color: var(--muted); font-size: 13px; margin-top: 2px; }
.social-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.social-btn { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.social-btn.add { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.social-btn.add:hover { filter: brightness(1.1); }
.social-btn.ghost:hover { border-color: var(--accent); }
.social-note { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.social-note.ok { color: var(--ok); }
/* Optional marketing opt-in (unticked by default) + Terms/Privacy notice by the action */
.secure-consent { display: flex; align-items: flex-start; gap: 9px; text-align: left; margin: 6px 0 2px; font-size: 13px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.secure-consent input { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }
.secure-legal { font-size: 12px; color: var(--muted); text-align: center; margin: 10px 0 0; }
.secure-legal a { color: var(--accent); text-decoration: none; }
.secure-legal a:hover { text-decoration: underline; }

.secure-gender { display: flex; gap: 8px; margin: 4px 0; }
.gender-opt { flex: 1; background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 12px; padding: 11px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; }
.gender-opt:hover { border-color: var(--accent); }
.gender-opt.selected { border-color: var(--accent-2); background: rgba(255, 45, 135,.16); color: #fff; }
.gbadge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; padding: 1px 6px; border-radius: 6px; vertical-align: middle; }
.gbadge.m { color: #5aa9ff; background: rgba(90,169,255,.16); }
.gbadge.f { color: #ff74c6; background: rgba(255,116,198,.16); }

/* ============================ Account menu ============================ */
.account-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; cursor: pointer; }
.account-avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 15px; background: var(--panel-2); border: 1px solid var(--border); }
.account-btn:hover .account-avatar { border-color: var(--accent); }
.acct-modal { position: relative; max-width: 380px; text-align: left; }
.acct-close { position: absolute; top: 14px; right: 16px; }
.acct-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.acct-avatar-lg { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 22px; }
.acct-avatar-lg.guest { background: var(--panel-2); border: 1px solid var(--border); }
.acct-id { min-width: 0; }
.acct-handle { font-size: 18px; font-weight: 800; }
.acct-email { color: var(--muted); font-size: 13px; margin-top: 2px; word-break: break-all; }
.acct-actions { display: flex; flex-direction: column; gap: 10px; }
.acct-actions .modal-btn { flex: none; }
.modal-btn.danger { background: transparent; border-color: rgba(255,90,90,.4); color: #ff6b6b; }
.modal-btn.danger:hover { background: rgba(255,90,90,.12); }
.acct-warn { font-size: 14px; color: var(--text); margin: 0 0 12px; line-height: 1.5; }
.acct-confirm-row { display: flex; gap: 10px; }
.acct-confirm-row .modal-btn { flex: 1; }

/* ===== Post-submit confirmation ===== */
.secure-msg { line-height: 1.7; }
.secure-sent-email { color: var(--text); font-size: 15px; display: inline-block; margin: 3px 0; }
.secure-sent-hint { color: var(--muted); font-weight: 500; font-size: 13px; }
.secure-link-btn { display: inline-block; margin-top: 12px; background: none; border: none; color: var(--muted); text-decoration: underline; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.secure-link-btn:hover { color: var(--text); }

/* ===== Account menu items (History / Friends) ===== */
/* Privacy note in the signed-in account menu */
.acct-note { font-size: 12.5px; line-height: 1.5; color: var(--muted); background: rgba(255, 45, 135, .08); border: 1px solid rgba(255, 45, 135, .22); border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; }

.acct-menu { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.acct-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); font-family: inherit; font-weight: 700; font-size: 15px; padding: 11px 12px; border-radius: 10px; cursor: pointer; }
.acct-menu-item:hover { background: var(--panel-2); }
.acct-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); margin-left: auto; }

/* pending-friend-request dot on the avatar */
.account-btn { position: relative; }
.account-btn.has-pending::after { content: ""; position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg); }

/* ===== Mobile header declutter ===== */
@media (max-width: 640px) {
  .call-chip.report .cr-label { display: none; }
  .call-chip.report { padding: 8px 11px; }
  .upsell-btn .upsell-arrow { display: none; }
  .upsell-btn { padding: 8px 13px; }
  .app-topbar { gap: 8px; }
  .app-topbar-right { gap: 8px; }
}
.secure-sent-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; }
.secure-sent-actions .secure-link-btn { margin-top: 0; order: 2; }
.secure-sent-actions .modal-btn { flex: none; min-width: 150px; order: 1; }
.secure-mode-switch { display: block; width: 100%; text-align: center; margin: 6px 0 2px; }


/* ================= Instinct brand (logo lockup shared by every page) ================= */
.brand-lockup { filter: none; gap: 8px; }
.brand-logo { height: 20px; width: auto; display: block; }
.brand-tag { font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #fff; background: var(--accent); padding: 3px 7px; border-radius: 6px; line-height: 1.2; }
.brand-lockup.sm .brand-logo { height: 17px; }
.ae-brand .brand-logo { height: 24px; }
.footer-brand .brand-logo { height: 22px; }
@media (min-width: 720px) { .brand-logo { height: 24px; } .brand-lockup.sm .brand-logo { height: 20px; } }

/* ================= Permanent rooms (/room/<slug>) ================= */
.is-room .room-count { cursor: pointer; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 8px 12px; white-space: nowrap; font-family: inherit; }
.is-room .room-count::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 6px; }
.is-room .room-count:hover { border-color: var(--accent); color: var(--text); }
.is-room .room-head { margin-bottom: 12px; }
@media (max-width: 720px) {
  /* Phone: the chat gets the whole screen; the member list opens from the online count. */
  .is-room .party-room { padding: 12px 12px calc(10px + env(safe-area-inset-bottom)); }
  .is-room .room-body { display: flex; flex-direction: column; gap: 10px; }
  .is-room .room-members { display: none; max-height: 38vh; flex: none; padding: 14px; }
  .is-room.show-members .room-members { display: block; }
  .is-room .room-chat { flex: 1; }
  .is-room .room-name { font-size: 19px; }
  .is-room .room-topic { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .is-room .party-messages { padding: 14px; }
  .is-room .member { min-height: 36px; }
  .is-room .m-act { font-size: 18px; padding: 6px; }
}

.room-rules { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 600; padding: 8px 4px; white-space: nowrap; }
.room-rules:hover { color: var(--accent); }
.nav .nav-login, .nav .btn-primary { white-space: nowrap; }
@media (max-width: 420px) { .nav .btn-primary { padding: 10px 14px; font-size: 13.5px; } .nav .nav-right { gap: 6px; } }

/* ================= Rooms v2: banner header, message list, online panel ================= */
.pm-av, .m-av, .room-thumb, .room-back { display: none; }
.pmsg-handle b { font-weight: inherit; }
.pmsg-handle time { margin-left: 6px; opacity: .75; }

.is-room .party-room { position: relative; width: 100%; max-width: 1240px; padding: 14px 20px 18px; height: calc(var(--app-h, 100vh) - 56px); }
.is-room .party-room > * { position: relative; z-index: 1; }
.is-room .party-room::before { content: ""; position: absolute; z-index: 0; top: 0; left: 50%; width: 100vw; transform: translateX(-50%); height: 280px; pointer-events: none;
  background: radial-gradient(700px 260px at 55% 0%, rgba(255, 45, 135, 0.32), transparent 70%), linear-gradient(180deg, #1a0a13 0%, #0b0b0f 100%); }
.is-room .party-room.has-cover::before {
  /* Full-width banner from the room's landscape photo (<slug>-wide.webp), darkened toward the bottom. */
  background:
    linear-gradient(180deg, rgba(11, 11, 15, 0.38) 0%, rgba(11, 11, 15, 0.78) 62%, #0b0b0f 100%),
    var(--room-cover) center 30% / cover no-repeat,
    #0b0b0f; }

.is-room .room-back { display: inline-flex; align-items: center; min-height: 36px; color: rgba(255, 255, 255, 0.82); text-decoration: none; font-size: 14.5px; font-weight: 600; align-self: flex-start; }
.is-room .room-back:hover { color: #fff; }
.is-room .room-head { justify-content: flex-start; align-items: center; gap: 16px; margin: 4px 0 16px; }
.is-room .room-thumb { display: flex; align-items: center; justify-content: center; flex: none; width: 96px; height: 96px; border-radius: 16px; font-size: 40px;
  background: linear-gradient(140deg, #ff2d87, #5a0f33) center 20% / cover no-repeat; border: 1px solid rgba(255, 255, 255, 0.14); }
.is-room .room-title { flex: 1; min-width: 0; }
.is-room .room-name { font-size: 30px; font-weight: 800; letter-spacing: -0.4px; color: #fff; line-height: 1.1; }
.is-room .room-topic { color: rgba(255, 255, 255, 0.78); font-size: 15px; margin-top: 4px; }
.is-room .room-meta { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.is-room .room-count { background: none; border: none; padding: 6px 0; color: #fff; font-weight: 700; font-size: 14.5px; }
.is-room .room-count:hover { color: #fff; }
.is-room .room-rules { color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 7px 16px; font-size: 13.5px; background: rgba(11, 11, 15, 0.35); }
.is-room .room-rules:hover { border-color: var(--accent); color: #fff; background: rgba(255, 45, 135, 0.14); }
.is-room .room-actions { align-self: flex-start; }
.is-room #leaveBtn { border-radius: 999px; background: rgba(11, 11, 15, 0.45); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; }
.is-room #leaveBtn:hover { border-color: var(--accent); color: #fff; }

.is-room .room-body { grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
.is-room .room-chat { order: 1; background: rgba(17, 17, 23, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; }
.is-room .room-members { order: 2; background: rgba(17, 17, 23, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 16px; }
.is-room .rm-title { color: #fff; font-weight: 700; font-size: 15px; text-transform: none; letter-spacing: 0; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.is-room .rm-title::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.is-room .member-list { gap: 4px; }
.is-room .member { gap: 12px; padding: 6px 4px; border-radius: 12px; font-size: 15px; font-weight: 600; color: #fff; }
.is-room .member:hover { background: rgba(255, 255, 255, 0.05); }
.is-room .m-dot { display: none; }
.is-room .m-av, .is-room .pm-av { display: flex; align-items: center; justify-content: center; flex: none; position: relative; border-radius: 50%; color: #fff; font-family: "Outfit", sans-serif; font-weight: 700; }
.is-room .m-av { width: 40px; height: 40px; font-size: 16px; }
.is-room .m-av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--ok); border: 2px solid #111117; }
.is-room .m-badge.you { border-radius: 999px; padding: 3px 9px; color: #fff; border-color: rgba(255, 255, 255, 0.3); background: none; }

.is-room .party-messages { padding: 20px 20px 10px; gap: 16px; }
.is-room .pmsg:not(.sys) { display: flex; gap: 14px; max-width: 100%; align-self: stretch; text-align: left; }
.is-room .pm-av { width: 44px; height: 44px; font-size: 17px; }
.is-room .pm-body { min-width: 0; flex: 1; }
.is-room .pmsg-handle { font-size: 15px; margin-bottom: 2px; color: var(--muted); }
.is-room .pmsg-handle b { font-weight: 700; color: var(--name, #fff); }
.is-room .pmsg.me .pmsg-handle b { color: #fff; }
.is-room .pmsg-handle time { font-size: 12.5px; opacity: 1; }
.is-room .pmsg-text, .is-room .pmsg.me .pmsg-text { display: block; background: none; padding: 0; border-radius: 0; color: #e9e9ee; font-size: 15.5px; line-height: 1.45; overflow-wrap: anywhere; }
.is-room .room-chat .composer { padding: 12px 14px 14px; gap: 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); align-items: center; }
.is-room .room-chat .composer input { border-radius: 16px; min-height: 52px; padding: 0 18px; background: #1a1a22; border: 1px solid rgba(255, 255, 255, 0.08); font-size: 15.5px; }
.is-room .room-chat .composer input:focus { border-color: var(--accent); outline: none; }
.is-room .room-chat .send-btn { width: 52px; height: 52px; padding: 0; border-radius: 50%; background: var(--accent); color: #fff; font-size: 18px; flex: none; }
.is-room .room-chat .send-btn:hover { background: #ff479a; color: #fff; }

@media (max-width: 720px) {
  .is-room .party-room { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); height: calc(var(--app-h, 100dvh) - 52px); }
  .is-room .party-room::before { height: 190px; }
  .is-room .room-head { gap: 12px; margin: 2px 0 12px; }
  .is-room .room-thumb { width: 64px; height: 64px; border-radius: 14px; font-size: 28px; }
  .is-room .room-name { font-size: 22px; }
  .is-room .room-topic { font-size: 13.5px; margin-top: 2px; }
  .is-room .room-meta { margin-top: 6px; gap: 10px; }
  .is-room .room-rules { padding: 6px 13px; }
  .is-room .party-messages { padding: 14px 12px 8px; gap: 14px; }
  .is-room .pmsg:not(.sys) { gap: 11px; }
  .is-room .pm-av { width: 38px; height: 38px; font-size: 15px; }
  .is-room .room-chat .composer { padding: 10px; }
  .is-room .room-chat .composer input { min-height: 48px; }
  .is-room .room-chat .send-btn { width: 48px; height: 48px; }
  .is-room .room-members { order: 0; }
}

/* ================= Random chat start screen v2 ("Meet someone new") ================= */
.mode-select.ms2 { justify-content: flex-start; gap: 0; padding: 0; align-items: stretch; }
.ms2-main { position: relative; z-index: 2; width: 100%; max-width: 620px; margin: 0 auto; padding: 26px 18px 8px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mode-select .ms2-title { font-family: "Outfit", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 38px; line-height: 1.05; font-weight: 800; letter-spacing: -1px; color: #fff; }
.ms2-title span { color: var(--accent); }
.ms2 .ms-sub { font-size: 16px; margin: 10px 0 14px; color: rgba(255, 255, 255, 0.78); }
.ms2-online { display: flex; align-items: center; gap: 8px; color: #3ddc84; font-weight: 700; font-size: 15.5px; margin-bottom: 18px; }
.ms2-dot { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; }
.ms2-start { width: 100%; max-width: 560px; min-height: 64px; border: none; border-radius: 999px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 21px; color: #fff;
  background: var(--accent); display: flex; align-items: center; justify-content: center; gap: 12px; position: relative; box-shadow: 0 10px 34px -10px rgba(255, 45, 135, 0.75); }
.ms2-start:hover { background: #ff479a; color: #fff; }
.ms2-start:active { transform: scale(0.985); }
.ms2-start-ic { font-size: 24px; }
.ms2-arrow { position: absolute; right: 26px; font-size: 20px; }
.ms2-choose { color: rgba(255, 255, 255, 0.72); font-size: 14.5px; margin: 20px 0 10px; }
.ms2-seg { display: flex; width: 100%; max-width: 380px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; overflow: hidden; background: rgba(17, 17, 23, 0.8); }
.ms2-segbtn { flex: 1; min-height: 50px; border: none; background: none; color: #fff; font-family: inherit; font-weight: 700; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ms2-segbtn:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.ms2-segbtn.active, .ms2-segbtn.active:hover { background: var(--accent); color: #fff; }
.ms2-feats { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 20px 0 0; padding: 0; color: rgba(255, 255, 255, 0.78); font-size: 14px; }
.ms2-feats li { display: flex; align-items: center; gap: 7px; }

.ms2-rooms { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 26px auto 0; padding: 0 16px calc(18px + env(safe-area-inset-bottom)); }
.ms2-rooms-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ms2-rooms-head h3 { font-family: "Outfit", sans-serif; font-size: 20px; font-weight: 700; color: #fff; }
.ms2-rooms-head a { color: var(--accent); text-decoration: none; font-weight: 700; font-size: 14px; padding: 8px 0 8px 12px; white-space: nowrap; }
.ms2-rooms-head a:hover { color: #ff7ab3; }
.ms2-roomrow { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.ms2-roomrow::-webkit-scrollbar { display: none; }
.ms2-room { position: relative; flex: 0 0 168px; height: 108px; border-radius: 14px; overflow: hidden; scroll-snap-align: start; text-decoration: none; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(140deg, #ff2d87, #3d0d27); display: block; }
.ms2-room:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.ms2-room img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.ms2-room-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(8, 8, 12, 0.05) 20%, rgba(8, 8, 12, 0.45) 55%, rgba(8, 8, 12, 0.95) 100%); }
.ms2-room-body { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.ms2-room-body b { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 15px; }
.ms2-room-body em { font-style: normal; font-size: 12.5px; color: rgba(255, 255, 255, 0.85); }

/* Side art: desktop only. Angled photo panels that fade toward the middle. */
.ms2-art { display: none; }
@media (min-width: 640px) {
  .ms2-main { padding-top: 44px; }
  .mode-select .ms2-title { font-size: 54px; }
  .ms2 .ms-sub { font-size: 19px; }
}
@media (min-width: 1100px) {
  /* While the start screen is showing, the chat column drops its 720px cap so the side art can
     reach the window edges. Once a chat starts (start screen hidden) the cap is back. */
  #chat:has(> #modeSelect.ms2:not(.hidden)) { max-width: none; width: 100%; }
  .mode-select.ms2 { justify-content: safe center; }
  .mode-select .ms2-title { font-size: 66px; }
  .ms2-art { display: block; position: absolute; top: 0; bottom: 0; width: 31%; z-index: 0; pointer-events: none; background-size: cover; background-repeat: no-repeat; opacity: 0.9; }
  .ms2-left { left: 0; background-image: url("/assets/rooms/miami-wide.webp"); background-position: 22% center;
    clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 100%), linear-gradient(180deg, #000 55%, transparent 96%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, #000 45%, transparent 100%), linear-gradient(180deg, #000 55%, transparent 96%); mask-composite: intersect; }
  .ms2-right { right: 0; background-image: url("/assets/rooms/nyc-wide.webp"); background-position: 70% center;
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
    -webkit-mask-image: linear-gradient(270deg, #000 45%, transparent 100%), linear-gradient(180deg, #000 55%, transparent 96%); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(270deg, #000 45%, transparent 100%), linear-gradient(180deg, #000 55%, transparent 96%); mask-composite: intersect; }
  .ms2-roomrow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; }
  .ms2-room { height: 132px; }
  .ms2-rooms { padding-left: 24px; padding-right: 24px; }
}

/* ================= Parties use the room design, with their invite row ================= */
.is-party .room-share { margin: 0 0 6px; gap: 8px; flex-wrap: wrap; }
.is-party .room-code, .is-party .room-share input { background: rgba(17, 17, 23, 0.92); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; color: rgba(255, 255, 255, 0.8); min-height: 42px; }
.is-party .room-share input { min-width: 0; flex: 1 1 180px; padding: 0 14px; }
.is-party .room-code { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; }
.is-party #copyLink { border-radius: 999px; min-height: 42px; padding: 0 18px; background: rgba(17, 17, 23, 0.92); border: 1px solid rgba(255, 255, 255, 0.22); color: #fff; }
.is-party #copyLink:hover { border-color: var(--accent); color: #fff; }
.is-party .room-note { color: rgba(255, 255, 255, 0.6); font-size: 12.5px; margin: 0 0 12px; }
.is-party .m-badge.host { background: var(--accent); color: #fff; border-radius: 999px; padding: 3px 9px; }
.is-party .m-kick { font-size: 15px; padding: 6px 8px; color: rgba(255, 255, 255, 0.6); }
.is-party .m-kick:hover { color: var(--accent); }
@media (max-width: 720px) {
  .is-party .room-note { display: none; }
  .is-party .room-share { margin-bottom: 10px; }
}

/* ================= Party icon picker ================= */
.icon-label { color: var(--muted); font-size: 13.5px; font-weight: 600; margin: 4px 0 8px; text-align: left; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin-bottom: 14px; }
.icon-pick { min-height: 44px; font-size: 22px; line-height: 1; border-radius: 12px; cursor: pointer; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); padding: 0; }
.icon-pick:hover { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.09); }
.icon-pick.selected, .icon-pick.selected:hover { border-color: var(--accent); background: rgba(255, 45, 135, 0.22); box-shadow: 0 0 0 1px var(--accent); }
.pc-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: linear-gradient(140deg, #ff2d87, #5a0f33); margin-right: 12px; }