:root{
  --page-w:760px;
  --text:#f3f5f8;
  --muted:#c4c9d1;
}
*{box-sizing:border-box}
html{background:#000;scroll-behavior:smooth}
body{
  margin:0;
  background:#000;
  color:var(--text);
  font-family:Arial,"Noto Sans KR","Noto Sans JP","PingFang SC","Microsoft JhengHei",sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{color:inherit}
.ambient{display:none}

.topbar{
  position:fixed;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  width:min(calc(100% - 18px),var(--page-w));
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  pointer-events:none;
}
.brand{pointer-events:auto;opacity:.0;width:1px;height:1px;overflow:hidden}
#langs{
  margin-left:auto;
  display:flex;
  gap:4px;
  padding:5px 7px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(10px);
  pointer-events:auto;
}
#langs button{border:0;background:none;padding:0;opacity:.46;cursor:pointer;transition:.18s}
#langs button.active{opacity:1;transform:scale(1.08)}
#langs img{display:block;width:26px;height:26px}

main,footer{width:min(100%,var(--page-w));margin:0 auto}
.scene{position:relative;isolation:isolate;overflow:hidden;background:#000}
.scene .arena{
  position:absolute;
  z-index:0;
  left:50%;
  transform:translateX(-50%);
  width:min(1180px,155vw);
  background-image:
    linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,.02) 70%,rgba(0,0,0,.60)),
    url("share-background.png");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% auto;
  pointer-events:none;
  opacity:.82;
}
.content{position:relative;z-index:20;width:100%;text-align:center}
.content.reveal{opacity:0;transform:translateY(28px);transition:opacity .45s ease,transform .55s ease}
.content.reveal.show{opacity:1;transform:none}

/* TYPOGRAPHY */
[data-i18n]{
  font-weight:400!important;
  font-style:italic;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  hyphens:none;
}
.hero-copy h1{
  margin:0 auto 12px;
  max-width:650px;
  font-size:17px;
  line-height:1.52;
  font-weight:500!important;
}
.content p{
  margin:10px auto;
  max-width:650px;
  padding:0 12px;
  font-size:15px;
  line-height:1.58;
  color:#f1f2f4;
  text-shadow:0 2px 8px #000;
}
/* Korean: break only between eojeol. */
html[lang="ko"] [data-i18n]{word-break:keep-all;overflow-wrap:normal}
/* English: never split a word. */
html[lang="en"] [data-i18n]{word-break:normal;overflow-wrap:normal}
/* CJK: allow proper character-line rules rather than forcing one unbreakable line. */
html[lang="ja"] [data-i18n],
html[lang="zh-CN"] [data-i18n],
html[lang="zh-TW"] [data-i18n]{word-break:normal;line-break:strict;overflow-wrap:normal}

.type-caret::after{
  content:"";
  display:inline-block;
  width:1px;height:.92em;margin-left:3px;
  background:currentColor;
  vertical-align:-.08em;
  animation:caretBlink .5s steps(1,end) infinite;
}
@keyframes caretBlink{50%{opacity:0}}

/* HERO */
.hero{height:790px}
.hero .arena{top:0;height:600px}
.hero-logo{
  position:absolute;z-index:3;
  width:360px;top:38px;left:50%;transform:translateX(-50%);
}
.rng{position:absolute;z-index:4;width:94px;top:48px;left:61%}
.hero-woman{
  position:absolute;z-index:3;width:335px;top:178px;left:50%;transform:translateX(-50%);
  filter:drop-shadow(0 0 22px rgba(0,190,255,.18));
  animation:heroBreath 5.2s ease-in-out infinite;
}
.cards,.chips{position:absolute;z-index:1;pointer-events:none}
.cards{width:560px;left:-120px;top:145px;animation:cardsFloat 5.8s ease-in-out infinite}
.chips{width:560px;right:-25px;top:155px;animation:chipsFloat 4.7s ease-in-out infinite}
.vip{position:absolute;z-index:4;width:96px;left:65%;top:408px}
.hero-copy{
  position:absolute;z-index:30;left:16px;right:16px;top:550px;text-align:center
}
.demo-row{
  position:relative;z-index:35;
  display:flex;justify-content:center;gap:8px
}
.demo-row a{display:block;position:relative;z-index:36;pointer-events:auto}
.demo-row img{display:block;width:180px}

@keyframes heroBreath{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes cardsFloat{0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}50%{transform:translate3d(9px,-14px,0) rotate(1.6deg)}}
@keyframes chipsFloat{0%,100%{transform:translate3d(0,0,0) rotate(.7deg)}50%{transform:translate3d(-8px,-11px,0) rotate(-1.4deg)}}

