:root {
  --ink:#0e1116;
  --muted:rgba(14,17,22,.45);
  --blue:#0b7cff;
  --blueSoft:rgba(11,124,255,.12);
  --blueStroke:rgba(11,124,255,.48);
  --red:#ff3f4d;
  --green:#00b878;
}
*{box-sizing:border-box}
html,body{
  margin:0;min-height:100%;background:#f7f8fb;color:var(--ink);
  font-family:Inter,system-ui,sans-serif;overflow:hidden;
}
#brainCanvas{position:fixed;inset:0;z-index:0}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.14;
  background-image:radial-gradient(rgba(0,0,0,.08) .35px,transparent .35px),radial-gradient(rgba(0,0,0,.035) .45px,transparent .45px);
  background-size:11px 11px,17px 17px;
}
.topbar,.splash-shell,.channel-menu{position:relative;z-index:2}
.topbar{
  height:70px;display:grid;grid-template-columns:auto 1fr auto;align-items:start;
  gap:24px;padding:22px 26px 0;
}
.brand{
  font-family:"Space Grotesk",Inter,sans-serif;font-size:13px;letter-spacing:.62em;
  color:var(--ink);text-decoration:none;text-transform:uppercase;
}
.clock{justify-self:center;text-align:center}
.clock span,.stage-caption,.stage-quote,.menu-micro{
  letter-spacing:.18em;text-transform:uppercase;
}
.clock span{display:block;font-size:9px;color:var(--muted);margin-bottom:4px}
.clock strong{font-family:"Space Grotesk",Inter,sans-serif;font-size:18px;font-weight:500}
.top-actions{display:flex;gap:8px}
.tiny-button,.channel-button,.jump-button{
  border:1px solid rgba(14,17,22,.12);background:rgba(255,255,255,.62);
  border-radius:999px;padding:10px 14px;font-size:10px;letter-spacing:.18em;
  cursor:pointer;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;
  font-family:Inter,system-ui,sans-serif;
}
.tiny-button:hover,.channel-button:hover,.jump-button:hover{border-color:rgba(11,124,255,.38)}
.splash-shell{
  display:grid;grid-template-columns:1fr;gap:0;height:calc(100vh - 70px);
  padding:18px 26px 26px;
}
.stage-panel{
  position:relative;border:1px solid rgba(14,17,22,.08);border-radius:28px;overflow:hidden;
  background:radial-gradient(circle at 50% 50%,rgba(11,124,255,.045),transparent 42%),rgba(255,255,255,.36);
  box-shadow:0 18px 70px rgba(30,50,80,.07);
}
#brainObjectCanvas,#nodeOverlay{position:absolute;inset:0;width:100%;height:100%}
#nodeOverlay{overflow:visible}
.stage-caption{
  position:absolute;left:18px;right:18px;bottom:14px;text-align:center;font-size:9px;color:rgba(14,17,22,.46);letter-spacing:.22em;
}
.stage-quote{
  position:absolute;left:18px;right:18px;top:14px;text-align:center;font-size:9px;
  color:rgba(14,17,22,.42);letter-spacing:.22em;pointer-events:none;
}
.channel-menu{
  position:absolute;top:72px;right:26px;width:280px;z-index:5;
}
.menu-card{
  background:rgba(255,255,255,.78);backdrop-filter:blur(24px);
  border:1px solid rgba(14,17,22,.10);border-radius:24px;padding:18px;
  box-shadow:0 18px 60px rgba(30,50,80,.08);
}
.menu-micro{font-size:9px;color:rgba(14,17,22,.42);margin-bottom:10px}
.menu-gap{margin-top:16px}
.channel-button,.jump-button{width:100%;justify-content:flex-start;margin-bottom:8px;padding-left:14px}
.jump-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.jump-button{margin-bottom:0;justify-content:center}
.new-channel:hover,.new-channel:focus-visible{
  border-color:rgba(0,180,110,.75);
  color:#00a46f;
  box-shadow:0 0 0 1px rgba(0,180,110,.18), 0 0 14px rgba(0,180,110,.18);
  animation: greenBlink .9s infinite alternate;
}
@keyframes greenBlink{
  0%{background:rgba(255,255,255,.72)}
  100%{background:rgba(0,180,110,.09)}
}

