@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fira+Code:wght@400;500;600;700&display=swap');

html, body {
  height: 100%;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #ffffff;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.lyric-content {
  font-family: 'Fira Code', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: var(--lyric-font-size, 1.05rem);
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: normal;
  overflow-x: auto;
}

.chord {
  font-weight: 700;
  color: #0f6856;
}

.chord-line {
  color: #0f6856;
  font-weight: 700;
}

.song-section-header {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #0a4d3f;
  background-color: #f0f7f5;
  border: 1px solid #c3e2db;
  padding: 2px 8px;
  border-radius: 0;
  margin-top: 1rem;
  margin-bottom: 0.35rem;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body.projector-mode header,
body.projector-mode aside,
body.projector-mode #sidebarOverlay {
  display: none !important;
}

body.projector-mode main {
  max-width: 100% !important;
  padding: 2rem 4rem !important;
}

body.projector-mode .hino-title {
  font-size: 3rem !important;
  text-align: center;
}

body.projector-mode .lyric-content {
  font-size: calc(var(--lyric-font-size, 1.05rem) * 1.35) !important;
  line-height: 2 !important;
}

.projector-exit-btn {
  display: none;
  position: fixed;
  top: 16px;
  right: 16px;
  background-color: #0f172a;
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 1000;
}

body.projector-mode .projector-exit-btn {
  display: block;
}