/* RELEASE */
.section{position:relative;padding-left:22px;padding-right:22px}
.release{
  min-height:650px;
  padding-top:215px;
  padding-bottom:48px;
}
.release .arena{top:85px;height:470px}
.release .hood{
  position:absolute;z-index:4;
  width:330px;top:-35px;left:50%;transform:translateX(-50%);
  filter:drop-shadow(0 0 20px rgba(0,170,255,.16));
  pointer-events:none;
}
.beta{
  display:inline-block;
  position:relative;z-index:40;
  margin:0 0 10px;
  padding:10px 26px;
  border:1px solid rgba(77,233,255,.42);
  border-radius:22px;
  background:linear-gradient(135deg,#15779b,#15384a);
  color:#fff;text-decoration:none;
  font-size:15px;font-weight:400;
}
.stores{
  position:relative;z-index:40;
  display:flex;justify-content:center;gap:6px;
  margin:0 auto 10px;
  width:max-content;max-width:100%;
}
.stores a{display:block;position:relative;z-index:41}
.stores img{display:block;width:170px}

.phone{
  display:block;
  position:relative!important;
  z-index:20!important;
  width:565px;
  max-width:94%;
  height:auto;
  margin:20px auto 28px;
  transform:none!important;
  filter:drop-shadow(0 12px 18px #000);
}

/* TOURNAMENT — content and visual stage are different blocks, so overlap is impossible */
.tournaments{
  padding-top:28px;
  padding-bottom:0;
}
.tournaments .arena{top:135px;height:620px}
.tournaments .content{padding-bottom:8px}
.tournaments .content p{margin-top:8px;margin-bottom:24px}
.tournament-visual{
  position:relative;
  z-index:10;
  height:420px;
  margin-top:0;
  overflow:hidden;
}
.cup{
  position:absolute;
  z-index:12;
  width:300px;
  left:4%;
  bottom:10px;
  pointer-events:none;
  transform-origin:50% 82%;
  animation:trophyScalePulse 3.2s ease-in-out infinite;
  filter:drop-shadow(0 8px 18px #000);
}
.woman2{
  position:absolute;
  z-index:11;
  width:385px;
  right:-1%;
  bottom:-42px;
  pointer-events:none;
  filter:drop-shadow(0 0 24px rgba(0,212,255,.16));
}
@keyframes trophyScalePulse{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-6px) scale(1.07)}
}

/* CUSTOM — everything stays in normal document flow */
.custom{
  padding-top:34px;
  padding-bottom:68px;
}
.custom .arena{top:32px;height:560px}
.custom .content{
  display:flex;
  flex-direction:column;
  align-items:center;
  height:auto;
  min-height:0;
}
.custom .phone{margin:16px auto 18px}
.custom .phone + .phone{margin-top:4px}
.custom .content p{
  position:relative!important;
  display:block!important;
  height:auto!important;
  min-height:0!important;
  width:100%;
  margin:8px auto 0!important;
  padding:0 14px 26px!important;
  z-index:25;
}

/* FOOTER — always follows custom content; icon can never sit under text */
footer{
  position:relative;
  z-index:30;
  clear:both;
  text-align:center;
  padding:42px 20px 40px;
  background:#000;
  color:#c2c7cb;
  font-size:10px;
}
footer .appicon{
  position:relative;
  display:block;
  width:82px;
  margin:0 auto 10px;
  border-radius:17px;
}
footer p{margin:3px 0}
.mail{display:inline-block;margin-top:14px}
.mail img{display:block;width:35px}

@media(max-width:700px){
  #langs img{width:23px;height:23px}
  main,footer{width:100%}
  .section{padding-left:10px;padding-right:10px}
  .scene .arena{width:130vw;background-size:100% auto}

  .hero{height:700px}
  .hero .arena{height:520px}
  .hero-logo{width:300px;top:70px}
  .rng{width:72px;top:50px;left:63%}
  .hero-woman{width:290px;top:160px}
  .cards{width:490px;left:-150px;top:140px}
  .chips{width:490px;right:-50px;top:155px}
  .vip{width:80px;left:66%;top:380px}
  .hero-copy{top:500px;left:12px;right:12px}
  .hero-copy h1{
    max-width:calc(100vw - 30px);
    font-size:14px;
    line-height:1.56;
  }
  .demo-row img{width:148px}

  .release{
    min-height:0;
    padding-top:190px;
    padding-bottom:72px;
  }
  .release .arena{top:75px;height:430px}
  .release .hood{width:300px;top:-50px}
  .stores img{width:140px}
  .content p{
    max-width:calc(100vw - 30px);
    font-size:13px;
    line-height:1.6;
    padding-left:4px;padding-right:4px;
  }
  .phone,
  .release .phone,
  .tournaments .phone,
  .custom .phone{
    width:92vw;
    max-width:560px;
    margin:20px auto 28px;
  }

  .tournaments{
    min-height:0;
    padding-top:38px;
    padding-bottom:0;
  }
  .tournaments .arena{top:110px;height:650px}
  .tournaments .content p{
    margin:0 auto 28px;
    padding:0 8px;
    min-height:0;
  }
  .tournament-visual{
    height:360px;
    margin-top:18px; /* hard blank gap below text */
  }
  .cup{
    width:min(45vw,225px);
    left:-1%;
    bottom:4px;
  }
  .woman2{
    width:min(56vw,285px);
    right:-8%;
    bottom:-34px;
  }

  .custom{
    padding-top:54px;
    padding-bottom:78px;
  }
  .custom .arena{top:30px;height:500px}
  .custom .content p{
    width:calc(100vw - 24px);
    max-width:620px;
    margin:8px auto 0!important;
    padding:0 6px 42px!important; /* real footer clearance */
    line-height:1.65;
  }

  footer{
    padding-top:48px;
  }
}

@media(max-width:430px){
  .tournament-visual{height:330px;margin-top:20px}
  .cup{width:44vw;left:-2%;bottom:4px}
  .woman2{width:55vw;right:-8%;bottom:-26px}
  .custom{padding-bottom:84px}
  .custom .content p{
    width:calc(100vw - 22px);
    padding-bottom:46px!important;
  }
  footer{padding-top:48px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* =========================================================
   v8 STABLE — 배경/인물 잘림/2줄 문구 최종 구조 보정
   - body 고정 배경 방식 사용 안 함
   - 섹션별 배경은 '한 장'만, no-repeat, contain 계열로 보여 전체 그림 보존
   - 인물 영역은 overflow:visible 로 잘림 방지
   - 긴 문구는 의도적으로 2줄 폭
   ========================================================= */

/* 기본 검정 배경 */
html,body{background:#000 !important}

/* 각 scene은 내용은 보이게, 가로 스크롤만 body에서 차단 */
.scene,
.hero,
.release,
.tournaments,
.custom{
  overflow:visible !important;
  background:#000 !important;
}

/* 배경은 섹션마다 한 장. 절대 반복하지 않음.
   cover를 쓰지 않아 경기장 이미지가 과도하게 잘리지 않게 함. */
.scene .arena{
  display:block !important;
  position:absolute !important;
  z-index:0 !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:100vw !important;
  max-width:none !important;
  margin:0 !important;
  pointer-events:none !important;
  opacity:.82 !important;
  background-image:
    linear-gradient(to bottom,
      rgba(0,0,0,.12) 0%,
      rgba(0,0,0,.02) 18%,
      rgba(0,0,0,.02) 78%,
      rgba(0,0,0,.58) 100%),
    url("share-background.png") !important;
  background-repeat:no-repeat,no-repeat !important;
  background-position:center top,center top !important;
  background-size:100% 100%,100% auto !important;
}

/* 배경이 '타일처럼 여러 번' 보이지 않도록 필요한 구간만 크게 한 번 표시 */
.hero .arena{top:0 !important;height:600px !important}
.release .arena{top:70px !important;height:520px !important}
.tournaments .arena{top:95px !important;height:610px !important}
.custom .arena{top:35px !important;height:540px !important}

/* 전경은 항상 배경 위 */
.hero > *:not(.arena),
.release > *:not(.arena),
.tournaments > *:not(.arena),
.custom > *:not(.arena){
  z-index:2;
}

/* 인물은 절대 section overflow에 의해 잘리지 않게 */
.hero-woman,.release .hood,.woman2,.cup{
  overflow:visible !important;
  object-fit:contain !important;
}

/* 긴 문구: 너무 넓어서 한 줄이 되지 않도록 의도적으로 폭 제한 */
.release .content p,
.tournaments .content p,
.custom .content p{
  width:540px !important;
  max-width:calc(100vw - 46px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  line-height:1.62 !important;
  text-align:center !important;
}

/* 단어 중간 잘림 방지 */
html[lang="ko"] [data-i18n]{
  word-break:keep-all !important;
  overflow-wrap:normal !important;
}
html[lang="en"] [data-i18n]{
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
}
html[lang="ja"] [data-i18n],
html[lang="zh-CN"] [data-i18n],
html[lang="zh-TW"] [data-i18n]{
  word-break:normal !important;
  line-break:strict !important;
  overflow-wrap:normal !important;
}

/* 토너먼트 설명과 캐릭터 영역은 물리적으로 분리 */
.tournaments .content{
  position:relative !important;
  z-index:30 !important;
}
.tournament-visual{
  position:relative !important;
  z-index:10 !important;
  height:430px !important;
  margin-top:32px !important;
  overflow:visible !important;
}
.tournament-visual .cup{
  position:absolute !important;
  width:290px !important;
  left:3% !important;
  bottom:0 !important;
  z-index:12 !important;
}
.tournament-visual .woman2{
  position:absolute !important;
  width:370px !important;
  right:-1% !important;
  bottom:-30px !important;
  z-index:11 !important;
}

/* custom 문구 → footer 아이콘은 반드시 일반 문서 흐름 */
.custom,
.custom .content{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}
.custom .content p{
  position:relative !important;
  height:auto !important;
  min-height:0 !important;
  margin-bottom:0 !important;
  padding-bottom:42px !important;
}
footer{
  position:relative !important;
  clear:both !important;
  z-index:40 !important;
  background:#000 !important;
}

/* 모바일 */
@media(max-width:700px){
  .scene .arena{
    width:100vw !important;
    background-repeat:no-repeat,no-repeat !important;
    background-position:center top,center top !important;
    /* 모바일은 원본 경기장 비율을 보존. cover 금지 */
    background-size:100% 100%,auto 100% !important;
  }

  .hero .arena{height:520px !important}
  .release .arena{top:65px !important;height:470px !important}
  .tournaments .arena{top:90px !important;height:560px !important}
  .custom .arena{top:30px !important;height:500px !important}

  /* 모바일 이미지들은 모두 일반 흐름 */
  .release .phone,
  .tournaments .phone,
  .custom .phone{
    position:relative !important;
    display:block !important;
    width:92vw !important;
    max-width:560px !important;
    height:auto !important;
    inset:auto !important;
    transform:none !important;
    margin:20px auto 28px !important;
  }

  /* 모바일 문구는 실제로 2줄이 되도록 폭 설정 */
  .release .content p,
  .tournaments .content p,
  .custom .content p{
    width:78vw !important;
    max-width:500px !important;
    min-width:0 !important;
    font-size:13px !important;
    line-height:1.62 !important;
  }

  .hero-copy h1{
    width:80vw !important;
    max-width:500px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  /* phone002 + 글자 다음에 충분한 빈 공간 후 캐릭터 */
  .tournaments .content p{
    margin-bottom:0 !important;
  }
  .tournament-visual{
    height:355px !important;
    margin-top:48px !important;
    overflow:visible !important;
  }
  .tournament-visual .cup{
    width:min(43vw,215px) !important;
    left:0 !important;
    bottom:4px !important;
  }
  .tournament-visual .woman2{
    width:min(53vw,270px) !important;
    right:-3% !important;
    bottom:-22px !important;
  }

  /* 아래 여자/트로피가 다음 섹션에 잘리지 않게 */
  .tournaments{
    padding-bottom:42px !important;
    overflow:visible !important;
  }
  .custom{
    padding-top:72px !important;
    padding-bottom:78px !important;
    overflow:visible !important;
  }

  /* 마지막 긴글과 아이콘 간격 */
  .custom .content p{
    padding-bottom:48px !important;
  }
  footer{
    padding-top:50px !important;
  }
}

@media(max-width:430px){
  .release .content p,
  .tournaments .content p,
  .custom .content p{
    width:82vw !important;
    font-size:12.5px !important;
  }
  .tournament-visual{
    height:325px !important;
    margin-top:44px !important;
  }
  .tournament-visual .cup{width:42vw !important}
  .tournament-visual .woman2{width:52vw !important;right:-2% !important}
}


/* =========================================================
   v9 — SECOND CHARACTER +30% / LOWER WOMAN EDGE FIX
   ========================================================= */

/* 두 번째 남자 캐릭터 약 30% 확대 */
.release .hood{
  width:429px !important; /* 330px × 1.30 */
  top:-82px !important;
}

/* 여자 하단이 칼로 자른 것처럼 보이지 않게:
   visual 영역 자체를 더 높이고 캐릭터 하단을 영역 안에 넣음 */
.tournament-visual{
  height:485px !important;
  overflow:visible !important;
  padding-bottom:0 !important;
}
.tournament-visual .woman2{
  width:385px !important;
  right:-1% !important;
  bottom:0 !important;
  object-fit:contain !important;
  object-position:center bottom !important;
}
.tournament-visual .cup{
  bottom:12px !important;
}

/* 다음 섹션과 자연스럽게 연결될 여백 */
.tournaments{
  padding-bottom:62px !important;
}
.custom{
  padding-top:74px !important;
}

@media(max-width:700px){
  /* 모바일에서도 기존 300px 기준 약 30% 확대 */
  .release .hood{
    width:390px !important;
    max-width:none !important;
    top:-92px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
  }

  /* 남자 확대에 맞춰 텍스트/버튼 시작 위치 확보 */
  .release{
    padding-top:235px !important;
  }

  /* 하단 여성 전체 실루엣이 영역 안에서 끝나도록 */
  .tournament-visual{
    height:395px !important;
    margin-top:48px !important;
    overflow:visible !important;
  }
  .tournament-visual .woman2{
    width:min(55vw,285px) !important;
    right:-2% !important;
    bottom:0 !important;
  }
  .tournament-visual .cup{
    width:min(43vw,215px) !important;
    bottom:10px !important;
  }

  .tournaments{
    padding-bottom:66px !important;
  }
  .custom{
    padding-top:82px !important;
  }
}

@media(max-width:430px){
  .release .hood{
    width:360px !important;
    top:-82px !important;
  }
  .release{
    padding-top:220px !important;
  }
  .tournament-visual{
    height:365px !important;
  }
  .tournament-visual .woman2{
    width:54vw !important;
    bottom:0 !important;
  }
}


/* =========================================================
   v10 — COMPACT COMPOSITION
   기존 형식 유지 + 이미지/문구 사이의 불필요한 빈 공간만 정리
   ========================================================= */

/* HERO: 주요 요소를 조금 더 한 덩어리처럼 */
.hero{height:740px !important}
.hero-logo{top:32px !important}
.hero-woman{top:154px !important}
.cards{top:132px !important}
.chips{top:142px !important}
.vip{top:385px !important}
.hero-copy{top:515px !important}

/* SECOND: 커진 남자와 CTA/phone을 더 촘촘하게 연결 */
.release{
  padding-top:205px !important;
  padding-bottom:42px !important;
}
.release .hood{
  top:-72px !important;
}
.release .content p{
  margin-top:7px !important;
  margin-bottom:7px !important;
}
.release .phone{
  margin-top:14px !important;
  margin-bottom:18px !important;
}

/* TOURNAMENT: phone002 → 설명 → 트로피/여자 흐름을 압축 */
.tournaments{
  padding-top:18px !important;
  padding-bottom:34px !important;
}
.tournaments .phone{
  margin-top:10px !important;
  margin-bottom:16px !important;
}
.tournaments .content p{
  margin-top:2px !important;
  margin-bottom:0 !important;
}
.tournament-visual{
  height:430px !important;
  margin-top:22px !important;
}
.tournament-visual .cup{
  left:5% !important;
  bottom:10px !important;
}
.tournament-visual .woman2{
  right:1% !important;
  bottom:0 !important;
}

/* CUSTOM: phone003/004 사이와 하단 문구 간격 정돈 */
.custom{
  padding-top:38px !important;
  padding-bottom:54px !important;
}
.custom .phone{
  margin-top:8px !important;
  margin-bottom:10px !important;
}
.custom .phone + .phone{
  margin-top:2px !important;
}
.custom .content p{
  margin-top:6px !important;
  padding-bottom:32px !important;
}

/* footer도 본문과 너무 멀어지지 않게 */
footer{
  padding-top:34px !important;
}

/* 모바일은 세로 간격을 더 적극적으로 정리 */
@media(max-width:700px){
  .hero{
    height:665px !important;
  }
  .hero-logo{top:25px !important}
  .hero-woman{top:142px !important}
  .cards{top:125px !important}
  .chips{top:137px !important}
  .vip{top:355px !important}
  .hero-copy{top:475px !important}

  .release{
    padding-top:218px !important;
    padding-bottom:46px !important;
  }
  .release .hood{
    top:-88px !important;
  }
  .release .phone{
    margin:14px auto 18px !important;
  }

  .tournaments{
    padding-top:22px !important;
    padding-bottom:38px !important;
  }
  .tournaments .phone{
    margin:10px auto 16px !important;
  }
  .tournaments .content p{
    margin-bottom:0 !important;
  }

  /* 여자/트로피가 글자를 가리지 않는 범위 안에서 위로 당김 */
  .tournament-visual{
    height:365px !important;
    margin-top:28px !important;
  }
  .tournament-visual .cup{
    width:min(43vw,215px) !important;
    left:1% !important;
    bottom:8px !important;
  }
  .tournament-visual .woman2{
    width:min(55vw,285px) !important;
    right:-1% !important;
    bottom:0 !important;
  }

  .custom{
    padding-top:46px !important;
    padding-bottom:60px !important;
  }
  .custom .phone{
    margin:8px auto 12px !important;
  }
  .custom .phone + .phone{
    margin-top:0 !important;
  }
  .custom .content p{
    margin-top:4px !important;
    padding-bottom:34px !important;
  }
  footer{
    padding-top:36px !important;
  }
}

@media(max-width:430px){
  .hero{height:650px !important}
  .release{padding-bottom:42px !important}
  .tournament-visual{
    height:340px !important;
    margin-top:26px !important;
  }
  .custom{
    padding-top:42px !important;
    padding-bottom:56px !important;
  }
}


/* =========================================================
   v11 — BEAT / COMMERCIAL MOTION
   v10 레이아웃은 그대로 유지. 시각 레이어에만 리듬 추가.
   ========================================================= */

:root{--scrollBeat:0}

/* 이미지가 등장할 때 짧고 강한 리듬 */
.reveal .phone{
  opacity:.18;
  filter:brightness(.72);
  transition:opacity .42s ease,filter .55s ease,transform .62s cubic-bezier(.2,.8,.2,1);
}
.reveal.show .phone{
  opacity:1;
  filter:brightness(1);
  transform:translateY(0) scale(1) !important;
}
.reveal .phone:nth-of-type(1){transform:translateY(20px) scale(.975) !important}
.reveal .phone:nth-of-type(2){transform:translateY(26px) scale(.97) !important;transition-delay:.10s}

/* 로고: 아주 약한 광량 펄스 */
.hero-logo{
  animation:brandBeat 3.4s cubic-bezier(.4,0,.2,1) infinite !important;
  transform-origin:center center;
}

/* 카드/칩은 서로 다른 박자. 배경은 움직이지 않음 */
.cards{
  animation:cardsBeat 4.6s ease-in-out infinite !important;
  transform-origin:center center;
}
.chips{
  animation:chipsBeat 3.8s ease-in-out infinite !important;
  transform-origin:center center;
}

/* 인물은 위치를 바꾸지 않는 미세 호흡 */
.hero-woman{
  animation:heroPulse 4.2s ease-in-out infinite !important;
  transform-origin:center bottom;
}
.release .hood{
  animation:hoodPulse 4.8s ease-in-out infinite !important;
  transform-origin:center bottom;
}
.woman2{
  animation:womanPulse 4.5s ease-in-out infinite !important;
  transform-origin:center bottom;
}

/* VIP/RNG에 순간적인 빛 */
.vip{animation:badgeBeat 2.8s ease-in-out infinite !important}
.rng{animation:rngBeat 3.1s ease-in-out infinite !important}

/* CTA는 과하지 않게 박자감 */
.beta,
.demo-row a{
  transition:transform .18s ease,filter .18s ease !important;
}
.beta:hover,
.demo-row a:hover{
  transform:translateY(-2px) scale(1.025) !important;
  filter:brightness(1.12);
}

/* 트로피는 기존보다 조금 더 '비트' 있게 */
.cup{
  animation:trophyBeat 2.65s cubic-bezier(.4,0,.2,1) infinite !important;
  transform-origin:50% 88%;
}

/* 상업 카피가 길어져도 PC에서 2줄 중심 */
.hero-copy h1{
  width:600px !important;
  max-width:calc(100vw - 42px) !important;
  font-size:16px !important;
  line-height:1.55 !important;
}
.release .content p,
.tournaments .content p,
.custom .content p{
  width:610px !important;
  max-width:calc(100vw - 46px) !important;
  font-size:14px !important;
  line-height:1.58 !important;
}

/* 긴 카피끼리 붙지 않게 하되 v10의 밀도 유지 */
.release .content p{margin-top:8px !important;margin-bottom:8px !important}
.release .content p + p{margin-top:2px !important}

@keyframes brandBeat{
  0%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0));transform:translateX(-50%) scale(1)}
  48%{filter:drop-shadow(0 0 12px rgba(255,255,255,.18));transform:translateX(-50%) scale(1.012)}
  55%{transform:translateX(-50%) scale(1.004)}
}
@keyframes cardsBeat{
  0%,100%{transform:translate3d(0,0,0) rotate(-.2deg)}
  45%{transform:translate3d(0,-8px,0) rotate(.8deg)}
  55%{transform:translate3d(0,-5px,0) rotate(.25deg)}
}
@keyframes chipsBeat{
  0%,100%{transform:translate3d(0,0,0) rotate(.2deg)}
  42%{transform:translate3d(0,7px,0) rotate(-.7deg)}
  54%{transform:translate3d(0,3px,0) rotate(-.2deg)}
}
@keyframes heroPulse{
  0%,100%{transform:translateX(-50%) scale(1)}
  50%{transform:translateX(-50%) scale(1.012)}
}
@keyframes hoodPulse{
  0%,100%{transform:translateX(-50%) scale(1)}
  48%{transform:translateX(-50%) scale(1.018)}
  58%{transform:translateX(-50%) scale(1.006)}
}
@keyframes womanPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.014)}
}
@keyframes trophyBeat{
  0%,100%{transform:translateY(0) scale(1)}
  42%{transform:translateY(-7px) scale(1.055)}
  52%{transform:translateY(-3px) scale(1.025)}
  60%{transform:translateY(-5px) scale(1.04)}
}
@keyframes badgeBeat{
  0%,100%{filter:brightness(1);transform:scale(1)}
  50%{filter:brightness(1.18);transform:scale(1.035)}
}
@keyframes rngBeat{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.22)}
}

