/* ==========================================================================
   20270101.com — v3「夜航 · A Night Voyage」电影级设计系统
   纯叠加：只做新增 / 覆盖，不改 main.css、v2.css 的既有规则。
   删除本文件并移除 index.html 中的引用即可整体回滚。
   设计语言：连续深空氛围 · 编辑式幽灵序号 · 金线玻璃卡片 · 滚动即镜头推进。
   ========================================================================== */

/* ---------------------------------------------------------------- 1. 令牌 */
:root{
  /* 夜色分层 */
  --v3-night:#040916;
  --v3-night-2:#070f28;
  --v3-night-3:#0b1738;
  /* 金 */
  --v3-gold:#e9c87a;
  --v3-gold-hi:#fbecc8;
  --v3-gold-dk:#b9904a;
  --v3-line:rgba(233,200,122,.22);
  --v3-line-soft:rgba(233,200,122,.12);
  /* 玻璃 */
  --v3-glass:linear-gradient(165deg,rgba(20,36,74,.66),rgba(8,16,38,.72));
  --v3-glass-brd:1px solid rgba(233,200,122,.20);
  --v3-shadow:0 30px 90px -28px rgba(0,0,0,.75),0 2px 0 rgba(255,255,255,.03) inset;
  --v3-ease:cubic-bezier(.19,.84,.31,1);
  --v3-ease-soft:cubic-bezier(.33,.8,.34,1);
}

/* ---------------------------------------------------------------- 2. 固定氛围层（由 experience.js 注入 #nyAtmos） */
#nyAtmos{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#nyAtmos .atmos-base{position:absolute;inset:0;background:
  radial-gradient(1300px 760px at 80% -10%,rgba(66,98,172,.30),transparent 62%),
  radial-gradient(1100px 820px at 10% 22%,rgba(30,66,108,.24),transparent 64%),
  radial-gradient(1000px 980px at 50% 114%,rgba(86,62,28,.20),transparent 62%),
  linear-gradient(180deg,#040916 0%,#050b1e 42%,#04081a 100%)}
#nyAtmos .atmos-stars{position:absolute;inset:-8% -4%;
  background-image:
    radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(1px 1px at 70% 18%,rgba(255,244,214,.8),transparent 60%),
    radial-gradient(1.4px 1.4px at 42% 62%,rgba(200,226,255,.85),transparent 60%),
    radial-gradient(1px 1px at 86% 70%,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1.2px 1.2px at 12% 78%,rgba(255,236,196,.8),transparent 60%),
    radial-gradient(1px 1px at 58% 8%,rgba(255,255,255,.65),transparent 60%);
  background-size:720px 720px,560px 560px,640px 640px,480px 480px,600px 600px,520px 520px;
  animation:atmosDrift 140s linear infinite;opacity:.7}
#nyAtmos .atmos-aurora{position:absolute;inset:0;mix-blend-mode:screen;opacity:.5;
  background:
    radial-gradient(760px 300px at 26% 38%,rgba(127,227,192,.10),transparent 70%),
    radial-gradient(700px 320px at 72% 30%,rgba(159,232,255,.10),transparent 70%);
  animation:atmosAurora 26s ease-in-out infinite alternate}
#nyAtmos .atmos-vignette{position:absolute;inset:0;
  background:radial-gradient(120% 96% at 50% 42%,transparent 58%,rgba(2,5,14,.55) 100%)}
@keyframes atmosDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-360px,180px,0)}}
@keyframes atmosAurora{
  0%{transform:translate3d(-2%,-1%,0);opacity:.35}
  100%{transform:translate3d(2%,1.5%,0);opacity:.6}}

/* ---------------------------------------------------------------- 3. 滚动进度金轨 */
#nyScroll{position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;pointer-events:none;
  background:rgba(233,200,122,.08)}
#nyScroll .nyScroll-bar{height:100%;width:0;
  background:linear-gradient(90deg,var(--v3-gold-dk),var(--v3-gold-hi));
  box-shadow:0 0 12px rgba(233,200,122,.7)}

/* ---------------------------------------------------------------- 4. 幽灵序号（由 JS 注入） */
.section-ghost{position:absolute;top:clamp(18px,3.4vw,44px);right:clamp(14px,4vw,46px);z-index:0;
  font-family:var(--font-display);font-weight:500;font-size:clamp(88px,15vw,210px);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(233,200,122,.15);
  pointer-events:none;user-select:none}

/* ---------------------------------------------------------------- 5. 滚动揭示（.reveal → .in） */
.reveal{opacity:0;transform:translateY(30px);
  transition:opacity .95s var(--v3-ease),transform .95s var(--v3-ease);
  will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}.reveal.d2{transition-delay:.14s}
.reveal.d3{transition-delay:.21s}.reveal.d4{transition-delay:.28s}
.reveal.d5{transition-delay:.35s}.reveal.d6{transition-delay:.42s}

