/* GC-MANDO-NUMBERS-001 — exact huge-number layout for HUD, Records and Hall of Fame.
   Values stay exact; constrained surfaces gain width/scroll instead of scientific notation. */

/* Header: Timekeeper is account meta, not a planet resource. Keep it beside the
   language selector/commander and mirror the canonical live balance from the hidden
   resource source node. Reuse the standard gc-hud-panel skin so it belongs to the shell. */
.gc-hslot-lang {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  min-width: 0;
}

.gc-header-timekeeper {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 9.25rem;
  min-height: 2.35rem;
  padding: 0.32rem 0.58rem;
  white-space: nowrap;
  flex: 0 0 auto;
}

.gc-header-timekeeper-icon {
  display: block;
  width: 1.65rem;
  height: 1.65rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.gc-header-timekeeper-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.05rem;
  min-width: 0;
  line-height: 1.05;
}

.gc-header-timekeeper-tag {
  font-size: 0.56rem;
  letter-spacing: 0.075em;
  opacity: 0.78;
}

.gc-header-timekeeper-value {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.015em;
}

/* GC-HUD-SHELL-001 — the ranking shortcut only needs the rank. The full score is
   available on the ranking page, so keep the global header quiet and compact. */
.gc-score-pill > .gc-hud-panel-tag,
.gc-score-pill > #hud-score-total,
.gc-score-pill > .gc-hud-panel-sep {
  display: none !important;
}

/* Desktop command strip: one continuous shell instead of a row of detached pills.
   Existing controls keep their semantics and hit targets; only their presentation is
   flattened into the shared frame. Tablet/mobile retain the established responsive shell. */
