@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Fredoka:wght@300..700&family=Quintessential&display=swap');

html, body {
  margin: 0;
  height: 100%;
  background: #0b0f16;
  color: #eaeff2;
  font-family: 'Cormorant', serif;
}

#hud {
  position: fixed;
  top: 12px;
  left: 12px;
  background: rgba(10,14,22,.6);
  padding: 6px 10px; 
  border-radius: 12px;
  backdrop-filter: blur(6px);
  font-size: 12px;
  line-height: 1.2; 
}

#hud strong {
  font-family: 'Quintessential', serif;
  font-size: 18px;
  letter-spacing: 0.5px;
}

#hud p {
  margin: 0; 
}

#hud p.subtitle {
  margin-bottom: 2px; 
  font-style: italic;
}

#tip {
  position: fixed;
  pointer-events: none;
  background: rgba(10,14,22,.75);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  opacity: 0;
  transition: opacity .12s;
  white-space: nowrap;
  font-family: 'Cormorant', serif;
}

#tip b:first-child {
  font-family: 'Quintessential', serif;
  font-size: 13px;
}