/* ==========================================================================
   Nina's Tacos · La Lotería de Nina's: "¿Qué se me antoja?"
   A deck of Lotería cards on an oilcloth table. assets/loteria.js deals three
   real dishes (name + menu price read from the rendered menu at deal time).
   Homepage chapter after the menu + a compact band after the /menu/ board.
   Round 4: linked from the head as media="print" and switched on by rotulo.js,
   so it never blocks the first paint (the deck is far below the fold).
   ========================================================================== */

.loteria {
  --deck-w: 164px;
  --card-w: 218px;
  --back-field: #b3261e;
  --back-ink: #f6ecd9;
  --back-dot: #f2a007;
  --back-corner: #1b1512;
  --deal: var(--chile);
  --deal-deep: var(--chile-deep);
  --hule: rgba(179, 38, 30, 0.2);
  --talavera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%23b3261e'/%3E%3Cpath fill='%23f6ecd9' d='M20 5c3.6 5 3.6 10 0 15-3.6-5-3.6-10 0-15zM20 35c-3.6-5-3.6-10 0-15 3.6 5 3.6 10 0 15zM5 20c5-3.6 10-3.6 15 0-5 3.6-10 3.6-15 0zM35 20c-5 3.6-10 3.6-15 0 5-3.6 10-3.6 15 0z'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23f2a007'/%3E%3Cpath fill='%231b1512' d='M0 0h7.5A7.5 7.5 0 0 1 0 7.5zM40 0v7.5A7.5 7.5 0 0 1 32.5 0zM0 40v-7.5A7.5 7.5 0 0 1 7.5 40zM40 40h-7.5A7.5 7.5 0 0 1 40 32.5z'/%3E%3Cg fill='%23f2a007'%3E%3Ccircle r='2.4'/%3E%3Ccircle cx='40' r='2.4'/%3E%3Ccircle cy='40' r='2.4'/%3E%3Ccircle cx='40' cy='40' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  padding: clamp(40px, 6vw, 76px) 0;
}
html[data-mode="mar"] .loteria {
  --back-field: #0f6f78;
  --back-ink: #eaf7f5;
  --back-dot: #c9ec6a;
  --deal: #0b5f68;
  --deal-deep: #073a40;
  --hule: rgba(15, 111, 120, 0.2);
  --talavera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%230f6f78'/%3E%3Cpath fill='%23eaf7f5' d='M20 5c3.6 5 3.6 10 0 15-3.6-5-3.6-10 0-15zM20 35c-3.6-5-3.6-10 0-15 3.6 5 3.6 10 0 15zM5 20c5-3.6 10-3.6 15 0-5 3.6-10 3.6-15 0zM35 20c-5 3.6-10 3.6-15 0 5-3.6 10-3.6 15 0z'/%3E%3Ccircle cx='20' cy='20' r='3.2' fill='%23c9ec6a'/%3E%3Cpath fill='%23073a40' d='M0 0h7.5A7.5 7.5 0 0 1 0 7.5zM40 0v7.5A7.5 7.5 0 0 1 32.5 0zM0 40v-7.5A7.5 7.5 0 0 1 7.5 40zM40 40h-7.5A7.5 7.5 0 0 1 40 32.5z'/%3E%3Cg fill='%23c9ec6a'%3E%3Ccircle r='2.4'/%3E%3Ccircle cx='40' r='2.4'/%3E%3Ccircle cy='40' r='2.4'/%3E%3Ccircle cx='40' cy='40' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Heading row ---------- */
.loteria-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 40px;
  margin-bottom: 26px;
}
.loteria-head .section-heading { margin-bottom: 0; }
.loteria-kitchen {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: var(--comal);
  color: var(--masa);
  font: 800 0.8rem/1.2 var(--font-label);
  letter-spacing: 0.05em;
}
.loteria-kitchen::before {
  content: "";
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--deal);
  box-shadow: 0 0 0 2px var(--cempasuchil);
}
html[data-mode="mar"] .loteria-kitchen::before { box-shadow: 0 0 0 2px #c9ec6a; }
.loteria-kitchen b { color: var(--cempasuchil); font-weight: 900; }
html[data-mode="mar"] .loteria-kitchen b { color: #c9ec6a; }
.loteria-kitchen .k-mar,
html[data-mode="mar"] .loteria-kitchen .k-tierra { display: none; }
html[data-mode="mar"] .loteria-kitchen .k-mar { display: inline; }

/* ---------- La mesa: an oilcloth (hule) gingham table ---------- */
.loteria-mesa {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 256px) minmax(0, 1fr);
  gap: 26px clamp(24px, 3.4vw, 44px);
  align-items: center;
  padding: clamp(20px, 3.4vw, 40px);
  border-radius: var(--radius-lg);
  background-color: #fbf4e6;
  background-image:
    radial-gradient(ellipse 60% 70% at 30% 20%, rgba(255, 255, 255, 0.55), transparent 70%),
    repeating-linear-gradient(0deg, var(--hule) 0 22px, transparent 22px 44px),
    repeating-linear-gradient(90deg, var(--hule) 0 22px, transparent 22px 44px);
  box-shadow: 0 0 0 3px var(--comal), 8px 8px 0 var(--comal);
  transition: background-color 0.4s ease;
}

/* ---------- The dealer: deck, stamp, button ---------- */
.loteria-dealer { display: grid; justify-items: center; gap: 22px; }
.loteria-deck {
  position: relative;
  width: var(--deck-w);
  aspect-ratio: 5 / 8;
  container-type: inline-size;
}
/* A Lotería card back: cream border, black rule, talavera field, Nina's medallion. */
.loteria-back {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 0 0 1.5px var(--comal);
}
.loteria-back::before {
  content: "";
  position: absolute;
  inset: 7%;
  inset: max(5px, 5cqi);
  border-radius: 5px;
  border: 2px solid var(--comal);
  background: var(--back-field) var(--talavera) 0 0 / 30px 30px;
}
.loteria-medal {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  width: 64%;
  height: 46%;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--comal), inset 0 0 0 3px var(--paper), inset 0 0 0 4.5px var(--back-field);
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1;
}
.loteria-medal b {
  font: 400 1.35rem/1 var(--font-display);
  font-size: clamp(0.8rem, 14.5cqi, 1.7rem);
  color: var(--back-field);
  text-shadow: 1.5px 1.5px 0 var(--back-dot);
}
.loteria-medal i {
  margin-top: 4px;
  font: 900 0.55rem/1 var(--font-label);
  font-size: clamp(0.45rem, 6.2cqi, 0.72rem);
  font-style: normal;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--comal);
}
/* The stack gets thinner as the deck runs down (data-left from loteria.js). */
.loteria-deck .loteria-back {
  box-shadow:
    0 0 0 1.5px var(--comal),
    3px 3px 0 0 var(--paper), 3px 3px 0 1.5px var(--comal),
    6px 6px 0 0 var(--paper), 6px 6px 0 1.5px var(--comal),
    9px 9px 0 0 var(--paper), 9px 9px 0 1.5px var(--comal),
    16px 20px 26px -10px rgba(27, 21, 18, 0.5);
  transition: box-shadow 0.3s ease;
}
.loteria-deck[data-left="some"] .loteria-back {
  box-shadow:
    0 0 0 1.5px var(--comal),
    3px 3px 0 0 var(--paper), 3px 3px 0 1.5px var(--comal),
    6px 6px 0 0 var(--paper), 6px 6px 0 1.5px var(--comal),
    14px 18px 24px -10px rgba(27, 21, 18, 0.5);
}
.loteria-deck[data-left="few"] .loteria-back {
  box-shadow:
    0 0 0 1.5px var(--comal),
    3px 3px 0 0 var(--paper), 3px 3px 0 1.5px var(--comal),
    12px 16px 22px -10px rgba(27, 21, 18, 0.5);
}
.loteria-deck.is-lifting { animation: deck-lift 0.34s var(--ease); }
@keyframes deck-lift { 40% { transform: translateY(-5px) rotate(-1.5deg); } }
.loteria-deck.is-shuffling { animation: deck-shuffle 0.5s ease-in-out; }
@keyframes deck-shuffle {
  20% { transform: translateX(-6px) rotate(-3deg); }
  45% { transform: translateX(6px) rotate(2.5deg); }
  70% { transform: translateX(-3px) rotate(-1deg); }
}
/* ¡Lotería! lands on the deck once all three cards are face up. */
.loteria-stamp {
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 2;
  padding: 0.28em 0.5em 0.34em;
  border: 3px double #fffaf1;
  border-radius: 10px;
  background: #b3261e;
  color: #fffaf1;
  font: 400 1.45rem/1 var(--font-display);
  font-size: clamp(0.9rem, 17cqi, 1.7rem);
  white-space: nowrap;
  box-shadow: 0 0 0 2px var(--comal), 0 10px 18px -8px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-14deg) scale(0.7);
  pointer-events: none;
}
.loteria-stamp.is-on { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg); }
.loteria-stamp.is-thumping { animation: loteria-thump 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
@keyframes loteria-thump {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-30deg) scale(2.3); }
  55% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(0.9); }
  78% { transform: translate(-50%, -50%) rotate(-15deg) scale(1.05); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); }
}
.loteria-deck.is-thumped { animation: deck-thump 0.4s ease-out; }
@keyframes deck-thump { 55% { transform: translateY(3px) scale(0.985); } }

