/* ============================================================
 * 全局
 * ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #000;
  color: #e8e2d2;
  overflow: hidden;
  user-select: none;
  cursor: url('../assets/mouse.png') 8 8, auto;
}

#screenMenu,
#screenGame {
  position: fixed;
  inset: 0;
  z-index: 1;
}

/* ============================================================
 * 开局黑罩
 * ============================================================ */
#gameBootCover {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 2147483647;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 0s linear 300ms;
}
#gameBootCover.on {
  opacity: 1;
  visibility: visible;
  /* 淡入 260ms：进新对局时黑幕不是「啪」地砸下来，而是快速压暗；
     配合 game-anim 的 1.5s 最短时长与 300ms 淡出，形成完整的淡入淡出。 */
  transition: opacity 260ms ease-in;
}

/* ============================================================
 * 加载层
 * ============================================================ */
#loadingScreen {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100000;
  overflow: hidden;
  transition: opacity 0.6s ease-out;
}
#loadingScreen.hide {
  opacity: 0;
  pointer-events: none;
}

#loadingScreen .loading-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  z-index: 0;
}

#loadingScreen .loading-spinner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  transform-origin: 6.80% 91.14%;
  animation: loadingSpin 1.4s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes loadingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

#loadingScreen .loading-text {
  position: absolute;
  left: 13.26%;
  top: 89%;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
  font-family: "STKaiti", "KaiTi", "Songti SC", "STSong", serif;
  font-size: 42px;
  letter-spacing: 3px;
  line-height: 1.4;
  color: #b8b0a4;
  text-shadow: 0 0 6px rgba(0,0,0,0.95), 0 0 3px rgba(0,0,0,1), 0 0 1px #000;
  white-space: nowrap;
}
#loadingScreen .loading-text span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  color: #b8b0a4;
  animation: textSwap 6s ease-in-out infinite;
  /* 关键修复：错峰 delay 写死在 CSS（此前只靠 JS 设 inline delay，
     首次绘制早于 JS 时三条文字同时启动 → 叠在一起） */
  animation-fill-mode: both;
}
#loadingScreen .loading-text .text-b { animation-delay: 2s; }
#loadingScreen .loading-text .text-c { animation-delay: 4s; }
@keyframes textSwap {
  0%   { opacity: 0; transform: translateY(8px); }
  4%   { opacity: 1; transform: translateY(0); }
  30%  { opacity: 1; transform: translateY(0); }
  33%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(8px); }
}

/* ============================================================
 * 开始画面
 * ============================================================ */
#screenMenu {
  background: #000;
  overflow: hidden;
}
#screenMenu .bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
#screenMenu .corner-mask {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30%;
  height: 27%;
  background: #000;
  z-index: 1;
  pointer-events: none;
}
#screenMenu .corner-video {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30%;
  height: 27%;
  object-fit: cover;
  object-position: center;
  z-index: 2;
  pointer-events: none;
}
#screenMenu .btn-mask {
  position: absolute;
  left: 38%;
  top: 69%;
  width: 24%;
  height: 29%;
  background: #000;
  z-index: 3;
  pointer-events: none;
}
#screenMenu .menu-overlay {
  position: absolute;
  left: 39.46%;
  top: 70%;
  width: 24%;
  height: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  z-index: 4;
}
/* 版权声明（非营利粉丝同人作品）：主页最下方白色小字。
   容器不挡鼠标（pointer-events:none），仅链接自身可点。 */
#screenMenu .menu-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  padding: 10px 16px 6px;
  background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, 0) 100%);
  text-align: center;
  pointer-events: none;
}
#screenMenu .menu-footer p {
  margin: 0 auto;
  max-width: 92%;
  color: #ffffff;
  font-family: "Source Han Serif SC", "Songti SC", "STSong", serif;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .3px;
  opacity: .85;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95);
}
#screenMenu .menu-footer a {
  /* 需求：官方网站字样标红、加粗、放大 */
  color: #ff2d2d;
  font-weight: 700;
  font-size: 15px;
  text-decoration: underline;
  pointer-events: auto;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 8px rgba(255, 45, 45, .55);
}
#screenMenu .menu-footer a:hover { color: #ff6b6b; }
#screenMenu .menu-btn {
  position: relative;
  isolation: isolate;
  background: none;
  border: none;
  color: #8a8a8a;
  font-family: "Source Han Serif SC", "Songti SC", "STSong", serif;
  font-size: 22px;
  letter-spacing: 10px;
  line-height: 1.4;
  padding: 10px 0;
  margin: 0;
  width: 100%;
  cursor: url('../assets/mouse.png') 8 8, auto;
  transform-origin: center;
  transition: color .15s;
}
#screenMenu .menu-btn.active { color: #fff5e8; }
#screenMenu .menu-btn:focus,
#screenMenu .menu-btn:focus-visible { outline: none; }
#screenMenu .menu-btn.pop { animation: menuBtnPop .18s ease-out; }
@keyframes menuBtnPop {
  0%   { transform: scale(1.15); }
  60%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
#screenMenu .menu-btn::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 210px;         /* 恢复上一版宽度（比文字多出一截） */
  transform: translateX(-50%);
  background:
    linear-gradient(#9a1010, #9a1010) top 6px left 0 / 100% 8px no-repeat,
    linear-gradient(#9a1010, #9a1010) bottom 6px left 0 / 100% 8px no-repeat,
    #c01818;
  /* 统一红绸带：贴合文字长度，尖角大小固定（第 10/23 条） */
  clip-path: polygon(0% 0%, 100% 0%, calc(100% - 12px) 50%, 100% 100%, 0% 100%, 12px 50%);
  z-index: -1;
  opacity: 0;
  transition: opacity .12s;
  pointer-events: none;
}
#screenMenu .menu-btn.active::before {
  opacity: 1;
  background:
    linear-gradient(#a81010, #a81010) top 6px left 0 / 100% 8px no-repeat,
    linear-gradient(#a81010, #a81010) bottom 6px left 0 / 100% 8px no-repeat,
    #d02020;
}

/* ============================================================
 * 游戏画面
 * ============================================================ */
#screenGame {
  background: #000;
  color: #e8e2d2;
  font-family: "Songti SC", "STSong", serif;
  display: none;
  overflow: hidden;
}

#screenGame .game-black {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 0;
}

#screenGame .player-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  visibility: hidden;
}
#screenGame .player-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 3;          /* 默认即为"当前主"层：避免 opacity=1 却 z-index:auto 的形态 */
}

#screenGame .game-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 2;
  pointer-events: none;
}

#screenGame .desk-img {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: fill;
  pointer-events: none;
  z-index: 3;
}
#screenGame .desk-img-1-1 { opacity: 1; }
#screenGame .desk-img-1-2 { opacity: 0; }
#screenGame .desk-img-2-1 { opacity: 1; }
#screenGame .desk-img-2-2 { opacity: 0; }

#screenGame .board-wrap {
  position: absolute;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}

#screenGame .board {
  position: absolute;
  display: flex;
  gap: 0;
  pointer-events: none;
}
#screenGame .board.opp {
  left: 36.4%;
  top: 6.3%;
  width: 28.4%;
  height: 32.3%;
}
#screenGame .board.mine {
  left: 36.4%;
  top: 62.5%;
  width: 28.4%;
  height: 32.3%;
}
#screenGame .board .col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  cursor: pointer;
  pointer-events: auto;
}
#screenGame .board .col.dead { cursor: default; opacity: 0.55; }
#screenGame .board .cell {
  flex: 1;
  position: relative;
  pointer-events: auto;
}

#screenGame .hud {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
#screenGame .status {
  font-size: 14px;
  letter-spacing: 4px;
  color: #8a7f6b;
  min-height: 20px;
  text-align: center;
}
#screenGame .status.win  { color: #7ee2a8; }
#screenGame .status.lose { color: #ff8a8a; }

/* ============================================================
 * 转场黑幕
 * ============================================================ */
#fadeLayer {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease-out;
}
#fadeLayer.on { opacity: 1; }

