/* Fullscreen presentation keeps the clock and Scripture dominant while the
   essential controls remain available in a compact overlay. */

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #f7f2e8;
}

body,
main {
  width: 100%;
  height: 100%;
  height: 100dvh;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #400561;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]),
  html:not([data-theme="light"]) body {
    background: #400561;
  }
}

.vc-shell[data-fullscreen="true"] {
  width: 100%;
  height: 100%;
  height: 100dvh;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--vc-surface);
}

.vc-shell[data-fullscreen="true"] .vc-workspace {
  width: 100%;
  height: 100%;
  height: 100dvh;
  margin: 0;
}

.vc-shell[data-fullscreen="true"] .vc-toolbar {
  position: fixed;
  top: clamp(1rem, 2.5vw, 2.5rem);
  right: clamp(1rem, 3vw, 3.5rem);
  left: clamp(1rem, 3vw, 3.5rem);
  z-index: 10;
  display: grid;
  grid-template-columns: auto minmax(12rem, 20rem) auto;
  align-items: end;
  gap: clamp(0.65rem, 1.5vw, 1.5rem);
  padding: 0;
  border: 0;
  pointer-events: none;
}

.vc-shell[data-fullscreen="true"] .vc-control-group,
.vc-shell[data-fullscreen="true"] .vc-translation-field {
  pointer-events: auto;
}

.vc-shell[data-fullscreen="true"] .vc-translation-field {
  width: 100%;
  min-width: 0;
}

.vc-shell[data-fullscreen="true"] .vc-tool-group {
  margin-left: 0;
  justify-content: flex-end;
}

.vc-shell[data-fullscreen="true"] .vc-icon-button,
.vc-shell[data-fullscreen="true"] .vc-text-button,
.vc-shell[data-fullscreen="true"] .vc-translation-field select {
  min-height: clamp(2.75rem, 4.2vw, 3.5rem);
  box-shadow: 0 3px 12px rgba(45, 28, 48, 0.14);
}

.vc-shell[data-fullscreen="true"] .vc-icon-button {
  min-width: clamp(2.75rem, 4.2vw, 3.5rem);
  border-radius: 50%;
}

.vc-shell[data-fullscreen="true"] .vc-text-button,
.vc-shell[data-fullscreen="true"] .vc-translation-field select {
  border-radius: 999px;
}

.vc-shell[data-fullscreen="true"] #vc-share {
  display: none;
}

.vc-shell[data-fullscreen="true"] .vc-display {
  display: flex;
  width: 100%;
  height: 100%;
  height: 100dvh;
  min-height: 100%;
  margin: 0;
  padding: clamp(7rem, 16vh, 10rem) clamp(2rem, 8vw, 10rem) clamp(2.5rem, 7vh, 6rem);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(64, 5, 97, 0.08), transparent 35%),
    var(--vc-surface);
  box-shadow: none;
}

html[data-theme="dark"] .vc-shell[data-fullscreen="true"] .vc-display,
html:not([data-theme]) .vc-shell[data-fullscreen="true"].vc-dark-system .vc-display {
  background:
    radial-gradient(circle at 82% 18%, rgba(224, 159, 62, 0.12), transparent 35%),
    var(--vc-surface);
  box-shadow: none;
}

.vc-shell[data-fullscreen="true"] .vc-match {
  font-size: clamp(0.9rem, 1.3vw, 1.5rem);
}

.vc-shell[data-fullscreen="true"] .vc-time {
  margin: clamp(0.25rem, 1vh, 0.75rem) 0 clamp(1.25rem, 3.5vh, 3rem);
  font-size: clamp(6rem, 16vw, 15rem);
}

.vc-shell[data-fullscreen="true"] .vc-verse {
  max-width: min(80vw, 78rem);
  font-size: clamp(1.75rem, 3.3vw, 4rem);
  line-height: 1.38;
}

.vc-shell[data-fullscreen="true"] .vc-reference-line {
  margin-top: clamp(1.25rem, 3.5vh, 3rem);
  font-size: clamp(1.05rem, 1.7vw, 1.8rem);
}

.vc-shell[data-fullscreen="true"] .vc-links,
.vc-shell[data-fullscreen="true"] .vc-details {
  display: none;
}

.vc-shell[data-fullscreen="true"] .vc-error {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  z-index: 12;
  max-width: 46rem;
  margin: 0 auto;
  background: var(--vc-paper);
  box-shadow: var(--vc-shadow);
}

@media (max-width: 46rem) {
  .vc-shell[data-fullscreen="true"] .vc-toolbar {
    top: max(0.75rem, env(safe-area-inset-top));
    right: 0.75rem;
    left: 0.75rem;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .vc-shell[data-fullscreen="true"] .vc-translation-field {
    grid-column: 1 / -1;
    grid-row: 2;
    width: min(100%, 24rem);
    justify-self: center;
    order: initial;
  }

  .vc-shell[data-fullscreen="true"] .vc-display {
    padding: 10rem 1.25rem 2rem;
  }

  .vc-shell[data-fullscreen="true"] .vc-verse {
    max-width: 92vw;
    font-size: clamp(1.4rem, 5.4vw, 2.5rem);
  }
}

@media (max-height: 40rem) and (min-width: 47rem) {
  .vc-shell[data-fullscreen="true"] .vc-display {
    padding-top: 5.75rem;
    padding-bottom: 1.25rem;
  }

  .vc-shell[data-fullscreen="true"] .vc-time {
    margin-bottom: 1rem;
    font-size: clamp(4.5rem, 17vh, 7rem);
  }

  .vc-shell[data-fullscreen="true"] .vc-verse {
    font-size: clamp(1.35rem, 4.2vh, 2.25rem);
  }

  .vc-shell[data-fullscreen="true"] .vc-reference-line {
    margin-top: 1rem;
  }
}