/* STARBOUND - Space Cockpit Game | Created by JH Games */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:#000; font-family:'Rajdhani',sans-serif; color:#c0e8ff; }

/* Login Screen */
#login-screen {
  position:fixed; inset:0; z-index:2000;
  background:radial-gradient(ellipse at center,#050a18 0%,#000 70%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:'Orbitron','Rajdhani',sans-serif;
}
#login-screen h1 { font-size:42px; letter-spacing:12px; color:#00d4ff; text-shadow:0 0 30px #00d4ff88,0 0 60px #00d4ff44; margin-bottom:6px; }
#login-screen .subtitle { font-size:13px; color:#00d4ff88; letter-spacing:6px; margin-bottom:24px; }
#login-screen input {
  font-family:'Rajdhani',sans-serif; font-size:15px; padding:10px 18px;
  background:#0a1020; color:#00d4ff; border:1px solid #00d4ff33; outline:none;
  width:240px; text-align:center; letter-spacing:2px; border-radius:4px;
}
#login-screen input:focus { border-color:#00d4ff88; box-shadow:0 0 12px #00d4ff22; }
#login-screen input::placeholder { color:#00d4ff44; }
.login-tabs { display:flex; margin-bottom:16px; }
.login-tabs button {
  font-family:'Orbitron',sans-serif; font-size:11px; padding:8px 24px;
  cursor:pointer; letter-spacing:2px; transition:all .2s;
}
.login-btn {
  font-family:'Orbitron',sans-serif; font-size:12px; padding:10px 28px;
  background:#0a1020; color:#00d4ff; border:1px solid #00d4ff; cursor:pointer;
  letter-spacing:2px; border-radius:4px; transition:all .2s;
}
.login-btn:hover { background:#00d4ff22; box-shadow:0 0 16px #00d4ff44; }
#login-guest-btn {
  font-family:'Rajdhani',sans-serif; font-size:12px; padding:6px 20px;
  background:none; color:#666; border:1px dashed #444; cursor:pointer;
  letter-spacing:1px; border-radius:4px; margin-top:8px;
}
#login-guest-btn:hover { color:#999; border-color:#666; }

/* Title Screen */
#title-screen {
  position:fixed; inset:0; z-index:1500;
  background:radial-gradient(ellipse at center,#050a18 0%,#000 70%);
  display:none; flex-direction:column; align-items:center; justify-content:center;
  font-family:'Orbitron','Rajdhani',sans-serif;
}
#title-screen h1 { font-size:48px; letter-spacing:14px; color:#00d4ff; text-shadow:0 0 30px #00d4ff88; margin-bottom:4px; }
#title-screen .subtitle { font-size:12px; color:#00d4ff66; letter-spacing:8px; margin-bottom:30px; }
.menu-btn {
  font-family:'Orbitron',sans-serif; font-size:13px; padding:12px 40px;
  background:#0a1020; color:#00d4ff; border:1px solid #00d4ff44;
  cursor:pointer; letter-spacing:3px; border-radius:4px; margin:5px 0;
  transition:all .2s; min-width:220px;
}
.menu-btn:hover { background:#00d4ff11; border-color:#00d4ff; box-shadow:0 0 20px #00d4ff33; }

/* Cloud user info */
#cloud-user-info {
  display:none; margin-bottom:16px; font-size:12px; color:#00d4ff88; letter-spacing:1px;
}
#cloud-logout-btn {
  font-family:'Rajdhani',sans-serif; font-size:11px; padding:3px 12px;
  background:none; color:#ff5555; border:1px solid #ff555544; cursor:pointer;
  margin-left:10px; border-radius:3px;
}
#cloud-logout-btn:hover { border-color:#ff5555; }

/* Game Canvas */
#game-canvas {
  position:fixed; inset:0; z-index:1; cursor:crosshair;
}

/* Overlay screens */
.overlay-screen {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,5,15,0.92); display:none;
  flex-direction:column; align-items:center; justify-content:flex-start;
  padding:40px 20px; overflow-y:auto;
  font-family:'Rajdhani',sans-serif;
}
.overlay-screen.visible { display:flex; }
.overlay-screen h2 {
  font-family:'Orbitron',sans-serif; font-size:24px; color:#00d4ff;
  letter-spacing:6px; margin-bottom:20px; text-shadow:0 0 12px #00d4ff44;
}

/* Star Map */
#starmap-screen { z-index:600; }
#starmap-canvas { border:1px solid #00d4ff22; border-radius:8px; cursor:crosshair; }

