/* 玩家前台共享 UI — 素净易读：灰白底、单强调色、字重克制 */
:root {
  --ga-muted: #f2f2f3;
  --ga-card: #ffffff;
  --ga-line: #e4e4e7;
  --ga-line-2: #d4d4d8;
  --ga-txt-1: #18181b;
  --ga-txt-2: #3f3f46;
  --ga-txt-3: #71717a;
  --ga-indigo: #3f5f7a;
  --ga-indigo-2: #547896;
  --ga-green: #3d7a5a;
  --ga-amber: #9a7040;
  --ga-red: #b54a4a;
  --ga-radius: 4px;
  --ga-radius-sm: 3px;
  --ga-shadow-sm: none;
  --ga-font: "Microsoft YaHei UI", "PingFang SC", "Segoe UI", "Noto Sans SC", sans-serif;
}

html, body.player-page { height: 100%; }
body.player-page {
  margin: 0;
  font-family: var(--ga-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--ga-txt-1);
  background: var(--ga-muted);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.player-page .app { min-height: 100%; display: flex; flex-direction: column; }

/* 顶栏 */
body.player-page .topbar {
  background: #fff;
  border-bottom: 1px solid var(--ga-line);
  padding: 0 20px;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 50;
}
body.player-page .topbar .brand { display: flex; align-items: center; gap: 10px; }
body.player-page .topbar .brand .bm {
  width: 26px; height: 26px; border-radius: 3px;
  background: var(--ga-indigo);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 12px;
}
body.player-page .topbar .brand .bt {
  font-weight: 600; font-size: 14px; color: var(--ga-txt-1); letter-spacing: 0;
}
body.player-page .topbar .brand .bs {
  font-size: 12px; color: var(--ga-txt-3); font-weight: 400;
}
body.player-page .topbar .chip.expiry-chip,
.expiry-chip {
  color: var(--ga-txt-2);
  background: #f8fafc;
  border: 1px solid var(--ga-line);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body.player-page .topbar .nav-link,
body.player-page .topbar .nav-btn {
  color: var(--ga-txt-2); text-decoration: none; font-size: 13px;
  padding: 5px 11px; border-radius: 3px; border: 1px solid var(--ga-line);
  background: #fff; cursor: pointer; font-family: inherit;
}
body.player-page .topbar .nav-link:hover,
body.player-page .topbar .nav-btn:hover {
  background: #f4f4f5; color: var(--ga-txt-1);
}

/* 登录页 */
body.player-login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
  background:
    radial-gradient(1200px 480px at 50% -10%, rgba(63, 95, 122, 0.12), transparent 60%),
    linear-gradient(180deg, #eef1f4 0%, #f4f5f6 42%, #eceef1 100%);
}
.login-shell {
  width: min(420px, 100%);
  max-width: 100%;
  box-sizing: border-box;
}
body.player-page .ck-panel.ck-login {
  margin: 0;
  border-radius: 10px;
  border-color: #d9dde3;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 10px 28px rgba(24, 32, 40, 0.08);
  overflow: hidden;
}
body.player-login-page .ck-panel.ck-login .ck-hd {
  padding: 16px 18px 12px;
  background: transparent;
  border-bottom: none;
}
body.player-login-page .ck-panel.ck-login .ck-title {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0.02em;
}
body.player-login-page .ck-panel.ck-login .ck-bd {
  padding: 4px 18px 18px;
}
body.player-login-page .ck-label {
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ga-txt-3);
}
body.player-login-page .ck-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
body.player-login-page .ck-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  border-color: #cfd5dc;
  font-size: 15px;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.player-login-page .ck-input:focus {
  border-color: var(--ga-indigo);
  box-shadow: 0 0 0 3px rgba(63, 95, 122, 0.14);
}
body.player-login-page .ck-btn {
  width: 100%;
  height: 44px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
body.player-login-page .ck-btn:hover {
  transform: translateY(-1px);
}
body.player-login-page .ck-btn:active {
  transform: translateY(0);
}
body.player-login-page .ck-hint {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f6f7f9;
  border: 1px solid #e6e9ee;
  color: var(--ga-txt-3);
  font-size: 12px;
  line-height: 1.65;
}
body.player-login-page .ck-hint strong {
  color: var(--ga-txt-2);
  font-weight: 600;
}
body.player-login-page .ck-error {
  margin-top: 10px;
  min-height: 0;
  word-break: break-word;
}
body.player-login-page .ck-panel.verified {
  border-radius: 10px;
  padding: 16px 18px;
}
body.player-login-page .ck-verified-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
body.player-login-page .ck-verified-row .ck-expiry {
  margin-left: 0;
}
body.player-login-page #siteLicenseBanner {
  margin: 0 0 12px;
  border-radius: 8px;
  box-sizing: border-box;
}

.topbar .spacer { flex: 1; }
.topbar .nav-link {
  color: var(--ga-txt-2);
  text-decoration: none;
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 3px;
  border: 1px solid var(--ga-line);
  background: #fff;
  white-space: nowrap;
}
.topbar .nav-link:hover {
  background: #f4f4f5;
  color: var(--ga-txt-1);
}
.topbar .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--ga-txt-2);
  background: #f4f4f5;
  border: 1px solid var(--ga-line);
  white-space: nowrap;
  font-weight: 400;
}
.topbar .chip .d {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ga-txt-3);
}
.topbar .chip.ok {
  background: #f3f6f4;
  color: #3d5c48;
  border-color: #d5e0d8;
}
.topbar .chip.ok .d { background: var(--ga-green); }

