:root{

  --gold:#CD981D;

  --gold-light:#E9BD50;

  --black:#0F0F0F;

  --ink:#151515;

  --coral:#E8454C;

  --cream:#FFF8EC;

  --white:#FFFFFF;

  --muted:#CFC5B6;

}


/* =========================================================
   GENERAL
========================================================= */

*{

  box-sizing:border-box;

  -webkit-tap-highlight-color:
    transparent;

}


html,
body{

  margin:0;

  min-height:100%;

  background:#0b0b0b;

  color:#fff;

}


html{

  overscroll-behavior-y:
    none;

}


body{

  min-height:
    100dvh;

  font-family:
    "DM Sans",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;


  background:

    radial-gradient(

      circle at 20% -10%,

      rgba(
        205,
        152,
        29,
        .17
      ),

      transparent 34%

    ),

    linear-gradient(

      180deg,

      #111 0%,

      #090909 100%

    );

}


button{

  font:inherit;

}


img{

  max-width:100%;

}


/* =========================================================
   CONTENEDOR PRINCIPAL
========================================================= */

.app{

  width:
    min(
      100%,
      520px
    );


  min-height:
    100dvh;


  margin:
    0 auto;


  padding:

    calc(
      14px +
      env(
        safe-area-inset-top
      )
    )

    18px

    calc(
      22px +
      env(
        safe-area-inset-bottom
      )
    );


  position:
    relative;


  overflow:
    hidden;

}


/* DECORACIÓN INFERIOR */

.app::after{

  content:"";


  position:absolute;


  left:-20%;

  right:-20%;

  bottom:-135px;


  height:
    245px;


  transform:
    rotate(-5deg);


  background:

    linear-gradient(

      135deg,

      rgba(
        205,
        152,
        29,
        .92
      ),

      rgba(
        226,
        181,
        72,
        .48
      )

    );


  z-index:0;

}


.app > *{

  position:
    relative;


  z-index:1;

}


/* =========================================================
   LOGO
========================================================= */

.brand{

  min-height:
    86px;


  display:flex;


  align-items:center;


  justify-content:center;

}


.brand-logo{

  width:
    min(
      220px,
      56vw
    );


  height:auto;


  display:block;


  object-fit:
    contain;

}


/* =========================================================
   PANTALLAS
========================================================= */

.screen{

  display:none;


  min-height:

    calc(
      100dvh -
      122px
    );


  flex-direction:
    column;


  align-items:
    center;


  justify-content:
    center;


  animation:
    fadeIn
    .28s
    ease;

}


.screen--active{

  display:flex;

}


@keyframes fadeIn{

  from{

    opacity:0;

    transform:
      translateY(7px);

  }


  to{

    opacity:1;

    transform:none;

  }

}


/* =========================================================
   INICIO
========================================================= */

.hero{

  width:100%;


  text-align:
    center;


  padding-bottom:
    56px;

}


.eyebrow{

  color:
    #e7ded0;


  font-size:
    11px;


  line-height:
    1.3;


  letter-spacing:
    .30em;


  font-weight:
    800;


  margin:
    0 0 22px;

}


h1{

  margin:0;


  font-family:
    "Playfair Display",
    serif;


  font-size:

    clamp(
      54px,
      16vw,
      78px
    );


  font-weight:
    600;


  line-height:
    .92;


  letter-spacing:
    -2px;

}


h1 em{

  display:block;


  margin:
    8px 0;


  color:
    var(--gold);


  font-size:
    .70em;


  line-height:
    1;


  font-style:
    normal;

}


.intro{

  width:

    min(
      350px,
      90%
    );


  margin:
    26px auto 0;


  color:
    #f3eee7;


  font-size:
    16px;


  line-height:
    1.50;

}


/* =========================================================
   REGLAS
========================================================= */

.mini-rules{

  width:

    min(
      390px,
      100%
    );


  margin:

    24px
    auto
    28px;


  display:grid;


  grid-template-columns:

    repeat(
      3,
      1fr
    );


  gap:
    7px;

}


.mini-rules span{

  min-height:
    48px;


  padding:
    8px 5px;


  display:flex;


  align-items:center;


  justify-content:center;


  border:

    1px solid

    rgba(
      205,
      152,
      29,
      .30
    );


  border-radius:
    12px;


  background:

    rgba(
      255,
      255,
      255,
      .045
    );


  color:
    #f3eadc;


  font-size:
    10px;


  line-height:
    1.2;


  font-weight:
    700;


  text-transform:
    uppercase;

}


