:root {
  --red: #ff3b3b;
  --orange: #ff9a1f;
  --yellow: #ffd60a;
  --green: #2ecc71;
  --blue: #2f80ed;
  --indigo: #5b3cc4;
  --violet: #b14fd8;
  --rainbow: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--indigo), var(--violet));
  /* Wraps back to red so it can scroll forever without a seam */
  --rainbow-loop: linear-gradient(90deg, var(--red), var(--orange), var(--yellow), var(--green), var(--blue), var(--indigo), var(--violet), var(--red));

  /* Deeper rainbow for text and text-on-colour. Every shade has at least 4.9:1
     contrast against white and the page background (WCAG AA). The bright
     rainbow above is only for decoration: stripes, borders and stars. */
  --red-deep: #c62828;
  --orange-deep: #b34700;
  --yellow-deep: #8a6500;
  --green-deep: #1b7a43;
  --blue-deep: #1a5fb4;
  --indigo-deep: #5b3cc4;
  --violet-deep: #8e2fb3;
  --rainbow-text-loop: linear-gradient(90deg, var(--red-deep), var(--orange-deep), var(--yellow-deep), var(--green-deep), var(--blue-deep), var(--indigo-deep), var(--violet-deep), var(--red-deep));
  --focus: #5b3cc4;
  --field-border: #8b80a3;
  --text: #2b2140;
  --muted: #6d6380;
}

* { box-sizing: border-box; }

