/* /account/ only. Everything here is sc-acct- prefixed and built from ds.css tokens. */
.sc-acct-stack{display:grid;gap:var(--sc-4);min-width:0}
.sc-acct-stack>*{min-width:0}
.sc-acct-dash{gap:var(--sc-5)}
.sc-acct-loading{color:var(--sc-ink-2);font-weight:700}

/* signed out, MFA check, first-run setup: one panel, with a short side note from 900 px */
.sc-acct-out{display:grid;gap:var(--sc-5);align-items:start;max-width:1040px}
.sc-acct-out>*{min-width:0}
@media(min-width:900px){.sc-acct-out{grid-template-columns:minmax(0,520px) minmax(260px,1fr)}}
.sc-acct-panel{max-width:520px;width:100%}
.sc-acct-form{display:grid;gap:var(--sc-4);min-width:0}
.sc-acct-form>p{color:var(--sc-ink-2)}
.sc-acct-panel .sc-h2:focus{outline:0}
.sc-acct-select{appearance:auto;padding-right:var(--sc-2)}
.sc-acct-textarea{min-height:88px;padding-block:var(--sc-2);resize:vertical;line-height:1.45}
.sc-acct-code{max-width:11em;font-weight:700;letter-spacing:3px;font-variant-numeric:tabular-nums}
.sc-acct-pass{display:flex;gap:var(--sc-2);align-items:center}
.sc-acct-pass .sc-input{flex:1 1 auto;min-width:0}
.sc-acct-pass .sc-btn{flex:none;min-height:42px;min-width:56px}
.sc-acct-check{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--sc-3);align-items:start;font-size:var(--sc-fs-14);line-height:1.45;color:var(--sc-ink-2)}
.sc-acct-check input{width:24px;height:24px;margin:0;accent-color:var(--sc-navy-700)}
.sc-acct-submit{width:100%}
.sc-acct-agesum{font-size:var(--sc-fs-14)}
.sc-acct-msg{padding:var(--sc-2) var(--sc-3);border-radius:var(--sc-r-md);background:#fdecea;font-size:var(--sc-fs-14);line-height:1.4}
.sc-acct-msg--ok{background:#e7f4ec;color:var(--sc-ok);font-weight:700}
.sc-acct-linkbtn{display:inline;padding:0;border:0;background:none;color:var(--sc-navy-700);font-weight:700;font-size:var(--sc-fs-14);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sc-acct-linkbtn:hover{color:var(--sc-orange-700)}
.sc-acct-linkbtn[disabled]{opacity:.55;cursor:default}
.sc-acct-links{display:grid;gap:var(--sc-1)}
.sc-acct-links:empty{display:none}
.sc-acct-links li{display:flex}
.sc-acct-links .sc-acct-linkbtn{display:inline-flex;align-items:center;min-height:30px}
.sc-acct-social{display:grid;gap:var(--sc-3)}
.sc-acct-or{display:flex;align-items:center;gap:var(--sc-3);font-size:var(--sc-fs-13);font-weight:700;color:var(--sc-ink-3)}
.sc-acct-or::before,.sc-acct-or::after{content:"";flex:1;height:1px;background:var(--sc-line)}
.sc-acct-oauth{display:grid;gap:var(--sc-2)}
.sc-acct-oauth .sc-btn{min-height:44px;color:var(--sc-ink)!important;border-color:#aab6ca}
.sc-acct-facts{display:grid;gap:var(--sc-2);font-size:var(--sc-fs-14);color:var(--sc-ink-2)}
.sc-acct-facts li{padding-left:var(--sc-4);position:relative}
.sc-acct-facts li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--sc-orange-600)}

/* profile: one strip. Icon, who you are, two buttons. */
.sc-acct-profile-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sc-3) var(--sc-4);align-items:center}
.sc-acct-avatar{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--sc-r-md);background:var(--sc-navy-900);color:#fff}
.sc-acct-who{display:grid;gap:2px;min-width:0}
.sc-acct-name{font:900 clamp(24px,1vw + 18px,32px)/1.05 var(--sc-display);letter-spacing:.3px;text-transform:uppercase;color:var(--sc-navy-900);overflow-wrap:anywhere}
.sc-acct-email{font-size:var(--sc-fs-14);color:var(--sc-ink-2);overflow-wrap:anywhere}
.sc-acct-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--sc-3);font-size:var(--sc-fs-13);color:var(--sc-ink-3)}
.sc-acct-profile-actions,.sc-acct-edit,.sc-acct-profile-note{grid-column:1/-1}
@media(min-width:700px){
  .sc-acct-profile-in{grid-template-columns:auto minmax(0,1fr) auto}
  .sc-acct-profile-actions{grid-column:auto}
}
.sc-acct-edit{display:grid;gap:var(--sc-4);padding-top:var(--sc-4);border-top:1px solid var(--sc-line-2);max-width:520px}
.sc-acct-avatars{display:flex;flex-wrap:wrap;gap:var(--sc-2);margin:0;padding:0;border:0;min-width:0}
.sc-acct-avatars legend{padding:0;margin-bottom:6px;width:100%}
.sc-acct-avatar-opt{display:grid;place-items:center;width:48px;height:48px;border:1px solid #aab6ca;border-radius:var(--sc-r-md);background:#fff;color:var(--sc-navy-700);cursor:pointer}
.sc-acct-avatar-opt:hover{border-color:var(--sc-navy-700)}
.sc-acct-avatar-opt[aria-pressed=true]{background:var(--sc-navy-700);border-color:var(--sc-navy-700);color:#fff}

/* sync state: a dot plus words */
.sc-acct-sync{display:inline-flex;align-items:center;gap:6px;font-size:var(--sc-fs-13);font-weight:700;color:var(--sc-ok)}
.sc-acct-sync::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
.sc-acct-sync--warn{color:var(--sc-warn)}
.sc-acct-sync--warn::before{border-radius:1px;transform:rotate(45deg)}

/* your games: the ds card, with the status lines and a real button */
.sc-acct-count{font-size:var(--sc-fs-13);font-weight:700;white-space:nowrap}
.sc-acct-grid{--sc-card-min:220px}
/* laptops at 125% (about 1100 px wide): a slimmer rail and three cards across instead of two */
@media(min-width:1024px) and (max-width:1279px){.sc-acct-cols{grid-template-columns:minmax(0,1fr) 280px;gap:var(--sc-5)}.sc-acct-grid{--sc-card-min:186px}}
@media(min-width:1500px){.sc-acct-grid{--sc-card-min:240px}}
.sc-acct-when{font-size:var(--sc-fs-14);line-height:1.35;color:var(--sc-ink-2)}
.sc-acct-game .sc-card-hook{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sc-acct-again{margin-left:auto}
@media(hover:hover){.sc-card:hover .sc-acct-again{background:var(--sc-navy-900)}}
.sc-acct-more{justify-content:center}
/* phones: art on the left, words on the right, so eight saves fit in about two screens */
@media(max-width:559px){
  .sc-acct-grid{gap:var(--sc-3)}
  .sc-acct-game .sc-card-link{flex-direction:row}
  .sc-acct-game .sc-card-media{flex:0 0 32%;aspect-ratio:auto;min-height:100%}
  .sc-acct-game .sc-card-meta{gap:4px}
  .sc-acct-game .sc-acct-again{padding-inline:10px}
  .sc-acct-game .sc-card-media img{position:absolute;inset:0}
  .sc-acct-game .sc-card-body{padding:10px var(--sc-3)}
}

/* all games and privacy: closed by default, the summary is the whole header */
.sc-acct-all>summary,.sc-acct-privacy>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 var(--sc-3);padding:var(--sc-3) var(--sc-4);cursor:pointer;list-style:none;border-radius:7px}
.sc-acct-all>summary::-webkit-details-marker,.sc-acct-privacy>summary::-webkit-details-marker{display:none}
.sc-acct-all>summary>span,.sc-acct-privacy>summary>span{grid-column:1}
.sc-acct-all>summary::after,.sc-acct-privacy>summary::after{content:"";grid-column:2;grid-row:1/span 2;margin-right:4px;width:9px;height:9px;border-right:2px solid var(--sc-navy-700);border-bottom:2px solid var(--sc-navy-700);transform:rotate(45deg) translate(-2px,-2px);transition:transform .12s ease}
.sc-acct-all[open]>summary::after,.sc-acct-privacy[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.sc-acct-all>summary:hover .sc-acct-all-title,.sc-acct-privacy>summary:hover .sc-acct-all-title{color:var(--sc-orange-700)}
.sc-acct-all-title{font:800 var(--sc-fs-18)/1.25 var(--sc-body);color:var(--sc-ink)}
.sc-acct-all-hint{font-size:var(--sc-fs-14);color:var(--sc-ink-3)}
.sc-acct-all[open]>summary,.sc-acct-privacy[open]>summary{border-bottom:1px solid var(--sc-line-2);border-radius:7px 7px 0 0}
.sc-acct-rows{--sc-card-min:270px;gap:0 var(--sc-5)}
.sc-acct-rows>li>.sc-card--compact{border-top:0;border-bottom:1px solid var(--sc-line-2)}
.sc-acct-rows .sc-card--compact .sc-card-media{flex-basis:96px}
.sc-acct-requests{display:grid;gap:var(--sc-1);font-size:var(--sc-fs-13);color:var(--sc-ink-2)}
.sc-acct-import{border-left:4px solid var(--sc-orange-600)}
.sc-acct-dash .sc-side p,.sc-acct-import p{font-size:var(--sc-fs-14);color:var(--sc-ink-2)}
.sc-acct-dash .sc-linklist a{font-size:var(--sc-fs-14)}

/* Miniclip pass (Nov 14 evening): every settings card gets the navy header bar, same as the boxes on the home page */
.sc-acct-dash .sc-side .sc-box-body>.sc-h3:first-child{margin:calc(var(--sc-4) * -1) calc(var(--sc-4) * -1) var(--sc-1);padding:11px var(--sc-4);background:var(--sc-navy-800);color:#fff;font-size:var(--sc-fs-16);border-radius:calc(var(--sc-r-md) - 1px) calc(var(--sc-r-md) - 1px) 0 0}
@media(min-width:700px){.sc-acct-dash .sc-side .sc-box-body>.sc-h3:first-child{margin:calc(var(--sc-5) * -1) calc(var(--sc-5) * -1) var(--sc-1);padding:11px var(--sc-4)}}
.sc-acct-dash .sc-acct-import{border-left:1px solid var(--sc-line)}
.sc-acct-dash .sc-acct-import .sc-box-body>.sc-h3:first-child{background:var(--sc-orange-700)}
.sc-acct-dash .sc-head .sc-acct-count{color:#c9d5ea}