/* Colores: res/values/colors.xml de PoliglotaApp (main, 2.2.0). El nombre Android va al lado. */
:root {
  --bg-daily: #fbf8ea;          /* bg_soft_gold_2 — fondo del modo diario */
  --bg-app: #ede6fb;            /* bg_purple */
  --purple: #432969;            /* new_purple_theme */
  --purple-stroke: #bba9f5;     /* stroke_purple */
  --gold: #e4c161;              /* gold_html */
  --gold-cta: #f0c84b;          /* gold_html_cta */
  --gold-soft: #fff5c0;         /* bg_soft_gold */
  --key-daily: #feea98;         /* key_bg_daily */
  --key-special: #efc02e;       /* keyboard_special_gold */
  --cell-bg: #f5f5f5;           /* game_cell_bg */
  --cell-correct: #5f8f4e;      /* game_cell_correct_daily */
  --cell-present: #ffc680;      /* game_cell_present */
  --cell-absent: #787c7e;       /* game_cell_absent */
  --key-correct-stroke: #3d653d;
  --key-present-bg: #eeb571;
  --key-present-stroke: #c88a42;
  --key-absent-stroke: #5a5a5a;
  --card: #f5f5f5;              /* soft_white_menu_cards */
  --text: #212121;              /* text_letters_gray */
  --muted: #5e526c;
  --separator: #e0e0e0;
  --shadow: 0 6px 14px rgba(67, 41, 105, 0.14);
  --tile: 56px;                 /* lo recalcula app.js según el alto disponible */
  --tile-gap: 6px;
  --key-h: 54px;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg-daily);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

/* ---------- Barra del sitio ---------- */
.site-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 16px;
  background: rgba(251, 248, 234, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(228, 193, 97, 0.35);
}
.site-bar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--purple);
  font-weight: 800;
  font-size: 18px;
}
.site-bar__brand img { border-radius: 9px; }
.site-bar__nav { display: flex; gap: 4px; margin-left: 8px; }
.site-bar__nav a {
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}
.site-bar__nav a[aria-current="page"] { background: var(--gold-soft); color: var(--purple); }
.site-bar__kids { color: #c2548c !important; }
.flag-button {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  background: #fff;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  font-weight: 800;
  color: var(--purple);
}
.flag-button img { width: 30px; height: 20px; object-fit: cover; border-radius: 3px; }
/* En la página del juego la bandera vive en la barra del juego; la del sitio sería un duplicado. */
.site-bar .flag-button { display: none; }

/* ---------- Distribución ---------- */
.daily-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  padding: 0 8px;
}
.rail { display: none; }
.game-column {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 56px);
}

@media (min-width: 1080px) {
  .daily-layout {
    grid-template-columns: 280px minmax(0, 500px) 280px;
    justify-content: center;
    align-items: start;
    gap: 40px;
    padding: 0 24px;
  }
  .rail { display: grid; gap: 18px; position: sticky; top: 80px; margin-top: 24px; width: 100%; }
  .game-column { min-height: calc(100dvh - 56px); }
}

/* ---------- Barra del juego (misma lectura que la toolbar in-game de Android) ---------- */
.game-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 6px 10px;
}
.round-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: none;
  background: #fff;
  border: 1.5px solid var(--purple);
  border-radius: 50%;
}
.round-button img { width: 26px; height: 26px; }
.toolbar-spacer { width: 44px; flex: none; }
/* Monedas del día (25, lo justo para una pista). */
.coin-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 44px;
  height: 32px;
  padding: 0 10px 0 6px;
  background: #fff;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  color: var(--purple);
  font-size: 14px;
}
.coin-pill img { width: 20px; height: 20px; }

