/* ACCOUNT PAGE */
.account-section { max-width: 500px; margin: 2.5rem auto; padding: 1.5rem 2rem; }
.account-section h1 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 2rem;
    color: var(--heading);
    margin-bottom: 1.5rem;
}
.account-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.2rem 1.5rem;
    margin-bottom: 1rem;
}
.account-row { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.account-row:last-of-type { border-bottom: none; }
/* A row whose own list follows it. The rule under it read as a divider
   between two things when it was sitting inside one. */
.account-row-heads { border-bottom: none; padding-bottom: 0.2rem; }
.account-label { font-size: 0.8rem; color: var(--text-muted); }
.account-value { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text); }
.account-value.unlinked { color: var(--text-muted); font-style: italic; }
/* An i beside a label, holding what a caption under the list used to say.
   A real element rather than attr(), so a link in it can be followed: the
   bubble stays while the pointer is on it. */
.account-label { display: inline-flex; align-items: center; gap: 8px; }
.accountInfo {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border: 1px solid var(--border); border-radius: 50%;
    color: var(--text-muted); font-family: var(--font-mono); font-size: 0.66rem; line-height: 1;
    cursor: default; opacity: 0.55;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.accountInfo:hover, .accountInfo:focus-visible, .accountInfo:focus-within { opacity: 1; color: var(--gold); border-color: var(--gold-dim); outline: none; }
.accountTip {
    position: absolute; top: calc(100% + 8px); left: -6px;
    width: max-content; max-width: 280px;
    padding: 8px 10px;
    background: var(--bg-card); border: 1px solid var(--gold-dim); border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0,0,0,calc(0.45 * var(--shk, 1)));
    color: var(--text-muted); font-family: var(--font-mono); font-size: 0.68rem; line-height: 1.5;
    text-align: left; white-space: normal;
    opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 5;
}
/* The gap between the i and the bubble is bridged, so the pointer can cross it. */
.accountTip::before { content: ''; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
.accountInfo:hover .accountTip, .accountInfo:focus-within .accountTip, .accountInfo:focus-visible .accountTip { opacity: 1; pointer-events: auto; }
.accountTip a { color: var(--gold); text-decoration: none; }
.accountTip a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .accountTip { transition: none; } }

/* Linked accounts list */
/* Each account a banner, the same as the org banners under them. */
.linked-accounts-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 1.2rem; }
.linked-account-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px; transition: border-color 0.15s ease; }
.linked-account-row:hover { border-color: var(--gold-dim); }
/* The rule between the accounts and the orgs. */
.account-row.account-split { border-top: 1px solid var(--border); padding-top: 0.9rem; margin-top: 0.4rem; }
.linked-riot-id { font-family: var(--font-body); font-size: 0.9rem; color: var(--text); }
.linked-account-row.active .linked-riot-id { color: var(--gold-dim); }
.linked-level { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); opacity: 0.7; }

.linked-account-row { display: flex; align-items: center; gap: 0.5rem; }
.linked-remove-btn { order: -1; }
/* On the account page the x is bare: red, at the left, clear of the name. */
.linked-remove-btn.lafterXDel, .org-leave-btn.lafterXDel {
    width: auto; height: auto; padding: 0 2px; margin: 0 0.7rem 0 -4px;
    border: 0; border-radius: 0; background: none;
    color: var(--red-x); font-size: 1.15rem; opacity: 0.75;
}
.linked-remove-btn.lafterXDel:hover, .org-leave-btn.lafterXDel:hover { opacity: 1; color: var(--red-x); }
/* Username and email: the value is the button. */
.accountEdit {
    background: none; border: 0; padding: 0; cursor: pointer; text-align: right;
    text-decoration: underline dotted transparent; text-underline-offset: 3px;
    transition: color 0.15s, text-decoration-color 0.15s;
}
.accountEdit:hover { color: var(--gold); text-decoration-color: var(--gold-dim); }
.accountNameBtn { font: inherit; color: inherit; text-align: center; }
.changeSection { text-align: center; }
.changeLine { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text); margin: 0 0 0.8rem; }
.changeLine.isErr { color: var(--red-x); }
.changeLine a { color: var(--gold); }
.changeBtn { padding: 0.5rem 1.4rem; border: 1px solid var(--gold-dim); border-radius: 6px; background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold); font-family: var(--font-mono); cursor: pointer; }
.changeBtn:hover { border-color: var(--gold); }
.linked-level { margin-left: auto; }

