/* skcat: a black void, one fat cat on a board, one PUSH key, one spare deck with the contract. */
@font-face { font-family: "Rubik"; src: url("/fonts/rubik.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "VT323"; src: url("/fonts/vt323.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #000; --ink: #E3DDD3; --accent: #D23A2A;
  --muted: #8b857c; --lcd: #2A3320;
  --font-display: "Rubik", system-ui, sans-serif;
  --font-body: "Rubik", system-ui, sans-serif;
  --font-lcd: "VT323", ui-monospace, monospace;
  /* the 16:9 stage, fitted inside the window */
  --H: min(100svh, 56.25vw);
  --W: calc(var(--H) * 16 / 9);
  --press: 35ms; --settle: 600ms cubic-bezier(.2,.8,.2,1);
}
html, body { height: 100%; }
body { background: #000; overflow-x: hidden; font-weight: 500; }

/* ---------- the void ---------- */
.void { position: fixed; inset: 0; z-index: 0; background: #000; }
.void img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; animation: breathe 9s ease-in-out infinite alternate; }
.void .dust { position: absolute; inset: 0; width: 100%; height: 100%; }
@keyframes breathe { from { opacity: .78; } to { opacity: 1; } }

/* ---------- stage (desktop: one 16:9 screen) ---------- */
.stage { position: relative; z-index: 1; width: var(--W); height: var(--H); margin: calc((100svh - var(--H)) / 2) auto 0; }

.title { position: absolute; left: 4.5%; top: 6%; width: 30%; }
.wordmark { width: 100%; height: auto; animation: drop 900ms cubic-bezier(.2,.9,.3,1.15) both; }
.ticker { margin: calc(var(--H) * .012) 0 0 2%; font: 800 calc(var(--H) * .034)/1 var(--font-display); letter-spacing: .02em; color: var(--ink); }
.lore { margin: calc(var(--H) * .018) 0 0 2%; max-width: 26ch; font-size: max(17px, calc(var(--H) * .026)); line-height: 1.35; color: #b9b2a7; }
@keyframes drop { from { opacity: 0; transform: translateY(-30%); } to { opacity: 1; transform: none; } }

.ride { position: absolute; left: 22%; top: 12%; width: 40%; height: 86%; }
.track { position: absolute; left: 50%; bottom: 23%; width: calc(var(--H) * .46); transform: translateX(-50%); }
.rig { position: relative; width: 100%; aspect-ratio: 1 / 1.22; transform-origin: 50% 100%; }
.shadow { position: absolute; left: 6%; right: 6%; bottom: -3%; height: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.85), rgba(0,0,0,0)); }
.boardbox { position: absolute; left: 0; bottom: 0; width: 100%; aspect-ratio: 677 / 353; transform-origin: 50% 50%; }
.board { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.board.under { width: 118%; left: -9%; top: -22%; opacity: 0; }
.boardbox.flipped .board { opacity: 0; }
.boardbox.flipped .board.under { opacity: 1; }

.catbox { position: absolute; left: 22%; width: 58%; bottom: 25%; aspect-ratio: 570 / 877; transform-origin: 50% 100%; }
.catbox::after { content: none; }
.cat { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: auto; max-width: none; opacity: 0; }
.cat.stand { width: 100%; opacity: 1; animation: breath 3.8s ease-in-out infinite; transform-origin: 50% 100%; }
.cat.blink { width: 95.6%; }
.cat.air { width: 104%; bottom: 4%; }
.cat.fallen { width: 172%; bottom: -30%; left: 46%; }
@keyframes breath { 0%, 100% { transform: translateX(-50%) scale(1, 1); } 50% { transform: translateX(-50%) scale(1.012, 1.018); } }
.catbox[data-pose="blink"] .stand, .catbox[data-pose="air"] .stand, .catbox[data-pose="fallen"] .stand { opacity: 0; }
.catbox[data-pose="blink"] .blink, .catbox[data-pose="air"] .air, .catbox[data-pose="fallen"] .fallen { opacity: 1; }

.trick { position: absolute; left: 4.5%; width: 22%; top: 60%; margin: 0; text-align: left; pointer-events: none;
  font: 800 calc(var(--H) * .056)/1.05 var(--font-display); letter-spacing: .04em; color: var(--ink);
  opacity: 0; transform: translateY(12px); transition: opacity 250ms ease-out, transform 250ms ease-out; }
.trick.on { opacity: 1; transform: none; }
.trick.bail { color: #E8705A; }

.push { position: absolute; left: 50%; bottom: 1%; width: calc(var(--H) * .2); min-height: 0; padding: 0; border: 0; background: none;
  cursor: pointer; transform: translateX(-50%); -webkit-tap-highlight-color: transparent; }
.push img { width: 100%; height: auto; transition: transform var(--settle); filter: drop-shadow(0 14px 18px rgba(0,0,0,.7)); }
.push:hover img { transform: translateY(-3%) scale(1.03); transition: transform 250ms cubic-bezier(.3,1.6,.5,1); }
.push:active img, .push.down img { transform: translateY(5%) scale(.96, .9); transition: transform var(--press); }
.push:focus-visible { outline-offset: 6px; border-radius: 50%; }

/* ---------- the spare deck standing upright (overlays measured from deck.webp, 469x1644) ---------- */
.deck { --dh: clamp(600px, calc(var(--H) * .8), 880px);
  position: absolute; right: 11%; top: calc((100% - var(--dh)) / 2); height: var(--dh); aspect-ratio: 469 / 1644;
  container-type: inline-size; animation: rise 1100ms 250ms cubic-bezier(.2,.9,.3,1.1) both; }
.deck-body { width: 100%; height: auto; filter: drop-shadow(0 30px 30px rgba(0,0,0,.8)); }
@keyframes rise { from { opacity: 0; transform: translateY(6%) rotate(3deg); } to { opacity: 1; transform: none; } }
.sticker { position: absolute; left: 8.5%; width: 83.2%; color: #2B2730; }
.ca { top: 27.25%; height: 24.5%; padding: 7cqw 7cqw 8cqw; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
.ca-label { font: 800 max(16px, 7cqw)/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.ca code { font: max(16px, 8.4cqw)/1.05 var(--font-lcd); color: #1E1B20; }
.copy { min-height: 0; padding: .55em 1.3em; border: 0; border-radius: 999px; background: #2B2730; color: #E8E2D0;
  font: 800 max(16px, 6.4cqw)/1.2 var(--font-display); cursor: pointer; transition: transform var(--settle); }
.copy:hover { transform: translateY(-1px) scale(1.03); transition: transform 250ms cubic-bezier(.3,1.6,.5,1); }
.copy:active { transform: scale(.94); transition: transform var(--press); }
.key { display: flex; align-items: center; justify-content: center; gap: 2.5cqw; padding: 0 4cqw; text-decoration: none;
  font: 800 max(16px, 6.6cqw)/1 var(--font-display); border-radius: 6cqw; transition: transform var(--settle), filter 250ms ease-out; }
.key img { width: max(18px, 8cqw); height: auto; }
.key-1 { --kh: max(6.7%, 48px); top: calc(57.45% - var(--kh) / 2); height: var(--kh); }
.key-2 { --kh: max(6.9%, 48px); top: calc(66.45% - var(--kh) / 2); height: var(--kh); }
.key:hover { filter: brightness(1.1); transform: translateY(-1px); transition: transform 250ms cubic-bezier(.3,1.6,.5,1), filter 250ms; }
.key:active { transform: translateY(2px) scale(.97); transition: transform var(--press); }
.key.is-off { opacity: .55; }
.risk { position: absolute; left: -60%; right: -60%; top: 100%; margin: 4px 0 0; font-size: 16px; line-height: 1.35; color: var(--muted); text-align: center; }

/* ---------- phones and tall windows: one column ---------- */
@media (max-aspect-ratio: 5/4), (max-width: 760px) {
  .stage { width: 100%; height: auto; margin: 0; padding: 20px 16px 48px; display: flex; flex-direction: column; align-items: center; }
  .void { position: fixed; }
  .title { position: relative; left: auto; top: auto; width: min(86vw, 420px); text-align: center; }
  .ticker, .lore { margin-left: 0; }
  .ticker { font-size: 22px; margin-top: 6px; }
  .lore { margin: 8px auto 0; font-size: 16px; }
  .ride { position: relative; left: auto; top: auto; width: 100%; height: min(112vw, 520px); }
  .track { width: min(66vw, 320px); bottom: 27%; }
  .trick { position: relative; left: auto; top: auto; width: 100%; height: 34px; margin-top: 14px; text-align: center; font-size: 28px; }
  .push { width: min(33vw, 150px); bottom: 0; }
  .deck { position: relative; right: auto; top: auto; --dh: 720px; margin: 28px 0 0; }
  .risk { position: static; width: min(92vw, 400px); margin: 20px 0 0 50%; transform: translateX(-50%); }
}
@media (max-aspect-ratio: 5/4) and (min-width: 761px) {
  .ride { height: min(70vh, 640px); }
  .track { width: min(40vh, 360px); }
}