#screenGame #yellowMarkers img { display: none; }
#screenGame #yellowMarkers > div { display: none; }
#screenGame #scoreMarkers > div { display: none; }
#screenGame #playerLeft > div:nth-child(2),
#screenGame #playerRight > div:nth-child(2) { display: none; }
#screenGame .board .cell .die-img { display: none; }
#screenGame .board .col-score { display: none; }

#animPieces img.die-swap {
  animation: dieSwap 2s linear;
}
@keyframes dieSwap {
  0%   { opacity: 0.5; }
  100% { opacity: 1; }
}

#animDebugMarkers { display: none !important; }
#animMarkers      { display: none !important; }

/* ============================================================
 * 难度图标
 * ============================================================ */
#screenGame .corner-slot {
  position: fixed;
  left: 92.47%;
  top: 54.5%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  object-fit: contain;
  z-index: 999999;
  cursor: pointer;
  filter: brightness(0.55);
  transition: filter 2s ease;
  animation: iconPulse 3s ease-in-out infinite;
  transform-origin: center center;
}
#screenGame .corner-slot.enemy-turn {
  filter: brightness(1);
  transition: filter 2s ease;
}
@keyframes iconPulse {
  0%   { transform: translate(-50%, -50%) scale(1); }
  25%  { transform: translate(-50%, -50%) scale(1.25); }
  50%  { transform: translate(-50%, -50%) scale(1); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

#screenGame .diff {
  position: fixed;
  left: 92.47%;
  top: 54.5%;
  transform: translate(-100%, -50%);
  display: none;
  align-items: center;
  z-index: 1000000;
}
#screenGame .diff.show {
  display: flex;
}
#screenGame .diff select {
  font-family: inherit;
  font-size: 12px;
  padding: 6px 10px;
  background: #1a1a1a;
  color: #8a7f6b;
  border: 1px solid #3a3028;
  cursor: pointer;
}

/* ============================================================
 * 微动效
 * ============================================================ */
#screenGame .pat-sway {
  animation: patSway 2.2s steps(1) infinite;
}
#screenGame .pat-sway.pat-flip {
  animation-name: patSwayFlip;
}
@keyframes patSway {
  0%, 49.99% { transform: translate(-1px, 1px); }
  50%, 100%  { transform: translate(1px, -1px); }
}
@keyframes patSwayFlip {
  0%, 49.99% { transform: scaleX(-1) translate(1px, 1px); }
  50%, 100%  { transform: scaleX(-1) translate(-1px, -1px); }
}

#screenGame .player-name {
  display: inline-block;
  animation: nameBob 1.6s ease-in-out infinite;
  animation-play-state: paused;
  transition: color .4s;
}
/* 需求（克朗科与巴普）：超过 4 字的名字按「上 4 下 N」折行
   （克朗科与巴普 → 上4下2），名字元素定宽 4 字、行内居中，
   两侧装饰花纹被自然往外推。仅 characters.js 在名字 >4 字时挂 wrap4。 */
#screenGame .player-name.wrap4 {
  flex: none;
  width: 4.05em;
  text-align: center;
}
#screenGame .player-name .wave-ch {
  display: inline-block;
  animation: nameWave 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.15s);
  animation-play-state: paused;
}
#screenGame .player-box.turn-active .player-name,
#screenGame .player-box.turn-active .player-name .wave-ch {
  animation-play-state: running;
}
#screenGame .player-box.turn-active .player-name {
  color: #ffffff;
}
@keyframes nameBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes nameWave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
/* 需求（npC3 克朗科与巴普）：长名字折成两行后，逐字波浪在 6 字里被摊薄，
   肉眼看起来"几乎不动"。这里给折行名字（.wrap4）单独加大振幅，
   保证它和非折行名字的晃动观感一致。 */
#screenGame .player-name.wrap4 .wave-ch {
  animation-name: nameWaveStrong;
}
@keyframes nameWaveStrong {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}

#screenGame #scoreMarkers .col-sway {
  animation: colSway 0.55s ease-in-out;
}
@keyframes colSway {
  0%   { transform: translate(-50%, -50%) translateX(0); }
  25%  { transform: translate(-50%, -50%) translateX(-4px); }
  55%  { transform: translate(-50%, -50%) translateX(4px); }
  80%  { transform: translate(-50%, -50%) translateX(-2px); }
  100% { transform: translate(-50%, -50%) translateX(0); }
}

#screenGame .player-box .num-pop {
  animation: numPop 0.45s ease-out;
}
@keyframes numPop {
  0%   { transform: scale(1.6); }
  100% { transform: scale(1); }
}

/* ============================================================
 * 玩家回合：每格独立"红/深灰空心框"
 *
 * 内圈红线：由相邻 cell-hint 边框重叠产生（基准 inset: -3% 5%）
 * 外圈红边：由本机侧棋盘 .col::before 统一绘制（下方）
 *
 * 动画触发：
 *   play-red    → cellHintGrow（红框主动重播）
 *   play-filled → cellHintGrowFilled（深灰框，独立动画名确保每次重播）
 * 选择器用 .board（不限 #myBoard）：异地客机的本机侧是 aiBoard（第 12 条②）
 * ============================================================ */
