/* Style B: dark slate, game first */
:root {
  --bg: #151a24;
  --panel: #1f2633;
  --fg: #e8ecf3;
  --muted: #a7b0c0;
  --accent: #9fc3ff;
  --gold: #f2c46b;
  font-size: clamp(15px, 0.6vw + 12px, 18px);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; }
/* System fonts only: no Google Fonts, so no visitor IPs go to Google (GDPR) */
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--fg); line-height: 1.55; }
a { color: inherit; }
.wrap { max-width: 68rem; margin: 0 auto; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.2rem; flex-wrap: wrap; }
nav .logo img { height: 2.2rem; display: block; }
nav .links { display: flex; gap: 1.2rem; font-size: .95rem; flex-wrap: wrap; }
nav .links a { text-decoration: none; opacity: .85; }
nav .links a:hover, nav .links a:focus-visible { opacity: 1; text-decoration: underline; }

.hero { margin-block: 1rem 3rem; padding: clamp(2rem, 6vw, 4rem) clamp(1.2rem, 4vw, 2.5rem); border-radius: 1.5rem;
  background: radial-gradient(circle at 75% 25%, #3b5b8c, #1d2433 70%); display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.hero .tag { font-size: .85rem; color: var(--accent); font-weight: 600; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 800; margin-block: .3rem; text-wrap: balance; }
.hero p { max-width: 32rem; color: var(--muted); }
.hero .game-icon { width: clamp(6rem, 14vw, 10rem); border-radius: 1.4rem; box-shadow: 0 1rem 3rem #0006; }
@media (max-width: 40rem) { .hero { grid-template-columns: 1fr; } .hero .game-icon { order: -1; } }
.btn { display: inline-block; margin-top: 1.4rem; padding: .75rem 1.3rem; border-radius: .6rem; background: var(--fg); color: var(--bg); text-decoration: none; font-weight: 600; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.btn.ghost { background: transparent; border: 1px solid #e8ecf366; color: var(--fg); }

h2 { font-size: 1.6rem; margin-block: 2.5rem 1rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card { background: var(--panel); border-radius: 1rem; padding: 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.card img { width: 3.5rem; height: 3.5rem; border-radius: .9rem; }
.card h3 { font-size: 1.15rem; }
.card p { color: var(--muted); font-size: .95rem; flex: 1; }
.card .status { font-size: .8rem; color: var(--gold); font-weight: 600; }
.card .links { display: flex; gap: 1rem; font-size: .9rem; color: var(--accent); }

form { background: var(--panel); border-radius: 1rem; padding: 1.5rem; display: grid; gap: 1rem; max-width: 40rem; }
label { display: grid; gap: .3rem; font-size: .9rem; color: var(--muted); }
input, select, textarea { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid #ffffff22; border-radius: .5rem; padding: .6rem .8rem; }
textarea { min-height: 8rem; resize: vertical; }
.hp { position: absolute; left: -9999px; }
#form-status { font-size: .9rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.legal { max-width: 44rem; padding-block: 1rem 3rem; }
.legal h1 { font-size: 2rem; margin-bottom: 1rem; }
.legal h2 { font-size: 1.2rem; margin-block: 1.8rem .5rem; }
.legal p, .legal li { color: var(--muted); }
.legal ul { padding-left: 1.2rem; }

footer { padding-block: 3rem 2rem; font-size: .85rem; color: var(--muted); display: flex; gap: 1.2rem; flex-wrap: wrap; }