:root{
  --bg1: #02061a;
  --bg2: #00182a;
  --accent: #00c9ff;
  --neon: rgba(0,201,255,0.95);
  --glass-tint: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.12);
  --pulse-duration: 1800ms; /* heartbeat pace */
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
/* outer frame - Mario 3 style bevel */
.outer-frame{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:28px;
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
}
.outer-frame::before{
  content:'';
  position:absolute;
  inset:20px;
  border-radius:14px;
  pointer-events:none;
  box-shadow:
    0 8px 0 rgba(2,15,30,0.9),
    0 18px 0 rgba(43,90,138,0.7),
    0 28px 0 rgba(11,43,72,0.65);
}

/* side flames */
.side-flame{
  width:12%;
  min-width:120px;
  max-width:220px;
  height:70vh;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
}
.side-flame .altar{
  position:absolute;
  bottom:8%;
  width:70%;
  transform:translateY(6px);
  z-index:12;
  pointer-events:none;
}
.altar-top{
  height:10px;
  background: linear-gradient(180deg,#1b1420,#0f0a10);
  border-radius:6px;
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.04);
}
.altar-base{
  height:28px;
  margin-top:6px;
  background: linear-gradient(180deg,#2b1f2b,#12070f);
  border-radius:8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}
.side-flame .flame{
  position:absolute;
  bottom:18%;
  width:64px;
  height:120px;
  border-radius:50% 50% 40% 40% / 60% 60% 30% 30%;
  transform-origin:center bottom;
  filter: blur(0.6px) saturate(1.2);
  z-index:11;
  mix-blend-mode:screen;
  background: radial-gradient(closest-side, white 4%, rgba(255,255,255,0.8) 6%, rgba(0,210,255,0.95) 20%, rgba(0,90,255,0.15) 60%, transparent 70%);
  box-shadow: 0 0 40px rgba(0,200,255,0.18), 0 0 120px rgba(0,200,255,0.06) inset;
  animation: flame-flicker var(--pulse-duration) ease-in-out infinite;
  pointer-events:none;
}
.side-flame.left .flame{ left:50%; transform:translateX(-20%) }
.side-flame.right .flame{ right:50%; transform:translateX(20%) }
/* smoke */
.side-flame .smoke{
  position:absolute;
  bottom:36%;
  width:120%;
  height:42%;
  left:-10%;
  pointer-events:none;
  background:
    radial-gradient(30% 20% at 20% 40%, rgba(255,255,255,0.03), transparent 10%),
    radial-gradient(30% 20% at 80% 30%, rgba(255,255,255,0.02), transparent 10%);
  filter: blur(6px) saturate(0.9);
  opacity:0.9;
  animation: smoke-rise 12000ms linear infinite;
  mix-blend-mode:screen;
}
@keyframes smoke-rise{
  0%{ transform: translateY(0) scale(0.9); opacity:0.06; }
  50%{ transform: translateY(-18px) scale(1.02); opacity:0.12; }
  100%{ transform: translateY(-36px) scale(1.06); opacity:0.02; }
}
@keyframes flame-flicker{
  0%{ transform: scaleY(1) translateY(0); filter: blur(0.6px) }
  25%{ transform: scaleY(1.06) translateY(-2px) filter: blur(0.8px)}
  50%{ transform: scaleY(0.96) translateY(0) filter: blur(0.5px)}
  75%{ transform: scaleY(1.08) translateY(-3px) filter: blur(1px)}
  100%{ transform: scaleY(1) translateY(0) filter: blur(0.6px)}
}

/* inner stage (the 3D page) */
.inner-stage{
  position:relative;
  width:65%;
  max-width:1100px;
  height:78vh;
  border-radius:12px;
  overflow:hidden;
  transform-style:preserve-3d;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  background:
    radial-gradient(1200px 600px at 10% 10%, rgba(0,60,100,0.06), transparent 8%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
  outline: 6px solid rgba(255,255,255,0.02);
  display:block;
}
/* chainmail-like subtle texture (repeating radial) */
.inner-stage::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,0.013) 0 1px, transparent 1px),
    radial-gradient(circle at 60% 40%, rgba(255,255,255,0.01) 0 1px, transparent 1px);
  background-size: 12px 12px, 16px 16px;
  mix-blend-mode:overlay;
  opacity:0.7;
  pointer-events:none;
  transform: translateZ(0);
}

.parallax-layer{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(ellipse at 10% 20%, rgba(255,255,255,0.02), transparent 10%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.007) 0 2px, transparent 2px 8px);
  opacity:0.9;
  transform:translateZ(-60px) scale(1.15) rotateX(12deg);
  filter: blur(6px) saturate(1.1);
  pointer-events:none;
}

