:root{--ink:#07131d;--cream:#f7e6c2;--gold:#ffc62e;--pink:#ff5c7a;--blue:#46a3ff;--green:#5fe08a;--glass:rgba(7,19,29,.58);--panel:rgba(255,248,232,.97);--shadow:0 6px 18px rgba(7,19,29,.28);--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#8fd8ff;color:var(--ink);font-family:'Fredoka','Jua',system-ui,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
button{font:inherit;color:inherit;border:0;cursor:pointer;background:none;padding:0}
[hidden]{display:none!important}
i{font-style:normal;display:inline-block;flex:none}
.ic{width:22px;height:22px;line-height:0;vertical-align:middle}.ic svg{width:100%;height:100%;display:block}
#load{position:fixed;inset:0;background:linear-gradient(#5ab8ff,#d8f1ff);z-index:50;display:grid;place-items:center}
#ui{position:fixed;inset:0;pointer-events:none;z-index:5}
#ui .hit,#ui button,#ui .pill,#ui .sheet,#ui .card,#ui #cards,#ui #tabs,#ui #res,#ui #tracker,#ui #sel{pointer-events:auto}
/* 상단 */
#top{position:absolute;left:calc(8px + var(--safe-l));right:calc(8px + var(--safe-r));top:calc(8px + var(--safe-t));display:flex;flex-direction:column;gap:6px;pointer-events:none}
.row{display:flex;align-items:center;gap:7px}.grow{flex:1}
.rb{width:42px;height:42px;border-radius:14px;background:linear-gradient(#ffb13b,#ff8a1f);box-shadow:0 4px 0 #b85a0c,var(--shadow);display:grid;place-items:center;position:relative;border:2px solid var(--ink)}
.rb .ic{width:24px;height:24px}.rb:active{transform:translateY(3px);box-shadow:0 1px 0 #b85a0c}
.rb.blue{background:linear-gradient(#5ab6ff,#2f8be8);box-shadow:0 4px 0 #1a5fae,var(--shadow)}.rb.green{background:linear-gradient(#7de88f,#3ec462);box-shadow:0 4px 0 #1f8a3c,var(--shadow)}.rb.red{background:linear-gradient(#ff8a8a,#e8453c);box-shadow:0 4px 0 #a02a22,var(--shadow)}.rb.purple{background:linear-gradient(#c8a0ff,#9b6bff);box-shadow:0 4px 0 #5f3fbf,var(--shadow)}.rb.gray{background:linear-gradient(#cdd6e0,#9aa8b8);box-shadow:0 4px 0 #66727f,var(--shadow)}
.rb .bd{position:absolute;right:-5px;top:-6px;min-width:18px;height:18px;border-radius:9px;background:#e8453c;color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;border:2px solid #fff;padding:0 3px}
.rb.pulse{animation:pls 1.2s ease-in-out infinite}
@keyframes pls{50%{transform:scale(1.1)}}
.pill{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 11px 0 8px;border-radius:17px;background:var(--glass);color:#fff;font-weight:700;font-size:17px;box-shadow:0 3px 8px rgba(7,19,29,.25);white-space:nowrap;border:1.5px solid rgba(255,255,255,.14)}
.pill .ic{width:22px;height:22px}.pill b{font-weight:700;letter-spacing:.2px;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.pill.era{background:linear-gradient(#ffb13b,#ff8a1f);border:2px solid var(--ink);height:38px;font-size:18px;box-shadow:0 3px 0 #b85a0c,var(--shadow);position:relative;overflow:hidden}
.pill.era .bar{position:absolute;left:0;bottom:0;height:4px;background:#fff;opacity:.9;border-radius:0 2px 2px 0}
.pill.season{background:var(--glass)}
#res{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0;margin:0 -8px;padding:2px 8px;pointer-events:auto}#res::-webkit-scrollbar{display:none}
#res .pill{height:30px;font-size:15px;padding:0 9px 0 6px;flex:none}#res .pill .ic{width:19px;height:19px}
#res .pill.full{background:rgba(232,134,26,.85)}#res .pill.low{background:rgba(232,69,60,.85);animation:pls .9s infinite}#res .pill.up b{color:#9dffb0}
#stats{display:flex;gap:6px;flex-wrap:nowrap}
#stats .pill{height:30px;font-size:15px;padding:0 9px 0 6px}#stats .pill .ic{width:19px;height:19px}
.pill.good{background:rgba(31,138,60,.8)}.pill.mid{background:rgba(190,130,20,.82)}.pill.bad{background:rgba(200,50,40,.85)}
/* 오른쪽 열 */
#right{position:absolute;right:calc(8px + var(--safe-r));top:calc(132px + var(--safe-t));display:flex;flex-direction:column;gap:11px;pointer-events:none}
#right .rb{pointer-events:auto}
/* 트래커 */
#tracker{position:absolute;left:calc(8px + var(--safe-l));top:calc(132px + var(--safe-t));width:132px;background:var(--glass);border-radius:14px;padding:6px 8px;color:#fff;display:flex;flex-direction:column;gap:4px;border:1.5px solid rgba(255,255,255,.14);box-shadow:0 3px 8px rgba(7,19,29,.25)}
#tracker .th{display:flex;align-items:center;gap:5px;font-weight:700;font-size:14px}#tracker .th .ic{width:20px;height:20px}
#tracker .g{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:600}#tracker .g .ic{width:18px;height:18px}#tracker .g .p{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden}#tracker .g .p i{display:block;height:100%;background:#7dff8a;border-radius:4px}#tracker .g.ok b{color:#9dffb0}
#tracker.claim{background:linear-gradient(#ffb13b,#ff8a1f);border-color:var(--ink);animation:pls 1.1s infinite}
/* 하단 */
#bottom{position:absolute;left:0;right:0;bottom:0;padding-bottom:calc(6px + var(--safe-b));display:flex;flex-direction:column;gap:6px;pointer-events:none}
#speed{display:flex;gap:6px;padding-left:calc(8px + var(--safe-l));padding-right:calc(8px + var(--safe-r));align-items:center}
#speed .rb{width:36px;height:36px;border-radius:12px}#speed .rb .ic{width:20px;height:20px}#speed .rb.on{background:linear-gradient(#7de88f,#3ec462);box-shadow:0 4px 0 #1f8a3c,var(--shadow)}
#cards{display:flex;gap:7px;overflow-x:auto;padding:4px 8px 6px;scrollbar-width:none;margin:0;pointer-events:auto;scroll-snap-type:x proximity}#cards::-webkit-scrollbar{display:none}
.card{flex:none;width:84px;border-radius:16px;background:var(--panel);border:2px solid var(--ink);padding:5px 4px 5px;display:flex;flex-direction:column;align-items:center;gap:1px;box-shadow:0 4px 0 rgba(7,19,29,.25),var(--shadow);position:relative;scroll-snap-align:start}
.card .th{width:58px;height:58px;display:grid;place-items:center}.card .th img{max-width:100%;max-height:100%;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}.card .th .ic{width:36px;height:36px}
.card .nm{font-size:13px;font-weight:700;line-height:1.1;text-align:center;height:15px;overflow:hidden;white-space:nowrap}
.card .cs{display:flex;flex-wrap:wrap;gap:2px 5px;justify-content:center;min-height:30px;align-content:flex-start}.card .cs span{display:inline-flex;align-items:center;gap:1px;font-size:12.5px;font-weight:700}.card .cs .ic{width:13px;height:13px}.card .cs .no{color:#e8453c}
.card:active{transform:translateY(2px)}.card.lock .th img{filter:grayscale(1) brightness(.8)}.card.lock{background:rgba(220,224,230,.9)}
.card .lk{position:absolute;right:3px;top:3px}.card .lk .ic{width:20px;height:20px}
.card.sel{outline:3px solid var(--gold)}
#tabs{display:flex;gap:5px;overflow-x:auto;padding:2px 8px 4px;scrollbar-width:none;pointer-events:auto;justify-content:flex-start}#tabs::-webkit-scrollbar{display:none}
#tabs .rb{flex:none;width:46px;height:48px;border-radius:15px}#tabs .rb .ic{width:28px;height:28px}#tabs .rb.on{background:linear-gradient(#fff3b0,#ffd23f);box-shadow:0 4px 0 #b88a00,var(--shadow);transform:translateY(-4px)}
#tabs .sp{flex:1}
#place{display:none;align-items:center;justify-content:center;gap:16px;padding:0 12px;pointer-events:none}#place.on{display:flex}
#place .big{width:72px;height:72px;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;pointer-events:auto;box-shadow:0 6px 0 rgba(7,19,29,.3),var(--shadow)}#place .big .ic{width:42px;height:42px}
#place .big.ok{background:linear-gradient(#7de88f,#3ec462)}#place .big.no{background:linear-gradient(#ff8a8a,#e8453c)}#place .big.dis{filter:grayscale(1);opacity:.7}
#place .info{pointer-events:auto;background:var(--panel);border:2px solid var(--ink);border-radius:16px;padding:6px 10px;display:flex;flex-direction:column;align-items:center;min-width:96px}
#place .info b{font-size:15px}#place .info .cs{display:flex;gap:6px}#place .info .cs span{display:inline-flex;align-items:center;gap:1px;font-size:14px;font-weight:700}#place .info .cs .ic{width:15px;height:15px}#place .info .cs .no{color:#e8453c}
#place .why{font-size:13px;color:#e8453c;font-weight:700;display:flex;align-items:center;gap:3px}
/* 선택 카드 */
#sel{position:absolute;left:8px;right:8px;bottom:calc(8px + var(--safe-b));background:var(--panel);border:2.5px solid var(--ink);border-radius:20px;padding:10px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;animation:up .18s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:0}}
#sel .hd{display:flex;align-items:center;gap:9px}#sel .hd .th{width:52px;height:52px;display:grid;place-items:center;flex:none;background:rgba(7,19,29,.07);border-radius:14px}#sel .hd .th img{max-width:100%;max-height:100%}#sel .hd .nm{font-size:20px;font-weight:700;line-height:1}#sel .lv{display:flex;gap:2px;margin-top:3px}#sel .lv .ic{width:16px;height:16px;opacity:.28}#sel .lv .ic.on{opacity:1}
#sel .st{display:flex;flex-wrap:wrap;gap:6px}#sel .st .chip{display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 5px;background:rgba(7,19,29,.07);border-radius:11px;font-size:15px;font-weight:700}#sel .st .chip .ic{width:18px;height:18px}#sel .st .chip.bad{background:#ffd3cf;color:#a02a22}#sel .st .chip.good{background:#d4f6d9;color:#1f6a30}
#sel .ac{display:flex;gap:7px}#sel .ac .ab{flex:1;height:50px;border-radius:15px;border:2.5px solid var(--ink);display:flex;align-items:center;justify-content:center;gap:5px;font-weight:700;font-size:15px;box-shadow:0 4px 0 rgba(7,19,29,.28)}#sel .ac .ab:active{transform:translateY(3px);box-shadow:none}#sel .ac .ab .ic{width:24px;height:24px}
#sel .ab.g{background:linear-gradient(#7de88f,#3ec462)}#sel .ab.o{background:linear-gradient(#ffb13b,#ff8a1f)}#sel .ab.r{background:linear-gradient(#ff8a8a,#e8453c);color:#fff}#sel .ab.b{background:linear-gradient(#8fd0ff,#46a3ff)}#sel .ab.w{background:#fff}#sel .ab.dis{filter:grayscale(1);opacity:.55}
#sel .ab .cs{display:inline-flex;gap:4px}#sel .ab .cs span{display:inline-flex;align-items:center;font-size:13px}#sel .ab .cs .ic{width:14px;height:14px}
#sel .x{position:absolute;right:-6px;top:-8px;width:30px;height:30px;border-radius:50%;background:#fff;border:2.5px solid var(--ink);display:grid;place-items:center}#sel .x .ic{width:14px;height:14px;filter:invert(1)}
/* 토스트·팝 */
#toasts{position:absolute;left:0;right:0;top:calc(176px + var(--safe-t));display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{display:flex;align-items:center;gap:7px;padding:6px 14px 6px 8px;background:var(--panel);border:2px solid var(--ink);border-radius:18px;font-weight:700;font-size:17px;box-shadow:var(--shadow);animation:ti .25s ease-out;max-width:90vw}.toast .ic{width:26px;height:26px}.toast.warn{background:#ffe3df}.toast.good{background:#e2f8e4}.toast.big{font-size:22px;padding:9px 18px 9px 10px}
@keyframes ti{from{transform:translateY(-14px) scale(.9);opacity:0}}
.pop{position:absolute;display:flex;align-items:center;gap:2px;font-weight:700;font-size:16px;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;pointer-events:none;transform:translate(-50%,-50%);animation:pu 1.2s ease-out forwards;white-space:nowrap}.pop .ic{width:20px;height:20px}
@keyframes pu{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}15%{opacity:1;transform:translate(-50%,-70%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-260%) scale(1)}}
.mk{position:absolute;transform:translate(-50%,-100%);pointer-events:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#fff;border:2.5px solid var(--ink);box-shadow:0 3px 6px rgba(7,19,29,.3);animation:bob 1.4s ease-in-out infinite}.mk .ic{width:22px;height:22px}.mk.red{background:#ffe3df}.mk.act{pointer-events:auto}
@keyframes bob{50%{margin-top:-4px}}
.mk.prog{width:auto;border-radius:12px;padding:0 6px;height:22px;background:rgba(7,19,29,.7);color:#fff;font-size:13px;font-weight:700;animation:none;border-width:1.5px}.mk.prog .b{width:44px;height:6px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden}.mk.prog .b i{display:block;height:100%;background:#ffd23f}
/* 시트 */
#sheet{position:absolute;inset:0;pointer-events:none}
.sheet{position:absolute;left:0;right:0;bottom:0;height:min(76%,640px);background:var(--panel);border-radius:26px 26px 0 0;border:3px solid var(--ink);border-bottom:0;box-shadow:0 -8px 30px rgba(7,19,29,.35);display:flex;flex-direction:column;pointer-events:auto;animation:sup .22s ease-out;padding-bottom:var(--safe-b)}
@keyframes sup{from{transform:translateY(100%)}}
.sheet.full{height:calc(100% - var(--safe-t) - 8px)}
.sheet .sh{display:flex;align-items:center;gap:9px;padding:10px 14px 8px;border-bottom:2px solid rgba(7,19,29,.1)}.sheet .sh .ic{width:30px;height:30px}.sheet .sh h2{margin:0;font-size:23px;flex:1;font-weight:700}
.sheet .sh .xb{width:40px;height:40px;border-radius:50%;background:#fff;border:2.5px solid var(--ink);display:grid;place-items:center}.sheet .sh .xb .ic{width:18px;height:18px;filter:invert(1)}
.sheet .sb{flex:1;overflow-y:auto;padding:10px 12px 14px;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.tabsx{display:flex;gap:6px;padding:8px 12px 0}.tabsx button{flex:1;height:38px;border-radius:12px;background:rgba(7,19,29,.08);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;gap:4px}.tabsx button.on{background:linear-gradient(#ffb13b,#ff8a1f);border:2px solid var(--ink);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.3)}.tabsx .ic{width:20px;height:20px}
.list{display:flex;flex-direction:column;gap:8px}
.it{display:flex;align-items:center;gap:9px;padding:8px 10px;background:#fff;border:2px solid var(--ink);border-radius:16px;box-shadow:0 3px 0 rgba(7,19,29,.18);position:relative}.it .ic{width:32px;height:32px}.it .th{width:48px;height:48px;display:grid;place-items:center;flex:none;background:rgba(7,19,29,.06);border-radius:12px}.it .th img{max-width:100%;max-height:100%}
.it .m{flex:1;min-width:0}.it .m b{font-size:17px;display:block;line-height:1.1}.it .m .s{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:2px;font-size:14px;font-weight:600}.it .m .s .ic{width:16px;height:16px}.it .m .s .no{color:#e8453c}
.it.dim{opacity:.55}.it.done{background:#e2f8e4}.it.go{border-color:#1f8a3c;background:#f0fff2}
.btn{height:44px;min-width:70px;padding:0 14px;border-radius:14px;border:2.5px solid var(--ink);background:linear-gradient(#ffb13b,#ff8a1f);color:#fff;font-weight:700;font-size:17px;display:inline-flex;align-items:center;justify-content:center;gap:5px;text-shadow:0 1px 0 rgba(0,0,0,.3);box-shadow:0 4px 0 #b85a0c}.btn:active{transform:translateY(3px);box-shadow:none}.btn .ic{width:22px;height:22px}
.btn.g{background:linear-gradient(#7de88f,#3ec462);box-shadow:0 4px 0 #1f8a3c}.btn.b{background:linear-gradient(#8fd0ff,#46a3ff);box-shadow:0 4px 0 #1a5fae}.btn.r{background:linear-gradient(#ff8a8a,#e8453c);box-shadow:0 4px 0 #a02a22}.btn.w{background:#fff;color:var(--ink);text-shadow:none;box-shadow:0 4px 0 rgba(7,19,29,.25)}.btn.dis{filter:grayscale(1);opacity:.55;pointer-events:none}.btn.sm{height:34px;min-width:54px;font-size:15px;padding:0 10px;border-radius:11px;border-width:2px}
.bar{height:10px;border-radius:5px;background:rgba(7,19,29,.14);overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(#7de88f,#3ec462);border-radius:5px}.bar.o i{background:linear-gradient(#ffb13b,#ff8a1f)}.bar.b i{background:linear-gradient(#8fd0ff,#46a3ff)}
.cs{display:flex;flex-wrap:wrap;gap:3px 8px}.cs span{display:inline-flex;align-items:center;gap:2px;font-weight:700;font-size:15px}.cs .ic{width:17px;height:17px}.cs .no{color:#e8453c}
/* 연구 */
.tree{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.col h3{margin:0 0 5px;font-size:14px;text-align:center;border-radius:9px;padding:2px;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.tn{position:relative;margin-bottom:7px;padding:5px 3px 4px;border-radius:12px;border:2px solid var(--ink);background:#fff;text-align:center;font-size:12.5px;font-weight:700;line-height:1.1;min-height:58px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 3px 0 rgba(7,19,29,.2)}.tn .ic{width:20px;height:20px}.tn .c{display:flex;align-items:center;gap:1px;font-size:12px}.tn .c .ic{width:13px;height:13px}
.tn.done{background:#d6f5db;border-color:#1f8a3c}.tn.lock{background:#e6e9ee;opacity:.6}.tn.cur{background:#fff3b0;border-color:#b88a00;animation:pls 1.4s infinite}.tn.can{background:#fff;border-color:#ff8a1f}.tn.no .c{color:#e8453c}
.tn .u{display:flex;gap:1px;flex-wrap:wrap;justify-content:center}.tn .u img{width:18px;height:18px;object-fit:contain}
/* 지도 */
.map{position:relative;border-radius:16px;overflow:hidden;border:2px solid var(--ink);aspect-ratio:1000/671;background:#8fd8ff}.map img.bg{width:100%;height:100%;display:block}.map .nd{position:absolute;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;border:3px solid var(--ink);background:#fff;overflow:hidden;box-shadow:0 3px 6px rgba(7,19,29,.4)}.map .nd img{width:100%;height:100%;object-fit:cover}.map .nd.sel{outline:4px solid var(--gold)}.map .nd .rl{position:absolute;left:0;right:0;bottom:0;height:16px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;background:rgba(7,19,29,.7)}.map .nd.war{border-color:#e8453c}.map .nd.ally{border-color:#3ec462}.map .nd.me{border-color:var(--gold);background:#ffe3a0}
/* 전투 HUD */
#battle{position:absolute;left:0;right:0;top:calc(176px + var(--safe-t));display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
#battle .bars{display:flex;gap:8px;align-items:center;background:var(--glass);padding:6px 12px;border-radius:16px;color:#fff;font-weight:700;pointer-events:auto}#battle .bb{width:90px;height:12px;border-radius:6px;background:rgba(255,255,255,.2);overflow:hidden}#battle .bb i{display:block;height:100%}
.skillbar{display:flex;gap:8px;pointer-events:auto}
.sk{width:58px;height:58px;border-radius:50%;border:3px solid var(--ink);background:linear-gradient(#c8a0ff,#9b6bff);display:grid;place-items:center;position:relative;overflow:hidden;box-shadow:0 4px 0 #5f3fbf}.sk .ic{width:30px;height:30px}.sk .cd{position:absolute;left:0;right:0;bottom:0;background:rgba(7,19,29,.6)}
/* 컷신 */
#cut{position:fixed;inset:0;z-index:30;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;opacity:0;transition:opacity .5s;pointer-events:auto}#cut.on{opacity:1}
#cut .im{width:100%;max-height:48vh;object-fit:contain;object-position:center;aspect-ratio:4/3;background:#07131d;animation:kb 9s ease-out forwards}
@keyframes kb{from{transform:scale(1.0)}to{transform:scale(1.12)}}
#cut .tx{flex:1;width:100%;padding:18px 22px calc(80px + var(--safe-b));display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;text-align:center;background:linear-gradient(#10243a,#07131d)}
#cut .tx .ch{font-size:20px;font-weight:700;color:#ffd23f;letter-spacing:1px}#cut .tx h1{margin:0;font-size:30px;color:#fff;font-weight:700;text-shadow:0 3px 0 rgba(0,0,0,.4)}
#cut .tx p{margin:0;font-size:25px;line-height:1.25;color:#f7e6c2;font-weight:600;opacity:0;animation:fi .7s forwards}#cut .tx p:nth-child(3){animation-delay:.9s}#cut .tx p:nth-child(4){animation-delay:1.9s}#cut .tx p:nth-child(5){animation-delay:2.9s}
@keyframes fi{to{opacity:1}}
#cut .nx{position:absolute;right:18px;bottom:calc(22px + var(--safe-b))}
/* 결정 시트 */
.evt{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 4px}.evt .pt{width:96px;height:96px;border-radius:50%;border:3px solid var(--ink);overflow:hidden;background:#fff}.evt .pt img{width:100%;height:100%;object-fit:cover}.evt .opts{display:flex;gap:10px;width:100%}.evt .opts .btn{flex:1;height:auto;min-height:54px;flex-direction:column;padding:6px}
.nogl #c{display:none}
/* 영웅 */
.hero{display:flex;gap:9px;align-items:center}.hero .pt{width:64px;height:64px;border-radius:18px;background:#fff;border:2.5px solid var(--ink);display:grid;place-items:center;flex:none;overflow:hidden}.hero .pt canvas,.hero .pt img{width:100%;height:100%}.hero .pt .ic{width:40px;height:40px}
.sl{display:flex;gap:5px}.sl .s{width:42px;height:42px;border-radius:12px;background:#fff;border:2px dashed #aab;display:grid;place-items:center}.sl .s.has{border:2.5px solid var(--ink);border-style:solid;background:#fff3b0}.sl .s .ic{width:26px;height:26px}
@media (max-height:700px){#right{top:calc(120px + var(--safe-t))}#tracker{top:calc(120px + var(--safe-t))}}
.hint{animation:hint 1s ease-in-out infinite;outline:4px solid #ffd23f;outline-offset:2px;z-index:3}
@keyframes hint{50%{outline-color:#fff;transform:scale(1.08)}}
.rb.on.hint{transform:translateY(-4px)}
body.in-battle #tracker{display:none}
#battle{top:calc(150px + var(--safe-t))}
body.is-menu #ui{display:none}

#vig{position:fixed;inset:0;pointer-events:none;z-index:4;background:radial-gradient(ellipse at 50% 46%,rgba(0,0,0,0) 58%,rgba(8,20,36,.28) 100%)}
body.in-battle #toasts{top:calc(286px + var(--safe-t))}

/* 가로 화면·짧은 화면: 컷은 좌우 배치(그림 전체가 보이게 contain), HUD 는 압축 */
@media (orientation:landscape){
 #cut{flex-direction:row}
 #cut .im{width:56%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain;animation:none}
 #cut .tx{width:44%;padding:12px 22px calc(76px + var(--safe-b))}
 #cut .tx h1{font-size:clamp(20px,4.2vh,30px)}#cut .tx p{font-size:clamp(16px,3.6vh,25px)}#cut .tx .ch{font-size:clamp(14px,3vh,20px)}
}
@media (max-height:520px){
 #stats{display:none}
 #tracker{display:none}
 #right{top:calc(52px + var(--safe-t));gap:7px}#right .rb{width:38px;height:38px}
 #battle{top:calc(52px + var(--safe-t))}
 #toasts{top:calc(100px + var(--safe-t))}
 #cards{padding:2px 8px 3px}.card{width:76px;padding:3px}.card .th{width:44px;height:44px}.card .cs{min-height:0}
 #tabs .rb{height:40px}#tabs .rb .ic{width:24px;height:24px}
 #speed .rb{width:32px;height:32px}
 .sheet{height:94%}
 #sel{padding:6px;gap:5px}#sel .hd .th{width:38px;height:38px}#sel .ac .ab{height:40px}
 #place .big{width:56px;height:56px}
 #cut .nx{bottom:10px}
 #cut .tx{padding-bottom:64px}
}
/* 온보딩 중에는 지금 필요한 칩만 진하게 */
body.ob #stats{opacity:.28;transition:opacity .3s}
body.ob #res .pill:not([data-r="gold"]):not([data-r="wood"]){opacity:.3}
body.ob #right .rb:not(#bQuest){opacity:.35}
/* 미리보기 태그(고스트·길): 아이콘+숫자 */
.gtag{position:absolute;transform:translate(-50%,-100%);display:flex;align-items:center;gap:6px;padding:3px 9px;border-radius:14px;background:rgba(255,255,255,.95);border:2px solid var(--ink);font-weight:700;font-size:15px;pointer-events:none;white-space:nowrap;box-shadow:0 3px 6px rgba(7,19,29,.3)}.gtag span{display:inline-flex;align-items:center;gap:1px}.gtag .ic{width:16px;height:16px}.gtag .no{color:#e8453c}.gtag .okc{color:#1f8a3c}
#place .big.rot{background:linear-gradient(#8fd0ff,#46a3ff);width:60px;height:60px}#place .big.rot .ic{width:32px;height:32px}

/* 저장: 저장 안 됨 아이콘, 복귀 보상 카드, 새로 시작 확인 */
#nosave{position:fixed;left:calc(8px + var(--safe-l,0px));bottom:calc(8px + var(--safe-b,0px));z-index:60;display:flex;gap:2px;padding:4px 8px;border-radius:14px;background:#ff4d4d;border:2px solid var(--ink,#222);animation:nsp 1.6s ease-in-out infinite;pointer-events:none}
#nosave[hidden]{display:none}#nosave .ic{width:22px;height:22px}@keyframes nsp{50%{transform:scale(1.08)}}
#away{position:fixed;left:50%;top:calc(96px + var(--safe-t,0px));transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 16px;border-radius:20px;background:rgba(255,255,255,.97);border:3px solid var(--ink,#222);box-shadow:0 5px 0 rgba(0,0,0,.25);transition:opacity .4s,transform .4s;max-width:92vw}
#away.out{opacity:0;transform:translateX(-50%) translateY(-10px)}
#away .aw-h{display:flex;align-items:center;gap:6px;font-size:22px}#away .aw-h .ic{width:26px;height:26px}
#away .aw-r{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px;font-size:20px}#away .aw-r span{display:flex;align-items:center;gap:3px}#away .aw-r .ic{width:24px;height:24px}
.kk-cont.arm{background:#ff4d4d!important;color:#fff}.kk-cont .kk-cont-t{font-weight:800;margin-left:4px}

/* 업그레이드 10단계: 단계 표시·미리보기·구간 색 */
#sel .lv{display:flex;align-items:center;gap:2px}#sel .lvn{margin-left:4px;font-size:16px}.lvn.t1{color:#2e9a52}.lvn.t2{color:#b86bff}.lvn.t3{color:#e89a00}
#sel .nmstar{width:18px;height:18px;margin-left:4px;vertical-align:-3px}
#sel .upv{margin:2px 0 4px}#sel .upv .chip.good{font-weight:800}
.mk.lvm{width:auto;height:22px;padding:0 6px 0 3px;border-radius:12px;gap:2px;font-size:13px;font-weight:800;animation:none;border-width:1.5px;background:rgba(255,255,255,.92)}.mk.lvm .ic{width:15px;height:15px}.mk.lvm.t2{background:#f1e4ff}.mk.lvm.t3{background:#ffe9a0}

/* 가로 줄: 터치 가로 스크롤 허용, 끝 그림자+화살표(아이콘만), 마우스 드래그 */
#res,#tabs,#cards,.tabsx,.hs{touch-action:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
#res,#tabs,#cards{cursor:grab}.hs-drag{cursor:grabbing!important;scroll-snap-type:none!important}.hs-drag *{pointer-events:none}
#res::before,#res::after,#tabs::before,#tabs::after,#cards::before,#cards::after{content:'';display:none;position:sticky;flex:none;width:26px;align-self:stretch;pointer-events:none;z-index:3;background-repeat:no-repeat;background-position:center;background-size:14px 14px}
#res::before,#tabs::before,#cards::before{left:0;margin-right:-32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 4l-8 8 8 8' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(to right,rgba(7,19,29,.55),rgba(7,19,29,0))}
#res::after,#tabs::after,#cards::after{right:0;margin-left:-32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4l8 8-8 8' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(to left,rgba(7,19,29,.55),rgba(7,19,29,0))}
.hs-l::before,.hs-r::after{display:block!important}
.sheet .sb{overscroll-behavior:contain}
.tabsx{overflow-x:auto;scrollbar-width:none}.tabsx::-webkit-scrollbar{display:none}.tabsx button{flex:1 0 auto;padding:0 10px}

.sheet .sb{touch-action:none}.sheet .sb input,.sheet .sb textarea{touch-action:auto}