:root {
  --shell1: #e6dcf7;   /* light lavender highlight */
  --shell2: #c9b8e8;   /* main lavender body */
  --shell3: #9b82c9;   /* deep lavender shade */
  --btn: #fbf7f0;      /* cream button face */
  --btn-d: #c3b4e2;    /* lavender-tinted button base */
  --btn-txt: #6d54a6;  /* purple label on cream */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%;
  background: radial-gradient(1200px 600px at 50% -10%, #2a2d24, #0d0f0a 70%);
  color: #eee;
  font-family: -apple-system, system-ui, "Segoe UI", sans-serif;
  overscroll-behavior: none; user-select: none; -webkit-user-select: none;
}
.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
}

/* ---- the egg device ---- */
.device {
  position: relative;
  width: min(90vw, 360px);
  aspect-ratio: 1 / 1.18;
  max-height: 88dvh;
  background:
    radial-gradient(125% 95% at 32% 20%, #efe8fb 0%, var(--shell2) 46%, var(--shell3) 100%);
  border-radius: 48% 48% 46% 46% / 44% 44% 56% 56%;
  /* softer, matte finish: gentle highlight + purple-tinted depth (not glossy) */
  box-shadow:
    inset 0 5px 16px rgba(255,255,255,.28),
    inset 0 -24px 40px rgba(74,54,112,.28),
    0 22px 44px rgba(45,30,75,.5),
    0 2px 0 rgba(255,255,255,.14);
  display: flex; flex-direction: column; align-items: center;
  padding: 7% 0 6%;
}
/* pastel polka-dot ornaments + fine speckle (soft, matte) */
.device::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(9px 9px at 22% 42%, rgba(255,255,255,.7), transparent 64%),
    radial-gradient(7px 7px at 78% 38%, rgba(255,240,180,.72), transparent 64%),
    radial-gradient(6px 6px at 64% 64%, rgba(255,214,232,.72), transparent 64%),
    radial-gradient(8px 8px at 31% 70%, rgba(205,240,255,.66), transparent 64%),
    radial-gradient(6px 6px at 84% 72%, rgba(255,255,255,.6), transparent 64%),
    radial-gradient(5px 5px at 16% 60%, rgba(255,240,180,.55), transparent 62%),
    radial-gradient(6px 6px at 50% 82%, rgba(255,214,232,.55), transparent 64%),
    radial-gradient(5px 5px at 72% 84%, rgba(205,240,255,.5), transparent 62%),
    radial-gradient(4px 4px at 40% 33%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(4px 4px at 88% 55%, rgba(255,255,255,.4), transparent 60%),
    /* fine speckle */
    radial-gradient(2px 2px at 46% 28%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(2px 2px at 60% 48%, rgba(255,255,255,.24), transparent 60%);
}
.device::after {
  content: ""; position: absolute; left: 14%; top: 7%; width: 42%; height: 20%;
  background: radial-gradient(closest-side, rgba(255,255,255,.32), transparent 78%);
  border-radius: 50%; filter: blur(3px); pointer-events: none;
}
/* keychain nub + metal ring on top — the iconic Tamagotchi silhouette.
   The nub's lower half overlaps the egg top (same shell gradient) so it reads
   as a molded protrusion; the metal ring floats above it. */
.keyring {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 34px; z-index: 1;
  background: linear-gradient(180deg, #efe8fb 0%, var(--shell2) 55%, var(--shell3) 100%);
  border-radius: 15px 15px 9px 9px;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.45), inset 0 -5px 7px rgba(74,54,112,.2);
}
.keyring::after { /* the metal ring poking above */
  content: ""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  width: 19px; height: 19px; border-radius: 50%;
  border: 4px solid #c4ccd3; background: transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,.6);
}

/* little sticker charms scattered over the shell */
.charms, .charms2 { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; overflow: hidden; }
.charms::before, .charms::after, .charms2::before, .charms2::after {
  position: absolute; line-height: 1; text-shadow: 0 1px 1px rgba(60,40,100,.22);
}
.charms::before { content: "★"; color: #ffd94d; font-size: 15px; left: 15%; top: 20%; transform: rotate(-14deg); }
.charms::after  { content: "♥"; color: #ff9dbb; font-size: 15px; right: 15%; top: 24%; transform: rotate(12deg); }
.charms2::before { content: "✿"; color: #ff8fb0; font-size: 13px; left: 20%; bottom: 20%; transform: rotate(-8deg); }
.charms2::after  { content: "✦"; color: #fff3c4; font-size: 12px; right: 19%; bottom: 24%; transform: rotate(10deg); }
.brand {
  font-weight: 800; letter-spacing: .5px; font-size: 15px;
  color: #5f4aa0; text-shadow: 0 1px 0 rgba(255,255,255,.35);
  margin: 2% 0 4%;
}
.brand .dot { color: #ff8fb0; }

/* ---- screen ---- */
.bezel {
  position: relative;
  width: 66%; aspect-ratio: 144 / 120;
  background: linear-gradient(#0c0d09, #24261d);
  border-radius: 16px;
  padding: 10px;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.15);
}
.lcd {
  width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: #a6c06f;
  border-radius: 6px;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}

/* ---- PIN gate: a lock-screen card over the whole device (always fits) ---- */
.overlay {
  position: absolute; inset: 0; z-index: 5; border-radius: inherit;
  background: rgba(10,13,8,.6);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 9%;
}
.overlay[hidden] { display: none; }
.pin-card {
  width: 100%; max-width: 230px;
  background: #26301a; color: #cfe0a8;
  border-radius: 18px; padding: 16px 16px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.pin-title { font-weight: 800; font-size: 15px; letter-spacing: 1px; }
.pin-dots { display: flex; gap: 12px; }
.pin-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #a6c06f; }
.pin-dots i.on { background: #a6c06f; }
.pin-msg { font-size: 11px; min-height: 13px; color: #ff9a9a; font-weight: 700; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.keypad button {
  font: 700 19px system-ui; padding: 12px 0; border: none; border-radius: 12px;
  background: #3a4a28; color: #eaf3d4; cursor: pointer;
}
.keypad button:active { transform: translateY(1px); background: #46592f; }
.keypad button.ghost { background: transparent; color: #9fb37a; box-shadow: inset 0 0 0 1px #4a5a34; }

/* ---- buttons ---- */
.buttons {
  margin-top: auto; display: flex; gap: 16%; align-items: center;
  padding-bottom: 2%;
}
.btn {
  width: 46px; height: 46px; border-radius: 50%; border: none;
  background: radial-gradient(120% 120% at 35% 25%, #ffffff, var(--btn) 50%, #ece4f7 100%);
  box-shadow: 0 5px 0 var(--btn-d), inset 0 2px 3px rgba(255,255,255,.85);
  color: var(--btn-txt); cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.btn span { font-weight: 800; font-size: 16px; line-height: 1; }
.btn small { font-size: 8px; opacity: .7; margin-top: 1px; }
.btn.mid { transform: translateY(10px); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--btn-d), inset 0 2px 3px rgba(255,255,255,.5); }
.btn.mid:active { transform: translateY(14px); }

/* ---- tools ---- */
.tools { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tool {
  font: 600 13px system-ui; padding: 9px 14px; border-radius: 999px; border: 1px solid #3a3f30;
  background: #1b1e16; color: #d7e4bb; cursor: pointer;
}
.tool.ghost { background: transparent; color: #9aa588; }
.tool:active { transform: translateY(1px); }
.tool.ok { border-color: #4a7; color: #8f8; }
.hint {
  max-width: 340px; text-align: center; font-size: 12px; line-height: 1.5;
  color: #b9c4a3; background: #1a1d15; border: 1px solid #333829; border-radius: 12px; padding: 10px 14px;
}
.hint[hidden], .tools[hidden] { display: none; }
.tool.ok { border-color: #7a5fb0; color: #c8b6ee; }

/* care history graph panel */
.panel {
  width: min(94vw, 360px);
  background: #1b1e16; border: 1px solid #33382b; border-radius: 14px;
  padding: 12px 14px 14px; color: #d7e4bb;
}
.panel[hidden] { display: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.panel-head .x { background: none; border: none; color: #9aa588; font-size: 15px; cursor: pointer; padding: 2px 6px; }
.panel canvas { width: 100%; height: auto; display: block; border-radius: 8px; background: #12140f; }
.panel-legend { display: flex; gap: 14px; align-items: center; font-size: 11px; margin-top: 8px; color: #b9c4a3; }
.panel-legend .lg-h { color: #e6b24d; }
.panel-legend .lg-p { color: #ff8fb0; }
.panel-legend .lg-w { margin-left: auto; color: #cdb8f0; font-weight: 700; }
.panel-empty { font-size: 12px; color: #9aa588; text-align: center; padding: 18px 6px 6px; line-height: 1.5; }
.panel-empty[hidden] { display: none; }

/* shop */
.panel-head b { color: #ffd94d; margin-left: 6px; }
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.shop-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #12140f; border: 1px solid #33382b; border-radius: 10px; padding: 8px 4px; cursor: pointer;
}
.shop-item canvas { image-rendering: pixelated; }
.shop-item .nm { font-size: 10px; color: #cdd8b6; text-align: center; line-height: 1.1; }
.shop-item .pr { font-size: 10px; font-weight: 700; color: #ffd94d; }
.shop-item.owned { border-color: #4a7a4a; }
.shop-item.equipped { border-color: #cdb8f0; box-shadow: 0 0 0 1px #cdb8f0 inset; }
.shop-item.equipped .pr { color: #cdb8f0; }
.shop-item.cant { opacity: .5; }
.shop-item .pr.have { color: #8ef0b0; }