@font-face { font-family: dgpx; src: url(pixel.ttf) format("truetype"); font-display: swap; }
:root {
  --bg: #fadced; --ink: #2a1b3d; --soft: #7a5a86; --link: #b8336a; --card: #fff6fb;
  --crop-x: 118; --crop-w: 1020; --crop-h: 1242;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1b1225; --ink: #f6e8f3; --soft: #b79cc4; --link: #f7a8c4; --card: #261a33; }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  background-image: linear-gradient(45deg, rgb(255 255 255 / .18) 25%, transparent 25% 75%, rgb(255 255 255 / .18) 75%),
                    linear-gradient(45deg, rgb(255 255 255 / .18) 25%, transparent 25% 75%, rgb(255 255 255 / .18) 75%);
  background-size: 24px 24px; background-position: 0 0, 12px 12px;
  color: var(--ink);
  font: 15px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
main { max-width: 560px; margin: 0 auto; padding: clamp(16px, 4vw, 40px) 16px 40px; text-align: center; }

.device { position: relative; width: min(100%, 460px); aspect-ratio: 1020 / 1242; margin: 0 auto; }
.shell { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; user-select: none; -webkit-user-drag: none; }

/* positions are mockup pixels converted to % of the egg crop */
.lcd {
  position: absolute; overflow: hidden;
  left: calc((338 - var(--crop-x)) / var(--crop-w) * 100%); top: calc(398 / var(--crop-h) * 100%);
  width: calc(577 / var(--crop-w) * 100%); height: calc(442 / var(--crop-h) * 100%);
  background: #c7e4f8;
}
.lcd svg { display: block; width: 100%; height: 100%; }
.lcd.flash::after { content: ""; position: absolute; inset: 0; background: #fff; animation: flash .25s steps(2) forwards; }
@keyframes flash { to { opacity: 0; } }

.btn {
  position: absolute; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 50%; -webkit-tap-highlight-color: transparent;
  transition: transform .06s steps(1), filter .06s steps(1);
}
.btn img { display: block; width: 100%; height: 100%; pointer-events: none; }
.btn[data-do="coffee"] { left: calc((306 - var(--crop-x)) / var(--crop-w) * 100%); top: calc(876 / var(--crop-h) * 100%); width: calc(190 / var(--crop-w) * 100%); height: calc(168 / var(--crop-h) * 100%); }
.btn[data-do="nap"]    { left: calc((528 - var(--crop-x)) / var(--crop-w) * 100%); top: calc(876 / var(--crop-h) * 100%); width: calc(198 / var(--crop-w) * 100%); height: calc(168 / var(--crop-h) * 100%); }
.btn[data-do="debug"]  { left: calc((757 - var(--crop-x)) / var(--crop-w) * 100%); top: calc(876 / var(--crop-h) * 100%); width: calc(189 / var(--crop-w) * 100%); height: calc(168 / var(--crop-h) * 100%); }
.btn:hover img { filter: brightness(1.06) saturate(1.1); }
.btn:active, .btn.down { transform: translateY(2%) scale(.93); filter: brightness(.92); }
.btn:focus-visible { outline: 4px dashed var(--link); outline-offset: 2px; }
.btn[disabled] { cursor: progress; }
.btn.need::after {
  content: ""; position: absolute; left: 50%; top: -14%; width: 18%; aspect-ratio: 1; translate: -50% 0;
  background: #ff5fa2; border: 3px solid #2a1b3d; image-rendering: pixelated;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%);
  animation: nudge .9s steps(2) infinite;
}
@keyframes nudge { 50% { translate: -50% -30%; } }
.device.busy .btn.need::after { display: none; }
.device.busy .btn:not(.down) { filter: grayscale(.4) brightness(.97); }

/* LCD reactions; ids come from the rendered SVG */
.hop #character { animation: hop .5s steps(4) 2; transform-box: fill-box; }
@keyframes hop { 50% { transform: translateY(-18px); } }

.msg { min-height: 1.5em; margin: 18px 0 6px; font: 700 16px/1.4 dgpx, ui-monospace, monospace; letter-spacing: .02em; }
.how, .who { color: var(--soft); font-size: 13px; margin: 6px auto; max-width: 42ch; }
.how b { color: var(--ink); }
.who:empty { display: none; }
.foot { font-size: 12px; margin-top: 22px; }
a { color: var(--link); }

@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; transition: none !important; }
}