/* Account navigation and forms use the same cream, coral and navy as the homepage. */
.account-mode{--muted:#575c68;--paper:#fffaf2;background:#fffaf2}
.account-mode #app>.account-header{border-bottom:1px solid #ddd7ce;max-width:1240px;margin:auto}
.account-mode .account-header nav>a{padding:10px 0;font-size:13px;font-weight:700}
.account-mode .account-header nav>a[aria-current]{color:#b83e2c}
.account-help-menu{position:relative;align-self:center}
.account-help-menu>summary{cursor:pointer;min-height:44px;padding:12px 8px;font-size:13px;font-weight:700}
.account-help-menu>div{position:absolute;right:0;top:100%;z-index:20;min-width:225px;background:#fffdf8;border:1px solid #ddd7ce;border-radius:14px;box-shadow:0 12px 32px #20294218;padding:9px;display:grid}
.account-help-menu>div>a,.account-mode .account-help-menu>div>button{display:block;text-align:left;padding:12px;border-radius:7px;font-size:13px;min-height:44px;color:#202942}
.account-help-menu>div>a:hover,.account-help-menu>div>button:hover{background:#fbe9dd}
.account-mode .account-home{max-width:1120px;margin:auto;padding:40px 24px 24px}
.account-welcome{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}
.account-welcome>div{min-width:0}
.account-mode .account-welcome h1{font-size:clamp(34px,4.4vw,54px);margin:12px 0;overflow-wrap:anywhere}
.account-welcome p{margin:0}
.welcome-avatar{width:88px;height:88px;flex:0 0 88px;display:grid;place-items:center;border-radius:50%;background:#f3c8b1;overflow:hidden;font-size:40px}
.welcome-avatar img{width:100%;height:100%;object-fit:cover}
.account-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 28px;align-items:stretch;text-align:left}
.account-shortcut{display:grid;grid-template-columns:44px minmax(0,1fr) 18px;align-items:start;gap:14px;padding:24px 20px;border:1px solid #ddd7ce;border-radius:16px;background:#fffdf8;color:#202942;min-width:0;text-decoration:none;transition:background .15s,border-color .15s}
.account-shortcut:first-child{background:#b83e2c;color:#fffaf2;border-color:#b83e2c}
.account-shortcut:hover{background:#fbe9dd;border-color:#b83e2c;color:#202942}
.account-shortcut:first-child:hover{background:#96301f;color:#fffaf2}
.account-shortcut.is-current{box-shadow:0 0 0 2px #b83e2c}
.shortcut-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:#d8e6f0;font-size:30px;line-height:1}
.account-shortcut:first-child .shortcut-icon{background:#ffffff26}
.shortcut-copy{min-width:0}
.shortcut-copy strong{display:block;font-size:20px;line-height:1.2;letter-spacing:-.035em;overflow-wrap:anywhere}
.account-mode .shortcut-copy small{display:block;font-size:12px;line-height:1.5;margin-top:9px;color:#575c68}
.account-mode .account-shortcut:first-child small{color:#fffaf2}
.shortcut-arrow{font-size:20px;line-height:1.2}
.shortcut-count{display:inline-flex;font-size:11px;vertical-align:middle;align-items:center;justify-content:center;min-width:20px;height:20px;background:#d8e6f0;border-radius:50%;letter-spacing:0}
.account-shortcuts.is-compact .account-shortcut{padding:18px 14px;gap:10px;grid-template-columns:34px minmax(0,1fr) 14px}
.account-shortcuts.is-compact .shortcut-icon{width:32px;height:32px;font-size:25px;border-radius:8px}
.account-shortcuts.is-compact .shortcut-copy strong{font-size:17px}
.account-shortcuts.is-compact .shortcut-copy small{font-size:11px}
.account-join-banner{display:flex;align-items:center;gap:20px;background:#d8e6f0;border-radius:16px;padding:24px;margin:0 0 28px}
.account-join-banner>div{flex:1;min-width:0}
.join-banner-icon{font-size:44px;line-height:1;color:#202942}
.account-mode .account-join-banner h2{font-size:24px;margin:0 0 7px}
.account-join-banner p{margin:0}
.account-join-banner>button{flex-shrink:0;background:#fffaf2!important;border-color:#c0cbd5!important}
.account-mode .account-home>.panel{padding:30px;margin:0 0 24px}
.account-section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.account-mode .account-section-heading h2{font-size:32px;margin:8px 0 0}
.saved-total{display:grid;place-items:center;min-width:36px;height:36px;padding:0 9px;border-radius:50%;background:#f3c8b1;font-weight:800}
.account-mode .saved-games{scroll-margin-top:20px;clear:both}
.account-mode .saved-game-group>h3{font-size:15px;letter-spacing:0;margin:28px 0 12px}
.account-mode .saved-games .open-game{grid-template-columns:minmax(0,1fr) auto;gap:20px;padding:20px 0}
.saved-game-copy{min-width:0}
.saved-game-role{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#b83e2c;font-weight:800}
.saved-game-copy h4{font-size:21px;margin:7px 0;overflow-wrap:anywhere;letter-spacing:-.025em}
.account-mode .saved-games .open-game-people{font-size:13px;line-height:1.5}
.account-mode .saved-games .open-game>.row{gap:10px;flex-direction:column;align-items:stretch;grid-row:auto;grid-column:auto;min-width:125px}
.account-mode .saved-games .open-game>.row>button{width:auto;min-height:44px;padding:10px 15px}
.account-mode .saved-game-remove{color:#575c68;font-size:12px;background:transparent}
.account-empty{border-top:1px solid #ddd7ce;text-align:center;padding:24px 16px 6px;margin-top:22px}
.account-empty>span{font-size:37px;color:#b83e2c}
.account-mode .account-empty h3{font-size:21px;letter-spacing:-.025em;margin:12px 0}
.account-empty p{max-width:430px;margin:0 auto 20px}
.account-mode .account-home>.account-secondary-panel{padding:20px 24px}
.account-secondary-panel>summary,.account-membership-details>summary{cursor:pointer;font-size:17px;font-weight:800;min-height:44px;padding:10px 0}
.account-secondary-panel p{margin-top:16px}
.account-footer{display:flex;flex-wrap:wrap;gap:16px 24px;padding:22px 0;margin:15px 0 0;border-top:1px solid #ddd7ce;clear:both}
.account-footer>a{font-size:12px;color:#575c68;text-underline-offset:4px}
.account-footer>a:hover{text-decoration:underline}
.account-mode .account-create{max-width:850px;margin-inline:auto!important}
.account-back{font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.account-setup-steps{display:flex;flex-wrap:wrap;gap:12px 25px;list-style:none;padding:18px 0 22px;border-bottom:1px solid #ddd7ce;margin:0 0 24px;counter-reset:setup}
.account-setup-steps li{counter-increment:setup;font-size:12px;font-weight:700}
.account-setup-steps li:before{content:counter(setup);display:inline-grid;place-items:center;width:23px;height:23px;margin-right:8px;background:#f3c8b1;border-radius:50%;font-size:11px}
.account-mode #create label,.account-mode #create input,.account-mode #create select{max-width:100%}
.account-mode #create select{width:100%;display:block;margin:8px 0 0}
.account-game-options{border:1px solid #ddd7ce;border-radius:12px;min-width:0;padding:18px 20px;margin:24px 0;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.account-game-options legend{font-size:16px;font-weight:800;padding:0 8px}
.account-game-options>p{grid-column:1/-1;margin:0;font-size:13px}
.account-mode .creation-setup{padding:18px 20px;margin:24px 0;border-color:#ddd7ce}
.account-mode .creation-setup legend{font-size:16px}
.account-mode .creation-setup h3{font-size:20px}
.account-create-submit{padding-top:20px;margin-top:24px;border-top:1px solid #ddd7ce;display:grid;gap:12px}
.account-create-submit p{margin:0;font-size:14px}
.account-create-submit>button{justify-self:start}
.account-create-submit>small{font-size:12px}
.account-mode .profile-page>.account-shortcuts{margin-top:24px}
.account-mode #profile-avatar-group{display:block;width:100%;margin:8px 0 18px}
.account-mode .avatar-picker [data-avatar-group][hidden]{display:none}
.account-mode .profile-page{max-width:1000px}
.account-mode .profile-person label{min-width:0}
.account-mode .circle-account-page>.account-shortcuts{margin-top:0}
.account-mode .circle-account-heading{background:#f3c8b1}
.account-membership-details{border-top:1px solid #ddd7ce;margin-top:30px;padding-top:14px}
.account-membership-details>.circle-membership{margin-top:16px;padding:26px}
.account-mode .join-phone-page{padding:32px}
.account-mode .join-phone-page h1{font-size:36px;overflow-wrap:anywhere}
.account-mode .join-phone-page label select{margin:8px 0 0}
.account-mode .join-phone-page #join>button{width:100%}
@media(max-width:900px){
 .account-shortcut{grid-template-columns:34px minmax(0,1fr);padding:20px 16px;gap:11px}
 .shortcut-icon{width:32px;height:32px;font-size:25px}
 .shortcut-arrow{display:none}
 .shortcut-copy strong{font-size:19px}
 .account-join-banner{flex-wrap:wrap}
 .account-join-banner>button{margin-left:64px}
}
@media(max-width:760px){
 .account-mode #app>.account-header{gap:12px;padding:16px 20px}
 .account-mode .account-header nav{width:100%;justify-content:space-between;gap:8px;font-size:12px}
 .account-mode .account-header nav>a{font-size:12px;min-height:44px;padding:12px 0}
 .account-help-menu>summary{font-size:12px}
 .account-mode .account-home{padding:26px 16px 16px}
 .account-welcome{margin-bottom:22px;gap:14px}
 .account-mode .account-welcome h1{font-size:36px;line-height:1.1}
 .account-welcome .eyebrow{font-size:9px}
 .account-welcome p{font-size:14px}
 .welcome-avatar{width:62px;height:62px;flex-basis:62px}
 .account-shortcuts,.account-shortcuts.is-compact{grid-template-columns:1fr;gap:10px;margin-bottom:22px}
 .account-shortcut,.account-shortcuts.is-compact .account-shortcut{grid-template-columns:38px minmax(0,1fr) 18px;padding:16px;gap:13px;align-items:center;border-radius:13px}
 .account-shortcuts .shortcut-icon,.account-shortcuts.is-compact .shortcut-icon{width:36px;height:36px;font-size:27px}
 .account-shortcuts .shortcut-copy strong,.account-shortcuts.is-compact .shortcut-copy strong{font-size:19px}
 .account-shortcuts .shortcut-copy small,.account-shortcuts.is-compact .shortcut-copy small{font-size:12px;margin-top:4px}
 .shortcut-arrow{display:block}
 .account-join-banner{padding:21px;gap:15px;border-radius:14px;margin-bottom:22px}
 .join-banner-icon{font-size:32px}
 .account-mode .account-join-banner h2{font-size:23px}
 .account-join-banner p{font-size:13px}
 .account-join-banner>button{width:100%;margin:0;font-size:13px}
 .account-mode .account-home>.panel{padding:24px 20px;margin-bottom:20px}
 .account-mode .account-section-heading h2{font-size:27px}
 .account-mode .account-home>.account-secondary-panel{padding:16px 20px}
 .account-secondary-panel>summary{font-size:16px}
 .account-mode .saved-games .open-game{grid-template-columns:minmax(0,1fr);gap:14px}
 .account-mode .saved-games .open-game>.row{grid-column:auto;grid-row:auto;flex-direction:row;flex-wrap:wrap;gap:6px}
 .account-mode .saved-games .open-game>.row>button{flex:1;min-width:110px;padding:10px;font-size:13px}
 .saved-game-copy h4{font-size:20px}
 .account-game-options{grid-template-columns:1fr;gap:0;padding:14px;margin:22px 0}
 .account-mode .creation-setup{padding:14px}
 .account-setup-steps{gap:11px;flex-direction:column}
 .account-create-submit>button{width:100%;justify-self:stretch;font-size:14px;padding:14px 12px}
 .account-footer{gap:14px 20px}
 .account-mode .profile-page{padding:25px 20px}
 .account-mode .profile-page .account-shortcut{padding:13px 12px}
 .account-mode .circle-account-page{padding-top:26px}
 .account-mode .circle-account-heading{padding:22px;margin-bottom:22px}
 .account-mode .circle-account-heading h1{font-size:40px}
 .account-membership-details>.circle-membership{padding:22px 18px}
 .account-mode .join-phone-page{margin:24px 16px;max-width:calc(100% - 32px);padding:26px 22px}
 .account-mode .join-phone-page h1{font-size:32px}
 .account-mode .identity-intro h1{font-size:40px}
}
@media(max-width:360px){
 .account-mode #app>.account-header{padding-inline:16px}
 .account-welcome .welcome-avatar{display:none}
 .account-mode .account-welcome h1{font-size:33px}
 .account-mode .account-header nav>a,.account-help-menu>summary{font-size:11px}
 .account-shortcuts .shortcut-copy strong,.account-shortcuts.is-compact .shortcut-copy strong{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.account-shortcut{transition:none}}