/* ==========================================================================
   Veduka Juegos — marco, botones, casillas, figuras y mecánicas.
   Implementa los tableros 02–10 del sistema visual.
   Todo con tokens: en este archivo no hay un solo hex suelto.
   ========================================================================== */

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

.vj-app {
  margin: 0;
  min-height: var(--vj-app-min-h, 100svh);
  background: var(--vj-surface-page);   /* la página SIEMPRE es crema */
  color: var(--vj-ink);
  font-family: var(--vj-font-body);
  font-size: var(--vj-text-body);
  line-height: var(--vj-leading-normal);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  flex-direction: column;
}

.vj-app :where(h1, h2, h3, p) { margin: 0; }
.vj-app :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* El anillo de foco del tablero 01, idéntico en todo lo enfocable. */
.vj-app :focus-visible {
  outline: 4px solid var(--vj-purple-600);
  outline-offset: 4px;
  box-shadow: 0 0 0 12px rgba(125, 85, 144, 0.2);
}

.vj-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Tipografía ---------------------------------------------------------- */
.vj-display { font-family: var(--vj-font-display); font-size: var(--vj-text-display); font-weight: var(--vj-weight-bold); line-height: var(--vj-leading-tight); letter-spacing: -0.02em; }
.vj-title   { font-family: var(--vj-font-display); font-size: var(--vj-text-title);   font-weight: var(--vj-weight-semibold); line-height: var(--vj-leading-snug); text-wrap: balance; }
.vj-body    { font-size: var(--vj-text-body); font-weight: var(--vj-weight-bold); }
.vj-meta    { font-size: var(--vj-text-meta); font-weight: var(--vj-weight-black); text-transform: uppercase; letter-spacing: 0.14em; }
.vj-note    { font-size: var(--vj-text-note); color: var(--vj-ink-muted); font-weight: var(--vj-weight-regular); }
/* Caveat: una línea, nunca instrucción, nunca mayúsculas. */
.vj-accent  { font-family: var(--vj-font-script); font-size: var(--vj-text-accent); font-weight: var(--vj-weight-bold); color: var(--vj-purple-600); text-transform: none; }

/* ==========================================================================
   Botones — sombra sólida abajo que se acorta al presionar, con la etiqueta
   bajando los mismos píxeles.
   ========================================================================== */
.vj-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--vj-space-3);
  min-height: var(--vj-btn-h);
  min-width: var(--vj-touch-min);
  padding: 0 var(--vj-space-8);
  font-family: var(--vj-font-display);
  font-size: var(--vj-text-button);
  font-weight: var(--vj-weight-semibold);
  line-height: 1;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  border-radius: var(--vj-radius-pill);
  border: 0;
  transition: transform var(--vj-duration-fast) var(--vj-ease),
              box-shadow var(--vj-duration-fast) var(--vj-ease),
              background-color var(--vj-duration-fast) var(--vj-ease);
}

/* Hover solo en escritorio: en táctil el estado presionado es el único feedback. */
@media (hover: hover) and (pointer: fine) {
  .vj-btn:hover:not([disabled]) { transform: translateY(-2px); }
}

.vj-btn:active:not([disabled]) { transform: translateY(4px); }

.vj-btn--primary {
  background: var(--vj-purple-600);       /* nunca purple-500 con texto blanco */
  color: #FFFFFF;
  box-shadow: var(--vj-shadow-sticker);
}
@media (hover: hover) and (pointer: fine) {
  .vj-btn--primary:hover:not([disabled]) { background: var(--vj-purple-800); box-shadow: 0 8px 0 rgba(62,54,70,0.16), var(--vj-shadow-lift); }
}
.vj-btn--primary:active:not([disabled]) { box-shadow: 0 2px 0 rgba(62,54,70,0.16); }

.vj-btn--secondary {
  background: var(--vj-surface-card);
  color: var(--vj-purple-600);
  border: 4px solid var(--vj-purple-600);
  box-shadow: var(--vj-shadow-sticker);
}
@media (hover: hover) and (pointer: fine) {
  .vj-btn--secondary:hover:not([disabled]) { background: var(--vj-purple-50); }
}
.vj-btn--secondary:active:not([disabled]) { box-shadow: 0 2px 0 rgba(62,54,70,0.16); }

