/* ═══════════════════════════════════════════════════════════════════════
   TRUMP WARS · command bar sheet (package U2 of the "Fleet Command Console")
   #bar (#abil + .sep + #shop) and the card states, the card tooltip (#tip / #tipStem), the build / arm hint
   (#placing), the build cursor readout (.cur-ro) and the route legend (.route-lg). Markup comes from js/ui/bar.js.
   Ported from ui-lab/final/final.css 'U2 · COMMAND BAR', 'U2 · TOOLTIP', 'U2 · BUILD CURSOR READOUT', with the
   review fixes: tower capability tags are neutral with a domain glyph (dot = ground, triangle = air) so 'AIR'
   never has two colours; NEED n is amber, not hostile red; Sanctions shows one timer (the effect) while active;
   armed / ship-down states; the PLACING strip covers the tag row only; text floor max(9px, Xrem).
   The bar fits 7 tower + 5 ability cards at 1280x720: bar.js picks .d1 / .d2 (denser cards) when it must.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --route-new: #7dffd0; } /* route preview chevrons (ground = --gnd, air = --air) */

/* ═══ U2 · COMMAND BAR (#bar = #abil + #shop) ══════════════════════════════════ */
#bar { position: absolute; left: 50%; bottom: var(--gap); transform: translateX(calc(-50% + var(--bx, 0px))); display: flex; align-items: stretch; gap: var(--bgap); padding: .6rem .7rem; --cut: 1.1rem;
  --tw: 8rem; --aw: 6.6rem; --cg: .4rem; --bgap: 1.2rem; } /* 8rem: '▲ AIR HOMING' fits a full-size card */
#abil, #shop { display: flex; gap: var(--cg); position: relative; }
#bar .sep { flex: none; width: 1px; background: linear-gradient(var(--ln-3), var(--ln), var(--ln-3)); }
.tw, .ab { position: relative; flex: none; height: 6.9rem; color: var(--txt); background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 184, 48, .18);
  clip-path: polygon(.7rem 0, 100% 0, 100% calc(100% - .7rem), calc(100% - .7rem) 100%, 0 100%, 0 .7rem); transition: background .12s; }
.tw:hover, .ab:hover { background: rgba(255, 184, 48, .1); box-shadow: inset 0 0 0 1px var(--ln); }
.tw.hov, .ab.hov { background: rgba(255, 184, 48, .12); box-shadow: inset 0 0 0 2px var(--amb); } /* the card whose tooltip is up */
.tw > .key, .ab > .key { position: absolute; left: .4rem; top: .4rem; z-index: 2; } /* the key chip always sits above the ring */