#siteLicenseBanner {
  margin: 12px 20px 0;
  padding: 10px 12px;
  border-radius: 3px;
  border: 1px solid #e8d0d0;
  background: #faf6f6;
  color: #8a4545;
  font-size: 13px;
  line-height: 1.6;
}

/* 卡密面板 */
body.player-page .ck-panel {
  background: #fff;
  border: 1px solid var(--ga-line);
  border-radius: 4px;
  margin: 12px 20px 0;
  overflow: hidden;
}
body.player-page .ck-panel.verified {
  border-color: #d5e0d8;
  background: #f7faf8;
}
.ck-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--ga-line);
  background: #fafafa;
}
.ck-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--ga-txt-1);
}
body.player-page .ck-panel.verified .ck-title { color: var(--ga-green); }
.ck-expiry {
  margin-left: auto;
  font-size: 12px;
  color: var(--ga-txt-3);
}
.ck-bd { padding: 14px; }
.ck-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.ck-input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ga-line-2);
  border-radius: 3px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ga-txt-1);
  background: #fff;
  outline: none;
}
.ck-input:focus { border-color: var(--ga-indigo); }
.ck-btn {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--ga-indigo);
  border-radius: 3px;
  background: var(--ga-indigo);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.ck-btn:hover { background: var(--ga-indigo-2); border-color: var(--ga-indigo-2); }
