﻿.account-page {
  background: #101713;
  color: #edf2e8;
  font-family: Arial, sans-serif;
  min-height: 100vh;
}
.account-main {
  max-width: 960px;
  margin: auto;
  padding: 40px 24px 80px;
}
.account-title {
  font-family: Arial, sans-serif;
  font-size: clamp(44px, 8vw, 76px);
  letter-spacing: -2px;
  line-height: 1.05;
}
.account-title em {
  color: #b4f96b;
  font-style: normal;
}
.account-intro p, .account-panel p {
  line-height: 1.7;
}
.account-panel {
  padding: 24px;
  background: #18231d;
  border: 1px solid #536747;
  border-radius: 14px;
  margin: 22px 0;
}
.account-panel h2 {
  font-size: 27px;
}
.account-help {
  font-size: 13px;
  color: #b7c5ae;
}
.account-panel input[type="text"],
#playerName {
  display: block;
  width: min(100%, 400px);
  margin: 10px 0;
  padding: 14px;
  color: #edf2e8;
  background: #0e1711;
  border: 1px solid #65795a;
  border-radius: 6px;
  font: 16px Arial;
}
.account-panel fieldset {
  border: 0;
  padding: 14px 0;
}
.avatar-choices {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.avatar-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.avatar-choice img {
  width: 74px;
  height: 100px;
  object-fit: cover;
  object-position: top;
  border-radius: 8px;
  border: 2px solid transparent;
}
.avatar-choice:has(input:checked) img {
  border-color: #b4f96b;
  box-shadow: 0 0 15px #b4f96b44;
}
.avatar-choice input {
  width: 20px;
  height: 20px;
  accent-color: #b4f96b;
}
.history-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid #526044;
  padding: 16px 0;
}
.history-row strong {
  color: #b4f96b;
}
.account-page [hidden] {
  display: none !important;
}
#accountNotice {
  min-height: 28px;
  color: #d3efb3;
}
#recordStats {
  font-size: 22px;
  font-weight: bold;
}
#signIn {
  margin: 28px 0;
}
.account-page .game-header {
  flex-wrap: wrap;
  height: auto;
  min-height: 72px;
  padding-block: 14px;
}
.account-main > a {
  display: inline-block;
  margin: 20px 0;
}
.account-panel .btn {
  min-height: 48px;
}
@media (max-width: 760px) {
  .account-page .game-header nav > a:first-child {
    display: block;
  }
  .account-main {
    padding: 28px 16px 60px;
  }
  .account-panel {
    padding: 18px;
  }
  .account-page .game-header {
    gap: 16px;
  }
  .account-page .game-header nav {
    gap: 12px;
  }
  .account-title {
    letter-spacing: -1px;
  }
  .avatar-choices {
    gap: 10px;
  }
  .avatar-choice img {
    width: 66px;
    height: 90px;
  }
}