/* =========================================================
   BOTÓN
========================================================= */

.btn{

  width:

    min(
      100%,
      365px
    );


  min-height:
    58px;


  border:
    0;


  border-radius:
    14px;


  padding:
    0 24px;


  color:
    #fff;


  font-weight:
    800;


  letter-spacing:
    .025em;


  cursor:
    pointer;


  box-shadow:

    0
    12px
    25px

    rgba(
      0,
      0,
      0,
      .22
    );

}


.btn:disabled{

  opacity:
    .58;


  cursor:
    wait;

}


.btn--coral{

  background:

    linear-gradient(

      135deg,

      #ff555c,

      var(--coral)

    );

}


.small-message{

  min-height:
    22px;


  margin:
    13px 0 0;


  color:
    #f2d99b;


  font-size:
    13px;


  line-height:
    1.35;

}


/* =========================================================
   TEXTO JUEGO
========================================================= */

.game-copy{

  text-align:
    center;


  margin-bottom:
    20px;

}


.game-copy h2{

  margin:
    0 0 5px;


  font-size:
    21px;


  line-height:
    1.2;

}


.game-copy p{

  margin:0;


  color:
    #e6ded4;


  font-size:
    14px;

}


/* =========================================================
   TABLERO
========================================================= */

.scratch-grid{

  width:

    min(
      100%,
      390px
    );


  display:grid;


  grid-template-columns:

    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );


  gap:
    9px;

}


.scratch-cell{

  position:
    relative;


  aspect-ratio:
    1 / 1;


  min-width:
    0;


  overflow:
    hidden;


  border-radius:
    15px;


  background:
    var(--cream);


  border:

    1px solid

    rgba(
      205,
      152,
      29,
      .36
    );


  box-shadow:

    0
    8px
    20px

    rgba(
      0,
      0,
      0,
      .24
    );

}


/* =========================================================
   CONTENIDO DEBAJO DEL RASPADO
========================================================= */

.cell-under{

  position:
    absolute;


  inset:
    0;


  display:flex;


  flex-direction:
    column;


  align-items:
    center;


  justify-content:
    center;


  padding:
    8px;


  text-align:
    center;


  color:
    #1c1c1c;


  background:

    radial-gradient(

      circle at 50% 24%,

      #fff 0,

      #fffaf1 50%,

      #f7ead4 100%

    );

}


.hidden-placeholder{

  color:

    rgba(
      205,
      152,
      29,
      .24
    );


  font-size:
    28px;

}


.cell-under strong{

  font-size:

    clamp(
      12px,
      3.5vw,
      16px
    );


  line-height:
    1.08;

}


.cell-under small{

  margin-top:
    6px;


  font-size:
    8px;


  line-height:
    1.15;


  font-weight:
    800;


  letter-spacing:
    .04em;

}


/* =========================================================
   SIGUE RASPANDO
========================================================= */

.cell-under--continue strong{

  color:
    #111;

}


.cell-under--continue small{

  color:
    #805b0c;

}


/* =========================================================
   PERDISTE
========================================================= */

.cell-under--lose{

  background:

    radial-gradient(

      circle at top,

      #fff 0,

      #fff6f4 62%,

      #f9e0dc 100%

    );

}


.cell-under--lose strong{

  color:
    var(--coral);


  font-size:

    clamp(
      17px,
      5vw,
      25px
    );


  font-family:

    "Playfair Display",
    serif;


  font-style:
    italic;

}


.cell-under--lose small{

  color:
    #1c1c1c;

}


/* =========================================================
   BOLSA
========================================================= */

.cell-under--bag{

  padding:0;


  overflow:hidden;


  background:
    #060606;

}


.prize-bag{

  position:absolute;


  inset:0;


  width:
    100%;


  height:
    100%;


  display:block;


  object-fit:
    cover;


  object-position:
    center;


  transform:
    scale(1.28);


  pointer-events:
    none;


  user-select:
    none;

}


/* =========================================================
   CANVAS
========================================================= */

.scratch-canvas{

  position:absolute;


  inset:0;


  width:
    100%;


  height:
    100%;


  cursor:
    grab;


  touch-action:
    none;


  user-select:
    none;

}


.scratch-canvas:active{

  cursor:
    grabbing;

}


/* =========================================================
   PROGRESO
========================================================= */

.progress-wrap{

  width:

    min(
      100%,
      390px
    );


  margin-top:
    20px;


  text-align:
    center;

}


