/* ============================================================
   FIGUS 2026 — COMPONENTES (v2)
   Mobile-first · sticker pack energy · stamp animations
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-optical-sizing: auto;
  overscroll-behavior-y: none;
}

/* Sutil veta de papel verdoso */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(60, 194, 91, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(244, 179, 36, 0.04) 0%, transparent 50%);
}

body > * { position: relative; z-index: 1; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; touch-action: manipulation; }
input, select, textarea { touch-action: manipulation; }
input, select, textarea { font: inherit; color: inherit; }
/* iOS zoom prevention: never let input font-size fall below 16px */
input, select, textarea { font-size: max(16px, 1em); }
a { color: inherit; text-decoration: none; }

/* ── Typography rendering polish ─────────────────────────────── */
.modal__title,
.empty__title,
.section-head__title,
.login-brand__headline,
.lrg-title__heading,
.card-header__name,
.group-head__title,
.matches-group-head__title {
  text-wrap: balance;
}

/* ============================================================
   DEMO BANNER
   ============================================================ */

.demo-banner {
  position: relative;
  background: linear-gradient(90deg, var(--gold-1) 0%, var(--gold-2) 100%);
  color: var(--ink-on-gold);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 8px var(--s-4);
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  padding-left:  calc(var(--s-4) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--s-4) + env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.demo-banner__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-on-gold);
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ============================================================
   HEADER (sticky)
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(135deg, var(--field-1) 0%, var(--field-2) 100%);
  color: var(--ink-on-color);
  box-shadow: 0 4px 14px -4px rgba(11, 69, 32, 0.40);
  overflow: hidden;
  padding-top: env(safe-area-inset-top, 0px);
}

/* When demo banner is showing it absorbs the top safe area */
body.has-demo-banner .header {
  padding-top: 0;
}

/* Patrón de líneas de campo de fútbol (vista aérea) */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    /* línea central vertical */
    linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,0.06) 49.7%, rgba(255,255,255,0.06) 50.3%, transparent 50.3%),
    /* franjas diagonales sutiles */
    repeating-linear-gradient(110deg, transparent 0px, transparent 36px, rgba(255,255,255,0.03) 36px, rgba(255,255,255,0.03) 72px);
  pointer-events: none;
}

/* Glow inferior */
.header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-1) 50%, transparent);
  box-shadow: 0 0 8px var(--gold-glow);
  pointer-events: none;
}

.header__row {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 10px var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
}

.brand__logo {
  height: 40px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* --- progress cluster (right side) --- */
.header__progress {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-shrink: 0;
}

/* Anillo (mobile: 48px, desktop: 80px) */
.ring {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 14px rgba(244, 179, 36, 0.35));
}

@media (min-width: 720px) {
  .ring { width: 80px; height: 80px; }
}

.ring__svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}

.ring__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 8;
}

.ring__fill {
  fill: none;
  stroke: url(#ringGrad);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--t-slow);
}

.ring__center {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}

.ring__pct {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: -0.02em;
  color: var(--ink-on-color);
}

@media (min-width: 720px) {
  .ring__pct { font-size: var(--fs-lg); }
}

/* KPI mini */
.header__kpis {
  display: none;
  align-items: stretch;
  gap: var(--s-3);
  padding-left: var(--s-4);
  border-left: 1px solid rgba(255,255,255,0.18);
}

@media (min-width: 720px) {
  .header__kpis { display: flex; }
}

.header__kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 56px;
  line-height: 1;
}

.header__kpi__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
  color: var(--ink-on-color);
  transition: color var(--t-fast);
}

.header__kpi__num.is-bump {
  animation: numberBump var(--t-spring);
}

.header__kpi__num--gold { color: var(--gold-1); }

.header__kpi__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-top: 4px;
}

@keyframes numberBump {
  0%   { transform: translateY(0)   scale(1); }
  40%  { transform: translateY(-3px) scale(1.18); }
  100% { transform: translateY(0)   scale(1); }
}

/* Avatar */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-1), var(--gold-3));
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  color: var(--ink-on-gold);
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 0 0 2px rgba(255,255,255,0.2),
    0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
}

/* ============================================================
   CONTAINER
   ============================================================ */

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--s-4);
  padding-left:  max(var(--s-4), calc(var(--s-4) + env(safe-area-inset-left, 0px)));
  padding-right: max(var(--s-4), calc(var(--s-4) + env(safe-area-inset-right, 0px)));
}

@media (min-width: 720px) {
  .container {
    padding-left:  max(var(--s-6), calc(var(--s-6) + env(safe-area-inset-left, 0px)));
    padding-right: max(var(--s-6), calc(var(--s-6) + env(safe-area-inset-right, 0px)));
  }
}

/* ============================================================
   CONTROLS (búsqueda + tabs + acciones)
   ============================================================ */

.controls {
  margin-top: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

@media (min-width: 1100px) {
  .controls {
    flex-direction: row;
    align-items: center;
  }
}

/* Action buttons */
.btn {
  height: 48px;
  padding: 0 var(--s-5);
  border-radius: var(--r-control);
  font-size: var(--fs-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  transition: all var(--t-fast);
  white-space: nowrap;
  min-height: 48px;  /* hit target */
}

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.btn--ghost {
  background: var(--card);
  border: 1.5px solid var(--ink-line);
  color: var(--ink-2);
}

.btn--ghost:hover {
  background: var(--paper-2);
  border-color: var(--field-3);
  color: var(--ink);
}

.btn--primary {
  background: var(--figus-green-800);
  color: var(--ink-on-color);
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 4px 12px -2px rgba(11, 69, 32, 0.35);
}

.btn--primary:hover {
  background: var(--figus-green-700);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 6px 18px -2px rgba(11, 69, 32, 0.45);
}

.btn--primary:active { transform: translateY(0); }

.btn--share {
  background: var(--figus-green-800);
  color: var(--ink-on-color);
  font-weight: 700;
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 16px -3px rgba(11, 69, 32, 0.55),
    0 1px 4px rgba(11, 69, 32, 0.30);
  transition:
    background var(--t-fast),
    box-shadow var(--t-fast),
    transform var(--t-fast);
}

.btn--share:hover {
  background: var(--figus-green-700);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 8px 24px -4px rgba(11, 69, 32, 0.60),
    0 2px 8px rgba(11, 69, 32, 0.30);
}

.btn--share:active {
  transform: scale(0.97) translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 8px -2px rgba(11, 69, 32, 0.40);
}

.btn--gold {
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 100%);
  color: var(--ink-on-gold);
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 4px 12px -2px var(--gold-glow);
}

.btn--gold:hover { transform: translateY(-1px); }

/* ============================================================
   STATS BAR (5 métricas)
   ============================================================ */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
}

@media (min-width: 560px) { .stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }

.stat {
  position: relative;
  padding: var(--s-4);
  background: var(--card);
  border: 1.5px solid var(--ink-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}

.stat__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  line-height: 1;
  background: var(--stat-bg, var(--paper-2));
  color: var(--stat-color, var(--ink-2));
  flex-shrink: 0;
}

.stat--have   { --stat-bg: rgba(60, 194, 91, 0.10);  --stat-color: var(--field-3); }
.stat--double { --stat-bg: rgba(244, 179, 36, 0.10); --stat-color: var(--gold-2);  }
.stat--miss   { --stat-bg: rgba(200, 51, 30, 0.08);  --stat-color: var(--red);     }
.stat--teams  { --stat-bg: rgba(37, 99, 235, 0.08);  --stat-color: var(--blue);    }

.stat__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}

.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-2xl);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
}

.stat__num.is-bump { animation: numberBump var(--t-spring); }

.stat__sub {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  font-weight: 500;
}

.stat__sub strong { color: var(--ink-2); font-weight: 700; }

/* ============================================================
   SECTION HEAD
   ============================================================ */

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin: var(--s-7) 0 var(--s-4);
}

.section-head__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.section-head__title em {
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0;
}

.section-head__divider {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ink-line), transparent);
}

.section-head__pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
  color: var(--ink-on-gold);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 2px 6px -1px var(--gold-glow);
}

/* ============================================================
   TEAM GRID
   ============================================================ */

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

@media (min-width: 560px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   TEAM CARD
   ============================================================ */

.team-card {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--ink-line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  animation: cardEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.team-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-4);
}

@keyframes cardEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Header colored band */
.card-header {
  position: relative;
  padding: var(--s-4);
  background: var(--tc, var(--tc-default));
  color: var(--ink-on-color);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  overflow: hidden;
  isolation: isolate;
}

/* Geometric pattern overlay — hexágonos diagonales en CSS puro */
.card-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    /* hex grid via dots — sutil */
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.14) 1.5px, transparent 2px),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,0.10) 1.5px, transparent 2px),
    /* diagonal stripes */
    repeating-linear-gradient(135deg, transparent 0px, transparent 18px, rgba(255,255,255,0.06) 18px, rgba(255,255,255,0.06) 19px);
  background-size: 28px 28px, 28px 28px, auto;
  pointer-events: none;
}

/* Highlight inferior */
.card-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.18));
  pointer-events: none;
  z-index: 0;
}

.card-header > * { position: relative; z-index: 1; }

/* Flag */
.card-header__flag {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 1.875rem;
  line-height: 1;
  border-radius: 12px;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.35);
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    0 4px 10px rgba(0,0,0,0.18);
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Name + group */
.card-header__name {
  flex: 1;
  min-width: 0;
}

.card-header__country {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.8vw, var(--fs-md));
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  color: var(--ink-on-color);
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-header__meta {
  margin-top: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-header__meta__code {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

/* Right slot in header: % */
.card-header__pct {
  text-align: right;
  flex-shrink: 0;
  line-height: 1;
}

.card-header__pct__val {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking-display);
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

/* Trophy replaces percent when team is complete — circular gold badge */
.card-header__pct__trophy {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--gold-1) 0%, var(--gold-3) 100%);
  border: 1.5px solid rgba(255,255,255,0.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.50),
    0 2px 8px -1px var(--gold-glow);
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  line-height: 1;
  color: var(--ink-on-gold);
  /* Inline-flex respects parent text-align: right */
}

.team-card[data-complete="true"] .card-header__pct__val   { display: none; }
.team-card[data-complete="true"] .card-header__pct__trophy {
  display: inline-flex;
  animation: trophyPop var(--t-bounce);
}

@keyframes trophyPop {
  0%   { transform: scale(0)   rotate(-25deg); }
  60%  { transform: scale(1.2) rotate(6deg); }
  100% { transform: scale(1)   rotate(0deg); }
}


/* "SEDE" badge */
.host-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
  color: var(--ink-on-gold);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 2px 6px rgba(0,0,0,0.20);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* progress bar in card body */
.card-progress {
  position: relative;
  padding: var(--s-3) var(--s-4) 0;
}

.card-progress__bar {
  position: relative;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

.card-progress__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--field-2) 0%, var(--field-3) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--t-slow);
}

.team-card[data-complete="true"] .card-progress__fill {
  background: linear-gradient(90deg, var(--field-3) 0%, var(--gold-1) 100%);
  box-shadow: 0 0 10px var(--gold-glow);
}

/* Stickers grid */
.stickers {
  padding: var(--s-3) var(--s-4) var(--s-4);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

/* ============================================================
   STICKER (sobre cerrado → pegada → doble)
   ============================================================ */

.sticker {
  position: relative;
  min-height: 44px;          /* tap target */
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-sm);
  letter-spacing: -0.01em;
  transition:
    transform var(--t-fast),
    background var(--t-fast),
    color var(--t-fast),
    box-shadow var(--t-fast),
    border-color var(--t-fast);
  user-select: none;
  touch-action: manipulation;
  border: 1.5px solid transparent;
  overflow: visible;            /* badge sits outside top-right corner */
  -webkit-tap-highlight-color: transparent;
}

.sticker:focus-visible {
  outline: 2px solid var(--field-3);
  outline-offset: 2px;
}

/* ---- ESTADO 0: VACÍA — "sobre cerrado" ---- */
.sticker[data-state="0"] {
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      transparent 5px,
      rgba(58, 36, 2, 0.06) 5px,
      rgba(58, 36, 2, 0.06) 6px
    );
  border: 1.5px dashed var(--ink-line);
  color: var(--ink-4);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}

.sticker[data-state="0"]:hover {
  background-color: #FFFFFF;
  border-color: var(--field-3);
  color: var(--field-1);
  transform: translateY(-1px);
}

/* ---- ESTADO 1: TENGO ---- */
.sticker[data-state="1"] {
  background: var(--figus-green-800);
  color: var(--ink-on-color);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-have);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}


.sticker[data-state="1"]:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 4px 10px -1px rgba(11, 69, 32, 0.45);
}