.vj-btn--hint {
  background: var(--vj-amber);
  color: var(--vj-ink-on-accent);         /* el amarillo siempre lleva tinta oscura */
  box-shadow: var(--vj-shadow-sticker);
}
.vj-btn--hint:active:not([disabled]) { box-shadow: 0 2px 0 rgba(62,54,70,0.16); }

/* Icono redondo 80×80 — repetir narración y navegación. */
.vj-btn--icon {
  width: var(--vj-touch-min); height: var(--vj-touch-min);
  min-height: var(--vj-touch-min);
  padding: 0;
  border-radius: var(--vj-radius-circle);
  background: var(--vj-purple-100);
  color: var(--vj-purple-600);
  box-shadow: var(--vj-shadow-tile);
}
@media (hover: hover) and (pointer: fine) {
  .vj-btn--icon:hover:not([disabled]) { background: var(--vj-purple-300); }
}
.vj-btn--icon:active:not([disabled]) { transform: translateY(2px); box-shadow: none; }
.vj-btn--icon svg { width: 38px; height: 38px; }

/* Deshabilitado: conserva su tamaño para no mover el resto de la pantalla. */
.vj-btn[disabled] {
  background: var(--vj-surface-sunken);
  color: var(--vj-ink-subtle);
  border-color: transparent;
  box-shadow: none;
  cursor: default;
  transform: none;
}

/* ==========================================================================
   Marco de actividad
   ========================================================================== */
.vj-topbar {
  height: var(--vj-topbar-h);
  flex: none;
  display: flex; align-items: center; gap: var(--vj-space-6);
  padding: 0 var(--vj-space-7);
  background: var(--vj-surface-card);
  border-bottom: 2px solid var(--vj-border-soft);
}

.vj-progress { display: flex; flex-direction: column; gap: var(--vj-space-2); min-width: 0; }
.vj-progress__label { color: var(--vj-ink-muted); }
/* Barra de 10 segmentos: se lee como progreso, no como cuenta atrás. */
.vj-progress__track { display: flex; gap: var(--vj-space-1); }
.vj-progress__seg {
  width: 26px; height: 12px;
  border-radius: var(--vj-radius-pill);
  background: var(--vj-surface-sunken);
}
.vj-progress__seg--done { background: var(--vj-purple-500); }

.vj-stars { display: flex; align-items: center; gap: var(--vj-space-2); margin-left: auto; }
.vj-star { width: 34px; height: 34px; color: var(--vj-amber); }
.vj-star--empty { color: var(--vj-border); }
.vj-star--hinted { color: var(--vj-amber); opacity: 0.55; }   /* la pista no quita estrellas */
.vj-stars__count { font-family: var(--vj-font-display); font-size: var(--vj-text-button); font-weight: var(--vj-weight-bold); color: var(--vj-ink); }

.vj-topbar__tools { display: flex; align-items: center; gap: var(--vj-space-3); }

/* Área central: libre de adornos, el contenido es el juego. */
.vj-stage {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--vj-space-8);
  padding: var(--vj-space-8) var(--vj-space-7);
  text-align: center;
}
.vj-prompt { display: flex; align-items: center; gap: var(--vj-space-4); justify-content: center; }

/* La fila inferior tiene una sola acción. */
.vj-actionbar {
  flex: none;
  display: flex; align-items: center; justify-content: center; gap: var(--vj-space-4);
  padding: var(--vj-space-5) var(--vj-space-7) var(--vj-space-8);
}

/* ==========================================================================
   Casilla — el estado vive aquí, nunca en la figura.
   Cada estado trae además un símbolo: indispensable para daltonismo.
   ========================================================================== */