/* Account typography stays out of Clerk's embedded forms. */
.account-main{max-width:1200px;padding:44px 40px 72px}
.account-entry{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);gap:70px;align-items:center;min-height:calc(100svh - 180px)}
.account-intro{position:relative;padding:20px 0}
.account-title{font-size:clamp(56px,5.2vw,76px);margin:20px 0 24px;letter-spacing:-4px;line-height:.98}
.account-description{font-size:24px;line-height:1.35!important;color:#f0f1df;margin:0 0 16px}
.account-intro-copy{max-width:360px;font-size:15px;color:#9bac9f}
.account-art{height:250px;position:relative;max-width:400px;margin-top:24px;background:radial-gradient(ellipse at center,#75c05f20,transparent 68%)}
.account-art img{position:absolute;height:216px;width:auto;border-radius:10px;filter:drop-shadow(0 10px 18px #0008)}
.account-card-back{left:52px;top:12px;transform:rotate(-15deg)}
.account-card-front{left:157px;top:0;transform:rotate(11deg)}
.account-art-caption{position:absolute;bottom:0;left:50px;font:10px monospace;letter-spacing:3px;color:#9baf92}
.account-auth{min-width:0;background:linear-gradient(140deg,#202c23,#141d17);border:1px solid #3b4e3e;border-radius:20px;padding:30px 28px 24px;box-shadow:0 22px 65px #0004}
.auth-eyebrow{font-size:10px;letter-spacing:2px;color:#b4f96b;margin:0}
#accountNotice{font-size:13px;line-height:1.5;min-height:20px;color:#a6b6a7;margin:12px 0 18px}
#signIn{margin:0;min-height:280px}
#signIn .cl-rootBox,#signIn .cl-cardBox{width:100%;max-width:100%;box-shadow:none}
#signIn .cl-card{background:transparent;border:0;box-shadow:none;padding:12px 0 24px;gap:22px}
#signIn .cl-headerTitle{font:700 26px/1.2 Arial,sans-serif;letter-spacing:-.5px;text-transform:none;color:#f1f3e9}
#signIn .cl-headerSubtitle{font:14px/1.5 Arial,sans-serif;color:#a6b6a7}
#signIn .cl-socialButtonsBlockButton{min-height:44px}
#signIn .cl-footer{background:#101a13;border-radius:10px}
.account-guest-link{display:block;text-align:center;font-size:13px;margin-top:22px;color:#b0c3a7;text-decoration:underline;text-underline-offset:4px}
.account-bottom-link{display:none!important}
.account-page[data-auth="signed-in"] .account-entry{min-height:0;grid-template-columns:1fr auto;gap:32px;align-items:end;margin-bottom:28px}
.account-page[data-auth="signed-in"] .account-art,.account-page[data-auth="signed-in"] .account-description,.account-page[data-auth="signed-in"] .account-intro-copy,.account-page[data-auth="signed-in"] .auth-eyebrow,.account-page[data-auth="signed-in"] .account-guest-link,.account-page[data-auth="signed-in"] #signIn{display:none}
.account-page[data-auth="signed-in"] .account-title{font-size:48px;margin-bottom:0;letter-spacing:-2px}
.account-page[data-auth="signed-in"] .account-title br{display:none}
.account-page[data-auth="signed-in"] .account-auth{border:0;background:none;box-shadow:none;padding:0;max-width:320px}
.account-page[data-auth="signed-in"] .account-bottom-link{display:inline-block!important}
#playerProfile{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px;align-items:start}
#playerProfile>.account-panel{margin:0;min-width:0}
#playerProfile>.account-panel:first-child{grid-row:span 3}
#playerProfile .account-panel h2{font-family:Arial,sans-serif;letter-spacing:-.5px;text-transform:none;font-size:24px;margin:0 0 18px}
.leaderboard-heading{max-width:650px;margin:30px 0 40px}
.leaderboard-heading .account-title{font-size:clamp(46px,6vw,76px)}
.leaderboard-heading>p:last-child{color:#a6b6a7;line-height:1.7}
@media(max-width:850px){
 .account-main{padding:28px 20px 48px}.account-entry{gap:32px;grid-template-columns:minmax(0,1fr) minmax(320px,1fr)}
 .account-title{font-size:60px;letter-spacing:-2px}.account-art img{height:175px}.account-card-back{left:5px}.account-card-front{left:90px}.account-art-caption{left:0;font-size:9px;letter-spacing:2px}
 #playerProfile{grid-template-columns:1fr}#playerProfile>.account-panel:first-child{grid-row:auto}
}
@media(max-width:680px){
 .account-entry{display:block;min-height:0}.account-intro{padding:4px 0 20px}.account-title{font-size:50px;margin:16px 0}.account-title br{display:none}.account-title em{white-space:nowrap}
 .account-description{font-size:19px}.account-description br{display:none}.account-art,.account-intro-copy{display:none}
 .account-auth{padding:24px 20px;border-radius:14px}.account-page[data-auth="signed-in"] .account-entry{display:block}.account-page[data-auth="signed-in"] .account-title{font-size:38px}
 .account-page .game-header nav{flex-wrap:wrap}.account-page .game-header nav a{font-size:12px}
}

#signIn.cl-rootBox{width:100%;max-width:100%}
@media(max-width:680px){.account-title{font-size:44px}.account-title br{display:initial}.account-page[data-auth="signed-in"] .account-title br{display:none}}

#playerProfile>.account-panel:first-child{grid-row:auto}
.account-sidebar{display:grid;gap:22px;min-width:0;align-content:start}.account-sidebar>.account-panel{margin:0}
.purchase-history-row{border-bottom:1px solid #39453b;padding:18px 0}.purchase-history-row:first-child{padding-top:0}.purchase-history-row strong,.purchase-history-row small{display:block;margin-bottom:10px}.purchase-history-row small{font-size:12px;line-height:1.6;color:#aab5a0}.purchase-history-row p{font-size:12px}.purchase-history-row p:empty{display:none}#purchaseRecords>.btn{margin-top:16px}
.purchase-order-state{display:inline-block;font:11px monospace;color:#bdc9ad;border:1px solid #586348;padding:5px 8px;margin:0 0 12px}.purchase-order-state.is-complete{color:#c1ff62;border-color:#65813f}.purchase-order-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.purchase-order-actions .btn{font-size:10px;white-space:normal}.purchase-history-row details{font-size:12px;color:#aab5a0;overflow-wrap:anywhere}.purchase-history-row summary{cursor:pointer}