/* ---------------------------------------------------------------- 6. 区块与编辑式标题 */
.section{padding-top:clamp(96px,10vw,150px);padding-bottom:clamp(96px,10vw,150px)}
.section-head{position:relative}
.section-head .eyebrow{letter-spacing:.42em;color:var(--v3-gold);opacity:.92}
.section-head h2{
  background:linear-gradient(180deg,#fff 0%,var(--v3-gold-hi) 46%,var(--v3-gold) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;letter-spacing:-.01em}
.section-head .section-sub{max-width:640px;margin:18px auto 0;letter-spacing:.04em}
/* 标题下的细金分隔 */
.section-head::after{content:"";display:block;width:54px;height:1px;margin:26px auto 0;
  background:linear-gradient(90deg,transparent,var(--v3-gold),transparent);opacity:.7}

/* ---------------------------------------------------------------- 7. 金线玻璃卡片 */
.panel,
.v3-card{
  background:var(--v3-glass);
  border:var(--v3-glass-brd);
  border-radius:4px;
  box-shadow:var(--v3-shadow);
  -webkit-backdrop-filter:blur(14px) saturate(1.12);backdrop-filter:blur(14px) saturate(1.12);
  position:relative;
  transition:transform .5s var(--v3-ease),box-shadow .5s var(--v3-ease),border-color .5s}
.v3-card:hover,
.panel:hover{transform:translateY(-5px);
  border-color:rgba(233,200,122,.42);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.8),0 0 0 1px rgba(233,200,122,.12)}
/* 四角细金线（更克制：仅两个对角） */
.panel::before,.panel::after{width:14px;height:14px;opacity:.6}
.v3-card::before,.v3-card::after{content:"";position:absolute;width:14px;height:14px;
  border:1px solid var(--v3-gold);opacity:.55;pointer-events:none}
.v3-card::before{top:7px;left:7px;border-right:0;border-bottom:0}
.v3-card::after{bottom:7px;right:7px;border-left:0;border-top:0}

/* 输入控件：更通透的玻璃感 */
.input{background:rgba(5,11,28,.55);border-color:var(--v3-line-soft);
  transition:border-color .3s,box-shadow .3s,background .3s}
.input:focus{border-color:var(--v3-gold);background:rgba(8,17,40,.7);
  box-shadow:0 0 0 3px rgba(233,200,122,.12)}

/* 按钮：金色加一层流动高光 */
.btn-gold{position:relative;overflow:hidden}
.btn-gold::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:btnSheen 5.5s var(--v3-ease) infinite}
@keyframes btnSheen{0%,55%{left:-80%}85%,100%{left:130%}}

/* ---------------------------------------------------------------- 8. 全球接力 living light（签名时刻） */
.relay{position:relative;width:100%;max-width:1080px;margin:0 auto}
.relay-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin-bottom:14px}
.relay-title{font-family:var(--font-display);font-size:clamp(18px,2.2vw,26px);color:var(--v3-gold-hi);
  letter-spacing:.02em}
.relay-live{display:inline-flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.26em;
  color:var(--v3-gold);text-transform:uppercase}
.relay-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--v3-gold);
  box-shadow:0 0 10px var(--v3-gold);animation:relayPulse 1.6s ease-in-out infinite}
@keyframes relayPulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.relay-track{position:relative;display:flex;gap:2px;height:52px;padding:0 2px;--lit:0%}
/* 贯穿的光之路：随点亮数从左向右生长 */
.relay-track::before{content:"";position:absolute;left:2px;right:2px;top:50%;height:2px;
  width:calc(var(--lit) - 4px);transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,var(--v3-gold-hi) 12%,var(--v3-gold));
  box-shadow:0 0 12px rgba(233,200,122,.8);transition:width .9s var(--v3-ease);z-index:0}
.relay-cell{flex:1 1 0;border-radius:2px;z-index:1;
  background:linear-gradient(180deg,rgba(159,232,255,.10),rgba(159,232,255,.04));
  border:1px solid rgba(159,232,255,.10);position:relative;
  transition:background .7s var(--v3-ease),box-shadow .7s,border-color .7s}
.relay-cell::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(159,232,255,.18)}
.relay-cell.lit{background:linear-gradient(180deg,var(--v3-gold-hi),var(--v3-gold) 58%,var(--v3-gold-dk));
  border-color:rgba(251,236,200,.55);box-shadow:0 0 14px rgba(233,200,122,.5)}
.relay-cell.lit::after{background:rgba(255,255,255,.45)}
.relay-cell.now{border-color:var(--v3-gold-hi);
  box-shadow:0 0 18px rgba(233,200,122,.8);animation:relayNow 1.8s ease-in-out infinite}
@keyframes relayNow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
.relay-foot{display:flex;justify-content:space-between;margin-top:12px;
  font-size:9px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.relay-count{font-family:var(--font-display);font-size:clamp(15px,1.8vw,20px);color:var(--v3-gold-hi);
  letter-spacing:.04em}

/* ---------------------------------------------------------------- 9. 地图区块：地球为主角，控件收敛 */
.map-layout{gap:26px}
.map-globe-frame{position:relative;border-radius:6px;overflow:hidden;
  border:1px solid var(--v3-line);
  box-shadow:var(--v3-shadow),0 0 60px -20px rgba(96,140,220,.4) inset}
.map-globe-frame::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0%,transparent 60%,rgba(3,7,18,.45) 100%)}
.map-side .panel{padding:22px}
/* 紧凑的小统计 */
.map-mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.map-mini-stats .mini{text-align:center;padding:14px 6px;border-radius:4px;
  background:rgba(159,232,255,.05);border:1px solid var(--v3-line-soft)}
.map-mini-stats .mini b{display:block;font-family:var(--font-display);font-size:24px;color:var(--v3-gold-hi)}
.map-mini-stats .mini span{font-size:9px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}

/* 演示提示条：弱化，不抢戏 */
.map-demo-note{border-radius:3px;padding:9px 14px;font-size:10.5px;letter-spacing:.08em;
  color:var(--muted);background:rgba(159,232,255,.06);border:1px solid var(--v3-line-soft)}

/* ---------------------------------------------------------------- 10. 彩蛋卡 / FAQ */
.egg-grid{gap:14px}
.egg-card{position:relative;padding:20px 16px 16px;border-radius:4px;
  background:var(--v3-glass);border:var(--v3-glass-brd);
  transition:transform .45s var(--v3-ease),border-color .45s,box-shadow .45s;min-height:120px}
.egg-card:hover{transform:translateY(-4px);border-color:rgba(233,200,122,.4)}
.egg-card.found{border-color:rgba(233,200,122,.5);
  box-shadow:0 16px 50px -22px rgba(233,200,122,.5)}
.egg-card .egg-ico{width:30px;height:30px;display:grid;place-items:center;margin-bottom:12px;
  border:1px solid var(--v3-line);border-radius:2px;color:var(--v3-gold)}
.egg-card.found .egg-ico{background:rgba(233,200,122,.14)}
.egg-card .egg-hint{font-size:11.5px;line-height:1.6;color:var(--muted)}
.egg-card.found .egg-hint{color:var(--v3-gold-hi)}
.egg-progress{height:3px;border-radius:2px;background:rgba(233,200,122,.1);overflow:hidden}
.egg-progress-bar{height:100%;width:0;
  background:linear-gradient(90deg,var(--v3-gold-dk),var(--v3-gold-hi));
  transition:width .6s var(--v3-ease)}

