/* Сократ · Обсерватория — общий космический слой для всех остальных страниц:
   пульт организатора, визитка /play, приглашение и подготовка к дуэли. */

/* ---------- Общая тема (body.cosmos) ---------- */
body.cosmos{
  --bg:#07080F;--surface:rgba(22,25,44,.84);--line:rgba(140,160,220,.26);--ink:#EEF1FF;--muted:#9AA3C7;
  --accent:#F2C14E;--blue:#6FA4FF;--danger:#FF8A6B;--good:#7FE0C4;--panel:rgba(22,25,44,.84);--judge:#C9B8FF;
  color:var(--ink);font-family:Manrope,system-ui,sans-serif;background-color:#07080F;background-attachment:fixed;
  background-image:
    radial-gradient(1px 1px at 8% 12%,#ffffffaa,transparent 60%),radial-gradient(1px 1px at 72% 7%,#ffffff77,transparent 60%),
    radial-gradient(1.5px 1.5px at 91% 31%,#ffffffcc,transparent 60%),radial-gradient(1px 1px at 23% 44%,#ffffff88,transparent 60%),
    radial-gradient(1px 1px at 61% 58%,#ffffff66,transparent 60%),radial-gradient(1.5px 1.5px at 14% 79%,#ffffff99,transparent 60%),
    radial-gradient(1px 1px at 83% 88%,#ffffff77,transparent 60%),radial-gradient(1px 1px at 44% 26%,#ffffff55,transparent 60%),
    radial-gradient(55% 32% at 50% 20%,rgba(107,84,201,.18),transparent 70%),
    radial-gradient(40% 30% at 85% 75%,rgba(111,164,255,.08),transparent 70%);
}
body.cosmos :is(button,input,select,textarea){font-family:inherit}
body.cosmos :is(h1,h2,.brand){font-family:Unbounded,Manrope,sans-serif;font-weight:600;letter-spacing:0}
body.cosmos .brand{font-size:13px;letter-spacing:.2em;text-shadow:0 0 22px rgba(201,184,255,.45)}
body.cosmos h1{font-size:clamp(19px,4.6vw,24px)}
body.cosmos h2{font-size:17px}
body.cosmos .who{border-color:var(--line);background:rgba(20,24,40,.8);color:#C7CCE6;padding:6px 14px}
body.cosmos .small{color:var(--muted);letter-spacing:.16em;font-size:10.5px;font-weight:700}
body.cosmos .note{color:var(--muted)}
body.cosmos .card{background:var(--surface);border:1px solid var(--line);border-radius:30px;box-shadow:0 14px 44px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.05);backdrop-filter:blur(14px)}
body.cosmos :is(select,input,textarea){background:rgba(7,8,15,.65);border:1px solid var(--line);color:var(--ink)}
body.cosmos :is(select,input){border-radius:24px;padding:0 18px}
body.cosmos textarea{border-radius:20px}
body.cosmos :is(input,select,textarea):focus{border-color:var(--judge);box-shadow:0 0 0 3px rgba(201,184,255,.15)}
body.cosmos button.primary{border-radius:27px;min-height:52px;background:var(--ink);color:#10121F;font-family:Unbounded,Manrope,sans-serif;font-weight:600;font-size:13px;box-shadow:0 0 28px rgba(201,184,255,.45)}
body.cosmos button.ghost{border-radius:24px;border-color:var(--line);background:rgba(238,241,255,.04)}
body.cosmos button.ghost:hover{border-color:var(--judge)}
body.cosmos button.ghost.danger{color:var(--danger);border-color:rgba(255,138,107,.45)}
body.cosmos .nav{gap:6px;padding:5px;border-radius:30px;background:rgba(20,24,40,.82);border:1px solid var(--line);width:fit-content;max-width:100%}
body.cosmos .nav a{border:0;border-radius:22px;color:#C7CCE6;min-height:42px}
body.cosmos .nav a.cur{background:var(--ink);color:#10121F}
body.cosmos .nav a.a{color:var(--accent)}body.cosmos .nav a.b{color:var(--blue)}
body.cosmos .nav-go{border-radius:22px;min-height:42px;background:radial-gradient(120% 160% at 30% 20%,#FFB59E,#FF8A6B 50%,#B4452C);color:#2A0E06;box-shadow:0 0 22px rgba(255,138,107,.45)}
body.cosmos .chips{gap:6px}
body.cosmos .chip{border-color:var(--line);background:rgba(20,24,40,.7);padding:6px 13px 6px 26px;position:relative}
body.cosmos .chip::before{content:"";position:absolute;left:11px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#4A5070}
body.cosmos .chip.on{background:rgba(127,224,196,.14);color:var(--good);border-color:rgba(127,224,196,.5)}
body.cosmos .chip.on::before{background:var(--good);box-shadow:0 0 8px var(--good)}
body.cosmos .corner{border-width:1px;border-radius:24px}
body.cosmos .corner.a{box-shadow:0 0 24px rgba(242,193,78,.08)}body.cosmos .corner.b{box-shadow:0 0 24px rgba(111,164,255,.08)}
body.cosmos .log{border-radius:24px;background:rgba(7,8,15,.45);border:1px solid var(--line)}
body.cosmos .line{border-radius:16px}
body.cosmos .line.judge-l{background:rgba(201,184,255,.08)}
body.cosmos .line :is(.lbl){letter-spacing:.12em}
body.cosmos .stage{font-family:Unbounded,Manrope,sans-serif;font-weight:600;font-size:16px}
body.cosmos details>summary{cursor:pointer;color:var(--judge)}
body.cosmos .link-btn{border-radius:22px;border-color:var(--line)}
body.cosmos .invite-row button{border-radius:20px}
body.cosmos .status.err{color:var(--danger)}
@media(max-width:560px){body.cosmos .card{border-radius:26px}body.cosmos .nav{width:100%}}

/* ---------- Визитка /play ---------- */
body.cosmos-play{font-size:16px;line-height:1.6}
body.cosmos-play header,body.cosmos-play footer{border:0 !important;align-items:center}
body.cosmos-play header a,body.cosmos-play footer a{color:var(--muted)}
body.cosmos-play .hero{position:relative;padding:48px 0 20px}
body.cosmos-play .hero::before{content:"";position:absolute;right:0;top:34px;width:min(170px,30vw);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle at 34% 30%,#D9E7FF 0%,#6FA4FF 42%,#213E7A 86%);box-shadow:0 0 70px rgba(111,164,255,.45);animation:cosmos-float 7s ease-in-out infinite}
body.cosmos-play .hero::after{content:"";position:absolute;right:min(140px,24vw);top:150px;width:min(70px,13vw);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle at 40% 36%,#fff 0%,#E4DBFF 22%,#9C86F0 58%,#4B3A9E 86%);box-shadow:0 0 40px rgba(201,184,255,.6);animation:cosmos-float 6s ease-in-out infinite reverse}
body.cosmos-play .eyebrow{color:var(--judge);letter-spacing:.2em;font-size:11.5px}
body.cosmos-play h1{font-size:clamp(28px,5.4vw,52px);line-height:1.15;max-width:700px}
body.cosmos-play .hero a{display:inline-flex;align-items:center;min-height:50px;padding:0 24px;border-radius:25px;background:var(--ink);color:#10121F;text-decoration:none;font-family:Unbounded,Manrope,sans-serif;font-weight:600;font-size:13px;box-shadow:0 0 28px rgba(201,184,255,.45)}
body.cosmos-play .steps{gap:14px}
body.cosmos-play .step{border:1px solid var(--line) !important;border-radius:28px;background:rgba(20,24,40,.6);padding:20px 20px 20px 74px;position:relative}
body.cosmos-play .step::before{content:"";position:absolute;left:18px;top:20px;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFE9B0 0%,#F2C14E 40%,#7A570F 86%);box-shadow:0 0 18px rgba(242,193,78,.4)}
body.cosmos-play .step:nth-child(2)::before{background:radial-gradient(circle at 34% 30%,#D9E7FF 0%,#6FA4FF 42%,#213E7A 86%);box-shadow:0 0 18px rgba(111,164,255,.45)}
body.cosmos-play .step:nth-child(3)::before{background:radial-gradient(circle at 40% 36%,#fff 0%,#E4DBFF 22%,#9C86F0 58%,#4B3A9E 86%);box-shadow:0 0 18px rgba(201,184,255,.5)}
body.cosmos-play .entry{border-radius:32px;background:var(--surface);border-color:var(--line);box-shadow:0 14px 44px rgba(0,0,0,.35)}
body.cosmos-play input{border-radius:24px}
body.cosmos-play button{border-radius:26px;background:var(--ink);color:#10121F;font-family:Unbounded,Manrope,sans-serif;font-size:13px;box-shadow:0 0 26px rgba(201,184,255,.4)}
@media(max-width:650px){
  body.cosmos-play .hero{padding-top:150px}
  body.cosmos-play .hero::before{top:18px;right:12%;width:112px}
  body.cosmos-play .hero::after{top:70px;right:52%;width:52px}
}
@keyframes cosmos-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- Приглашение и подготовка к дуэли (до входа в комнату) ---------- */
body.duel-page.obs :is(#invitation,#lobby){background:rgba(22,25,44,.84);border:1px solid rgba(140,160,220,.26);border-radius:34px;box-shadow:0 14px 44px rgba(0,0,0,.4);backdrop-filter:blur(14px)}
body.duel-page.obs #invitation::after{display:none}
body.duel-page.obs :is(#invitation,#lobby) h1{font-family:Unbounded,Manrope,sans-serif;font-weight:600;letter-spacing:0;font-size:clamp(20px,4.8vw,30px)}
body.duel-page.obs :is(#invitation,#lobby) .step{color:#C9B8FF;letter-spacing:.16em;font-size:10.5px;text-transform:uppercase}
body.duel-page.obs .invite-role-grid{gap:12px}
body.duel-page.obs .invite-role{position:relative;border-radius:28px !important;padding:58px 16px 16px !important;transform:none !important;background:rgba(7,8,15,.45) !important}
body.duel-page.obs .invite-role::before{content:"";position:absolute;left:16px;top:14px;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFE9B0 0%,#F2C14E 40%,#7A570F 86%);box-shadow:0 0 18px rgba(242,193,78,.45)}
body.duel-page.obs .invite-role:first-child{border-color:rgba(242,193,78,.5) !important}
body.duel-page.obs .invite-role:last-child{border-color:rgba(111,164,255,.5) !important}
body.duel-page.obs .invite-role:last-child::before{background:radial-gradient(circle at 34% 30%,#D9E7FF 0%,#6FA4FF 42%,#213E7A 86%);box-shadow:0 0 18px rgba(111,164,255,.5)}
body.duel-page.obs .prep-steps li{border-radius:24px !important;background:rgba(7,8,15,.45) !important;display:flex;align-items:center;gap:10px}
body.duel-page.obs .prep-steps b{flex:0 0 26px;height:26px;margin:0 !important;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#1A1240 !important;
  background:radial-gradient(circle at 40% 36%,#fff 0%,#E4DBFF 25%,#9C86F0 70%);box-shadow:0 0 10px rgba(201,184,255,.5)}
body.duel-page.obs .prep-note{border-radius:24px !important;background:rgba(201,184,255,.07) !important;border-color:rgba(201,184,255,.3) !important}
body.duel-page.obs .readiness>div{border-radius:22px !important;background:rgba(7,8,15,.5) !important;position:relative;padding-left:28px !important}
body.duel-page.obs .readiness>div::before{content:"";position:absolute;left:11px;top:13px;width:9px;height:9px;border-radius:50%;background:#4A5070}
body.duel-page.obs .readiness>div:has([data-state=ready])::before{background:#7FE0C4;box-shadow:0 0 8px #7FE0C4}
body.duel-page.obs .readiness>div:has([data-state=error])::before{background:#FF8A6B;box-shadow:0 0 8px #FF8A6B}
body.duel-page.obs .readiness strong[data-state=ready]{color:#7FE0C4 !important}
body.duel-page.obs :is(#invitation,#lobby) button.primary{border-radius:27px !important;min-height:54px;background:#EEF1FF !important;color:#10121F !important;font-family:Unbounded,Manrope,sans-serif;font-weight:600;font-size:13px;box-shadow:0 0 28px rgba(201,184,255,.45) !important}
body.duel-page.obs :is(#invitation,#lobby) button.ghost{border-radius:24px !important}
body.duel-page.obs #preview-video{border-radius:26px}
body.duel-page.obs #mic-level{accent-color:#C9B8FF}
body.duel-page.obs :is(#invitation,#lobby) details>summary{color:#C9B8FF}
body.duel-page.obs #lobby .corner{border-radius:22px;border-width:1px}

@media(prefers-reduced-motion:reduce){body.cosmos *,body.cosmos-play .hero::before,body.cosmos-play .hero::after{animation:none !important}}

/* Подготовка к дуэли на телефоне: без лишних пунктов, кнопка входа всегда под пальцем. */
body.duel-page.obs #prep-steps{display:none !important}
body.duel-page.obs:not(.obs-role-viewer) #prep-instruction{display:none}
body.duel-page.obs #lobby .lobby-intro{margin-bottom:4px}
@media(max-width:800px){
  /* backdrop-filter делает fixed-кнопку пленницей карточки — на телефоне убираем его. */
  body.duel-page.obs #lobby:not([hidden]){padding-bottom:96px;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(22,25,44,.94)}
  body.duel-page.obs #lobby:not([hidden]) #join{position:fixed;z-index:45;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:auto;margin:0}
  body.duel-page.obs #lobby:not([hidden]) #join:disabled{opacity:1;background:#2A2E44 !important;color:#9AA3C7 !important;box-shadow:none !important}
  body.duel-page.obs #preview-video{max-height:120px}
  body.duel-page.obs #device-status{margin:4px 0}
}

/* Кнопка «Назад» в единой шапке — она такая же круглая, как «?» и «♫». */
.experience-back svg{display:block}
.experience-back:hover{color:var(--judge,#C9B8FF)}
.ar-top .ar-back{background:var(--glass,rgba(20,24,40,.74))}