.ck-btn:disabled { opacity: .5; cursor: not-allowed; }
.ck-error {
  color: var(--ga-red);
  font-size: 13px;
  margin-top: 8px;
  min-height: 18px;
  line-height: 1.5;
}
.ck-hint {
  color: var(--ga-txt-3);
  font-size: 12px;
  margin-top: 8px;
  line-height: 1.65;
}
.ck-hint a { color: var(--ga-indigo); text-decoration: none; }
.ck-hint a:hover { text-decoration: underline; }
.ck-reset {
  padding: 5px 12px;
  background: #fff;
  border: 1px solid var(--ga-line);
  border-radius: 3px;
  color: var(--ga-txt-2);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.ck-reset:hover { background: #f4f4f5; }
.ck-verified-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.ck-verified-msg {
  flex: 1;
  color: var(--ga-txt-2);
  font-size: 13px;
  line-height: 1.6;
}

/* 弹窗（SaaS 807937 经验：默认不占位；只有真弹窗时才出现全屏蒙板）
   旧规则 .ga-dialog-mask 默认 display:flex 但父 #gaDialogRoot 在 ensureDialogMount 后留空 innerHTML 也会存在 →
   某些浏览器/Webkit 下虽然没子节点的 .ga-dialog-mask 其实不存在，但 root 若被全局 CSS 覆盖成 flex/或老版本 player-ui.css (buildver<20260826f) 缺少 #gaDialogRoot:none，
   更关键：旧版本 common.js ensureDialogMount() 后若 showGoAlert 立即报错抛异常（hydrate/迁移/cardKeyVerified false）导致 root.innerHTML 虽然赋值但下一步报错 mask 没删干净 → 全屏透明层 z-index:2^31 覆盖 /self 左栏三块
   → 现象：顶栏（退出登录）能点，下面三块死。正是你现在的反馈！
   另外 iOS < 15.4 不支持 :has()，因此双保险：父级默认 display:none；子 mask 也默认 display:none；真正弹窗时 common.js 会给 .ga-dialog-mask 加 is-open class 触发可见。
*/
#createRoomModalHost:empty { display:none !important; pointer-events:none !important; height:0; overflow:hidden; }
#createRoomModalHost .modal-mask { z-index:9000; }
/* 左栏操作区：强制可点（高于任何残留层） */
body.go-page #selfControlsRoot { position:relative; z-index:100; isolation:isolate; }
body.go-page #selfControlsRoot .pool-card,
body.go-page #selfControlsRoot .map-card,
body.go-page #selfControlsRoot #btnOpen {
  cursor:pointer !important;
  pointer-events:auto !important;
  touch-action:manipulation;
}
body.go-page #selfControlsRoot .pool-card:active,
body.go-page #selfControlsRoot .map-card:active,
body.go-page #selfControlsRoot #btnOpen:active { transform:scale(0.98); }
#gaDialogRoot.has-open-dialog,
#gaDialogRoot:has(> .ga-dialog-mask.is-open) { display: block !important; pointer-events: auto !important; }
#gaDialogRoot.empty { display: none !important; pointer-events: none !important; }
.ga-dialog-mask {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: rgba(24, 24, 27, .4);
  /* 默认 display:none；只有 common.js 弹窗赋值 is-open 时 flex，
     防止空占位 mask / :has 不兼容老 iOS 场景下透明全屏拦截点击 */
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.ga-dialog-mask.is-open,
.ga-dialog-mask[data-open="true"] {
  display: flex;
}
/* 额外兜底：若 #gaDialogRoot 里没有任何可交互 .ga-dialog 子节点，则 mask 必须彻底释放点击，
   作为最后一层保险，即便上游 setAttribute/is-open 因异常跳过，也不会挡住 /self 三块 */
#gaDialogRoot:not(:has(> .ga-dialog-mask.is-open > .ga-dialog)) > .ga-dialog-mask {
  display: none !important;
  pointer-events: none !important;
}
.ga-dialog {
  width: min(420px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--ga-line);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(24, 24, 27, .12);
  overflow: hidden;
  font-family: var(--ga-font);
}
.ga-dialog .gd-hd {
  padding: 16px 16px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ga-dialog .gd-ic {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--ga-indigo);
}
.ga-dialog .gd-ic.ok { background: var(--ga-green); }
.ga-dialog .gd-ic.err { background: var(--ga-red); }
.ga-dialog .gd-ic.warn { background: var(--ga-amber); }
.ga-dialog .gd-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ga-txt-1);
  line-height: 1.4;
}
.ga-dialog .gd-bd {
  padding: 4px 16px 16px 56px;
  color: var(--ga-txt-2);
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.ga-dialog .gd-ft {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--ga-line);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  background: #fafafa;
}
.ga-dialog .gd-ft .ga-btn {
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ga-line-2);
  background: #fff;
  color: var(--ga-txt-1);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  user-select: none;
}
.ga-dialog .gd-ft .ga-btn:hover { background: #f4f4f5; }
.ga-dialog .gd-ft .ga-btn.primary {
  min-width: 72px;
  background: var(--ga-indigo);
  color: #fff;
  border-color: var(--ga-indigo);
}
.ga-dialog .gd-ft .ga-btn.primary:hover {
  background: var(--ga-indigo-2);
  border-color: var(--ga-indigo-2);
}

body.player-page .ck-panel.ck-inline { margin: 0; }

.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.15em;
  flex-shrink: 0;
  color: currentColor;
}
.ico svg { width: 100%; height: 100%; display: block; }
.ico-sm { width: 14px; height: 14px; }
.ico-md { width: 16px; height: 16px; }
.ico-lg { width: 18px; height: 18px; }
.ico-xl { width: 20px; height: 20px; }
.ico-title { width: 16px; height: 16px; margin-right: 5px; color: var(--ga-txt-3); }
body.player-page .ck-panel.verified .ico-title { color: var(--ga-green); }
.tb-btn .ico, .btn .ico, .ck-btn .ico, .ga-btn .ico { margin-right: 4px; }
.sb-icon.ico { width: 16px; height: 16px; margin-right: 8px; }
.es-icon.ico { width: 32px; height: 32px; margin: 0 auto 8px; color: var(--ga-txt-3); }
.stat-icon.ico { width: 22px; height: 22px; color: var(--ga-txt-3); }
.ga-dialog .gd-ic svg { width: 16px; height: 16px; }
.card-title .ico, .ic-title .ico, .ck-title .ico { margin-right: 5px; vertical-align: -3px; }

@media (max-width: 768px) {
  body.player-page .ck-panel { margin: 12px 12px 0; }
  #siteLicenseBanner { margin: 12px 12px 0; }
  .ck-row { flex-direction: column; align-items: stretch; }
  .ck-btn { width: 100%; }
}