/* ==========================================================================
   Cúpla Score: app shell and screens (landing, name, greeting, map screen,
   level result, out of hearts, signup gate, province complete, final, settings).
   ========================================================================== */

.cs-game-active .cs-app { padding: 0; }

.cs-root {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.cs-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  animation: cs-pop-in var(--dur-base) var(--ease-out);
}

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

.cs-screen--error {
  max-width: var(--content-max);
  margin: auto;
  padding: var(--gutter);
  gap: var(--space-4);
}

/* Honeypot fields: off-screen, never focusable */
.cs-hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.cs-copybuffer {
  position: fixed;
  top: 0;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Shared column */
.cs-name,
.cs-result,
.cs-gate,
.cs-province,
.cs-final,
.cs-settings {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-4) var(--gutter) var(--space-7);
}

/* ---- Logo ---- */
.cs-logo { display: block; }
.cs-logo__img { display: block; width: 100%; height: auto; }
.cs-logo__img--dark { display: none; }

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

/* ---- Landing ---- */
.cs-landing {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding: var(--space-5) var(--gutter) 0;
}

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

.cs-landing__copy .cs-logo { width: 9.5rem; margin-bottom: var(--space-4); }

.cs-landing__headline {
  font-size: var(--step-5);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.025em;
  line-height: 1.02;
  max-width: 12ch;
}

.cs-landing__sub {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--muted);
  max-width: 30ch;
}

.cs-landing__map {
  position: relative;
  width: min(100%, 26rem, calc((100dvh - 4rem) * 0.771));
  margin: calc(-1 * var(--space-2)) auto 0;
}

.cs-landing__cta {
  display: grid;
  gap: var(--space-2);
  order: 3;
  /* Mobile: the button stays reachable while the map is the hero. */
  position: sticky;
  bottom: 0;
  z-index: var(--z-header);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--space-6) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, transparent, var(--sea-mist) 38%);
}

.cs-landing__note {
  color: var(--muted);
  font-size: var(--step--1);
  text-align: center;
}

/* Mobile order: copy, map, button */
.cs-landing__copy { display: contents; }
.cs-landing__copy > .cs-logo,
.cs-landing__headline,
.cs-landing__sub { grid-column: 1; }
.cs-landing__map { order: 2; }

@media (min-width: 56rem) {
  .cs-landing {
    grid-template-columns: minmax(0, var(--left-col-max)) minmax(0, 1fr);
    grid-template-areas: none;
    align-items: center;
    column-gap: var(--space-8);
    min-height: 100dvh;
    padding-block: var(--space-7);
  }
  .cs-landing__copy { display: flex; grid-column: 1; grid-row: 1; }
  .cs-landing__headline { font-size: 4.25rem; }
  .cs-landing__cta { order: 0; position: static; margin: var(--space-4) 0 0; padding: 0; background: none; max-width: 22rem; }
  .cs-landing__note { text-align: left; }
  .cs-landing__map {
    grid-column: 2;
    grid-row: 1;
    width: min(100%, calc((100dvh - 6rem) * 0.771));
    margin: 0 auto;
  }
}

/* ---- Name + greeting ---- */
.cs-name {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cs-name__back { margin-left: calc(-1 * var(--space-3)); }

.cs-name__form {
  display: grid;
  gap: var(--space-5);
  margin-block: auto;
  padding-block: var(--space-6);
}

.cs-name__heading {
  font-size: var(--step-4);
  font-weight: var(--weight-heavy);
}

.cs-name .cs-input {
  min-height: 3.5rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-display);
}

.cs-greeting {
  display: grid;
  gap: var(--space-4);
  margin-block: auto;
  padding-block: var(--space-6);
}

.cs-greeting__flick {
  display: block;
  width: 3.5rem;
  height: 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--gorse);
  transform: rotate(-32deg);
  transform-origin: 0 50%;
  margin: var(--space-4) 0 var(--space-2) var(--space-2);
  animation: cs-fada-flick 460ms var(--ease-out) both;
}

.cs-greeting__ga {
  font-size: var(--step-5);
  font-weight: var(--weight-heavy);
  letter-spacing: -0.02em;
  color: var(--atlantic-ink);
}

