*{box-sizing:border-box}body{margin:0;background:#f8f5ec;color:#444b45;font-family:Arial,'Malgun Gothic',sans-serif}header{height:77px;border-bottom:1px solid #e7e6d9;display:flex;align-items:center;justify-content:space-between;padding:0 5%}.brand{font-weight:800;letter-spacing:2px;font-size:12px;text-decoration:none;color:inherit;display:flex;align-items:center;gap:12px}.logo{font-size:30px;color:#80a884}.edition{font-size:10px;letter-spacing:2px;color:#8c9182}.edition b{background:#e9eddf;padding:8px;border-radius:8px;margin-left:8px}main{max-width:1480px;margin:auto;padding:36px 5% 20px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.eyebrow{font-size:10px;letter-spacing:2.4px;color:#87997d;font-weight:800}h1{font-size:36px;letter-spacing:-1.8px;margin:11px 0 10px}h1 em{font-style:normal;color:#7c9c72}p{font-size:14px;color:#8a8d80;line-height:1.9;margin:0}.spark{font-size:35px;color:#d6ac68;display:inline-block;transform:rotate(12deg);margin-left:12px}.stamp{font-size:11px;line-height:1.9;transform:rotate(7deg);border:1px dashed #b9c4aa;border-radius:50%;width:105px;height:105px;text-align:center;padding-top:18px;color:#8c9d7c}.stamp span{display:block;font-size:21px}.game{position:relative;border:7px solid #fffdf8;border-radius:22px;overflow:hidden;box-shadow:0 12px 40px #606a4714;background:#e7f1ed;aspect-ratio:16/9}canvas{width:100%;height:100%;display:block;outline:none}.hud{position:absolute;top:19px;left:22px;right:22px;display:flex;justify-content:space-between;pointer-events:none;gap:10px;z-index:5;transition:padding .15s ease}.pill,button{border:1px solid #fff7;background:#fffdf0ed;box-shadow:0 3px 0 #999c7920;border-radius:13px;color:#64715a}.pill{padding:12px 18px;display:flex;flex-direction:column;gap:4px;font-size:14px}.tiny{font-size:8px;letter-spacing:2px;color:#a3ab91}.hudRight{display:flex;align-items:flex-start;gap:9px}.hudRight button{height:44px;min-width:44px;pointer-events:auto;font-size:16px;padding:0 12px;cursor:pointer}.coins,.specialCoins{flex-direction:row;align-items:center;height:44px;font-size:18px;gap:7px}.coins{color:#c49b41}.coins span,.specialCoins span{font-size:12px;color:#a6a592}.specialCoins{color:#d96b27;background:#fff8ebfa;border:1px solid #f3d79b}.specialCoins em{font-style:normal;font-size:11px;color:#b85d19;font-weight:800}.specialCoins.pending{background:#fff0cf;box-shadow:0 0 0 2px #f0b44988}.overlay{position:absolute;inset:0;z-index:14;display:grid;place-items:center;background:#eff3e742;backdrop-filter:blur(2px)}.overlay[hidden],.story[hidden],#launchScene[hidden],#regionTransition[hidden],.debugHud[hidden],.mobileSettingsModal[hidden]{display:none !important}.intro{background:#fffdf3f5;border:2px solid white;border-radius:30px;padding:34px 45px;text-align:center;box-shadow:0 14px 45px #6c80671f;max-width:90%}h2{font-size:28px;margin:14px 0}.intro p{font-size:14px;line-height:1.9}.primary{display:block;width:100%;margin:24px 0 15px;padding:16px 24px;background:#819f71;color:white;font-size:16px;font-weight:bold;border:0;box-shadow:0 4px 0 #637f56;cursor:pointer}.primary:disabled{opacity:.6;cursor:wait}.secondary{padding:9px 20px;margin-bottom:15px;cursor:pointer}.modalKeys{font-size:10px;color:#9c9d8a;letter-spacing:1px}.modalKeys span{margin:0 9px}.below{padding:18px 5px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}.keys{display:flex;flex-wrap:wrap;gap:18px;font-size:11px;color:#8b9182}.keys>span{display:flex;align-items:center;gap:4px}kbd{background:#fffdf8;border:1px solid #dedfd2;border-bottom:3px solid #dedfd2;border-radius:5px;padding:4px 6px;font-size:10px}.note{font-size:11px;color:#a1a48f}.progress{position:absolute;bottom:0;left:0;right:0;height:4px;background:#ffffff66;z-index:5}.progress i{display:block;height:100%;width:0;background:#92ad7d;transition:width .2s}footer{display:flex;justify-content:space-between;border-top:1px solid #e5e6d9;padding-top:17px;font-size:10px;color:#a1a58f}footer i{display:inline-block;width:6px;height:6px;background:#98ad83;border-radius:50%;margin-right:6px}#toast{position:absolute;top:132px;width:100%;text-align:center;color:#5c8058;font-weight:bold;font-size:15px;pointer-events:none;text-shadow:0 2px #fff;opacity:0;transition:opacity .2s;z-index:6}.game:fullscreen{border:0;border-radius:0;width:100vw;height:100vh;background:#e6efe8;aspect-ratio:auto}.game:fullscreen canvas{object-fit:contain}.game:fullscreen .hud{top:25px}@media(max-width:800px){header{height:58px}.brand{font-size:9px;letter-spacing:1px}main{padding:25px 3%}.stamp{display:none}h1{font-size:25px}.heading p{font-size:12px}.game{border-width:4px;border-radius:14px}.hud{top:8px;left:10px;right:10px}.pill{padding:5px 9px;font-size:10px}.tiny{display:none}.hudRight button{height:30px;min-width:30px;font-size:12px;padding:0 7px}.coins,.specialCoins{height:30px;font-size:12px}.intro{padding:14px 20px}h2{font-size:19px;margin:6px 0}.intro p{font-size:11px;line-height:1.55}.primary{margin:10px 0;padding:10px}.modalKeys{font-size:8px}.intro .eyebrow{font-size:8px}.note{display:none}}

.practiceHUD{position:absolute;bottom:20px;left:23px;display:flex;flex-direction:column;gap:5px;padding:10px 14px;background:#fffdefe8;border-radius:12px;color:#75866b;font-size:11px;pointer-events:none;z-index:5}.practiceHUD>span:first-child{font-weight:800}.holdTrack{height:4px;background:#dfe5cc;width:170px;border-radius:3px;overflow:hidden}.holdTrack i{display:block;height:100%;background:#d2ab61;width:0}.debugHud{position:absolute;top:76px;left:22px;padding:8px 12px;background:#1d2620cc;color:#e8f5e9;border-radius:10px;font:11px/1.45 monospace;pointer-events:none;z-index:15;white-space:pre}.practiceNav{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:16px 0 0}.practiceNav>span{font-size:11px;color:#8c967b;margin-right:5px}.practiceNav button{padding:9px 12px;cursor:pointer;font-size:11px;border:1px solid #e0e3d2}.practiceNav button:hover{background:#e5edd9}.badges{display:flex;gap:12px;font-size:10px;color:#82976f;margin-left:auto}.practiceNav button:focus-visible{outline:2px solid #83a577;outline-offset:2px}@media(max-width:800px){.practiceHUD{bottom:10px;left:10px;padding:6px 9px;font-size:9px}.practiceNav{gap:6px}.badges{margin-left:0;width:100%}.practiceNav button{padding:8px;font-size:10px}.holdTrack{width:120px}}
.eventClock{height:44px;font-variant-numeric:tabular-nums;font-weight:800;min-width:78px;justify-content:center;text-align:center}.eventClock.urgent{color:#b65a49;background:#fff0db}.story{position:absolute;inset:0;z-index:12;cursor:pointer;outline:none;background:#f5edda;overflow:hidden}.story>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.story .storyMotion{-webkit-mask-image:linear-gradient(black 52%,transparent 70%);mask-image:linear-gradient(black 52%,transparent 70%);animation:cartoonRock .32s steps(2,end) infinite alternate;transform-origin:50% 72%;scale:1.003}.storyText{position:absolute;left:20.7%;top:81.3%;width:59%;height:10.5%;background:linear-gradient(#f7f7f7,#fafafa);display:flex;align-items:center;justify-content:flex-start;padding:0 1%;font-family:'ONE Mobile POP','Malgun Gothic',sans-serif;font-size:clamp(10px,1.45vw,24px);font-weight:400;font-synthesis:none;line-height:1.5;text-align:left;color:#303030;word-break:keep-all;border-radius:12px}.storyHint{position:absolute;bottom:1%;left:0;right:0;text-align:center;font-size:clamp(9px,.8vw,13px);color:#fff;text-shadow:0 1px 4px #333;background:#35334399;width:max-content;max-width:90%;margin:auto;padding:4px 12px;border-radius:20px}#launchScene{position:absolute;inset:0;z-index:11;background:#f9f3dd35;display:grid;place-items:center;cursor:pointer}#launchScene img{width:94%;animation:popIn .45s cubic-bezier(.2,1.5,.4,1) both}#launchWord{position:absolute;top:14%;font-size:clamp(20px,5vw,70px);color:#fff9d8;text-shadow:3px 4px #769b66,-2px -2px #769b66;font-weight:1000}.starting #launchWord{animation:popIn .3s both}@keyframes cartoonRock{from{transform:translateX(-1.2px) rotate(-.15deg)}to{transform:translateX(1.2px) rotate(.15deg)}}@keyframes popIn{from{opacity:0;transform:scale(.25) translateY(50px)}to{opacity:1;transform:scale(1) translateY(0)}}.game:fullscreen .story,.game:fullscreen #launchScene,.game:fullscreen #regionTransition{inset:auto;left:50%;top:50%;width:min(100vw,177.7778vh);height:min(100vh,56.25vw);transform:translate(-50%,-50%)}@media(prefers-reduced-motion:reduce){.story .storyMotion{animation:none}#launchScene img{animation:none}}@media(max-width:800px){.eventClock{height:30px;min-width:50px}.hudRight{gap:4px}}

@font-face{font-family:'ONE Mobile POP';src:url('assets/fonts/one-mobile-pop.otf') format('opentype');font-weight:400;font-style:normal;font-display:block}

#regionTransition{position:absolute;inset:0;z-index:10;background:transparent;display:grid;place-items:center;pointer-events:auto;overflow:hidden}#transitionCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.transitionCaption{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#54694b;background:#fffdf6e6;padding:22px 42px;border-radius:28px;box-shadow:0 10px 32px #4e634824;opacity:0;transform:scale(.96);transition:opacity .18s ease,transform .18s ease;pointer-events:none}.transitionCaption.visible{opacity:1;transform:scale(1)}#transitionName{font-size:clamp(24px,4vw,54px);font-family:'ONE Mobile POP',sans-serif}#regionTransition span{font-size:12px;letter-spacing:4px}#regionTransition small{font-size:14px}.hud .pill:first-child{max-width:55%}.hud #zoneTitle{font-size:clamp(10px,1vw,15px)}

#encounterStatus{position:absolute;top:88px;left:50%;transform:translateX(-50%);color:#654d3c;background:#fff5d9e8;border-radius:14px;padding:7px 18px;font-size:14px;pointer-events:none;white-space:nowrap;z-index:6}#encounterStatus:empty{display:none}.encounterNav{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0;color:#8b8b78;font-size:12px}.encounterNav button{border:1px solid #e6ddcd;background:#fff9ee;color:#6e7862;border-radius:13px;padding:9px 13px;cursor:pointer}.encounterNav small{margin-left:auto}@media(max-width:700px){#encounterStatus{top:60px;font-size:10px;padding:4px 8px}.encounterNav small{margin-left:0}#toast{top:85px;font-size:10px}}

.hudIcon{display:inline-block;object-fit:contain;vertical-align:middle;filter:drop-shadow(0 1px 2px rgba(60,40,15,.18))}.candyIcon{width:24px;height:24px}.crayonIcon{width:27px;height:27px}


.modeBtnRow{display:flex;gap:12px;margin:22px 0 14px;flex-wrap:wrap;justify-content:center}
.modeBtnRow .primary{flex:1 1 240px;margin:0}
.challengePrimary{flex:1 1 240px;padding:16px 22px;background:#3b6e52;color:#fffdf6;font-size:15px;font-weight:800;border:0;border-radius:13px;box-shadow:0 4px 0 #264a36;cursor:pointer}
.challengePrimary:hover{background:#468060}
.challengeHud{min-width:145px;background:#f2faefee;border:1px solid #b7dfb9;color:#2f5e41;align-items:center;text-align:center;padding:8px 14px}
.challengeHud b{font-size:17px;font-variant-numeric:tabular-nums}
.challengeHud small{font-size:10px;color:#527961}
.challengeNav{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:14px 16px;margin-top:12px;background:#eef6ec;border:1px solid #cfe2c9;border-radius:14px}
.challengeNav>span{font-weight:800;font-size:12px;color:#356346;margin-right:6px}
.challengeNav button{padding:8px 13px;font-size:11px;border:1px solid #bfd6b8;background:#fffef8;color:#3d5a45;cursor:pointer;border-radius:10px}
.challengeNav button:hover{background:#e2f0dc}
.challengeNav .backStoryBtn{margin-left:auto;background:#fff4e6;border-color:#ebcfa8;color:#7c5228;font-weight:700}
.chQuickBtn{background:#e6f4ea !important;border-color:#b7dfb9 !important;color:#2f5e41 !important;font-weight:800}
.challengeHud[hidden],.challengeNav[hidden],.eventClock[hidden],.specialCoins[hidden],.coins[hidden],.practiceNav[hidden],.encounterNav[hidden]{display:none !important}

.modalSubBtnRow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.modalSubBtnRow .secondary{margin-bottom:0;font-size:12px;padding:7px 14px}
.backStoryModalBtn{background:#fff4e6 !important;border-color:#ebcfa8 !important;color:#7c5228 !important;font-weight:700}
.backStoryModalBtn[hidden]{display:none !important}


/* ============================================================================
   TEST25 (FIX8.3) Mobile 360° Joystick, Controller Options & View State Machine
   ============================================================================ */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --vvh: 100dvh;
  --vvw: 100vw;
  --joy-size: 126px;
  --joy-knob-size: 52px;
}

.gameViewport{
  position:relative;
  width:100%;
  height:100%;
  aspect-ratio:16/9;
  max-width:100%;
  max-height:100%;
  margin:auto;
  overflow:hidden;
}

/* Native Fullscreen & CSS Landscape Focus Mode (GAME_LANDSCAPE) */
.game:fullscreen,
body.mobile-game-landscape .game{
  position:fixed !important;
  inset:0 !important;
  z-index:900 !important;
  border:0 !important;
  border-radius:0 !important;
  width:var(--vvw, 100vw) !important;
  height:var(--vvh, 100dvh) !important;
  background:#14171c !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  aspect-ratio:auto !important;
  box-shadow:none !important;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  overscroll-behavior:contain;
}

.game:fullscreen .gameViewport,
body.mobile-game-landscape .game .gameViewport{
  width:min(calc(var(--vvw, 100vw) - var(--safe-left) - var(--safe-right)), calc(var(--vvh, 100dvh) * 16 / 9));
  height:min(var(--vvh, 100dvh), calc((var(--vvw, 100vw) - var(--safe-left) - var(--safe-right)) * 9 / 16));
  aspect-ratio:16/9;
}

/* Only lock html/body scroll while in GAME_LANDSCAPE */
html.mobile-landscape-lock,
body.mobile-game-landscape{
  overflow:hidden !important;
  overscroll-behavior:none !important;
}

/* In WEB_PORTRAIT, explicitly allow normal webpage vertical scrolling & text selection */
body.mobile-web-portrait{
  overflow-x:hidden;
  overflow-y:auto !important;
  touch-action:pan-y !important;
}

body.mobile-web-portrait .game{
  touch-action:pan-y !important;
}

/* Virtual Touch Controls Container */
.mobileControls{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:9;
  display:none;
}

.mobileOptBtn,
.mobileOptModalBtn,
.landscapeStartBtn{
  display:none;
}

@media(pointer:coarse), (hover:none), (max-width:1024px){
  .mobileControls{
    display:block;
  }
  .mobileOptBtn,
  .mobileOptModalBtn,
  .landscapeStartBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .below .keys{
    display:none;
  }
}

/* Explicit override class when mobile mode is active */
body.is-mobile-device .mobileControls{
  display:block;
}
body.is-mobile-device .mobileOptBtn,
body.is-mobile-device .mobileOptModalBtn,
body.is-mobile-device .landscapeStartBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Joystick Size Variants */
.mobileControls[data-stick-size="small"]{
  --joy-size: 106px;
  --joy-knob-size: 44px;
}
.mobileControls[data-stick-size="medium"]{
  --joy-size: 124px;
  --joy-knob-size: 52px;
}
.mobileControls[data-stick-size="large"]{
  --joy-size: 142px;
  --joy-knob-size: 58px;
}

/* Joystick Container Position:
   - Default (stick-pos="bottom", btn-swap="normal"): Bottom-Left
   - stick-pos="top", btn-swap="normal": Top-Left (below top HUD zone pill!)
   - stick-pos="bottom", btn-swap="swapped": Bottom-Right
   - stick-pos="top", btn-swap="swapped": Top-Right (below top-right HUD pills!)
*/
.vjoy-container{
  position:absolute;
  left:calc(18px + var(--safe-left));
  bottom:calc(16px + var(--safe-bottom));
  width:var(--joy-size);
  height:var(--joy-size);
  pointer-events:none;
  z-index:10;
  transition:top 0.14s ease, bottom 0.14s ease, left 0.14s ease, right 0.14s ease;
}

/* Top Vertical Position for Joystick — offset safely below Top HUD! */
.mobileControls[data-stick-pos="top"] .vjoy-container{
  bottom:auto;
  top:calc(54px + var(--safe-top));
}

/* Left/Right Button Swap ('버튼 좌우 배치 바꾸기' = 반전) */
.mobileControls[data-btn-swap="swapped"] .vjoy-container{
  left:auto;
  right:calc(18px + var(--safe-right));
}

/* When stick is at Top-Left or Top-Right, compact HUD slightly on small mobile screens to guarantee zero overlap */
@media(max-height:520px), (max-width:960px){
  .hud{
    top:6px !important;
    left:10px !important;
    right:10px !important;
  }
  .hud .pill{
    padding:4px 8px;
    font-size:10px;
  }
  .hud .coins, .hud .specialCoins, .hud .eventClock, .hud .hudRight button{
    height:28px;
    font-size:11px;
  }
  .hud .challengeHud{
    padding:3px 9px;
    min-width:118px;
  }
  .hud .challengeHud b{
    font-size:13px;
  }
  .mobileControls[data-stick-pos="top"] .vjoy-container{
    top:calc(46px + var(--safe-top));
  }
}

.vjoy-base{
  position:relative;
  width:100%;
  height:100%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255, 253, 244, 0.34) 0%, rgba(44, 58, 42, 0.44) 72%, rgba(28, 38, 28, 0.62) 100%);
  border:2.5px solid rgba(255, 253, 242, 0.85);
  box-shadow:0 6px 18px rgba(18, 25, 16, 0.28), inset 0 0 12px rgba(255, 255, 255, 0.22);
  pointer-events:auto;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.vjoy-base.active{
  border-color:rgba(245, 206, 118, 0.98);
  box-shadow:0 0 0 3px rgba(245, 206, 118, 0.32), 0 6px 18px rgba(18, 25, 16, 0.34);
}

.vjoy-deadzone{
  position:absolute;
  width:36%;
  height:36%;
  border-radius:50%;
  border:1.5px dashed rgba(255, 253, 240, 0.42);
  pointer-events:none;
}

.vjoy-dir{
  position:absolute;
  color:rgba(255, 253, 245, 0.72);
  font-size:11px;
  font-weight:900;
  pointer-events:none;
  text-shadow:0 1px 2px rgba(0, 0, 0, 0.45);
  transition:color 0.08s ease, transform 0.08s ease;
}
.vjoy-dir-u{ top:6px; left:50%; transform:translateX(-50%); opacity:0.35; }
.vjoy-dir-d{ bottom:6px; left:50%; transform:translateX(-50%); }
.vjoy-dir-l{ left:7px; top:50%; transform:translateY(-50%); }
.vjoy-dir-r{ right:7px; top:50%; transform:translateY(-50%); }

.vjoy-base[data-dir-left="true"] .vjoy-dir-l,
.vjoy-base[data-dir-right="true"] .vjoy-dir-r,
.vjoy-base[data-dir-down="true"] .vjoy-dir-d{
  color:#ffe066;
  transform:scale(1.25) translate(0, 0);
}
.vjoy-base[data-dir-left="true"] .vjoy-dir-l{ transform:translateY(-50%) scale(1.28); }
.vjoy-base[data-dir-right="true"] .vjoy-dir-r{ transform:translateY(-50%) scale(1.28); }
.vjoy-base[data-dir-down="true"] .vjoy-dir-d{ transform:translateX(-50%) scale(1.28); }

.vjoy-knob{
  position:relative;
  width:var(--joy-knob-size);
  height:var(--joy-knob-size);
  border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #fffef8 0%, #e9f2e3 55%, #b8d1ae 100%);
  border:2.5px solid #ffffff;
  box-shadow:0 4px 10px rgba(20, 30, 18, 0.38);
  pointer-events:none;
  transform:translate3d(0px, 0px, 0px);
  will-change:transform;
}

.vjoy-base.active .vjoy-knob{
  background:radial-gradient(circle at 35% 32%, #fff9db 0%, #ffd43b 62%, #f08c00 100%);
}

/* Action Buttons Pad (Jump & Dash) */
.vpad-right{
  position:absolute;
  right:calc(18px + var(--safe-right));
  bottom:calc(16px + var(--safe-bottom));
  display:flex;
  gap:14px;
  align-items:flex-end;
  pointer-events:none;
  z-index:10;
  transition:left 0.14s ease, right 0.14s ease, bottom 0.14s ease;
}

/* When swapped ('버튼 좌우 배치 바꾸기' = 반전), move Action Pad to Bottom-Left */
.mobileControls[data-btn-swap="swapped"] .vpad-right{
  right:auto;
  left:calc(18px + var(--safe-left));
}

.vbtn{
  width:58px;
  height:58px;
  border-radius:50%;
  background:rgba(255, 253, 240, 0.78);
  border:2px solid rgba(255, 255, 255, 0.85);
  box-shadow:0 4px 12px rgba(35, 45, 30, 0.22);
  color:#3b4737;
  font-family:'ONE Mobile POP', Arial, sans-serif;
  font-size:20px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
  transition:transform 0.06s ease, background 0.06s ease;
}

.vbtn:active, .vbtn.active{
  transform:scale(0.90);
  background:rgba(240, 195, 105, 0.95);
  color:#232b20;
}

.vbtn-action{
  width:70px;
  height:70px;
  font-size:16px;
  letter-spacing:0.5px;
}

.vbtn-jump{
  background:rgba(126, 185, 108, 0.88);
  color:#ffffff;
  border-color:rgba(255, 255, 255, 0.95);
}

.vbtn-jump:active, .vbtn-jump.active{
  background:rgba(88, 153, 68, 0.98);
}

.vbtn-dash{
  background:rgba(235, 168, 84, 0.88);
  color:#ffffff;
  border-color:rgba(255, 255, 255, 0.95);
}

.vbtn-dash:active, .vbtn-dash.active{
  background:rgba(214, 134, 38, 0.98);
}

/* Mobile Controller Settings Modal */
.mobileSettingsModal{
  position:absolute;
  inset:0;
  z-index:22;
  background:rgba(18, 24, 20, 0.62);
  backdrop-filter:blur(3px);
  display:grid;
  place-items:center;
  padding:12px;
  pointer-events:auto;
}

.mobileSettingsCard{
  background:#fffdf6;
  border:2px solid #e2e8d5;
  border-radius:20px;
  padding:16px 20px;
  width:min(460px, 94%);
  max-height:92%;
  overflow-y:auto;
  box-shadow:0 14px 36px rgba(20, 30, 18, 0.32);
  color:#3c4738;
  display:flex;
  flex-direction:column;
  gap:11px;
}

.mobileSettingsHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e9ecdf;
  padding-bottom:8px;
}

.mobileSettingsHeader strong{
  font-size:15px;
  color:#354f39;
}

.closeMobileOptBtn{
  height:28px;
  min-width:28px;
  padding:0 8px;
  font-size:13px;
  border-radius:8px;
  cursor:pointer;
}

.mobileSettingGroup{
  display:flex;
  flex-direction:column;
  gap:5px;
  text-align:left;
}

.mobileSettingLabel{
  font-size:12px;
  font-weight:800;
  color:#485b46;
}

.mobileSettingLabel small{
  font-weight:400;
  color:#7c8774;
  font-size:10.5px;
}

.mobileSettingBtns{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.optChoiceBtn{
  flex:1 1 110px;
  padding:8px 10px;
  font-size:12px;
  font-weight:700;
  border-radius:10px;
  border:1.5px solid #d5decb;
  background:#f6f8f0;
  color:#4c5c48;
  cursor:pointer;
}

.optChoiceBtn.selected{
  background:#4c7c59;
  color:#ffffff;
  border-color:#365e41;
  box-shadow:0 2px 0 #2b4c34;
}

.mobileSettingsFooter{
  display:flex;
  gap:8px;
  justify-content:space-between;
  align-items:center;
  padding-top:6px;
  border-top:1px solid #e9ecdf;
}

.optFullscreenBtn{
  flex:1;
  padding:9px 12px;
  font-size:12px;
  font-weight:700;
  background:#eef6ec;
  border:1px solid #bdd4b8;
  color:#2f5e41;
  border-radius:10px;
  cursor:pointer;
}

.optConfirmBtn{
  padding:9px 18px;
  font-size:12px;
  font-weight:800;
  background:#819f71;
  color:#ffffff;
  border:0;
  border-radius:10px;
  cursor:pointer;
}

/* Non-Blocking Inline Portrait Notice inside #game (Allows Full Page Scroll in WEB_PORTRAIT!) */
.portraitWarning{
  position:absolute;
  inset:0;
  z-index:18;
  background:rgba(22, 28, 24, 0.78);
  color:#fffdf6;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  pointer-events:auto;
  touch-action:pan-y;
}

.portraitWarning[hidden]{
  display:none !important;
}

.portraitNoticeCard{
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(32, 42, 35, 0.92);
  border:1.5px solid rgba(210, 228, 204, 0.45);
  border-radius:16px;
  padding:14px 18px;
  max-width:92%;
  text-align:left;
  box-shadow:0 8px 24px rgba(0, 0, 0, 0.28);
}

.portraitNoticeBody strong{
  display:block;
  font-family:'ONE Mobile POP', sans-serif;
  font-size:15px;
  color:#ffe066;
  margin-bottom:4px;
}

.portraitNoticeBody p{
  font-size:12px;
  color:#e9ecef;
  line-height:1.45;
  margin:0;
}

.rotatePhoneIcon{
  font-size:34px;
  flex-shrink:0;
  animation:phoneRotate 2.4s ease-in-out infinite;
}

@keyframes phoneRotate{
  0%, 10%{ transform:rotate(0deg); }
  50%, 60%{ transform:rotate(-90deg); }
  90%, 100%{ transform:rotate(0deg); }
}

/* TEST24_FIX8 production UI: keep the developer DOM nodes for engine compatibility but hide them. */
.practiceNav,.encounterNav,.practiceHUD,.debugHud { display:none !important; }