/* Teenydoku site: one stylesheet for every page.
   The app's own world (SudokuGame DESIGN.md): day pastels and a night sky, following the system setting.
   Fredoka is self-hosted. Words are ink and never coloured; the six number colours are only ever puzzle numbers.
   Raised controls are toy keys: a face on a solid lip from its own colour family, sinking into it when pressed.
   Contrast (WCAG AA): ink on ground 12.7:1 by day and 15.6:1 by night; ink on panel 14:1 by day;
   on-accent on accent 5.1:1 by day and 12.6:1 by night. */

:root {
  --ground: #F5F2FA;
  --blob-lilac: #EAE3F8;
  --blob-mint: #DDF2EA;
  --blob-peach: #FDE7DA;
  --ink: #2D2840;
  --panel: #FFFFFF;
  --panel-lip: #DCD3EE;
  --tray-key: #FFFFFF;
  --tray-key-ring: #E3DCF2;
  --accent: #6C5CD3;
  --accent-lip: #5243B0;
  --on-accent: #FFFFFF;
  --box-line: #6E6390;
  --cell: #FFFFFF;
  --cell-line: #DCD3EE;
  --given-card: #EDE7F8;
  --selected-fill: #D4F2E6;
  --selected-ring: #2FA37C;
  --clash-ring: #D94A6A;
  --clash-shade: #FBE6EC;
  --jar-outline: #6E6390;
  --jar-lid: #C9B8F0;
  --jar-body: #FFFFFF;
  --jar-star: #F2B84B;
  --n1: #D93A40;
  --n2: #2F6FDB;
  --n3: #A06800;
  --n4: #23874D;
  --n5: #7E44CF;
  --n6: #BF5216;
  --bezel: #1E1B2B;
  --lift: rgba(110, 99, 144, 0.22);
  --lift-strong: rgba(110, 99, 144, 0.34);

  --font: "Fredoka", ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --step--1: 0.9375rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.55rem, 1.3rem + 1.1vw, 2.15rem);
  --step-3: clamp(1.9rem, 1.45rem + 2vw, 2.9rem);
  --display: clamp(2.9rem, 1.7rem + 5vw, 5.1rem);

  --wrap: 72rem;
  --read: 42rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --lip: 5px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #101735;
    --ink: #F3F5FF;
    --panel: #1B2350;
    --panel-lip: #0A0F26;
    --tray-key: #232D63;
    --tray-key-ring: #34407F;
    --accent: #FFD66B;
    --accent-lip: #C9A23F;
    --on-accent: #101735;
    --box-line: #7F8FE6;
    --cell: #1B2350;
    --cell-line: #2E3A73;
    --given-card: #2C3872;
    --selected-fill: #2F3D85;
    --selected-ring: #FFD66B;
    --clash-ring: #FF7B8A;
    --clash-shade: #3A2856;
    --jar-outline: #A9B5F5;
    --jar-lid: #7F8FE6;
    --jar-body: #232D63;
    --jar-star: #FFD66B;
    --n1: #FF7B7B;
    --n2: #6FA8FF;
    --n3: #FFD23F;
    --n4: #52DB8E;
    --n5: #C29BFF;
    --n6: #FFA552;
    --bezel: #05081A;
    --lift: rgba(0, 0, 0, 0.4);
    --lift-strong: rgba(0, 0, 0, 0.55);
  }

  /* The bezels would vanish into the night sky, so they take a faint starlight edge. */
  .device { outline: 1.5px solid rgba(243, 245, 255, 0.16); outline-offset: -1.5px; }
}

@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/fredoka.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--ground);
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink);
  caret-color: var(--accent);
}