.progress-track{

  width:
    100%;


  height:
    6px;


  overflow:
    hidden;


  background:
    #242424;


  border-radius:
    999px;

}


.progress-bar{

  width:
    0;


  height:
    100%;


  background:

    linear-gradient(

      90deg,

      var(--gold),

      var(--gold-light)

    );


  transition:

    width
    .25s
    ease;

}


.progress-wrap p{

  margin:
    9px 0 0;


  color:
    #cfc6bb;


  font-size:
    12px;

}


.game-message{

  width:

    min(
      350px,
      92%
    );


  min-height:
    22px;


  margin:

    12px
    auto
    0;


  color:
    #f1ddaa;


  text-align:
    center;


  font-size:
    12px;


  line-height:
    1.4;

}


/* =========================================================
   RESULTADOS
========================================================= */

.result-card{

  width:

    min(
      100%,
      385px
    );


  min-height:
    410px;


  padding:
    42px 28px;


  display:flex;


  flex-direction:
    column;


  align-items:
    center;


  justify-content:
    center;


  position:
    relative;


  overflow:
    hidden;


  color:
    var(--ink);


  text-align:
    center;


  background:

    linear-gradient(

      160deg,

      #fff 0%,

      #fff9ed 100%

    );


  border:

    1px solid

    rgba(
      205,
      152,
      29,
      .48
    );


  border-radius:
    28px;


  box-shadow:

    0
    24px
    55px

    rgba(
      0,
      0,
      0,
      .32
    );

}


.result-card::after{

  content:"";


  position:absolute;


  width:
    180px;


  height:
    48px;


  right:
    -35px;


  bottom:
    -12px;


  transform:
    rotate(-12deg);


  background:

    linear-gradient(

      90deg,

      transparent,

      rgba(
        205,
        152,
        29,
        .68
      )

    );

}


/* =========================================================
   GANASTE
========================================================= */

.winner-star,
.lose-mark{

  margin-bottom:
    17px;


  color:
    var(--gold);


  font-size:
    42px;

}


.winner-kicker,
.lose-kicker{

  margin:
    0;


  color:
    var(--coral);


  font-size:
    15px;


  line-height:
    1.2;


  font-weight:
    800;


  letter-spacing:
    .13em;

}


.winner-title,
.lose-title{

  margin:

    10px
    0
    20px;


  font-family:

    "Playfair Display",
    serif;


  font-size:
    52px;


  line-height:
    1;


  font-style:
    italic;


  font-weight:
    600;

}


.winner-title{

  color:
    var(--gold);

}


.lose-title{

  color:
    var(--coral);

}


.winner-line,
.lose-line{

  width:
    68px;


  height:
    2px;


  margin-bottom:
    22px;


  background:
    var(--gold);

}


.lose-line{

  background:
    var(--coral);

}


.winner-copy,
.lose-copy{

  width:

    min(
      285px,
      100%
    );


  margin:
    0;


  color:
    #171717;


  font-size:
    17px;


  line-height:
    1.5;

}


.finished-note{

  margin:
    18px 0 0;


  color:
    #d4cabd;


  font-size:
    12px;


  text-align:
    center;

}


/* =========================================================
   TELÉFONOS PEQUEÑOS
========================================================= */

@media (
  max-width:
  380px
){

  .app{

    padding-left:
      13px;


    padding-right:
      13px;

  }


  .brand{

    min-height:
      72px;

  }


  .brand-logo{

    width:

      min(
        190px,
        57vw
      );

  }


  .scratch-grid{

    gap:
      7px;

  }


  .game-copy{

    margin-bottom:
      15px;

  }


  .game-copy h2{

    font-size:
      18px;

  }


  .cell-under{

    padding:
      5px;

  }


  .cell-under small{

    font-size:
      7px;

  }

}


/* =========================================================
   PANTALLAS BAJAS
   IPHONE SE / ALGUNOS ANDROID
========================================================= */

@media (
  max-height:
  720px
){

  .brand{

    min-height:
      64px;

  }


  .screen{

    min-height:

      calc(
        100dvh -
        94px
      );

  }


  .game-copy{

    margin-bottom:
      12px;

  }


  .progress-wrap{

    margin-top:
      12px;

  }


  .result-card{

    min-height:
      350px;


    padding-top:
      30px;


    padding-bottom:
      30px;

  }

}
#btnStart{
  margin-top: 24px;
}