:root {
  --bg: #fff7ee;
  --sky: #bfe6ff;
  --ink: #3a3357;
  --muted: #7a7398;
  --primary: #8b6cff;
  --primary-dark: #6a4be6;
  --secondary: #ffb547;
  --secondary-dark: #e8952a;
  --pink: #ff8fb8;
  --mint: #6fd6b5;
  --right: #3cc47f;
  --right-dark: #26995c;
  --wrong: #ff6b81;
  --wrong-dark: #d94a60;
  --card: #ffffff;
  --gold: #ffc93c;
  --radius: 28px;
  --shadow: 0 6px 0 rgba(58, 51, 87, 0.14);
  --shadow-soft: 0 10px 30px rgba(58, 51, 87, 0.18);
  --font: "Fredoka", "Comic Sans MS", system-ui, sans-serif;
  /* Pantalla virtual: core/fit.js escala el diseño base 1280×800 al tamaño real. */
  --zoom: 1;
  --app-w: 100vw;
  --app-h: 100dvh;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html { height: 100%; overflow: hidden; }
body {
  margin: 0;
  overflow: hidden;
  zoom: var(--zoom);
  width: var(--app-w);
  height: var(--app-h);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
img { -webkit-user-drag: none; user-select: none; }
body, img { -webkit-touch-callout: none; }

.app { position: relative; width: 100%; height: 100%; overflow: hidden; }
.screen { position: absolute; inset: 0; animation: screen-in 0.25s ease-out; }
@keyframes screen-in { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- botones ---------- */
.btn {
  font: inherit;
  font-weight: 600;
  font-size: 1.15rem;
  border: none;
  border-radius: var(--radius);
  padding: 14px 22px;
  cursor: pointer;
  color: var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
  transition: transform 0.08s, box-shadow 0.08s, filter 0.15s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(58, 51, 87, 0.14); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-big { font-size: 1.5rem; padding: 18px 30px; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 0 var(--primary-dark); }
.btn-primary:active { box-shadow: 0 2px 0 var(--primary-dark); }
.btn-secondary { background: var(--secondary); box-shadow: 0 6px 0 var(--secondary-dark); }
.btn-secondary:active { box-shadow: 0 2px 0 var(--secondary-dark); }
.btn-right { background: var(--right); color: #fff; box-shadow: 0 6px 0 var(--right-dark); }
.btn-wrong { background: var(--wrong); color: #fff; box-shadow: 0 6px 0 var(--wrong-dark); }
.btn-round {
  width: 72px; height: 72px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; font-size: 2rem;
}
.btn-icon { display: inline-flex; align-items: center; gap: 10px; }
.btn-icon img { width: 40px; height: 40px; object-fit: contain; }

/* ---------- contador de monedas ---------- */
.coin-counter {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--card); border-radius: 999px; padding: 6px 18px 6px 8px;
  font-weight: 700; font-size: 1.6rem; box-shadow: var(--shadow);
}
.coin-counter .coin { width: 40px; height: 40px; }
.coin { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; }
.coin.is-emoji { width: auto; height: auto; }

/* ---------- toast y diálogo ---------- */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 14px 26px; border-radius: 999px;
  font-size: 1.15rem; z-index: 100; box-shadow: var(--shadow-soft);
  animation: toast-in 0.25s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px); } }
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: rgba(58, 51, 87, 0.35);
}
.dialog {
  background: var(--card); border-radius: var(--radius); padding: 28px 32px; max-width: 520px;
  text-align: center; box-shadow: var(--shadow-soft); font-size: 1.3rem;
}
.dialog-actions { display: flex; gap: 16px; justify-content: center; margin-top: 20px; }

/* ---------- aviso de orientación ---------- */
#rotate-hint { display: none; }
@media (orientation: portrait) {
  #rotate-hint {
    display: flex; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center;
    background: var(--sky);
  }
  .rotate-card { text-align: center; font-size: 1.8rem; font-weight: 600; }
  .rotate-icon { font-size: 5rem; animation: rotate-wiggle 1.6s ease-in-out infinite; }
}
@keyframes rotate-wiggle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(90deg); } }

/* ---------- estrellas ---------- */
.stars { color: #d9d4ea; letter-spacing: 2px; }
.stars .on { color: var(--gold); }

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