/**
 * Minigame home widget (S32, reworked S34, redesigned 2026-07-24) —
 * styles only the container around the minigame's OWN card
 * (.match-card etc., rendered via minigame-card.html.twig, which
 * composes classes defined in pool_mobile/css/global.css — NOT
 * duplicated here). This file covers only the "How it works" shell
 * (heading/description/cover/session/summary) and the card's own new
 * elements that don't exist on the real match card (timer bar,
 * integrated history blurb), plus both themes (light default,
 * :root[data-theme="dark"] override) via the shell's existing design
 * tokens.
 */
.minigame-widget {
  background: var(--color-chrome);
  color: var(--color-text);
  border-radius: 12px;
  padding: var(--space-md);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
}

.minigame-widget__loading {
  margin: 0;
  color: var(--color-text);
  opacity: 0.7;
}

.minigame-widget__heading {
  margin: 0 0 var(--space-md);
  font-size: var(--font-size-lg);
}

.minigame-widget__description {
  margin: 0 0 var(--space-md);
  opacity: 0.85;
}

.minigame-widget__cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

/* .minigame-widget__next is the "Play again" button shown after reveal
   (2026-07-26 rework: there is no separate 'summary' phase/button any
   more — see minigame-widget.js's docblock). */
.minigame-widget__play,
.minigame-widget__next {
  background: var(--pm-accent-fill);
  color: var(--pm-accent-contrast);
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* Timer bar (design §3.1) — top of the card, hidden once revealed, and
   entirely absent when secondsPerMatch === 0 (no-timer mode, e.g. the
   home instance on node 225 — see minigame-card.html.twig's x-show). */
.pmatch-timerbar {
  height: 4px;
  background: var(--pm-surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 4px;
}
.pmatch-timerbar-fill {
  display: block;
  height: 100%;
  background: var(--pm-accent);
  width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .pmatch-timerbar-fill {
    transition: width 1s linear;
  }
}
.pmatch-timer-seconds {
  font-size: 11px;
  color: var(--pm-text-muted);
}

/* Integrated history blurb (design §3.3). Ties it to the card it's
   inside via background only — NOT a second accent border. The card
   (.match-card, pool_mobile/css/global.css) already carries a
   border-left: 4px solid var(--pm-accent) accent, which in dark mode
   IS lime (--pm-accent === --pm-accent-fill there); this blurb used to
   add its OWN 3px accent border on top, so a no-timer card in dark
   mode showed two competing lime lines fighting for attention (home
   polish pass 3, 2026-07-26). One accent treatment (the card's own
   border) is enough — this blurb is set apart by background tint and
   rounded corners only. */
.minigame-history {
  padding: 8px 10px;
  background: var(--pm-surface-2);
  border-radius: 8px;
  font-size: 13px;
  font-style: italic;
  color: var(--pm-text-muted);
}
.minigame-history p {
  margin: 0;
}

/* Mobile overflow fix: the injected match card (predictions partial) must
   stay within the widget on narrow screens. Without these, the card's
   intrinsic width pushed the whole "Cómo se puntúa" panel wider than the
   viewport (text + card clipped on the right; worse after tapping "Jugar"). */
.minigame-widget,
.minigame-widget .match-card,
.minigame-widget .pmatch-teams,
.minigame-widget .pmatch-head {
  min-width: 0;
  max-width: 100%;
}
.minigame-widget .match-card {
  overflow: hidden;
}

/* Generic self-constraint (2026-08-13): cap the widget at the single-card
   width the card system is designed for — .match-card--compact's 440px
   (pool_mobile/css/global.css:786, the defined single-card context width)
   — and center it. This makes a STANDALONE / top-level minigame paragraph
   bounded by default in ANY placement, so it no longer depends on the
   theme's fragile `.layout--twocol:has(> .layout__region--first
   .pm-paragraph--home-scoring)` rule to avoid rendering full-bleed. The
   inner .match-card keeps max-width:100% (100% of this now-capped
   container). max-width never FORCES 440px: on a narrower viewport the
   block still shrinks to its container, so the mobile overflow fix above
   still holds. Placed after that group so it wins on the container. */
.pm-paragraph--minigame.minigame-widget {
  max-width: 440px;
  /* Two classes (0,2,0) so this beats the theme's `.pm-paragraph { margin:
     0 0 lg 0 }` (0,1,0), whose margin shorthand was resetting margin-inline
     to 0 and left-aligning a standalone widget (e.g. on /reglas). The home
     page's twocol context rule (higher specificity, with :has) still wins
     there, so this only re-centers genuinely standalone instances. */
  margin-inline: auto;
}

/* Standalone treatment (e.g. /reglas "Pongamos en práctica"): a centered,
   cohesive "try it" panel that matches the rest of the page's cards (plain
   card background + border, NO lime fill — lime stays only on the button).
   All keyed on the 0,2,0 standalone selector; on the home the minigame is
   transparent inside the unified scoring panel (the .layout--twocol:has(…
   home-scoring) rule, higher specificity), so these never touch it. */
.pm-paragraph--minigame.minigame-widget {
  background: var(--pm-card-bg);
  border: 1px solid var(--pm-card-border);
  box-shadow: none;
  text-align: center;
}
.pm-paragraph--minigame.minigame-widget .minigame-widget__heading,
.pm-paragraph--minigame.minigame-widget .minigame-widget__description {
  text-align: center;
}
/* Reveal phase: the card + "Play again" as a centered column with breathing
   room — the button was left-aligned and glued to the card. */
.pm-paragraph--minigame.minigame-widget .minigame-widget__session {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.pm-paragraph--minigame.minigame-widget .minigame-widget__next {
  align-self: center;
}

/* Session mode (timed hubs): running progress + accumulated total, shown
   above the card. The match count stays quiet; the accumulated score is a
   prominent accent chip (accent TEXT on a neutral chip — no lime fill, per
   the design rule) so the live total reads at a glance while playing. */
.pm-paragraph--minigame.minigame-widget .minigame-widget__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin: 0;
}
.minigame-widget__progress-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--pm-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.minigame-widget__progress-score {
  font-weight: 800;
  font-size: 18px;
  color: var(--pm-accent);
  background: var(--pm-surface-2);
  border-radius: 999px;
  padding: 3px 14px;
  font-variant-numeric: tabular-nums;
}

/* Session summary: the accumulated block score + a conversion nudge. */
.pm-paragraph--minigame.minigame-widget .minigame-widget__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}
.minigame-widget__summary-label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  color: var(--pm-text-muted);
}
.minigame-widget__summary-total {
  margin: 0;
  font-family: var(--font-display, var(--font-body));
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.minigame-widget__summary-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}
.minigame-widget__summary-cta {
  font-weight: 600;
  color: var(--pm-accent);
  text-decoration: underline;
}