@font-face {
  font-family: Display;
  src: url(/display.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #f5f5f0;
  --dim: rgba(245, 245, 240, 0.68);
  --rule: rgba(245, 245, 240, 0.34);
  --lime: #c6ff3d;
  --error: #ff9c8a;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }

html { background: #0a0a0c; -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  color: var(--ink);
  font: 400 16px/1.45 Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Fixed layer rather than background-attachment, which iOS Safari ignores */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(rgba(8, 8, 12, 0.2), rgba(8, 8, 12, 0.5)), url(/bg.jpg) center / cover;
}

[hidden] { display: none !important; }

/* The whole page fits one phone screen: spacing and type scale with the visible height */
main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 440px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 24px max(10px, env(safe-area-inset-bottom));
}

.brand { display: flex; align-items: center; gap: 8px; }

.mark { display: block; width: 26px; height: 26px; margin-left: -3px; }

header { margin-bottom: clamp(8px, 2.6dvh, 28px); }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

h1, .big {
  font-family: Display, "Arial Narrow", Arial, sans-serif;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(54px, 12dvh, 100px); margin: clamp(4px, 1.2dvh, 12px) 0 clamp(4px, 1dvh, 10px) -2px; letter-spacing: 0.025em; }

.big { font-size: clamp(34px, 7dvh, 60px); text-transform: uppercase; }

.note { color: var(--dim); font-size: 14px; margin-top: clamp(3px, 0.8dvh, 8px); }

input {
  display: block;
  width: 100%;
  padding: clamp(7px, 1.5dvh, 12px) 0;
  color: var(--ink);
  font: inherit;
  font-size: 18px; /* 16px or more stops iPhones zooming in on focus */
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  outline: none;
  transition: border-color 0.15s;
}

input::placeholder { color: var(--dim); opacity: 1; }

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

.price { display: flex; align-items: baseline; justify-content: space-between; margin: clamp(10px, 2.4dvh, 24px) 0 clamp(8px, 1.6dvh, 16px); }

.price strong {
  font: 700 clamp(30px, 5.6dvh, 44px)/1 Display, "Arial Narrow", Arial, sans-serif;
  text-transform: uppercase;
}

.price span { color: var(--dim); font-size: 14px; }

button {
  width: 100%;
  min-height: clamp(46px, 7dvh, 56px);
  color: #0a0a0c;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--lime);
  border: 0;
  border-radius: 0;
  cursor: pointer;
}

button:active { background: #b2e62f; }

button:disabled { opacity: 0.55; cursor: default; }

button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* White is Apple's recommended style on dark backgrounds */
.apple-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #000;
  font: 500 20px/1 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  background: #fff;
  border-radius: 8px;
}

.apple-pay:active { background: #e6e6e6; }

.apple-pay svg { width: 21px; height: 21px; margin: -3px -3px 0 2px; fill: currentColor; }

/* Safari draws Apple's own official button */
@supports (-webkit-appearance: -apple-pay-button) {
  .apple-pay {
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: pay;
    -apple-pay-button-style: white;
  }
  .apple-pay > * { display: none; }
}

.pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

.pay-card, .pay-door { border-radius: 8px; }

.pay-card { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; }

.pay-card:active { background: #e6e6e6; }

.pay-card .visa { width: 42px; height: 15px; }

.pay-card .mc { width: 33px; height: 21px; }

.pay-card .amex { width: 24px; height: 24px; }

.pay-door { color: var(--ink); font-size: 13px; letter-spacing: 0.12em; background: none; border: 1px solid var(--rule); }

.pay-door:active { background: rgba(245, 245, 240, 0.1); }

dialog {
  width: min(360px, calc(100vw - 48px));
  margin: auto;
  padding: 24px;
  color: var(--ink);
  background: #14121c;
  border: 1px solid var(--rule);
  border-radius: 8px;
}

dialog::backdrop { background: rgba(4, 4, 8, 0.7); }

/* The Name / Phone Number step: a sheet that slides up from the bottom, like iOS */
.sheet {
  width: 100%;
  max-width: 480px;
  margin: auto auto 0;
  padding: 10px 20px max(18px, env(safe-area-inset-bottom));
  background: #121019;
  border: 0;
  border-top: 1px solid rgba(245, 245, 240, 0.14);
  border-radius: 22px 22px 0 0;
}

.sheet[open] { animation: sheet-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); }

.sheet[open]::backdrop { animation: fade-in 0.28s ease-out; }

@keyframes sheet-in { from { transform: translateY(100%); } }

@keyframes fade-in { from { opacity: 0; } }

.sheet::before {
  content: "";
  display: block;
  width: 38px;
  height: 5px;
  margin: 0 auto 14px;
  background: rgba(245, 245, 240, 0.25);
  border-radius: 3px;
}

.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }

.sheet-title { font: 700 28px/1 Display, "Arial Narrow", Arial, sans-serif; text-transform: uppercase; }

.sheet-sub { margin-top: 6px; color: var(--dim); font-size: 14px; }

.sheet-close {
  display: grid;
  place-items: center;
  width: 36px;
  min-height: 36px;
  margin: -2px -4px 0 0;
  background: rgba(245, 245, 240, 0.1);
  border-radius: 50%;
}

.sheet-close:active { background: rgba(245, 245, 240, 0.18); }

.sheet-close svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }

.sheet .field {
  margin-bottom: 10px;
  padding: 16px;
  font-size: 17px;
  background: rgba(245, 245, 240, 0.06);
  border: 1px solid rgba(245, 245, 240, 0.14);
  border-radius: 12px;
  transition: border-color 0.15s, background 0.15s;
}

.sheet .field:focus { background: rgba(245, 245, 240, 0.09); border-color: var(--lime); }

.sheet .error { min-height: 0; margin: 2px 0 10px; }

.sheet .error:empty { display: none; }

.sheet #details-submit { min-height: 54px; margin-top: 4px; border-radius: 12px; }

.sheet .fine { margin-top: 12px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .sheet[open], .sheet[open]::backdrop { animation: none; }
}

#door-text { font-size: 18px; line-height: 1.35; }

.dialog-actions { display: grid; gap: 10px; margin-top: 12px; }

#door-dialog .dialog-actions { margin-top: 22px; }

.dialog-actions button { border-radius: 8px; }

.dialog-actions .quiet { color: var(--ink); background: none; border: 1px solid var(--rule); }

.error { color: var(--error); font-size: 14px; line-height: 1.3; min-height: 18px; margin-top: 6px; }

.fine { color: var(--dim); font-size: 12px; line-height: 1.4; margin-top: 12px; }

.qr { width: min(280px, 36dvh); margin: clamp(8px, 2dvh, 24px) 0 clamp(6px, 1.6dvh, 18px); padding: clamp(10px, 2dvh, 18px); background: #fff; }

.qr svg { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Matches the rounded payment buttons it replaces while tickets are free */
#free { border-radius: 8px; }