:root {
  --ink: #101423;
  --panel: rgba(255, 255, 255, 0.91);
  --line: rgba(16, 20, 35, 0.13);
  --mint: #0f9f7a;
  --solar: #f3c747;
  --blue: #3478f6;
  --terra: #d46a3c;
  --soft: #eef4f1;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #dfe9e4;
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

body.game-ready {
  overflow: hidden;
}

button {
  font: inherit;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 28px;
  background:
    radial-gradient(circle at 22% 12%, rgba(243, 199, 71, 0.26), transparent 32%),
    radial-gradient(circle at 72% 62%, rgba(52, 120, 246, 0.22), transparent 30%),
    linear-gradient(140deg, #f8fbf6 0%, #d7e8dc 45%, #c6d8e9 100%);
  transition: opacity 600ms ease, visibility 600ms ease;
}

.loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader.dismissed {
  display: none;
}

.loader-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: min(82vw, 760px);
  height: 132px;
  transition: opacity 480ms ease, transform 480ms ease;
  animation: brandExit 6600ms ease forwards;
}

.loader-logo {
  width: min(68vw, 610px);
  max-height: 98px;
  margin-left: clamp(-58px, -4vw, -34px);
  object-fit: contain;
  transform: translateX(-28px);
  animation: logoSlide 2600ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.game-mark {
  display: inline-block;
  color: var(--ink);
  font-size: clamp(42px, 8vw, 88px);
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  margin-right: clamp(4px, 1vw, 10px);
  transform: translateX(34px);
  animation: gameReveal 2600ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.charge-track {
  position: relative;
  width: min(62vw, 520px);
  height: 18px;
  padding: 4px;
  border: 1px solid rgba(16, 20, 35, 0.24);
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.22)),
    rgba(16, 20, 35, 0.12);
  box-shadow:
    inset 0 0 12px rgba(16, 20, 35, 0.18),
    0 0 28px rgba(243, 199, 71, 0.28);
  animation: trackExit 6600ms ease forwards;
}

.charge-fill,
.charge-core {
  position: absolute;
  inset: 4px;
  display: block;
  border-radius: 999px;
  transform-origin: left center;
}

.charge-fill {
  background:
    repeating-linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.1) 0 10px,
      rgba(255, 255, 255, 0.34) 10px 16px
    ),
    linear-gradient(90deg, #13c493 0%, #f3c747 48%, #39a7ff 100%);
  box-shadow:
    0 0 14px rgba(19, 196, 147, 0.9),
    0 0 26px rgba(243, 199, 71, 0.62),
    0 0 38px rgba(52, 120, 246, 0.46);
  animation: charge 2600ms ease forwards;
}

.charge-core {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.92), transparent);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-100%);
  animation: powerSurge 2600ms ease-in-out forwards;
}

.charge-crown {
  position: absolute;
  inset: -34px -32px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0 3px, transparent 4px),
    conic-gradient(
      from 90deg,
      transparent 0deg,
      rgba(255, 244, 168, 0.95) 20deg,
      transparent 38deg,
      transparent 78deg,
      rgba(52, 120, 246, 0.75) 96deg,
      transparent 112deg,
      transparent 168deg,
      rgba(15, 159, 122, 0.75) 188deg,
      transparent 206deg,
      transparent 270deg,
      rgba(243, 199, 71, 0.9) 292deg,
      transparent 314deg
    );
  filter:
    blur(0.2px)
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 20px rgba(243, 199, 71, 0.8))
    drop-shadow(0 0 32px rgba(52, 120, 246, 0.55));
  border-radius: 999px;
  opacity: 0;
  transform: scaleX(0.05) scaleY(0.55);
  transform-origin: left center;
  animation: heroicPulse 6600ms ease forwards;
}

.title-logo {
  width: min(72vw, 650px);
  max-height: 190px;
  opacity: 0;
  transform: translateY(18px) scale(0.94);
  filter:
    drop-shadow(0 16px 30px rgba(16, 20, 35, 0.22))
    drop-shadow(0 0 26px rgba(243, 199, 71, 0.22));
  animation: titleLogoReveal 6600ms ease forwards;
}

.game-shell {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100vw;
  height: 100vh;
  min-height: 620px;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 520ms ease, transform 520ms ease;
}

body.game-ready .game-shell {
  opacity: 1;
  transform: scale(1);
}

.topbar {
  display: grid;
  grid-template-columns: minmax(220px, 330px) 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(246, 250, 247, 0.9);
  backdrop-filter: blur(12px);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-lockup img {
  width: 108px;
  height: 28px;
  object-fit: contain;
}

.brand-lockup span {
  font-weight: 800;
  white-space: nowrap;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(108px, 1fr));
  gap: 8px;
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 8px;
}

.version-badge {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: #52606d;
  font-size: 12px;
  font-weight: 900;
}