.cs-greeting__en {
  font-size: var(--step-1);
  color: var(--muted);
  margin-bottom: var(--space-4);
}

/* ---- Top bar (map, province, settings) ---- */
.cs-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-2) var(--gutter);
  background: var(--sea-mist);
}

.cs-topbar__brand {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
}

.cs-topbar__mark {
  display: block;
  width: 36px;
  height: 36px;
}

.cs-topbar__who {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}

.cs-topbar__name {
  font-weight: var(--weight-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-topbar__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--heather-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-topbar__score {
  display: grid;
  justify-items: end;
  line-height: 1;
}

.cs-topbar__score-num {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--step-3);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.cs-topbar__score-label {
  font-size: 0.6875rem;
  color: var(--muted);
  font-weight: var(--weight-bold);
}

.cs-notice {
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--content-max) - 2 * var(--gutter));
  margin: 0 auto var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-small);
  background: var(--gorse-soft);
  font-size: var(--step--1);
}

/* ---- Map screen ---- */
.cs-screen--map {
  min-height: 100dvh;
}

.cs-map__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 0 var(--gutter);
}

.cs-map__greeting {
  display: grid;
  gap: 0;
  padding: var(--space-2) 0;
}

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

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

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

.cs-map__hint strong { color: var(--atlantic-ink); }

.cs-map__host {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-2);
}

.cs-map--play {
  width: min(100%, calc((100dvh - 15rem) * 0.771));
  min-width: 17rem;
}

.cs-map__next {
  position: sticky;
  bottom: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to bottom, transparent, var(--sea-mist) 30%);
}

.cs-map__next-text {
  flex: 1;
  display: grid;
  min-width: 0;
  line-height: 1.2;
}

.cs-map__next-place {
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--step-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.cs-map__next .cs-btn { flex: none; padding-inline: 2rem; }

/* ---- Level result ---- */
.cs-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.cs-result__hero {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding-top: var(--space-5);
  text-align: center;
}

.cs-result__stars { margin-bottom: var(--space-3); font-size: 4.5rem; }
.cs-result__stars .cs-star.is-pending { opacity: 0; }

.cs-result__heading {
  font-size: var(--step-3);
  font-weight: var(--weight-heavy);
}

.cs-result__gain {
  margin-top: var(--space-4);
}

.cs-result__gain-num {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--step-5);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.cs-result__gain .cs-fada--above { font-size: var(--step-4); left: 22%; }

.cs-result__nogain,
.cs-result__acc,
.cs-result__place { color: var(--muted); }

.cs-result__title {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-sheet);
  background: var(--surface);
}

.cs-result__titlerow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
}

.cs-result__titlerow .cs-title-ga { font-size: var(--step-2); }

.cs-result__score {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--step-2);
  font-variant-numeric: tabular-nums;
}

.cs-result__bar { --progress: 0; }
.cs-result__bar .cs-progress__fill::after { box-shadow: 0 0 0 2px var(--surface); }
.cs-result__bar .cs-progress__fill { transition-duration: 900ms; }

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

.cs-fact {
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + 6px);
  border-radius: var(--radius-tile);
  background: var(--atlantic-soft);
}

.cs-fact::before {
  content: "";
  position: absolute;
  left: var(--space-2);
  top: var(--space-4);
  bottom: var(--space-4);
  width: 4px;
  border-radius: var(--radius-pill);
  background: var(--atlantic);
}

.cs-fact__label {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--atlantic-ink);
  margin-bottom: var(--space-1);
}

.cs-result__actions {
  display: grid;
  gap: var(--space-3);
  margin-top: auto;
}

.cs-result--failed { justify-content: center; min-height: 80dvh; }
.cs-result--failed .cs-hearts { margin-bottom: var(--space-3); transform: scale(1.6); }
.cs-result--failed .cs-result__heading { font-size: var(--step-4); }
.cs-result__back { justify-self: center; padding: var(--space-3); }

/* ---- Signup gate ---- */
.cs-gate {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.cs-gate__badge {
  justify-self: start;
  position: relative;
  display: grid;
  gap: 0;
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-5);
  border-radius: var(--radius-sheet);
  background: var(--heather-soft);
  box-shadow: inset 0 0 0 2px var(--heather);
}

