:root {
  --ink: #24212e;
  --muted: #6c6675;
  --paper: #f4efe7;
  --paper-deep: #ddd6e5;
  --cream: #fffaf1;
  --green: #30244f;
  --green-2: #5b457f;
  --mint: #c2b4d8;
  --lime: #ffd666;
  --amber: #f4bd59;
  --red: #b94f68;
  --line: #81798b;
  --shadow: #6b6274;
  --canvas-grid: rgba(48, 36, 79, .075);
  --canvas-a: #c8c0d0;
  --canvas-b: #928da2;
  --header-edge: #1d1632;
  --nav-bg: #cec7d3;
  --nav-line: #7a7282;
  --visitor-a: #4d3a70;
  --visitor-b: #30244f;
  --deep-surface: #241936;
  --soft-border: #c3b5d5;
  --soft-text: #ddd2e8;
  --thought-a: #2a2045;
  --thought-b: #4a3569;
  --footer-text: #eee5f7;
  --pixel: "Courier New", Courier, monospace;
  --ui: Arial, Helvetica, sans-serif;
}

html[data-palette="autumn"] {
  --ink: #2d2019;
  --muted: #725d4c;
  --paper: #f4ead7;
  --paper-deep: #dbc5aa;
  --cream: #fff6e5;
  --green: #31231e;
  --green-2: #8f3e22;
  --mint: #cf8b54;
  --lime: #f6c453;
  --amber: #ed8b2f;
  --red: #a63e2e;
  --line: #8b6247;
  --shadow: #684a38;
  --canvas-grid: rgba(61, 36, 21, .1);
  --canvas-a: #c58a50;
  --canvas-b: #493029;
  --header-edge: #170f0b;
  --nav-bg: #d7b991;
  --nav-line: #8b6549;
  --visitor-a: #7d341f;
  --visitor-b: #31231e;
  --deep-surface: #21140f;
  --soft-border: #d59658;
  --soft-text: #f2d2b0;
  --thought-a: #3b2017;
  --thought-b: #7d351f;
  --footer-text: #f7dcc0;
}

html[data-palette="moonlight"] {
  --ink: #182031;
  --muted: #586b78;
  --paper: #eef4f5;
  --paper-deep: #cadbe2;
  --cream: #f7fbfb;
  --green: #172c4a;
  --green-2: #28647a;
  --mint: #91cbd0;
  --lime: #b9f0e8;
  --amber: #e8c768;
  --red: #b84f69;
  --line: #55707b;
  --shadow: #405866;
  --canvas-grid: rgba(23, 44, 74, .09);
  --canvas-a: #9fb7c3;
  --canvas-b: #536879;
  --header-edge: #0e1a2b;
  --nav-bg: #c4d4dc;
  --nav-line: #607783;
  --visitor-a: #28596b;
  --visitor-b: #172c4a;
  --deep-surface: #0f2035;
  --soft-border: #9bcbd1;
  --soft-text: #c7e2e5;
  --thought-a: #132943;
  --thought-b: #285a70;
  --footer-text: #dcecef;
}

* { box-sizing: border-box; }

html { min-width: 0; background: var(--canvas-b); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  background:
    linear-gradient(var(--canvas-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--canvas-grid) 1px, transparent 1px),
    linear-gradient(135deg, var(--canvas-a), var(--canvas-b));
  background-size: 24px 24px;
}

button { font: inherit; }

.page-shell {
  width: min(1180px, calc(100% - 24px));
  min-height: calc(100vh - 24px);
  margin: 12px auto;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 7px 7px 0 rgba(35, 29, 48, .55);
}

.utility-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 50%, transparent 50%),
    var(--green);
  background-size: 10px 10px;
  border-bottom: 4px solid var(--header-edge);
}

.brand-lockup { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--green);
  font: 900 26px/1 var(--pixel);
  background: var(--lime);
  border: 2px solid #fff;
  box-shadow: 3px 3px 0 var(--header-edge);
}

.eyebrow {
  margin: 0 0 4px;
  font: 700 .75rem/1.2 var(--pixel);
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1 { margin-bottom: 0; font: 900 1.25rem/1 var(--pixel); letter-spacing: .02em; }
h1 span { color: var(--mint); font-size: .7rem; }

.connection-pill {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.45);
  font: 700 .75rem/1 var(--pixel);
  white-space: nowrap;
}

.header-tools { display: flex; align-items: center; gap: 10px; }

.palette-picker {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  color: #fff;
  background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .42);
  font: 700 .62rem/1 var(--pixel);
}

.palette-label { padding: 0 4px; opacity: .75; }

.palette-picker button {
  display: flex;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  color: #fff;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  font: 800 .6rem/1 var(--pixel);
}