/* ---- ESTADOS 2–10: REPETIDAS → visualmente idénticas a TENGO ---- */
/* Internal counts are preserved in data-state and JS state[].         */
/* The album grid shows only two visual states: missing (0) and        */
/* owned (1+). Repeated quantity lives only in the Repetidas tools.    */
.sticker[data-state="2"],
.sticker[data-state="3"],
.sticker[data-state="4"],
.sticker[data-state="5"],
.sticker[data-state="6"],
.sticker[data-state="7"],
.sticker[data-state="8"],
.sticker[data-state="9"],
.sticker[data-state="10"] {
  background: var(--figus-green-800);
  color: var(--ink-on-color);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-have);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.sticker[data-state="2"]:hover,
.sticker[data-state="3"]:hover,
.sticker[data-state="4"]:hover,
.sticker[data-state="5"]:hover,
.sticker[data-state="6"]:hover,
.sticker[data-state="7"]:hover,
.sticker[data-state="8"]:hover,
.sticker[data-state="9"]:hover,
.sticker[data-state="10"]:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 4px 10px -1px rgba(11, 69, 32, 0.45);
}

/* Safety net: collapse any ::before overlay on repeated states.       */
.sticker[data-state="2"]::before,
.sticker[data-state="3"]::before,
.sticker[data-state="4"]::before,
.sticker[data-state="5"]::before,
.sticker[data-state="6"]::before,
.sticker[data-state="7"]::before,
.sticker[data-state="8"]::before,
.sticker[data-state="9"]::before,
.sticker[data-state="10"]::before {
  display: none;
  content: none;
}

/* ---- STAMP ANIMATION (cuando cambias a "tengo") ---- */
.sticker.is-stamping {
  animation: stamp var(--t-bounce);
}

@keyframes stamp {
  0%   { transform: scale(1)    rotate(0deg); }
  20%  { transform: scale(1.25) rotate(-6deg); }
  45%  { transform: scale(0.92) rotate(3deg); }
  70%  { transform: scale(1.08) rotate(-1deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

/* Stamp ripple — pseudo radial burst */
.sticker.is-stamping::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(60, 194, 91, 0.40) 0%, transparent 60%);
  pointer-events: none;
  animation: stampRipple 600ms ease-out;
}

@keyframes stampRipple {
  0%   { opacity: 1; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* ============================================================
   CARD FOOTER (Marcar todos / mini stats)
   ============================================================ */

.card-foot {
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-top: 1px solid var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-3);
}

.card-foot__stats {
  display: flex;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.card-foot__stat { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); }

.card-foot__stat__label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  opacity: 0.55;
}

.card-foot__stat__dot {
  width: 7px; height: 7px;
  border-radius: 2px;
}

.card-foot__stat__dot--have   { background: var(--field-3); }
.card-foot__stat__dot--double { background: var(--gold-2); }
.card-foot__stat__dot--miss   { background: var(--ink-line); }


/* ============================================================
   COMPLETE STATE — Trophy + Confetti
   ============================================================ */

.team-card[data-complete="true"] {
  border-color: var(--gold-2);
  box-shadow:
    inset 0 0 0 1px var(--gold-1),
    var(--shadow-trophy);
}

.team-card[data-complete="true"] .card-header::before {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.18) 1.5px, transparent 2px),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,0.12) 1.5px, transparent 2px),
    repeating-linear-gradient(135deg, transparent 0px, transparent 18px, rgba(255, 215, 100, 0.10) 18px, rgba(255, 215, 100, 0.10) 19px);
}


/* Confetti: dots distribuidos */
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 2;
}

.team-card[data-complete="true"] .confetti { opacity: 1; }

.confetti span {
  position: absolute;
  width: 8px; height: 12px;
  border-radius: 1px;
  opacity: 0;
}

.team-card[data-complete="true"] .confetti span {
  animation: confettiFall 1.4s ease-out forwards;
}

@keyframes confettiFall {
  0%   { opacity: 0; transform: translate(0, -20px) rotate(0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--cx, 0), 120px) rotate(720deg); }
}

/* ============================================================
   EMPTY / FILTER STATE
   ============================================================ */

.empty {
  text-align: center;
  padding: var(--s-9) var(--s-4);
  background: var(--card);
  border: 1.5px dashed var(--ink-line);
  border-radius: var(--r-card);
  margin-top: var(--s-5);
}

.empty__emoji {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: var(--s-4);
}

.empty__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  margin-bottom: var(--s-2);
  letter-spacing: var(--tracking-display);
}

.empty__sub {
  color: var(--ink-3);
  max-width: 420px;
  margin: 0 auto var(--s-5);
}

/* ============================================================
   TOAST
   ============================================================ */

.toast-wrap {
  position: fixed;
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: center;
  pointer-events: none;
  width: calc(100% - var(--s-8));
  max-width: 420px;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 12px 16px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--ink-on-color);
  box-shadow: var(--shadow-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  min-width: 200px;
  animation: toastIn var(--t-spring), toastOut 320ms ease-in 2.4s forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes toastOut {
  to { opacity: 0; transform: translateY(10px); }
}

.toast__icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: 800;
}

.toast--have    { background: var(--field-3); }
.toast--have    .toast__icon { background: rgba(255,255,255,0.20); }
.toast--double  { background: var(--gold-2); color: var(--ink-on-gold); }
.toast--double  .toast__icon { background: rgba(58, 36, 2, 0.18); }
.toast--info    { background: var(--ink); }
.toast--info    .toast__icon { background: rgba(255,255,255,0.18); }
.toast--success { background: var(--field-2); }
.toast--success .toast__icon { background: rgba(255,255,255,0.20); }

/* ============================================================
   MODAL
   ============================================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 20, 16, 0.50);
  display: grid;
  place-items: center;
  z-index: 150;
  padding: var(--s-4);
  padding-top:    max(var(--s-4), calc(var(--s-4) + env(safe-area-inset-top, 0px)));
  padding-bottom: max(var(--s-4), calc(var(--s-4) + env(safe-area-inset-bottom, 0px)));
  padding-left:   max(var(--s-4), calc(var(--s-4) + env(safe-area-inset-left, 0px)));
  padding-right:  max(var(--s-4), calc(var(--s-4) + env(safe-area-inset-right, 0px)));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base);
}

.modal-backdrop[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - var(--s-8));
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-5);
  transform: translateY(20px) scale(0.96);
  transition: transform var(--t-spring);
  overflow: hidden;
  border: 1.5px solid var(--ink-line);
}

.modal-backdrop[data-open="true"] .modal {
  transform: translateY(0) scale(1);
}

.modal__head {
  padding: var(--s-5);
  border-bottom: 1px solid var(--paper-2);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}

.modal__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  margin-bottom: 4px;
}

.modal__sub { font-size: var(--fs-sm); color: var(--ink-3); }

.modal__close {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  transition: all var(--t-fast);
  flex-shrink: 0;
}

.modal__close:hover { background: var(--red-soft); color: var(--red); }

.modal__close:focus-visible {
  outline: 2px solid var(--figus-green-800);
  outline-offset: 2px;
}
.modal__close svg { width: 16px; height: 16px; }

.modal__body {
  padding: var(--s-4) var(--s-5);
  overflow-y: auto;
  flex: 1;
}

.modal__copyarea {
  width: 100%;
  min-height: 200px;
  padding: var(--s-3);
  background: var(--paper);
  border: 1.5px solid var(--ink-line);
  border-radius: var(--r-control);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  resize: vertical;
  line-height: 1.6;
}

.modal__copyarea:focus {
  outline: none;
  border-color: var(--field-3);
  box-shadow: 0 0 0 4px rgba(60, 194, 91, 0.12);
}

.modal__foot {
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--paper-2);
  display: flex;
  gap: var(--s-3);
  justify-content: flex-end;
}

/* ============================================================
   QR SHARE MODAL
   Phase 1: app URL · Phase 2: profile · Phase 3: trade
   ============================================================ */

/* Override base .modal sizing/structure for QR variant */
.modal--qr {
  max-width: 340px;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
  transform: translateY(24px) scale(0.93);
  transition: transform var(--t-spring);
}

.modal-backdrop[data-open="true"] .modal--qr {
  transform: translateY(0) scale(1);
}

/* Green header band — mirrors the app header */
.qr-modal__band {
  position: relative;
  background: linear-gradient(145deg, var(--field-1) 0%, var(--field-2) 100%);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  padding: var(--s-5) var(--s-6) var(--s-6);
  overflow: hidden;
  text-align: center;
}

/* Diagonal field-line texture */
.qr-modal__band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    110deg,
    transparent 0,
    transparent 24px,
    rgba(255, 255, 255, 0.04) 24px,
    rgba(255, 255, 255, 0.04) 48px
  );
  pointer-events: none;
}

/* Gold accent line at bottom of band */
.qr-modal__band::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold-1) 50%, transparent);
  box-shadow: 0 0 8px var(--gold-glow);
}

/* Close button — top-right of green band */
.qr-modal__close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 2;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  width: 36px;
  height: 36px;
}

.qr-modal__close:hover {
  background: rgba(255, 255, 255, 0.26);
  color: #fff;
}

.qr-modal__close:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: 2px;
}

.qr-modal__close svg {
  width: 14px;
  height: 14px;
  display: block;
}

.qr-modal__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--s-1);
}

.qr-modal__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  color: #fff;
  line-height: 1.1;
  margin-bottom: var(--s-1);
}

.qr-modal__sub {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.72);
}

/* White body card beneath the band */
.qr-modal__body {
  background: var(--card);
  border-radius: 0 0 var(--r-panel) var(--r-panel);
  box-shadow: var(--shadow-5);
  border: 1.5px solid var(--ink-line);
  border-top: none;
  padding-bottom: var(--s-5);
}

/* QR code frame — white surface, generous padding, soft shadow */
.qr-modal__code-wrap {
  padding: var(--s-5) var(--s-5) var(--s-3);
  display: flex;
  justify-content: center;
}

.qr-modal__code {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.07),
    0 4px 16px -4px rgba(11, 69, 32, 0.20),
    0 12px 36px -8px rgba(11, 69, 32, 0.14);
  line-height: 0; /* collapse inline-block gap */
  display: inline-block;
}

/* SVG fills its container and scales cleanly on all densities */
.qr-modal__code svg {
  display: block;
  width: 196px;
  height: 196px;
}

.qr-modal__domain {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  text-transform: lowercase;
  margin-bottom: var(--s-4);
}

/* Action buttons — stacked, full-width */
.qr-modal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: 0 var(--s-5);
}

.qr-modal__btn {
  width: 100%;
  justify-content: center;
}

/* ============================================================
   FOOTER
   ============================================================ */

.app-foot {
  margin-top: var(--s-9);
  padding: var(--s-6) 0 var(--s-7);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  border-top: 1px solid var(--paper-3);
}

.app-foot strong { color: var(--ink-2); font-weight: 700; }

/* ============================================================
   LOGIN
   ============================================================ */

/* ── Login: Split-screen layout ─────────────────────────── */
.login-stage {
  display: grid;
  grid-template-columns: 55fr 45fr;
  min-height: 100dvh;
  min-height: 100vh;
}

/* ── Brand panel (left) ──────────────────────────────────── */
.login-brand {
  background: var(--figus-green-900);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s-8) var(--s-8) var(--s-8);
  min-height: 100dvh;
  min-height: 100vh;
}

/* Subtle pitch lines overlay */
.login-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle 160px at 50% 48%,
      transparent 158px,
      rgba(255,255,255,0.07) 159px,
      rgba(255,255,255,0.07) 162px,
      transparent 163px),
    linear-gradient(to bottom,
      transparent calc(48% - 1px),
      rgba(255,255,255,0.07) calc(48% - 1px),
      rgba(255,255,255,0.07) calc(48% + 1px),
      transparent calc(48% + 1px));
  pointer-events: none;
}

/* Dot texture across the whole panel */
.login-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.login-brand__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
  flex: 1;
  justify-content: center;
}

.login-brand__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--figus-yellow-400);
  color: var(--ink-on-gold);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  box-shadow: 0 4px 12px -2px rgba(244, 179, 36, 0.40);
}

.login-brand__logo img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.35));
}

.login-brand__app-name {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-top: calc(-1 * var(--s-3));
}

.login-brand__headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}

.login-brand__headline em {
  font-style: normal;
  color: var(--figus-yellow-400);
}

/* Sticker cards cluster */
.login-brand__stickers {
  display: flex;
  gap: var(--s-3);
  align-items: flex-end;
  margin-top: var(--s-2);
}

