/* Opaque text surfaces are shared by every theme and both site frontends. */
html body dialog.site-notice {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 48px);
  box-sizing: border-box;
  overflow: auto;
  padding: 24px;
  border: 3px solid var(--theme-edge, #62401f);
  border-radius: 0;
  background: #fff4da;
  color: #302516;
  box-shadow: inset 2px 2px #fffdf2, inset -2px -2px #c6a465, 0 6px #24190c;
  text-shadow: none;
}
html body dialog.site-notice::backdrop { background: #101718a8; }
html body dialog.site-notice h2 { margin: 0 0 14px; color: #302516; font-size: 26px; font-weight:800; line-height: 1.5; }
html body dialog.site-notice p { margin: 0 0 22px; color: #302516; font-size: 18px; font-weight:700; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
html body dialog.site-notice button {
  display: block;
  width: auto;
  min-height: 42px;
  margin-left: auto;
  padding: 8px 20px;
  border: 2px solid #654419;
  border-radius: 0;
  background: linear-gradient(#f6d984, #c9973d);
  color: #302516;
  box-shadow: inset 1px 1px #fff0b1, 0 3px #563919;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-shadow: none;
}
html body dialog.site-notice button:focus-visible { outline: 3px solid #62401f; outline-offset: 3px; }

html body dialog.site-notice.recharge-success {
  width: min(760px, calc(100% - 32px)); min-height: 480px;
  padding: 32px 28px 28px; border: 18px solid #be8840;
  border-image: url('/assets/voucher-ticket-frame.webp?v=cc70edd2') 52 / 18px / 0 stretch;
  background: #fff4da url('/assets/recharge-caishen.webp?v=cc70edd2') center / cover no-repeat;
  box-shadow: inset 0 0 0 2px #efd394, 0 8px 32px #24190c66;
}
html body dialog.site-notice.recharge-success[open] { display: flex; flex-direction: column; gap: 0; }
html body dialog.recharge-success h2 { max-width: 57%; margin-bottom: 22px; color: #71351c; font-size: 26px; line-height: 1.4; }
html body dialog.recharge-success #rechargeSuccess { width: 57%; }
#rechargeSuccess[hidden] { display: none; }
html body dialog.recharge-success #rechargeSuccessText { margin: 0 0 10px; font-size: 17px; }
html body dialog.recharge-success .recharge-points {
  position: relative; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 10px 14px;
  border: 2px solid #b48a3a; background: #fff0bfe8;
  box-shadow: inset 1px 1px #fffced, inset -1px -1px #c49c56, 0 3px #85632b33;
}
html body dialog.recharge-success .recharge-points .pixel-icon { width: 28px; height: 28px; flex: none; }
html body dialog.recharge-success .recharge-points b {
  color: #1e6238; font: 900 clamp(28px, 5vw, 42px) / 1.2 'Arial Black', 'Microsoft YaHei', Arial, sans-serif;
  font-variant-numeric: tabular-nums; letter-spacing: -1px; text-shadow: none;
}
html body dialog.recharge-success .recharge-points span { color: #5c411c; font-size: 18px; font-weight: 800; }
html body dialog.recharge-success #rechargeSuccessThanks { margin: 22px 0 0; font-size: 16px; }
html body dialog.recharge-success #rechargeSuccessUpgrade { margin: 14px 0 0; color: #8b3023; font-size: 16px; line-height: 1.7; }
html body dialog.recharge-success #dismissNotice {
  margin: auto 0 0 auto; min-width: 104px; border-color: #133f2c; background: #205b3f; color: #fff9e5;
  box-shadow: inset 1px 1px #8eb58a, inset -1px -1px #143b29, 0 3px #173c29;
}
html body dialog.recharge-success #dismissNotice:hover { background: #2b704d; }
html body dialog.recharge-success #dismissNotice:focus-visible { outline: 3px solid #fff9e5; outline-offset: 3px; box-shadow: 0 0 0 5px #205b3f; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  html body dialog.recharge-success .recharge-points b {
    background: linear-gradient(110deg, #1e6238 42%, #4a9b57 47%, #d3ef9d 50%, #4a9b57 53%, #1e6238 58%) 100% 0 / 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: recharge-points-shine 5s ease-in-out infinite;
  }
}
@keyframes recharge-points-shine { 0%, 60% { background-position: 100% 0; } 90%, 100% { background-position: 0% 0; } }
@media (max-width: 520px) {
  html body dialog.site-notice.recharge-success {
    width: calc(100% - 24px); max-height: calc(100dvh - 24px); min-height: 0; padding: 18px;
    border-width: 14px; border-image-width: 14px; background-position: right top; background-size: auto 190px;
  }
  html body dialog.recharge-success h2 { max-width: none; margin: 178px 0 14px; font-size: 23px; }
  html body dialog.recharge-success #rechargeSuccess { width: 100%; }
  html body dialog.recharge-success .recharge-points { padding: 9px 12px; }
  html body dialog.recharge-success .recharge-points b { font-size: clamp(24px, 8vw, 32px); }
  html body dialog.recharge-success .recharge-points .pixel-icon { width: 24px; height: 24px; }
  html body dialog.recharge-success #rechargeSuccessThanks { margin-top: 18px; }
  html body dialog.recharge-success #dismissNotice { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html body dialog.recharge-success .recharge-points b { animation: none; background: none; color: #1e6238; }
}

/* Shared public-site gold frame. Contents and per-dialog actions keep their own styles. */
html body dialog[class]:not(.is-native-fullscreen) {
  border: 3px solid #b48d51;
  border-image: none;
  border-radius: 0;
  box-shadow: inset 2px 2px #efd49c, inset -2px -2px #bc9a63, 0 6px 24px #30251655;
}
/* The progress dialog's padding is its outer frame; remove the timber texture there. */
html body dialog.generation-progress-dialog[class] {
  background: #e7d09b;
  background-image: none;
}