/* «Карта нашей семьи» — Небесная картография (направление A) */

:root{
  /* BRAND CORE */
  --sky-900:#0E1F2A; --sky-800:#12303A; --sky-950:#081620;
  --sky-700:#1A3D49; --sky-650:#214A58; --sky-line:#2C5160;
  --parchment:#ECD9AE; --parchment-2:#F3E7CE;
  --gold:#D2A94E; --gold-warm:#E0B85C; --gold-deep:#B08C3A; --gold-pale:#EAD3A0;
  --malachite:#2E6B52; --cinnabar:#9E3B2E; --azure:#2E5E8C; --violet:#6B4A7A;

  --gold-12:rgba(210,169,78,.12); --gold-24:rgba(210,169,78,.24); --gold-40:rgba(210,169,78,.40);
  --malachite-soft:rgba(46,107,82,.20); --azure-soft:rgba(46,94,140,.22);
  --cinnabar-soft:rgba(158,59,46,.20); --violet-soft:rgba(107,74,122,.22);

  --text:#F3E7CE; --text-muted:#B9C4C2; --text-gold:#E0B85C;
  --text-on-light:#143038; --text-on-light-muted:#4A5E60;

  --border-hairline:rgba(210,169,78,.32); --border-soft:rgba(236,217,174,.14);

  --shadow-panel:0 18px 60px -18px rgba(8,22,32,.8);
  --shadow-pop:0 8px 26px -10px rgba(8,22,32,.7);
  --glow-gold:0 0 0 1px var(--gold-40), 0 0 22px -2px rgba(224,184,92,.45);
  --focus-ring:0 0 0 2px var(--sky-900), 0 0 0 4px var(--gold-warm);

  --status-active:var(--malachite); --status-built:var(--azure);
  --status-construction:var(--gold); --status-needs-dev:var(--cinnabar);

  --font-display:'Cormorant','PT Serif',Georgia,serif;
  --font-script:'Marck Script',cursive;
  --font-ui:'Manrope','PT Sans',system-ui,sans-serif;

  --r-card:14px; --r-panel:18px; --r-chip:999px; --r-sm:8px; --r-xs:6px;
  --ease-iconic:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-radial:cubic-bezier(.34,1.4,.64,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);

  --panel-w:clamp(380px,38vw,560px);
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  font-family:var(--font-ui);
  color:var(--text);
  background:radial-gradient(140% 120% at 50% -10%, #163A47 0%, #0E1F2A 55%, #081620 100%);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--text-gold);text-decoration:none;}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none;}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:6px;}

/* ── STAGE / CAMERA ── */
#stage{position:fixed;inset:0;overflow:hidden;cursor:grab;}
#stage.dragging{cursor:grabbing;}
#cameraWrap{
  position:absolute;top:0;left:0;width:1600px;height:1000px;
  transform-origin:0 0;will-change:transform;
}
#map{display:block;width:1600px;height:1000px;overflow:visible;}

/* SVG primitives */
.trunk{fill:none;stroke:var(--gold);stroke-width:2.4;opacity:.5;stroke-linecap:round;}
.trunk-spark{fill:none;stroke:var(--gold-warm);stroke-width:1.1;opacity:.9;stroke-linecap:round;
  stroke-dasharray:6 230;}
.twig{fill:none;stroke:var(--gold);stroke-width:1.3;opacity:.34;stroke-linecap:round;}
.radial-link{fill:none;stroke:var(--gold);stroke-width:1.3;opacity:0;stroke-linecap:round;}
.radial-link.show{opacity:.42;}
.coast{fill:rgba(18,48,58,.55);stroke:var(--gold);stroke-width:1.4;opacity:.5;}
.river{fill:none;stroke:var(--azure);stroke-width:6;opacity:.3;stroke-linecap:round;}
.grid-line{fill:none;stroke:var(--gold);stroke-width:.5;opacity:.10;stroke-dasharray:2 8;}
.cluster-label-t{font-family:var(--font-display);font-weight:600;font-size:30px;fill:var(--gold-warm);letter-spacing:.5px;}
.cluster-label-s{font-family:var(--font-ui);font-weight:500;font-size:13px;fill:var(--text-muted);letter-spacing:2px;text-transform:uppercase;}

.star{fill:var(--parchment-2);}
.star-gold{fill:var(--gold-warm);}

/* node group */
.node{cursor:pointer;}
.node-vis:focus{outline:none;}
.node-vis:focus-visible{outline:2.5px solid var(--gold-warm);outline-offset:4px;}
.node .ring-base{fill:var(--sky-700);stroke:var(--gold-40);stroke-width:1.3;}
.node .ring-rim{fill:none;stroke:var(--gold-40);stroke-width:1;}
.node .ring-halo{fill:none;stroke:var(--gold-24);stroke-width:1;stroke-dasharray:1 5;}
.node .glyph{fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.node .status-arc{fill:none;stroke-width:3;stroke-linecap:round;}
/* rank hierarchy: hub/main = gold-tinted, thicker; secondary = flat, subtle */
.node-vis.hub .ring-base,.node-vis.main .ring-base{fill:var(--gold-12);stroke:var(--gold);stroke-width:2;}
.node-vis.hub .status-arc,.node-vis.main .status-arc{stroke-width:3.6;}
.node-vis.secondary .ring-base{fill:var(--sky-700);stroke:var(--gold-40);stroke-width:1.2;}
.node-vis.secondary .glyph{opacity:.82;}
.node-label{font-family:var(--font-ui);font-weight:500;font-size:15px;fill:var(--text);}
.node-label.lead{font-size:16.5px;font-weight:600;}
.node-label.sub{font-size:13.5px;fill:var(--text-muted);}
.node-label.dim{fill:var(--text-muted);}
.label-bg{fill:rgba(8,22,32,.6);}
.node:hover .ring-base{stroke:var(--gold-warm);}
.node:hover{filter:drop-shadow(0 0 10px rgba(224,184,92,.45));}
.focus-aura{fill:none;stroke:var(--gold-warm);stroke-width:1.5;opacity:0;}
.node-pos.is-active .focus-aura{opacity:.9;}

/* radial children hidden until hub focus */
.node-pos.radial{opacity:0;pointer-events:none;transition:opacity .36s var(--ease-radial);}
.node-pos.radial .node-vis{transform:scale(.2);transform-box:fill-box;transform-origin:center;
  transition:transform .42s var(--ease-radial);}
.radial-link{transition:opacity .4s var(--ease-soft);}
#map.fund-open .node-pos.radial{opacity:1;pointer-events:auto;}
#map.fund-open .node-pos.radial .node-vis{transform:scale(1);}

/* dim non-focused */
#map.focusing .node-pos:not(.in-focus) .node-vis,
#map.focusing .node-pos:not(.in-focus) .node-label-g{opacity:.26;transition:opacity .3s var(--ease-soft);}
#map.focusing .twig:not(.in-focus),#map.focusing .trunk:not(.in-focus){opacity:.10;transition:opacity .3s var(--ease-soft);}

/* mode filter (Официально / Живое) */
.node-pos .node-vis,.node-pos .node-label-g{transition:opacity .35s var(--ease-soft);}
#map.mode-official .node-pos[data-has-official="false"] .node-vis,
#map.mode-official .node-pos[data-has-official="false"] .node-label-g,
#map.mode-living .node-pos[data-has-living="false"] .node-vis,
#map.mode-living .node-pos[data-has-living="false"] .node-label-g{opacity:.22;}

/* legend highlight (class-based, never inline) */
#map.legend-hl .node-pos:not(.hl-match) .node-vis,
#map.legend-hl .node-pos:not(.hl-match) .node-label-g{opacity:.2;transition:opacity .25s var(--ease-soft);}

/* central seal */
#seal .seal-ring{fill:none;stroke:var(--gold);stroke-width:1.6;}
#seal .seal-ring2{fill:none;stroke:var(--gold-40);stroke-width:1;stroke-dasharray:1 6;}
#seal .seal-fill{fill:var(--gold-12);}
#seal .seal-ribbon{fill:none;stroke:var(--sky-950);stroke-width:21;opacity:.62;stroke-linecap:round;}
#seal .seal-text{font-family:var(--font-display);font-weight:600;font-size:21px;fill:var(--gold-warm);letter-spacing:3px;
  filter:drop-shadow(0 1px 2px rgba(8,22,32,.95));}
#seal .seal-heart{fill:var(--cinnabar);stroke:var(--gold);stroke-width:1.2;}
#seal .seal-dome{fill:var(--gold-12);stroke:var(--gold);stroke-width:1.4;}
#seal{cursor:pointer;}

/* ── HUD ── */
.hud{position:fixed;z-index:20;pointer-events:none;}
.hud *{pointer-events:auto;}
#hudTop{top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;
  padding:22px 26px;gap:16px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand svg{width:46px;height:46px;flex:none;}
.brand .b-title{font-family:var(--font-display);font-weight:600;font-size:26px;line-height:1;color:var(--gold-warm);}
.brand .b-sub{font-size:12.5px;color:var(--text-muted);letter-spacing:.4px;margin-top:3px;}

/* breadcrumb */
#crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);
  background:rgba(18,48,58,.6);border:.5px solid var(--border-hairline);border-radius:var(--r-chip);
  padding:8px 16px;backdrop-filter:blur(8px);max-width:50vw;}
