/* The phone intro (/start, views/pages/start.ejs): one step on screen at a time, each led
   by a drawing. Watercolor in light mode, flat in dark: --ss-paint switches the wash off. */
body.start-page {
  --ss-ink: #1a3a5c;
  --ss-muted: #5a7a9a;
  --ss-line: #d4e3f1;
  --ss-field: #ffffff;
  --ss-focus: #8bb8d8;
  --ss-sky-top: #e3effa;
  --ss-sky-bottom: #f4f8fc;
  --ss-sun: #f7cf5c;
  --ss-moon: #f2dc8c;
  --ss-hill-back: #a9cf9a;
  --ss-hill-front: #7fae80;
  --ss-ground: #93bf8c;
  --ss-pole: #6b5a45;
  --ss-f1: #f2a9c4;
  --ss-f2: #a58af0;
  --ss-f3: #f7cf5c;
  --ss-stem: #5f9462;
  --ss-center: #fffaf0;
  --ss-star: #a58af0;
  --ss-soil: #a98462;
  --ss-grass: #7fae80;
  --ss-seed: #8a6a4e;
  --ss-deck: #1a3a5c;
  --ss-deck-edge: #ffffff;
  --ss-chip: rgba(255,255,255,0.92);
  --ss-on-soil: #ffffff;
  --ss-num-bg: #ffffff; --ss-num-ink: #1a3a5c; --ss-num-picked: #1a3a5c; --ss-num-picked-ink: #ffffff;
  --ss-paint: url(#ss-wash);
  margin: 0;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  background: linear-gradient(180deg, var(--ss-sky-top) 0%, var(--ss-sky-bottom) 45%);
  color: var(--ss-ink);
  overflow-x: hidden;
}
html.dark-theme body.start-page {
  --ss-ink: #e0eaf4; --ss-muted: #8badc8; --ss-line: #2a4a6a; --ss-field: #132d47; --ss-focus: #7aa8f2;
  --ss-sky-top: #132d47; --ss-sky-bottom: #0c1929;
  --ss-moon: #f2dc8c; --ss-hill-back: #3f6b45; --ss-hill-front: #4e7f50; --ss-ground: #5a8c5c; --ss-pole: #c9b79e;
  --ss-f1: #f472b6; --ss-f2: #8b5cf6; --ss-f3: #f5c518;
  --ss-stem: #6aaa6c; --ss-center: #132d47; --ss-star: #f5c518;
  --ss-soil: #1e4570; --ss-grass: #4e7f50; --ss-seed: #8a6a4e;
  --ss-deck: #2a5a8c; --ss-deck-edge: #132d47; --ss-chip: rgba(19,45,71,0.95);
  --ss-num-bg: #e0eaf4; --ss-num-ink: #0c1929; --ss-num-picked: #7aa8f2; --ss-num-picked-ink: #0c1929;
  --ss-paint: none;
}
@media (prefers-color-scheme: dark) {
  html:not(.light-theme) body.start-page {
    --ss-ink: #e0eaf4; --ss-muted: #8badc8; --ss-line: #2a4a6a; --ss-field: #132d47; --ss-focus: #7aa8f2;
    --ss-sky-top: #132d47; --ss-sky-bottom: #0c1929;
    --ss-moon: #f2dc8c; --ss-hill-back: #3f6b45; --ss-hill-front: #4e7f50; --ss-ground: #5a8c5c; --ss-pole: #c9b79e;
    --ss-f1: #f472b6; --ss-f2: #8b5cf6; --ss-f3: #f5c518;
    --ss-stem: #6aaa6c; --ss-center: #132d47; --ss-star: #f5c518;
    --ss-soil: #1e4570; --ss-grass: #4e7f50; --ss-seed: #8a6a4e;
    --ss-deck: #2a5a8c; --ss-deck-edge: #132d47; --ss-chip: rgba(19,45,71,0.95);
  --ss-num-bg: #e0eaf4; --ss-num-ink: #0c1929; --ss-num-picked: #7aa8f2; --ss-num-picked-ink: #0c1929;
    --ss-paint: none;
  }
}

/* Sun in light mode, moon and stars in dark */
.start-page .ss-dark { display: none; }
html.dark-theme .start-page .ss-light { display: none; }
html.dark-theme .start-page .ss-dark { display: inline; }
@media (prefers-color-scheme: dark) {
  html:not(.light-theme) .start-page .ss-light { display: none; }
  html:not(.light-theme) .start-page .ss-dark { display: inline; }
}

.ss-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ss-paint { filter: var(--ss-paint); }

.ss-top { display: flex; align-items: center; justify-content: space-between; padding: 16px; }
.ss-logo img { width: 36px; display: block; }
.ss-dots { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ss-dots li { width: 22px; height: 6px; border-radius: 3px; background: var(--ss-line); transition: background 0.3s ease; }
.ss-dots li.is-on { background: var(--ss-ink); }

.ss-main { max-width: 30rem; margin: 0 auto; padding: 0 16px 3rem; }

/* Steps slide in: from the right going forward, from the left going back */
.ss-step.is-forward { animation: ss-in-right 0.35s ease both; }
.ss-step.is-back { animation: ss-in-left 0.35s ease both; }
@keyframes ss-in-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes ss-in-left { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

.ss-step h1 { margin: 0 0 0.4rem; font: 800 1.75rem/1.2 'Playfair Display', serif; color: var(--ss-ink); text-align: center; }
.ss-step h1:focus { outline: none; }
.ss-sub { margin: 0 auto 1.25rem; max-width: 22rem; font-size: 1rem; line-height: 1.5; color: var(--ss-muted); text-align: center; }

.ss-scene { position: relative; margin: 0.5rem 0 1rem; }
.ss-scene svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---- Step 1: three peaks, one scene for the whole screen ---- */
.ss-sun { fill: var(--ss-sun); }
.ss-moon { fill: var(--ss-moon); }
.ss-pole { fill: none; stroke: var(--ss-pole); stroke-width: 2.4; stroke-linecap: round; }
.ss-f1 { fill: var(--ss-f1); }
.ss-f2 { fill: var(--ss-f2); }
.ss-f3 { fill: var(--ss-f3); }
.ss-pennant { transform-box: fill-box; transform-origin: 0% 50%; }

/* Every step is one scene for the whole screen: the question in the sky, and the land (.ss-land)
   taking whatever height is left, running into the page's bottom padding to the bottom edge */
.ss-full:not([hidden]) { position: relative; display: flex; flex-direction: column; min-height: calc(100vh - 68px - 3rem); min-height: calc(100svh - 68px - 3rem); }
.ss-full h1 { margin-top: 1.75rem; }
.ss-sky { position: absolute; top: -0.5rem; right: 0; width: 120px; height: 60px; pointer-events: none; }
.ss-land { position: relative; flex: 1; min-height: 20rem; margin: 0 -16px -3rem; }
.ss-land > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Room for the top summit's button below the question, even on the smallest phones */
.ss-peaks { min-height: 22.5rem; }
/* Fills the land; the drawing crops at the sides rather than stretching */
.ss-peaks-art { position: absolute; inset: 0; overflow: hidden; }
.ss-peaks-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ss-ground { fill: var(--ss-ground); }
.ss-peak-back { fill: var(--ss-hill-back); }
.ss-peak-front { fill: var(--ss-hill-front); }
.ss-peak { transition: opacity 0.3s ease; }

/* Each summit has a round number button; a flag waits, folded away, above it */
.ss-peak-btns { position: absolute; inset: 0; }
.ss-peak-btn {
  position: absolute; width: 56px; height: 56px; padding: 0; transform: translate(-50%, -62%);
  border: 0; border-radius: 50%; background: none; cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ss-peak-num {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box;
  border-radius: 50%; background: var(--ss-num-bg); border: 2px solid var(--ss-line);
  font: 700 0.95rem 'Inter', sans-serif; color: var(--ss-num-ink);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
/* The goal's name in a small label under the number, so it reads over the peak */
.ss-peak-name {
  position: absolute; left: 50%; top: calc(100% + 5px); transform: translateX(-50%);
  padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--ss-num-bg); border: 1px solid var(--ss-line);
  font: 600 0.72rem/1.2 'Inter', sans-serif; color: var(--ss-num-ink); white-space: nowrap; pointer-events: none;
}
.ss-peak-btn:hover .ss-peak-num, .ss-peak-btn:focus-visible .ss-peak-num { border-color: var(--ss-focus); transform: scale(1.06); }
.ss-peak-btn:focus-visible { outline: 3px solid var(--ss-focus); outline-offset: 3px; }
/* The buttons pulse once in turn on arrival, so they read as things to tap */
#ss-goal:not([hidden]) .ss-peak-num { animation: ss-nudge 0.5s ease 0.4s both; }
.ss-peak-btn[data-peak="1"] .ss-peak-num { animation-delay: 0.55s; }
.ss-peak-btn[data-peak="2"] .ss-peak-num { animation-delay: 0.7s; }
@keyframes ss-nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.ss-peak-flag { position: absolute; left: 50%; bottom: 62%; width: 46px; height: 54px; margin-left: -3px; transform: scaleY(0); transform-origin: 0 100%; transition: transform 0.35s cubic-bezier(.3,1.5,.6,1); }

/* Picked: the flag goes up on that summit, its button drops below and fills, the rest fade */
.ss-peaks[data-picked] .ss-peak, .ss-peaks[data-picked] .ss-peak-btn { opacity: 0.3; }
.ss-peaks[data-picked="0"] .ss-peak[data-peak="0"], .ss-peaks[data-picked="0"] .ss-peak-btn[data-peak="0"],
.ss-peaks[data-picked="1"] .ss-peak[data-peak="1"], .ss-peaks[data-picked="1"] .ss-peak-btn[data-peak="1"],
.ss-peaks[data-picked="2"] .ss-peak[data-peak="2"], .ss-peaks[data-picked="2"] .ss-peak-btn[data-peak="2"] { opacity: 1; }
.ss-peaks[data-picked="0"] .ss-peak-btn[data-peak="0"],
.ss-peaks[data-picked="1"] .ss-peak-btn[data-peak="1"],
.ss-peaks[data-picked="2"] .ss-peak-btn[data-peak="2"] { transform: translate(-50%, -10%); }
.ss-peaks[data-picked="0"] .ss-peak-btn[data-peak="0"] .ss-peak-flag,
.ss-peaks[data-picked="1"] .ss-peak-btn[data-peak="1"] .ss-peak-flag,
.ss-peaks[data-picked="2"] .ss-peak-btn[data-peak="2"] .ss-peak-flag { transform: scaleY(1); }
.ss-peaks[data-picked="0"] .ss-peak-btn[data-peak="0"] .ss-peak-num,
.ss-peaks[data-picked="1"] .ss-peak-btn[data-peak="1"] .ss-peak-num,
.ss-peaks[data-picked="2"] .ss-peak-btn[data-peak="2"] .ss-peak-num { background: var(--ss-num-picked); color: var(--ss-num-picked-ink); border-color: var(--ss-num-picked); animation: none; }
.ss-peaks[data-picked] .ss-peak-flag .ss-pennant { animation: ss-wave 0.6s ease-in-out 0.3s both; }
@keyframes ss-wave { 0%, 100% { transform: skewY(0); } 35% { transform: skewY(-9deg); } 70% { transform: skewY(6deg); } }

/* The controls at the bottom of each scene sit on the grass or soil */
.ss-land-foot { position: absolute; left: 16px; right: 16px; bottom: 1.25rem; display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.ss-own { display: flex; align-items: center; gap: 0.4rem; }
.ss-own input {
  width: 11.5rem; padding: 0.55rem 1rem; box-sizing: border-box;
  border: 2px solid var(--ss-line); border-radius: 999px;
  font: 0.95rem 'Inter', sans-serif; color: var(--ss-ink); background: var(--ss-field);
}
.ss-own input:focus { border-color: var(--ss-focus); outline: none; }
.ss-set {
  padding: 0.5rem 1rem; border: 0; border-radius: 999px; background: var(--ss-ink);
  font: 600 0.9rem 'Inter', sans-serif; color: var(--ss-field); cursor: pointer;
}
.ss-set[hidden] { display: none; }
.ss-set:focus-visible { outline: 3px solid var(--ss-focus); outline-offset: 2px; }
.ss-land-foot .ss-skip { margin: 0; padding: 0.55rem 0.75rem; color: var(--ss-ink); }
.ss-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ss-skip {
  display: block; margin: 1.5rem auto 0; padding: 0.6rem 1.5rem;
  border: 0; background: none; font: 600 0.95rem 'Inter', sans-serif; color: var(--ss-muted);
  text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.ss-skip:hover, .ss-skip:focus-visible { color: var(--ss-ink); outline: none; }

/* ---- Step 2: the deck, then the three cards ---- */
.ss-table[hidden] { display: none; }
/* The deck rests on the meadow, a little above the middle */
.ss-table { position: absolute; left: 0; right: 0; top: 31%; display: flex; justify-content: center; }
.ss-deck-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding: 1rem 1.5rem 0.75rem;
  border: 0; border-radius: 14px; background: none; cursor: pointer; color: var(--ss-ink);
}
.ss-deck-btn[hidden] { display: none; }
.ss-deck-btn:focus-visible { outline: 3px solid var(--ss-focus); outline-offset: 2px; }
/* A tall stack of face-down cards, each a little higher than the one below */
.ss-deck { position: relative; display: block; width: 110px; height: 128px; }
.ss-deck-card {
  position: absolute; left: 50%; bottom: 0; width: 76px; height: 106px; margin-left: -38px; box-sizing: border-box;
  border-radius: 8px; background: var(--ss-deck); border: 2px solid var(--ss-deck-edge); box-shadow: 0 2px 3px rgba(0,40,90,0.18);
  transform: translate(calc(var(--i) * 0.6px), calc(var(--i) * -2.4px));
}
.ss-deck-card:first-child { box-shadow: 0 10px 22px rgba(0,80,160,0.22); }
/* Only the top card shows its back: a thin inner frame and a small star */
.ss-deck-card:last-child::after {
  content: '★'; position: absolute; inset: 5px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 4px; color: rgba(255,255,255,0.75); font-size: 1rem;
}
/* A handwritten note beside the deck, pointing at it */
.ss-deck-btn { position: relative; }
.ss-deck-hint {
  position: absolute; left: calc(50% + 62px); top: -6px; display: flex; flex-direction: column; align-items: flex-start;
  font: 700 1.6rem/1 'Caveat', cursive; color: var(--ss-ink); white-space: nowrap; transform: rotate(-8deg);
}
.ss-deck-hint svg { width: 40px; height: 30px; margin: 2px 0 0 -6px; color: var(--ss-muted); }
.ss-deck-btn:not(:disabled) .ss-deck-hint { animation: ss-bob 1.6s ease-in-out infinite; }
@keyframes ss-bob { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-8deg) translateY(-4px); } }
/* Every few seconds the top card lifts and wiggles, as if it wants to be picked */
.ss-deck-btn:not(:disabled) .ss-deck-card:last-child { animation: ss-tease 3.2s ease-in-out 0.8s infinite; }
@keyframes ss-tease {
  0%, 62%, 100% { transform: translate(4.2px, -16.8px) rotate(0); }
  70% { transform: translate(4.2px, -32px) rotate(5deg); }
  76% { transform: translate(4.2px, -32px) rotate(-4deg); }
  82% { transform: translate(4.2px, -30px) rotate(3deg); }
  90% { transform: translate(4.2px, -16.8px) rotate(0); }
}
/* The note fades as soon as the deck is tapped */
.ss-deck-btn:disabled .ss-deck-hint { opacity: 0; transition: opacity 0.2s ease; }
.ss-deck-btn:disabled { cursor: default; }
/* The deal: the fan opens wide and the cards fly up, then the drawn cards flip in */
.ss-deck-btn.is-dealing .ss-deck { animation: none; }
/* The deal: the top three cards slide off the stack one after another, and the rest stay put */
.ss-deck-btn.is-dealing .ss-deck-card:nth-last-child(-n+3) { transition: transform 0.35s cubic-bezier(.3,.7,.4,1), opacity 0.35s ease; opacity: 0; }
.ss-deck-btn.is-dealing .ss-deck-card:nth-last-child(1) { transform: translate(-90px, -120px) rotate(-24deg); }
.ss-deck-btn.is-dealing .ss-deck-card:nth-last-child(2) { transform: translate(0, -140px); transition-delay: 0.12s; }
.ss-deck-btn.is-dealing .ss-deck-card:nth-last-child(3) { transform: translate(90px, -120px) rotate(24deg); transition-delay: 0.24s; }
.ss-deck-btn.is-dealing .ss-deck-hint { opacity: 0; }

/* The dealt cards, in a row to swipe through; the next card peeks in from the side */
.ss-cards {
  position: absolute; left: 0; right: 0; top: 0.75rem;
  display: flex; gap: 14px; padding: 18px 11% 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ss-cards::-webkit-scrollbar { display: none; }
.ss-cards:empty { display: none; }
.ss-cards .ms-card { flex: 0 0 78%; max-width: 20rem; box-sizing: border-box; scroll-snap-align: center; }
.ss-card { border: 0; font: inherit; color: inherit; text-align: center; cursor: pointer; }
.ss-card:focus-visible { outline: 3px solid var(--ss-focus); outline-offset: 4px; }
.ss-card .ms-card-name { display: block; }
.ss-card .ms-card-desc { display: block; -webkit-line-clamp: unset; overflow: visible; }
.ss-card .ms-tags { justify-content: center; gap: 0.6rem; }
/* The picked card lifts; the others fall away */
.ss-cards.has-pick .ss-card { transition: opacity 0.3s ease, transform 0.3s ease; }
.ss-cards.has-pick .ss-card:not(.is-picked) { opacity: 0.2; transform: scale(0.96); }
.ss-cards.has-pick .ss-card.is-picked { transform: translateY(-8px) scale(1.02); rotate: 0deg; }
.ss-status { position: absolute; left: 16px; right: 16px; bottom: 4.5rem; margin: 0; font-size: 0.9rem; color: var(--ss-ink); text-align: center; }

/* ---- Step 3: ready to write, then the hand-off to the Playground ---- */
.ss-twinkle { fill: #fff4cf; }
.ss-soil { fill: var(--ss-soil); opacity: 0.85; }
.ss-grass { fill: none; stroke: var(--ss-grass); stroke-width: 5; stroke-linecap: round; }

/* The picks, one above the other. On the Playground they grow into the counts and goal card and
   the mission card (public/js/intro-handoff.js). */
.ss-picks { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin: 1rem 0 1.5rem; padding: 0; list-style: none; }
.ss-picks[hidden] { display: none; }
.ss-pick {
  display: inline-flex; align-items: baseline; gap: 0.5rem; padding: 0.6rem 1.1rem;
  animation: ss-chip-in 0.45s cubic-bezier(.3,1.5,.6,1) both 0.1s;
  border-radius: 999px; background: var(--ss-chip); border: 1px solid var(--ss-line);
  font-size: 0.95rem; font-weight: 600; color: var(--ss-ink);
}
.ss-pick + .ss-pick { animation-delay: 0.25s; }
@keyframes ss-chip-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.ss-pick-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ss-muted); }
#ss-ready h1 { margin-bottom: 0.2rem; }

.ss-wide { width: 100%; box-sizing: border-box; }

.ss-opening { position: absolute; left: 16px; right: 16px; bottom: 2rem; margin: 0; text-align: center; font-size: 0.95rem; font-weight: 600; color: var(--ss-on-soil); }
#ss-ready { cursor: pointer; }
/* Leaving for the Playground: everything but the picks fades, and the picks glide up */
#ss-ready.is-leaving h1, #ss-ready.is-leaving .ss-sky, #ss-ready.is-leaving .ss-land { opacity: 0; transition: opacity 0.35s ease; }
.start-page:has(#ss-ready.is-leaving) .ss-top { opacity: 0; transition: opacity 0.35s ease; }

/* Reduced motion: every animation shows its last frame */
@media (prefers-reduced-motion: reduce) {
  .start-page *, .start-page *::before, .start-page *::after { animation: none !important; transition: none !important; }
}