/* ============================================================================
   THE SPAIN MAP — Gibraltar · Costa del Sol
   ========================================================================== */
#spainmap{
  position:absolute; inset:0; z-index:150; overflow:hidden;
  background:#070509;
  opacity:0; transform:scale(1.02); transition:opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
#spainmap.show{ opacity:1; transform:scale(1); }
#spainmap.out{ opacity:0; transition:opacity .4s ease; }

#sp-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
#sp-canvas:active{ cursor:grabbing; }

.sp-grain{ position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 140px 24px rgba(0,0,0,0.5); }

.sp-top{ position:absolute; top:0; left:0; right:0; padding:calc(14px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-right,0px)) 0 calc(14px + env(safe-area-inset-left,0px));
  display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sp-back{ pointer-events:auto; padding:8px 14px 8px 11px; border-radius:99px; cursor:pointer;
  font-family:var(--font-mono,monospace); font-size:11px; letter-spacing:0.04em; font-weight:600;
  color:rgba(255,255,255,0.85); background:rgba(12,9,19,0.6); border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(5px); }
.sp-back:active{ color:#fff; background:rgba(20,15,30,0.85); }
.sp-chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:99px; white-space:nowrap;
  font-family:var(--font-mono,monospace); font-size:9px; letter-spacing:0.14em; font-weight:700; color:#fff;
  background:rgba(212,176,98,0.14); border:1px solid rgba(212,176,98,0.4); backdrop-filter:blur(5px); }
