/* =========================================================
   gallery.css — "The Exhibition" (展示室)
   Loaded after vignette.css. Reuses its tokens (--slab / --mono /
   --v-*), .v-cta, .v-label, .v-foot and the EN/JA toggle; only the
   room itself is defined here.
   ========================================================= */

/* ---- the room: darker than the game page, lit from the centre ---- */
body.gallery {
  background: #0a0405;           /* overrides the bg_red image */
  color: var(--v-ink);
  opacity: 0;
  transition: opacity 1.2s ease-out;
}
body.gallery.ready { opacity: 1; }

/* fixed vignette (周辺減光) — the game's name, literally, on the walls */
body.gallery::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.85) 100%),
    radial-gradient(60% 40% at 50% 0%, rgba(142,15,15,0.18), transparent 70%);
}
/* faint grain so the black isn't flat */
body.gallery::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
}
/* lift flow content above the fixed vignette/grain; fixed UI keeps its own stacking */
body.gallery > :not(.g-top):not(.lang-floating):not(.lb) { position: relative; z-index: 1; }

/* ---- top bar: quiet way back ---- */
.g-top {
  position: fixed; top: 1.2rem; left: 1.4rem; z-index: 80;
  mix-blend-mode: difference;
}
.g-top a {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #e6c4bf; text-decoration: none;
}
.g-top a:hover { color: #fff; }

/* ---- entrance ---- */
.g-entrance {
  min-height: 78vh; display: flex; align-items: center;
  padding: 18vh 0 8vh;
}
.g-entrance .container { max-width: 760px; }
.g-entrance h1 {
  font-family: var(--slab); font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.02;
  letter-spacing: -0.01em; margin: 0 0 1.4rem;
}
.g-entrance h1 .dim { color: var(--v-dim); font-weight: 500; }
.g-entrance .fore {
  font-family: var(--mono); font-size: 0.9rem; line-height: 1.9;
  color: var(--v-muted); max-width: 58ch; margin: 0 0 0.9rem;
}
.g-entrance .fore.ja {
  font-family: "Noto Serif JP", serif; font-size: 0.88rem; color: var(--v-dim);
}
.g-entrance .meta {
  margin-top: 2.2rem; display: flex; gap: 2.4rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--v-faint);
}
.g-entrance .meta b { display: block; color: var(--v-muted); letter-spacing: 0.1em; margin-top: 0.25rem; font-weight: 500; }

/* ---- the wall ---- */
.g-room { padding: 4vh 0 10vh; }
.g-room .container { max-width: 1100px; }

.work {
  margin: 0 0 clamp(90px, 16vh, 190px);
  opacity: 0; transform: translateY(28px);
  transition: opacity 1.1s ease-out, transform 1.1s ease-out;
}
.work.in { opacity: 1; transform: none; }

/* alternate wall positions so it reads like a hung show, not a feed */
.work.landscape { max-width: 880px; }
.work.portrait  { max-width: 440px; }
.work.left  { margin-right: auto; }
.work.right { margin-left: auto; }
.work.center { margin-left: auto; margin-right: auto; }

/* the frame: two rims, a mat, and weight */
.frame {
  position: relative; cursor: zoom-in;
  background: #120708;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.6),
    0 2px 0 rgba(255,255,255,0.04),
    0 40px 90px -30px rgba(0,0,0,0.95),
    0 14px 30px -14px rgba(0,0,0,0.8);
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1), box-shadow 0.6s;
}
.frame::after {                 /* inner mat line */
  content: ""; position: absolute; inset: 15px; pointer-events: none;
  border: 1px solid rgba(0,0,0,0.65);
}
.frame img {
  display: block; width: 100%; height: auto;
  filter: saturate(0.96) contrast(1.02);
}
/* captured stills carry UI chrome at the bottom — crop it away */
.work.crop .frame img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 38%; }
.frame:hover { transform: translateY(-3px); box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.6),
    0 2px 0 rgba(255,255,255,0.05),
    0 60px 110px -30px rgba(0,0,0,0.95),
    0 18px 36px -14px rgba(0,0,0,0.85); }

