@font-face { font-family:"Poppins";src:url("assets/fonts/poppins-400.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap; }
@font-face { font-family:"Poppins";src:url("assets/fonts/poppins-600.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap; }
@font-face { font-family:"Poppins";src:url("assets/fonts/poppins-700.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap; }
@font-face { font-family:"Poppins";src:url("assets/fonts/poppins-800.woff2") format("woff2");font-style:normal;font-weight:800;font-display:swap; }
@font-face { font-family:"Roboto";src:url("assets/fonts/roboto-latin.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap; }

:root {
  color-scheme: dark;
  --ink: #07111c;
  --navy: #071a2d;
  --navy-2: #0b263b;
  --navy-3: #12364a;
  --line: rgba(157, 255, 240, 0.14);
  --cyan: #35e7d3;
  --cyan-soft: #9dfff0;
  --yellow: #ffd166;
  --red: #ff6174;
  --paper: #ecfff9;
  --muted: #7ea0aa;
  --device-radius: 44px;
  --font-ui: "Poppins", "Roboto", Arial, sans-serif;
  --font-copy: "Roboto", "Poppins", Arial, sans-serif;
  font-family: "SFMono-Regular", "SF Mono", "Roboto Mono", ui-monospace, monospace;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html,
body,
.page-shell,
.device-wrap,
.device,
.screen,
button {
  touch-action: manipulation;
}

html {
  min-height: 100%;
  background: var(--ink);
  overscroll-behavior: none;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--paper);
  background:
    linear-gradient(rgba(53, 231, 211, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 231, 211, 0.022) 1px, transparent 1px),
    radial-gradient(circle at 70% 20%, #10354a 0, #071a2d 32%, #07111c 70%);
  background-size: 34px 34px, 34px 34px, auto;
  overscroll-behavior: none;
  font-family: var(--font-copy);
}

button, input { font: inherit; font-family:var(--font-ui); }
h1,h2,h3,h4,strong,b,.panel-heading,.device-brand { font-family:var(--font-ui); }
p,.mood-message,.care-tip,.training-card small,.data-setting-row small,.data-setting-action small { font-family:var(--font-copy); }

button {
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

.ambient {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  opacity: .14;
}

.ambient-one { top: -170px; right: -140px; background: var(--cyan); }
.ambient-two { bottom: -220px; left: -180px; background: #3166ff; }

.page-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 440px) minmax(390px, 510px);
  justify-content: center;
  align-items: center;
  gap: clamp(32px, 8vw, 130px);
  min-height: 100dvh;
  padding: 56px max(28px, env(safe-area-inset-right)) 56px max(28px, env(safe-area-inset-left));
}

.intro { max-width: 430px; }

.eyebrow {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 25px;
  color: var(--cyan);
  font-size: 11px;
  letter-spacing: .18em;
}

.eyebrow span {
  width: 28px;
  height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
}

.intro h1 {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(45px, 5vw, 74px);
  line-height: .98;
  letter-spacing: -.06em;
  font-weight: 770;
}

.intro h1 em {
  color: var(--cyan);
  font-style: normal;
  font-weight: 500;
}

.intro > p {
  max-width: 390px;
  margin: 28px 0;
  color: #a8bdc3;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.7;
}

.intro-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.secondary-button,
.text-button {
  min-height: 42px;
  border-radius: 12px;
  padding: 0 16px;
}

.secondary-button {
  border: 1px solid var(--cyan);
  background: var(--cyan);
  color: #062435;
  font-weight: 800;
}

.text-button {
  border: 1px solid var(--line);
  background: rgba(7, 26, 45, .5);
  color: var(--cyan-soft);
  font-size: 11px;
}

.build-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 52px;
  padding-left: 15px;
  border-left: 2px solid var(--yellow);
  font-size: 10px;
  letter-spacing: .1em;
}

.build-note span { color: var(--muted); }

.device-wrap { display: flex; justify-content: center; }

.device {
  position: relative;
  width: min(100%, 440px);
  padding: 27px 24px 24px;
  overflow: hidden;
  border: 1px solid #204255;
  border-radius: var(--device-radius);
  background:
    linear-gradient(145deg, rgba(255,255,255,.05), transparent 24%),
    linear-gradient(160deg, #12364a 0, #071a2d 55%, #061421 100%);
  box-shadow:
    0 38px 90px rgba(0, 0, 0, .52),
    inset 0 1px rgba(255, 255, 255, .1),
    inset 0 -8px 20px rgba(0, 0, 0, .3);
}

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

.device::before {
  inset: 10px;
  border: 1px solid rgba(157, 255, 240, .08);
  border-radius: 36px;
}

.device::after {
  top: 105px;
  right: 6px;
  width: 4px;
  height: 80px;
  border-radius: 3px 0 0 3px;
  background: #1d5263;
}

.device-ridge {
  position: absolute;
  top: 0;
  left: 50%;
  width: 122px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 0 0 8px 8px;
  background: #1b4a59;
}

.device-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  height: 48px;
  padding: 0 9px;
}

.device-header > div:nth-child(2) { display: flex; gap: 6px; align-items: baseline; }
.device-header span { color: var(--cyan-soft); font-size: 13px; letter-spacing: .18em; }
.device-header strong { color: var(--yellow); font-size: 13px; letter-spacing: .12em; }
.device-header small { color: #5d8290; font-size: 8px; }

.brand-mark { display: flex; gap: 2px; align-items: end; width: 19px; height: 17px; }
.brand-mark i { display: block; width: 4px; background: var(--cyan); box-shadow: 0 0 8px rgba(53, 231, 211, .6); }
.brand-mark i:nth-child(1) { height: 7px; }
.brand-mark i:nth-child(2) { height: 14px; }
.brand-mark i:nth-child(3) { height: 10px; }

.screen-frame {
  position: relative;
  z-index: 2;
  padding: 9px;
  border: 1px solid #315264;
  border-radius: 25px;
  background: #020b12;
  box-shadow: inset 0 0 0 3px #071623, inset 0 0 20px #000;
}

.screen {
  --echo-primary: #35e7d3;
  --echo-light: #9dfff0;
  --echo-accent: #ffd166;
  --echo-shadow: #0b3851;
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(640px, 70dvh);
  min-height: 560px;
  overflow: hidden;
  border: 1px solid #17465a;
  border-radius: 17px;
  background: #dffcf2;
  color: #0c3443;
  box-shadow: inset 0 0 32px rgba(19, 111, 123, .12);
}

.start-menu {
  position: absolute;
  z-index: 60;
  inset: 0;
  overflow: hidden;
  padding: 26px 22px 20px;
  background:
    linear-gradient(rgba(87, 226, 220, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87, 226, 220, .055) 1px, transparent 1px),
    radial-gradient(circle at 50% 22%, rgba(48, 197, 207, .22), transparent 35%),
    linear-gradient(155deg, #071b31, #030c1d 72%);
  background-size: 22px 22px, 22px 22px, auto, auto;
  color: #e9fffb;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.start-menu.hidden { display: none; }

.start-view {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 0 12px;
  text-align: center;
}

.start-view[hidden],
.settings-view[hidden] {
  display: none !important;
}

.start-logo-wrap {
  position: relative;
  width: 112px;
  height: 112px;
  margin-bottom: 13px;
}

.start-logo {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 26px;
  object-fit: cover;
  box-shadow: 0 0 34px rgba(53, 231, 211, .25), 0 15px 28px rgba(0,0,0,.38);
}

.start-pulse {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(53,231,211,.38);
  border-radius: 34px;
  animation: start-pulse 2.2s ease-out infinite;
}

@keyframes start-pulse {
  0% { transform: scale(.88); opacity: .7; }
  75%, 100% { transform: scale(1.2); opacity: 0; }
}

.start-kicker {
  color: var(--cyan);
  font-size: 7px;
  letter-spacing: .22em;
}

.start-view h2 {
  margin: 7px 0 5px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 31px;
  letter-spacing: .08em;
}

.start-view h2 em { color: var(--yellow); font-style: normal; }
.start-view > p { max-width: 290px; min-height: 30px; margin: 0 0 16px; color: #8eb1bb; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 10px; line-height: 1.5; }

.start-actions { display: grid; width: min(100%, 292px); gap: 9px; }

.start-primary,
.start-secondary {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 9px;
  align-items: center;
  min-height: 61px;
  padding: 10px 13px;
  border-radius: 13px;
  text-align: left;
  transition: transform .14s ease, filter .14s ease, border-color .14s ease;
}

.start-primary { border: 1px solid rgba(53,231,211,.42); background: rgba(13,43,62,.88); color: #e5fffa; box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.start-secondary { border: 1px solid rgba(157,255,240,.24); background: rgba(15, 47, 67, .82); color: #e5fffa; }
.start-primary:active { transform: translateY(1px); background: linear-gradient(135deg, #20d8c8, #54efd9); color: #042638; }
.start-secondary:active { transform: translateY(1px); background: rgba(24,73,91,.95); }
.start-primary > span, .start-secondary > span { grid-row: 1 / 3; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: rgba(3,35,49,.12); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 15px; }
.start-primary > span, .start-secondary > span { background: rgba(53,231,211,.1); color: var(--cyan); }
.start-primary strong, .start-secondary strong { align-self: end; font-size: 11px; letter-spacing: .1em; }
.start-primary small, .start-secondary small { align-self: start; color: #789eaa; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 8px; }
.start-primary:focus-visible { background: linear-gradient(135deg, #20d8c8, #54efd9); color: #042638; }
.start-primary:focus-visible small, .start-primary:active small { color: rgba(4,38,56,.68); }
.start-primary:focus-visible > span, .start-primary:active > span { background: rgba(3,35,49,.12); color: #042638; }

@media (hover: hover) and (pointer: fine) {
  .start-primary:hover { transform: translateY(-2px); background: linear-gradient(135deg, #20d8c8, #54efd9); color: #042638; box-shadow: 0 10px 25px rgba(21,190,177,.2); }
  .start-primary:hover small { color: rgba(4,38,56,.68); }
  .start-primary:hover > span { background: rgba(3,35,49,.12); color: #042638; }
  .start-secondary:hover { transform: translateY(-2px); border-color: rgba(53,231,211,.45); background: rgba(24,73,91,.95); }
}
.start-version { margin-top: 17px; color: #4f7887; font-size: 6px; letter-spacing: .14em; }
.start-version strong { color: #8fb8c2; }

.settings-view { height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.settings-heading { display: grid; grid-template-columns: 38px 1fr; gap: 11px; align-items: center; margin-bottom: 21px; }
.settings-heading small { color: var(--cyan); font-size: 7px; letter-spacing: .18em; }
.settings-heading h2 { margin: 3px 0 0; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 27px; letter-spacing: -.04em; }
.settings-back { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(157,255,240,.22); border-radius: 11px; background: rgba(20,61,80,.75); color: var(--cyan-soft); font-size: 17px; }
.settings-list { display: grid; gap: 9px; }

.setting-row,
.setting-action {
  width: 100%;
  min-height: 64px;
  border: 1px solid rgba(157,255,240,.15);
  border-radius: 12px;
  background: rgba(13,43,62,.84);
  color: #e9fffb;
}

.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 13px; }
.setting-row strong, .setting-row small, .setting-action strong, .setting-action small { display: block; }
.setting-row strong, .setting-action strong { font-size: 10px; }
.setting-row small, .setting-action small { margin-top: 4px; color: #7197a3; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 8px; line-height: 1.35; }
.setting-version-row > b { color: var(--yellow); font-size: 9px; letter-spacing: .1em; }

.setting-toggle { display: grid; grid-template-columns: auto auto; gap: 6px; align-items: center; min-width: 73px; min-height: 32px; padding: 4px 8px 4px 5px; border: 1px solid #29bcae; border-radius: 18px; background: rgba(44,206,190,.16); color: var(--cyan-soft); }
.setting-toggle span { width: 22px; height: 22px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px rgba(53,231,211,.42); }
.setting-toggle b { font-size: 7px; letter-spacing: .08em; }
.setting-toggle[aria-checked="false"] { border-color: #365a6a; background: #102b3d; color: #718f99; }
.setting-toggle[aria-checked="false"] span { background: #4d6c78; box-shadow: none; }

.setting-action { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; padding: 11px 13px; text-align: left; }
.setting-action > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: rgba(53,231,211,.1); color: var(--cyan); font-size: 16px; }
.setting-action:disabled { cursor: wait; opacity: .62; }
.setting-danger { border-color:rgba(255,97,116,.3);background:rgba(71,28,43,.72); }
.setting-danger > span { background:rgba(255,97,116,.12);color:#ff9bab; }
.settings-note { margin: 15px 5px 0; color: #547987; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 8px; line-height: 1.55; text-align: center; }

.egg-selector {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 18px 14px 14px;
  background:
    linear-gradient(rgba(15, 90, 100, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 90, 100, .05) 1px, transparent 1px),
    linear-gradient(160deg, #edfff9, #caeee5);
  background-size: 18px 18px, 18px 18px, auto;
  transition: opacity .25s ease, transform .25s ease;
  overscroll-behavior: none;
  touch-action: none;
}

.egg-selector.hidden { display: none; }
.egg-selector-heading { text-align: center; }
.egg-selector-heading small { color: #178b82; font-size: 7px; letter-spacing: .18em; }
.egg-selector-heading h2 { margin: 5px 0 6px; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 22px; letter-spacing: -.04em; }
.egg-selector-heading p { max-width: 310px; margin: 0 auto; color: #5f8588; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 9px; line-height: 1.45; }

.egg-browser {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 9px;
  align-items: center;
  margin-top: 14px;
}

.egg-carousel { min-width: 0; }

.egg-arrow {
  display: grid;
  width: 42px;
  height: 74px;
  place-items: center;
  border: 1px solid #83c8be;
  border-radius: 13px;
  background: rgba(255,255,255,.62);
  color: #146b6b;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 7px 16px rgba(12, 80, 78, .1);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.egg-arrow:hover { transform: translateY(-2px); border-color: var(--egg-primary, #1a9c90); background: #f8fffd; }
.egg-arrow:active { transform: translateY(1px); }

.egg-option {
  width: min(100%, 238px);
  min-height: 238px;
  margin: 0 auto;
  padding: 20px 12px 15px;
  border: 2px solid var(--egg-primary);
  border-radius: 18px;
  background: #f8fffd;
  color: #174b54;
  text-align: center;
  box-shadow: 0 12px 26px rgba(12, 80, 78, .17);
}

.egg-option strong, .egg-option small { display: block; }
.egg-option strong { margin-top: 13px; font-size: 12px; }
.egg-option small { margin-top: 5px; color: #6c9294; font-size: 8px; letter-spacing: .12em; }

.egg-glyph {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--egg-primary) 30%, transparent));
}

.egg-position {
  margin-top: 8px;
  color: #438084;
  font-size: 7px;
  letter-spacing: .15em;
  text-align: center;
}

.egg-preview {
  min-height: 74px;
  margin-top: 11px;
  padding: 9px 10px;
  border: 1px solid #afd7cf;
  border-radius: 10px;
  background: rgba(255,255,255,.5);
  color: #527b7e;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 8px;
  line-height: 1.45;
  text-align: center;
}

.egg-preview strong { display: block; margin-bottom: 4px; color: #164c55; font-size: 11px; }
.egg-preview span { display: block; margin-top: 5px; color: #18877e; font-family: ui-monospace, monospace; font-size: 7px; }

.egg-confirm {
  min-height: 38px;
  margin-top: 9px;
  border: 1px solid #0c716c;
  border-radius: 10px;
  background: #0c716c;
  color: #eafff9;
  font-size: 9px;
  font-weight: 800;
}

.egg-confirm:disabled { cursor: not-allowed; border-color: #a8cbc4; background: #b9d6d0; color: #719491; }

.screen-noise {
  position: absolute;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(3, 40, 50, .15) 3px);
  mix-blend-mode: multiply;
}

.screen-status {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 31px;
  padding: 0 13px;
  border-bottom: 1px solid rgba(9, 63, 73, .16);
  background: rgba(230, 255, 247, .86);
  font-size: 8px;
  letter-spacing: .12em;
}

.screen-status > div { display: flex; align-items: center; gap: 5px; }
.screen-status > div:last-child { justify-content: flex-end; }
.screen-status time { font-weight: 800; font-size: 10px; }
.signal-dot { width: 6px; height: 6px; border-radius: 50%; background: #15a893; box-shadow: 0 0 5px #15a893; }
.screen-menu-button { display: grid; width: 22px; height: 22px; margin-left: 3px; place-items: center; border: 1px solid rgba(9,63,73,.18); border-radius: 6px; background: rgba(255,255,255,.46); color: #2d6b71; font-size: 9px; line-height: 1; }

.tab-panel {
  display: none;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  scrollbar-width: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tab-panel::-webkit-scrollbar { display: none; }
.tab-panel.active { display: flex; flex-direction: column; animation: panel-in .22s ease both; }
.tab-panel[data-panel="data"] { overflow-x: hidden; overflow-y: auto; touch-action: pan-y; }
.tab-panel[data-panel="data"] > * { flex-shrink: 0; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.habitat {
  --sky-top: #b9efe4;
  --sky-bottom: #e9fff8;
  --hill-back: #75b99a;
  --hill-front: #3f8a70;
  --leaf: #26775d;
  --trunk: #72543b;
  position: relative;
  flex: 1;
  min-height: 250px;
  overflow: hidden;
  perspective: 520px;
  isolation: isolate;
  background:
    linear-gradient(rgba(15, 90, 100, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 90, 100, .05) 1px, transparent 1px),
    linear-gradient(var(--sky-top), var(--sky-bottom));
  background-size: 18px 18px, 18px 18px, auto;
}

.forest-scene { position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none;perspective:420px;transform-style:preserve-3d;transition:filter 1s ease; }
.forest-scene::after { content:"";position:absolute;z-index:8;left:-15%;right:-15%;bottom:-19%;height:43%;transform:perspective(260px) rotateX(57deg);transform-origin:bottom center;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 34px),linear-gradient(var(--hill-front),color-mix(in srgb,var(--hill-front) 72%,#082b2c));box-shadow:inset 0 18px 30px rgba(255,255,255,.06),0 -10px 24px rgba(13,67,62,.14);opacity:.92; }
.sky-orb { position:absolute;z-index:0;top:42px;right:28px;width:29px;height:29px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#fff9bf 0 10%,#ffe26f 45%,#f5bd42 100%);box-shadow:0 0 22px rgba(255,214,77,.7);transition:.8s ease; }
.cloud { position:absolute;z-index:1;width:54px;height:13px;border-radius:18px;background:rgba(245,255,252,.58);box-shadow:14px -7px 0 -2px rgba(245,255,252,.58),27px 0 0 -3px rgba(245,255,252,.58);filter:blur(.2px);opacity:.72; }
.cloud-one { top:82px;left:-84px;animation:cloud-drift 25s linear infinite; }
.cloud-two { top:132px;left:-96px;transform:scale(.68);opacity:.42;animation:cloud-drift 34s -17s linear infinite; }
.sky-bird { position:absolute;z-index:2;top:116px;left:-28px;width:6px;height:4px;background:#164f5c;box-shadow:6px -3px 0 #164f5c,12px 0 0 #164f5c;opacity:0;animation:bird-cross 18s 4s linear infinite; }
.sky-bird::before,.sky-bird::after { content:"";position:absolute;top:-3px;width:7px;height:3px;background:#164f5c;animation:bird-wing .36s steps(2,end) infinite; }
.sky-bird::before { left:1px;transform:rotate(-22deg);transform-origin:right bottom; }
.sky-bird::after { left:9px;transform:rotate(22deg);transform-origin:left bottom; }
.depth-glow { position:absolute;z-index:0;left:4%;right:4%;bottom:22%;height:22%;border-radius:50%;background:radial-gradient(ellipse,rgba(226,255,235,.5),transparent 67%);filter:blur(12px);animation:depth-breathe 5s ease-in-out infinite; }
.hill { position:absolute;left:-12%;width:124%;border-radius:50% 50% 0 0;transform-origin:bottom center;transition:background .8s ease;filter:drop-shadow(0 -5px 8px rgba(19,74,68,.08)); }
.hill-back { z-index:1;bottom:70px;height:123px;background:var(--hill-back);opacity:.42;clip-path:polygon(0 62%,12% 28%,25% 60%,39% 18%,55% 65%,72% 31%,87% 58%,100% 25%,100% 100%,0 100%);transform:translateZ(-45px) scale(1.12);filter:blur(.7px) saturate(.72); }
.hill-mid { z-index:2;bottom:43px;height:108px;background:color-mix(in srgb,var(--hill-back) 58%,var(--hill-front));opacity:.62;clip-path:polygon(0 58%,16% 22%,30% 64%,47% 29%,61% 61%,78% 18%,100% 57%,100% 100%,0 100%);transform:translateZ(-18px) scale(1.05); }
.hill-front { z-index:3;bottom:19px;height:88px;background:var(--hill-front);opacity:.86;clip-path:polygon(0 58%,18% 17%,35% 68%,52% 28%,68% 64%,84% 20%,100% 58%,100% 100%,0 100%);transform:translateZ(8px) scale(1.02);box-shadow:inset 0 10px 18px rgba(255,255,255,.07); }
.forest-floor { position:absolute;z-index:7;left:-8%;right:-8%;bottom:-6px;height:62px;background:linear-gradient(175deg,color-mix(in srgb,var(--hill-front) 78%,#b9f7cd),color-mix(in srgb,var(--hill-front) 62%,#062d2c));clip-path:polygon(0 32%,8% 20%,16% 34%,25% 18%,36% 31%,48% 12%,59% 29%,70% 16%,81% 33%,91% 17%,100% 28%,100% 100%,0 100%);box-shadow:0 -12px 23px rgba(28,101,74,.2); }
.tree { position:absolute;z-index:5;bottom:38px;width:9px;height:46px;background:var(--trunk);box-shadow:8px 5px 9px rgba(7,42,35,.22);transform-origin:bottom center;filter:drop-shadow(0 6px 5px rgba(8,44,36,.18)); }
.tree::before, .tree::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); background: var(--leaf); clip-path: polygon(50% 0,100% 100%,0 100%); }
.tree::before { bottom: 19px; width: 48px; height: 47px; }
.tree::after { bottom: 35px; width: 35px; height: 36px; filter: brightness(1.12); }
.tree-one { left:5%;bottom:36px;transform:translateZ(18px) scale(1.08); }
.tree-two { right:7%;bottom:34px;transform:translateZ(25px) scale(1.28); }
.tree-three { left:24%;bottom:57px;transform:translateZ(-20px) scale(.61);opacity:.62;filter:blur(.35px); }
.tree-four { right:28%;bottom:51px;transform:translateZ(-10px) scale(.72);opacity:.74; }
.season-spring { --sky-top:#b9f0e6;--sky-bottom:#effff8;--hill-back:#86c89f;--hill-front:#4e9973;--leaf:#3a8e64; }
.season-summer { --sky-top:#8ddce7;--sky-bottom:#efffc7;--hill-back:#72bd72;--hill-front:#2f8a55;--leaf:#177148; }
.season-fall { --sky-top:#d98692;--sky-bottom:#ffd1a8;--hill-back:#c06e68;--hill-front:#934b50;--leaf:#d36337; }
.season-winter { --sky-top:#bfd7e6;--sky-bottom:#f4fbff;--hill-back:#a7bfca;--hill-front:#75949d;--leaf:#648694; }
.time-night { --sky-top:#07182d;--sky-bottom:#123c52;--hill-back:#173c46;--hill-front:#102f35;--leaf:#102d34; }
.time-night .forest-scene { filter: saturate(.72); }
.time-night .sky-orb { top: 28px; width: 24px; height: 24px; background: #e9f4ff; box-shadow: 7px 0 0 #123c52,0 0 19px rgba(210,236,255,.48); }
.time-night .pixel-stars i { background: #c8f7ff; box-shadow: 0 0 5px #c8f7ff; }
.weather-heat .forest-scene { filter: sepia(.2) saturate(1.22) brightness(1.06); }
.weather-heat .sky-orb { transform: scale(1.24); box-shadow: 0 0 35px rgba(255,126,45,.82); }
.weather-rain .sky-orb { opacity:0;transform:scale(.7); }
.weather-rain .cloud { background:rgba(76,105,119,.72);box-shadow:14px -7px 0 -2px rgba(76,105,119,.72),27px 0 0 -3px rgba(76,105,119,.72);opacity:.9; }
.weather-rain .forest-scene { filter:saturate(.72) brightness(.82); }
.weather-wind .tree { animation: tree-sway 1.4s ease-in-out infinite alternate; }
.weather-wind .tree-two { animation-delay: -.45s; }

@keyframes depth-breathe { 50%{opacity:.58;transform:scaleX(1.05)} }
@keyframes cloud-drift { from{transform:translateX(0)}to{transform:translateX(560px)} }
@keyframes bird-cross { 0%,12%{opacity:0;transform:translate(0,0) scale(.75)}15%{opacity:.75}48%{opacity:.75;transform:translate(430px,34px) scale(.75)}51%,100%{opacity:0;transform:translate(455px,38px) scale(.75)} }
@keyframes bird-wing { 50%{top:1px} }

.weather-layer { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
.season-layer { position:absolute;z-index:3;inset:0;overflow:hidden;pointer-events:none; }
.season-fall .fall-leaf { position:absolute;top:-12px;left:calc(2% + var(--leaf-index) * 9%);width:7px;height:5px;border-radius:5px 0 5px 0;background:#d96836;box-shadow:3px 2px 0 #f0a43c;animation:fall-leaf-drift calc(4.4s + var(--leaf-index) * .16s) linear infinite;animation-delay:calc(var(--leaf-index) * -.43s); }
.season-winter .hill::after { content:"";position:absolute;inset:0;background:linear-gradient(178deg,rgba(255,255,255,.94) 0 9%,rgba(225,243,250,.5) 10% 16%,transparent 17%);clip-path:inherit; }
.season-winter .forest-floor { background:linear-gradient(175deg,#f6fdff,#c9e3ea 58%,#8bb2bd);box-shadow:0 -12px 23px rgba(224,246,255,.72); }
.season-winter .tree::before,.season-winter .tree::after { background:linear-gradient(154deg,#f7fdff 0 19%,#8aaab0 21% 100%); }
.season-winter .forest-scene::after { background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 34px),linear-gradient(#eef9fc,#afcbd2); }
.weather-rain .weather-layer i { position: absolute; top: -18px; left: calc(4% + var(--particle) * 7%); width: 2px; height: 18px; background: rgba(67,143,191,.58); transform: rotate(12deg); animation: rain-fall .9s linear infinite; animation-delay: calc(var(--particle) * -.11s); }
.weather-snow .weather-layer i { position: absolute; top: -10px; left: calc(3% + var(--particle) * 7%); width: 5px; height: 5px; background: #fff; box-shadow: 0 0 4px #fff; animation: snow-fall 3.4s linear infinite; animation-delay: calc(var(--particle) * -.23s); }
.weather-wind .weather-layer i { position: absolute; top: calc(26% + var(--particle) * 12%); left: -25%; width: 50px; height: 2px; background: linear-gradient(90deg,transparent,rgba(238,255,246,.75),transparent); animation: wind-dash 1.65s ease-in infinite; animation-delay: calc(var(--particle) * -.31s); }
.weather-heat .weather-layer i { position: absolute; inset: 15% calc(18% + var(--particle) * 13%) 22%; width: 20px; border-left: 2px solid rgba(255,185,71,.22); filter: blur(1px); animation: heat-wave 1.2s ease-in-out infinite alternate; }
@keyframes fall-leaf-drift { 0%{transform:translate3d(0,-12px,0) rotate(0);opacity:0}8%{opacity:.9}45%{transform:translate3d(38px,48vh,0) rotate(210deg)}100%{transform:translate3d(-18px,96vh,0) rotate(520deg);opacity:.25} }

.waste-layer { position: absolute; z-index: 5; left: 8%; right: 8%; bottom: 38px; height: 42px; pointer-events: none; }
.waste-layer[hidden] { display: none; }
.waste-pile { position: absolute; bottom: 0; width: 32px; height: 30px; border: 0; background: transparent; pointer-events: auto; filter: drop-shadow(0 2px 1px rgba(48,35,20,.2)); }
.waste-pile:nth-child(1) { left: 5%; }.waste-pile:nth-child(2) { right: 7%; }.waste-pile:nth-child(3) { left: 21%; bottom: 8px; }
.waste-pile i { position: absolute; bottom: 2px; left: 5px; width: 22px; height: 8px; border-radius: 50% 50% 3px 3px; background: #74502b; }
.waste-pile i:nth-child(2) { bottom: 8px; left: 9px; width: 15px; height: 8px; }.waste-pile i:nth-child(3) { bottom: 14px; left: 13px; width: 8px; height: 7px; }
.waste-pile span { position: absolute; top: -3px; right: 0; display: grid; width: 13px; height: 13px; place-items: center; border-radius: 50%; background: #f5bd45; color: #3e3118; font-size: 7px; animation: waste-alert .8s steps(2,end) infinite; }

.idle-effect { position: absolute; z-index: 6; top: 47%; left: 65%; padding: 4px 6px; border-radius: 6px; background: rgba(255,255,255,.8); color: #176b69; font-size: 10px; font-weight: 900; opacity: 0; transform: translateY(5px); pointer-events: none; }
.idle-effect.show { opacity: 1; transform: translateY(0); animation: effect-pop .35s ease both; }
.idle-effect.fail-effect, .idle-effect.angry-effect { color: #9a3535; }
.idle-effect.success-effect { color: #087f68; background: #eaffb8; }

.training-animation { position: absolute; z-index: 8; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 66% 53%,rgba(53,231,211,.25),transparent 28%),linear-gradient(rgba(3,25,38,.08),rgba(3,25,38,.28)); }
.training-animation[hidden] { display: none !important; }
.training-animation > small { position: absolute; top: 96px; left: 50%; width: max-content; max-width: 80%; transform: translateX(-50%); padding: 5px 8px; border: 1px solid rgba(53,231,211,.42); border-radius: 6px; background: rgba(5,38,50,.86); color: #bafff4; font-size: 7px; letter-spacing: .12em; text-align: center; animation: training-label-in .35s ease both; }
.training-target { position: absolute; top: 78%; right: 9%; display: grid; width: 52px; height: 62px; place-items: center; transform: translateY(-50%); border: 3px solid #276a70; border-radius: 50% 50% 10px 10px; background: linear-gradient(#d6fff5,#8ac7bc); color: #174e58; box-shadow: 0 7px 0 rgba(13,61,67,.22),inset 0 0 0 5px rgba(255,255,255,.35); }
.training-target::before { content:""; position:absolute; bottom:-14px; width:64px; height:8px; border-radius:50%; background:rgba(7,38,44,.25); }
.training-target span { font-size: 15px; font-weight: 900; }
.training-animation[data-action="train_focus"] .training-target { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle,#fff 0 12%,#7ff4e1 14% 29%,#176b79 31% 47%,#cafff6 49%); box-shadow: 0 0 24px rgba(53,231,211,.65); }
.training-animation[data-action="train_focus"] .training-target span { opacity: 0; }
.training-animation[data-action="train_spar"] .training-target { border-radius: 16px; background: linear-gradient(145deg,#dfcaff,#8063b6); color:#34204f; }
.training-projectile { position: absolute; z-index: 2; top: 79%; left: 49%; width: 15px; height: 7px; border-radius: 50%; background: var(--echo-accent); box-shadow: 0 0 8px var(--echo-accent),0 0 18px var(--echo-primary); opacity: 0; }
.training-impact { position: absolute; z-index: 3; top: 78%; right: 13%; width: 15px; height: 15px; border: 4px solid #fff08c; border-radius: 50%; opacity: 0; }
.training-animation > strong { position: absolute; z-index: 9; left: 50%; bottom: calc(18% + var(--echo-half-height, 69px) + 76px); width:max-content;max-width:82%;transform: translate(-50%,12px) scale(.75); padding: 8px 13px; border: 2px solid #0d8d7f; border-radius: 8px; background: #e9fff7; color: #0b6e65; box-shadow: 0 5px 0 rgba(8,87,78,.25),0 0 22px rgba(53,231,211,.45); font-size: 17px; letter-spacing: .08em;line-height:1;white-space:nowrap; opacity: 0; }
.training-animation.failure > strong { border-color:#a34b55;background:#fff0ef;color:#a13f4d;box-shadow:0 5px 0 rgba(105,34,42,.22); }
.training-animation.success .training-projectile { animation: training-projectile-hit .72s .45s ease-in forwards; }
.training-animation.failure .training-projectile { animation: training-projectile-miss .9s .45s ease-out forwards; }
.training-animation.success .training-impact { animation: training-impact-flash .55s 1.08s ease-out both; }
.training-animation.success .training-target { animation: training-target-hit .42s 1.05s ease 2; }
.training-animation.failure .training-target { animation: training-target-dodge .7s .85s ease both; }
.training-animation > strong { animation: training-result-pop .38s 1.48s ease-out forwards; }

.care-animation { position:absolute;z-index:8;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 50% 51%,rgba(255,255,255,.18),transparent 31%),linear-gradient(rgba(3,25,38,.04),rgba(3,25,38,.22)); }
.care-animation[hidden] { display:none !important; }
.care-animation > small { position:absolute;z-index:6;top:96px;left:50%;width:max-content;max-width:82%;transform:translateX(-50%);padding:5px 8px;border:1px solid rgba(53,231,211,.42);border-radius:6px;background:rgba(5,38,50,.86);color:#bafff4;font-size:7px;letter-spacing:.12em;text-align:center;animation:training-label-in .35s ease both; }
.care-animation > strong { position:absolute;z-index:9;left:50%;bottom:calc(18% + var(--echo-half-height, 69px) + 76px);width:max-content;max-width:82%;transform:translate(-50%,12px) scale(.75);padding:8px 13px;border:2px solid #0d8d7f;border-radius:8px;background:#e9fff7;color:#0b6e65;box-shadow:0 5px 0 rgba(8,87,78,.25),0 0 22px rgba(53,231,211,.45);font-size:16px;letter-spacing:.08em;line-height:1;white-space:nowrap;opacity:0;animation:care-result-pop .4s 1.62s ease-out forwards; }
.care-prop { position:absolute;z-index:3;top:79%;right:9%;width:55px;height:25px;transform:translateY(-50%) scale(.7);border:3px solid #155963;border-radius:5px 5px 24px 24px;background:#d8fff6;box-shadow:0 7px 0 rgba(14,72,76,.2),inset 0 -7px 0 rgba(65,177,166,.25);opacity:0;animation:care-prop-arrive .42s .15s ease-out forwards; }
.care-prop::before { content:"";position:absolute;left:5px;right:5px;top:-8px;height:12px;border:2px solid #155963;border-radius:50%;background:repeating-linear-gradient(90deg,#f1ba45 0 6px,#df773e 6px 11px,#76a957 11px 15px); }
.care-prop::after { content:"";position:absolute;left:50%;bottom:-11px;width:46px;height:7px;transform:translateX(-50%);border-radius:50%;background:rgba(7,38,44,.22); }
.care-prop > i { display:none; }
.care-particle { position:absolute;z-index:5;top:78%;right:24%;width:9px;height:9px;border:2px solid #7d4c20;background:#f3b544;opacity:0;transform:rotate(45deg); }
.meal .care-particle,.snack .care-particle { animation:care-food-bite .54s ease-in forwards; }
.meal .care-particle-two,.snack .care-particle-two { animation-delay:.72s; }
.meal .care-particle-three,.snack .care-particle-three { animation-delay:1.17s; }
.meal .care-particle-two { background:#6ea959; }
.meal .care-particle-three { background:#e67f48; }
.care-animation[data-food="meat"] .care-prop::before { background:repeating-linear-gradient(90deg,#8f3f34 0 8px,#d87951 8px 15px,#fff1bd 15px 18px); }
.care-animation[data-food="burger"] .care-prop::before { background:linear-gradient(#e8a746 0 28%,#6fa04a 29% 42%,#8e3f32 43% 66%,#efc35e 67%); }
.care-animation[data-food="noodles"] .care-prop::before { background:repeating-linear-gradient(90deg,#f0cf66 0 3px,#c27d3f 3px 5px); }
.care-animation[data-food="onigiri"] .care-prop::before { background:linear-gradient(135deg,#f5fff9 0 58%,#254c48 59% 74%,#f5fff9 75%); }
.care-animation[data-food="coke"] .care-prop,.care-animation[data-food="water"] .care-prop,.care-animation[data-food="orange"] .care-prop { width:27px;height:47px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.75),rgba(255,255,255,.15)),#b04b45; }
.care-animation[data-food="water"] .care-prop { background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,.18)),#62bcd5; }
.care-animation[data-food="orange"] .care-prop { background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,.18)),#ee9b3e; }
.care-animation[data-food="coke"] .care-prop::before,.care-animation[data-food="water"] .care-prop::before,.care-animation[data-food="orange"] .care-prop::before { left:5px;right:5px;top:-8px;height:7px;border-radius:3px;background:#efffff; }
.snack .care-prop { width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2ad 0 8%,transparent 9%),radial-gradient(circle at 62% 62%,#7b4e38 0 8%,transparent 9%),#e2a857;box-shadow:0 0 0 4px rgba(255,239,171,.4),0 7px 0 rgba(14,72,76,.18); }
.snack .care-prop::before { display:none; }
.snack .care-particle { border-radius:50%;background:#e2a857; }

.clean-waste .care-prop { top:78%;right:8%;width:38px;height:48px;border:3px solid #316775;border-radius:5px 5px 12px 12px;background:linear-gradient(#efffff 0 45%,#9bdedc 46%);box-shadow:0 6px 0 rgba(14,72,76,.24); }
.clean-waste .care-prop::before { left:-8px;right:-8px;top:30px;height:22px;border:3px solid #316775;border-radius:7px 7px 18px 18px;background:radial-gradient(ellipse,#70d9e0 0 40%,#e8ffff 42% 66%,#316775 68%);animation:care-flush-water .7s 1.05s linear 2; }
.clean-waste .care-prop::after { bottom:-10px;width:54px; }
.clean-waste .care-prop > i { display:block;position:absolute;z-index:2;left:50%;top:35px;width:8px;height:8px;transform:translate(-50%,-50%);border:2px dotted #fff;border-radius:50%;animation:care-flush-swirl .75s 1.02s linear 2; }
.clean-waste .care-particle { top:auto;right:auto;bottom:23%;width:13px;height:10px;border:0;border-radius:50% 50% 3px 3px;background:#704a28;box-shadow:4px -5px 0 -1px #704a28;transform:none;animation:care-waste-flush .85s ease-in forwards; }
.clean-waste .care-particle-one { left:15%;animation-delay:.38s; }
.clean-waste .care-particle-two { left:27%;bottom:29%;animation-delay:.62s; }
.clean-waste .care-particle-three { left:39%;animation-delay:.86s; }

.clean-wash .care-prop { top:70%;right:8%;width:46px;height:30px;border-radius:19px 19px 5px 5px;background:#8dd8df; }
.clean-wash .care-prop::before { left:8px;right:auto;top:20px;width:4px;height:55px;border:0;border-radius:0;background:#316775;transform:rotate(22deg);transform-origin:top; }
.clean-wash .care-prop > i { display:block;position:absolute;left:8px;top:28px;width:4px;height:4px;border-radius:50%;background:#ddffff;box-shadow:9px 9px #ddffff,18px 2px #ddffff,5px 22px #ddffff,21px 20px #ddffff;animation:care-shower-drops .6s .35s linear 3; }
.clean-wash .care-particle { right:auto;border:2px solid #dfffff;border-radius:50%;background:rgba(124,225,226,.5);animation:care-bubble-rise 1.3s ease-out forwards; }
.clean-wash .care-particle-one { left:43%;top:78%; }
.clean-wash .care-particle-two { left:52%;top:69%;animation-delay:.28s; }
.clean-wash .care-particle-three { left:60%;top:81%;animation-delay:.52s; }

.medicine .care-prop { top:78%;right:9%;width:34px;height:48px;border:3px solid #315e6b;border-radius:6px 6px 10px 10px;background:linear-gradient(#efffff 0 24%,#75d9b1 25% 78%,#eafff6 79%);box-shadow:0 6px 0 rgba(14,72,76,.22); }
.medicine .care-prop::before { left:6px;right:6px;top:-11px;height:10px;border:2px solid #315e6b;border-radius:3px;background:#f4fdff; }
.medicine .care-prop::after { content:"+";left:50%;bottom:11px;width:auto;height:auto;transform:translateX(-50%);background:transparent;color:#fff;font-size:18px;font-style:normal;font-weight:900; }
.medicine .care-particle { top:78%;right:23%;width:17px;height:8px;border:2px solid #315e6b;border-radius:8px;background:linear-gradient(90deg,#fff 0 50%,#63d7ae 51%);transform:rotate(-20deg);animation:care-pill-swallow .8s .48s ease-in forwards; }
.medicine .care-particle-two,.medicine .care-particle-three { display:none; }
.care-heal { display:none;position:absolute;z-index:6;color:#dffff0;font-size:18px;font-style:normal;font-weight:900;text-shadow:0 0 8px #19c78f;opacity:0; }
.medicine .care-heal { display:block;animation:care-heal-rise .85s 1.15s ease-out forwards; }
.medicine .care-heal-one { left:43%;top:78%; }
.medicine .care-heal-two { left:54%;top:72%;animation-delay:1.32s; }
.medicine .care-heal-three { left:61%;top:83%;animation-delay:1.48s; }

.play-animation { position:absolute;z-index:8;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(circle at 50% 78%,rgba(255,226,105,.2),transparent 27%); }
.play-animation[hidden] { display:none !important; }
.play-animation > small { position:absolute;z-index:7;top:96px;left:50%;width:max-content;max-width:82%;transform:translateX(-50%);padding:5px 8px;border:1px solid rgba(53,231,211,.42);border-radius:6px;background:rgba(5,38,50,.86);color:#bafff4;font-size:7px;letter-spacing:.12em;text-align:center;animation:training-label-in .35s ease both; }
.play-animation > strong { position:absolute;z-index:9;left:50%;bottom:calc(18% + var(--echo-half-height, 69px) + 76px);width:max-content;max-width:82%;transform:translate(-50%,12px) scale(.75);padding:8px 13px;border:2px solid #d9a82d;border-radius:8px;background:#fff8c7;color:#826012;box-shadow:0 5px 0 rgba(112,83,20,.2),0 0 22px rgba(255,220,95,.42);font-size:16px;letter-spacing:.08em;line-height:1;white-space:nowrap;opacity:0;animation:play-result-pop .4s 2.25s ease-out forwards; }
.play-ball { display:none;position:absolute;z-index:9;left:49%;top:74%;width:21px;height:21px;border:3px solid #234e63;border-radius:50%;background:conic-gradient(#ffca4c 0 25%,#55ddcf 0 50%,#ff7790 0 75%,#fff3ba 0);box-shadow:0 5px 8px rgba(13,62,69,.24); }
.play-ball .hidden { display:none; }
.play-ball.play-ball { image-rendering:pixelated; }
.play-ball + .play-trail { display:none; }
.play-ball.active { display:block; }
.play-ball::after { content:"";position:absolute;left:4px;top:4px;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.75); }
.play-ball { transform:translate(-50%,-50%); }
.play-ball.playing { display:block; }
.play-animation.play-ball .play-ball { display:block;animation:play-ball-bounce 2.45s .18s cubic-bezier(.35,.02,.45,1) both; }
.play-trail { display:none;position:absolute;z-index:6;top:78%;left:50%;width:16px;height:3px;border-radius:50%;background:rgba(255,255,255,.75);opacity:0; }
.play-animation.play-dash .play-trail,.play-animation.play-jump .play-trail { display:block;animation:play-trail 1.15s ease-out 2; }
.play-trail-two { margin-top:10px;animation-delay:.16s !important; }
.play-trail-three { margin-top:-10px;animation-delay:.31s !important; }
.echo-sprite.play-jump { z-index:9;animation:play-pet-jump 2.85s ease-in-out both; }
.echo-sprite.play-dash { z-index:9;animation:play-pet-dash 3.05s ease-in-out both; }
.echo-sprite.play-ball-chase { z-index:10;animation:play-pet-ball 2.9s ease-in-out both; }
.echo-sprite.play-forest-run { z-index:6;animation:play-pet-forest 3.1s ease-in-out both; }

@keyframes play-pet-jump { 0%,100%{transform:translate(-50%,-50%)}15%{transform:translate(-115%,-92%) rotate(-8deg)}31%{transform:translate(-20%,-118%) rotate(7deg)}49%{transform:translate(45%,-76%) rotate(-5deg)}68%{transform:translate(-82%,-105%) rotate(6deg)}84%{transform:translate(-30%,-72%) rotate(-4deg)} }
@keyframes play-pet-dash { 0%,100%{transform:translate(-50%,-50%);opacity:1}24%{transform:translate(-265%,-52%);opacity:1}25%{transform:translate(-285%,-52%);opacity:0}30%{transform:translate(190%,-52%);opacity:0}35%{opacity:1}61%{transform:translate(-15%,-62%);opacity:1}77%{transform:translate(90%,-82%) rotate(6deg)} }
@keyframes play-pet-ball { 0%,100%{transform:translate(-50%,-50%)}18%{transform:translate(-80%,-72%) rotate(-6deg)}38%{transform:translate(15%,-91%) rotate(7deg)}58%{transform:translate(58%,-52%) rotate(-5deg)}77%{transform:translate(-22%,-78%) rotate(5deg)} }
@keyframes play-pet-forest { 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1;filter:drop-shadow(0 12px 12px rgba(15,93,100,.15))}34%{transform:translate(-135%,-82%) scale(.7);opacity:.9}52%{transform:translate(-92%,-155%) scale(.36);opacity:.18;filter:blur(1px)}66%{transform:translate(72%,-147%) scale(.38);opacity:.22}83%{transform:translate(28%,-69%) scale(.76);opacity:1} }
@keyframes play-ball-bounce { 0%{transform:translate(-50%,-50%) scale(.3);opacity:0}12%{opacity:1}29%{transform:translate(-290%,-310%) rotate(160deg)}50%{transform:translate(310%,-30%) rotate(390deg)}70%{transform:translate(70%,-260%) rotate(590deg)}91%{transform:translate(-250%,35%) rotate(760deg);opacity:1}100%{transform:translate(-280%,45%) rotate(800deg);opacity:0} }
@keyframes play-trail { 0%{opacity:0;transform:translateX(100px) scaleX(.3)}28%{opacity:.75}100%{opacity:0;transform:translateX(-125px) scaleX(2.8)} }
@keyframes play-result-pop { from{opacity:0;transform:translate(-50%,12px) scale(.75)}to{opacity:1;transform:translate(-50%,0) scale(1)} }

.sleep-veil { position:absolute;z-index:7;inset:0;overflow:hidden;pointer-events:none;background:linear-gradient(rgba(1,7,20,.72),rgba(2,13,29,.82));animation:sleep-veil-in .65s ease both; }
.sleep-veil[hidden] { display:none !important; }
.sleep-veil::before { content:"";position:absolute;inset:0;background:radial-gradient(circle at 48% 50%,rgba(72,118,153,.18),transparent 33%);animation:sleep-night-pulse 4s ease-in-out infinite; }
.sleep-veil > small { position:absolute;top:96px;left:50%;width:max-content;max-width:82%;transform:translateX(-50%);padding:5px 8px;border:1px solid rgba(161,211,247,.28);border-radius:6px;background:rgba(4,15,36,.72);color:#badaf1;font-size:6px;letter-spacing:.12em;text-align:center; }
.sleep-moon { position:absolute;top:132px;right:12%;width:31px;height:31px;border-radius:50%;background:radial-gradient(circle at 32% 35%,rgba(149,190,220,.48) 0 7%,transparent 8%),radial-gradient(circle at 68% 63%,rgba(149,190,220,.36) 0 9%,transparent 10%),#d9efff;box-shadow:0 0 18px rgba(186,222,255,.58);animation:sleep-moon-float 3.2s ease-in-out infinite; }
.sleep-z { position:absolute;z-index:2;left:58%;top:72%;color:#c9e9ff;font-family:ui-monospace,monospace;font-weight:900;text-shadow:0 0 8px rgba(133,204,255,.7);opacity:0;animation:sleep-z-rise 3s ease-out infinite; }
.sleep-z-one { font-size:13px; }
.sleep-z-two { left:64%;top:65%;font-size:17px;animation-delay:1s; }
.sleep-z-three { left:69%;top:58%;font-size:21px;animation-delay:2s; }
.habitat.sleeping-active .forest-scene,.habitat.sleeping-active .weather-layer,.habitat.sleeping-active .pixel-stars { filter:brightness(.35) saturate(.55); }
.habitat.sleeping-active .forest-scene .sky-orb { opacity:0; }
.habitat.sleeping-active .echo-sprite.sleeping { z-index:8;filter:saturate(.45) brightness(.72) drop-shadow(0 0 12px rgba(137,204,255,.35));animation:echo-sleep 3.4s ease-in-out infinite; }

@keyframes care-prop-arrive { from{opacity:0;transform:translate(20px,-50%) scale(.7)}to{opacity:1;transform:translate(0,-50%) scale(1)} }
@keyframes care-food-bite { 0%{opacity:0;transform:translate(0,12px) rotate(45deg) scale(.5)}16%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translate(-91px,0) rotate(225deg) scale(.35)} }
@keyframes care-result-pop { from{opacity:0;transform:translate(-50%,12px) scale(.75)}to{opacity:1;transform:translate(-50%,0) scale(1)} }
@keyframes care-flush-water { 0%{filter:hue-rotate(0);transform:scale(1)}50%{filter:hue-rotate(35deg);transform:scale(.82)}100%{filter:hue-rotate(0);transform:scale(1)} }
@keyframes care-flush-swirl { to{transform:translate(-50%,-50%) rotate(360deg) scale(.35);opacity:0} }
@keyframes care-waste-flush { 0%{opacity:1;transform:translate(0,0) scale(1)}70%{opacity:1;transform:translate(180px,-42px) rotate(180deg) scale(.55)}100%{opacity:0;transform:translate(190px,-34px) rotate(420deg) scale(.1)} }
@keyframes care-shower-drops { 0%{opacity:0;transform:translate(0,0)}25%{opacity:1}100%{opacity:0;transform:translate(-20px,40px)} }
@keyframes care-bubble-rise { 0%{opacity:0;transform:translateY(15px) scale(.4)}35%{opacity:1}100%{opacity:0;transform:translate(-12px,-55px) scale(1.4)} }
@keyframes care-pill-swallow { 0%{opacity:0;transform:translate(0,10px) rotate(-20deg)}18%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(-94px,-2px) rotate(10deg) scale(.45)} }
@keyframes care-heal-rise { 0%{opacity:0;transform:translateY(12px) scale(.5)}35%{opacity:1}100%{opacity:0;transform:translateY(-36px) scale(1.35)} }
@keyframes sleep-veil-in { from{opacity:0}to{opacity:1} }
@keyframes sleep-night-pulse { 50%{opacity:.55} }
@keyframes sleep-moon-float { 50%{transform:translateY(-7px)} }
@keyframes sleep-z-rise { 0%{opacity:0;transform:translate(0,14px) scale(.65)}25%{opacity:1}75%{opacity:.85}100%{opacity:0;transform:translate(18px,-48px) scale(1.2)} }

.habitat::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 35px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #58aa9d, transparent);
}

.orbit {
  position: absolute;
  left: 50%;
  top: 79%;
  border: 1px dashed rgba(17, 133, 130, .15);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
}

.orbit-one { width: 225px; height: 115px; }
.orbit-two { width: 155px; height: 205px; transform: translate(-50%, -50%) rotate(35deg); }

.pixel-stars i { position: absolute; width: 3px; height: 3px; background: #16a895; animation: twinkle 2.4s infinite ease-in-out; }
.pixel-stars i:nth-child(1) { left: 15%; top: 20%; }
.pixel-stars i:nth-child(2) { left: 79%; top: 31%; animation-delay: -.5s; }
.pixel-stars i:nth-child(3) { left: 23%; top: 62%; animation-delay: -1.2s; }
.pixel-stars i:nth-child(4) { left: 72%; top: 67%; animation-delay: -.8s; }
.pixel-stars i:nth-child(5) { left: 58%; top: 15%; animation-delay: -1.6s; }
.pixel-stars i:nth-child(6) { left: 87%; top: 52%; animation-delay: -.3s; }

@keyframes twinkle { 50% { transform: scale(2.2); opacity: .25; } }

.speech-bubble {
  position: absolute;
  z-index: 4;
  top: auto;
  bottom: calc(18% + var(--echo-half-height, 69px) + 16px);
  left: 50%;
  max-width: 80%;
  transform: translateX(-50%);
  padding: 8px 11px;
  border: 1px solid rgba(12, 74, 79, .18);
  border-radius: 10px;
  background: rgba(255, 255, 255, .72);
  color: #31626a;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(10, 80, 80, .08);
  transition: .2s ease;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid rgba(12, 74, 79, .18);
  border-bottom: 1px solid rgba(12, 74, 79, .18);
  background: #f4fffb;
}

.echo-sprite {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 82%;
  width: 138px;
  height: 138px;
  transform: translate(-50%, -50%);
  object-fit: contain;
  image-rendering: auto;
  animation: echo-float 2.8s ease-in-out infinite;
  filter: drop-shadow(0 12px 12px rgba(15, 93, 100, .15));
}

.echo-ground-shadow {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(82% + (var(--echo-half-height, 69px) * .62));
  width: clamp(76px, calc(var(--echo-half-height, 69px) * 1.38), 144px);
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(4, 30, 38, .32) 0 35%, rgba(4, 30, 38, .12) 58%, transparent 75%);
  filter: blur(2px);
  transition: width .35s ease, top .35s ease;
}
.echo-ground-shadow[hidden] { display:none; }

.selected-egg-sprite {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 66%;
  width: 178px;
  height: 178px;
  transform: translate(-50%, -50%);
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 12px 12px color-mix(in srgb, var(--echo-primary) 28%, transparent));
  animation: echo-float 2.8s ease-in-out infinite;
}

.echo-sprite[hidden], .selected-egg-sprite[hidden] { display: none; }

.echo-sprite[data-phase="hatchling"] { width: 150px; height: 150px; }
.echo-sprite[data-phase="core"] { width: 166px; height: 166px; }
.echo-sprite[data-phase="ascended"] { width: 176px; height: 176px; }
.echo-sprite[data-phase="surge"] { width: 188px; height: 188px; }
.echo-sprite[data-phase="apex"] { width: 200px; height: 200px; }

.echo-sprite.excited { animation: echo-bounce .5s ease 2; }
.echo-sprite.tired { animation-duration: 4.3s; filter: saturate(.65) drop-shadow(0 12px 12px rgba(15,93,100,.12)); }
.echo-sprite.sleeping { animation: echo-sleep 4s ease-in-out infinite; filter: saturate(.5); }
.echo-sprite.unwell { filter: hue-rotate(95deg) saturate(.7); }
.echo-sprite.sad { filter: saturate(.65) brightness(.92); }
.echo-sprite.sulking { filter:saturate(.6) brightness(.82);animation:echo-sulk 2.4s ease-in-out infinite; }

.hatch-button {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 43px;
  min-height: 30px;
  transform: translateX(-50%);
  border: 1px solid #0b7e75;
  border-radius: 8px;
  background: #0d756d;
  color: #eafffa;
  padding: 0 12px;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  white-space: nowrap;
}

.hatch-button[hidden] { display: none; }

@keyframes echo-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(2px); }
  50% { transform: translate(-50%, -50%) translateY(-8px); }
}

@keyframes echo-bounce {
  0%, 100% { transform: translate(-50%, -50%); }
  45% { transform: translate(-50%, -50%) translateY(-16px) scale(1.06); }
}

@keyframes echo-sleep {
  0%, 100% { transform: translate(-50%, -48%) rotate(-2deg); }
  50% { transform: translate(-50%, -48%) rotate(2deg) scale(.98); }
}

@keyframes echo-sulk { 0%,100%{transform:translate(-50%,-48%) rotate(-3deg)}50%{transform:translate(-50%,-50%) rotate(3deg) scale(.97)} }

.echo-sprite.eating { animation: echo-eat .28s steps(2,end) 6; }
.echo-sprite.cleaning { animation: echo-clean .42s ease 3; }
.echo-sprite.care-eating { z-index:9;animation:care-pet-eat .3s steps(2,end) 7; }
.echo-sprite.care-cleaning { z-index:9;animation:care-pet-clean 1.85s ease-in-out both; }
.echo-sprite.care-medicine { z-index:9;animation:care-pet-medicine 1.9s ease-in-out both; }
.echo-sprite.idle-walk-left { animation: echo-walk-left 2.8s ease-in-out both; }
.echo-sprite.idle-walk-right { animation: echo-walk-right 2.8s ease-in-out both; }
.echo-sprite.idle-whistle { animation: echo-whistle .55s ease-in-out 4; }
.echo-sprite.idle-angry { animation: echo-angry .18s steps(2,end) 8; }
.echo-sprite.idle-look { animation: echo-look .6s ease-in-out 3; }
.echo-sprite.training-charge.training-success { z-index: 9; animation: training-attack 1.65s ease-in-out both; }
.echo-sprite.training-charge.training-fail { z-index: 9; animation: training-attack-fail 1.75s ease-in-out both; filter: saturate(.58); }

@keyframes echo-eat { 0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-47%) scale(1.05,.94)} }
@keyframes echo-clean { 0%,100%{transform:translate(-50%,-50%) rotate(0)}50%{transform:translate(-50%,-55%) rotate(7deg)} }
@keyframes care-pet-eat { 0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-47%) scale(1.07,.91)} }
@keyframes care-pet-clean { 0%{transform:translate(-50%,-50%)}22%{transform:translate(-68%,-55%) rotate(-6deg)}48%{transform:translate(-54%,-57%) rotate(5deg)}72%{transform:translate(-62%,-50%) rotate(-3deg)}100%{transform:translate(-50%,-50%)} }
@keyframes care-pet-medicine { 0%,25%{transform:translate(-50%,-50%)}48%{transform:translate(-50%,-50%) scale(.92,1.06)}62%{transform:translate(-50%,-50%) scale(1.08,.9)}78%{transform:translate(-50%,-60%) scale(1.05)}100%{transform:translate(-50%,-50%)} }
@keyframes echo-walk-left { 0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-102%,-50%)} }
@keyframes echo-walk-right { 0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(2%,-50%)} }
@keyframes echo-whistle { 0%,100%{transform:translate(-50%,-50%) rotate(-2deg)}50%{transform:translate(-50%,-55%) rotate(3deg)} }
@keyframes echo-angry { 0%,100%{transform:translate(-51%,-50%)}50%{transform:translate(-47%,-50%)} }
@keyframes echo-look { 0%,100%{transform:translate(-50%,-50%) rotate(0)}50%{transform:translate(-50%,-50%) rotate(-6deg)} }
@keyframes training-win { 0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-67%) scale(1.08) rotate(4deg)} }
@keyframes training-lose { 0%,100%{transform:translate(-50%,-47%) rotate(-5deg)}50%{transform:translate(-50%,-43%) rotate(5deg) scale(.94)} }
@keyframes training-label-in { from{opacity:0;transform:translate(-50%,-7px)}to{opacity:1;transform:translate(-50%,0)} }
@keyframes training-attack { 0%{transform:translate(-50%,-50%) scale(1)}22%{transform:translate(-72%,-50%) scale(.9) rotate(-8deg)}48%{transform:translate(-18%,-53%) scale(1.08) rotate(8deg)}66%{transform:translate(-46%,-62%) scale(1.02)}100%{transform:translate(-50%,-50%) scale(1)} }
@keyframes training-attack-fail { 0%{transform:translate(-50%,-50%)}24%{transform:translate(-72%,-50%) scale(.9) rotate(-8deg)}52%{transform:translate(-8%,-65%) rotate(12deg)}68%{transform:translate(-34%,-33%) rotate(-14deg) scale(.92)}100%{transform:translate(-50%,-44%) rotate(-7deg) scale(.92)} }
@keyframes training-projectile-hit { 0%{opacity:0;transform:translate(0,0) scale(.6)}12%{opacity:1}100%{opacity:1;transform:translate(105px,-3px) scale(1.5)} }
@keyframes training-projectile-miss { 0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(118px,-78px) rotate(-25deg)} }
@keyframes training-impact-flash { 0%{opacity:1;transform:scale(.35)}100%{opacity:0;transform:scale(4.8)} }
@keyframes training-target-hit { 0%,100%{transform:translateY(-50%) rotate(0)}50%{transform:translateY(-50%) rotate(14deg) translateX(6px);filter:brightness(1.5)} }
@keyframes training-target-dodge { 0%{transform:translateY(-50%)}55%{transform:translate(-17px,-78%)}100%{transform:translateY(-50%)} }
@keyframes training-result-pop { from{opacity:0;transform:translate(-50%,12px) scale(.75)}to{opacity:1;transform:translate(-50%,0) scale(1)} }
@keyframes tree-sway { from{transform:rotate(-2deg)}to{transform:rotate(4deg)} }
@keyframes rain-fall { to{transform:translate(-38px,300px) rotate(12deg)} }
@keyframes snow-fall { to{transform:translate(28px,290px) rotate(180deg)} }
@keyframes wind-dash { to{transform:translateX(520px)} }
@keyframes heat-wave { to{transform:translateX(5px) skewX(-5deg)} }
@keyframes waste-alert { 50%{opacity:.45} }
@keyframes effect-pop { from{opacity:0;transform:translateY(8px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)} }

.creature-label {
  position: absolute;
  z-index: 4;
  bottom: 12px;
  left: 50%;
  display: none;
  align-items: baseline;
  gap: 8px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.creature-label strong { font-size: 14px; letter-spacing: .14em; }
.creature-label span { color: #5c8b8e; font-size: 7px; letter-spacing: .1em; }

.mood-strip {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-top: 1px solid rgba(10, 70, 76, .12);
  border-bottom: 1px solid rgba(10, 70, 76, .12);
  background: #d1f5e9;
}

.mood-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: #0e4a58;
  color: var(--yellow);
}

.mood-strip small { display: block; color: #679295; font-size: 7px; letter-spacing: .15em; }
.mood-strip strong { display: block; margin-top: 2px; font-size: 11px; letter-spacing: .08em; }
.mood-message { color: #5f8588; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 10px; text-align: right; }

.gauge-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 10px 12px 12px;
  background: #e8fff8;
}

.gauge { min-width: 0; }
.gauge-head { display: flex; justify-content: space-between; gap: 3px; margin-bottom: 5px; color: #50797c; font-size: 7px; }
.gauge-head strong { color: #164d57; font-size: 8px; }
.gauge-track { height: 5px; overflow: hidden; border-radius: 4px; background: #add7ce; }
.gauge-track i { display: block; height: 100%; border-radius: inherit; background: #159e91; transition: width .35s ease; }
.gauge.warning .gauge-track i { background: #e4a72f; }
.gauge.danger .gauge-track i { background: var(--red); }

.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 19px 18px 13px;
}

.panel-heading small { color: #6c9699; font-size: 8px; letter-spacing: .16em; }
.panel-heading h2 { margin: 2px 0 0; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 27px; letter-spacing: -.04em; }
.panel-heading > span { padding: 5px 8px; border: 1px solid #a9d8cf; border-radius: 6px; color: #4d7e81; font-size: 8px; }

.action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 14px; }

.action-card {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  gap: 1px 8px;
  align-items: center;
  min-height: 66px;
  padding: 10px;
  border: 1px solid #b5dcd4;
  border-radius: 11px;
  background: rgba(255,255,255,.48);
  color: #123f49;
  text-align: left;
  box-shadow: 0 2px 0 rgba(12, 88, 82, .06);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.action-card:active, .training-card:active { transform: translateY(2px); }
.action-card:hover { border-color: #5ab3a8; background: rgba(255,255,255,.8); }
.action-icon { grid-row: 1 / 3; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: #c4eee3; color: #0c7d76; font-size: 14px; }
.action-card strong { align-self: end; font-size: 11px; }
.action-card small { align-self: start; color: #678f90; font-size: 8px; }

.care-tip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: center;
  margin: 12px 14px 16px;
  padding: 9px 11px;
  border-radius: 9px;
  background: #c8eee4;
}

.care-tip span { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #75aca5; border-radius: 50%; font-size: 9px; }
.care-tip p { margin: 0; color: #426e71; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 9px; line-height: 1.4; }

.xp-card {
  margin: 0 14px 10px;
  padding: 11px 12px;
  border: 1px solid #b2dcd3;
  border-radius: 10px;
  background: #d4f7ed;
}

.xp-card > div:first-child { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 7px; }
.xp-card > div:first-child span { color: #5a8588; letter-spacing: .1em; }

.combat-stats { display: grid; width: auto; min-width: 0; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; margin: 0 14px 9px; }
.combat-stats div { min-width: 0; padding: 7px 3px; border: 1px solid #b5dcd4; border-radius: 8px; background: rgba(255,255,255,.46); text-align: center; }
.combat-stats small { display: block; color: #648e91; font-size: 6px; letter-spacing: .08em; }
.combat-stats strong { display: block; margin-top: 3px; color: #123f49; font-size: 10px; }
.progress-track { height: 7px; overflow: hidden; border-radius: 8px; background: #acd6ce; }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #13a491, #35e7d3); transition: width .3s ease; }

.training-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  margin: 0 14px 8px;
  padding: 11px;
  border: 1px solid #b5dcd4;
  border-radius: 11px;
  background: rgba(255,255,255,.5);
  color: #123f49;
  text-align: left;
}

.training-symbol { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #124e5b; color: var(--yellow); font-weight: 900; }
.training-symbol.alt { background: #267c77; color: #d5fff5; }
.training-card strong, .training-card small { display: block; }
.training-card strong { font-size: 11px; }
.training-card small { margin-top: 3px; color: #678f90; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 9px; line-height: 1.3; }
.training-card em { color: #b4515b; font-size: 8px; font-style: normal; }
.training-symbol.spar { background: #eadbff; color: #683ca1; }
.training-card[hidden], .training-lock[hidden] { display: none !important; }
.training-lock { margin: 7px 14px 9px; padding: 8px; border: 1px dashed #94bdb6; border-radius: 8px; color: #6b9294; font-size: 6px; letter-spacing: .08em; text-align: center; }

.locked-mission {
  position: relative;
  min-height: 105px;
  margin: 5px 14px 16px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid #1e6670;
  border-radius: 11px;
  background: linear-gradient(135deg, #133f4b, #092937);
  color: #eafff9;
  text-align:left;
}

.locked-mission small, .locked-mission strong, .locked-mission span { position: relative; z-index: 2; display: block; }
.locked-mission small { color: var(--cyan); font-size: 7px; letter-spacing: .15em; }
.locked-mission strong { margin: 7px 0; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; }
.locked-mission span { color: #7fabb0; font-size: 7px; }
.locked-mission > b { position:absolute;z-index:2;right:14px;bottom:12px;color:#f5bd45;font-size:7px;letter-spacing:.09em; }
.adventure-launch:not(:disabled):active { transform:scale(.985); }
.adventure-launch.locked { opacity:.62; }
.map-lines { position: absolute; inset: 0; opacity: .28; }
.map-lines::before, .map-lines::after { content: ""; position: absolute; height: 1px; background: var(--cyan); transform: rotate(-12deg); }
.map-lines::before { width: 180px; right: -20px; top: 42px; }
.map-lines::after { width: 140px; right: 4px; top: 70px; transform: rotate(18deg); }
.map-lines i { position: absolute; right: 20%; top: 30%; width: 8px; height: 8px; border: 2px solid var(--yellow); border-radius: 50%; }
.map-lines i:nth-child(2) { right: 42%; top: 63%; }
.map-lines i:nth-child(3) { right: 8%; top: 68%; }
.map-lines i:nth-child(4) { right: 58%; top: 27%; }

.data-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0 14px 10px; overflow: hidden; border: 1px solid #b2d8d1; border-radius: 10px; background: #b2d8d1; }
.data-row { display: flex; justify-content: space-between; gap: 8px; padding: 10px; background: #e8fff8; font-size: 9px; }
.data-row span { color: #648d8f; }
.data-row strong { color: #164e57; text-align: right; }
.data-row.wide { grid-column: 1 / -1; align-items: flex-start; flex-direction: column; }
.data-row.wide strong { text-align: left; line-height: 1.45; }

.evolution-card { margin: 0 14px 10px; padding: 10px; border: 1px solid #acd6ce; border-radius: 10px; background: #d9f8ef; }
.evolution-heading { display: flex; justify-content: space-between; align-items: baseline; }
.evolution-heading small { color: #618c8e; font-size: 6px; letter-spacing: .14em; }
.evolution-heading strong { color: #184d56; font-size: 9px; }
.evolution-tree { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 3px; margin-top: 9px; }
.evolution-pixel-preview { margin: 0 0 8px; padding: 5px; border: 1px solid #345077; border-radius: 8px; background: #06122f; }
.evolution-preview-button { display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 5px; background: #020a20; }
.evolution-preview-button img { display: block; width: 100%; height: auto; border-radius: 5px; image-rendering: pixelated; transition: transform .18s ease, filter .18s ease; }
.evolution-preview-button:active img { transform: scale(.985); filter: brightness(1.12); }
.evolution-pixel-preview figcaption { padding: 5px 2px 1px; color: #a9d8e9; font-size: 5px; text-align: center; letter-spacing: .08em; }
.evolution-node { position: relative; min-width: 0; padding: 6px 3px; border: 1px solid #a8d1ca; border-radius: 7px; background: rgba(255,255,255,.55); color: #6d9294; text-align: center; }
.evolution-node strong, .evolution-node small { display: block; }
.evolution-node strong { font-size: 7px; }
.evolution-node small { margin-top: 2px; font-size: 5px; }
.evolution-portrait { display: grid; width: 44px; height: 44px; margin: 0 auto 5px; place-items: center; overflow: hidden; border: 1px solid #afd1ca; border-radius: 8px; background: #d1e8e2; }
.evolution-portrait.locked { background: repeating-linear-gradient(135deg,#c5dbd7 0,#c5dbd7 5px,#b8d0cc 5px,#b8d0cc 10px); color: #6e9393; box-shadow: inset 0 0 0 2px rgba(255,255,255,.28); }
.evolution-portrait.locked span { font-family: ui-sans-serif,system-ui,sans-serif; font-size: 19px; font-weight: 900; opacity: .72; }
.evolution-portrait.revealed { border-color: color-mix(in srgb,var(--echo-primary) 55%,#9acbc2); background: radial-gradient(circle,#f5fffc,#c9eee5); box-shadow: 0 3px 8px rgba(28,89,83,.12); }
.evolution-portrait svg { display: block; width: 40px; height: 40px; image-rendering: pixelated; }
.evolution-portrait img { display: block; width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; }
.evolution-portrait.stage-4 svg { transform: scale(1.03); }.evolution-portrait.stage-5 svg { transform: scale(1.08); }.evolution-portrait.stage-6 svg { transform: scale(1.12); }
.evolution-node.current { border-color: var(--echo-primary); background: #f5fffc; color: #174c55; box-shadow: 0 0 0 2px color-mix(in srgb, var(--echo-primary) 18%, transparent); }
.evolution-node.passed { color: #246d6a; background: #c5eee4; }
.evolution-arrow { height: 9px; color: #6c9b9a; font-size: 8px; line-height: 9px; text-align: center; }
.evolution-fork { color: #6c9b9a; font-size: 9px; text-align: center; }
.evolution-lineages { display: grid; gap: 9px; }
.evolution-lineage { display: grid; gap: 3px; padding: 7px; border: 1px solid #b4d7d1; border-radius: 9px; background: rgba(239, 255, 251, .48); }
.evolution-lineage.alternate { opacity: .58; }
.evolution-lineage-label { padding: 2px 4px 5px; color: #315f66; text-align: center; }
.evolution-lineage-label strong, .evolution-lineage-label small { display: block; }
.evolution-lineage-label strong { font-size: 6px; }
.evolution-lineage-label small { margin-top: 2px; color: #6c9294; font-size: 5px; }
.evolution-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; align-items: start; }
.evolution-branch { display: grid; gap: 3px; min-width: 0; }
.evolution-branch.alternate { opacity: .58; }
.evolution-branch-label { min-height: 28px; padding: 4px; color: #315f66; text-align: center; }
.evolution-branch-label strong, .evolution-branch-label small { display: block; }
.evolution-branch-label strong { font-size: 6px; }
.evolution-branch-label small { margin-top: 2px; color: #6c9294; font-size: 5px; }
.evolution-empty { grid-column: 1 / -1; color: #6c9294; font-size: 7px; text-align: center; }

.history-box { margin: 0 14px 10px; padding: 10px; border-radius: 10px; background: #d3f4eb; }
.history-box > div { display: flex; justify-content: space-between; align-items: center; }
.history-box small { color: #648d8f; font-size: 7px; letter-spacing: .12em; }
.history-box button { border: 0; background: transparent; color: #65878a; font-size: 7px; }
.history-box ul { display: grid; gap: 6px; max-height: 95px; overflow: auto; margin: 8px 0 0; padding: 0; list-style: none; }
.history-box li { display: grid; grid-template-columns: auto 1fr; gap: 7px; color: #426f72; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 8px; line-height: 1.3; }
.history-box li time { color: #769b9c; font-family: ui-monospace, monospace; font-size: 7px; }

.save-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 14px 16px; }
.save-actions button { min-height: 35px; border: 1px solid #80b9b0; border-radius: 8px; background: #eafff9; color: #1a6566; font-size: 8px; }

.companion-profile-card { display:grid;gap:1px;margin:0 14px 10px;overflow:hidden;border:1px solid #a8d5cc;border-radius:12px;background:#a8d5cc;box-shadow:0 5px 16px rgba(24,89,83,.08); }
.profile-record { display:flex;min-height:55px;flex-direction:column;justify-content:center;padding:10px 12px;background:linear-gradient(135deg,#effff9,#d8f6ed); }
.profile-record small { color:#648d8f;font-size:7px;letter-spacing:.12em; }
.profile-record strong { display:block;margin-top:5px;color:#164e57;font-size:11px;line-height:1.3; }
.profile-name-record { flex-direction:row;align-items:center;justify-content:space-between;gap:12px; }
.profile-name-record > div { min-width:0; }
.profile-name-record strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;letter-spacing:.06em; }
.profile-name-record button { min-width:92px;min-height:34px;padding:6px 8px;border:1px solid #71aea5;border-radius:8px;background:#f7fffc;color:#166965;font-size:7px;font-weight:800;letter-spacing:.06em; }
.profile-name-record button:disabled { border-color:#b4d1cc;background:#dcebe7;color:#799694; }

.data-accordion { margin:0 14px 10px;padding:0;overflow:hidden;border:1px solid #acd6ce;border-radius:11px;background:#d9f8ef; }
.data-accordion > summary { display:flex;min-height:55px;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;cursor:pointer;list-style:none;user-select:none; }
.data-accordion > summary::-webkit-details-marker { display:none; }
.data-accordion > summary span small,.data-accordion > summary span strong { display:block; }
.data-accordion > summary span small { color:#618c8e;font-size:7px;letter-spacing:.14em; }
.data-accordion > summary span strong { margin-top:4px;color:#184d56;font-size:12px; }
.data-accordion > summary > b { display:grid;width:28px;height:28px;place-items:center;border:1px solid #8dbfb7;border-radius:8px;color:#25756f;font-size:14px;transition:transform .2s ease; }
.data-accordion[open] > summary { border-bottom:1px solid #acd6ce;background:rgba(255,255,255,.28); }
.data-accordion[open] > summary > b { transform:rotate(45deg); }
.data-accordion .evolution-tree { padding:0 10px 12px; }
.more-data-card .data-list { margin:10px; }

.latest-memory-card { margin:0 14px 10px;padding:12px;border:1px solid #b2ddd3;border-radius:11px;background:linear-gradient(135deg,#d6f7ed,#c8eee4); }
.latest-memory-card > small { color:#648d8f;font-size:7px;letter-spacing:.13em; }
#latest-memory { display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start;margin-top:9px; }
#latest-memory time { padding-top:1px;color:#739899;font-size:7px;white-space:nowrap; }
#latest-memory p { margin:0;color:#315f65;font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px;line-height:1.45; }

.data-settings-list { display:grid;gap:8px;padding:10px; }
.data-setting-row,.data-setting-action { width:100%;min-height:58px;border:1px solid #afd7d0;border-radius:10px;background:rgba(255,255,255,.54);color:#164e57; }
.data-setting-row { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px; }
.data-setting-row strong,.data-setting-row small,.data-setting-action strong,.data-setting-action small { display:block; }
.data-setting-row strong,.data-setting-action strong { font-size:10px; }
.data-setting-row small,.data-setting-action small { margin-top:3px;color:#678f90;font-family:ui-sans-serif,system-ui,sans-serif;font-size:8px;line-height:1.35; }
.data-version-row > b { color:#b1770d;font-size:9px;letter-spacing:.08em; }
.data-setting-action { display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;padding:10px 11px;text-align:left; }
.data-setting-action > span { display:grid;width:32px;height:32px;place-items:center;border-radius:8px;background:#c5eee4;color:#167a72;font-size:15px; }
.data-setting-action:disabled { opacity:.6; }
.data-settings-list .save-actions { margin:0; }
.data-setting-danger { border-color:#e5aeb5;background:#fff0f1;color:#8d3442; }
.data-setting-danger > span { background:#ffdce1;color:#b04354; }

.confirm-dialog { width:min(90vw,360px);text-align:left; }
.confirm-dialog label { display:block;margin:16px 0 6px;color:var(--cyan-soft);font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px; }
.confirm-dialog input { width:100%;min-height:44px;padding:10px 12px;border:1px solid #356c77;border-radius:10px;outline:0;background:#061b2b;color:#effffb;font-family:ui-sans-serif,system-ui,sans-serif;font-size:14px; }
.confirm-dialog input:focus { border-color:var(--cyan);box-shadow:0 0 0 3px rgba(53,231,211,.12); }
.confirm-dialog > small { display:block;min-height:18px;margin-top:6px;color:#ff98a6;font-family:ui-sans-serif,system-ui,sans-serif;font-size:9px; }
.dialog-icon.danger { background:rgba(255,97,116,.13);color:#ff8292; }
.confirm-actions { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px; }
.confirm-actions button { min-height:42px;border-radius:10px;font-size:10px;font-weight:800; }
.confirm-cancel { border:1px solid #355e6c;background:#102f41;color:#a9c7cc; }
.confirm-primary { border:1px solid #30cdbc;background:#1a9f92;color:#effffb; }
.confirm-danger { border:1px solid #d04f61;background:#ad3d4d;color:#fff7f8; }
.adventure-warning-dialog .confirm-actions:has(#adventure-warning-confirm[hidden]) { grid-template-columns:1fr; }
.adventure-warning-confirm[hidden] { display:none !important; }
.fatal-return-button { width:100%;min-height:44px;margin-top:17px;border-radius:10px;font-size:9px;font-weight:900; }

.meal-dialog { width:min(92vw,390px);max-height:min(82dvh,620px);overflow:auto;padding:20px;border:1px solid #2e6b73;border-radius:16px;background:linear-gradient(155deg,#0a2b3b,#061829);color:#eafffa;box-shadow:0 25px 70px rgba(0,0,0,.48); }
.meal-dialog::backdrop { background:rgba(1,9,20,.72);backdrop-filter:blur(4px); }
.meal-dialog h2 { margin:12px 0 5px;font-size:21px; }
.meal-dialog > p { margin:0;color:#9fc3c6;font-family:ui-sans-serif,system-ui,sans-serif;font-size:10px;line-height:1.45; }
.meal-dialog > small { display:block;margin-top:12px;color:#7fa5aa;font-family:ui-sans-serif,system-ui,sans-serif;font-size:8px;line-height:1.45; }
.meal-grid { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px; }
.meal-grid button { display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:1px 9px;align-items:center;min-height:62px;padding:9px;border:1px solid #316776;border-radius:11px;background:#103649;color:#effffb;text-align:left; }
.meal-grid button:active { transform:scale(.97);background:#155062; }
.meal-grid button > span { grid-row:1 / 3;display:grid;width:34px;height:34px;place-items:center;border-radius:9px;background:rgba(53,231,211,.12);font-family:ui-sans-serif,system-ui,sans-serif;font-size:20px; }
.meal-grid button strong { align-self:end;font-size:9px;line-height:1.2; }
.meal-grid button small { align-self:start;color:#79dacc;font-size:7px; }

@media (max-width:360px) {
  .meal-dialog { padding:16px 13px; }
  .meal-grid { gap:6px; }
  .meal-grid button { grid-template-columns:29px 1fr;min-height:57px;padding:7px; }
  .meal-grid button > span { width:29px;height:29px;font-size:17px; }
}

.bag-summary { display:grid;grid-template-columns:auto 1fr auto 1fr;gap:7px;align-items:center;margin:10px;padding:9px 10px;border-radius:8px;background:rgba(255,255,255,.42); }
.bag-summary span { color:#6d9695;font-size:6px;letter-spacing:.12em; }
.bag-summary strong { color:#155a60;font-size:11px; }
.bag-list { display:grid;gap:7px;padding:0 10px 11px; }
.bag-list > p { margin:2px 4px 5px;color:#62898a;font-family:ui-sans-serif,system-ui,sans-serif;font-size:9px;line-height:1.45; }
.bag-item { display:grid;grid-template-columns:31px 1fr auto auto;gap:8px;align-items:center;padding:8px;border:1px solid #afd8d0;border-radius:9px;background:rgba(255,255,255,.54); }
.bag-item > span { display:grid;width:31px;height:31px;place-items:center;border-radius:8px;background:#174f5c;color:#f5bd45;font-size:11px;font-weight:900; }
.bag-item strong,.bag-item small { display:block; }
.bag-item strong { color:#174f57;font-size:9px; }
.bag-item small { margin-top:2px;color:#6d9292;font-family:ui-sans-serif,system-ui,sans-serif;font-size:7px;line-height:1.3; }
.bag-item > b { color:#24726d;font-size:9px; }
.bag-item button { min-height:29px;padding:0 8px;border:1px solid #42a59a;border-radius:7px;background:#d5fff4;color:#176861;font-size:7px;font-weight:900; }

.adventure-dialog { width:min(94vw,540px);max-width:none;max-height:min(92dvh,760px);overflow:auto;padding:19px;border:1px solid #2c7580;border-radius:18px;background:radial-gradient(circle at 80% 15%,rgba(53,231,211,.12),transparent 29%),linear-gradient(155deg,#0a2b3b,#061623);color:#effffb; }
.adventure-dialog::backdrop { background:rgba(1,8,16,.82);backdrop-filter:blur(7px); }
.adventure-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-right:31px; }
.adventure-heading small { color:#47dfce;font-size:7px;letter-spacing:.14em; }
.adventure-heading h2 { margin:5px 0 0;font-size:22px; }
.adventure-wallet { display:grid;justify-items:end;padding:7px 9px;border:1px solid #285d69;border-radius:9px;background:#0d3242; }
.adventure-wallet span { color:#739ba2;font-size:6px;letter-spacing:.1em; }
.adventure-wallet strong { margin-top:2px;color:#f5bd45;font-size:13px; }
.adventure-view[hidden] { display:none !important; }
.adventure-intro { margin:12px 0 10px;color:#91b3b7;font-size:9px; }
.adventure-map { display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:8px;padding:14px;border:1px solid #1d4f61;border-radius:14px;background:linear-gradient(rgba(60,201,190,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(60,201,190,.055) 1px,transparent 1px),radial-gradient(circle at 50% 48%,#123c42,#071c2d 72%);background-size:24px 24px,24px 24px,auto;box-shadow:inset 0 0 30px rgba(0,0,0,.25); }
.adventure-node { position:relative;display:grid;min-width:0;aspect-ratio:1;place-content:center;border:1px solid #315866;border-radius:10px;background:#102b3b;color:#729198;box-shadow:0 4px 0 rgba(0,0,0,.2); }
.adventure-node::after { content:"";position:absolute;left:100%;top:50%;width:9px;border-top:1px dashed #285965; }
.adventure-node:nth-child(6n)::after { display:none; }
.adventure-node small { color:#5d7e85;font-size:7px; }
.adventure-node strong { margin-top:1px;font-size:10px; }
.adventure-node.available { border-color:#47dfce;background:#154d51;color:#ecfff9;box-shadow:0 0 16px rgba(53,231,211,.32),0 4px 0 rgba(0,0,0,.2);animation:adventure-node-pulse 1.4s ease-in-out infinite; }
.adventure-node.available small { color:#f5bd45; }
.adventure-node.complete { border-color:#2b766b;background:#173f3f;color:#65c8b4;box-shadow:none; }
.adventure-node.complete::before { content:"✓";position:absolute;right:3px;top:2px;color:#68d9bf;font-size:6px; }
.adventure-node.boss { border-color:#a64b61;background:#481f35;color:#ffe7ec; }
.adventure-node.boss small { color:#ff7289; }
.adventure-node.boss.available { box-shadow:0 0 18px rgba(255,87,116,.38); }
.adventure-node.locked { opacity:.36; }
.adventure-legend { display:flex;flex-wrap:wrap;gap:10px;margin:10px 3px 0;color:#779da2;font-size:7px; }
.adventure-legend span { display:flex;align-items:center;gap:4px; }
.adventure-legend i { width:7px;height:7px;border-radius:2px;background:#223e4a; }
.adventure-legend .available { background:#47dfce; }.adventure-legend .complete { background:#2b766b; }.adventure-legend .boss { background:#ad3b5a; }.adventure-legend .locked { background:#344450;opacity:.5; }
.adventure-back { margin:11px 0 8px;padding:7px 9px;border:1px solid #285d69;border-radius:8px;background:#0d3242;color:#9bd8d1;font-size:7px;font-weight:900; }
.encounter-card { padding:15px;border:1px solid #245768;border-radius:14px;background:linear-gradient(145deg,#0d3141,#081f30); }
.encounter-card > small { color:#47dfce;font-size:7px;letter-spacing:.14em; }
.encounter-card h3 { margin:7px 0 5px;font-size:20px; }
.encounter-card > p { min-height:31px;margin:0;color:#8fb2b6;font-size:9px;line-height:1.5; }
.encounter-continue { width:100%;min-height:43px;margin-top:13px;border:1px solid #37b6a9;border-radius:10px;background:linear-gradient(135deg,#118b80,#36d5c2);color:#042d34;font-size:9px;font-weight:1000;letter-spacing:.08em; }
.encounter-continue:disabled { opacity:.48; }
.loot-reveal { display:grid;grid-template-columns:45px 1fr;gap:11px;align-items:center;margin-top:13px;padding:10px;border:1px solid #567d55;border-radius:10px;background:#243f35; }
.loot-reveal[hidden] { display:none !important; }
.loot-reveal > span { display:grid;width:45px;height:45px;place-items:center;border-radius:10px;background:#f5bd45;color:#153540;font-size:17px;font-weight:1000; }
.loot-reveal small,.loot-reveal strong,.loot-reveal p { display:block;margin:0; }
.loot-reveal small { color:#9eb981;font-size:6px;letter-spacing:.14em; }.loot-reveal strong { margin-top:3px;color:#fff1ad;font-size:11px; }.loot-reveal p { margin-top:3px;color:#a9bba9;font-size:7px; }
.exploration-stage { position:relative;min-height:196px;margin-top:13px;overflow:hidden;border:1px solid #2c6270;border-radius:12px;background:linear-gradient(#86d8d1 0 54%,#87b779 55% 66%,#335e4a 67%); }
.exploration-stage[hidden] { display:none !important; }
.exploration-stage::after { content:"";position:absolute;left:0;right:0;bottom:28px;height:24px;background:repeating-linear-gradient(90deg,#25483d 0 14px,#2d5545 14px 28px);clip-path:polygon(0 44%,9% 17%,19% 57%,29% 21%,42% 61%,55% 19%,68% 54%,80% 23%,91% 59%,100% 31%,100% 100%,0 100%); }
.exploration-stage > small { position:absolute;z-index:8;left:50%;bottom:7px;width:max-content;max-width:88%;transform:translateX(-50%);color:#eafff8;font-size:6px;letter-spacing:.1em;text-shadow:0 1px 2px #062b33; }
.explore-cloud { position:absolute;top:22px;width:38px;height:7px;border-radius:9px;background:rgba(255,255,255,.48);box-shadow:9px -5px 0 -1px rgba(255,255,255,.48),18px 0 0 -2px rgba(255,255,255,.48); }
.explore-cloud.cloud-a { left:12%; }.explore-cloud.cloud-b { right:17%;top:47px;transform:scale(.7); }
.explore-hill { position:absolute;left:-10%;right:-10%;bottom:52px;height:70px;background:#599b78;clip-path:polygon(0 82%,15% 32%,30% 78%,48% 22%,67% 73%,84% 38%,100% 80%,100% 100%,0 100%);opacity:.78; }
.explore-hill.hill-b { bottom:45px;background:#39725b;transform:translateX(42px) scale(.88);opacity:.85; }
.pixel-creature,.echo-pixel { --pet-primary:#ef7629;--pet-light:#ffc56f;--pet-accent:#2d63d5;--pet-dark:#5b2c25;position:relative;width:76px;height:76px;border:0;background:transparent;object-fit:contain;image-rendering:auto;box-shadow:none;filter:drop-shadow(0 8px 5px rgba(7,38,39,.32));font-size:0;isolation:isolate; }
/* Lineage colours become the subtle signal glow around each 2.5D render. */
.family-azuryn { --pet-primary:#258fe1;--pet-light:#b9f1ff;--pet-accent:#ffe05b;--pet-dark:#163864; }
.family-hexbit { --pet-primary:#793ca9;--pet-light:#c98aff;--pet-accent:#ff52c9;--pet-dark:#35154e; }
.family-nivaro { --pet-primary:#526e9c;--pet-light:#edfaff;--pet-accent:#96dcff;--pet-dark:#243450; }
.family-aerilo { --pet-primary:#efa037;--pet-light:#fff0bd;--pet-accent:#ffe55a;--pet-dark:#6a4820; }
.family-cindrix { --pet-primary:#ef7427;--pet-light:#ffc266;--pet-accent:#2e60cf;--pet-dark:#6d321f; }
/* Mature forms receive a stronger signal glow without flattening the 2.5D art. */
.phase-core,.phase-ascended,.phase-surge,.phase-apex { filter:drop-shadow(0 6px 0 rgba(7,38,39,.24)) drop-shadow(0 0 4px color-mix(in srgb,var(--pet-accent) 65%,transparent)); }
.phase-surge,.phase-apex { filter:drop-shadow(0 6px 0 rgba(7,38,39,.24)) drop-shadow(0 0 7px var(--pet-accent)); }
.explore-pet { position:absolute;z-index:5;left:-76px;bottom:42px;width:76px;height:76px; }
.exploration-stage.active .explore-pet { animation:explore-pet-roam 3.2s steps(12,end) infinite; }
.exploration-stage.active.discovered .explore-pet { animation:explore-pet-arrive .8s steps(5,end) forwards; }
.exploration-stage.active .explore-cloud { animation:explore-cloud-scroll 7s linear infinite; }
.exploration-stage.active .hill-b { animation:explore-hill-scroll 4.8s ease-in-out infinite alternate; }
.explore-discovery { position:absolute;z-index:4;right:18%;bottom:49px;width:54px;height:48px;opacity:0;transform:translateY(7px); }
.exploration-stage.active.discovered .explore-discovery { animation:explore-discovery-in .4s steps(3,end) forwards; }
.explore-discovery i,.explore-discovery b,.explore-discovery span { position:absolute;display:block; }
.exploration-stage[data-discovery="chest"] .explore-discovery i,.exploration-stage[data-discovery="mimic"] .explore-discovery i { left:5px;bottom:0;width:44px;height:28px;border:5px solid #5a321f;background:#d88d2d;box-shadow:inset 0 -7px #a95d23; }
.exploration-stage[data-discovery="chest"] .explore-discovery b,.exploration-stage[data-discovery="mimic"] .explore-discovery b { left:8px;bottom:27px;width:38px;height:15px;border:5px solid #5a321f;border-bottom:2px;background:#f1aa38; }
.exploration-stage[data-discovery="chest"] .explore-discovery span { left:24px;bottom:13px;width:7px;height:9px;background:#ffdb65; }
.exploration-stage[data-discovery="mimic"] .explore-discovery::after { content:"";position:absolute;left:10px;bottom:18px;width:34px;height:8px;background:repeating-linear-gradient(90deg,#fff 0 5px,#612333 5px 9px);animation:mimic-chomp .32s steps(2,end) infinite; }
.exploration-stage[data-discovery="enemy"] .explore-discovery i { left:5px;bottom:0;width:45px;height:40px;background:#ac3156;clip-path:polygon(0 20%,15% 20%,15% 0,32% 16%,67% 16%,85% 0,85% 20%,100% 20%,100% 85%,82% 85%,82% 100%,62% 100%,62% 86%,36% 86%,36% 100%,16% 100%,16% 85%,0 85%);filter:drop-shadow(0 5px 0 rgba(42,12,35,.28)); }
.exploration-stage[data-discovery="enemy"] .explore-discovery i::before { content:"";position:absolute;left:11px;top:15px;width:6px;height:7px;background:#ffe1e8;box-shadow:18px 0 0 #ffe1e8; }
.exploration-stage[data-discovery="trap"] .explore-discovery i { left:7px;bottom:0;width:39px;height:34px;border:6px solid #6f9e36;border-bottom:0;border-radius:50% 50% 0 0;transform:skew(-12deg);box-shadow:10px 1px 0 -5px #b45b3d,-10px 5px 0 -5px #b45b3d; }
.exploration-stage[data-discovery="empty"] .explore-discovery span { left:7px;bottom:9px;color:#eafff8;font-size:19px;font-weight:900;letter-spacing:4px;text-shadow:0 2px 2px #245b50; }
.exploration-stage[data-discovery="empty"] .explore-discovery span::after { content:"…"; }
.vpet-battle { position:relative;display:grid;grid-template-columns:1fr 36px 1fr;align-items:end;min-height:188px;margin-top:13px;overflow:hidden;border:1px solid #2c6270;border-radius:12px;background:linear-gradient(rgba(34,142,147,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(34,142,147,.09) 1px,transparent 1px),linear-gradient(#143849 0 63%,#102b34 64%);background-size:18px 18px,18px 18px,auto; }
.vpet-battle[hidden] { display:none !important; }
.vpet-battle::after { content:"";position:absolute;left:0;right:0;bottom:34px;border-top:2px solid #326366;box-shadow:0 6px 0 rgba(6,23,30,.32); }
.battle-unit { position:relative;z-index:2;display:grid;justify-items:center;gap:6px;padding:0 4px 47px; }
.battle-unit strong { max-width:100%;overflow:hidden;color:#b8d9d8;font-size:6px;letter-spacing:.05em;text-overflow:ellipsis;white-space:nowrap; }
.battle-pixel { width:82px;height:82px;object-fit:contain;image-rendering:auto; }
.guardian-pixel { position:relative;background:#ad3555;transform:scaleX(-1);clip-path:polygon(0 18%,14% 18%,14% 0,34% 14%,66% 14%,86% 0,86% 18%,100% 18%,100% 82%,86% 82%,86% 100%,62% 100%,62% 87%,36% 87%,36% 100%,14% 100%,14% 82%,0 82%);filter:drop-shadow(0 6px 0 rgba(42,12,35,.3));font-size:0; }
.guardian-pixel::before { content:"";position:absolute;left:12px;top:16px;width:7px;height:8px;background:#fff0b0;box-shadow:19px 0 0 #fff0b0; }
.guardian-pixel::after { content:"";position:absolute;left:20px;top:29px;width:10px;height:4px;background:#5b173b; }
.battle-flash { align-self:center;justify-self:center;color:#f5bd45;font-size:18px;opacity:.25; }
.battle-result { position:absolute;z-index:4;left:50%;bottom:9px;width:max-content;max-width:88%;transform:translateX(-50%);padding:5px 8px;border-radius:6px;background:#071b29;color:#f5bd45;font-size:7px;letter-spacing:.09em;text-align:center; }
.vpet-battle.echo-strike .battle-echo { animation:vpet-lunge-right .58s steps(4,end); }.vpet-battle.echo-strike .battle-guardian { animation:vpet-hit-right .58s steps(3,end); }.vpet-battle.echo-strike .battle-flash { animation:vpet-flash .58s steps(2,end); }
.vpet-battle.guardian-strike .battle-guardian { animation:vpet-lunge-left .58s steps(4,end); }.vpet-battle.guardian-strike .battle-echo { animation:vpet-hit-left .58s steps(3,end); }.vpet-battle.guardian-strike .battle-flash { animation:vpet-flash .58s steps(2,end); }
.vpet-battle.battle-clear .guardian-pixel { animation:vpet-defeat .7s steps(4,end) forwards; }.vpet-battle.battle-lost .echo-pixel { animation:vpet-defeat .7s steps(4,end) forwards; }
@keyframes adventure-node-pulse { 50%{transform:translateY(-2px);filter:brightness(1.14)} }
@keyframes vpet-lunge-right { 45%{transform:translateX(60px) scale(1.12)}100%{transform:none} }
@keyframes vpet-lunge-left { 45%{transform:translateX(-60px) scale(1.12)}100%{transform:none} }
@keyframes vpet-hit-right { 40%{transform:translateX(8px);filter:brightness(2)}55%{transform:translateX(-7px)} }
@keyframes vpet-hit-left { 40%{transform:translateX(-8px);filter:brightness(2)}55%{transform:translateX(7px)} }
@keyframes vpet-flash { 35%{opacity:1;transform:scale(2.1)}70%{opacity:.1} }
@keyframes vpet-defeat { 30%{transform:rotate(12deg);opacity:1}70%{transform:rotate(-15deg) translateY(8px)}100%{transform:translateY(25px) scaleY(.2);opacity:.25} }
@keyframes explore-pet-roam { 0%{left:-58px;transform:translateY(0)}12%{transform:translateY(-7px)}24%{transform:translateY(0)}36%{transform:translateY(-7px)}48%{transform:translateY(0)}60%{transform:translateY(-7px)}72%{transform:translateY(0)}84%{transform:translateY(-7px)}100%{left:112%;transform:translateY(0)} }
@keyframes explore-pet-arrive { 0%{left:8%;transform:translateY(0)}30%{transform:translateY(-7px)}60%{transform:translateY(0)}100%{left:39%;transform:translateY(0)} }
@keyframes explore-cloud-scroll { from{transform:translateX(0)}to{transform:translateX(-70px)} }
@keyframes explore-hill-scroll { to{transform:translateX(20px) scale(.9)} }
@keyframes explore-discovery-in { to{opacity:1;transform:translateY(0)} }
@keyframes mimic-chomp { 50%{height:2px;bottom:22px} }

@media (max-width:380px) {
  .adventure-dialog { padding:14px 11px; }
  .adventure-heading h2 { font-size:18px; }
  .adventure-map { gap:6px;padding:10px; }
  .adventure-node { border-radius:8px; }
  .adventure-node::after { width:7px; }
  .battle-pixel { width:49px;height:49px; }
  .bag-item { grid-template-columns:28px 1fr auto; }
  .bag-item > span { width:28px;height:28px; }
  .bag-item button { grid-column:2 / 4;width:100%; }
}

.tab-bar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 55px;
  margin-top: auto;
  border-top: 1px solid #a7d6ce;
  background: rgba(228, 255, 247, .94);
}

.tab-bar button {
  position: relative;
  display: grid;
  gap: 2px;
  place-content: center;
  border: 0;
  background: transparent;
  color: #618a8d;
}

.tab-bar button span { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 15px; }
.tab-bar button small { font-size: 7px; letter-spacing: .1em; }
.tab-bar button.active { color: #0c6f6d; }
.tab-bar button.active::after { content: ""; position: absolute; bottom: 0; left: 25%; right: 25%; height: 3px; border-radius: 3px 3px 0 0; background: #0c8d83; }

.toast {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: 67px;
  max-width: 84%;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(5, 34, 45, .92);
  color: var(--cyan-soft);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 9px;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: .2s ease;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

dialog {
  width: min(90vw, 370px);
  padding: 28px;
  border: 1px solid #2f6470;
  border-radius: 20px;
  background: #0a2435;
  color: var(--paper);
  box-shadow: 0 30px 90px #000;
}

dialog::backdrop { background: rgba(2, 8, 13, .78); backdrop-filter: blur(8px); }
dialog h2 { margin: 12px 0; font-family: ui-sans-serif, system-ui, sans-serif; }
dialog ol { padding-left: 20px; color: #b9cdd0; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 13px; line-height: 1.8; }
dialog p { color: #789da4; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 11px; line-height: 1.5; }
.dialog-close { position: absolute; top: 13px; right: 13px; border: 0; background: transparent; color: #789da4; font-size: 25px; }
.dialog-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; background: rgba(53,231,211,.12); color: var(--cyan); font-size: 23px; }
.policy-dialog { max-height: min(82dvh, 680px); overflow: auto; }
.policy-updated { margin-top: -7px; color: var(--yellow); font-size: 9px; letter-spacing: .06em; }
.policy-copy { margin: 17px 0; }
.policy-copy h3 { margin: 15px 0 4px; color: var(--cyan-soft); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12px; }
.policy-copy p { margin: 0; }
.policy-done { width: 100%; }
.evolution-zoom-dialog { width: min(94vw, 780px); max-width: none; padding: 20px; overflow: hidden; }
.evolution-zoom-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding-right: 35px; }
.evolution-zoom-heading small { color: var(--cyan); font-size: 7px; letter-spacing: .16em; }
.evolution-zoom-heading h2 { margin: 3px 0 0; font-size: 20px; }
.evolution-zoom-heading > strong { color: var(--yellow); font-size: 9px; letter-spacing: .08em; }
.evolution-zoom-stage { width: 100%; height: min(66dvh, 680px); margin-top: 14px; overflow: auto; border: 1px solid #234c66; border-radius: 13px; background: #02091e; overscroll-behavior: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.evolution-zoom-stage img { display: block; width: 100%; max-width: none; height: auto; transform-origin: top left; image-rendering: pixelated; user-select: none; -webkit-user-drag: none; }
.evolution-zoom-controls { display: grid; grid-template-columns: 52px 1fr 52px; gap: 8px; margin-top: 11px; }
.evolution-zoom-controls button { min-height: 40px; border: 1px solid #2d6672; border-radius: 10px; background: #10384a; color: var(--cyan-soft); font-size: 16px; font-weight: 800; }
.evolution-zoom-controls button:nth-child(2) { font-size: 8px; letter-spacing: .12em; }
.evolution-zoom-dialog > p { margin: 10px 2px 0; text-align: center; }

@media (max-width: 860px) {
  html, body { width: 100%; height: 100%; overflow: hidden; }
  body { position: fixed; inset: 0; touch-action: manipulation; }
  .page-shell { display: block; width: 100%; height: 100dvh; min-height: 0; overflow: hidden; padding: 0; }
  .intro { display: none; }
  .device-wrap { height: 100dvh; min-height: 0; overflow: hidden; align-items: center; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .device { display: flex; width: min(100%, 430px); height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))); min-height: 0; max-height: 844px; flex-direction: column; padding: 17px 12px; border-radius: 30px; }
  .device::before { inset: 6px; border-radius: 24px; }
  .device-header { height: 39px; flex: 0 0 39px; }
  .screen-frame { display: flex; min-height: 0; flex: 1; padding: 6px; border-radius: 20px; }
  .screen { width: 100%; height: auto; min-height: 0; flex: 1; }
}

@media (max-height: 700px) {
  .device { padding-top: 9px; }
  .device-header { height: 31px; flex-basis: 31px; }
  .egg-selector { padding-top: 12px; }
  .egg-browser { margin-top: 9px; }
  .egg-option { min-height: 192px; padding-top: 10px; }
  .egg-glyph { width: 118px; height: 118px; }
  .egg-preview { min-height: 62px; }
  .habitat { min-height: 215px; }
  .echo-sprite { width: 112px; height: 112px; }
  .gauge-grid { padding-top: 7px; padding-bottom: 8px; }
  .start-menu { padding-top: 15px; }
  .start-logo-wrap { width: 82px; height: 82px; margin-bottom: 9px; }
  .start-view h2 { font-size: 25px; }
  .start-view > p { margin-bottom: 10px; }
  .start-primary, .start-secondary { min-height: 53px; }
  .start-version { margin-top: 10px; }
}

@media (max-height: 610px) {
  .device { padding: 7px 9px 9px; }
  .device-header { height: 27px; flex-basis: 27px; padding: 0 6px; }
  .device-header span, .device-header strong { font-size: 10px; }
  .screen-frame { padding: 4px; border-radius: 17px; }
  .screen { border-radius: 14px; }
  .egg-selector { padding: 8px 10px 9px; }
  .egg-selector-heading p { display: none; }
  .egg-selector-heading h2 { margin-bottom: 2px; font-size: 18px; }
  .egg-browser { margin-top: 5px; }
  .egg-option { min-height: 154px; padding: 6px 8px; border-radius: 14px; }
  .egg-glyph { width: 92px; height: 92px; }
  .egg-option strong { margin-top: 5px; font-size: 10px; }
  .egg-option small { margin-top: 3px; font-size: 6px; }
  .egg-position { margin-top: 4px; }
  .egg-preview { min-height: 46px; margin-top: 5px; padding: 5px 7px; font-size: 7px; line-height: 1.25; }
  .egg-preview strong { margin-bottom: 2px; font-size: 9px; }
  .egg-preview span { margin-top: 2px; font-size: 6px; }
  .egg-confirm { min-height: 34px; margin-top: 5px; }
  .tab-bar { min-height: 45px; }
  .panel-heading { padding: 8px 11px 6px; }
  .panel-heading h2 { font-size: 19px; }
  .xp-card { margin: 0 10px 5px; padding: 6px 8px; }
  .xp-card > div:first-child { margin-bottom: 5px; }
  .progress-track { height: 5px; }
  .combat-stats { margin: 0 10px 5px; }
  .combat-stats div { padding-block: 4px; }
  .combat-stats strong { margin-top: 1px; }
  .training-card { gap: 7px; min-height: 48px; margin: 0 10px 5px; padding: 6px 8px; }
  .training-symbol { width: 28px; height: 28px; }
  .training-card strong { font-size: 8px; }
  .training-card small { margin-top: 1px; font-size: 6px; line-height: 1.2; }
  .training-card em { font-size: 6px; }
  .training-lock { margin: 2px 10px 5px; padding: 5px; }
  .locked-mission { min-height: 61px; margin: 2px 10px 6px; padding: 9px 11px; }
  .locked-mission strong { margin: 3px 0; font-size: 12px; }
  .locked-mission small, .locked-mission span { font-size: 5px; }
  .action-grid { gap: 5px; padding-inline: 10px; }
  .action-card { min-height: 55px; padding: 7px; }
  .care-tip { margin: 7px 10px 8px; padding: 6px 8px; }
}

@media (max-width: 360px) {
  .device { padding-inline: 8px; }
  .egg-selector { padding-inline: 9px; }
  .egg-browser { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 6px; }
  .egg-arrow { width: 34px; height: 66px; border-radius: 10px; font-size: 17px; }
  .egg-option { padding-inline: 6px; }
  .combat-stats { gap: 3px; margin-inline: 10px; }
  .combat-stats div { padding: 6px 1px; border-radius: 6px; }
  .combat-stats small { font-size: 5px; }
  .combat-stats strong { font-size: 9px; }
  .training-lock { margin-inline: 10px; padding: 7px 4px; font-size: 5px; line-height: 1.35; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}