/* ============================================================
   HERMES CONTROL STATION — "Hermes Backyard" pixel world UI.
   Chunky pixel chrome + lively bot animation.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;800&family=Press+Start+2P&display=swap');

:root {
  --clay:#D97757; --cream:#F4EFE6; --ink:#15110c; --wood:#6b4326; --wood-2:#3a2f22;
  --panel:#241c14; --muted:#b59a78;
  --ok:#39d98a; --warn:#E8A33D; --bad:#ff5f56; --idle:#9C8E7C;
}
* { box-sizing:border-box; }
html,body{ margin:0; min-height:100%; background:#0c0a07; overflow-x:hidden;
  color:var(--cream); font-family:'JetBrains Mono',ui-monospace,monospace; image-rendering:pixelated; }
body::after{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 4px);
  mix-blend-mode:multiply; opacity:.25; }
/* full-bleed: edge to edge */
.wrap{ max-width:none; margin:0; padding:0 0 28px; }

/* chunky pixel panel base */
.pixel{ background:var(--panel);
  box-shadow:0 0 0 3px var(--wood),0 0 0 6px var(--ink),inset 0 3px 0 rgba(255,255,255,.05),inset 0 0 0 2px var(--wood-2); }

/* ---------- top ribbon ---------- */
.ribbon{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 20px; margin:0 0 8px; }
.ribbon .mk{ width:30px; height:30px; image-rendering:pixelated; }
.ribbon h1{ font-family:'Press Start 2P',monospace; font-size:14px; color:var(--clay); margin:0; text-shadow:2px 2px 0 #000; }
.ribbon .tag{ font-size:10px; color:var(--muted); letter-spacing:.1em; }
.ribbon .sp{ flex:1; }
.kv{ display:flex; flex-direction:column; gap:4px; padding:0 12px; }
.kv .k{ font-size:8px; font-family:'Press Start 2P',monospace; color:var(--muted); }
.kv .v{ font-size:13px; font-weight:700; }
.kv .v.ok{ color:var(--ok); }
.badge{ font-family:'Press Start 2P',monospace; font-size:9px; padding:9px 11px; color:var(--warn);
  background:#3a2a12; box-shadow:0 0 0 3px var(--warn),0 0 0 6px var(--ink); }
.badge.live{ color:var(--ok); box-shadow:0 0 0 3px var(--ok),0 0 0 6px var(--ink); }

/* ---------- the stage (pixel world) ---------- */
.stage{ position:relative; width:100%; aspect-ratio:240/162; overflow:hidden;
  box-shadow:0 0 0 4px var(--wood),0 0 0 8px var(--ink),0 18px 40px rgba(0,0,0,.6); }
.stage .scene{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; display:block; }

/* ---------- weather overlay ---------- */
.weather{ position:absolute; inset:0; pointer-events:none; z-index:8; overflow:hidden; }
.drop{ position:absolute; top:-12%; width:2px; height:9%;
  background:linear-gradient(transparent, rgba(180,205,235,.75)); transform:rotate(8deg);
  animation:rainfall linear infinite; }
.steam{ position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,242,214,.45), transparent 70%); animation:rise 3.6s ease-out infinite; }
.smoke{ position:absolute; width:7px; height:7px; border-radius:50%;
  background:radial-gradient(circle, rgba(214,206,196,.5), transparent 70%); animation:rise 4.2s ease-out infinite; }
@keyframes rainfall{ from{ top:-12%; } to{ top:112%; } }
@keyframes rise{ 0%{ transform:translateY(0) scale(.5); opacity:0 } 18%{ opacity:.7 }
  100%{ transform:translateY(-46px) scale(1.7); opacity:0 } }

/* ----- bots: nested layers so transforms don't collide -----
   .bot      = position + feet anchor + glide between zones
   .anim     = idle hop / flight bob
   .fig      = facing flip
   children  = sprite, props, pip, bubble                     */
.bot{ position:absolute; transform:translate(-50%,-100%); transform-origin:bottom center;
  transition:left .9s ease, top .9s ease; z-index:5; }
.bot.walking{ z-index:8; }
.anim{ display:block; transform-origin:bottom center; }
.anim.bob{ animation:hop var(--bob,2s) cubic-bezier(.34,.62,.4,1) infinite; }
.anim.fly{ animation:fly var(--bob,3.4s) ease-in-out infinite; }
.bot.walking .anim{ animation:hop .55s cubic-bezier(.34,.62,.4,1) infinite; }
.fig{ position:relative; display:block; transform:scaleX(var(--face,1)); transform-origin:bottom center;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.45)); }
.bsprite{ width:100%; height:auto; display:block; image-rendering:pixelated; }

