/* =========================================================
   components.css — 组件层（PLAN §2 配色纪律 / §3.2 / §4 / §5）
   -----------------------------------------------------------
   配色纪律（贯穿全文件）：
     · 大面积只用三种深底 abyss / velvet / card
     · 金色永远是细线与小面积：1px 描边、数字、图标、小标签
     · 霓虹（rose-neon / neon-violet）只出现在 text-shadow / box-shadow，
       绝不做实底填充
   卡片统一：1px 金线 + 内层 1px 深线（双线装裱框），圆角 var(--r) = 4px
   移动优先：基准 375×812，无 min-width 断点，只在 ≤340px 处收紧

   本文件只写「静态形态 + 状态过渡」；@keyframes 全部在 animations.css。
   引用到的动画名（animations.css 需提供，缺失时组件仍可正常显示）：
     petal-fall / gold-sweep / neon-pulse / gate-shake / cue-drop
   ========================================================= */


/* =========================================================
   0. 共用小件
   ========================================================= */

/* 菱形分隔符 ◆—◆—◆（gate 与 hero 内直接用 .rule） */
.rule {
  font-size: 10px;
  letter-spacing: .5em;
  text-align: center;
  color: var(--gold);
  opacity: .5;
  margin: var(--sp-1) 0 var(--sp-2);
}

/* 金色按钮：深底 + 1px 金线 + 金字，不做金底 */
.btn-gold {
  display: inline-block;
  padding: 10px var(--sp-4);
  min-height: 42px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .3em;
  text-indent: .3em;              /* 抵消末字符的字距，视觉居中 */
  color: var(--gold-bright);
  background:
    linear-gradient(180deg, rgba(201, 162, 39, .12), rgba(201, 162, 39, .04));
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6);
  transition: box-shadow .25s ease, border-color .25s ease, color .25s ease;
}

.btn-gold:active {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), var(--glow-gold);
}

.btn-gold[disabled] { opacity: .45; }

/* 图片缺失兜底：深底金框剪影 + 编号（.ph 内文字即编号） */
.ph {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--gold);
  background-color: var(--bg-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 80'%3E%3Cg fill='none' stroke='%23c9a227' stroke-opacity='.45' stroke-width='2'%3E%3Ccircle cx='30' cy='28' r='13'/%3E%3Cpath d='M8 74c0-13 10-22 22-22s22 9 22 22'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 30%;
  background-size: 56% auto;
}

/* 「月間王者」金色角标绶带（TOP1 专用，父级需 position:relative） */
.ribbon {
  position: absolute;
  top: 8px;
  left: -1px;
  z-index: 2;
  padding: 2px 10px 2px 8px;
  font-family: var(--font-serif);
  font-size: 10px;
  letter-spacing: .18em;
  white-space: nowrap;
  color: var(--gold-bright);
  background: linear-gradient(90deg, rgba(142, 31, 58, .55), rgba(10, 5, 8, .9));
  border: 1px solid var(--line);
  border-left: 0;
  text-shadow: 0 0 6px rgba(240, 214, 117, .5);
}

/* 绶带右端的三角切角 */
.ribbon::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -8px;
  border: 12px solid transparent;
  border-left-width: 8px;
  border-left-color: rgba(10, 5, 8, .9);
}

/* 入场浮现（观察器加 .in-view） */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}

.reveal.in-view,
.in-view > .reveal { opacity: 1; transform: none; }


/* =========================================================
   1. 花瓣层（Hero 与密码门）
   ========================================================= */

.petals {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.petals--gate { z-index: 0; }

/* 单片花瓣：不规则圆角 + 玫瑰渐变；位移动画由 animations.css 提供 */
.petals span {
  position: absolute;
  top: -8%;
  width: 9px;
  height: 12px;
  border-radius: 60% 0 60% 0;
  background: linear-gradient(145deg, var(--rose), rgba(255, 45, 85, .35));
  opacity: .55;
  will-change: transform;
  animation-name: petal-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


/* =========================================================
   2. 密码门 .gate（PLAN §5）
   ========================================================= */

.gate {
  position: fixed;
  inset: 0;
  z-index: var(--z-gate);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(142, 31, 58, .28), transparent 62%),
    radial-gradient(90% 60% at 50% 100%, rgba(178, 107, 255, .12), transparent 70%),
    var(--bg-abyss);
  transition: opacity .55s ease;
}

/* 防闪烁：已验证会话直接隐藏，不参与渲染 */
html.gate-passed #gate { display: none; }

/* gate.js 淡出时加 .is-out，动画结束后移除节点 */
.gate.is-out { opacity: 0; pointer-events: none; }

.gate__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  text-align: center;
  box-shadow: var(--shadow-card),
              inset 0 0 0 1px rgba(0, 0, 0, .75),
              inset 0 0 0 2px var(--line-soft);
}