.vj-tile {
  position: relative;
  display: grid; place-items: center;
  padding: var(--vj-space-4);
  background: var(--vj-surface-card);
  border: 4px solid transparent;
  border-radius: var(--vj-radius-xl);
  box-shadow: var(--vj-shadow-tile);
  transition: transform var(--vj-duration-fast) var(--vj-ease-bounce),
              box-shadow var(--vj-duration-fast) var(--vj-ease),
              border-color var(--vj-duration-fast) var(--vj-ease),
              background-color var(--vj-duration-fast) var(--vj-ease);
}
@media (hover: hover) and (pointer: fine) {
  /* El tema pinta de morado cualquier button:hover; una casilla morada se lee
     como "elegida" y confunde. La casilla conserva su fondo al pasar el ratón:
     la selección se marca solo con borde y palomita. */
  .vj-tile--pick:hover {
    transform: translateY(-3px);
    box-shadow: var(--vj-shadow-md);
    background: var(--vj-surface-card);
  }
  .vj-tile--pick[data-state="correct"]:hover { background: var(--vj-ok-tint); }
  .vj-tile--pick[data-state="wrong"]:hover   { background: var(--vj-retry-tint); }
}
.vj-tile--pick { cursor: pointer; min-width: var(--vj-touch-min); min-height: var(--vj-touch-min); }

.vj-tile__mark {
  position: absolute; top: -14px; right: -14px;
  width: 44px; height: 44px;
  display: none; place-items: center;
  border-radius: var(--vj-radius-circle);
  font-family: var(--vj-font-display);
  font-size: 24px; font-weight: var(--vj-weight-bold);
  color: #FFFFFF;
  box-shadow: var(--vj-shadow-md);
}

.vj-tile[data-state="selected"] { border-color: var(--vj-purple-600); transform: translateY(-3px); }
.vj-tile[data-state="selected"] .vj-tile__mark { display: grid; background: var(--vj-purple-600); }

.vj-tile[data-state="correct"] { border-color: var(--vj-ok); background: var(--vj-ok-tint); }
.vj-tile[data-state="correct"] .vj-tile__mark { display: grid; background: var(--vj-ok-ink); }
.vj-tile[data-state="correct"] { animation: vj-pop var(--vj-duration-slow) var(--vj-ease-bounce); }

/* La opción equivocada se queda en su sitio: nada se tacha ni desaparece. */
.vj-tile[data-state="wrong"] { border-color: var(--vj-retry); background: var(--vj-retry-tint); }
.vj-tile[data-state="wrong"] .vj-tile__mark { display: grid; background: var(--vj-retry-ink); }

/* La pista atenúa lo que no cabe, sin ocultarlo. */
.vj-tile[data-state="dimmed"] { opacity: 0.4; }

/* Hueco de la secuencia: punteado y lila, se ve sin entender la instrucción.
   Mide exactamente lo mismo que una casilla con figura, para que la fila no
   se desnivele: figura + relleno + borde. */
.vj-sequence .vj-tile--blank {
  width: calc(var(--vj-shape-lg) + 2 * var(--vj-space-4) + 8px);
  height: calc(var(--vj-shape-lg) + 2 * var(--vj-space-4) + 8px);
}
.vj-tile--blank {
  background: var(--vj-lilac-tint);
  border: 4px dashed var(--vj-lilac);
  box-shadow: none;
  color: var(--vj-lilac-ink);
  font-family: var(--vj-font-display);
  font-size: var(--vj-text-title);
}

