:root {
  --bg: #0b0f1f;
  --bg-2: #121833;
  --panel: rgba(20, 27, 56, 0.72);
  --line: rgba(160, 175, 255, 0.14);
  --text: #eef0ff;
  --muted: #9aa3cc;
  --accent: #f5b971;      /* moonlight amber */
  --accent-2: #e8945a;
  --violet: #8b7cff;
  --danger: #ff6b7d;
  --ok: #5fe0a8;
  --radius: 18px;
  --font: 'Outfit', system-ui, -apple-system, Segoe UI, sans-serif;
}
html[dir="rtl"] { --font: 'Cairo', 'Outfit', system-ui, sans-serif; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background: radial-gradient(1200px 700px at 80% -10%, #2a2160 0%, transparent 60%),
              radial-gradient(900px 600px at -10% 110%, #13305a 0%, transparent 55%),
              var(--bg);
  min-height: 100dvh;
  overflow-x: hidden;
}
.sky {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 30%, #ffe9c7 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 44%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 72%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 60% 86%, #cfd6ff 50%, transparent 51%);
}
button, input { font: inherit; color: inherit; }
.hidden { display: none !important; }

/* ---------- header ---------- */
.top {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; max-width: 1400px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-size: 22px; font-weight: 600; letter-spacing: -.01em; direction: ltr; }
.brand b { color: var(--accent); font-weight: 700; }
.moon { width: 28px; height: 28px; fill: var(--accent); filter: drop-shadow(0 0 10px rgba(245,185,113,.55)); }
.moon.big { width: 56px; height: 56px; margin-bottom: 6px; }
.top-right { display: flex; align-items: center; gap: 12px; }
.online { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }

/* ---------- layout ---------- */
.stage {
  position: relative; z-index: 1;
  max-width: 1400px; margin: 0 auto; padding: 0 20px 20px;
  display: grid; gap: 14px;
  grid-template-columns: 1fr 340px;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "videos chat" "controls chat";
  height: calc(100dvh - 64px);
}
.videos { grid-area: videos; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-height: 0; }
.controls { grid-area: controls; }
.chat { grid-area: chat; }

.tile {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(160deg, #161d3d, #0e1329);
  border: 1px solid var(--line);
  min-height: 0;
}
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; background: #070a16; }
.local video { transform: scaleX(-1); }
.label {
  position: absolute; bottom: 12px; inset-inline-start: 12px;
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(8,11,25,.6); padding: 5px 10px; border-radius: 999px; color: var(--muted);
  backdrop-filter: blur(6px);
}
.overlay {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 50% 40%, rgba(139,124,255,.14), transparent 60%), rgba(9,12,26,.78);
  padding: 20px; transition: opacity .25s;
}
.overlay.gone { opacity: 0; pointer-events: none; }
.overlay p { margin: 12px 0 0; color: var(--muted); font-size: 17px; max-width: 26ch; }
.spinner {
  width: 46px; height: 46px; margin: 0 auto; border-radius: 50%;
  border: 3px solid rgba(245,185,113,.18); border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.report {
  position: absolute; top: 12px; inset-inline-end: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,107,125,.16); color: #ffd0d6; border: 1px solid rgba(255,107,125,.4);
  padding: 7px 12px; border-radius: 999px; cursor: pointer; font-size: 13px;
}
.report svg { width: 14px; height: 14px; fill: currentColor; }
.report:hover { background: rgba(255,107,125,.28); }

/* ---------- controls ---------- */
.controls {
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; backdrop-filter: blur(10px);
}
.spacer { flex: 1; }
button { cursor: pointer; border: 0; }
.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #1a1206; font-weight: 700; padding: 13px 28px; border-radius: 14px;
  box-shadow: 0 8px 24px -10px rgba(245,185,113,.7);
  display: inline-flex; align-items: center; gap: 10px; font-size: 16px;
  transition: transform .12s, filter .12s;
}
.primary:hover { filter: brightness(1.06); }
.primary:active { transform: translateY(1px); }
.primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.primary kbd { font: 600 11px var(--font); background: rgba(26,18,6,.15); padding: 2px 6px; border-radius: 6px; }
.ghost {
  background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--text);
  padding: 12px 22px; border-radius: 14px; font-weight: 500;
}
.ghost:hover { background: rgba(255,255,255,.09); }
.small { padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.wide { width: 100%; justify-content: center; }
.link { background: none; color: var(--muted); text-decoration: underline; padding: 8px; }
.icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.06); border: 1px solid var(--line);
}
.icon svg { width: 20px; height: 20px; fill: var(--text); }
.icon[aria-pressed="false"] { background: rgba(255,107,125,.2); border-color: rgba(255,107,125,.45); }
.icon[aria-pressed="false"] svg { fill: #ffb3bd; }

/* ---------- chat ---------- */
.chat {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  backdrop-filter: blur(10px); overflow: hidden;
}
.messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 85%; padding: 9px 13px; border-radius: 14px; line-height: 1.4; word-wrap: break-word; font-size: 15px; }
.msg.me { align-self: flex-end; background: rgba(245,185,113,.16); border: 1px solid rgba(245,185,113,.3); border-end-end-radius: 4px; }
.msg.them { align-self: flex-start; background: rgba(139,124,255,.16); border: 1px solid rgba(139,124,255,.3); border-end-start-radius: 4px; }
.sys { color: var(--muted); font-size: 13px; text-align: center; margin: 4px 0; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat-form input {
  flex: 1; min-width: 0; background: rgba(0,0,0,.25); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; outline: none;
}
.chat-form input:focus { border-color: rgba(245,185,113,.6); }
.chat-form input:disabled { opacity: .5; }

/* ---------- modals ---------- */
.modal {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: rgba(5,7,16,.72); backdrop-filter: blur(8px);
}
.card {
  width: min(440px, 100%); text-align: center;
  background: linear-gradient(170deg, #1a2147, #10152f); border: 1px solid var(--line);
  border-radius: 22px; padding: 28px 24px; box-shadow: 0 30px 80px -30px #000;
}
.card h1 { margin: 4px 0 6px; font-size: 26px; letter-spacing: -.01em; }
.card h2 { margin: 0 0 16px; font-size: 20px; }
.muted { color: var(--muted); margin: 0 0 18px; }
.rules { text-align: start; margin: 0 0 18px; padding: 14px 16px 14px 34px; background: rgba(0,0,0,.2); border-radius: 14px; color: #cfd4f3; font-size: 14px; line-height: 1.7; }
html[dir="rtl"] .rules { padding: 14px 34px 14px 16px; }
.field { display: grid; gap: 6px; text-align: start; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.field input { background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; outline: none; }
.check { display: flex; align-items: center; gap: 10px; text-align: start; margin: 0 0 16px; font-size: 15px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.error { color: var(--danger); font-size: 14px; margin: 0 0 12px; }
.reasons { display: grid; gap: 8px; margin-bottom: 8px; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: #1d244d; border: 1px solid var(--line); padding: 11px 18px; border-radius: 12px;
  box-shadow: 0 12px 30px -10px #000; font-size: 14px;
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .stage {
    grid-template-columns: 1fr;
    grid-template-areas: "videos" "controls" "chat";
    height: auto; padding: 0 12px 16px;
  }
  .videos { grid-template-columns: 1fr; position: relative; }
  .remote { aspect-ratio: 3 / 4; max-height: 62dvh; }
  .local {
    position: absolute; width: 30%; max-width: 150px; aspect-ratio: 3 / 4;
    bottom: 12px; inset-inline-end: 12px; z-index: 3; border-radius: 12px;
    box-shadow: 0 10px 24px -8px #000;
  }
  .local .label { display: none; }
  .remote .label { bottom: auto; top: 12px; }
  .chat { height: 300px; }
  .primary { padding: 13px 22px; }
  .top { padding: 12px 14px; }
}
@media (max-width: 420px) {
  .brand { font-size: 19px; }
  .controls { gap: 8px; padding: 10px; }
  .primary kbd { display: none; }
  .ghost { padding: 12px 14px; }
}

.legal { font-size: 12px; opacity: .7; margin: 8px 0 0; text-align: center; }
.legal a { color: inherit; text-decoration: underline; }

/* premium */
.premium-btn { background: linear-gradient(135deg, #f5b971, #e07a5f); color: #1a1020; border: 0; border-radius: 999px; font-weight: 700; cursor: pointer; padding: 6px 12px; font-family: inherit; }
.premium-btn.active { box-shadow: 0 0 0 2px #f5b97155, 0 0 18px #f5b97166; }
.crown { color: #f5b971; }
.premium-btn .crown { color: #1a1020; }
#premiumModal select { width: 100%; padding: 10px; border-radius: 10px; background: #12172b; color: inherit; border: 1px solid #ffffff22; font: inherit; }
.small-note { font-size: 12px; }
.gender-pick { display: flex; gap: 14px; align-items: center; justify-content: center; margin: 10px 0 4px; flex-wrap: wrap; }
.gender-pick label { display: flex; gap: 6px; align-items: center; padding: 6px 12px; border: 1px solid #ffffff22; border-radius: 999px; cursor: pointer; }
.gender-pick label:has(input:checked) { border-color: #f5b971; background: #f5b97122; }
.gender-pick input { accent-color: #f5b971; }
@media (max-width: 520px) { #premiumBtn [data-i18n="premium"] { display: none; } }

/* hosts */
.host-badge { position: absolute; top: 12px; inset-inline-start: 12px; background: #f5b971; color: #1a1020; font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 999px; z-index: 3; }
.host-banner { text-align: center; background: #f5b97122; color: #f5b971; padding: 6px; font-size: 14px; font-weight: 600; }

.coins-box { margin-top: 16px; padding-top: 12px; border-top: 1px solid #ffffff22; }
.coins-box p { margin: 4px 0; }
.host-toggle { display: inline-flex; gap: 6px; align-items: center; margin-inline-start: 16px; font-weight: 400; cursor: pointer; }
.host-toggle input { accent-color: #f5b971; }

/* games */
.games-wrap { position: relative; }
.game-menu { position: absolute; bottom: calc(100% + 8px); inset-inline-start: 0; display: flex; flex-direction: column; gap: 4px; background: #12172bee; border: 1px solid #ffffff22; border-radius: 14px; padding: 6px; min-width: 180px; z-index: 20; }
.game-menu button { background: none; border: 0; color: inherit; font: inherit; text-align: start; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.game-menu button:hover { background: #f5b97122; }
.game-card { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(92%, 440px); background: linear-gradient(135deg, #1d2240f2, #2a1d3af2); border: 1px solid #f5b97166; border-radius: 18px; padding: 14px 16px; z-index: 4; box-shadow: 0 10px 30px #0008; text-align: center; }
.card-who { margin: 0 0 6px; font-size: 12px; color: #f5b971; }
.card-text { margin: 0 0 10px; font-size: 18px; font-weight: 600; line-height: 1.4; }
.card-actions { display: flex; gap: 8px; justify-content: center; }

/* host gallery */
.wide-card { max-width: 760px !important; width: min(96vw, 760px); max-height: 88vh; overflow: auto; }
.hosts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 12px 0; }
.host-card { background: #12172b; border: 1px solid #ffffff1a; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.host-card.offline { opacity: .55; }
.host-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; background: #2a2f4a; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; color: #f5b971; }
.host-photo.big { width: 160px; height: 160px; margin: 0 auto 10px; display: block; }
.host-status { font-size: 12px; }
.host-card.online .host-status { color: #5ee08a; }
.host-card.busy .host-status { color: #f5b971; }
.host-bio { font-size: 13px; opacity: .8; margin: 0; min-height: 2.6em; }
#bioInput { width: 100%; background: #12172b; color: inherit; border: 1px solid #ffffff22; border-radius: 10px; padding: 8px; font: inherit; box-sizing: border-box; }