/* games-shell.css — 共享游戏外壳样式（排行榜 / 续局 / 评论区）
   使用 .gs- 前缀避免与各游戏自有样式冲突。
   颜色变量沿用全站 default 布局 (var(--color-ink) 等)。 */

/* 禁止合成假斜体（中文无意大利体），与全站 main.css 保持一致 */
body { font-synthesis: weight; }

/* ================== 排行榜 ================== */
.gs-leaderboard {
  margin-top: 1.5rem;
  padding: 0.9rem 1rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
}

/* 桌面宽屏：浮在主内容右侧空白处（对标合成大西瓜的浮动榜单）。
 * 不与主游戏重叠的最小视口 = 2 * (wrap-half + 296)
 *   2048/snake/pinball (560)   wrap-half=280  → 阈值 1180
 *   chess/gomoku/xiangqi (720) / fruit-ninja (600) wrap-half=360/300 → 1320
 *   leap/runner/feixingqi/tiaoqi (760) wrap-half=380 → 1360
 *   minesweeper (860) / doudizhu      wrap-half=430/410 → 1460
 * 用 right 锚点 + max() clamp，即使算出负 X 也保 1.2rem 安全边距，永远不会
 * 推出屏幕外。
 * 关键：每个 @media 只匹配该游戏 wrap 内部的 .gs-leaderboard——避免在视口
 * 不够时硬塞导致和主区重叠。
 * 注意：用 games-shell 排行榜的新游戏必须把自己的 wrap class 加进下面对应
 * 的 @media 块，否则榜单会一直堆在游戏正下方（不会自动浮动）。 */
