/* R20 夜市/集市展示页 · 13色板 + 5场景 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  transition: background 0.35s ease, color 0.35s ease;
  padding-bottom: calc(6.5rem + env(safe-area-inset-bottom));
}
body.showcase-back-active { padding-top: calc(44px + env(safe-area-inset-top, 0)); }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; }

/* 13 色板 */
body[data-theme='guochao-red'] { --primary:#C41E3A; --accent:#D4A843; --bg:#1A0A0A; --bg-card:#2D1810; --text:#FFF5E6; --text-light:#E8C4A0; --border:#5C3020; --highlight:#FF6B35; }
body[data-theme='yanhua-stall'] { --primary:#FF6B35; --accent:#FFD700; --bg:#0D1B2A; --bg-card:#1B2838; --text:#FFF8F0; --text-light:#B0C4DE; --border:#334155; --highlight:#FF477E; }
body[data-theme='wenchuang-craft'] { --primary:#8B6914; --accent:#4A7C59; --bg:#F5E6D3; --bg-card:#FFF8F0; --text:#2C1810; --text-light:#6B5344; --border:#D4C4A8; --highlight:#C4956A; }
body[data-theme='farmer-market'] { --primary:#4A7C59; --accent:#DAA520; --bg:#FAF7F2; --bg-card:#FFFFFF; --text:#2C2C2C; --text-light:#666; --border:#D4E8D4; --highlight:#F4A460; }
body[data-theme='neon-city'] { --primary:#00F0FF; --accent:#FF006E; --bg:#0A0A0F; --bg-card:#1A1A2E; --text:#F0F0FF; --text-light:#94A3B8; --border:#334155; --highlight:#BE00FF; }
body[data-theme='warm-autumn'] { --primary:#D4784C; --accent:#8B4513; --bg:#FFF8F0; --bg-card:#FFF0E5; --text:#3C1F0A; --text-light:#8B6914; --border:#F0D5B8; --highlight:#E8923F; }
body[data-theme='sakura'] { --primary:#FF7EB3; --accent:#FFB7C5; --bg:#FFF5F7; --bg-card:#FFFFFF; --text:#4A2530; --text-light:#9D5973; --border:#FFD6E0; --highlight:#FF69B4; }
body[data-theme='ocean-night'] { --primary:#0077B6; --accent:#00B4D8; --bg:#03045E; --bg-card:#023E8A; --text:#F0F8FF; --text-light:#90E0EF; --border:#0077B6; --highlight:#48CAE4; }
body[data-theme='retro-film'] { --primary:#6B4C3B; --accent:#D4A574; --bg:#F5E6D3; --bg-card:#FFF0E0; --text:#2C1810; --text-light:#6B5344; --border:#D4C4A8; --highlight:#C08457; }
body[data-theme='cyber-night'] { --primary:#FF00FF; --accent:#00FFFF; --bg:#0D0221; --bg-card:#150533; --text:#E0E0FF; --text-light:#A78BFA; --border:#4C1D95; --highlight:#FFD700; }
body[data-theme='forest-market'] { --primary:#2D6A4F; --accent:#95D5B2; --bg:#1B3A2D; --bg-card:#2D4A3C; --text:#F0F7F4; --text-light:#95D5B2; --border:#40916C; --highlight:#B7E4C7; }
body[data-theme='desert-bazaar'] { --primary:#D4784C; --accent:#FFB347; --bg:#FFF3E0; --bg-card:#FFFFFF; --text:#3E2723; --text-light:#795548; --border:#FFCC80; --highlight:#FF8F00; }
body[data-theme='dark-neon'] { --primary:#FF1493; --accent:#7B68EE; --bg:#0A0A0A; --bg-card:#1A1A1A; --text:#FAFAFA; --text-light:#A3A3A3; --border:#333; --highlight:#00FF7F; }

.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
}

.section { position: relative; max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.25rem; }
.section__title {
  font-family: 'Noto Serif SC', 'ZCOOL XiaoWei', serif;
  font-size: 1.5rem; text-align: center; margin-bottom: 1.25rem;
  color: var(--primary); letter-spacing: 0.06em;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.5rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem;
  text-decoration: none; transition: transform 0.15s ease; margin: 0.35rem;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: #fff; border: 2px solid var(--accent); }
.btn-outline { border: 2px solid var(--primary); color: var(--primary); background: transparent; }

.hero-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 92vh; pointer-events: none; z-index: 2; }

/* Hero */
.hero {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; color: #fff; z-index: 1;
}
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.75)); }
.hero__content { position: relative; z-index: 3; text-align: center; padding: 2rem 1.25rem; animation: fadeUp .8s ease; max-width: 720px; }
.hero__title {
  font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
  font-size: clamp(2rem, 9vw, 3.2rem); font-weight: 400; margin-bottom: .5rem; line-height: 1.2;
}
.neon-text {
  animation: neonFlicker 3s ease-in-out infinite;
  text-shadow: 0 0 8px var(--highlight), 0 0 16px var(--primary), 0 0 32px var(--accent);
}
@keyframes neonFlicker {
  0%,100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.85; }
  94% { opacity: 1; }
  96% { opacity: 0.9; }
  97% { opacity: 1; }
}
.hero__tagline { font-size: 1rem; opacity: .9; margin-bottom: .75rem; }
.hero__meta { font-size: .78rem; opacity: .85; line-height: 1.6; margin-bottom: 1.25rem; }
.countdown { display: flex; justify-content: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; }
.countdown__unit { background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.25); border-radius: .65rem; padding: .45rem .65rem; min-width: 3.2rem; backdrop-filter: blur(6px); }
.countdown__unit b { display: block; font-size: 1.35rem; font-weight: 800; color: var(--accent, #FFD700); }
.countdown__label { font-size: .75rem; opacity: .8; margin-bottom: 1rem; }
.countdown__live { display: inline-block; font-size: 1.1rem; font-weight: 800; color: var(--highlight, #FF6B35); margin-bottom: 1rem; animation: neonFlicker 2s infinite; }
.hero__scroll { color: #fff; text-decoration: none; font-size: .82rem; opacity: .75; animation: bounce 2s ease infinite; }
@keyframes bounce { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(6px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

body[data-scene='guochao'] .hero__title { font-family: 'Ma Shan Zheng', serif; }
body[data-scene='wenchuang'] .hero__title { font-family: 'ZCOOL XiaoWei', serif; }

/* 市集味道 + 蒸汽 */
.section--atmosphere { overflow: hidden; }
.atmosphere-card { padding: 1.5rem; border-left: 4px solid var(--primary); position: relative; z-index: 1; }
.atmosphere-card__p { color: var(--text-light); margin-bottom: 1rem; text-align: left; }
.atmosphere-card__p:last-child { margin-bottom: 0; }
.steam {
  position: absolute; width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 70%);
  animation: steamRise 4s ease-in-out infinite; pointer-events: none;
}
.steam--1 { left: 10%; bottom: 20%; animation-delay: 0s; }
.steam--2 { right: 15%; bottom: 30%; animation-delay: 1.5s; }
@keyframes steamRise {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  30% { opacity: 0.5; }
  100% { transform: translateY(-80px) scale(1.5); opacity: 0; }
}

/* 好食好物 */
.stall-filters { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .75rem; margin-bottom: 1rem; -webkit-overflow-scrolling: touch; }
.stall-filter { flex-shrink: 0; padding: .4rem .85rem; border-radius: 999px; font-size: .78rem; border: 1px solid var(--border); color: var(--text-light); background: var(--bg-card); white-space: nowrap; }
.stall-filter.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.stall-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 768px) { .stall-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .stall-grid { grid-template-columns: repeat(4, 1fr); } }
.stall-card {
  overflow: hidden; opacity: 0; transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.stall-card.visible { opacity: 1; transform: translateY(0); }
.stall-card__img-wrap { position: relative; aspect-ratio: 1; overflow: hidden; }
.stall-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.stall-card:hover img { transform: scale(1.06); }
.stall-card__badge { position: absolute; top: .5rem; left: .5rem; font-size: .65rem; padding: .2rem .5rem; border-radius: 999px; background: var(--highlight); color: #fff; font-weight: 700; }
.stall-card__body { padding: .75rem; }
.stall-card__id { font-size: .65rem; color: var(--accent); font-weight: 700; }
.stall-card__name { font-size: .92rem; font-weight: 800; margin: .15rem 0; }
.stall-card__desc { font-size: .75rem; color: var(--text-light); margin-bottom: .35rem; }
.stall-card__price { font-size: .82rem; color: var(--primary); font-weight: 700; }

/* 特色活动 */
.activity-track { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; }
.activity-card { flex: 0 0 75%; max-width: 280px; padding: 1.15rem; position: relative; }
@media (min-width: 768px) { .activity-card { flex: 0 0 240px; } }
.activity-card--live { border-color: var(--highlight); box-shadow: 0 0 16px rgba(255,107,53,.25); }
.activity-card__live { position: absolute; top: .65rem; right: .65rem; font-size: .65rem; padding: .15rem .45rem; border-radius: 999px; background: var(--highlight); color: #fff; font-weight: 700; animation: neonFlicker 2s infinite; }
.activity-card__icon { font-size: 1.5rem; }
.activity-card__time { display: block; font-size: .75rem; color: var(--primary); font-weight: 700; margin: .35rem 0; }
.activity-card__name { font-size: .95rem; font-weight: 800; margin-bottom: .25rem; }
.activity-card__place { font-size: .78rem; color: var(--text-light); margin-bottom: .35rem; }
.activity-card__desc { font-size: .82rem; color: var(--text-light); }

/* 摊主故事 */
.vendor-track { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory; }
.vendor-card { flex: 0 0 72%; max-width: 260px; padding: 1.25rem; text-align: center; scroll-snap-align: center; transition: transform .25s ease; }
.vendor-card:active { transform: scale(.97); }
.vendor-card__avatar { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; margin: 0 auto .65rem; border: 2px solid var(--primary); }
.vendor-card__name { font-size: 1rem; font-weight: 800; }
.vendor-card__specialty { font-size: .78rem; color: var(--primary); margin-bottom: .5rem; }
.vendor-card__quote { font-size: .85rem; color: var(--text-light); font-style: italic; line-height: 1.6; }

/* 逛集指南 */
.map-wrap { padding: 1rem; margin-bottom: 1rem; }
.market-map { width: 100%; height: auto; }
.map-bg { fill: var(--bg); stroke: var(--border); stroke-width: 2; stroke-dasharray: 6 4; }
.map-zone { fill: rgba(255,107,53,.12); stroke: var(--primary); stroke-width: 1.5; cursor: pointer; transition: fill .2s; }
.map-zone:hover { fill: rgba(255,107,53,.25); }
.map-zone-label { font-size: 9px; fill: var(--text); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.map-stall { fill: var(--highlight); stroke: #fff; stroke-width: 2; cursor: pointer; transition: r .2s, fill .2s; }
.map-stall:hover, .map-stall.active { fill: var(--primary); r: 11; }
.map-tip { text-align: center; font-size: .78rem; color: var(--text-light); margin-top: .65rem; }
.info-grid { display: grid; grid-template-columns: 1fr; gap: .65rem; }
@media (min-width: 640px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
.info-card { padding: 1rem; display: flex; gap: .75rem; align-items: flex-start; }
.info-card__icon { font-size: 1.35rem; flex-shrink: 0; }
.info-card__title { font-size: .85rem; font-weight: 800; margin-bottom: .25rem; }
.info-card__text { font-size: .78rem; color: var(--text-light); line-height: 1.55; }
.info-card__text a { color: var(--primary); text-decoration: underline; }
.weather-note { text-align: center; font-size: .82rem; color: var(--text-light); margin-top: 1rem; padding: .65rem; border-radius: .65rem; background: var(--bg-card); border: 1px dashed var(--border); }

/* CTA */
.footer-cta { text-align: center; padding-bottom: 3rem; }
.btn-pulse { animation: breathe 2.5s ease-in-out infinite; font-size: 1.05rem; padding: 0.85rem 2rem; }
@keyframes breathe {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,107,53,.4); }
  50% { transform: scale(1.04); box-shadow: 0 0 20px 4px rgba(255,107,53,.35); }
}

/* 弹层 */
.modal { position: fixed; inset: 0; z-index: 9100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[hidden] { display: none !important; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.modal__box { position: relative; background: var(--bg-card); border-radius: 1rem; padding: 1.25rem; max-width: 420px; width: 100%; max-height: 90vh; overflow-y: auto; color: var(--text); border: 1px solid var(--border); }
.modal__close { position: absolute; top: .5rem; right: .75rem; font-size: 1.25rem; z-index: 1; color: var(--text); }
.stall-modal__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: .65rem; margin-bottom: .75rem; }
.stall-modal__id { font-size: .72rem; color: var(--accent); font-weight: 700; }
.stall-modal__name { font-size: 1.15rem; font-weight: 800; margin: .25rem 0; }
.stall-modal__vendor { font-size: .82rem; color: var(--text-light); margin-bottom: .5rem; }
.stall-modal__detail { font-size: .88rem; color: var(--text-light); margin-bottom: .5rem; }
.stall-modal__price { font-size: .95rem; color: var(--primary); font-weight: 800; }
.poster-modal { text-align: center; max-width: 90vw; }
.poster-modal__title { font-size: .85rem; margin-bottom: .75rem; color: var(--text-light); }
#poster-canvas { max-width: 100%; height: auto; border-radius: .5rem; margin-bottom: .75rem; }

.theme-panel { position: fixed; top: calc(.75rem + env(safe-area-inset-top)); right: .75rem; z-index: 800; }
.scene-panel { position: fixed; top: calc(.75rem + env(safe-area-inset-top)); left: .75rem; z-index: 800; }
.theme-panel__toggle, .scene-panel__toggle { width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1.1rem; background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.theme-panel__list, .scene-panel__list { position: absolute; top: calc(100% + .35rem); min-width: 10rem; max-height: 50vh; overflow-y: auto; padding: .35rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: .75rem; box-shadow: 0 8px 32px rgba(0,0,0,.2); display: flex; flex-direction: column; gap: .2rem; }
.theme-panel__list { right: 0; }
.scene-panel__list { left: 0; }
.theme-panel__list[hidden], .scene-panel__list[hidden] { display: none !important; }
.theme-panel__list button, .scene-panel__list button { text-align: left; padding: .45rem .65rem; border-radius: .5rem; font-size: .78rem; color: var(--text); }
.theme-panel__list button.active, .scene-panel__list button.active { background: var(--primary); color: #fff; font-weight: 700; }

.back-top { position: fixed; z-index: 700; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--primary); color: #fff; font-size: 1.1rem; box-shadow: 0 4px 16px rgba(0,0,0,.25); right: 1rem; bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
.back-top[hidden] { display: none !important; }

.contact-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 600; padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom)); background: rgba(20,20,20,.94); border-top: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px); }
body[data-theme='wenchuang-craft'] .contact-footer,
body[data-theme='farmer-market'] .contact-footer,
body[data-theme='warm-autumn'] .contact-footer,
body[data-theme='sakura'] .contact-footer,
body[data-theme='retro-film'] .contact-footer,
body[data-theme='desert-bazaar'] .contact-footer { background: rgba(255,255,255,.96); border-top-color: rgba(0,0,0,.08); }
.contact-footer__btns { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.contact-footer__cta, .contact-footer__btn { padding: .45rem .85rem; border-radius: 999px; font-size: .78rem; font-weight: 600; text-decoration: none; }
.contact-footer__cta { background: var(--primary); color: #fff; }
.contact-footer__btn { border: 1px solid var(--border); color: var(--text); background: var(--bg-card); }
.contact-footer__brand { text-align: center; font-size: .62rem; color: var(--text-light); margin-top: .35rem; }