/* BREED sits on top of the homepage in the same document. */
#deep { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; display: none; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
#breed-ui { position: fixed; inset: 0; z-index: 61; pointer-events: none; color: #eef6f4; font-family: 'Michroma', sans-serif; animation: breed-ui 1.6s .5s ease both; }
#breed-ui[hidden] { display: none; }
#leave, #end { pointer-events: auto; }
@keyframes breed-ui { from { opacity: 0; } }
/* Once it covers everything there's no point in the page underneath doing any work. */
body.away .hud, body.away .win, body.away #nodes, body.away #organism, body.away #strap, body.away #hint { visibility: hidden; }

#leave { position: fixed; top: 12px; left: 16px; opacity: .55; transition: opacity .2s; }
#leave:hover, #leave:focus-visible { opacity: 1; }
#leave img { display: block; height: auto; }

#gens { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; pointer-events: none; }
#gens[hidden] { display: none; }
#gens i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(238, 246, 244, .55); transition: background .8s, box-shadow .8s; }
#gens i.on { background: #eef6f4; box-shadow: 0 0 12px #bfefff; }

#breed-hint {
  position: fixed; left: 16px; right: 16px; bottom: max(34px, env(safe-area-inset-bottom)); margin: 0; text-align: center;
  font-size: clamp(11px, 1.3vw, 16px); letter-spacing: .34em; opacity: 0; transition: opacity 1.2s; pointer-events: none; text-shadow: 0 0 14px #000, 0 0 2px #000;
}
#breed-hint.on { opacity: .9; }

#end {
  position: fixed; left: 16px; right: 16px; bottom: max(34px, env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; animation: rise 2.4s ease both;
}
#end[hidden] { display: none; }
#end-text { flex-basis: 100%; margin: 0 0 8px; text-align: center; font-size: clamp(13px, 1.7vw, 22px); letter-spacing: .36em; color: #fff; text-shadow: 0 0 18px rgba(0, 0, 0, .9), 0 0 3px #000; }
#end button, #end a {
  background: rgba(2, 6, 10, .62); color: #eef6f4; border: 1px solid rgba(238, 246, 244, .55); padding: 10px 16px 9px;
  font: inherit; font-size: 11px; letter-spacing: .2em; text-decoration: none; cursor: pointer; max-width: 100%; overflow-wrap: anywhere;
}
#end button:hover, #end a:hover { background: #eef6f4; color: #02060a; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { #end, #breed-ui { animation: none; } #breed-hint, #gens i { transition: none; } }