@media (min-width: 1180px) {
  .g2048-wrap .gs-leaderboard,
  .sn-wrap    .gs-leaderboard,
  .pb-wrap    .gs-leaderboard {
    position: fixed; top: 6rem;
    right: max(1.2rem, calc(50vw - var(--gs-wrap-half, 280px) - 310px));
    width: 280px; max-height: calc(100vh - 8rem);
    overflow-y: auto; margin-top: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); z-index: 5;
  }
}
@media (min-width: 1320px) {
  .ch-wrap .gs-leaderboard,
  .gm-wrap .gs-leaderboard,
  .xq-wrap .gs-leaderboard,
  .fn-wrap .gs-leaderboard {
    position: fixed; top: 6rem;
    right: max(1.2rem, calc(50vw - var(--gs-wrap-half, 360px) - 310px));
    width: 280px; max-height: calc(100vh - 8rem);
    overflow-y: auto; margin-top: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); z-index: 5;
  }
}
@media (min-width: 1360px) {
  .leap-wrap   .gs-leaderboard,
  .runner-wrap .gs-leaderboard,
  .fxq-wrap    .gs-leaderboard,
  .tq-wrap     .gs-leaderboard {
    position: fixed; top: 6rem;
    right: max(1.2rem, calc(50vw - var(--gs-wrap-half, 380px) - 310px));
    width: 280px; max-height: calc(100vh - 8rem);
    overflow-y: auto; margin-top: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); z-index: 5;
  }
}
@media (min-width: 1460px) {
  .ms-wrap  .gs-leaderboard,
  .ddz-wrap .gs-leaderboard {
    position: fixed; top: 6rem;
    right: max(1.2rem, calc(50vw - var(--gs-wrap-half, 430px) - 310px));
    width: 280px; max-height: calc(100vh - 8rem);
    overflow-y: auto; margin-top: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); z-index: 5;
  }
}
.gs-lb-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.gs-lb-header h3 {
  font-size: 1rem;
  color: var(--color-ink);
  margin: 0;
  display: flex; align-items: baseline; gap: 0.5rem;
  font-weight: 600;
}
.gs-lb-total {
  font-size: 0.78rem;
  color: var(--color-muted);
  font-weight: normal;
}
.gs-lb-refresh {
  font: inherit; font-size: 0.95rem;
  font-family: var(--font-body);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-muted);
  cursor: pointer;
  transition: all 0.18s;
}
.gs-lb-refresh:hover { color: var(--color-accent); border-color: var(--color-accent); }
.gs-lb-refresh.gs-spinning { animation: gs-lb-spin 0.8s linear infinite; }
@keyframes gs-lb-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.gs-lb-list {
  list-style: none; padding: 0; margin: 0;
  font-variant-numeric: tabular-nums;
}
.gs-lb-list li {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4rem 0.2rem;
  border-bottom: 1px dashed var(--color-border);
  font-size: 0.88rem;
}
.gs-lb-list li:last-child { border-bottom: none; }
.gs-lb-list li.gs-lb-empty {
  grid-template-columns: 1fr;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.82rem;
  padding: 0.8rem 0;
}
.gs-lb-list .gs-lb-rank {
  color: var(--color-muted);
  font-size: 0.82rem;
  text-align: right;
}
.gs-lb-list li:nth-child(1) .gs-lb-rank { color: #d4a015; font-weight: 700; }
.gs-lb-list li:nth-child(2) .gs-lb-rank { color: #9aa0a6; font-weight: 700; }
.gs-lb-list li:nth-child(3) .gs-lb-rank { color: #b87333; font-weight: 700; }
.gs-lb-list .gs-lb-nick {
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.gs-lb-list .gs-lb-score {
  font-family: var(--font-display);
  color: var(--color-highlight);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: right;
}
.gs-lb-list .gs-lb-time {
  grid-column: 2 / 4;
  font-size: 0.72rem;
  color: var(--color-muted);
  margin-top: 0.1rem;
}
.gs-lb-list li.gs-is-self {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(240, 198, 116, 0.18) 30%,
    rgba(240, 198, 116, 0.18) 70%,
    transparent 100%);
  border-radius: 6px;
  padding-left: 0.5rem; padding-right: 0.5rem;
}
.gs-lb-list li.gs-is-self .gs-lb-nick { font-weight: 600; }

/* wins-leaderboard 专用：H/M/E 三档胜场 */
.gs-wlb-row { grid-template-columns: 2.2rem 1fr auto !important; }
.gs-wlb-tally {
  font-family: var(--font-display);
  font-size: 0.86rem !important;
  color: var(--color-ink) !important;
  font-weight: 600;
}
.gs-wlb-tally span[title="hard"]   { color: #d32f2f; }
.gs-wlb-tally span[title="normal"] { color: #d4a015; }
.gs-wlb-tally span[title="easy"]   { color: #5fa66e; }

/* 难度 / 模式 tab —— 仿 Suika basic/fountain/unlimited */
.gs-lb-tabs {
  display: flex;
  gap: 0.3rem;
  margin: 0 0 0.6rem;
  flex-wrap: wrap;
}
.gs-lb-tab {
  font: inherit; font-size: 0.78rem;
  font-family: var(--font-body);
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-muted);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.gs-lb-tab:hover { border-color: var(--color-accent); color: var(--color-ink); }
.gs-lb-tab.gs-lb-tab-active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  font-weight: 600;
}

.gs-lb-mine {
  margin: 0 0 0.6rem;
  padding: 0.55rem 0.7rem;
  background: linear-gradient(135deg,
    rgba(240, 198, 116, 0.12),
    rgba(240, 198, 116, 0.04));
  border: 1px solid rgba(240, 198, 116, 0.35);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--color-ink);
  line-height: 1.5;
}
.gs-lb-mine .gs-lb-mine-label {
  color: var(--color-muted);
  font-size: 0.78rem;
}
.gs-lb-mine .gs-lb-mine-line {
  display: block;
  margin-top: 0.15rem;
}
.gs-lb-mine strong {
  color: var(--color-highlight);
  font-weight: 700;
}
.gs-lb-mine .gs-lb-mine-meta {
  color: var(--color-muted);
  font-size: 0.72rem;
  margin-top: 0.1rem;
  display: block;
}

.gs-lb-controls {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: center;
}
.gs-lb-expand {
  font: inherit; font-size: 0.78rem;
  font-family: var(--font-body);
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-muted);
  cursor: pointer;
  transition: all 0.18s;
}
.gs-lb-expand:hover { border-color: var(--color-accent); color: var(--color-accent); }
.gs-lb-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--color-muted);
}
.gs-lb-pgbtn {
  font: inherit; font-size: 0.76rem;
  font-family: var(--font-body);
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-muted);
  cursor: pointer;
  transition: all 0.18s;
}
.gs-lb-pgbtn:hover:not(:disabled) {
  border-color: var(--color-accent); color: var(--color-accent);
}
.gs-lb-pgbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.gs-lb-pginfo {
  font-variant-numeric: tabular-nums;
  min-width: 3rem; text-align: center;
}
.gs-lb-footer {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: var(--color-muted);
  text-align: center;
}

