/* Base layout */
html,body{
  margin:0;
  padding:0;
  height:100%;
  font-family:'Courier Prime',monospace;
  background:#fafafa;
  text-align:center;
}

/* Game field */
#game{
  position:relative;
  width:100%;
  height:100%;
  min-height:100dvh;
  padding-bottom:env(safe-area-inset-bottom,0px);
}

#game, #game *{
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
}

/* Player cup */
#player{
  position:absolute;
  bottom:20px;
  left:0;
  font-size:48px;
}

/* Falling items */
.item{position:absolute;font-size:32px}

/* Score board */
#scoreboard{position:absolute;top:10px;left:10px;font-size:20px}

/* Visual progress */
#big{
  position:absolute;
  top:40px;
  right:10px;
  font-size:32px;
  transition:font-size .3s ease;
}

.hidden{display:none!important}

/* Desktop dark background */
@media(min-width:768px){body{background:#000}}

/* Mobile Controls */
.mc{
  position:fixed;left:0;right:0;bottom:0;
  display:flex;justify-content:space-between;gap:16px;
  padding:12px calc(env(safe-area-inset-right,0px) + 12px)
           calc(env(safe-area-inset-bottom,0px) + 12px)
           calc(env(safe-area-inset-left,0px) + 12px);
  pointer-events:none;
  z-index:10;
}
.mc-btn{
  pointer-events:auto;
  width:88px;height:88px;
  border:0;border-radius:16px;
  background:rgba(0,0,0,0.35);
  color:#fff;font-size:28px;font-weight:700;
  backdrop-filter:blur(6px);
  touch-action:none;
}

@media (pointer: fine){
  #mobile-controls{display:none!important}
}