/* Finn's Genome Journey — science-museum glow UI */
@font-face {
  font-family: 'Fredoka';
  src: url('fonts/fredoka.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('fonts/nunito.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --gel: #38e1ff;
  --gel-soft: #9adfff;
  --ink: #eaf6ff;
  --panel: rgba(9, 26, 50, 0.82);
  --panel-line: rgba(56, 225, 255, 0.4);
  --shadow: 0 6px 24px rgba(0, 10, 30, 0.55);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden;
  background: #071224;
  font-family: 'Nunito', 'Segoe UI', sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#hud-root { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud { position: absolute; inset: 0; }
#hud button { pointer-events: auto; font-family: 'Fredoka', 'Nunito', sans-serif; }

.nojs, #webgl-error {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #0b2242 0%, #050d1d 100%);
  z-index: 50; text-align: center; padding: 24px;
}
.err-card, .nojs h2 { max-width: 520px; }
#webgl-error .err-card, .nojs > div {
  background: var(--panel); border: 2px solid var(--panel-line); border-radius: 24px;
  padding: 32px 36px; box-shadow: var(--shadow);
}
.err-emoji { font-size: 56px; }
#webgl-error h2, .nojs h2 { font-family: 'Fredoka'; font-weight: 600; margin: 10px 0; }
#webgl-error p, .nojs p { font-size: 18px; line-height: 1.5; color: #bfe9ff; }

