/* Activity-level theme layer. It deliberately loads after the legacy H5 CSS. */
html,
body {
  overflow-x: clip;
  background: var(--theme-bg, var(--bg));
}

body {
  color: var(--theme-text, var(--txt));
  background-image:
    radial-gradient(circle at 92% 10%, var(--theme-primary-soft), transparent 28rem),
    radial-gradient(circle at 5% 44%, var(--theme-secondary-soft), transparent 26rem);
}

body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image: var(--theme-bg-image, none);
  background-position: center;
  background-size: cover;
  opacity: 0;
  content: '';
}

body.theme-has-background::before { opacity: .22; }

#app {
  position: relative;
  z-index: 1;
  color: var(--theme-text);
  background: color-mix(in srgb, var(--theme-bg) 94%, var(--theme-surface));
}

#topbar,
#tabbar {
  border-color: var(--theme-line-soft);
  background: color-mix(in srgb, var(--theme-bg) 88%, transparent);
}

#brand { color: var(--theme-primary); }
#brand img { display: block; max-width: min(199px, 46vw); height: 40px; object-fit: contain; object-position: left center; }
#progressTrack { background: var(--theme-surface-alt); }
#progressBar,
#progressBar::after { background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary)); }
#progressText,
#eventClock { color: var(--theme-muted); }

.card,
.state-card,
.resume-card,
.room-card,
.h5-action-card,
.h5-data-card,
.profile-identity,
.leaderboard-list,
.leaderboard-hero,
.tower-leaderboard,
.reward-dialog,
.reward-item,
.modal-card,
.main-tower-card {
  border-color: var(--theme-line);
  border-radius: var(--theme-radius);
  color: var(--theme-text);
  background: linear-gradient(145deg, color-mix(in srgb, var(--theme-surface) 96%, var(--theme-primary) 4%), var(--theme-surface));
  box-shadow: var(--theme-shadow);
}

.room-card,
.h5-action-card,
.profile-identity { border-radius: var(--theme-radius); }

.room-icon,
.h5-action-icon,
.profile-avatar {
  border-color: color-mix(in srgb, var(--theme-primary) 70%, white);
  border-radius: var(--theme-radius-small);
  background: linear-gradient(135deg, var(--theme-primary-soft), var(--theme-secondary));
}

.room-count,
.h5-status,
.badge,
.pill {
  border-color: var(--theme-line-soft);
  color: var(--theme-muted);
  background: color-mix(in srgb, var(--theme-surface-alt) 86%, transparent);
}

.tower-title,
.tower-copy,
.room-copy span,
.h5-action-copy span,
.leaderboard-hero p,
.profile-data span,
.muted,
.dim { color: var(--theme-muted); }

h1,
h2,
h3,
.room-copy strong,
.h5-action-copy strong,
.profile-data strong { color: var(--theme-text); }

button.primary,
button.btn:not(.ghost),
.scan-primary,
.tower-action,
.reward-claim {
  border-color: color-mix(in srgb, var(--theme-primary) 68%, white);
  border-radius: var(--theme-radius-small);
  background: linear-gradient(112deg, var(--theme-primary), var(--theme-secondary));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--theme-primary) 28%, transparent);
}

button.secondary,
button.btn.ghost,
.camera-help {
  border-color: var(--theme-line);
  border-radius: var(--theme-radius-small);
  color: var(--theme-text);
  background: var(--theme-surface-alt);
}

input,
select,
textarea {
  border-color: var(--theme-line-soft);
  border-radius: var(--theme-radius-small);
  color: var(--theme-text);
  background: var(--theme-surface-alt);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--theme-primary);
  box-shadow: 0 0 0 3px var(--theme-primary-soft);
}

#tabbar button { border-radius: var(--theme-radius-small); color: var(--theme-muted); }
#tabbar button.active {
  border-color: var(--theme-line);
  color: var(--theme-primary);
  background: linear-gradient(135deg, var(--theme-primary-soft), var(--theme-secondary-soft));
}
#app #tabbar button { color: var(--theme-muted) !important; }
#app #tabbar button.active { color: var(--theme-primary) !important; }
#app #tabbar button :is(b, span) { color: inherit !important; }

/* The legacy event skin contains late !important declarations. These rules are
   intentionally scoped to #app and loaded last so activity tokens stay authoritative. */
#app * { color: inherit !important; }
#tabbar[hidden],
#topStatus[hidden] { display: none !important; }
#app .entry-lead > span,
#app .eyebrow { color: var(--theme-primary) !important; }
#app .entry-lead h1,
#app .home-greeting h1,
#app .home-section-title,
#app .leaderboard-title h1,
#app .profile-page h1,
#app .challenge-page h1,
#app .resume-card h1,
#app .modal-card h1,
#app .modal-card h2 { color: var(--theme-text) !important; }
#app .entry-lead p,
#app .home-greeting p,
#app .resume-card p,
#app .modal-card p,
#app .camera-help,
#app .divider,
#app .instruction { color: var(--theme-muted) !important; }
#app :is(.room-copy span, .h5-action-copy span, .profile-data span, .tower-copy, .tower-kicker, .tower-empty, .leaderboard-hero p) { color: var(--theme-muted) !important; }
#app :is(.room-copy strong, .h5-action-copy strong, .profile-data strong, .tower-title) { color: var(--theme-text) !important; }
#app :is(.badge.done, .badge.live, .h5-status.success, .room-count.done) { color: var(--ok) !important; }
#app :is(.h5-status.warning, .badge.gold) { color: var(--warn) !important; }
#app :is(.h5-status.active, .h5-status.config, .room-count, .tower-link, .tower-share) { color: var(--theme-primary) !important; }

