@font-face {
  font-family: "BB Harmony SC";
  src: url("assets/fonts/harmonyos-sans-sc-black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "BB Harmony Latin";
  src: url("assets/fonts/harmonyos-sans-black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  --bb-space: #1f1808;
  --bb-space-deep: #0c0b09;
  --bb-panel: #2b230b;
  --bb-panel-soft: #3a2e0f;
  --bb-cream: #f8e7a0;
  --bb-paper: #f5efcf;
  --bb-gold: #f1cb73;
  --bb-gold-deep: #dcb565;
  --bb-pink: #ff7ac3;
  --bb-cyan: #6efef7;
  --bb-ink: #211905;
  --bb-muted: #c9bd8c;
  --bb-line: rgba(248, 231, 160, 0.24);
  --font-display-sc: "BB Harmony SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --font-label: "BB Harmony Latin", "Inter", Arial, sans-serif;
  --ink: var(--bb-ink);
  --paper: var(--bb-paper);
  --cyan: var(--bb-cyan);
  --pink: var(--bb-pink);
  --lime: var(--bb-gold);
  --navy: var(--bb-space);
}

html {
  background: var(--bb-space-deep);
}

body {
  color: var(--bb-paper);
  background:
    radial-gradient(circle at 50% -20%, rgba(241, 203, 115, 0.12), transparent 44%),
    var(--bb-space-deep);
}

.ambient,
.app-shell::before,
.hero-orbit,
.stat::after,
.content-card::before,
.share-sheet-panel::before {
  display: none !important;
}

.app-shell {
  border-color: rgba(248, 231, 160, 0.14);
  background:
    linear-gradient(180deg, rgba(31, 24, 8, 0.08), rgba(12, 11, 9, 0.72)),
    url("assets/official-space-texture-srgb.webp") center top / 100% auto repeat-y,
    var(--bb-space);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.42);
}

body.intro-active .app-shell {
  background:
    linear-gradient(180deg, rgba(31, 24, 8, 0.02) 0%, rgba(31, 24, 8, 0.05) 32%, rgba(31, 24, 8, 0.7) 72%, #1f1808 100%),
    url("assets/official-main-k-web-srgb.webp?v=20260820-6") center top / 100% auto no-repeat,
    var(--bb-space);
}

.topbar {
  min-height: 58px;
  padding: max(6px, env(safe-area-inset-top)) 22px 0;
  background: transparent;
}

.brand {
  width: auto;
  min-height: 48px;
  gap: 0;
  color: var(--bb-paper);
  background: none;
}

.brand-lockup {
  display: block;
  width: clamp(92px, 27vw, 116px);
  max-height: 54px;
  object-fit: contain;
  object-position: left center;
}

.site-footer {
  color: rgba(248, 231, 160, 0.5);
  border-color: rgba(248, 231, 160, 0.12);
}

/* Official main-K cover */
.intro-view {
  min-height: calc(100svh - 58px);
  padding: clamp(168px, 25.5svh, 220px) 22px max(26px, env(safe-area-inset-bottom));
  isolation: isolate;
}

.intro-view::before {
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, transparent 0 28%, rgba(31, 24, 8, 0.12) 47%, rgba(31, 24, 8, 0.82) 82%, #1f1808 100%);
}

.intro-view::after {
  display: none;
}

.intro-meta {
  gap: 12px;
  color: var(--bb-cream);
  font-family: var(--font-label);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.intro-edition {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(248, 231, 160, 0.48);
  border-radius: 999px;
  color: var(--bb-space-deep);
  background: var(--bb-gold);
  box-shadow: none;
}

.intro-meta span:last-child {
  color: var(--bb-cream);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
}

.intro-copy {
  margin-top: clamp(24px, 4.2svh, 38px);
}

.intro-kicker,
.eyebrow,
.section-kicker,
.intro-enter small,
.share-poster-copy small,
.friend-share-button small,
.share-sheet-header p {
  font-family: var(--font-label);
  letter-spacing: 0.12em;
}

.intro-kicker {
  margin-bottom: 10px;
  color: var(--bb-cyan);
  font-size: 9px;
  font-weight: 900;
}

.intro-copy h1 {
  margin: 0;
  font-family: var(--font-display-sc);
  font-size: clamp(48px, 14vw, 64px);
  font-weight: 900;
  line-height: 0.91;
  letter-spacing: -0.055em;
  text-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
}

.intro-copy h1 .intro-cn {
  display: grid;
  gap: 2px;
}

.intro-copy h1 .intro-cn > span,
.intro-copy h1 .intro-cn i {
  display: block;
  color: var(--bb-paper);
  font-style: normal;
  transform: none;
  -webkit-text-stroke: 0;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.46);
}

.intro-copy h1 .intro-cn i {
  color: var(--bb-gold);
  text-shadow: 3px 3px 0 rgba(255, 122, 195, 0.8), 0 12px 30px rgba(0, 0, 0, 0.42);
}

.intro-copy h1 small {
  display: block;
  margin-top: 14px;
  color: rgba(248, 231, 160, 0.72);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.neon-tape {
  display: inline-flex;
  margin-top: 18px;
  padding: 9px 13px;
  border: 1px solid rgba(248, 231, 160, 0.26);
  border-radius: 999px;
  color: var(--bb-paper);
  background: rgba(12, 11, 9, 0.66);
  box-shadow: none;
  transform: none;
}

.neon-tape i {
  color: var(--bb-pink);
}

.intro-action {
  margin-top: auto;
  padding-top: clamp(24px, 4svh, 42px);
}

.intro-enter,
.primary-button,
.sheet-primary {
  color: var(--bb-ink);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: linear-gradient(102deg, var(--bb-cream), var(--bb-gold));
  box-shadow: 0 12px 30px rgba(241, 203, 115, 0.14);
  transform: none;
}

.intro-enter {
  min-height: 88px;
  border-radius: 24px;
}

.intro-enter::after,
.primary-button::after {
  background: linear-gradient(90deg, var(--bb-pink), var(--bb-cyan));
  opacity: 0.9;
}

.intro-enter b,
.button-arrow,
.share-poster-arrow {
  color: var(--bb-cream);
  background: var(--bb-space-deep);
}

.intro-benefits {
  color: rgba(248, 231, 160, 0.64);
}

.intro-benefits span:nth-child(1) { color: var(--bb-pink); }
.intro-benefits span:nth-child(2) { color: var(--bb-cyan); }
.intro-benefits span:nth-child(3) { color: var(--bb-gold); }
.intro-action > p { color: rgba(248, 231, 160, 0.44); }

/* Navigation transition keeps the official character intact. */
.bubble-transition__core {
  background:
    radial-gradient(circle at 31% 22%, rgba(255, 255, 255, 0.12) 0 3%, transparent 15%),
    radial-gradient(circle at 26% 32%, rgba(110, 254, 247, 0.12), transparent 28%),
    linear-gradient(145deg, #3a2e0f, #1f1808 54%, #0c0b09);
}

.bubble-transition__ring {
  border-color: rgba(248, 231, 160, 0.28);
}

.bubble-transition__drop { border-color: rgba(248, 231, 160, 0.28); background: rgba(248, 231, 160, 0.12); }
.bubble-transition .drop-a { border-color: rgba(110, 254, 247, 0.3); }
.bubble-transition .drop-b { border-color: rgba(255, 122, 195, 0.3); }

.bubble-transition__name {
  display: grid !important;
  gap: 4px;
  max-width: calc(100vw - 48px);
  text-align: center;
}

.bubble-transition__name > b {
  display: block;
  color: var(--bb-cream);
  font-size: clamp(26px, 7.6vw, 32px);
  font-weight: 900;
  line-height: 0.96;
  white-space: nowrap;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
}

.bubble-transition__name > b[lang="zh-CN"] {
  font-family: var(--font-display-sc);
  letter-spacing: -0.045em;
}

.bubble-transition__name > b[lang="en"] {
  font-family: var(--font-label);
  letter-spacing: -0.035em;
}

.bubble-transition__name::after { display: none; }
.bubble-transition > strong small { color: rgba(248, 231, 160, 0.82); font-size: clamp(13px, 3.8vw, 16px); font-weight: 800; }

/* Date and taste selection */
.setup-view,
.result-view {
  color: var(--bb-paper);
}

.setup-view .hero {
  margin: -8px -22px 0;
  min-height: 300px;
  padding: 42px 44px 34px;
  background: transparent;
}

.setup-view .hero::after {
  display: none;
}

.eyebrow,
.section-kicker {
  color: var(--bb-cyan);
  font-size: 9px;
  font-weight: 900;
}

.brand-page-title,
.hero h1.brand-page-title,
.result-hero h1.brand-page-title {
  color: var(--bb-paper);
  font-family: var(--font-display-sc);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -0.055em;
  -webkit-text-stroke: 0;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
}

.hero h1.brand-page-title {
  font-size: clamp(44px, 13.5vw, 60px);
  white-space: normal;
}

.hero h1.brand-page-title em,
.result-hero h1.brand-page-title em {
  color: var(--bb-gold);
  text-shadow: 2px 2px 0 rgba(255, 122, 195, 0.38), 0 10px 24px rgba(0, 0, 0, 0.28);
}

.hero-copy {
  max-width: 340px;
  padding-left: 0;
  color: rgba(248, 239, 207, 0.74);
  line-height: 1.65;
  border-left: 0;
}

.text-back {
  color: rgba(248, 231, 160, 0.68);
}

.form-block {
  border: 1px solid rgba(248, 231, 160, 0.24);
  border-radius: 24px;
  color: var(--bb-paper);
  background: rgba(43, 35, 11, 0.94);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
  transform: none !important;
}

.form-block::before,
.form-block::after,
.day-option::after,
.taste-chip::after {
  display: none !important;
}

.form-block legend { color: var(--bb-paper); }

.step-number,
.selection-count {
  color: var(--bb-ink);
  background: var(--bb-gold);
  box-shadow: 3px 3px 0 rgba(255, 122, 195, 0.44);
  transform: none;
}

.field-help { color: rgba(248, 231, 160, 0.58); }

.day-picker { gap: 10px; }

.day-option {
  min-height: 124px;
  border: 1px solid rgba(248, 231, 160, 0.22);
  border-radius: 20px;
  color: var(--bb-paper);
  background: rgba(12, 11, 9, 0.58);
  box-shadow: none;
  transform: none !important;
}

.day-option[aria-pressed="true"] {
  color: var(--bb-ink);
  border-color: var(--bb-cream);
  background: linear-gradient(145deg, var(--bb-cream), var(--bb-gold));
  box-shadow: 0 10px 24px rgba(241, 203, 115, 0.14);
}

.taste-grid { gap: 11px; }

.taste-chip {
  min-height: 76px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--chip-color) 42%, transparent);
  border-radius: 20px;
  color: var(--bb-paper);
  background: rgba(12, 11, 9, 0.56);
  box-shadow: none;
  transform: none !important;
}

.taste-chip[aria-pressed="true"] {
  color: var(--bb-ink);
  border-color: var(--bb-gold);
  background: var(--bb-cream);
  box-shadow: 0 0 0 2px var(--bb-gold), 0 10px 24px rgba(241, 203, 115, 0.13);
}

.taste-chip-icon {
  color: var(--chip-color);
  filter: none;
  text-shadow: none;
}

.taste-chip[aria-pressed="true"] .taste-chip-icon { color: var(--bb-ink); }

.primary-button {
  border-radius: 22px;
}

.surprise-button,
.secondary-button,
.friend-share-button {
  color: var(--bb-cream);
  border-color: rgba(248, 231, 160, 0.26);
  background: rgba(43, 35, 11, 0.88);
}

.micro-note,
.logic-note {
  color: rgba(248, 239, 207, 0.72);
  border-color: rgba(248, 231, 160, 0.18);
  background: rgba(43, 35, 11, 0.78);
}

/* Route result */
.result-hero {
  min-height: 360px;
  padding: 38px 22px 124px;
  background:
    linear-gradient(180deg, rgba(31, 24, 8, 0.08) 0%, rgba(31, 24, 8, 0.26) 40%, rgba(31, 24, 8, 0.94) 100%),
    url("assets/official-ground-strip-srgb.webp") center bottom / 100% auto no-repeat;
}

.result-hero h1.brand-page-title {
  font-size: clamp(48px, 13.5vw, 60px);
}

.result-hero h1.brand-page-title span {
  color: var(--bb-pink);
  text-shadow: none;
}

.result-hero > p:not(.eyebrow) { color: rgba(248, 239, 207, 0.72); }

.selected-tastes span {
  color: var(--bb-paper);
  border-color: color-mix(in srgb, var(--tag-color) 46%, transparent);
  background: rgba(12, 11, 9, 0.64);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tag-color) 16%, transparent);
}

