/* Star Base view — the station stage and the 2D fallback tiles. A module has
 * no panel of its own: clicking one opens the screen it hosts, which carries the
 * module's header control and upgrade sheet (upgrade.css). What lives here is
 * what only the star base has: the per-type accents, the fallback tiles, and
 * the pin layer the 3D scene anchors over each module. */

.sb-body{gap:14px}

/* The grid fills the positioned .sb-stage and scrolls internally so the
   construction / research overlays can sit absolutely over it. */
.sb-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px;
  position:absolute;inset:0;overflow-y:auto;align-content:start;padding:4px;
  scrollbar-width:thin;scrollbar-color:#1a3a5a transparent;
}

/* 2D fallback tile — one module, one click into its screen. It states only what
   the pin over the 3D station states (name, level, what is live about it); the
   controls are in the screen it opens, exactly as they are in 3D.
   The anatomy is the kit's `.u-row`; what a tile adds is that it is pressable
   and that it sits in a grid, where the row's stacking margin does not apply. */
.sb-tile{width:100%;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.sb-grid .u-row+.u-row{margin-top:0}
.sb-tile:hover{border-color:var(--u-line);background:rgba(79,216,255,.08)}
.sb-tile.is-unbuilt .sb-ico{opacity:.55;filter:grayscale(.35)}

/* Per-building accent, read through `currentColor` by the inline SVG so the
   3D module, its billboard and this glyph all read as the same structure. */
/* Tint only — how big the glyph is belongs to whatever primitive hosts it
   (`.u-dlg-icon svg`, `.u-row-icon svg`, `.u-pin svg` all size their own). */
.sb-ico{display:grid;place-items:center;color:var(--sb-accent,#3fd8ff)}
.sb-ico svg{filter:drop-shadow(0 0 3px currentColor)}
/* The accent is a variable, so a panel carrying `sb-ico-<type>` tints its own chrome with it (upgrade.css, module.css). */
.sb-ico-barracks      {--sb-accent:#3fd8ff}
.sb-ico-scienceLab    {--sb-accent:#a98bff}
.sb-ico-restArea      {--sb-accent:#3bf0a0}
.sb-ico-scanner       {--sb-accent:#5bd0ee}
.sb-ico-smelter       {--sb-accent:#ff9d3a}
.sb-ico-fabricator    {--sb-accent:#ffd45e}
.sb-ico-trainingCenter{--sb-accent:var(--u-train)}
.sb-ico-hydroponics   {--sb-accent:#8fe36a}
.sb-ico-hangar        {--sb-accent:#8fe36a}
.sb-ico-bridge        {--sb-accent:var(--u-bridge)}
/* A building's glyph in a lit round badge, sized by its host through --badge. */
.sb-badge{
  flex:0 0 auto;width:var(--badge,64px);height:var(--badge,64px);border-radius:50%;
  border:1px solid color-mix(in srgb,var(--sb-accent) 45%,transparent);
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--sb-accent) 24%,transparent),rgba(3,9,20,.65) 72%);
  box-shadow:0 0 28px color-mix(in srgb,var(--sb-accent) 22%,transparent),inset 0 0 18px rgba(0,0,0,.5);
}
.sb-badge svg{width:64%;height:64%}

/* Research-state chip in an overlay header. */

/* ── 3D station stage ─────────────────────────────
   The `.sb-wrap` fills the positioned stage and stacks two layers: the WebGL
   canvas (#sbCanvas, inserted by starbase3d.js) and the HUD pin layer
   (`.u-pin-layer`). A module's bay sits above all of it (`--z-bay`) when
   opened. */
.sb-wrap{
  position:absolute;inset:0;overflow:hidden;border-radius:10px;
  background:radial-gradient(120% 90% at 50% 30%,#0a1730 0%,#050a18 55%,#02040a 100%);
  border:1px solid rgba(40,100,180,.30);
  cursor:grab;
}
.sb-wrap:active{cursor:grabbing}
#sbCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:var(--z-scene)}

/* The pin layer is the kit's (`.u-pin-layer`); `#sbHud` carries that class. */

.sb-stage{position:relative;flex:1;min-height:0;overflow:hidden;isolation:isolate}

/* A bay layer's host: the kit's `.u-bay` inside it draws the panel, so this is
   only the scrim that covers the station while a bay is open. */
.sb-overlay{position:absolute;inset:0;z-index:var(--z-bay);background:var(--u-ink)}

/* Recipe card — reuses the scan/trade card chrome. */

/* Research empty / no-techs state (also reused for "build a lab first"). */

/* ── Research tech tree ──────────────────────────────────────────────
   The research layer lays its catalog out as horizontal tiers (by longest
   prerequisite chain) so the tree reads top-to-bottom by dependency. Each tier
   is a wrapping grid of tech cards. */

/* ── Catalog item detail block ───────────────────────────────────────
   Button-free "full details" of a hull or component (catalogDetailHtml in
   views/_shared.js), shared by the Fabricator recipe rows and the Research
   tech cards so a craft / research preview reads like the Hangar. */
.cd{display:flex;flex-direction:column;gap:6px;min-width:0}

/* Chappie's warm amber — his eyes, his chest chip and his antenna bulb are lit
   with the same value in the 3D scene (`starbase3d.js` WARM), so his gate
   prompt and his speech bubble read as coming from the same robot. */
:root{--sb-chappie:#ffce86;--sb-chappie-line:rgba(255,206,134,.55)}

/* Onboarding station-gate banners (energy block unpowered / Scanner broken). */
#sbGate:empty{display:none}
#sbGate{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.sb-gate{appearance:none;cursor:pointer;border-radius:8px;padding:9px 14px;font-size:12px;font-weight:600;letter-spacing:.3px;text-align:left;flex:1 1 auto;transition:filter .15s,transform .05s}
.sb-gate:active{transform:translateY(1px)}
.sb-gate-power{border:1px solid #caa23e;background:linear-gradient(180deg,rgba(70,56,18,.55),rgba(40,32,10,.55));color:#f2cf6e;box-shadow:0 0 14px rgba(202,162,62,.25)}
.sb-gate-power:hover{filter:brightness(1.18)}
.sb-gate-scanner{border:1px solid #b3414f;background:linear-gradient(180deg,rgba(70,20,26,.5),rgba(40,12,16,.5));color:#ff8a98}
.sb-gate-scanner:hover{filter:brightness(1.12)}
.sb-gate-bridge{border:1px solid #4f8fd0;background:linear-gradient(180deg,rgba(20,44,74,.55),rgba(10,22,40,.55));color:#8fd4ff;box-shadow:0 0 14px rgba(79,143,208,.25)}
.sb-gate-bridge:hover{filter:brightness(1.18)}
.sb-gate-chappie{border:1px solid #c79a5c;background:linear-gradient(180deg,rgba(66,50,26,.5),rgba(38,28,14,.5));color:var(--sb-chappie);box-shadow:0 0 14px rgba(255,206,134,.22)}
.sb-gate-chappie:hover{filter:brightness(1.15)}


/* ── Chappie's speech bubble ──────────────────────
   The line the station's robo-dog says while standing at the element the active
   quest wants clicked. Both the words and where he stands are the server's
   (0x64 QuestState → the task's ui.say / ui.target); this is only the plate they
   land on. It rides the pin layer, which the scene repositions every frame, and
   is never a click target — the world element it points at is. */
.sb-say{
  position:absolute;transform:translate(-50%,-100%);
  max-width:240px;padding:8px 12px;border-radius:11px;
  border:1px solid var(--sb-chappie-line);
  background:linear-gradient(180deg,rgba(48,36,17,.96),rgba(16,12,7,.96));
  color:#ffe6bd;font:600 12px/1.45 var(--u-font-ui);letter-spacing:.2px;text-align:center;
  box-shadow:0 0 20px rgba(255,176,74,.2),0 6px 18px rgba(0,0,0,.55);
  pointer-events:none;
  animation:sbSayIn .3s cubic-bezier(.2,1.5,.4,1) both;
}
/* Tail down at his head: the border triangle, then the fill 1.5px over it. */
.sb-say::before,.sb-say::after{content:'';position:absolute;left:50%;transform:translateX(-50%);border:7px solid transparent}
.sb-say::before{top:100%;border-top-color:var(--sb-chappie-line)}
.sb-say::after {top:calc(100% - 1.5px);border-width:6px;border-top-color:rgba(20,15,9,.98)}
@keyframes sbSayIn{from{opacity:0;transform:translate(-50%,-88%) scale(.9)}to{opacity:1;transform:translate(-50%,-100%) scale(1)}}

/* ── Catalog detail blocks ────────────────────────
   The button-free hull / component "full details" markup `_shared.js`
   (`catalogDetailHtml`) renders wherever an item has to be described in full:
   a Research row's "unlocks crafting" block, a Fabricator recipe, a Trade
   station's hull rows. The bays widen `.cd-name` so it wraps rather than
   ellipsing — see bays.css. */
.cd{display:flex;flex-direction:column;gap:6px;min-width:0}
.cd-head{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.cd-icon{width:18px;height:18px;flex:0 0 18px}
.cd-name{font-size:13px;font-weight:bold;letter-spacing:.3px;color:#d6e6f4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%}
.cd-name.rar0{color:#9fb6cc}.cd-name.rar1{color:#7fe3a8}.cd-name.rar2{color:#6cc0ff}
.cd-name.rar3{color:#c98cff}.cd-name.rar4{color:#ffc06a}
.cd-stats{font-size:11px;color:#9fb8d4;letter-spacing:.2px}
.cd-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:10px;color:#7290ad}
.cd-meta b{color:#cfe6ff}

/* hull variant: silhouette + spec grid, then slot pills + crew seats */
.cd-hull-head{display:flex;align-items:center;gap:10px}
.cd-hull-img{width:66px;height:48px;flex:0 0 66px;border-radius:6px;
  background:radial-gradient(circle at 50% 40%,rgba(40,90,160,.22),rgba(4,10,22,.55))}
.cd-hull-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.cd-hull .sgrid{grid-template-columns:repeat(3,auto);justify-content:start;gap:3px 16px}
.cd-hull .hg-slots{margin-top:1px}

/* crew seat pills: required solid, optional dashed */
.cd-seats{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.cd-seats-lbl{font-size:9px;color:#7290ad;letter-spacing:.8px;text-transform:uppercase;margin-right:1px}
.cd-seat{font-size:9px;padding:2px 6px;border-radius:3px;letter-spacing:.4px;
  color:#bcd6f0;border:1px solid rgba(80,150,220,.35);background:rgba(20,50,90,.3)}
.cd-seat-opt{color:#88a4c0;border-style:dashed;border-color:rgba(80,150,220,.28);background:transparent}

/* ── Compact station (Phase 7) ────────────────────
   On a landscape phone the stage is ~250px tall once the rail and the header
   have taken theirs, so the station's own chrome gives its height back: the
   onboarding banners become one scrolling row of compact chips, and a pin drops
   its sub-line (the dialog behind it says the same thing, at length). */
@media (max-height:520px){
  #sbGate{
    display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;
    scrollbar-width:none;padding-bottom:2px;
  }
  #sbGate::-webkit-scrollbar{display:none}
  .sb-gate{flex:0 0 auto;font-size:11px;padding:7px 10px;min-height:34px}
  .sb-body{gap:8px}
  .u-pin-sub{display:none}
  /* The station is small on a phone; Chappie's line shrinks with it so the
     bubble stays a label over his head rather than a slab over the deck. */
  .sb-say{max-width:190px;font-size:11px;padding:6px 9px;border-radius:9px}
}