@media(max-width:700px){
  /* 모바일은 카피가 3~4줄로 늘어나지 않도록 폭/폰트 조정 */
  .hero-copy h1{
    width:88vw !important;
    max-width:560px !important;
    font-size:13px !important;
    line-height:1.55 !important;
  }
  .release .content p,
  .tournaments .content p,
  .custom .content p{
    width:88vw !important;
    max-width:560px !important;
    font-size:12px !important;
    line-height:1.58 !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-logo,.cards,.chips,.hero-woman,.release .hood,.woman2,.cup,.vip,.rng{
    animation:none !important;
  }
  .reveal .phone,.reveal.show .phone{
    opacity:1 !important;
    filter:none !important;
    transform:none !important;
    transition:none !important;
  }
}


/* =========================================================
   v12 — SCROLL DEPTH / SOFT AFTERIMAGE / LONGER COPY
   ========================================================= */

/* 긴 문장이 가로로 퍼지지 않도록 중앙의 좁은 카피 컬럼 사용 */
.hero-copy h1{
  width:520px !important;
  max-width:calc(100vw - 48px) !important;
  font-size:15px !important;
  line-height:1.68 !important;
  letter-spacing:-.015em !important;
}
.release .content p,
.tournaments .content p,
.custom .content p{
  width:535px !important;
  max-width:calc(100vw - 52px) !important;
  font-size:13.5px !important;
  line-height:1.72 !important;
  letter-spacing:-.012em !important;
}

/* 문구가 길어진 만큼 섹션 내부에 최소한의 숨 쉴 공간만 추가 */
.release{padding-bottom:54px !important}
.tournaments{padding-bottom:44px !important}
.custom{padding-bottom:62px !important}

/* 깊이 효과: JS는 scale 변수만 계산. 레이아웃 자체는 변경하지 않음 */
.depth-item{
  --depth-scale:1;
  --depth-lift:0px;
  --trail-opacity:0;
  --trail-blur:7px;
  will-change:transform,filter;
  transition:filter .18s linear;
}

/* phone은 v11 reveal transform과 충돌하지 않게 scale만 최종 우선 적용 */
.reveal.show .phone.depth-item,
.phone.depth-item{
  transform:translateY(var(--depth-lift)) scale(var(--depth-scale)) !important;
  filter:
    brightness(1)
    drop-shadow(0 14px 24px rgba(0,0,0,.28))
    drop-shadow(0 0 var(--trail-blur) rgba(140,190,255,var(--trail-opacity))) !important;
}

/* 인물: 원근감 + 뒤쪽에 남는 듯한 부드러운 잔상 */
.hero-woman.depth-item{
  transform:translateX(-50%) translateY(var(--depth-lift)) scale(var(--depth-scale)) !important;
  filter:
    drop-shadow(0 0 22px rgba(0,190,255,.18))
    drop-shadow(-10px 8px var(--trail-blur) rgba(100,170,255,var(--trail-opacity))) !important;
  animation:none !important;
}
.release .hood.depth-item{
  transform:translateX(-50%) translateY(var(--depth-lift)) scale(var(--depth-scale)) !important;
  filter:
    drop-shadow(0 16px 25px rgba(0,0,0,.30))
    drop-shadow(10px 8px var(--trail-blur) rgba(145,120,255,var(--trail-opacity))) !important;
  animation:none !important;
}
.woman2.depth-item{
  transform:translateY(var(--depth-lift)) scale(var(--depth-scale)) !important;
  filter:
    drop-shadow(0 14px 24px rgba(0,0,0,.28))
    drop-shadow(10px 6px var(--trail-blur) rgba(120,175,255,var(--trail-opacity))) !important;
  animation:none !important;
}

/* 트로피는 원래 비트 + 스크롤 원근감을 하나의 transform으로 통합 */
.cup.depth-item{
  transform:translateY(var(--depth-lift)) scale(var(--depth-scale)) !important;
  filter:
    drop-shadow(0 12px 22px rgba(0,0,0,.30))
    drop-shadow(-7px 5px var(--trail-blur) rgba(255,205,95,var(--trail-opacity))) !important;
  animation:none !important;
}

/* 살짝 늦게 따라오는 잔상 같은 느낌을 shadow transition으로 만듦 */
.depth-item{
  transition:
    filter .22s ease-out,
    transform .12s linear !important;
}

/* 모바일: 화면 폭이 좁으므로 글 폭을 더 좁혀 세로형 광고 카피로 */
@media(max-width:700px){
  .hero{
    height:700px !important;
  }
  .hero-copy h1{
    width:82vw !important;
    max-width:480px !important;
    font-size:12.5px !important;
    line-height:1.68 !important;
  }
  .release .content p,
  .tournaments .content p,
  .custom .content p{
    width:80vw !important;
    max-width:475px !important;
    font-size:11.8px !important;
    line-height:1.72 !important;
  }
  .release{padding-bottom:60px !important}
  .tournaments{padding-bottom:50px !important}
  .custom{padding-bottom:68px !important}
}

@media(max-width:430px){
  .hero-copy h1{width:84vw !important}
  .release .content p,
  .tournaments .content p,
  .custom .content p{
    width:82vw !important;
    font-size:11.5px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .depth-item{
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  .hero-woman.depth-item,.release .hood.depth-item{
    transform:translateX(-50%) !important;
  }
}


/* =========================================================
   v13 — MYSTIC ATMOSPHERE
   신비감: 빛/안개/미세 글로우만 사용, 레이아웃과 배경 이미지는 유지
   ========================================================= */

/* 상단 로고가 여성 캐릭터보다 무조건 위에 보이도록 레이어 수정 */
.hero-logo{
  z-index:50 !important;
  top:25px !important;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.16))
    drop-shadow(0 0 22px rgba(90,150,255,.18)) !important;
}
.hero-woman{
  z-index:8 !important;
  top:172px !important;
}

/* 로고와 캐릭터 사이에 시각적 안전거리 */
.rng{z-index:52 !important}
.hero-copy{z-index:55 !important}
.demo-row{z-index:56 !important}

/* 섹션 전체에 아주 얇은 푸른/보라빛 안개.
   이미지 배경 자체를 움직이지 않고 overlay만 천천히 흐름 */
.scene::before{
  content:"";
  position:absolute;
  z-index:1;
  left:-12%;
  top:8%;
  width:124%;
  height:78%;
  pointer-events:none;
  opacity:.30;
  background:
    radial-gradient(ellipse at 24% 38%,rgba(70,105,255,.15),transparent 35%),
    radial-gradient(ellipse at 78% 52%,rgba(175,70,255,.11),transparent 33%),
    radial-gradient(ellipse at 52% 76%,rgba(70,205,255,.08),transparent 38%);
  filter:blur(28px);
  animation:mysticFog 9s ease-in-out infinite alternate;
}

/* 아래쪽으로 갈수록 검정 속에서 빛이 살짝 드러나는 느낌 */
.release::after,
.tournaments::after,
.custom::after{
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  transform:translateX(-50%);
  width:78%;
  height:210px;
  top:34%;
  pointer-events:none;
  background:radial-gradient(ellipse,rgba(100,125,255,.075),transparent 68%);
  filter:blur(18px);
  animation:mysticAura 5.8s ease-in-out infinite;
}

/* 게임 스크린은 스크롤 원근감에 신비로운 edge glow 추가 */
.phone.depth-item{
  border-radius:12px;
  box-shadow:
    0 0 0 1px rgba(180,205,255,.06),
    0 18px 40px rgba(0,0,0,.34),
    0 0 30px rgba(80,135,255,.055);
}

/* 인물 잔상은 v12보다 색을 부드럽게 */
.hero-woman.depth-item{
  filter:
    drop-shadow(0 12px 24px rgba(0,0,0,.22))
    drop-shadow(-8px 7px var(--trail-blur) rgba(100,155,255,calc(var(--trail-opacity) * .72))) !important;
}
.release .hood.depth-item{
  filter:
    drop-shadow(0 15px 25px rgba(0,0,0,.30))
    drop-shadow(9px 7px var(--trail-blur) rgba(145,105,255,calc(var(--trail-opacity) * .72))) !important;
}
.woman2.depth-item{
  filter:
    drop-shadow(0 14px 24px rgba(0,0,0,.28))
    drop-shadow(9px 6px var(--trail-blur) rgba(95,165,255,calc(var(--trail-opacity) * .70))) !important;
}

/* 카피가 나타날 때 아주 미세한 빛이 한번 지나감 */
[data-i18n]{
  text-shadow:
    0 2px 8px rgba(0,0,0,.95),
    0 0 14px rgba(110,150,255,.055) !important;
}
.reveal.show [data-i18n]{
  animation:textMysticIn .9s ease-out both;
}

/* 언어/버튼 영역은 신비감이 과해지지 않도록 선명하게 */
#langs,.beta,.stores,.demo-row,footer{
  position:relative;
  z-index:60 !important;
}

