/* ===== Subnautica 2 Guide — shared design system ===== */

/* ---- fonts & base ---- */
h1,h2,h3,.font-hud { font-family: 'Orbitron', sans-serif; letter-spacing: 0.03em; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
body { font-family: 'Inter', sans-serif; font-size: 15px; }

/* ---- depth gradient background ---- */
.depth-bg {
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(87,219,255,0.10) 0%, transparent 50%),
    linear-gradient(180deg, #1A3A47 0%, #10262F 30%, #0B1418 65%, #080B0D 100%);
}
.abyss-floor { background: linear-gradient(180deg, #0B1418 0%, #080B0D 100%); }

/* ---- god rays ---- */
.god-ray {
  position: fixed; left:-60%; top:-60%; width:220%; height:220%; pointer-events:none; z-index:1;
  background: conic-gradient(from 0deg at 50% 0%,
    transparent 0deg, rgba(87,219,255,0.05) 6deg, transparent 14deg,
    rgba(147,234,253,0.04) 22deg, transparent 32deg,
    rgba(87,219,255,0.05) 40deg, transparent 52deg);
  animation: rays 40s linear infinite;
}
@keyframes rays { from { transform: rotate(0deg);} to { transform: rotate(360deg);} }

/* ---- caustic patches ---- */
.caustic {
  position: fixed; border-radius: 50%; pointer-events:none; z-index:1;
  background: radial-gradient(circle, rgba(87,219,255,0.07) 0%, rgba(87,219,255,0.02) 55%, transparent 70%);
  filter: blur(6px); mix-blend-mode: screen;
  animation: causticDrift 16s ease-in-out infinite;
}
@keyframes causticDrift {
  0%,100% { transform: translate(0,0) scale(1); opacity:.5; }
  33% { transform: translate(6vw,4vh) scale(1.15); opacity:.8; }
  66% { transform: translate(-4vw,2vh) scale(0.9); opacity:.4; }
}

/* ---- plankton ---- */
.plankton {
  position: fixed; width:2px; height:2px; border-radius:50%; pointer-events:none; z-index:1;
  background: rgba(87,219,255,0.35); box-shadow: 0 0 4px rgba(87,219,255,0.3);
  animation: planktonFloat 12s ease-in-out infinite;
}
@keyframes planktonFloat {
  0%,100% { transform: translate(0,0); opacity:.3; }
  50% { transform: translate(2vw,-3vh); opacity:.9; }
}

/* ---- rising bubbles ---- */
@keyframes rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  8% { opacity: 0.5; }
  90% { opacity: 0.25; }
  100% { transform: translateY(-105vh) translateX(var(--drift,8px)); opacity: 0; }
}
.bubble {
  position: fixed; bottom:-30px; width:var(--s,3px); height:var(--s,3px);
  border-radius:50%; background: rgba(87,219,255,0.18);
  border: 1px solid rgba(87,219,255,0.12);
  animation: rise calc(var(--d,9s)) ease-in infinite; animation-delay: calc(var(--delay,0s));
  pointer-events:none; z-index:1;
}

/* ---- swimming fish ---- */
@keyframes swimAcross { from { transform: translateX(-15vw);} to { transform: translateX(115vw);} }
.fish { position: fixed; z-index:1; pointer-events:none; opacity:.10; animation: swimAcross var(--t,40s) linear infinite; animation-delay: var(--delay,0s); }

/* ---- swaying kelp ---- */
@keyframes sway { 0%,100% { transform: rotate(-2deg);} 50% { transform: rotate(2deg);} }
.kelp { position: fixed; bottom:-4px; z-index:2; pointer-events:none; opacity:.14; transform-origin: bottom center; animation: sway 6s ease-in-out infinite; }

/* ---- bioluminescent glow ---- */
.bio-glow { box-shadow: 0 0 20px rgba(87,219,255,0.10), inset 0 1px 0 rgba(87,219,255,0.07); }
.hover\:bio-glow-hover:hover, .bio-glow-hover:hover { box-shadow: 0 0 26px rgba(87,219,255,0.22), inset 0 1px 0 rgba(87,219,255,0.14); }

/* ---- sonar pulse ---- */
@keyframes sonar { 0% { transform: scale(0.5); opacity:.5;} 100% { transform: scale(2); opacity:0;} }
.sonar-ring { position:relative; }
.sonar-ring::before, .sonar-ring::after { content:''; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(87,219,255,0.3); animation: sonar 4s ease-out infinite; }
.sonar-ring::after { animation-delay: 2s; }

/* ---- PDA scan panel ---- */
.pda-panel {
  background: linear-gradient(135deg, rgba(11,20,24,0.96) 0%, rgba(8,11,13,0.92) 100%);
  border: 1px solid rgba(87,219,255,0.12);
  position: relative;
}
.pda-panel::before { content:''; position:absolute; top:0; left:0; width:26px; height:2px; background:#57DBFF; box-shadow: 0 0 8px #57DBFF; }
.pda-panel::after { content:''; position:absolute; bottom:0; right:0; width:26px; height:2px; background:#57DBFF; box-shadow: 0 0 8px #57DBFF; }

/* ---- scanline sweep ---- */
@keyframes scanline { 0% { top: 0%;} 100% { top: 100%;} }
.scanline { position:absolute; left:0; right:0; height:2px; background: linear-gradient(90deg, transparent, rgba(87,219,255,0.35), transparent); animation: scanline 7s linear infinite; }

/* ---- HUD depth gauge ---- */
.hud-corner { position: fixed; top: 82px; right: 20px; z-index: 40; pointer-events:none; width: 122px; }
.dial-wrap { position: relative; width: 122px; height: 122px; margin-left: auto; }
.dial { width: 100%; height: 100%; display: block; }
.dial .needle { transform-origin: 60px 60px; transition: transform 0.1s linear; }
.dial .progress { transform-origin: 60px 60px; transform: rotate(-135deg); }
.dial-readout { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family:'Orbitron',sans-serif; }
.dial-readout .dv { font-size: 22px; color:#57DBFF; text-shadow:0 0 12px rgba(87,219,255,0.5); line-height:1; }
.dial-readout .du { font-size: 9px; color: rgba(87,219,255,0.5); font-family:'JetBrains Mono',monospace; margin-top:2px; letter-spacing: .15em; }
.zone-label { margin-top: 6px; text-align:right; font-family:'JetBrains Mono',monospace; font-size:9px; color: rgba(87,219,255,0.45); line-height:1.5; text-transform: uppercase; letter-spacing:.12em; }
.zone-label b { display:block; font-size:10px; color:#57DBFF; letter-spacing:.08em; }
.vitals { margin-top: 4px; text-align:right; font-family:'JetBrains Mono',monospace; font-size:9px; color: rgba(87,219,255,0.4); line-height:1.6; }
.vitals b { font-weight:500; }

/* ---- section header rule ---- */
.rule-head { display:flex; align-items:center; gap:12px; margin-bottom: 12px; }
.rule-head .l { width:32px; height:1px; background: rgba(87,219,255,0.3); }
.rule-head h2 { font-family:'Orbitron',sans-serif; font-size:15px; color: rgba(87,219,255,0.8); text-transform: uppercase; letter-spacing:.1em; }
.rule-head .r { flex:1; height:1px; background: rgba(87,219,255,0.1); }
.sub-label { font-family:'JetBrains Mono',monospace; font-size:13px; color: #CBD5E1; text-transform: uppercase; letter-spacing:.08em; margin-bottom: 32px; }

/* ---- readability pass ---- */
[class*="text-[8px]"]  { font-size: 10.5px !important; }
[class*="text-[9px]"]  { font-size: 11.5px !important; }
[class*="text-[10px]"] { font-size: 12.5px !important; }
[class*="text-[11px]"] { font-size: 13px !important; }
.text-xs { font-size: 12.5px !important; }
.text-sm { font-size: 14px !important; }
.text-slate-700 { color: #64748B !important; }
.text-slate-600 { color: #94A3B8 !important; }
.text-slate-500 { color: #CBD5E1 !important; }
.text-slate-400 { color: #E2E8F0 !important; }
.text-slate-300 { color: #F1F5F9 !important; }
.text-slate-400, .text-slate-500 { line-height: 1.6; }
.font-mono.text-slate-600, .font-mono.text-slate-700 { color: #94A3B8 !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0B1418; }
::-webkit-scrollbar-thumb { background: #427F95; }