:root {
  color-scheme: light dark;
  --bg: #fafafa;
  --fg: #111;
  --muted: #555;
  --card: #ffffff;
  --shadow: 0 2px 8px rgba(0,0,0,0.06);
  --overlay: rgba(0,0,0,0.85);
  --glass: rgba(0,0,0,0.30);
  --accent: #0f62fe;
}

.theme-dark {
  --bg: #0b0b0d;
  --fg: #e9e9ee;
  --muted: #a7a7b0;
  --card: #17171c;
  --shadow: 0 2px 10px rgba(0,0,0,0.45);
  --overlay: rgba(0,0,0,0.88);
  --glass: rgba(20,20,24,0.7);
  --accent: #6aa0ff;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--fg); }

.site-header, .site-footer { padding: 16px; text-align: center; color: var(--muted);}
.site-header h1 { margin: 8px 0 4px; font-size: 1.6rem; color: var(--muted);}
.tagline { margin: 0; color: #555; }

.container { max-width: 1200px; margin: 0 auto; padding: 16px; }

.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: 16px; }
.deck-card { background: var(--card); border-radius: 14px; padding: 12px; box-shadow: var(--shadow); transition: transform .12s ease; text-decoration: none; color: inherit; display: block; }
.deck-card:hover { transform: translateY(-2px); }
.deck-cover { width: 100%; aspect-ratio: 11/9; object-fit: cover; border-radius: 10px; background: #eeeeee00; }
.deck-title { margin: 8px 0 0 0; font-weight: 600; }

.back-link { text-decoration: none; color: #333; }
.download-wrap { margin-top: 8px; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.card-tile { position: relative; background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.card-tile img { width: 100%; height: auto; display: block; }
.flip-indicator { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; background: rgba(0,0,0,0.55); border-radius: 50%; display: grid; place-items: center; }
.flip-indicator img { width: 16px; height: 16px; filter: none; filter: drop-shadow(0 0 2px rgba(0,0,0,0.85)); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; display: none; }
.lightbox[aria-hidden="false"] { display: grid; place-items: center; }
.lightbox-backdrop { position: absolute; inset: 0; background: var(--overlay); }
.lightbox-content { position: relative; z-index: 2; width: min(96vw, 1100px); max-height: 92vh; display: grid; gap: 12px; grid-template-rows: auto 1fr; }
.lightbox-image-wrap { position: relative; width: 100%; display: grid; place-items: center; }
.lightbox-image-wrap img { max-width: 100%; max-height: 70vh; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,0.4); background: #111; }

/* Flip button */
.flip-btn { position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, 0.377); border: none; border-radius: 50%; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; z-index: 3; outline: none; box-shadow: none; -webkit-tap-highlight-color: transparent; }
.flip-btn img { width: 22px; height: 22px; filter: none; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.587)); display: block; }
.flip-btn.hidden { display: none; }
.flip-btn:focus-visible { box-shadow: 0 0 0 2px rgba(255,255,255,0.22); }

.lightbox-caption { color: #e9e9ee; overflow: auto; max-height: 20vh; padding: 8px; background: var(--glass); border-radius: 8px; }
.card-name { font-weight: 600; margin-bottom: 4px; }
.collector { font-size: .9rem; color: #a7a7b0; margin-bottom: 8px; }
.notes { white-space: pre-wrap; line-height: 1.4; color: #fff; }

.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; top: 12px; background: rgba(0,0,0,0.6); color: #fff; border: none; border-radius: 50%; width: 42px; height: 42px; cursor: pointer; z-index: 3;
}
.lightbox-close { right: 12px; font-size: 24px; line-height: 42px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); font-size: 26px; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }

@media (max-width: 600px) {
  .deck-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* Grabber (visible on all sizes) */
.notes-grabber {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.6);
  margin: 6px auto 10px;
}

.notes-grabber {
  cursor: pointer;                 /* 👈 pointer cursor */
  transition: opacity .15s ease;
}

.notes-grabber:hover,
.notes-grabber:focus {
  opacity: 0.85;                   /* subtle hover/focus cue */
  outline: none;
}

/* Slide-up notes: enabled everywhere */
.lightbox-content { position: relative; }

/* Peek height variable: taller on desktop */
:root { --notes-peek: 30px; }             /* desktop/tablet */
@media (max-width: 640px) {
  :root { --notes-peek: 30px; }           /* phones */
}

/* The tray itself */
.lightbox-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 72vh;                        /* when expanded */
  background: rgba(0,0,0,0.70);
  backdrop-filter: blur(4px);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  transform: translateY(calc(100% - var(--notes-peek)));
  transition: transform .2s ease;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 8px;                        /* space for grabber */
}

/* Expanded overlay */
.lightbox.notes-open .lightbox-caption {
  transform: translateY(0);
}

/* Give the image a bit more room when collapsed */
.lightbox:not(.notes-open) .lightbox-image-wrap img {
  max-height: 78vh;
}

/* Notes content formatting */
.lightbox-caption .notes a {
  color: var(--accent);
  text-decoration: underline;
  word-break: break-word;
}

.lightbox-caption .notes img.notes-img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 8px 0;
}

/* Pixel-art option: add “|pixel” in the alt, e.g., ![FF1 sprite|pixel](/ff1/notes_media/sprite.png) */
.lightbox-caption .notes img.notes-img.pixel {
  image-rendering: pixelated;
  image-rendering: crisp-edges; /* fallback */
}

/* Mobile slide-up behavior */
@media (max-width: 640px) {
  .lightbox-content { position: relative; }
  .lightbox-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 72vh;
    background: rgba(0,0,0,0.70);
    backdrop-filter: blur(4px);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    transform: translateY(calc(100% - var(--notes-peek)));
    transition: transform .2s ease;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 8px;
  }
  .lightbox.notes-open .lightbox-caption { transform: translateY(0); }
  .lightbox:not(.notes-open) .lightbox-image-wrap img { max-height: 78vh; }
}

