/* Persistent player progression, using the same slate and warm metal as the arena. */
.account-page { max-width:1040px; margin:0 auto; padding:8px 0 25px; color:#edf0f3; }
.account-heading { margin:0 0 27px; }
.account-heading h1 { font:400 clamp(32px,4vw,46px)/1.12 Georgia,serif; letter-spacing:-1px; margin:12px 0; overflow-wrap:anywhere; }
.account-heading>p { font-size:13px; line-height:1.6; color:#b8c6d9; max-width:620px; }
.account-panel { padding:26px; border:1px solid #53668080; border-top-color:#94a5bc80; border-radius:10px; background:linear-gradient(145deg,#223048,#172232 78%); box-shadow:0 14px 32px #050b1729; min-width:0; }
.account-panel h2 { font:400 25px/1.2 Georgia,serif; margin:0 0 13px; }
.account-panel p { font-size:13px; line-height:1.65; color:#b8c7da; }
.account-page .button { min-height:48px; gap:9px; font-size:12px; text-transform:none; letter-spacing:.2px; }
.account-page .text-button { min-height:44px; padding:9px 4px; font-size:12px; }
.account-page .button:disabled { opacity:.5; cursor:not-allowed; }
.account-error { border:1px solid #d99d7870; border-radius:7px; background:#37272c; color:#f3d0b9; padding:14px 16px; margin-bottom:18px; font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.account-status { padding:28px 0; color:#c3d2e6; font-size:14px; }
.account-auth-page { max-width:500px; }
.account-auth-panel { padding:24px; }
.account-auth-tabs { display:grid; grid-template-columns:1fr 1fr; padding:4px; gap:4px; border:1px solid #71839d40; border-radius:8px; background:#0b16268c; margin-bottom:23px; }
.account-auth-tabs>button { min-height:44px; border-radius:5px; background:transparent; color:#bdcce0; font-size:13px; }
.account-auth-tabs>button.active { background:#354762; color:#f2d6a8; box-shadow:inset 0 0 0 1px #c5ab734d; }
.account-auth-panel form { display:grid; gap:20px; }
.account-auth-panel label { display:block; color:#d8e0eb; font-size:12px; font-weight:550; }
.account-auth-panel input { display:block; width:100%; min-height:48px; margin-top:8px; padding:11px 13px; background:#0f1c2ee6; color:#f3eee7; border:1px solid #7488a56b; border-radius:6px; font:400 16px/1.4 system-ui,sans-serif; }
.account-auth-panel input::placeholder { color:#95a6be; }
.account-auth-panel input:focus { outline:2px solid #dab77d; outline-offset:2px; border-color:#dfc08f; }
.account-auth-panel label>small { display:block; color:#a9bad0; font-size:11px; font-weight:400; line-height:1.5; margin-top:6px; }
.account-auth-panel form>.button { width:100%; margin-top:2px; }
.account-reset { display:flex; justify-content:center; width:100%; margin-top:11px; }
.account-auth-panel .account-auth-note { font-size:11px; color:#b6c6da; line-height:1.6; margin-top:17px; }
.account-starter-note { display:flex; align-items:center; gap:13px; padding:18px 5px 0; color:#d2dceb; }
.account-starter-note>.icon { width:25px; height:25px; color:#d6b781; flex:none; }
.account-starter-note strong { font-size:12px; font-weight:550; display:block; }
.account-starter-note small { display:block; color:#a9bdd5; font-size:11px; line-height:1.5; margin-top:5px; }
.account-recovery { margin-bottom:24px; padding:24px; border:1px solid #d8b274; border-radius:9px; background:linear-gradient(125deg,#393326,#232b37); }
.account-recovery h2 { font:400 25px/1.2 Georgia,serif; color:#f2deba; margin:12px 0; }
.account-recovery p { color:#d3cfc5; font-size:13px; line-height:1.6; }
.account-recovery-code { display:block; padding:17px 14px; margin:18px 0; border:1px solid #d6b97a55; border-radius:5px; background:#111a29; color:#f8dfa9; font:600 16px/1.65 ui-monospace,SFMono-Regular,monospace; overflow-wrap:anywhere; user-select:all; }
.account-recovery>.button { margin:0 8px 7px 0; }
.account-profile-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:20px; }
.account-rank-badge { display:flex; align-items:center; gap:14px; color:#eed1a1; }
.account-rank-badge>.icon { width:43px; height:48px; stroke-width:1.25; }
.account-rank-badge>span { flex:1; min-width:0; }
.account-rank-badge small { display:block; font-size:9px; letter-spacing:1px; color:#b6c6db; }
.account-rank-badge strong { display:block; font:400 27px/1.3 Georgia,serif; margin-top:4px; text-transform:capitalize; }
.account-rank-badge>b { font-size:29px; line-height:1; font-variant-numeric:tabular-nums; }
.account-rank-badge>b>small { text-align:right; margin-top:6px; font-size:8px; }
.account-wallet { display:flex; flex-wrap:wrap; gap:10px; margin:21px 0; }
.account-wallet>span { display:flex; align-items:center; gap:7px; padding:10px 12px; border:1px solid #b4c5d938; border-radius:6px; background:#132236; color:#becde0; font-size:12px; }
.account-wallet>span>.icon { width:18px; height:18px; color:#e0bc7d; }
.account-wallet b { font-size:18px; color:#f1d49e; font-variant-numeric:tabular-nums; }
.account-profile-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:21px 0; margin:0; border-top:1px solid #7487a237; border-bottom:1px solid #7487a237; }
.account-profile-stats dt { font-size:11px; line-height:1.4; color:#b2c4db; }
.account-profile-stats dd { margin:8px 0 0; font-size:26px; color:#e5eaf1; line-height:1.1; font-variant-numeric:tabular-nums; }
.account-profile-stats dd small { font-size:11px; color:#9eb5d0; margin-left:3px; }
.account-record { display:flex; flex-wrap:wrap; justify-content:space-between; gap:9px; margin-top:16px; color:#a8bcd6; font-size:11px; line-height:1.5; }
.account-profile-actions { display:flex; flex-direction:column; gap:10px; }
.account-profile-actions h2 { margin:2px 0 12px; }
.account-profile-actions>.button { width:100%; }
.account-profile-actions .account-logout { align-self:center; margin-top:4px; }
.account-gate { max-width:580px; margin:15px auto; text-align:center; padding:34px; }
.account-gate p { max-width:360px; margin:0 auto 22px; }
.account-sigil { display:block; color:#e3c08a; margin-bottom:19px; }
.account-sigil>.icon { width:48px; height:48px; }
.account-details { border-top:1px solid #7185a333; margin-top:19px; padding-top:4px; }
.account-details>summary { display:flex; align-items:center; justify-content:space-between; min-height:46px; gap:12px; list-style:none; font-size:12px; color:#c6d7ec; cursor:pointer; }
.account-details>summary::-webkit-details-marker { display:none; }
.account-details>summary>.icon { width:14px; height:14px; transform:rotate(90deg); flex:none; }
.account-details[open]>summary>.icon { transform:rotate(-90deg); }
.account-details p { font-size:12px; margin:0 0 12px; line-height:1.65; }
.pack-store-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:20px; }
.pack-offer { display:flex; align-items:center; gap:25px; }
.pack-object { display:flex; flex-direction:column; align-items:center; justify-content:center; width:118px; height:163px; flex:none; position:relative; border:1px solid #d2b782; border-radius:8px; color:#efdaad; background:repeating-linear-gradient(130deg,#d9be7f08 0 1px,transparent 1px 9px),linear-gradient(135deg,#38425a,#152538); box-shadow:3px 4px 0 #070e1b,7px 8px 0 #7b745329,0 18px 28px #0007; transform:perspective(650px) rotateY(-10deg) rotate(-4deg); }
.pack-object::before { content:''; position:absolute; inset:8px; border:1px solid #d5bb793f; border-radius:4px; }
.pack-object>span { font:400 46px/1 Georgia,serif; margin-bottom:9px; }
.pack-object>small { font-size:9px; font-weight:600; letter-spacing:3px; }
.pack-object>i { position:absolute; bottom:15px; font-size:12px; font-style:normal; }
.pack-offer-copy { flex:1; min-width:0; }
.pack-offer-copy>.eyebrow { font-size:9px; letter-spacing:1px; }
.pack-offer-copy h2 { margin:12px 0 8px; }
.pack-offer-copy p { font-size:12px; }
.pack-offer-copy>.button { margin-top:19px; width:100%; }
.pack-price-note { display:block; font-size:11px; color:#b5c8de; line-height:1.5; margin-top:10px; }
.pack-collection>strong { display:block; font-size:49px; line-height:1; font-weight:600; color:#e7d4af; margin:18px 0; }
.pack-collection>strong>small { font-size:23px; color:#91a9c4; }
.account-collection-track { height:5px; background:#0b1729; border-radius:4px; overflow:hidden; margin-bottom:17px; }
.account-collection-track>i { display:block; height:100%; background:linear-gradient(90deg,#adbbd0,#ead3a5); }
.pack-collection p { font-size:12px; }
.pack-reveal { margin:26px 0 28px; padding-bottom:22px; border-bottom:1px solid #9caec331; }
.pack-result-heading { text-align:center; margin-bottom:21px; }
.pack-result-heading h2 { font:400 27px/1.2 Georgia,serif; color:#f2ddb6; margin-top:9px; }
.pack-reveal-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; max-width:760px; margin:0 auto; perspective:1000px; }
.pack-result-card { display:flex; flex-direction:column; padding:0; background:#182538; color:#edf1f6; border:1px solid var(--race-color,#8fabc8); border-top:3px solid var(--race-color,#8fabc8); border-radius:9px; text-align:left; overflow:hidden; min-width:0; box-shadow:0 4px 0 #0a1423,0 10px 24px #0006; }
.pack-result-art { display:block; position:relative; height:205px; width:100%; overflow:hidden; }
.pack-result-art::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#182538,transparent 48%); pointer-events:none; }
.pack-card-type { position:absolute; top:8px; left:7px; z-index:1; }
.pack-card-type .race-badge { font-size:9px; padding:3px 5px; }
.pack-card-stars { position:absolute; top:40px; left:7px; z-index:1; }
.pack-result-body { display:flex; flex:1; flex-direction:column; padding:5px 14px 15px; }
.pack-result-body>small { font-size:8px; color:#a2b9d2; letter-spacing:1px; }
.pack-result-body>strong { display:block; font:400 22px/1.12 Georgia,serif; margin:7px 0 12px; color:#f1e7d7; overflow-wrap:anywhere; }
.pack-card-stats { display:flex; gap:16px; margin:0 0 11px; }
.pack-card-stats>span { display:flex; align-items:center; gap:5px; font-size:18px; font-weight:600; }
.pack-card-stats .icon { width:15px; height:15px; }
.pack-card-keywords { margin-top:auto; }
.pack-card-keywords .keyword { font-size:10px; }
.pack-reveal>.text-button { display:flex; margin:15px auto 0; }
.pack-reveal-cards.is-revealing>.pack-result-card { animation:pack-card-reveal 520ms cubic-bezier(.18,.75,.25,1) both; animation-delay:calc(var(--pack-index) * 140ms); }
@keyframes pack-card-reveal { from { opacity:0; transform:translateY(18px) rotateY(-24deg) scale(.96); } to { opacity:1; transform:translateY(0) rotateY(0) scale(1); } }
.ranked-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:21px; }
.ranked-current { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:350px; }
.ranked-current>h2 { max-width:360px; margin:12px 0; font-size:29px; }
.ranked-current>p { max-width:365px; margin:0 0 16px; }
.ranked-current>.button { min-width:220px; margin-top:13px; }
.ranked-search-symbol { display:grid; place-items:center; width:62px; height:62px; border:1px solid #b39a6b61; border-radius:50%; background:#dac18d0d; color:#dec596; margin:0 0 10px; }
.ranked-search-symbol .icon { width:28px; height:28px; }
.ranked-active-deck { display:flex; align-items:center; gap:10px; width:100%; max-width:365px; padding:10px 0; margin:3px 0 6px; border-top:1px solid #728bad3d; border-bottom:1px solid #728bad3d; text-align:left; }
.ranked-active-deck>.icon { width:21px; height:21px; color:#afc4df; flex:none; }
.ranked-active-deck>span { flex:1; min-width:0; }
.ranked-active-deck small { display:block; font-size:8px; color:#9fb3cc; letter-spacing:1px; }
.ranked-active-deck strong { display:block; font-size:13px; margin-top:5px; overflow-wrap:anywhere; }
.ranked-active-deck>.text-button { flex:none; }
.ranked-points { display:flex; align-items:baseline; gap:10px; margin:23px 0 7px; }
.ranked-points strong { font-size:54px; line-height:1; color:#f0dcba; font-weight:600; font-variant-numeric:tabular-nums; }
.ranked-points span { font-size:12px; color:#a9bdd8; }
.ranked-progress .ranked-next-tier { font-size:11px; margin-bottom:23px; }
.ranked-rewards { display:grid; gap:11px; margin-top:20px; }
.ranked-rewards>span { display:flex; align-items:center; gap:6px; color:#bed1e9; font-size:11px; }
.ranked-rewards .icon { width:16px; height:16px; margin-right:3px; color:#e4c28f; }
.ranked-rewards b { color:#f0d6ab; font-size:13px; }
.ranked-queue-status { display:flex; gap:8px; align-items:center; color:#d8c296; font-size:12px; padding:11px 16px; border:1px solid #b8a57838; border-radius:30px; margin:4px 0 7px; }
.ranked-queue-status .icon { width:16px; height:16px; }
.ranked-rival { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; text-align:left; padding-bottom:17px; border-bottom:1px solid #9eaec235; width:100%; }
.ranked-rival-emblem { color:#d9bf91; }
.ranked-rival-emblem .icon { width:32px; height:32px; }
.ranked-rival>span:nth-child(2) { flex:1; min-width:100px; }
.ranked-rival small { display:block; font-size:8px; color:#a9bbd3; letter-spacing:1px; }
.ranked-rival strong { display:block; font-size:15px; margin-top:5px; overflow-wrap:anywhere; }
.ranked-bot-badge { padding:6px 8px; background:#483e2666; border:1px solid #c2a47266; color:#e4cb9d; border-radius:4px; font-size:9px; letter-spacing:.2px; }
.ranked-settlement { display:flex; flex-wrap:wrap; justify-content:center; gap:13px; padding:13px 0; color:#e9d2ae; font-size:13px; }
.ranked-settlement>span { display:flex; align-items:center; gap:6px; }
.ranked-settlement .icon { width:17px; height:17px; }
.ranked-settlement small { width:100%; color:#adbed4; font-size:11px; }
.ranked-tiers { display:grid; gap:7px; margin-bottom:8px; }
.ranked-tiers>span { display:flex; justify-content:space-between; color:#adc2da; font-size:11px; }
.ranked-tiers b { color:#e2caa4; font-weight:500; }
.leaderboard-panel { margin-top:22px; }
.leaderboard-panel>header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.leaderboard-panel h2 { margin:8px 0 0; }
.leaderboard-panel>header .text-button { display:flex; align-items:center; gap:6px; flex:none; }
.leaderboard-panel>header .icon { width:15px; height:15px; }
.rank-table,.rank-reward-table { width:100%; border-collapse:collapse; text-align:left; font-variant-numeric:tabular-nums; }
.rank-table caption { text-align:left; color:#9bafc8; font-size:11px; padding:0 0 15px; }
.rank-table thead th { color:#99b0cc; font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.6px; padding:11px 8px; border-bottom:1px solid #7d93b43b; }
.rank-table td,.rank-table tbody th { padding:14px 8px; border-bottom:1px solid #7d93b421; }
.rank-table tbody th { font-weight:500; min-width:0; }
.rank-table tbody th strong { font-size:13px; overflow-wrap:anywhere; }
.rank-table tbody th small { display:block; font-size:10px; color:#9fb5d0; margin-top:4px; }
.rank-position { font-size:14px; color:#8ca8cb; }
.rank-position.podium { color:#efd298; }
.rank-table-points { font-weight:650; color:#f0d2a0; font-size:16px; }
.rank-table-record { white-space:nowrap; font-size:12px; color:#c1d3e9; }
.rank-table-record>span { display:inline-flex; gap:3px; margin-right:12px; }
.rank-table-record small { font-size:9px; color:#7f9dbf; }
.rank-table tr.is-you { background:#bfa27212; outline:1px solid #c9ad6f32; outline-offset:-1px; }
.rank-table-own { border-top:3px solid #bcac875e; }
.leaderboard-empty { padding:25px 5px; color:#acbed5; font-size:13px; line-height:1.5; }
.leaderboard-panel .leaderboard-note { font-size:10px; margin:15px 0 0; }
.rank-reward-table { margin:20px 0 0; font-size:12px; }
.rank-reward-table caption { text-align:left; font-size:10px; color:#a5b9d0; margin-bottom:10px; }
.rank-reward-table th,.rank-reward-table td { padding:9px 3px; border-bottom:1px solid #8ba5c324; }
.rank-reward-table th { font-weight:450; }
.rank-reward-table thead { color:#96aeca; font-size:10px; }
.rank-reward-table td { color:#ead0a5; }
@media (max-width:700px) {
 .leaderboard-panel { padding:18px 11px; }
 .leaderboard-panel h2 { font-size:23px; }
 .leaderboard-panel .eyebrow { font-size:8px; letter-spacing:1px; }
 .leaderboard-panel>header .text-button { font-size:10px; }
 .rank-table { table-layout:fixed; }
 .rank-table th:first-child { width:30px; }
 .rank-table th:nth-child(3) { width:58px; }
 .rank-table th:last-child { width:76px; }
 .rank-table thead th { padding:10px 4px; font-size:9px; letter-spacing:0; }
 .rank-table td,.rank-table tbody th { padding:12px 4px; }
 .rank-table tbody th strong { font-size:12px; }
 .rank-table-points { font-size:14px; }
 .rank-table-record { font-size:11px; }
 .rank-table-record>span { margin-right:0; gap:0; }
 .rank-table-record>span+span::before { content:'/'; margin:0 3px; color:#748da9; }
 .rank-table-record small { display:none; }
}
@media (max-width:700px) {
  .account-page { padding-top:0; }
  .account-heading { margin-bottom:21px; }
  .account-heading h1 { font-size:32px; margin:10px 0; letter-spacing:-.7px; }
  .account-heading>p { font-size:12px; }
  .account-panel { padding:20px 18px; border-radius:8px; }
  .account-panel h2 { font-size:24px; }
  .account-auth-panel { padding:20px; }
  .account-auth-panel form { gap:17px; }
  .account-auth-tabs { margin-bottom:19px; }
  .account-auth-panel input { min-height:50px; font-size:16px; }
  .account-profile-grid, .pack-store-layout, .ranked-layout { grid-template-columns:1fr; gap:16px; }
  .account-profile-actions { gap:10px; }
  .account-wallet { gap:8px; margin:18px 0; }
  .account-wallet>span { padding:9px 10px; font-size:11px; }
  .account-recovery { padding:20px 17px; }
  .account-recovery-code { font-size:15px; }
  .account-recovery>.button { width:100%; margin:0 0 9px; }
  .account-gate { padding:28px 20px; }
  .account-gate>.button { width:100%; }
  .account-profile-stats { gap:9px; }
  .account-profile-stats dd { font-size:24px; }
  .pack-offer { gap:18px; padding:22px 18px; }
  .pack-object { width:83px; height:124px; }
  .pack-object>span { font-size:35px; }
  .pack-object>small { font-size:7px; letter-spacing:2px; }
  .pack-object>i { bottom:11px; font-size:10px; }
  .pack-offer-copy>.eyebrow { font-size:8px; letter-spacing:.6px; }
  .pack-offer-copy h2 { font-size:23px; margin:9px 0; }
  .pack-offer-copy p { font-size:11px; }
  .pack-offer-copy>.button { padding:11px 9px; font-size:11px; line-height:1.35; margin-top:14px; }
  .pack-price-note { font-size:10px; }
  .pack-collection>strong { font-size:40px; margin:14px 0; }
  .pack-reveal { margin:20px 0; }
  .pack-result-heading { margin-bottom:17px; }
  .pack-reveal-cards { gap:9px; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pack-result-art { height:128px; }
  .pack-card-type { top:5px; left:4px; }
  .pack-card-type .race-badge { font-size:0; padding:3px; }
  .pack-card-type .race-emblem { width:12px; height:12px; }
  .pack-card-type .race-badge>span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .pack-card-stars { left:4px; top:31px; }
  .pack-card-stars .star-pips { padding:3px; gap:1px; }
  .pack-card-stars .symbol-star { width:8px; height:8px; }
  .pack-result-body { padding:3px 7px 10px; }
  .pack-result-body>small { font-size:6px; letter-spacing:.4px; }
  .pack-result-body>strong { font-size:16px; line-height:1.15; margin:6px 0 9px; }
  .pack-card-stats { gap:10px; margin-bottom:8px; }
  .pack-card-stats>span { font-size:15px; gap:3px; }
  .pack-card-stats .icon { width:11px; height:11px; }
  .pack-card-keywords .keyword { padding:3px; font-size:9px; line-height:1.35; gap:3px; }
  .pack-card-keywords .keyword>.icon { width:10px; height:10px; flex-basis:10px; }
  .ranked-current { min-height:0; padding:25px 21px; }
  .ranked-current>h2 { font-size:26px; }
  .ranked-current>p { font-size:12px; }
  .ranked-current>.button { width:100%; margin-top:12px; }
  .ranked-search-symbol { width:51px; height:51px; margin-bottom:8px; }
  .ranked-search-symbol .icon { width:25px; height:25px; }
  .ranked-points { margin-top:18px; }
  .ranked-points strong { font-size:46px; }
  .ranked-progress .ranked-next-tier { margin-bottom:19px; }
  .ranked-rival { justify-content:flex-start; }
}
@media (max-width:365px) {
  .account-auth-panel { padding:17px 14px; }
  .pack-offer { gap:13px; padding:20px 15px; }
  .pack-object { width:69px; height:109px; }
  .pack-result-body>strong { font-size:14px; }
  .pack-reveal-cards { gap:6px; }
  .pack-card-keywords .keyword { font-size:8px; }
}
.reduced-motion .pack-reveal-cards.is-revealing>.pack-result-card { animation:none; }
@media (prefers-reduced-motion:reduce) { .pack-reveal-cards.is-revealing>.pack-result-card { animation:none; } }

.account-session { display:flex; align-items:flex-start; gap:10px; padding:16px 0; border-top:1px solid #c5a36e38; margin-top:8px; text-align:left; }
.account-session > .icon { width:21px; height:21px; flex:none; margin-top:2px; }
.account-session strong { display:block; font-size:14px; line-height:1.5; color:#eed7ac; }
.account-session p { margin:6px 0 0; color:#b9b9b1; font-size:12px; line-height:1.6; }
.settings-account { margin-top:22px; padding-top:16px; border-top:1px solid #c5a36e38; }
.settings-account h3 { display:flex; align-items:center; gap:8px; margin:0; }
.settings-account .button { width:100%; min-height:44px; }
