/* =====================================================================
   몽이와 24 모험 — 카툰 게임 UI 시스템 v3
   · 모든 버튼/패널: 두꺼운 잉크 아웃라인 + 바닥 베벨 + 글로시 하이라이트
   · 팝업: 리본 타이틀 배너 + 스터드 장식
   · 흰 글자엔 잉크 테두리(text-shadow 4방향)
   ===================================================================== */
:root{
  --ink:#4a3a6e;
  --ink-soft:#7a6a9e;
  --line:#c4b4e8;                       /* 부드러운 라벤더 테두리 */
  --edge:rgba(74,58,110,.22);           /* 은은한 바닥 엣지 */
  --txt-out:0 2px 3px rgba(50,35,80,.4);/* 가벼운 그림자만 */
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#aee2ff;
  font-family:'Apple SD Gothic Neo','Malgun Gothic','Segoe UI',sans-serif;user-select:none}
html,body,button{touch-action:manipulation}
canvas{display:block}
button{font-family:inherit;cursor:pointer;border:none;white-space:nowrap}
.hidden{display:none !important}

/* ═══════════ 상단 HUD 칩 ═══════════ */
#topbar{position:fixed;top:calc(12px + env(safe-area-inset-top));left:12px;right:12px;
  display:flex;gap:8px;z-index:10;pointer-events:none}
.coinIc{display:inline-block;width:19px;height:19px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff3c0,#ffd23e 52%,#e8a200);
  border:2px solid #c8860f;box-shadow:inset 0 -2px 3px rgba(150,90,0,.45),0 1px 2px rgba(0,0,0,.15);
  vertical-align:-4px}
.coinIc.sm{width:13px;height:13px;border-width:1.5px;vertical-align:-2px;
  box-shadow:inset 0 -1px 2px rgba(150,90,0,.45)}
.pill{pointer-events:auto;background:linear-gradient(180deg,#fffef8,#f2e8ff 60%,#e8dcfa);
  border-radius:999px;padding:8px 16px;font-size:15px;font-weight:900;color:var(--ink);
  border:2px solid var(--line);
  box-shadow:0 4px 0 var(--edge),0 8px 14px rgba(60,40,100,.3),inset 0 2px 0 #fff;
  display:flex;align-items:center;gap:6px}
.pill.btn{cursor:pointer;transition:transform .1s}
.pill.btn:hover{transform:scale(1.08) rotate(-2deg)}
.pill.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge),inset 0 2px 0 #fff}
.pill i{font-style:normal;color:var(--ink-soft);font-size:13px}
#coinN{color:#e8920a}
.spacer{flex:1}
body.title #topbar{display:none}
body.title #petPanel{display:none !important}

/* ═══════════ 펫 패널 ═══════════ */
#petPanel{position:fixed;top:calc(66px + env(safe-area-inset-top));left:12px;z-index:10;
  background:linear-gradient(180deg,#fffef8,#f4ecff);border-radius:20px;padding:12px 16px;
  border:2px solid var(--line);
  box-shadow:0 5px 0 var(--edge),0 10px 18px rgba(60,40,100,.3),inset 0 2px 0 #fff;
  width:192px;overflow:hidden}
#petName{font-size:17px;font-weight:900;color:var(--ink);margin-bottom:8px;cursor:pointer;white-space:nowrap;
  border-bottom:2px dashed #d8c9f2;padding-bottom:6px}
#petName small{font-weight:700;color:var(--ink-soft);font-size:12px}
.bar{display:flex;align-items:center;gap:7px;margin:6px 0;font-size:14px}
.track{flex:1;height:12px;background:#e5dcf2;border-radius:99px;overflow:hidden;
  border:2px solid rgba(61,46,92,.35);box-shadow:inset 0 2px 3px rgba(61,46,92,.2)}
.track div{height:100%;border-radius:99px;transition:width .4s;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15),inset 0 2px 0 rgba(255,255,255,.4)}
#hungerBar{background:linear-gradient(90deg,#ffb36b,#ff8f4d);width:70%}
#happyBar{background:linear-gradient(90deg,#ff9fc0,#ff6f9f);width:70%}
#xpBar{background:linear-gradient(90deg,#8fd7ff,#5aa8ff);width:20%}
#tiredBar{background:linear-gradient(90deg,#c9b0f5,#9a7fe0);width:20%}

