/* Hexagon Cells – static site styles. Tokens first; no raw colors below :root. */

/* Self-hosted fonts (SIL Open Font License), latin + latin-ext subsets only */
@font-face {
  font-family: "Mochiy Pop One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mochiy-pop-one-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/urbanist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/urbanist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand palette (light-blue / cyan family) */
  --c-cyan-100: #b1e9fa;
  --c-cyan-300: #52c1ec;
  --c-paper: #f1fbfe;
  --c-white: #ffffff;
  --c-ink: #0a2540;        /* navy text */
  --c-muted: #3b4e60;      /* secondary text */
  --c-blue-700: #0b5a85;   /* white text / links on light */
  --c-navy-900: #071d33;   /* dark sections */
  --c-hover: rgb(255 255 255 / 0.6);
  --c-line: rgb(10 37 64 / 0.16);

  /* Theme moods (from the game) */
  --classic-bg: #d9f3fc;
  --classic-ink: #0a2540;
  --garden-bg: #f1e3b8;
  --garden-ink: #22381f;
  --garden-accent: #6e9a62;
  --garden-gold: #b08a3e;
  --neon-bg: #0e1638;
  --neon-ink: #e9eeff;
  --neon-accent: #00f0ff;
  --neon-magenta: #ec00ff;
  --nightgold-bg: #0a1226;
  --nightgold-ink: #f6eed8;
  --nightgold-gold: #e0b04a;

  --shadow-color: rgb(7 29 51 / 0.18);

  /* Type */
  --font-display: "Mochiy Pop One", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-body: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-small: 0.9375rem;
  --fs-h1: clamp(2.1rem, 1.2rem + 3.9vw, 3.875rem);
  --fs-h2: clamp(1.65rem, 1.15rem + 2.4vw, 2.75rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);

  /* Space & shape */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  --s-4: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --s-5: clamp(3.5rem, 2.4rem + 5.5vw, 7rem);
  --gutter: clamp(1rem, 0.5rem + 3vw, 2.5rem);
  --r-sm: 0.75rem;
  --r-md: 1.25rem;
  --r-pill: 999px;
  --measure: 62ch;
  --tap: 2.75rem; /* 44px */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-paper);
}
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.12; text-wrap: balance; }
h1, h2, .brand { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 800; }
p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
a { color: var(--c-blue-700); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--c-blue-700); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--c-cyan-300); color: var(--c-navy-900); }
.skip {
  position: absolute; left: var(--s-1); top: -4rem; z-index: 10;
  background: var(--c-navy-900); color: var(--c-white); padding: 0.75rem 1rem; border-radius: var(--r-sm);
}
.skip:focus { top: var(--s-1); }

.wrap { width: min(100%, 72rem); margin-inline: auto; }
.section, .privacy, .hero, .site-header, .site-footer, .legal { padding-inline: var(--gutter); }
.section { padding-block: var(--s-5); position: relative; isolation: isolate; }
.section > .wrap > h2 { margin-bottom: var(--s-2); }
.lede { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); color: var(--c-muted); }
/* Short intro lines span the content width and break evenly instead of leaving orphans */
.lede, .free .wrap > p, .cta p { text-wrap: balance; }
.section > .wrap > .lede, .theme-note, .free .wrap > p { max-width: none; }

/* Honeycomb texture: subtle, behind content */
.honey::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../images/hex-pattern.webp") center / 220px auto repeat;
  opacity: 0.12; pointer-events: none;
}

/* Header / nav */
.site-header { background: var(--c-cyan-100); position: relative; z-index: 2; }
.nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0 var(--s-2); padding-block: 0.25rem;
}
.brand {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-size: 1.15rem; color: var(--c-ink); text-decoration: none;
}
.nav ul { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0 0.25rem; }
.nav a:not(.brand) {
  display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 0.55rem;
  color: var(--c-ink); font-weight: 600; font-size: var(--fs-small); text-decoration: none; border-radius: var(--r-sm);
}
.nav a:not(.brand):hover { background: var(--c-hover); }
.nav a[aria-current] { font-weight: 800; text-decoration: underline; text-underline-offset: 0.25em; }
.nav .lang { display: flex; align-items: center; margin-left: 0.25rem; }
.nav .lang a { padding-inline: 0.45rem; }
.nav .lang span[aria-hidden] { color: var(--c-muted); }
@media (min-width: 40em) {
  .nav { flex-wrap: nowrap; }
  .nav a:not(.brand) { font-size: 1rem; padding-inline: 0.8rem; }
  .brand { font-size: 1.35rem; }
}

