/* 账号 / 排行榜弹窗。与 OL 大厅同一套暗金材质。 */
#cloud-root {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: none;
}
#cloud-root.open { display: block; }

.cloud-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 4, .74);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.cloud-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 48px));
  overflow: auto;
  color: #e8dcc2;
  background:
    radial-gradient(ellipse at 88% 0%, rgba(201, 164, 92, .16), transparent 42%),
    linear-gradient(160deg, #1b241b 0%, #10160f 52%, #0a0e0a 100%);
  border: 1px solid rgba(201, 164, 92, .62);
  box-shadow: 0 0 0 4px rgba(8, 12, 8, .72), 0 30px 80px rgba(0, 0, 0, .7), inset 0 0 60px rgba(201, 164, 92, .035);
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 164, 92, .45) transparent;
}
.cloud-modal::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(201, 164, 92, .18);
  pointer-events: none;
}

.cloud-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 26px 16px;
  border-bottom: 1px solid rgba(201, 164, 92, .16);
}
.cloud-head b {
  display: block;
  font-family: var(--font-display, "STKaiti", "KaiTi", serif);
  font-size: 26px;
  letter-spacing: 4px;
  color: #f0d49b;
}
.cloud-head small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 2px;
  color: #93866e;
}
.cloud-x {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(201, 164, 92, .25);
  background: rgba(0, 0, 0, .2);
  color: #b9a985;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.cloud-x:hover { color: #f3d9a2; border-color: rgba(201, 164, 92, .6); }

.cloud-tabs {
  display: flex;
  padding: 0 26px;
  border-bottom: 1px solid rgba(201, 164, 92, .12);
}
.cloud-tabs button {
  position: relative;
  padding: 12px 2px;
  margin-right: 26px;
  border: 0;
  background: transparent;
  color: #8f846e;
  font-size: 12px;
  letter-spacing: 2px;
  cursor: pointer;
}
.cloud-tabs button.active { color: #f0d49b; }
.cloud-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a45c, transparent);
}

