/* SPR v1.1.0 */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800;900&display=swap');
*{box-sizing:border-box}
:root{
  --g:#f59e0b;--gd:#d97706;--gr:#10b981;--re:#ef4444;
  --bl:#3b82f6;--pu:#8b5cf6;--dk:#0f172a;--wa:#25d366;
}

/* ── overlay ─────────────────────────────── */
.spr-ov{
  	position:fixed!important;
	inset:0!important;
	z-index:2147483647!important;
  	background:rgba(3,6,20,.9)!important;
  	backdrop-filter:blur(12px);
	align-items:center;
	justify-content:center;
  	padding:12px;
	font-family:'Poppins',sans-serif;
}

/* ── box ─────────────────────────────── */
.spr-box{
  	background:#fff;border-radius:24px;
  	box-shadow:0 40px 120px rgba(0,0,40,.75);
  	max-width:470px;
	width:100%;
	max-height:93vh;
	overflow-y:auto;
  	overflow-x:hidden;
  	position:relative;
	flex-direction:column;
	align-items:center;
  	animation:sprIn .45s cubic-bezier(.16,1,.3,1);
  	/* Prevent white ring on video */
  	isolation:isolate;
}
@keyframes sprIn{
	from{transform:translateY(60px) scale(.88);
		opacity:0}to{transform:none;opacity:1}
}
.spr-box::-webkit-scrollbar{
	width:4px
}
.spr-box::-webkit-scrollbar-thumb{
	background:#e2e8f0;
	border-radius:2px
}
/* Video box has black bg to avoid white borders */
#spr-v1.spr-box{
	background:#000;
	overflow:hidden
}

/* ── video ─────────────────────────────── */
#spr-v1{
	padding:0;
	overflow:hidden;
	border-radius:24px;
	background:#000
}
#spr-vid-wrap{
	width:100%;
	line-height:0;
	border-radius:24px;
	overflow:hidden;
	background:#000
}
#spr-vid-wrap video{
	width:100%;
	max-height:450px;
	object-fit:cover;
	border-radius:0;
	display:block;
	background:#000
}
#spr-vid-wrap iframe{
	width:100%;
	height:min(450px,65vw);
	border:none;
	display:block;
	border-radius:0
}
/* Remove white ring artifacts */
#spr-v1 .spr-box{background:#000}

/* ── game ─────────────────────────────── */
#spr-v2{
	padding:26px 20px 24px;
	gap:16px
}
.spr-gtitle{
	font-size:20px;
	font-weight:800;color:var(--dk);
	text-align:center;
	margin:0;
	line-height:1.3
}
.spr-game{
	flex-direction:column;
	align-items:center;
	gap:16px;width:100%
}
.spr-hint{
	font-size:14px;
	color:#64748b;
	text-align:center;
	margin:0;
	font-weight:600
}
.spr-hint2{
	font-size:12px;
	color:#94a3b8;
	text-align:center;
	margin:4px 0 0
}

/* CTA */
.spr-cta{
  	background:linear-gradient(135deg,var(--g),var(--gd));
  	color:#fff;
	border:none;
	border-radius:999px;
  	padding:15px 44px;
	font-size:17px;
	font-weight:800;
  	cursor:pointer;
	font-family:'Poppins',sans-serif;
  	box-shadow:0 8px 26px rgba(245,158,11,.55);
  	transition:.2s;
	animation:ctaP 2s ease-in-out infinite;
}
.spr-cta:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 14px 34px rgba(245,158,11,.7)}
.spr-cta:disabled{opacity:.55;cursor:not-allowed;animation:none}
@keyframes ctaP{0%,100%{box-shadow:0 8px 26px rgba(245,158,11,.55)}50%{box-shadow:0 8px 38px rgba(245,158,11,.9)}}

/* ── RULETA ─────────────────────────────── */
.spr-wheel-wrap{position:relative;display:inline-block}
.spr-w-arrow{
  position:absolute;top:-20px;left:50%;transform:translateX(-50%);
  font-size:34px;z-index:2;filter:drop-shadow(0 4px 8px rgba(0,0,0,.55));
  animation:wA 1s ease-in-out infinite;
}
@keyframes wA{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-7px)}}
#spr-canvas{
  border-radius:50%;display:block;
  box-shadow:0 10px 40px rgba(0,0,0,.4),0 0 0 6px #fff,0 0 0 11px rgba(245,158,11,.45);
  transition:box-shadow .4s;
}