.login-stickercard {
  width: 62px;
  height: 86px;
  border-radius: 9px;
  background: #fff;
  box-shadow:
    0 12px 28px -6px rgba(0,0,0,0.5),
    0 2px 6px rgba(0,0,0,0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.login-stickercard--1 { transform: rotate(-7deg) translateY(6px); }
.login-stickercard--2 { transform: rotate(1deg) translateY(-4px); }
.login-stickercard--3 { transform: rotate(9deg) translateY(8px); }

.login-stickercard__stripe {
  display: block;
  height: 26px;
  flex-shrink: 0;
}

.login-stickercard__stripe--sm {
  height: 12px;
}

.login-stickercard__body {
  flex: 1;
  background: var(--figus-green-50);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Silhouette fill shape */
.login-stickercard__body::before {
  content: "";
  position: absolute;
  bottom: 14px; /* clear the FIGUS label strip */
  width: 30px;
  height: 38px;
  background: var(--figus-green-200);
  border-radius: 14px 14px 0 0;
  opacity: 0.7;
}

/* Bottom "FIGUS" label strip */
.login-stickercard__body::after {
  content: "FIGUS";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: var(--figus-green-800);
  color: #fff;
  font-family: var(--font-display);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.login-brand__tagline {
  position: relative;
  z-index: 1;
  font-size: var(--fs-sm);
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
  margin: 0;
}

/* ── Form panel (right) ──────────────────────────────────── */
.login-form-panel {
  display: grid;
  place-items: center;
  padding: var(--s-9) var(--s-7);
  background: var(--figus-paper);
  overflow-y: auto;
}

.login-card {
  position: relative;
  width: min(400px, 100%);
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  text-align: center;
}

/* No card-level badge — brand panel handles the MUNDIAL badge */
.login-card::before { display: none; }

/* Inputs sit on paper background — need white surface to stand out */
.login-form-panel .field__input {
  background: var(--color-surface);
}

/* Tabs sit on paper — slightly elevated surface */
.login-form-panel .login-tabs {
  background: var(--figus-stone-100);
}

/* Logo inside form card — visible on mobile only */
.login-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--s-3);
  display: block;
}

.login-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.18));
}

/* Desktop: logo lives in brand panel, hide the in-card logo */
@media (min-width: 768px) {
  .login-logo { display: none; }
  .login-sub { display: none; } /* tagline is in brand panel */
  .login-title { margin-top: 0; }
}

.login-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
  margin-bottom: var(--s-2);
}

.login-title em {
  font-style: normal;
  color: var(--field-2);
}

.login-sub {
  color: var(--ink-3);
  font-size: var(--fs-base);
  margin-bottom: var(--s-6);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-align: left;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}

.field__input {
  width: 100%;
  height: 48px;
  padding: 0 var(--s-4);
  background: var(--paper);
  border: 1.5px solid var(--ink-line);
  border-radius: var(--r-control);
  font-size: var(--fs-base);
  color: var(--ink);
  transition: all var(--t-fast);
}

.field__input:focus {
  outline: 2px solid var(--field-3);
  outline-offset: 2px;
  border-color: var(--field-3);
  background: var(--card);
  box-shadow: 0 0 0 4px rgba(60, 194, 91, 0.14);
}

.field__forgot {
  font-size: var(--fs-xs);
  color: var(--field-2);
  font-weight: 600;
  text-align: right;
  margin-top: 4px;
}

.btn-login {
  width: 100%;
  height: 52px;
  border-radius: var(--r-control);
  background: var(--figus-green-800);
  color: var(--ink-on-color);
  font-weight: 700;
  font-size: var(--fs-base);
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  transition: all var(--t-fast);
  margin-top: var(--s-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 8px 20px -4px rgba(11, 69, 32, 0.35);
}

.btn-login:hover {
  background: var(--figus-green-700);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 12px 28px -4px rgba(11, 69, 32, 0.45);
}

.divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-4) 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-4);
}

.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--paper-3);
}

.btn-google {
  width: 100%;
  height: 52px;
  border-radius: var(--r-control);
  background: var(--card);
  border: 1.5px solid var(--ink-line);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  transition: all var(--t-fast);
}

.btn-google:hover {
  background: var(--paper-2);
  border-color: var(--ink-3);
}

.btn-google svg { width: 20px; height: 20px; }

.login-signup {
  margin-top: var(--s-6);
  font-size: var(--fs-sm);
  color: var(--ink-3);
}

.login-signup a {
  font-weight: 700;
  color: var(--field-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-foot {
  margin-top: var(--s-5);
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.login-foot__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-5); align-self: center; }

/* Tab bar */
.login-tabs {
  display: flex;
  background: var(--paper-2);
  border: 1.5px solid var(--ink-line);
  border-radius: var(--r-pill);
  padding: 3px;
  margin-bottom: var(--s-5);
}

.login-tab {
  flex: 1;
  height: 36px;
  border-radius: calc(var(--r-pill) - 3px);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  transition: all var(--t-fast);
}

.login-tab[data-active="true"] {
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 6px rgba(0,0,0,0.10);
}

/* Forgot password link */
.forgot-link {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--field-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0;
}

/* Back-arrow button (appears in forgot / other sub-panels) */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: var(--s-4);
  padding: 4px 0;
  transition: color var(--t-fast);
}

.btn-back:hover { color: var(--ink); }

/* Legal / ToS line */
.login-legal {
  margin-top: var(--s-4);
  font-size: var(--fs-xs);
  color: var(--ink-4);
  line-height: var(--lh-base);
}

.login-legal a {
  color: var(--field-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Signup-success: big emoji */
.confirm-icon {
  font-size: 3.25rem;
  line-height: 1;
  margin-bottom: var(--s-3);
}

/* Smaller subtitle below the main copy in success panel */
.login-sub-note {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  margin-top: var(--s-2);
  margin-bottom: var(--s-6);
}

/* Outline variant for secondary CTAs (e.g. back-to-login) */
.btn-login--outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink-line);
  box-shadow: none;
}

.btn-login--outline:hover {
  background: var(--paper-2);
  border-color: var(--ink-3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(0,0,0,0.08);
}

/* Feedback message (success / error) */
.auth-feedback {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-control);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}

.auth-feedback--error {
  background: rgba(200, 51, 30, 0.08);
  color: var(--color-danger);
  border: 1px solid rgba(200, 51, 30, 0.20);
}

.auth-feedback--success {
  background: rgba(60, 194, 91, 0.08);
  color: var(--field-1);
  border: 1px solid rgba(60, 194, 91, 0.20);
}

/* ── Login: Mobile (stacked layout) ─────────────────────── */
@media (max-width: 767px) {
  .login-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .login-brand {
    min-height: unset;
    padding: var(--s-7) var(--s-5) var(--s-8);
  }

  .login-brand__content {
    gap: var(--s-4);
  }

  .login-brand__headline {
    font-size: clamp(1.75rem, 6vw, 2.2rem);
  }

  .login-brand__stickers { display: none; }
  .login-brand__tagline  { display: none; }

  /* Form panel slides over the brand panel with rounded top corners */
  .login-form-panel {
    border-radius: 22px 22px 0 0;
    margin-top: -22px;
    padding: var(--s-7) var(--s-5) var(--s-9);
    place-items: start;
    background: var(--figus-paper);
    min-height: unset;
  }

  .login-card {
    width: 100%;
  }

  /* Show logo + sub in card on mobile */
  .login-logo { display: block; }
  .login-sub  { display: block; }
}

/* ── Login: Tablet intermediate (768–900) ──────────────── */
@media (min-width: 768px) and (max-width: 900px) {
  .login-brand {
    padding: var(--s-6) var(--s-6) var(--s-6);
  }

  .login-form-panel {
    padding: var(--s-7) var(--s-5);
  }

  .login-brand__stickers { display: none; }
}

/* ============================================================
   LOGIN: ENTRY ANIMATIONS
   Compositor-only (opacity + transform). Ease-out-expo.
   prefers-reduced-motion collapses all to instant.
   ============================================================ */

@keyframes _lg-panel-left {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes _lg-panel-up {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes _lg-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes _lg-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes _lg-scale-in {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes _lg-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* Sticker cards animate with their final rotation baked in */
@keyframes _lg-sticker-1 {
  from { opacity: 0; transform: rotate(-7deg) translateY(28px); }
  to   { opacity: 1; transform: rotate(-7deg) translateY(6px); }
}
@keyframes _lg-sticker-2 {
  from { opacity: 0; transform: rotate(1deg)  translateY(18px); }
  to   { opacity: 1; transform: rotate(1deg)  translateY(-4px); }
}
@keyframes _lg-sticker-3 {
  from { opacity: 0; transform: rotate(9deg)  translateY(28px); }
  to   { opacity: 1; transform: rotate(9deg)  translateY(8px); }
}

/* ── Panel entries ─────────────────────────────────────────── */
.login-brand {
  animation: _lg-panel-left 700ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.login-form-panel {
  animation: _lg-rise 700ms 100ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* ── Brand panel stagger ───────────────────────────────────── */
.login-brand__badge {
  animation: _lg-fade-up 500ms 180ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.login-brand__logo {
  animation: _lg-scale-in 500ms 260ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.login-brand__app-name {
  animation: _lg-fade-up 400ms 320ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.login-brand__headline {
  animation: _lg-fade-up 550ms 380ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.login-stickercard--1 {
  animation: _lg-sticker-1 700ms 480ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.login-stickercard--2 {
  animation: _lg-sticker-2 700ms 560ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.login-stickercard--3 {
  animation: _lg-sticker-3 700ms 640ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.login-brand__tagline {
  animation: _lg-fade 400ms 700ms linear backwards;
}

/* ── Form content stagger ──────────────────────────────────── */
.login-logo {
  animation: _lg-scale-in 500ms 220ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.login-title {
  animation: _lg-fade-up 500ms 280ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.login-sub {
  animation: _lg-fade-up 400ms 340ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.login-tabs {
  animation: _lg-fade-up 500ms 380ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.login-form {
  animation: _lg-fade-up 500ms 440ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.login-form-panel .divider {
  animation: _lg-fade 350ms 520ms linear backwards;
}
.login-form-panel .btn-google {
  animation: _lg-fade-up 400ms 540ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
.login-legal {
  animation: _lg-fade 300ms 600ms linear backwards;
}
.login-foot {
  animation: _lg-fade 300ms 640ms linear backwards;
}

/* ── Mobile override: brand panel drops from above ─────────── */
@media (max-width: 767px) {
  .login-brand {
    animation-name: _lg-panel-up;
  }
  /* Form panel rises from below — _lg-rise already correct */
}

/* ── Reduced motion: collapse all to instant ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .login-brand,
  .login-form-panel,
  .login-brand__badge,
  .login-brand__logo,
  .login-brand__app-name,
  .login-brand__headline,
  .login-brand__tagline,
  .login-logo,
  .login-title,
  .login-sub,
  .login-tabs,
  .login-form,
  .login-form-panel .divider,
  .login-form-panel .btn-google,
  .login-legal,
  .login-foot { animation: none; }

  /* Restore sticker card transforms without animation */
  .login-stickercard--1 { animation: none; transform: rotate(-7deg) translateY(6px); }
  .login-stickercard--2 { animation: none; transform: rotate(1deg)  translateY(-4px); }
  .login-stickercard--3 { animation: none; transform: rotate(9deg)  translateY(8px); }
}

/* ============================================================
   UTILITIES
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   GROUP HEAD
   ============================================================ */

.group-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(135deg, var(--field-1) 0%, var(--field-2) 100%);
  border-radius: var(--r-card);
  color: var(--ink-on-color);
  box-shadow: var(--shadow-3);
  margin-top: var(--s-3);
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.group-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    110deg,
    transparent 0px, transparent 36px,
    rgba(255,255,255,0.04) 36px, rgba(255,255,255,0.04) 72px
  );
  pointer-events: none;
}

/* Gold glow line at bottom */
.group-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-1) 50%, transparent);
  pointer-events: none;
}

.group-head > * { position: relative; z-index: 1; }

.group-head__letter {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 100%);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-display);
  color: var(--ink-on-gold);
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 4px 12px rgba(0,0,0,0.25);
}

.group-head__info {
  flex: 1;
  min-width: 0;
}

.group-head__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-display);
}

.group-head__teams {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.72);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-head__stats {
  text-align: right;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
}

.group-head__have,
.group-head__dbl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-md);
  color: var(--gold-1);
}

/* ── GROUP HEAD ACCORDION ──────────────────────────────────── */
.group-head:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: 2px;
}

/* Mobile: stats text is too long for the flex row at narrow viewports.
   Cap the stats block so the group title always stays visible.
   Remove letter-spacing on teams codes — saves ~10px at 360px, gives 390px+ clear headroom. */
@media (max-width: 479px) {
  .group-head__stats {
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .group-head__teams,
  .matches-group-head__teams {
    letter-spacing: 0;
  }
}

.group-head__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  opacity: 0.75;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.group-head--open .group-head__chevron {
  transform: rotate(180deg);
}

/* ── TEAM CARD HIGHLIGHT ───────────────────────────────────── */
@keyframes cardHighlightPulse {
  0%, 60% { box-shadow: 0 0 0 3px var(--gold-1), var(--shadow-3); }
  100%     { box-shadow: var(--shadow-1); }
}

.team-card--highlight {
  animation: cardHighlightPulse 1.6s ease-out forwards;
}

/* ── TEAM SELECTOR ─────────────────────────────────────────── */
.team-selector-wrap {
  margin-top: var(--s-3);
}

.team-selector {
  width: 100%;
  height: 48px;
  padding: 0 38px 0 var(--s-4);
  border-radius: var(--r-control);
  border: 1.5px solid var(--ink-line);
  background-color: var(--card);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.team-selector:focus {
  outline: 2px solid var(--figus-green-800);
  outline-offset: 2px;
  border-color: var(--figus-green-800);
  box-shadow: 0 0 0 3px rgba(14, 92, 45, 0.12);
}


/* ============================================================
   VIEW NAV  (Álbum / Partidos)
   ============================================================ */

.view-nav {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-3) 0 var(--s-1);
  background: var(--figus-stone-100);
  border-radius: 16px;
  padding: var(--s-1);
}

.view-tab {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: transparent;
  color: var(--ink-3);
  border: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}

.view-tab[data-active="true"] {
  background: #FFFFFF;
  color: var(--figus-green-800);
  box-shadow: var(--shadow-2);
}

.view-tab:focus-visible {
  outline: 2px solid var(--figus-green-800);
  outline-offset: 2px;
}

/* ============================================================
   BTN FIELD  (Abrir sobre)
   ============================================================ */

.btn--field {
  background: linear-gradient(135deg, var(--field-1) 0%, var(--field-2) 100%);
  color: var(--ink-on-color);
  border-color: transparent;
  box-shadow: 0 2px 8px -1px rgba(11, 69, 32, 0.30);
}

.btn--field:hover {
  filter: brightness(1.08);
}

/* ============================================================
   PARTIDOS VIEW
   ============================================================ */

#view-album {
  padding-bottom: calc(var(--s-7) + env(safe-area-inset-bottom, 0px));
}

#view-partidos {
  padding-bottom: calc(var(--s-9) + env(safe-area-inset-bottom, 0px));
}

/* Group head — partidos (re-uses album group-head visual) */
.matches-group-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(135deg, var(--field-1) 0%, var(--field-2) 100%);
  border-radius: var(--r-card);
  color: var(--ink-on-color);
  box-shadow: var(--shadow-3);
  margin-top: var(--s-5);
  margin-bottom: var(--s-3);
  overflow: hidden;
}

.matches-group-head:first-child { margin-top: var(--s-3); }

.matches-group-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    110deg,
    transparent 0px, transparent 36px,
    rgba(255,255,255,0.04) 36px, rgba(255,255,255,0.04) 72px
  );
  pointer-events: none;
}

.matches-group-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-1) 50%, transparent);
  pointer-events: none;
}