#crumbs .crumb{color:var(--text-muted);white-space:nowrap;}
#crumbs .crumb.link{color:var(--gold-pale);cursor:pointer;}
#crumbs .crumb.link:hover{color:var(--gold-warm);}
#crumbs .crumb.cur{color:var(--text);max-width:240px;overflow:hidden;text-overflow:ellipsis;}
#crumbs .sep{opacity:.5;}

/* mode toggle */
.mode-toggle{display:flex;gap:4px;background:rgba(18,48,58,.6);border:.5px solid var(--border-hairline);
  border-radius:var(--r-chip);padding:4px;backdrop-filter:blur(8px);}
.mode-toggle button{padding:7px 16px;border-radius:var(--r-chip);font-size:13px;font-weight:500;
  color:var(--text-muted);letter-spacing:.3px;transition:all .2s var(--ease-soft);}
.mode-toggle button[aria-pressed="true"]{background:var(--gold);color:var(--sky-900);font-weight:600;}
.mode-toggle button:hover{color:var(--text);}
.mode-toggle button[aria-pressed="true"]:hover{color:var(--sky-900);}

/* home + legend bottom-left */
#hudBottomLeft{position:fixed;left:26px;bottom:24px;z-index:20;display:flex;flex-direction:column;gap:10px;align-items:flex-start;}
.home-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(18,48,58,.7);
  border:.5px solid var(--border-hairline);border-radius:var(--r-chip);padding:10px 16px;
  font-size:13px;font-weight:500;color:var(--gold-pale);backdrop-filter:blur(8px);transition:.2s var(--ease-soft);}
