:root{
  --text:#f5f9ff;
  --cursor-x:50vw;
  --cursor-y:55vh;
  --cursor-visible:0;
}
*{box-sizing:border-box}
html,body,#root{width:100%;height:100%;margin:0}
body{
  overflow:hidden;
  background:#010611;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.app{position:relative;width:100vw;height:100vh;overflow:hidden;background:#010611}
.stage{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#010611;touch-action:manipulation}

/* Single, self-contained ocean/lighthouse/cloud-title background. This prevents duplicate or misaligned lighthouses. */
.ocean-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% center;
  filter:saturate(1.035) contrast(1.01) brightness(.99);
  pointer-events:none;
}
.stage::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(circle at 50% 54%,rgba(27,103,205,.045),transparent 30%),
    linear-gradient(180deg,rgba(0,4,12,.01),rgba(0,4,12,.04) 56%,rgba(0,6,15,.11));
}

/* Localized cloud-title overlay using the approved rendering asset. Kept subtle so it reads like illuminated cloud texture, not hard-edged lettering. */
.cloud-gradient{
  position:absolute;
  z-index:2;
  pointer-events:none;
  left:39%;
  top:6%;
  width:45.5%;
  height:22%;
  background:url('./assets/cloud-title-overlay.png') center center / contain no-repeat;
  opacity:.86;
  filter:blur(.65px) saturate(.95) brightness(.96);
  mix-blend-mode:screen;
  -webkit-mask-image:
    linear-gradient(90deg,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.50) 18%,
      rgba(0,0,0,.68) 40%,
      rgba(0,0,0,.86) 68%,
      rgba(0,0,0,1) 100%),
    radial-gradient(ellipse 86% 78% at 58% 46%, #000 48%, rgba(0,0,0,.96) 63%, rgba(0,0,0,.50) 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.50) 18%,
      rgba(0,0,0,.68) 40%,
      rgba(0,0,0,.86) 68%,
      rgba(0,0,0,1) 100%),
    radial-gradient(ellipse 86% 78% at 58% 46%, #000 48%, rgba(0,0,0,.96) 63%, rgba(0,0,0,.50) 82%, transparent 100%);
  mask-composite: intersect;
}

/* Smaller, softer blue/white halo around the real mouse cursor. No center dot. */
.cursor-light{
  position:fixed;
  z-index:9999;
  left:0;
  top:0;
  pointer-events:none;
  width:128px;
  height:128px;
  border-radius:50%;
  transform:translate3d(calc(var(--cursor-x) - 64px),calc(var(--cursor-y) - 64px),0);
  opacity:var(--cursor-visible);
  background:radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.52) 0%,
      rgba(215,246,255,.34) 16%,
      rgba(130,220,255,.22) 34%,
      rgba(67,176,255,.14) 56%,
      rgba(31,109,231,.07) 78%,
      transparent 100%);
  box-shadow:
    0 0 16px rgba(218,248,255,.22),
    0 0 34px rgba(90,203,255,.14),
    0 0 58px rgba(41,126,246,.09);
  mix-blend-mode:screen;
  transition:opacity .08s linear;
  will-change:transform,opacity;
}
.cursor-light::before{content:none;}

