/* ==================================================================
   곤충 절벽 등반 — 9:16 세로 프레임 고정, 1080x1920 디자인 기준
================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#07100c;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif}

#frame{position:fixed;inset:0;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,#16281c,#050b08 70%)}

#stage{position:absolute;top:50%;left:50%;width:1080px;height:1920px;
  transform-origin:center center;overflow:hidden;
  background:#0b1610;box-shadow:0 0 90px rgba(0,0,0,.75)}

.screen{position:absolute;inset:0;display:none}
.screen.active{display:block}

.bg-still{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:saturate(.95)}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(0,0,0,.72) 100%)}
.vignette.strong{background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.25) 20%,rgba(0,0,0,.86) 100%)}

/* ---------------- 프리로더 ---------------- */
#scr-loading{background:radial-gradient(circle at 50% 40%,#1b3324,#060d09 75%)}
.load-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:720px;text-align:center}
.load-logo{width:600px;margin-bottom:70px;filter:drop-shadow(0 12px 30px rgba(0,0,0,.6))}
.bar{width:100%;height:26px;border-radius:14px;background:rgba(0,0,0,.5);
  border:3px solid #6f5a33;overflow:hidden}
.bar-fill{height:100%;width:0;border-radius:11px;transition:width .18s ease;
  background:linear-gradient(90deg,#8ede4a,#ffd94a)}
.bar-label{margin-top:26px;font-size:34px;color:#e6dfbe;letter-spacing:.02em}

/* ---------------- 0-A 타이틀 ---------------- */
.title-logo{position:absolute;top:120px;left:50%;transform:translateX(-50%);
  width:740px;filter:drop-shadow(0 16px 34px rgba(0,0,0,.7));
  animation:float 3.6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-18px)}}

.silhouettes{position:absolute;top:900px;left:0;width:100%;height:290px;
  display:flex;justify-content:center;align-items:flex-end;gap:10px}
.silhouettes img{width:250px;filter:brightness(0) drop-shadow(0 0 24px rgba(140,220,120,.35));
  opacity:0;animation:cutin 2.2s ease-in-out infinite}
@keyframes cutin{
  0%{opacity:0;transform:translateY(26px) scale(.9)}
  18%{opacity:.85;transform:translateY(0) scale(1)}
  55%{opacity:.85}
  75%{opacity:0}
  100%{opacity:0}}

/* 화면 터치.png 는 정사각 캔버스라 상하 여백이 크다 — 여백만큼 아래로 내려 배치 */
.touch-start{position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);
  width:840px;animation:blink 1.5s ease-in-out infinite;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.6))}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.32}}

.yt-small{position:absolute;top:640px;left:34px;width:168px;height:118px;
  background:none;border:0;cursor:pointer;padding:0;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.6));animation:ytBob 2.8s ease-in-out infinite}
.yt-small img{width:100%;height:100%;object-fit:contain;display:block}
@keyframes ytBob{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.sound-toggle{position:absolute;top:40px;right:40px;width:96px;height:96px;border-radius:50%;
  background:rgba(10,24,16,.72);border:4px solid #7d6a3c;color:#ffd94a;
  font-size:46px;line-height:1;cursor:pointer;z-index:30}
.sound-toggle.off{color:#8a8a8a}

/* ---------------- 0-B 캐릭터 선택 ---------------- */
.sel-title{position:absolute;top:96px;left:0;width:100%;text-align:center;
  font-size:78px;font-weight:900;color:#f6e7b0;letter-spacing:.02em;
  text-shadow:0 6px 0 #3b2a12,0 12px 26px rgba(0,0,0,.75)}
.sel-note{position:absolute;top:206px;left:50%;transform:translateX(-50%);width:640px;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.7));animation:blink 2s ease-in-out infinite}

.card-grid{position:absolute;top:320px;left:50%;transform:translateX(-50%);
  width:960px;display:grid;grid-template-columns:1fr 1fr;gap:26px 30px}
.card{position:relative;background:none;border:0;padding:0;cursor:pointer;
  aspect-ratio:1254/1500;transition:transform .18s ease,filter .25s ease,opacity .25s ease}
.card .face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.65));transition:opacity .3s ease}
.card .face.gold{opacity:0}
.card:active{transform:scale(.96)}
.card.chosen{transform:scale(1.06);z-index:5;
  filter:drop-shadow(0 0 40px rgba(255,220,120,.85))}
