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}
/* mobile: compact dialog card (KO/EN/JA) to free screen space */
@media (max-width:640px){
  #dialog{min-height:0;width:calc(100% - 20px);border-width:2.5px;border-radius:16px;box-shadow:0 3px 0 var(--ink),inset 0 0 0 3px #f3e2c2;padding:8px 11px 7px 60px;font-size:13.5px;line-height:1.38}
  #dialog .ava{left:8px;top:8px;width:44px;height:44px;border-width:2px}
  #dialog .ava svg{width:38px;height:44px;margin-top:4px}
  #dialog .hint{font-size:10.5px;margin-top:3px;line-height:1.3}
  html:lang(en) #dialog,html:lang(ja) #dialog{font-size:12.5px}
  html body.has-biz #dialog{bottom:calc(var(--bizh) + 18px)}
  #hud #notice{font-size:10px}
  #actBtn{bottom:calc(var(--bizh,0px) + 134px)}
}
#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}}
/* 조선 직업 badge next to the nickname (random role each visit) */
.lbl.nick .nr{display:flex;align-items:center;gap:4px}
.lbl.nick .j{font-family:'Gowun Dodum',sans-serif;font-weight:700;font-size:10px;line-height:14px;color:#fff;background:#c8352b;border-radius:999px;padding:0 6px}
.lbl.nick .j:empty{display:none}
.mp-job{font-family:'Jua';font-size:18px;margin:4px 0 8px}