:root {
  /* Shell palette -- swap --shell to mint (#bfe3d0) for the alternate pastel. */
  --shell: #f2c9be;
  --shell-edge: #d99f92;
  --shell-edge-dark: #b97e70;
  --pattern: rgba(255, 255, 255, 0.22);
  --frame: #4a4a3f;
  --btn: #6b6b5e;
  --btn-lip: #4a4a3f;
  --btn-text: #f0f0e6;
  /* Accent for the flip button -- teal pops against both the coral edge and the
     dark page background. */
  --accent: #18b5a3;
  --accent-dark: #0f8578;
  /* Real cuboid dimensions. Walls span --d between the two faces. */
  --w: 320px;
  --h: 400px;
  --d: 56px;
  --half-d: 28px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2b2b2b;
  font-family: monospace;
}

/* Perspective container so the device flips as a real solid in 3D. */
.device-stage {
  position: relative;
  perspective: 1200px;
  perspective-origin: 50% 42%;
}

/* Soft ground shadow (does not rotate with the slab). */
.device-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -34px;
  width: 72%;
  height: 30px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5), transparent 70%);
  filter: blur(7px);
  z-index: -1;
}

/* The slab: a fixed-size cuboid resting at a slight 3/4 tilt. Flipping adds
   180deg to Y only, so the tilt is preserved and the real walls stay visible
   through the whole turn (genuine solid rotation, no billboard/snap). */
.device {
  position: relative;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg); /* totally face-on at rest */
  transition: transform 0.7s cubic-bezier(0.45, 0, 0.55, 1);
  will-change: transform;
}

/* Back rest is the MIRROR tilt about the 90deg edge-on point (180 - 16 = 164),
   not 180 + 16. That keeps the same left wall -- and its flip button -- toward the
   viewer's left in both the front and back views: the slab turns as if hinged on
   that left edge. */
.device.flipped {
  transform: rotateX(-4deg) rotateY(168deg);
}

/* The two faces of the slab. */
.device-face {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w);
  height: var(--h);
  border-radius: 0; /* truly squared corners */
  color: var(--frame);
  background-color: var(--shell);
  background-image: radial-gradient(var(--pattern) 1px, transparent 1px);
  background-size: 10px 10px;
  backface-visibility: hidden;
  overflow: visible; /* let the edge key overhang the left edge */
  display: flex;
  flex-direction: column;
  padding: 22px 20px;
}

.device-front {
  transform: translateZ(var(--half-d));
}

.device-back {
  transform: rotateY(180deg) translateZ(var(--half-d));
}

/* The four rim walls give the slab genuine thickness. Shaded top-light so they
   read as physical sides. */
.device-wall {
  position: absolute;
  background: linear-gradient(180deg, var(--shell-edge), var(--shell-edge-dark));
  transform-style: preserve-3d; /* so a button can protrude out of the wall plane */
}

.device-left,
.device-right {
  top: 0;
  left: calc((var(--w) - var(--d)) / 2);
  width: var(--d);
  height: var(--h);
}

.device-left {
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
}

.device-right {
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
}

.device-top,
.device-bottom {
  left: 0;
  top: calc((var(--h) - var(--d)) / 2);
  width: var(--w);
  height: var(--d);
}

.device-top {
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
  background: linear-gradient(180deg, var(--shell), var(--shell-edge));
}

.device-bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--h) / 2));
  background: linear-gradient(180deg, var(--shell-edge-dark), var(--shell-edge));
}

/* Flip button recessed INTO a side wall (the real edge). One on each side wall so
   one is always in view (a Y-flip swaps which side edge faces you). */
/* The flip control is a single teal button that WRAPS the left edge of the device: a
   front cap (`.flip-btn` on the front face) + a back cap (on the back face) + a band on the
   side wall (`.flip-wrap`) that joins them around the corner. The caps sit flush at the
   edge (no overhang) and face the viewer, so each is a reliable click target on its face;
   the wall band supplies the visual "wrap" from front to back. All share the teal gradient
   and vertical centering so they read as one continuous key.
   Front cap: on the front-left corner. */
.flip-btn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 96px;
  border: none;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  touch-action: manipulation;
  backface-visibility: hidden;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -3px 4px rgba(0, 0, 0, 0.25);
}

.flip-btn:active {
  filter: brightness(0.9);
}

/* Back cap: on the same physical (left) edge, which the mirror tilt shows on the viewer's
   right when looking at the back. */
.device-back .flip-btn {
  left: auto;
  right: 0;
  border-radius: 5px 0 0 5px;
}

/* The band on the side wall that joins the two caps around the corner -- the visible wrap.
   Decorative (the caps take the clicks). */
.flip-wrap {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 96px;
  background: linear-gradient(180deg, var(--accent), var(--accent-dark));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.screen {
  background: #9bbc0f;
  border: 8px solid var(--frame);
  border-radius: 10px;
  padding: 16px 12px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
  color: #17330a;
  cursor: pointer;
}

.lcd-status {
  font-size: 12px;
  min-height: 16px;
  margin-bottom: 8px;
  text-align: center;
}

.habitat {
  position: relative;
  width: 228px;
  height: 160px;
  margin: 0 auto 4px;
}

.scene-canvas {
  position: absolute;
  inset: 0;
  width: 228px;
  height: 160px;
  /* faded so the habitat reads as background and the pet stands out */
  opacity: 0.5;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.pet-canvas {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.pet-canvas.bounce {
  animation: bounce 0.4s ease;
}

@keyframes bounce {
  0% { translate: 0 0; }
  30% { translate: 0 -10px; }
  60% { translate: 0 0; }
  100% { translate: 0 0; }
}

.stage-label {
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  opacity: 0.7;
}

.progress-line {
  font-size: 11px;
  text-align: center;
  margin-bottom: 10px;
  opacity: 0.85;
}

.controls {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: center;
}

.controls button {
  font-family: monospace;
  font-size: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  background: var(--btn);
  color: var(--btn-text);
  box-shadow: 0 3px 0 var(--btn-lip);
  cursor: pointer;
}

.controls button:active {
  box-shadow: 0 1px 0 var(--btn-lip);
  transform: translateY(2px);
}

.controls button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* --- Back face --- */
.back-plate {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 6px;
  /* faux corner screws for device realism */
  background-image:
    radial-gradient(circle at 14px 14px, rgba(0, 0, 0, 0.18) 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 14px) 14px, rgba(0, 0, 0, 0.18) 2px, transparent 3px),
    radial-gradient(circle at 14px calc(100% - 14px), rgba(0, 0, 0, 0.18) 2px, transparent 3px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), rgba(0, 0, 0, 0.18) 2px, transparent 3px);
}

.back-label {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: lowercase;
  opacity: 0.55;
}

/* Recessed reset pinhole -- sunken look via inset shadow, clicky on press. */
.reset-pin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--shell-edge-dark);
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
}

.reset-pin::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}

.reset-pin:active {
  box-shadow:
    inset 0 4px 7px rgba(0, 0, 0, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15);
}

.reset-caption {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --shell: #b5716a;
    --shell-edge: #8f574f;
    --shell-edge-dark: #6f423c;
    --pattern: rgba(255, 255, 255, 0.08);
    --btn: #4a4a3f;
    --btn-text: #eaeadf;
  }
}