/* Cat the Human: a 2000s life-sim lot. Phone first; desktop below in one media block. */
@font-face { font-family: "Jersey 15"; src: url(/font/jersey15.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Nunito"; src: url(/font/nunito.woff2) format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  --bg: #6FAE3E; --ink: #EDE6D3; --accent: #F2D64B;
  --navy: #2F3E66; --cream: #EDE6D3; --yellow: #F2D64B; --ink-dark: #2B2420; --muted: #B9B6C8;
  --font-display: "Jersey 15", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
body { background: #6FAE3E url(/img/grass.webp) 0 0 / 100% auto repeat-y; overflow-x: hidden; }
p { margin: 0; }
.game { position: relative; }

/* ---------- the lot (one box with the picture's aspect; overlays in %) ---------- */
.stage { position: relative; }
.world { position: relative; width: 100%; aspect-ratio: 941 / 1672; container-type: size; overflow: hidden; }
.lot { position: absolute; inset: 0; width: 100%; height: 100%; }
.lot-d { display: none; }

.cloud { position: absolute; width: 34%; height: auto; opacity: .95; pointer-events: none; animation: drift 70s linear infinite; }
.cloud.c1 { top: 24.5%; left: -40%; }
.cloud.c2 { display: none; }
@keyframes drift { to { transform: translateX(450%); } }

/* wall calendar = the counter; skewed onto the back-left wall */
.cal { position: absolute; left: 27%; top: 38.6%; width: 9%; transform: skewY(-17deg); transform-origin: 0 0; }
.cal-block { width: 100%; height: auto; }
.cal-page { position: absolute; left: 4%; right: 4%; top: 29%; height: 51%; display: grid; place-items: center;
  font: 400 6.2cqw/1 var(--font-display); color: var(--ink-dark); }
.cal-page.flying { background: url(/img/page.webp) center / 100% 100% no-repeat; z-index: 2; }
.cal-page.flying { animation: tear .9s var(--ease-out) forwards; }
@keyframes tear { 30% { transform: translate(6%, 10%) rotate(8deg); } 100% { transform: translate(30%, 220%) rotate(40deg); opacity: 0; } }
.cal.shake { animation: calshake .5s steps(6) 1; }
@keyframes calshake { 0%,100% { translate: 0 0; } 25% { translate: -4% 0; } 50% { translate: 4% 0; } 75% { translate: -2% 0; } }

/* props cut from the room so they can move (boxes measured from the room's pixels) */
.prop { position: absolute; translate: -50% -100%; pointer-events: none; }
.prop img { height: 100%; width: auto; max-width: none; }
.chair { left: 24.28%; top: 58.19%; height: 7.06%; z-index: 581; transform-origin: 50% 85%; transition: opacity .15s steps(1); }
.plant { left: 86.5%; top: 55.98%; height: 11.84%; z-index: 559; }
.plant img { transform-origin: 50% 100%; animation: sway 5.5s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-1.1deg) scaleY(1); } to { transform: rotate(1.3deg) scaleY(1.012); } }
.chair.idle img { animation: swivel 1.6s steps(4) 1; }
@keyframes swivel { 25% { transform: scaleX(.86); } 50% { transform: scaleX(.94); } 75% { transform: scaleX(.98); } }
.chair.spin img { animation: spin 2.4s steps(10) 1; }
@keyframes spin { 0% { transform: scaleX(1); } 15% { transform: scaleX(-.6); } 30% { transform: scaleX(-1); } 45% { transform: scaleX(.4); } 60% { transform: scaleX(1); } 75% { transform: scaleX(.3); } 90% { transform: scaleX(.9); } 100% { transform: scaleX(1); } }
.chair.gone { opacity: 0; }

/* the dark CRT screen: a quad over the monitor */
.screen { position: absolute; left: 20.15%; top: 45.6%; width: 4.41%; height: 3.17%; z-index: 500; pointer-events: none;
  clip-path: polygon(0 17.4%, 100% 0, 100% 86.4%, 0 100%); overflow: hidden;
  background: linear-gradient(180deg, transparent 0 45%, rgba(170, 200, 255, .07) 50%, transparent 55% 100%) 0 0 / 100% 300% ,
    linear-gradient(115deg, transparent 0 30%, rgba(255, 255, 255, .10) 34%, transparent 40%);
  animation: scan 5s linear infinite; }
@keyframes scan { to { background-position: 0 300%, 0 0; } }
.screen.on { background: radial-gradient(ellipse at 50% 50%, #CFE6FF 0%, #6E9AD6 60%, #2B4C86 100%); animation: crt-on .5s steps(3) 1; }
@keyframes crt-on { 0% { transform: scaleY(.04); filter: brightness(3); } 60% { transform: scaleY(.5); } 100% { transform: none; } }
.screen.on .cursor { position: absolute; left: 22%; top: 34%; width: 9%; height: 14%; background: #1D2B4A; animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* the cat: a sprite whose feet sit on (left, top) */
.cat { position: absolute; left: 47%; top: 59%; height: 15%; padding: 0; min-height: 0; border: 0; background: none;
  transform: translate(-50%, -100%); cursor: pointer; z-index: 3; -webkit-tap-highlight-color: transparent; }
.cat img { height: 100%; width: auto; max-width: none; transition: transform .25s var(--spring);
  /* match the room's baked light: warmer, softer, a touch blurred like the room's low-res textures */
  filter: sepia(.14) saturate(.9) brightness(.95) contrast(.93) blur(.35px) drop-shadow(-.6cqw .5cqw .6cqw rgba(60, 30, 15, .18)); }
.cat.flip img { transform: scaleX(-1); }
.cat:hover img { translate: 0 -1.5%; }
.cat.walking img { animation: bob .36s steps(2) infinite; }
@keyframes bob { 50% { translate: 0 -2.5%; } }
.cat.moving { transition: left var(--t, 1s) linear, top var(--t, 1s) linear, height var(--t, 1s) linear; }
.shadow { position: absolute; left: 47%; top: 59%; width: 7%; aspect-ratio: 2.6 / 1; border-radius: 50%; z-index: 2;
  background: radial-gradient(closest-side, rgba(52, 22, 8, .55), rgba(52, 22, 8, .28) 55%, rgba(52, 22, 8, 0)); transform: translate(-46%, -58%); pointer-events: none; }
.shadow.moving { transition: left var(--t, 1s) linear, top var(--t, 1s) linear; }

/* title over the sky */
.title { position: absolute; left: 0; right: 0; top: 3.2%; text-align: center; padding-inline: 16px; }
.title h1 { margin: 0 auto; width: min(86%, 520px); }
.title h1 img { width: 100%; height: auto; filter: drop-shadow(0 3px 0 rgba(43, 36, 32, .35)); }
.ticker { margin-top: 4px; font: 400 22px/1 var(--font-display); color: var(--yellow); letter-spacing: .04em;
  text-shadow: 0 2px 0 var(--ink-dark); }
.hook { margin-top: 8px; font: 800 18px/1.3 var(--font-body); color: var(--cream); text-shadow: 0 2px 0 rgba(43, 36, 32, .55); }

/* ---------- controls (phone: stacked plates on the lawn) ---------- */
.hud { position: relative; display: grid; gap: 16px; padding: 0 12px 32px; margin-top: -52vw; justify-items: center; }
.plate { width: 100%; max-width: 520px; color: var(--cream);
  border: solid transparent; border-width: 24px 22px; border-image: url(/img/plate.webp) 100 110 fill / 24px 26px stretch; }
.plate, .contract { padding: 4px 10px; }

.act { position: relative; width: min(38vw, 160px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: url(/img/btn-act.webp) center / contain no-repeat; color: #FFFBEA;
  font: 400 clamp(24px, 6.4vw, 30px)/.92 var(--font-display); letter-spacing: .03em; text-transform: uppercase;
  text-shadow: 0 2px 0 #2E5E12, 0 0 1px #2E5E12;
  transition: transform .6s var(--spring), filter .25s; }
.act span { display: block; translate: 0 -4%; }
.act:hover { transform: translateY(-3px) scale(1.03); transition-duration: .25s; }
.act:active { transform: translateY(3px) scale(.96); transition: transform 35ms linear; filter: brightness(.94); }
.act.busy { filter: saturate(.6) brightness(.92); }

.status { display: flex; align-items: center; gap: 14px; }
.portrait { display: block; width: 76px; height: 76px; flex: none; border-radius: 8px; overflow: hidden; outline: 3px solid #D9C7A4; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.days { display: grid; gap: 2px; }
.days-label { font: 400 20px/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .03em; color: var(--cream); }
.days-num { font: 400 44px/1 var(--font-display); color: var(--yellow); font-variant-numeric: tabular-nums; }
.days-num.roll { animation: roll .3s steps(3) 1; }
@keyframes roll { from { translate: 0 -40%; opacity: .2; } }
.status.alarm .days-label { color: #FF9C86; }

.lore { display: grid; gap: 8px; font: 600 17px/1.4 var(--font-body); }
.lore .hook-d { display: none; }
.risk { font-size: 16px; line-height: 1.35; color: var(--muted); }

.contract { width: 100%; max-width: 520px; display: grid; gap: 12px;
  border: solid transparent; border-width: 24px 22px; border-image: url(/img/plate.webp) 100 110 fill / 24px 26px stretch; }
.strip { border: solid transparent; border-width: 12px 16px; border-image: url(/img/strip.webp) 30 40 fill / 12px 16px stretch;
  min-height: 52px; display: grid; gap: 10px; align-items: center; }
[data-ca] { font: 800 16px/1.3 var(--font-body); color: var(--cream); letter-spacing: .01em; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.key-buy { grid-column: 1 / -1; }

.key { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 14px;
  border: solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap;
  font: 400 21px/1 var(--font-display); letter-spacing: .03em; background: none;
  transition: transform .6s var(--spring), filter .2s; }
.key img { width: 24px; height: 24px; flex: none; }
.key:hover { transform: translateY(-2px); transition-duration: .25s; filter: brightness(1.06); }
.key:active { transform: translateY(3px); transition: transform 35ms linear; }
.key-buy { white-space: normal; text-align: center; line-height: 1.05; padding-block: 4px; color: var(--ink-dark); border-width: 14px 20px; border-image: url(/img/btn-buy.webp) 70 90 fill / 14px 20px stretch; }
.key-blue { color: #F4F1FF; text-shadow: 0 1px 0 #1F2C4D; border-width: 14px 14px; border-image: url(/img/btn-blue.webp) 80 fill / 14px stretch; }
.key.is-off, .key.is-off:hover, .key.is-off:active { transform: none; filter: grayscale(.85) brightness(.85); opacity: .6; cursor: not-allowed; }

/* ---------- desktop: the lot fills the screen, the game HUD sits on it ---------- */
@media (min-aspect-ratio: 4/3) and (min-width: 761px) {
  body { overflow: hidden; }
  .stage { position: fixed; inset: 0; overflow: hidden; }
  .world { position: absolute; left: 50%; top: 46%; width: max(100vw, 177.78vh); aspect-ratio: 1672 / 941; translate: -50% -46%; }
  .lot-d { display: block; } .lot-p { display: none; }

  .cloud { width: 9%; height: auto; }
  .cloud.c1 { top: 28%; left: -12%; animation: drift-d 80s linear infinite; }
  .cloud.c2 { top: 3%; left: -12%; width: 7%; animation: drift-d 110s linear infinite; animation-delay: -40s; }
  .cloud.c1 { animation: drift-d 38s ease-in-out infinite alternate; }
  .cloud.c2 { display: none; }
  @keyframes drift-d { from { transform: translateX(0); } to { transform: translateX(150%); } }

  .cal { left: 33.4%; top: 11.6%; width: 6.4%; transform: skewY(-15deg); }
  .cal-page { font-size: 4.5cqw; }
  .cat { left: 51%; top: 62%; height: 34%; }
  .chair { left: 28.35%; top: 60.15%; height: 20.4%; z-index: 601; }
  .plant { left: 80.5%; top: 53.45%; height: 28.37%; z-index: 534; }
  .screen { left: 24.75%; top: 28.9%; width: 3.45%; height: 7.5%; clip-path: polygon(0 17.3%, 100% 0, 100% 86.7%, 1.4% 100%); }
  .shadow { left: 50%; top: 62%; width: 10%; }

  .title { position: fixed; left: 2.2vw; right: auto; top: 2.6vh; width: min(27vw, 520px); text-align: left; padding: 0; }
  .title h1 { width: 100%; }
  .ticker { margin: .2em 0 0 .7em; font-size: clamp(22px, 1.6vw, 30px); }
  .hook { display: none; }

  .hud { position: fixed; left: 0; right: 0; bottom: 1.4vh; margin: 0 auto; padding: 0; display: block;
    width: min(1500px, 94vw, 156vh); aspect-ratio: 1672 / 235; background: url(/img/hud.webp) center / 100% 100% no-repeat; }
  .hud > * { position: absolute; }

  .act { left: 9.75%; top: 50%; width: 11.3%; translate: -50% -50%; font-size: clamp(20px, 1.55vw, 30px); }

  .status { left: 19.9%; top: 14.5%; width: 25%; height: 67%; border: 0; border-image: none; max-width: none; gap: 0; }
  .portrait { position: absolute; left: 0; top: 0; width: auto; height: 100%; aspect-ratio: 1; padding: 5%; border-radius: 0; outline: 0; }
  .portrait img { border-radius: 9%; }
  .days { position: absolute; left: 44%; right: 2%; top: 50%; translate: 0 -50%; text-align: center; justify-items: center; }
  .days-label { font-size: clamp(16px, 1.05vw, 21px); line-height: 1; }
  .days-num { font-size: clamp(30px, 2.3vw, 46px); }

  .lore { position: fixed; right: 1.8vw; top: 2.6vh; width: clamp(300px, 23vw, 440px); max-width: none; gap: 6px; padding: 8px 14px 8px 30px;
    font-size: clamp(16px, 1vw, 19px); }
  .lore .hook-d { display: block; font: 400 clamp(21px, 1.35vw, 27px)/1.05 var(--font-display); color: var(--yellow); letter-spacing: .02em; }

  .contract { padding: 0; left: 47.9%; width: 49.3%; top: 14%; height: 72%; border: 0; border-image: none; max-width: none;
    display: grid; grid-template-rows: 39% 1fr; gap: 0; }
  .strip { border: 0; border-image: none; min-height: 0; padding: 0 .35em 0 1.4em; overflow: hidden; display: flex; justify-content: space-between; gap: 1em; }
  .strip .copy { height: 84%; min-height: 0; flex: none; }
  [data-ca] { font-size: clamp(16px, .95vw, 18px); white-space: nowrap; }
  .row { display: flex; align-items: center; gap: 1.2%; padding-top: 1.2%; }
  .row > * { order: 0 !important; }
  .key { min-height: 0; height: clamp(44px, 3.15vw, 60px); font-size: clamp(18px, 1.2vw, 24px); }
  .key-buy { flex: 1; white-space: nowrap; }
}

@media (min-aspect-ratio: 4/3) and (min-width: 761px) and (max-width: 1280px) {
  [data-ca] { font-size: 16px; }
  .strip { padding: 0 .8em; }
  .key { padding: 0 8px; }
}

@media (max-width: 360px) {
  .key { font-size: 19px; padding-inline: 10px; }
  .key-buy { border-width: 12px 14px; }
}