:root {
  --ink: #3d2f45;
  --muted: #6d6376;
  --paper: #fffdf7;
  --lcd: #c7d1a4;
  --tint: #ffe3ee;
  --tint-2: #ffd2e3;
  --accent: #ff5c9d;
  --lamp: #f2c14e;
  --shell: #ff5c9d; /* shell body color, fills the phone frame's corners */
  --bezel: #3b3548; /* the dark frame around the screen */
  --btn: #6b4cff;
  --btn-light: #a996ff;
  --shadow: 0 3px 0 var(--edge);
  /* The soft look: a line is a darker tone of the body it sits on, never black; a thing's thickness is a thin darker edge
     under it, not a block of shadow thrown to one side; corners are a little round */
  --line: color-mix(in srgb, var(--ink) 46%, var(--shell));
  --edge: color-mix(in srgb, var(--ink) 26%, transparent);
  --round: 7px;
  color-scheme: light;
}
/* The other themes are in themes.css */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Galmuri11", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  /* Korean breaks only between words, never inside one */
  word-break: keep-all;
  overflow-wrap: break-word;
  /* A pixel gingham tablecloth for the toy to sit on */
  background-color: var(--tint);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--tint-2) 70%, transparent) 50%, transparent 50%),
    linear-gradient(color-mix(in srgb, var(--tint-2) 70%, transparent) 50%, transparent 50%);
  background-size: 32px 32px;
}

/* The handheld's own top edge: its name printed on the shell, the purse and the babysitter's switch. (The page has
   no header of its own: the handheld is the page.) */
/* A thin strip along the top of the screen's dark frame: the power light, DOVI in the middle, the settings gear.
   The two sides take equal room, so the name sits in the middle. */
.face-head { display: flex; align-items: center; gap: 6px; min-width: 0; height: 16px; margin: 0 0 3px; }
.head-side { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; }
.head-side.right { justify-content: flex-end; }
.face-bezel:has(#pip:not([hidden])) .head-side.right { padding-right: 22px; } /* (the floating button) */
.face-head h1 { flex: none; margin: 0 0 0 3px; font-family: "Galmuri11", sans-serif; font-size: 12px; line-height: 1; letter-spacing: 3px; color: color-mix(in srgb, #fff 58%, var(--bezel)); }
.face-head .head-btn { flex: none; position: relative; width: 16px; height: 16px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.face-head .head-btn::after { content: ""; position: absolute; inset: -9px -7px; } /* (a larger place to press) */
/* (the gear is drawn dark for paper: on the dark frame it is shown light) */
.face-head .head-btn img { width: 15px; height: 15px; image-rendering: pixelated; pointer-events: none; filter: brightness(0) invert(0.72); }
.face-head .head-btn:hover img { filter: brightness(0) invert(1); }
/* The purse sits on the screen itself, in its top right corner: a pixel coin and the count, with a dark edge so they
   read over any sky. Pressing it opens the shop. */
.face-bezel > .purse { position: absolute; z-index: 2; right: 13px; top: 30px; height: auto; padding: 0; gap: 3px; border: 0; background: none; box-shadow: none; clip-path: none;
  font-size: 15px; line-height: 16px; color: #fff3b0;
  text-shadow: 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink), 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -0 1px 0 var(--edge); }
.face-bezel > .purse::after { content: ""; position: absolute; inset: -8px -6px; } /* (a larger place to press) */
.face-bezel > .purse img { width: 16px; height: 16px; filter: drop-shadow(1px 0 0 var(--ink)) drop-shadow(-1px 0 0 var(--ink)) drop-shadow(0 1px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)); }
body.pip .face-bezel > .purse { top: 24px; right: 12px; }
body.pip .face-head { display: none; }

/* Presses and changes ease in and out rather than jump (the pet on the screen stays pixel-stepped; the handheld's
   own buttons move like buttons) */
.purse, .auto-btn, .chip-btn, .bag-row, .invite-btn, .link-tile, .primary, .buy, .speed-btn, .shell-btn, .text-btn, .event-action {
  transition: transform 130ms cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 130ms cubic-bezier(0.2, 0.7, 0.3, 1), background-color 160ms ease, filter 160ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .purse, .auto-btn, .chip-btn, .bag-row, .invite-btn, .link-tile, .primary, .buy, .speed-btn, .shell-btn, .text-btn, .event-action, .dial button, .hw { transition: none; }
}
/* The purse: how many coins, and the way into the shop. A small counter window on the shell: a pixel coin and
   lit digits on the dark of the screen's frame. */
:root { --notched: polygon(3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px), 0 3px, 3px 3px); }
.purse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 9px 0 5px;
  background: var(--bezel);
  border: 2px solid var(--line);
  box-shadow: inset 0 3px 0 rgb(255 255 255 / 0.14);
  clip-path: var(--notched);
  color: #ffe38f;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.purse img { width: 24px; height: 24px; image-rendering: pixelated; }
.purse b { font-weight: 400; font-variant-numeric: tabular-nums; }
.purse:active { transform: translateY(2px); }
.purse:hover { filter: brightness(1.15); }

/* The handheld is the page: one column, on a phone and on a desk alike. Its screen stays on top; the dial under the
   name plate changes the panel below it. */
.layout {
  display: grid;
  grid-template-columns: minmax(300px, 420px);
  justify-content: center;
  align-items: start;
  margin: auto; /* (in the body's column: the very middle of the window, and never cut off when the window is short) */
  padding: 24px;
}
@media (min-width: 761px) { body:not(.pip) { display: flex; flex-direction: column; } }
.device-col { display: grid; justify-items: center; gap: 12px; }
.dock { display: none; } /* (phones: an unseen marker at the bottom edge, see below) */
/* The log fills whatever height the card has (set by its row), and scrolls; its own messages never
   stretch the card, so the input stays right under the last message area */
.chat-card .chat-log { flex: 1 1 0; min-height: 0; max-height: none; contain: size; }

/* Talking with the pet: its lines on the left, the owner's on the right */
.chat-log { list-style: none; margin: 0 0 10px; padding: 0 2px 0 0; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 6px; font-size: 14px; line-height: 1.45; }
.chat-log:empty::before { content: "말을 걸면 이 아이가 대답해요. 나눈 이야기는 기억해 둬요."; color: var(--muted); font-size: 13px; }
.chat-log li { max-width: 85%; padding: 5px 10px; border: 2px solid var(--line); background: var(--paper); justify-self: start; }
.chat-log li.me { justify-self: end; background: var(--tint-2); }
/* Waiting for its answer: one dot, two, three, and round again */
.chat-log li.typing { color: var(--muted); letter-spacing: 2px; }
.chat-log li.typing i { font-style: normal; animation: typing-dot 1.2s steps(1) infinite; }
.chat-log li.typing i:nth-child(2) { animation-name: typing-dot-2; }
.chat-log li.typing i:nth-child(3) { animation-name: typing-dot-3; }
@keyframes typing-dot-2 { 0% { opacity: 0; } 33% { opacity: 1; } }
@keyframes typing-dot-3 { 0% { opacity: 0; } 66% { opacity: 1; } }
@keyframes typing-dot { 0% { opacity: 1; } }
.chat-log li.memory { justify-self: stretch; max-width: none; border: 0; background: none; padding: 2px 0; text-align: center; color: var(--muted); font-size: 12px; }
/* 크게 / 작게: one button in the top right corner of the panel in view. It stays put while the panel scrolls, so each
   panel keeps that corner clear: a row in the talk, a gap the text flows round in 이야기 and 친구, a title in 가방. */
body.pip .pane-grow { display: none; }
.pane-grow { position: absolute; top: 8px; right: 9px; z-index: 3; width: 30px; height: 26px; padding: 0; display: grid; place-items: center;
  background: var(--paper); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--edge); cursor: pointer; }
.pane-grow[hidden] { display: none; }
.pane-grow img { width: 16px; height: 16px; image-rendering: pixelated; pointer-events: none; }
.pane-grow:active { transform: translate(2px, 2px); box-shadow: none; }
.pane-grow[aria-pressed="true"] { background: var(--tint-2); }
.chat-bar { flex: none; height: 24px; }
.pet-card::before, .friends-card::before { content: ""; float: right; width: 34px; height: 24px; }
.pane.card h2.bag-title { margin: 0; line-height: 24px; }
/* A panel made large: it comes up to where the name plate starts, in the room of the plate and the dial. The screen
   stays as it is. (Pressed again, or a swipe to another panel, puts them back.) */
.device-frame.pane-wide .plate { display: none; }
.chat-form { display: flex; gap: 8px; margin-top: auto; }
.chat-form input { flex: 1 1 0; width: 0; min-height: 38px; padding: 4px 10px; border: 2px solid var(--line); background: var(--paper); font: inherit; font-size: 16px; }
.chat-form button { padding: 6px 12px; }
.chat-memory { margin-top: 10px; font-size: 13px; }
.chat-memory[hidden] { display: none; }
.chat-memory summary { cursor: pointer; }
.chat-memory ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.chat-memory li { position: relative; padding-left: 12px; line-height: 1.45; color: var(--ink); }
.chat-memory li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; background: var(--accent); }

.device-frame { position: relative; }
.device { position: relative; image-rendering: pixelated; }
/* Phones: only the toy's front panel, shown twice as large, framed like the face of the device */
/* The handheld is drawn in pixels: its outline, stepped corners, highlight and shade are the edges of the handheld
   picture itself (assets/shell-<theme>.png, set as --shell-img), each of its pixels shown --u wide. */