.matches-group-head > * { position: relative; z-index: 1; }

.matches-group-head__letter {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 100%);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-display);
  color: var(--ink-on-gold);
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 10px rgba(0,0,0,.22);
}

.matches-group-head__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-base);
  letter-spacing: var(--tracking-display);
}

.matches-group-head__teams {
  font-size: var(--fs-xs);
  color: rgba(255,255,255,0.70);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Matches grid ────────────────────────────── */

.matches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

/* ── Match card ──────────────────────────────── */

.match-card {
  background: var(--card);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-card);
  padding: 10px 12px;
  box-shadow: var(--shadow-2);
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}

.match-card:hover {
  box-shadow: var(--shadow-3);
  transform: translateY(-1px);
}

/* ── Match card meta (date · time) ─────────── */

.match-card__meta {
  display: flex;
  align-items: center;
  gap: 5px;
}

.match-card__date {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  font-weight: 600;
}

.match-card__sep {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  line-height: 1;
}

.match-card__time {
  font-size: var(--fs-xs);
  color: var(--field-2);
  font-weight: 700;
  white-space: nowrap;
}

.match-card__location {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  font-weight: 500;
}

.match-card__jornada {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.match-card__body {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-top: 3px;
}

/* ── Match team display (informational only) ─ */

.match-team {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--paper-2);
  min-width: 0;
  text-align: left;
}

.match-team--away {
  align-items: flex-end;
  text-align: right;
}

.match-team__flag { font-size: var(--fs-xl); line-height: 1; }

.match-team__name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}


.match-vs {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  align-self: center;
  flex-shrink: 0;
  padding: 0 2px;
}

/* ── Knockout placeholder ────────────────────── */

.knockout-section {
  background: var(--card);
  border: 1.5px dashed var(--ink-line);
  border-radius: var(--r-card);
  padding: var(--s-7) var(--s-6);
  text-align: center;
  margin-top: var(--s-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
}

.knockout-section__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
}

.knockout-section__badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
  color: var(--ink-on-gold);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}

.knockout-section__sub {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  max-width: 360px;
}


/* ============================================================
   SOBRE MODAL
   ============================================================ */

.sobre-input {
  width: 100%;
  min-height: 96px;
  padding: var(--s-3) var(--s-4);
  border: 1.5px solid var(--ink-line);
  border-radius: var(--r-control);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  resize: vertical;
  line-height: 1.6;
  transition: border-color var(--t-fast);
  outline: none;
}

.sobre-input:focus { border-color: var(--field-2); outline: 2px solid var(--field-2); outline-offset: 2px; }
.sobre-input::placeholder { color: var(--ink-4); font-family: var(--font-body); }

.sobre-help {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: var(--s-2);
}

.sobre-help code {
  font-family: var(--font-mono);
  background: var(--paper-3);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: var(--fs-xs);
}

.sobre-results {
  display: none;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.sobre-results--visible { display: flex; }

.sobre-chip {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--r-pill);
}

.sobre-chip--ok  { background: rgba(60,194,91,.08);   color: var(--field-2);  border: 1px solid rgba(60,194,91,.22); }
.sobre-chip--dbl { background: rgba(244,179,36,.08);  color: var(--amber-warn);         border: 1px solid rgba(244,179,36,.22); }
.sobre-chip--err { background: var(--red-soft);       color: var(--red);      border: 1px solid rgba(200,51,30,.20); }

/* ── Sobre result detail ─────────────────────────────────── */
.sobre-detail {
  width: 100%;
  margin-top: var(--s-3);
}

.sobre-detail__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--s-2);
}

.sobre-detail__label--new { color: var(--field-2); }
.sobre-detail__label--dbl { color: var(--amber-warn); }

.sobre-detail__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.sobre-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.sobre-pill--new {
  background: rgba(60,194,91,.10);
  border: 1px solid rgba(60,194,91,.30);
  color: var(--field-2);
}

.sobre-pill--dbl {
  background: linear-gradient(135deg, #FFD34E 0%, #F4B324 100%);
  color: var(--ink-on-gold-deep);
}

.sobre-pill__count {
  font-size: 9px;
  background: rgba(0,0,0,0.15);
  border-radius: var(--r-pill);
  padding: 1px 4px;
  line-height: 1.4;
}

/* ============================================================
   STICKER QUICK LOOKUP — section header placeholder (PRO removed v81)
   ============================================================ */

/* ============================================================
   STICKER QUICK LOOKUP
   ============================================================ */

.lookup-wrap {
  padding: var(--s-2) 0 0;
}

.lookup-field {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: var(--card);
  border: 1.5px solid var(--ink-line);
  border-radius: var(--r-pill);
  padding: 0 var(--s-3);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.lookup-field:focus-within {
  border-color: var(--gold-1);
  box-shadow: 0 0 0 3px rgba(244, 179, 36, 0.15);
}

.lookup-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--ink-4);
}

.lookup-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink);
  padding: 11px 0;
}
.lookup-input::placeholder { color: var(--ink-4); }

.lookup-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--ink-4);
  border-radius: 50%;
  flex-shrink: 0;
  transition: color var(--t-fast), background var(--t-fast);
}
.lookup-clear:hover { color: var(--ink); background: var(--paper-2); }
.lookup-clear svg { width: 14px; height: 14px; display: block; }

.lookup-result {
  margin-top: var(--s-2);
}

.lookup-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  background: var(--card);
  border: 1.5px solid var(--ink-line);
  border-radius: var(--r-control);
  padding: 10px var(--s-4);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.lookup-card:hover {
  background: var(--paper-2);
  border-color: var(--gold-1);
  box-shadow: var(--shadow-2);
}
.lookup-card:focus-visible {
  outline: 2px solid var(--gold-1);
  outline-offset: 2px;
}

.lookup-card__info {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.lookup-card__flag { font-size: 1.375rem; flex-shrink: 0; line-height: 1; }
.lookup-card__meta { display: flex; flex-direction: column; min-width: 0; }
.lookup-card__name { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.lookup-card__sub  { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 1px; }

.lookup-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  border-radius: var(--r-pill);
  padding: 4px 10px;
  white-space: nowrap;
}
.lookup-status--miss { background: rgba(200, 51, 30, 0.08); color: var(--red); }
.lookup-status--have { background: rgba(26, 140, 60, 0.10); color: var(--field-2); }
.lookup-status--dbl  { background: rgba(244, 179, 36, 0.12); color: var(--gold-3); }
.lookup-status__text { line-height: 1; }

.lookup-empty {
  font-size: var(--fs-xs);
  color: var(--ink-4);
  text-align: center;
  padding: var(--s-2) var(--s-3);
  margin: 0;
}

/* Sticker highlight pulse when navigated from lookup */
@keyframes sticker-found-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(244, 179, 36, 0.9); transform: scale(1.14); z-index: 10; }
  50%  { box-shadow: 0 0 0 10px rgba(244, 179, 36, 0); transform: scale(1.08); }
  100% { box-shadow: 0 0 0 0  rgba(244, 179, 36, 0); transform: scale(1); }
}
.sticker.is-found {
  position: relative;
  z-index: 10;
  animation: sticker-found-pulse 1.8s ease-out forwards;
}

/* ============================================================
   MOBILE BOTTOM TABBAR — v1A (iPhone native feel)
   Visible only at ≤767 px; hidden on tablet/desktop.
   ============================================================ */

.mobile-tabbar { display: none; }

@media (max-width: 767px) {

  /* Fixed frosted-glass bar at bottom */
  .mobile-tabbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    /* Frosted glass: semi-transparent paper tint + blur */
    background: rgba(244, 246, 242, 0.88);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(0, 0, 0, 0.09);
    box-shadow: 0 -1px 0 rgba(0,0,0,0.05), 0 -4px 20px rgba(0,0,0,0.07);
    /* Respect iPhone home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-tabbar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 4px 8px;
    background: none;
    border: none;
    color: var(--ink-3);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
    min-width: 0;
    position: relative;
  }

  /* Soft pill background — persistent for active tab, flash on press */
  .mobile-tabbar__item::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%) scale(0.5);
    width: 52px;
    height: 32px;
    border-radius: 999px;
    background: rgba(26, 138, 54, 0.10);
    opacity: 0;
    transition: opacity 200ms ease, transform 220ms cubic-bezier(0.34, 1.2, 0.64, 1);
    pointer-events: none;
  }

  .mobile-tabbar__item:active::before,
  .mobile-tabbar__item[data-active="true"]::before {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }

  .mobile-tabbar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    /* Spring snap-back after release */
    transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
  }

  /* Quick compress on press */
  .mobile-tabbar__item:active .mobile-tabbar__icon {
    transform: scale(0.82);
    transition: transform 100ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .mobile-tabbar__label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    position: relative;
    z-index: 1;
  }

  /* Active: FIGUS green for both pressed + persistent selected */
  .mobile-tabbar__item:active,
  .mobile-tabbar__item[data-active="true"] {
    color: var(--field-2);
  }

  /* Push content above tabbar so last card is visible */
  .container {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }

  /* ── Subtle touch feedback on interactive surfaces ── */
  .btn:active {
    transform: scale(0.97);
    transition: transform 120ms ease;
  }

  .team-card:active {
    transform: scale(0.985) translateY(0);
    box-shadow: var(--shadow-1);
    transition: transform 120ms ease, box-shadow 120ms ease;
  }

}

/* Neutralise mobile touch transforms for reduced-motion users */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .mobile-tabbar__item:active .mobile-tabbar__icon,
  .mobile-tabbar__icon,
  .mobile-tabbar__item::before,
  .btn:active,
  .team-card:active {
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   REPETIDAS BOTTOM SHEET — Mobile v1B pilot
   Only overrides on max-width: 767px. Desktop modal unchanged.
   ============================================================ */

@media (max-width: 767px) {
  /* Backdrop: column-flex so sheet anchors to the bottom edge.
     z-index 210 renders above mobile-tabbar (z-index 200). */
  #repeats-view-backdrop {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    padding-left:  env(safe-area-inset-left,  0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-top:   env(safe-area-inset-top,   0px);
    z-index: 210;
  }

  /* Sheet: full width, slides up from the bottom */
  #repeats-view-backdrop .modal--sheet {
    width: 100%;
    max-width: 100%;
    max-height: min(88vh, 720px);
    border-radius: 24px 24px 0 0;
    border-left:   none;
    border-right:  none;
    border-bottom: none;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #repeats-view-backdrop[data-open="true"] .modal--sheet {
    transform: translateY(0);
  }

  /* Drag handle — centered pill above the header */
  #repeats-view-backdrop .modal--sheet::before {
    content: '';
    display: block;
    align-self: center;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    margin-top: 10px;
    margin-bottom: 2px;
    flex-shrink: 0;
  }

  /* Footer: clear home indicator + tabbar gap (+12px) */
  #repeats-view-backdrop .modal--sheet .modal__foot {
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px) + 12px);
  }
}

