html,body{margin:0;height:100%;overflow:hidden;background:#ffe3ea;font-family:'Gowun Dodum','Apple SD Gothic Neo','Noto Sans KR',sans-serif;color:var(--ink);overscroll-behavior:none}
button{cursor:pointer;border:0;color:inherit}
#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#hud .top{position:absolute;left:10px;right:10px;top:max(10px,env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:center;pointer-events:auto}
.title-pill{display:flex;align-items:center;gap:6px;background:rgba(255,250,240,.92);border:2.5px solid var(--ink);border-radius:999px;padding:5px 14px 5px 10px;font-family:'Jua';font-size:19px;box-shadow:0 3px 0 var(--ink)}
.title-pill small{font-size:11px;background:var(--pink);border:2px solid var(--ink);border-radius:8px;padding:0 5px;font-family:'Jua'}
.tbtns{display:flex;gap:6px}
.chip-btn{background:rgba(255,250,240,.95);border:2.5px solid var(--ink)!important;border-radius:999px;height:36px;min-width:36px;padding:0 10px;font-size:14px;box-shadow:0 3px 0 var(--ink);display:flex;align-items:center;justify-content:center;gap:2px;font-family:'Jua'}
.chip-btn b{font-weight:400;opacity:.35}.chip-btn b.on{opacity:1;color:var(--red)}
#labels{position:absolute;inset:0;pointer-events:none}
.lbl{position:absolute;transform:translate(-50%,-100%);white-space:nowrap;background:rgba(255,250,240,.95);border:2px solid var(--ink);border-radius:999px;padding:1px 9px;font-family:'Jua';font-size:13px;transition:opacity .3s}
.lbl.lock{background:#eee;color:#888}
#actBtn{position:absolute;left:50%;bottom:170px;transform:translateX(-50%) scale(0);transition:transform .25s cubic-bezier(.3,1.6,.6,1);pointer-events:auto;white-space:nowrap}
#actBtn.on{transform:translateX(-50%) scale(1)}
#dialog{position:absolute;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 24px));bottom:max(30px,env(safe-area-inset-bottom));min-height:104px;background:var(--paper);border:3px solid var(--ink);border-radius:22px;box-shadow:0 5px 0 var(--ink),inset 0 0 0 5px #f3e2c2;padding:14px 16px 12px 92px;font-size:15.5px;line-height:1.5;pointer-events:auto;transition:opacity .3s,transform .3s}
#dialog.off{opacity:0;transform:translate(-50%,30px);pointer-events:none}
#dialog .ava{position:absolute;left:10px;top:12px;width:72px;height:72px;border-radius:50%;background:linear-gradient(#ffe7ee,#fff3dd);border:2.5px solid var(--ink);overflow:hidden;display:flex;align-items:center;justify-content:center}
#dialog .ava svg{width:62px;height:70px;margin-top:6px}
#dialog .hint{font-size:12px;color:var(--ink2);margin-top:6px}
#notice{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:11px;color:var(--ink2);opacity:.85}
.sheet{position:fixed;inset:0;z-index:20;display:none;flex-direction:column;align-items:center}
.sheet.on{display:flex}
#formSheet{background:rgba(42,26,18,.25)}
#formSheet .card{width:min(520px,100%)}
#ritualSheet{pointer-events:none;justify-content:flex-start;padding-top:70px}
#ritualTxt{font-family:'Jua';font-size:22px;background:rgba(255,250,240,.92);border:2.5px solid var(--ink);border-radius:999px;padding:6px 18px;box-shadow:0 3px 0 var(--ink);animation:popin .4s cubic-bezier(.3,1.6,.6,1)}
#skipBtn{position:absolute;right:12px;bottom:24px;pointer-events:auto}
#readSheet{background:linear-gradient(rgba(255,227,234,.15),rgba(42,26,18,.35));justify-content:center;padding:58px 10px 12px}
.rcard{width:min(560px,100%);height:100%;display:flex;flex-direction:column;animation:unroll .9s cubic-bezier(.2,1,.3,1)}
.rcard .paper{flex:1;min-height:0;background:var(--hanji);border-left:2.5px solid var(--ink);border-right:2.5px solid var(--ink);margin:0 6px}
.rcard .paper .in{height:100%;overflow:auto;padding:18px 16px 26px;-webkit-overflow-scrolling:touch}
.rcard h2{margin:0 0 4px;font-size:22px;font-weight:400;display:flex;justify-content:center}
@keyframes unroll{from{clip-path:inset(48% 0 48% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes popin{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.paper h3{font-weight:400;font-size:19px;margin:18px 0 6px;color:var(--red);display:flex;align-items:center;gap:6px}
.paper p{margin:6px 0;font-size:14.5px;line-height:1.6}
.ctl{display:flex;justify-content:center;gap:8px;margin-top:14px;flex-wrap:wrap}
#amuletSheet{pointer-events:none;justify-content:flex-end}
.apanel{pointer-events:auto;width:min(520px,100%);background:rgba(255,250,240,.96);border:3px solid var(--ink);border-bottom:0;border-radius:24px 24px 0 0;padding:12px 14px 16px;animation:up .45s cubic-bezier(.2,1.2,.4,1);max-height:46vh;overflow:auto}
.apanel h2{margin:0 0 6px;font-size:21px;font-weight:400;text-align:center}
.apanel .btnrow{flex-wrap:wrap}
.apanel .btn{font-size:16px;padding:9px 16px}
.apanel .note{font-size:11.5px;color:var(--ink2);text-align:center;margin-top:6px}
.modal{position:fixed;inset:0;z-index:40;background:rgba(42,26,18,.45);display:none;align-items:center;justify-content:center;padding:20px}
.modal.on{display:flex}
.modal .mc{max-width:380px}
.toast{position:fixed;z-index:50}
#loading{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:#ffe3ea;font-family:'Jua';font-size:28px;transition:opacity .5s}
#loading.off{opacity:0;pointer-events:none}
@media (min-width:700px){#actBtn{bottom:190px}}
#formSheet .card{margin-top:auto;background:var(--paper);border:3px solid var(--ink);border-bottom:0;border-radius:28px 28px 0 0;padding:20px 18px 26px;max-height:92%;overflow:auto;animation:up .45s cubic-bezier(.2,1.2,.4,1);box-shadow:0 -6px 0 rgba(42,26,18,.12)}
#formSheet h2{margin:0 0 4px;font-size:24px;font-weight:400;display:flex;align-items:center;gap:8px}
@media (min-aspect-ratio:1/1){
  #amuletSheet.on{justify-content:center;align-items:flex-end;padding-right:3vw}
  .apanel{width:min(420px,40vw);max-height:84vh;border-bottom:3px solid var(--ink);border-radius:24px}
}
/* ---------- multiplayer ---------- */
.mp-chip{font-size:13px;gap:4px}
.mp-chip.off{opacity:.8;background:#f2ede6}
#emoteBar{position:absolute;right:10px;bottom:178px;display:none;flex-direction:column;gap:6px;pointer-events:auto;transition:opacity .25s}
#emoteBar.on{display:flex}#emoteBar.hide{opacity:0;pointer-events:none}
#emoteBar .emo{width:42px;height:42px;border-radius:50%;background:rgba(255,250,240,.95);border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);font-size:20px;line-height:1;padding:0}
#emoteBar .emo:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.lbl.nick{display:flex;flex-direction:column;align-items:center;line-height:1.15;padding:2px 9px;font-size:12px;background:rgba(255,255,255,.88);transition:none}
.lbl.nick small{font-family:'Gowun Dodum',sans-serif;font-size:10px;color:var(--ink2)}
.lbl.nick small:empty{display:none}
.lbl.nick.mine{background:#ffe9a8}
.bubble{position:absolute;transform:translate(-50%,-100%) scale(0);transform-origin:50% 100%;background:#fff;border:2.5px solid var(--ink);border-radius:16px;padding:3px 10px;font-family:'Jua';font-size:14px;white-space:nowrap;transition:transform .2s cubic-bezier(.3,1.6,.6,1);opacity:0}
.bubble.on{transform:translate(-50%,-100%) scale(1)}
.bubble::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-6px;border:6px solid transparent;border-top-color:var(--ink);border-bottom:0}
#modalCard.mp{background:var(--paper,#fffaf0);border:3px solid var(--ink);border-radius:22px;padding:16px;width:min(380px,100%);max-height:86vh;overflow:auto;box-shadow:0 5px 0 var(--ink)}
#modalCard.mp h2{font-family:'Jua';font-weight:400;margin:0 0 6px;font-size:21px}
.mp-sec{font-family:'Jua';font-size:14px;margin:12px 0 6px;color:var(--ink2)}
.rooms{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.room{position:relative;overflow:hidden;text-align:left;background:#fff;border:2.5px solid var(--ink)!important;border-radius:14px;padding:8px 10px 10px;display:flex;flex-direction:column;gap:2px;font-family:inherit}
.room b{font-family:'Jua';font-weight:400;font-size:16px}.room span{font-size:12px;color:var(--ink2)}
.room i{position:absolute;left:0;bottom:0;height:5px;background:#7fd0a0}
.room.cur{background:#fff3c4}.room:disabled{opacity:.45;cursor:not-allowed;background:#eee}.room:disabled i{background:#e8708f}
.nickrow{display:flex;gap:6px}.nickrow input{flex:1;min-width:0;border:2.5px solid var(--ink);border-radius:12px;padding:6px 10px;font-size:15px;font-family:inherit}
.sw{display:flex;gap:8px;flex-wrap:wrap}.swc{width:32px;height:32px;border-radius:50%;border:2.5px solid var(--ink)!important;padding:0}.swc.on{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}
.mp-priv{font-size:12px;line-height:1.45;background:#f4fbf6;border:2px dashed #7fb69a;border-radius:12px;padding:8px 10px;margin:14px 0 10px}
.mp-off{font-size:13px;line-height:1.5;margin:0 0 8px;grid-column:1/-1}
#modalCard.mp .btn{width:100%}
.mp-chip{white-space:nowrap}
.bubble{transform:translate(-50%,calc(-100% - 34px)) scale(0)}.bubble.on{transform:translate(-50%,calc(-100% - 34px)) scale(1)}
.lbl.nick{transform:translate(-50%,-100%)}
@media (max-width:480px){.mp-chip .w{display:none}.mp-chip{padding-left:9px;padding-right:9px}}
/* ---- five-element chart + $1 paywall + pay modal ---- */
.elc{display:grid;gap:5px;margin:4px 0 10px}.elc .er{display:grid;grid-template-columns:74px 1fr 22px;align-items:center;gap:8px;font-size:13px}
.elc .en{font-weight:700}.elc .eb{height:12px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden}.elc .eb i{display:block;height:100%;border-radius:99px}.elc b{text-align:right}
.free1{background:#fff7d6;border:2px dashed #e2c15a;border-radius:12px;padding:9px 11px;margin:8px 0;font-size:14px;line-height:1.55}
.pz-card.free .pz-s{font-family:Jua,sans-serif;font-size:16px;padding:8px 12px 0}
.paywall{position:relative;margin:6px 0 12px}.paywall .fade{filter:blur(4px);opacity:.55;max-height:90px;overflow:hidden;pointer-events:none;user-select:none;-webkit-mask-image:linear-gradient(#000,transparent)}
.pw-in{margin-top:-40px;position:relative;background:#fffaf0;border:3px solid #3b2a24;border-radius:18px;box-shadow:0 5px 0 #3b2a24;padding:14px 14px 10px;text-align:center}
.pw-in .lock{font-size:30px;line-height:1}.pw-in h3{margin:4px 0 4px!important;justify-content:center}.pw-sub{font-size:12.5px;color:#8a6f62;margin:0 0 8px}
.pw-titles{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-bottom:10px}.pw-titles span{font-size:11.5px;background:#f3e9dc;border-radius:99px;padding:3px 8px;filter:saturate(.6)}
.btn.big{width:100%;font-size:19px;padding:14px}.pw-note{font-size:11.5px;color:#8a6f62;margin:8px 0 0}
.unl{text-align:center;font-size:13px;font-weight:700;color:#2f7a48;background:#e6f6ea;border-radius:99px;padding:5px 10px;margin:4px auto 8px;width:max-content;max-width:100%}
.modal .mc.pay{max-width:360px;text-align:center}.mc.pay h2{font-weight:400;margin:0 0 8px;font-size:20px}.mc.pay .price{color:#c2334d}
.qrbox{display:flex;justify-content:center;margin:6px 0}.qrbox canvas{width:220px;height:220px;image-rendering:pixelated;border:3px solid #3b2a24;border-radius:14px;background:#fff}
.mc.pay .scan{font-size:14px;margin:6px 0}.mc.pay .wait{font-size:12.5px;color:#8a6f62;display:flex;gap:6px;align-items:center;justify-content:center}
.mc.pay .wait .dot{width:8px;height:8px;border-radius:50%;background:#e2a52b;animation:pwb 1s infinite alternate}@keyframes pwb{to{opacity:.2}}
.mc.pay .btnrow a.btn{text-decoration:none;display:flex;align-items:center;justify-content:center}.mc.pay .mp-priv{font-size:11.5px;color:#8a6f62;line-height:1.5}

/* ---------- floating touch joystick (appears under a left-half touch) ---------- */
#dpad{position:fixed;left:0;top:0;width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;pointer-events:none;user-select:none;-webkit-user-select:none;z-index:11;
  background:radial-gradient(circle,rgba(255,250,240,0) 0 30%,rgba(42,26,18,.32) 31% 100%);border:2.5px solid rgba(201,154,46,.85);box-shadow:0 0 0 4px rgba(42,26,18,.25),inset 0 0 0 5px rgba(255,250,240,.18),0 4px 10px rgba(0,0,0,.18);
  opacity:0;transform:scale(.7);transition:opacity .3s,transform .2s}
#dpad.show{opacity:.82;transform:scale(1);transition:opacity .12s,transform .12s}
#dpad::before{content:"";position:absolute;inset:13px;border-radius:50%;border:1.5px dashed rgba(255,236,190,.45)}
#dpad .pa{position:absolute;width:0;height:0;border:14px solid transparent;filter:drop-shadow(0 2px 0 rgba(42,26,18,.55));transition:transform .08s}
#dpad .pa-u{left:50%;top:7px;margin-left:-14px;border-top:0;border-bottom:19px solid #fff3d6}
#dpad .pa-d{left:50%;bottom:7px;margin-left:-14px;border-bottom:0;border-top:19px solid #fff3d6}
#dpad .pa-l{top:50%;left:7px;margin-top:-14px;border-left:0;border-right:19px solid #fff3d6}
#dpad .pa-r{top:50%;right:7px;margin-top:-14px;border-right:0;border-left:19px solid #fff3d6}
#dpad .pa-u.on{border-bottom-color:#e8b730;transform:scale(1.15)}#dpad .pa-d.on{border-top-color:#e8b730;transform:scale(1.15)}
#dpad .pa-l.on{border-right-color:#e8b730;transform:scale(1.15)}#dpad .pa-r.on{border-left-color:#e8b730;transform:scale(1.15)}
#dpad .knob{position:absolute;left:50%;top:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#d8473c,#9e241c 70%);border:2.5px solid #e8c35a;box-shadow:0 3px 0 rgba(42,26,18,.6),inset 0 0 0 4px rgba(255,220,150,.25)}
#dpad .knob::after{content:"";position:absolute;inset:10px;border-radius:50%;border:2px solid rgba(255,226,160,.7)}
/* ---------- 산가지 함 · 소원 부적 상점 ---------- */
#shopSheet{background:rgba(42,26,18,.3);justify-content:flex-end}
#shopPanel{width:min(560px,100%);max-height:84vh}
#shopPanel .tabs{display:flex;gap:6px;justify-content:center;margin:0 0 6px}
#shopPanel .tabs button{font-family:Jua;font-size:14px;border:2px solid var(--ink);border-radius:999px;padding:3px 12px;background:#fff;color:var(--ink)}
#shopPanel .tabs button.on{background:var(--yellow)}
#shopPanel .wi{display:flex;gap:9px;align-items:center;border:2px solid rgba(42,26,18,.22);border-radius:14px;padding:7px;margin:7px 0;background:#fffaf0}
#shopPanel .wi.best{border:2.5px solid #c8102e;background:rgba(255,214,102,.2)}
#shopPanel .th canvas{width:58px;height:126px;border-radius:5px;display:block;box-shadow:0 2px 4px rgba(0,0,0,.35);cursor:zoom-in}
#shopPanel .tx{flex:1;font-size:12.3px;line-height:1.42}#shopPanel .tx b{font-family:Jua;font-weight:400;font-size:18px}
#shopPanel .tx i{font-style:normal;font-size:10.5px;background:#c8102e;color:#fff;border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:2px}
#shopPanel .tx .hz{font-family:'Noto Serif KR','Noto Serif CJK KR',serif;color:#b3261e;font-size:12px}
#shopPanel .bt{display:flex;flex-direction:column;gap:5px;align-items:stretch;flex:none}
#shopPanel .bt .btn{font-size:14px;padding:7px 11px;flex-direction:column;gap:0;line-height:1.1}#shopPanel .bt .btn small{font-size:11px}
#shopPanel .bt .own{font-size:11px;text-align:center;color:var(--green);font-weight:700}
.modal .mc.wishzoom{background:var(--paper);border:3px solid var(--ink);border-radius:22px;padding:12px 14px;text-align:center;max-width:94vw}
.mc.wishzoom .wz canvas{height:min(66vh,620px);width:auto;display:block;margin:auto;border-radius:8px}
@media (min-aspect-ratio:1/1){#shopSheet.on{justify-content:center}#shopPanel{width:min(520px,92vw);max-height:90vh;border-bottom:3px solid var(--ink);border-radius:24px}}

/* combat HUD */
#cbt{position:absolute;inset:0;pointer-events:none}
#cbt[hidden]{display:none}
#cbt .who{position:absolute;left:10px;top:calc(max(10px,env(safe-area-inset-top)) + 46px);background:rgba(255,250,240,.92);border:2.5px solid var(--ink);border-radius:999px;padding:2px 12px;font-family:'Jua';font-size:14px;box-shadow:0 3px 0 var(--ink)}
#cbt .keys{position:absolute;left:10px;bottom:10px;display:flex;gap:6px;flex-wrap:wrap;font-family:'Jua';font-size:12px}
#cbt .keys span{background:rgba(255,250,240,.88);border:2px solid var(--ink);border-radius:8px;padding:1px 7px}
#cbt .keys b{font-weight:400;color:var(--red)}
#cbt .tb{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:none;width:176px;height:176px;pointer-events:none}
#cbt .cb{position:absolute;pointer-events:auto;width:56px;height:56px;border-radius:50%;background:rgba(255,250,240,.95);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-size:24px;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
#cbt .cb:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
#cbt .cb.atk{width:84px;height:84px;font-size:36px;background:#ffd0d6;right:0;bottom:0}
#cbt .cb.blk{right:96px;bottom:2px}
#cbt .cb.dash{right:84px;bottom:82px}
#cbt .cb.jmp{right:6px;bottom:100px}
#cbt .cb.dash::before{content:"";position:absolute;inset:0;background:rgba(42,26,18,.55);height:var(--cd,0%);transition:none}
#cbt .cb.dash.wait{opacity:.8}
#cbt .cb.dash i{position:absolute;font-style:normal;font-family:'Jua';font-size:13px;color:#fff;text-shadow:0 0 3px #2a1a12,0 0 3px #2a1a12}
@media (pointer:coarse){#cbt .tb{display:block}#cbt .keys{display:none}}
@media (pointer:coarse) and (max-height:480px){#cbt .tb{width:150px;height:150px;bottom:max(10px,env(safe-area-inset-bottom))}#cbt .cb{width:50px;height:50px;font-size:21px}#cbt .cb.atk{width:72px;height:72px;font-size:31px}#cbt .cb.blk{right:82px;bottom:2px}#cbt .cb.dash{right:72px;bottom:70px}#cbt .cb.jmp{right:4px;bottom:86px}}
/* 모바일: 세로로 들고 있으면 '가로로 돌려주세요' 안내 (가로 잠금이 안 되는 기기용) */
#rot{display:none;position:fixed;inset:0;z-index:99999;background:rgba(42,26,18,.92);color:#fff6e2;font-family:'Jua',sans-serif;align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center;padding:24px}
#rot .ph{font-size:64px;animation:rotph 1.8s ease-in-out infinite;display:inline-block}
#rot b{font-weight:400;font-size:22px}#rot small{opacity:.75;font-size:14px}
#rot button{font-family:'Jua';font-size:15px;padding:8px 18px;border-radius:999px;border:3px solid #2a1a12;background:#fff3d6;color:#2a1a12;box-shadow:0 3px 0 #2a1a12;cursor:pointer}
@keyframes rotph{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
/* (가로 강제 안내 #rot 제거 — 이제 세로·가로 모두 자동 배치: js/orient.js + 아래 방향별 규칙) */
@media (pointer:coarse){#actBtn{bottom:110px}}

/* 미션 사냥 HUD + 쓰러짐 안내 */
#hunt{position:fixed;left:max(12px,env(safe-area-inset-left,0px));top:calc(96px + env(safe-area-inset-top,0px));z-index:6;min-width:132px;padding:8px 10px;background:rgba(42,26,18,.78);color:#fff5e0;border:2px solid #c99a2e;border-radius:12px;font:600 13px/1.5 Jua,"Gowun Dodum",sans-serif;pointer-events:none}
#hunt .ht{font-size:14px;color:#ffd76a;margin-bottom:2px}#hunt .ht i{font-style:normal;opacity:.8}
#hunt .hr{display:flex;justify-content:space-between;gap:14px}#hunt .hr.ok{color:#9be28a;text-decoration:line-through}
#huntDown{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(40,10,10,.55);color:#fff5e0;font:700 22px/1.4 Jua,"Gowun Dodum",sans-serif;text-align:center;padding:24px;pointer-events:none}
#huntDown[hidden],#hunt[hidden]{display:none}

/* 맵 내비게이터 (top-right, under the sound / language chips) */
#minimap{position:fixed;right:max(12px,env(safe-area-inset-right,0px));top:calc(54px + env(safe-area-inset-top,0px));z-index:6;border:3px solid #2a1a12;border-radius:13px;box-shadow:0 3px 0 #2a1a12,0 0 0 2px #c99a2e inset;overflow:hidden;background:#cfe9c6;cursor:pointer;line-height:0}
#minimap[hidden]{display:none}#minimap canvas{display:block}
@media (max-width:600px){#minimap{transform:scale(.8);transform-origin:top right}}
/* 절 메뉴 + 장면 전환 */
#tmenu{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:7;display:flex;flex-direction:column;align-items:center;gap:6px}
#tmenu[hidden]{display:none}#tmenu .tcount{font:700 13px Jua,"Gowun Dodum",sans-serif;color:#fff6dc;background:rgba(42,26,18,.75);padding:3px 12px;border-radius:999px}
#tmenu .trow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}#tmenu .btn{font-size:15px;padding:8px 14px}
#tfade{position:fixed;inset:0;z-index:30;background:#1a0f0a;opacity:0;pointer-events:none;transition:opacity .4s}#tfade.on{opacity:1;pointer-events:auto}

/* ===== 플레이어 HP / MP 창 (화면 왼쪽 위 고정) ===== */
#cbt .who{display:none}
.php{position:absolute;left:max(10px,env(safe-area-inset-left));top:calc(max(10px,env(safe-area-inset-top)) + 46px);display:flex;align-items:center;gap:8px;background:rgba(255,250,240,.94);border:3px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 var(--ink);padding:6px 10px 6px 6px;width:230px;font-family:'Jua';z-index:5;pointer-events:none}
.php .pava{width:52px;height:52px;flex:0 0 52px;border-radius:50%;border:2.5px solid var(--ink);background:#ffe3ea center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden}
.php .pcol{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.php .pnm{font-size:15px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.php .pbar{position:relative;height:15px;border-radius:8px;background:#5a4a40;border:2px solid var(--ink);overflow:hidden}
.php .pbar i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:6px;transition:width .15s linear}
.php .pbar.hp i{background:linear-gradient(#ff8a98,#ff5b6e)}
.php .pbar.mp i{background:linear-gradient(#8cc2ff,#4c9bff)}
.php .pbar span{position:absolute;inset:0;font-size:11px;line-height:12px;text-align:center;color:#fff;text-shadow:0 0 2px #2a1a12,0 0 2px #2a1a12,0 0 2px #2a1a12}
.php.low .pbar.hp i{background:#ff2a2a;animation:phlow .6s infinite alternate}
.php.mpx .pbar.mp{animation:phshake .3s}
.php.dead{filter:grayscale(1)}
@keyframes phlow{to{opacity:.45}}
@keyframes phshake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media (max-width:600px),(max-height:480px){.php{width:184px;padding:4px 8px 4px 4px;gap:6px}.php .pava{width:40px;height:40px;flex-basis:40px;font-size:22px}.php .pnm{font-size:13px}.php .pbar{height:13px}.php .pbar span{font-size:10px;line-height:10px}}

/* 시간대 · 날씨 표시 (js/sky.js) */
.skychip{background:rgba(255,250,240,.95);border:2.5px solid var(--ink);border-radius:999px;height:36px;padding:0 12px;font-size:14px;box-shadow:0 3px 0 var(--ink);display:flex;align-items:center;font-family:'Jua';white-space:nowrap;pointer-events:none}
.skychip:empty{visibility:hidden}
@media (max-width:600px){.skychip{font-size:12px;height:32px;padding:0 9px}}

/* 무도가 · 스킬 배우기 (준비 중) */
.modal .mc.skillp{background:var(--paper,#fffaf0);border:3px solid var(--ink);border-radius:22px;padding:16px 16px 14px;max-width:min(440px,94vw);text-align:center;box-shadow:0 5px 0 var(--ink);font-family:'Jua'}
.mc.skillp h2{font-weight:400;font-size:21px;margin:0 0 4px}.mc.skillp .sk-sub{margin:0 0 12px;font-family:'Gowun Dodum';font-size:14px;opacity:.8}
.mc.skillp .sk-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.mc.skillp .sk{display:flex;align-items:center;gap:10px;text-align:left;background:#f3ead8;border:2.5px solid var(--ink);border-radius:14px;padding:8px 10px;filter:grayscale(.35)}
.mc.skillp .sk i{font-style:normal;font-size:26px;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;flex:0 0 40px}
.mc.skillp .sk div{flex:1;display:flex;flex-direction:column}.mc.skillp .sk b{font-weight:400;font-size:16px}.mc.skillp .sk small{font-family:'Gowun Dodum';font-size:12.5px;opacity:.75}
.mc.skillp .sk span{font-size:12px;background:#e6dccb;color:#7a6a5a;border-radius:999px;padding:3px 9px;white-space:nowrap}

/* ---------- 방향 자동 조정 (js/orient.js 가 html.portrait / html.landscape 를 붙임) ---------- */
/* 가로 + 낮은 화면(폰 가로): 위쪽 HUD 를 작게, 대화창 · 행동 버튼을 낮게 */
@media (pointer:coarse) and (orientation:landscape) and (max-height:500px){
  #hud .top{top:max(6px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right))}
  .chip-btn{height:30px;min-width:30px;font-size:12px;padding:0 8px}
  .skychip{height:30px;font-size:12px;padding:0 9px}
  #minimap{top:calc(42px + env(safe-area-inset-top,0px));transform:scale(.62);transform-origin:top right}
  .php{top:calc(max(6px,env(safe-area-inset-top)) + 38px);left:max(8px,env(safe-area-inset-left))}
  #hunt{top:calc(98px + env(safe-area-inset-top,0px));left:max(8px,env(safe-area-inset-left));transform:scale(.82);transform-origin:top left}
  #dialog{width:min(460px,calc(100% - 360px));min-height:0;padding:9px 12px 9px 74px;bottom:max(8px,env(safe-area-inset-bottom))}
  #dialog .ava{width:52px;height:52px}
  #dlgText{font-size:13.5px;line-height:1.45}
  #actBtn{bottom:max(92px,calc(env(safe-area-inset-bottom) + 84px))}
  .lbl{font-size:11px;padding:0 7px}
}
/* 세로(폰 세로): 버튼은 오른쪽 아래 그대로, 대화창은 버튼 위로 올려 겹치지 않게 */
@media (pointer:coarse) and (orientation:portrait){
  #dialog{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 186px);width:calc(100% - 20px)}
  #actBtn{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 300px)}
  #hunt{top:calc(150px + env(safe-area-inset-top,0px));transform:scale(.88);transform-origin:top left}
}

/* 달리기 게이지 (캐릭터 발밑) */
#runbar{position:fixed;width:48px;height:8px;margin-left:-24px;border-radius:999px;background:rgba(42,26,18,.55);border:2px solid #2a1a12;overflow:hidden;z-index:6;pointer-events:none;opacity:0;transition:opacity .25s}
#runbar i{display:block;height:100%;width:100%;background:linear-gradient(#ffe27a,#f2b62e);border-radius:999px}
#runbar.tired i{background:linear-gradient(#ff9a8a,#e0503a)}
#cbt .cb.dash.on{background:#ffe9a8}
/* 다른 플레이어 이름: 동그란 말풍선 없이 글자만 (내 이름표와 같은 느낌) */
.lbl.nick{background:transparent;border:0;box-shadow:none;padding:0;font-size:14px;color:#2a1a12;text-shadow:-2px 0 #fff,2px 0 #fff,0 -2px #fff,0 2px #fff,-1px -1px #fff,1px 1px #fff,-1px 1px #fff,1px -1px #fff}
.lbl.nick small{display:none}

/* 경험치창 (화면 하단 가운데) */
#cbt .xpb{position:absolute;left:50%;bottom:max(8px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(400px,46vw);display:flex;align-items:center;gap:7px;font-family:'Jua';z-index:5;pointer-events:none}
#cbt .xpb b{font-weight:400;font-size:15px;color:#fff6dc;background:#3b2a24;border:2.5px solid var(--ink);border-radius:999px;padding:1px 10px;box-shadow:0 3px 0 var(--ink);white-space:nowrap}
#cbt .xpb .xbar{position:relative;flex:1;height:17px;border-radius:9px;background:#5a4a40;border:2.5px solid var(--ink);overflow:hidden;box-shadow:0 3px 0 var(--ink)}
#cbt .xpb .xbar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:7px;background:linear-gradient(#ffe27a,#f2b62e);transition:width .35s ease}
#cbt .xpb .xbar span{position:absolute;inset:0;font-size:11px;line-height:14px;text-align:center;color:#fff;text-shadow:0 0 2px #2a1a12,0 0 2px #2a1a12,0 0 2px #2a1a12}
#cbt .xpb em{position:absolute;right:4px;top:-22px;font-style:normal;font-size:14px;color:#ffe27a;text-shadow:0 0 3px #2a1a12,0 0 3px #2a1a12;opacity:0}
#cbt .xpb em.on{animation:xpgain 1.3s ease-out}
#cbt .xpb.lvup{animation:xplvup 1.1s ease-out}
@keyframes xpgain{0%{opacity:0;transform:translateY(8px)}15%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}
@keyframes xplvup{0%,100%{filter:none;transform:translateX(-50%) scale(1)}30%{filter:drop-shadow(0 0 10px #ffd84a) brightness(1.3);transform:translateX(-50%) scale(1.12)}}
@media (pointer:coarse){#cbt .xpb{width:clamp(130px,calc(100vw - 380px),400px);bottom:max(4px,env(safe-area-inset-bottom))}#cbt .xpb b{font-size:13px;padding:0 7px}#cbt .xpb .xbar{height:14px}#cbt .xpb .xbar span{font-size:10px;line-height:11px}}
@media (pointer:fine) and (max-width:900px){#cbt .xpb{width:min(300px,38vw)}}

/* 엽전 표시 + 대장간 가게 */
.php .pcoin{font-size:12px;line-height:1.1;color:#8a5a12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc.shopp .shop-top{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-family:'Jua';font-size:14px;margin:0 0 10px;background:#fff3c8;border:2.5px solid var(--ink);border-radius:12px;padding:5px 10px}
.mc.shopp .shop-top b{font-weight:400;color:#b8480a}
.mc.shopp .sk.wp{filter:none}.mc.shopp .sk.wp.lock{filter:grayscale(.5);opacity:.75}.mc.shopp .sk.wp.eq{background:#ffe9a8}
.mc.shopp .sk small.pr{opacity:1;color:#8a5a12;font-family:'Jua'}
.mc.shopp .sk span.on{background:#cfeccf;color:#2b6a2b}
.mc.shopp .sk button.buy{font-family:'Jua';font-size:13px;background:#ffd84a;border:2.5px solid var(--ink);border-radius:999px;padding:4px 12px;box-shadow:0 3px 0 var(--ink);cursor:pointer;white-space:nowrap}
.mc.shopp .sk button.buy:disabled{background:#e6dccb;color:#7a6a5a;box-shadow:none;cursor:default}

/* 스킬 바 (1·2·3): 데스크톱 = 경험치 막대 위 가운데 가로줄 · 터치 = 공격 버튼 왼쪽 세로줄 */
#cbt .skb{position:absolute;left:50%;bottom:calc(max(8px,env(safe-area-inset-bottom)) + 36px);transform:translateX(-50%);display:flex;gap:10px;z-index:5;pointer-events:none}
#cbt .sks{position:relative;pointer-events:auto;width:54px;height:54px;border-radius:14px;background:rgba(255,250,240,.95);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-size:26px;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:none}
#cbt .sks:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
#cbt .sks i{font-style:normal;position:relative;z-index:1}
#cbt .sks b{position:absolute;left:3px;top:0;font:400 12px/1.2 'Jua';color:#fff;text-shadow:0 0 2px #2a1a12,0 0 2px #2a1a12,0 0 2px #2a1a12;z-index:3}
#cbt .sks u{position:absolute;inset:0;background:rgba(42,26,18,.6);height:var(--cd,0%);top:auto;bottom:0;z-index:2;text-decoration:none}
#cbt .sks em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 18px 'Jua';font-style:normal;color:#fff;text-shadow:0 0 3px #2a1a12,0 0 3px #2a1a12,0 0 3px #2a1a12;z-index:3}
#cbt .sks.lock{filter:grayscale(.85);opacity:.7}
#cbt .sks.rdy{box-shadow:0 4px 0 var(--ink),0 0 12px 2px rgba(255,220,90,.85)}
.mc.shopp em.kb{font-style:normal;font-size:12px;color:#b8480a}
@media (pointer:coarse){
  #cbt .skb{left:auto;right:max(170px,calc(env(safe-area-inset-right) + 170px));bottom:max(18px,env(safe-area-inset-bottom));transform:none;flex-direction:column-reverse;gap:8px}
  #cbt .sks{width:48px;height:48px;font-size:22px}
  #cbt .xpb{width:clamp(110px,calc(100vw - 470px),400px)}
}
@media (pointer:coarse) and (max-height:480px){#cbt .skb{right:max(150px,calc(env(safe-area-inset-right) + 150px));gap:5px}#cbt .sks{width:42px;height:42px;font-size:19px}}

/* 산 음식 칸: 경험치 막대 오른쪽 */
#cbt .xpb .itb{display:flex;gap:6px;flex:0 0 auto}
#cbt .xpb .itm{position:relative;pointer-events:auto;width:40px;height:40px;border-radius:12px;background:rgba(255,250,240,.96);border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);font-size:21px;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:none}
#cbt .xpb .itm:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
#cbt .xpb .itm i{font-style:normal;position:relative;z-index:1}
#cbt .xpb .itm b{position:absolute;left:3px;top:0;font:400 11px/1.2 'Jua';color:#fff;text-shadow:0 0 2px #2a1a12,0 0 2px #2a1a12,0 0 2px #2a1a12;z-index:3}
#cbt .xpb .itm s{position:absolute;right:3px;bottom:0;text-decoration:none;font:400 14px/1.1 'Jua';color:#fff;text-shadow:0 0 3px #2a1a12,0 0 3px #2a1a12,0 0 3px #2a1a12;z-index:3}
#cbt .xpb .itm u{position:absolute;left:0;right:0;bottom:0;background:rgba(42,26,18,.6);height:var(--cd,0%);z-index:2;text-decoration:none}
#cbt .xpb .itm em{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:400 16px 'Jua';font-style:normal;color:#fff;text-shadow:0 0 3px #2a1a12,0 0 3px #2a1a12;z-index:3}
#cbt .xpb .itm.lock{filter:grayscale(.85);opacity:.65}
#cbt .xpb .itm.rdy{box-shadow:0 3px 0 var(--ink),0 0 10px 2px rgba(120,230,130,.85)}
#cbt .xpb{width:min(520px,60vw)}
@media (pointer:coarse){#cbt .xpb .itm{width:36px;height:36px;font-size:18px}#cbt .xpb{width:clamp(170px,calc(100vw - 470px),520px)}}

.mc.shopp .enh-box{margin:2px 0 12px;background:#fff3c8;border:2.5px solid var(--ink);border-radius:14px;padding:8px 10px;display:flex;flex-direction:column;gap:4px;text-align:left}
.mc.shopp .enh-box .enh-h{font-family:'Jua';font-size:16px}.mc.shopp .enh-box .enh-h b{font-weight:400;color:#b8480a}
.mc.shopp .enh-box small{font-family:'Gowun Dodum';font-size:12.5px;opacity:.85}.mc.shopp .enh-box small b{font-weight:400;color:#b8480a;font-family:'Jua'}
.mc.shopp .enh-box button.buy.enh{align-self:stretch;padding:7px 12px;font-size:15px;background:#ff9a4a;margin-top:2px}
.mc.shopp .enh-box button.buy.enh:disabled{background:#e6dccb}

/* 📜 사냥 퀘스트 (왼쪽) */
#cbt .qbtn{position:absolute;left:10px;top:calc(max(10px,env(safe-area-inset-top)) + 82px);pointer-events:auto;background:rgba(255,250,240,.94);border:2.5px solid var(--ink);border-radius:999px;box-shadow:0 3px 0 var(--ink);padding:3px 12px;font:700 13px/1.3 inherit;color:var(--ink);cursor:pointer;white-space:nowrap}
#cbt .qpanel{position:absolute;left:10px;top:calc(max(10px,env(safe-area-inset-top)) + 118px);width:210px;pointer-events:auto;background:rgba(255,250,240,.96);border:2.5px solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--ink);padding:8px 10px;font-size:13px;color:var(--ink)}
#cbt .qpanel[hidden]{display:none}
.qpanel h4{margin:0 0 6px;font-size:14px}
.qpanel .qrow{display:flex;gap:6px;align-items:center;padding:3px 4px;border-radius:8px;opacity:.55}
.qpanel .qrow.on{opacity:1;background:#ffe9a8;font-weight:700}
.qpanel .qrow span{flex:1}.qpanel .qrow em{font-style:normal;font-size:11px;color:#8a5a12}
.qpanel .qft{margin-top:6px;border-top:1.5px dashed #b89a6a;padding-top:5px;font-size:12px}
#msBtn.off{opacity:.45;filter:grayscale(1)}
#locBar{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:6;pointer-events:none;font:400 16px/1.2 Jua,"Gowun Dodum",sans-serif;color:#fff6dc;background:rgba(59,42,36,.82);border:2.5px solid #2a1a12;border-radius:999px;padding:4px 16px;box-shadow:0 3px 0 #2a1a12;white-space:nowrap}
@media (max-width:600px){#locBar{font-size:13px;padding:3px 12px}}