.vtks-portal {
  font-family: 'Poppins', sans-serif;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
  min-height: 100vh;
  color: #fff;
}

.vtks-portal .vtks-card{max-width:1100px;margin:24px auto;background:#f7fbff;border-radius:22px;box-shadow:0 12px 40px rgba(0,20,60,.12);overflow:hidden}
.vtks-portal .vtks-hero{background:linear-gradient(180deg,#1c51b7 0%,#2049a6 100%);padding:36px 28px;color:#fff}
.vtks-portal .vtks-hero-title{font-size:64px;line-height:1.1;margin:0;font-weight:800;letter-spacing:.5px; text-align: center;color: white;}
.vtks-portal .vtks-section{padding:28px 28px 36px}
.vtks-portal .vtks-lead{font-size:30px;opacity:.35;text-align:center;margin:0 0 24px}
.vtks-portal .vtks-label{display:block;font-weight:700;margin-bottom:10px}
.vtks-portal .vtks-code-row{display:block}
.vtks-portal .vtks-input{width:100%;padding:20px 22px;border:2px solid #dfe9ff;border-radius:18px;font-size:26px;outline:none}
.vtks-portal .vtks-input::placeholder{color:#c7d6f7}
.vtks-portal .vtks-hint{color:#c7d6f7;margin:10px 0 22px}
.vtks-portal .vtks-btn{padding:18px 22px;border:none;border-radius:18px;background:#e9eefb;cursor:pointer;font-size:20px}
.vtks-portal .vtks-primary{background:linear-gradient(90deg,#1f4bb0 0%,#2a57d0 100%);color:#fff}
.vtks-portal .vtks-block{width:100%}
.vtks-portal .vtks-ghost{background:#eef3ff}
.vtks-portal .vtks-left{margin-top:18px}
.vtks-portal .vtks-back-icon{font-size:30px;margin-right:6px;vertical-align:middle}

.vtks-portal .vtks-choose-lead{font-size:28px;margin:0 0 18px}
.vtks-portal .vtks-choose-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.vtks-portal .vtks-choose-card{background:#fff;border-radius:24px;box-shadow:0 10px 28px rgba(0,0,0,.12);padding:0;border:0;cursor:pointer;transition:transform .2s}
.vtks-portal .vtks-choose-card:hover{transform:translateY(-2px)}
.vtks-portal .vtks-card-img{display:block;width:100%;height:auto;border-radius:24px}

.vtks-portal .vtks-wheel-wrap{
  position: relative;
  padding-top: 24px;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
#vtks-wheel-area{
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#vtks-wheel-canvas{
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}
/* .vtks-portal .vtks-pointer{
  position:absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width:0;height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-bottom:26px solid #f5b100;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.3));
  z-index: 3;
} */

.vtks-portal .vtks-result{font-size:26px;font-weight:800}
.vtks-portal .vtks-error{color:#b00020;font-weight:700}

/* Estilos para resultado con imagen */
.vtks-portal .prize-result {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.3);
    margin: 20px 0;
}

/* Estilos para "Siga Participando" */
.vtks-portal .no-prize-result {
    background: linear-gradient(135deg, #ffc107, #fd7e14) !important;
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.3) !important;
}

.vtks-portal .prize-result p {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 15px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.vtks-portal .prize-result img {
    max-width: 120px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    border: 3px solid rgba(255,255,255,0.8);
    margin: 15px auto;
    display: block;
}

#vtks-wheel-canvas { image-rendering: crisp-edges; }

/* Wheel responsive overrides */
#vtks-wheel-area{
  width:100%;
  max-width:560px;
  margin-inline:auto;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
#vtks-wheel-canvas{
  display:block;
  max-width:100%;
  max-height:100%;
}

/* Modal styles for email capture */
.vtks-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vtks-modal-content {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

.vtks-modal-header {
    padding: 24px 24px 16px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
}

.vtks-modal-header h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #1c51b7;
}

.vtks-modal-body {
    padding: 24px;
    text-align: center;
}

.vtks-modal-body p {
    font-size: 18px;
    margin: 0 0 20px;
    color: #555;
}

.vtks-modal-footer {
    padding: 16px 24px 24px;
    text-align: center;
}

/* Scratch card styles - comportamiento idéntico a la ruleta */
.vtks-scratch-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 24px 0;
  min-height: 460px; /* Similar a vtks-wheel-area */
}

.vtks-scratch-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 420px;
  height: 320px;
  position: relative;
  flex-shrink: 0; /* No permitir cambio de tamaño */
}

.vtks-scratch-stage {
  position: relative;
  width: 420px !important;
  height: 320px !important;
  overflow: hidden;
  flex-shrink: 0; /* Mantener tamaño fijo */
}

.vtks-scratch-stage img {
  display: block;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  width: 420px !important;
  height: 320px !important;
  object-fit: cover; /* Cambiar a cover para llenar exactamente el contenedor */
}

.vtks-scratch-canvas {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  width: 420px !important;
  height: 320px !important;
}

.vtks-scratch-result {
  text-align: center;
}

.vtks-scratch-again {
  padding: .6rem 1.1rem;
  border-radius: .75rem;
  border: 0;
  background: #3b5bfd;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.vtks-scratch-again:hover {
  filter: brightness(.95);
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .vtks-portal .vtks-hero-title{font-size:48px}
  .vtks-portal .vtks-lead{font-size:24px}
  .vtks-portal .vtks-input{font-size:20px;padding:16px 18px}
  .vtks-portal .vtks-btn{font-size:18px;padding:16px 20px}
  .vtks-portal .vtks-choose-grid{grid-template-columns:1fr;gap:16px}
  #vtks-wheel-area{max-width:360px;}

  /* Scratch responsive */
  .vtks-scratch-card{width:360px;height:280px}
  .vtks-scratch-stage{width:360px !important;height:280px !important}
  .vtks-scratch-stage img{width:360px !important;height:280px !important}
  .vtks-scratch-canvas{width:360px !important;height:280px !important}
}

@media screen and (max-width: 480px) {
  .vtks-portal .vtks-hero-title{font-size:36px}
  .vtks-portal .vtks-hero{padding:24px 20px}

  /* Scratch mobile */
  .vtks-scratch-card{width:300px;height:240px}
  .vtks-scratch-stage{width:300px !important;height:240px !important}
  .vtks-scratch-stage img{width:300px !important;height:240px !important}
  .vtks-scratch-canvas{width:300px !important;height:240px !important}
  .vtks-portal .vtks-section{padding:20px}
  #vtks-wheel-area{max-width:300px;}
}

/* Loading spinner styles for code validation */
.vtks-loading[hidden] { 
  display: none !important; 
}

.vtks-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  margin-top: 10px;
}

.vtks-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.15);
  border-top-color: currentColor;
  animation: vtks-spin 0.85s linear infinite;
}

.vtks-loading-text {
  font-size: .95rem;
  opacity: .85;
}

@keyframes vtks-spin {
  to { transform: rotate(360deg); }
}

/* Estado deshabilitado del form */
.vtks-form--busy {
  opacity: .6;
  pointer-events: none;
}

/* Overlay de transición de etapa (código -> juego) */
.vtks-stage-loading[hidden] { 
  display: none !important; 
}

.vtks-stage-loading {
  position: absolute;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .85);
  text-align: center;
  padding: 16px;
}

.vtks-stage-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, .15);
  border-top-color: currentColor;
  animation: vtks-stage-spin .9s linear infinite;
  margin-bottom: 10px;
}

.vtks-stage-text {
  font-size: 1rem;
  opacity: .9;
}

@keyframes vtks-stage-spin {
  to { transform: rotate(360deg); }
}

/* Asegura que el wrapper del portal sea posicionable para el overlay */
.vtks-portal-wrapper {
  position: relative;
}

/* Banner de felicitación (ruleta permanece visible) */
#vtks-win-banner[hidden] { 
  display: none !important; 
}

#vtks-win-banner {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
  border: 2px solid #4CAF50;
  border-radius: 12px;
  background: rgba(76, 175, 80, 0.1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
  color: #2E7D32;
}

#vtks-win-banner .vtks-win-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

#vtks-win-banner .vtks-win-icon { 
  font-size: 1.2rem; 
}

#vtks-win-banner .vtks-win-text { 
  font-weight: 600; 
}

