/* ==========================================================================
   Pickyroo — base stylesheet
   --------------------------------------------------------------------------
   Design brief: clean, fun, obvious. The games are colourful and loud, so the
   furniture around them (header, panels, buttons, footer) is deliberately
   quiet — near-white surfaces, one soft shadow, generous radii. All the
   colour saturation budget is spent inside the play area.

   Everything is tokens. If a colour appears as a literal outside :root or a
   theme block, that is a bug — the dark theme only swaps token values, so a
   hard-coded colour is a colour that will be unreadable at night.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces and ink */
  --bg:          #f4f2fb;
  --bg-tint:     #ece8fb;
  --surface:     #ffffff;
  --surface-2:   #f7f6fd;
  --ink:         #1b1733;
  --ink-soft:    #4a4468;
  --muted:       #6f688c;
  --line:        #e4e0f2;
  --line-strong: #d3cdea;

  /* Brand */
  --brand:       #6c5ce7;
  --brand-ink:   #ffffff;
  --brand-soft:  #efecfe;
  --brand-deep:  #4a3fc0;
  --accent:      #ff6b9d;
  --lime:        #00c896;
  --sunny:       #ffb62e;
  --sky:         #37b6f6;
  --coral:       #ff7a5a;

  /* Racer palette — 12 hues, all legible against white text at these values.
     Kept in one place because the wheel, the bars, the bracket and the
     balloons all have to agree on what "player 3's colour" means. */
  --p1:  #6c5ce7;  --p2:  #ff6b9d;  --p3:  #00b894;  --p4:  #ff9f1a;
  --p5:  #0aa2e6;  --p6:  #e84393;  --p7:  #16a34a;  --p8:  #f0563a;
  --p9:  #8e44ad;  --p10: #d97706;  --p11: #0891b2;  --p12: #be123c;

  /* Shape */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Depth. One shadow recipe, three sizes — more than that and the page
     starts to look like it was assembled from three different kits. */
  --sh-1: 0 1px 2px rgba(27, 23, 51, .06), 0 2px 8px rgba(27, 23, 51, .05);
  --sh-2: 0 2px 4px rgba(27, 23, 51, .07), 0 10px 28px rgba(27, 23, 51, .09);
  --sh-3: 0 6px 12px rgba(27, 23, 51, .10), 0 24px 60px rgba(27, 23, 51, .16);

  --font: "Fredoka", ui-rounded, "Nunito", "Segoe UI Variable", "Segoe UI",
          system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --wrap: 1180px;
  --header-h: 62px;
}

/* Dark theme. Two selectors on purpose: the media query handles visitors who
   have never touched the toggle, the attribute handles those who have. The
   :not() guard stops a system-dark visitor who explicitly chose light from
   being overridden by their OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #14122a;
    --bg-tint:     #1b1838;
    --surface:     #1e1b3c;
    --surface-2:   #262250;
    --ink:         #f2f0ff;
    --ink-soft:    #cfc9ee;
    --muted:       #9d95c4;
    --line:        #302b58;
    --line-strong: #433d75;
    --brand:       #8b7bff;
    --brand-soft:  #2b2559;
    --brand-deep:  #b0a4ff;
    --sh-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.28);
    --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.38);
    --sh-3: 0 8px 16px rgba(0,0,0,.45), 0 28px 64px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  --bg:          #14122a;
  --bg-tint:     #1b1838;
  --surface:     #1e1b3c;
  --surface-2:   #262250;
  --ink:         #f2f0ff;
  --ink-soft:    #cfc9ee;
  --muted:       #9d95c4;
  --line:        #302b58;
  --line-strong: #433d75;
  --brand:       #8b7bff;
  --brand-soft:  #2b2559;
  --brand-deep:  #b0a4ff;
  --sh-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.28);
  --sh-2: 0 2px 6px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.38);
  --sh-3: 0 8px 16px rgba(0,0,0,.45), 0 28px 64px rgba(0,0,0,.55);
}

/* --------------------------------------------------------------------------
   Reset-ish
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  /* Two very soft blobs. They read as "playful" at a glance and cost nothing;
     fixed attachment keeps them from sliding around during a race. */
  background-image:
    radial-gradient(720px 520px at 12% -8%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    radial-gradient(680px 480px at 92% 4%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 68%);
  background-attachment: fixed;
  min-height: 100vh;
}
img, svg, canvas { max-width: 100%; display: block; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.8rem); }
p  { margin: 0 0 1em; }
a  { color: var(--brand-deep); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
small { font-size: .82rem; }
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--brand); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2rem, 760px); margin-inline: auto; }
.stack > * + * { margin-top: 1rem; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.spacer { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  display: flex; align-items: center; gap: .75rem;
  height: var(--header-h);
  width: min(100% - 1.5rem, var(--wrap)); margin-inline: auto;
}
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; font-size: 1.18rem; color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 10px; font-size: 19px;
  background: linear-gradient(140deg, var(--brand), var(--accent));
  box-shadow: var(--sh-1);
}
.brand-mark span { animation: brandspin 9s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes brandspin { 0%,72% { transform: rotate(0); } 100% { transform: rotate(720deg); } }

.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav a, .nav button {
  font: inherit; font-size: .93rem; color: var(--ink-soft);
  background: none; border: 0; cursor: pointer;
  padding: .45rem .7rem; border-radius: var(--r-pill); text-decoration: none;
}
.nav a:hover, .nav button:hover { background: var(--brand-soft); color: var(--brand-deep); }
.nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-deep); }