/* Fila fina bajo la barra del juego: la fecha a la izquierda y los cinco retos a la derecha. */
.sub-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 8px 10px; }
.date-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 7px;
  background: var(--gold-soft);
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  color: var(--purple);
  white-space: nowrap;
}
.date-chip__flag { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(46, 26, 79, 0.18); }
.lang-strip { display: flex; gap: 4px; }
/* En escritorio los idiomas ya están en el carril izquierdo (va después de la regla base a propósito). */
@media (min-width: 1080px) { .lang-strip { display: none; } }
.lang-chip {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 8px;
  opacity: 0.5;
  transition: opacity 150ms;
}
.lang-chip:hover { opacity: 0.85; }
.lang-chip img { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(46, 26, 79, 0.18); } /* la gallega es casi blanca */
.lang-chip[aria-current="true"] { opacity: 1; border-color: var(--gold); background: #fff; }
.lang-chip__mark { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--bg-daily); display: none; }
.lang-chip__mark.is-won { display: block; background: var(--cell-correct); }
.lang-chip__mark.is-lost { display: block; background: var(--cell-absent); }
.lang-chip__mark.is-playing { display: block; background: var(--cell-present); }


/* Fila del librito: encima del teclado, a la izquierda (Keyboard.createLegendButtonReturningView). */
.keyboard-tools { display: flex; justify-content: space-between; padding: 0 4px; margin-bottom: -4px; }
/* Pista: esquina opuesta al librito, dorada y con el coste (Keyboard.createHintButtonReturningView). */
.hint-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 12px;
  background: var(--gold-cta, #f0c84b);
  border: 2px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(67, 41, 105, 0.12);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(67, 41, 105, 0.35);
  cursor: pointer;
}
.hint-button img { width: 22px; height: 22px; }
.hint-button .hint-button__coin { width: 16px; height: 16px; }
.hint-button.is-poor { opacity: 0.55; }
.tile.is-hint { background: var(--cell-correct); border-color: var(--gold); color: #fff; opacity: 0.55; }
.legend-button {
  width: 46px;
  height: 40px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--gold);
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(67, 41, 105, 0.12);
}
.legend-button img { width: 28px; height: 28px; }

.rail-title { margin: 0 0 6px; font-size: 18px; color: var(--purple); }
.rail-lead { margin: 0 0 16px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.date-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 10px;
  background: #fff;
  border: 1.5px solid var(--purple);
  border-radius: 999px;
  min-width: 0;
}
.date-pill img { width: 26px; height: 26px; flex: none; }
.date-pill h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--purple);
  white-space: nowrap;
}
.date-pill__date {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- Tablero (Grid.java) ---------- */
.play-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.play-area[hidden] { display: none; }
.board-wrap { position: relative; display: grid; place-items: center; flex: 1; }
/* Con ratón (escritorio) no hace falta pegar el teclado abajo como en el móvil: tablero arriba
   y teclado justo debajo, sin huecos. */
@media (hover: hover) and (pointer: fine) {
  .game-column { min-height: 0; }
  .play-area { flex: none; justify-content: flex-start; gap: 18px; padding-top: 6px; }
  .board-wrap { flex: none; }
}
.board {
  display: grid;
  grid-template-columns: repeat(5, var(--tile));
  grid-auto-rows: var(--tile);
  gap: var(--tile-gap);
}
.tile {
  display: grid;
  place-items: center;
  background: var(--cell-bg);
  border: 1.5px solid var(--gold);
  border-radius: calc(var(--tile) * 0.2);
  font-size: calc(var(--tile) * 0.52);
  font-weight: 400;
  color: var(--text);
  text-transform: uppercase;
  user-select: none;
}
.tile.is-current { border-width: 3px; border-color: var(--gold-cta); }
.tile.is-row-start { border-width: 3px; border-color: var(--cell-present); }
.tile.is-filled { animation: pop 110ms ease-out; }
.tile.correct { background: var(--cell-correct); }
.tile.present { background: var(--cell-present); }
.tile.absent { background: var(--cell-absent); }
.tile.is-revealing { animation: reveal 260ms ease-out both; animation-delay: var(--delay, 0ms); }
.row-shake { animation: shake 500ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }

@keyframes pop { 50% { transform: scale(1.08); } }
@keyframes reveal { 0% { transform: scale(0.9); filter: brightness(1.15); } 100% { transform: none; } }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(-6px); }
  20%, 40%, 60%, 80% { transform: translateX(6px); }
}

