/* =========================================================
   Trilhas da Natureza — passeio livre e pets escondidos
   (src/minigames/pet-explore.js)
   ========================================================= */

.game-stage--explore { background: #0d2a1d; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; }

/* z-index 1: abaixo da barra do topo do palco (pontos, som, tela cheia, pausa, sair — z-index 2),
   senão o joystick, que cobre o palco inteiro, engole os toques nesses botões. */
.tx-hud { position: absolute; inset: 0; z-index: 1; pointer-events: none; color: #f6f8ff; font-family: var(--font-body); }
.tx-hud button, .tx-stickzone { pointer-events: auto; }

/* ---------- topo: região, contagem, quente/frio, minimapa ---------- */
.tx-top {
  position: absolute; top: calc(var(--stage-hud, 52px) + 2px); left: 8px; right: 8px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.tx-left { display: grid; gap: 5px; justify-items: start; min-width: 0; }
.tx-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(10,14,40,.66); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px);
  font: 700 .8rem var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tx-chip--region { font-size: .86rem; }
.tx-chip--sense { transition: background .3s, color .3s; }
.tx-chip--sense[data-heat="hot"] { background: rgba(239,68,68,.78); border-color: #fecaca; animation: tx-throb .7s ease-in-out infinite; }
.tx-chip--sense[data-heat="warm"] { background: rgba(245,158,11,.7); }
.tx-chip--sense[data-heat="cool"] { background: rgba(56,120,190,.66); }
.tx-chip--sense[data-heat="cold"] { background: rgba(30,60,120,.66); color: #dbeafe; }
.tx-chip--sense[data-heat="done"] { background: rgba(34,197,94,.75); }
@keyframes tx-throb { 50% { transform: scale(1.07); } }

.tx-right { display: grid; gap: 6px; justify-items: end; flex: none; }
.tx-mini {
  --px: 50%; --py: 50%;
  position: relative; display: block; padding: 0; width: 120px; aspect-ratio: 150 / 110;
  border-radius: 12px; border: 2px solid rgba(255,255,255,.35); overflow: hidden; cursor: pointer;
  background: #0e1428; box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.tx-mini canvas { width: 100%; height: 100%; display: block; image-rendering: auto; }
.tx-mini::after {
  content: ''; position: absolute; left: var(--px); top: var(--py); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #7c3aed, 0 0 8px #fff;
}
.tx-siderow { display: flex; gap: 6px; }
.tx-round {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28);
  background: rgba(10,14,40,.66); font-size: 1.15rem; cursor: pointer; backdrop-filter: blur(6px);
  transition: transform var(--t-fast, .12s);
}
.tx-round:active, .tx-mini:active { transform: scale(.94); }

/* ---------- joystick ---------- */
.tx-stickzone { position: absolute; inset: 0; touch-action: none; }
.tx-stick {
  position: absolute; left: 82px; bottom: 82px; width: 104px; height: 104px; transform: translate(-50%, 50%);
  border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: rgba(10,14,40,.28); opacity: .7;
  pointer-events: none;
}
.tx-stick.is-on { bottom: auto; transform: translate(-50%, -50%); opacity: 1; }
.tx-stick__knob {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #bbf7d0 60%, #22c55e); box-shadow: 0 4px 10px rgba(0,0,0,.4);
}

/* ---------- farejar ---------- */
.tx-sniff {
  --cool: 0;
  position: absolute; right: 16px; bottom: 22px; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; align-content: center; gap: 0; cursor: pointer;
  border: 3px solid #ffe08a; color: #3a1a00;
  background:
    conic-gradient(rgba(10,14,40,.55) calc(var(--cool) * 360deg), transparent 0),
    radial-gradient(circle at 35% 30%, #fff3b0, #ffcf4d 55%, #ff9a3d);
  box-shadow: 0 6px 18px rgba(255,138,61,.45);
  transition: transform var(--t-fast, .12s);
}
.tx-sniff:active { transform: scale(.94); }
.tx-sniff.is-cooling { filter: saturate(.6); }
.tx-sniff__icon { font-size: 1.7rem; line-height: 1; }
.tx-sniff__label { font: 800 .72rem var(--font-display); }

/* ---------- descoberta e região ---------- */
.tx-toast {
  position: absolute; left: 50%; bottom: 176px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; width: min(92%, 380px); padding: 8px 14px 8px 8px;
  border-radius: 20px; background: rgba(10,14,40,.82); border: 2px solid #9fffe0; backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.tx-toast[data-rarity="raro"], .tx-toast[data-rarity="epico"] { border-color: #a78bfa; }
.tx-toast[data-rarity="lendario"], .tx-toast[data-rarity="mitico"] { border-color: #fde047; box-shadow: 0 0 26px rgba(253,224,71,.45); }
.tx-toast.is-showing { animation: tx-pop .45s cubic-bezier(.2,1.5,.4,1); }
@keyframes tx-pop { from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.85); } }
.tx-toast__art { width: 64px; height: 64px; flex: none; border-radius: 16px; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); }
.tx-toast__art > svg { width: 100%; height: 100%; }
.tx-toast__body { display: grid; gap: 2px; min-width: 0; }
.tx-toast__title { font: 800 1rem var(--font-display); }
.tx-toast__meta { font-size: .76rem; color: #cbd5e1; }
.tx-toast__new { font: 800 .78rem var(--font-display); color: #fde047; }

.tx-banner {
  position: absolute; left: 50%; top: 24%; transform: translate(-50%, -50%);
  display: grid; gap: 2px; justify-items: center; text-align: center; padding: 10px 22px; border-radius: 22px;
  background: rgba(10,14,40,.6); backdrop-filter: blur(4px); pointer-events: none;
}
.tx-banner.is-showing { animation: tx-banner 2.4s ease forwards; }
@keyframes tx-banner {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(.9); }
  12%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -56%) scale(1); }
}
.tx-banner__title { font: 800 1.45rem var(--font-display); text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.tx-banner__sub { font-size: .86rem; color: #e2e8f0; }

/* ---------- painéis: início, diário, mapa, resumo ---------- */
.tx-panel {
  /* Também abaixo da barra do topo: com um painel aberto ainda dá para pausar, silenciar ou sair. */
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 56px 12px 16px;
  background: rgba(6,10,26,.55); backdrop-filter: blur(3px); overflow-y: auto;
}
.tx-panel__card {
  display: grid; gap: 10px; justify-items: center; width: min(100%, 520px); padding: 16px;
  border-radius: 24px; color: #f6f8ff; text-align: center;
  background: linear-gradient(180deg, rgba(30,70,52,.95), rgba(14,30,40,.96));
  border: 1px solid rgba(255,255,255,.18); box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.tx-panel__title { margin: 0; font: 800 1.25rem var(--font-display); }
.tx-panel__sub { margin: 0; font-size: .86rem; color: #cbd5e1; }
.tx-panel__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 8px 18px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.14);
  color: #fff; font: 700 .95rem var(--font-display); cursor: pointer;
}
.tx-btn:active { transform: scale(.96); }
.tx-btn--go {
  background: linear-gradient(135deg, #86efac, #22c55e); color: #052e16; border-color: #bbf7d0;
  box-shadow: 0 6px 18px rgba(34,197,94,.4); font-size: 1.05rem; padding: 10px 24px;
}
.tx-intro__art { width: 120px; height: 140px; }
.tx-intro__art > svg { width: 100%; height: 100%; }
.tx-tips { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; text-align: left; font-size: .88rem; }
.tx-tips li { padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.08); }

.tx-journal { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; width: 100%; }
.tx-journal__cell {
  position: relative; display: grid; gap: 2px; justify-items: center; padding: 8px 4px; border-radius: 16px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14);
}
.tx-journal__art { width: 64px; height: 64px; }
.tx-journal__art > svg { width: 100%; height: 100%; }
.tx-journal__cell.is-unknown .tx-journal__art { filter: brightness(0) opacity(.5); }
.tx-journal__name { font: 800 .82rem var(--font-display); }
.tx-journal__info { font-size: .66rem; color: #cbd5e1; line-height: 1.2; }
.tx-journal__new {
  position: absolute; top: 4px; right: 4px; padding: 1px 6px; border-radius: var(--r-pill);
  background: #fde047; color: #3a2a00; font: 800 .6rem var(--font-display);
}

.tx-bigmap { width: 100%; height: auto; border-radius: 14px; border: 2px solid rgba(255,255,255,.25); background: #0e1428; }
.tx-legend { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.tx-legend__item { font: 700 .72rem var(--font-display); padding: 2px 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.08); color: #94a3b8; }
.tx-legend__item.is-visited { background: rgba(134,239,172,.2); color: #dcfce7; }

.tx-summary__pets { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-height: 180px; overflow-y: auto; }
.tx-summary__face { width: 52px; height: 52px; border-radius: 14px; background: rgba(255,255,255,.1); }
.tx-summary__face > svg { width: 100%; height: 100%; }
.tx-summary__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
.tx-stat { display: grid; gap: 1px; padding: 8px 4px; border-radius: 14px; background: rgba(255,255,255,.1); }
.tx-stat strong { font: 800 1.2rem var(--font-display); color: #fde047; }
.tx-stat span { font-size: .66rem; color: #cbd5e1; }

@media (max-width: 380px) {
  .tx-mini { width: 96px; }
  .tx-summary__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tx-chip--sense[data-heat="hot"], .tx-toast.is-showing { animation: none; }
}

/* ---------- ficha do pet, adoção e devolução ---------- */
.tx-cardbtn {
  position: absolute; right: 12px; bottom: 118px; min-height: 44px; padding: 8px 14px; border-radius: var(--r-pill);
  border: 2px solid #9fffe0; background: rgba(10,40,34,.82); color: #e6fff7; font: 800 .88rem var(--font-display);
  cursor: pointer; backdrop-filter: blur(6px); box-shadow: 0 6px 16px rgba(0,0,0,.35); max-width: calc(100% - 24px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: tx-pop .3s ease-out;
}
.tx-cardbtn:active { transform: scale(.96); }
.tx-toast__see {
  flex: none; margin-left: auto; min-height: 36px; padding: 4px 12px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid rgba(159,255,224,.6); background: rgba(159,255,224,.16); color: #e6fff7; font: 800 .78rem var(--font-display);
  pointer-events: auto;
}
.tx-sheet__art { width: 130px; height: 150px; }
.tx-sheet__art > svg { width: 100%; height: 100%; }
.tx-sheet__rarity {
  padding: 2px 10px; border-radius: var(--r-pill); font: 800 .74rem var(--font-display);
  background: rgba(255,255,255,.16); color: #f1f5f9;
}
.tx-sheet__rarity[data-rarity="incomum"] { background: #86efac; color: #052e16; }
.tx-sheet__rarity[data-rarity="raro"] { background: #93c5fd; color: #0b1e3f; }
.tx-sheet__rarity[data-rarity="epico"] { background: #c4b5fd; color: #2e1065; }
.tx-sheet__rarity[data-rarity="lendario"] { background: #fde047; color: #3a2a00; }
.tx-sheet__rarity[data-rarity="mitico"] { background: linear-gradient(90deg,#f0abfc,#93c5fd,#86efac); color: #1e1b4b; }
.tx-sheet__blurb { margin: 0; font-size: .86rem; color: #e2e8f0; max-width: 40ch; }
.tx-sheet__grid {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.08);
}
.tx-sheet__label { font-size: .74rem; color: #94a3b8; }
.tx-sheet__value { font: 700 .84rem var(--font-display); }
.tx-sheet__name { display: flex; align-items: center; gap: 8px; width: 100%; font: 700 .86rem var(--font-display); }
.tx-sheet__input {
  flex: 1; min-width: 0; min-height: 40px; padding: 6px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.25); color: #fff; font: 700 1rem var(--font-display);
}
.tx-sheet__status { margin: 0; min-height: 1.1em; font-size: .82rem; color: #fde68a; }
.tx-btn--soft { min-height: 38px; padding: 6px 14px; font-size: .85rem; }
.tx-btn--bye { background: linear-gradient(135deg, #bbf7d0, #4ade80); color: #052e16; border-color: #dcfce7; }
.tx-btn:disabled { opacity: .55; cursor: default; }
.tx-release { display: grid; gap: 8px; width: 100%; }
.tx-release__row {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px; text-align: left;
  padding: 6px 10px 6px 6px; border-radius: 16px; background: rgba(255,255,255,.08);
}
.tx-release__art { width: 56px; height: 56px; }
.tx-release__art > svg { width: 100%; height: 100%; }
.tx-release__info { display: grid; min-width: 0; }
.tx-release__info strong { font: 800 .95rem var(--font-display); }
.tx-release__info small { font-size: .72rem; color: #cbd5e1; }
.tx-release__confirm {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
  padding: 8px; border-radius: 12px; background: rgba(34,197,94,.14); font-size: .82rem;
}
.tx-summary__face { border: 0; padding: 0; cursor: pointer; }
.tx-summary__face.is-adopted { box-shadow: 0 0 0 2px #ff8fb4; }

/* ---------- expedição on-line ---------- */
.tx-emotes {
  position: absolute; right: 8px; top: calc(var(--stage-hud, 52px) + 136px); display: flex; flex-direction: column; gap: 4px;
  padding: 4px; border-radius: var(--r-pill); background: rgba(10,14,40,.55); backdrop-filter: blur(6px);
}
.tx-emote {
  width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12);
  font-size: 1.15rem; cursor: pointer;
}
.tx-emote:active { transform: scale(.9); }
.tx-mini__dot {
  position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--seat); box-shadow: 0 0 0 1.5px #0b1020; pointer-events: none;
}
.tx-team { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tx-team__member { display: grid; justify-items: center; gap: 2px; font: 700 .76rem var(--font-display); }
.tx-team__face {
  width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.1); box-shadow: 0 0 0 3px var(--seat);
}
.tx-team__face > svg { width: 100%; height: 100%; }
.tx-resume { margin: 0; padding: 6px 12px; border-radius: 12px; background: rgba(125,211,252,.16); color: #e0f2fe; font: 700 .84rem var(--font-display); }

/* ---------- zonas: segura (moedas e cristais) e de batalha (selvagens) ---------- */
.tx-chip--zone[data-zone="safe"] { background: rgba(21,128,61,.72); border-color: #bbf7d0; }
.tx-chip--zone[data-zone="battle"] { background: rgba(185,28,28,.78); border-color: #fecaca; animation: tx-throb 1.4s ease-in-out infinite; }

.tx-hero {
  position: absolute; left: 8px; bottom: 146px; width: min(168px, 44%); display: grid; gap: 4px; padding: 6px 8px;
  border-radius: 14px; background: rgba(10,14,40,.74); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px);
  pointer-events: none;
}
.tx-hero[hidden], .tx-skills[hidden], .tx-down[hidden] { display: none; }
.tx-hero__top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tx-hero__lv { flex: none; padding: 1px 7px; border-radius: var(--r-pill); background: #fde047; color: #3a2a00; font: 800 .7rem var(--font-display); }
.tx-hero__name { min-width: 0; font: 800 .8rem var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-bar { position: relative; height: 12px; border-radius: 7px; background: rgba(255,255,255,.14); overflow: hidden; }
.tx-bar > i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; transition: width .18s; }
.tx-bar--hp > i { background: linear-gradient(#86efac, #22c55e); }
.tx-bar--hp.is-low > i { background: linear-gradient(#fca5a5, #ef4444); }
.tx-bar--xp { height: 6px; }
.tx-bar--xp > i { background: linear-gradient(#fde68a, #f59e0b); }
.tx-bar__text { position: absolute; inset: 0; display: grid; place-items: center; font: 800 .62rem var(--font-display); text-shadow: 0 1px 2px #000; }

.tx-skills { position: absolute; right: 12px; bottom: 14px; width: 200px; height: 200px; pointer-events: none; }
.tx-skill {
  --size: 60px; --cd: 0; --el: #94a3b8;
  position: absolute; width: var(--size); height: var(--size); border-radius: 50%; padding: 0;
  display: grid; place-items: center; align-content: center; border: 2px solid color-mix(in srgb, var(--el) 80%, #fff);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--el) 55%, #fff), color-mix(in srgb, var(--el) 70%, #10132a) 70%);
  color: #fff; font: inherit; cursor: pointer; touch-action: none; overflow: hidden;
  box-shadow: 0 5px 14px rgba(0,0,0,.4), inset 0 -3px rgba(0,0,0,.2); transition: transform .08s;
}
.tx-skill:active { transform: scale(.92); }
.tx-skill::before { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(rgba(10,12,30,.72) calc(var(--cd) * 360deg), transparent 0); }
.tx-skill.is-ready { animation: tx-skill-ready 1.6s ease-in-out infinite; }
@keyframes tx-skill-ready { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--el) 45%, transparent), 0 5px 14px rgba(0,0,0,.4); } }
.tx-skill.is-locked { filter: grayscale(1) brightness(.55); cursor: default; }
.tx-skill.is-locked .tx-skill__name { visibility: hidden; }
.tx-skill__icon { position: relative; font-size: 1.3rem; line-height: 1; }
.tx-skill__name { position: relative; max-width: 92%; font: 700 .5rem var(--font-display); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.tx-skill__lock { position: absolute; bottom: 6px; font: 800 .58rem var(--font-display); }
.tx-skill__key { position: absolute; top: 3px; right: 8px; font-size: .55rem; opacity: .65; }
.tx-skill--basico { --size: 82px; right: 0; bottom: 0; }
.tx-skill--basico .tx-skill__icon { font-size: 1.8rem; }
.tx-skill--forte { right: 100px; bottom: 6px; }
.tx-skill--especial { right: 76px; bottom: 76px; }
.tx-skill--extra { right: 6px; bottom: 100px; }
.tx-skill--supremo { --size: 56px; right: 128px; bottom: 126px; border-width: 3px; border-color: #fde047; }

.tx-down {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); padding: 10px 16px; border-radius: var(--r-pill);
  background: rgba(10,14,40,.85); border: 2px solid #fecaca; font: 800 .95rem var(--font-display); text-align: center; pointer-events: none;
}
/* Em zona de batalha os golpes ocupam o lugar do farejar; a ficha vai para a esquerda. */
.tx-hud:has(.tx-skills:not([hidden])) .tx-cardbtn { right: auto; left: 12px; bottom: 252px; }
.tx-hud:has(.tx-skills:not([hidden])) .tx-toast { bottom: 232px; }
@media (max-height: 520px) {
  .tx-skills { transform: scale(.8); transform-origin: bottom right; }
  .tx-hero { bottom: 12px; left: 140px; }
}
@media (prefers-reduced-motion: reduce) { .tx-chip--zone[data-zone="battle"], .tx-skill.is-ready { animation: none; } }