:root{--ink:#1a1a2e;--panel:#f6e7c8;--panel-dark:#e3cc9f;--accent:#ff9f1c;--ok:#4dff88;--bad:#ff4d4d;--crystal:#5ee7ff;--ether:#c58cff;font-family:Jua,system-ui,sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);-webkit-user-select:none;user-select:none;background:#2a2438;margin:0;overflow:hidden}#game{position:fixed;inset:0}#game canvas{display:block}#hud{pointer-events:none;position:fixed;inset:0}#hud>*{pointer-events:auto}#resources{gap:8px;display:flex;position:absolute;top:10px;right:12px}.res{background:var(--panel);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);border-radius:12px;padding:4px 12px;font-size:18px}.res.crystal{color:#1b8fb0}.res.ether{color:#8a45d6}.res.supply.full{background:#ffb3b3}.res.time{color:#555}#toast{opacity:0;background:var(--bad);color:#fff;border:3px solid var(--ink);pointer-events:none;box-shadow:0 3px 0 var(--ink);border-radius:12px;padding:6px 16px;font-size:18px;transition:opacity .15s,transform .15s;position:absolute;top:64px;left:50%;transform:translate(-50%)scale(.9)}#toast.show{opacity:1;transform:translate(-50%)scale(1)}#toast.calm{background:#3b8bff}#bottom{background:var(--panel);border-top:4px solid var(--ink);grid-template-columns:188px 1fr 300px;gap:10px;height:188px;padding:10px;display:grid;position:absolute;bottom:0;left:0;right:0}#minimap{border:3px solid var(--ink);width:168px;height:168px;image-rendering:pixelated;cursor:pointer;background:#6fa85e;border-radius:6px}#selection{background:var(--panel-dark);border:3px solid var(--ink);border-radius:12px;padding:8px 14px;overflow:hidden}#selection h3{margin:0 0 4px;font-size:22px;font-weight:400}#selection p{margin:2px 0;font-size:16px}#selection .dim{color:#6b5a48}.queue,.counts{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.queue span,.counts span{background:var(--panel);border:2px solid var(--ink);border-radius:8px;padding:2px 8px;font-size:14px}.queue span.cur{background:#7fd1ff}#card{grid-template-rows:repeat(3,minmax(0,1fr));grid-template-columns:repeat(4,1fr);gap:6px;min-height:0;display:grid}.cmd{border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);cursor:pointer;color:var(--ink);background:#fff4dc;border-radius:10px;min-height:0;padding:12px 2px 2px;font-family:inherit;font-size:13px;line-height:1.05;position:relative;overflow:hidden}.cmd:hover:not(.empty):not(.disabled){background:#ffe6a8}.cmd:active:not(.empty){box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}.cmd.active{background:var(--accent)}.cmd.disabled{opacity:.45}.cmd.empty{box-shadow:none;cursor:default;background:0 0;border-style:dashed;border-color:#c9b58c}.cmd .hk{color:#b0661a;font-size:12px;position:absolute;top:2px;left:5px}.cmd .cost{color:#1b8fb0;font-size:11px;display:block}#overlay{background:#1a1a2e8c;place-items:center;display:grid;position:fixed;inset:0}#overlay[hidden]{display:none}.panel{background:var(--panel);border:4px solid var(--ink);text-align:center;box-shadow:0 6px 0 var(--ink);border-radius:20px;max-width:min(92vw,560px);padding:28px 40px}.panel h1{-webkit-text-stroke:2px var(--ink);margin:0 0 8px;font-size:56px;font-weight:400}.panel h1.title{color:var(--accent)}.panel h1.win{color:var(--ok)}.panel h1.lose{color:var(--bad)}.panel button{background:var(--accent);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);cursor:pointer;border-radius:14px;margin-top:12px;padding:10px 32px;font-family:inherit;font-size:24px}.panel button:active{box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}.help{text-align:left;margin-top:16px;font-size:15px}.help summary{cursor:pointer;text-align:center}.help ul{padding-left:20px}.res.biomass{color:#3f9a1f}#menu-btn{background:var(--panel);border:3px solid var(--ink);width:40px;height:40px;box-shadow:0 3px 0 var(--ink);cursor:pointer;touch-action:manipulation;border-radius:12px;font-size:22px;line-height:1;position:absolute;top:8px;left:10px}#menu-btn:active{box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}#settings{z-index:20;background:#1a1a2e8c;place-items:center;display:grid;position:fixed;inset:0}#settings[hidden]{display:none}.settings-panel h2{color:var(--accent);-webkit-text-stroke:1.5px var(--ink);margin:0 0 6px;font-size:34px;font-weight:400}.settings-panel .pick-label{width:110px}.settings-actions{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.settings-panel .settings-actions button{padding:8px 18px;font-size:19px}.settings-panel .settings-actions .restart,.settings-panel .settings-actions .leave{background:var(--panel-dark)}.settings-panel .settings-actions .surrender{background:var(--bad);color:#fff}.start-row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.panel button#tutorial-start{background:#7fd1ff}#tutor{background:var(--panel);border:3px solid var(--ink);width:min(360px,46vw);box-shadow:0 4px 0 var(--ink);pointer-events:auto;z-index:5;border-radius:16px;padding:10px 14px 12px;font-size:15px;line-height:1.45;position:absolute;top:52px;right:12px}#tutor[hidden]{display:none}#tutor.pop{animation:.35s ease-out tut-pop}@keyframes tut-pop{0%{opacity:0;transform:scale(.85)}70%{opacity:1;transform:scale(1.04)}to{transform:scale(1)}}#tutor p{margin:6px 0 8px}#tutor b{color:#c2410c}.tut-head{align-items:center;gap:8px;font-size:19px;display:flex}.tut-head b{color:var(--ink);font-weight:400}.tut-step{background:var(--ink);color:var(--panel);border-radius:8px;padding:1px 8px;font-size:13px}.tut-actions{align-items:center;gap:8px;display:flex}.tut-goal{color:#7a6440;flex:1;font-size:13px}.tut-actions button{border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);cursor:pointer;background:var(--panel-dark);border-radius:10px;padding:4px 14px;font-family:inherit;font-size:15px}.tut-actions .tut-next{background:var(--accent);margin-right:auto}.tut-actions button:active{box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}.cmd.hint,#quick button.hint{outline-offset:1px;outline:3px solid #fff27a;animation:.9s ease-in-out infinite tut-hint}@keyframes tut-hint{0%,to{box-shadow:0 0 #fff27ae6}50%{box-shadow:0 0 0 7px #fff27a00}}#relics{pointer-events:none;align-items:center;gap:8px;display:flex;position:absolute;top:10px;left:50%;transform:translate(-50%)}.relic-gem{border:3px solid var(--ink);width:18px;height:18px;box-shadow:0 2px 0 var(--ink);border-radius:3px;transform:rotate(45deg)}.gauge{background:var(--panel);border:3px solid var(--ink);border-radius:8px;width:110px;height:14px;overflow:hidden}.gauge i{height:100%;display:block}.relic-note{background:var(--panel);border:3px solid var(--ink);border-radius:10px;padding:2px 10px;font-size:15px}.relic-note.hot{background:var(--bad);color:#fff}.pick{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin:10px 0;display:flex}.pick-label{text-align:right;width:64px;font-size:17px}.choices{flex-wrap:wrap;gap:6px;display:flex}.panel .choices button{box-shadow:0 3px 0 var(--ink);background:#fff4dc;margin:0;padding:5px 12px;font-size:16px}.panel .choices button.on{background:var(--accent)}.race-blurb{color:#6b5a48;min-height:2.6em;margin:4px 0 8px;font-size:15px}#quick{flex-direction:column;gap:6px;display:flex;position:absolute;bottom:200px;left:10px}#quick button{background:var(--panel);border:3px solid var(--ink);min-width:52px;min-height:40px;box-shadow:0 3px 0 var(--ink);color:var(--ink);cursor:pointer;touch-action:manipulation;border-radius:12px;padding:4px 8px;font-family:inherit;font-size:15px;position:relative}#quick .qk{background:var(--ink);min-width:17px;height:17px;color:var(--panel);border:1px solid var(--panel);border-radius:6px;font-size:11px;line-height:15px;position:absolute;top:-7px;left:-7px}@media (hover:none){#quick .qk{display:none}}#quick button:active{box-shadow:0 1px 0 var(--ink);transform:translateY(2px)}.touch-only{display:none}@media (hover:none),(max-height:540px){.touch-only{display:block}}#quick button.on{background:var(--accent)}#quick button.cancel{background:var(--bad);color:#fff}#quick button[hidden],#rotate{display:none}#game canvas,#minimap,#card,#quick{touch-action:none}html,body{overscroll-behavior:none}@media (max-height:540px){#bottom{border-top-width:3px;grid-template-columns:112px minmax(0,1fr) minmax(250px,46%);gap:6px;height:142px;padding:6px}#minimap{width:110px;height:110px}#selection{padding:4px 8px}#selection h3{font-size:16px}#selection p{font-size:12px}.queue span,.counts span{padding:1px 5px;font-size:11px}#card{gap:4px}.cmd{border-width:2px;border-radius:8px;padding:10px 1px 1px;font-size:12px}.cmd .hk,.cmd .cost{font-size:9px}#resources{gap:4px;top:6px;right:6px}.res{border-width:2px;border-radius:8px;padding:2px 7px;font-size:13px}#relics{top:6px;left:52px;transform:none}.gauge{width:64px}.relic-note{font-size:11px}#quick{grid-template-columns:repeat(2,auto);gap:5px;display:grid;bottom:150px;left:6px}#quick button{min-width:50px;min-height:38px;font-size:13px}#card{flex-wrap:wrap;align-content:flex-start;gap:3px;display:flex;overflow-y:auto}.cmd.empty{display:none}.cmd{flex:0 0 calc(33.33% - 2px);min-height:37px;padding:10px 2px 2px;font-size:12.5px}#toast{font-size:14px;top:38px}#tutor{width:min(300px,42vw);max-height:calc(100vh - 180px);padding:6px 10px 8px;font-size:12.5px;line-height:1.35;top:36px;right:8px;overflow:auto}.tut-head{font-size:15px}#menu-btn{width:34px;height:34px;font-size:18px;top:6px}.settings-panel h2{font-size:24px}.settings-panel .pick{margin:5px 0}.settings-panel .settings-actions button{margin-top:6px;padding:5px 12px;font-size:15px}.panel{max-height:94vh;padding:14px 20px;overflow:auto}.panel h1{font-size:36px}}@media (orientation:portrait) and (max-width:700px){#rotate{background:var(--accent);border:3px solid var(--ink);white-space:nowrap;pointer-events:none;border-radius:12px;padding:4px 12px;font-size:14px;display:block;position:absolute;top:78px;left:50%;transform:translate(-50%)}#bottom{grid-template-rows:104px 1fr;grid-template-columns:110px minmax(0,1fr);height:252px}#minimap{width:104px;height:104px}#card{flex-wrap:wrap;grid-column:1/span 2;align-content:flex-start;gap:4px;display:flex;overflow-y:auto}.cmd.empty{display:none}.cmd{flex:0 0 calc(33.33% - 3px);min-height:40px;font-size:13px}#quick{grid-template-columns:repeat(2,auto);gap:5px;display:grid;bottom:260px}#relics{top:44px;left:52px;transform:none}.res{padding:2px 6px;font-size:12px}}#net{z-index:25;background:#1a1a2e8c;place-items:center;display:grid;position:fixed;inset:0}#net[hidden]{display:none}.net-panel h2{color:var(--accent);-webkit-text-stroke:1.5px var(--ink);margin:0 0 8px;font-size:32px;font-weight:400}.net-panel input{border:3px solid var(--ink);width:160px;color:var(--ink);-webkit-user-select:text;user-select:text;background:#fff4dc;border-radius:10px;padding:6px 10px;font-family:inherit;font-size:18px}.net-code{letter-spacing:10px;color:var(--ink);-webkit-text-stroke:2px var(--ink);margin:6px 0 2px;font-size:52px}.net-note{color:#6b5a48;margin:6px 0;font-size:14px}.net-error{color:var(--bad);margin:6px 0;font-size:15px}.net-status{margin:10px 0 4px;font-size:17px}.spin{animation:1s linear infinite net-spin;display:inline-block}@keyframes net-spin{0%{opacity:.2}50%{opacity:1}to{opacity:.2}}.panel button#online-start{background:#a0e86b}#netstat{background:var(--ink);color:var(--panel);pointer-events:none;border-radius:10px;padding:4px 14px;font-size:15px;position:absolute;top:96px;left:50%;transform:translate(-50%)}#netstat[hidden]{display:none}#overlay{isolation:isolate;background:radial-gradient(circle at 50% 8%,#6cdbff38,#0000 32%),radial-gradient(circle at 15% 80%,#ff9f1c29,#0000 28%),linear-gradient(145deg,#111324 0%,#24203b 48%,#111827 100%);padding:28px;overflow:hidden auto}#overlay:before,#overlay:after{content:"";pointer-events:none;position:fixed;inset:0}#overlay:before{z-index:-2;opacity:.28;transform-origin:bottom;background-image:linear-gradient(#7ed3ff29 1px,#0000 1px),linear-gradient(90deg,#7ed3ff29 1px,#0000 1px);background-size:64px 64px;transform:perspective(520px)rotateX(58deg)scale(1.5)translateY(34%);-webkit-mask-image:linear-gradient(#0000 10%,#000 72%);mask-image:linear-gradient(#0000 10%,#000 72%)}#overlay:after{z-index:4;opacity:.2;mix-blend-mode:overlay;background:repeating-linear-gradient(0deg,#0000 0 3px,#ffffff09 3px 4px)}.menu-atmosphere{z-index:-1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.menu-atmosphere:before{content:"";opacity:.42;background:#8be7ff;width:3px;height:140%;position:absolute;top:-20%;left:50%;transform:rotate(18deg);box-shadow:0 0 18px 5px #5ee7ff,0 0 90px 20px #6fdcff66}.menu-atmosphere i{border:2px solid #9ae5ffb8;width:9px;height:9px;animation:7s ease-in-out infinite menu-float;position:absolute;transform:rotate(45deg)}@keyframes menu-float{0%,to{opacity:.28;transform:rotate(45deg)translateY(0)scale(.8)}50%{opacity:.9;transform:rotate(45deg)translateY(-24px)scale(1.25)}}.start-panel{text-align:left;color:#f8edd5;background:linear-gradient(110deg, #212640fa, #14172afa), var(--ink);border:2px solid #9ae5ffad;border-radius:8px;width:min(1040px,100vw - 56px);max-width:1040px;margin:auto;padding:0;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff14,0 0 0 8px #080a16a3,0 24px 80px #00000094,0 0 60px #3fbfff1f}.start-panel:before,.start-panel:after{content:"";pointer-events:none;width:52px;height:52px;position:absolute}.start-panel:before{border-top:3px solid var(--accent);border-left:3px solid var(--accent);top:9px;left:9px}.start-panel:after{border-bottom:3px solid #65d9ff;border-right:3px solid #65d9ff;bottom:9px;right:9px}.start-hero{text-align:center;background:linear-gradient(90deg,#0000,#53beff14,#0000),#05071247;border-bottom:1px solid #87d5ff38;padding:24px 34px 20px;position:relative}.start-kicker{color:#78dfff;letter-spacing:.32em;justify-content:center;align-items:center;gap:10px;font-family:system-ui,sans-serif;font-size:10px;font-weight:800;display:flex}.start-kicker span{background:currentColor;width:34px;height:1px}.start-panel h1.title{letter-spacing:.02em;color:#ffac32;-webkit-text-stroke:0;text-shadow:0 4px #7e351e,0 8px 20px #ff6f1c61;justify-content:center;align-items:baseline;gap:14px;margin:4px 0 0;font-size:clamp(54px,6.2vw,82px);line-height:.95;display:flex}.start-tagline{color:#d8d0bf;letter-spacing:.08em;margin:8px 0 12px;font-size:16px}.start-meta{justify-content:center;gap:6px;display:flex}.start-meta span{color:#9bb4c7;letter-spacing:.14em;background:#77c9ff14;border:1px solid #77c9ff2e;border-radius:3px;padding:3px 9px;font-family:system-ui,sans-serif;font-size:9px;font-weight:800}.start-body{grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:14px;padding:18px 22px 14px;display:grid}.start-section{background:#0609175c;border:1px solid #81cdf529;border-radius:6px;min-width:0;padding:16px;box-shadow:inset 0 1px #ffffff09}.section-heading{align-items:center;gap:10px;margin-bottom:12px;display:flex}.section-no{color:#111629;background:#76dcff;border-radius:4px;place-items:center;width:34px;height:34px;font-family:system-ui,sans-serif;font-size:12px;font-weight:900;display:grid;transform:skew(-8deg)}.section-heading h2{color:#fff4de;margin:0;font-size:21px;font-weight:400}.section-heading p{color:#8295aa;margin:0;font-family:system-ui,sans-serif;font-size:10px}.start-panel .pick{justify-content:flex-start;margin:8px 0}.faction-pick{display:block}.faction-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;display:grid}.start-panel .faction-choices button{color:#d8e3ec;min-width:0;min-height:106px;box-shadow:none;text-align:left;background:linear-gradient(145deg,#262d45f2,#13182af2);border:1px solid #3c4964;border-radius:5px;flex-direction:column;align-items:flex-start;margin:0;padding:12px 10px 10px;font-size:17px;transition:transform .16s,border-color .16s,background .16s,box-shadow .16s;display:flex;position:relative;overflow:hidden}.start-panel .faction-choices button:after{content:"";opacity:.12;border:1px solid;width:74px;height:74px;position:absolute;bottom:-28px;right:-26px;transform:rotate(45deg)}.start-panel .faction-choices button:hover{border-color:#7e97b4;transform:translateY(-2px)}.start-panel .faction-choices button.on{color:#fff;border-color:var(--faction-color,var(--accent));box-shadow:0 0 0 1px var(--faction-color,var(--accent)) inset, 0 0 24px #ff9f1c21;background:linear-gradient(145deg,#3d363dfa,#171c2ffa);transform:translateY(-2px)}.start-panel .faction-choices button[data-value=boltworks]{--faction-color:#ffad32}.start-panel .faction-choices button[data-value=squish]{--faction-color:#83e06f}.start-panel .faction-choices button[data-value=lumen]{--faction-color:#70dfff}.choice-icon{width:32px;height:32px;color:var(--faction-color,#fff);background:#ffffff0f;border:1px solid;border-radius:50%;place-items:center;margin-bottom:9px;font-family:system-ui,sans-serif;font-size:17px;line-height:1;display:grid}.faction-choices small{color:#7f91a5;letter-spacing:.05em;margin-top:3px;font-family:system-ui,sans-serif;font-size:9px;font-weight:700}.start-panel .race-blurb{color:#b6c6d4;background:#70d5ff0e;border-left:2px solid #70d7ff;min-height:50px;margin:10px 0 0;padding:10px 12px 10px 66px;font-family:system-ui,sans-serif;font-size:11px;line-height:1.45;position:relative}.start-panel .race-blurb:before{content:"전술 요약";color:#70d7ff;font-size:9px;font-weight:900;position:absolute;top:11px;left:10px}.setup-pick{display:block}.start-panel .setup-pick .pick-label{color:#9aadc0;letter-spacing:.08em;text-align:left;width:auto;margin:0 0 6px;font-family:system-ui,sans-serif;font-size:10px;font-weight:800;display:block}.compact-choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%;display:grid}.start-panel .compact-choices button{color:#aebdca;min-width:0;box-shadow:none;background:#171d31;border:1px solid #3b4760;border-radius:3px;margin:0;padding:7px 4px;font-size:12px}.start-panel .compact-choices button:hover{color:#fff;border-color:#6c86a7}.start-panel .compact-choices button.on{color:#151a2a;background:#7edcff;border-color:#b6efff;box-shadow:0 0 16px #56ceff33}.difficulty-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.mission-card{background:linear-gradient(90deg,#ff9f1c1a,#0000);border:1px solid #ffaa3e33;border-radius:4px;align-items:center;gap:10px;margin-top:13px;padding:9px 10px;display:flex}.mission-icon{color:#ffac32;border:1px solid #a96724;border-radius:50%;flex:none;place-items:center;width:30px;height:30px;font-family:system-ui,sans-serif;font-size:20px;display:grid}.mission-card b,.mission-card small{display:block}.mission-card b{color:#f6dcc0;font-size:13px;font-weight:400}.mission-card small{color:#798da3;margin-top:2px;font-family:system-ui,sans-serif;font-size:9px;line-height:1.35}.start-actions{grid-template-columns:minmax(260px,1fr) auto;align-items:stretch;gap:10px;padding:0 22px 18px;display:grid}.start-panel button#start{color:#22170a;text-align:left;background:linear-gradient(#ffc451,#ff9418);border:1px solid #ffe29a;border-radius:5px;justify-content:center;align-items:center;gap:12px;min-height:62px;margin:0;padding:9px 28px;transition:filter .15s,transform .15s;display:flex;box-shadow:0 4px #8f4217,0 0 26px #ff931838}.start-panel button#start:hover{filter:brightness(1.08);transform:translateY(-1px)}.start-panel button#start:active{transform:translateY(3px);box-shadow:0 1px #8f4217}.action-icon{font-family:system-ui,sans-serif;font-size:23px}.primary-action b,.primary-action small{display:block}.primary-action b{letter-spacing:.04em;font-size:22px;font-weight:400}.primary-action small{color:#814112;margin-top:1px;font-family:system-ui,sans-serif;font-size:9px;font-weight:700}.secondary-actions{grid-template-columns:repeat(2,minmax(132px,1fr));gap:8px;display:grid}.start-panel .secondary-actions button,.start-panel .secondary-actions button#tutorial-start,.start-panel .secondary-actions button#online-start{color:#c7d7e4;background:#202940;border:1px solid #455975;border-radius:5px;min-width:132px;margin:0;padding:8px 14px;font-size:15px;box-shadow:0 3px #0e1322}.start-panel .secondary-actions button:hover{color:#fff;background:#2a3854;border-color:#70d7ff}.start-panel .secondary-actions button#online-start{color:#caffd4;background:#1e3b34;border-color:#3e7863}.start-panel .secondary-actions button span{color:#74ddff;font-family:system-ui,sans-serif}.start-panel .secondary-actions button#online-start span{color:#75e49d}.start-help{color:#93a6b8;background:#03050e4d;border-top:1px solid #80c9f024;margin:0;font-family:system-ui,sans-serif;font-size:11px}.start-help summary{color:#829bb2;letter-spacing:.08em;padding:9px 20px;font-size:10px;font-weight:800}.start-help ul{max-width:880px;margin:0 auto;padding:2px 34px 18px 50px;line-height:1.55}@media (max-width:820px){#overlay{padding:18px}.start-panel{width:min(680px,100vw - 36px)}.start-body,.start-actions{grid-template-columns:1fr}.secondary-actions{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){#overlay{place-items:start center;padding:10px}.start-panel{width:calc(100vw - 20px);margin:8px auto}.start-hero{padding:19px 16px 16px}.start-kicker{letter-spacing:.2em;font-size:8px}.start-panel h1.title{gap:8px;font-size:clamp(42px,13vw,62px)}.start-tagline{font-size:13px}.start-body{gap:10px;padding:12px}.start-section{padding:12px}.faction-choices{gap:5px}.start-panel .faction-choices button{min-height:94px;padding:9px 7px;font-size:14px}.choice-icon{width:27px;height:27px;margin-bottom:7px;font-size:14px}.faction-choices small{font-size:8px}.start-panel .race-blurb{padding-top:27px;padding-left:12px}.start-panel .race-blurb:before{top:8px}.start-actions{padding:0 12px 14px}.secondary-actions{grid-template-columns:1fr 1fr}.start-panel .secondary-actions button,.start-panel .secondary-actions button#tutorial-start,.start-panel .secondary-actions button#online-start{min-width:0;padding:8px;font-size:13px}}@media (max-height:620px) and (min-width:700px){#overlay{place-items:start center;padding:10px 18px}.start-panel{max-height:none;margin:8px auto;overflow:hidden}.start-hero{padding:12px 24px 10px}.start-panel h1.title{font-size:44px}.start-tagline{margin:4px 0 6px;font-size:12px}.start-meta{display:none}.start-body{padding:10px 16px 8px}.start-section{padding:10px 12px}.section-heading{margin-bottom:7px}.section-no{width:28px;height:28px}.section-heading h2{font-size:17px}.start-panel .faction-choices button{min-height:76px;padding:7px;font-size:14px}.choice-icon{width:24px;height:24px;margin-bottom:4px;font-size:12px}.start-panel .race-blurb{min-height:38px;margin-top:6px;padding-top:7px;padding-bottom:7px}.mission-card{margin-top:8px;padding:6px 8px}.start-actions{padding:0 16px 10px}.start-panel button#start{min-height:48px}.start-help summary{padding:6px 16px}}@media (max-height:480px) and (min-width:700px){.start-hero{padding:8px 20px 7px}.start-kicker,.start-meta{display:none}.start-panel h1.title{font-size:36px}.start-tagline{margin:2px 0 0;font-size:11px}.start-body{gap:9px;padding:7px 14px 6px}.start-section{padding:7px 9px}.section-heading{gap:7px;margin-bottom:5px}.section-no{width:24px;height:24px;font-size:10px}.section-heading h2{font-size:15px}.section-heading p{font-size:8px}.start-panel .pick{margin:4px 0}.start-panel .faction-choices button{min-height:62px;padding:6px;font-size:12px}.choice-icon{width:20px;height:20px;margin-bottom:3px;font-size:10px}.faction-choices small{font-size:7px}.start-panel .race-blurb{min-height:30px;margin-top:4px;padding:5px 7px 5px 54px;font-size:9px;line-height:1.25}.start-panel .race-blurb:before{font-size:7px;top:6px;left:7px}.start-panel .setup-pick .pick-label{margin-bottom:3px;font-size:8px}.start-panel .compact-choices button{padding:4px 3px;font-size:10px}.mission-card{display:none}.start-actions{padding:0 14px 7px}.start-panel button#start{min-height:42px;padding:5px 20px}.primary-action b{font-size:17px}.primary-action small{display:none}.start-panel .secondary-actions button,.start-panel .secondary-actions button#tutorial-start,.start-panel .secondary-actions button#online-start{padding:5px 10px;font-size:12px}.start-help summary{padding:4px 14px;font-size:8px}}@media (prefers-reduced-motion:reduce){.menu-atmosphere i{animation:none}.start-panel .faction-choices button,.start-panel button#start{transition:none}}#overlay{background:radial-gradient(circle at 14% 18%,#fff4af4d 0 4%,#0000 4.3%),radial-gradient(circle at 84% 76%,#396f3d38 0 9%,#0000 9.4%),linear-gradient(145deg,#79ae68,#507d58 54%,#416553)}#overlay:before,#overlay:after{z-index:0;opacity:1;mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}#overlay:before{background:#c9aa70;border-top:4px solid #31372f52;border-bottom:4px solid #31372f52;width:124%;height:82px;inset:46% -12% auto;transform:rotate(-7deg);box-shadow:inset 0 9px #ffeeb426}#overlay:after{background:#cfb57a;border-left:4px solid #31372f4d;border-right:4px solid #31372f4d;width:76px;height:140%;inset:-20% auto auto 48%;transform:rotate(8deg);box-shadow:inset 9px 0 #ffeeb424}.menu-atmosphere{z-index:1}.menu-atmosphere:before{display:none}.menu-atmosphere i{border:4px solid var(--ink);width:38px;height:38px;box-shadow:26px 8px 0 -7px #6bae58, 26px 8px 0 -3px var(--ink), -17px 18px 0 -10px #3c7b43, -17px 18px 0 -6px var(--ink);opacity:.78;background:#4f914d;border-radius:48% 52% 44% 56%;animation:4.5s ease-in-out infinite menu-bob}.menu-atmosphere i:first-child{top:17%;left:7%}.menu-atmosphere i:nth-child(2){animation-delay:-1.6s;top:22%;right:9%}.menu-atmosphere i:nth-child(3){animation-delay:-3.1s;bottom:12%;right:16%}@keyframes menu-bob{0%,to{transform:rotate(-3deg)translateY(0)}50%{transform:rotate(3deg)translateY(-5px)}}.start-panel{z-index:2;color:var(--ink);background:var(--panel);border:4px solid var(--ink);box-shadow:0 8px 0 var(--ink), 0 22px 54px #1a1a2e61;border-radius:24px}.start-panel:before,.start-panel:after{display:none}.start-hero{border-bottom:4px solid var(--ink);background:radial-gradient(circle at 20% 40%,#fff6,#0000 22%),linear-gradient(115deg,#f2dcae,#fff1d0 52%,#e7cf9e)}.start-kicker{color:#6b5a48;letter-spacing:.16em;font-family:Jua,system-ui,sans-serif;font-size:12px;font-weight:400}.start-kicker span{background:var(--ink);border-radius:3px;height:3px}.start-panel h1.title{color:var(--accent);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:0 5px #1a1a2e3d}.start-panel h1.title span:last-child{color:var(--crystal);text-shadow:0 5px #1a1a2e3d}.start-tagline{color:#5f4f40}.start-meta span{color:var(--ink);border:2px solid var(--ink);letter-spacing:.04em;box-shadow:0 2px 0 var(--ink);background:#fff4dc;border-radius:8px;font-family:Jua,system-ui,sans-serif;font-size:11px;font-weight:400}.start-body{background:linear-gradient(#f6e7c8eb,#f6e7c8eb),repeating-linear-gradient(45deg,#0000 0 8px,#6b5a4814 8px 10px)}.start-section{border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);background:#fff4dc;border-radius:16px}.section-no{color:#fff4dc;border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);background:#3b8bff;border-radius:10px;font-family:Jua,system-ui,sans-serif;transform:rotate(-4deg)}.section-heading h2{color:var(--ink)}.section-heading p{color:#7a644f;font-family:Jua,system-ui,sans-serif;font-size:11px}.start-panel .faction-choices button{color:var(--ink);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);background:#f9e9c8;border-radius:14px}.start-panel .faction-choices button:after{opacity:.08;border-width:3px}.start-panel .faction-choices button:hover{border-color:var(--ink);background:#fff8e8}.start-panel .faction-choices button.on{color:var(--ink);background:color-mix(in srgb, var(--faction-color) 42%, #fff4dc);border-color:var(--ink);box-shadow:0 4px 0 var(--ink), 0 0 0 3px var(--faction-color) inset}.choice-icon{color:var(--ink);background:var(--faction-color,#fff);border:3px solid var(--ink);border-radius:10px}.faction-choices small{color:#6b5a48;font-family:Jua,system-ui,sans-serif;font-weight:400}.start-panel .race-blurb{color:#554838;border:3px solid var(--ink);background:#e8d4aa;border-left-width:3px;border-radius:12px;font-family:Jua,system-ui,sans-serif}.start-panel .race-blurb:before{color:#176f8d;font-family:Jua,system-ui,sans-serif}.start-panel .setup-pick .pick-label{color:#6b5a48;font-family:Jua,system-ui,sans-serif;font-weight:400}.start-panel .compact-choices button{color:var(--ink);border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);background:#f6e7c8;border-radius:9px}.start-panel .compact-choices button:hover{color:var(--ink);border-color:var(--ink);background:#fff8e8}.start-panel .compact-choices button.on{color:var(--ink);border-color:var(--ink);box-shadow:0 3px 0 var(--ink);background:#7fd1ff}.difficulty-choices button[data-value=hard].on{color:#fff;background:var(--bad);border-color:var(--ink)}.mission-card{background:#e8d4aa;border:3px dashed #9b784b;border-radius:12px}.mission-icon{color:var(--ink);background:var(--accent);border:3px solid var(--ink)}.mission-card b{color:var(--ink)}.mission-card small{color:#6b5a48;font-family:Jua,system-ui,sans-serif}.start-panel button#start{color:var(--ink);background:linear-gradient(#ffb83f, var(--accent));border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink);border-radius:16px}.start-panel button#start:hover{filter:brightness(1.06)}.start-panel button#start:active{box-shadow:0 2px 0 var(--ink)}.primary-action small{color:#704312;font-family:Jua,system-ui,sans-serif;font-weight:400}.start-panel .secondary-actions button,.start-panel .secondary-actions button#tutorial-start,.start-panel .secondary-actions button#online-start{color:var(--ink);border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);background:#7fd1ff;border-radius:14px}.start-panel .secondary-actions button:hover{color:var(--ink);border-color:var(--ink);background:#a8e1ff}.start-panel .secondary-actions button#online-start{color:var(--ink);border-color:var(--ink);background:#a0e86b}.start-panel .secondary-actions button span,.start-panel .secondary-actions button#online-start span{color:var(--ink)}.start-help{color:#6b5a48;background:var(--panel-dark);border-top:4px solid var(--ink);font-family:Jua,system-ui,sans-serif}.start-help summary{color:var(--ink);font-weight:400}.start-help b{color:#b45309}.qicon,#touch-coach[hidden],#rotate{display:none}@media (pointer:coarse) and (orientation:landscape),(max-height:560px) and (orientation:landscape){body.playing{--mobile-hud-h:clamp(122px, 24dvh, 154px);--mobile-mini:calc(var(--mobile-hud-h) - 14px)}body.playing #bottom{height:var(--mobile-hud-h);grid-template-columns:var(--mobile-mini) minmax(132px, 20vw) minmax(0, 1fr);padding:6px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));border-top:4px solid var(--ink);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#f6e7c8f5;grid-template-rows:1fr;gap:6px;display:grid;bottom:0;left:0;right:0;box-shadow:0 -6px 18px #1a1a2e33}body.playing #minimap{width:var(--mobile-mini);height:var(--mobile-mini);box-shadow:0 3px 0 var(--ink);border-width:3px;border-radius:12px;align-self:center}body.playing #selection{background:#e3cc9f;border-width:3px;border-radius:12px;min-width:0;padding:7px 9px;position:relative;overflow:auto;box-shadow:inset 0 2px #ffffff4d}body.playing #selection:empty:before{content:"전장을 탭해 유닛이나 건물을 선택하세요";color:#806b50;text-align:center;place-items:center;font-size:12px;line-height:1.35;display:grid;position:absolute;inset:8px}body.playing #selection h3{margin-bottom:2px;font-size:17px}body.playing #selection p{margin:1px 0;font-size:11px;line-height:1.25}body.playing .queue,body.playing .counts{gap:3px;margin-top:3px}body.playing .queue span,body.playing .counts span{padding:1px 5px;font-size:10px}body.playing #card{grid-template-columns:repeat(auto-fit,minmax(66px,1fr));grid-auto-rows:minmax(48px,1fr);align-content:stretch;gap:5px;min-width:0;height:100%;padding:1px;display:grid;position:relative;overflow:hidden auto}body.playing #card:not(.has-actions):before{content:"선택한 대상의 명령이 여기에 나타납니다";color:#806b50;text-align:center;background:#e3cc9fb3;border:3px dashed #b69c6b;border-radius:12px;grid-column:1/-1;place-items:center;min-height:52px;padding:8px;font-size:12px;display:grid}body.playing .cmd.empty{display:none}body.playing .cmd{min-height:48px;box-shadow:0 3px 0 var(--ink);touch-action:manipulation;border-width:3px;border-radius:11px;padding:5px 3px 4px;font-size:clamp(11px,2.1vw,15px);line-height:1.05}body.playing .cmd .hk{display:none}body.playing .cmd .cost{margin-top:2px;font-size:9px}body.playing .cmd.active{background:var(--accent);outline-offset:-5px;outline:3px solid #fff27a}body.playing .cmd.disabled{opacity:.5;filter:saturate(.45)}body.playing #quick{left:max(6px, env(safe-area-inset-left));bottom:calc(var(--mobile-hud-h) + 8px);z-index:8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1a1a2ec2;border-radius:15px;flex-direction:row;gap:6px;padding:4px;display:flex;box-shadow:0 4px 14px #1a1a2e3d}body.playing #quick [data-q^=g]{display:none}body.playing #quick .touch-only{display:grid}body.playing #quick button{border-width:3px;border-radius:11px;grid-template-rows:22px auto;place-items:center;gap:1px;min-width:55px;min-height:49px;padding:3px 7px 4px;font-size:11px;display:grid;box-shadow:0 3px #080812}body.playing #quick button[hidden]{display:none!important}body.playing #quick .qk{display:none}body.playing #quick .qicon{font-family:system-ui,sans-serif;font-size:18px;line-height:1;display:block}body.playing #quick .qlabel{white-space:nowrap;display:block}body.playing #quick button.on{background:#fff27a}body.playing #quick button.cancel{background:var(--bad)}body.playing #menu-btn{top:max(6px, env(safe-area-inset-top));left:max(7px, env(safe-area-inset-left));z-index:9;width:42px;height:42px}body.playing #resources{top:max(6px, env(safe-area-inset-top));right:max(7px, env(safe-area-inset-right));gap:4px}body.playing .res{box-shadow:0 2px 0 var(--ink);border-width:2px;border-radius:9px;padding:3px 8px;font-size:13px}body.playing #relics{top:max(7px, env(safe-area-inset-top));gap:5px;left:50%;transform:translate(-50%)}body.playing .gauge{border-width:2px;width:58px;height:12px}body.playing .relic-gem{border-width:2px;width:14px;height:14px}body.playing .relic-note{border-width:2px;padding:2px 7px;font-size:11px}body.playing #toast{z-index:12;max-width:64vw;padding:5px 12px;font-size:13px;top:50px}body.playing #tutor{top:52px;right:max(7px, env(safe-area-inset-right));width:min(310px,45vw);max-height:calc(100dvh - var(--mobile-hud-h) - 64px);font-size:12px;overflow:auto}body.playing #touch-coach:not([hidden]){z-index:14;max-width:calc(100vw - 120px);color:var(--panel);background:#1a1a2eeb;border:2px solid #fff4dc;border-radius:12px;align-items:center;gap:6px;padding:6px 34px 6px 9px;animation:.28s ease-out coach-in;display:flex;position:absolute;top:53px;left:50%;transform:translate(-50%);box-shadow:0 4px #00000061}#touch-coach .coach-title{color:#fff27a;white-space:nowrap;font-size:12px}#touch-coach span{white-space:nowrap;background:#ffffff14;border-radius:7px;padding:3px 6px;font-size:10px}#touch-coach span b{color:#7fd1ff;font-weight:400}#touch-coach button{color:#fff;background:0 0;border:0;width:27px;height:27px;padding:0;font:22px/1 system-ui,sans-serif;position:absolute;top:3px;right:4px}@keyframes coach-in{0%{opacity:0;transform:translate(-50%,-8px)scale(.96)}to{opacity:1;transform:translate(-50%)scale(1)}}body.playing #settings .panel,body.playing #overlay .panel,body.playing #net .panel{max-height:calc(100dvh - 18px);overflow:auto}}@media (pointer:coarse) and (orientation:portrait),(orientation:portrait) and (max-width:700px){body.playing #rotate{z-index:100;width:auto;color:var(--ink);white-space:normal;pointer-events:auto;background:radial-gradient(circle at 50% 35%,#fff4af52,#0000 28%),linear-gradient(145deg,#79ae68,#416553);place-items:center;padding:24px;display:grid;position:fixed;inset:0;transform:none}.rotate-card{text-align:center;background:var(--panel);border:4px solid var(--ink);width:min(330px,88vw);box-shadow:0 7px 0 var(--ink);border-radius:22px;padding:24px 22px}.rotate-card h2{margin:12px 0 3px;font-size:28px;font-weight:400}.rotate-card p{color:#6b5a48;margin:0 0 15px;font-size:14px}.rotate-card button{color:var(--ink);background:var(--accent);border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);border-radius:13px;padding:9px 18px;font:18px Jua,system-ui,sans-serif}.rotate-phone{border:4px solid var(--ink);background:#fff4dc;border-radius:9px;width:44px;height:76px;margin:4px auto 14px;animation:1.6s ease-in-out infinite rotate-phone;position:relative}.rotate-phone:after{content:"";background:var(--ink);border-radius:50%;width:6px;height:6px;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.rotate-phone i{border:2px solid var(--ink);background:#6fa85e;border-radius:3px;display:block;position:absolute;inset:7px 5px 14px}@keyframes rotate-phone{0%,25%{transform:rotate(0)}65%,to{transform:rotate(90deg)}}}@media (prefers-reduced-motion:reduce){.rotate-phone,body.playing #touch-coach:not([hidden]){animation:none}}