:root {
  color-scheme: dark;
  --gold: #fde047;
  --amber: #f59e0b;
  --crimson: #ef4444;
  --emerald: #10b981;
  --safe-top: env(safe-area-inset-top, 14px);
  --safe-bottom: env(safe-area-inset-bottom, 16px);
  --font-shonen: 'Anton', 'Impact', sans-serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

html, body {
  width: 100%;
  height: 100dvh;
  background: #071324;
  color: #ffffff;
  font-family: var(--font-sans);
  overflow: hidden;
  touch-action: none;
}

/* Full-Screen Stage (Mobile-First iPhone Viewport) */
.interactive-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  /* Grand Line Golden Dashain Sunset over Deep Ocean */
  background: linear-gradient(
    180deg,
    #1e1b4b 0%,
    #7c2d12 34%,
    #ea580c 56%,
    #f59e0b 68%,
    #0369a1 68.5%,
    #0c4a6e 85%,
    #082f49 100%
  );
  cursor: pointer;
}

/* Layer 1: Character Artwork Slides (Fades Out When Sea Kite Game Starts!) */
.art-layer {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  z-index: 8;
  will-change: transform, opacity;
  transition: opacity 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.art-layer.fade-to-sea {
  opacity: 0;
  pointer-events: none;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-slide.active {
  opacity: 1;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  filter: saturate(1.22) contrast(1.06) brightness(0.92);
}

/* Dual-Hero Finale Slide (Luffy + Zoro Full Height) */
.dual-split-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dual-half {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dual-half.luffy-side {
  clip-path: polygon(0 0, 56% 0, 44% 100%, 0 100%);
}

.dual-half.zoro-side {
  clip-path: polygon(56% 0, 100% 0, 100% 100%, 44% 100%);
}

.dual-half img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.22) contrast(1.06) brightness(0.92);
}

.dual-half.luffy-side img { object-position: 38% 18%; }
.dual-half.zoro-side img { object-position: 60% 18%; }

.dual-slash-line {
  position: absolute;
  top: -10%;
  left: 50%;
  width: 3.5px;
  height: 120%;
  background: linear-gradient(180deg, #fde047, #ef4444, #10b981, #fde047);
  box-shadow: 0 0 20px #fde047, 0 0 35px #ef4444;
  transform: translateX(-50%) rotate(6.5deg);
}

/* Layer 2: Grand Line Sea & Dashain Horizon SVG Layer */
.dashain-scenery-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 12;
  pointer-events: none;
  will-change: transform;
}

/* Layer 3: Detailed One Piece THOUSAND SUNNY Ship on the Sea (Revealed in Game Mode) */
.sunny-sea-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 18;
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 1.25s cubic-bezier(0.22, 1, 0.36, 1), transform 1.25s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.sunny-sea-stage.active {
  opacity: 1;
  transform: translateY(0);
}

.rival-ship-svg {
  position: absolute;
  bottom: 85px;
  width: 118px;
  height: 118px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6));
  transform-origin: 50% 85%;
  z-index: 4;
}

.rival-ship-left {
  left: 16%;
  animation: rivalRockLeft 3.8s ease-in-out infinite;
}

.rival-ship-right {
  left: 84%;
  animation: rivalRockRight 4.1s ease-in-out infinite;
}

@keyframes rivalRockLeft {
  0%, 100% { transform: translateX(-50%) translateY(0px) rotate(2.2deg); }
  50% { transform: translateX(-50%) translateY(-5px) rotate(-2.4deg); }
}

@keyframes rivalRockRight {
  0%, 100% { transform: translateX(-50%) translateY(-4px) rotate(-2deg); }
  50% { transform: translateX(-50%) translateY(2px) rotate(2.5deg); }
}

.thousand-sunny-svg {
  position: absolute;
  bottom: 38px;
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translateX(-50%);
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.65));
  animation: sunnyRock 3.4s ease-in-out infinite;
  transform-origin: 50% 85%;
  z-index: 2;
}

@keyframes sunnyRock {
  0%, 100% { transform: translateX(-50%) translateY(0px) rotate(-2.2deg); }
  50% { transform: translateX(-50%) translateY(-7px) rotate(2.4deg); }
}

.sea-wave-front {
  position: absolute;
  bottom: -6px;
  left: -10%;
  width: 120%;
  height: 92px;
  animation: waveSlide 4.2s ease-in-out infinite alternate;
  z-index: 3;
}

@keyframes waveSlide {
  from { transform: translateX(-14px); }
  to { transform: translateX(14px); }
}

/* Layer 4: Interactive 60fps Canvas (Controllable Straw Hat Kite & Rival Kites) */
#interactive-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 25;
  pointer-events: none;
}

