:root {
  color-scheme: dark;
  --purple: #a78bfa;
  --paper: #12082e;
  --panel: rgba(30, 20, 60, 0.8);
}

html { width: 100%; font-size: clamp(75%, 3.72093vw, 100%); background: #060c1e !important; }
html, body { min-height: 100%; margin: 0; background-color: #060c1e !important; }
body { width: 100%; overflow-x: hidden; background: #060c1e !important; }
#activity-invite-root {
  position: fixed;
  inset: 0;
  z-index: 130;
  pointer-events: none;
}
#activity-invite-root > .ai-drawer { pointer-events: auto; }
.app-page--screen {
  min-height: max(45.25rem, 100vh);
  min-height: max(45.25rem, 100dvh);
}
.map-page { min-height: 100dvh; height: 100dvh; background: #060c1e !important; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }

.global-home-button {
  position: fixed;
  z-index: 80;
  top: max(1rem, env(safe-area-inset-top));
  left: calc(50% + min(50vw, 13.4375rem) - 6.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  width: 5.5rem;
  height: 2rem;
  padding: 0 .6rem;
  border: 1px solid rgba(167, 139, 250, .42);
  border-radius: .25rem;
  background: rgba(10, 8, 24, .82);
  box-shadow: 0 0 .875rem rgba(124, 58, 237, .18);
  color: rgba(216, 180, 254, .9);
  font-family: "JetBrains Mono", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: .75rem;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.global-home-button:active { transform: translateY(1px); }
.global-home-button:focus-visible { outline: 2px solid #c084fc; outline-offset: 2px; }

body.access-gate-open { overflow: hidden; }
.access-gate {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(3, 2, 12, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.access-gate__panel {
  width: min(100%, 22rem);
  padding: 1.5rem;
  border: 1px solid rgba(167, 139, 250, .5);
  border-radius: .75rem;
  background: linear-gradient(160deg, #1b0b3e, #0f0925);
  box-shadow: 0 1.25rem 5rem rgba(0, 0, 0, .55), 0 0 2rem rgba(124, 58, 237, .22);
}
.access-gate__eyebrow {
  margin-bottom: .5rem;
  color: rgba(192, 132, 252, .65);
  font-family: "JetBrains Mono", monospace;
  font-size: .7rem;
  letter-spacing: .18em;
}
.access-gate__panel h2 { color: #fff; font-size: 1.45rem; font-weight: 800; }
.access-gate__panel p { margin-top: .5rem; color: rgba(233, 213, 255, .66); font-size: .875rem; line-height: 1.5; }
.access-gate__panel form { margin-top: 1.25rem; }
.access-gate__panel label { display: block; margin-bottom: .45rem; color: rgba(233, 213, 255, .75); font-size: .8rem; }
.access-gate__panel input {
  width: 100%;
  height: 3.25rem;
  padding: 0 1rem;
  border: 1px solid rgba(167, 139, 250, .48);
  border-radius: .35rem;
  outline: none;
  background: rgba(5, 3, 18, .72);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-align: center;
  text-transform: uppercase;
}
.access-gate__panel input:focus { border-color: #c084fc; box-shadow: 0 0 0 3px rgba(192, 132, 252, .15); }
.access-gate__panel input[aria-invalid="true"] { border-color: #f87171; }
.access-gate__error { min-height: 1.35rem; padding-top: .35rem; color: #fca5a5; font-size: .78rem; }
.access-gate__submit,
.access-gate__cancel { width: 100%; height: 2.75rem; border-radius: .3rem; font-weight: 700; }
.access-gate__submit { margin-top: .25rem; border: 1px solid #c084fc; background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; box-shadow: 0 3px 0 #4c1d95; }
.access-gate__cancel { margin-top: .75rem; border: 1px solid rgba(167, 139, 250, .22); background: transparent; color: rgba(216, 180, 254, .7); }

.static-page {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  background: linear-gradient(180deg, #0a0818, #12082e);
}
.static-scroll { min-height: 100dvh; padding: 2rem 1.25rem 7rem; }
.static-center { text-align: center; }
.static-muted { color: rgba(216, 180, 254, .55); }
.static-mono { font-family: "JetBrains Mono", "PingFang SC", monospace; }
.static-title { margin: .5rem 0; font-size: 2rem; line-height: 1.2; font-weight: 900; color: #fff; }
.static-subtitle { margin: .5rem 0 1.25rem; color: rgba(233, 212, 255, .72); line-height: 1.7; }
.static-panel {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgba(167, 139, 250, .28);
  border-radius: .5rem;
  background: var(--panel);
}
.static-panel-title { margin: 0 0 .25rem; color: #fff; font-weight: 800; }
.static-label { display: block; margin: .75rem 0 .35rem; color: rgba(216, 180, 254, .72); font-size: .75rem; }
.static-row { display: flex; align-items: center; gap: .65rem; }
.static-row > * { min-width: 0; }
.static-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.static-control {
  width: 100%; height: 2.75rem; padding: 0 .65rem;
  border: 1px solid rgba(167, 139, 250, .35); border-radius: .25rem;
  outline: none; background: rgba(15, 10, 40, .92); color: #fff;
}
.static-control:focus { border-color: var(--purple); }
.static-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 3rem; padding: 0 1rem; border: 2px solid var(--purple); border-radius: .25rem;
  background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; font-weight: 800;
  box-shadow: 0 .25rem 0 #4c1d95, 0 0 1.25rem rgba(124, 58, 237, .45);
}
.static-btn.secondary { border-width: 1px; background: transparent; box-shadow: none; color: var(--purple); }
.static-btn.full { width: 100%; }
.static-btn.small { min-height: 2rem; padding: 0 .75rem; border-width: 1px; font-size: .75rem; box-shadow: none; }
.static-fixed-action {
  position: fixed; z-index: 30; left: 50%; bottom: 0; width: min(100%, 26.875rem);
  transform: translateX(-50%); padding: .75rem 1.25rem max(1.25rem, env(safe-area-inset-bottom));
  background: linear-gradient(to top, #0a0818 68%, transparent);
}
.static-toggle { display: inline-flex; overflow: hidden; border: 1px solid rgba(167, 139, 250, .32); border-radius: .25rem; }
.static-toggle button { padding: .45rem 1.25rem; border: 0; background: transparent; color: rgba(167, 139, 250, .65); }
.static-toggle button.active { background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; }
.static-gender { flex: 1; min-height: 4rem; border: 2px solid rgba(167, 139, 250, .22); border-radius: .5rem; background: rgba(15, 10, 40, .65); color: rgba(167, 139, 250, .72); font-weight: 800; }
.static-gender.active { border-color: var(--purple); background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; }

.welcome-page { min-height: max(45.25rem, 100dvh); display: flex; flex-direction: column; padding: 2.5rem 1.25rem 1.5rem; text-align: center; }
.welcome-badge { align-self: center; padding: .25rem .75rem; border: 1px solid rgba(168, 85, 247, .4); color: rgba(192, 132, 252, .8); font-size: .75rem; letter-spacing: .2em; }
.welcome-kicker { margin-top: 2rem; color: rgba(192, 132, 252, .6); letter-spacing: .15em; }
.welcome-title { margin: .4rem 0; font-size: 3rem; line-height: 1.05; font-weight: 900; color: #d8c7ff; }
.welcome-lead { color: rgba(233, 212, 255, .7); font-size: 1.25rem; line-height: 1.625rem; font-weight: 800; }
.welcome-copy { color: #958f6a; font-size: .875rem; line-height: 1.6; }
.welcome-world { position: relative; flex: 1; min-height: 13rem; margin: 1rem 0; }
.welcome-orbit { position: absolute; inset: 50% auto auto 50%; width: 7rem; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid rgba(167, 139, 250, .5); border-radius: 50%; box-shadow: 0 0 2rem rgba(124, 58, 237, .35); }
.welcome-orbit::before, .welcome-orbit::after { content: "紫"; position: absolute; inset: 1rem; display: grid; place-items: center; border: 1px solid rgba(167, 139, 250, .35); border-radius: 50%; color: #c4b5fd; font-size: 1.75rem; }
.welcome-orbit::after { content: ""; inset: -.8rem; border-style: dashed; animation: spin 12s linear infinite; }
.world-tile { position: absolute; width: 5.5rem; height: 4rem; padding: .5rem; border: 1px solid rgba(167, 139, 250, .22); border-radius: .25rem; background: rgba(50, 35, 80, .35); color: rgba(216, 180, 254, .55); font-size: .75rem; }
.world-tile:nth-child(1) { left: 5%; top: 10%; }.world-tile:nth-child(2) { right: 5%; top: 12%; }
.world-tile:nth-child(3) { left: 3%; bottom: 8%; }.world-tile:nth-child(4) { right: 3%; bottom: 8%; }

.loading-box { min-height: 100dvh; display: grid; place-items: center; padding: 2rem; text-align: center; }
.loading-ring { width: 8rem; aspect-ratio: 1; margin: 0 auto 2rem; border: .2rem solid rgba(167, 139, 250, .18); border-top-color: var(--purple); border-radius: 50%; animation: spin 1.4s linear infinite; }
.loading-progress { height: .5rem; margin: 1rem 0; overflow: hidden; border-radius: 2rem; background: rgba(167, 139, 250, .15); }
.loading-progress span { display: block; height: 100%; background: linear-gradient(90deg, #7c3aed, #c084fc); transition: width .4s ease; }
@keyframes spin { to { transform: rotate(360deg); } }

.map-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.5rem 1.25rem .75rem; }
.map-header h1 { flex: 1; margin: 0; text-align: center; color: #e9d5ff; font-size: 1rem; }
.map-top { padding: 1.5rem 1.25rem .375rem; }
.map-top h1 { margin: 0 0 .75rem; color: #e9d5ff; font-size: 1rem; font-weight: 800; line-height: 1.5rem; text-align: center; }
.map-status-panel { padding: .875rem 1rem; border-radius: .5rem; background: rgba(6, 10, 24, .92); color: rgba(233, 213, 255, .86); font-size: .875rem; font-weight: 700; line-height: 1.25rem; text-align: center; }
.map-stars { display: flex; align-items: center; justify-content: center; gap: .625rem; margin-top: .5rem; }
.map-stars span { font-size: 1rem; transition: color .5s, text-shadow .5s; }
.map-stars small { margin-left: .375rem; color: rgba(192, 132, 252, .52); font: .6875rem/1rem "JetBrains Mono", monospace; }
.map-primary-actions { display: flex; align-items: center; justify-content: center; min-height: 3rem; padding-top: .25rem; }
.map-primary-actions button { min-width: 7.5rem; height: 2.5rem; border: 0; background: transparent; color: #c4a7ff; font-size: .8125rem; font-weight: 800; }
.map-primary-actions button:disabled { opacity: .45; }
.map-primary-actions i { width: 1px; height: 1.375rem; background: rgba(233, 213, 255, .62); }
.map-progress-hint { min-height: 2.75rem; margin: 0; padding-top: .625rem; color: #fff; font-size: .8125rem; font-weight: 700; line-height: 1.25rem; text-align: center; text-shadow: 0 0 1rem rgba(167,139,250,.6); }
.map-stage { flex: 1 1 0%; min-height: 0; overflow: hidden; background: #07152a; background: linear-gradient(180deg, #07152a 0%, #08192a 62%, #10231b 100%); }
.map-wrap { position: relative; flex: 1 1 auto; width: 100%; height: auto; min-height: 0; overflow: hidden; background: #07152a; }
.map-wrap::after {
  position: absolute; z-index: 6; inset: 0; pointer-events: none; content: "";
  background: linear-gradient(180deg,#060c1e 0%,#0d1b3c 80%,#10231b 100%);
  opacity: 0; visibility: hidden;
}
.map-wrap.is-loading::after { opacity: 1; visibility: visible; }
.map-wrap object {
  display: block; width: 100%; height: 100%; border: 0; outline: 0; pointer-events: none;
  background: #07152a; object-fit: cover; object-position: center;
}
.map-hotspot { position: absolute; z-index: 5; border: 0; background: transparent; color: transparent; cursor: pointer; touch-action: manipulation; }
.map-hotspot.character { left: 33%; top: 16%; width: 34%; height: 26%; }
.map-hotspot.career { left: 5%; top: 14%; width: 29%; height: 35%; }
.map-hotspot.love { left: 66%; top: 25%; width: 32%; height: 30%; }
.map-hotspot.money { left: 4%; top: 53%; width: 38%; height: 27%; }
.map-hotspot.family { left: 65%; top: 51%; width: 34%; height: 29%; }
.map-archive-entry { padding-top: .45rem; padding-bottom: max(.65rem,env(safe-area-inset-bottom)); background: #10231b; background: linear-gradient(180deg,#10231b 0%,#10231b 100%); }
.map-actions { padding: .75rem 1.25rem 2rem; }
.profile-mini-card {
  position: relative; display: grid; grid-template-columns: 3.25rem minmax(0,1fr) auto .875rem;
  align-items: center; gap: .75rem; width: 100%; min-height: 4.5rem; padding: .55rem .75rem;
  overflow: hidden; border: 1px solid color-mix(in srgb,var(--profile-accent,#60a5fa) 45%,transparent);
  border-radius: .75rem; background: linear-gradient(110deg,
    color-mix(in srgb,var(--profile-accent,#60a5fa) 26%,#08101e),
    color-mix(in srgb,var(--profile-accent,#60a5fa) 12%,#07101f));
  background-color: #193455;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 .4rem 1.25rem color-mix(in srgb,var(--profile-accent,#60a5fa) 14%,transparent);
}
.profile-mini-card::before {
  position: absolute; inset: 0; pointer-events: none; content: "";
  background: linear-gradient(90deg,color-mix(in srgb,var(--profile-accent,#60a5fa) 22%,transparent),transparent 48%);
}
.profile-mini-card__avatar {
  position: relative; z-index: 1; width: 3.25rem; height: 3.25rem; border: 1px solid color-mix(in srgb,var(--profile-accent,#60a5fa) 65%,white);
  border-radius: .7rem; object-fit: cover; box-shadow: 0 0 1rem color-mix(in srgb,var(--profile-accent,#60a5fa) 45%,transparent);
}
.profile-mini-card__copy { position: relative; z-index: 1; min-width: 0; }
.profile-mini-card__copy strong,.profile-mini-card__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-mini-card__copy strong { color: #fff; font-size: .9375rem; line-height: 1.35rem; }
.profile-mini-card__copy small { margin-top: .15rem; color: rgba(255,255,255,.54); font-size: .6875rem; line-height: 1rem; }
.profile-mini-card__action { position: relative; z-index: 1; color: color-mix(in srgb,var(--profile-accent,#60a5fa) 68%,white); font-size: .6875rem; white-space: nowrap; }
.profile-mini-card__arrow {
  position: relative; z-index: 1; width: .875rem; height: .875rem; border-radius: 50%;
  background: color-mix(in srgb,var(--profile-accent,#60a5fa) 58%,white);
}
.profile-mini-card__arrow::after {
  position: absolute; left: .25rem; top: .25rem; width: .3rem; height: .3rem;
  border-top: 1px solid #07101f; border-right: 1px solid #07101f; content: ""; transform: rotate(45deg);
}
.profile-mini-card__entry { position: absolute; z-index: 3; inset: 0; }
.profile-mini-card .profile-mini-card__hit {
  position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
  background: transparent; box-shadow: none; color: transparent; font-size: 0;
}
@media (max-width: 22rem) {
  .profile-mini-card { grid-template-columns: 2.8rem minmax(0,1fr) .875rem; gap: .55rem; }
  .profile-mini-card__avatar { width: 2.8rem; height: 2.8rem; }
  .profile-mini-card__action { display: none; }
}
@media (max-width: 37.5rem) {
  .phone-shell { width: 100%; max-width: none; margin-inline: 0; }
}
.detail-flow-actions { display: flex; justify-content: center; gap: .625rem; padding: .25rem 0 .125rem; }
.detail-flow-actions.is-split > * { flex: 1; min-width: 0; }
.detail-flow-button {
  display: flex; align-items: center; justify-content: center; min-width: 8.5rem; height: 2.625rem; padding: 0 .75rem;
  overflow: hidden; border: 1px solid color-mix(in srgb, var(--ai-accent, #60a5fa) 45%, transparent); border-radius: .25rem;
  background: transparent; color: color-mix(in srgb, var(--ai-accent, #60a5fa) 82%, white); font-size: .8125rem;
  text-align: center; text-overflow: ellipsis; white-space: nowrap;
}
.detail-flow-button[data-action="back"]::before {
  width: .5rem; height: .5rem; margin-right: .5rem; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor;
  content: ""; transform: rotate(45deg);
}

.detail-page { background: var(--zone-bg); }
.detail-header { display: flex; align-items: center; gap: .75rem; padding: 2rem 1rem .75rem; }
.detail-header .mini-slot { width: 6rem; margin-left: auto; }
.detail-content { padding: .5rem 1rem 2rem; }
.detail-chip { display: table; margin: .5rem auto; padding: .35rem 1rem; border: 1px solid color-mix(in srgb, var(--zone-color) 50%, transparent); border-radius: 2rem; color: var(--zone-color); }
.detail-heading { margin: .5rem 0 2rem; text-align: center; color: #fff; font-size: 2rem; font-weight: 900; }
.detail-section { margin-bottom: 1rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--zone-color) 25%, transparent); border-radius: .75rem; background: color-mix(in srgb, var(--zone-color) 6%, transparent); }
.detail-section h3 { margin: 0 0 .8rem; color: var(--zone-color); font-size: .875rem; }
.detail-section p { margin: 0; color: rgba(255, 255, 255, .82); font-size: .9375rem; line-height: 1.625rem; white-space: pre-line; }
.evidence-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.evidence-list span { padding: .55rem .75rem; border: 1px solid color-mix(in srgb, var(--zone-color) 35%, transparent); border-radius: .25rem; color: rgba(255,255,255,.75); }

.share-card { width: 100%; overflow: hidden; border: 1px solid rgba(167,139,250,.45); border-radius: 1rem; background: linear-gradient(160deg,#1c0a48,#0e0524 45%,#120a30); box-shadow: 0 0 3.75rem rgba(124,58,237,.35); }
.share-card-head, .share-card-body, .share-card-foot { padding: 1.25rem; }
.share-card-head { background: linear-gradient(135deg,rgba(124,58,237,.28),rgba(76,29,149,.12)); }
.share-card-head h2 { margin: .45rem 0; font-size: 1.75rem; color: #fff; }
.share-stat { display: flex; gap: .6rem; align-items: flex-start; margin: .7rem 0; color: rgba(255,255,255,.9); font-size: .875rem; line-height: 1.5rem; }
.share-stat i { width: .4rem; height: .4rem; margin-top: .5rem; border-radius: 50%; background: var(--dot); }
.share-stat b { color: rgba(255,255,255,.48); font-weight: 500; }
.share-quote { margin: 1rem 0; padding: .8rem; border: 1px solid rgba(124,58,237,.35); border-radius: .5rem; background: rgba(124,58,237,.14); text-align: center; line-height: 1.65; }
.share-qr { display: block; width: 5rem; height: 5rem; margin: .75rem auto 0; padding: .25rem; background: #fff; }
.share-actions { display: grid; gap: .75rem; margin-top: 1.5rem; }
.qa-answer { color: rgba(255,255,255,.86); line-height: 1.75; }
.qa-answer h1,.qa-answer h2,.qa-answer h3 { margin: 1rem 0 .5rem; color: #e9d5ff; }
.qa-answer p,.qa-answer ul,.qa-answer ol { margin: .6rem 0; }
.qa-answer li { margin-left: 1.25rem; }

.static-toast { position: fixed; z-index: 300; left: 50%; bottom: max(5rem, env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100vw - 3rem); padding: .65rem 1rem; border: 1px solid rgba(167,139,250,.42); border-radius: .35rem; background: rgba(18,8,46,.96); color: #ddd6fe; text-align: center; }
.share-guide-arrow { position: absolute; right: -.5rem; top: max(.125rem, env(safe-area-inset-top)); color: #a78bfa; font: 2rem/1 sans-serif; filter: drop-shadow(0 0 5px rgba(167,139,250,.9)); transform: rotate(-6deg); }

@supports not (color: color-mix(in srgb, white, black)) {
  .detail-chip,.detail-section,.evidence-list span { border-color: rgba(167,139,250,.3); }
  .detail-section { background: rgba(255,255,255,.04); }
}