/* ============================================================================
   resgate.css — página "Resgatar código" (pags/resgatar.php)        [2026-10-12]
   Usa .tvl-bt / .tvl-prev da loja.css e loja-cosmeticos.css. Cores do tema ativo.
   ============================================================================ */
.tvr { --tvr-a: var(--tv-destaque); --tvr-b: var(--tv-luz, #48d0ff); display: flex; flex-direction: column; gap: 18px; }

/* palco principal */
.tvr-palco { position: relative; isolation: isolate; overflow: hidden; min-height: 460px; display: grid; place-items: center; padding: 48px 20px;
	border-radius: 24px; border: 1px solid color-mix(in srgb, var(--tvr-a) 40%, var(--tv-borda));
	background:
		radial-gradient(60% 70% at 50% 45%, color-mix(in srgb, var(--tvr-a) 30%, transparent), transparent 70%),
		radial-gradient(40% 50% at 85% 10%, color-mix(in srgb, var(--tvr-b) 22%, transparent), transparent 70%),
		radial-gradient(45% 55% at 10% 95%, color-mix(in srgb, var(--tvr-a) 20%, transparent), transparent 70%),
		var(--tv-superficie);
	box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--tvr-a) 70%, transparent); }
.tvr-ceu { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tvr-ceu span { position: absolute; inset: -50%; background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff8, transparent), radial-gradient(1px 1px at 70% 60%, #fff6, transparent), radial-gradient(1.5px 1.5px at 40% 80%, #fff5, transparent), radial-gradient(1px 1px at 85% 20%, #fff7, transparent), radial-gradient(1px 1px at 10% 70%, #fff5, transparent);
	background-size: 260px 260px; animation: tvr-estrelas 60s linear infinite; opacity: .6; }
.tvr-ceu span:nth-child(2) { background-size: 380px 380px; animation-duration: 90s; opacity: .4; }
.tvr-ceu span:nth-child(3) { inset: auto -20% -60% -20%; height: 120%; background: conic-gradient(from 0deg at 50% 50%, transparent, color-mix(in srgb, var(--tvr-a) 22%, transparent), transparent 30%, color-mix(in srgb, var(--tvr-b) 18%, transparent), transparent 60%);
	filter: blur(40px); animation: tvr-girar 24s linear infinite; opacity: .55; }
@keyframes tvr-estrelas { to { transform: translate3d(-260px, -130px, 0); } }
@keyframes tvr-girar { to { transform: rotate(360deg); } }

/* cosméticos flutuando ao fundo */
.tvr-flutuantes { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tvr-flu { position: absolute; width: 96px; height: 76px; transform: translate(-50%, -50%) scale(.82); opacity: .42; filter: saturate(1.1);
	animation: tvr-flutuar var(--tvr-t, 8s) ease-in-out var(--tvr-d, 0s) infinite alternate; }
.tvr-flu .tvl-prev { width: 100%; height: 100%; min-height: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px -12px #000a; border: 1px solid color-mix(in srgb, var(--tv-borda) 70%, transparent); }
@keyframes tvr-flutuar { from { transform: translate(-50%, -50%) scale(.82) rotate(-4deg); } to { transform: translate(-50%, calc(-50% - 16px)) scale(.86) rotate(4deg); } }
@media (max-width: 767px) { .tvr-flu { width: 70px; height: 56px; opacity: .28; } .tvr-flu:nth-child(n+5) { display: none; } }

/* centro */
.tvr-centro { position: relative; z-index: 1; width: min(640px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.tvr-centro::before { content: ""; position: absolute; inset: -30px -40px; z-index: -1; pointer-events: none; border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--tv-superficie) 82%, transparent), transparent); }
@media (max-width: 991px) { .tvr-flu { opacity: .3; } }
.tvr-bau { position: relative; width: 96px; height: 96px; display: grid; place-items: center; border-radius: 28px; margin-bottom: 4px;
	background: linear-gradient(145deg, color-mix(in srgb, var(--tvr-a) 85%, #fff), color-mix(in srgb, var(--tvr-a) 70%, var(--tvr-b)));
	box-shadow: 0 18px 50px -12px color-mix(in srgb, var(--tvr-a) 80%, transparent), inset 0 2px 0 #ffffff55; animation: tvr-pulo 3.2s ease-in-out infinite; }
.tvr-bau i { font-size: 46px; color: #fff; filter: drop-shadow(0 4px 8px #0005); }
.tvr-bau-brilho { position: absolute; inset: -18px; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tvr-a) 60%, transparent), transparent 65%); animation: tvr-respira 3.2s ease-in-out infinite; }
@keyframes tvr-pulo { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes tvr-respira { 0%, 100% { opacity: .6; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
.tvr-abrindo .tvr-bau { animation: tvr-chacoalha .35s ease-in-out infinite; }
.tvr-explodiu .tvr-bau { animation: tvr-abre 1.2s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tvr-chacoalha { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes tvr-abre { 0% { transform: scale(1); } 30% { transform: scale(1.35) rotate(-10deg); } 60% { transform: scale(.92) rotate(6deg); } 100% { transform: scale(1); } }
.tvr-selo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tvr-a);
	background: color-mix(in srgb, var(--tvr-a) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tvr-a) 35%, transparent); border-radius: 999px; }
.tvr-titulo { margin: 0; font-size: clamp(28px, 5vw, 44px); line-height: 1.08; font-weight: 900; letter-spacing: -.02em; color: var(--tv-texto); }
.tvr-titulo span { background: linear-gradient(90deg, var(--tvr-a), var(--tvr-b), var(--tvr-a)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: tvr-brilho 5s linear infinite; }
@keyframes tvr-brilho { to { background-position: -200% 0; } }
.tvr-sub { margin: 0; max-width: 520px; font-size: 15px; line-height: 1.55; color: var(--tv-texto-2); }

/* campo do código */
.tvr-form { width: 100%; margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.tvr-campo { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 18px; border-radius: 18px; background: color-mix(in srgb, var(--tv-superficie-2) 88%, transparent);
	border: 2px solid color-mix(in srgb, var(--tvr-a) 45%, var(--tv-borda)); box-shadow: 0 0 0 0 color-mix(in srgb, var(--tvr-a) 30%, transparent); transition: box-shadow .25s, border-color .25s; backdrop-filter: blur(8px); }
.tvr-campo:focus-within { border-color: var(--tvr-a); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tvr-a) 22%, transparent), 0 18px 40px -18px color-mix(in srgb, var(--tvr-a) 80%, transparent); }
.tvr-campo > i { font-size: 22px; color: var(--tvr-a); }
.tvr-campo input { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--tv-texto);
	font: 800 clamp(16px, 3.4vw, 22px)/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase; }
.tvr-campo input::placeholder { color: var(--tv-texto-2); opacity: .55; letter-spacing: .12em; font-size: .78em; }
.tvr-ir { flex: 0 0 auto; height: 48px; padding: 0 20px; border-radius: 13px; font-size: 15px; white-space: nowrap; }
.tvr-ir i { transition: transform .2s; }
.tvr-ir:hover i { transform: translateX(3px); }
.tvr-abrindo .tvr-ir { opacity: .75; pointer-events: none; }
.tvr-tremer .tvr-campo { animation: tvr-treme .45s; border-color: var(--tv-erro); }
@keyframes tvr-treme { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.tvr-msg { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--tv-texto-2); }
.tvr-msg-erro { color: var(--tv-erro); }
.tvr-login { margin: 0; font-size: 13px; color: var(--tv-texto-2); }
.tvr-login a { color: var(--tvr-a); font-weight: 700; }
@media (max-width: 520px) {
	.tvr-palco { padding: 36px 14px; min-height: 0; border-radius: 20px; }
	.tvr-campo { flex-wrap: wrap; padding: 8px; }
	.tvr-campo > i { display: none; }
	.tvr-campo input { width: 100%; flex-basis: 100%; height: 46px; text-align: center; }
	.tvr-ir { width: 100%; justify-content: center; }
	.tvr-bau { width: 78px; height: 78px; border-radius: 22px; } .tvr-bau i { font-size: 38px; }
}

/* prêmio */
.tvr-premio { padding: 20px; border-radius: 22px; background: var(--tv-superficie); border: 1px solid color-mix(in srgb, var(--tvr-a) 45%, var(--tv-borda));
	box-shadow: 0 24px 60px -36px color-mix(in srgb, var(--tvr-a) 80%, transparent); animation: tvr-surge .45s cubic-bezier(.2, .9, .3, 1.2); scroll-margin-top: 90px; }
.tvr-premio[hidden] { display: none; }
@keyframes tvr-surge { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.tvr-premio-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tvr-premio-topo h3, .tvr-ok-topo h3 { margin: 4px 0 0; font-size: 22px; font-weight: 800; color: var(--tv-texto); }
.tvr-premio-cod { display: inline-block; padding: 3px 10px; font: 800 12px/1.4 ui-monospace, monospace; letter-spacing: .14em; color: var(--tvr-a); border: 1px dashed color-mix(in srgb, var(--tvr-a) 60%, transparent); border-radius: 8px; }
.tvr-prazo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; font-size: 12.5px; font-weight: 700; color: var(--tv-alerta); background: color-mix(in srgb, var(--tv-alerta) 12%, transparent); border-radius: 999px; }
.tvr-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tvr-item { --tvr-i: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--tv-superficie-2); border: 1px solid var(--tv-borda);
	animation: tvr-carta .6s cubic-bezier(.2, .9, .3, 1.25) both; animation-delay: calc(var(--tvr-i) * 90ms); transition: transform .2s, border-color .2s; }
.tvr-item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tvr-a) 55%, var(--tv-borda)); }
@keyframes tvr-carta { from { opacity: 0; transform: perspective(700px) rotateY(80deg) translateY(10px); } to { opacity: 1; transform: none; } }
.tvr-item-prev { position: relative; display: grid; place-items: center; height: 132px; overflow: hidden; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--tvr-a) 22%, transparent), transparent 70%); }
.tvr-item-prev .tvl-prev { width: 100%; height: 100%; min-height: 0; border-radius: 0; }
.tvr-item-info { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 13px; }
.tvr-item-tipo { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tv-texto-2); }
.tvr-item-nome { font-size: 15px; font-weight: 800; color: var(--tv-texto); overflow-wrap: anywhere; }
.tvr-item-valor { font-size: 12px; color: var(--tv-texto-2); }
.tvr-item-raro { align-self: flex-start; padding: 2px 8px; font-size: 10.5px; font-weight: 800; color: #2a1600; background: linear-gradient(135deg, #ffe08a, #ffb02e); border-radius: 999px; }
.tvr-item-ja { font-size: 12px; font-weight: 700; color: var(--tv-alerta); }
.tvr-item-ok { font-size: 12px; font-weight: 700; color: var(--tv-ok); }
.tvr-item-tem { opacity: .55; }
.tvr-item-ganho { border-color: color-mix(in srgb, var(--tv-ok) 55%, var(--tv-borda)); }
.tvr-item-ganho::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, #ffffff30 45%, transparent 60%); background-size: 250% 100%; animation: tvr-reflexo 1.6s ease-out calc(var(--tvr-i) * 120ms + .4s) both; }
@keyframes tvr-reflexo { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.tvr-premio-pe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tvr-premio-pe .tvl-bt { flex: 1 1 220px; justify-content: center; min-height: 48px; font-size: 15px; }
.tvr-resgatar { position: relative; overflow: hidden; }
.tvr-resgatar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, #ffffff40 50%, transparent 65%); background-size: 250% 100%; animation: tvr-reflexo 2.6s ease-in-out infinite; pointer-events: none; }
.tvr-carregando { opacity: .7; pointer-events: none; }
.tvr-premio-aviso { flex: 1 1 100%; margin: 12px 0 0; padding: 10px 12px; font-size: 13px; color: var(--tv-texto-2); background: var(--tv-superficie-2); border-radius: 12px; }
.tvr-premio-pe .tvr-premio-aviso { margin: 0; }
.tvr-premio-ok { border-color: color-mix(in srgb, var(--tv-ok) 55%, var(--tv-borda)); }
.tvr-ok-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.tvr-ok-topo p { margin: 2px 0 0; color: var(--tv-texto-2); }
.tvr-ok-ic { flex: 0 0 auto; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; font-size: 30px; color: #fff; background: var(--tv-ok); box-shadow: 0 0 0 8px color-mix(in srgb, var(--tv-ok) 20%, transparent); animation: tvr-abre .9s cubic-bezier(.2, 1.6, .4, 1); }

/* como funciona */
.tvr-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 767px) { .tvr-passos { grid-template-columns: minmax(0, 1fr); } }
.tvr-passo { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 16px; background: var(--tv-superficie); border: 1px solid var(--tv-borda); }
.tvr-passo b { display: block; font-size: 15px; color: var(--tv-texto); }
.tvr-passo small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--tv-texto-2); }
.tvr-num { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--tvr-a), color-mix(in srgb, var(--tvr-a) 60%, var(--tvr-b))); }
.tvr-nota { margin: 0; padding: 0 4px; font-size: 12.5px; line-height: 1.55; color: var(--tv-texto-2); }
.tvr-nota a { color: var(--tvr-a); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
	.tvr-ceu span, .tvr-flu, .tvr-bau, .tvr-bau-brilho, .tvr-titulo span, .tvr-resgatar::after, .tvr-item-ganho::after { animation: none !important; }
	.tvr-item, .tvr-premio { animation: none; }
}