/* Mexico, "Latido": card stock and Talavera cobalt by day, cempasúchil lights by night. */
:root {
  --bg: #F3E7CD; --ink: #1E1611; --ink2: #6B5846; --line: rgba(30, 22, 17, .16); --panel: #FBF5E6; --panel2: #EADBBB;
  --accent: #D6246E; --accent-ink: #fff; --pulse: #D6246E;
  --hero-bg: #120E26; --hero-ink: #FBF5E6; --hero-ink2: rgba(251, 245, 230, .66);
  --display: 'Playfair Display', Georgia, serif; --body: Inter, system-ui, sans-serif;
  --r: 6px; --r-sm: 4px; --shadow: 0 10px 26px rgba(40, 24, 8, .16);
  --cobalt: #1F3F96; --yolk: #F2B81B;
}
body { background-color: var(--bg); background-image: radial-gradient(rgba(120, 80, 30, .06) 1px, transparent 1.2px); background-size: 7px 7px; }
.big { font-weight: 700; }
.big em { font-weight: 400; }
#pulse h1 { font-weight: 700; }
#pulse h1 .n { color: var(--yolk); }

/* Papel picado garlands straddle each section boundary */
.trim { height: 0; }
.trim > svg { position: absolute; left: 0; top: -6px; overflow: visible; pointer-events: none; }
.pf-in { transform-origin: 20px 0; transform-box: fill-box; animation: sway 4.5s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -4); animation-play-state: paused; }
.trim.in .pf-in { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .pf-in { animation: none; } }
.papel { mix-blend-mode: multiply; }
#lives + .trim .papel, .t2 .papel { mix-blend-mode: normal; }
@keyframes sway { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
.t1 > svg { top: -2px; }

/* The lives sit on Talavera cobalt */
#lives { --bg: #1F3F96; --ink: #FBF5E6; --ink2: rgba(251, 245, 230, .72); --line: rgba(251, 245, 230, .22); --panel: rgba(251, 245, 230, .08); --panel2: rgba(251, 245, 230, .14); background: var(--bg); color: var(--ink);
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .07) 2px, transparent 2.5px), radial-gradient(circle at 0 0, rgba(242, 184, 27, .12) 3px, transparent 3.5px); background-size: 34px 34px, 34px 34px; }
#lives .big em { color: var(--yolk); }
#lives .dkey li { color: var(--ink); }
.rail-ctl button { color: var(--ink); }