.node-hit,.node-label{cursor:pointer}
.node-number-button{
  fill:rgba(11,124,255,.14);
  stroke:rgba(11,124,255,.46);
  stroke-width:1;
  filter:drop-shadow(0 0 6px rgba(11,124,255,.14));
  cursor:pointer;
}
.node-number-button.hover{
  fill:rgba(255,255,255,.85);
  stroke:rgba(11,124,255,.95);
  filter:drop-shadow(0 0 12px rgba(11,124,255,.32));
}
.node-number-button.active{
  fill:rgba(11,124,255,.20);
  stroke:rgba(0,87,255,.76);
  filter:drop-shadow(0 0 10px rgba(11,124,255,.28));
}
.node-number-button.channel-hover{
  stroke:rgba(255,63,77,.9);
  fill:rgba(255,255,255,.86);
  filter:drop-shadow(0 0 14px rgba(255,63,77,.24));
}
.node-label{
  font-family:"Space Grotesk",Inter,sans-serif;font-size:9.5px;letter-spacing:.15em;fill:rgba(0,72,180,.82);
}
.node-label.active{fill:#0057ff}
.node-label.hover{fill:rgba(255,255,255,.98)}
.node-label.channel-hover{fill:var(--red)}

.child-line{stroke:rgba(11,124,255,.22);stroke-width:1;stroke-dasharray:3 5}
.brain-line{stroke:rgba(11,124,255,.19);stroke-width:1}
.ghost-line{stroke:rgba(11,124,255,.105);stroke-width:.9}
.brain-line.fade{stroke:rgba(11,124,255,.08)}
.ghost-line.fade{stroke:rgba(11,124,255,.045)}
.node-core{
  fill:rgba(255,255,255,.0);
}
.node-core.hover{
  fill:rgba(255,255,255,.95);
  animation: whitePulse .7s infinite alternate;
}
@keyframes whitePulse{
  from{opacity:.35}
  to{opacity:1}
}
.meteor{
  position:fixed;z-index:999;pointer-events:none;width:8px;height:8px;border-radius:50%;
  background:#0b7cff;box-shadow:0 0 22px #0b7cff;animation:meteor .52s ease-out forwards
}
@keyframes meteor{to{transform:scale(42);opacity:0}}

.stage-panel.focused::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(255,255,255,.26);
  pointer-events:none;
}
.stage-panel.focused::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.0) 0%, rgba(255,255,255,.0) 42%, rgba(255,255,255,.36) 100%);
  pointer-events:none;
}

@media(max-width:980px){
  html,body{overflow:auto}
  .splash-shell{height:auto}
  .stage-panel{min-height:640px}
}
@media(max-width:720px){
  .topbar{grid-template-columns:1fr;height:auto;gap:12px}
  .clock{justify-self:start;text-align:left}
  .top-actions{flex-wrap:wrap}
  .splash-shell{padding:16px}
  .stage-panel{min-height:520px}
  .channel-menu{left:16px;right:16px;top:108px;width:auto}
}


/* v15.1 — green level gate system */
.node-number-button {
  fill: rgba(255,255,255,.72);
  stroke: rgba(11,124,255,.38);
}

.node-number-button.gate {
  fill: rgba(0,184,120,.16);
  stroke: rgba(0,184,120,.78);
  filter: drop-shadow(0 0 10px rgba(0,184,120,.28));
}

.node-number-button.gate.hover,
.node-number-button.gate.active {
  fill: rgba(0,184,120,.28);
  stroke: rgba(0,155,95,.95);
  animation: greenGatePulse .72s infinite alternate;
}