/* tower card: key + cost / icon / name / tags (or a state strip) */
.tw { width: var(--tw); display: grid; grid-template-rows: 1.2rem 2.55rem 1.3rem 1.4rem; justify-items: center; align-items: center; padding: .22rem .3rem .23rem; }
.tw .c { position: absolute; right: .5rem; top: .45rem; font: 400 1.3rem/1 var(--f-num); color: var(--yel); }
.tw .ico { grid-row: 2; width: 2.8rem; height: 2.8rem; color: var(--tc); filter: drop-shadow(0 0 .35rem color-mix(in srgb, var(--tc) 45%, transparent)); }
.tw .ico svg { display: block; width: 100%; height: 100%; }
/* name and tags are never cut: bar.js fitCards() tightens a long name (.nsq / .nsq2, or def.short) and drops a second tag (.t1) */
.tw .n { grid-row: 3; max-width: 100%; overflow: hidden; font: 600 1.18rem/1 var(--f-txt); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.tw.nsq .n { letter-spacing: 0; font-size: 1.04rem; }
.tw.nsq2 .n { letter-spacing: -.01em; font-size: max(9px, .94rem); }
.tw .tg { grid-row: 4; display: flex; gap: .2rem; }
.tw .tag .sf, .tw .tag.both { display: none; }
.tw.tga .tag.gnd, .tw.tga .tag.air { display: none; }
.tw.tga .tag.both { display: inline-flex; }
.tw.t1:not(.tga) .tg .tag + .tag { display: none; }
/* capability tags are neutral (colour = allegiance, so 'AIR' is never cyan here and magenta on a hostile); the glyph says the domain */
.tw .tg .tag, .tip-card .tg .tag { color: var(--txt-2); border-color: rgba(205, 198, 171, .42); }
.tw .tg .tag { height: 1.4rem; font-size: max(9px, 1rem); padding: 0 .24rem; letter-spacing: .02em; gap: .2rem; }
.tw .tag.gnd::before { content: ''; flex: none; width: .44rem; height: .44rem; border-radius: 50%; background: currentColor; }
.tw .tag.air::before { content: ''; flex: none; width: .56rem; height: .48rem; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tw .tag.slow { color: var(--yel); border-color: rgba(255, 232, 31, .5); }
.tw .tag.wall { color: var(--amb); border-color: rgba(255, 184, 48, .5); } /* E4: a wall node (Barrier Post): WALL · LINK 6 */
.tw .dot { display: none; }
/* states: placing (yellow strip), can't afford (amber NEED strip, never the price), the selected tower's type (cyan line) */
.tw.act { background: rgba(255, 232, 31, .14); box-shadow: inset 0 0 0 2px var(--yel); }
.tw.act::after { content: 'PLACING'; position: absolute; left: 0; right: 0; bottom: 0; height: 1.6rem; display: grid; place-items: center; font: 400 max(9px, .95rem)/1 var(--f-num); letter-spacing: .16em; background: var(--yel); color: var(--k0); }
.tw.act .tg, .tw.cant .tg { visibility: hidden; }
.tw.cant .ico { filter: grayscale(1) brightness(.6); }
.tw.cant .n { color: var(--txt-3); }
.tw.cant .c { color: var(--warn); }
.tw.cant:not(.act)::after { content: attr(data-need); position: absolute; left: 0; right: 0; bottom: 0; height: 1.6rem; display: grid; place-items: center; font: 400 max(9px, .92rem)/1 var(--f-num); letter-spacing: .1em; color: #fff;
  background: linear-gradient(90deg, rgba(255, 154, 31, .14), rgba(255, 154, 31, .62), rgba(255, 154, 31, .14)); }
.tw.sel:not(.act) { box-shadow: inset 0 0 0 1px var(--fr); }

/* ability card: key / ring with the icon (conic fill = how far the cooldown is) / name; state tab on top */
.ab { width: var(--aw); display: grid; grid-template-rows: 3.6rem 1fr; justify-items: center; align-items: center; padding: .5rem .3rem .45rem; }
.ab .len { position: absolute; right: .4rem; top: .55rem; font: 400 max(9px, .92rem)/1 var(--f-num); color: var(--txt-3); letter-spacing: .02em; }
.ab .ring { --p: 1; --rc: var(--amb); position: relative; width: 3.3rem; height: 3.3rem; margin-top: .9rem; display: grid; place-items: center; border-radius: 50%;
  background: conic-gradient(var(--rc) calc(var(--p) * 1turn), rgba(255, 255, 255, .09) 0); }
.ab .ring::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--fill-solid); }
.ab .ring svg { position: relative; width: 2rem; height: 2rem; color: var(--txt); }
.ab .ring .fl { position: absolute; inset: -2px; border-radius: 50%; box-shadow: 0 0 0 2px var(--yel), 0 0 1rem rgba(255, 232, 31, .55); opacity: 0; pointer-events: none; }
.ab .n { max-width: 100%; font: 600 1.08rem/1.02 var(--f-txt); letter-spacing: .05em; text-transform: uppercase; text-align: center; align-self: end; white-space: nowrap; }
.ab .cd { position: absolute; left: 50%; top: 2.6rem; transform: translate(-50%, 0); font: 400 1.5rem/1 var(--f-num); color: var(--txt); text-shadow: 0 0 .3rem #000, 0 0 .1rem #000; display: none; white-space: nowrap; }
/* state strip (ACTIVE / ARMED / SHIP DOWN) takes the name row, like PLACING / NEED on a tower card; key and ring stay put */
.ab .act { position: absolute; left: 0; right: 0; bottom: 0; height: 1.6rem; display: none; place-items: center; font: 400 max(9px, .95rem)/1 var(--f-num); letter-spacing: .12em; color: var(--k0); white-space: nowrap; }
.ab.live .act, .ab.arm .act, .ab.off .act { display: grid; }
.ab.live .n, .ab.arm .n, .ab.off .n { visibility: hidden; }
/* cooling: amber fill grows to full, seconds in the ring; name and key stay readable */
.ab.cool .ring svg { opacity: .28; }
.ab.cool .cd { display: block; }
.ab.ready .ring { box-shadow: 0 0 0 1px rgba(255, 184, 48, .5), 0 0 .8rem rgba(255, 184, 48, .25); }
/* active effect (Sanctions): the ring drains with the effect and shows its seconds; the 60 s cooldown starts after */
.ab.live .act { background: var(--fr); }
.ab.live .ring { --rc: var(--fr); box-shadow: 0 0 .8rem rgba(82, 216, 255, .35); }
.ab.live .ring svg { color: var(--fr); opacity: .3; }
.ab.live .cd { display: block; color: var(--fr); }
/* armed (click-to-arm): LMB on the ground fires it, RMB / Esc cancels */
.ab.arm { background: rgba(255, 232, 31, .14); box-shadow: inset 0 0 0 2px var(--yel); }
.ab.arm .act { background: var(--yel); animation: armBlink 1s steps(2, jump-none) infinite; }
.ab.arm .ring { --rc: var(--yel); box-shadow: 0 0 0 1px var(--yel), 0 0 1rem rgba(255, 232, 31, .4); }
@keyframes armBlink { 50% { opacity: .55; } }
/* torpedoes while the interceptor is down: respawn seconds in the ring */
.ab.off .act { background: var(--warn); }
.ab.off .ring svg { opacity: .25; }
.ab.off .cd { display: block; color: var(--warn); }
/* the one-shot (nuke): guarded, isolated far left behind its own divider, hazard edge only here */
.ab.once { --hz: repeating-linear-gradient(135deg, var(--yel) 0 .45rem, #111 .45rem .9rem); box-shadow: inset 0 0 0 1px rgba(255, 232, 31, .45); background: linear-gradient(180deg, rgba(255, 232, 31, .08), rgba(255, 232, 31, 0) 60%); }
.ab.once::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: .35rem; background: var(--hz); opacity: .9; }
.ab.once .ring { --rc: var(--yel); }
.ab.once .ring svg { color: var(--yel); }
.ab.once .len { color: var(--yel); }
.ab.once.arm { box-shadow: inset 0 0 0 2px var(--yel); }
.ab.once.arm .act { background: var(--hz); }
.ab.once.arm .act:not(:empty) { color: transparent; }
.ab.once.arm .act::after { content: 'ARMED'; position: absolute; padding: .15rem .35rem; background: var(--k0); color: var(--yel); }
.ab.once.used { opacity: .42; }
.ab.used .ring svg { opacity: .25; }
.ab.used .cd { display: block; top: 2.75rem; font-size: 1.1rem; letter-spacing: .12em; color: var(--txt-2); }
/* a charge-stock card (Fast-Track, E2): the recharge per charge top right (cycle glyph + seconds), charge ticks under the key chip
   once it holds 2+ (E9 Thrust); ready while a charge is left, the ring sweeps the next charge */
.ab.stock { width: 8.2rem; } /* room for a long key chip (SHIFT) beside the cycle chip; the dense bar drops the glyph */
#bar.d1 .ab.stock { width: 7.2rem; } #bar.d2 .ab.stock { width: 6.9rem; }
#bar.d1 .ab .len.cyc i, #bar.d2 .ab .len.cyc i { display: none; }
.ab .len.cyc { display: inline-flex; align-items: center; gap: .1rem; letter-spacing: 0; color: var(--txt-2); }
.ab .len.cyc i { display: block; width: .95rem; height: .95rem; }
.ab .len.cyc svg { display: block; width: 100%; height: 100%; }
.ab .len.cyc b { font-weight: 400; }
.ab .chg { position: absolute; left: .45rem; top: 2.3rem; display: flex; flex-direction: column; gap: .22rem; }
.ab .chg i { display: block; width: .8rem; height: .32rem; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 184, 48, .45); }
.ab .chg i.on { background: var(--amb); box-shadow: none; }
.ab .chg i.x { display: none; }
.ab.stock.arm .chg i.on { background: var(--yel); }
.nukewrap { display: flex; align-items: stretch; gap: var(--cg); margin-right: .8rem; position: relative; }
.nukewrap::after { content: ''; position: absolute; right: -.6rem; top: .6rem; bottom: .6rem; width: 1px; background: var(--ln-2); }

/* denser cards (bar.js): .d1 / .d2 when the bar would not fit between the minimap and the #sel column (7 towers + 5 abilities at 720p) */
#bar.d1 { --tw: 6.5rem; --aw: 5.7rem; --cg: .3rem; --bgap: 1rem; }
#bar.d1 .tw:not(.nsq) .n { font-size: 1.04rem; letter-spacing: .02em; }
#bar.d1 .tw .ico { width: 2.5rem; height: 2.5rem; }
#bar.d1 .tw .tg .tag { padding: 0 .2rem; letter-spacing: 0; }
/* dense cards use the short tag forms ('SPL', 'HOM', 'PRC'), never a cut word */
#bar.d1 .tw .tag .lf, #bar.d2 .tw .tag .lf, .tw.ts .tag .lf { display: none; }
#bar.d1 .tw .tag .sf, #bar.d2 .tw .tag .sf, .tw.ts .tag .sf { display: inline; }
#bar.d1 .ab .n { font-size: 1rem; letter-spacing: .03em; }
#bar.d1 .ab .ring { width: 2.8rem; height: 2.8rem; }
#bar.d1 .ab .ring svg { width: 1.75rem; height: 1.75rem; }
#bar.d1 .nukewrap { margin-right: .6rem; } #bar.d1 .nukewrap::after { right: -.45rem; }
#bar.d2 { --tw: 6rem; --aw: 5.3rem; --cg: .25rem; --bgap: .8rem; padding: .6rem .5rem; }
#bar.d2 .tw:not(.nsq) .n { font-size: 1rem; letter-spacing: 0; }
#bar.d2 .tw .ico { width: 2.4rem; height: 2.4rem; }
#bar.d2 .tw .tg .tag { padding: 0 .16rem; letter-spacing: 0; gap: .12rem; }
#bar.d2 .tw .tag.gnd::before, #bar.d2 .tw .tag.air::before { display: none; }
#bar.d2 .tw .c { right: .35rem; font-size: 1.2rem; }
#bar.d2 .ab .n { font-size: 1rem; letter-spacing: .02em; }
#bar.d2 .ab .ring { width: 2.7rem; height: 2.7rem; }
#bar.d2 .ab .ring svg { width: 1.7rem; height: 1.7rem; }
#bar.d2 .nukewrap { margin-right: .5rem; } #bar.d2 .nukewrap::after { right: -.38rem; }

/* build / arm hint above the bar; the onboarding strip steps aside while it shows */
#placing { position: absolute; left: 50%; bottom: 10.6rem; transform: translateX(-50%); display: flex; gap: 1rem; align-items: center; padding: .55rem 1rem .55rem .7rem; background: var(--plate); box-shadow: inset 0 0 0 1px var(--yel); font: 500 1.3rem/1 var(--f-txt); letter-spacing: .03em; white-space: nowrap; color: var(--txt); }
#placing .tip { font: 400 max(9px, .95rem)/1 var(--f-num); color: var(--k0); background: var(--yel); padding: .25rem .45rem; letter-spacing: .14em; }
#placing .s b { color: var(--yel); font-weight: 700; }
#placing .key { height: 1.5rem; font-size: 1rem; vertical-align: .1rem; margin: 0 .1rem; }
#placing .dim { color: var(--txt-3); }
#hud.placing #help { visibility: hidden; }

/* ═══ U2 · TOOLTIP ═════════════════════════════════════════════════════════════
   Positioned by bar.js with transform (above the card, clamped off the screen edges and the wave / #sel panels). */
.tip-card { position: absolute; left: 0; top: 0; width: 27rem; padding: 1.1rem 1.2rem 1rem; z-index: 5; will-change: transform; }
/* a long name + state chip ('ORBITAL STRIKE' + 'READY IN 30s') wraps the chip to its own row, right-aligned, inside the border */
.tip-card .th { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.tip-card .th .stt, .tip-card .th .cost { margin-left: auto; }
.tip-card .th .ico { flex: none; width: 3.2rem; height: 3.2rem; color: var(--tc); }
.tip-card .th .ico svg { display: block; width: 100%; height: 100%; }
.tip-card .th .ab-ico { color: var(--txt); padding: .35rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--amb); }
.tip-card .th .nm { font: 700 1.8rem/1 var(--f-txt); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tip-card .th .rl { font: 400 max(9px, 1rem)/1 var(--f-num); color: var(--txt-2); letter-spacing: .1em; margin-top: .35rem; text-transform: uppercase; white-space: nowrap; }
.tip-card .th .sp { flex: 1; }
.tip-card .th .cost { display: flex; align-items: center; font: 400 1.9rem/1 var(--f-num); color: var(--yel); white-space: nowrap; }
.tip-card .th .cost .cu { font-size: .6em; margin-right: .32em; }
.tip-card .th .cost .mod { font-size: max(9px, .95rem); margin-right: .5rem; }
.tip-card .th .stt { align-self: start; font: 400 max(9px, .95rem)/1 var(--f-num); letter-spacing: .12em; padding: .3rem .45rem; white-space: nowrap; }
.tip-card .stt.ok { color: var(--k0); background: var(--ok); }
.tip-card .stt.cd { color: var(--txt); box-shadow: inset 0 0 0 1px var(--ln); }
.tip-card .stt.fx { color: var(--k0); background: var(--fr); }
.tip-card .stt.no { color: #fff; background: var(--warn); }
.tip-card .tg { display: flex; flex-wrap: wrap; gap: .3rem; margin: .8rem 0 .2rem; }
.tip-card .tg .tag { padding: 0 .32rem; letter-spacing: .05em; }
.tip-card hr { border: 0; height: 1px; background: var(--ln-2); margin: .8rem 0; }
.tip-card .sts { display: flex; flex-direction: column; gap: .45rem; }
.tip-card .sr { display: grid; grid-template-columns: 5.6rem 1fr auto; gap: .6rem; align-items: center; }
.tip-card .sr .lbl { font-size: max(9px, .98rem); }
.tip-card .sr .bar { height: .7rem; background: rgba(255, 255, 255, .07); position: relative; overflow: hidden; }
.tip-card .sr .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tc); opacity: .85; }
.tip-card .sr .bar.none { height: 1px; background: none; border-bottom: 1px dotted var(--ln-2); }
.tip-card .sr .v { min-width: 4.6rem; font: 400 1.2rem/1 var(--f-num); text-align: right; white-space: nowrap; }
.tip-card .sr .v .tmode { color: var(--yel); letter-spacing: .1em; } /* E5: the default targeting mode */
.tip-card .sr .v small { font-size: max(9px, .9rem); color: var(--txt-3); letter-spacing: .06em; margin-left: .3rem; }
.tip-card .mod { font: 400 max(9px, .95rem)/1 var(--f-num); letter-spacing: .1em; color: var(--k0); background: var(--fr); padding: .12rem .3rem; margin-right: .5rem; vertical-align: .1rem; }
.tip-card .gb { display: grid; grid-template-columns: 6rem 1fr; gap: .45rem .6rem; font: 500 1.25rem/1.2 var(--f-txt); }
.tip-card .gb .lbl { font-size: max(9px, .95rem); padding-top: .2rem; }
.tip-card .gb .g { color: var(--ok); } .tip-card .gb .b { color: #ff8a7e; }
.tip-card .dsc { margin-top: .8rem; font: 500 1.25rem/1.25 var(--f-txt); color: var(--txt-2); }
.tip-card .call { margin-top: .8rem; padding: .55rem .7rem; font: 500 1.25rem/1.25 var(--f-txt); background: rgba(255, 232, 31, .08); box-shadow: inset 2px 0 0 var(--yel); color: var(--txt); }
.tip-card .call b { color: var(--yel); font-weight: 600; }
.tip-card .call.warn { background: rgba(255, 154, 31, .1); box-shadow: inset 2px 0 0 var(--warn); }
.tip-card .call.warn b { color: var(--warn); }
.tip-card .call .key, .tip-card .ft .key { height: 1.45rem; min-width: 1.45rem; font-size: max(9px, .95rem); vertical-align: .12rem; margin: 0 .05rem; }
.tip-card .ft { margin-top: .8rem; font: 400 max(9px, .92rem)/1.45 var(--f-num); color: var(--txt-3); letter-spacing: .04em; }
.tip-card .ft b.no { font-weight: 400; color: var(--warn); }
.tip-card .cu { font-size: .62em; vertical-align: .18em; margin-right: .3em; }
.tip-stem { position: absolute; left: 0; top: 0; width: 2px; background: var(--amb); z-index: 5; pointer-events: none; }
.tip-stem::after { content: ''; position: absolute; left: -.3rem; bottom: -.3rem; width: .7rem; height: .7rem; background: var(--amb); transform: rotate(45deg); }

/* ═══ U2 · BUILD CURSOR READOUT ════════════════════════════════════════════════
   Next to the ghost cell (bar.js writes the text change-only and moves it with transform; its size is read after the frame). */
.cur-ro { position: absolute; left: 0; top: 0; padding: .6rem .8rem .65rem; min-width: 17rem; background: var(--plate); box-shadow: inset 0 0 0 1px var(--ln-2); clip-path: polygon(.6rem 0, 100% 0, 100% 100%, 0 100%, 0 .6rem); will-change: transform; white-space: nowrap; }
.cur-ro .a { display: flex; align-items: center; gap: .6rem; font: 700 1.4rem/1 var(--f-txt); letter-spacing: .08em; text-transform: uppercase; }
.cur-ro .a .c { font: 400 1.25rem/1 var(--f-num); color: var(--yel); margin-left: auto; padding-left: .6rem; }
.cur-ro .s { margin-top: .45rem; font: 400 max(9px, 1.02rem)/1.35 var(--f-num); letter-spacing: .06em; color: var(--txt-2); }
.cur-ro .s b { font-weight: 400; color: var(--fr); }
.cur-ro .s b.y { color: var(--yel); }
.cur-ro .s b.r { color: #ff7a70; }
.cur-ro .cu { font-size: .6em; vertical-align: .22em; margin-right: .32em; }
.cur-ro .ok { color: var(--k0); background: var(--fr); padding: .15rem .35rem; font: 400 max(9px, .9rem)/1 var(--f-num); letter-spacing: .12em; }
.cur-ro .no { color: #fff; background: var(--hos); padding: .15rem .35rem; font: 400 max(9px, .9rem)/1 var(--f-num); letter-spacing: .12em; }
/* route legend above the minimap while the preview recolours the route */
.route-lg { position: absolute; display: flex; flex-direction: column; gap: .35rem; padding: .6rem .8rem; background: var(--plate); box-shadow: inset 0 0 0 1px var(--ln-3); font: 400 max(9px, .98rem)/1 var(--f-num); letter-spacing: .08em; color: var(--txt-2); text-transform: uppercase; white-space: nowrap; }
.route-lg span { display: flex; align-items: center; gap: .5rem; }
.route-lg i { width: 1.6rem; height: .3rem; display: inline-block; }
.route-lg i.g { background: var(--gnd); } .route-lg i.a { background: var(--air); } .route-lg i.n { background: var(--route-new); }
.route-lg b { color: var(--ok); font-weight: 400; }