@keyframes mysticFog{
  0%{transform:translate3d(-1.5%,0,0) scale(1);opacity:.22}
  50%{opacity:.34}
  100%{transform:translate3d(1.5%,1.2%,0) scale(1.035);opacity:.27}
}
@keyframes mysticAura{
  0%,100%{opacity:.30;transform:translateX(-50%) scale(.96)}
  50%{opacity:.62;transform:translateX(-50%) scale(1.05)}
}
@keyframes textMysticIn{
  0%{opacity:.18;filter:blur(2.5px);transform:translateY(8px)}
  60%{opacity:1;filter:blur(0);transform:translateY(0)}
  100%{opacity:1;filter:none;transform:none}
}

@media(max-width:700px){
  /* 모바일 상단 로고와 여성의 충돌을 확실히 제거 */
  .hero-logo{
    top:20px !important;
    z-index:50 !important;
  }
  .hero-woman{
    top:165px !important;
    z-index:8 !important;
  }
  .scene::before{
    width:116%;
    left:-8%;
    opacity:.24;
    filter:blur(24px);
  }

/* 1. HTML과 BODY에서 가로 스크롤을 원천 차단 */
  html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden !important;
  }

  /* 2. 배경 아레나가 화면 폭을 넘어가지 않도록 제한 */
  .scene .arena {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* 3. 칩과 카드 이미지가 화면 밖으로 튀어나가지 않도록 크기 및 위치 조정 */
  .chips {
    width: 280px !important;
    right: -20px !important;
    max-width: none !important;
  }
  
  .cards {
    width: 280px !important;
    left: -20px !important;
    max-width: none !important;
  }
}