@keyframes vj-pop {
  0%   { transform: scale(0.86); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ==========================================================================
   Figuras — siete formas por CSS, sin imágenes.
   Todas en una caja cuadrada del mismo tamaño y con peso visual parecido.
   ========================================================================== */
.vj-shape, .vj-art {
  /* Sin display propio, un <span> suelto queda en línea y colapsa a 0x0:
     solo se veía dentro de casillas porque esas son contenedores grid. */
  display: inline-block;
  vertical-align: middle;
  width: var(--vj-shape-md); height: var(--vj-shape-md);
  flex: none;
}
.vj-shape { background: var(--vj-c); }

/* Dibujo propio: el SVG es la máscara y el color lo pone la paleta, así que
   un solo archivo sirve para los seis colores. */
.vj-art {
  background-color: var(--vj-c);
  -webkit-mask: var(--vj-art-src) center / contain no-repeat;
  mask: var(--vj-art-src) center / contain no-repeat;
}

.vj-shape--xs, .vj-art--xs { width: var(--vj-shape-xs); height: var(--vj-shape-xs); }
.vj-shape--sm, .vj-art--sm { width: var(--vj-shape-sm); height: var(--vj-shape-sm); }
.vj-shape--lg, .vj-art--lg { width: var(--vj-shape-lg); height: var(--vj-shape-lg); }
.vj-shape--xl, .vj-art--xl { width: var(--vj-shape-xl); height: var(--vj-shape-xl); }

.vj-shape--circle   { border-radius: var(--vj-radius-circle); }
.vj-shape--square   { border-radius: var(--vj-radius-sm); }
.vj-shape--dot      { border-radius: var(--vj-radius-circle); transform: scale(0.46); }
/* Triángulo y rombo se recortan al 96% para que sus puntas no toquen el borde. */
.vj-shape--triangle { clip-path: polygon(50% 4%, 96% 92%, 4% 92%); }
.vj-shape--diamond  { clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%); }
.vj-shape--star     { clip-path: polygon(50% 2%, 61% 36%, 97% 36%, 68% 58%, 79% 92%, 50% 71%, 21% 92%, 32% 58%, 3% 36%, 39% 36%); }
.vj-shape--arrow    { clip-path: polygon(4% 32%, 58% 32%, 58% 8%, 96% 50%, 58% 92%, 58% 68%, 4% 68%); }

/* ==========================================================================
   Mecánicas
   ========================================================================== */
/* a · Secuencia — máximo 5 casillas, máximo 3 opciones. */
.vj-sequence { display: flex; align-items: center; justify-content: center; gap: var(--vj-space-4); flex-wrap: wrap; }
.vj-options  { display: flex; align-items: center; justify-content: center; gap: var(--vj-space-6); flex-wrap: wrap; }

/* b · Cuál no pertenece — 4 a 6 elementos. */
.vj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--vj-space-6); max-width: 780px; width: 100%; }

/* c · Clasificar — arrastrar o tocar-y-tocar, mismo aspecto. */
.vj-baskets { display: flex; gap: var(--vj-space-6); justify-content: center; flex-wrap: wrap; }
.vj-basket {
  display: flex; flex-direction: column; align-items: center; gap: var(--vj-space-3);
  min-width: 190px; min-height: 190px;
  padding: var(--vj-space-5);
  background: var(--vj-c-tint);
  border: 4px solid transparent;
  border-radius: var(--vj-radius-2xl);
  color: var(--vj-c-ink);
}
.vj-basket__label {
  font-family: var(--vj-font-display); font-size: var(--vj-text-button);
  /* El tema pone versalitas en etiquetas: aquí no. */
  text-transform: none; letter-spacing: normal; font-weight: var(--vj-weight-semibold);
}
/* La figura manda: la etiqueta es para la maestra. */
.vj-basket__icon { opacity: 0.85; }
/* La cesta bajo el dedo se rellena y engorda su borde. */
.vj-basket[data-state="active"] { border-color: var(--vj-c-ink); border-width: 6px; background: var(--vj-surface-card); }
@media (hover: hover) and (pointer: fine) {
  .vj-basket:hover { background: var(--vj-c-tint); }
  .vj-basket[data-state="active"]:hover { background: var(--vj-surface-card); }
}
/* La figura levantada se inclina y crece 8%. */
.vj-lifted { transform: rotate(-6deg) scale(1.08); box-shadow: var(--vj-shadow-lift); }
/* Tocar la figura la deja con anillo morado, esperando la cesta. */
.vj-ring { box-shadow: 0 0 0 6px var(--vj-purple-600); border-radius: var(--vj-radius-xl); }

/* d · Emparejar — dos columnas, máximo tres pares. */
.vj-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--vj-space-6) var(--vj-space-9); max-width: 720px; width: 100%; }
.vj-match__col { display: flex; flex-direction: column; gap: var(--vj-space-5); }
.vj-match__link { width: 100%; height: 6px; border-radius: var(--vj-radius-pill); background: var(--vj-border); }
.vj-match__link[data-state="joined"] { background: var(--vj-c); }

/* ==========================================================================
   Retroalimentación — nada bloquea el paso.
   ========================================================================== */
