:root { --bg:#0f1222; --card:#161a2f; --text:#e9ecf1; --muted:#9aa3b2; --accent:#6ee7ff; --ok:#22c55e; --warn:#f97316; }
*{box-sizing:border-box} body{margin:0;font:16px/1.5 system-ui,Segoe UI,Roboto,Ubuntu;color:var(--text);background: radial-gradient(1200px 600px at 10% -10%, #1f2651, transparent), var(--bg);} a{color:var(--accent)}
.container{max-width:980px;margin:40px auto;padding:0 16px}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:rgba(22,26,47,.7);backdrop-filter: blur(6px);position:sticky;top:0}
.brand{font-weight:700;text-decoration:none}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:860px){.grid-two{grid-template-columns:1fr}}
.btn{padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--text);cursor:pointer}
.btn-danger{border-color:#ef4444;color:#fecaca}
.form-grid p{margin:0 0 10px}
.muted{color:var(--muted)} .small{font-size:12px}


.status-card{display:flex;gap:12px;align-items:center;border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08)}
.status-hero{display:grid;justify-items:center;gap:8px;padding:30px;border-radius:20px;background:linear-gradient(145deg, rgba(255,255,255,.04), transparent);border:1px solid rgba(255,255,255,.08)}
.hero-text{font-size:22px;text-align:center}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;}
.dot.big{width:18px;height:18px}
.dot.calm{background:#60a5fa}
.dot.happy{background:#facc15}
.dot.tired{background:#a78bfa}
.dot.busy{background:#fb7185}
.dot.offgrid{background:#94a3b8}


/* Animations */
@keyframes pulseGlow {0%{box-shadow:0 0 0 rgba(34,197,94,.0)} 50%{box-shadow:0 0 30px rgba(34,197,94,.35)} 100%{box-shadow:0 0 0 rgba(34,197,94,.0)}}
@keyframes softShake {0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)}}
.ok-pulse{animation:pulseGlow 2.2s ease-in-out infinite}
.warn-shake{animation:softShake 1.2s ease-in-out infinite}


.history ul{list-style:none;padding:0}
.history li{padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.06)}


.preview{margin-top:14px}


/* Landing page */
.hero{display:grid;gap:16px;justify-items:center;text-align:center;padding:52px 24px}
.hero h1{font-size:40px;line-height:1.1;margin:0}
.hero p{max-width:720px}
.hero .kicker{font-weight:600;letter-spacing:.04em;color:var(--accent);text-transform:uppercase;font-size:14px}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap}
.glow{border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px 22px;background:linear-gradient(180deg, rgba(255,255,255,.04), transparent)}
.badge{display:inline-block;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 10px;margin:4px;font-size:12px;color:var(--muted)}
.site-footer{padding:24px;text-align:center;color:var(--muted)}

/* Countdown */
.countdown-card{display:grid;gap:10px;justify-items:center;margin:8px auto 18px auto;max-width:560px}
.countdown-rows{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.cd-chunk{display:grid;gap:4px;justify-items:center;min-width:84px;padding:10px 12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.02)}
.cd-num{font-size:28px;font-weight:700}
.cd-label{font-size:12px;color:var(--muted)}


/* PET: public page companion */
.pet{position:fixed;right:18px;bottom:18px;z-index:20;pointer-events:none}
.pet-emoji{font-size:34px;display:inline-block;transform-origin:center bottom}
.pet-heart{position:absolute;right:-4px;top:-8px;opacity:0;transition:opacity .3s, transform .3s}

/* Pet variants via data-pet */
.pet[data-pet="mochi"] [data-face]{content:"😺"}
.pet[data-pet="lumo"]  [data-face]{content:"🐥"}
.pet[data-pet="roo"]   [data-face]{content:"🐰"}
.pet[data-pet="puff"]  [data-face]{content:"🐻"}

/* Actions */
@keyframes pet-hop {0%{transform:translateY(0)} 30%{transform:translateY(-8px)} 60%{transform:translateY(0)} 100%{transform:translateY(0)}}
@keyframes pet-walk {0%{transform:translateX(0)} 50%{transform:translateX(-24px)} 100%{transform:translateX(0)}}
@keyframes pet-wiggle {0%,100%{transform:rotate(0)} 25%{transform:rotate(-10deg)} 75%{transform:rotate(10deg)}}
@keyframes pet-kiss {0%{opacity:0;transform:translate(0,0) scale(.5)} 40%{opacity:1;transform:translate(-10px,-18px) scale(1)} 100%{opacity:0;transform:translate(-16px,-30px) scale(1)}}

.pet[data-action="hop"]   [data-face]{animation:pet-hop .9s ease}
.pet[data-action="walk"]  [data-face]{animation:pet-walk 2.4s ease-in-out}
.pet[data-action="wiggle"][data-face]{animation:pet-wiggle .8s ease}
.pet[data-action="kiss"] .pet-heart{opacity:1;animation:pet-kiss 1.1s ease forwards}

/* ensure footer doesn't overlap pet on mobile */
@media (max-width: 520px){ .pet{right:10px; bottom:10px} }


/* ===========================
   RUNNING RABBIT (public countdown)
   =========================== */
.countdown-wrap{ position: relative; }

/* Overlay lane on top of the countdown card */
.runner{
  position:absolute;
  left:-40px; right:-40px;
  top:-26px;                          /* sits above the card like on a countertop */
  height:34px; pointer-events:none;   /* never block clicks */
  z-index:2;
}

/* Rabbit + effects */
.runner .rabbit{
  position:absolute;
  left:-40px;
  font-size:28px;
  line-height:1;
  transform-origin:center bottom;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}

.runner .runner-heart{
  position:absolute;
  left:0; top:0; opacity:0;
  transform: translate(-6px,-10px) scale(.6);
  transition: opacity .2s;
}

.runner .runner-dust{
  position:absolute;
  left:0; top:16px; opacity:0;
  font-weight:700; color: rgba(255,255,255,.5);
  transform: translateX(-6px) scale(.8);
}

/* Keyframes */
@keyframes rabbit-hopY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@keyframes rabbit-run-ltr {
  0%   { left:-40px; }
  100% { left: calc(100% + 40px); }
}

@keyframes rabbit-run-rtl {
  0%   { right:-40px; }
  100% { right: calc(100% + 40px); }
}

@keyframes heart-pop {
  0%   { opacity:0; transform: translate(-6px,-10px) scale(.6); }
  40%  { opacity:1; transform: translate(-10px,-24px) scale(1); }
  100% { opacity:0; transform: translate(-18px,-36px) scale(1); }
}

@keyframes dust-puff {
  0%   { opacity:0; transform: translateX(-6px) scale(.8); }
  20%  { opacity:.7; transform: translateX(0)   scale(1); }
  100% { opacity:0; transform: translateX(12px) scale(1.2); }
}

/* Running states */
.runner.run-ltr .rabbit{
  animation:
    rabbit-run-ltr var(--runDur,3.2s) linear forwards,
    rabbit-hopY     .35s ease infinite;
}

.runner.run-rtl .rabbit{
  right:-40px; left:auto;
  transform: scaleX(-1);
  animation:
    rabbit-run-rtl var(--runDur,3.2s) linear forwards,
    rabbit-hopY     .35s ease infinite;
}

/* Extra actions toggled by JS */
.runner.kiss .runner-heart{
  animation: heart-pop 1.1s ease forwards;
}

.runner.dust .runner-dust{
  animation: dust-puff .9s ease forwards;
}

/* Small screens – pull runner a bit tighter */
@media (max-width:520px){
  .runner{ left:-20px; right:-20px; top:-22px; }
}




/* ===========================
   Real running rabbit (GIF/WEBP)
   =========================== */

.countdown-wrap { position: relative; }

/* Runner lane sits above the countdown card like a countertop */
.runner-gif{
  position:absolute;
  left:-40px; right:-40px;
  top:-28px;                 /* slightly above the card top */
  height:60px;               /* lane height */
  pointer-events:none;
  z-index:3;
  /* The rabbit itself is a background image we move across the lane */
  --rabbit-w: 72px;          /* visual size; tweak to your asset */
  --rabbit-h: 48px;
  --runDur: 3.2s;            /* JS will randomize this */
  background-repeat: no-repeat;
  background-position: left center;
  background-size: var(--rabbit-w) auto;
}

/* Prefer WEBP, fallback to GIF if WEBP not present; comment one of these */
.runner-gif{
  background-image: url("/static/pulse/pets/rabbit-run.gif");
}
/* fallback (optional): */
/* .runner-gif{ background-image: url("/static/pulse/pets/rabbit-run.gif"); } */

/* Two directions controlled by classes */
.runner-gif.run-ltr{
  animation: runner-move-ltr var(--runDur) linear forwards;
}
.runner-gif.run-rtl{
  background-position: right center;
  transform: scaleX(-1); /* mirror the rabbit */
  animation: runner-move-rtl var(--runDur) linear forwards;
}

/* movement */
@keyframes runner-move-ltr {
  0% { background-position: left center; }
  100% { background-position: calc(100% + var(--rabbit-w)) center; }
}
@keyframes runner-move-rtl {
  0% { background-position: right center; }
  100% { background-position: calc(0% - var(--rabbit-w)) center; }
}

/* Small heart pop sometimes */
.runner-gif .runner-heart{
  position:absolute;
  top:0; left:50%;
  opacity:0;
  transform: translate(-8px, -10px) scale(.7);
  pointer-events:none;
}
.runner-gif.kiss .runner-heart{
  animation: heart-pop 1.1s ease forwards;
}
@keyframes heart-pop {
  0%   { opacity:0; transform: translate(-8px,-10px) scale(.7); }
  40%  { opacity:1; transform: translate(-12px,-28px) scale(1); }
  100% { opacity:0; transform: translate(-20px,-44px) scale(1); }
}

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce){
  .runner-gif{ animation: none !important; }
}

