/* ===== Reset & Base ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ===== Peel Layer ===== */
#peel-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
#peel-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: auto;
  touch-action: none;
}
#peel-hint {
  position: relative; z-index: 1;
  color: #999; font-size: 14px;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.3s;
}
#peel-hint.hidden { opacity: 0; }

/* Drag icon — CSS only hand */
.drag-icon {
  width: 28px; height: 28px;
  margin: 0 auto 12px;
  position: relative;
  animation: bob 2s ease-in-out infinite;
}
.drag-icon::before {
  content: '👆';
  font-size: 24px;
  display: block;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Fly-away animation for remaining peel */
#peel-overlay.fly-away #peel-canvas {
  animation: flyAway 0.6s ease-in forwards;
  pointer-events: none;
}
#peel-overlay.fly-away #peel-hint { opacity: 0; }
@keyframes flyAway {
  0% { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(1.5) rotate(8deg); opacity: 0; }
}

/* ===== World Container ===== */
#world {
  position: fixed; inset: 0;
  overflow: hidden;
}

/* ===== Retry Button ===== */
#retry-btn {
  position: fixed; bottom: 28px;
  left: 50%; transform: translateX(-50%);
  z-index: 90;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 13px;
  padding: 8px 20px; border-radius: 20px;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s;
}
#retry-btn.visible { opacity: 1; pointer-events: auto; }
#retry-btn:active { background: rgba(255,255,255,0.3); }

/* ===== World 1: Universe ===== */
.world-universe { background: #0a0a0a; }
.world-universe .star {
  position: absolute; border-radius: 50%;
  background: #fff;
  animation: twinkle var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
}
@keyframes twinkle {
  0%, 100% { opacity: var(--base-op); }
  50% { opacity: 1; }
}
.world-universe .nebula {
  position: absolute; border-radius: 50%;
  filter: blur(60px);
  animation: nebulaFloat var(--dur) ease-in-out infinite alternate;
  animation-delay: var(--delay);
}
@keyframes nebulaFloat {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.1); }
}
.world-universe .shooting-star {
  position: absolute; width: 80px; height: 2px;
  background: linear-gradient(90deg, #fff, transparent);
  opacity: 0; border-radius: 1px;
  animation: shoot 1s linear infinite;
  animation-delay: var(--delay);
}
@keyframes shoot {
  0% { transform: translateX(0) translateY(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateX(200px) translateY(120px); opacity: 0; }
}
.world-universe .site-title {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; font-size: 36px; font-weight: 700;
  text-shadow: 0 0 20px rgba(255,255,255,0.5), 0 0 40px rgba(255,255,255,0.2);
  letter-spacing: 2px;
}
/* Tap-born star */
.world-universe .born-star {
  position: absolute; border-radius: 50%;
  background: #fff;
  animation: starBorn 1.2s ease-out forwards;
}
@keyframes starBorn {
  0% { transform: scale(0); opacity: 0; box-shadow: 0 0 0 rgba(255,255,255,0); }
  30% { transform: scale(3); opacity: 1; box-shadow: 0 0 20px rgba(255,255,255,0.8); }
  100% { transform: scale(1); opacity: var(--base-op, 0.6); box-shadow: 0 0 4px rgba(255,255,255,0.3); }
}
/* Custom shooting star from tap */
.world-universe .custom-shoot {
  position: absolute; width: 100px; height: 2px;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,0.5), transparent);
  border-radius: 1px; pointer-events: none;
  animation: customShoot 0.8s ease-in forwards;
}
@keyframes customShoot {
  0% { transform: rotate(var(--angle, 30deg)) translateX(0); opacity: 1; }
  100% { transform: rotate(var(--angle, 30deg)) translateX(250px); opacity: 0; }
}
.world-universe .star-count {
  position: absolute; bottom: 16px; left: 16px;
  color: rgba(255,255,255,0.3); font-size: 11px;
  transition: opacity 0.5s;
}
.world-universe .uni-hint {
  position: absolute; top: 36%; left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.3); font-size: 12px;
  opacity: 0; transition: opacity 0.8s;
  white-space: nowrap;
}
.world-universe .uni-hint.show { opacity: 1; }