.cloud-body { padding: 20px 26px 24px; }
.cloud-msg {
  margin: 0 0 14px;
  padding: 8px 10px;
  border: 1px solid rgba(201, 164, 92, .25);
  background: rgba(201, 164, 92, .06);
  color: #d8c59b;
  font-size: 11px;
  line-height: 1.6;
}
.cloud-msg.error { border-color: rgba(188, 82, 64, .5); background: rgba(120, 35, 28, .18); color: #e2a69a; }

.cloud-intro b { display: block; font-size: 15px; color: #efdfba; letter-spacing: 1px; }
.cloud-intro p { margin: 7px 0 16px; color: #8e846f; font-size: 11px; line-height: 1.7; }

.cloud-body label {
  display: block;
  margin-bottom: 12px;
  color: #a99b80;
  font-size: 10px;
  letter-spacing: 1px;
}
.cloud-body input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 10px 11px;
  border: 1px solid rgba(201, 164, 92, .24);
  background: rgba(0, 0, 0, .32);
  color: #eadfc7;
  font-family: inherit;
  font-size: 12px;
  outline: none;
}
.cloud-body input:focus { border-color: rgba(201, 164, 92, .72); box-shadow: 0 0 0 2px rgba(201, 164, 92, .08); }
.cloud-body input::placeholder { color: #645d4f; }

.cloud-submit {
  width: 100%;
  margin-top: 4px;
  padding: 11px;
  border: 1px solid rgba(241, 200, 118, .65);
  background: linear-gradient(180deg, #a83a32, #75241f);
  color: #f8e8c6;
  font-size: 13px;
  letter-spacing: 3px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}
.cloud-submit:hover { filter: brightness(1.1); }
.cloud-submit:disabled { opacity: .55; cursor: wait; }

.cloud-switch { margin-top: 12px; color: #807663; font-size: 10px; text-align: center; }
.cloud-switch button, .cloud-guest button {
  border: 0; background: none; color: #d5b97b; font: inherit; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.cloud-guest { margin-top: 9px; text-align: center; color: #807663; font-size: 10px; }
.cloud-note { margin: 14px 0 0; color: #6f6757; font-size: 9.5px; line-height: 1.6; text-align: center; }

.cloud-profile { display: flex; gap: 16px; align-items: center; padding: 4px 0 16px; }
.cloud-avatar {
  flex: 0 0 62px;
  width: 62px; height: 62px;
  display: grid; place-items: center;
  border: 1px solid rgba(201, 164, 92, .7);
  background: radial-gradient(circle at 40% 30%, #9d7448, #4b2e1a 68%, #24150c);
  color: #f8e5bd;
  font-family: var(--font-display, "STKaiti", "KaiTi", serif);
  font-size: 32px;
  box-shadow: 0 0 0 3px rgba(8, 12, 8, .8);
}
.cloud-profile-main { min-width: 0; }
.cloud-profile-main > b { display: block; font-size: 18px; color: #f0d49b; letter-spacing: 1px; }
.cloud-profile-main > small { display: block; margin-top: 3px; color: #7f7563; font-size: 10px; }
.cloud-stats { display: flex; gap: 16px; margin-top: 10px; }
.cloud-stats span { color: #857a65; font-size: 9px; }
.cloud-stats b { display: block; color: #e4d3ac; font-size: 15px; font-weight: 500; }

.cloud-actions { display: flex; gap: 10px; padding: 4px 0 0; }
.cloud-ghost {
  flex: 1;
  padding: 9px;
  border: 1px solid rgba(201, 164, 92, .28);
  background: rgba(0, 0, 0, .18);
  color: #c7b591;
  font-size: 11px;
  cursor: pointer;
}
.cloud-ghost:hover { border-color: rgba(201, 164, 92, .65); color: #f0d49b; }

.cloud-rank-note { margin: 0 0 12px; color: #8b806b; font-size: 10px; line-height: 1.6; }
.cloud-rank-head, .cloud-rank-row {
  display: grid;
  grid-template-columns: 38px 1fr 46px 52px;
  align-items: center;
  gap: 8px;
}
.cloud-rank-head {
  padding: 0 10px 8px;
  color: #6f6655;
  font-size: 9px;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(201, 164, 92, .12);
}
.cloud-rank-row {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(201, 164, 92, .08);
  font-size: 11px;
}
.cloud-rank-row.mine { background: rgba(201, 164, 92, .08); }
.cloud-rank-no { color: #8d8068; font-size: 10px; }
.cloud-rank-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cloud-rank-name i {
  flex: 0 0 26px; width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid rgba(201, 164, 92, .28);
  background: rgba(201, 164, 92, .08);
  color: #d9c49a; font-style: normal; font-family: var(--font-display, serif);
}
.cloud-rank-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d9cdb5; font-weight: 500; }
.cloud-rank-name small { color: #6f6757; font-size: 9px; }
.cloud-rank-wins { color: #d6ba82; }
.cloud-rank-rate { color: #9fae94; }
.cloud-empty { padding: 28px 0; color: #776e5d; text-align: center; font-size: 11px; }
.cloud-refresh {
  width: 100%; margin-top: 14px; padding: 9px;
  border: 1px solid rgba(201, 164, 92, .22); background: transparent;
  color: #a9997a; font-size: 10px; letter-spacing: 2px; cursor: pointer;
}
.cloud-refresh:hover { color: #f0d49b; border-color: rgba(201, 164, 92, .5); }

.lobby-avatar.logged::after {
  content: "";
  position: absolute;
  right: -3px; bottom: -3px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #6fae7e;
  border: 2px solid #10160f;
  box-shadow: 0 0 8px rgba(111, 174, 126, .7);
}

@media (max-width: 560px) {
  .cloud-head { padding: 18px 18px 12px; }
  .cloud-tabs { padding: 0 18px; }
  .cloud-body { padding: 16px 18px 18px; }
  .cloud-stats { gap: 10px; }
  .cloud-rank-head, .cloud-rank-row { grid-template-columns: 30px 1fr 36px 44px; padding-left: 4px; padding-right: 4px; }
  .cloud-rank-name small { display: none; }
}