.board .cell-hint {
  position: absolute;
  inset: -3% 5%;
  background: transparent;
  border: 6px solid #d02020;
  border-radius: 4px;
  box-sizing: border-box;
  display: none;
  pointer-events: none;
  z-index: 0;
  transform-origin: center center;
}
.board .cell-hint.show { display: block; }
.board .cell-hint.filled { border-color: #282828; }   /* 黑 + 一点白 */

/*
 * 动画显式重播：红框 / 深灰框用两个互斥的播放类驱动，
 * 每次都先移除两个类 → 强制 reflow → 加回目标类，确保深灰动画每次都重播（第 20 条）
 */
.board .cell-hint.play-red {
  animation: cellHintGrow 0.2s cubic-bezier(.2,.7,.3,1);
}
.board .cell-hint.play-filled {
  animation: cellHintGrowFilled 0.2s cubic-bezier(.2,.7,.3,1);
}

@keyframes cellHintGrow {
  0%   { transform: scale(0.35); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
/* 灰框独立动画名，参数与 cellHintGrow 完全一致 */
@keyframes cellHintGrowFilled {
  0%   { transform: scale(0.35); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* ============================================================
 * 列外圈加厚（合并自 cell-hint-outer.css）
 * ============================================================ */
:root {
  --hint-outer: 4px;                  /* 外圈每边向外加厚的厚度 */
  --hint-outer-color: #d02020;        /* 外圈颜色（= 现红框红） */
  --hint-outer-color-filled: #282828; /* 列满时的外圈颜色（黑 + 一点白） */
  --hint-outer-radius: 0px;           /* 外圈圆角 */
}

.board .col::before {
  content: '';
  position: absolute;
  top:    calc(-1% - var(--hint-outer));
  bottom: calc(-1% - var(--hint-outer));
  left:   calc( 5% - var(--hint-outer));
  right:  calc( 5% - var(--hint-outer));
  border: var(--hint-outer) solid var(--hint-outer-color);
  border-radius: var(--hint-outer-radius);
  box-sizing: border-box;
  display: none;
  pointer-events: none;
  z-index: 0;
  transform-origin: center center;
}

/* 有 show → 外圈显示（无动画场景，例如 hover 停在同列） */
.board .col:has(.cell-hint.show)::before {
  display: block;
}

/* 有 play-red / play-filled → 播放同款缩放动画（第 20 条：与内圈同步重播） */
.board .col:has(.cell-hint.show.play-red)::before,
.board .col:has(.cell-hint.show.play-filled)::before {
  animation: colHintOuterGrow 0.2s cubic-bezier(.2,.7,.3,1);
}

/* 列满 → 外圈变深灰 */
.board .col:has(.cell-hint.show.filled)::before {
  border-color: var(--hint-outer-color-filled);
}

@keyframes colHintOuterGrow {
  0%   { transform: scale(0.35); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* ============================================================
 * 统一选择浮层 chooser（第 8/9/25 条）
 * ============================================================ */
.ch-layer {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: none;
  background: rgba(0, 0, 0, 0.45);
  cursor: url('../assets/mouse.png') 8 8, auto;
}
.ch-choose {
  /* choose.png 是 1920x1080 全屏画布（框体画在画布底部），必须整体铺满全屏 */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transition: opacity .3s ease;
}
.ch-bar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.ch-name {
  position: absolute;
  left: 50%;
  top: 78.33%;
  transform: translate(-50%, -50%);
  z-index: 5;
  color: #f2e2b0;
  font-family: "SimHei", "Heiti SC", sans-serif;
  font-size: 26px;
  letter-spacing: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.ch-desc {
  position: absolute;
  left: 44.75%;
  top: 84.70%;
  transform: translate(-50%, -50%);
  z-index: 5;
  color: #d82828;
  font-family: "SimHei", "Heiti SC", sans-serif;
  font-size: 15px;
  letter-spacing: 3px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.ch-arrow {
  position: absolute;
  top: 78.33%;
  width: 0;
  height: 0;
  z-index: 6;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease;
}
.ch-arrow-l {
  left: 40.59%;
  transform: translate(-50%, -50%);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-right: 18px solid #f2e2b0;
}
.ch-arrow-r {
  left: 59.41%;
  transform: translate(-50%, -50%);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 18px solid #f2e2b0;
}
.ch-arrow:hover { filter: brightness(1.25); }
/* 扩大箭头的点击检测区（三角形本身只有 18x26px，边缘极难点中）：
   ::after 向四周各扩 16px 透明热区，不改变可见画面 */
.ch-arrow::after {
  content: '';
  position: absolute;
  inset: -16px;
}

.ch-btn { left: 55.38%; }

/* 选人浮层右上角关闭按钮
   ⚠ 位置锚定在「小框」而不是整张全屏画布上：choose.png 是 1920x1080 全屏画布
   （透明通道），真正的框体内容只占 x 37.45%~63.75% / y 69.17%~95.46%
   （实测贴图不透明像素包围盒）。
   需求重做：① 叉的中心刚好压在框体上边沿（原 top:63.07% 悬在边沿上方 20 多像素）；
   ② 去掉圆底与悬停红圈；③ 改成很粗的叉（CSS 双杠绘制，原「✕」字符太细）；
   ④ 悬停放大。 */
.ch-x {
  position: absolute;
  left: 61.55%;
  top: calc(69.17% - 18px);   /* 44px 按钮：中心 = 框体上边沿 +18px 处（再下移一小点） */
  z-index: 8;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  padding: 0;
  font-size: 0;                       /* 隐藏原「✕」字符，改由双杠绘制 */
  line-height: 1;
  transition: opacity .3s ease, transform .18s cubic-bezier(.2,.7,.3,1);
}
.ch-x::before,
.ch-x::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 6px;
  border-radius: 0;                   /* 方头：不倒圆角 */
  background: #e02020;
  box-shadow: 0 0 4px rgba(0, 0, 0, .6);
}
.ch-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.ch-x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.ch-x:hover { transform: scale(1.28); }
.ch-x:hover::before,
.ch-x:hover::after { background: #ff3535; }

/* 统一小号红绸带按钮（贴合「了解/确认」文字长度，尖角固定） */
.ribbon-mini {
  position: absolute;
  top: 86.47%;
  transform: translate(-50%, -50%);
  width: auto;
  padding: 0 34px;
  height: 36px;
  border: none;
  color: #fff5e8;
  font-family: "Source Han Serif SC", "Songti SC", "STSong", serif;
  font-size: 16px;
  letter-spacing: 6px;
  padding-left: 20px;
  z-index: 6;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s ease;
  background:
    linear-gradient(#a81010, #a81010) top 3px left 0 / 100% 6px no-repeat,
    linear-gradient(#a81010, #a81010) bottom 3px left 0 / 100% 6px no-repeat,
    #d02020;
  clip-path: polygon(0% 0%, 100% 0%, calc(100% - 12px) 50%, 100% 100%, 0% 100%, 12px 50%);
}
.ribbon-mini:hover { filter: brightness(1.12); }
.ribbon-mini:focus, .ribbon-mini:focus-visible { outline: none; }

.ch-layer.ch-in .ch-choose,
.ch-layer.ch-in .ch-bar,
.ch-layer.ch-in .ch-name,
.ch-layer.ch-in .ch-desc,
.ch-layer.ch-in .ch-arrow,
.ch-layer.ch-in .ch-x,
.ch-layer.ch-in .ribbon-mini { opacity: 1; }

/* ============================================================
 * 新模式选择界面（mode-selection.png 全屏底图 + 四象限）
 * ============================================================ */
#modePick {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
  pointer-events: auto;
}
#modePick .mp-dim {
  position: absolute;
  left: 16.46%; top: 5.61%;
  width: 66.34%; height: 89.00%;
  background: #000;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(.4,0,.2,1);
  z-index: 1;
  pointer-events: none;
}
#modePick .mp-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0;
  transition: opacity 2.4s cubic-bezier(.4,0,.2,1);
  z-index: 2;
  pointer-events: none;
}
/* 四象限布局容器（以全屏中心为十字中心）。
   不再画边框/红光，只负责摆放四格（用户要求去掉红框，显示自然） */
#modePick .mp-zone {
  position: absolute;
  left: 24%;
  top: 19%;              /* 上排往下移、下排往上移（向中间收拢） */
  width: 52%;
  height: 62%;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.2,.7,.3,1) .5s;
}
#modePick.mp-in .mp-zone { opacity: 1; }
#modePick.mp-out .mp-zone { transition-duration: .45s; transition-delay: 0s; }
#modePick .mp-cell {
  position: relative;
  display: flex;
  align-items: center;
  cursor: url('../assets/mouse.png') 8 8, auto;
}
#modePick .mp-cell.cell-l { justify-content: flex-end; padding-right: 2%; }
#modePick .mp-cell.cell-r { justify-content: flex-start; padding-left: 2%; }
#modePick .mp-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
}
#modePick .mp-cell.cell-l .mp-inner { flex-direction: row-reverse; }
#modePick .mp-cell.cell-r .mp-inner { flex-direction: row; }
#modePick .mp-icon {
  width: 190px;
  height: 190px;
  object-fit: contain;
  filter: brightness(.55) saturate(.8);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), filter .25s ease;
}
#modePick .mp-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  white-space: nowrap;
}
#modePick .mp-name {
  color: #8f8f8f;
  font-family: "SimHei", "Heiti SC", sans-serif;
  font-size: 30px;
  letter-spacing: 5px;
  transition: color .25s ease, text-shadow .25s ease;
}
#modePick .mp-sub {
  color: #6b5424;
  font-family: "SimHei", "Heiti SC", sans-serif;
  font-size: 16px;
  letter-spacing: 1px;
  transition: color .25s ease;
  max-width: 26vw;
  white-space: normal;
  line-height: 1.4;
}
/* hover：图标亮起放大、文字变米黄（保留原有动效，放大一点） */
#modePick .mp-cell:hover .mp-icon {
  transform: scale(1.15);
  filter: brightness(1.08) saturate(1.15);
}
#modePick .mp-cell:not(.sel):hover .mp-name {
  color: #f2e2b0;
  text-shadow: 0 0 12px rgba(208,32,32,.55);
}
#modePick .mp-cell:hover .mp-sub { color: #b8862b; }
#modePick .mp-glow {
  position: absolute;
  inset: 6% 2%;
  background: radial-gradient(ellipse at center, rgba(208,24,24,.18), rgba(208,24,24,0) 70%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
#modePick .mp-cell:hover .mp-glow { opacity: 1; }
/* 键盘方向键选中的格子与悬停态一致 */
#modePick .mp-cell.kbd .mp-icon {
  transform: scale(1.15);
  filter: brightness(1.08) saturate(1.15);
}
#modePick .mp-cell:not(.sel).kbd .mp-name {
  color: #f2e2b0;
  text-shadow: 0 0 12px rgba(208,32,32,.55);
}
#modePick .mp-cell.kbd .mp-sub { color: #b8862b; }
#modePick .mp-cell.kbd .mp-glow { opacity: 1; }

