/* The front page (index.html, landing.js): the title screen of the arcade. Peppi sits on the
   sign-in card and answers whatever the person is doing to it; the five steps are the trail
   ahead. Tokens and the wordmark come from styles.css. */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

body.landing { overflow-x: hidden; }

/* ---------- the sky: sunrise, drifting clouds, twinkles (behind everything) ---------- */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 82% -8%, rgba(255, 196, 33, .38) 0, transparent 70%),
    linear-gradient(180deg, var(--canvas) 0%, var(--canvas) 40%, #FFE8C4 100%); }
.cloud { position: absolute; left: 0; top: var(--y); width: var(--w); aspect-ratio: 2 / 1; opacity: .95;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cpath d='M24 56C8 56 4 38 19 33C17 17 35 9 47 18C53 5 80 5 86 21C102 17 114 32 103 43C110 52 102 56 95 56Z' fill='%23FFFCF3' stroke='%23E6CDA2' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: lp-drift var(--t) linear var(--d) infinite; }
.spark { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5L14.8 9.2L22.5 12L14.8 14.8L12 22.5L9.2 14.8L1.5 12L9.2 9.2Z' fill='%23FFC421' stroke='%232A1A0F' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: lp-twinkle 2.8s ease-in-out var(--d) infinite; }

/* ---------- the page ---------- */
.stage { position: relative; max-width: 1120px; margin: 0 auto; padding: 44px 28px 72px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); column-gap: 56px;
  grid-template-areas: "head gate" "about gate" "journey journey" "fine fine"; grid-template-rows: auto 1fr auto auto; align-items: start; }
.head { grid-area: head; }
.gate { grid-area: gate; padding-top: 6px; }
.about { grid-area: about; }
.journey { grid-area: journey; }
.fine { grid-area: fine; max-width: 760px; }

.landing .wordmark { font-size: 68px; }
.pitch { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 4.6vw, 54px); line-height: 1.04;
  letter-spacing: -0.005em; margin-top: 30px; max-width: 14em; }
/* A highlighter swipe under the promise, the way a poster would underline it. */
.pitch mark { color: inherit; padding: 0 .1em; margin: 0 -.1em; border-radius: .12em;
  background: linear-gradient(transparent 56%, var(--yolk) 56% 90%, transparent 90%); }
.about .lede { margin-top: 20px; max-width: 34em; }