/* ═══════════ 메인 버튼 (홈/맵) ═══════════ */
#homeBtns,#mapBtns,#roomBtns{position:fixed;bottom:calc(40px + env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%);display:flex;gap:12px;z-index:10}
#homeBtns button,#mapBtns button,#roomBtns button{font-size:19px;font-weight:900;padding:15px 28px;border-radius:22px;color:#fff;
  border:2px solid var(--line);text-shadow:var(--txt-out);letter-spacing:.5px;position:relative;
  box-shadow:0 6px 0 var(--edge),0 12px 20px rgba(60,40,100,.35),inset 0 3px 0 rgba(255,255,255,.45),inset 0 -4px 0 rgba(0,0,0,.15);
  transition:transform .08s}
#homeBtns button:hover,#mapBtns button:hover,#roomBtns button:hover{transform:translateY(-3px) scale(1.03)}
#homeBtns button:active,#mapBtns button:active,#roomBtns button:active{transform:translateY(3px);
  box-shadow:0 2px 0 var(--edge),inset 0 3px 0 rgba(255,255,255,.45)}
#advBtn{background:linear-gradient(180deg,#7ec2ff,#4f8ef0)}
#feedBtn{background:linear-gradient(180deg,#ffbc6b,#f0862c)}
#roomBtn{background:linear-gradient(180deg,#ffa0c8,#ef5f9c)}
#roomHomeBtn{background:linear-gradient(180deg,#a795f8,#7a5fe8)}
#roomFeedBtn{background:linear-gradient(180deg,#7fd98a,#3fae57)}
#furnBtn{background:linear-gradient(180deg,#ffbc6b,#f0862c)}
#mapHomeBtn{background:linear-gradient(180deg,#a795f8,#7a5fe8)}
#dressBtn{background:linear-gradient(180deg,#ffa0c8,#ef5f9c)}

/* ═══════════ 월드맵 HUD ═══════════ */
#mapBar{position:fixed;top:calc(58px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;z-index:10}
#mapBar button{width:48px;height:48px;border-radius:16px;font-size:20px;font-weight:900;color:#fff;
  background:linear-gradient(180deg,#a795f8,#7a5fe8);border:2px solid var(--line);
  text-shadow:var(--txt-out);
  box-shadow:0 4px 0 var(--edge),inset 0 2px 0 rgba(255,255,255,.4);transition:transform .1s}
#mapBar button:hover{transform:scale(1.1) rotate(-3deg)}
#mapBar button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}
#mapBar button:disabled{opacity:.35;cursor:default;transform:none}
#wName{min-width:230px;text-align:center;font-size:22px;font-weight:900;color:#fff;
  background:linear-gradient(180deg,#5a4a86,#413060);padding:10px 26px;border-radius:99px;
  border:2px solid var(--line);text-shadow:0 2px 0 rgba(0,0,0,.4);
  box-shadow:0 4px 0 var(--edge),inset 0 2px 0 rgba(255,255,255,.2)}
#wProg{font-size:13px;font-weight:800;color:#ffd76b;display:block;margin-top:1px;text-shadow:0 1px 0 rgba(0,0,0,.4)}

/* ═══════════ 스테이지 플레이 HUD ═══════════ */
#targetBox{position:fixed;top:calc(58px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  z-index:10;text-align:center;background:linear-gradient(180deg,#fffef8,#f4ecff);
  border-radius:22px;padding:4px 36px 10px;border:2px solid var(--line);
  box-shadow:0 6px 0 var(--edge),0 12px 20px rgba(60,40,100,.35),inset 0 2px 0 #fff}
body.bossMode #targetBox{top:calc(108px + env(safe-area-inset-top))}
#targetBox .lbl{display:inline-block;font-size:11px;font-weight:900;color:#fff;letter-spacing:3px;
  background:linear-gradient(180deg,#a795f8,#7a5fe8);padding:4px 16px;border-radius:0 0 12px 12px;
  margin-top:-4px;border:2px solid var(--line);border-top:none;text-shadow:0 1px 0 rgba(0,0,0,.35)}
#targetN{font-size:42px;font-weight:900;color:#4f5aa8;line-height:1.1;text-shadow:0 3px 0 #d8cef5}
#stageInfo{font-size:13px;font-weight:800;color:var(--ink-soft)}

#ops{position:fixed;bottom:calc(96px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  display:flex;gap:12px;z-index:10}
.op{width:66px;height:66px;border-radius:22px;font-size:30px;font-weight:900;color:#fff;
  background:linear-gradient(180deg,#a795f8,#7a5fe8);border:2px solid var(--line);
  text-shadow:var(--txt-out);
  box-shadow:0 6px 0 var(--edge),0 10px 16px rgba(60,40,100,.3),inset 0 3px 0 rgba(255,255,255,.45),inset 0 -4px 0 rgba(0,0,0,.15);
  transition:transform .08s}
.op:hover{transform:scale(1.12) rotate(-4deg)}
.op:active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge),inset 0 3px 0 rgba(255,255,255,.45)}

