#stage{--gold: #f1d27a;--gold-dim: rgba(201, 162, 74, .55);--ink: #f4ead2;--ink-dim: #cfc4ad;--frame: #070608;--panel: rgba(12, 10, 14, .62);--serif: Georgia, "Noto Serif", "Times New Roman", serif;--sans: system-ui, "Segoe UI", Roboto, "Noto Sans", sans-serif;--safe-l: 0px;--safe-r: 0px;--safe-t: 0px;--safe-b: 0px;--edge: 32px;color:var(--ink);font-family:var(--sans)}#stage button{font-family:var(--sans);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.hud{position:absolute;inset:0;pointer-events:none}.hud.hidden{display:none}.hud button{pointer-events:auto;touch-action:none}.hud svg{display:block}.hud .panel{background:var(--panel);border-radius:18px}.hud-tl{position:absolute;left:calc(var(--safe-l) + var(--edge));top:calc(var(--safe-t) + 26px);width:440px;padding:14px 16px 12px 12px;box-sizing:border-box;transform-origin:0 0}.bar{display:flex;align-items:center;gap:8px;height:46px;margin-bottom:9px}.bar:last-child{margin-bottom:0}.bar-ico{flex:none;width:34px;height:34px}.bar-ico svg{width:100%;height:100%}.bar.hp .bar-ico{color:#ff6f61}.bar.mp .bar-ico{color:#6f8dff}.bar.iron .bar-ico{color:#9ecfd6}.track{position:relative;flex:1;height:100%;box-sizing:border-box;border:3px solid var(--frame);border-radius:10px;background:#0000009e;box-shadow:0 0 0 2px var(--gold-dim);overflow:hidden}.track .fill{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--f, 0));background:linear-gradient(180deg,#ffffff61,#fff0 48%,#00000038),var(--c, #3fbf4f);transition:transform .12s linear}.track .txt{position:relative;display:block;height:100%;font:700 27px/40px var(--sans);text-align:center;white-space:nowrap;text-shadow:0 2px 2px #000,0 0 6px #000}.bar.mp .fill{--c: rgb(18, 40, 245)}.bar.iron .fill{--c: rgb(158, 207, 214)}.bar.iron .txt{color:#fff}.xp-row{display:flex;align-items:center;gap:8px;height:30px;margin:2px 0 11px}.xp-row .lvl{flex:none;width:92px;font:800 25px/30px var(--sans);color:var(--gold);text-shadow:0 2px 2px #000;white-space:nowrap}.bar.xp{flex:1;height:28px;margin:0}.bar.xp .fill{--c: rgb(230, 20, 205)}.bar.xp .txt{font-size:20px;line-height:22px}.res-row{display:flex;align-items:center;gap:10px}.res-row .bar.iron{flex:1;margin:0}.food{flex:none;display:flex;align-items:center;gap:4px;height:46px;padding:0 12px 0 6px;box-sizing:border-box;border:3px solid var(--frame);border-radius:10px;background:#0000009e;box-shadow:0 0 0 2px var(--gold-dim);font:800 27px var(--sans);text-shadow:0 2px 2px #000}.food img{width:36px;height:36px}.food.full{color:#ff8a7a}.hud-tc{position:absolute;left:50%;top:calc(var(--safe-t) + 14px);transform:translate(-50%);transform-origin:50% 0;display:flex;flex-direction:column;align-items:center}.tc-row{display:flex;align-items:center;gap:18px}.count{display:flex;align-items:center;gap:8px;min-width:128px;height:58px;padding:0 16px;box-sizing:border-box;border:3px solid var(--frame);border-radius:14px;background:#0009;box-shadow:0 0 0 2px var(--gold-dim);font:800 36px var(--sans);text-shadow:0 2px 2px #000}.count svg{width:34px;height:34px}.count.ally{color:#8cc4ff;justify-content:flex-end}.count.enemy{color:#ff8173}.count b{min-width:44px;text-align:center;color:var(--ink)}.stage-badge{position:relative;width:104px;height:104px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}.stage-badge img{width:100%;height:100%}.stage-badge b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-bottom:8px;font:800 46px var(--serif);color:#fff;text-shadow:0 2px 2px #000,0 0 8px #000}.wave-txt{margin-top:2px;font:700 28px var(--sans);text-shadow:0 2px 2px #000,0 0 8px #000}.bar.wave{width:380px;height:18px;margin:5px 0 6px}.bar.wave .track{border-width:2px;border-radius:9px}.bar.wave .fill{--c: rgb(255, 30, 100)}.map-row{display:flex;align-items:center;gap:8px;transform-origin:50% 0}.map-end{width:50px;height:50px;box-sizing:border-box;border:3px solid var(--frame);border-radius:10px;box-shadow:0 0 0 2px var(--gold-dim)}.hud-tr{position:absolute;right:calc(var(--safe-r) + var(--edge));top:calc(var(--safe-t) + 26px);display:flex;align-items:center;gap:16px;transform-origin:100% 0}.hud .gold{display:flex;align-items:center;gap:8px;height:84px;padding:0 24px 0 12px;box-sizing:border-box;font:800 44px var(--sans);color:var(--gold);text-shadow:0 2px 2px #000}.hud .gold img{width:62px;height:62px}.pause-btn,.sq-btn{width:88px;height:88px;padding:20px;border:3px solid var(--frame);border-radius:18px;box-shadow:0 0 0 2px var(--gold-dim);color:var(--ink);cursor:pointer}.pause-btn svg,.sq-btn svg{width:100%;height:100%}.hud-bl,.hud-br{position:absolute;bottom:calc(var(--safe-b) + var(--edge));display:flex;gap:18px}.hud-bl{left:calc(var(--safe-l) + var(--edge));transform-origin:0 100%}.hud-br{right:calc(var(--safe-r) + var(--edge));transform-origin:100% 100%}.act{position:relative;width:150px;height:150px;padding:0;border:4px solid var(--frame);border-radius:24px;background:#121014;overflow:hidden;cursor:pointer;box-shadow:0 0 0 3px var(--gold-dim),0 8px 18px #0000008c;transition:box-shadow .15s}.act>span{position:absolute;pointer-events:none}.act .ico{inset:0;background-size:cover;background-position:center}.act .sweep{inset:0;background:conic-gradient(from 180deg,transparent calc(var(--sweep, 1) * 360deg),rgba(0,0,0,.66) calc(var(--sweep, 1) * 360deg))}.act .tint{inset:0;background:#002dff;mix-blend-mode:multiply;opacity:0}.act.s-mana .tint{opacity:1}.act .cd{inset:0;display:flex;align-items:center;justify-content:center;font:900 66px var(--sans);color:#fff;text-shadow:0 3px 4px #000,0 0 10px #000}.act .cost{left:6px;bottom:6px;display:flex;align-items:center;gap:2px;height:36px;padding:0 9px 0 5px;border-radius:11px;background:#000000bf;font:800 26px var(--sans)}.act .cost svg{width:24px;height:24px}.act.spell .cost{color:#9db4ff}.act.troop .cost{color:#bfe0e6}.act .n{right:10px;bottom:4px;font:900 36px var(--sans);color:#fff;text-shadow:0 2px 3px #000,0 0 8px #000}.act .key{display:none;right:6px;top:6px;min-width:34px;height:34px;border-radius:9px;background:#000000b8;font:800 23px/34px var(--sans);text-align:center;color:var(--ink)}#stage.fine .act .key{display:block}.act .lock{inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#08060acc;color:var(--ink-dim);font:800 25px var(--sans);white-space:nowrap}.act .lock svg{width:46px;height:46px}.act.s-locked{box-shadow:0 0 0 3px #786e6466,0 8px 18px #0000008c}.act.s-locked .lock{display:flex}#stage .act.s-locked .cost,#stage .act.s-locked .n,#stage .act.s-locked .key,#stage .act.s-locked .cd{display:none}.act.s-ready{box-shadow:0 0 0 3px #ffd66bf2,0 0 24px #ffc45099,0 8px 18px #0000008c}.act.s-busy .ico,.act.s-food .ico{filter:grayscale(.7) brightness(.55)}.act.pressed{animation:act-press .18s ease-out}@keyframes act-press{0%{transform:scale(.88)}to{transform:scale(1)}}.hud.dead .hud-bl,.hud.dead .hud-br{opacity:.45;filter:grayscale(1)}.hint{position:absolute;left:50%;top:calc(var(--safe-t) + 268px);max-width:1500px;padding:14px 36px;border:2px solid var(--gold-dim);border-radius:44px;background:#0a080ccc;font:700 38px var(--sans);white-space:nowrap;opacity:0;transform:translate(-50%,-12px);transition:opacity .25s,transform .25s}.hint.on{opacity:1;transform:translate(-50%)}.toast{position:absolute;left:50%;bottom:calc(var(--safe-b) + 230px);padding:12px 32px;border-radius:36px;background:#821612e0;border:2px solid rgba(255,140,120,.6);font:800 38px var(--sans);white-space:nowrap;opacity:0;transform:translate(-50%)}.toast.on{animation:toast .8s ease-out forwards}@keyframes toast{0%{opacity:0;transform:translate(-50%,12px)}15%{opacity:1;transform:translate(-50%)}75%{opacity:1}to{opacity:0}}#stage.small .hud-tl,#stage.small .hud-tr,#stage.small .hud-bl,#stage.small .hud-br{transform:scale(1.2)}#stage.small .hud-tc{transform:translate(-50%) scale(1.08)}#stage.small .pause-btn,#stage.small .sq-btn{width:124px;height:124px;padding:28px}#stage.small .bar.xp{height:34px}#stage.small .bar.xp .txt{font-size:26px;line-height:30px}#stage.small .xp-row .lvl{font-size:30px}#stage.small .wave-txt{font-size:34px}#stage.small .act .lock{font-size:30px}#stage.small .menus .btn{height:140px;font-size:52px}#stage.small .menus .seg button{height:110px;min-width:150px;font-size:44px}#stage.small .shop-row .buy{height:120px;font-size:48px}#stage.small .shop-row .name{font-size:50px}#stage.small .shop-row .lv,#stage.small .shop-row .locked-at{font-size:38px}#stage.small .shop-row .stat{font-size:44px}#stage.small .shop-row{margin-top:10px}#stage.small .hint{top:calc(var(--safe-t) + 290px)}.menus{position:absolute;inset:0;pointer-events:none}.menus .screen{position:absolute;inset:0;touch-action:pan-x pan-y;display:flex;align-items:center;justify-content:center;pointer-events:auto;animation:screen-in .2s ease-out}.menus .screen.again{animation:none}@keyframes screen-in{0%{opacity:0}}.menus .scrim{background:radial-gradient(ellipse at center,#08060a80,#08060adb)}.menus .scrim-light{background:radial-gradient(ellipse at center,#08060a40,#08060ab3)}.card{box-sizing:border-box;min-width:760px;padding:50px 70px 58px;border:4px solid var(--frame);border-radius:30px;background:linear-gradient(180deg,#1e1820f2,#0e0b10f2);box-shadow:0 0 0 3px #c9a24a99,0 30px 80px #0009;text-align:center}.menus h1,.menus h2{margin:0;font-family:var(--serif);font-weight:700;color:var(--gold);letter-spacing:.02em;text-shadow:0 4px 0 #3a250c,0 8px 24px rgba(0,0,0,.8)}.menus h1{font-size:112px;line-height:1.1}.menus h2{font-size:76px;line-height:1.1}.btn{display:flex;align-items:center;justify-content:center;gap:12px;width:520px;height:116px;margin:22px auto 0;padding:0 28px;box-sizing:border-box;border:4px solid var(--frame);border-radius:24px;background:linear-gradient(180deg,#3e3344,#241c28);box-shadow:0 0 0 3px var(--gold-dim),0 8px 0 var(--frame);color:var(--ink);font:800 46px var(--sans);white-space:nowrap;cursor:pointer}.btn svg{width:48px;height:48px}.btn.primary{background:linear-gradient(180deg,#ffe48f,#dba646 55%,#b07a24);box-shadow:0 0 0 3px var(--gold),0 8px #4a3008,0 0 40px #ffc85a59;color:#2b1a05}.btn.danger{background:linear-gradient(180deg,#d0493c,#8c2119);box-shadow:0 0 0 3px #ff8a7a,0 8px #3d0c08;color:#fff}.btn:active:not(:disabled){transform:translateY(5px);box-shadow:0 0 0 3px var(--gold-dim),0 3px 0 var(--frame)}.btn:disabled{opacity:.4;cursor:default}.btn:focus-visible,.seg button:focus-visible,.menus input:focus-visible{outline:5px solid #fff;outline-offset:5px}.btn img{width:46px;height:46px}.chip{display:inline-flex;align-items:center;gap:10px;height:72px;padding:0 24px;box-sizing:border-box;border-radius:40px;background:#0000008c;font:800 38px var(--sans);white-space:nowrap}.chip img,.chip svg{width:48px;height:48px}.chip.hero svg{color:#8cc4ff}.chip.gold{color:var(--gold)}.seg{display:inline-flex;border:3px solid var(--frame);border-radius:18px;overflow:hidden;box-shadow:0 0 0 2px var(--gold-dim)}.seg button{height:80px;min-width:124px;padding:0 24px;border:0;background:#18131beb;color:var(--ink-dim);font:800 34px var(--sans);cursor:pointer}.seg button+button{border-left:3px solid var(--frame)}.seg button.on{background:linear-gradient(180deg,#ffe48f,#d9a440);color:#2b1a05}.screen.menu{justify-content:flex-end;background:linear-gradient(270deg,#08060ae0,#08060a99 34%,#08060a00 62%)}.menu-col{display:flex;flex-direction:column;align-items:flex-start;margin-right:calc(var(--safe-r) + 150px);padding-top:40px}.menu-col h1{font-size:150px;margin-bottom:18px}.menu-col .status{display:flex;gap:18px;margin-bottom:26px}.menu-col .btn{margin:22px 0 0}.menu-col .note{margin-top:26px;font:700 34px var(--sans);color:var(--gold)}.corner{position:absolute;right:calc(var(--safe-r) + 44px);top:calc(var(--safe-t) + 40px);display:flex;align-items:center;gap:20px}.corner-l{position:absolute;left:calc(var(--safe-l) + 44px);top:calc(var(--safe-t) + 40px)}.btn.back{width:auto;height:88px;margin:0;padding:0 34px 0 18px;gap:8px;border-width:3px;border-radius:18px;background:#18131beb;box-shadow:0 0 0 2px var(--gold-dim);font-size:36px}.btn.back svg{width:44px;height:44px}#stage.small .menus .btn.back{height:124px;padding:0 44px 0 24px;font-size:48px}#stage.small .menus .btn.back svg{width:60px;height:60px}.menus.going,.menus.going *{pointer-events:none!important}.menus .icon-btn{box-sizing:border-box;background:#18131beb}.menus .icon-btn svg,.hud .fs-btn svg{width:100%;height:100%}.card.shop{width:1240px}.shop-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px}.shop-head h2{text-align:left}.shop-row{display:grid;grid-template-columns:108px 1fr 170px 150px 250px;align-items:center;gap:18px;margin-top:14px;padding:12px 16px;border-radius:20px;background:#0000005c;text-align:left}.shop-row .pic{width:104px;height:104px;box-sizing:border-box;border:3px solid var(--frame);border-radius:18px;box-shadow:0 0 0 2px var(--gold-dim);background-size:cover}.shop-row .name{font:800 42px var(--sans);white-space:nowrap}.shop-row .lv{font:700 30px var(--sans);color:var(--ink-dim)}.stat{display:flex;align-items:center;gap:8px;font:800 38px var(--sans)}.stat svg{width:34px;height:34px}.stat.hp{color:#ff8f80}.stat.dmg{color:#ffd36b}.shop-row .buy{width:250px;height:92px;margin:0;font-size:40px}.shop-row.locked{opacity:.55}.shop-row.locked .pic{filter:grayscale(1) brightness(.6)}.shop-row .locked-at{grid-column:3 / span 3;display:flex;align-items:center;gap:10px;font:800 34px var(--sans);color:var(--ink-dim)}.shop-row .locked-at svg{width:38px;height:38px}.foot{display:flex;justify-content:center;gap:32px;margin-top:34px}.foot .btn{width:420px;margin:0}.card.result h1{font-size:128px}.card.result.defeat h1{color:#ff7a6b;text-shadow:0 4px 0 #3d0c08,0 8px 24px rgba(0,0,0,.8)}.card .sub{margin-top:6px;font:700 38px var(--sans);color:var(--ink-dim)}.tiles{display:flex;justify-content:center;gap:26px;margin-top:30px}.tile{min-width:210px;padding:16px 22px 18px;box-sizing:border-box;border-radius:20px;background:#0000006b}.tile b{display:flex;align-items:center;justify-content:center;gap:8px;font:900 64px var(--sans)}.tile b img{width:56px;height:56px}.tile span{font:700 30px var(--sans);color:var(--ink-dim)}.card .done{margin-top:26px;font:800 40px var(--sans);color:var(--gold)}.card.settings{width:1040px}.set-row{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:30px;font:700 42px var(--sans);text-align:left}.set-row input[type=range]{width:470px;height:64px;margin:0;accent-color:#dba646;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}.set-row input[type=range]::-webkit-slider-runnable-track{height:18px;border-radius:9px;border:3px solid var(--frame);background:linear-gradient(90deg,#dba646 var(--v, 50%),rgba(0,0,0,.6) var(--v, 50%));box-shadow:0 0 0 2px var(--gold-dim)}.set-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:54px;height:54px;margin-top:-21px;border-radius:50%;border:4px solid var(--frame);background:radial-gradient(circle at 40% 35%,#fff2c0,#e2b553 60%,#9a6a1e)}.set-row input[type=range]::-moz-range-track{height:14px;border-radius:9px;border:3px solid var(--frame);background:#0009}.set-row input[type=range]::-moz-range-progress{height:14px;border-radius:9px;background:#dba646}.set-row input[type=range]::-moz-range-thumb{width:46px;height:46px;border-radius:50%;border:4px solid var(--frame);background:#e2b553}.screen.loading{flex-direction:column;justify-content:space-between;padding:calc(var(--safe-t) + 70px) 0 calc(var(--safe-b) + 110px);box-sizing:border-box;background:#0b0a0c center / cover no-repeat}.screen.loading h1{font-size:150px}.load{width:860px;text-align:center}.load .label{font:700 42px var(--sans);text-shadow:0 2px 3px #000,0 0 12px #000}.load .bar-out{height:24px;margin-top:18px;border:3px solid var(--frame);border-radius:12px;background:#0009;box-shadow:0 0 0 2px var(--gold-dim);overflow:hidden}.load .bar-in{height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--f, 0));background:linear-gradient(90deg,#c9a24a,#f1d27a);transition:transform .15s}.portrait{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:80px;background:#0b0a0c;pointer-events:auto}.portrait[hidden]{display:none}.portrait>svg{width:420px;height:420px;color:var(--gold);animation:rotate-hint 2.4s ease-in-out infinite}.portrait p{margin:0;font:800 120px var(--sans);text-align:center}#stage .menus .portrait .btn.back{height:240px;padding:0 80px 0 50px;gap:20px;border-width:6px;border-radius:40px;box-shadow:0 0 0 4px var(--gold-dim);font-size:100px}#stage .menus .portrait .btn.back svg{width:110px;height:110px}@keyframes rotate-hint{0%,20%{transform:rotate(0)}50%,80%{transform:rotate(-90deg)}to{transform:rotate(0)}}.phones{position:absolute;inset:0;pointer-events:none}#stage.small .phones{display:none}.join-card{position:absolute;left:calc(var(--safe-l) + 44px);bottom:calc(var(--safe-b) + 36px);display:flex;align-items:center;gap:24px;padding:16px 32px 16px 16px;box-sizing:border-box;border:4px solid var(--frame);border-radius:26px;background:linear-gradient(180deg,#1e1820ed,#0e0b10ed);box-shadow:0 0 0 3px var(--gold-dim),0 20px 60px #0000008c;animation:screen-in .2s ease-out}.join-card .qr,.card .lost .qr{flex:none;display:flex;align-items:center;justify-content:center;width:240px;height:240px;border-radius:14px;overflow:hidden;background:#fff}.join-card.small .qr{width:180px;height:180px}.join-card .qr svg,.card .lost .qr svg{display:block}.join-card .qr.wait{background:#00000073;box-shadow:inset 0 0 0 3px var(--gold-dim)}.qr-wait{font:900 64px var(--sans);letter-spacing:.12em;color:var(--ink-dim)}.join-text{text-align:left}.join-title{font:800 42px/1.15 var(--sans);color:var(--gold);white-space:nowrap}.join-card.small .join-title{font-size:40px}.join-more{margin-top:12px;font:700 28px/1.25 var(--sans);color:var(--ink-dim);white-space:nowrap}.join-addr{font:800 28px/1.25 var(--sans);color:var(--ink);white-space:nowrap}.join-code{margin-top:12px;font:700 32px/1.2 var(--sans);color:var(--ink-dim);white-space:nowrap}.join-code b{font:900 52px/1.1 var(--sans);letter-spacing:.12em;color:var(--ink)}.join-card.small .join-code b{font-size:46px}.pilot-chip{position:absolute;left:calc(var(--safe-l) + 44px);bottom:calc(var(--safe-b) + 40px);box-shadow:0 0 0 2px var(--gold-dim);color:var(--ink)}.pilot-chip svg{color:var(--gold)}.pilot-chip.coming{opacity:.7}.card .lost{display:inline-flex;align-items:center;gap:26px;margin-top:28px;padding:14px 34px 14px 14px;border-radius:22px;background:#7818106b;box-shadow:0 0 0 3px #ff8a7a99;text-align:left}.card .lost .qr{width:200px;height:200px;border-radius:12px}.lost-text>b{display:block;font:800 44px/1.15 var(--sans);color:#ffb3a8;white-space:nowrap}.lost-text>span{display:block;margin-top:12px;font:700 32px/1.2 var(--sans);color:var(--ink-dim);white-space:nowrap}.lost-text>span b{font:900 50px/1.1 var(--sans);letter-spacing:.12em;color:var(--ink)}.btn.wide{width:auto;min-width:520px;padding:0 44px}.btn.armed{background:linear-gradient(180deg,#d0493c,#8c2119);box-shadow:0 0 0 3px #ff8a7a,0 8px #3d0c08;color:#fff}.card.result>.btn.wide{margin-top:26px}#stage.tv .btn:focus,#stage.tv .seg button:focus,#stage.tv .menus input:focus{outline:5px solid #fff;outline-offset:5px}#stage.tv .bar.xp .txt{font-size:24px;line-height:26px}