.day-tabs {
  margin-top: -42px;
  padding-inline: 18px;
}

.day-tab {
  color: var(--bb-cream);
  border-color: rgba(248, 231, 160, 0.24);
  background: rgba(43, 35, 11, 0.92);
}

.day-tab[aria-selected="true"] {
  color: var(--bb-ink);
  border-color: var(--bb-gold);
  background: var(--bb-gold);
}

.route-stats { gap: 10px; }

.stat {
  min-height: 104px;
  border: 1px solid rgba(248, 231, 160, 0.2);
  border-radius: 20px;
  background: rgba(43, 35, 11, 0.9);
  box-shadow: none;
  transform: none !important;
}

.stat strong { color: var(--bb-gold); }
.stat span { color: rgba(248, 231, 160, 0.62); }

.content-card {
  border: 1px solid rgba(248, 231, 160, 0.16);
  border-radius: 28px;
  color: var(--bb-ink);
  background: var(--bb-paper);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.2);
}

.section-heading h2 { color: var(--bb-ink); }
.section-kicker { color: #6e5b1d; }

.live-mark {
  color: #51420f;
  background: rgba(241, 203, 115, 0.4);
}

.live-mark i { background: #6e909a; }

.show-card {
  border: 1px solid rgba(33, 25, 5, 0.13);
  border-radius: 22px;
  color: var(--bb-ink);
  background: rgba(255, 253, 240, 0.9);
  box-shadow: 0 12px 28px rgba(33, 25, 5, 0.08);
  transform: none !important;
}

.show-card::before { opacity: 0.92; }
.show-card:hover,
.show-card.is-focused { border-color: rgba(33, 25, 5, 0.3); box-shadow: 0 14px 34px rgba(33, 25, 5, 0.12); }

.artist-artwork {
  border-radius: 16px;
  box-shadow: 4px 5px 0 rgba(241, 203, 115, 0.42);
}

.artist-artwork::after,
.artist-artwork img { animation: none !important; }

.artist-name,
.show-time strong { color: var(--bb-ink); }
.show-match { color: #6b5719; }
.show-match-dots i.on { background: #6e909a; }
.route-basis,
.artist-styles { border-color: rgba(33, 25, 5, 0.11); color: #5d552f; }
.route-basis > span,
.artist-styles > span { color: #8c8255; }
.route-basis > b,
.artist-styles > b { color: #3d3617; }

.transfer { color: #6f6642; }
.transfer strong { color: #423a1c; }

.stage-pill { color: var(--bb-ink); box-shadow: none; }

.map-card { background: #f0e8c5; }
.icon-button { color: var(--bb-cream); border-color: rgba(248, 231, 160, 0.22); background: var(--bb-space); }

.venue-map {
  border-color: rgba(33, 25, 5, 0.42);
  background: var(--bb-space);
  box-shadow: none;
}

.venue-map svg > rect:first-of-type { fill: #211905; stroke: #7d6a2e; }
.venue-map .map-road,
.venue-map .map-path { stroke: rgba(248, 231, 160, 0.26); }
.venue-map .map-road-label,
.venue-map .entrance-node text { fill: var(--bb-cream); }
.venue-map .audience-flow path { stroke: rgba(248, 231, 160, 0.44); }
.venue-map .map-zone ellipse,
.venue-map .map-zone rect { fill: rgba(248, 231, 160, 0.08); stroke: rgba(248, 231, 160, 0.28); }
.venue-map .map-zone text { fill: rgba(248, 231, 160, 0.72); }
.venue-map .twin-zone > rect { fill: rgba(255, 122, 195, 0.06); stroke: rgba(255, 122, 195, 0.38); }
.venue-map .twin-zone > text { fill: var(--bb-cream); }
.map-corner-label { color: rgba(248, 231, 160, 0.46); }
.map-note,
.map-legend { color: #6f6642; }

.logic-note {
  border-radius: 20px;
}

.logic-icon { color: var(--bb-ink); background: var(--bb-gold); }

.result-actions .primary-button,
.share-poster-button {
  border-radius: 24px;
}

/* Sharing layer */
.share-sheet-backdrop {
  background: rgba(12, 11, 9, 0.82);
  backdrop-filter: none;
}

.share-sheet-panel {
  color: var(--bb-paper);
  border-color: rgba(248, 231, 160, 0.18);
  background:
    linear-gradient(180deg, rgba(43, 35, 11, 0.96), rgba(12, 11, 9, 0.99)),
    url("assets/official-space-texture-srgb.webp") center / cover;
  box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.46);
}

.share-sheet-header h2 { color: var(--bb-paper); }
.share-sheet-header p { color: var(--bb-cyan); }
.share-sheet-close { color: var(--bb-cream); border-color: rgba(248, 231, 160, 0.28); background: rgba(31, 24, 8, 0.8); }

.share-poster-preview {
  border-color: rgba(248, 231, 160, 0.22);
  background: var(--bb-space-deep);
}

.poster-ratio-tag { color: var(--bb-ink); background: var(--bb-gold); }
.poster-loading { color: rgba(248, 231, 160, 0.68); }

.sheet-primary { border-radius: 22px; }

.sheet-secondary,
.sheet-ticket {
  color: var(--bb-cream);
  border-color: rgba(248, 231, 160, 0.22);
  background: rgba(43, 35, 11, 0.84);
}

.sheet-secondary small,
.sheet-ticket small { color: rgba(248, 231, 160, 0.58); }

.share-conversion-note {
  color: var(--bb-paper);
  border-color: rgba(248, 231, 160, 0.18);
  background: rgba(43, 35, 11, 0.78);
}

.share-conversion-note p,
.share-topics,
.share-demo-note { color: rgba(248, 231, 160, 0.58); }

.share-join-mark i { border-color: var(--bb-cyan); }
.share-join-mark b { color: var(--bb-ink); background: var(--bb-gold); }

.toast {
  color: var(--bb-ink);
  background: var(--bb-cream);
}

button:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--bb-cyan);
  outline-offset: 3px;
}

@media (max-width: 370px) {
  .topbar { padding-inline: 16px; }
  .brand-lockup { width: 92px; }
  .intro-view { padding-inline: 18px; }
  .intro-copy h1 { font-size: clamp(44px, 14vw, 54px); }
  .hero h1.brand-page-title { font-size: clamp(41px, 13.4vw, 50px); }
  .result-hero h1.brand-page-title { font-size: clamp(43px, 13.5vw, 52px); }
  .setup-view .hero { margin-inline: -16px; padding-inline: 38px; }
  .content-card { border-radius: 24px; }
}

@media (max-height: 700px) {
  .intro-view {
    min-height: calc(100svh - 58px);
    padding-top: 140px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .topbar { min-height: 58px; }
  .intro-copy { margin-top: 18px; }
  .intro-copy h1 { font-size: clamp(42px, 13vw, 54px); }
  .intro-copy h1 small { margin-top: 10px; }
  .neon-tape { margin-top: 12px; }
  .intro-action { padding-top: 14px; }
  .intro-enter { min-height: 72px; }
  .intro-benefits { margin-top: 9px; }
  .intro-action > p { margin-top: 5px; }
  body.intro-active .app-shell {
    background:
      linear-gradient(180deg, rgba(31, 24, 8, 0.02) 0%, rgba(31, 24, 8, 0.05) 32%, rgba(31, 24, 8, 0.7) 72%, #1f1808 100%),
      url("assets/official-main-k-web-srgb.webp?v=20260820-6") center top / 88% auto no-repeat,
      var(--bb-space);
  }
  .setup-view .hero { min-height: 232px; padding-top: 24px; }
}

@media (min-width: 560px) {
  body {
    padding-top: 0;
  }

  .app-shell {
    min-height: 100vh;
    border-top: 0;
    border-radius: 0 0 34px 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .artist-artwork::after,
  .artist-artwork img,
  .route-path,
  .bubble-transition__drop {
    animation: none !important;
  }
}