/* ==========================================================================
   Cúpla Score: base styles and shared components
   Depends on tokens.css. map.css, games.css and screens.css build on these.
   Mobile first (360 px design width, works at 320 px). No inline styles:
   everything is a class. Dynamic values go through custom properties set
   from JS with el.style.setProperty('--progress', '0.6'), which CSP allows.

   CLASS REFERENCE
   ---------------
   Layout
     .cs-container              centred column, max 40rem, side gutter
     .cs-stack (--sm | --lg)    vertical flex with gap 16 (8 | 32)
     .cs-row                    horizontal flex, wraps, gap 12, centred
     .cs-prose                  text page body, max 65ch line length
     .visually-hidden           hidden but read by screen readers
     .cs-only-light / .cs-only-dark   show only in that theme (e.g. logo swap)

   Typography
     h1–h4 or .cs-h1 .cs-h2 .cs-h3 .cs-h4    display face (Bricolage), sentence case
     .cs-display                headline style for the landing (h1 size, tighter)
     .cs-lead  .cs-small  .cs-muted
     .cs-score                  big score numeral (96 px, 128 px desktop), wide and heavy
     .cs-score--md              smaller score numeral (39 px) for headers
     .cs-irish                  emphasised Irish span: <em class="cs-irish" lang="ga">
     .cs-title-ga / .cs-title-en  player title in Irish (heather) + English gloss
     .cs-place-ga / .cs-place-en  place name in Irish (large) + English (small)
     .cs-link                   text link (atlantic ink, underlined)

   Brand
     .cs-logo (--sm | --lg)     <img> wordmark sizing (min 96 px wide)
     .cs-fada                   gorse fada stroke (inline, sized in em)
     .cs-fada-anchor            position:relative wrapper; child .cs-fada--above sits over it
     .cs-fada-flick             one-shot flick animation (add/remove the class to replay)

   Buttons (all ≥ 48 px tall, fully rounded)
     .cs-btn + .cs-btn--primary | --secondary | --ghost | --danger
     .cs-btn--block             full width     .cs-btn--lg    larger text
     .cs-btn--link              looks like a text link, keeps 48 px target
     .cs-icon-btn               48×48 round icon button (quit, settings, mute)
     .cs-icon-close             CSS-drawn ✕ inside .cs-icon-btn

   Tiles (12 px radius, 2 px darker bottom edge, ≥ 48 px)
     .cs-tile                   answer tile (<button>)
     .cs-tile--emoji            big picture/emoji tile      .cs-tile--wide  spans the grid row
     states: .is-selected | [aria-pressed="true"] | .is-correct | .is-wrong | .is-matched | [disabled]
     .cs-tile-grid (--3)        2-column (3-column) tile grid

   Sheets and feedback
     .cs-sheet                  surface panel, 20 px radius
     .cs-sheet--docked          fixed to the bottom; slides up with .is-open
     .cs-backdrop               dimmer behind a sheet; .is-open to show
     .cs-feedback + --correct | --wrong     feedback block (pair with .cs-sheet--docked)
       .cs-feedback__head  .cs-feedback__answer  .cs-feedback__note  .cs-feedback__actions
     .cs-icon-status--correct | --wrong     round ✓ / ✕ icon (colour + shape, never colour alone)
     .cs-chip (--gorse | --correct | --wrong)  small inline pill, e.g. "+18"

   Game chrome
     .cs-levelbar               quit · hearts · progress row
     .cs-hearts > .cs-heart (.is-lost)      CSS hearts; add visually-hidden text with the count
     .cs-progress > .cs-progress__fill      set --progress (0..1) on .cs-progress; gorse fada leading edge
     .cs-stars > .cs-star (.is-empty)       CSS stars (font-size sets size); .cs-star-pop animates in

   Forms
     .cs-field  .cs-label  .cs-input  .cs-hint  .cs-error

   Motion helpers (all disabled under reduced motion)
     .cs-shake   .cs-snap   .cs-pop-in   .cs-fada-flick   .cs-star-pop
   Reduced motion = prefers-reduced-motion OR html[data-motion="reduce"].
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  accent-color: var(--atlantic);
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

img,
svg,
picture,
canvas,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* ---- Page ---- */
body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--sea-mist);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}

