/* ==========================================================================
   Meowdow — one screen, no scrolling.

   The whole page is a cosy room: wordmark, the signup panel, and a floor with
   props and cats you can poke. Every colour was sampled from the game's art or
   read out of Assets/Data/Cats/*.asset — none of it is invented. push
   ========================================================================== */

@font-face {
  font-family: "Baloo 2";
  src: url("assets/fonts/baloo2-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Baloo 2";
  src: url("assets/fonts/baloo2-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

:root {
  --cream:        #F6EDDF;
  --cream-panel:  #FBF5EA;
  --cream-deep:   #EFE1CC;
  --cream-warm:   #F9E9D5;

  --brown:        #47342C;   /* the outline, consistent across all game UI */
  --brown-ink:    #38211A;
  --brown-soft:   #8A7365;

  --orange:       #F89133;
  --orange-deep:  #DD6D24;
  --gold:         #FAB046;
  --pink:         #F99EA1;
  --sage:         #AAB28A;

  /* the 11 tier colours, straight from tileBackgroundColor */
  --t1:  #F0EBE6;  --t2:  #FFEEDA;  --t3:  #E3DFEA;  --t4:  #FFF0E8;
  --t5:  #FFE6CE;  --t6:  #E4E2E6;  --t7:  #FAF5EC;  --t8:  #FFDCD2;
  --t9:  #F6E8D6;  --t10: #FFF2D2;  --t11: #DCE6F5;

  /* measured off the PNGs: outline ~2.0–2.3% of width, buttons are full pills */
  --line:      3px;
  --line-bold: 4px;
  --r-panel:   26px;
  --r-pill:    999px;

  /* The publisher button is sized to match the wordmark it sits beside.
     Wordmark art is 300x89, so the button's height is 29.7% of its width.
     Once the two stack on narrow screens the button gets its own numbers. */
  --wordmark-w: clamp(210px, 34vw, 260px);
  --press-w: var(--wordmark-w);
  --press-h: calc(var(--wordmark-w) * .297);

  --floor-h: 96px;   /* the strip the props stand on */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(130% 80% at 50% 0%, var(--cream-warm) 0%, var(--cream) 62%);
  color: var(--brown-ink);
  font: 600 17px/1.6 "Baloo 2", ui-rounded, "Segoe UI Rounded",
        system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; height: auto; display: block; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--orange-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ------------------------------------------------------------ the room --- */
.room {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;                  /* cats and props sit near the edges */
  padding-top: max(14px, env(safe-area-inset-top));
}

/* z-index so the bigger tagline and the publisher button always paint over
   the cats -- at middling widths Pip's cushion reaches up into this strip. */
.room__head { text-align: center; flex: none; padding: 2px 16px 0; position: relative; z-index: 6; }

/* The wordmark and the publisher button sit side by side, same height. The
   button is sized off --wordmark-w, so the responsive rules below only ever
   have to change the one number. */
.head__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.wordmark { margin: 0; display: flex; justify-content: center; }
.wordmark img { width: var(--wordmark-w); }

.tagline {
  font-weight: 800;
  font-size: clamp(15px, 4vw, 20px);
  color: var(--brown);
  margin: 14px 0 0;
  letter-spacing: .3px;
}

/* The middle grows to fill whatever is left, and centres the panel in it.
   Props live in the bottom strip, so on narrow screens the panel has to sit
   clear of it. On wide screens the props are far out to the sides instead,
   and reserving that space would push the page past one screen for nothing. */
.room__body {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2vh, 22px) 16px calc(var(--floor-h) + 8px);
  min-height: 0;
}

/* ---------------------------------------------------------- the panel --- */
.panel {
  position: relative;
  width: 100%;
  max-width: 470px;
  background: var(--cream-panel);
  border: var(--line-bold) solid var(--brown);
  border-radius: var(--r-panel);
  box-shadow: 0 0 0 5px var(--gold), 0 0 0 9px var(--brown), 0 10px 0 #47342c1a;
  z-index: 2;
}
.panel__inner { padding: clamp(16px, 2.6vh, 24px) clamp(18px, 5vw, 28px); }

.h2 {
  font-weight: 800;
  font-size: clamp(22px, 5.4vw, 29px);
  line-height: 1.15;
  color: var(--brown);
  margin: 0 0 8px;
  text-align: center;
}

.lede {
  text-align: center;
  margin: 0 0 15px;
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ------------------------------------------------------------- form ----- */
.field { margin: 0 0 12px; border: 0; padding: 0; }
.field--choice { margin-bottom: 15px; }

.label {
  display: block;
  font-weight: 800;
  font-size: 14.5px;
  color: var(--brown);
  margin: 0 0 5px;
  padding: 0;
}
.req, .opt { font-weight: 600; color: var(--brown-soft); font-size: 13px; }

.input {
  width: 100%;
  font: 600 16px/1.4 "Baloo 2", system-ui, sans-serif;  /* 16px = no iOS zoom */
  color: var(--brown-ink);
  background: #fff;
  border: var(--line) solid var(--brown);
  border-radius: var(--r-pill);
  padding: 11px 18px;
  transition: box-shadow .14s ease, border-color .14s ease;
}
.input::placeholder { color: #b9a89c; font-weight: 600; }
.input:focus {
  outline: none;
  border-color: var(--orange-deep);
  box-shadow: 0 0 0 4px #f8913340;
}
.input[aria-invalid="true"] { border-color: #C0392B; }

.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice__input {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.choice__btn {
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15.5px;
  color: var(--brown);
  background: #fff;
  border: var(--line) solid var(--brown);
  border-radius: var(--r-pill);
  padding: 11px 8px;
  cursor: pointer;
  user-select: none;
  transition: transform .1s ease, background .14s ease, box-shadow .14s ease;
}
.choice__btn:active { transform: translateY(2px); }
.choice__input:checked + .choice__btn {
  background: var(--gold);
  box-shadow: inset 0 0 0 3px var(--cream-panel);
}
.choice__input:focus-visible + .choice__btn {
  outline: 3px solid var(--orange-deep);
  outline-offset: 3px;
}

.btn {
  display: block;
  width: 100%;
  font: 800 18px/1 "Baloo 2", system-ui, sans-serif;
  color: var(--brown);
  background: var(--orange);
  border: var(--line-bold) solid var(--brown);
  border-radius: var(--r-pill);
  padding: 15px 18px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--brown);
  transition: transform .1s ease, box-shadow .1s ease, background .14s ease;
  letter-spacing: .3px;
}
.btn:hover { background: var(--gold); }
.btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--brown); }
.btn[disabled] { opacity: .6; cursor: progress; }

.err { color: #A33325; font-size: 13.5px; font-weight: 800; margin: 6px 0 0; }
.err--form { text-align: center; }

.fineprint {
  text-align: center;
  font-size: 12.5px;
  color: var(--brown-soft);
  margin: 10px 0 0;
  line-height: 1.5;
}

.done { text-align: center; padding: 4px 0; }
.done__cat {
  width: 120px;
  margin: 0 auto 4px;
  animation: pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
.done__title {
  font-weight: 800;
  font-size: clamp(21px, 5.2vw, 27px);
  color: var(--brown);
  margin: 0 0 8px;
}
.done__body { margin: 0 auto; max-width: 360px; font-size: 15.5px; line-height: 1.55; }
@keyframes pop {
  0%   { opacity: 0; transform: scale(.5) translateY(14px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------------------------------------------------------- the floor --- */
.floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--floor-h);
  pointer-events: none;              /* only the props themselves are clickable */
  z-index: 1;
}
.floor__line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--brown);
  opacity: .85;
}

.props {
  position: absolute;
  bottom: 4px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  pointer-events: auto;
}
.props--left  { left: clamp(4px, 2vw, 42px); }
.props--right { right: clamp(4px, 2vw, 42px); }

/* props are buttons; strip the chrome and let the art be the hit area */
.prop {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
  transform-origin: center bottom;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.prop img { display: block; }
.prop--rug   { width: 180px; pointer-events: none; position: absolute;
               left: -14px; bottom: 2px; opacity: .9; }
.prop--sofa  { width: 210px; }
.prop--plant { width: 100px; }
.prop--box   { width: 130px; }
.prop--bowl  { width: 85px; margin-bottom: 2px; }

.prop.is-poked { animation: poke .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes poke {
  0%   { transform: scale(1, 1) rotate(0deg); }
  30%  { transform: scale(1.06, .94) rotate(-3deg); }
  60%  { transform: scale(.98, 1.04) rotate(3deg); }
  100% { transform: scale(1, 1) rotate(0deg); }
}

/* --- the cardboard box, which does what boxes do in this game --- */
.prop--box .prop__box-art { position: relative; z-index: 2; }
.prop__popcat {
  position: absolute;
  left: 50%;
  bottom: 26%;
  width: 72%;
  z-index: 1;                        /* behind the box front, so it rises out */
  opacity: 0;
  transform: translate(-50%, 30%) scale(.5);
  transform-origin: center bottom;
  pointer-events: none;
}
.prop--box.is-open .prop__box-art { animation: box-shake .5s ease-out; }
.prop--box.is-open .prop__popcat  { animation: popout 2.4s cubic-bezier(.34, 1.56, .64, 1); }

@keyframes box-shake {
  0%   { transform: rotate(0deg) scale(1, 1); }
  20%  { transform: rotate(-5deg) scale(1.06, .94); }
  45%  { transform: rotate(5deg) scale(.96, 1.05); }
  70%  { transform: rotate(-2deg) scale(1.02, .98); }
  100% { transform: rotate(0deg) scale(1, 1); }
}
@keyframes popout {
  0%   { opacity: 0; transform: translate(-50%, 30%) scale(.5); }
  12%  { opacity: 1; transform: translate(-50%, -58%) scale(1.06); }
  20%  { opacity: 1; transform: translate(-50%, -46%) scale(1); }
  78%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 20%) scale(.6); }
}

/* --------------------------------------------------------- the hint ----- */
/* The pointing hand from the game's UI, aimed up at Pip for a few seconds. */
.hint {
  position: absolute;
  /* Above the panel and just right of Pip, pointing up-left at him. Anywhere
     inside the panel would sit on top of the heading. */
  width: 32px;
  right: 4px;
  top: -36px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px #47342c33);
}
.hint.is-on { animation: hint-bob 3.4s ease-in-out 1 both; }
@keyframes hint-bob {
  0%   { opacity: 0; transform: translateY(6px); }
  10%  { opacity: 1; transform: translateY(0); }
  25%  { opacity: 1; transform: translateY(5px); }
  40%  { opacity: 1; transform: translateY(0); }
  55%  { opacity: 1; transform: translateY(5px); }
  70%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

/* ---------------------------------------------------------- the mute ---- */
.mute {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: 12px;
  z-index: 9;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font: 800 15px/1 "Baloo 2", system-ui, sans-serif;
  color: var(--brown);
  background: var(--cream-panel);
  border: 2px solid var(--brown);
  border-radius: 50%;
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s ease, background .15s ease;
}
.mute:hover { opacity: 1; background: var(--gold); }
.mute__off { display: none; }
.mute[aria-pressed="true"] { opacity: .9; }
.mute[aria-pressed="true"] .mute__on  { display: none; }
.mute[aria-pressed="true"] .mute__off { display: block; }

/* --------------------------------------------------------- the footer --- */
.footer {
  flex: none;
  background: var(--cream-deep);
  border-top: var(--line-bold) solid var(--brown);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  text-align: center;
}
.footer__made { font-weight: 800; color: var(--brown); font-size: 14px; margin: 0 0 7px; }
.footer__social { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.footer__social a {
  color: var(--brown);
  font-weight: 800;
  font-size: 13.5px;
  text-decoration: none;
  border: 2px solid var(--brown);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  background: var(--cream-panel);
  transition: background .14s ease, transform .1s ease;
}
.footer__social a:hover { background: var(--gold); }
.footer__social a:active { transform: translateY(2px); }

/* ==================================================== THE PUBLISHER LINK ==
   This page gets sent to publishers as the pitch, so the gameplay video is
   the one thing that must not be missed. It sits directly under the tagline
   and breathes until someone touches it. Same button language as the rest of
   the game UI -- pill, brown outline, hard drop shadow -- just louder.
   ========================================================================= */
.press {
  width: var(--press-w);
  height: var(--press-h);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 14px;
  text-decoration: none;
  color: var(--brown);
  background: var(--gold);
  border: var(--line-bold) solid var(--brown);
  border-radius: var(--r-pill);
  box-shadow: 0 5px 0 var(--orange-deep);
  animation: press-shake 3.4s ease-in-out infinite;
  transition: background .14s ease, box-shadow .1s ease;
}

/* the play triangle, drawn rather than shipped as an asset */
.press__play {
  flex: none;
  width: 30px; height: 30px;
  border: 3px solid var(--brown);
  border-radius: 50%;
  background: var(--cream-panel);
  position: relative;
}
.press__play::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-38%, -50%);
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--brown);
}

.press__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }

/* The line that has to land before anything else on the page does, so it
   gets its own jitter on top of the button's -- same 3.4s beat, so the two
   read as one movement rather than two things fidgeting separately. */
.press__kicker {
  display: inline-block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #000;
  animation: kicker-shake 3.4s ease-in-out infinite;
}
.press__title { font-size: 13px; font-weight: 800; letter-spacing: .2px; }

/* stop the shake once they've found it, and give the usual press-down */
.press:hover, .press:hover .press__kicker { animation: none; }
.press:hover { background: var(--orange); box-shadow: 0 5px 0 var(--orange-deep); }
.press:active {
  animation: none;
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--orange-deep);
}

/* Sits still most of the cycle, then wiggles -- a shake that never stops
   reads as broken, one that arrives every few seconds pulls the eye back. */
@keyframes press-shake {
  0%, 74%, 100% { transform: rotate(0deg)    scale(1); }
  78%           { transform: rotate(-2.6deg) scale(1.04); }
  82%           { transform: rotate(2.6deg)  scale(1.04); }
  86%           { transform: rotate(-2deg)   scale(1.03); }
  90%           { transform: rotate(1.4deg)  scale(1.02); }
  95%           { transform: rotate(-.6deg)  scale(1.01); }
}

/* rides on top of the button's rotation, so it stays a jitter not a spin */
@keyframes kicker-shake {
  0%, 74%, 100% { transform: translateX(0)      rotate(0deg); }
  78%           { transform: translateX(-2.5px) rotate(-2deg); }
  82%           { transform: translateX(2.5px)  rotate(2deg); }
  86%           { transform: translateX(-2px)   rotate(-1.4deg); }
  90%           { transform: translateX(1.2px)  rotate(.8deg); }
  95%           { transform: translateX(0)      rotate(0deg); }
}

/* ====================================================== INTERACTIVE CATS ==
   Frame rects, sizes and pivots live in cats.css, generated from the Unity
   .meta files. This file only places them.
   ========================================================================= */
.cat {
  position: absolute;
  width: var(--box-w);
  height: var(--box-h);
  padding: 0; margin: 0; border: 0;
  background: none;
  cursor: pointer;
  z-index: 4;
  transform: scale(var(--cat-zoom, 1));
  /* Scale about the same edge the sprite is pinned to. With the default centre
     origin, shrinking a cat lifts its feet off the surface it's sitting on --
     16px for Pip, 22px for Momo, which is what made them look like they were
     hovering. Frames themselves are tight to the ink (verified: 0px padding on
     every side of every frame), so the anchor is the only thing that matters. */
  transform-origin: 50% 100%;        /* bottom: Unity pivot y:0 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cat__sprite {
  position: absolute;
  display: block;
  background-image: var(--sheet);
  background-repeat: no-repeat;
  background-size: var(--sheet-w) var(--sheet-h);
  animation-duration: var(--idle-dur);
  animation-timing-function: step-end;   /* holds each frame, no tweening */
  animation-iteration-count: infinite;
  pointer-events: none;
}
.cat.is-reacting .cat__sprite {
  animation-duration: var(--react-dur);
  animation-iteration-count: 1;
}

.cat__label {
  position: absolute;
  left: 50%; bottom: -21px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-weight: 800;
  font-size: 11.5px;
  color: var(--brown);
  background: var(--cream-panel);
  border: 2px solid var(--brown);
  border-radius: var(--r-pill);
  padding: 1px 9px;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.cat:hover .cat__label,
.cat:focus-visible .cat__label,
.cat.is-reacting .cat__label { opacity: 1; }

/* --- placements --- */
.cat--pip {                          /* sits on the panel's top edge */
  bottom: 100%; right: 24px; margin-bottom: -7px; --cat-zoom: .92;
}
.cat--kimchi { top: -4px; left: 7%; --cat-zoom: .9; }
.cat--kimchi { transform-origin: 50% 0%; }    /* hangs: pivot y:1.0 */
.cat--void   { transform-origin: 50% 50%; }   /* floats: pivot 0.5,0.5 */
.cat--kimchi .cat__label { bottom: auto; top: calc(100% + 5px); }
.cat--void   { top: 8%; right: 6%; --cat-zoom: .85; }
.cat--momo   {                       /* asleep on the rug by the sofa */
  /* bottom:0 relative to .props--left, which already sits on the floor line */
  bottom: 0; left: 128px; --cat-zoom: .8; z-index: 5;
}

/* ------------------------------------------------------------ ≥ 620px ---
   Room for the full cast: both floating cats, all the props. */
@media (min-width: 620px) {
  :root { --floor-h: 130px; }
  .prop--sofa  { width: 250px; }
  .prop--plant { width: 118px; }
  .prop--box   { width: 155px; }
  .prop--bowl  { width: 100px; }
  .prop--rug   { width: 215px; }
  .cat--momo   { left: 152px; --cat-zoom: .95; }
  .cat--void   { right: 10%; --cat-zoom: 1; }
  /* pulled left so the branch runs off the edge instead of floating */
  .cat--kimchi { left: -34px; top: -18px; --cat-zoom: 1; }
  .cat--pip    { right: 36px; --cat-zoom: 1; }
  .mute { width: 38px; height: 38px; right: 18px; }
}

/* 620-1000px: the panel takes most of the width, so the Void needs the very
   edge or it clips the panel's corner. */
@media (min-width: 620px) and (max-width: 999px) {
  .cat--void { right: 2%; --cat-zoom: .85; }
}

@media (min-width: 1000px) {
  /* Wide enough that the props sit beside the panel rather than under it, so
     the body stops reserving floor height. They stay near the edges though:
     inset them here and the right-hand group runs into the panel at ~1280. */
  .props--left  { left: 10px; }
  .props--right { right: 10px; }
  .room__body { padding-bottom: 18px; }
  .cat--kimchi { left: -20px; }
}

@media (min-width: 1400px) {
  .props--left  { left: clamp(20px, 5vw, 90px); }
  .props--right { right: clamp(20px, 5vw, 90px); }
}

/* ------------------------------------------------------------- < 620px ---
   A phone can't hold four cats and five props beside a full-width panel
   without everything colliding. So the two floating cats stand down and the
   floor keeps a sofa, the box and a bowl, at sizes that don't overlap. */
@media (max-width: 620px) {
  :root { --floor-h: 80px; }

  .cat--kimchi,
  .cat--void   { display: none; }

  /* The floor reservation pushes a centred panel upward, leaving Pip nowhere
     to sit. Bottom-aligning puts all the slack above the panel instead. */
  .room__body { align-items: end; }

  /* sized and pushed right so his cushion clears the wordmark beside it */
  .cat--pip    { right: 10px; --cat-zoom: .58; margin-bottom: -6px; }
  .cat--momo   { left: 96px; --cat-zoom: .5; }   /* lying in front of the sofa */
  /* The two stack here, so the button stops matching the wordmark's width and
     takes the room it needs for its own text instead. */
  :root { --wordmark-w: clamp(148px, 38vw, 168px); --press-w: min(300px, 88vw); --press-h: 52px; }
  .head__row { gap: 8px; }

  /* Three objects, well apart. The rug, plant and bowl are the first things
     to go -- they read as noise at this size. */
  .prop--sofa  { width: 118px; }
  .prop--rug   { display: none; }
  .prop--plant { display: none; }
  .prop--bowl  { display: none; }
  .prop--box   { width: 88px; }

  .props--left  { left: 4px; }
  .props--right { right: 4px; }

  .hint { width: 26px; right: -12px; top: -26px; }
}

/* --------------------------------------------------- short viewports ----
   Rather than clip the submit button, tighten up so it still fits on one
   screen. */
@media (max-height: 820px) {
  :root { --floor-h: 84px; }
  .lede { font-size: 14.5px; margin-bottom: 12px; }
  .panel__inner { padding: 16px 20px; }
  .field { margin-bottom: 11px; }
  :root { --wordmark-w: clamp(148px, 38vw, 200px); }
}
@media (max-height: 800px) {
  :root { --floor-h: 76px; }
  .lede { display: none; }
  .tagline { font-size: 15px; margin-top: 9px; }
  .h2 { font-size: 20px; margin-bottom: 6px; }
  .input { padding: 9px 16px; }
  .choice__btn { padding: 9px 8px; }
  .btn { padding: 13px 18px; font-size: 17px; }
  .fineprint { margin-top: 8px; }
  .footer__made { display: none; }
  /* the publisher button never goes away, it just tucks in */
  :root { --press-h: 48px; }
  .press { gap: 8px; }
  .press__play { width: 25px; height: 25px; border-width: 2.5px; }
  .press__kicker { font-size: 16px; }
  .press__title  { font-size: 12px; }
  .prop--sofa { width: 124px; }
  .prop--rug  { width: 104px; }
  .prop--box  { width: 84px; }
  .cat--momo  { left: 68px; --cat-zoom: .46; }
}

/* iPhone SE and friends: shortest and narrowest at once, so Pip and the
   wordmark are fighting for the same corner. Shrink both. */
@media (max-height: 700px) {
  :root { --wordmark-w: 132px; --press-h: 44px; }
  .cat--pip { --cat-zoom: .42; }
}

/* very narrow phones */
@media (max-width: 380px) {
  .prop--sofa { width: 118px; }
  .prop--rug  { width: 100px; }
  .prop--box  { width: 84px; }
  .prop--bowl { display: none; }
  .cat--momo  { left: 64px; --cat-zoom: .46; }
  .cat--pip   { --cat-zoom: .5; }
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cat__sprite, .done__cat, .hint, .press, .press__kicker,
  .prop.is-poked, .prop--box.is-open .prop__box-art { animation: none !important; }

  /* park each cat on its first idle frame rather than an empty box */
  .cat--pip    .cat__sprite { width: 131.57px; height: 98.51px;  background-position: -17.52px -76.69px; }
  .cat--momo   .cat__sprite { width: 159.85px; height: 76px;     background-position: -8.56px -115.25px; }
  .cat--kimchi .cat__sprite { width: 183.65px; height: 87.44px;  background-position: -15.1px -43.89px; }
  .cat--void   .cat__sprite { width: 102.45px; height: 116px;    background-position: -51.56px -3.97px; }

  /* the box still works, it just doesn't bounce */
  .prop--box.is-open .prop__popcat {
    animation: none !important;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  * { transition-duration: .01ms !important; }
}