/* Station Screen */
#station-screen { z-index:550; }
.station-tabs { display:flex; gap:4px; margin-bottom:16px; flex-wrap:wrap; justify-content:center; }
.station-tab {
  font-family:'Orbitron',sans-serif; font-size:11px; padding:8px 16px;
  background:#0a1525; color:#668899; border:1px solid #1a3050;
  cursor:pointer; letter-spacing:2px; border-radius:4px; transition:all .2s;
}
.station-tab.active { color:#00d4ff; border-color:#00d4ff; background:#0a2040; box-shadow:0 0 10px #00d4ff22; }
.station-tab:hover { color:#00d4ff; border-color:#00d4ff66; }
.station-content { width:100%; max-width:700px; }

/* Trade table */
.trade-table { width:100%; border-collapse:collapse; }
.trade-table th { font-family:'Orbitron',sans-serif; font-size:10px; color:#00d4ff88; letter-spacing:2px; padding:6px 10px; text-align:left; border-bottom:1px solid #1a3050; }
.trade-table td { font-size:13px; padding:6px 10px; border-bottom:1px solid #0a1525; }
.trade-table tr:hover { background:#0a152544; }
.trade-btn {
  font-family:'Rajdhani',sans-serif; font-size:11px; padding:3px 12px;
  background:#0a2040; color:#00d4ff; border:1px solid #00d4ff44;
  cursor:pointer; border-radius:3px; transition:all .15s;
}
.trade-btn:hover { background:#00d4ff22; border-color:#00d4ff; }
.trade-btn.sell { color:#44ff88; border-color:#44ff8844; }
.trade-btn.sell:hover { background:#44ff8822; border-color:#44ff88; }
.trade-profit { font-size:10px; color:#44ff88; margin-top:2px; }
.trade-loss { font-size:10px; color:#ff6644; margin-top:2px; }

/* Upgrade cards */
.upgrade-card {
  display:flex; justify-content:space-between; align-items:center;
  background:#0a1525; border:1px solid #1a3050; border-radius:6px;
  padding:12px 16px; margin-bottom:8px; transition:all .2s;
}
.upgrade-card:hover { border-color:#00d4ff44; }
.upgrade-name { font-family:'Orbitron',sans-serif; font-size:12px; color:#c0e8ff; letter-spacing:1px; }
.upgrade-desc { font-size:12px; color:#668899; margin-top:2px; }
.upgrade-price { font-family:'Orbitron',sans-serif; font-size:13px; color:#ffd700; }
.upgrade-owned { color:#44ff88; font-size:11px; letter-spacing:2px; }

/* Mission cards */
.mission-card {
  background:#0a1525; border:1px solid #1a3050; border-radius:6px;
  padding:12px 16px; margin-bottom:8px; cursor:pointer; transition:all .2s;
}
.mission-card:hover { border-color:#00d4ff44; background:#0a1a30; }
.mission-card.active { border-color:#ffd700; }
.mission-title { font-family:'Orbitron',sans-serif; font-size:12px; color:#00d4ff; letter-spacing:1px; }
.mission-desc { font-size:12px; color:#889; margin-top:4px; }
.mission-reward { font-size:12px; color:#ffd700; margin-top:4px; }

/* Inventory screen */
#inventory-screen { z-index:560; }
.cargo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; width:100%; max-width:700px; }
.cargo-item {
  background:#0a1525; border:1px solid #1a3050; border-radius:4px;
  padding:8px 12px; font-size:13px;
}
.cargo-item .qty { color:#ffd700; font-family:'Orbitron',sans-serif; font-size:11px; }

/* Mission log */
#missions-screen { z-index:570; }

/* Pause Screen */
#pause-screen {
  position:fixed; inset:0; z-index:900;
  background:rgba(0,5,15,0.85); display:none;
  flex-direction:column; align-items:center; justify-content:center;
  font-family:'Orbitron',sans-serif;
}
#pause-screen.visible { display:flex; }
#pause-screen h2 { font-size:32px; color:#00d4ff; letter-spacing:8px; text-shadow:0 0 20px #00d4ff88; margin-bottom:24px; }

/* Admin Panel */
#admin-panel-overlay {
  position:fixed; inset:0; z-index:3000;
  background:rgba(0,5,15,0.95); display:none;
  flex-direction:column; align-items:center; justify-content:center;
  font-family:'Orbitron',sans-serif;
}
#admin-panel-overlay.visible { display:flex; }
#admin-panel-title { font-size:18px; color:#ff3333; letter-spacing:6px; margin-bottom:20px; text-shadow:0 0 12px #ff333344; }
#admin-btn-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; max-width:500px; width:90%; }
.admin-btn {
  font-family:'Orbitron',sans-serif; font-size:10px; padding:12px 8px;
  background:#1a0a0a; color:#ff5555; border:1px solid #ff333344;
  cursor:pointer; border-radius:4px; letter-spacing:1px; transition:all .2s;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.admin-btn:hover { background:#2a0a0a; border-color:#ff3333; }
.admin-btn.active { background:#330a0a; border-color:#ff5555; box-shadow:0 0 12px #ff333344; }
.admin-btn .btn-state { font-size:9px; color:#ff8888; }
#admin-close-btn {
  font-family:'Orbitron',sans-serif; font-size:11px; padding:8px 24px;
  background:none; color:#666; border:1px solid #444; cursor:pointer;
  margin-top:16px; border-radius:4px; letter-spacing:2px;
}
#admin-close-btn:hover { color:#ff5555; border-color:#ff5555; }
#admin-status-msg { font-size:11px; color:#ff8888; margin-top:12px; min-height:18px; letter-spacing:1px; }

/* Death screen */
#death-screen {
  position:fixed; inset:0; z-index:800;
  background:rgba(20,0,0,0.9); display:none;
  flex-direction:column; align-items:center; justify-content:center;
  font-family:'Orbitron',sans-serif;
}
#death-screen.visible { display:flex; }
#death-screen h2 { font-size:36px; color:#ff3333; letter-spacing:8px; text-shadow:0 0 20px #ff333388; margin-bottom:12px; }
#death-screen p { font-size:14px; color:#ff888888; margin-bottom:24px; letter-spacing:2px; }

/* Notification */
#notification {
  position:fixed; top:80px; left:50%; transform:translateX(-50%);
  z-index:700; font-family:'Rajdhani',sans-serif; font-size:14px;
  color:#00d4ff; background:#0a152588; border:1px solid #00d4ff44;
  padding:8px 24px; border-radius:4px; letter-spacing:1px;
  opacity:0; transition:opacity .3s; pointer-events:none;
}
#notification.visible { opacity:1; }

/* Damage flash */
#damage-flash {
  position:fixed; inset:0; z-index:400;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(255,0,0,0.3) 100%);
  opacity:0; pointer-events:none; transition:opacity .1s;
}

/* Low health warning border */
#low-health-border {
  position:fixed; inset:0; z-index:399;
  border:3px solid transparent; pointer-events:none;
  transition:border-color 0.3s;
}
#low-health-border.warning {
  border-color:rgba(255,0,0,0.4);
  animation: healthPulse 1s ease-in-out infinite;
}
@keyframes healthPulse {
  0%, 100% { border-color:rgba(255,0,0,0.15); }
  50% { border-color:rgba(255,0,0,0.5); }
}

/* Floating text container */
#floating-texts {
  position:fixed; inset:0; z-index:450; pointer-events:none;
  overflow:hidden;
}
.floating-text {
  position:absolute; font-family:'Orbitron',sans-serif; font-size:14px;
  font-weight:700; pointer-events:none; white-space:nowrap;
  animation: floatUp 1.5s ease-out forwards;
}
@keyframes floatUp {
  0% { opacity:1; transform:translateY(0) scale(1); }
  70% { opacity:0.8; }
  100% { opacity:0; transform:translateY(-60px) scale(0.8); }
}

/* Kill confirmed */
.kill-confirmed {
  position:fixed; top:30%; left:50%; transform:translate(-50%,-50%);
  font-family:'Orbitron',sans-serif; font-size:18px; color:#ff4444;
  letter-spacing:4px; text-shadow:0 0 20px rgba(255,68,68,0.6);
  pointer-events:none; z-index:451;
  animation: killFlash 1.2s ease-out forwards;
}
@keyframes killFlash {
  0% { opacity:1; transform:translate(-50%,-50%) scale(1.3); }
  30% { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(0.9); }
}

/* Screen shake */
#game-canvas.shake {
  animation: screenShake 0.15s ease-in-out;
}
@keyframes screenShake {
  0%, 100% { transform:translate(0,0); }
  25% { transform:translate(-4px,2px); }
  50% { transform:translate(3px,-3px); }
  75% { transform:translate(-2px,4px); }
}

/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#050a18; }
::-webkit-scrollbar-thumb { background:#1a3050; border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:#2a4060; }

/* Responsive */
@media (max-width:600px) {
  #login-screen h1, #title-screen h1 { font-size:28px; letter-spacing:6px; }
  .menu-btn { font-size:11px; padding:10px 24px; min-width:180px; }
  #admin-btn-grid { grid-template-columns:1fr 1fr; }
}