.sp-chip-dot{ width:7px; height:7px; border-radius:50%; background:#D4B062; box-shadow:0 0 10px #D4B062; }

.sp-hint{ position:absolute; left:0; right:0; bottom:22px; text-align:center; pointer-events:none;
  font-family:var(--font-mono,monospace); font-size:10px; letter-spacing:0.06em; color:rgba(255,255,255,0.55);
  text-shadow:0 2px 8px rgba(0,0,0,0.7); }
.sp-hint b{ color:#D4B062; font-weight:700; }
.sp-hint b:last-of-type{ color:#22D3EE; }

/* zoom / view controls — top-left, matching the UK map control language */
/* ===== map controls — burger fan (+/− slide right · home/tour/build slide down) ===== */
.sp-ctrl{ position:absolute; left:calc(14px + env(safe-area-inset-left,0px)); top:calc(14px + env(safe-area-inset-top,0px)); z-index:10; width:42px; height:42px; }
#spainmap.building .sp-ctrl{ left:50%; right:auto; bottom:auto; top:14px; width:auto; height:42px; transform:translateX(-50%); }
.sp-burger{ position:absolute; left:0; top:0; width:42px; height:42px; border-radius:var(--r-md); cursor:pointer; pointer-events:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:0;
  color:var(--ink-2); background:rgba(29,25,41,0.6); border:1px solid var(--hairline-2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background .16s, border-color .16s, color .16s; }
#spainmap.building .sp-burger{ display:none; }
.sp-burger span{ display:block; width:16px; height:2px; border-radius:2px; background:var(--ink-2); transition:transform .26s var(--ease-out,ease), opacity .2s, background .16s; }
.sp-ctrl.open .sp-burger{ color:var(--ultraviolet); background:rgba(192,132,252,0.14); border-color:rgba(192,132,252,0.5); box-shadow:0 0 12px -4px var(--ultraviolet); }
.sp-ctrl.open .sp-burger span{ background:var(--ultraviolet); }
.sp-ctrl.open .sp-burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.sp-ctrl.open .sp-burger span:nth-child(2){ opacity:0; }
.sp-ctrl.open .sp-burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.sp-ctrl-up{ position:absolute; left:0; top:49px; display:flex; flex-direction:column; gap:7px;
  opacity:0; pointer-events:none; transform:translateY(-16px) scale(0.85); transform-origin:top center;
  transition:transform .26s var(--ease-out,ease), opacity .2s; }
.sp-ctrl-right{ position:absolute; left:49px; top:0; display:flex; flex-direction:row; gap:7px;
  opacity:0; pointer-events:none; transform:translateX(-16px) scale(0.85); transform-origin:left center;
  transition:transform .26s var(--ease-out,ease), opacity .2s; }
.sp-ctrl-buildrail{ display:none; }
#spainmap.building .sp-ctrl-up,
#spainmap.building .sp-ctrl-right{ display:none; }
#spainmap.building .sp-ctrl-buildrail{
  display:flex; flex-direction:row; gap:8px;
  opacity:1; pointer-events:auto; transform:none; transform-origin:top center;
}
.sp-ctrl.open .sp-ctrl-up,
.sp-ctrl.open .sp-ctrl-right{ opacity:1; pointer-events:auto; transform:none; }

.sp-zb{ width:42px; height:42px; border-radius:13px; cursor:pointer; pointer-events:auto;
  display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1;
  color:rgba(255,255,255,0.82); background:rgba(20,17,29,0.62); border:1px solid rgba(255,255,255,0.16);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background .14s, color .14s, border-color .14s; }
#spainmap.building .sp-zb{ width:42px; height:42px; border-radius:13px; font-size:20px; background:rgba(20,17,29,0.74); }
#spainmap.building .sp-zb.sm{ font-size:16px; }
.sp-zb.sm{ font-size:16px; }
.sp-zb:active{ color:#fff; background:rgba(192,132,252,0.16); border-color:rgba(192,132,252,0.5); }
.sp-zb.bld{ color:#E0B23E; border-color:rgba(224,178,62,0.4); }
.sp-zb.bld.active{ color:#0a0710; background:#E0B23E; border-color:#E0B23E; }
#spainmap.building .sp-zb.bld.active{ color:#0a0710; background:#E0B23E; border-color:#E0B23E; }
.sp-zb.fly{ color:#22D3EE; border-color:rgba(34,211,238,0.4); }
.sp-zb.fly:active{ color:#0a0710; background:#22D3EE; border-color:#22D3EE; }

/* ============================================================================
   BUILD MODE — wallet · palette dock · node editor · toast
   ========================================================================== */
#spainmap.building .sp-hint{ display:none; }
#spainmap.building #sp-canvas{ cursor:default; }

.sp-xp-wrap{ position:absolute; top:58px; left:50%; right:auto; z-index:8; display:none; flex-direction:column; align-items:center; gap:3px; pointer-events:none; transform:translateX(-50%); }
#spainmap.building .sp-xp-wrap{ display:flex; }
.sp-xp{ display:inline-flex; align-items:center; gap:9px;
  padding:4px 9px; border-radius:99px; font-family:var(--font-mono,monospace); font-weight:700; color:#fff;
  background:rgba(16,13,24,0.8); border:1px solid rgba(255,255,255,0.16); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.sp-xp-grp{ display:inline-flex; align-items:center; gap:5px; }
.sp-xp-grp.pwr{ padding-left:9px; border-left:1px solid rgba(255,255,255,0.14); }
.sp-xp-ic{ color:#E0B23E; }
.sp-xp-grp.pwr .sp-xp-ic{ color:#7CE0FF; }
.sp-xp b{ font-size:10.5px; letter-spacing:0.01em; }
.sp-xp-l{ font-size:6.8px; letter-spacing:0.11em; color:rgba(255,255,255,0.52); }
.sp-xp-rate{ font-size:8.5px; font-weight:700; color:#2FE0A1; letter-spacing:0.01em; text-align:center; padding-left:0; text-shadow:0 1px 4px rgba(0,0,0,0.85); }
.sp-xp-rate:empty{ display:none; }
.sp-xp[hidden], .sp-fab[hidden]{ display:none; }

.sp-build{ position:absolute; left:0; right:0; bottom:0; z-index:9;
  padding:16px 16px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(8,6,14,0) 0%, rgba(8,6,14,0.88) 28%, rgba(8,6,14,0.97) 100%);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.sp-build-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.sp-build-hb{ display:flex; align-items:center; gap:8px; }
.sp-build-min{ width:34px; height:30px; border-radius:99px; cursor:pointer; font-size:0; line-height:0;
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.7);
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16); transition:color .14s; }
.sp-build-min-ic{ width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transform-origin:50% 50%; transition:transform .16s; }
.sp-build-min:active{ color:#fff; }
.sp-build-reset{ padding:7px 14px; border-radius:99px; cursor:pointer; color:rgba(255,255,255,0.72);
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16);
  font-family:var(--font-mono,monospace); font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
.sp-build-reset:active{ color:#fff; background:rgba(255,255,255,0.12); }
.sp-build-t{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono,monospace);
  font-size:11px; font-weight:700; letter-spacing:0.16em; color:#E0B23E; }
.sp-build-dot{ width:7px; height:7px; border-radius:50%; background:#E0B23E; box-shadow:0 0 10px #E0B23E; animation:spbpulse 1.6s ease-in-out infinite; }
@keyframes spbpulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }
.sp-build-done{ padding:7px 17px; border-radius:99px; cursor:pointer; border:none;
  font-family:var(--font-mono,monospace); font-size:11px; font-weight:700; letter-spacing:0.05em; color:#0a0710; background:#E0B23E; }
.sp-build-sub{ font-family:var(--font-mono,monospace); font-size:10px; letter-spacing:0.02em; color:rgba(255,255,255,0.6); margin-bottom:12px; line-height:1.5; }
.sp-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.sp-card{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:14px; cursor:pointer; text-align:left;
  background:rgba(22,18,32,0.72); border:1px solid rgba(255,255,255,0.12); transition:transform .12s, border-color .12s, background .12s; }
.sp-card:active{ transform:scale(0.97); }
.sp-card.armed{ border-color:#E0B23E; background:rgba(224,178,62,0.14); box-shadow:0 0 0 1px #E0B23E inset; }
.sp-card.cant{ opacity:0.4; }
.sp-card-ic{ font-size:22px; line-height:1; width:24px; text-align:center; flex:0 0 auto; }
.sp-card-tx{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.sp-card-tx b{ font-size:12.5px; font-weight:700; color:#fff; }
.sp-card-tx i{ font-size:10px; font-style:normal; color:rgba(255,255,255,0.5); }
.sp-card-c{ font-family:var(--font-mono,monospace); font-size:10px; font-weight:700; color:#E0B23E; white-space:nowrap; }
.sp-fin-note{ margin-top:12px; padding:10px 12px; border-radius:12px; font-size:10px; line-height:1.55; color:rgba(255,255,255,0.62);
  background:rgba(224,178,62,0.07); border:1px solid rgba(224,178,62,0.22); }
.sp-fin-note b{ color:#E0B23E; font-weight:700; }

/* collapsed dock — header only, near-full map visibility */
.sp-build-body{ overflow:hidden; transition:max-height .26s var(--ease-out,ease), opacity .2s, margin .2s; max-height:520px; opacity:1; }
.sp-build.collapsed{ background:linear-gradient(180deg, rgba(8,6,14,0) 0%, rgba(8,6,14,0.7) 70%, rgba(8,6,14,0.88) 100%); }
.sp-build.collapsed .sp-build-body{ max-height:0; opacity:0; margin-top:-6px; pointer-events:none; }
.sp-build.collapsed .sp-build-min-ic{ transform:rotate(225deg); }

/* floating launcher to reopen the structures dock */
.sp-fab{ position:absolute; right:14px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:9;
  display:inline-flex; align-items:center; gap:8px; padding:11px 18px 11px 14px; border-radius:99px; cursor:pointer;
  border:none; color:#0a0710; background:#E0B23E; box-shadow:0 12px 30px rgba(0,0,0,0.5), 0 0 18px rgba(224,178,62,0.4);
  font-family:var(--font-mono,monospace); font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
.sp-fab:active{ transform:scale(0.96); }
.sp-fab-ic{ font-size:16px; }

/* hide the bottom menu while building, for full map control */
.tabbar.build-hidden{ opacity:0; pointer-events:none; transform:translateY(160%);
  transition:opacity var(--dur-base,.22s), transform var(--dur-slow,.42s) var(--ease-out,ease); }

.sp-edit{ position:absolute; z-index:10; width:230px; padding:13px; border-radius:16px;
  background:rgba(16,13,24,0.96); border:1px solid rgba(255,255,255,0.16); box-shadow:0 18px 48px rgba(0,0,0,0.6);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.sp-edit-h{ display:flex; align-items:center; gap:7px; font-size:15px; margin-bottom:10px; }
.sp-edit-h b{ font-size:14px; font-weight:700; color:#fff; }
.sp-edit-fleet{ display:flex; align-items:center; justify-content:space-between; padding:9px 11px; border-radius:11px;
  background:rgba(255,255,255,0.05); margin-bottom:9px; }
.sp-edit-fleet span{ font-size:10px; letter-spacing:0.04em; color:rgba(255,255,255,0.5); }
.sp-edit-fleet b{ font-size:12px; font-weight:700; color:#fff; }
.sp-edit-note{ font-size:10.5px; line-height:1.55; color:rgba(255,255,255,0.55); margin-bottom:10px; }
.sp-edit-link{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 11px; border-radius:11px;
  background:rgba(255,255,255,0.05); margin-bottom:9px; }
.sp-edit-link-l{ font-size:10px; letter-spacing:0.04em; color:rgba(255,255,255,0.5); }
.sp-edit-link-n{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:#fff; text-align:right; }
.sp-edit-link-n i{ width:8px; height:8px; border-radius:50%; flex:none; box-shadow:0 0 8px currentColor; }
.sp-edit-buy{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; border-radius:11px; cursor:pointer;
  border:none; background:#E0B23E; color:#0a0710; font-size:12px; font-weight:700; margin-bottom:9px; }
.sp-edit-buy i{ font-style:normal; font-family:var(--font-mono,monospace); font-size:11px; opacity:0.8; }
.sp-edit-row{ display:flex; gap:8px; }
.sp-edit-rm,.sp-edit-x{ flex:1; padding:9px; border-radius:11px; cursor:pointer; font-size:11px; font-weight:700;
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14); color:rgba(255,255,255,0.8); }
.sp-edit-rm{ color:#ff7a7a; border-color:rgba(255,122,122,0.3); background:rgba(255,122,122,0.08); }

.sp-toast{ position:absolute; left:50%; top:14px; transform:translate(-50%,-14px); z-index:11;
  padding:9px 16px; border-radius:99px; font-size:12px; font-weight:600; color:#fff; white-space:nowrap;
  background:rgba(16,13,24,0.94); border:1px solid rgba(255,255,255,0.18); box-shadow:0 10px 30px rgba(0,0,0,0.5);
  opacity:0; pointer-events:none; transition:opacity .22s, transform .22s; }
.sp-toast.show{ opacity:1; transform:translate(-50%,0); }

/* ============================================================================
   FLEET SHOP (unit editor) + tier badges + purchase confirm
   ========================================================================== */
.sp-edit.shop{ left:50%; top:50%; transform:translate(-50%,-50%); width:min(390px, calc(100vw - 28px));
  max-height:calc(100vh - 200px); display:flex; flex-direction:column; padding:15px;
  overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sp-edit.shop .sp-shop-list{ overflow:visible; }

/* unit drawer — performance grid + combat scores + workforce */
.sp-perf{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:10px; }
.sp-perf-c{ display:flex; flex-direction:column; gap:3px; padding:9px 11px; border-radius:11px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09); }
.sp-perf-k{ font-size:9.5px; letter-spacing:0.05em; color:rgba(255,255,255,0.5); text-transform:uppercase; }
.sp-perf-v{ font-family:var(--font-mono,monospace); font-size:15px; font-weight:700; color:#fff; }
.sp-perf-v.gold{ color:#E0B23E; }
.sp-perf-v.pwr{ color:#7CE0FF; }
.sp-combat{ display:grid; grid-template-columns:1fr; gap:7px; margin:8px 0 11px; }
.sp-cbt{ padding:9px 11px; border-radius:11px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); }
.sp-cbt-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.sp-cbt-top span{ font-size:10.5px; font-weight:700; color:rgba(255,255,255,0.7); }
.sp-cbt-top b{ font-family:var(--font-mono,monospace); font-size:14px; font-weight:700; color:#fff; }
.sp-cbt-bar{ height:5px; border-radius:99px; background:rgba(255,255,255,0.1); overflow:hidden; }
.sp-cbt-bar i{ display:block; height:100%; border-radius:99px; }
.sp-cbt.atk .sp-cbt-bar i{ background:linear-gradient(90deg,#FF8A3D,#FF4D5E); }
.sp-cbt.atk b{ color:#FF8A6B; }
.sp-cbt.def .sp-cbt-bar i{ background:linear-gradient(90deg,#56C2FF,#2FE0A1); }
.sp-cbt.def b{ color:#7FD8FF; }
.sp-cbt-hires{ display:flex; flex-direction:column; gap:5px; margin-top:9px; }
.sp-cbt-hire{ display:flex; align-items:center; gap:7px; font-size:10.5px; font-weight:600; color:rgba(255,255,255,0.78);
  padding:5px 9px; border-radius:9px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09); }
.sp-cbt-hire b{ margin-left:auto; font-family:var(--font-mono,monospace); font-size:11px; }
.sp-cbt.atk .sp-cbt-hire b{ color:#FF8A6B; }
.sp-cbt.def .sp-cbt-hire b{ color:#7FD8FF; }
.sp-stat.atk{ color:#FF8A6B; background:rgba(255,120,80,0.12); }
.sp-stat.def{ color:#7FD8FF; background:rgba(86,194,255,0.12); }
/* workforce rows */
.sp-wk{ display:flex; align-items:stretch; gap:11px; padding:10px; border-radius:14px; cursor:pointer;
  background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.1);
  transition:transform .12s, border-color .14s, background .14s; }
.sp-wk:active{ transform:scale(0.985); }
.sp-wk.cant{ opacity:0.5; }
.sp-wk-ic{ width:48px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px;
  background:radial-gradient(circle at 50% 45%, rgba(224,178,62,0.18), rgba(0,0,0,0.25)); color:#E0B23E; }
.sp-wk-mid{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; justify-content:center; }
.sp-wk-h{ display:flex; align-items:center; gap:7px; }
.sp-wk-h b{ font-size:13px; font-weight:700; color:#fff; }
.sp-wk-own{ font-family:var(--font-mono,monospace); font-size:9px; font-weight:700; color:rgba(255,255,255,0.7);
  padding:1px 6px; border-radius:99px; background:rgba(255,255,255,0.1); }
.sp-wk-spec{ font-size:10px; line-height:1.4; color:rgba(255,255,255,0.55); }
.sp-wk-stats{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.sp-wk-buy{ flex:none; width:78px; border-radius:11px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:#E0B23E; color:#0a0710; }
.sp-wk.cant .sp-wk-buy{ background:rgba(255,255,255,0.12); color:rgba(255,255,255,0.5); }
.sp-wk-buy b{ font-family:var(--font-mono,monospace); font-size:11px; font-weight:700; }
.sp-wk-buy span{ font-size:8px; font-weight:700; letter-spacing:0.14em; opacity:0.7; }
.sp-edit[hidden]{ display:none !important; }
.sp-edit-xs{ margin-left:auto; width:40px; height:40px; border-radius:11px; cursor:pointer; font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.85); background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.18); flex:none; }
.sp-edit-xs:active{ background:rgba(255,255,255,0.18); }
.sp-edit-bd{ position:absolute; inset:0; z-index:9; background:rgba(6,4,12,0.55);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); }
.sp-edit-bd[hidden]{ display:none; }
.sp-edit.shop .sp-edit-h{ align-items:center; }
.sp-earn{ color:#2FE0A1 !important; font-family:var(--font-mono,monospace); font-size:11px !important; }
.sp-shop-lbl{ font-family:var(--font-mono,monospace); font-size:9px; font-weight:700; letter-spacing:0.16em;
  color:rgba(255,255,255,0.4); margin:4px 2px 8px; }
.sp-tabs{ display:flex; gap:6px; padding:4px; border-radius:12px; margin:4px 0 9px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.09); }
.sp-tab{ flex:1; padding:9px; border-radius:9px; cursor:pointer; border:none; background:transparent;
  font-size:11.5px; font-weight:700; letter-spacing:0.02em; color:rgba(255,255,255,0.6);
  font-family:var(--font-mono,monospace); transition:background .14s, color .14s; }
.sp-tab.on{ background:rgba(224,178,62,0.16); color:#E0B23E; box-shadow:0 0 0 1px rgba(224,178,62,0.3) inset; }
.sp-shop-list{ display:flex; flex-direction:column; gap:9px; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-right:2px; }
.sp-shop-list[hidden]{ display:none; }
.sp-shop{ display:flex; align-items:stretch; gap:11px; padding:10px; border-radius:14px; cursor:pointer;
  background:rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.1);
  transition:transform .12s, border-color .14s, background .14s; }
.sp-shop:active{ transform:scale(0.985); }
.sp-shop.cant{ opacity:0.5; }
.sp-shop.leg{ background:linear-gradient(135deg, rgba(255,200,87,0.12), rgba(255,200,87,0.03));
  border-color:rgba(255,200,87,0.45); box-shadow:0 0 0 1px rgba(255,200,87,0.12) inset, 0 8px 24px rgba(255,180,40,0.12); }
.sp-shop-ic{ width:66px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--vc) 22%, transparent), rgba(0,0,0,0.25)); }
.sp-shop-ic canvas{ width:66px; height:40px; }
.sp-shop-mid{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; justify-content:center; }
.sp-shop-h{ display:flex; align-items:center; gap:7px; }
.sp-shop-h b{ font-size:13px; font-weight:700; color:#fff; }
.sp-tier{ font-family:var(--font-mono,monospace); font-size:8px; font-weight:700; letter-spacing:0.1em;
  padding:2px 6px; border-radius:99px; border:1px solid currentColor; opacity:0.95; }
.sp-shop-spec{ font-size:10px; line-height:1.4; color:rgba(255,255,255,0.55); }
.sp-shop-stats{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.sp-stat{ font-family:var(--font-mono,monospace); font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:99px; }
.sp-stat.earn{ color:#2FE0A1; background:rgba(47,224,161,0.12); }
.sp-stat.pwr{ color:#7CE0FF; background:rgba(124,224,255,0.12); }
.sp-stat.own{ color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.08); }
.sp-shop-buy{ flex:none; width:78px; border-radius:11px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:#E0B23E; color:#0a0710; }
.sp-shop.leg .sp-shop-buy{ background:linear-gradient(135deg,#FFD877,#F5A623); }
.sp-shop.cant .sp-shop-buy{ background:rgba(255,255,255,0.12); color:rgba(255,255,255,0.5); }
.sp-shop-buy b{ font-family:var(--font-mono,monospace); font-size:11px; font-weight:700; }
.sp-shop-buy span{ font-size:8px; font-weight:700; letter-spacing:0.14em; opacity:0.7; }
.sp-edit.shop .sp-edit-row{ margin-top:11px; }
.sp-edit.shop .sp-edit-rm{ flex:1; }

/* purchase confirmation overlay */
.sp-confirm{ position:absolute; inset:0; z-index:13; display:flex; align-items:center; justify-content:center;
  background:rgba(6,4,12,0.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .2s; padding:20px; }
.sp-confirm.show{ opacity:1; }
.sp-confirm[hidden]{ display:none; }
.sp-cf-card{ width:min(330px, calc(100vw - 40px)); padding:18px; border-radius:18px;
  background:rgba(18,15,26,0.98); border:1px solid color-mix(in srgb, var(--ac) 40%, rgba(255,255,255,0.16));
  box-shadow:0 24px 60px rgba(0,0,0,0.6), 0 0 30px color-mix(in srgb, var(--ac) 22%, transparent);
  transform:translateY(10px) scale(0.97); transition:transform .22s var(--ease-out,ease); }
.sp-confirm.show .sp-cf-card{ transform:none; }
.sp-cf-top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.sp-cf-ic{ font-size:22px; color:var(--ac); }
.sp-cf-ttl{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sp-cf-ttl b{ font-size:16px; font-weight:700; color:#fff; }
.sp-cf-veh{ height:72px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:12px;
  background:radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--vc) 20%, transparent), rgba(0,0,0,0.3)); }
.sp-cf-body{ font-size:12px; line-height:1.55; color:rgba(255,255,255,0.7); margin-bottom:13px; }
.sp-cf-body b{ color:#fff; }
.sp-cf-cost{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; }
.sp-cf-cost span{ font-size:11px; color:rgba(255,255,255,0.55); }
.sp-cf-cost b{ font-family:var(--font-mono,monospace); font-size:14px; font-weight:700; color:#E0B23E; }
.sp-cf-cost.bal{ border-top:1px solid rgba(255,255,255,0.1); padding-top:9px; }
.sp-cf-cost.bal b{ color:rgba(255,255,255,0.8); font-size:12px; }
.sp-cf-row{ display:flex; gap:9px; margin-top:13px; }
.sp-cf-no{ flex:0 0 38%; padding:13px; border-radius:12px; cursor:pointer; font-size:12px; font-weight:700;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); color:rgba(255,255,255,0.85); }
.sp-cf-yes{ flex:1; padding:13px; border-radius:12px; cursor:pointer; border:none; font-weight:700; font-size:12px;
  background:var(--ac); color:#0a0710; font-family:var(--font-mono,monospace); }

/* ----- unit-node rename row ----- */
.sp-edit-name{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.sp-name-in{ flex:1; min-width:0; padding:9px 11px; border-radius:11px; font-size:12.5px; font-weight:600; color:#fff;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); outline:none;
  font-family:var(--font-sans,inherit); transition:border-color .14s, background .14s; }
.sp-name-in::placeholder{ color:rgba(255,255,255,0.38); font-weight:500; }
.sp-name-in:focus{ border-color:rgba(192,132,252,0.7); background:rgba(192,132,252,0.08); }
.sp-name-rs{ flex:none; width:38px; height:38px; border-radius:11px; cursor:pointer; font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.7);
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16); }
.sp-name-rs:active{ color:#fff; background:rgba(255,255,255,0.14); }

/* ----- structure storage (in the build dock) ----- */
.sp-store{ margin-top:12px; padding:11px 12px; border-radius:13px;
  background:rgba(192,132,252,0.07); border:1px solid rgba(192,132,252,0.22); }
.sp-store[hidden]{ display:none; }
.sp-store-h{ display:flex; align-items:center; gap:8px; margin-bottom:9px;
  font-family:var(--font-mono,monospace); font-size:10px; font-weight:700; letter-spacing:0.14em; color:#C9B6F2; }
.sp-store-dot{ width:7px; height:7px; border-radius:50%; background:#C084FC; box-shadow:0 0 9px #C084FC; }
.sp-store-list{ display:flex; flex-direction:column; gap:7px; }
.sp-store-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:11px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); }
.sp-store-ic{ font-size:18px; line-height:1; width:22px; text-align:center; flex:none; }
.sp-store-tx{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.sp-store-tx b{ font-size:12px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sp-store-tx i{ font-size:9.5px; font-style:normal; color:rgba(255,255,255,0.5); }
.sp-store-place{ flex:none; padding:7px 13px; border-radius:99px; cursor:pointer; border:none;
  font-family:var(--font-mono,monospace); font-size:9.5px; font-weight:700; letter-spacing:0.1em;
  color:#0a0710; background:#C084FC; }
.sp-store-place:active{ transform:scale(0.96); }

/* "Store structure" is non-destructive — neutral/violet, not the old red Remove */
.sp-edit-rm{ color:#C9B6F2 !important; border-color:rgba(192,132,252,0.32) !important; background:rgba(192,132,252,0.10) !important; }

/* ----- oil-rig supply-capacity upgrade (unit editor) ----- */
.sp-rig-pips{ display:inline-flex; gap:4px; align-items:center; }
.sp-rig-pip{ width:9px; height:9px; border-radius:3px; background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.2); }
.sp-rig-pip.on{ background:#F5B544; border-color:#F5B544; box-shadow:0 0 7px rgba(245,181,68,0.6); }
.sp-rig-ws{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 9px; }
.sp-rig-w{ display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:99px;
  font-size:11px; font-weight:600; color:rgba(255,255,255,0.85);
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); }
.sp-rig-w i{ width:7px; height:7px; border-radius:50%; flex:none; box-shadow:0 0 7px currentColor; }
.sp-rig-up{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 13px;
  border-radius:12px; cursor:pointer; margin-bottom:9px; border:1px solid rgba(245,181,68,0.45);
  background:linear-gradient(135deg, rgba(245,181,68,0.16), rgba(245,181,68,0.05)); color:#F5B544; }
.sp-rig-up span{ font-size:12px; font-weight:700; }
.sp-rig-up b{ font-family:var(--font-mono,monospace); font-size:12px; font-weight:700; }
.sp-rig-up:active{ transform:scale(0.98); }
.sp-rig-up.cant{ opacity:0.45; }
.sp-rig-max{ padding:9px 12px; border-radius:11px; margin-bottom:9px; font-size:11px; font-weight:600; color:#F5C97A;
  background:rgba(245,181,68,0.08); border:1px solid rgba(245,181,68,0.22); }