/* Ajuste visual SOLO para la pantalla inicial de raspado.
   No modifica resultado, formulario ni pantalla final. */

.sc-screen--scratch{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at -8% 3%, rgba(45,157,150,.22) 0 11%, transparent 11.4%),
    radial-gradient(circle at 108% 28%, rgba(45,157,150,.13) 0 13%, transparent 13.4%),
    radial-gradient(circle at 6% 91%, rgba(45,157,150,.12) 0 17%, transparent 17.4%),
    radial-gradient(circle at 93% 88%, rgba(45,157,150,.08) 0 16%, transparent 16.4%),
    linear-gradient(160deg,#fbfdfd 0%,#f4fbf9 48%,#eef8f6 100%);
}

/* Curvas/decoración muy sutil de marca, sin usar una foto de fondo. */
.sc-screen--scratch::before,
.sc-screen--scratch::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  border:2px solid rgba(45,157,150,.20);
  border-radius:50%;
}
.sc-screen--scratch::before{
  width:62vw;
  height:32vw;
  min-width:420px;
  min-height:220px;
  left:-24vw;
  bottom:7vh;
  transform:rotate(-9deg);
}
.sc-screen--scratch::after{
  width:56vw;
  height:27vw;
  min-width:380px;
  min-height:190px;
  right:-30vw;
  top:34vh;
  transform:rotate(18deg);
}

/* Crédito agregado por play.php */
.sc-screen--scratch .sc-decus-credit{
  margin-top:4px;
  color:#81908e;
  font-weight:400;
}
.sc-screen--scratch .sc-decus-credit a{
  color:#647370;
  font-weight:700;
  text-decoration:none;
}
.sc-screen--scratch .sc-decus-credit a:hover{text-decoration:underline}

@media(max-width:779px){
  /* En esta pantalla evitamos que el 1fr estire el centro y genere el gran vacío. */
  .sc-screen--scratch{
    display:none;
    min-height:100svh;
    grid-template-rows:auto auto 1fr;
    align-content:start;
  }
  .sc-screen--scratch.is-active{display:grid}

  /* Baja apenas el encabezado completo y compacta la distancia interna. */
  .sc-screen--scratch .sc-hero{
    padding:30px 18px 8px;
  }
  .sc-screen--scratch .sc-brand{
    width:min(268px,70vw);
    margin-bottom:12px;
  }
  .sc-screen--scratch .sc-hero h1{
    font-size:clamp(30px,8vw,38px);
    line-height:1.02;
    margin:0;
  }
  .sc-screen--scratch .sc-hero p{
    margin:8px auto 0;
    font-size:13.8px;
    line-height:1.42;
  }

  /* El raspado queda pegado al encabezado, sin el hueco vertical anterior. */
  .sc-screen--scratch .sc-main--scratch{
    display:block;
    width:100%;
    padding:16px 18px 8px!important;
    margin:0 auto;
  }
  .sc-screen--scratch .sc-scratch-wrap{
    width:100%;
    max-width:620px;
    margin:0 auto;
  }
  .sc-screen--scratch .sc-scratch-card{
    border-radius:24px;
    box-shadow:0 16px 38px rgba(16,75,70,.12), inset 0 0 0 1px rgba(45,157,150,.12);
  }
  .sc-screen--scratch .sc-hint{
    margin-top:12px;
    font-size:13.2px;
    line-height:1.4;
  }

  /* Pie un poco más legible, pero sigue siendo discreto. */
  .sc-screen--scratch .sc-footer{
    align-self:end;
    padding:18px 18px 17px;
    font-size:12.6px;
    line-height:1.45;
    color:#778784;
  }
  .sc-screen--scratch .sc-decus-credit{
    margin-top:5px;
    font-size:12.3px;
  }
}

@media(max-width:420px){
  .sc-screen--scratch .sc-hero{padding-top:26px}
  .sc-screen--scratch .sc-brand{width:min(252px,69vw)}
  .sc-screen--scratch .sc-main--scratch{padding-top:13px!important}
  .sc-screen--scratch .sc-footer{font-size:12px;padding-bottom:14px}
  .sc-screen--scratch .sc-decus-credit{font-size:11.8px}
}