.ghost-btn,
.icon-btn {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.ghost-btn {
  padding: 0 12px;
}

.icon-btn {
  width: 34px;
}

.resource {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.resource span {
  color: #52606d;
  font-size: 12px;
  font-weight: 700;
}

.resource strong {
  font-size: 18px;
}

.playfield {
  display: grid;
  grid-template-columns: 300px minmax(360px, 1fr) 300px;
  min-height: 0;
}

.panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  overflow: auto;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.panel-right {
  border-right: 0;
  border-left: 1px solid var(--line);
}

.panel-title {
  display: grid;
  gap: 4px;
}

.panel-title span,
.hud-label {
  color: #60707a;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.panel-title strong {
  font-size: 21px;
}

.compact-title {
  margin-top: 4px;
}

.build-list,
.mission-list {
  display: grid;
  gap: 10px;
}

.build-card,
.mission-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.build-card header,
.mission-card header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.build-card h2,
.mission-card h2 {
  margin: 0;
  font-size: 16px;
}

.build-card p,
.mission-card p {
  margin: 0;
  color: #52606d;
  font-size: 13px;
  line-height: 1.35;
}

.cost {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cost span,
.tag {
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--soft);
  color: #314047;
  font-size: 12px;
  font-weight: 800;
}

.readiness,
.progress-list {
  display: grid;
  gap: 6px;
}

.readiness {
  grid-template-columns: auto auto;
  align-items: center;
  padding-top: 2px;
}

.readiness span,
.progress-row span {
  color: #52606d;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.readiness strong,
.progress-row strong {
  justify-self: end;
  color: #101423;
  font-size: 12px;
  font-weight: 900;
}

.bar {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6ece9;
  box-shadow: inset 0 0 0 1px rgba(16, 20, 35, 0.06);
}

.bar i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint), var(--solar), var(--blue));
}

.dependency-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dependency {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 6px;
  background: #eef4f1;
  color: #314047;
  font-size: 11px;
  font-weight: 900;
}

.dependency em {
  color: #60707a;
  font-style: normal;
}

.dependency.missing {
  background: #fff1d6;
  color: #7a4d11;
}

.dependency.done {
  background: #e2f6ed;
  color: #0f735d;
}

.progress-row {
  display: grid;
  gap: 4px;
}

.progress-row > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.progress-row.dependency .bar i {
  background: linear-gradient(90deg, #6f7d87, var(--blue));
}

.build-card.is-ready {
  border-color: rgba(15, 159, 122, 0.42);
  box-shadow: inset 3px 0 0 rgba(15, 159, 122, 0.74);
}

.build-card button,
.primary-btn {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  cursor: pointer;
  font-weight: 800;
}

.build-card button:disabled {
  cursor: not-allowed;
  background: #a8b2b8;
}

.primary-btn {
  padding: 0 15px;
  background: var(--mint);
}

.scene-wrap {
  position: relative;
  min-width: 0;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 42%),
    #bcdac8;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

.scene-hud {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 160px)) auto;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.scene-hud > div,
.scene-hud button {
  pointer-events: auto;
}

.scene-hud > div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
}

.scene-hud strong {
  font-size: 18px;
}

.log-box {
  min-height: 92px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #142033;
  color: #d8f8ea;
  font-size: 13px;
  line-height: 1.45;
}

.leaderboard-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.leaderboard-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  font-size: 13px;
  font-weight: 800;
}

.leaderboard-list strong {
  color: var(--mint);
}

.leaderboard-list .is-player {
  border-color: rgba(15, 159, 122, 0.5);
  background: #eaf8f2;
}

.leaderboard-list .empty-rank {
  justify-content: center;
  color: #60707a;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(16, 20, 35, 0.44);
  backdrop-filter: blur(9px);
}

.modal-backdrop.hidden {
  display: none;
}

.modal-panel {
  width: min(92vw, 520px);
  max-height: min(82vh, 720px);
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(16, 20, 35, 0.3);
}

.start-panel {
  display: grid;
  gap: 12px;
}

.modal-panel h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
}

.modal-kicker {
  color: var(--mint);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.modal-panel label {
  color: #52606d;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.modal-panel input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.modal-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.changelog-list {
  display: grid;
  gap: 10px;
}

.changelog-entry {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.changelog-entry header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.changelog-entry strong {
  font-size: 18px;
}

.changelog-entry span {
  color: #60707a;
  font-size: 12px;
  font-weight: 800;
}

.changelog-entry ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: #52606d;
  font-size: 14px;
  line-height: 1.35;
}

@keyframes gameReveal {
  0%,
  36% {
    opacity: 0;
    transform: translateX(50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes brandExit {
  0%,
  70% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  80%,
  100% {
    opacity: 0;
    transform: translateY(-16px) scale(0.96);
  }
}

@keyframes logoSlide {
  0%,
  36% {
    transform: translateX(-28px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes charge {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes trackExit {
  0%,
  70% {
    opacity: 1;
    transform: translateY(0);
  }

  80%,
  100% {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes powerSurge {
  0%,
  16% {
    opacity: 0;
    transform: translateX(-100%) scaleX(0.25);
  }

  22%,
  52%,
  78% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
    transform: translateX(100%) scaleX(0.7);
  }
}

@keyframes heroicPulse {
  0%,
  22% {
    opacity: 0;
    transform: scaleX(0.05) scaleY(0.55);
  }

  38%,
  58% {
    opacity: 0.82;
    transform: scaleX(1) scaleY(1);
  }

  70%,
  100% {
    opacity: 0;
    transform: scaleX(1.08) scaleY(1.18);
  }
}

@keyframes titleLogoReveal {
  0%,
  72% {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }

  82%,
  94% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-8px) scale(1.02);
  }
}

@media (max-width: 1040px) {
  body {
    overflow: auto;
  }

  body.game-ready {
    overflow: auto;
  }

  .game-shell {
    height: auto;
    min-height: 100vh;
  }

  .topbar,
  .playfield {
    grid-template-columns: 1fr;
  }

  .top-actions {
    justify-content: start;
  }

  .resource-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .scene-wrap {
    height: 58vh;
    min-height: 420px;
    order: -1;
  }

  .panel,
  .panel-right {
    border: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  .topbar {
    padding: 12px;
  }

  .scene-hud {
    grid-template-columns: 1fr;
  }

  .modal-panel h1 {
    font-size: 24px;
  }

  .loader-brand {
    min-width: 94vw;
  }

  .loader-logo {
    width: min(58vw, 430px);
  }
}