/* The genetic lottery page. Site palette from styles.css; the pixel
   yellow / green / red are the deep dives' and the homepage menus'. */
.lt-top{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: var(--card);
}
.lt-home{ display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--font-marker); font-size: .95rem; }
.lt-home img{ width: 36px; height: 36px; }
.lt-title{ margin: 0; font-family: var(--px-font); font-weight: 400; font-size: clamp(18px, 4.6vw, 28px); color: var(--px-yellow); -webkit-font-smoothing: none; text-align: right; }

.lt-layout{ max-width: 1200px; margin: 0 auto; }

/* Phones: the 3D guy stays pinned at the top while the cards scroll under him. */
.lt-stage{
  position: sticky; top: 0; z-index: 2;
  height: 52vh; height: 52svh; min-height: 300px;
  background: var(--bg);
  touch-action: pan-y pinch-zoom;   /* sideways drags spin him; scrolling and pinch-zoom stay the browser's */
  user-select: none; -webkit-user-select: none;
  overflow: hidden;
}
#view{ display: block; width: 100%; height: 100%; cursor: grab; }
#view.is-dragging{ cursor: grabbing; }
#view.is-hot{ cursor: pointer; }

.lt-markers{ position: absolute; inset: 0; pointer-events: none; }
.lt-marker{
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 0; padding: 0; background: transparent;
  pointer-events: auto; cursor: pointer;
  animation: lt-pulse 1.4s steps(2, end) infinite;
}
/* the gene's own pixel icon (icons/<gene>.png, 64px art shown crisp) */
.lt-marker img, .gene__icon{ display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.lt-marker img{ filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.lt-marker:hover img, .lt-marker:focus-visible img{ filter: drop-shadow(0 0 0 var(--px-yellow)) drop-shadow(0 0 3px var(--px-yellow)); }
/* once he has the gene the icon stops pulsing */
.lt-marker[data-on]{ animation: none; }
.lt-marker[hidden]{ display: none; }
@keyframes lt-pulse{ 50%{ transform: scale(1.18); } }
/* a bigger invisible tap area around each marker */
.lt-marker::before{ content: ""; position: absolute; inset: -10px; }

.lt-age{
  --step: 3px;
  position: absolute; left: 12px; top: 12px;
  padding: 6px 12px; background: #000; color: var(--px-yellow);
  clip-path: var(--px-outer);
  font-family: var(--px-font); font-size: 22px; -webkit-font-smoothing: none;
}
.lt-btn{
  --step: 3px;
  appearance: none; border: 0; cursor: pointer;
  min-height: 40px; padding: 8px 14px;
  background: var(--px-slate); color: var(--px-yellow);
  clip-path: var(--px-outer);
  font-family: var(--px-font); font-size: 20px; -webkit-font-smoothing: none;
}
.lt-btn:hover, .lt-btn:focus-visible{ background: #000; }
.lt-reset{ position: absolute; right: 12px; top: 12px; }
.lt-hint{
  position: absolute; left: 0; right: 0; bottom: 8px; margin: 0;
  text-align: center; color: var(--muted); font-size: .9rem; pointer-events: none;
  transition: opacity .6s;
}
.lt-hint.is-gone{ opacity: 0; }

.lt-panel{ padding: 14px 16px 60px; }
.lt-intro{ margin: 0 0 14px; }
.lt-genes{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* One gene: a black pixel panel with a slate edge, like the homepage menus. */
.gene{
  --step: 6px;
  padding: var(--step);
  background: var(--px-slate);
  clip-path: var(--px-outer);
}
.gene__inner{ background: #000; clip-path: var(--px-inner); }
.gene__head{
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 100%; min-height: 56px; padding: 10px 14px;
  display: grid; grid-template-columns: auto 56px 1fr auto; align-items: center; gap: 4px 12px;
  text-align: left; color: #fff;
  font-family: var(--px-font); -webkit-font-smoothing: none;
}
.gene__head:hover{ background: #111; }
.gene__icon{ grid-row: 1 / span 2; grid-column: 2; width: 56px; height: 56px; }
.gene__name{ grid-column: 3; font-size: 30px; line-height: 1; color: var(--px-yellow); }
.gene__where{ grid-column: 3; font-size: 18px; color: #9da6a7; }
.gene__tags{ grid-row: 1 / span 2; grid-column: 4; display: grid; justify-items: end; gap: 4px; }
.gene__tag{ font-size: 18px; line-height: 1; }
.tag--buff{ color: #57ed4b; }
.tag--debuff{ color: #ff5757; }
.tag--jackpot{ color: var(--px-gold); }
.tag--next{ color: #9da6a7; }
.gene__mark{ grid-row: 1 / span 2; grid-column: 1; font-family: monospace; font-size: 24px; color: #9da6a7; width: 20px; text-align: center; }
.gene__head[aria-expanded="true"] .gene__mark{ color: var(--px-yellow); }
.gene--next .gene__head{ cursor: default; opacity: .55; }
.gene--next .gene__head:hover{ background: transparent; }

.gene__body{ padding: 2px 16px 16px; color: var(--text); animation: lt-reveal 160ms steps(4, end); }
.gene__body[hidden]{ display: none; }
@keyframes lt-reveal{ from{ clip-path: inset(0 0 100% 0); } to{ clip-path: inset(0); } }
.gene__lead{ margin: 4px 0 10px; font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 1.15rem; line-height: 1.35; color: var(--honey); }
.gene__body p{ margin: 0 0 10px; }
.gene__verdict{ font-weight: 700; }
/* what "take it away" will show */
.gene__without{ margin: -4px 0 12px; color: var(--muted); font-style: italic; }
.gene__controls{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 14px 0 12px; }
.gene__slider{ display: flex; align-items: center; gap: 10px; flex: 1 1 220px; font-family: var(--px-font); font-size: 18px; color: var(--px-yellow); }
.gene__slider input{ flex: 1; accent-color: var(--px-yellow); min-height: 32px; }
.gene__sources{ margin: 8px 0 0; padding: 0; list-style: none; font-size: .85rem; }
.gene__sources li{ margin: 4px 0; }
.gene__sources a{ color: var(--muted); }
.gene__sources a:hover{ color: var(--honey); }

/* Zoomed in to read on a phone: the guy scrolls away with the page instead of
   staying pinned over the text (set by main.js from the browser's zoom). */
body.is-zoomed .lt-stage{ position: relative; }

/* Phones: slightly bigger card text, so there is less need to zoom in at all. */
@media (max-width: 600px){
  .gene__body{ font-size: 17px; }
  .gene__sources{ font-size: 15px; }
}

/* Wider screens: the guy on the left, the cards on the right. */
@media (min-width: 900px){
  .lt-layout{ display: grid; grid-template-columns: minmax(0, 1fr) 420px; }
  .lt-stage{ height: calc(100vh - 56px); height: calc(100svh - 56px); }
  .lt-panel{ padding: 20px 20px 60px; max-height: calc(100svh - 56px); overflow-y: auto; }
}

/* the Norwood stage under the age */
.lt-age__stage{ display: block; font-size: 16px; color: #9da6a7; }
.lt-age__stage:empty{ display: none; }
/* each fact on a card gets a small pixel heading */
.gene__h{ margin: 16px 0 4px; font-family: var(--px-font); font-weight: 400; font-size: 20px; color: var(--px-yellow); -webkit-font-smoothing: none; }