:root {
  --cream: #F3EBDD;
  --ink: #2E1A10;
  --muted: #7A6656;
  --paper: #FFFBF2;
  --bar: rgba(255, 251, 242, 0.72);
  --u: 10px;                     /* one cat pixel, set by site.js to an integer */
  --pixel: "Pixelify Sans", system-ui, sans-serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --bar-h: 28px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* the thin menu bar, with the cat at its real size */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  background: var(--bar);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(46, 26, 16, 0.08);
  font-size: 13px; font-weight: 600;
}
.bar-left { display: flex; align-items: center; gap: 18px; }
.bar-name { letter-spacing: 0.01em; }
.glyph { width: 14px; height: 13px; }
.menu { font-weight: 500; display: none; }
.bar-right { display: flex; align-items: center; gap: 14px; font-weight: 500; }
.slot { display: inline-block; width: 33px; height: 1px; margin-left: -4px; }
.ico { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 3px 4px; margin: -3px -4px; cursor: default; border-radius: 4px; }
.ico svg { height: 12px; width: auto; display: block; }
.ico:hover, .clock:hover { background: rgba(46, 26, 16, 0.08); }
.ico .pct { font-size: 12px; }
.clock { border: 0; background: none; padding: 3px 4px; margin: -3px -4px; border-radius: 4px; cursor: default; font-weight: 500; }
.wide { display: none; }
@media (min-width: 760px) { .menu, .wide { display: inline-flex; } }