#gameCtrl{position:fixed;bottom:calc(26px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:10}
#gameCtrl button{font-size:17px;font-weight:900;padding:14px 22px;border-radius:19px;color:var(--ink);
  background:linear-gradient(180deg,#fffef8,#ece2fa);border:2px solid var(--line);
  box-shadow:0 4px 0 var(--edge),inset 0 2px 0 #fff;transition:transform .08s}
#gameCtrl button:hover{transform:translateY(-2px)}
#gameCtrl button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}
#gameCtrl button:disabled{opacity:.45;cursor:default;transform:none}
#gameCtrl #quitBtn{background:linear-gradient(180deg,#ff9b93,#e8544e);color:#fff;border-color:#ffc9c4;
  text-shadow:0 2px 3px rgba(120,20,20,.4);box-shadow:0 4px 0 rgba(150,40,40,.35),inset 0 2px 0 rgba(255,255,255,.35)}

/* ═══════════ 보스 HUD ═══════════ */
#bossHud{position:fixed;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  z-index:40;width:min(560px,86vw);pointer-events:none}
#bossNameRow{display:flex;align-items:baseline;gap:8px;margin-bottom:5px;color:#fff;justify-content:center;
  text-shadow:0 2px 0 rgba(0,0,0,.5),0 0 12px rgba(255,60,90,.5)}
#bossEmblem{font-size:22px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
#bossTitle{font-size:13px;font-weight:800;opacity:.9;letter-spacing:1px}
#bossName{font-size:22px;font-weight:900;letter-spacing:2px}
#bossHp{display:flex;gap:4px;padding:5px;border-radius:12px;
  background:linear-gradient(#1a1626,#241c33);border:2px solid #4a3a5e;
  box-shadow:0 4px 0 rgba(20,12,35,.9),0 8px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1)}
#bossHp .seg{flex:1;height:17px;border-radius:5px;transform:skewX(-14deg);
  background:#2c2438;box-shadow:inset 0 2px 3px rgba(0,0,0,.5);position:relative;overflow:hidden}
#bossHp .seg.full{background:linear-gradient(180deg,#ff8f5e 0%,#ff4d6d 45%,#c81e4f 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(120,0,30,.55),0 0 8px rgba(255,77,109,.55)}
#bossHp .seg.full::after{content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 45%,transparent 60%);
  animation:hpShine 2.8s linear infinite}