@media(max-width:430px){
  .hero-logo{top:30px !important}
  .hero-woman{top:158px !important}
}

@media(prefers-reduced-motion:reduce){
  .scene::before,
  .release::after,
  .tournaments::after,
  .custom::after,
  .reveal.show [data-i18n]{
    animation:none !important;
  }
}


/* =========================================================
   STORE NOTICE FIX
   Google Play / App Store의 '준비중입니다'는 평소 숨김.
   클릭했을 때만 짧게 표시 후 자동 사라짐.
   ========================================================= */

/* 기존 hover/focus 기반 준비중 표시가 있다면 강제로 무효화 */
[data-store]::before,
[data-store]::after{
  content:none !important;
  display:none !important;
}

/* 클릭 안내 배지 */
[data-store]{
  position:relative !important;
  overflow:visible !important;
}
.store-coming-badge{
  position:absolute;
  z-index:120;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translate(-50%,6px) scale(.96);
  min-width:max-content;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(8,10,16,.94);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:11px;
  line-height:1;
  font-style:normal;
  font-weight:500;
  letter-spacing:0;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  box-shadow:0 6px 18px rgba(0,0,0,.38),0 0 12px rgba(110,150,255,.10);
  transition:
    opacity .12s ease,
    transform .12s ease,
    visibility 0s linear .14s;
}
.store-coming-badge.show{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0) scale(1);
  transition:
    opacity .12s ease,
    transform .12s ease,
    visibility 0s linear 0s;
}

@media(max-width:700px){
  .store-coming-badge{
    bottom:calc(100% + 6px);
    font-size:10px;
    padding:5px 9px;
  }
}


/* =========================================================
   STORE NOTICE HOTFIX v2
   Legacy always-visible/hover badge is completely disabled.
   Only .store-coming-badge created by JS on click may appear.
   ========================================================= */
.coming-badge{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.stores:hover .coming-badge,
.stores:focus-within .coming-badge{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* =========================================================
   데모 클릭 경고 팝업 스타일
   ========================================================= */
.demo-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.demo-popup-overlay.active {
  opacity: 1;
  visibility: visible;
}

.demo-popup-content {
  position: relative;
  max-width: 85vw;
  max-height: 85vh;
  text-align: center;
}

.demo-popup-content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}