.form-control {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.02);
  color: var(--text);
}

.link-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.btn-copy {
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  color: var(--accent);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background .2s;
}
.btn-copy:hover {
  background: rgba(255,255,255,.1);
}
.btn-copy.copied {
  color: var(--ok);
  border-color: var(--ok);
}


/* ─────────────────────────────────────────────────────────
   Mobile-first polish for Home page (hero, ctas, badges)
   ───────────────────────────────────────────────────────── */

/* Allow long text/URLs to wrap nicely */
code, .badge { word-break: break-word; }

/* Buttons: bigger touch targets */
.btn {
  min-height: 40px;
  font-size: 16px;
}

/* Container breathing room on small screens */
@media (max-width: 768px) {
  .container { margin: 24px auto; padding: 0 14px; }
  .site-header { padding: 12px 14px; }
}

/* Hero: responsive type scale & spacing */
.hero { padding: 40px 16px; }
.hero h1 { font-size: 34px; }
@media (max-width: 640px) {
  .hero h1 { font-size: 30px; }
  .hero p { font-size: 15px; }
}
@media (max-width: 420px) {
  .hero { padding: 28px 12px; }
  .hero h1 { font-size: 26px; line-height: 1.2; }
}

/* CTA buttons: stack on mobile, full-width, comfy spacing */
.hero .cta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 520px) {
  .hero .cta { grid-template-columns: 1fr; }
  .hero .cta .btn { width: 100%; }
}

