:root{--bg:#0a2433;--bg2:#07182a;--ink:#eef4fb;--ink2:#a9bccf;--ink3:#6f879d;--line:#a0c8f029;--glass:#081624b8;--a:#4f93ff;--b:#ff5e52;--gold:#ffc43d;--good:#4fe0a0;--bad:#ff4d6a;--range:#ff9a3d;--dock-h:auto;color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-family:Pretendard Variable,Pretendard,-apple-system,Apple SD Gothic Neo,Noto Sans KR,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg2);height:100%;margin:0;overflow:hidden}button{font:inherit;color:inherit}#app{grid-template-rows:1fr auto;height:100dvh;display:grid}#stage{touch-action:pan-y;-webkit-user-select:none;user-select:none;min-height:0;position:relative;overflow:hidden}#stage canvas{display:block;position:absolute;inset:0}#stage:after{content:"";pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,#0000 55%,#040c168c 100%);position:absolute;inset:0}.overlay,.panels{pointer-events:none;z-index:2;position:absolute;inset:0}.panels{z-index:3}.lbl{white-space:nowrap;letter-spacing:-.01em;will-change:transform, opacity;background:#06121ed1;border:1px solid #ffffff24;border-radius:999px;padding:5px 10px;font-size:13px;font-weight:650;position:absolute;top:0;left:0;box-shadow:0 6px 18px #00000059}.lbl b{font-weight:800}.lbl.good{border-color:var(--good);color:#c9ffe8;background:#0a4632e6}.lbl.bad{border-color:var(--bad);color:#ffd3dc;background:#5a0e1ee6}.lbl.range{border-color:var(--range);color:#ffe2c4;background:#5a2c06e6}.lbl.gold{border-color:var(--gold);color:#ffe9a8;background:#503800eb}.lbl.a{border-color:var(--a);color:#d6e6ff}.lbl.b{border-color:var(--b);color:#ffdcd8}.lbl.zone{background:#06121e99;padding:6px 12px;font-size:14px;font-weight:700}.lbl.big{padding:6px 14px;font-size:20px;font-weight:800}.lbl.huge{padding:8px 16px;font-size:26px;font-weight:850}.lbl .ic,.panel .ic{vertical-align:-.14em;width:1em;height:1em;display:inline-block}.lbl .ic svg,.panel .ic svg{width:100%;height:100%;display:block}.hud{z-index:4;left:50%;top:max(10px, env(safe-area-inset-top));background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;border-radius:14px;align-items:center;gap:14px;padding:7px 14px;transition:opacity .4s,transform .4s;display:flex;position:absolute;transform:translate(-50%,-8px)}.hud.on{opacity:1;transform:translate(-50%)}.hud-team,.hud-wave{white-space:nowrap;align-items:center;gap:6px;display:flex}.hud-name{letter-spacing:.02em;font-size:12px;font-weight:800}.hud-team.a .hud-name{color:var(--a)}.hud-team.b .hud-name{color:var(--b)}.hud-cap{color:var(--ink2);font-size:11px;font-weight:650}.hud-lives,.hud-waves{border-radius:8px;gap:3px;display:flex}.pip{width:15px;height:15px;transition:opacity .3s,transform .3s;display:block}.pip svg{width:100%;height:100%;display:block}.pip.off{opacity:.18;transform:scale(.8)}.hud-team.a .pip{color:var(--a)}.hud-team.b .pip{color:var(--b)}.pip.wave{color:var(--gold)}.flash{animation:1.1s ease-out flash}@keyframes flash{0%{background:#ffc43d59;box-shadow:0 0 #ffc43de6}to{background:0 0;box-shadow:0 0 0 12px #ffc43d00}}.panel{background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);visibility:hidden;border-radius:18px;padding:16px 18px;position:absolute;box-shadow:0 18px 50px #00000073}.panel.bare{box-shadow:none;-webkit-backdrop-filter:none;background:0 0;border:none;padding:0}.panel.interactive{pointer-events:auto}.p-center{width:max-content;max-width:calc(100% - 24px);top:50%;left:50%;translate:-50% -50%}.p-left{top:50%;left:clamp(12px,4vw,48px);translate:0 -50%}.p-right{top:50%;right:clamp(12px,4vw,48px);translate:0 -50%}.p-top{width:max-content;max-width:calc(100% - 24px);top:clamp(58px,9vh,90px);left:50%;translate:-50%}.p-bottom{width:max-content;max-width:calc(100% - 24px);bottom:16px;left:50%;translate:-50%}.p-tl{top:clamp(58px,9vh,80px);left:clamp(12px,3vw,36px)}.p-tr{top:clamp(58px,9vh,80px);right:clamp(12px,3vw,36px)}.title-card{text-align:center;padding:26px 34px}.title-card .kicker{letter-spacing:.24em;color:var(--gold);text-transform:uppercase;font-size:13px;font-weight:750}.title-card h1{letter-spacing:-.03em;margin:8px 0 6px;font-size:clamp(28px,5vw,52px);font-weight:850;line-height:1.05}.title-card p{color:var(--ink2);margin:0;font-size:clamp(14px,1.6vw,17px)}.chips{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.chip{-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);background:#081624c7;border-radius:14px;flex-direction:column;align-items:center;gap:6px;min-width:118px;padding:14px 16px;display:flex}.chip .big{font-size:28px;line-height:1}.chip .t{font-size:15px;font-weight:800}.chip .s{color:var(--ink2);font-size:12px}.chip .x{position:relative}.chip .x:after{content:"";background:var(--bad);border-radius:2px;height:3px;position:absolute;top:50%;left:-6px;right:-6px;transform:rotate(-20deg)}.card{--cc:#999;aspect-ratio:5/7;perspective:900px;width:150px;position:relative}.card-in{transform-style:preserve-3d;position:absolute;inset:0}.card .face{backface-visibility:hidden;border-radius:12px;position:absolute;inset:0;overflow:hidden}.card .front{border:3px solid var(--cc);background:linear-gradient(170deg,#20354a,#0f1d2c 60%);grid-template-rows:auto 1fr auto auto auto;grid-template-columns:minmax(0,1fr);padding:8px 9px;display:grid;box-shadow:0 10px 26px #00000073,inset 0 0 0 1px #ffffff14}.card .back{background:repeating-linear-gradient(45deg,#1b3350 0 8px,#16293f 8px 16px);border:3px solid #3b5a7c;place-items:center;display:grid;transform:rotateY(180deg)}.card .back-mark{aspect-ratio:1;border:3px solid #5a7fa6;border-radius:50%;width:40%;box-shadow:inset 0 0 0 6px #1b3350,inset 0 0 0 9px #5a7fa6}.c-red{--cc:#e5484d}.c-blue{--cc:#3e8bff}.c-green{--cc:#3fbf6a}.c-gold{--cc:#e8b732}.c-silver{--cc:#aebacb}.c-init{background:var(--cc);color:#0b1522;border-radius:50%;place-items:center;width:38px;height:38px;font-size:22px;font-weight:900;display:grid;position:absolute;top:7px;left:7px;box-shadow:0 2px #0000004d}.c-name{text-align:right;min-height:24px;padding-left:40px;font-size:14px;font-weight:800}.c-art{background:radial-gradient(60% 70% at 50% 60%, color-mix(in srgb, var(--cc) 40%, transparent), transparent 70%);margin:6px -9px}.c-row{background:#ffffff0f;border-radius:8px;align-items:center;gap:5px;min-width:0;margin-top:4px;padding:4px 6px;font-size:16px;display:flex;overflow:hidden}.c-row b{font-size:19px;font-weight:850}.c-row b.sm{font-size:15px}.c-row .ic{width:18px;height:18px}.c-row .ic.sm{width:14px;height:14px;color:var(--ink2);margin-left:6px}.c-row .txt{font-size:11.5px;font-weight:650;line-height:1.2}.c-primary{color:#ffe0d6}.c-move{color:#cfe4ff}.c-foot{justify-content:space-between;align-items:flex-end;margin-top:6px;display:flex}.c-tier{color:var(--ink2);font-size:10.5px;font-weight:700}.c-shield{color:#7fa8d6;place-items:center;width:36px;height:40px;display:grid;position:relative}.c-shield .ic{width:100%;height:100%;position:absolute;inset:0}.c-shield b{color:#07121e;font-size:18px;font-weight:900;position:relative}.card.big{width:min(230px,42vw)}.card.big .c-init{width:54px;height:54px;font-size:30px}.card.big .c-name{min-height:34px;padding-left:56px;font-size:18px}.card.big .c-row{font-size:20px}.card.big .c-row b{font-size:26px}.card.big .c-row .ic{width:24px;height:24px}.card.big .c-shield{width:50px;height:56px}.card.big .c-shield b{font-size:24px}.card.sm{width:96px}.card.sm .c-init{width:28px;height:28px;font-size:16px;top:5px;left:5px}.card.sm .c-name{min-height:18px;padding-left:28px;font-size:10.5px}.card.sm .c-row{padding:2px 4px;font-size:12px}.card.sm .c-row b{font-size:14px}.card.sm .c-row .ic{width:13px;height:13px}.card.sm .c-row .txt{font-size:9px}.card.sm .c-shield{width:26px;height:30px}.card.sm .c-shield b{font-size:13px}.card.sm .front{border-width:2px;padding:5px 6px}.hl{outline:3px solid var(--gold);outline-offset:2px;border-radius:10px;box-shadow:0 0 22px #ffc43d8c}.anatomy{align-items:center;gap:22px;display:flex}.anatomy .notes{gap:8px;width:250px;display:grid}.note{border:1px solid var(--line);background:#ffffff0d;border-radius:12px;padding:9px 12px}.note .h{align-items:center;gap:8px;font-size:14px;font-weight:800;display:flex}.note .h .n{background:var(--gold);color:#1a1200;border-radius:50%;place-items:center;width:20px;height:20px;font-size:12px;font-weight:900;display:grid}.note .d{color:var(--ink2);margin-top:3px;font-size:12.5px;line-height:1.45}.turnstrip{padding:12px 14px 14px}.turnstrip .ts-head{justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px;display:flex}.turnstrip .ts-title{font-size:14px;font-weight:800}.turnstrip .ts-turns{gap:5px;display:flex}.turnstrip .ts-turns i{background:#ffffff26;border-radius:3px;width:22px;height:6px}.turnstrip .ts-turns i.on{background:var(--gold)}.ts-slots{width:416px;height:158.4px;position:relative}.ts-slot{flex-direction:column;align-items:center;gap:6px;width:96px;display:flex;position:absolute;top:0;left:0}.ts-slot .who{border-radius:99px;padding:2px 8px;font-size:11.5px;font-weight:800}.ts-slot .who.a{color:#cfe0ff;background:#4f93ff33}.ts-slot .who.b{color:#ffd6d2;background:#ff5e5233}.order-badge{background:var(--gold);color:#1a1200;z-index:2;border-radius:50%;place-items:center;width:22px;height:22px;font-size:12px;font-weight:900;display:grid;position:absolute;top:-8px;right:-6px}.formula{min-width:260px}.formula .f-title{color:var(--ink2);letter-spacing:.04em;margin-bottom:8px;font-size:12px;font-weight:700}.f-row{border-bottom:1px dashed #ffffff1a;justify-content:space-between;align-items:center;gap:16px;padding:6px 0;font-size:15px;display:flex}.f-row b{font-size:18px;font-weight:850}.f-row.good b{color:var(--good)}.f-row.bad b{color:var(--bad)}.f-total{justify-content:space-between;align-items:center;padding-top:10px;font-weight:800;display:flex}.f-total b{font-size:30px}.f-vs{background:#ffffff0d;border-radius:12px;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding:10px 12px;display:flex}.f-vs .v{text-align:center}.f-vs .v small{color:var(--ink2);font-size:11px;font-weight:700;display:block}.f-vs .v b{font-size:30px;font-weight:900}.f-result{text-align:center;border-radius:10px;margin-top:10px;padding:8px;font-size:17px;font-weight:850}.f-result.dead{color:#ffb3c1;background:#ff4d6a2e}.f-result.safe{color:#b6ffe0;background:#4fe0a029}.hand{gap:8px;display:flex}.hand-title{color:var(--ink2);margin-bottom:8px;font-size:12px;font-weight:750}.steps{gap:6px;width:300px;display:grid}.step{border:1px solid #0000;border-radius:12px;grid-template-columns:26px 1fr;align-items:start;gap:10px;padding:8px 10px;display:grid}.step .n{width:26px;height:26px;color:var(--ink2);background:#ffffff14;border-radius:50%;place-items:center;font-size:13px;font-weight:900;display:grid}.step .t{font-size:14.5px;font-weight:800}.step .d{color:var(--ink2);margin-top:2px;font-size:12px;line-height:1.4}.dash{width:min(620px,92vw)}.lv-track{grid-template-columns:repeat(8,1fr);gap:5px;margin-bottom:14px;display:grid;position:relative}.lv{text-align:center;border:1px solid var(--line);background:#ffffff0d;border-radius:10px;padding:7px 0 6px;position:relative}.lv .num{font-size:18px;font-weight:900}.lv .cost{color:var(--ink2);justify-content:center;align-items:center;gap:2px;font-size:10.5px;display:flex}.lv .cost .ic{width:11px;height:11px}.lv-cursor{border:2.5px solid var(--gold);pointer-events:none;border-radius:12px;width:calc(12.5% - 4.375px);position:absolute;top:-4px;bottom:-4px;box-shadow:0 0 18px #ffc43d80}.dash-row{align-items:flex-start;gap:18px;display:flex}.coins{align-items:center;gap:8px;font-size:26px;font-weight:900;display:flex}.coins .ic{width:28px;height:28px}.tiers{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.tier-col{border:1px solid var(--line);text-align:center;background:#ffffff0d;border-radius:12px;padding:10px}.tier-col .lvl{font-size:14px;font-weight:850}.tier-col .row{justify-content:center;gap:4px;margin-top:8px;display:flex}.tier-col .row i{color:#0b1522;border-radius:4px;place-items:center;width:22px;height:30px;font-size:11px;font-style:normal;font-weight:900;display:grid}.item-slot{width:150px;height:44px;color:var(--ink3);border:2px dashed #ffffff40;border-radius:10px;place-items:center;font-size:12px;display:grid;position:relative;overflow:hidden}.item-card{color:#ffd6d6;background:linear-gradient(#3b2a2a,#20161a);border-top:3px solid #e5484d;justify-content:center;align-items:center;gap:6px;font-size:14px;font-weight:850;display:flex;position:absolute;inset:0}.tips{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(720px,92vw);display:grid}.tip{border:1px solid var(--line);background:#ffffff0d;border-radius:14px;padding:14px}.tip .t{font-size:15px;font-weight:850}.tip .d{color:var(--ink2);margin-top:5px;font-size:12.5px;line-height:1.45}.end-actions{justify-content:center;gap:10px;margin-top:12px;display:flex}.end-actions button{pointer-events:auto;cursor:pointer;border:1px solid var(--line);background:#ffffff14;border-radius:12px;padding:10px 18px;font-weight:750}.bubble{padding:4px 8px;font-size:18px}.bubble .ic{width:20px;height:20px}#dock{z-index:5;border-top:1px solid var(--line);padding:12px clamp(14px, 3vw, 32px) max(12px, env(safe-area-inset-bottom));background:linear-gradient(#0b1d2c,#081523);position:relative}.cap-row{grid-template-columns:200px 1fr auto;align-items:center;gap:18px;min-height:64px;display:grid}.scene-meta{flex-direction:column;gap:2px;display:flex}.scene-num{color:var(--gold);letter-spacing:.08em;font-size:11px;font-weight:800}.scene-title{font-size:15px;font-weight:800}.caption{letter-spacing:-.01em;text-wrap:pretty;word-break:keep-all;font-size:clamp(15px,1.5vw,19px);font-weight:550;line-height:1.55}.caption b{color:var(--gold);font-weight:800}.try{cursor:pointer;border:1px solid var(--gold);color:#ffe9a8;white-space:nowrap;background:#ffc43d24;border-radius:12px;padding:10px 16px;font-weight:800}.try.pulse{animation:1.4s ease-in-out infinite pulse}@keyframes pulse{50%{background:#ffc43d47;box-shadow:0 0 0 8px #ffc43d2e}}.ctrl-row{align-items:center;gap:8px;margin-top:10px;display:flex}.btn{border:1px solid var(--line);cursor:pointer;background:#ffffff0f;border-radius:12px;flex:none;place-items:center;width:40px;height:40px;display:grid}.btn svg{width:20px;height:20px}.btn.play{background:#ffffff1f;width:48px}.btn:hover{background:#ffffff24}.bar{cursor:pointer;touch-action:none;flex:1;height:28px;margin-left:8px;position:relative}.bar:before{content:"";background:#ffffff1f;border-radius:2px;height:4px;position:absolute;top:12px;left:0;right:0}.bar-fill{background:var(--gold);border-radius:2px;width:0;height:4px;position:absolute;top:12px;left:0}.bar-dots{position:absolute;inset:0}.dot{cursor:pointer;background:#3a5068;border:2px solid #0b1d2c;border-radius:50%;width:12px;height:12px;margin-left:-6px;padding:0;position:absolute;top:8px}.dot.on{background:var(--gold)}.dot.cur{transform:scale(1.35);box-shadow:0 0 0 3px #ffc43d4d}.widget-open #stage canvas{cursor:pointer}.w-hint{color:var(--ink2);margin-top:8px;font-size:13px;line-height:1.45}.w-close{pointer-events:auto;cursor:pointer;border:1px solid var(--line);background:#ffffff14;border-radius:12px;width:100%;margin-top:10px;padding:10px;font-weight:800}.w-cards{gap:6px;margin-top:8px;display:flex}.w-cards .card{cursor:pointer;pointer-events:auto;transition:transform .2s}.w-cards .card.sel{transform:translateY(-8px)}.w-cards .card.sel .front{box-shadow:0 0 0 3px var(--gold), 0 10px 26px #00000073}.w-atk{align-items:center;gap:10px;margin-top:10px;font-size:14px;font-weight:750;display:flex}.w-atk input{accent-color:var(--bad);pointer-events:auto;flex:1}.w-legend{color:var(--ink2);flex-wrap:wrap;gap:6px;margin-top:8px;font-size:11.5px;display:flex}.w-legend span{background:#ffffff0f;border-radius:99px;padding:3px 8px}@media (width<=760px){.cap-row{grid-template-columns:1fr auto;gap:8px 10px;min-height:0}.scene-meta{flex-direction:row;grid-column:1/-1;align-items:baseline;gap:8px}.caption{grid-column:1/-1;min-height:4.65em;font-size:15.5px}.try{grid-column:1/-1;justify-self:start;padding:8px 14px}.hud{gap:8px;padding:6px 10px}.pip{width:12px;height:12px}.card{width:120px}.card.big{width:150px}.card.big .c-init{width:40px;height:40px;font-size:22px}.card.big .c-name{padding-left:42px;font-size:14px}.card.big .c-row b{font-size:20px}.card.sm{width:70px}.card.sm .c-name,.card.sm .c-art{display:none}.card.sm .front{grid-template-rows:auto 1fr auto;padding-top:34px}.card.sm .c-move,.card.sm .c-tier{display:none}.card.sm .c-foot{justify-content:flex-end;margin-top:0}.card.sm .c-row b{font-size:12px}.card.sm .c-row .txt{display:none}.anatomy{flex-direction:column;gap:10px}.anatomy .notes{grid-template-columns:1fr 1fr;gap:6px;width:min(88vw,320px)}.note{padding:7px 9px}.note .d{font-size:11px}.panel{border-radius:14px;padding:12px}.p-left,.p-right{width:max-content;max-width:calc(100% - 20px);inset:auto auto 10px 50%;translate:-50%}.p-tl{width:max-content;max-width:calc(100% - 20px);top:52px;left:50%;translate:-50%}.hud-cap{display:none}.dash-row{flex-direction:column;gap:8px}.dash-row>div:first-child{grid-template-columns:auto auto;align-items:center;gap:4px 14px;display:grid}.dash-row>div:first-child .hand-title{margin:0!important}.dash .hand{flex-wrap:wrap}.lv .num{font-size:15px}.step .t{font-size:13px}.title-card{padding:20px 22px}.ts-slots{width:304px;height:120px}.ts-slot{width:70px}.steps{gap:2px;width:min(88vw,340px)}.step{padding:5px 8px}.step .d{display:none}.formula{width:min(88vw,320px);min-width:0}.tips{grid-template-columns:1fr;gap:6px}.tip{padding:9px 12px}.tip .d{font-size:11.5px}.chip{min-width:92px;padding:10px}.lbl{padding:4px 8px;font-size:12px}.lbl.big{font-size:16px}.lbl.huge{font-size:20px}}.w-tip{display:none}@media (width<=760px){.w-panel{padding:10px 12px!important}.w-panel .formula{width:min(92vw,360px)}.w-panel .f-title,.w-panel .hand-title,.w-panel .f-total,.w-panel .w-legend{display:none}.w-panel .w-cards{justify-content:center;margin-top:0}.w-panel .w-cards .card{width:66px}.w-panel .w-cards .card.sel{transform:translateY(-4px)}.w-panel .w-atk{margin-top:6px;font-size:13px}.w-panel .w-rows{flex-wrap:wrap;gap:4px;margin-top:6px;display:flex}.w-panel .f-row{background:#ffffff12;border:none;border-radius:99px;gap:6px;padding:3px 8px;font-size:11.5px}.w-panel .f-row b{font-size:13px}.w-panel .f-vs{margin-top:6px;padding:4px 12px}.w-panel .f-vs .v b{font-size:22px}.w-panel .f-result{margin-top:6px;padding:6px;font-size:15px}.w-panel .w-close{margin-top:6px;padding:8px}.w-tip{text-align:center;color:var(--ink2);margin-top:6px;font-size:11.5px;display:block}}@media (prefers-reduced-motion:reduce){.try.pulse{animation:none}}