/*
 * QuickAvatar / QuickSpot visual contract.
 *
 * Components consume --qx-* tokens. Deployments select a CSS-safe key with
 * QUICKEXPERIENCE_THEME, QUICKAVATAR_THEME, or QUICKSPOT_THEME. Product/site
 * styles may add a new [data-experience-theme="..."] block without changing
 * templates, APIs, or interaction code.
 */
[data-experience-theme] {
  --qx-canvas: #f7f9ff;
  --qx-surface: rgba(255, 255, 255, 0.96);
  --qx-surface-raised: #ffffff;
  --qx-surface-soft: #f1f5ff;
  --qx-ink: #10233f;
  --qx-muted: #61718a;
  --qx-line: rgba(63, 76, 100, 0.17);
  --qx-accent: #6d4aff;
  --qx-accent-strong: #4526d4;
  --qx-accent-soft: #f0edff;
  --qx-positive: #0f766e;
  --qx-positive-soft: #ecfdf5;
  --qx-warning: #b45309;
  --qx-warning-soft: #fffbeb;
  --qx-danger: #be123c;
  --qx-danger-soft: #fff1f2;
  --qx-focus: #0ea5e9;
  --qx-shadow: 0 18px 48px rgba(38, 50, 75, 0.1);
  --qx-hero-start: #1a1648;
  --qx-hero-middle: #5038c7;
  --qx-hero-end: #8b5cf6;
  color-scheme: light;
}

[data-experience-theme="nocturne"] {
  --qx-canvas: #070d1c;
  --qx-surface: rgba(14, 23, 43, 0.96);
  --qx-surface-raised: #121d34;
  --qx-surface-soft: #18243d;
  --qx-ink: #edf5ff;
  --qx-muted: #9fb0c8;
  --qx-line: rgba(154, 180, 218, 0.2);
  --qx-accent: #8b7bff;
  --qx-accent-strong: #b7adff;
  --qx-accent-soft: #292555;
  --qx-positive: #5eead4;
  --qx-positive-soft: #0b3838;
  --qx-warning: #fcd34d;
  --qx-warning-soft: #3a2c13;
  --qx-danger: #fda4af;
  --qx-danger-soft: #481b2a;
  --qx-focus: #67e8f9;
  --qx-shadow: 0 22px 58px rgba(0, 0, 0, 0.34);
  --qx-hero-start: #050a18;
  --qx-hero-middle: #111d3b;
  --qx-hero-end: #273267;
  color-scheme: dark;
}

[data-experience-theme="nocturne"].qa-studio,
[data-experience-theme="nocturne"].qs-world,
[data-experience-theme="nocturne"].qa-trail {
  padding: clamp(0.75rem, 2vw, 1.35rem);
  border: 1px solid var(--qx-line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 0%, rgba(109, 74, 255, 0.14), transparent 31%),
    radial-gradient(circle at 100% 28%, rgba(20, 184, 166, 0.1), transparent 26%),
    var(--qx-canvas);
  box-shadow: 0 25px 70px rgba(2, 6, 23, 0.25);
}

[data-experience-theme="nocturne"] :is(
  .qa-preview-panel,
  .qa-work-card,
  .qa-signin-card,
  .qa-save-dock,
  .qs-nearby-card,
  .qs-building-index,
  .qs-presence-panel,
  .qs-discovery-panel,
  .qa-trail-panel
) {
  border-color: var(--qx-line);
  background: var(--qx-surface);
  color: var(--qx-ink);
  box-shadow: var(--qx-shadow);
}

[data-experience-theme="nocturne"] :is(
  .qa-secondary-action,
  .qa-preset-row button,
  .qa-category-tabs button,
  .qa-item-card,
  .qs-world-toolbar,
  .qs-world-toolbar a,
  .qs-world-toolbar button,
  .qs-map-instructions kbd,
  .qs-touch-controls button,
  .qs-presence-card,
  .qs-presence-actions > a,
  .qs-presence-actions > button,
  .qs-presence-actions summary,
  .qa-trail-instructions kbd
) {
  border-color: var(--qx-line);
  background: var(--qx-surface-raised);
  color: var(--qx-ink);
}

