/* ==========================================================================================
   coming-soon.css — 「未开放的第三期」占位页（2026-10-25 服主需求，public/js/ui/comingSoon.js）。

   只在 <html class="is-coming-soon"> 时出现（enterComingSoon / exitComingSoon 加删这个 class）：
     * .coming-soon          整屏容器（fixed，z-index 81 = 高过 --z-modal，低于 toast / tooltip）
     * .coming-soon__veil    半透明遮罩 + 全屏点击屏障：大厅照常画在下面（**不黑屏**），鼠标 / 触摸都被它吞掉，
                             只有卡片上的「切换版本」和它打开的版本选择器能点
     * .coming-soon__card    中间的提示卡片：就是项目里普通 Modal 的样子 —— 近黑绿灰面板 + 琥珀色警示，
                             标题 / 期号 / 「暂未开放」/ 一句说明 / 开启时间 / 切换版本。
   刻意保持「素」：不画图标、不做整幅海报、不给文字加发光（2026-10-25 服主：不要硬模仿预告图，也不要发光字）。
   版本选择器（ui/versionPicker.js 的 Modal）也挂在这一层里，所以它在遮罩之上、仍然可点。
   ========================================================================================== */

.coming-soon {
  position: fixed;
  inset: 0;
  z-index: 81;
  display: grid;
  place-items: center;
  padding: max(.18rem, env(safe-area-inset-top)) max(.18rem, env(safe-area-inset-right))
    max(.18rem, env(safe-area-inset-bottom)) max(.18rem, env(safe-area-inset-left));
  isolation: isolate;
}

/* 全屏点击屏障：暗红色半透明（2026-10-25 服主：背景那种红色主题留着），大厅仍看得见，吞掉下面所有点击 */
.coming-soon__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 92% at 50% 38%, rgba(112, 20, 11, .5) 0%, rgba(30, 8, 6, .76) 58%, rgba(6, 3, 2, .86) 100%);
  cursor: not-allowed;
  touch-action: none;
  animation: coming-soon-in var(--t-slow) var(--ease-out) backwards;
}

/* 提示卡片：和 Modal 同一套配色与边框，不加内发光 */
.coming-soon__card {
  position: relative;
  width: min(6.6rem, 92vw);
  max-height: 88svh;
  overflow: auto;
  padding: .34rem .4rem .32rem;
  text-align: center;
  border: 1px solid rgba(255, 138, 84, .34);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .016) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #241b17 0%, #151110 100%);
  box-shadow: 0 .24rem .7rem rgba(0, 0, 0, .55);
  animation: coming-soon-card-in var(--t-slow) var(--ease-out) backwards;
}
/* 上下各一条琥珀色细纹，和 Modal 的 .modal__stripe 同一手法 */
.coming-soon__card::before,
.coming-soon__card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: .03rem;
  background: repeating-linear-gradient(-45deg, var(--amber) 0 .06rem, transparent .06rem .13rem);
  opacity: .5;
}
.coming-soon__card::before { top: 0; }
.coming-soon__card::after { bottom: 0; }

/* 顶部小标：两侧各一条渐隐细线，把视线收到中间（官方图的字距节奏，但不是照抄美术） */
.coming-soon__kicker {
  display: inline-flex;
  align-items: center;
  gap: .12rem;
  padding-left: .38em; /* 抵消 letter-spacing 在最后一个字后面留下的空隙，视觉才居中 */
  font-family: var(--font-display);
  font-size: calc(.11 * var(--t));
  letter-spacing: .38em;
  color: var(--mint-700);
  text-transform: uppercase;
}
.coming-soon__kicker::before,
.coming-soon__kicker::after {
  content: '';
  width: .46rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246, 163, 41, .55));
}
.coming-soon__kicker::after { transform: scaleX(-1); }

.coming-soon__title {
  margin: .1rem 0 0;
  font-size: calc(.34 * var(--t));
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.15;
  color: var(--text-hi);
  overflow-wrap: anywhere;
}
/* 标题下的一行拉丁文（纯装饰，随 i18n-ignore 不翻译）：代替图标的位置 */
.coming-soon__latin {
  margin: .05rem 0 .02rem;
  padding-left: .52em; /* 同上：抵消 letter-spacing 的尾部空隙 */
  font-family: var(--font-display);
  font-size: calc(.105 * var(--t));
  letter-spacing: .52em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.coming-soon__period {
  margin: .1rem 0 0;
  font-size: calc(.15 * var(--t));
  letter-spacing: .08em;
  color: var(--mint-500);
}

/* 「暂未开放」：只有字，不加底板、不加两侧竖纹（2026-10-25 服主：不要背景、也不要左右的杠）；也不加发光 */
.coming-soon__stamp {
  margin: .2rem 0 .06rem;
  padding-left: .22em; /* 抵消 letter-spacing 的尾部空隙，视觉居中 */
  font-size: calc(.4 * var(--t));
  font-weight: 800;
  letter-spacing: .22em;
  line-height: 1.15;
  color: var(--amber);
  text-align: center;
  overflow-wrap: anywhere;
}
.coming-soon__note {
  max-width: 5rem;
  margin: 0 auto;
  font-size: calc(.15 * var(--t));
  line-height: 1.7;
  color: var(--text-md);
  overflow-wrap: anywhere;
}

/* 数据行：左边小标、右边时间，中间一条细线，像资料页的规格行 */
.coming-soon__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .16rem;
  width: min(4.4rem, 90%);
  margin: .18rem auto .22rem;
  padding-top: .1rem;
  border-top: 1px solid var(--line);
}
.coming-soon__meta-k {
  font-size: calc(.13 * var(--t));
  letter-spacing: .08em;
  color: var(--text-lo);
}
.coming-soon__meta-v {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: .06rem;
  color: var(--text-hi);
}
.coming-soon__meta-v b {
  font-family: var(--font-num);
  font-size: calc(.2 * var(--t));
  font-weight: 700;
  letter-spacing: .04em;
}
.coming-soon__meta-v small {
  font-size: calc(.12 * var(--t));
  color: var(--text-lo);
}
.coming-soon .btn { min-width: 2.1rem; }

/* 版本弹层里那条占位版本（versionPicker.js，仅大厅；第一条）：琥珀色，和正式版本、红色彩蛋都区分开 */
.verpick__row--soon {
  border-color: rgba(246, 163, 41, .55);
  background: linear-gradient(90deg, rgba(58, 40, 12, .55) 0%, rgba(0, 0, 0, .25) 60%);
}
.verpick__pick--soon { color: #ffe6bf; }
.verpick__pick--soon:hover:not(:disabled),
.verpick__pick--soon:focus-visible { background: rgba(246, 163, 41, .12); }
.verpick__badge.is-soon { color: #ffca7a; border-color: rgba(246, 163, 41, .6); }

@keyframes coming-soon-in { from { opacity: 0; } }
@keyframes coming-soon-card-in {
  from { opacity: 0; transform: translateY(.14rem) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* 减少动态效果：只留静态提示 */
@media (prefers-reduced-motion: reduce) {
  .coming-soon__veil,
  .coming-soon__card { animation: none; }
}

/* 窄屏 / 手机：卡片占满可用宽度，字号仍跟随 root scale */
@media (max-width: 600px) {
  .coming-soon__card { width: min(7.6rem, 94vw); }
  .coming-soon__stamp { font-size: calc(.32 * var(--t)); }
  .coming-soon__meta { width: min(4.8rem, 94%); }
}