.center-brand{
  border:0;background:transparent;padding:0;margin:0;position:absolute;
  left:50%;top:52.3%;width:min(39.5vw,650px);transform:translate(-50%,-50%);
  z-index:12;cursor:pointer;transition:transform .22s ease,filter .22s ease;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.45)) drop-shadow(0 0 26px rgba(57,198,255,.18));
}
.center-brand:hover,.center-brand:focus-visible{
  transform:translate(-50%,-50%) scale(1.018);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.48)) drop-shadow(0 0 34px rgba(108,226,255,.30));
  outline:none;
}
.center-brand img{display:block;width:100%;height:auto}
.node{
  position:absolute;z-index:13;transform:translate(-50%,-50%);
  text-align:center;width:12.5%;min-width:106px;
  animation:floatNode var(--dur,8s) ease-in-out infinite;animation-delay:var(--delay,-1s);
}
.node:hover,.node:focus-within{animation-play-state:paused}
.node.current{left:14.1%;top:29.9%;--dur:8.1s;--delay:-1.8s}
.node.harbor{left:10.8%;top:54.0%;--dur:8.9s;--delay:-3.7s}
.node.wake{left:24.4%;top:75.1%;--dur:8.7s;--delay:-2.4s}
.node.portal{left:77.0%;top:40.2%;--dur:8.3s;--delay:-4.1s}
.node.depth{left:87.3%;top:54.2%;--dur:9.3s;--delay:-1.2s}
.node.breakwater{left:79.3%;top:76.5%;--dur:8.8s;--delay:-4.6s}
.node-btn{
  display:grid;place-items:center;position:relative;margin:0 auto;border:0;
  background:radial-gradient(circle at 50% 50%, rgba(7,24,46,.26) 0%, rgba(6,18,36,.18) 45%, rgba(4,12,24,.08) 66%, transparent 76%);
  padding:0;
  width:clamp(88px,8.8vw,142px);height:clamp(88px,8.8vw,142px);border-radius:50%;
  cursor:pointer;transition:transform .18s ease,filter .18s ease;overflow:visible;
}
.node-btn::before,.node-btn::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.node-btn::before{
  inset:0;border:1.55px solid rgba(120,226,255,.92);
  box-shadow:0 0 30px rgba(59,185,255,.52),inset 0 0 32px rgba(58,176,255,.18);
}
.node-btn::after{inset:10%;border:1.15px solid rgba(174,236,255,.44)}
.node:hover .node-btn,.node:focus-within .node-btn{
  transform:translateY(-3px) scale(1.04);
  filter:drop-shadow(0 0 20px rgba(92,225,255,.42));
}
.node-icon{
  width:75%;height:75%;object-fit:contain;display:block;
  filter:brightness(1.16) contrast(1.04) saturate(1.12) drop-shadow(0 0 14px rgba(81,198,255,.44));
}
.node.wake .node-icon,.node.breakwater .node-icon{
  width:74%;height:74%;
  filter:brightness(1.40) contrast(1.08) saturate(1.20) drop-shadow(0 0 18px rgba(112,222,255,.52));
}
.node-label{
  display:block;position:relative;z-index:4;margin-top:10px;color:rgba(247,250,255,.98);
  font-size:clamp(10px,1.03vw,17px);line-height:1;letter-spacing:.30em;text-indent:.30em;
  text-transform:uppercase;white-space:nowrap;text-shadow:0 0 12px rgba(0,0,0,.62),0 0 12px rgba(57,155,255,.18);
}
.node.wake .node-label,.node.breakwater .node-label{margin-top:12px}
.tooltip{
  position:absolute;z-index:25;width:clamp(220px,18vw,320px);padding:14px 18px;
  border:1px solid rgba(111,198,255,.66);border-radius:16px;
  background:linear-gradient(180deg,rgba(9,24,46,.92),rgba(6,16,32,.95));
  box-shadow:0 12px 34px rgba(0,0,0,.44),0 0 24px rgba(63,166,255,.15),inset 0 0 0 1px rgba(255,255,255,.025);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  text-align:left;color:rgba(220,236,251,.94);font-size:clamp(12px,.95vw,16px);line-height:1.45;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.tooltip strong{color:#fff;font-weight:750;letter-spacing:.02em}
.node[data-side="right"] .tooltip{left:100%;top:14%;margin-left:12px;transform:translateY(6px)}
.node[data-side="left"] .tooltip{right:100%;top:14%;margin-right:12px;transform:translateY(6px)}
.node[data-side="top"] .tooltip{left:50%;bottom:100%;margin-bottom:12px;transform:translate(-50%,6px)}
.node:hover .tooltip,.node:focus-within .tooltip,.node.open .tooltip{opacity:1;visibility:visible}
.node[data-side="right"]:hover .tooltip,.node[data-side="right"]:focus-within .tooltip,.node[data-side="right"].open .tooltip,
.node[data-side="left"]:hover .tooltip,.node[data-side="left"]:focus-within .tooltip,.node[data-side="left"].open .tooltip{transform:translateY(0)}
.node[data-side="top"]:hover .tooltip,.node[data-side="top"]:focus-within .tooltip,.node[data-side="top"].open .tooltip{transform:translate(-50%,0)}
.center-tip{
  position:absolute;left:50%;top:66.6%;z-index:24;transform:translate(-50%,8px);width:clamp(320px,27vw,470px);
  padding:14px 18px;border:1px solid rgba(111,198,255,.66);border-radius:16px;
  background:linear-gradient(180deg,rgba(9,24,46,.92),rgba(6,16,32,.95));
  box-shadow:0 12px 34px rgba(0,0,0,.44),0 0 24px rgba(63,166,255,.15);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:rgba(220,236,251,.94);font-size:clamp(12px,.95vw,16px);line-height:1.46;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.center-tip strong{color:#fff}
.center-brand:hover + .center-tip,.center-brand:focus-visible + .center-tip,.center-tip.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.coming{
  position:absolute;left:50%;bottom:6.6%;z-index:10;transform:translateX(-50%);display:flex;align-items:center;gap:22px;
  color:rgba(241,248,255,.95);font-size:clamp(10px,1vw,16px);line-height:1;letter-spacing:.52em;text-indent:.52em;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 0 14px rgba(65,180,255,.14);
}
.coming::before,.coming::after{
  content:"";width:clamp(70px,8vw,130px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(141,224,255,.86),transparent);
  box-shadow:0 0 16px rgba(73,189,255,.22);
}
@keyframes floatNode{
  0%,100%{transform:translate(-50%,-50%) translateY(0)}
  50%{transform:translate(-50%,-50%) translateY(-8px)}
}

@media (max-width:1100px){
  .cloud-gradient{left:37%;top:6.3%;width:49%;height:22%}
}
@media (max-width:640px), (orientation:portrait){
  .cloud-gradient{left:30%;top:6.8%;width:61%;height:18.5%}
}
@media (prefers-reduced-motion:reduce){.node{animation:none}.node-btn,.center-brand{transition:none}}

/* Wide desktop: keep the single lighthouse and beam in frame without tiling or duplicate overlays. */
@media (min-aspect-ratio:16/10){
  .ocean-bg{object-position:50% 48%}
}
@media (min-aspect-ratio:2/1){
  .ocean-bg{object-position:50% 46%}
}
@media (max-width:1100px){
  .center-brand{width:min(48vw,600px)}
}
@media (max-width:900px){
  .ocean-bg{object-position:57% center}
  .center-brand{width:min(54vw,520px);top:53%}
  .center-tip{top:68%;width:min(66vw,420px)}
  .node.current{left:14%;top:29.5%}.node.harbor{left:11%;top:57%}.node.wake{left:25%;top:79%}
  .node.portal{left:79%;top:42.5%}.node.depth{left:88%;top:57%}.node.breakwater{left:80%;top:80%}
}
@media (max-width:640px), (orientation:portrait){
  .ocean-bg{object-position:69% center}
  .center-brand{width:min(72vw,420px);top:47.8%}
  .center-tip{width:min(84vw,320px);top:61.2%;padding:12px 14px;font-size:12px}
  .node{width:19%;min-width:72px}
  .node.current{left:13%;top:25.5%}.node.harbor{left:12%;top:49%}.node.wake{left:25%;top:74.5%}
  .node.portal{left:84%;top:36.5%}.node.depth{left:88%;top:51.5%}.node.breakwater{left:80%;top:76%}
  .node-btn{width:clamp(66px,16vw,84px);height:clamp(66px,16vw,84px)}
  .node-label{margin-top:7px;font-size:11px;letter-spacing:.18em;text-indent:.18em}
  .tooltip{width:min(78vw,240px);padding:10px 12px;font-size:12px;line-height:1.38}
  .node[data-side="right"] .tooltip,.node[data-side="left"] .tooltip,
  .node[data-side="top"] .tooltip{left:50%;right:auto;top:auto;bottom:100%;margin:0 0 10px 0;transform:translate(-50%,6px)}
  .node:hover .tooltip,.node:focus-within .tooltip,.node.open .tooltip{transform:translate(-50%,0)}
  .coming{bottom:4.6%;gap:10px;font-size:12px;letter-spacing:.24em;text-indent:.24em}
  .coming::before,.coming::after{width:38px}
}
@media (max-width:420px){
  .ocean-bg{object-position:72% center}
  .cloud-gradient{left:31.5%;top:6.8%;width:61%;height:16.5%}
  .center-brand{width:78vw;top:46.5%}
  .center-tip{top:59.8%}
  .node.current{left:13%;top:24.5%}.node.harbor{left:12%;top:47.5%}.node.wake{left:25%;top:73%}
  .node.portal{left:85%;top:35.5%}.node.depth{left:88.5%;top:50%}.node.breakwater{left:80%;top:75%}
}