/* rumcreates games: privacy and support pages. One stylesheet, no scripts.
   Each game page sets body.g-<slug>, which swaps the colour tokens and display face. */

@font-face { font-family: "Archivo Display"; src: url("fonts/archivo-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Nunito Display"; src: url("fonts/nunito-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Fredoka Display"; src: url("fonts/fredoka-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Unbounded Display"; src: url("fonts/unbounded-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  color-scheme: light;
  --page: #f6f5f1;
  --surface: #ffffff;
  --ink: #1d1c1a;
  --ink-soft: #55524c;
  --rule: #e4e1d9;
  --link: #2d5c8f;
  --accent: #5f9a8e;
  --band-a: #2f3437;
  --band-b: #1c1f21;
  --band-ink: #ffffff;
  --band-soft: rgba(255, 255, 255, 0.72);
  --display: "Nunito Display", ui-rounded, system-ui, sans-serif;
  --display-weight: 900;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.g-arrowpuzzly {
  --page: #f4f1e8; --ink: #161616; --ink-soft: #4d4a43; --rule: #e2dccb;
  --link: #6b4f00; --accent: #ffc400;
  --band-a: #2a2b2f; --band-b: #111113; --band-ink: #f4f1e8; --band-soft: rgba(244, 241, 232, 0.7);
  --display: "Archivo Display", system-ui, sans-serif; --display-weight: 800;
}
.g-blockblocky {
  --page: #eef1fb; --ink: #1b2550; --ink-soft: #4a5378; --rule: #d6dcf2;
  --link: #2a3c9a; --accent: #ffc229;
  --band-a: #4a6ad6; --band-b: #2a3c9a; --band-ink: #fbf6ec; --band-soft: rgba(251, 246, 236, 0.78);
  --display: "Nunito Display", system-ui, sans-serif; --display-weight: 900;
}
.g-chochomy {
  --page: #fff4e2; --ink: #3b2316; --ink-soft: #6e5242; --rule: #efdcc0;
  --link: #a62d45; --accent: #f5b53f;
  --band-a: #ee6a84; --band-b: #c93a58; --band-ink: #fff6ea; --band-soft: rgba(255, 246, 234, 0.82);
  --display: "Fredoka Display", ui-rounded, system-ui, sans-serif; --display-weight: 700;
}
.g-wordglowy {
  --page: #f3f2fb; --ink: #161a44; --ink-soft: #4b4f7a; --rule: #dddcf0;
  --link: #4a2f8a; --accent: #ffd36b;
  --band-a: #2a1d63; --band-b: #0b1030; --band-ink: #eef0ff; --band-soft: rgba(238, 240, 255, 0.72);
  --display: "Unbounded Display", system-ui, sans-serif; --display-weight: 800;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 17px/1.6 var(--body);
  overflow-wrap: break-word;
}
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
img { display: block; }

.display {
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.kicker {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app-icon { border-radius: 22.5%; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); flex: none; }

/* ---------- game pages ---------- */
.band {
  background: linear-gradient(160deg, var(--band-a), var(--band-b));
  color: var(--band-ink);
  padding: 28px 16px 0;
}
.band-in {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.band .kicker { color: var(--band-soft); }
.band h1 { margin: 0; font-size: clamp(30px, 8vw, 44px); }
.g-wordglowy .band h1 { font-size: clamp(24px, 6.6vw, 38px); }
.tabs {
  max-width: 680px;
  margin: 22px auto 0;
  display: flex;
  gap: 6px;
}
.tabs a {
  color: var(--band-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 14px 12px;
  border-radius: 12px 12px 0 0;
  min-height: 44px;
}
.tabs a:hover { color: var(--band-ink); }
.tabs a[aria-current="page"] { background: var(--page); color: var(--ink); }

.doc {
  max-width: 712px;
  margin: 0 auto;
  padding: 28px 16px 8px;
}
.doc h2 { font-size: 28px; margin: 0 0 4px; font-family: var(--display); font-weight: var(--display-weight); line-height: 1.15; }
.doc h3 { font-size: 19px; margin: 32px 0 8px; line-height: 1.3; }
.doc p, .doc ul, .doc ol { margin: 0 0 14px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc li::marker { color: var(--ink-soft); }
.meta { color: var(--ink-soft); font-size: 15px; }
.lead { font-size: 19px; line-height: 1.55; }
.doc .lead { margin-top: 18px; padding-left: 14px; border-left: 4px solid var(--accent); }

.contact {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 16px 18px 2px;
  margin: 22px 0 8px;
}
.faq dt { font-weight: 700; margin-top: 16px; }
.faq dd { margin: 4px 0 0; color: var(--ink-soft); }
.id-summary {
  margin-top: 36px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 2px 18px 4px;
}
.id-summary h3 { margin-top: 16px; font-size: 16px; }
.id-summary p { color: var(--ink-soft); }

/* ---------- home ---------- */
.home-head {
  max-width: 792px;
  margin: 0 auto;
  padding: 44px 16px 8px;
}
.home-head .kicker { color: var(--accent); }
.home-head h1 { font-size: clamp(36px, 10vw, 56px); margin: 0 0 10px; }
.home-head .lead { color: var(--ink-soft); margin: 0; max-width: 34em; }
.home { max-width: 792px; margin: 0 auto; padding: 20px 16px 8px; }
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--band-a);
  border-radius: 18px;
  padding: 18px;
}
.card h2 { margin: 2px 0 6px; font-size: 24px; color: var(--ink); }
.card p { margin: 0 0 10px; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
.card .links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.card .links a { font-weight: 600; display: inline-block; padding: 6px 0; }
.contact-line { color: var(--ink-soft); margin: 26px 0 0; }
@media (min-width: 720px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .card { flex-direction: column; }
}

.foot {
  max-width: 712px;
  margin: 40px auto 0;
  padding: 18px 16px 40px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 14px;
}
.home-page .foot { max-width: 792px; }
.foot p { margin: 0; }