.global-toolbar { position:absolute; left:12px; bottom:12px; z-index:6; padding:8px; width:310px; max-width:calc(100% - 24px); border:1px solid #6c8097; border-radius:10px; color:#eaf2fa; background:#101b29f2; box-shadow:0 5px 20px #0005; font:12px system-ui; }
.global-toolbar header { display:flex; justify-content:space-between; gap:8px; margin:0 2px 7px; font-size:9px; letter-spacing:.7px; color:#aac2d5; }
.global-toolbar header small { font-size:9px; letter-spacing:0; }
.global-toolbar nav { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.global-toolbar button { position:relative; display:grid; justify-items:center; gap:2px; padding:6px 3px; border:1px solid #638198; border-radius:6px; background:#203548; color:#d9efff; cursor:pointer; }
.global-toolbar button[data-global="meteor"] { color:#ffd0a1; background:#3e2b25; border-color:#a16e4b; }
.global-toolbar button[data-global="heroism"] { color:#ffe6a3; background:#393426; border-color:#92804b; }
.global-toolbar button:disabled { opacity:.48; cursor:default; }
.global-toolbar button.armed { outline:2px solid #fff1bb; outline-offset:1px; filter:brightness(1.3); }
.global-toolbar kbd { position:absolute; top:5px; left:6px; font:700 11px system-ui; }
.global-toolbar b { font-size:11px; }.global-toolbar button small { font-size:9px; opacity:.8; }.global-icon { font-size:24px; line-height:27px; }
.global-upgrades { position:absolute; left:12px; bottom:118px; z-index:8; width:355px; max-width:calc(100% - 24px); max-height:calc(100% - 140px); overflow:auto; padding:15px; border:1px solid #bea568; border-radius:10px; color:#eaf2fa; background:#101b29f7; box-shadow:0 8px 26px #0008; font:12px system-ui; }
.global-upgrades header { display:flex; align-items:center; justify-content:space-between; }.global-upgrades h3 { margin:3px 0 6px; font-size:20px; font-weight:600; }.global-upgrades header small { color:#d4b67d; font-size:9px; letter-spacing:1.5px; }
.global-upgrades p { font-size:11px; line-height:1.6; color:#b2c4d2; margin:5px 0 10px; }.global-upgrades article { display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid #344453; padding:11px 0; }.global-upgrades article p { margin:5px 0 0; }.global-upgrades article small { color:#a0b6c5; font-weight:400; }
.global-upgrades button { color:#ffe0a1; background:#453920; border:1px solid #a28a52; border-radius:5px; padding:8px; cursor:pointer; }.global-upgrades button strong { display:block; font-size:13px; margin-top:3px; }.global-upgrades button:disabled { opacity:.4; cursor:not-allowed; }.global-upgrades footer { color:#dfc28c; border-top:1px solid #344453; padding-top:10px; font-size:10px; }
.global-toolbar[hidden],.global-upgrades[hidden] { display:none; }
/* An armed click (a spell, Move, Attack) is the field's: the buttons standing on it let it through. */
#field.aiming ~ .bases-node-layer button, #field.unit-order-aim ~ .bases-node-layer button,
#field.aiming ~ .amass button, #field.unit-order-aim ~ .amass button,
#field.aiming ~ .rbadges .rbadge, #field.unit-order-aim ~ .rbadges .rbadge { pointer-events:none; }
#stage .unit-selection-bar { bottom:145px; } #stage .bases-eco { bottom:117px; }
#stage:not(.bases-map) .fieldctl { bottom:128px; }
#stage:not(.bases-map) #draft.live { bottom:calc(140px + var(--field-controls-height, 50px)); max-height:calc(100% - 150px - var(--field-controls-height, 50px)); }
#stage:not(.bases-map) .unit-selection-bar { bottom:calc(140px + var(--field-controls-height, 50px)); }
@media (max-width:780px) { .global-toolbar { left:5px; bottom:6px; width:285px; } .global-upgrades { left:5px; bottom:113px; width:330px; } #stage .unit-selection-bar { left:5px; bottom:143px; } #stage .bases-eco { left:5px; bottom:112px; } }
@media (pointer:coarse) { .global-upgrades button { min-height:44px; } }