html,body{margin:0;padding:0;height:100%}body{font-family:sans-serif;background-color:#f0f0f0}#app{position:relative;width:100%;height:100vh}canvas{display:block;width:100%;height:100%;background-color:#fff;-webkit-user-select:none;user-select:none;cursor:grab}canvas:active{cursor:grabbing}.hud{position:absolute;top:10px;left:10px;background:#ffffffe6;border:1px solid rgba(0,0,0,.15);border-radius:6px;padding:8px 10px;font-size:14px;line-height:1.35}.uiPanel{position:relative;color:#fff;border-radius:16px;overflow:hidden;background-color:#000000b3;background-size:cover;background-position:center;box-shadow:0 10px 30px #00000073}.uiPanel:before{content:"";position:absolute;inset:0;background:#0000008c;pointer-events:none}.uiPanel>*{position:relative;z-index:1}.uiPanel--hud{position:absolute;top:12px;left:12px;width:260px;display:flex;flex-direction:column;gap:10px;padding:12px;font-size:13px}.hudFlagWrap{display:flex;justify-content:space-between;align-items:flex-start}.hudFlag{width:84px;height:auto;image-rendering:pixelated;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}.hudSettings{width:32px;height:32px;cursor:pointer;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));transition:transform .1s ease,filter .15s ease}.hudSettings:hover{filter:drop-shadow(0 2px 8px rgba(0,0,0,.7));transform:translateY(-1px)}.hudSettings:active{transform:translateY(0)}.hudBody>div{display:flex;justify-content:space-between;gap:10px;line-height:1.25}.hudBody strong{font-weight:700}.hudSelectedUnit{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:6px}.hudUnitImage{width:120px;height:auto;align-self:center;image-rendering:pixelated;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}.hudUnitImage.is-hidden{display:none}.hudUnitStats{display:flex;flex-direction:column;gap:4px}.hudUnitStats>div{display:flex;justify-content:space-between;gap:10px}.uiButton{border:0;border-radius:14px;padding:10px 12px;cursor:pointer;font-weight:700;font-size:14px;letter-spacing:.2px;transition:transform .06s ease,filter .15s ease}.uiButton:active{transform:translateY(1px)}.uiButton--ok{background:#9eaf4c;border:2px solid rgb(170,176,68);color:#fff}.uiButton--ok:hover{filter:brightness(1.08)}.dialog-overlay{position:fixed;inset:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:1000}.dialog{width:820px;max-width:95%;color:#fff;border-radius:16px;overflow:hidden;box-shadow:0 0 40px #000c;background-size:cover;background-position:center;position:relative}.dialog:before{content:"";position:absolute;inset:0;background:#0000008c;z-index:0}.dialog-content{position:relative;z-index:1;padding:24px}.dialog-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}.dialog-column{border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:16px}.dialog-flag{width:140px;height:auto;display:block;margin:0 auto 12px}.dialog-unit{width:160px;height:auto;display:block;margin:0 auto 12px}.dialog-column h3{margin:0 0 12px;text-align:center}.dialog-stats{font-size:14px;line-height:1.6}.dialog-statline{display:flex;justify-content:space-between;gap:12px}.dialog-statlabel{opacity:.9}.dialog-statvalue{font-weight:700}.dialog-damage{text-align:center}.dialog-damage-value{font-size:42px;font-weight:900;margin-top:6px}.dialog-damage-value--red{color:#f55}.dialog-damage-value--green{color:#5caf4c}.dialog-footer{display:flex;justify-content:center;gap:16px;margin-top:18px}.dialog-button{background:#9eaf4c;color:#fff;border:2px solid rgb(170,176,68);padding:10px 34px;font-size:16px;font-weight:700;border-radius:24px;cursor:pointer;transition:transform .1s ease,box-shadow .1s ease}.dialog-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0006}.dialog-button:active{transform:translateY(0);box-shadow:none}.dialog-button:disabled{background:linear-gradient(#9da7b0,#6f7a84);color:#e6e6e6;cursor:not-allowed;opacity:.8;box-shadow:none;transform:none}.dialog-button--secondary{background:#ffffff14;border:2px solid rgba(255,255,255,.35);color:#fff}.dialog-button--secondary:hover{box-shadow:0 4px 12px #00000059}.start-dialog-overlay{background:#000000bf}.start-dialog{width:900px;max-width:94%;min-height:560px;border-radius:18px;background-size:cover;background-position:center;position:relative;overflow:hidden;box-shadow:0 0 50px #000000d9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:48px 32px;color:#fff;text-align:center}.start-dialog:before{content:"";position:absolute;inset:0;background:#00000073;z-index:0}.start-dialog>*{position:relative;z-index:1}.start-dialog-title{font-size:clamp(48px,8vw,96px);margin:0;letter-spacing:1px;text-shadow:0 6px 20px rgba(0,0,0,.8)}.start-dialog-button{background:#9eaf4c;color:#fff;border:2px solid rgb(170,176,68);padding:14px 44px;font-size:18px;font-weight:700;border-radius:24px;cursor:pointer;box-shadow:0 4px 12px #0006;transition:transform .12s ease,box-shadow .12s ease;min-width:220px}.start-dialog-button:hover{transform:translateY(-1px);box-shadow:0 6px 16px #00000080}.start-dialog-button:active{transform:translateY(0);box-shadow:none}.start-dialog-button:disabled{background:linear-gradient(#9da7b0,#6f7a84);border-color:#88929b;color:#e6e6e6;cursor:not-allowed;opacity:.8;box-shadow:none;transform:none}.settings-dialog{width:720px;max-width:92%}.settings-dialog-content{display:flex;flex-direction:column;gap:18px;min-height:360px}.settings-dialog-title{margin:0;text-align:center;font-size:28px}.settings-form{display:flex;flex-direction:column;gap:16px}.settings-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:#00000059}.settings-label{font-weight:600;font-size:16px}.settings-checkbox{width:20px;height:20px;accent-color:rgb(170,176,68)}.settings-select{min-width:180px;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.35);background:#0009;color:#fff;font-size:15px}.settings-range{display:flex;align-items:center;gap:12px;min-width:220px}.settings-range input[type=range]{flex:1}.settings-range-value{min-width:28px;text-align:right;font-weight:600}.settings-range-value.is-disabled{opacity:.5}.settings-dialog-footer{margin-top:8px}.hq-title{margin:0 0 12px;text-align:center;font-size:22px}.hq-top{display:flex;gap:16px;align-items:center;margin-bottom:16px}.hq-flag{width:96px;height:auto;image-rendering:pixelated;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}.hq-info{flex:1;border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:12px}.hq-placeholder{font-size:14px;line-height:1.4;opacity:.9;padding:10px 0}.hq-unit-list{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px}.hq-unit-item{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:#00000059}.hq-unit-item--active{border-color:#ffffffb3;box-shadow:0 0 0 2px #ffffff26}.hq-unit-item:hover{border-color:#ffffff80}.hq-unit-name{font-weight:600}.hq-unit-price{font-variant-numeric:tabular-nums;opacity:.9}.hq-preview{display:flex;flex-direction:column;gap:12px;align-items:center;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:#00000059}.hq-preview-image{width:140px;height:auto;image-rendering:pixelated;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}.hq-preview-stats{width:100%}.about-dialog{width:860px;max-width:94%;max-height:92vh}.about-dialog-content{display:flex;flex-direction:column;gap:12px;max-height:82vh;overflow-y:auto}.about-title{margin:0;text-align:center;font-size:34px}.about-subtitle{margin:0;text-align:center;font-size:17px;opacity:.92}.about-meta{margin:0;text-align:center;font-weight:600}.about-section{border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:12px 14px;background:#00000059}.about-section-title{margin:0 0 8px;font-size:18px}.about-text{margin:0 0 6px;line-height:1.45}.about-list{margin:0;padding-left:18px}.about-list-item{margin-bottom:4px;line-height:1.35}.about-link-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}.about-link-label{font-weight:600}.about-link{color:#d4f4ff;text-decoration:underline}