/* ---- 需求1：已选模式的特殊高亮 + 按下暗态 ---- */
#modePick .mp-cell.sel .mp-icon {
  filter: brightness(1.05) saturate(1.1) drop-shadow(0 0 16px rgba(255, 205, 90, .8));
}
#modePick .mp-cell.sel .mp-name {
  color: #ffffff;
  text-shadow: 0 0 16px rgba(255,255,255,.7);
}
#modePick .mp-cell.sel .mp-sub { color: #d8a94e; }
#modePick .mp-cell.sel .mp-glow {
  opacity: 1;
  background: radial-gradient(ellipse at center, rgba(230, 170, 40, .22), rgba(230, 170, 40, 0) 70%);
}
/* 按下去时的暗态（区别于 hover 亮态） */
#modePick .mp-cell:active .mp-inner {
  filter: brightness(.55) saturate(.75);
  transform: scale(.97);
}
#modePick .mp-cell:active .mp-glow { opacity: .25; }
#modePick .mp-inner { transition: filter .12s ease, transform .12s ease; }

/* ---- 需求1：主菜单「模式选择」红绸带右侧的所选模式标记 ----
   绝对定位贴红绸带右端外侧：不占布局、不挤文字；加载即显示（44px） */
#screenMenu .menu-btn .mode-mark {
  display: none;
  position: absolute;
  left: calc(50% + 117px);
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255, 210, 90, .65));
  pointer-events: none;
  z-index: 1;
}
#screenMenu .menu-btn .mode-mark.on { display: block; }

/* ============================================================
 * 主菜单右下 dance.mp4（缩小一半）+ 悬停制作信息图 egg.png
 * ============================================================ */
#menuCredits {
  position: absolute;
  right: 1.6%;
  bottom: 3%;
  width: 6.5%;           /* 原 13%，再缩小一半 */
  min-width: 72px;
  z-index: 5;
  /* 离开主菜单（玩法说明/难度选择/模式选择）时与说明区域同节奏淡出 */
  transition: opacity .9s cubic-bezier(.4,0,.2,1);
}
#menuCredits video {
  width: 100%;
  display: block;
  pointer-events: auto;  /* 需要接收连点 */
  cursor: pointer;
}
/* 制作信息整图：默认隐藏，悬停视频或信息图（同在 #menuCredits 盒内）时显示。
   包裹层与图同尺寸，透明按钮按图内白框的百分比定位，任何视口下都对齐。 */
#creditsEggWrap {
  position: absolute;
  right: 100%;
  bottom: 0;
  /* 不留间隙：鼠标从视频左缘直接滑到 egg，避免中途丢失 hover */
  width: 360px;
  max-width: 60vw;
  z-index: 8;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
  pointer-events: none;
}
#creditsEgg {
  display: block;
  width: 100%;
  height: auto;
}
#menuCredits:hover #creditsEggWrap {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* 透明按钮：覆盖 egg.png 内画好的「一键复制」白框。
   白框在原图(586x283)中：左 279 上 104 宽 107 高 36，
   即 left 47.61% / top 36.75% / width 18.26% / height 12.72%。 */
#copyEggBtn {
  position: absolute;
  left: 47.61%;
  top: 36.75%;
  width: 18.26%;
  height: 12.72%;
  z-index: 9;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
/* egg 隐藏时按钮也不可点（悬停 egg 时与图一起生效） */
#menuCredits:not(:hover) #copyEggBtn { pointer-events: none; }
body.menu-hide-credits #menuCredits {
  opacity: 0;
  pointer-events: none;
}
/* 需求：从主页切到其它界面（模式选择 / 玩法说明 / 难度浮层 / 进入对局）时，
   底部那一大串版权声明（含"官方网站"）必须一起隐藏。
   历史 bug：这里只写了 #menuCredits（蛋的按钮），而版权文字是 #menuFooter，
   两者是不同元素 → 切页后版权条一直留在最下面。 */
body.menu-hide-credits #menuFooter {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease;
}
#menuFooter {
  transition: opacity .3s ease;
}
#copyToast {
  position: fixed;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.82);
  color: #fff;
  padding: 8px 22px;
  border-radius: 6px;
  font-size: 15px;
  z-index: 900;
  display: none;
}

/* ============================================================
 * 异地大厅 + 帽子循环选择条（第 21 条 / function/remote-lobby.js）
 * ============================================================ */
.net-layer {
  position: fixed;
  inset: 0;
  z-index: 750;
  background: rgba(0, 0, 0, 0.92);
  color: #e8e2d2;
  font-family: "SimHei", "Heiti SC", sans-serif;
  display: none;
  overflow: auto;
}
.net-layer.show { display: block; }
.net-wrap {
  width: 720px;
  margin: 40px auto;
  padding: 24px;
  box-sizing: border-box;
}
.net-wrap h2 { font-size: 22px; color: #f2e2b0; letter-spacing: 4px; margin: 0 0 18px; }
.net-wrap h3 { font-size: 16px; color: #cbb68a; margin: 18px 0 8px; }
.net-wrap button {
  background: #c01818;
  color: #fff5e8;
  border: none;
  padding: 8px 18px;
  margin: 4px 6px 4px 0;
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  border-radius: 3px;
  font-family: inherit;
}
.net-wrap button:hover { background: #d02020; }
.net-wrap button.ghost { background: transparent; border: 1px solid #6a5a48; color: #cbb68a; }
.net-wrap textarea {
  width: 100%;
  height: 90px;
  box-sizing: border-box;
  background: #111;
  color: #cfc8b8;
  border: 1px solid #3a3028;
  font-size: 12px;
  margin-top: 6px;
}
.net-status { font-size: 13px; color: #9aa; margin: 8px 0; }
.net-back { position: absolute; top: 18px; right: 18px; }

/* ---- 需求6：联机准备菜单（极简布局） ---- */
.net-wrap-slim { max-width: 560px; margin-top: 8vh; }
.net-field { margin: 18px 0; }
.net-field > label {
  display: block;
  font-size: 15px;
  color: #cbb68a;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.net-field input {
  width: 240px;
  box-sizing: border-box;
  background: #111;
  color: #f2e2b0;
  border: 1px solid #3a3028;
  padding: 8px 10px;
  font-size: 16px;
  font-family: inherit;
  letter-spacing: 1px;
}
.net-field input#joinCode { letter-spacing: 4px; }
.net-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.net-row input { flex: 0 0 auto; }
.room-code {
  font-size: 30px;
  letter-spacing: 8px;
  color: #ffd873;
  font-family: Menlo, Consolas, monospace;
  min-width: 150px;
  text-align: center;
  background: #14100a;
  border: 1px solid #4a3a20;
  padding: 4px 10px;
  border-radius: 3px;
  user-select: text;
}
.net-debug {
  margin-top: 22px;
  border-top: 1px dashed #3a3028;
  padding-top: 6px;
}

/* 帽子选择条：显示 5 格，中间选中（正常亮度 + 白框倒小圆角），两侧调暗 */
.hat-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 26px 0 10px;
}
.hat-arrow {
  width: 0; height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 16px solid #fff;
  cursor: pointer;
  flex: none;
}
.hat-arrow.left {
  border-left: none;
  border-right: 16px solid #fff;
}
.hat-cell {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: #181818;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: brightness(0.45);
  transition: filter .15s, box-shadow .15s;
  flex: none;
}
.hat-cell.sel {
  filter: brightness(1);
  box-shadow: 0 0 0 3px #fff;
}
.hat-chip {
  width: 48px;
  height: 48px;
  object-fit: contain;
  pointer-events: none;
}

/* ============================================================
 * 异地客机视角翻转（function/remote-game.js，第 12 条②）
 * 客机 state：ai=本机、me=对方；把本机视觉元素翻到左/下
 * ============================================================ */
#screenGame.guest-view .board.opp { top: 62.5%; }   /* aiBoard(本机) 到下方 */
#screenGame.guest-view .board.mine { top: 6.3%; }   /* myBoard(对方) 到上方 */
#screenGame.guest-view #playerLeft {                 /* me 名字框翻到右 */
  left: auto !important; right: 5% !important;
}
#screenGame.guest-view #playerRight {                /* ai 名字框翻到左 */
  right: auto !important; left: 5% !important;
}
/* 客机视角：两个角落骰子也随名字框左右对调，
   保证左侧骰子=本机人物、右侧骰子=对方人物，与名字框位置一致 */
#screenGame.guest-view #cornerSlot  { left: 7.53% !important; }
#screenGame.guest-view #cornerSlot2 { left: 92.47% !important; }
#screenGame.guest-view .player-video[data-side="ai"] {
  transform: translateY(0) !important;              /* 本机人物用本机构图 */
}
#screenGame.guest-view .player-video[data-side="me"] {
  transform: translateY(0) !important;
}
/* 人物视频裁剪：裁剪挂在外层容器、镜像挂在内层 video。
   CSS 先裁剪后变换是修不掉的（镜像救不回已被裁掉的半边）；
   反过来"先镜像后裁剪"：lamb（人物在左半）镜像后进入 ai 槽的右半裁剪区。
   此规则同时修复：同机对战对方 lamb 不显示、npc5（lamb-grey）不显示。 */
