/* theme-immersive.css
   Full immersive board-game / cartoon frame skin (PepeAscension-like energy)
*/

/* Background blocks removed: handled by css/bg-split.css */
:root{
  --paper: rgba(255,255,255,.06);
  --ink: rgba(255,255,255,.9);
  --stroke: rgba(0,0,0,.45);
  --acid: rgba(57,255,136,1);
  --pink: rgba(255,59,255,1);
  --cyan: rgba(0,229,255,1);
  --gold: rgba(255,214,102,1);
}

/* World background */
/* Halftone overlay */
main, header, footer{ position: relative; z-index: 1; }

/* Immersive frame panel */
.frame{
  position: relative;
  border-radius: 34px;
  transform-style: preserve-3d;
}
.frame::before{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 20%, rgba(57,255,136,.28), transparent 55%),
              radial-gradient(circle at 75% 35%, rgba(0,229,255,.18), transparent 60%),
              radial-gradient(circle at 60% 80%, rgba(255,214,102,.14), transparent 62%);
  filter: blur(18px);
  opacity:.55;
  z-index: 0;
}

.frame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    radial-gradient(circle at 30% 20%, rgba(255,214,102,.10), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(0,229,255,.08), transparent 60%),
    rgba(10,10,10,.82);
  border: 3px solid rgba(255,255,255,.10);
  box-shadow:
    0 24px 70px rgba(0,0,0,.72),
    inset 0 0 0 2px rgba(0,0,0,.55),
    inset 0 18px 40px rgba(255,255,255,.05);
  z-index: 1;
}

.frame > *{
  position: relative;
  z-index: 2;
}

/* Sticker / comic label */
.comic-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,214,102,.12);
  border: 2px solid rgba(255,214,102,.35);
  box-shadow: 0 14px 26px rgba(0,0,0,.45);
}
.comic-tag__dot{
  width: 10px; height:10px;
  border-radius:999px;
  background: rgba(255,59,255,.85);
  box-shadow: 0 0 18px rgba(255,59,255,.35);
}

/* Buy button: huge + centered */
.cta-row{
  display:flex;
  justify-content:center;
  align-items:center;
}
#btn-buy.btn{
  width: min(720px, 100%);
  padding: 18px 26px;
  font-size: 20px;
  border-radius: 22px;
  box-shadow:
    0 18px 50px rgba(0,0,0,.65),
    0 0 0 2px rgba(0,0,0,.55) inset;
}

/* Pump the phase cards */
.phase-card{
  border-radius: 28px;
  transform: translateZ(0);
}
.phase-card .badge{
  border-width: 2px;
}

/* Language menu: grid of flags */
.lang__menu{
  max-height: 320px;
  overflow:auto;
  width: min(340px, 92vw);
}
.lang__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.lang__name{
  flex: 1;
  opacity:.95;
}
.lang__code{
  font-size: 12px;
  opacity:.6;
}

/* Extra punch for hero widget */
.hero__widget{
  border-radius: 34px;
}
.hero__title{
  text-shadow: 0 18px 42px rgba(0,0,0,.75);
}


/* ===== Hero collage (3 new SVGs) ===== */
.hero__art{
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-collage{
  position: relative;
  width: min(520px, 90vw);
  aspect-ratio: 1 / 1.05;
  border-radius: 36px;
  overflow: visible;
}
.hero-collage__rocket{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: floatSlow 3.8s ease-in-out infinite alternate;
  filter: drop-shadow(0 22px 50px rgba(0,0,0,.65));
}
.hero-collage__lab{
  position:absolute;
  left: -10%;
  bottom: -14%;
  width: 54%;
  transform: rotate(-4deg);
  animation: bob 2.6s ease-in-out infinite alternate;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.55));
}
.hero-collage__pra{
  position:absolute;
  right: -8%;
  bottom: -12%;
  width: 52%;
  transform: rotate(6deg);
  animation: bob2 2.9s ease-in-out infinite alternate;
  filter: drop-shadow(0 18px 36px rgba(0,0,0,.55));
}
@keyframes floatSlow{
  from{ transform: translateY(0px) }
  to{ transform: translateY(-10px) }
}
@keyframes bob{
  from{ transform: translateY(0) rotate(-4deg) }
  to{ transform: translateY(-8px) rotate(-2deg) }
}
@keyframes bob2{
  from{ transform: translateY(0) rotate(6deg) }
  to{ transform: translateY(-7px) rotate(4deg) }
}