/* FAQ：更精致的折叠 */
.faq-list details{border:1px solid var(--v3-line-soft);border-radius:4px;padding:0 18px;margin-bottom:10px;
  background:rgba(159,232,255,.04);transition:border-color .3s,background .3s}
.faq-list details[open]{border-color:var(--v3-line);background:rgba(233,200,122,.06)}
.faq-list summary{padding:16px 26px 16px 0;font-family:var(--font-display);font-size:16px;
  color:var(--v3-gold-hi);cursor:pointer;list-style:none;position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:2px;top:14px;color:var(--v3-gold);
  font-size:18px;transition:transform .3s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{margin:0 0 16px;color:var(--muted);font-size:13.5px;line-height:1.8}

/* ---------------------------------------------------------------- 11. 页脚 */
.footer{border-top:1px solid var(--v3-line);position:relative}
.footer::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--v3-gold-hi),transparent)}

/* ---------------------------------------------------------------- 12. 移动端 */
@media(max-width:860px){
  .map-layout{grid-template-columns:1fr}
  .map-side{order:2}
  .map-globe-frame{order:1}
}
@media(max-width:640px){
  .section{padding-top:84px;padding-bottom:84px}
  .section-ghost{font-size:clamp(70px,22vw,120px);top:14px;right:12px}
  .relay-track{height:42px;gap:1.5px}
  .relay-foot{font-size:8px;letter-spacing:.12em}
  .map-mini-stats{gap:8px}
  .map-mini-stats .mini{padding:11px 4px}
  .map-mini-stats .mini b{font-size:20px}
  .faq-list summary{font-size:15px}
  .v3-card::before,.v3-card::after,.panel::before,.panel::after{width:11px;height:11px}
}

/* ---------------------------------------------------------------- 13. 减少动效：可访问性 */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  #nyAtmos .atmos-stars,#nyAtmos .atmos-aurora,.btn-gold::after,
  .relay-live::before,.relay-cell.now{animation:none}
  html{scroll-behavior:auto}
  *{transition-duration:.001ms!important;animation-duration:.001ms!important}
}

/* ---------------------------------------------------------------- 14. 细节精修：按钮体系（紧凑、统一、克制） */
/* 基础：收紧纵向留白，统一高度，避免厚重 */
.btn{padding:11px 22px;min-height:42px;border-radius:2px;
  font-size:12px;letter-spacing:.14em}
.btn-sm{padding:8px 14px;min-height:36px;font-size:10.5px}
.btn-lg{min-height:52px}

/* 弹窗动作区：桌面端居中、限宽，不再拉成宽条 */
.sm-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sm-actions .btn{flex:1 1 0;min-width:0;max-width:220px;
  min-height:42px;padding:11px 16px;white-space:nowrap}
/* 像素弹窗原纵向动作区统一为并排，弱化厚重 */
.sm-actions-vertical{flex-direction:row}
.sm-actions-vertical .btn{flex:1 1 0;width:auto;max-width:220px}
/* 三按钮的邀请弹窗：字号略收，允许优雅换行 */
#inviteLayer .sm-actions .btn{font-size:11px;letter-spacing:.08em}

/* 弹窗内主操作（生成类）保持整宽但高度统一，弱化厚重感 */
.px-modal .btn-block{min-height:44px}

/* 首屏主按钮：保留仪式感，略收高度 */
.hero-cta .btn-gold{min-height:52px}

@media(max-width:640px){
  /* 弹窗动作区：移动端改为并排，不再整宽堆叠 */
  .sm-actions{flex-wrap:nowrap}
  .sm-actions .btn{flex:1 1 0;max-width:none;min-height:42px;
    padding:10px 8px;font-size:11px;letter-spacing:.06em}
  /* 三按钮邀请弹窗在窄屏允许换行，避免挤压 */
  #inviteLayer .sm-actions{flex-wrap:wrap}
  #inviteLayer .sm-actions .btn{flex:1 1 auto}
  /* 目标下载/分享：并排紧凑，修复纵向 flex 导致的 140px 高按钮 */
  .goals-preview .btn-row{flex-direction:row}
  .goals-preview .btn-row .btn{flex:1 1 0;width:auto;min-height:42px}
  .hero-cta .btn-gold{min-height:50px}
}

/* ---------------------------------------------------------------- 15. 分享面板（无系统分享时的平台入口） */
.share-sheet-modal{width:min(100%,440px)}
.share-sheet-modal .sm-head{margin-bottom:18px}
.share-sheet-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.share-sheet-buttons .share-btn{width:100%;min-height:44px;justify-content:center;
  padding:9px 6px;flex-direction:column;gap:6px}
