#account-bar { position: fixed; inset: 0 0 auto; min-height: 48px; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px max(12px,env(safe-area-inset-right)) 2px max(12px,env(safe-area-inset-left)); background: #0b2228; border-bottom: 1px solid #48655f; font-size: 13px; }
#account-bar button { min-height: 44px; padding: 8px 16px; background: #fac04d; color: #10292b; border: 0; border-radius: 8px; font: 700 14px system-ui; cursor: pointer; }
#account-bar span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#game { top: calc(48px + env(safe-area-inset-top)); }
#loading { top: 48px; }
#account-dialog { box-sizing: border-box; width: min(480px,calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 24px; border: 2px solid #66877b; border-radius: 20px; background: #102e33; color: #f2f5e2; box-shadow: 0 20px 80px #0009; }
#account-dialog::backdrop { background: #03171deb; }
#account-dialog [hidden] { display: none !important; }
#account-dialog h2 { margin: 8px 0 12px; font-size: 26px; line-height: 1.2; }
#account-dialog h3 { margin-bottom: 8px; }
#account-dialog p { font-size: 14px; color: #d0e1d8; }
#account-dialog button { font: 600 14px system-ui; min-height: 44px; padding: 10px 14px; border-radius: 9px; border: 1px solid #66877b; color: #f2f5e2; background: #1d4145; cursor: pointer; }
#account-dialog button:disabled { opacity: .5; cursor: wait; }
#account-dialog button[aria-pressed=true], #account-dialog .account-primary { background: #fac04d; color: #10292b; border-color: #fac04d; }
#account-dialog label { display: block; font-size: 14px; font-weight: 650; margin: 14px 0 6px; }
#account-dialog input, #account-dialog textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #769588; border-radius: 8px; background: #08242a; color: #fff; font: 16px system-ui; }
#account-dialog textarea { font: 14px monospace; resize: vertical; }
#account-dialog small { display: block; color: #b7cec2; font-size: 12px; margin-top: 6px; }
#account-dialog .account-primary { width: 100%; margin-top: 20px; }
#account-dialog .account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
#account-dialog .account-actions > button { flex: 1; }
#account-dialog .account-heading { display: flex; justify-content: space-between; align-items: center; }
#account-dialog .account-eyebrow { color: #fac04d; font-size: 12px; letter-spacing: .14em; font-weight: 750; }
#account-dialog #account-message { margin-top: 14px; color: #ffdc96; overflow-wrap: anywhere; }
#account-dialog .account-link { background: transparent; border: 0; padding-inline: 0; color: #a8e4d1; }
#account-dialog .account-fine { font-size: 12px; margin-top: 16px; }
#account-dialog a { color: #a8e4d1; }
#account-dialog :focus-visible, #account-bar :focus-visible { outline: 3px solid #fac04d; outline-offset: 3px; }
@media (max-height: 650px) { #account-dialog { padding: 16px; } }