/* One shell for the whole app: a driving range at night, with a warm bird as the only warm thing on screen. */
:root {
  color-scheme: dark;
  --sky: #0a1420;
  --sky-mid: #0d2029;
  --turf: #17392f;
  --text: #ffffff;
  --muted: #b7c6c0;
  --on-light: #0a1420; /* dark text is the sky colour, never pure black */
  --surface: rgba(255, 255, 255, 0.09);
  --surface-line: rgba(255, 255, 255, 0.14);
  --passive: #e7eee9; /* inputs sit one step below the pure white of main actions */
  --action: #ffffff;
  --gold: #ffcb47;
  --gold-deep: #f28c28;
  --track: rgba(255, 255, 255, 0.12);
  --stop: #c8483e;
  --danger: #ffb4a5;
  --bird: #ffcb47;
  --bird-belly: #fff1c2;
  --bird-dark: #e8a92a;
  --beak: #f28c28;
  --cheek: #ff9f8f;
  --cap: #3aa86f;
  --cap-brim: #2d8a5a;
  --eye: #222222;
  --ball: #ffffff;
  --ball-line: #d5dcd8;
}

* { box-sizing: border-box; }
html { background: var(--sky); -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100dvh;
}
/* The sky, the glow of the turf at the bottom, and one floodlight beam. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(112deg, transparent 18%, rgba(255, 255, 255, 0.055) 30%, transparent 44%),
    linear-gradient(180deg, var(--sky) 0%, var(--sky) 42%, var(--sky-mid) 68%, var(--turf) 100%);
}

.app {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.brand {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Bird and what it says */
.stage { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 8px 0 24px; }
.bird { width: 168px; height: auto; overflow: visible; filter: drop-shadow(0 0 34px rgba(255, 203, 71, 0.32)); }
.bird .shadow { fill: rgba(0, 0, 0, 0.35); }
.bird .body, .bird .tuft { fill: var(--bird); }
.bird .tail, .bird .wing { fill: var(--bird-dark); }
.bird .belly { fill: var(--bird-belly); }
.bird .beak { fill: var(--beak); }
.bird .cheek { fill: var(--cheek); opacity: 0.7; }
.bird .cap-top { fill: var(--cap); }
.bird .cap-brim { fill: var(--cap-brim); }
.bird .cap-dot { fill: var(--bird-belly); }
.bird .eye-ball { fill: var(--eye); }
.bird .eye-shine { fill: #fff; }
.bird .legs path { stroke: var(--beak); stroke-width: 5; stroke-linecap: round; fill: none; }
.bird .ball { fill: var(--ball); stroke: var(--ball-line); stroke-width: 1.5; }
.bird .ball-dimples circle { fill: var(--ball-line); }

.bird-body { transform-origin: 110px 180px; animation: bob 2.6s ease-in-out infinite; }
.eye { transform-origin: 138px 94px; animation: blink 4.5s infinite; }
.wing { transform-origin: 86px 112px; }
.bird.hop .bird-body, .bird.cheer .bird-body { animation: hop 0.55s ease-out; }
.bird.hop .wing, .bird.cheer .wing { animation: flap 0.18s ease-in-out 3; }
.bird.celebrate .bird-body { animation: celebrate 1.1s ease-out; }
.bird.celebrate .wing { animation: flap 0.15s ease-in-out 7; }
.bird.talk .beak { transform-origin: 168px 107px; animation: chatter 0.22s ease-in-out 6; }

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes hop {
  0% { transform: translateY(0) scale(1, 1); }
  25% { transform: translateY(0) scale(1.05, 0.93); }
  55% { transform: translateY(-18px) scale(0.97, 1.04); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes flap { 50% { transform: rotate(-28deg); } }
@keyframes celebrate {
  0% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-34px) rotate(-8deg); }
  60% { transform: translateY(-34px) rotate(8deg); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes chatter { 50% { transform: scaleY(0.6); } }

/* Outside practice the bird's words are the headline of the screen. */
.bubble { font-size: 26px; font-weight: 700; line-height: 1.3; text-align: center; max-width: 100%; }
.bubble small { display: block; font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--muted); margin-top: 6px; }

/* Answers sit at the bottom, where the thumb is. */
.panel { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.option {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--surface-line);
  border-radius: 20px;
  padding: 15px 18px;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.option:active { transform: scale(0.985); }
.option strong { display: block; font-size: 17px; }
.option .sub { display: block; font-size: 14px; color: var(--muted); }
.option[aria-pressed="true"] { background: var(--action); color: var(--on-light); border-color: var(--action); }
.option[aria-pressed="true"] .sub { color: #46545a; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  border: 1px solid var(--surface-line);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 15px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--action); color: var(--on-light); }

textarea {
  width: 100%;
  font: inherit;
  color: var(--on-light);
  background: var(--passive);
  border: none;
  border-radius: 22px;
  padding: 14px 18px;
  min-height: 92px;
  resize: none;
}
textarea::placeholder { color: #5d6b70; }
textarea:focus { outline: 2px solid var(--gold); outline-offset: 2px; }

.actions { display: flex; gap: 10px; margin-top: 6px; align-items: center; }
.primary {
  flex: 1;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  padding: 16px 22px;
  background: var(--action);
  color: var(--on-light);
  cursor: pointer;
}
.primary:disabled, .fab:disabled { opacity: 0.35; cursor: not-allowed; }
.primary:active, .fab:active { transform: scale(0.98); }
.icon-svg { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Big round "next" at the bottom, round "back" at the top left. */
.fab {
  width: 68px;
  height: 68px;
  margin: 10px auto 0;
  border-radius: 50%;
  border: none;
  background: var(--action);
  color: var(--on-light);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.back {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.link { background: none; border: none; color: var(--gold); font: inherit; cursor: pointer; padding: 0; }
.quiet-link { align-self: center; padding: 10px; color: var(--muted); font-size: 14px; }

.summary { margin: 0; background: var(--surface); border: 1px solid var(--surface-line); border-radius: 20px; padding: 4px 18px; }
.summary div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--surface-line); }
.summary div:last-child { border-bottom: none; }
.summary dt { color: var(--muted); flex: none; }
.summary dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

.note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
.note.error { color: var(--danger); font-size: 15px; }
.tips { margin: 0; padding: 4px 4px 4px 22px; color: var(--muted); font-size: 14px; }

/* Progress wears the bird's colours; the track almost disappears. */
.progress { margin-top: 18px; }
.progress-bar { height: 5px; background: var(--track); border-radius: 999px; overflow: hidden; }
.progress-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); border-radius: 999px; transition: width 0.3s; }
.progress.hidden { display: none; }

.level-card { background: var(--surface); border: 1px solid var(--surface-line); border-radius: 20px; padding: 14px 18px; }
.level-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.level-head strong { font-size: 17px; }
.level-head span { font-size: 13px; color: var(--muted); }
.level-bar { height: 7px; margin-top: 10px; background: var(--track); border-radius: 999px; overflow: hidden; }
.level-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); border-radius: 999px; transition: width 0.4s; }

/* Practice: the camera is the whole screen and everything floats on it.
   Styled from the Chirpi design system (练球中): tokens below, values copied from design-system/tokens.css. */
@font-face {
  font-family: "Xiaolai SC";
  src: url("fonts/xiaolai-sc-subset.woff2") format("woff2"); /* subset: 3,755 common hanzi + the app's own text; OFL, see fonts/OFL.txt */
  font-display: swap;
}
:root {
  --font-chirpi: "Xiaolai SC", "PingFang SC", "Hiragino Sans GB", -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --page-top: #0a1118;
  --text-2: #c4d0ca;
  --text-3: #abb9b3;
  --char-1: #ffcb47;
  --progress-a: #f0a93c;
  --progress-b: #ffcb47;
  --progress-c: #ffe79e;
  --glyph-idle: #7e8a84;
  --glyph-active: #ffffff;
  --destructive: #d2584b;
  --ds-surface: rgba(10, 17, 24, 0.42); /* design surface, darkened so it reads over a bright camera picture */
  --ds-surface-line: rgba(255, 255, 255, 0.14);
}
.practicing { font-family: var(--font-chirpi); }
.practicing .brand, .practicing .progress { display: none; }
.practicing .app { padding: 0; }
.live-wrap { position: fixed; inset: 0; background: #000; overflow: hidden; }
.live { display: block; width: 100%; height: 100%; object-fit: cover; }
.overlay { position: absolute; inset: 0; }
.mirror { transform: scaleX(-1); }
/* The night shell, faded over the camera: dark at the top for the chips, darker at the bottom for the count. */
.live-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 17, 24, 0.6) 0%, transparent 26%, transparent 48%, rgba(10, 17, 24, 0.88) 100%);
}