#screenGame .player-video[data-side="ai"] {
  clip-path: inset(0 0 0 50%);
  -webkit-clip-path: inset(0 0 0 50%);
}
#screenGame .player-video[data-side="me"] {
  clip-path: inset(0 50% 0 0);
  -webkit-clip-path: inset(0 50% 0 0);
}
/* 客机：视频槽左右对调（ai槽=本机 显示左半，me槽=对方 显示右半），
   与主机视角互为镜像 */
#screenGame.guest-view .player-video[data-side="ai"] {
  clip-path: inset(0 50% 0 0);
  -webkit-clip-path: inset(0 50% 0 0);
}
#screenGame.guest-view .player-video[data-side="me"] {
  clip-path: inset(0 0 0 50%);
  -webkit-clip-path: inset(0 0 0 50%);
}

/* 同机对战 / 异地对战：对方人物视频左右镜像（第 二 部分体验修改）。
   主机+同机：对方在 ai 槽；客机：对方在 me 槽。只动 video，不动容器裁剪。 */
#screenGame.pvp-view:not(.guest-view) .player-video[data-side="ai"] video,
#screenGame.guest-view .player-video[data-side="me"] video {
  transform: scaleX(-1) !important;   /* !important：压过影子视频/内联场景，保证客机 me 槽也生效 */
}
/* npc5（？？？）素材 lamb-grey.mp4 朝向需要镜像：整槽镜像（含影子视频）。
   data-flip 由 game-anim.js 依据 ClipSource 表的 flip 标记设置/清除 */
#screenGame .player-video[data-flip="1"] video {
  transform: scaleX(-1) !important;
}

/* ============================================================
 * 联机表情（function/emote.js，仅在联机对局显示）
 *   左下角横排四个小方框：棕底 + 粗白描边 + 圆角
 *   人物旁的小黑色对话框：播放随机一人的表情片段
 *   本轮重做：更大、更有灵气（弹性入场上浮 + 呼吸浮动 + 点击脉冲爆闪）
 * ============================================================ */
#emoteBar {
  position: absolute;
  left: 2%;
  bottom: 2.5%;
  z-index: 12;
  display: none;
  gap: 14px;
  align-items: flex-end;
  perspective: 600px;
}
#emoteBar.show { display: flex; }

.emote-btn {
  --sz: 64px;
  width: var(--sz); height: var(--sz);
  padding: 0;
  position: relative;
  background: linear-gradient(160deg, #8a5f37 0%, #6d4a2b 55%, #4e341d 100%);
  border: 3px solid #ffffff;
  border-radius: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 14px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.22),
              inset 0 -3px 6px rgba(0,0,0,.35);
  transform-style: preserve-3d;
  transition: transform .16s cubic-bezier(.34,1.56,.64,1),
              background .16s ease, box-shadow .16s ease, filter .16s ease;
  will-change: transform;
}
/* 入场：从下方弹上来 + 轻微回弹（每个按钮错开，形成"逐个蹦出"的节奏） */
#emoteBar.show .emote-btn {
  animation: emoteBtnIn .46s cubic-bezier(.34,1.7,.5,1) backwards;
}
#emoteBar.show .emote-btn:nth-child(1) { animation-delay: .02s; }
#emoteBar.show .emote-btn:nth-child(2) { animation-delay: .08s; }
#emoteBar.show .emote-btn:nth-child(3) { animation-delay: .14s; }
#emoteBar.show .emote-btn:nth-child(4) { animation-delay: .20s; }
@keyframes emoteBtnIn {
  0%   { opacity: 0; transform: translateY(26px) scale(.5) rotateX(35deg); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.08) rotateX(-6deg); }
  100% { opacity: 1; transform: none; }
}
/* 静置时轻微呼吸浮动，让按钮"活着" */
#emoteBar.show .emote-btn .emote-btn-inner {
  animation: emoteFloat 2.6s ease-in-out infinite;
}
#emoteBar.show .emote-btn:nth-child(1) .emote-btn-inner { animation-delay: 0s; }
#emoteBar.show .emote-btn:nth-child(2) .emote-btn-inner { animation-delay: .35s; }
#emoteBar.show .emote-btn:nth-child(3) .emote-btn-inner { animation-delay: .7s; }
#emoteBar.show .emote-btn:nth-child(4) .emote-btn-inner { animation-delay: 1.05s; }
@keyframes emoteFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5px); }
}
.emote-btn-inner { display: block; line-height: 0; }
.emote-btn svg { width: 38px; height: 38px; display: block; }
.emote-btn svg circle,
.emote-btn svg ellipse,
.emote-btn svg path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .16s ease;
}
.emote-btn svg .dot { fill: #ffffff; stroke: none; }

.emote-btn:hover {
  background: linear-gradient(160deg, #b07a45 0%, #8a5f37 55%, #63421f 100%);
  transform: translateY(-9px) scale(1.16) rotate(-3deg);
  box-shadow: 0 14px 26px rgba(0,0,0,.65), 0 0 22px rgba(255,196,120,.45),
              inset 0 2px 0 rgba(255,255,255,.35);
  filter: saturate(1.15) brightness(1.06);
}
.emote-btn:hover svg circle,
.emote-btn:hover svg ellipse,
.emote-btn:hover svg path { stroke: #fff7e2; }
.emote-btn:active { transform: translateY(-2px) scale(.9); }

/* 点击脉冲：一圈白光扩散 + 按钮爆闪一下 */
.emote-btn.pulse::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  border: 3px solid rgba(255,236,190,.95);
  animation: emotePulse .5s cubic-bezier(.2,.7,.3,1) forwards;
  pointer-events: none;
}
@keyframes emotePulse {
  0%   { opacity: .95; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.9); }
}
.emote-btn.pulse {
  animation: emoteFlash .5s ease;
}
@keyframes emoteFlash {
  0%   { filter: brightness(1); }
  25%  { filter: brightness(1.9) saturate(1.5); }
  100% { filter: brightness(1); }
}

/* 播放中：整条表情栏加 .locked —— 按钮变暗、禁用点击（需求：
   「发完表情必须等当前表情播放完才能发下一个」） */
#emoteBar.locked .emote-btn {
  filter: grayscale(.55) brightness(.62) saturate(.6);
  cursor: not-allowed;
  box-shadow: 0 3px 8px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.10),
              inset 0 -3px 6px rgba(0,0,0,.35);
}
#emoteBar.locked .emote-btn:hover {
  transform: none;
  background: linear-gradient(160deg, #8a5f37 0%, #6d4a2b 55%, #4e341d 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.10),
              inset 0 -3px 6px rgba(0,0,0,.35);
  filter: grayscale(.55) brightness(.62) saturate(.6);
}
/* 播放中又点了按钮：整条栏轻抖一下，提示"还在播" */
#emoteBar.shake { animation: emoteBarShake .36s cubic-bezier(.36,.07,.19,.97); }
@keyframes emoteBarShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}