/* Games dropdown — populated by core.js from the one canonical game list, so
   adding a game never means editing eleven headers. */
.menu { position: relative; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + .4rem);
  width: min(92vw, 460px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  padding: .5rem; display: none;
  max-height: min(70vh, 560px); overflow-y: auto;
}
.menu[data-open="true"] .menu-panel { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; }
@media (max-width: 520px) { .menu[data-open="true"] .menu-panel { grid-template-columns: 1fr; } }
.menu-panel a {
  display: flex; gap: .55rem; align-items: center;
  padding: .5rem .6rem; border-radius: var(--r); font-size: .92rem;
  color: var(--ink); text-decoration: none;
}
.menu-panel a:hover { background: var(--brand-soft); color: var(--brand-deep); }
.menu-panel .emo { font-size: 1.15rem; }

.theme-toggle { font-size: 1.05rem !important; line-height: 1; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--surface);
  --btn-ink: var(--ink);
  font: inherit; font-weight: 600; font-size: .95rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .6rem 1.05rem; border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-ink);
  border: 1px solid var(--line-strong);
  cursor: pointer; text-decoration: none;
  transition: transform .09s ease, box-shadow .16s ease, background .16s ease;
  box-shadow: var(--sh-1);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); color: var(--btn-ink); }
.btn:active { transform: translateY(1px); box-shadow: var(--sh-1); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary {
  --btn-bg: linear-gradient(140deg, var(--brand), var(--brand-deep));
  --btn-ink: #fff;
  border-color: transparent;
}
.btn-accent {
  --btn-bg: linear-gradient(140deg, var(--accent), var(--coral));
  --btn-ink: #fff;
  border-color: transparent;
}
.btn-ghost { --btn-bg: transparent; border-color: var(--line-strong); box-shadow: none; }
.btn-sm { padding: .34rem .7rem; font-size: .84rem; }
.btn-icon { padding: .4rem .55rem; font-size: 1rem; }

/* The one big call to action on every game page. Deliberately oversized:
   on a phone, in a pub, someone should be able to hit it without looking. */
.btn-go {
  font-size: clamp(1.05rem, .95rem + .6vw, 1.35rem);
  padding: .85rem 2.2rem;
  --btn-bg: linear-gradient(140deg, var(--accent), #ff4f7e 60%, var(--coral));
  --btn-ink: #fff;
  border-color: transparent;
  box-shadow: 0 8px 0 -2px color-mix(in srgb, var(--accent) 55%, #000), var(--sh-2);
}
.btn-go:hover { box-shadow: 0 10px 0 -2px color-mix(in srgb, var(--accent) 55%, #000), var(--sh-3); }
.btn-go:active { box-shadow: 0 4px 0 -2px color-mix(in srgb, var(--accent) 55%, #000), var(--sh-1); }
.btn-go[disabled] { box-shadow: none; }

/* --------------------------------------------------------------------------
   Cards / panels
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 1.1rem 1.15rem;
}
.card h2, .card h3 { margin-top: 0; }

.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .6rem; border-radius: var(--r-pill);
  background: var(--brand-soft); color: var(--brand-deep);
  font-size: .78rem; font-weight: 600;
}

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */
input[type="text"], input[type="number"], textarea, select {
  font: inherit; font-size: .93rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: .45rem .6rem; width: 100%;
}
textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }
input:focus, textarea:focus, select:focus { border-color: var(--brand); }
label { font-size: .86rem; font-weight: 600; color: var(--ink-soft); }

.switch { display: flex; align-items: center; gap: .55rem; cursor: pointer; font-weight: 500; }
.switch input { appearance: none; margin: 0; flex: none; width: 40px; height: 23px;
  background: var(--line-strong); border-radius: var(--r-pill); position: relative;
  cursor: pointer; transition: background .16s ease; }
.switch input::after {
  content: ""; position: absolute; inset: 3px auto 3px 3px; width: 17px;
  background: #fff; border-radius: 50%; transition: transform .16s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.switch input:checked { background: var(--brand); }
.switch input:checked::after { transform: translateX(17px); }

input[type="range"] { width: 100%; accent-color: var(--brand); }

.field { display: grid; gap: .3rem; }
.field-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.field-row output { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--brand-deep); }

/* --------------------------------------------------------------------------
   Advert slots
   --------------------------------------------------------------------------
   Every slot reserves its height up front. An advert that arrives late and
   pushes the wheel down the page mid-spin is the fastest way to make a toy
   site feel broken, and it is also what Core Web Vitals punishes.
   -------------------------------------------------------------------------- */
.ad-slot {
  margin: 1.6rem auto;
  display: grid; place-items: center;
  color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
}
.ad-slot::before { content: "Advertisement"; opacity: .55; margin-bottom: .3rem; }
.ad-slot > ins, .ad-slot > .ad-box { width: 100%; }
.ad-leaderboard { min-height: 106px; }              /* 728x90 + label */
.ad-rect        { min-height: 266px; }              /* 300x250 + label */
.ad-box {
  min-height: inherit; border: 1px dashed var(--line-strong);
  border-radius: var(--r); display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
body.ads-live .ad-box { display: none; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: 3rem; padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  font-size: .9rem; color: var(--muted);
}
.footer-grid { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.footer-grid nav { display: grid; gap: .3rem; align-content: start; }
.footer-grid h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); margin-bottom: .2rem; }
.footer-grid a { color: var(--muted); text-decoration: none; }
.footer-grid a:hover { color: var(--brand-deep); text-decoration: underline; }
.footer-note { margin-top: 1.6rem; font-size: .82rem; }

/* --------------------------------------------------------------------------
   Home page
   -------------------------------------------------------------------------- */
.hero { padding: clamp(2rem, 1rem + 5vw, 4rem) 0 1.5rem; text-align: center; }
.hero h1 { margin-bottom: .35rem; }
.hero .lede { font-size: clamp(1rem, .95rem + .4vw, 1.2rem); color: var(--ink-soft); max-width: 46rem; margin-inline: auto; }
.hero .row { justify-content: center; margin-top: 1.4rem; }

.game-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  padding: 1rem 0 0;
}
.game-card {
  position: relative; display: flex; flex-direction: column; gap: .3rem;
  padding: 1.15rem 1.1rem 1.2rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  text-decoration: none; color: var(--ink);
  transition: transform .14s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
.game-card::after {
  content: ""; position: absolute; inset: auto -30% -60% auto;
  width: 190px; height: 190px; border-radius: 50%;
  background: var(--gc, var(--brand)); opacity: .1; transition: transform .3s ease;
}
.game-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--gc, var(--brand)); color: var(--ink); }
.game-card:hover::after { transform: scale(1.25); }
.game-card .emo { font-size: 2.1rem; line-height: 1; }
.game-card:hover .emo { animation: pop .5s ease; }
@keyframes pop { 40% { transform: scale(1.25) rotate(-8deg); } }
.game-card h3 { margin: .35rem 0 .1rem; font-size: 1.08rem; }
.game-card p { margin: 0; font-size: .88rem; color: var(--muted); position: relative; }
.game-card .chip { margin-top: .7rem; align-self: flex-start; position: relative; }

.section-head { display: flex; align-items: baseline; gap: .75rem; margin-top: 2.5rem; }
.section-head h2 { margin-bottom: .2rem; }
.section-head p { color: var(--muted); margin: 0; font-size: .92rem; }

.how { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.how li { list-style: none; }
.how ol { display: contents; }
.how .n {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-weight: 600; font-size: .95rem; margin-bottom: .5rem;
}

.faq details {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); padding: .8rem 1rem; margin-bottom: .5rem;
}
.faq summary { cursor: pointer; font-weight: 600; }
.faq details[open] summary { margin-bottom: .5rem; }
.faq p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Prose pages (about / privacy / terms)
   -------------------------------------------------------------------------- */
.prose { padding: 2rem 0 1rem; }
.prose h2 { margin-top: 2rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .35rem; }
.prose .updated { color: var(--muted); font-size: .88rem; }

/* --------------------------------------------------------------------------
   Toasts
   -------------------------------------------------------------------------- */
#fs-toasts {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  z-index: 300; display: grid; gap: .4rem; justify-items: center; pointer-events: none;
}
.fs-toast {
  background: var(--ink); color: var(--bg);
  padding: .5rem .95rem; border-radius: var(--r-pill);
  font-size: .88rem; font-weight: 600; box-shadow: var(--sh-2);
  animation: toastin .25s ease both;
}
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}