/* status pip */
.pip{ position:absolute; top:-7%; left:50%; transform:translateX(-50%); width:6px; height:6px; }
.pip.s-working{ background:var(--warn); animation:blink .6s steps(1) infinite; }
.pip.s-online{ background:var(--ok); }
.pip.s-idle{ background:var(--idle); }
.pip.s-offline{ background:var(--bad); }

/* speech / task bubble (counter-flips so text stays readable) */
.bubble{ position:absolute; bottom:104%; left:50%; transform:translateX(-50%) scaleX(var(--face,1));
  white-space:nowrap; font-size:9px; padding:5px 7px; color:var(--cream);
  background:var(--ink); box-shadow:0 0 0 2px var(--clay); z-index:9; }
.bubble::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); width:4px; height:4px; background:var(--ink); }

/* held / scene props */
.prop{ position:absolute; image-rendering:pixelated; }
.prop .psprite{ width:100%; height:auto; display:block; }
.prop.hammer{ width:30%; right:-10%; top:34%; transform-origin:50% 92%; animation:swing .5s ease-in-out infinite; }
.prop.brush{ width:22%; right:-6%; top:40%; transform-origin:50% 100%; animation:paint .85s ease-in-out infinite; }
.prop.easel{ width:64%; left:-60%; bottom:-4%; }
/* Cú perched = still; wings only show while flying tree<->house */
.anim.still{ animation:none !important; }
.bot.flying .anim{ animation:flyarc 1.05s ease-in-out; }
.prop.wing{ width:24%; top:30%; display:none; }
.prop.wing.l{ left:-12%; transform-origin:100% 50%; }
.prop.wing.r{ right:-12%; transform-origin:0 50%; }
.prop.wing.r .psprite{ transform:scaleX(-1); }
.bot.flying .prop.wing{ display:block; }
.bot.flying .prop.wing.l{ animation:flap .2s ease-in-out infinite; }
.bot.flying .prop.wing.r{ animation:flap .2s ease-in-out infinite reverse; }
/* Phinease holds a blueprint; Candace holds up a phone */
.prop.blueprint{ width:46%; left:30%; bottom:4%; z-index:4; transform:rotate(-7deg); }
.prop.phone{ width:26%; right:-4%; top:26%; z-index:4; transform-origin:bottom center; animation:filmsway 1.5s ease-in-out infinite; }
.prop.cursor{ width:10%; left:34%; top:36%; background:var(--cream); height:6%;
  animation:blink .55s steps(1) infinite; }
