:root{
  --gold:#d6a83d;
  --gold-light:#f4dda0;
  --panel:#170f09;
  --panel-2:#2a180d;
  --line:#8d6423;
  --text:#f4e4bd;
  --muted:#c9b990;
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    linear-gradient(rgba(4,3,2,.72),rgba(4,3,2,.86)),
    url("Main Menu.png") center/cover fixed;
  font-family:Georgia,"Times New Roman",serif;
}
button{font:inherit}
[hidden]{display:none!important}

.onboarding-shell{min-height:100vh;padding:18px 24px 60px}
.onboarding-header{
  width:min(1500px,100%);margin:0 auto 24px;padding:8px 0;
  display:flex;align-items:center;justify-content:space-between;
}
.onboarding-header img{width:145px;max-height:58px;object-fit:contain}

.onboarding-stage{width:min(1500px,100%);margin:0 auto}
.onboarding-panel{
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(145deg,rgba(44,25,13,.97),rgba(11,8,6,.98));
  box-shadow:0 20px 60px rgba(0,0,0,.55);padding:28px;
}
.compact-panel{width:min(720px,100%);margin:8vh auto 0;text-align:center}
.eyebrow{margin:0 0 8px;color:#e1b94f;font-weight:900;letter-spacing:.16em;text-transform:uppercase;font-size:13px}
h1{margin:0;color:#f8e6b8;font-size:clamp(38px,6vw,72px);line-height:1}
.lead{color:var(--muted);font-size:18px;line-height:1.55}
.choice-heading{text-align:center;margin-bottom:24px}
.choice-heading .lead{max-width:900px;margin:15px auto}

.primary-button,.secondary-button,.ghost-button{
  border:1px solid #a97927;border-radius:7px;padding:12px 18px;
  color:#f8e6b8;background:linear-gradient(#5a3216,#24150c);
  font-weight:900;cursor:pointer;box-shadow:inset 0 1px rgba(255,232,171,.12);
}
.primary-button{color:#261402;background:linear-gradient(#f2cb61,#a76d16)}
button:disabled{opacity:.55;cursor:not-allowed}

.download-status{display:grid;gap:10px;margin:24px 0}
.progress-track{height:14px;border:1px solid #674719;border-radius:999px;background:#090705;overflow:hidden}
.progress-track span{display:block;width:0;height:100%;background:linear-gradient(90deg,#96611a,#f0c75b);transition:width .2s}
.message{max-width:900px;margin:18px auto;padding:12px;border:1px solid #87601f;border-radius:8px;background:rgba(20,12,6,.88)}
.error-message{color:#ffc5b7;border-color:#9d3a29}
.error-message pre{white-space:pre-wrap;text-align:left}

.starter-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.starter-choice-card{
  display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(160deg,rgba(36,21,12,.98),rgba(8,6,5,.98));
  box-shadow:0 16px 40px rgba(0,0,0,.48);
}
.starter-choice-card img{display:block;width:100%;aspect-ratio:2/2.85;object-fit:contain;background:#070604;padding:8px}
.starter-choice-copy{display:flex;flex-direction:column;flex:1;padding:20px}
.starter-choice-copy h2{margin:0;color:#f4daa0;font-size:32px}
.starter-choice-copy p{color:#cdbb95;line-height:1.5;flex:1}
.starter-choice-copy .commander{margin:8px 0 16px;color:#e9c36b;font-weight:900}

.reveal-panel{padding:26px}
.reveal-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}
.reveal-heading h1{font-size:clamp(36px,5vw,62px)}
.commander-banner{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:84px;margin-bottom:20px;padding:10px 14px;border:1px solid rgba(230,183,74,.52);
  border-radius:10px;background:linear-gradient(135deg,rgba(54,30,13,.98),rgba(11,8,6,.98));
}
.commander-banner div{display:grid;gap:4px}
.commander-banner span,.commander-banner small{color:#c9aa69;text-transform:uppercase;letter-spacing:.12em;font-size:12px}
.commander-banner strong{color:#ffe4a1;font-size:30px}
.commander-banner img{width:56px;height:78px;object-fit:cover;border:2px solid #d8ab42;border-radius:6px}

.starter-reveal-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,118px));
  justify-content:center;gap:13px;perspective:1000px;
}
.starter-reveal-card{
  position:relative;width:100%;max-width:118px;aspect-ratio:2.5/3.5;
  padding:0;border:0;background:transparent;cursor:pointer;perspective:900px;
}
.starter-card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.75,.2,1)}
.starter-reveal-card.revealed .starter-card-inner{transform:rotateY(180deg)}
.starter-card-face{position:absolute;inset:0;overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:7px;backface-visibility:hidden;box-shadow:0 8px 20px rgba(0,0,0,.52)}
.starter-card-front{transform:rotateY(180deg)}
.starter-card-face img{display:block;width:100%;height:100%;object-fit:cover}
.starter-reveal-card.is-commander .starter-card-face{border-color:#f4cc5f;box-shadow:0 0 24px rgba(244,190,54,.65)}
.reveal-result{margin:22px auto 0;max-width:800px;padding:16px;text-align:center;border:1px solid #98702c;border-radius:9px;background:rgba(8,6,4,.75)}
.reveal-result span{display:block;margin-top:5px}
.reveal-actions{display:flex;justify-content:center;margin-top:20px}

@media(max-width:980px){.starter-choice-grid{grid-template-columns:1fr}.starter-choice-card{display:grid;grid-template-columns:minmax(220px,38%) 1fr}.starter-choice-card img{height:100%;aspect-ratio:auto}}
@media(max-width:650px){.onboarding-shell{padding:10px}.starter-choice-card{display:flex}.reveal-heading{flex-direction:column}.starter-reveal-grid{grid-template-columns:repeat(auto-fit,minmax(76px,95px));gap:8px}}