/* ═══════════════════════════════════════════════════════════════
   style.css  —  Jacob's Space Portfolio
   ─────────────────────────────────────────────────────────────
   Table of contents
     1. Reset & base
     2. Intro screen
     3. Fast-travel nav
     4. HUD
     5. Proximity prompt
     6. Planet overlay
     7. Overlay content helpers (cards, about page, etc.)
     8. Animations
   ═══════════════════════════════════════════════════════════════ */


/* ── 1. RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
}

:root {
  --bg:        #04040f;
  --gold:      #ffe066;
  --dim:       rgba(180, 180, 255, 0.55);
  --ui-border: #1e1e44;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: #e0e0ff;
  font-family: 'Press Start 2P', monospace;
  image-rendering: pixelated;
}

button { cursor: pointer; font-family: inherit; }


/* ── 2. INTRO SCREEN ─────────────────────────────────────────── */
#intro {
  position: fixed; inset: 0; z-index: 500;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px;
}

#intro-stars {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}

#intro-title {
  font-size: clamp(14px, 3vw, 22px);
  color: var(--gold);
  text-shadow: 0 0 24px rgba(255, 224, 102, 0.6);
  letter-spacing: 3px;
  z-index: 1;
}

#intro-sub {
  font-size: clamp(6px, 1.2vw, 9px);
  color: var(--dim);
  letter-spacing: 2px;
  line-height: 2.2;
  text-align: center;
  z-index: 1;
}

#intro-btn {
  margin-top: 12px;
  padding: 14px 28px;
  background: transparent;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-size: clamp(7px, 1.3vw, 10px);
  letter-spacing: 2px;
  z-index: 1;
  animation: blink 1.4s step-end infinite;
  transition: background 0.1s;
}
#intro-btn:hover {
  background: rgba(255, 224, 102, 0.12);
  animation: none;
}


/* ── 3. FAST-TRAVEL NAV ──────────────────────────────────────── */
#fast-travel {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200;
  display: none;               /* shown after launch */
  align-items: center;
  padding: 6px 14px;
  gap: 6px;
  background: rgba(4, 4, 15, 0.88);
  border-bottom: 2px solid var(--ui-border);
  backdrop-filter: blur(4px);
}

#nav-label {
  font-size: 10px;
  color: var(--gold);
  letter-spacing: 1px;
  margin-right: 10px;
  white-space: nowrap;
}

.nav-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  background: transparent;
  border: 2px solid var(--ui-border);
  color: #c0c0ff;
  font-size: 10px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.nav-btn:hover { background: rgba(255, 255, 255, 0.06); }
.nav-btn canvas { image-rendering: pixelated; }


/* ── MAIN CANVAS ─────────────────────────────────────────────── */
#space {
  position: fixed; inset: 0;
  display: block;
  width: 100vw; height: 100vh;
  image-rendering: pixelated;
}


/* ── 4. HUD ──────────────────────────────────────────────────── */
#hud {
  position: fixed; bottom: 14px; left: 16px;
  z-index: 100;
  display: none;               /* shown after launch */
  flex-direction: column; gap: 4px;
  pointer-events: none;
}
.hud-row {
  font-size: 9px;
  color: rgba(160, 160, 220, 0.5);
  letter-spacing: 0.5px;
}


/* ── 5. PROXIMITY PROMPT ─────────────────────────────────────── */
#prox-prompt {
  position: fixed; bottom: 56px; left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: none;
  flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
#prox-name  { font-size: 13px; }
#prox-label {
  font-size: 9px;
  color: var(--gold);
  animation: blink 1s step-end infinite;
}


/* ── 6. PLANET OVERLAY ───────────────────────────────────────── */
#overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(4, 4, 15, 0.97);
  display: none; flex-direction: column;
  overflow: hidden;
}
#overlay.open { display: flex; }

#overlay-head {
  display: flex; align-items: center;
  padding: 12px 20px;
  border-bottom: 2px solid var(--ui-border);
  gap: 14px;
  flex-shrink: 0;
}
#overlay-icon { image-rendering: pixelated; }
#overlay-name { font-size: clamp(16px, 3vw, 26px); flex: 1; }

#overlay-back {
  padding: 12px 22px;
  background: transparent;
  border: 2px solid var(--ui-border);
  color: #c0c0ff; font-size: 11px;
  letter-spacing: 1px;
  transition: border-color 0.1s, color 0.1s;
}
#overlay-back:hover { border-color: #ff5555; color: #ff5555; }