.gate__card.is-shake { animation: gate-shake .42s ease both; }

.gate__brand-ja {
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: .32em;
  color: var(--gold);
  opacity: .85;
}

.gate__brand-zh {
  margin-top: 6px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: .16em;
  text-indent: .16em;
  color: var(--ink);
  text-shadow: 0 0 18px rgba(240, 214, 117, .18);
}

.gate__form { margin-top: var(--sp-3); }

.gate__label {
  display: block;
  margin-bottom: var(--sp-1);
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: .28em;
  color: var(--gold);
}

.gate__label-zh {
  margin-left: var(--sp-1);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-dim);
}

.gate__input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 var(--sp-2);
  text-align: center;
  font-size: 18px;
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--gold-bright);
  background: rgba(0, 0, 0, .45);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .25s ease, box-shadow .25s ease;
  -webkit-appearance: none;
  appearance: none;
}

.gate__input::placeholder { color: var(--ink-dim); opacity: .5; letter-spacing: .3em; }

.gate__input:focus {
  outline: 0;
  border-color: var(--gold);
  box-shadow: var(--glow-gold);
}

.gate__input.is-error {
  border-color: var(--rose-neon);
  box-shadow: var(--glow-rose);
}

.gate__btn {
  width: 100%;
  margin-top: var(--sp-3);
}

.gate__error {
  min-height: 18px;                /* 占位，报错时不跳版 */
  margin-top: var(--sp-2);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--rose-neon);
  text-shadow: 0 0 8px rgba(255, 45, 85, .45);
}

.gate__hint {
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-dim);
}


/* =========================================================
   3. 底部 Tab 导航（毛玻璃黑底 + 金线 + 激活态发光）
   ========================================================= */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-nav);
  margin: 0 auto;
  max-width: var(--page-max);
  background: rgba(10, 5, 8, .82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 金线之下再压一道极暗内线，形成双线感 */
.tabbar::before {
  content: "";
  position: absolute;
  top: 1px; left: 0; right: 0;
  height: 1px;
  background: rgba(0, 0, 0, .8);
}

.tabbar__list {
  display: flex;
  height: var(--nav-h);
}

.tabbar__list > li { flex: 1 1 0; display: flex; }

.tab {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--ink-dim);
  transition: color .25s ease;
}

.tab__icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: filter .25s ease, transform .25s ease;
}

.tab__label {
  font-family: var(--font-serif);
  font-size: 10px;
  letter-spacing: .18em;
  text-indent: .18em;
}

.tab.is-active { color: var(--gold-bright); }

.tab.is-active .tab__icon {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 6px rgba(240, 214, 117, .65));
}

/* 激活态下方 2px 金色短横 */
.tab.is-active::after {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 16px;
  height: 1px;
  background: var(--gold);
  box-shadow: var(--glow-gold);
}


/* =========================================================
   4. Hero（序章）
   ========================================================= */

.screen.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(142, 31, 58, .3), transparent 60%),
    radial-gradient(80% 50% at 50% 100%, rgba(178, 107, 255, .1), transparent 70%),
    var(--bg-abyss);
}

.hero__inner { position: relative; z-index: 1; }

.hero__ja {
  font-family: var(--font-serif);
  font-size: 12px;
  letter-spacing: .38em;
  text-indent: .38em;
  color: var(--gold);
  opacity: .9;
}

.hero__zh {
  margin-top: var(--sp-1);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 42px;
  line-height: 1.2;
  letter-spacing: .18em;
  text-indent: .18em;
  color: var(--ink);
  text-shadow: 0 0 24px rgba(240, 214, 117, .22);
}

.hero__slogan {
  margin-top: var(--sp-2);
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--ink);
  opacity: .9;
}

.hero__slogan-zh {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--ink-dim);
}

