/* Shared by every page: the violet arcade night, the fonts, and the sticker type from the logo. */
@font-face { font-family: "Titan One"; src: url("../fonts/titan-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("../fonts/fredoka.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
:root {
  --night: #140a2e;
  --night-2: #23144a;
  --edge: #6e4fbf;
  --ink: #f7f5ff;
  --muted: #cfc6ee;
  --cyan: #4fd8ff;
  --sun: #ffc733;
  --orange: #ff9433;
  --violet: #b083ff;
  --display: "Titan One", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Fredoka", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--night); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-anchor: none; }
body { margin: 0; background: var(--night); color: var(--ink); font: 500 clamp(17px, 1.05vw + 13px, 21px)/1.45 var(--body); -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--cyan); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Sticker type: a gradient fill over a fat outline, like the logo. The outline is drawn by a copy of the text. */
.stk {
  --top: #bff0ff; --mid: #34bcff; --low: #1486ee; --lip: #0a38a8;
  position: relative; isolation: isolate; display: block; margin: 0;
  font: 400 clamp(38px, 8.4vw, 104px)/1.04 var(--display); letter-spacing: .005em; text-wrap: balance;
  color: transparent; padding-bottom: .07em;
}
.stk::before, .stk::after { content: attr(data-t); position: absolute; left: 0; right: 0; top: 0; padding-bottom: inherit; text-align: inherit; pointer-events: none; }
.stk::before { z-index: -1; color: var(--lip); -webkit-text-stroke: .2em #170a38; paint-order: stroke fill; text-shadow: 0 .07em 0 var(--lip); }
.stk, .stk::after { text-shadow: none; }
.stk::after { color: transparent; background: linear-gradient(var(--top), var(--mid) 42%, var(--low)); -webkit-background-clip: text; background-clip: text; }
.stk.go { --top: #fff0a8; --mid: #ffc41f; --low: #ff8f1a; --lip: #a82c06; }
.stk.ho { --top: #ffd7a8; --mid: #ff9a3d; --low: #ff5c3d; --lip: #8c1c1c; }
.stk.ro { --top: #ffc4ee; --mid: #ff66c7; --low: #c63dff; --lip: #5e1298; }
.stk.gr { --top: #d4ffc8; --mid: #5bea8e; --low: #17c4a0; --lip: #066a58; }
.stk.ic { --top: #e8fdff; --mid: #9de9ff; --low: #5bb7ff; --lip: #1c5ab0; }
.stk.si { --top: #ffffff; --mid: #e6dcff; --low: #b9a3ff; --lip: #4a2ba8; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 12px 26px; border-radius: 999px;
  font: 400 clamp(17px, 1vw + 13px, 21px)/1.15 var(--display); letter-spacing: .01em; text-align: center; text-decoration: none;
}
.btn.primary { background: linear-gradient(#ffe066, #ff9c33); color: #33140f; border: 2px solid #170a38; box-shadow: 0 5px 0 #a13d0c; }
.btn.secondary { background: var(--night-2); color: var(--ink); border: 2px solid var(--edge); box-shadow: 0 5px 0 #0c051e; }
a.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #a13d0c; }
.btn.off { background: var(--night-2); color: var(--muted); border: 2px dashed var(--edge); box-shadow: none; cursor: default; }

/* The privacy and support pages: the same world, sitting still. */
.doc { min-height: 100vh; background: radial-gradient(120% 60% at 50% -10%, #3b1d86 0%, transparent 70%), var(--night); }
.doc-head, .doc-body, .doc-foot { width: min(720px, 100% - 40px); margin-inline: auto; }
.doc-head { padding-top: 22px; display: grid; gap: 8px; justify-items: start; }
.doc-logo { display: block; min-height: 48px; }
.doc-logo img { width: 104px; }
.doc-head .stk { font-size: clamp(40px, 11vw, 72px); }
.doc-body { padding-block: 16px 40px; }
.doc-lede { font: 400 clamp(22px, 5vw, 32px)/1.2 var(--display); color: var(--sun); margin: 8px 0 0; }
.doc-body h2 { font: 400 clamp(24px, 4.6vw, 32px)/1.15 var(--display); color: var(--cyan); margin: 36px 0 8px; }
.doc-body h3 { font-weight: 600; font-size: 1.1em; margin: 24px 0 4px; }
.doc-body p, .doc-body ul { margin: 8px 0; }
.doc-body li { margin-bottom: 8px; }
.doc-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-block: 12px 40px; border-top: 2px solid var(--night-2); }
.doc-foot a { display: inline-flex; align-items: center; min-height: 48px; padding-inline: 4px; }