/* Sheet: instant snap for reduced-motion users on mobile */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  #repeats-view-backdrop .modal--sheet {
    transition: none;
  }
}

/* ============================================================
   FALTANTES BOTTOM SHEET — Mobile v1B-2
   Desktop #modal-backdrop stays centered; sheet only on mobile.
   ============================================================ */

@media (max-width: 767px) {
  #modal-backdrop {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    padding-left:  env(safe-area-inset-left,  0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-top:   env(safe-area-inset-top,   0px);
    z-index: 210;
  }

  #modal-backdrop .modal--sheet {
    width: 100%;
    max-width: 100%;
    max-height: min(88vh, 720px);
    border-radius: 24px 24px 0 0;
    border-left:   none;
    border-right:  none;
    border-bottom: none;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #modal-backdrop[data-open="true"] .modal--sheet {
    transform: translateY(0);
  }

  #modal-backdrop .modal--sheet::before {
    content: '';
    display: block;
    align-self: center;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    margin-top: 10px;
    margin-bottom: 2px;
    flex-shrink: 0;
  }

  #modal-backdrop .modal--sheet .modal__foot {
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px) + 12px);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  #modal-backdrop .modal--sheet {
    transition: none;
  }
}

/* ============================================================
   PROFILE CENTER — modal on desktop, bottom sheet on mobile (v82.1)
   Desktop: centered 480px modal. Mobile: bottom sheet above tabbar.
   Identity-first IA: hero → Perfil → Álbum → Sesión.
   ============================================================ */

.pf-body {
  padding: 0 0 var(--s-4);
  overflow-y: auto;
}

/* ── Identity hero ─────────────────────────────────────────── */
.pf-hero {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-5) var(--s-5);
  border-bottom: 1px solid var(--paper-2);
}

.pf-hero__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--gold-1), var(--gold-3));
  color: var(--ink-on-gold);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 2px 8px rgba(0,0,0,0.12);
}

.pf-hero__info {
  flex: 1;
  min-width: 0;
}

.pf-hero__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-1);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-hero__status {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: 3px;
  line-height: 1.4;
}

/* ── Groups ────────────────────────────────────────────────── */
.pf-group {
  padding: var(--s-4) 0 0;
}

.pf-group + .pf-group {
  border-top: 8px solid var(--paper);
}

.pf-group__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 var(--s-5) var(--s-2);
  opacity: 0.55;
}

.pf-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pf-list li + li {
  border-top: 1px solid var(--paper-2);
}

/* ── Action rows ───────────────────────────────────────────── */
.pf-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-5);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--ink-1);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 500;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast);
}

.pf-row:hover,
.pf-row:active {
  background: var(--paper-2);
}

.pf-icon {
  width: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.80;
}

.pf-label-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pf-label {
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.2;
}

.pf-sub {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  font-weight: 400;
  line-height: 1.3;
}

.pf-chevron {
  font-size: var(--fs-md);
  color: var(--ink-3);
  opacity: 0.4;
  flex-shrink: 0;
}

/* Tone modifiers */
.pf-row--warn   { color: var(--gold-3); }
.pf-row--danger { color: var(--red); }

/* Desktop: narrow centered modal */
.modal--profile {
  max-width: 480px;
}

/* Mobile: bottom sheet above tabbar */
@media (max-width: 767px) {
  #profile-center-backdrop {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    padding: 0;
    padding-left:  env(safe-area-inset-left,  0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-top:   env(safe-area-inset-top,   0px);
    z-index: 210;
  }

  #profile-center-backdrop .modal--profile {
    width: 100%;
    max-width: 100%;
    max-height: min(88vh, 720px);
    border-radius: 24px 24px 0 0;
    border-left:   none;
    border-right:  none;
    border-bottom: none;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #profile-center-backdrop[data-open="true"] .modal--profile {
    transform: translateY(0);
  }

  #profile-center-backdrop .modal--profile::before {
    content: '';
    display: block;
    align-self: center;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    margin-top: 10px;
    margin-bottom: 2px;
    flex-shrink: 0;
  }

  #profile-center-backdrop .pf-body {
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px) + 12px);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  #profile-center-backdrop .modal--profile {
    transition: none;
  }
}

/* ============================================================
   SOBRE BOTTOM SHEET — Mobile v84.5
   Desktop #sobre-backdrop stays centered; sheet only on mobile.
   ============================================================ */

@media (max-width: 767px) {
  #sobre-backdrop {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    padding-left:  env(safe-area-inset-left,  0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-top:   env(safe-area-inset-top,   0px);
    z-index: 210;
  }

  #sobre-backdrop .modal--sheet {
    width: 100%;
    max-width: 100%;
    max-height: min(88vh, 720px);
    border-radius: 24px 24px 0 0;
    border-left:   none;
    border-right:  none;
    border-bottom: none;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #sobre-backdrop[data-open="true"] .modal--sheet {
    transform: translateY(0);
  }

  #sobre-backdrop .modal--sheet::before {
    content: '';
    display: block;
    align-self: center;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    margin-top: 10px;
    margin-bottom: 2px;
    flex-shrink: 0;
  }

  #sobre-backdrop .modal--sheet .modal__foot {
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px) + 12px);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  #sobre-backdrop .modal--sheet {
    transition: none;
  }
}

/* ============================================================
   REGISTRAR CAMBIO BOTTOM SHEET — Mobile v84.5
   Desktop #trade-modal-backdrop stays centered; sheet only on mobile.
   ============================================================ */

@media (max-width: 767px) {
  #trade-modal-backdrop {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    padding-left:  env(safe-area-inset-left,  0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-top:   env(safe-area-inset-top,   0px);
    z-index: 210;
  }

  #trade-modal-backdrop .modal--sheet {
    width: 100%;
    max-width: 100%;
    max-height: min(88vh, 720px);
    border-radius: 24px 24px 0 0;
    border-left:   none;
    border-right:  none;
    border-bottom: none;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #trade-modal-backdrop[data-open="true"] .modal--sheet {
    transform: translateY(0);
  }

  #trade-modal-backdrop .modal--sheet::before {
    content: '';
    display: block;
    align-self: center;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    margin-top: 10px;
    margin-bottom: 2px;
    flex-shrink: 0;
  }

  #trade-modal-backdrop .modal--sheet .modal__foot {
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px) + 12px);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  #trade-modal-backdrop .modal--sheet {
    transition: none;
  }
}

/* ============================================================
   REDUCED MOTION
   Remove or dampen all non-essential animation for users
   who have enabled prefers-reduced-motion.
   State changes (color, opacity) are preserved so feedback
   remains clear without vestibular-triggering movement.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Demo banner dot: remove infinite blink */
  .demo-banner__dot { animation: none; }

  /* Progress ring: instant update */
  .ring__fill { transition: none; }

  /* Stat numbers: remove bounce on update */
  .stat__num.is-bump { animation: none; }
  .stat:hover { transform: none; }

  /* Team cards: enter instantly (no slide-in) */
  .team-card {
    animation: none;
    transition: box-shadow var(--t-fast), border-color var(--t-fast);
  }
  .team-card:hover { transform: none; }

  /* Progress bar: instant fill */
  .card-progress__fill { transition: none; }

  /* Stickers: keep color feedback, remove movement */
  .sticker {
    transition: background var(--t-fast), color var(--t-fast),
                border-color var(--t-fast), box-shadow var(--t-fast);
  }
  .sticker:hover,
  .sticker[data-state="0"]:hover,
  .sticker[data-state="1"]:hover { transform: none; }

  /* Stamp animation: remove bounce/ripple; state color change is still visible */
  .sticker.is-stamping          { animation: none; }
  .sticker.is-stamping::after   { animation: none; }

  /* Trophy: appear instantly at final state, no pop */
  .team-card[data-complete="true"] .card-header__pct__trophy { animation: none; }

  /* Confetti: disable entirely */
  .team-card[data-complete="true"] .confetti span { animation: none; }

  /* Card highlight (team selector): static ring, no pulse */
  .team-card--highlight {
    animation: none;
    box-shadow: 0 0 0 3px var(--gold-1), var(--shadow-3);
  }

  /* Toast: fade only, no slide or scale */
  .toast {
    animation: none;
    opacity: 1;
  }

  /* Accordion chevron: instant rotate, no ease */
  .group-head__chevron { transition: none; }

  /* Buttons: remove lift on hover/active */
  .btn--primary:hover,
  .btn--share:hover,
  .btn--gold:hover,
  .btn--field:hover { transform: none; }
  .btn--share:active { transform: none; }

  /* Modal: appear instantly at final position, no slide-in */
  .modal {
    transform: none;
    transition: none;
  }
  .modal-backdrop[data-open="true"] .modal { transform: none; }
}

/* ============================================================
   v86 — iOS APP CHROME POLISH
   Mobile-only refinements. Desktop layout/logic unchanged.
   ============================================================ */

/* ── Task 1: Fix dead space after footer (was sized for legacy profile section) ── */
@media (max-width: 767px) {
  .app-foot {
    margin-top: var(--s-5); /* 20px — was var(--s-9) = 56px (sized for removed section) */
  }
}

/* ── Task 2: Tighter header on mobile — more viewport for content ── */
@media (max-width: 767px) {
  .header__row {
    min-height: 56px;
    padding: 7px var(--s-4);
  }
  .brand__logo {
    height: 34px;
  }
}

/* ── Task 3: Cards feel slightly more elevated on mobile (native app shadow) ── */
@media (max-width: 767px) {
  .team-card {
    box-shadow:
      0 2px 8px -1px rgba(11, 69, 32, 0.10),
      0 1px 2px rgba(11, 69, 32, 0.05);
  }
}

/* ── Task 4: View-nav segment — green FIGUS accent on active tab ── */
.view-tab[data-active="true"] {
  background: var(--figus-green-50);
  color: var(--field-1);
  box-shadow:
    0 1px 4px rgba(11, 69, 32, 0.12),
    0 0 0 1.5px rgba(26, 140, 60, 0.14);
}

.view-tab:active:not([data-active="true"]) {
  opacity: 0.78;
  transition: opacity 80ms ease;
}

/* ── Task 5: Toasts sit above tabbar — not buried behind it ── */
@media (max-width: 767px) {
  .toast-wrap {
    /* tabbar ≈ 58px + safe-area; +20px breathing room = 78px clearance */
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    z-index: 220; /* above tabbar (200) and sheets (210) */
  }
}

/* ── Task 6: Microinteraction — view-tab spring + pf-row opacity confirm ── */
@media (max-width: 767px) {
  .view-tab {
    transition: background var(--t-fast), color var(--t-fast),
                box-shadow var(--t-fast), opacity 80ms ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

/* Reduced-motion: strip new motion additions */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .view-tab,
  .view-tab:active:not([data-active="true"]) {
    transition: none !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   v86A — Native iPhone Polish · Safe Pass
   Incremental refinements on top of v86.
   ============================================================ */

/* ── Task 1: Footer → compact app signature, not a webpage ending ──
   Base:  margin-top 56px + padding 24px/32px ≈ 112px+ after last card
   v86:   margin-top 20px + padding 24px/32px ≈  76px+ (partial fix)
   v86A:  margin-top 12px + padding 12px/ 8px ≈  32px+ — small signature
   Container padding-bottom (92px+safe) still provides tabbar clearance.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .app-foot {
    margin-top: var(--s-3);          /* 12px from last card */
    padding: var(--s-3) 0 var(--s-2); /* 12px top · 8px bottom */
    border-top-color: var(--paper-2); /* subtler divider */
    font-size: 10px;                  /* below --fs-xs — barely-there */
    opacity: 0.65;                    /* muted signature, not content */
  }
}

/* ── Task 2: Header shadow — subtler on mobile (native vs web-banner feel) ── */
@media (max-width: 767px) {
  .header {
    box-shadow: 0 1px 6px -1px rgba(11, 69, 32, 0.22);
  }
}

/* ── Task 4: Tabbar active pill — slightly more opaque for better presence ── */
@media (max-width: 767px) {
  .mobile-tabbar__item::before {
    background: rgba(26, 138, 54, 0.13); /* was 0.10 */
  }
}

/* Reduced-motion: opacity change on footer has no motion, no override needed */

/* ============================================================
   v86B — NATIVE IPHONE CHROME ADVANCED
   Large title, iOS segment, spring cards, emotional footer,
   micro-save toast. Mobile-scoped; desktop untouched.
   ============================================================ */

/* ── Task 1: iOS Large Title ───────────────────────────────── */
.lrg-title { display: none; } /* hidden on desktop */

@media (max-width: 767px) {
  .lrg-title {
    display: block;
    padding: var(--s-4) var(--s-4) var(--s-2);
  }
  .lrg-title__heading {
    font-family: var(--font-display);
    font-size: 2.125rem;
    font-weight: 800;
    color: var(--field-1);
    letter-spacing: -0.028em;
    line-height: 1;
    margin: 0;
  }
  .lrg-title__sub {
    font-size: var(--fs-sm);
    color: var(--ink-3);
    font-weight: 500;
    margin: 4px 0 0;
    letter-spacing: 0;
  }
}

/* ── Task 2: iOS Segmented Control ────────────────────────── */
/* Tighter track + contiguous tabs */
.view-nav {
  border-radius: 10px;
  padding: 3px;
  gap: 0;
}

.view-tab {
  border-radius: 7px; /* track_radius(10) - padding(3) */
  height: 40px;
}

/* Active pill: crisp white with brand shadow ring */
.view-tab[data-active="true"] {
  background: #ffffff;
  color: var(--field-1);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.07);
}

