:root{
  --bg:#040410;
  --bg2:#070716;
  --gold:#ffd27a;
  --amber:#f5b942;
  --panel-bg-desktop: rgba(8,6,22,0.72);
  --panel-bg-mobile: rgba(8,6,22,0.92);
  --line-dim: rgba(255,210,122,0.18);
  --text-dim: rgba(230,225,245,0.62);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{
  margin:0; padding:0; width:100%; height:100%; overflow:hidden;
  background:var(--bg);
  font-family:'Manrope',sans-serif;
  color:#eee7ff;
}
#app{position:fixed; inset:0;}
#three-canvas{position:absolute; inset:0; display:block;}
#labels-layer{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:5;}

/* ---------- Star label tags ---------- */
.star-tag{
  position:absolute;
  pointer-events:none;
  transform:translate(-50%,-140%);
  display:flex; align-items:center; gap:6px;
  padding:4px 10px 4px 9px;
  border-radius:7px;
  background: rgba(10,8,26,0.55);
  border:1px solid rgba(255,210,122,0.28);
  font-family:'Manrope',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--gold);
  white-space:nowrap;
  backdrop-filter: blur(3px);
  transition: opacity .25s ease;
}
.star-tag::after{
  content:'';
  position:absolute;
  left:50%; bottom:-5px; transform:translateX(-50%);
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid rgba(10,8,26,0.55);
}
.star-tag.unknown{ color:#a9a3c9; font-style:italic; font-weight:500; border-color:rgba(169,163,201,0.28);}
body.mobile .star-tag{ backdrop-filter:none; background: rgba(10,8,26,0.78); }

/* ---------- Некъе labels on the root -> branch-founder edges ---------- */
.nek-tag{
  position:absolute;
  pointer-events:none;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:6px;
  padding:5px 12px;
  border-radius:20px;
  background: rgba(6,5,18,0.62);
  border:1px solid var(--nek-color, rgba(255,210,122,0.4));
  font-family:'Cinzel',serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.06em;
  color: var(--nek-color, #ffd27a);
  white-space:nowrap;
  backdrop-filter: blur(4px);
  transition: opacity .35s ease;
}
body.mobile .nek-tag{ backdrop-filter:none; background: rgba(6,5,18,0.85); font-size:11px; padding:4px 10px;}

/* ---------- Intro screen ---------- */
#intro{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  background: radial-gradient(ellipse at 50% 40%, #0c0a24 0%, #050311 62%, #020208 100%);
  transition: opacity .9s ease, visibility .9s ease;
  padding:24px;
}
#intro.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.tape-sign{
  width:74px; height:74px; margin-bottom:22px;
  border-radius:50%;
  border:1.5px solid var(--amber);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel',serif; font-size:30px; color:var(--gold);
  box-shadow:0 0 26px rgba(245,185,66,0.35), inset 0 0 18px rgba(245,185,66,0.15);
  animation: signPulse 3.2s ease-in-out infinite;
}
@keyframes signPulse{
  0%,100%{ box-shadow:0 0 22px rgba(245,185,66,0.28), inset 0 0 16px rgba(245,185,66,0.12); transform:scale(1);}
  50%{ box-shadow:0 0 40px rgba(245,185,66,0.55), inset 0 0 26px rgba(245,185,66,0.22); transform:scale(1.045);}
}
#intro h1{
  font-family:'Cinzel',serif; font-weight:600;
  font-size:clamp(28px,5vw,46px);
  letter-spacing:0.06em;
  margin:0 0 10px;
  color:#fbe6bd;
  text-shadow:0 0 24px rgba(255,210,122,0.35);
}
#intro .subtitle{
  font-family:'Cinzel',serif; font-size:clamp(13px,1.6vw,16px);
  letter-spacing:0.28em; text-transform:uppercase; color:var(--amber);
  margin-bottom:20px; opacity:0.85;
}
#intro p.desc{
  max-width:520px; color:var(--text-dim); font-size:15px; line-height:1.65; margin:0 0 34px;
}
.mode-buttons{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.mode-btn{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px;
  letter-spacing:0.02em;
  padding:15px 28px;
  border-radius:12px;
  border:1px solid rgba(255,210,122,0.4);
  background: linear-gradient(180deg, rgba(255,210,122,0.12), rgba(255,210,122,0.03));
  color:#fbe6bd;
  cursor:pointer;
  transition: all .25s ease;
  backdrop-filter: blur(6px);
}
.mode-btn:hover{ background: linear-gradient(180deg, rgba(255,210,122,0.24), rgba(255,210,122,0.07)); border-color: var(--gold); transform:translateY(-2px); box-shadow:0 8px 22px rgba(245,185,66,0.18);}
.mode-btn .sub{ display:block; font-weight:500; font-size:11px; color:var(--text-dim); margin-top:3px; letter-spacing:0.03em;}

/* ---------- Top bar / mode toggle ---------- */
#topbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  pointer-events:none;
}
#topbar .brand{
  font-family:'Cinzel',serif; font-size:14px; letter-spacing:0.14em; color:var(--gold);
  opacity:0.85; text-transform:uppercase;
  pointer-events:none;
}
#topbar .controls{ display:flex; gap:8px; pointer-events:auto; flex-wrap:wrap; justify-content:flex-end; max-width:62vw; }
.pill-btn{
  font-family:'Manrope',sans-serif; font-size:12.5px; font-weight:700;
  padding:9px 15px; border-radius:20px; letter-spacing:0.02em;
  border:1px solid rgba(255,210,122,0.3);
  background:var(--panel-bg-desktop);
  color:#eadfff; backdrop-filter:blur(10px);
  cursor:pointer; transition:all .2s ease;
}
body.mobile .pill-btn{ backdrop-filter:none; background:var(--panel-bg-mobile); padding:8px 12px; font-size:11.5px;}
body.mobile #topbar{ padding:12px; }
body.mobile #topbar .brand{ display:none; }
body.mobile #topbar .controls{ width:100%; max-width:100%; justify-content:center; gap:6px; flex-wrap:nowrap; }
.pill-btn.active{ border-color:var(--gold); color:var(--gold); background:rgba(255,210,122,0.12);}
.pill-btn:active{ transform:scale(0.96); }