.node-label.gate {
  fill: rgba(0,145,92,.95);
}

.node-label.gate.hover,
.node-label.gate.active {
  fill: #00a46f;
}

.node-number-button.back {
  stroke: rgba(14,17,22,.32);
  fill: rgba(255,255,255,.86);
}

.level-badge {
  position: absolute;
  left: 18px;
  bottom: 14px;
  z-index: 4;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(14,17,22,.42);
}

.gate-jump:hover,
.gate-jump:focus-visible {
  border-color: rgba(0,184,120,.8);
  color: #00a46f;
  box-shadow: 0 0 0 1px rgba(0,184,120,.18), 0 0 14px rgba(0,184,120,.18);
}

.back-jump:hover,
.back-jump:focus-visible {
  border-color: rgba(14,17,22,.38);
  color: rgba(14,17,22,.78);
}

@keyframes greenGatePulse {
  from { filter: drop-shadow(0 0 5px rgba(0,184,120,.18)); }
  to { filter: drop-shadow(0 0 18px rgba(0,184,120,.42)); }
}


/* v15.3 — green level gates are stronger and instant */
.node-number-button.gate {
  fill: rgba(0,184,120,.22);
  stroke: rgba(0,184,120,.9);
  filter: drop-shadow(0 0 14px rgba(0,184,120,.34));
}

.node-number-button.gate.hover {
  fill: rgba(0,184,120,.34);
  stroke: rgba(0,145,92,1);
  filter: drop-shadow(0 0 20px rgba(0,184,120,.50));
}

.node-label.gate {
  fill: rgba(0,135,86,1);
  font-weight: 600;
}


/* v15.5 — make green node reliably clickable */
#nodeOverlay line,
#nodeOverlay .node-number-button,
#nodeOverlay .node-core,
#nodeOverlay .brain-line,
#nodeOverlay .ghost-line,
#nodeOverlay .child-line {
  pointer-events: none;
}

.node-hit {
  pointer-events: all;
  cursor: pointer;
}

.node-label {
  pointer-events: all;
  cursor: pointer;
  user-select: none;
}


/* v15.7 — day / night */
body.night {
  background: #050912;
  color: rgba(235,242,255,.92);
}

body.night .brand,
body.night .clock strong,
body.night .tiny-button,
body.night .channel-button,
body.night .jump-button {
  color: rgba(235,242,255,.92);
}

body.night .clock span,
body.night .stage-caption,
body.night .menu-micro,
body.night .level-badge {
  color: rgba(235,242,255,.46);
}

body.night .tiny-button,
body.night .channel-button,
body.night .jump-button {
  background: rgba(10,14,24,.48);
  border-color: rgba(255,255,255,.12);
}

body.night .menu-card {
  background: rgba(8,12,20,.72);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.24);
}

body.night .stage-panel {
  background:
    radial-gradient(circle at 50% 50%, rgba(86,160,255,.065), transparent 44%),
    rgba(5,9,18,.20);
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 18px 70px rgba(0,0,0,.20);
}

body.night .brand {
  color: rgba(245,248,255,.92);
}

body.night .node-number-button {
  fill: rgba(255,255,255,.10);
  stroke: rgba(130,180,255,.35);
}

body.night .node-number-button.gate {
  fill: rgba(0,184,120,.18);
  stroke: rgba(0,184,120,.92);
}

body.night .node-label {
  fill: rgba(182,214,255,.86);
}

body.night .node-label.gate {
  fill: rgba(78,220,152,.96);
}


/* v15.8 — hype / hyperspace */
body.hyperspace .stage-panel{
  box-shadow:0 18px 90px rgba(44,120,255,.18);
  border-color:rgba(88,150,255,.14);
}

body.hyperspace .stage-panel::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.0) 0%, rgba(255,255,255,.0) 24%, rgba(121,173,255,.08) 60%, rgba(255,255,255,.0) 100%);
  mix-blend-mode:screen;
}

