/* Home */
.home-greeting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 8px 0 28px;
}

.home-mascot {
  flex-shrink: 0;
  width: auto;
  height: var(--page-hero-mascot-h-lg);
  max-width: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(61, 42, 26, 0.12));
}

.home-greeting-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.main {
  flex: 1;
  padding: 16px 16px 40px;
  background: transparent;
}

.page { display: none; }
.page.is-active { display: block; }

/* Home — scrambled quiz icons, staggered grid, cycling crossfade */
#page-home {
  position: relative;
  isolation: isolate;
}

.home-mosaic {
  --home-mosaic-gap: 16px;
  --home-mosaic-cell: 194px;
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
}

body:has(#page-home.is-active) .home-mosaic {
  display: none;
}

.home-mosaic-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--home-mosaic-gap);
  width: max-content;
  height: max-content;
  box-sizing: border-box;
  opacity: 0.6;
  transform-origin: center center;
}

.home-mosaic-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--home-mosaic-gap);
  flex: 0 0 auto;
}

.home-mosaic-row.is-offset {
  transform: translateX(calc((var(--home-mosaic-cell) + var(--home-mosaic-gap)) / 2));
}

.home-mosaic-gap {
  flex: 0 0 auto;
  width: var(--home-mosaic-cell);
  height: var(--home-mosaic-cell);
}

.home-mosaic-cell {
  flex: 0 0 auto;
  width: var(--home-mosaic-cell);
  height: var(--home-mosaic-cell);
  position: relative;
}

.home-mosaic-swap {
  position: absolute;
  inset: 0;
}

.home-mosaic-swap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.home-mosaic-swap img.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .home-mosaic-swap img {
    transition: none;
  }
}

body:has(#page-home.is-active) {
  background: var(--fr-tricolor-bg);
  background-attachment: fixed;
}

body:has(#page-home.is-active) .home-mosaic {
  z-index: 0;
}

body:has(#page-home.is-active) .app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  background: transparent;
}

body:has(#page-home.is-active) .main {
  background: transparent;
}

#page-home > * {
  position: relative;
  z-index: 1;
}

.module-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.module-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 18px;
  text-align: left;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.module-card:hover {
  transform: translateY(-1px);
}

/* Home — tricolore vertical strips (蓝 · 白 · 红)，分列留缝 */
#page-home .module-cards--tricolor {
  flex-direction: row;
  gap: 10px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 0;
}

#page-home .module-cards--tricolor .module-card {
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 0;
  min-height: 0;
  height: clamp(128px, 20vh, 156px);
  padding: 14px 10px;
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  backdrop-filter: blur(8px) saturate(1.15);
  transition:
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

#page-home .module-cards--tricolor .module-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(61, 42, 26, 0.12);
}

#page-home .module-cards--tricolor .module-card:active {
  transform: translateY(0);
}

#page-home .module-cards--tricolor .module-card--bleu {
  --home-module-accent: #4A78B5;
  --home-module-accent-hover: #3D68A2;
  color: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--home-module-accent);
  border: 1px solid color-mix(in srgb, var(--home-module-accent-hover) 70%, #000);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--home-module-accent) 42%, transparent);
}

#page-home .module-cards--tricolor .module-card--bleu:hover {
  background: var(--home-module-accent-hover);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--home-module-accent) 50%, transparent);
}

#page-home .module-cards--tricolor .module-card--blanc {
  color: var(--ink);
  background: color-mix(in srgb, var(--module-test-white) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}

#page-home .module-cards--tricolor .module-card--blanc:hover {
  background: color-mix(in srgb, var(--module-test-white) 94%, transparent);
}

#page-home .module-cards--tricolor .module-card--rouge {
  --home-module-accent: #B83248;
  --home-module-accent-hover: #9E2A3D;
  color: var(--fr-blanc);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--home-module-accent);
  border: 1px solid color-mix(in srgb, var(--home-module-accent-hover) 70%, #000);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--home-module-accent) 38%, transparent);
}

#page-home .module-cards--tricolor .module-card--rouge:hover {
  background: var(--home-module-accent-hover);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--home-module-accent) 46%, transparent);
}

#page-home .module-cards--tricolor .module-card-title {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.22rem, 4.8vw, 1.58rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

#page-home .module-cards--tricolor .module-card--bleu .module-card-title,
#page-home .module-cards--tricolor .module-card--rouge .module-card-title {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
}

#page-home .module-cards--tricolor .module-card--blanc .module-card-title {
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.65);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #page-home .module-cards--tricolor .module-card--bleu {
    background: #4A78B5;
  }

  #page-home .module-cards--tricolor .module-card--blanc {
    background: color-mix(in srgb, var(--module-test-white) 96%, transparent);
  }

  #page-home .module-cards--tricolor .module-card--rouge {
    background: #B83248;
  }
}

.module-card-title {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.home-legal-note {
  margin: 22px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
}

.home-legal-note a {
  color: var(--muted);
}