:root{
  --bg-deep:#170D1E;
  --ink:#FFF3E2;
  --ink-dim:rgba(255,243,226,.72);
  --accent:#FFB454;
  --accent-strong:#E88F3C;
  --accent-pale:#FFD9A6;
  --ok:#8FD487;
  --warn:#FFD23F;
  --locked:#B8A99A;
  --vh:1vh;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--bg-deep);
  color:var(--ink);
  font-family:'Quicksand',sans-serif;
  overflow:hidden;
}
::selection{background:var(--accent);color:#2A1218;}
a,button{font-family:inherit;}
a:focus-visible,button:focus-visible,.island:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px;}
button{background:none;border:none;cursor:pointer;color:inherit;}

.viewport{
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh;
  height:calc(var(--vh)*100);
  overflow:hidden;
  background:var(--bg-deep);
}
.stage-wrapper{
  position:absolute;inset:0;
  display:flex;align-items:flex-start;justify-content:center;overflow:hidden;
  padding-top:env(safe-area-inset-top,0px);
  padding-right:env(safe-area-inset-right,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:env(safe-area-inset-left,0px);
}
.stage{
  position:relative;
  width:1600px;height:900px;
  flex-shrink:0;
  transform-origin:center center;
  overflow:hidden;
  filter:saturate(1.08) contrast(1.03);
}
.stage.banded::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:110px;z-index:40;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(21,11,29,0),#150B1D);
}

.px{position:absolute;inset:-7%;will-change:transform;pointer-events:none;}
.px > *{position:absolute;}

.rotate-prompt{
  position:absolute;inset:0;z-index:100;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--bg-deep);text-align:center;padding:32px;
  padding-left:max(32px,env(safe-area-inset-left,0px));
  padding-right:max(32px,env(safe-area-inset-right,0px));
}
.rotate-prompt .icon{font-size:2.6rem;animation:tilt 1.8s ease-in-out infinite;}
.rotate-prompt p{color:var(--accent-pale);font-size:.95rem;max-width:280px;}
@keyframes tilt{0%,100%{transform:rotate(0);}50%{transform:rotate(90deg);}}
.custom-cursor{
  position:fixed;top:0;left:0;z-index:200;width:22px;height:22px;margin:-11px 0 0 -11px;
  pointer-events:none;opacity:0;font-size:18px;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 0 6px rgba(255,200,120,.9));
  transition:opacity .3s ease;
}
@media (pointer:fine){
  .stage-wrapper,.stage-wrapper button,.stage-wrapper a,.island{cursor:none;}
  body.cursor-ready .custom-cursor{opacity:1;}
}

.vignette{
  position:absolute;inset:0;z-index:38;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 45%,rgba(0,0,0,.55) 100%);
}
.grain{
  position:absolute;inset:0;z-index:39;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scanlines{
  position:absolute;inset:0;z-index:39;pointer-events:none;opacity:.28;
  background:repeating-linear-gradient(0deg,rgba(20,8,24,.16) 0px,rgba(20,8,24,.16) 1px,transparent 1px,transparent 4px);
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* Evita parpadeos de composición en GPU móvil: el movimiento sigue siendo interactivo. */
@media (max-width:900px), (hover:none), (pointer:coarse){
  .stage{filter:none;}
  .px{will-change:auto;}
  .grain,.scanlines{display:none;}
  .stage .mountains.far,.stage .horizon-haze,.stage .island-art svg{filter:none;}
  .stage .orb-swirl,.stage .wf,.stage .crystal,.stage .runering,.stage .mini-float,
  .stage .sea-sun-column,.stage .sea-sun-core,.stage .sea-patch,.stage .ripple,.stage .water-glint,.stage .reflection{animation:none !important;}
  .stage .hero-kicker,.stage .preview-card,.stage .audio-toggle{backdrop-filter:none;}
}

/* Layout vertical: la cámara se centra en dos islas y conserva controles legibles. */
.stage.is-portrait .sidebar,.stage.is-portrait .hero-copy,.stage.is-portrait .map-fade{display:none;}
.stage.is-portrait .audio-toggle{left:950px;right:auto;}
.stage.is-portrait .preview-card{left:610px;right:auto;width:380px;}