/* Subtle Scrim Overlay */
.center-glow-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 5, 15, 0.38) 0%,
    rgba(10, 5, 15, 0.0) 35%,
    rgba(10, 5, 15, 0.12) 68%,
    rgba(7, 19, 36, 0.55) 100%
  );
  z-index: 22;
  pointer-events: none;
}

/* Layer 5: DYNAMIC POSITIONED TEXT ZONE */
.center-text-zone {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}

/* 1st Image (Luffy): Slightly Further Down at Top */
.center-text-zone.pos-top {
  justify-content: flex-start;
  padding-top: calc(var(--safe-top) + 15.5vh);
}

/* 2nd Image (Zoro): Slightly Lower Than Center */
.center-text-zone.pos-lower-mid {
  justify-content: flex-start;
  padding-top: 60vh;
}

/* 3rd Image (Finale): Starts at Bottom, Then Smoothly Glides to Top When Sea Kite Game Starts */
.center-text-zone.pos-bottom {
  justify-content: flex-start;
  padding-top: 66vh;
  transition: padding-top 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.center-text-zone.pos-finale-top {
  justify-content: flex-start;
  padding-top: calc(var(--safe-top) + 58px);
  transition: padding-top 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.main-wish-title {
  font-family: var(--font-shonen);
  font-size: clamp(2.5rem, 11.5vw, 3.7rem);
  line-height: 1.05;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow:
    0 8px 32px rgba(0, 0, 0, 0.98),
    0 2px 6px rgba(0, 0, 0, 0.95),
    0 0 30px rgba(239, 68, 68, 0.75);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.28em;
  row-gap: 4px;
  transition: font-size 0.6s ease;
}

/* 3rd Slide (HAPPY DASHAIN [NAME]): Scaled Font for Clean Name Space */
.center-text-zone.pos-bottom .main-wish-title,
.center-text-zone.pos-finale-top .main-wish-title {
  font-size: clamp(1.9rem, 8.5vw, 2.75rem);
  letter-spacing: 2px;
}

/* Prevents ANY single word from ever splitting mid-word across lines */
.main-wish-title .word {
  display: inline-flex;
  white-space: nowrap;
}

.main-wish-title .char {
  display: inline-block;
  will-change: transform, opacity;
}

/* Icon-Only Circular Corner Buttons (Zero Text Inside!) */
.icon-corner-btn {
  position: absolute;
  top: calc(var(--safe-top) + 14px);
  z-index: 45;
  pointer-events: auto;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(15, 10, 18, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(253, 224, 71, 0.7);
  color: #fde047;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 16px rgba(245, 158, 11, 0.28);
  transition: transform 0.15s ease, background 0.2s ease;
}

.icon-corner-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fde047;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-corner-btn.left {
  left: 14px;
}

.icon-corner-btn.right {
  right: 14px;
}

.icon-corner-btn.visible {
  display: inline-flex;
}

.icon-corner-btn:active {
  transform: scale(0.9);
  background: rgba(239, 68, 68, 0.45);
}

/* Layer 6: One Piece × Dashain PLAY Button on Slide 3 */
.play-game-btn {
  position: absolute;
  left: 50%;
  bottom: 11vh;
  transform: translateX(-50%) scale(0.85);
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 34px 10px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 40%, #f59e0b 100%);
  border: 2.5px solid #fde047;
  color: #ffffff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.85),
    0 0 24px rgba(245, 158, 11, 0.45);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  outline: none;
  -webkit-appearance: none;
}

.play-game-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
  animation: playBtnPulse 2.2s ease-in-out infinite;
}

@keyframes playBtnPulse {
  0%, 100% {
    transform: translateX(-50%) scale(1);
    box-shadow:
      0 8px 30px rgba(0, 0, 0, 0.85),
      0 0 20px rgba(245, 158, 11, 0.4);
  }
  50% {
    transform: translateX(-50%) scale(1.06);
    box-shadow:
      0 12px 36px rgba(0, 0, 0, 0.95),
      0 0 32px rgba(239, 68, 68, 0.8),
      0 0 20px rgba(253, 224, 71, 0.9);
  }
}

.play-game-btn:active {
  transform: translateX(-50%) scale(0.94) !important;
  filter: brightness(1.15);
}

.play-btn-content {
  display: flex;
  align-items: center;
  gap: 9px;
}

.play-btn-icon {
  font-size: 1.35rem;
  color: #fde047;
  text-shadow: 0 0 10px rgba(253, 224, 71, 0.8);
  line-height: 1;
}

.play-btn-title {
  font-family: var(--font-shonen);
  font-size: 1.85rem;
  letter-spacing: 2px;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.play-btn-sub {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 1.5px;
  color: #fef08a;
  text-transform: uppercase;
  margin-top: 3px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}