html { min-height: 100%; background: #03101e; color-scheme: dark; }
body { margin: 0; min-width: 320px; }
main { display: block; }
.marble-noscript { padding: 24px; color: #fff0ce; font-family: "Malgun Gothic", sans-serif; text-align: center; }
@media (max-width: 480px) {
  #marble-event .marble-preview-banner { flex-wrap: wrap; gap: 4px 8px; text-align: center; }
}
#marble-event .marble-account-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px max(20px, calc((100vw - 1360px) / 2)); background: #071725; border-bottom: 1px solid #244258; font-size: 11px; color: #adc2d1; }
#marble-event .marble-account-bar i { margin: 0 10px; color: #edca8d; font-style: normal; }
#marble-event #marbleAccount { display: flex; gap: 16px; align-items: center; }
#marble-event #marbleNickname { color: #edca8d; overflow-wrap: anywhere; }
#marble-event #marbleLogout { color: #cbd8df; background: transparent; border: 1px solid #526779; border-radius: 5px; padding: 5px 10px; white-space: nowrap; }
#marble-event .marble-payout { margin-top: 10px; font-size: 13px; color: #edca8d; }
#marble-event .marble-login-card { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; max-width: 920px; margin: 18px 0 60px; padding: 40px; border: 1px solid #b49668; border-radius: 16px; background: #061725ef; box-shadow: 0 16px 48px #0005; }
#marble-event .marble-login-eyebrow { font: 10px Georgia, serif; letter-spacing: .2em; color: #edca8d; }
#marble-event .marble-login-copy h2 { margin: 14px 0; font-size: 25px; color: #fff0ce; }
#marble-event .marble-login-copy p { color: #b6c7d4; font-size: 13px; line-height: 1.9; }
#marble-event .marble-login-copy small { display: block; margin-top: 24px; color: #829bad; font-size: 11px; line-height: 1.7; }
#marble-event .marble-login-form { display: grid; gap: 9px; }
#marble-event .marble-login-form label { margin-top: 8px; color: #d3dfe7; font-size: 12px; }
#marble-event .marble-login-form input { width: 100%; min-height: 46px; padding: 12px 14px; border: 1px solid #516574; border-radius: 7px; background: #02101d; color: #fff; font: inherit; font-size: 15px; }
#marble-event .marble-login-form input:focus-visible { outline: 2px solid #79e4ff; outline-offset: 2px; }
#marble-event .marble-login-form input::placeholder { color: #8397a7; font-size: 12px; }
#marble-event #marbleLoginSubmit { min-height: 47px; margin-top: 12px; border: 1px solid #ffe9ba; border-radius: 7px; background: linear-gradient(#f5d8a0, #cc9d55); color: #231a0d; font-weight: 800; font-size: 15px; }
#marble-event #marbleLoginSubmit:disabled { opacity: .6; }
#marble-event #marbleLoginMessage { min-height: 36px; color: #9cb5c8; font-size: 11px; line-height: 1.7; }
#marble-event #marbleLoginMessage.is-error { color: #ffb6a7; }
#marble-event #marbleLoginRetry { justify-self: start; background: none; border: 0; border-bottom: 1px solid #b49668; color: #edca8d; font-size: 12px; }
#marble-event[data-authenticated="0"] .marble-game-layout { display: none; }
#marble-event[data-authenticated="0"] .marble-bottomline { margin-top: 0; }
@media (max-width: 820px) {
  #marble-event .marble-login-card { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
  #marble-event .marble-login-copy small { margin-top: 12px; }
}
@media (max-width: 480px) {
  #marble-event .marble-account-bar { padding: 10px 16px; font-size: 9px; flex-wrap: wrap; gap: 8px; }
  #marble-event .marble-payout { font-size: 11px; }
  #marble-event .marble-login-card { padding: 24px 20px; margin: 14px 3px 32px; gap: 20px; }
  #marble-event .marble-login-copy h2 { font-size: 22px; }
}