.prop.laptop{ width:62%; left:20%; bottom:-8%; z-index:3; transform-origin:bottom center; animation:type 1.1s ease-in-out infinite; }
.rec{ position:absolute; top:-22%; right:-18%; font:6px 'Press Start 2P',monospace; color:#fff;
  background:#D63057; padding:3px 4px; box-shadow:0 0 0 2px var(--ink); animation:blink .7s steps(1) infinite; }

/* persistent model tag under each bot */
.modeltag{ position:absolute; top:102%; left:50%; transform:translateX(-50%);
  font:7px 'Press Start 2P',monospace; white-space:nowrap; padding:3px 5px; color:var(--ink);
  background:var(--clay); box-shadow:0 0 0 2px var(--ink); z-index:7; }


/* in-world signs for zones */
.sign{ position:absolute; transform:translate(-50%,-100%); z-index:6; text-align:center;
  font-family:'Press Start 2P',monospace; font-size:8px; color:var(--cream);
  background:var(--wood); padding:5px 7px; box-shadow:0 0 0 2px var(--ink),0 4px 0 var(--wood-2); }
.sign .cnt{ display:block; font-size:7px; color:#ffe1ad; margin-top:3px; }
.sign.lair{ background:#2b2f36; box-shadow:0 0 0 2px var(--ink); }
.flag{ position:absolute; transform:translate(-50%,-100%); z-index:7; font-size:8px;
  font-family:'Press Start 2P',monospace; color:#fff; padding:5px 7px; background:var(--bad);
  box-shadow:0 0 0 2px var(--ink); transform-origin:bottom center; animation:wave 1.2s ease-in-out infinite; }

/* ---------- bottom HUD ---------- */
.hud{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:14px; margin-top:14px; padding:0 8px; }
@media (max-width:880px){ .hud{ grid-template-columns:1fr; } }
.hud .panel{ padding:14px 16px; }
.hud h2{ font-family:'Press Start 2P',monospace; font-size:10px; color:var(--clay); margin:0 0 12px; text-shadow:1px 1px 0 #000; }
.mline{ display:flex; align-items:baseline; gap:8px; margin-bottom:10px; font-size:11px; }
.mline .id{ font-family:'Press Start 2P',monospace; font-size:9px; color:var(--warn); }
.mline .ti{ color:var(--cream); }
.hops{ display:flex; gap:5px; margin-bottom:8px; }
.hop{ flex:1; height:22px; display:grid; place-items:center; font-size:9px; color:var(--muted); background:#1a150e; box-shadow:inset 0 0 0 2px var(--wood-2); }
.hop.done{ color:#0c0a07; background:var(--ok); box-shadow:inset 0 0 0 2px #1d8a57; }
.hop.active{ color:#0c0a07; background:var(--warn); box-shadow:inset 0 0 0 2px #a06a18; animation:blink .7s steps(1) infinite; }
.retry{ display:flex; align-items:center; gap:7px; font-size:10px; color:var(--muted); margin-top:6px; }
.rpip{ width:9px; height:9px; background:var(--wood-2); } .rpip.on{ background:var(--bad); }
.mfeed{ margin-top:12px; display:flex; flex-direction:column; gap:5px; }
.mrow{ display:flex; gap:8px; font-size:10.5px; align-items:center; }
.mrow .who{ font-weight:700; min-width:62px; }
.mrow .tx{ color:var(--cream); opacity:.9; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mrow.new{ animation:slidein .5s ease; }
.leds{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.led{ display:flex; align-items:center; gap:8px; padding:7px 9px; font-size:10.5px; background:#1a150e; box-shadow:inset 0 0 0 2px var(--wood-2); }
.led .b{ width:9px; height:9px; flex:0 0 auto; }
.led .lat{ margin-left:auto; font-size:8.5px; color:var(--muted); }
.b.up{ background:var(--ok); animation:blink 1.3s steps(1) infinite; }
.b.degraded{ background:var(--warn); animation:blink .5s steps(1) infinite; }
.b.down{ background:var(--bad); }
.svc{ display:flex; align-items:center; gap:10px; margin-bottom:12px; padding:9px 11px; background:#13251a; box-shadow:inset 0 0 0 2px #1d8a57; }
.svc.down{ background:#2a1411; box-shadow:inset 0 0 0 2px #8a2f2a; }
.svc .big{ font-family:'Press Start 2P',monospace; font-size:9px; color:var(--ok); }
.svc.down .big{ color:var(--bad); }
.svc .meta{ margin-left:auto; font-size:9px; color:var(--muted); text-align:right; }
.cbig{ font-family:'Press Start 2P',monospace; font-size:18px; color:var(--clay); }
.csub{ font-size:9px; color:var(--muted); margin:6px 0 14px; }
.fam{ display:flex; align-items:center; gap:8px; margin:6px 0; font-size:10px; }
.fam .l{ width:48px; color:var(--muted); }
.fam .bar{ flex:1; height:11px; background:#1a150e; box-shadow:inset 0 0 0 2px var(--wood-2); }
.fam .fill{ height:100%; }
.fam .n{ width:46px; text-align:right; }
.spark{ display:flex; align-items:flex-end; gap:3px; height:40px; margin:12px 0 4px; }
.spark .s{ flex:1; background:var(--clay); min-height:3px; box-shadow:inset 0 -2px 0 #b85a3c; }
.lbl{ font-size:8px; font-family:'Press Start 2P',monospace; color:var(--muted); margin:14px 0 7px; }
footer{ margin-top:20px; text-align:center; font-size:10.5px; color:var(--muted); line-height:1.8; }
footer code{ color:var(--clay); }

/* ---------- keyframes ---------- */
@keyframes hop{ 0%,100%{transform:translateY(0) scaleY(1)} 50%{transform:translateY(-4%) scaleY(1.015)} }
@keyframes fly{ 0%{transform:translate(0,0)} 25%{transform:translate(14%,-26%)}
  50%{transform:translate(0,-8%)} 75%{transform:translate(-14%,-26%)} 100%{transform:translate(0,0)} }
@keyframes swing{ 0%,100%{transform:rotate(-14deg)} 50%{transform:rotate(48deg)} }
@keyframes paint{ 0%,100%{transform:translate(0,0) rotate(-10deg)} 50%{transform:translate(-14%,-12%) rotate(10deg)} }
@keyframes flap{ 0%,100%{transform:rotate(10deg)} 50%{transform:rotate(-30deg)} }
@keyframes type{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3%)} }
@keyframes flyarc{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16%)} }
@keyframes filmsway{ 0%,100%{transform:rotate(-4deg)} 50%{transform:rotate(4deg)} }
@keyframes blink{ 50%{opacity:.2} }
@keyframes wave{ 0%,100%{transform:translate(-50%,-100%) rotate(-4deg)} 50%{transform:translate(-50%,-100%) rotate(5deg)} }
@keyframes slidein{ from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; } }