@font-face {
  font-family: 'Fredoka';
  src: url(../fonts/fredoka.woff2) format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url(../fonts/fraunces.woff2) format('woff2');
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --dogbg: #cfe2cf;
  --page: var(--dogbg);
  --paper: #fffaf2;
  --ink: #2b211c;
  --muted: #7b6b5f;
  --line: #eadfce;
  --chip: rgba(255, 252, 246, .72);
  --shadow: 0 1px 0 rgba(60, 35, 15, .05), 0 12px 32px -14px rgba(60, 35, 15, .45);
  --nose: #c2453a;
  --senses: #2f64b1;
  --mind: #8646ad;
  --body: #2b8757;
  --history: #a8701f;
  --myth: #4b4f58;
  --breed: #1c7788;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: color-mix(in oklab, var(--dogbg) 30%, #14100e);
    --paper: #29221e;
    --ink: #f5ede3;
    --muted: #b7a898;
    --line: #3b322c;
    --chip: rgba(41, 34, 30, .8);
    --shadow: 0 12px 32px -14px rgba(0, 0, 0, .7);
    --nose: #f07f72;
    --senses: #86aef0;
    --mind: #c996e8;
    --body: #6fcf98;
    --history: #e0ad5e;
    --myth: #b9bec8;
    --breed: #6cc8d8;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--page) radial-gradient(ellipse 70% 60% at 50% 78%, color-mix(in oklab, var(--page) 55%, #fff 45%), transparent) no-repeat;
  color: var(--ink);
  font: 400 16px/1.4 Fredoka, ui-rounded, system-ui, sans-serif;
  transition: background-color .5s ease;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, .nose:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---- top bar */
.bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 4px;
  position: relative;
  z-index: 3;
}
.brand {
  margin: 0 auto 0 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font: 600 27px/1 Fredoka, system-ui, sans-serif;
  letter-spacing: -.01em;
}
.brand img { border-radius: 8px; }
.icon-btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--chip);
}
.icon-btn .off { display: none; }
.icon-btn[aria-pressed="false"] .on { display: none; }
.icon-btn[aria-pressed="false"] .off { display: block; }
.book-btn {
  height: 42px;
  display: flex; align-items: center; gap: 7px;
  padding: 0 14px 0 12px;
  border: 0; border-radius: 99px;
  background: var(--paper);
  box-shadow: var(--shadow);
  font-weight: 600; font-size: 15.5px;
}
.book-btn .count { font-weight: 600; font-variant-numeric: tabular-nums; }
.book-btn .of { color: var(--muted); font-weight: 500; }
.book-btn.bump { animation: bump .5s ease; }
@keyframes bump { 30% { transform: scale(1.12); } }
@media (max-width: 380px) { .book-btn .long { display: none; } }

