/* The lotería card, shared by the page (index.html) and the image tools (tools/*.html).
   Markup comes from lotCard() in deck.js. Sizes inside the card are in cqw, so a card scales like an image. */
.lc {
  position: relative; container-type: inline-size; aspect-ratio: 7 / 10;
  background: var(--card, #fffaf0); border: 2px solid var(--ink, #1c1418); border-radius: 8px;
  box-shadow: 3px 4px 0 rgba(28, 20, 24, .16);
}
.lc-in {
  position: absolute; inset: 5cqw; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg, #f6c7cf); border: max(1.5px, 1.1cqw) solid var(--ink, #1c1418); border-radius: 2px;
}
.lc-num {
  position: absolute; top: 2cqw; left: 3.5cqw; z-index: 1;
  font: 800 17cqw/1 var(--display, "Fraunces", Georgia, serif); color: var(--ink, #1c1418);
  font-variation-settings: "opsz" 144;
}
.lc-art { flex: 1 1 auto; min-height: 0; width: 100%; padding: 13cqw 5cqw 3cqw; display: block; }
.lc-title {
  flex: 0 0 auto; display: block; text-align: center; white-space: nowrap; text-transform: uppercase;
  background: var(--card, #fffaf0); color: var(--ink, #1c1418); border-top: max(1.5px, 1.1cqw) solid var(--ink, #1c1418);
  padding: 3cqw 1cqw 2.4cqw; font: 800 var(--fs, 11cqw)/1.1 var(--display, "Fraunces", Georgia, serif); letter-spacing: .01em;
  font-variation-settings: "opsz" 144;
}
/* Night cards (EDC): dark panel, neon edges */
.lc.night { background: #231a3b; border-color: #ff4fa8; box-shadow: 0 0 0 1px #ff4fa8, 0 0 18px rgba(255, 79, 168, .45); }
.lc.night .lc-in { border-color: #ff4fa8; }
.lc.night .lc-num { color: #fffaf0; }
.lc.night .lc-title { background: #160f26; color: #ff9fd0; border-color: #ff4fa8; }
.lc.dark .lc-num { color: #fffaf0; }
/* Small cards (section heads) have no title, so the art can use the whole panel */
.lc.mini .lc-art { padding: 16cqw 4cqw 4cqw; }
.lc.mini .lc-num { font-size: 26cqw; }