/* Press compression on inactive tabs */
.view-tab:active:not([data-active="true"]) {
  transform: scale(0.95);
  opacity: 0.85;
  transition: transform 70ms ease, opacity 70ms ease;
}

/* ── Task 3: Premium Card Spring Motion ───────────────────── */
@media (max-width: 767px) {
  /* Spring release on finger lift */
  .team-card {
    transition:
      transform 380ms cubic-bezier(0.34, 1.2, 0.64, 1),
      box-shadow var(--t-base),
      border-color var(--t-base);
  }
  /* Fast compress on press */
  .team-card:active {
    transform: scale(0.982);
    box-shadow: var(--shadow-1);
    transition:
      transform 80ms cubic-bezier(0.22, 0.61, 0.36, 1),
      box-shadow 80ms ease;
  }
}

/* ── Task 4: Footer dual-span — app vs web ─────────────────── */
.app-foot__app { display: none; }
.app-foot__web { display: inline; }

@media (max-width: 767px) {
  .app-foot__app { display: inline; }
  .app-foot__web { display: none; }
}

/* ── Task 5: Micro save toast ──────────────────────────────── */
.toast--micro {
  /* Compact pill — less wide, less tall */
  min-width: 0;
  padding: 9px 14px;
  font-size: var(--fs-xs);
  border-radius: var(--r-pill);
  background: rgba(18, 109, 46, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(11, 69, 32, 0.28);
  /* Shorter lifespan */
  animation: toastIn 200ms var(--t-spring), toastOut 160ms ease-in 680ms forwards;
}
.toast--micro .toast__icon {
  width: 18px; height: 18px;
  font-size: var(--fs-xs);
}

/* ── Task 6: App depth — section heading breathing room ────── */
@media (max-width: 767px) {
  .section-head {
    padding-top: var(--s-4);
    padding-bottom: var(--s-2);
  }
}

/* ── Reduced-motion: strip v86B additions ──────────────────── */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .team-card {
    /* Remove spring from base — revert to t-base */
    transition:
      transform var(--t-base),
      box-shadow var(--t-base),
      border-color var(--t-base) !important;
  }
  .view-tab:active:not([data-active="true"]) {
    transform: none !important;
    opacity: 1 !important;
  }
  .toast--micro {
    animation: none;
    opacity: 1;
  }
}

/* ============================================================
   v86C — FOCUS CLEANUP + PRODUCT FRAMING
   Remove KPI duplication, Swap Match rename, hide nearby-entry
   from Home, rebalance top hierarchy. Mobile-scoped; desktop safe.
   ============================================================ */

/* Task 1: Large title removed from DOM — belt-and-suspenders hide */
.lrg-title { display: none !important; }

/* Task 3: Intercambios cerca hidden from Home view.
   btn-nearby is still in DOM; Profile Center pfc-nearby-btn
   delegates to it via .click() — feature remains fully functional. */
#nearby-entry-card { display: none !important; }

/* Task 4 + 5: Hierarchy rebalance after lookup moved above controls.
   Lookup sits between team-selector and controls — needs breathing room. */
@media (max-width: 767px) {
  /* Tighten gap between selector and lookup */
  .team-selector-wrap {
    margin-bottom: var(--s-2); /* 8px */
  }
  /* Lookup gets its own breathing room below */
  .lookup-wrap {
    margin-top: 0;
    margin-bottom: var(--s-3); /* 12px before controls */
  }
  /* Controls slightly tighter top after lookup */
  .controls {
    margin-top: 0;
  }
}

/* Task 5: Desktop — no change; selector / controls natural flow */

/* ============================================================
   v91 — MOBILE TABBAR POSITION HOTFIX
   Root cause: item padding 9/8px + 3px gap + 24px icon + safe-area
   produces a 78–91px bar on iPhone — too tall, cuts into feed.
   Fix: compact item vertical rhythm; recalibrate container + toast.
   Mobile-only. Desktop untouched. SW → figus-v91.
   ============================================================ */

@media (max-width: 767px) {

  /* Task 2: Compact item vertical rhythm
     Before: padding 9px 4px 8px, gap 3px → ~57px content area
     After:  padding 7px 4px 5px, gap 2px → ~51px content area
     Saves ~6px. Icon 24px and label 11px stay readable + tappable. */
  .mobile-tabbar__item {
    padding: 7px 4px 5px;
    gap: 2px;
  }

  /* Task 3: safe-area-inset-bottom stays on the bar for home indicator —
     unchanged. bottom: 0 anchoring is correct. No position change needed.
     Pill animation origin nudge to match tighter padding. */
  .mobile-tabbar__item::before {
    top: 3px; /* was 4px — track tighter padding-top */
  }

  /* Task 4: Recalibrate container clearance to match new bar height.
     New bar content ≈ 51px + safe-area; 18px breathing room → 69px.
     Was: 92px + safe-area (overshot by ~23px → dead space below last card). */
  .container {
    padding-bottom: calc(69px + env(safe-area-inset-bottom, 0px));
  }

  /* Task 5: Recalibrate toast offset.
     New bar content ≈ 51px + safe-area; 12px gap above bar top → 63px.
     Was: 78px + safe-area. */
  .toast-wrap {
    bottom: calc(63px + env(safe-area-inset-bottom, 0px));
  }

}

/* Reduced-motion: v91 has no motion changes — no guard needed */

/* ============================================================
   v92 — HOME SIMPLIFICATION + UNIFIED LANGUAGE + COLLAPSE ALL
   Header KPI removal, logo enlargement, language unification,
   collapse-all button. Mobile + desktop. SW → figus-v92.
   ============================================================ */

/* Task 2: Belt-and-suspenders — hide KPI cluster (DOM removed; cached pages safe) */
.header__kpis { display: none !important; }

/* Task 3: Logo +17% on desktop, +18% on mobile (was 40px / 34px) */
.brand__logo { height: 47px; }

@media (max-width: 767px) {
  .brand__logo { height: 40px; }
  /* Header row needs slightly more breathing room for taller logo */
  .header__row { min-height: 58px; }
}

/* Task 6: Collapse-all button — icon-only square */
.btn--icon-only {
  padding: var(--s-2);          /* 8px all sides — square */
  min-width: 0;
  line-height: 0;               /* collapse line-height so SVG sets height */
  aspect-ratio: 1 / 1;
}

/* Task 6: Icon visibility — controlled by data-state attribute */
#btn-collapse-all[data-state="expanded"] .icon-expand   { display: none; }
#btn-collapse-all[data-state="collapsed"] .icon-collapse { display: none; }

/* Task 6: Subtle scale-press on the collapse button */
#btn-collapse-all:active {
  transform: scale(0.91);
  transition: transform 80ms ease;
}

/* Task 7: Expand animation — cards fade + rise in when groups are expanded */
@keyframes v92CardReveal {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.grid.is-expanding .team-card {
  animation: v92CardReveal 200ms ease both;
}

/* Reduced-motion: skip card reveal animation */
@media (prefers-reduced-motion: reduce) {
  .grid.is-expanding .team-card {
    animation: none;
  }
}

/* ============================================================
   v92.1 — MOBILE SHARE + COLLAPSE ROW FIX
   On mobile: btn-share and btn-collapse-all sit on one row.
   On desktop (≥768px): display:contents makes the wrapper
   invisible so both buttons participate in .controls flex row
   exactly like any other sibling. SW → figus-v93.
   ============================================================ */

/* Mobile: shared flex row — share expands, collapse is compact square */
@media (max-width: 767px) {
  .controls__share-row {
    display: flex;
    align-items: stretch;
    gap: var(--s-2);          /* matches .controls gap */
  }

  .controls__share-row #btn-share {
    flex: 1 1 0;              /* greedy — takes all remaining width */
    min-width: 0;
  }

  .controls__share-row #btn-collapse-all {
    flex: 0 0 52px;           /* fixed 52px ≈ same as btn height (48px) + 2px border */
    padding: 0;               /* override btn--icon-only padding for precise square */
    width: 52px;
    height: 48px;             /* matches .btn height */
    aspect-ratio: unset;      /* let explicit width/height control shape */
  }
}

/* Desktop (≥768px): wrapper is layout-transparent.
   display:contents dissolves the div — children join .controls flex row directly. */
@media (min-width: 768px) {
  .controls__share-row {
    display: contents;
  }
}

/* ============================================================
   v93 — FINAL LANGUAGE + SPECIALS + SWAP MATCH SHEET
   Swap Match (#validate-backdrop) becomes a bottom sheet on
   mobile, matching Sobre / Repetidas / Trade / Profile.
   SW → figus-v94.
   ============================================================ */

/* Swap Match — bottom sheet on mobile */
@media (max-width: 767px) {
  #validate-backdrop {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    padding-left:  env(safe-area-inset-left,  0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-top:   env(safe-area-inset-top,   0px);
    z-index: 210;
  }

  #validate-backdrop .modal--sheet {
    width: 100%;
    max-width: 100%;
    max-height: min(92vh, 760px);
    border-radius: 24px 24px 0 0;
    border-left:   none;
    border-right:  none;
    border-bottom: none;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #validate-backdrop[data-open="true"] .modal--sheet {
    transform: translateY(0);
  }

  /* Drag handle */
  #validate-backdrop .modal--sheet::before {
    content: '';
    display: block;
    align-self: center;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    margin-top: 10px;
    margin-bottom: 2px;
    flex-shrink: 0;
  }

  /* Safe-area footer padding */
  #validate-backdrop .modal--sheet .modal__foot {
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px) + 12px);
  }
}

/* ============================================================
   v94 — SPECIALS ACCORDION + FOOTER/LOGIN COPY + TEXT CLEANUP
   SW → figus-v95.
   ============================================================ */

/* Task 4: Updated footer layout — copy line + legal links */
.app-foot__copy {
  display: block;
  margin-bottom: var(--s-2);
}

.app-foot__legal {
  display: block;
  font-size: var(--fs-xs);
  color: var(--ink-4);
}

.app-foot__legal a {
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.app-foot__legal a:hover {
  color: var(--ink-2);
}

/* Retire the old dual-span responsive display swap — new layout uses block spans */
.app-foot__app,
.app-foot__web {
  display: none !important;
}

/* Task 6: Álbum 2026 label — clamp so it stays readable at 320px (P3 adapt fix) */
.mobile-tabbar__item[data-tab="album"] .mobile-tabbar__label {
  font-size: clamp(9px, 2.5vw, 11px);
  letter-spacing: -0.2px;
}

/* ============================================================
   v96 — MOBILE NAVIGATION ARCHITECTURE (APP-FIRST)
   Bottom nav is the primary navigation system on iPhone.
   Controls reduced to actions not reachable from nav.
   SW → figus-v97.
   ============================================================ */

@media (max-width: 767px) {

  /* Task 1: Restore Abrir Sobre — primary CTA (no longer in bottom nav) */
  #btn-sobre {
    display: flex;
    order: -2;        /* First in the controls column */
  }

  /* Task 1: Reorder remaining visible controls */
  #btn-validate-repeats { order: -1; }  /* Second: Swap Match */
  #btn-trade            { order:  0; }  /* Third: Registrar Swap */
  .controls__share-row  { order:  1; }  /* Last: FIGUS + Collapse */

  /* Task 1: Faltantes moves to bottom nav — hide from controls */
  #btn-missing { display: none; }

  /* Task 4: Ir a selección hidden — Álbum 2026 hub replaces it */
  .team-selector-wrap { display: none; }

  /* Task 10: Remove top gap now that selector is gone */
  .lookup-wrap { margin-top: 0; }

  /* Scroll offset — account for sticky header height */
  [data-group-id] { scroll-margin-top: 72px; }

}