.toast {
  position: absolute;
  top: 6px;
  z-index: 5;
  padding: 9px 16px;
  background: #3c3c3c;
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 150ms, transform 150ms;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: none; }

/* ---------- Teclado (Keyboard.java, variante diaria) ---------- */
.keyboard { display: grid; gap: 7px; padding: 0 2px; }
.keyboard__row { display: flex; justify-content: center; gap: 5px; }
.key {
  flex: 1 1 0;
  max-width: 46px;
  height: var(--key-h);
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--key-daily);
  border: 1px solid rgba(228, 193, 97, 0.55);
  border-radius: 7px;
  box-shadow: 0 2px 3px rgba(67, 41, 105, 0.12);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  touch-action: manipulation;
}
.key:active { transform: translateY(1px); }
.key--special {
  flex-grow: 1.5;
  max-width: 69px;
  background: var(--key-special);
  border: 2px solid var(--gold);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.key--special svg { width: 26px; height: 26px; }
.key.correct { background: var(--cell-correct); border-color: var(--key-correct-stroke); color: var(--text); }
.key.present { background: var(--key-present-bg); border-color: var(--key-present-stroke); }
.key.absent { background: var(--cell-absent); border-color: var(--key-absent-stroke); }

/* ---------- Pantalla final (activity_dailyword_ending.xml) ---------- */
.ending { display: grid; gap: 14px; padding: 18px 4px 28px; animation: slide-in 320ms ease-out; }
.ending[hidden] { display: none; }
@keyframes slide-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

.ending__header {
  position: relative;
  margin-top: 46px;
  padding: 26px 18px 18px;
  background: var(--purple);
  color: #fff;
  text-align: center;
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.ending__mascot { position: absolute; left: -2px; top: -66px; width: 132px; }
.ending__header h2 { margin: 0; font-size: 26px; font-weight: 800; text-transform: uppercase; }
.ending__header p { margin: 6px 0 0; font-size: 16px; }

.ending-card {
  padding: 16px 18px;
  background: var(--card);
  border: 2px solid var(--gold);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.ending-card--word { text-align: center; }
.ending-card--word p { margin: 0 0 4px; font-size: 18px; }
.ending-card--word strong { font-size: 34px; font-weight: 800; color: var(--purple); letter-spacing: 0.02em; }
.ending-card--meaning h3 { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--separator); font-size: 19px; }
.ending-card__muted { margin: 0 0 10px; color: var(--muted); }
.ending-card__link { font-weight: 800; color: var(--purple); }

.ending-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ending-card--stat {
  display: grid;
  align-content: space-between;
  gap: 10px;
  padding: 12px 8px;
  text-align: center;
  font-weight: 700;
  font-size: 13.5px;
}
.ending-card--stat strong { display: flex; align-items: center; justify-content: center; gap: 6px; }
.ending-card--stat img { width: 24px; height: 24px; }
.ending-card--stat b { font-size: 24px; color: var(--purple); }

.ending__status {
  justify-self: center;
  margin: 2px 0;
  padding: 10px 26px;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  font-weight: 800;
  color: var(--purple);
}
.ending__actions { display: grid; gap: 10px; }

.gold-button, .outline-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 17px;
  color: var(--purple);
  text-decoration: none;
}
.gold-button { background: var(--gold-cta); border: 2px solid var(--purple); }
.gold-button--small { min-height: 42px; font-size: 15px; }
.outline-button { background: transparent; border: 2px solid var(--purple); }
.back-to-result { margin: 0 4px 18px; }
.back-to-result[hidden] { display: none; }

.next-languages { text-align: center; }
.next-languages p { margin: 8px 0; font-weight: 700; color: var(--muted); }
.next-languages__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.next-languages__list button {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  background: #fff;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  font-weight: 800;
  color: var(--purple);
}
.next-languages__list img { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; }
.next-languages__list .is-done { opacity: 0.55; }
.next-languages__countdown { margin: 4px 0 0; text-align: center; font-size: 14px; font-weight: 700; color: var(--muted); }

/* ---------- Carriles laterales (escritorio) ---------- */
.card { padding: 18px; background: #fff; border: 1.5px solid rgba(228, 193, 97, 0.7); border-radius: 14px; box-shadow: var(--shadow); }
.card--soft { background: var(--card); }
.card__eyebrow { margin: 0 0 12px; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.language-status { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.language-status button {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 10px;
  text-align: left;
}
.language-status button:hover { background: #fff; }
.language-status button[aria-current="true"] { background: var(--gold-soft); border-color: var(--gold); }
.language-status img { grid-row: span 2; width: 34px; height: 23px; object-fit: cover; border-radius: 3px; }
.language-status strong { font-size: 13px; color: var(--purple); }
.language-status span { font-size: 12.5px; color: var(--muted); }
.language-status .is-won { color: var(--cell-correct); font-weight: 700; }
.language-status .is-lost { color: #9a5a17; font-weight: 700; }

.today-card { display: grid; gap: 6px; padding: 12px; }
.today-card__row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  background: var(--card);
  border: 0;
  border-radius: 9px;
  color: var(--purple);
  font: inherit;
  text-align: left;
}
.today-card__row[hidden] { display: none; }
.today-card__row img { width: 28px; height: 28px; }
.today-card__row p { margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.today-card__row b { font-size: 18px; font-weight: 900; }
.today-card .nowrap { white-space: nowrap; }
.today-card__streak { cursor: pointer; }
.today-card__streak:hover { background: var(--gold-soft); }
.today-card__more { font-size: 20px; font-weight: 800; color: var(--muted); }

/* Con los carriles visibles, el Google Play de la cabecera se oculta porque ya está en la tarjeta de
   la app. Se oculta sin quitar su hueco para que el resto de la cabecera no se mueva entre páginas. */
@media (min-width: 1080px) {
  .site-header .store-link { visibility: hidden; }
}

.promo-card { position: relative; padding-top: 58px; text-align: left; }
.promo-card__mascot { position: absolute; top: -34px; left: 50%; width: 120px; transform: translateX(-50%); }
.promo-card h2 { margin: 0 0 6px; font-size: 18px; color: var(--purple); text-align: center; }
.promo-card p { margin: 0 0 12px; font-size: 14px; color: var(--muted); text-align: center; }
.promo-card__modes { display: grid; gap: 6px; margin-bottom: 14px; }
/* Los tres modos iguales, como las tarjetas blancas del menú de la app: icono en una caja fija. */
.mode-chip {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--card);
  border-radius: 9px;
  color: var(--purple);
}
.mode-chip__icon { width: 24px; height: 24px; }
.mode-chip__icon--text { display: grid; place-items: center; font-size: 22px; font-weight: 900; line-height: 1; }
.mode-chip__text { display: grid; gap: 1px; min-width: 0; }
.mode-chip__text strong { font-size: 13px; font-weight: 800; text-transform: uppercase; }
.mode-chip__text small { font-size: 12px; color: var(--muted); }

.kids-teaser { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; text-decoration: none; background: #fdf8ff; border-color: #e4daf0; }
.kids-teaser img { width: 76px; height: 76px; border-radius: 12px; object-fit: cover; }
.kids-teaser h2 { margin: 0 0 3px; font-size: 16px; color: var(--purple); }
.kids-teaser p { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.kids-teaser__cta { font-weight: 800; font-size: 13px; color: #c2548c; }

/* ---------- Bloque indexable bajo el juego ---------- */
.seo-block {
  max-width: 640px;
  margin: 24px auto 90px;
  padding: 0 20px;
  color: var(--muted);
}
.seo-block h2 { color: var(--purple); font-size: 20px; }
.seo-block h3 { color: var(--purple); font-size: 16px; }
.seo-block__langs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.seo-block__langs a { display: inline-block; padding: 6px 12px; border: 1px solid var(--gold); border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--purple); background: #fff; }

/* ---------- Pie (igual que en la portada) ---------- */
.site-foot { display: grid; gap: 10px; justify-items: center; padding: 22px 16px 34px; text-align: center; font-size: 14px; color: var(--muted); border-top: 1px solid rgba(228, 193, 97, 0.35); }
.site-foot p { margin: 0; }
.site-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.site-foot a { color: var(--purple); font-weight: 700; text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.seo-block { margin-bottom: 30px !important; }

/* ---------- Diálogos ---------- */
.sheet {
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100dvh - 40px);
  padding: 22px;
  background: var(--card);
  border: none;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(20, 10, 40, 0.3);
  color: var(--text);
}
.sheet::backdrop { background: rgba(35, 25, 50, 0.55); }
.sheet h2 { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--separator); color: var(--purple); font-size: 22px; }
.sheet h3 { margin: 18px 0 6px; color: var(--purple); font-size: 16px; }
.sheet p { margin: 8px 0; line-height: 1.4; }
.sheet .gold-button { width: 100%; margin-top: 16px; }
.language-options { display: grid; gap: 10px; }
.language-options button {
  display: grid;
  grid-template-columns: 1fr auto 58px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 18px;
  background: #d4c9f6;
  border: 2px solid transparent;
  border-radius: 18px;
  font-weight: 900;
  text-align: left;
}
.language-options button[aria-current="true"] { background: var(--gold-soft); border-color: var(--gold); }
.language-options small { font-weight: 700; color: var(--muted); }
.language-options img { width: 58px; height: 38px; object-fit: cover; border-radius: 4px; }
.mini-row { display: flex; gap: 5px; margin: 6px 0 10px; }
.mini-row .tile { --tile: 38px; width: var(--tile); height: var(--tile); }
.legend__line { padding-left: 12px; border-left: 5px solid; }
.legend__line--correct { border-color: var(--cell-correct); }
.legend__line--present { border-color: var(--cell-present); }
.legend__line--absent { border-color: var(--cell-absent); }
/* Solo con teclado físico: en el móvil no tiene sentido. */
.legend__keys { display: none; padding: 10px 12px; background: var(--gold-soft); border-radius: 9px; text-align: center; }
.legend__keys strong { display: block; font-size: 16px; color: var(--purple); }
.legend__keys span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
/* Aviso en el hueco entre el librito y la pista: no añade altura a la pantalla. */
.keyboard-hint { display: none; flex: 1; min-width: 0; align-self: center; margin: 0 10px; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .legend__keys, .keyboard-hint { display: block; } }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats-grid div { padding: 10px 6px; background: #fff; border-radius: 10px; text-align: center; font-size: 12.5px; }
.stats-grid b { display: block; font-size: 24px; color: var(--purple); }
.distribution { display: grid; gap: 5px; }
.distribution div { display: grid; grid-template-columns: 14px 1fr; gap: 8px; align-items: center; font-weight: 800; }
.distribution span { display: block; min-width: 26px; padding: 3px 8px; background: #f6e2a6; border-radius: 6px; text-align: right; font-size: 13px; }
.distribution .is-today span { background: var(--gold-cta); }
.stats__note { font-size: 13px; color: var(--muted); }

/* ---------- Confeti ---------- */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 40; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate3d(var(--dx), 105vh, 0) rotate(var(--rot)); } }

@media (prefers-reduced-motion: reduce) {
  .tile.is-filled, .tile.is-revealing, .row-shake, .ending { animation: none !important; }
  .confetti { display: none; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 560px) {
  .site-bar { gap: 8px; padding: 0 10px; }
  .site-bar__brand span { display: none; }
  .site-bar__nav { margin-left: 0; }
  .site-bar__nav a { padding: 7px 9px; font-size: 13px; }
  .date-pill { padding: 5px 12px 5px 8px; gap: 6px; }
  .date-pill h1 { font-size: 13px; }
  .date-pill__date { font-size: 12px; }
  .ending-card--stat { font-size: 12px; }
}
@media (max-width: 370px) {
  .date-pill__date { display: none; }
}

/* Botón amarillo de Google Play con el mismo icono que la cabecera. */
.gold-button--store { display: flex; align-items: center; justify-content: center; gap: 8px; background: transparent; }
.gold-button--store:hover { background: rgba(67, 41, 105, 0.06); }
.gold-button--store img { width: 26px; height: 26px; flex: none; }