/* Profile, log in, invites and friends. Uses the site's tokens; nothing here sets a colour of its own except the podium medals (emoji). */
.stack{display:grid;gap:12px}
.stack .big{justify-self:start}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:end}.row .grow{flex:1 1 200px}.row .big{margin-top:0}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 2px}.actions .btn{margin-top:8px}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}
h3{font:650 1.02rem/1.3 var(--sans);margin:.2em 0 .5em}
.error{background:var(--bad-soft);color:var(--bad);border-radius:12px;padding:11px 16px;font:600 .92rem var(--sans);margin:12px 0}
.btn.danger{background:var(--bad-soft);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent);box-shadow:none}
.btn.danger:hover{background:var(--bad);color:#fff}
.check{display:flex;gap:10px;align-items:center;font-weight:600}.check input{width:auto}
ul.plain{list-style:none;margin:0;padding:0}

/* avatar picker: real radio buttons, drawn as big round tiles */
.avatars{border:0;margin:6px 0;padding:0}.avatars legend{font-weight:650;margin-bottom:10px;padding:0}
.avatars{display:flex;flex-wrap:wrap;gap:8px}.avatars legend{flex-basis:100%}
.av{position:relative;margin:0;cursor:pointer}
.av input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.av .avt{width:52px;height:52px;border-radius:16px;background:var(--glass-strong);border:2px solid var(--glass-line);transition:transform .15s,border-color .15s,background .15s}
.av:hover .avt{transform:translateY(-2px)}
.av input:checked + .avt{border-color:var(--brand);background:var(--brand-soft);transform:scale(1.06)}
.av input:focus-visible + .avt{outline:3px solid var(--brand);outline-offset:2px}

/* the sign-in key is shown once: make it unmissable */
.keybox{border-color:var(--brand)}
.code.key{font-size:clamp(.95rem,4.9vw,1.7rem);letter-spacing:.05em;padding-inline:8px;user-select:all;white-space:nowrap}

/* leaderboard */
.board-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}.board-head h2{margin:0}
.seg{display:inline-flex;padding:3px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--glass-line)}
.seg a{padding:6px 14px;border-radius:999px;font:600 .85rem var(--sans);color:var(--muted);text-decoration:none}
.seg a[aria-current]{background:var(--brand);color:var(--brand-ink)}
.board{list-style:none;margin:14px 0 4px;padding:0;display:grid;gap:8px;counter-reset:none}
.board li{display:grid;grid-template-columns:2.4rem 1fr auto;gap:10px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--glass-strong);border:1px solid var(--glass-line)}
.board li.you{border-color:var(--brand);background:var(--brand-soft)}
.board li.idle{opacity:.7}
.board .rank{font:700 1.15rem var(--sans);text-align:center}
.board .who{font-weight:650;overflow-wrap:anywhere}.board .who em{font:600 .78rem var(--sans);color:var(--muted);font-style:normal}
.board .far{font:700 1rem var(--mono);white-space:nowrap}
.friends li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.friends li:last-child{border:0}
.friends form{margin:0}
@media (max-width:560px){.av .avt{width:46px;height:46px}.board li{padding:10px 12px}}

/* family group */
.shared{display:grid;gap:14px}
.shared li{padding:12px 14px;border-radius:14px;background:var(--glass-strong);border:1px solid var(--glass-line)}
.shared blockquote{margin:0 0 8px;overflow-wrap:anywhere;font-weight:550}
.shared .meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.shared form{margin:0}.shared .btn{margin-top:0}
.family-share{margin:10px 0 0}.family-share .ghost{margin:0}

/* family dashboard */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.matrix{border-collapse:separate;border-spacing:0 4px;width:100%;min-width:20rem}
.matrix th,.matrix td{padding:6px 8px;text-align:center}
.matrix thead th{font-size:1.15rem;position:sticky;top:0}
.matrix tbody th{text-align:left;font:600 .88rem var(--sans);padding-right:14px;min-width:9.5rem}
.matrix tbody tr{background:var(--glass-strong)}.matrix tbody tr.soft{background:var(--warn-soft)}.matrix tbody tr.soft th{color:var(--warn)}
.matrix tbody tr th:first-child{border-radius:12px 0 0 12px}.matrix tbody tr td:last-child{border-radius:0 12px 12px 0}
.lv{display:inline-grid;place-items:center;width:30px;height:30px;cursor:default}
.lv-strong{color:var(--ok)}.lv-learning{color:var(--brand)}.lv-weak{color:var(--warn)}
.lv-untested{color:var(--faint)}.lv-none{color:var(--faint);opacity:.7}.legend .lv{width:auto;height:auto;vertical-align:-.2em}
.avgbar{display:block;width:5rem;height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin:auto}.avgbar i{display:block;height:100%;width:0;border-radius:999px;background:var(--brand)}
.people li{display:grid;grid-template-columns:minmax(8rem,1fr) auto auto auto;gap:6px 16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}.people li:last-child{border:0}
.people form{margin:0}.people .stat b{font:800 1.2rem var(--mono)}
.summary{white-space:pre-wrap;overflow-wrap:anywhere;font:500 .95rem/1.5 var(--sans);background:var(--glass-strong);border:1px solid var(--glass-line);border-radius:14px;padding:14px 16px;margin:8px 0}
@media (max-width:560px){.people li{grid-template-columns:1fr auto}.people .stat.muted{grid-column:1 / -1}}
.pick li{padding:8px 0;border-bottom:1px solid var(--line)}.pick li:last-child{border:0}.pick .check{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:560px){
  .matrix{min-width:0}.matrix th,.matrix td{padding:5px 3px}.matrix tbody th{min-width:0;width:34%;font-size:.78rem;padding-right:6px}
  .lv{width:26px;height:26px}.avgbar{width:2.6rem}
}

/* the character creator (profile, invitations, the house) */
.creator{border:0;margin:6px 0;padding:0}.creator legend{font-weight:650;margin-bottom:10px;padding:0}
.cr-top{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.cr-preview .avt{font-size:3.6rem}
.cr-label{display:block;margin:12px 0 2px;font:650 .8rem var(--sans);color:var(--muted)}
.cr-group{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px}
.cr-opt{margin:0;padding:0;display:grid;place-items:center;min-width:44px;min-height:44px;border:2px solid var(--glass-line);border-radius:14px;background:var(--glass-strong);cursor:pointer;overflow:hidden;font-size:1rem}
.cr-opt.sw{width:40px;height:40px;min-width:40px;min-height:40px;border-radius:50%}
.cr-opt .avt{font-size:1.5rem;background:transparent}
.cr-opt[aria-pressed=true]{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.cr-opt:disabled{opacity:.3;cursor:not-allowed}.cr-opt:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.sheet .creator{text-align:left}
.sheet .cr-top{justify-content:center}