/* Сократ · Обсерватория для стартовой страницы /app.
   Темы и соперники — планеты, действия — светящиеся капсулы. */
body.self-page.obs{
  --ground:#07080F;--ink:#EEF1FF;--muted:#9AA3C7;--judge:#C9B8FF;--oa:#F2C14E;--ob:#6FA4FF;--alarm:#FF8A6B;
  --glass:rgba(20,24,40,.8);--edge:rgba(140,160,220,.26);--sheet:#16192C;
  font-family:Manrope,system-ui,sans-serif;color:var(--ink);background-color:var(--ground);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% 30%,rgba(107,84,201,.18),transparent 70%);
}
body.self-page.obs::before{display:none}
body.self-page.obs :is(button,input,select){font-family:inherit}
body.self-page.obs .wrap{max-width:980px;padding:max(14px,env(safe-area-inset-top)) 16px calc(92px + env(safe-area-inset-bottom));z-index:auto}
body.self-page.obs .top{margin-bottom:10px}
body.self-page.obs .brand{font-family:Unbounded,Manrope,sans-serif;font-weight:600;font-size:13px;letter-spacing:.2em;color:var(--ink);text-shadow:0 0 22px rgba(201,184,255,.45)}
body.self-page.obs .who{background:var(--glass);border-color:var(--edge);color:#C7CCE6}
body.self-page.obs .experience-icon{background:var(--glass);border-color:var(--edge)}
body.self-page.obs h1,body.self-page.obs h2{font-family:Unbounded,Manrope,sans-serif;font-weight:600;letter-spacing:0}

/* Никаких прямоугольных подложек: содержимое висит в космосе. */
body.self-page.obs .card{background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding:0}
body.self-page.obs :is(input,select){min-height:50px;border-radius:25px;padding:0 20px;background:rgba(7,8,15,.65);border:1px solid var(--edge);color:var(--ink)}
body.self-page.obs .note{color:var(--muted)}
body.self-page.obs .status{text-align:center}
body.self-page.obs button.primary,body.self-page.obs .result-link{min-height:54px;border-radius:27px !important;border:0;background:var(--ink) !important;color:#10121F !important;
  font-family:Unbounded,Manrope,sans-serif;font-weight:600;font-size:13.5px;box-shadow:0 0 30px rgba(201,184,255,.5) !important;filter:none !important}
body.self-page.obs button.primary:disabled{opacity:.4;box-shadow:none !important}
body.self-page.obs button.ghost{border-radius:24px !important;background:transparent !important;border:1px solid var(--edge) !important;color:var(--ink)}

/* ---------- Вход ---------- */
body.self-page.obs #auth{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
body.self-page.obs .intro{position:relative;min-height:0;width:100%;max-width:560px;padding:186px 8px 0;border:0;border-radius:0;background:transparent;box-shadow:none;align-items:center;text-align:center;overflow:visible}
body.self-page.obs .intro::after{display:none}
body.self-page.obs .orbit-mark{display:none}
body.self-page.obs .intro strong{font-family:Unbounded,Manrope,sans-serif;font-weight:600;font-size:clamp(21px,5.6vw,34px);line-height:1.2;max-width:none;margin:0 auto 8px}
body.self-page.obs .intro-kicker{color:var(--judge);letter-spacing:.2em}
body.self-page.obs .intro p{margin:0 auto;color:#C7CCE6;max-width:430px}
body.self-page.obs .intro details{margin:6px auto 0;color:var(--muted)}
body.self-page.obs .intro summary{color:var(--judge)}
/* Вход и выбор занимают экран без декоративной сцены. */
body.self-page.obs .intro{padding-top:24px}
body.self-page.obs .obs-hero,body.self-page.obs .obs-page-scene{display:none !important}
body.self-page.obs .auth-main{width:100%;max-width:420px;padding:6px 0 0}
body.self-page.obs .auth-main h1{font-size:17px;margin:4px 0}
body.self-page.obs #auth-step{color:var(--muted);letter-spacing:.12em;font-size:11px}
body.self-page.obs #auth .small{display:none}
body.self-page.obs #auth button{width:100%}
body.self-page.obs .auth-switch{justify-content:center}

/* Сцена над заголовком: звезда-судья и две планеты на орбите. */
.obs-hero{position:absolute;left:50%;top:0;width:min(340px,92%);height:180px;transform:translateX(-50%);perspective:800px;pointer-events:none}
.obs-hero .ring{position:absolute;left:50%;top:52%;width:100%;aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(201,184,255,.32);transform:translate(-50%,-50%) rotateX(74deg);box-shadow:0 0 30px rgba(156,134,240,.12)}
.obs-hero .ring.r2{width:66%;border-style:dashed;border-color:rgba(201,184,255,.24);animation:obs-hero-spin 50s linear infinite}
.obs-hero .star{position:absolute;left:50%;top:42%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;
  background:radial-gradient(circle at 40% 36%,#fff 0%,#E4DBFF 22%,#9C86F0 58%,#4B3A9E 86%);box-shadow:0 0 40px rgba(201,184,255,.75),0 0 90px rgba(156,134,240,.35)}
.obs-hero .star::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(201,184,255,.4);animation:obs-hero-halo 3.2s ease-out infinite}
.obs-hero .p{position:absolute;border-radius:50%;animation:obs-hero-float 6s ease-in-out infinite}
.obs-hero .pa{left:9%;top:44%;width:64px;height:64px;background:radial-gradient(circle at 34% 30%,#FFE9B0 0%,#F2C14E 40%,#7A570F 86%);box-shadow:0 0 34px rgba(242,193,78,.45)}
.obs-hero .pb{right:9%;top:30%;width:74px;height:74px;background:radial-gradient(circle at 34% 30%,#D9E7FF 0%,#6FA4FF 42%,#213E7A 86%);box-shadow:0 0 40px rgba(111,164,255,.5);animation-delay:-3s}
@keyframes obs-hero-spin{to{transform:translate(-50%,-50%) rotateX(74deg) rotateZ(360deg)}}
@keyframes obs-hero-halo{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes obs-hero-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- Кабинет ---------- */
body.self-page.obs #workspace{display:flex;flex-direction:column;gap:10px}
body.self-page.obs #workspace[hidden]{display:none}
body.self-page.obs .account-row{order:-2;margin:0;justify-content:center;gap:10px;font-size:12.5px;color:var(--muted)}
body.self-page.obs .account-row button{min-height:32px !important;padding:0 14px;font-size:12.5px}
body.self-page.obs .create-heading{justify-content:center;text-align:center;margin:0 0 4px}
body.self-page.obs .create-heading h2{font-size:20px}
body.self-page.obs .create-heading .note{display:none}
body.self-page.obs .setup-grid{gap:12px}
body.self-page.obs :is(.topic-panel,.opponent-panel){padding:0;border:0;background:transparent;box-shadow:none;text-align:center}
body.self-page.obs .form-step{margin:0 0 10px;color:var(--muted);letter-spacing:.14em;font-size:10.5px;text-transform:uppercase}

/* Темы и соперники — планеты. */
body.self-page.obs :is(.quick-topics,.choice-grid){display:flex !important;justify-content:center;align-items:center;gap:clamp(10px,4vw,26px);margin:0 0 6px}
body.self-page.obs :is(.quick-topics,.choice-grid) button{
  flex:0 0 auto;width:clamp(96px,27vw,128px) !important;height:clamp(96px,27vw,128px);min-height:0 !important;aspect-ratio:1;padding:12px !important;border-radius:50% !important;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:12.5px !important;font-weight:700;line-height:1.2;
  color:#0B1430 !important;border:2px solid transparent !important;transform:none !important;
  background:radial-gradient(circle at 34% 28%,#D9E7FF 0%,#6FA4FF 46%,#213E7A 92%) !important;box-shadow:0 0 26px rgba(111,164,255,.35),inset -10px -14px 26px rgba(0,0,0,.25) !important;
  animation:obs-hero-float 7s ease-in-out infinite;transition:box-shadow .25s ease,filter .25s ease}
body.self-page.obs .quick-topics button:nth-child(1){background:radial-gradient(circle at 34% 28%,#FFE9B0 0%,#F2C14E 44%,#7A570F 92%) !important;color:#2A1D03 !important;box-shadow:0 0 26px rgba(242,193,78,.35),inset -10px -14px 26px rgba(0,0,0,.25) !important}
body.self-page.obs .quick-topics button:nth-child(2){animation-delay:-2s}
body.self-page.obs .quick-topics button:nth-child(3){background:radial-gradient(circle at 34% 28%,#F1EAFF 0%,#B9A6F5 44%,#4B3A9E 92%) !important;color:#1A1240 !important;animation-delay:-4s;box-shadow:0 0 26px rgba(201,184,255,.35),inset -10px -14px 26px rgba(0,0,0,.25) !important}
body.self-page.obs :is(.quick-topics,.choice-grid) button[aria-pressed=true]{border-color:#fff !important;box-shadow:0 0 0 6px rgba(238,241,255,.14),0 0 44px rgba(238,241,255,.45) !important}
body.self-page.obs .quick-topics:has([aria-pressed=true]) button:not([aria-pressed=true]),
body.self-page.obs .choice-grid:has([aria-pressed=true]) button:not([aria-pressed=true]){filter:saturate(.55) brightness(.75)}
body.self-page.obs .choice-grid button strong{font-size:12.5px;margin:0 0 3px}
body.self-page.obs .choice-grid button span{font-size:10.5px !important;color:inherit !important;opacity:.75;line-height:1.2}
body.self-page.obs #opponent-ai{background:radial-gradient(circle at 34% 28%,#F1EAFF 0%,#B9A6F5 44%,#4B3A9E 92%) !important;color:#1A1240 !important}
body.self-page.obs #opponent-human{background:radial-gradient(circle at 34% 28%,#FFE9B0 0%,#F2C14E 44%,#7A570F 92%) !important;color:#2A1D03 !important;animation-delay:-3s}
body.self-page.obs #selected-topic{margin:4px 0;color:var(--judge);font-weight:600}
body.self-page.obs #all-topics{border:0;margin:0 auto;padding:0}
body.self-page.obs #all-topics summary{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:18px;border:1px solid var(--edge);color:#C7CCE6;font-size:13px;list-style:none}
body.self-page.obs #all-topics summary::-webkit-details-marker{display:none}
body.self-page.obs #all-topics[open]{padding:12px;border-radius:26px;background:var(--sheet);border:1px solid var(--edge);text-align:left}
body.self-page.obs #all-topics select{width:100%;margin:6px 0}
body.self-page.obs .before-create{margin:6px auto 10px;background:transparent;font-size:11.5px;color:var(--muted)}
body.self-page.obs #create{width:100%;max-width:420px}

/* Готовая дуэль — всплывающее окно. */
body.self-page.obs #result:not([hidden]){order:-1;padding:18px !important;border-radius:30px;background:var(--sheet) !important;border:1px solid rgba(201,184,255,.4) !important;box-shadow:0 0 40px rgba(156,134,240,.2);animation:obs-self-rise .45s cubic-bezier(.2,1.2,.4,1) both;text-align:center}
body.self-page.obs #result .invite-panel{border-radius:24px;background:rgba(111,164,255,.08);border:1px solid rgba(111,164,255,.3);text-align:left}
body.self-page.obs #close-room{color:var(--alarm) !important;border-color:rgba(255,138,107,.4) !important}
body.self-page.obs #subscription-panel{border-radius:28px;background:rgba(242,193,78,.07);border-color:rgba(242,193,78,.4);text-align:center}
@keyframes obs-self-rise{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Клуб — в доке; приглашение друзей — капсула. */
body.self-page.obs .club-entry{display:none}
body.self-page.obs #referrals{border:0;margin:4px auto 0;padding:0;text-align:center}
body.self-page.obs #referrals summary{display:inline-flex;align-items:center;min-height:38px;padding:0 18px;border-radius:19px;border:1px solid rgba(242,193,78,.45);color:var(--oa);font-size:13px;list-style:none}
body.self-page.obs #referrals summary::-webkit-details-marker{display:none}
body.self-page.obs #referrals[open]{padding:14px;border-radius:26px;background:var(--sheet);border:1px solid var(--edge)}
body.self-page.obs .install-help{text-align:center;font-size:12px;margin:10px 0 0}
@media(max-height:940px){body.self-page.obs .install-help{display:none}}
body.self-page.obs #workspace:not([hidden]) ~ .install-help,body.self-page.obs .card:has(#workspace:not([hidden])) + .install-help{display:none}

.obs-dock{position:fixed;z-index:50;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:4px;padding:5px;border-radius:28px;
  background:rgba(20,24,40,.94);border:1px solid rgba(140,160,220,.26);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.obs-dock a{min-height:44px;padding:0 18px;border-radius:22px;display:flex;align-items:center;color:#C7CCE6;text-decoration:none;font:600 13.5px/1 Manrope,system-ui,sans-serif}
.obs-dock a[aria-current=page]{background:#EEF1FF;color:#10121F;font-weight:700}

@media(min-width:800px){
  body.self-page.obs .setup-grid{grid-template-columns:1fr 1fr;align-items:start}
  body.self-page.obs #auth{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;min-height:calc(100dvh - 190px)}
  body.self-page.obs .intro{padding-top:24px}
  body.self-page.obs .obs-hero{height:240px;width:min(400px,96%)}
}
@media(prefers-reduced-motion:reduce){body.self-page.obs *,.obs-hero *{animation:none !important;transition:none !important}}

/* Выбор темы: компактная случайная подборка и раскрываемый ввод своей темы. */
body.self-page.obs .quick-topics button{font-size:clamp(10px,2.8vw,12px) !important;line-height:1.08;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow-wrap:anywhere;text-align:center}
body.self-page.obs .refresh-topics{align-self:center;min-height:34px !important;padding:0 14px;font-size:12px}
body.self-page.obs #custom-topic-panel,body.self-page.obs #all-topics{width:min(100%,460px);box-sizing:border-box}
body.self-page.obs #custom-topic-panel{margin:4px auto 8px}
body.self-page.obs #custom-topic-panel summary{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:18px;border:1px solid var(--edge);color:#C7CCE6;font-size:13px;list-style:none}
body.self-page.obs #custom-topic-panel summary::-webkit-details-marker{display:none}
body.self-page.obs #custom-topic-panel[open]{padding:12px;border-radius:26px;background:var(--sheet);border:1px solid var(--edge);text-align:left}
body.self-page.obs #custom-topic-panel input{width:100%;box-sizing:border-box;margin:6px 0 10px}
body.self-page.obs #custom-topic-panel button{width:100%;max-width:none}
@media(max-width:420px){body.self-page.obs :is(.quick-topics,.choice-grid){gap:8px}body.self-page.obs :is(.quick-topics,.choice-grid) button{width:clamp(88px,27vw,112px) !important;height:clamp(88px,27vw,112px);padding:9px !important}}

/* Длинные темы в круги не помещаются: темы и соперники — скруглённые карточки
   с маленькой планетой-меткой слева. :nth-child(n) поднимает вес правил над прежними «планетами». */
body.self-page.obs .quick-topics{display:grid !important;grid-template-columns:1fr;gap:8px;width:100%;max-width:520px;margin:0 auto 6px}
body.self-page.obs .choice-grid{display:grid !important;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:520px;margin:0 auto 6px}
body.self-page.obs :is(.quick-topics,.choice-grid) button:nth-child(n){
  position:relative;width:100% !important;height:auto !important;aspect-ratio:auto;min-height:58px !important;
  padding:12px 16px 12px 54px !important;border-radius:20px !important;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;
  font-size:14px !important;font-weight:600;line-height:1.3;color:#EEF1FF !important;
  background:rgba(22,25,44,.84) !important;border:1px solid rgba(140,160,220,.28) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.25) !important;animation:none;filter:none}
body.self-page.obs :is(.quick-topics,.choice-grid) button:nth-child(n)::before{content:"";position:absolute;left:16px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#D9E7FF 0%,#6FA4FF 46%,#213E7A 92%);box-shadow:0 0 12px rgba(111,164,255,.5)}
body.self-page.obs .quick-topics button:nth-child(1)::before,body.self-page.obs .choice-grid #opponent-human:nth-child(n)::before{
  background:radial-gradient(circle at 34% 28%,#FFE9B0 0%,#F2C14E 44%,#7A570F 92%);box-shadow:0 0 12px rgba(242,193,78,.5)}
body.self-page.obs .quick-topics button:nth-child(3)::before,body.self-page.obs .choice-grid #opponent-ai:nth-child(n)::before{
  background:radial-gradient(circle at 34% 28%,#F1EAFF 0%,#B9A6F5 44%,#4B3A9E 92%);box-shadow:0 0 12px rgba(201,184,255,.55)}
body.self-page.obs :is(.quick-topics,.choice-grid) button:nth-child(n)[aria-pressed=true]{
  background:rgba(201,184,255,.14) !important;border-color:#EEF1FF !important;box-shadow:0 0 0 1px #EEF1FF,0 0 26px rgba(201,184,255,.4) !important}
body.self-page.obs .quick-topics:has([aria-pressed=true]) button:nth-child(n):not([aria-pressed=true]),
body.self-page.obs .choice-grid:has([aria-pressed=true]) button:nth-child(n):not([aria-pressed=true]){filter:none;opacity:.7}
body.self-page.obs .choice-grid button:nth-child(n){min-height:72px !important}
body.self-page.obs .choice-grid button:nth-child(n) strong{font-size:14px;margin:0 0 2px}
body.self-page.obs .choice-grid button:nth-child(n) span{font-size:12px !important;color:#9AA3C7 !important;opacity:1}
@media(max-width:380px){body.self-page.obs .choice-grid{grid-template-columns:1fr}}
body.self-page.obs .choice-grid #opponent-ai:nth-child(n),body.self-page.obs .choice-grid #opponent-human:nth-child(n){background:rgba(22,25,44,.84) !important;color:#EEF1FF !important}
body.self-page.obs .choice-grid #opponent-ai:nth-child(n)[aria-pressed=true],body.self-page.obs .choice-grid #opponent-human:nth-child(n)[aria-pressed=true]{background:rgba(201,184,255,.14) !important}

/* Экономия высоты: «Другие темы», «Тема участника» и «Все темы» — одной строкой.
   Открытая панель занимает всю ширину под этой строкой. */
body.self-page.obs .topic-panel{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
body.self-page.obs .topic-panel>:is(.form-step,.quick-topics,#selected-topic){flex:0 0 100%;margin:0}
body.self-page.obs .topic-panel>.form-step{order:0}
body.self-page.obs .topic-panel>.quick-topics{order:1}
body.self-page.obs .topic-panel>#selected-topic{order:2}
body.self-page.obs .topic-panel>:is(#refresh-topics,#custom-topic-panel,#all-topics){order:3;flex:0 0 auto;width:auto;margin:0}
body.self-page.obs .topic-panel>:is(#custom-topic-panel,#all-topics)[open]{order:4;flex:0 0 100%;width:100%}
body.self-page.obs .topic-panel #refresh-topics,body.self-page.obs .topic-panel :is(#custom-topic-panel,#all-topics)>summary{min-height:36px !important;padding:0 14px;font-size:12.5px;white-space:nowrap}
body.self-page.obs .create-heading .intro-kicker{display:none}
body.self-page.obs .create-heading{margin:0}
body.self-page.obs .opponent-panel .form-step{margin-top:6px}
@media(max-width:380px){body.self-page.obs .topic-panel #refresh-topics,body.self-page.obs .topic-panel :is(#custom-topic-panel,#all-topics)>summary{padding:0 10px;font-size:12px}}
/* Короткие подписи, чтобы три кнопки умещались в строку на телефоне. */
body.self-page.obs .topic-panel #all-topics>summary{font-size:0 !important}
body.self-page.obs .topic-panel #all-topics>summary::after{content:"Все темы";font-size:12.5px}
body.self-page.obs .topic-panel #refresh-topics{font-size:0 !important}
body.self-page.obs .topic-panel #refresh-topics::after{content:"Другие ↻";font-size:12.5px}
body.self-page.obs .topic-panel #custom-topic-panel>summary{font-size:0 !important}
body.self-page.obs .topic-panel #custom-topic-panel>summary::after{content:"Своя тема";font-size:12.5px}
/* Выбранная из трёх тема и так подсвечена — строка «Выбрано: …» нужна только для своей темы или списка. */
body.self-page.obs .topic-panel:has(.quick-topics [aria-pressed=true])>#selected-topic{display:none}

/* Основной выбор темы: два обычных раскрывающихся списка вместо случайных карточек. */
body.self-page.obs .topic-panel>.topic-selects{order:1;flex:0 0 100%;width:min(100%,520px);margin:0 auto;text-align:left}
body.self-page.obs .topic-selects label{display:block;margin:7px 0 4px;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
body.self-page.obs .topic-selects select{display:block;width:100%;box-sizing:border-box;margin:0 0 8px}
body.self-page.obs .topic-selects #topic-count{margin:2px 0 4px;font-size:11px;text-align:center}
body.self-page.obs .topic-panel>.topic-selects + #custom-topic-panel{order:2}
body.self-page.obs .topic-panel>#custom-topic-panel[open]{order:3}

/* === Три шага подготовки === */
body.self-page.obs .obs-steps-nav{display:flex;gap:4px;padding:5px;border-radius:28px;background:rgba(20,24,40,.82);border:1px solid var(--edge);width:fit-content;max-width:100%;margin:0 auto 14px}
body.self-page.obs .obs-step{min-height:44px;padding:0 16px;border:0;background:transparent;color:#C7CCE6;font:600 13.5px/1 Manrope,sans-serif;border-radius:22px;display:flex;align-items:center;gap:8px;cursor:pointer}
body.self-page.obs .obs-step i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(238,241,255,.1);font-style:normal;font-size:12px;font-weight:700}
body.self-page.obs .obs-step[aria-current=step]{background:var(--ink);color:#10121F}
body.self-page.obs .obs-step[aria-current=step] i{background:#10121F;color:#EEF1FF}
body.self-page.obs .obs-step.obs-step-done i{background:rgba(127,224,196,.25);color:#7FE0C4}
body.self-page.obs .obs-step:disabled{opacity:.45;cursor:not-allowed}

body.self-page.obs .obs-page{position:relative;max-width:560px;margin:0 auto;padding:12px 0 0;animation:obs-page-in .45s cubic-bezier(.2,1.2,.4,1) both}
body.self-page.obs .obs-page.obs-window-enter{animation:obs-window-in .48s cubic-bezier(.2,1.2,.4,1) both}
body.self-page.obs .obs-page[hidden]{display:none}
body.self-page.obs .obs-page-title{text-align:center;font-family:Unbounded,sans-serif;font-weight:600;font-size:22px;margin:0 0 10px}
body.self-page.obs .obs-page-note{text-align:center;margin:0 0 10px;color:var(--judge);font-weight:600;min-height:1.2em}
body.self-page.obs .obs-page-actions{display:flex;gap:10px;margin-top:14px}
body.self-page.obs .obs-page-actions .ghost{flex:0 0 auto;min-width:36%}
body.self-page.obs .obs-page-actions .primary{flex:1}
body.self-page.obs .obs-page-next{width:100%;margin-top:14px}
@keyframes obs-page-in{from{opacity:0;transform:translateY(16px) rotateX(10deg)}to{opacity:1;transform:none}}
@keyframes obs-window-in{from{opacity:0;transform:translateY(18px) rotateX(-12deg) scale(.985);filter:brightness(1.35)}to{opacity:1;transform:none;filter:none}}

/* 3D-сцена над заголовком каждого шага */
body.self-page.obs .obs-page-scene{position:relative;width:100%;height:180px;perspective:900px;margin-bottom:4px}
body.self-page.obs .obs-page-scene .planet,body.self-page.obs .obs-page-scene .star{position:absolute;border-radius:50%;transform-style:preserve-3d;animation:obs-scene-float 6s ease-in-out infinite}
body.self-page.obs .obs-page-scene .pa{left:28%;top:38%;width:92px;height:92px;background:radial-gradient(circle at 34% 30%,#FFE9B0 0%,#F2C14E 44%,#7A570F 92%);box-shadow:0 0 40px rgba(242,193,78,.45)}
body.self-page.obs .obs-page-scene .pb{right:28%;top:18%;width:110px;height:110px;background:radial-gradient(circle at 34% 30%,#D9E7FF 0%,#6FA4FF 42%,#213E7A 92%);box-shadow:0 0 46px rgba(111,164,255,.55);animation-delay:-3s}
body.self-page.obs .obs-page-scene .pb.big{width:130px;height:130px}
body.self-page.obs .obs-page-scene .st{left:50%;top:12%;width:48px;height:48px;margin-left:-24px;background:radial-gradient(circle at 40% 36%,#fff 0%,#E4DBFF 22%,#9C86F0 58%,#4B3A9E 86%);box-shadow:0 0 36px rgba(201,184,255,.7);animation-delay:-1.5s}
body.self-page.obs .obs-page-scene.three .pa{left:14%;top:46%;width:76px;height:76px}
body.self-page.obs .obs-page-scene.three .pb{right:14%;top:46%;width:90px;height:90px}
body.self-page.obs .obs-page-scene.three .st{top:4%}
/* Третий шаг должен помещаться на экран телефона вместе с проверкой связи. */
body.self-page.obs .obs-page-scene.three{height:118px;margin-bottom:0}
body.self-page.obs .obs-page-scene.three .pa{left:18%;top:42%;width:54px;height:54px;box-shadow:0 0 26px rgba(242,193,78,.38)}
body.self-page.obs .obs-page-scene.three .pb{right:18%;top:42%;width:64px;height:64px;box-shadow:0 0 30px rgba(111,164,255,.45)}
body.self-page.obs .obs-page-scene.three .st{top:2%;width:36px;height:36px;margin-left:-18px;box-shadow:0 0 26px rgba(201,184,255,.58)}
@keyframes obs-scene-float{0%,100%{transform:translateY(0) rotateX(0) rotateY(0)}50%{transform:translateY(-10px) rotateX(6deg) rotateY(8deg)}}

/* Готовность: кружочки состояния */
body.self-page.obs .obs-readiness{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 10px}
body.self-page.obs .obs-readiness>div{position:relative;padding:10px 12px 10px 28px;border-radius:22px;background:rgba(7,8,15,.5);border:1px solid var(--edge)}
body.self-page.obs .obs-readiness>div::before{content:"";position:absolute;left:11px;top:14px;width:9px;height:9px;border-radius:50%;background:#4A5070}
body.self-page.obs .obs-readiness>div:has([data-state=ready])::before{background:#7FE0C4;box-shadow:0 0 8px #7FE0C4}
body.self-page.obs .obs-readiness>div:has([data-state=error])::before{background:#FF8A6B;box-shadow:0 0 8px #FF8A6B}
body.self-page.obs .obs-readiness>div:has([data-state=checking])::before{background:#C9B8FF;box-shadow:0 0 8px #C9B8FF}
body.self-page.obs .obs-readiness>div span{display:block;font-size:11px;color:#9AA3C7;margin-bottom:3px}
body.self-page.obs .obs-readiness>div strong{display:block;font-size:13px;font-weight:600}
body.self-page.obs #prep-check{width:100%;margin:0 0 10px}

/* Плавающая «?» и окно-инструкция */
body.self-page.obs .obs-help-fab{position:fixed;z-index:40;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));width:40px;height:40px;border-radius:50%;border:1px solid var(--edge);background:rgba(20,24,40,.9);color:var(--ink);font:700 18px/1 Manrope,sans-serif;cursor:pointer}
body.self-page.obs .obs-guide-sheet{position:fixed;z-index:70;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(540px,calc(100% - 20px));padding:16px 18px 18px;border-radius:30px;background:#16192C;border:1px solid var(--edge);box-shadow:0 -12px 50px rgba(0,0,0,.6);animation:obs-rise-s .4s cubic-bezier(.2,1.2,.4,1) both}
body.self-page.obs .obs-guide-sheet[hidden]{display:none}
body.self-page.obs .obs-guide-sheet h3{margin:0 0 8px;font-family:Unbounded,sans-serif;font-weight:600;font-size:17px}
body.self-page.obs .obs-steps-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px}
body.self-page.obs .obs-steps-list li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:18px;background:rgba(238,241,255,.05);border:1px solid var(--edge);font-size:13.5px;line-height:1.4}
body.self-page.obs .obs-steps-list b{flex:0 0 24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#1A1240;background:radial-gradient(circle at 40% 36%,#fff 0%,#E4DBFF 25%,#9C86F0 70%);box-shadow:0 0 10px rgba(201,184,255,.4)}
body.self-page.obs .obs-sheet-close{width:100%;min-height:44px;margin-top:4px;border-radius:22px;border:1px solid var(--edge);background:transparent;color:var(--ink);font-weight:600;cursor:pointer}
body.self-page.obs .obs-guide-veil{position:fixed;inset:0;z-index:60;background:rgba(3,4,10,.55)}
body.self-page.obs .obs-guide-veil[hidden]{display:none}
@keyframes obs-rise-s{from{transform:translate(-50%,30px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* Прежние блоки оформления темы не нужны на /app */
body.self-page.obs .create-heading{display:none}
body.self-page.obs .before-create{margin:0 0 8px;text-align:center;font-size:12px;color:var(--muted);background:transparent}
body.self-page.obs .setup-grid{display:block}
body.self-page.obs .topic-panel,body.self-page.obs .opponent-panel{display:none}

/* Экран «Дуэль готова»: для человека сначала приглашение, затем переход */
body.self-page.obs.obs-await-invite #invite-result{border:1px solid rgba(242,193,78,.55);box-shadow:0 0 24px rgba(242,193,78,.25)}
body.self-page.obs.obs-await-invite #join[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none;filter:grayscale(.3)}
body.self-page.obs.obs-await-invite #invite-result h3::before{content:"Шаг 1 · ";color:#F2C14E;font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:4px}
body.self-page.obs.obs-await-invite #join::before{content:"Шаг 2 · ";margin-right:6px;color:#9AA3C7;font-size:12px;letter-spacing:.14em;text-transform:uppercase}

/* Пока соперник не выбран, карточки мерцают, по очереди — чтобы ясно было, что это кнопки. */
@keyframes obs-opp-pulse{
  0%,100%{box-shadow:0 0 0 1px rgba(201,184,255,.35),0 0 18px rgba(201,184,255,.18);transform:translateY(0)}
  50%{box-shadow:0 0 0 2px #EEF1FF,0 0 36px rgba(201,184,255,.6),0 0 0 10px rgba(201,184,255,.08);transform:translateY(-2px)}
}
body.self-page.obs.obs-await-opponent #opponent-ai{animation:obs-opp-pulse 1.5s ease-in-out infinite;border-color:rgba(201,184,255,.55) !important}
body.self-page.obs.obs-await-opponent #opponent-human{animation:obs-opp-pulse 1.5s ease-in-out infinite;animation-delay:.75s;border-color:rgba(201,184,255,.55) !important}
body.self-page.obs #opponent-ai[aria-pressed=true],body.self-page.obs #opponent-human[aria-pressed=true]{animation:none !important}
@media(prefers-reduced-motion:reduce){
  body.self-page.obs.obs-await-opponent :is(#opponent-ai,#opponent-human){animation:none;border-color:#EEF1FF !important;box-shadow:0 0 20px rgba(201,184,255,.45) !important}
}