#overlay-body {
  flex: 1; overflow-y: auto;
  padding: 30px 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border) transparent;
}
#overlay-body::-webkit-scrollbar       { width: 6px; }
#overlay-body::-webkit-scrollbar-track { background: transparent; }
#overlay-body::-webkit-scrollbar-thumb { background: var(--ui-border); }


/* ── 7. OVERLAY CONTENT HELPERS ──────────────────────────────── */

/* Shared intro blurb */
.section-intro {
  font-size: 14px; color: var(--dim);
  line-height: 2.4; text-align: center;
  max-width: 720px; margin: 0 auto 40px;
}

/* Card grid (websites / art / games) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  max-width: 1000px; margin: 0 auto;
}

.card {
  border: 2px solid var(--ui-border);
  padding: 32px 20px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; text-align: center;
  min-height: 180px;
  transition: border-color 0.15s;
  cursor: pointer;
}
.card:hover { border-color: var(--gold); }
.card-title { font-size: 14px; color: #e0e0ff; }
.card-sub   { font-size: 11px; color: var(--dim); line-height: 2; }

/* Link / social buttons */
.link-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 16px; margin-top: 36px;
}
.pill-btn {
  padding: 15px 26px;
  background: transparent;
  border: 2px solid var(--ui-border);
  color: #c0c0ff; font-size: 12px;
  letter-spacing: 0.5px;
  transition: border-color 0.15s, color 0.15s;
}
.pill-btn:hover { border-color: var(--gold); color: var(--gold); }

/* About page layout */
#about-wrap {
  max-width: 700px; margin: 0 auto; text-align: center;
}
#about-avatar {
  width: 96px; height: 96px;
  image-rendering: pixelated;
  margin: 0 auto 28px;
  display: block;
}
#about-name { font-size: 26px; color: #fff; margin-bottom: 18px; }
#about-role { font-size: 14px; color: var(--gold); margin-bottom: 32px; letter-spacing: 2px; }
#about-bio  { font-size: 13px; color: var(--dim); line-height: 2.8; margin-bottom: 30px; }


/* ── 8. LIGHTBOX ─────────────────────────────────────────────── */
#lightbox {
  position: fixed; inset: 0; z-index: 400;
  display: none;
  align-items: center; justify-content: center;
}
#lightbox.lb-open { display: flex; }

#lb-backdrop {
  position: absolute; inset: 0;
  background: rgba(2, 2, 10, 0.92);
  cursor: pointer;
}

#lb-panel {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  gap: 14px;
  max-width: 90vw; max-height: 90vh;
  flex-direction: column;
}

/* prev / next / close share base style */
#lb-prev, #lb-next, #lb-close {
  background: transparent;
  border: 2px solid var(--ui-border);
  color: #c0c0ff;
  font-size: 12px;
  padding: 10px 14px;
  transition: border-color 0.1s, color 0.1s;
  flex-shrink: 0;
}
#lb-prev:hover, #lb-next:hover { border-color: var(--gold); color: var(--gold); }
#lb-close { border-color: #442222; color: #ff8888; align-self: flex-end; margin-bottom: 4px; }
#lb-close:hover { border-color: #ff5555; color: #ff5555; }

/* row that holds prev · stage · next */
#lb-panel {
  flex-direction: column;
}

/* rearrange to row for prev/stage/next */
#lb-row {
  display: flex; align-items: center; gap: 14px;
}

#lb-stage {
  width: clamp(280px, 60vw, 860px);
  height: clamp(200px, 55vh, 580px);
  border: 2px solid var(--ui-border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: #080818;
  position: relative;
}

#lb-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  image-rendering: auto;
  display: none;
}

#lb-placeholder {
  font-size: 11px; color: var(--dim);
  letter-spacing: 1px;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  border: 2px dashed var(--ui-border);
  margin: 12px;
}

#lb-meta {
  text-align: center;
  display: flex; flex-direction: column; gap: 10px;
  padding: 4px 0;
}
#lb-counter { font-size: 8px; color: var(--dim); }
#lb-title   { font-size: 12px; color: #fff; }
#lb-desc    { font-size: 9px; color: var(--dim); line-height: 2; max-width: 560px; }


/* ── 9. ADMIN ────────────────────────────────────────────────── */