.palette-picker button:hover, .palette-picker button:focus-visible { border-color: rgba(255,255,255,.7); outline: none; }
.palette-picker button[aria-pressed="true"] { color: var(--lime); background: rgba(0,0,0,.28); border-color: var(--lime); box-shadow: inset 0 -2px 0 var(--lime); }
.palette-swatch { display: block; width: 18px; height: 14px; border: 1px solid #fff; }
.swatch-autumn { background: linear-gradient(90deg, #31231e 0 33%, #8f3e22 33% 66%, #f6c453 66%); }
.swatch-galaxy { background: linear-gradient(90deg, #30244f 0 33%, #5b457f 33% 66%, #ffd666 66%); }
.swatch-moonlight { background: linear-gradient(90deg, #172c4a 0 33%, #28647a 33% 66%, #b9f0e8 66%); }

.module-nav {
  display: flex;
  gap: 0;
  overflow-x: auto;
  background: var(--nav-bg);
  border-bottom: 2px solid var(--ink);
  scrollbar-width: none;
}
.module-nav::-webkit-scrollbar { display: none; }
.module-nav a {
  padding: 10px 16px;
  color: var(--ink);
  border-right: 1px solid var(--nav-line);
  font: 700 .72rem/1 var(--pixel);
  text-decoration: none;
  white-space: nowrap;
}
.module-nav a:hover, .module-nav a:focus-visible { color: #fff; background: var(--green-2); outline: none; }

.status-light {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  background: var(--lime);
  border: 1px solid #4a3820;
  box-shadow: 0 0 0 2px rgba(255,214,102,.18);
  animation: signal 2s steps(2, end) infinite;
}

@keyframes signal { 50% { opacity: .45; } }

main { padding: 14px; }

.alert-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 11px 14px;
  color: #221c10;
  background: var(--amber);
  border: 2px solid #6f5016;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}
.alert-strip.status-stable { background: #f2c95d; }
.alert-strip.status-attention { background: #f4b94f; }
.alert-strip.status-urgent { color: #fff8eb; background: #b94f43; border-color: #642923; }

.alert-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  font: 900 1.1rem/1 var(--pixel);
  border: 2px solid currentColor;
}

.alert-strip strong { display: block; font: 900 .9rem/1.15 var(--pixel); }
.alert-copy { min-width: 0; }
.alert-copy > span { display: block; margin-top: 2px; font-size: .9rem; line-height: 1.3; }
.alert-tools { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.visits-today { font: 700 .8rem/1 var(--pixel); white-space: nowrap; }
.care-alert-action {
  min-height: 34px;
  padding: 7px 9px;
  color: #fff;
  background: var(--green);
  border: 2px solid currentColor;
  box-shadow: 2px 2px 0 rgba(36,33,46,.3);
  cursor: pointer;
  font: 900 .65rem/1 var(--pixel);
  white-space: nowrap;
}
.care-alert-action:hover, .care-alert-action:focus-visible { color: var(--lime); outline: 2px solid var(--ink); outline-offset: 2px; }
.status-urgent .care-alert-action { color: var(--ink); background: #fff4d2; border-color: var(--ink); }

.visitor-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(190px, .5fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
  color: #edf7e4;
  background: linear-gradient(100deg, var(--visitor-a), var(--visitor-b));
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
}

.visitor-badge {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: var(--green);
  background: var(--lime);
  border: 2px solid #fff;
  box-shadow: 3px 3px 0 var(--deep-surface);
  font: 900 .9rem/1 var(--pixel);
}

.visitor-copy { min-width: 0; }
.visitor-copy strong, .visitor-copy span { display: block; }
.visitor-copy strong { margin-bottom: 4px; font: 900 .88rem/1.2 var(--pixel); }
.visitor-copy span { color: var(--soft-text); font-size: .82rem; line-height: 1.3; }

.relationship-meter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
  align-items: center;
  font: 700 .68rem/1 var(--pixel);
}
.relationship-meter > div { grid-column: 1 / -1; height: 12px; padding: 2px; background: var(--deep-surface); border: 1px solid var(--soft-border); }
.relationship-meter i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(90deg, var(--lime) 0 10px, transparent 10px 12px); transition: width .35s steps(6, end); }
.relationship-meter b { color: var(--lime); }

.visitor-edit {
  min-height: 38px;
  padding: 8px 10px;
  color: var(--green);
  background: #f7f2e5;
  border: 2px solid var(--deep-surface);
  box-shadow: 2px 2px 0 var(--deep-surface);
  cursor: pointer;
  font: 800 .7rem/1 var(--pixel);
}
.visitor-edit:hover, .visitor-edit:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.main-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(290px, .75fr); gap: 14px; }

.panel {
  background: var(--paper-deep);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
}

.panel-titlebar {
  display: flex;
  justify-content: space-between;
  padding: 7px 9px;
  color: #fff;
  background: var(--green);
  border-bottom: 2px solid var(--ink);
  font: 700 .75rem/1 var(--pixel);
  letter-spacing: .06em;
}

.window-controls { letter-spacing: .2em; }

.pet-stage {
  --scene-wall: #fffaf3;
  --scene-floor: #beb5ca;
  --scene-trim: #e3dceb;
  position: relative;
  isolation: isolate;
  min-height: 410px;
  padding: 24px 20px 18px;
  overflow: hidden;
  background:
    linear-gradient(rgba(48,36,79,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48,36,79,.055) 1px, transparent 1px),
    linear-gradient(var(--scene-wall) 0 75%, var(--scene-trim) 75% 78%, var(--scene-floor) 78%);
  background-size: 20px 20px, 20px 20px, auto;
  border-bottom: 2px solid var(--ink);
  transition: background-color .25s steps(3, end);
}

.environment-cubicle { --scene-wall: #fffaf3; --scene-floor: #beb5ca; --scene-trim: #e3dceb; }
.environment-window { --scene-wall: #eef7f2; --scene-floor: #c8b899; --scene-trim: #e6d8b7; }
.environment-archive { --scene-wall: #ead7b8; --scene-floor: #9f7656; --scene-trim: #704c3b; }
.environment-night { --scene-wall: #3a315c; --scene-floor: #24213a; --scene-trim: #75658f; }

.scene-environment {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.scene-environment::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 43%, rgba(232,211,255,.58) 0 25%, transparent 46%);
}
.scene-environment::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 21%;
  left: 0;
  height: 2px;
  background: rgba(36,33,46,.35);
  box-shadow: 0 6px 0 rgba(255,255,255,.18);
}
.environment-night .scene-environment::before {
  background:
    radial-gradient(circle at 50% 43%, rgba(255,224,142,.28) 0 21%, transparent 43%),
    radial-gradient(circle at 18% 16%, #ffe486 0 2px, transparent 3px),
    radial-gradient(circle at 72% 12%, #fff4c7 0 2px, transparent 3px),
    radial-gradient(circle at 88% 35%, #e8d7ff 0 1px, transparent 2px);
}

.scene-window, .scene-board, .scene-shelf, .scene-plant, .scene-lamp, .scene-rug {
  position: absolute;
  opacity: 0;
  transition: opacity .2s steps(2, end);
}
.scene-window {
  top: 58px;
  right: 28px;
  width: 152px;
  height: 92px;
  background: linear-gradient(#9fd4e6 0 63%, #d9e7cf 63%);
  border: 7px solid #f1e1bd;
  box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px rgba(255,255,255,.4);
}
.scene-window::before, .scene-window::after { content: ""; position: absolute; z-index: 2; background: #f1e1bd; }
.scene-window::before { top: 0; bottom: 0; left: calc(50% - 3px); width: 6px; }
.scene-window::after { top: calc(50% - 3px); right: 0; left: 0; height: 6px; }
.scene-window span {
  position: absolute;
  top: 12px;
  left: 20px;
  width: 20px;
  height: 20px;
  background: #fff0a0;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,240,160,.18);
}
.environment-night .scene-window { background: linear-gradient(#17172f 0 65%, #3c3152 65%); border-color: #76678e; }
.environment-night .scene-window::before, .environment-night .scene-window::after { background: #76678e; }
.environment-night .scene-window span { left: 96px; background: #fff0a0; box-shadow: -6px 0 0 #17172f, 0 0 0 4px rgba(255,240,160,.12); }

.scene-board {
  top: 64px;
  left: 30px;
  width: 168px;
  height: 86px;
  background: #b8875e;
  border: 6px solid #765037;
  box-shadow: 0 0 0 2px var(--ink);
}
.scene-board i { position: absolute; width: 34px; height: 26px; background: #ffe28b; box-shadow: 2px 2px 0 rgba(61,42,28,.2); }
.scene-board i:nth-child(1) { top: 12px; left: 14px; transform: rotate(-3deg); }
.scene-board i:nth-child(2) { top: 35px; left: 64px; background: #efb4c8; transform: rotate(2deg); }
.scene-board i:nth-child(3) { top: 10px; right: 14px; background: #c9d9ef; transform: rotate(3deg); }

.scene-shelf {
  top: 58px;
  right: 24px;
  width: 178px;
  height: 105px;
  border: 8px solid #684734;
  border-top-width: 10px;
  background: repeating-linear-gradient(0deg, #7b563e 0 5px, #d6b98b 5px 47px);
  box-shadow: 0 0 0 2px var(--ink);
}
.scene-shelf i { position: absolute; bottom: 5px; width: 18px; border: 2px solid rgba(36,33,46,.65); }
.scene-shelf i:nth-child(1) { left: 15px; height: 39px; background: #8e5264; }
.scene-shelf i:nth-child(2) { left: 35px; height: 32px; background: #5d7187; }
.scene-shelf i:nth-child(3) { left: 56px; height: 42px; background: #d4a546; }
.scene-shelf i:nth-child(4) { right: 18px; width: 50px; height: 30px; background: #b38a5c; }

.scene-plant { left: 34px; bottom: 102px; width: 76px; height: 106px; }
.scene-plant::before { content: ""; position: absolute; left: 20px; bottom: 0; width: 42px; height: 42px; background: #b76d49; border: 2px solid var(--ink); clip-path: polygon(6% 0, 94% 0, 78% 100%, 22% 100%); }
.scene-plant i { position: absolute; bottom: 34px; left: 31px; width: 20px; height: 48px; background: #63805d; border: 2px solid var(--ink); border-radius: 70% 5%; transform-origin: bottom; }
.scene-plant i:nth-child(1) { transform: rotate(-35deg); }
.scene-plant i:nth-child(2) { height: 62px; transform: rotate(2deg); }
.scene-plant i:nth-child(3) { transform: rotate(37deg) scaleX(-1); }

.scene-lamp { right: 52px; bottom: 103px; width: 68px; height: 112px; border-left: 6px solid #41354f; }
.scene-lamp::before { content: ""; position: absolute; top: 0; left: -30px; width: 62px; height: 38px; background: #f4bd59; border: 2px solid var(--ink); clip-path: polygon(24% 0, 76% 0, 100% 100%, 0 100%); }
.scene-lamp::after { content: ""; position: absolute; bottom: 0; left: -27px; width: 54px; height: 9px; background: #41354f; border: 2px solid var(--ink); }
.scene-rug { left: 50%; bottom: 92px; width: 330px; height: 62px; background: repeating-linear-gradient(90deg, rgba(91,69,127,.24) 0 18px, rgba(255,214,102,.2) 18px 36px); border: 2px solid rgba(36,33,46,.32); border-radius: 50%; transform: translateX(-50%); }

.environment-cubicle .scene-board, .environment-cubicle .scene-plant, .environment-cubicle .scene-rug,
.environment-window .scene-window, .environment-window .scene-plant, .environment-window .scene-rug,
.environment-archive .scene-shelf, .environment-archive .scene-lamp, .environment-archive .scene-rug,
.environment-night .scene-window, .environment-night .scene-lamp, .environment-night .scene-rug { opacity: 1; }

.environment-picker {
  position: absolute;
  top: 9px;
  right: 11px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  background: rgba(255,250,241,.92);
  border: 2px solid var(--green);
  box-shadow: 2px 2px 0 rgba(36,33,46,.22);
}
.environment-picker > span { padding: 0 5px; color: var(--muted); font: 900 .58rem/1 var(--pixel); }
.environment-picker button {
  min-height: 24px;
  padding: 4px 6px;
  color: var(--green);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font: 800 .58rem/1 var(--pixel);
}
.environment-picker button:hover, .environment-picker button:focus-visible { border-color: var(--amber); outline: none; }
.environment-picker button[aria-pressed="true"] { color: #fff; background: var(--green-2); border-color: var(--ink); }

.scene-label {
  position: absolute;
  top: 10px;
  left: 12px;
  padding: 5px 7px;
  color: #f4f7e8;
  background: var(--green);
  font: 700 .7rem/1 var(--pixel);
  z-index: 8;
}
.scene-label { display: flex; align-items: center; }

.cat-wrap {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(320px, 76vw);
  height: 285px;
  margin: 0 auto -4px;
  place-items: end center;
}

.cat-body {
  position: relative;
  display: grid;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  place-items: end center;
  transform-origin: 50% 88%;
}

.cat-sprite {
  position: relative;
  grid-area: 1 / 1;
  z-index: 1;
  width: min(290px, 72vw);
  height: min(290px, 72vw);
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(5px 6px 0 rgba(47,37,67,.22));
  transition: transform .16s steps(2, end);
  animation: galaxy-breathe 3.8s steps(7, end) infinite;
}

.cat-sprite-blink { z-index: 2; opacity: 0; }

@keyframes galaxy-breathe {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(2px) scaleY(.992); }
}

.idle-symbol {
  position: absolute;
  z-index: 6;
  top: 24px;
  right: 40px;
  color: var(--green-2);
  font: 900 1.1rem/1 var(--pixel);
  opacity: 0;
  pointer-events: none;
}

.cat-wrap.idle-blink .cat-sprite-open { animation: galaxy-open-blink .68s steps(1, end); }
.cat-wrap.idle-blink .cat-sprite-blink { animation: galaxy-closed-blink .68s steps(1, end); }
@keyframes galaxy-open-blink {
  0%, 14%, 42%, 58%, 88%, 100% { opacity: 1; }
  20%, 36%, 64%, 82% { opacity: 0; }
}
@keyframes galaxy-closed-blink {
  0%, 14%, 42%, 58%, 88%, 100% { opacity: 0; }
  20%, 36%, 64%, 82% { opacity: 1; }
}

.cat-wrap.idle-tail .cat-sprite { animation: galaxy-tail-bounce .8s steps(4, end); }
@keyframes galaxy-tail-bounce {
  0%, 100% { transform: translateX(0) rotate(0); }
  35% { transform: translateX(-2px) rotate(-.7deg); }
  70% { transform: translateX(2px) rotate(.7deg); }
}

.cat-wrap.idle-ear .cat-sprite { animation: galaxy-ear-perk .55s steps(3, end); }
@keyframes galaxy-ear-perk {
  0%, 100% { transform: translateY(0) scaleY(1); }
  45% { transform: translateY(-3px) scaleY(1.018); }
}

.cat-wrap.idle-look .cat-sprite { animation: galaxy-look 1.25s steps(5, end); }
@keyframes galaxy-look {
  0%, 100% { transform: translateX(0); }
  30%, 68% { transform: translateX(-5px) rotate(-.5deg); }
}
.cat-wrap.idle-sniff .cat-sprite { animation: galaxy-sniff .85s steps(5, end); }
@keyframes galaxy-sniff { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } 60% { transform: translateY(2px); } }

.cat-wrap.idle-doze .cat-sprite { animation: galaxy-doze 2.4s steps(7, end); }
@keyframes galaxy-doze { 0%, 100% { transform: translateY(0) rotate(0); } 45%, 72% { transform: translateY(6px) rotate(1deg); } }
.cat-wrap.idle-doze .cat-sprite-open { animation: galaxy-doze 2.4s steps(7, end), galaxy-doze-open 2.4s steps(3, end); }
.cat-wrap.idle-doze .cat-sprite-blink { animation: galaxy-doze 2.4s steps(7, end), galaxy-doze-closed 2.4s steps(3, end); }
.cat-wrap.idle-doze .idle-symbol { animation: sleepy-z 2.4s steps(5, end); }
@keyframes galaxy-doze-open { 0%, 18%, 100% { opacity: 1; } 25%, 82% { opacity: 0; } }
@keyframes galaxy-doze-closed { 0%, 18%, 100% { opacity: 0; } 25%, 82% { opacity: 1; } }
@keyframes sleepy-z { 0%, 20%, 100% { opacity: 0; transform: translate(0, 8px) scale(.7); } 35%, 78% { opacity: 1; transform: translate(9px, -10px) scale(1.15); } }

.cat-wrap.idle-perk .cat-sprite { animation: galaxy-perk .75s steps(4, end); }
@keyframes galaxy-perk { 0%, 100% { transform: translateY(0); } 28%, 62% { transform: translateY(-8px) scaleY(1.025); } }

.cat-shadow {
  position: absolute;
  bottom: 8px;
  width: 68%;
  height: 20px;
  background: rgba(45, 52, 48, .18);
  border-radius: 50%;
}

.cat-wrap.rounder .cat-sprite { transform: scaleX(1.075); }

.action-fx {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: visible;
  pointer-events: none;
}
.action-fx span { position: absolute; opacity: 0; font-family: var(--pixel); font-weight: 900; }
.fx-caption {
  top: 26px;
  right: 18px;
  padding: 5px 7px;
  color: #fff;
  background: var(--green-2);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(36,33,46,.25);
  font-size: .64rem;
  letter-spacing: .05em;
}
.action-active .fx-caption { animation: fx-caption .9s steps(5, end); }
@keyframes fx-caption { 0% { opacity: 0; transform: translateY(8px); } 18%, 72% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-7px); } }

.action-feed .cat-body { animation: action-feed-cat 1.15s steps(7, end); }
.action-feed .fx-object { left: 22px; bottom: 12px; color: #b76d49; font-size: 3.4rem; animation: action-feed-bowl 1.15s steps(6, end); }
.action-feed .fx-object-secondary { left: 42px; bottom: 53px; color: #8d603b; font-size: 1rem; letter-spacing: 2px; animation: action-feed-kibble 1.15s steps(6, end); }
@keyframes action-feed-cat { 0%, 100% { transform: none; } 28%, 63% { transform: translate(-8px, 10px) rotate(-2deg) scaleY(.97); } 76% { transform: translateY(-4px); } }
@keyframes action-feed-bowl { 0% { opacity: 0; transform: translateX(-45px); } 18%, 78% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-10px); } }
@keyframes action-feed-kibble { 0%, 18% { opacity: 0; transform: translateY(-20px); } 30%, 68% { opacity: 1; transform: translateY(0); } 88%, 100% { opacity: 0; } }

.action-pet .cat-body { animation: action-pet-cat 1.05s steps(7, end); }
.action-pet .fx-object { top: 44px; left: 34px; color: #d45b79; font-size: 2rem; animation: action-pet-heart 1.05s steps(6, end); }
.action-pet .fx-object-secondary { top: 66px; right: 42px; color: #ef9aad; font-size: 1.35rem; animation: action-pet-heart-two 1.05s steps(6, end); }
@keyframes action-pet-cat { 0%, 100% { transform: none; } 26%, 66% { transform: translateY(7px) scaleX(1.045) scaleY(.955); } 78% { transform: translateY(-5px) scaleX(.985) scaleY(1.02); } }
@keyframes action-pet-heart { 0% { opacity: 0; transform: translate(12px, 24px) scale(.5); } 22%, 72% { opacity: 1; transform: translate(0, -4px) scale(1); } 100% { opacity: 0; transform: translate(-8px, -24px) scale(.7); } }
@keyframes action-pet-heart-two { 0%, 18% { opacity: 0; transform: translateY(18px) scale(.5); } 36%, 78% { opacity: 1; transform: translateY(-5px) scale(1); } 100% { opacity: 0; transform: translateY(-28px); } }

.action-water .cat-body { animation: action-water-cat 1.2s steps(8, end); }
.action-water .fx-object { right: 28px; bottom: 34px; color: #5a9fbd; font-size: 2.4rem; animation: action-water-drop 1.2s steps(7, end); }
.action-water .fx-object-secondary { right: 10px; bottom: 12px; width: 94px; color: #4282a2; font-size: 1.2rem; letter-spacing: 8px; animation: action-water-ripple 1.2s steps(6, end); }
@keyframes action-water-cat { 0%, 100% { transform: none; } 30%, 62% { transform: translate(7px, 7px) rotate(2deg); } 75% { transform: translateY(-4px); } }
@keyframes action-water-drop { 0% { opacity: 0; transform: translateY(-48px) scale(.7); } 22%, 52% { opacity: 1; transform: translateY(0) scale(1); } 66%, 100% { opacity: 0; transform: translateY(16px) scale(.55); } }
@keyframes action-water-ripple { 0%, 36% { opacity: 0; transform: scaleX(.35); } 50%, 78% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.3); } }

.action-play .cat-body { animation: action-play-cat 1.3s steps(9, end); }
.action-play .fx-object { left: 18px; bottom: 72px; color: #e74e66; font-size: 1.45rem; text-shadow: 0 0 8px rgba(231,78,102,.6); animation: action-play-dot 1.3s steps(10, end); }
.action-play .fx-object-secondary { top: 82px; left: 50%; color: var(--lime); font-size: 1.5rem; animation: action-play-spark 1.3s steps(7, end); }
@keyframes action-play-cat { 0%, 100% { transform: none; } 20% { transform: translateX(-15px) rotate(-2deg); } 42% { transform: translate(17px, -13px) rotate(2deg); } 65% { transform: translateX(9px) rotate(1deg); } 82% { transform: translate(-5px, -5px); } }
@keyframes action-play-dot { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 32% { transform: translate(240px, -72px); } 57% { transform: translate(82px, 28px); } 80% { opacity: 1; transform: translate(255px, 5px); } 100% { opacity: 0; transform: translate(145px, -35px); } }
@keyframes action-play-spark { 0%, 24% { opacity: 0; transform: scale(.4); } 38%, 68% { opacity: 1; transform: scale(1.3) rotate(45deg); } 100% { opacity: 0; transform: scale(.5) rotate(90deg); } }

.action-treat .cat-body { animation: action-treat-cat 1.1s steps(8, end); }
.action-treat .fx-object { top: 18px; left: 12%; color: #d7943f; font-size: 1.8rem; animation: action-treat-arc 1.1s steps(9, end); }
.action-treat .fx-object-secondary { top: 122px; left: 49%; color: #a36a31; font-size: 1rem; animation: action-treat-crumb 1.1s steps(6, end); }
@keyframes action-treat-cat { 0%, 100% { transform: none; } 32% { transform: translateY(-15px) scaleY(1.025); } 52%, 66% { transform: translateY(-3px) scaleX(1.025) scaleY(.97); } 74% { transform: translateX(-2px) rotate(-1deg); } 82% { transform: translateX(2px) rotate(1deg); } }
@keyframes action-treat-arc { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 12% { opacity: 1; } 58% { opacity: 1; transform: translate(115px, 96px) rotate(180deg); } 72%, 100% { opacity: 0; transform: translate(132px, 115px) rotate(270deg) scale(.4); } }
@keyframes action-treat-crumb { 0%, 50% { opacity: 0; transform: scale(.3); } 62%, 82% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: translateY(12px); } }

.action-wake .cat-body { animation: action-wake-cat 1.35s steps(8, end); }
.action-wake .cat-sprite-open { animation: action-wake-open 1.35s steps(1, end); }
.action-wake .cat-sprite-blink { animation: action-wake-closed 1.35s steps(1, end); }
.action-wake .fx-object { top: 34px; right: 42px; color: var(--amber); font-size: 2.7rem; animation: action-wake-mark 1.35s steps(7, end); }
.action-wake .fx-object-secondary { top: 72px; left: 36px; color: var(--green-2); font-size: 1.4rem; animation: action-wake-z 1.35s steps(6, end); }
@keyframes action-wake-cat { 0%, 20% { transform: translateY(7px) scaleY(.97); } 42% { transform: translateY(-17px) scaleY(1.06); } 58% { transform: translateY(2px) scaleX(1.035) scaleY(.97); } 76% { transform: translateY(-5px); } 100% { transform: none; } }
@keyframes action-wake-open { 0%, 24% { opacity: 0; } 25%, 100% { opacity: 1; } }
@keyframes action-wake-closed { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes action-wake-mark { 0%, 22% { opacity: 0; transform: translateY(18px) scale(.4); } 34%, 78% { opacity: 1; transform: translateY(-8px) scale(1.15); } 100% { opacity: 0; transform: translateY(-20px); } }
@keyframes action-wake-z { 0% { opacity: 1; transform: translate(0, 0); } 38% { opacity: 1; transform: translate(10px, -20px); } 55%, 100% { opacity: 0; transform: translate(17px, -34px) scale(.6); } }

.action-officeObject .cat-body { animation: action-office-cat 1.25s steps(9, end); }
.action-officeObject .fx-object { top: 54px; right: 12px; color: #e9cf82; font-size: 2.6rem; animation: action-office-paper 1.25s steps(10, end); }
.action-officeObject .fx-object-secondary { top: 104px; right: 48px; color: var(--red); font-size: 2rem; animation: action-office-swat 1.25s steps(7, end); }
@keyframes action-office-cat { 0%, 100% { transform: none; } 24% { transform: translateX(8px) rotate(2deg); } 44% { transform: translate(-8px, -8px) rotate(-4deg); } 58% { transform: translate(10px, -3px) rotate(3deg); } 76% { transform: translateX(-3px) rotate(-1deg); } }
@keyframes action-office-paper { 0% { opacity: 0; transform: translate(30px, -30px) rotate(0); } 14%, 72% { opacity: 1; } 52% { transform: translate(-98px, 38px) rotate(-135deg); } 100% { opacity: 0; transform: translate(-230px, 118px) rotate(-320deg); } }
@keyframes action-office-swat { 0%, 30% { opacity: 0; transform: scale(.3); } 42%, 62% { opacity: 1; transform: scale(1.3) rotate(25deg); } 100% { opacity: 0; transform: scale(.5); } }

.action-accessory .cat-body { animation: action-accessory-cat 1.25s steps(9, end); }
.action-accessory .fx-object { top: 38px; left: 30px; color: var(--lime); font-size: 2rem; animation: action-accessory-spark 1.25s steps(8, end); }
.action-accessory .fx-object-secondary { top: 78px; right: 28px; color: #e7b7ff; font-size: 1.6rem; animation: action-accessory-spark-two 1.25s steps(8, end); }
@keyframes action-accessory-cat { 0%, 100% { transform: none; } 20% { transform: translateY(-6px) rotate(-3deg); } 42% { transform: translateY(-10px) rotate(3deg) scale(.96, 1.03); } 62% { transform: translateY(-4px) rotate(-2deg) scale(1.035, .98); } 82% { transform: translateY(-7px) rotate(1deg); } }
@keyframes action-accessory-spark { 0%, 10% { opacity: 0; transform: scale(.25) rotate(0); } 28%, 62% { opacity: 1; transform: scale(1.25) rotate(90deg); } 100% { opacity: 0; transform: scale(.4) rotate(180deg); } }
@keyframes action-accessory-spark-two { 0%, 28% { opacity: 0; transform: scale(.3) rotate(0); } 44%, 76% { opacity: 1; transform: scale(1.2) rotate(-90deg); } 100% { opacity: 0; transform: scale(.4) rotate(-180deg); } }

.accessory-layer {
  position: absolute;
  z-index: 4;
  top: 22px;
  left: 50%;
  font-size: 3.5rem;
  line-height: 1;
  transform: translateX(-50%);
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,.24));
  pointer-events: none;
}
.accessory-layer.badge { top: 165px; left: 61%; font-family: var(--pixel); font-size: 2rem; color: var(--amber); }
.accessory-layer.party { top: 10px; font-size: 3.2rem; }
.accessory-layer.hat {
  top: 0;
  width: 150px;
  height: 100px;
  background: url("assets/kevin-cowboy-hat.png") center / contain no-repeat;
  filter: drop-shadow(2px 3px 0 rgba(47, 31, 20, .2));
}

.pixel-heart {
  position: absolute;
  top: 58px;
  right: 25px;
  z-index: 3;
  color: var(--red);
  font: 900 2rem/1 var(--pixel);
  opacity: 0;
}

.pixel-heart.show { animation: heart-pop .85s steps(5, end); }
@keyframes heart-pop { 0% { opacity: 1; transform: translateY(10px) scale(.5); } 70% { opacity: 1; transform: translateY(-18px) scale(1.1); } 100% { opacity: 0; transform: translateY(-26px); } }

.identity-card {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 16px;
  width: min(520px, 100%);
  margin: 0 auto 12px;
  padding: 10px 12px;
  background: linear-gradient(100deg, #fffdf5, #f0e8f7);
  border: 2px solid var(--green);
}

.field-label { margin-bottom: 4px; color: var(--muted); font: 700 .68rem/1 var(--pixel); }
h2 { margin-bottom: 0; font: 900 1.35rem/1 var(--pixel); }
.mood-value { margin-bottom: 0; font: 700 .95rem/1.2 var(--pixel); }

.thought-bubble {
  position: relative;
  z-index: 3;
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 10px 12px;
  color: #fff4cf;
  background: linear-gradient(90deg, var(--thought-a), var(--thought-b));
  border-left: 6px solid var(--lime);
  font: 700 .9rem/1.35 var(--pixel);
}

.care-console { padding: 16px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-heading h3 { margin-bottom: 0; font: 800 1.05rem/1.2 var(--ui); }
.kb-balance { padding: 6px 8px; color: #fff; background: var(--green); font: 700 .8rem/1 var(--pixel); white-space: nowrap; }

.action-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.action-button {
  min-height: 58px;
  padding: 8px;
  color: var(--ink);
  background: #f4f1e8;
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: 3px 3px 0 #777368;
  cursor: pointer;
  font: 800 .85rem/1.15 var(--pixel);
  text-align: left;
}
.action-button span { color: var(--green-2); }
.action-button small { display: block; margin-top: 5px; color: var(--muted); font: 700 .68rem/1 var(--ui); }
.action-button.primary { color: #fff; background: var(--green-2); box-shadow: 3px 3px 0 #241936; }
.action-button.primary span, .action-button.primary small { color: #fff4cf; }
.action-button:hover:not(:disabled), .action-button:focus-visible:not(:disabled) { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #4f4c45; outline: 3px solid var(--amber); outline-offset: 2px; }
.action-button:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
.action-button:disabled { color: #777; background: #c9c5bc; cursor: not-allowed; box-shadow: none; }

.system-message { min-height: 20px; margin: 13px 0 0; color: var(--green); font: 700 .78rem/1.35 var(--pixel); }

.status-column { display: grid; align-content: start; gap: 14px; }
.meter-list { display: grid; gap: 16px; padding: 16px; }
.meter-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.meter-label, .meter-value { font: 700 .78rem/1 var(--pixel); }
.meter-value { color: var(--green); }
.meter-track { grid-column: 1 / -1; height: 15px; padding: 2px; background: #5c5d57; border: 1px solid #252825; }
.meter-fill { height: 100%; background: repeating-linear-gradient(90deg, var(--lime) 0 12px, transparent 12px 14px); transition: width .35s steps(6, end); }
.meter-fill.low { background: repeating-linear-gradient(90deg, var(--red) 0 12px, transparent 12px 14px); }

.office-grid, .records-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.panel-body { padding: 18px; }
.panel-body h3, .shop-header h3, .career-body h3 { margin-bottom: 8px; font: 900 1.15rem/1.25 var(--pixel); }
.poll-context { margin-bottom: 15px; color: var(--muted); }
.poll-options { display: grid; gap: 9px; }
.poll-option {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 7px 10px;
  overflow: hidden;
  color: var(--ink);
  background: #f7f3e7;
  border: 2px solid var(--ink);
  cursor: pointer;
  text-align: left;
}
.poll-option:hover:not(:disabled), .poll-option:focus-visible:not(:disabled) { outline: 3px solid var(--amber); outline-offset: 2px; }
.poll-option:disabled { cursor: default; }
.poll-option .poll-fill { position: absolute; inset: 0 auto 0 0; z-index: 0; width: 0; background: rgba(31,102,81,.18); transition: width .35s steps(6, end); }
.poll-option > span, .poll-option > strong { position: relative; z-index: 1; }
.poll-icon { font-size: 1.2rem; }
.poll-count { font: 700 .76rem/1 var(--pixel); }
.poll-total { margin: 12px 0 0; color: var(--green); font: 700 .74rem/1.3 var(--pixel); }

.activity-summary {
  padding: 12px;
  color: #f7f7e9;
  background: var(--green);
  border-left: 6px solid var(--lime);
}
.activity-summary strong, .activity-summary span { display: block; }
.activity-summary strong { margin-bottom: 4px; font: 700 .9rem/1.25 var(--pixel); }
.activity-summary span { color: #ddd2e8; font-size: .85rem; }
.activity-log { margin: 14px 0 0; padding: 0; list-style: none; }
.activity-log li { display: grid; grid-template-columns: 54px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px dotted #89877d; font-size: .88rem; line-height: 1.3; }
.activity-log time { color: var(--green); font: 700 .72rem/1.4 var(--pixel); }

.shop-panel { margin-top: 14px; }
.shop-header { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 18px 18px 12px; }
.shop-header h3, .shop-header p { margin-bottom: 0; }
.shop-header > p { padding: 7px 9px; background: #fffaf0; border: 1px solid var(--line); font: 700 .8rem/1 var(--pixel); }
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 18px 18px; }
.shop-item {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 180px;
  padding: 14px;
  background: #f8f3e7;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 #777368;
}
.shop-icon { margin-bottom: 8px; font-size: 1.7rem; }
.shop-item h4 { margin: 0 0 8px; font: 900 .86rem/1.2 var(--pixel); }
.shop-item p { margin-bottom: 12px; color: var(--muted); font-size: .78rem; line-height: 1.3; }
.shop-item button, .equipment-option, .dialog-button {
  min-height: 40px;
  padding: 8px 10px;
  color: #fff;
  background: var(--green-2);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 #4d4b45;
  cursor: pointer;
  font: 800 .72rem/1.1 var(--pixel);
}
.shop-item button:hover:not(:disabled), .equipment-option:hover, .dialog-button:hover { outline: 3px solid var(--amber); outline-offset: 2px; }
.shop-item button:disabled { color: #5e625e; background: #c5c6bf; cursor: default; box-shadow: none; }
.shop-item.owned { background: #e6ddf0; }
.shop-item.owned h4::after { content: "  ✓"; color: var(--green-2); }

.achievement-list { display: grid; gap: 1px; background: #8e8c83; }
.achievement {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 13px 15px;
  background: #efeadf;
}
.achievement.locked { color: #777a75; background: #d3d0c7; }
.achievement-mark { display: grid; width: 32px; height: 32px; place-items: center; color: #fff; background: var(--green-2); border: 2px solid var(--ink); font: 900 .8rem/1 var(--pixel); }
.achievement.locked .achievement-mark { color: #71736e; background: #b6b7b1; }
.achievement strong, .achievement small { display: block; }
.achievement strong { margin-bottom: 3px; font: 800 .78rem/1.15 var(--pixel); }
.achievement small { font-size: .76rem; line-height: 1.25; }
.achievement-progress { font: 700 .7rem/1 var(--pixel); white-space: nowrap; }

.career-body { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 18px; }
.badge-photo { height: 130px; padding: 5px; overflow: hidden; background: #d0c3dd; border: 2px solid var(--green); }
.badge-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; image-rendering: pixelated; }
.career-body p { margin-bottom: 10px; line-height: 1.35; }
.career-track { height: 17px; padding: 2px; background: #5c5d57; border: 1px solid var(--ink); }
.career-track span { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--amber) 0 12px, transparent 12px 14px); }
.next-review { margin: 7px 0 0 !important; color: var(--green); font: 700 .7rem/1.3 var(--pixel); }

.system-dialog {
  width: min(440px, calc(100% - 28px));
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(0,0,0,.45);
}
.system-dialog::backdrop { background: rgba(13, 28, 24, .72); backdrop-filter: blur(2px); }
.dialog-titlebar { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px; color: #fff; background: var(--green); font: 700 .75rem/1 var(--pixel); }
.dialog-titlebar button { width: 28px; height: 26px; padding: 0; color: var(--ink); background: #d6d2c7; border: 2px outset #eee; cursor: pointer; font: 900 1rem/1 var(--pixel); }
.dialog-body { padding: 22px; text-align: center; }
.dialog-body h3 { margin-bottom: 8px; font: 900 1.05rem/1.3 var(--pixel); }
.dialog-body p:not(.eyebrow) { line-height: 1.45; }
.event-icon { margin: 14px 0; font-size: 4rem; filter: grayscale(.15); }
.dialog-button { margin-top: 8px; }
.equipment-list { display: grid; gap: 9px; margin-top: 16px; }
.equipment-option { display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left; }
.equipment-option.active { color: var(--ink); background: var(--amber); }

.visitor-dialog .dialog-body { text-align: left; }
.visitor-dialog .dialog-body h3 { font-size: 1.15rem; }
.visitor-field { display: block; margin: 18px 0 6px; font: 700 .7rem/1 var(--pixel); }
.visitor-dialog input {
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  color: var(--ink);
  background: #fffdf5;
  border: 2px inset #c6c1b5;
  border-radius: 0;
  font: 700 1rem/1 var(--pixel);
}
.visitor-dialog input:focus { outline: 3px solid var(--amber); outline-offset: 2px; }
.field-help { min-height: 18px; margin: 7px 0 4px !important; color: var(--green); font: 700 .7rem/1.3 var(--pixel); }
.forget-button {
  display: block;
  margin-top: 18px;
  padding: 0;
  color: #8d352f;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: 700 .7rem/1.2 var(--pixel);
  text-decoration: underline;
}

footer { display: flex; justify-content: space-between; gap: 14px; padding: 11px 14px; color: var(--footer-text); background: var(--green); font: 700 .68rem/1 var(--pixel); }

.toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 20;
  width: min(390px, calc(100% - 32px));
  padding: 12px 14px;
  color: #fff;
  background: var(--deep-surface);
  border: 2px solid var(--lime);
  box-shadow: 5px 5px 0 rgba(0,0,0,.3);
  font: 700 .82rem/1.35 var(--pixel);
  opacity: 0;
  transform: translate(-50%, 15px);
  pointer-events: none;
  transition: .18s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .page-shell { width: 100%; min-height: 100vh; margin: 0; border-width: 0; box-shadow: none; }
  .utility-bar { padding: 12px; }
  .header-tools { gap: 7px; }
  .palette-picker { gap: 3px; padding: 3px; }
  .palette-label, .palette-picker button span { display: none; }
  .palette-picker button { width: 28px; min-height: 28px; justify-content: center; padding: 3px; }
  .palette-swatch { width: 18px; height: 16px; }
  .connection-pill { align-self: stretch; display: grid; place-items: center; width: 42px; padding: 0; font-size: 0; }
  .connection-pill .status-light { width: 12px; height: 12px; margin: 0; }
  main { padding: 10px; }
  .alert-strip { grid-template-columns: auto 1fr; gap: 9px; padding: 9px 10px; }
  .alert-tools { grid-column: 2; justify-content: space-between; gap: 8px; }
  .care-alert-action { min-height: 32px; padding: 6px 8px; font-size: .58rem; }
  .visitor-card { grid-template-columns: auto 1fr auto; gap: 10px; padding: 10px; }
  .visitor-badge { width: 40px; height: 40px; }
  .relationship-meter { grid-column: 1 / -1; grid-template-columns: 1fr auto; }
  .visitor-edit { grid-column: 3; grid-row: 1; align-self: center; }
  .main-grid { grid-template-columns: 1fr; gap: 10px; }
  .pet-stage { min-height: 410px; padding: 72px 10px 12px; }
  .environment-picker { top: 42px; right: 8px; left: 8px; justify-content: center; }
  .environment-picker > span { display: none; }
  .environment-picker button { flex: 1; padding: 5px 3px; font-size: .55rem; }
  .scene-window { top: 100px; right: 16px; transform: scale(.82); transform-origin: top right; }
  .scene-board { top: 100px; left: 18px; transform: scale(.8); transform-origin: top left; }
  .scene-shelf { top: 99px; right: 14px; transform: scale(.78); transform-origin: top right; }
  .scene-plant { bottom: 108px; left: 12px; transform: scale(.78); transform-origin: bottom left; }
  .scene-lamp { bottom: 108px; right: 20px; transform: scale(.8); transform-origin: bottom right; }
  .scene-rug { bottom: 102px; width: 270px; }
  .cat-wrap { height: 230px; }
  .cat-sprite { width: 240px; height: 240px; }
  .identity-card { grid-template-columns: .75fr 1.25fr; gap: 8px; }
  .care-console { padding: 12px; }
  .action-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .action-button { min-height: 64px; padding: 7px; font-size: .78rem; }
  .action-button small { font-size: .63rem; line-height: 1.15; }
  .office-grid, .records-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
  .shop-panel { margin-top: 10px; }
  .shop-header { align-items: start; flex-direction: column; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 12px 14px; }
  .shop-item { min-height: 170px; padding: 11px; }
  .career-body { grid-template-columns: 84px 1fr; gap: 12px; padding: 14px; }
  .badge-photo { height: 105px; }
  footer { flex-direction: column; }
}

@media (max-width: 400px) {
  .brand-lockup { gap: 8px; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-lockup .eyebrow { font-size: .62rem; }
  h1 { font-size: 1.05rem; }
  .shop-grid { grid-template-columns: 1fr; }
  .shop-item { min-height: 0; }
}

@media (max-width: 350px) {
  .utility-bar { gap: 8px; }
  .brand-lockup .eyebrow, h1 span { display: none; }
  .brand-mark { width: 36px; height: 36px; font-size: 22px; }
  h1 { font-size: .95rem; }
  .header-tools { gap: 4px; }
  .palette-picker button { width: 25px; min-height: 26px; }
  .connection-pill { width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Kevin 15: shared office memory and cultural brief */

.visitor-consent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  margin: 3px 0 1px;
  padding: 9px 10px;
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--mint) 10%, var(--paper));
  font: 650 .68rem/1.35 var(--ui);
}
.visitor-consent input { width: 18px; height: 18px; margin: 0; accent-color: var(--green-2); }

.chat-launch { position: relative; }
.chat-launch.has-gossip::after,
.chat-launch.has-chat::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border: 2px solid var(--green);
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--paper) 88%, transparent);
}

@media (max-width: 640px) {
  .chat-take { grid-template-columns: 1fr; gap: 4px; }
}

/* Kevin OS 4: compact pixel arcade interface */

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

body {
  background:
    radial-gradient(circle at 22% 0, color-mix(in srgb, var(--green-2) 42%, transparent), transparent 34rem),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    var(--deep-surface);
  background-size: auto, 16px 16px, 16px 16px, auto;
}

.page-shell {
  width: min(1080px, calc(100% - 32px));
  margin: 16px auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mint) 45%, var(--ink));
  border-radius: 18px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 24px 70px rgba(8, 6, 16, .42), inset 0 1px 0 rgba(255,255,255,.3);
}

.utility-bar {
  min-height: 66px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: color-mix(in srgb, var(--green) 92%, #05040a);
}

.brand-lockup {
  color: #fff;
  text-decoration: none;
}

.brand-mark {
  width: 40px;
  height: 40px;
  color: var(--green);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.13), 3px 3px 0 var(--header-edge);
}

.brand-mark svg { width: 23px; height: 23px; fill: currentColor; stroke-width: 1.5; }
.brand-lockup > span:last-child { display: grid; gap: 3px; }
.brand-lockup strong { font: 900 .9rem/1 var(--pixel); letter-spacing: .08em; }
.brand-lockup small { color: var(--mint); font: 700 .55rem/1 var(--pixel); letter-spacing: .12em; }

.header-tools { gap: 9px; }
.palette-picker { gap: 6px; padding: 5px; border: 0; border-radius: 10px; background: rgba(0,0,0,.2); }
.palette-picker button { width: 30px; height: 30px; min-height: 30px; justify-content: center; padding: 4px; border-radius: 7px; }
.palette-picker button[aria-pressed="true"] { border: 1px solid var(--lime); box-shadow: 0 0 0 2px rgba(255,214,102,.12); }
.palette-swatch { width: 17px; height: 17px; border: 0; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }

.visitor-card {
  display: grid;
  grid-template-columns: auto minmax(80px, auto) 74px 30px;
  gap: 8px;
  min-width: 280px;
  margin: 0;
  padding: 6px 7px;
  border: 0;
  border-radius: 11px;
  box-shadow: none;
  background: rgba(0,0,0,.22);
}

.visitor-card > svg { width: 20px; height: 20px; color: var(--lime); }
.visitor-copy strong { margin: 0; overflow: hidden; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.visitor-copy span { margin-top: 3px; color: var(--soft-text); font: 600 .52rem/1 var(--pixel); }
.relationship-meter { display: grid; grid-template-columns: 1fr auto; gap: 5px; font-size: .55rem; }
.relationship-meter > div { grid-column: auto; height: 7px; padding: 1px; border: 0; border-radius: 4px; }
.relationship-meter i { border-radius: 3px; background: var(--lime); }
.visitor-edit { grid-column: auto; grid-row: auto; }

.icon-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #fff;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  box-shadow: none;
  cursor: pointer;
}

.icon-button svg { width: 17px; height: 17px; }
.icon-button:hover, .icon-button:focus-visible { color: var(--lime); border-color: var(--lime); outline: none; }

main { padding: 12px; }

.status-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  margin: 0 0 10px;
  padding: 6px 8px 6px 10px;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--cream) 88%, var(--lime));
  box-shadow: none;
}

.status-bar.status-attention { background: color-mix(in srgb, var(--cream) 76%, var(--amber)); }
.status-bar.status-urgent { color: #fff; border-color: color-mix(in srgb, var(--red) 80%, #000); background: var(--red); }
.alert-icon { width: 28px; height: 28px; border: 0; border-radius: 8px; background: color-mix(in srgb, currentColor 10%, transparent); }
.alert-icon svg { width: 17px; height: 17px; }
.alert-copy strong { font-size: .7rem; letter-spacing: .04em; }
.alert-copy > span { margin-top: 2px; color: var(--muted); font: 600 .67rem/1.15 var(--ui); }
.status-urgent .alert-copy > span { color: #fff2e8; }
.visits-today { display: flex; align-items: center; gap: 4px; color: var(--muted); font: 800 .65rem/1 var(--pixel); }
.visits-today svg { width: 14px; height: 14px; fill: currentColor; stroke-width: 1.5; }
.care-alert-action { color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, transparent); background: color-mix(in srgb, var(--paper) 80%, transparent); }
.status-urgent .care-alert-action { color: var(--ink); background: #fff4d2; border-color: var(--ink); }

.habitat-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--paper-deep) 90%, transparent);
  box-shadow: 0 12px 28px rgba(22,16,34,.16);
}

.pet-stage {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-height: 550px;
  padding: 0;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  background:
    linear-gradient(rgba(48,36,79,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48,36,79,.045) 1px, transparent 1px),
    linear-gradient(var(--scene-wall) 0 76%, var(--scene-trim) 76% 78%, var(--scene-floor) 78%);
  background-size: 18px 18px, 18px 18px, auto;
}

.scene-label {
  top: 13px;
  left: 13px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: color-mix(in srgb, var(--green) 90%, transparent);
  font-size: .58rem;
  letter-spacing: .05em;
}

.status-light { width: 7px; height: 7px; border: 0; box-shadow: 0 0 8px var(--lime); }

.environment-picker {
  top: 10px;
  right: 10px;
  gap: 5px;
  padding: 4px;
  border: 0;
  border-radius: 10px;
  background: rgba(28,23,39,.82);
  box-shadow: 0 5px 16px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
}

.environment-picker button {
  display: grid;
  width: 34px;
  height: 34px;
  min-height: 34px;
  place-items: center;
  padding: 0;
  color: #f7f2ff;
  border-radius: 7px;
}

.environment-picker button svg { width: 18px; height: 18px; }
.environment-picker button:hover, .environment-picker button:focus-visible { color: var(--lime); border-color: var(--lime); }
.environment-picker button[aria-pressed="true"] { color: var(--green); border: 0; background: var(--lime); box-shadow: none; }

.scene-window { top: 78px; right: 34px; }
.scene-board { top: 84px; left: 34px; }
.scene-shelf { top: 78px; right: 30px; }
.scene-plant { bottom: 104px; left: 32px; }
.scene-lamp { bottom: 104px; right: 48px; }
.scene-rug { bottom: 78px; width: 360px; }
.scene-object.is-inspected { filter: drop-shadow(0 0 8px var(--lime)) brightness(1.08); }
.scene-object.is-inspected::selection { background: transparent; }

.cat-wrap {
  --roam-x: 0px;
  --roam-y: 0px;
  position: absolute;
  left: 50%;
  bottom: 78px;
  z-index: 4;
  width: 250px;
  height: 250px;
  margin: 0;
  transform: translateX(calc(-50% + var(--roam-x))) translateY(var(--roam-y));
  transition: transform 1.65s steps(12, end);
  will-change: transform;
}

.cat-sprite { width: 250px; height: 250px; }
.cat-wrap.walking:not(.action-active) .cat-body { animation: kevin-walk-bob .34s steps(2, end) infinite; }
.cat-wrap.walking .cat-shadow { animation: kevin-shadow-step .34s steps(2, end) infinite; }
.cat-wrap.inspecting .inspect-spark { animation: inspect-pop 1.6s steps(5, end); }
.cat-wrap.inspecting:not(.action-active) .cat-sprite { animation: galaxy-perk .75s steps(4, end); }

@keyframes kevin-walk-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
@keyframes kevin-shadow-step { 50% { transform: translateX(-50%) scaleX(.86); opacity: .32; } }
@keyframes inspect-pop { 0%, 100% { opacity: 0; transform: translateY(7px) scale(.6); } 22%, 78% { opacity: 1; transform: translateY(0) scale(1); } }

.cat-shadow {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 138px;
  height: 20px;
  border-radius: 50%;
  background: rgba(24,20,31,.28);
  transform: translateX(-50%);
}

.inspect-spark {
  position: absolute;
  top: 32px;
  right: 12px;
  z-index: 8;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--green);
  border: 2px solid var(--green);
  border-radius: 9px;
  background: var(--lime);
  opacity: 0;
}
.inspect-spark svg { width: 18px; height: 18px; }

.pixel-heart { right: 24px; color: var(--red); }
.pixel-heart svg { width: 28px; height: 28px; fill: currentColor; }

.cat-readout {
  position: absolute;
  right: 12px;
  bottom: 11px;
  left: 12px;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 9px 11px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 11px;
  background: color-mix(in srgb, var(--green) 90%, transparent);
  box-shadow: 0 7px 18px rgba(0,0,0,.18);
  backdrop-filter: blur(5px);
}

.cat-readout > div { min-width: 0; flex: 1; }
.cat-readout .mood-value { line-height: 1.5; overflow-wrap: anywhere; }
.cat-readout h1 { margin: 0 0 3px; color: var(--lime); font-size: 1rem; }
.mood-value { margin: 0; color: var(--soft-text); font: 700 .62rem/1 var(--pixel); }
.thought-bubble { max-width: 54%; margin: 0; color: #fff; font: 600 .68rem/1.25 var(--pixel); text-align: right; }

.meter-list {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 12px 11px 7px;
  background: color-mix(in srgb, var(--cream) 68%, transparent);
}

.meter-row {
  display: grid;
  grid-template-rows: auto auto 5px;
  gap: 4px;
  min-width: 0;
  padding: 7px 3px;
  color: var(--muted);
  text-align: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 75%, transparent);
}

.meter-icon { display: grid; place-items: center; color: var(--green-2); }
.meter-icon svg { width: 17px; height: 17px; }
.meter-label { display: none; }
.meter-value { font: 800 .55rem/1 var(--pixel); }
.meter-track { grid-column: auto; height: 5px; padding: 0; overflow: hidden; border: 0; border-radius: 3px; background: color-mix(in srgb, var(--line) 25%, transparent); }
.meter-fill { height: 100%; border-radius: 3px; background: var(--green-2); }
.meter-fill.low { background: var(--red); }

.care-console {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  padding: 8px 11px 11px;
  border: 0;
  background: color-mix(in srgb, var(--cream) 68%, transparent);
}

.care-console-head { display: flex; align-items: center; justify-content: space-between; min-height: 34px; margin-bottom: 7px; }
.care-console-title, .kb-balance { display: flex; align-items: center; gap: 6px; color: var(--green); font: 900 .62rem/1 var(--pixel); }
.care-console-title svg, .kb-balance svg { width: 16px; height: 16px; }
.care-console-title svg { fill: currentColor; }
.kb-balance { padding: 5px 7px; border-radius: 7px; background: color-mix(in srgb, var(--lime) 40%, transparent); }

.action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.action-button {
  display: grid;
  min-height: 68px;
  place-items: center;
  gap: 4px;
  padding: 8px 4px 6px;
  color: var(--green);
  border: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--shadow) 48%, transparent);
  font: 800 .57rem/1 var(--pixel);
  cursor: pointer;
}

.action-button svg { width: 24px; height: 24px; }
.action-button.primary { color: #fff; border-color: var(--green); background: var(--green-2); }
.action-button:hover, .action-button:focus-visible { color: var(--green); border-color: var(--lime); background: var(--lime); outline: none; transform: translateY(-1px); }
.action-button:active { transform: translateY(2px); box-shadow: none; }
.action-button:disabled { filter: grayscale(.4); opacity: .42; cursor: wait; transform: none; }

.system-message { min-height: 28px; margin: 9px 0 0; color: var(--muted); font: 600 .63rem/1.25 var(--pixel); }

.module-deck { margin-top: 10px; }
.module-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper-deep) 88%, transparent);
}

.module-tabs button {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font: 800 .62rem/1 var(--pixel);
  cursor: pointer;
}
.module-tabs button svg { width: 22px; height: 22px; }
.module-tabs button:hover, .module-tabs button:focus-visible { color: var(--green); border-color: var(--mint); background: color-mix(in srgb, var(--cream) 75%, transparent); outline: none; }
.module-tabs button[aria-expanded="true"] { color: var(--green); border-color: var(--lime); background: var(--lime); }

.module-panel {
  margin-top: 8px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  box-shadow: 0 10px 24px rgba(22,16,34,.12);
}
.module-panel[hidden] { display: none !important; }
.module-heading { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.module-heading > svg { width: 30px; height: 30px; color: var(--green-2); }
.module-heading > div { flex: 1; }
.module-heading span { color: var(--muted); font: 800 .55rem/1 var(--pixel); letter-spacing: .1em; }
.module-heading h2 { margin: 4px 0 0; font: 900 .9rem/1.25 var(--pixel); }
.module-heading > b, .module-heading > p { margin: 0; font: 800 .68rem/1 var(--pixel); }

.poll-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.poll-option { min-height: 60px; border-radius: 9px; }
.poll-total { margin: 10px 0 0; color: var(--muted); font-size: .72rem; }

.shop-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0; }
.shop-item { min-height: 148px; padding: 11px; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: 10px; box-shadow: none; background: var(--paper); }
.shop-item h4 { margin: 7px 0 4px; font-size: .72rem; }
.shop-item p { font-size: .68rem; line-height: 1.28; }
.shop-icon { font-size: 1.6rem; }

.records-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.achievement-list { border: 0; }
.achievement { border-radius: 8px; }
.career-body { align-items: center; grid-template-columns: 88px 1fr; gap: 12px; padding: 10px; border-radius: 10px; background: var(--paper); }
.badge-photo { height: 104px; border: 0; border-radius: 8px; }
.career-body p { font-size: .74rem; }

.activity-log { margin: 0; padding: 0; border: 0; }
.activity-log li { grid-template-columns: 58px 1fr; }

footer {
  min-height: 38px;
  align-items: center;
  padding: 8px 14px;
  color: var(--soft-text);
  background: var(--green);
  font-size: .55rem;
}
footer span { display: flex; align-items: center; gap: 5px; }
footer svg { width: 13px; height: 13px; fill: currentColor; }

.toast { border: 1px solid var(--lime); border-radius: 11px; box-shadow: 0 12px 30px rgba(0,0,0,.32); }

.system-dialog { overflow: hidden; border: 1px solid color-mix(in srgb, var(--mint) 55%, var(--ink)); border-radius: 15px; box-shadow: 0 24px 60px rgba(0,0,0,.52); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: #fff; background: var(--green); font: 800 .65rem/1 var(--pixel); }
.dialog-head button { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: rgba(255,255,255,.08); cursor: pointer; }
.dialog-head button svg { width: 16px; height: 16px; }
.dialog-body h2 { font: 900 1rem/1.25 var(--pixel); }
.dialog-button, .equipment-option { min-height: 42px; padding: 9px 12px; color: #fff; border: 0; border-radius: 8px; background: var(--green-2); font: 800 .68rem/1 var(--pixel); cursor: pointer; }
.equipment-option { color: var(--ink); background: var(--paper-deep); }
.equipment-option.active { background: var(--lime); }

@media (max-width: 840px) {
  .page-shell { width: min(100% - 16px, 760px); margin: 8px auto; }
  .habitat-card { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .pet-stage { grid-column: 1; grid-row: 1; min-height: 500px; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
  .meter-list { grid-column: 1; grid-row: 2; }
  .care-console { grid-column: 1; grid-row: 3; }
  .action-grid { grid-template-columns: repeat(4, 1fr); }
  .action-button { min-height: 72px; }
  .system-message { min-height: 18px; }
}

@media (max-width: 640px) {
  .page-shell { width: 100%; min-height: 100vh; margin: 0; border: 0; border-radius: 0; }
  .utility-bar { min-height: 58px; padding: 8px 10px; gap: 8px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-lockup small { display: none; }
  .visitor-card { grid-template-columns: auto minmax(54px, auto) 28px; min-width: 0; padding: 5px 6px; }
  .visitor-card > svg, .visitor-copy span, .relationship-meter { display: none; }
  .visitor-copy strong { max-width: 88px; font-size: .56rem; }
  .palette-picker { gap: 3px; padding: 3px; }
  .palette-picker button { width: 27px; height: 27px; min-height: 27px; }
  .palette-swatch { width: 15px; height: 15px; }
  main { padding: 8px; }
  .status-bar { min-height: 42px; margin-bottom: 8px; }
  .alert-copy > span { display: none; }
  .pet-stage { min-height: 440px; }
  .scene-label { top: 10px; left: 9px; }
  .environment-picker { top: 8px; right: 8px; left: auto; }
  .environment-picker button { flex: none; width: 32px; height: 32px; }
  .scene-window { top: 78px; right: 12px; transform: scale(.75); transform-origin: top right; }
  .scene-board { top: 80px; left: 12px; transform: scale(.72); transform-origin: top left; }
  .scene-shelf { top: 78px; right: 12px; transform: scale(.72); transform-origin: top right; }
  .scene-plant { bottom: 92px; left: 9px; transform: scale(.7); transform-origin: bottom left; }
  .scene-lamp { right: 13px; bottom: 92px; transform: scale(.72); transform-origin: bottom right; }
  .scene-rug { bottom: 70px; width: 250px; }
  .cat-wrap { bottom: 68px; width: 220px; height: 220px; }
  .cat-sprite { width: 220px; height: 220px; }
  .cat-readout { bottom: 8px; min-height: 49px; padding: 8px 9px; }
  .cat-readout h1 { font-size: .88rem; }
  .mood-value, .thought-bubble { font-size: .56rem; }
  .meter-list { padding: 8px 7px 5px; }
  .care-console { padding: 6px 7px 9px; }
  .action-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .action-button { min-height: 62px; border-radius: 9px; font-size: .5rem; }
  .action-button svg { width: 22px; height: 22px; }
  .module-tabs { padding: 6px; gap: 4px; }
  .module-tabs button { min-height: 50px; flex-direction: column; gap: 4px; font-size: .5rem; }
  .module-tabs button svg { width: 20px; height: 20px; }
  .module-panel { padding: 12px; }
  .poll-options { grid-template-columns: 1fr; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .records-grid { grid-template-columns: 1fr; }
  footer { flex-direction: row; }
}

@media (max-width: 400px) {
  .brand-lockup strong { font-size: .75rem; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-mark svg { width: 19px; height: 19px; }
  .visitor-copy { display: none; }
  .visitor-card { grid-template-columns: 28px; }
  .pet-stage { min-height: 420px; }
  .environment-picker button { width: 29px; height: 29px; min-height: 29px; }
  .environment-picker button svg { width: 16px; height: 16px; }
  .scene-label span:last-child { display: none; }
  .scene-label { width: 29px; height: 29px; justify-content: center; padding: 0; }
  .scene-label .status-light { margin: 0; }
  .cat-wrap { width: 205px; height: 205px; }
  .cat-sprite { width: 205px; height: 205px; }
  .thought-bubble { max-width: 50%; }
  .action-button span { display: none; }
  .action-button { min-height: 54px; padding: 7px 3px; }
  .shop-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-wrap { transition: none; }
}

/* Kevin OS 5: full walk cycle and catnap mode */

.pet-stage {
  min-height: 610px;
  background:
    linear-gradient(rgba(48,36,79,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48,36,79,.045) 1px, transparent 1px),
    linear-gradient(var(--scene-wall) 0 64%, var(--scene-trim) 64% 67%, var(--scene-floor) 67%);
  background-size: 18px 18px, 18px 18px, auto;
}

.scene-environment::after {
  bottom: 33%;
}

.scene-rug { bottom: 76px; width: 410px; }
.scene-plant { bottom: 102px; }
.scene-lamp { bottom: 102px; }

.cat-wrap {
  bottom: 76px;
  width: 225px;
  height: 225px;
  transition: transform 1.9s steps(14, end);
}

.sprite-stack {
  position: relative;
  display: grid;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  place-items: end center;
  transform-origin: 50% 82%;
}

.cat-wrap.facing-right .sprite-stack { transform: scaleX(-1); }
.cat-sprite { width: 225px; height: 225px; }
.cat-sprite-walk, .cat-sprite-nap, .cat-sprite-jump, .cat-sprite-pounce { opacity: 0; animation: none; }
.cat-sprite-walk { width: 270px; height: 230px; }
.cat-sprite-nap { z-index: 3; width: 245px; height: 225px; }
.cat-sprite-jump, .cat-sprite-pounce { z-index: 4; width: 282px; height: 236px; }

.cat-wrap.walking .cat-sprite-open,
.cat-wrap.walking .cat-sprite-blink,
.cat-wrap.walking .cat-sprite-nap,
.cat-wrap.walking .cat-sprite-jump,
.cat-wrap.walking .cat-sprite-pounce {
  opacity: 0 !important;
  animation: none !important;
}

.cat-wrap.walking .cat-sprite-walk-a { animation: kevin-step-a .42s steps(1, end) infinite; }
.cat-wrap.walking .cat-sprite-walk-b { animation: kevin-step-b .42s steps(1, end) infinite; }
.cat-wrap.walking .accessory-layer { opacity: 0; }
.cat-wrap.walking:not(.action-active) .cat-body { animation: kevin-walk-bob .42s steps(2, end) infinite; }

@keyframes kevin-step-a { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes kevin-step-b { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }

.cat-wrap.sleeping .cat-sprite-open,
.cat-wrap.sleeping .cat-sprite-blink,
.cat-wrap.sleeping .cat-sprite-walk,
.cat-wrap.sleeping .cat-sprite-jump,
.cat-wrap.sleeping .cat-sprite-pounce {
  opacity: 0 !important;
  animation: none !important;
}

.cat-wrap.sleeping .cat-sprite-nap {
  opacity: 1 !important;
  animation: kevin-nap-breathe 3.4s steps(5, end) infinite !important;
}

.cat-wrap.sleeping .accessory-layer,
.cat-wrap.sleeping .inspect-spark { opacity: 0 !important; }
.cat-wrap.sleeping .idle-symbol { animation: kevin-deep-sleep 2.8s steps(6, end) infinite; }
.cat-wrap.sleeping .cat-shadow { width: 165px; height: 17px; opacity: .72; }
.kevin-sleeping .scene-rug { filter: saturate(.82) brightness(.97); }

@keyframes kevin-nap-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(2px) scale(1.008, .992); }
}

@keyframes kevin-deep-sleep {
  0%, 12%, 100% { opacity: 0; transform: translate(0, 12px) scale(.6); }
  28%, 72% { opacity: 1; transform: translate(14px, -14px) scale(1.15); }
}

.action-button.nap-ready {
  color: var(--green);
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 35%, var(--paper));
  animation: wake-ready 1.5s steps(2, end) infinite;
}

@keyframes wake-ready { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 30%, transparent), 0 3px 0 color-mix(in srgb, var(--shadow) 48%, transparent); } }

@media (max-width: 840px) {
  .pet-stage { min-height: 555px; }
  .cat-wrap { width: 220px; height: 220px; }
  .cat-sprite { width: 220px; height: 220px; }
  .cat-sprite-walk { width: 260px; height: 224px; }
  .cat-sprite-nap { width: 238px; height: 218px; }
}

@media (max-width: 640px) {
  .pet-stage {
    min-height: 485px;
    background:
      linear-gradient(rgba(48,36,79,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(48,36,79,.045) 1px, transparent 1px),
      linear-gradient(var(--scene-wall) 0 61%, var(--scene-trim) 61% 64%, var(--scene-floor) 64%);
    background-size: 18px 18px, 18px 18px, auto;
  }
  .scene-environment::after { bottom: 36%; }
  .scene-rug { width: 285px; }
  .cat-wrap { bottom: 68px; width: 205px; height: 205px; }
  .cat-sprite { width: 205px; height: 205px; }
  .cat-sprite-walk { width: 238px; height: 208px; }
  .cat-sprite-nap { width: 222px; height: 204px; }
}

@media (max-width: 400px) {
  .pet-stage { min-height: 465px; }
  .cat-wrap { width: 195px; height: 195px; }
  .cat-sprite { width: 195px; height: 195px; }
  .cat-sprite-walk { width: 228px; height: 198px; }
  .cat-sprite-nap { width: 214px; height: 194px; }
}

@media (prefers-reduced-motion: reduce) {
  .cat-wrap.walking .cat-sprite-walk-a { opacity: 1; animation: none; }
  .cat-wrap.walking .cat-sprite-walk-b { opacity: 0; animation: none; }
  .cat-wrap.sleeping .cat-sprite-nap, .action-button.nap-ready { animation: none !important; }
}

/* Kevin OS 6: cat-tree climbing and lookout mode */

.brand-mark {
  position: relative;
  overflow: hidden;
  border-radius: 11px;
}

.brand-mark img {
  width: 54px;
  height: 54px;
  max-width: none;
  image-rendering: pixelated;
  object-fit: contain;
  transform: translateY(7px);
}

.cat-tree {
  position: absolute;
  right: -8px;
  bottom: 64px;
  z-index: 2;
  width: 260px;
  height: 370px;
  padding: 0;
  overflow: visible;
  color: var(--lime);
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: filter .2s steps(2, end), transform .2s steps(2, end);
}

.cat-tree:hover,
.cat-tree:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--lime) 72%, transparent)) brightness(1.05);
  transform: translateY(-2px);
}

.cat-tree > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}

.tree-tap-hint {
  position: absolute;
  right: 30px;
  bottom: 24px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--green);
  border: 2px solid var(--green);
  border-radius: 9px;
  background: var(--lime);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--shadow) 70%, transparent);
  animation: tree-invite 2.4s steps(3, end) infinite;
}

.tree-tap-hint svg { width: 16px; height: 16px; }

.tree-level-lights {
  position: absolute;
  right: 18px;
  top: 74px;
  display: grid;
  gap: 8px;
}

.tree-level-lights i {
  width: 7px;
  height: 7px;
  border: 1px solid color-mix(in srgb, var(--ink) 75%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  box-shadow: 0 1px 0 rgba(0,0,0,.24);
}

.cat-tree[data-active-level="high"] .tree-level-lights i:nth-child(1),
.cat-tree[data-active-level="middle"] .tree-level-lights i:nth-child(2),
.cat-tree[data-active-level="low"] .tree-level-lights i:nth-child(3) {
  background: var(--lime);
  box-shadow: 0 0 8px var(--lime);
}

.cat-tree.is-inspected .tree-tap-hint { opacity: 0; }

@keyframes tree-invite {
  0%, 70%, 100% { transform: translateY(0); }
  82% { transform: translateY(-5px); }
  91% { transform: translateY(2px); }
}

.cat-wrap.jumping {
  z-index: 6;
  transition-duration: 1.05s;
  transition-timing-function: steps(9, end);
}

.cat-wrap.jumping .cat-body {
  transform-origin: 50% 92%;
  animation: kevin-tree-jump-up 1.05s steps(9, end);
}

.cat-wrap.jumping .cat-sprite-open,
.cat-wrap.jumping .cat-sprite-blink,
.cat-wrap.jumping .cat-sprite-walk,
.cat-wrap.jumping .cat-sprite-nap,
.cat-wrap.jumping .cat-sprite-pounce { opacity: 0 !important; animation: none !important; }
.cat-wrap.jumping:not(.jump-down) .cat-sprite-jump-up { opacity: 1 !important; }
.cat-wrap.jumping.jump-down .cat-sprite-jump-down { opacity: 1 !important; }

.cat-wrap.jumping.jump-down .cat-body { animation-name: kevin-tree-jump-down; }
.cat-wrap.jumping .accessory-layer { opacity: 0; }
.cat-wrap.jumping .cat-shadow { animation: kevin-jump-shadow 1.05s steps(9, end); }

.cat-wrap.pouncing {
  z-index: 6;
  transition-duration: .92s;
  transition-timing-function: steps(8, end);
}

.cat-wrap.pouncing .cat-sprite-open,
.cat-wrap.pouncing .cat-sprite-blink,
.cat-wrap.pouncing .cat-sprite-walk,
.cat-wrap.pouncing .cat-sprite-nap,
.cat-wrap.pouncing .cat-sprite-jump { opacity: 0 !important; animation: none !important; }
.cat-wrap.pouncing .cat-sprite-pounce { opacity: 1 !important; }
.cat-wrap.pouncing .cat-body { animation: kevin-pounce-run .92s steps(8, end); }
.cat-wrap.pouncing .cat-shadow { animation: kevin-pounce-shadow .92s steps(8, end); }
.cat-wrap.pouncing .accessory-layer { opacity: 0; }

.cat-wrap.action-play .cat-sprite-open,
.cat-wrap.action-play .cat-sprite-blink,
.cat-wrap.action-play .cat-sprite-walk,
.cat-wrap.action-play .cat-sprite-nap,
.cat-wrap.action-play .cat-sprite-jump { opacity: 0 !important; animation: none !important; }
.cat-wrap.action-play .cat-sprite-pounce { opacity: 1 !important; }
.cat-wrap.action-play .cat-body { animation: kevin-action-pounce 1.3s steps(10, end); }

@keyframes kevin-pounce-run {
  0% { transform: translateY(8px) scale(.9, 1.08) rotate(-2deg); }
  34% { transform: translateY(-32px) scale(1.04, .94) rotate(3deg); }
  68% { transform: translateY(-15px) scale(1) rotate(-1deg); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes kevin-pounce-shadow {
  0%, 100% { opacity: .3; transform: translateX(-50%) scaleX(1); }
  48% { opacity: .08; transform: translateX(-50%) scaleX(.55); }
}

@keyframes kevin-action-pounce {
  0%, 100% { transform: translateX(0) translateY(0) scale(1); }
  18% { transform: translateX(-20px) translateY(8px) scale(.9, 1.08); }
  46% { transform: translateX(32px) translateY(-28px) scale(1.05, .94); }
  72% { transform: translateX(12px) translateY(-8px) scale(1); }
}

.cat-wrap.tree-perched { z-index: 5; }
.cat-wrap.tree-perched .cat-body {
  transform: scale(.64);
  transform-origin: 50% 92%;
}
.cat-wrap.tree-perched .cat-shadow { bottom: 21px; width: 98px; height: 13px; opacity: .18; }

.cat-wrap.lookout .cat-body { animation: kevin-lookout 2.3s steps(8, end) infinite; }
.cat-wrap.lookout .cat-sprite-open { animation: kevin-lookout-open 2.3s steps(1, end) infinite; }
.cat-wrap.lookout .cat-sprite-blink { animation: kevin-lookout-blink 2.3s steps(1, end) infinite; }
.cat-wrap.lookout .inspect-spark { top: 54px; right: 26px; animation: inspect-pop 2.3s steps(6, end) infinite; }

.cat-wrap.tree-perched.sleeping .cat-body { transform: scale(.68); }
.cat-wrap.tree-perched.sleeping .cat-shadow { bottom: 24px; width: 112px; }

@keyframes kevin-tree-jump-up {
  0% { transform: translateY(0) scale(.98) rotate(-3deg); }
  38% { transform: translateY(-82px) scale(.78) rotate(4deg); }
  68% { transform: translateY(-34px) scale(.69) rotate(-2deg); }
  100% { transform: translateY(0) scale(.64); }
}

@keyframes kevin-tree-jump-down {
  0% { transform: translateY(0) scale(.64) rotate(2deg); }
  45% { transform: translateY(-68px) scale(.78) rotate(-4deg); }
  75% { transform: translateY(-24px) scale(.9) rotate(2deg); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes kevin-jump-shadow {
  0%, 100% { opacity: .28; transform: translateX(-50%) scaleX(1); }
  42% { opacity: .08; transform: translateX(-50%) scaleX(.48); }
}

@keyframes kevin-lookout {
  0%, 100% { transform: scale(.64) translateX(0) rotate(0); }
  22% { transform: scale(.64) translateX(-7px) rotate(-2deg); }
  48% { transform: scale(.64) translateX(6px) rotate(2deg); }
  72% { transform: scale(.66) translateY(-4px) rotate(0); }
}

@keyframes kevin-lookout-open { 0%, 37%, 48%, 100% { opacity: 1; } 38%, 47% { opacity: 0; } }
@keyframes kevin-lookout-blink { 0%, 37%, 48%, 100% { opacity: 0; } 38%, 47% { opacity: 1; } }

@media (max-width: 840px) {
  .cat-tree { right: -2px; width: 230px; height: 340px; }
}

@media (max-width: 640px) {
  .brand-mark img { width: 46px; height: 46px; transform: translateY(6px); }
  .cat-tree { right: 0; bottom: 60px; width: 190px; height: 280px; }
  .tree-tap-hint { right: 20px; bottom: 20px; width: 27px; height: 27px; }
  .tree-level-lights { right: 12px; top: 54px; gap: 6px; }
  .cat-wrap.tree-perched .cat-body { transform: scale(.61); }
  .cat-wrap.tree-perched.sleeping .cat-body { transform: translateY(14px) scale(.66); }
  .cat-wrap.lookout .cat-body { animation-name: kevin-lookout-mobile; }
}

@media (max-width: 400px) {
  .brand-lockup { gap: 6px; }
  .brand-lockup strong { font-size: .66rem; }
  .cat-tree { width: 172px; height: 255px; }
  .tree-tap-hint { display: none; }
}

@keyframes kevin-lookout-mobile {
  0%, 100% { transform: scale(.61) translateX(0); }
  25% { transform: scale(.61) translateX(-6px) rotate(-2deg); }
  52% { transform: scale(.61) translateX(5px) rotate(2deg); }
  76% { transform: scale(.63) translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .cat-tree, .cat-wrap.jumping { transition: none; }
  .cat-wrap.jumping .cat-body, .cat-wrap.jumping .cat-shadow,
  .cat-wrap.lookout .cat-body, .cat-wrap.lookout .cat-sprite-open,
  .cat-wrap.lookout .cat-sprite-blink, .tree-tap-hint { animation: none !important; }
}

/* Kevin OS 7: moving thoughts and gentle sound controls */

.sound-toggle {
  position: relative;
  flex: 0 0 auto;
  color: var(--mint);
  border-color: rgba(255,255,255,.18);
  background: rgba(0,0,0,.2);
}

.sound-toggle[aria-pressed="false"] { color: rgba(255,255,255,.55); }

.sound-toggle[data-playing="true"]::after {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 2px rgba(164,220,105,.16);
  content: "";
  animation: soundscape-pulse 2.8s steps(3, end) infinite;
}

@keyframes soundscape-pulse {
  50% { opacity: .45; transform: scale(.8); }
}

.kevin-thought {
  position: absolute;
  top: -55px;
  left: 50%;
  z-index: 12;
  width: max-content;
  max-width: 224px;
  margin: 0;
  padding: 10px 12px;
  color: var(--ink);
  border: 2px solid var(--green);
  border-radius: 12px 12px 12px 4px;
  background: color-mix(in srgb, var(--paper) 94%, white);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--shadow) 72%, transparent);
  font: 700 .72rem/1.35 var(--pixel);
  text-align: left;
  transform: translateX(-50%);
  transform-origin: 28% 100%;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.kevin-thought::before,
.kevin-thought::after {
  position: absolute;
  bottom: -10px;
  left: 27px;
  width: 0;
  height: 0;
  border-style: solid;
  content: "";
}

.kevin-thought::before { border-width: 10px 10px 0 0; border-color: var(--green) transparent transparent transparent; }
.kevin-thought::after { bottom: -6px; left: 29px; border-width: 7px 7px 0 0; border-color: var(--paper) transparent transparent transparent; }
.kevin-thought[data-tone="needs"] { border-color: var(--amber); }
.kevin-thought[data-tone="needs"]::before { border-top-color: var(--amber); }
.kevin-thought[data-tone="happy"] { border-color: var(--mint); }
.kevin-thought[data-tone="happy"]::before { border-top-color: var(--mint); }
.kevin-thought.is-visible { visibility: visible; opacity: 1; }
.kevin-thought.thought-pop { animation: thought-pop .34s steps(4, end); }
.kevin-thought.thought-exit { animation: thought-fade .52s steps(5, end) forwards; }

@keyframes thought-pop {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.88); }
  65% { opacity: 1; transform: translateX(-50%) translateY(-3px) scale(1.03); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes thought-fade {
  0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  65% { opacity: .35; transform: translateX(-50%) translateY(-7px) scale(.98); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-11px) scale(.94); }
}

.cat-wrap.tree-perched .kevin-thought { top: -33px; left: 40%; }
.cat-wrap.sleeping .kevin-thought { top: -36px; }

@media (max-width: 640px) {
  .sound-toggle { width: 29px; height: 29px; }
  .sound-toggle svg { width: 15px; height: 15px; }
  .kevin-thought { top: -40px; max-width: 176px; padding: 8px 9px; font-size: .64rem; }
  .cat-wrap.tree-perched .kevin-thought { top: -24px; left: 34%; }
  .cat-wrap.sleeping .kevin-thought { top: -28px; }
}

@media (max-width: 400px) {
  .header-tools { gap: 4px; }
  .kevin-thought { max-width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .sound-toggle[data-playing="true"]::after { animation: none; }
  .kevin-thought.thought-pop, .kevin-thought.thought-exit { animation: none; }
  .cat-wrap.pouncing .cat-body, .cat-wrap.pouncing .cat-shadow,
  .cat-wrap.action-play .cat-body { animation: none !important; }
}

/* Kevin 13: wake-first care and browser-private chat */

.action-button.sleep-locked { cursor: not-allowed; }
.action-button.nap-ready {
  color: var(--ink);
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 72%, var(--paper));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 22%, transparent), 0 3px 0 color-mix(in srgb, var(--shadow) 48%, transparent);
}

.chat-launch {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  width: auto;
  max-width: 65%;
  min-height: 44px;
  margin: 0;
  padding: 9px 11px;
  color: var(--green);
  border: 1px solid color-mix(in srgb, var(--lime) 75%, white);
  border-radius: 10px;
  background: var(--lime);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--shadow) 58%, transparent);
  cursor: pointer;
  text-align: left;
}
.chat-launch:hover, .chat-launch:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; transform: translateY(-1px); }
.chat-launch:active { transform: translateY(2px); box-shadow: none; }
.chat-launch svg { flex: none; width: 19px; height: 19px; }
.chat-launch span { font: 800 .875rem/1.25 var(--ui); }

footer span strong { color: var(--lime); font-weight: 900; }
footer span small { padding-left: 6px; border-left: 1px solid color-mix(in srgb, var(--soft-text) 35%, transparent); font-size: .5rem; }

.chat-dialog {
  width: min(520px, calc(100% - 24px));
  max-height: min(720px, calc(100dvh - 24px));
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 94%, var(--cream));
}
.chat-dialog[open] { display: grid; grid-template-rows: auto auto auto minmax(180px, 1fr) auto auto auto; }
.chat-status {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  color: var(--muted);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 48%, transparent);
  background: color-mix(in srgb, var(--cream) 78%, transparent);
  font: 700 .5rem/1 var(--pixel);
}
.chat-status strong { color: var(--green); font-size: .55rem; }
.chat-status .status-light { background: var(--lime); }
.chat-dialog.kevin-napping .chat-status .status-light { background: var(--amber); box-shadow: 0 0 8px var(--amber); }

.chat-take {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  background: color-mix(in srgb, var(--amber) 18%, var(--paper));
}
.chat-take[hidden] { display: none; }
.chat-take span { color: var(--amber-ink, #765015); font: 900 .48rem/1 var(--pixel); white-space: nowrap; }
.chat-take p { margin: 0; color: var(--ink); font: 750 .68rem/1.25 var(--ui); }

.chat-messages {
  display: flex;
  min-height: 250px;
  max-height: 360px;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 14px;
  overflow-y: auto;
  list-style: none;
  background:
    linear-gradient(rgba(48,36,79,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48,36,79,.035) 1px, transparent 1px),
    color-mix(in srgb, var(--paper) 96%, var(--mint));
  background-size: 14px 14px;
}
.chat-message { display: grid; gap: 4px; max-width: 84%; }
.chat-message.user { align-self: flex-end; justify-items: end; }
.chat-message.kevin { align-self: flex-start; }
.chat-message span { color: var(--muted); font: 800 .46rem/1 var(--pixel); }
.chat-message p {
  margin: 0;
  padding: 9px 11px;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  border-radius: 4px 11px 11px 11px;
  background: var(--paper);
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--shadow) 18%, transparent);
  font: 650 .76rem/1.45 var(--ui);
  white-space: pre-line;
}
.chat-message.user p { color: #fff; border-color: var(--green-2); border-radius: 11px 4px 11px 11px; background: var(--green-2); }

.chat-sleep-gate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  color: var(--ink);
  border-top: 1px solid color-mix(in srgb, var(--amber) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 55%, transparent);
  background: color-mix(in srgb, var(--amber) 34%, var(--paper));
  font: 700 .62rem/1.35 var(--pixel);
}
.chat-sleep-gate[hidden] { display: none; }
.chat-sleep-gate button {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 7px;
  background: var(--amber);
  font: 900 .52rem/1 var(--pixel);
  cursor: pointer;
}
.chat-sleep-gate svg { width: 16px; height: 16px; }

.chat-prompts { display: flex; gap: 6px; padding: 9px 11px 3px; overflow-x: auto; }
.chat-prompts button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 6px 8px;
  color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mint) 18%, var(--paper));
  font: 800 .48rem/1 var(--pixel);
  cursor: pointer;
}
.chat-prompts button:hover, .chat-prompts button:focus-visible { border-color: var(--green); background: var(--lime); outline: none; }
.chat-prompts button:disabled { opacity: .42; cursor: not-allowed; }

.chat-form { display: grid; grid-template-columns: 1fr 44px; gap: 7px; padding: 7px 11px; }
.chat-form input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 9px 10px;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 8px;
  background: #fffdf8;
  font: 650 .78rem/1.2 var(--ui);
}
.chat-form input:focus { border-color: var(--green-2); outline: 2px solid color-mix(in srgb, var(--mint) 55%, transparent); }
.chat-form input[readonly] { opacity: .72; }
.chat-form button { display: grid; min-height: 42px; place-items: center; padding: 0; color: #fff; border: 0; border-radius: 8px; background: var(--green-2); cursor: pointer; }
.chat-form button svg { width: 20px; height: 20px; }
.chat-form input:disabled, .chat-form button:disabled { opacity: .46; cursor: not-allowed; }
.chat-privacy { margin: 0; padding: 0 11px 10px; color: var(--muted); font: 650 .57rem/1.2 var(--ui); text-align: center; }
.dialog-head .notebook-open { width: auto; margin-left: auto; padding: 6px 9px; font: 650 .8rem var(--ui); }
.notebook-dialog { width: min(500px, calc(100% - 16px)); max-height: calc(100dvh - 16px); overflow-y: auto; }
.notebook-body { padding: 16px; font: 400 1rem/1.5 var(--ui); }
.notebook-body p { margin: 0 0 12px; }
.notebook-body label { display: block; font-weight: 700; }
.notebook-body textarea { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid var(--green-2); border-radius: 8px; font: inherit; resize: vertical; }
.notebook-body button { min-height: 44px; margin: 6px 4px 10px 0; padding: 8px 12px; border: 1px solid var(--green-2); border-radius: 8px; background: var(--lime); color: var(--ink); font: 650 .9rem var(--ui); cursor: pointer; }
.notebook-body button:disabled { opacity: .5; cursor: wait; }
.notebook-body section { margin-top: 14px; border-top: 1px solid var(--green-2); padding-top: 12px; }
.notebook-body ul { padding-left: 22px; }
.notebook-body h3 { margin: 0 0 10px; font-size: 1rem; }

@media (max-width: 640px) {
  .chat-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .chat-messages { min-height: 210px; max-height: 46dvh; padding: 11px; }
  .chat-status { grid-template-columns: auto 1fr; }
  .chat-status > span:last-child { display: none; }
  .chat-take { grid-template-columns: 1fr; gap: 4px; }
  .chat-dialog.keyboard-open[open] {
    top: var(--kevin-chat-top, 8px);
    bottom: auto;
    left: 50%;
    max-height: calc(var(--kevin-chat-viewport, 100dvh) - 16px);
    margin: 0;
    transform: translateX(-50%);
  }
  .chat-dialog.keyboard-open .chat-take,
  .chat-dialog.keyboard-open .chat-privacy { display: none; }
  .chat-dialog.keyboard-open .chat-messages { min-height: 110px; max-height: none; }
  footer span small { display: inline; }
}

@media (max-width: 400px) {
  .chat-message { max-width: 92%; }
  .chat-sleep-gate { grid-template-columns: 1fr; }
  .chat-sleep-gate button { justify-content: center; }
  footer span small { display: none; }
}

/* Kevin 14: live bowls, Kitty Points, and room-wide play */

.kb-balance small { color: var(--muted); font: 900 .48rem/1 var(--pixel); }

.pet-bowls {
  position: absolute;
  left: 29%;
  bottom: 92px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.pet-bowl {
  --bowl-fill: .6;
  position: relative;
  display: grid;
  width: 54px;
  height: 43px;
  place-items: center;
  padding: 0;
  color: color-mix(in srgb, var(--ink) 76%, var(--muted));
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(2px 3px 0 color-mix(in srgb, var(--shadow) 32%, transparent));
  transition: transform .16s steps(2, end), filter .16s steps(2, end), opacity .16s;
}
.pet-bowl:hover, .pet-bowl:focus-visible { outline: none; filter: drop-shadow(0 0 7px var(--lime)) drop-shadow(2px 3px 0 color-mix(in srgb, var(--shadow) 32%, transparent)); transform: translateY(-2px); }
.pet-bowl:disabled { cursor: not-allowed; opacity: .68; transform: none; }
.bowl-icon { position: relative; display: block; width: 48px; height: 36px; }
.bowl-icon svg { position: absolute; inset: 0; z-index: 2; width: 48px; height: 36px; stroke-width: 1.6; }
.bowl-icon .bowl-badge { top: -3px; right: 1px; bottom: auto; left: auto; z-index: 3; width: 13px; height: 13px; padding: 2px; color: #256b8a; border-radius: 50%; background: color-mix(in srgb, var(--paper) 82%, #8adbf0); fill: none; stroke-width: 2; }
.bowl-icon i {
  position: absolute;
  left: 7px;
  bottom: 10px;
  z-index: 1;
  width: calc(34px * var(--bowl-fill));
  height: 8px;
  border-radius: 50%;
  transform-origin: left center;
  transition: width .5s steps(6, end);
}
.food-bowl .bowl-icon svg { color: #6f4433; fill: color-mix(in srgb, #b86f3f 32%, var(--paper)); }
.food-bowl .bowl-icon i { background: repeating-linear-gradient(90deg, #8b5836 0 4px, #cc884c 4px 7px); }
.water-bowl .bowl-icon svg { color: #346f8a; fill: color-mix(in srgb, #74c8df 30%, var(--paper)); }
.water-bowl .bowl-icon i { background: linear-gradient(90deg, #4da4c5, #a6ecf5); box-shadow: inset 0 2px rgba(255,255,255,.5); }
.pet-bowl[data-level="low"] { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--amber) 70%, transparent)); }
.pet-bowl.bowl-refill { animation: bowl-refill 1.2s steps(7, end); }

@keyframes bowl-refill {
  0% { transform: translateY(0) rotate(0); }
  18% { transform: translateY(-10px) rotate(-5deg); }
  34% { transform: translateY(-3px) rotate(4deg); }
  52% { transform: translateY(-8px) rotate(-2deg); }
  72%, 100% { transform: translateY(0) rotate(0); }
}

.cat-wrap.action-play .cat-body { animation: kevin-action-pounce-wide 1.9s steps(14, end); }
.cat-wrap.action-play .cat-shadow { animation: kevin-play-shadow-wide 1.9s steps(14, end); }
.action-play .fx-object { animation: action-play-dot-wide 1.9s steps(14, end); }
.action-play .fx-object-secondary { animation: action-play-spark-wide 1.9s steps(12, end); }
.action-play .fx-caption { animation: action-play-caption-wide 1.9s steps(9, end); }

@keyframes kevin-action-pounce-wide {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0); }
  10% { transform: translate(-58px, 8px) scale(.9, 1.08) rotate(-3deg); }
  26% { transform: translate(118px, -42px) scale(1.04, .94) rotate(4deg); }
  42% { transform: translate(148px, -5px) scale(1) rotate(1deg); }
  57% { transform: translate(-126px, -30px) scale(1.04, .95) rotate(-4deg); }
  72% { transform: translate(-82px, 2px) scale(.96, 1.03) rotate(2deg); }
  87% { transform: translate(48px, -18px) scale(1.02, .97) rotate(-2deg); }
}

@keyframes kevin-play-shadow-wide {
  0%, 100% { opacity: .28; transform: translateX(-50%) scaleX(1); }
  10% { opacity: .24; transform: translateX(calc(-50% - 58px)) scaleX(.88); }
  26% { opacity: .08; transform: translateX(calc(-50% + 118px)) scaleX(.5); }
  42% { opacity: .2; transform: translateX(calc(-50% + 148px)) scaleX(.82); }
  57% { opacity: .08; transform: translateX(calc(-50% - 126px)) scaleX(.5); }
  72% { opacity: .22; transform: translateX(calc(-50% - 82px)) scaleX(.86); }
  87% { opacity: .11; transform: translateX(calc(-50% + 48px)) scaleX(.62); }
}

@keyframes action-play-dot-wide {
  0% { opacity: 0; transform: translate(-120px, 12px) scale(.65); }
  8%, 88% { opacity: 1; }
  22% { transform: translate(128px, -95px) scale(1); }
  39% { transform: translate(162px, 2px) scale(.8); }
  55% { transform: translate(-96px, -62px) scale(1.05); }
  72% { transform: translate(-142px, 18px) scale(.75); }
  88% { transform: translate(72px, -36px) scale(.95); }
  100% { opacity: 0; transform: translate(24px, 4px) scale(.45); }
}

@keyframes action-play-spark-wide {
  0%, 12% { opacity: 0; transform: translateX(-115px) scale(.35) rotate(0); }
  24%, 36% { opacity: 1; transform: translateX(112px) scale(1.2) rotate(45deg); }
  50% { opacity: 0; transform: translateX(155px) scale(.45) rotate(90deg); }
  60%, 76% { opacity: 1; transform: translateX(-122px) scale(1.15) rotate(135deg); }
  100% { opacity: 0; transform: translateX(52px) scale(.4) rotate(180deg); }
}

@keyframes action-play-caption-wide {
  0%, 8% { opacity: 0; transform: translateY(8px); }
  14%, 82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-7px); }
}

@media (max-width: 640px) {
  .pet-bowls { left: 25%; bottom: 82px; gap: 3px; transform: scale(.82); transform-origin: bottom left; }
  .cat-wrap.action-play .cat-body { animation-name: kevin-action-pounce-wide-mobile; }
}

@keyframes kevin-action-pounce-wide-mobile {
  0%, 100% { transform: translate(0, 0) scale(1); }
  12% { transform: translate(-38px, 7px) scale(.9, 1.08); }
  28% { transform: translate(72px, -34px) scale(1.04, .94); }
  45% { transform: translate(88px, -4px); }
  60% { transform: translate(-76px, -25px) scale(1.03, .95); }
  76% { transform: translate(-48px, 2px); }
  89% { transform: translate(32px, -14px); }
}

@media (prefers-reduced-motion: reduce) {
  .pet-bowl, .pet-bowl.bowl-refill,
  .cat-wrap.action-play .cat-body, .cat-wrap.action-play .cat-shadow,
  .action-play .fx-object, .action-play .fx-object-secondary,
  .action-play .fx-caption { animation: none !important; transition: none !important; }
}

/* Kevin 17: illustrated rooms, ambient office life, and proper dishes */

.scene-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  image-rendering: pixelated;
  filter: saturate(.92) contrast(.98);
  transition: opacity .28s steps(4, end), filter .28s steps(4, end);
}

.scene-environment::before {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 48%),
    radial-gradient(circle at 50% 48%, rgba(255,238,199,.12), transparent 48%);
  pointer-events: none;
}

.scene-environment::after { display: none; }
.scene-environment > .scene-window,
.scene-environment > .scene-board,
.scene-environment > .scene-shelf,
.scene-environment > .scene-plant,
.scene-environment > .scene-lamp,
.scene-environment > .scene-rug { opacity: 0 !important; }

.room-ambience {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.room-ambience::before,
.room-ambience::after,
.room-ambience i {
  position: absolute;
  display: block;
  content: "";
}

.environment-cubicle .room-ambience::before {
  top: 31%;
  left: 18%;
  width: 74px;
  height: 46px;
  border-radius: 8px;
  background: radial-gradient(circle, rgba(125,221,229,.28), transparent 67%);
  animation: room-screen-pulse 3.8s steps(4, end) infinite;
}

.environment-window .room-ambience {
  background: linear-gradient(116deg, rgba(255,231,150,.16), transparent 48%);
}

.environment-window .room-ambience i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,246,203,.9);
  box-shadow: 0 0 6px rgba(255,232,141,.7);
  animation: room-dust-drift 6.8s linear infinite;
}
.environment-window .room-ambience i:nth-child(1) { top: 24%; left: 19%; animation-delay: -1s; }
.environment-window .room-ambience i:nth-child(2) { top: 35%; left: 35%; animation-delay: -4.4s; }
.environment-window .room-ambience i:nth-child(3) { top: 20%; left: 53%; animation-delay: -2.7s; }
.environment-window .room-ambience i:nth-child(4) { top: 43%; left: 65%; animation-delay: -5.6s; }

.environment-archive .room-ambience::before {
  top: 17%;
  left: 10%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,202,104,.24), transparent 64%);
  animation: room-lamp-breathe 4.8s steps(6, end) infinite;
}

.environment-night .scene-backdrop { filter: saturate(.98) brightness(.9) contrast(1.03); }
.environment-night .room-ambience {
  background: radial-gradient(circle at 26% 32%, rgba(255,211,107,.12), transparent 28%);
}
.environment-night .room-ambience i {
  width: 4px;
  height: 4px;
  background: #fff0a0;
  box-shadow: 0 0 7px rgba(255,240,160,.7);
  animation: room-night-twinkle 3.7s steps(3, end) infinite;
}
.environment-night .room-ambience i:nth-child(1) { top: 15%; left: 14%; }
.environment-night .room-ambience i:nth-child(2) { top: 22%; left: 34%; animation-delay: -1.8s; }
.environment-night .room-ambience i:nth-child(3) { top: 12%; left: 52%; animation-delay: -2.7s; }
.environment-night .room-ambience i:nth-child(4) { top: 31%; left: 63%; animation-delay: -.9s; }

@keyframes room-screen-pulse { 45%, 55% { opacity: .42; transform: scale(.97); } }
@keyframes room-dust-drift {
  0% { opacity: 0; transform: translate(0, 16px); }
  18%, 75% { opacity: .9; }
  100% { opacity: 0; transform: translate(28px, -36px); }
}
@keyframes room-lamp-breathe { 50% { opacity: .62; transform: scale(.96); } }
@keyframes room-night-twinkle { 0%, 100% { opacity: .22; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.25); } }

.kevin-thought[data-tone="gossip"] { border-color: var(--amber); }
.kevin-thought[data-tone="gossip"]::before { border-top-color: var(--amber); }
.kevin-thought[data-tone="culture"] { border-color: #6bb8cc; }
.kevin-thought[data-tone="culture"]::before { border-top-color: #6bb8cc; }
.kevin-thought[data-tone="take"] { border-color: var(--lime); }
.kevin-thought[data-tone="take"]::before { border-top-color: var(--lime); }

.pet-bowls {
  left: clamp(8px, 7%, 56px);
  bottom: 82px;
  z-index: 5;
  gap: 10px;
  align-items: end;
}

.pet-bowl {
  --bowl-fill: 60%;
  --bowl-accent: var(--amber);
  width: 106px;
  height: 94px;
  filter: drop-shadow(3px 4px 0 rgba(35,27,43,.24));
}

.water-bowl { --bowl-accent: #69cde5; }
.bowl-art {
  position: absolute;
  inset: 0 0 8px;
  display: grid;
  place-items: center;
}
.bowl-art img {
  width: 102px;
  height: 102px;
  object-fit: contain;
  image-rendering: pixelated;
  transition: filter .22s steps(3, end), transform .22s steps(3, end);
}

.bowl-gauge {
  position: absolute;
  right: 11px;
  bottom: 1px;
  left: 11px;
  height: 7px;
  padding: 1px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 68%, transparent);
  border-radius: 4px;
  background: rgba(255,250,241,.64);
  box-shadow: 0 1px 0 rgba(255,255,255,.42);
}
.bowl-gauge i {
  display: block;
  width: var(--bowl-fill);
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bowl-accent) 70%, #fff), var(--bowl-accent));
  transition: width .55s steps(7, end);
}

.bowl-value {
  position: absolute;
  top: 0;
  right: -2px;
  z-index: 3;
  min-width: 31px;
  padding: 4px 4px 3px;
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 55%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  box-shadow: 2px 2px 0 rgba(35,27,43,.16);
  font: 900 .48rem/1 var(--pixel);
  text-align: center;
}

.pet-bowl[data-level="low"] .bowl-art img { filter: saturate(.7) brightness(.88); }
.pet-bowl[data-level="low"] .bowl-value { color: #fff; border-color: var(--red); background: var(--red); }
.pet-bowl[data-level="full"] .bowl-art img { filter: saturate(1.08) brightness(1.03); }
.pet-bowl:hover .bowl-art img,
.pet-bowl:focus-visible .bowl-art img { transform: translateY(-3px) scale(1.04); }

.water-bowl .bowl-art::after {
  position: absolute;
  top: 21px;
  left: 27px;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 7px #a8efff, 7px 4px 0 rgba(255,255,255,.58);
  content: "";
  animation: bowl-water-glint 3.4s steps(4, end) infinite;
}

.cat-wrap.tree-perched .kevin-thought { left: -26%; }
.cat-wrap.tree-perched .kevin-thought::before,
.cat-wrap.tree-perched .kevin-thought::after { right: 18px; left: auto; }

.food-bowl.bowl-refill .bowl-art { animation: bowl-kibble-hop 1.2s steps(7, end); }
.water-bowl.bowl-refill .bowl-art { animation: bowl-water-ripple 1.2s steps(7, end); }

@keyframes bowl-water-glint { 0%, 68%, 100% { opacity: 0; transform: translateX(0); } 74%, 90% { opacity: 1; transform: translateX(8px); } }
@keyframes bowl-kibble-hop { 0%, 100% { transform: translateY(0); } 24% { transform: translateY(-7px) rotate(-2deg); } 45% { transform: translateY(-2px) rotate(2deg); } }
@keyframes bowl-water-ripple { 0%, 100% { transform: scale(1); } 28% { transform: scale(1.08, .94); } 54% { transform: scale(.97, 1.03); } }

@media (max-width: 640px) {
  .scene-backdrop { object-position: 38% bottom; }
  .room-ambience i:nth-child(n+3) { display: none; }
  .pet-bowls { left: 8px; bottom: 69px; gap: 2px; transform: none; }
  .pet-bowl { width: 78px; height: 70px; }
  .bowl-art { inset: 0 0 7px; }
  .bowl-art img { width: 76px; height: 76px; }
  .bowl-value { top: 1px; right: -2px; min-width: 28px; font-size: .43rem; }
  .bowl-gauge { right: 8px; left: 8px; height: 6px; }
  .cat-wrap.tree-perched .kevin-thought { left: -5%; }
}

@media (max-width: 400px) {
  .pet-bowls { transform: scale(.9); transform-origin: bottom left; }
  .scene-backdrop { object-position: 36% bottom; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-backdrop,
  .room-ambience::before,
  .room-ambience::after,
  .room-ambience i,
  .bowl-art,
  .bowl-art::after,
  .bowl-art img { animation: none !important; transition: none !important; }
}

/* Kevin 25: visitor check-in and reliable browser badge */

.visitor-card {
  grid-template-columns: auto minmax(80px, auto) 74px auto;
}

.visitor-card .visitor-edit {
  display: inline-flex;
  width: auto;
  min-width: max-content;
  height: 38px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 9px;
  color: #fff;
  white-space: nowrap;
}

.visitor-card .visitor-edit svg { width: 15px; height: 15px; }
.visitor-card .visitor-edit span { font: 900 .49rem/1 var(--pixel); letter-spacing: .03em; }

.visitor-dialog {
  width: min(500px, calc(100% - 16px));
  max-height: calc(100dvh - 16px);
  overflow: hidden;
}

.visitor-dialog form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: calc(100dvh - 18px);
}

.visitor-dialog .dialog-head button { width: 44px; height: 44px; }

.visitor-dialog .dialog-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

.visitor-dialog-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.visitor-dialog-hero img {
  width: 160px;
  height: 160px;
  padding: 0;
  object-fit: contain;
  image-rendering: pixelated;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.visitor-dialog .visitor-dialog-hero h2 { margin: 0; font: 800 1.6rem/1.2 var(--ui); outline: none; }
.visitor-dialog-hero p { margin: 0; color: var(--muted); font-size: .82rem; }
.visitor-dialog .visitor-field { margin: 20px 0 8px; font: 650 1rem/1.3 var(--ui); }

.visitor-dialog #visitorNickname {
  width: 100%;
  min-height: 48px;
  padding: 10px 11px;
  color: var(--ink);
  border: 2px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 9px;
  background: #fffdf8;
  font: 600 1rem/1.3 var(--ui);
}

.visitor-dialog #visitorNickname:focus-visible {
  border-color: var(--green-2);
  outline: 3px solid color-mix(in srgb, var(--mint) 62%, transparent);
  outline-offset: 2px;
}

.visitor-dialog #visitorNickname[aria-invalid="true"] { border-color: #b24139; }

.visitor-input-help {
  margin: 6px 1px 0 !important;
  color: var(--muted);
  font: 650 .68rem/1.35 var(--ui);
}

.visitor-permission {
  margin: 10px 0 0;
  padding: 0;
  border: 0;
}

.visitor-permission legend {
  margin-bottom: 7px;
  padding: 0;
  color: var(--ink);
  font: 800 .64rem/1 var(--pixel);
}

.visitor-dialog .visitor-consent {
  gap: 10px;
  margin: 0;
  min-height: 44px;
  padding: 8px 0;
  color: var(--ink);
  border: 0;
  background: transparent;
  font: 500 .875rem/1.4 var(--ui);
  cursor: pointer;
}

.visitor-dialog .visitor-consent input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 1px 0 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
}

.visitor-consent span,
.visitor-consent strong,
.visitor-consent small { display: block; }
.visitor-consent strong { font: 800 .75rem/1.35 var(--ui); }
.visitor-consent small { margin-top: 4px; color: var(--muted); font: 650 .68rem/1.38 var(--ui); }

.visitor-privacy {
  margin: 14px 0 0 !important;
  padding: 11px 12px;
  color: var(--muted);
  border: 1px dashed color-mix(in srgb, var(--line) 68%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--paper-deep) 76%, var(--paper));
  font: 650 .68rem/1.42 var(--ui);
}

.visitor-dialog .field-help {
  min-height: 20px;
  margin: 10px 0 3px !important;
  font: 750 .7rem/1.35 var(--ui);
}

.visitor-dialog .field-help[data-state="error"] { color: #a4332f; }

.visitor-dialog-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin-top: 10px;
}

.visitor-dialog-actions button {
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
  font: 700 1rem/1.25 var(--ui);
}

.visitor-skip {
  color: var(--green);
  border: 0;
  background: transparent;
}
.visitor-dialog .visitor-skip { font-size: .875rem; font-weight: 500; }
.visitor-dialog .field-help:empty { display: none; }
.visitor-dialog .visitor-ai-note { margin: 6px 0 0; color: var(--muted); font: 500 .75rem/1.4 var(--ui); }
.visitor-privacy-details { font: 500 .875rem/1.4 var(--ui); }
.visitor-privacy-details summary { padding: 12px 0; min-height: 44px; cursor: pointer; color: var(--muted); }
.visitor-privacy-details .visitor-privacy { margin: 0 0 10px !important; padding: 0; border: 0; background: transparent; font: 400 .875rem/1.5 var(--ui); }
.visitor-dialog[data-mode="onboarding"] .dialog-head { display: none; }
.visitor-dialog[data-mode="onboarding"] form { grid-template-rows: minmax(0, 1fr); }

.visitor-dialog-actions button:hover:not(:disabled),
.visitor-dialog-actions button:focus-visible,
.visitor-dialog .forget-button:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

.visitor-dialog-actions button:disabled,
.visitor-dialog .forget-button:disabled { opacity: .55; cursor: wait; }
.visitor-dialog .forget-button { min-height: 44px; margin-top: 10px; padding: 8px 2px; }
.visitor-dialog [hidden] { display: none !important; }
.visitor-dialog[data-mode="onboarding"] #visitorClose,
.visitor-dialog[data-mode="onboarding"] .forget-button { display: none !important; }
.visitor-dialog[data-mode="settings"] #visitorSkip { display: none !important; }
.visitor-dialog[data-mode="settings"] .visitor-dialog-actions { grid-template-columns: 1fr; }

@media (max-width: 640px) {
  .visitor-card { grid-template-columns: minmax(54px, auto) auto; }
  .visitor-card > svg,
  .visitor-card .visitor-copy span,
  .visitor-card .relationship-meter { display: none; }
  .visitor-card .visitor-edit { height: 40px; min-height: 40px; }
  .visitor-dialog .dialog-body { padding: 16px; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
}

@media (max-width: 420px) {
  .visitor-dialog-actions { grid-template-columns: 1fr; }
}

@media (max-height: 700px) {
  .visitor-dialog-hero img { width: 120px; height: 120px; }
}

@media (max-width: 400px) {
  .utility-bar { flex-wrap: wrap; }
  .header-tools { width: 100%; justify-content: flex-end; }
  .visitor-card { grid-template-columns: auto; }
  .visitor-card .visitor-copy { display: none; }
  .visitor-card .visitor-edit { min-height: 44px; }
}

/* A single, compact care layout across phone and desktop sizes. */
#meterList { grid-template-columns: repeat(5, minmax(0, 1fr)); align-content: start; gap: 8px; padding: 14px 12px 12px; }
#meterList .meter-row { grid-template-columns: minmax(0, 1fr); grid-template-rows: 20px auto auto 4px; gap: 4px; padding: 0; background: transparent; }
#meterList .meter-icon { grid-column: 1; grid-row: 1; }
#meterList .meter-icon svg { width: 18px; height: 18px; }
#meterList .meter-label { display: block; grid-column: 1; grid-row: 2; color: var(--muted); font: 600 .875rem/1.25 var(--ui); }
#meterList .meter-value { grid-column: 1; grid-row: 3; font: 750 .875rem/1.25 var(--ui); font-variant-numeric: tabular-nums; }
#meterList .meter-track { grid-column: 1; grid-row: 4; width: 100%; height: 4px; margin-top: 2px; }
.care-console { padding: 0 12px 12px; }
.care-console-head { min-height: 34px; margin: 0 0 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--line) 20%, transparent); }
.care-console-title { gap: 6px; font: 750 .875rem/1.25 var(--ui); letter-spacing: .06em; }
.care-console-title svg { width: 14px; height: 14px; }
.care-console .kb-balance { gap: 5px; padding: 4px 6px; font: 700 .875rem/1.25 var(--ui); background: transparent; }
.care-console .kb-balance small { font-size: .75rem; }
#actionGrid { gap: 8px; }
#actionGrid .action-button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 60px; padding: 8px 4px; color: var(--green); border: 1px solid color-mix(in srgb, var(--line) 35%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--paper) 85%, white); box-shadow: none; font: 650 .875rem/1.2 var(--ui); }
#actionGrid .action-button svg { flex: none; width: 21px; height: 21px; }
#actionGrid .action-button span { display: block; color: inherit; }
#actionGrid .action-button:hover:not(:disabled),
#actionGrid .action-button:focus-visible:not(:disabled) { background: var(--lime); outline: 2px solid var(--green-2); outline-offset: 2px; transform: none; }
#actionGrid .action-button:active:not(:disabled) { transform: translateY(1px); }
#actionGrid .action-button:disabled { opacity: .5; cursor: not-allowed; }
#actionGrid .action-button.nap-ready { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 55%, var(--paper)); animation: none; }
.care-console .system-message { min-height: 18px; margin: 8px 0 0; font: 500 .875rem/1.35 var(--ui); }
@media (max-width: 840px) {
  #actionGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 841px) {
  #meterList { gap: 5px; padding-inline: 10px; }
}

/* Room coordinates and depth share the artwork's cover crop. */
.cat-wrap { transform: translateX(calc(-50% + var(--roam-x))) translateY(var(--roam-y)) scale(var(--depth-scale, 1)); transform-origin: 50% 100%; pointer-events: none; }
.room-hotspots { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.room-hotspot { position: absolute; width: 44px; height: 44px; min-height: 44px; padding: 0; transform: translate(-50%, -50%); border: 1px solid rgba(255,244,209,.7); border-radius: 50%; background: rgba(40,31,24,.24); color: #fff5d8; font: 400 24px/1 sans-serif; cursor: pointer; pointer-events: auto; text-shadow: 0 1px 3px #20160d; }
.room-hotspot:hover, .room-hotspot:focus-visible { background: rgba(40,31,24,.7); outline: 3px solid #f6c85b; outline-offset: 2px; }
.room-hotspot[hidden] { display: none; }
.cat-wrap.meal-approach .cat-body { animation: kevin-walk-bob .42s steps(2,end) infinite; }
.cat-wrap.meal-eating .cat-sprite, .cat-wrap.meal-drinking .cat-sprite { opacity: 0 !important; animation: none !important; }
.cat-wrap.meal-eating .cat-body, .cat-wrap.meal-drinking .cat-body { animation: none !important; transform: none; }
.cat-meal-frames { display: none; position: absolute; inset: auto 0 0; width: 100%; aspect-ratio: 543 / 724; background-size: 400% 100%; background-repeat: no-repeat; image-rendering: pixelated; }
.meal-eating .cat-meal-frames { display: block; background-image: url("assets/kevin-eating-frames.png"); animation: meal-nibble 1.5s steps(1,end) infinite; }
.meal-drinking .cat-meal-frames { display: block; background-image: url("assets/kevin-drinking-frames.png"); animation: meal-lap 1s steps(1,end) infinite; }
.cat-wrap[data-meal] .action-fx, .cat-wrap[data-meal] .accessory-layer { visibility: hidden; }
.pet-bowl.is-in-use { filter: brightness(1.14); }
.pet-bowl.is-in-use .bowl-value { opacity: 0; }
.meal-eating .cat-shadow { bottom: 13%; left: 64%; width: 58%; height: 4%; opacity: .2; }
.meal-drinking .cat-shadow { bottom: 25%; left: 64%; width: 58%; height: 4%; opacity: .2; }
.water-bowl.is-in-use .bowl-art { animation: bowl-sip .6s ease-in-out infinite; }
@keyframes meal-nibble { 0%,100% { background-position: 0 0; } 18%,46% { background-position: 33.333333% 0; } 32%,60% { background-position: 66.666667% 0; } 78% { background-position: 100% 0; } }
@keyframes meal-lap { 0%,40%,80%,100% { background-position: 0 0; } 15%,55% { background-position: 33.333333% 0; } 28%,68% { background-position: 66.666667% 0; } 90% { background-position: 100% 0; } }
@keyframes bowl-sip { 50% { transform: scaleX(1.035); filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .cat-wrap, .cat-wrap[data-meal] .cat-body, .cat-meal-frames, .water-bowl.is-in-use .bowl-art { animation: none !important; transition: none !important; }
}

/* Contact with the illustrated surfaces, using small pieces of the same artwork. */
.room-surfaces { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.room-surface { position: absolute; opacity: 0; image-rendering: pixelated; filter: saturate(.92) contrast(.98); }
.environment-night .room-surface { filter: saturate(.98) brightness(.9) contrast(1.03); }
.room-surface.responding { opacity: 1; }
.surface-cushion.responding { animation: cushion-settle .85s ease-out; }
.surface-shuffle.responding { animation: books-shuffle .8s ease-out; }
@keyframes cushion-settle { 0%,100% { transform: translateY(0); } 25% { transform: translateY(2px); } 55% { transform: translateY(.5px); } 75% { transform: translateY(1px); } }
@keyframes books-shuffle { 0%,100% { transform: translateX(0) rotate(0); } 22% { transform: translateX(2px) rotate(.7deg); } 48% { transform: translateX(-1px) rotate(-.35deg); } 73% { transform: translateX(.5px); } }
.cat-wrap.room-resting { z-index: 1; }
.room-resting .cat-shadow { bottom: 4%; width: 48%; height: 4%; opacity: .22; filter: blur(2px); }
.room-resting .inspect-spark { display: none; }
.room-resting .cat-body, .room-resting .sprite-stack { animation: none; transform: none; }
.room-resting .cat-body, .room-resting .sprite-stack,
.room-travel .cat-body, .room-travel .sprite-stack,
.cat-wrap[data-meal] .cat-body, .cat-wrap[data-meal] .sprite-stack { min-width: 0; min-height: 0; width: 100%; height: 100%; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
.room-resting .cat-sprite { animation: none !important; transform: none; }
.room-resting.room-landing .cat-body { animation: room-paws-settle .45s ease-out; }
@keyframes room-paws-settle { 0% { transform: translateY(-2px); } 38% { transform: translateY(1px); } 100% { transform: translateY(0); } }
.room-travel.jumping .cat-body { animation: room-hop 1.05s ease-out; }
.room-travel.jumping.jump-down .cat-body { animation-name: room-hop; }
@keyframes room-hop { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-40px); } }
.room-hotspot[aria-pressed="true"] { opacity: 0; }
.room-hotspot[aria-pressed="true"]:focus-visible { opacity: .7; }
@media (prefers-reduced-motion: reduce) {
  .room-surface.responding, .room-resting.room-landing .cat-body, .room-travel.jumping .cat-body { animation: none !important; }
}