.share-sheet-buttons .share-btn svg{width:17px;height:17px}
.share-sheet-buttons .share-btn span{font-size:9px;letter-spacing:.06em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.share-sheet-copy{margin-top:16px;align-self:center}
@media(min-width:560px){
  .share-sheet-buttons{grid-template-columns:repeat(4,1fr)}
}

/* ---------------------------------------------------------------- 16. 祝福动作区：主次分明、左右对称 */
@media(max-width:640px){
  .blessing-actions{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    width:100%;max-width:420px;margin-inline:auto;
  }
  /* 主 CTA 独占一行，不再与「复制」平级 */
  .blessing-actions .btn-gold{grid-column:1 / -1}
  /* 复制 / 分享 并排等宽；文本链单独居中收尾 */
  .blessing-actions .btn-quiet{
    grid-column:1 / -1;justify-self:center;
    min-height:36px;padding-inline:10px;
  }
}

/* ---------------------------------------------------------------- 17 · 首屏呼吸
   大标题与副标题在窄屏贴得太近，给一句「守岁迎新」留出气口 */
@media (max-width: 640px) {
  .hero-sub { margin-top: 22px; }
}

/* ---------------------------------------------------------------- 18 · 亮部可读性
   倒计时单位与底部时刻表压在日出亮区上，浅灰小字几乎没有对比度。
   加一层极淡暗衬（不铺底板，只做文字阴影），保持透明质感又看得清 */
.hero .v2-countdown .cd-label {
  color: rgba(233, 225, 201, .84);
  text-shadow: 0 1px 8px rgba(1, 4, 14, .92), 0 0 2px rgba(1, 4, 14, .9);
}
.hero .v2-progress .wp-foot {
  color: rgba(214, 206, 182, .74);
  text-shadow: 0 1px 8px rgba(1, 4, 14, .94), 0 0 2px rgba(1, 4, 14, .9);
}
.hero .v2-progress .wp-foot span:nth-child(2) { color: rgba(246, 216, 140, .96); }

/* ---------------------------------------------------------------- 19 · 超窄屏导航
   320px（iPhone SE 一代 / 折叠屏半展开）下 nav-actions 右边界会到 350px，
   菜单按钮被切在屏幕外。收紧内边距与字号，把整排压回安全区 */
@media (max-width: 360px) {
  .site-header, header.site-header { padding-inline: 10px; }
  .nav-actions { gap: 6px; }
  .brand img { width: 92px; }
  #navLang, .nav-lang { font-size: 11px; }
  .nav-actions .icon-btn { width: 34px; height: 34px; }
}

/* ---------------------------------------------------------------- 20 · 城市卡预览完整可见
   grid + place-items:center 下 canvas 的 max-height:100% 不生效，
   矮屏（浏览器可视高 ~700）时画布底部 50–80px 被 overflow:hidden 裁掉，
   卡片底部的卡号与日期整行看不见。改 flex 让缩放真正跟随容器高度 */
.cc-canvas-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  min-height: 0;
}
.cc-canvas-frame canvas {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  display: block;
}

/* ---------------------------------------------------------------- 21 · 电影质感：每屏一束光
   除首屏外，各区块原本共用同一片夜空底，滚动时没有"场景切换"的感觉。
   给每个区块一束位置、色温都不同的光，让每一屏像镜头推到新地点。
   伪元素放在 z-index:-1，位于区块背景之上、内容之下，不遮任何交互 */
.section, .hero { isolation: isolate; }
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--sec-light, none);
}
#map       { --sec-light: radial-gradient(64% 46% at 16% 4%,  rgba(64,116,190,.30), transparent 72%); }
#wishes    { --sec-light: radial-gradient(58% 44% at 86% 4%,  rgba(233,200,122,.17), transparent 72%); }
#blessings { --sec-light: radial-gradient(62% 50% at 10% 88%, rgba(116,86,176,.24), transparent 74%); }
#goals     { --sec-light: radial-gradient(58% 46% at 80% 86%, rgba(233,200,122,.15), transparent 72%); }
#studio    { --sec-light: radial-gradient(72% 40% at 50% 0%,  rgba(159,232,255,.21), transparent 75%); }
#secrets   { --sec-light: radial-gradient(58% 44% at 20% 6%,  rgba(64,116,190,.23), transparent 72%); }

/* ---------------------------------------------------------------- 23 · 卡片受光与景深
   卡片缺的是光源方向：顶部一道冷白高光、底部一层沉降阴影，
   让每块面板像是被上方的一盏灯照着的玻璃板，而不是贴纸 */
.panel,
.checkin-panel, .fw-inline-panel, .rank-panel,
.map-shell, .wish-wall, .studio-card, .goal-card {
  box-shadow:
    inset 0 1px 0 rgba(255,246,220,.10),
    inset 0 -40px 80px -60px rgba(0,0,0,.9),
    0 1px 0 rgba(233,200,122,.10),
    0 18px 44px -28px rgba(0,0,0,.85);
  transition: box-shadow .45s ease, transform .45s ease, border-color .45s ease;
}
.panel:hover,
.map-shell:hover, .studio-card:hover, .goal-card:hover {
  border-color: rgba(233,200,122,.46);
  box-shadow:
    inset 0 1px 0 rgba(255,246,220,.16),
    inset 0 -40px 80px -60px rgba(0,0,0,.9),
    0 1px 0 rgba(233,200,122,.16),
    0 26px 60px -30px rgba(0,0,0,.9),
    0 0 0 1px rgba(233,200,122,.10);
}

/* 大标题的一层极淡金色光晕，让字"亮"而不糊 */
.section-title, .hero-title {
  text-shadow: 0 0 42px rgba(233,200,122,.16), 0 1px 0 rgba(255,246,220,.06);
}

/* ---------------------------------------------------------------- 24 · 首屏副标题按语言可读
   原来整句 uppercase + .22em 字距，中文被拉松、英德长句全大写像标语，
   各语言的句读与重音都被压平。改为保留原大小写，仅留一点字距 */
.hero .hero-sub {
  text-transform: none;
  letter-spacing: .08em;
  font-size: clamp(13.5px, 1.45vw, 16.5px);
  color: rgba(214,220,238,.78);
  line-height: 1.7;
  text-shadow: 0 2px 18px rgba(2,6,18,.75);
}
@media (max-width: 640px) {
  .hero .hero-sub { letter-spacing: .05em; font-size: 13px; line-height: 1.75; }
}

/* ---------------------------------------------------------------- 25 · 首屏底部两行的亮部可读性
   「全球跨年时刻图 / 0 个时区已进入 2027」压在日出高光上，
   9px 的暗金字几乎读不出；提亮并加一层极淡暗色托底阴影 */