.home-btn:hover{color:var(--gold-warm);border-color:var(--gold-40);}
.home-btn svg{width:15px;height:15px;}
.legend{background:rgba(18,48,58,.82);border:.5px solid var(--border-hairline);border-radius:var(--r-card);
  padding:14px 16px;backdrop-filter:blur(10px);max-width:230px;}
.legend h4{margin:0 0 9px;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-muted);}
.legend .row{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);padding:3px 0;cursor:default;}
.legend .dot{width:11px;height:11px;border-radius:50%;flex:none;}
.legend .dot.active{background:var(--malachite);}
.legend .dot.construction{background:var(--gold);}
.legend .dot.needs-dev{background:var(--cinnabar);box-shadow:0 0 8px var(--cinnabar);}
.legend .dot.built{background:transparent;border:2px solid var(--azure);}

/* quote of day bottom-right — muted card so central seal stays the one bright focus */
#quote{position:fixed;right:26px;bottom:24px;z-index:20;width:min(340px,40vw);
  background:rgba(243,231,206,.93);border-radius:var(--r-card);
  padding:16px 18px 14px;box-shadow:var(--shadow-pop);border:.5px solid var(--gold-deep);
  transition:opacity .4s var(--ease-soft),transform .4s var(--ease-soft);}
#quote .q-mark{font-family:var(--font-display);font-size:44px;line-height:.4;color:var(--gold-deep);height:20px;display:block;}
#quote .q-text{font-family:var(--font-display);font-weight:500;font-size:20px;line-height:1.3;color:var(--text-on-light);
  font-style:italic;margin:6px 0 10px;min-height:54px;transition:opacity .4s;}