/* ── CUPÓN ─────────────────────────────── */
.spr-sobres{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.spr-env{
  width:105px;height:84px;perspective:900px;cursor:pointer;
  transition:transform .2s, opacity .3s;
}
.spr-env:hover:not([data-locked]){transform:translateY(-12px) scale(1.08)}
.spr-env-in{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.34,1.56,.64,1);
}
.spr-env.spr-flipped .spr-env-in{transform:rotateY(180deg)}
.spr-env-f,.spr-env-b{
  position:absolute;inset:0;backface-visibility:hidden;
  display:flex;align-items:center;justify-content:center;
  border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.18);
  padding:8px;text-align:center;
}
.spr-env-f{font-size:46px;background:linear-gradient(135deg,#fef3c7,#fde68a);border:2px solid var(--g)}
.spr-env-b{
  transform:rotateY(180deg);
  background:linear-gradient(135deg,#ecfdf5,#a7f3d0);
  border:2.5px solid var(--gr);
  flex-direction:column;gap:4px;
}
.spr-env-prize{font-size:12px;font-weight:800;color:#065f46;line-height:1.2;word-break:break-word}

/* ── SCRATCH ─────────────────────────────── */
.spr-scratch-wrap{position:relative;width:300px;height:140px;border-radius:18px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.22)}
#spr-scratch{position:absolute;inset:0;cursor:crosshair;z-index:2;border-radius:18px}
.spr-scratch-back{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:56px;
  background:linear-gradient(135deg,#dbeafe,#bfdbfe);
  border-radius:18px;
}

/* ── CAJA 3D ─────────────────────────────── */
.spr-box3d{
  position:relative;width:140px;height:140px;
  margin:6px auto;filter:drop-shadow(0 14px 30px rgba(239,68,68,.5));
}
.spr-box3d-body{
  position:absolute;bottom:0;left:0;right:0;height:100px;
  background:linear-gradient(145deg,#ef4444,#b91c1c);
  border-radius:0 0 16px 16px;overflow:hidden;
}
.spr-box3d-lid{
  position:absolute;top:0;left:-8px;right:-8px;height:50px;
  background:linear-gradient(145deg,#f87171,#ef4444);
  border-radius:12px 12px 0 0;z-index:2;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  transform-origin:center top;
}
.spr-lid-top{height:100%;border-radius:12px 12px 0 0}
.spr-lid-rb-h,.spr-body-rb-h,.spr-body-rb-h2{position:absolute;height:20px;width:100%;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.85)}
.spr-body-rb-v{position:absolute;width:20px;height:100%;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.85)}
.spr-box3d-shine{position:absolute;top:8px;left:8px;width:30px;height:30px;background:rgba(255,255,255,.25);border-radius:50%}
.spr-box3d-stars{position:absolute;inset:0;pointer-events:none}
.spr-promo-prize{
  background:linear-gradient(135deg,#fffbeb,#fef3c7);border:2.5px solid var(--g);
  border-radius:14px;padding:12px 20px;font-size:17px;font-weight:800;color:var(--dk);
  text-align:center;animation:sprIn .4s ease;
}
@keyframes gShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}

/* ── CONFETTI ─────────────────────────────── */
.spr-confetti{
  position:fixed!important;top:0;left:0;
  width:100%!important;height:100%!important;
  pointer-events:none;z-index:2147483646!important;
}

/* ══════════════════════════════════════════
   VENTANA 3 — RESULTADO
══════════════════════════════════════════ */
.spr-res-box{
    position: relative !important;
    padding:0;
    overflow-y:auto!important;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:#d1d5db transparent;
}
.spr-res-box::-webkit-scrollbar{width:5px}
.spr-res-box::-webkit-scrollbar-thumb{
	background:#d1d5db;
	border-radius:3px
}
.spr-x-btn{
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: rgba(255,255,255,0.95) !important;
    border: 2px solid rgba(0,0,0,0.1) !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #334155 !important;
    transition: background 0.2s, transform 0.2s !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
}
.spr-x-btn:hover{
    background: rgba(239,68,68,0.95) !important;
    color: #fff !important;
    border-color: rgba(239,68,68,.6) !important;
    transform: scale(1.1) !important;
}
#spr-v3{ transform: none !important; }

/* Header */
.spr-res-hdr{
    padding:20px 22px 16px;
    text-align:center;
    border-radius:24px 24px 0 0;
	
}
.spr-hdr-win{background:linear-gradient(135deg,#064e3b,#047857);color:#fff}
.spr-hdr-lose{background:linear-gradient(135deg,#1e293b,#334155);color:#fff}
.spr-res-store{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;opacity:.65;margin-bottom:5px}
.spr-res-camp{font-size:19px;font-weight:900;line-height:1.2}

/* Message */
.spr-res-msg{
  margin:16px 20px 0;border-radius:16px;padding:16px 14px;
  display:flex;align-items:center;gap:12px;
  font-size:16px;font-weight:700;line-height:1.3;
}
.msg-win{background:linear-gradient(135deg,#ecfdf5,#d1fae5);color:#065f46;border:2px solid #10b981}
.msg-lose{background:linear-gradient(135deg,#f8fafc,#f1f5f9);color:#475569;border:1.5px solid #cbd5e1}
.res-emoji{font-size:36px;flex-shrink:0}

/* Prize */
.spr-res-prize{
  margin:12px 20px 0;border-radius:16px;padding:16px;
  display:flex;align-items:center;gap:14px;
}
.prize-win{background:linear-gradient(135deg,#fffbeb,#fef3c7);border:2.5px solid var(--g);box-shadow:0 6px 22px rgba(245,158,11,.28)}
.prize-lose{background:#f8fafc;border:1.5px solid #e2e8f0}
#spr-res-ico{font-size:38px;flex-shrink:0}
#spr-res-ptxt{font-size:18px;font-weight:800;color:var(--dk);word-break:break-word}

/* Code */
.spr-res-code-block{margin:12px 20px 0;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:2px solid var(--gr);border-radius:14px;padding:14px 16px}
.spr-code-lbl{font-size:10px;font-weight:700;color:#16a34a;letter-spacing:.8px;text-transform:uppercase;margin-bottom:6px}
.spr-res-code{font-family:'Courier New',monospace;font-size:22px;font-weight:900;color:#15803d;letter-spacing:3px;word-break:break-all}

/* QR */
.spr-res-qr{margin:12px 20px 0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;background:#fff;border:1px solid #e2e8f0;border-radius:14px}
.spr-res-qr p{font-size:11px;color:#94a3b8;margin:0}
/* QR canvas scaling for mobile */
.spr-res-qr canvas,.spr-res-qr img{max-width:100%!important;height:auto!important;display:block}
#spr-qr{display:flex;justify-content:center;min-height:90px}

/* Player */
.spr-res-player{margin:12px 20px 0;display:flex;flex-direction:column;gap:6px}
.spr-res-player label{font-size:13px;font-weight:700;color:#374151}
.spr-player-row{display:flex;gap:7px;flex-wrap:wrap}
.spr-inp{flex:1;min-width:110px;padding:9px 11px;border:1.5px solid #d1d5db;border-radius:10px;font-size:13px;font-family:'Poppins',sans-serif}
.spr-inp:focus{border-color:var(--bl);outline:none;box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.spr-save-btn{padding:9px 14px;background:var(--bl);color:#fff;border:none;border-radius:10px;font-size:14px;cursor:pointer;font-family:'Poppins',sans-serif;white-space:nowrap}
#spr-saved-ok{font-size:12px;color:var(--gr);font-weight:700}

/* Meta */
.spr-res-meta{margin:12px 20px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spr-meta-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.spr-meta-item span{font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.6px}
.spr-meta-item strong{font-size:13px;font-weight:700;color:var(--dk)}

/* Claim */
.spr-res-claim{margin:12px 20px 0;background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:12px 14px;font-size:12px;color:#92400e;line-height:1.5;text-align:center}

/* Buttons */
.spr-res-btns{display:flex;gap:10px;margin:12px 20px 20px}
.spr-btn-copy,.spr-btn-wa{
  flex:1;padding:13px;border:none;border-radius:12px;
  font-size:14px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:.15s;font-family:'Poppins',sans-serif;
}
.spr-btn-copy:hover,.spr-btn-wa:hover{transform:translateY(-2px)}
.spr-btn-copy{background:var(--dk);color:#fff}
.spr-btn-copy:hover{box-shadow:0 8px 20px rgba(0,0,0,.3)}
.spr-btn-wa{background:var(--wa);color:#fff}
.spr-btn-wa:hover{box-shadow:0 8px 20px rgba(37,211,102,.4)}

/* Already played */
.spr-played-box{padding:46px 32px;flex-direction:column;align-items:center;text-align:center;gap:14px}
.spr-played-ico{font-size:64px;line-height:1}
.spr-played-box h2{font-size:22px;font-weight:900;color:var(--dk);margin:0}
.spr-played-box p{font-size:14px;color:#64748b;margin:0;max-width:280px;line-height:1.5}

@media(max-width:480px){
  .spr-box{border-radius:18px}
  #spr-v2{padding:18px 14px 16px}
  .spr-res-meta{grid-template-columns:1fr}
  .spr-res-msg,.spr-res-prize,.spr-res-code-block,.spr-res-qr,.spr-res-player,.spr-res-meta,.spr-res-claim,.spr-res-btns{margin-left:12px;margin-right:12px}
}