/* Palette taken from the game itself:
   night sky, teal facade glass, warm window light, silver mullion. */
:root {
  --bg:    #0d131e;  /* night sky */
  --ink:   #e9eef3;
  --muted: #8a97a6;
  --link:  #7fb3a8;  /* facade glass */
  --lit:   #f0bd72;  /* a lit window */
  --rule:  #262f3d;
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  padding: 48px 22px 80px;
  max-width: 720px;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.7 -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Matches the in-game logo: IBM Plex Sans Condensed, YUME bold over TOWER light. */
h1 {
  font-family: "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2.4rem, 10vw, 3.9rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--lit);
  margin: 0 0 0.35em;
}

h1 .thin { display: block; font-weight: 300; }

h2 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 2.6em 0 0.6em;
}

p { margin: 0 0 1em; }
ul { padding-left: 1.3em; margin: 0 0 1em; }
li { margin-bottom: 0.35em; }

a { color: var(--link); }
a:hover { color: var(--lit); }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.tagline {
  font-size: 1.15rem;
  color: var(--muted);
  margin: 0 0 2em;
}

.note { color: var(--muted); font-size: 0.9rem; }

.wip {
  display: inline-block;
  vertical-align: 0.45em;
  margin-left: 0.5em;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 2px 7px;
  text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

/* buttons */
.buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 0.9em; }

.btn {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
}
.btn:hover { background: var(--lit); border-color: var(--lit); color: #2a1e0c; }

.buttons { align-items: center; }
.buttons p { margin: 0; }

/* the one thing to press */
.btn.primary {
  background: var(--lit);
  border-color: var(--lit);
  color: #21180a;
  font-weight: 600;
  padding: 12px 24px;
}
.btn.primary:hover {
  background: #f7cd8b;
  border-color: #f7cd8b;
  color: #21180a;
}

/* not yet available */
.btn.soon {
  color: var(--muted);
  border-style: dashed;
  cursor: default;
  pointer-events: none;
}

/* images */
figure { margin: 2em 0; }

figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
}

figcaption {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* image grids — always two across, so pairs stay comparable */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 480px) {
  .grid { gap: 6px; }
}

/* video thumbnail */
.video a { display: block; border: 0; }
.video img { transition: opacity 0.2s ease; }
.video a:hover img { opacity: 0.82; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 3em 0 2em; }

footer { font-size: 0.9rem; color: var(--muted); }
footer a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}