#quote.is-placeholder .q-text{font-style:normal;font-size:15px;font-family:var(--font-ui);color:var(--text-on-light-muted);}
#quote .q-author{font-size:12.5px;font-weight:600;letter-spacing:.4px;color:var(--text-on-light-muted);
  display:flex;align-items:center;gap:8px;}
#quote .q-author .ic{width:9px;height:9px;border-radius:50%;background:var(--malachite);}
#quote.is-placeholder .q-author .ic{background:var(--gold-deep);}
#quote .q-dots{display:flex;gap:10px;margin-top:10px;}
#quote .q-dots i{width:6px;height:6px;border-radius:50%;background:var(--gold-deep);opacity:.3;cursor:pointer;position:relative;}
#quote .q-dots i::before{content:"";position:absolute;inset:-9px;}
#quote .q-dots i.on{opacity:.9;}

/* scrim — mobile backdrop to dismiss bottom-sheet by tap */
#scrim{position:fixed;inset:0;z-index:28;background:rgba(8,22,32,.45);opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease-soft);display:none;}
@media (max-width:900px){
  #scrim.show{display:block;opacity:1;pointer-events:auto;}
}

/* ── NODE PANEL ── */
#panel{position:fixed;top:0;right:0;height:100%;width:var(--panel-w);z-index:30;
  background:var(--sky-800);border-left:2px solid var(--gold);box-shadow:var(--shadow-panel);
  transform:translateX(100%);transition:transform .46s var(--ease-expo);
  display:flex;flex-direction:column;overflow:hidden;}
#panel.open{transform:translateX(0);}
.panel-scroll{overflow-y:auto;padding:30px 30px 28px;flex:1;}
.panel-scroll::-webkit-scrollbar{width:8px;}
.panel-scroll::-webkit-scrollbar-thumb{background:var(--gold-40);border-radius:8px;}

.panel-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;
  border:.5px solid var(--border-hairline);display:flex;align-items:center;justify-content:center;
  color:var(--gold-pale);background:rgba(8,22,32,.4);z-index:2;transition:.2s var(--ease-soft);}
.panel-close:hover{border-color:var(--gold-40);color:var(--gold-warm);background:var(--sky-700);}
.panel-close svg{width:18px;height:18px;}

.p-cluster{font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:8px;
  display:flex;align-items:center;gap:8px;}
.p-cluster svg{width:18px;height:18px;}
.p-title{font-family:var(--font-display);font-weight:600;font-size:33px;line-height:1.08;color:var(--text);margin:0 36px 14px 0;}
.status-pill{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-chip);padding:6px 14px 6px 12px;
  font-size:13px;font-weight:600;letter-spacing:.2px;margin-bottom:18px;}
