/* WordPlace menu craft. Only the game gallery, never a playing field.
   Real stock silhouettes + one ink/paper carrier. Preview state is not play state. */
#zineGameMenu {
  --menu-paper: var(--release-paper);
  --menu-ink: var(--release-ink);
  --menu-slip: url("assets/nachtzine/all-assets-2026-09-13/global/score-paper-v2.webp");
  --menu-word: url("assets/nachtzine/all-assets-2026-09-13/global/word-paper-v2.webp");
  --menu-mint: url("assets/nachtzine/all-assets-2026-09-13/global/mint-ticket-v2.webp");
  --menu-paper-a: url("assets/nachtzine/menu-material-2026-09-14/paper-a-v1.webp");
  --menu-paper-b: url("assets/nachtzine/menu-material-2026-09-14/paper-b-v1.webp");
  --menu-paper-c: url("assets/nachtzine/menu-material-2026-09-14/paper-c-v1.webp");
}
#zineGameMenu .game-poster {
  --ticket-stock: var(--menu-paper-a);
  --ticket-tint: url(#menu-paper-words);
  --ticket-angle: -.45deg;
  --ticket-texture-x: 20px;
  --ticket-ink-offset: 0px;
  isolation: isolate;
  transform: rotate(var(--ticket-angle));
  translate: 0;
  transition: translate 160ms steps(2, end);
}
#zineGameMenu .game-poster:nth-child(3n + 2) {
  --ticket-stock: var(--menu-paper-b);
  --ticket-angle: .35deg;
  --ticket-texture-x: 170px;
}
#zineGameMenu .game-poster:nth-child(3n) {
  --ticket-stock: var(--menu-paper-c);
  --ticket-angle: -.25deg;
  --ticket-texture-x: 290px;
}
#zineGameMenu .game-poster-sandbox { --ticket-tint: url(#menu-paper-sandbox); }
#zineGameMenu .game-poster-estafette { --ticket-tint: url(#menu-paper-estafette); }
#zineGameMenu .game-poster-royale { --ticket-tint: url(#menu-paper-royale); }
#zineGameMenu .game-poster-story { --ticket-tint: url(#menu-paper-story); }
#zineGameMenu .game-poster-case { --ticket-tint: url(#menu-paper-case); }
#zineGameMenu .game-poster-echo { --ticket-tint: url(#menu-paper-echo); --poster-field: #9d4534; }
#zineGameMenu[data-gallery-scene="echo-kamer"] .gallery-feature { --feature-color: #e5a77d; }
#zineGameMenu .feature-fallback-echo { background: #e5a77d; }
#zineGameMenu .feature-fallback-echo b { position: absolute; inset: 35% 10% auto; text-align: center; color: #292027; font: 900 clamp(38px, 4vw, 64px)/1 var(--print-face); }
#zineGameMenu .game-poster::before { display: none; }
#zineGameMenu .poster-stock {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  filter: drop-shadow(0 1px .5px #21182255);
}
#zineGameMenu .poster-stock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* A native colour carrier always survives an image/decode failure. */
  background: var(--poster-field);
  mask: none;
  clip-path: none;
  box-shadow: none;
}
#zineGameMenu .game-poster::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  width: auto;
  height: auto;
  transform: translate(7px, 5px);
  rotate: 0deg;
  background: var(--menu-paper);
  mask: none;
  opacity: 0;
  pointer-events: none;
}
/* Real photographic stock after complete decode. Nine-slice keeps tear tips
   and edge height stable; no whole-sheet squeeze or repeated sawtooth mask.
   The RGB tint acts on the paper only. Text and contact shadows stay outside. */
