/* The approved hero, desktop poster and seven portrait panels. No runtime code. No accessibility affordances (owner 17.10.2026). */
:root { color-scheme: dark; --night: #06091b; --scene: url('assets/game-background.da2e11c41f8b.webp'); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: #fff; font-family: 'Nunito', sans-serif; -webkit-text-size-adjust: 100%; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
/* Approved campaign artwork. Its width/height relationship is never distorted or cropped. */
.campaign { background: #060b29 var(--scene) center / cover no-repeat; position: relative; }
.campaign-title { margin: 0; font-size: inherit; }
.campaign-link { display: block; position: relative; width: 100%; }   /* owner 15.10.2026: the hero is always 100 % of the page width, its height from the picture */
.campaign-picture, .campaign-picture img { display: block; width: 100%; height: auto; }
.campaign-link:hover { cursor: pointer; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.poster { display: block; width: 100%; margin: 0; padding: 0; }
.poster-panel { position: relative; margin: 0; padding: 0; isolation: isolate; }
.poster-art { position: relative; }
.poster-mobile { display: none; }
.poster-divider, .poster-divider img, .poster-picture, .poster-picture img { display: block; width: 100%; height: auto; }
/* Keep native geometry when a smaller encoded variant rounds its height. */
.poster-divider img { aspect-ratio: 1536 / 160; }
.poster-copy { position: absolute; inset: 0; pointer-events: none; }
.poster-text, .poster-footer-link { position: absolute; margin: 0; padding: 0; text-align: center; font-family: 'Nunito', sans-serif; font-style: normal; letter-spacing: 0; }
.poster-line { display: block; }   /* owner 16.10.2026 (devtools): white-space: nowrap removed — lines may wrap */
/* The game's Ink shadow stays crisp at large widths: cap its solid edge,
   while retaining the original soft shadow and the phone-size treatment. */
.poster-text, .poster-footer-link, .poster-legal, .poster-ink { text-shadow: max(-.065em, -1.25px) 0 #020412, min(.065em, 1.25px) 0 #020412, 0 max(-.065em, -1.25px) #020412, 0 min(.065em, 1.25px) #020412, max(-.045em, -1px) max(-.045em, -1px) #020412, min(.045em, 1px) max(-.045em, -1px) #020412, max(-.045em, -1px) min(.045em, 1px) #020412, min(.045em, 1px) min(.045em, 1px) #020412, 0 .08em .12em #020412, 0 0 .3em #020412; }
/* Black copy on the gold gift plate uses the soft Ink shadow without an extra outline. */
.poster-text[style*="color:#080a1b"] { text-shadow: 0 .05em .08em #020412; }
.poster-links { position: absolute; inset: 0; pointer-events: none; }
.poster-footer-link { z-index: 1; min-width: 44px; min-height: 44px; font-weight: 700; text-decoration: none; pointer-events: auto; }
.poster-footer-link:hover { text-decoration: underline; text-underline-offset: .18em; }
.poster-hotspot { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--w); height: var(--h); transform: translate(-50%, -50%); background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.poster-panel--footer { min-height: 190px; }
.poster-legal { position: absolute; top: 44%; left: 8%; width: 84%; color: #fff; text-align: center; font: 500 1.65vw/1.45 'Nunito', sans-serif; }
.poster-legal p { margin: 0; }
.poster-legal p + p { margin-top: 10px; }
@media (max-aspect-ratio: 1/1) {
  .poster-desktop { display: none; }
  .poster-mobile { display: block; }
  .poster-divider img { aspect-ratio: 1024 / 128; }
  .poster-legal { top: 66%; left: 9%; width: 82%; font-size: 3.9vw; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* owner 16.10.2026: the desktop divider is the owner's own Rainbow-Neon-Divider-Glow — 100 % of the page width, its vertical middle on the
   boundary between the hero and the next element; the generated flow divider is portrait-only */
.poster-divider { display: none; }
.poster-desktop { position: relative; }
.poster-divider-glow { display: block; position: absolute; left: 0; top: 0; width: 100%; height: auto; transform: translateY(-50%); pointer-events: none; z-index: 3; }
/* owner 16.10.2026: the portrait build carries the same Rainbow-Neon divider the same way (100 % wide, its middle on the hero's bottom edge) */
.poster-mobile { position: relative; }

/* owner 16.10.2026: the owner's own sticker pieces laid over a panel (the Neon-Different-Nights sticker left of CHOOSE YOUR VIBE) */
.poster-sticker { display: block; position: absolute; height: auto; pointer-events: none; z-index: 2; }
/* owner 16.10.2026: the game's own shop pieces laid over the START FREE strip as HTML images (under the text layers, above the painting) */
.poster-piece { display: block; position: absolute; height: auto; pointer-events: none; z-index: 0; }
/* plain black copy on a gold plate (BEST VALUE, owner 16.10.2026): no outline, no shadow */
.poster-text[style*="color:#000000"] { text-shadow: none; }