/* Vespers — the ringing chamber. The board is a night scene; the chrome stays
   parchment like the rest of the arcade. */

.vespers-frame {
  position: relative;
  width: min(780px, 96vw);
  padding: clamp(10px, 2vw, 16px);
}
.vespers-frame canvas {
  display: block;
  width: 100%;
  border-radius: 8px;
  touch-action: manipulation;
  cursor: pointer;
}

/* stays: three little wooden pegs; a spent stay goes dark and tips over */
.gauge.stays { gap: 8px; align-items: center; }
.stay {
  display: inline-block;
  width: 9px;
  height: 24px;
  border-radius: 4px 4px 3px 3px;
  background: linear-gradient(180deg, #c89c3a, #8a6b2e 70%, #6f5524);
  box-shadow: inset 0 1px 0 rgba(246, 238, 214, .5), 0 1px 3px rgba(58, 46, 34, .4);
  transition: transform .3s var(--ease), filter .3s var(--ease), opacity .3s var(--ease);
}
.stay.spent {
  filter: grayscale(.8) brightness(.6);
  opacity: .55;
  transform: rotate(24deg) translateY(3px);
}

/* the start veil */
.start-veil {
  position: absolute;
  inset: clamp(10px, 2vw, 16px);
  display: grid;
  place-items: center;
  background: radial-gradient(120% 120% at 50% 20%, rgba(20, 13, 8, .55), rgba(20, 13, 8, .82));
  border-radius: 8px;
  z-index: 5;
}
.start-veil[hidden] { display: none; }
.veil-card {
  max-width: 470px;
  text-align: center;
  padding: clamp(18px, 4vw, 30px);
}
.veil-eyebrow {
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: 12px;
  color: var(--gold-bright);
  margin: 0 0 8px;
}
.veil-card h2 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  color: var(--cream);
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.05;
  margin: 0 0 12px;
}
.veil-how {
  color: rgba(241, 230, 200, .85);
  font-size: clamp(14.5px, 2vw, 16.5px);
  line-height: 1.55;
  margin: 0 0 20px;
}
.veil-how b { color: var(--gold-bright); font-weight: 600; }

.new-best {
  display: inline-block;
  font-family: var(--caps);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11.5px;
  color: var(--parchment);
  background: var(--oxblood);
  border-radius: 5px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: 1px;
}