/* The light on top of the car */
.police-car .light {
  /* animation: police-flash 0.61s infinite alternate; */
}

/* The main body of the car */
.police-car {
  /* Animate a drop-shadow to simulate a glow from the light */
  /* animation: car-glow 0.61s infinite alternate; */
  z-index: 999;
}

/* Keyframes for the light flashing from red to orange */
@keyframes police-flash {
  from {
    fill: red;
    /* ADDED: A red glow for the light source itself */
    filter: drop-shadow(0.5em 0 0.5em red);
  }
  to {
    fill: blue;
    /* ADDED: An orange glow for the light source itself */
    filter: drop-shadow(0.5em 0 0.5em blue);
  }
}

/* Keyframes for the car's glow, matching the light's colors */
@keyframes car-glow {
  from {
    /* A red glow with 1em blur cast onto the car */
    filter: drop-shadow(0 0 0.5em rgba(255, 0, 0, 0.752));
  }
  to {
    /* An orange glow with 1em blur, matching the light */
    filter: drop-shadow(0 0 0.5em rgba(0, 0, 255, 0.775));
  }
}
.character-container{
    position: relative;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    justify-items: center;
    border-radius: 50%;
    overflow: visible;
    will-change: transform;
    transform: translateZ(0);
}
.character-container img {
    image-rendering: auto;
}
/* 图片类帽子（黑帽/礼帽）用 <img> 渲染，需与 WhiteHat 的内联 <svg>（被 .character-container svg 块级化）保持一致：
   块级 + 铺满 + contain。这里只做兜底，不改 transform，避免覆盖 .choose-hat-role 的缩放 */
.character-container .hat-img {
    display: block;
    -o-object-fit: contain;
       object-fit: contain;
}
.character-body-clip {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}
/* 主题角色棋子：外壳仍是 .character-container，尺寸优先由各处的容器规则给出
   （.player-bannner-icon 2.5em / .notice-entry 1em / .winner-container 4rem …）。
   这里只用最朴素的 1em 兜底：有些地方原本靠内联 svg 的固有尺寸把容器撑开，
   换成 <img> 后会塌成 0 宽高。
   ⚠️ 刻意不用 aspect-ratio / min-*：部分 WebView 下 aspect-ratio 与 flex 容器组合
   会把元素算成 0（棋盘上表现为「主题角色不见了」）。棋盘棋子的真实尺寸来自
   .character / .character-scale 的 .character-container 规则，特异性更高，不受这里影响。
   主题角色的 1.2 倍基准缩放由组件内联写在 .character-body-clip 的 transform 上
   （1.2 倍是「圆底 + 头像」一起放大，且不参与布局），这里不要给 transform 兜底，
   否则会跟棋盘当前玩家的 active-pulse 动画抢同一个属性。 */
.character-token {
    width: 1em;
    height: 1em;
}
.body-wrapper svg{
    width: 100%;
    height: 100%;
}
.trade-final-panel.bid-sell {}

.trade-final-panel.death-trap-panel {
  background-image: linear-gradient(to bottom right, #344881, #2d1e3a);
  box-shadow: 0 0 15px rgba(180, 40, 40, 0.25), 0 0 30px rgba(140, 30, 30, 0.15);
}

/* 延期结算面板（mortgage/合约/借贷事件共用） */
.trade-final-panel.trade-deferred-panel {
  background-image: linear-gradient(to bottom right, #344881, #3a341e);
  box-shadow: 0 0 15px rgba(200, 160, 40, 0.2), 0 0 30px rgba(160, 120, 30, 0.12);
}

.pending-loan-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.pending-loan-countdown {
  font-size: 0.7em;
  color: #ffd700;
  white-space: nowrap;
  line-height: 1;
}

.bid-sell-players {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}


/* 单个结果行的容器 */
.bid-sell-player.final {
  /* 动画初始状态：透明且在下方 */
  opacity: 0;
  transform: translateY(20px);

  /* 定义动画效果：当 opacity 或 transform 变化时，平滑过渡 */
  /* 你可以根据喜好调整这里的时长和缓动函数 */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;

  /* 保持 flex 布局（如果 bid-sell-player 是 flex 容器） */
  display: flex;
  align-items: center;
  width: 100%;
  /* 根据需要调整行间距 */
}

/* 动画触发后的最终状态 */
.bid-sell-player.final.visible {
  opacity: 1;
  transform: translateY(0);
}

.bid-sell-player.final .name {
  margin: 0 10px;
  flex-grow: 1;
  /* 让名字占据多余空间 */
}

.bid-sell-player.final .money {
  font-weight: bold;
}

.bid-sell-player.final .crown {
  display: flex;
  flex-direction: row;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, -50%);
  height: 1.4em;
  width: 1.4em;
}

.bid-sell-player.final .crown svg {
  width: 100%;
  height: 100%;
  transform: rotate(30deg);
}

.bid-sell-player {
  box-sizing: border-box;
  height: 3.19em;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.2em 1em;
  background-color: #aeaab714;
  border-radius: 0.5em;
  position: relative;
}

.bid-sell-player.my {}

/* 回放：竞拍窗口里的只读占位（回放没有出价交互，等结算帧给出结果） */
.bid-sell-player.replay-hint {
  justify-content: center;
  color: #ffffffc7;
}

.bid-sell-player.replay-hint .name {
  margin-left: 0;
  font-weight: 300;
  letter-spacing: 0.05em;
}

/* 头像位：宽高必须写成**同一个确定值**（2.2em ≈ 行高 3.19em 的 70%）。
   不写 width 只写 height 会出事：自定义皮肤的角色棋子同时带 .character-token
   的 width:1em，宽就成了 1em、高却是 70% ⇒ 圆底被压成「竖长、两边窄」的椭圆
   （盲拍结算行里最明显）。
   这里也刻意不用 aspect-ratio / min-* 兜底 —— 部分 WebView 下它与 flex 组合
   会把尺寸算成 0；写死等值的 em 最稳，和项目里其他头像位口径一致。 */
.bid-sell-player .character-container {
  width: 2.2em;
  height: 2.2em;
  flex: 0 0 auto;
}

.bid-sell-player .name {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  align-items: center;
  margin-left: 0.5em;
  font-size: 1.2em;
  font-family: Segoe UI, sans-serif, Segoe UI Emoji;
  font-weight: 300;

}

.bid-sell-player .money {
  font-size: 1.2em;
  display: flex;
  align-items: center;
  margin-left: auto;
  color: white;
  padding-left: 0.5em;
}

.final-trade-column.bid-sell-city {
  justify-content: center;
}

.mortgage-money {
  font-size: 1.4em;
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
  color: #ffffffcf;
  text-align: center;
}

.trade-explain {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 5px 0;
  align-content: center;
  text-align: center;
  font-size: 1.2em;
  color: #9c9f9f;
  line-height: 1;
  font-family: Segoe UI, sans-serif, Segoe UI Emoji;
  font-weight: 300;
}

.trade-explain span,
.trade-explain div {
  display: inline-block;
}

.trade-explain div {
  height: 1em;
  width: 1em;
}

.trade-explain img {
  height: 1em;
}

/* 「即将垄断」提示（共享模式下可能同时列出两位玩家）：
   头像组件内部是 display:block 的 div，如果直接放在 inline 流里会把「头像」和「昵称」拆成两行。
   因此把每个「头像 + 昵称」整体包成 inline-flex 单元，并在单元内部垂直居中；
   外层保持 flex + wrap：多人时整体之间自然换行，
   头像 / 国旗都靠 align-items: center 与文字对齐，不再依赖 vertical-align 的基线计算（会下偏）。 */
.trade-explain.monopoly-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* 行高贴近字形高度，头像(1em)与文字盒中心才对得齐；换行间距交给 row-gap */
  line-height: 1.2;
  row-gap: 0.25em;
}

.trade-explain.monopoly-hint .monopoly-hint-person {
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
  white-space: nowrap;
  margin: 0 0.2em;
}

/* 头像 / 国旗作为 flex 子项参与居中，并禁止被压缩 */
.trade-explain.monopoly-hint .character-container,
.trade-explain.monopoly-hint img {
  flex: 0 0 auto;
}

.trade-outdated {
  color: rgb(255, 63, 63);
}

.trade-fianl-title .trade-explain {
  font-size: 0.7em;
}

.trade-explain.death-trap-all-pay-hint {
  font-weight: 600;
  color: #ffd700;
}

.trade-city-lvl-icon {
  display: flex;
  flex-direction: row;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(0, -50%);
  height: 16px;
  width: 16px;
  gap: 5px;
}

.trade-city-lvl-icon img,
.trade-city-lvl-icon svg {
  height: 100%;
  transform: rotate(30deg);
}

/* 皮肤自定义的等级图标保持正立：原版房子那 30° 倾斜是素材自带的视觉风格，
   换成人像/emoji/上传图后再倾斜就不对了 */
.trade-city-lvl-icon .trade-lvl-skin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 100%;
}

.trade-city-lvl-icon .trade-lvl-skin,
.trade-city-lvl-icon .trade-lvl-skin img {
  transform: none;
}

.trade-city-lvl-icon .mortgage-lock {
  color: #ffb151;
}

.trade-window-bank {
  width: 30px;
  height: 30px;
}

.trade-window-bank svg {
  width: 100%;
  height: 100%;
}

.trade-column-bank {
  width: 2.5em;
  height: 2.5em;
}

.trade-column-bank svg {
  width: 100%;
  height: 100%;
}

/* 手机端：trade banner 里存钱（银行）图标与借款图标大小不一致，
   统一用与借款图标相同的 ui-em 尺寸（界面控件基准，不随棋盘格数缩水），
   让存钱图标变大且保持一致（不影响交易窗口） */
@media (max-width: 600px) {
  .trade-info-bannner .trade-column-bank {
    width: calc(2 * var(--ui-em));
    height: calc(2 * var(--ui-em));
  }
}

/* 双向虚线箭头：颜色取 currentColor，形状来自 double_head_dashed_arrow.svg（mask 由 JS 注入） */
.trade-arrow-double {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.dashb-trade-banner-flex {
  display: flex;
  flex-direction: row;
  flex: 1 0 2.5em;
  align-items: center;
}

.inspect-container {
  position: relative;
  right: 0;
  z-index: 100;
  border-radius: inherit;
  display: flex;
  flex-direction: row;
  height: 100%;
  width: calc(1*var(--center-w));
  ;
  opacity: 0.5;
}

.inspect-icon {
  margin: 0 0.4em;
  display: flex;
  position: relative;
}


.inspect-icon svg {
  position: relative;
  width: 1.6em;
  height: 100%;
  transform: scaleX(-1);
  fill: #baafd4;
  z-index: 10;
  animation: eye-look 2s ease-in-out infinite;
}

@keyframes eye-look {
  0% {
    transform: scaleX(1);
    /* Look to the left */
  }

  94% {
    transform: scaleX(1);
    /* Look to the right */
  }

  95% {
    transform: scaleY(0.1);
    /* Close eye */
  }

  100% {
    transform: scaleY(0.1);
    /* Close eye */
  }
}

/* 多方交易：左右两列顶部行对齐 —— 头像尺寸与左侧单头像(2.5em)一致，行高固定并垂直居中 */
.multi-trade-column .trade-column-name {
  align-items: center;
  height: 2.5em;
}

/* 多方头像：正常流负边距重叠（不使用绝对定位 trick），容器宽度=实际堆叠宽度，无溢出、与下方元素对齐 */
.multi-avatar-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.multi-avatar-item {
  width: 2.5em;
  height: 2.5em;
  margin-left: -1.2em;
}

.multi-avatar-item:first-child {
  margin-left: 0;
}

/* 多方交易：已拒绝玩家的头像置灰（应用于 ActionAvatars 的 audience-locator 及多方列的 multi-avatar-item） */
.avatar-grayed {
  filter: grayscale(1);
  opacity: 0.55;
}

/* 多方交易：已拒绝标记 */
.trade-declined {
  color: #ff8a8a;
}

.z-index-999 {
  z-index: 999;
}

.z-index-9 {
  z-index: 9;
}

.desktop-money.rc-slider {
  margin: 0.5em 1em 2em 1em;
  width: 90%;
}

.desktop-wheel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.desktop-slider-wrapper {
  width: 100%;

}

.desktop-slider-wrapper .slider {
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  height: 8px;
  background: #ddd;
  border-radius: 5px;
  outline: none;
}

.desktop-slider-wrapper .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.desktop-slider-wrapper .slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

/* NEW: Flex container for the min/max labels */
.desktop-slider-wrapper .labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  /* Space between slider and text */
  padding: 0 2px;
  /* Small padding to align with slider ends */
  font-size: 0.85em;
  font-weight: 500;
  color: #555;
}

/* Main container for the whole component */
.currency-input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  padding: 1em;
  max-width: 320px;
  margin: auto;
  border-radius: 8px;
  box-sizing: border-box;
  width: 100%;
}

/* Container for the slider and its input display */
.slider-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Wrapper for the input field to position the '$' prefix */
.input-wrapper {
  position: relative;
  width: 50%;
  max-width: 150px;
  margin-bottom: 10px;
  /* Add some space between input and slider */
}

.input-wrapper::before {
  content: '$';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  pointer-events: none;
}

.currency-input-field {
  width: 100%;
  height: 3em;
  box-sizing: border-box;
  padding: 10px 10px 10px 30px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  text-align: center;
  padding-left: 20px;
}

/* NEW: Wrapper for slider and labels */
.slider-and-labels-wrapper {
  width: 90%;
  transform: translate(0, -1em);
}

.money-slider {
  --thumb-size: 10px;
  -webkit-appearance: none;

  width: 100%;
  cursor: default;
  -moz-appearance: none;
       appearance: none;
  height: 6px;
  /* Slightly thinner track */
  background: none;
  border-radius: 3px;
  outline: none;
  /* Prevent user interaction */
}

.money-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--thumb-size);
  /* Just slightly larger than 6px track */
  height: var(--thumb-size);
  background: #eeeeee;
  border-radius: 50%;
  border: none;
  transform: translate(0, -2px);
  /* Optional for visibility */
  /* Align thumb vertically */
}

.money-slider::-moz-range-thumb {
  width: var(--thumb-size);
  height: var(--thumb-size);
  background: #eeeeee;
  border-radius: 50%;
  border: none;
  transform: translate(0, -2px);
}

/* Firefox track fix */
.money-slider::-moz-range-track {
  background: linear-gradient(to right,
      #eeeeee 0%,
      #eeeeee calc(var(--slider-progress) * (100% - var(--thumb-size)) + (var(--thumb-size) / 2)),
      #68646e calc(var(--slider-progress) * (100% - var(--thumb-size)) + (var(--thumb-size) / 2)),
      #68646e 100%);
  height: 6px;
  border-radius: 3px;
}

.money-slider::-webkit-slider-runnable-track {
  background: linear-gradient(to right,
      #eeeeee 0%,
      #eeeeee calc(var(--slider-progress) * (100% - var(--thumb-size)) + (var(--thumb-size) / 2)),
      #68646e calc(var(--slider-progress) * (100% - var(--thumb-size)) + (var(--thumb-size) / 2)),
      #68646e 100%);
  height: 6px;
  border-radius: 3px;
}


/* Unfilled color */
/* Optional: disabled pointer events to prevent user interaction */
.money-slider:disabled {
  pointer-events: none;
}

/* 可扩展上限的slider：原滑块仅作展示，覆盖层接收指针事件自行计算金额
   （原滑块拖动到上限后值会被钳制，无法继续无缝扩展） */
.money-slider-zone {
  position: relative;
  width: 100%;
}

.money-drag-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  cursor: pointer;
  touch-action: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* NEW: Flex container for the min/max labels */
.slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  /* Space between slider and text */
  padding: 0 2px;
  /* Small padding to align with slider ends */
  font-size: 0.85em;
  font-weight: 500;
  color: #cabbea;
}

.button-row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 1em;
}

.adjust-button {
  flex: 1;
  padding: 0.5em 0;
  font-size: 1em;
  cursor: pointer;
  border: none;
  border-radius: 0.4em;
  color: #ffffffb3;
  background-color: #7547e0;
  transition: background-color 0.2s;
}

.adjust-button:hover {
  filter: brightness(1.2);
}

@media (max-width: 600px) {
  .input-group {
    font-size: 1.4em;
  }

  .bid-sell-player {
    padding: 0.6em 1em;
    font-size: 1.2em;
    height: 4.2em;
  }

  .adjust-button {
    font-size: 1.4em;
    padding: 0.8em 0;
  }


  .trade-city-lvl-icon {
    height: 12px;
  }

  .inspect-icon svg {
    width: 1.2em;
  }

}

.trade-history-modal {
  background-color: #352565;
  border-radius: 1em;
  max-width: 17em;
  max-height: 70vh;
  width: calc(0.9 * var(--center-w));
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.4em 2em rgba(0, 0, 0, 0.8);
  color: #fff;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 500;
}

.trade-history-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.2em 1.5em;
  border-bottom: 0.05em solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  position: relative;
}

.trade-history-header h2 {
  margin: 0;
  color: #fff;
  font-size: 1.2em;
  font-weight: 300;
}

.trade-history-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8em;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  transition: color 0.2s;
  position: absolute;
  right: 0.4em;
  top: 50%;
  transform: translateY(-50%);
}

.trade-history-close:hover {
  color: rgba(255, 255, 255, 0.7);
}

.trade-history-body {
  padding: 0.8em;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.trade-history-body::-webkit-scrollbar {
  width: 0.4em;
}

.trade-history-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.2em;
}

.trade-history-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.2em;
}

.trade-history-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.trade-history-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  padding: 2em;
  font-size: 0.95em;
}

.trade-history-record {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45em 0.8em;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 0.6em;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.trade-history-record .player-bannner-icon,
.trade-history-record .trade-history-name,
.trade-history-record .trade-history-arrow {
  margin-right: 0.5em;
}

.trade-history-record > :last-child {
  margin-right: 0;
}

.trade-fianl-title .trade-history-round-line {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.7em;
  margin-top: 0.3em;
}

.trade-history-record:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.trade-history-record .player-bannner-icon .character-container {
  width: 2em;
  height: 2em;
}

.trade-history-record .player-bannner-icon>svg {
  width: 2em;
  height: 2em;
}

.trade-history-name {
  color: #fff;
  font-size: 0.85em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 5em;
  text-align: left;
}

.trade-history-arrow {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1em;
  flex-shrink: 0;
}

.trade-final-panel.trade-history-dim {
  background: #2a1d4c;
}

/* Contract delay selector (in ModifyTradeColumn) */
.contract-delay-selector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  margin-bottom: 2em;
  font-size: 0.95em;
}

.delay-adjust-row {
  display: flex;
  gap: 0.5em;
  justify-content: center;
}

.contract-delay-selector .adjust-button {
  flex: none;
  width: 3.7em;
  height: 1.4em;
  padding: 0.1em 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
}

@media (max-width: 600px) {
  .contract-delay-selector .adjust-button {
    height: 2.2em;
  }
}

.delay-value {
  color: #ffffffcf;
  font-size: 1.1em;
  white-space: nowrap;
}

/* Contract delay display (in CheckTradeColumn) */
.contract-delay-display {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.2em 0;
  font-size: 1.1em;
  color: #9c9f9f;
  white-space: nowrap;
}


.trade-item-row {
  position: relative;
  align-items: center;
  background: transparent;
  border: 1px solid hsl(37.04deg 66.2% 67.09% / 24%);
  border-radius: .5em;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  line-height: 1em;
  padding: 0.6em;
  text-align: initial;
  transition: .2s;
  width: 100%;
  font-size: 1.2em;
}

@media (max-width:600px) {

  .trade-item-row {
    padding: 1em 0.6em;
  }

}

.trade-item-row:hover {
  filter: brightness(1.2);
}

.trade-item-row-selected {
  background: #6647e0;
  border-color: #6647e0;
  color: #fff;
}

.trade-item-row-selected:hover {
  background: #6647e0;
}

/* 租借卡片：虚线与徽标标识，参照 .trade-city-leased */
.trade-item-row-leased {
  border: 2px dashed;
  border-color: rgb(255 255 255 / 36%) !important;
}

.trade-item-row-lease-badge {
  font-size: 0.8em;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 0.3em;
  margin: 0 0.4em;
  padding: 0.1em 0.3em;
  flex-shrink: 0;
  white-space: nowrap;
}

/* 租借中/欠还中被锁定的卡片：置灰不可选 */
.trade-item-row-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.trade-item-row-disabled:hover {
  filter: none;
}

.trade-item-row-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 1.2em;
  width: 1.2em;
  margin: 0 0.5em 0 0;
  position: relative;
}

.trade-item-row-icon svg,
.trade-item-row-icon img {
  width: 100%;
  height: 100%;
  color: #5bf;
}

.trade-item-row-wrap {
  position: relative;
  width: 100%;
}

.trade-item-row-front {
  position: relative;
  z-index: 1;
}

.trade-item-row-stacked {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none;
}

.trade-item-row-stack-2 .trade-item-row-front {
  margin-left: .25em;
  width: calc(100% - .25em);
}

.trade-item-row-stack-2 .trade-item-row-stacked {
  left: 0;
  top: 0;
  width: calc(100% - .25em);
  height: 100%;
}

.trade-item-row-stack-3 .trade-item-row-front {
  margin-left: .5em;
  width: calc(100% - .5em);
}

.trade-item-row-stack-3 .trade-item-row-stacked:nth-child(1) {
  left: .25em;
  top: 0;
  width: calc(100% - .5em);
  height: 100%;
}

.trade-item-row-stack-3 .trade-item-row-stacked:nth-child(2) {
  left: 0;
  top: 0;
  width: calc(100% - .5em);
  height: 100%;
}

.trade-item-row-name {
  flex: 1;
  font-size: 1em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trade-item-row-count {
  font-size: 1em;
  color: #ffd700;
  font-weight: bold;
  min-width: 1.2em;
  text-align: center;
  flex-shrink: 0;
}

.trade-item-list {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  padding: 0.3em 0.5em;
  width: 100%;
  box-sizing: border-box;
}

.trade-item-list .trade-item-row {
  cursor: default;
}

.trade-item-list .trade-item-row:hover {
  filter: none;
}

/* Delayed contract column background: distinguish unpaid vs due vs paid */
.final-trade-column.contract-delay-unpaid-column {
  background: rgb(0 0 0 / 26%);
  border-radius: 1em;
}

.final-trade-column.contract-delay-due-column {
  /* background: rgb(255 215 0 / 26%); */
  background: rgb(128 128 128 / 26%);
  border-radius: 1em;
}

.final-trade-column.contract-delay-paid-column {
  border-radius: 1em;
}

/* Contract due warning (in CheckTrade title) */
.contract-due-warning {
  color: #ffd700 !important;
}

/* Delay highlight: bold + background for "本" or number */
.delay-highlight {
  font-weight: 700;
  background: rgba(255 255 255 / 12%);
  padding: 0 0.3em;
  border-radius: 0.25em;
  margin-right: 0.5em;
}
/* 「只填了现金」发送前的居中二次确认（只确认，不拦截发送）。
   mask 覆盖整个 trade-final-panel，box 居中显示。 */
.trade-cash-confirm-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 12, 30, 0.72);
  border-radius: 0.8em;
  z-index: 6;
}

.trade-cash-confirm-box {
  width: 66%;
  max-width: 26em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em;
  padding: 1.2em 1.3em;
  border-radius: 0.5em;
  background: var(--c-g-panel);
  box-shadow: 0.3em 0.3em 3em #281b32, -0.3em -0.3em 3em #281b32;
  text-align: center;
}

.trade-cash-confirm-title {
  font-size: 1.25em;
  color: #ddd7ec;
}

.trade-cash-confirm-note {
  font-size: 1em;
  line-height: 1.5;
  font-weight: 300;
  color: #ddd7ecb0;
}

.trade-cash-confirm-buttons {
  display: flex;
  justify-content: center;
  gap: 1.4em;
  margin-top: 0.2em;
}

.trade-cash-confirm-buttons .button {
  min-width: 6em;
  font-size: 1em;
  padding: 0.4em 0.9em;
}

.trade-cash-confirm-ok {
  background-image: linear-gradient(to left top, rgb(177 106 20), rgb(189 141 30));
}

/* ==================== 「如何交易」新手帮助 ====================
   取代原来「金钱 / 资产 / 你给出」三个 Popover：萌新（有效局数 ≤3）在交易面板
   左上角有常驻按钮，点开标题栏下方出现一个**带框**的帮助条，三颗居中的绿按钮 +
   右上角 ×。点某颗 → 它变黄带辉光（静态，不呼吸），另两颗照旧摆着（可直接换），
   下方给一句注释，同时两列里对应的「钱 / 资产」亮起并摆出示意内容；
   × 或左上角按钮收起时，演示数据一并清空（不再留绿框）。 */

/* 左上角常驻按钮 */
.trade-howto-toggle {
  position: absolute;
  left: 0.8em;
  top: 0.7em;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.4em;
  max-width: 42%;
  padding: 0.5em 0.95em;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  color: #e8f4ff;
  font-size: 1em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: .18s;
}

.trade-howto-toggle svg {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
}

.trade-howto-toggle:hover {
  background: rgb(255 255 255 / 16%);
}

.trade-howto-toggle.is-open {
  border-color: #2fd08a;
  background: rgb(20 193 135 / 16%);
  color: #b8ffe0;
}

/* 帮助条（标题栏下方）：一个带框的整块 —— 玩家看到边框就知道「这是一整块」，
   右上角的 × 就是「把这块收起来」，不必去猜左上角那颗「如何交易」还能再点一次 */
.trade-howto {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.7em 0.9em 0.6em;
  border: 1px solid rgb(47 208 138 / 35%);
  border-radius: 0.7em;
  background: rgb(20 193 135 / 8%);
  box-shadow: inset 0 0 0.9em rgb(20 193 135 / 8%);
}

/* 右上角关闭：浮在框的角上（略出边框），不吃按钮那一行的位置，
   窄面板把三颗按钮挤成两行时也不会压到字 */
.trade-howto-close {
  position: absolute;
  top: -0.7em;
  right: -0.5em;
  width: 1.7em;
  height: 1.7em;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 50%;
  background: #232c44;
  color: #dfe8ff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0.2em 0.5em rgb(0 0 0 / 45%);
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.trade-howto-close:hover {
  color: #fff;
  background: #33405f;
  border-color: rgb(255 255 255 / 45%);
}

.trade-howto-close svg {
  width: 1.15em;
  height: 1.15em;
}

.trade-howto-btns {
  display: flex;
  flex-wrap: wrap;
  /* 三颗按钮整体居中：原来靠左，在宽面板里像没对齐 */
  justify-content: center;
  gap: 0.6em;
}

.trade-howto-btn {
  flex: 0 0 auto;
  padding: 0.5em 1.6em;
  border: 0;
  border-radius: 999px;
  font-size: 1em;
  font-weight: 700;
  color: #05321f;
  background-image: linear-gradient(180deg, #38e39a, #14c187);
  box-shadow: 0 0.15em 0.5em rgb(20 193 135 / 35%);
  cursor: pointer;
  transition: .18s;
}

.trade-howto-btn:hover {
  filter: brightness(1.08);
}

/* 点开的那颗：黄底 + 一圈静态辉光。**不呼吸**——三颗并排时呼吸会一直在余光里跳，
   读注释反而费劲；另外两颗保持绿色、照旧可点，想换玩法直接点就行 */
.trade-howto-btn.is-active {
  color: #3a2a00;
  background-image: linear-gradient(180deg, #ffe15c, #ffc400);
  box-shadow: 0 0 0 0.12em rgb(255 196 0 / 28%), 0 0 1.1em rgb(255 200 0 / 65%);
}

.trade-howto-note {
  padding: 0.45em 0.8em;
  border-left: 0.18em solid #ffc400;
  border-radius: 0.5em;
  background: rgb(255 255 255 / 7%);
  color: #f2eefc;
  font-size: 0.82em;
  line-height: 1.45;
}

/* 演示高亮：钱 / 资产整块描一圈会呼吸的绿光，与三颗绿按钮同一色系 */
.trade-howto-glow {
  border-radius: 0.6em;
  box-shadow: 0 0 0 2px #2fd08a, 0 0 0.9em rgb(47 208 138 / 45%);
  animation: tradeHowToGlow 1.6s ease-in-out infinite;
}

@keyframes tradeHowToGlow {
  50% {
    box-shadow: 0 0 0 2px #6bffc0, 0 0 1.4em rgb(107 255 192 / 65%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trade-howto-glow {
    animation: none;
  }
}

/* 演示时真实输入框照旧渲染、只把它藏起来：它专门负责撑住这一块的高度。
   演示内容不能改变「钱区」的尺寸，否则对面那一列的资产会被顶下去/抬上来，两列错行。
   藏起来而不是卸掉，桌面（输入框 + 滑块）和移动端（滑块 + ±10/±100 按钮）都自动对齐。 */
.trade-column-money.trade-howto-money-demo > *:not(.trade-howto-money) {
  visibility: hidden;
  pointer-events: none;
}

/* 演示用的钱：绝对定位铺满整块钱区（桌面含滑块、移动端含 ±按钮），数字居中。
   框尺寸 = 对面那一列的真实输入框，绿框自然一样大，两列资产严格同高。 */
.trade-howto-money {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  font-size: 1.6em;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0 0.4em rgb(47 208 138 / 60%);
}

.user-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-panel {
    background: #1a1a2e;
    border: 1px solid #2a2a4e;
    border-radius: 16px;
    width: 380px;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    color: #e0e0e0;
    position: relative;
}

.user-panel-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 46, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

.user-panel-loading-overlay .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #2a2a4e;
    border-top-color: #66c0f4;
    border-radius: 50%;
    animation: rotate-spinner 1s linear infinite;
}

.user-panel-header {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    border-bottom: 1px solid #2a2a4e;
    gap: 12px;
}

.user-panel-avatar {
    font-size: 36px;
    color: #66c0f4;
    background: #0d0d1a;
    padding: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.user-panel-info {
    flex: 1;
    min-width: 0;
}

.user-panel-username {
    font-size: 18px;
    font-weight: 600;
}

.user-panel-nickname {
    font-size: 13px;
    color: #aaa;
    margin-top: 2px;
}

.user-panel-steamid {
    font-size: 12px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.steam-icon-small {
    font-size: 12px;
    color: #66c0f4;
}

.user-panel-close {
    font-size: 18px;
    color: #888;
    cursor: pointer;
    flex-shrink: 0;
}

.user-panel-close:hover {
    color: #fff;
}

.user-panel-section {
    padding: 16px 20px;
    border-bottom: 1px solid #2a2a4e;
}

.user-panel-section:last-child {
    border-bottom: none;
}

.user-panel-section-title {
    font-size: 13px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-panel-btn {
    width: 100%;
    padding: 10px;
    background: #2a475e;
    border: 1px solid #4a6a7e;
    border-radius: 8px;
    color: #e0e0e0;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s;
}

.user-panel-btn:hover {
    background: #3a5a7e;
}

.user-panel-btn.small {
    width: auto;
    padding: 8px 16px;
    font-size: 13px;
    display: inline-block;
}

.user-panel-btn.cancel {
    background: #3a2a2a;
    border-color: #5a4a4a;
}

.user-panel-btn.cancel:hover {
    background: #5a3a3a;
}

.reset-password-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reset-password-form .entry-input {
    width: 100%;
    padding: 8px 10px;
    background: #0d0d1a;
    border: 1px solid #333;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}

.reset-password-form .entry-input:focus {
    border-color: #66c0f4;
}

.reset-password-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.illegal-input-user {
    font-size: 12px;
    color: #e74c3c;
}

.success-input {
    font-size: 12px;
    color: #2ecc71;
}

/* ===== 激活码激活区（右上角用户信息弹出窗口） ===== */
.user-panel-activation {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-panel-activation-title {
    font-size: 13px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #d8a94f;
}

.user-panel-activation-input-row {
    display: flex;
    gap: 8px;
}

.user-panel-activation-input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    background: #0d0d1a;
    border: 1px solid #6647e0;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}

.user-panel-activation-input:focus {
    border-color: #66c0f4;
}

.user-panel-activation-btn {
    padding: 8px 14px;
    background: #17338f;
    border: 1px solid #66c0f4;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.user-panel-activation-btn:hover {
    background: #2a475e;
}

.user-panel-activation-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: #6d4c1f;
    border: 1px solid #ffb347;
    border-radius: 6px;
    color: #ffd28a;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.user-panel-activation-buy:hover {
    background: #7d5c2f;
}

/* ===== 激活/权益状态清单 ===== */
.user-panel-entitlements {
    display: flex;
    flex-direction: column;
    font-size: 9em;
    gap: 0.5em;
}

.user-panel-entitlement-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 0.75em;
    background: #0d0d1a;
    border: 1px solid #2a2a4e;
    border-radius: 0.5em;
    font-size: 0.8125em;
}

.user-panel-entitlement-row.active {
    border-color: #2ecc71;
}

.user-panel-entitlement-row.inactive {
    opacity: 0.55;
}

.user-panel-entitlement-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: #66c0f4;
}

.user-panel-entitlement-row.active .user-panel-entitlement-icon {
    color: #2ecc71;
}

.user-panel-entitlement-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-panel-entitlement-status {
    flex-shrink: 0;
    font-weight: 600;
    color: #888;
}

.user-panel-entitlement-row.active .user-panel-entitlement-status {
    color: #2ecc71;
}
:root {
    --toastify-color-warning: #29203e !important;
}

.Toastify__toast-body {

    font-size: 1rem;
}

.lobby-top {
    transition: opacity 0.5s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.46vw;
}

/* 宽高比 > 440/924 → 切换为 0.32vh */
@media (min-aspect-ratio: 440/924) {
    .lobby-top {
        font-size: 0.24vh;
    }
}

/* 常驻公告横幅 */
@keyframes announcement-banner-in {
    from {
        opacity: 0;
        transform: translate(-50%, -0.7em);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.announcement-banner {
    position: absolute;
    top: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    /* 需高于大厅内容层（标题/开始按钮 z-index:110），低于各类弹窗（120/150/200/500） */
    z-index: 115;
    box-sizing: border-box;
    width: 92vw;
    max-width: 46em;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(120% 130% at 0% 0%, rgba(255, 196, 84, 0.18) 0%, rgba(255, 196, 84, 0) 55%),
        linear-gradient(160deg, #131d45 0%, #0c1332 55%, #080d24 100%);
    border: 1px solid rgba(122, 150, 235, 0.32);
    border-radius: 0.9em;
    padding: 0.9em 1.05em 0.55em;
    box-shadow:
        0 0.9em 2.2em rgba(0, 0, 0, 0.45),
        inset 0 0.12em 0 rgba(255, 255, 255, 0.08),
        0 0 1.6em rgba(80, 130, 255, 0.16);
    font-size: 15px;
    color: #dfe7f7;
    pointer-events: auto;
    overflow: hidden;
    animation: announcement-banner-in 0.35s ease-out;
}

.announcement-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.22em;
    background: linear-gradient(90deg, #ffcf6b 0%, #ff9a3c 34%, #ff5f8f 68%, #8a6bff 100%);
}

.announcement-banner-header {
    display: flex;
    align-items: center;
    padding-bottom: 0.55em;
    border-bottom: 1px solid rgba(140, 165, 235, 0.18);
}

.announcement-banner-icon {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.42em;
    margin-right: 0.6em;
    border-radius: 50%;
    color: #241436;
    background: linear-gradient(150deg, #ffd884 0%, #ffb347 58%, #ff8f2e 100%);
    box-shadow: 0 0.22em 0.5em rgba(255, 150, 40, 0.35);
    flex-shrink: 0;
}

.announcement-banner-title {
    font-size: 1.08em;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffffff;
    text-shadow: 0 0.1em 0.24em rgba(0, 0, 0, 0.5);
}

.announcement-banner-items {
    display: flex;
    flex-direction: column;
    padding-top: 0.15em;
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.announcement-banner-item {
    position: relative;
    padding: 0.6em 2.75em 0.6em 1.15em;
}

.announcement-banner-item+.announcement-banner-item {
    border-top: 1px dashed rgba(140, 165, 235, 0.16);
}

.announcement-banner-item::before {
    content: '';
    position: absolute;
    left: 0.2em;
    top: 1.25em;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: linear-gradient(150deg, #ffd884, #ff8f2e);
    box-shadow: 0 0 0.5em rgba(255, 170, 60, 0.7);
}

.announcement-banner-text {
    color: #dfe7f7;
    font-size: 1em;
    line-height: 1.55;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
}

.announcement-banner-close {
    position: absolute;
    top: 0.42em;
    right: 0.42em;
    box-sizing: border-box;
    width: 2.2em;
    height: 2.2em;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 1em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: #a9b8dc;
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    transition: 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.announcement-banner-close-icon {
    width: 1em;
    height: 1em;
    pointer-events: none;
}

.announcement-banner-close:hover {
    color: #ffffff;
    background: rgba(255, 90, 120, 0.92);
    border-color: rgba(255, 130, 158, 0.9);
    box-shadow: 0 0.2em 0.6em rgba(255, 60, 100, 0.45);
}

.announcement-banner-close:active {
    transform: scale(0.88);
}

@media (max-width: 600px) {
    .announcement-banner {
        font-size: 14px;
        padding: 0.9em 0.9em 0.5em;
    }

    .announcement-banner-close {
        width: 2.4em;
        height: 2.4em;
    }
}


/* use shorter border to caculate em */
/* if use width, then font size = 1vw */
/* if use height, then font size = 0.3vh */
/* 竖屏 */
.center-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    width: 100vw;
    height: 100vh;
    /* 
    background-image: url("../resource/pics/lobby_background.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; */
}

/* 内容层亮度恢复动画 */
@keyframes dark-disappear {
    to {
        filter: brightness(1);
    }
}

/* 暗幕消失动画 */
@keyframes dark-disappear-bg {
    to {
        opacity: 0;
    }
}


.title-emerge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    position: relative;
    z-index: 110;
}

@keyframes title-emerge {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }

}

.show-up-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    margin-top: 0;
    transform: scale(1);
    z-index: 110;
    opacity: 1;
    font-size: 0.8em;
    height: 100vh;
    animation: scaleup .3s cubic-bezier(.25, 0, 0, 1);
    /* Initial hidden state */
}

@keyframes flyIn {
    0% {
        opacity: 0;
        transform: translateY(3rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.light {
    visibility: hidden;
    top: -60em;
    width: 400em;
    position: absolute;
    pointer-events: none;
    opacity: 0;
    z-index: 999;

    transform-origin: center top;
}

@keyframes light-flicker-on {
    0% {
        opacity: 0;
    }

    /* 突然通电 */
    8% {
        opacity: 1;
    }

    13% {
        opacity: 0.32;
    }

    /* 第二次，不那么猛 */
    22% {
        opacity: 0.75;
    }

    30% {
        opacity: 0.42;
    }

    /* 决定性亮起 */
    42% {
        opacity: 0.75;
    }

    /* 稳定前的小回落（关键） */
    65% {
        opacity: 0.65;
    }

    /* 常亮 */
    95% {
        z-index: 999;
    }

    100% {
        opacity: 1;
        z-index: 10;
    }
}

@keyframes light-spread {
    from {
        transform: scaleY(0.92);
    }

    to {
        transform: scaleY(1);
    }
}


.skyline {
    filter: brightness(1.2) contrast(1.1);
    bottom: -66em;
    position: absolute;
    pointer-events: none;
    z-index: 20;
}

.skyline img {
    width: 100%;
}

@media (orientation: portrait) {
    .skyline {
        width: 260em;
    }
}

.building1 {
    width: 2.9rem;
    position: absolute;
    top: 6.2rem;
    right: 21.1rem;
}

.building2 {
    width: 2rem;
    position: absolute;
    top: 8.2rem;
    right: 26.6rem;
}

.building3 {
    width: 3.6rem;
    position: absolute;
    top: 7.9rem;
    right: 16.1rem;
}

.building4 {
    width: 2.6rem;
    position: absolute;
    top: 9.4rem;
    right: 30.4rem;
}

@keyframes b {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(200px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

}

.skyWheel {
    width: 5rem;
    position: absolute;
    top: 9.4rem;
    right: 10.6rem;
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.SkylineMain {}

.lobby-background-emerge {}

@keyframes lobby-background-emerge {
    0% {
        opacity: 0;
        transform: scale(0.7);

    }

}

.lobby-title {
    line-height: 1;
    margin-top: 0.5em;
    font-size: 70em;
    font-weight: 600;
    z-index: 20;
    color: #ffffff;
    text-shadow: 0 0 0.1em rgba(255, 255, 255, .7), 0 0.07em 0 rgb(0 0 0 / 55%);
}

.lang-en .lobby-title {
    font-size: 50em;
}

.lobby-subtitle {
    height: -moz-fit-content;
    margin-bottom: 0.4em;
    font-size: 32em;
    font-weight: 600;
    z-index: 10;
    color: var(--c-title-sub);
    margin-top: -0.1em;
    text-shadow: 0 0.1em #12393ea3;
}

.lobby-subtitle-inner {
    /* transform: rotateX(-30deg); */
    transform-origin: bottom;
}

.title-shrink {
    font-size: 3rem;
    text-shadow: 0 0 18px rgba(255, 255, 255, .7), 0 5px 0 rgb(0 0 0 / 55%);
}

.subtitle-shrink {
    font-size: 1.5rem
}

.center-container .lobby-start {
    display: grid;
    grid-auto-flow: row;
    align-items: center;
    gap: 5em;
    justify-items: center;
    max-width: 100vw;

    z-index: 110;
    font-size: 0.8em;
}

.show-room-container {
    display: grid;
    grid-auto-flow: row;
    align-items: center;
    gap: 12em;
    justify-items: center;
    background: #352565;
    padding: 18em 4em 15em;
    width: 270em;
    box-sizing: border-box;
    border-radius: 5em;
    box-shadow: 0 0 6em #352565, 0 0 10em #352565;
    position: absolute;
    top: 24%;
}

@media (max-width: 600px) {

    .show-room-container {
        width: 84vw;
        padding: 5em 2em 4em;
    }
}

.lobby-nickname {
    background: var(--c-nickname);
    border: 0;
    border-radius: .5em;
    box-shadow: 0 .25em .5em rgba(0, 0, 0, .25);
    color: #fff;
    padding: .75em 1em;
    box-sizing: border-box;
    width: 15em;
    font-size: 10em;
    box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.542);
}

.lobby-nickname::-moz-selection {
    background-color: #9a8fef;
}

.lobby-nickname::selection {
    background-color: #9a8fef;
}

/* 游客改名次数超限时的内联注册引导 */
.nickname-limit-tip {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* 8em × 18.75em = 10em × 15em = 150，与昵称输入框等宽（宽度按元素自身字号计算） */
    width: 18.75em;
    padding: 0.6em 0.9em;
    border-radius: 0.5em;
    background-color: rgba(0, 0, 0, 0.35);
    color: #ffdf8a;
    font-size: 8em;
    line-height: 1.35;
    text-align: center;
}

.nickname-limit-tip-btn {
    flex: none;
    margin-left: 0.8em;
    padding: 0.35em 0.9em;
    border: 0;
    border-radius: 0.4em;
    /* 不用全局 --c-button（绿色，与进入游戏按钮撞色），改为稍浅的黑色 */
    background-color: #3a3a3a;
    color: #fff;
    font-family: inherit;
    font-size: 1em;
    cursor: pointer;
}

.nickname-limit-tip-btn:active {
    transform: translate(1px, 1px);
}

.start-button {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    font-size: 26em;
    width: 5.8em;
    height: 2em;
    margin: 0;
    border: 0;
    border-radius: .25em;
    color: white;
    background-color: var(--c-button);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0.2em 0em rgb(61 134 19), 0 0.2em 0.5em #000000;
}

.start-button:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0.1em 0em rgb(61 134 19), 0 0.2em 0.5em #000000;
}

.lang-en .lobby-button-text {
    font-size: 0.8em;
}

.lang-ru .start-button-text,
.lang-ru .lobby-button-text {
    font-size: 0.75em;
}

.lobby-button {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: -moz-fit-content;
    width: 6.6em;
    height: -moz-fit-content;
    height: 2.6em;
    margin: 0;
    border: 0;
    border-radius: .25em;
    font-size: 10.4em;
    color: #edeaf3;
    background-color: var(--c-button-sub);
    box-shadow: 0 0.4em 0em rgb(81, 128, 54), 0 0.4em 0.5em #000000;
}

.lang-zh .lobby-button {
    padding: 0.5em 1.2em;
}

.lang-en .lobby-button {
    padding: 0.5em 0.8em;
}

.lobby-button:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0.2em 0em rgb(61 134 19), 0 0.4em 0.5em #000000;
}


.homepage-sub-buttons {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 10;
    width: 149em;
    margin-top: 4em;
}

.homepage-sub-buttons.shrink-size {
    width: -moz-fit-content;
    width: fit-content;
}

.room-display-page {
    display: flex;
    align-items: center;
    flex-direction: column;
    background: transparent;
    border-radius: .5em;
    box-sizing: border-box;
    padding-bottom: 2em;
    position: relative;
    z-index: 10;
    width: 100%;
}

@keyframes scaleup {
    0% {
        opacity: 0;
        transform: scale(.875);
    }

}

.room-display-head {
    display: flex;
    width: 80%;
    justify-content: flex-end;
}

.refresh-rooms {
    align-items: center;
    justify-content: center;
    display: none;
    border-radius: 0.5em;
    color: white;
    background-color: transparent;
    border-width: medium;
    border-color: rgb(255 255 255 / 64%);
    height: 2em;
    width: 2em;
}

.refresh-rooms svg {
    width: 100%;
    height: 100%;
}

.show-room-back {
    position: absolute;
    top: 7em;
    left: 8em;
    width: 34em;
    height: 18em;
    border-radius: 3em;
    background-color: #ffffff38;
    opacity: 0.7;
    z-index: 100;
}

.show-room-back:active {
    transform: translate(2em, 2em);
}

.show-room-back:hover {
    cursor: pointer;
}

.show-room-back svg {
    width: 100%;
    height: 100%;
}

.room-banners {
    flex-direction: column;
    display: flex;
    align-items: center;
    gap: 3em;
    padding: 18em 22em 18em;
    box-sizing: border-box;
    max-height: 50vh;
    min-height: 84em;
    overflow-y: scroll;
    width: 200%;
    position: relative;
    mask-image:
        linear-gradient(to bottom,
            transparent 0%,
            black 20em,
            black calc(100% - 20em),
            transparent 100%);

    -webkit-mask-image:
        linear-gradient(to bottom,
            transparent 0%,
            black 20em,
            black calc(100% - 20em),
            transparent 100%);
}

@media (max-width: 600px) {
    .room-banners {
        gap: 3em;
        padding: 15em 0em;
    }
}

.room-banners::-webkit-scrollbar {
    display: none;
}

.room-banner {
    width: 24em;
    height: 3.8em;
    /* border: 1px solid #b5ae34; */
    background: #3d528c;
    font-size: 9em;
    border-radius: .5em;
    color: #ffffff;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
    transition: 0.3s;
    box-sizing: border-box;
    position: relative;
}

@media (max-width: 600px) {

    .room-banner {
        font-size: 3vw;
    }
}

.is-my-room {
    position: absolute;
    transform: rotate(45deg);
    top: 0;
    right: -1.6em;
    font-weight: bold;
    font-size: 0.8em;
    color: #ff6121;
    animation: isMyRoomPulse 1.8s ease-in-out infinite;
}

@keyframes isMyRoomPulse {

    0%,
    100% {
        transform: rotate(45deg) scale(1);
    }

    50% {
        transform: rotate(45deg) scale(1.15);
    }
}

.room-banner:hover {
    filter: brightness(1.5);
}

/* Game status based styling */
.room-banner.game-started {
    background: #3d528c;
}

.room-banner.locked {
    border: 0.15em dashed #ffd700;
    box-shadow: 0 0 0.6em rgba(255, 215, 0, 0.3);
}

.locked-badge {
    position: absolute;
    top: -0.5em;
    left: -0.5em;
    background: #ffd700;
    color: #000;
    font-size: 0.65em;
    font-weight: bold;
    padding: 0.1em 0.4em;
    border-radius: 0.3em;
    box-shadow: 0 0 0.47em rgba(0, 0, 0, 0.3);
}

.room-banner.game-waiting {
    background: #4366c9;
}

.room-banner.game-started:hover {
    filter: brightness(1.2);
}

.room-banner.game-waiting:hover {
    filter: brightness(1.2);
}

.room-id {
    flex-shrink: 0;
    text-align: center;
    font-weight: bold;
}

.room-explain {
    font-size: 12em;
    font-weight: 200;
    color: #c9c9c9;
    width: 100%;
    padding-bottom: 1em;
    text-align: center;
    border-bottom: 1px solid #ffffff29;
}

.show-room-people {
    display: flex;
    flex-direction: row;
}

.room-audience {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #6e2196;
    opacity: 0.5;
    gap: 0.2em;
    border-radius: 0 0.3em 0.3em 0;
    letter-spacing: 0.1em;
    width: 3.4em;
    justify-content: center;
}

.room-audience svg {
    width: 1.4em;
    height: 1.4em;
    flex-shrink: 0;
}

.room-audience span {}

.room-players-display {
    padding: 0.8em 0.4em;
    background: #7c53182b;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    width: 10em;
    height: 2.2em;
    border-radius: 0.3em 0 0 0.3em;
    gap: 0.3em;
    flex: 1;
    justify-content: center;
}

.room-players-display svg {
    width: 100%;
    height: 100%;
}

.player-icon,
.robot-icon,
.empty-slot-icon {
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-icon {
    color: #ffffff;
}

.robot-icon {
    color: #ffffff;
}

.empty-slot-icon {
    color: #ffffff;
    opacity: 0.6;
    font-size: 0.8em;
}

.room-status {
    flex-shrink: 0;
    text-align: center;
    font-weight: 500;
}

.room-banner.game-started .room-status {
    color: #ffffff;
}

.room-banner.game-waiting .room-status {
    color: #ffffff;
}

.room-display-modal {
    background: rgba(0, 0, 0, .75);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
}

.feedback-page-link {
    bottom: 1em;
    position: absolute;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    color: #ffffff8f;
    font-size: var(--ui-em);
    white-space: nowrap;
}

.feedback-page-link svg {
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
}

.feedback-page-link:hover {
    filter: brightness(1.2);
}

.head {
    height: -moz-fit-content;
    height: fit-content;
    width: 1080px;
    max-width: 98vw;
    z-index: 40;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 1rem;
    box-sizing: border-box;
    gap: 10px;

}

.head .rank {
    height: 14.2em;
    width: 14.2em;
    color: #03091c;
    transition: 0.2s;
}

.head .rank:hover {
    transform: scale(1.2);
    cursor: pointer;
}

.head .rank:active {
    transform: translate(2px, 2px);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

.head .user-btn {
    height: 14.2em;
    width: 14.2em;
    color: #03091c;
    transition: 0.2s;
    padding: 2em;
}

.head .user-btn:hover {
    transform: scale(1.2);
    cursor: pointer;
    color: #1b6b8a;
}

.head .user-btn:active {
    transform: translate(2px, 2px);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

.head-elment {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: calc(1.5* var(--ui-em));
    width: calc(5* var(--ui-em));
}

.login-icon svg {
    height: calc(1.5* var(--ui-em));
    width: calc(1.5* var(--ui-em));
}

.login-text {
    display: flex;
    padding-bottom: 3px;
    height: 100%;
    font-size: 18px;

    color: #baafd4cc;
}

.login-icon {
    color: #baafd4cc;
    display: flex;
}

.head .language {
    font-size: 13em;
    background: #1e5c79;
    border-radius: 0.5em;
    padding: 0 0.6em;
    opacity: 0.7;
}

.head .language svg path {
    transition: 0.2s;
}

.language.zh svg path:first-child {
    fill: white;
}

.language.zh svg path:last-child {
    fill: rgba(152, 152, 152, 0.789);
}

.language.en svg path:first-child {
    fill: rgba(152, 152, 152, 0.789);
}

.language.en svg path:last-child {
    fill: white;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #040d2491;
    backdrop-filter: blur(4px);
}

.mode-choose-top {
    width: 240px;
    max-width: 100vw;
    padding: 40px 10px;
    background: #130f1d;
    border-radius: 8em;
    box-shadow: 0 0 5em #000;
    display: flex;
    flex-direction: column;
    height: -moz-fit-content;
    align-items: center;
    height: fit-content;
    min-height: 16rem;
    max-height: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: transform .2s;
    z-index: 500;
}

.mode-choose-icon {
    position: absolute;
    right: 100%;
    top: 50%;
    color: #aba6d4;
    margin-right: 5px;
}

.mode-choose-bar {

    width: 90%;
    display: flex;
    margin: 0.3rem 0.5rem;
    height: 2.4rem;
    background-color: #5d47b8;
    border-radius: 10px;
    font-size: calc(0.8 * var(--ui-em));
    border: 0;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 17px;
}

.in-room-alert {
    color: #b86950 !important;
    background-color: currentColor !important;
    box-shadow: 0 0 2em currentColor !important;
}

.in-room-alert .wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.3em 0;
    width: 100%;
}

.in-room-alert .icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #09220acc;
    border-radius: 50%;
    margin-right: 0.8em;
    opacity: 0.5;
    height: 2.2em;
    width: 2.2em;
    animation: backForth 1s ease 0s infinite normal none;
}

@keyframes backForth {
    0% {
        transform: translate(12%);
        animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
    }

    50% {
        transform: translate(-4%);
        animation-timing-function: cubic-bezier(0.11, 0, 0.5, 0);
    }

    100% {
        transform: translate(12%);
    }
}

.in-room-alert .icon svg {
    width: 56%;
    margin-left: 0.1em;
}

.in-room-alert .fa-secondary {
    fill: #c2c2c2c7
}

.in-room-alert .fa-primary {
    fill: #fefefe
}

.in-room-alert-text {
    color: #ffffffb8;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 1em;
}

.in-room-alert-text span {
    background-color: #134a148c;
    border-radius: 0.2em;
    padding: 0.15em 0.25em;
    margin: 0 0.2em;
}

.contact-link {
    z-index: 30;
    display: flex;
    flex-direction: row;
    gap: 0.4em;
    bottom: 1em;
    position: absolute;
    text-decoration: none;
    color: #ffffff;
    font-size: var(--window-em);
    white-space: nowrap;
}

@media (orientation: portrait) {
    .contact-link {
        font-size: calc(1.3 * var(--window-em));

    }
}



.contact-link::before {
    content: "";
    position: absolute;
    top: -1em;
    right: -1em;
    bottom: -1em;
    left: -1em;
    background:
        radial-gradient(120% 60% at center,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.5) 40%,
            rgba(0, 0, 0, 0.0) 70%);
    filter: blur(6px);
    z-index: -1;
}

.contact-link div {
    color: inherit;
    text-decoration: none;
    font-size: 0.9em;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.contact-link div svg {
    width: 1em;
    margin-right: 0.2rem;
    fill: #edecf1de;
}

.players-group {
    padding: 3em;
    font-size: 10em;
    display: flex;
    flex-direction: column;
    align-items: center;

    background: black;
    border-radius: 2em;
    box-shadow: 0em 0em 4em 3em #000000;
}

.players-group .qq {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.players-group .qq img {
    width: 1.5em;
    height: 1.5em;
}

.players-group>img {
    width: 8em;
    height: 8em;

}

.lobby-update {
    font-size: medium;
    z-index: 150;
    position: absolute;
    max-width: 80%;
    width: 400px;
    top: 10%;
    overflow-y: scroll;
    height: 30%;
    max-height: 80%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column-reverse;

}


@media (max-width: 600px) {
    .head-elment {
        height: -moz-fit-content;
        height: fit-content;
        width: -moz-fit-content;
        width: fit-content;
        padding-right: 0.5rem;
    }

    .login-icon svg {
        height: 1.5rem;
        width: 1.5rem;
    }

    .login-text {
        font-size: 18px;
    }

    .logout-button {
        height: 1rem;
        width: 1rem;
        font-size: 1rem;
    }



    .skyline img {
        opacity: 1;
    }



}

/* CSS: floating effect */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0px);
    }
}

.floating {
    animation: float 3s ease-in-out infinite;
}

/* Loading spinner for rooms */
.rooms-loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.rooms-loading-spinner .spinner {
    width: 15em;
    height: 15em;
    border: 4em solid rgba(255, 255, 255, 0.2);
    border-top: 4em solid #ffffffb3;
    border-radius: 50%;
    animation: rotate-spinner 1s linear infinite;
}

@keyframes rotate-spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.global-invite-alert {
    color: #2d8a4e !important;
    background-color: currentColor !important;
    box-shadow: 0 0 2em currentColor !important;
}

.global-invite-alert .wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.3em 0;
    width: 100%;
}

.global-invite-alert .icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #09220acc;
    border-radius: 50%;
    margin-right: 0.8em;
    opacity: 0.5;
    height: 2.2em;
    width: 2.2em;
    animation: invitePulse 1.5s ease 0s infinite normal none;
}

@keyframes invitePulse {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 0.5;
    }
}

.global-invite-alert .icon svg {
    width: 56%;
    margin-left: 0.1em;
}

.global-invite-alert .fa-secondary {
    fill: #c2c2c2c7
}

.global-invite-alert .fa-primary {
    fill: #fefefe
}

.global-invite-alert .in-room-alert-text {
    color: #ffffffb8;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 1em;
}

.global-invite-alert .in-room-alert-text span {
    background-color: #134a148c;
    border-radius: 0.2em;
    padding: 0.15em 0.25em;
    margin: 0 0.2em;
}

.free-trial-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    font-size: 10em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    border-radius: 1em;
    padding: 2em;
    padding-top: 1.5em;
    max-width: 22em;
    width: 85%;
    text-align: center;
    box-shadow: 0 0 2.5em rgba(102, 126, 234, 0.2);
    overflow: hidden;
    background: radial-gradient(ellipse at 15% 25%, rgba(102, 126, 234, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 30%, rgba(118, 75, 162, 0.3) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 85%, rgba(246, 211, 101, 0.25) 0%, transparent 50%),
        linear-gradient(180deg, #1e1a30 0%, #16213e 100%);
}

.free-trial-popup-title {
    font-size: 1.4em;
    font-weight: 700;
    color: #f6d365;
    margin-bottom: 0;
}

.free-trial-popup-emojis {
    font-size: 1em;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 1.5em;
}

.free-trial-popup-body {
    font-size: 0.9em;
    color: #d0d0d0;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 1.5em;
}

.free-trial-popup-body p {
    margin: 0.5em 0;
}

.free-trial-popup-body ul {
    padding-left: 1.2em;
    margin: 0.5em 0;
}

.free-trial-popup-body li {
    margin: 0.3em 0;
}

.free-trial-popup-btn {
    background: linear-gradient(135deg, #f6d365, #fda085);
    border: none;
    border-radius: 0.5em;
    padding: 0.6em 2em;
    font-size: 1em;
    font-weight: 600;
    color: #5a3e00;
    cursor: pointer;
    transition: transform 0.15s;
}

.free-trial-popup-btn:hover {
    transform: scale(1.05);
}
.h-divider {
    height: 0;
    border-top: solid 1px rgba(255, 255, 255, 0.388);
}

.v-divider {
    width: 0;
    border-left: solid 1px rgba(255, 255, 255, 0.388);
}

.hover-shine:hover {
    filter: brightness(1.2);
}

.hover-rotate:hover {
    transform: rotate(90deg);
}

.highlight {
    filter: brightness(1);
}

.gradient2Sides {
    background-image: linear-gradient(135deg, #fff3, #ffffff1f 12%, #ffffff0a 50%, #ffffff14 83%, #fff3);
}

.gradientLeft {
    background-image: linear-gradient(135deg, #fff6, #ffffff12);
}

.gradientLeftSmall {
    background-image: linear-gradient(135deg, #fff3, #ffffff1f 20%, #ffffff12);
}

.glow {
    box-shadow: 0 0 5px currentColor, 0 0 20px currentColor;
}

.shadow {
    box-shadow: 0 0.3em 0.5em #130f1d;
}

.shadow-1 {
    box-shadow: 0em 0em 0.5em #130f1d;
}

.shape-shadow {
    filter: drop-shadow(black 0px 0px 0.5em) drop-shadow(rgba(0, 0, 0, 0.25) 0px 0px 0.75em);
}

.shape-shadow-b0 {
    filter: drop-shadow(rgba(0, 0, 0, 0.8) 0px 0px 0.8em);
}

.shape-shadow-b1 {
    filter: drop-shadow(rgba(0.5, 0.5, 0.5, 0.5) 0px 0px 0.3em);
}

.shape-shadow-w0 {
    filter: drop-shadow(rgba(255, 255, 255, 0.8) 0px 0px 0.8em);
}

.ellipse-shadow {
    background-image: radial-gradient(transparent 50%, rgb(0 0 0 / 56%) 100%);
}

.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.button-press-drop-shadow {}

.button-press-drop-shadow:active {
    transform: translate(2px, 2px);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

.button-press {}

.button-press:active {
    transform: translate(2px, 2px);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.disableB {
    filter: brightness(0.5);
    pointer-events: none;
}

.invisible {
    visibility: hidden !important;
}

.absolute-left {
    position: absolute !important;
    left: 0 !important;
    transform: translate(-100%, 0) !important;
}

.absolute-overlay {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}


.hide {
    display: none !important;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0px);
    }
}

.floating {
    animation: float 3s ease-in-out infinite;
}

@keyframes scaling {
    0% {
        transform: scale(1);
    }

    20% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.scaling {
    animation: scaling 3s ease-in-out infinite;
}

@keyframes emerge-scale-move {
    0% {
        opacity: 0;
        transform: scale(0.875) translateY(10px);
    }
}

.emerge-scale-move {
    animation: emerge-scale-move 0.25s linear;
}

@keyframes emerge-scale-move-30px {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    50% {
        opacity: 1;
        transform: scale(1.05) translateY(-10px);
    }

    70% {
        transform: scale(0.95) translateY(5px);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

.emerge-scale-move-30px {
    animation:
        emerge-scale-move-30px 0.5s ease-out forwards,
        disappear 0.5s ease-in 1s forwards;
}

@keyframes disappear {
    0% {
        opacity: 1;
    }


    100% {
        opacity: 0;
    }
}

@keyframes emerge-scale-from-dark {
    0% {
        filter: brightness(0);
        opacity: 0;
        transform: scale(0.875) translateY(10px);

    }

}

.emerge-scale-from-dark {
    animation: emerge-scale-from-dark 0.25s linear;
}

@keyframes emerge-scale {
    from {
        opacity: 0;
        transform: scale(0.875);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.emerge-scale {
    animation: emerge-scale 0.25s ease forwards;
}

@keyframes scale-out {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.875);
    }
}

.scale-out {
    animation: scale-out 0.25s ease forwards;
}

@keyframes emerge {
    0% {
        opacity: 0;
    }
}

.emerge {
    animation: emerge 0.25s linear;
}

@keyframes popup-bounce {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(0.5em);
    }

    50% {
        opacity: 1;
        transform: scale(1.05) translateY(-0.25em);
    }

    70% {
        transform: scale(0.95) translateY(0.125em);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

.emerge-popup {
    animation: popup-bounce 0.5s ease-out;
}

@keyframes popup-bounce-2 {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(50%);
    }

    50% {
        opacity: 1;
        transform: scale(1.05) translateY(-25%);
    }

    70% {
        transform: scale(0.95) translateY(10%);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

.emerge-popup-adaptive {
    animation: popup-bounce-2 0.5s ease-out;
}

@keyframes popup-bounce-1 {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    50% {
        opacity: 1;
        transform: translateY(-10px);
    }

    70% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(0);
    }
}

.emerge-popup-no-scale {
    animation: popup-bounce-1 0.5s ease-out;
}

.smash-in {
    animation: smash-in 0.6s ease-out
}

@keyframes smash-in {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }

    20% {
        transform: scale(1.3);
        opacity: 1;
    }

    35% {
        transform: scale(0.95) translateY(-5%);
    }

    50% {
        transform: scale(1.05) translateY(2.5%);
    }

    65% {
        transform: scale(1) translateY(-1.3%);
    }

    80% {
        transform: scale(1) translateY(0.6%);
    }

    90% {
        transform: scale(1) translateY(-0.3%);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

.anime-expand {
    animation: anime-expand 0.125s ease-in
}

@keyframes anime-expand {
    0% {
        transform: scale(0, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}
/* 动画 */
@keyframes steamPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(102, 192, 244, 0.7);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 20px 10px rgba(102, 192, 244, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(102, 192, 244, 0);
  }
}

@keyframes textShine {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

/* 按钮主体 */
.steam-promo-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  /* 与昵称输入框等宽：输入框为 15em×10em = 150，本按钮字号 9em，故 150/9 ≈ 16.667em */
  width: 16.6667em;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.8em;

  background: linear-gradient(136deg, #62355b, #17338f);
  border: 2px solid #66c0f4;
  border-radius: 0.6em;

  color: white;
  text-decoration: none;
  font-family: inherit;
  font-size: 9em;
  font-weight: bold;

  cursor: pointer;
  position: relative;
  z-index: 10;

  animation: steamPulse 2s infinite;
}

/* Steam 图标 */
.steam-icon {
  font-size: 2.6em;
  margin-right: 10px;
  color: #66c0f4;
}

/* 文字容器 */
.steam-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
  /* button 的 UA 默认 text-align 是 center，需显式改回左对齐 */
  text-align: left;
}

.steam-subtitle {
  color: #66c0f4;
  font-size: 1.4em;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
}

.lang-en .steam-subtitle {
  font-size: 1.05em;
  letter-spacing: 0.5px;

}

.steam-shine-text {
  /* 文案缩短后单行更窄，适当放大字号；仍禁止换行保证单行容纳 */
  font-size: 1em;
  white-space: nowrap;
  background: linear-gradient(to right, #fff, #66c0f4, #fff);
  -webkit-background-clip: text;
  background-clip: text;

  background-size: 200% auto;
  color: transparent;

  animation: textShine 3s linear infinite;
}

.steam-decide {
  color: rgb(78 200 255);
  font-size: 1.2em;
}

/* ============================================================
   Steam 权益引导弹窗（lobby.js SteamPerksModal）
   独立 Modal（带遮罩），风格区别于其它付费 popover
   尺寸全部用 em，由 .steam-perks-overlay 的 font-size 统一缩放
   ============================================================ */
.steam-perks-overlay {
  /* 与 .lobby-top 相同的缩放策略：竖屏按宽，宽屏按高。
     两侧系数经过匹配，使任意屏幕下“垂直可容纳的 em 预算”都 ≥ 50em，
     从而保证整窗内容无需滚动即可放下 */
  font-size: 3.8vw;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  box-sizing: border-box;
  background: radial-gradient(circle at 50% 36%, rgba(58, 44, 128, 0.62), rgba(5, 4, 20, 0.9) 72%);
  animation: steamPerksFade 0.22s ease-out;
}

/* 宽高比 > 440/924 → 切换为按视口高度缩放（与 .lobby-top 一致） */
@media (min-aspect-ratio: 440/924) {
  .steam-perks-overlay {
    font-size: 1.8vh;
  }
}

.steam-perks-modal {
  position: relative;
  width: 24em;
  max-width: 100%;
  max-height: 90vh;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 1.4em 1.5em 1.3em;
  border-radius: 1.4em;
  color: #eef3ff;
  background:
    radial-gradient(130% 100% at 10% 0%, rgba(102, 192, 244, 0.22) 0%, rgba(102, 192, 244, 0) 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(157, 123, 255, 0.26) 0%, rgba(157, 123, 255, 0) 60%),
    linear-gradient(160deg, #201140 0%, #14122f 46%, #0a0c22 100%);
  border: 1px solid rgba(122, 150, 235, 0.4);
  box-shadow:
    0 2em 4.5em rgba(0, 0, 0, 0.62),
    inset 0 0.12em 0 rgba(255, 255, 255, 0.09),
    0 0 3em rgba(102, 192, 244, 0.22);
  animation: steamPerksRise 0.34s cubic-bezier(0.18, 1.25, 0.5, 1) both;
}

/* 顶部划过的高光条 */
.steam-perks-modal::after {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0) 100%);
  animation: steamPerksSweep 3.4s ease-in-out 0.4s infinite;
}

/* 关闭按钮 */
.steam-perks-close {
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  padding: 0;
  font-size: 0.95em;
  color: #a9b8dd;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.steam-perks-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  transform: rotate(90deg);
}

/* ---- 头部：徽标 + 标题 ---- */
.steam-perks-hero {
  position: relative;
  z-index: 1;
  text-align: center;
}

.steam-perks-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3em;
  height: 3em;
  margin: 0 auto 0.55em;
  font-size: 1em;
  color: #bfe7ff;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, rgba(102, 192, 244, 0.5), rgba(102, 192, 244, 0.06) 70%);
  border: 1px solid rgba(102, 192, 244, 0.55);
  box-shadow: 0 0 1.6em rgba(102, 192, 244, 0.45), inset 0 0 0.8em rgba(102, 192, 244, 0.25);
  animation: steamPerksGlow 2.6s ease-in-out infinite;
}

.steam-perks-emblem svg {
  font-size: 2em;
}

.steam-perks-badge {
  display: inline-block;
  padding: 0.24em 0.78em;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8fd6ff;
  background: rgba(102, 192, 244, 0.12);
  border: 1px solid rgba(102, 192, 244, 0.4);
  border-radius: 2em;
}

.steam-perks-title {
  margin-top: 0.4em;
  font-size: 1.4em;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow: 0 0.1em 0.7em rgba(103, 200, 250, 0.45);
}

.steam-perks-subtitle {
  margin-top: 0.3em;
  font-size: 0.84em;
  line-height: 1.4;
  color: #a7b5db;
}

/* ---- 权益列表 ---- */
.steam-perks-list {
  position: relative;
  z-index: 1;
  margin: 1em 0 0;
  padding: 0;
  list-style: none;
}

.steam-perks-item {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 0.5em 0.75em;
  margin-bottom: 0.4em;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.85em;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  animation: steamPerksRow 0.4s ease-out both;
}

.steam-perks-item:nth-child(1) { animation-delay: 0.10s; }
.steam-perks-item:nth-child(2) { animation-delay: 0.17s; }
.steam-perks-item:nth-child(3) { animation-delay: 0.24s; }
.steam-perks-item:nth-child(4) { animation-delay: 0.31s; }
.steam-perks-item:nth-child(5) { animation-delay: 0.38s; }

.steam-perks-item:hover {
  background: rgba(102, 192, 244, 0.1);
  border-color: rgba(102, 192, 244, 0.45);
  transform: translateX(0.22em);
}

.steam-perks-item-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.65em;
  height: 1.65em;
  margin-right: 0.7em;
  font-size: 0.88em;
  color: #7fd0ff;
  background: radial-gradient(circle at 50% 30%, rgba(102, 192, 244, 0.28), rgba(102, 192, 244, 0.05));
  border: 1px solid rgba(102, 192, 244, 0.35);
  border-radius: 50%;
}

.steam-perks-item-text {
  flex: 1;
  font-size: 0.92em;
  line-height: 1.4;
  color: #dfe7f7;
}

/* ---- 操作按钮 ---- */
.steam-perks-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin-top: 1em;
}

.steam-perks-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0.72em 1em;
  font-size: 1em;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0.85em;
  cursor: pointer;
  transition: transform 0.14s ease, filter 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.steam-perks-btn-icon {
  margin-right: 0.5em;
  font-size: 1.05em;
}

.steam-perks-btn-primary {
  color: #06121f;
  background: linear-gradient(135deg, #9adcff 0%, #3f8ae0 55%, #2b62c8 100%);
  box-shadow: 0 0.6em 1.5em rgba(63, 138, 224, 0.42), inset 0 0.08em 0 rgba(255, 255, 255, 0.5);
}

.steam-perks-btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-0.1em);
  box-shadow: 0 0.9em 2em rgba(63, 138, 224, 0.55), inset 0 0.08em 0 rgba(255, 255, 255, 0.5);
}

.steam-perks-btn-secondary {
  color: #cbb8ff;
  background: rgba(157, 123, 255, 0.08);
  border: 1px solid rgba(157, 123, 255, 0.55);
}

.steam-perks-btn-secondary:hover {
  color: #ffffff;
  background: rgba(157, 123, 255, 0.26);
  box-shadow: 0 0 1.4em rgba(157, 123, 255, 0.45);
}

.steam-perks-btn + .steam-perks-btn {
  margin-top: 0.55em;
}

.steam-perks-btn:active {
  transform: translateY(0.06em);
}

@keyframes steamPerksFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes steamPerksRise {
  from { opacity: 0; transform: translateY(1.6em) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes steamPerksRow {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes steamPerksGlow {
  0%, 100% { box-shadow: 0 0 1.6em rgba(102, 192, 244, 0.45), inset 0 0 0.8em rgba(102, 192, 244, 0.25); }
  50% { box-shadow: 0 0 2.4em rgba(102, 192, 244, 0.7), inset 0 0 1em rgba(102, 192, 244, 0.4); }
}

@keyframes steamPerksSweep {
  0% { left: -40%; }
  55%, 100% { left: 140%; }
}
.admin-panel-entry-btn {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 41;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30em;
    color: #03091c;
    transition: 0.2s;
    padding: 0.1em;
    cursor: pointer;
    touch-action: manipulation;
}

/* 待办红点（地图待审 / 密码重置申请） */
.admin-red-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f44336;
    box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.25);
    animation: admin-dot-pulse 1.6s ease-in-out infinite;
}

@keyframes admin-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.7; }
}

.admin-stat.is-todo .admin-stat-value {
    color: #ffc107;
}

.admin-panel-entry-btn:hover {
    transform: scale(1.2);
    color: #1b6b8a;
}

.admin-panel-entry-btn:active {
    transform: translate(2px, 2px);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

.admin-panel-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #040d2491;
    background: rgba(4, 13, 36, 0.57);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 130;
    font-size: 16px;
    font-size: clamp(14px, 2.8vh, 18px);
    /* 整个遮罩层是唯一滚动容器；面板子元素限宽后两侧留白，可在留白处上下滚动整页 */
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.admin-panel {
    width: 100%;
    min-height: 100%;
    background: #101a35;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 面板不再单独滚动，滚动交给遮罩层，避免滚到一半卡在内部子列表 */
    overflow: visible;
}

/* 面板内容限宽并居中：移动端接近满屏宽，PC 固定宽度，两侧留出可滚动整页的空白区 */
.admin-panel > * {
    width: 100%;
    max-width: 640px;
}

.admin-panel-header {
    display: flex;
    align-items: center;
    padding: 0.9em 1.2em;
    background: #1c2a4d;
    flex-shrink: 0;
    /* 老 WebView 不支持 sticky 时降级为随面板一起滚动，不影响功能 */
    position: sticky;
    top: 0;
    z-index: 2;
}

.admin-panel-icon {
    color: #ffc107;
    font-size: 1.5em;
    margin-right: 0.6em;
}

.admin-panel-title {
    flex: 1;
    color: #ffffff;
    font-size: 1.15em;
    font-weight: bold;
}

.admin-panel-close {
    color: #9fb0d8;
    font-size: 1.3em;
    cursor: pointer;
    transition: 0.2s;
    padding: 0.2em;
}

.admin-panel-close:hover {
    color: #ffffff;
}

.admin-panel-close:active {
    transform: scale(0.9);
}

.admin-panel-stats {
    display: flex;
    padding: 1em 1.2em;
    flex-shrink: 0;
}

.admin-stat {
    flex: 1;
    text-align: center;
    background: #16234a;
    border-radius: 0.8em;
    padding: 0.8em 0.5em;
    margin-right: 0.8em;
}

.admin-stat:last-child {
    margin-right: 0;
}

.admin-stat-value {
    color: #ffd54f;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.2;
}

.admin-stat-label {
    color: #9fb0d8;
    font-size: 0.85em;
    margin-top: 0.3em;
}

.admin-panel-users-title {
    color: #9fb0d8;
    font-size: 0.9em;
    padding: 0 1.2em 0.5em;
    flex-shrink: 0;
}

.admin-panel-users {
    /* 不抢占面板剩余高度（flex-shrink:0 防止被压缩），超过上限时列表内部滚动 */
    flex-shrink: 0;
    max-height: 20em;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.2em 1.2em 1.2em;
}

.admin-panel-empty {
    color: #6b7aa8;
    text-align: center;
    padding: 1.5em 0;
    font-size: 0.9em;
}

.admin-user-row {
    display: flex;
    align-items: center;
    padding: 0.7em 0.8em;
    border-bottom: 1px solid #1c2a4d;
}

.admin-user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.admin-user-name {
    display: flex;
    align-items: center;
    overflow: hidden;
    min-width: 0;
}

.admin-user-self {
    color: #4fc3f7;
    font-size: 0.75em;
    border: 1px solid #4fc3f7;
    border-radius: 0.4em;
    padding: 0 0.3em;
    margin-right: 0.4em;
    flex-shrink: 0;
}

.admin-user-admin {
    color: #ffc107;
    font-size: 0.75em;
    border: 1px solid #ffc107;
    border-radius: 0.4em;
    padding: 0 0.3em;
    margin-right: 0.4em;
    flex-shrink: 0;
}

.admin-user-nickname {
    color: #e8edf8;
    font-size: 0.95em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user-sid {
    color: #6b7aa8;
    font-size: 0.72em;
    margin-top: 0.25em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-user-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.3em;
}

.admin-user-registered {
    font-size: 0.68em;
    border-radius: 0.4em;
    padding: 0 0.35em;
    margin-right: 0.4em;
    flex-shrink: 0;
    white-space: nowrap;
}

.admin-user-registered.is-registered {
    color: #81c784;
    border: 1px solid #81c784;
}

.admin-user-registered.is-guest {
    color: #9e9e9e;
    border: 1px solid #9e9e9e;
}

.admin-user-today-online {
    color: #ffd54f;
    font-size: 0.7em;
    margin-right: 0.4em;
    white-space: nowrap;
}

.admin-user-paid {
    font-size: 0.68em;
    border-radius: 0.4em;
    padding: 0 0.35em;
    margin-right: 0.4em;
    flex-shrink: 0;
    white-space: nowrap;
}

.admin-user-paid.is-steam {
    color: #66c2ff;
    border: 1px solid #66c2ff;
}

.admin-user-paid.is-code {
    color: #ffd54f;
    border: 1px solid #ffd54f;
}

.admin-user-paid.is-none {
    color: #6b7aa8;
    border: 1px solid #6b7aa8;
}

.admin-user-online-time {
    color: #8fa3cc;
    font-size: 0.7em;
    white-space: nowrap;
}

.admin-user-mute-status {
    color: #ff8a65;
    font-size: 0.8em;
    margin: 0 0.6em;
    flex-shrink: 0;
}

.admin-user-actions {
    display: flex;
    flex-shrink: 0;
}

.admin-mute-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    background: #2d4073;
    color: #cfe0ff;
    border: none;
    border-radius: 0.5em;
    font-size: 0.78em;
    padding: 0.45em 0.55em;
    margin-left: 0.35em;
    cursor: pointer;
    transition: 0.2s;
    touch-action: manipulation;
    white-space: nowrap;
}

.admin-mute-btn:hover {
    background: #3d56a3;
}

.admin-mute-btn:active {
    background: #ff6e40;
    color: #ffffff;
}

.admin-unmute-btn {
    background: #2f6b4f;
    color: #d7ffea;
}

.admin-unmute-btn:hover {
    background: #3d8a66;
}

.admin-panel-announcements {
    padding: 0 1.2em 0.8em;
    border-bottom: 1px solid #1c2a4d;
    flex-shrink: 0;
}

.admin-panel-announcements-title {
    display: flex;
    align-items: center;
    color: #9fb0d8;
    font-size: 0.9em;
    margin-bottom: 0.5em;
}

.admin-panel-announcements-icon {
    margin-right: 0.5em;
    color: #ffc107;
}

/* 待审核队列：大厅里就能处理地图/皮肤，不必先进房间当房主 */
.admin-panel-pending {
    padding: 0 1.2em 0.8em;
    border-bottom: 1px solid #1c2a4d;
    flex-shrink: 0;
}

.admin-pending-list {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    max-height: 12em;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.admin-pending-row {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.5em 0.7em;
    border-radius: 0.5em;
    background: #16234a;
    cursor: pointer;
    transition: background 0.18s;
}

.admin-pending-row:hover {
    background: #1d2d5c;
}

.admin-pending-tag {
    flex: 0 0 auto;
    padding: 0.15em 0.5em;
    border-radius: 0.4em;
    font-size: 0.78em;
    background: rgba(79, 195, 247, 0.16);
    color: #4fc3f7;
}

.admin-pending-tag.skin {
    background: rgba(171, 71, 188, 0.18);
    color: #ce93d8;
}

.admin-pending-info {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-pending-name {
    color: #ffffff;
    font-size: 0.95em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-pending-meta {
    color: #6b7aa8;
    font-size: 0.8em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-pending-cta {
    flex: 0 0 auto;
    color: #ffc107;
    font-size: 0.85em;
}

.admin-panel-announcements-editor {
    display: flex;
    align-items: flex-end;
    margin-bottom: 0.6em;
}

.admin-panel-announcements-input {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    flex: 1;
    background: #0d1631;
    border: 1px solid #2a3a66;
    border-radius: 0.5em;
    color: #e8edf8;
    font-size: 0.9em;
    padding: 0.5em 0.6em;
    resize: none;
    outline: none;
    -webkit-user-select: text;
    -moz-user-select: text;
         user-select: text;
}

.admin-panel-announcements-input:focus {
    border-color: #4fc3f7;
}

.admin-panel-announcements-publish {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    background: #2d4073;
    color: #cfe0ff;
    border: none;
    border-radius: 0.5em;
    font-size: 0.85em;
    padding: 0.5em 0.9em;
    margin-left: 0.5em;
    cursor: pointer;
    transition: 0.2s;
    touch-action: manipulation;
    white-space: nowrap;
    flex-shrink: 0;
}

.admin-panel-announcements-publish:hover {
    background: #3d56a3;
}

.admin-panel-announcements-publish:active {
    background: #ff6e40;
    color: #ffffff;
}

.admin-panel-announcements-list {
    max-height: 20em;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.admin-panel-announcement-item {
    display: flex;
    align-items: center;
    padding: 0.4em 0.2em;
    border-bottom: 1px solid #16234a;
}

.admin-panel-announcement-content {
    flex: 1;
    min-width: 0;
}

.admin-panel-announcement-text {
    color: #e8edf8;
    font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-panel-announcement-time {
    color: #6b7aa8;
    font-size: 0.7em;
    margin-top: 0.2em;
}

.admin-panel-announcement-delete {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    background: transparent;
    color: #9fb0d8;
    border: none;
    font-size: 1em;
    padding: 0.4em;
    margin-left: 0.5em;
    cursor: pointer;
    transition: 0.2s;
    touch-action: manipulation;
    flex-shrink: 0;
}

.admin-panel-announcement-delete:hover {
    color: #ff6e40;
}

.admin-panel-announcement-delete:active {
    transform: scale(0.9);
}

/* ===== 激活码管理 ===== */
.admin-panel-codes {
    padding: 0 1.2em 0.8em;
    border-bottom: 1px solid #1c2a4d;
    flex-shrink: 0;
}

.admin-panel-codes-title {
    display: flex;
    align-items: center;
    color: #9fb0d8;
    font-size: 0.9em;
    margin-bottom: 0.5em;
}

.admin-panel-codes-icon {
    margin-right: 0.5em;
    color: #d8a94f;
}

.admin-panel-codes-editor {
    display: flex;
    align-items: flex-end;
    margin-bottom: 0.5em;
}

.admin-panel-codes-input {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    flex: 1;
    background: #0d1631;
    border: 1px solid #2a3a66;
    border-radius: 0.5em;
    color: #e8edf8;
    font-size: 0.85em;
    padding: 0.5em 0.6em;
    resize: none;
    outline: none;
    -webkit-user-select: text;
    -moz-user-select: text;
         user-select: text;
    word-break: break-all;
}

.admin-panel-codes-input:focus {
    border-color: #d8a94f;
}

.admin-panel-codes-import {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    background: #2d4073;
    color: #cfe0ff;
    border: none;
    border-radius: 0.5em;
    font-size: 0.85em;
    padding: 0.5em 0.9em;
    margin-left: 0.5em;
    cursor: pointer;
    transition: 0.2s;
    touch-action: manipulation;
    white-space: nowrap;
    flex-shrink: 0;
}

.admin-panel-codes-import:hover {
    background: #3d56a3;
}

.admin-panel-codes-import:active {
    background: #ff6e40;
    color: #ffffff;
}

.admin-panel-codes-msg {
    color: #ffd54f;
    font-size: 0.8em;
    margin-bottom: 0.5em;
}

.admin-panel-codes-list {
    max-height: 20em;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.admin-panel-code-item {
    display: flex;
    align-items: center;
    padding: 0.4em 0.2em;
    border-bottom: 1px solid #16234a;
}

.admin-panel-code-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-panel-code-value {
    color: #d8d22f;
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-panel-code-used {
    color: #6b7aa8;
    font-size: 0.72em;
    margin-top: 0.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-panel-code-unused {
    color: #7ed9a7;
    font-size: 0.72em;
    margin-top: 0.2em;
}

.admin-panel-code-reset {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    background: #2f6b4f;
    color: #d7ffea;
    border: none;
    border-radius: 0.5em;
    font-size: 0.75em;
    padding: 0.4em 0.6em;
    margin-left: 0.5em;
    cursor: pointer;
    transition: 0.2s;
    touch-action: manipulation;
    flex-shrink: 0;
    white-space: nowrap;
}

.admin-panel-code-reset:hover {
    background: #3d8a66;
}

@media (max-width: 600px) {
    .admin-panel-codes-editor {
        flex-wrap: wrap;
    }

    .admin-panel-codes-input {
        width: 100%;
        flex: none;
    }

    .admin-panel-codes-import {
        width: 100%;
        margin: 0.5em 0 0;
    }
}

@media (max-width: 600px) {
    .admin-panel-announcements-editor {
        flex-wrap: wrap;
    }

    .admin-panel-announcements-input {
        width: 100%;
        flex: none;
    }

    .admin-panel-announcements-publish {
        width: 100%;
        margin: 0.5em 0 0;
    }
}

@media (max-width: 600px) {
    .admin-user-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .admin-user-info {
        width: 100%;
        flex: none;
    }

    .admin-user-sid {
        white-space: normal;
        word-break: break-all;
    }

    .admin-user-mute-status {
        width: 100%;
        margin: 0.3em 0 0;
    }

    .admin-user-actions {
        width: 100%;
        margin-top: 0.4em;
    }

    .admin-mute-btn {
        flex: 1;
        margin-left: 0;
        margin-right: 0.35em;
    }

    .admin-mute-btn:last-child {
        margin-right: 0;
    }
}

/* ===== 密码找回申请 ===== */
.admin-panel-resets {
    padding: 0.8em 1.2em 1.2em;
    flex-shrink: 0;
}

.admin-panel-resets-title {
    display: flex;
    align-items: center;
    color: #9fb0d8;
    font-size: 0.9em;
    margin-bottom: 0.5em;
}

.admin-panel-resets-icon {
    margin-right: 0.5em;
    color: #7fb3ff;
}

.admin-panel-resets-list {
    max-height: 20em;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.admin-panel-reset-item {
    display: flex;
    align-items: center;
    padding: 0.5em 0.2em;
    border-bottom: 1px solid #16234a;
}

.admin-panel-reset-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-panel-reset-name {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.admin-panel-reset-value {
    color: #e8edf8;
    font-size: 0.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-panel-reset-steam {
    color: #66c2ff;
    font-size: 0.68em;
    border: 1px solid #66c2ff;
    border-radius: 0.4em;
    padding: 0 0.35em;
    margin-left: 0.4em;
    flex-shrink: 0;
    white-space: nowrap;
}

.admin-panel-reset-status {
    font-size: 0.68em;
    border-radius: 0.4em;
    padding: 0 0.35em;
    margin-left: 0.4em;
    flex-shrink: 0;
    white-space: nowrap;
}

.admin-panel-reset-status.status-pending {
    color: #ffd54f;
    border: 1px solid #ffd54f;
}

.admin-panel-reset-status.status-approved {
    color: #7ed9a7;
    border: 1px solid #7ed9a7;
}

.admin-panel-reset-status.status-used {
    color: #6b7aa8;
    border: 1px solid #6b7aa8;
}

.admin-panel-reset-status.status-revoked {
    color: #ff8a65;
    border: 1px solid #ff8a65;
}

.admin-panel-reset-note {
    color: #9fb0d8;
    font-size: 0.78em;
    margin-top: 0.25em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-panel-reset-time {
    color: #6b7aa8;
    font-size: 0.7em;
    margin-top: 0.2em;
}

.admin-panel-reset-actions {
    display: flex;
    flex-shrink: 0;
    margin-left: 0.5em;
}

.admin-panel-reset-approve,
.admin-panel-reset-revoke {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    border: none;
    border-radius: 0.5em;
    font-size: 0.75em;
    padding: 0.4em 0.6em;
    cursor: pointer;
    transition: 0.2s;
    touch-action: manipulation;
    flex-shrink: 0;
    white-space: nowrap;
}

.admin-panel-reset-approve {
    background: #2f6b4f;
    color: #d7ffea;
    margin-right: 0.35em;
}

.admin-panel-reset-approve:hover {
    background: #3d8a66;
}

.admin-panel-reset-approve:active {
    background: #ff6e40;
    color: #ffffff;
}

.admin-panel-reset-revoke {
    background: #6b2f2f;
    color: #ffd7d7;
}

.admin-panel-reset-revoke:hover {
    background: #8a3d3d;
}

.admin-panel-reset-revoke:active {
    background: #ff6e40;
    color: #ffffff;
}

/* ===== 标签页 =====
   面板内容拆成 概览 / 数据 / 审核 / 公告 / 激活码 / 重置 六页，
   待办数量挂在对应的页签上，不用再往下拉着一项项找。
   页签本身横向可滚：手机窄屏塞不下六项时不会换行挤成两排。 */
.admin-panel-tabs {
    display: flex;
    align-items: stretch;
    gap: 0.2em;
    padding: 0.5em 0.8em 0;
    background: #1c2a4d;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.admin-panel-tabs::-webkit-scrollbar {
    display: none;
}

.admin-tab {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.35em;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #9fb0d8;
    font-size: 0.8em;
    padding: 0.6em 0.55em;
    cursor: pointer;
    transition: 0.18s;
    touch-action: manipulation;
    white-space: nowrap;
}

.admin-tab:hover {
    color: #ffffff;
}

.admin-tab.is-active {
    color: #ffd54f;
    border-bottom-color: #ffd54f;
}

.admin-tab-icon {
    font-size: 1em;
}

.admin-tab-badge {
    position: absolute;
    top: 0.25em;
    right: 0;
    min-width: 1.1em;
    height: 1.1em;
    padding: 0 0.2em;
    border-radius: 0.55em;
    background: #f44336;
    color: #ffffff;
    font-size: 0.62em;
    line-height: 1.1em;
    text-align: center;
}

/* 页内容：六页共用同一容器，只有当前页可见（display 由 JS 切换） */
.admin-panel-body {
    width: 100%;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.admin-panel-body > * {
    width: 100%;
    max-width: 640px;
}

/* 分页之后整页高度交给遮罩层滚动，用户列表可以放宽一些 */
.admin-panel-body .admin-panel-users {
    max-height: 28em;
}

@media (max-width: 420px) {
    .admin-tab {
        font-size: 0.75em;
        padding: 0.55em 0.45em;
    }
    .admin-tab-label {
        font-size: 0.92em;
    }
}

.review-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    font-size: 10em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    border-radius: 1em;
    padding: 2em;
    padding-top: 1.5em;
    max-width: 22em;
    width: 85%;
    text-align: center;
    box-shadow: 0 0 2.5em rgba(102, 126, 234, 0.2);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    background: radial-gradient(ellipse at 15% 25%, rgba(102, 126, 234, 0.35) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 30%, rgba(118, 75, 162, 0.3) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 85%, rgba(246, 211, 101, 0.25) 0%, transparent 50%),
        linear-gradient(180deg, #1e1a30 0%, #16213e 100%);
}

.review-prompt-title {
    font-size: 1.4em;
    font-weight: 700;
    color: #f6d365;
    margin-bottom: 0.8em;
}

.review-prompt-desc {
    font-size: 0.9em;
    color: #d0d0d0;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 1.5em;
}

.review-prompt-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.review-prompt-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 0.5em;
    padding: 0.6em 2em;
    font-size: 1em;
    font-weight: 600;
    color: #d0d0d0;
    cursor: pointer;
    touch-action: manipulation;
    margin-bottom: 0.8em;
    width: 100%;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
    transition: transform 0.15s, opacity 0.15s;
}

.review-prompt-btn:hover,
.review-prompt-btn:active {
    transform: scale(1.05);
}

.review-prompt-btn-primary {
    background: linear-gradient(135deg, #f6d365, #fda085);
    color: #5a3e00;
}

.light-rays-container {
  width: 100%;
  height: 100%;
  position: relative;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.settings-content button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.settings-button {
        height: 1.42em;
    width: 1.42em;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    color: #2c575d;
    font-size: 10em;
    transition: 0.2s;
}

.settings-button:hover {
    transform: scale(1.2);
    cursor: pointer;
}

.settings-button svg {
    width: 100%;
    height: 100%;
}

.settings-content {
    width: 220px;
    background: linear-gradient(180deg, #0b4356 0%, #062c3b 100%);
    color: #fff;
    padding: 1em;
    border-radius: 12px;
    border: 1px solid rgba(103, 217, 250, 0.16);
    box-shadow:
        0 22px 44px -14px rgba(0, 0, 0, 0.72),
        0 8px 16px -10px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform-origin: top right;
    pointer-events: auto;
    animation: scale-in 0.25s ease-out forwards;
    z-index: 200;
    position: relative;
}

.settings-content[data-state='closed'] {
    animation: scale-out 0.25s ease-in forwards;
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scale-out {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

.settings-title {
    font-size: 1em;
    font-weight: 600;
    color: #b2c1c3;
    margin-bottom: 0.3em;
    text-align: center;
    width: 100%;
}

/* Steam 端顶部操作栏：全屏 / 退出（一行两个带文字按钮，下方横线分隔） */
.settings-actions-row {
    display: flex;
    gap: 8px;
    width: 100%;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-content .settings-action-btn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.6em 0.5em;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #e0e6e8;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,
        transform 0.18s ease, box-shadow 0.18s ease;
}

.settings-content .settings-action-btn svg {
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
}

.settings-content .settings-action-btn span {
    min-width: 0;
}

.settings-content .settings-action-btn:hover {
    filter: none;
    transform: translateY(-1px);
}

.settings-content .settings-action-btn:active {
    transform: translateY(0) scale(0.97);
}

.settings-content .settings-action-btn:focus-visible {
    outline: 2px solid rgba(100, 200, 255, 0.7);
    outline-offset: 2px;
}

.settings-content .settings-action-fullscreen {
    color: #cfe7f2;
}

.settings-content .settings-action-fullscreen:hover {
    background: rgba(100, 200, 255, 0.16);
    border-color: rgba(100, 200, 255, 0.45);
    color: #a9e2ff;
    box-shadow: 0 4px 12px -4px rgba(100, 200, 255, 0.55);
}

.settings-content .settings-action-exit {
    color: #e0c9c9;
}

.settings-content .settings-action-exit:hover {
    background: rgba(255, 90, 90, 0.16);
    border-color: rgba(255, 90, 90, 0.45);
    color: #ffb3b3;
    box-shadow: 0 4px 12px -4px rgba(255, 90, 90, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .settings-content .settings-action-btn {
        transition: none;
    }

    .settings-content .settings-action-btn:hover,
    .settings-content .settings-action-btn:active {
        transform: none;
    }
}

.settings-content button {
    width: 100%;
    padding: 0.9em;
    border: none;
    color: #fff;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.settings-content button:hover {
    filter: brightness(1.2);
}

/* 语言选择：折叠式下拉菜单 —— 平时只显示当前语言，点开后悬浮覆盖在面板上 */
.settings-lang {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    z-index: 30;
}

.settings-content .settings-lang-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.62em 0.72em;
    border-radius: 9px;
    border: 1px solid rgba(103, 217, 250, 0.18);
    background: linear-gradient(180deg, rgba(103, 217, 250, 0.14), rgba(103, 217, 250, 0.04));
    color: #e4f5fc;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease,
        box-shadow 0.18s ease, transform 0.18s ease;
}

.settings-content .settings-lang-trigger:hover {
    background: linear-gradient(180deg, rgba(103, 217, 250, 0.2), rgba(103, 217, 250, 0.08));
    border-color: rgba(103, 217, 250, 0.4);
    box-shadow: 0 6px 16px -8px rgba(103, 217, 250, 0.7);
    filter: none;
}

.settings-content .settings-lang-trigger:active {
    transform: scale(0.985);
}

.settings-content .settings-lang.is-open .settings-lang-trigger {
    border-color: rgba(103, 217, 250, 0.55);
    background: linear-gradient(180deg, rgba(103, 217, 250, 0.24), rgba(103, 217, 250, 0.1));
    box-shadow: inset 0 0 0 1px rgba(103, 217, 250, 0.12);
}

.settings-lang-trigger .lang-trigger-globe {
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    color: #7fdcff;
    opacity: 0.9;
}

.settings-lang-trigger .lang-trigger-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-lang-trigger .lang-trigger-chevron {
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    opacity: 0.7;
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-lang-trigger[aria-expanded='true'] .lang-trigger-chevron {
    transform: rotate(180deg);
}

/* 悬浮下拉菜单：与主面板同色系，但不透出下方内容 */
.settings-lang-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(103, 217, 250, 0.22);
    background: linear-gradient(180deg, #0e4a66 0%, #062c3b 100%);
    box-shadow:
        0 18px 34px -10px rgba(0, 0, 0, 0.75),
        0 6px 12px -6px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform-origin: top center;
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: lang-panel-in 0.18s cubic-bezier(0.22, 1.1, 0.36, 1);
}

.settings-lang-panel::-webkit-scrollbar {
    width: 6px;
}

.settings-lang-panel::-webkit-scrollbar-track {
    background: transparent;
}

.settings-lang-panel::-webkit-scrollbar-thumb {
    background: rgba(103, 217, 250, 0.25);
    border-radius: 999px;
}

.settings-lang-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(103, 217, 250, 0.45);
}

@keyframes lang-panel-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.settings-content .settings-lang-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.5em 0.6em;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #a6c2cd;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.settings-content .settings-lang-option:hover {
    background: rgba(103, 217, 250, 0.12);
    border-color: rgba(103, 217, 250, 0.2);
    color: #eaf9ff;
    filter: none;
}

.settings-lang-option .lang-option-mark {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
}

.settings-lang-option .lang-option-check {
    width: 0.95em;
    height: 0.95em;
    color: #67d9fa;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.settings-lang-option .lang-option-label {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-lang-option .lang-option-code {
    flex: 0 0 auto;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7fa4b2;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    padding: 1px 6px;
}

.settings-content .settings-lang-option.active {
    background: linear-gradient(90deg, rgba(103, 217, 250, 0.24), rgba(103, 217, 250, 0.04));
    border-color: rgba(103, 217, 250, 0.32);
    color: #d9f4ff;
}

.settings-lang-option.active .lang-option-check {
    opacity: 1;
    transform: scale(1);
}

.settings-lang-option.active .lang-option-code {
    color: #bfeaff;
    background: rgba(103, 217, 250, 0.16);
}

@media (prefers-reduced-motion: reduce) {
    .settings-lang-panel {
        animation: none;
    }

    .settings-lang-trigger .lang-trigger-chevron,
    .settings-lang-option .lang-option-check {
        transition: none;
    }
}

/* 录像入口：从大厅右上角收进设置面板
   左对齐，图标与文字的位置和上面的语言行保持一致 */
.settings-content .settings-replay-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 0.62em 0.72em;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #dbe9ee;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.settings-content .settings-replay-btn svg {
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
}

.settings-content .settings-replay-btn span {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-content .settings-replay-btn:hover {
    background: rgba(100, 200, 255, 0.16);
    border-color: rgba(100, 200, 255, 0.45);
    color: #a9e2ff;
    transform: translateY(-1px);
    filter: none;
}

.settings-content .settings-replay-btn:active {
    transform: translateY(0) scale(0.98);
}

/* 全平台下载区域 */
.settings-downloads-section {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 下载标题 */
.settings-downloads-title {
    font-size: 13px;
    font-weight: 600;
    color: #b2c1c3;
    text-align: center;
    letter-spacing: 0.5px;
}

/* 下载列表 */
.settings-downloads-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

/* 单个下载项 */
.settings-download-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #e0e0e0;
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    flex: 1;
    white-space: nowrap;
}

.settings-download-item svg {
    height: 1.3em;
    width: 1.3em;
}

.settings-download-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* 平台图标 */
.platform-icon {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 平台文字 */
.platform-text {
    text-align: center;
}

/* 更新记录入口，点击查看历史更新信息 */
.settings-version {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #888888;
    -moz-user-select: none;
         user-select: none;
    cursor: pointer;
    -webkit-user-select: none;
    transition: color 0.2s ease;
}

.settings-version-num {
    font-size: 11px;
    color: #aaaaaa;
}

.settings-version:hover,
.settings-version:active {
    color: #1976d2;
    text-decoration: underline;
}
.nav-icon4 {
  min-width: 1em;
  height: 0.8em;
  position: relative;
  transform: rotate(0deg);
  transition: 0.5s ease-in-out;
  cursor: pointer;
  font-size: 1.42em;
}

.nav-icon4 span {
  display: block;
  position: absolute;
  height: 0.16em;
  width: 100%;
  background: #03091c;
  border-radius: 0.16em;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}

/* 三条线位置 */

.nav-icon4 span:nth-child(1) {
  top: 0;
  transform-origin: left center;
}

.nav-icon4 span:nth-child(2) {
  top: 0.32em;
  transform-origin: left center;
}

.nav-icon4 span:nth-child(3) {
  top: 0.64em;
  transform-origin: left center;
}


/* open 状态 */

.nav-icon4.open span:nth-child(1) {
  transform: rotate(45deg);
  top: -0.05em;
  left: 0.14em;
}

.nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

.nav-icon4.open span:nth-child(3) {
  transform: rotate(-45deg);
  top: 0.69em;
  left: 0.14em;
}
/* Update Announcement Modal Styles */

.update-announcement-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.update-announcement-modal {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease-in-out;
}

@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.update-announcement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e8e8e8;
    position: sticky;
    top: 0;
    background-color: #ffffff;
}

.update-announcement-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333333;
}

.update-announcement-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #999999;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color 0.2s ease;
}

.update-announcement-close-btn:hover {
    color: #333333;
}

.update-announcement-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.version-comparison-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 8px;
    border-left: 4px solid #ff9800;
}

.version-comparison-box .version-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.version-comparison-box .version-label {
    font-weight: 600;
    color: #666666;
    font-size: 13px;
}

.version-comparison-box .version-value {
    font-size: 14px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    min-width: 80px;
    text-align: center;
}

.version-comparison-box .version-value.local {
    background-color: #e3f2fd;
    color: #1565c0;
}

.version-comparison-box .version-value.server {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.update-version-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.update-version-label {
    font-weight: 600;
    color: #666666;
    margin-right: 10px;
}

.update-version-number {
    font-size: 18px;
    font-weight: 700;
    color: #1976d2;
}

.update-version-date {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: #888888;
}

/* 历史更新记录列表 */
.update-history-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.update-history-item {
    padding: 16px;
    border: 1px solid #eeeae2;
    border-radius: 10px;
    background-color: #fafafa;
}

.update-history-item + .update-history-item {
    margin-top: 0;
}

.update-history-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e2ddd3;
}

.update-history-version {
    font-size: 15px;
    font-weight: 700;
    color: #1976d2;
}

.update-history-date {
    font-size: 12px;
    font-weight: 600;
    color: #888888;
}

.update-history-item .update-changes {
    gap: 16px;
}

.update-changes {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.update-section {
    display: flex;
    flex-direction: column;
}

.update-section-title {
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.update-items-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.update-item {
    font-size: 13px;
    color: #666666;
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}

.update-item::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #1976d2;
    font-weight: bold;
}

.update-announcement-actions {
    display: flex;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid #e8e8e8;
    background-color: #f9f9f9;
}

.update-announcement-btn {
    flex: 1;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.skip-btn {
    background-color: #f0f0f0;
    color: #333333;
    border: 1px solid #e0e0e0;
}

.skip-btn:hover {
    background-color: #e8e8e8;
    border-color: #d0d0d0;
}

.update-btn {
    background-color: #1976d2;
    color: #ffffff;
}

.update-btn:hover {
    background-color: #1565c0;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}

.update-btn:active {
    transform: scale(0.98);
}

.history-btn {
    background-color: #eef4fd;
    color: #1976d2;
    border: 1px solid #cfe0f7;
}

.history-btn:hover {
    background-color: #e0ecfb;
    border-color: #b7d2f2;
}

.history-btn:active {
    transform: scale(0.98);
}

.back-btn {
    background-color: #f0f0f0;
    color: #333333;
    border: 1px solid #e0e0e0;
}

.back-btn:hover {
    background-color: #e8e8e8;
    border-color: #d0d0d0;
}

.back-btn:active {
    transform: scale(0.98);
}

/* 响应式设计 */
@media (max-width: 600px) {
    .update-announcement-modal {
        max-width: 100%;
        width: 95%;
        max-height: 90vh;
    }

    .update-announcement-header {
        padding: 16px;
    }

    .update-announcement-title {
        font-size: 18px;
    }

    .update-announcement-content {
        padding: 16px;
    }

    .update-announcement-actions {
        flex-direction: column;
        padding: 16px;
    }

    .update-announcement-btn {
        padding: 14px 16px;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    .update-announcement-modal {
        background-color: #2a2a2a;
        color: #ffffff;
    }

    .update-announcement-header {
        border-bottom-color: #444444;
        background-color: #2a2a2a;
    }

    .update-announcement-title {
        color: #ffffff;
    }

    .update-announcement-close-btn {
        color: #999999;
    }

    .update-announcement-close-btn:hover {
        color: #ffffff;
    }

    .update-version-label {
        color: #aaaaaa;
    }

    .update-section-title {
        color: #ffffff;
    }

    .update-item {
        color: #cccccc;
    }

    .update-version-date {
        color: #999999;
    }

    .update-history-item {
        background-color: #222222;
        border-color: #3a3a3a;
    }

    .update-history-head {
        border-bottom-color: #3a3a3a;
    }

    .update-history-version {
        color: #64b5f6;
    }

    .update-history-date {
        color: #999999;
    }

    .history-btn {
        background-color: #1f3550;
        color: #90caf9;
        border-color: #2f4a6b;
    }

    .history-btn:hover {
        background-color: #26405f;
        border-color: #3a5a80;
    }

    .back-btn {
        background-color: #444444;
        color: #ffffff;
        border-color: #555555;
    }

    .back-btn:hover {
        background-color: #555555;
        border-color: #666666;
    }

    .update-announcement-actions {
        border-top-color: #444444;
        background-color: #1f1f1f;
    }

    .skip-btn {
        background-color: #444444;
        color: #ffffff;
        border-color: #555555;
    }

    .skip-btn:hover {
        background-color: #555555;
        border-color: #666666;
    }
}

/**
 * libraryUi.js 的样式（排序 / 搜索 / 分页 / 命名弹窗 / 删除弹窗 / 审核弹窗）。
 *
 * 这些零件被两处复用：房间里的「地图库 / 皮肤库」和大厅的管理员面板。
 * 所以样式必须跟着 libraryUi.js 一起加载 —— 只写在 backstage.css 里的话，
 * 大厅（不加载 backstage 组件）就会出现「审核弹窗没有任何样式」。
 */

/* ==================== 排序：无边框分段控件 ==================== */
.map-sort-tabs {
    display: flex;
    justify-content: center;
    gap: 0.2em;
    margin-bottom: 0.8em;
    padding: 0.22em;
    border-radius: 0.7em;
    background: rgba(255, 255, 255, 0.05);
}

.map-sort-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.28em 0.6em;
    border: none;
    border-radius: 0.55em;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.3em;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.18s, color 0.18s;
}

.map-sort-tab:hover {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.88);
}

.map-sort-tab.active {
    background: rgba(255, 255, 255, 0.13);
    color: #ffd700;
    font-weight: 700;
}

/* ==================== 搜索框 ==================== */
.browser-search {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 0.8em;
    border: none;
    border-radius: 0.6em;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 1em;
    transition: background 0.18s;
}

.browser-search:focus-within {
    background: rgba(255, 255, 255, 0.09);
}

.browser-search-icon {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.4em;
}

.browser-search-input {
    flex: 1;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.4em;
    outline: none;
}

.browser-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4em 0.7em;
    border: none;
    border-radius: 0.5em;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.4em;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}

.browser-search-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ==================== 分页 ==================== */
.custom-map-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8em;
    padding: 0.6em 0;
}

.custom-map-page-btn {
    display: flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.4em 1em;
    border: none;
    border-radius: 0.5em;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2em;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.custom-map-page-btn:hover:not(.disabled) {
    background: rgba(255, 255, 255, 0.13);
}

.custom-map-page-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.custom-map-page-info {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.2em;
    white-space: nowrap;
}

/* ==================== 通用按钮 ==================== */
.custom-map-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.6em 1em;
    border: none;
    border-radius: 0.6em;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.4em;
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

.custom-map-btn:hover:not(.disabled) {
    background: rgba(255, 255, 255, 0.16);
}

.custom-map-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 主操作（每个面板里只出现一个）：实心强调色，和其余按钮拉开层次 */
.custom-map-btn.is-primary {
    color: #fff;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 0.18em 0.7em rgba(102, 126, 234, 0.32);
}

.custom-map-btn.is-primary:hover:not(.disabled) {
    background: linear-gradient(135deg, #7688f0, #8557b5);
    box-shadow: 0 0.22em 0.9em rgba(102, 126, 234, 0.45);
}

/* ==================== 弹窗外框 ==================== */
.custom-map-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-map-modal {
    background: #1a1a2e;
    border: none;
    border-radius: 1em;
    padding: 1.5em;
    max-width: 24em;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    font-size: 0.85em;
    box-shadow: 0 1.2em 2.6em rgba(0, 0, 0, 0.55);
}

.custom-map-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.8em;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1em;
}

.custom-map-close {
    cursor: pointer;
    font-size: 1.4em;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s;
}

.custom-map-close:hover {
    color: #fff;
}

/* ==================== 命名弹窗 ==================== */
.save-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.save-map-name-input {
    padding: 0.8em 1em;
    border: none;
    border-radius: 0.6em;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1.5em;
    outline: none;
    transition: background 0.18s, box-shadow 0.18s;
}

.save-map-name-input:focus {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 0.12em rgba(79, 195, 247, 0.35);
}

.save-map-confirm-btn {
    padding: 0.8em;
    border: none;
    border-radius: 0.6em;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 1.5em;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.save-map-confirm-btn:hover {
    opacity: 0.9;
}

/* ==================== 弹窗内文字统一收一档 ==================== */
/*
 * 上面这些 1.4~1.8em 是乘在 .custom-map-modal 的 0.85em（body 16px）基准上的，
 * 落到实屏就是「标题 24.5px、正文/按钮 19px、输入框 20.4px」—— 放在只有一两行
 * 内容的弹窗里明显偏大（用户反馈「新建地图 / 审核弹窗文字太大」）。
 *
 * 这里只压字号，不动弹窗宽度与 em 内边距（按钮的可点区域不变）。
 * 用 .custom-map-modal 后代选择器包一层：.custom-map-btn / .custom-map-modal-header
 * 也被皮肤编辑器、地图页动作行复用，全局改会连带把那些地方缩小。
 */
.custom-map-modal .custom-map-modal-header {
    font-size: 1.3em;   /* 24.5px → 17.7px */
}

.custom-map-modal .save-map-name-input {
    font-size: 1.15em;  /* 20.4px → 15.6px */
}

.custom-map-modal .save-map-confirm-btn {
    font-size: 1.15em;  /* 20.4px → 15.6px */
}

.custom-map-modal .delete-dialog-message,
.custom-map-modal .review-map-message {
    font-size: 1.1em;   /* 19px → 15px */
}

.custom-map-modal .custom-map-btn {
    font-size: 1.1em;   /* 19px → 15px */
}

/* ==================== 删除弹窗 ==================== */
.delete-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 1.2em;
}

.delete-dialog-message {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.4em;
    line-height: 1.5;
    word-break: break-word;
}

.delete-dialog-actions {
    display: flex;
    gap: 0.8em;
}

.delete-dialog-actions .custom-map-btn {
    flex: 1;
}

.delete-confirm-btn {
    background: rgba(239, 83, 80, 0.25) !important;
    border-color: rgba(239, 83, 80, 0.5) !important;
}

.delete-confirm-btn:hover:not(.disabled) {
    background: rgba(239, 83, 80, 0.4) !important;
}

/* ==================== 审核弹窗 ==================== */
.review-map-message {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.4em;
    line-height: 1.5;
    word-break: break-word;
}

.review-map-actions {
    display: flex;
    gap: 0.8em;
}

.review-map-actions .custom-map-btn {
    flex: 1;
}

.review-approve-btn {
    background: rgba(102, 187, 106, 0.22) !important;
    color: #a5d6a7;
}

.review-approve-btn:hover:not(.disabled) {
    background: rgba(102, 187, 106, 0.34) !important;
}

.review-reject-btn {
    background: rgba(239, 83, 80, 0.22) !important;
    color: #ef9a9a;
}

.review-reject-btn:hover:not(.disabled) {
    background: rgba(239, 83, 80, 0.34) !important;
}

/* 撤回过审：可恢复的破坏性操作，用琥珀色区分于「驳回」（红） */
.review-revoke-btn {
    background: rgba(255, 167, 38, 0.18) !important;
    color: #ffb74d;
}

.review-revoke-btn:hover:not(.disabled) {
    background: rgba(255, 167, 38, 0.3) !important;
}


/* ==================== 新建地图：模板选择弹窗 ==================== */

/* 两个卡片要并排，比通用弹窗宽一档 */
.template-dialog {
    max-width: 32em;
}

.template-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.template-options {
    display: flex;
    gap: 0.8em;
}

.template-option {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    padding: 1em 0.8em;
    border: 0.12em solid rgba(255, 255, 255, 0.12);
    border-radius: 0.8em;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, color 0.18s;
}

.template-option:hover {
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.08);
}

.template-option.active {
    border-color: #4fc3f7;
    background: rgba(79, 195, 247, 0.13);
    color: #bfe9ff;
    box-shadow: 0 0 0 0.12em rgba(79, 195, 247, 0.22);
}

/* 迷你棋盘用 currentColor 描边，跟着卡片的选中/未选中状态走 */
.template-option-board {
    width: 4.6em;
    height: 4.6em;
    color: currentColor;
}

/* 卡片文字与弹窗其余文字同层级（原 1.5em / 1.15em 在 0.85em 基准下是 20.4 / 15.6px，偏大） */
.template-option-title {
    font-size: 1.2em;   /* 20.4px → 16.3px */
    font-weight: 700;
    color: #fff;
}

.template-option-desc {
    font-size: 0.95em;  /* 15.6px → 12.9px */
    line-height: 1.35;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
}

/* 管理员面板 · 用户数据（平台 × 新老 × 留存）
   配色沿用面板本体：#101a35 底 / #16234a 卡片 / #1c2a4d 分隔 / #9fb0d8 次要文字 / #ffd54f 强调 */

/* 这里的排版自己兜住 box-sizing：不依赖全局 reset 是否加载
   （带 padding 的块一律 width:100%，内容盒模式下会撑出滚动条） */
.admin-stats,
.admin-stats *,
.admin-stats *::before,
.admin-stats *::after {
    box-sizing: border-box;
}

.admin-stats {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.admin-stats-loading {
    color: #6b7aa8;
    text-align: center;
    padding: 2.5em 0;
    font-size: 0.9em;
}

.admin-stats-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
    padding: 0.8em 1.2em 0.4em;
}

/* 分段控件（7/14/30 天、全部/新增/老用户）：两处复用，尺寸只差一档 */
.admin-segmented {
    display: flex;
    background: #16234a;
    border-radius: 0.6em;
    padding: 0.15em;
    flex-shrink: 0;
}

.admin-segmented-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    border: none;
    background: transparent;
    color: #9fb0d8;
    font-size: 0.78em;
    padding: 0.4em 0.7em;
    border-radius: 0.45em;
    cursor: pointer;
    transition: 0.18s;
    touch-action: manipulation;
    white-space: nowrap;
}

.admin-segmented-btn.is-active {
    background: #2d4073;
    color: #ffffff;
}

.admin-segmented-sm .admin-segmented-btn {
    font-size: 0.72em;
    padding: 0.3em 0.55em;
}

.admin-stats-refresh {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    border: none;
    background: #2d4073;
    color: #cfe0ff;
    font-size: 0.78em;
    padding: 0.45em 0.8em;
    border-radius: 0.5em;
    cursor: pointer;
    transition: 0.2s;
    touch-action: manipulation;
    white-space: nowrap;
}

.admin-stats-refresh:hover {
    background: #3d56a3;
}

.admin-stats-refresh:disabled {
    opacity: 0.6;
    cursor: default;
}

.admin-stats-cards {
    display: flex;
    gap: 0.6em;
    padding: 0.6em 1.2em 0.9em;
}

.admin-stats-cards .admin-stat {
    margin-right: 0;
    padding: 0.7em 0.3em;
    min-width: 0;
}

.admin-stats-cards .admin-stat-value {
    font-size: 1.3em;
}

.admin-stats-cards .admin-stat-label {
    font-size: 0.72em;
    line-height: 1.25;
}

.admin-stats-section {
    padding: 0.2em 1.2em 0.9em;
    border-bottom: 1px solid #1c2a4d;
}

.admin-stats-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6em;
    margin-bottom: 0.4em;
}

.admin-stats-section-title {
    color: #e8edf8;
    font-size: 0.9em;
    font-weight: bold;
}

.admin-stats-section-hint {
    color: #6b7aa8;
    font-size: 0.72em;
    text-align: right;
}

.admin-chart-wrap {
    position: relative;
    width: 100%;
}

.admin-chart {
    display: block;
    width: 100%;
    overflow: visible;
}

.admin-chart-empty-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #3d4d78;
    font-size: 1.4em;
    pointer-events: none;
}

.admin-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    margin-top: 0.35em;
}

.admin-legend-item {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    display: flex;
    align-items: center;
    gap: 0.3em;
    background: #16234a;
    border: none;
    border-radius: 0.5em;
    color: #cfe0ff;
    font-size: 0.72em;
    padding: 0.25em 0.5em;
    cursor: pointer;
    transition: 0.18s;
    touch-action: manipulation;
}

.admin-legend-item:hover {
    background: #1d2d5c;
}

.admin-legend-item.is-off {
    opacity: 0.35;
}

.admin-legend-dot {
    width: 0.6em;
    height: 0.6em;
    border-radius: 0.15em;
    flex-shrink: 0;
    display: inline-block;
}

.admin-legend-count {
    color: #ffd54f;
    font-size: 0.92em;
}

.admin-stats-detail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
    margin-top: 0.45em;
    min-height: 1.6em;
}

.admin-stats-detail-day {
    color: #ffd54f;
    font-size: 0.78em;
    font-weight: bold;
    margin-right: 0.2em;
}

.admin-stats-detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    background: #16234a;
    border-radius: 0.4em;
    color: #cfe0ff;
    font-size: 0.72em;
    padding: 0.15em 0.4em;
}

.admin-stats-detail-empty {
    color: #6b7aa8;
    font-size: 0.75em;
}

.admin-cohort-picker {
    display: flex;
    gap: 0.35em;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.35em;
    margin-top: 0.3em;
}

.admin-cohort-chip {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #16234a;
    border: 1px solid transparent;
    border-radius: 0.5em;
    padding: 0.25em 0.55em;
    cursor: pointer;
    transition: 0.18s;
    touch-action: manipulation;
}

.admin-cohort-chip.is-active {
    border-color: #ffd54f;
    background: #24345f;
}

.admin-cohort-chip-date {
    color: #cfe0ff;
    font-size: 0.72em;
}

.admin-cohort-chip-size {
    color: #ffd54f;
    font-size: 0.68em;
}

.admin-retention-table {
    margin-top: 0.6em;
    border-radius: 0.5em;
    overflow: hidden;
}

.admin-retention-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
    gap: 0.3em;
    padding: 0.35em 0.6em;
    font-size: 0.75em;
    color: #cfe0ff;
    cursor: pointer;
}

.admin-retention-row > span {
    text-align: right;
}

.admin-retention-row > span:first-child {
    text-align: left;
    color: #9fb0d8;
}

.admin-retention-row.is-head {
    color: #6b7aa8;
    font-size: 0.7em;
    cursor: default;
    background: #16234a;
}

.admin-retention-row.is-head > span:first-child {
    color: #6b7aa8;
}

.admin-retention-row:not(.is-head):nth-child(odd) {
    background: #131f3f;
}

.admin-retention-row.is-active {
    background: #24345f;
}

.admin-stats-foot {
    padding: 0.7em 1.2em 1.4em;
    color: #5b6a94;
    font-size: 0.72em;
    text-align: center;
}

@media (max-width: 480px) {
    .admin-stats-cards {
        gap: 0.4em;
    }
    .admin-stats-cards .admin-stat-value {
        font-size: 1.15em;
    }
}

/* 平台口径切换（最近平台 / 获取渠道）
   两个口径下的「未知」含义完全不同，所以切换旁必须一直挂着说明，不能只放两个按钮。 */
.admin-stats-basis {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0 1.2em 0.5em;
    flex-wrap: wrap;
}

.admin-stats-basis-label {
    font-size: 0.75em;
    color: #9fb0d8;
    flex-shrink: 0;
}

.admin-stats-basis-note {
    font-size: 0.7em;
    color: #6b7aa8;
    line-height: 1.4;
    flex: 1 1 8em;
    min-width: 0;
}

@media (max-width: 420px) {
    .admin-stats-basis {
        padding: 0 0.8em 0.5em;
    }
}

/* 邀请跳房二次确认（全局层，盖在 toast 之上） */
.invite-leave-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.55);
    z-index: 10000;
}

.invite-leave-panel {
    min-width: 14em;
    max-width: 22em;
    padding: 1.8rem 1.4rem 1.2rem;
    border-radius: 0.5em;
    background: var(--c-g-panel, #2a2438);
    box-shadow: 0.3em 0.3em 3em #281b32, -0.3em -0.3em 3em #281b32;
    font-size: 1em;
}

.invite-leave-title {
    color: #ddd7ec;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 1.2rem;
}

.invite-leave-buttons {
    display: flex;
    justify-content: space-around;
    gap: 0.8rem;
}

.invite-leave-btn {
    height: 2.2em;
    border: 0;
    border-radius: 0.25em;
    background: var(--c-g-button, #4a4460);
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    transition: filter 0.2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    padding: 0 0.8em;
}

.invite-leave-btn:hover {
    filter: brightness(1.2);
}

.invite-leave-btn--danger {
    background-color: rgb(217, 87, 83);
    background-image: linear-gradient(to left top, rgb(177 20 20), rgb(189 109 30));
}

@media (max-width: 600px) {
    .invite-leave-panel {
        min-width: 12em;
        max-width: 16em;
        padding: 1.4rem 1rem 1rem;
    }

    .invite-leave-btn {
        font-size: 0.95rem;
        padding: 0 1em;
    }
}

/* ============================================================
   排行榜（rankPage）
   视觉：清爽深色。没有渐变按钮、没有描边卡片、没有发光 —— 层级全靠
        底色明度差（页面 < 行 < 悬停）与一点文字灰阶，强调色只留一处水蓝。
   ============================================================ */

.rank-page-root {
    --rk-bg: #0C1017;
    --rk-bg-top: #101521;
    --rk-row: #161B23;
    --rk-row-hover: #1B212B;
    --rk-row-top: #1A202A;
    --rk-row-self: #182431;
    --rk-text: #E7ECF3;
    --rk-text-dim: #8D99AB;
    --rk-text-weak: #6E7A8C;
    --rk-accent: #5EAAD6;
    --rk-gold: #E8C67A;
    --rk-silver: #C7D2E0;
    --rk-bronze: #C98F68;

    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    color: var(--rk-text);
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', Arial, sans-serif;
    background: linear-gradient(180deg, var(--rk-bg-top) 0%, var(--rk-bg) 42%, var(--rk-bg) 100%);
}

/* 内容外壳：负责最大宽度，滚动由 .rank-page-root 承担 */
.rank-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    min-height: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ---------------- 顶栏 ---------------- */
.rank-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(12, 16, 23, 0.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.rank-back-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--rk-text);
    font-size: 19px;
    cursor: pointer;
    transition: background 0.16s ease;
}

.rank-back-btn:hover {
    background: rgba(255, 255, 255, 0.11);
}

.rank-heading {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.2;
}

.rank-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--rk-text);
}

.rank-subtitle {
    margin-top: 2px;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--rk-text-weak);
}

.rank-top-chip {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--rk-text-weak);
}

/* ---------------- 列表 ---------------- */
.rank-list-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 4px 12px 8px;
    box-sizing: border-box;
}

.rank-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rank-list-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 12px;
    box-sizing: border-box;
    border: none;
    border-radius: 10px;
    background: var(--rk-row);
    transition: background 0.16s ease;
    animation: rank-row-in 0.3s ease-out both;
}

.rank-list-item:hover {
    background: var(--rk-row-hover);
}

@keyframes rank-row-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 名次：纯数字，前三名只换字色 */
.rank-index {
    flex: 0 0 auto;
    width: 22px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--rk-text-weak);
}

/* 前三名：统一提亮一档，颜色区分只交给名次数字（不做奖牌块、不加描边） */
.rank-list-item.is-top-1,
.rank-list-item.is-top-2,
.rank-list-item.is-top-3 {
    background: var(--rk-row-top);
}

.rank-list-item.is-top-1:hover,
.rank-list-item.is-top-2:hover,
.rank-list-item.is-top-3:hover {
    background: #1F2632;
}

.rank-list-item.is-top-1 .rank-index,
.rank-list-item.is-top-2 .rank-index,
.rank-list-item.is-top-3 .rank-index {
    font-size: 16px;
    font-weight: 700;
}

.rank-list-item.is-top-1 .rank-index {
    color: var(--rk-gold);
}

.rank-list-item.is-top-2 .rank-index {
    color: var(--rk-silver);
}

.rank-list-item.is-top-3 .rank-index {
    color: var(--rk-bronze);
}

/* 段位徽章：整块缩放靠 font-size，RankName 内部全是 em */
.rank-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.66em;
}

.rank-badge-lg {
    font-size: 0.78em;
}

/* 行内徽章不要彩色光晕，只留一点暗投影把它从底色上托起来
   （特异性要压过下面 .rank-name-badge .badge 的基础规则） */
.rank-badge .rank-name-badge .badge {
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
}

.rank-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
}

.rank-nickname {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    color: var(--rk-text);
    letter-spacing: 0.01em;
}

.rank-tier {
    font-size: 11px;
    letter-spacing: 0.05em;
    color: var(--rk-text-weak);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-point {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    min-width: 56px;
    justify-content: flex-end;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--rk-text);
}

.rank-point i,
.rank-self-point i {
    font-style: normal;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--rk-text-weak);
}

.rank-list-item.is-top-1 .rank-point {
    color: var(--rk-gold);
}

/* 自己那一行（在前 20 内时）：只换底色 */
.rank-list-item.is-self {
    background: var(--rk-row-self);
}

.rank-list-item.is-self:hover {
    background: #1D2B3A;
}

.rank-list-item.is-self .rank-nickname {
    color: #A8CBE4;
}

/* ---------------- 空态 / 骨架屏 ---------------- */
.rank-empty {
    padding: 48px 16px;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.05em;
    color: var(--rk-text-weak);
}

.rank-skeleton {
    pointer-events: none;
    animation: none;
}

.rank-skeleton-badge,
.rank-skeleton-name,
.rank-skeleton-point {
    border-radius: 5px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.08) 50%,
            rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
    animation: rank-skeleton-shine 1.6s ease-in-out infinite;
}

.rank-skeleton-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.rank-skeleton-name {
    flex: 1 1 auto;
    height: 11px;
}

.rank-skeleton-point {
    width: 44px;
    height: 11px;
}

@keyframes rank-skeleton-shine {
    0% {
        background-position: 120% 0;
    }

    100% {
        background-position: -60% 0;
    }
}

/* ---------------- 我的排名（吸底，纯色，不画边） ---------------- */
.rank-self-info {
    position: sticky;
    bottom: 0;
    z-index: 9;
    /* 左右跟列表同宽，避免比行更宽而多出一条暗块 */
    margin: 0 12px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    box-sizing: border-box;
    border-radius: 10px 10px 0 0;
    background: #141A23;
}

/* 列表滚到吸底栏下方时淡出，避免行被硬生生切断 */
.rank-self-info::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(12, 16, 23, 0) 0%, rgba(12, 16, 23, 0.85) 100%);
}

.rank-self-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.rank-self-label {
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--rk-text-weak);
}

.rank-self-rank {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--rk-accent);
}

.rank-self-point {
    margin-left: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--rk-text);
}

.rank-self-body {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rank-self-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
}

.rank-progress {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rank-progress-track {
    position: relative;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.rank-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--rk-accent);
    transition: width 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.rank-progress-text {
    font-size: 11px;
    letter-spacing: 0.03em;
    color: var(--rk-text-weak);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------- 自定义徽章悬浮提示 ---------------- */
.badge-tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.custom-tooltip {
    visibility: hidden;
    opacity: 0;
    width: -moz-max-content;
    width: max-content;
    max-width: 200px;
    background: #1B212B;
    color: #E7ECF3;
    text-align: center;
    border-radius: 6px;
    padding: 6px 12px;
    position: absolute;
    z-index: 99;
    left: 50%;
    top: 110%;
    transform: translateX(-50%);
    font-size: 12px;
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', Arial, sans-serif;
    font-weight: 400;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    transition: opacity 0.18s, visibility 0.18s;
    white-space: pre-line;
}

.badge-tooltip-wrapper:hover .custom-tooltip {
    visibility: visible;
    opacity: 1;
}

/* ---------------- 段位徽章本体（RankName 共用，改动需同步大厅） ---------------- */
/* 顶层容器：控制整体缩放 */
.rank-name-badge {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 1em;
    /* 只需要调这里即可整体缩放 */
}

/* badge 最上层 */
.rank-name-badge .badge {
    width: 2.6em;
    height: auto;
    z-index: 20;
    pointer-events: none;
    filter: drop-shadow(0 0 1em currentColor);
}

.rank-up-animate {
    transform: scale(1);
    animation: rankUpFlash 1.2s cubic-bezier(.4, 2, .6, 1);
}

@keyframes rankUpFlash {
    0% {
        transform: scale(0.9);
        filter: drop-shadow(0 0 0 currentColor);
    }

    20% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 2em currentColor);
    }

    40% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 3em currentColor);
    }

    60% {
        transform: scale(1);
        filter: drop-shadow(0 0 2em currentColor);
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0.6em currentColor);
    }
}

/* rank 主体 */
.rank-name {
    position: relative;
    font-weight: bold;
    font-size: 0.32em;
    color: #2e7ad3;
    letter-spacing: 0.06em;
    text-shadow: 0 0.11em 0.44em #b3d1ff, 0 0.05em 0 #fff;
    padding: 0 0.66em 0.22em 0.66em;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: brightness(1.2);
}

/* 文字 */
.rank-text {
    position: relative;
    z-index: 10;
    transition: color 0.2s;
}

/* 不同段位颜色 */
.rank-0 {
    color: #888;
}

.rank-1 {
    color: #4caf50;
}

.rank-2 {
    color: #2e7ad3;
}

.rank-3 {
    color: #9c27b0;
}

.rank-4 {
    color: #ffd700;
}

.rank-5 {
    color: #ff9800;
}

.rank-6 {
    color: #f44336;
}

.rank-7 {
    color: #e91e63;
}

/* ribbon 在文字下方 */
.rank-ribbon {
    position: absolute;
    width: 4.8em;
    top: 0.2em;
    transform: scaleX(1.5);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.33em;
    z-index: 0;
    pointer-events: none;
}

.rank-ribbon img {
    width: 100%;
    height: auto;
}

/* ---------------- 小屏 / 矮屏 ---------------- */
@media (max-width: 600px) {
    .rank-list-container {
        padding: 2px 10px 6px;
    }

    .rank-list {
        gap: 5px;
    }

    .rank-list-item {
        padding: 9px 12px 9px 10px;
        border-radius: 9px;
    }

    .rank-self-info {
        margin: 0 10px;
        padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
    }
}

@media (max-height: 560px) {
    .rank-header {
        padding: 8px 14px;
    }

    .rank-subtitle {
        display: none;
    }
}

.interaction-page-root {
  width: 100vw;
  min-height: 100vh;
  background: #f7f7fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 60px;
}
.interaction-vote-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 2px 12px #0002;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.interaction-vote-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 8px 20px;
  border-bottom: 1px solid #eee;
  font-size: 18px;
  font-weight: bold;
}
.interaction-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  margin-left: 8px;
}
.interaction-messages {
  max-height: 180px;
  overflow-y: auto;
  padding: 8px 20px;
  font-size: 15px;
  color: #333;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.interaction-message {
  background: #f2f2f7;
  border-radius: 8px;
  padding: 6px 12px;
  word-break: break-all;
}
.interaction-input-bar {
  display: flex;
  align-items: center;
  padding: 10px 16px 14px 16px;
  border-top: 1px solid #eee;
  background: #fafbfc;
}
.interaction-input {
  flex: 1 1 auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 15px;
  outline: none;
  margin-right: 8px;
}
.interaction-send-btn {
  background: #4f8cff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 18px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s;
}
.interaction-send-btn:hover {
  background: #2563eb;
}
@media (max-width: 600px) {
  .interaction-vote-popup {
    max-width: 100vw;
    border-radius: 0 0 12px 12px;
  }
  .interaction-messages {
    max-height: 120px;
    padding: 8px 8px;
  }
  .interaction-input-bar {
    padding: 8px 8px 10px 8px;
  }
}

/* ============================================================
   对局录像（replay）—— 列表页 + 回放播放器
   视觉：深色游戏风。整体不画边框，用底色层次 + 柔和阴影区分层级，
        金色只留给「播放 / 获胜」这类关键点，避免满屏描边的模板感。
   ============================================================ */

.replay-page,
.replay-list-page {
    --rp-gold: #E7B449;
    --rp-gold-deep: #C9962E;
    --rp-bg-0: #12161F;
    --rp-bg-1: #1B2130;
    --rp-bg-2: #232B3D;
    --rp-text: #F5F7FA;
    --rp-text-dim: #A8B2C4;
    --rp-green: #3DDC97;
    --rp-red: #FF6B6B;
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', Arial, sans-serif;
    color: var(--rp-text);
}

/* ---------------- 播放器容器 ---------------- */
.replay-page {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(120% 120% at 50% 0%, #1B2130 0%, #12161F 60%, #0C0F16 100%);
}

.replay-stage {
    position: absolute;
    inset: 0;
}

/* ---------------- 顶部栏 ---------------- */
.replay-topbar,
.replay-list-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    z-index: 2600;
    background: linear-gradient(180deg, rgba(12, 15, 22, 0.88) 0%, rgba(12, 15, 22, 0.35) 70%, rgba(12, 15, 22, 0) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    transition: opacity 0.26s ease, transform 0.26s ease;
}

/* 点击画面中心隐藏控件，避免遮挡棋盘 */
.replay-topbar.is-hidden {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.replay-topbar.is-hidden > * {
    pointer-events: none;
}

.replay-topbar > *,
.replay-list-topbar > * {
    pointer-events: auto;
}

.replay-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--rp-text);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.replay-back:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* 图标：实心箭头，尺寸随字号，垂直居中不留基线缝隙 */
.replay-back-arrow {
    display: block;
    width: 0.92em;
    height: 0.92em;
    flex: 0 0 auto;
    color: var(--rp-gold);
}

.replay-title,
.replay-list-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* 标题='对局录像 · 地图名|皮肤名'：名字长度由 JS 先截断（replayUtils.replayTitleLabel），
   这里再做一层兜底 —— 顶栏变窄时省略号收尾，绝不换行把顶栏顶高 */
.replay-title {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.replay-title-map {
    font-size: 13px;
    font-weight: 400;
    color: var(--rp-gold);
}

.replay-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

/* ---------------- 发布到公共 ---------------- */
.replay-public-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(61, 220, 151, 0.12);
    color: var(--rp-green);
    font-size: 12px;
}

.replay-public-tag svg {
    width: 0.9em;
    height: 0.9em;
}

.replay-publish-wrap {
    position: relative;
}

.replay-publish-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--rp-text);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.replay-publish-btn svg {
    width: 0.92em;
    height: 0.92em;
    color: var(--rp-gold);
}

.replay-publish-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

.replay-publish-btn.is-public {
    color: var(--rp-green);
    background: rgba(61, 220, 151, 0.1);
}

.replay-publish-btn.is-public svg {
    color: var(--rp-green);
}

/* 已公开但不是自己发布的：弱化显示，避免误以为是自己发布的 */
.replay-publish-btn.is-others {
    color: var(--rp-text-dim);
}

.replay-publish-btn.is-others svg {
    color: var(--rp-text-dim);
}

.replay-publish-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 2700;
    width: 288px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    text-align: left;
    border-radius: 14px;
    background: #1B2130;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    animation: replay-pop 0.18s ease-out;
}

.replay-publish-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
}

.replay-publish-sub,
.replay-publish-tip {
    font-size: 12px;
    line-height: 1.6;
    color: var(--rp-text-dim);
}

.replay-publish-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 13px;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.replay-publish-check input {
    width: 15px;
    height: 15px;
    accent-color: var(--rp-gold);
    cursor: pointer;
}

.replay-publish-msg {
    font-size: 12px;
    color: var(--rp-green);
}

.replay-publish-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.replay-publish-actions .replay-btn {
    height: 34px;
    padding: 0 16px;
}

.replay-publish-actions .replay-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.replay-round-tag {
    font-size: 12px;
    padding: 4px 0;
    color: var(--rp-text-dim);
}

/* ---------------- 底部控制条 ---------------- */
.replay-controls {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: 2600;
    display: flex;
    align-items: center;
    gap: 16px;
    width: min(880px, calc(100vw - 132px));
    padding: 12px 18px;
    border-radius: 16px;
    background: rgba(20, 25, 36, 0.78);
    border: none;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: opacity 0.26s ease, transform 0.26s ease;
}

/* 隐藏态：整体下沉淡出，且不再吃点击 */
.replay-controls.is-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(140%);
    pointer-events: none;
}

/* 右下角常驻圆钮：显示/隐藏上下控件（不占用棋盘点击） */
.replay-ui-toggle {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 2650;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: rgba(20, 25, 36, 0.6);
    color: var(--rp-text-dim);
    font-size: 17px;
    cursor: pointer;
    opacity: 0.5;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.replay-ui-toggle:hover,
.replay-ui-toggle:focus-visible {
    opacity: 1;
    color: var(--rp-text);
    background: rgba(32, 39, 54, 0.92);
    outline: none;
}

.replay-ui-toggle:active {
    transform: translateY(0) scale(0.95);
}

/* 控件已收起时：它是唯一的唤出入口，保留足够可见度 */
.replay-ui-toggle.is-off {
    opacity: 0.6;
}

.replay-ui-toggle.is-off:hover,
.replay-ui-toggle.is-off:focus-visible {
    opacity: 1;
}

.replay-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.07);
    color: var(--rp-text-dim);
    font-size: 17px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.replay-btn-icon:hover {
    color: var(--rp-text);
    background: rgba(255, 255, 255, 0.14);
}

.replay-play-btn {
    width: 50px;
    height: 50px;
    font-size: 20px;
    color: #12161F;
    background: var(--rp-gold);
    border: none;
    box-shadow: 0 8px 20px rgba(231, 180, 73, 0.22);
}

.replay-play-btn:hover {
    color: #12161F;
    filter: brightness(1.06);
}

/* 桌面端：倍速组不额外占位，控件显隐钮排在「回到开头」之后（保持原有排布） */
.replay-speeds-row {
    display: contents;
}

.replay-restart-btn {
    order: 1;
}

.replay-ui-eye {
    order: 2;
}

.replay-progress {
    flex: 1 1 auto;
    padding: 0 6px;
}

.replay-counter {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 96px;
    font-size: 11px;
    color: var(--rp-text-dim);
    white-space: nowrap;
}

.replay-counter-round {
    font-size: 13px;
    font-weight: 600;
    color: var(--rp-gold);
}

.replay-speeds {
    display: flex;
    gap: 6px;
}

.replay-speed-btn {
    height: 30px;
    min-width: 40px;
    padding: 0 8px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--rp-text-dim);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.replay-speed-btn:hover {
    color: var(--rp-text);
    background: rgba(255, 255, 255, 0.08);
}

.replay-speed-btn.active {
    color: #12161F;
    background: var(--rp-gold);
    font-weight: 600;
}

/* rc-slider 深色主题 */
.replay-progress .rc-slider-rail {
    background-color: rgba(168, 178, 196, 0.22);
    height: 5px;
    border-radius: 3px;
}

.replay-progress .rc-slider-track {
    background: linear-gradient(90deg, var(--rp-gold-deep), var(--rp-gold));
    height: 5px;
    border-radius: 3px;
}

.replay-progress .rc-slider-handle {
    width: 15px;
    height: 15px;
    margin-top: -5px;
    border: 2px solid #12161F;
    background: var(--rp-gold);
    box-shadow: 0 0 0 3px rgba(231, 180, 73, 0.25);
    opacity: 1;
}

.replay-progress .rc-slider-handle:hover,
.replay-progress .rc-slider-handle:focus,
.replay-progress .rc-slider-handle:active {
    border-color: #12161F;
    box-shadow: 0 0 0 5px rgba(231, 180, 73, 0.3);
}

/* ---------------- 遮罩 / 状态 ---------------- */
.replay-mask {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(12, 15, 22, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.replay-mask-text {
    font-size: 14px;
    color: var(--rp-text-dim);
    letter-spacing: 1px;
}

.replay-error {
    color: var(--rp-red);
}

.replay-spinner {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid rgba(231, 180, 73, 0.2);
    border-top-color: var(--rp-gold);
    animation: replay-spin 0.9s linear infinite;
}

@keyframes replay-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------------- 回放结束 ---------------- */
.replay-end-overlay {
    position: fixed;
    inset: 0;
    z-index: 2800;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 15, 22, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.replay-end-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 44px;
    border-radius: 18px;
    background: #1B2130;
    border: none;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.62);
    animation: replay-pop 0.24s ease-out;
}

@keyframes replay-pop {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.replay-end-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--rp-gold);
}

.replay-end-sub {
    font-size: 13px;
    color: var(--rp-text-dim);
}

.replay-end-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.replay-btn {
    height: 38px;
    padding: 0 20px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--rp-text);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.replay-btn:hover {
    background: rgba(255, 255, 255, 0.14);
}

.replay-btn-primary {
    color: #12161F;
    font-weight: 600;
    background: var(--rp-gold);
    box-shadow: 0 10px 24px rgba(231, 180, 73, 0.22);
}

.replay-btn-primary:hover {
    background: #f0c05c;
}

/* ============================================================
   录像列表页
   ============================================================ */
/* #root 是 100vh + overflow:hidden 的容器，列表页自己当滚动容器，
   否则内容会被裁掉 */
.replay-list-page {
    height: 100vh;
    width: 100%;
    /* 必须 border-box：否则 padding 会加在 100% 之外，右侧留白被撑出视口而看起来贴边 */
    box-sizing: border-box;
    padding: 0 24px 48px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg, #12161F 0%, #0B0E15 100%);
}

/* 顶栏在页面流里占位（不再 fixed 盖住第一行卡片），滚动时吸顶 */
.replay-list-page .replay-list-topbar {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    z-index: 40;
    margin: 0 -24px 16px;
    padding: 0 24px;
    background: #12161F;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* 实心底栏要能挡住穿过去点击卡片 */
    pointer-events: auto;
}

.replay-list-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--rp-text-dim);
}

/* 列表刷新：录像在终局后约 4s 才落库，给用户一个主动拉取入口 */
.replay-refresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--rp-text);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease;
}

.replay-refresh:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14);
}

.replay-refresh:disabled {
    opacity: 0.6;
    cursor: default;
}

.replay-refresh svg {
    width: 0.92em;
    height: 0.92em;
    color: var(--rp-gold);
}

.replay-refresh .is-spinning {
    animation: replay-spin 0.9s linear infinite;
}

/* 分类切换：我的录像 / 公共录像 */
.replay-scope-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1200px;
    margin: 0 auto 16px;
}

.replay-scope-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--rp-text-dim);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.replay-scope-tab svg {
    width: 0.92em;
    height: 0.92em;
}

.replay-scope-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--rp-text);
}

.replay-scope-tab.active {
    background: var(--rp-gold);
    color: #12161F;
    font-weight: 600;
}

.replay-scope-tab.active svg {
    color: #12161F;
}

/* 管理员：按日期加载的日期条（吸在顶栏下方，横向滚动） */
.replay-date-bar {
    position: sticky;
    top: 56px;
    z-index: 35;
    margin: -8px -24px 16px;
    padding: 6px 24px 10px;
    background: #12161F;
}

.replay-date-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.replay-date-scroll::-webkit-scrollbar {
    display: none;
}

.replay-date-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--rp-text-dim);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}

.replay-date-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--rp-text);
}

.replay-date-chip.active {
    background: var(--rp-gold);
    color: #12161F;
    font-weight: 600;
}

.replay-date-count {
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    font-size: 11px;
    font-weight: 400;
}

.replay-date-chip.active .replay-date-count {
    background: rgba(18, 22, 31, 0.18);
    color: #12161F;
}

.replay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 分页：还有更多录像时手动加载下一页 */
.replay-list-more {
    display: flex;
    justify-content: center;
    margin: 24px auto 8px;
}

.replay-list-more .replay-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.replay-list-more .replay-btn svg {
    width: 0.9em;
    height: 0.9em;
    color: var(--rp-gold);
}

.replay-list-more .replay-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.replay-list-more .is-spinning {
    animation: replay-spin 0.9s linear infinite;
}

.replay-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    text-align: left;
    border-radius: 14px;
    border: none;
    background: rgba(255, 255, 255, 0.035);
    color: var(--rp-text);
    cursor: pointer;
    overflow: hidden;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.replay-card:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
}

/* 自己获胜的那局：只用一点暖色底区分，不加边框 */
.replay-card-win {
    background: rgba(231, 180, 73, 0.07);
}

.replay-card-win:hover {
    background: rgba(231, 180, 73, 0.11);
}

.replay-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.replay-card-map {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    /* 标题可能被拉长（地图名|皮肤名）：让它可收缩、超出用省略号，而不是把徽标挤出去 */
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.replay-card-badges {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.replay-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--rp-text-dim);
}

.replay-card-badge svg {
    width: 0.9em;
    height: 0.9em;
}

.replay-card-badge.win {
    color: var(--rp-gold);
    font-weight: 600;
}

/* 已发布到公共 */
.replay-card-badge.public {
    color: var(--rp-green);
    font-weight: 600;
}

/* 公开时隐藏了聊天 */
.replay-card-badge.muted {
    color: rgba(168, 178, 196, 0.7);
}

.replay-card-players {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.replay-card-player {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--rp-text-dim);
}

.replay-card-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

.replay-card-name.champion {
    color: var(--rp-gold);
    font-weight: 600;
}

.replay-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--rp-text-dim);
}

.replay-card-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.replay-card-hover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 0.2s ease, opacity 0.2s ease;
}

.replay-card:hover .replay-card-hover {
    height: 26px;
    opacity: 1;
}

.replay-card-play {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rp-gold);
}

.replay-card-winner {
    font-size: 12px;
    color: var(--rp-text-dim);
}

/* 列表页状态区 */
.replay-list-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 50vh;
    text-align: center;
}

.replay-empty-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--rp-text);
}

.replay-empty-sub {
    font-size: 13px;
    color: var(--rp-text-dim);
}

/* 移动端 */
@media (max-width: 720px) {
    .replay-controls {
        flex-wrap: wrap;
        gap: 10px;
        row-gap: 12px;
        padding: 10px 12px;
        bottom: 12px;
        /* 窄屏控制条接近满宽 */
        width: calc(100vw - 24px);
    }

    /* 控件收起时：回到屏幕右下角，不再需要避开控制条 */
    .replay-ui-toggle {
        right: 10px;
        bottom: 16px;
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    /* 第一排：播放/暂停 + 重放（回到开头） */
    .replay-play-btn {
        order: 1;
        width: 46px;
        height: 46px;
        font-size: 18px;
    }

    .replay-restart-btn {
        order: 2;
        width: 46px;
        height: 46px;
    }

    /* 第一排剩余空间给进度条与回合信息 */
    .replay-progress {
        order: 3;
        flex: 1 1 90px;
        min-width: 80px;
        padding: 0 2px;
    }

    .replay-counter {
        order: 4;
        align-items: flex-end;
        min-width: auto;
    }

    /* 第二排：倍速 + 控件显隐钮整行独占 */
    .replay-speeds-row {
        order: 5;
        display: flex;
        flex: 1 1 100%;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .replay-speeds {
        order: 0;
        flex: 0 1 auto;
        justify-content: center;
    }

    .replay-ui-eye {
        order: 0;
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .replay-grid {
        grid-template-columns: 1fr;
    }

    /* 顶部栏拥挤：发布面板宽度收窄，避免超出屏幕 */
    .replay-topbar-right {
        gap: 8px;
    }

    .replay-publish-panel {
        right: -6px;
        width: min(288px, calc(100vw - 32px));
    }

    .replay-publish-btn,
    .replay-public-tag {
        padding: 0 10px;
    }

    /* 播放器顶部栏：返回按钮只留箭头，标题只留地图名 */
    .replay-back-text,
    .replay-title-main,
    .replay-title-sep {
        display: none;
    }

    /* 列表页顶部栏：只留返回箭头，隐藏「全部对局录像 / 公共录像」标题 */
    .replay-list-title {
        display: none;
    }

    /* 只留图标的按钮：放大点击区域与图标，避免又小又难点（宽度约为原尺寸的 1.5 倍） */
    .replay-back {
        flex: 0 0 auto;
        width: 60px;
        height: 40px;
        padding: 0;
        gap: 0;
        font-size: 16px;
        border-radius: 12px;
    }

    .replay-back .replay-back-arrow {
        width: 1em;
        height: 1em;
    }

    .replay-ui-toggle {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }

    .replay-title-map {
        font-size: 14px;
    }

    /* 列表页整体留白：左右适中、底部避开手机安全区 */
    .replay-list-page {
        padding: 0 24px calc(64px + env(safe-area-inset-bottom, 0px));
    }

    .replay-list-page .replay-list-topbar,
    .replay-date-bar {
        margin-left: -24px;
        margin-right: -24px;
        padding-left: 24px;
        padding-right: 24px;
    }
}

.privacy-policy-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}

.privacy-policy-modal {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.1),
        0 8px 24px rgba(0, 0, 0, 0.15),
        0 16px 40px rgba(0, 0, 0, 0.2);
    padding: 32px;
    max-width: 90vw;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease-out;
    border: 1px solid rgba(0, 0, 0, 0.08);
    
    @media (max-width: 640px) {
        max-width: 95vw;
        padding: 24px;
        border-radius: 12px;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.privacy-policy-header {
    margin-bottom: 24px;
    text-align: center;
}

.privacy-policy-header h1 {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: -0.5px;
    
    @media (max-width: 640px) {
        font-size: 20px;
    }
}

.privacy-policy-content {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 24px;
    padding-right: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

/* HTML内容样式 */
.privacy-policy-html-content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

.privacy-policy-html-content p {
    margin: 8px 0;
    color: #555;
    text-align: justify;
}

.privacy-policy-html-content h1,
.privacy-policy-html-content h2,
.privacy-policy-html-content h3,
.privacy-policy-html-content h4 {
    margin: 12px 0 8px 0;
    color: #222;
    font-weight: 600;
}

.privacy-policy-html-content h2 {
    font-size: 18px;
    margin-top: 16px;
}

.privacy-policy-html-content h3 {
    font-size: 15px;
}

.privacy-policy-html-content ol,
.privacy-policy-html-content ul {
    margin: 8px 0;
    padding-left: 28px;
}

.privacy-policy-html-content li {
    margin: 6px 0;
    color: #555;
}

.privacy-policy-html-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}

.privacy-policy-html-content td,
.privacy-policy-html-content th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.privacy-policy-html-content th {
    background-color: #f5f5f5;
    font-weight: 600;
}

.privacy-policy-html-content strong {
    font-weight: 600;
    color: #222;
}

.privacy-policy-html-content a {
    color: #0066cc;
    text-decoration: none;
}

.privacy-policy-html-content a:hover {
    text-decoration: underline;
}

/* 美化滚动条 */
.privacy-policy-content::-webkit-scrollbar {
    width: 6px;
}

.privacy-policy-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

.privacy-policy-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.privacy-policy-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.privacy-policy-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.privacy-policy-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    min-width: 100px;
    
    @media (max-width: 640px) {
        padding: 10px 20px;
        font-size: 13px;
        min-width: 80px;
    }
}

.reject-btn {
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
}

.reject-btn:hover:not(:disabled) {
    background-color: #e0e0e0;
    border-color: #bbb;
}

.reject-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.reject-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.accept-btn {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.accept-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
    transform: translateY(-1px);
}

.accept-btn:active:not(:disabled) {
    transform: translateY(0);
}

.accept-btn:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

/* 确保在不同屏幕尺寸下都能正常显示 */
@media (max-width: 480px) {
    .privacy-policy-modal {
        max-width: 98vw;
        padding: 20px;
    }

    .privacy-policy-actions {
        flex-direction: column;
        gap: 10px;
    }

    .privacy-policy-btn {
        width: 100%;
        min-width: unset;
    }
}

.button-highlight {
    display: block;
    background-image: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, .25) 80%, transparent);
    bottom: 0;
    left: -200%;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    transform: skew(-20deg);
    width: 200%;

    animation: slidein 3s infinite;
}

@keyframes slidein {
    0% {
        left: -200%;
    }

    100% {
        left: 200%;
    }
}


.button {
    box-shadow: 0 0.5em 1em #000000cf;

    justify-content: center;
    cursor: pointer;

    overflow: hidden;
    align-items: center;
    background: var(--c-g-button);
    /* background-image: linear-gradient(to top left, #6647e0, #8c47e0); */
    border: 0;
    border-radius: .25em;
    color: #fff;
    display: inline-flex;
    position: relative;
    transition: filter 1s ease;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    word-break: break-word;

    padding: 0;
    font-size: calc(0.85 * var(--game-em));
    height: calc(2 * var(--ui-em));
    width: calc(5 * var(--ui-em));

    writing-mode: horizontal-tb;
    margin: 0 calc(0.5 * var(--ui-em));
    line-height: 1;
}

.button:not(.auto-play):active {
    transform: translate(2px, 2px);
    box-shadow: 0 0.2em 1em #000000cf;
}

.button.volume {
    box-shadow: 0 0.4em #278a64, 0 0.2em 0.5em #000000;
}

.button.volume:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0.2em #278a64, 0 0.2em 0.5em #000000;
}

.button svg {
    width: 1em;
    height: 1em;
    margin: 0 0.2em;
    fill: white;
}

.button:not(.disableB):hover {
    filter: brightness(1.2)
}


.start-game {
    font-size: calc(2 * var(--ui-em));
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
}

.button-progress {
    position: absolute;
    height: 100%;
    left: 0;

    background: black !important;
    mix-blend-mode: saturation;
    z-index: 999;
}

.match-button-progress.disableB {
    background: grey;
}


.popup-button {
    overflow: hidden;
    margin: 0;
    box-shadow: none;
    font-size: calc(0.8 * var(--ui-em));
    width: 5.8em;
    height: 2.6em;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    background: var(--c-g-button);
    border-radius: 0.2em;
    color: white;
    cursor: pointer;
}

.end-tooltip {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.popup-lvlb:hover {}

.popup-lvlb:not(.disableB):hover {
    filter: brightness(1.2)
}

.button-alert-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.no-money-alert {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    top: -50%;
    left: calc(50% + 0.5rem);
    transform: translate(-50%, -50%);
    position: absolute;
    font-size: calc(0.8 * var(--ui-em));
    color: #fefefe;
    opacity: 0;
}

.no-money-alert-on {
    animation: disappear 1s;
}

@keyframes disappear {

    from,
    50% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.transparent {
    opacity: 0.01;
    pointer-events: none;
}

.start-button-align-margin {
    margin-right: 0.2rem;
}

.startb-tooltip {}

.invite-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--ui-em)
}

.invite-text {
    text-align: center;
    font-size: 1em;
    margin-bottom: 0.5em;
    color: #ffffffe1;
}

.invite-link {
    border: none;
    border-radius: 0.5em;
    background-color: #ffe0d8;
    color: black;
    padding: 0.5em 0em 0.5em 1em;
    font-size: 1em;
    width: 12.8em;
    box-sizing: border-box;
    outline: none;
}

.invite-link:focus {
    outline: none;
    /* Ensures no outline appears on focus */
    box-shadow: 0 0 0 2px #ff9e8c;
    /* Optional: Add a custom focus style */
}

.invite-link-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.invite-button {
    box-shadow: 0 .2em .5em #503f7a;

    justify-content: center;
    cursor: pointer;

    overflow: hidden;
    align-items: center;
    background-color: #20da84;
    background-image: linear-gradient(to top left, #3200f800, #e0b347);
    border: 0;
    border-radius: .25em;
    color: #fff;
    display: inline-flex;
    position: relative;
    transition: .2s;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    word-break: break-word;

    padding: 0;
    font-size: calc(0.85 * var(--game-em));
    height: calc(2 * var(--ui-em));
    width: calc(5 * var(--ui-em));

    writing-mode: horizontal-tb;
    margin-left: 0.6em;
}

.robot-disableB {
    pointer-events: none;
}


.auction-button svg {
    height: 20px;
    width: 20px;
}

.button.volume.auction-button {
    background: #f6cf68;
    background-image: linear-gradient(145deg, #ffe9a6 0%, #f6cf68 52%, #e1b34b 100%);
    box-shadow: 0 0.4em #b8862e, 0 0.2em 0.5em #000000;
}

.button.volume.auction-button:active {
    box-shadow: 0 0.2em #b8862e, 0 0.2em 0.5em #000000;
}

.button-progress-bar {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: #4a258b;
    /* linear-gradient(to right, #7147e0, #6327a3); */
    z-index: 0;
}

@keyframes growBar {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}




.button .button-highlight {
    display: none !important;
    /* hides the original highlight */
}

@keyframes buttonFlicker {
    0% {
        box-shadow: 0 0 0px 0px rgba(255, 255, 255, 0.0);
    }

    50% {
        box-shadow: 0 0 0.4em 0.4em rgba(255, 255, 255, 0.8);
    }

    100% {
        box-shadow: 0 0 0px 0px rgba(255, 255, 255, 0.0);
    }
}

.button.end.flicker::before {
    animation: buttonFlicker 1s ease-in-out;
}

.button.end {
    overflow: visible !important;
}

.button.end::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    pointer-events: none;

    /* 初始无光 */
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}


.invite-button:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0.2em #2a5f8f, 0 0.2em 0.5em #000000;
}

.invite-button .cooldown-text {
    font-size: 0.8em;
    margin-left: 0.2em;
    opacity: 0.8;
}

/* ==================== 「加QQ群」按钮（未开始阶段的一格） ====================
   QQ 蓝，与绿色「邀请」一眼可分；只改 background-color，保留 .button 的高光渐变
   （--c-g-button 里的 background-image）。
   字号不再单独收小：它和「房间 / 开始 / 邀请」是同一排里的兄弟按钮，
   尺寸必须由 .button（PC 0.85×game-em；移动端媒体查询里的 0.8rem）统一决定，
   否则移动端 --game-em 很小，加群按钮会缩成 5px 的怪尺寸。
   各语言「加群」的译法很短（加群 / Join / Gruppe / Группа / Grupo），nowrap 即可。 */
.button.volume.invite-qq-button {
    background-color: #12b7f5;
    box-shadow: 0 0.4em #0a7ea8, 0 0.2em 0.5em #000000;
    white-space: nowrap;
}

.button.volume.invite-qq-button:active {
    box-shadow: 0 0.2em #0a7ea8, 0 0.2em 0.5em #000000;
}

/* ==================== 「邀请」按钮结果面板 ====================
   工业仪表读数风：第一行 = 游戏内邀请结果，第二行 = QQ 群呼叫结果。
   每行左侧一根状态色刻度条（随 currentColor 走），行间以发丝线分隔，
   数字一律等宽对齐（tabular-nums），第二行错峰 70ms 入场，形成一次编排。
   配色（对底色 rgb(38 99 126) 的对比度均 ≥ 4.5:1）：
     黄 #ffd75e = 游戏内邀请 / 蓝 #93e0ff = QQ 群呼叫 / 橙 #ffd0ab = 呼叫异常 */
.tooltip.invite-global-panel {
    padding: 5px 3px;
    border-radius: 9px;
    /* 顶部一道高光，像仪表玻璃罩，避免纯色平铺 */
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 58%);
    box-shadow: 0 2px 6px rgba(4, 24, 34, .30), 0 10px 26px rgba(4, 24, 34, .34);
}

.invite-global-tooltip {
    display: flex;
    flex-direction: column;
    min-width: 9em;
}

.invite-global-line {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.42em 0.85em 0.42em 1.15em;
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .02em;
    text-align: left;
    font-variant-numeric: tabular-nums;
    animation: inviteLineIn 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 左侧状态色刻度条：颜色跟随该行文字，无需额外类 */
.invite-global-line::before {
    content: "";
    position: absolute;
    left: 0.5em;
    top: 50%;
    width: 3px;
    height: 1.1em;
    border-radius: 999px;
    transform: translateY(-50%);
    background: currentColor;
    opacity: .9;
}

/* 行间发丝分隔线 */
.invite-global-line+.invite-global-line {
    margin-top: 1px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.invite-global-line--local {
    color: #ffd75e;
}

.invite-global-line--qq {
    color: #93e0ff;
}

.invite-global-line--qq.is-alert {
    color: #ffd0ab;
}

/* 非完整版额度耗尽时，在 QQ 群呼叫返回信息下方追加的购买引导。
   只保留激活码入口（无 Steam 按钮），配色沿用项目里「购买激活码」的紫，
   与上方黄/蓝/橙读数形成层级：读数是状态，这一块是出口。 */
.invite-global-paywall {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5em;
    margin-top: 2px;
    padding: 0.6em 0.85em 0.65em;
    border-top: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0 0 7px 7px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .04));
    animation: inviteLineIn 260ms cubic-bezier(0.16, 1, 0.3, 1) 140ms both;
}

.invite-global-paywall-pitch {
    font-size: 0.86em;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .02em;
    text-align: left;
    color: #ffe1a6;
    font-variant-numeric: tabular-nums;
}

.invite-global-paywall-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    padding: 0.5em 0.9em;
    border: 1px solid #6647e0;
    border-radius: 5px;
    background: linear-gradient(135deg, #5b3a8f, #3a2f5b);
    color: #d8c9ff;
    font-size: 0.86em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.invite-global-paywall-btn:hover {
    background: #6647e0;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(102, 71, 224, .55);
}

/* 三行错峰入场：第一行 0ms / 第二行 70ms / 购买引导 140ms */
.invite-global-line:nth-child(2) {
    animation-delay: 70ms;
}

@keyframes inviteLineIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .invite-global-line,
    .invite-global-paywall {
        animation: none;
    }
}


/* 中央「科技」按钮里的小图标：用树根（与地块图标同一套图形，其它位置统一用树根标识科技） */
.button .tech-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
    margin: 0 0.2em;
}

.button .tech-btn-icon svg {
    width: 100%;
    height: 100%;
    margin: 0;
}

/* 踩中科技地块后中央的「科技」按钮（点开弹窗再升降级） */
.button.volume.tech-open-btn {
    background-color: #1f6fb2;
    box-shadow: 0 0.4em #174f7d, 0 0.2em 0.5em #000000;
}

.button.volume.tech-open-btn:active {
    box-shadow: 0 0.2em #174f7d, 0 0.2em 0.5em #000000;
}

@media (max-width: 600px) {
    .center-button-container .button {
        font-size: 0.8rem;
        width: 5rem;
        height: 2rem;
    }

    .center-button-container .button svg {
        width: 0.8rem;
        margin: 0 0.2rem;
        fill: white;
    }

    .accept .button {
        font-size: 1.4em;
        width: 5.5em;
        height: 2.2em;
    }

    .gameover-buttons-row.primary-row .gameover-button {
        font-size: 0.8rem;
        width: 5rem;
        height: 2rem;
    }

    .gameover-button.gameover-button--pill {
        font-size: 0.72rem;
        min-width: 4.4em;
        padding: 0.35em 0.85em;
    }

    .popup-button {
        font-size: calc(1 * var(--ui-em));
        width: 6.5em;
        height: 2.8em;
    }

}
.board {
    z-index: 10;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    margin: auto;
    position: relative;
    align-items: center;
}

.background-image {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--c-g-background);
    /* background-image: url("../resource/pics/lobby_background.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; */
}

.play-area {
    position: absolute;
    transform: translate(-50%, -50%);
    top: calc(50*var(--vh));
    left: 50vw;
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    align-content: center;
    justify-items: center;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 10;
}

/* city and bar */
.city-destroied {
    animation: shake-and-implode 1s ease-out forwards;
    /* 1s for fast effect */
    transform-origin: center;
}

@keyframes shake-and-implode {

    /* --- Phase 1: The Shake (0% to 80%) --- */
    /* Shake quickly with fast rotation */
    0% {
        transform: rotate(0deg) scale(1);
    }

    6% {
        transform: rotate(-10deg) scale(1);
    }

    12% {
        transform: rotate(10deg) scale(1);
    }

    18% {
        transform: rotate(-8deg) scale(1);
    }

    24% {
        transform: rotate(8deg) scale(1);
    }

    30% {
        transform: rotate(-6deg) scale(1);
    }

    36% {
        transform: rotate(6deg) scale(1);
    }

    42% {
        transform: rotate(-6deg) scale(1);
    }

    48% {
        transform: rotate(6deg) scale(1);
    }

    54% {
        transform: rotate(-4deg) scale(1);
    }

    60% {
        transform: rotate(4deg) scale(1);
    }

    66% {
        transform: rotate(2deg) scale(1);
    }

    72% {
        transform: rotate(2deg) scale(1);
    }

    78% {
        transform: rotate(2deg) scale(1);
    }

    84% {
        transform: rotate(2deg) scale(1);
    }

    /* --- Pause for Suspense (80% to 90%) --- */
    90% {
        transform: rotate(2deg) scale(1);
        /* Keep the shake state */
    }

    /* --- Phase 2: The Sudden Implosion (90% to 100%) --- */
    100% {
        transform: rotate(0deg) scale(0);
        /* Collapse to the center */
    }
}


.board-grid {
    /* 立体“厚度”投影色：由皮肤的 boardTone.ink 派生。--volume-c-l 会被 city.js 的
       darken(currentColor) effect 行内覆盖（无主题时保持原逻辑），有主题时 effect 让位 */
    --volume-c: var(--bd-edge, #14333d);
    --volume-c-l: var(--bd-edge-light, #14333da3);
    --volume: 0.5em;
    block-size: 100%;
    min-inline-size: 100%;
    inline-size: 0;
    box-sizing: border-box;

    align-items: center;
    backdrop-filter: blur(3px) saturate(1.1);
    /* 原来的 var(--grid-background) 全仓从未定义（恒为 transparent），且必然被
       city.css 的 .property-color/.passive-color/.quest-style 覆盖（同权重、city.css 后加载）。
       这里显式写 transparent，避免以后有人定义了这个变量造成双层底 */
    background-color: transparent;
    /* background-image: radial-gradient(circle, transparent, rgb(141 195 183 / 31%) 200%); */
    border-radius: .5em;
    box-sizing: border-box;
    color: var(--bd-ink, #45ddff);
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    justify-content: space-between;
    position: relative;

    font-size: calc(0.7 * var(--grid-em));
}

.board-grid .icon {
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
}

@media(orientation: portrait) {
    .board-grid {
        justify-content: initial;
        font-size: calc(0.6 * var(--grid-em));
        border-radius: 0.4em;
    }
}

.top .board-grid:not(.layout-corner) {
    box-shadow: 0 var(--volume) var(--volume-c);
}

.top .board-grid.property-color:not(.layout-corner),
.top .board-grid.quest-style:not(.layout-corner) {
    box-shadow: 0 var(--volume) var(--volume-c-l);
}

.left .board-grid:not(.layout-corner) {
    box-shadow: var(--volume) 0 var(--volume-c);
}

.left .board-grid.property-color:not(.layout-corner),
.left .board-grid.quest-style:not(.layout-corner) {
    box-shadow: var(--volume) 0 var(--volume-c-l);
}

.right .board-grid:not(.layout-corner) {
    box-shadow: calc(-1 * var(--volume)) 0 var(--volume-c);
}

.right .board-grid.property-color:not(.layout-corner),
.right .board-grid.quest-style:not(.layout-corner) {
    box-shadow: calc(-1 * var(--volume)) 0 var(--volume-c-l);
}

.bottom .board-grid:not(.layout-corner) {
    box-shadow: 0 calc(-1 * var(--volume)) var(--volume-c);
}

.bottom .board-grid.property-color:not(.layout-corner) {
    box-shadow: 0 calc(-1 * var(--volume)) var(--volume-c);
}

.bottom .board-grid.quest-style:not(.layout-corner) {
    box-shadow: 0 calc(-1 * var(--volume)) var(--volume-c-l);
}

@media(orientation: portrait) {
    .board-grid {
        justify-content: initial;
    }
}

.board-grid * {
    font-weight: 400;
}

.board-grid.tax,
.board-grid.surprise,
.board-grid.auction,
.board-grid.bank,
.board-grid.shop {
    justify-content: space-evenly;
}

.game-modal {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 300;

}

.game-modal-smaller {
    width: calc(var(--board-unit) * (var(--board-unit-num)) + 2 * var(--board-unit-length));
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at center,
            rgba(0, 0, 0, 0.7) 0%,
            rgba(0, 0, 0, 0.4) 70%,
            rgba(0, 0, 0, 0) 100%);
    z-index: 300;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.game-modal-smaller.tran {
    background: transparent;
}

.board-grid .toll {
    color: white;
    z-index: 10;
    background-color: var(--bd-scrim, #00000036);
    border-radius: 0.4em;
    line-height: 0.8;
    padding: 0.3em;
    inline-size: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.board-grid .price {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: var(--bd-scrim, #00000036);
    border-radius: 0.5em;
    color: rgba(255, 255, 255, 0.714);
    line-height: 0.8;
    padding: 0.4em 0.4em;
    z-index: 10;
}

.board-grid .name {
    z-index: 10;
    /* 名字字号/字色固定，不跟 skinBoardTone 走（见 shared/skinBoardTone.js::NAME_PLATE）。
       曾经是 var(--bd-ink-text, …) —— 深色皮肤会翻成白字，压在固定的浅色名字条上等于看不见 */
    color: #000000a8;
    text-align: center;
    position: relative;
    border-radius: inherit;
    overflow: hidden;
    flex-shrink: 0;
}

/* ---- 名字条底衬：固定色，**不受皮肤配色影响** ----
   原来走 var(--bd-name-plate*) 由皮肤派生，现在四条（三块底衬 + 字色）全部写死。
   数值必须与 shared/skinBoardTone.js::NAME_PLATE 逐位一致，checkBoardTone.js 会读这份 CSS 断言。
   只设 background-color / color，不碰字号、宽度等排版属性。
   ⚠️ 城市这块**不要写成半透明**（一度试过 rgb(255 255 255 / 31%)）：半透明的合成色会跟着
   地块色走，深色棋盘上底衬跟着变暗，黑字压不住 —— 这里要的是恒定不变的实色。 */
.city .name {
    background-color: #abd9f7;
    color: #000000a8;
}

/* 任务地块（机会 / 开拓 / 梦想 / 护盾 / 城堡 / 投资，subType==='quest'）名字背景：浅绿。
   类名刻意不叫 .quest-name —— 那个类在 city.css 里是弹窗「任务」标签的排版样式，
   同名会把 flex/字号/宽度带进棋盘 */
.board-grid .name.quest-tile-name {
    background-color: #a0dfae;
    color: #000000a8;
}

/* 可获取（buy）的非城市地块（机场 / 能源 / 避风港）名字背景：浅黑。
   字色也一起写死：有固定底衬就不该再跟 .passive-color 的派生走 */
.board-grid .name.buyable-tile-name {
    background-color: #5e8caa;
    color: #000000a8;
}

/* ---- 非 property-color 的地块：名字字色跟着皮肤走 ----
   property-color（城市 / 机场 / 能源 / 避风港）的名字条都有上面的固定底衬，黑字永远可读；
   而 passive-color（税务 / 随机 / 空地 / 银行 …，含六个角落）与 tech 的名字条是**透明**的，
   直接压在 --bd-tile-passive / --bd-tile-quest 上 —— 皮肤一深，固定的 #000000a8
   就掉到跟底色同亮度。所以它们的字色也由配色系统派生（与角落同一套规则、同一套兜底），
   变量只在自定义 boardTone 时注入 ⇒ 原版仍是 #000000a8，逐像素不变。

   ⚠️ 第一条必须写在文件后半段「角落格标题」那六条规则**之前**：
   角落格也命中 .passive-color .name，靠后面那六条规则覆盖回它们各自的兜底原色。 */
.passive-color .name {
    color: var(--bd-corner-name, #000000a8);
}

/* tech 走 .quest-style，但没有 .quest-tile-name（那是 subType==='quest' 才带的固定绿底），
   所以同样要跟着派生；任务格有固定浅绿底，必须排除（浅色字压浅绿会糊掉）。
   用独立变量：quest 底色比 passive 亮得多，同一个色值不可能对两边都达标。 */
.quest-style .name:not(.quest-tile-name) {
    color: var(--bd-quest-name, #000000a8);
}

.left .name,
.right .name {
    height: 100%;
}

.left .city-name-bar,
.right .city-name-bar {
    width: 100%;
}

.top .name,
.bottom .name {
    width: 100%;
}

.top .city-name-bar,
.bottom .city-name-bar {
    height: 100%;
}

.city-name-bar {
    position: absolute;
    pointer-events: none;
    z-index: -1;
    border-radius: inherit;
    /* 过路费比例条：棋盘上唯一大面积强调色（宽度由 city.js 的 barStyle 行内控制） */
    background-color: var(--bd-accent, #e8c300);
}

.city-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    z-index: 3;
    filter: brightness(0.8);
}

.ctiy .name {
    display: flex;
    font-size: calc(0.7 * var(--grid-em));
    justify-content: center;
    align-items: center;
    block-size: 20%;
    inline-size: 100%;
    z-index: 5;
    filter: drop-shadow(0 0 .1em #000000a8);
    padding: 2px;
    font-weight: 100;
    position: relative;
}


.nonCity-name {}

.passive-name {
    color: grey
}

.hide-city-name {
    opacity: 0;
}

.city-halo {
    z-index: 999;
}

/* =========================================
   骚乱：紫色光晕直接盖在**这一格地块**上
   -----------------------------------------
   原来是「棋盘覆盖层 + 合并整国」的橙色 box（.game-board.envelop / .group-discord），
   现在扰乱只作用于单个地块，特效就画在被扰乱的这一格上：
     · 入场：0.9s 的紫色爆发（让玩家注意到这里刚出事）
     · 常驻：随后无限紫色呼吸，直到剩余回合数归零
   颜色沿用原覆盖层的紫（rgb(128,0,128) 系），只是搬到了地块里。
   ========================================= */
.discord-manual-city {
    z-index: 999;
    position: absolute;
    pointer-events: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    box-shadow: 0 0 1.4em 0.7em rgba(146, 52, 200, 0.78) inset;
    animation:
        discord-burst 0.9s ease-out,
        discord-breathing 1.6s 0.9s infinite alternate ease-in-out;
}

@keyframes discord-burst {
    0% {
        box-shadow: 0 0 0 0 rgba(190, 100, 255, 0) inset;
    }

    25% {
        box-shadow: 0 0 2.6em 1.2em rgba(205, 120, 255, 0.95) inset;
    }

    100% {
        box-shadow: 0 0 1.4em 0.7em rgba(146, 52, 200, 0.78) inset;
    }
}

@keyframes discord-breathing {
    0% {
        box-shadow: 0 0 1.05em 0.45em rgba(146, 52, 200, 0.55) inset;
    }

    100% {
        box-shadow: 0 0 1.7em 0.8em rgba(170, 70, 230, 0.85) inset;
    }
}

.city-halo::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    color: inherit;
    border-radius: inherit;
    animation: halo 3s;
    box-shadow:
        0 0 3em 0.25em
}

@keyframes halo {

    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.national-flag-container {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #010323;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    border-radius: inherit;
    bottom: 0;
    left: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    right: 0;
    top: 0;
    z-index: 0;
}

.show-flag {
    filter: blur(0px);
    opacity: 0.2;

}

.national-flag-container img {
    flex-shrink: 0;
    width: 150%;
    opacity: 0.6;
    filter: blur(4px);
}

.board-grid.energy,
.board-grid.airport {}

.city .icon {
    z-index: 10;
    width: 2em;
    height: 2em;
}

.city .icon svg {
    width: 100%;
    height: 100%;
}

/* 科技地块：叶子图标（0 级=树根，1~5 级=1~5 片叶子），等级由叶子数量表达 */
.city .tech-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 叶子图形自身已经做过居中+留白，这里收一点图标容器的内边距，让地块上的图形更饱满 */
.city .tech .icon.tech-icon-wrap {
    padding: 0.1em;
}

.tech-leaf-svg {
    display: block;
    width: 120%;
    height: 120%;
    overflow: visible;
    filter: drop-shadow(0 0.1em 0.2em rgba(0, 0, 0, .45));
}

/* 满级：加一层柔和的绿色光晕 */
.tech-leaf-icon.tech-leaf-max .tech-leaf-svg {
    filter: drop-shadow(0 0 0.14em rgba(62, 209, 127, .9)) drop-shadow(0 0.1em 0.2em rgba(0, 0, 0, .45));
}

.opportunity .icon svg,
.opportunity .icon img,
.pioneer .icon img,
.shield .icon img,
.invest .icon img,
.tech .icon img,
.castle .icon img {
    width: 80%;
    inline-size: 80%;
    filter: drop-shadow(rgba(218, 218, 19, 0.5) 0px 0.25em 0.5em);
}

.shield .icon img {
    filter: drop-shadow(rgba(255, 230, 130, 0.9) 0px 0px 0.35em) drop-shadow(rgba(218, 218, 19, 0.55) 0px 0.25em 0.6em);
}

.tech .icon img {
    filter: drop-shadow(rgba(39, 162, 219, 0.9) 0px 0px 0.35em) drop-shadow(rgba(39, 162, 219, 0.55) 0px 0.25em 0.6em);
}

.castle .icon img {
    filter: drop-shadow(rgba(235, 190, 100, 0.9) 0px 0px 0.35em) drop-shadow(rgba(218, 174, 19, 0.55) 0px 0.25em 0.6em);
}

.opportunity .icon,
.pioneer .icon,
.shield .icon,
.invest .icon,
.tech .icon,
.castle .icon,
.dream .icon,
.energy .icon,
.foundation .icon,
.airport .icon,
.shop .icon {
    display: flex;
    color: white;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    transition: 0.5s;
    padding: 0.2em;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.top .opportunity .icon,
.bottom .opportunity .icon,
.top .pioneer .icon,
.bottom .pioneer .icon,
.top .shield .icon,
.bottom .shield .icon,
.top .invest .icon,
.bottom .invest .icon,
.top .tech .icon,
.bottom .tech .icon,
.top .castle .icon,
.bottom .castle .icon,
.top .dream .icon,
.bottom .dream .icon,
.top .foundation .icon,
.bottom .foundation .icon,
.top .energy .icon,
.bottom .energy .icon,
.top .airport .icon,
.bottom .airport .icon {
    max-width: calc(0.7*var(--board-unit));
}

.right .opportunity .icon,
.left .opportunity .icon,
.right .pioneer .icon,
.left .pioneer .icon,
.right .shield .icon,
.left .shield .icon,
.right .invest .icon,
.left .invest .icon,
.right .tech .icon,
.left .tech .icon,
.right .castle .icon,
.left .castle .icon,
.right .foundation .icon,
.left .foundation .icon,
.right .energy .icon,
.left .energy .icon,
.right .airport .icon,
.left .airport .icon {
    max-height: calc(0.7*var(--board-unit));

}

.board-grid.foundation .icon svg {
    flex-grow: 1;
    width: 120% !important;
    height: 120% !important;
}

.board-grid.foundation img {
    flex-grow: 1;
    width: 100% !important;
    height: 100% !important;
}

.board-grid.airport svg {
    flex-grow: 1;
}

.top .airport .icon svg {
    transform: rotate(180deg) !important;
    rotate: unset !important;
    width: 100%;
    height: 100%;
}

.right .airport svg {
    transform: rotate(270deg) !important;
    rotate: unset !important;
    width: 100%;
    height: 100%;
}

.bottom .airport svg {
    transform: rotate(0deg) !important;
    rotate: unset !important;
    width: 100%;
    height: 100%;
}

.left .airport svg {
    transform: rotate(90deg) !important;
    rotate: unset !important;
    width: 100%;
    height: 100%;
}

/* 自定义皮肤的机场图标：上面那四组角度只写了 svg，皮肤把机场画成图元后是 <img>
   （库素材 / 上传图）⇒ 角度整组漏掉，顶边更是连「竖直排版扶正」的兜底都没有，
   于是同一架飞机在别的边顺时针、在顶边逆时针。
   这里按原版同一套角度补齐，口径 = **顺时针**（= index 递增的行进方向）：
   顶朝东 / 右朝南 / 底朝西 / 左朝北（原版素材头朝西，顶边 180° 之后即朝东）。
   ⚠️ 文本图标（.tile-glyph-text，emoji / 单字）刻意不参与：它恒定正立，
      否则玩家拿一座「城堡 / 岛屿」当机场，顶边就会整枚倒过来。 */
.top .airport .icon img.tile-glyph {
    transform: rotate(0deg);
}

.right .airport .icon img.tile-glyph {
    transform: rotate(90deg);
}

.bottom .airport .icon img.tile-glyph {
    transform: scaleX(-1);
}

.left .airport .icon img.tile-glyph {
    transform: rotate(270deg);
}

.tax .icon,
.auction .icon,
.bank .icon,
.surprise .icon {
    display: flex;
    block-size: 50%;
    inline-size: 100%;
    justify-content: center;
    align-items: center;
}

.tax .icon svg {
    width: 50% !important;
    height: 70% !important;
}

.bank .icon img {
    inline-size: 60%;
}

.surprise .icon img {
    inline-size: 70%;
}

.tax.icon {
    filter: drop-shadow(rgba(240, 240, 240, 0.5) 0px 0.25em 0.5em);
}

.icon.question {
    filter: drop-shadow(rgba(255, 149, 188, 0.5) 0px 0.25em 0.5em);
}

.random-tile {
    outline: 0.4em dashed rgb(226 127 127 / 50%);
    outline-offset: -0.6em;
}

.random-tile .random .icon {
    display: none;
}


.random .icon {
    display: flex;
    flex: 1;
    width: 0;
    height: 0;
    justify-content: center;
    align-items: center;
}

.random img {
    height: 80%;
    width: auto;
    filter: drop-shadow(rgba(255, 149, 188, 0.5) 0px 0.25em 0.5em);
}

.right .random img,
.left .random img {
    width: 55.3%;
    height: auto;

}

.bank.icon {
    filter: drop-shadow(rgba(243, 223, 6, 0.5) 0px 0.25em 0.2em);
}


.lvl-change-anime {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 皮肤等级图元（cityLevelN / techLevelN）的放大层。
   原版房子/叶子是矢量图形，着墨区铺满 16×16 视框；皮肤图元要经 bbox 归一化 + contain，
   装进同一个 2em 轨道后视觉上只有原版的一半 ⇒ 这里统一放大 2 倍（`--lvl-glyph-scale` 一处可调）。
   放大放在**外层 span** 上：玩家自己调的 rotate/scale 在 `.tile-glyph-inner` 上，
   两者相乘而不是互相覆盖；也不碰 `.lvl-change-anime`（升/降级的动画类挂在它身上）。 */
.lvl-glyph-skin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform: scale(var(--lvl-glyph-scale, 2));
    transform-origin: center center;
}

/**
 * 为顶级城市添加一个黑色、缓缓脉动的光晕动画
 */
.lvl-change-anime.top {
    /* animation: top-level-glow 5s ease-in-out infinite; */
}

@keyframes top-level-glow {

    0%,
    100% {
        filter: drop-shadow(0 0 4px rgb(10, 27, 42));
    }

    50% {
        filter: drop-shadow(0 0 4px rgb(222, 206, 26));
    }
}

.lvlUp {
    animation: lvlUpAnimation 2s;
}

.lvlDown {
    animation: lvlDownAnimation 0.5s ease-in-out;
}

@keyframes lvlUpAnimation {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    5% {
        transform: scale(1.3);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes lvlDownAnimation {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(0.5);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.symbol-opaque {
    opacity: 1;
    filter: contrast(1.5);
}

.transparent {
    color: #00000000;
}

.hide {
    display: none;
}

.city-owned-flag {
    display: block;
    block-size: 35%;
    inline-size: 0;
    min-inline-size: 50px;
    border-radius: inherit;
}

.left .board-grid {
    writing-mode: vertical-rl;
}

.right .board-grid {
    writing-mode: vertical-rl;
    flex-direction: column-reverse;
}

.top .board-grid {
    flex-direction: column-reverse;
}

.bottom .board-grid {}

.city-alert {
    position: relative;
    display: grid;
    grid-auto-flow: row;
    background-image: linear-gradient(to top left, #e5561a, #e0bc47);
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    padding: 23px 10px 10px;
    border: none;
    max-width: 100px;
    z-index: 10;
}

.PopoverClose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0px;
    right: -5px;
    border: none;
    background: none;
    z-index: 999;
}

.PopoverClose svg {
    width: calc(1.6 * var(--ui-em));
    height: calc(1.6 * var(--ui-em));
    color: white;
}

.city-popup {
    position: relative;
    display: grid;
    z-index: 501;
    /* 换皮时跟着棋盘主色走（--bd-popup-bg 由 city.js 注入到弹窗根节点：弹窗是 portal，
       拿不到 .game-board 上的变量）。没换皮 = 原版 #38a7ca，逐像素不变。 */
    background-color: var(--bd-popup-bg, #38a7ca);
    border-radius: .5em;
    box-shadow: 0 0 4em -1.5em #000, 0 0 .5em rgba(0, 0, 0, .25);
    color: #fff;
    grid-auto-flow: row;
    gap: 10px;
    padding: 1em;
    font-size: calc(0.8 * var(--ui-em));
    writing-mode: horizontal-tb;
    border: none;
    justify-items: center;
}

.city-popup .city-popup-arrow {
    /* 箭头与被指向的面同色（原版箭头比面板暗一档，统一后与气泡连成一体，换肤时也不会露出蓝尖角） */
    fill: var(--bd-popup-bg, #38a7ca);
    transform: translateY(-1px) rotate(0deg) !important;
}


.popup-city-top {
    top: 100%;
}

.popup-city-bottom {
    bottom: 100%;
}

.popup-city-left {
    left: 100%;
}

.popup-city-right {
    right: 100%;
}

.popup-lvl {
    display: grid;
    grid-template:
        'd a'
        'c b';
    gap: 1em;
    justify-content: space-evenly;
    justify-items: center;
    z-index: 20;
}

.popup-lvl .a {
    grid-area: a;
}

.popup-lvl .b {
    grid-area: b;
}

.popup-lvl .c {
    word-break: break-all;
    grid-area: c;
    background-image: linear-gradient(to bottom, #36b986, #c00b0b54);
}

.popup-button.c {
    word-break: break-all;
    background-image: linear-gradient(to bottom, #36b986, #c00b0b54);
    z-index: 20;
}

.popup-lvl .d {
    grid-area: d;
}

.popup-bottom {
    display: grid;
    grid-auto-flow: row;
    gap: 0.5em;
    justify-content: space-evenly;
}

.city-info-cost {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 95%;
    position: relative;
}

.city-info-cost .h-divider {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

.buy-sell-cost {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* 避风港弹窗信息：整体居中分布，免除列加宽，标题不换行 */
.foundation-info-cost {
    justify-content: space-evenly;
}

.buy-sell-cost.foundation-cost {
    width: auto;
    flex: 0 0 auto;
}

.buy-sell-cost.foundation-cost-exempt {
    min-width: 4.5em;
}

.foundation-cost .cost-info-title {
    white-space: nowrap;
}

.buy-cost-adjust {}

.popup-info {
    width: 100%;
    gap: 0.5em;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    z-index: 10;
    margin-top: 1em;
}

.non-city-info {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    white-space: pre-wrap;

}

.non-city-info .grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0 0.8em;
}

.non-city-info > .content.bank-content {
    max-width: 12em;
    margin: 2px 0;
    white-space: normal;
    word-break: break-word;
}

.non-city-info .grid .content {
    max-width: 8em;
    margin: 2px 0;
    justify-self: start;
    text-align: left;
}

.non-city-info .content-minor {
    margin: 2px 0;
    font-size: 0.9em;
    color: rgb(225, 225, 225);
    text-align: center;
}

.non-city-info .grid .title {
    justify-self: end;
}

/* 随机地块:弹窗中随机范围列表，4个一行 */
.non-city-info .random-range-grid {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: center;
    gap: 0 0.8em;
}

.non-city-info .random-range-grid .content {
    max-width: 8em;
    margin: 2px 0;
    justify-self: center;
    text-align: center;
}

.grid .align-mid {
    justify-self: center !important;
    text-align: center !important;
}

.grid .align-right {
    justify-self: end !important;
    text-align: right !important;
}

.grid .align-left {
    justify-self: start !important;
    text-align: left !important;
}


#popup-5 .icon,
#popup-15 .icon,
#popup-25 .icon,
#popup-35 .icon {
    transform: rotate(90deg);
}

.popup-info-up {}

.popup-info-bottom {
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--c-g-light-text);
    border: 1px 0 0 0;
}

.popup-top {}

.popup-tail {
    position: absolute;
    top: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #333;
}

.bar {
    display: flex;
    justify-content: space-evenly;
    box-sizing: border-box;
}

.board-grid .energy img {
    width: 160%;
    height: 160%;
    padding-left: 0.7em;
}

.left .energy img {}

.left .board-grid svg {
    transform: rotate(90deg);
}

.left .board-grid img {
    transform: rotate(90deg);
}

.right .board-grid svg {
    transform: rotate(270deg);
}

.right .board-grid img {
    transform: rotate(270deg);
}


.center {
    width: calc(var(--board-unit) * var(--board-unit-num));
    height: calc(var(--board-unit) * (var(--board-half) - 2 - var(--board-unit-num)));
    box-sizing: border-box;

    display: grid;
    grid-template-rows: 35% 6% 14% 45%;
    justify-items: center;
    transition: grid-template-rows 0.3s ease;

    border-radius: .5em;
    background-color: var(--c-g-center);
    box-shadow:
        inset 0 0 1em rgba(0, 0, 0, 0.559), inset 0 0 2em rgb(141 234 251 / 46%);

    position: relative;
    z-index: 5;
}

.dice-container {
    justify-content: center;
    color: rgba(244, 224, 4, 0.75);
    margin-bottom: calc(1 * var(--ui-em));
    z-index: 100;
}


.center-button-container {
    position: relative;
    margin-top: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.center-button-left {
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
}

.center-button-mid {
    display: flex;
    justify-content: space-around;
    position: relative;
    align-items: center;
    width: 100%;
}

/* 并行模式已改为「不再用文字条报阶段」（结算回合弹机器人 / 操作回合看 banner 边框），
   原来的 .parallel-phase-bar 样式随之删除，避免以后误用。 */

.center-button-right {
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
}

.center-notice {
    display: flex;
    justify-content: center;
    align-items: start;
    font-size: calc(0.8 * var(--ui-em));
    width: 90%;
    text-align: center;
}


.notice-full-screen-container {
    z-index: 520;
    position: absolute;
    min-width: 30em;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: hidden;
    animation: show 0.2s;
    background: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 4em 4em rgba(0, 0, 0, 0.8);
}

@keyframes show {
    0% {
        opacity: 0;
    }

}

.close-button {
    height: 3em;
    width: 3em;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    border: 0;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #ffffff;
    background-color: #2d86a2;
    transition: .2s;
    position: absolute;
    right: 0;
    top: 0;
}

.close-button:hover {
    transform: rotate(90deg);
}

.close-button svg {
    width: 100%;
    height: 100%;
}

.notice-full-screen {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: calc(1 * var(--ui-em));
    position: relative;
    -webkit-overflow-scrolling: touch;
    /* 优化移动端滚动体验 */
    padding: 0 3em;


    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}


.center-bottom {
    /* 原来是 calc(0.023 * var(--center-w))：center-w = unit × num，
       48 格的 num 更大（竖屏 5→7、横屏 9→11），于是玩家/交易 banner 整体放大
       4.7%~11.9%（头像 .player-bannner-icon 的 2.5em 也随之变大）。
       改写成「40 格基准」：0.023 / 0.25 = 0.092，--ui-num / --ui-em 都按 40 格几何写入，
       40 格与旧值逐像素相同，48 格与 40 格完全一致。 */
    font-size: calc(0.092 * var(--ui-num, 9) * var(--ui-em));
    margin: 0.6em 0;
    border-radius: 1.2rem;
    width: 94%;
    display: grid;
    grid-template-columns: 49% 2% 49%;
    /* 中央控制台也吃皮肤配色（阶段 17）：面板底 / 描边 / 四层发光全走变量。
       原来这里还有一条 `border: 1px solid #ffffff0f`，被紧随其后的 0.2em 实线完全覆盖（死声明），删掉。 */
    background-color: var(--bd-center-bg, #144b62e8);
    align-items: center;
    position: relative;
    border: 0.2em solid var(--bd-center-border, #daf7fc);
    box-shadow: var(--bd-center-shadow, inset 0 0 0.5em #1bcafb80, inset 0 0 2.1em #ffffff, 0 0 1.1em #02daff, 0 0 2.1em #ffffff);
}

@media (orientation: portrait) {
    .center-bottom {
        /* 竖屏整层发光比桌面弱（原版如此），所以是另一条字符串，不是同一个值换个 alpha */
        box-shadow: var(--bd-center-shadow-p, inset 0 0 0.5em #1bcafb80, inset 0 0 2.1em #ffffffad, 0 0 1.1em #02daff80, 0 0 2.1em #ffffff87);
    }
}

.center-bottom-divider {
    transform-origin: top;
    width: 1px;
    height: 70%;
    border: none;
    background-color: #ffffff14;
    justify-self: center;
    transition: .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}


.dashb {
    position: relative;
    justify-items: center;
    height: 100%;
    padding: 1em;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
    overflow: hidden;
    box-sizing: border-box;
    transform: translate(0);
}

@media (max-width: 600px) {

    .dashb {

        padding: 0.6em;
    }
}

.info-trade {
    width: 100%;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
}

.info-banner {
    box-sizing: border-box;
    height: 3.7em;
    width: 50%;
    display: flex;
    align-items: center;
    padding: 0.3em 0.5em;
    border-radius: calc(0.4 * var(--ui-em));
    position: relative;
    flex: none;
}

.info-banner.background-color {
    background-color: #aeaab730;
}

.info-banner.trade-info-bannner {
    background-color: #aeaab714;
}

.info-banner-click-region {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    width: 0;
    height: 100%;
    border-radius: inherit;
    position: relative;
    z-index: 10;
}


.disable-vote-kick {
    filter: brightness(0.5);
}


@keyframes soft-blink {
    0% {
        border-color: #ffffff10;
    }

    50% {
        border-color: #ffffff54;
    }

    100% {
        border-color: #ffffff10;
    }
}

.highlightt::before {
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    border-radius: inherit;
    border-style: solid;
    border-width: 1px;
    border-color: #ffffff63;
    animation: soft-blink 1.5s ease-in-out infinite;
    transition: border-color 0.5s;
}

/* ── 并行模式：用边框表示「还没点结束 / 已经点过结束」 ──────────────────────
   两个状态共用同一枚 ::before（同一个元素才能让「闪烁 → 固定」有过渡），
   只切换 animation / 描边粗细。配色与轮流模式的 highlightt 一致（白色）。 */
.info-banner.pb-blink::before,
.info-banner.pb-ready::before {
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    border-radius: inherit;
    border-style: solid;
    border-color: #ffffff54;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
}

.info-banner.pb-blink::before {
    border-width: 1px;
    animation: parallel-border-blink 1.4s ease-in-out infinite;
}

.info-banner.pb-ready::before {
    /* 与闪烁态同为 1px（用户：完成态的边框太粗）——靠「常亮 + 微发光 + 落定回弹」区分，
       不靠加粗，避免 banner 尺寸变化时边框显得笨重 */
    border-width: 1px;
    border-color: #ffffffcc;
    box-shadow: 0 0 0.45em -0.05em #ffffff59;
    animation: parallel-border-settle 0.45s ease-out;
}

@keyframes parallel-border-blink {
    0% {
        opacity: 0.18;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.18;
    }
}

/* 落定：从「闪到暗」的位置直接亮起来并轻微回弹，用一眼能把「已完成」和「在闪」区分开 */
@keyframes parallel-border-settle {
    0% {
        opacity: 0.25;
        transform: scale(0.97);
    }

    60% {
        opacity: 1;
        transform: scale(1.012);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.trade-info-bannner {}

.trade-info-bannner:hover {
    background-color: #ffffff66;
}

.trade-info-bannner.trade-deferred {
    border: 1px solid #ffffff2e;
}

.player-bannner-icon {
    display: flex;
    transition: 0.5s;
}

.player-bannner-icon>svg {
    width: calc(2 * var(--ui-em));
    height: calc(2 * var(--ui-em));
}

.player-bannner-icon .character-container {
    width: 2.5em;
    height: 2.5em;
}

.player-bannner-icon .character-container svg {
    width: 100%;
    height: 100%;
}

.player-banner-name {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    align-items: center;
    margin-left: calc(0.5 * var(--ui-em));

}

.main-name {
    transition: 0.5s;
}

.progress-full {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(0.2 * var(--ui-em));
    background-color: rgba(128, 128, 128, 0.63);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    overflow: hidden;
}

.info-bid-progress-bar {
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;

}

.trade-info-mortgage-countdown {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    font-size: calc(1 * var(--ui-em));
    font-weight: bold;

    z-index: 999;
    color: #FFD700;
    text-shadow: 0 0 5px #080808, 0 0 10px #090909, 0 0 15px #000000;
    border-radius: 0.5em;
}

.pay-countdown {
    display: flex;
    width: calc(2* var(--ui-em));
    height: calc(2* var(--ui-em));
    transition: 0.5s;
    position: relative;
}

.pay-countdown svg {
    width: 100%;
    height: 100%;
    position: absolute;
}

.player-banner-kick {
    height: 3em;
    width: 3em;
    padding: 5px;
    box-sizing: border-box;
    display: flex;
    border: 0;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #ffffff;
    background-color: #2d86a2;

    filter: brightness(0.8);
    transition: .2s;
    z-index: 100;

    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}

.player-banner-kick:hover {
    filter: brightness(1);
    transform: translate(-50%, -50%) rotate(90deg);
}

.player-banner-kick svg {
    width: 100%;
    height: 100%;
}

.player-banner-money-container {
    position: relative;
    flex-grow: 1;
    height: 80%;
    display: flex;
    justify-content: flex-end;
}

.player-banner-money {
    font-size: 1em;
    display: flex;
    align-items: center;
    color: white;
    position: relative;
}

.ondebt-color {
    color: #d92525;
}

.trade-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.4em;
    height: 2.4em;
    margin: 0 1em;
    color: white;
}

.trade-arrow svg {
    width: 100%;
    height: 100%;
}

.board-grid.discordManual,
.board-grid.start,
.board-grid.sleep,
.board-grid.auction,
.board-grid.prison {
    padding: 0.5em;
}

@media (orientation: portrait) {

    .board-grid.discordManual,
    .board-grid.start,
    .board-grid.sleep,
    .board-grid.auction,
    .board-grid.prison {
        padding: 0em;
    }

    .board-grid.discordManual .icon,
    .board-grid.start .icon,
    .board-grid.sleep .icon,
    .board-grid.auction .icon,
    .board-grid.prison .icon {
        flex: 1;
    }


}

.discordManual .name,
.auction .name,
.goToJail .name,
.sleep .name,
.prison .name,
.start .name {
    display: flex;
    justify-content: center;
    font-size: calc(0.8 * var(--ui-em));
    font-weight: 800;
    block-size: unset;
}

.goToJail .icon,
.discordManual .icon,
.start .icon,
.sleep .icon,
.prison .icon {
    width: 64%;
}

.sleep img {
    width: 4em;
    height: 4em;
}

.discordManual .icon img {
    transform: none !important;
}

/* 监狱图标现在是 pics/prison.svg / prisonYellow.svg（img），尺寸口径与原来的内联 svg 一致：
   撑满 .icon 轨道宽度、高度按 1:1 自适应。
   （prisonYellow.svg 只有 viewBox、没有 width/height，个别浏览器解不出固有比例，
   故显式兜底 1:1，保证与 prison.svg 完全同尺寸。） */
.board-grid.start svg,
.board-grid.sleep svg,
.board-grid.prison svg,
.board-grid.prison img {
    width: 100%;
    height: auto;
    transform: rotate(0deg);
}

.board-grid.prison img {
    aspect-ratio: 1 / 1;
}

/* ---- 角落格标题文字：自定义配色下**完全由色调定** ----
   底衬不是固定色（角落走 .passive-color，底色是 --bd-tile-passive，ΔL −24 跟 primary 走），
   所以字色也不能固定：一旦玩家改了配色，固定的深色字会掉到跟底色同一亮度
   （实测最差 1.02:1）。这里统一改走 --bd-corner-name，**由 skinBoardTone.js 按 ink 色槽
   派生并把明度推到 ≥4.5:1**；变量只在皮肤真的改了 boardTone 时注入，
   所以兜底值 = 原版六个硬编码色 ⇒ 原版逐像素不变。
   新增角落类型时：兜底值照抄原来的写死色，别省这一步。 */
.start .name {
    color: var(--bd-corner-name, rgb(176, 222, 45));
}

.start .icon {
    display: flex;
    justify-content: center;
    align-content: center;
}

.start svg {
    transform: rotate(180deg) !important;
}

.left .start {
    display: flex;
    flex-direction: column-reverse;
    writing-mode: vertical-rl;
    padding: 3px;
}

.left .discordManual {}

.discordManual .name {
    color: var(--bd-corner-name, #450a24);
    font-weight: 800;
    z-index: 10;
}

.discordManual .icon {
    filter: drop-shadow(0 0 1em #450a24);
    display: flex;
    justify-content: center;
    align-content: center;
    z-index: 0;
}

.discordManual img {}



.prison .icon {
    display: flex;
    justify-content: center;
    align-content: center;
}

.prison .name {
    color: var(--bd-corner-name, #403d38);
    font-weight: 800;
}

.prison svg {}

/* 「去监狱」原本没有自己的字色规则，靠 .board-grid 的 --bd-ink 继承 ⇒ 原版里它是六格中
   **唯一发青的一格**（#45ddff，与未购地块图标同色），跟「监狱」的深灰完全不是一套视觉。
   2026-10-26 用户要求并入深色系、与 .prison 统一（#403d38）：
   兜底值从 var(--bd-ink) 换成硬编码 #403d38（`var(--bd-ink)` 在无配色时本来就取不到值，
   会退化成继承，改完等于把「继承来的青」换成「明确的深灰」）。
   ⚠️ 反面影响已知并接受：深灰压在 passive 底衬（#29546f→#4b7795）上对比度只有
   1.33:1 / 2.25:1，和 .prison 一样接近看不见 —— 这是「六格统深色」的代价，不是漏改。
   自定义配色下仍由 --bd-corner-name 接管（六格同色，辨识靠图标）。 */
.goToJail .name {
    color: var(--bd-corner-name, #403d38);
}

.right .prison {
    display: flex;
    flex-direction: column;
    writing-mode: vertical-rl;
    padding: 0;
}

.right .prison .icon {
    height: 70%;
    margin-left: 0.2em;
}

.sleep .name {
    color: var(--bd-corner-name, #00408f);
}

.sleep .icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.right .sleep {}

.right .sleep img {}

/* 拍卖格整格用同一个字色（图标 drop-shadow 也吃 currentColor）⇒ 变量挂在这层，
   .auction .name 的 currentColor 自然跟上。!important 保留：它当初就是为了压过
   .board-grid 的 --bd-ink 继承链。 */
.board-grid.auction {
    color: var(--bd-corner-name, #ff8100) !important;
}

.auction .name {
    color: currentColor;
}

.auction .icon {
    display: flex;
    justify-content: center;
    align-content: center;
    filter: drop-shadow(currentColor 0px 0.25em 0.2em);
}

.auction.game-started.auction-closed div {
    filter: grayscale(1);
}

/* 容器相对定位 */
.auction.auction-limited.auction-open .icon {
    position: relative;
    /* 确保伪元素不会超出你想要的范围，看情况是否需要加 */
    /* display: inline-block; */
}

/* 原始图标只保留心跳缩放动画，去掉复杂的发光动画 */
.auction-limited.auction-open .burst-animation-layer {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
    /* 确保图标在最上层 */
    animation: auctionBurst 2s ease-out;
    transform: scale(1.3);
}

.burst-animation-layer img {
    inline-size: 100%;
    block-size: 100%;
}

/* 创建一个专门的发光层（伪元素） */
.auction.auction-limited.auction-open .icon::after {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    width: 100%;
    height: 100%;
    /* 铺满整个图标区域 */
    z-index: 1;
    /* 放在图标下面 */


    /* 核心2：填充发光的颜色（红橙色） */
    background-color: rgba(255, 69, 0, 1);

    /* 核心3：静态模糊。浏览器只计算一次，不参与动画过程 */
    filter: blur(15px);

    /* 核心4：执行爆发动画，只改变缩放和透明度 */
    opacity: 0;
    animation: optimizedGlowBurst 2s ease-out;
}

/* 原始的心跳动画保持不变 */
@keyframes auctionPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

/* 优化后的爆发特效：只改变 transform 和 opacity */
@keyframes auctionBurst {
    0% {
        transform: scale(1.3);
    }

    15% {
        /* 爆发瞬间：放大，且完全不透明 */
        transform: scale(1.5);
        /* 放大倍数可以调得比原本 box-shadow 大一些 */
    }

    100% {
        /* 2s 时：继续扩散，并完全变透明消失 */
        transform: scale(1.3);
    }
}

/* 优化后的爆发特效：只改变 transform 和 opacity */
@keyframes optimizedGlowBurst {
    0% {
        transform: scale(1);
        opacity: 0;
    }

    15% {
        /* 爆发瞬间：放大，且完全不透明 */
        transform: scale(1.2);
        /* 放大倍数可以调得比原本 box-shadow 大一些 */
        opacity: 0.3;
    }

    100% {
        /* 2s 时：继续扩散，并完全变透明消失 */
        transform: scale(1.8);
        opacity: 0;
    }
}

.right .auction {
    flex-direction: column;
}

.left .auction {
    display: flex;
    flex-direction: column-reverse;
    writing-mode: vertical-rl;
}

.left .auction .icon {}

.your-turn-animation {
    width: 150%;
    height: 150%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.your-turn-animation::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.759);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: flicker 1.5s;
}


@keyframes flicker {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

.character.turn {
    z-index: 999;
}

.turn.flicker .character-container {
    animation: active-pulse 1.5s ease-in-out 2s infinite;
}

@keyframes active-pulse {

    0%,
    100% {
        transform: scale(1.0);
        filter:
            drop-shadow(0 0 0em rgba(255, 255, 255, 0.311)) drop-shadow(0 0 0em rgba(255, 255, 255, 0.311)) drop-shadow(0 0 0em rgba(255, 255, 255, 0.311)) brightness(1);
    }

    50% {
        transform: scale(1.1);
        filter:
            drop-shadow(0 0 0.2em white) drop-shadow(0 0 0.2em white) drop-shadow(0 0 0.2em white) brightness(1.2);
    }
}

.police-car .character-container {
    transform: scale(2) rotate(90deg);
    filter: drop-shadow(0 0 2px black);
    animation: popup-bounce-policecar 0.5s ease-out;
    border-radius: unset;
}

/* 皮肤自定义的移动角色（警车 / 飞机）：缩放与旋转仍由外层容器负责 */
.character-container .skin-token-icon,
.plane-adjust .skin-token-icon {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    pointer-events: none;
}

.skin-token-emoji {
    font-size: 1.6em;
    line-height: 1;
    pointer-events: none;
    /* 必须是 inline-block：行内元素上的 transform 直接被忽略，
       飞/车的朝向补偿（game.js / character.js 的行内 style）会整个失效 */
    display: inline-block;
}

/* 自定义飞机棋子的朝向补偿不在这里写：图标只补一个固定角度（随素材朝向而定），
   航向交给外层 .character 的 rotate，见 game.js 的 PLANE_TOKEN_TURN / PlaneToken。 */

@keyframes popup-bounce-policecar {
    0% {
        opacity: 0;
        transform: scale(1.6) rotate(90deg) translateY(0.5em);
    }

    50% {
        opacity: 1;
        transform: scale(2.1) rotate(90deg) translateY(-0.25em);
    }

    70% {
        transform: scale(1.9) rotate(90deg) translateY(0.125em);
    }

    100% {
        transform: scale(2) rotate(90deg) translateY(0);
    }
}

.character {
    height: calc(var(--board-unit)*0.5);
    width: calc(var(--board-unit)*0.5);
    font-size: calc(var(--board-unit)*0.5);
    position: absolute;
    transition: 500ms;
}

/* =========================================
   棋子朝向层 / 蹦床弹跳
   -----------------------------------------
   棋子原来把朝向（`rotate(90deg) scaleX(-1)` 这类**复合** transform）写在 inline style 上。
   蹦床弹跳要在**屏幕竖直方向**上位移，而横边格子的棋子本身被转了 90° —— 直接写
   `translateY` 会变成「横向弹」。所以朝向改走 CSS 变量 `--char-rot`，
   弹跳把位移拼在它**前面**（transform 从左到右逐级作用于父坐标系）：
       transform: translateY(-0.35em) var(--char-rot);
   ⇒ 先按朝向摆好，再整体在父坐标系里上移。
   ========================================= */
.character-rot {
    transform: var(--char-rot, rotate(0deg));
}

/* 被蹦床弹飞：一次「下蹲蓄力 → 弹射 → 落地压一下 → 站稳」，700ms
   （时长与 game.js 的 TRAMPOLINE_HOP_MS 一致；类名要挂到动画播完才摘，见 game.js） */
.character-rot.trampoline-hop {
    animation: trampoline-hop 700ms cubic-bezier(0.22, 0.86, 0.32, 1) both;
}

/**
 * 竖直抛射的手感靠**三件事**叠出来，只做「上-下-上」会像在抖：
 *   ① 蹲：下沉 0.16em 同时横向压胖、纵向压扁 —— 蓄力；
 *   ② 弹射：冲高 0.72em，纵向拉长（1.2）且横向收窄 —— 速度感；
 *   ③ 落地：砸下 0.1em 且压扁（0.9）再回弹一次 —— 重量感。
 * 位移一律在最左、朝向排在后面（`var(--char-rot)` 作用在父坐标系），
 * 否则横边格子的 90° 朝向会把「向上」带成「向左」。
 */
@keyframes trampoline-hop {
    0% {
        transform: translateY(0) scale(1, 1) var(--char-rot, rotate(0deg));
    }

    16% {
        transform: translateY(0.16em) scale(1.1, 0.86) var(--char-rot, rotate(0deg));
    }

    /* 起跳瞬间冲高：拉长 + 收窄 */
    34% {
        transform: translateY(-0.72em) scale(0.9, 1.2) var(--char-rot, rotate(0deg));
    }

    50% {
        transform: translateY(-0.4em) scale(1, 1) var(--char-rot, rotate(0deg));
    }

    /* 落地：压扁 */
    68% {
        transform: translateY(0.1em) scale(1.08, 0.9) var(--char-rot, rotate(0deg));
    }

    84% {
        transform: translateY(-0.06em) scale(0.98, 1.03) var(--char-rot, rotate(0deg));
    }

    100% {
        transform: translateY(0) scale(1, 1) var(--char-rot, rotate(0deg));
    }
}

.character-container svg {
    width: 100%;
    height: 100%;
    /* 块级化，避免内联 SVG 按文字基线排版被 font-size 推下去（帽子/眼镜） */
    display: block;
}

.character .character-container {
    height: calc(var(--board-unit)*0.5);
    width: calc(var(--board-unit)*0.5);
}

.character-scale {
    display: flex;
    animation: scale .2s cubic-bezier(0, 0, 0, 1) 1;
    filter: drop-shadow(0 0 .5em black) drop-shadow(0 0 .75em rgba(0, 0, 0, .25));
    /* transition: transform .2s; */
}

.character-scale .character-container {
    height: calc(var(--board-unit)*0.5);
    width: calc(var(--board-unit)*0.5);
}

@keyframes scale {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(1.5)
    }
}


.stage {
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 20;
}

.stage-dim {}

/* join */
.join-container {
    width: 100vw;
    height: 100vh;
    align-items: center;
    background: rgba(19, 15, 29, .75);
    border-radius: .5em;
    display: flex;
    justify-content: center;
    transform-origin: top right;
    transition: opacity .2s;
    z-index: 999;

    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    justify-self: center;
}

.choose-container {
    position: absolute;
    top: 10%;
    display: grid;
    grid-template-rows: auto auto;
    gap: 1em;
    justify-content: center;
    justify-items: center;
    /* ★ 这里必须是界面尺子（--ui-em），不是格子尺子（--grid-em）。
       本面板虽然盖在棋盘上，但它**不是棋盘格内的字**：字号决定的是整块面板的尺度
       （颜色格 4em / 间距 .75em / 页签 1.5em 全是 em，一改全改）。用 --grid-em 时
       48 格地图的面板会比 40 格小 14%~29%（竖屏小平板最狠 −29%），换个地图 join 界面就变样。
       --ui-em = 同设备同方向的 40 格基准 ⇒ 40 格零变化、48 格与 40 格完全一致。 */
    font-size: calc(0.9 * var(--ui-em));
    /* 标题页签 + 网格；内容过高时可滚动 */
    max-height: calc(100% - 12%);
    padding: .5em 0;
}

@media (orientation: portrait) {
    .choose-container {
        top: 25%;
        max-height: calc(100% - 27%);
    }
}

/* 标题页签：「选择颜色 / 选择帽子」点击切换下方网格 */
.choose-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5em;
}

.choose-title {
    display: flex;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.choose-tab {
    opacity: .5;
    transition: opacity .2s;
}

.choose-tab.active {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: .4em;
}

.choose-tab:hover {
    opacity: .85;
}

/* --hat-scale 由 itemsInfo 的 previewScale 提供（个别帽子图标需单独缩放），默认 1.4 */
.choose-hat-role svg,
.choose-hat-role .hat-img {
    width: 100%;
    height: 100%;
    transform: scale(var(--hat-scale, 1.4));
}

/* 帽子选中时用白色发光（而非默认的 currentColor 绿色），与黑色帽子更协调 */
.choose-hat-role.enlarged {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, .9));
}

.choose-roles {
    display: grid;
    gap: .75em;
    /* 固定 4 列、行数随颜色数量自适应（公共色 12 个 = 3 行 / 付费 16 个 = 4 行） */
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    justify-items: center;
    margin: 1em;
}

/* 帽子与颜色同样按 4 列 n 行排布 */
.choose-hats {
    grid-template-columns: repeat(4, 1fr);
}

/* 主题角色棋子：同样 4 列（最多 6 个角色；没有「笑脸」格，取消靠再点一次已选中的） */
.choose-tokens {
    grid-template-columns: repeat(4, 1fr);
}

/* 角色格里的预览 = 棋盘上那枚棋子的缩小版：玩家颜色圆底 + 透明头像。
   ★ 圆底必须在这里画出来：不画的话玩家看不到「这个角色配我这个颜色」，
     而选角色的全部意义就在这一点上（棋盘上底色就是自己的颜色）。 */
.choose-token-role .character-token-preview {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 棋子（圆底）尺寸不动，只把里面的头像放大 1.2 倍：
   总表切出来的头像四周带留白，scale 正好把留白吃掉，头像看起来更饱满；
   超出的边缘由上面的 overflow: hidden 裁掉，不会溢出格子。 */
.choose-token-role .character-token-preview img {
    width: 100%;
    height: 100%;
    /* contain 而不是 cover：总表切出来的头像四周还有留白，cover 会把头顶裁掉 */
    -o-object-fit: contain;
       object-fit: contain;
    transform: scale(1.2);
}

.choose-token-role .character-token-preview .skin-token-emoji {
    transform: scale(1.2);
}

.choose-token-role .character-token-preview > .character-container,
.choose-token-role .character-token-preview > .character-container .character-body-clip {
    width: 100%;
    height: 100%;
}

/* 选中态沿用 .enlarged 的放大 + currentColor 发光；角色格不是颜色按钮，
   没自己的 color（会继承父级黑字）⇒ 显式给白色，否则深色棋盘上发光是黑的 */
.choose-token-role {
    color: #fff;
}

.role-container {
    font-size: inherit;
    width: 4em;
    height: 4em;
    background-color: transparent;
    border: 0;
    border-radius: 3em;
    cursor: pointer;
    padding: 0;
    position: relative;
    transform: scale(.75);
    transition: .2s;
    transform-origin: 50% 50%;
}

@media (orientation: portrait) {
    .role-container {
        font-size: 1.2em;
    }
}


.role-container .role-default-face {
    display: none;
}

.role-container:hover .role-default-face {
    display: block;
}

.enlarged .role-default-face {
    display: block;
}

.enlarged {
    transform: scale(1.1);
    /* 按钮被点击时放大到110% */
    filter: drop-shadow(0 0 10px currentColor);
}

.accept {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.trade-target-modal {
    background: rgba(0, 0, 0, .75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
}

.trade-target-panel {
    --my-w: min(calc(0.4 * var(--center-h)), var(--center-w));
    width: var(--my-w);
    font-size: calc(0.07*var(--my-w));
    padding: 1rem;
    border-radius: 0.8em;
    background: var(--c-g-panel);
    display: flex;
    flex-direction: column;
    height: -moz-fit-content;
    height: fit-content;
    min-height: 16rem;
    max-height: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .2s;
    box-sizing: border-box;

    z-index: 500;
}

.trade-target-title {
    color: #9e8fc5;
    font-weight: 600;
    padding: 0 1rem 1em;
    text-align: center;
}

.trade-targets {
    padding-top:0.3em;
    position: relative;
    align-items: center;
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 50%;
    text-align: center;
    overflow-y: scroll;
    overflow-x: hidden;

}

.player-banner {
    width: 90%;
    display: flex;
    margin: 0.2em 0.6em;
    padding: 0.4em 0.5em;
    height: 3em;
    background: #557685;
    background: linear-gradient(176deg, rgba(85, 118, 133, 1) 0%, rgba(85, 124, 133, 1) 53%, rgba(85, 108, 133, 1) 100%);
    border-radius: 0.5em;
    border: 0;
    align-items: center;
}


.player-banner .character-container {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

.bidding-button-background {
    color: white;

}

.button.trade-confirm-button {
    background: #2e9f62;
    background-image: linear-gradient(to top left, #247348, #42c77d);
}

.button.mortgage-pay-asset-button {
    background: #b64242;
    background-image: linear-gradient(to top left, #7d2929, #d75a5a);
}

.button.trade-reject-button {
    background: #b64242;
    background-image: linear-gradient(to top left, #7d2929, #d75a5a);
}

.button.trade-neutral-button {
    background: #6655b8;
    background-image: linear-gradient(to top left, #453775, #8675d4);
}

.button.bid-amount-2 {
    background: #e3b722;
    background-image: linear-gradient(to top left, #c9980f, #f4d03f);
}

.button.bid-amount-10 {
    background: #f0a000;
    background-image: linear-gradient(to top left, #d68910, #f6c24c);
}

.button.bid-amount-100 {
    background: #e67e22;
    background-image: linear-gradient(to top left, #ca6f1e, #f39c12);
}

.button.trade-confirm-button:hover,
.button.mortgage-pay-asset-button:hover,
.button.trade-neutral-button:hover,
.button.trade-reject-button:hover,
.button.bid-amount-2:hover,
.button.bid-amount-10:hover,
.button.bid-amount-100:hover {
    background-image: inherit;
}

.bidding-button-background svg {
    width: calc(1.8* var(--ui-em));
    height: calc(1.8* var(--ui-em));
}

.tenFold-borrow-button {
    background-image: linear-gradient(to top left, #411fc4, #c34bdf);
}

.player-name {
    color: rgb(255, 255, 255);
    align-items: center;
    margin-left: 0.6em;
    /* text-wrap-mode 要 Chrome 114 / Safari 17.4，等价且全兼容的写法是 white-space */
    white-space: nowrap;
    overflow: hidden;

}

.player-banner:hover {
    filter: brightness(1.2);
}

/* 多方交易：目标多选样式（选中蓝色高亮，与城市列表选中一致，简洁无勾选/边框） */
.player-banner.multi-target-selected {
    background: #6647e0;
    border-color: #6647e0;
    color: #fff;
}

.multi-target-confirm-row {
    /* margin-top:auto 让按钮以 trade-target-panel 底部为基准定位；padding-top 保证与玩家栏之间始终有固定间距 */
    margin-top: auto;
    padding-top: 0.8em;
    margin-bottom: 0.4em;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

/* 确认按钮：与 trade.js 按钮风格一致，但不变宽、无阴影 */
.multi-target-confirm-row .button {
    width: auto;
    min-width: calc(5 * var(--ui-em));
    box-shadow: none;
}

.button.tenFold-borrow-button.bidding-button-background:hover {
    filter: brightness(1.2);
    background-image: linear-gradient(to top left, #411fc4, #c34bdf);
}

.trade-final-panel {
    font-size: calc(0.03*var(--trade-w));
    width: var(--trade-w);
    /* max-height: min(var(--center-h), calc(2 * var(--center-w))); */
    box-sizing: border-box;
    gap: 1em;
    padding: 3em 2em 2em;
    border-radius: 0.8em;
    background: var(--c-g-panel);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform .2s;
    z-index: 500;
    animation: emerge-scale-move-trade 0.25s linear;
}

@keyframes emerge-scale-move-trade {
    0% {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 10px)) scale(0.875);
    }
}

.skill-award-bid {
    background-image: linear-gradient(to top left, #000000, #b63d3d);
    box-shadow: 0 0 20px #e45656, 0 0 40px #e03a3a;
}

.skill-award-bid-button {
    background-image: linear-gradient(to top left, #695d0c, #ffde00);
}

.button.bidding-button-background.skill-award-bid-button:hover {
    background-color: yellow;
    background-image: linear-gradient(to top left, #695d0c, #ffde00);
    filter: brightness(1.2);

}

.trade-fianl-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
}

.trade-fianl-content {
    flex-grow: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    gap: 1em;
}

.trade-final-content-money-cities {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    gap: 0.5em;
}

.bid-countdown-bar {
    width: 80%;
    height: calc(1* var(--ui-em));
    border-radius: calc(0.5* var(--ui-em));
    background-color: #262a4c;
}

.bid-countdown-bar.award-progress-bar {
    background-color: #c57c7c;

}

.bit-countdown-progress {
    width: 0;
    background-color: yellow;
    height: 100%;
    border-radius: inherit;
}

.final-trade-column {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: .5em 1em 1.5em;
    max-height: min(calc(var(--center-h) - 16em), calc(2 * var(--center-w)));
}

.money-asset {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

.trade-column-name {
    margin: 0.5rem 0;
    display: flex;
    justify-content: center;

}

.trade-column-money {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    -webkit-appearance: none;
    margin: 0;
    position: relative;
}

.auction-column {
    justify-content: center;
    border-radius: 1em;
    padding: 1em;
    gap: 0.4em;

}

.auction-money {
    padding: .5em;
}

.mortgage-illustration {
    display: grid;
    grid-template-columns: 4em 6em;
    color: #9ea1b8;
    font-size: 1.2em;
    -moz-column-gap: 1em;
         column-gap: 1em;
}

.mortgage-illustration .left {
    justify-self: end;
    text-align: end;
}

.bidding-name {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.bidding-player {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 calc(0.5* var(--ui-em));
    gap: calc(0.5 * var(--ui-em));
    position: relative;
    width: 100%;
}

.bidding-player .name {
    white-space: nowrap;
    overflow: hidden;

}

.bidding-icon {
    display: flex;
    transition: 0.5s;
}

.bidding-icon .character-container {
    width: 2.08em;
    height: 2.08em;

}

.bidding-preposition {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #9799a8;
    font-weight: 500;
    font-size: 1.2em;
}

.bidding-preposition.auction-times {
    color: #c4eaff8a;
    background-color: #ffffff12;
    font-size: 1.1em;
    font-weight: normal;
    border-radius: 0.4em;
    padding: 0.1em 0.7em;
    text-align: center;
}

.auction-times-my-display {
    color: #ffffffbf;
    background-color: #ffffff3b;
    border-radius: 0.5em;
    padding: 0.3em 0.7em;
    text-align: center;
    line-height: 1;
    margin-top: 0.4em;
    font-size: 0.9em;
}

.bidding-price {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 900;
    font-size: 2em;
    transition: font-size 0.3s;
}

.mortgagePayTarget-container {
    display: flex;
    flex-direction: column;
    gap: calc(0.2* var(--ui-em));
    align-items: center;
}

.due-round {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: calc(1* var(--ui-em));

}


.trade-column-money .rc-slider-rail {
    background-color: #3f3260 !important;
}

.trade-column-money .rc-slider-track {
    background-color: white !important;
}

.trade-column-money .rc-slider-dot {}

.trade-column-money .rc-slider-mark {}

.trade-column-money .rc-slider-handle {
    opacity: 1;
    border: none !important;
    background-color: #e0ddea;
    box-shadow: 0 0 10px rgb(244 244 244);
}

.trade-column-money .rc-slider-disabled .rc-slider-handle {
    background-color: #6a6182;
    box-shadow: none;

}

.trade-column-money .rc-slider-disabled .rc-slider-track {
    background-color: rgb(144, 144, 144) !important;
}

.trade-column-money .rc-slider-handle:focus,
.trade-column-money .rc-slider-handle:active,
.trade-column-money .rc-slider-handle-dragging {
    box-shadow: 0 0 10px 4px white !important;
    border: none;
}

/* Ensure no glow when disabled and focused/active/dragging */
.trade-column-money .rc-slider-disabled .rc-slider-handle:focus,
.trade-column-money .rc-slider-disabled .rc-slider-handle:active,
.trade-column-money .rc-slider-disabled .rc-slider-handle-dragging {
    box-shadow: none !important;
}

.rc-slider-dot {
    background-color: #3f3260 !important;
    border: 0 !important;
}

.rc-slider-dot-active {
    background-color: white !important;
}

.trade-column-money .rc-slider-disabled .rc-slider-dot-active {
    background-color: rgb(144, 144, 144) !important;
}

.rc-slider-disabled {
    background-color: transparent !important;
}

.money-text {
    border: none;
    outline: none;
    flex-grow: 1;
    padding: 1px 0px;
    font-size: 16px;
    width: 100%;
    align-items: center;
    align-self: center;
    font-size: 1em;
    text-align: center;
    border: 0;
    width: -moz-fit-content;
    background-color: transparent;
    width: 3em;
    color: white;
}

.input-symbol {
    color: #adadad;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #308eb5;
    border: none;
    border-radius: 0.8em;
    overflow: hidden;
    height: 1.6em;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 3em;
    max-width: 5em;
    overflow: hidden;
    padding: 0 0.6em;
}

.input-group:focus-within {
    background-color: #3aa0cb;
    box-shadow: 0 0 0 2px #ffffff, 0 0 8px rgba(255, 255, 255, 0.6);
}

.input-group:focus-within .input-symbol {
    color: #ffffff;
}


.trade-cities-container {
    flex: 1;
    min-height: 0;
    position: relative;
    align-items: center;
    flex-direction: column;
    display: flex;
    max-height: calc(50*var(--vh));
    overflow-y: auto;
    overflow-x: hidden;
}

.trade-column-city {
    position: relative;
    align-items: center;
    background: 0 0;
    border: 2px solid hsla(0, 0%, 100%, .1);
    border-radius: .5em;
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    display: flex;
    line-height: 1em;
    padding: 0.6em;
    text-align: initial;
    transition: .2s;
    width: 100%;
    font-size: 1.2em;
}

@media (min-width: 601px) {
    .trade-column-city:hover {
        background: #d5cbfe99;
    }
}

.disable-trade-city-banner {
    filter: brightness(0.5);
}

.disable-trade-city-banner:hover {
    background: 0 0;
}

.trade-city-leased {
    opacity: 1;
    position: relative;
    border: 2px dashed;
    border-color: rgb(255 255 255 / 36%) !important;
}

.trade-city-stale {
    position: relative;
    overflow: hidden;
}

.trade-city-stale::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(45deg,
            transparent,
            transparent 4px,
            rgba(255, 0, 0, 0.12) 4px,
            rgba(255, 0, 0, 0.12) 8px);
    pointer-events: none;
    z-index: 1;
}


.trade-column-city-icon {
    height: 1.2em;
    width: 1.2em;
    margin: 0 0.5em 0 0;
    /* 皮肤图标可以是图片也可以是 emoji / 单字（见 trade.js 的 TradeCityIcon），
       统一居中，尺寸由下面几条规则钉住 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 文本版图元（emoji）在 1.2em 的小方框里要缩一档才不顶出去 */
.trade-column-city-icon .tile-glyph-text {
    font-size: 1em;
}

.trade-column-city-icon svg {
    width: 100%;
    height: 100%;
}

.trade-column-city-icon img {
    width: 100%;
    height: 100%;
    border-radius: 0.2em;
}

.trade-column-city-icon .energy {
    transform: scale(1.5);
}

.trade-column-city-icon .foundation {
    transform: scale(1.2);
}

.trade-column-city-icon .dream {
    transform: scale(1.5);
}

.trade-column-city-name {
    word-break: break-word;
    font-size: 1em;
    flex: 1 0 0;
}

.trade-column-city-price {
    font-size: 1em;

}

.trade-city-highlight {
    background: #6647e0;
    border-color: #6647e0;
    color: #fff
}

.send-trade {
    display: flex;
    justify-content: space-around;
}

.trade-fee-note {
    position: absolute;
    bottom: 0.5em;
    left: 2em;
    font-size: 1em;
    color: #ffcc00d9;
}

.set-hide-tutorial {
    position: absolute;
    bottom: 0.5em;
    right: 2em;
    display: flex;
    flex-direction: column;
    align-self: self-end;
    border-radius: 0.8em;
    gap: 0.4em;
    align-items: center;
    padding: 0.6em 1em;
}
.set-hide-tutorial .toggle-button {
    font-size: 0.5em;
}
.border-breath {
    border: 0.3em solid rgba(255, 255, 255, 0.705);
    animation: borderBreath 2s ease-in-out infinite;
}

/* 边框呼吸动画 */
@keyframes borderBreath {
    0% {
        box-shadow: 0 0 0 rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
        border-color: rgba(255, 255, 255, 0.7);
        transform: scale(1.02);
    }

    100% {
        box-shadow: 0 0 0 rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.4);
        transform: scale(1);
    }
}

.plane-adjust {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    z-index: 1;
    filter: drop-shadow(0 0 1px #000000ab);

}

.plane-adjust img {
    width: 120%;
    height: 120%;
}

.rotate-reminder {
    color: #3c7c3c !important;
    background-color: currentColor !important;
    box-shadow: 0 0 2em currentColor !important;
    width: 90%;
    margin: 10px auto;
}

.rotate-reminder .inside {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0.3em 0;
    width: 100%;
}

.rotate-reminder .icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 0.8em;
    height: 2.2em;
    width: 2.2em;
    animation: flick-rotate 1.2s ease-in-out infinite;
    color: rgb(255 255 255 / 67%);
}

@keyframes flick-rotate {

    /* Start position: no rotation */
    0%,
    100% {
        transform: rotate(0deg);
    }

    /* Middle of animation: rotated 90deg clockwise */
    50% {
        transform: rotate(90deg);
    }
}

/* 
.rotate-reminder .icon svg {
    width: 56%;
    margin-left: 0.1em;
} */


.rotate-reminder .text {
    color: #ffffffb8;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 1em;
}

.game-toast {
    z-index: 200 !important;
    top: calc((100vh - ((var(--board-half) - var(--board-unit-num)) * var(--board-unit))) / 2 + var(--board-unit)) !important;

}

.toast-dark-background {
    background: linear-gradient(0deg #425ca4 #304378) !important;
}

@media (max-width: 600px) {

    .center-bottom {
        /* 移动端同理：0.05 / 0.25 = 0.2，仍以 40 格基准换算（见上方 .center-bottom 注释） */
        font-size: calc(0.2 * var(--ui-num, 5) * var(--ui-em));
    }

    .trade-arrow {
        margin: 0;
    }

    .popup-info {
        font-size: 10px;
    }

    .non-city-info {
        font-size: 10px;
    }

    .info {
        padding: 0 0.2rem;
    }

    .player-banner-money {
        font-size: 0.6rem;
    }


    .info-banner {
        padding: 0 0.2em;
        height: 2.5rem;
    }

    .bidding-button-background svg {
        width: 2rem;
        height: 2rem;
        margin-left: 0.5em;

    }


    .player-banner .character-container {
        margin-left: 0.5em;
    }

    .main-name {
        display: none;
    }

    .choose-title {
        font-size: 1rem;
    }





    .send-trade button {
        font-size: 0.8rem;
        width: 5rem;
        height: 2rem;
    }

    /* 多方交易确认按钮：保持宽度自适应，字号/高度与其它交易按钮移动端一致 */
    .multi-target-confirm-row .button {
        font-size: 0.8rem;
        min-width: 5rem;
        height: 2rem;
    }


    .trade-final-panel {
        padding: 3em 1em 2em;
    }

    .trade-column-city-icon {}

    .trade-fianl-title {
        font-size: 1.8em;
    }

    .trade-column-city {
        padding: 1em 0.6em;
    }


    .trade-column-name {
        font-size: 1.2em;
    }

    .center {
        grid-template-rows: 35% 6% 19% 40%
    }

    .center.popup-open {
        grid-template-rows: 35% 15% 19% 31%
    }

    .center-button-container {
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr;
        gap: 5px
    }


    .player-bannner-icon>svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .city-popup {
        max-width: 12rem;
    }

    .background-image {
        background-repeat: repeat;
        background-size: 270px;
        background-position: top left;
        filter: blur(2px);
    }

}

@media (max-height: 561px) {

    .center-button-container {
        margin-top: 0;
    }
}

.spectator-paywall-popover {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 1px solid rgba(102, 192, 244, 0.25);
    border-radius: 12px;
    padding: 14px 18px;
    max-width: calc(100vw - 40px);
    width: 240px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(102, 192, 244, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.spectator-paywall-popover .spectator-paywall-icon {
    font-size: 28px;
    color: #66c0f4;
    margin-bottom: 2px;
    filter: drop-shadow(0 0 6px rgba(102, 192, 244, 0.4));
}

.spectator-paywall-popover .spectator-paywall-text {
    font-size: 13px;
    line-height: 1.5;
    color: #e0e0e0;
    white-space: normal;
    word-break: break-word;
}

.spectator-paywall-popover .spectator-paywall-text strong {
    color: #fff;
    font-weight: 700;
}

.spectator-paywall-popover .spectator-paywall-free-trial {
    font-size: 13px;
    line-height: 1.5;
    color: #e0e0e0;
    white-space: normal;
    word-break: break-word;
}

.spectator-paywall-popover .spectator-paywall-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    align-self: stretch;
    margin-top: 4px;
    padding: 7px 18px;
    background: linear-gradient(135deg, #2a475e, #1b2838);
    border: 1px solid #66c0f4;
    border-radius: 6px;
    color: #66c0f4;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}

.spectator-paywall-popover .spectator-paywall-btn:hover {
    background: #66c0f4;
    color: #1a1a2e;
    box-shadow: 0 0 12px rgba(102, 192, 244, 0.5);
}

.spectator-paywall-popover .spectator-paywall-btn.spectator-paywall-redeem {
    background: linear-gradient(135deg, #5b3a8f, #3a2f5b);
    border-color: #6647e0;
    color: #d8c9ff;
}

.spectator-paywall-popover .spectator-paywall-btn.spectator-paywall-redeem:hover {
    background: #6647e0;
    color: #ffffff;
    box-shadow: 0 0 12px rgba(102, 71, 224, 0.5);
}

/* ==================== 皮肤自定义棋盘图标 ====================
   有图标覆盖时 city.js 只渲染这一个外壳，原版那套分支不再执行。
   图片沿用 `.city .icon img` 的尺寸规则；文本（emoji/单字）在这里居中并保持正立。 */
.tile-glyph-wrap {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    /* 不裁剪：放大/偏移是玩家显式调的，图标框只有 2em，裁剪会让 scale>1 立刻失去意义。
       真正的边界交给地块本身（地块比图标框大得多）。 */
    overflow: visible;
}

/* 微调承载层：transform-origin 居中，图片/文本本身尺寸规则不变 */
.city .icon .tile-glyph-inner,
.city-popup-title .icon .tile-glyph-inner,
.random-range-icon .tile-glyph-inner,
.trade-column-city-icon .tile-glyph-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    will-change: transform;
}

/* 皮肤图元的尺寸口径：**只由容器决定，不由地块类型决定**。
   原版每类地块各有一套百分比补偿（机会/先锋/护盾/科技/城堡 80%、银行 60%、惊喜 70%、
   基金会·梦想·机场 100%…），那是给「自带大片留白的原版 SVG」配的，不是给图元配的。
   而皮肤图元在上传切割时已按内容 bbox 归一化（长边 = 92% 帧），再套这些百分比就会
   「同一套皮肤里一格大、一格小」；梦想/基金会/机场还同时写死 width+height，
   会把非方图直接拉变形。这里一律「铺满容器 + contain 等比留白」。
   ⚠️ 选择器必须带 `.board-grid`：`.opportunity .icon img` 是 (0,2,1)，
   去掉 `.board-grid` 就与它同分、只能靠源码顺序取胜；带上即 (0,3,1)，稳定压过所有单类规则
   （`!important` 的那几条——基金会——值本身也是 100%，无冲突）。 */
.board-grid .icon img.tile-glyph {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    /* 等级图标（cityLevelN / techLevelN）的容器可能不是标准 .icon 轨道，
       这里一并夹住，免得上传大图按固有尺寸撑破地块 */
}

/* 弹窗标题 / 随机池勾选项 / 交易列表里的同一枚图元，口径保持一致 */
.city-popup-title .icon img.tile-glyph,
.random-range-icon img.tile-glyph,
.trade-column-city-icon img.tile-glyph {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.tile-glyph-text {
    display: block;
    font-size: 1.5em;
    line-height: 1;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    /* 左右两侧的地块是 vertical-rl 排版，图标必须保持正立 */
    writing-mode: horizontal-tb;
    filter: drop-shadow(0 0.08em 0.22em rgba(0, 0, 0, 0.5));
}

/* 弹窗标题里的图标框只有 1em，文字跟着缩一档 */
.city-popup-title .tile-glyph-text {
    font-size: 1em;
}

.random-range-icon .tile-glyph-text {
    font-size: 1.2em;
}
/* ==================== 通知事件图标（皮肤可覆盖，表见 shared/skinNoticeIcons.js） ====================
   和通知里的小头像同尺寸（1em），混在文字中间不顶行高。
   文本版 = 玩家自己填的 emoji，保持文字排版，不加尺寸。 */
.notice-glyph {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.15em;
}

.notice-glyph.is-text {
    width: auto;
    height: auto;
    vertical-align: baseline;
    line-height: 1;
}

.dice-container {

    position: relative;
    display: flex;
    font-size: calc(1 * var(--ui-em));
}

.camera {
    transform-style: preserve-3d;
    transform: rotateX(59deg) rotateZ(45deg) rotateY(0);
    will-change: transform;
}

.dice-shadow {
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
    width: 10em;
    height: 1em;
    background: radial-gradient(ellipse at center, rgb(85 31 31), rgb(72 33 33));
    border-radius: 50%;
    filter: blur(0.5em);
    transform-style: preserve-3d;
    z-index: -1;
}

.jump-container {
    --color: rgb(229 119 119);
    --color-glow: rgb(255, 173, 173);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transition: transform 1s cubic-bezier(0, 0, 0, 1);
    color: #c53c44;
    will-change: transform;
}

.jump-container.invisible {
    display: none;
}

/* 金黄色闪烁光晕效果 */
@keyframes glow-effect {
    0% {
        filter: drop-shadow(0 0 0px var(--color-glow)) brightness(1);
    }

    50% {
        filter: drop-shadow(0 0 calc(0.5 * var(--ui-em)) var(--color-glow)) brightness(1.2);
        /* 增加光环的大小和亮度 */
    }

    100% {
        filter: drop-shadow(0 0 0px var(--color-glow)) brightness(1);
        /* 归回原状态 */
    }
}

/* 当骰子丢出6点时的动画效果 */
.jump-container.highlight-glow {
    animation: glow-effect 1s ease-in-out;
    /* 持续时间0.6秒的闪烁效果 */
}

.jump {
    transform: translateY(-3em);
}

.dice {
    padding: 1em;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    transform-style: preserve-3d;
    width: 3em;
    height: 3em;
    will-change: transform;
}

.dice.a {
    transition: transform 1s cubic-bezier(0, 0, 0, 1);
}

.dice.b {
    transition: transform 1s cubic-bezier(0, 0, 0, 1);
}

.dice .side {
    color: inherit;
    box-sizing: border-box;
    border-radius: 0.8em;
    background-color: currentColor;
    display: grid;
    grid-column: 1;
    grid-row: 1;
    grid-template-areas:
        "one two three"
        "four five six"
        "seven eight nine";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 100%;
    padding: 0.5em;
    width: 100%;
}

.upnow {
    background-color: #fefefe;
}

.dice .inside {
    background-color: var(--color);
}

.side i {
    display: block;
    background-color: #000;
    border-radius: 50%;
    align-self: center;
    justify-self: center;
    height: 0.5em;
    width: 0.5em;
}

[data-side="2"] i:nth-of-type(1),
[data-side="3"] i:nth-of-type(1),
[data-side="4"] i:nth-of-type(1),
[data-side="5"] i:nth-of-type(1),
[data-side="6"] i:nth-of-type(1) {
    grid-area: one;
}

[data-side="4"] i:nth-of-type(2),
[data-side="5"] i:nth-of-type(2),
[data-side="6"] i:nth-of-type(2) {
    grid-area: three;
}

[data-side="6"] i:nth-of-type(3) {
    grid-area: four;
}

[data-side="1"] i:nth-of-type(1),
[data-side="3"] i:nth-of-type(2),
[data-side="5"] i:nth-of-type(3) {
    grid-area: five;
}

[data-side="6"] i:nth-of-type(4) {
    grid-area: six;
}

[data-side="4"] i:nth-of-type(3),
[data-side="5"] i:nth-of-type(4),
[data-side="6"] i:nth-of-type(5) {
    grid-area: seven;
}

[data-side="2"] i:nth-of-type(2),
[data-side="3"] i:nth-of-type(3),
[data-side="4"] i:nth-of-type(4),
[data-side="5"] i:nth-of-type(5),
[data-side="6"] i:nth-of-type(6) {
    grid-area: nine;
}

[data-side="1"] {
    transform: rotate3d(0, 0, 0, 90deg) translateZ(1.5em);
}

[data-side="7"] {
    transform: rotate3d(0, 0, 0, 90deg) translateZ(1.45em);
}

[data-side="2"] {
    transform: rotate3d(-1, 0, 0, 90deg) translateZ(1.5em);
}

[data-side="8"] {
    transform: rotate3d(-1, 0, 0, 90deg) translateZ(1.45em);
}

[data-side="3"] {
    transform: rotate3d(0, 1, 0, 90deg) translateZ(1.5em);
}

[data-side="9"] {
    transform: rotate3d(0, 1, 0, 90deg) translateZ(1.45em);
}

[data-side="4"] {
    transform: rotate3d(0, -1, 0, 90deg) translateZ(1.5em);
}

[data-side="10"] {
    transform: rotate3d(0, -1, 0, 90deg) translateZ(1.45em);
}

[data-side="5"] {
    transform: rotate3d(1, 0, 0, 90deg) translateZ(1.5em);
}

[data-side="11"] {
    transform: rotate3d(1, 0, 0, 90deg) translateZ(1.45em);
}

[data-side="6"] {
    transform: rotate3d(1, 0, 0, 180deg) translateZ(1.5em);
}

[data-side="12"] {
    transform: rotate3d(1, 0, 0, 180deg) translateZ(1.45em);
}

[data-side="13"],
[data-side="14"],
[data-side="15"] {
    height: 90% !important;
    width: 90% !important;
}

[data-side="13"] {
    transform: rotate3d(1, 0, 0, 90deg);
}

[data-side="14"] {
    transform: rotate3d(0, 1, 0, 90deg);
}

[data-side="15"] {
    transform: rotate3d(0, 0, 0, 90deg);
}

.a[data-roll="1"] {
    transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}

.a[data-roll="2"] {
    transform: rotateX(450deg) rotateY(720deg) rotateZ(360deg);
}

.a[data-roll="3"] {
    transform: rotateX(360deg) rotateY(630deg) rotateZ(360deg);
}

.a[data-roll="4"] {
    transform: rotateX(360deg) rotateY(810deg) rotateZ(360deg);
}

.a[data-roll="5"] {
    transform: rotateX(270deg) rotateY(720deg) rotateZ(360deg);
}

.a[data-roll="6"] {
    transform: rotateX(360deg) rotateY(900deg) rotateZ(360deg);
}

.b[data-roll="1"] {
    transform: rotateX(-360deg) rotateY(-720deg) rotateZ(-360deg);
}

.b[data-roll="2"] {
    transform: rotateX(-270deg) rotateY(-720deg) rotateZ(-360deg);
}

.b[data-roll="3"] {
    transform: rotateX(-540deg) rotateY(-630deg) rotateZ(-360deg);
}

.b[data-roll="4"] {
    transform: rotateX(-540deg) rotateY(-810deg) rotateZ(-360deg);
}

.b[data-roll="5"] {
    transform: rotateX(-450deg) rotateY(-900deg) rotateZ(-360deg);
}

.b[data-roll="6"] {
    transform: rotateX(-360deg) rotateY(-900deg) rotateZ(-360deg);
}
:root {
    --toastify-color-warning: #29203e !important;
    /* the length of one grid */
    --board-unit: 9.09vh;
    /* top bar gird counts */
    --board-unit-num: 9;
    /* 半圈格数：40 格棋盘是 20，48 格是 24（calcGameBoardSize 按地图长度写入） */
    --board-half: 20;
    --board-unit-length: 9.09vh;

    --center-w: calc(var(--board-unit) * var(--board-unit-num));
    --trade-w: min(calc(0.72 * var(--center-h)), var(--center-w));
    /* 中心区高度 = 左右两侧的格数 = half - 2 - num（40 格时恒为 18 - num） */
    --center-h: calc(var(--board-unit) * (var(--board-half) - 2 - var(--board-unit-num)));
    /* grid count is decided by the w/h ratio*/
    /* grid size is decided by the count and the window size */
    /* the font size of grid should decided by grid size */
    /* the whole font size should decided by the center width, means count*(grid size or font size of grid) */
    /* 格子内的尺子：字号/图标跟着格子大小走（格子小了就该小，否则挤破） */
    --grid-em: calc(var(--board-unit)* 0.25);
    /* 界面控件的尺子：按钮、骰子、浮层、玩家信息条等。
       兜底值与 --grid-em 相同 —— 房间里 / 大厅 / 结算这些非棋盘页面拿不到 JS 计算值，
       行为与改造前一致；进游戏后 calcGameBoardSize 会把它改写成
       「同设备同方向下 40 格的格子 × 0.25」，于是 48 格地图的界面不再跟着格子缩水。
       判据：这条规则作用在棋盘格（.board-grid / .ctiy 等）**内部**时，一律继续用 --grid-em。 */
    --ui-em: calc(var(--board-unit)* 0.25);
    /* 配合 --ui-em 的「40 格基准中间格数」（calcGameBoardSize 按 40 格几何写入）。
       需要「center-w 口径」（unit × num）的字号用它换算回 40 格：
       0.023 × centerW₄₀ = 0.092 × --ui-num × --ui-em（见 game.css .center-bottom）。
       ⚠️ 不能换成 --board-unit-num：那是**当前地图**的 num，48 格时会让字号重新偏大。
       兜底 9 = 40 格横屏 / 正方形档；JS 未跑时非游戏页面也不会用到它。 */
    --ui-num: 9;
    --game-em: calc(0.03*var(--center-w));
    --vh: 1vh;
    --window-em: 4vw;
    /* colors */
    /* --c-background: #180f1d;
    --c-button: #5432da;
    --c-button-sub: #4a08c1;
    --c-button-prominent: yellow;
    --c-button-warning: red;

    --c-title: white;
    --c-title-sub: #b5b9fd;
    --c-nickname: #2d2445;

    --c-board: black; */
    --c-background: #080b27;
    --c-button: #65e11d;
    --c-button-sub: #5fa639;
    --c-button-head: #ffffff40;
    --c-button-prominent: yellow;
    --c-button-warning: red;

    --c-title: white;
    --c-title-sub: #67d9fa;
    --c-nickname: #062634;


    --c-board: black;
    /* main page vaiable */
    --light-delay: 1.5s;
    /* game color */
    --c-g-background: #13224c;

    --c-g-center: rgba(95, 95, 95, 0);
    --c-g-grid: #1d266d;
    --c-g-panel: #344881;
    --c-g-button:
        /* 上边缘高光 */
        radial-gradient(120% 80% at 50% 0%,
            rgba(255, 255, 255, 0.20),
            rgba(255, 255, 255, 0.08) 35%,
            rgba(255, 255, 255, 0.00) 60%),
        /* 下边缘高光 */
        radial-gradient(120% 80% at 50% 100%,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.05) 35%,
            rgba(255, 255, 255, 0.00) 60%),
        /* 中部轻微压暗，让边缘更“立” */
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.05),
            rgba(0, 0, 0, 0.05)),
        #36b986;

    --c-g-light-text: #d3e1e7;
    --c-g-text: #aac1cd;
}

@media (orientation: landscape) {
    :root {
        --window-em: 2.6vh;
    }
}

body,
span[role="img"] {}

* {
    font-family: Segoe UI, sans-serif, Segoe UI Emoji;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Global selection style */
*::-moz-selection {
    background-color: transparent;
}
*::selection {
    background-color: transparent;
}

*:focus {
    outline: none;
}

/* Exclude input by resetting its selection style */
input::-moz-selection {
    background-color: rgba(219, 219, 219, 0.318);
    /* or use system default */
}
input::selection {
    background-color: rgba(219, 219, 219, 0.318);
    /* or use system default */
}

html,
body {
    margin: 0;
    transition: 0s;
}

#root {
    height: 100vh;
    width: 100vw;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-content: center;
    z-index: 100;

    /* accent-color: #6647e0; */
    background-attachment: fixed;
    --color-cyan: rgba(0, 255, 255, 0.4);
    --color-pink: rgba(255, 182, 193, 0.5);
    --color-green: rgba(152, 251, 152, 0.4);

    --bg-main: #9ac5d5;
    --size: 16vh;
    --c1: #509abd;
    background:
        /* 原有几何纹理 */
        linear-gradient(45deg, var(--c1) 25%, transparent 25%) 0 0 / var(--size) var(--size),
        linear-gradient(-45deg, var(--c1) 25%, transparent 25%) 0 0 / var(--size) var(--size),
        linear-gradient(45deg, transparent 75%, var(--c1) 75%) 0 0 / var(--size) var(--size),
        linear-gradient(-45deg, transparent 75%, var(--c1) 75%) 0 0 / var(--size) var(--size),

        var(--bg-main);
    /* background-color: #130f1d;
    background-image: linear-gradient(to bottom right, #130f1d, #1a0f1d); */
    color: #fff;
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
}

/* #root:has(.start-anime)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    filter: blur(1px);


    background:
        radial-gradient(ellipse 30% 100% at 50% 20%,
            rgba(0, 88, 123, 0.6) 0%,
            rgba(0, 88, 123, 0.32) 30%,
            rgba(0, 88, 123, 0.15) 60%,
            rgba(0, 88, 123, 0.03) 85%,
            rgba(0, 88, 123, 0) 100%);

    opacity: 0;
    animation: show-backlight 0.8s ease-out calc(var(--light-delay) + 0.5s) forwards;
} */

@media (orientation: portrait) {


    #root:has(.start-anime)::after {


        background:
            radial-gradient(ellipse 80% 100% at 50% 20%,
                rgba(51, 142, 175, 0.6) 0%,
                rgba(51, 142, 175, 0.32) 30%,
                rgba(51, 142, 175, 0.15) 60%,
                rgba(51, 142, 175, 0.03) 85%,
                rgba(51, 142, 175, 0) 100%);
    }
}

@keyframes show-backlight {
    to {
        opacity: 1;
    }
}

::-webkit-scrollbar-button {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* Scrollbar container */
::-webkit-scrollbar {
    width: 4px;
    /* or as thin as you like */
    height: 4px;
}

/* Transparent background track */
::-webkit-scrollbar-track {
    background: transparent;
}

/* Scrollbar thumb (the draggable bar) */
::-webkit-scrollbar-thumb {
    background-color: rgba(136, 136, 136, 0.6);
    /* semi-transparent gray */
    border-radius: 2px;
}

/* Optional: On hover, make the thumb darker */
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(85, 85, 85, 0.8);
}

@-moz-document url-prefix() {
    * {
        scrollbar-width: thin;
        scrollbar-color: rgba(136, 136, 136, 0.6) transparent;
    }
}

/* 
.Toastify__toast-container {
    justify-items: center !important;
} */

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.feedback {
    width: 100%;
    max-width: 60rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 0;
}
.feedbacks-display{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2em;
    width: 30rem;
    max-width: 90%;
}
.feedback-entry-container {
    width: 30rem;
    max-width: 90%;
    display: flex;
    justify-content: space-between;
    color: #cbcbcb;
}
.feedback-entry-content{
    font-size: 1em;
    word-break: break-all;
}
.feedback-entry-time{
    font-size: 0.8em;
    color: #899eab;
    min-width: 9em;

}
.feedback-input {
    box-sizing: border-box;
    display: flex;
    height: 5rem;
    width: 100%;
    border-radius: 0.4rem;
    border-width: 0;
    outline: none;
    padding: 1em;
}

.feedback-submit-wrapper {
    width: 30rem;
    max-width: 90%;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
}

input[type="text"]::-moz-placeholder {
    color: #999;
    font-style: italic;
    text-align: left;
    padding-right: 20px;
}

input[type="text"]::placeholder {
    color: #999;
    font-style: italic;
    text-align: left;
    padding-right: 20px;
}

.feedback-loading {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 10px solid;
    border-color: rgba(255, 255, 255, 0.15) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }
  
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  } 
.login-container {
    position: fixed;
    transform: translate(-50%, -50%);
    top: calc(50*var(--vh));
    left: 50vw;
    width: 18rem;
    max-width: 98vw;
    background-color: #29203f;
    box-shadow: 5px 5px 50px black;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem 1.8rem;
    gap: 0.5em;
    z-index: 130;
    font-size: 1.8rem;
}

.login-entry {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.entry-name {
    font-weight: 300;
    display: block;
    font-size: 1.1rem;
    color: #baafd4cc;
}

.entry-input {
    width: 95%;
    background-color: transparent;
    border: none;
    color: white;
    outline: none;
    border-bottom: 1px solid #baafd4cc;
    font-size: 0.5em;
    font-weight: 300;
    padding-bottom: 4px;
    margin-top: 10px;
}

.entry-input::-moz-placeholder {

    font-style: italic;
    font-size: 15px;
}

.entry-input::placeholder {

    font-style: italic;
    font-size: 15px;
}

.entry-input::-moz-selection {
    background-color: white;
}

.entry-input::selection {
    background-color: white;
}

.login-terms {
    color: #646f7d;
    font-size: .9em;
}

.login-button-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.login-button {
    display: flex;
    background-color: rgb(66, 133, 244);
    background-image: linear-gradient(to left top, rgb(66, 133, 244), rgb(66, 88, 244));
    color: #fff;
    border: none;
    outline: none;
    border-radius: 2rem;
    padding: 0.3em 2rem 0.5em 2rem;
    font-size: .5em;
    font-weight: 500;
    cursor: pointer;
}

.login-button-enable {}

.login-button-enable:hover {
    background-color: #7590cf;
}

input[type="password"]::-ms-reveal {
    filter: invert(1);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: white;
    -webkit-transition: background-color 0s 600000s, color 0s 600000s !important;
    transition: background-color 0s 600000s, color 0s 600000s !important;

}

.grey {
    filter: brightness(0.5);
}

.illegal-input {
    color: #e0513b;
    font-size: 0.45em;
}

.login-loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(41, 32, 63, 0.85);
    z-index: 1001;
}

.login-loading-overlay .spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 0.3rem solid rgba(255, 255, 255, 0.2);
    border-top: 0.3rem solid #ffffffb3;
    border-radius: 50%;
    animation: rotate-spinner 1s linear infinite;
}

@keyframes rotate-spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 600px) {
    .login-container {
        top: calc(25*var(--vh));
    }
}

/* ==================== 密码找回（非 Steam） ==================== */

.login-forgot-link {
    margin-top: 0.4rem;
    color: #9d8fc7;
    font-size: 0.75rem;
    cursor: pointer;
    text-decoration: underline;
}

.login-forgot-link:hover {
    color: #cdbfef;
}

.forgot-password-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 140;
}

.forgot-password {
    width: 20rem;
    max-width: 96vw;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #29203f;
    box-shadow: 5px 5px 50px black;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.6rem 1.6rem 1.4rem;
    font-size: 1.8rem;
}

.forgot-password-title {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 500;
}

.forgot-password-hint {
    font-size: 0.7rem;
    color: #baafd4cc;
    text-align: center;
    line-height: 1.4;
    margin-top: 0.4rem;
}

.forgot-password-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0.7em;
}

.forgot-password-btn {
    margin-top: 1em;
    padding: 0.35em 2rem 0.5em;
    border-radius: 2rem;
    background-color: rgb(66, 133, 244);
    background-image: linear-gradient(to left top, rgb(66, 133, 244), rgb(66, 88, 244));
    color: #fff;
    font-size: 0.5em;
    font-weight: 500;
    cursor: pointer;
}

.forgot-password-btn:hover {
    background-color: #7590cf;
}

.forgot-password-divider {
    width: 100%;
    border-top: 1px solid #4a3f68;
    margin-top: 1.4em;
    line-height: 0;
    text-align: center;
}

.forgot-password-divider span {
    position: relative;
    top: -0.5em;
    background-color: #29203f;
    padding: 0 0.6em;
    color: #baafd4cc;
    font-size: 0.45em;
}

.forgot-password-ok {
    color: #5fd08a;
    font-size: 0.45em;
    text-align: center;
    margin-top: 0.6em;
}

.forgot-password-cancel {
    margin-top: 0.9em;
    color: #9d8fc7;
    font-size: 0.5em;
    cursor: pointer;
    text-decoration: underline;
}

.forgot-password-cancel:hover {
    color: #cdbfef;
}
.rc-slider {
  position: relative;
  width: 100%;
  height: 14px;
  padding: 5px 0;
  border-radius: 6px;
  touch-action: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-rail {
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: #e9e9e9;
  border-radius: 6px;
}
.rc-slider-track,
.rc-slider-tracks {
  position: absolute;
  height: 4px;
  background-color: #abe2fb;
  border-radius: 6px;
}
.rc-slider-track-draggable {
  z-index: 1;
  box-sizing: content-box;
  background-clip: content-box;
  border-top: 5px solid rgba(0, 0, 0, 0);
  border-bottom: 5px solid rgba(0, 0, 0, 0);
  transform: translateY(-5px);
}
.rc-slider-handle {
  position: absolute;
  z-index: 1;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  background-color: #fff;
  border: solid 2px #96dbfa;
  border-radius: 50%;
  cursor: pointer;
  cursor: grab;
  opacity: 0.8;
  touch-action: pan-x;
}
.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
  border-color: #57c5f7;
  box-shadow: 0 0 0 5px #96dbfa;
}
.rc-slider-handle:focus {
  outline: none;
  box-shadow: none;
}
.rc-slider-handle:focus-visible {
  border-color: #2db7f5;
  box-shadow: 0 0 0 3px #96dbfa;
}
.rc-slider-handle-click-focused:focus {
  border-color: #96dbfa;
  box-shadow: unset;
}
.rc-slider-handle:hover {
  border-color: #57c5f7;
}
.rc-slider-handle:active {
  border-color: #57c5f7;
  box-shadow: 0 0 5px #57c5f7;
  cursor: grabbing;
}
.rc-slider-mark {
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
  font-size: 12px;
}
.rc-slider-mark-text {
  position: absolute;
  display: inline-block;
  color: #999;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.rc-slider-mark-text-active {
  color: #666;
}
.rc-slider-step {
  position: absolute;
  width: 100%;
  height: 4px;
  background: transparent;
}
.rc-slider-dot {
  position: absolute;
  bottom: -2px;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  background-color: #fff;
  border: 2px solid #e9e9e9;
  border-radius: 50%;
  cursor: pointer;
}
.rc-slider-dot-active {
  border-color: #96dbfa;
}
.rc-slider-dot-reverse {
  margin-right: -4px;
}
.rc-slider-disabled {
  background-color: #e9e9e9;
}
.rc-slider-disabled .rc-slider-track {
  background-color: #ccc;
}
.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
  background-color: #fff;
  border-color: #ccc;
  box-shadow: none;
  cursor: not-allowed;
}
.rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .rc-slider-dot {
  cursor: not-allowed !important;
}
.rc-slider-vertical {
  width: 14px;
  height: 100%;
  padding: 0 5px;
}
.rc-slider-vertical .rc-slider-rail {
  width: 4px;
  height: 100%;
}
.rc-slider-vertical .rc-slider-track {
  bottom: 0;
  left: 5px;
  width: 4px;
}
.rc-slider-vertical .rc-slider-track-draggable {
  border-top: 0;
  border-bottom: 0;
  border-right: 5px solid rgba(0, 0, 0, 0);
  border-left: 5px solid rgba(0, 0, 0, 0);
  transform: translateX(-5px);
}
.rc-slider-vertical .rc-slider-handle {
  position: absolute;
  z-index: 1;
  margin-top: 0;
  margin-left: -5px;
  touch-action: pan-y;
}
.rc-slider-vertical .rc-slider-mark {
  top: 0;
  left: 18px;
  height: 100%;
}
.rc-slider-vertical .rc-slider-step {
  width: 4px;
  height: 100%;
}
.rc-slider-vertical .rc-slider-dot {
  margin-left: -2px;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
  display: block !important;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-leave {
  display: block !important;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-play-state: paused;
}
.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
  animation-name: rcSliderTooltipZoomDownIn;
  animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
  animation-name: rcSliderTooltipZoomDownOut;
  animation-play-state: running;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
  transform: scale(0, 0);
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.rc-slider-tooltip-zoom-down-leave {
  animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
@keyframes rcSliderTooltipZoomDownIn {
  0% {
    transform: scale(0, 0);
    transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    transform: scale(1, 1);
    transform-origin: 50% 100%;
  }
}
@keyframes rcSliderTooltipZoomDownOut {
  0% {
    transform: scale(1, 1);
    transform-origin: 50% 100%;
  }
  100% {
    transform: scale(0, 0);
    transform-origin: 50% 100%;
    opacity: 0;
  }
}
.rc-slider-tooltip {
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: visible;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip-hidden {
  display: none;
}
.rc-slider-tooltip-placement-top {
  padding: 4px 0 8px 0;
}
.rc-slider-tooltip-inner {
  min-width: 24px;
  height: 24px;
  padding: 6px 2px;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  background-color: #6c6c6c;
  border-radius: 6px;
  box-shadow: 0 0 4px #d9d9d9;
}
.rc-slider-tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
  bottom: 4px;
  left: 50%;
  margin-left: -4px;
  border-width: 4px 4px 0;
  border-top-color: #6c6c6c;
}

.tooltip {
    font-size: 0.8rem;
    display: flex;
    justify-content: center;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    color: white;
    z-index: 10;
}

/* 当 Popover 打开时，应用进入动画 */
.tooltip[data-state='open'] {
    animation: scale-in 0.2s ease-out;
}

/* 当 Popover 关闭时，应用退出动画 */
.tooltip[data-state='closed'] {
    animation: scale-out 0.3s ease-in;
}

/* --- ✨ 这里是魔法发生的地方 ✨ --- */
.tooltip[data-side='top'] {
    transform-origin: bottom center;
}

.tooltip[data-side='bottom'] {
    transform-origin: top center;
}

.tooltip[data-side='left'] {
    transform-origin: right center;
}

.tooltip[data-side='right'] {
    transform-origin: left center;
}

.tooltip-arrow {
    transform: translateY(-1px)
}

.parts-close-button {
    display: flex;
    border: 0;
    justify-content: center;
    align-items: center;
    border-radius: 1.5rem;
    color: #ffffff;
    background-color: #ebebeb17;
    transition: .2s;
    position: absolute;
    z-index: 10;
    box-shadow: 0 0em 0.5em #000000;
}

.parts-close-button:hover {
    transform: rotate(90deg);
}


.parts-close-button svg {
    width: 100%;
    height: 100%;
    transform: scale(1.5);
}

.parts-close-button-2 {
    height: 1.8rem;
    width: 1.8rem;
    right: 0.2rem;
    top: -1.3rem;
    display: flex;
    border: 0;
    justify-content: center;
    align-items: center;
    border-radius: 1.5rem;
    color: #ffffff;
    background-color: #231939;
    transition: .2s;
    position: absolute;
    z-index: 10;
    box-shadow: 0 0.3em 0.5em #000000;
}


.parts-close-button-2:hover {
    transform: rotate(90deg);
}


.parts-close-button-2 svg {
    width: 100%;
    height: 100%;
    transform: scale(1.5);
}

.parts-minimize-button {
    height: 2rem;
    width: 2rem;
    right: 0.2rem;
    top: 0.2rem;
    display: flex;
    border: 0;
    justify-content: center;
    align-items: center;
    border-radius: 1.5rem;
    color: #ebebeb17;
    background-color: #ebebeb17;
    transition: .2s;
    position: absolute;
    z-index: 10;
    box-shadow: 0 0.3em 0.5em #000000;
}

.minimize-dash {
    width: 0.8rem;
    height: 0.2rem;
    background-color: white;
}

.tutorial {
    position: relative;
    display: grid;
    grid-auto-flow: row;
    background-image: linear-gradient(to top left, #1ecb0e, #07bade);
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    padding: 10px 10px;
    border: none;
    max-width: 100px;
    z-index: 10;
}

.tutorial-arrow {
    fill: #1cbe50;
    transform: scale(1.2);
}

.doller-symbol {
    color: rgb(214 213 213);
}

.page-back-button {
    width: 4rem;
    height: 3rem;
    flex-shrink: 0;
    padding-bottom: 1em;
}
.widescreen-side-columns {
    /* 高度 = 棋盘实际渲染高度（与 .game-board 的网格 + 边框一致）：
       上下两个角落格（各 --board-unit-length）+ 中间 (half − num − 2) 个普通格 + 0.24 格外框。
       本元素是 content-box，上下 padding（0.6em × 2）会额外撑高，所以这里减掉 ——
       最终盒子总高与棋盘等高，左右两栏才能和棋盘上下对齐。
       抽成变量是为了给下面的 max-width 复用（宽度上限 = 高度 × 2.5）。 */
    --wsc-height: calc(2 * var(--board-unit-length) +
            (var(--board-half) - var(--board-unit-num) - 2) * var(--board-unit) +
            0.24 * var(--board-unit) -
            1.2em);

    padding: 0.6em;
    justify-content: center;
    display: flex;
    gap: calc(0.24*var(--board-unit));
    position: relative;
    width: 100vw;
    height: var(--wsc-height);
    /* 宽度不超过高度的 2.5 倍（超宽屏上不再顶满 100vw） */
    max-width: calc(2.5 * var(--wsc-height));
}

.widescreen-side-columns .left-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    overflow: hidden;
    gap: 1em;
}

.widescreen-side-columns .right-column {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: flex-start;
    flex: 1;
    overflow: hidden;
    /* 跟父容器（= 棋盘高度）等高：写死 95vh 时父容器高度一固定，面板就会戳出棋盘下沿 */
    height: 100%;
}

.head-container {
    position: relative;
    box-sizing: border-box;
    height: -moz-fit-content;
    height: fit-content;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    font-size: calc(1.6 * var(--ui-em));
}

.head-title {
    border: 0;
    background-color: transparent;
    color: white;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.game-name-1 {
    color: white;
    white-space: nowrap;
    font-size: 2em;
}

.game-name-2 {
    white-space: nowrap;
    font-size: 1.6em;
    color: #5ecaf0;
    align-content: end;
}

.palce-holder {
    width: calc(var(--board-unit) * (var(--board-unit-num)) + 2 * var(--board-unit-length));
    height: calc(var(--board-unit) * (var(--board-half) - var(--board-unit-num)));
    position: relative;
}

.settings-container {}

.settings-container.side {
    width: 100%;
    font-size: calc(0.4 * var(--ui-em));
    height: -moz-fit-content;
    height: fit-content;
    max-height: 98vh;
    overflow: hidden;
    padding: 4em 0;
    box-sizing: border-box;
    gap: 0.8em;
    border-radius: 2em;
    flex-direction: column;
    display: flex;
    background: var(--c-g-panel);
}

/* 窄屏（非宽屏）设置面板：不再占满整屏，而是正好覆盖棋盘中心（.center 的 board center）。
   --center-w / --center-h 就是中心格的宽高，高度与中心格一致。
   ★ 居中基准必须是**包含块 .board 自己的 50%**，不能用 top: calc(50 * var(--vh))。
   原因：--vh 是 UICalc 用「参考尺寸」写成 px 的，而手机上那个参考尺寸取的是
   window.screen.availWidth/availHeight（整块屏幕，为了无视地址栏的挤压），
   .board 的高度却是 100vh（浏览器的布局视口）—— 两把尺子不是一回事：
     · 手机浏览器：状态栏/地址栏让 screen.availHeight 比 100vh 大几十 px，
       面板中心被算到棋盘中心下方 ⇒ 竖直方向整体下偏（本 bug）；
     · APK（WebView 全屏，没有地址栏）与 PC 仿真的 mobile（screen 尺寸 = 视口）：
       两把尺子相等，所以那两个环境看不出来。
   .game-board 是 .board 的绝对定位子元素，靠 flex 的静态位置居中
   （.board: display:flex + justify-content/align-items: center），因此
   .center 的中心 === .board 的 50% === 棋盘中心；用 left/top: 50% 与之严格重合，
   且完全不依赖 --vh，换任何设备/任何地址栏高度都不会再偏。 */
.settings-container.popup {
    /* 宽度：中心格是竖长方形时（center-h > center-w）满宽贴合；
       中心格是正方形时（接近方屏 num=9，center-w == center-h）面板会显得过“胖”，
       按高度的 0.9 倍收窄一点。两种情况的取舍交给 min()，无需 media query。 */
    --popup-w: min(var(--center-w), calc(0.7 * var(--center-h)));
    --setting-w: var(--popup-w);
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    overflow: hidden;
    background: var(--c-g-panel);
    z-index: 750;
    position: absolute;
    left: 50%;
    top: 50%;
    /* 用 transform 而不是独立的 translate 属性：
       `translate` 要到 Chrome 104 / Safari 14.1 才认，而本项目实际基线是
       Chrome 87 / Safari 14.1（大量 block-size / inline-size / flex gap）——
       也就是说 Chrome 87~103 的 WebView 会**静默忽略**它，面板整体偏到右下半个身位。
       transform 是同一批浏览器都支持的写法；这里元素自身没有别的 transform/动画，不会互相覆盖。 */
    transform: translate(-50%, -50%);

    padding: 5em 2.5em 2em;
    box-sizing: border-box;
    /* 与中心格之间留出 1em 的空隙：不能用 margin ——
       ① border-box 下宽高是定值，margin 不会让盒子变小；
       ② 绝对定位 left:50% + translate(-50%,-50%) 里，margin 是从左/上外边距算起，
          只有 translate 抵消了半个自身宽度，净效果就是整体往右下偏。
       所以改成把「尺寸」直接缩小，居中逻辑保持不变。
       这里的 em 取本面板字号，与 font-size 不构成循环（font-size 只依赖 --popup-w）。 */
    --popup-gap: 1em;
    /* 字号分两层约束：
       1) 跟随面板宽度——0.018 * 面板宽：面板窄（小屏）时字随之变小，
          与全屏时“字号/面板宽”的观感一致；
       2) 上限——不超过 1.5 倍 --ui-em（界面控件基准，即同设备下 40 格的格子字号），
          避免宽中心格（num 大）时字号相对棋盘明显失控。
       min() 同时取两者中较小值，无需 media query。 */
    font-size: min(calc(0.018 * var(--setting-w)), calc(1.5 * var(--ui-em)));
    width: calc(var(--popup-w) - 2 * var(--popup-gap));
    height: calc(var(--center-h) - 2 * var(--popup-gap));
    max-height: calc(var(--center-h) - 2 * var(--popup-gap));
    border-radius: 1.5em;
    box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.55);
}

/* 居中浮层的留白比全屏页要更宽松：左右留出边距，标题与内容都不贴边 */
.settings-container.popup .options {
    padding: 0.8em 1.2em;
    gap: 0.7em;
}

.settings-container.popup .options>.title {
    font-size: 2.2em;
    padding: 0 0.6em;
}

.settings-container.popup .setting-banner-top {
    padding: 1.4em 1.2em;
}

/* 右上角关闭按钮（替代原来的返回箭头：面板不再是页面，没有"返回"可退了） */
.settings-close-button {
    position: absolute;
    font-size: 0.42rem;
    top: 0.25em;
    right: 0.25em;
    width: 4em;
    height: 4em;
    padding: 0.25em;
    box-sizing: border-box;
    border-radius: 50%;
    color: var(--c-g-light-text, #fff);
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    z-index: 2;
}

.settings-close-button:hover {
    background: rgba(255, 255, 255, 0.24);
}

.settings-container>.title {
    color: #b2aacd;
    font-size: 2.6em;
    text-align: center;
}

.settings-container .options {
    flex-shrink: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1em 5em;
    gap: 1em;
    filter: brightness(0.9);
}

.options>.title {
    font-size: 2.6em;
    text-align: center;
    width: 100%;
    color: var(--c-g-text);
    margin-bottom: 0.4em;
}

.hrizontal-divider {
    border-style: solid;
    border-width: 0 0 1px 0;
    border-color: #ffffffb8;
    width: 100%;
    padding: 20px 30px 0 30px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.vertical-divider {
    width: 1px;
    background-color: #ffffffa1;
    height: 80%;
}

.settings-list-text {
    margin: 0 1em;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}

.settings-list-text-title {
    font-size: 2.2em;
    line-height: 1;
    color: #e0dfe6;
}

.settings-list-text-describ {
    color: #b6afc79e;
    font-size: 1.8em;
}


/* 开关（toggle-button）组件：整体以 em 为单位。
   宽度由 --toggle-buton-width 决定，高度/圆角/滑球/位移全部由它派生，
   因此组件会跟随所在容器的 font-size 等比缩放，不再出现固定 px。 */
.toggle-button {
    --toggle-buton-width: 5.8em;
    --toggle-button-height: calc(0.48 * var(--toggle-buton-width));
    --toggle-button-ball-size: calc(0.48 * var(--toggle-buton-width));
    --toggle-button-ball-offset: calc(0.52 * var(--toggle-buton-width));
    border-radius: calc(1 * var(--toggle-buton-width));
    width: var(--toggle-buton-width);
    height: var(--toggle-button-height);
    background-color: #4D4D4D;
}

.toggled-button {
    background-color: #6647e0;
}

.toggle-disabled {
    filter: brightness(0.5);
}

.toggle-button-ball {
    background-color: #ffffff;
    width: var(--toggle-button-ball-size);
    height: var(--toggle-button-ball-size);
    border-radius: calc(0.5 * var(--toggle-button-ball-size));
}

.toggled-button-ball {
    transform: translate(var(--toggle-button-ball-offset), 0);
}

.react-toggle--checked .react-toggle-track {
    background-color: #6647e0 !important;
}

.setting-banner-top {
    padding-bottom: 1.5em;
    border-radius: 1em;
    padding: 2em;
    box-sizing: border-box;
}

.setting-banner-container {
    width: 100%;
    display: grid;
    grid-template-columns: 4.6em auto 6em;
    grid-template-rows: 2.6em auto auto auto;
    grid-template-areas:
        "a b c"
        "a d c"
        "a e e"
        "a f f";
    gap: 0.4em;
    align-items: center;
}

.setting-banner-container .a {
    grid-area: a;
}

.setting-banner-container .b {
    grid-area: b;
}

.setting-banner-container .c {
    grid-area: c;
}

.setting-banner-container .d {
    grid-area: d;
}

.setting-banner-container .e {
    grid-area: e;
}

.setting-banner-container .f {
    grid-area: f;
}

.setting-banner-zindex {
    position: relative;
    z-index: 10;
}

.setting-list-icon {
    justify-content: flex-start;
    display: flex;
}

.setting-list-icon svg {
    width: 3em;
    height: 3em;
    color: var(--c-g-light-text);
}

.setting-list-button {
    margin-left: auto;
    padding-left: 10px;
    position: relative;
    display: flex;
    justify-content: center;
    width: 6em;
    opacity: 0.9;
    width: 100%;
    padding: 0.4em 0;
    box-sizing: border-box;
}

/* 开局资产：挂在「开局资产」滑杆下方的一行三个数字输入（地产 / 护盾卡 / 蹦床卡）。
   占 `grid-column: 2 / -1` ⇒ 跳过图标列，宽度与左边界和滑杆所在的 `.e` 完全一致。 */
.start-assets-fields {
    grid-column: 2 / -1;
    display: flex;
    gap: 1em;
    padding-top: 0.2em;
}

.start-assets-field {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    flex: 1 1 0;
    min-width: 0;
}

.start-assets-label {
    font-size: 1.5em;
    color: var(--c-g-light-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 输入框（不是下划线）：填数字的小方块，聚焦时描边高亮 */
.start-assets-input {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 0.5em;
    outline: none;
    padding: 0.12em 0.35em;
    box-sizing: border-box;
    font-size: 2.2em;
    width: 100%;
    text-align: center;
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
            appearance: textfield;
    transition: border-color 150ms ease, background 150ms ease;
}

.start-assets-input:focus {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.14);
}

/* number 类型自带的上下箭头在小尺寸输入框里很丑，隐藏（滚轮 / 键盘照样能调） */
.start-assets-input::-webkit-outer-spin-button,
.start-assets-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.start-assets-input:disabled {
    opacity: 0.45;
}

.rc-segmented {
    background-color: #e6e6e678 !important;
    border-radius: 1em;
    width: 100%;
}

.rc-segmented-group {
    justify-content: space-between !important;
}

.rc-segmented-item-selected {
    border-radius: 1em;
}

.rc-segmented-item {
    min-height: 17px !important;
    padding: unset !important;
    flex: 1;
}

.rc-segmented-item-label {
    font-size: 1.6em;
    line-height: initial;
}

.win-mode .rc-segmented-item {}

.rc-segmented-thumb {
    border-radius: 1em;

}

.Dropdown-root .Dropdown-option.is-selected {
    background-color: #b1a4d6;
    color: #ffffff;
}

.Dropdown-root .Dropdown-option {
    color: rgb(255 255 255 / 80%);
}

.Dropdown-root .Dropdown-menu {
    background-color: #3e3752;
    border: none;
    border-radius: 0.3rem;
}

.Dropdown-root.is-open .Dropdown-arrow {
    border-color: transparent;
}

.Dropdown-root .Dropdown-arrow {
    border-color: transparent;
}


.Dropdown-root .Dropdown-control {
    color: rgb(255, 255, 255);
    background: rgb(62, 55, 82);
    -webkit-text-fill-color: rgb(255, 255, 255);
    border: none;
    border-radius: 0.5em;
    padding: 0.5rem 1rem 0.5rem 0.8rem;
    font-size: 16px;
    transition: all 200ms ease;
}

.game-mode {
    background-color: transparent;
    color: white;
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    padding: 5px 7px 5px 3px;
    box-sizing: border-box;
    font-size: 2.4em;
    justify-items: center;
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
    width: 3em;
}

.setting-player-number {
    background-color: transparent;
    color: white;
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    padding: 5px 7px 5px 3px;
    box-sizing: border-box;
    font-size: medium;
    justify-items: center;
    -webkit-user-select: text;
       -moz-user-select: text;
            user-select: text;
}

.setting-player-number:focus {
    border-bottom-color: #e3eaf0;
}

.Dropdown-root .Dropdown-option:hover {
    background-color: #d2cbe5;
    color: white;
}

.collapsable-page {
    padding: calc(1 * var(--ui-em)) 0;
    box-sizing: border-box;
    pointer-events: none;
    align-items: center;
    position: relative;
    z-index: 10;
    display: flex;
    width: calc(var(--board-unit) * var(--board-unit-num));
    height: calc(var(--board-unit) * (var(--board-half) - 2 - var(--board-unit-num)));
    background-color: #130f1df5;
    border-radius: 0.5rem;
}

.mobile-vertical {
    flex-direction: column;
}

.mobile-back-trans {
    background-color: #29203f00
}

.collapsable-page .head-container {
    width: 48%;
    justify-content: center;
}

.mobile-vertical .head-container {
    justify-content: center;
}

.collapsable-page-ref {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.collapse-button {
    pointer-events: all;
    color: white;
    position: absolute;
    transform: translate(-50%, 0);
    left: 50%;
    bottom: calc(1 * var(--ui-em));

    border: 0;
    border-radius: calc(0.75* var(--ui-em));
    width: calc(6* var(--ui-em));
    height: calc(1.5* var(--ui-em));


    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.233);
}

.collapse-button:hover {
    background-color: rgba(255, 255, 255, 0.458);
}

.collapse-button svg {
    transition: 0.2;
    width: calc(1.5* var(--ui-em));
    height: calc(1.5* var(--ui-em));
}

.rotate-svg svg {
    transform: rotate(180deg);
}



@media (max-width: 600px) {

    .setting-region-title {
        font-size: 20px;
    }



    .toggle-button {
        --toggle-buton-width: 4.5em;
    }

}
:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  padding: 4px;
  width: var(--toastify-toast-width);
  box-sizing: border-box;
  color: #fff;
}
.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
}
.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  cursor: default;
  direction: ltr;
  /* webkit only issue #791 */
  z-index: 0;
  overflow: hidden;
}
.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}
.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body, .Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}
.Toastify__toast--stacked[data-collapsed=false] {
  overflow: visible;
}
.Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > * {
  opacity: 0;
}
.Toastify__toast--stacked:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}
.Toastify__toast--stacked[data-pos=top] {
  top: 0;
}
.Toastify__toast--stacked[data-pos=bot] {
  bottom: 0;
}
.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
  transform-origin: top;
}
.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
  transform-origin: bottom;
}
.Toastify__toast--stacked:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}
.Toastify__toast--rtl {
  direction: rtl;
}
.Toastify__toast--close-on-click {
  cursor: pointer;
}
.Toastify__toast-body {
  margin: auto 0;
  flex: 1 1 auto;
  padding: 6px;
  display: flex;
  align-items: center;
}
.Toastify__toast-body > div:last-child {
  word-break: break-word;
  flex: 1;
}
.Toastify__toast-icon {
  margin-inline-end: 10px;
  width: 20px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}
.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}
.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}
.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}
.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}
.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}
.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}
.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}
.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  align-self: flex-start;
  z-index: 1;
}
.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}
.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--toastify-z-index);
  opacity: 0.7;
  transform-origin: left;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp[data-hidden=true] {
  opacity: 0;
}
.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* @media (max-aspect-ratio: 1/1) {
    .board-grid {
        block-size: var(--board-unit-mobile) !important;
        min-inline-size: var(--board-unit-mobile) !important;
    }

    .center {
        width: calc(var(--board-unit-mobile) * var(--board-unit-num)) !important;
        height: calc(var(--board-unit-mobile) * (var(--board-half) - 2 - var(--board-unit-num))) !important;
    }

    .corner {
        block-size: var(--board-unit-mobile) !important;
        inline-size: var(--board-unit-mobile) !important;
    }
} */
.nopage{
    font-size: 7em;
}
.Dropdown-root {
  position: relative;
}

.Dropdown-control {
  position: relative;
  overflow: hidden;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 2px;
  box-sizing: border-box;
  color: #333;
  cursor: default;
  outline: none;
  padding: 8px 52px 8px 10px;
  transition: all 200ms ease;
}

.Dropdown-control:hover {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.Dropdown-arrow {
  border-color: #999 transparent transparent;
  border-style: solid;
  border-width: 5px 5px 0;
  content: ' ';
  display: block;
  height: 0;
  margin-top: -ceil(2.5);
  position: absolute;
  right: 10px;
  top: 14px;
  width: 0
}

.is-open .Dropdown-arrow {
  border-color: transparent transparent #999;
  border-width: 0 5px 5px;
}

.Dropdown-menu {
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  margin-top: -1px;
  max-height: 200px;
  overflow-y: auto;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 1000;
  -webkit-overflow-scrolling: touch;
}

.Dropdown-menu .Dropdown-group > .Dropdown-title{
  padding: 8px 10px;
  color: rgba(51, 51, 51, 1);
  font-weight: bold;
  text-transform: capitalize;
}

.Dropdown-option {
  box-sizing: border-box;
  color: rgba(51, 51, 51, 0.8);
  cursor: pointer;
  display: block;
  padding: 8px 10px;
}

.Dropdown-option:last-child {
  border-bottom-right-radius: 2px;
   border-bottom-left-radius: 2px;
}

.Dropdown-option:hover {
  background-color: #f2f9fc;
  color: #333;
}

.Dropdown-option.is-selected {
  background-color: #f2f9fc;
  color: #333;
}

.Dropdown-noresults {
  box-sizing: border-box;
  color: #ccc;
  cursor: default;
  display: block;
  padding: 8px 10px;
}

.outside {
    --color: #0e1e29;
    box-sizing: border-box;
    --dice-size: 6.6vh;
    --dot-size: calc(var(--dice-size)/6);
    --dot-step: calc(var(--dice-size)/4);
    --pane-duration: 0.4s;
    align-items: center;
    animation: outsideAnime .3s cubic-bezier(0, .25, 0, 1) both;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    margin: 0 auto;
    max-width: 50vh;
    padding: 2em 1em;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    z-index: 10;
    font-size: 2.4vh;
}

@media (orientation: portrait) {
    .outside {
        --dice-size: 13vw;
        width: 100vw;
        font-size: 4vw;
    }
}

@keyframes outsideAnime {
    0% {
        opacity: 0;
        transform: scale(.875)
    }
}

.mid {
    animation: midAnime 10s linear infinite
}

.loading-dice {
    animation: midAnime calc(var(--pane-duration)*6*4) infinite cubic-bezier(.16, 1, .3, 1);
    animation-delay: calc(var(--pane-duration)*-1);
    border: calc(var(--dot-size)/1.5) solid;
    border-radius: calc(var(--dice-size)/3);
    color: var(--color);
    height: var(--dice-size);
    position: relative;
    width: var(--dice-size)
}

@keyframes midAnime {
    25% {
        transform: rotate(90deg)
    }

    50% {
        transform: rotate(.5turn)
    }

    75% {
        transform: rotate(270deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.dot {
    animation-duration: calc(var(--pane-duration)*6);
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.5, 2, .5, .75);
    background: currentColor;
    border-radius: var(--dot-size);
    height: var(--dot-size);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--dot-size)
}

.dot.dot1 {
    animation-name: dot1
}

.dot.dot2 {
    animation-name: dot2
}

.dot.dot3 {
    animation-name: dot3
}

.dot.dot4 {
    animation-name: dot4
}

.dot.dot5 {
    animation-name: dot5
}

.dot.dot6 {
    animation-name: dot6
}

@keyframes dot1 {

    0%,
    to {
        transform: translate(-50%, -50%)
    }

    16.66%,
    83.33% {
        transform: translate(calc(-50% + var(--dot-step)), calc(-50% + var(--dot-step)))
    }
}

@keyframes dot2 {

    0%,
    to {
        transform: translate(-50%, -50%) scale(0)
    }

    16.66%,
    83.33% {
        transform: translate(calc(-50% - var(--dot-step)), calc(-50% - var(--dot-step)))
    }
}

@keyframes dot3 {

    0%,
    16.66%,
    to {
        transform: translate(-50%, -50%) scale(0)
    }

    33.33% {
        transform: translate(-50%, -50%)
    }

    50%,
    83.33% {
        transform: translate(calc(-50% + var(--dot-step)), calc(-50% - var(--dot-step)))
    }
}

@keyframes dot4 {

    0%,
    33%,
    to {
        transform: translate(-50%, -50%) scale(0)
    }

    50%,
    83.33% {
        transform: translate(calc(-50% - var(--dot-step)), calc(-50% + var(--dot-step)))
    }
}

@keyframes dot5 {

    0%,
    50%,
    to {
        transform: translate(-50%, -50%) scale(0)
    }

    66.67% {
        transform: translate(-50%, -50%)
    }

    83.33% {
        transform: translate(calc(-50% + var(--dot-step)), -50%)
    }
}

@keyframes dot6 {

    0%,
    66.67%,
    to {
        transform: translate(-50%, -50%) scale(0)
    }

    83.33% {
        transform: translate(calc(-50% - var(--dot-step)), -50%)
    }
}

.loader .title {
    font-size: 1.5em;
    margin-top: 2em;
    color: var(--color);
    opacity: 0.8;
}

.details {
    color: var(--color);
    font-size: .875em;
    font-weight: 600;
    height: 5em;
    overflow: visible;
    margin-top: 2em;

}

.span-head {
    border-inline-end: 2px solid rgba(146, 135, 174, .333);
    color: var(--color);
    opacity: 0.8;
    display: inline-flex;
    line-height: 1;
    padding-inline-end: .5em;
    vertical-align: -8%;
    margin-inline-end: .5em;
}

.span-head svg {
    margin-inline-end: .5em;
    overflow: visible;
    box-sizing: content-box;
    display: var(--fa-display, inline-block);
    height: 1em;
    vertical-align: -0.125em;
}

.span-text {
}
.steam-error-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.55);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(3px);
}

.steam-error-modal {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    padding: 28px 32px;
    max-width: 85vw;
    box-sizing: border-box;
    width: 320px;
    text-align: center;
    animation: steamErrorFadeIn 0.25s ease-out;
}

@keyframes steamErrorFadeIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.steam-error-body {
    font-size: 17px;
    font-weight: 600;
    color: #e8e8e8;
    margin-bottom: 24px;
    line-height: 1.5;
}

.steam-error-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
}

.steam-error-btn {
    flex: 1;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
    max-width: 120px;
    background: linear-gradient(135deg, #4a7cff 0%, #3b6de6 100%);
    color: #fff;
    box-shadow: 0 3px 10px rgba(74, 124, 255, 0.3);
}

.steam-error-btn:active {
    transform: scale(0.96);
}

.steam-error-btn:hover {
    background: linear-gradient(135deg, #5a8fff 0%, #4a7cff 100%);
}

.exit-hint {
    position: fixed;
    left: 50%;
    bottom: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    padding: 0.8em 1.2em;
    border-radius: 0.4em;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 1em;
    line-height: 1.4;
    z-index: 10000;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    -webkit-tap-highlight-color: transparent;
}

.exit-hint.show {
    opacity: 1;
}

.rc-segmented {
  display: inline-block;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.04);
}
.rc-segmented-group {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  border-radius: 2px;
}
.rc-segmented-item {
  position: relative;
  min-height: 28px;
  padding: 4px 10px;
  color: rgba(0, 0, 0, 0.85);
  text-align: center;
  cursor: pointer;
}
.rc-segmented-item-selected {
  background-color: white;
  color: #262626;
}
.rc-segmented-item:hover,
.rc-segmented-item:focus {
  color: #262626;
}
.rc-segmented-item-disabled,
.rc-segmented-item-disabled:hover,
.rc-segmented-item-disabled:focus {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}
.rc-segmented-item-label {
  z-index: 2;
  line-height: 24px;
}
.rc-segmented-item-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.rc-segmented-thumb {
  background-color: white;
  position: absolute;
  width: 0;
  height: 100%;
  padding: 4px 0;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.rc-segmented-vertical .rc-segmented-group {
  flex-direction: column;
}
.rc-segmented-vertical .rc-segmented-item {
  width: 100%;
  text-align: left;
}
.rc-segmented-vertical .rc-segmented-thumb {
  width: 100%;
  height: 0;
  padding: 0 4px;
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.rc-segmented-disabled .rc-segmented-item,
.rc-segmented-disabled .rc-segmented-item:hover,
.rc-segmented-disabled .rc-segmented-item:focus,
.rc-segmented-disabled .rc-segmented-item:hover,
.rc-segmented-disabled .rc-segmented-item:hover:hover,
.rc-segmented-disabled .rc-segmented-item:focus:hover,
.rc-segmented-disabled .rc-segmented-item:focus,
.rc-segmented-disabled .rc-segmented-item:hover:focus,
.rc-segmented-disabled .rc-segmented-item:focus:focus {
  color: rgba(0, 0, 0, 0.25);
  cursor: not-allowed;
}
.rc-segmented-thumb-motion-appear-active,
.rc-segmented-thumb-motion-enter-active {
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  will-change: transform, width;
}
.rc-segmented-rtl {
  direction: rtl;
}
.rc-segmented-item:focus {
  outline: none;
}
.rc-segmented-item-focused {
  border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.setting-list-button .rc-slider {
    width: 100%;
}

.setting-list-button .rc-slider-rail {
    background-color: #5e5e5e;
}

.setting-list-button .rc-slider-track {
    background-color: #fdfdfd;
}


.setting-list-button .rc-slider-handle {
    border: none;
    background-color: #e0ddea;
}

.setting-list-button .rc-slider-mark-text {
    white-space: nowrap;
}

.setting-list-button .rc-slider-mark {
    top: 14px;
    font-size: calc(0.028*var(--setting-w));
}

.poison-slider-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.poison-slider-title {
    white-space: nowrap;
    font-size: 1.6em;
    opacity: 0.8;
    margin-bottom: 0.8em;
}


.info-bankrupt-section {
    border-radius: 1em;
    padding: 1.2em 2em;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 3.6em;
    margin-bottom: 0.5em;
}

.ib-row-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 2.4em;
    /* Matches other settings text size */
    color: #e0dfe6;
}

.ib-item {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.ib-label {
    opacity: 0.8;
}

.ib-value {
    font-weight: bold;
}

.ib-row-btn {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    margin: 1em 0em;
}

.backstage-info {
    width: 100%;
    padding: 1em;
    border-radius: 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(255 255 255 / 9%);
}

/* Info Bankrupt Section Styles */
.info-bankrupt-section {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    width: 100%;
    padding: 1em 0;
}

.ib-row-info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    gap: 1em;
}

.ib-row-info.room-link {
    width: -moz-fit-content;

    padding: 0.3em 1em;
    border-radius: 0.6em;
}

.ib-item {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.ib-label {
    font-weight: 600;
    color: #999;
    font-size: 0.9em;
}

.ib-value {
    font-weight: 700;
    color: #fff;
    font-size: 1.1em;
}

.invite-copy-button {
    padding: 0.35em 1em;
    background-color: rgb(197 235 255 / 21%);
    color: #eceaeae3;
    border: none;
    cursor: pointer;
    font-weight: 500;
    border-radius: 0.5em;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.invite-copy-button:hover {
    background-color: #3579bd9b;
}

.invite-copy-button:active {
    background-color: #2a5a8da0;
}

.ib-row-btn {
    display: flex;
    gap: 1em;
    width: 100%;
}

.setting-group {
    border-radius: 1em;
    padding: 0.5em 1em 0.8em;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.auction-group {
    background-color: rgb(243 243 243 / 15%);
    margin: 0.5em 0;
}

/* 「共享城市」+「收益」归为同一类设置：两者装进同一个有边框有背景的容器里，与付费设置区分开。
   横向不加 padding，让组内内容与其它 banner 保持同一条左对齐线；
   容器只在共享城市开启、收益选项出现时才渲染，所以关闭时不会有背景色 */
.setting-group.shared-city-group {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.15));
    border: 1px solid rgba(255, 255, 255, 0.077);
    border-radius: 0.8em;
    padding: 0.6em 0 0.8em;
    margin: 0.5em 0;
}

/* 组内分隔：两个同类设置之间一条细线 */
.shared-city-group > .setting-banner-top:first-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* 「竞价开局」+「投放数量」+「资产包随机性」同属一类：与共享城市同款做法，
   只有主开关打开（三项同时可见）时才渲染这个容器，所以关闭时没有底色。 */
.setting-group.open-auction-group {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(20, 184, 166, 0.16));
    border: 1px solid rgba(255, 255, 255, 0.077);
    border-radius: 0.8em;
    padding: 0.6em 0 0.8em;
    margin: 0.5em 0;
}

/* 组内分隔：相邻两项之间一条细线（最后一项不加） */
.open-auction-group > .setting-banner-top:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.setting-group-label {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1.4em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    padding: 0.3em 0 0.2em 0.5em;
    margin-bottom: 0.3em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.checkbox-group {
    display: flex;
    gap: 1em;
    align-items: center;
    width: 100%;
    justify-content: space-around;
    background: #ffffff33;
    border-radius: 0.7em;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.3em;
    cursor: pointer;
    opacity: 1;
    color: white;
    font-size: 1.8em;
    white-space: nowrap;
    width: 7em;
}

.checkbox-item.checkbox-disabled {
    cursor: default;
    opacity: 0.5;
}

.checkbox-item input[type="checkbox"] {
    width: 1.6em;
    height: 1.6em;
    border-radius: 4px;
    border: none;
    accent-color: #5b43c4;
    cursor: pointer;
}

.setting-banner-top.paid-locked {
    border: 1px solid rgba(255, 255, 255, 0.077);
    border-radius: 0.8em;
    padding: 0.4em;
    background: linear-gradient(135deg, rgba(255, 0, 230, 0.163), rgb(0 246 255 / 20%));
}

.premium-badge.corner {
    position: absolute;
    top: -0.3em;
    right: -0.3em;
    transform: rotate(15deg);
    z-index: 2;
    font-size: 1.6em;
    padding: 0.1em 0.4em 0.1em 0.3em;
    box-shadow: 0 0 4px rgba(253, 160, 133, 0.4);
}

/* 同时有 badge 和 toggle 时，加大上下 padding，避免 badge 遮挡 toggle */
/* badge-toggle-banner 总与 paid-locked / free-trial-banner 共存，需提高特异性以覆盖其 padding 简写 */
.setting-banner-top.paid-locked.badge-toggle-banner,
.setting-banner-top.free-trial-banner.badge-toggle-banner {
    padding-top: 3em;
    padding-bottom: 2em;
}

.premium-badge.corner.free-trial {
    transform: rotate(15deg);
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.5);
}

.premium-badge.corner.free-trial::before {
    content: '✦';
}

.setting-banner-top.free-trial-banner {
    border: 1px solid rgba(255, 255, 255, 0.077);
    border-radius: 0.8em;
    padding: 0.4em;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.15));
}

/* ============================================
   Custom Map Section
   ============================================ */
.custom-map-section {
    width: 100%;
    padding: 3em;
    font-size: 1.3em;
    box-sizing: border-box;
    background: #00000024;
    border-radius: 1em;
}

.custom-map-section .title {
    text-align: center;
    font-size: 1.8em;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.3em;
    padding: 0 0.3em;
}

.custom-map-list {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    margin-bottom: 1em;
    max-height: 22em;
    overflow-y: auto;
    padding: 1em 0.5em;
}

.map-item-rank {
    color: #ffd700;
    font-weight: 700;
    font-size: 1.3em;
    min-width: 2.2em;
    text-align: center;
}

.custom-map-actions {
    display: flex;
    gap: 0.6em;
    margin-top: 0.5em;
}

/* 通用按钮 / 弹窗样式在 libraryUi.css（与管理员面板共用） */

.browser-empty {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.4em;
    padding: 2em;
    text-align: center;
}

.browser-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.6em 0.8em;
    border-radius: 0.5em;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background 0.2s;
    -moz-user-select: none;
         user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

/* 付费地图（Steam限定地产）标识，右上角，列表行较小所以角标缩小 */
.browser-item.paid .premium-badge.corner {
    font-size: 0.75em;
    top: -0.4em;
    right: -0.2em;
    padding: 0.05em 0.4em 0.05em 0.3em;
    box-shadow: 0 0 3px rgba(253, 160, 133, 0.4);
}

.browser-item.paid .premium-badge.corner::before {
    font-size: 0.8em;
}

.browser-item:hover:not(.disabled) {
    background: rgba(255, 255, 255, 0.08);
}

.browser-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 当前使用中的自定义地图（置顶状态展示，不可互动） */
.custom-map-section > .browser-item.current {
    margin: 0 0.5em 0.6em;
}

.browser-item.current {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.16), rgba(255, 215, 0, 0.04));
    box-shadow: inset 0.2em 0 0 rgba(255, 215, 0, 0.75);
    cursor: default;
    pointer-events: none;
}

.browser-item.current .browser-item-name {
    color: #ffd700;
}

/* 草稿态（新建地图载入的底板，还没进库）：同样是「当前在用」，但不是已发布地图，
   用冷色 + 常驻提示文字把它和黄色「使用中」区分开 */
.browser-item.current.is-draft {
    background: linear-gradient(90deg, rgba(120, 160, 255, 0.14), rgba(120, 160, 255, 0.03));
    box-shadow: inset 0.2em 0 0 rgba(120, 160, 255, 0.7);
}

.browser-item.current.is-draft .browser-item-name {
    color: rgba(160, 190, 255, 0.95);
}

.browser-item.current.is-draft .browser-item-title {
    font-style: italic;
}

.browser-item-inuse {
    color: #ffd700;
    font-size: 1.2em;
    font-weight: 700;
    white-space: nowrap;
}

.browser-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    min-width: 0;
}

.browser-item-name {
    display: flex;
    align-items: center;
    gap: 0.35em;
    min-width: 0;
    color: #fff;
    font-weight: 600;
    font-size: 1.4em;
}

/* 名字过长时只缩名字，状态徽章永远留在可见区（以前徽章会被 ellipsis 一起裁掉） */
.browser-item-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/**
 * 状态徽章（待审 / 未通过）：地图库与皮肤库共用。
 * 之前它在所有 CSS 里都没有样式，只是跟名字同色的文字；现在需要它可辨识、可点击。
 */
.map-status-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0.05em 0.5em;
    border: none;
    border-radius: 0.7em;
    font-family: inherit;
    font-size: 0.7em;
    font-weight: 500;
    line-height: 1.7;
    white-space: nowrap;
}

.map-status-badge.pending {
    color: #ffc442;
    background: rgba(255, 196, 66, 0.16);
}

.map-status-badge.rejected {
    color: #ff9b9b;
    background: rgba(255, 107, 107, 0.18);
}

/* 可点开看驳回理由：加虚下划线做可点提示 */
.map-status-badge.is-clickable {
    cursor: pointer;
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
    text-underline-offset: 0.15em;
}

.map-status-badge.is-clickable:hover {
    background: rgba(255, 107, 107, 0.32);
}

/* 行内不再铺驳回理由：那行小字挤在创建者后面读不清，理由只进微调界面顶部横幅 */

/* 驳回理由弹窗（作者视角） */
.reject-reason-body {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 0.9em 1em 1em;
}

.reject-reason-name {
    font-weight: 600;
    color: #fff;
}

.reject-reason-label {
    font-size: 0.82em;
    opacity: 0.6;
}

.reject-reason-text {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.5;
    max-height: 40vh;
    overflow-y: auto;
    padding: 0.6em 0.75em;
    border-radius: 0.4em;
    background: rgba(255, 107, 107, 0.1);
    border-left: 0.2em solid rgba(255, 107, 107, 0.6);
}

.reject-reason-hint {
    font-size: 0.82em;
    opacity: 0.65;
    line-height: 1.45;
}

.browser-item-creator {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.1em;
    /* 制作者只是辅助信息，一律单行省略。
       以前没有 nowrap：移动端昵称一长就把这行顶成两行，整条列表项被撑高、
       和相邻行高度对不齐（长英文昵称还会直接溢出卡片）。 */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.browser-item-plays {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.2em;
    white-space: nowrap;
}

.browser-item-select {
    padding: 0.4em 0.8em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.4em;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.browser-item-select:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.browser-item-edit {
    padding: 0.3em;
    border: none;
    border-radius: 0.4em;
    background: transparent;
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.4em;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}

.browser-item-edit:hover {
    color: #4fc3f7;
    background: rgba(79, 195, 247, 0.1);
}

.browser-item-delete {
    padding: 0.3em;
    border: none;
    border-radius: 0.4em;
    background: transparent;
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.4em;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}

.browser-item-delete:hover {
    color: #ef5350;
    background: rgba(239, 83, 80, 0.1);
}

/* 管理员审核入口：与重命名/删除区分开，未过审的地图才出现 */
.browser-item-review {
    padding: 0.3em;
    border: none;
    border-radius: 0.4em;
    background: transparent;
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.4em;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}

.browser-item-review:hover {
    color: #66bb6a;
    background: rgba(102, 187, 106, 0.1);
}

.tooltip.map-name-tooltip {
    font-size: 1.5em;
    max-width: min(80vw, 25em);
    text-align: center;
    word-break: break-word;
    padding: 0.6em 1em;
    z-index: 100;
    border: none;
    border-radius: 0.5em;
    box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.5);
}

/* ===== AI 皮肤（设置面板：套系选择 + 预览） ===== */
.ai-skin-extra {
    display: flex;
    flex-direction: column;
    gap: 0.55em;
    padding: 0.7em 0.8em;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.04);
}

/* 设定输入 + 生成按钮 */
.ai-skin-gen {
    display: flex;
    gap: 0.4em;
}

.ai-skin-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.36em 0.6em;
    font-size: 0.85em;
    color: inherit;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
}

.ai-skin-input::-moz-placeholder {
    opacity: 0.45;
}

.ai-skin-input::placeholder {
    opacity: 0.45;
}

.ai-skin-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.35);
}

.ai-skin-input:disabled {
    opacity: 0.5;
}

.ai-skin-gen-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    padding: 0.42em 0.85em;
    font-size: 0.85em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 0.5em;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

.ai-skin-gen-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.16);
}

.ai-skin-gen-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* 皮肤库底部入口：主按钮（现在只剩「用模板创建皮肤」一颗） */
.ai-skin-gen-btn.is-primary {
    color: #fff;
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 0.18em 0.7em rgba(102, 126, 234, 0.32);
}

.ai-skin-gen-btn.is-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #7688f0, #8557b5);
    box-shadow: 0 0.22em 0.9em rgba(102, 126, 234, 0.45);
}

.ai-skin-source {
    font-size: 0.78em;
    opacity: 0.6;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ai-skin-preview {
    display: flex;
    align-items: center;
    gap: 0.45em;
    min-height: 1.6em;
    font-size: 0.85em;
    opacity: 0.85;
    overflow: hidden;
}

/* 小旗按棋盘的真实形态预览：只露顶部 30% 那条识别带 */
.ai-skin-flag {
    flex-shrink: 0;
    display: block;
    inline-size: 2.6em;
    block-size: 0.8em;
    overflow: hidden;
    border-radius: 2px;
}

.ai-skin-flag img {
    inline-size: 100%;
    display: block;
}

.ai-skin-preview-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ai-skin-preview-divider {
    flex-shrink: 0;
    opacity: 0.35;
}
/* ==================== 自定义地图库：两个库共用一块区域 ==================== */
/* 原来的「自定义地图库」标题改为「自定义位置 / 自定义皮肤」两个切换标签，
   外框（底色/圆角/内边距）挪到这一层，内部的 .custom-map-section 只做内容容器。 */
.map-library-section {
    width: 100%;
    padding: 2.4em 2.4em 2em;
    box-sizing: border-box;
    background: #00000024;
    border-radius: 1em;
    font-size: 1.3em;
}

.map-library-section > .custom-map-section {
    width: 100%;
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-size: 1em;
    /* 取消原 .custom-map-section 的 1.3em 叠加，否则嵌套后字体会放大两倍 */
}

/* 「自定义位置 / 自定义皮肤」：无边框下划线 tab，和下面的实心动作按钮区分开 */
.library-tabs {
    display: flex;
    justify-content: center;
    gap: 1.8em;
    margin-bottom: 1.1em;
}

.library-tab {
    position: relative;
    flex: 0 1 auto;
    padding: 0.3em 0.15em 0.55em;
    font-size: 1.35em;
    border: none;
    border-radius: 0;
    background: none;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    transition: color 0.18s;
}

.library-tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.13em;
    border-radius: 0.2em;
    background: #ffd700;
    transform: scaleX(0);
    transition: transform 0.18s ease-out;
}

.library-tab:hover {
    color: rgba(255, 255, 255, 0.88);
}

.library-tab.active {
    color: #ffd700;
    font-weight: 700;
}

.library-tab.active::after {
    transform: scaleX(1);
}

/* 「自定义皮肤」右上角的绿色 BETA 角标。
   两个库共用同一块区域，只看当前 tab 的玩家不知道另一边还有皮肤库 ——
   原来靠给未选中的 tab 铺绿底提示，嫌太重，改成挂一个斜挂的小角标。
   字号 1em 是窄屏上限：试过 2em，角标宽约 120px、旋转后高约 114px，
   会顶出面板顶部、横向也溢出（得给 tab 区额外腾 100px 才能放下）。 */
.library-tab-beta {
    position: absolute;
    top: -1.1em;
    right: -2.2em;
    padding: 0.08em 0.4em;
    border-radius: 0.6em;
    background: #1f9d55;
    color: #fff;
    font-size: 0.8em;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transform: rotate(25deg);
    pointer-events: none;
}

/* ==================== 自定义皮肤列表 ==================== */
/* 列表项里放两面小旗（按棋盘真实形态只露顶部识别带），一眼能认出是哪套世界 */
.skin-item .skin-item-flags {
    display: flex;
    gap: 0.28em;
    flex-shrink: 0;
}

.skin-item .ai-skin-flag {
    inline-size: 1.9em;
    block-size: 0.62em;
    overflow: hidden;
    border-radius: 2px;
    display: block;
}

.skin-item .ai-skin-flag img {
    inline-size: 100%;
    display: block;
}

/* 「使用中」那行仍要能点编辑/删除（原 .browser-item.current 是 pointer-events:none） */
.skin-item.current {
    pointer-events: auto;
}

/* 未过审皮肤：整行底色稍作区分（置顶展示，扫一眼就知道还没进公开库）
 *  - 待审：琥珀；已驳回：偏红
 *  - :not(.current) —— 「使用中」的金色渐变优先，不要被状态底色盖掉 */
.skin-item.is-pending:not(.current) {
    background: rgba(255, 196, 66, 0.1);
}

.skin-item.is-pending:not(.current):hover:not(.disabled) {
    background: rgba(255, 196, 66, 0.16);
}

.skin-item.is-rejected:not(.current) {
    background: rgba(255, 107, 107, 0.11);
}

.skin-item.is-rejected:not(.current):hover:not(.disabled) {
    background: rgba(255, 107, 107, 0.17);
}

/* 底部动作行：只剩「新建皮肤」一颗按钮，按地图页的 .custom-map-actions 一样平铺
   （原来这里是个带标题的浅色卡片，标题已按需求去掉，壳子留着会变成空卡片） */
.custom-skin-gen {
    font-size: 1.6em;
    display: flex;
    flex-direction: column;
    gap: 0.45em;
    margin-top: 1em;
}

.custom-skin-gen-hint {
    font-size: 0.82em;
    line-height: 1.5;
    opacity: 0.55;
}

/* 模板入口：现在只剩「用模板创建皮肤」一颗，按钮按内容宽度、不铺满整行 */
.skin-template-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
}

.skin-template-actions .ai-skin-gen-btn {
    flex: 0 0 auto;
}

/* ==================== 皮肤文本编辑器（微调 → 另存为） ==================== */
.skin-editor {
    position: relative;
    max-width: min(52em, 92vw);
    width: 92vw;
    /* 留 8vh 给任务栏 / 状态栏：标题与底栏固定，中间整层滚动，列表几乎占满余下高度 */
    max-height: 92vh;
    gap: 0.8em;
    animation: skinEditorIn 0.15s ease-out;
}

/* 两个类一起写：.custom-map-modal 的 80vh 与本条同优先级，
   谁生效取决于 CSS 的加载顺序，钉死选择器就不怕顺序变了 */
.custom-map-modal.skin-editor {
    max-height: 92vh;
}

/* 标题以下整层滚动：步骤 1/2/3 与微调列表共用同一条滚动条。
   列表因此能长到接近视口底部，而不会被三张步骤卡永久压掉一截；
   短内容时它照样撑满剩余高度（见 .skin-editor-body 的 flex: 1 0 auto）。 */
.skin-editor-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.8em;
    /* 别让滚动条贴着内容边缘 */
    padding-right: 0.15em;
}

/* 驳回理由横幅（编辑器顶部）：理由全文 + 修改后重新进审核的提示。
   理由可能很长，框内滚动，最多占四行高，别把下面的编辑区顶出去。 */
.skin-editor-reject {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    padding: 0.6em 0.75em;
    border-radius: 0.5em;
    border-left: 0.22em solid #ff6b6b;
    background: rgba(255, 107, 107, 0.12);
}

.skin-editor-reject-head {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.95em;
    font-weight: 600;
    color: #ff9d9d;
}

.skin-editor-reject-body {
    max-height: 7em;
    overflow-y: auto;
    font-size: 0.9em;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.9);
    white-space: pre-wrap;
    word-break: break-word;
}

.skin-editor-reject-hint {
    font-size: 0.78em;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.45);
}

/* ==================== JSON 导入面板（叠在编辑器上层） ==================== */
.skin-json-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.62);
}

.skin-json-panel {
    display: flex;
    flex-direction: column;
    gap: 0.55em;
    width: min(38em, 100%);
    max-height: 100%;
    padding: 0.9em 1em;
    box-sizing: border-box;
    border-radius: 0.7em;
    background: #22223a;
    box-shadow: 0 0.8em 2em rgba(0, 0, 0, 0.55);
}

.skin-json-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.05em;
    color: rgba(255, 255, 255, 0.85);
}

.skin-json-textarea {
    flex: 1 1 auto;
    min-height: 9em;
    max-height: 40vh;
    padding: 0.5em 0.6em;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.82em;
    line-height: 1.45;
    color: #fff;
    background: rgba(0, 0, 0, 0.34);
    border: none;
    border-radius: 0.45em;
    resize: vertical;
    transition: background 0.18s, box-shadow 0.18s;
}

.skin-json-textarea:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.45);
    box-shadow: 0 0 0 0.1em rgba(79, 195, 247, 0.35);
}

.skin-json-error {
    min-height: 1.1em;
    font-size: 0.8em;
    color: #ff5c5c;
}

.skin-json-actions {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.skin-json-actions .skin-editor-textbtn {
    margin-right: auto;
    color: #4fc3f7;
}

.skin-json-file {
    display: none;
}

.skin-json-hint {
    font-size: 0.78em;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.45);
}

/* ==================== 图标 tab：行 + 选择器 ==================== */
.skin-editor-row.icon {
    align-items: center;
}

/* 当前图标的小方格（图片 / emoji 都在这里预览） */
.skin-icon-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.7em;
    height: 1.7em;
    padding: 0.15em;
    box-sizing: border-box;
    border-radius: 0.35em;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.skin-icon-preview-img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.skin-icon-preview-text {
    font-size: 1.1em;
    line-height: 1;
}

.skin-icon-preview-none {
    font-size: 0.9em;
    opacity: 0.3;
}

/* 等级图标行的原版预览：矢量图形（房子 / 楼房 / 叶子）撑满预览框 */
.skin-icon-preview-orig {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.skin-icon-preview-orig svg {
    width: 100%;
    height: 100%;
}

/* 原版房子/楼房是近黑色，预览框是深色底：反相一档才看得见（科技叶子是彩色的，不加） */
.skin-icon-preview-orig.is-mono svg {
    filter: invert(0.82);
}

/* TechLvlIcon 自带 120% 尺寸：预览框里收回来，免得溢出 */
.skin-icon-preview-orig .tech-leaf-svg {
    width: 100%;
    height: 100%;
}

.skin-icon-pick {
    display: flex;
    align-items: center;
    min-height: 2em;
    text-align: left;
    cursor: pointer;
}

/* ==================== 角色棋子：一个角色 = 图标 + 音效 ==================== */
/* 同一角色的图标行与音效子行用左侧竖线框成一块：8 个角色各自 2~3 行，
   不加框会连成一整片，看不出哪条音效属于哪个角色。 */
.skin-token-block {
    margin-left: 0.2em;
    padding-left: 0.45em;
    border-left: 0.15em solid rgba(255, 255, 255, 0.09);
}

.skin-token-block + .skin-token-block {
    margin-top: 0.5em;
}

/* 音效子行：整行缩进 1.2em，标签字号调小压暗，读起来就是「属于上面那个角色」。
   ⚠️ 标签宽度沿用 .skin-editor-original 的 11em（**不**改 flex-basis）：
      那是 em 单位、按标签自己的字号算，字号一改就要重新算 magic number，
      以后谁调一下 font-size 对齐就散了。这里宁可控件列右移一点点，也不引入这种耦合。
      右侧的试听/上传/还原贴着行尾，和图标行的还原键仍然对得齐。 */
.skin-editor-row.sound-sub {
    padding-left: 1.2em;
}

.skin-editor-row.sound-sub .skin-editor-original {
    font-size: 0.74em;
    color: rgba(255, 255, 255, 0.38);
}

/* 载具名行：布局与下面的图标行完全一致（控件竖直对齐），只把标签调弱一档 ——
   它改的是「这东西叫什么」，不是「它长什么样」，不该比图标行更抢眼。 */
.skin-editor-row.token-name .skin-editor-original {
    color: rgba(255, 255, 255, 0.55);
}

.skin-icon-panel {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    width: min(34em, 100%);
    max-height: 82vh;
    padding: 0.9em 1em;
    box-sizing: border-box;
    border-radius: 0.7em;
    background: #22223a;
    box-shadow: 0 0.8em 2em rgba(0, 0, 0, 0.55);
}

.skin-icon-cats {
    display: flex;
    align-items: center;
    gap: 0.4em;
    flex-wrap: wrap;
}

.skin-icon-cat {
    flex: 0 0 auto;
    padding: 0.3em 0.7em;
    border: none;
    border-radius: 0.4em;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.skin-icon-cat:hover {
    background: rgba(255, 255, 255, 0.15);
}

.skin-icon-cat.active {
    background: rgba(79, 195, 247, 0.22);
    color: #fff;
}

/* 「用户图标」两段之间的分隔标题：整行独占，滚动时吸顶 */
.skin-icon-divider {
    grid-column: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.25em 0.1em;
    background: #22223a;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.75em;
    letter-spacing: 0.04em;
}

/* 「加载更多」：网格下面一行，不占格位 */
.skin-icon-more {
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
}

/* 「用户图标」空态：一行提示，不占网格格位 */
.skin-icon-empty {
    flex: 0 0 auto;
    padding: 0.5em 0.7em;
    border-radius: 0.45em;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8em;
    line-height: 1.5;
}

.skin-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.6em, 1fr));
    gap: 0.35em;
    overflow-y: auto;
    padding-right: 0.2em;
    /* 分类条 + 搜索框占位后，网格自己吃掉剩余高度并滚动 */
    flex: 1 1 auto;
    min-height: 0;
}

.skin-icon-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 0.3em;
    border: none;
    border-radius: 0.45em;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85em;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

.skin-icon-cell img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

.skin-icon-cell:hover {
    background: rgba(255, 255, 255, 0.14);
}

.skin-icon-cell.active {
    background: rgba(79, 195, 247, 0.2);
    box-shadow: inset 0 0 0 0.1em rgba(79, 195, 247, 0.75);
}

/* 「原版」格子是文字，不强制正方形 */
.skin-icon-cell.is-original {
    aspect-ratio: auto;
    min-height: 2.6em;
    font-size: 0.8em;
    grid-column: span 2;
}

.skin-icon-custom {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.skin-icon-custom .skin-editor-input {
    flex: 1 1 auto;
}

.skin-icon-custom .custom-map-btn {
    flex: 0 0 auto;
    padding: 0.45em 0.8em;
    font-size: 0.85em;
}

/* 预览块：缩放/旋转/偏移都作用在这一层，外层 .skin-icon-slot 负责裁边 */
.skin-icon-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform-origin: center center;
}

/* 上传自绘图 */
.skin-icon-upload {
    display: flex;
    align-items: center;
    gap: 0.6em;
    flex-wrap: wrap;
}

.skin-icon-upload .skin-json-hint {
    flex: 1 1 10em;
}

/* 微调滑杆 */
.skin-tune {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    padding: 0.55em 0.7em;
    border-radius: 0.5em;
    background: rgba(255, 255, 255, 0.04);
}

.skin-tune-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.75);
}

.skin-tune-row {
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.6);
}

.skin-tune-label {
    flex: 0 0 4.5em;
}

.skin-tune-range {
    flex: 1 1 auto;
    height: 0.35em;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 1em;
    outline: none;
}

.skin-tune-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0.9em;
    height: 0.9em;
    border-radius: 50%;
    background: #4fc3f7;
    cursor: pointer;
}

.skin-tune-range::-moz-range-thumb {
    width: 0.9em;
    height: 0.9em;
    border: none;
    border-radius: 50%;
    background: #4fc3f7;
    cursor: pointer;
}

.skin-tune-value {
    flex: 0 0 3.4em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.8);
}

.skin-tune-actions {
    display: flex;
    justify-content: flex-end;
}

@keyframes skinEditorIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* 生成要求条：挂在第 1 步的卡片里（它是整条链路的起点），整行铺开。
   比主题那行高 —— 它是写一段话，不是填一个名字；多行框也只往下长，不抢横向空间。 */
.skin-editor-requirement {
    display: flex;
    box-sizing: border-box;
    align-items: flex-start;
    gap: 0.6em;
    /* 占满整行：第 1 步是 flex-wrap 的横条，前三个元素（序号 / 标题 / 按钮）占第一行 */
    flex: 1 0 100%;
    margin-top: 0.1em;
    padding: 0.45em 0.7em;
    border-radius: 0.45em;
    background: rgba(79, 195, 247, 0.13);
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9em;
}

/* 标签跟多行框的第一行文字对齐（框有 0.28em 上内边距） */
.skin-editor-requirement .skin-editor-theme-label {
    padding-top: 0.3em;
}

.skin-editor-requirement-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.28em 0.5em;
    font-size: 1em;
    font-family: inherit;
    line-height: 1.5;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 0.35em;
    resize: vertical;
    /* 最多长到 7 行左右：写长了框内滚动，别把三步工具条挤出首屏 */
    max-height: 9em;
    transition: background 0.18s, box-shadow 0.18s;
}

.skin-editor-requirement-input::-moz-placeholder {
    opacity: 0.4;
}

.skin-editor-requirement-input::placeholder {
    opacity: 0.4;
}

.skin-editor-requirement-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 0.1em rgba(79, 195, 247, 0.3);
}

/* 棋盘主题：**只读**一行，跟在生成要求下面。
   它由 AI 从生成要求里概括、随「导入文本」一起回来，所以这里没有输入框也没有复制按钮 ——
   手填的主题会和 AI 刚改好的名字脱节，而它唯一的用途是第 2 步的图标提示词总纲。
   还没有主题（没导入过文本）时整行不渲染，不留占位提示。 */
.skin-editor-theme-readout {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    flex: 1 0 100%;
    padding: 0 0.15em;
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.85);
}

.skin-editor-theme-label {
    flex: 0 0 auto;
    color: #4fc3f7;
}

.skin-editor-theme-value {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #fff;
}

/* 「覆盖原皮肤」：第一下变成确认态，用橙色提示这是破坏性操作 */
.skin-editor-overwrite.confirm {
    color: #ff8a65;
    background: rgba(255, 138, 101, 0.16);
}

/* 常驻工具条：三步式流程（文字 → 图标 → 微调）。
   微调面板收起时整块列表都不渲染，导入导出必须挂在这里才不会跟着消失。 */
.skin-editor-tools {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    flex: 0 0 auto;
    padding: 0.6em 0.75em 0.65em;
    border-radius: 0.55em;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============ 三步：定文字 → 改图标 → 微调 ============ */
/* 图标必须跟着文字走：第 1 步导入回来的主题先定下，AI 才有依据把「城堡」画成长安城。
   做成横条而不是四颗平铺按钮 —— 平的摆法下玩家永远先点导出图标。
   微调是可选项，排在第 3 步，不展开也能直接改名保存。 */
.skin-editor-steps {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.skin-editor-step {
    display: flex;
    align-items: center;
    gap: 0.6em;
    flex-wrap: wrap;
    padding: 0.4em 0.55em;
    border-radius: 0.45em;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 0.15s, background 0.15s;
}

/* 第 1 步导入完 = 打勾；第 2 步跟着亮起来（只做视觉暗示，不拦人） */
.skin-editor-step.is-done {
    border-color: rgba(79, 195, 247, 0.4);
    background: rgba(79, 195, 247, 0.07);
}

.skin-editor-step.is-ready {
    border-color: rgba(79, 195, 247, 0.26);
}

.skin-editor-step-no {
    flex: 0 0 auto;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82em;
    font-weight: 600;
    line-height: 1;
    color: #8fdcff;
    background: rgba(79, 195, 247, 0.16);
    border: 1px solid rgba(79, 195, 247, 0.3);
}

.skin-editor-step.is-done .skin-editor-step-no {
    color: #04212e;
    background: #4fc3f7;
    border-color: #4fc3f7;
}

.skin-editor-step-no svg {
    font-size: 0.85em;
}

.skin-editor-step-text {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    flex: 1 1 12em;
    min-width: 0;
}

.skin-editor-step-title {
    font-size: 0.92em;
    font-weight: 600;
    color: #fff;
}

.skin-editor-step-hint {
    font-size: 0.8em;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.48);
}

.skin-editor-step-actions {
    display: flex;
    align-items: center;
    gap: 0.4em;
    flex: 0 0 auto;
    margin-left: auto;
}

/* 同一步的两颗按钮等宽，视觉上成对 */
.skin-editor-step-actions .skin-sheet-btn {
    min-width: 7em;
    text-align: center;
}

/* 导出按钮的气泡锚点：气泡相对这颗按钮定位（不是 toast，也不是整行横幅） */
.skin-export-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

/* 生成要求为空时的提示气泡：按钮**左侧**弹出，右侧尖角指回按钮。
   为什么放左边而不是上方：上方是工具条的说明文字，往下会盖住要求输入框本身；
   向左铺开只压住这一行的标题文字，4s 就收，且不吃鼠标事件（pointer-events: none）。 */
.skin-export-pop {
    position: absolute;
    top: 50%;
    right: calc(100% + 0.55em);
    transform: translateY(-50%);
    z-index: 5;
    width: -moz-max-content;
    width: max-content;
    max-width: 15em;
    padding: 0.45em 0.6em;
    border-radius: 0.4em;
    background: #3a1f22;
    border: 1px solid rgba(255, 138, 101, 0.6);
    box-shadow: 0 0.2em 0.7em rgba(0, 0, 0, 0.45);
    color: #ffd8cc;
    font-size: 0.78em;
    line-height: 1.45;
    text-align: left;
    pointer-events: none;
    animation: skinPopIn 0.16s ease-out;
}

/* 尖角：朝右，压在按钮边上 */
.skin-export-pop::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -0.3em;
    border: 0.3em solid transparent;
    border-left-color: rgba(255, 138, 101, 0.6);
}

/* 被拦下的按钮自己也变个色：气泡只看一眼就走，颜色留在按钮上 */
.skin-sheet-btn.is-warn {
    border-color: rgba(255, 138, 101, 0.75);
    color: #ffd8cc;
}

@keyframes skinPopIn {
    from { opacity: 0; transform: translateY(-50%) translateX(0.3em); }
    to { opacity: 1; transform: translateY(-50%); }
}

/* 标题行固定：不许被下面的长列表挤扁 */
.skin-editor > .custom-map-modal-header {
    flex: 0 0 auto;
}

/* 不收缩：内容短时撑满滚动区（列表底板不会只铺半屏），
   内容长时按实际高度撑开，由 .skin-editor-scroll 统一滚动 */
.skin-editor-body {
    display: flex;
    gap: 0.8em;
    flex: 1 0 auto;
    min-height: 0;
}

/* 左分栏：地名/组名/事件/术语。
   跟着外层滚走就找不回来了，所以吸顶（列窄，不会盖住右侧列表）。 */
.skin-editor-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    flex: 0 0 8.5em;
    align-self: flex-start;
    position: sticky;
    top: 0;
    z-index: 2;
    /* 吸顶时下面有内容滚过（窄屏是横向 tab 条），底板要挡住 */
    background: #1a1a2e;
}

.skin-editor-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4em;
    padding: 0.55em 0.7em;
    border: none;
    border-radius: 0.55em;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1em;
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
}

/* 该页有校验错误：右上角红点（即使切到别的页 / 收起面板也看得见） */
.skin-editor-tab-dot {
    position: absolute;
    top: 0.12em;
    right: 0.12em;
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background: #ff5c5c;
    box-shadow: 0 0 0.35em rgba(255, 92, 92, 0.7);
}

.skin-editor-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.skin-editor-tab.active {
    color: #4fc3f7;
    background: rgba(79, 195, 247, 0.12);
}

.skin-editor-badge {
    font-size: 0.8em;
    opacity: 0.55;
}

.skin-editor-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.skin-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.skin-editor-search {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.42em 0.7em;
    font-size: 0.9em;
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
    border: none;
    border-radius: 0.45em;
    transition: background 0.18s, box-shadow 0.18s;
}

.skin-editor-search::-moz-placeholder {
    opacity: 0.4;
}

.skin-editor-search::placeholder {
    opacity: 0.4;
}

.skin-editor-search:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.11);
    box-shadow: 0 0 0 0.1em rgba(79, 195, 247, 0.3);
}

.skin-editor-textbtn {
    flex: 0 0 auto;
    padding: 0.35em 0.5em;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9em;
    cursor: pointer;
}

.skin-editor-textbtn:hover {
    color: #4fc3f7;
}

.skin-editor-summary {
    color: #ff5c5c;
    font-size: 0.9em;
}

/* 列表自己不再滚（原来钉在 52vh，右侧只看得见十几行）：
   滚动交给外层 .skin-editor-scroll，列表按内容长高，一直长到接近视口底部。 */
.skin-editor-list {
    flex: 1 0 auto;
    overflow: visible;
    max-height: none;
    padding: 0.35em 0.5em;
    background: rgba(0, 0, 0, 0.22);
    border-radius: 0.6em;
    /* 不要在这里写 scrollbar-width / scrollbar-color：新版 Chromium 一旦看到
       非 auto 的标准属性，就会**整块停用** ::-webkit-scrollbar 的定制，
       于是本列表退回原生灰条、和同屏其它列表对不上。
       Firefox 的细条由 root.css 的 @-moz-document 全局规则兜着。 */
}

/* 滚动条与游戏内其它弹窗列表（交易记录 / 观众名单）保持同一套：
   0.4em 宽 + 极淡轨道 + 20% 白滑块 + hover 变亮。
   原先这里是 0.35em / 16% / 无轨道无 hover，比全局那条细而暗，
   在同一屏里显得像另一个系统的东西。 */
.skin-editor-scroll::-webkit-scrollbar {
    width: 0.4em;
}

.skin-editor-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.2em;
}

.skin-editor-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.2em;
}

.skin-editor-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 分组下的一句话说明（通知图标这类「一组里全是可选替身」的地方） */
.skin-editor-note {
    padding: 0 0.2em 0.35em;
    font-size: 0.82em;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.42);
}

/* 地名按所属组归类的吸顶小标题 */
.skin-editor-group {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.32em 0.2em;
    background: #1a1a2e;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9em;
    letter-spacing: 0.04em;
}

/* 分组标题右侧的补充说明（如「转盘短标签：每个最多 2 字」）：不换行、不抢标题的层级 */
.skin-editor-group-note {
    margin-left: 0.6em;
    color: rgba(255, 255, 255, 0.32);
    font-size: 0.92em;
    letter-spacing: 0;
}

.skin-editor-field {
    padding: 0.1em 0;
}

.skin-editor-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.2em 0.25em;
    border-radius: 0.4em;
}

.skin-editor-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* 原文：灰、单行省略，和可改的输入框在视觉上分开 */
.skin-editor-original {
    flex: 0 0 11em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.45);
}

.skin-editor-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.3em 0.55em;
    font-size: 0.85em;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 0.35em;
    transition: background 0.15s, box-shadow 0.15s;
}

.skin-editor-input::-moz-placeholder {
    opacity: 0.35;
}

.skin-editor-input::placeholder {
    opacity: 0.35;
}

.skin-editor-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 0.1em rgba(79, 195, 247, 0.32);
}

/* 出错时不用边框，改用内发光，和整体无边框风格一致 */
.skin-editor-row.error .skin-editor-input {
    box-shadow: inset 0 0 0 0.1em rgba(255, 92, 92, 0.8);
}

.skin-editor-count {
    flex: 0 0 3.6em;
    text-align: right;
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.35);
}

.skin-editor-count.over {
    color: #ff5c5c;
}

.skin-editor-restore {
    flex: 0 0 auto;
    padding: 0.25em;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.35);
    cursor: pointer;
}

.skin-editor-restore:hover {
    color: #4fc3f7;
}

/* 试听 / 上传：没有音效或正在上传时置灰 */
.skin-editor-restore:disabled {
    opacity: 0.3;
    cursor: default;
}

.skin-editor-restore:disabled:hover {
    color: rgba(255, 255, 255, 0.35);
}

/*
 * 音效下拉：<select> 不吃半透明底色，浏览器会退回系统白底，
 * 而 color 继承自 .skin-editor-input 的 #fff ⇒ 白底白字。这里必须给不透明深色底。
 */
select.skin-editor-input {
    background: #23233a;
    color: #fff;
    cursor: pointer;
}

select.skin-editor-input option {
    background: #23233a;
    color: #fff;
}

/* 上传改成图标按钮：不再按输入框宽度（flex: 1 1 auto）撑开整行 */
.skin-editor-restore.skin-sound-upload {
    font-size: 0.9em;
}

.skin-editor-reason {
    padding: 0 0.3em 0.3em 11.5em;
    color: #ff5c5c;
    font-size: 0.78em;
}

.skin-editor-row.term .skin-editor-input.term {
    flex: 1 1 0;
}

.skin-editor-arrow {
    color: rgba(255, 255, 255, 0.35);
}

.skin-editor-addterm {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-top: 0.45em;
    padding: 0.35em 0.7em;
    border: none;
    border-radius: 0.45em;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.skin-editor-addterm:hover {
    background: rgba(79, 195, 247, 0.14);
    color: #4fc3f7;
}

.skin-editor-empty {
    padding: 1.2em;
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.95em;
}

/* 底栏：左侧实时预览，右侧命名 + 操作。
   固定在滚动区下面（不跟着滚），保存永远点得到。 */
.skin-editor-footer {
    display: flex;
    align-items: center;
    gap: 0.8em;
    flex-wrap: wrap;
    flex: 0 0 auto;
    padding-top: 0.7em;
}

/* 审核提示：独占一行放在最上面，别挤在按钮之间 */
.skin-editor-review-hint {
    flex: 0 0 100%;
    order: -1;
    font-size: 0.9em;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.45);
}

.skin-editor-actions {
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-left: auto;
}

.skin-editor-name {
    width: 12em;
    padding: 0.4em 0.6em;
    font-size: 0.9em;
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
    border: none;
    border-radius: 0.45em;
    transition: background 0.15s, box-shadow 0.15s;
}

.skin-editor-name:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.11);
    box-shadow: 0 0 0 0.1em rgba(79, 195, 247, 0.32);
}

.skin-editor-name.error {
    box-shadow: inset 0 0 0 0.1em rgba(255, 92, 92, 0.8);
}

.skin-editor-reason.inline {
    padding: 0;
    align-self: center;
}

/* 底栏两个按钮同尺寸：不随文字长短伸缩，也比通用 .custom-map-btn 小一档 */
.skin-editor-actions .custom-map-btn {
    flex: 0 0 auto;
    min-width: 5.2em;
    padding: 0.45em 1em;
    font-size: 1.1em;
    border-radius: 0.5em;
}

.skin-editor-save {
    color: #fff;
    font-weight: 600;
    background: linear-gradient(135deg, #2b7fb8, #4fc3f7);
    box-shadow: 0 0.15em 0.6em rgba(79, 195, 247, 0.28);
}

.skin-editor-save:hover:not(:disabled) {
    background: linear-gradient(135deg, #338cbf, #6ecdff);
    box-shadow: 0 0.18em 0.8em rgba(79, 195, 247, 0.4);
}

.skin-editor-save:disabled {
    opacity: 0.5;
    cursor: default;
}

@media (max-width: 720px) {
    .custom-map-modal.skin-editor {
        width: 96vw;
        max-height: 94vh;
    }

    .skin-editor-body {
        flex-direction: column;
    }

    /* 窄屏变成横向 tab 条：吸顶时仍要拉满宽度，否则只剩按钮那么宽 */
    .skin-editor-tabs {
        flex-direction: row;
        flex: 0 0 auto;
        align-self: stretch;
        overflow-x: auto;
    }

    .skin-editor-tab {
        flex: 0 0 auto;
    }

    .skin-editor-original {
        flex: 0 0 7em;
    }

    .skin-editor-reason {
        padding-left: 0.3em;
    }

    .skin-editor-actions {
        width: 100%;
        margin-left: 0;
    }

    /* 窄屏：小块横向放不下，说明和按钮各占一行，按钮拉满宽度好点 */
    .skin-editor-tools {
        padding: 0.65em 0.6em;
    }

    .skin-editor-step-actions {
        flex: 1 1 100%;
        margin-left: 0;
    }

    .skin-editor-step-actions .skin-sheet-btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* 导出按钮外面包了一层气泡锚点：窄屏下这一层也要跟着平分，否则两颗按钮不再等宽 */
    .skin-editor-step-actions .skin-export-wrap {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* 气泡在窄屏会顶到屏幕边上：收窄一点，仍贴在按钮左侧 */
    .skin-export-pop {
        max-width: 12em;
    }

    .skin-editor-name {
        flex: 1 1 auto;
        width: auto;
    }
}

/* ==================== 图标总表（导出 → 玩家用 AI 改风格 → 导入切割） ==================== */
.skin-sheet-btn {
    flex: 0 0 auto;
    padding: 0.42em 0.85em;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.5em;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85em;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.skin-sheet-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.16);
}

.skin-sheet-btn.primary {
    background: rgba(90, 160, 255, 0.24);
    border-color: rgba(120, 180, 255, 0.55);
    color: #dceaff;
}

.skin-sheet-btn.primary:hover:not(:disabled) {
    background: rgba(90, 160, 255, 0.36);
}

.skin-sheet-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

/* 弹窗：比编辑器更宽，因为要铺 6 列预览 */
.skin-sheet-modal {
    max-width: min(44em, 94vw);
    width: 94vw;
    max-height: 88vh;
    gap: 0.6em;
}

.skin-sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.55em;
    padding-right: 0.15em;
}

.skin-sheet-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    padding: 2.6em 1em;
    border-radius: 0.6em;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.03);
    text-align: center;
}

.skin-sheet-drop-icon {
    font-size: 1.8em;
    color: rgba(255, 255, 255, 0.35);
}

.skin-sheet-drop-title {
    font-size: 1em;
    font-weight: 600;
    color: #fff;
}

.skin-sheet-drop-hint {
    max-width: 26em;
    font-size: 0.8em;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
}

.skin-sheet-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6em;
}

.skin-sheet-toggle {
    display: flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.82em;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
}

/* 清边宽度滑杆：AI 图的洋红线糊开的宽度各家不一，默认 8px 不够时由玩家自己加宽 */
.skin-sheet-range {
    display: flex;
    align-items: center;
    gap: 0.35em;
    flex: 0 1 auto;
    font-size: 0.82em;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
}

.skin-sheet-range input[type='range'] {
    width: 5.5em;
    accent-color: #7fb6ff;
}

.skin-sheet-range-val {
    min-width: 2.6em;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.55);
}

/* 工具栏下面那行常驻说明（手机没有 hover，tooltip 靠不住） */
.skin-sheet-tip {
    font-size: 0.74em;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.42);
}

.skin-sheet-btn.tiny {
    padding: 0.28em 0.6em;
    font-size: 0.76em;
}

.skin-sheet-count {
    flex: 1 1 auto;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.55);
}

.skin-sheet-notice,
.skin-sheet-error {
    padding: 0.45em 0.6em;
    border-radius: 0.45em;
    font-size: 0.78em;
    line-height: 1.45;
}

.skin-sheet-notice {
    background: rgba(255, 196, 66, 0.12);
    color: #ffd98a;
}

.skin-sheet-error {
    background: rgba(255, 107, 107, 0.12);
    color: #ff9d9d;
}

.skin-sheet-grid {
    display: grid;
    gap: 0.35em;
}

.skin-sheet-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15em;
    padding: 0.3em 0.25em;
    border-radius: 0.45em;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    min-width: 0;
}

.skin-sheet-cell.is-on {
    border-color: rgba(95, 211, 154, 0.5);
    background: rgba(95, 211, 154, 0.09);
}

.skin-sheet-cell.is-empty {
    min-height: 4.4em;
    background: rgba(255, 255, 255, 0.015);
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.06);
}

.skin-sheet-cell-art {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 0.35em;
    background: transparent;
    cursor: pointer;
}

.skin-sheet-cell-art img {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

/* 主题角色棋子的预览：与其它格一样只画透明头像。
   ⚠️ 这里不要加圆角 / 底色 / 边框 —— 玩家会以为「提取出来的头像被加了边框」，
   而棋盘上的圆底是角色容器（.character-body-clip）的事，不是素材的一部分。 */

.skin-sheet-cell-note {
    max-width: 100%;
    font-size: 0.66em;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 采用态打勾、未采用显示还原箭头 —— 一眼看出哪些格子会被写进皮肤 */
.skin-sheet-cell-mark {
    position: absolute;
    right: 0.1em;
    bottom: 0.1em;
    font-size: 0.75em;
    color: #5fd39a;
    opacity: 0.9;
}

.skin-sheet-cell:not(.is-on) .skin-sheet-cell-mark {
    color: rgba(255, 255, 255, 0.35);
}

.skin-sheet-cell-label {
    max-width: 100%;
    font-size: 0.72em;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skin-sheet-cell-swap {
    padding: 0.1em 0.45em;
    border: none;
    border-radius: 0.35em;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.68em;
    cursor: pointer;
}

.skin-sheet-cell-swap:hover {
    background: rgba(255, 255, 255, 0.2);
}

.skin-sheet-footer {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6em;
    padding-top: 0.2em;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.skin-sheet-hint,
.skin-sheet-progress {
    flex: 1 1 12em;
    min-width: 0;
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.5);
}

.skin-sheet-progress {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    color: #a8c8ff;
}

/* 批量上传要看得见「在动」：文字计数 + 进度条 + 一句「别关窗」 */
.skin-sheet-progress-bar {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.skin-sheet-progress-fill {
    display: block;
    height: 100%;
    background: #4fc3f7;
    transition: width 0.18s ease;
}

.skin-sheet-progress-note {
    font-size: 0.92em;
    color: rgba(255, 255, 255, 0.45);
}

/* 上传中锁住整块内容：改「采用」、换单格图、重选总表都会让界面与正在上传的
   快照不一致（targets 在开始时就拍好了），索性一律禁点，只留底栏进度。 */
.skin-sheet-body.is-busy {
    pointer-events: none;
    opacity: 0.55;
}

.custom-map-close.is-busy {
    pointer-events: none;
    opacity: 0.35;
}

.skin-sheet-footer-btns {
    display: flex;
    gap: 0.45em;
    margin-left: auto;
}

/* 窄屏：6 列会挤成豆干，退到 4 列（切图本身与列数无关） */
@media (max-width: 640px) {
    .skin-sheet-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .skin-sheet-footer-btns {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
}

/* AI 把那格画空了：给出「未识别」占位并允许单张补图 */
.skin-sheet-cell.is-missing {
    border-color: rgba(255, 196, 66, 0.35);
    background: rgba(255, 196, 66, 0.06);
}

.skin-sheet-cell-missing {
    font-size: 0.72em;
    line-height: 1.3;
    color: #ffd98a;
    text-align: center;
    padding: 0 0.2em;
}
/* ---------------- 皮肤编辑器 · 色调页 ---------------- */

/* 必须显式给 color：这条祖先链（.skin-editor / .custom-map-modal / body）都没设文字色，
   不写就继承浏览器默认 #000，黑字压在 #1a1a2e 上等于看不见。
   兜底写在面板上，以后往这里加元素也不会再踩一次。 */
.skin-tone-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 0.2em 0.25em 1em;
    color: rgba(255, 255, 255, 0.9);
}

.skin-tone-section-title {
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.62);
    margin-top: 0.4em;
}

/* 预设：每张卡片是「四个色点 + 名字」，一眼看出这套配色长什么样 */
.skin-tone-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.2em, 1fr));
    gap: 0.4em;
}

.skin-tone-preset {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35em;
    padding: 0.45em 0.5em;
    border: none;
    border-radius: 0.45em;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.78em;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}

.skin-tone-preset:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 0.1em rgba(79, 195, 247, 0.35);
}

.skin-tone-preset-dots {
    display: flex;
    gap: 0.15em;
}

.skin-tone-preset-dots i {
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.skin-tone-row {
    padding: 0.15em 0;
}

.skin-tone-row-head {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.25em;
    border-radius: 0.4em;
}

.skin-tone-row-head:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* 色块本身就是展开滑杆的按钮 */
.skin-tone-swatch {
    flex: 0 0 auto;
    width: 2.1em;
    height: 2.1em;
    border: none;
    border-radius: 0.45em;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 0.5em rgba(0, 0, 0, 0.35);
}

.skin-tone-row-label {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    font-size: 0.85em;
    /* 色槽名（棋盘底色 / 地块颜色 / 强调色 / 文字与描边）：这一行原来没写 color，
       继承到 body 的默认黑色，等于看不见，必须显式给亮色 */
    color: rgba(255, 255, 255, 0.92);
}

.skin-tone-row-hint {
    font-size: 0.78em;
    color: rgba(255, 255, 255, 0.5);
}

.skin-tone-hex {
    flex: 0 0 6.2em;
    padding: 0.3em 0.4em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78em;
    text-align: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 0.35em;
}

.skin-tone-hex:focus {
    outline: none;
    box-shadow: 0 0 0 0.1em rgba(79, 195, 247, 0.32);
}

.skin-tone-row.error .skin-tone-hex {
    box-shadow: inset 0 0 0 0.1em rgba(255, 92, 92, 0.8);
}

.skin-tone-sliders {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    padding: 0.35em 0.5em 0.5em 3.1em;
}

.skin-tone-slider {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.62);
}

.skin-tone-slider input {
    flex: 1 1 auto;
    accent-color: #4fc3f7;
}

.skin-tone-slider b {
    flex: 0 0 3.4em;
    text-align: right;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

.skin-tone-error {
    padding: 0.1em 0.25em 0.1em 3.1em;
    font-size: 0.75em;
    color: #ff5c5c;
}

/* 迷你棋盘：底板 + 三块示意地块（可购 / 功能 / 任务） */
.skin-tone-preview-wrap {
    display: flex;
    justify-content: center;
    margin-top: 0.6em;
}

.skin-tone-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 22em;
    aspect-ratio: 16 / 7;
    padding: 0.5em;
    border: 0.2em solid;
    border-radius: 0.6em;
}

.skin-tone-preview-tiles {
    display: flex;
    gap: 0.4em;
}

.skin-tone-preview-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    width: 100%;
}

/* 中央控制台示意条：底色 + 描边 + 四层发光都吃真实变量，跟游戏里那块面板同一套 */
.skin-tone-console {
    width: 78%;
    height: 1.2em;
    border: 0.14em solid transparent;
    border-radius: 0.5em;
}

.skin-tone-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.2em;
    width: 4.6em;
    min-height: 4.2em;
    padding: 0.25em;
    border-radius: 0.35em;
    overflow: hidden;
}

.skin-tone-tile-name {
    width: 100%;
    padding: 0.1em 0;
    font-size: 0.6em;
    line-height: 1.2;
    text-align: center;
    border-radius: 0.25em;
}

.skin-tone-tile-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 62%;
    height: 0.55em;
    border-radius: 0 0.25em 0 0;
}

.skin-tone-tile-price {
    width: 100%;
    padding: 0.1em 0;
    font-size: 0.55em;
    color: #fff;
    text-align: center;
    border-radius: 0.25em;
}

/* 任务格的金色光晕（真实棋盘上是 .quest-style .icon::before，z-index:-1 压在字底下） */
.skin-tone-tile-glow {
    position: absolute;
    top: 45%;
    left: 50%;
    width: 2.4em;
    height: 2.4em;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    filter: blur(4px);
}

/* .skin-tone-warn（低对比度警告）已随「名字条改固定色」一起移除：
   名字条不再参与配色派生，这条警告结构上不可能触发 */
.skin-tone-note {
    font-size: 0.75em;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.48);
}

/* mobileGameTabs.css */
.player-banner-popup {
  --chat-w: min(calc(0.72 * var(--center-h)), var(--center-w));
  font-size: calc(0.023*var(--chat-w));

  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 2em;
  background: var(--c-g-panel);

  box-sizing: border-box;
}

.player-banner-popup.side {
  width: 100%;
  flex: 1;
  padding: 2em 1em 0em;
}

.player-banner-popup.popup {
  z-index: 200;
  height: calc(0.5 * var(--center-h));
  position: absolute;

  padding: 1em 2em 0;
  font-size: calc(0.02 * var(--chat-w));
  border-radius: 1.5em;

  /* 🌟 核心修改 1：全屏下页面如果被往上推，要把 top 补回来，确保它紧贴可视区的真正顶部 */
  top: calc(50vh - var(--center-h)/2 + 1em);
  width: calc(0.96 * var(--center-w));
  max-width: 300px;

  /* 🌟 核心修改 2：高度 = 算好的可视高度 - 虚拟键盘环境变量(如果有的话) */
  /* env(keyboard-inset-bottom) 是现代浏览器在开启 overlaysContent 后的系统级键盘高度 */

  translate: none;
  transform: none;

  /* 确保内部可以滚动 */
  overflow-y: auto;

  /* 禁止浏览器的默认滚动回弹行为（优化体验） */
  overscroll-behavior-y: contain;
}

.mobile-section {
  scroll-snap-align: start;
  min-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.setting-touch-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.chat-touch-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.select {}

.targets-container {
  display: flex;
  flex-direction: row;
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: none;
  /* Hides the scrollbar in Firefox */
}

.targets-container::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

.all svg {
  color: #ccc6dc;
}

.target {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 30px;
  height: 50px;
  width: 50px;
  align-items: center;
  filter: brightness(0.5);
  margin: 0 5px;
}

.all.target {
  background-color: #6e6e8b;

}

.target.highlight {
  filter: drop-shadow(black 0px 0px 0.2em) drop-shadow(rgba(0, 0, 0, 0.25) 0px 0px 0.25em);
}

.target>svg {
  height: 50px;
  width: 50px;
}

.target .character-container {
  height: 50px;
  width: 50px;
}

.target-select-nickname {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  color: #baafd4cc;
  padding-top: 5px;
}

.avatar .point {
  flex: 1 0 4em;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  font-size: 1.8em;
  display: flex;
  align-items: center;
  color: #e6d995;
}

.point .rank {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
}

.point .rank-name {
  transform: scale(0.7);
}

.rank img {
  width: 100%;
  height: 100%;
  top: 0.2em;
  position: absolute;
  z-index: 0;
}

.rank .number {
  font-weight: bold;
  z-index: 10;
  color: white;
  width: 100%;
  text-align: center;
  text-shadow: 0px 0px 4px rgb(0 0 0);
}

.chat-mode-switch {
  --unit: 4.5em;
  cursor: pointer;
  border-radius: 50%;
  color: #baafd4cc;
  background: #00000061;
  width: var(--unit);
  height: var(--unit);
  padding: 0.9em;
  box-sizing: border-box;
}

.chat-mode-switch svg {
  width: 100%;
  height: 100%;
}

.audio-msg {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 180px;
}

.bar {
  flex: 1;
  height: 6px;
  background: #ddd;
  border-radius: 3px;
  overflow: hidden;
}

.bar-inner {
  height: 100%;
  background: #4caf50;
}

.voice-bubble {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  position: relative;
}

.voice-bubble:hover {
  filter: brightness(0.95);
}

/* 喇叭图标容器 */
.voice-icon {
  position: relative;
  width: 1.2rem;
  height: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;

}

@media (orientation: portrait) {
  .voice-icon {
    width: 1em;
    height: 1em;
    transform: scale(1.5);
  }
}


.voice-icon svg {
  transform: scale(2.8);
}

.waves {
  width: 140px;
}

.wave {
  fill: none;
  stroke: #222;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
}

.wave1,
.wave2,
.wave3 {
  opacity: 1;
}

/* 依次出现，但一起消失 */
.playing .wave1 {
  animation: w1 1.2s infinite;
}

.playing .wave2 {
  animation: w2 1.2s infinite;
}

.playing .wave3 {
  animation: w3 1.2s infinite;
}

/* A 最先出现 */
@keyframes w1 {
  0% {
    opacity: 0;
  }

  9% {
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  94% {
    opacity: 1;
  }

  95% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* B 第二个 */
@keyframes w2 {
  0% {
    opacity: 0;
  }

  39% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  94% {
    opacity: 1;
  }

  95% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* C 最后 */
@keyframes w3 {
  0% {
    opacity: 0;
  }

  69% {
    opacity: 0;
  }

  70% {
    opacity: 1;
  }

  94% {
    opacity: 1;
  }

  95% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* 加载状态样式 */
.voice-icon.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease-in-out;
}

.loading-spinner {
  height: 100%;
  width: 100%;
  border: 3px solid rgba(34, 34, 34, 0.2);
  box-sizing: border-box;
  border-top-color: #222;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 文本时长显示 (可选，放在气泡外面或里面) */
.voice-duration {
  margin-left: 8px;
  font-size: 12px;
  color: #d6d6d6;
}

/* Radix UI Popover Styles */
.MessagePopoverContent {
  border-radius: 8px;
  padding: 8px 12px;
  background-color: #333;
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  font-size: 14px;
  z-index: 10000;
  animation: slideUpAndFade 0.2s ease-out;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.MessagePopoverArrow {
  fill: #333;
}

.popover-action-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.popover-action-item:active {
  opacity: 0.7;
}

.popover-icon {
  font-size: 16px;
}

@keyframes slideUpAndFade {
  from {
    opacity: 0;
    transform: translateY(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 系统消息 / 撤回提示样式 */
.chat-system-message {
  width: 100%;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  margin: 0.625em 0;
  padding: 0 1.25em;
}

.chat-system-message .recall-tip {
  background-color: rgba(0, 0, 0, 0.1);
  /* 轻微的灰色背景 */
  color: #888;
  /* 灰色文字 */
  font-size: 1.5em;
  padding: 0.25em 0.625em;
  border-radius: 0.25em;
  text-align: center;
}

/* 适配暗色模式（如果有） */
@media (prefers-color-scheme: dark) {
  .chat-system-message .recall-tip {
    background-color: rgba(255, 255, 255, 0.1);
    color: #aaa;
  }
}

.welcome-banner {
  text-align: center;
  color: #fff;
  font-size: 1.6em;
  padding: 0.6em 1em;
  margin: 0.8em 2em;
  border-radius: 0.4em;
  background-color: #4caf50;
}

@media (max-width: 600px) {}

.popup-header {
  display: flex;
  justify-content: flex-end;
  padding: 0.5em 0.2em 0;
  flex-shrink: 0;
  height: 2.5em;
}

.popup-close-button {
  position: absolute;
  height: 4em;
  width: 4em;
  right: 0.5em;
  top: 0.5em;
  border-radius: 50%;
  background-color: #e8e8e83a;
  cursor: pointer;
}

@media (orientation: portrait) {
  .popup-close-button {
    height: 5em;
    width: 5em;
    right: 0.3em;
    top: 0.3em;
  }
}

/* 屏蔽玩家 开关区域（与投票按钮同组，背景/圆角由父级 .buttons 提供） */
.block-controls {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0.6em 0.8em;
}

.block-control-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  box-sizing: border-box;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.block-control-row+.block-control-row {
  margin-left: 0.8em;
}

.block-control-title {
  flex: 1;
  min-width: 0;
  font-size: 1.2em;
  color: #dde2e8e3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 0.6em;
}

/* 弹窗内开关按弹窗字号等比缩放（覆盖全局 em 尺寸） */
.block-controls .toggle-button {
  --toggle-buton-width: 3.5em;
  flex-shrink: 0;
}

.popup-close-button svg {
  height: 100%;
  width: 100%;
}

/* ==========================================================================
   半自动按钮（聊天面板版，2026-11-01）
   —— 原中面那一格（boardCenter.js）仍注释保留，组件复用、只换外观：
      不再是一颗棋盘按钮，而是头像行下方一整条「状态胶囊」：
      关 = 灰玻璃 / 买地 = 橙色 / 跑圈 = 蓝色，颜色与棋盘版的状态色同一套语义。
   尺寸全部用面板自身的 em（.player-banner-popup 的 font-size），
   所以侧栏、手机弹窗两种容器里都能等比缩放。
   ========================================================================== */
.chat-autoplay-row {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 0.4em 1em 0.3em;
}

.player-banner-popup .button.auto-play-chat {
  width: 7em;
  height: 1.9em;
  margin: 0;
  padding: 0 0.8em;
  gap: 0.15em;
  font-size: 1.5em;
  border-radius: 1.4em;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0.15em 0.5em rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.72);
  letter-spacing: 0.03em;
  transform: none;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.player-banner-popup .button.auto-play-chat svg {
  width: 1.15em;
  height: 1.15em;
  margin: 0;
}

.player-banner-popup .button.auto-play-chat:hover {
  filter: none;
  border-color: rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.9);
}

.player-banner-popup .button.auto-play-chat:active {
  transform: none;
  box-shadow: 0 0.05em 0.25em rgba(0, 0, 0, 0.4);
}

/* 关 */
.player-banner-popup .button.auto-play-chat.auto-play-off {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
}

/* 买地（默认开启的档位）：暖橙 */
.player-banner-popup .button.auto-play-chat.auto-playing {
  background: linear-gradient(135deg, #d97a12, #b4560a);
  border-color: rgba(255, 186, 96, 0.55);
  box-shadow: 0 0.15em 0.7em rgba(200, 100, 10, 0.35);
  color: #fff6e8;
  transform: none;
}

/* 跑圈：冷蓝（与棋盘版同色系） */
.player-banner-popup .button.auto-play-chat.auto-play-lap.auto-playing {
  background: linear-gradient(135deg, #1e88c9, #14608f);
  border-color: rgba(120, 200, 255, 0.5);
  box-shadow: 0 0.15em 0.7em rgba(20, 110, 170, 0.4);
  color: #eaf6ff;
}

/* 未开局 / 破产：整体压暗，仍可看见状态 */
.player-banner-popup .button.auto-play-chat.disableB,
.player-banner-popup .button.auto-play-chat.bankrupting {
  opacity: 0.5;
}
.player-banner-popup .character-container {
    filter: brightness(0.8);
}

.userInfoTop {
    display: flex;
    align-items: flex-start;
    flex-direction: rwo;
    animation: scaleup .3s cubic-bezier(.25, 0, 0, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(4px);
    background-color: rgb(19, 15, 29);
    background-image: linear-gradient(to right bottom, rgb(19, 15, 29), rgb(26, 15, 29));
    border-radius: .5rem;
    box-sizing: border-box;
    padding: 5rem 1.2rem 0 1.2rem;
    max-width: 564px;
    width: 96vw;
    height: calc(96*var(--vh));
    position: absolute;
    z-index: 700;
}

@keyframes scaleup {
    0% {
        opacity: 0;
        transform: scale(.875);
    }

}

.tabs {
    width: 28%;
    white-space: nowrap;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    overflow-y: scroll;
    overflow-x: hidden;

}

.tab {
    display: flex;
    font-size: large;
    align-items: center;
    padding: 0 1rem 0 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: #baafd47d;
    height: 3rem;
    width: 60%;
    margin: 0.2rem 0.5rem 0.2rem 0;
}

.tab:hover {
    color: #cccccc;
    background: #2b2848;
}

.tab svg {
    height: 1.2rem;
    width: 1.2rem;
    margin-right: 0.2rem;
}

/* 高亮目标 */
.highlight-1 {
    color: #ddd;
    background: #222039;
}

.userInfoTop .content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    position: relative;
    width: 72%;
}

.content-scrollable-container {
    box-sizing: border-box;
    flex: 1;
    overflow-y: hidden;
    overflow-x: hidden;
    justify-items: center;
}

.section {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    border-radius: 5px;
    overflow: hidden;
    padding: 10px 1px 5px 8px;
    /* compenstate the scroll bar */
    width: 92%;
}

.chat-to .nickname {
    font-size: large;
    align-content: flex-end;
    color: #ddd;
    width: 100%;
    padding: 0.2rem 0;
}

.name-container {
    font-size: medium;
    color: grey;
    width: 100%;
    padding: 0.5rem 0 0 1rem;
}

.dressed-character-container {
    display: block;
    align-content: center;
    width: 5rem;
}

.dressed-character-container .character-container {
    width: 4rem;
    height: 4rem;
}

.player-info-and-buttons .avatar .character-container {
    height: 4em;
    width: 4em;
    margin-right: 3px;
    flex-shrink: 0;
}

.player-info-and-buttons .avatar>svg {
    width: 70px;
    height: 70px;
    border-radius: 35px;
    background-color: #888888;
}

.player-info-and-buttons .avatar {
    width: -moz-fit-content;
    width: fit-content;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    gap: 0.6em;
}

@media (orientation: portrait) {}


.side .player-info-and-buttons .avatar {
    padding: 0 1em;
    font-size: 0.82em;
}

.popup .player-info-and-buttons .avatar {}

.player-info-and-buttons .avatar .nickname {
    font-size: 1.7em;
    align-content: flex-end;
    color: #dddddde3;
    overflow: hidden;
    white-space: nowrap;

}

.buttons {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

/* 玩家弹窗：屏蔽开关组与投票按钮同一组，纵排（屏蔽在上、投票在下） */
.player-info-and-buttons .buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6em 0.9em;
    border-radius: 0.8em;
    background-color: #0000001a;
    gap: 1em;
    
}

.player-info-and-buttons .buttons .block-controls {
    width: 100%;
}

.player-info-and-buttons .buttons .vote {
    height: 2.2em;
    min-width: 6.4em;
    margin-top: 0.6em;
    font-size: 1em;
}

/* Add to existing CSS */
.buttons-container {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    width: 100%;
}

.vote {
    box-shadow: 0 0.1em 0.5em #130f1d;
    justify-content: center;
    overflow: hidden;
    align-items: center;
    border: 0;
    border-radius: 0.7em;
    color: #f6f6f6;
    opacity: 0.7;
    display: inline-flex;
    position: relative;
    transition: .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    word-break: break-word;
    white-space: nowrap;
    height: 2em;
    width: 5.2em;
    font-size: 1.4em;
    box-sizing: border-box;
    line-height: 1;
}

.microphone {
    box-shadow: 0 0.1em 0.5em #130f1d;
    justify-content: center;
    overflow: hidden;
    align-items: center;
    border: 0;
    border-radius: 0.7em;
    color: #f6f6f6;
    opacity: 0.7;
    display: inline-flex;
    position: relative;
    transition: .2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    word-break: break-word;
    white-space: nowrap;
    height: 2em;
    width: 5.2em;
    font-size: 1.4em;
    box-sizing: border-box;
    line-height: 1;
}

.not-voting {
    cursor: pointer;
    background-color: #b0b0b014;
}


.i-voted {
    cursor: not-allowed;
    background-color: #902f17;
}

.i-not-voted {
    cursor: pointer;
    background-color: #c93915;
}

.not-voting:hover,
.i-not-voted:hover {
    filter: brightness(1.2);
}

.vote svg {
    fill: #ffffff;
    height: 100%;
}

.player-info-and-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
}

.chat-container {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-top: 1px solid #37375a69;
    margin: 1em 0;
    flex: 1;
}

.chat-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    overflow-y: visible;
    color: #fff;
    justify-content: flex-end;
}

.side .chat-content {
    padding: 1em 1em;

}

.popup .chat-content {
    padding: 0em 0.5em;
}

.chat-to {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 0.5em;
    font-size: 1.6em;
}

.chat-to .character-container {
    width: 20px;
    height: 20px;
}

.chat-target-avatar {
    display: flex;
    flex-direction: row;
    font-size: inherit;
    position: relative;
    align-items: center;
}


.chat-target-avatar .text {
    padding-right: 0.2em;
    color: rgb(176 170 195 / 51%);
    white-space: nowrap;
}

.chat-target-avatar .character-container {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.chat-target-avatar>svg {
    width: 2em;
    height: 2em;
}

.chat-target-avatar .nickname {
    white-space: nowrap;
    font-size: inherit;
    color: #cccccc;
    overflow: hidden;
    max-width: 6em;

}

.scrollable {
    height: 0;
    flex: 1 1 0;
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    flex-direction: column-reverse;
    justify-content: end;

}

.chat-message-container {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.chat-message-player {
    display: flex;
    flex-direction: row;
    gap: 0.5em;
    align-items: flex-end;
    font-size: 1.5em;
    color: #b1b5d387
}

.chat-message-player .name {
    overflow: hidden;
    max-width: 5em;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.spectator-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.15em 0.5em;
    border-radius: 0.4em;
    font-size: 0.75em;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.newbie-badge {
    display: inline-block;
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: #055d3a;
    padding: 0.15em 0.5em;
    border-radius: 0.4em;
    font-size: 0.75em;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.avatar .premium-badge{
    font-size: 1.2em;
}
.avatar .newbie-badge {
    font-size: 1.2em;
}

/* 顶部玩家信息行：机器人难度 tag（跟在名字后面） */
.bot-diff-badge {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.1em 0.45em;
    border-radius: 0.35em;
    font-size: 0.55em;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}

.bot-diff-easy {
    background: #93dfae;
    color: #16321f;
}

.bot-diff-normal {
    background: #e6dc9c;
    color: #3d3413;
}

.bot-diff-hard {
    background: #f0928f;
    color: #47120f;
}

/* 奇怪档：机器学习策略 —— 紫，与三档基础色区分（不是「更难的红」，是「另一种东西」） */
.bot-diff-weird {
    background: #c3a6f5;
    color: #2a1745;
}

/* 顶部信息行内与其他徽章（Steam/新手）保持同一字号 */
.avatar .bot-diff-badge {
    font-size: 1.2em;
}
.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    background: linear-gradient(135deg, #f6d365 0%, #fda085 50%, #f6d365 100%);
    background-size: 200% 200%;
    color: #5a3e00;
    padding: 0.15em 0.5em 0.15em 0.35em;
    border-radius: 0.4em;
    font-size: 0.75em;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    animation: premiumShimmer 2.5s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(253, 160, 133, 0.4);
}

.premium-badge::before {
    content: '★';
    font-size: 0.85em;
    line-height: 1;
}

@keyframes premiumShimmer {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
        box-shadow: 0 0 10px rgba(253, 160, 133, 0.6);
    }

    100% {
        background-position: 0% 50%;
    }
}


.chat-message-player .character-container {
    width: 2em;
    height: 2em;
}

.chat-from-me {
    align-items: flex-end;
}

.chat-from-me .chat-message-player {
    display: none;
}

.chat-from-others {
    align-items: flex-start;
}

.chat-input-container {
    display: flex;
    align-items: center;
    gap: 0.6em;
    border-top: 1px solid #37375a69;
}

.chat-input-area {
    display: flex;
    flex-direction: column;
}

/* 回放：聊天只读提示（替代输入区） */
.chat-readonly-tip {
    border-top: 1px solid #37375a69;
    padding: 0.6em 0.4em;
    text-align: center;
    font-size: 0.85em;
    color: #8c8ca6;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.quick-chat-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
}

.quick-chat-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

.quick-chat-sheet {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: flex-end;
    gap: 0.5em;
    max-width: 100%;
    max-height: 100%;
    padding: 1em;
    border-radius: 1.2em;
    background: rgba(24, 20, 42, 0.85);
    box-shadow: 0 0.4em 1.2em rgba(0, 0, 0, 0.45);
    overflow-y: auto;
}

.quick-chat-sheet .quick-chat-button {
    flex: 0 1 auto;
    max-width: 100%;
    padding: 0.7em 1.2em;
    border: none;
    border-radius: 1.4em;
    background: #2b273b;
    color: #eceaf5;
    font-size: 1.5em;
    line-height: 1.2;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
}

.quick-chat-sheet .quick-chat-button:active {
    background: #6647e0;
    color: #fff;
}

@media (orientation: portrait) {
    .quick-chat-sheet .quick-chat-button {
        font-size: 1.9em;
    }
}

.side .chat-input-container {
    padding: 1.6em 2px 2px 2px;
}

.popup .chat-input-container {
    padding: 1em 2px 2px 2px;

}
.voice-button-container{
    display: flex;
    flex-grow: 1;
    position: relative;
}
.chat-input {
    width: 0;
    height: 1.4em;
    flex: 1;
    padding: 0.7em 1.3em;
    border: none;
    border-radius: 24px;
    background: #00000061;
    color: rgb(210, 210, 210);
    font-size: 1.6em;
    transition: outline 0.3s;
    outline: 2px solid transparent;


}


.chat-input:focus-visible {
    outline: 2px solid #3a447180;
}


.chat-input::-moz-selection {
    background-color: #9a8fef;
}


.chat-input::selection {
    background-color: #9a8fef;
}

.chat-input--hidden {
    display: none;
}

.chat-from-others .chat-message {
    border-radius: 0em 1em 1em 1em;
    background: #ffffff83;

}

.chat-from-me .chat-message {
    border-radius: 1em 0em 1em 1em;
    background: #ffffff42;
}

.chat-message {
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    word-break: break-word;
    width: -moz-fit-content;
    width: fit-content;
    font-size: 1.6em;
    color: #e1e1e1;

}

@media (orientation: portrait) {
    .chat-message {
        padding: 0.5em 1.1em;
        font-size: 2em;
        line-height: 1;
    }

    .chat-from-me .chat-message {
        border-radius: 0.5em 0em 0.5em 0.5em;
    }


    .chat-from-others .chat-message {
        border-radius: 0em 0.5em 0.5em 0.5em;
        background: #ffffff83;

    }

}

.chat-message:last-child {
    margin-bottom: 0;
}

/* 快捷喊话消息：背景与普通消息一致，仅加边框区分 */
.chat-message.chat-message--quick {
    border: 2px solid rgba(255, 255, 255, 0.4);
}

@media (orientation: portrait) {
    .chat-message.chat-message--quick {
        border-width: 1px;
    }
}

.username {
    font-size: medium;
    color: grey;
    width: 100%;
    padding: 0.2rem 0rem;
}

.logout-button {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    border: 0;
    border-radius: 0.5rem;
    padding: 6px 10px;
    font-size: 18px;
    color: #baafd4cc;
}

.logout-button svg {
    width: 18px;
    height: 18px;
    fill: #baafd4cc;
    margin-right: 4px;
}

.logout-button:hover {
    filter: brightness(1.2);
    background: #2b2848;
}

.item {
    background: #2a2a49;
    border-radius: 1rem;
    padding: 0.5rem;
    display: flex;
    align-items: center;
}

.items-container {}

.items {
    display: grid;
    grid-template-columns: repeat(auto-fill, 5rem);
    grid-auto-rows: 5rem;
    justify-content: center;
    gap: 0.5rem;
    width: 80%;
    min-width: calc(3* 5rem + 2* 0.5rem);
    margin: 1rem 0 0 0;
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.all-store-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, 7rem);
    grid-auto-rows: 10rem;
    justify-content: center;
    gap: 0.5rem;
    width: 80%;
    min-width: calc(3* 5rem + 2* 0.5rem);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

.store-item {
    background: #2a2a49;
    border-radius: 1rem;
    padding: 0.0 1.5rem 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.store-item-icon {
    width: 100%;
    height: 65%;
    display: flex;
    align-items: center;
}

.icon-size-adjust {
    display: flex;
    width: 100%;
    height: -moz-fit-content;
    height: fit-content;
}

.item-name {
    font-size: small;
    margin: 0 0 0.5rem 0;
    color: #d8d8d8;
}

.item-price {

    font-size: medium;
    display: flex;
    color: #ddbf1e;
}

.item-price svg {
    width: 1rem;
    margin: 0 0.5rem;
}

/* 添加在userInfo.css中 */
.gift-code-container {
    display: flex;
    flex-direction: column-reverse;
    margin: 10px 0 5px 0;
    width: 80%;
    max-width: 500px;
}

.gift-code-inputs {
    display: flex;
    gap: 10px;
    height: -moz-fit-content;
    height: fit-content;
    margin-bottom: 10px;
}

.gift-input {
    flex: 1;
    padding: 8px 12px;
    border: 0;
    border-radius: 4px;
    font-size: 14px;
    background-color: #2a2a49;
}

.gift-input::-moz-selection {
    background-color: #9a8fef;
}

.gift-input::selection {
    background-color: #9a8fef;
}

.gift-redeem-btn {
    background-color: #7b47e0;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.gift-redeem-btn:hover {
    background-color: #865bdc;
}

.gift-code-message {
    color: #4CAF50;
    font-size: 14px;
    margin-top: 5px;
}

.gift-code-message.error {
    color: #f44336;
}

.new-version {
    font-size: 0.9em;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.new-version svg {
    width: 1.4em;
    height: 1.4em;
    transform: rotate(180deg);
    padding-top: 0.1em;
}

@media (max-width: 600px) {


    .userInfoTop {
        height: calc(80*var(--vh));
        top: calc(10*var(--vh));
        padding: 2rem 1.2rem 0;
    }

    .tab {
        font-size: small;
        box-sizing: border-box;
        padding: 0 0 0 0.5rem;
        width: 90%;

    }

    .tab svg {
        width: 1rem;
        height: 1rem;
    }

    .dressed-character-container .character-container {
        width: 3rem;
        height: 3rem;

    }

    .items {
        grid-template-columns: repeat(auto-fill, 3.5rem);
        grid-auto-rows: 3.5rem;
        gap: 0.25rem;
        min-width: calc(3* 3.5rem + 2* 0.25rem);
        margin: 0.5rem 0 0 0;
        border-radius: 0.25rem;
        padding: 0.25rem;
    }

    .all-store-items {
        grid-template-columns: repeat(auto-fill, 3.5rem);
        grid-auto-rows: 5rem;
        gap: 0.25rem;
        width: -moz-fit-content;
        width: fit-content;
        min-width: calc(3* 2.5rem + 1* 0.5rem);
        margin: 0.5rem 0 0 0;
        border-radius: 0.25rem;
        padding: 0.25rem;
    }

    .store-item {
        padding: 0;
        border-radius: 0.5rem;
    }

    .store-item-icon {
        width: 100%;
        height: 60%;
        justify-content: center;
    }

    .icon-size-adjust {
        width: 3rem;
    }

    .item-name {
        font-size: x-small;
        margin: 0 0 0.2rem 0;
    }

    .item-price {
        font-size: x-small;
    }

    .item-price svg {
        width: 0.6rem;
        margin: 0 0.2rem;
    }

    .gift-code-inputs {
        margin-bottom: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .gift-input {
        padding: 4px 6px;
        font-size: 0.8rem;
        width: 70%;
    }

    .gift-redeem-btn {
        box-sizing: border-box;
        white-space: nowrap;
    }

    .chat-container {}

    .chat-input {
        width: 70%;
    }

    .section {
        padding: 0 0.5rem;
    }

}
.voice-msg-button {
    color: white;
    font-size: 1.5em;
    border: none;
    border-radius: 2.9em;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    transition: all 0.1s ease;
    flex-grow: 1;
    height: 2.97em;
}

@media (orientation: portrait) {
    .voice-msg-button {
        min-height: unset;
        height: 2em;
        padding: 0.8em 1.8em;
        box-sizing: content-box;
    }

    .chat-mode-switch {
        height: 5.7em;
        width: 5.7em;

    }

    .chat-input {
        min-height: unset;
        height: 2em;
        padding: 0.8em 1.8em;
    }
}
.rating-badges-container {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 8px 0;
}

.rating-badge {
    font-size: 1.1em;
    padding: 0.4em 0.9em;
    border-radius: 1em;
    filter: brightness(0.9);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.rating-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.good-badge {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: #fff;
}

.bad-badge {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
    color: #fff;
}

.mentor-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.rating-popover {
    background: #1a1a2e;
    color: #fff;
    font-size: 0.85em;
    padding: 0.7em 1em;
    border-radius: 0.6em;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    max-width: 250px;
    z-index: 9999 !important;
}

.rating-popover[data-state='open'] {
    z-index: 9999 !important;
}

.rating-popover-arrow {
    fill: #1a1a2e;
}

.popover-text {
    line-height: 1.4;
}

@media (max-width: 600px) {
    .rating-badges-container {
        gap: 6px;
        margin: 6px 0;
    }

    .rating-badge {
        font-size: 1.5em;
        padding: 0.4em 0.9em;
        border-radius: 1em;
    }
}
/* 老玩家地图引导弹窗（buttons.js） */
.map-nudge-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3000;
    background: radial-gradient(circle at 50% 40%, rgba(37, 60, 122, 0.55), rgba(4, 6, 24, 0.86) 70%);
    animation: mapNudgeFade 0.22s ease-out;
}

.map-nudge-modal {
    position: relative;
    width: min(80vw, 17em);
    box-sizing: border-box;
    padding: 2.1em 1.7em 1.9em;
    border-radius: 1.1em;
    text-align: center;
    color: #eaf2ff;
    background: linear-gradient(165deg, #16204a 0%, #0b1130 55%, #080c22 100%);
    box-shadow:
        0 1.2em 3em rgba(0, 0, 0, 0.6),
        inset 0 0.08em 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
    animation: mapNudgePop 0.28s cubic-bezier(0.18, 1.3, 0.5, 1);
}

.map-nudge-modal::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -20%;
    width: 140%;
    height: 120%;
    background: radial-gradient(circle, rgba(101, 225, 29, 0.16), transparent 62%);
    pointer-events: none;
}

.map-nudge-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8em;
    height: 2.8em;
    margin-bottom: 0.7em;
    font-size: 1.35em;
    color: #65e11d;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, rgba(101, 225, 29, 0.32), rgba(101, 225, 29, 0.05));
    box-shadow: 0 0 1.4em rgba(101, 225, 29, 0.35);
}

.map-nudge-title {
    position: relative;
    font-size: 1.35em;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #ffffff;
    text-shadow: 0 0.1em 0.6em rgba(103, 217, 250, 0.45);
}

.map-nudge-desc {
    position: relative;
    margin-top: 0.8em;
    font-size: 0.94em;
    line-height: 1.75;
    color: #a9bce4;
}

.map-nudge-actions {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 1.6em;
}

.map-nudge-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 0.72em 0.6em;
    font-size: 0.95em;
    font-weight: 700;
    border: none;
    border-radius: 0.7em;
    cursor: pointer;
    transition: transform 0.14s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.map-nudge-btn.ghost {
    margin-bottom: 0.7em;
    color: #b9c8ea;
    background: rgba(255, 255, 255, 0.06);
    border: 0.09em solid rgba(255, 255, 255, 0.16);
}

.map-nudge-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.12);
}

.map-nudge-btn.primary {
    color: #08210a;
    background: linear-gradient(180deg, #86f24a 0%, #4fc21a 100%);
    box-shadow: 0 0.5em 1.2em rgba(101, 225, 29, 0.4);
}

.map-nudge-btn.primary:hover {
    filter: brightness(1.07);
    transform: translateY(-0.08em);
}

.map-nudge-btn.ghost:active,
.map-nudge-btn.primary:active {
    transform: translateY(0.06em);
}

@keyframes mapNudgeFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mapNudgePop {
    from { opacity: 0; transform: translateY(1.2em) scale(0.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 480px) {
    .map-nudge-modal {
        padding: 1.6em 1.3em 1.4em;
    }

    .map-nudge-title {
        font-size: 1.18em;
    }

    .map-nudge-desc {
        font-size: 0.88em;
    }
}

/* PC 端（宽屏横向）按钮更紧凑 */
@media (min-aspect-ratio: 17/10) {
    .map-nudge-btn {
        padding: 0.5em 0.5em;
        font-size: 0.82em;
        border-radius: 0.6em;
    }
}
.final-container {
    position: absolute;
    top: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 160px;
    width: calc(80*var(--vh));
    background: linear-gradient(to right, transparent, black 30%, black 70%, transparent);
    flex-direction: column;
    overflow: hidden;
    left: 50%;
    z-index: 200;
}

.final-title {
    font-size: 65px;
    color: gold;
    font-weight: bold;
    animation: smash-in 0.6s ease-out, fade-out 0.5s ease-in 1.6s forwards;
}

.final-rule {
    font-size: 30px;
    color: #dddddd;
    animation: smash-in 0.6s ease-out, fade-out 0.5s ease-in 1.4s forwards;
}

@keyframes smash-in {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }

    20% {
        transform: scale(1.3);
        opacity: 1;
    }

    35% {
        transform: scale(0.95) translateY(-10%);
    }

    50% {
        transform: scale(1.05) translateY(5%);
    }

    65% {
        transform: scale(1) translateY(-2.5%);
    }

    80% {
        transform: scale(1) translateY(1.3%);
    }

    90% {
        transform: scale(1) translateY(-0.5%);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}


@keyframes fade-out {
    to {
        opacity: 0;
        transform: scale(0.7);
    }
}

@keyframes fadeScreenOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

.final-exit {
    animation: fadeScreenOut 0.8s ease-in forwards;
}

.final-progress-container {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 50px;
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 300;
    pointer-events: none;
}

@keyframes popup-bounce-robot {
    0% {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 0.5em)) scale(0.8);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, calc(-50% - 0.25em)) scale(1.05);
    }

    70% {
        transform: translate(-50%, calc(-50% + 0.125em)) scale(0.95);
    }

    100% {
        transform: translate(-50%, calc(-50% + 0)) scale(1);
    }
}

.final-countdown-progress {
    height: 100%;
    border-radius: inherit;
}

.final-robot .character-container {
    height: 100%;
}

.final-robot svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.final-robot {
    height: 100%;
    position: absolute;
    font-size: calc(0.03*var(--center-w));
    z-index: 10;
}

/* 并行结算回合：同一个弹窗容器，把角色形象换成机器人图标（正方形，尺寸跟高度走）。
   全场只有一个：固定金色 + 暖色辉光、不跟掷骰者变色 —— 结算回合没有「谁的回合」这回事。
   金色跟 `.final-title` 的 gold 同一色系，在黑色渐变背景上更显眼、也更像「结算」而不是「某人」。
   注意 Robot 图标主体用的是 currentColor，这里改 color 就够，不用碰 svg.js。 */
.parallel-robot {
    color: #ffd54a;
    filter: drop-shadow(0 0 4px rgba(255, 200, 60, .95)) drop-shadow(0 0 12px rgba(255, 170, 30, .6));
}

.parallel-robot>div {
    height: 100%;
    aspect-ratio: 1 / 1;
}

@media (max-width: 600px) {
    .final-container {
        height: 120px;
        width: 100vw;
    }

    .final-title {
        font-size: 40px;
    }

    .final-rule {
        font-size: 20px;
    }

}
/* 全屏遮罩层，居中对齐 */
.version-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    /* 深色半透明背景，带一点毛玻璃感会更好 */
    backdrop-filter: blur(5px);
    /* 可选：毛玻璃效果 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    /* 保证在最上层 */
}

/* 
  弹窗主容器 (核心比例控制)
  通过修改这里的 font-size，就能改变整个弹窗（包括内外边距、文字、圆角）的大小
*/
.version-modal {
    font-size: 16px;
    /* 桌面端基准大小 (可在此调整整体比例) */

    background-color: #3599b3;
    /* 匹配你深色主题的底色 */
    color: #e0e0e0;
    border-radius: 1.2em;
    /* em控制圆角 */
    padding: 2.5em 2em;
    /* em控制内边距 */
    width: 20em;
    /* em控制总宽度 */
    max-width: 90vw;
    text-align: center;
    box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

/* 警告图标 */
.version-icon {
    font-size: 4em;
    /* 很大 */
    line-height: 1;
    margin-bottom: 0.2em;
}

.version-icon img {
    height: 1.4em;
}

/* 标题 */
.version-title {
    font-size: 1.5em;
    margin: 0 0 1em 0;
    color: #ef7979;
    /* 红色警告色 */
    font-weight: 700;
}

/* 版本信息对比框 */
.version-info-box {
    background-color: rgb(6 58 108 / 30%);
    border-radius: 0.8em;
    padding: 1.2em;
    margin-bottom: 1.5em;
}

.version-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8em;
    font-size: 1.1em;
}

.version-row:last-child {
    margin-bottom: 0;
}

.version-label {
    color: #cbcbcb;
}

/* 版本号数字 */
.version-value {
    font-family: monospace;
    /* 适合显示数字和小数点 */
    font-weight: bold;
    padding: 0.2em 0.6em;
    border-radius: 0.4em;
}

.version-value.local {
    color: #ffb142;
    /* 橙色提示旧版本 */
}

.version-value.server {
    color: #33d9b2;
    /* 绿色提示新版本 */
}

/* 底部提示文字 */
.version-prompt {
    font-size: 1em;
    color: #ececec;
    line-height: 1.6;
    margin: 0;
}

/* === 移动端适配 === */
@media screen and (max-width: 768px) {
    .version-modal {
        /* 在手机上，把基准字号调小，整个弹窗会等比例缩小，不会崩坏 */
        font-size: 14px;
    }
}

@media screen and (max-width: 380px) {
    .version-modal {
        /* 极小屏幕进一步缩小基准比例 */
        font-size: 12px;
    }
}

/* 关闭按钮样式 */
.version-close-btn {
    margin-top: 1.5em;
    background-color: #f0ad4e;
    border: none;
    color: #1e2a3a;
    font-weight: bold;
    padding: 0.6em 1.2em;
    border-radius: 2em;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s, transform 0.1s;
}

.version-close-btn:hover {
    background-color: #ec971f;
}

.version-close-btn:active {
    transform: scale(0.97);
}