/* Skirr site: the app's Tidepool look (TidepoolTheme.swift), light and dark.
   Fredoka for titles and tiles, Nunito for text, both served from here (the
   same OFL files the app ships), so the site makes no third-party requests. */

@font-face {
  font-family: "Fredoka";
  src: url("../fonts/Fredoka-Variable.ttf") format("truetype");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-Variable.ttf") format("truetype");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --bg: #eef4f6; --panel: #dbe7ec; --card: #ffffff; --ink: #3b4a55; --soft: #66788a;
  --teal: #2f8f83; --teal-side: #1f6b61; --azure: #2a86e0; --red: #b0132b; --gold: #d99a1e; --orange: #f1a23b;
  --line: #cfdde3; --btn: #1d2a33; --btn-ink: #ffffff;
  --app-bg: #eef4f6; --bezel: #1d2a33; --bezel-edge: #0f171d;
  --display: "Fredoka", ui-rounded, system-ui, sans-serif;
  --body: "Nunito", ui-rounded, system-ui, sans-serif;
  color-scheme: light;
}
/* Dark follows the device unless the header toggle chose (data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1d26; --panel: #172a35; --card: #1b3140; --ink: #cfe0e7; --soft: #8fa7b3;
    --teal: #3fb3a3; --teal-side: #24736a; --azure: #4ea2f5; --red: #d12a43; --gold: #f2c14e;
    --line: #2f4b5b; --btn: #e3eef2; --btn-ink: #0f1d26; color-scheme: dark;
    --app-bg: #0f1d26; --bezel: #05090c; --bezel-edge: #2f4b5b;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1d26; --panel: #172a35; --card: #1b3140; --ink: #cfe0e7; --soft: #8fa7b3;
  --teal: #3fb3a3; --teal-side: #24736a; --azure: #4ea2f5; --red: #d12a43; --gold: #f2c14e;
  --line: #2f4b5b; --btn: #e3eef2; --btn-ink: #0f1d26; color-scheme: dark;
  --app-bg: #0f1d26; --bezel: #05090c; --bezel-edge: #2f4b5b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--body); }
a { color: var(--azure); }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: .005em; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Top bar */
.top { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.top .wrap { display: flex; align-items: center; gap: 18px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 1.4rem; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.top nav { display: flex; gap: 20px; margin-left: auto; font-weight: 700; font-size: .95rem; }
.top nav a { color: var(--soft); text-decoration: none; }
.top nav a:hover { color: var(--ink); }
.store { display: inline-flex; align-items: center; gap: 10px; background: var(--btn); color: var(--btn-ink); text-decoration: none; border-radius: 14px; padding: 10px 18px; font-weight: 800; }
.store svg { width: 20px; height: 20px; }
.store small { display: block; font-size: .7rem; font-weight: 600; opacity: .8; line-height: 1; }
.store span { line-height: 1.1; }
.store:focus-visible, .button:focus-visible { outline: 3px solid var(--azure); outline-offset: 3px; }
.top .store { padding: 7px 14px; font-size: .9rem; }
/* Light/dark toggle: a sun shows in dark mode, a moon in light. */
.theme { all: unset; box-sizing: border-box; cursor: pointer; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.theme:hover { color: var(--azure); }
.theme:focus-visible { outline: 3px solid var(--azure); outline-offset: 2px; }
.theme svg { width: 20px; height: 20px; }
.theme .sun { display: none; }
:root[data-theme="dark"] .theme .sun { display: block; }
:root[data-theme="dark"] .theme .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .sun { display: block; }
  :root:not([data-theme="light"]) .theme .moon { display: none; }
}
@media (max-width: 760px) { .top nav { display: none; } .top .theme { margin-left: auto; } }
.top .wrap > .brand + .theme { margin-left: auto; }

/* Hero: the headline, the playable challenge board, then the pitch */
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; grid-template-areas: "intro game" "pitch game"; column-gap: 56px; padding-block: 48px 72px; }
.intro { grid-area: intro; align-self: end; }
.pitch { grid-area: pitch; align-self: start; }
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.3rem); }
.hero h1 em { font-style: normal; color: var(--teal); }
.def { font-family: var(--display); color: var(--soft); font-size: 1.05rem; margin: 0 0 18px; }
.def b { color: var(--ink); font-weight: 600; }
.lede { font-size: 1.2rem; max-width: 30em; margin: 20px 0 28px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.cta p { margin: 0; color: var(--soft); font-weight: 700; font-size: .95rem; }
/* The board plays inside a pretend phone, on the app's own background, so
   white keys and tiles read as they do in the game. */
.game { grid-area: game; align-self: center; justify-self: center; width: 100%; max-width: 420px; display: grid; justify-items: center; }
.device {
  width: 100%; background: var(--app-bg); border: 11px solid var(--bezel); border-radius: 54px;
  padding: 8px 18px 28px;
  box-shadow: 0 0 0 1px var(--bezel-edge), 0 30px 70px -28px rgba(20, 40, 55, .5);
}
/* Just the Dynamic Island: Skirr hides the status bar on every screen (Mark). */
.status { display: flex; justify-content: center; align-items: center; height: 36px; margin-bottom: 12px; }
.status .island { display: block; width: 96px; height: 28px; border-radius: 14px; background: var(--bezel); }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; grid-template-areas: "intro" "game" "pitch"; row-gap: 28px; padding-block: 20px 48px; }
  .device { border-width: 8px; border-radius: 42px; padding: 6px 10px 20px; }
  .status { height: 30px; margin-bottom: 8px; }
  .status .island { width: 80px; height: 24px; }
}