/* ================== 续局浮层 ================== */
.gs-resume-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 20, 20, 0.55);
  display: none;
  align-items: center; justify-content: center;
  z-index: 9000;
  padding: 1rem;
}
.gs-resume-overlay.gs-open { display: flex; animation: gs-fade-in 200ms ease-out; }
@keyframes gs-fade-in { from { opacity: 0; } to { opacity: 1; } }
.gs-resume-card {
  max-width: 360px;
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.6rem 1.4rem 1.4rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.gs-resume-card .gs-resume-icon {
  font-size: 2.6rem; line-height: 1;
  margin-bottom: 0.4rem;
}
.gs-resume-card h2 {
  font-size: 1.3rem;
  margin: 0 0 0.4rem;
  color: var(--color-ink);
}
.gs-resume-summary {
  font-size: 0.92rem;
  color: var(--color-ink);
  margin: 0.6rem 0 1.2rem;
  line-height: 1.55;
}
.gs-resume-summary strong {
  color: var(--color-highlight);
  font-weight: 700;
}
.gs-resume-summary .gs-resume-meta {
  display: block;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 0.3rem;
}
.gs-resume-card button {
  font: inherit;
  font-family: var(--font-body);
  width: 100%;
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: all 0.18s;
}
.gs-resume-card .gs-resume-primary {
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
  font-weight: 600;
}
.gs-resume-card .gs-resume-primary:hover { filter: brightness(1.05); }
.gs-resume-card .gs-resume-secondary {
  background: var(--color-bg);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
}
.gs-resume-card .gs-resume-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }
.gs-resume-card .gs-resume-discard {
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 0.82rem;
  margin-top: 0.6rem;
  text-decoration: underline;
}
.gs-resume-card .gs-resume-discard:hover { color: var(--color-ink); }

/* ================== 昵称提交浮层 ================== */
.gs-nick-form {
  display: none;
  margin: 0.8rem 0;
  padding: 0.8rem 0.9rem;
  background: var(--color-bg-warm, var(--color-bg));
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-align: left;
}
.gs-nick-form.gs-open { display: block; }
.gs-nick-form .gs-nick-prompt {
  font-size: 0.92rem;
  color: var(--color-ink);
  margin-bottom: 0.3rem;
  font-weight: 600;
}
.gs-nick-form .gs-nick-privacy {
  font-size: 0.74rem;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
.gs-nick-form input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--color-bg);
  color: var(--color-ink);
  margin-bottom: 0.4rem;
}
.gs-nick-form input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.gs-nick-form .gs-nick-error {
  font-size: 0.78rem;
  color: #c0392b;
  min-height: 1em;
  margin-bottom: 0.5rem;
}
.gs-nick-form .gs-nick-buttons {
  display: flex; gap: 0.5rem; justify-content: flex-end;
}
.gs-nick-form button {
  font: inherit; font-size: 0.84rem;
  font-family: var(--font-body);
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s;
}
.gs-nick-form .gs-nick-skip {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-muted);
}
.gs-nick-form .gs-nick-skip:hover { color: var(--color-ink); border-color: var(--color-ink); }
.gs-nick-form .gs-nick-submit {
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
  font-weight: 600;
}
.gs-nick-form .gs-nick-submit:hover { filter: brightness(1.05); }
.gs-nick-tag {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 0.4rem;
}
.gs-nick-tag strong { color: var(--color-ink); }
.gs-nick-tag a {
  color: var(--color-accent);
  cursor: pointer;
  text-decoration: underline;
  margin-left: 0.4rem;
}

