.platform-dialog {
  color: var(--text, #e9edf3);
  background: var(--panel, #191e27);
  border: 1px solid #303847;
  border-radius: 18px;
  width: min(460px, calc(100vw - 28px));
  max-height: 90dvh;
  padding: 22px;
  box-shadow: 0 24px 80px #0008;
  overflow: auto;
}
.platform-dialog::backdrop {
  background: #05080cb3;
  backdrop-filter: blur(4px);
}
.platform-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.platform-dialog h2 {
  font-size: 19px;
  margin: 0;
}
.dialog-close {
  font-size: 24px;
  background: transparent !important;
  border: 0 !important;
  color: inherit;
  padding: 0 8px !important;
}
.platform-dialog input {
  font-size: 16px !important;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.platform-dialog form {
  display: grid;
  gap: 14px;
}
.platform-dialog label {
  display: grid;
  gap: 8px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}
.country-options {
  max-height: 50dvh;
  overflow: auto;
  margin-top: 12px;
  display: grid;
  gap: 4px;
}
.country-option {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0 !important;
  background: transparent !important;
  color: inherit;
  width: 100%;
  padding: 12px !important;
  text-align: left;
  border-radius: 10px;
}
.country-option[aria-pressed="true"],
.country-option:hover {
  background: #c4ed7426 !important;
}
.country-option img {
  width: 24px;
  height: 18px;
  object-fit: contain;
}
.country-option small {
  margin-left: auto;
  color: #98a3b3;
}
.nickname-row {
  display: flex;
  gap: 8px;
}
.nickname-row button {
  white-space: nowrap;
}
.currency-toggle {
  background: var(--panel, #191e27);
  color: var(--text, #e9edf3);
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.platform-dialog #auth {
  display: block;
  margin: 0;
  padding: 0;
}
.platform-dialog .auth-story {
  display: none;
}
.platform-dialog .auth-card {
  padding: 0;
  border: 0;
  background: transparent;
}
.subtle a {
  color: inherit;
}
.currency-explanation {
  font-size: 12px;
  color: #98a3b3;
}
@media (max-width: 600px) {
  .platform-dialog {
    margin: auto auto 12px;
    border-radius: 18px;
    max-height: calc(100dvh - 24px);
    padding: 18px;
  }
}
/* 在页面滚动容器上锁定滚动并保留滚动条槽，弹窗不改变背景内容宽度。 */
html {
  scrollbar-gutter: stable;
}
html:has(dialog[open]) {
  overflow: hidden;
}
.platform-dialog,
.center-dialog {
  overscroll-behavior: contain;
}

.platform-dialog #auth {
  min-height: 0;
}
.platform-dialog .auth-card .segmented {
  margin-bottom: 20px;
}
.platform-dialog label {
  margin: 0;
}
.platform-dialog #auth-form {
  gap: 16px;
}
.platform-dialog #auth-error:empty {
  display: none;
}

/* 币种与余额组成一个控件；金额不省略，窄屏优先收起用户名。 */
.wallet-menu {
  display: flex;
  align-items: center;
  background: var(--panel);
  border-radius: 8px;
}
.wallet-menu[hidden] {
  display: none;
}
#currency-toggle {
  min-height: 38px;
  padding: 8px 10px;
  white-space: nowrap;
  font-size: 11px;
  color: var(--muted, #a2adbc);
  border-radius: 0 8px 8px 0;
}
#currency-toggle::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 0 3px 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
#wallet-toggle {
  border-radius: 8px 0 0 8px;
  padding-right: 4px;
}
#wallet-button-balance {
  max-width: none;
  white-space: nowrap;
}
.currency-options {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}
.currency-option {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 16px;
  text-align: left;
  background: var(--panel2, #222936);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--text);
}
.currency-option strong {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.currency-option small,
.currency-example {
  font-size: 12px;
  color: #a2adbc;
  line-height: 1.5;
}
.currency-option[aria-pressed="true"] {
  border-color: var(--accent, #c4ed74);
  background: #c4ed7410;
}
.currency-option:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.currency-explanation {
  line-height: 1.7;
}
@media (max-width: 650px) {
  #user-center-toggle strong {
    display: none;
  }
  #wallet-toggle {
    font-size: 13px;
    padding-left: 8px;
  }
  #currency-toggle {
    padding-left: 5px;
    padding-right: 8px;
  }
  #wallet-button-balance {
    max-width: none;
  }
}

