@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

/* ─── Hide checkbox triggers ────────────────────────────── */
#play-toggle,
#next-toggle {
  display: none;
}

/* ─── Intro overlay ─────────────────────────────────────── */
#intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  background-color: #fff9e6;
  background-image: radial-gradient(circle, rgba(0,0,0,0.13) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  overflow: hidden;
}

/* ─── Comic panel border ─────────────────────────────────── */
#intro::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 4px solid #000;
  border-radius: 4px;
  pointer-events: none;
  z-index: 10;
}

/* ─── Title ──────────────────────────────────────────────── */
.intro-title {
  text-align: center;
  font-family: 'Bangers', 'Impact', cursive;
  color: #000;
  line-height: 1;
  letter-spacing: 4px;
  z-index: 2;
}

.intro-title .t-small {
  display: block;
  font-size: 34px;
  animation: titleDrop 0.45s 0.15s both;
}

.intro-title .t-big {
  display: block;
  font-size: 96px;
  color: #e53935;
  -webkit-text-stroke: 3px #000;
  text-shadow: 5px 5px 0 #000;
  animation: titleDrop 0.45s 0.35s both;
}

.intro-title .t-sub {
  display: block;
  font-size: 26px;
  letter-spacing: 8px;
  animation: titleDrop 0.45s 0.55s both;
}