/* Buttons & store badge */
.badge { display: inline-block; line-height: 0; border-radius: 13px; }
.badge img { width: 250px; height: 83px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap);
  padding: 0.6rem 1.4rem; border-radius: var(--r-pill); font-weight: 800; text-decoration: none;
  background: var(--c-ink); color: var(--c-white);
}
.btn:hover { background: var(--c-blue-700); }

/* Hero */
.hero { background: linear-gradient(180deg, var(--c-cyan-100) 0%, var(--c-paper) 100%); padding-block: var(--s-4) var(--s-5); overflow: hidden; }
.hero .wrap { display: grid; gap: var(--s-4); align-items: center; }
.hero-copy { display: grid; gap: var(--s-3); justify-items: start; }
/* Hero intro fills the copy column like the headline above it; balance would shrink it to a narrow block */
.hero .lede { max-width: none; text-wrap: pretty; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); }
.hero-note { font-weight: 600; color: var(--c-muted); font-size: var(--fs-small); }
.hero-phone { justify-self: center; width: min(78%, 20rem); transform: rotate(3deg); filter: drop-shadow(0 1.25rem 1.5rem var(--shadow-color)); }
.hero-phone img { width: 100%; }
/* Each sentence of the hero headline is its own line */
.hero h1 .line { display: block; }
@media (min-width: 56em) {
  /* Fixed phone column leaves the headline enough room for one sentence per line from 1280px */
  .hero .wrap { grid-template-columns: minmax(0, 1fr) 20rem; }
  .hero-phone { width: 100%; }
}

/* Gameplay */
.cards { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.card {
  background: var(--c-white); border-radius: var(--r-md); padding: var(--s-3);
  box-shadow: 0 0.5rem 1.5rem var(--shadow-color); display: grid; gap: var(--s-2); align-content: start;
}
.card video {
  width: 100%; max-width: 14rem; aspect-ratio: 200 / 432; height: auto; margin-inline: auto;
  border-radius: var(--r-sm); background: var(--c-cyan-100); object-fit: cover;
}
.card p { color: var(--c-muted); }
.tips { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--c-line); display: grid; gap: var(--s-2); }
.tip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2) var(--s-3); }
.tip-list li { color: var(--c-muted); text-wrap: pretty; }
.tip-list strong { display: block; color: var(--c-ink); font-weight: 800; margin-bottom: 0.25rem; }
@media (min-width: 48em) {
  .cards, .tip-list { grid-template-columns: repeat(3, 1fr); }
  .tip-list li { padding-inline: var(--s-3); }
  .tips h3 { padding-inline: var(--s-3); }
}