/* 人物旁的小对话框
 * 需求（本轮重做）：
 *   ① 大小 = 「1.png 骰子图片」那种观感（不是角落那颗小骰子），
 *      取 5.4vw（≈ 1500px 视口下 81px，接近 1.png 待落子骰子的视觉尺寸）；
 *   ② 位置 = 在「正常对局人物视频」里人物的旁边 ——
 *      我方在人物右侧、敌方在人物左侧，且与人物**水平中心对齐**；
 *   ③ 框内显示：原始人物视频本来就是"全屏对齐 + clip-path 裁掉黑边"才显示，
 *      所以框内也必须用同一套办法：让视频保持视口大小，再用 translate-video
 *      把它平移到"人物正好落在框中心"的新位置（见 --emote-shift-x/y）。
 * ============================================================ */
/* 外层：只负责定位与气泡尖角。**不能 overflow:hidden**（会把尖角裁掉）。 */
.emote-dialog {
  --emote-size: 3.6vw;
  --emote-shift-x: 0px;       /* 视频水平平移（由 JS 依人物位置写入，单位 px） */
  --emote-shift-y: 0px;       /* 视频垂直平移 */
  --emote-scale: 1;           /* 视频缩放（由 JS 依"人物高度统一占框内比例"写入） */
  --emote-vw: 100vw;          /* 源画布铺开尺寸（JS 写入实际 px） */
  --emote-vh: 100vh;
  --emote-radius: 9px;
  position: fixed;
  z-index: 999998;
  width: var(--emote-size);
  height: var(--emote-size);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.72);
  transition: opacity .16s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.72));
}
/* 内层：裁切 + 圆角 + 描边，视频放这里。 */
.emote-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--emote-radius);
  border: 2px solid rgba(255,255,255,.72);
  background: #0a0a0c;
  box-sizing: border-box;
}
/* 气泡尖角：一个指向人物方向的小三角（self 框尖角朝左、peer 框尖角朝右）。
   用两层（::before 描边色、::after 填充色）做出"带描边的尖角"效果；
   因为在外层（非裁切）上，所以不会被 overflow 裁掉。
   尖角垂直位置与框心齐平（top:50%），与人物水平中线对齐。 */
.emote-dialog::before,
.emote-dialog::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0; height: 0;
  border-style: solid;
  pointer-events: none;
  transform: translateY(-50%);
}
.emote-dialog-self::before {
  right: 100%;
  border-width: 8px 10px 8px 0;
  border-color: transparent rgba(255,255,255,.72) transparent transparent;
}
.emote-dialog-self::after {
  right: 100%;
  border-width: 6px 8px 6px 0;
  border-color: transparent #0a0a0c transparent transparent;
  margin-right: 2px;
}
.emote-dialog-peer::before {
  left: 100%;
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent rgba(255,255,255,.72);
}
.emote-dialog-peer::after {
  left: 100%;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #0a0a0c;
  margin-left: 2px;
}
/* 只有 .show（开始显示）且 .ready（画面已解出来）才真正可见 → 消灭黑框 */
.emote-dialog.show { transform: translate(-50%, -50%) scale(1); }
.emote-dialog.show.ready { opacity: 1; }
.emote-dialog.show:not(.ready) { opacity: 0; }

/* 框内视频：铺成与主画面同尺度的"源画布"（VW×VH），再按素材缩放 k 使人物高度
   统一占框内 CHAR_FIT 比例，最后用 translate 把人物锚点对准框心。
   视频左上角 = 框内容区左上角（position:absolute 相对框 padding box）。 */
.emote-video {
  position: absolute;
  left: 0; top: 0;
  width: var(--emote-vw);
  height: var(--emote-vh);
  object-fit: cover;
  transform-origin: 0 0;
  transform: translate(var(--emote-shift-x), var(--emote-shift-y)) scale(var(--emote-scale));
}
/* 素材自带朝向修正（clip-source 的 flip 标记）：先缩放定位、再镜像画面。
   镜像支点在元素左上（transform-origin:0 0），故 JS 对镜像素材把锚点 x 换成
   (1 − cx)，两者配合正好把内容翻正并回到框心。 */
.emote-video.srcflip {
  transform: translate(var(--emote-shift-x), var(--emote-shift-y)) scale(var(--emote-scale)) scaleX(-1);
}
/* 缩放版：窄/矮屏时缩小，仍保持与骰子近似的观感 */
@media (max-height: 620px), (orientation: landscape) and (max-width: 1100px) {
  .emote-dialog { --emote-size: 5.4vh; }
}

/* ============================================================
 * 手机横屏适配（function/mobile-adapt.js）
 * ============================================================ */
#rotateTip {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  color: #f2e2b0;
  font-family: "SimHei", "Heiti SC", sans-serif;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  font-size: 18px;
  letter-spacing: 3px;
}
#rotateTip .rot-icon {
  width: 46px;
  height: 46px;
  border: 3px solid #f2e2b0;
  border-radius: 8px;
  animation: rotShake 1.4s ease-in-out infinite;
}
@keyframes rotShake {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(90deg); }
}

/* ============================================================
 * 联机模式：只显示本机那侧的角落骰子（!important 压过 JS 内联）
 * ============================================================ */
body.net-host #screenGame #cornerSlot  { display: none !important; }
body.net-guest #screenGame #cornerSlot2 { display: none !important; }


/* FIX: 模式选中大标题改亮白 */
#modePick .mp-cell.sel .mp-name {
  color: #ffffff !important;
  text-shadow: 0 0 16px rgba(255,255,255,.75) !important;
}


/* locked: 模式已选中，等待返回主菜单期间禁止一切操作 */
#modePick.locked { cursor: default; }
#modePick.locked .mp-cell { pointer-events: none; }


/* FIX: 选中模式永远是白字，不管 hover/kbd */
#modePick .mp-cell.sel .mp-name,
#modePick .mp-cell.sel:hover .mp-name,
#modePick .mp-cell.sel.kbd .mp-name {
  color: #ffffff !important;
  text-shadow: 0 0 16px rgba(255,255,255,.75) !important;
}


/* FINAL: 模式选择文字颜色 —— 非选中=灰，选中=白 */
/* 非选中：不管 hover / 键盘选中，文字永远灰 */
#modePick .mp-cell .mp-name,
#modePick .mp-cell:hover .mp-name,
#modePick .mp-cell.kbd .mp-name {
  color: #8f8f8f !important;
  text-shadow: none !important;
}
/* 选中：永远白 */
#modePick .mp-cell.sel .mp-name,
#modePick .mp-cell.sel:hover .mp-name,
#modePick .mp-cell.sel.kbd .mp-name {
  color: #ffffff !important;
  text-shadow: 0 0 16px rgba(255,255,255,.75) !important;
}
/* 副标题：非选中保持暗棕，选中亮白 */
#modePick .mp-cell:hover .mp-sub,
#modePick .mp-cell.kbd .mp-sub {
  color: #6b5424 !important;
}
#modePick .mp-cell.sel .mp-sub,
#modePick .mp-cell.sel:hover .mp-sub,
#modePick .mp-cell.sel.kbd .mp-sub {
  color: #d8a94e !important;
}


/* ========== RL/HatPicker 新 UI ========== */
.rl-layer {
  position: fixed; inset: 0; z-index: 750;
  background: rgba(8,8,10,.94);
  display: none; align-items: center; justify-content: center;
  font-family: "SimHei", "Heiti SC", sans-serif;
}
.rl-layer.show { display: flex; }
/* 需求（联机大厅更贴合游戏风格）：卡片暗底 + 红金氛围光、
   出场动效（淡入上浮）、标题两侧花纹（pattern.png）、顶部骰子图标。
   素材全部取自 assets 素材库。 */
