/* Station docks (station-dock.mjs; outputs/design/stations-on-board-v1.md). Each side's Station sits at the left flank of
   its own front line, outside the seven unit slots, as in the Unreal build. Desktop and tablet: a column beside the row.
   Phones (600 px and narrower): a slim strip above the row, so the unit lanes, hand and log keep their room.
   battle-fit.css (loaded after this) sizes the front line on fitted desktop screens. */

.front-line{position:relative;display:flex;align-items:stretch;gap:10px;min-width:0}
.front-line>.board-row{flex:1 1 auto;min-width:0}

.station-dock{--dock-color:#79ddff;position:relative;flex:0 0 clamp(104px,9.5vw,148px);min-width:0;display:flex;flex-direction:column;gap:4px;
  margin:6px 0;padding:6px 7px 7px;border:1px solid color-mix(in srgb,var(--dock-color) 50%,#2a3748);border-left:4px solid var(--dock-color);
  border-radius:4px 14px 4px 14px;background:linear-gradient(165deg,color-mix(in srgb,var(--dock-color) 15%,#0e1624),#0a0f18 72%);
  box-shadow:0 8px 18px #0008,inset 0 1px #ffffff14,inset 0 0 24px color-mix(in srgb,var(--dock-color) 10%,transparent);color:#dfe9f6;cursor:pointer;
  overflow:hidden;transition:transform .16s,box-shadow .16s}
.station-dock:hover,.station-dock:focus-visible{transform:translateY(-2px);box-shadow:0 12px 22px #000a,inset 0 0 28px color-mix(in srgb,var(--dock-color) 18%,transparent)}
.station-dock .dock-label{font-size:9px;letter-spacing:1.6px;color:color-mix(in srgb,var(--dock-color) 70%,#b9c6d6);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The art: the Station's card art, or a generic orbital tile (rings in the owner's colour) when there is none. */
.station-dock .dock-art{position:relative;flex:1 1 0;min-height:34px;border-radius:7px;overflow:hidden;border:1px solid color-mix(in srgb,var(--dock-color) 40%,#1d2836)}
.dock-generic{background:radial-gradient(circle at 50% 50%,transparent 0 17%,color-mix(in srgb,var(--dock-color) 55%,transparent) 18% 20%,transparent 21% 33%,color-mix(in srgb,var(--dock-color) 30%,transparent) 34% 35%,transparent 36%),
  linear-gradient(90deg,transparent 46%,color-mix(in srgb,var(--dock-color) 35%,transparent) 47% 53%,transparent 54%),radial-gradient(ellipse at 50% 30%,#1b2a40,#070b12 75%)}
.station-dock .dock-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.station-dock .dock-hull-badge{position:absolute;right:4px;bottom:4px;min-width:26px;padding:2px 6px;border-radius:999px;background:#08111ee8;border:1px solid #79ddff;color:#bff3ff;font-weight:800;font-size:14px;text-align:center;font-variant-numeric:tabular-nums}
.station-dock .dock-name{font-size:12px;line-height:1.2;color:#eef5ff;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.station-dock .dock-hull{position:relative;height:15px;border-radius:4px;background:#050a12;border:1px solid #3c5871;overflow:hidden}
.station-dock .dock-hull i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#2b8fb8,#79ddff);transition:width .4s}
.station-dock .dock-hull span{position:relative;display:block;text-align:center;font-size:10px;line-height:13px;font-weight:800;letter-spacing:.5px;color:#f4fbff;text-shadow:0 1px 2px #000}
.station-dock.critical .dock-hull i{background:linear-gradient(90deg,#a3322f,#f07a5a)}
.station-dock.critical .dock-hull-badge{border-color:#f07a5a;color:#ffd2c4}
.station-dock .dock-chips{display:flex;flex-wrap:wrap;gap:3px}
.station-dock .dock-chip{font-size:9.5px;line-height:1.2;padding:2px 5px;border-radius:4px;border:1px solid #4b6178;background:#0b1522;color:#b9cadb;white-space:nowrap}
.station-dock .chip-ready{border-color:#57d7b0;color:#a8ffe2}.station-dock .chip-wait{border-color:#8aa0b8}.station-dock .chip-used{opacity:.75}
.station-dock .chip-off{border-color:#e07a5a;color:#ffb39a}.station-dock .chip-hit{border-color:#a3322f88;color:#ffb3a3}
.station-dock button[data-operate]{padding:4px 6px;font-size:11px;min-height:0}
.station-dock.online.owner-you{box-shadow:0 8px 18px #0008,0 0 0 1px #57d7b066,0 0 16px #30d3aa33}
/* Legal attack or spell target, and your selected Station. */
.arena .station-dock.target{outline:3px solid #ffb826;outline-offset:2px;box-shadow:0 0 26px #ffb82677!important;cursor:crosshair}
.arena .station-dock.target{border-color:#ffb826}
.arena.targeting .station-dock.target::after{content:'◎ TARGET';position:absolute;left:0;right:0;top:0;z-index:6;padding:3px;background:#1a1203ee;color:#ffd36a;
  font:700 10px/1.2 var(--uw-font-display,inherit);letter-spacing:.16em;text-align:center;pointer-events:none}
.arena.targeting .station-dock.target:hover{transform:translateY(-3px) scale(1.03)}
.station-dock.selected{outline:2px solid #79ddff;outline-offset:2px}
/* Your empty dock while a Station is in your hand, and while one is selected or dragged. */
.station-dock.dock-slot{border-style:dashed;opacity:.72;cursor:default;background:linear-gradient(165deg,#0e1624aa,#0a0f18aa)}
.station-dock.dock-slot .dock-art{opacity:.55}
.station-dock .dock-hint{font-size:10px;line-height:1.3;color:#9fb2c6}
.station-dock.dock-slot.drop-ready{opacity:1;border-color:#8af6dc;box-shadow:0 0 0 1px #8af6dc66,0 0 18px #30d3aa55;cursor:copy}
.station-dock.dock-slot.drop-ready .dock-hint{color:#a8ffe2;font-weight:800;text-transform:uppercase;letter-spacing:1px}
/* A destroyed Station: a dim wreck. */
.station-dock.dock-wreck{filter:grayscale(.85) brightness(.7);border-left-color:#5b6470}
.station-dock.dock-wreck .dock-status{font-size:10px;color:#c9a39a}

/* First-battle meter tips sit above your Commander bar: start them right of your dock so they never cover it. */
@media(min-width:601px){.arena:has(.front-player.has-dock) .commander .meter-intro{left:calc(clamp(104px,9.5vw,148px) + 22px);max-width:min(520px,calc(100% - clamp(104px,9.5vw,148px) - 34px))}}

/* Tablet: a little narrower. */
@media(max-width:1050px){.station-dock{flex-basis:118px}}

/* Phones: the dock becomes a strip above its row (art thumbnail, name, Hull, status), so the lanes keep their width. */
@media(max-width:600px){
  .front-line.has-dock{flex-direction:column;gap:2px}
  .station-dock{flex:none;flex-direction:row;align-items:center;gap:6px;margin:2px 0 0;padding:4px 6px;min-height:44px;border-radius:4px 10px 4px 10px}
  .station-dock:hover,.station-dock:focus-visible{transform:none}
  .station-dock .dock-label{display:none}
  .station-dock .dock-art{flex:0 0 34px;height:34px;min-height:0}
  .station-dock .dock-hull-badge{display:none}
  .station-dock .dock-name{flex:1 1 auto;min-width:0;font-size:11px;-webkit-line-clamp:1}
  .station-dock .dock-hull{flex:0 0 74px}
  .station-dock .dock-chips{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}
  .station-dock .dock-chips .dock-chip+.dock-chip{display:none}
  .station-dock .dock-chip{max-width:96px;overflow:hidden;text-overflow:ellipsis}
  .station-dock.owner-you .dock-chips .chip-ready{display:none} /* the Operate button already says it */
  .station-dock .dock-hint{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .station-dock button[data-operate]{flex:none;padding:4px 7px}
}
@media(prefers-reduced-motion:reduce){.station-dock{transition:none}.station-dock:hover{transform:none}.station-dock .dock-hull i{transition:none}}