.money-value {
  white-space: nowrap;
}
.money-code {
  font-size: 0.78em;
  color: var(--muted, #a2adbc);
  font-weight: 400;
}
/* 顶部旁边已有币种切换入口，代码回退时避免连续显示两次AED等代码。 */
#wallet-button-balance .money-code {
  display: none;
}

/* 语言使用自定义弹层，各选项保留本地名称；不改变国家或币种。 */
.language-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0;
}
.language-options button,
.preference-option {
  min-height: 44px;
  text-align: left;
  white-space: normal;
  background: var(--surface, #202733);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 14px;
  color: inherit;
}
.language-options button[aria-pressed="true"] {
  background: #c5ed78;
  color: #10151d;
}
.preference-option {
  display: block;
  width: 100%;
  margin: 10px 0;
}
.profile-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}
.profile-setting p {
  margin: 6px 0;
}
@media (max-width: 560px) {
  .language-options button {
    font-size: 16px;
  }
  .currency-toggle {
    font-size: 12px;
    padding: 8px;
  }
  .brand-note {
    display: none;
  }
}

/* 账号入口保持单列：品牌、模式、标题、字段、主要操作和浏览出口。 */
.platform-dialog.auth-dialog {
  width: min(440px, calc(100vw - 28px));
  padding: 24px;
}
.auth-dialog > header {
  margin-bottom: 12px;
  align-items: center;
}
.auth-dialog > header h2 {
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--accent);
  margin: 0;
}
.auth-dialog #auth-title {
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.5px;
  margin: 0 0 8px;
}
.auth-dialog #auth-caption {
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 12px;
}
/* Compact auth mode tabs; keep a 44px touch target on mobile. */
.auth-dialog .auth-card .segmented {
  gap: 24px;
  padding: 0;
  margin-bottom: 16px;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.auth-dialog .segmented button {
  flex: 0 1 auto;
  min-height: 44px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  line-height: 1.25;
  background: transparent;
  color: var(--muted);
}
.auth-dialog .segmented button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: transparent;
}
.auth-dialog .segmented button:hover {
  color: var(--ink);
}
.auth-dialog .segmented button.active:hover {
  color: var(--accent);
}
.auth-dialog #auth-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.auth-dialog #auth-form input {
  font-size: 16px;
  min-height: 44px;
  line-height: 1.25;
  margin: 4px 0 0;
  padding: 10px 12px;
}
.auth-dialog #auth-form label {
  line-height: 1.35;
}
.auth-dialog #auth-progress {
  margin-bottom: 12px;
}
.auth-dialog .auth-password-field {
  margin-top: 12px;
}
.auth-dialog .auth-password-input {
  position: relative;
}
.auth-dialog #auth-password {
  padding-right: 54px;
}
.auth-dialog #auth-password-show {
  position: absolute;
  right: 0;
  bottom: 0;
  min-height: 44px;
  width: 44px;
  padding: 10px;
  color: var(--muted);
  display: grid;
  place-items: center;
}
.auth-dialog #auth-password-show svg {
  width: 20px;
  height: 20px;
}
.auth-dialog .auth-help {
  font-size: 12px;
  line-height: 1.35;
  margin: 4px 0 0;
  color: var(--muted);
}
.auth-dialog #auth-error {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: #ff8b8b0c;
  border-radius: 8px;
  font-size: 13px;
}
.auth-dialog #auth-submit {
  justify-content: center;
  min-height: 44px;
  line-height: 1.25;
  margin-top: 16px;
}
.auth-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 12px;
}
.auth-progress > span:not(.auth-step-line) {
  display: flex;
  align-items: center;
  gap: 7px;
}
.auth-progress b {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--panel2);
}
.auth-progress .current {
  color: var(--accent);
}
.auth-progress .current b {
  background: #c8ee8018;
}
.auth-step-line {
  flex: 1;
  height: 1px;
  background: var(--line);
  max-width: 48px;
}
@media (max-width: 600px) {
  .platform-dialog.auth-dialog {
    padding: 20px;
    margin: auto;
    max-height: calc(100dvh - 24px);
  }
  .auth-dialog #auth-title {
    font-size: 24px;
  }
}