/* ── Álbum Nav sheet — bottom sheet (mobile only) ────────────── */
@media (max-width: 767px) {
  #album-nav-backdrop {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    padding-left:  env(safe-area-inset-left,  0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-top:   env(safe-area-inset-top,   0px);
    z-index: 210;
  }

  #album-nav-backdrop .modal--sheet {
    width: 100%;
    max-width: 100%;
    max-height: min(88vh, 800px);
    border-radius: 24px 24px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #album-nav-backdrop[data-open="true"] .modal--sheet {
    transform: translateY(0);
  }

  #album-nav-backdrop .modal--sheet::before {
    content: '';
    display: block;
    align-self: center;
    width: 36px; height: 4px; border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    margin-top: 10px; margin-bottom: 2px; flex-shrink: 0;
  }

  #album-nav-backdrop .modal--sheet .modal__foot {
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px) + 12px);
  }
}

/* ── Album nav row styles (v96.2 — 2-line layout) ── */
.album-nav__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: none;
  border: none;
  border-bottom: 1px solid var(--paper-3);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast);
  -webkit-tap-highlight-color: transparent;
}

.album-nav__row:last-child {
  border-bottom: none;
}

.album-nav__row:active {
  background: var(--paper-2);
}

/* Line 1: group name (left) + progress (right) */
.album-nav__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.album-nav__label {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-1);
}

.album-nav__stat {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  text-align: right;
  flex-shrink: 0;
}

/* Line 2: team codes */
.album-nav__codes {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin-top: 2px;
  line-height: 1.4;
}

.album-nav__row--specials .album-nav__label {
  color: var(--gold-2, #b45309);
}

/* ============================================================
   v95 — MOBILE-ONLY UI SIMPLIFICATION
   Hide controls duplicated by the bottom navigation.
   Bottom nav is the primary navigation on iPhone.
   display:none removes elements from flow + accessibility tree.
   Desktop (≥768px): all controls remain fully visible.
   SW → figus-v96.
   ============================================================ */

@media (max-width: 767px) {

  /* Task 1: Header avatar — Profile accessible via bottom nav Perfil tab */
  #btn-avatar-perfil {
    display: none;
  }

  /* NOTE: #btn-sobre was hidden here when Sobre was in the bottom nav (v95).
     Sobre was removed from the nav in v96 and restored as the primary CTA.
     The hide rule has been removed — v96 block handles display:flex. */

  /* Task 2: Repetidas — accessible via bottom nav Repetidas tab */
  #btn-doubles {
    display: none;
  }

  /* Task 4: Tighten header row when avatar is gone — ring sits flush right */
  .header__progress {
    gap: 0;
  }

}

/* ============================================================
   v96.3 — FOOTER LEGAL SHEET
   Footer reordered: copy → legal links → copyright.
   Legal links open in-app bottom sheet instead of navigating.
   SW → figus-v100.
   ============================================================ */

/* Footer: copyright on its own line, below legal links */
.app-foot__copyright {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--ink-4);
}

/* ── Legal sheet content styles ── */
.legal-sheet__body {
  padding: var(--s-4) var(--s-5) var(--s-6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.legal-sheet__intro {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--paper-3);
  line-height: 1.5;
}

.legal-sheet__section {
  margin-bottom: var(--s-4);
}

.legal-sheet__heading {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-1);
  margin: 0 0 var(--s-1);
  letter-spacing: 0.01em;
}

.legal-sheet__section p,
.legal-sheet__section ul {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin: 0;
  line-height: 1.55;
}

.legal-sheet__list {
  padding-left: var(--s-4);
  list-style: disc;
}

.legal-sheet__list li + li {
  margin-top: var(--s-1);
}

.legal-sheet__full-btn {
  display: inline-block;
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--field);
  text-decoration: none;
  padding: var(--s-2) 0;
}

.legal-sheet__full-btn:hover {
  text-decoration: underline;
}

/* ── Legal sheet — mobile bottom sheet ── */
@media (max-width: 767px) {
  #terms-backdrop,
  #privacy-backdrop {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    padding-left:  env(safe-area-inset-left,  0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-top:   env(safe-area-inset-top,   0px);
    z-index: 210;
  }

  #terms-backdrop .modal--sheet,
  #privacy-backdrop .modal--sheet {
    width: 100%;
    max-width: 100%;
    max-height: min(85vh, 720px);
    border-radius: 24px 24px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    transform: translateY(100%);
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  #terms-backdrop[data-open="true"] .modal--sheet,
  #privacy-backdrop[data-open="true"] .modal--sheet {
    transform: translateY(0);
  }

  #terms-backdrop .modal--sheet::before,
  #privacy-backdrop .modal--sheet::before {
    content: '';
    display: block;
    align-self: center;
    width: 36px; height: 4px; border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    margin-top: 10px; margin-bottom: 2px; flex-shrink: 0;
  }

  #terms-backdrop .modal--sheet .modal__body,
  #privacy-backdrop .modal--sheet .modal__body {
    padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   v97 — IMPECCABLE AUDIT FIXES
   Accessibility, theming, performance, and motion corrections.
   ============================================================ */

/* sr-only utility already exists in the base utilities block — no duplicate needed */

/* Reduced motion: collapse spring/bounce token durations to zero.
   Animations using --t-spring / --t-bounce become instant.
   Individual component blocks still handle their own overrides above. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-spring: 0ms;
    --t-bounce: 0ms;
  }
}

/* will-change on sheets during open — pre-promote compositing layer */
.modal-backdrop[data-open="true"] .modal--sheet {
  will-change: transform;
}

/* ============================================================
   ANIMATE — PURPOSEFUL MOTION (index)
   Product register: 150–250 ms, ease-out-quint. Feedback,
   reveal, and state clarity. No choreography sequences.
   ============================================================ */

