.account-header,.account-dialog { --account-gold:#f5d67d; color:#fff6df; font-family:Arial,Helvetica,sans-serif; color-scheme:dark; letter-spacing:0; }
.account-header { background:var(--home-header); border-bottom:1px solid #b48b48; padding:20px 28px; padding-top:max(20px,env(safe-area-inset-top)); box-shadow:0 5px 28px #0005; }
.account-header .profile-inner { max-width:1040px; margin:auto; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:18px; }
.account-header #wallet-link { grid-column:1; grid-row:1; justify-self:start; }
.account-header .balance { display:flex; align-items:center; gap:12px; min-width:130px; max-width:240px; padding:8px 18px 8px 9px; background:#22060c; color:var(--account-gold); border:2px solid #d5ac57; border-radius:8px; text-decoration:none; box-shadow:0 0 0 3px #100207,inset 0 0 12px #703b2133; }
.account-header .coin { width:39px; height:39px; flex:none; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#fff1ac,#dba528); border:3px double #9e651b; color:#724412; font:bold 23px Georgia,serif; }
.account-header .balance > span:last-child { min-width:0; }
.account-header .balance small { display:block; font-size:10px; margin-bottom:2px; color:#ffe4a1; }
.account-header .balance strong { font-size:24px; overflow-wrap:anywhere; color:var(--account-gold); }
.account-header .player-identity { grid-column:2; grid-row:1; justify-self:end; display:grid; grid-template-columns:auto minmax(0,1fr) 24px; align-items:center; gap:15px; min-width:0; max-width:100%; min-height:0; padding:4px; border:0; border-radius:0; background:transparent; color:#fff6df; text-align:left; font:inherit; box-shadow:none; cursor:pointer; }
.account-header .player-identity:hover { background:transparent; filter:brightness(1.1); }
.account-header .avatar { width:68px; height:68px; flex:none; display:grid; place-items:center; position:relative; overflow:hidden; border:2px solid #bd9655; border-radius:8px; background:#591b29; box-shadow:inset 0 0 0 3px #250912; }
.account-header .avatar span { color:var(--account-gold); font:700 30px Georgia,serif; }
.account-header .avatar img { position:absolute; width:100%; height:100%; object-fit:cover; }
.account-header .player-details { display:grid; min-width:0; gap:5px; }
.account-header .profile-label { color:#e7c991; font-size:10px; font-weight:700; }
.account-header #header-player-name { font-size:21px; overflow-wrap:anywhere; }
.account-header .profile-arrow { width:22px; height:22px; color:var(--account-gold); }
.account-header #auth-user { display:none; }
.account-header .auth-options { grid-column:1 / -1; grid-row:2; justify-self:end; display:flex; gap:10px; }
.account-header .auth-options button { font-size:14px; }
.account-header .auth-options .secondary { border:1px solid #b48b48; background:var(--menu-button); color:#fff0c5; }
.account-header .scoreboard-heading { display:none; margin:0; padding:0; color:var(--account-gold); text-shadow:none; font-size:26px; text-align:left; line-height:1.18; }
body[data-app="scoreboard"] .account-header .scoreboard-heading { display:grid; grid-column:1; grid-row:1; }
.account-header #mode-toggle { display:flex; align-items:center; gap:10px; width:auto; min-width:0; min-height:44px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.scoreboard-title { display:grid; }
.scoreboard-caption { font-size:16px; font-weight:400; margin-top:4px; }
.account-header #mode-toggle svg { width:20px; height:20px; flex:none; }
body[data-app="scoreboard"] .account-header #wallet-link { display:none!important; }
.account-header a:focus-visible,.account-header button:focus-visible,.account-dialog button:focus-visible,.account-dialog input:focus-visible { outline:3px solid #fff1b5; outline-offset:4px; }
.account-dialog { width:min(440px,calc(100% - 28px)); height:auto; max-height:calc(100dvh - 28px); margin:auto; padding:24px; border:1px solid #b48b48; border-radius:8px; background:var(--home-base); box-shadow:0 20px 70px #000b; overflow:auto; }
.account-dialog::backdrop { background:#08030bdd; }
.account-dialog .dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.account-dialog .dialog-heading h2 { margin:0; font-size:25px; color:#fff6df; }
.account-dialog button { font-family:inherit; cursor:pointer; letter-spacing:0; }
.account-dialog .icon-button { width:44px; height:44px; min-height:44px; flex:none; display:grid; place-items:center; padding:10px; border:1px solid #b48b48; border-radius:6px; background:var(--menu-button); color:var(--account-gold); }
.account-dialog .icon-button svg { width:22px; height:22px; }
.account-dialog .primary,.account-dialog .secondary { min-height:50px; padding:12px 18px; border:1px solid #d5ac57; border-radius:6px; font-size:16px; font-weight:700; }
.account-dialog .primary { background:#f2d286; color:#251b12; }
.account-dialog .secondary { background:var(--menu-button); color:#ffedbc; }
.account-dialog .text-button { border:0; background:transparent; color:var(--account-gold); padding:8px 0; font-size:16px; text-align:left; }
.account-dialog label { display:grid; gap:8px; font-size:15px; color:#f4dfd9; }
.account-dialog input { width:100%; min-width:0; border:1px solid #a68a62; background:var(--home-header); color:#fff; border-radius:6px; padding:12px; font:inherit; }
.account-dialog .account-menu-options { display:grid; gap:12px; margin-top:22px; }
.account-dialog .account-menu-item { display:grid; grid-template-columns:24px minmax(0,1fr) 20px; align-items:center; gap:14px; width:100%; min-height:60px; margin:0; padding:14px; border:1px solid #b48b48; border-radius:6px; background:var(--menu-button); color:#ffe8a0; font-size:19px; font-weight:700; text-align:left; text-decoration:none; }
.account-dialog .account-menu-item svg { width:24px; height:24px; }
.account-dialog .account-menu-item svg:last-child { width:20px; height:20px; }
.account-dialog .profile-info { margin:24px 0; }
.account-dialog .profile-info > div { padding:14px 0; border-bottom:1px solid #b48b4855; }
.account-dialog .profile-info dt { font-size:13px; color:#e0cba6; margin-bottom:6px; }
.account-dialog .profile-info dd { margin:0; font-size:20px; overflow-wrap:anywhere; }
.account-dialog #profile-points { color:var(--account-gold); font-weight:700; }
.account-dialog #profile-sign-in { width:100%; }
#account-menu.account-dialog { width:min(340px,calc(100% - 28px)); background:var(--home-base); }
#appearance-dialog.account-dialog { background:var(--home-base); }
.account-dialog .theme-options { margin:24px 0; padding:0; border:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.account-dialog .theme-options legend { margin-bottom:14px; font-size:16px; color:#ead9ba; }
.account-dialog .theme-choice { display:block; min-width:0; overflow:hidden; border:2px solid #80765d; border-radius:6px; background:var(--menu-button); cursor:pointer; }
.account-dialog .theme-choice:has(input:checked) { border-color:var(--account-gold); box-shadow:0 0 0 1px var(--account-gold); }
.account-dialog .theme-choice img { display:block; width:100%; height:88px; object-fit:cover; }
.account-dialog .theme-choice > span { display:flex; align-items:center; gap:8px; min-height:49px; padding:9px 10px; font-size:14px; font-weight:700; }
.account-dialog .theme-choice input { width:18px; height:18px; margin:0; padding:0; flex:none; accent-color:var(--account-gold); }
.account-dialog .settings-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.account-dialog #appearance-feedback { color:#ffb3ad; font-size:14px; line-height:1.45; }
.account-dialog .auth-tabs { --line:#a68a62; --green:#f5d67d; --muted:#dfd1b9; }
.account-dialog .auth-feedback { --red:#ffb3ad; --green:#9de9bb; }
.account-dialog #auth-verification { --muted:#dfd1b9; }
.scoreboard-navigation { display:flex; justify-content:flex-start; align-items:center; margin-top:24px; padding-bottom:env(safe-area-inset-bottom); }
.scoreboard-home { display:flex; align-items:center; gap:8px; min-height:44px; color:#fff1c4; text-decoration:none; font-weight:700; }
.scoreboard-home svg { width:20px; height:20px; }
@media(max-width:600px) {
  .account-header { padding:14px; padding-top:max(14px,env(safe-area-inset-top)); }
  .account-header .profile-inner { gap:10px; }
  .account-header .balance { min-width:0; max-width:130px; gap:6px; padding:8px 7px; }
  .account-header .coin { width:30px; height:30px; font-size:18px; }
  .account-header .balance small { font-size:9px; }
  .account-header .balance strong { font-size:20px; }
  .account-header .player-identity { grid-template-columns:auto minmax(0,1fr) 16px; padding:2px; gap:8px; }
  .account-header .avatar { width:44px; height:44px; }
  .account-header .avatar span { font-size:25px; }
  .account-header #header-player-name { font-size:17px; }
  .account-header .profile-label { font-size:9px; }
  .account-header .profile-arrow { width:16px; height:16px; }
  .account-header .scoreboard-heading { font-size:23px; }
  .scoreboard-caption { font-size:13px; }
  .account-header #mode-toggle { gap:6px; }
  .account-header #mode-toggle svg { width:16px; height:16px; }
  .account-header .auth-options { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .account-header .auth-options button { min-height:44px; padding:9px 5px; font-size:13px; }
}
@media(max-width:360px) {
  .account-header .balance { max-width:112px; }
  .account-header .player-identity { gap:6px; }
  .account-header .avatar { width:38px; height:42px; }
  .account-header #header-player-name { font-size:15px; }
  .account-header .scoreboard-heading { font-size:20px; }
  .account-dialog { padding:18px; }
  .account-dialog .theme-choice > span { font-size:12px; padding:9px 6px; gap:6px; }
}