#hypeButton.active-hype{
  border-color:rgba(11,124,255,.58);
  color:#0057ff;
  background:rgba(11,124,255,.08);
  box-shadow:0 0 0 1px rgba(11,124,255,.12), 0 0 22px rgba(11,124,255,.14);
}

body.night #hypeButton.active-hype{
  border-color:rgba(154,205,255,.34);
  color:rgba(232,245,255,.96);
  background:rgba(82,140,255,.10);
  box-shadow:0 0 0 1px rgba(82,140,255,.14), 0 0 26px rgba(82,140,255,.18);
}


/* v16.1 — 0001 direct portal entry */
.portal-burst{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.78) 10%, rgba(11,124,255,.14) 32%, rgba(255,255,255,0) 68%);
  animation: portalBurst .64s cubic-bezier(.16,.9,.2,1) forwards;
}
.portal-burst::before,
.portal-burst::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:18vmin;
  height:18vmin;
  border:1px solid rgba(11,124,255,.32);
  border-radius:999px;
  transform:translate(-50%,-50%);
  animation: portalRing .64s cubic-bezier(.16,.9,.2,1) forwards;
}
.portal-burst::after{
  width:9vmin;
  height:9vmin;
  border-color:rgba(0,184,120,.32);
  animation-delay:.06s;
}
@keyframes portalBurst{
  0%{opacity:0;filter:blur(12px)}
  22%{opacity:1;filter:blur(0)}
  100%{opacity:0;filter:blur(18px)}
}
@keyframes portalRing{
  to{width:170vmax;height:170vmax;opacity:0}
}


/* v17.5 responsive + browser compatibility */
html, body {
  min-height: 100dvh;
  -webkit-text-size-adjust: 100%;
}
button, a {
  -webkit-tap-highlight-color: transparent;
}
#brainCanvas,
#brainObjectCanvas,
#nodeOverlay {
  touch-action: none;
}
.topbar {
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
}
.splash-shell {
  min-height: calc(100dvh - 70px);
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}
.stage-panel {
  min-height: 420px;
}
.stage-quote {
  padding: 0 12px;
}
@media (min-width: 1500px) {
  .stage-panel {
    max-width: 1680px;
    width: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 1100px) {
  .topbar {
    grid-template-columns: auto 1fr;
    height: auto;
    min-height: 86px;
    row-gap: 12px;
    align-items: start;
  }
  .clock {
    justify-self: end;
  }
  .top-actions {
    grid-column: 1 / -1;
    justify-self: center;
    flex-wrap: wrap;
    justify-content: center;
  }
  .splash-shell {
    height: calc(100dvh - 108px);
    padding-top: 10px;
  }
}
@media (max-width: 760px) {
  html, body {
    overflow: hidden;
  }
  .topbar {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: 146px;
    padding: 14px 14px 0;
    text-align: center;
  }
  .brand,
  .clock,
  .top-actions {
    justify-self: center;
  }
  .brand {
    font-size: 12px;
    letter-spacing: .50em;
    padding-left: .50em;
  }
  .clock strong {
    font-size: 15px;
  }
  .tiny-button {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 9px;
  }
  .splash-shell {
    height: calc(100dvh - 156px);
    padding: 8px 12px max(14px, env(safe-area-inset-bottom));
  }
  .stage-panel {
    border-radius: 22px;
    min-height: 360px;
  }
  .stage-quote {
    top: 10px;
    font-size: 8px;
    letter-spacing: .18em;
  }
  .stage-caption {
    bottom: 10px;
    font-size: 8px;
    letter-spacing: .18em;
  }
  .channel-menu {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
  }
  .menu-card {
    border-radius: 22px;
    max-height: 58dvh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 420px) {
  .top-actions {
    gap: 6px;
  }
  .tiny-button {
    padding: 9px 10px;
  }
  .stage-panel {
    min-height: 320px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .grain,
  .stage-panel,
  .node-number-button,
  .new-channel {
    animation: none !important;
  }
}