/* =========================================================
   Tobías y las Tablas — estilos
   Tema: claro de bosque de cuento, cálido y luminoso
   ========================================================= */

:root {
  /* Paleta */
  --sky-top: #6EC6E8;
  --sky-bottom: #FFE7A6;
  --sun: #FFC94A;
  --hill-far: #7CC576;
  --hill-near: #4E9A52;
  --trunk: #8B5A34;
  --trunk-dark: #6B4423;
  --leaf: #3FA34D;
  --leaf-dark: #2E7D39;
  --berry: #E4572E;
  --berry-dark: #B8431F;
  --parchment: #FFF8E7;
  --parchment-edge: #F2E4BE;
  --ink: #3A2E1F;
  --ink-soft: #6B5A44;
  --fox: #EC8A3E;
  --gold-text: #A9700A;

  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;

  /* Altura real de la ventana en móvil, la fija app.js/index.html
     con JavaScript porque 100vh no cuenta la barra de direcciones. */
  --vh: 1vh;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-body);
  color: var(--ink);
}

body {
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-text-size-adjust: 100%;
}

button {
  font-family: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

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

/* ---------- Escena de fondo ---------- */

.scene {
  position: relative;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(180px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow: hidden;
}

.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--sky-top) 0%, #A9DCE8 38%, var(--sky-bottom) 100%);
  z-index: 0;
}

.sun {
  position: absolute;
  top: 6%;
  right: 10%;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFDE7A 0%, var(--sun) 60%, rgba(255,201,74,0) 72%);
  box-shadow: 0 0 60px 18px rgba(255, 201, 74, 0.55);
}

.cloud {
  position: absolute;
  background: #FFFFFF;
  border-radius: 100px;
  opacity: 0.85;
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: #FFFFFF;
  border-radius: 50%;
}
.cloud--a {
  width: 90px; height: 30px;
  top: 12%; left: 8%;
}
.cloud--a::before { width: 46px; height: 46px; top: -22px; left: 10px; }
.cloud--a::after { width: 36px; height: 36px; top: -16px; left: 46px; }

.cloud--b {
  width: 70px; height: 24px;
  top: 22%; left: 70%;
}
.cloud--b::before { width: 34px; height: 34px; top: -16px; left: 8px; }
.cloud--b::after { width: 28px; height: 28px; top: -12px; left: 34px; }

.hills {
  position: absolute;
  left: -10%;
  width: 120%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 1;
}
.hills--back {
  bottom: -8%;
  height: 34vh;
  background: var(--hill-far);
  opacity: 0.9;
}
.hills--front {
  bottom: -12%;
  height: 26vh;
  background: var(--hill-near);
  left: -20%;
  width: 140%;
}

.tree {
  position: absolute;
  bottom: 6%;
  z-index: 2;
}
.tree--1 { left: 4%; transform: scale(0.9); }
.tree--2 { right: 6%; bottom: 4%; transform: scale(1.15); }
.tree__top {
  width: 70px;
  height: 70px;
  background: var(--leaf);
  border-radius: 50%;
  box-shadow: -22px 12px 0 -6px var(--leaf-dark);
}
.tree__trunk {
  width: 14px;
  height: 34px;
  background: var(--trunk);
  margin: -6px auto 0;
  border-radius: 3px;
}

.bush {
  position: absolute;
  bottom: 7%;
  width: 60px;
  height: 30px;
  background: var(--leaf);
  border-radius: 50px 50px 0 0;
  z-index: 2;
  box-shadow: 20px 4px 0 -4px var(--leaf-dark);
}
.bush--1 { left: 22%; }
.bush--2 { right: 26%; opacity: 0.9; }

/* ---------- Tablero principal ---------- */

.board {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.board__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 6px;
}

.board__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 4.2vw, 1.9rem);
  color: #FFFFFF;
  text-shadow: 0 3px 0 rgba(58, 46, 31, 0.35);
  margin: 0;
  letter-spacing: 0.2px;
}

.stats {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.stat {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--parchment);
  border: 2px solid var(--parchment-edge);
  border-radius: 999px;
  padding: 5px 12px 5px 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  box-shadow: 0 3px 0 rgba(58, 46, 31, 0.2);
  min-height: 34px;
}
.stat__icon { font-size: 1.1rem; }

button.stat {
  border: 2px solid var(--parchment-edge);
  cursor: pointer;
  padding: 5px 10px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  transition: transform 0.08s ease;
}
button.stat:hover { transform: translateY(-1px); }
button.stat:active { transform: translateY(1px); }
button.stat:focus-visible {
  outline: 3px solid var(--gold-text);
  outline-offset: 2px;
}

/* Tarjeta tipo cartel de madera con papel */
.card {
  width: 100%;
  background: var(--parchment);
  border-radius: 28px;
  padding: 26px 22px 24px;
  border: 4px solid var(--parchment-edge);
  box-shadow:
    0 10px 0 var(--trunk-dark),
    0 18px 28px rgba(58, 46, 31, 0.28);
  text-align: center;
  position: relative;
}

