/* Table Cat. A cheap 1997 game: chunky type, hard shadows, steps instead of glides. */
@font-face { font-family: "Bungee"; src: url(/fonts/bungee-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pixelify Sans"; font-weight: 400; src: url(/fonts/pixelify-sans-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pixelify Sans"; font-weight: 700; src: url(/fonts/pixelify-sans-latin-700-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; src: url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-display: swap; }
:root {
  --bg: #bfe9d9; --ink: #2b1b12; --accent: #ffd21f; --red: #d9342b; --cream: #fff4dc;
  --font-display: "Bungee", Impact, sans-serif;
  --font-body: "Pixelify Sans", system-ui, sans-serif;
  --container: min(1500px, 100% - 2 * var(--s4));
  --hard: 3px 3px 0 #2b1b12;
}
html { scroll-behavior: auto; overflow-x: clip; }
body { background: #bfe9d9 url(/img/tex/floor.webp) 0 0 / 256px; image-rendering: pixelated; overflow-x: clip; }
img { image-rendering: auto; }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; display: block; image-rendering: pixelated; z-index: 0; }
.no-gl .hero { background: url(/img/ui/fallback.webp) center / cover; }
.no-gl #things, .no-gl .hint { display: none; }
#things { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
#things button { all: unset; position: absolute; left: 0; top: 0; pointer-events: auto; cursor: grab; touch-action: none; border-radius: 8px; }
#things button:active, #things button.held { cursor: grabbing; }
#things button[hidden] { display: none; }
#things button:focus-visible { outline: 4px solid var(--accent); outline-offset: 0; box-shadow: 0 0 0 4px var(--ink); }
#things #poke { cursor: pointer; touch-action: pan-y; }
main { position: relative; z-index: 2; pointer-events: none; }
main a, main button, .win, .lore, .floor-head { pointer-events: auto; }

/* ---------- first screen ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; }
.logo-row { position: absolute; left: clamp(16px, 3vw, 64px); top: clamp(6px, 1.5vh, 24px); width: min(32vw, 58vh); }
.logo { width: 100%; height: auto; filter: drop-shadow(0 6px 0 rgba(43,27,18,.28)); }
.ticker { position: absolute; left: 100%; top: 44%; margin: 0 0 0 .3em; font: 400 clamp(26px, 3.1vw, 62px)/1 var(--font-display); color: var(--accent); text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); }
.line { margin: .1em 0 0 .25em; font: 700 clamp(18px, 1.75vw, 34px)/1.15 var(--font-body); color: var(--ink); white-space: nowrap; }
.hint { position: absolute; right: 1.5vw; top: 53vh; width: 33vw; margin: 0; text-align: center; font: 400 clamp(22px, 2.2vw, 42px)/1 var(--font-display); color: var(--cream); text-shadow: var(--hard), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); pointer-events: none; animation: hintbob 1s steps(2) infinite; transition: opacity .2s; }
.played .hint, .intro .hint { opacity: 0; }
@keyframes hintbob { 50% { transform: translateY(-8px); } }

/* the contract window: the picture and its overlays share one box */
.win { --w: min(25vw, 44vh); position: absolute; left: clamp(16px, 4vw, 90px); bottom: 31.5vh; bottom: 31.5svh; width: var(--w); aspect-ratio: 1 / 1.02; background: url(/img/ui/window.webp) center / 100% 100% no-repeat; color: var(--ink); container-type: inline-size; }
.pane { position: absolute; left: 21%; right: 21%; top: 14%; height: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; text-align: center; }
.pane-label { margin: 0; font: 400 clamp(16px, 5.4cqw, 34px)/1 var(--font-display); color: var(--ink); }
[data-ca] { display: block; width: 100%; font: 500 clamp(16px, 4cqw, 22px)/1.25 "JetBrains Mono", monospace; color: var(--ink) !important; overflow-wrap: anywhere; opacity: 1 !important; }
.sill { position: absolute; left: 5%; right: 5%; top: 67.5%; bottom: 2.5%; display: flex; flex-direction: column; justify-content: center; gap: 2.2cqw; }
.sill-row { display: flex; gap: 2.2cqw; }
.sill-row > .btn { flex: 1 1 0; min-width: 0; padding-inline: .3em; }

.btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 48px; padding: .3em .9em; text-align: center; cursor: pointer; font: 700 clamp(16px, 4.4cqw, 26px)/1 var(--font-body); color: var(--ink); background: center / 100% 100% no-repeat; transition: transform .6s cubic-bezier(.2,.9,.3,1); }
.btn img { width: 1.1em; height: 1.1em; flex: none; }
.btn:hover { transform: translateY(-2px); transition-duration: .25s; }
.btn:active { transform: translateY(3px) scale(.98); transition-duration: .035s; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.btn-yellow { background-image: url(/img/ui/btn-yellow.webp); font-size: clamp(17px, 5.1cqw, 30px); min-height: clamp(48px, 13cqw, 84px); }
.btn-yellow img { width: 1.3em; height: 1.3em; }
.btn-grey { background-image: url(/img/ui/btn-grey.webp); }
.btn-copy { min-height: 48px; min-width: 44%; flex: none; }
.is-off.btn { opacity: 1 !important; filter: saturate(.8); cursor: not-allowed; }

/* game-over style shout when something lands */
.ko { position: fixed; left: 0; right: 0; top: 16vh; text-align: center; padding: 0 16px; font: 400 clamp(46px, 10.5vw, 190px)/.95 var(--font-display); color: var(--accent); text-shadow: 6px 6px 0 var(--red), 12px 12px 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink); pointer-events: none; opacity: 0; z-index: 5; }
.ko.on { animation: ko 1.15s steps(1) both; }
@keyframes ko { 0% { opacity: 1; transform: scale(1.9); } 7% { transform: scale(1.3); } 14% { transform: scale(.94); } 21%, 82% { opacity: 1; transform: scale(1); } 90% { opacity: .5; transform: scale(1); } 100% { opacity: 0; } }

/* the first three seconds */
.intro .logo-row, .intro .win { visibility: hidden; }
.landed .logo-row { animation: slam .5s steps(5) both; }
.landed .win { animation: slam .5s .08s steps(5) both; }
@keyframes slam { 0% { transform: translateY(-110vh); } 60% { transform: translateY(0); } 70% { transform: translateY(0) scale(1.03, .94); } 85% { transform: translateY(-14px); } 100% { transform: none; } }

/* ---------- the floor ---------- */
.floor { position: relative; padding: var(--s6) 0 var(--s7); }
.floor-head { width: var(--container); margin: 0 auto var(--s5); text-align: center; font: 400 clamp(38px, 7vw, 120px)/1 var(--font-display); color: var(--accent); text-shadow: 4px 4px 0 var(--red), 8px 8px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); }
.prints { width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 44px); }
.print { all: unset; box-sizing: border-box; display: block; cursor: zoom-in; pointer-events: auto; padding: 5.5% 5.5% 0; background: url(/img/ui/print.webp) center / 100% 100% no-repeat; color: var(--ink); transition: transform .25s cubic-bezier(.2,1.4,.4,1); }
.print:nth-child(4n+1) { transform: rotate(-2deg); } .print:nth-child(4n+2) { transform: rotate(1.4deg) translateY(10px); } .print:nth-child(4n+3) { transform: rotate(-1deg); } .print:nth-child(4n+4) { transform: rotate(2.2deg) translateY(-6px); }
.print:hover, .print:focus-visible { transform: scale(1.05); }
.print:active { transform: scale(.98); transition-duration: .035s; }
.print:focus-visible { outline: 4px solid var(--accent); }
.print img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.print span { display: block; padding: .55em .1em .75em; text-align: center; font: 400 clamp(16px, 1.45vw, 26px)/1.05 var(--font-display); }
.lore { width: min(820px, 100% - 2 * var(--s3)); margin: var(--s6) auto 0; padding: clamp(36px, 6vw, 72px) clamp(32px, 7vw, 88px); background: url(/img/ui/plate.webp) center / 100% 100% no-repeat; color: var(--ink); text-align: center; }
.lore p { margin: 0; font: 400 clamp(24px, 3.2vw, 44px)/1.2 var(--font-display); }
.lore .risk { margin-top: var(--s3); font: 400 clamp(16px, 1.3vw, 20px)/1.35 var(--font-body); color: #6a5240; }

/* ---------- viewer ---------- */
#viewer { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); padding: var(--s2); background: rgba(217, 52, 43, .94); container-type: inline-size; }
#viewer[hidden] { display: none; }
#viewer figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s1); min-height: 0; }
#viewer-img { max-width: 100%; max-height: 74vh; width: auto; height: auto; border: 6px solid var(--ink); }
#viewer-cap { font: 400 clamp(26px, 5vw, 64px)/1 var(--font-display); color: var(--accent); text-shadow: 3px 3px 0 var(--ink); text-align: center; }
#viewer .viewer-row { display: flex; gap: var(--s1); width: min(760px, 100%); }
#viewer .btn { flex: 1 1 0; min-width: 0; font-size: clamp(16px, 2.4vw, 20px); min-height: 56px; padding-inline: .2em; }

/* ---------- phones: logo, shelf, window, then the cat in front ---------- */
@media (max-aspect-ratio: 105/100) {
  .logo-row { left: 3vw; top: 6px; width: min(66vw, 42vh); }
  .landed .logo-row { animation: none; }
  .ticker { font-size: clamp(17px, 5.6vw, 30px); top: 24%; margin-left: .2em; }
  .line { margin: 0 0 0 .3em; width: 92vw; white-space: normal; font-size: clamp(16px, 4.3vw, 20px); }
  .hint { display: none; }
  .win { --w: min(94vw, 460px); left: 50%; margin-left: calc(var(--w) / -2); bottom: auto; aspect-ratio: auto; height: 250px; }
  .pane { top: 12%; height: 45%; gap: 4px; left: 20%; right: 20%; }
  .pane-label { display: none; }
  .sill { top: 58%; bottom: 2%; gap: 2px; left: 4%; right: 4%; }
  .btn-copy { min-height: 40px; }
  .prints { grid-template-columns: repeat(2, 1fr); }
  .print span { font-size: 18px; }
  .ko { top: 34vh; }
}
@media (max-width: 560px) { .prints { grid-template-columns: 1fr; width: min(100% - 32px, 460px); gap: var(--s3); } .print span { font-size: 24px; } }
@media (max-aspect-ratio: 105/100) and (max-height: 620px) {
  .logo-row { width: min(56vw, 36vh); }
  .win { height: 240px; }
  .pane { gap: 2px; }
  .btn-copy { min-height: 40px; }
  .sill { top: 57%; bottom: 1%; }
}
@media (prefers-reduced-motion: reduce) { .hint { animation: none; } .intro .logo-row, .intro .win { visibility: visible; } }

/* ---------- 404 ---------- */
.lost { background: #bfe9d9 url(/img/ui/lost.webp) center / cover no-repeat fixed; min-height: 100vh; min-height: 100svh; }
.lost-main { pointer-events: auto; padding: clamp(16px, 5vw, 80px); max-width: 720px; container-type: inline-size; }
.lost h1 { margin: 0; font: 400 clamp(72px, 14vw, 200px)/1 var(--font-display); color: var(--accent); text-shadow: 5px 5px 0 var(--red), 10px 10px 0 var(--ink); }
.lost p { margin: var(--s2) 0 var(--s3); font: 700 clamp(22px, 3vw, 36px)/1.15 var(--font-body); color: var(--ink); }
.lost .btn { font-size: 22px; min-height: 60px; min-width: 280px; }