:root{
  --bg:#031b16;
  --panel:#082820;
  --gold:#d4b776;
  --cream:#f1e4ca;
  --muted:#aaa99d;
  --line:rgba(212,183,118,.22);
}


*{
  box-sizing:border-box;
}


html,
body{
  margin:0;
  min-height:100%;
}


body{
  min-height:100vh;

  background:
    radial-gradient(
      circle at 12% 7%,
      rgba(32,95,73,.23),
      transparent 34%
    ),
    radial-gradient(
      circle at 90% 92%,
      rgba(112,68,24,.12),
      transparent 35%
    ),
    var(--bg);

  color:var(--cream);

  font-family:
    Georgia,
    "Times New Roman",
    serif;
}


button,
input{
  font:inherit;
}


button{
  cursor:pointer;
}


.account-header{
  min-height:78px;

  padding:
    16px clamp(20px,4vw,58px);

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  border-bottom:
    1px solid var(--line);
}


.account-brand{
  display:flex;
  align-items:center;
}


.account-brand img{
  display:block;

  width:auto;
  height:46px;

  max-width:230px;

  object-fit:contain;
}


.account-shell{
  width:min(1180px,92vw);

  margin-inline:auto;

  padding:
    clamp(38px,7vw,86px)
    0 80px;
}


.account-card{
  width:min(560px,100%);

  margin-inline:auto;

  padding:
    clamp(28px,5vw,48px);

  border:
    1px solid var(--line);

  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      rgba(12,48,38,.94),
      rgba(4,27,22,.94)
    );

  box-shadow:
    0 30px 90px
    rgba(0,0,0,.28);
}


.eyebrow{
  margin-bottom:12px;

  color:var(--gold);

  font-size:12px;

  letter-spacing:.18em;

  text-transform:uppercase;
}


h1{
  margin:0 0 14px;

  color:var(--cream);

  font-size:
    clamp(38px,6vw,62px);

  font-weight:400;

  line-height:1.06;
}


.lead{
  margin:0;

  color:var(--muted);

  line-height:1.8;
}


.auth-tabs{
  margin:30px 0 26px;

  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:8px;
}


.auth-tab,
.ghost-button{
  min-height:42px;

  padding:
    10px 17px;

  border:
    1px solid var(--line);

  border-radius:999px;

  color:var(--cream);

  background:
    transparent;
}


.auth-tab.is-active{
  color:#082019;

  background:var(--gold);

  border-color:var(--gold);
}


.account-form{
  display:grid;

  gap:18px;
}


.account-form label{
  display:grid;

  gap:8px;

  color:
    rgba(241,228,202,.88);

  font-size:13px;
}


.account-form input{
  width:100%;

  min-height:52px;

  padding:
    0 15px;

  border:
    1px solid
    rgba(212,183,118,.25);

  border-radius:11px;

  outline:none;

  color:var(--cream);

  background:
    rgba(255,255,255,.04);
}


.account-form input:focus{
  border-color:
    rgba(212,183,118,.75);
}


.primary-button{
  min-height:54px;

  padding:
    12px 20px;

  border:0;

  border-radius:999px;

  color:#071d17;

  background:var(--gold);

  font-weight:700;
}


.field-hint{
  margin-top:-10px;

  color:var(--muted);
}


.message{
  min-height:24px;

  margin-top:18px;

  color:var(--gold);
}


.dashboard-top{
  margin-bottom:36px;

  display:flex;

  align-items:flex-start;
  justify-content:space-between;

  gap:28px;
}


.worlds-grid{
  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(270px,1fr)
    );

  gap:18px;
}


.world-card{
  padding:25px;

  border:
    1px solid var(--line);

  border-radius:18px;

  background:
    rgba(8,40,32,.8);
}


.world-card h2{
  margin:
    0 0 14px;

  font-size:28px;

  font-weight:400;
}


.world-meta{
  display:flex;

  flex-wrap:wrap;

  gap:14px;

  color:var(--muted);

  font-size:13px;
}


.empty-state{
  padding:
    clamp(34px,6vw,64px);

  border:
    1px dashed
    rgba(212,183,118,.35);

  border-radius:20px;

  text-align:center;
}


.empty-state h2{
  margin:
    0 0 12px;

  font-size:
    clamp(27px,4vw,38px);

  font-weight:400;
}


.empty-state p{
  color:var(--muted);
}


.activation-note{
  max-width:560px;

  margin:
    30px auto 0;

  padding-top:22px;

  display:grid;

  gap:7px;

  border-top:
    1px solid var(--line);

  color:var(--muted);
}


.activation-note strong{
  color:var(--gold);
}


[hidden]{
  display:none !important;
}


@media(max-width:650px){

  .account-header{
    min-height:70px;
  }


  .account-brand img{
    height:38px;

    max-width:190px;
  }


  .account-shell{
    width:min(94vw,560px);

    padding-top:34px;
  }


  .dashboard-top{
    display:grid;
  }


  .dashboard-top
  .ghost-button{
    justify-self:start;
  }


  h1{
    font-size:42px;
  }

}


/* =========================================================
   PHASE I.C — MY WORLDS ACTION
   ========================================================= */

.world-open{
  display:inline-flex;

  margin-top:22px;

  min-height:42px;

  padding:
    10px 18px;

  align-items:center;
  justify-content:center;

  border:
    1px solid var(--line);

  border-radius:999px;

  color:var(--gold);

  text-decoration:none;
}


.world-open:hover{
  border-color:
    rgba(212,183,118,.65);
}