.account-controls{align-self:center;flex:none;min-width:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-left:8px}
.account-controls[hidden],.account-note[hidden]{display:none}
.account-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-height:44px}
.account-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 10px;border:1px solid transparent;border-radius:7px;font:600 .875rem/1.2 var(--sans);white-space:nowrap;color:var(--accent);background:transparent}
.account-button:hover{background:#efe3d0}
.account-button-primary{border-color:#d5c3ae;background:var(--paper);color:var(--ink)}
.account-button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.account-note{font-size:.75rem;line-height:1.4;color:var(--muted);max-width:260px;text-align:right}
.account-name,.account-loading,.account-unavailable{font-size:.78rem;line-height:1.3;color:var(--muted)}
.account-name{font-size:.93rem;line-height:normal}
.account-user-button{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.account-user-button .maple-account-trigger{min-width:44px;min-height:44px;padding:6px}
@media(max-width:1150px){
  .site-header:has(.account-controls:not([hidden])),.is-ranking .site-header:has(.account-controls:not([hidden])){flex-wrap:wrap;gap:8px 16px}
  .site-header:has(.account-controls:not([hidden])) .brand,.is-ranking .site-header:has(.account-controls:not([hidden])) .brand{flex-basis:auto;flex:1 1 auto;width:auto;min-width:0}
  .site-header:has(.account-controls:not([hidden])) nav.explore-nav,.is-ranking .site-header:has(.account-controls:not([hidden])) nav.explore-nav{order:2;width:100%;justify-content:flex-start}
  .account-controls{margin-left:0}
}
@media(max-width:600px){
  .account-name{font-size:.84rem}
  .site-header:has(.account-controls:not([hidden])),.is-ranking .site-header:has(.account-controls:not([hidden])){gap:6px 10px}
  .site-header:has(.account-controls:not([hidden])) nav.explore-nav,.is-ranking .site-header:has(.account-controls:not([hidden])) nav.explore-nav{justify-content:space-between}
  .site-header:has(.account-controls:not([hidden])) .brand,.is-ranking .site-header:has(.account-controls:not([hidden])) .brand{flex:1 1 100%}
  .account-controls{flex-basis:100%;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 12px}
  .account-note{text-align:left;max-width:none}
  .account-actions{justify-content:flex-start}
}
.saved-progress { max-width: 1200px; margin: 0 auto 1rem; padding: 0 1.5rem; color: #3d2c23; }
.saved-progress[hidden] { display: none; }
.saved-progress > details { border-bottom: 1px solid #d5c8b5; }
.saved-progress summary { padding: .8rem 0; cursor: pointer; font-size: .875rem; }
.saved-progress summary span:first-child { font-weight: 600; margin-right: .6rem; }
.saved-progress summary [role="status"] { color: #766658; }
.saved-progress-body { max-width: 850px; padding: .5rem 0 1.2rem; }
.saved-progress-body p, .saved-progress-body li { font-size: .9375rem; line-height: 1.6; }
.saved-progress-body h3 { font-size: 1.25rem; margin: 0 0 .5rem; }
.save-conflict, .guest-import { border: 1px solid #d5c8b5; background: #fffcf6; border-radius: .65rem; padding: 1.1rem; margin: 1rem 0; }
.save-copy-options { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.save-copy-options .button { white-space: normal; min-height: 44px; }
.saved-progress-tools { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.saved-progress button { min-height: 44px; }
.saved-progress button:focus-visible { outline: 2px solid #884a2e; outline-offset: 3px; }
.saved-progress-dialog { width:calc(100% - 32px); max-width:680px; max-height:85dvh; overflow:auto; }
.saved-progress-dialog h2 { font:400 2rem/1.2 var(--serif); }
.saved-progress-dialog p { font-size:1rem; }
.saved-progress-dialog button { min-height:44px; }
@media (max-width: 600px) {
  .saved-progress { padding: 0 1rem; }
  .saved-progress summary [role="status"] { display: block; margin-top: .3rem; }
  .save-copy-options { grid-template-columns: 1fr; }
  .guest-import > .button { width: 100%; margin-bottom: .4rem; }
}

@media(min-width:375px) and (max-width:600px){
  .site-header:has(.account-controls:not([hidden])) .brand,.is-ranking .site-header:has(.account-controls:not([hidden])) .brand{flex:1 1 auto;font-size:1.3rem}
  .account-controls{flex:0 0 auto;max-width:185px}
  .account-actions{gap:3px}
  .account-button{font-size:.75rem;padding-inline:7px}
}