.loteria-controls { display: grid; justify-items: center; gap: 10px; width: 100%; }
.loteria-deal {
  display: inline-grid;
  justify-items: center;
  gap: 5px;
  width: 100%;
  max-width: 260px;
  min-height: 60px;
  padding: 11px 18px 12px;
  border: 0;
  border-radius: 18px;
  background: var(--deal);
  color: #fff !important;
  font: 400 1.06rem/1.1 var(--font-display);
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--comal), 0 5px 0 2px var(--comal), 0 16px 26px -12px rgba(27, 21, 18, 0.6);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background-color 0.3s ease;
}
.loteria-deal small {
  font: 700 0.8rem/1 var(--font-script);
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: #fff3d6;
}
html[data-mode="mar"] .loteria-deal small { color: #eaf7ea; }
.loteria-deal:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--comal), 0 7px 0 2px var(--comal), 0 20px 30px -12px rgba(27, 21, 18, 0.6); }
.loteria-deal:active { transform: translateY(4px); box-shadow: 0 0 0 2px var(--comal), 0 1px 0 2px var(--comal); }
.loteria-deal[aria-disabled="true"] { cursor: progress; }
.loteria-count {
  display: grid;
  gap: 2px;
  min-height: 2.6em;
  margin: 0;
  font: 800 0.72rem/1.2 var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
}
.loteria-count .script { font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: var(--accent-deep); }

