/* 字体为本地托管，避免依赖国内访问不稳定的 Google Fonts。中文用各系统自带黑体。 */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('assets/fonts/barlow-condensed-latin-800-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Chivo Mono';
  src: url('assets/fonts/chivo-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Chivo Mono';
  src: url('assets/fonts/chivo-mono-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --red: #D9230F;
  --red-deep: #A81A08;
  --gold: #FFD23F;
  --backdrop: #F4F4F2;
  --cream: #FFF4E6;
  --ticket: #FFF8E7;
  --white: #FFFFFF;
  --ink: #2A1408;
  --ink-gold: #3A1200;
  --muted: #7A5C4A;
  --muted-gold: #5A3410;
  --note: #FFE9C9;
  --dash: #E9B9A8;
  --digit-dim: #9A8170;
  --shadow: rgba(120, 40, 10, 0.14);
  --font-body: 'PingFang SC', 'HarmonyOS Sans SC', 'MiSans', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-num: 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
  --font-mono: 'Chivo Mono', ui-monospace, Menlo, Consolas, monospace;
  --gutter: 20px;
}

* { box-sizing: border-box; }

html {
  background: var(--backdrop);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* 手机上内容占满全宽，页面底色只会出现在状态栏和回弹区域：
   首屏用红色接上 hero，离开首屏后跟随内容区的米色。
   更宽的屏幕两侧会露底，所以保持中性灰。 */
@media (max-width: 600px) {
  html { background: #DB2210; }
  html.past-hero { background: var(--cream); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul { list-style: none; padding: 0; }

button {
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 3px solid #1F5FD6;
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.page {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  box-shadow: 0 0 24px rgba(40, 20, 10, 0.12);
}

.num {
  font-family: var(--font-num);
  font-style: italic;
  font-weight: 800;
}

/* 首屏 */
.hero {
  position: relative;
  overflow: hidden;
  padding: calc(16px + env(safe-area-inset-top)) var(--gutter) 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--white);
  background: repeating-conic-gradient(from 0deg at 50% 46%, #DB2210 0deg 10deg, #E3260F 10deg 20deg);
}

.hero picture { display: block; margin: -16px calc(var(--gutter) * -1) -15%; }

.hero__art {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(#000 72%, transparent 92%);
  mask-image: linear-gradient(#000 72%, transparent 92%);
}


.hero__title {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-weight: inherit;
  font-size: inherit;
}

.hero__heading { display: flex; flex-direction: column; }

.hero__eyebrow {
  font-size: 20px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.06em;
}

.hero__name {
  font-size: clamp(38px, 11.3vw, 48px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ticket);
  color: var(--red);
  border-radius: 18px;
}

.ticket::before,
.ticket::after {
  content: '';
  position: absolute;
  bottom: 58px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #DF2410;
}
.ticket::before { left: -11px; }
.ticket::after { right: -11px; }

.ticket__price {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px 8px;
}

.ticket__num {
  font-size: clamp(170px, 62vw, 270px);
  line-height: 0.95;
  letter-spacing: -0.01em;
}

.ticket__unit {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.6;
}

.ticket__stub {
  min-height: 69px;
  padding: 12px var(--gutter);
  border-top: 2px dashed var(--dash);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.ticket__daily { color: var(--red); }

.hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border-radius: 28px;
  background: var(--gold);
  color: var(--ink-gold);
  font-size: 19px;
  font-weight: 900;
  text-decoration: none;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 0 var(--red-deep);
}
.hero__cta:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--red-deep); }

/* 年卡福利 */
.perks {
  position: relative;
  z-index: 1;
  margin: -36px var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.perk {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 6px 16px var(--shadow);
}

.perk__label { font-size: 12px; font-weight: 700; color: var(--muted); }
.perk__value { font-size: clamp(17px, 5.1vw, 20px); font-weight: 900; line-height: 1.25; color: var(--red); white-space: nowrap; }
.perk__desc { font-size: 12px; color: var(--muted); }

/* 区块标题 */
.section-head { display: flex; flex-direction: column; gap: 4px; }
.section-head h2 { font-size: 30px; font-weight: 900; line-height: 1.25; }
.section-head p { color: var(--muted); }

/* 计算器 */
.calc {
  padding: 32px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-margin-top: 0;
}

.calc .section-head strong { color: var(--red); }

/* top 设为 -1px，吸顶时元素会有 1px 超出视口，app.js 借此判断是否已吸顶。 */
.identity {
  position: sticky;
  top: -1px;
  z-index: 2;
  margin: 0 calc(var(--gutter) * -1);
  background: var(--cream);
  padding: 9px var(--gutter) 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.identity--stuck { background: transparent; }
.identity--stuck .identity__label { display: none; }
.identity--stuck .identity__options { box-shadow: 0 4px 14px var(--shadow); }

/* 吸顶时的背景：毛玻璃模糊，颜色和模糊都从上到下渐隐，并延伸到按钮下方，不形成硬边色块。 */
.identity--stuck::before {
  content: '';
  position: absolute;
  inset: 0 0 -18px;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(255, 244, 230, 0.92) 0%, rgba(255, 244, 230, 0.6) 60%, rgba(255, 244, 230, 0) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  pointer-events: none;
}

.identity__label { font-weight: 700; white-space: nowrap; }

.identity__options {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  background: var(--white);
  border-radius: 26px;
}

.identity__btn {
  min-height: 44px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}
.identity__btn[aria-pressed='true'] { background: var(--red); color: var(--white); }

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 8px;
  border: 2px solid var(--white);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  text-align: left;
}
.card[aria-pressed='true'] { background: var(--red); border-color: var(--red); color: var(--white); }

.card__name { font-size: 14px; font-weight: 700; white-space: nowrap; }
.card__tag { margin-left: 4px; font-size: 11px; font-weight: 500; color: var(--muted); }
.card[aria-pressed='true'] .card__tag { color: var(--note); }
.card__price { display: flex; align-items: baseline; gap: 3px; }
.card__num { font-size: clamp(32px, 10.2vw, 44px); line-height: 1.05; }
.card__unit { font-size: 13px; font-weight: 700; }
.card__note { font-size: 12px; color: var(--muted); }
.card[aria-pressed='true'] .card__note { color: var(--note); }

.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  background: var(--white);
  border-radius: 14px;
}

.option--toggle {
  width: 100%;
  border: 0;
  color: var(--ink);
  font-size: 15px;
  text-align: left;
}

.option--stack { flex-direction: column; align-items: stretch; gap: 10px; }

.option__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.option__title { font-weight: 700; }
.option__desc { font-size: 13px; color: var(--muted); }

.stepper { flex: 0 0 auto; display: flex; align-items: center; }

.stepper__btn {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-size: 22px;
  line-height: 1;
}
.stepper__btn:disabled { background: #F3E4D3; color: var(--muted); cursor: default; }

.stepper__count {
  width: 34px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}

.switch {
  flex: 0 0 auto;
  width: 50px;
  height: 30px;
  padding: 3px;
  display: flex;
  justify-content: flex-start;
  border-radius: 15px;
  background: #B8A596;
}
.switch__knob { width: 24px; height: 24px; border-radius: 50%; background: var(--white); }
[aria-pressed='true'] > .switch { justify-content: flex-end; background: var(--red); }

.months {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.months__btn {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.months__btn[aria-pressed='true'] { background: var(--red); color: var(--white); }

.calc__note {
  padding: 12px 14px;
  background: var(--note);
  border-radius: 14px;
  font-size: 14px;
  color: var(--muted-gold);
}

.result {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 22px var(--shadow);
}

.result__top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  background: var(--red);
  color: var(--white);
}

.result__stat { display: flex; flex-direction: column; }
.result__stat--daily .result__value { color: var(--gold); }
.result__label { font-weight: 700; }
.result__value { display: flex; align-items: baseline; gap: 4px; }
.result__num { font-size: clamp(48px, 15.4vw, 64px); line-height: 1.05; }
.result__unit { font-size: 15px; font-weight: 700; }

.result__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.result__group { display: flex; flex-direction: column; }
.result__group + .result__group { border-top: 1px dashed var(--dash); padding-top: 12px; }
.result__group h3 { margin-bottom: 4px; font-size: 14px; font-weight: 700; color: var(--muted); }

.rows__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.rows__row dd { white-space: nowrap; }
.rows__row--total { font-weight: 700; color: var(--red); }

.result__foot { font-size: 12px; color: var(--muted); }

/* 抢 1 大战 */
.game {
  padding: 32px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--gold);
  color: var(--ink-gold);
}

.game .section-head p { color: var(--muted-gold); }
.game__one { color: #C41E0B; }

.stopwatch {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 16px;
  background: var(--ticket);
  border-radius: 18px;
}

.digits { display: flex; font-family: var(--font-mono); font-weight: 400; }
.digits__char { color: var(--digit-dim); }
.digits__char--one { color: var(--red); font-weight: 700; }

.stopwatch__time {
  justify-content: center;
  font-size: clamp(44px, 14.5vw, 64px);
  line-height: 1.1;
}

.stopwatch__msg { text-align: center; min-height: 44px; font-weight: 500; }

.stopwatch__actions { display: flex; gap: 10px; }

.stopwatch__main {
  flex: 1 1 auto;
  min-height: 52px;
  border: 0;
  border-radius: 26px;
  background: var(--red);
  color: var(--white);
  font-size: 17px;
  font-weight: 900;
}

.stopwatch__reset {
  flex: 0 0 88px;
  min-height: 52px;
  border: 1px solid #B8A596;
  border-radius: 26px;
  background: transparent;
  color: var(--ink-gold);
  font-size: 15px;
  font-weight: 700;
}

.stopwatch__hint { text-align: center; font-size: 13px; color: var(--muted); }

.examples {
  padding: 4px 14px;
  background: var(--ticket);
  border-radius: 14px;
}

.examples__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-weight: 700;
  text-align: right;
}
.examples__row .digits { font-size: 20px; }

.game__rule { font-size: 13px; color: var(--muted-gold); }

/* 次卡 */
.passes {
  padding: 32px var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.passes__eight { color: var(--red); }
.passes__list { display: flex; flex-direction: column; gap: 8px; }

.pass {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--white);
  border-radius: 14px;
}

.pass__info, .pass__prices { display: flex; flex-direction: column; }
.pass__prices { align-items: flex-end; }
.pass__name { font-size: 17px; font-weight: 700; }
.pass__each, .pass__original { font-size: 13px; color: var(--muted); }
.pass__price { display: flex; align-items: baseline; gap: 4px; color: var(--red); font-weight: 700; }
.pass__num { font-size: 42px; line-height: 1.05; }

/* 到店办理 */
.contact {
  padding: 8px var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-margin-top: 16px;
}

.contact h2 { font-size: 24px; font-weight: 900; line-height: 1.25; }

.contact__list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px 16px;
}
.contact__list dt { color: var(--muted); white-space: nowrap; }
.contact__list dd { font-weight: 500; }

/* 链接行加大点击区域，负外边距抵消，不改变行距。 */
.contact__link {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
  color: var(--red);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 微信二维码：必须是普通 img，上面不能盖任何元素，否则微信里无法长按识别。 */
.wechat {
  margin-top: 8px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: #fff;
  border-radius: 16px;
  text-align: center;
}
.wechat__qr {
  display: block;
  width: 200px;
  height: 200px;
  margin-bottom: 8px;
  -webkit-touch-callout: default;
}
.wechat__title { font-size: 18px; font-weight: 900; line-height: 1.3; }
.wechat__hint { color: var(--muted); font-size: 14px; }

/* 底部固定购买栏 */
/* 用 fixed 不占文档流，收起后页尾不会留空白。 */
.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 600px;
  margin: 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--white);
  box-shadow: 0 -4px 16px rgba(120, 40, 10, 0.16);
  transition: transform 0.22s ease;
}

/* 多移 24px 把阴影也带出屏幕；键盘聚焦到按钮时要露出来。 */
.buybar--hidden { transform: translateY(calc(100% + 24px)); }
.buybar--hidden:focus-within { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .buybar { transition: none; }
}

.buybar__price { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.buybar__name { font-weight: 700; }
.buybar__num { font-size: 36px; line-height: 1; color: var(--red); }
.buybar__unit { font-weight: 700; color: var(--red); }

.buybar__cta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 23px;
  background: var(--red);
  color: var(--white);
  font-weight: 900;
  text-decoration: none;
}