/* ================== 评论区 ================== */
.gs-comments-wrap {
  margin-top: 2.5rem;
  padding-top: 1.6rem;
  border-top: 1px dashed var(--color-border);
  display: none;
}
.gs-comments-wrap.gs-loaded { display: block; }
.gs-comments-wrap h3 {
  font-size: 1.15rem;
  color: var(--color-ink);
  margin-bottom: 0.4rem;
}
.gs-comments-intro {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin-bottom: 1rem;
  line-height: 1.55;
}
.gs-comments-mount .wl-avatar,
.gs-comments-mount img.wl-avatar,
.gs-comments-mount .wl-badge-wrap { display: none !important; }
.gs-comments-mount .wl-panel { padding-left: 0.6rem; }
.gs-comments-mount .wl-header { margin-left: 0 !important; }
@media (max-width: 600px) {
  .gs-comments-mount [data-waline-field="mail"],
  .gs-comments-mount [data-waline-field="link"] { display: none !important; }
  .gs-comments-mount [data-waline-field="nick"] { flex: 1 1 auto; }
  .gs-comments-mount .wl-header { flex-wrap: wrap !important; }
}

/* ================== 调参面板（settings-panel.js 渲染） ================== */
.gs-settings { display: flex; flex-direction: column; gap: 0.7rem; }
.gs-settings-row {
  padding: 0.6rem 0.7rem;
  background: var(--color-bg-warm, var(--color-bg));
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.gs-settings-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.gs-settings-head label {
  font-size: 0.92rem;
  color: var(--color-ink);
  font-weight: 600;
}
.gs-settings-desc {
  font-size: 0.8rem;
  color: var(--color-muted);
}
.gs-settings-row input[type="range"] {
  width: 100%;
  margin: 0;
}
.gs-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 0.5rem;
}
.gs-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.gs-toggle-slider {
  display: inline-block;
  width: 38px; height: 22px;
  background: var(--color-border);
  border-radius: 999px;
  position: relative;
  transition: background 0.18s;
}
.gs-toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.gs-toggle input:checked + .gs-toggle-slider { background: var(--color-accent); }
.gs-toggle input:checked + .gs-toggle-slider::after { transform: translateX(16px); }

.gs-segment {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}
.gs-segment-btn {
  font: inherit; font-size: 0.84rem;
  font-family: var(--font-body);
  padding: 0.32rem 0.7rem;
  border: none;
  background: var(--color-bg);
  color: var(--color-muted);
  cursor: pointer;
  border-right: 1px solid var(--color-border);
  transition: all 0.15s;
}
.gs-segment-btn:last-child { border-right: none; }
.gs-segment-btn:hover:not(.gs-active) { color: var(--color-ink); }
.gs-segment-btn.gs-active {
  background: var(--color-accent);
  color: #fff;
}

/* ================== 结算图（settlement.js） ================== */
/* 触发按钮：挂在排行榜下方的 settle-btn-mount 容器里 */
.gs-settle-btn {
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.84rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.6rem auto 0;
  padding: 0.45rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg);
  color: var(--color-ink);
  cursor: pointer;
  transition: all 0.18s;
}
.gs-settle-btn:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.gs-settle-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.gs-settle-btn-emoji { font-size: 0.95rem; line-height: 1; }
/* 让按钮在父 container 里居中 */
[id$="settle-btn-mount"] {
  display: flex;
  justify-content: center;
}