/* ---------- Desktop info panel ---------- */
#panel-desktop{
  position:fixed; top:0; right:0; bottom:0; z-index:30;
  width:min(360px, 92vw);
  transform:translateX(105%);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  background:var(--panel-bg-desktop);
  backdrop-filter: blur(18px);
  border-left:1px solid rgba(255,210,122,0.16);
  padding:88px 26px 28px;
  overflow-y:auto;
}
#panel-desktop.open{ transform:translateX(0); }
.branch-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  padding:5px 11px; border-radius:20px; margin-bottom:16px;
  background:rgba(255,255,255,0.05);
}
.branch-chip .dot{ width:8px; height:8px; border-radius:50%; }
#panel-desktop h2{
  font-family:'Cinzel',serif; font-weight:600; font-size:26px; margin:0 0 4px; color:#fbe6bd;
}
.gen-birth{ font-size:13px; color:var(--text-dim); margin-bottom:18px; }
.info-text{ font-size:14.5px; line-height:1.7; color:#e3dcf7; margin-bottom:22px; }
.section-label{
  font-size:11px; text-transform:uppercase; letter-spacing:0.12em; color:var(--amber);
  margin:0 0 10px; font-weight:700; opacity:0.85;
}
.chain-list{ display:flex; flex-direction:column; gap:2px; margin-bottom:22px; }
.chain-item{ font-size:13.5px; color:#cfc4ec; padding:5px 0 5px 14px; position:relative; }
.chain-item::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:1px; background:rgba(255,210,122,0.3);}
.chain-item:last-child{ color:var(--gold); font-weight:700; }
.sib-list{ display:flex; flex-wrap:wrap; gap:8px; }
.sib-chip{
  font-size:12.5px; padding:6px 12px; border-radius:8px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); color:#d8cff0;
}
.sib-chip.unknown{ color:#8f89ab; font-style:italic; }
.close-btn-desktop{
  position:absolute; top:24px; right:22px;
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,210,122,0.3); background:rgba(0,0,0,0.2);
  color:var(--gold); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}