#vtks-win-banner .vtks-win-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  margin-left: auto;
}

/* Botón de retorno en el banner de felicitaciones */
#vtks-win-banner .vtks-return-btn {
  margin-top: 10px;
  margin-left: auto;
  padding: 8px 16px;
  background: linear-gradient(90deg, #1f4bb0 0%, #2a57d0 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  animation: vtks-fade-in 0.3s ease-out both;
}

#vtks-win-banner .vtks-return-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(31, 75, 176, 0.3);
}

#vtks-win-banner .vtks-return-btn:active {
  transform: translateY(0);
}

/* Formulario de email integrado en el banner */
#vtks-win-banner .vtks-email-form {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#vtks-win-banner .vtks-email-text {
  margin: 0;
  font-size: 14px;
  color: #2E7D32;
  font-weight: 600;
}

#vtks-win-banner .vtks-email-input {
  padding: 8px 12px;
  border: 2px solid #4CAF50;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  background: white;
  color: #333;
}

#vtks-win-banner .vtks-email-input:focus {
  border-color: #2E7D32;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

#vtks-win-banner .vtks-email-btn {
  padding: 8px 16px;
  background: linear-gradient(90deg, #4CAF50 0%, #66BB6A 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

#vtks-win-banner .vtks-email-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

#vtks-win-banner .vtks-email-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

#vtks-win-banner .vtks-email-error {
  color: #d32f2f;
  font-size: 12px;
  font-weight: 500;
  background: rgba(211, 47, 47, 0.1);
  padding: 6px 8px;
  border-radius: 6px;
  border-left: 3px solid #d32f2f;
}

