/* Fundo preto de propósito: em tela AMOLED pixel preto fica apagado e economiza bateria. */
:root {
  color-scheme: dark;
  --bg: #000;
  --text: #eaf6f3;
  --muted: #8fa5a1;
  --surface: #ffffff17;
  --surface-strong: #ffffff26;
  --accent: #ff8c1a; /* trocado pela aparência escolhida */
  --cheek: #ff8fa3;
  --dot-idle: #fff1a8;
  --dot-listen: #ff5d73;
  --dot-think: #ffc857;
  --dot-speak: #7fdcff;
  --approve: #34d399;
  --deny: #ff5c6c;
  --fs: clamp(13px, 5.6vmin, 22px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs)/1.3 system-ui, Roboto, "Segoe UI", sans-serif;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button, input { font: inherit; color: inherit; }

button {
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  padding: .55em 1em;
  min-height: 40px;
  cursor: pointer;
}
button:active { background: var(--surface-strong); }
button.primary { background: var(--accent); color: #140a00; font-weight: 600; }

#app {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

#stage {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

#pet { width: min(78vw, 56vh); }

#caption {
  margin: 0;
  width: 100%;
  padding: 0 8vw 6vh;
  min-height: 3.2em;
  max-height: 34vh;
  overflow-y: auto;
  text-align: center;
  user-select: text;
}
#caption .heard { display: block; color: var(--muted); font-size: .82em; margin-bottom: .2em; }
#caption .heard:empty { display: none; }

.corner {
  position: absolute;
  top: max(3vh, env(safe-area-inset-top));
  width: max(36px, 11vmin);
  height: max(36px, 11vmin);
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  z-index: 1;
}
.corner.left { left: 6vw; }
.corner.right { right: 6vw; }
.corner svg, .choice svg {
  width: 58%;
  height: 58%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.corner svg rect { stroke-width: 1.6; }
#btn-menu svg { stroke-width: 3.4; }

/* ── Folhas (telas por cima) ─────────────────────────────────────────── */
.sheet {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2;
  background: #000000f2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6em;
  padding: 8vh 8vw;
  overflow-y: auto;
  text-align: center;
}
/* Centraliza com margens automáticas: se o conteúdo não couber, começa do topo e rola
   inteiro (com justify-content: center o topo ficava cortado, fora do alcance da rolagem). */
.sheet > * { flex-shrink: 0; }
.sheet > :first-child { margin-top: auto; }
.sheet > :last-child { margin-bottom: auto; }
.sheet[hidden] { display: none; }
.sheet h2 { margin: 0; font-size: 1.15em; line-height: 1.25; }
.sheet .muted { margin: 0; color: var(--muted); font-size: .85em; word-break: break-word; }
.sheet .eyebrow { margin: 0; color: var(--dot-think); font-size: .75em; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sheet .error { margin: 0; color: var(--deny); font-size: .85em; min-height: 1.2em; }
.sheet form { display: flex; flex-direction: column; gap: .6em; width: 100%; }
.sheet input {
  width: 100%;
  border: 1px solid var(--surface-strong);
  border-radius: 14px;
  background: #121212;
  padding: .6em .8em;
  outline: none;
  user-select: text;
}
.sheet input:focus { border-color: var(--accent); }
#pair-code { text-align: center; font-size: 1.5em; letter-spacing: .2em; }
.sheet .row { display: flex; gap: .5em; }
.sheet .row button { flex: 1; }

.choices { display: flex; gap: 9vw; margin-top: .4em; }
.choice {
  width: max(64px, 22vmin);
  height: max(64px, 22vmin);
  padding: 0;
  display: grid;
  place-items: center;
}
.choice.approve { background: var(--approve); color: #00261a; }
.choice.deny { background: var(--deny); color: #2b0006; }
.choice svg { stroke-width: 3; }

.menu { display: flex; flex-direction: column; gap: .5em; width: 100%; }
.menu-link {
  display: block;
  border-radius: 999px;
  background: var(--surface);
  padding: .55em 1em;
  color: inherit;
  text-decoration: none;
}
.menu-link[hidden] { display: none; }

/* Escolha de voz */
.sheet select {
  width: 100%;
  border: 1px solid var(--surface-strong);
  border-radius: 14px;
  background: #121212;
  color: var(--text);
  padding: .55em .7em;
  font: inherit;
}
.sheet .slider { display: flex; flex-direction: column; gap: .2em; width: 100%; font-size: .85em; text-align: left; }
.sheet .slider span { display: flex; justify-content: space-between; color: var(--muted); }
.sheet .slider b { color: var(--text); font-weight: 600; }
.sheet .slider input { width: 100%; accent-color: var(--accent); }
.sheet .row { width: 100%; }

/* Escolha de aparência */
.skin-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em; width: 100%; }
.skin-option {
  flex: 1 1 28%;
  min-width: 72px;
  max-width: 140px;
  border-radius: 18px;
  padding: .4em .3em .5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2em;
  font-size: .8em;
  border: 2px solid transparent;
}
.skin-option .pet, .skin-option img { width: 100%; }
.skin-option img { aspect-ratio: 1; object-fit: contain; }
.skin-option[aria-pressed="true"] { border-color: var(--accent); }

/* ── O bichinho: cena 3D comum a todas as aparências ─────────────────── */
.pet {
  position: relative;
  aspect-ratio: 1;
  container-type: inline-size;
  --u: calc(100cqw / 200); /* 1 unidade do desenho 200x200 */
  --k: 1;                  /* quanto o corpo gira: tudo no 3D, um pouco no desenho plano */
  --ink: #111;
  --level: 0;
  --dot-color: var(--dot-idle);
}
.pet[data-model="flat"] { --k: .35; }
.pet[data-state="listening"] { --dot-color: var(--dot-listen); }
.pet[data-state="thinking"] { --dot-color: var(--dot-think); }
.pet[data-state="speaking"] { --dot-color: var(--dot-speak); }

.pet .scene { position: absolute; top: 0; right: 0; bottom: 0; left: 0; perspective: calc(var(--u) * 560); perspective-origin: 50% 30%; }
.pet .hop, .pet .bob, .pet .rig { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-style: preserve-3d; }
.pet .hop { transition: transform .5s ease; }
.pet .bob { transform-origin: 50% 90%; animation: breathe 4.5s ease-in-out infinite; }

/* A pose do corpo vem de três ângulos; cada estado muda os ângulos e a transição faz o movimento. */
.pet .rig {
  --rx: -14deg;
  --ry: -16deg;
  --rz: 0deg;
  transform-origin: 50% 57%;
  transform: rotateX(calc(var(--rx) * var(--k))) rotateY(calc(var(--ry) * var(--k))) rotateZ(calc(var(--rz) * var(--k)));
  transition: transform .8s cubic-bezier(.34, 1.35, .5, 1);
}

.pet .flat, .pet .overlay, .pet .face, .pet .sprite { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
.pet .overlay { pointer-events: none; }
.pet .flat,
.pet .sprite { transition: filter .4s; }

/* Passeio pela tela (pets do Codex): a cena toda anda de lado. */
.pet .scene, .pet .overlay {
  transform: translateX(calc(var(--walk, 0) * 1%));
  transition: transform var(--walk-ms, 0ms) linear;
}

/* Pets do Codex já trazem a própria animação: sem giro 3D, sem respiração e sem pulo extra. */
.pet[data-model="sprite"] { --k: 0; }
.pet[data-model="sprite"] .bob,
.pet[data-model="sprite"][data-state="happy"] .hop,
.pet[data-model="sprite"][data-state="surprised"] .hop { animation: none; }

/* A sombra acende com a cor do estado: vermelho ouvindo, âmbar pensando, azul falando. */
.pet .shadow {
  position: absolute;
  left: 21%;
  width: 58%;
  top: 88%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--dot-color), transparent);
  opacity: .25;
  transition: opacity .3s, transform .08s linear;
}
.pet[data-state="listening"] .shadow,
.pet[data-state="thinking"] .shadow,
.pet[data-state="speaking"] .shadow { opacity: .65; }
.pet[data-state="listening"] .shadow { transform: scale(calc(1 + var(--level) * .45)); }

/* ── Blocos 3D (usados pelo Caixote) ─────────────────────────────────── */
.pet .cuboid {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--z) * var(--u)));
}
.pet .side { position: absolute; backface-visibility: hidden; transition: filter .4s; }
.pet .side.front, .pet .side.back { top: 0; right: 0; bottom: 0; left: 0; }
.pet .side.front { transform: translateZ(calc(var(--d) * var(--u) / 2)); }
.pet .side.back { transform: rotateY(180deg) translateZ(calc(var(--d) * var(--u) / 2)); }
.pet .side.left, .pet .side.right {
  top: 0;
  height: 100%;
  width: calc(var(--d) * var(--u));
  left: calc((var(--w) - var(--d)) * var(--u) / 2);
}
.pet .side.right { transform: rotateY(90deg) translateZ(calc(var(--w) * var(--u) / 2)); }
.pet .side.left { transform: rotateY(-90deg) translateZ(calc(var(--w) * var(--u) / 2)); }
.pet .side.top, .pet .side.bottom {
  left: 0;
  width: 100%;
  height: calc(var(--d) * var(--u));
  top: calc((var(--h) - var(--d)) * var(--u) / 2);
}
.pet .side.top { transform: rotateX(90deg) translateZ(calc(var(--h) * var(--u) / 2)); }
.pet .side.bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) * var(--u) / 2)); }