/* Confirm popup */
.confirm-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.confirm-popup { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 1.5rem 2rem; text-align: center; max-width: 280px; }
.confirm-text { font-family: var(--font-body); font-size: 0.95rem; color: var(--text); margin-bottom: 1.2rem; }
.confirm-buttons { display: flex; gap: 0.8rem; justify-content: center; }
.confirm-btn { font-family: var(--font-script); font-size: 0.8rem; padding: 0.4rem 1rem; border-radius: 3px; border: 1px solid var(--border); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.confirm-btn.cancel { background: none; color: var(--text-muted); }
.confirm-btn.cancel:hover { border-color: var(--gold-dim); color: var(--text); }
.confirm-btn.remove { background: none; color: var(--blood-light); border-color: var(--blood); }
.confirm-btn.remove:hover { background: rgba(165,34,34,0.15); border-color: var(--blood-light); }

.account-signout { display: inline-block; font-size: 0.85rem; line-height: 1.4; color: var(--text-muted); text-decoration: none; border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 1.2rem; transition: border-color 0.2s, color 0.2s; }
.account-signout:hover { border-color: var(--text-muted); color: var(--text); }
.linked-count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.7;
}

/* Confirm overlay */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.confirm-cancel, .confirm-remove { font-family: var(--font-script); font-size: 0.8rem; padding: 0.4rem 1rem; border-radius: 3px; border: 1px solid var(--border); cursor: pointer; transition: all 0.2s; }
.confirm-cancel { background: var(--bg-card); color: var(--text-muted); }
.confirm-cancel:hover { border-color: var(--text-muted); color: var(--text); }
.confirm-remove { background: var(--bg-card); color: var(--blood-light); border-color: var(--blood); }
.confirm-remove:hover { background: var(--blood); color: var(--on-accent); }

.accountFace { position: relative; display: flex; justify-content: center; margin-bottom: 0.9rem; }
.accountFaceBtn { padding: 0; background: none; border: none; border-radius: 50%; cursor: pointer; transition: transform 0.15s; }
.accountFaceBtn:not(:disabled):hover { transform: scale(1.04); }
.accountFaceBtn:not(:disabled):hover .lafterAvatar { border-color: var(--gold); }
.accountFaceBtn:disabled { cursor: default; }
.accountFacePick {
    position: absolute; top: calc(100% + 10px); left: 50%; z-index: 20;
    transform: translateX(-50%);
    display: grid; grid-template-columns: repeat(8, 40px); gap: 8px;
    padding: 12px; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    background: var(--bg-card); border: 1px solid var(--gold-dim); border-radius: 12px;
    box-shadow: 0 14px 34px rgba(0,0,0,calc(0.5 * var(--shk, 1)));
}
.accountFacePick[hidden] { display: none; }
.accountFaceOpt { padding: 0; background: none; border: none; border-radius: 50%; cursor: pointer; }
.accountFaceOpt .lafterAvatar { width: 40px; height: 40px; border-color: var(--border); transition: border-color 0.15s, color 0.15s, opacity 0.15s; }
.accountFaceOpt .lafterAvatarEmoji { font-size: 36px; }
.accountFaceOpt:hover .lafterAvatar { border-color: var(--gold-dim); }
.accountFaceOpt.isOn .lafterAvatar { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
/* A drawn face in the picker: dim until hovered, lit when chosen, no ring. */
.accountFaceOpt .lafterAvatar.isDrawn { color: var(--gold-dim); box-shadow: none; }
.accountFaceOpt:hover .lafterAvatar.isDrawn, .accountFaceOpt.isOn .lafterAvatar.isDrawn { color: var(--gold); }
/* An emoji has no ring to light, so the pick is marked under it. */
.accountFaceOpt { position: relative; }
.accountFaceOpt.isOn::after { content: ''; position: absolute; left: 25%; right: 25%; bottom: -5px; height: 2px; border-radius: 1px; background: var(--gold); }
.account-section h1.accountName { text-align: center; margin-bottom: 1.2rem; }

.accountDeleting {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 1rem; padding: 0.6rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--red-x) 50%, transparent); border-radius: 6px;
    font-family: var(--font-mono); font-size: 0.78rem; color: var(--text);
}
.accountKeep { padding: 0.35rem 0.9rem; background: none; border: 1px solid var(--gold-dim); border-radius: 4px; color: var(--gold); font-family: var(--font-mono); font-size: 0.76rem; cursor: pointer; }
.accountKeep:hover { border-color: var(--gold); }
.accountEnds { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* The one that destroys something is the red one; Sign Out is grey. */
.accountDelete {
    font-family: inherit; font-size: 0.85rem; line-height: 1.4;
    background: none; color: var(--red-x);
    border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 1.2rem;
    cursor: pointer; transition: border-color 0.2s, color 0.2s;
}
.accountDelete:hover { border-color: var(--red-x); color: var(--heading); }

/* The account face's pencil: a small gold disc at the corner of the circle. */
.accountFaceBtn { position: relative; }
.accountFacePen {
    position: absolute; right: 2px; bottom: 2px; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gold); color: var(--on-gold); border: 2px solid var(--bg); box-sizing: border-box;
    transition: filter 0.15s;
}
.accountFacePen svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.accountFaceBtn:hover .accountFacePen { filter: brightness(1.12); }

/* Under a name being typed: whether it is free. */
.nameFree { display: block; min-height: 1em; margin-top: 4px; font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); }
.nameFree.isFree { color: var(--ok); }
.nameFree.isTaken { color: var(--red-x); }