:root{--bg:#0e1116;--panel:#171c24;--line:#2a3140;--text:#e6e9ef;--muted:#8d97a8;--acc:#f2b84b;--bad:#e5564f;--good:#5ccf7b;--blue:#5aa9ff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
.screen{position:absolute;inset:0}
.hidden{display:none!important}

#home{padding:calc(env(safe-area-inset-top) + 24px) 20px calc(env(safe-area-inset-bottom) + 24px);overflow:auto;display:flex;flex-direction:column;gap:12px;max-width:520px;margin:0 auto}
#home .title{font-size:26px;font-weight:700;letter-spacing:-.5px}
#home .title small{font-size:13px;color:var(--muted);font-weight:400;margin-left:8px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}
.card.msg{font-size:15px;line-height:1.6}
.card .warn{color:var(--acc);font-size:14px;margin-top:6px}
.card .warn:empty{display:none}
.card.over{border-color:var(--bad)}
.card.over .btn{margin-top:12px}
.big{font-size:32px;font-weight:700;line-height:1.1}
.sub{color:var(--muted);font-size:13px;margin-top:6px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.stat .k{font-size:12px;color:var(--muted)}
.stat .v{font-size:24px;font-weight:700;margin:2px 0}
.stat .s{font-size:11px;color:var(--muted)}
.btn{display:block;width:100%;padding:16px;border-radius:14px;border:1px solid var(--line);background:var(--panel);color:var(--text);font-size:18px;font-weight:700;cursor:pointer;font-family:inherit}
.btn.primary{background:var(--acc);color:#1a1200;border-color:var(--acc)}
.btn.ghost{background:transparent;color:var(--muted);font-weight:400;font-size:14px;padding:10px}
.btn:active{transform:scale(.98)}
.hint{font-size:12px;color:var(--muted);text-align:center;line-height:1.6}

#out{background:#1a2029}
#cv3{position:absolute;inset:0;width:100%;height:100%;display:none}
#cv{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}
#hud{position:absolute;inset:0;pointer-events:none;padding:calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 12px)}
#hud .top{display:flex;gap:8px}
.bar{position:relative;flex:1;height:28px;background:rgba(0,0,0,.45);border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--bad);border-radius:8px;transition:width .1s linear}
.bar.day i{background:var(--acc)}
.bar.day i.dusk{background:#e07b3a}
.bar.day i.night{background:#3b4bd9}
.bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000}
#bag{margin-top:8px;font-size:13px;color:#fff;text-shadow:0 1px 2px #000}
#arrow{position:absolute;left:12px;top:calc(env(safe-area-inset-top) + 98px);display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000}
#arrow-i{display:block;filter:drop-shadow(0 1px 2px #000)}
#mini{position:absolute;right:12px;top:calc(env(safe-area-inset-top) + 76px);width:104px;height:104px;border:1px solid rgba(255,255,255,.2);border-radius:8px}
.hbtn{position:absolute;pointer-events:auto;border:none;border-radius:12px;padding:12px 16px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer}
#acts{position:absolute;right:10px;bottom:calc(env(safe-area-inset-bottom) + 12px);width:234px;height:234px;pointer-events:none}
#acts .abtn{position:absolute}
#btn-p{right:0;bottom:0;width:90px!important;height:90px!important}
#btn-k{right:96px;bottom:0;width:76px!important;height:76px!important}
#btn-dash{right:2px;bottom:98px;width:60px;height:60px}
#btn-spin{right:70px;bottom:86px;width:56px;height:56px}
#btn-lure{right:132px;bottom:84px;width:52px;height:52px}
#btn-dog{right:180px;bottom:12px;width:52px;height:52px}
#btn-ult{right:4px;bottom:166px}
.abtn.sk{font-size:12px;background:conic-gradient(rgba(0,0,0,.62) var(--c,0%),rgba(52,66,90,.9) 0);border-color:rgba(255,255,255,.3);text-shadow:0 1px 2px #000}
.abtn.sk.cool,.abtn.dash.cool{opacity:.85}
.abtn.sk b,.abtn.dash b{font-size:17px}
.abtn.atk.foot{background:rgba(230,150,50,.92);font-size:19px}
#btn-inv{right:12px;top:calc(env(safe-area-inset-top) + 190px);background:rgba(58,44,24,.92);color:#f2d39a;border:1px solid #8a6d3b;padding:9px 14px;font-size:14px}
#btn-med{right:12px;top:calc(env(safe-area-inset-top) + 236px);background:rgba(70,150,90,.92);color:#fff;padding:9px 12px;font-size:13px}
#btn-med:disabled{opacity:.45}
#btn-rest{left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 252px);background:var(--acc);color:#2a1a00;font-size:17px;padding:14px 22px;white-space:nowrap;box-shadow:0 0 16px rgba(242,184,75,.5)}
#arrow.hidden{display:none}
.abtn{pointer-events:auto;width:68px;height:68px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:rgba(20,26,36,.85);color:#fff;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
.abtn.dash{background:rgba(90,169,255,.85);border-color:rgba(255,255,255,.4)}
.abtn.med{background:rgba(70,150,90,.9);width:58px;height:58px;font-size:12px}
.abtn.atk{width:100px;height:100px;font-size:20px;background:rgba(232,92,64,.92);border:3px solid rgba(255,255,255,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1}
.abtn.atk small{font-size:11px;font-weight:700;opacity:.85}
.abtn.atk.on{transform:scale(.92);background:rgba(255,140,80,.95);box-shadow:0 0 16px 4px rgba(255,190,90,.6)}
#combo{position:absolute;right:12px;bottom:calc(env(safe-area-inset-bottom) + 254px);max-width:60%;text-align:right;font-size:14px;line-height:1.4;color:#fff;background:rgba(0,0,0,.5);border-radius:10px;padding:6px 10px;pointer-events:none;text-shadow:0 1px 2px #000}
#combo b{color:#ffd36b;letter-spacing:1px}
#combo .dim{color:#c9d2e0;font-size:12px}
#combo .bad{color:#ff8a84}
#btn-hide{left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 210px);background:#2bbf94;color:#06241a;font-size:17px;padding:13px 22px;white-space:nowrap;box-shadow:0 0 14px rgba(43,191,148,.45);z-index:5}
#btn-hide.hot{animation:hidePulse .8s ease-in-out infinite;background:#3ee0ad}
@keyframes hidePulse{50%{box-shadow:0 0 26px rgba(62,224,173,.95);transform:translateX(-50%) scale(1.07)}}
html.landui #btn-hide{bottom:calc(env(safe-area-inset-bottom) + 96px)}
#btn-climb{left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 210px);background:#ffb347;color:#2a1600;font-size:17px;padding:13px 22px;white-space:nowrap;box-shadow:0 0 14px rgba(255,179,71,.45);z-index:5}
html.landui #btn-climb{bottom:calc(env(safe-area-inset-bottom) + 96px)}
#btn-car{left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 266px);background:#5ab0ff;color:#04182c;font-size:17px;padding:13px 22px;white-space:nowrap;box-shadow:0 0 14px rgba(90,176,255,.45);z-index:5}
html.landui #btn-car{bottom:calc(env(safe-area-inset-bottom) + 152px)}
#btn-car.dim{background:#55606e;color:#d8dee6;box-shadow:none}
#btn-climb.hide2{transform:translateX(5px);font-size:16px;padding:13px 16px}
#btn-hide.climb2{transform:translateX(calc(-100% - 5px));font-size:16px;padding:13px 16px}
#btn-hide.climb2.hot{animation:hidePulse2 .8s ease-in-out infinite}
@keyframes hidePulse2{50%{box-shadow:0 0 26px rgba(62,224,173,.95);transform:translateX(calc(-100% - 5px)) scale(1.07)}}
#sneak{position:absolute;left:14px;bottom:calc(env(safe-area-inset-bottom) + 14px);font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000;pointer-events:none}
#sneak.good{color:#7be08a}
#sneak.warn{color:#ffb35a}
#btn-ride{left:12px;bottom:calc(env(safe-area-inset-bottom) + 204px);background:#2bbf94;color:#06241a;white-space:nowrap}
.abtn:disabled{opacity:.4}
.abtn.cool{opacity:.5;font-size:16px}
.abtn:active{transform:scale(.94)}
/* 필살기: 차오르는 만큼 파이처럼 채워지고, 다 차면 불꽃처럼 깜빡인다 */
.abtn.ult{width:76px;height:76px;font-size:14px;line-height:1.15;background:conic-gradient(rgba(242,184,75,.92) var(--p,0%),rgba(20,26,36,.85) 0);text-shadow:0 1px 3px #000}
.abtn.ult small{font-size:12px;font-weight:700;opacity:.9}
.abtn.ult.full{background:radial-gradient(circle at 50% 40%,#ffd36b,#ff7a3d 70%);border-color:#ffe9a8;color:#3a1400;text-shadow:none;font-size:15px;animation:ultp .7s ease-in-out infinite alternate}
@keyframes ultp{from{box-shadow:0 0 0 0 rgba(255,170,60,.7)}to{box-shadow:0 0 20px 7px rgba(255,170,60,.8)}}
/* 장비 카드 */
#gear .mt{font-size:16px;font-weight:700;margin-bottom:4px}
#gear .mt .s{font-weight:400;font-size:12px;color:var(--muted);margin-left:6px}
#gear .gslot{border-top:1px solid var(--line);padding:9px 0 8px}
#gear .gk{font-size:12px;color:var(--muted)}
#gear .gcur{font-size:15px;margin:2px 0 7px;line-height:1.45}
#gear .gcur .s{font-size:12px;color:var(--muted)}
#gear .chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px}
#gear .none{font-size:13px;color:var(--muted)}
.gchip{flex:0 0 auto;width:60px;height:70px;border-radius:12px;border:2px solid #4a5263;background:#121720;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px;font:inherit;color:#dfe5ee;font-size:11px;font-weight:700;cursor:pointer;touch-action:manipulation}
.gchip img{height:42px;width:46px;object-fit:contain}
.gchip.on{background:#283246;box-shadow:inset 0 0 0 2px #fff}
#gear .gstat{font-size:13px;color:var(--text);margin-top:6px;line-height:1.55;background:#121720;border-radius:10px;padding:8px 10px}

#toast{position:absolute;left:50%;bottom:57%;transform:translateX(-50%);max-width:92%;padding:10px 16px;border-radius:12px;background:rgba(0,0,0,.72);color:#fff;font-size:15px;font-weight:700;text-align:center;opacity:0;transition:opacity .2s;white-space:pre-line}
#toast.show{opacity:1}
#toast.gold{color:var(--acc)}
#toast.bad{color:#ff8a84}

#modal{position:absolute;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;padding:20px;z-index:10}
#modal .box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;max-width:420px;width:100%;max-height:90%;overflow:auto}
#modal h2{margin:0 0 8px;font-size:22px}
#modal p{margin:0 0 10px;line-height:1.6;color:var(--text)}
#modal .lines{margin:10px 0 14px;border-top:1px solid var(--line)}
#modal .lines div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
#modal .lines div b{font-weight:700}
#modal .lines div .good{color:var(--good)}
#modal .lines div .bad{color:#ff8a84}
#modal .btn{margin-top:8px}

.card.mapcard{padding:10px}
#map{display:block;width:100%;border-radius:10px;background:#10141b;cursor:pointer;touch-action:manipulation}
#map-info{padding:10px 6px 2px;font-size:15px;line-height:1.5}
#map-info b{font-size:17px}
#map-info .s{color:var(--muted);font-size:13px}
.btn:disabled{opacity:.45;cursor:default}

#missions .mt{font-size:16px;font-weight:700;margin-bottom:8px}
#missions .mt .s{font-weight:400;font-size:12px;color:var(--muted);margin-left:6px}
#missions .mi{border-top:1px solid var(--line);padding:10px 0 6px;font-size:14px;line-height:1.5}
#missions .mi.on{background:rgba(242,184,75,.06);margin:0 -16px;padding:10px 16px 8px}
#missions .tag{display:inline-block;padding:1px 7px;border-radius:6px;font-size:12px;font-weight:700;color:#10141b;margin-right:2px}
#missions .s{color:var(--muted);font-size:12px}
#missions .btn.small{padding:9px 12px;font-size:14px;margin-top:6px}
#quest{margin-top:6px;font-size:13px;font-weight:700;color:var(--acc);text-shadow:0 1px 2px #000}
#quest:empty{display:none}

/* 이야기 카드 */
#storycard .st-k{font-size:12px;color:var(--acc);font-weight:700;letter-spacing:.3px}
#storycard .st-t{font-size:22px;font-weight:700;margin:4px 0 6px}
#storycard .s{color:var(--muted);font-size:14px;line-height:1.55}
#storycard .st-d{margin-top:8px;font-size:14px;font-weight:700;color:#ffb86b}
#storycard .st-d.late{color:#ff8a84}
#storycard .route{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:10px 0 2px;font-size:12px}
#storycard .route .nd{padding:3px 8px;border-radius:999px;background:#222a35;color:var(--muted);border:1px solid var(--line)}
#storycard .route .nd.done{background:rgba(92,207,123,.16);color:#a9e8b8;border-color:rgba(92,207,123,.4)}
#storycard .route .nd.cur{background:rgba(242,184,75,.18);color:var(--acc);border-color:var(--acc);font-weight:700}
#storycard .route .nd.dest{color:#f2c14e}
#storycard .route .ln{color:#4a5262}
#storycard .btn{margin-top:10px}
#storycard .btn.small{padding:8px;font-size:13px;margin-top:4px}
#btn-out.ghostish{background:var(--panel);color:var(--text);border-color:var(--line);font-size:15px;padding:12px}
.mode-pick{display:flex;gap:8px;margin-top:10px}
.mode-pick button{flex:1;padding:12px 10px;border-radius:12px;border:1px solid var(--line);background:#1b212b;color:var(--text);font-family:inherit;font-size:14px;cursor:pointer;text-align:left;line-height:1.4}
.mode-pick button b{display:block;font-size:15px;margin-bottom:2px}
.mode-pick button span{color:var(--muted);font-size:12px}
.mode-pick button.on{border-color:var(--acc);background:rgba(242,184,75,.12)}

/* 장면(웹툰처럼 한 칸씩) */
#scene{position:absolute;inset:0;z-index:20;background:#07090c;overflow-y:auto;padding:calc(env(safe-area-inset-top) + 28px) 16px calc(env(safe-area-inset-bottom) + 28px);cursor:pointer;-webkit-overflow-scrolling:touch}
#sc-panels{max-width:520px;margin:0 auto}
.pn{opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s;margin:0 0 12px}
.pn.in{opacity:1;transform:none}
.pn.nar{padding:16px 8px;text-align:center;font-size:17px;line-height:1.75;color:#cfd6e0}
.pn.say{display:flex;gap:12px;align-items:flex-start;background:#141920;border:1px solid #232b37;border-radius:14px;padding:12px 14px}
.pn.say canvas{width:48px;height:48px;image-rendering:pixelated;background:#1d2430;border-radius:10px;flex:none}
.pn.say .nm{font-size:12px;font-weight:700;color:var(--acc);margin-bottom:2px}
.pn.say .tx{font-size:16px;line-height:1.6}
.pn.radio{background:#0f1a26;border:1px solid #24405e;border-radius:14px;padding:12px 16px;font-family:ui-monospace,Menlo,monospace;font-size:15px;line-height:1.7;color:#9fc3e6}
.pn.sms{background:#1a0f10;border:1px solid #5e2a2a;border-radius:14px;padding:12px 14px;font-size:15px;line-height:1.6}
.pn .hd{font-size:12px;font-weight:700;margin-bottom:4px;font-family:inherit}
.pn.radio .hd{color:#5aa9ff}
.pn.sms .hd{color:#ff8a84}
.pn.end{padding:28px 8px;text-align:center;font-size:24px;font-weight:700;color:var(--acc)}
#sc-foot{max-width:520px;margin:6px auto 0;display:flex;flex-direction:column;gap:6px}
#sc-tap{text-align:center;color:#5d6878;font-size:13px}
#sc-btns .btn{margin-top:8px}
#sc-skip{font-size:13px}

/* 캐릭터 고르기 · 집 화면 얼굴 */
.daycard{position:relative;padding-right:96px}
#h-face{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:72px;height:72px;border-radius:50%;background:#efe9e1;object-fit:cover}
#h-face.hidden{display:none}
.char-pick{margin-top:12px}
.char-pick .cq{font-size:14px;font-weight:700;margin-bottom:8px}
.char-pick .cards{display:flex;gap:10px}
.char-pick button{flex:1;padding:8px 8px 10px;border-radius:14px;border:2px solid var(--line);background:#efe9e1;color:#3a2f26;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.char-pick button canvas{width:auto;max-width:100%;height:200px}
.char-pick button.on{border-color:var(--acc);box-shadow:0 0 0 3px rgba(242,184,75,.35)}
.pn.say canvas.face{border-radius:50%;background:#efe9e1;image-rendering:auto}

.legal-links{text-align:center;font-size:12px;color:var(--muted);padding:4px 0 8px}
.legal-links a{color:var(--muted)}

/* 기술표 */
#movelist .mt,#wmoves .mt{font-size:16px;font-weight:700;margin-bottom:6px}
#movelist .mt .s,#wmoves .mt .s{font-weight:400;font-size:12px;color:var(--muted);margin-left:6px}
#movelist .mv,#wmoves .mv{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line);padding:7px 0;font-size:14px}
#movelist .mv b,#wmoves .mv b{min-width:92px;color:var(--acc);letter-spacing:1px;font-size:15px}
#movelist .s{color:var(--muted);font-size:12px;line-height:1.6;margin-top:8px}

/* 장면 그림 칸 */
#scene .pn.img{padding:0;background:#0b0d11;border-radius:14px;overflow:hidden;aspect-ratio:3/2;border:1px solid rgba(255,255,255,.08)}
#scene .pn.img img{display:block;width:100%;height:100%;object-fit:cover}

/* 스테이지 화면(구를 넘어갈 때) */
#stage{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;background:rgba(5,7,10,.9);pointer-events:auto;animation:stg .35s ease-out}
#stage.hidden{display:none}
#stage .box{text-align:center;padding:16px;max-width:360px}
#stage .sn{font-size:34px;font-weight:900;letter-spacing:3px;color:#ffd36b;text-shadow:0 2px 0 #6b4b10}
#stage .sg{font-size:20px;font-weight:700;color:#fff;margin:4px 0 8px}
#stage canvas{width:320px;height:264px;max-width:calc(var(--vw,1vw)*86);height:auto}
#stage .sd{font-size:14px;color:#c9d2e0;line-height:1.5;margin-top:6px}
#stage .sm{font-size:14px;color:#ffd36b;line-height:1.5;margin-top:6px}
#stage .sh{font-size:12px;color:#8d97a8;margin-top:12px}
@keyframes stg{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}

/* 가방 창 — 디아블로처럼(10-15) */
#inv{position:absolute;inset:0;z-index:15;background:rgba(0,0,0,.74);display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top) + 10px) 10px calc(env(safe-area-inset-bottom) + 10px)}
#inv .ib{width:100%;max-width:440px;max-height:100%;overflow:auto;background:linear-gradient(#1d1711,#0e0b08);border:2px solid #6b5432;border-radius:10px;box-shadow:0 0 0 1px #000,inset 0 0 40px rgba(0,0,0,.85);padding:12px 12px 14px;color:#e8dcc4}
#inv .ih{display:flex;justify-content:space-between;align-items:center;font-size:20px;font-weight:800;color:#e8c27a;letter-spacing:6px;border-bottom:1px solid #4a3a22;padding-bottom:6px;margin-bottom:10px;text-shadow:0 2px 0 #000}
#inv .x{background:none;border:1px solid #4a3a22;color:#c9a96a;border-radius:6px;width:34px;height:34px;font-size:16px;cursor:pointer;font-family:inherit}
#inv .doll{display:flex;align-items:center;justify-content:space-between;gap:8px}
#inv .col{display:flex;flex-direction:column;gap:14px}
#inv .slot{position:relative;width:78px;height:78px;border:2px solid #4a3a22;background:radial-gradient(#17110b,#090705);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-family:inherit}
#inv .slot img{width:62px;height:62px;object-fit:contain}
#inv .slot .lb{position:absolute;top:-9px;left:5px;font-size:10px;background:#1b1611;padding:0 4px;color:#b59a6a;border-radius:3px}
#inv .slot .lv,#inv .cell .n{position:absolute;right:3px;bottom:1px;font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000}
#inv .slot .empty{font-size:11px;color:#5d4d33}
#inv .r0{border-color:#7a7f88}
#inv .r1{border-color:#5fbf6e;box-shadow:inset 0 0 12px rgba(95,191,110,.35)}
#inv .r2{border-color:#4f93e6;box-shadow:inset 0 0 12px rgba(79,147,230,.4)}
#inv .r3{border-color:#b26cf0;box-shadow:inset 0 0 14px rgba(178,108,240,.5)}
#inv .sel{outline:2px solid #ffd36b;outline-offset:1px}
#inv .por{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:150px;justify-content:center}
#inv .por canvas{height:150px;width:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.8))}
#inv .hpb{position:relative;width:100%;max-width:150px;height:16px;background:#2a0d0b;border:1px solid #5a2a22;border-radius:4px;overflow:hidden}
#inv .hpb i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(#d24a3c,#8f2318)}
#inv .hpb span{position:absolute;inset:0;font-size:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;text-shadow:0 1px 2px #000}
#inv .stl{font-size:12px;color:#c9b58c;text-align:center;margin:10px 0 2px;line-height:1.5}
#inv .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:8px;background:#090705;padding:6px;border:1px solid #4a3a22;border-radius:6px}
#inv .cell{position:relative;aspect-ratio:1;border:1px solid #2e2518;background:radial-gradient(#1a140e,#0d0a07);border-radius:4px;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;font-family:inherit}
#inv .cell img{width:82%;height:82%;object-fit:contain}
#inv .cell .em{font-size:24px;line-height:1}
#inv .cap{font-size:11px;color:#8f7a55;text-align:center;margin-top:6px}
#inv .det{margin-top:10px;min-height:96px;border:1px solid #4a3a22;border-radius:6px;padding:10px 12px;background:#0f0c09}
#inv .nm{font-size:17px;font-weight:800}
#inv .nm .lvl{font-size:13px;color:#e8dcc4;font-weight:700}
#inv .rt{font-size:12px;color:#9c8762;margin-top:2px}
#inv .ds{font-size:13px;color:#d9ccb1;margin-top:6px;line-height:1.5}
#inv .cmp{display:flex;flex-direction:column;gap:2px;margin-top:8px;font-size:13px}
#inv .cmp .up{color:#7be08a}
#inv .cmp .dn{color:#ff8a84}
#inv .cmp .eq{color:#8f7a55}
#inv .acts{margin-top:10px;display:flex;gap:8px}
#inv .ib2{flex:1;padding:11px;border-radius:6px;border:1px solid #6b5432;background:#241b11;color:#e8c27a;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit}
#inv .ib2.pri{background:linear-gradient(#8a6a2e,#5c4318);color:#fff3d6;border-color:#c9a254}
#inv .hint{font-size:13px;color:#8f7a55;line-height:1.5}
#inv .msg{margin-top:8px;font-size:13px;color:#ffd36b}
#over-cp .btn{margin-top:10px}
#gear .open-bag{margin-top:10px;background:#241b11;color:#e8c27a;border-color:#6b5432}

/* 레벨·우두머리(10-15) */
#xp{display:flex;align-items:center;gap:6px;margin-top:6px}
#xp b{font-size:12px;color:#ffd36b;text-shadow:0 1px 2px #000;min-width:36px}
#xp .xb{flex:1;height:5px;background:rgba(0,0,0,.5);border-radius:3px;overflow:hidden;border:1px solid rgba(255,255,255,.12)}
#xp .xb i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f2b84b,#ffe08a);transition:width .2s}
#boss{position:absolute;left:12px;top:calc(env(safe-area-inset-top) + 132px);width:calc(calc(var(--vw,1vw)*100) - 150px);max-width:320px;text-align:left;pointer-events:none}
#boss-n{font-size:13px;font-weight:800;color:#ff8a7a;text-shadow:0 1px 3px #000;margin-bottom:3px}
#boss .bb{height:10px;background:rgba(0,0,0,.6);border:1px solid #6b2a22;border-radius:5px;overflow:hidden}
#boss .bb i{display:block;height:100%;width:100%;background:linear-gradient(#e5564f,#9a2a20);transition:width .15s}
#btn-inv.sp{border-color:#ffd36b;color:#ffe9a8;box-shadow:0 0 12px rgba(255,211,107,.6);animation:ultp .8s ease-in-out infinite alternate}
#inv .r4{border-color:#ff9f43;box-shadow:inset 0 0 16px rgba(255,159,67,.6),0 0 8px rgba(255,159,67,.4)}
#inv .tabs{display:flex;gap:6px}
#inv .tab{background:none;border:1px solid #4a3a22;color:#9c8762;border-radius:6px;padding:6px 12px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;letter-spacing:1px}
#inv .tab.on{background:#3a2c16;color:#ffd36b;border-color:#8a6d3b}
#inv .tab .dot{display:inline-block;min-width:18px;padding:0 5px;margin-left:5px;border-radius:9px;background:#e5564f;color:#fff;font-size:11px;line-height:18px}
#inv .lvl-line{display:flex;align-items:center;gap:8px;font-size:13px;color:#c9b58c;margin-bottom:8px}
#inv .lvl-line b{color:#ffd36b;font-size:18px}
#inv .lvl-line .xb{flex:1;height:8px;background:#2a2014;border-radius:4px;overflow:hidden}
#inv .lvl-line .xb i{display:block;height:100%;background:linear-gradient(90deg,#c9932e,#ffd36b)}
#inv .tree{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#inv .br{display:flex;flex-direction:column;gap:6px}
#inv .br h4{margin:0;text-align:center;font-size:13px;color:#e8c27a;border-bottom:1px solid #4a3a22;padding-bottom:4px;letter-spacing:4px}
#inv .node{position:relative;border:1px solid #4a3a22;background:radial-gradient(#1c150e,#0d0a07);border-radius:6px;padding:7px 4px 6px;text-align:center;cursor:pointer;font-family:inherit;color:#e8dcc4}
#inv .node .nn{font-size:12px;font-weight:800;line-height:1.25}
#inv .node .pp{margin-top:4px;font-size:9px;letter-spacing:1px;color:#ffd36b}
#inv .node .rq{font-size:10px;color:#8f7a55;margin-top:2px}
#inv .node.lock{opacity:.45}
#inv .node.can{border-color:#ffd36b;box-shadow:0 0 8px rgba(255,211,107,.45)}
#inv .node.full{border-color:#7be08a}
#inv .node.sel{outline:2px solid #ffd36b;outline-offset:1px}
#inv .reset{margin-top:8px;background:none;border:1px solid #4a3a22;color:#8f7a55;border-radius:6px;padding:7px;font-size:12px;width:100%;cursor:pointer;font-family:inherit}

/* 웨이브 모드(10-17) — 참고 영상처럼 위에 경험치 막대, 왼쪽에 「보급까지」 상자, 나머지 버튼은 숨김 */
#out.wave #btn-ult,#out.wave #btn-dash,#out.wave #btn-spin,#out.wave #btn-lure,#out.wave #btn-dog,#out.wave #btn-inv,#out.wave #btn-med,#out.wave #btn-ride,#out.wave #btn-rest,#out.wave #bag,#out.wave #quest,#out.wave #arrow,#out.wave #xp,#out.wave #combo,#out.wave #sneak,#out.wave .bar.day{display:none!important}
#out.wave .top .bar.hp{display:none}
#wv{position:absolute;left:12px;right:12px;top:calc(env(safe-area-inset-top) + 8px);pointer-events:none}
#wv .wxp{display:flex;align-items:center;gap:8px}
#wv .wxp b{font-size:13px;color:#fff;background:#2c3446;border-radius:6px;padding:2px 7px;text-shadow:0 1px 2px #000}
#wv .xb{flex:1;height:14px;background:rgba(20,26,36,.75);border:2px solid #1b2230;border-radius:8px;overflow:hidden}
#wv .xb i{display:block;height:100%;width:0;background:linear-gradient(#7be86b,#3fb64a);transition:width .15s}
#wv-pause{pointer-events:auto;width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(20,26,36,.75);color:#fff;font-size:12px;font-weight:900;cursor:pointer}
#wv .wbox{margin-top:8px;display:inline-flex;flex-direction:column;align-items:center;background:rgba(20,26,36,.78);border-radius:8px;padding:5px 12px;color:#fff;text-shadow:0 1px 2px #000}
#wv .wbox span{font-size:11px;color:#c9d2e0}
#wv .wbox b{font-size:20px;line-height:1.1}
#wv .wbox small{font-size:10px;color:#9fb0c6}
#out.wave #boss{top:calc(env(safe-area-inset-top) + 92px)}
/* 웨이브 액션 버튼(10-17 v0.21): 구르기(크게)·충격파(반격)·폭주, 콤보 등급 */
#wacts,#wv-rank{display:none}
#out.wave #wacts{display:block;position:absolute;right:10px;bottom:calc(env(safe-area-inset-bottom) + 12px);width:234px;height:270px;pointer-events:none}
#wacts .abtn{position:absolute}
#btn-roll{right:2px;bottom:98px;width:80px;height:80px;font-size:16px;background:rgba(70,150,255,.92);border:3px solid rgba(255,255,255,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.5)}
#btn-roll span{font-size:13px;letter-spacing:3px;color:#e8f4ff}
#btn-roll.cool{opacity:.55}
#btn-shock{right:90px;bottom:86px;width:64px;height:64px;font-size:13px}
#btn-shock.ctr{background:radial-gradient(circle at 50% 40%,#bfe6ff,#3f8fe0 70%);border-color:#e6f4ff;color:#06203d;text-shadow:none;animation:ultp .25s ease-in-out infinite alternate}
#btn-rage{right:8px;bottom:186px;width:66px;height:66px}
#out.wave #wv-rank{display:block;position:absolute;left:14px;top:calc(env(safe-area-inset-top) + 124px);text-align:left;pointer-events:none;font-size:34px;font-weight:900;font-style:italic;color:#fff;text-shadow:0 2px 0 #000,0 0 10px rgba(0,0,0,.6);line-height:1}
#wv-rank small{display:block;font-size:11px;font-style:normal;font-weight:700;color:#e6ecf5;margin-top:2px}
#wv-rank.r1{color:#9fd8ff}#wv-rank.r2{color:#7be08a}#wv-rank.r3{color:#ffd36b}#wv-rank.r4{color:#ff9a4d}#wv-rank.r5{color:#ff5a6a}
/* 배낭 */
#wbag{position:absolute;inset:0;z-index:16;background:rgba(5,8,12,.72);display:flex;align-items:flex-end;justify-content:center}
#wbag .wb-in{width:100%;max-width:460px;padding:0 0 calc(env(safe-area-inset-bottom) + 10px);display:flex;flex-direction:column;align-items:center}
#wbag .wb-rib{background:linear-gradient(#ff9a3c,#e06a1c);color:#fff;font-weight:900;font-size:18px;letter-spacing:6px;padding:6px 28px;border-radius:6px;box-shadow:0 3px 0 #9a4310;text-shadow:0 2px 0 #9a4310;margin-bottom:6px}
#wbag .wb-title{color:#fff;font-size:13px;margin-bottom:8px;text-shadow:0 1px 2px #000}
#wbag .wb-gwrap{background:linear-gradient(#a86a3c,#7c4a26);border-radius:18px;padding:12px;box-shadow:inset 0 0 0 3px #5a3418,0 6px 0 #4a2a12}
#wb-grid{position:relative}
#wb-grid .wb-cell{position:absolute;width:58px;height:58px;margin:2px;border-radius:8px;background:#f3ead9;box-shadow:inset 0 2px 0 rgba(0,0,0,.12)}
#wb-grid .wb-fill{position:absolute;width:58px;height:58px;margin:2px;border-radius:8px;border:2px solid}
#wb-grid .wb-it,#wb-shelf .wb-sh,.wb-ghost{position:absolute;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
#wb-grid .wb-it img,#wb-shelf .wb-sh img,.wb-ghost img{max-width:86%;max-height:80%;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.wb-ghost{z-index:30;pointer-events:none;opacity:.9}
#wbag .st{position:absolute;left:4px;bottom:2px;font-size:11px;color:#ffd23f;text-shadow:0 1px 1px #000;letter-spacing:-1px}
#wbag .wb-total{color:#ffd36b;font-size:13px;font-weight:800;margin:8px 0 4px;text-shadow:0 1px 2px #000}
#wbag .wb-shelfbox{width:100%;background:linear-gradient(#e0a25e,#c27a3a);border-top:6px solid #8e5426;padding:12px 12px 8px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)}
#wb-shelf{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;min-height:78px}
#wb-shelf .wb-sh{position:relative;height:72px;background:rgba(255,240,215,.35);border-radius:10px}
#wb-shelf .wb-sh .dps{position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);background:#2c3446;color:#fff;font-size:10px;font-weight:800;padding:1px 6px;border-radius:5px;white-space:nowrap}
#wbag .wb-empty{color:#6a4220;font-size:13px;align-self:center}
#wbag .wb-help{text-align:center;font-size:11px;color:#5a3418;margin:6px 0}
#wbag .wb-btns{display:flex;gap:8px}
.wb-b{flex:1;border:none;border-radius:10px;padding:11px 6px;font-size:14px;white-space:nowrap;font-weight:900;font-family:inherit;cursor:pointer;background:#ffcf4d;color:#4a2a00;box-shadow:0 3px 0 #b8861a}
.wb-b.ok{background:linear-gradient(#5fe36b,#2fb144);color:#fff;text-shadow:0 1px 1px #1d6a2a;box-shadow:0 3px 0 #1d7a2e;flex:1.4}
#wb-tip{position:fixed;z-index:31;width:210px;background:#1c2330;border:2px solid #ffd36b;border-radius:10px;padding:8px 10px;color:#fff;font-size:12px;line-height:1.4;pointer-events:none}
#wb-tip b{display:block;color:#ffd36b;font-size:13px}
/* 기술 고르기 */
#wskill{position:absolute;inset:0;z-index:17;background:rgba(5,8,12,.7);display:flex;align-items:center;justify-content:center;padding:16px}
#wskill .ws-in{width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px;align-items:stretch}
#wskill .ws-h{text-align:center;color:#fff;font-size:20px;font-weight:900;text-shadow:0 2px 0 #000}
.ws-card{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:linear-gradient(#25407a,#1a2c58);border:2px solid #7fb2ff;border-radius:12px;padding:10px 12px;color:#fff;font-family:inherit;cursor:pointer;box-shadow:0 3px 0 #0e1a36}
.ws-card .em{font-size:30px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:10px}
.ws-card .tx{display:flex;flex-direction:column;gap:2px}
.ws-card b{font-size:16px}
.ws-card small{font-size:12px;color:#cfe0ff}
.ws-card i{font-style:normal;color:#ffd23f;font-size:12px;letter-spacing:1px}
.ws-card i u{text-decoration:none;color:rgba(255,255,255,.25)}
#ws-roll{align-self:center;flex:none;padding:10px 26px}
/* 집 화면 웨이브 카드 */
.wavecard{background:linear-gradient(135deg,#25324a,#1a2233);border-color:#3c5a8a}
.wavecard .wk{font-size:12px;color:#9fc3ff;font-weight:700;letter-spacing:1px}
.wavecard .wt{font-size:22px;font-weight:900;margin:2px 0 4px}
.wavecard .s{font-size:13px;color:#c9d2e0;line-height:1.5}
.wavecard .btn{margin-top:10px}

/* 시작 화면(10-17 v0.22) — 참고 영상처럼: 위 남색 막대(얼굴·레벨·기록) · 하늘 배경 · 단계 이름 · 떠 있는 무대 그림 · 노란 「시작」 · 아래 탭 막대 */
#home{padding-bottom:calc(env(safe-area-inset-bottom) + 92px)}
#home .pane{display:flex;flex-direction:column;gap:12px}
#home .pane.hidden{display:none}
#home.tab-play{background:radial-gradient(ellipse 60% 18% at 20% 30%,rgba(255,255,255,.55),transparent 70%),radial-gradient(ellipse 50% 14% at 85% 58%,rgba(255,255,255,.45),transparent 70%),linear-gradient(#49b6f0,#8fd6fb 45%,#d4f1ff);max-width:none;padding:0 0 calc(env(safe-area-inset-bottom) + 84px)}
#lobby{min-height:100%;gap:0}
.lb-top{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#26355e;padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;box-shadow:0 2px 0 #1a2544}
.lb-prof{display:flex;align-items:center;gap:8px;min-width:0}
#lb-face{width:40px;height:40px;border-radius:8px;background:#3b4f86;border:2px solid #fff;object-fit:cover}
.lb-pn{display:flex;flex-direction:column;gap:4px;min-width:0}
.lb-pn b{font-size:13px;color:#fff;white-space:nowrap}
.lb-xb{display:block;width:96px;height:7px;border-radius:4px;background:#121a33;overflow:hidden}
.lb-xb i{display:block;height:100%;width:0;background:linear-gradient(#7be86b,#3fb64a)}
.lb-res{display:flex;gap:6px}
.lb-res .r{display:flex;align-items:center;gap:4px;background:#121a33;border-radius:12px;padding:4px 10px 4px 7px;font-size:14px}
.lb-res .r b{font-size:13px;color:#fff}
.lb-stage{flex:1;display:flex;flex-direction:column;align-items:center;padding:22px 16px 10px;text-align:center}
.lb-title{font-size:32px;font-weight:900;color:#fff;letter-spacing:-.5px;-webkit-text-stroke:1.5px #1f2d52;text-shadow:0 3px 0 #1f2d52}
.lb-sub{margin-top:4px;font-size:13px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
#lb-dio{width:min(calc(var(--vw,1vw)*86),380px);margin:14px 0 6px;filter:drop-shadow(0 18px 14px rgba(20,40,80,.35));animation:dio 3.2s ease-in-out infinite alternate}
@keyframes dio{from{transform:translateY(0)}to{transform:translateY(-10px)}}
.lb-start{margin-top:8px;min-width:200px;padding:12px 40px 14px;border-radius:14px;border:3px solid #b77a00;background:linear-gradient(#ffe36b,#f5b301);color:#fff;font-family:inherit;font-size:28px;font-weight:900;-webkit-text-stroke:1px #8a5200;text-shadow:0 2px 0 #9a5c00;box-shadow:0 6px 0 #a86a00;cursor:pointer}
.lb-start:active{transform:translateY(4px);box-shadow:0 2px 0 #a86a00}
.lb-tip{margin-top:14px;font-size:12px;font-weight:700;color:#1f3a66}
#tabbar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;align-items:flex-end;gap:2px;background:#26355e;padding:6px 6px calc(env(safe-area-inset-bottom) + 6px);border-top:2px solid #1a2544}
#tabbar button{flex:1;max-width:96px;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;color:#c9d6f2;font-family:inherit;font-size:11px;font-weight:700;padding:4px 0;cursor:pointer;border-radius:10px}
#tabbar button em{font-style:normal;font-size:22px;line-height:1}
#tabbar button small{font-size:9px;color:#8090b5}
#tabbar button.lock{opacity:.55}
#tabbar button.on{background:#3b5bb0;color:#fff}
#tabbar button.main{transform:translateY(-8px);background:#3f7fe6;color:#fff;border:2px solid #9cc4ff;padding:8px 0;box-shadow:0 3px 0 #1d3f80}
#tabbar button.main.on{background:#4f93ff}
#out:not(.hidden) ~ #tabbar{display:none}
.herocard{display:flex;gap:14px;align-items:center}
#hero-img{width:110px;height:auto;flex:none}
.herocard .hs{font-size:14px;line-height:1.7}
.herocard .hs b{font-size:18px}
#wmoves .mv b{min-width:120px}

/* ===== 디자인 안(10-17, js/skin.js) — 기존 / Claude 안 / GPT 안 ===== */
.lb-chip,.lb-pips{display:none}
#tabbar .ic{display:none;font-style:normal}
.lb-skin{display:flex;gap:6px;justify-content:center;margin-top:12px}
.lb-skin button{font-family:inherit;font-size:12px;font-weight:700;padding:6px 12px;border-radius:14px;border:1px solid rgba(0,0,0,.25);background:rgba(255,255,255,.55);color:#1f3a66;cursor:pointer}
.lb-skin button.on{background:#1f3a66;color:#fff;border-color:#1f3a66}
#set-skin{justify-content:flex-start}
#set-skin button{background:var(--panel);color:var(--text);border-color:var(--line)}
#set-skin button.on{background:var(--acc);color:#2a1a00;border-color:var(--acc)}
.lb-pips{align-items:center;gap:6px;margin-top:4px}
.lb-pips .k{font-size:12px;font-weight:800;margin-right:4px}
.lb-pips i{width:14px;height:14px;border-radius:3px}

/* Claude 안 — 서울 비상등: 밤 아스팔트 · 택시 노랑 · 굵은 외곽선 */
html.skin-claude body{font-family:"Gothic A1",-apple-system,"Apple SD Gothic Neo",sans-serif}
html.skin-claude #home.tab-play{background:linear-gradient(#22305C 0 55%,#FFC531 55% calc(55% + 6px),#161B26 calc(55% + 6px))}
html.skin-claude .lb-top{background:transparent;box-shadow:none}
html.skin-claude #lb-face{border:3px solid #FFC531;border-radius:12px;background:#2C3D73}
html.skin-claude .lb-xb{background:#0E1220}
html.skin-claude .lb-xb i{background:#A6D45A}
html.skin-claude .lb-res .r{background:#0E1220;color:#F5F2EA}
html.skin-claude .lb-chip{display:inline-block;background:#FFC531;color:#161B26;font-size:12px;font-weight:800;letter-spacing:2px;padding:4px 12px;border-radius:4px;margin-bottom:8px}
html.skin-claude .lb-title{font-family:"Black Han Sans",sans-serif;font-weight:400;font-size:46px;-webkit-text-stroke:0;color:#F5F2EA;text-shadow:0 4px 0 #0E1220}
html.skin-claude .lb-sub{color:#C8D0E2;text-shadow:none}
html.skin-claude #lb-dio{animation:none}
html.skin-claude .lb-pips{display:flex;color:#C8D0E2}
html.skin-claude .lb-pips i{background:#34405A}
html.skin-claude .lb-pips i.on{background:#FFC531}
html.skin-claude .lb-pips i.boss{background:#34405A;box-shadow:0 0 0 2px #161B26,0 0 0 4px #FF6A2B}
html.skin-claude .lb-pips i.boss.on{background:#FF6A2B}
html.skin-claude .lb-start{background:#FFC531;border:0;border-radius:18px;color:#161B26;font-family:"Black Han Sans",sans-serif;font-weight:400;font-size:34px;-webkit-text-stroke:0;text-shadow:none;box-shadow:0 7px 0 #B8860B;min-width:250px;padding:14px 40px}
html.skin-claude .lb-start:active{box-shadow:0 3px 0 #B8860B}
html.skin-claude .lb-tip{color:#A9B3C6}
html.skin-claude .lb-skin button{background:#232B3B;color:#C8D0E2;border-color:#34405A}
html.skin-claude .lb-skin button.on{background:#FFC531;color:#161B26;border-color:#FFC531}
html.skin-claude #tabbar{background:#0E1220;border-top:2px solid #FFC531}
html.skin-claude #tabbar em,html.skin-gpt #tabbar em{display:none}
html.skin-claude #tabbar .ic,html.skin-gpt #tabbar .ic{display:block;height:24px}
html.skin-claude #tabbar button{color:#C8D0E2}
html.skin-claude #tabbar button.on{background:none;color:#FFC531}
html.skin-claude #tabbar button.main{flex:none;width:68px;height:68px;border-radius:50%;background:#FFC531;color:#161B26;border:4px solid #0E1220;box-shadow:0 0 0 2px #FFC531;transform:translateY(-16px);justify-content:center;padding:0}
html.skin-claude #btn-p{background:#FF6A2B;border:4px solid #1B1F2A;box-shadow:0 5px 0 #A33A10;font-family:"Black Han Sans",sans-serif;font-weight:400;font-size:32px}
html.skin-claude #btn-p small{display:none}
html.skin-claude #btn-k{background:#FFB020;color:#1B1F2A;border:4px solid #1B1F2A;box-shadow:0 5px 0 #A86E00;font-family:"Black Han Sans",sans-serif;font-weight:400;font-size:26px}
html.skin-claude #btn-k small{display:none}
html.skin-claude #btn-roll{background:#3E8BFF;border:4px solid #1B1F2A;box-shadow:0 5px 0 #1D4FA3}
html.skin-claude #btn-shock{background:conic-gradient(rgba(0,0,0,.6) var(--c,0%),#232B3B 0);border:4px solid #1B1F2A;box-shadow:0 4px 0 #0E1220}
html.skin-claude #btn-rage{background:conic-gradient(#FFC531 var(--p,0%),#232B3B 0);border:4px solid #1B1F2A;color:#F5F2EA}
html.skin-claude #btn-rage.full{background:#FFC531;color:#161B26}
html.skin-claude #wv .wxp b{background:#FFC531;color:#161B26}
html.skin-claude #wv .xb{background:#0E1220;border-color:#0E1220}
html.skin-claude #wv .xb i{background:#A6D45A}
html.skin-claude #wv .wbox{background:#0E1220;border-radius:10px}
html.skin-claude #wv .wbox b{font-family:"Black Han Sans",sans-serif;font-weight:400;font-size:24px}
html.skin-claude #wv-rank{font-family:"Black Han Sans",sans-serif;font-weight:400;font-size:44px}
html.skin-claude #mini{border:2px solid #34405A;border-radius:12px}

/* GPT 안 — 어두운 그런지 · 네온 · 금테 버튼(그림 조각은 art/chars/gpt2) */
html.skin-gpt body{font-family:"Gothic A1",-apple-system,"Apple SD Gothic Neo",sans-serif}
html.skin-gpt #home.tab-play{background:#0B1020 url(../art/chars/gpt2/ui_lobby_bg.jpg) center/cover no-repeat}
html.skin-gpt .lb-top{background:linear-gradient(rgba(5,8,18,.9),rgba(5,8,18,0));box-shadow:none}
html.skin-gpt #lb-face{border-radius:50%;border:3px solid #E9B949;background:#1A2033}
html.skin-gpt .lb-xb{background:#05070F;border:1px solid #3A4466}
html.skin-gpt .lb-xb i{background:linear-gradient(#FFD45A,#E09A10)}
html.skin-gpt .lb-res .r{background:rgba(10,14,28,.85);border:1px solid #3A4466;border-radius:8px;color:#fff}
html.skin-gpt .lb-title{font-family:"Black Han Sans",sans-serif;font-weight:400;font-size:42px;color:#fff;-webkit-text-stroke:2px #0B0B0B;text-shadow:0 3px 0 #0B0B0B;padding:18px 34px;background:url(../art/chars/gpt2/ui_splash.png) center/100% 100% no-repeat}
html.skin-gpt .lb-sub{display:inline-block;margin-top:-4px;background:rgba(10,14,28,.92);border:1px solid #556080;border-radius:14px;padding:4px 14px;color:#fff;text-shadow:none}
html.skin-gpt #lb-dio{content:url(../art/chars/gpt2/stage_ui_stage1.png)}
html.skin-gpt .lb-start{background:linear-gradient(#FFE66B,#F7B500 60%,#E39A00);border:3px solid #6B4300;border-radius:16px;color:#2A1600;-webkit-text-stroke:0;text-shadow:0 1px 0 rgba(255,255,255,.5);font-family:"Black Han Sans",sans-serif;font-weight:400;font-size:40px;box-shadow:0 6px 0 #8A5800,inset 0 2px 0 rgba(255,255,255,.6);min-width:260px}
html.skin-gpt .lb-tip{color:#AFC0DD;text-shadow:0 1px 2px #000}
html.skin-gpt .lb-skin button{background:rgba(10,14,28,.85);color:#C9D6F2;border-color:#3A4466}
html.skin-gpt .lb-skin button.on{background:#E9B949;color:#2A1600;border-color:#E9B949}
html.skin-gpt #tabbar{background:linear-gradient(#1A2033,#0B0F1C);border-top:1px solid #3A4466}
html.skin-gpt #tabbar button{color:#C9D6F2}
html.skin-gpt #tabbar button.on{background:rgba(233,185,73,.12);color:#FFD45A}
html.skin-gpt #tabbar button.main{background:linear-gradient(#3A2E10,#1A1406);border:2px solid #E9B949;color:#FFD45A;box-shadow:0 0 14px rgba(233,185,73,.45)}
html.skin-gpt #btn-p,html.skin-gpt #btn-k,html.skin-gpt #btn-roll,html.skin-gpt #btn-shock,html.skin-gpt #btn-rage{border:0;color:#fff;font-family:"Black Han Sans",sans-serif;font-weight:400;text-shadow:0 2px 2px #000,0 0 3px #000;box-shadow:0 4px 12px rgba(0,0,0,.55);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:7px}
html.skin-gpt #btn-p{background:url(../art/chars/gpt2/gi_fist.png) center/cover;font-size:22px}
html.skin-gpt #btn-k{background:url(../art/chars/gpt2/gi_kick.png) center/cover;font-size:18px}
html.skin-gpt #btn-p small,html.skin-gpt #btn-k small{display:none}
html.skin-gpt #btn-roll{background:url(../art/chars/gpt2/gi_roll.png) center/cover;font-size:13px}
html.skin-gpt #btn-shock{background:conic-gradient(rgba(0,0,0,.65) var(--c,0%),rgba(0,0,0,0) 0),url(../art/chars/gpt2/gi_shock.png) center/cover;font-size:12px}
html.skin-gpt #btn-rage{background:conic-gradient(rgba(0,0,0,0) var(--p,0%),rgba(0,0,0,.6) 0),url(../art/chars/gpt2/gi_rage.png) center/cover;font-size:12px;line-height:1.1}
html.skin-gpt #btn-rage.full{box-shadow:0 0 18px 4px rgba(255,200,60,.8)}
html.skin-gpt #wv .wxp b{background:#1A2033;border:1px solid #3A4466;color:#fff}
html.skin-gpt #wv .xb{background:#05070F;border-color:#3A4466}
html.skin-gpt #wv .xb i{background:linear-gradient(#8CF06A,#3FB64A)}
html.skin-gpt #wv .wbox{background:rgba(10,14,28,.85);border:1px solid #3A4466;border-radius:10px}
html.skin-gpt #wv .wbox b{font-family:"Black Han Sans",sans-serif;font-weight:400;color:#FFD45A;font-size:24px}
html.skin-gpt #wv-rank{font-family:"Black Han Sans",sans-serif;font-weight:400;font-size:46px;text-shadow:0 0 12px rgba(95,216,255,.7),0 3px 0 #04263a}
html.skin-gpt #wv-rank.r1,html.skin-gpt #wv-rank.r2{color:#5FD8FF}
html.skin-gpt #mini{border:2px solid #E9B949;border-radius:10px}

/* 시작 화면 서울 지도 → 이번 구 → 돋보기(10-17) — 들어올 때마다: 구들이 깔리고(0~0.5초) · 이번 구가 빛나고 · 선이 뻗고(0.8초) · 돋보기가 그 구에서 커진다(1.1초) */
.lb-zoom{position:relative;margin:12px auto 4px;flex:none}
.lb-zoom .sz{position:absolute;left:0;top:0;overflow:visible}
.sz-land polygon{fill:#dff1fb;stroke:#8fb7d6;stroke-width:.8;opacity:0;animation:szIn .45s ease-out forwards}
.sz-river{fill:none;stroke:#7cc4ee;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:szIn .45s .3s forwards}
.sz-hl{fill:#ffcf4a;stroke:#b77a00;stroke-width:1.5;opacity:0;animation:szIn .3s .5s forwards,szPulse 1.6s 1s ease-in-out infinite}
.sz-box{fill:none;stroke:#1f3a66;stroke-width:2;stroke-dasharray:4 3;opacity:0;animation:szIn .3s .65s forwards}
.sz-name{font:800 11px "Gothic A1",-apple-system,sans-serif;fill:#1f3a66;text-anchor:middle;opacity:0;animation:szIn .3s .65s forwards}
.sz-call{stroke:#1f3a66;stroke-width:2;stroke-dasharray:220;stroke-dashoffset:220;animation:szLine .4s .8s ease-out forwards}
.lb-lens{position:absolute;border-radius:50%;overflow:hidden;background:#bfe7fb;border:4px solid #fff;box-shadow:0 8px 18px rgba(20,40,80,.35);transform:scale(.08);opacity:0;animation:szLens .55s 1.05s cubic-bezier(.2,1.35,.4,1) forwards}
.lb-lens img,.lb-lens #lb-dio{position:absolute;left:50%;top:52%;width:118%;height:auto;transform:translate(-50%,-50%);animation:none;filter:none;margin:0}
@keyframes szIn{to{opacity:1}}
@keyframes szLine{to{stroke-dashoffset:0}}
@keyframes szLens{to{transform:scale(1);opacity:1}}
@keyframes szPulse{0%,100%{fill-opacity:1}50%{fill-opacity:.55}}
html.skin-claude .sz-land polygon{fill:#2C3D73;stroke:#1A2650}
html.skin-claude .sz-river{stroke:#141D3D}
html.skin-claude .sz-hl{fill:#FFC531;stroke:#FFE08A}
html.skin-claude .sz-box,html.skin-claude .sz-call{stroke:#FFC531}
html.skin-claude .sz-name{fill:#FFC531}
html.skin-claude .lb-lens{background:#22305C;border:4px solid #FFC531;box-shadow:0 8px 0 rgba(11,15,25,.55)}
html.skin-gpt .sz-land polygon{fill:rgba(52,66,104,.94);stroke:#7886B4;stroke-width:1}
html.skin-gpt .sz-river{stroke:#1E4A72}
html.skin-gpt .sz-hl{fill:#E9B949;stroke:#FFE6A0;filter:drop-shadow(0 0 6px rgba(233,185,73,.9))}
html.skin-gpt .sz-box,html.skin-gpt .sz-call{stroke:#E9B949}
html.skin-gpt .sz-name{fill:#FFE6A0}
html.skin-gpt .lb-lens{background:#0B1020;border:3px solid #E9B949;box-shadow:0 0 18px rgba(233,185,73,.55),0 10px 20px rgba(0,0,0,.6)}

/* 탐색 점수·등급 말(10-17, 크로노 블레이드 참고) */
#wv .wscore{position:absolute;left:50%;top:26px;transform:translateX(-50%);font-size:12px;font-weight:700;color:#d6dbe6;text-shadow:0 1px 2px #000;white-space:nowrap}
#wv .wscore b{font-size:16px;color:#ffd36b;margin-left:3px}
#wv-rank i{font-style:italic;font-size:22px;margin-left:4px;vertical-align:4px}
#modal .stars{text-align:center;font-size:40px;letter-spacing:6px;margin:4px 0 2px;color:#3a4250}
#modal .stars span.on{color:#ffd36b;text-shadow:0 0 12px rgba(255,211,107,.7)}
#modal .starwhy{text-align:center;font-size:12px;color:var(--muted);margin-bottom:8px}

/* 탐색 버튼(10-17 크로노 블레이드): 약·강·점프·필살(3칸) */
#out.wave #btn-rage{display:none!important}
#btn-shock span{display:block;font-size:10px;letter-spacing:2px;margin-top:1px}
#btn-shock.full{box-shadow:0 0 16px 4px rgba(255,200,60,.85)}
html.skin-gpt #btn-shock{background:conic-gradient(rgba(0,0,0,.65) var(--c,0%),rgba(0,0,0,0) 0),url(../art/chars/gpt2/gi_rage.png) center/cover}
html.skin-claude #btn-shock.full,html.skin-claude #btn-shock:not(.cool){background:#FFC531;color:#161B26}

/* 탐색 버튼 배치(10-17 크로노 블레이드 사진대로): 손 가운데 크게 · 강타 오른쪽 위 · 방어 오른쪽 아래 · 구르기 왼쪽 아래 · 스킬1 왼쪽 · 스킬2 왼쪽 아래 끝 */
#btn-skill1,#btn-guard{display:none}
#out.wave #btn-skill1,#out.wave #btn-guard{display:flex;align-items:center;justify-content:center;flex-direction:column}
#out.wave #acts,#out.wave #wacts{width:206px;height:204px;right:8px} /* 10-17 「오른쪽 키를 완전히 오른쪽으로 몰아줘」 — 조이스틱과 떨어지게 폭 206px */
#out.wave #btn-p{right:60px!important;bottom:56px!important;width:88px!important;height:88px!important;font-size:28px}
#out.wave #btn-k{right:0!important;bottom:108px!important;width:58px!important;height:58px!important;font-size:14px}
#out.wave #btn-guard{right:0!important;bottom:36px!important;width:58px!important;height:58px!important;font-size:13px;background:rgba(70,90,120,.92);border:3px solid rgba(255,255,255,.4);color:#fff;border-radius:50%;position:absolute}
#out.wave #btn-guard.on{background:rgba(110,170,255,.95);box-shadow:0 0 14px 3px rgba(143,211,255,.7)}
#out.wave #btn-roll{right:66px!important;bottom:0!important;width:56px!important;height:56px!important;font-size:12px}
#out.wave #btn-skill1{right:78px!important;bottom:150px!important;width:52px!important;height:52px!important;font-size:11px;position:absolute} /* 10-17 「회오리를 손 위로」 */
#out.wave #btn-shock{right:150px!important;bottom:40px!important;width:54px!important;height:54px!important;font-size:11px}
html.skin-gpt #btn-skill1{background:conic-gradient(rgba(0,0,0,.65) var(--c,0%),rgba(0,0,0,0) 0),url(../art/chars/gpt2/gi_shock.png) center/cover;border:0;color:#fff;font-family:"Black Han Sans",sans-serif;font-weight:400;text-shadow:0 2px 2px #000,0 0 3px #000;justify-content:flex-end;padding-bottom:6px}
html.skin-gpt #out.wave #btn-guard{background:radial-gradient(circle at 50% 40%,#3a5a8a,#16243e 70%);border:3px solid #E9B949;font-family:"Black Han Sans",sans-serif;font-weight:400;text-shadow:0 2px 2px #000}
html.skin-gpt #out.wave #btn-guard.on{box-shadow:0 0 16px 4px rgba(143,211,255,.8)}
html.skin-claude #btn-skill1{background:conic-gradient(rgba(0,0,0,.6) var(--c,0%),#232B3B 0);border:4px solid #1B1F2A;color:#F5F2EA;box-shadow:0 4px 0 #0E1220}
html.skin-claude #out.wave #btn-guard{background:#5E7FB0;border:4px solid #1B1F2A;box-shadow:0 4px 0 #2C3F63;font-family:"Black Han Sans",sans-serif;font-weight:400}

/* 무기 고르기(10-17) */
.lb-weap{display:flex;gap:6px;justify-content:center;margin:10px 0 2px}
.lb-weap button{display:flex;flex-direction:column;align-items:center;gap:2px;width:66px;padding:5px 0 4px;border-radius:12px;border:2px solid rgba(0,0,0,.18);background:rgba(255,255,255,.6);font-family:inherit;font-size:11px;font-weight:800;color:#1f3a66;cursor:pointer}
.lb-weap button img{width:34px;height:34px;object-fit:contain}
.lb-weap button.on{border-color:#f5b301;background:#fff3c4;box-shadow:0 0 0 2px rgba(245,179,1,.35)}
html.skin-gpt .lb-weap button,html.skin-claude .lb-weap button{background:rgba(10,14,28,.8);border-color:#3A4466;color:#C9D6F2}
html.skin-gpt .lb-weap button.on{border-color:#E9B949;background:rgba(58,46,16,.92);color:#FFD45A}
html.skin-claude .lb-weap button.on{border-color:#FFC531;background:#22305C;color:#FFC531}

/* 모험 길: 서울 → 전국 → 일본 → 미국(10-17) */
.lb-chap{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:11px;font-weight:800;flex-wrap:wrap;justify-content:center}
.lb-chap span{padding:3px 8px;border-radius:10px;background:rgba(0,0,0,.18);color:rgba(255,255,255,.7)}
.lb-chap span.on{background:#f5b301;color:#2a1a00}
.lb-chap i{font-style:normal;color:rgba(255,255,255,.6)}
html.skin-gpt .lb-chap span{background:rgba(10,14,28,.85);border:1px solid #3A4466}
html.skin-gpt .lb-chap span.on{background:#E9B949;color:#2A1600;border-color:#E9B949}
html.skin-claude .lb-chap span{background:#0E1220}
html.skin-claude .lb-chap span.on{background:#FFC531;color:#161B26}
/* 키 작은 화면: 장 줄이 늘어난 만큼 지도를 줄여 「시작」이 아래 탭에 안 가리게(10-17) */
/* 화면 방향 설정(js/orient.js) — 미디어 조건 대신 반 */
html.h880 .lb-zoom{zoom:.84;margin-top:8px}
html.h880 .lb-stage{padding-top:14px}
/* 화면 방향 설정(js/orient.js) — 미디어 조건 대신 반 */
html.h740 .lb-zoom{zoom:.7}
/* 단계 고르기·임무 길(10-17 v0.27 구출·도착 임무) */
.lb-trow{display:flex;align-items:center;justify-content:center;gap:8px}
.lb-sw{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:rgba(10,14,28,.6);color:#fff;font-size:22px;font-weight:900;line-height:1;padding:0;cursor:pointer}
.lb-sw:disabled{opacity:.25;cursor:default}
.lb-route{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px;margin-top:6px;font-size:11px;font-weight:800}
.lb-route span{padding:2px 7px;border-radius:9px;background:rgba(10,14,28,.75);color:#dfe6f5;border:1px solid #3A4466}
.lb-route span.boss{border-color:#e5564f;color:#ffb3aa}
.lb-route span.rescue{border-color:#7be08a;color:#bff5c6}
.lb-route span.goal{border-color:#E9B949;color:#ffe3a1}
.lb-route span.on{background:#E9B949;color:#2A1600;border-color:#E9B949}
.lb-route i{font-style:normal;color:rgba(255,255,255,.6)}
.lb-sub{max-width:330px;margin-left:auto;margin-right:auto;line-height:1.35}
.lb-trow .lb-title{white-space:nowrap;min-width:0}
html.skin-gpt .lb-trow .lb-title{font-size:clamp(26px,calc(var(--vw,1vw)*8.6),40px);padding:16px 24px}
html.skin-claude .lb-trow .lb-title{font-size:clamp(28px,calc(var(--vw,1vw)*9.5),46px)}
.lb-trow .lb-sw{flex:none}
/* 가로 화면(10-17 v0.27 진님 「가로로 놓고 해 보자」): 시작 화면은 왼쪽 글·무기 / 오른쪽 지도·시작, 게임은 작은 지도를 맨 위로 */
/* 화면 방향 설정(js/orient.js) — 미디어 조건 대신 반 */
html.landui #home.tab-play{padding-bottom:calc(env(safe-area-inset-bottom) + 50px)}
html.landui #tabbar{padding-top:2px;padding-bottom:calc(env(safe-area-inset-bottom) + 2px)}
html.landui #tabbar button{flex-direction:row;justify-content:center;gap:6px;padding:5px 0}
html.landui #tabbar button em{font-size:18px}
html.landui .lb-top{padding-top:calc(env(safe-area-inset-top) + 4px);padding-bottom:4px}
html.landui .lb-stage{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"t z" "s z" "r z" "c z" "w b";column-gap:14px;row-gap:5px;align-items:center;justify-items:center;padding:4px max(16px,env(safe-area-inset-right)) 4px max(16px,env(safe-area-inset-left))}
html.landui .lb-trow{grid-area:t}
html.landui .lb-sub{grid-area:s;font-size:11px}
html.landui .lb-route{grid-area:r;margin-top:0}
html.landui .lb-chap{grid-area:c;margin-top:0}
html.landui .lb-zoom{grid-area:z;zoom:.5!important;margin:0!important}
html.landui .lb-weap{grid-area:w;margin:0}
html.landui .lb-start{grid-area:b;margin-top:0;min-width:150px;padding:6px 26px 8px;font-size:24px}
html.landui .lb-tip,html.landui .lb-skin,html.landui .lb-chip,html.landui .lb-pips{display:none!important}
html.landui.skin-gpt .lb-trow .lb-title{font-size:26px;padding:8px 18px}
html.landui.skin-claude .lb-trow .lb-title{font-size:30px}
html.landui #mini{top:calc(env(safe-area-inset-top) + 8px);right:max(12px,env(safe-area-inset-right))}
html.landui #wv{right:128px;left:max(12px,env(safe-area-inset-left))}
html.landui #out.wave #boss{top:calc(env(safe-area-inset-top) + 8px);left:50%;transform:translateX(-50%);width:calc(var(--vw,1vw)*34)}
html.landui #out.wave #wv-rank{top:calc(env(safe-area-inset-top) + 96px);font-size:26px}
html.landui #out.wave #acts,html.landui #out.wave #wacts{right:max(8px,env(safe-area-inset-right));bottom:calc(env(safe-area-inset-bottom) + 6px)}
html.landui #toast{bottom:60%}

/* 작은 지도 키우기·＋－·큰 지도(10-17 v0.29 진님 「지도가 너무 작고 클로즈업돼서 어디로 가는지 모르겠다」) */
#mini{width:136px;height:136px;pointer-events:auto;cursor:pointer}
#mzoom{display:none;position:absolute;right:12px;top:calc(env(safe-area-inset-top) + 216px);gap:4px;pointer-events:auto}
#out:not(.inside) #mzoom{display:flex}
#mzoom button{width:42px;height:30px;border-radius:8px;border:1px solid #3A4466;background:rgba(10,14,28,.85);color:#fff;font-size:17px;font-weight:900;line-height:1;padding:0;cursor:pointer}
#bigmap{position:absolute;inset:0;z-index:30;background:rgba(5,8,16,.94);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 10px);gap:8px}
#bigmap.hidden{display:none}
#bigmap .bm-top{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:15px}
#bigmap .bm-leg{font-size:11px;color:#c9d2e0;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
#bigmap .bm-leg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:6px}
#bigmap .bm-leg i.me{background:#fff}#bigmap .bm-leg i.nx{background:#ffd36b}#bigmap .bm-leg i.gl{background:#7be08a;border-radius:2px}#bigmap .bm-leg i.hs{background:#5ce1e6}
#bm-cv{flex:1;min-height:0;width:100%;border-radius:12px;border:1px solid #3A4466}
#bigmap .bm-bar{display:flex;gap:8px;justify-content:center}
#bigmap .bm-bar button{flex:1;max-width:150px;height:44px;border-radius:12px;border:1px solid #3A4466;background:#1A2033;color:#fff;font-size:15px;font-weight:800;cursor:pointer}
#bigmap .bm-bar button.pri{background:#E9B949;color:#2A1600;border-color:#E9B949}
html.skin-gpt #mzoom button{border-color:#E9B949}
/* 화면 방향 설정(js/orient.js) — 미디어 조건 대신 반 */
html.landui #mini{width:124px;height:124px}
html.landui #mzoom{top:calc(env(safe-area-inset-top) + 8px);right:calc(max(12px,env(safe-area-inset-right)) + 130px);flex-direction:column}
html.landui #mzoom button{width:36px;height:34px}
html.landui #wv{right:180px}
#out.wave #boss{width:calc(calc(var(--vw,1vw)*100) - 176px)}
/* 화면 방향 설정(js/orient.js) — 미디어 조건 대신 반 */
html.landui #out.wave #boss{width:calc(var(--vw,1vw)*30)}
#bigmap,#bigmap *,#mzoom,#mzoom button{pointer-events:auto}

/* 이야기 모드 뺌(10-17 v0.31 진님 「이야기 모드 이런 거 필요 없고 오픈월드로」) — 화면에서만 숨김, 코드는 남김 */
#tabbar [data-tab="story"],.lb-xb,.lb-res .r[title="이야기"],#btn-reset,#movelist{display:none!important}

/* ===== Z 서바이벌 판 시작 화면(10-18) — 참고 영상 배치 그대로, 그림·글은 우리 것 ===== */
#zl{display:flex;flex-direction:column;background:radial-gradient(ellipse 70% 30% at 30% 22%,rgba(160,180,255,.25),transparent 70%),radial-gradient(ellipse 60% 25% at 80% 60%,rgba(140,160,255,.18),transparent 70%),linear-gradient(#1b2350,#2b3a7a 45%,#3a4c94);color:#fff;z-index:3}
#zl.hidden{display:none}
.zl-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;background:linear-gradient(#24335f,#1d2a52);box-shadow:0 2px 0 #121a38}
.zl-prof{display:flex;align-items:center;gap:6px}
.zl-prof canvas{width:34px;height:34px;border-radius:7px;border:2px solid #f2c14e;background:#2b3a6a}
.zl-pn{display:flex;flex-direction:column;gap:3px;font-size:11px}
.zl-xb{display:block;width:72px;height:6px;background:#0e1430;border-radius:4px;overflow:hidden}
.zl-xb i{display:block;height:100%;background:linear-gradient(90deg,#4fb6ff,#8be0ff)}
.zl-res{display:flex;gap:6px}
.zl-res .r{display:flex;align-items:center;gap:3px;background:#101836;border-radius:12px;padding:3px 8px;font-size:12px;font-weight:800}
.zl-res em{font-style:normal}
.zl-body{flex:1;position:relative;overflow:auto}
.zl-pane{position:relative;min-height:100%;display:flex;flex-direction:column;align-items:center;padding:16px 16px 20px}
.zl-pane.hidden{display:none}
.zl-gear{position:absolute;left:12px;top:10px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.25);color:#cfd8ff;font-size:20px;cursor:pointer}
.zl-title{margin-top:26px;font-size:30px;font-weight:900;text-shadow:0 3px 0 #141c40,0 0 12px rgba(0,0,0,.4);letter-spacing:-.5px}
.zl-sub{margin-top:4px;font-size:13px;font-weight:700;color:#cfd8ff}
.zl-new{margin-top:12px;background:linear-gradient(#ffe46b,#f5b301);color:#3a2400;font-weight:900;font-size:15px;padding:6px 18px;border-radius:12px;border:2px solid #b77a00;box-shadow:0 3px 0 #8a5a00}
.zl-stage{margin:10px 0 0;width:min(calc(var(--vw,1vw)*78),300px);aspect-ratio:1/1}
.zl-stage img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45))}
.zl-start{margin-top:8px;min-width:190px;padding:10px 40px 8px;border-radius:14px;border:3px solid #b77a00;background:linear-gradient(#ffe36b,#f5b301);color:#3a2400;font-family:inherit;font-size:28px;font-weight:900;display:flex;flex-direction:column;align-items:center;cursor:pointer;box-shadow:0 5px 0 #8a5a00}
.zl-start small{font-size:12px;font-weight:800;color:#6b4300}
.zl-start:active{transform:translateY(3px);box-shadow:0 2px 0 #8a5a00}
.zl-ent{margin-top:8px;font-size:12px;color:#cfd8ff;min-height:16px}
.zl-tabs{display:flex;justify-content:center;gap:2px;background:#1d2a52;padding:6px 6px calc(env(safe-area-inset-bottom) + 6px);border-top:2px solid #121a38}
.zl-tabs button{flex:1;max-width:90px;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;color:#b9c6ef;font-family:inherit;font-size:11px;font-weight:800;padding:4px 0;border-radius:10px;cursor:pointer}
.zl-tabs button em{font-style:normal;font-size:22px;line-height:1.1}
.zl-tabs button.on{background:linear-gradient(#3e58b5,#2b3f8a);color:#fff;box-shadow:inset 0 0 0 2px #6f8cff}
.zl-tabs button.lock{opacity:.5}
.zl-h{width:100%;max-width:420px;font-size:17px;font-weight:900;margin:6px 0 10px;text-align:left}
.zl-card{width:100%;max-width:420px;background:linear-gradient(#5a3fb0,#3f2d86);border:2px solid #8f74ff;border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:0 4px 0 #24185a}
.zl-card.blue{background:linear-gradient(#2f6fd6,#2350a6);border-color:#7fb2ff;box-shadow:0 4px 0 #142e66}
.zl-card .ct{font-size:16px;font-weight:900;margin-bottom:4px}
.zl-card .cs{font-size:12px;color:#e2dcff;margin-bottom:10px}
.zl-btn{border:0;border-radius:12px;padding:10px 16px;font-family:inherit;font-weight:900;font-size:15px;cursor:pointer;background:linear-gradient(#7be86b,#3fb64a);color:#0c2a0c;box-shadow:0 3px 0 #1f6a26}
.zl-btn:disabled{background:#5d6480;color:#c5cae0;box-shadow:none;cursor:default}
.zl-hero{width:100%;max-width:420px;display:flex;gap:12px;align-items:center;background:linear-gradient(#3d79e0,#2a56b0);border:2px solid #8fbaff;border-radius:16px;padding:12px;margin-bottom:12px}
.zl-hero canvas{width:110px;height:auto;border-radius:10px;background:rgba(0,0,0,.15)}
.zl-hero .st{font-size:14px;line-height:1.7}
.zl-hero .st b{font-size:18px}
.zl-row{width:100%;max-width:420px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#1c2754;border:1px solid #33427a;border-radius:12px;padding:10px 12px;margin-bottom:8px}
.zl-row .l{display:flex;align-items:center;gap:10px}
.zl-row .l em{font-style:normal;font-size:24px}
.zl-row .l b{display:block;font-size:14px}
.zl-row .l span{font-size:12px;color:#aab6e0}
.zl-pips{display:inline-flex;gap:2px;margin-left:4px}
.zl-pips i{width:7px;height:7px;border-radius:50%;background:#3a4677}
.zl-pips i.on{background:#ffd23f}

/* za: 칼 액션 판의 옛 시작 화면·아래 탭은 Z 서바이벌 판에서 안 씀 */
#zl:not(.hidden) ~ #tabbar,#zl:not(.hidden) ~ #home{display:none!important}
#zl .lb-weap{margin:6px 0 2px}
#zl .lb-weap button{background:#1c2754;border:2px solid #33427a;border-radius:12px;color:#dfe6f5;font-weight:800;font-size:11px;cursor:pointer}
#zl .lb-weap button.on{border-color:#E9B949;background:#3a3420;color:#ffe3a1}

/* 10-20 시작 동네 고르기 */
#zl .zl-where{display:flex;align-items:center;gap:8px;margin:8px 0 0;color:#dfe6f5;font-weight:800;font-size:13px}
#zl .zl-where select{background:#1c2754;color:#ffe3a1;border:2px solid #33427a;border-radius:10px;padding:5px 8px;font-weight:800;font-size:13px}

/* 10-21 진님 「그래픽이 더 예뻐지면」: 3D 거리 화면 가장자리 은은한 어둠(가운데 캐릭터로 눈이 간다) — 3D 일 때만 */
#vig{position:absolute;inset:0;pointer-events:none;display:none;background:radial-gradient(ellipse 75% 65% at 50% 46%,rgba(8,12,20,0) 58%,rgba(8,12,20,.30) 100%)}
#cv3[style*="block"]~#vig{display:block}

/* 10-21 1막 임무 상자(위 왼쪽, 웨이브 상자 아래) */
#wv .wfood{pointer-events:auto;vertical-align:top;margin:8px 0 0 6px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:44px;background:rgba(20,26,36,.78);border:1px solid rgba(255,211,107,.45);border-radius:8px;padding:4px 10px;color:#ffe08a;font-family:inherit;font-size:15px;font-weight:800;line-height:1.1;text-shadow:0 1px 2px #000;cursor:pointer} /* 10-28 배·가방 식량 · 누르면 먹기 */
#wv .wfood span{font-size:11px;font-weight:700;color:#e6ecf5}
#wv .wfood.hungry{border-color:#ff9a4d;color:#ffb37a;animation:foodPulse 1s ease-in-out infinite}
#wv .wfood.starve{border-color:#e5564f;color:#ff7b70}
@keyframes foodPulse{50%{box-shadow:0 0 14px rgba(255,140,60,.9)}}
/* 11-07 한 줄 알약(들킴·식량) */
#wv.slim .wbox{flex-direction:row;align-items:center;gap:6px;padding:4px 10px;min-height:0}
#wv.slim .wbox span,#wv.slim .wbox small{display:none}
#wv.slim .wbox b{font-size:14px!important;line-height:1.2}
#wv.slim .wfood{flex-direction:row;gap:6px;min-height:0;padding:4px 10px;font-size:14px}
#wv.slim .wfood span{font-size:12px}
#wv.slim .wact{margin-top:5px}
#wv .wact{margin-top:6px;display:flex;flex-direction:column;gap:1px;max-width:min(230px,calc(var(--vw,1vw)*56));background:rgba(40,32,8,.82);border:1px solid rgba(255,211,107,.55);border-radius:8px;padding:5px 10px;color:#fff;text-shadow:0 1px 2px #000}
#wv .wact b{font-size:12px;color:#ffe08a}
#wv .wact span{font-size:12px;letter-spacing:2px;color:#ffd36b}
#wv .wact small{font-size:11.5px;line-height:1.35;color:#f3f0e6}

/* 10-22 진님 「가로로 할지 세로로 할지 설정에서」: 고른 방향과 폰 방향이 다르면 화면 전체를 90° 돌린다(js/orient.js) */
html.rot90,html.rotm90{overflow:hidden}
html.rot90 body,html.rotm90 body{position:fixed;top:0;left:0;transform-origin:0 0}
html.rot90 body{transform:rotate(90deg) translateY(-100%)}
html.rotm90 body{transform:rotate(-90deg) translateX(-100%)}
/* 가로 화면 Z 시작 화면(10-22 — 가로를 고를 수 있게 되어서): 왼쪽 글·동네·무기 / 오른쪽 그림·시작 */
html.landui #zl-play{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"t s" "u s" "n s" "w b" "p b" "e e";column-gap:16px;row-gap:6px;align-items:center;justify-items:center;align-content:center;padding:8px 16px 8px 56px}
html.landui .zl-title{grid-area:t;margin-top:0;font-size:24px}
html.landui .zl-sub{grid-area:u;margin-top:0}
html.landui .zl-new{grid-area:n;margin-top:0;font-size:13px;padding:4px 14px}
html.landui .zl-stage{grid-area:s;margin:0;width:min(calc(var(--vh,1vh)*40),190px)}
html.landui .zl-where{grid-area:w}
html.landui #zl-weap{grid-area:p;margin:0}
html.landui .zl-start{grid-area:b;margin-top:0;min-width:160px;padding:6px 30px;font-size:24px}
html.landui .zl-ent{grid-area:e;margin-top:0}
html.landui .zl-top{padding-top:calc(env(safe-area-inset-top) + 4px);padding-bottom:4px}
html.landui .zl-tabs{padding-top:2px;padding-bottom:calc(env(safe-area-inset-bottom) + 2px)}
html.landui .zl-tabs button{flex-direction:row;justify-content:center;gap:6px;padding:3px 0}
html.landui .zl-tabs button em{font-size:18px}
/* 10-22 화면 배율 막대(설정·멈춤 창) */
.cam-row{margin:6px 0 2px;text-align:left}
.cam-l{font-weight:700;margin-bottom:6px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cam-v{color:var(--acc);font-weight:700;font-size:14px}
.cam-r{width:100%;height:30px;accent-color:var(--acc);margin:0}
.cam-ends{position:relative;height:16px;font-size:12px;color:var(--muted)}
.cam-ends span{position:absolute;top:0;white-space:nowrap}
.cam-ends .a{left:0}.cam-ends .b{left:40%;transform:translateX(-50%)}.cam-ends .c{right:0}
.cam-row .cam-d{margin-top:6px;padding:6px 10px;font-size:13px}

/* 10-22 원래 홈에 「우리 집 동네」 고르기(서울 25구 탈환 판일 때) */
.lb-where{display:flex;align-items:center;gap:8px;margin:6px 0 0;font-weight:800;font-size:13px}
.lb-where.hidden{display:none}
.lb-where{flex-wrap:wrap}
.lb-where label{display:flex;align-items:center;gap:8px}
.lb-mine{background:#ffd75e;color:#2a1c00;border:0;border-radius:10px;padding:6px 10px;font-weight:900;font-size:13px;font-family:inherit;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.lb-mine:active{transform:translateY(1px)}
.mh-note{font-size:12px;opacity:.75}
.mh-q{width:100%;box-sizing:border-box;margin:4px 0 8px;padding:10px 12px;border-radius:10px;border:2px solid rgba(255,255,255,.35);background:rgba(0,0,0,.35);color:inherit;font:700 16px/1.2 inherit;font-family:inherit}
.mh-res{display:flex;flex-direction:column;gap:6px;max-height:42vh;overflow:auto;margin-bottom:8px}
.mh-res button{text-align:left;padding:9px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:inherit;font:800 15px/1.2 inherit;font-family:inherit}
.mh-res button small{opacity:.65;font-weight:700;margin-left:4px}
.lb-where select{background:rgba(0,0,0,.35);color:inherit;border:2px solid rgba(255,255,255,.35);border-radius:10px;padding:4px 8px;font-weight:800;font-size:13px;font-family:inherit}
html.landui .lb-stage{grid-template-areas:"t z" "s z" "h z" "r z" "c z" "w b"}
html.landui .lb-where{grid-area:h;margin:0}
html.h880 #lobby .lb-zoom{zoom:.7;margin-top:2px}
html.h740 #lobby .lb-zoom{zoom:.58}

/* 10-22 출시 체크리스트 3: 집 화면을 내려도 「시작」은 아래 탭 바로 위에 붙어 있다 */
#lobby .lb-start{position:sticky;bottom:calc(env(safe-area-inset-bottom) + 66px);z-index:6}