/* 浮层 */
.gs-settle-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 20, 20, 0.6);
  display: none;
  align-items: center; justify-content: center;
  z-index: 9100;
  padding: 1rem;
  overflow-y: auto;
}
.gs-settle-overlay.gs-open {
  display: flex;
  animation: gs-fade-in 220ms ease-out;
}
.gs-settle-card {
  max-width: 420px;
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1rem 1rem 1.1rem;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  margin: auto;
}
.gs-settle-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.gs-settle-tip {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin: 0.7rem 0 0.9rem;
  line-height: 1.5;
}
.gs-settle-actions {
  display: flex;
  gap: 0.55rem;
  justify-content: center;
  flex-wrap: wrap;
}
.gs-settle-actions button {
  font: inherit; font-size: 0.88rem;
  font-family: var(--font-body);
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s;
}
.gs-settle-primary {
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
  font-weight: 600;
}
.gs-settle-primary:hover { filter: brightness(1.05); }
.gs-settle-secondary {
  background: var(--color-bg);
  color: var(--color-ink);
  border: 1px solid var(--color-border);
}
.gs-settle-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ================== 预进入界面（Pre-game Overlay） ================== */
/* 参照 Suika 的 game-overlay 模式：绝对定位浮层盖在 game-zone canvas 上，
   四视图切换（main / settings / resume）。
   使用 .gs-pgo- 前缀，所有游戏共用，每个游戏在 own overlay 内填各自内容。 */

.gs-pgo-overlay {
  position: absolute; inset: 0;
  background: rgba(20, 25, 30, 0.78);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
  color: #fff;
  padding: 2rem 1.5rem;
  text-align: center;
  z-index: 10;
  overflow-y: auto;
}
.gs-pgo-overlay.open { display: flex; }

.gs-pgo-view { display: none; flex-direction: column; align-items: center; width: 100%; }
.gs-pgo-view.active { display: flex; }

.gs-pgo-icon {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.gs-pgo-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.4rem;
}

.gs-pgo-subtitle {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.55;
}

.gs-pgo-highscore {
  margin-bottom: 1rem;
  padding: 0.6rem 1.2rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}
.gs-pgo-highscore .gs-pgo-hs-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-highlight);
  line-height: 1;
}
.gs-pgo-highscore .gs-pgo-hs-label {
  font-family: var(--font-body);
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gs-pgo-start-btn {
  font: inherit;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.7rem 2.4rem;
  border: none;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s, filter 0.18s;
}
.gs-pgo-start-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.gs-pgo-start-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.gs-pgo-settings-link {
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  background: none;
  border: none;
  cursor: pointer;
  margin-top: 0.7rem;
  padding: 0.3rem 0.6rem;
  transition: color 0.18s;
  text-decoration: underline;
}
.gs-pgo-settings-link:hover { color: rgba(255, 255, 255, 0.9); }

/* 返回链接（从 settings 返回 main） */
.gs-pgo-back-link {
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  background: none;
  border: none;
  cursor: pointer;
  margin-top: 0.5rem;
  padding: 0.3rem 0.6rem;
  transition: color 0.18s;
}
.gs-pgo-back-link:hover { color: rgba(255, 255, 255, 0.9); }

/* 模式选择器 — 仿 Suika 的 .mode-picker 暗底 pill */
.gs-pgo-mode-picker {
  display: inline-flex;
  gap: 0.25rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
}
.gs-pgo-mode-tab {
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 0.4rem 0.9rem;
  border: none;
  background: transparent;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  white-space: nowrap;
  line-height: 1;
}
.gs-pgo-mode-tab:hover { color: rgba(255, 255, 255, 0.9); }
.gs-pgo-mode-tab.selected {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  font-weight: 600;
}

.gs-pgo-mode-desc {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 1rem;
  min-height: 1.2em;
}

/* 多模式网格（6 模式用 2 列 3 行 + 十字轴） */
.fn-pgo-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  max-width: 340px;
  margin: 0 auto 0.8rem;
  position: relative;
  padding: 0.5rem 0;
}
.fn-pgo-mode-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,
      transparent calc(50% - 0.5px),
      rgba(255,255,255,0.10) calc(50% - 0.5px),
      rgba(255,255,255,0.10) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)),
    linear-gradient(to bottom,
      transparent calc(33.3% - 0.5px),
      rgba(255,255,255,0.10) calc(33.3% - 0.5px),
      rgba(255,255,255,0.10) calc(33.3% + 0.5px),
      transparent calc(33.3% + 0.5px)),
    linear-gradient(to bottom,
      transparent calc(66.7% - 0.5px),
      rgba(255,255,255,0.10) calc(66.7% - 0.5px),
      rgba(255,255,255,0.10) calc(66.7% + 0.5px),
      transparent calc(66.7% + 0.5px));
}