/* swipe track — robust */
.lb-track {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  transition: transform .22s ease;
  will-change: transform;
}
.lb-slide {
  flex: 0 0 100%;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0 16px;

  position: relative;
}
.lb-slide img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  background: #111;
  object-fit: contain;
}

/* Bigger cards on desktop */
@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* was 180px */
    gap: 16px; /* optional: give them some breathing room */
  }
}

/* Even larger on really wide screens (optional) */
@media (min-width: 1400px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* 3D flip support */
.lightbox-image-wrap { perspective: 1200px; }

.lb-slide img {
  backface-visibility: hidden;
  transform: rotateY(0deg);
}

/* optional: if you want a default transition for minor tweaks */
.lb-slide img.flip-anim {
  transition: transform .2s ease;
}

.theme-toggle {
  position: absolute;
  top: 52px; 
  right: 12px;
  background: var(--card);
  color: var(--fg);
  border: 1px solid rgba(127,127,127,0.25);
  border-radius: 999px;
  padding: 10px 14px;        /* was 6px 10px */
  box-shadow: var(--shadow);
  cursor: pointer;
}

.theme-toggle .theme-icon {
  font-size: 1.4rem;         /* bump from default (~1rem) */
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.notes img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 6px 0;
}

/* show a subtle spinner while loading a flip */
.lightbox-image-wrap::after {
  content: "";
  position: absolute; inset: 0;
  margin: auto;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  animation: lbspin .8s linear infinite;
  display: none;
}
body.lb-loading .lightbox-image-wrap::after { display: block; }

@keyframes lbspin { to { transform: rotate(360deg); } }

/* Let the sheet own vertical scroll; prevent scroll chaining to the page */
.lightbox-caption { overscroll-behavior: contain; touch-action: pan-y; }

/* Make horizontal swipes belong to the carousel, not the sheet */
.lb-track { touch-action: pan-x; }

/* --- Notes tray spacing variables --- */
#lb-notes {
  --note-gap-block: 0.0rem;   /* default gap between blocks */
  --note-gap-heading: 0.0rem; /* space above headings */
  --note-gap-after-heading: 0.0rem; /* heading → content gap */
  --note-gap-paragraph: 0.0rem; /* paragraph → paragraph gap */
  --note-gap-image: 0.0rem;   /* gap around images */
}

/* Reset defaults */
#lb-notes > * { margin: 0; }

/* Generic block-to-block gap */
#lb-notes > * + * { margin-top: var(--note-gap-block); }

/* Headings */
#lb-notes h2,
#lb-notes h3,
#lb-notes h4 {
  margin-top: var(--note-gap-heading);
}
#lb-notes h2 + *,
#lb-notes h3 + *,
#lb-notes h4 + * {
  margin-top: var(--note-gap-after-heading);
}

/* Paragraphs */
#lb-notes p {
  line-height: 1.4;
}
#lb-notes p + p {
  margin-top: var(--note-gap-paragraph);
}

/* Images / figures */
#lb-notes img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--note-gap-image) 0;
}
#lb-notes figure {
  margin: var(--note-gap-image) 0;
}
#lb-notes * + figure {
  margin-top: var(--note-gap-image);
}
#lb-notes figure + * {
  margin-top: var(--note-gap-image);
}

/* Lists */
#lb-notes ul,
#lb-notes ol {
  padding-left: 1.25rem;
  margin: var(--note-gap-block) 0 0;
}
#lb-notes li + li {
  margin-top: 0.15rem;
}

/* Optional: double <br> spacing if any remain */
#lb-notes br + br {
  display: block;
  content: "";
  margin-top: var(--note-gap-block);
}

/* Let the image area handle native pinch-zoom + horizontal swipes */
.lightbox-image-wrap,
.lb-track,
.lb-slide img {
  touch-action: pan-x pinch-zoom;
}

/* Keep the notes tray vertical gestures scoped there */
.lightbox-caption {
  touch-action: pan-y;
}

/* Spinner overlay for cards in the lightbox */
.lb-slide {
  position: relative;
}

.lb-spinner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 32px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: var(--accent, white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.2s;
}

.lb-spinner.active { opacity: 1; }

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}