*{box-sizing:border-box}body.account-page{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(ellipse at 90% 10%,#ebf4ff,transparent 52%),radial-gradient(ellipse at 10% 5%,#f1ecff,transparent 45%),#f8f9fc;color:#22304a}
.account-main{width:min(1060px,calc(100% - 36px));margin:0 auto;padding:clamp(30px,5vw,60px) 0 70px}
.account-eyebrow{font-size:.73rem;font-weight:800;letter-spacing:.14em;color:#7469b4}
.account-main h1{font-size:clamp(2rem,4vw,3.75rem);letter-spacing:-.065em;margin:10px 0}
.account-intro{font-size:1.04rem;line-height:1.6;color:#68758c;max-width:58ch;margin:0 0 27px}
.account-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:start;gap:24px}
.account-card{padding:clamp(20px,3vw,32px);border:1px solid #e0e4f1;border-radius:22px;background:linear-gradient(140deg,#fff,#fcfbff);box-shadow:0 15px 45px #1f285010}
.account-card h2{font-size:1.4rem;margin:0 0 14px;letter-spacing:-.03em}
.account-card p{line-height:1.6;font-size:.9rem;color:#65738b}
.account-card label{display:block;font-size:.84rem;font-weight:750;margin:15px 0 6px;color:#475775}
.account-card input{display:block;width:100%;height:45px;max-height:45px;border-radius:11px;border:1px solid #d4d9e8;background:#fff;color:#243450;padding:10px 12px;font:inherit;font-size:16px}
.account-actions{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:17px 0 0}
.account-card button{min-height:43px;padding:9px 16px;border-radius:11px;border:1px solid #d6dbee;background:#fff;color:#5c5096;font:inherit;font-size:.87rem;font-weight:730;cursor:pointer}
.account-card .primary{border-color:#7668d9;color:#fff;background:linear-gradient(140deg,#9384ed,#7265dc)}
.account-card .danger{color:#ad3b63;border-color:#ebccd6}
.account-card .text-button{border:0;padding:7px 3px;text-decoration:underline;text-underline-offset:3px}
.account-card button:focus-visible,.account-card input:focus-visible{outline:3px solid #9e93ec;outline-offset:3px}
.account-card button:disabled{opacity:.55}
.account-card [hidden]{display:none!important}
#message{font-weight:730;color:#6b60ae;min-height:22px}
#identity{font-size:1rem;font-weight:780;color:#2b3b5a;overflow-wrap:anywhere}
.account-divider{height:1px;background:#e4e8f1;margin:23px 0}
.account-game{display:grid;gap:4px;border:1px solid #e6e6f1;border-radius:13px;padding:14px;margin-top:12px}
.account-game strong{font-size:.96rem}.account-game span{font-size:.84rem;color:#728098;line-height:1.45}
@media(max-width:720px){.account-grid{grid-template-columns:1fr}.account-main{padding-top:24px}.account-card{padding:22px}}

/* v2: personal dashboard, rather than an internal development status board */
.account-dashboard{min-height:340px}
.account-saves-list{display:grid;gap:11px;margin:16px 0 20px}
.account-saved-game{position:relative;display:grid;gap:6px;padding:16px 45px 16px 17px;
 border:1px solid #e5e7f2;border-radius:14px;background:linear-gradient(140deg,#fbfbff,#f6f5ff);
 text-decoration:none;transition:border-color .17s ease,transform .17s ease}
.account-saved-game:hover{border-color:#aaa0ed;transform:translateY(-1px)}
.account-saved-game strong{font-size:.98rem;color:#253353}
.account-saved-game span{font-size:.86rem;color:#737c97}
.account-saved-game b{position:absolute;right:17px;top:19px;font-size:1rem;color:#8274d8}
.account-empty{padding:15px;border:1px dashed #d6d9e9;border-radius:13px;background:#fafaff}
.account-more-games{display:inline-flex;gap:10px;text-decoration:none;align-items:center;
 border-radius:11px;border:1px solid #d6d5f4;padding:12px 16px;color:#6655bb;font-weight:760;font-size:.9rem}
.account-more-games:hover{background:#f0edff}
.account-danger-zone{margin-top:23px;padding-top:18px;border-top:1px solid #ececf3}
.account-danger-zone summary{cursor:pointer;font-size:.8rem;color:#8c6271;list-style:none}
.account-danger-zone summary::after{content:'⌄';margin-left:9px}
.account-danger-zone p{font-size:.79rem}
.account-main [hidden]{display:none!important}

/* Verify a sensitive password change in place without forcing a logout. */
.account-verify-password{margin:20px 0 4px;padding:17px;border-radius:14px;background:#f7f7ff;border:1px solid #dddafa}
.account-verify-password p{font-size:.84rem;margin:0 0 10px}
.account-verify-password .account-actions{gap:9px}

/* Account password visibility: icon stays inside each field on desktop/mobile. */
.account-password-field{display:block;position:relative;width:100%;min-width:0}
.account-card .account-password-field input{width:100%;padding-right:54px}
.account-card button.account-password-eye{
  position:absolute;top:50%;right:5px;transform:translateY(-50%);
  display:grid;place-items:center;
  width:40px;height:38px;min-height:38px;
  padding:0;margin:0;flex:none;
  border:0;border-radius:9px;box-shadow:none;background:transparent;
  color:#65738d;cursor:pointer;
}
.account-card button.account-password-eye:hover{background:#f1effc;color:#5f50b8}
.account-card button.account-password-eye[aria-pressed="true"]{color:#5d4bc0}
.account-card button.account-password-eye:focus-visible{outline:3px solid #9e93ec;outline-offset:1px}

/* Brief privacy information stays available in signed-in and guest account views. */
.account-card .account-privacy-link{font-size:.8rem;line-height:1.6;color:#707a91;margin:18px 0 0}
.account-privacy-link a{font-weight:730;color:#6452bb;text-underline-offset:3px}

/* Shared account nickname: separate from the security/identity fields. */
.account-profile{margin:12px 0 0}
.account-profile h3{font-size:1.07rem;letter-spacing:-.02em;margin:0 0 16px;color:#2d3b58}
.account-card .account-profile label{margin-top:0}
.account-optional{font-weight:500;color:#8190a6}
.account-card .account-field-hint{font-size:.79rem;line-height:1.55;color:#7a849d;margin:7px 0 12px}
.account-card .account-profile button{min-height:42px}
.account-card .account-profile-status{min-height:1.25rem;font-size:.8rem;font-weight:730;color:#6454b5;margin:9px 0 0}
.account-card .account-signed-caption{font-size:.79rem;margin:0 0 2px;color:#7a849d}
.account-card .account-signed-caption+#identity{margin:0 0 12px}