.card.is-gold .face{opacity:0}
.card.is-gold .face.gold{opacity:1}
.card.dimmed{opacity:.32;filter:grayscale(.6) brightness(.7)}

/* ---------------- 2 플레이 ---------------- */
#game{position:absolute;inset:0;width:1080px;height:1920px;display:block}

.hud{position:absolute;top:28px;left:28px;width:390px;
  opacity:0;transform:translateY(-24px);transition:opacity .35s ease,transform .35s ease;
  pointer-events:none;z-index:12}
.hud.on{opacity:1;transform:none}
.hud>img{width:100%;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.6))}
/* 콤보.png 의 슬롯 위치에 값을 얹는다 (원본 727x762 기준 비율) */
.hud-alt{position:absolute;left:15%;top:34%;width:70%;height:20%;
  display:flex;align-items:center;justify-content:center;
  font-size:62px;font-weight:900;color:#f4e9c0;text-shadow:0 4px 8px rgba(0,0,0,.8)}
.hud-alt em{font-size:34px;font-style:normal;margin-left:6px;color:#c8d9a6}
.hud-combo{position:absolute;left:25%;top:65.5%;width:50%;height:11%;
  display:flex;align-items:center;justify-content:center;
  font-size:50px;font-weight:900;color:#ffd94a;text-shadow:0 4px 8px rgba(0,0,0,.8)}
.hud-combo.bump{animation:bump .28s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.45);color:#fff}100%{transform:scale(1)}}

/* PHASE 1 안내 */
.ready-layer{position:absolute;inset:0;z-index:15;pointer-events:none;
  opacity:0;transition:opacity .3s ease}
.ready-layer.on{opacity:1}
.guide-board{position:absolute;top:300px;left:50%;transform:translateX(-50%);
  width:880px;filter:drop-shadow(0 14px 28px rgba(0,0,0,.7));
  animation:slideDown .45s cubic-bezier(.2,1.3,.5,1) both}
@keyframes slideUp{from{transform:translateX(-50%) translateY(90px);opacity:0}
  to{transform:translateX(-50%) translateY(0);opacity:1}}
@keyframes slideDown{from{transform:translateX(-50%) translateY(-90px);opacity:0}
  to{transform:translateX(-50%) translateY(0);opacity:1}}

.count-holder{position:absolute;top:820px;left:0;width:100%;height:320px;
  display:grid;place-items:center;z-index:16}
.count-num{width:230px;filter:drop-shadow(0 12px 26px rgba(0,0,0,.8));
  animation:countPop .75s ease-out both}
@keyframes countPop{0%{transform:scale(2.1);opacity:0}
  22%{transform:scale(1);opacity:1}80%{transform:scale(1);opacity:1}
  100%{transform:scale(.82);opacity:0}}
.go-text{font-size:200px;font-weight:900;color:#ffd94a;
  text-shadow:0 8px 0 #6a3f10,0 16px 40px rgba(0,0,0,.8);
  animation:goPop .5s ease-out both}
@keyframes goPop{0%{transform:scale(.4);opacity:0}
  35%{transform:scale(1.25);opacity:1}100%{transform:scale(1.7);opacity:0}}

/* 좌우 탭존 */
.tapzones{position:absolute;inset:0;z-index:10;opacity:0;transition:opacity .35s ease}
.tapzones.on{opacity:1}
.tapzone{position:absolute;top:0;bottom:0;width:50%;display:flex;
  align-items:flex-end;justify-content:center;padding-bottom:70px;cursor:pointer}
.tapzone.left{left:0}
.tapzone.right{right:0}
.tapzone img{width:300px;opacity:.82;transition:transform .1s ease,opacity .1s ease;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.6))}
.tapzone.hit img{transform:scale(.88);opacity:1}

.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:20}

/* ---------------- 3 결과 ---------------- */
.result-board{position:absolute;top:200px;left:50%;transform:translateX(-50%);width:830px}
.result-board.in{animation:boardIn .45s cubic-bezier(.2,1.2,.4,1) both}
@keyframes boardIn{from{transform:translateX(-50%) translateY(120px);opacity:0}
  to{transform:translateX(-50%) translateY(0);opacity:1}}
.board-frame{width:100%;display:block;filter:drop-shadow(0 20px 40px rgba(0,0,0,.7))}

/* 도달 높이_테두리.png (721x1086) 의 슬롯 비율에 맞춰 배치 */
.rs-alt{position:absolute;left:16%;top:25.5%;width:68%;height:12%;
  display:flex;align-items:center;justify-content:center;
  font-size:104px;font-weight:900;color:#f6ecc4;text-shadow:0 6px 12px rgba(0,0,0,.85);
  animation:pop .5s .3s ease-out both}
