/* ============================================================
   ROBINCAT $ROBINCAT - design tokens
   ref: approved pixel-art avatar/banner (market-alley fish heist)
   palette: warm 8-bit market tones, hood green, feather red
   type: Press Start 2P (display/counter) + VT323 (body/HUD)
   motion: one idiom - click-to-dash sprite-hop
   ============================================================ */
:root{
  --bg-void:#241407;
  --floor-tan:#d9c39c;
  --wood-dark:#3d2314;
  --wood-brown:#6b3a1c;
  --hood-green:#4c7a3d;
  --hood-green-dark:#2e4a24;
  --feather-red:#b23a2c;
  --cream:#f3e3c0;
  --ink:#241407;
  --gold:#e2a63f;
  --fish-teal:#5fa89a;

  --font-pixel:'Press Start 2P', 'Courier New', monospace;
  --font-body:'VT323', 'Courier New', monospace;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --radius:0px;
  --pixel-shadow:6px 6px 0 rgba(20,10,4,0.55);
}

*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; height:100%;
  background:var(--bg-void);
  color:var(--cream);
  font-family:var(--font-body);
  overflow:hidden;
}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
a{color:inherit; text-decoration:none;}

.pixel-panel{
  background:var(--cream);
  color:var(--ink);
  border:4px solid var(--ink);
  box-shadow:var(--pixel-shadow);
  image-rendering:pixelated;
}

/* -------- page shell: one screen, no scroll -------- */
.game{
  height:100dvh;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,0.15) 0 2px, transparent 2px 4px),
    radial-gradient(ellipse at 50% 30%, #3a2210 0%, var(--bg-void) 70%);
}

/* -------- HUD header -------- */
.hud-top{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  flex-wrap:wrap;
}
.brand{display:flex; flex-direction:column; gap:2px;}
.title{
  font-family:var(--font-pixel);
  font-size:clamp(14px, 2.6vw, 22px);
  margin:0;
  color:var(--feather-red);
  letter-spacing:1px;
}
.tag{
  margin:0;
  font-size:clamp(13px, 2vw, 18px);
  line-height:1.2;
  max-width:46ch;
}
.chain-line{
  font-family:var(--font-pixel);
  font-size:clamp(8px, 1.4vw, 11px);
  color:var(--hood-green-dark);
  margin:0;
  white-space:nowrap;
}

/* -------- stage: the scene itself -------- */
.stage{
  position:relative;
  flex:0 0 auto;
  min-height:0;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  aspect-ratio:3/1;
  border:4px solid var(--ink);
  box-shadow:var(--pixel-shadow);
  overflow:hidden;
  align-self:center;
}
.stage-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  image-rendering:pixelated;
  user-select:none;
  pointer-events:none;
  z-index:0;
}

/* the baked-in banner art still has the cat painted at its rest spot; once the
   sprite dashes away this patch (sampled from the alley's own floor tones)
   covers that spot instead of leaving a ghost second cat behind */
