:root {
  --bg-top: #f8f0be;
  --bg-bottom: #d2c483;
  --panel: #f4e7a5;
  --line: #3a2d12;
  --text: #2c220f;
  --ok: #5f9f45;
  --warn: #d78e2a;
  --bad: #b6402d;
  --blink: #f8b24b;
  --scene: #fef8d8;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Courier New", monospace;
  color: var(--text);
  background: radial-gradient(circle at top, #fff8cf 0%, var(--bg-top) 35%, var(--bg-bottom) 100%);
}
body.night { background: radial-gradient(circle at top, #33415e 0%, #28324a 30%, #182235 100%); color: #f4efda; }
.app-shell { max-width: 560px; margin: 0 auto; padding: 12px; display: grid; gap: 10px; }
.pixel-panel { border: 3px solid var(--line); background: var(--panel); box-shadow: 4px 4px 0 #7a6a30; padding: 10px; }
body.night .pixel-panel { background: #d8cfa4; }
.app-header h1 { margin: 0; font-size: 1.6rem; }
.subtitle,.phase { margin: 3px 0 0; font-size: 0.9rem; }
.status-grid { display: grid; gap: 10px; }
.cat-card { position: relative; transition: background 0.1s linear; }
.cat-card.selected { outline: 4px solid #ff8a00; box-shadow: 0 0 0 3px #fff2a6, 4px 4px 0 #7a6a30; background: linear-gradient(180deg, #f9e9a9 0%, var(--panel) 100%); }
.cat-card.selected .cat-tab { background: #ffed98; border-color: #7a3f00; }
.cat-card.selected::after { content: "AKTIV"; position: absolute; top: 8px; right: 8px; font-size: 0.7rem; font-weight: 700; background: #ff8a00; color: #fff; border: 2px solid #7a3f00; padding: 2px 6px; }
.cat-card.blink { background: var(--blink); }
.cat-tab { border: 2px solid var(--line); background: #fff4cc; color: var(--text); font-weight: 700; padding: 4px 8px; margin-bottom: 8px; }
.age { margin: 0 0 6px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; }
.cat-scene { border: 2px solid #7f6933; background: var(--scene); padding: 8px; margin-bottom: 8px; display: grid; gap: 8px; justify-items: center; }
.pixel-cat { position: relative; width: 80px; height: 60px; border: 3px solid var(--line); animation: float 2.2s steps(2,end) infinite; }
.pixel-cat[data-age="adult"] { width: 92px; height: 66px; }
.cat-suri { background: #d4c09c; }
.cat-pamuk { background: #f3f3f0; }
.pixel-cat .ear { position:absolute; top:-14px; width:18px; height:18px; border:3px solid var(--line); background:inherit; animation: ear-flick 1.8s steps(2,end) infinite; }
.pixel-cat .ear-left { left:4px; transform:skewY(-18deg); }
.pixel-cat .ear-right { right:4px; transform:skewY(18deg); }
.pixel-cat .eye { position:absolute; width:9px; height:9px; background:var(--line); top:22px; animation:blink-eyes 3.3s steps(2,end) infinite; }
.pixel-cat .eye-left { left:19px; }
.pixel-cat .eye-right { right:19px; }
.pixel-cat .nose { position:absolute; width:10px; height:7px; left:50%; transform:translateX(-50%); top:34px; background:#d8747f; border:2px solid var(--line); }
.pixel-cat .tail { position:absolute; width:16px; height:10px; right:-17px; top:33px; border:3px solid var(--line); border-left:0; background:inherit; transform-origin:left center; animation:wag 1.2s steps(2,end) infinite; }
.pixel-cat[data-health="critical"],.pixel-cat[data-health="fainted"] { animation: weak-shake 0.35s steps(2,end) infinite; }
.pixel-cat[data-health="dead"] { animation:none; filter:grayscale(1); opacity:0.6; }
.pixel-cat[data-health="dead"] .eye { width:10px; height:2px; top:26px; transform:rotate(20deg); }
.pixel-cat[data-health="dead"] .eye-right { transform:rotate(-20deg); }
.pixel-cat[data-effect="play"],.pixel-cat[data-effect="walk"] { transform:translateX(2px) scale(1.05); }
.pixel-cat[data-effect="pet"] { box-shadow:0 0 0 3px #ffc0cc inset; }
.pixel-cat[data-effect="feed"],.pixel-cat[data-effect="eat"] { box-shadow:0 0 0 3px #cde68a inset; }
.pixel-cat[data-effect="sleep"] { opacity:0.75; }
.pixel-cat[data-effect="sleep"] .eye { height:2px; top:26px; }
.mood { margin:0; font-size:0.82rem; text-align:center; min-height:20px; }
.meters { display:grid; gap:6px; }
.meters label { display:grid; grid-template-columns:74px 1fr 30px; align-items:center; gap:6px; font-size:0.82rem; }
progress { width:100%; height:12px; appearance:none; }
progress::-webkit-progress-bar { background:#f9f5de; border:1px solid var(--line); }
progress::-webkit-progress-value { background:var(--ok); }
.health { margin:8px 0 0; font-size:0.85rem; text-transform:uppercase; }
.actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.inventory-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
button { border:2px solid var(--line); background:#fff4cc; color:var(--text); padding:10px; font-weight:700; font-family:inherit; }
button:active { transform:translateY(1px); }
button:disabled { opacity:0.55; }
.danger { background:#ffd8d3; }
.settings { display:grid; gap:8px; }
.settings label { font-size:0.88rem; }
.speed-row { display:grid; gap:4px; }
.speed-row select { border:2px solid var(--line); background:#fff4cc; color:var(--text); padding:6px 8px; font-family:inherit; font-weight:700; }
.alerts { min-height:56px; display:grid; gap:8px; align-items:center; }
#alert-banner { margin:0; font-size:0.9rem; }
.intro-overlay { position:fixed; inset:0; background:rgba(34,26,11,0.52); display:grid; place-items:center; padding:16px; z-index:50; }
.intro-overlay.hidden { display:none; }
.intro-box { max-width:420px; width:100%; background:#fff4cc; }
.intro-box h2 { margin:0 0 6px; }
.intro-box p { margin:0 0 8px; font-size:0.9rem; }
.intro-box ul { margin:0 0 10px; padding-left:18px; font-size:0.85rem; }
@keyframes float { 0%,100%{transform:translateY(0);}50%{transform:translateY(-2px);} }
@keyframes wag { 0%,100%{transform:rotate(0deg);}50%{transform:rotate(14deg);} }
@keyframes blink-eyes { 0%,92%,100%{transform:scaleY(1);}95%{transform:scaleY(0.2);} }
@keyframes weak-shake { 0%{transform:translate(0,0);}50%{transform:translate(1px,0);}100%{transform:translate(-1px,0);} }
@keyframes ear-flick { 0%,90%,100%{margin-top:0;}95%{margin-top:-2px;} }
@media (min-width: 560px) { .status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }