/* SimCat: the old life-sim game's own menus. Scene = the 3D room, HUD = the game's side / bottom menu. */
@font-face { font-family: "Saira Stencil One"; src: url("/fonts/saira-stencil-one-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("/fonts/chakra-petch-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("/fonts/chakra-petch-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Share Tech Mono"; src: url("/fonts/share-tech-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #2a2a2c; --ink: #f2f2f2; --accent: #1ec8e6; --muted: #b9b3ae; --red: #e0402a; --rust: #a8341c;
  --font-display: "Saira Stencil One", "Chakra Petch", system-ui, sans-serif;
  --font-body: "Chakra Petch", system-ui, sans-serif;
  --font-ca: "Share Tech Mono", ui-monospace, monospace;
  --hud-w: clamp(360px, 26vw, 470px);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --display: clamp(52px, 6vw, 96px);
}
html, body { background: #1d1715; }
body { font-family: var(--font-body); font-weight: 500; overflow-x: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, p { margin: 0; }

/* ---------- the game screen ---------- */
.game { display: grid; grid-template-columns: 1fr var(--hud-w); min-height: 100svh; }
.scene { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; container-type: size;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; perspective: 1400px; background: #2b1a12; }

/* the 3D room picture and everything set on it share this box (room.png is 1672 x 941) */
.stage { position: absolute; top: 0; aspect-ratio: 1672 / 941;
  width: max(100cqw, 177.7cqh); height: auto;
  left: clamp(calc(100cqw - max(100cqw, 177.7cqh)), calc(50cqw - var(--fx, .40) * max(100cqw, 177.7cqh)), 0px);
  top: clamp(calc(100cqh - max(100cqh, 56.28cqw)), calc(50cqh - var(--fy, .52) * max(100cqh, 56.28cqw)), 0px);
  transform-style: preserve-3d; transition: transform .6s var(--spring); }
.stage.is-drag { transition: none; }
.layer { position: absolute; inset: 0; transition: transform .6s var(--spring); }
.stage.is-drag .layer { transition: none; }
.room { width: 100%; height: 100%; object-fit: cover; }
.at { position: absolute; }

.cat { left: 22.5%; top: 31%; width: 31%; }
.cat img { width: 100%; height: auto; }
.cat .f2, .cat .f3 { position: absolute; inset: 0; opacity: 0; }
.cat[data-frame="turn"] .f1, .cat[data-frame="blink"] .f1 { opacity: 0; }
.cat[data-frame="turn"] .f2, .cat[data-frame="blink"] .f3 { opacity: 1; }
.cat-shadow { position: absolute; left: 6%; right: 4%; bottom: 3%; height: 18%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 10, 4, .55), rgba(40, 10, 4, 0)); z-index: -1; }
.cat-body { transition: transform .6s var(--spring); }
.cat-body.is-out-l { transform: translateX(-140%); transition: transform .26s ease-in; }
.cat-body.is-out-r { transform: translateX(140%); transition: transform .26s ease-in; }
.cat-body.is-jump { transition: none; }

.pointer { left: 35.6%; top: 23.5%; width: 5.4%; animation: bob 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
.pointer img { width: 100%; animation: spin 3.6s linear infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18%); } }
@keyframes spin { 0% { transform: scaleX(1); } 25% { transform: scaleX(.35); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(.35); } 100% { transform: scaleX(1); } }

.brackets { left: 19.5%; top: 26%; width: 37%; height: 46%; transition: transform .25s var(--spring); animation: breathe 3s ease-in-out infinite; }
.brackets img { position: absolute; width: 11%; }
.brackets .b1 { left: 0; top: 0; }
.brackets .b2 { right: 0; top: 0; transform: scaleX(-1); }
.brackets .b3 { left: 0; bottom: 0; transform: scaleY(-1); }
.brackets .b4 { right: 0; bottom: 0; transform: scale(-1, -1); }
@keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: 1.025; } }
.scene.is-hover .brackets { transform: scale(.93); }

.arrow { top: 41%; width: 4.4%; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  transition: transform .25s var(--spring); }
.arrow img { width: 100%; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .45)); }
.arrow.prev { left: 12%; transform: scaleX(-1); }
.arrow.next { left: 60.5%; }
.arrow.prev:hover { transform: scaleX(-1) translateX(8%) scale(1.12); }
.arrow.next:hover { transform: translateX(8%) scale(1.12); }
.arrow.prev:active { transform: scaleX(-1) scale(.9); transition-duration: .035s; }
.arrow.next:active { transform: scale(.9); transition-duration: .035s; }

/* game buttons: raster up / down states from the parts sheet */
.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: .4em 1.4em;
  border: 0; color: var(--ink); background: url("/img/btn.webp") center / 100% 100% no-repeat; font: 700 18px/1.1 var(--font-body);
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; text-shadow: 0 2px 0 rgba(0, 0, 0, .6);
  transition: transform .25s var(--spring); }