.card__prompt {
  margin: 0 0 2px;
  font-weight: 700;
  color: var(--ink-soft);
  font-size: 1rem;
}

.operation {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 10vw, 3.4rem);
  color: var(--gold-text);
  margin: 4px 0 22px;
  letter-spacing: 1px;
}

.options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.option {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  color: #FFFFFF;
  background: var(--leaf);
  border: none;
  border-radius: 18px;
  padding: 18px 10px;
  min-height: 64px;
  cursor: pointer;
  box-shadow: 0 6px 0 var(--leaf-dark);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease;
}

.option:hover:not(:disabled) {
  transform: translateY(-2px);
}

.option:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--leaf-dark);
}

.option:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 3px;
}

.option:disabled {
  cursor: default;
}

.option--correct {
  background: var(--leaf);
  box-shadow: 0 6px 0 var(--leaf-dark);
  transform: translateY(2px);
  animation: pop 0.35s ease;
}

.option--wrong {
  background: var(--berry);
  box-shadow: 0 6px 0 var(--berry-dark);
  transform: translateY(2px);
}

.option--faded {
  opacity: 0.45;
}

@keyframes pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ---------- Retroalimentación ---------- */

.feedback {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 2px dashed var(--parchment-edge);
  animation: slide-in 0.25s ease;
}

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

.feedback__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 0 0 6px;
}

.feedback--correct .feedback__headline { color: var(--leaf-dark); }
.feedback--wrong .feedback__headline { color: var(--berry-dark); }

.feedback__explanation {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.5;
}

.btn-next {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #FFFFFF;
  background: var(--gold-text);
  border: none;
  border-radius: 999px;
  padding: 12px 28px;
  min-height: 44px;
  cursor: pointer;
  box-shadow: 0 5px 0 #7A4F07;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-next:hover { transform: translateY(-2px); }
.btn-next:active { transform: translateY(3px); box-shadow: 0 2px 0 #7A4F07; }
.btn-next:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---------- Mascota (zorro) ---------- */

.fox {
  position: fixed;
  left: 2%;
  bottom: max(-6px, env(safe-area-inset-bottom) * -1);
  width: 150px;
  z-index: 4;
  pointer-events: none;
  animation: fox-idle 4.5s ease-in-out infinite;
  transform-origin: bottom center;
}

.fox__svg { width: 100%; height: auto; display: block; }

@keyframes fox-idle {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-1.5deg) translateY(-4px); }
}

.fox.is-happy {
  animation: fox-jump 0.6s ease;
}
@keyframes fox-jump {
  0% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-26px) rotate(-4deg); }
  55% { transform: translateY(0) rotate(3deg); }
  75% { transform: translateY(-8px) rotate(-2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.fox.is-thinking .fox-brow { opacity: 1; }
.fox.is-thinking .fox-mouth { opacity: 0; }
.fox.is-thinking {
  animation: fox-wobble 0.9s ease;
}
@keyframes fox-wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg); }
  75% { transform: rotate(4deg); }
}

.fox__sparkles {
  position: absolute;
  inset: -20px;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  font-size: 1.4rem;
  animation: sparkle-fly 0.9s ease-out forwards;
}

@keyframes sparkle-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(0.6) rotate(0deg); }
  100% { opacity: 0; transform: var(--fly-to) scale(1.1) rotate(90deg); }
}

/* ---------- Responsivo: tablets ---------- */

@media (min-width: 640px) and (max-width: 1024px) {
  .board { max-width: 600px; }
  .fox { width: 180px; }
  .operation { font-size: clamp(2.6rem, 7vw, 3.6rem); }
}

/* ---------- Responsivo: móviles ---------- */

@media (max-width: 480px) {
  .scene { padding-bottom: calc(160px + env(safe-area-inset-bottom)); }
  .board__title { font-size: 1.2rem; }
  .card { padding: 22px 16px 20px; border-radius: 22px; }
  .fox { width: 108px; left: 3%; }
  .stat { padding: 4px 10px 4px 7px; font-size: 0.9rem; }
}

@media (max-width: 360px) {
  .options { gap: 10px; }
  .option { padding: 14px 8px; }
  .board__title { font-size: 1.05rem; }
}

/* Teléfonos en horizontal: muy poca altura disponible, así que
   se recorta la decoración y se reduce la mascota para que el
   juego siga entero en pantalla sin hacer scroll. */
@media (max-height: 480px) and (orientation: landscape) {
  .scene { padding: 12px 16px calc(90px + env(safe-area-inset-bottom)); align-items: flex-start; }
  .sun, .cloud, .tree, .bush, .hills--back { display: none; }
  .hills--front { height: 14vh; opacity: 0.7; }
  .board { gap: 8px; }
  .card { padding: 16px 18px; }
  .operation { margin: 2px 0 12px; font-size: clamp(1.8rem, 6vw, 2.4rem); }
  .options { gap: 10px; }
  .option { padding: 10px; min-height: 48px; }
  .fox { width: 80px; left: 1%; }
}

/* Pantallas grandes: que la escena no quede vacía ni desproporcionada */
@media (min-width: 1025px) {
  .fox { width: 200px; }
  .board { max-width: 620px; }
}