/* ---------- Mobile bottom sheet ---------- */
#panel-mobile{
  position:fixed; left:12px; right:12px; bottom:14px; z-index:30;
  border-radius:18px;
  background:var(--panel-bg-mobile);
  border:1px solid rgba(255,210,122,0.18);
  transform:translateY(120%);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), max-height .4s ease;
  max-height:64px;
  overflow:hidden;
  display:none;
}
#panel-mobile.open{ transform:translateY(0); }
#panel-mobile.expanded{ max-height:72vh; overflow-y:auto; }
.mobile-handle-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; cursor:pointer;
}
.mobile-handle-row h3{ font-family:'Cinzel',serif; font-size:17px; margin:0; color:#fbe6bd; font-weight:600;}
.mobile-handle-row .chev{ font-size:13px; color:var(--amber); transition: transform .3s ease;}
#panel-mobile.expanded .chev{ transform:rotate(180deg); }
.mobile-body{ padding:0 18px 22px; }

/* ---------- shared ---------- */
::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-thumb{ background:rgba(255,210,122,0.25); border-radius:3px;}

@media (max-width: 768px){
  #panel-desktop{ display:none; }
  #panel-mobile{ display:block; }
}
@media (min-width: 769px){
  #panel-mobile{ display:none; }
}

.hint-bar{
  position:fixed; bottom:18px; left:0; right:0; z-index:20;
  text-align:center; pointer-events:none;
  font-size:12px; letter-spacing:0.05em; color:rgba(230,225,245,0.4);
}
body.mobile .hint-bar{ display:none; }
body.has-selection .hint-bar{ opacity:0; }

/* ---------- Branch (некъе) legend ---------- */
#legend{
  position:fixed; top:66px; left:20px; z-index:35;
  display:flex; flex-direction:column; gap:6px;
  padding:12px 14px;
  border-radius:12px;
  background:var(--panel-bg-desktop);
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,210,122,0.14);
  transition: opacity .3s ease, transform .3s ease;
}
body.mobile #legend{ backdrop-filter:none; background:var(--panel-bg-mobile); padding:9px 11px; top:118px; left:12px; }
#legend .legend-title{
  font-size:10px; text-transform:uppercase; letter-spacing:0.12em; color:var(--amber);
  opacity:0.75; margin-bottom:2px; font-weight:700;
}
.legend-item{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#e3dcf7; }
.legend-item .dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; box-shadow:0 0 6px currentColor; }
body.has-selection #legend{ opacity:0.45; transform:translateX(-4px); }
@media (max-width:768px){
  #legend{ transform:scale(0.92); transform-origin:top left; }
  body.has-selection #legend{ opacity:0; pointer-events:none; }
}

/* ---------- Поиск ---------- */
#search-wrap{
  position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:60;
  width:min(320px, 42vw);
}
#search-input{
  width:100%; padding:10px 16px; border-radius:22px;
  border:1px solid rgba(255,210,122,0.28);
  background:var(--panel-bg-desktop);
  backdrop-filter:blur(10px);
  color:#f3ecff; font-family:'Manrope',sans-serif; font-size:13px; outline:none;
  transition:border-color .2s ease;
}
#search-input::placeholder{ color:rgba(230,225,245,0.4); }
#search-input:focus{ border-color:var(--gold); }
#search-dd{
  margin-top:6px; border-radius:14px; overflow-y:auto; overflow-x:hidden; max-height:300px;
  background:var(--panel-bg-mobile);
  border:1px solid rgba(255,210,122,0.2);
  display:none;
}
#search-dd.open{ display:block; }
.search-row{ display:flex; align-items:center; gap:9px; padding:9px 14px; font-size:13px; color:#e6def8; cursor:pointer; }
.search-row:hover{ background:rgba(255,210,122,0.08); }
.search-row .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.search-row .meta{ margin-left:auto; font-size:11px; color:var(--text-dim); padding-left:10px; }
@media (max-width:1100px){ #search-wrap{ top:64px; } }
body.mobile #search-wrap{ top:64px; width:calc(100% - 24px); left:12px; transform:none; }
body.mobile #search-input{ backdrop-filter:none; background:var(--panel-bg-mobile); }

/* кликабельные элементы инфо-панели */
.sib-chip[data-id], .chain-item[data-id]{ cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease; }
.sib-chip[data-id]:hover{ background:rgba(255,210,122,0.12); border-color:rgba(255,210,122,0.45); }
.chain-item[data-id]:hover{ color:var(--gold); }

/* римские цифры поколений на кольцах 2D-схемы */
.gen-ring-tag{
  font-family:'Cinzel',serif; font-size:11px; letter-spacing:0.22em;
  color:rgba(255,210,122,0.42); pointer-events:none;
}

/* счётчик в легенде */
#legend .legend-count{
  margin-top:6px; padding-top:7px;
  border-top:1px solid rgba(255,210,122,0.12);
  font-size:10.5px; color:var(--text-dim); letter-spacing:0.04em;
}

#vignette{
  position:fixed; inset:0; z-index:6; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 16% 12%, rgba(122,79,214,0.10), transparent 70%),
    radial-gradient(ellipse 55% 42% at 86% 82%, rgba(79,127,214,0.09), transparent 70%),
    radial-gradient(ellipse 45% 38% at 82% 14%, rgba(214,79,143,0.06), transparent 70%),
    radial-gradient(ellipse at 50% 48%, rgba(4,4,16,0) 38%, rgba(4,4,16,0.55) 100%);
}