:root {
  --bg: #141414;
  --surface: #1c1c1c;
  --surface-2: #2a2a2a;
  --border: #555555;
  --text: #f5f5f4;
  --muted: #d1d1ce;
  --primary: #f97316;
  --primary-2: #ea670c;
  --success: #4ade80;
  --success-bg: #14331f;
  --danger: #f87171;
  --danger-bg: #3a1717;
  --link-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, .7);
  --scheme: dark;
  --panel-bg: rgba(24, 24, 24, .97);
  --chrome-bg: rgba(20, 20, 20, .96);
  --topbar-border: #393939;
  --field-border: #777777;
  --placeholder: #bdbdbb;
  --accent-ink: #f97316;
  --danger-text: #ffb4b4;
  --success-text: #9be8b4;
  --success-action: #4ade80;
  --danger-action: #f87171;
  --overlay-top: rgba(13, 16, 19, .74);
  --overlay-bottom: rgba(13, 16, 19, .70);
  /* Framed components share 12px; text navigation is flat; semantic circles stay round. */
  --radius: 12px;
  --radius-flat: 0;
  --radius-circle: 50%;
  --gap: 16px;
  --font: -apple-system, "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  --mono: "SF Mono", "Roboto Mono", ui-monospace, Menlo, monospace;
}

/* Follow the device appearance without changing the background image. */
@media (prefers-color-scheme: light) {
  :root {
    --link-shadow: 0 1px 2px #fff, 0 0 8px rgba(255, 255, 255, .9);
    --scheme: light;
    --bg: #f4f2ee;
    --surface: #ffffff;
    --surface-2: #eeece8;
    --border: #8a8882;
    --text: #202020;
    --muted: #53524f;
    --panel-bg: rgba(255, 254, 251, .97);
    --chrome-bg: rgba(249, 247, 243, .98);
    --topbar-border: #c6c1b8;
    --field-border: #858178;
    --placeholder: #6b6760;
    --accent-ink: #a34308;
    --success: #176b3c;
    --success-bg: #e8f5ec;
    --danger: #b52525;
    --danger-bg: #fcecec;
    --danger-text: #9c2020;
    --success-text: #165f36;
    --overlay-top: rgba(248, 246, 241, .84);
    --overlay-bottom: rgba(248, 246, 241, .70);
  }
}

* { box-sizing: border-box; }

html {
  margin: 0;
  background: var(--bg);
  color-scheme: var(--scheme);
  color: var(--text);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0 auto;
  max-width: none;
  min-height: 100dvh;
  background: transparent;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--overlay-top), var(--overlay-bottom)),
    url('./easter-egg/background.jpg') center / cover no-repeat;
}

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 18px;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px solid var(--topbar-border);
  background: var(--chrome-bg);
}


main {
  flex: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 18px 32px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.panel {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-bg);
}

h1 {
  margin: 4px 0 12px;
  font-size: 24px;
  line-height: 1.3;
}
h1.event-name {
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 32px;
  line-height: 1.08;
  font-weight: 500;
  display: flex;
  justify-content: center;
  white-space: nowrap;
}
.event-letters {
  display: flex;
  align-items: baseline;
  gap: 10px;
  transform: scaleY(.88);
  transform-origin: center;
}
.mirror-c { display: inline-block; transform: scaleX(-1); transform-origin: center; }
.screen-label {
  margin: 0 0 24px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  text-align: left;
}
/* Plain-text links stay legible over the existing photograph. */
.help-link {
  display: block;
  padding: 8px;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
  align-self: center;
  text-shadow: var(--link-shadow);
  border-radius: var(--radius-flat);
}
.help-copy { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.help-list { margin: 0; padding-left: 22px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.help-list li + li { margin-top: 8px; }
.help-card-title { margin: 0 0 12px; font-size: 19px; }

.eyebrow {
  margin: 0;
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.6px;
}

.muted {
  color: var(--muted);
  line-height: 1.6;
}

.muted { font-size: 14px; }

label {
  display: block;
  margin: 18px 0 7px;
  font-weight: 700;
}

input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
}

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

button,
a {
  font: inherit;
  cursor: pointer;
}

:is(a, button, input):focus-visible {
  outline: 2px solid var(--primary-2);
  outline-offset: 3px;
}

.primary,
.secondary {
  display: inline-block;
  width: 100%;
  margin-top: 8px;
  padding: 16px;
  border: 0;
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  min-height: 56px;
}

#lookup-form .primary { margin-top: 24px; }

.primary {
  background: var(--primary);
  color: #1a1a1a;
}

.primary:hover { background: var(--primary-2); }
.primary:active { transform: translateY(1px); }
.primary:disabled { opacity: .45; cursor: not-allowed; }

.secondary {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}

.link-button {
  display: block;
  margin: 18px auto 0;
  padding: 8px;
  border: 0;
  background: none;
  border-radius: var(--radius-flat);
  color: var(--accent-ink);
  font-size: 15px;
}

.message {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  color: var(--danger-text);
}
.message.info {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--muted);
}

.qr-box {
  display: grid;
  place-items: center;
  min-height: 260px;
  margin: 22px 0;
  padding: 18px;
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  background: #ffffff;
}

.qr-box img {
  display: block;
  max-width: 100%;
  width: 260px;
  height: auto;
  image-rendering: pixelated;
}

.qr-surprise {
  display: block;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
  line-height: 1.7;
}

.qr-surprise-title {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
}

.actions { display: grid; gap: 8px; }

footer {
  padding: 16px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  background: var(--chrome-bg);
}

.hidden { display: none !important; }
noscript p { padding: 16px; border-radius: var(--radius); background: var(--bg); }

@media (hover: hover) {
  .secondary:hover { border-color: var(--accent-ink); }
}

@media (max-width: 360px) {
  main { padding-inline: 14px; }
  .panel { padding: 18px; }
}