/* no captions on the flat page either — keep the spacing the plate used to give */
.work .frame { margin-bottom: 0; }

/* museum label (作品プレート) — retained for future use */
.plate {
  margin: 1.1rem 0 0 0.2rem; max-width: 34ch;
  font-family: var(--mono); color: var(--v-muted);
  display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; row-gap: 0.15rem;
  align-items: baseline;
}
.plate .no {
  grid-row: 1 / span 3; font-size: 0.66rem; letter-spacing: 0.2em;
  color: var(--v-orange); padding-top: 0.35rem;
}
.plate .title {
  font-family: var(--slab); font-weight: 600; font-size: 1.15rem;
  color: var(--v-ink); letter-spacing: 0.01em; line-height: 1.2;
}
.plate .title-ja {
  font-family: "Noto Serif JP", serif; font-size: 0.8rem; color: var(--v-dim);
}
.plate .note {
  margin-top: 0.45rem; font-size: 0.72rem; line-height: 1.75; color: var(--v-dim);
}
.plate .note .ja { display: block; font-family: "Noto Serif JP", serif; color: var(--v-faint); }
.work.right .plate { margin-left: auto; margin-right: 0.2rem; }

/* ---- exit ---- */
.g-exit {
  padding: 12vh 0 16vh; text-align: center;
}
.g-exit .container { max-width: 720px; }
.g-exit h2 {
  font-family: var(--slab); font-weight: 600;
  font-size: clamp(1.8rem, 4.2vw, 2.8rem); line-height: 1.15; margin: 0 0 0.6rem;
}
.g-exit .sub { font-family: "Noto Serif JP", serif; color: var(--v-dim); font-size: 0.92rem; margin: 0 0 2.2rem; }
.g-exit .v-cta { margin: 0 auto; }
.g-exit .back {
  display: inline-block; margin-top: 2rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--v-faint); text-decoration: none;
}
.g-exit .back:hover { color: var(--v-muted); }

/* ---- lightbox ---- */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6,2,2,0.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
.lb.open { opacity: 1; pointer-events: auto; }
.lb img {
  max-width: 92vw; max-height: 78vh; display: block;
  box-shadow: 0 50px 120px -30px rgba(0,0,0,1);
  border: 1px solid rgba(255,255,255,0.12);
}
.lb .lb-cap {
  margin-top: 1.2rem; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.14em; color: var(--v-muted); text-align: center;
}
.lb .lb-cap b { font-family: var(--slab); font-size: 1rem; letter-spacing: 0.02em; color: var(--v-ink); display: block; margin-bottom: 0.2rem; }
.lb button {
  position: absolute; background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.7); font-family: var(--mono); font-size: 0.74rem;
  letter-spacing: 0.16em; text-transform: uppercase; padding: 1rem;
}
.lb button:hover { color: #fff; }
.lb button:focus-visible { outline: 1px solid var(--v-orange); outline-offset: 2px; }
.lb .lb-close { top: 1.1rem; right: 1.2rem; }
.lb .lb-prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lb .lb-next  { right: 1rem; top: 50%; transform: translateY(-50%); }
body.lb-open { overflow: hidden; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .g-entrance { min-height: 60vh; padding: 16vh 0 6vh; }
  .work.landscape, .work.portrait { max-width: 100%; }
  .work.portrait { max-width: 78%; }
  .work.left, .work.right { margin-left: auto; margin-right: auto; }
  .work { margin-bottom: clamp(70px, 12vh, 120px); }
  .frame { padding: 10px; }
  .frame::after { inset: 9px; }
  .plate { max-width: 100%; }
  .work.right .plate { margin-left: 0.2rem; }
  .lb .lb-prev, .lb .lb-next { top: auto; bottom: 1rem; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.gallery { opacity: 1; transition: none; }
  .work { opacity: 1; transform: none; transition: none; }
  .frame, .lb { transition: none; }
}