html,body{
  margin:0;
  overflow:hidden;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  width:100%;
  height:100%;
  background:#0a0612;
  font-family:'Courier New',ui-monospace,Menlo,Consolas,monospace;
}

#game{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:#0a0612;
}

.hidden{display:none !important;}

.screen{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(12px, 3vw, 18px);
  text-align:center;
  padding:24px;
  box-sizing:border-box;
  color:#eef2f6;
  z-index:5;
  background:rgba(10,6,18,0.78);
}

.title{
  font-size:clamp(28px, 12vw, 84px);
  margin:0;
  letter-spacing:4px;
  font-weight:900;
  color:#ccf235;
  text-shadow:4px 4px 0 #5b6b1b, 8px 8px 0 rgba(0,0,0,0.45);
}

.tagline{
  font-size:clamp(13px, 3.6vw, 19px);
  max-width:min(80vw, 640px);
  color:#cdd2c2;
  margin:0;
  letter-spacing:1px;
}

.best-line, .detail-line{
  font-size:clamp(13px, 4vw, 20px);
  color:#a8ad98;
  margin:0;
  letter-spacing:1px;
}

.roast{
  font-size:clamp(11px, 3.4vw, 15px);
  color:#6d715f;
  margin:0;
  letter-spacing:0.5px;
  font-style:italic;
}

.cta-btn{
  font-family:inherit;
  font-weight:900;
  font-size:clamp(18px, 6vw, 30px);
  letter-spacing:2px;
  padding:clamp(14px, 4vw, 20px) clamp(26px, 9vw, 44px);
  border:none;
  border-radius:14px;
  background:#ccf235;
  color:#0a0612;
  box-shadow:0 8px 0 #2b330a, 0 8px 20px rgba(0,0,0,0.5);
  cursor:pointer;
  touch-action:manipulation;
}

.cta-btn:active{
  transform:translateY(6px);
  box-shadow:0 2px 0 #2b330a;
}

.pulse{
  animation:pulse 1.1s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}

#hud{
  position:fixed;
  top:calc(16px + env(safe-area-inset-top));
  left:0;
  right:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  z-index:4;
  pointer-events:none;
  color:#eef2f6;
  text-shadow:2px 2px 0 #000;
}

#turnLabel{
  font-size:clamp(16px, 5vw, 26px);
  font-weight:900;
  letter-spacing:2px;
  color:#ccf235;
}

#shotsLine{
  font-size:clamp(11px, 3.2vw, 16px);
  color:#a8ad98;
}

.screen > *{
  max-width:min(92vw, 680px);
}

#pucksLine{
  font-size:clamp(12px, 3.6vw, 18px);
  font-weight:900;
  letter-spacing:2px;
  color:#ffb02e;
}

.kbd-hint{
  display:none;
  font-size:clamp(10px, 2.6vw, 13px);
  color:#9aa08a;
  letter-spacing:1px;
  margin:0;
  opacity:0.85;
}

@media (hover: hover) and (pointer: fine){
  .kbd-hint{ display:block; }
}