body {
  background: #0f0b07;
  color: #e2e8f0;
  font-family: 'Lucida Console', monospace;
  padding: 30px;
  position: relative;
}

/* CRT scanlines */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.03) 50%,
    transparent 50%
  );
  background-size: 100% 4px;
  pointer-events: none;
  opacity: 0.15;
  z-index: 9998;
}

/* CRT screen curvature and vignette */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 60%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
  z-index: 9999;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.6);
}



  h1 {
    text-align: center;
    color: #ff8f0f;
    text-shadow: 0 0 5px #ff8f0f;
  }

  .layout { display: flex; gap: 30px; margin-top: 20px; }
  .left-panel { flex: 1; min-width: 300px; }
  .right-panel { flex: 1.1; display: flex; min-width:0;}

  .species-usage {
    display: inline;        
    font-size: 12px;
    color: #c77e2a;
    opacity: 0.9;
    margin-left: 6px;       
  }

  .species-link {
    color: #ff8f0f;                     
    text-decoration: none;
    text-shadow:
      0 0 3px #ff8f0f,
      0 0 6px #ff8f0f,
      0 0 10px rgba(255,143,15,0.6);
    transition: text-shadow 200ms ease;
  }
  .species-link:hover {
    text-shadow:
      0 0 8px #ff8f0f,
      0 0 18px #ff8f0f,
      0 0 26px rgba(255,143,15,0.8);
  }

  #output {
    min-width: 0;
    width: 100%;
    height: 71vh;
    overflow-y: auto;
    overflow-x: hidden;


    background: #121a24;
    padding: 18px;
    border-radius: 2px;
    border: 1px solid #2a3a4c;
    box-shadow: 0 0 14px #0f1d28 inset;
    white-space: pre-line;
    font-size: 13px;
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap; 
  }

            /* Match #lifepathList scrollbar */
  #output::-webkit-scrollbar {
    width: 10px;
  }

  #output::-webkit-scrollbar-track {
    background: #0d141c;
    border-radius: 10px;
    border: 1px solid #1f2a38;
  }

  #output::-webkit-scrollbar-thumb {
    background: #ff8f0f;
    border-radius: 10px;
    box-shadow: 0 0 10px #ff8f0f;
  }

  #output::-webkit-scrollbar-thumb:hover {
    background: #ffb35a;
  }

  /* Firefox scrollbar */
  #output {
    scrollbar-color: #ff8f0f #0d141c;
  }

  .category-label { color: #ff8f0f; font-weight: bold; }

  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; margin-bottom: 10px; }
  .full-width-field { margin-top: 0px; }

  .field {
    background: #11161f;
    padding: 6px;
    border-radius: 2px;
    border: 1px solid #1f2a38;
    box-shadow: 0 0 8px #1a2530 inset;
  }

  label { display: block; font-size: 13px; margin-bottom: 1px; color: #c77e2a; }

  input, select, textarea {
    width: 100%;
    padding: 8px;
    background: #0f141c;
    border: 1px solid #2b3c4e;
    border-radius: 2px;
    color: #ff8f0f;
    font-family: inherit;
    box-sizing: border-box;
  }

  .lock-toggle { margin-top: 6px; display: inline-flex; align-items: baseline; cursor: pointer; color: #c77e2a; }
  .lock-toggle input { margin-right: 6px; accent-color: #ff8f0f; }

  .inline-button {
    margin-top: 6px;
    padding: 4px 8px;
    background: linear-gradient(90deg,#ff8f0f,#b35f00);
    border:none;
    border-radius:2px;
    color:#001418;
    font-size:12px;
    cursor:pointer;
    box-shadow:0 0 10px #6e3a00;
  }
  .inline-button:hover { box-shadow:0 0 18px #b35f00; }

  #generateBtn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(90deg, #ff8f0f, #b35f00);
    border: none;
    border-radius: 2px;
    font-weight: bold;
    color: #001418;
    cursor: pointer;
    box-shadow: 0 0 14px #6e3a00;
  }
  #generateBtn:hover { box-shadow: 0 0 22px #b35f00; }

  .name-species-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
  }

  .button-row {
    display: flex;
    gap: 12px;
    margin-top: 10px;
  }

  #updateBtn {
    width: 20%;
    padding: 12px;
    background: linear-gradient(90deg, #2a3a4c, #1a2530);
    border: none;
    border-radius: 2px;
    font-weight: bold;
    color: #ff8f0f;
    cursor: pointer;
    box-shadow: 0 0 14px #0a0f14;
  }

  /* Lifepaths */
  .big-add {
    margin-top:18px;
    min-height:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px dashed #273543;
    background: linear-gradient(180deg, rgba(255,143,15,0.02), transparent);
    cursor:pointer;
    color:#c77e2a;
    font-weight:bold;
    text-align:center;
    padding:12px;
    border-radius:6px;
  }
  .big-add.disabled { opacity:0.45; cursor:not-allowed; }

  .lifepath-list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
  .lp-card {
    background:#0b1116; padding:10px; border-radius:4px; border:1px solid #18242f;
    display:flex; gap:10px; align-items:center; justify-content:space-between;
  }
  .lp-info { font-size:13px; color:#e2e8f0; white-space: pre-line;
  word-wrap: break-word;     /* legacy fallback */
  overflow-wrap: anywhere;   /* modern preferred */
  white-space: pre-wrap;       /* allow wrapping */
  max-width: 100%;           /* protect layout */ }
  .lp-actions { display:flex; gap:8px; }
  .pill { background:#11161f; padding:4px 8px; border-radius:999px; font-size:12px; color:#c77e2a; border:1px solid #23303c; }
  .small { font-size:12px; color:#9aa7b6; }

  .modal-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center;
    z-index:50; 
    color:#ff8f0f
  }
  .modal {
    width:520px; max-width:92%; background:#071018; border-radius:6px; padding:18px; border:1px solid #12303c;
    box-shadow: 0 8px 30px rgba(0,0,0,0.8);
    
  }
  .modal {
  max-height: 90vh;
  overflow-y: auto;
}

/* Firefox */
.modal {
  scrollbar-width: thin;
  scrollbar-color: #ff8c1a #071018;
}

/* Chromium / WebKit */
.modal::-webkit-scrollbar {
  width: 10px;
}

.modal::-webkit-scrollbar-track {
  background: #071018;
}

.modal::-webkit-scrollbar-thumb {
  background-color: #ff8c1a;
  border-radius: 6px;
  border: 2px solid #071018;
}

.modal::-webkit-scrollbar-thumb:hover {
  background-color: #ffa64d;
}


  /* Fixed-height scrollable lifepath container */
  #lifepathList {
    height: 23vh;
    overflow-y: auto;
    padding-right: 6px;        /* So scrollbar doesn’t overlap text */
  }

  /* Custom orange scrollbar */
  #lifepathList::-webkit-scrollbar {
    width: 10px;
  }

  #lifepathList::-webkit-scrollbar-track {
    background: #0d141c;
    border-radius: 10px;
    border: 1px solid #1f2a38;
  }

  #lifepathList::-webkit-scrollbar-thumb {
    background: #ff8f0f;
    border-radius: 10px;
    box-shadow: 0 0 10px #ff8f0f;
  }

  #lifepathList::-webkit-scrollbar-thumb:hover {
    background: #ffb35a;
  }

  /* Firefox scrollbar */
  #lifepathList {
    scrollbar-width: thin;
    scrollbar-color: #ff8f0f #0d141c; 
  }
  
  @media (max-width:900px){
    .layout { flex-direction:column; }
    .grid { grid-template-columns: 1fr; }
    .name-species-row { grid-template-columns:1fr; }
  }

