/* v0.4.8 selective visual merge: premium shell without touching gameplay or D1. */
.game-shell {
  grid-template-rows: var(--header-h) minmax(0, 1fr);
  background:
    radial-gradient(circle at 74% -12%, rgba(54, 133, 184, .13), transparent 42%),
    linear-gradient(145deg, var(--bg-0), #050c16 48%, #03070d);
}
.nv-topbar {
  position: relative;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(420px, 1fr) auto;
  align-items: center;
  min-width: 0;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(9,20,33,.985), rgba(6,15,25,.965));
  box-shadow: 0 10px 35px rgba(0,0,0,.24);
  backdrop-filter: blur(18px);
}
.nv-topbar::after {
  content: "";
  position: absolute;
  left: var(--sidebar-w);
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--module-accent, var(--cyan)), transparent 38%);
  opacity: .6;
}
.nv-brand {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-right: 1px solid var(--line-soft);
  min-width: 0;
}
.nv-brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  clip-path: polygon(22% 0,100% 0,100% 78%,78% 100%,0 100%,0 22%);
  border: 1px solid rgba(94,203,255,.42);
  background: linear-gradient(135deg, rgba(94,203,255,.2), rgba(151,134,255,.1));
  color: var(--cyan);
  font-weight: 900;
  box-shadow: inset 0 0 18px rgba(94,203,255,.12), 0 0 24px rgba(94,203,255,.08);
}
.nv-brand-copy { min-width: 0; display: flex; flex-direction: column; }
.nv-brand-copy strong { letter-spacing: .19em; font-size: .82rem; }
.nv-brand-copy small { margin-top: 2px; color: var(--text-3); font-size: .66rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-topbar .top-nav { height: 100%; justify-content: center; overflow-x: auto; }
.nv-topbar .top-nav-btn {
  min-width: 92px;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 0;
  border-radius: 0;
  color: var(--text-3);
  background: transparent;
  text-transform: none;
  letter-spacing: .01em;
  font-size: .84rem;
  font-weight: 650;
  box-shadow: none;
}
.nv-topbar .top-nav-btn::after {
  left: 20%;
  right: 20%;
  height: 2px;
  transform: scaleX(0);
  transition: transform var(--normal) var(--ease);
}
.nv-topbar .top-nav-btn:hover { transform: none; color: var(--text-1); background: linear-gradient(0deg, rgba(94,203,255,.07), transparent 72%); }
.nv-topbar .top-nav-btn.active { color: var(--text-1); background: linear-gradient(0deg, rgba(94,203,255,.08), transparent 78%); }
.nv-topbar .top-nav-btn.active::after { transform: scaleX(1); }
.nv-topbar .top-nav-btn .nv-icon { width: 16px; height: 16px; }
.nv-topbar .top-status { min-width: 0; height: 100%; padding: 0 14px; gap: 7px; border-left: 1px solid var(--line-soft); }
.commander-chip {
  min-height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  border-color: var(--line-soft);
  box-shadow: none;
}
.commander-chip:hover { border-color: var(--line-active); background: rgba(94,203,255,.06); }
.commander-chip small { display: block; color: var(--text-3); font-size: .55rem; letter-spacing: .1em; }
.commander-chip strong { display: block; font-size: .74rem; }
.global-layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.nv-intel-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 18px 15px;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(8,19,31,.98), rgba(5,13,22,.98));
  border-right: 1px solid var(--line-soft);
}
.nv-sidebar-context { padding: 3px 4px 18px; display: flex; flex-direction: column; border-bottom: 1px solid var(--line-soft); }
.nv-sidebar-context small { color: var(--text-3); font-size: .58rem; letter-spacing: .15em; }
.nv-sidebar-context strong { margin-top: 4px; font-size: 1.12rem; }
.nv-sidebar-context span { color: var(--module-accent, var(--cyan)); font-size: .78rem; }
.nv-intel-block { padding: 17px 4px; border-bottom: 1px solid var(--line-soft); }
.nv-intel-title { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; color: var(--text-2); font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; }
.nv-intel-title .nv-icon { width: 15px; height: 15px; color: var(--module-accent, var(--cyan)); }
.nv-intel-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; color: var(--text-2); font-size: .74rem; }
.nv-intel-row strong { color: var(--text-1); }
.good-text { color: var(--green) !important; }
.warning-text { color: var(--amber) !important; }
.nv-alert-row { display: grid; grid-template-columns: 4px 1fr; gap: 9px; padding: 8px 0; }
.nv-alert-row > i { width: 3px; border-radius: 2px; background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.nv-alert-row.info > i { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.nv-alert-row.good > i { background: var(--green); box-shadow: 0 0 8px var(--green); }
.nv-alert-row.danger > i { background: var(--red); box-shadow: 0 0 8px var(--red); }
.nv-alert-row strong, .nv-alert-row span { display: block; }
.nv-alert-row strong { font-size: .74rem; }
.nv-alert-row span { color: var(--text-3); font-size: .65rem; line-height: 1.35; }
.nv-intel-block.compact p { margin: 0; color: var(--text-2); font-size: .72rem; line-height: 1.55; }
.nv-sidebar-foot { margin-top: auto; padding: 11px 9px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 7px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(7,17,29,.9); color: var(--text-3); font-size: .58rem; }
.nv-sidebar-foot strong { color: var(--text-2); }
.global-content { padding: var(--content-pad); scrollbar-gutter: stable; }
.view-stage { min-height: 100%; animation: nv-view-in var(--normal) var(--ease); }
.module-overview { --module-accent: var(--cyan); }
.module-planet { --module-accent: #72d3a0; }
.module-city { --module-accent: var(--industrial); }
.module-system { --module-accent: var(--cyan); }
.module-orbit { --module-accent: #72aaff; }
.module-galaxy { --module-accent: var(--violet); }
@keyframes nv-view-in { from { opacity: .3; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* More depth and stronger hierarchy for the existing v0.4.6 module cards. */
.view-head { margin-bottom: 1rem; }
.view-head h1 { font-size: clamp(1.85rem, 3vw, 2.65rem); letter-spacing: -.035em; }
.overview-hero, .dashboard-card, .panel-card, .building-card, .construction-queue-panel, .city-resource-strip div {
  box-shadow: var(--inner-glow), 0 12px 34px rgba(0,0,0,.16);
}
.dashboard-card, .building-card, .panel-card {
  transition: transform var(--fast) var(--ease), border-color var(--fast), background var(--fast), box-shadow var(--fast);
}
.dashboard-card:hover, .building-card:hover, .panel-card:hover {
  transform: translateY(-2px);
  border-color: rgba(94,203,255,.3);
  box-shadow: var(--inner-glow), 0 18px 44px rgba(0,0,0,.25), 0 0 24px rgba(94,203,255,.05);
}
.overview-hero { min-height: 190px; grid-template-columns: minmax(430px, 1.05fr) minmax(420px, .95fr); }
.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.25rem, 2vw, 2rem); }
.hero-visual { min-height: 190px; padding: .75rem; }
.hero-visual img { transition: transform 8s ease; }
.overview-hero:hover .hero-visual img { transform: scale(1.025); }
.empire-summary { background: linear-gradient(180deg, rgba(13,28,44,.72), rgba(7,17,31,.72)); box-shadow: var(--inner-glow); }
.empire-metric { min-height: 74px; }
.metric-icon { background: var(--cyan-soft); border: 1px solid rgba(94,203,255,.13); }
.dashboard-card { background: linear-gradient(180deg, var(--surface-2), rgba(7,16,28,.78)); }
.card-art { height: 104px; border-radius: 12px; overflow: hidden; }
.building-list { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.building-card { padding: 0; overflow: hidden; background: linear-gradient(180deg, var(--surface-2), var(--surface-1)); }
.building-art { height: 145px; margin: 0; border: 0; border-radius: 0; }
.building-card-body { padding: 14px; }
.city-resource-strip { gap: 8px; }
.city-resource-strip div { background: linear-gradient(180deg, rgba(15,31,48,.86), rgba(8,18,31,.82)); }
.button-primary, .button-secondary, .button-ghost, .choice-button {
  min-height: 38px;
  box-shadow: var(--inner-glow);
}
.button-primary:hover:not(:disabled), .button-secondary:hover:not(:disabled), .button-ghost:hover:not(:disabled), .choice-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--inner-glow), 0 8px 24px rgba(0,0,0,.2), 0 0 18px rgba(94,203,255,.08);
}
@media (max-width: 1550px) {
  .nv-topbar { grid-template-columns: 218px minmax(380px, 1fr) auto; }
  .global-layout { grid-template-columns: 218px minmax(0,1fr); }
  .nv-chip.neutral:nth-child(2) { display: none; }
  .building-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 1260px) {
  .nv-topbar { grid-template-columns: 208px minmax(0,1fr) auto; }
  .nv-topbar .top-nav-btn { min-width: 72px; padding: 0 8px; }
  .nv-topbar .top-nav-btn span { display: none; }
  .nv-topbar .top-nav-btn .nv-icon { width: 19px; height: 19px; }
  .nv-topbar .top-status .nv-chip:nth-child(3) { display: none; }
  .global-layout { grid-template-columns: 208px minmax(0,1fr); }
  .overview-hero { grid-template-columns: 1fr 42%; }
  .building-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 980px) {
  :root { --sidebar-w: 0px; }
  .nv-topbar { grid-template-columns: 150px minmax(0,1fr) auto; }
  .nv-intel-sidebar { display: none; }
  .global-layout { grid-template-columns: minmax(0,1fr); }
  .nv-topbar::after { left: 150px; }
  .nv-topbar .top-status .nv-chip { display: none; }
  .overview-hero { grid-template-columns: 1fr; }
  .hero-visual { min-height: 220px; }
}
@media (max-width: 760px) {
  html, body, .app-root { width: 100%; height: 100%; min-height: 100%; overflow: hidden; }
  .game-shell { width: 100%; height: 100dvh; min-height: 100dvh; grid-template-rows: 58px minmax(0,1fr); overflow: hidden; }
  .nv-topbar { grid-template-columns: 118px minmax(0,1fr); height: 58px; }
  .nv-brand { padding: 0 10px; gap: 8px; }
  .nv-brand-mark { width: 31px; height: 31px; }
  .nv-brand-copy small { display: none; }
  .nv-topbar .top-status { display: none; }
  .nv-topbar .top-nav { justify-content: flex-start; }
  .nv-topbar .top-nav-btn { min-width: 54px; }
  .global-layout { min-height: 0; height: 100%; overflow: hidden; }
  .global-content { min-height: 0; height: 100%; overflow-y: auto; overflow-x: hidden; padding: 12px; }
  .empire-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .building-list { grid-template-columns: 1fr; }
  .overview-shortcuts, .city-resource-strip, .building-meta { grid-template-columns: 1fr; }
}