/* ---------- The table: three slots, then three cards ---------- */
.loteria-table { position: relative; display: grid; min-width: 0; }
.loteria-slots,
.loteria-cards {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, var(--card-w)));
  justify-content: center;
  gap: clamp(8px, 2.4vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.loteria-slots > span {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 8;
  border: 2px dashed rgba(27, 21, 18, 0.34);
  border-radius: 10px;
  background: rgba(255, 250, 241, 0.55);
  font: 400 2.2rem/1 var(--font-script);
  color: rgba(27, 21, 18, 0.34);
}
.loteria-table.is-dealt .loteria-slots { visibility: hidden; }

.lc { display: grid; align-content: start; justify-items: center; gap: 14px; min-width: 0; }
.lc-move { width: 100%; }
.lc-tilt { transform: rotate(var(--tilt, 0deg)); perspective: 900px; }
.lc:nth-child(1) { --tilt: -2.2deg; }
.lc:nth-child(2) { --tilt: 1deg; }
.lc:nth-child(3) { --tilt: 2.4deg; }
.lc-flip { position: relative; transform-style: preserve-3d; }
.lc-face,
.lc-back {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.lc-face {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 5 / 8;
  padding: 7px 7px 9px;
  border-radius: 10px;
  background: var(--paper);
  color: var(--comal);
  box-shadow: 0 0 0 1.5px var(--comal), 0 18px 26px -14px rgba(27, 21, 18, 0.55);
  container-type: inline-size;
}
.lc-back { position: absolute; inset: 0; transform: rotateY(180deg); container-type: inline-size; }
.lc-back .loteria-back { box-shadow: 0 0 0 1.5px var(--comal), 0 18px 26px -14px rgba(27, 21, 18, 0.55); }

/* The picture: a real photo only where a dish maps to one; otherwise a
   category-coloured card with a Lotería-style pictogram. */
.lc-art {
  position: relative;
  flex: 1 1 auto;
  min-height: 42%;
  overflow: hidden;
  border: 2px solid var(--comal);
  border-radius: 4px;
  background: var(--art-pattern, none), var(--art-bg, #0f8b8d);
}
.lc-art::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 66%;
  aspect-ratio: 1;
  background: var(--glyph) no-repeat center / contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.22));
}
.lc-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lc-art.has-photo::after { display: none; }
.lc-word {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 5%;
  font: 400 1.05rem/1 var(--font-script);
  font-size: clamp(0.7rem, 11cqi, 1.25rem);
  color: var(--art-ink, #fffaf1);
  text-align: center;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
.lc-num {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  margin: 0;
  padding: 3px 6px 2px;
  border: 1.5px solid var(--comal);
  border-radius: 3px;
  background: var(--paper);
  font: 400 0.8rem/1 var(--font-display);
  font-size: clamp(0.62rem, 8cqi, 0.9rem);
  color: var(--comal);
}
.lc-name {
  margin: 8px 2px 0;
  padding-top: 7px;
  border-top: 2px solid var(--comal);
  font: 400 1rem/1.05 var(--font-display);
  font-size: clamp(0.7rem, 9.4cqi, 1.1rem);
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  color: var(--comal);
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.lc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 8px;
  margin: 7px 2px 0;
}
.lc-cat {
  font: 800 0.66rem/1.2 var(--font-label);
  font-size: clamp(0.58rem, 6.4cqi, 0.72rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lc-price {
  font: 400 1.05rem/1 var(--font-display);
  font-size: clamp(0.78rem, 9.6cqi, 1.15rem);
  color: #a3221b;
}
html[data-mode="mar"] .lc-price { color: #0b5f68; }
.lc-when {
  flex-basis: 100%;
  font: 800 0.62rem/1.2 var(--font-label);
  font-size: clamp(0.56rem, 6cqi, 0.68rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a1b15;
}
.lc-add {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 200px;
  min-height: 44px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--comal);
  color: var(--masa);
  font: 800 0.82rem/1.15 var(--font-label);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  transition: background-color 0.2s ease, transform 0.15s var(--ease);
}
.lc-add:hover { background: var(--deal); }
.lc-add:active { transform: translateY(2px); }
.lc-add.is-added { background: #1f5a3d; }
html[data-mode="mar"] .lc-add.is-added { background: #0b5f68; }
.lc-add[aria-disabled="true"] { background: #6f675f; cursor: not-allowed; }

/* ---------- Pictograms and colours, per category ---------- */
.lc[data-art="tacos"] .lc-art {
  --art-bg: #b3261e;
  --art-pattern: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0 2px, transparent 2.6px) 0 0 / 14px 14px;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg stroke='%231b1512' stroke-width='2.6' stroke-linejoin='round'%3E%3Cpath d='M12 32c2-6 7-7 9-3 2-6 8-7 10-2 3-5 9-5 10 0 3-4 8-3 9 2 2 0 4 2 3 4z' fill='%235fae4e'/%3E%3Ccircle cx='21' cy='27' r='3.2' fill='%23e0412f'/%3E%3Ccircle cx='35' cy='25' r='3.2' fill='%23e0412f'/%3E%3Ccircle cx='46' cy='28' r='2.8' fill='%23fff3d6'/%3E%3Cpath d='M8 33a24 24 0 0 0 48 0z' fill='%23f6cf6f'/%3E%3C/g%3E%3Cpath d='M15 38a17 17 0 0 0 34 0' fill='none' stroke='%23d49a3a' stroke-width='2' stroke-linecap='round'/%3E%3Cg fill='%23d49a3a'%3E%3Ccircle cx='22' cy='46' r='1.4'/%3E%3Ccircle cx='32' cy='51' r='1.4'/%3E%3Ccircle cx='42' cy='45' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
}
.lc[data-art="burritos"] .lc-art {
  --art-bg: #1f5a3d;
  --art-pattern: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.07) 0 8px, transparent 8px 16px);
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg transform='rotate(-28 32 32)' stroke='%231b1512' stroke-width='2.6' stroke-linejoin='round'%3E%3Crect x='6' y='22' width='52' height='20' rx='10' fill='%23f3dca4'/%3E%3Cpath d='M36 22h12a10 10 0 0 1 0 20H36l3-3.3-3-3.4 3-3.3-3-3.4 3-3.3z' fill='%23d7dee3'/%3E%3Cpath d='M15 27c3 3 3 7 0 10M23 26c3 3.5 3 8.5 0 12' fill='none' stroke='%23c9953f' stroke-width='2'/%3E%3Cpath d='M43 27l6 2M43 37l7-2' fill='none' stroke='%239aa6ad' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E");
}
.lc[data-art="alacarte"] .lc-art {
  --art-bg: #b8255a;
  --art-pattern: radial-gradient(circle, rgba(255, 255, 255, 0.13) 0 2px, transparent 2.6px) 7px 7px / 14px 14px;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 22c-4-4 4-7 0-12M32 22c-4-4 4-7 0-12M40 22c-4-4 4-7 0-12' fill='none' stroke='%23fff3d6' stroke-width='2.2' stroke-linecap='round'/%3E%3Cg stroke='%231b1512' stroke-width='2.6' stroke-linejoin='round'%3E%3Cpath d='M56 40l6-1' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='31' cy='40' rx='25' ry='10' fill='%232a211c'/%3E%3Cellipse cx='31' cy='37.5' rx='17' ry='6' fill='%23f6cf6f'/%3E%3C/g%3E%3Cg fill='%23d49a3a'%3E%3Ccircle cx='25' cy='37' r='1.3'/%3E%3Ccircle cx='34' cy='39' r='1.3'/%3E%3Ccircle cx='38' cy='35.6' r='1.1'/%3E%3C/g%3E%3Cpath d='M9 44c6 4 38 4 44 0' fill='none' stroke='%236f675f' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.lc[data-art="dinners"] .lc-art {
  --art-bg: #2a211c;
  --art-pattern: var(--tin);
  --art-ink: #ffd27a;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='33' r='19' fill='%23fffaf1' stroke='%23f2a007' stroke-width='2.6'/%3E%3Ccircle cx='32' cy='33' r='14' fill='none' stroke='%23e2d3b3' stroke-width='1.4'/%3E%3Cpath d='M21 33c1-7 12-10 17-4 3 5-1 11-8 11-6 0-10-2-9-7z' fill='%239a5130' stroke='%231b1512' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M26 31c3-2 7-3 10-1M26 35c3-1 6-1 9 0' fill='none' stroke='%23c77a4a' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M38 40a7 7 0 0 0 7-8z' fill='%237cc243' stroke='%231b1512' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cg fill='%23e0412f'%3E%3Ccircle cx='40' cy='25' r='1.7'/%3E%3Ccircle cx='44' cy='28' r='1.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23f2a007' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13v10M8.5 13v10M12 13v10M5 23c0 4 7 4 7 0M8.5 26v26'/%3E%3Cpath d='M58 13c-4 5-5 12-4 18h4v21'/%3E%3C/g%3E%3C/svg%3E");
}
.lc[data-art="mariscos-menu"] .lc-art {
  --art-bg: #0f6f78;
  --art-pattern: repeating-linear-gradient(-12deg, rgba(255, 255, 255, 0.06) 0 12px, transparent 12px 24px);
  --art-ink: #c9ec6a;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23c9ec6a' stroke-width='1.6'%3E%3Ccircle cx='9' cy='16' r='2.4'/%3E%3Ccircle cx='14' cy='9' r='1.6'/%3E%3C/g%3E%3Cg stroke='%231b1512' stroke-width='2.6' stroke-linejoin='round'%3E%3Cpath d='M23 23c3-7 11-10 18-6l-3 6z' fill='%23f6b04a'/%3E%3Cpath d='M7 34c7-12 26-16 38-5l11-9v29l-11-9C33 51 14 47 7 34z' fill='%23f6b04a'/%3E%3C/g%3E%3Ccircle cx='16' cy='31' r='2.3' fill='%231b1512'/%3E%3Cpath d='M24 26c3 5 3 11 0 16' fill='none' stroke='%231b1512' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M31 30l4 3-4 3M38 30l4 3-4 3' fill='none' stroke='%23c77d1d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.lc[data-art="caldos"] .lc-art {
  --art-bg: #0a4f56;
  --art-pattern: repeating-linear-gradient(-12deg, rgba(255, 255, 255, 0.05) 0 12px, transparent 12px 24px);
  --art-ink: #c9ec6a;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M22 21c-4-4 4-7 0-12M32 21c-4-4 4-7 0-12M42 21c-4-4 4-7 0-12' fill='none' stroke='%23eaf7f5' stroke-width='2.4' stroke-linecap='round'/%3E%3Cg stroke='%231b1512' stroke-width='2.6' stroke-linejoin='round'%3E%3Crect x='24' y='50' width='16' height='6' rx='2' fill='%23fffaf1'/%3E%3Cpath d='M7 29h50c0 14-11 24-25 24S7 43 7 29z' fill='%23fffaf1'/%3E%3Cellipse cx='32' cy='29' rx='25' ry='4' fill='%23e8703a'/%3E%3C/g%3E%3Cpath d='M11 38h42' stroke='%230f8b8d' stroke-width='3'/%3E%3Cpath d='M22 27c2-2 5-2 6 0M37 27c2-2 5-2 6 0' fill='none' stroke='%23fff3d6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.lc[data-art="weekend"] .lc-art {
  --art-bg: #f2a007;
  --art-pattern: radial-gradient(circle, rgba(27, 21, 18, 0.1) 0 2px, transparent 2.6px) 0 0 / 14px 14px;
  --art-ink: #1b1512;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M24 17c-4-4 4-7 0-12M32 17c-4-4 4-7 0-12M40 17c-4-4 4-7 0-12' fill='none' stroke='%231b1512' stroke-width='2.2' stroke-linecap='round'/%3E%3Cg stroke='%231b1512' stroke-width='2.6' stroke-linejoin='round'%3E%3Cpath d='M13 32c-5 0-7 6-2 8M51 32c5 0 7 6 2 8' fill='none'/%3E%3Cpath d='M15 26h34c5 7 5 20-2 26-4 4-9 6-15 6s-11-2-15-6c-7-6-7-19-2-26z' fill='%23c2632f'/%3E%3Crect x='12' y='21' width='40' height='6.5' rx='3' fill='%23a94f22'/%3E%3C/g%3E%3Cpath d='M21 38c7 3 15 3 22 0' fill='none' stroke='%23f6ecd9' stroke-width='2' stroke-linecap='round'/%3E%3Cg fill='%23f6ecd9'%3E%3Ccircle cx='25' cy='45' r='1.6'/%3E%3Ccircle cx='32' cy='47' r='1.6'/%3E%3Ccircle cx='39' cy='45' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
}
.lc[data-art="otro"] .lc-art {
  --art-bg: #0f8b8d;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 6l6 17 18 1-14 11 5 18-15-10-15 10 5-18L8 24l18-1z' fill='%23f2a007' stroke='%231b1512' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* A few dishes get their own pictogram from a word in their real name. */
.lc[data-glyph="camaron"] .lc-art {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M44 15C30 10 15 18 14 32c-1 10 6 17 15 18' fill='none' stroke='%231b1512' stroke-width='15' stroke-linecap='round'/%3E%3Cpath d='M44 15C30 10 15 18 14 32c-1 10 6 17 15 18' fill='none' stroke='%23f2835a' stroke-width='10' stroke-linecap='round'/%3E%3Cpath d='M35 12l-2 9M26 15l2 8M19 21l7 5M15 31l8 1M17 41l7-4M24 47l3-6' stroke='%231b1512' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M28 50l10-8 3 12z' fill='%23f2835a' stroke='%231b1512' stroke-width='2.4' stroke-linejoin='round'/%3E%3Ccircle cx='46' cy='16' r='6.5' fill='%23f2835a' stroke='%231b1512' stroke-width='2.4'/%3E%3Ccircle cx='48' cy='14' r='1.7' fill='%231b1512'/%3E%3Cpath d='M51 11c4-5 8-6 11-3M52 17c5-1 8 1 10 4' fill='none' stroke='%231b1512' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M27 30l5 4M30 25l5 3M26 36l4 5' stroke='%23fff3d6' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.lc[data-glyph="mejillon"] .lc-art {
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg stroke='%231b1512' stroke-width='2.6' stroke-linejoin='round'%3E%3Cpath d='M30 8C17 12 10 30 16 46c3 8 11 10 16 6 6-11 6-30-2-44z' fill='%232f3f63'/%3E%3Cpath d='M34 8c13 4 20 22 14 38-3 8-11 10-16 6-6-11-6-30 2-44z' fill='%233b4d78'/%3E%3Cpath d='M32 16c7 8 8 22 3 32-2 2-4 2-6 0-5-10-4-24 3-32z' fill='%23f2a24a'/%3E%3C/g%3E%3Cpath d='M20 22c-2 6-2 14 0 20M44 22c2 6 2 14 0 20' fill='none' stroke='%238796b8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Tones: cards from the same category still look hand-made, not stamped out. */
.lc[data-tone="1"] .lc-art { --art-pattern: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.09) 0 7px, transparent 7px 14px); }
.lc[data-tone="2"] .lc-art { --art-pattern: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0 3px, transparent 3.6px) 0 0 / 18px 18px, radial-gradient(circle, rgba(0, 0, 0, 0.12) 0 1.6px, transparent 2.2px) 9px 9px / 18px 18px; }
.lc[data-art="weekend"][data-tone] .lc-art { --art-pattern: radial-gradient(circle, rgba(27, 21, 18, 0.1) 0 2px, transparent 2.6px) 0 0 / 14px 14px; }

/* ---------- Compact band at the top of /menu/ ---------- */
.loteria--compact {
  --deck-w: 118px;
  --card-w: 158px;
  padding: clamp(30px, 4vw, 48px) 0;
  border-bottom: 2px dashed var(--line);
}
.loteria--compact .loteria-head { margin-bottom: 18px; }
.loteria--compact .section-heading h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.loteria--compact .section-heading p { font-size: 1rem; }
.loteria--compact .loteria-mesa { grid-template-columns: minmax(0, 210px) minmax(0, 1fr); padding: clamp(16px, 2.6vw, 28px); }
.loteria--compact .loteria-deal { min-height: 54px; font-size: 0.98rem; }
.loteria-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.loteria--compact .mode-switch button { min-height: 44px; padding: 7px 16px; font-size: 0.95rem; }
@media (min-width: 1040px) {
  .loteria--compact .container {
    display: grid;
    grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
    gap: 24px 44px;
    align-items: center;
  }
  .loteria--compact .loteria-head { flex-direction: column; align-items: flex-start; margin-bottom: 0; }
  .loteria--compact .loteria-cards,
  .loteria--compact .loteria-slots { justify-content: start; }
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .loteria { --deck-w: 96px; }
  .loteria-mesa,
  .loteria--compact .loteria-mesa {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 16px 12px 18px;
    box-shadow: 0 0 0 3px var(--comal), 5px 5px 0 var(--comal);
  }
  .loteria-dealer {
    grid-template-columns: var(--deck-w) minmax(0, 1fr);
    align-items: center;
    justify-items: stretch;
    gap: 16px;
  }
  .loteria-controls { justify-items: stretch; }
  .loteria-deal { max-width: none; }
  .loteria-slots,
  .loteria-cards { gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lc { gap: 10px; }
  .lc:nth-child(1) { --tilt: -1.4deg; }
  .lc:nth-child(2) { --tilt: 0.6deg; }
  .lc:nth-child(3) { --tilt: 1.5deg; }
  .lc-face { padding: 4px 4px 6px; border-radius: 7px; }
  .lc-art { border-width: 1.5px; }
  .lc-num { left: 7px; top: 7px; padding: 2px 4px 1px; border-width: 1px; }
  .lc-name { margin-top: 5px; padding-top: 5px; border-top-width: 1.5px; }
  .lc-meta { flex-direction: column; align-items: center; margin-top: 5px; text-align: center; }
  .lc-add { min-height: 44px; padding: 6px 6px; font-size: 0.72rem; line-height: 1.1; border-radius: 14px; }
  .loteria-slots > span { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .loteria-deck.is-lifting,
  .loteria-deck.is-shuffling,
  .loteria-deck.is-thumped,
  .loteria-stamp.is-thumping { animation: none; }
}

/* Without JavaScript the inline head script never sets data-mode, so the deck
   stays out of the way (the full menu is right below). With JS it is present
   from the first paint, so revealing it never shifts the layout. */
html:not([data-mode]) .loteria { display: none; }