/* ============================================================================
   Lightbox — a reusable "enlarge this picture" overlay (see static/js/lightbox.js
   openLightbox). A full-screen frosted overlay with a big CRT frame around the
   picture, a name + description caption, and a "click anywhere to close" hint.
   Built + opened entirely in JS (no HTML template); these are the shared classes
   it stamps on.
   ============================================================================ */

/* Full-screen dark overlay; clicking ANYWHERE closes it (the cursor is a zoom-out). */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 5vw;
  cursor: zoom-out;
  background: rgba(5, 4, 15, .9);
  backdrop-filter: blur(3px);
  animation: lightboxRise .2s ease both;
}

/* The big CRT frame holding the enlarged picture (thick bezel + deep drop shadow). */
.lightbox-frame {
  position: relative;
  width: min(72vw, 560px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #05040f;
  border: 3px solid #000;
  border-radius: 22px / 15px;
  box-shadow: 0 0 0 7px #221e40, 0 26px 70px rgba(0, 0, 0, .75), inset 0 0 22px rgba(0, 0, 0, .6);
}
.lightbox-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
/* A 3D model's frame is a live view (lightbox.js + model_viewer.js): pressing inside it never
   closes the lightbox, so it drops the zoom-out cursor, and the model canvas offers a grab hand.
   Once the model is on screen (.is-live) the canvas cross-fades in over the preview picture (the
   canvas is see-through around the model, so the picture fades out too). The canvas is drawn at
   the screen's real resolution, so it keeps smooth edges, not the pixel-art upscale. */
.lightbox-frame.is-model { cursor: default; }
.lightbox-frame.is-model .lightbox-art { transition: opacity .3s ease; }
.lightbox-3d {
  image-rendering: auto;
  cursor: grab;
  opacity: 0;
}
.lightbox-3d:active { cursor: grabbing; }
.lightbox-frame.is-live img.lightbox-art { opacity: 0; }
.lightbox-frame.is-live .lightbox-3d { opacity: 1; }

/* scanlines + vignette over the picture, matching the card TV screen */
.lightbox-scan {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 4px);
}
.lightbox-vign {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(125% 115% at 50% 44%, transparent 62%, rgba(0, 0, 0, .4) 100%);
}

/* caption, ABOVE the picture: the asset name (arcade gold) on top, its description under it */
.lightbox-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: min(90vw, 560px);
  text-align: center;
}
.lightbox-name {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-gold);
  text-shadow: 2px 2px 0 #7a5200;
  overflow-wrap: anywhere;
}
.lightbox-desc {
  font-family: var(--font-body);
  font-size: 19px;
  color: var(--color-muted);
}
/* The rename control (base.html's tpl-lightbox-rename): the name itself is editable — a text
   cursor and a soft glow on hover say so; while editing, the gold caret and SAVE beside it do. A refusal's line wraps under the row. A tap on this row never
   closes the lightbox, so its cursor is plain. */
.lightbox-rename {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  cursor: default;
}
.lightbox-name-editable {
  padding: 4px 2px;
  outline: none;
  cursor: text;
  transition: text-shadow .15s ease;
}
.lightbox-name-editable:hover,
.lightbox-name-editable:focus-visible { text-shadow: 2px 2px 0 #7a5200, 0 0 12px rgba(255, 210, 63, .45); }
.lightbox-name-editable.is-editing { caret-color: var(--color-gold); }
/* SAVE: the shared green .btn, sized to sit beside the name without outweighing it (still 44px tall). */
.lightbox-rename .btn { font-size: 11px; padding: 15px 16px; }
.lightbox-rename-error {
  flex-basis: 100%;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-pink);
}
/* a model's animation buttons (the shared .btn): one row that wraps, scrolling if a file has many */
.lightbox-clips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: min(90vw, 760px);
  max-height: 24vh;
  overflow-y: auto;
  padding: 2px 2px 8px;
}
.lightbox-clips .btn { min-height: 44px; }
/* "Which side is its front?": the model from its four sides, the saved one lit in the shared gold. */
.lightbox-sides {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.lightbox-sides-ask {
  font-family: var(--font-body);
  font-size: 17px;
  color: #cfcaf5;
}
.lightbox-sides-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lightbox-side {
  padding: 0;
  border: 2px solid #3b3670;
  background: #120f2b;
  cursor: pointer;
  line-height: 0;
}
.lightbox-side canvas { width: 96px; height: auto; }
.lightbox-side:hover, .lightbox-side:focus-visible { border-color: var(--color-cyan); }
.lightbox-side.is-front { border-color: var(--color-gold); }
/* DOWNLOAD: the shared cyan .btn as a square icon button, pinned to the picture's top-right
   corner above the scanlines. */
.lightbox-download {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  text-decoration: none;
}
.lightbox-download svg { width: 18px; height: 18px; }
/* A sound's frame: its waveform (tv_card.css's .tv-wave, drawn by sound_card.js) — a tap there
   plays it, so it drops the zoom-out cursor. */
.lightbox-frame.is-sound { cursor: pointer; }
/* PLAY/STOP under a sound: the shared cyan .btn with the pixel glyph before the word, pink (the
   card chip's playing colour) while it plays. */
.lightbox-play { font-size: 11px; padding: 15px 18px; }
.lightbox-play-go, .lightbox-play-stop { display: inline-flex; align-items: center; gap: 10px; }
.lightbox-play svg { width: 16px; height: 16px; }
.lightbox-play-stop { display: none; }
.lightbox.is-playing .lightbox-play-go { display: none; }
.lightbox.is-playing .lightbox-play-stop { display: inline-flex; }
.lightbox.is-playing .lightbox-play {
  background: var(--color-pink);
  --btn-shadow-color: var(--color-pink-shadow);
}
.lightbox-hint {
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 1px;
  color: #6f6ab0;
}

@keyframes lightboxRise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
  .lightbox-frame.is-model .lightbox-art { transition: none; }
}