/* Layout: a blank white page with only today's date at the top. Page one is a quiet form; page two is the wheel, the one loud 90s moment, ringed by game-show bulbs and drifting sparkles. */
:root {
  --paper: #ffffff;
  --ink: #111111;
  --muted: #6b6b73;
  --rule: #cfcfd6;
  --hot: #000000;
  --font-display: 'Times New Roman', Times, serif; /* swap to Michelangelus here later */
  --font-body: 'Times New Roman', Times, serif;
  --soft: #f4f2f5;
  --ale: #e8b94a;
  --ale-deep: #d89a22;
  --foam: #fff8e1;
  --foam-hover: #ffefbd;
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  padding-inline: 16px;
  padding-block: 24px 40px;
  min-height: 100vh;
}
main { max-width: 600px; margin-inline: auto; display: flex; flex-direction: column; gap: 56px; }
.date {
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-align: center;
  margin: 0;
}

.page[hidden] { display: none; }

/* Page one */
form { display: flex; flex-direction: column; gap: 28px; align-items: center; margin-top: 8vh; }
.fields { width: 100%; max-width: 200px; display: flex; flex-direction: column; gap: 14px; }
.fields label, .fields legend { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--ink); }
.fields select, .fields input[type="tel"] {
  font: inherit; font-size: 0.8rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 3px; padding: 3px 6px; min-width: 0; width: 100%;
}
.fields select:focus-visible, .fields input[type="tel"]:focus-visible { outline: none; border-color: var(--hot); background: var(--paper); }
.fields input::placeholder { color: #a9a9b2; }
.fields fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fields legend { padding: 0; margin-bottom: 4px; }
.fields label.choice { flex-direction: row; align-items: center; gap: 6px; font-size: 0.8rem; cursor: pointer; }
.choice input { width: 12px; height: 12px; accent-color: var(--hot); margin: 0; }
.note { margin: 0; font-size: 0.68rem; color: var(--muted); }
.fields fieldset { gap: 4px; }

.cheers {
  position: relative; isolation: isolate;
  font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em;
  color: #1a1a1f; border: 2px solid var(--ale); border-radius: 999px;
  background: linear-gradient(to bottom, #fffdf4 0%, #fff4d2 24%, #f8dc84 70%, #f1c85a 100%);
  padding: 12px 22px 12px 27px; cursor: pointer; display: inline-flex; align-items: center; gap: 12px;
}
.cheers:hover { border-color: var(--ale-deep); filter: brightness(1.04); }
.cheers .txt, .cheers .clink { position: relative; z-index: 2; }

/* Real-looking beer bubbles: glassy spheres with a highlight that rise, wobble and pop into a foam head */
.cheers .bubbles { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 1; }
.cheers .b {
  position: absolute; bottom: -14px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.98) 0 14%, rgba(255,255,255,0.45) 32%, rgba(255,255,255,0.12) 62%, rgba(176,118,20,0.28) 100%);
  box-shadow: inset 0 0 0 1px rgba(176,118,20,0.45), inset -1px -1px 2px rgba(255,255,255,0.7);
  animation: rise var(--d, 3s) linear var(--delay, 0s) infinite;
}
.cheers:hover .b { animation-duration: calc(var(--d, 3s) * 0.55); }
@keyframes rise {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  10% { opacity: 0.95; }
  50% { transform: translate(var(--sway, 3px), -34px) scale(1); }
  85% { opacity: 0.9; }
  100% { transform: translate(calc(var(--sway, 3px) * -1), -78px) scale(1.12); opacity: 0; }
}
.cheers:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; }
.cheers .clink { font-size: 1.45rem; line-height: 1; display: inline-block; }
.cheers:hover .clink { animation: clink 0.5s ease-in-out 2; }
@keyframes clink { 0%,100% { transform: rotate(0) scale(1); } 35% { transform: rotate(-16deg) scale(1.2); } 70% { transform: rotate(12deg) scale(1.2); } }

.msg { margin: 0; min-height: 1.4em; font-size: 0.9rem; text-align: center; color: var(--ink); }
.fine { margin: -20px 0 0; text-align: center; font-size: 0.72rem; color: var(--muted); max-width: 420px; align-self: center; }

/* Page two */
.stage { position: relative; width: min(100%, 600px); margin-inline: auto; }
.stage::before { content: ""; display: block; padding-top: 100%; } /* keeps the wheel square, even in older browsers */
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage .sparkles { pointer-events: none; }
.pointer-hit { position: absolute; left: 4%; top: 4%; width: 92%; height: 92%; border: none; background: none; padding: 0; cursor: pointer; border-radius: 50%; } /* covers the whole wheel and pointer */
.pointer-hit:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }
.pointer-hit[hidden] { display: none; }

.result { text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; min-height: 9rem; }
.result[hidden] { display: none; }
.result .label { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.result .big { font-family: var(--font-display); font-size: clamp(1.8rem, 9vw, 3rem); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.06em; margin: 0; text-wrap: balance; }
.result p { margin: 0; }
.result .small { font-size: 0.85rem; color: var(--muted); max-width: 420px; }
.result .addr { font-size: 1.15rem; }
.result .confirm-note { margin-top: 0.5in; } /* sits well below the bar's address */
.spinning-note { text-align: center; margin: 0; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); min-height: 1.4em; }

.reset { background: none; border: none; font: inherit; font-size: 0.78rem; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 4px; }
.reset:hover { color: var(--ink); }
.reset:focus-visible { outline: 3px solid var(--hot); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cheers:hover .clink { animation: none; }
  .cheers .b { animation: none; opacity: 0.7; bottom: 22%; }}

/* Added for the real site */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.done { text-align: center; display: flex; flex-direction: column; gap: 10px; margin-top: 8vh; }
.done[hidden], .invalid[hidden], .spin-ui[hidden] { display: none; }
.done .big, .invalid .big { font-family: var(--font-display); font-size: clamp(1.6rem, 7vw, 2.2rem); line-height: 1.1; margin: 0; text-wrap: balance; }
.done p, .invalid p { margin: 0; }
.invalid { text-align: center; display: flex; flex-direction: column; gap: 10px; margin-top: 8vh; }
.when { text-align: center; margin: 0; font-size: 1.05rem; }
.spin-ui .when { margin: 12px 0 32px; } /* room at the top of the wheel page, and between the time and the wheel */
.spin-actions { display: flex; justify-content: center; }
.cheers:disabled { opacity: 0.55; cursor: default; filter: none; }
#ts { display: flex; justify-content: center; min-height: 0; }

/* Make the hidden attribute always win over display settings */
[hidden] { display: none !important; }