.vj-feedback {
  display: flex; align-items: center; gap: var(--vj-space-4);
  padding: var(--vj-space-5) var(--vj-space-7);
  border-radius: var(--vj-radius-2xl);
  background: var(--vj-surface-card);
  box-shadow: var(--vj-shadow-md);
  font-family: var(--vj-font-display);
  font-size: var(--vj-text-button);
}
.vj-feedback__icon {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--vj-radius-circle);
  color: #FFFFFF; font-size: 30px;
}
.vj-feedback--ok    { background: var(--vj-ok-tint);    color: var(--vj-ok-ink); }
.vj-feedback--ok    .vj-feedback__icon { background: var(--vj-ok-ink); }
.vj-feedback--retry { background: var(--vj-retry-tint); color: var(--vj-retry-ink); }
.vj-feedback--retry .vj-feedback__icon { background: var(--vj-retry-ink); }
.vj-feedback--hint  { background: var(--vj-hint-tint);  color: var(--vj-hint-ink); }
.vj-feedback--hint  .vj-feedback__icon { background: var(--vj-hint-ink); }
.vj-feedback__sub { display: block; font-family: var(--vj-font-body); font-size: var(--vj-text-body); font-weight: var(--vj-weight-bold); opacity: 0.85; }

/* ==========================================================================
   Celular vertical
   ========================================================================== */
