:root{
  --bg:#050505;
  --panel:rgba(10,10,12,.82);
  --gold:#ffc72c;
  --gold2:#f6a900;
  --text:#fff7d7;
  --muted:rgba(255,247,215,.68);
  --line:rgba(255,199,44,.25);
  --green:#39d98a;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{
  background:
    radial-gradient(circle at 80% 10%,rgba(255,199,44,.23),transparent 28%),
    radial-gradient(circle at 12% 88%,rgba(246,169,0,.13),transparent 30%),
    linear-gradient(180deg,#060606,#0a0906 58%,#020202);
}
a{color:inherit}

.ship{width:min(1440px,100%);margin:0 auto;padding:18px}

.hero,.card,.room{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.34));
  box-shadow:0 24px 90px rgba(0,0,0,.36);
  backdrop-filter:blur(16px);
}

.hero{border-radius:30px;padding:16px;min-height:640px;display:flex;flex-direction:column;gap:20px}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:14px}
.coin{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,#fff2a8,#ffc72c,#9d6400);
  color:#271500;font-size:36px;font-weight:1000;
  box-shadow:0 0 34px rgba(255,199,44,.5);
}
.brand-title{
  font-size:clamp(34px,5vw,76px);
  font-weight:1000;
  letter-spacing:-.05em;
  line-height:.86;
  background:linear-gradient(180deg,#fff8c9,#ffc72c,#b46d00);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.brand-sub{color:var(--gold);font-weight:900;letter-spacing:.18em;text-transform:uppercase;font-size:12px}
.wallet-pill{
  padding:10px 14px;border:1px solid var(--line);border-radius:999px;
  color:var(--gold);font-weight:900;background:rgba(255,199,44,.08);
  max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.deck{flex:1;display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:center}
.window{
  position:relative;height:470px;overflow:hidden;border-radius:28px;border:1px solid var(--line);
  background:
    radial-gradient(circle at 75% 34%,rgba(255,199,44,.34),transparent 18%),
    radial-gradient(circle at 30% 72%,rgba(255,255,255,.08),transparent 25%),
    linear-gradient(180deg,#080b16,#080808);
}
.stars:before,.stars:after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle,#ffc72c 1px,transparent 1px),
    radial-gradient(circle,#fff7d7 1px,transparent 1px);
  background-size:54px 54px,97px 97px;
  opacity:.45;
  animation:drift 18s linear infinite;
}
.stars:after{opacity:.25;animation-duration:29s}
.moon{
  position:absolute;right:70px;top:56px;width:150px;height:150px;border-radius:50%;
  display:grid;place-items:center;font-size:92px;font-weight:1000;color:#281700;
  background:linear-gradient(145deg,#fff6bc,#ffc72c,#9f6400);
  box-shadow:0 0 80px rgba(255,199,44,.58);
}
.city{position:absolute;right:28px;bottom:0;height:155px;display:flex;gap:10px;align-items:flex-end}
.city span{width:48px;background:linear-gradient(180deg,#3a3019,#080808);border:1px solid rgba(255,199,44,.32);border-radius:9px 9px 0 0}
.city span:nth-child(1){height:70px}.city span:nth-child(2){height:120px}.city span:nth-child(3){height:95px}.city span:nth-child(4){height:140px}.city span:nth-child(5){height:82px}
.route-line{
  position:absolute;left:92px;top:248px;width:540px;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:rotate(-16deg);
  box-shadow:0 0 22px rgba(255,199,44,.8);
}
.ship-icon{position:absolute;left:82px;top:236px;font-size:82px;animation:float 4s ease-in-out infinite}

.intro{padding:18px}
.kicker,.card-label{color:var(--gold);letter-spacing:.32em;text-transform:uppercase;font-size:12px;font-weight:1000}
.intro h1{font-size:clamp(46px,6vw,88px);line-height:.92;margin:10px 0;letter-spacing:-.06em}
.intro p{color:var(--muted);font-size:19px;line-height:1.55;max-width:640px}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.btn{
  text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:13px 17px;
  font-weight:1000;background:rgba(255,255,255,.06)
}
.btn.primary{background:linear-gradient(145deg,#fff2a8,#ffc72c,#a96800);color:#251500;border-color:#fff1a7;box-shadow:0 0 30px rgba(255,199,44,.35)}

.grid{display:grid;grid-template-columns:.85fr 1.1fr 1fr;gap:16px;margin-top:16px}
.card{border-radius:26px;padding:20px}
.card h2{margin:8px 0 12px;font-size:28px}
.avatar{width:96px;height:96px;border-radius:28px;display:grid;place-items:center;font-size:52px;background:rgba(255,199,44,.1);border:1px solid var(--line);margin-top:14px}
.passport p,.passport-note{color:var(--muted);line-height:1.45}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}
.stats div{border:1px solid rgba(255,199,44,.18);border-radius:16px;padding:10px;text-align:center;background:rgba(255,199,44,.05)}
.stats strong{display:block;font-size:24px;color:var(--gold)}
.stats span{display:block;font-size:12px;color:var(--muted)}

.missions{display:grid;gap:9px}
.mission-row{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid rgba(255,199,44,.14);border-radius:16px;background:rgba(255,255,255,.04)}
.mission-row span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,199,44,.1);color:var(--gold);font-weight:1000}
.mission-row.active{border-color:rgba(57,217,138,.45)}
.mission-row.active span{background:rgba(57,217,138,.18);color:var(--green)}
.mission-row small{display:block;color:var(--muted);margin-top:3px}

.asset-list{display:grid;gap:8px}
.asset-list div{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid rgba(255,199,44,.12);padding:8px 0}
.asset-list span{color:var(--muted);font-size:13px;text-align:right}

.rooms{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:16px}
.room{text-decoration:none;border-radius:22px;padding:16px;min-height:116px;transition:.18s transform,.18s border-color}
.room:hover{transform:translateY(-3px);border-color:rgba(255,199,44,.55)}
.room b{display:block;color:var(--gold);font-size:18px;margin-bottom:8px}
.room span{color:var(--muted);font-size:14px;line-height:1.35}

@keyframes drift{to{transform:translateY(90px)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-14deg)}50%{transform:translateY(-14px) rotate(-7deg)}}

@media(max-width:1050px){
  .deck,.grid{grid-template-columns:1fr}
  .rooms{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .ship{padding:10px}
  .hero{min-height:auto;border-radius:22px}
  .topbar{align-items:flex-start}
  .wallet-pill{display:none}
  .window{height:330px}
  .moon{width:105px;height:105px;font-size:62px;right:34px}
  .city span{width:28px}
  .route-line{width:270px;left:50px;top:205px}
  .ship-icon{font-size:58px;left:42px;top:190px}
  .rooms{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}