:root{color-scheme:dark;--panel:rgba(20,20,17,.91);--line:rgba(255,255,255,.1);--muted:#96978f;--ink:#f5f3eb;--amber:#f1a43b;--red:#e95746;--blue:#458bd8}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#181712;color:var(--ink)}button,input{font:inherit}.game,#battleCanvas{position:absolute;inset:0;width:100%;height:100%}#battleCanvas{display:block;touch-action:none}.loading{position:fixed;z-index:100;inset:0;display:grid;place-content:center;justify-items:center;gap:13px;background:#171713;transition:.5s}.loading.done{opacity:0;visibility:hidden}.loading img{width:48px;height:48px}.loading strong{font-size:12px;letter-spacing:.12em}.loading span{width:100px;height:2px;background:linear-gradient(90deg,transparent,var(--amber),transparent);animation:load 1s infinite}@keyframes load{50%{transform:scaleX(.4);opacity:.4}}.game-header{position:absolute;z-index:10;top:0;left:0;right:0;height:66px;padding:0 20px 0 22px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(8,9,8,.78),transparent);pointer-events:none}.game-header>*{pointer-events:auto}.game-brand{display:flex;align-items:center;gap:8px;color:white;text-decoration:none}.game-brand img{width:28px;height:28px}.game-brand span{font-weight:800}.game-brand i{width:1px;height:14px;background:var(--line)}.game-brand b{font-family:Georgia,serif;font-style:italic;font-weight:500;color:#d8d4ca}.battle-state{position:absolute;left:50%;transform:translateX(-50%);height:34px;padding:0 12px;border:1px solid var(--line);border-radius:11px;background:rgba(17,18,16,.54);backdrop-filter:blur(10px);display:flex;align-items:center;gap:8px}.battle-state>span{width:6px;height:6px;border-radius:50%;background:#7f9e78;box-shadow:0 0 0 4px rgba(127,158,120,.13)}.battle-state b{font-size:9px;letter-spacing:.13em}.battle-state small{padding-left:8px;border-left:1px solid var(--line);font-size:10px;color:#b6b6af;font-variant-numeric:tabular-nums}.header-actions{display:flex;gap:6px}.header-actions button,.header-actions a{height:34px;min-width:34px;border:1px solid var(--line);border-radius:10px;background:rgba(17,18,16,.55);backdrop-filter:blur(8px);color:#dddcd5;display:grid;place-items:center;text-decoration:none;font-size:11px;padding:0 10px}.control-panel{position:absolute;z-index:12;left:14px;top:78px;bottom:14px;width:315px;padding:20px;overflow-y:auto;overscroll-behavior:contain;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:var(--panel);backdrop-filter:blur(22px);box-shadow:0 24px 70px rgba(0,0,0,.35);scrollbar-width:thin;scrollbar-color:#5b5a52 transparent}.panel-drag{display:none}.panel-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:21px}.panel-head small,.section-title{color:#8c8d85;font-size:8px;font-weight:800;letter-spacing:.15em}.panel-head h1{font-family:Georgia,serif;font-size:26px;font-weight:500;letter-spacing:-.035em;margin:7px 0 0}.panel-head button{display:none;width:32px;height:32px;border:0;border-radius:9px;background:#292923;color:white;font-size:20px}.control-section{margin-bottom:20px}.section-title{display:flex;gap:8px;margin-bottom:10px}.section-title span{color:#d3d1c9}.terrain-options{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.terrain-options button{border:1px solid var(--line);border-radius:11px;background:#25251f;color:#a9aaa2;padding:6px;cursor:pointer}.terrain-options button.active{border-color:#c98734;color:white;background:#30291d}.terrain-options i{display:block;height:31px;border-radius:7px;margin-bottom:5px}.terrain-options i.desert{background:linear-gradient(160deg,#f0c173,#a85c28)}.terrain-options i.rock{background:linear-gradient(160deg,#8b8980,#3f423d)}.terrain-options i.night{background:linear-gradient(160deg,#33465c,#141923)}.terrain-options b{font-size:8px}.army-card{padding:14px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.035)}.army-heading{display:grid;grid-template-columns:29px 1fr auto;align-items:center;gap:9px}.army-heading>span{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#2d3e54;color:#73a9e8;font-size:10px;font-weight:850}.army-b .army-heading>span{background:#4c2e27;color:#f0816f}.army-heading small,.army-heading strong{display:block}.army-heading small{font-size:7px;letter-spacing:.12em;color:#83857e}.army-heading strong{font-size:12px;margin-top:2px}.army-heading em{font-size:10px;font-style:normal;font-weight:850}.unit-options{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:12px 0}.unit-options button{height:48px;border:1px solid var(--line);border-radius:10px;background:#22221e;color:#95978f;font-size:8px;cursor:pointer}.unit-options button span{display:block;font-size:16px;margin-bottom:2px}.army-a .unit-options button.active{border-color:#4f86c4;background:#243245;color:#e5efff}.army-b .unit-options button.active{border-color:#be6557;background:#3f2925;color:#ffe9e3}.number-field{height:41px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:#1e1f1b;display:flex;align-items:center;justify-content:space-between;gap:8px}.number-field span{font-size:8px;color:#85877f}.number-field input{width:118px;border:0;outline:0;background:transparent;color:white;text-align:right;font-size:12px;font-weight:750}.stat-line{display:grid;grid-template-columns:28px 1fr 20px;align-items:center;gap:7px;margin-top:10px;font-size:8px;color:#868880}.stat-line>i{height:3px;background:#33342e;border-radius:3px;overflow:hidden}.stat-line>i b{display:block;height:100%;width:25%;background:#5796d7}.army-b .stat-line>i b{background:#e66e5a}.stat-line em{font-style:normal;text-align:right;color:#bbbcb5}.versus{display:flex;align-items:center;gap:8px;margin:9px 0}.versus span{height:1px;flex:1;background:var(--line)}.versus b{font-size:8px;color:#777970}.formation-section{margin-top:18px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:11px;background:#20211d}.segmented button{height:29px;border:0;border-radius:8px;background:transparent;color:#85877f;font-size:8px}.segmented button.active{background:#38372f;color:white}.start-button{width:100%;height:49px;border:0;border-radius:13px;background:linear-gradient(135deg,#d7852c,#edaa45);color:#21180e;display:grid;grid-template-columns:26px 1fr 42px;align-items:center;padding:0 13px;cursor:pointer;box-shadow:0 10px 25px rgba(199,119,35,.23)}.start-button span{font-size:17px}.start-button b{font-size:11px}.start-button small{font-size:7px;opacity:.65}.start-button.running{background:#37372f;color:#ccc}.scale-note{text-align:center;color:#70716b;font-size:7px;line-height:1.4;margin:9px 8px 0}.scoreboard{position:absolute;z-index:8;top:76px;left:50%;transform:translateX(-50%);width:min(650px,calc(100% - 380px));display:grid;grid-template-columns:1fr 70px 1fr;gap:9px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:15px;background:rgba(15,16,14,.68);backdrop-filter:blur(13px);box-shadow:0 12px 34px rgba(0,0,0,.17)}.team-score{display:grid;align-items:center;gap:8px}.team-a-score{grid-template-columns:27px 95px 1fr}.team-b-score{grid-template-columns:1fr 95px 27px;text-align:right}.team-score>span{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;font-size:9px;font-weight:850;background:#2b4867;color:#8cbcef}.team-b-score>span{background:#60372e;color:#ff9a86}.team-score small,.team-score strong{display:block;white-space:nowrap}.team-score small{font-size:7px;color:#888a83}.team-score strong{font-size:11px;margin-top:2px;font-variant-numeric:tabular-nums}.team-score>i{height:4px;border-radius:5px;background:#34352f;overflow:hidden}.team-score>i b{display:block;width:100%;height:100%;background:var(--blue);transition:.3s}.team-b-score>i b{margin-left:auto;background:var(--red)}.score-center{text-align:center;border-left:1px solid var(--line);border-right:1px solid var(--line)}.score-center small,.score-center b{display:block}.score-center small{font-size:6px;color:#7c7e77}.score-center b{font-size:10px;margin-top:3px}.camera-tools,.play-tools{position:absolute;z-index:8;display:flex;gap:5px;padding:5px;border:1px solid var(--line);border-radius:12px;background:rgba(18,19,17,.68);backdrop-filter:blur(12px)}.camera-tools{right:15px;top:78px}.play-tools{left:50%;bottom:16px;transform:translateX(-50%)}.camera-tools button,.play-tools button{width:32px;height:32px;border:0;border-radius:8px;background:transparent;color:#989a92;font-size:10px}.camera-tools button.active,.play-tools button.active{background:#37372f;color:white}.play-tools button:disabled{opacity:.35}.camera-hint{position:absolute;z-index:5;right:15px;bottom:18px;color:rgba(255,255,255,.56);font-size:8px;text-shadow:0 2px 5px #000}.mobile-builder{display:none}.result-modal{position:absolute;z-index:30;inset:0;place-items:center;background:rgba(8,9,8,.5);backdrop-filter:blur(8px)}.result-modal:not([hidden]){display:grid}.result-card{width:min(390px,calc(100% - 30px));padding:28px;border:1px solid var(--line);border-radius:24px;background:#1c1d19;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.4)}.result-card>small{font-size:8px;letter-spacing:.18em;color:#999b92}.winner-mark{width:54px;height:54px;margin:18px auto 12px;border-radius:16px;background:#294d72;color:#9dcbff;display:grid;place-items:center;font-size:22px;font-weight:900}.result-card h2{font-family:Georgia,serif;font-size:30px;font-weight:500;margin:0}.result-card>p{color:#92948c;font-size:10px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:20px 0}.result-stats div{padding:11px 5px;border:1px solid var(--line);border-radius:11px}.result-stats span,.result-stats b{display:block}.result-stats span{font-size:7px;color:#7f817a}.result-stats b{font-size:11px;margin-top:5px}.result-card button{width:100%;height:40px;margin-top:7px;border:0;border-radius:10px;background:#df993e;color:#21170d;font-size:10px;font-weight:800}.result-card #editBattle{background:#2a2b26;color:#c5c6bf}.panel-drag{height:13px}
@media(max-width:800px){.game-header{height:57px;padding:0 11px}.game-brand i,.game-brand b,.header-actions a{display:none}.battle-state{height:30px}.header-actions button{height:31px;min-width:31px;padding:0}.control-panel{position:fixed;left:8px;right:8px;top:auto;bottom:8px;width:auto;height:min(78svh,680px);border-radius:22px;padding:10px 16px 18px;transform:translateY(calc(100% + 16px));transition:transform .32s cubic-bezier(.2,.8,.2,1)}.control-panel.open{transform:none}.panel-drag{display:grid;place-items:center}.panel-drag span{width:36px;height:4px;border-radius:4px;background:#55564f}.panel-head button{display:block}.terrain-options i{height:25px}.mobile-builder{display:flex;position:absolute;z-index:9;left:12px;bottom:14px;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:rgba(19,20,18,.78);backdrop-filter:blur(12px);color:white;align-items:center;gap:8px;font-size:9px}.scoreboard{top:64px;width:calc(100% - 20px);grid-template-columns:1fr 43px 1fr;padding:7px}.team-a-score{grid-template-columns:22px 1fr}.team-b-score{grid-template-columns:1fr 22px}.team-score>i{grid-column:1/-1;grid-row:2}.team-score>span{width:22px;height:22px}.team-score small{display:none}.team-score strong{font-size:9px}.score-center{font-size:8px}.camera-tools{right:10px;top:119px;flex-direction:column}.camera-hint{display:none}.play-tools{bottom:14px}.play-tools button{width:29px;height:29px}.result-card{padding:23px}.panel-head h1{font-size:23px}}
@media(max-height:700px) and (min-width:801px){.control-panel{top:68px;padding:14px;width:300px}.panel-head{margin-bottom:11px}.control-section{margin-bottom:12px}.unit-options{margin:8px 0}.unit-options button{height:40px}.army-card{padding:10px}.formation-section{margin-top:10px}.scoreboard{top:68px}}
.unit-options{grid-template-columns:repeat(5,1fr)}
.unit-options button{padding:2px;font-size:7px}
.game:after{content:"";position:absolute;z-index:4;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 48%,rgba(26,15,7,.25) 100%),linear-gradient(180deg,rgba(255,208,127,.07),transparent 35%)}