.hero .v2-progress .wp-head {
  color: rgba(242,232,206,.92);
  text-shadow: 0 1px 2px rgba(4,10,26,.85), 0 0 14px rgba(4,10,26,.55);
}
.hero .v2-progress .wp-right { color: rgba(224,232,248,.80); }
.hero .v2-progress .wp-right strong { color: #fff4d8; }
.hero .v2-progress .wp-foot {
  color: rgba(216,206,182,.80);
  text-shadow: 0 1px 2px rgba(4,10,26,.9), 0 0 12px rgba(4,10,26,.6);
}

/* ---------------------------------------------------------------- 26 · 倒计时改成四块 HUD 仪表
   数字原来直接压在地球高光上，个位数与「天/时/分/秒」几乎读不出；
   给每一格一片极淡的暗色玻璃 + 一条顶部受光边，读数清楚，也像座舱仪表 */
.hero .v2-countdown { gap: clamp(8px, 1.4vw, 16px); }
.hero .v2-countdown .cd-unit {
  position: relative;
  padding: clamp(10px, 1.4vh, 16px) clamp(8px, 1.2vw, 18px) clamp(8px, 1vh, 12px);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,246,220,.055), rgba(255,246,220,0) 6px),
    rgba(5,10,24,.42);
  border: 1px solid rgba(233,200,122,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,246,220,.08),
    0 10px 30px -22px rgba(0,0,0,.9);
  backdrop-filter: blur(7px) saturate(1.05);
  -webkit-backdrop-filter: blur(7px) saturate(1.05);
}
.hero .v2-countdown .cd-label {
  color: rgba(238,232,212,.88);
  text-shadow: 0 1px 2px rgba(3,8,20,.9);
}
@media (max-width: 640px) {
  .hero .v2-countdown .cd-unit {
    padding: 9px 6px 7px;
    border-radius: 8px;
  }
  .hero .v2-countdown .cd-label { font-size: 9px; letter-spacing: .2em; }
}

/* 仪表化之后原字号（最高 88px）会撑出格子，把读数压在边框上：收紧上限并居中 */
.hero .v2-countdown .cd-unit { min-width: 0; flex: 1 1 0; }
.hero .v2-countdown .cd-num {
  font-size: clamp(46px, 5.2vw, 68px);
  letter-spacing: 0;
  display: block;
  text-align: center;
}

/* 仪表容器原来按内容宽度排布，四格宽窄不一；给定宽度后四格才真正均分 */
.hero .v2-countdown { width: min(100%, 660px); }
.hero .v2-countdown .cd-unit { align-items: center; text-align: center; }
.hero .v2-countdown .cd-label {
  display: block;
  text-align: center;
  padding-left: .3em;   /* 抵消末字多出的字距，视觉居中 */
}

/* ---------------------------------------------------------------- 27 · 两栏空态：不是「没数据」，是「还没到时间」
   原来是一行灰字悬在空面板下方，上方还顶着一个巨大的 0，像坏掉的看板。
   改成两块有结构的静物：排行是等第一座城市的一圈金环，天空是一片静夜的星点。 */
.rank-list .board-empty {
  list-style: none;
  display: flex; flex-direction: column; align-items: center;
  gap: 11px;
  padding: 16px 12px 14px;
  border: 0;
  counter-reset: none;
}
.rank-list .board-empty::marker { content: none; }

.be-ring {
  position: relative;
  width: 104px; height: 104px;
  border-radius: 50%;
  border: 1px solid rgba(233,200,122,.15);
  box-shadow:
    inset 0 0 32px rgba(233,200,122,.05),
    0 0 46px -20px rgba(233,200,122,.55);
}
.be-ring::after {
  content: '';
  position: absolute; inset: 13px;
  border-radius: 50%;
  border: 1px dashed rgba(233,200,122,.10);
}
.be-ring i {
  position: absolute; left: 50%; top: 50%; width: 1px; height: 1px;
  animation: beBreath 6.5s ease-in-out infinite;
}
.be-ring i::before,
.be-ring i::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  background: linear-gradient(90deg, transparent, rgba(159,232,255,.72), transparent);
}
.be-ring i::before { width: 38px; height: 1px; transform: translate(-50%, -50%); }
.be-ring i::after  { width: 1px; height: 38px; transform: translate(-50%, -50%);
  background: linear-gradient(180deg, transparent, rgba(159,232,255,.72), transparent); }
@keyframes beBreath { 0%,100% { opacity: .45 } 50% { opacity: 1 } }

.board-empty .be-main,
.sky-empty .se-main {
  font-size: 14.5px;
  letter-spacing: .04em;
  color: rgba(233,200,122,.92);
}
.board-empty .be-sub,
.sky-empty .se-sub {
  max-width: 42ch;   /* ch 是半角数字宽，中文一行约 2ch 一个字，给足才不折行 */
  text-align: center;
  font-size: 12px;
  line-height: 1.75;
  color: rgba(178,188,208,.60);
}

.sky-empty {
  list-style: none;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px;
  min-height: 200px;
  padding: 20px 10px;
  border: 0;
}
.sky-empty::marker { content: none; }
.se-stars {
  position: absolute; inset: 0; pointer-events: none;
}
.se-stars i {
  position: absolute;
  width: 2.5px; height: 2.5px; border-radius: 50%;
  background: rgba(218,230,250,.85);
  box-shadow: 0 0 9px rgba(159,232,255,.55);
  animation: seTwinkle 5.5s ease-in-out infinite;
}
.se-stars i:nth-child(1) { left: 12%; top: 18%; animation-delay: 0s; }
.se-stars i:nth-child(2) { left: 27%; top: 63%; animation-delay: -1.4s; }
.se-stars i:nth-child(3) { left: 39%; top: 26%; animation-delay: -2.6s; }
.se-stars i:nth-child(4) { left: 55%; top: 47%; animation-delay: -.7s; }
.se-stars i:nth-child(5) { left: 67%; top: 71%; animation-delay: -3.2s; }
.se-stars i:nth-child(6) { left: 76%; top: 24%; animation-delay: -1.9s; }
.se-stars i:nth-child(7) { left: 87%; top: 57%; animation-delay: -4.1s; }
.se-stars i:nth-child(8) { left: 93%; top: 21%; animation-delay: -2.2s; }
.se-stars i:nth-child(9) { left: 19%; top: 84%; animation-delay: -3.6s; }
.se-stars i:nth-child(10) { left: 8%; top: 46%; animation-delay: -1.1s; }
.se-stars i:nth-child(11) { left: 33%; top: 12%; animation-delay: -2.9s; }
.se-stars i:nth-child(12) { left: 62%; top: 16%; animation-delay: -.4s; }
.se-stars i:nth-child(13) { left: 82%; top: 82%; animation-delay: -3.4s; }
.se-stars i:nth-child(14) { left: 47%; top: 78%; animation-delay: -2.4s; }
.se-stars i:nth-child(15) { left: 6%; top: 72%; animation-delay: -.9s; }
.se-stars i:nth-child(16) { left: 59%; top: 88%; animation-delay: -3.8s; }
.se-stars i:nth-child(17) { left: 90%; top: 91%; animation-delay: -1.7s; }
.se-stars i:nth-child(18) { left: 71%; top: 43%; animation-delay: -2.1s; }
.se-stars i:nth-child(19) { left: 22%; top: 36%; animation-delay: -4.4s; }
.se-stars i:nth-child(20) { left: 43%; top: 60%; animation-delay: -.2s; }
@keyframes seTwinkle {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50% { opacity: .95; transform: scale(1.15); }
}

