:root {
  --bg:#050816;
  --panel:#0b1020;
  --accent:#67e8f9;
  --accent2:#a855f7;
  --danger:#fb7185;
  --good:#4ade80;
  --muted:#9aa4b2;
  --text:#e5f2ff;
  --border:#1f2937;
  --radius-lg:18px;
  --radius-md:12px;
  --radius-pill:999px;
  --shadow:0 18px 40px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  min-height:100%;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:radial-gradient(circle at top,#1f2933 0,#050816 45%,#030712 100%);
  color:var(--text);
}
body{
  padding:16px;
  display:flex;
  justify-content:center;
}
.app{
  width:100%;
  max-width:1100px;
  background:
    radial-gradient(circle at 0 0,rgba(103,232,249,.12),transparent 55%),
    radial-gradient(circle at 100% 100%,rgba(168,85,247,.12),transparent 55%),
    linear-gradient(135deg,#020617,#020617);
  border-radius:24px;
  border:1px solid rgba(148,163,184,.45);
  box-shadow:var(--shadow);
  padding:14px;
  position:relative;
  overflow:hidden;
}
.app-inner{position:relative;z-index:1}
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
h1{
  margin:0;
  font-size:1.4rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.tagline{
  font-size:.86rem;
  color:var(--muted);
  margin-top:3px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  padding:4px 9px;
  border-radius:var(--radius-pill);
  background:rgba(22,163,74,.12);
  border:1px solid rgba(74,222,128,.5);
  color:var(--good);
  white-space:nowrap;
}
.badge-dot{
  width:8px;height:8px;border-radius:999px;
  background:var(--good);
  box-shadow:0 0 12px rgba(74,222,128,1);
  animation:livepulse 1.5s infinite ease-out;
}
@keyframes livepulse{
  0%{transform:scale(1);opacity:1}
  60%{transform:scale(1.7);opacity:0}
  100%{transform:scale(1);opacity:1}
}

.world-panel{
  background:radial-gradient(circle at top left,rgba(15,23,42,.96),rgba(15,23,42,1));
  border-radius:20px;
  border:1px solid var(--border);
  padding:9px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  margin-bottom:10px;
}
.panel-title{
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:6px;
}
.panel-title span.count{
  font-size:.78rem;
  color:rgba(148,163,184,.8);
}

.yard-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}
.yard-label{
  font-size:.75rem;
  color:var(--muted);
  white-space:nowrap;
}
.yard-slider{
  flex:1;
  display:flex;
  align-items:center;
  gap:4px;
}
.yard-slider input[type="range"]{
  width:100%;
}

.world{
  position:relative;
  width:100%;
  height:260px;
  border-radius:16px;
  overflow:hidden;
  margin-top:6px;
  border:1px solid rgba(30,64,175,.9);
  background:
    linear-gradient(to top,#0b5130 0 40%,#22c55e 40% 55%,#60a5fa 55% 78%,#0ea5e9 78% 100%);
}

/* time-of-day sky */
.world-day{
  background:
    linear-gradient(to top,#0b5130 0 40%,#22c55e 40% 55%,#60a5fa 55% 78%,#38bdf8 78% 100%);
}
.world-dawn{
  background:
    linear-gradient(to top,#0b5130 0 40%,#22c55e 40% 55%,#60a5fa 55% 78%,#f59e0b 78% 100%);
}
.world-dusk{
  background:
    linear-gradient(to top,#0b5130 0 40%,#22c55e 40% 55%,#4f46e5 55% 78%,#0f172a 78% 100%);
}
.world-night{
  background:
    linear-gradient(to top,#052e16 0 40%,#064e3b 40% 55%,#020617 55% 100%);
}

.sky{
  position:absolute;
  left:0;right:0;
  top:0;bottom:40%;
  pointer-events:none;
  z-index:0;
}
.sun,.moon{
  position:absolute;
  top:10%;
  right:12%;
  width:60px;height:60px;
  border-radius:50%;
  opacity:0;
  transition:opacity .5s ease-out,transform .8s ease-out;
}

.sun{
  background:radial-gradient(circle at 30% 30%,#fef9c3 0,#facc15 35%,#f97316 70%);
  box-shadow:0 0 26px rgba(250,204,21,.9);
  border:3px solid rgba(251,191,36,.8);
  transform-origin:center center;
  animation:sun-spin-coin 16s linear infinite;
}
@keyframes sun-spin-coin{
  0%{transform:translateZ(0) rotateY(0deg) scaleX(1);}
  25%{transform:translateZ(0) rotateY(90deg) scaleX(.25);}
  50%{transform:translateZ(0) rotateY(180deg) scaleX(1);}
  75%{transform:translateZ(0) rotateY(270deg) scaleX(.25);}
  100%{transform:translateZ(0) rotateY(360deg) scaleX(1);}
}
.moon{
  position:absolute;
  top:10%;
  right:12%;
  width:60px;height:60px;
  border-radius:50%;
  opacity:0;
  transition:opacity .5s ease-out,transform .8s ease-out;
}
.sun{
  background:radial-gradient(circle at 30% 30%,#fef9c3 0,#facc15 35%,#f97316 70%);
  box-shadow:0 0 26px rgba(250,204,21,.9);
}
.moon{
  background:radial-gradient(circle at 30% 30%,#e5e7eb 0,#9ca3af 45%,#4b5563 80%);
  box-shadow:0 0 18px rgba(148,163,184,.9);
  transform:translateY(10px);
}
.stars{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(#e5e7eb 1px, transparent 1px),
    radial-gradient(#cbd5f5 1px, transparent 1px);
  background-size:120px 120px,200px 200px;
  background-position:0 0,60px 80px;
  opacity:0;
  transition:opacity .8s ease-out;
}

.world-day .sun,
.world-dawn .sun{
  opacity:1;
}
.world-night .moon,
.world-dusk .moon{
  opacity:1;
}
/* ensure opposite body is hidden so only one shows */
.world-day .moon,
.world-dawn .moon,
.world-night .sun,
.world-dusk .sun{
  opacity:0;
}
.world-night .stars,
.world-dusk .stars{
  opacity:.9;
}

.fence{
  position:absolute;
  left:0;right:0;
  bottom:43%;
  height:40px;
  background:repeating-linear-gradient(
    to right,
    #b45309 0 12px,
    #92400e 12px 14px
  );
  border-top:3px solid #713f12;
  border-bottom:3px solid #451a03;
  box-shadow:0 4px 8px rgba(0,0,0,.5);
  opacity:.9;
  z-index:3;
}

.ground{
  position:absolute;
  left:0;right:0;
  bottom:0;
  height:40%;
  background:
    repeating-linear-gradient(45deg,#14532d 0 4px,#166534 4px 8px),
    radial-gradient(circle at top,#16a34a 0,#14532d 55%,#052e16 100%);
  z-index:1;
}

/* weather overlays */
.cloud,.raindrop,.snowflake{
  position:absolute;
  pointer-events:none;
}
.cloud{
  width:90px;height:40px;
  background:radial-gradient(circle at 20% 40%,#f9fafb 0,#e5e7eb 45%,#9ca3af 80%);
  border-radius:40px;
  box-shadow:0 8px 18px rgba(15,23,42,.5);
  opacity:.85;
  animation:cloud-drift 40s linear infinite;
  z-index:1;
}
@keyframes cloud-drift{
  0%{transform:translateX(-10%)}
  100%{transform:translateX(110%)}
}
.raindrop{
  width:2px;height:22px;
  background:linear-gradient(to bottom,rgba(191,219,254,.2),rgba(59,130,246,.9));
  border-radius:999px;
  opacity:.7;
  animation:rain-fall 0.9s linear infinite;
  z-index:1;
}
@keyframes rain-fall{
  0%{transform:translateY(-20px)}
  100%{transform:translateY(120px)}
}
.snowflake{
  font-size:1rem;
  color:#e5e7eb;
  opacity:.8;
  animation:snow-fall 4s linear infinite;
  z-index:1;
}
@keyframes snow-fall{
  0%{transform:translateY(-10px)}
  100%{transform:translateY(120px)}
}

.animal-sprite{
  position:absolute;
  transform-origin:50% 100%;
  cursor:pointer;
  transition:transform .6s ease-out,left .6s ease-out,top .6s ease-out,filter .3s ease-out;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.9));
  z-index:4;
}
.animal-sprite.dead{
  opacity:.4;
  filter:drop-shadow(0 0 8px rgba(148,163,184,.8)) hue-rotate(-25deg);
}

.speech{
  position:absolute;
  transform:translate(-50%,-105%);
  font-size:.78rem;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(15,23,42,.92);
  border:1px solid rgba(148,163,184,.8);
  color:var(--text);
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease-out;
  z-index:5;
}
.speech.show{opacity:1}

.mood{
  position:absolute;
  transform:translate(-50%,-150%);
  font-size:1.3rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease-out,transform .5s ease-out;
  z-index:5;
}
.mood.show{
  opacity:1;
  transform:translate(-50%,-190%);
}

/* dog sprite */

.dog-shape{
  position:relative;
  width:90px;
  height:70px;
}
.dog-body{
  position:absolute;
  left:10px;right:6px;
  top:22px;bottom:6px;
  background:#fbbf77;
  border-radius:50% 55% 45% 45%;
  box-shadow:0 6px 14px rgba(0,0,0,.6);
}
.dog-fat .dog-body{
  transform:scale(1.18,1.12);
  border-radius:55% 60% 50% 50%;
}
.dog-skinny .dog-body{
  transform:scale(.9,.9);
}
.dog-head{
  position:absolute;
  width:54px;height:40px;
  left:-2px;top:8px;
  background:#fed7aa;
  border-radius:55% 55% 50% 50%;
  box-shadow:0 3px 7px rgba(0,0,0,.35);
}

/* two ears */
.dog-ear{
  position:absolute;
  width:18px;height:24px;
  top:-10px;
  background:#92400e;
  border-radius:60% 60% 20% 20%;
  box-shadow:0 3px 6px rgba(0,0,0,.35);
}
.dog-ear-left{
  left:-4px;
  transform:rotate(-10deg);
}
.dog-ear-right{
  right:-4px;
  transform:rotate(10deg);
}
.dog-ear-spot{
  position:absolute;
  width:14px;height:16px;
  background:#b45309;
  border-radius:70% 40% 30% 50%;
  top:2px;left:3px;
  opacity:.7;
}

/* two eyes */
.dog-eye{
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:#111827;
  top:16px;
  box-shadow:0 0 0 2px rgba(15,23,42,.45);
}
.dog-eye-left{ left:10px; }
.dog-eye-right{ right:10px; }

.dog-nose{
  position:absolute;
  width:9px;height:7px;
  border-radius:40%;
  background:#111827;
  bottom:10px;left:50%;
  transform:translateX(-50%);
}
.dog-mouth-line{
  position:absolute;
  width:18px;height:10px;
  border-bottom:2px solid #111827;
  border-radius:0 0 60% 60%;
  bottom:5px;left:50%;
  transform:translateX(-50%);
}

.dog-leg{
  position:absolute;
  width:9px;height:15px;
  background:#fbbf77;
  bottom:0;
  border-radius:20px;
  box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.dog-leg.front{left:22px}
.dog-leg.front2{left:33px}
.dog-leg.back{right:18px}
.dog-leg.back2{right:28px}

.dog-tail{
  position:absolute;
  width:28px;height:10px;
  right:4px;top:30px;
  border-radius:60% 40% 40% 60%;
  background:#fbbf77;
  transform-origin:left center;
  animation:wagtail 1.4s ease-in-out infinite;
}
@keyframes wagtail{
  0%,100%{transform:rotate(10deg)}
  50%{transform:rotate(-22deg)}
}
.dog-sad .dog-tail{
  animation:none;
  transform:rotate(-18deg);
  opacity:.8;
}
.dog-ghost .dog-body,
.dog-ghost .dog-head,
.dog-ghost .dog-ear,
.dog-ghost .dog-leg,
.dog-ghost .dog-tail{
  background:rgba(148,163,184,.7);
  box-shadow:0 6px 14px rgba(148,163,184,.5);
}
.dog-ghost .dog-eye{background:#020617;box-shadow:none}
.dog-ghost .dog-ear-spot{display:none}


/* generic critter base for cat/rabbit/fox */
.critter-shape{
  position:relative;
  width:86px;
  height:66px;
}
.critter-body{
  position:absolute;
  left:12px;right:8px;
  top:22px;bottom:8px;
  background:#e5e7eb;
  border-radius:50% 52% 45% 45%;
  box-shadow:0 6px 14px rgba(0,0,0,.55);
}
.critter-head{
  position:absolute;
  width:42px;height:32px;
  left:0;top:14px;
  background:#e5e7eb;
  border-radius:55% 45% 48% 52%;
  box-shadow:0 4px 10px rgba(0,0,0,.45);
}
.critter-ear{
  position:absolute;
  width:16px;height:20px;
  top:-10px;
  background:#cbd5f5;
  border-radius:60% 60% 25% 25%;
  box-shadow:0 3px 6px rgba(0,0,0,.35);
}
.critter-ear.ear-left{left:0;}
.critter-ear.ear-right{right:0;}
.critter-eye{
  position:absolute;
  width:6px;height:6px;
  background:#020617;
  border-radius:50%;
  top:45%;
  box-shadow:0 0 0 2px rgba(248,250,252,.35);
}
.critter-eye.eye-left{left:26%;}
.critter-eye.eye-right{right:26%;}
.critter-nose{
  position:absolute;
  width:10px;height:7px;
  background:#111827;
  border-radius:50% 50% 60% 60%;
  bottom:8px;left:50%;
  transform:translateX(-50%);
}

.critter-leg{
  position:absolute;
  width:10px;height:16px;
  background:#e5e7eb;
  bottom:2px;
  border-radius:0 0 40% 40%;
  box-shadow:0 4px 6px rgba(0,0,0,.45);
}
.critter-leg.front{left:26px;}
.critter-leg.front2{left:40px;}
.critter-leg.back{right:28px;}
.critter-leg.back2{right:14px;}

.critter-tail{
  position:absolute;
  width:26px;height:10px;
  right:0;top:26px;
  background:#e5e7eb;
  border-radius:60% 80% 40% 60%;
  transform-origin:left center;
  transform:rotate(28deg);
  box-shadow:0 4px 10px rgba(0,0,0,.45);
}

/* CAT – sleek body, raised tail, whiskers */
.critter-cat .critter-body{
  background:#e5e7eb;
  border-radius:55% 60% 45% 50%;
}
.critter-cat .critter-head,
.critter-cat .critter-leg,
.critter-cat .critter-tail{
  background:#cbd5f5;
}
.critter-cat .critter-ear{
  background:#fbbf77;
  border-radius:50% 50% 20% 20%;
}
.critter-cat .critter-tail{
  width:20px;
  height:30px;
  right:4px;
  top:16px;
  border-radius:40% 40% 80% 80%;
  transform:rotate(10deg);
}
.critter-cat .critter-head::before{
  content:"";
  position:absolute;
  left:-10px;right:-10px;
  top:16px;
  height:2px;
  background:linear-gradient(to right,transparent,#020617,transparent);
  opacity:.7; /* whiskers */
}

/* RABBIT – long ears up, rounded body, puff tail */
.critter-rabbit .critter-ear{
  height:32px;
  width:14px;
  border-radius:60% 60% 40% 40%;
  background:#f9fafb;
}
.critter-rabbit .critter-body{
  border-radius:60% 60% 52% 60%;
  background:#e5e7eb;
}
.critter-rabbit .critter-head{
  background:#f3f4f6;
}
.critter-rabbit .critter-tail{
  width:16px;height:16px;
  right:4px;top:30px;
  border-radius:50%;
  background:#f9fafb;
  box-shadow:0 2px 4px rgba(0,0,0,.35);
}
.critter-rabbit .critter-leg{
  height:14px;
  border-radius:0 0 50% 50%;
}

/* FOX – orange body, darker ears, big white tail tip and chest */
.critter-fox .critter-body{
  background:#f97316;
  border-radius:52% 60% 45% 55%;
}
.critter-fox .critter-head{
  background:#fb923c;
  border-radius:48% 52% 40% 55%;
}
.critter-fox .critter-ear{
  background:#7c2d12;
}
.critter-fox .critter-tail{
  background:#f97316;
  border-radius:40% 90% 40% 90%;
}
.critter-fox .critter-tail::after{
  content:"";
  position:absolute;
  right:2px;top:2px;
  width:12px;height:12px;
  border-radius:50%;
  background:#fee2e2;
}
.critter-fox .critter-body::after{
  content:"";
  position:absolute;
  left:12px;right:16px;
  top:18px;
  height:18px;
  border-radius:40% 40% 60% 60%;
  background:linear-gradient(to bottom,#fee2e2,#fed7aa);
}

/* shared shape tweaks */
.critter-fat .critter-body{
  transform:scale(1.15,1.12);
}
.critter-skinny .critter-body{
  transform:scale(.9,1);
}
.critter-sad .critter-eye{
  top:48%;
}
.critter-ghost .critter-body,
.critter-ghost .critter-head,
.critter-ghost .critter-leg,
.critter-ghost .critter-tail,
.critter-ghost .critter-ear{
  background:rgba(148,163,184,.75);
  box-shadow:0 4px 10px rgba(148,163,184,.5);
}
.critter-ghost .critter-eye{
  background:#020617;
  box-shadow:none;
}
.critter-ghost .critter-tail::after{
  display:none;
}

.justin{
  position:absolute;
  bottom:50%;
  left:-15%;
  display:flex;
  align-items:flex-end;
  gap:8px;
  transition:left 18s linear;
  z-index:4; /* above fence so bubble is visible */
  pointer-events:none;
}

.justin-stick{
  position:relative;
  width:32px;
  height:70px;
}
/* cartoon African-style Justin */
.justin-stick .j-head{
  position:absolute;
  top:0;left:50%;
  width:26px;height:26px;
  transform:translateX(-50%);
  background:radial-gradient(circle at 30% 25%,#fed7aa 0,#fbbf77 45%,#ea580c 100%);
  border-radius:50%;
  box-shadow:0 0 0 2px rgba(15,23,42,.9);
}
/* simple cartoon hair */
.justin-stick .j-head::before{
  content:"";
  position:absolute;
  top:-3px;left:2px;right:2px;
  height:10px;
  background:linear-gradient(to right,#0f172a,#020617);
  border-radius:12px 12px 6px 6px;
}

/* tiny cartoon eyes + smile */
.justin-stick .j-head::after{
  content:"";
  position:absolute;
  left:6px;right:6px;top:11px;
  height:6px;
  background:
    radial-gradient(circle at 20% 50%,#020617 0, #020617 45%, transparent 46%),
    radial-gradient(circle at 80% 50%,#020617 0, #020617 45%, transparent 46%);
}
.justin-stick .j-face-smile{
  position:absolute;
  left:50%;top:17px;
  width:12px;height:6px;
  transform:translateX(-50%);
  border-bottom:2px solid rgba(15,23,42,.9);
  border-radius:0 0 12px 12px;
}
.justin-stick .j-body{
  position:absolute;
  top:22px;left:50%;
  width:26px;height:26px;
  transform:translateX(-50%);
  background:linear-gradient(145deg,#0ea5e9,#1d4ed8);
  border-radius:8px;
  box-shadow:0 6px 10px rgba(0,0,0,.6);
}
.justin-stick .j-body::after{
  content:"";
  position:absolute;
  inset:5px 6px;
  border-radius:6px;
  background:radial-gradient(circle at top,#e5f2ff33,#67e8f933);
}
.justin-stick .j-arm{
  position:absolute;
  top:24px;
  width:22px;height:3px;
  background:#4b3a27;
}
.justin-stick .j-arm-left{
  left:50%;
  transform-origin:right center;
  transform:translateX(-2px) rotate(14deg);
}
.justin-stick .j-arm-right{
  left:50%;
  transform-origin:left center;
  transform:translateX(-18px) rotate(-12deg);
}
.justin-stick .j-leg{
  position:absolute;
  top:40px;
  width:3px;height:26px;
  background:#111827;
  left:50%;
}
.justin-stick .j-leg-left{
  transform-origin:top center;
  transform:translateX(-7px) rotate(8deg);
}
.justin-stick .j-leg-right{
  transform-origin:top center;
  transform:translateX(5px) rotate(-6deg);
}
.justin-bubble{
  position:relative;
  z-index:5;

  max-width:220px;
  font-size:.78rem;
  padding:4px 8px;
  border-radius:16px;
  background:rgba(15,23,42,.95);
  border:1px solid rgba(148,163,184,.9);
  color:var(--text);
  box-shadow:0 8px 16px rgba(0,0,0,.8);
  pointer-events:auto;
}

/* layout bottom */
.layout{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);
  gap:10px;
  margin-top:8px;
}
@media(max-width:880px){
  .layout{grid-template-columns:minmax(0,1fr)}
}
.panel{
  background:radial-gradient(circle at top left,rgba(15,23,42,.96),rgba(15,23,42,1));
  border-radius:20px;
  border:1px solid var(--border);
  padding:9px 9px 8px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}

.pet-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:7px;
  margin-top:5px;
}
.pet-card{
  background:radial-gradient(circle at top,rgba(15,23,42,.96),rgba(15,23,42,1));
  border-radius:var(--radius-lg);
  border:1px solid rgba(55,65,81,.9);
  padding:7px;
  position:relative;
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .12s ease;
}
.pet-card:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(0,0,0,.8);
}
.pet-card.selected{
  border-color:rgba(103,232,249,.9);
  box-shadow:0 0 0 1px rgba(103,232,249,.7),0 12px 22px rgba(0,0,0,.9);
}
.pet-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}
.pet-main{
  display:flex;
  align-items:center;
  gap:6px;
}
.pet-avatar-small{
  width:30px;height:30px;
  border-radius:40%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  background:radial-gradient(circle at 0 0,rgba(103,232,249,.2),rgba(15,23,42,.96));
  border:1px solid rgba(148,163,184,.7);
  box-shadow:0 6px 14px rgba(0,0,0,.65);
}
.pet-name{
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.03em;
}
.pet-meta{
  font-size:.72rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.12em;
}
.pet-rel{
  font-size:.74rem;
  color:rgba(250,204,21,.9);
  text-align:right;
}
.pet-rel.danger{color:var(--danger)}
.pet-badge-dead{
  position:absolute;
  top:4px;right:6px;
  background:rgba(15,23,42,.9);
  border-radius:var(--radius-pill);
  padding:2px 8px;
  border:1px solid rgba(248,113,113,.8);
  font-size:.7rem;
  color:var(--danger);
}

.stat-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  margin-top:3px;
}
.stat{font-size:.73rem;}
.stat-label{
  display:flex;
  justify-content:space-between;
  color:var(--muted);
}
.stat-bar{
  height:6px;
  border-radius:999px;
  background:#020617;
  border:1px solid rgba(31,41,55,.9);
  overflow:hidden;
  margin-top:2px;
}
.stat-fill{
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#22c55e,#67e8f9);
  transform-origin:left;
  transform:scaleX(.5);
  transition:transform .25s ease-out;
}
.stat-fill.low{background:linear-gradient(90deg,#f97316,#fb7185)}
.stat-fill.mid{background:linear-gradient(90deg,#eab308,#67e8f9)}

.form-row{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:7px;
  align-items:end;
  margin-top:5px;
}
@media(max-width:680px){
  .form-row{grid-template-columns:minmax(0,1fr)}
}
label{
  font-size:.76rem;
  color:var(--muted);
  display:block;
  margin-bottom:3px;
  text-transform:uppercase;
  letter-spacing:.1em;
}
select,input[type="text"],input[type="range"]{
  width:100%;
  padding:5px 8px;
  border-radius:10px;
  border:1px solid rgba(55,65,81,.9);
  background:rgba(15,23,42,.98);
  color:var(--text);
  font-size:.86rem;
  outline:none;
}
select:focus,input[type="text"]:focus,input[type="range"]:focus{
  border-color:rgba(103,232,249,.9);
  box-shadow:0 0 0 1px rgba(103,232,249,.85);
}

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}
button{
  border-radius:999px;
  border:1px solid rgba(103,232,249,.85);
  background:radial-gradient(circle at 0 0,rgba(103,232,249,.2),rgba(15,23,42,1));
  color:var(--text);
  font-size:.78rem;
  padding:4px 11px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  cursor:pointer;
  box-shadow:0 8px 16px rgba(0,0,0,.7);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
  white-space:nowrap;
}
button.small{padding:3px 9px;font-size:.72rem}
button.secondary{
  border-color:rgba(148,163,184,.9);
  background:rgba(15,23,42,.98);
}
button.danger{
  border-color:rgba(248,113,113,.9);
  background:rgba(127,29,29,.85);
}
button:disabled{
  opacity:.55;
  cursor:default;
  box-shadow:none;
}
button:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 14px 22px rgba(0,0,0,.85);
}
button:active:not(:disabled){
  transform:translateY(1px) scale(.99);
  box-shadow:0 6px 12px rgba(0,0,0,.8);
}
.btn-icon{font-size:.95rem}

.toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  user-select:none;
  font-size:.76rem;
  color:var(--muted);
}
.toggle input{
  width:32px;height:18px;
  appearance:none;
  background:rgba(15,23,42,1);
  border-radius:999px;
  border:1px solid rgba(148,163,184,.9);
  position:relative;
  outline:none;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.toggle input::before{
  content:"";
  position:absolute;
  top:1px;left:1px;
  width:14px;height:14px;
  border-radius:50%;
  background:#e5f2ff;
  box-shadow:0 0 6px rgba(15,23,42,.9);
  transition:transform .2s ease;
}
.toggle input:checked{
  background:rgba(103,232,249,.2);
  border-color:rgba(103,232,249,.9);
}
.toggle input:checked::before{
  transform:translateX(12px);
}

.status-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
  margin-top:6px;
  font-size:.78rem;
  color:var(--muted);
  flex-wrap:wrap;
}
.status-row .error{color:var(--danger)}

.log{
  margin-top:6px;
  background:radial-gradient(circle at 0 0,rgba(15,23,42,.97),rgba(15,23,42,1));
  border-radius:var(--radius-md);
  border:1px dashed rgba(55,65,81,.95);
  padding:6px 8px;
  max-height:155px;
  overflow-y:auto;
  font-size:.78rem;
  color:var(--muted);
}
.log-entry{
  display:flex;
  justify-content:space-between;
  gap:6px;
  padding:1px 0;
}
.log-entry .time{
  font-variant-numeric:tabular-nums;
  color:rgba(148,163,184,.95);
}
.log-entry .msg{
  text-align:right;
  flex:1;
}


/* Override: keep Justin behind fence but speech bubble above it */
.justin-bubble{
  position:relative;
  margin-bottom:18px;
  z-index:6;
}

.hazard{
  position:absolute;
  font-size:1.4rem;
  text-shadow:0 0 6px rgba(0,0,0,.8);
  cursor:pointer;
  z-index:2;
}
.hazard:hover{
  transform:translate(-50%,-100%) scale(1.1);
}
.pet-meta-level{
  font-size:.82rem;
  color:var(--accent);
  font-weight:600;
  letter-spacing:.08em;
}

.pet-actions-slot{
  margin-top:6px;
  padding-top:4px;
  border-top:1px dashed rgba(55,65,81,.7);
}

.pet-card-actions{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.btn-xs{
  font-size:.7rem;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(75,85,99,.9);
  background:rgba(15,23,42,.95);
  color:#e5f2ff;
  display:inline-flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
}
.btn-xs .btn-icon{
  font-size:.8rem;
}
.btn-xs.danger{
  border-color:var(--danger);
  color:var(--danger);
}
.pet-card.selected{
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(103,232,249,.4), var(--shadow);
}

.death-timer{
  position:absolute;
  bottom:100%;
  left:50%;
  transform:translate(-50%,-4px);
  padding:2px 6px;
  font-size:.65rem;
  border-radius:var(--radius-pill);
  background:rgba(15,23,42,.92);
  border:1px solid rgba(55,65,81,.9);
  color:var(--text);
  box-shadow:0 0 10px rgba(15,23,42,.8);
  pointer-events:none;
}
.death-timer.warn{
  border-color:#facc15;
  color:#fde68a;
}
.death-timer.danger{
  border-color:var(--danger);
  color:#fecaca;
  box-shadow:0 0 12px rgba(248,113,113,.6);
}

@keyframes moon-coin-spin{
  0%{
    transform:translateY(10px) rotateY(0deg);
  }
  50%{
    transform:translateY(10px) rotateY(180deg) scaleX(.25);
  }
  100%{
    transform:translateY(10px) rotateY(360deg);
  }
}

.world-night .moon{
  opacity:1;
  animation:moon-coin-spin 14s linear infinite;
  transform-origin:center center;
}
.world-day .moon,
.world-dawn .moon{
  opacity:0;
}


.mini-overlay{
  position:absolute;
  inset:4% 4% auto 4%;
  background:rgba(0,0,0,0.75);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:20;
}
.mini-inner{
  background:var(--panel);
  border-radius:18px;
  padding:16px 18px 18px;
  box-shadow:0 12px 40px rgba(0,0,0,0.7);
  width:100%;
  max-width:420px;
  border:1px solid var(--accent);
}
.mini-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.mini-title{
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.9rem;
  color:var(--accent);
}
.mini-close{
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:1.1rem;
  cursor:pointer;
}
.mini-body{
  font-size:.9rem;
}
.mini-instructions{
  margin:0 0 8px;
  color:var(--muted);
}
.mini-hud{
  display:flex;
  justify-content:space-between;
  font-size:.85rem;
  margin-bottom:6px;
}
.mini-field{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  border:1px dashed var(--line);
  height:180px;
  margin-bottom:8px;
  background:radial-gradient(circle at 50% 0,#1f2933,#020617);
}
.mini-treat{
  position:absolute;
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  background:rgba(55,180,120,0.9);
  box-shadow:0 0 8px rgba(0,0,0,0.6);
  transform:translate(-50%,-50%);
  cursor:pointer;
}
.mini-treat::before{
  content:"🍖";
}
.mini-start{
  width:100%;
  border-radius:999px;
  border:none;
  padding:8px 10px;
  font-size:.9rem;
  cursor:pointer;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  color:white;
}

/* Level badge floated over animals */
.lvl-badge{
  position:absolute;
  top:-4px;
  left:50%;
  transform:translate(-50%,-100%);
  background:rgba(15,23,42,0.95);
  border-radius:999px;
  padding:2px 7px;
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1px solid rgba(148,163,253,0.9);
  color:#e5e7ff;
  pointer-events:none;
}
@media (max-width:768px){
  .mini-overlay{
    inset:6% 3% auto 3%;
  }
  .mini-field{
    height:150px;
  }
}


/* Upgraded Justin hazards: big, glowing, animated */
.hazard{
  position:absolute;
  font-size:2.2rem;
  text-shadow:0 0 8px rgba(0,0,0,.9), 0 0 16px rgba(220,38,38,.7);
  cursor:pointer;
  z-index:8;
  animation:hazard-pulse .85s ease-in-out infinite alternate;
}
.hazard.sparkler{
  text-shadow:0 0 10px rgba(248,250,252,.9),0 0 20px rgba(250,204,21,.9);
}
.hazard.can{
  text-shadow:0 0 10px rgba(15,23,42,.9),0 0 18px rgba(59,130,246,.8);
}
.hazard.spoiledFood{
  text-shadow:0 0 8px rgba(22,101,52,.9),0 0 18px rgba(34,197,94,.85);
}
.hazard:hover{
  transform:translate(-50%,-100%) scale(1.25) translateY(-2px);
}

@keyframes hazard-pulse{
  from{ transform:translate(-50%,-100%) scale(1.1) translateY(0); }
  to{ transform:translate(-50%,-100%) scale(1.25) translateY(-4px); }
}

/* Hazard HUD */
.hazard-hud{
  margin:6px 0 10px;
  padding:6px 8px;
  border-radius:10px;
  border:1px dashed rgba(248,113,113,.8);
  background:linear-gradient(90deg,rgba(30,64,175,.8),rgba(127,29,29,.7));
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:.78rem;
}
.hazard-hud-title{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#fee2e2;
  white-space:nowrap;
}
.hazard-hud-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.hazard-hud-pill{
  border-radius:999px;
  padding:2px 8px;
  background:rgba(15,23,42,.9);
  border:1px solid rgba(254,226,226,.8);
  color:#fee2e2;
  display:flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
}
.hazard-hud-pill span.emoji{
  font-size:1rem;
}
.hazard-hud-pill span.label{
  opacity:.9;
}
.hazard-hud-pill:hover{
  box-shadow:0 0 12px rgba(248,250,252,.5);
}


/* === Justin hazard SUPER-VISIBLE override === */
.hazard{
  position:absolute;
  font-size:2.4rem;
  text-shadow:0 0 8px rgba(0,0,0,.95),0 0 18px rgba(248,113,113,.9);
  cursor:pointer;
  z-index:7; /* above animals (4) and poo/toys (2) */
  animation:hazard-pulse .8s ease-in-out infinite alternate;
  transform:translate(-50%,-100%) scale(1.1);
}
.hazard:hover{
  transform:translate(-50%,-100%) scale(1.35);
}
@keyframes hazard-pulse{
  /* Force CyberPets layout to be centered on FileConverter.run global grid */
.app {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  grid-column: 1 / -1 !important;
}

.cyberpets-footer {
  grid-column: 1 / -1 !important;
}

  from{ transform:translate(-50%,-100%) scale(1.1); }
  to{ transform:translate(-50%,-100%) scale(1.28); }
}

.hazard{pointer-events:auto;}