/* Badges: wrap cleanly and center */
.badge { margin: 6px 6px 0 0; }
@media (max-width: 520px) {
  .hero .badge { display: inline-block; font-size: 11px; padding: 5px 8px; }
}

/* Optional: features grid (single column on mobile) */
.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
  margin-top: 28px;
}
.features .feat {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px;
}
.features .feat h3 { margin: 0 0 6px; font-size: 16px; }
.features .feat p { margin: 0; font-size: 13px; color: var(--muted); }

@media (max-width: 960px) { .features { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px)  { .features { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .site-header a { padding: 6px 8px; }
}


/* ─────────────────────────────────────────────────────────
   Public page: mobile-first polish
   Targets existing markup in public_status.html
   ───────────────────────────────────────────────────────── */

/* Headline & intro */
.card.center h1 {
  margin: 6px 0 4px;
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
}
.card.center > .muted {
  text-align: center;
  margin-bottom: 8px;
}

/* Countdown: tighter layout on phones */
.countdown-wrap { position: relative; }
.countdown-card {
  padding: 16px 14px;
  width: 100%;
}
.countdown-rows {
  gap: 8px;
}
.cd-chunk {
  min-width: 76px;
  padding: 8px 10px;
}
.cd-num {
  font-size: 24px;
}
.cd-label {
  font-size: 11px;
}

/* Rabbit runner gif: smaller & closer to the card on narrow screens */
@media (max-width: 520px){
  .runner-gif {
    top: -22px;
    height: 52px;
    --rabbit-w: 64px; /* if using gif background runner */
    background-size: var(--rabbit-w) auto;
    left: -20px; right: -20px;
  }
}

/* Status hero: good readability & spacing on phones */
.status-hero {
  padding: 22px 16px;
  gap: 6px;
}
.hero-text { font-size: 18px; }
.status-hero .muted { font-size: 13px; }
.status-hero .note { font-size: 13px; color: var(--muted); }

/* History accordion: bigger tap target and readable list */
.history summary {
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  list-style: none;
}

.history ul { margin: 10px 0 0; }
.history li {
  padding: 10px 0;
  font-size: 14px;
}

/* JSON feed line wraps nicely on small screens */
.small a { word-break: break-all; }

/* Pet: keep it visible but unobtrusive on phones */
@media (max-width: 520px){
  .pet { right: 8px; bottom: 8px; }
  .pet-emoji { font-size: 28px; }
}

/* General container/card breathing on small screens */
@media (max-width: 768px){
  .card.center { padding: 18px 14px; }
}
@media (max-width: 420px){
  .card.center h1 { font-size: 26px; }
  .cd-chunk { min-width: 68px; }
  .cd-num { font-size: 22px; }
}


/* ─────────────────────────────────────────────────────────
   Public page fine-tuning: spacing & visual balance
   ───────────────────────────────────────────────────────── */

/* More space between status hero and following content */
.status-hero {
  margin-bottom: 18px;
}

/* Inside the hero card */
.status-hero .dot.big {
  margin-bottom: 6px;       /* separates dot from text */
}
.status-hero .muted {
  margin-top: 2px;          /* small gap above timestamp/location */
  margin-bottom: 6px;       /* breathing room before the note */
  display: block;
}

/* Make the “note” text stand out but not shout */
.status-hero .note {
  margin-top: 2px;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 14px;
}

/* Ensure <details> doesn’t stick to hero */
.history {
  margin-top: 14px;
}

/* Summary row slightly separated from JSON feed */
.history summary {
  margin-bottom: 6px;
}

/* JSON feed line pushed down a bit */
.small {
  margin-top: 10px;
}

/* On very narrow phones, add vertical spacing buffer */
@media (max-width: 420px) {
  .status-hero {
    margin-bottom: 22px;
    padding: 26px 16px;
  }
  .history {
    margin-top: 18px;
  }
}

.history summary {
  list-style: revert;              /* restore default bullet/arrow */
  display: list-item !important;   /* ensures the arrow shows again */
}

.countdown-target {
  margin-top: 4px;
  text-align: center;
  opacity: .9;
}


/* Chat */
.chat-list { display: grid; gap: 10px; margin-top: 10px; }
.bubble {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  border-radius: 12px;
  padding: 10px 12px;
}
.bubble.owner {
  border-color: rgba(110,231,255,.28);
  background: linear-gradient(180deg, rgba(110,231,255,.08), rgba(255,255,255,.02));
}
.bubble .meta { display:flex; gap:8px; align-items:baseline; margin-bottom:4px; }
.bubble .author { font-weight:600; }
.bubble .text { white-space:pre-wrap; word-break:break-word; }