::selection {
  background: var(--gorse);
  color: var(--on-gorse);
}

/* ---- Focus ---- */
:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* ---- Layout ---- */
.cs-container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.cs-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cs-stack--sm {
  gap: var(--space-2);
}

.cs-stack--lg {
  gap: var(--space-6);
}

.cs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cs-prose {
  max-width: var(--measure);
}

.cs-prose > * + * {
  margin-top: var(--space-4);
}

.cs-prose > h2,
.cs-prose > h3 {
  margin-top: var(--space-6);
}

.cs-prose ul,
.cs-prose ol {
  padding-left: 1.25em;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Theme-only elements (logo swap etc.) */
.cs-only-dark {
  display: none !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cs-only-dark {
    display: revert !important;
  }
  :root:not([data-theme="light"]) .cs-only-light {
    display: none !important;
  }
}

:root[data-theme="dark"] .cs-only-dark {
  display: revert !important;
}

:root[data-theme="dark"] .cs-only-light {
  display: none !important;
}

/* ---- Typography ---- */
h1, h2, h3, h4,
.cs-h1, .cs-h2, .cs-h3, .cs-h4, .cs-display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1, .cs-h1 {
  font-size: var(--step-4);
}

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

h3, .cs-h3 {
  font-size: var(--step-2);
  line-height: var(--leading-snug);
}

h4, .cs-h4 {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}

.cs-display {
  font-size: var(--step-4);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.02em;
}

@media (min-width: 48rem) {
  h1, .cs-h1 {
    font-size: var(--step-5);
  }
  .cs-display {
    font-size: var(--step-5);
  }
}

.cs-lead {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}

.cs-small {
  font-size: var(--step--1);
  line-height: 1.4;
}

.cs-muted {
  color: var(--muted);
}

strong, b {
  font-weight: var(--weight-bold);
}

a,
.cs-link {
  color: var(--atlantic-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

a:hover,
.cs-link:hover {
  text-decoration-thickness: 3px;
}

.cs-irish {
  font-style: normal;
  font-weight: var(--weight-bold);
  color: var(--atlantic-ink);
}

.cs-title-ga {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-stretch: var(--stretch-display);
  font-size: var(--step-3);
  line-height: var(--leading-tight);
  color: var(--heather-ink);
}

.cs-title-en {
  color: var(--muted);
  font-size: var(--step-0);
}

.cs-place-ga {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-stretch: var(--stretch-display);
  font-size: var(--step-4);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
}

.cs-place-en {
  color: var(--muted);
  font-size: var(--step-0);
}

.cs-score {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-stretch: var(--stretch-score);
  font-size: var(--score-size);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
}

.cs-score--md {
  font-size: var(--step-4);
  letter-spacing: -0.02em;
}

/* ---- Logo ---- */
.cs-logo {
  display: block;
  width: 9.5rem;
  min-width: 96px;
  height: auto;
}

.cs-logo--sm {
  width: 7rem;
}

.cs-logo--lg {
  width: 16rem;
}

/* ---- The fada ---- */
.cs-fada {
  display: inline-block;
  width: 0.95em;
  height: 0.2em;
  border-radius: var(--radius-pill);
  background: var(--gorse);
  transform: rotate(-32deg);
  transform-origin: 0 50%;
  vertical-align: middle;
}

.cs-fada-anchor {
  position: relative;
  display: inline-block;
}

.cs-fada--above {
  position: absolute;
  left: 18%;
  bottom: 92%;
  pointer-events: none;
}

.cs-fada-flick {
  animation: cs-fada-flick 460ms var(--ease-out) both;
}

@keyframes cs-fada-flick {
  0% {
    opacity: 0;
    transform: rotate(-8deg) scaleX(0);
  }
  35% {
    opacity: 1;
  }
  70% {
    transform: rotate(-37deg) scaleX(1.15);
  }
  100% {
    opacity: 1;
    transform: rotate(-32deg) scaleX(1);
  }
}

/* ---- Buttons ---- */
.cs-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--atlantic-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.cs-btn:active {
  transform: translateY(2px);
}

.cs-btn--primary {
  background: var(--atlantic);
  color: var(--on-atlantic);
  box-shadow: inset 0 -3px 0 var(--atlantic-edge);
}

.cs-btn--primary:active {
  box-shadow: inset 0 -1px 0 var(--atlantic-edge);
}

.cs-btn--secondary {
  background: var(--surface);
  color: var(--atlantic-ink);
  border-color: var(--line-strong);
  box-shadow: 0 var(--edge) 0 var(--tile-edge);
}

.cs-btn--secondary:active {
  box-shadow: none;
}

.cs-btn--ghost {
  background: transparent;
  color: var(--atlantic-ink);
}

.cs-btn--danger {
  background: var(--rowan);
  color: var(--on-rowan);
  box-shadow: inset 0 -3px 0 var(--rowan-edge);
}

.cs-btn--link {
  padding-inline: var(--space-2);
  color: var(--atlantic-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.cs-btn--block {
  display: flex;
  width: 100%;
}

.cs-btn--lg {
  font-size: var(--step-1);
  min-height: 3.5rem;
  padding-inline: 2rem;
}

@media (hover: hover) {
  .cs-btn--primary:hover {
    box-shadow: inset 0 -3px 0 var(--atlantic-edge), 0 0 0 3px var(--atlantic-soft);
  }
  .cs-btn--secondary:hover {
    border-color: var(--atlantic);
  }
  .cs-btn--ghost:hover,
  .cs-btn--link:hover {
    background: var(--atlantic-soft);
  }
  .cs-btn--danger:hover {
    box-shadow: inset 0 -3px 0 var(--rowan-edge), 0 0 0 3px var(--rowan-soft);
  }
}

.cs-btn[disabled],
.cs-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.cs-icon-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .cs-icon-btn:hover {
    background: var(--line);
  }
}

.cs-icon-btn > svg {
  width: 24px;
  height: 24px;
}

.cs-icon-close {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
}

.cs-icon-close::before,
.cs-icon-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(45deg);
}

.cs-icon-close::after {
  transform: rotate(-45deg);
}

/* ---- Tiles ---- */
.cs-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.cs-tile-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cs-tile {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  min-width: var(--tap);
  margin: 0 0 var(--edge);
  padding: 0.75rem 1rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-tile);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 var(--edge) 0 var(--tile-edge);
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.cs-tile:active {
  transform: translateY(var(--edge));
  box-shadow: 0 0 0 var(--tile-edge);
}

@media (hover: hover) {
  .cs-tile:hover {
    border-color: var(--line-strong);
  }
}

.cs-tile--emoji {
  min-height: 5.5rem;
  font-size: var(--step-4);
  line-height: 1;
}

.cs-tile--wide {
  grid-column: 1 / -1;
}

.cs-tile.is-selected,
.cs-tile[aria-pressed="true"],
.cs-tile[aria-checked="true"] {
  border-color: var(--atlantic);
  background: var(--atlantic-soft);
  box-shadow: 0 var(--edge) 0 var(--atlantic-edge);
}

.cs-tile.is-correct {
  border-color: var(--atlantic);
  background: var(--atlantic-soft);
  color: var(--text);
  box-shadow: 0 var(--edge) 0 var(--atlantic-edge);
}

.cs-tile.is-wrong {
  border-color: var(--rowan);
  background: var(--rowan-soft);
  color: var(--text);
  box-shadow: 0 var(--edge) 0 var(--rowan-edge);
}

/* status badge in the tile corner: shape + colour (✓ tick, ✕ cross) */
.cs-tile.is-correct::before,
.cs-tile.is-wrong::before {
  content: "";
  position: absolute;
  top: -0.6rem;
  right: -0.6rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--surface);
}

.cs-tile.is-correct::before {
  background: var(--atlantic);
}

.cs-tile.is-correct::after {
  content: "";
  position: absolute;
  top: -0.25rem;
  right: -0.03rem;
  width: 0.35rem;
  height: 0.65rem;
  border: solid var(--on-atlantic);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.cs-tile.is-wrong::before {
  background:
    linear-gradient(45deg, transparent 42%, var(--on-rowan) 42%, var(--on-rowan) 58%, transparent 58%) center / 0.7rem 0.7rem no-repeat,
    linear-gradient(-45deg, transparent 42%, var(--on-rowan) 42%, var(--on-rowan) 58%, transparent 58%) center / 0.7rem 0.7rem no-repeat,
    var(--rowan);
}

.cs-tile.is-matched {
  border-color: transparent;
  background: var(--atlantic-soft);
  color: var(--muted);
  box-shadow: none;
  cursor: default;
}

.cs-tile[disabled],
.cs-tile[aria-disabled="true"] {
  cursor: default;
}

.cs-tile[disabled]:active,
.cs-tile[aria-disabled="true"]:active {
  transform: none;
}

/* ---- Sheets ---- */
.cs-sheet {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sheet);
  padding: var(--space-5);
}

.cs-sheet--docked {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sheet);
  max-width: var(--content-max);
  margin-inline: auto;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 0 var(--tile-edge);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}

.cs-sheet--docked.is-open {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-base) var(--ease-out), visibility 0s;
}