/* Lotería card */
.card { width: 290px; }
.lot { display: block; color: #1E1611; }
.lot-face { position: relative; display: block; aspect-ratio: 5 / 7.4; background: #FBF5E6; border-radius: 8px; padding: 12px; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.lot-face::before { content: ''; position: absolute; inset: 9px; border: 3px solid #1E1611; border-radius: 3px; pointer-events: none; z-index: 2; }
.lot-num { position: absolute; z-index: 3; top: 16px; left: 20px; font: 900 34px/1 var(--display); color: #1E1611; }
.lot-size { position: absolute; z-index: 3; top: 22px; right: 20px; font: 500 11px var(--mono); color: #1E1611; background: #FBF5E6; padding: 2px 6px; border-radius: 3px; }
.lot-size b { font-weight: 700; }
.lot-art { position: absolute; inset: 12px 12px 58px; display: grid; place-items: center; border-radius: 2px; background: var(--lc); overflow: hidden;
  background-image: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .16) 0 7.5deg, transparent 7.5deg 15deg); }
.lot-emb { width: 70%; height: auto; filter: drop-shadow(2px 3px 0 rgba(30, 22, 17, .35)); }
.lot-sun { position: absolute; right: 6px; bottom: 6px; width: 40%; }
.lot-sun .med { width: 100%; height: auto; }
.lot-name { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: 12px; height: 46px; display: grid; place-items: center; font: 900 21px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: #1E1611; border-top: 3px solid #1E1611; background: #FBF5E6; white-space: nowrap; }
.lot-cap { display: block; padding: 16px 4px 0; color: var(--ink); }
.lot-cap b { display: block; font: 700 21px/1.15 var(--display); }
.lot-cap .tag { display: block; font-size: 14px; color: var(--ink2); margin: 6px 0 10px; min-height: 3.9em; }
.dchips { display: flex; flex-wrap: wrap; gap: 5px; }
.dchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(251, 245, 230, .12); border: 1px solid rgba(251, 245, 230, .25); font-size: 12px; color: var(--ink); }
.lot .open { position: absolute; z-index: 4; top: 12px; right: 12px; display: none; }
.card.active .lot-face { transform: rotate(-1.2deg); transition: transform .5s; }
.card:hover .lot-face { transform: rotate(0) translateY(-4px); }
.lot-face { transition: transform .4s; }
@media (max-width: 819px) { .card { width: min(74vw, 290px); } .lot-name { font-size: 18px; } }

/* Drive portrait bloom */
.med .petal { transform-origin: 0 0; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), opacity .4s; }
.med.bloom .petal { animation: rayIn .9s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes rayIn { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.med .petal.hi path { stroke: #1E1611; stroke-width: 3; }
.med .plabel { cursor: pointer; }
.med .plabel.hi circle { stroke: #D6246E; stroke-width: 3; }
.l-med .petal { cursor: pointer; }
.life-in .local { color: #1F3F96; }
.life-in { --lc-ink: color-mix(in srgb, var(--lc) 62%, #1E1611); }

/* The year plate */
#year .mname { font-weight: 700; }

/* La tabla: move tiles as small Lotería cards, impact counted in beans */
.mt { border: 2px solid #1E1611; border-radius: 4px; background: #FBF5E6; box-shadow: 3px 3px 0 #1E1611; }
.mt:hover { box-shadow: 5px 5px 0 #1E1611; }
.mt-rank { font: 900 20px/1 var(--display); color: #1E1611; letter-spacing: 0; }
.mt-ico { background: var(--mc); color: #fff; }
.mt-name { font-weight: 700; }
.mt-meter i, .mc-meters i { width: 13px; height: 9px; border-radius: 50%; border: 1.5px solid #6B3F1F; transform: rotate(-20deg); }
.mt-meter i.on, .mc-meters i.on { background: radial-gradient(circle at 35% 35%, #9A6235, #5A3216 70%); border-color: #4A2810; }
.board.is-field .mt { border-width: 1.5px; box-shadow: 2px 2px 0 #1E1611; }
.mc-in { border: 2px solid #1E1611; border-top: 8px solid var(--mc); border-radius: 6px; }

/* Close */
.take article { border: 2px solid #1E1611; box-shadow: 4px 4px 0 #1E1611; }
.take article:nth-child(1) { background: #FCE3EC; } .take article:nth-child(2) { background: #FDF0CC; } .take article:nth-child(3) { background: #DCE6F7; }
.tip { background: #1E1611; color: #FBF5E6; }


/* Review pass: the deck reads as a deck; inactive cards sit back without going grey */
.card { opacity: 1; }
.card:not(.active) .lot-face { transform: scale(.95) rotate(1deg); filter: saturate(.85) brightness(.96); }
/* The profile keeps the Lotería frame */
.life-top { border-bottom: 3px solid #1E1611; }
.life-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -11px; height: 8px; background: radial-gradient(circle at 6px 0, var(--lc) 5px, transparent 5.5px) 0 0 / 12px 8px repeat-x; }
.lt-id span { font: 900 20px/1 var(--display); }
.l-id h2 { font-weight: 900; text-transform: none; }
.local { font-weight: 700; }
.stat, .pair li, .ptile, .voice, .move, .signals span, .chans span { border-color: rgba(30, 22, 17, .28); }
.move { border-top-width: 6px; }
/* Woodcut room: a printed outline on every figure */
#crowd .fig .shape { stroke: rgba(30, 22, 17, .5); stroke-width: 1; paint-order: stroke; }
.rail-dots button::after { box-shadow: 0 0 0 1.5px rgba(251, 245, 230, .6); }
.lot-name.long { font-size: 16px; letter-spacing: .01em; }