[data-experience-theme="nocturne"] :is(
  .qa-identity-form input[type="text"],
  .qa-identity-form select,
  .qa-upload-form input[type="file"],
  .qs-report-form select,
  .qs-report-form textarea
) {
  border-color: var(--qx-line);
  background: var(--qx-surface-raised);
  color: var(--qx-ink);
}

[data-experience-theme="nocturne"] :is(.qa-studio-status, .qs-world-status, .qa-trail-status) {
  border-color: rgba(94, 234, 212, 0.28);
  background: rgba(15, 118, 110, 0.18);
  color: #ccfbf1;
}

[data-experience-theme="nocturne"] :is(.qa-studio-status, .qs-world-status, .qa-trail-status)[data-kind="error"] {
  border-color: rgba(253, 164, 175, 0.36);
  background: var(--qx-danger-soft);
  color: #ffe4e6;
}

[data-experience-theme="nocturne"] :is(.qa-media-empty, .qs-empty) {
  border-color: var(--qx-line);
  background: rgba(255, 255, 255, 0.025);
  color: var(--qx-muted);
}

/* QuickGames World: an original nocturnal game scene, without remote art. */
[data-experience-theme="nocturne"].qs-world {
  --qs-terrain-a: #0b1730;
  --qs-terrain-b: #111d3a;
  --qs-terrain-c: #17264a;
  --qs-tile-line: rgba(125, 211, 252, 0.07);
  --qs-road: #27365f;
  --qs-river-a: #075985;
  --qs-river-b: #0e7490;
}

[data-experience-theme="nocturne"].qs-world .qs-map-viewport {
  border-color: #25345c;
  background: #071024;
  box-shadow:
    0 24px 65px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(103, 232, 249, 0.15),
    inset 0 0 38px rgba(45, 212, 191, 0.06);
}

[data-experience-theme="nocturne"].qs-world .qs-map-scene {
  background:
    radial-gradient(circle at 14% 18%, rgba(253, 224, 71, 0.88) 0 0.45%, transparent 0.7%),
    radial-gradient(circle at 23% 74%, rgba(103, 232, 249, 0.72) 0 0.32%, transparent 0.62%),
    radial-gradient(circle at 74% 21%, rgba(196, 181, 253, 0.8) 0 0.38%, transparent 0.66%),
    radial-gradient(circle at 83% 78%, rgba(253, 224, 71, 0.74) 0 0.42%, transparent 0.72%),
    repeating-linear-gradient(0deg, transparent 0 31px, var(--qs-tile-line) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, var(--qs-tile-line) 31px 32px),
    linear-gradient(145deg, var(--qs-terrain-a), var(--qs-terrain-b) 52%, var(--qs-terrain-c));
}