.cat-vacancy{
  position:absolute;
  left:35.3333%;
  top:39%;
  width:29.3333%;
  height:61%;
  z-index:1;
  background:
    repeating-linear-gradient(115deg, rgba(120,75,35,0.10) 0 3px, transparent 3px 34px),
    linear-gradient(180deg, #e2b077 0%, #dfae73 60%, #d6a166 100%);
  image-rendering:pixelated;
}

/* the cat sprite: a CSS-sprite crop of the SAME approved banner art,
   positioned to sit pixel-for-pixel over its own painted position at rest,
   then dashed forward on click. left/top/width/height are the crop box
   (530,195)-(970,500) expressed as % of the 1500x500 source image. */
.cat-sprite{
  position:absolute;
  left:35.3333%;
  top:39%;
  width:29.3333%;
  height:61%;
  z-index:2;
  border:0;
  padding:0;
  background:transparent;
  overflow:hidden;
  transform:translateX(calc(var(--dash, 0) * 1%));
  transition:transform 0.22s cubic-bezier(.22,1.4,.4,1);
  outline-offset:4px;
}
.cat-sprite .sprite-crop{
  position:absolute;
  left:-120.4545%;
  top:-63.9344%;
  width:340.9091%;
  height:163.9344%;
  max-width:none;
  image-rendering:pixelated;
  user-select:none;
  pointer-events:none;
}
.cat-sprite.hopping{ animation:hop 0.34s ease-out; }
@keyframes hop{
  0%   { transform:translateX(calc(var(--dash, 0) * 1%)) translateY(0) scale(1,1); }
  35%  { transform:translateX(calc(var(--dash, 0) * 1%)) translateY(-16%) scale(0.9,1.12); }
  65%  { transform:translateX(calc(var(--dash, 0) * 1%)) translateY(-6%) scale(1.05,0.95); }
  100% { transform:translateX(calc(var(--dash, 0) * 1%)) translateY(0) scale(1,1); }
}
.cat-sprite:hover{ filter:brightness(1.08); }
.cat-sprite:focus-visible{ outline:3px solid var(--gold); }

/* wanted poster: tiny background detail pinned to the stall post,
   top-left of the scene, clear of the sprite and shopkeeper */
.wanted-poster{
  position:absolute;
  z-index:3;
  left:2%; top:6%;
  width:clamp(72px, 15%, 128px);
  padding:var(--sp-2) var(--sp-2) var(--sp-3);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transform:rotate(-2deg);
  box-shadow:3px 3px 0 rgba(20,10,4,0.55);
  border-width:2px;
}
.wanted-title{
  font-family:var(--font-pixel);
  font-size:clamp(7px, 1.4vw, 10px);
  color:var(--feather-red);
}
.wanted-name{
  font-family:var(--font-pixel);
  font-size:clamp(6px, 1.1vw, 8px);
  color:var(--ink);
  text-align:center;
}
.wanted-crime{
  font-size:clamp(9px, 1.6vw, 12px);
  line-height:1.1;
  text-align:center;
  color:var(--wood-brown);
}
.wanted-ca{
  font-size:clamp(7px, 1.3vw, 9px);
  word-break:break-all;
  text-align:center;
  color:var(--hood-green-dark);
}

/* shop cam readout: real canary, top-right of the stage */
.shop-cam{
  position:absolute;
  z-index:3;
  top:4%; right:2%;
  max-width:58%;
  margin:0;
  font-family:var(--font-pixel);
  font-size:clamp(6px, 1.2vw, 9px);
  line-height:1.5;
  color:var(--gold);
  background:rgba(20,10,4,0.72);
  padding:5px 8px;
  border:2px solid var(--ink);
  text-align:right;
  white-space:normal;
}

/* -------- HUD footer -------- */
.hud-bottom{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  flex-wrap:wrap;
}
.counter-block{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.counter-label{
  font-family:var(--font-pixel);
  font-size:clamp(7px, 1.3vw, 10px);
  color:var(--wood-brown);
}
.counter-value{
  font-family:var(--font-pixel);
  font-size:clamp(18px, 4vw, 30px);
  color:var(--fish-teal);
  text-shadow:2px 2px 0 var(--ink);
}

.ca-block{ flex:1 1 220px; display:flex; justify-content:center; min-width:0; }
.ca-copy{
  background:var(--wood-dark);
  color:var(--gold);
  border:2px solid var(--ink);
  padding:var(--sp-2) var(--sp-3);
  display:flex; align-items:baseline; gap:8px;
  max-width:100%;
  box-shadow:3px 3px 0 rgba(20,10,4,0.55);
}
.ca-label{ font-family:var(--font-pixel); font-size:9px; color:var(--feather-red); flex:0 0 auto; }
.ca-value{ font-size:clamp(13px, 2.4vw, 18px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ca-hint{ font-size:11px; color:var(--floor-tan); flex:0 0 auto; opacity:0.8; }
.ca-copy:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(20,10,4,0.55); }

.cta-block{ display:flex; align-items:center; gap:var(--sp-3); }
.buy-btn{
  font-family:var(--font-pixel);
  font-size:clamp(9px, 1.6vw, 12px);
  background:var(--hood-green);
  color:var(--cream);
  padding:var(--sp-3) var(--sp-4);
  border:3px solid var(--ink);
  box-shadow:var(--pixel-shadow);
  white-space:nowrap;
}
.buy-btn:hover{ background:var(--hood-green-dark); }
.buy-btn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 rgba(20,10,4,0.55); }

.x-link{
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:var(--cream);
  border:3px solid var(--ink);
  box-shadow:3px 3px 0 rgba(20,10,4,0.55);
  color:var(--ink);
  flex:0 0 auto;
}
.x-link:hover{ background:var(--gold); }
.x-icon rect{ fill:currentColor; }

/* -------- canary -------- */
.canary{
  flex:0 0 auto;
  margin:0;
  text-align:center;
  font-size:12px;
  color:var(--wood-brown);
}

/* -------- noscript -------- */
.noscript-fallback{
  padding:var(--sp-6);
  text-align:center;
  font-family:var(--font-body);
}
.noscript-fallback h1{ font-family:var(--font-pixel); color:var(--feather-red); font-size:20px; }
.noscript-fallback a{ display:inline-block; margin-top:var(--sp-4); padding:var(--sp-3) var(--sp-4);
  background:var(--hood-green); border:3px solid var(--ink); font-family:var(--font-pixel); font-size:12px; }

/* -------- responsive: 360 / 390 mobile, >=920 desktop -------- */
@media (max-width:480px){
  .game{ padding:var(--sp-2) var(--sp-2); gap:var(--sp-2); }
  .hud-top{ padding:var(--sp-2) var(--sp-3); justify-content:center; text-align:center; flex-direction:column; gap:4px; }
  .brand{ align-items:center; }
  .tag{ max-width:34ch; }
  .stage{ max-width:100%; }
  .hud-bottom{ padding:var(--sp-2) var(--sp-3); justify-content:center; }
  .counter-block{ align-items:center; order:1; }
  .ca-block{ order:3; flex-basis:100%; }
  .cta-block{ order:2; }
  .wanted-poster{ display:none; } /* tiny background detail - hidden on very small screens so HUD stays legible, per progressive fallback */
  .shop-cam{ font-size:6px; padding:3px 5px; }
}

@media (min-width:920px){
  /* removed max-height cap: it broke the stage's exact 3:1 aspect ratio, which
     desynced the click-to-dash sprite crop from the baked banner art beneath it */
}

/* -------- reduced motion -------- */
@media (prefers-reduced-motion: reduce){
  .cat-sprite{ transition:none; }
  .cat-sprite.hopping{ animation:none; }
}

/* -------- boot error banner (populated by inline head script) -------- */
#boot-error, #boot-error-promise{ font-family:var(--font-body); }