.cs-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-sheet) - 1);
  background: var(--backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}

.cs-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Feedback ---- */
.cs-feedback {
  display: grid;
  gap: var(--space-3);
}

.cs-feedback__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-stretch: var(--stretch-display);
  font-size: var(--step-2);
  line-height: var(--leading-tight);
}

.cs-feedback__answer {
  font-size: var(--step-1);
  font-weight: var(--weight-bold);
}

.cs-feedback__note {
  color: var(--muted);
}

.cs-feedback__actions {
  margin-top: var(--space-2);
}

.cs-feedback--correct {
  background: var(--atlantic-soft);
  box-shadow: 0 -2px 0 var(--atlantic);
}

.cs-feedback--correct .cs-feedback__head {
  color: var(--atlantic-ink);
}

.cs-feedback--wrong {
  background: var(--rowan-soft);
  box-shadow: 0 -2px 0 var(--rowan);
}

.cs-feedback--wrong .cs-feedback__head {
  color: var(--rowan-ink);
}

.cs-icon-status {
  position: relative;
  display: inline-block;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}

.cs-icon-status--correct {
  background: var(--atlantic);
}

.cs-icon-status--correct::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 0.5rem;
  height: 0.95rem;
  border: solid var(--on-atlantic);
  border-width: 0 3.5px 3.5px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.cs-icon-status--wrong {
  background:
    linear-gradient(45deg, transparent 41%, var(--on-rowan) 41%, var(--on-rowan) 59%, transparent 59%) center / 0.95rem 0.95rem no-repeat,
    linear-gradient(-45deg, transparent 41%, var(--on-rowan) 41%, var(--on-rowan) 59%, transparent 59%) center / 0.95rem 0.95rem no-repeat,
    var(--rowan);
}

