*{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}}

/* Legacy fake @font-face removed; genuine ONE-Mobile-POP.ttf @font-face defined in UI/UX v1.0 block below */

#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;
}

/* Controls are enabled by a real mobile/tablet device flag only, not viewport size. */
.mobileOptBtn,.mobileOptModalBtn{display:inline-flex;align-items:center;justify-content:center}
body.is-mobile-device .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. */
/* DEV BUILD: .practiceNav, .encounterNav, .practiceHUD enabled */
.debugHud[hidden] { display:none !important; }

/* TEST27: videos are an independent visual layer. All game interaction remains unchanged. */
.story .storyVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;pointer-events:none;z-index:1}
.story.hasVideo .storyVideo{display:block}
.story.hasVideo #storyBase,.story.hasVideo #storyMotion{visibility:hidden}
.story .storyText{z-index:4}
.story .storyHint{z-index:6}
.story>img.storyDialogueTemplate{position:absolute;inset:auto 0 5%;width:100%;height:auto;object-fit:contain;pointer-events:none;z-index:3}
.story.withDialogueTemplate .storyText{left:21%;width:59%;top:auto;bottom:10.5%;height:15%;background:none;align-items:center;padding:0 1%;font-size:clamp(12px,1.55vw,23px);line-height:1.35;overflow-wrap:anywhere;color:#333}
.story.withDialogueTemplate .storyHint{bottom:.75%}
.story>img.storyRewardArt{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;background:#f1ebd6;z-index:5}
.story.rewardArtwork .storyVideo,.story.rewardArtwork #storyBase,.story.rewardArtwork #storyMotion{display:none}
.story[hidden] .storyVideo,.story>img[hidden]{display:none!important}
@media(max-width:800px){.story.withDialogueTemplate .storyText{font-size:clamp(10px,1.8vw,17px);line-height:1.2}}
@media(prefers-reduced-motion:reduce){.story.hasVideo .storyVideo{display:block}}


html.mobile-landscape-lock, body.mobile-game-landscape {
  overflow: auto !important;
  height: auto !important;
  position: static !important;
}
body.mobile-game-landscape main {
  max-width: 1480px !important;
  padding: 20px 4% !important;
}
body.mobile-game-landscape #game {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 22px !important;
}
body.mobile-game-landscape .practiceNav,
body.mobile-game-landscape .encounterNav {
  display: flex !important;
}


/* TEST29.1 / v6 B1 — Story & World 1 health: five NeonSaurus icons below top-right HUD */
.playerHealthHud{position:absolute;z-index:6;top:70px;right:22px;display:flex;align-items:center;gap:10px;pointer-events:none;padding:5px 10px;background:#fffdf0eb;border:1px solid #fffcf1;border-radius:13px;box-shadow:0 3px 0 #999c7920;white-space:nowrap}
.playerHealthHud[hidden]{display:none!important}
.playerHealthIcons{display:flex;align-items:center;gap:2px}
.playerHealthIcons img{width:31px;height:31px;object-fit:contain;opacity:1;transition:opacity .15s ease,filter .15s ease}
.playerHealthIcons img.lost{filter:grayscale(1);opacity:.22}
#playerHealthCount{font:800 14px/1 Arial,'Malgun Gothic',sans-serif;color:#607e55;font-variant-numeric:tabular-nums}
@media(max-width:960px),(max-height:520px){.playerHealthHud{top:43px;right:10px;padding:3px 8px;gap:5px;border-radius:10px}.playerHealthIcons img{width:23px;height:23px}#playerHealthCount{font-size:11px}}
@media(max-width:580px){.playerHealthHud{top:42px;right:8px;gap:4px;padding:2px 6px}.playerHealthIcons img{width:18px;height:18px}.playerHealthIcons{gap:0}#playerHealthCount{font-size:10px}}

/* TEST29.2 / v6 B2: Common Game Options button available to PC and mobile users */
.mobileOptBtn,.mobileOptModalBtn{display:inline-flex !important;align-items:center;justify-content:center}
.soundVolumeGroup{gap:9px;padding:7px 1px 5px}
.soundVolumeGroup .mobileSettingLabel{display:flex;align-items:center;justify-content:space-between;font-size:13px}
.soundVolumeGroup #soundVolumeValue{font-variant-numeric:tabular-nums;color:#3e7952;font-size:14px}
.soundVolumeSlider{display:block;width:100%;height:25px;margin:0;accent-color:#538b64;cursor:pointer;touch-action:pan-x}
.soundVolumeSlider:focus-visible{outline:2px solid #457c55;outline-offset:3px;border-radius:8px}
.soundVolumeHint{font-size:10.5px;color:#788672;line-height:1.45}
.soundSettingDivider{height:1px;width:100%;background:#e9ecdf}
.mobileControlSectionTitle{font-size:12px;color:#596f58}

/* TEST31 v6: 7-Card World Map Overlay */
.worldmapPrimary { background:linear-gradient(135deg,#3b6e52,#264a37); color:#fffdf7; border:2px solid #8ce99a; border-radius:999px; padding:11px 18px; font-weight:800; cursor:pointer; font-size:14.5px; box-shadow:0 4px 12px rgba(24,52,36,0.22); }
.worldmapPrimary.unlocked { background:linear-gradient(135deg,#2b8a3e,#1b5e20); border-color:#ffd43b; }

.worldmapOverlay { position:absolute; inset:0; z-index:45; background:rgba(16,24,20,0.86); backdrop-filter:blur(5px); display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box; }
.worldmapOverlay[hidden] { display:none !important; }
.wmPanel { width:100%; max-width:1180px; max-height:100%; background:#f9f5eb; border:3px solid #6b8e6e; border-radius:22px; padding:16px 20px; box-sizing:border-box; display:flex; flex-direction:column; gap:10px; overflow-y:auto; color:#2f3e33; box-shadow:0 18px 42px rgba(0,0,0,0.42); }
.wmHeader { display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1.5px solid rgba(107,142,110,0.28); padding-bottom:8px; }
.wmEyebrow { font-size:11px; font-weight:800; letter-spacing:0.08em; color:#5c8060; display:block; }
.wmHeader h2 { margin:2px 0 0; font-size:20px; color:#253829; }
.wmHeaderActions { display:flex; align-items:center; gap:6px; }
.wmCarouselBtn { background:#e7efe6; border:1.5px solid #7fa382; color:#2b4430; border-radius:10px; padding:6px 10px; font-weight:800; cursor:pointer; }
.wmBackBtn { background:#3a4f3e; color:#fff; border:none; border-radius:12px; padding:8px 14px; font-weight:700; cursor:pointer; font-size:13px; }
.wmStorageWarn { background:#fff3bf; border:1.5px solid #f59f00; color:#7c4d00; padding:6px 12px; border-radius:10px; font-size:12px; font-weight:700; }
.wmNoticeBanner { background:#ffe8cc; border:1.5px solid #fd7e14; color:#862e08; padding:7px 12px; border-radius:10px; font-size:13px; font-weight:700; text-align:center; }

.wmCardGrid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; overflow-y:auto; padding:2px; }
.wmCard { display:flex; flex-direction:column; text-align:left; background:#fffdf9; border:2px solid #c5d4c2; border-radius:14px; overflow:hidden; padding:0; cursor:pointer; transition:transform 0.12s ease, box-shadow 0.12s ease; }
.wmCard.playable { border-color:#529460; box-shadow:0 4px 12px rgba(46,96,58,0.14); }
.wmCard.playable:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(46,96,58,0.24); }
.wmCard.comingSoon { opacity:0.86; border-style:dashed; border-color:#9aa89c; background:#f1f3f0; }
.wmCardThumbWrap { position:relative; width:100%; aspect-ratio:16 / 9; max-height:112px; background:#233028; overflow:hidden; }
.wmCardThumb { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.wmCardBadge { position:absolute; top:6px; right:6px; font-size:10.5px; font-weight:800; padding:3px 8px; border-radius:999px; }
.badgePlay { background:#2b8a3e; color:#fff; }
.badgeSoon { background:rgba(33,37,41,0.82); color:#ffd43b; }
.wmCardBody { padding:8px 10px; display:flex; flex-direction:column; gap:3px; }
.wmCardTitle { font-size:13.5px; color:#1f2e22; line-height:1.25; }
.wmCardSub { font-size:11px; color:#556659; margin:0; line-height:1.3; }
.wmCardMeta { font-size:10.5px; font-weight:700; color:#2b6cb0; margin-top:2px; }

.wmStageGrid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; }
.wmStageCard { background:#fffdf9; border:2px solid #b8cbb8; border-radius:14px; padding:11px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; }
.wmStageCard.unlocked { border-color:#40916c; }
.wmStageCard.cleared { border-color:#2b8a3e; background:#f2fbf4; }
.wmStageCard.locked { opacity:0.75; background:#f1f3f2; }
.wmStageTop { display:flex; justify-content:space-between; align-items:center; font-size:11px; font-weight:800; }
.wmStageCode { color:#2d6a4f; }
.wmStageStatus { color:#495057; }
.wmStageName { font-size:14px; color:#1b4332; }
.wmStageDesc { font-size:11.5px; color:#526358; margin:0; line-height:1.35; }
.wmStageStats { display:flex; flex-direction:column; gap:2px; font-size:11px; color:#37473c; background:rgba(0,0,0,0.04); padding:6px 8px; border-radius:8px; }
.wmStageBtnRow { display:flex; flex-direction:column; gap:4px; }
.wmStagePlayBtn { background:#2d6a4f; color:#fff; border:none; border-radius:10px; padding:8px 10px; font-weight:800; cursor:pointer; font-size:12.5px; }
.wmStagePlayBtn:disabled { background:#adb5bd; cursor:not-allowed; }
.wmStageDevBtn { background:#fff3bf; border:1px solid #f08c00; color:#7c4d00; border-radius:8px; padding:4px 8px; font-size:11px; font-weight:700; cursor:pointer; }

.wmClearPanel { max-width:680px; text-align:center; }
.wmClearSummary { font-size:14px; line-height:1.6; color:#2b3d30; margin:6px 0; }
.wmClearBtnRow { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:8px; }

/* Mobile Landscape Carousel Adaptation (WM-019: 740x320, 844x390) */
@media (max-height: 440px), (max-width: 920px) {
  .worldmapOverlay { padding:6px; }
  .wmPanel { padding:8px 12px; gap:6px; border-radius:14px; }
  .wmHeader h2 { font-size:15px; }
  .wmCardGrid { display:flex; flex-direction:row; overflow-x:auto; overflow-y:hidden; gap:8px; scroll-snap-type:x mandatory; padding-bottom:4px; }
  .wmCard { min-width:210px; max-width:220px; flex:0 0 auto; scroll-snap-align:start; }
  .wmCardThumbWrap { max-height:74px; }
  .wmStageGrid { display:flex; flex-direction:row; overflow-x:auto; gap:8px; }
  .wmStageCard { min-width:195px; flex:0 0 auto; padding:8px; }
}

/* TEST31.3: independent jump/dash control sizing (joystick unaffected) */
.mobileControls[data-action-size="small"] .vbtn-action{width:56px;height:56px;font-size:13px}
.mobileControls[data-action-size="medium"] .vbtn-action{width:70px;height:70px;font-size:16px}
.mobileControls[data-action-size="large"] .vbtn-action{width:86px;height:86px;font-size:18px}


/* ============================================================================
   TEST31.5 UI/UX MASTER REDESIGN v1.0 (Fairy-Tale Trickcal Style & Genuine ONE Mobile POP)
   - Genuine `@font-face` using `./assets/fonts/ONE-Mobile-POP.ttf` (zero fake local fallbacks!)
   - Asymmetric, high-readability Corner Floating HUD (Ribbon + Medallion + Leaf Health Tray)
   - Open Storybook Title Screen (Dudu & Suin Forest background remain the hero; zero giant PPT boards!)
   - Separated Pause Card (`data-modal-kind="pause"`) vs. Title Dock (`data-modal-kind="title"`)
   - Atmospheric 7-Region Expedition World Map & Compact Non-Occluding Clear/Settings Modals
   ============================================================================ */

@font-face {
  font-family: 'ONE Mobile POP';
  src: url('./assets/fonts/ONE-Mobile-POP.ttf') format('truetype'),
       url('./ONE Mobile POP.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-game: 'ONE Mobile POP', sans-serif;
  --ui-forest-glass: rgba(22, 38, 28, 0.78);
  --ui-forest-deep: rgba(15, 26, 20, 0.86);
  --ui-cream-pill: rgba(255, 253, 244, 0.94);
  --ui-leaf-primary: #58a64e;
  --ui-leaf-shadow: #356b2f;
  --ui-crayon-gold: #f5b82e;
  --ui-crayon-shadow: #b87412;
  --ui-pine-teal: #3d8067;
  --ui-pine-shadow: #234d3d;
  --ui-ink-dark: #243627;
  --ui-ink-muted: #5a6e5c;
  --ui-cream-text: #fffdf5;
}

/* Apply genuine ONE Mobile POP across all game UI layers without fake bold synthesis */
body,
.gameViewport,
.gameViewport button,
.gameViewport input,
.gameViewport select,
.hud,
.pill,
.playerHealthHud,
#playerHealthCount,
.practiceHUD,
.overlay,
.intro,
.worldmapOverlay,
.wmPanel,
.mobileSettingsModal,
.portraitWarning,
#toast,
#encounterStatus,
.practiceNav,
.challengeNav,
.encounterNav {
  font-family: var(--font-game) !important;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* ----------------------------------------------------------------------------
   1. In-Game HUD Hierarchy (Corner Floating Ribbon + Clock Medallion + Capsules)
   ---------------------------------------------------------------------------- */
.hud {
  top: 14px;
  left: 16px;
  right: 16px;
  align-items: center;
  z-index: 6;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

/* Hide gameplay HUD cleanly during fullscreen story cutscenes / region transitions */
body[data-game-state="opening"] .hud,
body[data-game-state="ending"] .hud,
body[data-game-state="cutscene"] .hud,
body[data-game-state="opening"] .playerHealthHud,
body[data-game-state="ending"] .playerHealthHud,
body[data-game-state="cutscene"] .playerHealthHud,
body[data-game-state="opening"] .practiceHUD,
body[data-game-state="ending"] .practiceHUD,
body[data-game-state="cutscene"] .practiceHUD {
  opacity: 0;
  pointer-events: none;
}

/* In 1-5 Suin Village, softly dim secondary top HUD when conversing with an NPC (§4-4) */
body[data-world-stage="1-5"].npc-talking .hud {
  opacity: 0.52;
}

/* Top-Left Stage Ribbon Badge (`.hudZonePill`) — distinct from white counter pills! */
.hud .hudZonePill {
  flex-direction: row !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 5px 15px 5px 7px !important;
  height: 38px;
  background: var(--ui-forest-glass) !important;
  border: 1.5px solid rgba(216, 243, 205, 0.55) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(10, 20, 14, 0.28) !important;
  color: var(--ui-cream-text) !important;
  backdrop-filter: blur(4px);
}

.hud .hudZonePill .tiny:not([hidden]) {
  display: inline-flex !important;
  align-items: center;
  padding: 3px 9px;
  background: linear-gradient(180deg, #ffd966 0%, #f0a824 100%);
  color: #243627 !important;
  border-radius: 999px;
  font-size: 10.5px !important;
  letter-spacing: 0.4px !important;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.hud .hudZonePill #zoneTitle {
  font-size: 14.5px !important;
  font-weight: 400 !important;
  color: #fffdf6 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.2px;
}

@keyframes stagePulseAnim {
  0% { transform: scale(0.94); box-shadow: 0 0 0 0 rgba(245, 184, 46, 0.7); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(245, 184, 46, 0); }
  100% { transform: scale(1); box-shadow: 0 4px 12px rgba(10, 20, 14, 0.28); }
}
.hud .hudZonePill.stage-enter-pulse {
  animation: stagePulseAnim 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Top-Right Cluster (`.hudRight`) */
.hudRight {
  align-items: center !important;
  gap: 7px !important;
}

/* Primary Timer Medallion (`.eventClock`) */
.hud .eventClock:not([hidden]) {
  height: 38px !important;
  min-width: 76px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: var(--ui-cream-pill) !important;
  border: 2px solid #e6b44c !important;
  box-shadow: 0 3px 0 rgba(156, 108, 24, 0.32), 0 4px 10px rgba(0, 0, 0, 0.16) !important;
  color: #273b29 !important;
  font-size: 17.5px !important;
  font-weight: 400 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hud .eventClock.urgent {
  background: #fff0ed !important;
  border-color: #e05243 !important;
  color: #c93326 !important;
}

/* Collectible Capsules (`#specialPill`, `.coins`) */
.hud .specialCoins,
.hud .coins {
  height: 36px !important;
  padding: 0 12px 0 9px !important;
  border-radius: 999px !important;
  background: rgba(255, 252, 242, 0.90) !important;
  border: 1.5px solid rgba(235, 198, 122, 0.85) !important;
  box-shadow: 0 3px 0 rgba(120, 92, 34, 0.22) !important;
  font-size: 15.5px !important;
  font-weight: 400 !important;
  gap: 5px !important;
}

.hud .specialCoins {
  color: #c75b16 !important;
}

.hud .coins {
  color: #b83d56 !important;
  border-color: rgba(232, 150, 166, 0.85) !important;
}

.hud .specialCoins span,
.hud .coins span {
  font-size: 12px !important;
  color: #6c7865 !important;
}

/* Utility Icon Buttons (`⚙️`, `♪`, `Ⅱ`, `⛶`) — Compact Circular Medallions */
.hudRight button:not([hidden]) {
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: var(--ui-forest-glass) !important;
  border: 1.5px solid rgba(232, 246, 224, 0.55) !important;
  box-shadow: 0 3px 0 rgba(14, 24, 18, 0.35) !important;
  color: #fffdf5 !important;
  font-size: 13.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.08s ease, background 0.12s ease;
}

.hudRight button:hover {
  background: rgba(42, 68, 50, 0.92) !important;
  transform: translateY(-1px);
}

.hudRight button:active {
  transform: translateY(1px);
}

/* Neonsaurus 5-Icon Health Tray (`#playerHealthHud`) — High-Contrast Forest Leaf Tray */
.playerHealthHud {
  top: 58px !important;
  right: 16px !important;
  padding: 4px 12px 4px 9px !important;
  gap: 8px !important;
  background: rgba(20, 36, 26, 0.76) !important;
  border: 1.5px solid rgba(182, 232, 168, 0.62) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 12px rgba(10, 20, 14, 0.28) !important;
  backdrop-filter: blur(4px);
}

.playerHealthIcons {
  gap: 3px !important;
}

.playerHealthIcons img {
  width: 28px !important;
  height: 28px !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.playerHealthIcons img.lost {
  filter: grayscale(1) brightness(0.65) !important;
  opacity: 0.28 !important;
}

#playerHealthCount {
  font-family: var(--font-game) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: #e9f7e1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Bottom-Left Situational Action Indicator (`.practiceHUD`) — Compact & Non-Occluding */
.practiceHUD {
  bottom: 12px !important;
  left: 16px !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 5px 12px !important;
  background: rgba(20, 34, 25, 0.62) !important;
  border: 1px solid rgba(210, 235, 200, 0.35) !important;
  border-radius: 999px !important;
  color: #e8f5e2 !important;
  font-size: 11px !important;
  backdrop-filter: blur(3px);
}

.practiceHUD #jumpInfo {
  display: none !important;
}

.practiceHUD .holdTrack {
  width: 64px !important;
  height: 5px !important;
  background: rgba(255, 255, 255, 0.24) !important;
}

.practiceHUD .holdTrack i {
  background: #ffd43b !important;
}

/* Hide keyboard practiceHUD on touch mobile devices */
body.is-mobile-device .practiceHUD {
  display: none !important;
}

/* Toast & Encounter Banner */
#toast {
  top: 104px !important;
  font-size: 16px !important;
  color: #fffdf4 !important;
  text-shadow: 0 2px 6px rgba(15, 28, 18, 0.85), 0 0 2px rgba(15, 28, 18, 0.95) !important;
}

/* ----------------------------------------------------------------------------
   2. Title Screen / Pause Menu / Story Clear Overlay (`#overlay`)
   - ZERO Giant Brown/Ivory PPT Boards!
   - When `data-modal-kind="title"`, Dudu & Suin Forest canvas shine on the left/center
     while the title logo and 3 mode buttons float as an adventure dock!
   ---------------------------------------------------------------------------- */
.overlay {
  background: radial-gradient(circle at 34% 54%, rgba(18, 30, 22, 0.04) 0%, rgba(14, 24, 18, 0.42) 100%) !important;
  backdrop-filter: none !important;
  padding: 20px 26px !important;
}

/* Title Mode (`#overlay[data-modal-kind="title"]`): Split Hero Layout */
.overlay[data-modal-kind="title"]:not([hidden]) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.overlay[data-modal-kind="title"] .intro {
  width: min(410px, 46%) !important;
  max-width: 420px !important;
  background: rgba(22, 38, 28, 0.80) !important;
  border: 2px solid rgba(215, 242, 202, 0.55) !important;
  border-radius: 26px !important;
  padding: 22px 24px 18px !important;
  text-align: left !important;
  color: #fffdf5 !important;
  box-shadow: 0 18px 42px rgba(8, 16, 11, 0.44) !important;
  backdrop-filter: blur(6px);
}

.overlay[data-modal-kind="title"] .intro .eyebrow {
  display: inline-block;
  padding: 4px 11px;
  background: rgba(245, 184, 46, 0.22);
  border: 1px solid rgba(245, 184, 46, 0.65);
  border-radius: 999px;
  color: #ffe07d !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
}

.overlay[data-modal-kind="title"] .intro h2 {
  font-size: clamp(22px, 2.3vw, 29px) !important;
  margin: 10px 0 8px !important;
  color: #fffdf5 !important;
  text-shadow: 0 2px 0 #1b3022, 0 4px 10px rgba(0, 0, 0, 0.35);
  line-height: 1.2;
}

.overlay[data-modal-kind="title"] .intro p {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: rgba(238, 247, 234, 0.90) !important;
  margin-bottom: 4px !important;
}

.overlay[data-modal-kind="title"] .modeBtnRow {
  flex-direction: column !important;
  gap: 9px !important;
  margin: 14px 0 12px !important;
}

.overlay[data-modal-kind="title"] .modeBtnRow > button:not([hidden]) {
  flex: none !important;
  width: 100% !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: transform 0.1s ease, filter 0.12s ease;
}

.overlay[data-modal-kind="title"] .modeBtnRow > button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* 1) Primary Story Button */
.overlay .primary {
  background: linear-gradient(180deg, #68b85e 0%, #468e3d 100%) !important;
  color: #fffdf6 !important;
  border: 2px solid #c9f2be !important;
  box-shadow: 0 4px 0 #2b5c25, 0 6px 14px rgba(0, 0, 0, 0.24) !important;
  border-radius: 16px !important;
  font-weight: 400 !important;
}

/* 2) World Map Expedition Button */
.overlay .worldmapPrimary {
  background: linear-gradient(180deg, #4b6955 0%, #314739 100%) !important;
  color: #e9f2eb !important;
  border: 2px solid rgba(185, 214, 192, 0.55) !important;
  box-shadow: 0 4px 0 #1d2b22, 0 6px 14px rgba(0, 0, 0, 0.22) !important;
  border-radius: 16px !important;
  font-weight: 400 !important;
}

.overlay .worldmapPrimary.unlocked {
  background: linear-gradient(180deg, #f5b638 0%, #d48315 100%) !important;
  color: #231806 !important;
  border-color: #fff0b3 !important;
  box-shadow: 0 4px 0 #8c5206, 0 6px 14px rgba(0, 0, 0, 0.25) !important;
}

/* 3) Challenge Forest Button */
.overlay .challengePrimary {
  background: linear-gradient(180deg, #44856c 0%, #2a5c48 100%) !important;
  color: #fffdf6 !important;
  border: 2px solid #a8e0c9 !important;
  box-shadow: 0 4px 0 #193b2e, 0 6px 14px rgba(0, 0, 0, 0.22) !important;
  border-radius: 16px !important;
  font-weight: 400 !important;
}

.overlay .modalSubBtnRow {
  justify-content: flex-start !important;
  gap: 7px !important;
  margin-bottom: 8px !important;
}

.overlay .modalSubBtnRow .secondary {
  background: rgba(255, 253, 244, 0.14) !important;
  border: 1.5px solid rgba(230, 245, 224, 0.42) !important;
  color: #fffdf5 !important;
  border-radius: 999px !important;
  padding: 6px 13px !important;
  font-size: 12px !important;
  box-shadow: none !important;
}

.overlay .modalSubBtnRow .secondary:hover {
  background: rgba(255, 253, 244, 0.26) !important;
}

.overlay[data-modal-kind="title"] .modalKeys {
  font-size: 10.5px !important;
  color: rgba(215, 232, 210, 0.78) !important;
  letter-spacing: 0.3px !important;
  border-top: 1px solid rgba(215, 232, 210, 0.18);
  padding-top: 8px;
}

/* Pause Mode (`#overlay[data-modal-kind="pause"]`): Compact Focused Pause Card (§6-3) */
.overlay[data-modal-kind="pause"]:not([hidden]),
.overlay[data-modal-kind="result"]:not([hidden]) {
  display: grid !important;
  place-items: center !important;
  background: rgba(14, 24, 18, 0.52) !important;
  backdrop-filter: blur(3px) !important;
}

.overlay[data-modal-kind="pause"] .intro,
.overlay[data-modal-kind="result"] .intro {
  width: min(430px, 92%) !important;
  background: rgba(255, 253, 245, 0.96) !important;
  border: 2.5px solid #6b965e !important;
  border-radius: 26px !important;
  padding: 24px 28px 20px !important;
  text-align: center !important;
  color: #243627 !important;
  box-shadow: 0 18px 44px rgba(10, 20, 14, 0.38) !important;
}

/* Hide World Map & Challenge launch buttons when inside Pause Menu so Pause stays clean and focused! */
.overlay[data-modal-kind="pause"] #openWorldMapBtn,
.overlay[data-modal-kind="pause"] #startChallengeBtn {
  display: none !important;
}

.overlay[data-modal-kind="pause"] .intro .eyebrow,
.overlay[data-modal-kind="result"] .intro .eyebrow {
  display: inline-block;
  padding: 4px 12px;
  background: #e6f2e2;
  color: #386632 !important;
  border-radius: 999px;
  font-size: 11px !important;
}

.overlay[data-modal-kind="pause"] .intro h2,
.overlay[data-modal-kind="result"] .intro h2 {
  color: #233827 !important;
  font-size: 25px !important;
  margin: 10px 0 8px !important;
}

.overlay[data-modal-kind="pause"] .intro p,
.overlay[data-modal-kind="result"] .intro p {
  color: #495e4c !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

.overlay[data-modal-kind="pause"] .modalSubBtnRow,
.overlay[data-modal-kind="result"] .modalSubBtnRow {
  justify-content: center !important;
}

.overlay[data-modal-kind="pause"] .modalSubBtnRow .secondary,
.overlay[data-modal-kind="result"] .modalSubBtnRow .secondary {
  background: #f0f5ec !important;
  border: 1.5px solid #bdd4b5 !important;
  color: #2f4a33 !important;
}

/* ----------------------------------------------------------------------------
   3. World Map 7-Region Expedition UI (`#worldmapOverlay`, §6-2)
   - Replaces the opaque #f9f5eb brown/ivory sheet with an atmospheric forest-glass
     expedition map where region artwork is the hero!
   ---------------------------------------------------------------------------- */
.worldmapOverlay {
  background: rgba(12, 22, 16, 0.68) !important;
  backdrop-filter: blur(5px) !important;
  padding: 14px 18px !important;
}

.wmPanel {
  background: rgba(22, 36, 27, 0.84) !important;
  border: 2px solid rgba(176, 218, 168, 0.48) !important;
  border-radius: 24px !important;
  padding: 14px 18px !important;
  color: #fffdf5 !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.48) !important;
}

.wmHeader {
  border-bottom: 1px solid rgba(185, 220, 180, 0.24) !important;
  padding-bottom: 8px !important;
}

.wmEyebrow {
  color: #ffd966 !important;
  font-size: 10.5px !important;
  letter-spacing: 1px !important;
}

.wmHeader h2 {
  color: #fffdf5 !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.wmCarouselBtn {
  background: rgba(255, 253, 244, 0.14) !important;
  border: 1.5px solid rgba(210, 238, 202, 0.45) !important;
  color: #fffdf5 !important;
  border-radius: 999px !important;
}

.wmBackBtn {
  background: linear-gradient(180deg, #589e50 0%, #3d7536 100%) !important;
  border: 1.5px solid #c5edb8 !important;
  color: #fffdf5 !important;
  border-radius: 999px !important;
  padding: 7px 15px !important;
  font-weight: 400 !important;
  box-shadow: 0 3px 0 #254d20 !important;
}

.wmCard {
  background: rgba(30, 48, 36, 0.90) !important;
  border: 2px solid rgba(162, 204, 156, 0.42) !important;
  border-radius: 16px !important;
  overflow: hidden;
}

.wmCard.playable {
  border-color: #ffd43b !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 212, 59, 0.35) !important;
}

.wmCard.comingSoon {
  opacity: 0.84 !important;
  border-style: solid !important;
  border-color: rgba(140, 165, 145, 0.32) !important;
  background: rgba(20, 30, 24, 0.82) !important;
}

.wmCardThumbWrap {
  max-height: 118px !important;
}

.wmCardThumbScrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 18, 13, 0.35) 0%, transparent 40%, rgba(12, 22, 16, 0.82) 100%);
  pointer-events: none;
}

.wmRegionIndex {
  position: absolute;
  bottom: 6px;
  left: 8px;
  font-size: 9.5px;
  color: #ffe082;
  background: rgba(14, 24, 18, 0.72);
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: 0.4px;
}

.wmCardBody {
  padding: 9px 11px 10px !important;
  color: #fffdf5 !important;
}

.wmCardTitle {
  color: #fffdf5 !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
}

.wmCardSub {
  color: rgba(220, 236, 218, 0.84) !important;
  font-size: 11px !important;
}

.wmCardMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px !important;
}

.wmMetaPill {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 253, 244, 0.14);
  color: #e6f4e2;
}

.wmMetaGold {
  background: rgba(245, 184, 46, 0.24);
  color: #ffe07d;
}

.wmMetaClear {
  background: rgba(88, 166, 78, 0.35);
  color: #b7f5a8;
}

.wmMetaLocked {
  background: rgba(255, 255, 255, 0.08);
  color: #adbdb0;
}

/* World 1 Stage Select Cards (`.wmStageCard`) */
.wmStageCard {
  background: rgba(255, 253, 246, 0.95) !important;
  border: 2px solid #8ab882 !important;
  border-radius: 16px !important;
  color: #243627 !important;
}

.wmStageCard.cleared {
  border-color: #f5b82e !important;
  background: #fffdf2 !important;
}

.wmStageName {
  font-size: 14.5px !important;
  font-weight: 400 !important;
  color: #1f3624 !important;
}

.wmStagePlayBtn {
  background: linear-gradient(180deg, #58a64e 0%, #3d7d35 100%) !important;
  border-radius: 12px !important;
  font-weight: 400 !important;
  box-shadow: 0 3px 0 #265220 !important;
}

/* World 1 Clear Modal (`.wmClearPanel`) — Compact Celebratory Banner Card (§6-4) */
.wmPanel.wmClearPanel {
  max-width: 500px !important;
  background: rgba(255, 253, 245, 0.96) !important;
  border: 3px solid #f5b82e !important;
  border-radius: 26px !important;
  padding: 22px 26px !important;
  color: #243627 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
}

.wmPanel.wmClearPanel .wmHeader {
  border-bottom-color: rgba(107, 150, 94, 0.25) !important;
  justify-content: center !important;
}

.wmPanel.wmClearPanel .wmEyebrow {
  color: #d48315 !important;
}

.wmPanel.wmClearPanel .wmHeader h2 {
  color: #243627 !important;
  text-shadow: none !important;
  font-size: 23px !important;
}

.wmPanel.wmClearPanel .wmClearSummary {
  color: #3c5240 !important;
  font-size: 13.5px !important;
}

.wmPanel.wmClearPanel .secondary {
  background: #eef5ea !important;
  border: 1.5px solid #bdd4b5 !important;
  color: #2c4730 !important;
  border-radius: 999px !important;
  padding: 8px 15px !important;
}

/* ----------------------------------------------------------------------------
   4. Common Game Options Modal (`#mobileSettingsModal`, §6-3)
   ---------------------------------------------------------------------------- */
.mobileSettingsCard {
  background: rgba(255, 253, 246, 0.97) !important;
  border: 2.5px solid #7aa370 !important;
  border-radius: 24px !important;
  width: min(440px, 94%) !important;
  padding: 18px 22px !important;
  box-shadow: 0 18px 44px rgba(10, 20, 14, 0.42) !important;
}

.mobileSettingsHeader strong {
  font-size: 17px !important;
  font-weight: 400 !important;
  color: #243627 !important;
}

.mobileControlSectionTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #edf5e8;
  padding: 5px 10px;
  border-radius: 8px;
  color: #355439 !important;
}

body:not(.is-mobile-device) .mobileControlSectionTitle::after {
  content: '터치 기기 접속 시 자동 표시';
  font-size: 10px;
  color: #6b806c;
}

/* Strictly guarantee mobile virtual controls NEVER appear on PC windowed mode (§7) */
body:not(.is-mobile-device) #mobileControls {
  display: none !important;
}

/* Responsive adaptation for mobile landscape (844x390 / 740x320) */
@media (max-height: 500px), (max-width: 920px) {
  .overlay[data-modal-kind="title"] .intro {
    width: min(350px, 54%) !important;
    padding: 12px 16px !important;
    border-radius: 18px !important;
  }
  .overlay[data-modal-kind="title"] .intro h2 {
    font-size: 18px !important;
    margin: 4px 0 !important;
  }
  .overlay[data-modal-kind="title"] .intro p {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }
  .overlay[data-modal-kind="title"] .modeBtnRow {
    gap: 5px !important;
    margin: 8px 0 !important;
  }
  .overlay[data-modal-kind="title"] .modeBtnRow > button {
    padding: 7px 12px !important;
    font-size: 12px !important;
    border-radius: 11px !important;
  }
  .hud .hudZonePill {
    height: 28px !important;
    padding: 3px 10px 3px 5px !important;
  }
  .hud .hudZonePill .tiny {
    font-size: 8.5px !important;
    padding: 2px 6px !important;
  }
  .hud .hudZonePill #zoneTitle {
    font-size: 11px !important;
  }
  .hud .eventClock,
  .hud .specialCoins,
  .hud .coins,
  .hudRight button {
    height: 28px !important;
    font-size: 11.5px !important;
  }
  .playerHealthHud {
    top: 40px !important;
    right: 10px !important;
    padding: 2px 8px !important;
  }
  .playerHealthIcons img {
    width: 20px !important;
    height: 20px !important;
  }
  #playerHealthCount {
    font-size: 11px !important;
  }
}

/* Strict [hidden] attribute enforcement — guarantees any hidden element is unconditionally display: none */
[hidden],
.overlay[hidden],
.overlay[data-modal-kind][hidden],
.overlay[data-modal-kind="title"][hidden],
.overlay[data-modal-kind="pause"][hidden],
.overlay[data-modal-kind="result"][hidden],
.story[hidden],
#launchScene[hidden],
#regionTransition[hidden],
.debugHud[hidden],
.mobileSettingsModal[hidden],
.challengeHud[hidden],
.challengeNav[hidden],
.eventClock[hidden],
.hud .eventClock[hidden],
.specialCoins[hidden],
.hud .specialCoins[hidden],
.coins[hidden],
.hud .coins[hidden],
.practiceNav[hidden],
.encounterNav[hidden],
.backStoryModalBtn[hidden],
.portraitWarning[hidden],
.playerHealthHud[hidden],
.worldmapOverlay[hidden],
.wmNoticeBanner[hidden],
#restart[hidden] {
  display: none !important;
}


/* ============================================================================
   [DUDU-AUDIT-261113] UI-01 Lobby-First Viewport Fit & CFG-01 Release Mode Guard
   - Ensures the full 16:9 #game frame and all 5 lobby buttons fit 100% inside
     initial 1280x720, 800x450, and 844x390 viewports without vertical clipping.
   - Hides developer practice/jump bars (.practiceNav, .encounterNav) when
     `data-release-mode="true"` is active on html/body.
   ============================================================================ */
html[data-release-mode="true"] .practiceNav,
html[data-release-mode="true"] .encounterNav,
body[data-release-mode="true"] .practiceNav,
body[data-release-mode="true"] .encounterNav {
  display: none !important;
}

header {
  height: 34px !important;
  padding: 0 2.5% !important;
}

main {
  padding: 6px 2% 10px !important;
  max-width: 1440px !important;
}

.heading {
  display: none !important;
}

.game {
  width: min(100%, calc((100dvh - 52px) * 16 / 9)) !important;
  max-height: calc(100dvh - 52px) !important;
  margin: 0 auto !important;
  border-width: 3px !important;
}

@media (max-height: 520px) {
  header {
    display: none !important;
  }
  main {
    padding: 2px 1% !important;
  }
  .game {
    width: min(100%, calc((100dvh - 6px) * 16 / 9)) !important;
    max-height: calc(100dvh - 6px) !important;
    border-width: 2px !important;
    border-radius: 12px !important;
  }
}


/* ============================================================================
   [v1.0 Challenge Renewal & Difficulty 2-1] Challenge Select Modal & Nav Bar
   ============================================================================ */
.challengeSelectModal[hidden] {
  display: none !important;
}

.challengeSelectModal {
  position: absolute;
  inset: 0;
  z-index: 65;
  display: grid;
  place-items: center;
  background: rgba(14, 24, 18, 0.72);
  backdrop-filter: blur(4px);
  padding: 16px;
}

.chSelectCard {
  background: #fffdf5;
  border: 3px solid #6b9e62;
  border-radius: 26px;
  width: min(820px, 95%);
  max-height: 92%;
  overflow-y: auto;
  padding: 20px 24px 22px;
  box-shadow: 0 22px 54px rgba(8, 16, 12, 0.48);
  color: #243627;
}

.chSelectHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid rgba(107, 158, 98, 0.28);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.chSelectEyebrow {
  font-size: 10px;
  letter-spacing: 1.4px;
  color: #4f7d47;
  display: block;
}

.chSelectHeader h3 {
  margin: 3px 0 0;
  font-size: 21px;
  font-weight: 400;
  color: #1f3322;
}

.chSelectCloseBtn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1.5px solid #bdd4b5;
  background: #eef5ea;
  color: #243627;
  font-size: 15px;
  cursor: pointer;
}

.chSelectGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.chDiffBox {
  border-radius: 18px;
  padding: 14px 16px;
  border: 2px solid #c5dcc0;
  background: #f6faf3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chDiffBoxD2 {
  border-color: #f0b449;
  background: #fff9eb;
}

.chDiffBadge {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  background: #dff0d8;
  color: #285223;
}

.chDiffBadgeHard {
  background: #ffe8b3;
  color: #9c5708;
}

.chDiffBox h4 {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  color: #1e3121;
}

.chDiffBox p {
  font-size: 12px;
  line-height: 1.45;
  color: #4b5e4d;
  margin: 0;
}

.chDiffRecord {
  font-size: 11.5px;
  color: #345937;
  background: rgba(255, 255, 255, 0.78);
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(107, 158, 98, 0.25);
}

.chStageBtnGroup {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chLaunchPrimaryBtn {
  width: 100%;
  padding: 10px 14px;
  border-radius: 13px;
  border: none;
  background: linear-gradient(180deg, #5cb852 0%, #43913b 100%);
  color: #fffdf6;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 #2b6325;
}

.chLaunchD2Btn {
  background: linear-gradient(180deg, #f59f00 0%, #d97706 100%);
  box-shadow: 0 3px 0 #92400e;
}

.chStageQuickRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.chStageMiniBtn {
  padding: 6px 8px;
  border-radius: 9px;
  border: 1.5px solid #bfd6b8;
  background: #ffffff;
  color: #2c462f;
  font-size: 11.5px;
  cursor: pointer;
}

.chStageMiniBtn.is-locked,
.challengeNav button:disabled {
  opacity: 0.56 !important;
  cursor: not-allowed !important;
  background: #e9ecef !important;
  color: #6c757d !important;
  border-color: #ced4da !important;
}

.chNavDiffSwitch {
  display: inline-flex;
  gap: 4px;
  margin-right: 4px;
}

.chDiffSwitchBtn.active,
.challengeNav button.activeStage {
  background: #4d8f46 !important;
  color: #fffdf6 !important;
  border-color: #2f612a !important;
}

@media (max-width: 720px) {
  .chSelectGrid {
    grid-template-columns: 1fr;
  }
}