/* the buy button, under the box */
.buy {
  display: inline-flex; align-items: baseline; gap: 14px;
  margin-top: calc(var(--u) * 1.6);
  padding: 12px 22px 14px;
  background: var(--ink); color: var(--paper);
  font-family: var(--pixel); font-weight: 600; font-size: 24px; line-height: 1;
  text-decoration: none;
  box-shadow: 0 -4px 0 var(--ink), 0 4px 0 var(--ink), -4px 0 0 var(--ink), 4px 0 0 var(--ink), 0 10px 0 rgba(46, 26, 16, 0.18);
  transition: transform 0.08s steps(2);
}
.buy b { font-weight: 600; color: #E8913F; }
.buy:hover { background: #E8913F; color: var(--ink); }
.buy:hover b { color: var(--ink); }
.buy:active { transform: translateY(3px); }
.compact .buy { font-size: 20px; }

/* the stage: name, box, fine print, all on one screen */
.stage {
  height: 100dvh;
  padding: calc(var(--bar-h) + 8px) 16px 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.name {
  margin: 0 0 calc(var(--u) * 0.5);
  font-family: var(--pixel);
  font-weight: 600;
  font-size: calc(var(--u) * 9);
  line-height: 0.9;
  letter-spacing: 0;
}
.fine {
  margin: calc(var(--u) * 1.2) 0 0;
  max-width: 34em;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

/* the scene, laid out in units like the canvas */
.scene { position: relative; width: calc(var(--u) * 60); height: calc(var(--u) * 48); flex: none; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* the front of the box is the download */
.crate {
  position: absolute;
  left: calc(var(--u) * 3); top: calc(var(--u) * 26);
  width: calc(var(--u) * 38); height: calc(var(--u) * 20);
  color: var(--ink); text-decoration: none;
  cursor: pointer;
}
.crate:focus-visible { outline-offset: -2px; }
.label {
  position: absolute;
  left: calc(var(--u) * 2.5); top: calc(var(--u) * 3);
  width: calc(var(--u) * 20);
  padding: calc(var(--u) * 0.9) calc(var(--u) * 1.1) calc(var(--u) * 0.8);
  display: flex; flex-direction: column; gap: calc(var(--u) * 0.45);
  background: var(--paper);
  box-shadow:
    0 calc(var(--u) * -0.5) 0 var(--ink), 0 calc(var(--u) * 0.5) 0 var(--ink),
    calc(var(--u) * -0.5) 0 0 var(--ink), calc(var(--u) * 0.5) 0 0 var(--ink),
    calc(var(--u) * 0.5) calc(var(--u) * 1) 0 rgba(46, 26, 16, 0.18);
  transition: transform 0.12s steps(2);
}
.crate:hover .label { transform: translateY(calc(var(--u) * -0.5)); }
.crate:active .label { transform: translateY(0); }
.l-top, .l-foot {
  display: flex; justify-content: space-between; gap: 6px;
  font-family: var(--sans);
  font-size: max(7px, calc(var(--u) * 0.95));
  text-transform: uppercase; letter-spacing: 0.12em;
  white-space: nowrap;
}
.l-top b { font-weight: 600; text-transform: none; letter-spacing: 0.01em; }
.l-name {
  font-family: var(--pixel); font-weight: 600;
  font-size: calc(var(--u) * 2.95); line-height: 1;
  padding: calc(var(--u) * 0.6) 0 calc(var(--u) * 0.4);
  border-top: max(2px, calc(var(--u) * 0.25)) solid var(--ink);
}
.l-code { display: block; height: calc(var(--u) * 2.4); }
.l-code svg { display: block; width: 100%; height: 100%; }

/* the packing note on the side of the box, skewed to sit on the side face */
.note {
  position: absolute;
  left: calc(var(--u) * 41.4); top: calc(var(--u) * 27.4);
  width: calc(var(--u) * 13.2);
  transform-origin: 0 0;
  transform: skewY(-21.8deg);
  border: 0; padding: 0; background: none; text-align: left;
  color: rgba(46, 26, 16, 0.86);
  cursor: copy;
  display: flex; flex-direction: column; gap: calc(var(--u) * 0.35);
}
.n-head {
  font-family: var(--sans); font-weight: 600;
  font-size: max(9px, calc(var(--u) * 0.85));
  text-transform: uppercase; letter-spacing: 0.14em;
}
.n-cmd {
  font-family: var(--pixel); font-weight: 500;
  font-size: calc(var(--u) * 1.25); line-height: 1.22;
  overflow-wrap: anywhere;
}
.note:hover .n-cmd { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* hit area over the cat's head */
.poke {
  position: absolute;
  left: calc(var(--u) * 6); top: calc(var(--u) * 9);
  width: calc(var(--u) * 18); height: calc(var(--u) * 16);
  border: 0; padding: 0; background: transparent; cursor: pointer;
}
.scene.right .poke { left: calc(var(--u) * 18); }

/* speech bubble, pixel bordered */
.bubble, .fatcat-bubble {
  font-family: var(--sans) !important;
  font-weight: 600 !important;
}
.bubble {
  position: absolute; z-index: 5;
  left: calc(var(--u) * 14 - 28px); bottom: calc(var(--u) * 39 + 4px);
  max-width: min(280px, 80vw);
  padding: 8px 12px;
  background: var(--paper); color: var(--ink);
  font-size: 15px; line-height: 1.3;
  box-shadow: 0 -3px 0 var(--ink), 0 3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink);
  pointer-events: none;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.12s, transform 0.12s steps(2);
  white-space: normal;
}
.bubble::after {
  content: ""; position: absolute; left: 22px; bottom: -12px;
  width: 9px; height: 9px; background: var(--ink);
  box-shadow: inset 0 -3px 0 var(--ink);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.bubble.on { opacity: 1; transform: none; }
.scene.right .bubble { left: auto; right: calc(var(--u) * 31 - 28px); }
.scene.right .bubble::after { left: auto; right: 22px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.fatcat-bubble { font-size: 13px !important; }

/* the box hops when you take it */
.scene.hop { animation: hop 0.42s steps(6) 1; }
@keyframes hop {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(calc(var(--u) * -2)); }
  60% { transform: translateY(calc(var(--u) * -0.5)); }
}
@media (prefers-reduced-motion: reduce) { .scene.hop { animation: none; } }

/* small screens: the side of the box is too small to write on, so the note goes under it */
.compact .note {
  position: static; transform: none; width: auto; max-width: 300px;
  align-items: center; text-align: center; margin-top: calc(var(--u) * 1.6);
  padding: 8px 12px;
  box-shadow: 0 -2px 0 rgba(46,26,16,.25), 0 2px 0 rgba(46,26,16,.25), -2px 0 0 rgba(46,26,16,.25), 2px 0 0 rgba(46,26,16,.25);
}
.compact .n-cmd { font-size: 13px; }
.compact .n-head { font-size: 10px; }
.compact .fine { font-size: 12px; margin-top: 12px; }
.compact .l-top, .compact .l-foot { letter-spacing: 0.06em; }
.compact .l-kb { display: none; }
.compact .name { font-size: calc(var(--u) * 11); margin-bottom: calc(var(--u) * 1.5); }

/* launch price, under the buy button */
.launch { margin: 14px 0 0; font-size: 14px; color: var(--ink); text-align: center; }
.launch .tag {
  display: inline-block; margin-right: 6px; padding: 1px 7px 2px;
  background: #E8913F; color: var(--ink);
  font-family: var(--pixel); font-weight: 600; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
}
.compact .launch { font-size: 13px; margin-top: 10px; }