.gbtn:hover { transform: translateY(-2px); }
.gbtn:active, .gbtn.is-down { background-image: url("/img/btn-down.webp"); transform: translateY(1px) scale(.98); transition-duration: .035s; }
.gbtn img { width: 22px; height: 22px; object-fit: contain; }
.gbtn.is-off { cursor: not-allowed; }

.select { left: 30.5%; top: 75%; width: 18%; font-size: clamp(20px, 1.9cqw, 34px); min-height: clamp(52px, 5.6cqw, 96px); letter-spacing: .14em; }

/* game header typed onto the screen, like the menu title in the reference */
.title { position: absolute; left: 0; right: 0; top: clamp(30px, 3.4cqh, 44px); text-align: center; pointer-events: none;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .35); z-index: 3; }
.title h1 { font: 400 var(--display)/1.15 var(--font-display); letter-spacing: .04em; padding-block: .1em; }
.title .sub { margin-top: .35em; font: 700 clamp(18px, 1.7vw, 28px)/1.1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; }
.title .sub [data-ticker] { color: var(--accent); }
.msg { min-height: 1.2em; transition: opacity .2s; }
.msg.is-alert { color: #ffd84a; }

/* ---------- the HUD: the game's side menu ---------- */
.hud { position: relative; background: #2a2a2c url("/img/panel.webp") center / cover; padding: var(--s4) var(--s4) var(--s5) calc(var(--s4) + 6px);
  display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 2.6vh, 36px); color: var(--ink); }
