/* ============================================================
   universe.css -- UI chrome only; canvas handles the world
   ============================================================ */

/* ---- Page layout overrides ---- */
body {
  overflow: hidden;
}

.page-container {
  padding:   0 !important;
  max-width: none !important;
  overflow:  hidden !important;
  margin:    0 !important;
}

/* ---- Main canvas ---- */
#universe-canvas {
  position: fixed;
  top:    var(--header-height, 60px);
  left:   0;
  width:  100%;
  height: calc(100vh - var(--header-height, 60px));
  display: block;
  cursor:  grab;
  touch-action: none;
  z-index: 1;
}
#universe-canvas:active { cursor: grabbing; }

/* ---- Top UI bar ---- */
#univ-ui {
  position: fixed;
  top:   calc(var(--header-height, 60px) + 10px);
  left:  12px;
  right: 12px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  pointer-events:  none;
  z-index: 10;
}

#univ-coords {
  background: rgba(0, 0, 0, 0.55);
  border:     1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding:    3px 10px;
  font-size:  0.72rem;
  color:      rgba(255,255,255,0.55);
  font-family: monospace;
  letter-spacing: 0.04em;
}

#univ-btns {
  display:        flex;
  align-items:    center;
  gap:            8px;
  pointer-events: all;
}

#univ-btns button,
#univ-ui button {
  background: rgba(0,0,0,0.6);
  border:     1px solid rgba(255,255,255,0.18);
  color:      rgba(255,255,255,0.85);
  border-radius: 6px;
  padding:    4px 12px;
  font-size:  0.8rem;
  cursor:     pointer;
  transition: background 0.15s, border-color 0.15s;
}
#univ-btns button:hover { background: rgba(0,0,0,0.85); border-color: rgba(255,255,255,0.35); }

#univ-score {
  display:     inline-flex;
  align-items: center;
  align-self:  center;
  background: rgba(0,0,0,0.55);
  border:     1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding:    3px 10px;
  font-size:  0.8rem;
  line-height: 1;
  color:      #bada55;
  font-weight: bold;
}

/* ---- Minimap ---- */
#univ-minimap {
  position:  fixed;
  bottom:    16px;
  left:      14px;
  z-index:   10;
  border:    1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  overflow:  hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.6);
  cursor:    crosshair;
  opacity:   0.85;
  transition: opacity 0.2s;
}
#univ-minimap:hover { opacity: 1; }

#minimap-canvas {
  display: block;
}

/* ---- Modal overlay ---- */
#univ-modal {
  position:  fixed;
  inset:     0;
  z-index:   100;
  background: rgba(0,0,0,0.72);
  display:   flex;
  align-items:     center;
  justify-content: center;
  padding:   16px;
  backdrop-filter: blur(3px);
}

#univ-modal-box {
  background: rgba(8, 8, 24, 0.97);
  border:     1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.8);
  width:  100%;
  max-width: 500px;
  max-height: 80vh;
  display:   flex;
  flex-direction: column;
  overflow:  hidden;
}

#univ-modal-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:   14px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

#univ-modal-title {
  font-size:   1.1rem;
  font-weight: 700;
  color:       #eee;
}

#univ-modal-close {
  background:  none;
  border:      none;
  color:       rgba(255,255,255,0.5);
  font-size:   1.4rem;
  line-height: 1;
  cursor:      pointer;
  padding:     0 4px;
  transition:  color 0.15s;
}
#univ-modal-close:hover { color: #fff; }

#univ-modal-body {
  padding:    16px 18px;
  overflow-y: auto;
  color:      rgba(255,255,255,0.85);
  font-size:  0.92rem;
  line-height: 1.55;
}

/* Modal content pieces */
.univ-loading     { color: rgba(255,255,255,0.4); font-style: italic; }
.univ-star-fact   { color: #b8d4f0; margin-bottom: 14px; }
.univ-found-label { color: #bada55; font-weight: 700; }
.univ-score-label { color: #ffd700; font-size: 1rem; font-weight: 700; margin-top: 8px; }
.univ-secret      { color: rgba(255,255,255,0.8); font-style: italic; margin: 8px 0; }
.univ-no-msgs     { color: rgba(255,255,255,0.4); font-style: italic; }

.univ-egg-body    { text-align: center; padding: 8px 0; }
.univ-egg-icon    { display: inline-block; width: 80px; height: 80px; margin-bottom: 12px; }
.univ-egg-icon svg { width: 100%; height: 100%; }

/* Messages list */
.univ-msgs-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 14px;
  border:        1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding:       8px;
}
.univ-msg {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding:       8px 4px;
}
.univ-msg:last-child { border-bottom: none; }
.univ-msg strong { color: #bada55; }
.univ-msg-date   { font-size: 0.75rem; color: rgba(255,255,255,0.35); margin-left: 8px; }
.univ-msg p      { margin: 4px 0 0; color: rgba(255,255,255,0.8); }

/* Message form */
.univ-msg-form {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-top:     4px;
}
.univ-msg-form input,
.univ-msg-form textarea {
  background:    rgba(255,255,255,0.06);
  border:        1px solid rgba(255,255,255,0.14);
  border-radius: 6px;
  color:         #eee;
  padding:       8px 10px;
  font-size:     0.88rem;
  outline:       none;
  resize:        vertical;
  font-family:   inherit;
  transition:    border-color 0.15s;
}
.univ-msg-form input:focus,
.univ-msg-form textarea:focus { border-color: rgba(255,255,255,0.35); }
.univ-msg-form textarea { min-height: 70px; }
.univ-msg-form button {
  background:    rgba(186, 218, 85, 0.18);
  border:        1px solid #bada55;
  color:         #bada55;
  border-radius: 6px;
  padding:       8px 16px;
  font-size:     0.9rem;
  cursor:        pointer;
  font-weight:   700;
  transition:    background 0.15s;
  align-self:    flex-end;
}
.univ-msg-form button:hover:not(:disabled) { background: rgba(186,218,85,0.32); }
.univ-msg-form button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Help list */
.univ-help-list {
  list-style: none;
  padding:    0;
  margin:     0 0 12px;
}
.univ-help-list li {
  padding:      6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size:    0.9rem;
}
.univ-help-list li:last-child { border-bottom: none; }

/* ---- Toast ---- */
#univ-toast {
  position:   fixed;
  bottom:     90px;
  left:       50%;
  transform:  translateX(-50%) translateY(10px);
  background: rgba(10, 10, 30, 0.95);
  border:     1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding:    10px 20px;
  color:      #fff;
  font-size:  0.9rem;
  z-index:    200;
  opacity:    0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  white-space: nowrap;
}
#univ-toast.visible {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

/* ---- Mobile adjustments ---- */
@media (max-width: 600px) {
  #univ-minimap { width: 120px; }
  #minimap-canvas { width: 120px !important; height: 48px !important; }
  #univ-modal-box { max-height: 90vh; }
}

/* ---- Fullscreen adjustments ---- */
/* Applied via JS body class toggle on fullscreenchange */
body.is-fullscreen .header,
body.is-fullscreen .dropdown-content,
body.is-fullscreen #dropdownContent {
  display: none !important;
}

body.is-fullscreen #universe-canvas {
  top:    0 !important;
  height: 100vh !important;
}

body.is-fullscreen #univ-ui {
  top:     10px !important;
  z-index: 2147483645;
}

body.is-fullscreen #univ-modal {
  z-index: 2147483647;
}

body.is-fullscreen #univ-minimap {
  z-index: 2147483646;
}