.status-pill .si{width:12px;height:12px;border-radius:50%;flex:none;}
.status-pill.active{background:var(--malachite-soft);color:#7FD3AF;}
.status-pill.active .si{background:var(--malachite);}
.status-pill.construction{background:rgba(224,184,92,.16);color:var(--gold-warm);}
.status-pill.construction .si{background:var(--gold);clip-path:inset(0 50% 0 0);border:1px solid var(--gold);}
.status-pill.needs-dev{background:var(--cinnabar-soft);color:#E08C7E;}
.status-pill.needs-dev .si{background:transparent;border:2px solid var(--cinnabar);}
.p-desc{font-size:15.5px;line-height:1.6;color:var(--parchment);margin:0 0 24px;}

/* dual blocks */
.block{margin-bottom:22px;}
.block-head{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:1.6px;
  text-transform:uppercase;padding-bottom:9px;margin-bottom:12px;}
.block-head svg{width:17px;height:17px;}
.block.official .block-head{color:#7FA8D6;border-bottom:1px solid var(--azure-soft);}
.block.living .block-head{color:#7FD3AF;border-bottom:1px dashed rgba(127,211,175,.45);}
.block-empty{font-size:13.5px;color:var(--text-muted);font-style:italic;}

/* official rows */
.off-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border:.5px solid var(--azure-soft);
  border-radius:var(--r-sm);margin-bottom:8px;transition:.2s var(--ease-soft);background:rgba(46,94,140,.06);}
.off-row:hover{border-color:var(--azure);background:rgba(46,94,140,.14);}
.off-row .oi{width:20px;height:20px;color:#7FA8D6;flex:none;}
.off-row .ol{flex:1;font-size:14px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.off-row .arr{width:15px;height:15px;color:var(--gold-pale);opacity:.7;}
.off-row .dev-chip{font-size:10.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  color:#E08C7E;background:var(--cinnabar-soft);border-radius:var(--r-chip);padding:3px 9px;white-space:nowrap;}

/* living cards */
.live-grid{display:flex;flex-wrap:wrap;gap:9px;}
.live-card{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:var(--r-chip);
  background:rgba(46,107,82,.14);border:.5px solid var(--malachite);font-size:13.5px;font-weight:500;color:var(--parchment);
  transition:.2s var(--ease-soft);}
.live-card:hover{background:rgba(46,107,82,.26);border-color:#7FD3AF;}
.live-card .net{width:18px;height:18px;flex:none;}
.live-card .net.tg{color:#4EA6D6;} .live-card .net.vk{color:#7FA8D6;}

/* personalia */
.persona{display:flex;gap:13px;align-items:flex-start;padding:14px;border-radius:var(--r-card);
  background:rgba(8,22,32,.35);border:.5px solid var(--border-soft);margin-bottom:9px;cursor:default;}
.persona.clk{cursor:pointer;transition:.2s var(--ease-soft);}
.persona.clk:hover{border-color:var(--gold-40);background:rgba(26,61,73,.6);}
.persona .ava{width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--gold-12);border:1.5px solid var(--gold-40);color:var(--gold-warm);font-family:var(--font-display);
  font-weight:600;font-size:18px;}
.persona .pname{font-size:14.5px;font-weight:600;color:var(--text);line-height:1.25;}
.persona .prole{font-size:12px;color:var(--text-muted);line-height:1.4;margin-top:3px;}
.persona .proom{font-size:12.5px;color:var(--gold-warm);font-weight:600;margin-top:7px;display:inline-flex;align-items:center;gap:5px;}
.persona .proom svg{width:13px;height:13px;}
.persona .pquote{font-family:var(--font-script);font-size:19px;color:var(--gold-warm);margin-top:6px;}

.p-nav{display:flex;gap:10px;margin-top:8px;}
.p-nav button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;
  border:.5px solid var(--border-hairline);border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--gold-pale);
  transition:.2s var(--ease-soft);}
.p-nav button:hover{border-color:var(--gold-40);color:var(--gold-warm);background:var(--sky-700);}
.p-nav button svg{width:14px;height:14px;}

.block-divider{font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-muted);
  margin:4px 0 12px;display:flex;align-items:center;gap:10px;}
.block-divider::after{content:"";flex:1;height:.5px;background:var(--border-soft);}

/* ── AUTHOR ROOMS ── */
#room{position:fixed;inset:0;z-index:40;opacity:0;pointer-events:none;transition:opacity .5s var(--ease-soft);
  display:flex;flex-direction:column;}
#room.open{opacity:1;pointer-events:auto;}
#room.parlour{background:radial-gradient(120% 100% at 50% 0%,#F7EFDC,#ECD9AE 60%,#E0CB97);color:var(--text-on-light);}
#room.word{background:radial-gradient(140% 120% at 50% -10%,#163A47,#0E1F2A 55%,#081620);color:var(--text);}
.room-top{display:flex;align-items:flex-start;gap:20px;padding:40px 56px 24px;max-width:1000px;margin:0 auto;width:100%;}
.room-portrait{width:84px;height:84px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;font-size:30px;}
#room.parlour .room-portrait{background:rgba(176,140,58,.16);border:2px solid var(--gold-deep);color:var(--gold-deep);}
#room.word .room-portrait{background:var(--gold-12);border:2px solid var(--gold-40);color:var(--gold-warm);}
.room-kicker{font-family:var(--font-script);font-size:34px;line-height:1;}
#room.parlour .room-kicker{color:var(--gold-deep);} #room.word .room-kicker{color:var(--gold-warm);}
.room-name{font-family:var(--font-display);font-weight:600;font-size:26px;margin:8px 0 4px;}
.room-role{font-size:13.5px;opacity:.8;max-width:560px;line-height:1.5;}
.room-body{flex:1;overflow-y:auto;padding:8px 56px 60px;max-width:1000px;margin:0 auto;width:100%;}
.room-card{border-radius:var(--r-card);padding:22px 26px;margin-bottom:16px;}
#room.parlour .room-card{background:rgba(255,255,255,.45);border:.5px solid var(--border-on-light,rgba(20,48,56,.16));}
#room.word .room-card{background:rgba(18,48,58,.55);border:.5px solid var(--border-soft);}
.room-card .rc-date{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;opacity:.6;margin-bottom:8px;}
.room-card .rc-text{font-family:var(--font-display);font-size:21px;line-height:1.45;font-style:italic;}
.room-note{font-size:13.5px;opacity:.7;font-style:italic;margin-bottom:20px;}
.room-link{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:var(--r-chip);font-weight:600;font-size:14px;}
#room.parlour .room-link{background:var(--gold-deep);color:#fff;} #room.word .room-link{background:var(--malachite);color:var(--parchment-2);}
.room-back{position:fixed;top:30px;right:36px;z-index:2;display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:var(--r-chip);border:.5px solid currentColor;font-size:13px;font-weight:600;opacity:.85;}
.room-back:hover{opacity:1;}
.room-back svg{width:15px;height:15px;}

/* ── ONBOARDING ── */
#coach{position:fixed;z-index:25;top:96px;left:50%;transform:translateX(-50%) translateY(-6px);
  background:rgba(18,48,58,.92);border:.5px solid var(--gold-40);border-radius:var(--r-chip);
  padding:11px 20px;font-size:13.5px;color:var(--gold-pale);backdrop-filter:blur(8px);
  box-shadow:var(--glow-gold);display:flex;align-items:center;gap:12px;opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease-soft),transform .5s var(--ease-soft);}
#coach.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
#coach .arrow-up{position:absolute;top:-7px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;background:rgba(18,48,58,.92);border-left:.5px solid var(--gold-40);border-top:.5px solid var(--gold-40);}
#coach button{margin-left:4px;color:var(--text-muted);font-size:12px;text-decoration:underline;}
#coach button:hover{color:var(--text);}

/* intro overlay */
#intro{position:fixed;inset:0;z-index:60;background:var(--sky-950);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;text-align:center;transition:opacity .8s var(--ease-soft);}
#intro.hide{opacity:0;pointer-events:none;}
#intro .i-seal{width:120px;height:120px;animation:breathe 4s var(--ease-soft) infinite;}
#intro h1{font-family:var(--font-display);font-weight:600;font-size:clamp(38px,6vw,62px);color:var(--gold-warm);margin:0;letter-spacing:.5px;}
#intro p{font-size:15px;color:var(--text-muted);margin:0;letter-spacing:.5px;}
#intro .enter{margin-top:14px;padding:13px 30px;border-radius:var(--r-chip);border:.5px solid var(--gold-40);
  color:var(--gold-warm);font-size:14px;font-weight:600;letter-spacing:.5px;transition:.25s var(--ease-soft);}
#intro .enter:hover{background:var(--gold);color:var(--sky-900);border-color:var(--gold);}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.92;}50%{transform:scale(1.05);opacity:1;}}

/* ── RESPONSIVE ── */
@media (max-width:900px){
  :root{--panel-w:100vw;}
  #panel{border-left:none;border-top:2px solid var(--gold);top:auto;bottom:0;height:78vh;width:100vw;
    border-radius:var(--r-panel) var(--r-panel) 0 0;transform:translateY(100%);}
  #panel.open{transform:translateY(0);}
  #quote{display:none;}
  .brand .b-title{font-size:21px;} .brand svg{width:38px;height:38px;}
  #hudTop{padding:14px 16px;flex-wrap:wrap;}
  #crumbs{display:none;}
  .room-top,.room-body{padding-left:24px;padding-right:24px;}
}
@media (max-width:560px){
  .mode-toggle button{padding:9px 12px;font-size:12px;min-height:40px;}
  .legend{display:none;}
}
@media (pointer:coarse){
  .mode-toggle button{min-height:44px;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;}
  #cameraWrap,#panel,#room,.node.radial{transition-duration:.12s!important;}
  .trunk-spark{display:none;}
}