.fw-feed ul.is-empty { max-height: none; overflow: visible; }
/* 两栏都在空态时纵向铺满，空态居中，底部的尾巴贴在面板下沿 */
.rank-panel { display: flex; flex-direction: column; }
.rank-panel .rank-list.is-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }

/* 让天空面板按「实时天空 → 静夜 → 尚未升空」纵向铺满：
   空态吃掉剩余高度，底部的计数行才会贴在面板下沿，而不是浮在中间留一大块空 */
.sky-panel { display: flex; flex-direction: column; }
.sky-panel .fw-feed { flex: 1 1 auto; display: flex; min-height: 0; }
.sky-panel .fw-feed > * { width: 100%; }
.sky-panel .fw-feed > .sky-empty { flex: 1 1 auto; min-height: 0; }
.sky-panel .fw-total, .sky-panel .empty-note { margin-top: auto; }

/* 空态里把「Total 0」换成一句「尚未开榜」的小字 */
.rank-total.empty-note,
.fw-total.empty-note {
  padding: 10px 0 12px;
  font-size: 11.5px;
  letter-spacing: .16em;
  color: rgba(178,188,208,.52);
}
@media (max-width: 640px) {
  .be-ring { width: 88px; height: 88px; }
  .board-empty { padding: 22px 8px 18px; gap: 11px; }
  .sky-empty { min-height: 190px; }
}

/* ---------------------------------------------------------------- 28 · 创作台卡片：把线框图标装进金环
   原来四张卡是「72px 线框图标 + 一行小字 + 标题 + 正文」，图标是产品文档里那种通用线性符号，
   摆在金蓝的夜里像四块 SaaS 截图。做法是给它装裱：细金环 + 径向微光 + 受光顶边 +
   右下角一枚淡到几乎看不见的大号序号，仍是那四个图形，但成了四枚徽记。 */
.studio-card {
  overflow: hidden;
  background: linear-gradient(180deg, rgba(19,31,60,.92), rgba(6,11,24,.97));
  border-color: rgba(233,200,122,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,246,220,.05),
    0 26px 54px -44px #000;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .5s ease, box-shadow .5s ease;
}
.studio-card:hover {
  border-color: rgba(233,200,122,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,246,220,.08),
    0 32px 64px -44px #000,
    0 0 46px -24px rgba(233,200,122,.55);
}
.studio-card::after {
  content: attr(data-idx);
  position: absolute; right: 8px; bottom: -14px;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 68px; line-height: 1;
  letter-spacing: -.03em;
  color: rgba(233,200,122,.055);
  pointer-events: none;
}

.sc-art {
  position: relative;   /* 没有它，金环会按卡片定位，撑成整张卡的一个大圈 */
  width: 66px; height: 66px;
  margin-bottom: 15px;
  display: grid; place-items: center;
  color: rgba(233,200,122,.92);
}
.sc-art::before {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid rgba(233,200,122,.20);
  background: radial-gradient(circle at 50% 44%, rgba(233,200,122,.11), transparent 64%);
  pointer-events: none;
}
.sc-art::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(233,200,122,.11) 0deg 1.2deg, transparent 1.2deg 13deg);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 58%);
  mask: radial-gradient(circle, transparent 52%, #000 58%);
  pointer-events: none;
}
.sc-art svg {
  position: relative;
  width: 44px; height: 44px;
  stroke-width: 1.4;
  filter: drop-shadow(0 0 9px rgba(233,200,122,.24));
}
/* 四张卡统一成金色：四种彩色更像四个产品，金蓝的夜里只需要一种金属 */
.studio-card:nth-child(2) .sc-art,
.studio-card:nth-child(3) .sc-art,
.studio-card:nth-child(4) .sc-art { color: rgba(233,200,122,.92); }
.studio-card:nth-child(4) .sc-art svg .sc-pixels rect:nth-child(3n) { fill: rgba(159,232,255,.78); }
.studio-card:nth-child(4) .sc-art svg .sc-pixels rect:nth-child(4n) { fill: rgba(232,131,107,.66); }

/* ---------------------------------------------------------------- 30 · 接力光轨：33 站的城市天际线
   原来是一排 1px 的点、全部同高同色，既不像时间轴，也读不出「33 个时区」。
   现在每一站一根柱，柱高按那个时区的城市密度起伏（UTC+8 最高、UTC+14 只有几座岛），
   形态本身就是一条世界城市的天际线；正在等待的那一站青色呼吸，
   已经进入 2027 的升到顶并带星芒 —— 午夜就这样一站一站往西走。 */