.rs-alt em{font-size:52px;font-style:normal;margin-left:8px;color:#bfd39a}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

.rs-best{position:absolute;left:14%;top:47.5%;width:44%;height:8%;
  display:flex;align-items:center;justify-content:center;
  font-size:56px;font-weight:800;color:#e8dfae;text-shadow:0 4px 8px rgba(0,0,0,.8)}
.rs-new{position:absolute;left:70%;top:27%;width:26%;
  text-align:center;font-size:38px;font-weight:900;color:#ff6b6b;opacity:0;
  text-shadow:0 3px 0 #4a1010,0 0 18px rgba(255,120,120,.7)}
.rs-new.on{opacity:1;animation:blink 1s ease-in-out infinite}

.rs-combo{position:absolute;left:53%;top:58.6%;width:34%;
  font-size:52px;font-weight:900;color:#ffd94a;text-shadow:0 4px 8px rgba(0,0,0,.8);
  animation:pop .5s .5s ease-out both}

.rs-medal{position:absolute;left:50%;top:70%;width:190px;transform:translateX(-50%) scale(.4);
  opacity:0;transition:opacity .4s ease,transform .5s cubic-bezier(.2,1.4,.4,1)}
.rs-medal.on{opacity:1;transform:translateX(-50%) scale(1)}
.rs-medal-label{position:absolute;left:0;top:88%;width:100%;text-align:center;
  font-size:40px;font-weight:900;color:#ffd94a;opacity:0;transition:opacity .4s .2s ease;
  text-shadow:0 4px 10px rgba(0,0,0,.9)}
.rs-medal-label.on{opacity:1}

.result-btns{position:absolute;bottom:150px;left:0;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:34px}
.btn-img{background:none;border:0;padding:0;cursor:pointer;
  animation:btnIn .4s .8s cubic-bezier(.2,1.3,.5,1) both}
.btn-img img{display:block;filter:drop-shadow(0 10px 20px rgba(0,0,0,.65))}
.btn-img:active{transform:scale(.94)}
.retry img{width:480px}
.sub img{width:400px}
.sub.pulse{animation:btnIn .4s .8s cubic-bezier(.2,1.3,.5,1) both,
  pulse 1.9s 1.3s ease-in-out infinite}
@keyframes btnIn{from{transform:translateY(70px);opacity:0}
  to{transform:translateY(0);opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

.btn-home{position:absolute;top:44px;right:40px;padding:18px 34px;border-radius:44px;
  background:rgba(8,20,14,.7);border:3px solid #7d6a3c;color:#e8dfae;
  font-size:34px;font-weight:700;cursor:pointer}

/* ---------------- 오버레이 ---------------- */
.gold-overlay{position:absolute;inset:0;z-index:40;pointer-events:none;
  opacity:0;transition:opacity .3s ease;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 45%,rgba(255,220,110,.55),rgba(120,80,0,.35) 60%,transparent 78%)}
.gold-overlay.on{opacity:1}
.gold-rays{position:absolute;width:2400px;height:2400px;
  background:conic-gradient(from 0deg,rgba(255,240,170,.55) 0 3deg,transparent 3deg 15deg);
  mix-blend-mode:screen;opacity:.75;animation:spin 9s linear infinite;
  animation-play-state:paused}
.gold-overlay.on .gold-rays{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.gold-text{position:absolute;top:200px;left:0;width:100%;text-align:center;font-size:88px;font-weight:900;color:#fff6cf;
  text-shadow:0 0 30px #ffcc44,0 8px 0 #8a5a00,0 16px 34px rgba(0,0,0,.7);
  animation:goldPop .6s cubic-bezier(.2,1.5,.4,1) both;white-space:nowrap}
@keyframes goldPop{from{transform:scale(.3) rotate(-8deg);opacity:0}
  to{transform:scale(1) rotate(0);opacity:1}}

.fader{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;
  transition:opacity .3s ease;z-index:60}
.fader.on{opacity:1}

.confetti{position:absolute;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.confetti i{position:absolute;top:-40px;width:20px;height:32px;border-radius:3px;
  animation:fallDown linear forwards}
@keyframes fallDown{
  0%{transform:translateY(0) rotate(0);opacity:1}
  100%{transform:translateY(2000px) rotate(720deg);opacity:.2}}