/* ---------- Peppi on the card ---------- */
.perch { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 16px; margin-bottom: -30px; padding-left: 6px; }
/* The sun behind the pod: flat bands, the way an old console draws one. */
.perch::before { content: ""; position: absolute; left: -42px; bottom: -52px; width: 260px; height: 260px; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, #FFE384 0 40%, rgba(255, 196, 33, .38) 40% 60%, rgba(255, 196, 33, .2) 60% 80%, transparent 80%); }

.pod { position: relative; flex: none; width: 168px; aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer; color: inherit;
  border: 4px solid var(--ink); border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; box-shadow: var(--shadow-md);
  background: radial-gradient(circle at 50% 45%, #fff 0, var(--card) 45%, #FFE6C2 100%);
  transition: transform .2s var(--spring), box-shadow .2s; animation: lp-pop .7s var(--spring) .15s backwards; }
.pod:hover { transform: rotate(-3deg) scale(1.03); box-shadow: var(--shadow-lg); }
.pod:active { transform: scale(.96); box-shadow: var(--shadow-press); }
.pod:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.pod .rays { position: absolute; inset: -45%; background: repeating-conic-gradient(rgba(255, 196, 33, .34) 0 8deg, transparent 8deg 20deg);
  animation: lp-spin 28s linear infinite; }
.pod .mon { position: absolute; inset: 0; animation: lp-bob 2.4s ease-in-out infinite; }
.pod .hop { position: absolute; inset: 0; }
.pod img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none;
  transform: scale(1.34) scaleX(var(--face, 1)); transform-origin: 50% 62%; transition: transform .35s var(--spring); }
/* Peppi turns away while a password is typed. The same picture, flipped: no new art needed. */
.perch.shy { --face: -1; }
.perch.hop .hop { animation: lp-hop .5s var(--spring); }
.perch.nope .hop { animation: lp-nope .5s ease-in-out; }
.perch.cheer .hop { animation: lp-cheer .9s var(--spring); }

/* The dialog box, the way a game says things: a name tab, arcade type, a blinking arrow. */
.say { position: relative; flex: 1; min-width: 0; margin-bottom: 40px; min-height: 108px; padding: 20px 18px 16px;
  background: #fff; border: var(--line); border-radius: 12px; box-shadow: var(--shadow-sm), inset 0 0 0 4px #fff, inset 0 0 0 6px var(--ink);
  animation: lp-pop .5s var(--spring) .45s backwards; }
.say::before { content: ""; position: absolute; left: -12px; bottom: 26px; width: 20px; height: 20px; background: #fff;
  border-left: var(--line); border-bottom: var(--line); transform: rotate(45deg); border-bottom-left-radius: 4px; }
.say-name { position: absolute; left: 14px; top: -14px; z-index: 1; padding: 5px 8px 4px; background: var(--yolk); border: var(--line-thin); border-radius: 7px; font-size: 9px; }
.say-text { font-family: var(--font-hud); font-size: 11px; line-height: 1.95; letter-spacing: .01em; min-height: 3.9em; padding-right: 14px; }
.caret { position: absolute; right: 16px; bottom: 15px; width: 0; height: 0; border: 5px solid transparent; border-top: 7px solid var(--ink); border-bottom: 0;
  animation: lp-blink .9s steps(1) infinite; }

/* ---------- the sign-in card ---------- */
.gate .panel { position: relative; margin-top: 0; padding: 22px 24px 26px; box-shadow: var(--shadow-lg); border-radius: 18px; }
/* The window's title bar: Continue for someone coming back, New game for someone with a code. */
.gate .panel::before { display: block; margin: -22px -24px 20px; padding: 34px 18px 9px; border-radius: 15px 15px 0 0; border-bottom: var(--line);
  font-family: var(--font-hud); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
  background: repeating-linear-gradient(135deg, var(--yolk) 0 9px, #FFD34D 9px 18px); }
#loginPanel::before { content: "Continue" / ""; }
#signupPanel::before { content: "New game" / ""; }
#forgotPanel::before, #resetPanel::before { content: "New password" / ""; }
#confirmPanel::before { content: "Your email" / ""; }
/* Forgot your password: a quiet line under Sign in, a link in looks, a button in the page. */
.gate .forgot { margin-top: 16px; font-size: 14px; }
.linkish { background: none; border: 0; padding: 4px 0; font: inherit; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { color: var(--flame); }
.linkish:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
.gate .panel-note { margin-top: 8px; font-size: 15px; line-height: 1.5; }
.gate .ok:focus { outline: none; }
/* The reset and confirmation pages: the wordmark and one card, nothing else. */
.stage.solo { grid-template-columns: minmax(0, 560px); grid-template-areas: "head" "gate"; grid-template-rows: none; justify-content: center; }
.stage.solo .gate { margin-top: 26px; }
.gate h2 { font-size: 30px; margin-bottom: 2px; }
.gate label { font-size: 14px; margin: 16px 0 6px; }
.gate input[type=text], .gate input[type=email], .gate input[type=password] { font-size: 16px; padding: 12px 14px; border-radius: 10px;
  border: var(--line-thin); box-shadow: inset 0 3px 0 rgba(42, 26, 15, .07); transition: border-color .15s, box-shadow .15s; }
.gate input:focus { box-shadow: var(--shadow-teal); }
.gate .row { margin-top: 22px; }
/* The refusal in ink on the flame box: cream on it reads at about 3:1, ink at about 5:1, and
   this is the one line a person must be able to read at 22:00. Focused from auth.js, so no ring. */
.gate .error { color: var(--ink); }
.gate .error:focus { outline: none; }
/* Under the red box when the account was closed from Settings (auth.js reopenButton). */
#reopenBtn { margin-top: 12px; }

/* The main button points the way. */
.btn.go { font-size: 18px; padding: 15px 26px 15px 28px; display: inline-flex; align-items: center; gap: 12px; }
.btn.go::after { content: ""; width: 0; height: 0; border: 7px solid transparent; border-left: 11px solid var(--ink); border-right: 0; transition: transform .2s var(--spring); }
.btn.go:hover::after { transform: translateX(4px); }
.btn.go[disabled]::after { display: none; }
.gate .btn.ghost.small { font-size: 14px; padding: 11px 17px; }

/* ---------- the four birds ---------- */
.roster { margin-top: 30px; padding: 16px 18px 14px; max-width: 34em; border: 2px dashed var(--ink); border-radius: 18px; background: rgba(255, 252, 243, .94); }
.roster-line { font-size: 14px; font-weight: 700; line-height: 1.4; }
.roster-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; gap: 6px; justify-content: space-between; align-items: flex-end; }
.roster-list li { flex: 1; min-width: 0; text-align: center; animation: lp-bob 2.8s ease-in-out var(--d) infinite; }
.roster-list li::after { content: attr(data-name); display: block; margin-top: 9px; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.roster .chick { display: block; width: 62px; height: 62px; margin: 0 auto; border: 3px solid var(--ink); background: var(--card) center / 132% no-repeat;
  border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; box-shadow: var(--shadow-sm); }
.roster .peppi .chick { background-image: url(/peppi.webp); }
.roster .rozi .chick { background-image: url(/starters/rozi.webp); }
.roster .cikku .chick { background-image: url(/starters/cikku.webp); }
.roster .zeppi .chick { background-image: url(/starters/zeppi.webp); }
/* Yours is still an egg: it hatches when the brand is read. */
.roster .egg { display: block; width: 42px; height: 56px; margin: 3px auto 3px; border: 3px solid var(--ink); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  transform-origin: 50% 92%; animation: lp-rock 2.6s ease-in-out infinite;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .95) 0 7%, transparent 8%),
    radial-gradient(circle at 70% 36%, var(--yolk) 0 11%, transparent 12%),
    radial-gradient(circle at 30% 60%, var(--tangerine) 0 12%, transparent 13%),
    radial-gradient(circle at 66% 76%, var(--teal) 0 10%, transparent 11%),
    var(--card);
  box-shadow: inset -6px -8px 0 rgba(42, 26, 15, .08), var(--shadow-sm); }
.roster .yours { animation: none; }

/* ---------- the trail: five steps ---------- */
.journey { margin-top: 64px; }
.journey .hud { color: var(--ink-soft); }
.journey h2 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; margin: 10px 0 0; max-width: 18em; }
.trail { list-style: none; padding: 0; margin: 46px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; position: relative; }
/* The contrail that joins the stops. It runs behind the cards, so it shows between them. */
.trail::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 0; border-top: 5px dotted var(--ink); }
.trail li { position: relative; z-index: 1; display: block; padding: 44px 16px 18px; background: var(--card); border: var(--line); border-radius: 18px;
  box-shadow: var(--shadow-sm); font-size: 15px; line-height: 1.5; transform: rotate(var(--tilt, 0deg));
  transition: transform .25s var(--spring), box-shadow .2s; animation: lp-pop .6s var(--spring) calc(.5s + var(--i) * .09s) backwards; }