/* ── 1. Stats bar: polite entrance on first paint ────────────── */
@keyframes statReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stat {
  animation: statReveal 240ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.stat:nth-child(1) { animation-delay:   0ms; }
.stat:nth-child(2) { animation-delay:  45ms; }
.stat:nth-child(3) { animation-delay:  80ms; }
.stat:nth-child(4) { animation-delay: 110ms; }

/* ── 2. Lookup result card: animated on DOM insertion ────────── */
@keyframes lookupReveal {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.lookup-card {
  animation: lookupReveal 200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── 3. Lookup search icon: scale + tint on focus ────────────── */
.lookup-field .lookup-icon {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              color var(--t-fast);
}
.lookup-field:focus-within .lookup-icon {
  transform: scale(1.18);
  color: var(--gold-2);
}

/* ── 4. Sobre & validate results: stagger on dynamic insert ─── */
@keyframes resultReveal {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sobre-results > *,
.validate-results > * {
  animation: resultReveal 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sobre-results > *:nth-child(2),
.validate-results > *:nth-child(2) { animation-delay:  30ms; }
.sobre-results > *:nth-child(3),
.validate-results > *:nth-child(3) { animation-delay:  55ms; }
.sobre-results > *:nth-child(4),
.validate-results > *:nth-child(4) { animation-delay:  75ms; }
.sobre-results > *:nth-child(5),
.validate-results > *:nth-child(5) { animation-delay:  90ms; }
.sobre-results > *:nth-child(6),
.validate-results > *:nth-child(6) { animation-delay: 105ms; }
.sobre-results > *:nth-child(7),
.validate-results > *:nth-child(7) { animation-delay: 115ms; }
.sobre-results > *:nth-child(8),
.validate-results > *:nth-child(8) { animation-delay: 120ms; }

/* ── 5. Profile center rows: press-scale feedback ───────────── */
/* Extends existing background transition; transform is separate. */
.pf-row {
  transition: background var(--t-fast), transform 120ms ease;
}
.pf-row:active {
  transform: scale(0.97);
}

/* ── 6. View tab: activate pop ───────────────────────────────── */
/* Fires when JS sets data-active="true" — clarifies selected
   tab without relying on color change alone.                    */
@keyframes tabActivate {
  0%   { transform: scale(0.94); }
  55%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.view-tab[data-active="true"] {
  animation: tabActivate 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Reduced-motion overrides ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .stat                                        { animation: none; }
  .lookup-card                                 { animation: none; }
  .lookup-field .lookup-icon                   { transition: color var(--t-fast); }
  .lookup-field:focus-within .lookup-icon      { transform: none; }
  .sobre-results > *,
  .validate-results > *                        { animation: none; }
  .pf-row                                      { transition: background var(--t-fast); }
  .pf-row:active                               { transform: none; }
  .view-tab[data-active="true"]                { animation: none; }
}

/* ============================================================
   v106 — MOBILE CLEANUP + NATIVE FEEL
   Toast offset · Sobre primary emphasis · Stats tappable
   · Close button deduplication on desktop.
   Mobile-scoped (except Task 5). Desktop untouched.
   SW → figus-v106.
   ============================================================ */

/* ── Task 1: Toast — reliable clearance above bottom tabbar ──
   v91 trimmed the offset from 78px → 63px when it compacted the
   tabbar. 63px leaves only 14px of breathing room; on some layouts
   the top edge of the toast grazes the tabbar edge.
   Restore 23px breathing room: 49px tabbar content + 23px = 72px. */
@media (max-width: 767px) {
  .toast-wrap {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Task 3: Abrir Sobre — primary CTA emphasis on mobile ──
   order: -2 already places it first (v96). Add height + shadow
   to signal priority without redesigning the component. */
@media (max-width: 767px) {
  #btn-sobre {
    height: 52px;              /* 4px taller than standard 48px */
    font-size: var(--fs-base); /* step up from --fs-sm → clearer label */
    box-shadow:
      0 4px 16px -2px rgba(11, 69, 32, 0.42),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
}

/* ── Task 4: Stats cards — press feedback for tappable state ──
   Click handlers added in app.js (v106 block).
   CSS: cursor + tap-highlight removal + active scale. */
@media (max-width: 767px) {
  .stat {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .stat:active {
    transform: scale(0.97);
    box-shadow: var(--shadow-1);
    transition: transform 100ms ease, box-shadow 100ms ease;
  }
}

/* Reduced-motion: suppress press scale on stats */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .stat:active { transform: none; box-shadow: var(--shadow-2); }
}

/* ── Task 5: Remove redundant Cerrar on desktop center modals ──
   On mobile (≤767px) these are bottom sheets — the footer Cerrar
   provides essential thumb-reach dismissal when the X is far away.
   On desktop (≥768px) they are centered modals — X close and
   backdrop-click both dismiss cleanly; Cerrar is purely redundant. */
@media (min-width: 768px) {
  #modal-close-btn,
  #repeats-view-close-btn { display: none; }
}

/* ============================================================
   v107 — HOY EN EL MUNDIAL — DAILY MATCH COMPANION
   Static fixture · FIGUS album twist · Group scroll on tap.
   Tournament window: Jun 11 – Jul 19 2026.
   SW → figus-v107.
   ============================================================ */

/* ── Card container ── */
.hoy-card {
  background: var(--color-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  margin-bottom: var(--s-4);
}

/* ── Header strip: dark field-green + gold date ── */
.hoy-card__head {
  background: var(--figus-green-900);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 10px var(--s-4);
}

.hoy-card__label {
  font: 700 var(--fs-sm) / 1 var(--font-body);
  color: var(--ink-on-color);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.hoy-card__date {
  font: 600 var(--fs-xs) / 1 var(--font-mono);
  color: var(--gold-1);
}

/* ── Match rows (tappable buttons) ── */
.hoy-match {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0 var(--s-2);
  padding: var(--s-3) var(--s-4);
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.hoy-match:first-child { border-top: none; }
.hoy-match:hover  { background: var(--figus-stone-50); }
.hoy-match:active { background: var(--figus-stone-100); transition: none; }

/* ── Team columns (home left, away right) ── */
.hoy-team {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hoy-team--away { align-items: flex-end; }

.hoy-team__namerow {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.hoy-team--away .hoy-team__namerow { flex-direction: row-reverse; }

.hoy-team__flag {
  font-size: 1.125rem;
  line-height: 1;
  flex-shrink: 0;
}

.hoy-team__name {
  font: 700 var(--fs-sm) / 1.2 var(--font-body);
  color: var(--ink);
}

.hoy-team__name--tbd {
  color: var(--ink-4);
  font-weight: 600;
}

/* Album status pill — only rendered when user has ≥1 sticker for that team */
.hoy-team__status {
  font: 600 var(--fs-xs) / 1 var(--font-mono);
  color: var(--figus-green-600);
}

.hoy-team__status--done { color: var(--figus-green-500); }

/* ── Centre column: kick-off time + host city ── */
.hoy-kick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 2px;
}

.hoy-kick__time {
  font: 700 var(--fs-sm) / 1 var(--font-mono);
  color: var(--ink-2);
  white-space: nowrap;
}

.hoy-kick__city {
  font: 500 var(--fs-xs) / 1 var(--font-body);
  color: var(--ink-4);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 68px;
}

/* ── Empty state (tournament day with no matches) ── */
.hoy-empty {
  margin: 0;
  padding: var(--s-4);
  text-align: center;
  font: 600 var(--fs-sm) / 1.5 var(--font-body);
  color: var(--ink-4);
}

/* ── Desktop: slightly wider time column for breathing room ── */
@media (min-width: 768px) {
  .hoy-kick { padding: 0 var(--s-2); }
  .hoy-kick__city { max-width: 100px; }
  .hoy-match { padding: var(--s-3) var(--s-5); }
}

/* Reduced motion: suppress hover/active transitions on match rows */
@media (prefers-reduced-motion: reduce) {
  .hoy-match { transition: none; }
}

/* ============================================================
   v108 — SPRINT FINAL — ALBUM COMPLETION COMPANION
   Four states: active (6-15) · almost (2-5) · one (1) · done (0)
   Premium, warm, emotional. Gold + green gradients.
   SW → figus-v108.
   ============================================================ */

/* ── Card container ── */
.sprint-card {
  background: var(--color-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-4);
  overflow: hidden;
  margin-bottom: var(--s-4);
}

/* Tappable state (non-completed) */
.sprint-card--tappable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── Header: state-differentiated gradient ── */
.sprint-card__head {
  --hd-from: var(--figus-green-950, #072F17);
  --hd-to:   var(--figus-green-700);
  background: linear-gradient(135deg, var(--hd-from) 0%, var(--hd-to) 100%);
  padding: var(--s-4);
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  animation: sprint-head-in 350ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 🔥 Almost there (2-5 missing) — fire: deep red → burnt amber */
.sprint-card__head--hot  { --hd-from: #6b1d1d; --hd-to: #a34200; }

/* 👀 One left (1 missing) — anticipation: midnight navy → field green */
.sprint-card__head--one  { --hd-from: #0e2050; --hd-to: #0b4520; }

/* 🏆 Completed (0 missing) — celebration: dark amber → bright gold */
.sprint-card__head--done { --hd-from: #5c3200; --hd-to: var(--figus-yellow-400); }

@keyframes sprint-head-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sprint-card__emoji {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.sprint-card__titles { flex: 1; min-width: 0; }

.sprint-card__title {
  font: 800 var(--fs-md) / var(--lh-tight) var(--font-display);
  color: var(--ink-on-color);
  letter-spacing: var(--tracking-tight);
}

.sprint-card__sub {
  font: 600 var(--fs-sm) / var(--lh-snug) var(--font-body);
  color: rgba(255, 255, 255, 0.72);
  margin-top: 4px;
}

/* ── Body ── */
.sprint-card__body {
  padding: var(--s-3) var(--s-4) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* ── Sticker chips (up to 8 preview + optional +N chip) ── */
.sprint-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
}

.sprint-chip {
  font: 700 var(--fs-xs) / 1 var(--font-mono);
  color: var(--ink-2);
  background: var(--figus-stone-100);
  border-radius: var(--r-chip);
  padding: 4px 8px;
  letter-spacing: 0.01em;
}

.sprint-chip--more {
  font-weight: 600;
  color: var(--ink-4);
  background: none;
  padding-left: 2px;
}

/* ── Single sticker display (miss === 1) ── */
.sprint-single {
  font: 800 var(--fs-xl) / 1 var(--font-display);
  color: var(--ink);
  text-align: center;
  padding: var(--s-2) 0;
  letter-spacing: var(--tracking-tight);
}

/* ── CTA button ── */
.sprint-card__cta {
  width: 100%;
  padding: 13px var(--s-4);
  border: none;
  border-radius: var(--r-control);
  font: 700 var(--fs-sm) / 1 var(--font-body);
  cursor: pointer;
  background: var(--figus-stone-100);
  color: var(--ink-2);
  transition: background var(--t-fast), transform 80ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.sprint-card__cta:hover  { background: var(--figus-stone-200); }
.sprint-card__cta:active { transform: scale(0.98); transition: transform 60ms ease; }

/* Gold CTA — completed state */
.sprint-card__cta--gold {
  background: linear-gradient(135deg, var(--figus-yellow-400) 0%, var(--figus-yellow-300) 100%);
  color: var(--ink-on-gold-deep);
  box-shadow:
    0 4px 16px -4px rgba(244, 179, 36, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.sprint-card__cta--gold:hover {
  background: linear-gradient(135deg, var(--figus-yellow-300) 0%, var(--figus-yellow-200) 100%);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sprint-card__head { animation: none; }
  .sprint-card__cta  { transition: none; }
  .sprint-card__cta:active { transform: none; }
}

/* ============================================================
   v109 — CUENTA REGRESIVA + ALBUM MOMENTUM
   Evolves #today-matches-section into a pre-tournament
   countdown card with four album-urgency states.
   Automatically switches to match rows on Jun 11.
   SW → figus-v109.
   ============================================================ */

/* ── Countdown header — state-differentiated gradient ── */
.hoy-cd-head {
  --hd-from: var(--figus-green-950, #072F17);
  --hd-to:   var(--figus-green-700);
  background: linear-gradient(135deg, var(--hd-from) 0%, var(--hd-to) 100%);
  padding: var(--s-4);
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  animation: hoy-cd-in 350ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 🔥 Almost there (miss ≤ 5) — fire: deep red → burnt amber */
.hoy-cd-head--hot  { --hd-from: #6b1d1d; --hd-to: #a34200; }

/* 👀 One left (miss == 1) — midnight navy → field green */
.hoy-cd-head--one  { --hd-from: #0e2050; --hd-to: #0b4520; }

/* 🏆 Completed pre-WC — dark amber → bright gold */
.hoy-cd-head--done { --hd-from: #5c3200; --hd-to: var(--figus-yellow-400); }

@keyframes hoy-cd-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Icon + titles ── */
.hoy-cd-icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.hoy-cd-titles { flex: 1; min-width: 0; }

.hoy-cd-title {
  font: 800 var(--fs-md) / var(--lh-tight) var(--font-display);
  color: var(--ink-on-color);
  letter-spacing: var(--tracking-tight);
}

/* Secondary line: countdown in album-first states */
.hoy-cd-sub {
  font: 600 var(--fs-sm) / var(--lh-snug) var(--font-body);
  color: rgba(255, 255, 255, 0.68);
  margin-top: 4px;
}

/* ── Body ── */
.hoy-cd-body {
  padding: var(--s-3) var(--s-4) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Prominent first line (e.g. "Prepárate para el kickoff ⚽") */
.hoy-cd-tagline {
  margin: 0;
  font: 700 var(--fs-sm) / var(--lh-snug) var(--font-body);
  color: var(--ink-2);
}

/* Supporting copy (album %, "Solo te faltan X figuritas.") */
.hoy-cd-copy {
  margin: 0;
  font: 600 var(--fs-sm) / var(--lh-base) var(--font-body);
  color: var(--ink-3);
}

/* ── Sticker chips (first 8 + optional "+N más") ── */
.hoy-cd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  margin-top: 2px;
}

.hoy-cd-chip {
  font: 700 var(--fs-xs) / 1 var(--font-mono);
  color: var(--ink-2);
  background: var(--figus-stone-100);
  border-radius: var(--r-chip);
  padding: 4px 8px;
  letter-spacing: 0.01em;
}

.hoy-cd-chip--more {
  font-weight: 600;
  color: var(--ink-4);
  background: none;
  padding-left: 2px;
}

/* ── Single sticker display (miss == 1) ── */
.hoy-cd-single {
  font: 800 var(--fs-xl) / 1 var(--font-display);
  color: var(--ink);
  text-align: center;
  padding: var(--s-2) 0;
  letter-spacing: var(--tracking-tight);
}

/* ── CTA button ── */
.hoy-cd-cta {
  width: 100%;
  padding: 13px var(--s-4);
  border: none;
  border-radius: var(--r-control);
  font: 700 var(--fs-sm) / 1 var(--font-body);
  cursor: pointer;
  background: var(--figus-stone-100);
  color: var(--ink-2);
  margin-top: var(--s-1);
  transition: background var(--t-fast), transform 80ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.hoy-cd-cta:hover  { background: var(--figus-stone-200); }
.hoy-cd-cta:active { transform: scale(0.98); transition: transform 60ms ease; }

/* ── Tappable card state (miss > 0) ── */
.hoy-cd-tappable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── Desktop: minor spacing adjustments ── */
@media (min-width: 768px) {
  .hoy-cd-head  { padding: var(--s-4) var(--s-5); }
  .hoy-cd-body  { padding: var(--s-3) var(--s-5) var(--s-5); }
  .hoy-cd-cta   { padding: 13px var(--s-5); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hoy-cd-head { animation: none; }
  .hoy-cd-cta  { transition: none; }
  .hoy-cd-cta:active { transform: none; }
}

/* ============================================================
   v110 — MOBILE FOLD OPTIMIZATION
   Task 1: Team selector already hidden (v96 — no change).
   Task 2: Countdown promoted above controls via flex order.
   Task 3: Album nav sheet — stronger hierarchy, emoji prefix.
   Task 4: Compact vertical chrome on mobile.
   Desktop layout untouched throughout.
   SW → figus-v110.
   ============================================================ */

@media (max-width: 767px) {

  /* ── Task 2: Flex reorder — countdown above controls ────────────
     #view-album becomes a flex column so CSS order can reposition
     children without touching the DOM (JS/a11y tree unchanged).
     DOM order stays: selector → lookup → controls → nearby →
     social-proof → today-matches → sprint-final → stats → grid.
     Visual order becomes: lookup → today-matches → controls → …  */
  #view-album {
    display: flex;
    flex-direction: column;
  }

  .team-selector-wrap    { order: 1;  } /* already hidden; harmless */
  #lookup-wrap           { order: 2;  }
  #today-matches-section { order: 3;  } /* ↑ promoted from position 6 */
  .controls              { order: 4;  }
  #nearby-entry-card     { order: 5;  }
  #social-proof-card     { order: 6;  }
  #sprint-final-section  { order: 7;  }
  .stats                 { order: 8;  }
  #grid                  { order: 9;  }
  #empty                 { order: 10; }
  .app-foot              { order: 20; } /* footer stays last */

  /* ── Task 4: Compact vertical chrome ───────────────────────────
     Shave 4px off lookup bottom gap and 4px off each card bottom
     margin. Keeps breathing room while surfacing stats sooner.   */
  .lookup-wrap  { margin-bottom: var(--s-2); }   /* 12px → 8px  */
  .hoy-card     { margin-bottom: var(--s-3); }   /* 16px → 12px */
  .sprint-card  { margin-bottom: var(--s-3); }   /* 16px → 12px */
}

/* ── Task 3: Album nav sheet — native list row feel ─────────────
   Applies at all breakpoints (sheet is mobile-only by component,
   but the class overrides are scoped to the element itself).
   Stronger group title · smaller muted codes · more row padding. */

/* More generous tap target + breathing room */
.album-nav__row {
  padding: 14px var(--s-4);
}

/* Stronger group title — from 600 to 700 weight */
.album-nav__label {
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--ink);           /* was ink-1; use full ink for contrast */
}

/* Codes clearly secondary — smaller + muted */
.album-nav__codes {
  font-size: var(--fs-xs);     /* 13px → 11px */
  color: var(--ink-4);         /* was ink-3; one step more muted */
  margin-top: var(--s-1);      /* 2px → 4px separation from title */
  letter-spacing: 0.01em;
}

/* Specials row: gold label stays warm */
.album-nav__row--specials .album-nav__label {
  color: var(--gold-2, #b45309);
}

/* ============================================================
   v111.1 — REPEATED STICKER COUNT BADGE (hardened)
   Positioned top-right inside the sticker tile, within the
   clip-path safe zone (clip cuts bottom-right corner only).
   States ≥ 2: shows ×1 … ×5 (or higher from imports/trades).
   JS manages .hidden + textContent on every state transition.

   Size/contrast lifted from v111 to be legible on iPhone:
   20px tall, 9px bold font, 2px white border for separation.
   ============================================================ */

.sticker__rep-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px;
  /* Warm amber on very-dark — high contrast against figus-green-800 */
  background: oklch(82% 0.18 75);
  color: oklch(12% 0.04 75);
  font-size: 9px;
  font-weight: 900;
  font-family: var(--font-display);
  letter-spacing: -0.03em;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
  line-height: 1;
  white-space: nowrap;
  /* 2px white border separates badge from sticker background */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

/* hidden attribute — belt-and-suspenders over UA stylesheet */
.sticker__rep-badge[hidden] {
  display: none !important;
}