:root {
  color-scheme: light;
  --ink: #3f342f;
  --muted: #8c7c72;
  --cream: #fff8ec;
  --paper: #fffdf7;
  --line: #dfd2c2;
  --pink: #ef6685;
  --orange: #e6a136;
  --blue: #668bdd;
  --mint: #52b9a8;
}

* { box-sizing: border-box; }

html,
body { min-width: 320px; min-height: 100%; }

body {
  margin: 0;
  color: var(--ink);
  background: #607b6b;
  font-family: "Trebuchet MS", Arial, sans-serif;
}

button,
canvas { -webkit-tap-highlight-color: transparent; }

button { font: inherit; }

.page-background {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 12px;
  background:
    radial-gradient(circle at 20% 15%, rgba(244, 213, 151, 0.38), transparent 28rem),
    radial-gradient(circle at 80% 86%, rgba(89, 130, 107, 0.65), transparent 30rem),
    linear-gradient(145deg, #385248, #8ca28c);
}

.phone-shell {
  position: relative;
  display: grid;
  width: min(430px, 100%);
  height: min(900px, calc(100svh - 24px));
  min-height: 650px;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
  border: 6px solid rgba(255, 251, 239, 0.68);
  border-radius: 42px;
  background: var(--cream);
  box-shadow:
    0 38px 90px rgba(20, 38, 30, 0.42),
    inset 0 0 0 1px rgba(117, 90, 67, 0.12);
}

.pet-header {
  position: relative;
  z-index: 5;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 17px 9px;
  background: rgba(255, 250, 240, 0.97);
}

.pet-identity { display: flex; align-items: center; gap: 10px; }

.pet-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 2px solid #d8a819;
  border-radius: 15px 15px 19px 15px;
  color: #314638;
  background: #f9d63d;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: -0.08em;
  box-shadow: inset 0 2px rgba(255, 255, 255, 0.58), 0 5px 12px rgba(112, 75, 23, 0.13);
  transform: rotate(-3deg);
}