/* Sections */
section.band { padding-block: 72px; }
section.alt { background: var(--panel); }
.head { max-width: 40em; margin-bottom: 36px; }
.head h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
.head p { color: var(--soft); font-size: 1.12rem; margin: 12px 0 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .grid3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid4 { grid-template-columns: 1fr; } }
.card { background: var(--card); border-radius: 22px; padding: 24px; min-width: 0; }
.card h3 { font-size: 1.35rem; margin: 16px 0 6px; }
.card p { margin: 0; color: var(--soft); }

/* Key and tile chips, drawn like the app's */
.chip { width: 58px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-family: var(--display); font-weight: 500; font-size: 1.7rem; }
.chip.more { background: var(--orange); color: #0f1d26; box-shadow: 0 4px 0 #b8741f; position: relative; }
.chip.more i { position: absolute; top: -9px; right: -9px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--card); font-style: normal; font-size: .95rem; display: grid; place-items: center; }
.chip.all { background: var(--teal); color: var(--card); }
.chip.unused { color: #a9b7be; background: var(--bg); }
.tile { width: 64px; height: 64px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
.tile svg { width: 60%; height: 60%; }
.tile.spy, .tile.shape { background: var(--azure); box-shadow: 0 4px 0 #1b5792; }
.tile.skull { background: var(--red); box-shadow: 0 4px 0 #7d0c1d; --sk-skull: var(--red); }
.tile.blank { background: #fff4dc; box-shadow: 0 4px 0 #dcc48d; }
.tile.word { background: var(--teal); box-shadow: 0 4px 0 var(--teal-side); font-family: var(--display); font-weight: 600; font-size: 2rem; color: var(--card); }

/* Daily and Stats */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.facts { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.facts li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.facts i { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-style: normal; font-family: var(--display); font-weight: 600; color: #fff; }
.facts b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.facts span { color: var(--soft); }
.shot { background: var(--card); border-radius: 26px; padding: 14px; }
.shot img { display: block; width: 100%; height: auto; border-radius: 16px; }

/* Skirr Pro */
.pro { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .pro { grid-template-columns: 1fr; } }
.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.perks li { background: var(--card); border-radius: 18px; padding: 18px 20px; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; }
.perks .tile { width: 46px; height: 46px; grid-row: span 2; border-radius: 10px; font-family: var(--display); font-weight: 600; font-size: 1.3rem; }
.perks b { font-family: var(--display); font-weight: 600; font-size: 1.2rem; }
.perks span { color: var(--soft); }
.free { margin-top: 18px; color: var(--soft); font-weight: 700; }
.free b { color: var(--teal); }

/* Privacy band */
.nada { font-family: var(--display); font-weight: 500; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1; margin: 0 0 18px; }
.nada span { color: var(--teal); }

/* Plain pages: privacy statement, development notes */
.doc { padding-block: 40px 72px; }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 8px; }
.doc .updated { color: var(--soft); margin: 0 0 32px; }
.doc section { background: var(--card); border-radius: 22px; padding: 24px 26px; margin-bottom: 16px; }
.doc h2 { font-size: 1.5rem; margin-bottom: 8px; }
.doc p { margin: 0 0 10px; }
.doc p:last-child { margin-bottom: 0; }
.doc ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.doc .big { font-family: var(--display); font-weight: 500; font-size: 2rem; color: var(--teal); margin-bottom: 6px; line-height: 1.1; }

/* Home page: one card per game */
.games { padding-block: 40px 72px; }
.games h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); max-width: 14em; }
.games .lede { color: var(--soft); }
.game-card { background: var(--card); border-radius: 28px; padding: 28px; display: grid; grid-template-columns: auto 1fr; gap: 24px 28px; align-items: center; margin-top: 36px; }
.game-card img { width: 128px; height: 128px; border-radius: 28px; }
.game-card h2 { font-size: 2.2rem; }
.game-card p { margin: 8px 0 18px; color: var(--soft); max-width: 36em; }
.game-card .actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.button { display: inline-flex; align-items: center; background: var(--teal); color: var(--card); text-decoration: none; border-radius: 14px; padding: 12px 20px; font-weight: 800; box-shadow: 0 4px 0 var(--teal-side); }
@media (max-width: 600px) { .game-card { grid-template-columns: 1fr; } .game-card img { width: 96px; height: 96px; border-radius: 22px; } }

/* Footer */
footer { padding-block: 56px; border-top: 1px solid var(--line); }
footer .wrap { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }
footer h3 { font-size: 1.1rem; margin-bottom: 6px; }
footer p { margin: 0; color: var(--soft); }
footer .social { display: inline-flex; align-items: center; gap: 6px; }
footer .social svg { width: 1.05em; height: 1.05em; color: #1185fe; flex: none; }
footer .links { display: flex; flex-wrap: wrap; gap: 8px 20px; grid-column: 1 / -1; font-size: .9rem; color: var(--soft); }
footer .links a { color: var(--soft); }
@media (max-width: 700px) { footer .wrap { grid-template-columns: 1fr; } }