:root{
  --verde:#0d5c4b;
  --verde-oscuro:#083d33;
  --rojo:#b92b2f;
  --amarillo:#f2b63d;
  --crema:#f7efd9;
  --tinta:#28221d;
  --azul:#1d5f8c;
  --sombra:0 22px 55px rgba(46,30,19,.22);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Montserrat,system-ui,sans-serif;background:
  radial-gradient(circle at top left,rgba(242,182,61,.25),transparent 26%),
  linear-gradient(135deg,#f6edd3 0%,#ead9b7 100%);color:var(--tinta)}
body{min-height:100vh;overflow-x:hidden;position:relative}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M0 40h80M40 0v80' stroke='%23744b2b' stroke-width='.5' opacity='.35'/%3E%3C/svg%3E")}
.app-shell{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:28px 0 38px;position:relative;z-index:2}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:700;color:var(--rojo);margin:0 0 5px}
h1,h2,h3{font-family:"DM Serif Display",Georgia,serif;margin:0}
h1{font-size:clamp(2.3rem,6vw,4.7rem);line-height:.9;color:var(--verde-oscuro);text-shadow:0 2px 0 #fff8}
.counter{background:var(--verde);color:#fff;border:4px solid #f6cf73;box-shadow:6px 6px 0 #7c2b26;padding:10px 16px;text-align:center;min-width:132px;transform:rotate(1.5deg)}
.counter span{display:block;font-size:1.75rem;font-weight:800;line-height:1}
.counter small{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em}
.game-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr);gap:24px}
.stage-panel,.history-panel{background:rgba(255,250,238,.82);border:2px solid rgba(114,70,38,.2);border-radius:26px;box-shadow:var(--sombra);backdrop-filter:blur(4px)}
.stage-panel{padding:28px}
.stage{min-height:470px;display:grid;place-items:center;perspective:1200px;overflow:hidden;position:relative}
.stage:after{content:"";position:absolute;width:65%;height:42px;bottom:22px;border-radius:50%;background:radial-gradient(ellipse,rgba(45,24,10,.32),transparent 66%);filter:blur(4px)}
.deck{width:280px;height:400px;position:relative;transform-style:preserve-3d;z-index:2}
.deck-card{position:absolute;inset:0;border-radius:18px;overflow:hidden;border:8px solid #f5df9b;box-shadow:0 18px 38px rgba(31,20,12,.32);transform-style:preserve-3d;backface-visibility:hidden}
.back{background:linear-gradient(45deg,var(--verde) 25%,#0b4e40 25%,#0b4e40 50%,var(--verde) 50%,var(--verde) 75%,#0b4e40 75%);background-size:28px 28px;border-color:#efcc6a}
.back:after{content:"LOTERÍA";position:absolute;inset:18px;border:3px solid #f7df91;display:grid;place-items:center;color:#f7df91;font-family:"DM Serif Display";font-size:2.1rem;letter-spacing:.08em;transform:rotate(-90deg)}
.back-1{transform:translate(11px,-11px) rotate(4deg)}
.back-2{transform:translate(-9px,6px) rotate(-5deg)}
.back-3{transform:translate(5px,4px) rotate(2deg)}
.active-card{background:#fff7df;display:grid;place-items:center;transition:transform .55s cubic-bezier(.18,.9,.25,1.25);z-index:5}
.active-card img{width:100%;height:100%;object-fit:cover;display:block}
.card-placeholder{height:100%;width:100%;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;text-align:center;padding:28px;background:
  linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,.65)),
  repeating-linear-gradient(0deg,#f7e7b9 0 18px,#efd89e 18px 36px);color:var(--verde-oscuro)}
.card-placeholder .sun{font-size:4.3rem;filter:drop-shadow(0 5px 0 rgba(164,90,27,.15))}
.card-placeholder strong{font-family:"DM Serif Display";font-size:1.65rem}.card-placeholder small{max-width:170px;line-height:1.4}
.deck.shuffling .back-1{animation:shuffleA .9s ease-in-out infinite alternate}
.deck.shuffling .back-2{animation:shuffleB .9s .08s ease-in-out infinite alternate}
.deck.shuffling .back-3{animation:shuffleC .9s .15s ease-in-out infinite alternate}
.deck.shuffling .active-card{animation:shuffleTop .9s .1s ease-in-out infinite alternate}
@keyframes shuffleA{to{transform:translate(-150px,-18px) rotateY(25deg) rotateZ(-12deg)}}
@keyframes shuffleB{to{transform:translate(150px,14px) rotateY(-25deg) rotateZ(11deg)}}
@keyframes shuffleC{to{transform:translate(-90px,40px) rotateY(15deg) rotateZ(-8deg)}}
@keyframes shuffleTop{to{transform:translate(85px,-36px) rotateY(-18deg) rotateZ(8deg)}}
.active-card.reveal{animation:reveal .62s cubic-bezier(.18,.8,.2,1)}
@keyframes reveal{0%{transform:translateY(-40px) rotateY(95deg) scale(.9);opacity:.2}100%{transform:translateY(0) rotateY(0) scale(1);opacity:1}}
.current-card-info{text-align:center;padding:4px 0 18px}.current-card-info span{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--rojo);color:white;font-weight:800;margin-bottom:8px;box-shadow:3px 3px 0 #7d1d20}.current-card-info h2{font-size:clamp(1.8rem,4vw,2.8rem);color:var(--verde-oscuro)}.current-card-info p{margin:8px auto 0;max-width:580px;color:#665447}
.controls{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:12px}.btn{border:0;border-radius:16px;padding:15px 16px;font:700 .9rem Montserrat;cursor:pointer;box-shadow:0 7px 0 rgba(81,50,29,.23);transition:transform .16s ease,box-shadow .16s ease}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(81,50,29,.23)}.btn-primary{background:var(--rojo);color:white}.btn-secondary{background:var(--amarillo);color:#3b2a15}.btn-ghost{background:#e5d6b4;color:#4d3b2d}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.history-panel{padding:22px;min-height:620px}.history-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}.history-heading h3{font-size:1.65rem;color:var(--verde-oscuro)}.pill{min-width:40px;height:40px;border-radius:999px;background:var(--azul);color:#fff;display:grid;place-items:center;font-weight:800}.history-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-height:590px;overflow:auto;padding-right:4px}.history-item{position:relative;background:#fff8e5;border:2px solid #dccaa5;border-radius:14px;overflow:hidden;aspect-ratio:3/4;box-shadow:0 8px 18px rgba(46,30,19,.11)}.history-item img{width:100%;height:100%;object-fit:cover}.history-item .fallback{height:100%;padding:10px;display:grid;place-items:center;text-align:center;font-family:"DM Serif Display";color:var(--verde)}.history-item .num{position:absolute;top:6px;left:6px;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:var(--rojo);color:#fff;font-size:.72rem;font-weight:800;border:2px solid #fff5}.history-empty{grid-column:1/-1;padding:28px 18px;text-align:center;border:2px dashed #c7ac7b;border-radius:16px;color:#806b56;line-height:1.5}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);background:#24201b;color:#fff;padding:12px 18px;border-radius:999px;font-size:.82rem;transition:.28s;z-index:10;box-shadow:0 10px 24px #0004}.toast.show{transform:translate(-50%,0)}
.papel-picado{position:fixed;top:0;width:190px;height:72px;z-index:1;opacity:.9;filter:drop-shadow(0 5px 3px #0002)}.papel-1{left:3%;background:var(--rojo);clip-path:polygon(0 0,100% 0,100% 70%,88% 55%,76% 78%,64% 55%,52% 78%,40% 55%,28% 78%,16% 55%,0 72%)}.papel-2{right:4%;background:var(--verde);clip-path:polygon(0 0,100% 0,100% 70%,88% 55%,76% 78%,64% 55%,52% 78%,40% 55%,28% 78%,16% 55%,0 72%)}
@media(max-width:880px){.game-layout{grid-template-columns:1fr}.history-panel{min-height:auto}.history-grid{grid-template-columns:repeat(4,1fr);max-height:none}.stage{min-height:430px}}
@media(max-width:600px){.app-shell{width:min(100% - 18px,1180px);padding-top:18px}.topbar{align-items:flex-end}.counter{min-width:108px;padding:8px}.stage-panel{padding:16px}.stage{min-height:390px}.deck{width:232px;height:332px}.controls{grid-template-columns:1fr 1fr}.btn-primary{grid-column:1/-1;grid-row:1}.history-grid{grid-template-columns:repeat(3,1fr)}.papel-picado{width:120px;height:48px}h1{font-size:2.7rem}}