/* Account / Character Vault refinements - 2026-11-01.
 * Layered after account.css so Identity flows remain independent.
 */
:root { --account-accent:#e3c389; --account-focus:#97d7ff; }
#auth.panel { border-color:rgba(132,190,227,.28); }
#auth .google {
  border-radius:4px; box-shadow:0 8px 26px rgba(0,0,0,.18);
}
#auth .email-form { row-gap:12px; }
#auth .email-form label,.password-field label {
  font:600 11px/1.4 "Trebuchet MS",Arial,sans-serif;
  color:#bed4e2; letter-spacing:.01em;
}
#auth .password-field { display:grid;gap:6px;min-width:0; }
#auth .password-field label { display:block; }
#auth .password-control { position:relative;min-width:0; }
#auth .password-control input { width:100%;padding-right:90px; }
#auth .password-toggle {
  position:absolute;right:5px;top:50%;transform:translateY(-50%);
  min-height:33px;min-width:71px;padding:5px 8px;
  color:#bcd9eb;background:rgba(19,47,68,.8);
  border:1px solid rgba(137,197,234,.25);border-radius:3px;
  font:700 10px "Trebuchet MS",Arial,sans-serif;cursor:pointer;
}
#auth .password-toggle:hover { background:rgba(36,81,109,.92);color:#fff; }
#auth .password-toggle:focus-visible { outline:2px solid var(--account-focus);outline-offset:2px; }
#auth .email-form input:focus-visible { border-color:var(--account-focus); }
#auth .email-help { line-height:1.45; }
#auth #email-request-form .email-help { grid-column:1/-1; }
#auth #email-request-form .turnstile-shell { grid-column:1/-1; }
#auth .email-auth-divider { margin-top:14px; }
#auth .auth-mode-button:focus-visible { outline:2px solid var(--account-focus);outline-offset:3px; }
body.is-dashboard main {
  width:min(1320px,calc(100% - 48px));max-width:1320px;
  grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);
  gap:clamp(24px,4vw,72px);
  padding:clamp(30px,6vh,65px) 0 65px;align-items:start;
}
body.is-dashboard .intro { padding-top:28px; }
body.is-dashboard .intro h1 {
  font-size:clamp(3rem,5vw,5.1rem);line-height:1.01;overflow-wrap:break-word;
  margin:12px 0 18px;
}
body.is-dashboard .intro .lead { font-size:clamp(14px,1.35vw,17px);line-height:1.65;max-width:340px; }
body.is-dashboard #dashboard { width:100%;padding:clamp(21px,3vw,36px); }
#dashboard .user {
  padding-bottom:20px;border-bottom:1px solid rgba(132,193,226,.16);
}
#dashboard .user>div { min-width:0; }
#dashboard .user span { min-width:0; }
#dashboard .user h2 { font:500 clamp(1.5rem,2.4vw,2rem) Georgia,serif; }
#dashboard #user-email { display:block;overflow-wrap:anywhere;line-height:1.55; }
#dashboard #avatar { background:#071624;padding:6px; }
#dashboard .vault-head {
  margin-top:22px;padding-top:0;border:0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;
  gap:11px 15px;
}
#dashboard .vault-head>div { min-width:0; }
#dashboard .vault-head h3 { font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.2; }
#dashboard .vault-head .primary { grid-column:2;grid-row:1;align-self:end;min-height:43px;padding:10px 16px;white-space:nowrap; }
#dashboard #vault-capacity { grid-column:1/-1;justify-self:start;letter-spacing:.09em;font-weight:700; }
#dashboard .vault-guide {
  margin:13px 0 0;color:#a4b8c8;font-size:12px;line-height:1.55;
}
#dashboard .characters-list { margin-top:15px;gap:10px; }
#dashboard .character-card {
  position:relative;grid-template-columns:52px minmax(0,1fr) auto;
  gap:14px;border-color:rgba(130,194,233,.23);
  background:linear-gradient(100deg,rgba(18,37,53,.74),rgba(5,13,23,.78));
  border-radius:4px;transition:border-color .18s,background .18s;
}
#dashboard .character-card:hover { border-color:rgba(220,185,115,.52); }
#dashboard .character-rune {
  width:52px;height:52px;color:#e4c58c;
  border-color:rgba(213,182,119,.35);
  background:radial-gradient(circle,rgba(132,101,50,.22),rgba(4,12,19,.9));
}
#dashboard .character-card[data-class="Mage"] .character-rune {
  color:#a6d5ff;border-color:rgba(132,190,245,.44);
  background:radial-gradient(circle,rgba(60,108,165,.23),rgba(4,12,19,.91));
}
#dashboard .character-card[data-class="Archer"] .character-rune {
  color:#b9e3ca;border-color:rgba(120,197,151,.4);
  background:radial-gradient(circle,rgba(54,118,85,.23),rgba(4,12,19,.91));
}
#dashboard .character-info { min-width:0; }
#dashboard .character-info strong { font:500 clamp(17px,1.8vw,22px) Georgia,serif;overflow-wrap:anywhere; }
#dashboard .character-info .character-role { display:block;margin:4px 0 0;color:#d6bb88;font-size:10px;letter-spacing:.13em; }
#dashboard .character-info .character-meta { display:block;color:#9bafbf;font-size:11px;line-height:1.5;letter-spacing:.01em;text-transform:none;margin-top:5px; }
#dashboard .char-actions { flex-wrap:wrap;justify-content:flex-end;align-items:center; }
#dashboard .char-actions a,#dashboard .char-actions button {
  min-height:37px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:3px;text-transform:none;font-size:11px;font-weight:700;padding:10px 12px;
  transition:background .2s,border-color .2s;
}
#dashboard .char-actions .play { background:linear-gradient(110deg,#cda968,#a98750);color:#111821;border-color:#e0c28c; }
#dashboard .char-actions .play:hover { background:#e2c38a; }
#dashboard .char-actions .delete { color:#d6a4a5;border-color:rgba(231,132,139,.32); }
#dashboard .char-actions .delete:hover { border-color:#ea9a9e;background:rgba(144,43,52,.12); }
#dashboard .char-actions a:focus-visible,#dashboard .char-actions button:focus-visible,
#dashboard .primary:focus-visible,#dashboard #logout:focus-visible { outline:2px solid var(--account-focus);outline-offset:3px; }
#dashboard .vault-capacity { border:1px solid rgba(220,183,111,.3);padding:7px 11px;border-radius:20px; }
#dashboard .empty { line-height:1.6;color:#b5c7d6; }
@media (min-width:981px) {
  body.is-dashboard .intro { position:sticky;top:114px; }
}
@media (max-width:980px) {
  body.is-dashboard main { grid-template-columns:minmax(0,1fr);gap:23px;padding:26px 0 45px; }
  body.is-dashboard .intro { padding:0;position:static; }
  body.is-dashboard .intro h1 { font-size:clamp(2.8rem,7vw,4.5rem);margin:8px 0 11px; }
  body.is-dashboard .intro .lead { max-width:none; }
  body.is-dashboard #dashboard { width:min(100%,780px); }
}
@media (max-width:700px) {
  body.is-dashboard main { width:calc(100% - 28px); }
  #dashboard .character-card { grid-template-columns:48px minmax(0,1fr); }
  #dashboard .character-rune { width:48px;height:48px; }
  #dashboard .char-actions { grid-column:1/-1;justify-content:stretch; }
  #dashboard .char-actions a { flex:1; }
  #dashboard .char-actions button { flex:0 0 auto; }
}
@media (max-width:430px) {
  #auth .password-control input { font-size:16px; }
  #dashboard .user { gap:13px; }
  #dashboard .user>div { align-items:center; }
  #dashboard .vault-head { grid-template-columns:1fr; }
  #dashboard .vault-head .primary { grid-column:1;grid-row:auto;width:100%; }
  #dashboard #vault-capacity { grid-column:1; }
  #dashboard .char-actions { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) {
  #dashboard .character-card,#dashboard .char-actions a,#dashboard .char-actions button { transition:none; }
}