.relay .relay-track {
  height: 112px;
  gap: 0;
  padding: 0;
  align-items: flex-end;
  border-bottom: 1px solid rgba(233,200,122,.18);
  background-image: repeating-linear-gradient(90deg,
    rgba(233,200,122,.085) 0 1px, transparent 1px calc(100% / 33));
}
/* 基线上那条「已经走过的时间」：从 0 长到已点亮的比例 */
.relay .relay-track::after {
  content: '';
  position: absolute; left: 0; bottom: -1px;
  height: 1px; width: var(--lit, 0%);
  background: linear-gradient(90deg, rgba(233,200,122,.25), rgba(246,228,184,.95));
  box-shadow: 0 0 10px rgba(233,200,122,.45);
  transition: width 1.1s cubic-bezier(.2,.8,.2,1);
}
.relay .relay-track .relay-cell {
  --hn: 34%;
  flex: 1 1 0;
  height: 100%;
  background: none;
  border: 0;
  border-radius: 0;
}
.relay .relay-cell::before {
  content: '';
  position: absolute;
  left: 50%; top: auto; bottom: 0;   /* top:auto 必须写：§22 留下的 top:10px 会把柱子吊在半空 */
  width: 1px;
  height: var(--hn);
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(159,232,255,.62), rgba(159,232,255,.05));
  /* 越靠近「现在」的那一站越亮，往西渐暗 —— 波前从东往西走的感觉 */
  opacity: calc(.86 - var(--d, 0) * .019);
  transition: height .9s cubic-bezier(.2,.8,.2,1), background .7s ease, opacity .7s ease, box-shadow .7s ease;
  transition-delay: calc(var(--i, 0) * 24ms);
}
.relay .relay-cell::after {
  content: '';
  position: absolute;
  left: 50%; top: auto; bottom: calc(var(--hn) - 2px);
  width: 3px; height: 3px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(168,236,255,.82);
  box-shadow: 0 0 8px rgba(159,232,255,.45);
  opacity: calc(.94 - var(--d, 0) * .019);
  transition: bottom .9s cubic-bezier(.2,.8,.2,1), box-shadow .7s ease, background .7s ease, width .5s, height .5s;
  transition-delay: calc(var(--i, 0) * 24ms);
}
/* 已经进入 2027 的时区：柱升到顶，金，带星芒 */
.relay .relay-cell.lit::before {
  height: 88%;
  width: 2px;
  opacity: 1;
  background: linear-gradient(180deg,
    rgba(246,228,184,.98), rgba(233,200,122,.92) 58%, rgba(233,200,122,.06));
  box-shadow: 0 0 14px rgba(233,200,122,.32);
  opacity: 1;
}
.relay .relay-cell.lit::after {
  top: auto;
  bottom: calc(88% - 2px);
  width: 5px; height: 5px;
  background: #fdf1d2;
  box-shadow: 0 0 12px rgba(255,228,168,.90), 0 0 26px rgba(233,200,122,.45);
}
/* 正在等待的那一站：青色呼吸，是整条轨道的「现在」 */
.relay .relay-cell.now::before {
  height: 66%;
  width: 2px;
  opacity: 1;
  background: linear-gradient(180deg, #e8fbff, rgba(159,232,255,.28) 70%, rgba(159,232,255,.06));
  box-shadow: 0 0 10px rgba(159,232,255,.35);
}
.relay .relay-cell.now::after {
  top: auto;
  bottom: calc(62% - 3px);
  width: 7px; height: 7px;
  background: #dff6ff;
  box-shadow: 0 0 16px rgba(159,232,255,.95), 0 0 34px rgba(159,232,255,.45);
  animation: relayNowBreath 2.8s ease-in-out infinite;
}
@keyframes relayNowBreath {
  0%, 100% { opacity: .60; }
  50% { opacity: 1; }
}
@media (max-width: 640px) {
  .relay .relay-track { height: 88px; }
  .relay .relay-cell::before { transition-delay: calc(var(--i, 0) * 18ms); }
  .relay .relay-cell::after { transition-delay: calc(var(--i, 0) * 18ms); }
}

/* 覆盖 main.css 里 `.relay-cell.now` 的整块发光（41px 宽的方形光晕）——
   现在「正在等待」只由那一根柱表达，格子本身不该有光 */
.relay .relay-track .relay-cell.now,
.relay .relay-track .relay-cell.lit {
  box-shadow: none;
  background: none;
  border: 0;
}
/* 口径说明回到注脚，别压过整条天际线 */
.relay .relay-count {
  font-family: var(--font-body, Jost, sans-serif);
  font-size: 12.5px;
  letter-spacing: .10em;
  color: rgba(214,224,246,.70);
}
/* 窄屏：两端的时区标签与中间那句会挤成一行互相压住 —— 让它独占一行居中 */
@media (max-width: 640px) {
  .relay .relay-foot { flex-wrap: wrap; gap: 4px 10px; }
  .relay .relay-count { flex: 1 0 100%; order: 3; text-align: center; }
}

/* ---------------------------------------------------------------- 31 · 首屏地平线：让按钮落在天幕上，而不是压在地球贴图上
   倒计时四块仪表下面的按钮、两个文字链和 33 站小轨道，原先直接叠在地球的亮面上，
   「探索世界地图」几乎看不见，也不像有纵深。这里加两样东西：
   ① 一层自下而上的深空压暗，把地球下半部收进夜色，文字因此浮起来；
   ② 一条贴着地球边缘的冷光弧，把「仪表」与「星球」分成前后两景。 */
#hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 30%;
  background: linear-gradient(180deg,
    rgba(5,9,20,0) 0%, rgba(5,9,20,.24) 40%, rgba(5,9,20,.50) 74%, rgba(6,10,24,.72) 100%);
  pointer-events: none;
  z-index: 2;
}
.hero-inner { z-index: 3; }
/* 文字链原来 10px、压在地球的亮面上，几乎看不见 */
.hero .v2-textlink {
  font-size: 11.5px;
  color: rgba(226,234,250,.86);
  text-shadow: 0 1px 12px rgba(3,6,16,.95), 0 0 26px rgba(3,6,16,.75);
}
/* 33 站小轨道：做成一条贴在球面上的观测条，而不是两行字直接印在地表 */
.hero .v2-progress {
  padding: 12px 18px 10px;
  margin-top: 22px;
  border: 1px solid rgba(233,200,122,.16);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(7,12,26,.62), rgba(7,12,26,.28));
  backdrop-filter: blur(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px rgba(2,4,12,.45);
}
.hero .v2-textlink:hover { color: var(--v3-gold-hi); }
/* 大气弧光：地球边缘那一道冷白，让球体有「被光从背后照到」的体积感 */
#hero .earth-arc .ea-rim {
  box-shadow: 0 0 40px rgba(159,232,255,.20), 0 0 120px rgba(159,232,255,.10);
}