#zineGameMenu[data-menu-material="ready"] .poster-stock::before,
#zineGameMenu[data-menu-material="ready"] .game-poster::after {
  background: none;
  border: solid transparent;
  border-width: 8px 32px;
  border-image: var(--ticket-stock) 32 96 fill / 8px 32px / 0 stretch;
}
#zineGameMenu[data-menu-material="ready"] .poster-stock::before { filter: var(--ticket-tint); }
#zineGameMenu[data-menu-material="ready"] .game-poster::after { filter: brightness(.96); }
#zineGameMenu .game-poster .poster-name { mask: none; }
#zineGameMenu[data-menu-material="ready"] .game-poster .poster-name {
  mask: url("assets/nachtzine/menu-material-2026-09-14/ink-press-v1.svg") 0 2px / 384px 96px repeat;
}
#zineGameMenu[data-menu-material="ready"] .game-poster:nth-child(2n) .poster-name { mask-position: 79px 11px; }
#zineGameMenu[data-menu-material="ready"] .game-poster:nth-child(3n) .poster-name { mask-position: 137px 5px; }
.menu-material-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
html #zineGameMenu .game-poster {
  filter: drop-shadow(.5px 2px .7px #0009) drop-shadow(3px 6px 3px #0006);
}
#zineGameMenu .game-poster:not(:disabled):is(:hover, :focus-visible) { translate: 0; }
#zineGameMenu .game-poster[data-previewed="true"]:not(:disabled) { translate: 6px -2px; }
#zineGameMenu .game-poster[data-previewed="true"]::after { opacity: 1; }
#zineGameMenu .game-poster[data-previewed="true"] .poster-stock {
  /* Only the front casts onto the backing. The ink stays unfiltered. */
  filter: drop-shadow(1px 2px .75px #21182299) drop-shadow(2px 4px 1.5px #21182233);
}
html #zineGameMenu .game-poster[data-previewed="true"]:not(:disabled) {
  filter: drop-shadow(.8px 3px 1px #0009) drop-shadow(5px 10px 4px #0007);
}
#zineGameMenu .game-poster:not(:disabled):active { translate: 3px 1px; }
#zineGameMenu .game-poster .poster-select { box-shadow: none; }
#zineGameMenu .poster-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 2px;
  /* Centre the shared ink block on the visible stock, not only its box.
     The three existing silhouettes have slightly different optical centres. */
  transform: translateY(var(--ticket-ink-offset));
}
#zineGameMenu .game-poster .poster-select i { opacity: 0; }
#zineGameMenu .game-poster[data-previewed="true"] .poster-select i { opacity: 1; }
#zineGameMenu .game-poster:disabled .poster-select i { display: none; }
#zineGameMenu .gallery-intro h2 { font-size: clamp(30px, 3vw, 48px); }
#zineGameMenu .gallery-intro p { font-size: clamp(20px, 1.55vw, 25px); }
#zineGameMenu .gallery-close {
  width: auto;
  min-width: 44px;
  min-height: 46px;
  padding: 11px 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  font: 400 20px/1.1 var(--print-face);
  transform: rotate(.5deg);
}
#zineGameMenu .gallery-close[hidden] { display: none !important; }
#zineGameMenu .gallery-close > span { font-size: inherit; }
#zineGameMenu .gallery-close::before,
#zineGameMenu .gallery-close::after { display: none; }
#zineGameMenu .gallery-close .gallery-return-arrow { font: 700 23px/1 sans-serif; }

/* The utility row belongs to the paper wall, but stays visually secondary. */
#zineGameMenu #zineUtilities { gap: 14px; }
html #zineGameMenu #zineUtilities button {
  position: relative;
  isolation: isolate;
  min-height: 46px;
  min-width: 44px;
  padding: 10px 18px;
  gap: 10px;
  background: none;
  color: var(--menu-paper);
  font: 400 20px/1.15 var(--print-face);
  text-transform: none;
  clip-path: none;
  filter: drop-shadow(.5px 2px .7px #0009) drop-shadow(2px 5px 3px #0005);
  transition: translate 120ms steps(2, end);
}
#zineGameMenu #zineUtilities button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #504952 var(--stock) 30px 90px / 390px;
  background-blend-mode: multiply;
  mask: var(--menu-slip) center / 100% 100% no-repeat;
}
#zineGameMenu #zineUtilities button:is(:hover, :focus-visible) { color: var(--menu-ink); translate: 0 -2px; }
#zineGameMenu #zineUtilities button:is(:hover, :focus-visible)::before { background-color: var(--menu-paper); }
#zineGameMenu #zineUtilities button:active { translate: 0 1px; }
#zineGameMenu #zineUtilities button:focus-visible { outline: 3px dashed var(--menu-paper); outline-offset: 4px; }