/* ===== World 2: Time-shift ===== */
.world-time { transition: background 1s; position: relative; }
.world-time .swipe-hint {
  position: absolute; bottom: 50px; left: 50%;
  transform: translateX(-50%);
  color: inherit; font-size: 12px; opacity: 0;
  transition: opacity 0.8s;
  white-space: nowrap;
}
.world-time .swipe-hint.show { opacity: 0.4; }
.world-time .period-label {
  position: absolute; top: 16px; left: 50%;
  transform: translateX(-50%);
  font-size: 11px; opacity: 0;
  transition: opacity 0.5s;
  white-space: nowrap;
}
.world-time .period-label.show { opacity: 0.5; }
.world-time .site-title {
  position: absolute; top: 45%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 36px; font-weight: 700;
  letter-spacing: 2px;
}
.world-time .greeting {
  position: absolute; top: 55%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px; font-weight: 500;
  text-align: center; white-space: nowrap;
}
.world-time .clock {
  position: absolute; bottom: 16px; right: 16px;
  font-size: 12px; opacity: 0.6;
}
/* Morning clouds */
.cloud {
  position: absolute; background: rgba(255,255,255,0.7);
  border-radius: 50px; height: 30px;
  animation: cloudDrift var(--dur) linear infinite;
  animation-delay: var(--delay);
}
.cloud::before, .cloud::after {
  content: ''; position: absolute; background: inherit; border-radius: 50%;
}
.cloud::before { width: 36px; height: 36px; top: -18px; left: 12px; }
.cloud::after { width: 24px; height: 24px; top: -10px; right: 12px; }
@keyframes cloudDrift {
  0% { transform: translateX(-120px); }
  100% { transform: translateX(calc(100vw + 120px)); }
}
/* Afternoon sun rays */
.sun-rays {
  position: absolute; top: -60px; right: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,220,100,0.3) 0deg, transparent 15deg, transparent 30deg, rgba(255,220,100,0.3) 30deg, transparent 45deg, transparent 60deg, rgba(255,220,100,0.3) 60deg, transparent 75deg, transparent 90deg, rgba(255,220,100,0.3) 90deg, transparent 105deg, transparent 120deg, rgba(255,220,100,0.3) 120deg, transparent 135deg, transparent 150deg, rgba(255,220,100,0.3) 150deg, transparent 165deg, transparent 180deg, rgba(255,220,100,0.3) 180deg, transparent 195deg, transparent 210deg, rgba(255,220,100,0.3) 210deg, transparent 225deg, transparent 240deg, rgba(255,220,100,0.3) 240deg, transparent 255deg, transparent 270deg, rgba(255,220,100,0.3) 270deg, transparent 285deg, transparent 300deg, rgba(255,220,100,0.3) 300deg, transparent 315deg, transparent 330deg, rgba(255,220,100,0.3) 330deg, transparent 345deg, transparent 360deg);
  animation: rotateSlow 20s linear infinite;
}
@keyframes rotateSlow { to { transform: rotate(360deg); } }
/* Evening city silhouette */
.city-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 60px; background: #1a1a2e;
}
.window-light {
  position: absolute; width: 4px; height: 4px;
  background: #ffd700; border-radius: 1px;
  animation: windowFlicker 3s ease-in-out infinite;
  animation-delay: var(--delay);
}
@keyframes windowFlicker {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.3; }
}
/* Night moon */
.moon {
  position: absolute; top: 60px; right: 50px;
  width: 60px; height: 60px; border-radius: 50%;
  background: #f5f5dc;
  box-shadow: inset -12px -4px 0 #d4d4aa, 0 0 20px rgba(245,245,220,0.3);
}

/* ===== World 3: Countdown ===== */
.world-countdown { background: #0a0a0a; }
.countdown-num {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 120px; font-weight: 900;
  animation: countPop 0.8s ease-out forwards;
}
@keyframes countPop {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.countdown-num.fade { animation: countFade 0.2s forwards; }
@keyframes countFade {
  to { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}
.world-countdown .site-title {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 42px; font-weight: 700; color: #fff;
  letter-spacing: 3px;
  clip-path: inset(0 100% 0 0);
  animation: clipReveal 0.8s ease-out forwards;
}
@keyframes clipReveal {
  to { clip-path: inset(0 0 0 0); }
}
/* CSS sparkle on click */
.sparkle {
  position: absolute; width: 10px; height: 10px; pointer-events: none;
  animation: sparklePop 0.6s ease-out forwards;
}
.sparkle::before, .sparkle::after {
  content: ''; position: absolute;
  background: #fff; border-radius: 1px;
}
.sparkle::before { width: 2px; height: 10px; left: 4px; top: 0; }
.sparkle::after { width: 10px; height: 2px; left: 0; top: 4px; }
@keyframes sparklePop {
  0% { transform: scale(0) rotate(0); opacity: 1; }
  50% { transform: scale(1.5) rotate(45deg); opacity: 1; }
  100% { transform: scale(0) rotate(90deg); opacity: 0; }
}

/* ===== World 4: Hidden Messages ===== */
.world-hidden { background: #111; }
.world-hidden .site-title {
  position: absolute; top: 45%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; font-size: 36px; font-weight: 700;
  cursor: pointer; letter-spacing: 2px;
  transition: color 0.3s;
}
.world-hidden .subtitle {
  position: absolute; top: 56%; left: 50%;
  transform: translate(-50%, -50%);
  color: #555; font-size: 13px;
}
.world-hidden .secret-text {
  position: absolute; color: #fff; font-size: 18px;
  opacity: 0; transition: opacity 0.5s;
  left: 50%; transform: translateX(-50%);
  pointer-events: none;
}
.world-hidden .secret-text.show { opacity: 1; }
.world-hidden .counter {
  position: absolute; bottom: 16px; right: 16px;
  color: #555; font-size: 12px;
}
.world-hidden .hint {
  position: absolute; top: 36%; left: 50%;
  transform: translateX(-50%);
  color: #444; font-size: 12px;
  opacity: 0; transition: opacity 0.8s;
  white-space: nowrap;
}
.world-hidden .hint.show { opacity: 1; }
.world-hidden .flash { animation: colorFlash 0.5s; }
@keyframes colorFlash {
  0% { color: #fff; }
  25% { color: #ff6b6b; }
  50% { color: #ffd93d; }
  75% { color: #6bcb77; }
  100% { color: #fff; }
}
.world-hidden.inverted { filter: invert(1); transition: filter 0.3s; }
.world-hidden.flipped { animation: flipPage 2s ease-in-out; }
@keyframes flipPage {
  0% { transform: rotate(0); }
  20% { transform: rotate(180deg); }
  80% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

/* ===== Re-cover animation ===== */
#peel-overlay.re-cover #peel-canvas {
  animation: reCover 0.5s ease-out forwards;
}
@keyframes reCover {
  0% { opacity: 0; transform: scale(1.3) rotate(-5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}