.row input[type="radio"] {
  vertical-align: middle;       /* aligns dot with label text */
  margin-right: 8px;            /* spacing between dot and label */
  accent-color: #ff8f0f;        /* makes the dot orange in modern browsers */
  width: 16px;
  height: 16px;
}

.row label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;          /* ensures text vertically centers with radio */
  font-size: 13px;
  color: #c77e2a;
  padding: 6px
}

.lp-card {
  border: 1px solid transparent; /* reserve space */
}

/* Hovered drop target */
.lp-card.drag-over {
  border: 1px dashed #ff8f0f;
  box-shadow: 0 0 10px #ff8f0f;
  transition: box-shadow 0.1s ease, border-color 0.1s ease;
}

.lp-card[draggable="true"]:hover {
  border: 1px dashed #ff8f0f;
  border-color: #ff8f0f;
}

.lp-card.dragging {
  opacity: 0.9;
  cursor: grabbing;
}

.tooltip {
  position: fixed;
  z-index: 9999;
  max-width: 480px;
  padding: 10px 14px;
  background: #0b1116;
  border: 1px solid #ff8f0f;
  border-radius: 4px;
  color: #ff8f0f;
  font-size: 12px;
  line-height: 1.4;
  font-family: 'Lucida Console', monospace;
  white-space: normal;
  pointer-events: none;

  box-shadow:
    0 0 1px rgba(255,143,15,0.8),
    0 0 3px rgba(255,143,15,0.5),
    inset 0 0 6px rgba(255,143,15,0.2);

  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 120ms ease-out,
    transform 120ms ease-out;
}

.tooltip.visible {
  opacity: 1;
  transform: translateY(0px);
}


#heightChart {
  margin-top: 25px;
  padding-top: 10px;
  border-top: 1px solid #444;
}