/* ---------------------------------------------------------------- 32 · 你的城市：从表单抬头改成一张坐标卡
   原来这一栏是「kicker + 城市名 + UTC 标签」，下面直接堆搜索框和两个按钮，
   读起来像后台表单，和上面的城市天际线不是一个质地。
   现在把城市确认收成一张卡：左侧一道金线当装订边，右上角是它在 33 站里的站号，
   底下一行三个读数——时区 / 当地午夜 / 日期，像一张通行证。 */
.checkin-panel .console-head {
  position: relative;
  overflow: hidden;
  padding: 16px 20px 15px;
  margin: 0 0 18px;
  border: 1px solid rgba(233,200,122,.20);
  border-radius: 14px;
  background:
    radial-gradient(130% 92% at 14% 0%, rgba(233,200,122,.10), transparent 62%),
    linear-gradient(180deg, rgba(11,20,42,.92), rgba(7,13,30,.92));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px rgba(2,4,12,.45);
}
.checkin-panel .console-head::before {
  content: '';
  position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px;
  background: linear-gradient(180deg, rgba(233,200,122,0), rgba(233,200,122,.85), rgba(233,200,122,0));
}
.checkin-panel .console-head::after {
  content: '';
  position: absolute; right: -40px; top: -40px;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(159,232,255,.10), transparent 68%);
  pointer-events: none;
}
.cp-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.cp-top .panel-kicker { margin: 0; }
.cp-slot {
  font-family: var(--font-mono, monospace);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: rgba(159,232,255,.52);
  white-space: nowrap;
}
.cp-slot b {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .04em;
  color: var(--v3-gold-hi);
}
/* 城市名：卡面的主角，字号提到 34 上下 */
.checkin-panel .city-display {
  display: block;
  border: 0;
  padding: 0;
  margin: 0 0 13px;
}
.checkin-panel .city-display strong {
  display: block;
  font-size: clamp(27px, 3.2vw, 36px);
  line-height: 1.06;
  letter-spacing: .015em;
  color: #fff8e6;
  text-shadow: 0 0 34px rgba(233,200,122,.22);
}
/* 底部三个读数，等分一条金线 */
.cp-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(233,200,122,.15);
}
.cp-meta b {
  font-family: var(--font-mono, monospace);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--v3-gold);
  white-space: nowrap;
}
.cp-meta .cp-mid {
  color: rgba(226,234,250,.92);
  font-size: 13px;
}
.cp-meta em {
  font-style: normal;
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: rgba(214,224,246,.55);
  white-space: nowrap;
}
.cp-meta .cp-rule {
  flex: 0 0 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent, rgba(233,200,122,.28), transparent);
}

/* 三个统计：原先各占一格、数字 24px，演示态下就是三个巨大的 0；
   收成一行小字，让位给坐标卡和按钮 */
.checkin-panel .mini-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  justify-content: flex-start;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(233,200,122,.10);
  text-align: left;
}
.checkin-panel .mini-stat-row > div {
  display: inline-flex;
  align-items: baseline;
  flex-direction: row;
  gap: 5px;
  color: rgba(214,224,246,.42);
  font-size: 10.5px;
  letter-spacing: .06em;
}
.checkin-panel .mini-stat-row strong {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 500;
  color: rgba(233,200,122,.62);
}
.checkin-panel .mini-stat-row span {
  font-size: 10.5px;
  letter-spacing: .04em;
  text-transform: none;
  color: rgba(214,224,246,.42);
}

/* 烟花样式：九宫格在窄面板里挤成三行小方块，
   改成一条可横向拨动的样式带（scroll-snap），右侧渐隐提示「还有」 */
.fw-inline-panel .fw-swatches {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
}
.fw-inline-panel .fw-swatches::-webkit-scrollbar { display: none; }
.fw-inline-panel .fw-swatch {
  flex: 0 0 auto;
  width: 104px;
  scroll-snap-align: start;
}

/* 统计小字太淡、右栏底部空一大块：让读数看得见，让发射按钮贴住面板下沿 */
.checkin-panel .mini-stat-row > div { color: rgba(214,224,246,.62); }
.checkin-panel .mini-stat-row strong { color: rgba(233,200,122,.86); font-size: 12.5px; }
.checkin-panel .mini-stat-row span { color: rgba(214,224,246,.62); }
.fw-inline-panel { display: flex; flex-direction: column; }
.fw-inline-panel .console-fw-note { margin-top: auto; padding-top: 14px; }

/* flex 子项默认 min-width:auto，一条 9 个 104px 的横向滚动带会把整个 grid 列撑到 936px
   （面板被撑宽后，移动端的 640 断点看着正常、实际整页横向溢出）。必须放行收缩。 */
.map-console, .map-console > .panel,
.fw-inline-panel, .fw-inline-panel .fw-swatches { min-width: 0; }

/* 右栏内容比左栏短，按钮原来悬在半空、note 贴底，中间空出一大块；
   改成「样式带在上、发射按钮贴底、说明在按钮下」，两栏下沿才对得上 */
.fw-inline-panel .btn-launch { margin-top: auto; }
.fw-inline-panel .console-fw-note { margin-top: 10px; padding-top: 0; }

/* ---------------------------------------------------------------- *
 * 33 · 南极洲
 * 地球一直缺最下面那块：LAND 里根本没有 Antarctica，投影也只覆盖
 * 到南纬 58°。补上之后它的纬度落在画布 600 以下，靠扩 viewBox
 * 到 780 才装得下 —— 所以这里单独给它一层冰色，别跟陆地一个色。
 * ---------------------------------------------------------------- */
#worldMapSvg path[data-name="Antarctica"]{
  fill:rgba(208,233,253,.5);
  stroke:rgba(224,243,255,.76);
  stroke-width:.9;
  filter:drop-shadow(0 -.5px 5px rgba(170,210,250,.22));
}

/* ---------------------------------------------------------------- *
 * 34 · 结账渠道说明（弹窗内、按钮下）
 *  付款在 Payhip 完成，这句话要能一眼看见但别抢按钮的注意力。
 * ---------------------------------------------------------------- */
#premiumModal .checkout-note{
  margin:9px 0 2px;
  font-family:var(--sans, system-ui, sans-serif);
  font-size:12px;line-height:1.5;letter-spacing:.01em;
  color:rgba(238,232,218,.52);text-align:center;
}