.profile-page{min-height:100dvh;background:var(--color-cream);display:flex;flex-direction:column}.profile-nav{display:flex;gap:1.5rem;padding:calc(.875rem + var(--pwa-safe-top)) 1.5rem .875rem;border-bottom:3px solid var(--color-black);background:var(--color-black);color:var(--color-cream)}.profile-nav,.profile-nav-logo{align-items:center;flex-shrink:0}.profile-nav-logo{display:inline-flex;gap:.45rem;font-size:1.25rem;font-weight:900;letter-spacing:-.03em;color:var(--color-gold);text-decoration:none}.profile-nav-logo img{width:32px;height:32px;object-fit:contain}.profile-nav-title{display:flex;flex-direction:column;font-size:.875rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--color-cream-50);flex:1}.profile-nav-subtitle{font-size:.65rem;font-weight:500;opacity:.8}.profile-nav-cta,.profile-nav-subtitle{color:var(--color-gold);letter-spacing:.08em;text-transform:uppercase}.profile-nav-cta{padding:.45rem .9rem;border:2.5px solid var(--color-gold);background:transparent;font-size:.8rem;font-weight:900;text-decoration:none;box-shadow:3px 3px 0 var(--color-gold)}.profile-nav-cta:hover{transform:translate(-1px,-1px)}.profile-content{flex:1;max-width:1100px;margin:0 auto;padding:1.5rem;width:100%}.profile-grid{display:flex;flex-direction:column;gap:1rem}.profile-empty{max-width:540px;margin:3rem auto;padding:2rem;text-align:center;border:3px solid var(--color-black);background:var(--color-cream-50);box-shadow:6px 6px 0 var(--color-black)}.profile-loading{padding:3rem;text-align:center;font-size:1rem;font-weight:800;color:var(--color-black-soft)}.profile-error{padding:.8rem 1rem;background:var(--color-terracotta);color:var(--color-cream);border:2.5px solid var(--color-black);box-shadow:3px 3px 0 var(--color-black);font-weight:800;margin-bottom:1rem}.profile-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem}@media (max-width:640px){.profile-nav{padding:calc(.75rem + var(--pwa-safe-top)) 1rem .75rem;gap:.75rem}.profile-nav-subtitle{display:none}.profile-content{padding:1rem}}.profile-signout-row{display:flex;justify-content:flex-end;padding-top:.5rem}.btn-brutal-ghost{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:transparent;color:var(--color-black-soft);border:2px solid var(--color-black-soft);box-shadow:2px 2px 0 var(--color-black-soft);cursor:pointer;transition:box-shadow .1s,transform .1s}.btn-brutal-ghost:hover{background:var(--color-cream-50);box-shadow:none;transform:translate(2px,2px)}.profile-avatar-section{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.profile-avatar-preview{position:relative;width:72px;height:72px;border:3px solid var(--color-black);box-shadow:4px 4px 0 var(--color-black);flex-shrink:0;overflow:hidden;background:var(--color-navy)}.profile-avatar-preview img{width:100%;height:100%;object-fit:cover;display:block}.profile-avatar-meta{display:flex;flex-direction:column;gap:.35rem}.profile-avatar-name{font-size:1.1rem;font-weight:900;letter-spacing:-.01em}.profile-avatar-sub{font-size:.72rem;font-weight:700;color:var(--color-black-soft);text-transform:uppercase;letter-spacing:.06em}.avatar-picker{display:flex;flex-direction:column;gap:1rem}.avatar-picker-label{font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:var(--color-black-soft);margin-bottom:.5rem}.avatar-picker-lock-hint{font-weight:600;text-transform:none;letter-spacing:normal;color:var(--color-gold)}.avatar-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.5rem}.avatar-cell{position:relative;width:100%;aspect-ratio:1;border:2px solid var(--color-black);background:var(--color-cream-50);padding:0;cursor:pointer;overflow:hidden;transition:transform .1s,box-shadow .1s;box-shadow:2px 2px 0 var(--color-black)}.avatar-cell:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--color-black)}.avatar-cell:active:not(:disabled){transform:translate(1px,1px);box-shadow:1px 1px 0 var(--color-black)}.avatar-cell--selected{border-color:var(--color-gold);border-width:3px;box-shadow:3px 3px 0 var(--color-gold)}.avatar-cell--locked{opacity:.45;cursor:not-allowed}.avatar-cell-img{width:100%;height:100%;object-fit:cover;display:block}.avatar-cell-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.25rem;background:rgba(26,26,26,.35)}.avatar-cell-check{position:absolute;bottom:3px;right:4px;font-size:.75rem;font-weight:900;color:var(--color-gold);text-shadow:0 0 3px var(--color-black);line-height:1}.profile-username-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.25rem}.profile-username-display{font-size:.85rem;font-weight:800;letter-spacing:-.01em}.profile-username-edit-btn{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;padding:.2rem .55rem;border:1.5px solid var(--color-black-soft);background:transparent;color:var(--color-black-soft);cursor:pointer}.profile-username-edit-btn:hover{background:var(--color-cream-50)}.profile-username-input-row{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;width:100%}.profile-username-input{flex:1;min-width:120px;max-width:240px;border:2px solid var(--color-black);background:var(--color-cream-50);padding:.4rem .6rem;font:inherit;font-size:.85rem;font-weight:800}.profile-username-input[aria-invalid=true]{border-color:var(--color-terracotta)}.profile-username-save-btn{padding:.4rem .75rem;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;border:2px solid var(--color-black);background:var(--color-gold);color:var(--color-black);box-shadow:2px 2px 0 var(--color-black);cursor:pointer}.profile-username-cancel-btn{padding:.4rem .65rem;font-size:.7rem;font-weight:800;text-transform:uppercase;border:2px solid var(--color-black-soft);background:transparent;color:var(--color-black-soft);cursor:pointer}.profile-username-err{width:100%;font-size:.7rem;font-weight:800;color:var(--color-terracotta);margin-top:.1rem}.profile-username-limit{font-size:.65rem;font-weight:700;color:var(--color-black-soft);opacity:.7}@media (max-width:400px){.avatar-picker-grid{grid-template-columns:repeat(4,1fr)}}