@keyframes hpShine{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
#bossHp .seg.fillIn{animation:hpFill .28s ease-out backwards}
@keyframes hpFill{from{transform:skewX(-14deg) scaleY(0)}}
#bossHp .seg.lost{animation:hpLost .5s ease-out forwards}
@keyframes hpLost{
  0%{background:#fff;box-shadow:0 0 14px #fff;transform:skewX(-14deg) scaleY(1.4)}
  60%{background:#ff4d6d}
  100%{background:#2c2438;transform:skewX(-14deg) scaleY(1);box-shadow:inset 0 2px 3px rgba(0,0,0,.5)}}
#bossHud.hit{animation:hudShake .35s}
@keyframes hudShake{0%,100%{transform:translateX(-50%)}20%{transform:translateX(calc(-50% - 7px))}
  45%{transform:translateX(calc(-50% + 6px))}70%{transform:translateX(calc(-50% - 3px))}}
#hitVignette{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:0;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(200,20,45,.55) 100%);transition:opacity .12s}
#hitVignette.on{opacity:1}

#bossIntroBanner{position:fixed;top:38%;left:0;right:0;z-index:42;text-align:center;pointer-events:none}
#bossIntroBanner .vs{font-size:clamp(52px,11vw,96px);font-weight:900;letter-spacing:14px;color:#ff4d6d;
  text-shadow:-2px -2px 0 #2a0a14,2px -2px 0 #2a0a14,-2px 2px 0 #2a0a14,2px 2px 0 #2a0a14,0 6px 0 #7d1230,0 12px 26px rgba(0,0,0,.6);
  animation:bannerIn .4s cubic-bezier(.22,.9,.3,1) both}
#bossIntroBanner .bn{font-size:clamp(17px,3.4vw,26px);font-weight:900;letter-spacing:6px;color:#fff;
  margin-top:6px;text-shadow:var(--txt-out);animation:bannerIn .4s cubic-bezier(.22,.9,.3,1) .15s both}
@keyframes bannerIn{from{opacity:0;transform:translateY(26px) scale(1.25);letter-spacing:18px}
  to{opacity:1;transform:translateY(0) scale(1)}}

/* ═══════════ 토스트 / 말풍선 ═══════════ */
#toast{position:fixed;top:auto;bottom:calc(248px + env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%) scale(.9);z-index:30;
  background:linear-gradient(180deg,#5a4a86,#413060);color:#fff;
  font-size:16px;font-weight:800;padding:12px 26px;border-radius:99px;
  border:2px solid var(--line);box-shadow:0 4px 0 var(--edge),0 8px 16px rgba(0,0,0,.3);
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  opacity:0;transition:all .25s;pointer-events:none;white-space:nowrap}
#toast.show{opacity:1;transform:translateX(-50%) scale(1)}
#bubble{position:fixed;top:calc(184px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  z-index:30;max-width:86vw;background:linear-gradient(180deg,#fffdf2,#fff6d8);
  border:2px solid var(--line);color:#6b5d2a;
  font-size:18px;font-weight:800;padding:14px 24px;border-radius:20px;
  box-shadow:0 5px 0 var(--edge),0 10px 22px rgba(80,60,120,.3)}

/* ═══════════ 모달 (리본 타이틀 팝업) ═══════════ */
#modalWrap{position:fixed;inset:0;z-index:52;background:rgba(40,28,64,.55);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px)}
#modal{background:linear-gradient(180deg,#fffef8,#f4ecff);border-radius:28px;
  width:min(560px,92vw);max-height:84vh;
  display:flex;flex-direction:column;border:3px solid var(--line);position:relative;
  box-shadow:0 8px 0 var(--edge),0 26px 60px rgba(30,18,55,.5),inset 0 3px 0 #fff;
  animation:modalIn .32s cubic-bezier(.22,1.4,.36,1);margin-top:20px}
@keyframes modalIn{from{opacity:0;transform:scale(.8) translateY(30px)}to{opacity:1;transform:scale(1) translateY(0)}}
#modalHead{display:flex;align-items:center;justify-content:center;padding:0 22px;min-height:26px}
#modalTitle{position:relative;margin-top:-26px;flex:none;
  background:linear-gradient(180deg,#ffd76b,#f5a93c);color:#fff;
  font-size:21px;font-weight:900;letter-spacing:1px;text-shadow:var(--txt-out);
  padding:11px 38px;border-radius:16px;border:2px solid var(--line);transform:rotate(-1.5deg);
  box-shadow:0 5px 0 var(--edge),0 9px 16px rgba(60,40,100,.35),inset 0 2px 0 rgba(255,255,255,.5)}
#modalClose{position:absolute;top:-16px;right:-14px;font-size:18px;font-weight:900;
  width:42px;height:42px;border-radius:99px;background:linear-gradient(180deg,#ff8f8f,#e85555);
  color:#fff;border:2px solid var(--line);text-shadow:0 1px 0 rgba(0,0,0,.35);
  box-shadow:0 4px 0 var(--edge),inset 0 2px 0 rgba(255,255,255,.4);transition:transform .1s;z-index:2}
#modalClose:hover{transform:scale(1.12) rotate(90deg)}
#modalTabs{display:flex;gap:6px;padding:14px 22px 12px;flex-wrap:wrap}
#modalTabs button{font-size:14px;font-weight:900;padding:8px 16px;border-radius:99px;
  background:#e8def5;color:var(--ink-soft);border:2px solid transparent;transition:all .12s}
#modalTabs button.sel{background:linear-gradient(180deg,#a795f8,#7a5fe8);color:#fff;
  border-color:var(--ink);box-shadow:0 3px 0 var(--edge);text-shadow:0 1px 0 rgba(0,0,0,.3)}