#vtks-win-banner .vtks-email-success {
  margin-top: 10px;
  color: #2E7D32;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 8px;
  background: rgba(76, 175, 80, 0.15);
  border-radius: 8px;
  animation: vtks-fade-in 0.3s ease-out both;
}

/* Modal básico */
.vtks-modal[hidden] { 
  display: none !important; 
}

.vtks-modal {
  position: fixed; 
  inset: 0; 
  z-index: 10000; 
  display: grid; 
  place-items: center;
  background: rgba(0, 0, 0, 0.45); 
  padding: 16px;
}

.vtks-modal__card {
  width: 100%; 
  max-width: 420px; 
  background: #fff; 
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); 
  padding: 18px;
}

.vtks-modal__desc { 
  margin: 0.25rem 0 1rem; 
  opacity: 0.85; 
}

.vtks-input {
  width: 100%; 
  padding: 10px 12px; 
  border: 1px solid #ddd; 
  border-radius: 10px; 
  font-size: 1rem;
}

.vtks-modal__actions { 
  display: flex; 
  gap: 8px; 
  justify-content: flex-end; 
  margin-top: 12px; 
}

.vtks-btn { 
  padding: 8px 12px; 
  border-radius: 10px; 
  border: 1px solid transparent; 
  cursor: pointer; 
}

.vtks-btn--primary { 
  background: #111; 
  color: #fff; 
}

.vtks-btn--ghost { 
  background: #fff; 
  border-color: #ddd; 
}

/* Banner felicitación visible */
#vtks-win-banner[hidden]{ display:none !important; }
#vtks-win-banner.is-visible{
  animation: vtks-fade-in .18s ease-out both;
}
@keyframes vtks-fade-in { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform:none; } }

/* Alert de error + back */
#vtks-error-alert[hidden]{ display:none !important; }
#vtks-error-alert{
  margin-top:12px;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border:1px solid #f3c2c2; border-radius:10px;
  background:#fff6f6; color:#8a1f1f;
}
#vtks-back-to-code{
  margin-left:auto; padding:6px 10px; border-radius:10px;
  border:1px solid #ddd; background:#fff; cursor:pointer;
}