/* the game's page: one screen. no white: every light is a tinted neon or a steel grey (the studio's site, src/STYLE.md) */
@font-face { font-family: 'Silkscreen'; src: url('/assets/Silkscreen-Regular-latin.woff2') format('woff2'); font-display: swap; }
:root {
  color-scheme: dark;
  --night: #08070d;
  --text: #b3c0d6;
  --dim: #8592ab;
  --cyan: #38e6ff;
  --pink: #ff4fb8;
  --yellow: #ffd23f;
  --pixel: 'Silkscreen', ui-monospace, Menlo, Consolas, monospace;
  --fade: 1.4s;
  --gutter: clamp(16px, 4vw, 48px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--text); font: 16px/1.5 var(--pixel); }
.poster { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }

.stage { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--fade) ease; }
.slide.on { opacity: 1; }
.slide img, .slide canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.slide img.closeup { object-position: 59% 42%; } /* the figure's middle (the board's PAGE.hero) */
/* the name and the calls keep their ground over any picture */
.stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 70% at 0% 0%, rgba(8, 7, 13, 0.82), transparent 70%),
    linear-gradient(180deg, transparent 62%, rgba(8, 7, 13, 0.9) 100%);
}
.rain {
  position: absolute; inset: -20% -10%; pointer-events: none;
  background-image: repeating-linear-gradient(102deg, transparent 0 23px, rgba(150, 190, 255, 0.1) 23px 24px, transparent 24px 61px);
  background-size: 100% 140px;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 28px, transparent 28px 70px);
  mask-image: repeating-linear-gradient(180deg, #000 0 28px, transparent 28px 70px);
  animation: rain 0.9s linear infinite;
}
@keyframes rain { from { transform: translate3d(0, -140px, 0); } to { transform: translate3d(-24px, 0, 0); } }

.name { position: relative; margin: 0; padding: clamp(20px, 5vh, 56px) var(--gutter) 0; }
.name img { display: block; width: clamp(280px, 40vw, 620px); height: auto; }

.calls { position: relative; margin-top: auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.call {
  display: flex; align-items: center; justify-content: center; min-height: 68px; padding: 12px 16px; text-align: center;
  font-size: clamp(13px, 1.25vw, 17px); letter-spacing: 0.04em; text-decoration: none;
  border: 1px solid currentColor; background: rgba(8, 7, 13, 0.62);
}
.call.demo { color: var(--cyan); background: rgba(56, 230, 255, 0.14); box-shadow: 0 0 18px rgba(56, 230, 255, 0.35); transition: background 0.15s, box-shadow 0.15s; }
.call.demo:hover, .call.demo:focus-visible { background: rgba(56, 230, 255, 0.24); box-shadow: 0 0 28px rgba(56, 230, 255, 0.6); outline: none; }
.call.play { color: var(--pink); }
.call.steam { color: var(--yellow); border-style: dashed; }

.foot { position: relative; display: flex; justify-content: space-between; gap: 16px; padding: 14px var(--gutter) max(14px, env(safe-area-inset-bottom)); font-size: 12px; color: var(--dim); }
.foot a { color: inherit; }
.foot a:hover { color: var(--cyan); }

/* a phone held upright: the art on top, fading into the night; the name; the calls stacked in thumb's reach */
@media (max-width: 720px), (max-aspect-ratio: 4/5) {
  .stage { bottom: auto; height: 54svh; }
  .stage::after { background: linear-gradient(180deg, transparent 62%, var(--night) 100%); }
  .name { margin-top: 44svh; padding-top: 0; }
  .name img { width: 100%; max-width: 480px; margin: 0 auto; }
  .calls { grid-template-columns: 1fr; gap: 10px; padding-top: 16px; }
  .call { min-height: 54px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .rain { animation: none; } .slide { transition: none; } }