.account-page{min-height:100svh;background:radial-gradient(ellipse at 12% 30%,#42665966,transparent 65%),var(--ink)}
.account-header{max-width:1240px;margin:auto;padding:30px 36px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.account-back{min-height:48px;display:inline-flex;align-items:center;font-size:14px;color:var(--cream)}
.account-shell{max-width:1100px;margin:32px auto 60px;padding:0 32px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.account-intro{padding-top:50px}.account-intro .eyebrow{font-size:10px;letter-spacing:1.8px;line-height:1.8;color:var(--gold)}
.account-intro h1{font:700 clamp(42px,5vw,66px)/1.05 var(--display);letter-spacing:-2px;margin:24px 0}.account-intro h1 span{color:var(--coral)}
.account-intro p{color:#c0d0c6;line-height:1.8;font-size:16px}.account-intro .account-small{font-size:13px}
.account-motif{display:grid;grid-template-columns:repeat(2,80px);gap:10px;transform:rotate(-8deg);margin:35px 10px;width:170px}
.account-motif span{height:58px;border-radius:12px;display:grid;place-items:center;background:#eab4a1;color:var(--ink);font:700 24px var(--display);box-shadow:0 5px 0 #0003}
.account-motif span:nth-child(2){background:#e9d592}.account-motif span:nth-child(3){background:#a3cbb6}.account-motif span:nth-child(4){background:#b2bfd6}
.account-card{padding:32px;border:1px solid #aac0b440;border-radius:24px;background:#173b3a;box-shadow:0 24px 60px #0002;min-width:0}
.account-card h2{font:700 32px/1.15 var(--display);letter-spacing:-.8px;margin:12px 0 16px}.account-card p{font-size:14px;line-height:1.65;color:#ccdacd}
.account-card .dialog-eyebrow{color:var(--gold);font-size:10px}.account-card a:not(.primary-button),.account-intro a{text-decoration:underline;text-underline-offset:4px}
.account-form{display:grid;gap:18px;margin:24px 0 16px}.account-form label{display:block;font-size:14px;margin-bottom:8px}
.account-form input:not([type=submit]):not([type=checkbox]){display:block;width:100%;min-height:48px;border:1px solid #aac0b477;border-radius:9px;padding:12px;background:#102f30;color:var(--cream);font:400 16px var(--body)}
.account-form input:focus-visible,.account-danger summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.account-form small{display:block;font-size:12px;line-height:1.6;color:#bdcec1;margin-top:7px}
.account-form .account-checkbox{display:flex;gap:12px;align-items:center;min-height:48px;margin:0;line-height:1.5}.account-checkbox input{width:20px;height:20px;flex-shrink:0;accent-color:var(--gold)}
.account-card .primary-button,.account-card .secondary-button{width:100%;min-height:50px;height:auto;white-space:normal;text-align:center;justify-content:center;padding:14px 16px;font:500 14px var(--body);cursor:pointer}
.account-card .secondary-button{color:var(--cream);border-color:#aac0b466}
.account-links{display:flex;flex-direction:column;align-items:flex-start}.account-links a{display:flex;align-items:center;min-height:48px;font-size:14px}
.account-notice,.account-errors{padding:14px 16px;border:1px solid #e9c47c88;border-radius:10px;background:#e9c47c12;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.account-errors{border-color:var(--coral);margin:20px 0}.account-errors ul{margin:8px 0 0;padding-left:20px}.account-card .account-small{font-size:12px;color:var(--muted)}
.account-danger{margin-top:32px;border-top:1px solid #aac0b440;padding-top:16px}.account-danger summary{min-height:48px;cursor:pointer;color:var(--coral);padding:12px 0}.account-card .danger-button{border-color:var(--coral);color:var(--coral)}
.account-footer{padding:24px;text-align:center;font-size:10px;letter-spacing:2px;color:var(--muted)}
.arena-account-links{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:12px;line-height:1.4}.arena-account-links a,.arena-account-links button{min-height:48px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px}.arena-account-links button{border:0;background:none;padding:0;font:inherit}.arena-account-links form{margin:0}.arena-account-links .account-name{max-width:100%;overflow-wrap:anywhere;color:var(--gold)}
.welcome .account-notice{font-size:12px;max-height:110px;overflow:auto;margin:8px 0}.results-dialog .arena-account-links{justify-content:center}
.results-dialog .account-name{color:#365345}
.welcome .arena-account-links{pointer-events:auto}
@media(max-width:900px) and (orientation:portrait){
  .arena-app[data-mode=welcome]{height:auto;min-height:100dvh;overflow:hidden;padding-bottom:24px}
  .arena-app[data-mode=welcome] .world{top:170px;bottom:auto;height:320px;min-height:0}
  .welcome .welcome-actions{position:relative;margin:440px 20px 0;pointer-events:auto;text-align:center}
  .welcome-actions .welcome-details,.welcome-actions .primary-button,.welcome-actions .secondary-button,.welcome-actions #help-button,.welcome-actions .welcome-fine{position:static;width:100%;margin:10px 0;left:auto;right:auto;bottom:auto}
  .welcome-actions .welcome-details{justify-content:center}.welcome-actions .arena-account-links{justify-content:center}
  .arena-app[data-mode=welcome] .bottom-bar{top:480px;bottom:auto;justify-content:center}
}
@media(max-height:560px) and (orientation:landscape){.arena-app[data-mode=welcome]{min-height:760px}.welcome .welcome-actions{padding-bottom:24px}.welcome .arena-account-links{gap:4px 12px}}
@media(max-width:900px){.account-header{padding:18px 20px}.account-header .wordmark{font-size:32px}.account-back{font-size:12px}.account-shell{display:block;padding:0 20px;margin:12px auto 24px;max-width:520px}.account-intro{padding:0 4px 20px}.account-intro h1,.account-motif,.account-intro>.account-small{display:none}.account-intro p{font-size:14px;margin:8px 0}.account-card{padding:24px;border-radius:18px}.account-card h2{font-size:29px}.account-footer{padding:20px}}
@media(max-width:360px){.account-header{padding:12px 16px;gap:8px}.account-shell{padding:0 12px}.account-card{padding:20px}.account-intro .eyebrow{font-size:9px}.account-header .wordmark{font-size:29px}}