/* The playable widget: a copy of app/src/main/res/layout/widget_pet.xml
   with 1 CSS px per dp. Dimensions come from res/values/dimens.xml, colours
   from res/values/colors.xml and the widget drawables. The whole thing is
   scaled with `zoom` on .pw-frame. */

.pw-frame {
  zoom: var(--pw-zoom, 0.95);
  width: 318px;
  margin-inline: auto;
  filter: drop-shadow(0 18px 24px rgba(5, 8, 16, 0.35));
  font-family: "Press Start 2P", monospace;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
@media (max-width: 859px) {
  .pw-frame { --pw-zoom: 1; }
}

/* ---- the mock phone around the widget ------------------------------ */

.phone {
  position: relative;
  background: linear-gradient(160deg, #2a3142, #11151f 40%, #0a0d15);
  border-radius: 38px;
  padding: 9px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 0 0 3px #05060d;
}
/* side keys: volume on the left, power on the right */
.phone::before, .phone::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: #1d2331;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.phone::before { left: -3px; top: 120px; height: 64px; }
.phone::after { right: -3px; top: 150px; height: 40px; }
.phone__screen {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  padding: 8px 20px 12px;
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(255, 255, 255, 0.28), transparent 60%),
    linear-gradient(165deg, #8fd0ff 0%, #7aa7ff 30%, #9b8cf3 62%, #f0a9d0 100%);
}
/* punch-hole camera */
.phone__screen::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #2b3140, #05060d 60%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.phone__status {
  position: relative;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 8px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  margin-bottom: 14px;
}
.phone__time { margin-right: auto; }
.phone__signal { display: flex; align-items: flex-end; gap: 1px; height: 9px; }
.phone__signal i { display: block; width: 2px; background: #fff; }
.phone__signal i:nth-child(1) { height: 3px; }
.phone__signal i:nth-child(2) { height: 5px; }
.phone__signal i:nth-child(3) { height: 7px; }
.phone__signal i:nth-child(4) { height: 9px; }
.phone__battery {
  display: block;
  width: 14px;
  height: 8px;
  border: 1.5px solid #fff;
  border-radius: 2px;
  padding: 1px;
  position: relative;
  margin-left: 3px;
}
.phone__battery::after { content: ""; position: absolute; right: -4px; top: 1.5px; width: 2px; height: 3px; background: #fff; border-radius: 1px; }
.phone__battery i { display: block; height: 100%; width: 80%; background: #fff; border-radius: 1px; }
/* a row of app icons and the search pill under the widget */
.phone__dock {
  position: relative;
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  padding: 0 6px;
}
.phone__app {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), inset 0 -3px 0 rgba(0, 0, 0, 0.12);
}
.phone__app svg { width: 20px; height: 20px; }
.phone__app--phone { background: linear-gradient(160deg, #4ade80, #16a34a); }
.phone__app--chat { background: linear-gradient(160deg, #60a5fa, #2563eb); }
.phone__app--camera { background: linear-gradient(160deg, #6b7280, #1f2937); }
.phone__app--peblings { background: #6cc3ff; overflow: hidden; }
.phone__app--peblings img { width: 38px; height: 38px; border-radius: 50%; image-rendering: auto; }
.phone__search {
  position: relative;
  margin-top: 14px;
  height: 36px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}
.phone__search i {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: conic-gradient(#4285f4 0 25%, #34a853 25% 50%, #fbbc05 50% 75%, #ea4335 75% 100%);
  -webkit-mask: radial-gradient(circle, transparent 3.5px, #000 4px);
  mask: radial-gradient(circle, transparent 3.5px, #000 4px);
}
.phone__search i + i {
  width: 8px;
  height: 14px;
  border-radius: 4px;
  background: #5f6368;
  -webkit-mask: none;
  mask: none;
}
.phone__home {
  position: relative;
  width: 80px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
}

.pw {
  position: relative;
  background: #101827;
  padding: 12px;
  display: flex;
  flex-direction: column;
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}
.pw * { box-sizing: border-box; }
.pw img { display: block; }
.pw .px { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---- scene ---------------------------------------------------------- */

.pw-scene {
  position: relative;
  height: 300px;
  background: #1F2435;
  overflow: hidden;
  cursor: pointer;
}
.pw-bg {
  position: absolute;
  inset: 0;
  background: url("assets/scenes/widget_bg_lawn.webp") center / cover no-repeat;
  image-rendering: pixelated;
}

/* Stat HUD: four [icon][bar] clusters (widget_stat_* dimens) */
.pw-hud {
  position: absolute;
  left: 2px;
  right: 6px;
  top: 4px;
  padding: 4px 0;
  display: flex;
  gap: 6px;
}
.pw-gauge {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
.pw-gauge img { width: 24px; height: 24px; flex: none; }
.pw-bar {
  flex: 1 1 0;
  height: 10px;
  background: #000;
  padding: 1px;
  position: relative;
}
.pw-bar.warn { background: #FF3B30; }
/* The sunken slot: shadow band top/left, highlight band bottom/right */
.pw-slot {
  position: absolute;
  inset: 1px;
  background: var(--empty);
  box-shadow: inset 2px 2px 0 var(--empty-shadow), inset -2px -2px 0 var(--empty-hi);
}
/* The raised fill: highlight band top/left, shadow band bottom (and right when full) */
.pw-fill {
  position: absolute;
  left: 1px;
  top: 1px;
  bottom: 1px;
  width: 0;
  background: var(--fill);
  box-shadow: inset 2px 2px 0 var(--fill-hi), inset 0 -2px 0 var(--fill-shadow);
}
.pw-fill.full { box-shadow: inset 2px 2px 0 var(--fill-hi), inset -2px -2px 0 var(--fill-shadow); }
.pw-gauge[data-stat="hunger"] .pw-bar {
  --fill: #E85A3C; --fill-hi: #FF7B5A; --fill-shadow: #A63A22;
  --empty: #3D2A24; --empty-hi: #4A332B; --empty-shadow: #2A1C18;
}
.pw-gauge[data-stat="happiness"] .pw-bar {
  --fill: #E8B83C; --fill-hi: #FFD45A; --fill-shadow: #A6801F;
  --empty: #3D3624; --empty-hi: #4A422B; --empty-shadow: #2A2518;
}
.pw-gauge[data-stat="cleanliness"] .pw-bar {
  --fill: #3CB8E8; --fill-hi: #5AD4FF; --fill-shadow: #1F7FA6;
  --empty: #243A3D; --empty-hi: #2B474A; --empty-shadow: #172629;
}
.pw-gauge[data-stat="energy"] .pw-bar {
  --fill: #4CC85A; --fill-hi: #7BE680; --fill-shadow: #2A8A3A;
  --empty: #243D28; --empty-hi: #2B4A30; --empty-shadow: #172A1B;
}

/* Status banner under the HUD */
.pw-banner {
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  padding: 4px;
  font-size: 9px;
  line-height: 1.4;
  text-align: center;
  color: #fff;
  background: #1E40AF;
  display: none;
}
.pw-banner.show { display: block; }

/* The sleep basket: 140x80, bottom-centred 2dp up */
.pw-bed {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 140px;
  height: 80px;
  transform: translateX(-50%);
  background: url("assets/sprites/bed.png") 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  opacity: 0;
  display: none;
}

/* The pet box: 96x141, bottom-centred 24dp up; the sprite is bottom-centred in it */
.pw-pet {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: 96px;
  height: 141px;
  transform: translateX(-50%);
}
.pw-sprite {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Shower drops: full-width strip, 132 tall, bottom-aligned */
.pw-water {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 132px;
  display: none;
  pointer-events: none;
}

/* Play ball: 28dp, on a strip whose ground line is 12dp up */
.pw-ball {
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 28px;
  height: 28px;
  background: 0 0 / auto 100% no-repeat;
  image-rendering: pixelated;
  display: none;
  pointer-events: none;
}

/* ---- level bar (level_bar_height 16, margin-top 6) ------------------- */

.pw-level {
  position: relative;
  height: 16px;
  margin-top: 6px;
  background: #000;
  padding: 1px;
  overflow: hidden;
}
.pw-level-track {
  position: absolute;
  inset: 1px;
  background: #1F2937;
  box-shadow: inset 0 2px 0 #0F172A;
}
.pw-level-fill {
  position: absolute;
  left: 1px;
  top: 1px;
  bottom: 1px;
  width: 10%;
  background: #60A5FA;
  box-shadow: inset 2px 2px 0 #93C5FD, inset -2px -2px 0 #2563EB;
}
.pw-level-fill.paused {
  background: #64748B;
  box-shadow: inset 2px 2px 0 #94A3B8, inset -2px -2px 0 #475569;
}
.pw-level .pw-lv, .pw-level .pw-xp {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 9px;
  line-height: 1;
  color: #fff;
  text-shadow: 1px 1px 0 #141821;
  white-space: nowrap;
}
.pw-level .pw-lv { left: 6px; }
.pw-level .pw-xp { right: 6px; }

/* ---- name row (margin-top 4; name 11dp white, age 8dp dimmed, 5dp gap) -- */

.pw-name {
  margin-top: 4px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  line-height: 1;
  min-height: 11px;
}
.pw-name .pw-age { font-size: 8px; color: #8C9BB5; }
.pw-name .pw-pname { font-size: 11px; color: #fff; }

/* ---- action row (margin-top 12, 64dp keys, 4dp apart) ----------------- */

.pw-keys {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 4px;
}
.pw-keys[hidden] { display: none; }
.pw-key {
  width: 64px;
  height: 64px;
  padding: 8px;
  border: 0;
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
  /* bg_widget_icon_button: four concentric ovals */
  background:
    radial-gradient(circle at center, #27324A 0 22px, #1C253A 22px 25px, #475272 25px 27px, #0D1424 27px 30px, #05060D 30px 32px, transparent 32px);
  transition: transform 40ms steps(1);
}
.pw-key:active { transform: translateY(1px); }
.pw-key.hold { visibility: hidden; }
.pw-key img, .pw-key .pw-icon { width: 48px; height: 48px; grid-area: 1 / 1; }
.pw-key .pw-ballicon {
  grid-area: 1 / 1;
  width: 34px;
  height: 34px;
  background: 0 0 / auto 100% no-repeat;
  image-rendering: pixelated;
}
.pw-key .pw-arrow {
  grid-area: 1 / 1;
  width: 10px;
  height: 16px;
  margin-bottom: 12px;
}
.pw-key .pw-arrow.up { display: none; }
.pw-key.asleep .pw-arrow.up { display: block; }
.pw-key.asleep .pw-arrow.down { display: none; }

.pw-caption {
  text-align: center;
  font-family: "VT323", monospace;
  font-size: 1.1rem;
  opacity: 0.8;
  margin: 0.75rem auto 0;
  max-width: 30rem;
}

/* ---- the editor ------------------------------------------------------- */

.pw-editor {
  width: 100%;
  padding: 1.25rem 1.5rem 1.5rem;
  background: #fff;
  color: #050810;
  display: grid;
  gap: 1rem;
  align-content: start;
}
.pw-editor-title {
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  margin: 0;
}
.pw-editor-row { display: grid; gap: 0.4rem; }
.pw-editor-label {
  font-family: "Press Start 2P", monospace;
  font-size: 0.55rem;
  color: #2563EB;
}
.pw-editor-name {
  font-family: "VT323", monospace;
  font-size: 1.4rem;
  padding: 0.3rem 0.5rem;
  border: 3px solid #050810;
  background: #e7f0f9;
  color: #050810;
  width: 100%;
  box-sizing: border-box;
}
.pw-editor-name:focus { outline: 3px solid #E8B83C; outline-offset: 0; }
.pw-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.pw-tile {
  padding: 3px;
  border: 3px solid #050810;
  background: #e7f0f9;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 0;
}
.pw-tile.selected { border-color: #E8B83C; box-shadow: inset 0 0 0 2px #050810; background: #fff6dc; }
.pw-tile-sprite {
  display: block;
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: auto 70.5px;      /* 94 rows at 0.75 px: the 64-px body fills the tile */
  background-position: 0 -22.5px;
  image-rendering: pixelated;
}
.pw-tile-wear {
  display: block;
  width: 50px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}
.pw-tile-swatch { display: block; width: 26px; height: 26px; border: 2px solid rgba(5, 8, 16, 0.25); }
.pw-tile-scene { display: block; width: 42px; height: 28px; background-size: cover; background-position: center; image-rendering: pixelated; }
.pw-tile-ball { display: block; width: 26px; height: 26px; background-repeat: no-repeat; background-size: auto 100%; image-rendering: pixelated; }