@font-face {
  font-family: 'DotGothic16';
  src: url('fonts/DotGothic16-subset.woff2') format('woff2');
  font-display: swap;
}
:root {
  --night: #15102a; --panel: #211a3f; --line: #45397f;
  --cream: #f6ead2; --muted: #aaa2d4; --amber: #ffb347; --amber2: #8a5200;
}
* { box-sizing: border-box; }
html { background: var(--night); }
body {
  margin: 0; background: var(--night); color: var(--cream);
  font-family: 'DotGothic16', 'Hiragino Kaku Gothic ProN', 'Noto Sans CJK JP', system-ui, sans-serif;
  font-size: 17px; line-height: 1.6;
}
a { color: var(--amber); }
img { max-width: 100%; height: auto; }

/* Language switch: only the active language's spans are shown (English without JS). */
[data-l] { display: none; }
html:not([data-lang]) [data-l="en"],
html[data-lang="ja"] [data-l="ja"], html[data-lang="en"] [data-l="en"],
html[data-lang="zh"] [data-l="zh"], html[data-lang="ko"] [data-l="ko"] { display: inline; }

.top { display: flex; justify-content: flex-end; padding: 12px 16px; }
.langs { display: flex; flex-wrap: wrap; gap: 6px; }
.langs button {
  font: inherit; font-size: 14px; color: var(--muted); background: var(--panel);
  border: 2px solid var(--line); padding: 4px 10px; cursor: pointer;
}
.langs button[aria-pressed="true"] { color: var(--amber); border-color: var(--amber); }

main { max-width: 960px; margin: 0 auto; padding: 0 16px; }
.hero { text-align: center; padding: 24px 0 32px; }
.icon { image-rendering: pixelated; border: 3px solid var(--line); }
h1 { font-size: clamp(32px, 7vw, 52px); color: var(--amber); margin: 16px 0 8px; font-weight: normal; letter-spacing: 1px; }
.lead { font-size: 19px; margin: 0 auto 24px; max-width: 36em; }
.play {
  display: inline-block; text-decoration: none; color: var(--amber);
  background: #3a2400; border: 3px solid var(--amber); padding: 12px 28px; font-size: 20px;
}
.play:hover { background: var(--amber2); }

.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.shots img { border: 3px solid var(--line); display: block; }
@media (max-width: 640px) {
  .shots { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 70%; overflow-x: auto; scroll-snap-type: x mandatory; }
  .shots img { scroll-snap-align: center; }
}

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 32px 0; }
.card { background: var(--panel); border: 2px solid var(--line); padding: 16px 18px; }
.card h2 { font-size: 20px; color: var(--amber); margin: 0 0 8px; font-weight: normal; }
.card p { margin: 0; color: var(--cream); }

footer { text-align: center; color: var(--muted); padding: 24px 16px 40px; font-size: 15px; }
footer p { margin: 8px 0 0; }

/* Privacy page */
.doc { max-width: 760px; margin: 0 auto; padding: 8px 16px 40px; }
.doc h1 { font-size: 30px; }
.doc h2 { font-size: 21px; color: var(--amber); font-weight: normal; margin: 28px 0 6px; }
.doc .updated { color: var(--muted); }
.doc hr { border: 0; border-top: 2px solid var(--line); margin: 40px 0; }
.back { display: inline-block; margin: 16px; }