/* ---- the stage: fact card above, dog below */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
  overflow: hidden;
  /* The smallest a long fact can make the dog: three times the height of the bar with its name and Next dog, so
     its nose stays clear of them. */
  --dog-min: calc(3 * (58px + env(safe-area-inset-bottom)));
}
.card {
  position: relative;
  z-index: 2;
  width: min(100% - 32px, 35rem);
  margin: auto auto 0;
  padding: 15px 20px 14px;
  background: var(--paper);
  border-radius: 22px;
  box-shadow: var(--shadow);
  transform-origin: 50% 100%;
  /* The card leaves the dog at least --dog-min (and the 6px gap), so on a very small screen, such as a phone with
     its text size turned up, a long fact scrolls inside the card rather than shrinking the dog behind Next dog. */
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 6px - var(--dog-min));
}
.card::after {
  /* A speech-bubble tail, pointing at the dog. */
  content: '';
  position: absolute;
  left: calc(50% - 11px);
  bottom: -10px;
  width: 22px; height: 22px;
  background: var(--paper);
  border-radius: 0 0 6px 0;
  transform: rotate(45deg);
}
.card.pop { animation: pop .38s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(.94); } }
.kicker {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 7px;
  font-size: 13px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--topic, var(--muted));
}
.badge {
  padding: 2px 8px 3px;
  border-radius: 99px;
  background: var(--topic, var(--ink));
  color: var(--paper);
  font-size: 11px; letter-spacing: .06em;
}
.fact {
  margin: 0;
  font: 400 clamp(18px, 4.8vw, 22px)/1.38 Fraunces, Georgia, serif;
  text-wrap: pretty;
}
.fact.intro { font: 600 clamp(28px, 8vw, 34px)/1.1 Fredoka, system-ui, sans-serif; letter-spacing: -.01em; }
/* 2px either side keeps the edges of letters that lean past the line from being cut off; the lines stay as wide. */
.fact:not(.intro) { min-height: 0; overflow: hidden auto; padding: 0 2px; margin: 0 -2px; }
.kicker:has(.topic:empty) { display: none; }
.meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 10px 0 0;
  font-size: 14px; color: var(--muted);
  min-height: 22px;
}
.meta a { color: inherit; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.meta .src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.share {
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; padding: 4px 0 4px 6px;
  color: var(--muted); font-size: 14px; font-weight: 500;
}
.share:hover, .meta a:hover { color: var(--ink); }

.dog-wrap {
  position: relative;
  flex: none;
  align-self: center;
  /* The dog is 400 wide by 420 high (.952 turns a height into its width), and no taller than the room the card
     leaves under it, less the 6px gap: --room, measured in app.js. So a long fact on a short screen gives a smaller
     dog, instead of pushing its nose and Next dog off the bottom. */
  --fit: calc((var(--room, 100dvh) - 6px) * .952);
  width: min(118vw, 640px, calc(63dvh * .952), var(--fit));
  aspect-ratio: 400 / 420;
  margin-top: 6px;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.dog-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.dog-wrap svg.leaving { transition: transform .26s cubic-bezier(.5, 0, .9, .5); transform: translateY(105%); }
.dog-wrap svg.arriving { transform: translateY(105%); }
.dog-wrap svg.arrived { transition: transform .55s cubic-bezier(.2, 1.35, .45, 1); transform: none; }
.nose { cursor: pointer; outline: none; }
.nose .ring { fill: none; stroke: #fff; stroke-width: 3; opacity: 0; animation: ring 2.2s ease-out 1s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ring { 0% { transform: scale(.7); opacity: .9; } 70%, 100% { transform: scale(1.7); opacity: 0; } }

/* ---- breed name and next button, over the dog's chest */
.dogbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 0 16px calc(14px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.dogbar > * { pointer-events: auto; }
/* The breed name and Next dog each have a thin ring in the opposite tone, so they keep their shape on a coat
   of their own colour (the Rottweiler's black chest, the Samoyed's white one). */
.breed {
  margin: 0;
  padding: 9px 15px;
  border-radius: 99px;
  background: var(--paper);
  box-shadow: var(--shadow), 0 0 0 2px color-mix(in oklab, var(--ink) 45%, transparent);
  font-weight: 600; font-size: 15.5px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.breed:empty { visibility: hidden; }
.next {
  flex: none;
  padding: 11px 18px;
  border: 0; border-radius: 99px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600; font-size: 16px;
  box-shadow: var(--shadow), 0 0 0 2px color-mix(in oklab, var(--paper) 45%, transparent);
}
.next:active, .book-btn:active, .icon-btn:active { transform: scale(.96); }

.boopword {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  font: 700 24px/1 Fredoka, system-ui, sans-serif;
  color: #fff;
  -webkit-text-stroke: 6px #2b211c;
  paint-order: stroke fill;
  transform: translate(-50%, -50%);
  animation: floatup .9s ease-out forwards;
}
@keyframes floatup {
  0% { opacity: 0; transform: translate(-50%, -80%) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, -150%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -260%) scale(1); }
}

/* ---- fact book */
dialog.book {
  width: min(100vw, 46rem); max-width: 100vw;
  height: 100dvh; max-height: 100dvh;
  margin: 0 auto;
  padding: 0; border: 0;
  background: var(--paper); color: var(--ink);
}
dialog.book::backdrop { background: rgba(35, 22, 12, .45); }
@media (min-width: 760px) {
  dialog.book { height: min(92dvh, 940px); margin: auto; border-radius: 24px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); }
}
.book-inner { height: 100%; overflow: auto; padding: 0 20px calc(40px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.book-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 0 10px;
  background: var(--paper);
}
.book-head h2 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.book .close { background: var(--line); }
.progress { margin: 2px 0 22px; }
.progress p { margin: 0 0 8px; color: var(--muted); font-size: 16px; }
.progress p b { color: var(--ink); font-weight: 600; }
.meter { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--nose); }
.book h3 {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 30px 0 4px;
  font-size: 14px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--topic, var(--ink));
}
.book h3 small { font-size: 13px; letter-spacing: .02em; text-transform: none; color: var(--muted); font-weight: 500; }
.dogs { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 14px 10px; margin-top: 12px; }
.dogs button {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 0; border: 0; background: none;
  font-size: 13px; line-height: 1.2; text-align: center;
}
.dogs .pic { width: 76px; height: 76px; border-radius: 50%; overflow: hidden; display: block; }
.dogs .pic svg { width: 100%; height: 100%; display: block; }
.dogs button[disabled] { cursor: default; color: var(--muted); }
.dogs button[disabled] .pic { background: var(--line) !important; }
.dogs button[disabled] svg { filter: brightness(0); opacity: .16; }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { padding: 12px 0 13px; border-top: 1px solid var(--line); }
.facts li:first-child { border-top: 0; }
.facts .t { margin: 0; font: 400 16.5px/1.45 Fraunces, Georgia, serif; text-wrap: pretty; }
.facts .s { margin: 5px 0 0; font-size: 13.5px; color: var(--muted); }
.facts .s a { color: inherit; text-underline-offset: 2px; }
.facts .who { font-weight: 600; color: var(--breed); }
.facts li.missing { color: var(--muted); font-size: 15px; }
.book .reset {
  margin: 36px 0 0; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 99px; background: none;
  color: var(--muted); font-size: 14.5px;
}
.book .reset[data-armed] { border-color: var(--nose); color: var(--nose); }
.book .about { margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.jd-foot { margin: 32px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; text-align: center; }
.jd-foot a { color: inherit; text-decoration: none; }
.jd-foot a:hover, .jd-foot a:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.noscript { padding: 24px; font-size: 18px; }

@media (max-height: 740px) {
  .dog-wrap { width: min(118vw, 640px, calc(58dvh * .952), var(--fit)); }
}
@media (prefers-color-scheme: dark) {
  body { background-image: radial-gradient(ellipse 70% 60% at 50% 78%, color-mix(in oklab, var(--dogbg) 45%, #14100e), transparent); }
}

/* Short screens: a smaller dog and a tighter card. A phone on its side also gets the layout below. */
@media (max-height: 520px) {
  .dog-wrap { width: min(100%, calc(64dvh * .952), var(--fit)); }
  .card { padding: 11px 16px 10px; }
  .meta { margin-top: 6px; }
}

/* A phone on its side: the card on the left with the dog's name and Next dog under it, and the dog on the right,
   standing on the bottom edge, as tall as the room under the top bar (--stage-height, measured in app.js) but no
   wider than 37% of the screen, so the card keeps room for the longest facts. */
@media (max-height: 520px) and (orientation: landscape) {
  .stage {
    --dog-w: min(calc(var(--stage-height, 100dvh) * .952), 37vw);
    display: grid;
    grid-template-columns: minmax(0, 35rem) var(--dog-w);
    justify-content: center;
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 12px;
    padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
  }
  .card {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-height: calc(100% - 8px);
    margin: auto 0;
    transform-origin: 100% 50%;
  }
  /* The tail points right, at the dog. */
  .card::after { left: auto; right: -10px; top: calc(50% - 11px); bottom: auto; transform: rotate(-45deg); }
  /* Type sized to the screen's height; a fact that still doesn't fit scrolls inside the card. */
  .fact { font-size: clamp(16px, 4.8dvh, 20px); }
  .dog-wrap { grid-column: 2; grid-row: 1 / 3; width: var(--dog-w); align-self: end; margin: 0; }
  .dogbar { position: static; grid-column: 1; grid-row: 2; width: auto; margin: 0; padding-left: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .card.pop, .book-btn.bump { animation: none; }
  .dog-wrap svg.leaving, .dog-wrap svg.arrived { transition-duration: .01s; }
  .nose .ring { animation: none; }
  /* The floating "boop" fades in and out where you tapped instead of flying up. */
  .boopword { animation: boopfade .9s ease-out forwards; }
  @keyframes boopfade { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
}