/* The text pages (about, pricing, account, credits, terms, privacy) and the sign-in pages worker/auth.js draws.
   Same look as the games' menus (play/game.css): Fredoka headings, ink outlines with a hard drop, sun-yellow
   buttons. Light by default; dark when the device asks for it. Body text stays in the system font, because the
   terms and privacy pages are long reads. The frozen review copy keeps the old look (review.css). */
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 600; font-display: swap; src: url(/play/fonts/fredoka-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 700; font-display: swap; src: url(/play/fonts/fredoka-latin-700-normal.woff2) format('woff2'); }
:root {
  --ink: #1d2a44; --sun: #ffc42e; --sun-hover: #ffd35e; --sky: #3fb6ff; --mint: #2ed3a6; --coral: #ff5c6c;
  --bg: #fffaf0; --bg2: #fff1cf; --panel: #ffffff; --text: #1d2a44; --mute: #56627f; --line: #1d2a44; --soft: #e6dcc4;
  --link: #0b6fb8; --link-hover: #1d2a44; --drop: 0 3px 0 var(--ink); --ok: #127a46; --bad: #b4232f;
  --head: 'Fredoka', 'Trebuchet MS', 'Segoe UI Rounded', system-ui, sans-serif;
  --body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111a2e; --bg2: #18233d; --panel: #1a2540; --text: #f3ecda; --mute: #a9b3cc; --line: #46598a; --soft: #2b3a5f;
    --link: #8fd0ff; --link-hover: #ffffff; --drop: 0 3px 0 #050912; --ok: #6fe0a8; --bad: #ff9aa3;
  }
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--body); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px 48px; }
.wrap.wide { max-width: 1000px; }
::selection { background: var(--sun); color: var(--ink); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

/* Header: brand, a few links and a Play button. On a phone the links drop to their own row. */
nav.top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 14px 0; margin-bottom: 28px; border-bottom: 2px solid var(--soft); }
nav.top .brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; padding: 4px 6px 4px 0;
  font: 700 22px/1 var(--head); color: var(--text); text-decoration: none; letter-spacing: .01em; }
nav.top .brand::before { content: ""; width: 30px; height: 30px; flex: none; background: url(/favicon.svg) center / contain no-repeat; border-radius: 8px; box-shadow: var(--drop); }
nav.top a:not(.brand) { font: 600 16px/1 var(--head); color: var(--mute); text-decoration: none; padding: 10px 12px; border-radius: 12px; }
nav.top a:not(.brand):hover { color: var(--text); background: var(--bg2); }
nav.top a[aria-current="page"] { color: var(--text); background: var(--bg2); box-shadow: inset 0 -3px 0 var(--sun); }
nav.top a.open, nav.top a.open:hover { margin-left: 6px; color: var(--ink); background: var(--sun); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); padding: 9px 16px; }
nav.top a.open:hover { background: var(--sun-hover); }
nav.top a.open:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
@media (max-width: 560px) {
  nav.top { gap: 2px; }
  nav.top .brand { font-size: 20px; }
  nav.top::after { content: ""; order: 2; flex-basis: 100%; }
  nav.top a:not(.brand):not(.open) { order: 3; padding: 8px 10px; font-size: 15px; }
  nav.top a:not(.brand):not(.open):first-of-type { margin-left: -10px; }
}