/* Badge in nav bar */
#admin-badge {
  display: none;
  margin-left: auto;
  font-size: 9px;
  color: var(--gold);
  border: 1px solid var(--gold);
  padding: 3px 8px;
  letter-spacing: 1px;
}

/* Login modal */
#admin-modal {
  position: fixed; inset: 0; z-index: 600;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(2, 2, 10, 0.85);
}
#admin-modal.open { display: flex; }

#admin-modal-box {
  display: flex; flex-direction: column; gap: 16px;
  padding: 36px 40px;
  border: 2px solid var(--gold);
  background: var(--bg);
  min-width: 320px;
}

#admin-modal-title {
  font-size: 11px;
  color: var(--gold);
  letter-spacing: 2px;
  text-align: center;
}

#admin-pw {
  background: transparent;
  border: 2px solid var(--ui-border);
  color: #e0e0ff;
  font-family: inherit;
  font-size: 10px;
  padding: 10px 12px;
  letter-spacing: 2px;
  outline: none;
  width: 100%;
}
#admin-pw:focus { border-color: var(--gold); }

#admin-pw-error {
  font-size: 8px;
  color: #ff5555;
  min-height: 14px;
  text-align: center;
}

#admin-modal-btns {
  display: flex; gap: 10px; justify-content: center;
}
#admin-modal-btns button {
  padding: 10px 20px;
  background: transparent;
  border: 2px solid var(--ui-border);
  color: #c0c0ff;
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s;
}
#admin-login-btn:hover  { border-color: var(--gold);  color: var(--gold); }
#admin-cancel-btn:hover { border-color: #ff5555; color: #ff5555; }

/* Add-item bar inside overlay */
#admin-bar {
  max-width: 700px;
  margin: 40px auto 0;
  display: flex; flex-direction: column; gap: 16px;
}

#admin-add-btn {
  align-self: flex-start;
  padding: 12px 22px;
  background: transparent;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.1s;
}
#admin-add-btn:hover { background: rgba(255,224,102,0.08); }

#admin-form {
  flex-direction: column; gap: 12px;
  border: 2px solid var(--ui-border);
  padding: 24px;
}

.admin-input {
  background: transparent;
  border: 2px solid var(--ui-border);
  color: #e0e0ff;
  font-family: inherit;
  font-size: 9px;
  padding: 10px 12px;
  letter-spacing: 1px;
  outline: none;
  width: 100%;
}
.admin-input:focus { border-color: var(--gold); }
.admin-input::placeholder { color: rgba(180,180,255,0.35); }

#admin-form-btns {
  display: flex; gap: 10px;
}
.admin-form-btn {
  padding: 10px 20px;
  background: transparent;
  border: 2px solid var(--ui-border);
  color: #c0c0ff;
  font-family: inherit;
  font-size: 9px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s;
}
.admin-form-btn[type="submit"]:hover { border-color: var(--gold);  color: var(--gold); }
.admin-form-btn[type="button"]:hover { border-color: #ff5555; color: #ff5555; }

/* Delete button on custom cards */
.admin-delete-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #442222;
  color: #ff6666;
  font-family: inherit;
  font-size: 7px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s;
}
.admin-delete-btn:hover { border-color: #ff5555; color: #ff5555; }

/* File picker label */
#af-file-label {
  cursor: pointer;
  padding: 10px 16px;
  border: 2px dashed var(--ui-border);
  color: var(--dim);
  font-size: 9px;
  letter-spacing: 1px;
  text-align: center;
  transition: border-color 0.15s, color 0.15s;
}
#af-file-label:hover { border-color: var(--gold); color: var(--gold); }

/* Image preview inside form */
#af-preview-wrap {
  display: flex; align-items: center; gap: 12px;
}
#af-preview {
  max-width: 120px; max-height: 80px;
  object-fit: contain;
  border: 2px solid var(--ui-border);
}
#af-clear-file {
  padding: 6px 12px;
  background: transparent;
  border: 2px solid #442222;
  color: #ff6666;
  font-family: inherit; font-size: 8px;
  cursor: pointer;
  transition: border-color 0.1s, color 0.1s;
}
#af-clear-file:hover { border-color: #ff5555; color: #ff5555; }

#af-status {
  font-size: 8px;
  color: var(--gold);
  min-height: 14px;
}

/* Link label inside custom card */
.card-link {
  font-size: 7px;
  color: rgba(180,180,255,0.4);
  word-break: break-all;
}


/* ── 10. ANIMATIONS ──────────────────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}