/* AIML Game Set Styles */

/* Theme variables with fallbacks for browsers/themes without CSS custom properties */
:root {
  /* Focus ring color system */
  --aiml-focus-ring-color: #111827; /* default near-black for strong contrast */
  --aiml-focus-ring-halo: rgba(17,24,39,0.15);
  --aiml-focus-ring-disabled: #6b7280;
  --aiml-focus-ring-disabled-halo: rgba(107,114,128,0.25);

  /* Component / message colors (can be themed) */
  --aiml-border-color: #e5e7eb;
  --aiml-surface: #fff;
  --aiml-on-surface: #222222;
  --aiml-surface-subtle: #fafafa;
  --aiml-surface-border: rgba(0,0,0,0.08);

  --aiml-text-strong: #374151;
  --aiml-text-muted: #6b7280;
  --aiml-text-subtle: #4b5563;
  --aiml-heading: #111827;

  --aiml-crumb-border: #d1d5db;
  --aiml-crumb-text: #374151;

  --aiml-crumb-current-border: #3b82f6;
  --aiml-crumb-current-text: #1f2937;
  --aiml-crumb-current-halo: rgba(59,130,246,0.15);

  --aiml-crumb-completed-bg: #10b981;
  --aiml-crumb-completed-text: #ffffff;
  --aiml-crumb-completed-border: #10b981;

  --aiml-info-bg: #eff6ff;
  --aiml-info-text: #1e3a8a;
  --aiml-info-border: #93c5fd;

  --aiml-error-bg: #fef2f2;
  --aiml-error-text: #7f1d1d;
  --aiml-error-border: #fca5a5;

  --aiml-success-bg: #ecfdf5;
  --aiml-success-text: #065f46;
  --aiml-success-border: #6ee7b7;

  --aiml-progress-track: #f3f4f6;
  --aiml-progress-fill-start: #06b6d4;
  --aiml-progress-fill-end: #3b82f6;
  --aiml-progress-text: #111827;

  /* Primary theme color system (used by CTAs and accents) */
  --aiml-primary: #1e73be;           /* accent used in multiple rules */
  --aiml-primary-hover: #165a90;
  --aiml-primary-active: #114a77;
  --aiml-on-primary: #ffffff;

  /* Legacy/alt primary tokens for specific button rules */
  --aiml-primary-bg: #2563eb;
  --aiml-primary-border: #1d4ed8;
  --aiml-primary-text: #ffffff;
  --aiml-primary-bg-hover: #1d4ed8;

  /* Panels and subtle surfaces */
  --aiml-panel-muted-bg: #fafafa;

  /* Completion panel */
  --aiml-completion-bg: #f0fdf4;
  --aiml-completion-border: #bbf7d0;

  /* Overlays and effects */
  --aiml-overlay-backdrop: rgba(0,0,0,0.45);
  --aiml-overlay-backdrop-no-blur: rgba(0,0,0,0.55);
  --aiml-overlay-blur: blur(2px);

  /* States and highlights */
  --aiml-row-alt: rgba(0,0,0,0.02);
  --aiml-highlight: rgba(30,115,190,0.08);

  /* Generic focus color used in a few selectors */
  --aiml-focus: #5b9dd9;
}

.aiml-game-set-container {
/*  border: 1px solid var(--aiml-border-color, #e5e7eb);
  border-radius: 8px;
  padding: 16px;*/
  background: var(--aiml-surface, #fff);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  margin: 16px 0;
  position: relative; /* Enables absolutely positioned overlay to anchor to container */
}

/* Focus management: base reset for outlines to ensure visible focus using :focus-visible */
.aiml-game-set-container :where(a, button, [role="button"], input, select, textarea, summary, [tabindex]:not([tabindex="-1"])) {
  outline: none;
}

/* Default visible focus ring for all interactives inside game-set */
.aiml-game-set-container :where(a, button, [role="button"], input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  /* Use themeable variables with fallbacks, prefer currentColor when appropriate */
  outline: 3px solid var(--aiml-focus-ring-color, currentColor);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--aiml-focus-ring-halo, rgba(17,24,39,0.15));
  border-radius: 6px; /* harmonize with buttons/crumbs rounding */
}