.cs-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--line);
  color: var(--text);
  font-weight: var(--weight-bold);
  font-size: var(--step-0);
  font-variant-numeric: tabular-nums;
}

.cs-chip--gorse {
  background: var(--gorse-soft);
  box-shadow: inset 0 0 0 2px var(--gorse);
}

.cs-chip--correct {
  background: var(--atlantic-soft);
  color: var(--atlantic-ink);
}

.cs-chip--wrong {
  background: var(--rowan-soft);
  color: var(--rowan-ink);
}

/* ---- Level bar: quit · hearts · progress ---- */
.cs-levelbar {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap);
}

/* ---- Hearts (CSS-drawn) ---- */
.cs-hearts {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-heart {
  position: relative;
  display: inline-block;
  flex: none;
  width: 20px;
  height: 18px;
  transition: transform var(--dur-base) var(--ease-spring);
}

.cs-heart::before,
.cs-heart::after {
  content: "";
  position: absolute;
  top: 0;
  width: 10px;
  height: 16px;
  border-radius: 10px 10px 0 0;
  background: var(--rowan);
  transition: background-color var(--dur-base) var(--ease-out);
}

.cs-heart::before {
  left: 10px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.cs-heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

.cs-heart.is-lost {
  transform: scale(0.8);
}

.cs-heart.is-lost::before,
.cs-heart.is-lost::after {
  background: var(--line-strong);
  opacity: 0.55;
}

/* ---- Progress bar with the fada leading edge ---- */
.cs-progress {
  --progress: 0;
  position: relative;
  height: 12px;
  margin-block: 10px 4px;     /* room for the fada rising above the track */
  border-radius: var(--radius-pill);
  background: var(--line);
}

.cs-progress__fill {
  position: relative;
  height: 100%;
  width: calc(var(--progress) * 100%);
  min-width: 12px;
  border-radius: var(--radius-pill);
  background: var(--atlantic);
  transition: width var(--dur-slow) var(--ease-out);
}

/* the fada: a gorse stroke rising from the leading edge at 32° */
.cs-progress__fill::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  width: 26px;
  height: 8px;
  margin-top: -4px;
  border-radius: var(--radius-pill);
  background: var(--gorse);
  box-shadow: 0 0 0 2px var(--sea-mist);
  transform: rotate(-32deg);
  transform-origin: 30% 50%;
}

.cs-progress--on-surface .cs-progress__fill::after {
  box-shadow: 0 0 0 2px var(--surface);
}

.cs-progress--gorse .cs-progress__fill {
  background: var(--gorse-edge);
}

/* ---- Stars (CSS-drawn; font-size sets size) ---- */
.cs-stars {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.15em;
  font-size: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cs-stars--lg {
  font-size: 4rem;
}

.cs-stars--sm {
  font-size: 1rem;
}

.cs-star {
  --star: polygon(50% 2%, 62.5% 35%, 98% 36.5%, 70% 58.5%, 80% 93%, 50% 73.5%, 20% 93%, 30% 58.5%, 2% 36.5%, 37.5% 35%);
  position: relative;
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background: var(--gorse-edge);
  -webkit-clip-path: var(--star);
  clip-path: var(--star);
}

.cs-star::before {
  content: "";
  position: absolute;
  inset: 0.1em;
  background: var(--gorse);
  -webkit-clip-path: var(--star);
  clip-path: var(--star);
}

.cs-star.is-empty {
  background: var(--line-strong);
}

.cs-star.is-empty::before {
  background: var(--line);
}

/* the middle star sits a little higher in a row of three */
.cs-stars--lg > .cs-star:nth-child(2) {
  transform: translateY(-0.12em);
}

.cs-star-pop {
  animation: cs-star-pop 520ms var(--ease-spring) both;
}

.cs-star-pop:nth-child(2) {
  animation-delay: 160ms;
}

.cs-star-pop:nth-child(3) {
  animation-delay: 320ms;
}

@keyframes cs-star-pop {
  0% {
    opacity: 0;
    scale: 0.2;
    rotate: -40deg;
  }
  60% {
    opacity: 1;
    scale: 1.25;
    rotate: 8deg;
  }
  100% {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}

/* ---- Forms ---- */
.cs-field {
  display: grid;
  gap: var(--space-2);
}

.cs-label {
  font-weight: var(--weight-bold);
}

.cs-input {
  width: 100%;
  min-height: var(--tap);
  padding: 0.625rem 0.875rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-tile);
  background: var(--surface);
  color: var(--text);
  font-size: max(1rem, 16px); /* 16 px stops iOS zooming on focus */
}

.cs-input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.cs-input[aria-invalid="true"] {
  border-color: var(--rowan);
}

.cs-hint {
  color: var(--muted);
  font-size: var(--step--1);
}

.cs-error {
  color: var(--rowan-ink);
  font-weight: var(--weight-bold);
}

/* ---- Motion helpers ---- */
.cs-shake {
  animation: cs-shake 360ms var(--ease-in-out);
}

@keyframes cs-shake {
  0%, 100% { translate: 0; }
  20% { translate: -6px; }
  40% { translate: 5px; }
  60% { translate: -4px; }
  80% { translate: 2px; }
}

.cs-snap {
  animation: cs-snap 220ms var(--ease-spring);
}

@keyframes cs-snap {
  0% { scale: 0.94; }
  100% { scale: 1; }
}

.cs-pop-in {
  animation: cs-pop-in var(--dur-base) var(--ease-out) both;
}

@keyframes cs-pop-in {
  0% { opacity: 0; translate: 0 8px; }
  100% { opacity: 1; translate: 0 0; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0ms !important;
  transition-duration: 0.01ms !important;
}