/* ============================================================
   Juego II · Dibújamelo
   Todo con prefijo .j2- para no chocar con el resto de la app.
   ============================================================ */

/* ---------- Tarjeta dentro de la etapa ---------- */
.j2-card { flex: 1; display: flex; flex-direction: column; background: var(--paper, #FFFDF8); border: 1px solid var(--line, rgba(176,141,87,.42)); overflow: hidden; }
.j2-preview {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  background-color: #FFFEFB;
  background-image: radial-gradient(rgba(176,141,87,.22) 1px, transparent 1.2px);
  background-size: 16px 16px;
  border-bottom: 1px solid var(--line, rgba(176,141,87,.42));
}
.j2-card-body { display: grid; gap: 14px; padding: 18px 18px 20px; }
.j2-tips { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.j2-tips li { display: flex; align-items: center; gap: 11px; font-size: 12px; line-height: 1.35; color: var(--muted, #877B6E); text-align: left; }
.j2-tips svg { width: 20px; height: 20px; flex: none; color: var(--acc, #B08D57); }
.j2-done { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--acc, #B08D57); }
.j2-done svg { width: 16px; height: 16px; }

/* ---------- Botones ---------- */
.j2-btn {
  position: relative; display: block; width: 100%;
  padding: 16px 18px;
  border: 1px solid #B08D57; background: transparent; color: #2B2622;
  font: 400 10.5px/1.2 'Montserrat', system-ui, sans-serif; letter-spacing: .3em; text-transform: uppercase;
  cursor: pointer;
}
.j2-btn::after { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(176,141,87,.42); pointer-events: none; }
.j2-btn.solid { background: #B08D57; color: #FFFDF8; }
.j2-btn.solid::after { border-color: rgba(255,255,255,.35); }
.j2-btn:active { transform: scale(.985); }
.j2-link {
  display: block; margin: 12px auto 0; padding: 4px 8px;
  background: none; border: 0; cursor: pointer;
  font: italic 400 16px/1.2 'Cormorant Garamond', Georgia, serif; color: #877B6E;
  text-decoration: underline; text-decoration-color: rgba(176,141,87,.5); text-underline-offset: 4px;
}
.j2-btn:focus-visible, .j2-link:focus-visible, .j2-ib:focus-visible, .j2-opt:focus-visible, .j2-tool:focus-visible, .j2-color:focus-visible { outline: 1.5px solid #B08D57; outline-offset: 3px; }

/* ---------- Capa de juego ---------- */
.j2-overlay {
  position: absolute; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: #F8F4EC;
  background-image: radial-gradient(90% 50% at 50% 0%, #FFFDF8, transparent 70%);
  color: #2B2622;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  animation: j2-in .6s cubic-bezier(.2,.7,.2,1) both;
}
.j2-overlay::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(176,141,87,.35); border-radius: 28px; pointer-events: none; }
.j2-overlay.is-closing { animation: j2-out .4s ease forwards; pointer-events: none; }
@keyframes j2-in { from { clip-path: circle(0% at 50% 70%); } to { clip-path: circle(150% at 50% 70%); } }
@keyframes j2-out { to { opacity: 0; } }

.j2-top {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 40px 1fr 40px; gap: 10px; align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 22px) 22px 8px;
}
.j2-ib {
  width: 40px; height: 40px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: #B08D57; cursor: pointer;
}
.j2-ib svg { width: 20px; height: 20px; }
.j2-title { display: grid; justify-items: center; gap: 3px; text-align: center; min-width: 0; }
.j2-eyebrow { font: 400 9.5px/1.3 'Montserrat', system-ui, sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #B08D57; }
.j2-count { font: italic 400 16px/1 'Cormorant Garamond', Georgia, serif; color: #877B6E; font-variant-numeric: tabular-nums; }

.j2-body {
  --paper-w: min(100%, 400px, calc(100dvh - 330px));
  position: relative; z-index: 1;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 4px 24px calc(env(safe-area-inset-bottom, 0px) + 26px);
  overflow-y: auto; scrollbar-width: none;
}
.j2-body::-webkit-scrollbar { display: none; }
.j2-body.center { justify-content: center; }

/* Palabra */
.j2-word { display: grid; justify-items: center; gap: 2px; text-align: center; }
.j2-word span { font: 400 9.5px/1 'Montserrat', system-ui, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: #877B6E; }
.j2-word b { font: italic 400 40px/1.05 'Cormorant Garamond', Georgia, serif; color: #2B2622; text-wrap: balance; }
.j2-word b.small { font-size: 28px; }
.j2-pop { animation: j2-pop .6s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes j2-pop { from { opacity: 0; transform: scale(.7); } }

/* Temporizador */
.j2-timer { width: var(--paper-w); display: flex; align-items: center; gap: 10px; }
.j2-bar { flex: 1; height: 6px; border-radius: 4px; background: rgba(176,141,87,.18); overflow: hidden; }
.j2-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #D4AF6A, #E08FA0); transform-origin: left; }
.j2-sec { width: 28px; text-align: right; font: 500 20px/1 'Cormorant Garamond', Georgia, serif; color: #8C6B3C; font-variant-numeric: tabular-nums; }
.j2-timer.hurry .j2-bar i { background: #D8344F; }
.j2-timer.hurry .j2-sec { color: #D8344F; animation: j2-beat 1s ease infinite; }
@keyframes j2-beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.3); } }

/* Papel */
.j2-paper {
  position: relative; flex: none;
  width: var(--paper-w); aspect-ratio: 1;
  background: #FFFEFB;
  border: 1px solid #B08D57;
  box-shadow: 0 18px 34px -24px rgba(90,70,40,.55);
}
.j2-paper::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(176,141,87,.3); pointer-events: none; z-index: 1; }
.j2-paper canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.j2-paper.locked canvas { cursor: default; }
.j2-stamp {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  font: italic 300 54px/1 'Cormorant Garamond', Georgia, serif; color: #8C6B3C;
  pointer-events: none; opacity: 0;
}
.j2-stamp.go { animation: j2-stamp 1s ease both; }
.j2-stamp.time { color: #D8344F; animation: j2-stamp 1s ease both; }
@keyframes j2-stamp { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1.05); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
.j2-empty { position: absolute; inset: 0; display: grid; place-items: center; font: italic 400 20px/1.2 'Cormorant Garamond', Georgia, serif; color: #B5A891; pointer-events: none; }

/* Herramientas */
.j2-tools { width: var(--paper-w); display: flex; align-items: center; gap: 8px; }
.j2-colors { display: flex; gap: 6px; flex: 1; min-width: 0; }
.j2-color { flex: none; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid #FFFDF8; background: var(--c); box-shadow: 0 0 0 1px rgba(176,141,87,.5); cursor: pointer; transition: transform .2s; }
.j2-color.on { transform: scale(1.18); box-shadow: 0 0 0 2px #B08D57; }
.j2-tool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px; border-radius: 999px;
  border: 1px solid rgba(176,141,87,.5); background: #FFFDF8; color: #6E5A45;
  font: 500 10px/1 'Montserrat', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.j2-tool svg { width: 15px; height: 15px; }
.j2-tool.j2-icon-only { width: 38px; height: 38px; padding: 0; justify-content: center; }
.j2-tool.j2-icon-only svg { width: 17px; height: 17px; }
.j2-tool.j2-done-btn { background: #B08D57; border-color: #B08D57; color: #FFFDF8; }

/* Opciones al adivinar */
.j2-opts { width: var(--paper-w); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.j2-opt {
  padding: 13px 10px; min-height: 52px;
  border: 1px solid rgba(176,141,87,.55); background: #FFFDF8; color: #2B2622;
  font: italic 400 19px/1.1 'Cormorant Garamond', Georgia, serif; cursor: pointer;
  transition: background-color .3s, border-color .3s, opacity .3s, transform .2s;
  animation: j2-rise .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s);
}
.j2-opt:active { transform: scale(.97); }
.j2-opt[disabled] { cursor: default; }
.j2-opt.ok { background: #EEF3E4; border-color: #7C8A5A; color: #3F5A2E; }
.j2-opt.bad { background: #FBEDEE; border-color: #D8344F; color: #A33245; text-decoration: line-through; text-decoration-thickness: 1px; }
.j2-opt.dim { opacity: .4; }
@keyframes j2-rise { from { opacity: 0; transform: translateY(10px); } }
.j2-fb { min-height: 1.3em; margin: 0; font: italic 400 19px/1.2 'Cormorant Garamond', Georgia, serif; color: #8C6B3C; text-align: center; }
.j2-fb.ok { color: #5E7A3E; }
.j2-fb.bad { color: #A33245; }
.j2-fb.show { animation: j2-rise .4s ease both; }
.j2-self { width: var(--paper-w); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Hojas (turnos, resúmenes) */
.j2-sheet {
  position: relative; width: 100%; max-width: 340px; margin: auto 0;
  padding: 30px 24px 22px;
  background: #FFFDF8; border: 1px solid #B08D57; text-align: center;
  box-shadow: 0 30px 60px -32px rgba(40,25,10,.55);
  animation: j2-rise .7s cubic-bezier(.2,.7,.2,1) both;
}
.j2-sheet::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(176,141,87,.35); pointer-events: none; }
.j2-sheet .j2-icon { width: 54px; height: 54px; margin: 0 auto 10px; color: #B08D57; }
.j2-sheet .j2-icon svg { width: 100%; height: 100%; }
.j2-sheet h2 { margin: 8px 0 0; font: italic 300 36px/1.05 'Cormorant Garamond', Georgia, serif; text-wrap: balance; }
.j2-sheet p.j2-p { margin: 10px auto 20px; max-width: 28ch; font: 300 12.5px/1.6 'Montserrat', system-ui, sans-serif; color: #877B6E; text-wrap: balance; }
.j2-sheet .j2-tips { margin: 0 0 20px; padding-top: 14px; border-top: 1px solid rgba(176,141,87,.3); }
.j2-sheet .j2-btn + .j2-btn { margin-top: 10px; }
.j2-score { margin: 10px 0 0; font: 300 64px/1 'Cormorant Garamond', Georgia, serif; font-variant-numeric: tabular-nums; }
.j2-score small { font-size: 26px; color: #877B6E; }
.j2-rounds { display: flex; justify-content: center; gap: 18px; margin: 10px 0 0; font-size: 11px; color: #877B6E; }
.j2-rounds b { font: italic 500 17px/1 'Cormorant Garamond', Georgia, serif; color: #2B2622; }
.j2-names { font: 400 30px/1 'Pinyon Script', 'Cormorant Garamond', cursive; color: #B08D57; }

/* Galería de dibujos */
.j2-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; margin: 18px 0 20px; }
.j2-thumb { position: relative; margin: 0; display: grid; gap: 4px; animation: j2-rise .5s ease both; animation-delay: var(--d, 0s); }
.j2-thumb canvas { width: 100%; aspect-ratio: 1; display: block; background: #FFFEFB; border: 1px solid rgba(176,141,87,.45); }
.j2-thumb figcaption { font: italic 400 13.5px/1.1 'Cormorant Garamond', Georgia, serif; color: #2B2622; }
.j2-thumb .j2-mark { position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #FFFDF8; }
.j2-thumb .j2-mark svg { width: 12px; height: 12px; }
.j2-thumb .j2-mark.ok { background: #7C8A5A; }
.j2-thumb .j2-mark.bad { background: #D8344F; }

/* Corazones del resultado */
.j2-hearts { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.j2-heart { position: absolute; bottom: -30px; color: var(--c); animation: j2-float linear both; }
.j2-heart svg { width: 100%; height: 100%; }
@keyframes j2-float { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(-110vh) rotate(40deg); opacity: 0; } }

/* Confirmación de salida */
.j2-confirm { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 24px; background: rgba(46,32,24,.32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: j2-out .3s ease reverse both; }

@media (prefers-reduced-motion: reduce) {
  .j2-overlay, .j2-sheet, .j2-opt, .j2-thumb, .j2-pop, .j2-stamp, .j2-fb, .j2-confirm { animation-duration: .01ms !important; animation-delay: 0s !important; }
  .j2-hearts { display: none; }
}