/* Main event: la taberna de Shrek (verde pantano) */
#taberna { --swamp: #8bc34a; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 20% 100%, #3d5a1a55, transparent 60%), radial-gradient(ellipse at 90% 0%, #2b3d1255, transparent 55%), #0d120a; }
#taberna .kicker { color: var(--swamp); }
.tavern-title { font: 400 clamp(2.6rem, 9vw, 5rem)/1 Creepster, cursive; color: var(--swamp); text-shadow: 0 0 30px #8bc34a55; margin-bottom: 16px; }
.tavern { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 56px; align-items: center; }

/* Cartel de "Se busca" */
.wanted { background: #e8d9b5; color: #3b2a17; padding: 22px 22px 26px; text-align: center; rotate: -2deg; box-shadow: 0 18px 40px #000b;
  clip-path: polygon(0 2%, 6% 0, 40% 1.5%, 70% 0, 100% 1%, 99% 30%, 100% 65%, 98.5% 100%, 60% 98.5%, 30% 100%, 2% 98%, 0 60%); }
.w-top { font: 400 3.2rem/1 Creepster, cursive; letter-spacing: .05em; text-transform: uppercase; }
.w-photo { position: relative; aspect-ratio: 1; margin: 14px 0; background: #3b2a17; display: grid; place-items: center; color: #e8d9b5aa; font-size: .85rem; border: 4px solid #3b2a17; }
.w-photo::before { content: "Foto del ogro próximamente"; padding: 0 16px; }
.w-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(.45) contrast(1.1); }
.w-sub { font: 400 1rem "Special Elite", monospace; text-transform: uppercase; letter-spacing: .1em; }
.w-reward { font: 400 1.1rem/1.2 "Permanent Marker", cursive; color: #8b1a1a; margin-top: 10px; rotate: -3deg; }
.w-reward b { display: block; font-weight: 400; font-size: 2.2rem; white-space: nowrap; }

/* Reglas */
.rules { list-style: none; padding: 0; counter-reset: r; display: grid; gap: 28px; }
.rules li { counter-increment: r; display: grid; grid-template-columns: 4rem 1fr; column-gap: 16px; }
.rules li::before { content: counter(r); grid-row: span 2; font: 400 3.6rem/1 Creepster, cursive; color: transparent; -webkit-text-stroke: 1.5px var(--swamp); }
.rules b { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 800; }
.rules span { color: var(--muted); }
.rules li:last-child b { color: var(--swamp); }
.tavern-note { color: var(--muted); font-size: .85rem; margin-top: 40px; text-align: center; }

@media (max-width: 760px) {
  .tavern { grid-template-columns: 1fr; gap: 40px; }
  .wanted { max-width: 300px; margin: 0 auto; }
  .rules li { grid-template-columns: 3rem 1fr; }
  .rules li::before { font-size: 2.8rem; }
}