/* Accounts and scoring share the existing arcade palette. */
.arcade-modes-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.account-header{max-width:175px;gap:7px}.account-header span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-header .icon{width:17px;height:17px;flex-shrink:0}
.account-panel{display:flex;align-items:center;gap:21px;border:1px solid #426078;background:linear-gradient(110deg,#123c58,#072139);padding:24px;border-radius:18px;margin:0 0 24px;color:#fff}
.account-avatar{width:61px;height:61px;border:2px solid #ffdf43;border-radius:50%;display:grid;place-items:center;color:#ffdf43;background:#1b5068;flex-shrink:0}
.account-avatar .icon{width:30px;height:30px}.account-panel h2{color:#fff;font-size:23px;overflow-wrap:anywhere;margin:6px 0}.account-panel p{color:#c2d4e2;font-size:12px;line-height:1.6;margin:0;max-width:550px}
.account-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}.account-actions .text-button{font-size:12px;color:#ffdf43}
.account-settings-login{margin-block:16px}.account-logout{margin-top:15px}
.auth-dialog{max-width:470px}.auth-submit{margin-top:24px}.auth-switch{text-align:center;margin:22px 0 0;color:#b8cfe0;font-size:12px}.auth-switch .text-button{display:inline-flex;color:#ffe454;font-size:12px;margin-left:5px}
.auth-dialog input{width:100%;min-height:48px}.auth-dialog .field-help{font-size:11px;line-height:1.5}
.scoring-options{border:0;padding:0;margin:22px 0;display:grid;grid-template-columns:1fr 1fr;gap:11px;min-width:0}.scoring-options legend{margin-bottom:10px}.scoring-options label{position:relative;display:block;cursor:pointer;min-width:0}
.scoring-options input{position:absolute;top:14px;right:12px;width:17px;height:17px;accent-color:#ffe147;z-index:1}
.scoring-options label>span{display:flex;height:100%;flex-direction:column;align-items:flex-start;border:1px solid #436078;border-radius:12px;padding:15px 12px;background:#092a43;color:#fff;gap:9px}
.scoring-options input:checked+span{border-color:#ffe147;background:#153c54;box-shadow:inset 0 0 0 1px #ffe147}
.scoring-options input:focus-visible+span{outline:3px solid #fff;outline-offset:3px}
.scoring-options span>.icon{height:22px;width:22px;color:#ffe147}.scoring-options strong{font-size:13px;line-height:1.3}.scoring-options small{font-size:10px;line-height:1.5;color:#c7d9e7}
.scoring-filters{margin-bottom:19px;display:flex;flex-wrap:wrap;gap:8px}.scoring-filters button{display:inline-flex;align-items:center;gap:6px}.scoring-filters .icon{width:15px;height:15px}
.daily-rule-note{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;line-height:1.6;color:#ffdf69;margin:19px auto;max-width:640px}.daily-rule-note .icon{flex-shrink:0}
@media(max-width:1000px){.header-tools .sound-toggle{display:none}.desktop-nav{gap:4px}.desktop-nav .nav-link{padding-inline:8px}.account-header{max-width:145px}}
@media(max-width:760px){.account-panel{flex-wrap:wrap;gap:14px;padding:20px}.account-panel>div:not(.account-actions){flex:1;min-width:190px}.account-actions{width:100%;margin-left:0;flex-direction:row;justify-content:flex-start}.account-panel h2{font-size:20px}}
@media(max-width:660px){.arcade-modes-grid{grid-template-columns:1fr}.account-header{font-size:11px;padding:8px;max-width:142px;min-height:35px}.account-header .icon{display:none}.header-inner{gap:8px}.header-tools{gap:6px}.brand .wordmark{font-size:20px}.brand-icon{width:28px}.account-panel{padding:17px}.account-panel p{font-size:11px}.account-avatar{width:48px;height:48px}.account-panel>div:not(.account-actions){min-width:180px}.scoring-options{gap:8px}.scoring-options strong{font-size:12px}.scoring-options small{font-size:10px}.daily-rule-note{font-size:11px}.game-meta{flex-wrap:wrap}}
@media(max-width:360px){.account-header{max-width:119px;font-size:10px}.header-inner{gap:5px}.brand .wordmark{font-size:18px}.brand-icon{width:25px}.header-tools{gap:4px}}

/* Fit account actions beside the brand without reducing touch targets. */
@media (max-width: 660px) {
  .header-inner:has(.account-header) { gap: 8px; }
  .header-inner:has(.account-header) .brand { flex-shrink: 0; gap: 7px; }
  .header-tools:has(.account-header) { min-width: 0; gap: 6px; flex: 1; justify-content: flex-end; }
  .header-tools .account-header { min-width: 0; max-width: 142px; min-height: 44px; padding: 9px 8px; font-size: 12px; line-height: 1.3; }
  .header-tools .mobile-menu-button { width: 44px; height: 44px; flex-shrink: 0; }
  .account-panel { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 17px; }
  .account-panel > div:not(.account-actions) { min-width: 0; }
  .account-panel .eyebrow { font-size: 11px; line-height: 1.4; letter-spacing: .04em; }
  .account-panel h2 { font-size: 20px; line-height: 1.25; }
  .account-panel p { font-size: 13px; line-height: 1.6; }
  .account-actions { grid-column: 1 / -1; min-width: 0; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
  .account-actions .button,
  .account-actions .text-button { min-height: 44px; font-size: 13px; }
  .scoring-filters { gap: 8px; }
  .scoring-filters button { min-height: 44px; font-size: 12px; }
  .daily-rule-note { font-size: 12px; line-height: 1.6; }
}

@media (max-width: 660px), (max-width: 950px) and (max-height: 500px) {
  .auth-dialog .auth-switch { font-size: 13px; line-height: 1.6; margin-top: 18px; }
  .auth-dialog .auth-switch .text-button { font-size: 14px; min-height: 44px; padding-inline: 5px; }
  .auth-dialog .field-help { font-size: 12px; line-height: 1.6; }
  .scoring-options { gap: 10px; }
  .scoring-options label > span { padding: 14px 12px; gap: 10px; }
  .scoring-options strong { font-size: 13px; line-height: 1.4; }
  .scoring-options small { font-size: 12px; line-height: 1.5; }
}

@media (max-width: 360px) {
  .header-inner:has(.account-header) { gap: 6px; }
  .header-inner:has(.account-header) .brand { gap: 6px; }
  .header-tools .account-header { max-width: 112px; }
  .scoring-options { grid-template-columns: minmax(0, 1fr); }
  .scoring-options label > span { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 6px 12px; }
  .scoring-options span > .icon { grid-row: 1 / 3; }
  .scoring-options strong { padding-right: 24px; }
  .scoring-options small { grid-column: 2; }
}