.qs-world {
  --qs-ink: var(--qx-ink, #172554);
  --qs-muted: var(--qx-muted, #64748b);
  --qs-line: var(--qx-line, rgba(30, 64, 175, 0.16));
  --qs-blue: var(--qx-accent, #2563eb);
  --qs-cyan: var(--qx-positive, #0891b2);
  --qs-terrain-a: #86efac;
  --qs-terrain-b: #a7f3d0;
  --qs-terrain-c: #6ee7b7;
  --qs-tile-line: rgba(21,128,61,.1);
  --qs-road: #fde68a;
  --qs-river-a: #38bdf8;
  --qs-river-b: #7dd3fc;
  width: min(1320px, 100%);
  margin: 0 auto 4rem;
  color: var(--qs-ink);
}
.qs-world button,
.qs-world a { min-height: 44px; font: inherit; }
.qs-world :focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
.qs-world-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 28px 28px 12px 12px;
  background:
    radial-gradient(circle at 90% 16%, rgba(253, 230, 138, .75), transparent 18%),
    radial-gradient(circle at 7% 100%, rgba(45, 212, 191, .6), transparent 27%),
    linear-gradient(135deg, var(--qx-hero-start, #083344), var(--qx-hero-middle, #075985) 48%, var(--qx-hero-end, #2563eb));
  color: #fff;
  box-shadow: 0 24px 55px rgba(8, 51, 68, 0.2);
}
.qs-world-hero::after {
  content: "";
  position: absolute;
  right: 8%;
  top: -55px;
  width: 170px;
  aspect-ratio: 1;
  border: 22px solid rgba(255,255,255,.1);
  border-radius: 50%;
}
.qs-world-hero > * { position: relative; z-index: 1; }
.qs-world-hero h1 { margin: 0; font-size: clamp(2.3rem, 7vw, 5.3rem); font-weight: 950; line-height: .95; letter-spacing: -.055em; }
.qs-world-hero p:not(.qs-eyebrow) { max-width: 670px; margin: 1rem 0 0; color: rgba(255,255,255,.82); }
.qs-eyebrow { margin: 0 0 .25rem; color: #0e7490; font-size: .68rem; font-weight: 950; letter-spacing: .17em; text-transform: uppercase; }
.qs-world-hero .qs-eyebrow { color: #a5f3fc; }
.qs-world-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; }
.qs-world-meta span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 38px;
  padding: .45rem .7rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.11);
  font-size: .72rem;
  font-weight: 850;
  backdrop-filter: blur(10px);
}
.qs-world-meta [data-level="quiet"] { background: rgba(22, 163, 74, .28); }
.qs-world-meta [data-level="active"] { background: rgba(8, 145, 178, .35); }
.qs-world-meta [data-level="busy"],
.qs-world-meta [data-level="full"] { background: rgba(225, 29, 72, .35); }
.qs-world-toolbar {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem;
  overflow-x: auto;
  border: 1px solid var(--qs-line);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: #f8fafc;
}
.qs-world-toolbar a,
.qs-world-toolbar button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .75rem;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  color: var(--qs-ink);
  font-size: .77rem;
  font-weight: 900;
  text-decoration: none;
}
.qs-world-toolbar a:hover,
.qs-world-toolbar button:hover { border-color: #38bdf8; background: #f0f9ff; color: #075985; }
.qs-world-toolbar button[aria-pressed="true"] { border-color: #f59e0b; background: #fffbeb; color: #92400e; }
.qs-world-toolbar > span { margin-left: auto; color: var(--qs-muted); font-size: .72rem; white-space: nowrap; }
.qs-world-status {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 48px;
  margin: 1rem 0;
  padding: .65rem .85rem;
  border: 1px solid #bae6fd;
  border-radius: 13px;
  background: #f0f9ff;
  color: #075985;
  font-weight: 800;
}
.qs-world-status[data-kind="success"] { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.qs-world-status[data-kind="error"] { border-color: #fecaca; background: #fff1f2; color: #9f1239; }
.qs-world-layout { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(300px, .9fr); gap: 1rem; align-items: start; }
.qs-map-column,
.qs-place-panel { min-width: 0; }
.qs-map-instructions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 .25rem .55rem; color: var(--qs-muted); font-size: .72rem; }
.qs-map-instructions span { display: flex; align-items: center; gap: .28rem; }
.qs-map-instructions kbd { min-width: 24px; padding: .22rem; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 6px; background: #fff; color: #334155; text-align: center; box-shadow: none; }
.qs-map-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 3px solid #fff;
  border-radius: 24px;
  background: #a7f3d0;
  box-shadow: 0 18px 50px rgba(15, 118, 110, .18), 0 0 0 1px var(--qs-line);
  cursor: crosshair;
  touch-action: manipulation;
}
.qs-map-viewport:focus { box-shadow: 0 18px 50px rgba(15, 118, 110, .2), 0 0 0 4px #fbbf24; }
.qs-map-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.32) 0 2%, transparent 2.4%),
    radial-gradient(circle at 81% 78%, rgba(255,255,255,.28) 0 2.4%, transparent 2.8%),
    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(135deg, var(--qs-terrain-a), var(--qs-terrain-b) 48%, var(--qs-terrain-c));
}
.qs-map-scene::before,
.qs-map-scene::after {
  content: "";
  position: absolute;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 45% 55% 58% 42%;
  background: repeating-radial-gradient(circle, #22c55e 0 5px, #15803d 6px 9px);
  opacity: .7;
}
.qs-map-scene::before { left: -5%; top: 34%; }
.qs-map-scene::after { right: -4%; top: 9%; transform: rotate(35deg); }
.qs-map-scene[data-qs-renderer="top_down_2d"] {
  background: #101827;
}
.qs-map-scene[data-qs-renderer="top_down_2d"]::before,
.qs-map-scene[data-qs-renderer="top_down_2d"]::after,
.qs-map-scene[data-qs-renderer="top_down_2d"] > .qs-scene-river,
.qs-map-scene[data-qs-renderer="top_down_2d"] > .qs-scene-road,
.qs-map-scene[data-qs-renderer="top_down_2d"] > .qs-scene-plaza,
.qs-map-scene[data-qs-renderer="top_down_2d"] > .qs-scenery-layer {
  display: none;
}
.qs-scene-asset-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.qs-scene-asset {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.qs-scene-river {
  position: absolute;
  top: -20%;
  left: 47%;
  width: 8%;
  height: 145%;
  transform: rotate(13deg);
  border-inline: 4px solid rgba(255,255,255,.56);
  background: repeating-linear-gradient(0deg, var(--qs-river-a) 0 12px, var(--qs-river-b) 13px 24px);
  box-shadow: 0 0 0 5px rgba(245, 222, 179, .72);
}
.qs-scene-road { position: absolute; z-index: 2; background: var(--qs-road); box-shadow: inset 0 0 0 3px rgba(217, 119, 6, .13); }
.qs-scene-road-x { left: 0; top: 46%; width: 100%; height: 10%; }
.qs-scene-road-y { left: 43.5%; top: 0; width: 8%; height: 100%; }
.qs-scene-plaza {
  position: absolute;
  z-index: 3;
  left: 41%;
  top: 39%;
  display: grid;
  place-items: center;
  width: 13%;
  aspect-ratio: 1;
  border: 5px solid #fef3c7;
  border-radius: 50%;
  background: repeating-conic-gradient(#f59e0b 0 10deg, #fbbf24 10deg 20deg);
  color: #fff;
  font-size: clamp(1rem, 3vw, 2.4rem);
  box-shadow: 0 7px 15px rgba(146, 64, 14, .25);
}
.qs-scenery-layer { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.qs-scenery { position: absolute; display: grid; place-items: center; width: clamp(18px, 3.2%, 34px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.qs-scenery-tree { border: 2px solid rgba(255,255,255,.58); border-radius: 50% 50% 45% 45%; background: #166534; color: #86efac; box-shadow: 4px 6px 0 rgba(20,83,45,.3); }
.qs-scenery-lamp { border: 2px solid #fef3c7; border-radius: 50%; background: #78350f; color: #fde047; box-shadow: 0 0 12px rgba(250,204,21,.55); }
.qs-building { position: absolute; z-index: 5; display: block; min-width: 38px; min-height: 34px; transform: translate(-50%, -56%); filter: drop-shadow(7px 10px 5px rgba(30,41,59,.23)); transition: transform .18s ease, filter .18s ease; }
.qs-building-roof { position: absolute; z-index: 3; left: -13%; top: -43%; width: 126%; height: 53%; border: 2px solid rgba(255,255,255,.52); border-radius: 7px 7px 3px 3px; background: linear-gradient(145deg, #fda4af 0 48%, #e11d48 49% 100%); clip-path: polygon(50% 0, 100% 72%, 91% 100%, 9% 100%, 0 72%); }
.qs-building-body { position: absolute; inset: 0; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.76); border-radius: 5px; background: linear-gradient(90deg, #fffbeb 0 76%, #fed7aa 77%); color: #9a3412; box-shadow: 6px 7px 0 rgba(120,53,15,.26); }
.qs-building-body::after { content: ""; position: absolute; right: 8%; bottom: 0; width: 18%; height: 42%; border-radius: 2px 2px 0 0; background: #92400e; box-shadow: inset 2px 0 rgba(255,255,255,.25); }
.qs-building-body i { font-size: clamp(.72rem, 1.8vw, 1.35rem); }
.qs-building-body strong { position: absolute; left: 50%; bottom: -1.15rem; width: max-content; max-width: 150px; transform: translateX(-50%); padding: .12rem .28rem; border-radius: 4px; background: rgba(15,23,42,.82); color: #fff; font-size: clamp(.42rem, .8vw, .68rem); line-height: 1.2; white-space: nowrap; }
.qs-building[data-index="1"] .qs-building-roof { background: #f59e0b; }
.qs-building[data-index="2"] .qs-building-roof { background: #22c55e; }
.qs-building[data-index="3"] .qs-building-roof { background: #38bdf8; }
.qs-building[data-index="4"] .qs-building-roof { background: #a78bfa; }
.qs-building[data-index="5"] .qs-building-roof { background: #f472b6; }
.qs-building[data-near="true"] { z-index: 8; filter: drop-shadow(0 0 8px #fef08a); }
.qs-building[data-near="true"] .qs-building-body { box-shadow: 0 0 0 4px #facc15; }
.qs-building[data-selected="true"] { z-index: 9; transform: translate(-50%, -62%) scale(1.14); filter: drop-shadow(0 0 11px #fef08a); }
.qs-player { position: absolute; z-index: 12; display: grid; place-items: center; width: clamp(44px, 5.2%, 58px); aspect-ratio: 1 / 1.42; transform: translate(-50%, -76%); transition: left .12s linear, top .12s linear; }
.qs-player-aura { position: absolute; z-index: 0; left: 8%; right: 8%; bottom: -4%; height: 18%; border: 2px solid rgba(255,255,255,.86); border-radius: 50%; background: rgba(76,29,149,.2); box-shadow: 0 0 12px rgba(255,255,255,.42); animation: qs-player-pulse 2s ease-in-out infinite; }
.qs-player-body { position: relative; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; overflow: visible; color: #fff; }
.qs-player-body .qa-runtime-visual.qa-runtime-world-avatar {
  --qa-mini-outline: #172033;
  --qa-mini-highlight: rgba(255,255,255,.72);
  position: absolute;
  inset: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* Map bodies are a dedicated semantic derivative. Portrait layers and their
   Font Awesome fallbacks never enter this 44-58px composition. */
.qs-player-body .qa-runtime-mini-accent { position: absolute; z-index: 1; inset: 15% 2% 10%; pointer-events: none; }
.qs-player-body .qa-runtime-mini-accent::before,
.qs-player-body .qa-runtime-mini-accent::after { content: ""; position: absolute; display: none; width: 4px; height: 4px; background: var(--qa-runtime-aura, #facc15); box-shadow: 0 0 0 1px rgba(255,255,255,.75); }
.qs-player-body .qa-runtime-world-avatar[data-qa-aura-item]:not([data-qa-aura-item=""]) .qa-runtime-mini-accent::before,
.qs-player-body .qa-runtime-world-avatar[data-qa-aura-item]:not([data-qa-aura-item=""]) .qa-runtime-mini-accent::after { display: block; }
.qs-player-body .qa-runtime-mini-accent::before { left: 2%; top: 50%; }
.qs-player-body .qa-runtime-mini-accent::after { right: 1%; bottom: 12%; }
.qs-player-body .qa-runtime-world-avatar[data-qa-aura-item="pixel-pop"] .qa-runtime-mini-accent::before { box-shadow: 0 0 0 1px rgba(255,255,255,.75), 5px -7px 0 -1px var(--qa-runtime-aura); }
.qs-player-body .qa-runtime-world-avatar[data-qa-aura-item="pixel-pop"] .qa-runtime-mini-accent::after { box-shadow: 0 0 0 1px rgba(255,255,255,.75), -5px 7px 0 -1px var(--qa-runtime-aura); }
.qs-player-body .qa-runtime-world-avatar[data-qa-aura-item="tiny-sparks"] .qa-runtime-mini-accent::before,
.qs-player-body .qa-runtime-world-avatar[data-qa-aura-item="tiny-sparks"] .qa-runtime-mini-accent::after { transform: rotate(45deg); }
.qs-world .qs-player-body .qa-runtime-mini-character { position: absolute; inset: 0 4% 1%; display: block; width: auto; height: auto; filter: drop-shadow(0 3px 0 rgba(15,23,42,.26)); transform-origin: 50% 91%; }
.qs-player-body .qa-runtime-shadow { position: absolute; z-index: 0; left: 17%; right: 17%; bottom: 0; height: 9%; border-radius: 50%; background: rgba(15,23,42,.42); }
.qs-player-body .qa-runtime-tail { display: none; position: absolute; z-index: 1; right: 3%; bottom: 20%; width: 34%; height: 27%; box-sizing: border-box; border: 2px solid var(--qa-mini-outline); border-radius: 72% 36% 65% 30%; background: var(--qa-runtime-body, #f97316); box-shadow: inset 0 0 0 1px var(--qa-mini-highlight); transform: rotate(24deg); transform-origin: 15% 82%; }
.qs-player-body .qa-runtime-world-avatar[data-qa-body-item="fox-traveler"] .qa-runtime-tail,
.qs-player-body .qa-runtime-world-avatar[data-qa-body-item="cat-scout"] .qa-runtime-tail,
.qs-player-body .qa-runtime-world-avatar[data-qa-body-item="little-dragon"] .qa-runtime-tail { display: block; }
.qs-player-body .qa-runtime-leg { position: absolute; z-index: 2; bottom: 4%; width: 20%; height: 24%; box-sizing: border-box; border: 2px solid var(--qa-mini-outline); border-radius: 45% 45% 34% 34%; background: color-mix(in srgb, var(--qa-runtime-outfit, #6d4aff), #111827 24%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); transform-origin: 50% 8%; }
.qs-player-body .qa-runtime-leg-left { left: 27%; }
.qs-player-body .qa-runtime-leg-right { right: 27%; }
.qs-world .qs-player-body .qa-runtime-torso { position: absolute; z-index: 4; left: 21%; bottom: 20%; width: 58%; height: 42%; box-sizing: border-box; margin: 0; border: 2px solid var(--qa-mini-outline); border-radius: 42% 42% 24% 24%; background: var(--qa-runtime-outfit, #6d4aff); box-shadow: inset 0 3px rgba(255,255,255,.28), inset 0 -4px rgba(15,23,42,.15); }
.qs-player-body .qa-runtime-torso::before { content: ""; position: absolute; left: 31%; right: 31%; top: 8%; height: 23%; border-bottom: 2px solid rgba(255,255,255,.76); transform: rotate(45deg); }
.qs-player-body .qa-runtime-torso::after { content: ""; position: absolute; display: none; }
.qs-player-body .qa-runtime-world-avatar[data-qa-outfit-item="arena-varsity"] .qa-runtime-torso::after { display: block; left: 45%; top: 18%; width: 10%; height: 58%; background: rgba(255,255,255,.72); box-shadow: -8px -3px 0 -3px rgba(255,255,255,.62), 8px -3px 0 -3px rgba(255,255,255,.62); }
.qs-player-body .qa-runtime-world-avatar[data-qa-outfit-item="artisan-apron"] .qa-runtime-torso::after { display: block; left: 21%; right: 21%; top: 35%; bottom: 5%; border: 1px solid rgba(255,255,255,.72); border-radius: 2px; }
.qs-player-body .qa-runtime-world-avatar[data-qa-outfit-item="explorer-jacket"] .qa-runtime-torso::after { display: block; left: 15%; top: 23%; width: 70%; height: 2px; background: rgba(255,255,255,.7); transform: rotate(32deg); }
.qs-player-body .qa-runtime-arm { position: absolute; z-index: 3; bottom: 24%; width: 17%; height: 34%; box-sizing: border-box; border: 2px solid var(--qa-mini-outline); border-radius: 999px; background: var(--qa-runtime-outfit, #6d4aff); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); transform-origin: 50% 12%; }
.qs-player-body .qa-runtime-arm-left { left: 8%; transform: rotate(8deg); }
.qs-player-body .qa-runtime-arm-right { right: 8%; transform: rotate(-8deg); }
.qs-world .qs-player-body .qa-runtime-head { position: absolute; z-index: 6; left: 21%; top: 13%; display: block; width: 58%; aspect-ratio: 1; box-sizing: border-box; border: 2px solid var(--qa-mini-outline); border-radius: 46% 54% 48% 52%; background: var(--qa-runtime-skin, #fde4c7); box-shadow: inset 0 -3px rgba(120,53,15,.09), inset 0 2px rgba(255,255,255,.5); }
.qs-world .qs-player-body .qa-runtime-head::before,
.qs-world .qs-player-body .qa-runtime-head::after { content: none; }
.qs-player-body .qa-runtime-ear { display: none; position: absolute; z-index: 0; top: -24%; width: 40%; height: 42%; box-sizing: border-box; border: 2px solid var(--qa-mini-outline); background: var(--qa-runtime-body, #f97316); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.qs-player-body .qa-runtime-ear::after { content: ""; position: absolute; left: 29%; top: 39%; width: 42%; height: 40%; background: color-mix(in srgb, var(--qa-runtime-body, #f97316), #fff 52%); clip-path: inherit; }
.qs-player-body .qa-runtime-ear-left { left: -4%; transform: rotate(-12deg); }
.qs-player-body .qa-runtime-ear-right { right: -4%; transform: rotate(12deg); }
.qs-player-body .qa-runtime-world-avatar[data-qa-body-item="fox-traveler"] .qa-runtime-ear,
.qs-player-body .qa-runtime-world-avatar[data-qa-body-item="cat-scout"] .qa-runtime-ear,
.qs-player-body .qa-runtime-world-avatar[data-qa-body-item="little-dragon"] .qa-runtime-ear { display: block; }
.qs-player-body .qa-runtime-world-avatar[data-qa-body-item="bear-maker"] .qa-runtime-ear { display: block; border-radius: 50%; clip-path: none; }
.qs-player-body .qa-runtime-world-avatar[data-qa-body-item="robo-buddy"] .qa-runtime-head { border-radius: 24%; background: color-mix(in srgb, var(--qa-runtime-body, #64748b), #fff 64%); }
.qs-player-body .qa-runtime-hair { position: absolute; z-index: 2; left: -3%; right: -3%; top: -5%; height: 42%; border-radius: 54% 46% 38% 32%; background: var(--qa-runtime-hair, #26344b); clip-path: polygon(0 0, 100% 0, 96% 78%, 78% 58%, 65% 88%, 50% 64%, 34% 90%, 17% 60%, 4% 80%); }
.qs-player-body .qa-runtime-world-avatar[data-qa-hair-item="sprout-bob"] .qa-runtime-hair { left: 15%; right: 15%; top: -2%; height: 18%; border-radius: 55% 45% 52% 48%; clip-path: none; }
.qs-player-body .qa-runtime-face { position: absolute; z-index: 3; inset: 0; }
.qs-player-body .qa-runtime-face::before { content: ""; position: absolute; left: 27%; top: 51%; width: 3px; height: 3px; border-radius: 50%; background: var(--qa-mini-outline); box-shadow: 9px 0 var(--qa-mini-outline); }
.qs-player-body .qa-runtime-face::after { content: ""; position: absolute; left: 37%; top: 67%; width: 26%; height: 10%; border-bottom: 2px solid #a3473d; border-radius: 50%; }
.qs-player-body .qa-runtime-signature { position: absolute; z-index: 5; display: none; pointer-events: none; }
.qs-player-body .qa-runtime-world-avatar[data-qa-hair-item="sprout-bob"] .qa-runtime-signature-hair { display: block; left: calc(50% - 1px); top: -38%; width: 3px; height: 38%; border-radius: 2px; background: var(--qa-runtime-hair, #15803d); box-shadow: 0 0 0 1px color-mix(in srgb, var(--qa-runtime-hair, #15803d), #111827 28%); }
.qs-player-body .qa-runtime-world-avatar[data-qa-hair-item="sprout-bob"] .qa-runtime-signature-hair::before,
.qs-player-body .qa-runtime-world-avatar[data-qa-hair-item="sprout-bob"] .qa-runtime-signature-hair::after { content: ""; position: absolute; top: -1px; width: 9px; height: 6px; border: 1px solid color-mix(in srgb, var(--qa-runtime-hair, #15803d), #111827 24%); background: var(--qa-runtime-hair, #15803d); }
.qs-player-body .qa-runtime-world-avatar[data-qa-hair-item="sprout-bob"] .qa-runtime-signature-hair::before { right: 1px; border-radius: 8px 1px 8px 1px; transform: rotate(20deg); }
.qs-player-body .qa-runtime-world-avatar[data-qa-hair-item="sprout-bob"] .qa-runtime-signature-hair::after { left: 2px; border-radius: 1px 8px 1px 8px; transform: rotate(-18deg); }
.qs-player-body .qa-runtime-world-avatar[data-qa-hair-item="victory-crown-hair"] .qa-runtime-signature-hair { display: block; left: 25%; top: -31%; width: 50%; height: 32%; border: 1px solid var(--qa-mini-outline); background: var(--qa-runtime-hair, #ca8a04); clip-path: polygon(0 100%, 0 20%, 25% 56%, 50% 0, 75% 56%, 100% 20%, 100% 100%); }
.qs-player-body .qa-runtime-world-avatar[data-qa-hair-item="festival-ribbon"] .qa-runtime-signature-hair { display: block; left: 35%; top: -28%; width: 30%; height: 24%; border-radius: 50%; background: var(--qa-runtime-hair, #e11d48); box-shadow: -6px 1px 0 -1px var(--qa-runtime-hair), 6px 1px 0 -1px var(--qa-runtime-hair); }
.qs-player-body .qa-runtime-world-avatar[data-qa-accessory-item="round-glasses"] .qa-runtime-signature-accessory { display: block; inset: 0; background: linear-gradient(var(--qa-runtime-accessory, #0f172a), var(--qa-runtime-accessory, #0f172a)) no-repeat 50% 55% / 8px 1px; }
.qs-player-body .qa-runtime-world-avatar[data-qa-accessory-item="round-glasses"] .qa-runtime-signature-accessory::before,
.qs-player-body .qa-runtime-world-avatar[data-qa-accessory-item="round-glasses"] .qa-runtime-signature-accessory::after { content: ""; position: absolute; top: 44%; width: 9px; height: 8px; box-sizing: border-box; border: 1.5px solid var(--qa-runtime-accessory, #0f172a); border-radius: 50%; background: rgba(255,255,255,.12); }
.qs-player-body .qa-runtime-world-avatar[data-qa-accessory-item="round-glasses"] .qa-runtime-signature-accessory::before { left: 12%; }
.qs-player-body .qa-runtime-world-avatar[data-qa-accessory-item="round-glasses"] .qa-runtime-signature-accessory::after { right: 12%; }
.qs-player-body .qa-runtime-world-avatar[data-qa-accessory-item="music-headphones"] .qa-runtime-signature-accessory { display: block; left: -10%; right: -10%; top: 16%; height: 62%; border: 3px solid var(--qa-runtime-accessory, #4f46e5); border-bottom: 0; border-radius: 50% 50% 0 0; }
.qs-player-body .qa-runtime-world-avatar[data-qa-accessory-item="traveler-scarf"] .qa-runtime-signature-accessory { display: block; left: 10%; right: 10%; top: 86%; height: 18%; border: 1px solid var(--qa-mini-outline); border-radius: 3px; background: var(--qa-runtime-accessory, #dc2626); transform: rotate(-4deg); }
.qs-player-body .qa-runtime-world-avatar[data-qa-accessory-item="spot-satchel"] .qa-runtime-signature-accessory,
.qs-player-body .qa-runtime-world-avatar[data-qa-accessory-item="memory-camera"] .qa-runtime-signature-accessory { display: block; left: 73%; top: 113%; width: 34%; height: 30%; border: 2px solid var(--qa-mini-outline); border-radius: 3px; background: var(--qa-runtime-accessory, #854d0e); }
.qs-player-body .qa-runtime-world-avatar[data-qa-accessory-item="star-pin"] .qa-runtime-signature-accessory { display: block; left: 68%; top: 106%; width: 6px; height: 6px; background: var(--qa-runtime-accessory, #f59e0b); clip-path: polygon(50% 0, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0 50%, 39% 35%); }
.qs-player-body[data-qa-direction="north"] .qa-runtime-face,
.qs-player-body[data-qa-direction="north"] .qa-runtime-signature-accessory { opacity: 0; }
.qs-player-body[data-qa-direction="north"] .qa-runtime-hair { height: 55%; clip-path: ellipse(55% 52% at 50% 42%); }
.qs-player-body[data-qa-direction="west"] .qa-runtime-head { transform: translateX(-5%); }
.qs-player-body[data-qa-direction="east"] .qa-runtime-head { transform: translateX(5%); }
.qs-player-body[data-qa-direction="west"] .qa-runtime-face::before { left: 21%; box-shadow: none; }
.qs-player-body[data-qa-direction="west"] .qa-runtime-face::after { left: 23%; width: 24%; }
.qs-player-body[data-qa-direction="east"] .qa-runtime-face::before { left: 66%; box-shadow: none; }
.qs-player-body[data-qa-direction="east"] .qa-runtime-face::after { left: 54%; width: 24%; }
.qs-player-body[data-qa-direction="west"] .qa-runtime-tail { left: 3%; right: auto; transform: rotate(-24deg); }
.qs-world .qs-player-body[data-qa-action^="walk"] .qa-runtime-mini-character { animation: qs-mini-step-body .3s steps(2, end) infinite; }
.qs-world .qs-player-body[data-qa-action^="walk"] .qa-runtime-leg-left,
.qs-world .qs-player-body[data-qa-action^="walk"] .qa-runtime-arm-right { animation: qs-mini-step-forward .3s steps(2, end) infinite; }
.qs-world .qs-player-body[data-qa-action^="walk"] .qa-runtime-leg-right,
.qs-world .qs-player-body[data-qa-action^="walk"] .qa-runtime-arm-left { animation: qs-mini-step-back .3s steps(2, end) infinite; }
.qs-player-nameplate { position: absolute; z-index: 8; left: 50%; bottom: calc(100% + 2px); display: inline-flex; align-items: center; gap: .3rem; max-width: 156px; min-height: 30px; transform: translateX(-50%); padding: .14rem .38rem; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; background: rgba(15,23,42,.88); box-shadow: 0 4px 10px rgba(15,23,42,.24); }
.qs-player-nameplate strong { max-width: 112px; overflow: hidden; color: #fff; font-size: clamp(.45rem, .9vw, .68rem); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.qs-player-portrait { flex: 0 0 auto; width: 24px; height: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.84); border-radius: 50%; background: #475569; }
.qs-player-portrait[hidden] { display: none; }
.qs-player-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qs-touch-controls { display: none; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(2, 52px); justify-content: center; gap: 5px; margin-top: .75rem; }
.qs-touch-controls button { display: grid; place-items: center; border: 1px solid #cbd5e1; border-radius: 14px; background: #fff; color: #0f3d65; box-shadow: 0 4px 8px rgba(15,23,42,.08); }
.qs-touch-controls button:active { transform: translateY(1px); background: #e0f2fe; }
.qs-touch-controls [data-direction="north"] { grid-column: 2; grid-row: 1; }
.qs-touch-controls [data-direction="west"] { grid-column: 1; grid-row: 2; }
.qs-touch-controls [data-direction="south"] { grid-column: 2; grid-row: 2; }
.qs-touch-controls [data-direction="east"] { grid-column: 3; grid-row: 2; }
.qs-place-panel { display: grid; gap: 1rem; }
.qs-nearby-card,
.qs-building-index { border: 1px solid var(--qs-line); border-radius: 20px; background: #fff; box-shadow: 0 14px 35px rgba(30,64,175,.08); }
.qs-nearby-card { padding: 1.25rem; }
.qs-nearby-card[data-near="true"] { border-color: #facc15; background: linear-gradient(145deg, #fff, #fffbeb); box-shadow: 0 14px 35px rgba(234,179,8,.16); }
.qs-nearby-card h2,
.qs-building-index h2 { margin: 0; font-weight: 950; letter-spacing: -.025em; }
.qs-nearby-card > p:not(.qs-eyebrow) { min-height: 2.8em; margin: .75rem 0; color: var(--qs-muted); font-size: .82rem; }
.qs-distance { display: inline-flex; min-height: 31px; align-items: center; padding: .3rem .6rem; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: .72rem; font-weight: 900; }
.qs-distance[data-near="true"] { background: #fef3c7; color: #92400e; }
.qs-enter-action,
.qs-open-action { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 0; border-radius: 12px; font-weight: 900; cursor: pointer; }
.qs-enter-action { width: 100%; margin-top: 1rem; padding: .7rem 1rem; background: linear-gradient(135deg, #0891b2, #2563eb); color: #fff; }
.qs-enter-action:disabled { opacity: .45; cursor: not-allowed; }
.qs-building-index { overflow: hidden; }
.qs-building-index-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--qs-line); }
.qs-building-index-head > span { display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 50%; background: #e0f2fe; color: #075985; font-weight: 950; }
.qs-building-index-note { display: flex; align-items: flex-start; gap: .45rem; margin: 0; padding: .7rem 1rem; border-bottom: 1px solid var(--qs-line); background: var(--qx-surface-soft, #f8fafc); color: var(--qs-muted); font-size: .68rem; }
.qs-building-index-note i { margin-top: .12rem; color: var(--qs-cyan); }
.qs-building-list { display: grid; max-height: 510px; overflow-y: auto; scrollbar-width: thin; }
.qs-building-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: .65rem; padding: .7rem; border-bottom: 1px solid #eef2ff; }
.qs-building-row:last-child { border-bottom: 0; }
.qs-building-row-icon { display: grid; place-items: center; width: 42px; aspect-ratio: 1; border-radius: 12px; background: #eff6ff; color: #1d4ed8; }
.qs-building-row > div { display: grid; min-width: 0; }
.qs-building-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-building-row small { display: -webkit-box; overflow: hidden; color: var(--qs-muted); font-size: .7rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.qs-building-row div span { color: #94a3b8; font-size: .62rem; }
.qs-open-action { min-width: 88px; padding: .5rem .65rem; border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; font-size: .7rem; }
.qs-open-action:hover { background: #dbeafe; }
.qs-click-marker { position: absolute; z-index: 18; width: 28px; height: 28px; transform: translate(-50%, -100%); color: #e11d48; font-size: 1.55rem; filter: drop-shadow(0 3px 2px rgba(15,23,42,.28)); animation: qs-marker-bounce .55s ease-in-out infinite alternate; pointer-events: none; }
.qs-proximity-action { position: absolute; z-index: 20; display: inline-flex; align-items: center; gap: .4rem; max-width: min(220px, 62%); min-height: 42px; padding: .55rem .75rem; transform: translate(-50%, -50%); border: 2px solid #fef3c7; border-radius: 999px; background: rgba(15,23,42,.92); color: #fff; font-size: clamp(.64rem, 1.6vw, .8rem); font-weight: 950; box-shadow: 0 8px 22px rgba(15,23,42,.32); cursor: pointer; }
.qs-proximity-action[hidden], .qs-click-marker[hidden] { display: none; }
.qs-empty { margin: 1rem; padding: 1rem; border: 1px dashed #cbd5e1; border-radius: 12px; color: var(--qs-muted); text-align: center; }
.qs-social-deck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.qs-presence-panel,
.qs-discovery-panel { min-width: 0; padding: 1.15rem; border: 1px solid var(--qs-line); border-radius: 20px; background: #fff; box-shadow: 0 14px 35px rgba(30,64,175,.08); }
.qs-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.qs-panel-head h2 { margin: 0; font-size: 1.2rem; font-weight: 950; }
.qs-panel-head > span { display: grid; place-items: center; min-width: 36px; height: 36px; border-radius: 50%; background: #ccfbf1; color: #0f766e; font-weight: 950; }
.qs-panel-head > a { display: inline-flex; align-items: center; padding: .55rem .75rem; border-radius: 11px; background: #eff6ff; color: #1d4ed8; font-size: .74rem; font-weight: 900; text-decoration: none; }
.qs-privacy-note { display: flex; align-items: flex-start; gap: .5rem; margin: .8rem 0; color: var(--qs-muted); font-size: .74rem; }
.qs-privacy-note i { margin-top: .15rem; color: #0f766e; }
.qs-ready-toggle { display: flex; align-items: center; gap: .65rem; min-height: 44px; margin: .75rem 0; padding: .5rem .7rem; border: 1px solid #a7f3d0; border-radius: 12px; background: #f0fdfa; color: #115e59; font-size: .78rem; font-weight: 850; cursor: pointer; }
.qs-ready-toggle input { width: 20px; height: 20px; accent-color: #0d9488; }
.qs-presence-list,
.qs-discovery-list { display: grid; gap: .6rem; }
.qs-presence-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .7rem; border: 1px solid #e2e8f0; border-radius: 14px; background: #f8fafc; }
.qs-presence-avatar { display: grid; place-items: center; width: 48px; aspect-ratio: 1; overflow: hidden; border: 3px solid #fff; border-radius: 16px; color: #fff; box-shadow: 0 3px 9px rgba(15,23,42,.15); }
.qs-presence-avatar img { width: 100%; height: 100%; object-fit: cover; }
.qs-presence-body { display: grid; min-width: 0; }
.qs-presence-body strong { overflow: hidden; font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.qs-presence-body span { color: var(--qs-muted); font-size: .68rem; }
.qs-presence-public { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.qs-presence-public span { max-width: 130px; padding: .18rem .38rem; overflow: hidden; border: 1px solid var(--qs-line); border-radius: 999px; background: var(--qx-surface-raised, #fff); color: var(--qs-blue); font-size: .58rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.qs-presence-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.qs-presence-actions > a,
.qs-presence-actions > button,
.qs-presence-actions summary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .42rem .6rem; border: 1px solid #cbd5e1; border-radius: 9px; background: #fff; color: #334155; font-size: .68rem; font-weight: 850; text-decoration: none; cursor: pointer; list-style: none; }
.qs-presence-actions summary::-webkit-details-marker { display: none; }
.qs-presence-actions details { position: relative; }
.qs-report-form { position: absolute; z-index: 30; right: 0; top: calc(100% + .35rem); display: grid; gap: .4rem; width: min(260px, 75vw); padding: .65rem; border: 1px solid #fecdd3; border-radius: 12px; background: #fff; box-shadow: 0 12px 28px rgba(15,23,42,.18); }
.qs-report-form select,
.qs-report-form textarea { width: 100%; min-width: 0; padding: .5rem; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; }
.qs-report-form button { min-height: 44px; border: 0; border-radius: 8px; background: #be123c; color: #fff; font-size: .72rem; font-weight: 900; }
.qs-discovery-card { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: .7rem; padding: .72rem; border: 1px solid #ede9fe; border-radius: 14px; background: #faf5ff; color: #4c1d95; text-decoration: none; }
.qs-discovery-card > span:first-child { display: grid; place-items: center; width: 44px; aspect-ratio: 1; border-radius: 12px; background: #ede9fe; }
.qs-discovery-card > span:last-child { display: grid; min-width: 0; }
.qs-discovery-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-discovery-card small { display: -webkit-box; overflow: hidden; color: #6d28d9; font-size: .7rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.qs-discovery-coming { padding: .9rem; border: 1px dashed color-mix(in srgb, var(--qs-blue), transparent 55%); border-radius: 16px; background: var(--qx-surface-soft, #f8fafc); }
.qs-discovery-coming > strong { display: flex; align-items: center; gap: .5rem; color: var(--qs-ink); }
.qs-discovery-coming > p { margin: .4rem 0 .75rem; color: var(--qs-muted); font-size: .72rem; }
.qs-discovery-coming > div { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; }
.qs-discovery-coming > div > span { display: grid; place-items: center; min-width: 0; padding: .65rem .35rem; border: 1px solid var(--qs-line); border-radius: 12px; background: var(--qx-surface-raised, #fff); text-align: center; }
.qs-discovery-coming > div i { color: var(--qs-blue); font-size: 1.25rem; }
.qs-discovery-coming > div b { max-width: 100%; margin-top: .35rem; overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.qs-discovery-coming > div small { color: var(--qs-muted); font-size: .6rem; }
.qs-world.is-lite .qs-scene-river,
.qs-world.is-lite .qs-map-scene::before,
.qs-world.is-lite .qs-map-scene::after,
.qs-world.is-lite .qs-player-aura { display: none; }
.qs-world.is-lite .qs-player,
.qs-world.is-lite .qs-building { transition: none; filter: none; }
.qs-world.is-lite .qs-player-body .qa-runtime-mini-character,
.qs-world.is-lite .qs-player-body .qa-runtime-leg,
.qs-world.is-lite .qs-player-body .qa-runtime-arm { animation: none !important; }
.qs-world.is-lite .qs-map-scene { background: #bbf7d0; }

@keyframes qs-player-pulse { 50% { transform: scale(1.12); opacity: .55; } }
@keyframes qs-marker-bounce { to { transform: translate(-50%, -122%); } }
@keyframes qs-mini-step-body { 50% { transform: translateY(-4%); } }
@keyframes qs-mini-step-forward { 50% { transform: rotate(17deg) translateY(-4%); } }
@keyframes qs-mini-step-back { 50% { transform: rotate(-17deg); } }
@media (max-width: 980px) {
  .qs-world-layout { grid-template-columns: 1fr; }
  .qs-place-panel { grid-template-columns: minmax(240px,.8fr) minmax(0,1.2fr); }
  .qs-building-list { max-height: 360px; }
  .qs-social-deck { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .qs-world { margin-bottom: 2rem; }
  .qs-world-hero { flex-direction: column; align-items: flex-start; border-radius: 20px 20px 10px 10px; }
  .qs-world-meta { justify-content: flex-start; }
  .qs-world-toolbar > span { display: none; }
  .qs-map-instructions { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .qs-map-viewport { border-radius: 16px; }
  .qs-touch-controls { display: grid; }
  .qs-building-body strong { display: none; }
  .qs-place-panel { grid-template-columns: 1fr; }
  .qs-building-row { grid-template-columns: 42px minmax(0,1fr); }
  .qs-building-row .qs-open-action { grid-column: 1 / -1; width: 100%; }
  .qs-presence-card { grid-template-columns: 48px minmax(0,1fr); }
  .qs-presence-actions { grid-column: 1 / -1; justify-content: stretch; }
  .qs-presence-actions > a,
  .qs-presence-actions > button,
  .qs-presence-actions > details { flex: 1 1 90px; }
  .qs-presence-actions summary { width: 100%; }
  .qs-report-form { left: 0; right: auto; }
  .qs-discovery-coming > div { grid-template-columns: 1fr; }
  .qs-discovery-coming > div > span { grid-template-columns: 28px minmax(0,1fr) auto; justify-items: start; gap: .45rem; text-align: left; }
  .qs-discovery-coming > div b { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .qs-world *,
  .qs-world *::before,
  .qs-world *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
}