/* Clear keyboard focus ring on everything that can be focused */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Text for screen readers only */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  font-family: 'Fredoka', system-ui, sans-serif;
  color: var(--text);
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 20%, #ffe3e3 0, transparent 40%),
    radial-gradient(circle at 90% 10%, #e3f0ff 0, transparent 40%),
    radial-gradient(circle at 50% 100%, #f3e3ff 0, transparent 50%),
    #fffaf3;
}

/* ---------- Movement ---------- */

@keyframes rainbow-flow {
  to { background-position: 200% 0; }
}

@keyframes float-up {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes pop-in {
  0%   { opacity: 0; transform: translateX(-30px) scale(0.9); }
  60%  { opacity: 1; transform: translateX(6px) scale(1.03); }
  100% { transform: none; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.4) rotate(0deg); }
  50%      { opacity: 0.55; transform: translateY(-24px) scale(1) rotate(180deg); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); }
  50%      { box-shadow: 0 0 0 10px rgba(46, 204, 113, 0); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@keyframes burst {
  from { opacity: 1; transform: translate(-50%, -50%) scale(0.4); }
  to   { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(200deg); }
}

.flow {
  background-image: var(--rainbow-loop);
  background-size: 200% 100%;
  animation: rainbow-flow 6s linear infinite;
}

/* Floating sparkles behind everything */
.sparkles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.sparkle {
  position: absolute;
  /* Full rainbow colour, kept muted by the low opacity in the twinkle animation */
  color: var(--c);
  font-size: var(--s);
  opacity: 0;
  text-shadow: 0 0 6px color-mix(in srgb, var(--c) 40%, transparent);
  animation: twinkle var(--d) ease-in-out var(--delay) infinite;
}

/* Sparkle burst when someone joins */
.burst {
  position: fixed;
  pointer-events: none;
  z-index: 10;
  color: var(--c);
  font-size: 18px;
  text-shadow: 0 0 6px var(--c);
  animation: burst 0.9s ease-out forwards;
}

header, main { position: relative; z-index: 1; }

.rainbow-bar {
  position: relative;
  z-index: 1;
  height: 10px;
}

header {
  text-align: center;
  padding: 40px 16px 16px;
  animation: float-up 0.7s ease-out both;
}

h1.flow { background-image: var(--rainbow-text-loop); }

h1 {
  margin: 0;
  font-size: clamp(2rem, 7vw, 3.5rem);
  font-weight: 700;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.15;
  filter: drop-shadow(0 2px 6px rgba(177, 79, 216, 0.25));
}

.subtitle {
  margin: 6px 0 0;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.find-me-btn {
  margin-top: 16px;
  padding: 10px 22px;
  background: #fff;
  color: var(--indigo);
  border: 3px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image: linear-gradient(#fff, #fff), var(--rainbow-loop);
  background-size: 100% 100%, 200% 100%;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(91, 60, 196, 0.15);
  animation: find-me-flow 6s linear infinite, bob 3s ease-in-out infinite;
  transition: box-shadow 0.2s;
}

@keyframes find-me-flow {
  to { background-position: 0 0, 200% 0; }
}

.find-me-btn:hover { box-shadow: 0 6px 20px rgba(177, 79, 216, 0.35); }

.modal {
  width: min(440px, calc(100vw - 32px));
  border: none;
  border-radius: 20px;
  padding: 28px 24px 24px;
  color: var(--text);
  font-family: inherit;
  text-align: center;
  box-shadow: 0 20px 50px rgba(43, 33, 64, 0.3);
  background: #fff;
  overflow: hidden;
}

.modal::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background-image: var(--rainbow-loop);
  background-size: 200% 100%;
  animation: rainbow-flow 6s linear infinite;
}

.modal[open] { animation: float-up 0.35s ease-out; }

.modal::backdrop {
  background: rgba(43, 33, 64, 0.45);
}

.modal h2 {
  justify-content: center;
  font-size: 1.6rem;
  background-image: var(--rainbow-text-loop);
  background-size: 200% 100%;
  animation: rainbow-flow 6s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.modal p {
  margin: 0 0 12px;
  font-size: 1.1rem;
  line-height: 1.5;
}

.modal form { margin-top: 20px; justify-content: center; }

.close-btn {
  padding: 10px 26px;
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px 48px;
  display: grid;
  gap: 20px;
}

.card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(91, 60, 196, 0.12);
  overflow: hidden;
  animation: float-up 0.7s ease-out both;
}

.card:nth-child(1) { animation-delay: 0.15s; }
.card:nth-child(2) { animation-delay: 0.3s; }

.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background-image: var(--rainbow-loop);
  background-size: 200% 100%;
  animation: rainbow-flow 6s linear infinite;
}

h2 {
  margin: 0 0 16px;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.count {
  background: var(--indigo);
  color: #fff;
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 0.95rem;
}

form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

input {
  flex: 1 1 200px;
  font: inherit;
  padding: 12px 16px;
  border: 2px solid var(--field-border);
  border-radius: 12px;
}

input:focus { border-color: var(--focus); }

.field-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

button {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border: none;
  border-radius: 12px;
}

form button {
  padding: 12px 22px;
  color: #fff;
  background-image: var(--rainbow-text-loop);
  background-size: 200% 100%;
  animation: rainbow-flow 4s linear infinite;
  transition: transform 0.15s, box-shadow 0.2s;
}

form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(177, 79, 216, 0.35);
}

form button:active { transform: scale(0.96); }

.keep-open {
  margin: 12px 0 0;
  padding: 8px 12px;
  font-size: 0.9rem;
  color: var(--indigo);
  background: #f3ecff;
  border-radius: 10px;
}

.message {
  min-height: 1.2em;
  margin: 10px 0 0;
  color: var(--muted);
}

.message.error { color: var(--red-deep); }

.waitlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.waitlist li {
  /* Name on top with the wait time underneath, so the name always gets the full width */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "pos name    actions"
    "pos details actions";
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #faf8ff;
  border-left: 6px solid var(--c);
  transition: transform 0.2s, box-shadow 0.2s;
}

.waitlist li:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(91, 60, 196, 0.12);
}

.waitlist li.mine { background: #f3ecff; }

.waitlist li.called { background: #eafaf1; }

.wait.called-text { color: var(--green-deep); }

.waitlist li.on-way { background: #e3f0ff; }

.on-way .wait.called-text { color: var(--blue-deep); }

.actions {
  grid-area: actions;
  display: flex;
  gap: 6px;
}

.call {
  padding: 6px 12px;
  background: #fff;
  color: var(--green-deep);
  border: 2px solid #bfeccf;
  white-space: nowrap;
}

.call:hover { background: #eafaf1; }

@keyframes ring {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(-18deg); }
  20%, 40% { transform: rotate(18deg); }
  50%      { transform: rotate(0); }
}

.turn-bell {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 8px;
  animation: ring 1.6s ease-in-out infinite;
}

.turn-modal h2 { font-size: 2rem; }

.you {
  display: inline-block;
  padding: 0 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: var(--violet-deep);
  border-radius: 999px;
  vertical-align: middle;
}

.waitlist li.new { animation: pop-in 0.6s ease-out; }

.waitlist li:first-child .position { animation: pulse-glow 2s ease-out infinite; }

.position {
  grid-area: pos;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  background: var(--cd);
}

.name {
  grid-area: name;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 1.1rem;
}

.details {
  grid-area: details;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
}

.wait {
  font-weight: 600;
  color: var(--indigo);
}

.wait.next {
  color: var(--green-deep);
  animation: bob 1.6s ease-in-out infinite;
}

.time {
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.join-wait {
  margin: -6px 0 14px;
  font-weight: 600;
  color: var(--indigo);
}

.note {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

.remove {
  padding: 6px 12px;
  background: #fff;
  color: var(--red-deep);
  border: 2px solid #ffd0d0;
}

.remove:hover { background: #ffecec; }

.empty {
  margin: 0;
  color: var(--muted);
  text-align: center;
}

.site-footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 16px 28px;
  font-size: 0.85rem;
  color: var(--muted);
}

.site-footer a {
  font-weight: 600;
  /* Underlined so it's recognisable as a link without relying on colour */
  text-decoration: underline;
  text-decoration-color: var(--violet);
  text-underline-offset: 3px;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-image: var(--rainbow-text-loop);
  background-size: 200% 100%;
  animation: rainbow-flow 6s linear infinite;
}

.footer-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-left: 10px;
}

/* Footer buttons are at least 32px tall so they're easy to tap (WCAG 2.5.8 asks for 24px) */
.staff-btn {
  min-height: 32px;
  padding: 4px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--field-border);
  border-radius: 999px;
}

.staff-btn:hover { color: var(--indigo); border-color: var(--violet); }

.site-footer a:hover { text-decoration-thickness: 2px; }

/* Phones: stack the staff buttons to leave room for the name */
@media (max-width: 480px) {
  .actions { flex-direction: column; }
  .actions button {
    padding: 5px 10px;
    font-size: 0.9rem;
  }
}

/* Still version: set from the "Pause animations" button, or automatically for
   people whose device asks for reduced motion (see the script in index.html). */
.no-motion *, .no-motion *::before, .no-motion *::after {
  animation: none !important;
  transition: none !important;
}

.no-motion .sparkles, .no-motion .burst { display: none; }