.hero__enter { margin-top: var(--sp-5); }

/* 向下滚动提示：一道下落的金色细线 */
.hero__scroll-cue {
  position: absolute;
  bottom: calc(var(--nav-h) + var(--sp-3));
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 34px;
  overflow: hidden;
  background: var(--line-soft);
}

.hero__scroll-cue span {
  display: block;
  width: 1px;
  height: 14px;
  background: var(--gold-bright);
  box-shadow: var(--glow-gold);
  animation: cue-drop 1.9s ease-in-out infinite;
}


/* =========================================================
   5. 排行榜（PLAN §3.2）
   -----------------------------------------------------------
   render.js 需生成的结构（类名以此为准）：
   .podium
     └ .podium__slot.podium__slot--1|--2|--3   （--1 居中更高更大）
         ├ .ribbon（仅 --1，「月間王者」）
         ├ .podium__crown（SVG，仅 --1）
         ├ .podium__avatar > img | .ph
         ├ .podium__no / .podium__title
         └ .podium__welcome > .num + .heart
   .rank-list > .rank-row
     ├ .rank-no / .rank-avatar / .rank-info（含 .rank-info__no/.rank-info__title）
     └ .rank-welcome（.num + .heart）+ .wbar > .wbar-fill（style="--w:xx%"）
   ========================================================= */

/* ---- TOP3 领奖台 ---- */

.podium {
  display: grid;
  grid-template-columns: 1fr 1.24fr 1fr;
  align-items: end;
  gap: var(--sp-1);
  margin-bottom: var(--sp-5);
}

.podium__slot {
  position: relative;
  padding: var(--sp-2) 4px var(--sp-2);
  text-align: center;
}

/* 第 1 名居中且更高：靠 order 与 padding 抬高，不动 DOM 顺序 */
.podium__slot--1 { order: 2; padding-bottom: var(--sp-4); }
.podium__slot--2 { order: 1; }
.podium__slot--3 { order: 3; }

.podium__avatar {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--sp-2);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8);
}

.podium__avatar img,
.podium__avatar .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* 金/银/铜双环：外环用名次金属色，内环深色间隙 */
.podium__slot--1 .podium__avatar {
  width: 96px;
  height: 96px;
  border-color: var(--metal-1);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8),
              0 0 0 3px rgba(10, 5, 8, 1),
              0 0 0 4px rgba(240, 214, 117, .55),
              0 0 16px rgba(240, 214, 117, .3);
}

.podium__slot--2 .podium__avatar {
  border-color: var(--metal-2);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8),
              0 0 0 3px rgba(10, 5, 8, 1),
              0 0 0 4px rgba(201, 204, 212, .4);
}

.podium__slot--3 .podium__avatar {
  border-color: var(--metal-3);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8),
              0 0 0 3px rgba(10, 5, 8, 1),
              0 0 0 4px rgba(201, 143, 90, .4);
}

/* 皇冠：浮在第 1 名头像正上方 */
.podium__crown {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 22px;
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(240, 214, 117, .6));
}

.podium__no {
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--gold);
}

.podium__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .06em;
  color: var(--ink);
}

.podium__slot--1 .podium__title { font-size: 15px; }

/* TOP1 称号金光扫过 */
.podium__slot--1 .podium__title {
  background: linear-gradient(100deg,
    var(--ink) 20%, var(--gold-bright) 45%, #fff8dc 50%, var(--gold-bright) 55%, var(--ink) 80%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gold-sweep 4.5s ease-in-out infinite;
}

.podium__welcome {
  margin-top: 2px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-num);
  font-size: 20px;
  color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(240, 214, 117, .35);
}

.podium__slot--1 .podium__welcome { font-size: 26px; }

/* 霓虹心形：只发光，不做实底 */
.heart {
  font-family: var(--font-sans);
  font-size: .62em;
  color: var(--rose-neon);
  text-shadow: var(--glow-rose);
  animation: neon-pulse 2.6s ease-in-out infinite;
}

/* ---- 4~6 名列表 ---- */

.rank-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.rank-row {
  position: relative;
  display: grid;
  grid-template-columns: 30px 48px 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--bg-card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6);
  /* 入场浮现（观察器加 .in-view） */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1),
              border-color .3s ease;
}

.rank-row.in-view { opacity: 1; transform: none; }

.rank-row:active { border-color: var(--line); }

/* 名次：描边空心字 */
.rank-no {
  font-family: var(--font-num);
  font-size: 24px;
  line-height: 1;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  text-stroke: 1px var(--gold);
  opacity: .85;
}

.rank-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-abyss);
  border: 1px solid var(--line-soft);
}

.rank-avatar img,
.rank-avatar .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.rank-info { min-width: 0; }

.rank-info__no {
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--gold);
}

.rank-info__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rank-welcome {
  font-family: var(--font-num);
  font-size: 16px;
  text-align: right;
  white-space: nowrap;
  color: var(--gold-bright);
}

/* 欢迎值进度条：轨道极暗，填充丝绒玫瑰红 + 霓虹光 */
.wbar {
  grid-column: 2 / -1;
  height: 3px;
  margin-top: 2px;
  background: rgba(0, 0, 0, .55);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.wbar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, rgba(142, 31, 58, .6), var(--rose) 70%, var(--rose-neon));
  box-shadow: 0 0 8px rgba(255, 45, 85, .5);
  transition: width 1.1s cubic-bezier(.22, .61, .36, 1) .12s;
}

/* 进入视口时生长到 --w（render.js 以 style="--w:78%" 注入） */
.rank-row.in-view .wbar-fill { width: var(--w, 0%); }


/* =========================================================
   6. 名片卡（PLAN §4）
   ========================================================= */

.cast-track {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* 首尾卡片也能居中吸附 */
  padding: 4px calc((100% - min(78vw, 320px)) / 2) var(--sp-2);
  margin: 0 calc(var(--gutter) * -1);
}

.cast-track::-webkit-scrollbar { display: none; }

.card {
  position: relative;
  flex: 0 0 auto;
  width: min(78vw, 320px);
  aspect-ratio: 3 / 4.6;
  scroll-snap-align: center;
  perspective: 1000px;
  cursor: pointer;
  /* 入场浮现 */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}

.card.in-view { opacity: 1; transform: none; }

/* 老浏览器无 aspect-ratio 时的兜底高度 */
@supports not (aspect-ratio: 3 / 4.6) {
  .card { height: calc(min(78vw, 320px) * 1.533); }
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .72s cubic-bezier(.4, .1, .2, 1);
}

.card.flipped .card-inner,
.card-inner.flipped { transform: rotateY(180deg); }

/* 正反两面：双线金框 + 4px 圆角 */
.card-front,
.card-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-card);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .85),
              inset 0 0 0 2px var(--line-soft),
              var(--shadow-card);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
  background-color: var(--bg-card);
  background-image: var(--pattern);
  background-size: 80px 80px;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
}

/* 背面底纹压到 4%（§2.3） */
.card-back::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 26, .93);
  pointer-events: none;
}

.card-back > * { position: relative; z-index: 1; }

/* ---- 正面：照片 72% 高 + 底部渐变压暗 ---- */

.card-front img,
.card-front .ph {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 78%;
  object-fit: cover;
  object-position: top;
}

.card-front::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 22%;
  height: 35%;
  background: linear-gradient(180deg, transparent, var(--bg-card));
  pointer-events: none;
}

/* 左上角塔罗罗马数字 I~VI */
.card__tower-num {
  position: absolute;
  top: var(--sp-1);
  left: var(--sp-2);
  z-index: 2;
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: .16em;
  color: var(--gold-bright);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
}

/* 右上角当月排名徽章 */
.card__rank-badge {
  position: absolute;
  top: var(--sp-1);
  right: var(--sp-1);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  font-family: var(--font-num);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--gold);
  background: rgba(10, 5, 8, .72);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
}

.card__rank-badge--1 {
  color: var(--gold-bright);
  border-color: var(--metal-1);
  box-shadow: 0 0 10px rgba(240, 214, 117, .35);
}

/* 正面底部文字区（编号 + 称号 + 欢迎值） */
.card__meta {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 var(--sp-3) var(--sp-4);
  text-align: center;
}

.card__no {
  font-family: var(--font-num);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--gold);
}

.card__title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: .1em;
  text-indent: .1em;
  color: var(--ink);
  text-shadow: 0 0 14px rgba(0, 0, 0, .8);
}