:root { --u: 3px; }
.device-frame.face {
  overflow: hidden;
  background: var(--shell) padding-box;
  border: calc(4 * var(--u)) solid transparent;
  border-image: var(--shell-img) 4 / calc(4 * var(--u)) stretch;
  image-rendering: pixelated;
}
/* Its hard shadow, cut to the same stepped corners */
.device-col { position: relative; isolation: isolate; }
.device-col:has(> .device-frame)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(4px, 4px);
  background: var(--ink);
  clip-path: polygon(
    calc(4 * var(--u)) 0, calc(100% - 4 * var(--u)) 0, calc(100% - 4 * var(--u)) var(--u), calc(100% - 2 * var(--u)) var(--u),
    calc(100% - 2 * var(--u)) calc(2 * var(--u)), calc(100% - var(--u)) calc(2 * var(--u)), calc(100% - var(--u)) calc(4 * var(--u)), 100% calc(4 * var(--u)),
    100% calc(100% - 4 * var(--u)), calc(100% - var(--u)) calc(100% - 4 * var(--u)), calc(100% - var(--u)) calc(100% - 2 * var(--u)), calc(100% - 2 * var(--u)) calc(100% - 2 * var(--u)),
    calc(100% - 2 * var(--u)) calc(100% - var(--u)), calc(100% - 4 * var(--u)) calc(100% - var(--u)), calc(100% - 4 * var(--u)) 100%, calc(4 * var(--u)) 100%,
    calc(4 * var(--u)) calc(100% - var(--u)), calc(2 * var(--u)) calc(100% - var(--u)), calc(2 * var(--u)) calc(100% - 2 * var(--u)), var(--u) calc(100% - 2 * var(--u)),
    var(--u) calc(100% - 4 * var(--u)), 0 calc(100% - 4 * var(--u)), 0 calc(4 * var(--u)), var(--u) calc(4 * var(--u)),
    var(--u) calc(2 * var(--u)), calc(2 * var(--u)) calc(2 * var(--u)), calc(2 * var(--u)) var(--u), calc(4 * var(--u)) var(--u));
}
.device-frame.face .device { display: none; }
.face-panel { padding: 8px 6px 6px; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.device-frame.face { display: flex; flex-direction: column; }
.face-buttons { flex: 1 1 auto; align-content: center; }
.face-foot { display: none; } /* (the panel below the dial takes its room; sound is in the settings) */
/* The mark and the speaker are cut straight out of the handheld picture, so they match the desktop pixel for pixel */
.face-mark, .face-grille { display: block; background-repeat: no-repeat; image-rendering: pixelated; }

body.pip .face-foot { display: none; }
/* Who it is and how it is doing: one plate under the screen, always in view */
.plate {
  margin-top: 12px;
  padding: 7px 10px 8px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--line);
  box-shadow: 0 3px 0 var(--edge);
}
.plate-who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; line-height: 1.3; }
.plate-who b { font-weight: 400; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* How far along this age it is, and how long is left (or what is wrong right now) */
.plate-grow { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; }
.plate-when { flex: none; font-size: 12px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.plate-when:empty { display: none; }
.plate-when.alert { color: #d22; }
.plate .grow-bar { flex: 1; height: 6px; margin: 0; }
.mini { display: none; } /* (the gauges are under the buttons; the name plate keeps the hearts) */
.mini .meter { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mini img { width: 16px; height: 16px; flex: none; image-rendering: pixelated; }
.mini .cells { flex: 1; grid-template-columns: repeat(5, 1fr); gap: 1px; }
.mini .cells i { height: 8px; border-width: 1.5px; }
.mini .cells.low i.on { background: #ff4d4d; }
.plate .flags { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0 !important; min-height: 0; }
body.pip .plate { display: none; }
.device-frame.tight .plate { margin-top: 8px; padding: 5px 8px 4px; }
.device-frame.tight .plate-grow { margin-bottom: 2px; }
.device-frame.tight .face-panel { padding: 4px 4px 4px; }
.device-frame.tight .dial { margin-top: 8px; }
.device-frame.tight .dial button { padding: 2px 16px 3px; }
.device-frame.tight .dial span { display: none; }
/* The screen gives way when the panel below would get too small (set by layout()) */
.face-bezel { align-self: center; width: var(--screen-w, 100%); box-sizing: border-box; }
.face-panel[hidden] { display: none; }
.face-bezel {
  position: relative;
  background: var(--bezel);
  border: 2px solid var(--line);
  padding: 4px 6px 6px;
  /* (a lighter line along its top edge, and one pixel missing at each corner, as on the handheld picture) */
  box-shadow: inset 0 3px 0 rgb(255 255 255 / 0.14);
  clip-path: var(--notched);
}
/* Power light: two pixels square, its top left one lit brighter */
.face-bezel::before { content: ""; position: absolute; left: 8px; top: 9px; width: 6px; height: 6px; background: linear-gradient(#ffb3b3, #ffb3b3) 0 0 / 3px 3px no-repeat, #ff4d4d; }
/* Floating the handheld over other windows: a small button on the dark frame, in its top right corner */
.face-bezel .shell-btn { right: 7px; top: 4px; width: 16px; height: 16px; }
/* (floating: the strip is gone, the frame keeps a plain top with the light and the button in it) */
body.pip .face-bezel { padding-top: 18px; }
body.pip .face-bezel::before { left: 6px; top: 6px; }
body.pip .face-bezel .shell-btn { right: 6px; top: 1px; }
.face-bezel .shell-btn::after { content: ""; position: absolute; inset: -6px; } /* (a larger place to press) */
.face-bezel canvas {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 96 / 80;
  border: 2px solid var(--line);
  background: #c7d1a4;
}
/* Two pills under the panel, as SELECT and START: the talk, and the menu. The one in use is pressed in and dark; a
   red dot marks news */
.dial { margin: 10px 0 4px; display: flex; justify-content: center; gap: 22px; flex: none; }
.dial button {
  position: relative; min-width: 84px; padding: 3px 18px 5px; border: 0; border-radius: 10px; background: #6b5f78; color: #fff;
  font: inherit; font-size: 13px; letter-spacing: 1px; line-height: 1.3; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 0 0 2px var(--line), 0 4px 0 var(--edge);
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.dial button:active { transform: translateY(3px); box-shadow: 0 0 0 2px var(--line), 0 1px 0 var(--edge); }
.dial img { width: 20px; height: 20px; image-rendering: pixelated; }
.dial button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: 0 0 0 2px var(--line), 0 1px 0 var(--edge); transform: translateY(3px); }
.dial .dot { position: absolute; top: -6px; right: -4px; width: 10px; height: 10px; background: #ff4d4d; border: 2px solid var(--line); animation: dot-pop 1.2s ease-in-out infinite; }
.dial .dot[hidden] { display: none; }
@keyframes dot-pop { 50% { transform: scale(1.25); } }
body.pip .dial { display: none; }

/* The panel under the dial: one of five, the others out of the way */
.panes { flex: 1 1 auto; min-height: 0; margin-top: 8px; position: relative; display: flex; }
.pane { display: none; flex: 1 1 auto; min-width: 0; min-height: 0; }
.pane.open { display: block; animation: pane-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes pane-in { from { opacity: 0; transform: translateX(var(--from, 0px)); } }
.pane.card { overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 12px; box-shadow: 0 3px 0 var(--edge); touch-action: pan-y; }
.pane.card h2 { font-size: 15px; margin-bottom: 6px; }
#chat-title, #friends-title { display: none; } /* the dial already says where this is */
.pane.chat-card.open { display: flex; flex-direction: column; }
.pane[data-pane="care"].open { display: flex; flex-direction: column; }
body.pip .pane { display: none !important; }
body.pip .pane[data-pane="care"] { display: flex !important; flex-direction: column; }
@media (prefers-reduced-motion: reduce) { .pane.open { animation: none; } }

/* 돌봄: what can be done right now (only what applies), over the four buttons */
/* The top of the care panel: what can be done right now, as chips; those that do not fit go to a second row */
.care-top { display: flex; align-items: flex-start; gap: 6px; flex: none; min-width: 0; }
.care-top .now { flex: 1 1 0; flex-wrap: wrap; overflow: visible; }
body.pip .care-top { display: none; }
/* The babysitter's key: at the end of the name plate's first row, left of the speed button and the same size as it.
   A bottle and the minutes of the sitter's time that are left. Called, it is green and a ring goes out from it again
   and again. */
.plate-who .auto-btn, .bag-tools .auto-btn { margin-left: auto; flex: none; width: auto; height: auto; min-height: 24px; padding: 0 7px 0 5px; display: inline-flex; align-items: center; gap: 3px;
  border: 2px solid var(--line); box-shadow: none; clip-path: none; font: inherit; font-size: 12px; line-height: 1; color: var(--ink); white-space: nowrap; }
.plate-who .auto-btn img, .bag-tools .auto-btn img { width: 16px; height: 16px; }
.plate-who .auto-btn b, .bag-tools .auto-btn b { font-weight: 400; font-variant-numeric: tabular-nums; overflow: visible; }
.plate-who .auto-btn:active, .bag-tools .auto-btn:active { transform: translate(1px, 1px); box-shadow: none; }
.plate-who .auto-btn[aria-pressed="true"], .bag-tools .auto-btn[aria-pressed="true"] { transform: none; animation: sitter-glow 1.6s ease-out infinite; }
.plate-who .auto-btn.empty b, .bag-tools .auto-btn.empty b { color: var(--muted); }
.plate-who .auto-btn + .speed-btn:not([hidden]), .bag-tools .auto-btn + .speed-btn:not([hidden]) { margin-left: 0; }
@keyframes sitter-glow { 0% { box-shadow: 0 0 0 0 rgb(61 220 90 / 0.75); } 100% { box-shadow: 0 0 0 8px rgb(61 220 90 / 0); } }
@media (prefers-reduced-motion: reduce) { .plate-who .auto-btn[aria-pressed="true"], .bag-tools .auto-btn[aria-pressed="true"] { animation: none; box-shadow: 0 0 0 3px rgb(61 220 90 / 0.6); } }
.now { display: flex; align-items: center; gap: 6px; flex: none; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; } /* (room for a pressed chip and the sitter's ring: a row that scrolls clips at its edge) */
.now::-webkit-scrollbar { display: none; }
.now:not(:has(.chip-btn:not([hidden]))) { visibility: hidden; }
.chip-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 9px 0 6px;
  background: var(--paper);
  border: 2px solid var(--line);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.chip-btn[hidden] { display: none; }
/* What cannot wait (medicine for a sick pet): lit, and it bobs like a button that is wanted */
/* (it pulses in place: the row of chips scrolls sideways and so clips whatever moves above its edge) */
.chip-btn.urgent { background: var(--lamp, #f2c14e); animation: urgent-pulse 1s ease-in-out infinite; }
@keyframes urgent-pulse { 50% { background: var(--paper); } }
@media (prefers-reduced-motion: reduce) { .chip-btn.urgent { animation: none; } }
.chip-btn img { width: 18px; height: 18px; image-rendering: pixelated; }
.chip-btn b { font-weight: 400; }
.chip-btn:active { transform: translate(1px, 1px); }
.chip-btn:disabled { opacity: 0.5; cursor: default; }
body.pip .now { display: none; }

/* 가방: everything else, a row each */
.bag-card { display: none; gap: 6px; align-content: start; grid-template-columns: minmax(0, 1fr); }
.bag-card.open { display: grid; }
.bag-row { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 40px; box-sizing: border-box; padding: 4px 10px; background: var(--paper); border: 2px solid var(--line); font-size: 15px; text-align: left; cursor: pointer; }
.bag-row img { width: 22px; height: 22px; image-rendering: pixelated; flex: none; }
.bag-row b { font-weight: 400; flex: none; }
.bag-row small { margin-left: auto; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bag-row:active { transform: translate(1px, 1px); }
.bag-row[aria-disabled="true"] { opacity: 0.55; }

/* 베이비시터: a square key on the shell with a baby bottle on it. While Jev is the one pressing the buttons the key
   stays down and green, the bottle rocks, and the power light on the screen's frame blinks green. */
.auto-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--paper);
  border: 2px solid var(--line);
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.16);
  clip-path: var(--notched);
  cursor: pointer;
}
.auto-btn img { width: 24px; height: 24px; image-rendering: pixelated; pointer-events: none; }
.auto-btn:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.16); }
.auto-btn[aria-pressed="true"] { background: #7be495; transform: translateY(2px); box-shadow: inset 0 3px 0 rgb(0 0 0 / 0.16); }
.auto-btn[aria-pressed="true"] img { animation: sitter-rock 1.4s ease-in-out infinite; }
@keyframes sitter-rock { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.device-frame.sitting .face-bezel::before { background: linear-gradient(#d6ffe0, #d6ffe0) 0 0 / 3px 3px no-repeat, #3ddc5a; animation: led-blink 1s ease-in-out infinite; }
@keyframes led-blink { 0%, 100% { opacity: 1; box-shadow: 0 0 7px 2px #3ddc5a; } 50% { opacity: 0.35; box-shadow: 0 0 0 0 #3ddc5a; } }
@media (prefers-reduced-motion: reduce) { .auto-btn[aria-pressed="true"] img, .device-frame.sitting .face-bezel::before { animation: none; } }
@keyframes auto-lamp { 50% { opacity: 0.45; } }
/* 베이비시터 presses a button: its own hand comes down on it, and the button glows green, so it is plain that
   nobody at the screen pressed it */
.sitter-hand { position: absolute; z-index: 6; width: 36px; height: 36px; margin: -44px 0 0 -18px; image-rendering: pixelated; pointer-events: none; animation: sitter-tap 900ms cubic-bezier(0.35, 0, 0.3, 1) both; }
.sitter-hand img { display: block; width: 100%; height: 100%; transform: rotate(90deg); } /* (the drawn hand points right: here it points down, at the button under it) */
.sitter-hand::after { content: "베이비시터"; position: absolute; left: 50%; top: -18px; transform: translateX(-50%); padding: 0 5px; background: #3ddc5a; color: var(--ink); border: 2px solid var(--line); font-size: 10px; line-height: 14px; white-space: nowrap; }
@keyframes sitter-tap { 0% { opacity: 0; transform: translateY(-26px); } 20% { opacity: 1; transform: translateY(-26px); } 45% { transform: translateY(0); } 60% { transform: translateY(6px); } 75% { transform: translateY(0); } 100% { opacity: 0; transform: translateY(-18px); } }
.hw.sitter .hw-pic { filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(0 0 7px #3ddc5a) drop-shadow(0 0 7px #3ddc5a); }
.hw.sitter { transform: translateY(3px) scale(0.94); }
.chip-btn.sitter { transform: translateY(2px); box-shadow: 0 0 0 3px #3ddc5a; }
/* On the screen too, for when the buttons are behind another panel */
.sitter-badge { position: absolute; z-index: 4; left: 0; top: 0; padding: 1px 6px; background: #3ddc5a; color: var(--ink); border: 2px solid var(--line); font-size: 11px; line-height: 15px; pointer-events: none; animation: sitter-badge 1400ms ease both; }
@keyframes sitter-badge { 0% { opacity: 0; } 12%, 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sitter-hand, .sitter-badge { animation-duration: 1ms; } }

.face-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 6px; justify-items: center; }
/* Each button's own gauge under it: the thing this button fills */
.face-cell .cells { width: min(56px, 90%); grid-template-columns: repeat(5, 1fr); gap: 1px; }
.face-cell .cells i { height: 7px; border-width: 1.5px; }
.face-cell .cells.low i.on { background: #ff4d4d; }
.face-cell .cells.low { animation: gauge-low 0.9s steps(2) infinite; }
@keyframes gauge-low { 50% { opacity: 0.45; } }
/* A line on the screen that can be opened: its one button */
.event-action { margin-left: auto; flex: none; align-self: center; padding: 1px 9px; background: var(--paper); color: var(--ink); border: 2px solid var(--line); font-size: 12px; cursor: pointer; pointer-events: auto; }
.event-action[hidden] { display: none; }
.event.with-action { display: flex; align-items: center; gap: 8px; }
.event.with-action[hidden] { display: none; }
.event.with-action .event-text { flex: 1 1 auto; min-width: 0; }
.mini .meter { cursor: pointer; }
.face-cell { display: grid; justify-items: center; gap: 10px; }
/* Buttons: the picture of what it does is the button itself; the caption under it says it in words.
   The one the pet needs bounces and glows, and the pet shows the same picture over its head. */
.hw {
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  transition: transform 170ms cubic-bezier(0.25, 0.8, 0.3, 1.25); /* down softly, back up with a little spring */
}
.hw:hover { transform: translateY(-2px) scale(1.06); }
.hw:active, .hw.pressed { transform: translateY(2px) scale(0.96); }
/* A dark outline keeps the picture readable on any body color */
.hw-pic {
  width: 82%;
  height: auto;
  image-rendering: pixelated;
  pointer-events: none;
  filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(2px 3px 0 rgb(0 0 0 / 0.25));
}
.hw-pic:not([src]) { visibility: hidden; }
.face-buttons { gap: 4px; }
.face-cell { min-width: 0; }
.face-buttons .hw { position: static; width: min(56px, 100%); height: auto; aspect-ratio: 1; }
.hw-label {
  position: absolute;
  transform: translateX(-50%);
  padding: 0 5px;
  color: #fffdf7;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: -1px 0 var(--ink), 1px 0 var(--ink), 0 -1px var(--ink), 0 1px var(--ink), 1px 1px var(--ink);
}
.face-buttons .hw-label { position: static; transform: none; font-size: 13px; max-width: 100%; }
body.pip .face-buttons .hw-label { font-size: clamp(10px, 3.6vw, 13px); padding: 0 2px; }
.hw-label.want {
  color: var(--ink);
  text-shadow: none;
  background: var(--lamp, #f2c14e);
  border: 2px solid var(--line);
  animation: want-label 0.9s ease-in-out infinite;
}
.hw.want { animation: want 0.9s ease-in-out infinite; }
.hw.want .hw-pic { filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)) drop-shadow(0 0 6px var(--lamp, #f2c14e)) drop-shadow(0 0 6px var(--lamp, #f2c14e)); }
@keyframes want { 50% { transform: translateY(-5px); } }
@keyframes want-label { 50% { transform: translateX(-50%) translateY(-2px); } }
.face-buttons .hw-label.want { animation-name: want-label-static; }
@keyframes want-label-static { 50% { transform: translateY(-2px); } }

/* What the pet says, floating over its head */
.speech {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, calc(-100% - 10px));
  max-width: 240px;
  width: max-content;
  white-space: nowrap;
  padding: 6px 12px 7px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.35;
  pointer-events: none;
  animation: pop 260ms cubic-bezier(.2, 1.4, .4, 1);
}
.speech[hidden] { display: none; }
.speech.long { white-space: normal; }
.speech::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 12px;
  height: 12px;
  background: var(--paper);
  border-right: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  transform: translateX(-50%) rotate(45deg);
}
@keyframes pop { from { transform: translate(-50%, calc(-100% - 10px)) scale(.6); opacity: 0; } }

/* The speed button on the name plate (with a 배속권, or in debug mode): lit while time runs fast */
.speed-btn {
  margin-left: auto;
  flex: none;
  min-height: 24px;
  border: 2px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 0 8px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.speed-btn.fast { background: var(--lamp); }
.speed-btn:active { transform: translate(1px, 1px); }

.pet-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.pet-actions .primary[hidden] { display: none; }

/* The farewell letter */
.letter {
  border: 2px solid var(--line);
  box-shadow: 0 3px 0 var(--edge);
  background: #fffaf0;
  color: var(--ink);
  padding: 0;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px);
  margin: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.letter::backdrop { background: rgb(43 34 51 / 0.6); }
/* The 이어하기 code: twelve digits in three groups, big enough to copy down by hand */
.code-body { padding: 26px 24px 20px; display: grid; gap: 12px; }
.code-body .letter-title { margin: 0; }
.code-big { margin: 0; padding: 14px 8px; text-align: center; white-space: nowrap; font-size: clamp(20px, 6.4vw, 32px); letter-spacing: 1px; font-variant-numeric: tabular-nums; border: 2px dashed var(--line); background: var(--paper); user-select: all; }
.code-note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.code-input { width: 100%; min-height: 52px; padding: 6px 12px; border: 2px solid var(--line); background: #fff; font: inherit; font-size: 24px; letter-spacing: 2px; text-align: center; font-variant-numeric: tabular-nums; }
.code-warn { margin: 0; padding: 8px 10px; font-size: 13px; line-height: 1.5; background: var(--tint); border: 2px solid var(--line); }
.code-error { margin: 0; min-height: 1em; font-size: 13px; color: var(--accent); }
.code-error:empty { display: none; }
.code-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13px; }
.code-row b { font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.code-row[hidden] { display: none; }
.empty-load { display: block; margin-top: 10px; font-size: 14px; }
.hatch-load { margin: 0; font-size: 13px; color: var(--muted); }
.hatch-load .text-btn { font-size: 13px; }
.letter-body {
  padding: 26px 26px 20px;
  background-image: repeating-linear-gradient(transparent 0 31px, color-mix(in srgb, var(--accent) 22%, transparent) 31px 32px);
  background-position: 0 58px;
}
.letter-title { margin: 0 0 22px; font-size: 20px; text-align: center; }
.letter-to { margin: 0 0 6px; font-size: 16px; }
.letter-text { margin: 0; font-size: 16px; line-height: 2; white-space: pre-line; }
.letter-from { text-align: right; margin: 14px 0 18px; font-size: 16px; }
.letter-life { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 12px; font-size: 13px; color: var(--muted); background: #fffaf0; }
.letter-life dd { margin: 0; }
.epitaph { text-align: center; margin: 0 0 16px; font-size: 14px; color: var(--muted); background: #fffaf0; }
.letter-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 16px; align-items: center; background: #fffaf0; }

/* What it became: the raising-game ending card */
.career-kicker { margin: 0 0 4px; font-size: 14px; color: var(--muted); text-align: center; }
.career-title { margin: 0 0 18px; font-size: 26px; text-align: center; color: var(--accent); line-height: 1.3; }
.career .letter-life { margin-top: 16px; }
.career-line[hidden] { display: none; }

/* Owner questions: the same text box with a line to answer in */
.incident-answer { display: flex; gap: 6px; flex: 1 1 100%; min-width: 0; }
.incident-answer input {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  min-height: 34px;
  padding: 4px 8px;
  border: 2px solid #fffdf7;
  background: #fffdf7;
  color: #1b1c33;
  font: inherit;
  font-size: max(16px, var(--event-size, 14px)); /* 16px keeps phones from zooming in */
}
.incident-answer button { flex: none !important; padding: 4px 12px !important; }
.incident.question .event-tag { background: #4cb8ff; color: #1b1c33; }
.incident.outing .event-tag { background: #3ccf6e; color: #1b1c33; }

.heritage-line { margin: 0 !important; }
.heritage-line[hidden] { display: none; }
/* Friends: a link to come and visit, and who has come so far */
.friends { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 12px; }
.friends[hidden] { display: none; }
.invite-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 3px 12px 3px 8px;
  background: var(--paper); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--edge);
  font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
}
.invite-btn img { width: 24px; height: 24px; image-rendering: pixelated; }
.invite-btn:active { transform: translate(2px, 2px); box-shadow: 0 1px 0 var(--edge); }
.friends-line { margin: 0; font-size: 13px; color: var(--muted); }
.friends-card .friends { display: grid; justify-items: start; gap: 8px; }
.friends-how { margin: 0 !important; font-size: 13px; color: var(--muted); }
.friends-none[hidden], .friends-links[hidden] { display: none; }
/* Two ways out of the friends panel, as a pair of matching tiles: the family tree, and everyone's memorial square */
.friends-links { margin: 12px 0 0; padding-top: 10px; border-top: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.link-tile { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 40px; box-sizing: border-box; padding: 4px 8px; background: var(--paper); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--edge); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
.link-tile img { flex: none; width: 20px; height: 20px; image-rendering: pixelated; }
.link-tile:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.friends-line[hidden] { display: none; }
.friends-line a { color: var(--ink); text-underline-offset: 3px; }
/* What a pet that does not talk really means: under its sounds, once the translator is open */
.mind { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--muted); white-space: normal; }
.speech .mind { max-width: 220px; }
.mind-line { margin: 6px 0 0; padding: 6px 8px; font-size: 12px; line-height: 1.5; color: var(--muted); border: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.mind-line[hidden] { display: none; }
.mind-line button { font-size: 12px; }
.heritage-note { margin: -4px 0 12px; font-size: 14px; color: var(--accent); }
.heritage-note[hidden] { display: none; }
.talks-block[hidden] { display: none; }

/* The memorial: one row per pet that lived here */
.memorial-note { margin: -10px 0 14px; font-size: 13px; color: var(--muted); background: #fffaf0; }
.memorial-note a { display: inline-block; margin-top: 4px; color: var(--ink); text-underline-offset: 3px; }
/* Laying the letter in the shared square: what that means, and the flowers it has had */
.square-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin: 0 0 12px; padding: 10px 12px; border: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); background: #fffaf0; }
.square-row[hidden] { display: none; }
.square-note { flex: 1 1 200px; margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.square-note a { color: var(--ink); text-underline-offset: 3px; }
.memorial-list { list-style: none; margin: 0 0 16px; padding: 0; background: #fffaf0; }
.memorial-list li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-top: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.memorial-list canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.memorial-list strong { display: block; font-weight: 400; font-size: 15px; }
.memorial-list .career { color: var(--accent); font-size: 13px; }
.memorial-list .epitaph-line { color: var(--muted); font-size: 13px; }
.memorial-list button { justify-self: start; margin-top: 2px; font-size: 13px; }

/* Floating on its own (picture-in-picture): just the toy, filling the small window */
body.pip { margin: 0; padding: 8px; min-height: 100vh; box-sizing: border-box; display: grid; place-items: start center; background: var(--tint); }
body.pip .device-frame { margin: 0; }
/* (the screen sits a little inside the shell here: edge to edge, as on a phone, it looked as if it stuck out of it) */
body.pip .face-panel { padding: 8px 10px 6px; }
body.pip { overflow: hidden; }
.pip-back {
  justify-self: end;
  margin: 0 0 6px;
  padding: 2px 10px;
  border: 2px solid var(--line);
  background: var(--paper);
  font-size: 12px;
  cursor: pointer;
}
body.pip.alert { animation: pip-alert 0.9s steps(2) infinite; }
@keyframes pip-alert { 50% { box-shadow: inset 0 0 0 6px #ff6b5b; } }

/* A surprise event: the same text box, with two ways to respond and the time left to decide */
.incident { cursor: default; padding-bottom: 10px; }
.incident .event-tag { background: #ff6b5b; color: #fffdf7; }
.incident-choices { display: flex; gap: 8px; margin-top: 8px; }
.incident-choices button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 34px;
  padding: 4px 8px;
  border: 2px solid #fffdf7;
  background: transparent;
  color: #fffdf7;
  font-size: var(--event-size, 14px);
  cursor: pointer;
}
.incident-choices button:hover:not(:disabled), .incident-choices button:focus-visible { background: #fffdf7; color: #1b1c33; }
.incident-choices button.picked { background: var(--lamp, #f2c14e); color: #1b1c33; border-color: var(--lamp, #f2c14e); }
.incident-choices button:disabled:not(.picked) { opacity: 0.4; cursor: default; }
.incident-clock { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; }
.incident-clock b { display: block; height: 100%; background: #ff6b5b; width: 100%; transform-origin: left; }

/* What just happened, as a game text box laid over the bottom of the pixel screen */
.event {
  position: absolute;
  z-index: 3;
  padding: 7px 10px 8px;
  background: rgb(27 28 51 / 0.9);
  color: #fffdf7;
  border: 2px solid #fffdf7;
  outline: 2px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  animation: rise 220ms ease-out;
}
.event[hidden] { display: none; }
/* The narration box hides by itself; taps go through it to the screen (the droppings sit under it) */
#event { pointer-events: none; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }
.event-tag {
  position: absolute;
  top: -11px;
  left: 8px;
  padding: 0 7px;
  background: var(--lamp, #f2c14e);
  color: #22304a;
  border: 2px solid var(--line);
  font-size: 11px;
  line-height: 16px;
}
.event-text { margin: 0; font-size: var(--event-size, 14px); line-height: 1.45; min-height: 1.45em; }
.event-text.done::after { content: " ▼"; font-size: 0.7em; animation: blink 0.8s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.shell { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.lcd { position: absolute; image-rendering: pixelated; }
.hw { position: absolute; border-radius: 50%; padding: 0; cursor: pointer; }
.hw:focus-visible { outline: 3px solid var(--line); outline-offset: 2px; }

kbd {
  font-family: inherit;
  display: inline-block;
  min-width: 1.6em;
  text-align: center;
  border: 2px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  margin-right: 4px;
}


.swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 3px; }
.swatch {
  width: 26px;
  height: 26px;
  border: 2px solid var(--line);
  cursor: pointer;
}
.swatch[aria-checked="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }

button { font: inherit; color: inherit; }
.primary {
  border: 2px solid var(--line);
  background: var(--accent);
  color: #fff;
  padding: 8px 16px;
  box-shadow: 0 3px 0 var(--edge);
  cursor: pointer;
}
.primary:active { transform: translate(2px, 2px); box-shadow: 0 2px 0 var(--edge); }
.primary:disabled { opacity: .5; cursor: default; }
.text-btn { border: 0; background: none; padding: 4px 0; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
:focus-visible { outline: 3px solid var(--line); outline-offset: 2px; }

.card {
  background: var(--paper);
  border: 2px solid var(--line);
  box-shadow: 0 3px 0 var(--edge);
  padding: 14px 16px 16px;
}
.card h2 { margin: 0 0 8px; font-size: 16px; }
.card p { margin: 0 0 10px; }

.pet-name { font-size: 22px !important; line-height: 1.25; margin-bottom: 0 !important; }
.pet-sub { display: flex; align-items: center; gap: 8px; margin: 3px 0 10px; }
.pet-meta { min-width: 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The life stage, as a badge beside what it is */
.stage-badge { flex: none; padding: 0 7px; border: 2px solid var(--line); background: var(--tint-2); color: var(--ink); font-size: 12px; line-height: 18px; }
.stage-badge[hidden] { display: none; }
/* Said no: the console buzzes twice, softly (웅, 웅) */
.device-frame.buzz { animation: buzz 560ms linear; }
@keyframes buzz {
  0%, 44%, 100% { transform: translate(0, 0); }
  6% { transform: translate(-1.5px, 0.5px); }
  12% { transform: translate(1.5px, -0.5px); }
  18% { transform: translate(-1px, -0.5px); }
  24% { transform: translate(1px, 0.5px); }
  30% { transform: translate(0, 0); }
  56% { transform: translate(-1.5px, 0.5px); }
  62% { transform: translate(1.5px, -0.5px); }
  68% { transform: translate(-1px, -0.5px); }
  74% { transform: translate(1px, 0.5px); }
  80% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .device-frame.buzz { animation: none; } }
.pet-name.long { font-size: 18px !important; }
.pet-stage { margin: 0 !important; }
.grow-bar { height: 8px; border: 2px solid var(--line); background: var(--paper); margin-bottom: 10px; overflow: hidden; }
.grow-bar b { display: block; height: 100%; background: var(--accent); width: 0; }
.grow-bar b.soon { animation: soon 0.8s steps(2) infinite; }
/* Growth boosters: how many are left, and how more come */
/* The shop: coins come with every egg; goods are a row each, with what they cost */
.shop-body { padding: 24px 22px 18px; display: grid; gap: 12px; }
.shop-body .letter-title { margin: 0; }
.shop-purse { margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; }
.shop-purse img, .price img { width: 20px; height: 20px; image-rendering: pixelated; }
.shop-purse b { font-size: 20px; }
.shop-note { margin: 0; font-size: 13px; color: var(--muted); text-align: center; }
.goods { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.goods li { display: grid; grid-template-columns: 22px 1fr auto; gap: 6px; align-items: center; padding: 6px 6px; background: var(--paper); border: 2px solid var(--line); }
.goods .pic { width: 22px; height: 22px; display: grid; place-items: center; }
.goods .pic img { width: 22px; height: 22px; image-rendering: pixelated; }
.goods .pic .swatch { width: 34px; height: 34px; cursor: default; }
/* (the name, and what it does after it on the same line: cut short with … when the row is narrow) */
.goods .what { min-width: 0; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; overflow: hidden; }
.goods .what b { flex: none; font-size: 14px; font-weight: 400; }
.goods .what span { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; color: var(--muted); }
.buy { min-width: 76px; min-height: 36px; padding: 2px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: var(--paper); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--edge); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.buy:active { transform: translate(2px, 2px); box-shadow: 0 1px 0 var(--edge); }
.buy:disabled { opacity: 0.45; cursor: default; box-shadow: none; transform: none; }
.buy.on { background: var(--lamp); }
.price { display: inline-flex; align-items: center; gap: 3px; }
/* The event: the coin price struck through, 무료 beside it */
.price.was { position: relative; color: var(--muted); }
.price.was::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: var(--ink); }
.price.was img { opacity: 0.6; }
.buy .free { color: var(--accent); font-weight: 400; }
/* A ribbon across the top of the shop while the event lasts */
.ribbon {
  margin: -24px -22px 0;
  padding: 7px 22px 8px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  text-align: center;
  border-bottom: 2px solid var(--line);
  background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.16) 0 8px, transparent 8px 16px);
}
.ribbon[hidden] { display: none; }
.ribbon span { display: inline-block; margin-right: 6px; padding: 0 7px; background: var(--lamp); color: var(--ink); border: 2px solid var(--line); font-size: 12px; }
.buy { min-width: 0; }
.goods .buy { min-height: 30px; padding: 2px 6px; gap: 3px; border-width: 2px; box-shadow: 0 2px 0 var(--edge); font-size: 14px; }
.goods .price img { width: 14px; height: 14px; }
.notice-text { margin: 0; font-size: 15px; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; }
.field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.field textarea, .field input { width: 100%; padding: 8px 10px; border: 2px solid var(--line); background: #fff; font: inherit; font-size: 16px; color: var(--ink); resize: vertical; }
/* 도감: what the pets of this toy have been, and the family tree */
.codex-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.codex-tab { min-height: 36px; padding: 2px 4px; background: var(--paper); border: 2px solid var(--line); font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; }
.codex-tab[aria-selected="true"] { background: var(--lamp); }
.codex-body { min-height: 180px; }
.codex-empty { margin: 60px 0; text-align: center; font-size: 14px; color: var(--muted); }
/* 방명록: each visit a card: who came with what and when, what they wrote, what the pet said back */
.guests-row { width: 100%; margin-top: 10px; }
.guests-row[hidden] { display: none; }
.bag-row[hidden] { display: none; }
.guestbook-sub { margin: 0 0 10px; font-size: 13px; color: var(--muted); text-align: center; }
.guestbook { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; max-height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.guestbook li { padding: 9px 11px 10px; background: var(--paper); border: 2px solid var(--line); display: grid; gap: 4px; }
.guestbook .who { display: flex; align-items: center; gap: 7px; font-size: 14px; }
.guestbook .who img { width: 20px; height: 20px; image-rendering: pixelated; flex: none; }
.guestbook .who b { font-weight: 400; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guestbook .who small { margin-left: auto; flex: none; font-size: 12px; color: var(--muted); }
.guestbook .note { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.guestbook .note.none { color: var(--muted); font-size: 13px; }
.guestbook .reply { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.guestbook li.reported { opacity: 0.6; }
.guestbook .report { margin-left: 4px; flex: none; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Today's eggs, in the window where one is asked for; with none left the ways to choose a picture are put away */
.eggs-left { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.eggs-left[hidden] { display: none; }
.hatch.sold-out .eggs-left { padding: 10px 12px; border: 2px solid var(--line); background: var(--tint-2); color: var(--ink); font-size: 15px; line-height: 1.5; }
.hatch.sold-out .drop, .hatch.sold-out .samples { display: none; }
/* The first visit */
.intro-lead { margin: -4px 0 12px; text-align: center; font-size: 14px; color: var(--muted); }
.intro-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.intro-steps li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid var(--line); background: var(--paper); font-size: 14px; line-height: 1.45; }
.intro-steps img { width: 24px; height: 24px; flex: none; image-rendering: pixelated; }
.intro-steps b { font-weight: 400; background: linear-gradient(transparent 60%, var(--tint-2) 60%); }
.intro-install { display: grid; gap: 4px; margin: 0 0 14px; padding: 10px 12px; border: 2px dashed var(--line); font-size: 14px; line-height: 1.5; }
.intro-install[hidden] { display: none; }
.intro-install b { font-weight: 400; }
.intro-install small { font-size: 12px; color: var(--muted); }
.legal-links { display: flex; justify-content: center; gap: 14px; margin: 12px 0 0; font-size: 12px; }
.legal-links a { color: var(--muted); text-underline-offset: 3px; }
.jev-how { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.codex-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.codex-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--paper); border: 2px solid var(--line); }
.codex-list b { font-size: 15px; font-weight: 400; }
.codex-list span { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.codex-list canvas { width: 32px; height: 32px; image-rendering: pixelated; }
.tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tree canvas { image-rendering: pixelated; }
.tree-from { display: grid; justify-items: center; gap: 4px; padding: 6px 0; }
.tree-note { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
.tree-note::after { content: ""; display: block; width: 2px; height: 12px; margin: 4px auto 0; background: var(--ink); }
.tree-parents { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.tree-parent { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--paper); border: 2px dashed var(--line); min-width: 0; }
.tree-pic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; }
.tree-pic canvas { width: 40px; height: 40px; }
.tree-parent b, .tree-self b { display: block; font-size: 14px; font-weight: 400; }
.tree-parent span, .tree-self span { display: block; font-size: 12px; color: var(--muted); }
.tree-self { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--paper); border: 2px solid var(--line); }
.tree-self canvas { width: 56px; height: 56px; flex: none; }
@keyframes soon { 50% { background: var(--lamp, #f2c14e); } }
/* ---------- 이야기: one way of setting text for the whole panel ----------
   Its own words in a speech bubble under the name; the facts as rows of a small label and a value, with a dashed rule
   between; each part below under a title with a rule running out from it; what it and its owner said as bubbles.
   (No tinted boxes with a colored bar down the left: the game's own boxes are paper with an ink line.) */
/* (its own words: a speech bubble like the ones on the screen, an ink line round paper with a small tail) */
.pet-card .pet-intro { position: relative; margin: 2px 0 12px !important; padding: 7px 11px 8px; background: var(--paper); border: 2px solid var(--line); font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.pet-card .pet-intro::before { content: ""; position: absolute; left: 14px; top: -8px; width: 8px; height: 8px; background: var(--paper); border-left: 2px solid var(--line); border-top: 2px solid var(--line); transform: skewX(0deg) translateY(1px) rotate(45deg); }
.pet-card .mind-line { margin: -4px 0 10px; }
.facts-list { margin: 0; border-top: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.fact { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); font-size: 14px; line-height: 1.5; }
.fact:has(> dd > [hidden]) { display: none; }
.fact dt { font-size: 12px; color: var(--muted); white-space: nowrap; }
.fact dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fact .chips { margin: 0; gap: 5px; }
.fact .chips li { font-size: 13px; line-height: 20px; }
/* (the career opens its card: it reads as a link) */
.career-line { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--accent); text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.career-line[hidden] { display: none; }
.story-title { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 13px !important; font-weight: 400; color: var(--muted); }
.story-title::after { content: ""; flex: 1; border-top: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
summary.story-title { cursor: pointer; list-style: none; }
summary.story-title::-webkit-details-marker { display: none; }
summary.story-title::before { content: "▸"; font-size: 12px; transition: transform 120ms; }
details[open] > summary.story-title::before { transform: rotate(90deg); }
/* What it asked, what its owner answered, what it said to that: three bubbles, the owner's on the right */
.talks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 13px; line-height: 1.5; }
.talks li { display: grid; gap: 4px; }
.talks p { margin: 0 !important; max-width: 88%; padding: 4px 9px; border: 2px solid var(--line); background: var(--paper); justify-self: start; overflow-wrap: anywhere; }
.talks p.a { justify-self: end; background: var(--tint-2); }
.talks p.reply { color: var(--ink); }
.pet-card .pet-actions { margin-top: 14px; padding-top: 10px; border-top: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.diary-block h3 { font-size: 13px; }
/* Grown so far: numbered steps joined by a line, each opening to its story */
.diary { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.diary li { position: relative; padding-bottom: 8px; }
.diary li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 0;
  border-left: 3px dotted var(--line);
}
.diary summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  min-height: 26px;
}
.diary summary::-webkit-details-marker { display: none; }
.diary summary::after { content: "▸"; margin-left: auto; color: var(--muted); transition: transform 120ms; }
.diary details[open] summary::after { transform: rotate(90deg); }
.diary .step {
  flex: none;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 2px solid var(--line);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
}
.diary li:last-child .step { background: var(--lamp, #f2c14e); color: var(--ink); }
.diary .when { flex: none; color: var(--muted); font-size: 13px; }
.diary .what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diary details p { margin: 6px 0 4px 33px !important; font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.jev-note { font-size: 13px; line-height: 1.5; padding: 6px 9px; border: 2px solid var(--line); background: var(--paper); }
.jev-note[hidden] { display: none; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; }
.chips li { border: 2px solid var(--line); padding: 0 8px; background: var(--tint); font-size: 14px; white-space: nowrap; }


.meters { display: grid; gap: 6px; }
.meter { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; font-size: 14px; }
.cells { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.cells i { height: 12px; border: 2px solid var(--line); background: var(--paper); }
.cells i.on { background: var(--ink); }
.cells.low i.on { background: var(--accent); }
.flags { margin: 10px 0 0 !important; font-size: 14px; color: var(--muted); min-height: 1.6em; }

.jev-meta { color: var(--muted); font-size: 14px; }
.jev-row { display: grid; grid-template-columns: 88px 1fr; gap: 10px; padding: 6px 0; border-top: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); font-size: 14px; }
.jev-row strong { font-weight: 400; }
.opts { display: grid; gap: 3px; }
.opt { display: grid; grid-template-columns: 64px 1fr 36px; gap: 8px; align-items: center; font-size: 13px; }
.opt .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.opt.best .name { color: var(--ink); }
.opt .bar { height: 8px; background: color-mix(in srgb, var(--ink) 12%, transparent); position: relative; }
.opt .bar b { position: absolute; inset: 0 auto 0 0; background: var(--muted); }
.opt.best .bar b { background: var(--ink); }
.opt small { text-align: right; font-size: 12px; color: var(--muted); }
/* Written behaviors are sentences: question on its own line, each sentence above its bar */
.jev-row.free { grid-template-columns: 1fr; gap: 4px; }
.jev-row.free .opt { grid-template-columns: 1fr 36px; row-gap: 2px; }
.jev-row.free .opt .name { grid-column: 1 / -1; white-space: normal; }

.hatch {
  border: 2px solid var(--line);
  box-shadow: 0 3px 0 var(--edge);
  background: var(--paper);
  color: var(--ink);
  padding: 0;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px);
  margin: auto;
  overflow-y: auto;
}
.hatch::backdrop { background: rgb(43 34 51 / 0.45); }
.hatch-body { position: relative; padding: 18px 18px 0; display: grid; gap: 12px; }
.hatch-body h2 { padding-right: 40px; }
/* Two steps in one window: choosing a picture, then looking at what it becomes. The chosen step hides the
   choosing, so the result and its button are in view without scrolling. */
.hatch-pick { display: grid; gap: 12px; }
.hatch.chosen .hatch-pick, .hatch.chosen #hatch-cancel, .hatch:not(.chosen) #hatch-again, .hatch:not(.chosen) #do-hatch { display: none; }
.hatch-body h2 { margin: 0; font-size: 18px; }
.drop {
  display: grid;
  place-items: center;
  min-height: 90px;
  border: 2px dashed var(--line);
  background: var(--tint);
  cursor: pointer;
  text-align: center;
  padding: 12px;
}
.drop.over { background: var(--tint-2); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:focus-within { outline: 3px solid var(--line); outline-offset: 2px; }
.samples p { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.samples[hidden] { display: none; }
.sample-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sample {
  width: 100%;
  aspect-ratio: 1;
  padding: 4px;
  border: 2px solid var(--line);
  background: var(--tint);
  cursor: pointer;
}
.sample img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.sample[aria-pressed="true"] { background: var(--accent); }
.eggs { margin-bottom: 10px; }
.egg-pick { display: grid; justify-items: center; align-content: center; gap: 2px; aspect-ratio: auto; font: inherit; font-size: 11px; line-height: 1.25; color: var(--ink); }
.egg-pick canvas { width: 28px; height: 30px; image-rendering: pixelated; }
.preview { display: flex; gap: 12px; align-items: center; justify-content: center; }
.preview[hidden] { display: none; }
.preview img { width: min(120px, 36%); aspect-ratio: 1; height: auto; object-fit: contain; border: 2px solid var(--line); background: #fff; }
.preview canvas { width: min(192px, 58%); height: auto; aspect-ratio: 96 / 80; border: 2px solid var(--line); image-rendering: pixelated; }
.hatch-body > * { min-width: 0; }
/* Working on it: a pixel block sliding along a track, what is happening, and how long so far */
.busy { display: grid; gap: 6px; }
.busy[hidden] { display: none; }
.busy-bar {
  position: relative;
  height: 14px;
  border: 2px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}
.busy-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28%;
  background: repeating-linear-gradient(90deg, var(--accent) 0 8px, color-mix(in srgb, var(--accent) 60%, white) 8px 12px);
  animation: slide 1.1s steps(12) infinite;
}
@keyframes slide { from { left: -28%; } to { left: 100%; } }
.busy-line { font-size: 14px; }
.busy-line small { color: var(--muted); font-size: 12px; }
/* The long wait (redrawing a picture): a bar that fills, and the picture being "drawn" dot by dot */
.busy.long .busy-bar i { animation: none; left: 0; width: var(--done, 0%); transition: width 0.9s linear; }
.preview canvas#preview-gen[hidden] { display: none; }
.style-pick { display: flex; gap: 6px; }
.style-pick[hidden] { display: none; }
.style-pick button {
  flex: 1;
  border: 2px solid var(--line);
  background: var(--paper);
  padding: 4px 10px;
  cursor: pointer;
}
.style-pick button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.hatch-status { margin: 0; min-height: 1.6em; font-size: 14px; color: var(--muted); }
.sizes { border: 0; padding: 0; margin: 0; display: flex; gap: 14px; }
.sizes legend { float: left; margin-right: 12px; color: var(--muted); }
.sizes[hidden], .tolerance[hidden] { display: none; }
.tolerance { display: flex; gap: 10px; align-items: center; font-size: 14px; }
/* The buttons stay at the bottom of the window whatever is above them */
.hatch-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin: 0 -18px;
  padding: 12px 18px 14px;
  background: var(--paper);
  border-top: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent);
}
.hatch:not(.chosen) .hatch-actions { justify-content: flex-end; }
.hatch-actions button { white-space: nowrap; font-size: 15px; }
.hatch-actions .primary { padding: 8px 12px; }

.help {
  border: 2px solid var(--line);
  box-shadow: 0 3px 0 var(--edge);
  background: var(--paper);
  color: var(--ink);
  padding: 0;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px);
  margin: auto;
  overflow-y: auto;
}
/* A scroll inside an open dialog stays inside it */
.help, .hatch { overscroll-behavior: contain; }
html:has(dialog[open]) { overflow: hidden; }
.help::backdrop { background: rgb(43 34 51 / 0.45); }
.help-body { padding: 20px 22px; }
/* 사용법: cards side by side, one in view; a swipe (or the arrows) goes to the next */
.slides { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; margin: 10px 0 0; touch-action: pan-x; }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: center; display: grid; gap: 8px; align-content: start; }
.slide-art { display: flex; align-items: center; justify-content: center; gap: 14px; height: 120px; background: var(--tint); border: 2px solid var(--line); }
.slide-art img { width: 48px; height: 48px; image-rendering: pixelated; }
.slide h3 { margin: 4px 0 0 !important; font-size: 17px !important; }
.slide p { margin: 0; font-size: 14px; line-height: 1.6; min-height: 4.8em; }
.slide-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 14px; }
.slide-step { width: 32px; height: 28px; padding: 0; border: 2px solid var(--line); background: var(--paper); box-shadow: 0 2px 0 var(--edge); font-size: 11px; cursor: pointer; }
.slide-step:active { transform: translate(2px, 2px); box-shadow: none; }
.slide-step:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.slide-dots { display: flex; gap: 6px; }
.slide-dots i { width: 8px; height: 8px; border: 2px solid var(--line); background: var(--paper); }
.slide-dots i.on { background: var(--accent); }
.help-body h2 { margin: 0 0 6px; font-size: 20px; }
.help-body h3 { margin: 18px 0 6px; font-size: 16px; }
.help-body p, .help-body li { font-size: 14px; }
.help-body ul { margin: 0; padding-left: 18px; }
.help-body li + li { margin-top: 4px; }
.keys { border-collapse: collapse; width: 100%; font-size: 14px; }
.keys th { width: 1%; text-align: left; font-weight: 400; white-space: nowrap; padding: 4px 12px 4px 0; vertical-align: top; }
.help-body .keys + ul { margin-top: 12px; }
.keys td { padding: 4px 0; }
.hint { color: var(--muted); margin: 8px 0 0; }
.help-actions { display: flex; justify-content: flex-end; margin-top: 18px; }

/* A panel's own close button (and, on phones, the grip to drag it away) */
.sheet-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 2px solid var(--line);
  background: var(--paper);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

/* Phone: toy first, then how it is doing, then who it is, then the judgment details */
@media (max-width: 760px) {
  /* One screen, no scrolling: the handheld fills what the phone shows, down to the bottom edge. */
  html { height: 100%; }
  html, body { overflow: hidden; overscroll-behavior: none; touch-action: none; }
  .pane.card, .chat-log, dialog { touch-action: pan-y; }
  button, .hw { touch-action: manipulation; }
  #lcd { touch-action: none; } /* a finger moving on the screen strokes the pet; it must not scroll or zoom */
  /* iPhone Safari places things against a layout viewport that can differ from what is visible (its toolbar
     collapses and returns without telling the page), and a bar in the page flow ends up under its tab bar.
     So the page is not trusted for its height: an unseen marker is fixed to the bottom edge, and the handheld is
     fitted down to where that marker really is. */
  body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
  /* `overflow: hidden` does not stop a phone from scrolling the document: iOS scrolls it to bring a focused input
     above the keyboard, a swipe can chain out of a panel, and the base `min-height: 100vh` is taller than what
     Safari shows while its toolbar is out. The page cannot be scrolled back by hand, so the header would stay
     pushed off the top. Taken out of the flow, the body leaves the document nothing to scroll.
     (js: settlePage() puts back whatever still moves.) */
  body:not(.pip) { position: fixed; top: 0; left: 0; right: 0; width: 100%; min-height: 0; }
  .layout {
    flex: 1 1 auto;
    order: 2;
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 0;
  }
  .dock { display: block; position: fixed; left: 0; right: 0; bottom: 0; height: calc(env(safe-area-inset-bottom) + 10px); pointer-events: none; }
  /* The screen as wide as the handheld allows: thin sides on the dark frame around it, and less shell beside it */
  :root { --u: 2px; }
  .face-panel, .device-frame.tight .face-panel { padding-left: 2px; padding-right: 2px; }
  .face-bezel { padding: 3px 4px 4px; }
  .face-bezel::before { left: 7px; top: 8px; }
  .face-bezel > .purse { right: 11px; top: 29px; }
  /* Typing: the handheld rises as far as the line being typed needs to clear the keyboard (js: onViewport) */
  .device-col { transform: translateY(calc(-1 * var(--kb, 0px))); transition: transform 200ms; }
  .card { box-shadow: 0 3px 0 var(--edge); }
}

@media (prefers-reduced-motion: reduce) {
  .primary:active { transform: none; }
  .busy-bar i { animation: none; left: 0; width: 100%; opacity: .5; }
  .event, .event-text.done::after { animation: none; }
  .hw.want, .hw-label.want { animation: none; }
  .hw:hover { transform: none; }
}

.incident .incident-tip { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--lamp, #f2c14e); }
.incident .incident-tip[hidden] { display: none; }

/* Debugging: what the API calls took and cost */
.speed-btn[hidden] { display: none; }
/* Settings: groups inside one dialog */
.device-tools { display: grid; gap: 14px; }
.device-tools section { display: grid; gap: 6px; justify-items: start; padding-bottom: 12px; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.device-tools section:last-child { border-bottom: 0; padding-bottom: 0; }
.device-tools section[hidden] { display: none; } /* (the grid above would otherwise show it) */
.device-tools h3 { margin: 0; font-size: 13px; font-weight: 400; color: var(--muted); }
.device-tools .text-btn[hidden] { display: none; }
/* A setting that is on or off: a picture, its name, a switch (green and to the right when on) and the word for it */
.switch-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 4px 9px; border: 2px solid var(--line); background: var(--paper); font: inherit; font-size: 14px; color: var(--ink); text-align: left; cursor: pointer; }
.switch-row[hidden] { display: none; }
.switch-row img { width: 20px; height: 20px; image-rendering: pixelated; flex: none; }
.switch-row .switch { margin-left: auto; flex: none; position: relative; width: 34px; height: 18px; border: 2px solid var(--line); background: color-mix(in srgb, var(--ink) 18%, var(--paper)); }
.switch-row .switch b { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; background: var(--ink); transition: left 120ms; }
.switch-row[aria-pressed="true"] .switch { background: #7be495; }
.switch-row[aria-pressed="true"] .switch b { left: 17px; }
.switch-row em { flex: none; width: 30px; font-style: normal; font-size: 12px; color: var(--muted); }
#debug[aria-pressed="true"] { color: var(--accent); }
.debug-panel { margin-top: 14px; padding-top: 10px; border-top: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent); }
.debug-panel[hidden] { display: none; }
.debug-panel h3 { margin: 0 0 6px; font-size: 14px; }
.debug-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.debug-table th, .debug-table td { padding: 2px 4px; text-align: right; white-space: nowrap; }
.debug-table th:first-child, .debug-table td:first-child { text-align: left; }
.debug-table thead th { color: var(--muted); font-weight: 400; }
.debug-table tfoot { border-top: 2px solid var(--line); }
.debug-note { margin: 6px 0 2px !important; font-size: 11px; color: var(--muted); }

/* Dialog titles take the first focus (so dialogs open at the top) without showing a ring */
dialog h2[tabindex="-1"]:focus { outline: none; }

/* The console's small dot buttons (floating, sound): just the picture, pressed in when tapped */
.shell-btn { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.shell-btn[hidden] { display: none; }
.shell-btn img { width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.shell-btn:hover img { filter: brightness(1.25); }
.shell-btn:active { transform: translateY(1px); }
.face-foot .shell-btn { position: static; width: 26px; height: 26px; margin-left: auto; margin-right: 10px; align-self: center; }

/* No pet yet: the plate says so and nothing else (no empty gauges, no growth bar, no sitter to call) */
.no-pet .plate-grow, .no-pet #meters, .no-pet #auto-toggle { display: none; }
.no-pet .plate { padding-bottom: 8px; }

/* 오늘: the day's strip on the 돌봄 pane, between the chips and the four buttons */
.today { flex: none; margin-top: 8px; padding: 6px 8px 7px; background: var(--paper); color: var(--ink); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--edge); }
.today[hidden] { display: none; }
.today-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.3; }
.today-head b { flex: none; }
.today-head span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted, #7a6f7f); padding: 2px 0; }
/* Whether it went along: a small lamp, as the power lamp on the handheld's frame */
.lamp { display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 2px var(--ink); }
.lamp.yes { background: #3ddc5a; }
.lamp.no { background: #ff4d5e; }
.places-sub { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.places-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.place-tile { display: grid; gap: 3px; padding: 6px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 2px 0 var(--edge); }
.place-tile canvas { width: 100%; height: auto; image-rendering: pixelated; border: 2px solid var(--line); box-sizing: border-box; }
.place-tile b { font-weight: 400; font-size: 14px; }
.place-tile small { font-size: 11px; color: var(--muted); min-height: 14px; }
.place-tile.here { opacity: 0.6; cursor: default; box-shadow: none; }
.took { margin-left: 8px; font-style: normal; color: var(--ink); }
.took.no { color: #e0263c; }
.mind-read { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 2px; }
.mind-read i { font-style: normal; font-size: 11px; line-height: 15px; padding: 0 5px; border: 2px solid var(--line); background: var(--paper); color: var(--ink); }
.mind-rows { display: grid; gap: 3px; width: 100%; margin: 5px 0 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mind-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 34px; gap: 8px; align-items: center; font-size: 12px; line-height: 1.25; }
.mind-row .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted, #7a6f7f); }
.mind-row.best .name { color: var(--ink); }
.mind-row .bar { height: 7px; background: color-mix(in srgb, var(--ink) 12%, transparent); position: relative; }
.mind-row .bar b { position: absolute; inset: 0 auto 0 0; background: var(--muted, #7a6f7f); }
.mind-row.best .bar b { background: var(--ink); }
.mind-row small { text-align: right; font-size: 11px; color: var(--muted, #7a6f7f); }
.today-empty { display: block; font-size: 12px; color: var(--muted, #7a6f7f); }
body.pip .today { display: none; }

/* The camera on the day's strip */
.photo-btn { flex: none; width: 26px; height: 26px; padding: 0; margin: -4px -2px -4px 0; background: var(--paper); border: 2px solid var(--line); cursor: pointer; display: grid; place-items: center; }
.photo-btn img { width: 20px; height: 20px; image-rendering: pixelated; pointer-events: none; }
.photo-btn:active { transform: translate(1px, 1px); }
/* Where it just arrived */
.place-tag { position: absolute; z-index: 3; padding: 3px 9px 4px; background: var(--paper); color: var(--ink); border: 2px solid var(--line); box-shadow: 0 2px 0 var(--edge); font-size: 12px; line-height: 1.2; pointer-events: none; animation: place-tag 2600ms ease both; }
.place-tag[hidden] { display: none; }
@keyframes place-tag { 0% { opacity: 0; transform: translateY(6px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* The flash of a photo */
.flash { position: absolute; z-index: 5; background: #fff; pointer-events: none; animation: flash 360ms ease-out both; }
.flash[hidden] { display: none; }
@keyframes flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .place-tag, .flash { animation-duration: 1ms; } }

/* The tablecloth follows the day on the screen: dusk and night darken it a little (the handheld itself keeps its color) */
:root[data-phase="evening"] body { background-color: color-mix(in srgb, var(--tint) 86%, #6a3a5a); }
:root[data-phase="night"] body { background-color: color-mix(in srgb, var(--tint) 62%, #2b2440); }
body { transition: background-color 1200ms ease; }

/* ---- 화면 개편 3: two pills, a menu, a leaner name plate ---- */
.hearts { margin-left: auto; display: flex; gap: 2px; flex: none; }
.hearts[hidden] { display: none; }
.hearts img { width: 14px; height: 14px; image-rendering: pixelated; }
.hearts img.off { filter: grayscale(1); opacity: 0.3; }
/* what is needed right now: one place, the most pressing thing only */
.now .chip-btn:not([hidden]) ~ .chip-btn { display: none; }
/* the 속마음 box on the care panel: its answer and what was read of the pet (the bars are in its window) */
.today .mind-row { display: none; }
.back-menu { align-self: flex-start; flex: none; border: 0; background: none; padding: 0 0 4px; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
.bag-row .dot { flex: none; width: 9px; height: 9px; background: #ff4d4d; border: 2px solid var(--line); }
.bag-row .dot[hidden] { display: none; }
.bag-tools { cursor: default; }
.bag-tools .auto-btn, .bag-tools .speed-btn { margin-left: 0; }
.bag-tools b { margin-right: auto; }
.menu-card { overflow-y: auto; }
.menu-card .bag-title { display: none; }
.menu-card .bag-row { min-height: 36px; padding-top: 2px; padding-bottom: 2px; }
.back-menu { justify-self: start; text-align: left; }
/* a short screen: the menu in two columns, names only, so all of it is in view */
@media (max-height: 740px) {
  .menu-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .menu-card .bag-row small { display: none; }
}

/* ---- 화면 개편 4: the talk is the game. One stream on the first panel; the care buttons are quick words under it ---- */
.today { display: none !important; } /* (how it took things is in the stream now) */
.mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mini .meter:nth-child(n + 5) { display: none; } /* (its life is the hearts) */
.pane[data-pane="care"] .chat-log { flex: 1 1 0; min-height: 0; max-height: none; contain: size; margin: 8px 0 0; padding: 8px; background: var(--paper); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--edge); font-size: 13px; }
.pane[data-pane="care"] .chat-form { margin-top: 8px; flex: none; }
.chat-log li.did { justify-self: end; display: flex; align-items: center; gap: 5px; background: #ffe27a; padding: 2px 9px; }
.chat-log li.did img { width: 16px; height: 16px; image-rendering: pixelated; }
.chat-log li.took { max-width: 92%; }
.chat-log li.took .lamp { vertical-align: 1px; }
.chat-log li.took .mind-read { margin: 3px 0 1px; }
.chat-log li.news { justify-self: center; max-width: 96%; border: 0; background: var(--ink); color: var(--paper); padding: 1px 10px; font-size: 11px; text-align: center; }
/* the four care buttons under the stream, as they always looked: the picture itself is the button (a dark edge around it,
   straight on the handheld's body) and its name under it in white. No box. The one the pet needs bounces and glows. */
.pane[data-pane="care"] .face-buttons { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: normal; justify-items: center; gap: 4px; margin-top: 8px; padding: 0; }
.pane[data-pane="care"] .face-cell { display: grid; justify-items: center; gap: 1px; min-width: 0; cursor: pointer; }
.pane[data-pane="care"] .face-cell .hw { position: static; width: 38px; height: 38px; aspect-ratio: auto; }
.pane[data-pane="care"] .face-cell .hw-pic { width: 32px; height: 32px; }
.pane[data-pane="care"] .face-cell .hw-label { position: static; transform: none; font-size: 12px; line-height: 18px; max-width: 100%; }
.pane[data-pane="care"] .face-cell .cells { display: none; }
/* what is needed right now sits just over the quick words, not over the stream */
.pane[data-pane="care"] .care-top { order: 2; margin-top: 8px; }
.pane[data-pane="care"] .chat-log { order: 1; }
.pane[data-pane="care"] .chat-mind { order: 1; }
.pane[data-pane="care"] .face-buttons { order: 3; }
.pane[data-pane="care"] .chat-form { order: 4; }
.pane[data-pane="care"] .now:empty, .pane[data-pane="care"] .care-top:not(:has(.chip-btn:not([hidden]))) { display: none; }
body.pip .pane[data-pane="care"] .chat-log, body.pip .pane[data-pane="care"] .chat-form { display: none; }
/* the stream's plus and minus sit in its top right corner: its first line starts under them */
.pane[data-pane="care"] .chat-log { padding-top: 30px; }
/* The stream's title bar, as a chat window's: dark, the pet's name with a lamp, what it is doing, and the plus at its end.
   The stream hangs under it as one window. */
.chat-top { order: 0; flex: none; display: flex; align-items: center; gap: 7px; height: 32px; margin-top: 8px; padding: 0 44px 0 10px; background: var(--ink); color: var(--paper); border: 2px solid var(--line); box-shadow: 0 3px 0 var(--edge); font-size: 13px; line-height: 1; min-width: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0 3px, rgb(255 255 255 / 0.07) 3px 4px); }
.chat-top b { font-weight: 400; flex: none; }
.chat-top span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b9aec4; font-size: 12px; }
.chat-top .lamp { flex: none; margin: 0; box-shadow: 0 0 0 2px var(--paper); }
.chat-top .lamp.off { background: #6b5f78; }
.pane[data-pane="care"] .chat-log { margin-top: 0; padding-top: 8px; border-top: 0; }
.pane[data-pane="care"] .chat-log::before { content: none; }
.pane[data-pane="care"] .chat-log:empty::before { content: none; }
.pane[data-pane="care"] .chat-log:empty::after { content: "말을 걸면 이 아이가 대답해요. 나눈 이야기는 기억해 둬요."; color: var(--muted); font-size: 13px; }
.panes:has(.pane[data-pane="care"].open) .pane-grow { top: 12px; right: 7px; width: 28px; height: 24px; box-shadow: none; border-color: var(--paper); }
body.pip .chat-top { display: none; }
/* the name plate's line is what gives the medicine while it is ill */
.plate-when.act { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; animation: blink-act 1.1s steps(2) infinite; }
@keyframes blink-act { 50% { opacity: 0.55; } }
/* with no pet yet there is no menu to go back to */
.no-pet .back-menu { display: none; }
/* what the pet brings up, in the stream: a card with its title, and the answers as buttons while it waits */
.chat-log li.event-line { justify-self: stretch; max-width: none; display: grid; gap: 3px; background: #fff3c2; }
.chat-log li.event-line b { font-weight: 400; font-size: 12px; background: var(--ink); color: var(--paper); justify-self: start; padding: 0 6px; }
.chat-log li.event-line small { color: var(--muted); font-size: 11px; }
.event-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.event-choices button { font: inherit; font-size: 12px; padding: 2px 10px 3px; border: 0; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--edge); cursor: pointer; }
.event-choices button:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--line), 0 1px 0 var(--edge); }
.incident-choices:empty { display: none; }
/* no chips over the care buttons any more: what they were for is on the name plate, on the screen, in the bag or at the foot of the stream */
.pane[data-pane="care"] .care-top { display: none !important; }
.chat-log li.event-line.pinned { background: var(--paper); border-style: dashed; }
/* the sitter's key in the bag: the bottle and its minutes side by side, in the middle of the key */
.bag-tools .auto-btn { margin-left: 0; justify-content: center; }
.bag-tools .auto-btn img { display: block; }
/* the title bar says what the name plate's corner says: urgent in red, and pressed for the medicine while it is ill */
.chat-top span.alert { color: #ff8a94; }
.chat-top span.act { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; animation: blink-act 1.1s steps(2) infinite; }
/* A short phone (a browser with its bars showing). The screen and the name plate stand side by side: the screen keeps a
   good size with nothing empty beside it, and the plate (its name, its hearts, its four gauges, one under another) takes
   the room to its right. Everything under them is the stream's. The line under the name is read in the stream's title bar. */
@media (max-height: 760px) and (max-width: 760px) {
  .face-panel { display: grid; grid-template-columns: var(--screen-w, 63%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 8px; align-content: stretch; }
  .face-panel > .face-bezel { grid-column: 1; grid-row: 1; width: auto; align-self: start; }
  .face-panel > .plate { grid-column: 2; grid-row: 1; margin-top: 0; align-self: stretch; padding: 7px 8px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; }
  .face-panel > .panes { grid-column: 1 / -1; grid-row: 2; }
  .face-panel > .dial { grid-column: 1 / -1; grid-row: 3; }
  .face-panel > .face-foot { display: none; }
  .plate-grow { display: none; }
  .plate-who { flex-wrap: wrap; gap: 3px 5px; align-items: center; }
  .plate-who b { flex: 1 1 100%; white-space: normal; overflow: visible; font-size: 14px; line-height: 1.25; word-break: keep-all; }
  .plate-who .hearts { margin-left: 0; flex: 1 1 100%; }
  .plate .mini { grid-template-columns: 1fr; gap: 5px; }
  .plate .mini .meter { gap: 6px; }
  /* made large, the stream takes more of the height: the screen and the plate beside it get smaller, and stay */
  .device-frame.pane-wide .plate { display: flex; }
  .device-frame.pane-wide .face-panel { grid-template-columns: 50% minmax(0, 1fr); }
  .device-frame.pane-wide .plate .mini { grid-template-columns: 1fr 1fr; }
  .pane[data-pane="care"] .face-cell .hw { width: 32px; height: 32px; }
  .pane[data-pane="care"] .face-cell .hw-pic { width: 28px; height: 28px; }
  .pane[data-pane="care"] .face-buttons { margin-top: 5px; }
  .pane[data-pane="care"] .face-cell .hw-label { line-height: 16px; }
  .pane[data-pane="care"] .chat-form { margin-top: 6px; }
  .chat-form input { min-height: 34px; }
  .dial { margin: 7px 0 1px; }
  .dial button { padding: 2px 18px 3px; font-size: 12px; }
  .chat-top { margin-top: 6px; height: 30px; }
  .panes:has(.pane[data-pane="care"].open) .pane-grow { top: 9px; }
}
}
/* The care buttons belong to the chat window, always in view: a strip of four cells under what was said (as the menu
   panel at the foot of a messenger's chat room), each a picture over its name, thin lines between them, no boxes. Under
   it the line to type in. Title bar, stream, strip and line are one window. */
.pane[data-pane="care"] .chat-log { border-bottom: 0; box-shadow: none; margin-bottom: 0; }
.pane[data-pane="care"] .face-buttons { margin-top: 0; padding: 0; gap: 0; justify-items: stretch; background: color-mix(in srgb, var(--paper) 90%, var(--ink)); border: 2px solid var(--line); border-top-width: 2px; border-bottom: 0; }
.pane[data-pane="care"] .face-cell { padding: 5px 0 3px; gap: 0; }
.pane[data-pane="care"] .face-cell + .face-cell { box-shadow: -1px 0 0 color-mix(in srgb, var(--ink) 28%, transparent); }
.pane[data-pane="care"] .face-cell:active { background: color-mix(in srgb, var(--paper) 78%, var(--ink)); }
.pane[data-pane="care"] .face-cell:has(.hw.want) { background: #ffe27a; }
.pane[data-pane="care"] .face-cell .hw { width: 30px; height: 30px; }
.pane[data-pane="care"] .face-cell .hw-pic { width: 26px; height: 26px; }
.pane[data-pane="care"] .face-cell .hw.want { animation: none; }
.pane[data-pane="care"] .face-cell .hw-label, .pane[data-pane="care"] .face-cell .hw-label.want { color: var(--ink); text-shadow: none; background: none; border: 0; padding: 0; animation: none; font-size: 12px; line-height: 16px; }
.pane[data-pane="care"] .chat-form { margin-top: 0; padding: 6px; gap: 6px; background: var(--paper); border: 2px solid var(--line); border-top-width: 2px; box-shadow: 0 3px 0 var(--edge); }
.pane[data-pane="care"] .chat-form input { border-width: 2px; min-height: 34px; }
.pane[data-pane="care"] .chat-form button { box-shadow: none; border-width: 2px; padding: 4px 12px; }
.chat-top { box-shadow: none; }
@media (max-height: 760px) and (max-width: 760px) {
  .pane[data-pane="care"] .face-buttons { margin-top: 0; }
  .pane[data-pane="care"] .face-cell .hw { width: 26px; height: 26px; }
  .pane[data-pane="care"] .face-cell .hw-pic { width: 22px; height: 22px; }
  .pane[data-pane="care"] .chat-form { margin-top: 0; padding: 5px; }
}

/* ---------- the soft look (in place of thick black lines and hard black shadows) ---------- */
.plate, .pane.card, dialog, .bag-row, .chip-btn, .text-btn, .primary, .buy, .link-tile, .invite-btn, .speed-btn, .auto-btn, .place-tile,
.chat-log li, .event, .incident, .speech, .stage-badge, .chat-form input, .pane-grow, .mind-read i, .tags i, .codex-tabs button, .place-tile canvas { border-radius: var(--round); }
.chat-log li.news, .chat-log li.event-line b, .stage-badge { border-radius: 4px; }
.chat-log li { border-color: color-mix(in srgb, var(--ink) 22%, var(--paper)); }
.chat-log li.me { border-color: color-mix(in srgb, var(--accent) 45%, var(--paper)); }
.chat-log li.did { border-color: #e3c05a; }
.chat-log li.event-line { border-color: #e3c05a; }
.mind-read i { border-width: 0; background: color-mix(in srgb, var(--ink) 9%, var(--paper)); line-height: 17px; }
/* the chat window: one rounded window, its dark bar on top */
.chat-top { border-color: var(--ink); border-radius: var(--round) var(--round) 0 0; }
.pane[data-pane="care"] .chat-log { border-radius: 0; }
.pane[data-pane="care"] .face-buttons { border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); background: color-mix(in srgb, var(--paper) 93%, var(--ink)); }
.pane[data-pane="care"] .chat-form { border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 0 0 var(--round) var(--round); box-shadow: 0 3px 0 var(--edge); }
.pane[data-pane="care"] .chat-form input { border-color: color-mix(in srgb, var(--ink) 22%, var(--paper)); }
.dial button { box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 55%, transparent); }
.dial button:active, .dial button[aria-pressed="true"] { box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 55%, transparent); }
/* every window closes by the X in its top right corner */
dialog.has-x > form, dialog.has-x { position: relative; }
.dialog-x { position: sticky; top: 0; right: auto; float: right; justify-self: end; align-self: flex-end; margin: -4px -4px -32px auto; z-index: 5; border-radius: var(--round); } /* (stays in the corner while a long window is scrolled) */
dialog.has-x [hidden] { display: none !important; }
dialog.has-x h2 { padding-right: 40px; }
/* the shop: its ribbon runs across the top, and the X sits under it, level with the title */
.shop-body > .ribbon { order: -1; }
.shop-body > .dialog-x { margin-top: 0; }
/* Three keys on the dark frame under the screen: the purse, the bag, the way out. Named, large enough for a finger, and
   nothing of the screen under them. */
.face-bezel { display: flex; flex-direction: column; }
.face-bezel > canvas { order: 1; }
.bezel-keys { order: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 6px; }
.bezel-keys .screen-keys { display: contents; }
.bezel-keys .screen-keys[hidden] { display: none; }
.bezel-keys button { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 32px; padding: 3px 2px 6px; border: 0; border-radius: 6px;
  background: color-mix(in srgb, #fff 16%, var(--bezel)); color: #fff8ee; font: inherit; font-size: 12px; line-height: 1; cursor: pointer; box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.32); }
.bezel-keys button:active { padding: 6px 2px 3px; box-shadow: inset 0 2px 0 rgb(0 0 0 / 0.32); }
.bezel-keys img { width: 18px; height: 18px; image-rendering: pixelated; flex: none; }
.bezel-keys b { font-weight: 400; color: #ffe27a; font-variant-numeric: tabular-nums; }
.bezel-keys span { white-space: nowrap; }
body.pip .bezel-keys { display: none; }
@media (max-height: 760px) and (max-width: 760px) {
  .bezel-keys { gap: 3px; margin-top: 5px; }
  .bezel-keys button { font-size: 11px; gap: 2px; min-height: 28px; padding: 2px 1px 5px; }
  .bezel-keys img { width: 15px; height: 15px; }
  .bezel-keys #open-shop span { display: none; } /* (the coin and its count say it) */
}
/* the three keys under the screen, plainer: no boxes, one quiet line of the frame's own (a picture, its name, thin lines
   between), as the row of care buttons in the chat window */
.bezel-keys { gap: 0; margin-top: 5px; }
.bezel-keys button { background: none; box-shadow: none; border-radius: 0; min-height: 26px; padding: 3px 2px; color: #d9cfe2; font-size: 12px; gap: 5px; }
.bezel-keys button:active { padding: 3px 2px; box-shadow: none; background: rgb(255 255 255 / 0.1); }
.bezel-keys .screen-keys button, .bezel-keys button + .screen-keys button { box-shadow: -1px 0 0 rgb(255 255 255 / 0.16); }
.bezel-keys img { width: 16px; height: 16px; }
.bezel-keys b { color: #ffe27a; }
@media (max-height: 760px) and (max-width: 760px) {
  .bezel-keys button { min-height: 24px; padding: 2px 1px; font-size: 11px; gap: 3px; }
  .bezel-keys img { width: 14px; height: 14px; }
}
/* The care buttons in the chat window: four pill chips in one line (as a messenger's quick replies), a small picture
   beside its name. No strip, no lines between. */
.pane[data-pane="care"] .face-buttons { display: flex; gap: 5px; padding: 6px 6px 0; background: var(--paper); border-top: 0; }
.pane[data-pane="care"] .face-cell { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 3px; padding: 2px 6px 2px 4px; min-height: 28px;
  background: #fff; border: 2px solid color-mix(in srgb, var(--ink) 20%, var(--paper)); border-radius: 99px; box-shadow: none; cursor: pointer; }
.pane[data-pane="care"] .face-cell + .face-cell { box-shadow: none; }
.pane[data-pane="care"] .face-cell:active { background: color-mix(in srgb, var(--accent) 14%, #fff); }
.pane[data-pane="care"] .face-cell:has(.hw.want) { background: #fff3c4; border-color: #e3c05a; }
.pane[data-pane="care"] .face-cell .hw { width: 18px; height: 18px; flex: none; }
.pane[data-pane="care"] .face-cell .hw-pic { width: 16px; height: 16px; }
.pane[data-pane="care"] .face-cell .hw-label, .pane[data-pane="care"] .face-cell .hw-label.want { font-size: 12px; line-height: 18px; white-space: nowrap; }
.pane[data-pane="care"] .chat-form { border-top: 0; }
@media (max-height: 760px) and (max-width: 760px) {
  .pane[data-pane="care"] .face-buttons { padding: 5px 5px 0; gap: 4px; }
  .pane[data-pane="care"] .face-cell .hw { width: 18px; height: 18px; }
  .pane[data-pane="care"] .face-cell .hw-pic { width: 16px; height: 16px; }
}
/* (in a chip the picture needs no added outline: it has its own, and on white the added one only thickens it) */
.pane[data-pane="care"] .face-cell .hw-pic, .pane[data-pane="care"] .face-cell .hw.want .hw-pic { filter: none; }
.pane[data-pane="care"] .face-cell .hw:hover, .pane[data-pane="care"] .face-cell .hw:active, .pane[data-pane="care"] .face-cell .hw.pressed { transform: none; }

/* ---------- one window (2026-10-04) ----------
   The screen, and under it one window: its head (who it is and how it is doing, and the purse), the talk, the four
   care chips, and the line to type in with a plus that opens the tray of everything else. Whatever is opened comes up
   over the window as a sheet, and closing it goes back to the talk where it was. The sitter and the speed are keys on
   the frame above the screen, lit while they are on. */
.dial, .pane-grow, .chat-top { display: none !important; }

/* the frame's strip: the name in the middle, the sitter and the speed at its right end */
.face-head { height: 24px; margin: 0 0 4px; }
.face-head .head-side.right { gap: 4px; }
.face-head .auto-btn, .face-head .speed-btn { flex: none; display: inline-flex; align-items: center; gap: 3px; width: auto; height: 22px; min-height: 0; margin: 0; padding: 0 7px 0 4px;
  border: 0; border-radius: 6px; background: color-mix(in srgb, #fff 12%, var(--bezel)); color: color-mix(in srgb, #fff 72%, var(--bezel)); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.3);
  clip-path: none; font: inherit; font-size: 11px; line-height: 1; letter-spacing: 0; cursor: pointer; animation: none; transform: none; }
.face-head .auto-btn img, .face-head .speed-btn img { display: block; width: 14px; height: 14px; image-rendering: pixelated; opacity: 0.6; }
.face-head .auto-btn b, .face-head .speed-btn b { font-weight: 400; font-variant-numeric: tabular-nums; }
.face-head .auto-btn[aria-pressed="true"] { color: #fff8ee; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.3), 0 0 0 2px #5fe07a; animation: none; }
.face-head .speed-btn.fast { color: #ffe27a; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.3), 0 0 0 2px #ffd34d; }
.face-head .auto-btn[aria-pressed="true"] img, .face-head .speed-btn.fast img { opacity: 1; }
.face-head .auto-btn:active, .face-head .speed-btn:active { transform: translateY(1px); }
.face-head .auto-btn.empty b { color: inherit; opacity: 0.7; }

/* a short phone: the screen on its own row again (the plate it stood beside is the window's head now) */
@media (max-height: 760px) and (max-width: 760px) {
  .face-panel { display: flex; flex-direction: column; }
  .face-panel > .face-bezel { width: var(--screen-w, 100%); align-self: center; }
}

/* the window's head */
.pane[data-pane="care"] > .plate { order: -1; flex: none; display: block; margin: 8px 0 0; padding: 6px 9px 0; background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink); border-radius: var(--round) var(--round) 0 0; box-shadow: none; }
.plate .plate-who { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; font-size: 14px; line-height: 22px; }
.plate .plate-who b { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 22px; }
.plate .lamp { flex: none; margin: 0; box-shadow: 0 0 0 2px var(--paper); }
.plate .lamp.off { background: #6b5f78; }
.plate .stage-badge { font-size: 11px; line-height: 16px; padding: 0 5px; border: 0; border-radius: 4px; }
.plate .plate-when { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--paper) 62%, var(--ink)); font-size: 11px; }
.plate .plate-when.alert { color: #ff8a94; }
.plate .purse { margin-left: auto; flex: none; position: relative; display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 0 0 6px; border: 0; background: none;
  color: #ffe27a; box-shadow: none; clip-path: none; font: inherit; font-size: 13px; cursor: pointer; }
.plate .purse::after { content: ""; position: absolute; inset: -6px -6px; }
.plate .purse img { width: 15px; height: 15px; image-rendering: pixelated; }
.plate .purse b { font-weight: 400; }
.plate-row { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; min-width: 0; }
.plate .plate-row .hearts { margin: 0; flex: none; }
.plate .plate-row .hearts img { width: 12px; height: 12px; }
.plate .mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; flex: 1 1 auto; min-width: 0; }
.plate .mini .meter { gap: 3px; }
.plate .mini img { width: 13px; height: 13px; }
.plate .mini .cells i { height: 6px; border-width: 1px; border-color: color-mix(in srgb, var(--paper) 40%, var(--ink)); }
.plate .plate-grow { display: block; margin: 5px -9px 0; }
.plate .grow-bar { height: 3px; margin: 0; border: 0; background: rgb(255 255 255 / 0.12); }
.no-pet .plate .plate-row, .no-pet .plate .purse { display: none; }
.no-pet .pane[data-pane="care"] > .plate { padding-bottom: 6px; }
.pane[data-pane="care"] .chat-log { margin-top: 0; border-top: 0; border-radius: 0; }

/* the plus, and the tray it opens under the line to type in */
.pane[data-pane="care"] .chat-form { align-items: center; }
.tray-toggle { flex: none; position: relative; width: 34px; height: 34px; padding: 0; border: 2px solid color-mix(in srgb, var(--ink) 20%, var(--paper)); border-radius: 50%;
  background: #fff; color: var(--ink); font: inherit; font-size: 20px; line-height: 1; display: grid; place-items: center; cursor: pointer; }
.tray-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tray-toggle .dot, .tray .dot { position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; border: 2px solid var(--paper); }
.tray-toggle .dot[hidden], .tray .dot[hidden] { display: none; }
.pane[data-pane="care"] .chat-form:has(~ .tray:not([hidden])) { border-radius: 0; box-shadow: none; }
.tray { order: 5; flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 4px; padding: 9px 8px 10px;
  background: color-mix(in srgb, var(--paper) 90%, var(--accent)); border: 2px solid var(--line); border-top: 0; border-radius: 0 0 var(--round) var(--round); box-shadow: 0 3px 0 var(--edge); }
.tray[hidden] { display: none; }
.tray .screen-keys { display: contents; }
.tray .screen-keys[hidden] { display: none; }
.tray button { display: grid; justify-items: center; gap: 3px; min-width: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 11px; line-height: 1.2; color: var(--ink); cursor: pointer; }
.tray .ic { position: relative; width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 2px solid color-mix(in srgb, var(--ink) 14%, var(--paper)); display: grid; place-items: center; }
.tray button:active .ic { transform: translateY(1px); background: color-mix(in srgb, var(--accent) 12%, #fff); }
.tray .ic img { width: 24px; height: 24px; image-rendering: pixelated; }
.tray .n { position: absolute; top: -6px; right: -6px; min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--ink); color: #ffe27a; font-weight: 400; font-size: 10px; line-height: 16px; }

/* a sheet over the window: the window stays in view behind it, dimmed */
.panes > .pane[data-pane="care"] { display: flex; flex-direction: column; animation: none; }
.panes > .pane.card.open { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; max-height: calc(100% - 36px); border-radius: 14px 14px 0 0; padding-top: 12px;
  animation: sheet-up 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sheet-up { from { transform: translateY(28px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .panes > .pane.card.open { animation: none; } }
.sheet-dim { position: absolute; inset: 8px 0 0; z-index: 5; background: rgb(43 34 51 / 0.35); border-radius: var(--round); }
.sheet-dim[hidden] { display: none; }
.panes > .pane.card .sheet-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; margin: 0; padding: 0; border: 2px solid var(--line); border-radius: var(--round);
  background: var(--paper); color: var(--ink); font-size: 16px; line-height: 1; text-align: center; }
.panes > .pane.card.open { padding-right: 46px; } /* (room for the X: nothing runs under it) */
.panes > .pane.card.open > :is(.bag-row, .friends, .goods, details, #pet-info, .chat-memory) { margin-right: -34px; } /* (rows below the title use the whole width again) */
.no-pet #speed { display: none; }
/* with no pet, what to do first fills the window instead (there is nothing behind it to go back to) */
.no-pet .panes > .pane.card.open { top: 8px; max-height: none; border-radius: var(--round); animation: none; }
.no-pet .sheet-dim { display: none; }

/* ---------- every window opens the same way (2026-10-04) ----------
   What the plus opens, whether a panel of the page or a window of its own, comes up from below as one kind of sheet:
   the window's width, rounded on top, an X in its top right corner, the rest of the page dimmed behind it; a press on
   the dimmed part closes it. */
dialog.letter, dialog.hatch, dialog.help { width: min(390px, calc(100vw - 42px)); max-height: min(72dvh, calc(100dvh - 60px)); margin: auto auto 30px; background: var(--paper);
  border: 2px solid var(--line); border-radius: 14px 14px var(--round) var(--round); box-shadow: 0 3px 0 var(--edge); }
dialog.letter[open], dialog.hatch[open], dialog.help[open] { animation: sheet-up 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { dialog.letter[open], dialog.hatch[open], dialog.help[open] { animation: none; } }
/* (the ones with a lot to read or to choose take more of the height) */
dialog.hatch, #letter-dialog, #career-dialog, #intro-dialog, #memorial-dialog, #guestbook-dialog, #codex-dialog, #shop-dialog { max-height: calc(100dvh - 60px); }
dialog.letter::backdrop, dialog.hatch::backdrop, dialog.help::backdrop { background: rgb(43 34 51 / 0.35); }
.panes > .pane.card.open { border-radius: 14px 14px var(--round) var(--round); }
.dialog-x, .hatch .sheet-close { width: 30px; height: 30px; font-size: 16px; border-radius: var(--round); }
.panes > .pane.card .sheet-x { top: 10px; right: 10px; }

/* the frame's strip: its name on the left, by the power light; and the screen from edge to edge of the frame */
.face-head .head-side.left { display: none; }
.face-head h1 { margin: 0 auto 0 16px; }
.face-bezel { padding: 3px 0 0; }
.face-head { padding: 0 5px 0 0; }
/* (one kind of title too: on the left, the same size, in a panel of the page or a window of its own) */
dialog .letter-title, dialog .hatch-body h2, dialog .help-body h2 { text-align: left; font-size: 16px; }
.panes > .pane.card h2 { font-size: 16px; }
.face-head h1 { margin-left: 20px; }

/* ---------- one size for every sheet (2026-10-04) ----------
   A panel of the page and a window of its own cover the same place: the window under the screen, from its head to its
   foot, whatever is in them (what does not fit scrolls). The screen above stays in view. */
.panes > .pane.card.open { top: 8px; max-height: none; }
dialog.letter, dialog.hatch, dialog.help, dialog.hatch, #letter-dialog, #career-dialog, #intro-dialog, #memorial-dialog, #guestbook-dialog, #codex-dialog, #shop-dialog {
  position: fixed; inset: auto; margin: 0; left: var(--sheet-left, 21px); top: var(--sheet-top, 30vh);
  width: var(--sheet-w, calc(100vw - 42px)); max-width: none; height: var(--sheet-h, 65vh); max-height: none; }
/* the power light: level with the name beside it (the strip is 24px tall now) */
.face-bezel::before { top: 12px; left: 9px; }
/* (a sheet's corners are the window's own: rounder ones let the dark head behind show through at the top) */
.panes > .pane.card.open, dialog.letter, dialog.hatch, dialog.help { border-radius: var(--round); }

/* ---------- in the middle, and drawn in pixels (2026-10-04) ----------
   The plus and every X are little pixel drawings on an 8 by 8 grid (a letter sits off its middle in this font), and the
   buttons whose words sat a dot or two off their middle are evened out (measured from screenshots). */
.tray-toggle, .panes > .pane.card .sheet-x, .dialog-x, .hatch .sheet-close { font-size: 0; color: transparent; background-position: center; background-repeat: no-repeat; background-size: 16px 16px; }
.tray-toggle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges' fill='%233d2f45'%3E%3Crect x='3' y='0' width='2' height='8'/%3E%3Crect x='0' y='3' width='8' height='2'/%3E%3C/svg%3E"); }
.tray-toggle[aria-expanded="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges' fill='%23fffaf2'%3E%3Crect x='0' y='0' width='2' height='2'/%3E%3Crect x='1' y='1' width='2' height='2'/%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3Crect x='3' y='3' width='2' height='2'/%3E%3Crect x='4' y='4' width='2' height='2'/%3E%3Crect x='5' y='5' width='2' height='2'/%3E%3Crect x='6' y='6' width='2' height='2'/%3E%3Crect x='6' y='0' width='2' height='2'/%3E%3Crect x='5' y='1' width='2' height='2'/%3E%3Crect x='4' y='2' width='2' height='2'/%3E%3Crect x='3' y='3' width='2' height='2'/%3E%3Crect x='2' y='4' width='2' height='2'/%3E%3Crect x='1' y='5' width='2' height='2'/%3E%3Crect x='0' y='6' width='2' height='2'/%3E%3C/svg%3E"); }
.panes > .pane.card .sheet-x, .dialog-x, .hatch .sheet-close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges' fill='%233d2f45'%3E%3Crect x='0' y='0' width='2' height='2'/%3E%3Crect x='1' y='1' width='2' height='2'/%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3Crect x='3' y='3' width='2' height='2'/%3E%3Crect x='4' y='4' width='2' height='2'/%3E%3Crect x='5' y='5' width='2' height='2'/%3E%3Crect x='6' y='6' width='2' height='2'/%3E%3Crect x='6' y='0' width='2' height='2'/%3E%3Crect x='5' y='1' width='2' height='2'/%3E%3Crect x='4' y='2' width='2' height='2'/%3E%3Crect x='3' y='3' width='2' height='2'/%3E%3Crect x='2' y='4' width='2' height='2'/%3E%3Crect x='1' y='5' width='2' height='2'/%3E%3Crect x='0' y='6' width='2' height='2'/%3E%3C/svg%3E"); background-size: 12px 12px; background-color: var(--paper); }
#chat-send { padding-top: 6px; padding-bottom: 2px; }
.goods .buy { padding: 3px 6px 1px; }
.codex-tab { padding: 5px 4px 0; }
.event-action { padding: 2px 9px 0; }
.invite-btn { padding: 3px 10px; }
.plate .purse { padding: 0 3px; }
/* (this font leaves a little room right of each letter and below it: words are nudged a dot right and down) */
#chat-send { padding: 5px 11px 3px 13px; }
.goods .buy { padding: 3px 5px 1px 7px; }
.codex-tab { padding: 4px 3px 1px 5px; }
.event-action { padding: 2px 8px 0 10px; }
.invite-btn { padding: 3px 9px 3px 11px; }
.bag-row { padding-top: 5px; padding-bottom: 3px; }
.tray-toggle[aria-expanded="true"] { background-color: var(--ink); background-position: center; background-repeat: no-repeat; background-size: 12px 12px; }
/* the strip's name, keys and light sit 2px lower (the room comes from the gap above the screen) */
.face-head { margin: 2px 0 2px; }
.face-bezel::before { top: 14px; }
.face-head { margin: 4px 0 0; }
.face-bezel::before { top: 16px; }
.face-head { margin: 3px 0 1px; }
.face-bezel::before { top: 15px; }
/* the screen without its top rows (sky only), so the window under it is taller (lcd.js: TOP_CUT) */
.face-bezel canvas { aspect-ratio: 96 / 68; object-fit: cover; object-position: center bottom; }

/* the gauges in the window's head: one bar each, pixel-edged, its color says how it is (short ones blink) */
.plate .mini .meter { gap: 4px; align-items: center; }
.plate .mini img { width: 14px; height: 14px; }
.plate .mini .bar { flex: 1 1 auto; min-width: 0; height: 7px; padding: 1px; background: #2a2333; box-shadow: 0 0 0 1px color-mix(in srgb, var(--paper) 22%, var(--ink)); }
.plate .mini .bar::after { content: ""; display: block; height: 100%; width: var(--v); background: var(--tone); box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.35); }
.plate .mini .bar.ok { --tone: #6fe08a; }
.plate .mini .bar.mid { --tone: #ffd34d; }
.plate .mini .bar.low { --tone: #ff4d5e; animation: bar-blink 1s steps(2) infinite; }
@keyframes bar-blink { 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .plate .mini .bar.low { animation: none; } }

/* its life: five hearts, in view only once it has worn down (blinking when low); pressed, it says what they are */
.plate .plate-row .hearts { padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.plate .plate-row .hearts::after { content: ""; position: absolute; inset: -6px -4px; }
.plate .plate-row .hearts.weak { animation: bar-blink 1s steps(2) infinite; }
@media (prefers-reduced-motion: reduce) { .plate .plate-row .hearts.weak { animation: none; } }

/* how far along this age it is: the words of what comes next ("청소년까지 39분") sit on a bar that fills up, in place
   of the thin line under the head. Something wrong instead: the words in red, no bar. */
.plate .plate-grow { display: none; }
.plate .plate-when { flex: 0 1 auto; min-width: 0; height: 18px; padding: 0 7px; border-radius: 3px; line-height: 18px; font-size: 11px; color: #fff8ee;
  background: linear-gradient(90deg, #ff5c9d var(--grow, 0%), rgb(255 255 255 / 0.13) var(--grow, 0%)); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.22); }
.plate .plate-when.alert { background: rgb(255 77 94 / 0.22); color: #ffb3bb; }
.no-pet .plate .plate-when { display: none; }
/* a narrow phone: the age badge gives way so the name and what comes next are read whole (the age is in 이야기) */
@media (max-width: 370px) { .plate .stage-badge { display: none; } }

/* the head and the talk, apart: the head is a card of its own above the talk window, with a gap between */
.pane[data-pane="care"] > .plate { border-radius: var(--round); padding-bottom: 6px; margin-bottom: 6px; box-shadow: 0 3px 0 var(--edge); }
.pane[data-pane="care"] .chat-log { border-top: 2px solid var(--line); border-radius: var(--round) var(--round) 0 0; }

/* time running fast: the arrows on the speed key run forward, in steps, the quicker the faster */
.face-head .speed-btn.fast img { animation: fast-run var(--run, 0.4s) steps(3) infinite; }
@keyframes fast-run { from { transform: translateX(-2px); } to { transform: translateX(3px); } }
.face-head .speed-btn { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .face-head .speed-btn.fast img { animation: none; } }

/* the speed key's picture: two arrows going round, still at normal speed; turning while time runs fast (in eight
   steps, the quicker the faster) */
.face-head .speed-btn .sync { display: block; width: 13px; height: 13px; flex: none; color: color-mix(in srgb, #fff 55%, var(--bezel)); }
.face-head .speed-btn.fast .sync { color: #ffd34d; animation: sync-turn calc(var(--run, 0.4s) * 3) steps(8) infinite; }
@keyframes sync-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .face-head .speed-btn.fast .sync { animation: none; } }

/* (the arrows are drawn smooth now: they turn smoothly too) */
.face-head .speed-btn .sync { width: 14px; height: 14px; }
.face-head .speed-btn.fast .sync { animation-timing-function: linear; }

/* what it needs, by the name on the frame's strip: small red tags, blinking; the screen is left clear */
.face-head h1 { margin-right: 0; }
.strip-needs { flex: 0 1 auto; min-width: 0; display: flex; gap: 4px; margin-left: 8px; overflow: hidden; }
.strip-needs:empty { display: none; }
.need-tag { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 0 6px 0 3px; border: 0; border-radius: 5px; background: #ff5c6d; color: #fff;
  font: inherit; font-size: 10px; line-height: 1; letter-spacing: 0; cursor: pointer; animation: need-blink 1.2s steps(2) infinite; }
.need-tag img { width: 13px; height: 13px; image-rendering: pixelated; }
.need-tag:active { transform: translateY(1px); }
@keyframes need-blink { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .need-tag { animation: none; } }
@media (max-width: 370px) { .need-tag + .need-tag { display: none; } } /* (a narrow phone: the most pressing one) */
/* (the need tags: the same height, corners, letters and line as the sitter and speed keys beside them) */
.strip-needs { align-self: center; align-items: center; height: 22px; }
.need-tag { height: 22px; padding: 0 7px 0 4px; border-radius: 6px; font-size: 11px; gap: 3px; box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.25); }
.need-tag img { width: 14px; height: 14px; }
/* (as much room under the strip's keys as above them) */
.face-head { margin-bottom: 6px; }
/* (measured by eye: the light line along the frame's top reads as frame, so the dark room above the keys is 4px; below
   is made the same) */
.face-head { margin-bottom: 3px; }

/* the screen's message box: two lines at most and a little see-through, so the pet is not hidden behind it (the
   whole of what it says is in the talk) */
.event { padding: 4px 8px 5px; background: rgb(27 28 51 / 0.8); }
.event .event-text, #event-text, #incident-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* the medicine chip, in the window right over the care chips (not on the frame: the thumb stays down here) */
.pane[data-pane="care"] > .strip-needs { order: 2; flex: none; height: auto; margin: 0; padding: 6px 6px 0; gap: 5px; background: var(--paper);
  border-left: 2px solid var(--line); border-right: 2px solid var(--line); align-self: stretch; overflow: visible; }
.pane[data-pane="care"] > .strip-needs:empty { display: none; }
.pane[data-pane="care"] > .strip-needs .need-tag { height: 28px; padding: 0 10px 0 6px; border-radius: 99px; font-size: 12px; gap: 4px; box-shadow: none; border: 2px solid #ff5c6d; }
.pane[data-pane="care"] > .strip-needs .need-tag img { width: 16px; height: 16px; }
/* the floating button: a key on the frame's strip like the sitter and the speed, after them */
.face-head #pip { position: static; flex: none; width: 22px; height: 22px; border-radius: 6px; background: color-mix(in srgb, #fff 12%, var(--bezel)); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.3); }
.face-head #pip[hidden] { display: none; }
.face-head #pip img { width: 14px; height: 14px; }
.face-bezel:has(#pip:not([hidden])) .head-side.right { padding-right: 0; }
/* a short window (a desk at 720px, a short phone): the tray's tiles smaller, so some of the talk stays in view */
@media (max-height: 760px) {
  .tray { gap: 4px 4px; padding: 6px 8px 7px; }
  .tray .ic { width: 36px; height: 36px; border-radius: 10px; }
  .tray .ic img { width: 20px; height: 20px; }
}
/* the little tag of the screen's message box sits up on its top edge, with room between it and the words */
.event-tag { top: -14px; }
.event { padding-top: 10px; }

/* first times and promises: cards in the talk, and lists in 이야기 */
.chat-log li.mark { justify-self: center; max-width: 96%; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border: 2px solid #e3c05a; background: #fff6d6;
  border-radius: var(--round); font-size: 12px; line-height: 1.35; }
.chat-log li.mark b { flex: none; font-weight: 400; font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 4px; background: #e3a72f; color: #fff; }
.chat-log li.mark.promise { border-color: #f3a9c4; background: #fff0f5; }
.chat-log li.mark.promise b { background: #ff5c9d; }
.marks { margin: 4px 0 10px; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13px; line-height: 1.4; }
.marks li { padding: 3px 8px; border-radius: var(--round); background: color-mix(in srgb, var(--paper) 88%, var(--ink)); }

/* the pet's own time: a small pill over the screen's top right corner, the sun or the moon beside the hour */
.game-clock { position: absolute; z-index: 2; display: flex; align-items: center; gap: 3px; padding: 1px 6px 1px 3px; border-radius: 9px;
  background: rgb(27 28 51 / 0.42); color: #fffaf2; font-size: 11px; line-height: 16px; pointer-events: none; }
.game-clock[hidden] { display: none; }
.game-clock img { width: 12px; height: 12px; image-rendering: pixelated; }
.game-clock b { font-weight: 400; letter-spacing: 0.5px; font-variant-numeric: tabular-nums; }
body.pip .game-clock { display: none; }
/* while the screen asks something (a question, an event to answer), the passing message box steps aside: the two
   used to sit on top of each other in the same place */
#device-frame:has(#incident:not([hidden])) #event { visibility: hidden; }
.chat-log li.sitter-line { background: color-mix(in srgb, #3ddc5a 18%, var(--paper)); color: var(--ink); }

/* The shop opened from the sitter or speed key: why, and the thing it is about, lit for a moment */
.shop-note { margin: 0 0 8px; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 10px; background: #fff6c9; color: var(--ink); font-size: 13px; text-align: center; }
@keyframes goods-lit { 0%, 60% { background: #fff1a8; box-shadow: 0 0 0 3px #f5c443; } 100% { background: transparent; box-shadow: none; } }
#goods li.lit { animation: goods-lit 1.8s ease-out; border-radius: 10px; }

/* ---------- 오컴의 면도날 (2026-10-05): what was cut stays in the page for old saves and tests, but out of sight ---------- */
/* The babysitter and the shop's speed passes, boosters and tonics are gone: no bezel keys, no purse, no bag */
#auto-toggle, #open-shop, #screen-keys, #tray .cut { display: none !important; }
#speed[hidden] { display: none !important; } /* (only the debug speed is left) */
.story-photo { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 8px; }
.story-photo img { width: 18px; height: 18px; image-rendering: pixelated; }

/* A press's result over the gauges it moved: +12 rising green, -3 sinking red */
#meters .meter { position: relative; }
.gauge-pop { position: absolute; right: 2px; top: -6px; z-index: 3; font-size: 15px; line-height: 1; font-weight: 700; pointer-events: none;
  text-shadow: 0 1px 0 #1b1c33, 1px 0 0 #1b1c33, -1px 0 0 #1b1c33, 0 -1px 0 #1b1c33; animation: gauge-pop 1.5s ease-out forwards; }
.gauge-pop.up { color: #6dff8e; }
.gauge-pop.down { color: #ff7b8b; animation-name: gauge-sink; }
@keyframes gauge-pop { 0% { opacity: 0; transform: translateY(6px) scale(0.8); } 15% { opacity: 1; transform: translateY(0) scale(1.15); } 70% { opacity: 1; transform: translateY(-8px) scale(1); } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes gauge-sink { 0% { opacity: 0; transform: translateY(-6px); } 15% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; transform: translateY(6px); } 100% { opacity: 0; transform: translateY(10px); } }

/* A leaning that grew, rising over the screen: 「다정 +1」, and the path when it changes */
.lean-pop { position: absolute; z-index: 4; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; gap: 3px;
  pointer-events: none; animation: lean-rise 2.6s ease-out forwards; }
.lean-pop b { padding: 3px 10px; border: 2px solid var(--ink, #1b1c33); border-radius: 10px; background: #fff6c9; color: #1b1c33; font-size: 15px; line-height: 1.2; }
.lean-pop span { padding: 2px 8px; border-radius: 8px; background: rgb(27 28 51 / 0.75); color: #fffaf2; font-size: 12px; }
@keyframes lean-rise { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.85); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  22% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; transform: translate(-50%, -10px); } 100% { opacity: 0; transform: translate(-50%, -18px); } }
.bents { display: grid; gap: 4px; margin: 2px 0 4px; }
.bent { display: grid; grid-template-columns: 3.4em 1fr 1.6em; align-items: center; gap: 6px; font-size: 13px; }
.bent b { font-weight: 400; color: var(--ink); }
.bent i { height: 8px; border: 2px solid var(--line); border-radius: 5px; background: linear-gradient(90deg, var(--accent) var(--v), transparent var(--v)); }
.bent small { text-align: right; color: var(--muted, #7a6f6a); }
.path-line { margin: 2px 0 0; font-size: 13px; color: var(--ink); }

/* 도감, 직업: the twelve paths */
.path-grid { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.path-grid li { display: flex; flex-direction: column; gap: 2px; min-height: 58px; padding: 6px; border: 2px dashed var(--line); border-radius: 10px; color: var(--muted, #7a6f6a); }
.path-grid li.got { border-style: solid; background: #fff6c9; color: var(--ink); }
.path-grid b { font-size: 14px; font-weight: 400; }
.path-grid small { font-size: 11px; line-height: 1.3; }
.chips.gone { display: none; }

/* ---------- 오컴의 면도날 2 (2026-10-05 밤): one day a visit, three gauges, no friends bundle, fewer extras ---------- */
.face-cell:has(.hw[data-id="light"]) { display: none !important; } /* (it sleeps at the day's end by itself) */
#hearts { display: none !important; } /* (its life no longer runs down: the gauges and its mood say how it is) */
#tray [data-open="friends"], #pip, #push-toggle, #letter-square, #now-eggs { display: none !important; }
#device-tools section:has(#swatches) { display: none !important; }
#tray { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story-share { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px 12px; }
.story-share img { width: 18px; height: 18px; image-rendering: pixelated; }

/* The morning's plan: four big choices over the talk */
.plan-card { order: 1; margin: 6px 8px; padding: 10px 10px 12px; border: 2px solid var(--ink); border-radius: 14px; background: #fff6c9; color: #1b1c33;
  box-shadow: 0 3px 0 var(--edge, #1b1c33); }
.plan-card[hidden] { display: none; }
.plan-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 8px; }
.plan-head b { font-size: 16px; }
.plan-head span { font-size: 12px; opacity: 0.75; }
.plan-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.plan-option { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; border: 2px solid #1b1c33; border-radius: 12px;
  background: #fffaf2; color: #1b1c33; font: inherit; cursor: pointer; }
.plan-option:active { transform: translateY(1px); }
.plan-option img { width: 28px; height: 28px; image-rendering: pixelated; }
.plan-option b { font-size: 14px; font-weight: 400; }
.plan-option small { font-size: 11px; opacity: 0.7; }
.need-tag:disabled { opacity: 0.75; cursor: default; }
/* (kept small: on a short phone it must not push the buttons and the line to type in off the screen) */
.plan-card { margin: 4px 6px; padding: 6px 7px 7px; }
.plan-head { margin: 0 2px 5px; }
.plan-head b { font-size: 14px; }
.plan-option { padding: 4px 2px 3px; gap: 0; border-radius: 10px; }
.plan-option img { width: 20px; height: 20px; }
.plan-option b { font-size: 13px; line-height: 1.2; }
.plan-option small { font-size: 10px; white-space: nowrap; line-height: 1.2; }