@font-face {
  font-family: Bitter;
  src: url('/assets/fonts/bitter-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Bitter;
  src: url('/assets/fonts/bitter-bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
/* Northern lights behind every dark page (not the parchment .book pages). */
body:not(.book)::before, body:not(.book)::after { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none; }
body:not(.book)::before { background:
    radial-gradient(40% 22% at 22% 18%, #1bff9c5c, transparent 70%),
    radial-gradient(34% 18% at 62% 12%, #20d8ff4a, transparent 70%),
    radial-gradient(30% 20% at 85% 26%, #9a5bff4a, transparent 70%),
    radial-gradient(45% 16% at 40% 34%, #3dff7a38, transparent 72%);
  filter: blur(24px); animation: aurora-drift 26s ease-in-out infinite alternate; }
body:not(.book)::after { background: linear-gradient(172deg, transparent 18%, #2bffb024 30%, #6a7dff20 40%, transparent 55%), radial-gradient(70% 45% at 50% 115%, #0b1830aa, transparent);
  animation: aurora-sway 18s ease-in-out infinite alternate; }
@keyframes aurora-drift {
  0% { transform: translate3d(-4%, 0, 0) skewX(-6deg); opacity: .75; }
  50% { transform: translate3d(3%, 2%, 0) skewX(4deg); opacity: 1; }
  100% { transform: translate3d(5%, -1%, 0) skewX(-3deg); opacity: .8; filter: blur(24px) hue-rotate(35deg); }
}
@keyframes aurora-sway { from { transform: translateX(-6%) rotate(-2deg); } to { transform: translateX(6%) rotate(2deg); } }
:root { color-scheme: dark; --night: #04070e; --cyan: #33e9ff; --rim: #2a3a5c; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--night); color: #e5edf8; font-family: Bitter, serif; line-height: 1.65; }
a { color: inherit; text-underline-offset: .25em; }
a:hover { color: var(--cyan); }
a:focus-visible, video:focus-visible { outline: 3px solid var(--cyan); outline-offset: 6px; }
img, svg, video { display: block; max-width: 100%; }
h1, h2, p { margin-top: 0; }
h1, h2 { line-height: 1.15; }
.site-nav { position: sticky; top: 0; z-index: 10; margin: 0; padding: calc(16px + env(safe-area-inset-top, 0px)) max(30px, calc((100% - 1060px) / 2)) 16px; background: #04070ecc; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid #ffffff0f; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: .85rem; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: .13em; }
.brand img { width: 32px; height: 32px; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { text-decoration: none; }
.nav-links a[aria-current='page'] { text-decoration: underline; }
.site-footer { padding: 34px 20px; text-align: center; font-size: .74rem; color: #a6b4cb; }
.site-footer p { margin: 0; }
.site-footer p + p { margin-top: 7px; font-size: .7rem; }
.home { max-width: 940px; margin: 0 auto; padding: 12px 24px 24px; text-align: center; }
/* Four jigsaw pieces of the K tile, stacked on one viewBox; each flies in
   from its own corner and locks. */
html, body { overflow-x: clip; }
.hero-pieces { position: relative; width: clamp(96px, 20vmin, 156px); aspect-ratio: 1; margin: 30px auto 30px; }
.piece { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.home h1 { font-size: 1.25rem; letter-spacing: .24em; margin-bottom: 10px; }
.tagline { color: #b9c8dd; font-size: clamp(1.15rem, 4.4vw, 1.6rem); line-height: 1.35; max-width: 22em; margin: 0 auto 42px; text-wrap: balance; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .tagline { background: linear-gradient(100deg, #7df3ff, #ff7ae9, #ffe27a, #a8ff70, #c79bff, #ffa35c, #7df3ff) 0 50% / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: tagline-flow 14s linear infinite; }
}
@keyframes tagline-flow { to { background-position: 150% 50%; } }
/* Both YOUs run the same keyframes on the same clock, so they always match. */
.tagline .you { color: #ffd84d; font-weight: 700; letter-spacing: .04em; text-shadow: 0 0 14px currentColor; animation: you-glow 9s linear infinite; }
@keyframes you-glow {
  0%, 100% { color: #ffd84d; }
  16.7% { color: #33e9ff; }
  33.3% { color: #ff44e0; }
  50% { color: #8cff3f; }
  66.7% { color: #ff7a1a; }
  83.3% { color: #b26bff; }
}
.eyebrow { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
.game-card { position: relative; display: grid; grid-template-columns: 132px 1fr auto; align-items: center; gap: 28px; max-width: 740px; padding: 26px; margin: auto; border: 1px solid #c9a24a; border-radius: 16px; background: radial-gradient(120% 140% at 0% 0%, #2a2614 0%, transparent 45%), linear-gradient(120deg, #162039, #0d1426); text-align: left; text-decoration: none; box-shadow: 0 0 0 1px #ffd84d22, 0 0 18px #ffc94a40, 0 0 46px #ffb83020, inset 0 0 22px #ffd84d14; animation: gold-glow 5s ease-in-out infinite; transition: transform .25s ease; }
.game-card::before { content: ""; position: absolute; inset: 5px; border: 1px solid #ffd84d2e; border-radius: 12px; pointer-events: none; }
.game-card:hover { border-color: #ffd84d; color: inherit; transform: translateY(-2px); }
@keyframes gold-glow {
  0%, 100% { box-shadow: 0 0 0 1px #ffd84d22, 0 0 16px #ffc94a38, 0 0 40px #ffb8301a, inset 0 0 20px #ffd84d10; }
  50% { box-shadow: 0 0 0 1px #ffd84d55, 0 0 26px #ffc94a70, 0 0 70px #ffb83036, inset 0 0 28px #ffd84d22; }
}
/* The preview is a closed foldable's cover screen: IMAX-like 1 : 1.43, upright.
   Hinge on the left (straight edge, tight corners), rounded corners only on the
   opening side. Titanium frame, black bezel, camera pill, side buttons. */
.card-art { position: relative; display: block; width: 126px; aspect-ratio: 1 / 1.43; padding: 5px 5px 5px 7px; border-radius: 5px 24px 24px 5px;
  background: linear-gradient(90deg, #b3afa9 0, #55534f 2px, #8d8a86 4px, transparent 7px), linear-gradient(145deg, #8d8a86, #3b3a3f 38%, #1c1c21 60%, #6c6a68); box-shadow: 0 0 0 1px #00000080, 0 10px 24px #0009, 0 0 14px #ffc94a30; }
.card-art::before { content: ""; position: absolute; right: -2px; top: 24%; width: 2px; height: 16px; border-radius: 0 1px 1px 0;
  background: linear-gradient(#77746f, #3b3a3f); box-shadow: 0 22px 0 #4c4a48; }
.card-art::after { content: ""; position: absolute; z-index: 2; top: 12px; left: 50%; width: 30px; height: 9px; transform: translateX(-50%);
  border-radius: 9px; background: #050507; box-shadow: inset 6px 0 0 -3px #1a2236; }
.card-art .screen { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 2px 19px 19px 2px; background: #050507;
  box-shadow: inset 0 0 0 2px #050507; perspective: 420px; }
.card-art .screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(125deg, #ffffff18 0%, transparent 32%); }
.card-art .shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform-origin: left center; backface-visibility: hidden; animation: shot-cycle 24s ease-in-out infinite; }
.card-art .shot-1 { object-position: 50% 45%; opacity: 1; animation-delay: -1s; }
.card-art .shot-2 { object-position: 50% 42%; animation-delay: 3s; }
.card-art .shot-3 { object-position: 82% 40%; animation-delay: 7s; }
.card-art .shot-4 { object-position: 50% 55%; animation-delay: 11s; }
.card-art .shot-5 { object-position: 50% 28%; animation-delay: 15s; }
.card-art .shot-6 { object-position: 50% 44%; animation-delay: 19s; }
/* Page turn: each shot shows for 4s (1/6 of the 24s loop), then lifts from
   its right edge and turns over the hinge side, uncovering the next shot that
   already sits beneath it. z-index steps keep the turning page on top. */
@keyframes shot-cycle {
  0% { opacity: 1; z-index: 1; transform: rotateY(0); filter: brightness(1); }
  5% { z-index: 2; }
  16.7% { transform: rotateY(0); filter: brightness(1); animation-timing-function: cubic-bezier(.45, 0, .7, .4); }
  21.7% { opacity: 1; z-index: 2; transform: rotateY(100deg); filter: brightness(.5); }
  21.8%, 100% { opacity: 0; z-index: 0; transform: rotateY(0); }
}
.game-card h2 { color: #ffd84d; font-size: clamp(1.25rem, 4vw, 1.7rem); margin: 6px 0 12px; }
.game-card p { font-size: .86rem; color: #b9c8dd; margin-bottom: 0; }
.game-card .eyebrow { color: #8cff3f; font-size: .65rem; }
.card-arrow { color: #ffd84d; font-size: 1.8rem; }
.workshop { color: #a6b4cb; font-size: .85rem; margin: 28px 0 10px; }
/* The geometry is copied, not redrawn. Animate both the tube and its glow.
   Long, independent cycles keep brief dim-flickers irregular and below 3 Hz. */
/* Each brick flies in from its own screen corner, overshoots a touch and
   locks; the last one lands at ~1.5s with a flash. Then the tubes start
   their long, independent flicker cycles (all below 3 Hz) and keep going. */
.piece-a { --fx: -62vw; --fy: -58vh; --fr: -28deg; animation: fly-in 1.05s cubic-bezier(.18, .9, .32, 1.12) .05s both; }
.piece-b { --fx: 62vw; --fy: -58vh; --fr: 24deg; animation: fly-in 1.05s cubic-bezier(.18, .9, .32, 1.12) .2s both; }
.piece-c { --fx: -62vw; --fy: 42vh; --fr: 22deg; animation: fly-in 1.05s cubic-bezier(.18, .9, .32, 1.12) .35s both; }
.piece-d { --fx: 62vw; --fy: 42vh; --fr: -26deg; animation: fly-in 1.05s cubic-bezier(.18, .9, .32, 1.12) .5s both; }
.hero-pieces { animation: lock-flash .5s ease-out 1.5s both; }
.piece .brick-a { animation: tube-a 13.7s linear 2.4s infinite; }
.piece .brick-b { animation: tube-b 17.3s linear 1.9s infinite; }
.piece .brick-c { animation: tube-c 19.1s linear 2.1s infinite; }
.piece .brick-d { animation: tube-d 23.9s linear 2.6s infinite; }
@keyframes fly-in {
  from { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.55); opacity: 0; }
  12% { opacity: 1; }
  to { transform: none; opacity: 1; }
}
@keyframes lock-flash { 0% { filter: brightness(1); } 35% { filter: brightness(1.9) drop-shadow(0 0 18px #fff8); } 100% { filter: brightness(1); } }
@keyframes tube-a { 0%, 42%, 49%, 100% { opacity: 1; } 43%, 46% { opacity: .4; } 44.5%, 47.5% { opacity: .85; } }
@keyframes tube-b { 0%, 65%, 74%, 100% { opacity: 1; } 66%, 70% { opacity: .3; } 68%, 72% { opacity: .8; } }
@keyframes tube-c { 0%, 21%, 30%, 100% { opacity: 1; } 22%, 26% { opacity: .45; } 24%, 28% { opacity: .85; } }
@keyframes tube-d { 0%, 81%, 89%, 100% { opacity: 1; } 82%, 86% { opacity: .35; } 84%, 88% { opacity: .9; } }
/* The book palette, paper and ornaments follow trailer-v2/tools/book.py. */
.book { color-scheme: light; --ink: #342416; --red: #7a1e18; --grey: #766858; background: #221b16; color: var(--ink); }
.book .site-nav, .book .site-footer { color: #dfd0b4; }
.book .site-nav { background: #221b16d9; border-bottom-color: #dfd0b41a; }
.book a:hover { color: #d9a168; }
.book a:focus-visible, .book video:focus-visible { outline-color: #7a1e18; }
.paper { position: relative; max-width: 1060px; margin: 4px auto 20px; padding: 58px 62px 44px; background: linear-gradient(90deg, #34241645, transparent 8%, transparent 92%, #34241645), linear-gradient(#34241622, transparent 90px, transparent calc(100% - 90px), #34241622), #ecdec0 url('/assets/images/paper.jpg') center / 960px 960px; border: 2px solid var(--ink); outline: 1px solid #baa379; box-shadow: 0 14px 60px #0006; }
.paper::before { content: ''; position: absolute; inset: 13px; border: 1px solid var(--ink); pointer-events: none; }
.corner { position: absolute; width: 25px; height: 25px; border: 3px double var(--ink); border-radius: 0 0 90% 0; top: 13px; left: 13px; pointer-events: none; }
.corner::after { content: '◆'; position: absolute; font-size: 9px; top: 5px; left: 5px; line-height: 1; }
.corner.tr { left: auto; right: 13px; transform: rotate(90deg); }
.corner.bl { top: auto; bottom: 13px; transform: rotate(-90deg); }
.corner.br { top: auto; left: auto; right: 13px; bottom: 13px; transform: rotate(180deg); }
/* Release stamp: gold on the dark card, red ink on the paper page. */
.stamp { --stamp: #ffd84d; position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 112px; aspect-ratio: 1; border: 3px solid var(--stamp); border-radius: 50%; outline: 1.5px solid var(--stamp); outline-offset: -9px; color: var(--stamp); font-family: Bitter, serif; text-transform: uppercase; line-height: 1; pointer-events: none;
  -webkit-mask: url('/assets/images/stamp-grain.png') center / 128px; mask: url('/assets/images/stamp-grain.png') center / 128px;
  transform: rotate(-14deg); animation: stamp-in .55s cubic-bezier(.2, .9, .3, 1.25) .9s both, stamp-swing 3s ease-in-out 3.5s infinite; }
.stamp-top, .stamp-year { font-size: .58rem; font-weight: 700; letter-spacing: .26em; }
.stamp-main { font-size: .8rem; font-weight: 800; letter-spacing: .04em; margin: 6px 0 5px; padding: 3px 4px; border-block: 1.5px solid var(--stamp); }
.stamp-year { font-size: .82rem; letter-spacing: .3em; }
.game-card .stamp { top: -30px; right: -22px; filter: drop-shadow(0 0 6px #ffc94a80); background: radial-gradient(circle, #0d1426f0 60%, #0d142600 72%); }
.stamp-ink { --stamp: #9e2a20; top: 46px; right: 56px; width: 124px; mix-blend-mode: multiply; transform: rotate(12deg); --rot: 12deg; }
/* Every 3s the stamp swings 30deg and back over 0.5s (the last sixth of the
   cycle), after it has landed. Listed after stamp-in, so it wins while active. */
@keyframes stamp-swing {
  0%, 83.3% { transform: rotate(var(--rot, -14deg)); }
  91.7% { transform: rotate(calc(var(--rot, -14deg) + 30deg)); }
  100% { transform: rotate(var(--rot, -14deg)); }
}
@keyframes stamp-in {
  0% { opacity: 0; transform: rotate(var(--rot, -14deg)) scale(2.2); }
  70% { opacity: 1; transform: rotate(var(--rot, -14deg)) scale(.94); }
  100% { opacity: .92; transform: rotate(var(--rot, -14deg)) scale(1); }
}
.book-title { text-align: center; margin-bottom: 34px; }
.book-title .eyebrow { color: var(--grey); margin-bottom: 26px; }
.book-title h1 { color: var(--red); font-size: clamp(2.5rem, 6.7vw, 4.8rem); margin-bottom: 20px; }
.book-title h1 span { display: block; }
.book-title h1 .title-on { font-size: .48em; color: var(--ink); margin: 8px 0; }
.book-subtitle { font-size: clamp(1rem, 3.7vw, 1.5rem); margin-bottom: 8px; animation: title-reveal .9s ease-out .2s both; }
.book-audience { color: var(--grey); font-size: 1rem; animation: title-reveal .9s ease-out .65s both; }
@keyframes title-reveal { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.fleuron { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 25px auto; }
.fleuron::before, .fleuron::after { content: ''; width: 90px; height: 1px; background: var(--ink); }
.fleuron img { width: 38px; height: 38px; }
.trailer-plate { max-width: 820px; margin: 0 auto 40px; padding: 6px; border: 3px double var(--ink); box-shadow: 5px 9px 18px #34241630; }
.trailer { width: 100%; background: #211c16; aspect-ratio: 16 / 9; }
.trailer-portrait { display: none; }
.trailer-caption { text-align: center; font-size: .73rem; color: var(--grey); margin: 10px 0 4px; }
.story { max-width: 670px; margin: auto; text-align: center; }
.story h2, .gallery-heading { color: var(--red); font-size: 1.65rem; margin-bottom: 22px; }
.story p { font-size: 1.04rem; }
.story .puzzles { color: var(--grey); font-size: .94rem; }
.release { margin: 30px 0 42px; padding: 24px 12px; border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); }
.release .price { color: var(--red); font-size: 1.08rem; font-weight: 700; margin-bottom: 8px; }
.release p:last-child { font-size: .87rem; margin-bottom: 0; color: var(--grey); }
.gallery-heading { text-align: center; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 20px; margin-top: 30px; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; border: 3px double var(--ink); padding: 4px; background: #ecdec0; box-shadow: 3px 6px 12px #34241620; }
.gallery figcaption { font-size: .75rem; text-align: center; padding: 12px 4px 0; color: var(--grey); }
.gallery figcaption span { display: block; font-size: .65rem; margin-top: 2px; }
.gallery-note { text-align: center; margin: 26px 0 0; color: var(--grey); font-size: .78rem; }
.placeholder { max-width: 760px; min-height: 500px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.placeholder h1 { font-size: clamp(2rem, 6vw, 3rem); color: var(--red); }
.placeholder .lead { font-size: 1.1rem; }
.placeholder .quiet { color: var(--grey); }
.placeholder a { color: var(--red); }
.legal { max-width: 820px; }
.legal .eyebrow { color: var(--grey); text-align: center; margin-bottom: 14px; }
.legal h1 { color: var(--red); text-align: center; font-size: clamp(2.2rem, 6vw, 3.2rem); margin-bottom: 6px; }
.legal .updated { text-align: center; color: var(--grey); font-size: .8rem; margin-bottom: 34px; }
.legal h2 { color: var(--red); font-size: 1.15rem; margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid #34241633; }
.legal p { font-size: .95rem; }
.legal a { color: var(--red); }
.site-footer a { color: inherit; }
.not-found { max-width: 670px; min-height: 60vh; margin: auto; padding: 90px 24px; text-align: center; }
.not-found h1 { color: #ffd84d; font-size: 3rem; }
@media (max-width: 700px) {
  .site-nav { padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 14px; gap: 12px; }
  .nav-links { gap: 16px; font-size: .75rem; }
  .brand { font-size: .75rem; gap: 7px; }
  .brand img { width: 27px; height: 27px; }
  .home { padding: 24px 20px 12px; }
  .hero-pieces { margin: 18px auto 22px; }
  .tagline { margin-bottom: 34px; }
  .game-card { grid-template-columns: 80px 1fr; padding: 20px 16px; gap: 16px; }
  .card-art { width: 80px; padding: 3.5px 3.5px 3.5px 5px; border-radius: 4px 16px 16px 4px; }
  .card-art .screen { border-radius: 2px 13px 13px 2px; }
  .card-art::after { top: 8px; width: 20px; height: 6px; }
  .card-art::before { right: -1.5px; width: 1.5px; height: 10px; box-shadow: 0 14px 0 #4c4a48; }
  .card-arrow { display: none; }
  .game-card h2 { font-size: 1.18rem; }
  .game-card p { font-size: .77rem; }
  .game-card .eyebrow { font-size: .55rem; letter-spacing: .12em; }
  .stamp { width: 82px; outline-offset: -7px; border-width: 2.5px; }
  .stamp-top { font-size: .45rem; } .stamp-main { font-size: .58rem; margin: 4px 0 3px; } .stamp-year { font-size: .6rem; }
  .game-card .stamp { top: -26px; right: -8px; }
  .stamp-ink { top: 22px; right: 18px; width: 82px; }
  .paper { margin: 0 10px 10px; padding: 42px 24px 32px; }
  .paper::before { inset: 9px; }
  .corner { top: 9px; left: 9px; width: 19px; height: 19px; }
  .corner.tr, .corner.br { right: 9px; }
  .corner.bl, .corner.br { bottom: 9px; }
  .book-title .eyebrow { font-size: .6rem; margin-bottom: 24px; }
  .book-title h1 { font-size: clamp(2rem, 10vw, 3.6rem); }
  .book-audience { font-size: .88rem; }
  .fleuron { gap: 14px; margin: 20px 0; }
  .fleuron::before, .fleuron::after { width: 60px; }
  .trailer-landscape { display: none; }
  .trailer-portrait { display: block; aspect-ratio: 9 / 16; }
  .trailer-plate { max-width: 380px; }
  .story h2 { font-size: 1.5rem; }
  .story p { font-size: .95rem; }
  .release .price { font-size: .92rem; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  .gallery figcaption { font-size: .65rem; }
  .gallery figure:last-child { grid-column: 1 / -1; width: calc(50% - 6px); justify-self: center; }
  .placeholder { min-height: 540px; padding: 60px 30px; }
  .site-footer { padding: 28px 16px; font-size: .66rem; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .piece, .hero-pieces, .tagline, .tagline .you, .game-card, .card-art .shot, .stamp { animation: none; }
  .card-art .shot:not(.shot-1) { display: none; }
  .piece .brick-a, .piece .brick-b, .piece .brick-c, .piece .brick-d { animation: none; opacity: 1; }
  .book-subtitle, .book-audience { animation: none; opacity: 1; transform: none; }
}