/* 设置视图 */
.gs-pgo-settings-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.8rem;
}
.gs-pgo-settings-body {
  width: 100%;
  max-width: 380px;
  text-align: left;
}
/* settings 视图内复用 .gs-settings 的浅色卡片，在暗底上做白字适配 */
.gs-pgo-settings-body .gs-settings-row {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.gs-pgo-settings-body .gs-settings-head label { color: rgba(255, 255, 255, 0.9); }
.gs-pgo-settings-body .gs-settings-desc { color: rgba(255, 255, 255, 0.55); }
.gs-pgo-settings-body .gs-segment {
  border-color: rgba(255, 255, 255, 0.18);
}
.gs-pgo-settings-body .gs-segment-btn {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
}
.gs-pgo-settings-body .gs-segment-btn.gs-active {
  background: var(--color-accent);
  color: #fff;
}
.gs-pgo-settings-body .gs-toggle-slider {
  background: rgba(255, 255, 255, 0.2);
}

/* Resume 视图 */
.gs-pgo-resume-summary {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0.6rem 0 1.2rem;
  line-height: 1.55;
}
.gs-pgo-resume-summary strong {
  color: var(--color-highlight);
  font-weight: 700;
}
.gs-pgo-resume-summary .gs-pgo-resume-meta {
  font-family: var(--font-body);
  display: block;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 0.3rem;
}

.gs-pgo-resume-discard {
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.82rem;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  margin-top: 0.5rem;
  text-decoration: underline;
  transition: color 0.18s;
}
.gs-pgo-resume-discard:hover { color: rgba(255, 255, 255, 0.8); }

/* 房间 UI */
.gs-pgo-room-tabs {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.gs-pgo-room-tab {
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.gs-pgo-room-tab + .gs-pgo-room-tab {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
.gs-pgo-room-tab:hover { color: rgba(255, 255, 255, 0.9); }
.gs-pgo-room-tab.selected {
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
}

.gs-pgo-room-panel {
  width: 100%;
  max-width: 340px;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.gs-pgo-room-panel.active { display: flex; }

.gs-pgo-room-input {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.9rem;
  text-align: center;
}
.gs-pgo-room-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.gs-pgo-room-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.gs-pgo-room-btn {
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  width: 100%;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: all 0.18s;
}
.gs-pgo-room-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.4); }
.gs-pgo-room-btn.primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.gs-pgo-room-btn.primary:hover { filter: brightness(1.05); }
.gs-pgo-room-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.gs-pgo-room-code {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}
.gs-pgo-room-code strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: #fff;
  letter-spacing: 0.12em;
}

.gs-pgo-room-copy-btn {
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  transition: color 0.18s;
}
.gs-pgo-room-copy-btn:hover { color: #fff; }

/* 房间邀请二维码（GamesShell.QR 渲染的 canvas）—— 8 个联机游戏共用 */
.gs-room-qr { display: flex; justify-content: center; margin: 0.7rem 0 0.3rem; }
.gs-room-qr canvas { border-radius: 8px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); }

.gs-pgo-room-players {
  font-family: var(--font-body);
  width: 100%;
  list-style: none;
  padding: 0; margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
}
.gs-pgo-room-players li {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.gs-pgo-room-players li:last-child { border-bottom: none; }
.gs-pgo-room-players .gs-pgo-room-host-badge {
  font-size: 0.7rem;
  background: var(--color-accent);
  color: #fff;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
}

.gs-pgo-room-error {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: #ef5350;
  min-height: 1.2em;
}

/* 房间内小按钮：踢人、排序 */
[class*="-room-kick"] {
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.72rem;
  margin-left: auto;
  padding: 0.1rem 0.35rem;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.15s;
}
[class*="-room-kick"]:hover { background: rgba(239, 68, 68, 0.4); color: #fff; }

[class*="-room-act"] {
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.65rem;
  padding: 0.05rem 0.35rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.15s;
  margin-right: 0.2rem;
}
[class*="-room-act"]:hover { border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.8); }

/* 本地玩家配置区（feixingqi/tiaoqi chip 选择等） */
.gs-pgo-local-config {
  width: 100%;
  max-width: 400px;
  margin-bottom: 0.8rem;
}
.gs-pgo-local-config .gs-pgo-config-label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.4rem;
}
/* 4-corner 默认：2×2 网格 + 十字坐标轴 */
.gs-pgo-config-chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  justify-items: center;
  align-items: center;
  max-width: 320px;
  margin: 0 auto;
  position: relative;
  padding: 0.5rem 0;
}
/* 十字坐标轴 */
.gs-pgo-config-chips::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(to right,
      transparent calc(50% - 0.5px),
      rgba(255,255,255,0.10) calc(50% - 0.5px),
      rgba(255,255,255,0.10) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)),
    linear-gradient(to bottom,
      transparent calc(50% - 0.5px),
      rgba(255,255,255,0.10) calc(50% - 0.5px),
      rgba(255,255,255,0.10) calc(50% + 0.5px),
      transparent calc(50% + 0.5px));
}
/* 6-corner 变体：3 列 */
.gs-pgo-config-chips.cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.gs-pgo-config-chip {
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.gs-pgo-config-chip:hover { border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.85); }
.gs-pgo-config-chip.human {
  background: rgba(76, 175, 80, 0.3);
  border-color: rgba(76, 175, 80, 0.5);
  color: #a5d6a7;
}
.gs-pgo-config-chip.ai {
  background: rgba(255, 152, 0, 0.25);
  border-color: rgba(255, 152, 0, 0.45);
  color: #ffcc80;
}
.gs-pgo-config-chip.empty {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.25);
}