@media (min-width: 1000px) and (min-height: 561px) {
  #zineGameMenu .gallery-inner {
    width: min(100%, 1400px);
    height: 100svh;
    padding: clamp(20px, 3vh, 34px) clamp(36px, 4vw, 64px) clamp(24px, 3.5vh, 40px);
    grid-template-rows: clamp(105px, 13vh, 138px) minmax(0, 1fr) 48px;
    gap: clamp(22px, 3vh, 32px);
  }
  #zineGameMenu .gallery-heading { gap: clamp(28px, 3.5vw, 52px); padding-right: 185px; }
  #zineGameMenu .gallery-brand { width: clamp(220px, 18vw, 270px); }
  #zineGameMenu .gallery-programme {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    gap: clamp(30px, 3.2vw, 48px);
    align-items: center;
  }
  #zineGameMenu .gallery-games {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, minmax(0, 1fr));
    height: 100%;
    min-height: 0;
    max-height: 680px;
    padding: 0;
    gap: clamp(9px, 1.3vh, 15px);
  }
  #zineGameMenu .game-poster {
    padding: 9px 48px 9px 54px;
    gap: 3px 16px;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 30px;
    grid-template-rows: minmax(0, 1fr);
    align-content: center;
  }
  #zineGameMenu .poster-copy { grid-area: 1 / 1; align-self: center; }
  #zineGameMenu .game-poster .poster-name {
    display: block;
    grid-area: 1 / 1;
    min-height: 0;
    max-width: none;
    padding: 0;
    font-size: clamp(30px, 2.7vw, 40px);
    line-height: 1.04;
    letter-spacing: -.015em;
  }
  #zineGameMenu .game-poster-royale .poster-name { font-size: clamp(27px, 2.4vw, 37px); }
  #zineGameMenu .game-poster .poster-name br { display: none; }
  #zineGameMenu .game-poster .poster-description {
    display: block;
    position: static;
    grid-area: 2 / 1;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    clip-path: none;
    overflow: visible;
    max-width: none;
    white-space: normal;
    font: 400 clamp(19px, 1.55vw, 24px)/1.18 var(--print-face);
    color: var(--menu-paper);
    opacity: 1;
    mask: none;
  }
  #zineGameMenu .game-poster .poster-format {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #zineGameMenu .game-poster .poster-select { grid-area: 1 / 2; align-self: center; padding: 0; }
  #zineGameMenu .game-poster:disabled .poster-select {
    position: absolute; right: 28px; bottom: 10px; max-width: 75%;
    font-size: 18px; color: var(--menu-paper);
  }
  #zineGameMenu .game-poster:disabled .poster-description { visibility: hidden; }
  #zineGameMenu .gallery-feature {
    width: min(100%, calc(100svh - 330px), 610px);
    max-width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    justify-self: end;
    display: grid;
    grid-template-rows: auto 58px;
    padding: 13px 13px 0;
    transform: rotate(1deg);
  }
  #zineGameMenu .gallery-feature-art { position: relative; inset: auto; grid-area: 1 / 1; width: 100%; aspect-ratio: 1; }
  #zineGameMenu .gallery-feature-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  #zineGameMenu .gallery-caption {
    position: relative;
    inset: auto;
    z-index: 1;
    grid-area: 2 / 1;
    height: auto;
    padding: 8px 10px 12px;
    display: grid; place-items: center;
    font-size: 22px; line-height: 1.15;
  }
  #zineGameMenu #galleryFeatureFormat { font: 400 clamp(20px, 1.55vw, 23px)/1.15 var(--print-face); }
  #zineGameMenu .gallery-feature-stock {
    /* Original photo card stays a single material; low outer catchlight,
       not another framed UI panel or a filter over the illustration. */
    box-shadow: inset 1px 1px 0 #fff7;
  }
  #zineGameMenu .gallery-footer { min-height: 48px; padding: 0; }
}
@media (min-width: 1000px) and (min-height: 561px) and (max-height: 800px) {
  #zineGameMenu .gallery-inner { grid-template-rows: 94px minmax(0, 1fr) 46px; gap: 20px; padding-block: 20px 24px; }
  #zineGameMenu .gallery-games { gap: 10px; }
  #zineGameMenu .game-poster { padding-block: 5px; }
  #zineGameMenu .poster-copy { gap: 1px; }
  #zineGameMenu .game-poster .poster-name { font-size: 27px; }
  #zineGameMenu .game-poster-royale .poster-name { font-size: 25px; }
  #zineGameMenu .game-poster .poster-description { font-size: 18px; }
  #zineGameMenu .gallery-feature { width: min(100%, calc(100svh - 270px), 610px); }
}
@media (max-width: 999px), (max-height: 560px) {
  #zineGameMenu .gallery-inner { padding-bottom: 28px; }
  #zineGameMenu .gallery-games { grid-template-columns: 1fr; gap: 16px; }
  #zineGameMenu .game-poster {
    min-height: 120px;
    padding: 15px 18px 15px 12px;
    grid-template-columns: 80px minmax(0, 1fr) 20px;
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 14px;
    row-gap: 5px;
  }
  #zineGameMenu .poster-stock::before { mask: none; }
  #zineGameMenu[data-menu-material="ready"] .game-poster .poster-name { mask: none; }
  #zineGameMenu .game-poster::after { display: none; }
  #zineGameMenu .poster-copy { grid-area: 1 / 2 / 3; align-self: center; transform: translateY(2px); }
  #zineGameMenu .game-poster .poster-art {
    display: block; grid-area: 1 / 1 / 3; width: 80px; height: 80px;
    min-height: 0; margin: 0; align-self: center;
    background-position: center; background-size: contain; background-repeat: no-repeat;
  }
  #zineGameMenu .game-poster .poster-art > * { display: none; }
  #zineGameMenu .game-poster-words .poster-art { background-image: url("assets/nachtzine/menu-edition-2026-09-23/words-v2.webp"); }
  #zineGameMenu .game-poster-royale .poster-art { background-image: url("assets/nachtzine/all-assets-2026-09-13/royale/royale-gallery-v2.webp"); }
  #zineGameMenu .game-poster-story .poster-art { background-image: url("assets/nachtzine/all-assets-2026-09-13/story-post/story-gallery-matte-v1.webp"); }
  #zineGameMenu .game-poster-case .poster-art { background-image: url("assets/nachtzine/asset-direction-2026-09-13/case-gallery-v2.webp"); }
  #zineGameMenu .game-poster-echo .poster-art { background-image: url("assets/nachtzine/menu-edition-2026-09-23/echo-v2.webp"); }
  #zineGameMenu .game-poster .poster-name {
    display: block; grid-area: 1 / 2; min-height: 0; padding: 0;
    font-size: 27px; line-height: 1.02; white-space: normal;
  }
  #zineGameMenu .poster-name > span { display: inline; }
  #zineGameMenu .poster-name br { display: none; }
  #zineGameMenu .game-poster .poster-description {
    grid-area: 2 / 2; font-size: 18px; line-height: 1.15; max-width: none; mask: none;
  }
  #zineGameMenu .game-poster .poster-format,
  #zineGameMenu .game-poster:not(:disabled) .poster-select > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0;
  }
  #zineGameMenu .game-poster .poster-select {
    grid-area: 1 / 3 / 3; align-self: center;
    background: none; color: var(--menu-paper); clip-path: none; padding: 0;
  }
  #zineGameMenu .game-poster[data-previewed="true"] { outline: 2px solid var(--menu-paper); outline-offset: 2px; }
  #zineGameMenu #zineUtilities { gap: 12px; }
  html #zineGameMenu #zineUtilities button { font-size: 18px; padding-inline: 14px; }
  #zineGameMenu .gallery-close { font-size: 18px; }
  #zineGameMenu .game-poster:disabled .poster-select { grid-area: 2 / 2 / 3 / 4; font-size: 18px; }
  #zineGameMenu .game-poster:disabled .poster-description { visibility: hidden; }
}
@media (min-width: 560px) and (max-height: 560px) {
  #zineGameMenu .gallery-heading { gap: 22px; }
  #zineGameMenu .gallery-brand { width: 200px; }
  #zineGameMenu .gallery-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #zineGameMenu .game-poster { grid-template-columns: 60px minmax(0, 1fr) 16px; column-gap: 10px; }
  #zineGameMenu .game-poster .poster-art { width: 60px; height: 60px; }
  #zineGameMenu .game-poster .poster-name { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  #zineGameMenu .game-poster,
  #zineGameMenu #zineUtilities button { transition: none; translate: none !important; }
}
@media (forced-colors: active) {
  #zineGameMenu .gallery-intro p { color: CanvasText; }
  html #zineGameMenu .game-poster,
  html #zineGameMenu .game-poster[data-previewed="true"]:not(:disabled) {
    color: ButtonText; background: ButtonFace; filter: none;
    transform: none; translate: none !important;
  }
  #zineGameMenu .game-poster::before,
  #zineGameMenu .game-poster::after,
  #zineGameMenu .poster-stock,
  #zineGameMenu #zineUtilities button::before { display: none; }
  #zineGameMenu .game-poster[data-previewed="true"] { outline: 3px solid Highlight; outline-offset: 3px; }
  #zineGameMenu .game-poster .poster-description { color: ButtonText; }
  #zineGameMenu[data-menu-material="ready"] .game-poster .poster-name { mask: none; }
  #zineGameMenu .game-poster .poster-select { color: ButtonText; }
  #zineGameMenu .game-poster:focus-visible { outline: 3px dashed Highlight; }
  html #zineGameMenu #zineUtilities button,
  html #zineGameMenu #zineUtilities button:is(:hover, :focus-visible, :active) {
    background: ButtonFace; color: ButtonText; border: 2px solid ButtonText;
    filter: none; translate: none;
  }
}