.eyebrow {
  margin: 0 0 2px;
  color: #a69588;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.pet-header h1 {
  margin: 0;
  font-size: 21px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.level-badge {
  display: grid;
  min-width: 62px;
  gap: 2px;
  padding: 8px 11px;
  border: 1px solid #eadcc7;
  border-radius: 15px;
  background: #fffef9;
  text-align: center;
  box-shadow: 0 4px 10px rgba(77, 57, 40, 0.06);
}

.level-badge span { color: #d49722; font-size: 14px; font-weight: 1000; }
.level-badge small { color: #9c8c80; font-size: 12px; font-weight: 900; }

.status-hud {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 13px;
  padding: 9px 16px 12px;
  border-bottom: 1px solid #e8dccd;
  background: rgba(255, 250, 240, 0.97);
}

.hud-stat {
  display: grid;
  min-width: 0;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 6px;
}

.hud-icon {
  font-family: Arial, sans-serif;
  font-size: 23px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 2px rgba(91, 64, 40, 0.12));
}

.hud-heart .hud-icon { color: var(--pink); }
.hud-food .hud-icon { color: var(--orange); }
.hud-energy .hud-icon { color: var(--blue); }
.hud-clean .hud-icon { color: var(--mint); }

.hud-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 900;
}

.hud-value span { overflow: hidden; color: #87776e; text-overflow: ellipsis; white-space: nowrap; }
.hud-value strong { color: #4b3b34; font-size: 13px; }

.hud-bar {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border: 2px solid #e6d9cc;
  border-radius: 999px;
  background: #f3ebe1;
  box-shadow: inset 0 1px 2px rgba(81, 55, 38, 0.12);
}

.hud-bar > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hud-heart .hud-bar > span { background: linear-gradient(90deg, #e64e72, #ff92aa); }
.hud-food .hud-bar > span { background: linear-gradient(90deg, #d88820, #f5bc4f); }
.hud-energy .hud-bar > span { background: linear-gradient(90deg, #5479d3, #81a6f4); }
.hud-clean .hud-bar > span { background: linear-gradient(90deg, #3ca895, #6bd3c3); }

.game-viewport {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #a4bea8;
  isolation: isolate;
}

.three-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  outline: none;
  cursor: grab;
}

.three-stage:active { cursor: grabbing; }

.three-stage canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.crt-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background:
    repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(37, 31, 24, 0.12) 4px),
    radial-gradient(circle at center, transparent 54%, rgba(42, 31, 23, 0.18));
  mix-blend-mode: multiply;
}

.room-chip {
  position: absolute;
  z-index: 4;
  top: 12px;
  left: 13px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid rgba(86, 69, 53, 0.26);
  border-radius: 9px;
  color: #5b4d45;
  background: rgba(255, 248, 232, 0.83);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0.06em;
  box-shadow: 2px 3px 0 rgba(74, 58, 45, 0.12);
  backdrop-filter: blur(4px);
}

.speech-bubble {
  position: absolute;
  z-index: 5;
  top: 16%;
  right: 7%;
  width: max-content;
  max-width: 160px;
  padding: 10px 13px;
  border: 2px solid #cdbba7;
  border-radius: 18px;
  color: #59473e;
  background: #fffdf5;
  box-shadow: 3px 5px 0 rgba(92, 68, 51, 0.17);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  transform-origin: 70% 100%;
  transition: opacity 160ms ease, transform 160ms ease;
}

.speech-bubble::after {
  position: absolute;
  right: 23px;
  bottom: -10px;
  width: 16px;
  height: 16px;
  border-right: 2px solid #cdbba7;
  border-bottom: 2px solid #cdbba7;
  content: "";
  background: #fffdf5;
  transform: rotate(45deg);
}

.speech-bubble.changing { opacity: 0; transform: scale(0.88) translateY(5px); }

.sleep-bubble {
  position: absolute;
  z-index: 5;
  top: 31%;
  right: 22%;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  color: #5c70ac;
  font-family: Arial, sans-serif;
  font-weight: 1000;
  text-shadow: 2px 2px #e7ecff;
  pointer-events: none;
}

.sleep-bubble[hidden] { display: none; }
.sleep-bubble span:nth-child(1) { font-size: 28px; }
.sleep-bubble span:nth-child(2) { font-size: 20px; transform: translateY(-14px); }
.sleep-bubble span:nth-child(3) { font-size: 15px; transform: translateY(-25px); }

.touch-hint {
  position: absolute;
  z-index: 4;
  bottom: 10px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 6px 10px;
  border-radius: 9px;
  color: rgba(255, 253, 244, 0.94);
  background: rgba(65, 54, 46, 0.62);
  font-size: 12px;
  font-weight: 800;
  transform: translateX(-50%);
  backdrop-filter: blur(5px);
}

.scene-fallback {
  display: grid;
  height: 100%;
  place-items: center;
  padding: 34px;
  color: #59473e;
  text-align: center;
}

.care-dock {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  padding: 11px 11px 9px;
  border-top: 1px solid #e5d6c5;
  background: #fff7ea;
}

.care-button {
  display: grid;
  min-width: 0;
  min-height: 82px;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 7px 3px;
  border: 2px solid rgba(104, 76, 56, 0.12);
  border-radius: 18px;
  color: #5a4438;
  cursor: pointer;
  box-shadow: inset 0 2px rgba(255, 255, 255, 0.72), 0 4px 0 rgba(103, 74, 54, 0.12);
  transition: transform 120ms ease, filter 120ms ease;
}

.care-button:hover:not(:disabled) { filter: brightness(1.04); transform: translateY(-2px); }
.care-button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px rgba(255, 255, 255, 0.7), 0 1px 0 rgba(103, 74, 54, 0.1); }
.care-button:focus-visible { outline: 3px solid rgba(80, 115, 173, 0.45); outline-offset: 2px; }
.care-button:disabled { filter: grayscale(0.55); opacity: 0.48; cursor: not-allowed; }
.care-icon { font-size: 28px; line-height: 1; filter: drop-shadow(0 2px rgba(83, 51, 35, 0.12)); }
.care-button strong { overflow: hidden; width: 100%; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.care-feed { background: #ffd8df; }
.care-play { background: #ffe6a9; }
.care-sleep { background: #dbe5ff; }
.care-bathe { background: #ccefe7; }

.pet-footer {
  position: relative;
  z-index: 5;
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 14px 10px;
  color: #89786d;
  background: #fff7ea;
  font-size: 12px;
  font-weight: 800;
}

.mood-status { display: flex; min-width: 0; align-items: center; gap: 6px; }
.mood-status i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #55b68a; box-shadow: 0 0 0 3px rgba(85, 182, 138, 0.14); }
.mood-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-status { white-space: nowrap; }

.toast-region {
  position: absolute;
  z-index: 20;
  top: 120px;
  left: 50%;
  display: grid;
  width: min(340px, calc(100% - 28px));
  gap: 7px;
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  padding: 11px 14px;
  border: 2px solid #d9c7b1;
  border-radius: 14px;
  color: #59473e;
  background: rgba(255, 253, 245, 0.96);
  box-shadow: 3px 5px 0 rgba(92, 68, 51, 0.15);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  animation: toast-in 180ms ease both;
}

.toast.warning { border-color: #e1b44d; }
.toast.success { border-color: #6ab895; }
.toast.leaving { opacity: 0; transform: translateY(-6px); transition: 160ms ease; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-7px) scale(0.96); }
}

noscript {
  position: absolute;
  z-index: 30;
  right: 12px;
  bottom: 12px;
  left: 12px;
  padding: 12px;
  border-radius: 12px;
  color: #4b3b34;
  background: #ffe7a6;
  font-size: 14px;
  text-align: center;
}

@media (max-width: 520px) {
  .page-background { display: block; padding: 0; }
  .phone-shell {
    width: 100%;
    height: 100svh;
    min-height: 590px;
    border: 0;
    border-radius: 0;
  }
}

@media (max-height: 720px) {
  .phone-shell { min-height: 590px; }
  .pet-header { min-height: 60px; padding-block: 8px 6px; }
  .pet-avatar { width: 38px; height: 38px; }
  .status-hud { padding-block: 7px 9px; }
  .care-button { min-height: 68px; }
  .care-icon { font-size: 24px; }
}

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

/* V3 — menu de bichinho virtual: cores doces, volume macio e botões grandes. */
:root{--ink:#584945;--pink:#e9859c;--orange:#e6b155;--blue:#8d9fd8;--mint:#72b8aa}
body{display:grid;place-items:center;min-height:100svh;padding:12px;background:radial-gradient(ellipse at 15% 12%,#fae9ca 0,transparent 46%),radial-gradient(ellipse at 95% 90%,#c7ded9,transparent 50%),linear-gradient(145deg,#c2d8cc,#d5dfd0 48%,#b6d0cf);font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif}
[hidden]{display:none!important}.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.phone-shell{width:min(550px,100%);height:min(960px,calc(100svh - 24px));min-height:690px;grid-template-rows:auto auto minmax(0,1fr) auto;border:7px solid #fff6e6;border-radius:36px;box-shadow:0 26px 70px #395b5338,0 4px 0 #819c884a;isolation:isolate}
.pet-header{padding:15px 20px 12px;background:#fff8eb;min-height:82px}.pet-identity{gap:12px}.pet-avatar{width:48px;height:48px;border:2px solid #d6ab4b;background:linear-gradient(145deg,#ffe895,#efc75c);color:#94703e;font-size:21px;border-radius:17px;box-shadow:inset 0 3px #fff5bd,0 4px 0 #d9bd80;transform:rotate(-5deg)}.eyebrow{font-size:10px;letter-spacing:.16em;color:#b99c83}.pet-header h1{font-size:25px;letter-spacing:-.6px;color:#65524a}.level-badge{border:2px solid #ead6b4;border-radius:17px;box-shadow:0 3px 0 #ecddc5;background:#fffdf3;min-width:67px}.level-badge span{color:#c89e4c}.level-badge small{font-size:9px;color:#b09780}
.status-hud{gap:11px 22px;padding:9px 20px 16px;background:#fff8eb;border-bottom:2px solid #e6d9bf}.hud-stat{grid-template-columns:24px 1fr;gap:8px}.hud-icon{font-size:20px;display:grid;place-items:center}.hud-icon .icon{width:21px;height:21px;stroke-width:2.3}.hud-value{font-size:11px}.hud-value strong{font-size:12px;color:#6a594e}.hud-bar{height:9px;border-color:#dfd4be;background:#ece3d3;box-shadow:inset 0 1px 2px #715a4210}.hud-heart .hud-bar>span{background:linear-gradient(90deg,#e993a5,#f4b3be)}.hud-food .hud-bar>span{background:linear-gradient(90deg,#e6ba65,#f4d286)}.hud-energy .hud-bar>span{background:linear-gradient(90deg,#8fa5d7,#b2c3ec)}.hud-clean .hud-bar>span{background:linear-gradient(90deg,#79bbad,#a3d4c1)}
.game-viewport{background:#cadbca;min-height:350px}.three-stage canvas{image-rendering:auto!important}.three-stage{touch-action:none}.game-viewport:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -20px 30px -25px #493c2838;z-index:2}.room-chip{top:13px;left:13px;gap:7px;padding:8px 10px;border:2px solid #ffffec;border-radius:13px;background:#fffbebe8;box-shadow:0 3px 0 #73685021;font-size:10px;letter-spacing:0}.room-chip .icon{width:17px;height:17px;color:#97ab87}.room-chip>div>span{display:block;font-size:8px;font-weight:900;color:#a3a183;letter-spacing:.06em;margin-bottom:4px}.room-chip strong{display:flex;gap:6px;align-items:center;font-size:10px;color:#667963}.room-chip i{width:3px;height:3px;border-radius:50%;background:#afb695}.room-chip time{color:#8ca080;font-size:9px;font-weight:700}
.time-controls{position:absolute;right:13px;top:13px;z-index:4;display:grid;justify-items:end;gap:6px}.time-options{display:flex;gap:2px;padding:3px;border:2px solid #fffdef;border-radius:15px;background:#fff6e5ed;box-shadow:0 3px 0 #77674d21}.time-options button{font-size:10px;font-weight:900;color:#95a184;background:transparent;border:0;border-radius:10px;padding:7px 10px;transition:background .3s,transform .2s}.time-options button[aria-pressed=true]{background:#a2b99a;color:#fffdf1;box-shadow:inset 0 2px #c0d2b3,0 2px 0 #859b7a}.time-options button:hover{background:#e3eacf}.time-options button[aria-pressed=true]:hover{background:#96ae8b}.clock-select select{color:#667b61;background:#fff9e8e6;border:1px solid #fffde7;border-radius:9px;font-size:9px;font-weight:700;padding:4px 6px;max-width:155px}
.scene-tools{position:absolute;bottom:12px;right:11px;z-index:4;display:flex;gap:5px;align-items:center}.scene-tools select,.scene-tools button{height:26px;border:1px solid #fffeef;background:#fff9e7df;color:#78876f;border-radius:9px;font-family:inherit}.scene-tools select{width:102px;font-size:8px;font-weight:800;padding:2px}.scene-tools button{width:28px;display:grid;place-items:center;padding:0}.scene-tools .icon{width:15px;height:15px}.touch-hint{left:12px;bottom:14px;transform:none;font-size:8px;max-width:calc(100% - 163px);background:#6a796187;color:#fffcec;padding:5px 7px;border-radius:8px;line-height:1.35;font-weight:700}.touch-hint i{font-style:normal}.touch-hint span{font-size:12px;margin-right:2px}
.speech-bubble{max-width:170px;font-size:13px;line-height:1.3;font-weight:900;right:auto;transform:translate(-50%,-100%);padding:10px 13px;border:2px solid #e3d1b6;border-radius:17px;background:#fffcee;color:#947861;box-shadow:0 4px 0 #71573e21;pointer-events:none;transition:opacity .25s}.speech-bubble:after{right:auto;left:24px;background:#fffcee;border-color:#e3d1b6}.speech-bubble.quiet,.speech-bubble.changing{opacity:0;transform:translate(-50%,-100%)}.sleep-bubble{right:auto;top:auto;color:#8f9eca;text-shadow:1px 2px #fff2df;animation:dream 3s ease-in-out infinite}@keyframes dream{50%{transform:translateY(-9px)}}
.bottom-panel{background:#fff7e9;padding:0 0 11px;display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:8px}.care-dock{grid-column:1/-1;grid-row:1;padding:13px 13px 12px;gap:9px;border-top:2px solid #e5d7c0;background:#fff7e9}.care-button{min-height:83px;border:2px solid #b7896840;border-radius:19px;gap:7px;padding:9px 3px;box-shadow:inset 0 3px #fff9ec99,0 4px 0 #ad87672e;transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s,opacity .3s}.care-button:hover:not(:disabled){transform:translateY(-4px);filter:brightness(1.035);box-shadow:inset 0 3px #fff9ec99,0 7px 0 #ad876722}.care-button:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 3px #fff9ec99,0 1px 0 #ad87672e}.care-feed{background:linear-gradient(#fce1e6,#f2c7d2)}.care-play{background:linear-gradient(#fff0c6,#f6dfa1)}.care-sleep{background:linear-gradient(#e8ecff,#cfdaf4)}.care-bathe{background:linear-gradient(#def4eb,#bfdfd3)}.care-icon{font-size:30px;line-height:1}.care-button strong{font-size:12px;color:#806451}.care-button:disabled{opacity:.52;filter:saturate(.5);cursor:default}.companion-note{display:flex;align-items:center;gap:6px;padding-left:17px;font-size:10px;font-weight:900;color:#96816d;min-width:0}.companion-note small{display:none}.live-dot{width:7px;height:7px;background:#94b581;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px #94b58120}#mood-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.save-status{padding-right:16px;color:#b39c82;font-size:9px;display:flex;justify-content:flex-end;align-items:center;gap:4px;font-weight:700}.save-status .icon{width:12px;height:12px}.toast-region{top:auto;bottom:146px;max-width:83%;width:max-content}.toast{border-color:#e8d6b5;border-radius:16px;font-size:12px;box-shadow:0 4px 0 #71573e1a;padding:10px 15px;background:#fff9e9f2;color:#8c7159}.activity-strip{position:absolute;z-index:5;left:50%;bottom:55px;transform:translateX(-50%);width:210px;border:2px solid #fff6e4;border-radius:15px;padding:8px 12px;background:#fff9edeb;box-shadow:0 3px 0 #73685022;text-align:center;pointer-events:none}.activity-strip>span{font-size:10px;font-weight:900;color:#8a7c69}.activity-track{height:4px;background:#e4e8d5;border-radius:5px;margin-top:6px;overflow:hidden}.activity-track>span{display:block;width:0;height:100%;background:#9ac4ba;border-radius:5px}.scene-fallback button{border:0;border-radius:12px;background:#8fa884;color:white;padding:10px 14px;font-weight:bold}
button:focus-visible,select:focus-visible,.three-stage:focus-visible{outline:3px solid #c99c55;outline-offset:3px}
@media(max-width:600px){body{padding:0}.phone-shell{width:100%;height:100svh;min-height:680px;max-height:none;border-width:0;border-radius:0}.pet-header{padding-top:calc(12px + env(safe-area-inset-top));padding-left:18px;padding-right:18px}.bottom-panel{padding-bottom:calc(11px + env(safe-area-inset-bottom))}.status-hud{gap:9px 20px;padding:7px 19px 13px}.game-viewport{min-height:350px}.care-dock{padding:12px 12px 11px;gap:8px}.care-button{min-height:80px}.pet-header h1{font-size:24px}}
@media(max-width:380px){.pet-header{min-height:74px}.pet-avatar{width:42px;height:42px}.status-hud{padding:6px 15px 12px;gap:8px 17px}.time-controls{right:9px}.time-options button{font-size:9px;padding:7px}.room-chip{left:9px;padding:7px 8px}.room-chip>.icon{display:none}.care-dock{gap:6px;padding:11px 9px}.care-button{min-height:76px}.care-icon{font-size:27px}.care-button strong{font-size:11px}.speech-bubble{max-width:148px;font-size:12px}.touch-hint{max-width:calc(100% - 160px);font-size:7px}.save-status{font-size:8px}.companion-note{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* V4 — cômodos, corrida no bosque e transições */
.care-dock{grid-template-columns:repeat(5,1fr)}
.care-run{background:linear-gradient(#e3f5d2,#c6e6ad)}
.care-button{min-width:0}
.game-viewport{min-height:360px}
.touch-hint{bottom:56px;max-width:calc(100% - 24px)}
.place-nav{position:absolute;z-index:5;left:12px;bottom:12px;display:flex;gap:3px;padding:3px;border:2px solid #fffdef;border-radius:15px;background:#fff6e5ed;box-shadow:0 3px 0 #77674d21}
.place-nav button{display:flex;align-items:center;gap:5px;height:30px;padding:0 9px;border:0;border-radius:11px;background:transparent;color:#8d9a7c;font-size:10px;font-weight:900;cursor:pointer;transition:background .25s,color .25s,transform .2s}
.place-nav button .icon{width:15px;height:15px}
.place-nav button[aria-pressed=true]{background:#a2b99a;color:#fffdf1;box-shadow:inset 0 2px #c0d2b3,0 2px 0 #859b7a}
.place-nav button:hover:not(:disabled):not([aria-pressed=true]){background:#e3eacf}
.place-nav button:disabled{opacity:.55;cursor:default}
.iris{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.iris::before{content:"";position:absolute;left:var(--x,50%);top:var(--y,50%);width:var(--d,0);height:var(--d,0);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 200vmax #2f2622}
.iris-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff3d6;font-size:24px;font-weight:1000;letter-spacing:.02em;text-shadow:0 3px 0 #0005;transition:opacity .2s;white-space:nowrap}
.food-picker{position:absolute;z-index:9;left:50%;bottom:62px;transform:translateX(-50%);width:min(340px,calc(100% - 24px));padding:14px 14px 12px;border:2px solid #fff6e4;border-radius:22px;background:#fffaf0f5;box-shadow:0 6px 0 #71573e1f,0 18px 40px #3a2b1f30;animation:pop .22s cubic-bezier(.2,.9,.3,1.3) both}
.food-picker p{margin:0 0 10px;font-size:13px;font-weight:900;color:#8c7159;text-align:center}
.food-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.food-options button{display:grid;justify-items:center;gap:3px;padding:10px 4px 9px;border:2px solid #b7896830;border-radius:16px;background:linear-gradient(#fff,#fbeedc);cursor:pointer;box-shadow:0 3px 0 #ad87672e;transition:transform .2s}
.food-options button:hover{transform:translateY(-3px)}
.food-options span{font-size:30px;line-height:1}.food-options strong{font-size:12px;color:#7c5f4c}.food-options small{font-size:9px;color:#a98e76;font-weight:700}
.food-close{position:absolute;top:8px;right:10px;width:26px;height:26px;border:0;border-radius:50%;background:#f1e6d4;color:#8c7159;cursor:pointer;font-size:12px}
@keyframes pop{from{transform:translate(-50%,12px) scale(.94)}}
/* Corrida */
.app-shell.is-running{grid-template-rows:auto 0 minmax(0,1fr) 0}
.app-shell.is-running .status-hud,.app-shell.is-running .bottom-panel{visibility:hidden;overflow:hidden;padding:0;border:0}
.app-shell.is-running .time-controls,.app-shell.is-running .place-nav,.app-shell.is-running .touch-hint,.app-shell.is-running .scene-tools,.app-shell.is-running .room-chip{display:none}
.run-hud{position:absolute;inset:0;z-index:6;pointer-events:none}
.run-top{position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.run-chip,.run-dist,.run-pause{border:2px solid #fffdef;background:#fff6e5ee;box-shadow:0 3px 0 #77674d26;border-radius:15px}
.run-chip{display:flex;align-items:center;gap:6px;padding:6px 12px;font-size:18px}.run-chip strong{font-size:18px;color:#b98a1e}
.run-dist{display:grid;justify-items:center;padding:4px 16px;line-height:1}.run-dist strong{font-size:24px;color:#5d7650}.run-dist small{font-size:9px;font-weight:900;color:#9aa58a;letter-spacing:.1em}
.run-pause{width:44px;height:44px;display:grid;place-items:center;color:#7d8c6f;pointer-events:auto;cursor:pointer}
.run-count{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.6);font-size:78px;font-weight:1000;color:#fff7dc;text-shadow:0 5px 0 #6b8c4a,0 10px 24px #0005;opacity:0;transition:opacity .2s,transform .3s cubic-bezier(.2,.9,.3,1.4)}
.run-count.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.run-count.go{color:#ffe36e}.run-count.oops{color:#ffd1d1;text-shadow:0 5px 0 #b25a5a,0 10px 24px #0005;font-size:56px}
.run-pad{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:10px;pointer-events:none}
.run-pad button{pointer-events:auto;width:58px;height:52px;border:2px solid #fffdef;border-radius:16px;background:#fff6e5cc;color:#6f845f;font-size:20px;box-shadow:0 4px 0 #77674d33;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.run-pad button:active{transform:translateY(3px);box-shadow:0 1px 0 #77674d33}
.run-help{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);margin:0;padding:5px 10px;border-radius:9px;background:#3e4a36a8;color:#fffbe8;font-size:10px;font-weight:800;white-space:nowrap;transition:opacity .6s}
.run-hud:not(.intro) .run-help{opacity:0}
.run-card{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);width:min(320px,calc(100% - 32px));padding:18px 18px 16px;border:3px solid #fff6e4;border-radius:26px;background:#fffaf0f7;box-shadow:0 8px 0 #71573e24,0 24px 50px #1f2a1a55;text-align:center;animation:card .3s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes card{from{transform:translate(-50%,-44%) scale(.92)}}
.run-card h2{margin:4px 0 12px;font-size:22px;color:#65524a}.run-card>p{margin:0 0 12px;color:#9a8470;font-weight:800;font-size:13px}.run-card .eyebrow{margin:0}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.res-grid div{display:grid;gap:2px;padding:10px 4px;border-radius:14px;background:#f5ecdc}
.res-grid strong{font-size:22px;color:#6c8a58}.res-grid small{font-size:9px;font-weight:900;color:#a38f7b;letter-spacing:.06em}
.res-best{font-size:11px!important}.res-reward{font-size:12px!important;color:#7f9c6b!important}
.run-actions{display:grid;gap:8px}
.run-actions button{height:44px;border:2px solid #b7896830;border-radius:14px;background:#f6ecdc;color:#7c5f4c;font-weight:900;font-size:13px;cursor:pointer;box-shadow:0 3px 0 #ad87672e}
.run-actions button.primary{background:linear-gradient(#c9e8ad,#a8d68a);color:#3f5a2e}
.run-actions button:disabled{opacity:.55;cursor:default}
@media(max-width:420px){.place-nav button span{display:none}.place-nav button{padding:0 10px}.care-dock{gap:6px;padding:11px 9px}.care-button strong{font-size:11px}.care-icon{font-size:26px}}
@media(max-width:360px){.care-button strong{font-size:10px}.care-icon{font-size:23px}.run-pad button{width:52px}}
.game-viewport:has(.activity-strip:not([hidden])) .touch-hint{opacity:0}
.touch-hint{transition:opacity .3s}
.activity-strip{bottom:60px}