/* ---------- loading ---------- */
#loading {
  position: fixed; inset: 0; display: flex; flex-direction: column; gap: 26px;
  align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #0b2242 0%, #050d1d 100%);
  z-index: 40; transition: opacity 0.6s ease;
}
#loading.gone { opacity: 0; pointer-events: none; }
.load-helix { display: flex; gap: 10px; }
.load-helix span {
  width: 14px; height: 44px; border-radius: 7px;
  background: var(--gel);
  animation: helixwave 1.1s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(56, 225, 255, 0.8);
}
.load-helix span:nth-child(1) { animation-delay: 0s; background: #7ddf64; }
.load-helix span:nth-child(2) { animation-delay: 0.12s; background: #ff7a7a; }
.load-helix span:nth-child(3) { animation-delay: 0.24s; background: #38e1ff; }
.load-helix span:nth-child(4) { animation-delay: 0.36s; background: #ffd166; }
.load-helix span:nth-child(5) { animation-delay: 0.48s; background: #6db3ff; }
@keyframes helixwave {
  0%, 100% { transform: scaleY(0.5); opacity: 0.5; }
  50% { transform: scaleY(1.15); opacity: 1; }
}
.load-text { font-family: 'Fredoka'; font-size: 22px; color: var(--gel-soft); letter-spacing: 0.4px; }

/* ---------- Pip ---------- */
#pip {
  position: absolute; left: 16px; bottom: 16px;
  display: flex; align-items: flex-end; gap: 10px;
  max-width: min(560px, 72vw);
  pointer-events: none;
}
#pip-face {
  font-size: 44px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
  animation: pipsway 3.4s ease-in-out infinite;
}
@keyframes pipsway { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-3px); } }
#pip-bubble {
  background: var(--panel); border: 2px solid var(--panel-line);
  border-radius: 20px 20px 20px 6px; padding: 12px 18px;
  box-shadow: var(--shadow);
  font-size: 17px; line-height: 1.4; min-height: 30px;
}
#pip-bubble b { color: var(--gel); font-family: 'Fredoka'; margin-right: 8px; font-size: 15px; }
#pip.pop #pip-bubble { animation: bubblepop 0.35s ease; }
@keyframes bubblepop { 0% { transform: scale(0.85); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ---------- journey map ---------- */
#map {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.map-node {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--panel); border: 2px solid rgba(56,225,255,0.25);
  border-radius: 16px; width: 76px; padding: 7px 4px 6px;
  color: var(--ink); cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s, box-shadow 0.2s;
}
.map-node:hover { transform: scale(1.07); border-color: var(--gel); }
.map-node .map-ico { font-size: 24px; line-height: 1; }
.map-node .map-name { font-family: 'Fredoka'; font-size: 11px; font-weight: 500; text-align: center; line-height: 1.15; color: #bfe9ff; }
.map-node.current {
  border-color: var(--gel);
  box-shadow: 0 0 16px rgba(56, 225, 255, 0.55), inset 0 0 10px rgba(56,225,255,0.15);
  transform: scale(1.1);
}
.map-node.current .map-name { color: #fff; }
.map-node:not(.visited) { opacity: 0.55; }
.map-link { width: 3px; height: 12px; background: rgba(56,225,255,0.35); border-radius: 2px; }

/* ---------- scale bar ---------- */
#scalebar {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 2px solid var(--panel-line);
  border-radius: 999px; padding: 8px 20px;
  font-family: 'Fredoka'; font-size: 16px; font-weight: 500;
  display: flex; gap: 10px; align-items: center;
  box-shadow: var(--shadow); white-space: nowrap;
  max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
}
#scale-icon { font-size: 20px; }

/* ---------- action buttons (lab steps etc) ---------- */
#actions {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  max-width: 90vw;
}
.abtn {
  background: linear-gradient(180deg, #14406e, #0d2a4c);
  border: 2px solid var(--panel-line); border-radius: 999px;
  color: var(--ink); font-size: 17px; font-weight: 600;
  padding: 11px 22px; cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.2s, border-color 0.2s;
}
.abtn:hover { transform: translateY(-2px) scale(1.04); border-color: var(--gel); }
.abtn.accent {
  background: linear-gradient(180deg, #0f9fc9, #0a6d96);
  border-color: #8ff0ff; color: #04121f;
  text-shadow: none; font-weight: 700;
  animation: accentpulse 1.8s ease-in-out infinite;
}
@keyframes accentpulse { 0%,100% { box-shadow: 0 0 8px rgba(56,225,255,0.4); } 50% { box-shadow: 0 0 22px rgba(56,225,255,0.85); } }

/* ---------- top-right buttons ---------- */
#topbtns { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; }
.tbtn {
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--panel); border: 2px solid var(--panel-line);
  color: var(--ink); font-size: 21px; cursor: pointer;
  transition: transform 0.12s, border-color 0.2s;
}
.tbtn:hover { transform: scale(1.1); border-color: var(--gel); }

/* ---------- dive / zoom-out ---------- */
#zoombtns {
  position: absolute; bottom: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.zbtn {
  background: var(--panel); border: 2px solid var(--panel-line); border-radius: 999px;
  color: var(--gel-soft); font-size: 16px; font-weight: 600; padding: 9px 18px; cursor: pointer;
  transition: transform 0.12s, border-color 0.2s, opacity 0.2s;
}
.zbtn.big {
  font-size: 20px; padding: 14px 30px;
  background: linear-gradient(180deg, #0f9fc9, #0a6d96);
  color: #04121f; border-color: #8ff0ff; font-weight: 700;
  animation: accentpulse 1.8s ease-in-out infinite;
}
.zbtn:disabled { opacity: 0.35; animation: none; cursor: default; }
.zbtn:not(:disabled):hover { transform: scale(1.06); }

/* ---------- flight pad ---------- */
#pad {
  position: absolute; left: 16px; bottom: 104px;
  display: grid; grid-template-columns: repeat(3, 52px); grid-template-rows: repeat(3, 52px);
  gap: 6px; opacity: 0.9;
}
.pad-btn {
  border-radius: 14px; border: 2px solid var(--panel-line);
  background: var(--panel); color: var(--gel-soft);
  font-size: 20px; cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: none;
}
.pad-btn.held, .pad-btn:active { background: rgba(56,225,255,0.35); border-color: var(--gel); }
/* arrow-key cluster: fwd top-middle; left/back/right middle row; float & sink bottom corners */
.pad-f { grid-area: 1 / 2; }
.pad-l { grid-area: 2 / 1; }
.pad-b { grid-area: 2 / 2; }
.pad-r { grid-area: 2 / 3; }
.pad-u { grid-area: 3 / 1; font-size: 15px; }
.pad-d { grid-area: 3 / 3; font-size: 15px; }

/* ---------- coverage meter ---------- */
#coverage {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 2px solid var(--panel-line); border-radius: 18px;
  padding: 10px 16px 8px; box-shadow: var(--shadow);
  max-width: 94vw;
}
#cov-title { font-family: 'Fredoka'; font-size: 15px; margin-bottom: 7px; display: flex; justify-content: space-between; gap: 18px; }
#cov-pct { color: var(--gel); font-weight: 700; }
#cov-strip { display: flex; gap: 2px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.cov-cell {
  flex: 0 0 auto; width: 17px; height: 24px; border-radius: 5px;
  font-family: 'Fredoka'; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  color: #0a1c36; background: rgba(120,160,200,0.15);
}
.cov-cell.empty { color: rgba(154,223,255,0.5); background: rgba(40,70,110,0.4); font-size: 12px; }
.cov-cell.wobbly { animation: wob 0.9s ease-in-out infinite; opacity: 0.75; }
@keyframes wob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-2px) rotate(3deg); } }
#cov-hint { font-size: 11.5px; color: #9fc4e8; margin-top: 6px; }

