/* 北辰守衛戰's interface in the game (js/base-defense/planning.js): the sockets' tags over the park, the
   card beside the socket the mech stands at, and the wave's meter, radar and actions. */
#defense-status[hidden],#defense-tags[hidden],#defense-card[hidden],.defense-tag[hidden]{display:none}
.base-defense-active #pause-btn{z-index:35}
.base-defense-active .match-status,.base-defense-active .hud-clock,.base-defense-active .hud-bill{display:none!important}
.defense-error{color:#f2c181}

/* the tags: one over each socket, the core's and the recovery bay's */
#defense-tags{position:absolute;inset:0;z-index:11;pointer-events:none;overflow:hidden}
.defense-tag{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;padding:2px 6px;border-radius:4px;background:#112631c8;border:1px solid #54777c;color:#dceae7;font-size:11px;line-height:1.3;white-space:nowrap;will-change:transform}
.defense-tag b{font:700 10px monospace;color:#9fd8d0}
.defense-tag.empty span{color:#8fb2ad;font-weight:700}
.defense-tag.built{flex-wrap:wrap;max-width:150px;row-gap:2px}
.defense-tag em{flex-basis:100%;height:3px;background:#442e30;border-radius:2px;overflow:hidden}
.defense-tag em i{display:block;height:100%;background:#6ad6b2}
.defense-tag .pip{display:inline-block;width:5px;height:5px;margin-left:3px;background:#f1c780;transform:rotate(45deg)}
.defense-tag.near{border-color:#f1c780;background:#1d3b45e8}
.defense-tag.drop{border-color:#f1c780;border-style:dashed}
.defense-tag.unpowered{border-color:#ef7459}.defense-tag.unpowered b{color:#ef7459}
.defense-tag.carried{opacity:.5}
.defense-tag.core{background:none;border:none;font-size:12px;text-shadow:0 1px 2px #000c}.defense-tag.core b{font-size:16px;color:#77e3dc}
.defense-tag.recovery{background:none;border-style:dashed}

/* the card beside its socket */
#defense-card{position:absolute;left:0;top:0;z-index:30;width:min(330px,calc(100vw - 16px));max-height:calc(100% - 78px);display:flex;flex-direction:column;background:linear-gradient(135deg,#152c36f2,#101c2af2);border:1px solid #6b9c9b;border-radius:9px;box-shadow:0 14px 40px #0008;color:#e5ede8;text-align:left;pointer-events:auto;font-size:13px}
#defense-card header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;padding:9px 12px 7px;border-bottom:1px solid #688e913d}
#defense-card header b{font-size:15px;letter-spacing:.04em}
#defense-card .defense-bank{color:#f1c780;font-size:12px;white-space:nowrap}
#defense-card header .hp{flex-basis:100%;height:4px;background:#442e30;border-radius:2px;overflow:hidden}#defense-card header .hp i{display:block;height:100%;background:#6ad6b2}
#defense-card.prompt{width:auto;max-width:min(330px,calc(100vw - 16px))}
#defense-card.prompt header{border:none;padding-bottom:4px}
#defense-card button{font:inherit;color:#dceae7;border:1px solid #54777c;border-radius:5px;background:#243e49;cursor:pointer;min-height:32px}
#defense-card button:focus-visible{outline:2px solid #a3d7d0;outline-offset:1px}
.defense-prompt{margin:2px 10px 10px;padding:6px 12px;font-size:14px!important;font-weight:700;color:#f5c575!important;border-color:#f5c575!important;background:#2c3f3a!important}
#defense-card kbd,#defense-status kbd{display:inline-block;min-width:1.6em;padding:0 5px;margin-right:2px;border:1px solid currentColor;border-radius:4px;font:700 11px/1.5 inherit;text-align:center}
.defense-note{margin:2px 12px 10px;color:#9bb8b8;font-size:12px}
#defense-card .rows{display:flex;flex-direction:column;gap:3px;padding:7px 8px;overflow:auto;min-height:0}
#defense-card .row{display:flex;align-items:center;gap:8px;width:100%;padding:5px 9px;text-align:left;background:#1b323c;border-color:#35565c}
#defense-card .row .n{width:10px;color:#7f9ea0;font:700 10px monospace}
#defense-card .row .label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#defense-card .row .cost{color:#ecc88a;white-space:nowrap}
#defense-card .row .cycle{color:#a3d7d0;white-space:nowrap}
#defense-card .row.picked{background:#33555e;border-color:#f5c575;box-shadow:inset 3px 0 #f5c575}
#defense-card .row.off .label,#defense-card .row.off .cost{opacity:.48}
#defense-card .row.primary{background:#5c4a26;border-color:#ddb56e}#defense-card .row.primary .label{font-weight:700;color:#f5d79c}
#defense-card .row.primary.picked{background:#7a6130}
#defense-card .row.danger .label{color:#f2a18e}
#defense-card .detail{padding:2px 12px 4px;min-height:38px;border-top:1px solid #688e913d}
#defense-card .detail p{margin:5px 0;font-size:12px;line-height:1.45;color:#b9cfcc}#defense-card .detail .figures{color:#e9be82}
#defense-card footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 8px 7px 12px;color:#86a5a6}
#defense-card footer small{font-size:11px}
#defense-card header,#defense-card .detail,#defense-card footer{flex-shrink:0} /* (the rows scroll; the rest keeps its room) */
#defense-card .close{min-width:32px;padding:0 8px;margin-left:auto}

/* the wave: its meter, the radar, the actions */
#defense-status{position:absolute;inset:0;z-index:12;pointer-events:none;color:#e1eee7}
.defense-meter{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:min(460px,46%);padding:8px 14px;background:#112631e8;border:1px solid #76988c;border-radius:7px;font-size:12px}
.defense-meter strong,.defense-meter small{display:block}.defense-meter strong{font-size:15px;display:flex;justify-content:space-between;gap:10px}
.defense-meter .defense-bank{color:#f1c780;font-size:13px;font-weight:400;white-space:nowrap}
.core-track{height:6px;background:#442e30;margin:6px 0 3px}.core-track i{display:block;background:#6ad6b2;height:100%;transition:width .2s}
.defense-meter small{color:#b9cfcc;margin-top:3px;line-height:1.4}.defense-meter .forecast{color:#e9bd80}.defense-meter .tip{color:#9fd8d0}
.defense-radar{position:absolute;right:65px;top:12px;width:132px}
.defense-radar svg{display:block;width:100%;height:auto;overflow:visible}
.defense-radar svg>rect{fill:#31463fd8;stroke:#679387;stroke-width:3}
.defense-radar polyline{fill:none;stroke:#748e7e;stroke-width:20;opacity:.3}.defense-radar polyline.active{stroke:#e3bc75;opacity:.7}
.defense-radar .pin{fill:#172c34;stroke:#7fa9a5;stroke-width:2}.defense-radar .pin.built{fill:#6ad6b2;stroke:none}.defense-radar .pin.near{stroke:#f1c780;stroke-width:5}
.defense-radar .core{fill:#63c9c6}.defense-radar .pond{fill:#326d79}.defense-radar .enemy{fill:#ff664c}.defense-radar .player{fill:#afffff;stroke:#172b3b;stroke-width:3}
.defense-radar text{fill:#f1c780;font:700 34px sans-serif;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:#112631;stroke-width:6}
.defense-combat-actions{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;display:flex;gap:6px;pointer-events:auto;max-width:55%;flex-wrap:wrap;justify-content:center}
.defense-combat-actions button{font:inherit;font-size:13px;color:#dceae7;border:1px solid #54777c;border-radius:5px;background:#243e49e8;padding:7px 12px;cursor:pointer;min-height:34px;position:relative;overflow:hidden}
.defense-combat-actions button:focus-visible{outline:2px solid #a3d7d0;outline-offset:1px}
.defense-combat-actions button:disabled{opacity:.42;cursor:default}
.defense-combat-actions .ready{border-color:#f5c575;color:#f5c575}
.defense-combat-actions .primary{background:#ddb56e;color:#13262d;font-weight:700;font-size:15px;min-width:130px}
.defense-combat-actions .hold{position:absolute;left:0;bottom:0;height:4px;width:calc(var(--p)*100%);background:#13262d}
/* (touch: the actions at the top left, clear of both thumbs' controls) */
.base-defense-active:has(#touch:not([hidden])) .defense-combat-actions{bottom:auto;top:12px;left:12px;transform:none;max-width:28%;justify-content:flex-start}
@media(max-height:600px){
  .defense-meter{top:5px;padding:5px 9px;font-size:10px;width:300px;max-width:44%}.defense-meter strong{font-size:12px}.defense-meter .defense-bank{font-size:11px}
  .defense-radar{width:84px;right:52px;top:6px}
  .defense-combat-actions{bottom:9px}.defense-combat-actions button{font-size:11px;padding:5px 8px;min-height:30px}
  .base-defense-active:has(#touch:not([hidden])) .defense-combat-actions{top:6px;left:8px}
  #defense-card{font-size:12px;width:min(290px,calc(100vw - 16px));max-height:calc(100% - 60px)}#defense-card header{padding:6px 10px 5px}#defense-card header b{font-size:13px}
  #defense-card footer small{display:none}
  #defense-card .row{min-height:28px;padding:3px 8px}#defense-card .detail{min-height:0}#defense-card .detail p{margin:3px 0;font-size:11px}
}