:root {
  --player-height: 96px;
  --gold: #d7ad63;
  --gold-light: #ffe5ad;
  --gold-dark: #68441f;
  --text-main: #fff8ea;
  --text-soft: rgba(255, 248, 234, 0.72);
  --space-dark: #020106;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html { background: var(--space-dark); }

body {
  overflow: hidden;
  color: var(--text-main);
  background: var(--space-dark);
  font-family: Georgia, "Times New Roman", serif;
}

button,
input { font: inherit; }

button { color: inherit; }

img {
  display: block;
  max-width: 100%;
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 4px;
}

/* Galaxy */

.space {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 20%, rgba(150, 50, 174, 0.42), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(28, 136, 172, 0.34), transparent 24%),
    radial-gradient(circle at 16% 82%, rgba(64, 84, 193, 0.28), transparent 26%),
    radial-gradient(circle at 84% 80%, rgba(157, 44, 155, 0.28), transparent 26%),
    radial-gradient(circle at 50% 48%, rgba(94, 57, 142, 0.2), transparent 34%),
    linear-gradient(180deg, #12041f 0%, #020106 100%);
}

.star-layer,
.star-layer::before,
.star-layer::after {
  position: absolute;
  inset: -18%;
  content: "";
  background-repeat: repeat;
}

.star-layer-one {
  opacity: 0.98;
  background-image:
    radial-gradient(circle, #fff 0 0.8px, transparent 1.3px),
    radial-gradient(circle, #bdeaff 0 0.9px, transparent 1.4px);
  background-size: 42px 42px, 64px 64px;
  background-position: 0 0, 23px 31px;
  animation: starDrift 150s linear infinite;
}

.star-layer-two {
  opacity: 0.85;
  background-image:
    radial-gradient(circle, #e2c7ff 0 0.9px, transparent 1.4px),
    radial-gradient(circle, #ffe4a0 0 1px, transparent 1.6px);
  background-size: 90px 90px, 140px 140px;
  background-position: 49px 15px, 82px 65px;
  animation: starDriftReverse 190s linear infinite;
}

.star-layer-three {
  opacity: 0.55;
  background-image:
    radial-gradient(circle, #fff 0 1.3px, transparent 2.1px),
    radial-gradient(circle, #9ddcff 0 1.8px, transparent 2.8px);
  background-size: 180px 180px, 320px 320px;
  background-position: 121px 93px, 210px 150px;
  animation: starDrift 240s linear infinite;
}

.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(58px);
  opacity: 0.2;
}

.nebula-one {
  left: -12vw;
  top: 12vh;
  width: 48vw;
  height: 35vw;
  background: #8c36a5;
  animation: nebulaFloat 20s ease-in-out infinite alternate;
}

.nebula-two {
  right: -15vw;
  top: 8vh;
  width: 52vw;
  height: 38vw;
  background: #1980a4;
  animation: nebulaFloat 25s ease-in-out infinite alternate-reverse;
}

.nebula-three {
  left: 22vw;
  bottom: -22vh;
  width: 52vw;
  height: 34vw;
  background: #833a83;
  opacity: 0.14;
  animation: nebulaFloat 28s ease-in-out infinite alternate;
}

@keyframes starDrift {
  to { transform: translate(-240px, 165px); }
}

@keyframes starDriftReverse {
  from { transform: translate(-180px, 120px); }
  to { transform: translate(0, 0); }
}

@keyframes nebulaFloat {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to { transform: translate3d(5%, -3%, 0) scale(1.08); }
}

/* Stage */

.stage {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--player-height));
  min-height: 620px;
  overflow: hidden;
}

.world-count{
    position:absolute;
    top:4%;
    left:50%;
    transform:translateX(-50%);
    z-index:30;

    margin:0;
    padding:0;

    background:none;
    border:none;
    border-radius:0;
    box-shadow:none;

    text-align:center;
    color:#fff;
    font-size:clamp(2.5rem,5vw,4rem); /* about twice as big */
    line-height:1.3;
    text-transform:uppercase;
}

/* Glowing rings */

.orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.orbit-ring::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid transparent;
  border-top-color: rgba(255, 226, 164, 0.68);
  border-right-color: rgba(255, 226, 164, 0.23);
  filter: drop-shadow(0 0 7px rgba(255, 203, 111, 0.55));
  animation: orbitGlowSweep 14s linear infinite;
}

.orbit-ring-outer {
  width: min(72vw, 920px);
  height: min(62vh, 580px);
  border: 1px solid rgba(215, 173, 99, 0.24);
  box-shadow:
    0 0 14px rgba(215, 173, 99, 0.14),
    inset 0 0 12px rgba(215, 173, 99, 0.07);
}

.orbit-ring-middle {
  width: min(59vw, 750px);
  height: min(50vh, 470px);
  border: 1px dashed rgba(215, 173, 99, 0.18);
}

.orbit-ring-inner {
  width: min(43vw, 560px);
  height: min(36vh, 340px);
  border: 1px dotted rgba(215, 173, 99, 0.17);
}

.orbit-ring-middle::before {
  animation-direction: reverse;
  animation-duration: 18s;
}

.orbit-ring-inner::before {
  animation-duration: 22s;
}

@keyframes orbitGlowSweep {
  to { transform: rotate(360deg); }
}

/* Center */

.center-medallion {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 50%;
  width: clamp(240px, 24vw, 340px);;;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.portrait-ring {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: 8px ridge #8c622f;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, #3d2916, #bd8745, #4e3218, #d7ad63, #3d2916);
  box-shadow:
    inset 0 0 0 5px rgba(255, 230, 170, 0.1),
    inset 0 0 22px rgba(0, 0, 0, 0.7),
    0 0 0 5px rgba(255, 230, 170, 0.04),
    0 0 28px rgba(215, 173, 99, 0.28),
    0 0 64px rgba(102, 61, 151, 0.22);
}

.portrait-ring::before {
  content: "";
  position: absolute;
  inset: 8%;
  z-index: 2;
  border: 3px double var(--gold);
  border-radius: 50%;
  pointer-events: none;
}

.portrait-ring::after {
  content: "";
  position: absolute;
  inset: -12%;
  border: 1px dotted rgba(255, 227, 168, 0.38);
  border-radius: 50%;
  animation: medallionSpin 24s linear infinite;
}

.portrait-ring img {
  position: absolute;
  inset: 12%;
  width: 76%;
  height: 76%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: #0c0710;
}

@keyframes medallionSpin {
  to { transform: rotate(360deg); }
}

.center-gem {
  position: absolute;
  z-index: 5;
  color: #e996ff;
  font-size: 0.75rem;
  text-shadow:
    0 0 8px currentColor,
    0 0 18px currentColor;
}

.gem-top { left: 48%; top: -5%; }
.gem-right { right: -4%; top: 47%; }
.gem-bottom { left: 48%; bottom: -5%; }
.gem-left { left: -4%; top: 47%; }

.center-title {
  position: relative;
  z-index: 6;
  width: 150%;
  margin: -4px 0 0 -25%;
  padding: 10px 16px;
  border: 2px solid var(--gold);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(45, 27, 16, 0.98), rgba(8, 4, 5, 0.99));
  box-shadow:
    inset 0 0 0 3px rgba(255, 224, 160, 0.05),
    0 8px 22px rgba(0, 0, 0, 0.62),
    0 0 15px rgba(215, 173, 99, 0.14);
}

.center-title h1 {
  margin: 0;
  color: #f5d89f;
  font-size: clamp(0.82rem, 1vw, 1rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.center-title p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 0.58rem;
  font-style: italic;
}

/* Portals */

.orbit {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  width: min(72vw, 920px);
  height: min(62vh, 580px);
  transform: translate(-50%, -50%);
  animation: orbitSpin 110s linear infinite;
}

@keyframes orbitSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.slot {
  --angle: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(175px, 16vw, 235px);
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateX(clamp(205px, 27vw, 370px))
    rotate(calc(-1 * var(--angle)));
}

.slot:nth-child(1) { --angle: -90deg; }
.slot:nth-child(2) { --angle: -18deg; }
.slot:nth-child(3) { --angle: 54deg; }
.slot:nth-child(4) { --angle: 126deg; }
.slot:nth-child(5) { --angle: 198deg; }

.portal {
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: transparent;
  animation: counterSpin 110s linear infinite;
}

@keyframes counterSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.portal-card {
  --frame-main: #686170;
  --frame-dark: #322d38;
  --frame-glow: rgba(161, 132, 230, 0.3);
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 0.82;
  transition:
    transform 250ms ease,
    filter 250ms ease;
}

.portal:hover .portal-card,
.portal:focus-visible .portal-card {
  transform: scale(1.07);
  filter: brightness(1.1);
}

.portal-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 1% 3% 10%;
  border: 14px ridge var(--frame-main);
  border-radius: 49% 49% 17% 17% / 35% 35% 12% 12%;
  background:
    repeating-conic-gradient(
      from 0deg,
      var(--frame-main) 0 10deg,
      var(--frame-dark) 10deg 21deg
    );
  box-shadow:
    inset 0 0 0 5px rgba(255, 255, 255, 0.05),
    0 0 25px var(--frame-glow);
}

.portal-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 8% 11% 17%;
  border: 4px double rgba(255, 226, 165, 0.58);
  border-radius: 47% 47% 10% 10% / 33% 33% 8% 8%;
}

.portal-image {
  position: absolute;
  z-index: 3;
  left: 13%;
  right: 13%;
  top: 10%;
  bottom: 22%;
  overflow: hidden;
  border-radius: 46% 46% 9% 9% / 33% 33% 7% 7%;
  background: #08050a;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.04),
    0 14px 30px rgba(0, 0, 0, 0.58);
}

.portal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease;
}

.portal:hover .portal-image img,
.portal:focus-visible .portal-image img {
  transform: scale(1.05);
}

.portal-crown {
  position: absolute;
  z-index: 8;
  left: 27%;
  right: 27%;
  top: -2%;
  height: 13%;
  background: linear-gradient(180deg, #d4aa63, #65401f);
  clip-path:
    polygon(
      0 100%,
      0 48%,
      15% 48%,
      15% 5%,
      31% 5%,
      31% 48%,
      46% 48%,
      46% 0,
      62% 0,
      62% 48%,
      78% 48%,
      78% 5%,
      94% 5%,
      94% 48%,
      100% 48%,
      100% 100%
    );
}

.portal-detail {
  position: absolute;
  z-index: 9;
  top: 40%;
  color: var(--gold-light);
  text-shadow: 0 0 11px currentColor;
}

.portal-detail-left { left: 1%; }
.portal-detail-right { right: 1%; }

.portal-plaque {
  position: absolute;
  z-index: 9;
  left: 1%;
  right: 1%;
  bottom: 0;
  min-height: 24%;
  display: grid;
  align-content: center;
  padding: 9px 13px;
  border: 2px solid var(--gold);
  border-radius: 22px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(46, 28, 17, 0.99), rgba(8, 4, 5, 0.99));
  box-shadow:
    inset 0 0 0 3px rgba(255, 224, 160, 0.05),
    0 8px 20px rgba(0, 0, 0, 0.62),
    0 0 14px rgba(215, 173, 99, 0.11);
}

.portal-plaque strong {
  color: #f7ddb0;
  font-size: clamp(0.72rem, 1vw, 0.96rem);
  line-height: 1.05;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.portal-plaque small {
  margin-top: 3px;
  color: rgba(255, 239, 210, 0.66);
  font-size: clamp(0.5rem, 0.64vw, 0.62rem);
  line-height: 1.15;
}

.rabbit {
  --frame-main: #66736c;
  --frame-dark: #303832;
  --frame-glow: rgba(104, 215, 206, 0.32);
}

.morph {
  --frame-main: #a76931;
  --frame-dark: #4c2a15;
  --frame-glow: rgba(208, 141, 77, 0.34);
}

.kingdoms {
  --frame-main: #6f6879;
  --frame-dark: #393440;
  --frame-glow: rgba(161, 132, 230, 0.32);
}

.earth {
  --frame-main: #5b7144;
  --frame-dark: #5f4025;
  --frame-glow: rgba(121, 201, 125, 0.32);
}

.kaleidoscope {
  --frame-main: #bb8741;
  --frame-dark: #713178;
  --frame-glow: rgba(237, 107, 208, 0.34);
}

/* Worlds */

.world {
  position: fixed;
  z-index: 80;
  inset: 0 0 var(--player-height);
  display: none;
  overflow-y: auto;
  padding: 72px 5vw 60px;
  background:
    linear-gradient(rgba(5, 3, 8, 0.78), rgba(3, 2, 7, 0.96)),
    radial-gradient(circle at 20% 15%, rgba(106, 61, 151, 0.34), transparent 35%),
    #050309;
}

.world.active {
  display: block;
  animation: worldEnter 500ms ease both;
}

@keyframes worldEnter {
  from {
    opacity: 0;
    transform: scale(1.03);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.back-button {
  position: absolute;
  top: 20px;
  left: 24px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 999px;
  cursor: pointer;
  background: rgba(8, 5, 13, 0.78);
}

.world-inner {
  display: grid;
  grid-template-columns: minmax(250px, 430px) minmax(280px, 1fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  width: min(1150px, 100%);
  margin: 0 auto;
}

.world-inner img {
  width: 100%;
  border-radius: 24px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.58);
}

.world-eyebrow {
  margin: 0 0 10px;
  color: var(--gold-light) !important;
  font-size: 0.76rem !important;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.world h2 {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 0.92;
}

.world p {
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Player */

.music-player {
  position: fixed;
  z-index: 100;
  left: 10px;
  right: 10px;
  bottom: 7px;
  height: calc(var(--player-height) - 12px);
  display: grid;
  grid-template-columns:
    minmax(240px, 1.15fr)
    auto
    minmax(260px, 1fr);
  align-items: center;
  gap: 18px;
  padding: 10px 26px;
  border: 1px solid var(--gold-dark);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(16, 12, 11, 0.98), rgba(4, 4, 6, 0.99));
  box-shadow:
    inset 0 0 0 2px rgba(215, 173, 99, 0.07),
    inset 0 0 24px rgba(0, 0, 0, 0.48),
    0 -8px 34px rgba(0, 0, 0, 0.48);
}

.music-player::before,
.music-player::after {
  content: "❦";
  position: absolute;
  top: 50%;
  color: var(--gold);
  font-size: 1.15rem;
  transform: translateY(-50%);
  opacity: 0.72;
}

.music-player::before { left: 10px; }

.music-player::after {
  right: 10px;
  transform: translateY(-50%) scaleX(-1);
}

.track-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.track-info img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--gold-dark);
  border-radius: 10px;
  box-shadow: 0 0 16px rgba(215, 173, 99, 0.12);
}

.track-text {
  display: grid;
  min-width: 0;
}

.track-text strong,
.track-text span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.track-text strong {
  color: #f4d69d;
  font-size: 1rem;
}

.track-text span {
  color: var(--text-soft);
  font-size: 0.8rem;
}

.player-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.player-controls button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(215, 173, 99, 0.3);
  border-radius: 50%;
  cursor: pointer;
  color: var(--gold-light);
  background: rgba(255, 255, 255, 0.04);
}

.player-controls .play-button {
  width: 58px;
  height: 58px;
  border-color: var(--gold);
  background:
    radial-gradient(circle, rgba(215, 173, 99, 0.18), rgba(5, 7, 9, 0.93));
  box-shadow:
    0 0 0 4px rgba(215, 173, 99, 0.06),
    0 0 18px rgba(104, 215, 206, 0.18);
}

.progress-area {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  gap: 8px;
  align-items: center;
  font-size: 0.75rem;
}

.progress-area input {
  width: 100%;
  accent-color: #6ed6cf;
}

/* Responsive */

@media (max-width: 900px) {
  :root { --player-height: 112px; }

  .stage { min-height: 650px; }

  .slot {
    width: clamp(135px, 18vw, 175px);
    transform:
      translate(-50%, -50%)
      rotate(var(--angle))
      translateX(clamp(175px, 34vw, 295px))
      rotate(calc(-1 * var(--angle)));
  }

  .center-medallion {
    width: clamp(135px, 22vw, 180px);
  }

  .music-player {
    grid-template-columns: minmax(150px, 1fr) auto;
    grid-template-areas:
      "info controls"
      "progress progress";
    gap: 5px 12px;
  }

  .track-info { grid-area: info; }
  .player-controls { grid-area: controls; }
  .progress-area { grid-area: progress; }

  .track-info img {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 650px) {
  :root { --player-height: 120px; }

  .stage { min-height: 700px; }

  .world-count {
    top: 11px;
    left: 12px;
    font-size: 1.24rem;
  }

  .center-medallion {
    width: 29vw;
  }

  .center-title {
    width: 155%;
    margin-left: -27.5%;
    padding: 8px 10px;
  }

  .center-title h1 {
    font-size: 0.64rem;
  }

  .center-title p {
    display: none;
  }

  .orbit,
  .orbit-ring-outer {
    width: 100vw;
    height: 73vh;
  }

  .orbit-ring-middle,
  .orbit-ring-inner {
    display: none;
  }

  .slot {
    width: 104px;
    transform:
      translate(-50%, -50%)
      rotate(var(--angle))
      translateX(38vw)
      rotate(calc(-1 * var(--angle)));
  }

  .portal-plaque {
    left: -4%;
    right: -4%;
    padding: 7px 8px;
  }

  .portal-plaque strong {
    font-size: 0.58rem;
  }

  .portal-plaque small {
    display: none;
  }

  .world-inner {
    grid-template-columns: 1fr;
  }

  .music-player {
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 18px;
    padding: 8px 11px;
  }

  .track-text span {
    display: none;
  }

  .player-controls button {
    width: 34px;
    height: 34px;
  }

  .player-controls .play-button {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* =========================================================
   RABBIT HOLE PAINTED PORTAL
========================================================= */

.rabbit-portal{
overflow:visible;
}

.rabbit-art-portal{
position:relative;
display:block;
width:112%;
aspect-ratio:0.72;
margin-left:-6%;
transition:.3s;
}

.rabbit-portal:hover .rabbit-art-portal{
transform:scale(1.05);
}

.rabbit-cover-window{
position:absolute;
left:24%;
right:24%;
top:20%;
bottom:24%;
overflow:hidden;
border-radius:48% 48% 5% 5%;
z-index:1;
}

.rabbit-cover-window img{
width:100%;
height:100%;
object-fit:cover;
transition:.5s;
}

.rabbit-portal:hover img{
transform:scale(1.06);
}

.rabbit-frame-art{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
z-index:5;
pointer-events:none;
}

.dragonfly{
position:absolute;
width:18px;
height:18px;
z-index:20;
pointer-events:none;
animation:dragonflyFloat 8s ease-in-out infinite;
}

.dragonfly-one{
left:8%;
top:22%;
animation-delay:0s;
}

.dragonfly-two{
right:6%;
top:34%;
animation-delay:2s;
}

.dragonfly-three{
left:16%;
bottom:28%;
animation-delay:4s;
}

.dragonfly-body{
position:absolute;
left:8px;
top:3px;
width:3px;
height:10px;
background:#38a6ff;
border-radius:20px;
box-shadow:0 0 10px #38a6ff;
}

.dragonfly-wing{
position:absolute;
width:8px;
height:4px;
background:rgba(220,245,255,.7);
border-radius:100%;
animation:wingFlap .08s infinite alternate;
}

.wing-one{
left:0;
top:1px;
transform-origin:right center;
}

.wing-two{
left:0;
top:8px;
transform-origin:right center;
}

.wing-three{
right:0;
top:1px;
transform-origin:left center;
}

.wing-four{
right:0;
top:8px;
transform-origin:left center;
}

@keyframes wingFlap{

from{
transform:rotate(-12deg);
}

to{
transform:rotate(22deg);
}

}

@keyframes dragonflyFloat{

0%{
transform:translate(0,0);
}

25%{
transform:translate(18px,-14px);
}

50%{
transform:translate(32px,8px);
}

75%{
transform:translate(12px,18px);
}

100%{
transform:translate(0,0);
}

}
/* ==========================================
   Rabbit Hole overrides
========================================== */

.rabbit-portal .portal-card,
.rabbit-portal::before,
.rabbit-portal::after{
display:none;
}

.rabbit-portal{
background:none;
border:none;
padding:0;
}

.rabbit-art-portal{
display:block;
position:relative;
width:170px;
margin:auto;
}

.rabbit-frame-art{
display:block;
width:100%;
height:auto;
}

.rabbit-cover-window{
position:absolute;
left:23%;
top:18%;
width:54%;
height:58%;
overflow:hidden;
border-radius:40px 40px 10px 10px;
}

.rabbit-cover-window img{
width:100%;
height:100%;
object-fit:cover;
}
/* ==========================================
   Rabbit Hole hover magic
========================================== */

.rabbit-frame-art{
    transition:
        filter .35s ease,
        transform .35s ease;
}

/* brighter blue runes */

.rabbit-portal:hover .rabbit-frame-art{
    filter:
        drop-shadow(0 0 8px #2ca8ff)
        drop-shadow(0 0 18px #2ca8ff)
        brightness(1.18)
        saturate(1.25);
}

/* warm lantern glow */

.rabbit-portal:hover .rabbit-frame-art{
    filter:
        drop-shadow(0 0 8px #2ca8ff)
        drop-shadow(0 0 18px #2ca8ff)
        drop-shadow(0 0 12px rgba(255,190,80,.75))
        brightness(1.18)
        saturate(1.25);
}

/* dragonflies fly farther */

.rabbit-portal:hover .dragonfly-one{
    transform:translate(-18px,-12px) scale(1.15);
}

.rabbit-portal:hover .dragonfly-two{
    transform:translate(22px,-18px) scale(1.1);
}

.rabbit-portal:hover .dragonfly-three{
    transform:translate(-10px,22px) scale(1.1);
}

.dragonfly{
    transition:transform .5s ease;
}
/* ==========================================
   Rabbit Hole magical particles
========================================== */

.magic-particle{

position:absolute;

width:5px;
height:5px;

border-radius:50%;

background:#6fd6ff;

box-shadow:
0 0 8px #6fd6ff,
0 0 18px #35a8ff;

opacity:.75;

pointer-events:none;

animation:magicRise 5s linear infinite;
}

.p1{
left:22%;
bottom:20%;
animation-delay:0s;
}

.p2{
left:38%;
bottom:14%;
animation-delay:.8s;
}

.p3{
left:57%;
bottom:22%;
animation-delay:1.6s;
}

.p4{
left:72%;
bottom:17%;
animation-delay:2.4s;
}

.p5{
left:48%;
bottom:30%;
animation-delay:3.2s;
}

.p6{
left:30%;
bottom:26%;
animation-delay:4s;
}

@keyframes magicRise{

0%{

transform:
translateY(0)
translateX(0)
scale(.5);

opacity:0;

}

15%{

opacity:1;

}

50%{

transform:
translateY(-40px)
translateX(-6px)
scale(1);

}

100%{

transform:
translateY(-95px)
translateX(12px)
scale(.2);

opacity:0;

}

}

/* Hover = stronger magic */

.rabbit-portal:hover .magic-particle{

animation-duration:2.2s;

filter:brightness(1.6);

box-shadow:
0 0 10px #8fe8ff,
0 0 22px #48b7ff,
0 0 38px #48b7ff;

}
/* ==========================================
   Rabbit portal magical pulse
========================================== */

.rabbit-portal:hover .rabbit-frame-art{

animation:rabbitPulse 1.8s ease-in-out infinite;

}

@keyframes rabbitPulse{

0%{

filter:
drop-shadow(0 0 6px #1d86ff)
brightness(1);

}

50%{

filter:
drop-shadow(0 0 16px #38b8ff)
drop-shadow(0 0 32px #38b8ff)
brightness(1.25)
saturate(1.3);

}

100%{

filter:
drop-shadow(0 0 6px #1d86ff)
brightness(1);

}

}
/* ===========================
   EARTHJAM PORTAL
=========================== */

/* ===========================
   EARTHJAM PORTAL
=========================== */

.earth-portal{
  background:none;
  border:0;
  padding:0;
  overflow:visible;
}

.earth-frame{
  position:relative;
  width:250px;
  aspect-ratio:1 / 1.2;
  margin:auto;
}

.earth-cover{
  position:absolute;
  z-index:1;

  left:18%;
  top:18%;

  width:64%;
  height:62%;

  object-fit:cover;
  border-radius:42% 42% 8% 8%;
}

.earth-frame-art{
  position:absolute;
  z-index:2;
  inset:0;

  width:100%;
  height:100%;
  object-fit:contain;

  pointer-events:none;

  filter:drop-shadow(0 0 14px rgba(50,220,145,.35));

  transition:
    transform .35s ease,
    filter .35s ease;
}

.earth-portal:hover .earth-frame-art{
  transform:scale(1.04);

  filter:
    drop-shadow(0 0 20px rgba(50,220,145,.6))
    brightness(1.08);
}

/* Mobile EarthJam size */

@media (max-width:700px){

  .earth-frame{
    width:155px;
  }

}
/* ===========================
   KALEIDOSCOPE PORTAL
=========================== */

.kaleidoscope-portal{
  background:none;
  border:0;
  padding:0;
  overflow:visible;
}

.kaleidoscope-frame{
  position:relative;
  width:250px;
  aspect-ratio:1 / 1.18;
  margin:auto;
}

.kaleidoscope-cover{

  position:absolute;
  z-index:1;

  left:17%;
  top:15%;

  width:66%;
  height:66%;

  object-fit:cover;

  border-radius:44% 44% 10% 10%;
}

.kaleidoscope-frame-art{

  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:contain;

  z-index:2;

  pointer-events:none;

  filter:
      drop-shadow(0 0 18px rgba(255,170,70,.35));

  transition:
      transform .35s ease,
      filter .35s ease;

}

.kaleidoscope-portal:hover .kaleidoscope-frame-art{

    transform:scale(1.04);

    filter:
        brightness(1.08)
        drop-shadow(0 0 24px rgba(255,170,70,.6));

}/* ==========================================
   KALEIDOSCOPE LOGO
========================================== */

.kk-logo{

    position:absolute;

    left:50%;
    top:-6%;

    width:124%;

    transform:translateX(-50%);

    z-index:8;

    pointer-events:none;

}

.kk-logo-art{

    display:block;

    width:100%;

    height:auto;

}

/* Animated eye */

.kk-eye{

    position:absolute;

    left:49.8%;
    top:20%;

    width:12%;
    aspect-ratio:1;

    border-radius:50%;

    transform:
        translate(-50%,-50%)
        scale(1);

    transition:
        transform .35s ease,
        filter .35s ease;

    pointer-events:none;

}

/* Hover */

.kaleidoscope-portal:hover .kk-eye{

    transform:
        translate(-50%,-50%)
        scale(1.18);

    filter:
        brightness(1.35)
        drop-shadow(0 0 14px rgba(255,220,120,.9));

    animation:
        kkEyePulse 1.4s ease-in-out infinite;

}

@keyframes kkEyePulse{

    0%,100%{

        transform:
            translate(-50%,-50%)
            scale(1.18);

    }

    50%{

        transform:
            translate(-50%,-50%)
            scale(1.28);

    }

}

/* Mobile */

@media (max-width:700px){

    .kaleidoscope-frame{

        width:155px;

    }

}
/* CUP FACES */

.temple-cup{
    position:absolute;
    z-index:10;

    width:28px;
    height:22px;

    pointer-events:none;
}

/* Adjust these four positions if necessary */

.temple-cup-left{
    left:27%;
    bottom:19%;
}

.temple-cup-right{
    right:25%;
    bottom:19%;
}


/* Eyes */

.cup-eye{
    position:absolute;
    top:5px;

    width:5px;
    height:5px;

    background:#ffd98a;
    border-radius:50%;

    box-shadow:0 0 5px #ffb84d;
}

.cup-eye-left{
    left:5px;
}

.cup-eye-right{
    right:5px;
}


/* Smile */

.cup-mouth{
    position:absolute;

    left:7px;
    top:11px;

    width:14px;
    height:7px;

    border-bottom:2px solid #ffd98a;
    border-radius:0 0 14px 14px;

    opacity:0;
}


/* Smile animation */

.kaleidoscope-portal:hover .cup-mouth{
    animation:cupSmile 2.8s ease-in-out infinite;
}

@keyframes cupSmile{

    0%,20%,100%{
        opacity:0;
        transform:scaleX(.5);
    }

    35%,75%{
        opacity:1;
        transform:scaleX(1);
    }

}


/* Wink animation */

.kaleidoscope-portal:hover .temple-cup-left .cup-eye-right{
    animation:cupWink 2.8s ease-in-out infinite;
}

.kaleidoscope-portal:hover .temple-cup-right .cup-eye-left{
    animation:cupWink 2.8s ease-in-out 1.2s infinite;
}

@keyframes cupWink{

    0%,34%,48%,100%{
        transform:scaleY(1);
        border-radius:50%;
    }

    38%,44%{
        transform:scaleY(.15);
        border-radius:4px;
    }

}/* =====================================
   BENNY ROTATING WHEEL
===================================== */

.benny-center{
  position: relative;

  width: 100%;
  aspect-ratio: 1;

  margin: auto;

  display: grid;
  place-items: center;
}

.benny-wheel-wrap{
  position: absolute;
  inset: 0;

  z-index: 2;
  pointer-events: none;
}

.benny-wheel{
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  transform-origin: center;
  animation: wheelRotate 80s linear infinite;
}

.benny-profile{
  position: absolute;

  left: 50%;
  top: 50%;

  width: 46%;
  height: 46%;
max-width: 115px;
max-height: 115px;
display: block; 

  transform: translate(-50%, -50%);

  border-radius: 50%;
  object-fit: cover;

  z-index: 3;

  box-shadow:
    0 0 22px rgba(255, 180, 60, 0.35);
}

@keyframes wheelRotate{
  from{
    transform: rotate(0deg);
  }

  to{
    transform: rotate(-360deg);
  }
}

@media (max-width: 700px){
  .benny-center{
    width: 175px;
  }
}
.star-layer-four {
  opacity: 0.35;

  background-image:
    radial-gradient(circle, #ffffff 0 0.5px, transparent 1px),
    radial-gradient(circle, #bdeaff 0 0.4px, transparent 0.9px),
    radial-gradient(circle, #ffe6a8 0 0.6px, transparent 1px);

  background-size:
    18px 18px,
    27px 27px,
    41px 41px;

  background-position:
    0 0,
    11px 7px,
    23px 15px;

  animation: starDriftReverse 280s linear infinite;
}.shooting-star {
  position: absolute;
  top: 18%;
  left: 75%;

  width: 110px;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.95)
  );

  opacity: 0;
  transform: rotate(-35deg);
  filter: drop-shadow(0 0 5px white);

  animation: shootingStar 6s ease-in-out infinite;
}

@keyframes shootingStar {
  0%,
  78% {
    opacity: 0;
    transform: translate(0, 0) rotate(-35deg);
  }

  80% {
    opacity: 1;
  }

  87% {
    opacity: 0;
    transform: translate(-420px, 280px) rotate(-35deg);
  }

  100% {
    opacity: 0;
  }
}
.spaceship {
  position: absolute;
  top: 100px;
  left: 100px;

  width: 150px;
  height: 70px;

  opacity: 0.82;
  z-index: 1;

  filter:
    drop-shadow(0 0 8px rgba(120, 210, 255, 0.45))
    drop-shadow(-18px 4px 12px rgba(70, 150, 255, 0.25));

  animation: spaceshipFly 42s linear infinite;
}

.ship-body {
  position: absolute;
  left: 25px;
  top: 24px;

  width: 105px;
  height: 28px;

  border-radius: 55% 20% 38% 50%;

  background:
    linear-gradient(
      180deg,
      #e5edf3 0%,
      #8797a5 35%,
      #394754 68%,
      #151c24 100%
    );

  clip-path: polygon(
    0 45%,
    18% 15%,
    76% 5%,
    100% 40%,
    82% 72%,
    18% 90%
  );

  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.5),
    inset 0 -4px 6px rgba(0,0,0,0.45);
}

.ship-body::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 11px;

  width: 52px;
  height: 3px;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(180,225,255,0.75) 0 5px,
      transparent 5px 10px
    );

  box-shadow: 0 0 5px rgba(120,210,255,0.6);
}

.ship-body::after {
  content: "";
  position: absolute;
  right: 17px;
  top: 8px;

  width: 20px;
  height: 12px;

  border: 1px solid rgba(180,220,240,0.5);
  border-radius: 3px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.1),
      rgba(0,0,0,0.35)
    );
}

.ship-cockpit {
  position: absolute;
  left: 87px;
  top: 16px;

  width: 36px;
  height: 23px;

  border-radius: 65% 55% 25% 30%;

  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(220,250,255,0.95),
      rgba(68,145,190,0.8) 45%,
      rgba(13,45,68,0.95) 100%
    );

  border: 1px solid rgba(200,240,255,0.55);

  box-shadow:
    inset 0 0 6px rgba(255,255,255,0.4),
    0 0 7px rgba(95,205,255,0.6);
}

.ship-wing {
  position: absolute;
  left: 40px;

  width: 62px;
  height: 20px;

  background:
    linear-gradient(
      180deg,
      #778996,
      #28343f
    );

  clip-path: polygon(
    0 50%,
    75% 0,
    100% 50%,
    70% 100%
  );

  opacity: 0.9;
}

.ship-wing-top {
  top: 12px;
  transform: rotate(-9deg);
}

.ship-wing-bottom {
  top: 42px;
  transform: rotate(9deg);
}

.ship-engine {
  position: absolute;
  left: 10px;
  top: 28px;

  width: 36px;
  height: 19px;

  border-radius: 50% 20% 20% 50%;

  background:
    linear-gradient(
      90deg,
      #1a2530,
      #566774
    );
}

.ship-engine::before {
  content: "";
  position: absolute;
  right: 26px;
  top: 4px;

  width: 48px;
  height: 11px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(80,180,255,0.45),
      rgba(175,235,255,0.95)
    );

  filter: blur(3px);
}

.ship-engine::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;

  width: 6px;
  height: 9px;

  border-radius: 50%;
  background: #baf4ff;

  box-shadow: 0 0 10px #75dfff;
}

@keyframes spaceshipFly {
  0% {
    transform:
      translateX(0)
      translateY(0)
      rotate(-2deg)
      scale(0.62);
  }

  45% {
    transform:
      translateX(55vw)
      translateY(30px)
      rotate(1deg)
      scale(0.72);
  }

  100% {
    transform:
      translateX(calc(100vw + 360px))
      translateY(-20px)
      rotate(-1deg)
      scale(0.62);
  }
}
.portal-card.morph{
  overflow:visible;
  background:transparent;
  border:none;
  box-shadow:none;
}

.portal-card.morph .morph-art{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  height:auto;
  max-width:none;
  transform:translate(-50%, -50%);
  display:block;
  pointer-events:none;
}
.portal-card.morph::before,
.portal-card.morph::after{
  content:none !important;
  display:none !important;
}/* Gentle living-machine movement */
.portal-card.morph{
  animation: morphBreath 5s ease-in-out infinite;
  transform-origin: center;
}

.portal-card.morph .morph-art{
  animation: morphArtPulse 8s ease-in-out infinite;
}

@keyframes morphBreath{
  0%, 100%{
    filter:
      drop-shadow(0 0 5px rgba(120, 255, 80, 0.18))
      drop-shadow(0 0 8px rgba(170, 60, 255, 0.18));
  }

  50%{
    filter:
      drop-shadow(0 0 11px rgba(120, 255, 80, 0.38))
      drop-shadow(0 0 18px rgba(170, 60, 255, 0.42));
  }
}

@keyframes morphArtPulse{
  0%, 100%{
    transform: translate(-50%, -50%) scale(1);
    filter: brightness(1) saturate(1);
  }

  50%{
    transform: translate(-50%, -50%) scale(1.025);
    filter: brightness(1.08) saturate(1.15);
  }
}

/* Larger glowing words over the existing plaque */
.morph-void-title{
  position: absolute;
  left: 50%;
  bottom: 7%;
  z-index: 10;

  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;

  color: #e7b5ff;
  font-size: clamp(0.65rem, 1vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  text-shadow:
    0 0 4px #ffffff,
    0 0 9px #d86cff,
    0 0 18px #8f24d6,
    0 0 30px rgba(124, 20, 190, 0.85);

  animation: voidTitleGlow 2.6s ease-in-out infinite;
}

@keyframes voidTitleGlow{
  0%, 100%{
    opacity: 0.82;
    filter: brightness(0.95);
  }

  50%{
    opacity: 1;
    filter: brightness(1.35);
  }
} .morph-steam{
  position:absolute;
  z-index:12;
  width:24%;
  height:34%;
  bottom:72%;
  pointer-events:none;

  background:
    radial-gradient(
      ellipse at center,
      rgba(220,220,220,.28) 0%,
      rgba(180,180,180,.14) 40%,
      transparent 72%
    );

  filter:blur(8px);
  opacity:0;

  animation: morphSteamRise 6s linear infinite;
}

.steam-left{
  left:5%;
}

.steam-right{
  right:5%;
  animation-delay:3s;
}

@keyframes morphSteamRise{
  0%{
    transform:translateY(25px) scale(.35);
    opacity:0;
  }

  18%{
    opacity:.42;
  }

  65%{
    opacity:.18;
  }

  100%{
    transform:translateY(-80px) scale(1.45);
    opacity:0;
  }
}.kingdom-wrap{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:2 / 3;
  overflow:visible;
}

.kingdom-cover{
  position:absolute;
  left:50%;
  top:49%;
  width:55%;
  height:62%;
  transform:translate(-50%, -50%);
  object-fit:cover;
  z-index:1;
}

.kingdom-frame-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:2;
  pointer-events:none;
}/* Whole portal slowly breathes */
.kingdom-frame-art{
    animation:
        kingdomFloat 7s ease-in-out infinite,
        kingdomGlow 5s ease-in-out infinite;
    transform-origin:center;
}

@keyframes kingdomFloat{
    0%,100%{
        transform:translateY(0) scale(1);
    }
    50%{
        transform:translateY(-4px) scale(1.015);
    }
}

@keyframes kingdomGlow{
    0%,100%{
        filter:
            drop-shadow(0 0 8px rgba(80,180,255,.25))
            brightness(1);
    }

    50%{
        filter:
            drop-shadow(0 0 18px rgba(120,255,255,.55))
            drop-shadow(0 0 35px rgba(120,120,255,.35))
            brightness(1.08)
            saturate(1.12);
    }
}

/* Album artwork gently comes alive */
.kingdom-cover{
    animation:kingdomPortal 12s ease-in-out infinite;
}

@keyframes kingdomPortal{

    0%,100%{
        transform:translate(-50%,-50%) scale(1);
        filter:brightness(1);
    }

    50%{
        transform:translate(-50%,-50%) scale(1.03);
        filter:
            brightness(1.08)
            saturate(1.15)
            hue-rotate(6deg);
    }
}.kingdom-particles{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:5;
}

.kingdom-particles::before,
.kingdom-particles::after{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#8efcff;

    box-shadow:
        0 0 8px #8efcff,
        0 0 18px #5bbcff;

    animation:kingdomSpirit 10s linear infinite;
}

.kingdom-particles::after{
    animation-delay:5s;
}

@keyframes kingdomSpirit{

    0%{
        left:20%;
        top:85%;
        opacity:0;
        transform:scale(.3);
    }

    15%{
        opacity:1;
    }

    100%{
        left:75%;
        top:10%;
        opacity:0;
        transform:scale(1.4);
    }
}
/* PORTAL TRACK LIST */

.portal-track-list {
  margin-top: 28px;
  width: 100%;
  max-width: 700px;
}

.portal-track {
  display: block;
  width: 100%;
  padding: 18px 24px;
  margin-bottom: 12px;

  background: rgba(20, 12, 8, 0.9);
  color: #f4d98b;

  border: 1px solid #c99b45;
  border-radius: 10px;

  font-size: 22px;
  font-weight: 600;
  text-align: left;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease;
}

.portal-track:hover {
  background: rgba(70, 45, 20, 0.95);
  transform: translateX(5px);
}
/* MOBILE PORTAL TRACKS */

@media (max-width: 768px) {

  .portal-track-list {
    width: 100%;
    max-width: none;
    margin-top: 24px;
  }

  .portal-track {
    display: block;
    width: 100%;

    padding: 18px 16px;

    background: rgba(20, 12, 8, 0.95) !important;
    color: #f4d98b !important;

    border: 1px solid #c99b45 !important;
    border-radius: 10px;

    font-size: 20px !important;
    font-weight: 600;

    text-align: left;
    line-height: 1.35;

    cursor: pointer;
  }

}
#kaleidoscope-world h2 {
  font-family: "Almendra Display", serif;
  font-weight: 400;
  letter-spacing: 3px;
  color: #f6d88a;
  text-shadow:
    0 0 8px rgba(218, 164, 70, 0.35),
    0 0 22px rgba(150, 75, 25, 0.22);
}
/* KALEIDOSCOPE ORNATE TITLE */

#kaleidoscope-world .kk-title {
  font-family: "Eagle Lake", serif;

  font-size: clamp(48px, 5vw, 82px);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -2px;

  margin: 18px 0 35px;

  background: linear-gradient(
    180deg,
    #fff2ac 0%,
    #f3ca61 30%,
    #c88722 65%,
    #ffe39a 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  filter:
    drop-shadow(0 2px 0 #6c3814)
    drop-shadow(0 0 10px rgba(218, 153, 48, 0.35));
}


/* THE EYE REPLACING SECOND O */

.kk-title-eye {
  display: inline-flex;
  position: relative;

  width: 0.78em;
  height: 0.48em;

  margin: 0 0.03em;

  vertical-align: 0.03em;

  align-items: center;
  justify-content: center;

  border: 0.055em solid #e5b94f;

  border-radius:
    70% 15%
    70% 15%;

  transform: rotate(45deg);

  background:
    radial-gradient(
      circle,
      #120910 0%,
      #331236 18%,
      #8f3b91 32%,
      #d3a73b 48%,
      #1a071d 51%,
      #080408 72%
    );

  box-shadow:
    0 0 8px rgba(255, 196, 71, 0.7),
    0 0 20px rgba(150, 50, 170, 0.35);
}


/* iris */

.kk-iris {
  width: 0.19em;
  height: 0.19em;

  border-radius: 50%;

  background: #060006;

  border: 0.035em solid #f4c95d;

  transform: rotate(-45deg);

  box-shadow:
    0 0 0 0.035em #70298b,
    0 0 10px #d35fff;
}


/* MOBILE */

@media (max-width: 768px) {

  #kaleidoscope-world .kk-title {
    font-size: clamp(42px, 10vw, 64px);
    line-height: 1;
    letter-spacing: -1px;
  }

}