.session-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-surface-line);
  color: var(--text-2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.session-chip { font: 600 11px/1 var(--font-mono); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.session-top {
  position: fixed;
  z-index: 2;
  top: max(12px, env(safe-area-inset-top));
  left: 22px;
  right: 22px;
  display: flex;
  justify-content: space-between;
}

.practicing .stage {
  position: fixed;
  z-index: 2;
  top: calc(max(12px, env(safe-area-inset-top)) + 40px);
  left: 14px;
  right: 22px;
  margin: 0;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.practicing .bird { width: 72px; flex: none; filter: drop-shadow(0 0 22px rgba(255, 203, 71, 0.3)); }
.practicing .bubble {
  position: relative;
  background: var(--action);
  color: var(--on-light);
  border-radius: 18px 18px 18px 6px;
  padding: 9px 14px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
}
.practicing .bubble small { font-size: 12.5px; color: #46545a; margin-top: 2px; }

.guidance[hidden] { display: none; }
.guidance {
  position: absolute;
  z-index: 1;
  left: 22px;
  right: 22px;
  top: 40%;
  margin: 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}

.practice-bottom {
  position: fixed;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: max(26px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* The count: big enough to read from where the golfer stands, a few metres from the phone. */
.hud { display: flex; flex-direction: column; align-items: center; text-align: center; }
.score { position: relative; display: flex; align-items: baseline; }
.score-value { font-size: 92px; line-height: 0.9; font-weight: 700; letter-spacing: -0.045em; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
.score-label { font-size: 17px; font-weight: 700; color: var(--text-3); margin-left: 7px; }
.pop { position: absolute; right: -44px; top: -6px; font-size: 24px; font-weight: 700; color: var(--char-1); opacity: 0; pointer-events: none; }
.pop.show { animation: pop 0.9s ease-out; }
@keyframes pop {
  0% { opacity: 0; transform: translateY(8px) scale(0.6); }
  20% { opacity: 1; transform: translateY(0) scale(1.2); }
  100% { opacity: 0; transform: translateY(-24px) scale(1); }
}
.dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); }
.dot.on { background: var(--char-1); }
.set-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--text-3); }
.score-label, .set-hint, .level-line { text-shadow: 0 1px 6px rgba(10, 17, 24, 0.8); }

/* Level: the contrast goes into the fill, the track nearly disappears. */
.session-level .level-bar { height: 8px; margin: 0; background: rgba(255, 255, 255, 0.14); }
.session-level .level-bar span { background: linear-gradient(90deg, var(--progress-a), var(--progress-b) 55%, var(--progress-c)); }
.level-line { display: flex; justify-content: space-between; margin: 7px 2px 0; font-size: 12.5px; color: var(--text-3); }
.level-line span:first-child { color: var(--char-1); }

/* End: coral words on a white pill. Round buttons: grey glyph at rest, white while active. */
.controls { display: flex; align-items: center; gap: 12px; }
.finish {
  flex: 1;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  background: var(--action);
  color: var(--destructive);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.finish .icon-svg { width: 17px; height: 17px; }
.finish:disabled { color: var(--glyph-idle); }
.control {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--ds-surface);
  border: 1px solid var(--ds-surface-line);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--glyph-active);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color 0.3s, background 0.2s;
}
.control .icon-svg { width: 22px; height: 22px; stroke-width: 1.9; }
.control.off { color: var(--glyph-idle); }
.control:disabled { color: var(--glyph-idle); }
/* Talking to Chirpi: the mic turns into Chirpi's gold while it listens. */
.control.talk.listening { background: var(--char-1); border-color: transparent; color: var(--page-top); animation: listening 1.2s ease-in-out infinite; }
@keyframes listening {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 203, 71, 0.55); }
  50% { box-shadow: 0 0 0 9px rgba(255, 203, 71, 0); }
}
@media (prefers-reduced-motion: reduce) { .control.talk.listening { animation: none; } }
.practice-bottom .note.error { background: var(--on-light); padding: 10px 14px; border-radius: 14px; }
@media (max-height: 700px) {
  .score-value { font-size: 72px; }
  .practice-bottom { gap: 12px; }
}

