:root{--ink: #191f28;--sub: #4e5968;--faint: #8b95a1;--line: #e5e8eb;--bg: #f2f6fc;--panel: #ffffff;--blue: #3182f6;--blue-d: #1a5dc8;--red: #f04452;--gold: #f2a93b;--gold-d: #b87406;--ruby: #e5397a;--seal: #e8b54a;--ok: #16a86b;--font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible{outline:3px solid rgba(49,130,246,.5);outline-offset:2px}#app{position:fixed;inset:0}#boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);font-weight:800;font-size:22px;letter-spacing:-.02em}#rotate{display:none}@media(orientation:portrait)and (max-width:700px){#rotate{display:grid;position:fixed;inset:0;z-index:99;place-items:center;background:var(--bg);text-align:center;padding:24px}#rotate b{font-size:20px}#rotate p{color:var(--sub)}}.btn{min-height:44px;padding:0 18px;border-radius:14px;font-weight:700;font-size:15px;background:#eef1f5;color:var(--ink);transition:transform .08s,background .15s}.btn:active{transform:scale(.97)}.btn.primary{background:var(--blue);color:#fff}.btn.primary:disabled{background:#b8c4d4}.btn.ghost{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}.btn.small{min-height:36px;padding:0 12px;font-size:13px;border-radius:10px}.btn.big{min-height:54px;font-size:18px;border-radius:16px}.btn.danger{color:var(--red)}.btn.primary.danger{background:var(--red);color:#fff}.btn.on{background:var(--ink);color:#fff}.row{display:flex;gap:8px;flex-wrap:wrap}.seg{min-height:48px;padding:6px 14px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2}.seg small{font-weight:500;font-size:11px;color:var(--faint)}.seg.on{background:var(--ink);color:#fff;box-shadow:none}.seg.on small{color:#c5ccd6}.screen{position:absolute;inset:0;padding:max(14px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}.lobby{background:radial-gradient(120% 90% at 80% 50%,#fff 0,var(--bg) 60%);overflow:hidden}.lobby .seal{position:absolute;inset:0;width:100%;height:100%}.lobby-main{position:relative;height:100%;max-width:min(520px,52vw);display:flex;flex-direction:column;justify-content:center;gap:14px}.title h1{margin:0;font-size:clamp(38px,9vh,60px);font-weight:900;letter-spacing:-.045em;line-height:1}.title .en{margin:6px 0 0;font-size:15px;font-weight:700;color:var(--gold-d);letter-spacing:.02em}.title .tag{margin:10px 0 0;color:var(--sub);font-size:14px;line-height:1.5;max-width:34em}.diff{display:flex;gap:8px}.diff .seg{flex:1}.sub-actions .btn{flex:1 1 auto;min-height:40px;font-size:14px;padding:0 12px}.meta{margin:0;color:var(--sub);font-size:13px}@media(max-height:380px){.title .tag{display:none}.lobby-main{gap:10px}}.modal-bg{position:fixed;inset:0;background:#191f286b;display:grid;place-items:center;z-index:50;padding:16px}.modal{background:#fff;border-radius:20px;padding:22px;width:min(380px,100%);max-height:100%;overflow:auto}.modal h2{margin:0 0 8px;font-size:20px;letter-spacing:-.02em}.modal p{margin:0 0 16px;color:var(--sub);line-height:1.5;font-size:14px}.modal .row .btn{flex:1}.modal .fine{font-size:12px;color:var(--faint)}.toggles{display:flex;gap:8px;margin:6px 0 16px;flex-wrap:wrap}.toggles label{flex:1;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:#f4f6f9;font-weight:600;font-size:14px;min-height:44px}.toggles input{width:20px;height:20px;accent-color:var(--blue)}.result{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto auto;align-content:center;column-gap:24px;row-gap:14px;background:var(--bg);overflow:auto}.result .res-head{grid-column:1;grid-row:1;align-self:end}.result .stats{grid-column:2;grid-row:1 / span 2;align-self:center;width:100%}.result>.row{grid-column:1;grid-row:2;align-self:start}.result.tut-only{grid-template-columns:1fr}.result .res-head h1{margin:0;font-size:44px;font-weight:900;letter-spacing:-.04em}.result.win .res-head h1{color:var(--blue)}.result.lose .res-head h1{color:var(--red)}.result .res-head p{margin:4px 0 0;color:var(--sub)}.result .gain b{color:var(--gold-d);font-size:18px}.result .row{max-width:520px}.result .row .btn{flex:1}.stats{border-collapse:collapse;font-size:13px;max-width:520px;background:#fff;border-radius:14px;overflow:hidden}.stats td,.stats th{padding:5px 10px;border-bottom:1px solid var(--line);text-align:center}.stats th{color:var(--sub);font-weight:600}.stats thead td{font-weight:800}.stats tbody td:first-child{color:var(--blue-d);font-weight:700}.stats tbody td:last-child{color:#b9232f;font-weight:700}.stats.wide{width:100%}.stats.wide td{color:var(--ink)!important}.codex{display:flex;flex-direction:column;gap:10px;background:var(--bg)}.codex header{display:flex;align-items:center;gap:12px}.codex header h2{margin:0;font-size:20px}.ctabs{display:flex;gap:6px;overflow-x:auto}.ctabs .seg{min-height:38px;flex:none}.codex .list{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:8px;align-content:start;padding-bottom:12px}.entry{display:flex;gap:12px;background:#fff;border-radius:14px;padding:12px}.entry .ic{flex:none;width:40px;height:40px;border-radius:50%;background:#eef1f5}.entry .ic.eco{background:var(--gold)}.entry .ic.def{background:var(--ink)}.entry h3{margin:0 0 4px;font-size:15px}.entry h3 small{color:var(--faint);font-weight:500;font-size:11px}.entry p{margin:0 0 3px;font-size:12.5px;line-height:1.45;color:var(--ink)}.entry .st{color:var(--sub)}.entry .mo{color:var(--gold-d);font-size:11.5px}.battle-host{padding:0}.battle{position:absolute;inset:0;overflow:hidden;background:#c8ddb0;--sa-l: 0px;--sa-r: 0px;--sa-t: 0px;--sa-b: 0px}.battle .view{position:absolute;inset:0;touch-action:none}.hud{position:absolute;inset:0;pointer-events:none;--gl: max(8px, var(--sa-l), env(safe-area-inset-left));--gr: max(8px, var(--sa-r), env(safe-area-inset-right));--gb: max(6px, var(--sa-b), env(safe-area-inset-bottom));--gt: max(6px, var(--sa-t), env(safe-area-inset-top))}.hud>*{pointer-events:auto}.hud .top{position:absolute;top:var(--gt);left:var(--gl);right:calc(var(--gr) + 104px);display:flex;align-items:center;gap:6px;pointer-events:none}.hud .top>*{pointer-events:auto}.icon-btn{width:40px;height:40px;border-radius:12px;background:#fffffff0;display:grid;place-items:center;font-weight:800;font-size:14px;box-shadow:0 1px #191f2814}.icon-btn.on{background:var(--ink);color:#fff}.castles{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;pointer-events:none!important}.cbar{position:relative;width:min(150px,18vw);height:22px;border-radius:11px;background:#191f288c;overflow:hidden}.cbar i{position:absolute;top:0;bottom:0;transition:width .2s}.cbar.mine i{left:0;background:var(--blue)}.cbar.enemy i{right:0;background:var(--red)}.cbar b{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:800;text-shadow:0 1px 1px rgba(0,0,0,.3)}.clock{min-width:74px;text-align:center;background:#fffffff0;border-radius:12px;padding:3px 8px;line-height:1.15}.clock b{font-size:16px;font-variant-numeric:tabular-nums;display:block}.clock small{font-size:10px;color:var(--sub);display:block;min-height:12px;white-space:nowrap}.hud .left{position:absolute;top:calc(var(--gt) + 46px);left:var(--gl);display:flex;flex-direction:column;gap:6px;pointer-events:none}.hud .left>*{pointer-events:auto}.minimap{border-radius:10px;border:2px solid #fff;box-shadow:0 1px 4px #191f282e;touch-action:none}.tut{width:220px;background:#fffffff5;border-radius:14px;padding:10px 12px;box-shadow:0 2px 10px #191f281f;border-left:4px solid var(--seal)}.tut small{color:var(--gold-d);font-weight:700;font-size:11px}.tut b{display:block;font-size:14px;margin:2px 0 4px}.tut p{margin:0 0 6px;font-size:12px;line-height:1.45;color:var(--sub)}.tut.flash{animation:flash .6s ease}@keyframes flash{0%{transform:scale(.96);background:#fff7e4}to{transform:none}}.alerts{position:absolute;top:calc(var(--gt) + 46px);left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:4px;align-items:center;pointer-events:none}.toast{pointer-events:auto;background:#191f28db;color:#fff;padding:7px 14px;border-radius:18px;font-size:13px;font-weight:600;transition:opacity .3s;white-space:nowrap}.toast small{color:#9ecbff;margin-left:6px;font-weight:700}.toast.warn{background:#f04452f0}.toast.warn small{color:#fff3c4}.toast.cmd{background:#fffffff5;color:var(--red);box-shadow:0 1px 6px #191f2826}.toast.out{opacity:0}.panel{position:absolute;top:calc(var(--gt) + 46px);right:var(--gr);width:214px;max-height:calc(100% - 46px - 66px - var(--gt));overflow-y:auto;background:#fffffff7;border-radius:16px;padding:12px;display:none;box-shadow:0 2px 12px #191f2824}.panel.show{display:block}.panel .x{position:absolute;top:4px;right:4px;width:36px;height:36px;font-size:22px;color:var(--faint)}.panel h3{margin:0 28px 4px 0;font-size:16px;letter-spacing:-.02em}.panel .fn{margin:0 0 8px;font-size:12px;color:var(--sub);line-height:1.45}.panel .sub{margin:6px 0 0;font-size:12px;color:var(--sub);line-height:1.45}.panel .sub b{color:var(--ink)}.badge{font-style:normal;font-size:11px;background:var(--seal);color:#fff;padding:1px 6px;border-radius:6px;vertical-align:2px}.hp{position:relative;height:16px;border-radius:8px;background:#eef1f5;overflow:hidden}.hp i{position:absolute;left:0;top:0;bottom:0;background:var(--ok)}.hp span{position:relative;display:block;text-align:center;font-size:11px;font-weight:700;line-height:16px}.prog{height:5px;border-radius:3px;background:#eef1f5;overflow:hidden;margin-top:4px}.prog i{display:block;height:100%;background:var(--seal)}.prog.big{height:8px;margin-top:8px}.pbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.pbtns .btn{flex:1 1 auto}.hud .bottom{position:absolute;left:var(--gl);right:var(--gr);bottom:var(--gb);display:flex;align-items:center;gap:8px;pointer-events:none}.hud .bottom>*{pointer-events:auto}.res{display:flex;gap:6px}.res>div{background:#fffffff5;border-radius:12px;padding:4px 10px 4px 26px;min-width:76px;position:relative;line-height:1.1}.res>div:before{content:"";position:absolute;left:8px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%}.res .gold:before{background:var(--gold);box-shadow:inset 0 -2px 0 var(--gold-d)}.res .ruby:before{background:var(--ruby);transform:rotate(45deg);border-radius:2px;width:10px;height:10px;margin-top:-5px;left:9px}.res b{font-size:16px;font-variant-numeric:tabular-nums;display:block}.res small{font-size:10px;color:var(--sub);white-space:nowrap}.sums{display:flex;gap:5px}.chip{position:relative;width:44px;height:44px;border-radius:12px;background:#fffffff5;overflow:hidden;display:grid;place-items:center;box-shadow:inset 0 0 0 2px transparent}.chip b{font-size:16px;color:var(--blue-d)}.chip i{position:absolute;left:4px;right:auto;bottom:4px;height:3px;border-radius:2px;background:var(--ok);max-width:calc(100% - 8px)}.chip.on{box-shadow:inset 0 0 0 2.5px var(--ink)}.chip.busy:after{content:"";position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--seal)}.chip.wait{background:#fff9;color:var(--sub);font-size:12px}.tabs{margin-left:auto;display:flex;gap:4px;background:#fffffff5;border-radius:14px;padding:3px}.tab{position:relative;min-width:48px;height:40px;border-radius:11px;font-weight:700;font-size:13px;padding:0 8px;white-space:nowrap}.tab.on{background:var(--ink);color:#fff}.tab.dot:after{content:"";position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--red)}.drawer{position:absolute;left:var(--gl);right:var(--gr);bottom:calc(var(--gb) + 52px);display:none;flex-direction:column;gap:6px;align-items:flex-end}.drawer.show{display:flex}.cards{display:flex;gap:6px;overflow-x:auto;width:100%;padding:2px;scrollbar-width:none;scroll-snap-type:x proximity}.cards::-webkit-scrollbar{display:none}.card{flex:none;width:172px;min-height:92px;display:flex;gap:8px;align-items:flex-start;text-align:left;background:#fffffff7;border-radius:14px;padding:9px 10px;box-shadow:0 2px 8px #191f281f;position:relative;scroll-snap-align:start}.card canvas{flex:none;margin-top:1px}.card.wide{width:250px}.card.hero{width:200px}.card .cbody{min-width:0;flex:1}.card b{display:block;font-size:13.5px;letter-spacing:-.02em;margin-bottom:2px;padding-right:26px}.card small{display:block;font-size:11px;color:var(--sub);line-height:1.35}.card small b{display:inline;padding:0;color:var(--ink)}.card .cost{margin-top:5px;display:flex;gap:8px;font-size:12.5px;font-weight:800}.card em{display:block;font-style:normal;font-size:11px;color:var(--red);font-weight:700;margin-top:3px}.card .tier{position:absolute;top:8px;right:8px;font-style:normal;font-size:10px;font-weight:700;color:var(--faint)}.card.disabled{background:#f6f7f9f7}.card.disabled b,.card.disabled small,.card.disabled .cost{opacity:.55}.card.disabled canvas{opacity:.5}.card.eco{border-top:3px solid var(--gold)}.card.def{border-top:3px solid var(--ink)}.c-gold,.c-ruby{display:inline-flex;align-items:center;gap:4px}.c-gold:before,.c-ruby:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold)}.c-ruby:before{background:var(--ruby);border-radius:1px;transform:rotate(45deg);width:7px;height:7px}.drawer .hint{margin:0;font-size:11.5px;color:var(--ink);background:#ffffffe6;padding:5px 10px;border-radius:10px;align-self:flex-start}.confirm{position:absolute;left:50%;transform:translate(-50%);bottom:calc(var(--gb) + 54px);display:none;align-items:center;gap:8px;background:#fffffffa;border-radius:16px;padding:8px 8px 8px 14px;box-shadow:0 2px 12px #191f282e;max-width:calc(100% - 24px)}.confirm.show{display:flex}.confirm .info{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:2px;font-size:13px}.confirm .info>b{font-size:14px}.confirm .route{font-size:11.5px;color:var(--sub);flex-basis:100%}.confirm .warn{color:var(--red)}.confirm .why{color:var(--red);font-weight:700;font-size:12px}.confirm .btn{min-height:42px;flex:none;white-space:nowrap}.confirm .info{min-width:0}@media(max-height:400px){.card{min-height:84px;padding:7px 9px;width:160px}.card.wide{width:236px}.panel{width:196px;padding:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.clock small:empty{display:none}.pbtns .btn{flex:1 1 40%;white-space:nowrap}:root{--ink:#34433b;--sub:#697365;--bg:#f3efdf;--panel:#fffbed;--blue:#548278;--blue-d:#355b54;--line:#dedac8;--gold:#dfb668}.world-3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.battle .view{z-index:1}.hud{z-index:2}.btn,.seg,.icon-btn,.panel,.tabs,.card,.confirm,.chip,.clock,.res>div,.modal{border-radius:5px}.btn{border:1px solid #d3ceb6;box-shadow:0 3px #d5cdb2}.btn.primary{background:#547d63;border-color:#315740;box-shadow:inset 0 1px #abc998,0 3px #304f3d;color:#fffbe5}.btn:active{transform:translateY(2px);box-shadow:none}.panel,.card,.tabs,.res>div,.clock,.icon-btn,.tut,.confirm{background:#fffbecf5;border:1px solid #c8bea0;box-shadow:0 3px #594e3f38}.seg.on,.tab.on{background:#4f6f58}.minimap{border:3px solid #fff1c9;border-radius:3px;box-shadow:0 0 0 1px #89795b,0 4px 12px #293e4240}.lobby{padding:0;background:#243e38;color:#fcf4d9}.lobby-world{position:absolute;inset:-8% -14% -8% 4%}.lobby-shade{position:absolute;inset:0;background:linear-gradient(90deg,#203b36fa,#233e36ed 24%,#203c3699 42%,#243e3610 68%),linear-gradient(0deg,#19372cdb,transparent 32%,transparent 78%,#243d3540);pointer-events:none}.lobby-top{position:absolute;left:4%;right:4%;top:24px;display:flex;align-items:center;gap:10px;letter-spacing:2px;font-size:11px}.brand-mark{color:#e4c580;font-size:27px}.edition{color:#c6d1b4;font-size:9px;margin-left:20px}.version{margin-left:auto;font-size:9px;color:#edf4d8;letter-spacing:1.5px}.lobby-main{position:absolute;left:6%;top:15%;bottom:16%;width:340px;max-width:40%;height:auto;justify-content:center;gap:18px}.eyebrow{font-size:11px;letter-spacing:2px;color:#cfddb7;margin:0;display:flex;align-items:center;gap:8px}.eyebrow span{display:block;width:18px;height:1px;background:#cfbc7a}.title .en{font:900 clamp(38px,5.8vw,78px)/.88 Georgia,serif;letter-spacing:-3px;color:#fff2c5;text-shadow:0 3px 0 #566447;margin:0;position:relative}.title .en span{color:#d6b66c;font-size:32px;margin-left:12px}.title h1{font-size:16px;letter-spacing:7px;font-weight:600;margin:15px 0 0;color:#e0c995}.title .tag{color:#c4d2bb;font-size:13px;line-height:1.8;margin:16px 0 0}.play-panel{padding:16px;background:#1e352ca6;border:1px solid #a4b58b40;border-radius:8px;box-shadow:0 8px 30px #142e291f}.mode-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:12px}.mode-heading span{font-size:9px;letter-spacing:2px;color:#b7c1a7}.lobby .diff{gap:5px;margin-bottom:10px}.lobby .seg{background:#48615055;border:1px solid #8b9b7350;box-shadow:none;min-height:42px;font-size:12px;color:#c9d5bd}.lobby .seg small{color:#99ad94;font-size:9px;margin-top:3px}.lobby .seg.on{background:#6c82614d;border-color:#d7c084;color:#fff1c9}.lobby .seg.on small{color:#e1d2a8}.lobby .btn.big{width:100%;display:flex;align-items:center;justify-content:space-between;border-radius:4px;background:#e3be75;border:1px solid #fce2a1;box-shadow:inset 0 -4px #bb924f,0 3px #152f27;color:#3e4635;font-size:15px;min-height:49px;letter-spacing:1px}.pvp-btn{background:transparent;color:#e3dfbb;width:100%;border:0;box-shadow:none;display:flex;justify-content:space-between;align-items:center;padding:13px 0 0;min-height:30px;font-size:12px}.pvp-btn span{font-size:10px;color:#a8b899}.lobby .meta{color:#cfc6a1;font-size:11px;display:flex;gap:7px}.lobby .meta span{margin-left:auto;color:#adbea6}.map-caption{position:absolute;right:6%;bottom:22%;text-align:right;text-shadow:0 2px 6px #27442e80}.map-caption>span{font-size:9px;letter-spacing:3px;color:#e2e6c9}.map-caption h2{font:600 25px Georgia,serif;letter-spacing:2px;margin:8px 0;color:#fff5d6}.map-caption p{font-size:12px;color:#e5eace;margin:0 0 18px}.map-caption div{font-size:10px;display:inline-flex;gap:6px;align-items:center;padding:7px 10px;background:#2d503a66;border:1px solid #d6e2b743;border-radius:3px}.map-caption i{width:5px;height:5px;background:#c4d993;border-radius:50%}.lobby-nav{position:absolute;bottom:0;left:0;right:0;height:12%;min-height:55px;display:flex;justify-content:center;background:#1b302ac2;border-top:1px solid #a7b19044;backdrop-filter:blur(8px)}.lobby-nav button{font-size:12px;width:150px;color:#dce5c9;display:flex;justify-content:center;align-items:center;gap:12px;border-left:1px solid #83957625}.lobby-nav button:last-child{border-right:1px solid #83957625}.lobby-nav button:hover{background:#57715455}.lobby-nav button span{color:#ddc689;font-size:20px}.modal{background:#fffbed}.modal input[type=text],.modal input[type=url]{width:100%;padding:11px;margin:5px 0 12px;border:1px solid #c7ccb7;border-radius:4px;font:inherit;color:#334a3c;background:#fffef8;user-select:text}.modal label{font-size:12px;color:#5d6c5c}.network-status{min-height:28px;font-size:12px}@media(max-height:600px){.lobby-top{top:14px}.lobby-main{top:16%;bottom:17%;gap:10px;width:310px}.eyebrow{font-size:9px}.title .en{font-size:48px}.title h1{font-size:13px;margin-top:9px}.title .tag{font-size:11px;line-height:1.5;margin-top:8px}.play-panel{padding:10px}.mode-heading{margin-bottom:8px}.lobby .seg{min-height:35px}.lobby .btn.big{min-height:41px;font-size:14px}.map-caption{bottom:22%}.lobby .meta{font-size:10px}}@media(max-height:440px){.lobby-main{left:4%;gap:7px;width:290px;top:15%;bottom:15%}.title .en{font-size:36px;line-height:.86}.title .en br{display:none}.title .en span{font-size:20px;margin-left:5px}.title h1{font-size:12px;margin-top:6px}.title .tag,.eyebrow{display:none}.play-panel{padding:9px}.lobby-top{top:9px}.brand-mark{font-size:19px}.pvp-btn{padding-top:8px}.lobby-nav{height:13%;min-height:42px}.map-caption h2{font-size:20px}.edition{display:none}.map-caption{right:4%}}