@media (min-width: 1181px) {
  .gc-header-row-top {
    display: flex !important;
    align-items: stretch !important;
    width: 100%;
    gap: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--gc-panel-border, rgba(70, 229, 255, 0.36));
    background: linear-gradient(180deg, rgba(10, 18, 31, 0.94), rgba(5, 10, 20, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 5px 18px rgba(0, 0, 0, 0.18);
  }

  .gc-header-row-top > .gc-hslot-brand,
  .gc-header-row-top > .gc-header-meta,
  .gc-header-row-top > .gc-hslot-lang,
  .gc-header-row-top > .gc-hud-user {
    min-width: 0;
    margin: 0 !important;
  }

  .gc-header-row-top > .gc-hslot-brand {
    flex: 0 0 auto;
  }

  .gc-header-row-top > .gc-header-meta {
    display: flex !important;
    flex: 1 1 auto;
    align-items: stretch !important;
    gap: 0 !important;
  }

  .gc-header-row-top > .gc-hslot-lang,
  .gc-header-row-top > .gc-hud-user {
    flex: 0 0 auto;
    align-items: stretch !important;
    gap: 0 !important;
    border-inline-start: 1px solid rgba(130, 184, 205, 0.18);
  }

  .gc-header-row-top > .gc-hud-user {
    display: flex !important;
  }

  .gc-header-row-top .gc-header-icon-rail {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  .gc-header-row-top .gc-logo,
  .gc-header-row-top .gc-hud-panel,
  .gc-header-row-top .gc-header-fleets-toggle,
  .gc-header-row-top .gc-header-planets-toggle,
  .gc-header-row-top .gc-header-icon-btn,
  .gc-header-row-top .gc-language-switcher,
  .gc-header-row-top .gc-language-switcher select,
  .gc-header-row-top .logout-btn {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .gc-header-row-top .gc-logo,
  .gc-header-row-top .gc-hud-panel,
  .gc-header-row-top .gc-header-fleets-toggle,
  .gc-header-row-top .gc-header-planets-toggle,
  .gc-header-row-top .gc-header-icon-btn,
  .gc-header-row-top .gc-language-switcher,
  .gc-header-row-top .gc-language-switcher select,
  .gc-header-row-top .logout-btn {
    background: transparent !important;
  }

  .gc-header-row-top .gc-header-meta > * + *,
  .gc-header-row-top .gc-header-icon-rail > * + *,
  .gc-header-row-top .gc-hslot-lang > * + *,
  .gc-header-row-top .gc-hud-user > * + * {
    border-inline-start: 1px solid rgba(130, 184, 205, 0.18) !important;
  }

  .gc-header-row-top .gc-header-meta > *,
  .gc-header-row-top .gc-header-icon-rail > *,
  .gc-header-row-top .gc-hslot-lang > *,
  .gc-header-row-top .gc-hud-user > * {
    margin: 0 !important;
  }

  .gc-header-row-top .gc-score-pill {
    min-width: 4.9rem;
    justify-content: center;
    padding-inline: 0.72rem;
  }

  .gc-header-row-top .gc-hud-panel-online {
    min-width: 6.3rem;
  }

  .gc-header-row-top .gc-header-timekeeper {
    min-height: 100%;
  }

  .gc-header-row-top .gc-logo:hover,
  .gc-header-row-top .gc-score-pill:hover,
  .gc-header-row-top .gc-header-fleets-toggle:hover,
  .gc-header-row-top .gc-header-planets-toggle:hover,
  .gc-header-row-top .gc-header-icon-btn:hover,
  .gc-header-row-top .logout-btn:hover {
    background: rgba(104, 220, 255, 0.07) !important;
  }
}

/* Resource row: the old fifth Timekeeper card remains as the canonical live-update
   source for compatibility, but no longer occupies layout space. Ferronit, Crytite and
   Brennzellen are the long-number surfaces and get the lion's share of the row; derived
   energy is deliberately compact. Force the row to consume the complete shell width so
   no legacy fifth-column reservation can survive underneath this presentation layer. */
.resource-bar.resource-bar-cmd {
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(9.5rem, 0.52fr) !important;
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

.resource-bar-cmd .hud-res-timekeeper {
  display: none !important;
}

.resource-bar-cmd .hud-res-metal,
.resource-bar-cmd .hud-res-crystal,
.resource-bar-cmd .hud-res-fuel-cells,
.resource-bar-cmd .hud-res-energy {
  min-inline-size: 0;
  margin-inline: 0 !important;
}

/* Adjacent cards share one seam instead of drawing a gap/double frame. */
.resource-bar-cmd .hud-res-crystal,
.resource-bar-cmd .hud-res-fuel-cells,
.resource-bar-cmd .hud-res-energy {
  border-inline-start-width: 0 !important;
}

.resource-bar-cmd .hud-res-body,
.resource-bar-cmd .hud-res-amount {
  min-width: 0;
}

.resource-bar-cmd .hud-res-amount {
  inline-size: 100%;
}

.resource-bar-cmd .res-value,
.resource-bar-cmd .res-cap,
.resource-bar-cmd .res-rate {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: -0.025em;
}

.resource-bar-cmd .res-value {
  display: block;
  max-inline-size: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
    white-space: nowrap;
  text-align: right;
  font-size: clamp(0.76rem, 0.88vw, 1rem);
}

.resource-bar-cmd .hud-res-cap-line,
.resource-bar-cmd .res-rate {
  max-inline-size: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
    white-space: nowrap;
}

.resource-bar-cmd .hud-res-cap-line {
  min-width: 0;
  text-align: right;
}

.resource-bar-cmd .res-cap {
  font-size: clamp(0.60rem, 0.67vw, 0.78rem);
}

.resource-bar-cmd .res-rate {
  font-size: clamp(0.58rem, 0.64vw, 0.76rem);
}

/* Desktop/tablet HUD density pass. Keep the exact values large, reclaim vertical room
   from chrome/icons instead. Auto height means warnings can still expand safely. */
@media (min-width: 761px) {
  .gc-header-row-resources .gc-resource-sticky {
    width: 100%;
    max-width: none;
  }

  .resource-bar-cmd .hud-res-panel {
    height: auto;
    min-height: 4.35rem;
    padding-block: 0.32rem 0.24rem;
  }

  .resource-bar-cmd .hud-res-body {
    gap: 0.5rem;
  }

  .resource-bar-cmd .res-icon--hud {
    width: 2.35rem;
    height: 2.35rem;
  }

  .resource-bar-cmd .hud-res-capacity {
    margin-top: 0.16rem;
  }

  .resource-bar-cmd .hud-res-footer {
    min-height: 0.9rem;
    margin-top: 0.12rem;
  }

  .resource-bar-cmd .hud-res-energy {
    padding-inline: 0.45rem;
  }

  .resource-bar-cmd .hud-res-energy .res-icon--hud {
    width: 1.9rem;
    height: 1.9rem;
  }

  .resource-bar-cmd .hud-res-energy .res-value {
    font-size: clamp(0.68rem, 0.72vw, 0.82rem);
  }

  .resource-bar-cmd .hud-res-energy .res-cap {
    font-size: clamp(0.56rem, 0.60vw, 0.68rem);
  }
}

.gc-records-workspace-body,
.gc-hof-body,
.gc-hof-desktop,
.gc-hof-desktop .ranking-table-wrapper {
  min-width: 0;
}

.gc-records-row {
  display: grid;
  grid-template-columns: 46px minmax(150px, 1.35fr) minmax(150px, 1fr) minmax(220px, auto);
  align-items: center;
  column-gap: 14px;
}

.gc-records-row-label,
.gc-records-row-holder {
  min-width: 0;
}

.gc-records-row-value {
  min-width: 220px;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gc-hof-desktop .ranking-table-wrapper {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

.gc-hof-table {
  min-width: 1120px;
  table-layout: auto;
}

.gc-hof-table .gc-hof-col-num {
  min-width: 190px;
  width: 190px;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gc-hof-table .gc-hof-col-name {
  min-width: 170px;
}

@media (max-width: 1180px) {
  .gc-header-timekeeper {
    min-width: auto;
    padding-inline: 0.48rem;
  }

  .gc-header-timekeeper-tag {
    display: none;
  }

  .gc-header-timekeeper-copy {
    align-items: center;
  }
}

@media (max-width: 760px) {
  .gc-hslot-lang {
    gap: 0.35rem;
  }

  .gc-header-timekeeper {
    gap: 0.32rem;
    min-height: 2rem;
    padding: 0.2rem 0.36rem;
  }

  .gc-header-timekeeper-icon {
    width: 1.35rem;
    height: 1.35rem;
  }

  .gc-header-timekeeper-value {
    font-size: 0.72rem;
  }

  /* GC-166 HOTFIX: Mobile resource bar compact 2x2 grid without overflow.
     Replace 4-column bloated layout (repeat(3, minmax(16rem,1fr)) + minmax(10rem,0.62fr))
     with flexible 2x2 grid: metal/crystal in row 1, fuel/energy in row 2. */
  .resource-bar.resource-bar-cmd {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow-x: hidden !important;
    scrollbar-gutter: auto;
  }

  .resource-bar-cmd .hud-res-metal,
  .resource-bar-cmd .hud-res-crystal,
  .resource-bar-cmd .hud-res-fuel-cells,
  .resource-bar-cmd .hud-res-energy {
    min-inline-size: 0 !important;
    width: auto;
    min-height: 3.4rem;
    padding-block: 0.24rem 0.18rem;
  }

  .resource-bar-cmd .hud-res-body {
    gap: 0.28rem;
    min-width: 0;
  }

  .resource-bar-cmd .res-icon--hud {
    width: 1.55rem;
    height: 1.55rem;
    flex: 0 0 auto;
  }

  .resource-bar-cmd .res-value {
    font-size: 0.66rem;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    white-space: nowrap;
  }

  .resource-bar-cmd .res-cap,
  .resource-bar-cmd .res-rate {
    font-size: 0.52rem;
  }

  .resource-bar-cmd .hud-res-capacity {
    margin-top: 0.08rem;
  }

  .resource-bar-cmd .hud-res-footer {
    min-height: 0.75rem;
    margin-top: 0.06rem;
  }


  .gc-records-row {
    grid-template-columns: 40px minmax(0, 1fr);
    row-gap: 6px;
  }

  .gc-records-row-icon {
    grid-row: 1 / span 3;
  }

  .gc-records-row-label,
  .gc-records-row-holder,
  .gc-records-row-value {
    grid-column: 2;
  }

  .gc-records-row-value {
    min-width: 0;
    text-align: left;
  }

  .gc-hof-mobile-stats dd {
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    font-variant-numeric: tabular-nums;
  }
}

/* GC-HUD-SHELL-002 — harden the command header into one actual visual surface.
   Only the outer row owns chrome; every direct group/control inside is transparent.
   This deliberately removes the detached-card look while preserving hit targets. */
@media (min-width: 1181px) {
  .gc-header-row-top {
    position: relative;
    isolation: isolate;
    overflow: hidden !important;
    min-height: 2.7rem;
    border: 1px solid rgba(108, 211, 234, 0.34) !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(13, 24, 39, 0.97), rgba(7, 13, 24, 0.97)) !important;
    background-image: linear-gradient(180deg, rgba(13, 24, 39, 0.97), rgba(7, 13, 24, 0.97)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035), 0 4px 16px rgba(0,0,0,0.2) !important;
  }

  .gc-header-row-top > .gc-hslot-brand,
  .gc-header-row-top > .gc-header-meta,
  .gc-header-row-top > .gc-hslot-lang,
  .gc-header-row-top > .gc-hud-user,
  .gc-header-row-top .gc-header-icon-rail {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  .gc-header-row-top > .gc-header-meta {
    flex: 1 1 auto !important;
  }

  .gc-header-row-top > .gc-hslot-lang,
  .gc-header-row-top > .gc-hud-user {
    border-inline-start: 0 !important;
  }

  .gc-header-row-top .gc-logo,
  .gc-header-row-top .gc-hud-panel,
  .gc-header-row-top .gc-score-pill,
  .gc-header-row-top .gc-hud-panel-online,
  .gc-header-row-top .gc-header-fleets-toggle,
  .gc-header-row-top .gc-header-planets-toggle,
  .gc-header-row-top .gc-header-icon-btn,
  .gc-header-row-top .gc-language-switcher,
  .gc-header-row-top .gc-language-switcher select,
  .gc-header-row-top .gc-header-timekeeper,
  .gc-header-row-top .gc-hud-panel-user,
  .gc-header-row-top .gc-admin-badge,
  .gc-header-row-top .logout-btn {
    border: 0 !important;
    outline-offset: -2px;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .gc-header-row-top .gc-logo::before,
  .gc-header-row-top .gc-logo::after,
  .gc-header-row-top .gc-hud-panel::before,
  .gc-header-row-top .gc-hud-panel::after,
  .gc-header-row-top .gc-score-pill::before,
  .gc-header-row-top .gc-score-pill::after,
  .gc-header-row-top .gc-header-fleets-toggle::before,
  .gc-header-row-top .gc-header-fleets-toggle::after,
  .gc-header-row-top .gc-header-planets-toggle::before,
  .gc-header-row-top .gc-header-planets-toggle::after,
  .gc-header-row-top .gc-header-icon-btn::before,
  .gc-header-row-top .gc-header-icon-btn::after,
  .gc-header-row-top .gc-language-switcher::before,
  .gc-header-row-top .gc-language-switcher::after,
  .gc-header-row-top .gc-header-timekeeper::before,
  .gc-header-row-top .gc-header-timekeeper::after,
  .gc-header-row-top .logout-btn::before,
  .gc-header-row-top .logout-btn::after {
    content: none !important;
    display: none !important;
  }

  /* No permanent internal box borders. Separation comes from spacing and hover only,
     so the strip reads as one command surface rather than stitched cards. */
  .gc-header-row-top .gc-header-meta > * + *,
  .gc-header-row-top .gc-header-icon-rail > * + *,
  .gc-header-row-top .gc-hslot-lang > * + *,
  .gc-header-row-top .gc-hud-user > * + * {
    border-inline-start: 0 !important;
  }

  .gc-header-row-top .gc-logo,
  .gc-header-row-top .gc-score-pill,
  .gc-header-row-top .gc-hud-panel-online,
  .gc-header-row-top .gc-header-fleets-toggle,
  .gc-header-row-top .gc-header-planets-toggle,
  .gc-header-row-top .gc-header-icon-btn,
  .gc-header-row-top .gc-language-switcher select,
  .gc-header-row-top .gc-header-timekeeper,
  .gc-header-row-top .gc-hud-panel-user,
  .gc-header-row-top .logout-btn {
    min-height: 2.7rem !important;
  }

  .gc-header-row-top .gc-logo,
  .gc-header-row-top .gc-score-pill,
  .gc-header-row-top .gc-hud-panel-online,
  .gc-header-row-top .gc-header-fleets-toggle,
  .gc-header-row-top .gc-header-planets-toggle,
  .gc-header-row-top .gc-header-icon-btn,
  .gc-header-row-top .gc-language-switcher select,
  .gc-header-row-top .gc-header-timekeeper,
  .gc-header-row-top .gc-hud-panel-user,
  .gc-header-row-top .logout-btn {
    transition: background-color 120ms ease, color 120ms ease !important;
  }

  .gc-header-row-top .gc-logo:hover,
  .gc-header-row-top .gc-score-pill:hover,
  .gc-header-row-top .gc-header-fleets-toggle:hover,
  .gc-header-row-top .gc-header-planets-toggle:hover,
  .gc-header-row-top .gc-header-icon-btn:hover,
  .gc-header-row-top .gc-language-switcher select:hover,
  .gc-header-row-top .gc-header-timekeeper:hover,
  .gc-header-row-top .logout-btn:hover {
    background-color: rgba(105, 222, 255, 0.065) !important;
  }
}