@media (max-width: 640px) {
  :root {
    --vj-topbar-h: 88px;
    --vj-btn-h: 76px;
    --vj-text-title: 26px;
    --vj-text-display: 38px;
    --vj-text-button: 20px;
    /* Se encogen las variables, no las clases, para que los calc cuadren. */
    --vj-shape-md: 64px;
    --vj-shape-lg: 92px;
    --vj-shape-xl: 128px;
  }
  .vj-topbar { padding: 0 var(--vj-space-4); gap: var(--vj-space-4); }
  .vj-progress__seg { width: 14px; height: 10px; }
  .vj-star { width: 26px; height: 26px; }
  .vj-stage { padding: var(--vj-space-6) var(--vj-space-4); gap: var(--vj-space-6); }
  .vj-actionbar { padding: var(--vj-space-4); }
  .vj-btn { width: 100%; max-width: 420px; padding: 0 var(--vj-space-5); }
  .vj-btn--icon { width: var(--vj-touch-min); }
  .vj-match { grid-template-columns: 1fr auto 1fr; gap: var(--vj-space-4); }
  .vj-basket { min-width: 140px; min-height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .vj-app *, .vj-app *::before, .vj-app *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Marco incrustado — el juego vive dentro de una página del sitio
   ========================================================================== */
.vj-frame {
  --vj-app-min-h: 640px;
  border: 2px solid var(--vj-border);
  border-radius: var(--vj-radius-2xl);
  overflow: hidden;
  background: var(--vj-surface-page);
  margin: var(--vj-space-6) 0;
}
.vj-frame:fullscreen { --vj-app-min-h: 100svh; border: 0; border-radius: 0; margin: 0; }

/* ==========================================================================
   Pantalla de inicio y pantalla final
   ========================================================================== */
.vj-app--intro .vj-stage,
.vj-app--end .vj-stage { gap: var(--vj-space-6); }

.vj-intro__deco { display: flex; gap: var(--vj-space-4); align-items: flex-start; }
/* Guirnalda: los banderines cuelgan a distinta altura, como en la calle. */
.vj-intro__deco .vj-shape:nth-child(odd)  { transform: translateY(10px); }
.vj-intro__deco .vj-shape:nth-child(3n)   { transform: translateY(-4px); }

.vj-btn--start { margin-top: var(--vj-space-4); }

.vj-endstars { display: flex; flex-wrap: wrap; gap: var(--vj-space-2); justify-content: center; max-width: 520px; }
.vj-star--big { width: 52px; height: 52px; }
.vj-endactions { display: flex; flex-wrap: wrap; gap: var(--vj-space-4); justify-content: center; margin-top: var(--vj-space-3); }

/* ==========================================================================
   Área de mecánica
   ========================================================================== */
.vj-mech { display: flex; flex-direction: column; align-items: center; gap: var(--vj-space-8); width: 100%; }
.vj-mech--sort { gap: var(--vj-space-7); }
.vj-pool { display: flex; flex-wrap: wrap; gap: var(--vj-space-4); justify-content: center; min-height: 116px; }
.vj-basket__slot { display: flex; flex-wrap: wrap; gap: var(--vj-space-2); justify-content: center; }

/* La cesta equivocada se sacude un poco; nada desaparece. */
.vj-basket--nope { animation: vj-shake 400ms var(--vj-ease); }
@keyframes vj-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}
.vj-basket--hinted { border-color: var(--vj-hint); border-width: 6px; }

/* La pista resalta el patrón sin taparlo. */
.vj-tile--hinted { box-shadow: 0 0 0 4px var(--vj-hint), var(--vj-shadow-tile); }

.vj-feedback-slot { min-height: 96px; display: flex; align-items: center; justify-content: center; width: 100%; }

/* Botón de pista en la barra: ámbar, tinta oscura. */
.vj-btn--icon-hint { background: var(--vj-hint-tint); color: var(--vj-amber-ink); }
@media (hover: hover) and (pointer: fine) {
  .vj-btn--icon-hint:hover:not([disabled]) { background: var(--vj-hint); color: var(--vj-ink-on-accent); }
}

/* ==========================================================================
   Índice de juegos
   ========================================================================== */
.vj-index { background: var(--vj-surface-page); padding: var(--vj-space-6) 0; }
.vj-index__grid {
  display: grid; gap: var(--vj-space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  margin: 0; padding: 0; list-style: none;
}
.vj-gamecard {
  display: flex; flex-direction: column; gap: var(--vj-space-3);
  padding: var(--vj-space-6);
  background: var(--vj-surface-card);
  border-radius: var(--vj-radius-2xl);
  box-shadow: var(--vj-shadow-md);
  text-decoration: none; color: var(--vj-ink);
  transition: transform var(--vj-duration-base) var(--vj-ease-bounce),
              box-shadow var(--vj-duration-base) var(--vj-ease);
}
@media (hover: hover) and (pointer: fine) {
  .vj-gamecard:hover { transform: translateY(-4px); box-shadow: var(--vj-shadow-lg); color: var(--vj-ink); }
}
.vj-gamecard:focus-visible { outline: 4px solid var(--vj-purple-600); outline-offset: 4px; }
.vj-gamecard__art {
  display: grid; place-items: center;
  aspect-ratio: 16 / 9;
  border-radius: var(--vj-radius-xl);
  background: var(--vj-c-tint);
}
.vj-gamecard__title { font-family: var(--vj-font-display); font-size: var(--vj-text-button); font-weight: var(--vj-weight-semibold); }
.vj-gamecard__desc { font-size: var(--vj-text-note); color: var(--vj-ink-muted); font-weight: var(--vj-weight-regular); line-height: var(--vj-leading-normal); }
.vj-gamecard__meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--vj-space-3); }
.vj-gamecard__age { font-size: var(--vj-text-note); color: var(--vj-ink-muted); }
.vj-gamecard__go {
  flex: none;
  font-family: var(--vj-font-display); font-size: var(--vj-text-note); font-weight: var(--vj-weight-semibold);
  color: #FFFFFF; background: var(--vj-purple-600);
  padding: 10px 18px; border-radius: var(--vj-radius-pill);
  /* El tema aprieta los enlaces dentro de tarjetas: la píldora no se parte. */
  white-space: nowrap; text-transform: none; letter-spacing: normal; line-height: 1;
}
.vj-index__empty { padding: var(--vj-space-8); text-align: center; color: var(--vj-ink-muted); }

@media (max-width: 640px) {
  .vj-frame { --vj-app-min-h: 560px; border-radius: var(--vj-radius-lg); }
  .vj-endstars { gap: var(--vj-space-1); }
  .vj-star--big { width: 38px; height: 38px; }
  .vj-pool { min-height: 88px; gap: var(--vj-space-3); }
}

/* Guirnalda dibujada de la pantalla de inicio: una pieza ancha, decorativa. */
.vj-garland {
  display: block;
  width: min(560px, 82vw);
  aspect-ratio: 1200 / 300;
  background-color: var(--vj-c);
  -webkit-mask: var(--vj-art-src) center / contain no-repeat;
  mask: var(--vj-art-src) center / contain no-repeat;
}
.vj-intro__deco--art { gap: 0; }