/* 资料向导只填写昵称与国家；手机端保留完整的表单与按钮间距。 */
.platform-dialog.onboarding-dialog {
  width: min(440px, calc(100vw - 28px));
  padding: 24px;
  margin: auto;
  max-height: calc(100dvh - 24px);
}
.onboarding-dialog > header {
  margin-bottom: 16px;
}
.onboarding-dialog h2 {
  font-size: 22px;
}
.onboarding-dialog h2:focus {
  outline: none;
}
.onboarding-dialog .dialog-close {
  min-width: 44px;
  min-height: 44px;
}
.onboarding-dialog form {
  gap: 18px;
}
.onboarding-dialog .auth-progress {
  margin: 0;
}
.onboarding-dialog p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}
.onboarding-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.onboarding-dialog .onboarding-field label {
  margin: 0;
}
.onboarding-dialog input {
  margin: 0;
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
}
.onboarding-dialog button {
  min-height: 44px;
}
.onboarding-dialog .nickname-row input {
  flex: 1;
  width: 0;
}
.onboarding-dialog .nickname-row button {
  padding: 8px 12px;
  font-size: 13px;
}
.onboarding-dialog .error:empty {
  display: none;
}
.onboarding-dialog [type="submit"] {
  min-height: 48px;
  justify-content: center;
}
@media (max-width: 600px) {
  .platform-dialog.onboarding-dialog {
    padding: 20px;
  }
}
.onboarding-field > span {
  color: var(--muted);
  font-size: 14px;
}

.machine-grid[hidden],#games-list[hidden] {display:none}

/* 奖池采用数字滚轮，只改数字位，不移动货币符号；持续更新不改变卡片尺寸。 */
.rolling-money { display:inline-flex; align-items:baseline; white-space:pre; font-variant-numeric:tabular-nums; }
.money-digit { display:inline-block; overflow:hidden; height:1.3em; line-height:1.3em; vertical-align:bottom; }
.money-digit-track { display:flex; flex-direction:column; animation:money-roll 420ms cubic-bezier(.2,.7,.2,1) both; }
.money-digit-track > span { display:block; height:1.3em; line-height:1.3em; }
@keyframes money-roll { from {transform:translateY(0)} to {transform:translateY(-50%)} }
@media(prefers-reduced-motion:reduce) { .money-digit-track {animation:none;transform:translateY(-50%)} }

/* 公共复选框：统一深色底、主题选中色及键盘焦点，整行文字可点击。 */
.platform-checkbox { display:inline-flex; align-items:center; gap:8px; min-height:36px; margin:0; color:var(--muted); font-size:13px; line-height:20px; white-space:nowrap; cursor:pointer; }
.platform-checkbox input[type="checkbox"] { appearance:none; -webkit-appearance:none; display:grid; place-content:center; flex:0 0 18px; width:18px; height:18px; min-height:0; margin:0; padding:0; border:1px solid var(--muted); border-radius:4px; background:var(--bg); cursor:pointer; }
.platform-checkbox input[type="checkbox"]:checked { border-color:var(--accent); background:var(--accent); }
.platform-checkbox input[type="checkbox"]::before { content:""; width:10px; height:10px; background:var(--bg); clip-path:polygon(14% 44%,0 59%,39% 95%,100% 20%,84% 7%,37% 68%); transform:scale(0); }
.platform-checkbox input[type="checkbox"]:checked::before { transform:scale(1); }
.platform-checkbox input[type="checkbox"]:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.platform-checkbox input[type="checkbox"]:checked + span { color:var(--ink); }
@media(any-pointer:coarse) { .platform-checkbox { min-height:44px; } }