/* top logo */
.top-logo{
  position:absolute;
  left:6%;
  top:4%;
  right:6%;
  height:64px;
  display:flex;
  align-items:center;
  pointer-events:none;
}
.top-logo h1{
  margin:0;
  font-weight:600;
  font-size:1.6rem;
  color:white;
  letter-spacing:2px;
  text-shadow:
    0 0 8px rgba(0,200,255,0.12),
    0 0 18px rgba(0,200,255,0.06);
  position:relative;
  padding:8px 16px;
}
/* neon outline using text stroke and glow */
.top-logo h1{
  color: #ffffff;
  -webkit-text-stroke: 0.6px rgba(0,0,0,0.25);
}
.top-logo h1::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:6px;
  box-shadow: 0 0 28px rgba(0,200,255,0.28), 0 0 68px rgba(0,200,255,0.12) inset;
  opacity:0.12;
  pointer-events:none;
}
/* heartbeat neon pulse applied as a CSS variable-driven animation */
.pulse{
  animation: heartbeat var(--pulse-duration) ease-in-out infinite;
  will-change:filter, box-shadow, transform;
}
@keyframes heartbeat{
  0%{ transform: scale(1); filter: drop-shadow(0 0 6px rgba(0,200,255,0.06)); opacity:1; }
  25%{ transform: scale(1.01); filter: drop-shadow(0 0 12px rgba(0,200,255,0.12)); opacity:0.98; }
  40%{ transform: scale(1.015); filter: drop-shadow(0 0 22px rgba(0,200,255,0.18)); opacity:1; }
  60%{ transform: scale(1.01); filter: drop-shadow(0 0 10px rgba(0,200,255,0.1)); opacity:0.99; }
  100%{ transform: scale(1); filter: drop-shadow(0 0 6px rgba(0,200,255,0.04)); opacity:1; }
}

/* spiral container (moved to right) */
.spiral{
  position:absolute;
  right:4%;
  bottom:4%;
  width:320px;
  height:320px;
  pointer-events:none;
  transform-style:preserve-3d;
  perspective:900px;
  z-index:10;
}

.floating-card{
  position:absolute;
  width:130px;
  height:78px;
  border-radius:12px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:8px;
  backdrop-filter: blur(8px) saturate(1.2);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
  color:white;
  transform-origin:center center;
  transition: transform 380ms cubic-bezier(.2,.9,.2,1), box-shadow 220ms;
  pointer-events:auto;
  cursor:pointer;
}
.floating-card svg{ width:26px; height:26px; opacity:0.95; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
.floating-card .label{ font-size:0.92rem; font-weight:600; letter-spacing:0.6px;}
.floating-card:hover{ transform: translateY(-8px) scale(1.02); box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 18px var(--neon); }

/* icon neon tint */
.floating-card .icon-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:8px;
  background: linear-gradient(180deg, rgba(0,200,255,0.06), rgba(255,255,255,0.01));
  border:1px solid rgba(0,200,255,0.12);
  box-shadow: 0 0 12px rgba(0,200,255,0.05) inset;
}

/* oscillation (steering wheel style) synchronized with pulse */
@keyframes oscillate-right-left{
  0%{ transform: translateZ(var(--z)) rotateZ(0deg) rotateY(var(--rot)) translateY(var(--ty)); }
  25%{ transform: translateZ(var(--z)) rotateZ(6deg) rotateY(calc(var(--rot) + 6deg)) translateY(calc(var(--ty) - 6px)); }
  50%{ transform: translateZ(var(--z)) rotateZ(0deg) rotateY(var(--rot)) translateY(var(--ty)); }
  75%{ transform: translateZ(var(--z)) rotateZ(-6deg) rotateY(calc(var(--rot) - 6deg)) translateY(calc(var(--ty) + 6px)); }
  100%{ transform: translateZ(var(--z)) rotateZ(0deg) rotateY(var(--rot)) translateY(var(--ty)); }
}
.floating-card.oscillate{
  animation: oscillate-right-left var(--pulse-duration) ease-in-out infinite;
  transform-origin: center center;
}
/* alternate direction for even children */
.floating-card.oscillate.even{ animation-direction: reverse; }

/* menu (moved left) */
.menu{
  position:absolute;
  left:6%;
  top:18%;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
  z-index:20;
}
.glass-btn{
  padding:12px 18px;
  border-radius:12px;
  border:1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:white;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  backdrop-filter: blur(8px);
  transition: transform 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.glass-btn:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 18px var(--neon);
}
.glass-btn:active{ transform: translateY(-2px) scale(0.995); }

.credit{
  position:absolute;
  right:6%;
  bottom:6%;
  color:rgba(255,255,255,0.45);
  font-size:0.9rem;
  z-index:22;
}

/* responsive */
@media (max-width:900px){
  .inner-stage{ width:100%; height:78vh; }
  .side-flame{ display:none; }
  .spiral{ width:220px; height:220px; right:4%; bottom:4%; }
  .floating-card{ width:120px; height:72px; }
  .top-logo h1{ font-size:1.2rem; }
}