/* Speech bubble */
.hero-collage__bubble{
  position:absolute;
  top: 170px !important; 
  right: -6%;
  max-width: 220px;
  padding: 14px 14px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,214,102,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  transform: rotate(2deg);
  backdrop-filter: blur(10px);
}
.hero-collage__bubble::after{
  content:"";
  position:absolute;
  left: 14px;
  bottom: -10px;
  width: 18px;
  height: 18px;
  background: rgba(255,255,255,.06);
  border-left: 2px solid rgba(255,214,102,.35);
  border-bottom: 2px solid rgba(255,214,102,.35);
  transform: rotate(45deg);
}
.bubble__title{
  display:block;
  font-weight: 900;
  letter-spacing: .06em;
}
.bubble__sub{
  display:block;
  font-size: 13px;
  opacity:.92;
  margin-top: 6px;
}

/* Countdown box centered + highlighted */
.countdownBox{
  margin-top: 14px;
  padding: 12px;
  border-radius: 24px;
  border: 2px solid rgba(255,214,102,.22);
  background: rgba(255,255,255,.035);
  box-shadow: 0 12px 36px rgba(0,0,0,.55);
  text-align:center;
}
.countdown__label--center{
  text-align:center;
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.countdown__grid{
  justify-content: center;
}

/* ==========================
   COUNTDOWN HYPE MODE
========================== */

.countdown--hype{
  position: relative;
  padding: 18px 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.10) 1px, transparent 1px),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,.10) 1px, transparent 1px),
    radial-gradient(circle at 80% 40%, rgba(255,255,255,.08) 1px, transparent 1px),
    radial-gradient(800px 220px at 15% 20%, rgba(57,255,136,.18), transparent 55%),
    radial-gradient(900px 260px at 85% 30%, rgba(0,229,255,.16), transparent 56%),
    radial-gradient(700px 240px at 50% 110%, rgba(255,59,255,.12), transparent 60%),
    rgba(7,7,9,.78);
  background-size: 220px 140px, 260px 170px, 200px 120px, auto, auto, auto, auto;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* 스캔라인 효과 */
.countdown--hype::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 1px,
      rgba(255,255,255,0) 6px,
      rgba(255,255,255,0) 10px
    );
  opacity: .18;
  transform: translateY(-20%);
  animation: scanlines 3.6s linear infinite;
  pointer-events:none;
}

/* 살짝 지나가는 빛 */
.countdown--hype::after{
  content:"";
  position:absolute;
  inset:-50%;
  background: radial-gradient(circle at 30% 35%, rgba(255,255,255,.14), transparent 55%);
  transform: translateX(-40%) rotate(10deg);
  transition: transform 700ms var(--ease);
  opacity: .7;
  pointer-events:none;
}
.countdown--hype:hover::after{
  transform: translateX(40%) rotate(10deg);
}

@keyframes scanlines{
  from{ transform: translateY(-18%); }
  to{ transform: translateY(18%); }
}

/* ✅ 한 줄 정렬 */
.countdown__grid--row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  margin-top: 12px;
}

/* timebox 스타일 업그레이드 */
.timebox{
  position: relative;
  display:flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform 160ms var(--ease), border-color 160ms var(--ease);
}

/* ✅ 초(S)는 더 강조 (긴장감) */
.timebox[data-unit="S"]{
  border-color: rgba(57,255,136,.30);
  box-shadow: 0 0 22px rgba(57,255,136,.08);
}

.timebox:hover{
  transform: translateY(-2px) scale(1.03);
  border-color: rgba(0,229,255,.22);
}

/* 숫자 */
.timebox__num{
  font-size: 30px;
  font-weight: 950;
  letter-spacing: .02em;
  line-height: 1;
  text-shadow: 0 0 16px rgba(0,229,255,.10);
}

/* D/H/M/S 글자 */
.timebox__txt{
  font-weight: 900;
  opacity: .88;
  font-size: 14px;
  letter-spacing: .08em;
  transform: translateY(-2px);
}

/* ✅ 숫자 변경 애니메이션 클래스 */
.timebox.is-tick{
  animation: tickPop 320ms var(--ease);
}
@keyframes tickPop{
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-3px) scale(1.07); }
  100% { transform: translateY(0) scale(1); }
}

/* ✅ 숫자 플립 느낌 */
.timebox__num.is-flip{
  animation: flipNum 260ms var(--ease);
}
@keyframes flipNum{
  0%   { transform: translateY(6px) rotateX(52deg); opacity:.6; }
  100% { transform: translateY(0px) rotateX(0deg); opacity:1; }
}

/* 모바일 */
@media (max-width: 520px){
  .timebox__num{ font-size: 24px; }
  .countdown__grid--row{ gap: 8px; }
  .timebox{ padding: 8px 10px; border-radius: 16px; }
}


/* Typography rhythm: big / small / big / small */
.h1{
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.0;
}
.hero__desc{
  font-size: 15px;
}
.h2{
  font-size: clamp(22px, 2.6vw, 34px);
}
.muted{
  font-size: 14px;
}