/* Rat Johnson ($RJAY): one street, one rat. Layout system first, then the world. */
@font-face { font-family: "Arimo"; src: url("/fonts/arimo-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cousine"; src: url("/fonts/cousine.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bg: #E9925A; --ink: #fff; --accent: #F2C14E;
  --sky: #F08A3C; --asphalt: #6B5A4E; --lcd-ink: #1C2A0C; --gold: #F4D27A;
  --font-display: "Arimo", "Arial", sans-serif;
  --font-body: "Arimo", "Arial", sans-serif;
  --font-mono: "Cousine", "Courier New", monospace;
  --outline: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
             0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000;
  --outline-s: -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000,
               0 -1.5px 0 #000, 0 1.5px 0 #000, -1.5px 0 0 #000, 1.5px 0 0 #000;
  --press: 35ms; --release: 600ms cubic-bezier(.22, 1, .36, 1); --hover: 250ms cubic-bezier(.34, 1.56, .64, 1);
  /* world anchors, in % of the 16:9 street */
  --rat-x: 47; --can-x: 58.5; --focus: 47;
}
html, body { background: var(--bg) url("/img/ground.webp") center top / 100% auto; }
body { overflow-x: hidden; font-weight: 700; }
.page { position: relative; }

/* ---------------- the stage: the street, cover-fit around the rat ---------------- */
.stage {
  position: relative; height: 100svh; min-height: 540px; overflow: hidden;
  container-type: size; background: var(--sky);
  --W: max(100cqw, 177.7778cqh);
  --H: calc(var(--W) * .5625);
  --L: clamp(calc(100cqw - var(--W)), calc(50cqw - var(--focus) / 100 * var(--W)), 0px);
  --T: clamp(calc(100cqh - var(--H)), calc((100cqh - var(--H)) * .4), 0px);
}
.world {
  position: absolute; width: var(--W); height: var(--H); left: var(--L); top: var(--T);
  container-type: size;
}
.street { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.world img { -webkit-user-drag: none; user-select: none; }

/* lowrider on the far lane, behind him */
.car { position: absolute; left: 0; bottom: 31cqh; height: 13cqh; width: auto; z-index: 1; visibility: hidden; will-change: auto; }
.car img { height: 100%; width: auto; max-width: none; }
.car.is-driving { visibility: visible; }
.car.is-driving img { animation: hop .9s cubic-bezier(.45, 0, .55, 1) infinite; transform-origin: 50% 100%; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-9%) rotate(-.6deg); } 60% { transform: translateY(-2%); } }

/* the rat: frames stacked in one box, feet at 79% of the street */
.rat {
  position: absolute; z-index: 2; height: 58cqh; aspect-ratio: 853 / 1280;
  left: calc(var(--rat-x) * 1cqw); bottom: calc(21cqh - 58cqh * .027);
  translate: -50% 0; cursor: pointer;
}
.rat__sway { position: absolute; inset: 0; transform-origin: 50% 97%; animation: sway 3.4s ease-in-out infinite alternate; }
.rat.is-left .rat__sway { scale: -1 1; }
.rat.is-busy .rat__sway { animation-play-state: paused; }
.rat.is-gone { opacity: 0; }
@keyframes sway {
  0% { transform: rotate(-1.3deg) translateX(-.4%); }
  50% { transform: rotate(.2deg) translateX(0) scaleY(1.006); }
  100% { transform: rotate(1.3deg) translateX(.4%); }
}
.f { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; visibility: hidden; }
.f.is-on { visibility: visible; }

/* hiding: only his head shows over the lid */
.peek { position: absolute; z-index: 3; left: calc(var(--can-x) * 1cqw); translate: -50% 0; top: 22cqh; height: 33.5cqh; width: 30cqw; overflow: hidden; pointer-events: none; }
.peek img { position: absolute; left: 50%; top: 13.5cqh; height: 58cqh; width: auto; max-width: none; translate: -50% 0; transform: translateY(40cqh); }
.can { position: absolute; z-index: 4; left: calc(var(--can-x) * 1cqw); translate: -50% 0; bottom: 20cqh; height: 27cqh; width: auto; max-width: none; }
.chain { position: absolute; z-index: 5; left: calc(var(--rat-x) * 1cqw); top: 40.5cqh; width: 6.5cqw; height: auto; max-width: none; translate: -50% 0; opacity: 0; pointer-events: none; }

/* nametag + HP over his head: this is the name of the site */
.tag {
  position: absolute; z-index: 6; left: calc(var(--rat-x) * 1cqw); bottom: 78cqh; translate: -50% 0;
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: .22em;
  font: 700 clamp(22px, min(5.4cqh, 7.2vw), 66px)/1 var(--font-display); white-space: nowrap;
  color: #fff; text-shadow: var(--outline); letter-spacing: .005em;
}
.tag [data-ticker] { color: var(--gold); }
.hp { position: relative; display: block; width: 5.4em; height: .3em; min-height: 8px; }
.hp img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.hp__bg { filter: brightness(.32) saturate(.6); }
.hp__fill { clip-path: inset(0 var(--hp-cut, 0%) 0 0); transition: clip-path 1.6s cubic-bezier(.22, 1, .36, 1); }
.hp.is-hit .hp__fill { transition-duration: .12s; animation: hit .5s steps(2) 1; }
@keyframes hit { 50% { filter: brightness(2.2); } }

/* ACT GANGSTA: the one big action, under his feet */
.act {
  position: absolute; z-index: 7; padding: 0; border: 0; background: none; min-height: 0; cursor: pointer;
  left: calc(var(--L) + var(--rat-x) / 100 * var(--W)); bottom: max(16px, 2.6cqh);
  width: clamp(250px, 21cqw, 410px); aspect-ratio: 900 / 221; translate: -50% 0;
  container-type: inline-size; -webkit-tap-highlight-color: transparent;
  transition: transform var(--release), filter var(--release);
}
.act img { position: absolute; inset: 0; width: 100%; height: 100%; }
.act span {
  position: relative; display: grid; place-items: center; height: 100%;
  font: 700 clamp(18px, 8.4cqi, 34px)/1 var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  color: var(--gold); text-shadow: 0 2px 0 #000, 0 0 10px rgba(0, 0, 0, .6);
}
@media (hover: hover) { .act:hover { transform: translateY(-3px); transition: transform var(--hover); } }
.act:active { transform: translateY(2px) scale(.96); filter: brightness(1.15); transition: transform var(--press), filter var(--press); }
.act[aria-disabled="true"] { filter: saturate(.4) brightness(.8); }
.act[aria-disabled="true"]:active { transform: translateX(3px); }

/* ---------------- below: chat + boombox (desktop: laid over the street) ---------------- */
.below { position: absolute; inset: 0; pointer-events: none; z-index: 8; }
.below > * { pointer-events: auto; }

.chat {
  position: absolute; top: max(20px, 2.6vh); left: max(20px, 2.4vw); max-width: min(26vw, 500px);
  font-size: clamp(16px, 1.15vw, 22px); line-height: 1.32; color: #fff; text-shadow: var(--outline-s);
}
.chat p { margin: 0; opacity: 0; transform: translateY(6px); }
.chat.is-on p { animation: line .18s ease-out forwards; }
.chat.is-on p:nth-child(2) { animation-delay: .45s; } .chat.is-on p:nth-child(3) { animation-delay: .9s; }
.chat.is-on p:nth-child(4) { animation-delay: 1.35s; } .chat.is-on p:nth-child(5) { animation-delay: 1.8s; }
.chat.is-on p:nth-child(6) { animation-delay: 2.25s; }
@keyframes line { to { opacity: 1; transform: none; } }
.c-sys { color: var(--gold); } .c-rat { color: #FFE9A6; }
.chat__risk { color: #E4DACB; font-size: max(16px, .9em); margin-top: .25em !important; }

.box {
  position: absolute; right: max(20px, 2.4vw); bottom: max(16px, 3vh); width: clamp(360px, 27vw, 540px);
  aspect-ratio: 1100 / 839; container-type: inline-size;
}
.box__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lcd {
  position: absolute; left: 3.04%; top: 23.7%; width: 94.1%; height: 32%;
  padding: 2.4cqi 3.6cqi; display: flex; flex-direction: column; justify-content: center; gap: 1.4cqi;
  color: var(--lcd-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .18);
}
.lcd__row { display: flex; justify-content: space-between; align-items: center; }
.lcd__label { font-size: max(16px, 3cqi); letter-spacing: .14em; }
.lcd__copy {
  position: relative; min-height: 0; padding: .25em .7em; border: 0; background: none; cursor: pointer;
  font: 700 max(16px, 3cqi)/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--lcd-ink);
  transition: transform var(--release);
}
.lcd__copy::before { content: ""; position: absolute; inset: -12px -8px; }
.lcd__copy span::before { content: "\25B6\00a0"; }
.lcd__copy:active { transform: translateY(1px) scale(.95); transition: transform var(--press); }
.lcd__copy.is-done, .lcd__copy[data-copied] { animation: blinkcd .5s steps(2) 2; }
@keyframes blinkcd { 50% { opacity: .25; } }
.lcd__ca { font: 400 clamp(16px, 3.15cqi, 20px)/1.2 var(--font-mono); color: var(--lcd-ink); letter-spacing: 0; }
.lcd__ca.is-addr { word-break: break-all; text-wrap: balance; }

.key { position: absolute; display: block; color: #2B2118; text-decoration: none; transition: transform var(--release), filter var(--release); -webkit-tap-highlight-color: transparent; }
.key::after { content: ""; position: absolute; inset: -6px; }
.key--l::after, .key--r::after { inset: -10px -4px; }
.key--wide { left: 32.45%; top: 63.8%; width: 35.35%; height: 15.95%; }
.key--l { left: 32.3%; top: 82.75%; width: 17%; height: 11.85%; }
.key--r { left: 50.95%; top: 82.75%; width: 16.85%; height: 11.85%; }
.key__face { position: absolute; inset: 0; width: 100%; height: 100%; }
.key__in { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; gap: .35em; font-size: max(16px, 3.2cqi); line-height: 1; white-space: nowrap; }
.key__in img { width: 1.45em; height: 1.45em; }
.key--l .key__in img, .key--r .key__in img { width: max(20px, 4.2cqi); height: max(20px, 4.2cqi); }
@media (hover: hover) { .key:hover { transform: translateY(-2px); filter: brightness(1.08); transition: transform var(--hover), filter var(--hover); } }
.key:active { transform: translateY(2px); filter: brightness(.9); transition: transform var(--press), filter var(--press); }
.key.is-off { opacity: 1; filter: saturate(.3) brightness(.78); }
.key.is-off .key__in { opacity: .55; }
.key.is-off:active { transform: none; }

/* ---------------- phones, tall tablets: recompose, the boombox drops below ---------------- */
@media (max-width: 1099px), (max-aspect-ratio: 6/5) {
  .stage { min-height: 470px; max-height: 1100px; }
  .act { width: min(78vw, 340px); bottom: max(14px, 2.4cqh); }
  .stage { --can-x: 57; height: 80svh; }
  .below { position: relative; inset: auto; display: flex; flex-direction: column; align-items: center; gap: var(--s5); padding: var(--s5) var(--s2) var(--s6); }
  .chat { position: static; max-width: 34em; width: 100%; font-size: 17px; }
  .box { position: relative; right: auto; bottom: auto; width: min(100%, 560px); }
}
@media (max-width: 1099px) and (min-aspect-ratio: 6/5) {
  /* short landscape phones: a little more street, a little less rat */
  .stage { height: 100svh; }
}

@media (prefers-reduced-motion: reduce) {
  .rat__sway { animation: none; }
  .chat p { opacity: 1; transform: none; }
}

/* 404: the spot is empty, only the chain is left */
.page--lost .chain--left { opacity: 1; top: auto; bottom: 19.5cqh; }
.page--lost .act { text-decoration: none; }
.page--lost .act span { font-size: clamp(16px, 7.4cqi, 30px); }
.page--lost .tag { font-size: clamp(20px, min(4.4cqh, 6.4vw), 54px); }

@media (max-width: 380px) { .below { padding-inline: var(--s1); } .key--wide .key__in { gap: .2em; letter-spacing: -.01em; } .key--wide .key__in img { width: 1.1em; height: 1.1em; } }