/* Type */
h1 { font: 700 40px/1.1 var(--head); margin: 0 0 8px; letter-spacing: -.005em; }
h2 { font: 700 25px/1.25 var(--head); margin: 44px 0 10px; }
h3 { font: 700 18px/1.35 var(--head); margin: 26px 0 6px; }
h2[id], h3[id] { scroll-margin-top: 16px; }
@media (max-width: 560px) { h1 { font-size: 32px; } h2 { font-size: 22px; } }
p, ul, ol, dl { margin: 0 0 14px; }
ul, ol { padding-left: 22px; }
li { margin: 5px 0; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
code { font: 14px var(--mono); }
strong { font-weight: 650; }
.meta { color: var(--mute); font-size: 14px; margin: 0 0 26px; }
.lede { font-size: 19px; line-height: 1.55; }
.muted { color: var(--mute); }
.small { font-size: 14px; margin: 0; }
.callout { background: var(--panel); border: 2px solid var(--line); border-left: 8px solid var(--sun); border-radius: 14px; padding: 14px 18px; margin: 0 0 18px; }
.callout > :last-child { margin-bottom: 0; }
.todo { background: #5a2a14; color: #ffd9bf; padding: 0 4px; border-radius: 3px; font-family: var(--mono); font-size: .9em; }
blockquote { margin: 0 0 14px; padding: 4px 16px; border-left: 4px solid var(--soft); color: var(--mute); }

/* Buttons. .open-app is the main action on a page; plain buttons are the quieter ones. */
button { font: inherit; cursor: pointer; }
.open-app, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  font: 700 16px/1.1 var(--head); text-decoration: none; color: var(--ink); background: #fff;
  border: 2px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); transition: transform .06s, box-shadow .06s;
}
.open-app { background: var(--sun); }
.open-app:hover:not(:disabled), button:hover:not(:disabled) { color: var(--ink); background: #fff3d1; }
.open-app:hover:not(:disabled) { background: var(--sun-hover); }
.open-app:active:not(:disabled), button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
button:disabled, .open-app:disabled { opacity: .55; cursor: default; }
button.danger { background: #ffd9dd; color: #7a1020; }
button.danger:hover:not(:disabled) { background: #ffc2c9; color: #7a1020; }
p > button + button, p > .open-app + button, p > button + .open-app { margin-left: 6px; }
a.app-link { color: var(--link); }
a.app-link::after { content: " ↗"; font-size: .85em; }

/* Cards and forms (account, pricing) */
.card, form.card { display: grid; gap: 10px; padding: 18px; margin: 0 0 18px; background: var(--panel); border: 2px solid var(--line); border-radius: 16px; box-shadow: var(--drop); }
.card > :last-child { margin-bottom: 0; }
.card h3 { margin: 0; }
form.card label, #voice-settings label { font-weight: 600; font-size: 15px; }
form.card label.check, #voice-settings label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
form.card label.check input, #voice-settings label.check input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--sun); flex: none; }
form.card button, #logout, #logout-all { justify-self: start; }
input[type=email], input[type=text], input:not([type]), select, textarea {
  font: inherit; color: var(--text); background: var(--bg); border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--sky); outline-offset: 1px; }
input.code { font: 600 24px/1.2 var(--mono); letter-spacing: .2em; max-width: 9em; }
.form-msg { min-height: 1.2em; margin: 0; color: var(--bad); font-size: 14px; }
.form-msg:empty { min-height: 0; }
.form-msg.ok { color: var(--ok); }
.or { display: flex; align-items: center; gap: 12px; color: var(--mute); font-size: 14px; margin: 4px 0 18px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 2px solid var(--soft); }
.pk-list { list-style: none; padding: 0; margin: 0 0 12px; }
.pk-list li { padding: 8px 0; border-top: 2px solid var(--soft); line-height: 1.8; }
details summary { cursor: pointer; color: var(--mute); margin-bottom: 12px; font-weight: 600; }
details summary:hover { color: var(--text); }
.perks { list-style: none; padding: 0; margin: 0 0 14px; color: var(--mute); font-size: 15px; }
.perks li { position: relative; padding-left: 24px; margin: 4px 0; }
.perks li::before { content: "✓"; position: absolute; left: 2px; color: var(--ok); font-weight: 700; }
.plan { margin-bottom: 22px; }
.plan h2 { margin-top: 0; }
.plan .callout { box-shadow: none; }

/* Account page: sections as a short in-page index on wide screens */
.jump { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 26px; padding: 0; list-style: none; }
.jump li { margin: 0; }
.jump a { display: inline-block; padding: 5px 12px; border: 2px solid var(--soft); border-radius: 999px; font: 600 14px/1.2 var(--head); color: var(--mute); text-decoration: none; }
.jump a:hover { border-color: var(--line); color: var(--text); }

/* The header's account menu (site/me.js draws it) takes its border from here. */
:root { --me-line: var(--line); --me-drop: var(--ink); }
@media (prefers-color-scheme: dark) { :root { --me-drop: #050912; } }

/* Account home (/account, signed in): a header with your initial and plan, Home and Settings tabs,
   the continue card, your stuff, and the settings groups. */
.acct-head { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.acct-head h1 { margin: 0 0 4px; overflow-wrap: anywhere; }
.acct-who { min-width: 0; }
.avatar { display: inline-grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--sun); color: var(--ink);
  border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font: 700 32px/1 var(--head); text-transform: uppercase; }
.acct-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.acct-sub .muted { overflow-wrap: anywhere; }
.chip { display: inline-block; padding: 4px 11px; border: 2px solid var(--ink); border-radius: 999px; background: var(--sun); color: var(--ink);
  font: 700 13px/1.2 var(--head); letter-spacing: .03em; }
.chip.free { background: var(--bg2); color: var(--text); border-color: var(--line); }
.chip.warn { background: #ffd9dd; color: #7a1020; }
.chip.founding { background: var(--mint); }
.tabs { display: flex; gap: 6px; margin: 0 0 24px; padding: 4px; background: var(--bg2); border: 2px solid var(--soft); border-radius: 16px; width: max-content; max-width: 100%; }
.tabs a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border-radius: 12px; border: 2px solid transparent;
  font: 700 16px/1 var(--head); color: var(--mute); text-decoration: none; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-selected="true"] { background: var(--panel); color: var(--text); border-color: var(--line); box-shadow: 0 2px 0 var(--ink); }
.callout.warn { border-left-color: var(--coral); }
.kicker { margin: 0 0 2px; font: 700 13px/1.2 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.continue { grid-template-columns: 1fr auto; align-items: center; border-width: 3px; box-shadow: 0 5px 0 var(--ink); position: relative; overflow: hidden; padding-top: 24px; }
.continue::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--sun); }
.continue h2 { margin: 0 0 2px; overflow-wrap: anywhere; }
.continue-go { margin: 0; }
.continue-go .open-app { min-width: 140px; }
h2.sec { margin-top: 34px; }
.stuff { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile { align-content: start; margin: 0; }
.tile h3 { font-size: 17px; }
.tile .big { margin: 0; font: 700 30px/1.1 var(--head); }
.tile .big small { display: block; font: 400 14px/1.4 var(--body); color: var(--mute); }
.mini { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.mini li { margin: 0; padding: 6px 0; border-top: 2px solid var(--soft); display: flex; justify-content: space-between; gap: 8px; }
.mini li span:last-child { color: var(--mute); white-space: nowrap; }
.mini li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.medal { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); vertical-align: -1px; margin-right: 6px; }
.medal.gold { background: #ffc42e; } .medal.silver { background: #cfd6e4; } .medal.bronze { background: #d9935a; } .medal.none { background: transparent; border-color: var(--soft); }
.plan-line { font-size: 17px; }
.group { margin-bottom: 8px; }
.group h2 { margin-top: 30px; }
.group[id] { scroll-margin-top: 16px; }
.email-line { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.danger-zone { margin-top: 8px; }
.pk-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pk-list li .grow { flex: 1 1 220px; min-width: 0; }
.pk-list li button { min-height: 36px; padding: 0 12px; font-size: 14px; }
kbd { font: 600 13px var(--mono); padding: 1px 6px; border: 2px solid var(--soft); border-radius: 6px; }
@media (max-width: 760px) { .stuff { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .acct-head { gap: 12px; }
  .avatar { width: 52px; height: 52px; font-size: 26px; }
  .tabs { width: 100%; }
  .tabs a { flex: 1; padding: 0 10px; }
  .continue { grid-template-columns: 1fr; }
  .continue-go .open-app { width: 100%; }
}

/* The play side of the account (site/account-play.js): Continue's extras, the trophy wall, squad, profile look, phone QR. */
.continue-more { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 20px; padding-top: 10px; border-top: 2px solid var(--soft); }
.continue-more .mini li { justify-content: flex-start; }
.squad-line { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.age-gate { border-width: 3px; border-left: 8px solid var(--sun); }
.age-gate h2 { margin: 0; }
.age-gate select, #birth { max-width: 260px; }
.trophy-wall { gap: 14px; }
.wall-head { display: flex; align-items: center; gap: 14px; }
.wall-head .big { margin: 0; font: 700 30px/1.1 var(--head); }
.wall-head .muted { margin: 0; }
.hunter-badge { width: 64px; height: 64px; flex: none; border: 3px solid var(--ink); border-radius: 50%; background: var(--bg2) center / cover no-repeat; box-shadow: var(--drop); }
.trophies { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.trophies li { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 12px 8px 10px; border: 2px dashed var(--soft); border-radius: 14px; color: var(--mute); font-size: 13px; line-height: 1.3; }
.trophies li b { font: 700 15px/1.2 var(--head); color: var(--mute); }
.trophies li .medallion { width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px; border-radius: 50%; background: var(--bg2); filter: grayscale(1); opacity: .55; }
.trophies li.got { border: 2px solid var(--ink); background: var(--panel); color: var(--text); box-shadow: var(--drop); }
.trophies li.got b { color: var(--text); }
.trophies li.got .medallion { background: var(--sun); filter: none; opacity: 1; border: 2px solid var(--ink); }
.squad-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.squad-grid .card { margin: 0; align-content: start; }
.squad-grid h3 { margin: 0; }
.squad-grid h3.sub { margin-top: 10px; font-size: 16px; }
.who { display: inline-flex; align-items: center; gap: 8px; }
.paint-dot { display: inline-block; width: 14px; height: 14px; flex: none; border: 2px solid var(--ink); border-radius: 50%; background: var(--soft); vertical-align: -2px; }
.paint-dot.big-dot { width: 46px; height: 46px; border-width: 3px; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 600 12px/1.6 var(--body); background: var(--bg2); color: var(--text); border: 1.5px solid var(--soft); }
.tag.ok { background: var(--mint); color: var(--ink); border-color: var(--ink); }
.profile-card { grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.profile-card strong { font: 700 22px/1.2 var(--head); overflow-wrap: anywhere; }
.profile-card p { margin: 0; }
.profile-card img { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--ink); object-fit: cover; background: var(--bg2); }
.swatches, .hunters { display: flex; flex-wrap: wrap; gap: 8px; }
.swatches button { width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%; }
.swatches button[aria-checked="true"], .hunters button[aria-checked="true"] { outline: 3px solid var(--sky); outline-offset: 2px; }
.hunters button { display: grid; justify-items: center; gap: 2px; min-height: 0; padding: 6px 8px; font-size: 13px; border-radius: 14px; }
.hunters img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--bg2); }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.suggest button { min-height: 32px; padding: 0 10px; font-size: 14px; }
.handoff-box { display: grid; justify-items: start; gap: 6px; }
.handoff-box svg { border: 2px solid var(--ink); border-radius: 10px; background: #fff; }
@media (max-width: 760px) { .squad-grid { grid-template-columns: 1fr; } }

/* Credits */
dl.credits { display: grid; gap: 12px; }
dl.credits div { padding: 12px 16px; background: var(--panel); border: 2px solid var(--soft); border-radius: 14px; }
dl.credits dt { font-weight: 650; margin-bottom: 2px; }
dl.credits dd { margin: 0; color: var(--mute); font-size: 15px; }
dl.credits dd .lic { color: var(--text); font-family: var(--mono); font-size: 13px; }

/* Pricing */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 12px 0 18px; align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 20px; background: var(--panel); border: 2px solid var(--line); border-radius: 18px; box-shadow: var(--drop); }
.tier.pick { border-width: 3px; box-shadow: 0 5px 0 var(--ink); }
.tier.pick::before { content: ""; position: absolute; inset: 0 0 auto; height: 10px; background: var(--sun); border-radius: 15px 15px 0 0; }
.tier h2 { margin: 0; font-size: 24px; }
.tier .tag { align-self: flex-start; font: 700 12px/1 var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--sun); border: 2px solid var(--ink); padding: 5px 10px; border-radius: 999px; }
.tier .price { font: 700 36px/1.05 var(--head); margin: 0; }
.tier .price small { display: block; margin-top: 4px; font: 400 14px var(--body); color: var(--mute); }
.tier .for { color: var(--mute); margin: 0; }
.tier ul { list-style: none; padding: 0; margin: 4px 0 6px; font-size: 15px; flex: 1; }
.tier li { margin: 8px 0; padding-left: 26px; position: relative; }
.tier li::before { content: "✓"; position: absolute; left: 2px; color: var(--ok); font-weight: 800; }
.tier li.plus::before { content: "+"; }
.tier .cta { width: 100%; }
.tier .cta.ghost { background: #fff; }
.tier .cta.ghost:hover { background: #fff3d1; }
.scroll { overflow-x: auto; }
.faq { max-width: 760px; }
.faq h3 { margin-top: 20px; }
@media (max-width: 760px) { .tiers { grid-template-columns: 1fr; } .tier.pick { order: -1; } }

/* Footer */
footer.site { margin-top: 56px; padding: 22px 0 8px; border-top: 2px solid var(--soft); color: var(--mute); font-size: 14px; }
footer.site .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 18px; }
footer.site b { display: block; margin-bottom: 6px; font: 700 15px var(--head); color: var(--text); }
footer.site a { display: block; padding: 3px 0; color: var(--mute); text-decoration: none; }
footer.site a:hover { color: var(--text); text-decoration: underline; }
footer.site p { margin: 0; }
footer.site .fine { margin-top: 18px; font-size: 13px; }
@media (max-width: 640px) { footer.site .cols { grid-template-columns: 1fr 1fr; } footer.site .about-col { grid-column: 1 / -1; } }

/* Articles (kept for any page that still uses them) */
.crumbs { margin: 0 0 6px; font-size: 14px; }
.crumbs a { color: var(--mute); text-decoration: none; }
figure { margin: 22px 0; }
figure img { display: block; width: 100%; height: auto; border-radius: 12px; border: 2px solid var(--soft); background: var(--panel); }
figcaption { color: var(--mute); font-size: 14px; margin-top: 6px; }

/* Settings → Voice (site/account-play.js showVoice) */
.voice-warning { margin: 10px 0 0; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 10px; background: #fff3c4; font-weight: 600; }
#voice h3.sub { margin: 18px 0 4px; font-size: 1rem; }
#block-list li { display: flex; align-items: center; gap: 8px; }
#voice-settings { display: grid; gap: 10px; margin: 12px 0; }
#block-list li button { margin-left: auto; flex: none; min-height: 36px; padding: 0 14px; font-size: 14px; }