#modalBody{overflow-y:auto;padding:6px 22px 22px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
#modalBody.single{grid-template-columns:1fr}
.item{border:3px solid #d8c9f2;border-radius:20px;padding:14px 10px;text-align:center;position:relative;
  background:#fff;box-shadow:0 3px 0 #d8c9f2}
.item .emo{font-size:40px;line-height:1.2;filter:drop-shadow(0 3px 3px rgba(60,40,100,.2))}
.item .nm{font-size:15px;font-weight:900;color:var(--ink);margin:4px 0 2px}
.item .desc{font-size:12px;color:var(--ink-soft);min-height:16px;font-weight:700}
.item button{margin-top:8px;font-size:13px;font-weight:900;padding:8px 18px;border-radius:99px;color:#fff;
  background:linear-gradient(180deg,#7ec2ff,#4f8ef0);border:2px solid var(--line);
  text-shadow:0 1px 0 rgba(0,0,0,.3);box-shadow:0 3px 0 var(--edge);transition:transform .08s}
.item button:hover{transform:translateY(-2px)}
.item button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--edge)}
.item button.own{background:linear-gradient(180deg,#a795f8,#7a5fe8)}
.item button.equipped{background:linear-gradient(180deg,#7dd8a0,#3fb56e)}
.item button:disabled{background:#cfc6de;cursor:default;box-shadow:0 3px 0 #a89fc0;transform:none}

/* 스테이지/클리어/일시정지 카드 */
.stageCard{text-align:center;padding:6px 4px 2px}
.stageCard .big{font-size:52px;line-height:1.1;filter:drop-shadow(0 4px 4px rgba(60,40,100,.25));
  animation:bigPop .45s cubic-bezier(.22,1.5,.36,1)}
@keyframes bigPop{from{transform:scale(.3) rotate(-12deg);opacity:0}to{transform:scale(1) rotate(0)}}
.stageCard h3{font-size:23px;font-weight:900;color:var(--ink);margin:6px 0 2px}
.stageCard .rule{font-size:15px;font-weight:800;color:var(--ink-soft);margin:2px 0}
.stageCard .stars{font-size:42px;letter-spacing:6px;margin:8px 0 2px;
  filter:drop-shadow(0 3px 0 rgba(60,40,100,.25))}
.stageCard .rewards{background:linear-gradient(180deg,#f6f0ff,#ece2fa);border:2px dashed #c4b2e8;
  border-radius:18px;padding:12px;margin:12px 0;font-size:15px;font-weight:800;color:#5a4a7a;line-height:1.9}
.stageCard .btnRow{display:flex;gap:10px;justify-content:center;margin:12px 0 8px;flex-wrap:wrap}
.stageCard .btnRow button{font-size:17px;font-weight:900;padding:14px 32px;border-radius:20px;color:#fff;
  border:2px solid var(--line);text-shadow:var(--txt-out);
  box-shadow:0 5px 0 var(--edge),0 10px 16px rgba(60,40,100,.3),inset 0 2px 0 rgba(255,255,255,.45);
  transition:transform .08s}
.stageCard .btnRow button:hover{transform:translateY(-3px) scale(1.03)}
.stageCard .btnRow button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}
.stageCard .btnRow .go{background:linear-gradient(180deg,#7ec2ff,#4f8ef0)}
.stageCard .btnRow .sub{background:linear-gradient(180deg,#c9bfe0,#a394c8)}
.stageCard .btnRow .danger{background:linear-gradient(180deg,#ff7a6b,#e04444)}
.stageCard .btnRow button:disabled{opacity:.55;transform:none;cursor:default;
  box-shadow:0 5px 0 var(--edge)}

/* ═══════════ 설정 ═══════════ */
.setRow{display:flex;align-items:center;gap:12px;min-height:58px;padding:6px 2px;border-bottom:2px dashed #e4daf5}
.setRow:last-child{border-bottom:none}
.setRow .lab{flex:1}
.setRow .lab b{display:block;font-size:15px;font-weight:900;color:var(--ink)}
.setRow .lab small{font-size:12px;color:var(--ink-soft);font-weight:700}
.setRow.danger .lab b{color:#e04444}
.setRow input[type=text]{border:3px solid #d8c9f2;border-radius:14px;padding:9px 12px;width:120px;
  font-family:inherit;font-size:14px;font-weight:800;color:var(--ink);outline:none;background:#fff}
.setRow input[type=text]:focus{border-color:#7a5fe8}
.btnDanger{font-size:14px;font-weight:900;padding:10px 18px;border-radius:16px;color:#fff;
  background:linear-gradient(180deg,#ff7a6b,#e04444);border:2px solid var(--line);
  text-shadow:0 1px 0 rgba(0,0,0,.3);box-shadow:0 4px 0 var(--edge);transition:transform .08s}
.btnDanger:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}
.btnDanger:disabled{opacity:.5;cursor:default;transform:none}
/* 토글 */
.tgl{position:relative;display:inline-block;width:56px;height:32px;flex:none}
.tgl input{position:absolute;opacity:0;width:0;height:0}
.tgl .knob{position:absolute;inset:0;border-radius:99px;background:#d5cbe8;cursor:pointer;
  border:2px solid var(--line);box-shadow:inset 0 2px 3px rgba(61,46,92,.25);
  transition:background .25s cubic-bezier(.3,.9,.4,1)}
.tgl .knob::before{content:'';position:absolute;top:1px;left:1px;width:24px;height:24px;border-radius:99px;
  background:linear-gradient(180deg,#fff,#f0e8fc);box-shadow:0 2px 4px rgba(61,46,92,.35);
  transition:transform .25s cubic-bezier(.3,.9,.4,1)}
.tgl input:checked + .knob{background:linear-gradient(180deg,#8fd7a5,#3fb56e)}
.tgl input:checked + .knob::before{transform:translateX(24px)}
/* 세그먼트 */
.segCtl{display:flex;background:#e8def5;border-radius:99px;padding:3px;gap:2px;border:2px solid #d0c2ea}
.segCtl button{font-size:13px;font-weight:900;padding:7px 16px;border-radius:99px;color:var(--ink-soft);background:transparent}
.segCtl button.sel{background:linear-gradient(180deg,#a795f8,#7a5fe8);color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.3);box-shadow:0 2px 0 var(--edge)}
/* 볼륨 슬라이더 */
.volRow input[type=range]{-webkit-appearance:none;appearance:none;width:130px;height:12px;border-radius:99px;touch-action:none;
  background:linear-gradient(90deg,#a795f8 var(--v,50%),#e5dcf2 var(--v,50%));outline:none;
  border:2px solid rgba(61,46,92,.4)}
.volRow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;
  border-radius:99px;background:linear-gradient(180deg,#fff,#f0e8fc);border:2px solid var(--line);
  box-shadow:0 2px 0 var(--edge);cursor:pointer}
/* 기록 */
.statGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:10px;margin-bottom:14px}
.statTile{background:#fff;border:3px solid #d8c9f2;border-radius:18px;padding:12px;text-align:center;
  box-shadow:0 3px 0 #d8c9f2}
.statTile .e{font-size:26px;filter:drop-shadow(0 2px 2px rgba(60,40,100,.2))}
.statTile .v{font-size:21px;font-weight:900;color:var(--ink);margin-top:2px}
.statTile .l{font-size:12px;color:var(--ink-soft);font-weight:800}
.worldRow{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:2px dashed #e4daf5}
.worldRow:last-child{border-bottom:none}
.worldRow .wn{flex:1;font-size:15px;font-weight:900;color:var(--ink)}
.worldRow .ws{font-size:13px;font-weight:900;color:var(--ink-soft);min-width:44px;text-align:right}
.worldRow .wt{width:110px;height:12px;border-radius:99px;background:#e5dcf2;overflow:hidden;
  border:2px solid rgba(61,46,92,.3)}
.worldRow .wt div{height:100%;border-radius:99px}
.worldRow.locked{filter:grayscale(1);opacity:.45}

/* ═══════════ 스테이지 정보 패널 (비차단) ═══════════ */
#stagePanel{position:fixed;bottom:calc(100px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  z-index:11;display:flex;align-items:center;gap:12px;width:min(470px,94vw);
  background:linear-gradient(180deg,#fffef8,#f4ecff);border:2px solid var(--line);border-radius:22px;
  padding:11px 15px;
  box-shadow:0 6px 0 var(--edge),0 14px 26px rgba(60,40,100,.35),inset 0 2px 0 #fff;
  animation:panelUp .32s cubic-bezier(.22,1.4,.36,1)}
@keyframes panelUp{from{opacity:0;transform:translateX(-50%) translateY(30px) scale(.9)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
#spEmoji{font-size:36px;flex:none;filter:drop-shadow(0 3px 3px rgba(60,40,100,.25))}
#spInfo{flex:1;min-width:0}
#spTitle{font-size:16px;font-weight:900;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#spRule{font-size:12px;font-weight:800;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#spStars{font-size:16px;letter-spacing:3px;line-height:1.1}
#spGo{flex:none;font-size:16px;font-weight:900;color:#fff;padding:13px 24px;border-radius:18px;
  background:linear-gradient(180deg,#7ec2ff,#4f8ef0);border:2px solid var(--line);
  text-shadow:var(--txt-out);
  box-shadow:0 4px 0 var(--edge),inset 0 2px 0 rgba(255,255,255,.45);transition:transform .08s}
#spGo:hover{transform:translateY(-2px) scale(1.05)}
#spGo:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}
#spClose{position:absolute;top:-13px;right:-11px;width:34px;height:34px;border-radius:99px;
  background:linear-gradient(180deg,#ff8f8f,#e85555);border:2px solid var(--line);color:#fff;
  font-size:14px;font-weight:900;box-shadow:0 3px 0 var(--edge);transition:transform .1s}
#spClose:hover{transform:scale(1.15) rotate(90deg)}

/* ═══════════ 타이틀 화면 ═══════════ */
#title{position:fixed;inset:0;z-index:45;display:flex;align-items:center;justify-content:center;overflow:hidden}
#titleVeil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 32%,rgba(255,255,255,0) 42%,rgba(26,20,48,.38) 100%)}
#titleInner{position:relative;text-align:center;padding:0 20px;transform:translateY(-4vh)}
#titleLogo{position:relative;font-size:clamp(38px,8.2vw,84px);font-weight:900;letter-spacing:-1px;
  line-height:1.12;word-break:keep-all;
  animation:logoDrop .65s cubic-bezier(.34,1.56,.64,1) .15s both}
#titleLogo .depth{position:absolute;inset:0;color:#8a5a1c;
  text-shadow:0 1px 0 #a06c24,0 2px 0 #96631f,0 3px 0 #8a5a1c,0 4px 0 #7d5118,0 5px 0 #714914,
    0 10px 18px rgba(40,25,60,.5)}
#titleLogo .fill{position:relative;z-index:1;
  background:linear-gradient(180deg,#fffbe8 0%,#ffd76b 52%,#f5a93c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@keyframes logoDrop{0%{opacity:0;transform:translateY(-46px) scale(1.35)}
  60%{opacity:1;transform:translateY(6px) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
#titleSub{margin-top:10px;font-size:clamp(14px,2.6vw,19px);font-weight:900;color:#fff;
  text-shadow:var(--txt-out);animation:fadeUp .4s ease .55s both}
#tapHint{margin-top:8vh;font-size:17px;font-weight:900;color:#fff;letter-spacing:2px;
  text-shadow:var(--txt-out);
  animation:fadeUp .4s ease .9s both,tapPulse 1.6s ease-in-out 1.3s infinite}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes tapPulse{50%{opacity:.45}}
#titleMenu{margin-top:4vh;display:flex;flex-direction:column;gap:13px;align-items:center}
#titleMenu .tBtn{animation:fadeUp .32s cubic-bezier(.22,.9,.3,1) both}
#btnContinue{animation-delay:0ms}#btnNew{animation-delay:70ms}
#btnSettings{animation-delay:140ms}#btnRecords{animation-delay:210ms}
.tBtn.main{min-width:250px;font-size:21px;font-weight:900;color:#fff;padding:17px 42px;border-radius:22px;
  background:linear-gradient(180deg,#7ec2ff,#4f8ef0);border:2px solid var(--line);
  text-shadow:var(--txt-out);
  box-shadow:0 6px 0 var(--edge),0 14px 26px rgba(30,20,60,.4),inset 0 3px 0 rgba(255,255,255,.45),inset 0 -4px 0 rgba(0,0,0,.15);
  transition:transform .1s}
.tBtn.main:hover{transform:translateY(-3px) scale(1.04)}
.tBtn.main:active{transform:translateY(3px);box-shadow:0 2px 0 var(--edge)}
.tBtn.sub2{background:linear-gradient(180deg,#a795f8,#7a5fe8)}
.tRow{display:flex;gap:10px}
.tBtn.mini{font-size:15px;font-weight:900;padding:12px 24px;border-radius:99px;color:var(--ink);
  background:linear-gradient(180deg,#fffef8,#ece2fa);border:2px solid var(--line);
  box-shadow:0 4px 0 var(--edge),0 8px 14px rgba(30,20,60,.3),inset 0 2px 0 #fff;transition:transform .1s}
.tBtn.mini:hover{transform:translateY(-2px)}
.tBtn.mini:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}
#titleVer{position:absolute;bottom:calc(12px + env(safe-area-inset-bottom));width:100%;text-align:center;
  font-size:12px;font-weight:800;color:rgba(255,255,255,.8);text-shadow:0 1px 3px rgba(40,25,70,.5)}

/* ═══════════ 전환 ═══════════ */
#flash{position:fixed;inset:0;background:#fff;z-index:50;opacity:0;pointer-events:none;transition:opacity .45s}
.petSay{position:fixed;transform:translate(-50%,-115%);background:#fffdf6;border:2px solid var(--line);
  border-radius:16px;padding:8px 15px;font-size:14px;font-weight:800;color:var(--ink);z-index:9;
  opacity:0;pointer-events:none;transition:opacity .25s;box-shadow:0 3px 0 var(--edge);
  max-width:75vw;text-align:center;white-space:nowrap}
.petSay.show{opacity:1}
.petSay::after{content:'';position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  border:9px solid transparent;border-top-color:#fffdf6;border-bottom:0}
@keyframes bossJolt{
  0%,100%{transform:translate(0,0)}
  12%{transform:translate(-9px,6px) rotate(-.4deg)}
  28%{transform:translate(8px,-7px) rotate(.35deg)}
  44%{transform:translate(-7px,4px) rotate(-.25deg)}
  60%{transform:translate(5px,-4px)}
  76%{transform:translate(-3px,2px)}
  90%{transform:translate(2px,-1px)}}
body.jolt{animation:bossJolt .5s cubic-bezier(.36,.07,.19,.97)}
#iris{position:fixed;inset:0;z-index:60;background:#1a1430;display:none;pointer-events:none}
#iris.on{display:block;pointer-events:auto}

/* ═══════════ 모바일: 폭 700px 미만 ═══════════ */
@media (max-width:699px){
  #topbar{top:calc(8px + env(safe-area-inset-top));left:8px;right:8px;gap:6px}
  .pill{font-size:13px;padding:6px 12px;border-width:2px;box-shadow:0 3px 0 var(--edge),inset 0 1px 0 #fff}
  #petPanel{top:calc(54px + env(safe-area-inset-top));left:8px}
  .op{width:58px;height:58px;font-size:26px;border-radius:18px}
  #ops{gap:10px;bottom:calc(88px + env(safe-area-inset-bottom))}
  #toast{bottom:calc(218px + env(safe-area-inset-bottom));font-size:13px;max-width:92vw;white-space:normal;text-align:center;padding:10px 18px;border-radius:20px}
  #gameCtrl{bottom:calc(12px + env(safe-area-inset-bottom));gap:7px}
  #gameCtrl button{font-size:14px;padding:12px 13px;min-height:50px;border-width:2px;box-shadow:0 3px 0 var(--edge)}
  #homeBtns,#mapBtns,#roomBtns{bottom:calc(30px + env(safe-area-inset-bottom));gap:8px}
  #homeBtns button,#mapBtns button,#roomBtns button{font-size:14px;padding:12px 14px}
  #targetBox{padding:2px 24px 8px;top:calc(52px + env(safe-area-inset-top))}
  body.bossMode #targetBox{top:calc(96px + env(safe-area-inset-top))}
  #targetN{font-size:32px}
  #stageInfo{font-size:11px}
  #wName{min-width:0;font-size:16px;padding:0 16px;height:46px;white-space:nowrap;
    display:flex;align-items:center;justify-content:center;gap:7px}
  #wProg{white-space:nowrap}
  #wProg{display:inline;margin-top:0;font-size:12px}
  #mapBar{top:calc(52px + env(safe-area-inset-top));gap:7px}
  #mapBar button{width:46px;height:46px;font-size:17px;border-radius:99px}
  #bubble{font-size:15px;padding:11px 18px}
  #bossName{font-size:17px}
  #bossHp .seg{height:14px}
  #stagePanel{bottom:calc(92px + env(safe-area-inset-bottom));padding:9px 12px;gap:8px}
  #spGo{font-size:14px;padding:11px 16px}
  #spEmoji{font-size:30px}
  #modalTitle{font-size:18px;padding:9px 28px}
}

/* ═══════════ 세로 모드 ═══════════ */
body.portrait #starN + i{display:none}
body.portrait #homeBtns{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:min(94vw,430px)}
body.portrait #homeBtns button{width:100%;font-size:15px;padding:13px 8px}
body.portrait #roomBtns{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:min(94vw,430px)}
body.portrait #roomBtns button{width:100%;font-size:15px;padding:13px 8px;white-space:nowrap}
body.portrait #mapBtns{max-width:94vw;flex-wrap:wrap;justify-content:center}
body.portrait #modalWrap{align-items:flex-end}
body.portrait #modal{width:100%;max-width:100%;max-height:82vh;border-radius:26px 26px 0 0;
  padding-bottom:env(safe-area-inset-bottom);animation:sheetUp .3s cubic-bezier(.22,.9,.3,1);
  border-bottom:none;box-shadow:0 -4px 30px rgba(30,18,55,.4);margin-top:0}
body.portrait #modalClose{right:10px;top:-18px}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ═══════════ 하트 (플레이어 목숨) ═══════════ */
#hearts{font-size:15px;letter-spacing:3px;margin-top:2px;line-height:1.2;
  filter:drop-shadow(0 2px 2px rgba(60,40,100,.25))}
#hearts.pulse{animation:heartPulse .4s ease}
@keyframes heartPulse{30%{transform:scale(1.22)}}
@media (max-width:699px){#hearts{font-size:13px;letter-spacing:2px}}