:root {
  --bg: #050913;
  --panel: rgba(9, 16, 31, 0.8);
  --line: rgba(130, 177, 255, 0.3);
  --ink: #edf5ff;
  --muted: #a7bbda;
  --accent: #5ebdff;
  --accent-2: #8f7cff;
  --danger: #ff8a8a;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100svh;
  font-family: "Space Grotesk", "Trebuchet MS", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% -10%, rgba(95, 160, 255, 0.24), transparent 35%),
    radial-gradient(circle at 88% -10%, rgba(173, 130, 255, 0.2), transparent 36%),
    linear-gradient(180deg, #0a1220 0%, var(--bg) 68%, #03060d 100%);
}

.space-shell {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0.9rem;
  padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
  padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 0.75rem;
}

.hud-bar {
  border: 1px solid var(--line);
  border-radius: 0.86rem;
  background: var(--panel);
  backdrop-filter: blur(10px);
  padding: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.hud-left,
.hud-right {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  flex-wrap: wrap;
}

.chip {
  border: 1px solid rgba(130, 177, 255, 0.34);
  border-radius: 999px;
  padding: 0.22rem 0.62rem;
  font-size: 0.83rem;
  background: rgba(7, 13, 26, 0.76);
}

.btn {
  cursor: pointer;
  border: 1px solid rgba(132, 176, 255, 0.35);
  border-radius: 0.7rem;
  background: rgba(10, 18, 34, 0.82);
  color: var(--ink);
  font: 700 0.84rem/1 "Space Grotesk", sans-serif;
  text-decoration: none;
  padding: 0.48rem 0.82rem;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.btn:hover {
  border-color: rgba(132, 176, 255, 0.68);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn.primary {
  border-color: rgba(132, 176, 255, 0.7);
  background: linear-gradient(130deg, #2e7ec7, #5e7bff);
}

.btn.ghost {
  background: rgba(7, 13, 28, 0.5);
}

.btn.donate {
  border-color: rgba(255, 214, 151, 0.72);
  background: linear-gradient(130deg, #ffcb78, #ff9f6e);
  color: #2f1505;
}

.stage-shell {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 0.96rem;
  overflow: hidden;
  background: rgba(4, 9, 17, 0.84);
  min-height: clamp(360px, 66svh, 740px);
}

#gameStage {
  width: min(100%, 1120px);
  aspect-ratio: 16 / 9;
  max-height: 79svh;
  min-height: 360px;
  margin: 0 auto;
}

#gameStage canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  touch-action: none;
}

.overlay-card {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(92%, 480px);
  border: 1px solid rgba(128, 169, 255, 0.42);
  border-radius: 1rem;
  background: linear-gradient(170deg, rgba(10, 18, 35, 0.95), rgba(7, 10, 25, 0.93));
  padding: 0.95rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.44);
  z-index: 30;
}

.overlay-card.hidden {
  display: none;
}

.overlay-tag {
  display: inline-flex;
  padding: 0.22rem 0.58rem;
  border-radius: 999px;
  border: 1px solid rgba(141, 181, 255, 0.44);
  color: #cde3ff;
  font-size: 0.76rem;
  margin: 0 0 0.48rem;
}

.overlay-card h1,
.overlay-card h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3.4vw, 2rem);
}

.overlay-copy {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.overlay-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.overlay-kpis {
  margin-top: 0.78rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.overlay-kpis span {
  border: 1px solid rgba(120, 165, 247, 0.32);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  font-size: 0.82rem;
}

.mini-board {
  margin-top: 0.8rem;
  border: 1px solid rgba(128, 169, 255, 0.28);
  border-radius: 0.85rem;
  padding: 0.65rem;
  background: rgba(6, 14, 30, 0.58);
}

.mini-board h2 {
  margin: 0;
  font-size: 1rem;
}

.mini-board ol {
  margin: 0.55rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.32rem;
}

.mini-board li {
  color: #d5e4f9;
  font-size: 0.85rem;
}

.donate-link {
  display: inline-flex;
  margin-top: 0.72rem;
  color: #98c8ff;
  font-size: 0.84rem;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.56rem;
}

.info-card {
  border: 1px solid rgba(122, 164, 243, 0.24);
  border-radius: 0.86rem;
  background: rgba(7, 14, 27, 0.82);
  padding: 0.7rem;
}

.info-card h2 {
  margin: 0;
  font-size: 1.04rem;
}

.info-card p,
.info-card li,
.info-card th,
.info-card td {
  color: #c6d9f5;
  font-size: 0.82rem;
}

.info-card ul {
  margin: 0.48rem 0 0;
  padding-left: 1rem;
}

.info-card table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

.info-card th,
.info-card td {
  border-bottom: 1px solid rgba(122, 164, 243, 0.2);
  text-align: left;
  padding: 0.28rem 0.2rem;
}

@media (max-width: 960px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  #gameStage {
    min-height: 320px;
  }

  .overlay-card {
    left: 50%;
    bottom: 0.65rem;
    width: min(94%, 440px);
    padding: 0.78rem;
  }
}