/* Ensure focus states are not hidden on disabled elements accidentally */
.aiml-game-set-container :where(.is-loading, [disabled]):focus-visible {
  outline-color: var(--aiml-focus-ring-disabled, #6b7280);
  box-shadow: 0 0 0 3px var(--aiml-focus-ring-disabled-halo, rgba(107,114,128,0.25));
}

/* Breadcrumbs */
.aiml-game-set-breadcrumbs {
  margin: 8px 0 12px 0;
}
.aiml-game-set-breadcrumbs ol {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 6px;
  flex-wrap: wrap;
}
.aiml-game-set-breadcrumbs .crumb {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border: 1px solid var(--aiml-crumb-border, #d1d5db);
  color: var(--aiml-crumb-text, #374151);
  background: var(--aiml-surface, #fff);
  position: relative;
}

/* Breadcrumb specific focus ring: outside soft halo to avoid interior clipping */
.aiml-game-set-breadcrumbs .crumb:focus-visible {
  outline: 3px solid var(--aiml-focus-ring-color, currentColor);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--aiml-focus-ring-halo, rgba(17,24,39,0.1));
}

/* State visuals maintained with adequate contrast */
.aiml-game-set-breadcrumbs .crumb.current {
  border-color: var(--aiml-crumb-current-border, #3b82f6); /* Blue 500 */
  color: var(--aiml-crumb-current-text, #1f2937);          /* Gray 800 */
  box-shadow: 0 0 0 2px var(--aiml-crumb-current-halo, rgba(59,130,246,0.15));
}
.aiml-game-set-breadcrumbs .crumb.completed {
  background: var(--aiml-crumb-completed-bg, #10b981);   /* Emerald 500 */
  color: var(--aiml-crumb-completed-text, #fff);
  border-color: var(--aiml-crumb-completed-border, #10b981);
}
.aiml-game-set-breadcrumbs .crumb.upcoming {
  opacity: 0.84; /* avoid too low contrast while still deemphasized */
}

/* Messages: ensure text contrast */
.aiml-games-message {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.95rem;
}
.aiml-games-message-info {
  background: var(--aiml-info-bg, #eff6ff);   /* Blue 50 */
  color: var(--aiml-info-text, #1e3a8a);      /* Blue 900 for stronger contrast */
  border: 1px solid var(--aiml-info-border, #93c5fd); /* Blue 300 */
}
.aiml-games-message-error {
  background: var(--aiml-error-bg, #fef2f2);   /* Red 50 */
  color: var(--aiml-error-text, #7f1d1d);      /* Red 900 */
  border: 1px solid var(--aiml-error-border, #fca5a5); /* Red 300 */
}
.aiml-games-message-success {
  background: var(--aiml-success-bg, #ecfdf5);   /* Emerald 50 */
  color: var(--aiml-success-text, #065f46);      /* Emerald 800 */
  border: 1px solid var(--aiml-success-border, #6ee7b7); /* Emerald 300 */
}

.aiml-game-set-header {
  margin-bottom: 12px;
}
.aiml-game-set-title {
  margin: 0 0 6px 0;
  font-size: 1.4rem;
  line-height: 1.2;
}
.aiml-game-set-description {
  margin: 0 0 8px 0;
  color: var(--aiml-text-subtle, #4b5563);
}
.aiml-game-set-meta {
  font-size: 0.9rem;
  color: var(--aiml-text-muted, #6b7280);
}

.aiml-game-set-progress {
  margin: 10px 0 12px 0;
}
.aiml-game-set-progress-bar {
  width: 100%;
  height: 10px;
  background: var(--aiml-progress-track, #f3f4f6);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}
.aiml-game-set-progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--aiml-progress-fill-start, #06b6d4), var(--aiml-progress-fill-end, #3b82f6));
  transition: width 200ms ease-in-out;
}
.aiml-game-set-progress-text {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--aiml-text-strong, #374151);
}

/* Controls */
.aiml-game-set-controls {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.aiml-game-set-controls .button {
  border-radius: 6px;
  cursor: pointer;
  transition: all 120ms ease-in-out;
}
.aiml-game-set-controls .button[disabled],
.aiml-game-set-controls .button.is-loading {
  opacity: 0.6;
  cursor: not-allowed;
}
.aiml-game-set-controls .button-primary {
  background: var(--aiml-primary-bg, #2563eb);   /* Blue 600 */
  color: var(--aiml-primary-text, #fff);
  border: 1px solid var(--aiml-primary-border, #1d4ed8); /* Blue 700 */
}
.aiml-game-set-controls .button-primary:hover {
  background: var(--aiml-primary-bg-hover, #1d4ed8);
}
/* Primary button focus ring with WCAG contrast against blue background */
.aiml-game-set-controls .button-primary:focus-visible {
  outline: 3px solid var(--aiml-focus-ring-color, currentColor);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--aiml-focus-ring-halo, rgba(17,24,39,0.15));
}

/* If there are link-style controls, ensure they also get a visible ring */
.aiml-game-set-controls a:focus-visible {
  outline: 3px solid var(--aiml-focus-ring-color, currentColor);
  outline-offset: 3px;
}

/* Current game panel */
.aiml-game-set-current-game {
  border: 1px dashed var(--aiml-border-color, #e5e7eb);
  border-radius: 8px;
  padding: 12px;
  background: var(--aiml-panel-muted-bg, #fafafa);
  min-height: 80px;
}
.aiml-game-set-current-game.is-loading {
  opacity: 0.6;
  transition: opacity 150ms ease-in-out;
}

/* Leaderboard */
.aiml-game-set-leaderboard {
  margin-top: 16px;
  border-top: 1px solid var(--aiml-border-color, #e5e7eb);
  padding-top: 12px;
}
.aiml-game-set-leaderboard h3 {
  margin: 0 0 8px 0;
}
.aiml-game-set-leaderboard-list {
  margin: 0;
  padding-left: 20px;
}
.aiml-game-set-leaderboard-list li {
  padding: 2px 0;
}

/* Completion panel */
.aiml-game-set-completion {
  margin-top: 16px;
  background: var(--aiml-completion-bg, #f0fdf4);
  border: 1px solid var(--aiml-completion-border, #bbf7d0);
  border-radius: 8px;
  padding: 12px;
}
.aiml-game-set-completion h3 {
  margin: 0 0 6px 0;
}

/* Play Game Set Again button */
.aiml-play-game-set-again-btn {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Framework button styles */
.aiml-games-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  min-width: 160px;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 160ms ease, transform 80ms ease, opacity 160ms ease;
}
.aiml-games-btn:focus-visible {
  outline: 3px solid var(--aiml-focus, #5b9dd9);
  outline-offset: 2px;
}
.aiml-games-btn:active {
  transform: translateY(1px);
}

.aiml-games-btn-primary {
  background: var(--aiml-primary, #1e73be);
  color: var(--aiml-on-primary, #fff);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.aiml-games-btn-primary:hover {
  background: var(--aiml-primary-hover, #165a90);
}

.aiml-games-btn-secondary {
  background: var(--aiml-surface, #fff);
  color: var(--aiml-primary, #1e73be);
  border: 2px solid var(--aiml-primary, #1e73be);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.aiml-games-btn-secondary:hover {
  background: var(--aiml-surface-subtle, #fafafa);
  border-color: var(--aiml-primary-hover, #165a90);
  color: var(--aiml-primary-hover, #165a90);
}

/* High contrast user preference: strengthen outlines and offsets */
@media (prefers-contrast: more) {
  .aiml-game-set-container :where(a, button, [role="button"], input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible,
  .aiml-game-set-breadcrumbs .crumb:focus-visible,
  .aiml-game-set-controls .button-primary:focus-visible,
  .aiml-game-set-controls a:focus-visible {
    outline-width: 4px;
    outline-color: var(--aiml-focus-ring-color, #000);
    outline-offset: 4px;
    box-shadow: none;
  }
}

/* Respect reduced motion: keep focus ring static */
@media (prefers-reduced-motion: reduce) {
  .aiml-game-set-container :where(a, button, [role="button"], input, select, textarea, summary, [tabindex]:not([tabindex="-1"])) {
    transition: none !important;
  }
  .aiml-game-set-progress-bar-fill {
    transition: none !important;
  }

  /* Disable shimmer and spinner animations for motion sensitivity */
  .is-loading::after,
  .aiml-game-set-progress-summary.is-loading::after,
  .aiml-game-set-breadcrumbs.is-loading::after {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
    background: none !important; /* remove moving highlight */
    content: none !important;    /* hide shimmer pseudo-element */
  }

  /* Also disable the button spinner animation if present */
  .aiml-play-next-button.is-loading::after,
  .aiml-play-next-button[aria-busy="true"]::after {
    animation: none !important;
    transform: none !important;
    content: none !important;
  }
}

@media (max-width: 640px) {
  .aiml-game-set-container {
    padding: 12px;
  }
  .aiml-game-set-breadcrumbs .crumb {
    width: 22px;
    height: 22px;
    font-size: 0.75rem;
  }
}
/* === AIML Games Framework: Game Set Extensions === */

/* Intermediate completion overlay */
.aiml-game-completion-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 40;
}
.aiml-game-completion-overlay.is-visible {
  display: flex;
}
.aiml-game-completion-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Fallback background for browsers without backdrop-filter support */
  background: var(--aiml-overlay-backdrop, rgba(0,0,0,0.45));
}

/* Apply blur only when supported */
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .aiml-game-completion-overlay::before {
    /* Maintain same base color, add blur */
    background: var(--aiml-overlay-backdrop, rgba(0,0,0,0.45));
    -webkit-backdrop-filter: var(--aiml-overlay-blur, blur(2px));
    backdrop-filter: var(--aiml-overlay-blur, blur(2px));
  }
}

/* Optional: strengthen background slightly when blur isn't supported for readability */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .aiml-game-completion-overlay::before {
    background: var(--aiml-overlay-backdrop-no-blur, rgba(0,0,0,0.55));
  }
}
.aiml-game-completion-overlay .overlay-content {
  position: relative;
  max-width: 720px;
  width: 100%;
  background: var(--aiml-surface, #fff);
  color: var(--aiml-on-surface, #222);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15);
  border: 1px solid var(--aiml-surface-border, rgba(0,0,0,0.08));
  padding: 1.25rem;
}
.aiml-game-completion-overlay .overlay-content:focus {
  outline: 3px solid var(--aiml-focus, #5b9dd9);
  outline-offset: 2px;
}
.aiml-game-completion-overlay .overlay-summary {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.aiml-game-completion-overlay .overlay-summary h3,
.aiml-game-completion-overlay .overlay-summary .summary-title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--aiml-heading, inherit);
}
.aiml-game-completion-overlay .overlay-summary p,
.aiml-game-completion-overlay .overlay-summary .summary-detail {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--aiml-text-muted, #555);
}
.aiml-game-completion-overlay .overlay-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

/* Progress summary and CTA */
.aiml-game-set-progress-summary {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--aiml-progress-text, inherit);
}
.aiml-game-set-progress-summary .progress-accent {
  color: var(--aiml-primary, #1e73be);
}
.aiml-play-next-button {
  --btn-bg: var(--aiml-primary, #1e73be);
  --btn-bg-hover: var(--aiml-primary-hover, #165a90);
  --btn-bg-active: var(--aiml-primary-active, #114a77);
  --btn-text: var(--aiml-on-primary, #fff);
  --btn-shadow: 0 2px 8px rgba(0,0,0,0.15);
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.1rem;
  min-width: 160px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 700;
  /*font-size: 1rem;*/
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--btn-shadow);
  transition: background-color 160ms ease, transform 80ms ease, opacity 160ms ease;
  text-decoration: none;
}
.aiml-play-next-button:hover {
  background: var(--btn-bg-hover);
}
.aiml-play-next-button:active {
  background: var(--btn-bg-active);
  transform: translateY(1px);
}
.aiml-play-next-button:focus-visible {
  outline: 3px solid var(--aiml-focus, #5b9dd9);
  outline-offset: 2px;
}
.aiml-play-next-button.is-loading,
.aiml-play-next-button[aria-busy="true"] {
  opacity: 0.75;
  pointer-events: none;
  position: relative;
}
.aiml-play-next-button.is-loading::after,
.aiml-play-next-button[aria-busy="true"]::after {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5);
  border-top-color: rgba(255,255,255,1);
  animation: aiml-spin 900ms linear infinite;
  display: inline-block;
  margin-left: 0.25rem;
}
@keyframes aiml-spin {
  to { transform: rotate(360deg); }
}

/* Individual game leaderboard inside overlay */
.aiml-individual-game-leaderboard {
  margin: 0.75rem 0 0.5rem;
  background: var(--aiml-surface-subtle, #fafafa);
  border: 1px solid var(--aiml-surface-border, rgba(0,0,0,0.08));
  border-radius: 8px;
  overflow: hidden;
}
.aiml-individual-game-leaderboard .leaderboard-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--aiml-text-muted, #555);
  background: var(--aiml-surface, #fff);
  border-bottom: 1px solid var(--aiml-surface-border, rgba(0,0,0,0.06));
}
.aiml-individual-game-leaderboard .leaderboard-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  align-items: center;
}
.aiml-individual-game-leaderboard .leaderboard-row:nth-child(odd) {
  background: var(--aiml-row-alt, rgba(0,0,0,0.02));
}
.aiml-individual-game-leaderboard .leaderboard-row.is-current-user {
  background: var(--aiml-highlight, rgba(30,115,190,0.08));
  border-left: 3px solid var(--aiml-primary, #1e73be);
}
.aiml-individual-game-leaderboard .cell-rank,
.aiml-individual-game-leaderboard .cell-score,
.aiml-individual-game-leaderboard .cell-time {
  text-align: right;
  white-space: nowrap;
}
.aiml-individual-game-leaderboard .cell-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Loading states during transitions */
.is-loading,
.aiml-game-set-progress-summary.is-loading,
.aiml-game-set-breadcrumbs.is-loading {
  opacity: 0.6;
  transition: opacity 160ms ease;
  position: relative;
}

/* While shimmer is active, hint the compositor.
   Note: we'll remove will-change when loading ends to avoid memory pressure. */
.is-loading::after,
.aiml-game-set-progress-summary.is-loading::after,
.aiml-game-set-breadcrumbs.is-loading::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
  top: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.35) 50%,
    transparent 100%);
  animation: aiml-shimmer 1.2s infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
  /* Performance hint for the transform-based shimmer */
  will-change: transform;
}

@keyframes aiml-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Final completion summary */
.aiml-game-set-final-summary {
  margin-top: 1rem;
  background: var(--aiml-surface, #fff);
  color: var(--aiml-on-surface, #222);
  border: 1px solid var(--aiml-surface-border, rgba(0,0,0,0.08));
  border-radius: 12px;
  padding: 1rem;
  position: relative;
}
.aiml-game-set-final-summary::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(6px 6px at 10% 15%, rgba(30,115,190,0.10) 0 99%, transparent 100%),
    radial-gradient(5px 5px at 85% 20%, rgba(255,196,0,0.10) 0 99%, transparent 100%),
    radial-gradient(4px 4px at 25% 85%, rgba(76,175,80,0.10) 0 99%, transparent 100%);
  border-radius: inherit;
  opacity: 0.6;
}
.aiml-game-set-final-summary .final-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0.75rem;
  position: relative;
}
.aiml-game-set-final-summary .metric {
  background: var(--aiml-surface-subtle, #fafafa);
  border: 1px solid var(--aiml-surface-border, rgba(0,0,0,0.06));
  border-radius: 10px;
  padding: 0.75rem;
  text-align: center;
}
.aiml-game-set-final-summary .metric .label {
  display: block;
  font-size: 0.8rem;
  color: var(--aiml-text-muted, #666);
  margin-bottom: 0.25rem;
}
.aiml-game-set-final-summary .metric .value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--aiml-heading, inherit);
}
.aiml-game-set-final-summary .final-leaderboard {
  margin-top: 1rem;
}
.aiml-game-set-final-summary .final-leaderboard .row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  align-items: center;
  border-bottom: 1px solid var(--aiml-surface-border, rgba(0,0,0,0.06));
}
.aiml-game-set-final-summary .final-leaderboard .row.is-current-user {
  background: var(--aiml-highlight, rgba(30,115,190,0.08));
  border-left: 3px solid var(--aiml-primary, #1e73be);
}
.aiml-game-set-final-summary .final-leaderboard .row:last-child {
  border-bottom: 0;
}

/* Responsive behavior */
@media (max-width: 640px) {
  .aiml-game-completion-overlay {
    padding: 0.75rem;
  }
  .aiml-game-completion-overlay .overlay-content {
    padding: 1rem;
    border-radius: 10px;
  }
  .aiml-game-completion-overlay .overlay-actions {
    justify-content: stretch;
  }
  .aiml-play-next-button {
    width: 100%;
    min-height: 44px;
  }
  .aiml-individual-game-leaderboard .leaderboard-header,
  .aiml-individual-game-leaderboard .leaderboard-row {
    grid-template-columns: 1fr auto;
  }
  .aiml-individual-game-leaderboard .cell-time {
    display: none;
  }
  .aiml-game-set-final-summary .final-metrics {
    grid-template-columns: 1fr;
  }
  .aiml-game-set-final-summary .final-leaderboard .row {
    grid-template-columns: 1fr auto;
  }
  .aiml-game-set-final-summary .final-leaderboard .row .cell-time {
    display: none;
  }
}

/* Dark theme affordances */
@media (prefers-color-scheme: dark) {
  .aiml-game-completion-overlay .overlay-content,
  .aiml-game-set-final-summary {
    background: var(--aiml-surface, #1d1f23);
    color: var(--aiml-on-surface, #e8e8e8);
    border-color: var(--aiml-surface-border, rgba(255,255,255,0.12));
  }
  .aiml-individual-game-leaderboard {
    background: var(--aiml-surface-subtle, #16181b);
  }
  .aiml-individual-game-leaderboard .leaderboard-header {
    background: var(--aiml-surface, #1d1f23);
    color: var(--aiml-text-muted, #b9c0c8);
    border-color: var(--aiml-surface-border, rgba(255,255,255,0.08));
  }
  .aiml-individual-game-leaderboard .leaderboard-row:nth-child(odd) {
    background: var(--aiml-row-alt, rgba(255,255,255,0.035));
  }
}

/* Game set completion modal styling */
.aiml-game-set-completion-modal .aiml-games-modal-content {
  max-width: 500px;
  width: 90%;
}

.aiml-game-completion-summary {
  text-align: center;
  padding: 1rem 0;
}

.aiml-game-completion-summary .summary-line {
  margin: 0.5rem 0;
  /*font-size: 1rem;*/
  line-height: 1.5;
  color: var(--aiml-text-strong, #374151);
}

.aiml-game-completion-summary .summary-line strong {
  color: var(--aiml-primary, #1e73be);
}

.aiml-game-completion-summary .completion-message {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--aiml-border-color, #e5e7eb);
  color: var(--aiml-primary, #1e73be);
  font-weight: 500;
}

/* Dismiss button for game completion overlay */
.aiml-overlay-dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--aiml-text-muted, #6b7280);
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
  z-index: 10;
  padding: 0;
}

.aiml-overlay-dismiss:hover {
  background: var(--aiml-surface-subtle, #f3f4f6);
  color: var(--aiml-text-strong, #374151);
}

.aiml-overlay-dismiss:focus-visible {
  outline: 3px solid var(--aiml-focus-ring-color, currentColor);
  outline-offset: 2px;
  background: var(--aiml-surface-subtle, #f3f4f6);
}

/* Containers that toggle loading (support selectors) */
.aiml-game-set-container.is-loading,
.aiml-progress-container.is-loading,
.aiml-game-set-breadcrumbs-container.is-loading {
  opacity: 0.6;
  transition: opacity 160ms ease;
  position: relative;
}