/* ravenmagotchi — claude-dark theme (pi-studio.design) */
:root {
  --bg:         #141413;
  --surface:    #30302e;
  --surface-2:  #1d1d1c;
  --ring:       #4a4a47;
  --terracotta: #c96442;
  --coral:      #d97757;
  --ivory:      #faf9f5;
  --silver:     #b0aea5;
  --good:       #7aa07a;
  --warn:       #c9a342;
  --bad:        #c96442;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  --font-serif: "Tinos", Georgia, serif;
  --font-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ivory); font-family: var(--font-sans); }
body { min-height: 100vh; display: grid; place-items: start center; padding: 32px 16px 64px; }

.app {
  width: min(560px, 100%);
  display: flex; flex-direction: column; gap: 24px;
}

/* ── header ─────────────────────────────────────────────────────────── */
.header h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 40px;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ivory);
}
.header .subtitle {
  margin: 4px 0 0;
  color: var(--silver);
  font-size: 14px;
  letter-spacing: 0.01em;
}

/* ── habitat screen ─────────────────────────────────────────────────── */
.screen {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--ring);
  border-radius: var(--r-lg);
  height: 440px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02);
}
.sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 10%, rgba(201,100,66,0.10), transparent 70%),
    linear-gradient(180deg, #1a1a18 0%, #232220 60%, #2a2826 100%);
}
.ground {
  position: absolute; left: 0; right: 0; bottom: 0; height: 80px;
  background: linear-gradient(180deg, #2a2826 0%, #1c1b1a 100%);
  border-top: 1px solid var(--ring);
}
.stage {
  position: absolute; left: 0; right: 0; bottom: 40px;
  display: flex; justify-content: center; align-items: flex-end;
  pointer-events: none;
}

/* sprite container — 96px native upscaled 4×  */
.raven {
  width: 384px;
  height: 384px;
  background-image: url("assets/raven_idle.png");
  background-repeat: no-repeat;
  background-size: 768px 384px; /* 2-frame sheet, 192×96 → 768×384 */
  background-position: 0 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: transform 200ms ease;
}
.raven.bounce { animation: bounce 600ms ease; }
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(-14px); }
}

.nameplate {
  position: absolute; top: 14px; left: 16px;
  font-family: var(--font-serif);
  font-size: 18px; color: var(--ivory);
  letter-spacing: 0.02em;
}
.age {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--silver);
  padding: 4px 8px;
  border: 1px solid var(--ring);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,0.25);
}

.thought {
  position: absolute; top: 48px; left: 50%; transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--ring);
  border-radius: var(--r-md);
  padding: 8px 14px;
  font-size: 13px;
  color: var(--ivory);
  font-family: var(--font-mono);
  z-index: 2;
  animation: floatIn 240ms ease;
}
.thought::after {
  content: "";
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--surface);
  border-right: 1px solid var(--ring);
  border-bottom: 1px solid var(--ring);
}
@keyframes floatIn {
  from { opacity: 0; transform: translate(-50%, 4px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ── stats ──────────────────────────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px;
  background: var(--surface);
  border: 1px solid var(--ring);
  border-radius: var(--r-lg);
  padding: 16px;
}
.stat label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--silver);
  margin-bottom: 6px;
}
.bar {
  height: 8px; background: var(--surface-2);
  border: 1px solid var(--ring);
  border-radius: 999px;
  overflow: hidden;
}
.bar > span {
  display: block; height: 100%;
  background: var(--terracotta);
  width: 100%;
  transition: width 400ms ease, background 400ms ease;
}
.stat[data-level="warn"] .bar > span { background: var(--warn); }
.stat[data-level="bad"]  .bar > span { background: var(--bad); }
.stat[data-level="good"] .bar > span { background: var(--good); }

/* ── actions ────────────────────────────────────────────────────────── */
.actions {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.actions button {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ivory);
  background: var(--surface);
  border: 1px solid var(--ring);
  border-radius: var(--r-md);
  padding: 12px 8px;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 80ms ease;
}
.actions button:hover  { background: #3a3a37; border-color: var(--coral); }
.actions button:active { transform: translateY(1px); }
.actions button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── meta row ───────────────────────────────────────────────────────── */
.meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; color: var(--silver);
}
.ghost {
  background: transparent;
  color: var(--silver);
  border: 1px solid var(--ring);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: var(--font-sans);
}
.ghost:hover { color: var(--ivory); border-color: var(--coral); }
.ghost.danger:hover { color: var(--terracotta); border-color: var(--terracotta); }
.log { margin-left: auto; font-family: var(--font-mono); font-size: 11px; }

/* ── footer ─────────────────────────────────────────────────────────── */
.footer {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--silver);
  text-align: center;
  opacity: 0.7;
  letter-spacing: 0.05em;
}

@media (max-width: 480px) {
  .raven { width: 288px; height: 288px; background-size: 576px 288px; }
  .screen { height: 360px; }
  .actions { grid-template-columns: repeat(2, 1fr); }
  .stats   { grid-template-columns: 1fr; }
}