:root {
  /* the capsules' flat sky bands (pixkit indigo 0-3, backdrop 0-1) */
  --sky0: #1c2545; --sky1: #2f3e6b; --sky2: #40538a; --sky3: #56699e; --sky4: #52709a; --sky5: #6384ad;
  --cream: #f1e6d2;
  --wood: #5a3a24;
  --wood-dark: #2b2230;
  --gold: #e0b84a;
  --seal: #c8423a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: linear-gradient(var(--sky0) 0 16%, var(--sky1) 16% 32%, var(--sky2) 32% 48%,
                              var(--sky3) 48% 64%, var(--sky4) 64% 80%, var(--sky5) 80%);
  background-color: var(--sky0);
  color: var(--cream);
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  display: flex; flex-direction: column; min-height: 100vh; position: relative;
}
img { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
main {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; padding: 56px 16px 40px; text-align: center;
}
.logo { width: 596px; max-width: 100%; height: auto; } /* 149px art at 4x */
.tagline { font-size: 1.25rem; letter-spacing: .04em; }
.tagline em { font-style: normal; color: var(--gold); }
.date { color: var(--gold); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .95rem; }
.wishlist {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--seal); color: var(--cream); text-decoration: none;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 14px 28px; border: 3px solid var(--cream);
  box-shadow: 0 4px 0 var(--wood-dark);
  transition: transform .08s, box-shadow .08s;
}
.wishlist:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--wood-dark); }
.wishlist:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--wood-dark); }
.wishlist svg { width: 22px; height: 22px; fill: currentColor; }
.blurb { max-width: 36em; opacity: .85; }
/* the game strip at 1x, transparent sky, shop end anchored right like on a desktop */
/* flex: none - when the text is taller than the screen (phones) the column used to shrink this
   box and clip the shop off, leaving only the tower's tip above the footer */
.strip { display: flex; justify-content: flex-end; overflow: hidden; flex: none; }
.strip img { flex: none; }
footer {
  background: var(--wood-dark); color: #b9a98f; font-size: .85rem;
  padding: 14px 16px; text-align: center;
}
footer a { color: var(--cream); }
.lang {
  position: absolute; top: 14px; right: 16px; font-size: .9rem;
  color: var(--cream); text-decoration: none; opacity: .8;
  border-bottom: 1px solid currentColor;
}
.lang:hover { opacity: 1; }
/* Japanese: no caps or wide tracking, a JP-first font stack, slightly looser lines */
:lang(ja) body { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; line-height: 1.8; }
:lang(ja) .tagline, :lang(ja) .date, :lang(ja) .wishlist { letter-spacing: .06em; text-transform: none; }
:lang(ja) .tagline, :lang(ja) .blurb { word-break: auto-phrase; } /* Chrome 119+: wrap at phrase boundaries, not mid-word */
@media (max-width: 640px) {
  .tagline { font-size: 1.05rem; }
  .logo { width: 298px; } /* 2x */
  main { gap: 18px; padding: 28px 16px 24px; }
}