#heightChart .height-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;

  background-image:
    repeating-linear-gradient(
      to top,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.06) 1px,
      transparent 1px,
      transparent 20px
    ),
    repeating-linear-gradient(
      to top,
      rgba(255,255,255,0.25) 0px,
      rgba(255,255,255,0.25) 2px,
      transparent 2px,
      transparent 40px
    );
}

.height-chart-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-top: 10px;
}

.height-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #ccc;
  font-family: 'Lucida Console', monospace;
  font-size: 12px;
}

.height-figure img {
  display: block;
  width: auto;
}

.hobby-type-toggle {
  display: flex;
  gap: 6px;
}

.hobby-type-btn {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid #2b3c4e;
  background: #0f141c;
  color: #c77e2a;
}

.hobby-type-btn.active {
  background: linear-gradient(90deg, #ff8f0f, #b35f00);
  color: #001418;
  border-color: #ff8f0f;
  box-shadow: 0 0 10px #6e3a00;
}

.trait-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.trait-grid.hidden {
  display: none;
}

.trait-section {
  margin-bottom: 10px;
}

.species-uses {
  display: block;
  font-size: 0.75em;
  opacity: 0.85;
}

.height-carousel {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-top: 10px;
}

.height-fixed {
  flex: 0 0 auto;
}

.height-viewport {
  overflow: hidden;
  width: 720px; /* visible window */
}

.height-track {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  transition: transform 0.3s ease;
}

.height-carousel-controls {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}

.height-carousel-controls button {
  padding: 4px 10px;
  background: linear-gradient(90deg,#ff8f0f,#b35f00);
  border: none;
  border-radius: 2px;
  color: #001418;
  cursor: pointer;
  font-size: 12px;
}

.height-viewport {
  cursor: grab;
}

.height-viewport img {
  pointer-events: none;
  user-select: none;
}

.height-viewport,
.height-viewport * {
  user-select: none;
}


.height-viewport.dragging {
  cursor: grabbing;
}

.age-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  font-family: 'Lucida Console', monospace;
}

.age-gate.hidden {
  display: none;
}

.age-gate-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(2px);
}

.age-gate-modal {
  position: relative;
  max-width: 550px;
  margin: 18vh auto;
  padding: 18px;
  background: #071018;
  border: 1px solid #12303c;
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.85);
  color: #e2e8f0;
}

.age-gate-modal h2 {
  margin: 0 0 10px 0;
  color: #ff8f0f;
  font-size: 18px;
  text-shadow: 0 0 6px #ff8f0f;
}

.age-gate-modal p {
  font-size: 13px;
  line-height: 1.45;
  color: #c77e2a;
}

.age-gate-actions {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

/* Primary confirm button — matches generate/random buttons */
.age-gate-actions #ageConfirm {
  flex: 1;
  padding: 8px 10px;
  background: linear-gradient(90deg, #ff8f0f, #b35f00);
  border: none;
  border-radius: 2px;
  color: #001418;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 12px #6e3a00;
}

.age-gate-actions #ageConfirm:hover {
  box-shadow: 0 0 20px #b35f00;
}

/* Secondary deny button — matches neutral system buttons */
.age-gate-actions #ageDeny {
  flex: 1;
  padding: 8px 10px;
  background: linear-gradient(90deg, #2a3a4c, #1a2530);
  border: none;
  border-radius: 2px;
  color: #ff8f0f;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 0 12px #0a0f14;
}

.age-gate-actions #ageDeny:hover {
  box-shadow: 0 0 18px #0f141c;
}

/*
.typewriter-container {
  padding: 20px;
  margin-top: 40px;
  position: relative;
}

.terminal-header {
  color: #acacac;
  font-size: 14px;
  margin-bottom: 10px;
  font-weight: bold;
}

.typewriter-text {
  color: #c77e2a;
  font-size: 16px;
  line-height: 1;
  min-height: 50px;
  position: relative;
  margin-bottom: 0px;
  white-space: pre-line;
}

.attribution-text {
  color: #c77e2a;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  padding-left: 40px;
  min-height: 20px;
  opacity: 0.85;
}

.cursor {
  display: inline-block;
  width: 10px;
  height: 20px;
  background-color: #c77e2a;
  margin-left: 2px;
  animation: blink 0.7s infinite;
  vertical-align: text-bottom;
}

.cursor-attribution {
  display: inline-block;
  width: 10px;
  height: 20px;
  background-color: #c77e2a;
  margin-left: 2px;
  animation: blink 0.7s infinite;
  vertical-align: text-bottom;
  opacity: 0.85;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.terminal-prompt {
  color: #acacac;
  margin-right: 8px;
}
*/

  .modal-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center;
    z-index:50; 
    color:#ff8f0f
  }

  /* Scanlines on modal backdrop */
  .modal-backdrop::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.04) 50%,
      transparent 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
    opacity: 0.3;
    z-index: 1;
  }