/* Orelhinhas giram presas ao corpo; perninhas sobem e descem. */
.pet .cuboid.ear { transition: transform .35s ease; }
.pet .cuboid.ear.l { transform-origin: 100% 50%; transform: rotateZ(var(--ear-l, 0deg)); }
.pet .cuboid.ear.r { transform-origin: 0% 50%; transform: rotateZ(var(--ear-r, 0deg)); }

/* ── Rosto (olhos e boca) ────────────────────────────────────────────── */
.pet .eyes { transition: transform .35s ease; }
.pet .eye { transform-box: fill-box; transform-origin: center; transition: transform .12s ease; }
.pet .v-open > :not(.shine) { fill: var(--ink); }
.pet .shine { fill: #fff; }
.pet .v-open, .pet .v-happy, .pet .v-closed { transition: opacity .15s; }
.pet .v-happy, .pet .v-closed {
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--eye-stroke, 5);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.pet .cheek { fill: var(--cheek); opacity: 0; transition: opacity .3s; }
.pet .mouth {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linejoin: round;
  d: path("M86 138 Q100 145 114 138 Q100 141 86 138");
  transition: d .25s ease, opacity .15s;
}
.pet .thinking-dots circle { fill: var(--dot-think); opacity: 0; }
.pet .zzz text { fill: var(--muted); font: 700 15px system-ui, sans-serif; opacity: 0; }

/* Qual olho aparece: aberto, feliz (> < ou ^ ^) ou fechado */
.pet[data-rest="happy"][data-state="idle"] .v-open,
.pet[data-rest="happy"][data-state="speaking"] .v-open,
.pet[data-state="happy"] .v-open { opacity: 0; }
.pet[data-rest="happy"][data-state="idle"] .v-happy,
.pet[data-rest="happy"][data-state="speaking"] .v-happy,
.pet[data-state="happy"] .v-happy { opacity: 1; }
.pet[data-state="sleeping"] .v-open,
.pet[data-state="sleeping"] .v-happy { opacity: 0; }
.pet[data-state="sleeping"] .v-closed { opacity: 1; }

/* ── Estados ─────────────────────────────────────────────────────────── */

/* À toa: vira o corpo para olhar em volta, dando passinhos */
.pet[data-state="idle"][data-look="left"] .rig { --ry: 24deg; --rz: -2deg; }
.pet[data-state="idle"][data-look="right"] .rig { --ry: -44deg; --rz: 2deg; }
.pet[data-state="idle"][data-look="left"] .eyes { transform: translateX(-6px); }
.pet[data-state="idle"][data-look="right"] .eyes { transform: translateX(6px); }
.pet[data-model="3d"][data-state="idle"][data-look] .leg { animation: step .2s ease-in-out 4 alternate; }
.pet[data-model="3d"][data-state="idle"][data-look] .front-r,
.pet[data-model="3d"][data-state="idle"][data-look] .back-l { animation-delay: .1s; }

/* Ouvindo: vira de frente, chega mais perto e levanta as orelhas */
.pet[data-state="listening"] { --ear-l: 18deg; --ear-r: -18deg; }
.pet[data-state="listening"] .rig { --rx: -8deg; --ry: -4deg; }
.pet[data-state="listening"] .hop { transform: translateY(calc(var(--u) * -3)) scale(1.05); }
.pet[data-state="listening"] .eyes { transform: translateY(-2px); }
.pet[data-state="listening"] .eye { transform: scale(1.08); }
.pet[data-state="listening"] .mouth { d: path("M93 139 Q100 150 107 139 Q100 128 93 139"); }

/* Pensando: inclina, olha para cima e balança devagar */
.pet[data-state="thinking"] .rig { --rx: -20deg; --ry: -38deg; --rz: 7deg; }
.pet[data-state="thinking"] .bob { animation: rock 2.4s ease-in-out infinite; }
.pet[data-state="thinking"] .eyes { transform: translate(5px, -7px); }
.pet[data-state="thinking"] .mouth { d: path("M90 141 Q102 140 112 136 Q102 142 90 141"); }
.pet[data-state="thinking"] .thinking-dots circle { animation: think 1.2s ease-in-out infinite; }
.pet[data-state="thinking"] .thinking-dots circle:nth-child(2) { animation-delay: .2s; }
.pet[data-state="thinking"] .thinking-dots circle:nth-child(3) { animation-delay: .4s; }

/* Pensativo (humor da resposta) */
.pet[data-state="pondering"] .rig { --rx: -18deg; --ry: 18deg; --rz: -5deg; }
.pet[data-state="pondering"] .eyes { transform: translate(-5px, -6px); }
.pet[data-state="pondering"] .mouth { d: path("M88 137 Q98 141 110 140 Q98 139 88 137"); }

/* Falando: quase de frente, quicando no ritmo da fala */
.pet[data-state="speaking"] .rig { --rx: -10deg; --ry: -12deg; }
.pet[data-state="speaking"] .hop { animation: chatter .32s ease-in-out infinite alternate; }
.pet[data-state="speaking"] .mouth { animation: talk .3s ease-in-out infinite alternate; }

/* Feliz: pulinho com giro, abana as orelhas e sapateia */
.pet[data-state="happy"] .hop { animation: hop .5s ease-in-out 2; }
.pet[data-model="3d"][data-state="happy"] .rig { animation: spin .95s cubic-bezier(.5, 0, .3, 1); }
.pet[data-model="3d"][data-state="happy"] .ear.l { animation: wave-l .22s ease-in-out 6 alternate; }
.pet[data-model="3d"][data-state="happy"] .ear.r { animation: wave-r .22s ease-in-out 6 alternate; }
.pet[data-model="3d"][data-state="happy"] .leg { animation: step .22s ease-in-out 4 alternate; }
.pet[data-model="3d"][data-state="happy"] .front-r,
.pet[data-model="3d"][data-state="happy"] .back-l { animation-delay: .11s; }
.pet[data-state="happy"] .cheek { opacity: .55; }
.pet[data-state="happy"] .mouth { d: path("M80 131 Q100 161 120 131 Q100 137 80 131"); }

/* Triste: cabisbaixo, orelhas caídas e sem cor */
.pet[data-state="sad"] { --ear-l: -24deg; --ear-r: 24deg; }
.pet[data-state="sad"] .rig { --rx: 4deg; --ry: -14deg; --rz: -4deg; }
.pet[data-state="sad"] .hop { transform: translateY(calc(var(--u) * 4)); }
.pet[data-state="sad"] .side,
.pet[data-state="sad"] .flat,
.pet[data-state="sad"] .sprite { filter: saturate(.4) brightness(.8); }
.pet[data-state="sad"] .eyes { transform: translateY(5px); }
.pet[data-state="sad"] .eye { transform: scaleY(.75); }
.pet[data-state="sad"] .mouth { d: path("M86 148 Q100 133 114 148 Q100 141 86 148"); }

/* Surpreso: dá um pulo para trás */
.pet[data-state="surprised"] { --ear-l: 26deg; --ear-r: -26deg; }
.pet[data-state="surprised"] .rig { --rx: -24deg; --ry: -6deg; }
.pet[data-state="surprised"] .hop { animation: jolt .35s ease-out; }
.pet[data-state="surprised"] .eye { transform: scale(1.18); }
.pet[data-state="surprised"] .mouth { d: path("M90 140 Q100 160 110 140 Q100 120 90 140"); }

/* Dormindo: se acomoda, de lado, respirando devagar */
.pet[data-state="sleeping"] .rig { --rx: -6deg; --ry: -34deg; --rz: -6deg; }
.pet[data-state="sleeping"] .hop { transform: translateY(calc(var(--u) * 5)); }
.pet[data-state="sleeping"] .bob { animation-duration: 7s; }
.pet[data-state="sleeping"] .side,
.pet[data-state="sleeping"] .flat,
.pet[data-state="sleeping"] .sprite { filter: brightness(.65); }
.pet[data-state="sleeping"] .mouth { d: path("M95 140 Q100 147 105 140 Q100 135 95 140"); }
.pet[data-state="sleeping"] .zzz text { animation: zz 3s ease-in infinite; }
.pet[data-state="sleeping"] .zzz text:nth-child(2) { animation-delay: 1.5s; }

/* ── Caixote: o bonequinho laranja em 3D ─────────────────────────────── */
.pet[data-skin="caixote"] { --ink: #1a120b; --eye-stroke: 7; }
.pet[data-skin="caixote"] .side { background: #f27c10; }
.pet[data-skin="caixote"] .side.front { background: linear-gradient(#ff9a2a, #f27a0c); }
.pet[data-skin="caixote"] .side.top { background: linear-gradient(#ffc27a, #ffad55); }
.pet[data-skin="caixote"] .side.right { background: linear-gradient(90deg, #e6700b, #cf6106); }
.pet[data-skin="caixote"] .side.left { background: linear-gradient(90deg, #fa922b, #ee7d14); }
.pet[data-skin="caixote"] .side.back { background: #dd6908; }
.pet[data-skin="caixote"] .side.bottom { background: #b05303; }
.pet[data-skin="caixote"] .torso > .side { border-radius: calc(var(--u) * 3); }
.pet[data-skin="caixote"] .torso > .front {
  background: radial-gradient(130% 100% at 28% 10%, #ffb056, #ff8d1c 48%, #ee780a);
  box-shadow: inset 0 calc(var(--u) * -4) calc(var(--u) * 8) #b4540033;
}
.pet[data-skin="caixote"] .leg > .side,
.pet[data-skin="caixote"] .ear > .side { border-radius: calc(var(--u) * 3); }
.pet[data-skin="caixote"] .leg > .front { background: linear-gradient(#f07c14, #d96707); }
/* Sem boca no jeito normal (como o boneco); ela só aparece para ouvir, falar e reagir. */
.pet[data-skin="caixote"] .mouth { opacity: 0; }
.pet[data-skin="caixote"][data-state="listening"] .mouth,
.pet[data-skin="caixote"][data-state="speaking"] .mouth,
.pet[data-skin="caixote"][data-state="surprised"] .mouth,
.pet[data-skin="caixote"][data-state="sad"] .mouth { opacity: 1; }

/* Piscar vem por último para valer em qualquer estado e aparência */
.pet.blink .eye { transform: scaleY(.1); }

@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, 1.03); } }
@keyframes rock { 0%, 100% { transform: rotateZ(-3deg); } 50% { transform: rotateZ(3deg); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(calc(var(--u) * -14)); } }
@keyframes jolt { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(calc(var(--u) * -8)) scale(.96); } }
@keyframes chatter { from { transform: translateY(0); } to { transform: translateY(calc(var(--u) * -2.5)); } }
@keyframes spin { from { transform: rotateX(-14deg) rotateY(-16deg); } to { transform: rotateX(-14deg) rotateY(344deg); } }
@keyframes step { to { transform: translateZ(calc(var(--z) * var(--u))) translateY(calc(var(--u) * -8)); } }
@keyframes wave-l { from { transform: rotateZ(0deg); } to { transform: rotateZ(32deg); } }
@keyframes wave-r { from { transform: rotateZ(0deg); } to { transform: rotateZ(-32deg); } }
@keyframes think { 0%, 100% { opacity: .15; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(10px, -22px); } }
@keyframes talk {
  from { d: path("M88 136 Q100 154 112 136 Q100 132 88 136"); }
  to { d: path("M90 138 Q100 143 110 138 Q100 136 90 138"); }
}

/* Movimentos reduzidos (opção do menu): o bichinho só muda de pose, sem pulos, giros nem balanço,
   e as bolinhas de pensar e o zzz ficam parados, mas visíveis. */
:root.calm .pet .bob,
:root.calm .pet .hop,
:root.calm .pet .rig,
:root.calm .pet .leg,
:root.calm .pet .ear { animation: none !important; }
:root.calm .pet .rig { transition-duration: .3s; }
:root.calm .pet[data-state="thinking"] .thinking-dots circle { animation: none; opacity: .9; }
:root.calm .pet[data-state="sleeping"] .zzz text { animation: none; opacity: .8; }