/* App habitat page — stripped from the Codex demo (only .habitat kept).
   The habitat fills the whole WebView; Flutter owns everything around it. */
:root {
  color-scheme: light;
}

* {
  box-sizing: border-box;
  /* Kill the Android WebView tap-highlight overlay — it flashed the whole
     scene on every tap (用户 v0.39 反馈：像按钮点击效果盖在画面上). */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent;
}

.habitat {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 22%),
    /* v0.43 天空:地面 = 1:1（草地从 50% 开始，画布 720×840，
       配合 pet.js bounds.minY=440） */
    linear-gradient(180deg, #cfe6e0 0%, #e9efe2 49%, #c9d7ad 50%, #a7be80 100%);
  border: 1px solid #ead7c8;
}

.habitat::before,
.habitat::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.habitat::before {
  left: -20px;
  right: -20px;
  bottom: 84px;
  height: 80px;
  background:
    radial-gradient(ellipse at 20% 100%, rgba(74, 124, 78, 0.22), transparent 58%),
    radial-gradient(ellipse at 72% 100%, rgba(59, 110, 70, 0.18), transparent 56%);
}

.habitat::after {
  left: 22px;
  top: 36px;
  width: 72px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 210px 54px 0 -10px rgba(255, 255, 255, 0.42);
}

#petCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  touch-action: none;
  cursor: pointer;
}

.floor {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  height: 86px;
  border-radius: 50%;
  background: rgba(128, 82, 63, 0.13);
  filter: blur(1px);
}

/* Static icon export reuses the exact habitat renderer without its scenery. */
.habitat.icon-mode {
  background: transparent;
  border: 0;
}

.habitat.icon-mode::before,
.habitat.icon-mode::after,
.habitat.icon-mode .floor {
  display: none;
}