.trail li:nth-child(1) { --tilt: -1.4deg; }
.trail li:nth-child(2) { --tilt: 1deg; }
.trail li:nth-child(3) { --tilt: -.7deg; }
.trail li:nth-child(4) { --tilt: 1.3deg; }
.trail li:nth-child(5) { --tilt: -1deg; }
.trail li:hover { transform: rotate(0) translateY(-5px); box-shadow: var(--shadow-md); }
.trail .ico { position: absolute; left: 50%; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; transform: rotate(-7deg);
  filter: drop-shadow(2px 3px 0 rgba(42, 26, 15, .25)); transition: transform .3s var(--spring); }
.trail li:hover .ico { transform: rotate(7deg) scale(1.15); }
.trail .n { position: absolute; right: 12px; top: 12px; font-family: var(--font-hud); font-size: 9px; line-height: 1; background: var(--yolk);
  border: var(--line-thin); border-radius: 8px; padding: 5px 7px; }
.trail li:nth-child(odd) .n { background: var(--teal); }

.fine { margin-top: 44px; }

/* ---------- confetti when the door opens ---------- */
.confetti { position: absolute; left: 6px; bottom: 0; width: 168px; height: 168px; z-index: 3; pointer-events: none; }
.confetti i { position: absolute; left: 50%; top: 50%; width: 9px; height: 14px; background: var(--c); border: 1.5px solid var(--ink); border-radius: 2px;
  animation: lp-burst .95s cubic-bezier(.2, .7, .4, 1) forwards; }