[data-experience-theme="nocturne"].qs-world .qs-map-scene::before,
[data-experience-theme="nocturne"].qs-world .qs-map-scene::after {
  border: 1px solid rgba(94, 234, 212, 0.2);
  background:
    radial-gradient(circle at 42% 38%, rgba(94, 234, 212, 0.32) 0 6%, transparent 7%),
    repeating-radial-gradient(circle, #102c37 0 5px, #071d2b 6px 10px);
  box-shadow: 0 0 30px rgba(45, 212, 191, 0.13);
  opacity: 0.9;
}

[data-experience-theme="nocturne"].qs-world .qs-scene-road {
  border-block: 1px solid rgba(167, 139, 250, 0.2);
  background:
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(196, 181, 253, 0.07) 29px 31px),
    linear-gradient(180deg, #303f6c, var(--qs-road));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -1px rgba(2, 6, 23, 0.55),
    0 0 18px rgba(99, 102, 241, 0.12);
}

[data-experience-theme="nocturne"].qs-world .qs-scene-river {
  border-inline-color: rgba(103, 232, 249, 0.28);
  background: repeating-linear-gradient(0deg, var(--qs-river-a) 0 12px, var(--qs-river-b) 13px 24px);
  box-shadow: 0 0 0 5px rgba(8, 47, 73, 0.72), 0 0 20px rgba(34, 211, 238, 0.2);
}

[data-experience-theme="nocturne"].qs-world .qs-scene-plaza {
  border-color: rgba(253, 224, 71, 0.8);
  background: repeating-conic-gradient(#5b4fc4 0 10deg, #352e77 10deg 20deg);
  color: #fef08a;
  box-shadow:
    0 0 0 5px rgba(139, 123, 255, 0.17),
    0 0 28px rgba(250, 204, 21, 0.24);
}

[data-experience-theme="nocturne"].qs-world .qs-scenery-tree {
  border-color: rgba(94, 234, 212, 0.26);
  background: #0d2f38;
  color: #5eead4;
  box-shadow: 3px 6px 0 #061b28, 0 0 12px rgba(45, 212, 191, 0.17);
}

[data-experience-theme="nocturne"].qs-world .qs-scenery-lamp {
  border-color: rgba(254, 240, 138, 0.78);
  background: #2d214b;
  color: #fde047;
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.68);
}

[data-experience-theme="nocturne"].qs-world .qs-building {
  filter: drop-shadow(8px 12px 7px rgba(0, 0, 0, 0.5));
}

[data-experience-theme="nocturne"].qs-world .qs-building-roof {
  border-color: rgba(196, 181, 253, 0.34);
  background: linear-gradient(145deg, #6559c8 0 48%, #352d78 49% 100%);
}

[data-experience-theme="nocturne"].qs-world .qs-building-body {
  border-color: rgba(125, 211, 252, 0.28);
  background: linear-gradient(90deg, #17233e 0 76%, #203255 77%);
  color: #a5f3fc;
  box-shadow: 6px 7px 0 rgba(2, 6, 23, 0.68), inset 0 0 14px rgba(103, 232, 249, 0.04);
}

[data-experience-theme="nocturne"].qs-world .qs-building-body::after {
  background: #060b19;
  box-shadow: inset 1px 0 rgba(103, 232, 249, 0.28), 0 0 8px rgba(103, 232, 249, 0.12);
}

[data-experience-theme="nocturne"].qs-world .qs-building[data-index="1"] .qs-building-roof { background: linear-gradient(145deg, #d97706, #713f12); }
[data-experience-theme="nocturne"].qs-world .qs-building[data-index="2"] .qs-building-roof { background: linear-gradient(145deg, #0f766e, #134e4a); }
[data-experience-theme="nocturne"].qs-world .qs-building[data-index="3"] .qs-building-roof { background: linear-gradient(145deg, #0369a1, #0c4a6e); }
[data-experience-theme="nocturne"].qs-world .qs-building[data-index="4"] .qs-building-roof { background: linear-gradient(145deg, #6d4aff, #3730a3); }
[data-experience-theme="nocturne"].qs-world .qs-building[data-index="5"] .qs-building-roof { background: linear-gradient(145deg, #be185d, #701a75); }

[data-experience-theme="nocturne"].qs-world.is-lite .qs-map-scene {
  background: #101a33;
}

/* Shared miniature renderer used by QuickSpot, Passport cards and games. */
[data-experience-theme] .qa-runtime-visual {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.28), transparent 28%),
    var(--qa-runtime-background, #475569);
}
[data-experience-theme] .qa-runtime-portrait { width: 100%; height: 100%; object-fit: cover; }
[data-experience-theme] .qa-runtime-aura { position: absolute; z-index: 0; inset: 7%; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.42); border-radius: 46% 54% 58% 42%; }
[data-experience-theme] .qa-runtime-character { position: relative; z-index: 2; display: flex; align-items: center; flex-direction: column; justify-content: flex-end; width: 82%; height: 92%; filter: drop-shadow(0 4px 3px rgba(15,23,42,.28)); transform-origin: 50% 100%; }
[data-experience-theme] .qa-runtime-head { position: relative; z-index: 3; display: block; width: 62%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.7); border-radius: 48% 52% 46% 54%; background: var(--qa-runtime-skin, #fde4c7); }
[data-experience-theme] .qa-runtime-head::before,
[data-experience-theme] .qa-runtime-head::after { content: ""; position: absolute; top: 46%; width: 7%; aspect-ratio: 1; border-radius: 50%; background: #26344b; }
[data-experience-theme] .qa-runtime-head::before { left: 29%; }
[data-experience-theme] .qa-runtime-head::after { right: 29%; }
[data-experience-theme] .qa-runtime-torso { position: relative; z-index: 2; display: grid; place-items: center; width: 88%; height: 50%; margin-top: -4%; border: 2px solid rgba(255,255,255,.7); border-radius: 45% 45% 24% 24%; background: color-mix(in srgb, var(--qa-runtime-skin, #fde4c7), #475569 28%); }
[data-experience-theme] .qa-runtime-layer { position: absolute; z-index: 4; display: grid; place-items: center; margin: 0 !important; font-size: .95em; line-height: 1; text-shadow: 0 1px 2px rgba(15,23,42,.32); }
[data-experience-theme] .qa-runtime-layer[data-slot="body"] { inset: 17% auto auto 50%; opacity: .28; transform: translateX(-50%); }
[data-experience-theme] .qa-runtime-layer[data-slot="outfit"] { inset: 30% auto auto 50%; transform: translateX(-50%); }
[data-experience-theme] .qa-runtime-layer[data-slot="hair"] { left: 50%; top: -28%; transform: translateX(-50%); }
[data-experience-theme] .qa-runtime-layer[data-slot="accessory"] { right: -35%; top: 12%; font-size: .72em; }
[data-experience-theme] .qa-runtime-aura .qa-runtime-layer { inset: 50% auto auto 50%; font-size: 2.4em; opacity: .72; transform: translate(-50%, -50%); }
[data-experience-theme] [data-qa-action^="walk"] .qa-runtime-character { animation: qx-runtime-walk .46s ease-in-out infinite alternate; }
[data-experience-theme] [data-qa-action="celebrate"] .qa-runtime-character { animation: qx-runtime-celebrate .55s ease-in-out 2 alternate; }

@keyframes qx-runtime-walk { to { transform: translateY(-6%) rotate(2deg); } }
@keyframes qx-runtime-celebrate { to { transform: translateY(-13%) scale(1.04); } }

@media (max-width: 680px) {
  /* Compact host-portal chrome while an immersive Quick Experience is open. */
  body:has([data-experience-theme]) :is(
    .gp-topbar,
    .gp-nav,
    .gp-header-search,
    .gp-header .user-pill,
    .gp-header .qg-header-notifications,
    .gp-header-actions > .icon-btn-gp,
    .gp-header .qg-header-rating-chip,
    .gp-header .qg-header-save-cta,
    .gp-language-form
  ) { display: none; }
  body:has([data-experience-theme]) .gp-header > .gp-layout-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    gap: .45rem;
    margin-inline: 0;
    padding: .38rem .75rem;
  }
  body:has([data-experience-theme]) .gp-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body:has([data-experience-theme]) .gp-header-actions { margin-left: auto; gap: .25rem; }
  body:has([data-experience-theme]) #main-content.site-main { margin-top: .65rem !important; padding-top: .5rem; }
  [data-experience-theme="nocturne"].qa-studio,
  [data-experience-theme="nocturne"].qs-world,
  [data-experience-theme="nocturne"].qa-trail {
    padding: 0.5rem;
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-experience-theme] .qa-runtime-character { animation: none !important; }
}