@keyframes titleDrop {
  from { transform: translateY(-30px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ─── Starburst burst (hidden until click) ───────────────── */
.starburst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  background: #ffd600;
  border: 3px solid #000;
  clip-path: polygon(
    50% 0%,   61% 30%,  93% 11%,  73% 40%,
    100% 50%, 73% 60%,  93% 89%,  61% 70%,
    50% 100%, 39% 70%,  7%  89%,  27% 60%,
    0%  50%,  27% 40%,  7%  11%,  39% 30%
  );
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

/* ─── Play button ────────────────────────────────────────── */
.play-btn {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 20px 52px;
  background: #e53935;
  color: #fff;
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 52px;
  letter-spacing: 4px;
  border: 4px solid #000;
  border-radius: 6px;
  box-shadow: 7px 7px 0 #000;
  cursor: pointer;
  user-select: none;
  /* entrance + idle float */
  animation: btnEntrance 0.55s 0.75s both, btnFloat 2.2s 1.3s ease-in-out infinite;
}

.play-btn .btn-icon {
  font-size: 38px;
  line-height: 1;
}

/* idle float */
@keyframes btnFloat {
  0%, 100% { transform: translateY(0px);  }
  50%      { transform: translateY(-9px); }
}

/* entrance */
@keyframes btnEntrance {
  from { transform: scale(0.3) rotate(-6deg); opacity: 0; }
  70%  { transform: scale(1.08) rotate(2deg); opacity: 1; }
  to   { transform: scale(1) rotate(0deg);    opacity: 1; }
}

/* hover: lift */
.play-btn:hover {
  animation: none;
  transform: translate(-4px, -4px);
  box-shadow: 11px 11px 0 #000;
  background: #ef5350;
  transition: box-shadow 0.08s, transform 0.08s, background 0.08s;
}

/* active: press down */
.play-btn:active {
  animation: none;
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 #000;
  background: #b71c1c;
  transition: box-shadow 0.05s, transform 0.05s;
}

/* ─── ON CLICK: starburst explodes ──────────────────────── */
#play-toggle:checked ~ #intro .starburst {
  animation: burstExplode 0.6s 0.05s forwards;
}

@keyframes burstExplode {
  0%   { transform: translate(-50%, -50%) scale(0)   rotate(0deg);  opacity: 1; }
  55%  { transform: translate(-50%, -50%) scale(2.2) rotate(18deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(4.5) rotate(32deg); opacity: 0; }
}

/* ─── ON CLICK: button booms out ────────────────────────── */
#play-toggle:checked ~ #intro .play-btn {
  animation: btnBoom 0.32s forwards;
}

@keyframes btnBoom {
  0%   { transform: scale(1);   opacity: 1; }
  45%  { transform: scale(1.6); opacity: 1; }
  100% { transform: scale(0.1); opacity: 0; }
}

/* ─── ON CLICK: screen flashes and whooshes away ────────── */
#play-toggle:checked ~ #intro {
  animation: introExit 0.75s 0.22s forwards;
  pointer-events: none;
}

@keyframes introExit {
  0%   { transform: scale(1);    opacity: 1; filter: brightness(1);   }
  25%  { transform: scale(1.03); opacity: 1; filter: brightness(3);   }
  100% { transform: scale(1.6);  opacity: 0; filter: brightness(5);   }
}

/* ─── Responsive: scale down text on smaller screens ─────── */
@media (max-width: 600px) {
  #intro { gap: 28px; }

  .intro-title .t-small { font-size: 22px; letter-spacing: 2px; }
  .intro-title .t-big   { font-size: 58px; text-shadow: 3px 3px 0 #000; }
  .intro-title .t-sub   { font-size: 18px; letter-spacing: 5px; }

  .play-btn {
    font-size: 36px;
    padding: 14px 34px;
    gap: 10px;
    box-shadow: 5px 5px 0 #000;
  }
  .play-btn .btn-icon { font-size: 28px; }

  .starburst { width: 150px; height: 150px; }
}

@media (max-width: 380px) {
  .intro-title .t-big { font-size: 46px; }
  .play-btn           { font-size: 30px; padding: 12px 26px; }
}

/* ═══════════════════════════════════════════════════════════
   CINEMATIC STORY OVERLAY
   Appears after PLAY ME is clicked; dismissed by Begin button
═══════════════════════════════════════════════════════════ */

/* Hide story overlay by default */
#intro-story {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #06060f;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

/* Fade in after PLAY ME is clicked */
#play-toggle:checked ~ #intro-story {
  animation: storyFadeIn 1s 0.8s both;
  pointer-events: all;
}
@keyframes storyFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Fade-out keyframe (triggered via inline style by JS) */
@keyframes storyFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ── Layout ─────────────────────────────────────────────── */
.story-content {
  text-align: center;
  padding: 40px 60px;
  max-width: 720px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* ── Text lines (filled by JS typewriter) ───────────────── */
.story-line {
  font-family: 'Georgia', serif;
  font-size: 21px;
  color: #f0ede8;
  line-height: 1.75;
  letter-spacing: 0.3px;
  min-height: 1.75em;
  margin: 0;
}

/* Blinking cursor while a line is being typed */
.story-line.typing::after {
  content: '|';
  color: #f0ede8;
  animation: cursorBlink 0.65s step-end infinite;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Lightning ──────────────────────────────────────────── */
.lightning-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 100px;
  opacity: 0;
  position: relative;
}

.lightning-bolt {
  width: 50px;
  height: 90px;
  filter:
    drop-shadow(0 0 8px #FFD700)
    drop-shadow(0 0 24px #FFA000)
    drop-shadow(0 0 48px #FF6600);
}

/* Flash + bolt animation triggered by JS via .active class */
.lightning-scene.active {
  animation: boltFlicker 1.6s ease-out forwards;
}
@keyframes boltFlicker {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  18%  { opacity: 0; }
  24%  { opacity: 1; }
  38%  { opacity: 0; }
  44%  { opacity: 0.9; }
  62%  { opacity: 0; }
  72%  { opacity: 0.6; }
  88%  { opacity: 0; }
  100% { opacity: 0; }
}

/* White screen flash layered over the whole overlay */
.lightning-scene.active::before {
  content: '';
  position: fixed;
  inset: 0;
  background: white;
  pointer-events: none;
  animation: screenFlash 1.6s ease-out forwards;
}
@keyframes screenFlash {
  0%   { opacity: 0; }
  6%   { opacity: 0.7; }
  14%  { opacity: 0; }
  24%  { opacity: 0.5; }
  32%  { opacity: 0; }
  44%  { opacity: 0.35; }
  54%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ── Begin button ───────────────────────────────────────── */
.story-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 44px;
  background: #e53935;
  color: white;
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 38px;
  letter-spacing: 3px;
  border: 3px solid #000;
  border-radius: 6px;
  box-shadow: 5px 5px 0 #000;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease, transform 0.7s ease,
              box-shadow 0.08s, background 0.08s;
  pointer-events: none;
}
.story-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.story-btn:hover {
  background: #ef5350;
  box-shadow: 7px 7px 0 #000;
  transform: translateY(-2px) !important;
}
.story-btn:active {
  background: #b71c1c;
  box-shadow: 2px 2px 0 #000;
  transform: translateY(2px) !important;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .story-line { font-size: 17px; }
  .story-btn  { font-size: 28px; padding: 12px 30px; }
}