.rl-card {
  position: relative;
  width: 480px; max-width: 90vw;
  padding: 34px 44px 30px;
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(150, 24, 24, .16), transparent 62%),
    #14141a;
  border: 1px solid #3a2f22;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(232,220,192,.05);
  color: #cbb68a;
}
.rl-layer.show .rl-card { animation: rlCardIn .45s cubic-bezier(.2,.7,.3,1); }
@keyframes rlCardIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
/* 顶部三个骰子：中间大、两侧小，错峰上下浮动（需求：骰子 1 → 3 个） */
.rl-dicebar {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin: 0 0 10px;
}
.rl-die {
  width: 36px; height: 36px;
  object-fit: contain;
  filter: drop-shadow(0 0 9px rgba(208,32,32,.45));
  animation: rlDiceBob 3s ease-in-out infinite;
}
.rl-die:nth-child(1) { animation-delay: -.7s; width: 30px; height: 30px; opacity: .8; }
.rl-die:nth-child(3) { animation-delay: .7s;  width: 30px; height: 30px; opacity: .8; }
@keyframes rlDiceBob {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-5px) rotate(5deg); }
}
/* 四角小折角（金色短线）+ 上下边框中点的小断口（需求：规矩矩形 + 一点点小断口） */
.rl-corner {
  position: absolute; width: 13px; height: 13px;
  border: 2px solid rgba(212, 162, 74, .75);
  pointer-events: none;
}
.rl-corner.c1 { left: -3px;  top: -3px;    border-right: none; border-bottom: none; }
.rl-corner.c2 { right: -3px; top: -3px;    border-left: none;  border-bottom: none; }
.rl-corner.c3 { left: -3px;  bottom: -3px; border-right: none; border-top: none; }
.rl-corner.c4 { right: -3px; bottom: -3px; border-left: none;  border-top: none; }
.rl-gap {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 52px; height: 5px;
  background: #14141a;
  pointer-events: none;
}
.rl-gap.top    { top: -3px; }
.rl-gap.bottom { bottom: -3px; }
.rl-title {
  font-size: 20px; letter-spacing: 6px;
  color: #e8dcc0; text-align: center;
  margin: 0 0 28px; font-weight: normal;
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
}
.rl-deco {
  height: 17px; width: auto;
  opacity: .85;
  animation: rlDecoSway 2.2s steps(1) infinite;
}
.rl-deco.flip { animation-name: rlDecoSwayFlip; }
@keyframes rlDecoSway {
  0%, 49.99% { transform: translate(-1px, 1px); }
  50%, 100%  { transform: translate(1px, -1px); }
}
@keyframes rlDecoSwayFlip {
  0%, 49.99% { transform: scaleX(-1) translate(1px, 1px); }
  50%, 100%  { transform: scaleX(-1) translate(-1px, -1px); }
}
.rl-row {
  display: flex; align-items: center;
  gap: 12px; margin-bottom: 16px;
}
.rl-label {
  flex: none; width: 48px;
  font-size: 13px; letter-spacing: 3px;
  color: #7a7260; text-align: right;
}
.rl-input {
  flex: 1; min-width: 0;
  background: #0a0a0e;
  color: #e8dcc0;
  border: 1px solid #2a2a35;
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 15px; font-family: inherit;
  letter-spacing: 1px;
  outline: none;
  transition: border-color .15s;
}
.rl-input:focus { border-color: #4a4a60; }
/* 需求（创建/加入房间按钮不够明显、没有动效）：加大字号与内边距、红金描边、
   悬停上浮 + 光晕 + 扫光、按下回弹。 */
.rl-btn {
  position: relative; overflow: hidden;
  flex: none;
  background: linear-gradient(180deg, #c22323 0%, #8e1414 100%);
  color: #fff5e8;
  border: 1px solid #d4a24a;
  border-radius: 4px;
  padding: 11px 20px;
  font-size: 15px; font-family: inherit; font-weight: bold;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.rl-btn::after {              /* 扫光 */
  content: '';
  position: absolute; top: -20%; bottom: -20%; width: 38%;
  left: -70%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg);
  transition: left .5s ease;
  pointer-events: none;
}
.rl-btn:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(208,32,32,.55), 0 4px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2);
}
.rl-btn:hover::after { left: 130%; }
.rl-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }
.rl-btn.ghost {
  background: rgba(20,20,26,.9);
  border: 1px solid #6b5a34;
  color: #cbb68a;
  padding: 10px 16px;
  box-shadow: none;
}
.rl-btn.ghost:hover {
  background: #1c1c24; border-color: #d4a24a; color: #e8dcc0;
  transform: translateY(-2px);
}
.rl-code {
  flex: 1; text-align: center;
  font-family: Menlo, Consolas, monospace;
  font-size: 22px; letter-spacing: 6px;
  color: #e8b860;
  background: #0a0a0e;
  border: 1px solid #2a2a35;
  border-radius: 4px;
  padding: 6px 8px;
  user-select: text; min-width: 0;
}
.rl-status {
  margin: 20px 0 18px;
  font-size: 13px; letter-spacing: 1px;
  color: #7a7260; text-align: center;
  min-height: 18px;
}
/* 公共信令应急开关：默认隐藏，本地重试耗尽后由 showPublicSwitch(true) 展开 */
.rl-pubbox {
  margin: -6px 0 14px;
  padding: 9px 10px;
  border: 1px dashed #6a5a3a;
  border-radius: 6px;
  background: rgba(212,162,74,.07);
}
.rl-pubrow {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  font-size: 13px; color: #c9a86a; letter-spacing: 1px;
  user-select: none;
}
.rl-pubrow input { cursor: pointer; accent-color: #c22323; }
.rl-pubhint {
  margin-top: 5px;
  font-size: 11px; color: #7a6a4a; letter-spacing: .5px;
  line-height: 1.5;
}
.rl-enter {
  display: block; width: 100%;
  background: #2a2a35; color: #6a6a7a;
  border: none; border-radius: 6px;
  padding: 13px;
  font-size: 15px; font-family: inherit;
  letter-spacing: 6px;
  cursor: not-allowed;
  transition: background .2s, color .2s;
}
.rl-enter.on {
  background: linear-gradient(180deg, #c22323 0%, #8e1414 100%);
  color: #fff5e8;
  border: 1px solid #d4a24a;
  cursor: pointer;
  animation: rlEnterPulse 2.2s ease-in-out infinite;
}
.rl-enter.on:hover { filter: brightness(1.12); }
@keyframes rlEnterPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(208,32,32,0); }
  50%      { box-shadow: 0 0 18px 2px rgba(208,32,32,.4); }
}
.rl-hint {
  margin-top: 20px; text-align: center;
  font-size: 11px; color: #4a4a58; letter-spacing: 2px;
}

/* HatPicker */
.hp-layer {
  position: fixed; inset: 0; z-index: 760;
  background: rgba(8,8,10,.9);
  display: none; align-items: center; justify-content: center;
  font-family: "SimHei", "Heiti SC", sans-serif;
}
.hp-layer.show { display: flex; }
.hp-card {
  position: relative;   /* 关闭叉（.hp-x）以本卡片为定位基准，锚在卡片右上角 */
  padding: 32px 40px;
  background: #14141a;
  border: 1px solid #2a2a35;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  text-align: center;
}
/* 与对局内「选择人物」的 .ch-x 保持完全一致的观感（黑色半透明圆底 + 红色叉） */
/* 需求重做（选择人物小卡片右上角的叉）：
   ① 位置往下移：贴在卡片边界上（原来 -18px 悬在角外太空）；
   ② 去掉悬停红圈（原 hover 是暗红圆底）；
   ③ 改成很粗的叉：CSS 双杠绘制（原「×」字符太细，font-size:0 隐藏）；
   ④ 悬停放大。 */
