:root{
  --bg:#000;
  --text:#f7d6c1;
  --lcars-a:#ff9c6b;
  --lcars-b:#9966cc;
  --lcars-c:#99ccff;
  --active:#66ffff;
  --card-bg:#cc99cc;
}

html, body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:var(--bg);
  font-family:Arial;
  color:var(--text);
}

.topbar{
  height:80px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px;
  border-left:30px solid var(--lcars-a);
  border-bottom:10px solid var(--lcars-a);
  box-sizing:border-box;
}

.title{ font-size:32px; color:var(--lcars-a); font-weight:bold; }

#menuBtn{
  background:var(--lcars-a);
  color:black;
  font-size:22px;
  font-weight:bold;
  width:50px;
  height:50px;
  border-radius:25px;
}

.credits{
  background:var(--lcars-b);
  color:black;
  padding:10px 20px;
  border-radius:30px;
  font-weight:bold;
}

/* MAIN VIEW */
#view{
  position:fixed;
  top:80px;
  bottom:80px;
  left:0;
  right:0;
  overflow:auto;
  padding:20px;
  box-sizing:border-box;
}

.card{
  background:var(--card-bg);
  color:black;
  border-radius:0 40px 40px 0;
  padding:20px 20px 20px 70px;
  margin-bottom:14px;
  position:relative;
  touch-action: manipulation;
}

.card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:30px;
  background:var(--lcars-a);
}

/* BUTTONS */
button{
  border:none;
  padding:10px 14px;
  border-radius:20px;
  font-weight:bold;
  cursor:pointer;
  margin:4px;
}

.buy{ background:var(--lcars-c); }
.sell{ background:var(--lcars-b); color:black; }

.menubar{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:14px;
  background:#000;
  border-top:10px solid var(--lcars-a);
  box-sizing:border-box;
}

.menu-btn{
  background:var(--lcars-a);
  color:black;
  font-weight:bold;
  border-radius:25px;
  padding:14px;
  border:none;
}

.menu-btn.active{
  background:var(--active);
  box-shadow:0 0 10px var(--active);
}

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#gameMenu{
  display:none;
  position:fixed;
  top:80px;
  left:0;
  right:0;
  bottom:80px;
  padding:20px;
  background:rgba(0,0,0,0.85);
  z-index:1000;
}

#StarChart{
  display:none;
  position:fixed;
  top:80px;
  bottom:80px;
  left:0;
  right:0;
  background:#000;
}

#jumpBtn{
  position:absolute;
  right:20px;
  bottom:20px;
  padding:14px 20px;
  border-radius:30px;
  font-weight:bold;
  border:none;
  background:#66ffff;
  color:black;
  box-shadow:0 0 12px rgba(102,255,255,0.4);
  cursor:pointer;
}

#jumpBtn:disabled{
  background:#444;
  color:#999;
  box-shadow:none;
  cursor:not-allowed;
}

#zoomControls{
  position:absolute;
  left:20px;
  bottom:20px;
  display:flex;
  flex-direction:row;
  gap:8px;
}

#zoomControls button{
  width:38;
  height:38;
  font-size:18;
  font-weight:bold;
  background:var(--lcars-a);
  color:black;
  border:none;
  border-radius:20px;
}

canvas{
  position:absolute;
  top:0;
  left:0;
}

#eventOverlay{
  display:none;
  position:fixed;
  top:80px;
  bottom:80px;
  left:0;
  right:0;
  background:rgba(0,0,0,0.85);
  z-index:2000;
  padding:20px;
  box-sizing:border-box;
}

#eventCard{
  max-width:700px;
  margin:auto;
}

#eventButtons{
  margin-top:20px;
}

#endOverlay{
  display:none;
  position:fixed;
  top:80px;
  bottom:80px;
  left:0;
  right:0;
  background:rgba(0,0,0,0.85);
  z-index:2000;
  padding:20px;
  box-sizing:border-box;
}

#endCard{
  max-width:700px;
  margin:auto;
}

#endButtons{
  margin-top:20px;
}