/* 游戏规则说明（在 overlay 底部） */
.gs-pgo-rules {
  margin-top: 0.8rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.55;
  max-width: 380px;
}

/* 响应式：小屏缩小间距 */
@media (max-width: 480px) {
  .gs-pgo-overlay { padding: 1.5rem 1rem; }
  .gs-pgo-icon { font-size: 2.8rem; }
  .gs-pgo-title { font-size: 1.4rem; }
  .gs-pgo-subtitle { font-size: 0.82rem; }
  .gs-pgo-start-btn { font-size: 0.92rem; padding: 0.6rem 1.8rem; }
  .gs-pgo-mode-tab { font-size: 0.78rem; padding: 0.35rem 0.7rem; }
  .gs-pgo-room-tab { font-size: 0.78rem; padding: 0.35rem 0.7rem; }
}

/* ── 房间参数设置 ── */
.fn-room-params {
  width: 100%;
  margin-bottom: 0.8rem;
  padding: 0.6rem 0.7rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  text-align: left;
}
.fn-room-params-label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.fn-room-params-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.fn-room-params-row:last-child { margin-bottom: 0; }
.fn-room-params-key {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}
.fn-room-params-row .gs-pgo-mode-picker {
  margin-bottom: 0;
}

/* 历史配置 profile */
.fn-room-profiles {
  width: 100%;
  margin-bottom: 0.6rem;
  text-align: left;
}
.fn-room-profile-chip {
  display: inline-block;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.74rem;
  padding: 0.3rem 0.6rem;
  margin: 0.15rem 0.25rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: all 0.15s;
}
.fn-room-profile-chip:hover {
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.08);
}

/* 表决框 */
.fn-vote-box {
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  margin-bottom: 0.3rem;
}

/* 表决按钮：莫兰迪绿 / 莫兰迪赤陶，跨游戏（tiaoqi / feixingqi / ...）统一从这里取色。
   过去各游戏 inline 写死 #4caf50 / #ef5350 鲜艳红绿，跟全站莫兰迪基调冲突。 */
.gs-vote-yes,
.gs-vote-no {
  color: #fff;
  cursor: pointer;
  transition: filter 0.15s;
}
.gs-vote-yes { background: #7d9c80; border-color: #7d9c80; }
.gs-vote-no  { background: #b07c75; border-color: #b07c75; }
.gs-vote-yes:hover { filter: brightness(1.08); }
.gs-vote-no:hover  { filter: brightness(1.08); }