:root{
  --bg: #072a2e;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#007b7f;
  --accent-2:#b7e4c7;
  --radius:12px;
  --shadow: 0 6px 18px rgba(16,24,40,0.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background-color: var(--bg);
  color:#072a2e;
  -webkit-font-smoothing:antialiased;
}
.page{max-width:960px;margin:28px auto;padding:18px}
.hero{background-color:var(--accent-2);border-radius:var(--radius);padding:24px 20px;box-shadow:var(--shadow);display:flex;align-items:center;gap:18px;justify-content:flex-start}
.hero-text{text-align:left}
.name{font-size:3.2rem;margin:0;letter-spacing:-1px}
.tag{margin:6px 0 0;font-size:1.1rem;color:var(--muted)}

/* Featured hero video styling */
.video-card{padding:0;margin-top:18px;overflow:hidden}
.video-card .hero-video{width:100%;height:auto;max-height:420px;display:block;object-fit:cover;border-radius:0}
.video-card{border-radius:12px;box-shadow:var(--shadow)}

.avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid rgba(255,255,255,0.8);box-shadow:0 6px 18px rgba(16,24,40,0.12)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:18px}
.card{background:var(--card);border-radius:12px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:12px;transition:transform .18s ease, box-shadow .18s ease}
.card:focus{outline:3px solid rgba(255,183,3,0.18)}
.card:hover{transform:translateY(-6px)}
.card.siren-flash{animation: cardSiren 420ms steps(1) infinite}
@keyframes cardSiren{
  0%{background:#e63946}
  25%{background:linear-gradient(90deg,#e63946,#ff7b54)}
  50%{background:#2b6cff}
  75%{background:linear-gradient(90deg,#2b6cff,#6fa8ff)}
  100%{background:#e63946}
}

/* Tractor rumble: quick horizontal shake */
.card.rumble{animation:rumble 180ms linear infinite}
@keyframes rumble{
  0%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
  100%{transform:translateX(0)}
}

/* Dinosaur roar: grow slightly then return */
.card.roar-grow{animation:dinoRoar 900ms ease both}
@keyframes dinoRoar{
  0%{transform:scale(1)}
  30%{transform:scale(1.18)}
  60%{transform:scale(1.03)}
  100%{transform:scale(1)}
}

/* When the dino roars, show a jungle background on that card. Uses image if present, otherwise a green gradient fallback. */
#dino-card.roar-grow{
  background: url('assets/jungle_bg.png') center/cover no-repeat, linear-gradient(135deg,#2e7d32,#66bb6a);
  color: #fff;
  transition: background .25s ease, color .12s ease;
  /* make text more readable on busy background */
  text-shadow: 0 3px 10px rgba(0,0,0,0.6);
}
#dino-card.roar-grow h2,
#dino-card.roar-grow p {
  color: #fff;
}
#dino-card.roar-grow .action{
  background: rgba(255,255,255,0.9);
  color: #072a2e;
}
.art{width:120px;height:80px;display:flex;align-items:center;justify-content:center}
.icon{width:110px;height:70px}
.card h2{margin:0;font-size:1.2rem}
.card p{margin:0;color:var(--muted);text-align:center}
.action{background:var(--accent);border:0;padding:10px 14px;border-radius:10px;color:#072a2e;font-weight:700;cursor:pointer}
.action:active{transform:translateY(2px)}
.foot{text-align:center;margin-top:18px;color:var(--muted)}

/* Animations */
.bounce{animation:bounce 700ms cubic-bezier(.22,.9,.32,1)}
@keyframes bounce{0%{transform:translateY(0)}30%{transform:translateY(-14px)}60%{transform:translateY(0)}100%{transform:translateY(0)}}

.wiggle{animation:wiggle 700ms ease}
@keyframes wiggle{0%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}100%{transform:rotate(0)}}

/* small screens tweak */
@media (max-width:620px){.hero{flex-direction:column;text-align:center}.hero-text{text-align:center}.name{font-size:2.6rem}}

@media (max-width:420px){.name{font-size:2.4rem}.art{width:96px;height:64px}.icon{width:88px;height:56px}}