/* Nät-hårdning: the fonts come from this server (client/src/assets/fonts, SIL OFL 1.1, licences beside them), never from
   Google: every phone would otherwise send its address to Google. Nunito is declared in style.css. */
@font-face{font-family:'Lilita One';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/lilita-one-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lilita One';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/lilita-one-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Patrick Hand';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/patrick-hand-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Patrick Hand';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/patrick-hand-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Account flow (sign-in, onboarding, family home). It lives INSIDE the start page's right-hand card (app.js landing(),
   .welcome-folder > .role-panel, Alexander's start page): account/ui.js puts one persistent .acct element into the host
   tab's panel and marks the panel .acct-panel. It wears the start screen's look (game-world.css): dark teal words,
   pale green fields, a green 3D button and teal tabs; the values are copied here because everything is scoped under
   .acct, so the game screens are untouched. The hero with the living sky, the easel and the plants is gone (2026-10-21). */

.acct{
 --a-paper:#fffcf0;--a-edge:#e8d8ad;--a-ink:#214c52;--a-muted:#49686b;--a-line:#b5d4ca;--a-field:#edf2df;--a-water:#a9dfdd;
 --a-teal:#167568;--a-teal-hi:#269483;--a-teal-base:#09564d;--a-tab:#257e80;--a-sky:#d7f1ec;
 --a-yellow:#ffd16a;--a-yellow-hi:#ffe39c;--a-yellow-base:#bd9145;--a-coral:#ed8066;
 --a-err:#a3392a;--a-err-bg:#fde6df;--a-ok:#1f6a4c;--a-ok-bg:#e3f3e2;--a-ease:cubic-bezier(.16,1,.3,1);
 position:relative;color:var(--a-ink);font-family:Nunito,ui-rounded,system-ui,sans-serif;
}
.acct ::selection{background:var(--a-yellow);color:var(--a-ink)}
.acct :focus-visible{outline:3px solid #784720;outline-offset:4px}
.acct #acct-heading:focus,.acct #acct-heading:focus-visible{outline:none}
.acct-sr{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.acct [hidden]{display:none!important}

/* ---------- The card: the start page's own panel ----------
   Shared size for account screens (founder decision 2026-10-21); Topplista gets a wider grid on large screens (2026-11-07).
   The width comes from the start page's grid, never
   from the content, and on wider screens the panel has one fixed height on both tabs; a long account screen scrolls
   inside it (.acct-card-inner) and shows an arrow at the foot while there is more. Phones: the start page's own
   stacking (hero on top, card below), natural height. */
.welcome-folder>.role-panel.acct-panel{--paper:#fffcf0;--panel-edge:#e8d8ad;--ink:#214c52;background:var(--paper);overflow-x:clip}
.acct-card{position:relative}
.acct-card-inner{position:relative;container:acct/inline-size}
@media (min-width:721px){
 .welcome-folder>.role-panel{--fold-h:clamp(460px,calc(100dvh - 250px),640px);height:var(--fold-h);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#b5d4ca transparent}
 .welcome-folder>.role-panel.acct-panel{display:flex;flex-direction:column;padding:0;overflow:hidden}
 .acct-panel>.acct{flex:1;min-height:0;display:flex;flex-direction:column}
 .acct-panel .acct-card{flex:1;min-height:0;display:flex;flex-direction:column}
 .acct-panel .acct-card-inner{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:26px 28px 24px;scrollbar-width:thin;scrollbar-color:#b5d4ca transparent}
 .acct-card::after{content:"";position:absolute;left:50%;bottom:4px;width:26px;height:22px;margin-left:-13px;pointer-events:none;opacity:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23167568' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/26px no-repeat}
 .acct-card.has-more::after{opacity:1}
}
/* The start page's own panel padding at its own break points (game-world.css), moved onto the scrolling part. */
@media (min-width:721px) and (max-width:1000px){.acct-panel .acct-card-inner{padding:24px}}
/* Phones: the panel keeps its own padding, and both tabs get the same least height so a tab switch or a short screen
   does not make the page jump. Longer screens grow the card, and the page scrolls as before. */
@media (max-width:720px){.welcome-folder>.role-panel{min-height:480px}}
/* The wordmark is the panel's small kicker line above the heading ("NÄSTA STOPP: SPELKVÄLL" on the game setup). */
.acct-wordmark{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:10px;line-height:1.2;font-weight:1000;letter-spacing:1.7px;text-transform:uppercase;color:var(--a-muted)}

/* The way back from the game setup (app.js's form) to Familjens hem, added by account/index.js above its kicker. */
.acct-setup-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:-10px 0 4px -4px;padding:6px 4px;border:0;background:none;box-shadow:none;color:var(--ink);font-size:15px;font-weight:900;text-decoration:underline;text-underline-offset:4px}
.acct-setup-back .acct-icon{width:18px;height:18px;flex:none}
button.acct-setup-back:active:not(:disabled){transform:none;box-shadow:none}
.welcome-folder .role-panel h2[tabindex="-1"]:focus{outline:none}

/* ---------- Type ---------- */
/* Every screen's heading is an h2: the start page's h1 is the hero's. Same size as the game setup's h2. */
.acct #acct-heading{font-family:Nunito,ui-rounded,system-ui,sans-serif;font-weight:700;font-size:28px;line-height:1.2;letter-spacing:-.025em;color:var(--a-ink);margin:0 0 8px}
.acct h3,.acct .acct-subhead{font-family:Nunito,ui-rounded,system-ui,sans-serif;font-weight:700;font-size:21px;line-height:1.2;letter-spacing:-.025em;color:var(--a-ink)}
.acct-subhead{margin:30px 0 8px}
.acct p{line-height:1.55}
.acct-lede{font-size:14px;line-height:1.5;color:var(--a-ink);margin:0 0 20px;max-width:60ch}
.acct-lede b,.acct-address{color:var(--a-ink);font-weight:1000;overflow-wrap:anywhere}
.acct-hint{font-size:12px;line-height:1.45;color:var(--a-muted);margin:6px 0 0}
.acct-aside{margin:22px 0 0;text-align:center}

/* ---------- Icons ---------- */
.acct .acct-icon{display:inline-block;width:20px;height:20px;flex:none}
.acct .acct-spinner{display:inline-block;width:20px;height:20px;flex:none}
.acct-wait{color:var(--a-teal);margin-bottom:18px}
.acct-wait .acct-spinner{width:44px;height:44px}

/* ---------- Fields: the start screen's pale green inputs ---------- */
.acct fieldset{border:0;margin:0;padding:0;min-width:0}
.acct legend{padding:0;margin:0 0 6px;font-size:14px;font-weight:800;color:var(--a-ink)}
.acct-field{margin:0 0 4px}
.acct-field label{display:block;margin:0 0 6px;font-size:14px;font-weight:800;color:var(--a-ink)}
.acct input[type=text],.acct input[type=email]{width:100%;min-height:48px;padding:10px 12px;border:2px solid var(--a-line);border-radius:13px;background:var(--a-field);color:var(--a-ink);font-size:16px;font-weight:800;caret-color:var(--a-teal);box-shadow:inset 0 2px 0 #214c5208}
.acct input[type=text]:focus,.acct input[type=email]:focus{border-color:var(--a-teal)}
.acct input[aria-invalid=true]{border-color:var(--a-coral);box-shadow:0 0 0 3px rgba(237,128,102,.25)}
.acct-error,.acct-ok,.acct-alert,.acct-note{display:flex;align-items:flex-start;gap:8px;font-size:15px;font-weight:800;line-height:1.45;margin:8px 0 0}
.acct-error{color:var(--a-err)}
.acct-ok{color:var(--a-ok);min-height:0}
.acct-ok:empty{display:none}
.acct-error .acct-icon,.acct-ok .acct-icon,.acct-alert .acct-icon,.acct-note .acct-icon{margin-top:1px}
.acct-alert{color:var(--a-err);background:var(--a-err-bg);border:2px solid #f3b4a3;border-radius:14px;padding:12px 14px;margin-top:16px}
.acct-note{color:var(--a-ok);background:var(--a-ok-bg);border:2px solid #b9dcb8;border-radius:14px;padding:12px 14px;margin:0 0 18px}

/* ---------- Buttons ---------- */
/* :where keeps this at class weight, or it beats every button class below and all buttons draw at weight 400. */
.acct :where(button){font:inherit}
.acct-primary,.acct-secondary,.acct-quiet,.acct-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-align:center;text-decoration:none;cursor:pointer}
/* The primary button is the start screen's "Skapa lobby": a green face on a darker green side (the 5px shadow).
   Pressing it sinks the face onto the side. */
.acct-primary{--side:5px;position:relative;min-height:54px;margin-bottom:var(--side);padding:11px 18px;border:2px solid #ffffff40;border-radius:16px;background:linear-gradient(var(--a-teal-hi),var(--a-teal));color:#fffdf0;font-size:17px;font-weight:900;text-shadow:0 1px 1px #164d5050;box-shadow:0 var(--side) 0 var(--a-teal-base),inset 0 1px 0 #ffffff40}
.acct form>.acct-primary{width:100%;margin-top:22px}
/* Hover lifts, pressing sinks: the start screen's own motion, no colour change. */
@media (hover:hover){.acct-primary:hover:not(:disabled),.acct-secondary:hover:not(:disabled),.acct-quiet:hover:not(:disabled){transform:translateY(-2px)}}
.acct-primary:active:not(:disabled){transform:translateY(3px) scale(.98);box-shadow:0 1px 0 var(--a-teal-base),inset 0 1px 0 #ffffff40}
/* Busy or disabled: held halfway down and a little greyer, with the spinner and its words on the face.
   opacity:1 overrides style.css's global button:disabled fade, which would sink the text contrast. */
.acct-primary:disabled{opacity:1;cursor:progress;transform:translateY(2px);box-shadow:0 3px 0 var(--a-teal-base);filter:saturate(.7)}
/* The start screen's yellow button. */
.acct-secondary{min-height:46px;margin-bottom:5px;padding:11px 18px;border:2px solid #fff8d9;border-radius:12px;background:linear-gradient(var(--a-yellow-hi),var(--a-yellow));color:#3b4c43;font-size:16px;font-weight:900;box-shadow:0 5px 0 var(--a-yellow-base)}
.acct-secondary:active:not(:disabled){transform:translateY(3px) scale(.98);box-shadow:0 1px 0 var(--a-yellow-base)}
.acct-secondary:disabled{opacity:.8;cursor:not-allowed;font-variant-numeric:tabular-nums}
/* The start screen's small cream pill ("Ljud på"). */
.acct-quiet{min-height:44px;margin-bottom:3px;padding:11px 18px;border:2px solid var(--a-edge);border-radius:13px;background:var(--a-paper);color:var(--a-ink);font-size:16px;font-weight:900;box-shadow:0 3px 0 var(--a-edge)}
.acct-quiet:active:not(:disabled){transform:translateY(3px) scale(.98);box-shadow:0 1px 0 var(--a-edge)}
.acct-quiet:disabled{opacity:.5;cursor:not-allowed}
.acct-link{min-height:44px;padding:8px 4px;border:0;background:none;color:var(--a-ink);font-size:16px;font-weight:900;text-decoration:underline;text-underline-offset:4px}
.acct-link:hover{color:var(--a-teal)}
.acct-link-small{min-height:44px;font-size:14px}
.acct-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:6px}
.acct-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:30px}
.acct-actions-stack{flex-direction:column;align-items:stretch}

/* ---------- Owl and envelope (signature moment) ----------
   She perches in the card's top right corner, beside the heading, and flies off with the envelope. */
.acct-owl{position:absolute;z-index:3;top:4px;right:6px;width:92px;height:92px;pointer-events:none}
.acct-owl+#acct-heading{padding-right:84px}
.acct-owl img{display:block;width:100%;height:100%;filter:drop-shadow(0 6px 6px rgba(23,68,72,.3))}
.acct-envelope{position:absolute;left:44px;bottom:12px;width:44px;opacity:0;transform:scale(.4)}
.acct-envelope svg{display:block;width:100%;height:auto}
.acct-owl.is-flying .acct-envelope{opacity:1;transform:none}
.acct-owl.is-landing .acct-envelope,.acct-owl.is-waiting .acct-envelope{opacity:1;transform:none;left:-30px;bottom:23px}

/* ---------- Stepping stones ---------- */
.acct-stones{position:relative;max-width:330px;margin:0 0 20px}
.acct-stones-path{position:absolute;left:0;top:2px;width:100%;height:40px;color:var(--a-line)}
.acct-stones ol{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;list-style:none}
.acct-stones li{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;font-weight:900;line-height:1.25;color:var(--a-muted);text-align:center}
.acct-stones li.is-current{color:var(--a-ink)}
.acct-stone{width:54px;height:44px;flex:none}
.acct-stone-base{fill:var(--a-edge)}
.acct-stone-top{fill:var(--a-field);stroke:var(--a-line);stroke-width:2}
.acct-stone-num{font-family:Nunito,sans-serif;font-weight:1000;font-size:18px;fill:var(--a-ink)}
.is-done .acct-stone-top{fill:var(--a-yellow);stroke:#d9a94a}
.is-done .acct-stone-mark{stroke:var(--a-ink)}
.is-current .acct-stone-base{fill:var(--a-teal-base)}
.is-current .acct-stone-top{fill:var(--a-teal);stroke:var(--a-teal-hi)}
.is-current .acct-stone-num{fill:var(--a-paper)}

/* ---------- Animal pickers ---------- */
.acct .acct-picker{margin-top:30px}
.acct-picker .acct-hint{margin:-4px 0 12px}
.acct-pick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.acct-pick,.acct-mini-choice,.acct-seg-row label{position:relative;display:block;cursor:pointer;min-width:0}
.acct-pick input,.acct-mini-choice input,.acct-seg-row input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;opacity:0;cursor:pointer}
.acct-pick-face,.acct-mini-face{position:relative;display:block;aspect-ratio:1;border:3px solid var(--a-line);border-radius:18px;background:var(--a-field)}
.acct-pick-face img,.acct-mini-face img{display:block;width:100%;height:100%;object-fit:contain}
.acct-pick-face{padding:8%}
.acct-pick-name{display:block;margin-top:5px;font-size:13px;font-weight:900;text-align:center;color:var(--a-muted)}
.acct-pick input:checked+.acct-pick-face,.acct-mini-choice input:checked+.acct-mini-face{border-color:var(--a-teal);background:var(--a-water)}
.acct-pick input:checked~.acct-pick-name{color:var(--a-ink)}
/* A check badge, so the choice never depends on colour alone. */
.acct-pick input:checked+.acct-pick-face::after,.acct-mini-choice input:checked+.acct-mini-face::after{content:"";position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;background:var(--a-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fffcf0' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4 4 9-9'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:0 2px 3px rgba(23,68,72,.3)}
.acct-pick input:focus-visible+.acct-pick-face,.acct-mini-choice input:focus-visible+.acct-mini-face{outline:3px solid #784720;outline-offset:3px}
/* On the teal tab row the brown ring would vanish, so the chosen tab gets a cream ring with a dark edge. */
.acct-seg-row input:focus-visible+span{outline:3px solid var(--a-paper);outline-offset:-3px;box-shadow:0 0 0 2px var(--a-teal-base)}

/* ---------- Profiles ---------- */
.acct-profile-list{margin:0;padding:0;list-style:none}
.acct-profile{padding:0 0 22px}
.acct-profile+.acct-profile{padding-top:22px;border-top:2px dashed var(--a-edge)}
.acct-profile>fieldset{display:grid;gap:16px}
.acct .acct-profile-title{font-family:Nunito,sans-serif;font-weight:700;font-size:20px;color:var(--a-ink);margin-bottom:2px}
.acct-seg legend,.acct-mini legend{font-size:14px;margin-bottom:8px}
/* The age choice is the start screen's tab row ("Jag är värd / Jag vill ansluta"): teal tabs, the chosen one cream. */
.acct-seg-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:15px;background:var(--a-tab);box-shadow:inset 0 3px 0 #ffffff20}
.acct-seg-row>label>span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;border-radius:11px;font-weight:900;font-size:15px;line-height:1.05;color:#fff9e9;font-variant-numeric:tabular-nums}
.acct-seg-row span[aria-hidden] small{display:block;margin-top:2px;font-size:11.5px;font-weight:800;opacity:.9}
.acct-seg-row input:checked+span{background:var(--a-paper);color:var(--a-ink);box-shadow:0 2px 0 var(--a-teal-base)}
.acct-seg-row label:hover input:not(:checked)+span{background:#ffffff1f}
.acct-mini-grid{display:grid;grid-template-columns:repeat(8,minmax(44px,1fr));gap:8px}
.acct-mini-face{border-radius:14px}
.acct-remove{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:0;border-radius:12px;background:transparent;color:var(--a-err);font-weight:900;font-size:15px;cursor:pointer}
.acct-remove:hover{background:var(--a-err-bg)}

/* ---------- Invites ---------- */
.acct form#acct-invite .acct-secondary{margin-top:16px}
.acct-invites{margin:0;padding:0;list-style:none}
.acct-invites li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 0;border-top:2px solid var(--a-field)}
.acct-invite-email{font-weight:900;overflow-wrap:anywhere;min-width:0;flex:1 1 180px}
.acct-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:#fff1c4;color:#6b4f12;font-size:14px;font-weight:900}
.acct-badge .acct-icon{width:16px;height:16px}
.acct-empty{margin-top:22px}

/* ---------- Dev inbox (mock only) ---------- */
.acct-dev{margin-top:28px;padding:16px 18px;border:2px dashed var(--a-edge);border-radius:16px;background:#fff8e2}
.acct .acct-dev h3{font-family:Nunito,system-ui,sans-serif;font-weight:1000;font-size:15px;color:var(--a-ink);margin:0 0 4px}
.acct-dev p{font-size:14px;color:var(--a-muted);margin:0}
.acct-dev p b{color:var(--a-ink);overflow-wrap:anywhere}
.acct-dev-link{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;color:var(--a-teal);font-weight:900;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.acct-dev-url{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.5;color:var(--a-muted);word-break:break-all}

/* ---------- Familjens hem ---------- */
.acct-home-head{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.acct-emblem{flex:none;display:block;width:88px;height:88px}
.acct-emblem img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(23,68,72,.25))}
.acct-cta{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.acct-invite-emblem{width:92px;height:92px;margin:-6px 0 6px}
.acct-invite-emblem img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(23,68,72,.25))}

/* ---------- Choice cards (Vilken är du?) ---------- */
.acct-choices{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.acct-choice{display:flex;align-items:center;gap:16px;width:100%;min-height:88px;margin-bottom:4px;padding:16px 18px;border:2px solid var(--a-line);border-radius:20px;background:var(--a-field);color:var(--a-ink);text-align:left;cursor:pointer;box-shadow:0 4px 0 var(--a-line)}
.acct-choice:hover:not([aria-disabled=true]){border-color:var(--a-teal);background:#dff1ea;box-shadow:0 4px 0 var(--a-teal)}
.acct-choice:hover:not([aria-disabled=true]) b{color:var(--a-teal)}
.acct-choice-icon{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--a-water);color:var(--a-teal-base)}
.acct .acct-choice-icon .acct-icon{width:28px;height:28px}
.acct-choice-text{flex:1;min-width:0}
.acct-choice b{display:block;font-family:Nunito,sans-serif;font-weight:800;font-size:19px;line-height:1.15}
.acct-choice small{display:block;margin-top:4px;font-size:14px;line-height:1.4;color:var(--a-muted)}
/* ---------- Vem spelar ikväll? ----------
   Toggle cards: a chosen card is lifted, gets a teal edge and a check badge (never colour alone);
   one not chosen sits flat with a dimmed portrait. Text keeps full contrast either way. */
.acct-players{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px;margin:0;padding:8px 0 0;list-style:none}
.acct-player{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;min-height:44px;padding:14px 10px 12px;border:2px solid var(--a-line);border-radius:20px;background:var(--a-field);color:var(--a-muted);text-align:center;cursor:pointer}
.acct-player-face{position:relative;display:block;width:76px;height:76px;margin-bottom:6px;border-radius:20px;background:var(--a-paper)}
.acct-player-face img{display:block;width:100%;height:100%;object-fit:contain;opacity:.55;filter:saturate(.45)}
.acct-player b{display:block;max-width:100%;font-size:16px;color:var(--a-ink);overflow-wrap:anywhere}
.acct-player small{display:block;font-size:13.5px}
.acct-player-check{position:absolute;top:-8px;right:-8px;display:none;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--a-teal);color:var(--a-paper);box-shadow:0 2px 3px rgba(23,68,72,.3)}
.acct .acct-player-check .acct-icon{width:18px;height:18px;stroke-width:3.2}
/* Hover is a faint teal edge, never the chosen look, and only where hover is real (a tap would leave it stuck). */
@media (hover:hover){.acct-player:hover:not([aria-pressed=true]){border-color:var(--a-teal-hi)}}
.acct-player[aria-pressed=true]{transform:translateY(-4px);border-color:var(--a-teal);background:var(--a-water);color:var(--a-ink);box-shadow:0 4px 0 var(--a-teal)}
.acct-player[aria-pressed=true] .acct-player-face img{opacity:1;filter:none}
.acct-player[aria-pressed=true] .acct-player-check{display:grid}
.acct-players-count{margin:18px 0 0;font-size:16px;font-weight:1000;color:var(--a-teal)}

/* ---------- Vilken är du? ---------- */
.acct-choice-face{flex:none;display:block;width:52px;height:52px;border-radius:16px;background:var(--a-paper)}
.acct-choice-face img{display:block;width:100%;height:100%;object-fit:contain}
.acct-info{display:flex;align-items:flex-start;gap:8px;margin:18px 0 0;padding:12px 14px;border:2px solid #e1c48a;border-radius:14px;background:#fff6d8;font-size:15px;font-weight:800;line-height:1.45;color:var(--a-ink)}
.acct-info .acct-icon{margin-top:1px;color:#a8741c}
.acct-owned{margin:14px 0 0}
/* An owned profile is always Vuxen: the younger groups are disabled, look it, and say so in a hint. */
.acct .acct-seg-row input:disabled{cursor:not-allowed}
.acct-seg-row input:disabled+span{opacity:.4}

/* ---------- Narrow cards ----------
   The card's width is the start page's, so the layouts follow the card (a container query), not the window. */
@container acct (max-width:420px){
 .acct-mini-grid{grid-template-columns:repeat(4,minmax(44px,1fr))}
 .acct-cta{grid-template-columns:1fr}
 .acct #acct-heading{font-size:25px}
 .acct-owl{width:72px;height:72px;right:16px} /* her envelope sits 16px past her right edge before it shows */
 .acct-owl+#acct-heading{padding-right:90px}
}
@container acct (max-width:300px){
 .acct-pick-grid{gap:8px}
 .acct-seg-row>label>span{font-size:14.5px}
 .acct-home-head{gap:14px}
 .acct-emblem{width:72px;height:72px}
 .acct-choice{gap:12px;padding:14px}
 .acct-choice-icon,.acct-choice-face{width:44px;height:44px}
 .acct-players{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
}

/* ---------- Motion: one authored moment per screen, all off for reduced motion ---------- */
@media (prefers-reduced-motion:no-preference){
 .acct-card.has-more::after{animation:acct-nudge 1.4s ease-in-out infinite alternate}
 .acct-spinner{animation:acct-spin .9s linear infinite}
 .acct-primary,.acct-secondary,.acct-quiet{transition:transform .16s,box-shadow .16s,background .16s}
 .acct-pick-face{transition:transform .2s var(--a-ease),border-color .15s,background-color .15s}
 .acct-pick:hover .acct-pick-face{transform:translateY(-2px)}
 .acct-player{transition:transform .2s var(--a-ease),border-color .15s,background-color .15s,box-shadow .2s}
 .acct-card-inner.slide-next{animation:acct-slide-next .5s var(--a-ease)}
 .acct-card-inner.slide-back{animation:acct-slide-back .5s var(--a-ease)}
 .is-hopping{animation:acct-hop .55s var(--a-ease)}
 .acct-owl.is-flying{animation:acct-owl-fly .95s var(--a-ease) forwards}
 .acct-owl.is-flying .acct-envelope{transition:opacity .15s,transform .25s var(--a-ease)}
 .acct-owl.is-landing{animation:acct-owl-land 1s var(--a-ease) both}
 .acct-owl.is-landing .acct-envelope{animation:acct-envelope-set .45s var(--a-ease) .85s both}
}
@keyframes acct-nudge{to{transform:translateY(4px)}}
@keyframes acct-spin{to{transform:rotate(360deg)}}
@keyframes acct-slide-next{from{transform:translateX(40px);opacity:.25}to{transform:none;opacity:1}}
@keyframes acct-slide-back{from{transform:translateX(-40px);opacity:.25}to{transform:none;opacity:1}}
@keyframes acct-hop{0%{transform:none}35%{transform:translateY(-12px) scale(1.04,.97)}70%{transform:translateY(0) scale(1.06,.93)}100%{transform:none}}
/* Inside the card the owl flies straight up and away (and lands from there): never sideways, or the card would scroll sideways. */
@keyframes acct-owl-fly{0%{transform:none}14%{transform:translate(-4px,8px) rotate(5deg) scale(1.03,.95)}100%{transform:translate(-12px,-150px) rotate(-16deg) scale(.5);opacity:0}}
@keyframes acct-owl-land{0%{transform:translate(-12px,-130px) rotate(-14deg) scale(.55);opacity:0}25%{opacity:1}78%{transform:translate(0,-8px) rotate(4deg)}100%{transform:none}}
@keyframes acct-envelope-set{from{transform:translate(56px,-8px) rotate(-8deg)}to{transform:none}}

/* ---------- Villkor (18+) and Radera mitt konto (del B) ----------
   The checkbox gets its own size: style.css gives every input min-height:50px. */
.acct-check{display:flex;align-items:flex-start;gap:12px;margin:6px 0 10px;font-size:17px;font-weight:800;line-height:1.45;cursor:pointer}
.acct .acct-check input[type=checkbox]{flex:none;width:28px;height:28px;min-height:0;margin:0;padding:0;accent-color:var(--a-teal);cursor:pointer}
.acct-check a,.acct-terms .acct-hint a{color:var(--a-teal);text-decoration:underline;text-underline-offset:3px}
.acct-terms .acct-primary:disabled,.acct #acct-delete-ok:disabled{cursor:not-allowed}
.acct-handover{margin-top:6px}
.acct-handover .acct-primary{width:100%;margin-top:18px}

/* Another adult's own profile in Redigera profiler: read-only (founder decision 2026-10-19). */
.acct-profile-readonly .acct-profile-title { font-size: inherit; margin: 0 0 .5rem; }
.acct-readonly-row { display: flex; align-items: center; gap: .75rem; margin: 0 0 .5rem; }
.acct-readonly-row .acct-mini-face { width: 3rem; height: 3rem; flex: none; }
.acct-readonly-row small { display: block; opacity: .75; }

/* ---------- Del D: "Fortsätt med Google" above the e-mail field ---------- */
/* The start screen's cream pill, full width, with Google's own G. Own size for the mark: style.css sets svg{width:100%}. */
.acct-google .acct-google-button{width:100%;min-height:52px;margin:0 0 3px}
.acct .acct-google-mark{width:22px;height:22px;flex:none}
.acct-google .acct-google-button:disabled{opacity:1;cursor:progress;transform:translateY(2px);box-shadow:0 1px 0 var(--a-edge)}
.acct-or{display:flex;align-items:center;gap:12px;margin:16px 0 4px;font-size:13px;font-weight:900;color:var(--a-muted);text-transform:lowercase}
.acct-or::before,.acct-or::after{content:"";flex:1;height:2px;border-radius:2px;background:var(--a-edge)}

/* ---------- Familjevänner (fas 1, account/screens-friends.js) ---------- */
.acct-friend-list{margin:0 0 8px;padding:0;list-style:none}
.acct-friend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 0;border-top:2px solid var(--a-field)}
.acct-friend-crest{flex:none;display:block;width:40px;height:40px}
.acct-friend-crest img{display:block;width:100%;height:100%;object-fit:contain}
.acct-friend-text{flex:1 1 200px;min-width:0;font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.acct-friend-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.acct-friend-empty{padding:8px 0}
.acct .acct-small{min-height:44px;padding:8px 16px;font-size:15px}

/* ---------- The start page's panel rules stay out ----------
   style.css and game-world.css style every label in .role-panel (display:block, a bottom margin, 14px). That is right
   for the game setup and wrong for the account's pickers and the 18+ box, so those take their own values back here. */
.acct :is(.acct-pick,.acct-mini-choice,.acct-seg-row label){margin:0}
.acct .acct-check{display:flex;margin:6px 0 10px;font-size:17px}

/* ---------- Kompakt kort (2026-10-21, founderns önskan): allt utom texten lite mindre så att mer får plats i startsidans kort.
   Textstorlekar är orörda och varje tryckyta är minst 44 px hög (PRODUCT.md). Ångra: ta bort hela detta block. ---------- */
.acct-panel .acct-card-inner{padding:20px 22px 18px}
.acct-wordmark{margin-bottom:4px}
.acct #acct-heading{margin-bottom:6px}
.acct-lede{margin-bottom:14px}
/* 2026-10-23 (founder): the step buttons were the heaviest thing in the card; 44 px is the tap minimum */
.acct-primary{--side:3px;min-height:44px;padding:6px 16px;border-radius:13px;font-size:16px;gap:8px}
.acct-primary .acct-icon{width:18px;height:18px}
.acct-link{font-size:15px;font-weight:800;gap:6px;text-underline-offset:3px}
.acct-link .acct-icon{width:16px;height:16px}
.acct form>.acct-primary{margin-top:16px}
.acct-secondary{min-height:44px;padding:8px 16px;border-radius:12px}
.acct-quiet{min-height:44px;padding:8px 16px;border-radius:12px}
.acct-google .acct-google-button{min-height:46px}
.acct input[type=text],.acct input[type=email]{min-height:44px;padding:8px 12px;border-radius:12px}
.acct-actions{margin-top:20px}
.acct-row{gap:10px 14px}
.acct-note,.acct-alert,.acct-info{padding:10px 12px;border-radius:12px}
.acct-note{margin-bottom:14px}
.acct-alert,.acct-info{margin-top:12px}
.acct-owl{width:72px;height:72px}
.acct-owl+#acct-heading{padding-right:66px}
.acct-stones{margin-bottom:14px}
.acct-stone{width:44px;height:36px}
.acct-pick-grid{gap:8px}
.acct-profile{padding-bottom:16px}
.acct-profile+.acct-profile{padding-top:16px}
.acct-profile>fieldset{gap:12px}
.acct-mini-grid{gap:6px}
.acct-home-head{gap:14px;margin-bottom:14px}
.acct-emblem{width:60px;height:60px}
.acct-invite-emblem{width:64px;height:64px;margin:-4px 0 4px}
.acct-cta{gap:10px}
.acct-choices{gap:10px}
.acct-choice{min-height:64px;padding:10px 14px;gap:12px;border-radius:16px}
.acct-choice-icon,.acct-choice-face{width:40px;height:40px;border-radius:12px}
.acct .acct-choice-icon .acct-icon{width:22px;height:22px}
.acct-players{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.acct-player{padding:10px 8px 8px;border-radius:16px}
.acct-player-face{width:56px;height:56px;margin-bottom:4px;border-radius:14px}
.acct-players-count{margin-top:12px}
.acct-friend{padding:6px 0}
.acct-friend-crest{width:32px;height:32px}
.acct .acct-small{padding:6px 14px}
.acct-dev{margin-top:20px;padding:12px 14px}
/* Spelinställningarna rullar i en egen yta ovanför knappraden i kortet. */
@media (min-width:721px){
 .welcome-folder>.role-panel:has(>.play-setup){overflow:clip}
 .play-setup{display:flex;flex-direction:column;height:100%}
 .play-setup-scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#b5d4ca transparent;margin:-10px -8px 0;padding:10px 8px 8px}
 .play-setup-actions{padding-top:12px}
 .play-setup-actions #create{margin-top:0}
}

/* ---------- Villkor och integritetspolicy (2026-10-22) ---------- */
/* Under the start page's card on both tabs (app.js landing(), after .folder-note), and on Välkommen (screens-signin.js).
   Each link is at least 44 px tall to tap; the text stays small and quiet. */
.welcome-folder .folder-legal{margin:0;padding:0 16px 8px;font-size:13px;line-height:20px;font-weight:800;text-align:center}
.welcome-folder .folder-legal a{display:inline-block;padding:12px 6px;color:inherit;text-decoration:underline;text-underline-offset:3px}
.welcome-folder .folder-legal a:focus-visible{outline:3px solid #214c52;outline-offset:-3px;border-radius:8px}
.acct-privacy{margin:12px 0 0;text-align:center}
.acct-privacy a{display:inline-block;padding:13px 0;margin:-13px 0;color:var(--a-ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- Familjens hem utan rullning (2026-10-22, founderns önskan) ----------
   The whole home fits the card (clamp(460px, 100dvh - 250px, 640px) on desktop) with up to 8 profiles: a small head, the
   profiles as a wrapping row of faces (one shared detail under the row, opened from a face), Starta spel alone with a
   text link under it, and the settings as one row of four icon buttons. Every tap target is at least 44 px. */
.acct-home-head{display:flex;align-items:center;gap:12px;margin:0 0 8px}
.acct-home-head .acct-emblem{width:40px;height:40px}
.acct-home-head #acct-heading{margin:0;min-width:0;overflow-wrap:anywhere}
.acct[data-view="home"] .acct-note{padding:6px 10px;margin:0 0 10px;font-size:14px;border-radius:12px}
.acct-faces{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:2px 6px;margin:0 0 8px;padding:0;list-style:none}
.acct-face{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;min-height:44px;padding:2px 2px 4px;border:2px solid transparent;border-radius:16px;background:none;color:var(--a-ink);font:inherit;cursor:pointer}
.acct-face:hover{background:var(--a-field)}
.acct .acct-face:focus-visible,.acct .acct-tool:focus-visible{outline-offset:-3px} /* inside the button: no overlap with a neighbour, no clipping at the card edge */
.acct-face[aria-expanded="true"]{border-color:var(--a-line);background:var(--a-field)}
.acct-face-img{position:relative;display:block;width:44px;height:44px;border-radius:50%;background:var(--a-field)}
.acct-face[aria-expanded="true"] .acct-face-img{background:#fff}
.acct-face-img img{display:block;width:100%;height:100%;object-fit:contain;border-radius:50%}
.acct-face-you{position:absolute;top:-4px;right:-8px;padding:0 5px;border-radius:999px;background:var(--a-yellow);color:var(--a-ink);font-size:11px;font-weight:900;line-height:16px}
.acct-face-name{max-width:100%;font-size:14px;font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-face-points{font-size:12px;font-weight:700;line-height:1.2;color:var(--a-muted);font-variant-numeric:tabular-nums}
.acct-face-detail{margin:0 0 10px;padding:6px 12px 10px;border:2px solid var(--a-line);border-radius:16px;background:var(--a-field)}
.acct-face-detail p{margin:0}
.acct-face-detail-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.acct-face-detail small{font-size:14px;color:var(--a-muted)}
.acct-face-facts{font-size:15px}
.acct-face-detail .acct-hint{margin-top:4px}
.acct-face-close{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 -8px 0 0;padding:0;border:0;border-radius:12px;background:none;color:var(--a-ink);cursor:pointer}
.acct-face-close .acct-icon{width:20px;height:20px}
.acct[data-view="home"] .acct-cta{display:flex;flex-direction:column;align-items:center;gap:0}
.acct[data-view="home"] .acct-cta .acct-primary{width:100%}
.acct-join{font-size:15px}
.acct-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:4px 0 0;padding:0;list-style:none}
.acct-tool{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;min-height:56px;padding:6px 2px;border:2px solid var(--a-line);border-radius:14px;background:#fff;color:var(--a-ink);font:inherit;font-size:13px;font-weight:800;line-height:1.15;white-space:nowrap;cursor:pointer}
.acct-tool .acct-icon{width:22px;height:22px}
.acct-tool-label{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.acct-tool:hover{background:var(--a-field)}
.acct-tool-badge{position:absolute;top:4px;right:6px;min-width:20px;padding:0 6px;border-radius:999px;background:var(--a-coral);color:#3b1a10;font-size:12px;font-weight:900;line-height:20px}
.acct-email{overflow-wrap:anywhere}
/* Hamnkiosken (2026-11-01): the way to the shop, a page of its own (/hamnkiosken). A parcel-tag strip under the tools;
   when the card has no room for it (.is-tight, set by home()), it becomes a fifth tool so Familjens hem still never scrolls. */
.acct-kiosk-slot{grid-column:1/-1}
.acct-kiosk{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px 8px 10px;border:2px dashed var(--a-edge);border-radius:16px;background:#fff;color:var(--a-ink);text-decoration:none}
.acct-kiosk:hover{background:var(--a-field)}
.acct .acct-kiosk:focus-visible{outline-offset:-3px}
.acct-kiosk-tag{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--a-yellow);transform:rotate(-6deg)}
.acct-kiosk-tag .acct-icon{width:22px;height:22px}
.acct-kiosk-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.acct-kiosk-text b{font-family:'Lilita One',Nunito,sans-serif;font-weight:400;font-size:18px;letter-spacing:.01em}
.acct-kiosk-text span{font-size:14px;font-weight:700;color:var(--a-muted)}
.acct-kiosk-short{display:none}
.acct-kiosk>.acct-icon{width:20px;height:20px}
.acct-tools.is-tight{grid-template-columns:repeat(5,minmax(0,1fr))}
.is-tight .acct-kiosk-slot{grid-column:auto}
.is-tight .acct-kiosk{flex-direction:column;justify-content:center;gap:3px;padding:6px 2px;border-style:solid;font-size:13px;font-weight:800;line-height:1.15}
.is-tight .acct-kiosk-tag{width:26px;height:26px;border-radius:8px}
.is-tight .acct-kiosk-tag .acct-icon{width:18px;height:18px}
.is-tight .acct-kiosk-text,.is-tight .acct-kiosk>.acct-icon{display:none}
.is-tight .acct-kiosk-short{display:block}
@container acct (max-width:300px){.acct-tools{gap:6px}.acct-tool{font-size:12px}}
@container acct (max-width:240px){.acct-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.acct-tool{flex-direction:row;gap:6px;min-height:44px;font-size:14px}.acct-tool-badge{top:-9px;right:-7px}} /* 320 px phones: two by two, so no label is cut */

/* ---------- Kompakt profilredigering (2026-10-22): en rad ansikten, en profil öppen åt gången ---------- */
/* Each face is as wide as its name (founder 2026-10-22: "Mor…" with four profiles), and a full row breaks onto a second
   line. In short windows the age line under each face is left out to make room (and first setup keeps one row, below). */
.acct-pfaces{display:flex;flex-wrap:wrap;gap:2px 4px;margin:0 0 8px}
.acct-pfaces>li{flex:0 1 auto;min-width:44px}
.acct-pfaces .acct-face{gap:1px;padding:2px 6px 3px}
.acct-pfaces .acct-face-img{width:42px;height:42px}
.acct-pfaces .acct-face-name{font-size:13.5px;line-height:1.15}
.acct-pfaces .acct-face-points{font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-pface-add .acct-face-img{display:flex;align-items:center;justify-content:center;border:2px dashed var(--a-line);background:none}
.acct-pface-add .acct-face-img .acct-icon{width:20px;height:20px}
.acct-pface-add:disabled{opacity:.5;cursor:not-allowed}
.acct-pface-add:disabled:hover{background:none}
.acct .acct-profile-editor{padding:14px 0 0;margin:0} /* no line above it (founder 2026-10-22): the open face already shows which profile this is */
.acct-profile-editor.acct-profile-readonly{padding-bottom:8px}
.acct-profile-editor:focus-visible{outline-offset:2px;border-radius:12px}
.acct .acct-profile-editor>.acct-pe{display:block;min-width:0;margin:0;padding:0;border:0}
.acct-pe>legend.acct-sr{margin:0;padding:0}
.acct-pe>.acct-pe-row+.acct-pe-row{margin-top:14px}
.acct-pe-row{min-width:0;margin:0;padding:0;border:0}
.acct .acct-pe-label{float:left;width:90px;margin:0;padding:12px 8px 0 0;font-size:13.5px;font-weight:800;line-height:1.2;color:var(--a-ink)}
.acct-pe-ctl{margin-left:90px}
.acct .acct-pe .acct-hint,.acct .acct-pe .acct-error{margin-top:2px;font-size:12.5px}
/* The adult's own age group is fixed: plain text where the buttons would be, the reason on its own line under it. */
.acct .acct-pe-static{display:flex;align-items:baseline;gap:6px;margin-top:0;margin-bottom:0;padding:10px 0 0;font-size:16px;line-height:1.2;color:var(--a-ink)}
.acct-pe-static small{font-size:13px;font-weight:800;color:var(--a-muted)}
.acct .acct-pe .acct-pe-fixed .acct-hint{margin-top:2px}
.acct .acct-pe .acct-seg>.acct-pe-label{padding-top:4px}
#acct-profiles .acct-actions{margin-top:16px}
/* Short desktop windows (a 1366x650 laptop gives the card its least height): the onboarding stones, the heading and the
   lede tighten so Döp er familj, and eight profiles with the open editor, fit without scrolling. */
@media (min-width:721px) and (max-height:760px){
 .acct:is([data-view^="onboarding"],[data-view="edit-profiles"]) .acct-stones{margin-bottom:6px}
 .acct:is([data-view^="onboarding"],[data-view="edit-profiles"]) .acct-stone{width:36px;height:28px}
 .acct:is([data-view^="onboarding"],[data-view="edit-profiles"]) .acct-stones li{gap:2px;font-size:12px;line-height:1.1}
 .acct:is([data-view^="onboarding"],[data-view="edit-profiles"]) .acct-stones-path{top:0;height:28px}
 .acct:is([data-view="onboarding-1"],[data-view="edit-family"],[data-view="onboarding-2"],[data-view="edit-profiles"]) #acct-heading{font-size:24px;margin-bottom:2px}
 .acct:is([data-view="onboarding-1"],[data-view="edit-family"],[data-view="onboarding-2"],[data-view="edit-profiles"]) .acct-lede{margin-bottom:4px;font-size:13px}
 .acct:is([data-view="onboarding-1"],[data-view="edit-family"]) .acct-picker{margin-top:8px}
 .acct-pe>.acct-pe-row+.acct-pe-row{margin-top:6px}
 .acct .acct-profile-editor{padding-top:6px}
 .acct-pfaces{margin-bottom:2px}
 .acct-pfaces .acct-face:not(.acct-pface-add) .acct-face-points,.acct-pface-add:disabled .acct-face-points{display:none} /* the age group shows in the open editor and in each face's name; "N av 8" stays until "Fullt" says it (still heard through aria-describedby) */
 /* First setup has the stones above it, so two rows of faces do not fit here: one row of equal places instead, where only
    a really long name (Maja-Lisa, Cornelia with eight profiles) may be shortened. */
 .acct[data-view="onboarding-2"] .acct-pfaces{flex-wrap:nowrap}
 /* equal places only when the row is crowded (7+ places); with fewer each face keeps its own width (a lone "Du" filled half the row) */
 .acct[data-view="onboarding-2"] .acct-pfaces:has(>li:nth-child(7))>li{flex:1 1 0}
 .acct[data-view="onboarding-2"] .acct-pfaces:has(>li:nth-child(7)) .acct-face{padding-left:1px;padding-right:1px}
 /* full: the eight faces get its place, but it stays in the accessibility tree so "8 av 8 profiler. Fler får inte plats." is still heard */
 .acct[data-view="onboarding-2"] .acct-pfaces>li:has(#acct-add:disabled){position:absolute;width:1px;height:1px;min-width:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
 .acct-pfaces .acct-face-img{width:34px;height:34px}
 .acct-pfaces .acct-face-name{font-size:12.5px;line-height:1.1}
 .acct-pfaces .acct-face-points{font-size:11px}
 #acct-profiles .acct-actions{margin-top:6px}
}
.acct-pe-name{display:flex;align-items:center;gap:6px}
.acct-pe-name input{flex:1;min-width:0;min-height:44px}
.acct-profile-editor .acct-remove{flex:none;min-height:44px;padding:4px 8px;gap:4px;font-size:14px}
.acct-pe .acct-seg-row{padding:3px;gap:3px}
.acct-pe .acct-seg-row>label>span{font-size:14px}
.acct-pe .acct-mini-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:0}
.acct-pe .acct-mini-choice{min-height:44px;padding:3px}
.acct-pe .acct-mini-face{border-width:2px;border-radius:12px}
@container acct (max-width:420px){
 .acct .acct-pe-label{float:none;width:auto;padding:0 0 4px}
 .acct-pe-ctl{margin-left:0}
 .acct-pe .acct-mini-grid{grid-template-columns:repeat(4,minmax(44px,56px));justify-content:start}
 .acct .acct-pe .acct-seg>.acct-pe-label{padding-top:0}
}

/* ---------- Döp er familj utan rullning (2026-10-22): förslaget inne i namnfältet, åtta sköldar på en rad ---------- */
.acct-field-row{display:flex;gap:8px;align-items:stretch}
.acct .acct-field-row input{flex:1;min-width:0}
.acct .acct-suggest{align-self:stretch;margin:0;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:2px solid var(--a-edge);border-radius:12px;background:var(--a-paper);color:var(--a-ink);font:inherit;font-size:15px;font-weight:900;cursor:pointer;box-shadow:0 3px 0 var(--a-edge)}
.acct-suggest .acct-icon{width:18px;height:18px}
@media (hover:hover){.acct-suggest:hover{background:var(--a-water)}}
.acct-suggest:active{transform:translateY(2px);box-shadow:0 1px 0 var(--a-edge)}
.acct-suggest:focus-visible{outline:3px solid #784720;outline-offset:2px}
.acct .acct-picker{margin-top:18px}
.acct-picker legend{margin-bottom:8px}
.acct .acct-pick-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.acct-pick-grid .acct-pick-face{border-width:2px;border-radius:13px;padding:6%}
.acct-pick-grid .acct-pick input:checked+.acct-pick-face::after{top:-6px;right:-6px;width:18px;height:18px;background-size:12px}
.acct-pick-chosen{min-height:1.3em;margin:6px 0 0;font-size:14px;font-weight:900;color:var(--a-ink)}
@container acct (max-width:420px){
 .acct .acct-pick-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- Konto (2026-10-23): familjen, din profil och kontot, var och en på sin rad ---------- */
.acct-rows{margin:4px 0 0;padding:0;list-style:none}
.acct-setting{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 0}
.acct-setting+.acct-setting{border-top:2px solid var(--a-field)}
.acct-setting-pic{flex:none;width:44px;height:44px}
.acct .acct-setting-pic.acct-mini-face{border-width:2px;border-radius:12px}
.acct-setting-shield img{display:block;width:100%;height:100%;object-fit:contain}
.acct-setting-text{display:flex;flex-direction:column;flex:1;min-width:0}
.acct-setting-text small{font-size:12.5px;font-weight:800;color:var(--a-muted)}
.acct-setting-text b{font-size:16px;line-height:1.25;overflow-wrap:anywhere}
.acct .acct-setting-edit{flex:none;margin:0;padding:6px 14px;font-size:15px;gap:6px}
.acct-setting-edit .acct-icon{width:16px;height:16px}
.acct[data-view="account"] .acct-actions{margin-top:16px}
.acct[data-view="account"] .acct-secondary{flex:none;width:auto;margin:0 0 3px;padding:6px 14px;font-size:15px}
/* "Bra namn!" is written into the hint's slot, which keeps its height, so nothing under the name field moves on blur */
.acct .acct-hint-ok{display:flex;align-items:flex-start;gap:5px;color:var(--a-ok);font-weight:800}
.acct .acct-hint-ok .acct-icon{width:15px;height:15px;margin-top:1px}
/* Visa oss i topplistan (Konto, online mode): a checkbox with its explanation in the setting row. */
/* Scoped under .role-panel too: its generic label and input rules (game-world.css) would stack the box over the text. */
.acct-switch,.role-panel .acct-switch{display:flex;flex-direction:row;align-items:flex-start;gap:12px;cursor:pointer;width:100%;margin:0}
.acct-switch input,.role-panel .acct-switch input{flex:none;width:24px;height:24px;min-height:0;margin:2px 0 0;padding:0;accent-color:var(--a-accent,#1d7f74)}
.acct-switch .acct-setting-text{display:grid;gap:2px}
.acct-switch small{font-weight:600}
/* Topplistan: the one-time question in Familjens hem (online mode). Compact, so the home card still fits. */
.acct-ask{margin:10px 0 0;padding:10px 12px;border:2px solid var(--a-field);border-radius:14px;display:grid;gap:8px}
.acct-ask p{margin:0;font-size:14px;line-height:1.4}
.acct-ask-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.acct-ask-actions .acct-secondary{min-height:44px}