/* One Piece — pergamino de mapa del tesoro, madera de barco y lacre. */

:root {
  --bg: #efdfbb;
  --fondo:
    radial-gradient(ellipse at center, transparent 55%, rgba(92, 58, 20, .35) 100%),
    radial-gradient(600px 300px at 15% 10%, rgba(255, 255, 255, .35), transparent),
    repeating-linear-gradient(0deg, rgba(120, 80, 30, .025) 0 2px, transparent 2px 5px),
    #efdfbb;
  --surface: #f7ecd2;
  --surface-2: #e6d2a6;
  --borde: rgba(92, 58, 20, .25);
  --texto: #2b1b0e;
  --suave: #7a5a36;
  --acento: #b3261e;
  --grad: linear-gradient(180deg, #c8352b, #93201a);
  --sobre-acento: #fff4dc;
  --ok: #3f7d3a;
  --sobre-ok: #f4fbe9;
  --casi: #d19a2b;
  --sobre-casi: #2b1b0e;
  --mal: #8e2c22;
  --sobre-mal: #fde8d7;
  --r: 10px;
  --font: 'Inter', system-ui, sans-serif;
  --font-d: 'Pirata One', 'Georgia', serif;
  --cab-bg: rgba(43, 27, 14, .94);
  --madera: #2b1b0e;
  --oro: #e0b04a;
}

/* Cabecera de madera con texto claro */
.top { border-bottom: 3px solid var(--oro); }
.top .logo { color: #f7ecd2; }
.top .tema-link { color: var(--oro); font-size: 24px; }
.top .nav a { color: #d8c49b; }
.top .nav a:hover, .top .nav a.on { color: #fff4dc; background: rgba(255, 255, 255, .08); }
.top .nav a.on { box-shadow: inset 0 -2px 0 var(--oro); }
.top .icono { background: rgba(255, 255, 255, .06); border-color: rgba(224, 176, 74, .4); color: #f7ecd2; }
@media (max-width: 860px) { .top .nav { background: var(--madera); } }

.pie { border-top: 2px dashed var(--borde); }

h1.titulo { color: var(--madera); letter-spacing: 1px; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.tarjeta, .modal { box-shadow: 0 2px 0 rgba(92, 58, 20, .15), 0 10px 30px rgba(92, 58, 20, .18); }
.modal { background: var(--surface); }
.modal::backdrop { background: rgba(20, 12, 4, .7); }
.btn { border: 1px solid #6d1610; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); letter-spacing: .3px; }
.campo input { background: #fffaf0; border: 2px solid var(--borde); }
.sugerencias { background: #fffaf0; }

/* Portada de la temática */
.op-hero { text-align: center; padding: 18px 0 28px; }
.op-hero h1 { font: clamp(56px, 13vw, 96px)/.9 var(--font-d); color: var(--madera); }
.op-hero h1 span { color: var(--acento); }
.op-hero p { color: var(--suave); margin-top: 10px; }
.juego { background: var(--surface); border: 2px solid var(--borde); }
.juego .cuerpo b { font: 32px/1 var(--font-d); letter-spacing: .5px; }
.juego .muestra { background: repeating-linear-gradient(0deg, rgba(120, 80, 30, .03) 0 2px, transparent 2px 5px), #ead7ab; border-bottom: 2px dashed var(--borde); }

/* ── Clásico ── */
.tabla-scroll { overflow-x: auto; margin: 0 -16px; padding: 0 16px 8px; }
.tabla-clasico { display: grid; grid-template-columns: 1.7fr repeat(8, 1fr); gap: 6px; min-width: 900px; }
.tabla-clasico .cab { font-size: 11px; font-weight: 700; color: var(--suave); text-align: center; text-transform: uppercase; letter-spacing: .5px; padding-bottom: 4px; border-bottom: 2px solid var(--borde); }
.tabla-clasico .fila { display: contents; }
.celda {
  min-height: 74px; padding: 6px; border-radius: 8px;
  display: grid; place-items: center; text-align: center;
  font-weight: 700; font-size: 13px; line-height: 1.2;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.celda.ok { background: var(--ok); color: var(--sobre-ok); }
.celda.casi { background: var(--casi); color: var(--sobre-casi); }
.celda.mal { background: var(--mal); color: var(--sobre-mal); }
.celda.pj { display: flex; gap: 8px; justify-content: flex-start; background: var(--surface); color: var(--texto); text-align: left; border: 2px solid var(--borde); }
.celda.pj.ok { border-color: var(--ok); }
.celda.pj img { width: 56px; height: 62px; border-radius: 6px; object-fit: cover; object-position: top; flex-shrink: 0; background: var(--surface-2); }
.fila.nueva .celda { animation: girar .45s both; animation-delay: calc(var(--i, 0) * .18s); }
.leyenda { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 12px; color: var(--suave); margin: -8px 0 16px; }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }

/* ── Pistas (Fruta / Epíteto) ── */
.pistas { display: grid; gap: 8px; margin-bottom: 16px; }
.pista { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 8px; background: var(--surface); border: 1px dashed var(--borde); font-size: 14px; }
.pista b { color: var(--suave); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; min-width: 96px; }
.pista.bloqueada { color: var(--suave); font-style: italic; }
.intentos { list-style: none; display: grid; gap: 6px; margin-top: 16px; }
.intentos li { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 8px; font-weight: 600; background: var(--mal); color: var(--sobre-mal); }
.intentos li.ok { background: var(--ok); color: var(--sobre-ok); }
.intentos li img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; object-position: top; background: var(--surface-2); }

.fruta-img { display: grid; place-items: center; padding: 18px; margin-bottom: 16px; }
.fruta-img img { width: 170px; height: 170px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(60, 35, 10, .35)); transition: filter .6s; }
.fruta-img.oculta img { filter: brightness(0) drop-shadow(0 8px 14px rgba(60, 35, 10, .35)); }

.epiteto-cartel { text-align: center; padding: 26px 18px; margin-bottom: 16px; }
.epiteto-cartel small { color: var(--suave); text-transform: uppercase; letter-spacing: 2px; font-size: 11px; }
.epiteto-cartel p { font: clamp(30px, 7vw, 42px)/1.1 var(--font-d); margin-top: 8px; }

.solucion { display: flex; gap: 14px; align-items: center; text-align: left; }
.solucion img { width: 84px; height: 96px; object-fit: cover; object-position: top; border-radius: 6px; flex-shrink: 0; }
.solucion b { font: 28px/1 var(--font-d); display: block; }

/* ── Recompensa: carteles de SE BUSCA ── */
.duelo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.vs { font: 34px/1 var(--font-d); color: var(--acento); }
.cartel {
  position: relative; padding: 12px 12px 14px; text-align: center; cursor: pointer;
  background: linear-gradient(180deg, #f5e5bf, #e9d19c);
  border: 1px solid #b89458; border-radius: 2px;
  box-shadow: 0 2px 0 #b89458, 0 12px 24px rgba(60, 35, 10, .3);
  color: #3a2410; transition: transform .15s;
}
.cartel:hover:not(:disabled) { transform: translateY(-3px) rotate(-.5deg); }
.cartel .se-busca { font: clamp(26px, 6vw, 40px)/.9 var(--font-d); letter-spacing: 1px; }
.cartel img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; margin: 8px 0; border: 2px solid #3a2410; background: #d9c08a; filter: sepia(.25); }
.cartel .dead { font: 700 10px/1 Georgia, serif; letter-spacing: 3px; }
.cartel .nombre { font: 700 clamp(13px, 3.4vw, 17px)/1.1 Georgia, serif; margin: 6px 0 4px; text-transform: uppercase; }
.cartel .berries { font: 700 clamp(15px, 4vw, 22px)/1 Georgia, serif; letter-spacing: .5px; min-height: 22px; }
.cartel .berries.oculto { color: transparent; text-shadow: 0 0 10px rgba(58, 36, 16, .6); }
.cartel.gana { outline: 4px solid var(--ok); }
.cartel.pierde { outline: 4px solid var(--acento); opacity: .75; }
.marcador { display: flex; justify-content: center; gap: 6px; margin: 0 0 16px; }
.marcador span { width: 22px; height: 8px; border-radius: 4px; background: var(--surface-2); }
.marcador span.ok { background: var(--ok); }
.marcador span.mal { background: var(--acento); }
.marcador span.actual { background: var(--madera); }