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

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

.hidden{display:none !important;}

#hud{
  position:fixed;
  top:0;left:0;right:0;
  display:flex;
  justify-content:space-between;
  padding:14px 18px;
  color:#2b2118;
  font-weight:700;
  font-size:16px;
  letter-spacing:1px;
  pointer-events:none;
  z-index:5;
}

.screen{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
  padding:24px;
  box-sizing:border-box;
  background:radial-gradient(circle at 50% 30%, #fff7e0 0%, #fdf6e3 70%);
  z-index:10;
  color:#2b2118;
}

.title{
  font-size:76px;
  line-height:1;
  margin:0;
  font-weight:900;
  letter-spacing:1px;
  color:#e8871e;
  text-shadow:4px 4px 0 #2b2118, 8px 8px 0 rgba(0,0,0,0.15);
}

.percentSign{color:#2b2118;}

.instruction{
  max-width:320px;
  font-size:15px;
  opacity:0.85;
  margin:0;
}

.bestRow{
  font-size:14px;
  letter-spacing:1px;
  opacity:0.8;
  border:2px solid #2b2118;
  padding:6px 14px;
  border-radius:4px;
}

.cta{
  margin-top:10px;
  font-family:inherit;
  font-weight:900;
  font-size:20px;
  letter-spacing:2px;
  padding:18px 36px;
  border:4px solid #2b2118;
  border-radius:6px;
  background:#e8871e;
  color:#fff7e0;
  box-shadow:0 6px 0 #a8590f;
  cursor:pointer;
}

.cta:active{
  transform:translateY(4px);
  box-shadow:0 2px 0 #a8590f;
}

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

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

.result{
  font-size:44px;
  margin:0;
  font-weight:900;
  letter-spacing:1px;
  text-shadow:3px 3px 0 rgba(0,0,0,0.15);
}

.result.busted{color:#c0392b;}
.result.close{color:#2f9e44;}

.resultLine{
  margin:0;
  font-size:16px;
  opacity:0.85;
  text-transform:uppercase;
  letter-spacing:2px;
}

.roast{
  margin:0;
  font-size:13px;
  font-style:italic;
  letter-spacing:0.5px;
  color:#2b2118;
  opacity:0.5;
}

/* --- desktop keyboard hint (PC support, additive) --- */
.kbd-hint{display:none;}
@media (hover: hover) and (pointer: fine){
  .kbd-hint{display:block;}
}
.kbd-hint{color:#2b2118;font-size:12px;letter-spacing:1px;margin:0;opacity:.7;}