/* ---------- banner ---------- */
#banner {
  position: absolute; top: 26%; left: 50%; transform: translate(-50%, -50%);
  font-family: 'Fredoka'; font-size: clamp(26px, 5vw, 52px); font-weight: 700;
  color: #fff; text-shadow: 0 0 24px rgba(56,225,255,0.9), 0 4px 12px rgba(0,0,0,0.6);
  background: rgba(9, 26, 50, 0.6); border: 3px solid var(--gel);
  padding: 18px 44px; border-radius: 28px;
  white-space: nowrap;
}
#banner.show { animation: bannerin 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes bannerin { 0% { transform: translate(-50%,-50%) scale(0.3); opacity: 0; } 100% { transform: translate(-50%,-50%) scale(1); opacity: 1; } }

/* ---------- help ---------- */
#help {
  position: absolute; inset: 0; background: rgba(4, 12, 26, 0.72);
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto; z-index: 30;
}
.help-card {
  background: var(--panel); border: 2px solid var(--gel);
  border-radius: 26px; padding: 28px 34px; max-width: min(480px, 92vw);
  box-shadow: var(--shadow);
}
.help-card h2 { font-family: 'Fredoka'; margin: 0 0 14px; font-size: 26px; }
.help-row { font-size: 17px; margin: 10px 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.help-key {
  background: rgba(56,225,255,0.16); border: 1.5px solid var(--panel-line);
  padding: 3px 12px; border-radius: 10px; font-family: 'Fredoka'; font-weight: 600; color: var(--gel-soft);
}
#help-close {
  margin-top: 16px; width: 100%; padding: 13px;
  background: linear-gradient(180deg, #0f9fc9, #0a6d96);
  border: none; border-radius: 14px; color: #04121f;
  font-size: 19px; font-weight: 700; cursor: pointer;
}

/* ---------- control hint ---------- */
#ctl-hint {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  font-size: 12.5px; color: rgba(159, 196, 232, 0.75); letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  #pip { max-width: 78vw; bottom: 12px; left: 10px; }
  #pip-face { font-size: 34px; }
  #pip-bubble { font-size: 15px; padding: 10px 14px; }
  .map-node { width: 60px; padding: 5px 2px 4px; }
  .map-node .map-ico { font-size: 19px; }
  .map-node .map-name { font-size: 9px; }
  #scalebar { font-size: 13px; padding: 6px 14px; top: 8px; left: 8px; transform: none; max-width: calc(100vw - 160px); }
  #topbtns { top: 8px; right: 8px; }
  .tbtn { width: 40px; height: 40px; font-size: 18px; }
  .abtn { font-size: 15px; padding: 9px 16px; }
  #actions { bottom: 118px; left: 168px; transform: none; justify-content: flex-start; max-width: calc(100vw - 240px); }
  #zoombtns { bottom: 12px; right: 10px; }
  .zbtn.big { font-size: 17px; padding: 11px 22px; }
  #pad { bottom: 92px; left: 10px; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(3, 46px); }
  #coverage { top: 52px; }
  #ctl-hint { display: none; }
}
@media (max-height: 500px) {
  #pip { bottom: 8px; }
  #pad { bottom: 8px; }
}
@media (pointer: fine) and (min-width: 900px) {
  /* on big precise screens the pad is still handy for keys-free play — keep but subtler */
  #pad { opacity: 0.55; }
  #pad:hover { opacity: 0.95; }
}