/* 机台目录：游戏筛选直接可见，编号和状态独立于装饰图。 */
.machine-controls {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;width:100%;padding-top:12px;border-top:1px solid var(--line)}
.machine-controls[hidden],.machine-list[hidden],.machine-card[hidden],.machine-more[hidden],.machine-group-body[hidden],.machine-group-icon[hidden],.machine-empty[hidden] {display:none}
#machine-game-options {display:flex;gap:6px;flex-wrap:wrap}
#machine-game-options button {min-height:40px;padding:8px 14px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:14px;cursor:pointer}
#machine-game-options button[aria-pressed="true"] {color:var(--ink);background:var(--panel2);border-color:var(--line)}
.machine-group {padding:18px 0 24px;border:0;border-bottom:1px solid var(--line);background:transparent}
.machine-group + .machine-group {margin-top:8px}
.machine-group-header {display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.machine-group-identity {display:flex;align-items:center;gap:10px;min-width:0}
.machine-group-icon {width:40px;height:40px;object-fit:cover;border-radius:9px}
.machine-group-title {margin:0;font-size:17px;line-height:24px;color:var(--ink)}
.machine-count {display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.machine-group-actions {display:flex;gap:8px;margin-left:auto}
.machine-group-actions button {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.machine-group-actions .machine-quick {color:var(--accent)}
.machine-group-actions svg,.machine-more svg {width:16px;height:16px}
.is-collapsed .machine-fold svg {transform:rotate(180deg)}
.machine-group-pools {order:3;display:flex;flex-wrap:wrap;gap:10px;flex-basis:100%}
.machine-group-pools:empty {display:none}
.room-jackpot {position:relative;color:var(--ink)}
.room-jackpot summary {display:flex;align-items:center;flex-wrap:wrap;gap:7px;min-height:32px;list-style:none;cursor:pointer}
.room-jackpot summary::-webkit-details-marker {display:none}
.room-jackpot svg {width:16px;height:16px;color:var(--muted)}
.pool-label,.pool-room,.pool-pending {font-size:12px;color:var(--muted)}
.pool-room:empty,.pool-pending:empty {display:none}
.room-jackpot .rolling-money {font-size:17px;font-weight:600}
.pool-explanation {position:absolute;z-index:5;left:0;top:100%;width:230px;max-width:70vw;padding:12px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:12px;line-height:1.5}
/* 细线网格与状态标签采用独立主题色，避免占用状态仅靠小圆点区分。 */
.machine-list {--machine-line:#2b3540;--machine-free:#b7dc86;--machine-busy:#ecc17a;--machine-busy-bg:#29251f;--machine-badge:#dca64b20}
[data-theme="light"] .machine-list {--machine-line:#e4e9ed;--machine-free:#426b27;--machine-busy:#94600f;--machine-busy-bg:#fcf8ef;--machine-badge:#f4e8cc}
.lobby-games .machine-grid {grid-template-columns:repeat(auto-fill,minmax(min(100%,112px),1fr));gap:1px;padding:0;border:1px solid var(--machine-line);border-radius:8px;background:var(--panel);overflow:hidden;align-items:stretch}
.machine-card {display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-width:0;min-height:52px;padding:12px;border:0;border-radius:0;box-shadow:1px 0 var(--machine-line),0 1px var(--machine-line);background:var(--panel);color:var(--ink);text-align:left;cursor:pointer}
.machine-card:not(:disabled):hover {background:var(--panel2);box-shadow:inset 0 0 0 1px var(--accent)}
.machine-card:disabled {cursor:default;opacity:1}
.machine-card.is-occupied {background:var(--machine-busy-bg)}
.machine-card.is-stale {background:var(--bg)}
.machine-number {font-size:15px;line-height:22px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.machine-status {font-size:12px;line-height:18px;color:var(--machine-free);white-space:nowrap;flex-shrink:0;padding:3px 5px;border-radius:4px;font-weight:500}
.is-occupied .machine-status {color:var(--machine-busy);background:var(--machine-badge)}
.is-stale .machine-status {color:var(--muted);background:var(--panel2)}
.machine-status::before {content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:5px;vertical-align:middle}
.is-occupied .machine-status::before {border-radius:1px}
.machine-card:focus-visible {position:relative;z-index:1;outline-offset:-3px!important}
.machine-more {display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;margin:16px auto 0;padding:9px 20px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.machine-more:hover {background:var(--panel2)}
.machine-empty {color:var(--muted);font-size:13px;line-height:1.6}
.machine-card:focus-visible,.machine-more:focus-visible,.machine-group-actions button:focus-visible,#machine-game-options button:focus-visible {outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:650px) {
 .lobby-games .machine-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
 .machine-card {padding:10px 8px;gap:5px}
 .machine-controls {gap:8px}.machine-controls .platform-checkbox {min-height:44px}
 .machine-group {padding:16px 0 20px}.machine-group-title {font-size:16px}
 .machine-group-header {gap:8px}.machine-group-icon {width:32px;height:32px}
 .machine-group-actions {gap:4px}.machine-group-actions button {min-height:44px;padding:8px;font-size:12px}
 .machine-group-pools {padding-top:4px}.room-jackpot .rolling-money {font-size:16px}
}

@media(max-width:350px) {.lobby-games .machine-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Compact avatar picker: all 21 choices fit on common phone screens. */
#avatar-dialog {
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 16px;
  overflow: auto;
}
#avatar-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#avatar-dialog .dialog-header {
  margin: 0;
  flex-shrink: 0;
}
#avatar-dialog .dialog-header h2 { font-size: 19px; }
#avatar-close { min-height: 44px; padding: 8px 12px; line-height: 1.25; }
#avatar-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  min-height: 0;
  overflow: auto;
  padding: 4px;
  flex-shrink: 1;
}
#avatar-grid .avatar-option {
  aspect-ratio: 1;
  min-height: 44px;
  padding: 3px;
  border-radius: 50%;
}
#avatar-grid .avatar-option img { display: block; width: 100%; max-width: 64px; }
#avatar-error:empty { display: none; }
#avatar-error { margin: 0; font-size: 12px; line-height: 1.35; flex-shrink: 0; }
#avatar-dialog .dialog-footer {
  margin: 0;
  padding-top: 10px;
  gap: 12px;
  flex-shrink: 0;
}
#avatar-dialog .dialog-footer .subtle { font-size: 11px; line-height: 1.4; }
#avatar-save { min-height: 44px; padding: 10px 14px; line-height: 1.25; flex-shrink: 0; }
@media (max-width: 480px) {
  #avatar-dialog { padding: 12px; }
  #avatar-dialog[open] { gap: 8px; }
  #avatar-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
}
@media (max-height: 450px) and (min-width: 481px) {
  #avatar-dialog { width: min(560px, calc(100vw - 24px)); padding: 10px 14px; }
  #avatar-dialog[open] { gap: 6px; }
  #avatar-grid { gap: 4px; }
  #avatar-grid .avatar-option { aspect-ratio: auto; height: 48px; }
  #avatar-grid .avatar-option img { width: 38px; }
  #avatar-dialog .dialog-footer { padding-top: 6px; }
}

/* Keep touch scrolling available without a visible mobile menu scrollbar. */
@media (max-width: 650px) {
  .account-sidebar .center-tabs { scrollbar-width: none; }
  .account-sidebar .center-tabs::-webkit-scrollbar { display: none; }
}