.hud-head { display: grid; grid-template-columns: 92px 1fr; gap: var(--s2); align-items: center; }
.portrait { width: 92px; height: 92px; background: url("/img/sq.webp") center / 100% 100%; padding: 7px; }
.portrait span { display: block; width: 100%; height: 100%; background: #6b4a3a url("/img/cat.webp") 4% 30% / 270% auto no-repeat; }
.hud-name { font: 700 26px/1.1 var(--font-body); letter-spacing: .04em; }
.hud-name small { display: block; color: var(--accent); font-size: 18px; letter-spacing: .1em; }
.label { font: 700 16px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: 20px; line-height: 1.35; }

.stats { display: grid; gap: 12px; }
.stat { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: end; }
.stat b { font: 700 18px/1 var(--font-body); font-variant-numeric: tabular-nums; }
.bar { grid-column: 1 / -1; position: relative; aspect-ratio: 1092 / 108; background: url("/img/bar.webp") center / 100% 100%; }
.bar img { position: absolute; left: 1.1%; top: 22%; height: 56%; width: calc(97.8% * var(--v)); object-fit: fill;
  transform-origin: left center; animation: fill 1.1s var(--spring) both .3s; }
@keyframes fill { from { transform: scaleX(0); } }

.ca { display: grid; gap: 8px; }
.ca-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.ca code { font: 400 17px/1.35 var(--font-ca); color: #e8fbff; padding: 12px 18px; min-height: 52px; display: flex; align-items: center;
  background: url("/img/bar.webp") center / 100% 100%; }
.ca [data-copy-ca] { min-width: 96px; padding-inline: 1em; }
.links { display: grid; gap: 10px; }
.links .gbtn { width: 100%; justify-content: flex-start; padding-left: 1.4em; }
.links .pump { min-height: 60px; font-size: 20px; }
.lore { font-size: 20px; line-height: 1.4; color: #ece6e1; }
.risk { font-size: 16px; line-height: 1.35; color: var(--muted); }

/* ---------- /live/: closer camera, bottom HUD ---------- */
.page-live .game, .page-sleep .game, .page-404 .game { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
.page-live .scene, .page-sleep .scene, .page-404 .scene { position: relative; height: auto; min-height: 0; }
.page-live .game, .page-sleep .game, .page-404 .game { height: 100svh; min-height: 620px; }
.page-live .stage { --fx: .38; --fy: .5; width: max(130cqw, 230cqh); left: clamp(calc(100cqw - max(130cqw, 230cqh)), calc(50cqw - .38 * max(130cqw, 230cqh)), 0px);
  top: clamp(calc(100cqh - max(130cqw, 230cqh) * .5628), calc(50cqh - .5 * max(130cqw, 230cqh) * .5628), 0px); }
.bottom { background: #2a2a2c url("/img/panel.webp") center / cover; padding: var(--s3) var(--s4); display: grid;
  grid-template-columns: auto 1fr auto; gap: var(--s4); align-items: center; }
.cmds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cmds .gbtn { min-height: 64px; font-size: 20px; padding-inline: 1em; }
.mood { display: grid; gap: 8px; width: 260px; }
.mood .stat b { font-size: 16px; }
.status-line { grid-column: 1 / -1; font: 700 22px/1.25 var(--font-body); letter-spacing: .06em; text-transform: uppercase; min-height: 1.3em; }
.status-line.is-alert { color: #ff5a3c; font-size: clamp(26px, 3vw, 44px); letter-spacing: .1em; }
.menu-btn img { width: 18px; height: auto; transform: scaleX(-1); }
.game.is-frozen .scene { filter: grayscale(1) brightness(.7); transition: filter .2s; }
.game.is-frozen .cmds .gbtn { opacity: .5; }

.bubble { left: 6%; top: 3%; width: 16%; opacity: 0; transform: scale(.3) translateY(30%); transform-origin: 70% 100%;
  transition: transform .45s var(--spring), opacity .2s; }
.bubble.is-on { opacity: 1; transform: none; }
.bubble > img { width: 100%; transform: scaleX(-1); }
.bubble .thought { position: absolute; left: 30%; top: 12%; width: 42%; height: 55%; object-fit: contain; }

/* ---------- /sleep/ ---------- */
.zs { position: absolute; left: 37%; top: 20%; width: 12%; height: 30%; pointer-events: none; }
.zs img { position: absolute; bottom: 0; width: 34%; opacity: 0; animation: z 4.5s ease-out infinite; }
.zs img:nth-child(2) { animation-delay: 1.5s; left: 25%; }
.zs img:nth-child(3) { animation-delay: 3s; left: 50%; }
@keyframes z { 0% { opacity: 0; transform: translate(0, 0) scale(.4) rotate(-10deg); } 15% { opacity: 1; }
  100% { opacity: 0; transform: translate(60%, -260%) scale(1.1) rotate(12deg); } }
.page-sleep .bottom, .page-404 .bottom { grid-template-columns: 1fr auto; }

/* ---------- phones: the HUD becomes the game's bottom panel ---------- */
@media (max-width: 900px) {
  .game { grid-template-columns: 1fr; }
  .scene { position: relative; height: clamp(360px, 118vw, 70svh); min-height: 0; }
  .stage { --fx: .40; --fy: .5; }
  .arrow.prev { left: 15.5%; }
  .arrow.next { left: 57.5%; }
  .arrow { width: 5%; }
  .select { left: 28%; width: 23%; font-size: 20px; min-height: 56px; }
  .hud { padding: var(--s4) var(--s3) var(--s5); }
  .bottom { grid-template-columns: 1fr; gap: var(--s2); padding: var(--s2) var(--s3) var(--s3); }
  .mood { width: 100%; grid-template-columns: 1fr 1fr; }
  .cmds { grid-template-columns: 1fr 1fr; }
  .page-live .game, .page-sleep .game, .page-404 .game { height: auto; min-height: 100svh; grid-template-rows: auto 1fr; }
  .page-live .scene, .page-sleep .scene, .page-404 .scene { height: 52svh; min-height: 300px; }
  .page-live .stage { width: max(130cqw, 230cqh); }
  .status-line { font-size: 18px; }
  .page-sleep .bottom, .page-404 .bottom { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .title h1 { font-size: 46px; }
  .title .sub { font-size: 16px; letter-spacing: .14em; }
  .ca code { font-size: 16px; }
  .links .pump { font-size: 18px; padding-block: .5em; }
  .title { top: 12px; }
  .page-sleep .cmds { grid-template-columns: 1fr !important; }
  .ca-row { grid-template-columns: 1fr; }
  .cmds .gbtn { font-size: 18px; min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .pointer, .pointer img, .brackets, .zs img { animation: none; }
  .zs img { opacity: 1; }
  .zs img:nth-child(2) { transform: translate(40%, -120%); }
  .zs img:nth-child(3) { transform: translate(80%, -230%); }
}
.stage { transform-origin: 39% 52%; }
.is-hidden * { animation-play-state: paused !important; }
@media (max-width: 360px) { .cmds .gbtn { font-size: 17px; letter-spacing: .03em; padding-inline: .9em; } }
.bottom { align-content: start; }
.page-sleep .cmds { max-width: 760px; }
@media (min-width: 1600px) {
  .hud { --s4: 40px; }
  .hud-name { font-size: 30px; } .lead, .lore { font-size: 22px; }
  .hud .gbtn { font-size: 20px; min-height: 58px; } .links .pump { min-height: 66px; font-size: 22px; }
  .status-line { font-size: 26px; } .cmds .gbtn { min-height: 72px; font-size: 22px; }
}
@media (min-width: 901px) and (max-height: 860px) {
  .hud { gap: 14px; padding-block: 20px; } .lead { font-size: 18px; } .portrait { width: 76px; height: 76px; }
  .hud-head { grid-template-columns: 76px 1fr; } .links .gbtn { min-height: 48px; } .links .pump { min-height: 52px; }
}
.scene img { -webkit-user-drag: none; user-drag: none; }
.ca-row { grid-template-columns: 1fr; }
.ca [data-copy-ca] { justify-self: start; min-width: 140px; }
.page-sleep .status-line, .page-404 .status-line { grid-column: auto; }
.page-404 .menu-btn { min-width: 300px; min-height: 60px; font-size: 20px; }
@media (max-width: 900px) {
  .page-sleep .scene, .page-404 .scene { height: 64svh; }
  .page-404 .menu-btn { min-width: 0; }
}
@media (min-width: 901px) and (max-height: 860px) { .stats { gap: 8px; } }