/* R34 集市活动行销H5 · 13色板 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; background: var(--bg); color: var(--text); line-height: 1.65; padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); transition: background .35s, color .35s; }
body.showcase-back-active { padding-top: calc(44px + env(safe-area-inset-top, 0)); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }

body[data-theme='tomato'] { --primary:#E53935; --primary-dark:#B71C1C; --bg:#FFF8E1; --bg-card:#FFF; --text:#4E342E; --text-light:#B71C1C; --border:#FFCDD2; --hero-overlay:rgba(78,52,46,.58); --accent:#FF8F00; }
body[data-theme='mint'] { --primary:#26A69A; --primary-dark:#00796B; --bg:#FFFDF7; --bg-card:#FFF; --text:#004D40; --text-light:#00796B; --border:#B2DFDB; --hero-overlay:rgba(0,77,64,.55); --accent:#43A047; }
body[data-theme='caramel'] { --primary:#8D6E63; --primary-dark:#4E342E; --bg:#F5E6CC; --bg-card:#FFFDF5; --text:#3E2723; --text-light:#6D4C41; --border:#D7CCC8; --hero-overlay:rgba(62,39,35,.6); --accent:#A1887F; }
body[data-theme='family'] { --primary:#FF7043; --primary-dark:#E64A19; --bg:#E3F2FD; --bg-card:#FFF; --text:#BF360C; --text-light:#F4511E; --border:#FFCCBC; --hero-overlay:rgba(191,54,12,.55); --accent:#29B6F6; }
body[data-theme='pet'] { --primary:#EC407A; --primary-dark:#AD1457; --bg:#FFFDF7; --bg-card:#FFF; --text:#880E4F; --text-light:#C2185B; --border:#F8BBD0; --hero-overlay:rgba(136,14,79,.5); --accent:#F8BBD0; }
body[data-theme='neon'] { --primary:#7B1FA2; --primary-dark:#4A148C; --bg:#1A1A2E; --bg-card:#252540; --text:#F5F5F5; --text-light:#CE93D8; --border:#444; --hero-overlay:rgba(0,0,0,.65); --accent:#00E5FF; }
body[data-theme='classic'] { --primary:#1C1C1C; --primary-dark:#C9A84C; --bg:#FFF; --bg-card:#FAFAFA; --text:#1C1C1C; --text-light:#666; --border:#E0E0E0; --hero-overlay:rgba(0,0,0,.6); --accent:#C9A84C; }
body[data-theme='forest'] { --primary:#43A047; --primary-dark:#1B5E20; --bg:#F1F8E9; --bg-card:#FFF; --text:#1B5E20; --text-light:#388E3C; --border:#C8E6C9; --hero-overlay:rgba(27,94,32,.5); --accent:#8BC34A; }
body[data-theme='ocean'] { --primary:#1976D2; --primary-dark:#0D47A1; --bg:#F5F8FC; --bg-card:#FFF; --text:#0D47A1; --text-light:#1976D2; --border:#BBDEFB; --hero-overlay:rgba(13,71,161,.55); --accent:#29B6F6; }
body[data-theme='sunset'] { --primary:#FF8F00; --primary-dark:#E65100; --bg:#FFF8F0; --bg-card:#FFF; --text:#E65100; --text-light:#F57C00; --border:#FFE0B2; --hero-overlay:rgba(230,81,0,.55); --accent:#FF7043; }
body[data-theme='sakura'] { --primary:#FF80AB; --primary-dark:#C94F6B; --bg:#FFFBF8; --bg-card:#FFF; --text:#AD1457; --text-light:#EC407A; --border:#F8BBD0; --hero-overlay:rgba(173,20,87,.5); --accent:#F48FB1; }
body[data-theme='industrial'] { --primary:#546E7A; --primary-dark:#263238; --bg:#ECEFF1; --bg-card:#FFF; --text:#263238; --text-light:#546E7A; --border:#CFD8DC; --hero-overlay:rgba(38,50,56,.65); --accent:#FF9800; }
body[data-theme='cyber'] { --primary:#00E5FF; --primary-dark:#FF0055; --bg:#0D0D0D; --bg-card:#1A1A1A; --text:#FAFAFA; --text-light:#00E5FF; --border:#333; --hero-overlay:rgba(0,0,0,.7); --accent:#FF0055; }

.glass-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 1rem; box-shadow: 0 4px 20px rgba(0,0,0,.04); }
.section { max-width: 960px; margin: 0 auto; padding: 2.5rem 1.25rem; }
.section__title { font-size: 1.35rem; text-align: center; margin-bottom: 1.25rem; color: var(--primary); font-weight: 800; }

.hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero__overlay { position: absolute; inset: 0; background: var(--hero-overlay); }
.hero__content { position: relative; z-index: 1; text-align: center; padding: 2rem 1.25rem; animation: fadeUp .8s ease; }
.hero__name { font-size: clamp(1.85rem, 7vw, 2.75rem); font-weight: 900; margin-bottom: .4rem; }
.hero__slogan { font-size: 1.05rem; margin-bottom: .35rem; opacity: .95; }
.hero__meta { font-size: .82rem; opacity: .88; margin-bottom: 1rem; line-height: 1.5; }
.hero__btns { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; margin-top: 1rem; }
.hero__scroll { display: block; margin-top: 1.25rem; font-size: .82rem; opacity: .75; animation: bob 2s infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.countdown { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.countdown__unit { background: rgba(255,255,255,.15); backdrop-filter: blur(6px); border-radius: .65rem; padding: .5rem .65rem; min-width: 3.2rem; }
.countdown__unit b { display: block; font-size: 1.35rem; font-weight: 800; }
.countdown__unit span { font-size: .65rem; opacity: .85; }
.countdown__label { font-size: .78rem; margin-top: .5rem; opacity: .85; }
.countdown__live { display: inline-block; font-size: 1.1rem; font-weight: 800; padding: .5rem 1rem; background: var(--accent, #FF8F00); border-radius: 999px; animation: pulse 1.5s infinite; }
@keyframes pulse { 50% { transform: scale(1.03); } }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: .88rem; border: none; cursor: pointer; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-outline { background: transparent; border: 1.5px solid rgba(255,255,255,.85); color: #fff; }
.section .btn-outline { border-color: var(--primary); color: var(--primary); }
.btn-accent { background: var(--accent, var(--primary)); color: #fff; }

.info-intro { font-size: .92rem; color: var(--text-light); margin-bottom: 1.25rem; text-align: center; }
.schedule-list { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.schedule-item { display: flex; gap: .75rem; padding: .75rem 1rem; align-items: flex-start; }
.schedule-item__time { font-weight: 800; color: var(--primary); min-width: 3rem; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-bottom: 1rem; }
.tag-cloud span { padding: .3rem .65rem; border-radius: 999px; font-size: .75rem; background: var(--primary); color: #fff; opacity: .9; }
.transport-grid { display: grid; gap: .65rem; }
@media (min-width: 768px) { .transport-grid { grid-template-columns: repeat(3, 1fr); } }
.transport-card { padding: 1rem; }
.transport-card__icon { font-size: 1.5rem; margin-bottom: .35rem; }
.transport-card__title { font-weight: 700; font-size: .88rem; margin-bottom: .25rem; }
.transport-card__text { font-size: .78rem; color: var(--text-light); }
.weather-tip { text-align: center; font-size: .82rem; color: var(--text-light); margin-top: 1rem; padding: .65rem; border-radius: .5rem; background: var(--bg-card); border: 1px dashed var(--border); }

.filter-row { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-bottom: 1rem; }
.filter-chip { padding: .35rem .75rem; border-radius: 999px; font-size: .78rem; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-light); cursor: pointer; }
.filter-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.vendor-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 768px) { .vendor-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .vendor-grid { grid-template-columns: repeat(4, 1fr); } }
.vendor-card { cursor: pointer; overflow: hidden; transition: transform .2s; position: relative; }
.vendor-card:hover { transform: translateY(-3px); }
.vendor-card.top-voted { border: 2px solid var(--accent, #FF8F00); box-shadow: 0 0 0 2px rgba(255,143,0,.2); }
.vendor-card__img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.vendor-card__body { padding: .75rem; }
.vendor-card__stall { font-size: .68rem; color: var(--text-light); }
.vendor-card__name { font-weight: 700; font-size: .88rem; margin: .15rem 0; }
.vendor-card__pitch { font-size: .72rem; color: var(--text-light); margin-bottom: .5rem; }
.vendor-card__foot { display: flex; justify-content: space-between; align-items: center; }
.vendor-card__tag { position: absolute; top: .5rem; left: .5rem; font-size: .65rem; background: var(--primary); color: #fff; padding: .15rem .45rem; border-radius: 999px; }
.vote-btn { font-size: .75rem; padding: .25rem .55rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; }
.vote-btn.voted { background: var(--primary); color: #fff; border-color: var(--primary); }

.story-carousel { display: flex; gap: .75rem; overflow-x: auto; padding: .5rem 0 1rem; scroll-snap-type: x mandatory; }
.story-card { flex: 0 0 85%; max-width: 320px; scroll-snap-align: center; padding: 1rem; text-align: center; }
@media (min-width: 768px) { .story-card { flex: 0 0 45%; } }
.story-card__avatar { width: 3.5rem; height: 3.5rem; border-radius: 50%; margin: 0 auto .65rem; object-fit: cover; border: 2px solid var(--primary); }
.story-card__quote { font-size: .88rem; font-style: italic; color: var(--text-light); }

.form-box { max-width: 520px; margin: 0 auto; padding: 1.25rem; }
.form-field { margin-bottom: .85rem; }
.form-field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--bg); color: var(--text); }
.form-hint { font-size: .78rem; color: var(--text-light); text-align: center; margin-bottom: 1rem; }
.form-count { text-align: center; font-weight: 700; color: var(--primary); margin-bottom: 1rem; }
.spec-grid { display: grid; gap: .65rem; margin-bottom: 1rem; }
@media (min-width: 480px) { .spec-grid { grid-template-columns: 1fr 1fr; } }
.spec-card { padding: 1rem; border: 2px solid var(--border); border-radius: .75rem; cursor: pointer; }
.spec-card.selected { border-color: var(--primary); background: rgba(229,57,53,.05); }
.spec-card__price { font-size: 1.1rem; font-weight: 800; color: var(--primary); }
.form-success { text-align: center; padding: 2rem 1rem; }
.form-success__icon { font-size: 2.5rem; margin-bottom: .75rem; }

.map-wrap { max-width: 400px; margin: 0 auto; position: relative; }
.market-map { width: 100%; height: auto; border-radius: .75rem; border: 1px solid var(--border); background: var(--bg-card); }
.map-zone { cursor: pointer; transition: opacity .2s; }
.map-zone:hover { opacity: .85; }
.map-stall { cursor: pointer; transition: r .2s; }
.map-stall:hover { stroke-width: 3; }
.map-stall.favorited { fill: var(--accent, #FF8F00); }
.map-legend { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .75rem; font-size: .72rem; }
.map-legend span { display: flex; align-items: center; gap: .25rem; }
.map-legend i { width: .75rem; height: .75rem; border-radius: 2px; display: inline-block; }

.stats-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.5rem; margin-bottom: 1.25rem; }
.stat-item { text-align: center; }
.stat-item strong { display: block; font-size: 1.4rem; color: var(--primary); }
.stat-item span { font-size: .72rem; color: var(--text-light); }
.photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 768px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
.photo-grid img { aspect-ratio: 1; object-fit: cover; border-radius: .5rem; }
.partner-tags { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }
.partner-tags span { padding: .35rem .75rem; border: 1px solid var(--border); border-radius: .5rem; font-size: .78rem; }

.interactive-tabs { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; }
.interactive-tab { padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; font-size: .78rem; }
.interactive-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.vote-rank { display: grid; gap: .5rem; max-width: 480px; margin: 0 auto; }
.vote-rank-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; }
.vote-rank-item .rank { font-weight: 800; color: var(--primary); min-width: 1.5rem; }
.wheel-wrap { max-width: 280px; margin: 0 auto; text-align: center; }
#lottery-canvas { width: 100%; max-width: 280px; border-radius: 50%; }
.wish-list { display: grid; gap: .5rem; max-height: 200px; overflow-y: auto; margin-top: .75rem; }
.wish-item { padding: .65rem .85rem; font-size: .82rem; border-left: 3px solid var(--primary); background: var(--bg-card); border-radius: 0 .5rem .5rem 0; }
.poster-preview { max-width: 280px; margin: 1rem auto; border-radius: .75rem; box-shadow: 0 8px 32px rgba(0,0,0,.12); }

.sponsor-tiers { display: grid; gap: 1rem; }
.sponsor-tier__title { font-weight: 700; font-size: .88rem; color: var(--primary); margin-bottom: .5rem; text-align: center; }
.sponsor-logos { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; }
.sponsor-logos span { padding: .5rem 1rem; border: 1px solid var(--border); border-radius: .5rem; font-weight: 600; font-size: .85rem; }

.faq-list { max-width: 640px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; text-align: left; padding: 1rem 0; background: none; border: none; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; color: var(--text); }
.faq-a { padding: 0 0 1rem; font-size: .88rem; color: var(--text-light); display: none; }
.faq-item.open .faq-a { display: block; }

.site-footer { text-align: center; padding: 2rem 1.25rem 1rem; font-size: .78rem; color: var(--text-light); }
.site-footer__qr { width: 6rem; margin: .75rem auto; border-radius: .5rem; }

.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.modal__box { position: relative; background: var(--bg-card); border-radius: 1rem; padding: 1.25rem; max-width: 420px; width: 100%; max-height: 88vh; overflow-y: auto; }
.modal__close { position: absolute; top: .65rem; right: .65rem; font-size: 1.2rem; background: none; border: none; cursor: pointer; color: var(--text-light); }

.scene-panel, .theme-panel { position: fixed; z-index: 50; }
.scene-panel { bottom: calc(5.5rem + env(safe-area-inset-bottom)); left: 1rem; }
.theme-panel { bottom: calc(5.5rem + env(safe-area-inset-bottom)); right: 1rem; }
.scene-panel__toggle, .theme-panel__toggle { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,.12); font-size: 1.25rem; cursor: pointer; }
.scene-panel__list, .theme-panel__list { position: absolute; bottom: calc(100% + .5rem); background: var(--bg-card); border: 1px solid var(--border); border-radius: .75rem; padding: .5rem; min-width: 9rem; max-height: 50vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.15); }
.theme-panel__list { right: 0; left: auto; }
.scene-panel__list button, .theme-panel__list button { display: block; width: 100%; text-align: left; padding: .4rem .6rem; border-radius: .35rem; font-size: .8rem; color: var(--text); background: none; border: none; cursor: pointer; }
.scene-panel__list button.active, .theme-panel__list button.active, .scene-panel__list button:hover, .theme-panel__list button:hover { background: var(--primary); color: #fff; }

.back-top { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom)); right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--primary); color: #fff; z-index: 40; border: none; cursor: pointer; }
.back-top[hidden] { display: none; }
.contact-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom)); background: rgba(0,0,0,.82); color: #fff; text-align: center; }
.contact-footer__btns { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: .35rem; }
.contact-footer__cta { padding: .45rem 1rem; border-radius: 999px; background: var(--primary, #E53935); color: #fff; font-size: .82rem; font-weight: 600; }
.contact-footer__btn { padding: .45rem .85rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); color: #fff; background: transparent; font-size: .82rem; cursor: pointer; }
.contact-footer__brand { font-size: .68rem; opacity: .65; }
html.has-contact-footer body { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }

/* ticket + share pages */
body.ticket-page, body.share-page { padding-bottom: 2rem; min-height: 100vh; }
.ticket-card { max-width: 360px; margin: 2rem auto; padding: 1.5rem; text-align: center; border: 2px dashed var(--primary); border-radius: 1rem; background: var(--bg-card); }
.ticket-card__code { font-family: monospace; font-size: 1.1rem; letter-spacing: .1em; color: var(--primary); margin: .75rem 0; }
.ticket-card__qr { width: 10rem; height: 10rem; margin: 1rem auto; border: 1px solid var(--border); border-radius: .5rem; }
.share-hero { position: relative; color: #fff; padding: 2.5rem 1.25rem 2rem; text-align: center; overflow: hidden; }
.share-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.share-hero__overlay { position: absolute; inset: 0; background: var(--hero-overlay); }
.share-hero__body { position: relative; z-index: 1; }