.card__welcome {
  margin-top: 2px;
  font-family: var(--font-num);
  font-size: 15px;
  color: var(--gold-bright);
}

/* 卡角常驻翻转提示 */
.card__hint {
  position: absolute;
  right: var(--sp-2);
  bottom: 6px;
  z-index: 2;
  font-family: var(--font-serif);
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--ink-dim);
  opacity: .75;
}

.card.flipped .card__hint { opacity: 0; }

/* ---- 背面：称号 + 两栏数据行 + 胶囊爱好 ---- */

.card__back-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .12em;
  text-align: center;
  color: var(--ink);
}

.card__back-rule {
  margin: var(--sp-1) auto var(--sp-3);
  width: 46%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: .7;
}

.card__row {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: var(--sp-1);
  padding: 5px 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 13px;
}

.card__k {
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--gold);
}

.card__v { color: var(--ink); }

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-2);
}

.card__intro {
  margin-top: var(--sp-3);
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .04em;
  text-align: center;
  color: var(--ink-dim);
}

/* ---- 圆点指示器 ---- */

.cast-dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
}

.cast-dots .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}

.cast-dots .dot.active {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  box-shadow: var(--glow-gold);
  transform: scale(1.15);
}


/* =========================================================
   7. 店铺案内（PLAN §6 / Step 6）
   ========================================================= */

.salon {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* 全宽氛围图；无图时纯渐变兜底不破版 */
.salon-hero {
  position: relative;
  height: 190px;
  margin: 0 calc(var(--gutter) * -1);
  overflow: hidden;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(142, 31, 58, .45), transparent 65%),
    linear-gradient(180deg, var(--bg-card), var(--bg-abyss));
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.salon-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .85;
}

/* 图片底部压暗，保证下方金线可读 */
.salon-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 5, 8, .45), transparent 40%, rgba(10, 5, 8, .85));
  pointer-events: none;
}

.addr-card {
  position: relative;
  padding: var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .75),
              inset 0 0 0 2px var(--line-soft);
}

.addr-card__ja {
  font-family: var(--font-serif);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--gold);
  opacity: .85;
}

.addr-card__text {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: .04em;
  color: var(--ink);
}

.addr-copy {
  margin-top: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--gold-bright);
  background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: box-shadow .25s ease, border-color .25s ease;
}

.addr-copy:active {
  border-color: var(--gold);
  box-shadow: var(--glow-gold);
}

.info-row {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}

.info-row:last-of-type { border-bottom: 0; }

.info-row__k {
  font-family: var(--font-serif);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--gold);
}

.info-row__v { color: var(--ink); letter-spacing: .04em; }

/* 预约提示：玫瑰红竖线 + 极淡玫瑰底，不用金底 */
.notice-box {
  padding: var(--sp-2) var(--sp-3);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: .06em;
  color: var(--ink);
  background: linear-gradient(90deg, rgba(142, 31, 58, .22), rgba(20, 16, 26, .5));
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--rose);
  border-radius: 0 var(--r) var(--r) 0;
}


/* =========================================================
   8. Toast（复制地址等轻反馈）
   ========================================================= */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + var(--sp-3));
  z-index: calc(var(--z-nav) + 1);
  max-width: 76vw;
  padding: 8px 18px;
  font-size: 12px;
  letter-spacing: .1em;
  white-space: nowrap;
  color: var(--gold-bright);
  background: rgba(10, 5, 8, .92);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}

.toast.is-show { opacity: 1; transform: translate(-50%, 0); }


/* =========================================================
   9. 小屏回归（≤340px）
   ========================================================= */

@media (max-width: 340px) {
  .hero__zh { font-size: 34px; }
  .gate__brand-zh { font-size: 26px; }
  .podium { gap: 2px; }
  .podium__slot--1 .podium__avatar { width: 84px; height: 84px; }
  .podium__avatar { width: 62px; height: 62px; }
  .podium__slot--1 .podium__welcome { font-size: 22px; }
  .podium__welcome { font-size: 17px; }
  .podium__title { font-size: 12px; }
  .podium__slot--1 .podium__title { font-size: 13px; }
  .rank-row { grid-template-columns: 24px 42px 1fr auto; }
  .rank-avatar { width: 42px; height: 42px; }
  .card { width: 82vw; }
  .card__title { font-size: 17px; }
}