@keyframes lp-drift { from { transform: translateX(-30vw); } to { transform: translateX(110vw); } }
@keyframes lp-twinkle { 0%, 100% { transform: scale(.55) rotate(0); opacity: .55; } 50% { transform: scale(1.1) rotate(25deg); opacity: 1; } }
@keyframes lp-spin { to { transform: rotate(360deg); } }
@keyframes lp-bob { 50% { transform: translateY(-4%); } }
@keyframes lp-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes lp-hop { 30% { transform: translateY(-16%) scale(.94, 1.06); } 60% { transform: translateY(0) scale(1.08, .92); } }
@keyframes lp-nope { 15%, 55% { transform: translateX(-7%) rotate(-5deg); } 35%, 75% { transform: translateX(7%) rotate(5deg); } }
@keyframes lp-cheer { 20% { transform: translateY(-24%) rotate(-8deg) scale(.94, 1.08); } 45% { transform: translateY(0) scale(1.1, .9); }
  65% { transform: translateY(-14%) rotate(8deg); } 85% { transform: translateY(0); } }
@keyframes lp-blink { 50% { opacity: 0; } }
@keyframes lp-rock { 0%, 55%, 100% { transform: rotate(0); } 65% { transform: rotate(-8deg); } 75% { transform: rotate(7deg); } 85% { transform: rotate(-4deg); } 93% { transform: rotate(2deg); } }
@keyframes lp-burst { from { transform: translate(-50%, -50%) rotate(0) scale(.4); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(1); opacity: 0; } }

/* A tablet: one column, the card first so the form is on screen; the trail in a 6-column
   grid so five cards settle as three and two. */
@media (max-width: 960px) {
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "gate" "about" "journey" "fine"; grid-template-rows: none; padding-top: 32px; }
  .gate { max-width: 560px; margin-top: 22px; }
  .about { margin-top: 34px; }
  .trail { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 48px; }
  .trail li { grid-column: span 2; }
  .trail li:nth-child(4) { grid-column: 2 / span 2; }
  .trail li:nth-child(5) { grid-column: 4 / span 2; }
  .trail::before { display: none; }
}

/* A phone: smaller bird, the trail a list with the icon beside each line. */
@media (max-width: 640px) {
  .stage { padding: 18px 18px 56px; }
  .landing .wordmark { font-size: 54px; }
  /* Two lines, not three with "you." alone, so the sign-in card's button is on the first
     screen of a 375 by 667 phone. */
  .pitch { margin-top: 16px; font-size: 30px; }
  .gate { margin-top: 14px; }
  .perch { gap: 12px; margin-bottom: -26px; }
  .perch::before { width: 190px; height: 190px; left: -34px; bottom: -40px; }
  .pod { width: 112px; border-width: 3px; box-shadow: var(--shadow-sm); }
  .confetti { width: 112px; height: 112px; }
  .say { min-height: 84px; padding: 18px 14px 12px; margin-bottom: 26px; }
  .say-text { font-size: 10px; line-height: 1.9; }
  .gate .panel { padding: 20px 18px 22px; }
  .gate .panel::before { margin: -20px -18px 16px; padding-top: 30px; }
  .roster-list { gap: 2px; }
  .roster .chick { width: 52px; height: 52px; }
  .trail { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 30px; }
  .trail li, .trail li:nth-child(4), .trail li:nth-child(5) { grid-column: auto; padding: 16px 52px 16px 84px; min-height: 84px; display: flex; align-items: center; }
  .trail .ico { left: 14px; top: 50%; margin: -30px 0 0; }
  .trail .n { top: 50%; margin-top: -9px; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud, .spark, .pod, .pod .rays, .pod .mon, .say, .caret, .roster-list li, .roster .egg, .trail li { animation: none; }
  .perch.hop .hop, .perch.nope .hop, .perch.cheer .hop { animation: none; }
  .pod, .pod img, .trail li, .trail .ico, .btn.go::after { transition: none; }
  .cloud { transform: translateX(calc(var(--w) * 1.5)); }
  .cloud:nth-of-type(2) { transform: translateX(60vw); }
  .cloud:nth-of-type(3) { transform: translateX(32vw); }
  .cloud:nth-of-type(4) { transform: translateX(84vw); }
}