.cs-gate__badge .cs-fada {
  position: absolute;
  top: -0.35rem;
  left: 1.6rem;
  font-size: 2rem;
}

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

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

.cs-gate__heading { font-size: var(--step-3); }
.cs-gate__heading .cs-title-ga { font-size: inherit; }

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

.cs-gate__form {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.cs-gate__suggest { font-weight: var(--weight-bold); }
.cs-gate__suggest-btn {
  border: 0;
  background: none;
  padding: var(--space-1) 0;
  min-height: 2rem;
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.cs-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.cs-check__box {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.125rem 0 0;
}

.cs-check__label { min-height: var(--tap); padding-top: 0.125rem; }

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

.cs-gate__success {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-tile);
  background: var(--atlantic-soft);
  color: var(--atlantic-ink);
  font-size: var(--step-1);
  font-weight: var(--weight-bold);
}

/* ---- Province complete ---- */
.cs-province {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}

.cs-province__text { display: grid; gap: var(--space-2); justify-items: center; padding-top: var(--space-4); }

.cs-province__heading {
  font-size: var(--step-4);
  font-weight: var(--weight-heavy);
}

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

.cs-province__map { width: min(100%, 20rem, calc((100dvh - 20rem) * 0.771)); }

.cs-province__actions { width: 100%; }

/* ---- Final ---- */
.cs-final {
  display: grid;
  gap: var(--space-5);
}

.cs-final__hero { display: grid; gap: var(--space-3); padding-top: var(--space-5); }

.cs-final__heading { font-size: var(--step-4); font-weight: var(--weight-heavy); }

.cs-final__score { padding-top: var(--space-5); }
.cs-final__score .cs-fada--above { font-size: 3.25rem; left: 8%; bottom: 88%; }

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

.cs-final__cardwrap {
  margin: 0;
  justify-self: center;
  width: min(100%, 22rem);
}

.cs-final__card {
  width: 100%;
  aspect-ratio: 1080 / 1350;
  border-radius: var(--radius-sheet);
  background: var(--surface);
  box-shadow: 0 var(--edge) 0 var(--tile-edge);
}

.cs-final__actions { display: grid; gap: var(--space-3); }

.cs-share { display: grid; gap: var(--space-3); padding: var(--space-3) 0; }

.cs-share__buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.cs-share__native { grid-column: 1 / -1; }

.cs-share__btn { padding-inline: var(--space-3); }

.cs-share__icon {
  flex: none;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.cs-share__icon--whatsapp { --icon: url(../img/icon-whatsapp.svg); }
.cs-share__icon--x { --icon: url(../img/icon-x.svg); }
.cs-share__icon--facebook { --icon: url(../img/icon-facebook.svg); }
.cs-share__icon--copy { --icon: url(../img/icon-copy.svg); }

.cs-share__status { color: var(--atlantic-ink); font-weight: var(--weight-bold); min-height: 1.5em; }

.cs-share__manual { display: grid; gap: var(--space-2); }
.cs-share__text { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.4; resize: vertical; }

/* ---- Settings ---- */
.cs-settings {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.cs-settings__top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: calc(-1 * var(--space-3));
}

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

.cs-settings__h2 { font-size: var(--step-1); margin-bottom: var(--space-3); }

.cs-seg {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.cs-seg__legend {
  padding: 0;
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--step-1);
}

.cs-seg__row {
  display: flex;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--line);
}

.cs-seg__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.cs-seg__label {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: calc(var(--tap) - 8px);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-bold);
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.cs-seg__input:checked + .cs-seg__label {
  background: var(--atlantic);
  color: var(--on-atlantic);
}

.cs-seg__input:focus-visible + .cs-seg__label {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.cs-settings__danger {
  padding-top: var(--space-5);
  border-top: 2px solid var(--line);
}

.cs-settings__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-4);
}

.cs-settings__links a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---- Small screens (320 px) ---- */
@media (max-width: 22rem) {
  .cs-landing__headline { font-size: var(--step-4); }
  .cs-topbar { gap: var(--space-2); }
  .cs-topbar__score-num { font-size: var(--step-2); }
  .cs-map__next .cs-btn { padding-inline: 1.25rem; }
}