.hp-x {
  position: absolute;
  right: -6px;
  top: -4px;                          /* 再下移一小点：更贴卡片上边沿 */
  z-index: 4;
  width: 40px; height: 40px;
  border: none; border-radius: 0;
  background: transparent;
  cursor: pointer; padding: 0;
  font-size: 0;                       /* 隐藏原「×」字符，改由双杠绘制 */
  line-height: 1;
  transition: transform .18s cubic-bezier(.2,.7,.3,1);
}
.hp-x::before,
.hp-x::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 24px; height: 5px;
  border-radius: 0;                   /* 方头：不倒圆角 */
  background: #e02020;
  box-shadow: 0 0 4px rgba(0, 0, 0, .6);
}
.hp-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.hp-x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.hp-x:hover { transform: scale(1.28); }
.hp-x:hover::before,
.hp-x:hover::after { background: #ff3535; }
.hp-title {
  font-size: 16px; letter-spacing: 5px;
  color: #e8dcc0; margin: 0 0 12px;
}
.hp-name {
  font-size: 14px; letter-spacing: 2px;
  color: #e8b860; margin: 0 0 20px;
}
.hp-strip {
  display: flex; align-items: center; gap: 12px;
  justify-content: center; margin-bottom: 24px;
}
.hp-cell {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: #0a0a0e;
  border: 1px solid #2a2a35;
  border-radius: 6px;
  filter: brightness(.45);
  transition: filter .15s, border-color .15s;
}
.hp-cell img { width: 44px; height: 44px; object-fit: contain; }
.hp-cell.sel {
  filter: brightness(1);
  border-color: #e8dcc0;
  box-shadow: 0 0 0 1px #e8dcc0;
}
.hp-arrow {
  width: 0; height: 0; cursor: pointer;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 13px solid #6a6a7a;
  transition: border-left-color .15s;
}
.hp-arrow:hover { border-left-color: #e8dcc0; }
.hp-arrow.left {
  border-left: none;
  border-right: 13px solid #6a6a7a;
}
.hp-arrow.left:hover { border-right-color: #e8dcc0; }
.hp-btns { display: flex; gap: 10px; justify-content: center; }
.hp-btn {
  background: #a81818; color: #fff5e8;
  border: none; border-radius: 4px;
  padding: 9px 26px;
  font-size: 14px; font-family: inherit;
  letter-spacing: 4px; cursor: pointer;
}
.hp-btn:hover { background: #c02020; }
.hp-btn.ghost {
  background: transparent;
  border: 1px solid #3a3a48;
  color: #a89b7a;
}
.hp-btn.ghost:hover { background: #1c1c24; }


/* ========== RL Tabs ========== */
.rl-tabs { display: flex; gap: 10px; margin: 16px 0; }
.rl-tab {
  position: relative; overflow: hidden;
  flex: 1; background: rgba(255,255,255,.03);
  border: 1px solid #3a3a48; border-radius: 5px;
  color: #8c8370; padding: 12px 0;
  font-size: 15px; font-family: inherit; font-weight: bold;
  letter-spacing: 3px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .15s, color .15s, transform .12s, box-shadow .15s, background .15s;
}
.rl-tab::after {
  content: '';
  position: absolute; top: -20%; bottom: -20%; width: 36%;
  left: -70%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg);
  transition: left .5s ease;
  pointer-events: none;
}
.rl-tab:hover:not(.locked) {
  border-color: #d4a24a; color: #e8dcc0; background: rgba(212,162,74,.08);
  transform: translateY(-2px);
}
.rl-tab:hover:not(.locked)::after { left: 130%; }
.rl-tab:active:not(.locked) { transform: translateY(1px); }
.rl-tab.active {
  background: linear-gradient(180deg, #c22323 0%, #8e1414 100%);
  border-color: #d4a24a; color: #fff5e8;
  box-shadow: 0 0 0 1px rgba(232,220,192,.22), 0 0 16px rgba(168,24,24,.5);
}
.rl-tab.locked { cursor: default; opacity: .55; }
.rl-tab.locked.active { opacity: 1; }
.rl-pane { padding: 4px 0 8px; animation: rlPaneIn .15s ease-out; }
@keyframes rlPaneIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rl-btn.wide { width: 100%; padding: 14px 0; margin-bottom: 12px; font-size: 16px; letter-spacing: 5px; }
.rl-coderow { display: flex; gap: 10px; align-items: center; }
.rl-coderow .rl-code { flex: 1; }

/* ============================================================
 * 手机横屏等比缩放（矮屏适配）
 * 基准：桌面 768 高的设计稿。所有固定 px 的文字 / 按钮 / 图标
 * 按  px ÷ 7.68 → vh  等比换算，使手机横屏下的视觉比例与电脑一致。
 * 仅在「横屏且高度 ≤ 560px」时生效，桌面全屏窗口不受影响。
 * ============================================================ */
@media (max-height: 560px) and (orientation: landscape) {
  html, body { touch-action: manipulation; }   /* 去掉触屏双击缩放/点击延迟 */

  /* 加载层 */
  #loadingScreen .loading-text { font-size: 5.47vh; letter-spacing: 0.39vh; }

  /* 主菜单 */
  #screenMenu .menu-btn { font-size: 2.86vh; letter-spacing: 1.3vh; padding: 1.3vh 0; }
  #screenMenu .menu-btn::before { width: 27.34vh; }

  /* 玩法说明「了解」按钮（样式由 core/explanation.js 注入，需 !important 压过） */
  #screenRules .rules-btn { font-size: 2.86vh !important; letter-spacing: 1.3vh !important; padding: 1.3vh 0 !important; }

  /* 选人层 */
  .ch-name { font-size: 3.39vh; letter-spacing: 0.52vh; }
  .ch-desc { font-size: 1.95vh; letter-spacing: 0.39vh; }
  .ribbon-mini { height: 4.69vh; padding: 0 4.43vh; padding-left: 2.6vh; font-size: 2.08vh; letter-spacing: 0.78vh; }

  /* 模式选择 */
  #modePick .mp-name { font-size: 3.91vh; letter-spacing: 0.65vh; }
  #modePick .mp-sub { font-size: 2.08vh; }

  /* 对局界面 */
  #screenGame .hud { bottom: 3.39vh; }
  #screenGame .status { font-size: 1.82vh; letter-spacing: 0.52vh; min-height: 2.6vh; }
  #screenGame .corner-slot { width: 6.25vh; height: 6.25vh; }
  #screenGame .diff select { font-size: 1.56vh; padding: 0.78vh 1.3vh; }

  /* 结算提示（内联样式，需 !important） */
  #endHint div { font-size: 2.6vh !important; }

  /* 竖屏旋转提示 */
  #rotateTip { font-size: 2.34vh; gap: 1.82vh; }
  #rotateTip .rot-icon { width: 6vh; height: 6vh; }

  /* 联机大厅（net-*） */
  .net-wrap { width: min(720px, 94vw); margin: 5vh auto; padding: 3.1vh; }
  .net-wrap h2 { font-size: 2.86vh; letter-spacing: 0.52vh; margin: 0 0 2.3vh; }
  .net-wrap h3 { font-size: 2.08vh; margin: 2.3vh 0 1vh; }
  .net-wrap button { font-size: 1.82vh; padding: 1.04vh 2.34vh; }
  .net-wrap textarea { font-size: 1.56vh; height: 11.7vh; }
  .net-status { font-size: 1.69vh; }
  .net-field > label { font-size: 1.95vh; }
  .net-field input { font-size: 2.08vh; width: min(240px, 60vw); }
  .room-code { font-size: 3.91vh; letter-spacing: 1.04vh; }

  /* 异地大厅（rl-*） */
  .rl-card { width: min(480px, 92vw); padding: 5.2vh 5.7vh; }
  .rl-title { font-size: 2.6vh; letter-spacing: 0.78vh; margin: 0 0 4.2vh; }
  .rl-label { font-size: 1.69vh; width: 6.25vh; }
  .rl-input { font-size: 1.95vh; padding: 1.17vh 1.56vh; }
  .rl-btn { font-size: 1.69vh; padding: 1.17vh 2.08vh; }
  .rl-btn.ghost { padding: 1.04vh 1.82vh; }
  .rl-code { font-size: 2.86vh; letter-spacing: 0.78vh; }
  .rl-status { font-size: 1.69vh; }
  .rl-enter { font-size: 1.95vh; padding: 1.69vh; letter-spacing: 0.78vh; }
  .rl-hint { font-size: 1.43vh; }
  .rl-tab { font-size: 1.82vh; padding: 1.43vh 0; }
  .rl-btn.wide { padding: 1.43vh 0; }

  /* 帽子选择（hp-*） */
  .hp-card { padding: 4.2vh 5.2vh; }
  .hp-title { font-size: 2.08vh; letter-spacing: 0.65vh; }
  .hp-name { font-size: 1.82vh; }
  .hp-cell { width: 6.77vh; height: 6.77vh; }
  .hp-cell img { width: 5.73vh; height: 5.73vh; }
  .hp-btn { font-size: 1.82vh; padding: 1.17vh 3.39vh; letter-spacing: 0.52vh; }
}