#app :is(.primary, .scan-primary, .reward-claim, button.btn:not(.ghost)) {
  border-color: color-mix(in srgb, var(--theme-primary) 70%, white) !important;
  border-radius: var(--theme-radius-small) !important;
  background: linear-gradient(112deg, var(--theme-primary), var(--theme-secondary)) !important;
  color: var(--theme-primary-contrast) !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--theme-primary) 28%, transparent) !important;
}
#app :is(.secondary, .camera-help, button.btn.ghost, .main-tower .main-actions .power-up) {
  border-color: var(--theme-line) !important;
  border-radius: var(--theme-radius-small) !important;
  background: var(--theme-surface-alt) !important;
  color: var(--theme-text) !important;
  box-shadow: none !important;
}

#app :is(.main-tower, .tower-card, .question-shell, .video-shell, .personality-shell, .leaderboard-card, .profile-card, .resume-card, .entry-card, .modal-card, .profile-panel, .manual-form, .state-card) {
  border-color: var(--theme-line) !important;
  border-radius: var(--theme-radius) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--theme-surface) 96%, var(--theme-primary) 4%), var(--theme-surface)) !important;
  box-shadow: var(--theme-shadow) !important;
}
#app :is(.leaderboard-title, .leaderboard-hero, .profile-user, .profile-dashboard-entry) {
  border-color: var(--theme-line) !important;
  background: linear-gradient(135deg, var(--theme-primary-soft), var(--theme-surface)) !important;
}
#app :is(.answer-option, .manual-form input, .manual-form select, .modal-card input, .modal-card select) {
  border-color: var(--theme-line-soft) !important;
  background: var(--theme-surface-alt) !important;
  color: var(--theme-text) !important;
}
#topbar,
#tabbar {
  border-color: var(--theme-line-soft) !important;
  background: color-mix(in srgb, var(--theme-bg) 91%, var(--theme-surface)) !important;
}
#eventClock,
#progressText { color: var(--theme-muted) !important; }
#progressTrack { background: var(--theme-surface-alt) !important; }
#progressBar { background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary)) !important; }

.theme-motion-off *,
.theme-motion-off *::before,
.theme-motion-off *::after {
  scroll-behavior: auto !important;
  animation: none !important;
  transition: none !important;
}

/* Template structure: each preset changes shape, rhythm and material, not only hue. */
[data-h5-template='corporate-light'] #app { box-shadow: 0 0 42px rgba(29, 55, 88, .13); }
[data-h5-template='corporate-light'] #topbar { background: #142033 !important; backdrop-filter: blur(20px); box-shadow: 0 1px 0 var(--theme-line-soft); }
[data-h5-template='corporate-light'] #tabbar { backdrop-filter: blur(20px); box-shadow: 0 1px 0 var(--theme-line-soft); }
[data-h5-template='corporate-light'] #app :is(.primary, .scan-primary, .reward-claim, button.btn:not(.ghost)) { background: var(--theme-primary) !important; }
[data-h5-template='corporate-light'] .card,
[data-h5-template='corporate-light'] .room-card,
[data-h5-template='corporate-light'] .h5-action-card,
[data-h5-template='corporate-light'] .leaderboard-list { background: var(--theme-surface); box-shadow: 0 8px 22px rgba(29, 55, 88, .08); }
[data-h5-template='corporate-light'] .room-icon,
[data-h5-template='corporate-light'] .h5-action-icon,
[data-h5-template='corporate-light'] .profile-avatar { background: var(--theme-primary-soft); }

[data-h5-template='battle-red'] #topbar { border-bottom-width: 2px; }
[data-h5-template='battle-red'] .card,
[data-h5-template='battle-red'] .room-card,
[data-h5-template='battle-red'] .h5-action-card { border-left-width: 3px; }
[data-h5-template='battle-red'] h1,
[data-h5-template='battle-red'] h2 { letter-spacing: -.035em; }
[data-h5-template='battle-red'] button.primary,
[data-h5-template='battle-red'] .scan-primary { transform: skewX(-1.5deg); }

[data-h5-template='aurora-flow'] body { background-image: radial-gradient(circle at 85% 9%, var(--theme-secondary-soft), transparent 21rem), radial-gradient(circle at 4% 55%, var(--theme-primary-soft), transparent 25rem); }
[data-h5-template='aurora-flow'] .card,
[data-h5-template='aurora-flow'] .room-card,
[data-h5-template='aurora-flow'] .h5-action-card { backdrop-filter: blur(18px); }
[data-h5-template='aurora-flow'] .room-icon,
[data-h5-template='aurora-flow'] .h5-action-icon { transform: rotate(-3deg); }

[data-h5-template='midnight-gold'] #topbar,
[data-h5-template='midnight-gold'] #tabbar { backdrop-filter: none; }
[data-h5-template='midnight-gold'] .card,
[data-h5-template='midnight-gold'] .room-card,
[data-h5-template='midnight-gold'] .h5-action-card { border-top-color: color-mix(in srgb, var(--theme-primary) 72%, white); box-shadow: none; }
[data-h5-template='midnight-gold'] button.primary,
[data-h5-template='midnight-gold'] .scan-primary { color: #171006; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}