/* The ground. By day, big soft circles bleed off the edges; by night, a field of stars, a few of them twinkling.
   It is a fixed layer, so it stays put on every device, including iOS. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(circle at 50% 50%, var(--blob-lilac) 0 64%, transparent 65%) -18vmax -16vmax / 52vmax 52vmax no-repeat,
    radial-gradient(circle at 50% 50%, var(--blob-mint) 0 64%, transparent 65%) calc(100% + 20vmax) 56% / 50vmax 50vmax no-repeat,
    radial-gradient(circle at 50% 50%, var(--blob-peach) 0 64%, transparent 65%) -12vmax calc(100% + 22vmax) / 46vmax 46vmax no-repeat;
}

@media (prefers-color-scheme: dark) {
  body::before {
    background-image:
      radial-gradient(circle 1.4px at 12% 14%, rgba(243, 245, 255, 0.9), transparent),
      radial-gradient(circle 1px at 38% 6%, rgba(243, 245, 255, 0.6), transparent),
      radial-gradient(circle 1.6px at 71% 22%, rgba(243, 245, 255, 0.8), transparent),
      radial-gradient(circle 1px at 90% 9%, rgba(243, 245, 255, 0.55), transparent),
      radial-gradient(circle 1.2px at 24% 58%, rgba(243, 245, 255, 0.7), transparent),
      radial-gradient(circle 1px at 56% 47%, rgba(243, 245, 255, 0.45), transparent),
      radial-gradient(circle 1.4px at 84% 66%, rgba(243, 245, 255, 0.8), transparent),
      radial-gradient(circle 1px at 8% 86%, rgba(243, 245, 255, 0.5), transparent),
      radial-gradient(circle 1.2px at 47% 92%, rgba(243, 245, 255, 0.65), transparent),
      radial-gradient(circle 1px at 63% 78%, rgba(243, 245, 255, 0.4), transparent),
      radial-gradient(circle 1.1px at 31% 33%, rgba(243, 245, 255, 0.5), transparent);
    background-size: 360px 360px;
    background-position: 0 0;
    background-repeat: repeat;
  }

  body::after {
    background-image:
      radial-gradient(circle 1.8px at 18% 21%, rgba(255, 214, 107, 0.95), transparent),
      radial-gradient(circle 1.6px at 77% 13%, rgba(243, 245, 255, 0.95), transparent),
      radial-gradient(circle 1.7px at 62% 61%, rgba(255, 214, 107, 0.85), transparent),
      radial-gradient(circle 1.5px at 9% 72%, rgba(243, 245, 255, 0.9), transparent);
    background-size: 720px 720px;
    background-repeat: repeat;
  }

  @media (prefers-reduced-motion: no-preference) {
    body::after { animation: twinkle 3.6s ease-in-out infinite alternate; }
  }
}

@keyframes twinkle {
  from { opacity: 1; }
  to { opacity: 0.25; }
}

::selection { background: var(--selected-fill); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.005em;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--box-line);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

a:hover { text-decoration-thickness: 3px; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--panel);
  border-radius: 12px;
  font-weight: 600;
}

.skip:focus { top: 1rem; }

/* Nav */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding-block: 1.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.wordmark img {
  width: 44px;
  height: 44px;
  border-radius: 22.5%;
  box-shadow: 0 4px 10px -4px var(--lift-strong);
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}

.nav li a {
  display: inline-block;
  padding-block: 0.6rem;
  text-decoration-color: transparent;
}

.nav li a:hover,
.nav li a[aria-current="page"] { text-decoration-color: var(--box-line); }

/* Toy keys. The face sinks by the lip's depth when pressed and the lip stays put. */
.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 56px;
  padding: 0.55rem 1.6rem;
  border-radius: 20px;
  text-align: center;
  line-height: 1.2;
  font-size: var(--step-1);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  background: var(--tray-key);
  border: 2px solid var(--tray-key-ring);
  box-shadow: 0 var(--lip) 0 var(--panel-lip);
  transition: transform 0.16s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.16s cubic-bezier(0.3, 1.4, 0.5, 1);
  -webkit-tap-highlight-color: transparent;
}

.key:active {
  transform: translateY(var(--lip));
  box-shadow: 0 0 0 var(--panel-lip);
}

.key-accent {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 var(--lip) 0 var(--accent-lip);
}

.key-accent:active { box-shadow: 0 0 0 var(--accent-lip); }

.key svg { width: 0.95em; height: 0.95em; flex: none; }

/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 2.5rem clamp(2rem, 4vw, 4.5rem);
  padding-block: clamp(1.5rem, 4vw, 4rem) clamp(3rem, 7vw, 6.5rem);
}

.hero h1 {
  font-size: var(--display);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: 9ch;
}

.hero .sub {
  margin-top: 1.4rem;
  max-width: 30rem;
  font-size: var(--step-1);
  line-height: 1.5;
}

.hero .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 2.1rem;
}

.soon {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
}

.soon small { font-size: var(--step--1); font-weight: 400; }

.hero .note {
  margin-top: 1.4rem;
  font-weight: 600;
}

/* The devices: the iPad with the phone in front of its lower-left corner. Both screens are real captures. */
.devices {
  position: relative;
  justify-self: center;
  width: min(100%, 34rem);
  padding: 0 0 2.5rem 28%;
}

.device {
  margin: 0;
  background: var(--bezel);
  box-shadow: 0 18px 36px -12px var(--lift-strong), 0 2px 6px var(--lift);
}

.device picture, .device img { display: block; width: 100%; }

.ipad {
  padding: 3.2%;
  border-radius: 7.5% / 5.6%;
}

.ipad img { border-radius: 4.4% / 3.3%; }

.phone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36%;
  padding: 2.2%;
  border-radius: 15% / 7%;
  box-shadow: 0 16px 28px -10px var(--lift-strong), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.phone img { border-radius: 12.5% / 5.8%; }

@media (prefers-reduced-motion: no-preference) {
  .ipad { animation: settle 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .phone { animation: settle 0.9s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both; }
}

@keyframes settle {
  from { transform: translateY(14px); }
  to { transform: none; }
}

/* The four points */
.points-section { padding-block: clamp(2.5rem, 6vw, 5rem); }

.points-section h2 {
  font-size: var(--step-3);
  max-width: 16ch;
}

.points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.25rem) clamp(2rem, 5vw, 4.5rem);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

.points li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.points h3 {
  font-size: var(--step-1);
  margin-bottom: 0.45rem;
}