/* The swings from this session */
.section-title { margin: 8px 0 0; font-weight: 700; font-size: 17px; }
.clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.clip { margin: 0; }
.clip video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; background: #000; display: block; }
.clip figcaption { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: 6px; }
.clip a { color: var(--on-light); background: var(--action); border-radius: 999px; padding: 4px 12px; font-weight: 700; text-decoration: none; }

.option, .primary, .fab, .back, .chip, .link, .control, .finish { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

@media (max-height: 700px) {
  .bird { width: 120px; }
  .bubble { font-size: 22px; }
  .stage { margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bird-body, .eye, .bird.hop .bird-body, .bird.hop .wing, .bird.cheer .bird-body, .bird.cheer .wing,
  .bird.celebrate .bird-body, .bird.celebrate .wing, .bird.talk .beak { animation: none; }
}

/* First visit: the ball on the tee, before it becomes the bird. */
.onboarding .brand, .onboarding .stage { display: none; }
.onboarding .app { padding-top: max(16px, env(safe-area-inset-top)); }
.onboarding .panel { flex: 1; margin-top: 0; min-height: 0; }
.onboarding .progress { order: -1; margin: 18px 56px 0; }
.scene { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 0; text-align: center; }

.ball-wrap { width: min(52vw, 210px); transition: filter 0.8s, opacity 0.8s; filter: drop-shadow(0 0 30px rgba(255, 244, 205, 0.4)); }
.ball-wrap.small { width: min(36vw, 138px); }
.ball-wrap.dim { opacity: 0.45; filter: none; }
.ball-wrap.glow { filter: drop-shadow(0 0 44px rgba(255, 203, 71, 0.75)); }
.ball-wrap.wobble .ball-body { animation: ball-wobble 1.5s ease-in-out infinite; }
.golf-ball { display: block; width: 100%; height: auto; overflow: visible; }
.golf-ball .tee { fill: var(--gold); }
.golf-ball .ball-body { transform-origin: 100px 180px; }
.golf-ball .ball-shell { fill: #f8f7ef; }
.golf-ball .ball-dents circle { fill: #d9ddd3; }
.golf-ball .cap-top { fill: var(--cap); }
.golf-ball .cap-brim { fill: var(--cap-brim); }
.golf-ball .cap-dot { fill: var(--bird-belly); }
.golf-ball .ball-cracks path {
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--hatch, 0));
}
@keyframes ball-wobble {
  0%, 62%, 100% { transform: rotate(0); }
  70% { transform: rotate(-6deg); }
  78% { transform: rotate(5deg); }
  86% { transform: rotate(-3deg); }
  94% { transform: rotate(2deg); }
}

/* Story captions float low, like subtitles. */
.caption {
  margin: 0;
  max-width: 320px;
  padding: 9px 16px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.38);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
}
.caption.in { animation: rise 0.35s ease-out; }
.story { cursor: pointer; }
.story-actions { width: 100%; }
.story-hint { margin: 0; font-size: 13px; color: var(--muted); }
[hidden] { display: none !important; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* One question at a time, high enough to stay above the keyboard. */
.ask { display: flex; flex-direction: column; gap: 14px; padding-top: 72px; }
.ask-title { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.3; text-align: center; }
.ask-sub { margin: -8px 0 0; color: var(--muted); font-size: 15px; }
.name-field, .chat-field {
  width: 100%;
  min-width: 0;
  font: inherit;
  color: var(--on-light);
  background: var(--passive);
  border: none;
  border-radius: 999px;
  padding: 14px 20px;
}
.name-field { text-align: center; font-size: 18px; }
.name-field::placeholder, .chat-field::placeholder { color: #5d6b70; }
.name-field:focus, .chat-field:focus { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The chat */
.chat { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; margin-top: 12px; }
.chat-log { flex: 1 1 0; min-height: 96px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.chat-log-inner { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding-top: 8px; }
.message { display: flex; align-items: flex-end; gap: 8px; animation: rise 0.25s ease-out; }
.message.you { justify-content: flex-end; }
.message-text { margin: 0; max-width: 76%; padding: 10px 14px; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; }
.message.ball .message-text { background: var(--action); color: var(--on-light); border-radius: 18px 18px 18px 5px; }
.message.you .message-text { background: #bfe3d2; color: var(--on-light); border-radius: 18px 18px 5px 18px; }
.message-ball {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #ffffff, #e4e6da 72%);
  box-shadow: 0 0 14px rgba(255, 244, 205, 0.55);
}
.message-ball.spacer { visibility: hidden; }
.typing .message-text { display: flex; gap: 5px; padding: 15px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--on-light); animation: typing 1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }
.chat-answers { display: flex; flex-direction: column; gap: 8px; flex: none; }
.chat-answers .option { padding: 10px 16px; border-radius: 16px; animation: rise 0.25s ease-out; }
.chat-answers .option strong { font-size: 16px; }
.chat-answers .option .sub { font-size: 13px; }
.chat-send { display: flex; gap: 8px; }
.send { flex: none; width: 48px; height: 48px; border: none; border-radius: 50%; background: var(--gold); color: var(--on-light); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.send:disabled { opacity: 0.35; }

/* What it will be */
.match { padding-top: 56px; }
.match-card { width: 100%; padding: 16px 18px; background: var(--surface); border: 1px solid var(--surface-line); border-radius: 22px; }
.match-card p { margin: 6px 0 12px; color: var(--muted); font-size: 15px; }
.match-label { display: block; color: var(--muted); font-size: 14px; }
.match-name { display: block; font-size: 30px; line-height: 1.25; color: var(--gold); }
.tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tag { padding: 3px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--surface-line); font-size: 13px; }

/* Choosing a cap */
.cap-row { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; margin-top: 24px; }
.arrow { flex: none; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cap-name { margin: 0; font-weight: 700; }
.swatches { display: flex; gap: 14px; }
.swatch { width: 34px; height: 34px; padding: 0; border: 2px solid transparent; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 2px var(--sky); }
.swatch[aria-pressed="true"] { border-color: #fff; }

/* Hold to hatch: cracks and glow follow --hatch, from 0 to 1. */
.hatch-ball {
  --hatch: 0;
  width: min(62vw, 250px);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 0 calc(24px + var(--hatch) * 70px) rgba(255, 203, 71, calc(0.3 + var(--hatch) * 0.7)));
  transform: scale(calc(1 + var(--hatch) * 0.12));
}
.hatch-prompt { margin: 12px 0 0; font-size: 17px; font-weight: 600; transition: opacity 0.2s; }
.hatch-prompt.held { opacity: 0.45; }
.key { display: inline-block; margin-right: 4px; padding: 2px 13px; border-radius: 999px; background: var(--action); color: var(--on-light); font-weight: 700; }
.flash { position: fixed; inset: 0; z-index: 5; background: #fffbe8; opacity: 0; pointer-events: none; }
.flash.show { animation: flash-in 0.45s ease-in forwards; }
@keyframes flash-in { to { opacity: 1; } }

/* The bird appears */
.revealing .brand { visibility: hidden; }
.revealing .app { animation: flash-out 0.7s ease-out; }
.revealing .stage { margin-top: 12vh; }
.revealing .bird { width: min(62vw, 240px); }
.revealing .bubble { font-size: 44px; font-weight: 800; color: var(--gold); }
.revealing .panel { align-items: center; gap: 18px; }
.revealing .caption { text-align: center; }
@keyframes flash-out { from { filter: brightness(4); } to { filter: brightness(1); } }

/* The card to keep or send */
.card-scene { justify-content: flex-start; gap: 10px; padding-top: 4px; }
.bird-card { width: min(100%, 300px); margin: 6px 0 8px; overflow: hidden; border-radius: 26px; background: #fffdf6; color: var(--on-light); transform: rotate(-2deg); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); animation: card-in 0.5s ease-out; text-align: left; }
.bird-card-sky { display: flex; justify-content: center; padding: 18px 0 8px; background: linear-gradient(180deg, var(--sky), var(--turf)); }
.bird-card-sky .bird { width: 44%; }
.bird-card-body { padding: 12px 16px 16px; }
.bird-card-name { font-size: 24px; }
.bird-card-body p { margin: 2px 0 10px; font-size: 14px; line-height: 1.45; color: #3b474d; }
.bird-card .tags { justify-content: flex-start; }
.bird-card .tag { background: #eef1e8; border-color: transparent; }
.share { border: 1px solid var(--surface-line); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; padding: 9px 20px; cursor: pointer; }
.card-scene .actions { width: 100%; margin-top: auto; }
.card-scene .note:empty { display: none; }
@keyframes card-in { from { opacity: 0; transform: translateY(24px) rotate(3deg); } to { opacity: 1; transform: rotate(-2deg); } }

.arrow, .swatch, .send, .share, .hatch-ball { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.hatch-ball { touch-action: none; }

@media (max-height: 620px) {
  .ask { padding-top: 56px; }
  .ball-wrap.small { width: 96px; }
  .cap-row { margin-top: 4px; }
  .match { padding-top: 48px; gap: 8px; }
  .match .fab, .caps .fab { width: 56px; height: 56px; margin-top: 2px; }
  .bird-card-sky .bird { width: 30%; }
  .revealing .stage { margin-top: 0; }
  .revealing .bird { width: 150px; }
  .revealing .bubble { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .ball-wrap.wobble .ball-body, .caption.in, .message, .chat-answers .option, .bird-card, .revealing .app { animation: none; }
  .bird-card { transform: none; }
}