*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{

  background:
  radial-gradient(circle at top,
  #2563eb,
  #111827);

  min-height:100vh;

  display:flex;
  justify-content:center;
  align-items:center;

  font-family:Arial;

  overflow:hidden;

  padding:20px;
}

.game{

  width:100%;
  max-width:420px;

  text-align:center;
}

/* TITLE */

.title{

  color:gold;

  font-size:clamp(32px,8vw,55px);

  margin-bottom:20px;
}

/* TOP BAR */

.top-bar{

  display:flex;

  gap:10px;

  justify-content:space-between;

  margin-bottom:25px;
}

.info-box{

  flex:1;

  background:#0f172a;

  color:white;

  padding:14px 10px;

  border-radius:16px;

  font-size:clamp(16px,4vw,22px);

  font-weight:bold;

  box-shadow:
  0 10px 20px rgba(0,0,0,0.4);
}

/* CHARACTER */

.character-box{

  position:relative;

  display:flex;

  justify-content:center;

  align-items:center;

  width:100%;
}

/* GLOW */

.character-glow{

  position:absolute;

  width:65vw;
  height:65vw;

  max-width:260px;
  max-height:260px;

  background:
  radial-gradient(circle,
  rgba(255,255,255,0.5),
  transparent);

  border-radius:50%;

  filter:blur(20px);

  z-index:0;

  animation:glow 2s infinite;
}

@keyframes glow{

  0%{
    transform:scale(1);
    opacity:0.7;
  }

  50%{
    transform:scale(1.1);
    opacity:1;
  }

  100%{
    transform:scale(1);
    opacity:0.7;
  }
}

/* FACE */

#face{

  width:min(75vw,320px);

  position:relative;

  z-index:2;

  cursor:pointer;

  user-select:none;

  transition:0.08s;

  filter:
  drop-shadow(0 15px 25px rgba(0,0,0,0.5));
}

#face:active{
  transform:scale(0.92);
}

/* +1 EFFECT */

.coin-effect{

  position:absolute;

  left:50%;
  top:55%;

  transform:
  translate(-50%,-50%) scale(1);

  color:white;

  font-size:clamp(40px,10vw,60px);

  font-weight:bold;

  opacity:0;

  z-index:5;

  pointer-events:none;

  text-shadow:
  0 0 10px white,
  0 0 20px white,
  0 0 40px white;
}

/* BUTTON */

button{

  width:100%;

  padding:16px;

  margin-top:25px;

  border:none;

  border-radius:18px;

  background:gold;

  color:black;

  font-size:clamp(18px,5vw,24px);

  font-weight:bold;

  cursor:pointer;

  transition:0.2s;

  box-shadow:
  0 10px 20px rgba(0,0,0,0.4);
}

button:hover{
  transform:scale(1.03);
}

/* TEXT */

.bottom-text{

  margin-top:20px;

  color:white;

  font-size:clamp(16px,4vw,22px);

  text-shadow:
  0 0 10px rgba(255,255,255,0.5);

  line-height:1.4;
}

/* MOBILE EXTRA */

@media(max-width:500px){

  body{
    padding:12px;
  }

  .top-bar{
    gap:8px;
  }

  .info-box{
    padding:12px 8px;
  }

  button{
    border-radius:14px;
  }

  .bottom-text{
    margin-top:16px;
  }
}

/* SMALL DEVICES */

@media(max-width:360px){

  .top-bar{
    flex-direction:column;
  }

  .info-box{
    width:100%;
  }

  #face{
    width:80vw;
  }
}