.account-page { width: min(1420px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 58px; }
.account-hero { min-height: 285px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(26px, 5vw, 52px); overflow: hidden; background: linear-gradient(90deg, rgba(8,9,10,.96), rgba(22,20,17,.9) 58%, rgba(53,31,20,.76)), radial-gradient(circle at 82% 36%, rgba(214,168,79,.19), transparent 20rem); }
.account-hero::after { content: ''; position: absolute; right: -100px; bottom: -170px; width: 420px; height: 420px; border: 1px solid rgba(214,168,79,.17); border-radius: 50%; pointer-events: none; }
.account-hero__copy { position: relative; z-index: 1; max-width: 820px; }
.eyebrow { margin: 0 0 8px; color: var(--k-gold); font-size: .76rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 14px; font-size: clamp(2.4rem, 6vw, 5.1rem); line-height: .94; letter-spacing: -.045em; }
h2 { margin-bottom: 4px; color: var(--k-gold-2); font-size: 1.2rem; }
.hero-text { max-width: 770px; margin-bottom: 0; color: var(--k-muted); line-height: 1.67; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.account-seal { position: relative; z-index: 1; flex: 0 0 178px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; border: 1px solid rgba(236,205,142,.35); border-radius: 50%; background: radial-gradient(circle, rgba(214,168,79,.18), rgba(72,43,18,.55) 58%, rgba(7,8,9,.95) 60%); box-shadow: inset 0 0 0 7px rgba(214,168,79,.05), 0 18px 38px rgba(0,0,0,.45); }
.account-seal span, .account-seal strong, .account-seal small { display: block; }
.account-seal span { font-size: 2rem; }
.account-seal strong { margin-top: 6px; color: var(--k-gold-2); letter-spacing: .11em; text-transform: uppercase; }
.account-seal small { margin-top: 4px; color: var(--k-muted); text-transform: uppercase; }

.account-dashboard { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(280px, .8fr); gap: 18px; margin-top: 18px; }
.account-dashboard > section, .debug-panel { padding: 21px; }
.progress-panel, .debug-panel { grid-column: 1 / -1; }
.permissions-panel { grid-column: 1 / -1; }
.panel-heading { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px; padding-bottom: 13px; border-bottom: 1px solid var(--k-line); }
.panel-heading.compact { margin-bottom: 13px; }
.panel-heading p:last-child { margin-bottom: 0; color: var(--k-muted); line-height: 1.4; }

.account-state { padding: 16px; border: 1px solid var(--k-line); border-radius: 11px; background: rgba(0,0,0,.22); }
.auth-user { display: flex; align-items: center; gap: 14px; }
.auth-user img, .avatar-fallback { width: 70px; height: 70px; object-fit: cover; border: 1px solid var(--k-line-2); border-radius: 13px; background: rgba(0,0,0,.25); }
.avatar-fallback { display: grid; place-items: center; font-size: 1.8rem; }
.auth-user-name, .player-name { color: var(--k-text); font-size: clamp(1.45rem, 3vw, 2.2rem); line-height: 1; font-weight: 800; }
.auth-user-login, .player-meta, .account-note { margin-top: 6px; color: var(--k-muted); line-height: 1.52; }
.badge-row, .account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.status-badge { display: inline-flex; align-items: center; width: fit-content; padding: 6px 9px; border: 1px solid var(--k-line); border-radius: 999px; font-size: .82rem; }
.status-ok { color: #a9da86; background: rgba(119,184,91,.12); }
.status-warn { color: #f1c96d; background: rgba(214,168,79,.1); }
.status-error { color: #f0a099; background: rgba(143,44,37,.16); }
.status-info { color: #a7d0e2; background: rgba(117,167,189,.12); }

.player-card { padding: 16px; border: 1px solid var(--k-line); border-radius: 11px; background: linear-gradient(145deg, rgba(214,168,79,.07), rgba(0,0,0,.23)); }
.player-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.stat-tile { min-width: 0; padding: 10px; border: 1px solid rgba(236,205,142,.11); border-radius: 9px; background: rgba(0,0,0,.22); }
.stat-label, .stat-value { display: block; }
.stat-label { color: var(--k-muted); font-size: .78rem; }
.stat-value { margin-top: 5px; color: var(--k-gold-2); font-weight: 800; overflow-wrap: anywhere; }

.permission-list { display: grid; gap: 8px; }
.permission-row { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(236,205,142,.1); border-radius: 9px; background: rgba(0,0,0,.2); }
.permission-row.allowed { border-color: rgba(119,184,91,.26); }
.permission-row.locked { opacity: .82; }
.permission-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--k-line); border-radius: 8px; }
.permission-name, .permission-description { display: block; }
.permission-name { color: var(--k-text); font-weight: 800; }
.permission-description { margin-top: 2px; color: var(--k-muted); font-size: .78rem; line-height: 1.3; }
.permission-state { color: var(--k-muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.permission-row.allowed .permission-state { color: #a9da86; }
.permission-reason { margin: 11px 0 0; padding-top: 11px; border-top: 1px solid var(--k-line); color: var(--k-muted); line-height: 1.45; }

.platform-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--k-line); border-radius: 11px; background: rgba(0,0,0,.22); }
.platform-row strong, .platform-row span { display: block; }
.platform-row > div > span { margin-top: 4px; color: var(--k-muted); font-size: .82rem; line-height: 1.35; }
.platform-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(0,231,1,.35); border-radius: 10px; color: #071007; background: #00e701; font: 900 1.15rem/1 Georgia,'Times New Roman',serif; box-shadow: 0 8px 20px rgba(0,231,1,.08); }
.identity-feedback { margin: 0 0 12px; padding: 10px 12px; border: 1px solid currentColor; border-radius: 9px; line-height: 1.4; }
.account-actions button:disabled { cursor: wait; opacity: .6; }

.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.step-card { position: relative; min-height: 145px; padding: 14px; border: 1px solid rgba(236,205,142,.12); border-radius: 10px; background: rgba(0,0,0,.2); }
.step-number { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 12px; border: 1px solid var(--k-line-2); border-radius: 50%; color: var(--k-gold-2); background: rgba(214,168,79,.08); font-weight: 800; }
.step-title { color: var(--k-gold-2); font-weight: 800; }
.step-text { margin-top: 6px; color: var(--k-muted); line-height: 1.42; }

.debug-panel summary { cursor: pointer; color: var(--k-gold-2); font-weight: 800; }
.debug-panel > p { margin: 10px 0; color: var(--k-muted); }
.debug-box { max-height: 360px; margin: 12px 0 0; padding: 14px; overflow: auto; border: 1px solid rgba(236,205,142,.1); border-radius: 9px; color: #b8aa91; background: rgba(0,0,0,.3); font: .84rem/1.45 Consolas, 'Courier New', monospace; white-space: pre-wrap; }

@media (max-width: 1120px) { .account-dashboard { grid-template-columns: repeat(2, minmax(0,1fr)); } .permissions-panel, .platform-identities { grid-column: 1 / -1; } }
@media (max-width: 820px) { .account-hero { align-items: flex-start; } .account-seal { flex-basis: 145px; } .account-dashboard { grid-template-columns: 1fr; } .permissions-panel, .progress-panel, .debug-panel { grid-column: auto; } .steps-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .account-page { width: min(100% - 20px, 1420px); padding-top: 16px; } .account-hero { flex-direction: column; min-height: 0; } .account-seal { width: 125px; flex-basis: 125px; } .auth-user { align-items: flex-start; } .player-stats, .steps-grid { grid-template-columns: 1fr 1fr; } .permission-row { grid-template-columns: 36px minmax(0,1fr); } .permission-state { grid-column: 2; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
/* Separate from interface effects/sounds; controls also work without login. */
.website-music { min-width:0; padding:18px 0; border-bottom:1px solid rgba(205,168,91,.25); }
.website-music p { overflow-wrap:break-word; }
.website-music__buttons { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.website-music label { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.website-music input[type="range"] { width:180px; max-width:100%; accent-color:#cdaa5b; }
.website-music small { display:block; margin-top:12px; line-height:1.6; }