/* Themes */
.themes-grid { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.theme { border-radius: var(--r-md); padding: var(--s-3); display: grid; gap: var(--s-2); align-content: start; box-shadow: 0 0.5rem 1.5rem var(--shadow-color); }
.theme-head { display: flex; align-items: center; gap: var(--s-2); }
.theme-head img { width: 4.5rem; height: auto; flex: none; }
/* Explicit ratios so lazy-loaded sprites reserve their space before loading */
.theme-head img { aspect-ratio: 256 / 216; }
.balls img { aspect-ratio: 1; width: 100%; height: auto; }
.theme-garden { box-shadow: inset 0 0 0 2px var(--garden-gold), 0 0.5rem 1.5rem var(--shadow-color); }
.theme-neon { box-shadow: inset 0 0 0 1px var(--neon-magenta), 0 0.5rem 1.5rem var(--shadow-color); }
.theme-nightgold { box-shadow: inset 0 0 0 2px var(--nightgold-gold), 0 0.5rem 1.5rem var(--shadow-color); }
.theme-status { font-weight: 800; font-size: var(--fs-small); }
.theme p { max-width: none; }
.balls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; max-width: 16rem; }
.balls img { width: 100%; height: auto; aspect-ratio: 1; }
.theme-classic { background: var(--classic-bg); color: var(--classic-ink); }
.theme-garden { background: var(--garden-bg); color: var(--garden-ink); }
.theme-neon { background: var(--neon-bg); color: var(--neon-ink); }
.theme-neon .theme-status { color: var(--neon-accent); }
.theme-nightgold { background: var(--nightgold-bg); color: var(--nightgold-ink); }
.theme-nightgold .theme-status { color: var(--nightgold-gold); }
@media (min-width: 48em) { .themes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) {
  .themes-grid { grid-template-columns: repeat(4, 1fr); }
  /* Narrow cards: sprite above the title so names and status don't wrap */
  .theme-head { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
  .theme-head img { object-fit: contain; }
}

/* Free to play */
.free .wrap { display: grid; gap: var(--s-3); }
.free ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-1); max-width: var(--measure); }
.free li::marker { color: var(--c-blue-700); }

/* Download CTA */
.cta { background: var(--c-navy-900); color: var(--c-white); text-align: center; }
.cta .wrap { display: grid; gap: var(--s-3); justify-items: center; }
.cta p { color: var(--c-cyan-100); }
.cta :focus-visible { outline-color: var(--c-cyan-100); }

/* Privacy */
.privacy h2 { font-size: var(--fs-h3); font-family: var(--font-body); font-weight: 800; letter-spacing: 0; }
.privacy p { color: var(--c-muted); font-size: var(--fs-small); }
.privacy { padding-block: var(--s-4); background: var(--c-white); }

/* Imprint */
.legal { padding-block: var(--s-4) var(--s-5); }
.legal .wrap { max-width: 46rem; display: grid; gap: var(--s-1); justify-items: start; }
.legal h1 { font-size: var(--fs-h2); margin-bottom: var(--s-2); }
.legal h2 { font-family: var(--font-body); font-weight: 800; font-size: var(--fs-h3); letter-spacing: 0; margin-top: var(--s-3); }
.legal h3 { font-size: 1.05rem; margin-top: var(--s-2); }
.legal .back { display: inline-flex; align-items: center; min-height: var(--tap); margin-bottom: var(--s-2); }
.legal-meta { color: var(--c-muted); font-size: var(--fs-small); margin-bottom: var(--s-2); }
.legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-1); }
.legal li::marker { color: var(--c-blue-700); }
.legal .summary { justify-self: stretch; background: var(--c-cyan-100); border-radius: var(--r-md); padding: var(--s-3); display: grid; gap: var(--s-2); margin-bottom: var(--s-2); }
.legal .summary h2 { margin-top: 0; }
/* Offene Angaben vor Veroeffentlichung; muessen auffallen */
.legal mark.todo { background: #ffe58a; color: var(--c-ink); padding: 0 0.3em; border-radius: 4px; font-weight: 700; }
.privacy .wrap { display: grid; gap: var(--s-1); }
.privacy a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }

/* Footer */
.site-footer { background: var(--c-cyan-100); padding-block: var(--s-3); font-size: var(--fs-small); }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-3); }
.site-footer ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; gap: 0 0.25rem; }
.site-footer a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 0.5rem; color: var(--c-ink); font-weight: 600; }
.site-footer p { max-width: none; color: var(--c-ink); }

.nobr { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* 404 */
.notfound { min-height: 70vh; display: grid; align-items: center; }
.notfound .wrap { display: grid; gap: var(--s-4); justify-items: start; }
.notfound section { display: grid; gap: var(--s-2); justify-items: start; }
.notfound section + section { padding-top: var(--s-3); border-top: 1px solid var(--c-line); justify-self: stretch; }
.notfound h2 { font-size: var(--fs-h3); }
.notfound-code { font-family: var(--font-display); font-size: clamp(4.5rem, 3rem + 8vw, 9rem); line-height: 1; color: var(--c-cyan-300); }