.points p { max-width: 34ch; }

.ico { width: 4.5rem; height: 4.5rem; }

.ico .frame { fill: var(--box-line); }
.ico .hair { fill: var(--cell-line); }
.ico .hop { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ico .cell { fill: var(--cell); }
.ico .given { fill: var(--given-card); }
.ico .n1 { fill: var(--n1); }
.ico .n2 { fill: var(--n2); }
.ico .n3 { fill: var(--n3); }
.ico .n4 { fill: var(--n4); }
.ico .n5 { fill: var(--n5); }
.ico .n6 { fill: var(--n6); }
.ico .shade { fill: var(--clash-shade); }
.ico .ring-clash { fill: none; stroke: var(--clash-ring); }
.ico .digit { font-family: var(--font); font-weight: 600; }
.ico .jar-outline { fill: none; stroke: var(--jar-outline); stroke-linejoin: round; }
.ico .jar-body { fill: var(--jar-body); }
.ico .jar-lid { fill: var(--jar-lid); }
.ico .star { fill: var(--jar-star); stroke: var(--jar-outline); stroke-linejoin: round; }
.ico .tile { fill: var(--tray-key); stroke: var(--tray-key-ring); }
.ico .tile-lip { fill: var(--panel-lip); }
.ico .tile-ring { fill: none; stroke: var(--accent); }

/* The close */
.close {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
}

.close-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: 2rem 3rem;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border-radius: 32px;
  background: var(--panel);
}

.close h2 { font-size: var(--step-3); }

.close-copy p { margin-top: 1rem; max-width: 38ch; font-size: var(--step-1); line-height: 1.5; }

.close .actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}


.keys-row {
  display: flex;
  width: 100%;
  max-width: 19rem;
  gap: clamp(0.3rem, 1.5vw, 0.5rem);
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}

.keys-row li {
  display: grid;
  place-items: center;
  flex: 1 1 0;
  max-width: 2.75rem;
  aspect-ratio: 1;
  border-radius: 26%;
  background: var(--tray-key);
  border: 2px solid var(--tray-key-ring);
  font-size: clamp(1.15rem, 0.8rem + 1.6vw, 1.55rem);
  font-weight: 600;
  line-height: 1;
}

.close .keys-row li { background: var(--ground); }

/* Reading pages: privacy and support */
.pagehead,
.sheet {
  width: min(calc(100% - 2 * var(--gutter)), 48rem);
  margin-inline: auto;
}

.pagehead { padding-block: clamp(1rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem); }

.pagehead h1 { font-size: var(--step-3); }

.pagehead p { margin-top: 0.5rem; font-size: var(--step--1); }

.sheet {
  margin-bottom: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 28px;
  background: var(--panel);
}

.sheet section + section {
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 2px solid var(--tray-key-ring);
}

.sheet h2 {
  font-size: var(--step-2);
  margin-bottom: 0.9rem;
}

.sheet p, .sheet ul, .sheet ol { max-width: var(--read); }

.sheet p + p, .sheet p + ul, .sheet p + ol, .sheet ul + p, .sheet ol + p, .sheet ol + ul, .sheet ul + ol { margin-top: 0.9rem; }

.sheet ul, .sheet ol { margin-block: 0; padding-left: 1.4rem; }

.sheet li + li { margin-top: 0.45rem; }

.sheet li::marker { color: var(--box-line); font-weight: 600; }

.sheet .lead { font-size: var(--step-1); font-weight: 600; line-height: 1.45; }

/* 404 */
.notfound {
  display: grid;
  justify-items: center;
  text-align: center;
  padding-block: clamp(2rem, 8vw, 6rem) clamp(4rem, 10vw, 8rem);
}

.empty-cell {
  width: 9rem;
  height: 9rem;
  border-radius: 26px;
  background: var(--selected-fill);
  box-shadow: inset 0 0 0 6px var(--selected-ring), 0 18px 36px -12px var(--lift-strong);
}

.notfound h1 { margin-top: 2.25rem; font-size: var(--step-3); }

.notfound p { margin-top: 0.75rem; font-size: var(--step-1); }

.notfound .key { margin-top: 2rem; }

/* Footer */
.footer {
  padding-block: 2rem 2.75rem;
  border-top: 2px solid var(--tray-key-ring);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  font-size: var(--step--1);
}

.footer .wordmark { font-size: 1.15rem; }

.footer .wordmark img { width: 32px; height: 32px; box-shadow: none; }

.footer p { line-height: 1.7; }

@media (max-width: 52rem) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: 12ch; }
  .devices { width: min(100%, 28rem); }
  .points { grid-template-columns: minmax(0, 1fr); }
  .close-inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 30rem) {
  .nav { padding-block: 1rem 0.5rem; }
  .nav ul { gap: 0 1.1rem; font-size: var(--step--1); }
  .nav li.contact { display: none; }
  .wordmark { font-size: 1.3rem; }
  .wordmark img { width: 38px; height: 38px; }
  .points li { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1rem; }
  .ico { width: 3.5rem; height: 3.5rem; }
  .key { width: 100%; }
}