:root {
  color-scheme: dark;
  --cyan: #55e8ff;
  --pink: #ff55c7;
  --green: #67ffb0;
  --ink: #050810;
  --mouse-x: 50%;
  --mouse-y: 40%;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: #eef9ff;
  background: var(--ink);
  font-family: "Segoe UI", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}
button, input, a { font: inherit; }

.street-scene,
.street-photo,
.street-vignette,
.glass-reflection { position: fixed; inset: 0; pointer-events: none; }
.street-scene { z-index: -3; background: #050810; }
.street-photo {
  background: url('/static/assets/entrance-night-v1.webp') center/cover;
  filter: saturate(.75) contrast(1.08) brightness(.43) blur(1px);
  transform: scale(1.03);
}
.street-vignette {
  background: radial-gradient(circle at 58% 46%, rgba(22, 85, 111, .05), rgba(2, 5, 11, .7) 70%), linear-gradient(180deg, rgba(0, 3, 8, .64), transparent 26%, rgba(1, 3, 8, .74));
}
.glass-reflection {
  opacity: .55;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(180, 235, 255, .12), transparent 18%), linear-gradient(112deg, transparent 31%, rgba(105, 216, 255, .07) 46%, transparent 61%);
}

.arcade-sign {
  width: min(600px, 84vw);
  margin: 22px auto 14px;
  padding: 9px 24px 12px;
  text-align: center;
  border: 1px solid rgba(128, 230, 255, .55);
  border-radius: 10px;
  background: rgba(5, 11, 20, .72);
  box-shadow: 0 0 12px rgba(66, 214, 255, .35), inset 0 0 24px rgba(255, 74, 195, .08);
  backdrop-filter: blur(12px);
  animation: sign-flicker 8s infinite;
}
.arcade-sign span { display: block; color: #a7f4ff; font-size: .62rem; letter-spacing: .22em; }
.arcade-sign strong { display: block; color: #f7fcff; font-size: clamp(1.65rem, 4vw, 3rem); line-height: 1; letter-spacing: .22em; text-shadow: 0 0 6px #fff, 0 0 18px var(--cyan), 0 0 36px rgba(85, 232, 255, .6); }

.onboard-layout {
  width: min(1050px, 94vw);
  min-height: calc(100vh - 155px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(520px, 680px);
  gap: clamp(18px, 3vw, 42px);
  align-items: center;
  padding: 18px 0 34px;
}

.entry-notice {
  position: relative;
  padding: 27px 25px;
  color: #30261f;
  background: linear-gradient(145deg, rgba(255, 246, 220, .95), rgba(220, 199, 162, .93));
  box-shadow: 0 22px 65px rgba(0, 0, 0, .55);
  transform: rotate(-1deg);
}
.entry-notice::after { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(67, 48, 35, .25); pointer-events: none; }
.tape { position: absolute; top: -12px; left: 50%; width: 82px; height: 25px; background: rgba(225, 214, 185, .78); box-shadow: 0 2px 5px rgba(0,0,0,.2); transform: translateX(-50%) rotate(2deg); }
.notice-kicker { margin: 0; color: #a42f4b; font-size: .65rem; font-weight: 900; letter-spacing: .2em; }
.entry-notice h1 { margin: 5px 0 7px; font-size: 1.55rem; }
.notice-lead { margin: 0 0 20px; color: #68574b; font-size: .82rem; }
.entry-notice ol { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.entry-notice li { position: relative; padding: 12px 0 12px 42px; border-top: 1px solid rgba(60, 45, 35, .18); counter-increment: steps; }
.entry-notice li::before { content: counter(steps); position: absolute; left: 1px; top: 12px; display: grid; place-items: center; width: 27px; height: 27px; color: #fff8e9; border-radius: 50%; background: #a43852; font-size: .72rem; font-weight: 900; }
.entry-notice li b, .entry-notice li span { display: block; }
.entry-notice li b { font-size: .86rem; }
.entry-notice li span { margin-top: 3px; color: #6d5c50; font-size: .68rem; }
.notice-foot { margin: 15px 0 0; padding: 10px; border: 1px solid rgba(141, 50, 70, .35); color: #873247; text-align: center; font-size: .67rem; font-weight: 700; }

.registration-window {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(103, 225, 255, .42);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(15, 28, 42, .9), rgba(5, 9, 17, .94));
  box-shadow: 0 25px 85px rgba(0, 0, 0, .65), 0 0 34px rgba(66, 215, 255, .13), inset 0 0 42px rgba(255, 73, 194, .04);
  backdrop-filter: blur(18px) saturate(.9);
}
.registration-window::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(126, 224, 255, .07); border-radius: 11px; pointer-events: none; }
.window-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 86% 3%, rgba(255, 76, 194, .13), transparent 29%), radial-gradient(circle at 0 100%, rgba(72, 219, 255, .11), transparent 34%); }
.counter-header { position: relative; display: flex; align-items: center; gap: 13px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.counter-mark { display: grid; place-items: center; flex: 0 0 47px; height: 47px; border: 1px solid var(--cyan); border-radius: 50%; color: #effdff; font-size: .84rem; font-weight: 900; letter-spacing: .08em; text-shadow: 0 0 10px var(--cyan); box-shadow: 0 0 20px rgba(85,232,255,.24), inset 0 0 14px rgba(255,85,199,.12); }
.counter-header p { margin: 0 0 3px; color: #67eaff; font-size: .57rem; font-weight: 800; letter-spacing: .18em; }
.counter-header h2 { margin: 0; font-size: 1.32rem; letter-spacing: .04em; }
.open-badge { margin-left: auto; color: var(--green); font-size: .62rem; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.open-badge i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: pulse 1.7s infinite; }

.flash-list { position: relative; margin: 17px 0 -2px; }
.flash-message { margin: 7px 0; padding: 10px 12px; border: 1px solid rgba(255, 116, 129, .42); border-radius: 7px; color: #ffb0b8; background: rgba(100, 15, 25, .25); font-size: .73rem; }
.flash-success { color: #9fffc7; border-color: rgba(103, 255, 176, .35); background: rgba(18, 91, 54, .2); }

.registration-form { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 16px; margin-top: 21px; }
.field label { display: block; margin: 0 0 6px; color: #c4d7df; font-size: .69rem; letter-spacing: .05em; }
.field input { width: 100%; min-height: 43px; padding: 10px 12px; color: #f2fbff; border: 1px solid rgba(139, 202, 222, .25); border-radius: 7px; outline: none; background: rgba(2, 7, 13, .68); transition: border-color .2s, box-shadow .2s, background .2s; }
.field input::placeholder { color: #526975; }
.field input:focus { border-color: var(--cyan); background: rgba(3, 10, 17, .88); box-shadow: 0 0 0 3px rgba(85,232,255,.08), 0 0 17px rgba(85,232,255,.1); }
.field small { display: block; min-height: 14px; margin-top: 5px; color: #6f8995; font-size: .6rem; line-height: 1.4; }
.field-wide, .pin-field { grid-column: 1 / -1; }
.pin-field { max-width: 245px; }
.register-button { position: relative; z-index: 2; grid-column: 1 / -1; display: block; width: 100%; padding: 11px 18px; color: #f3fdff; border: 1px solid rgba(101, 233, 255, .7); border-radius: 8px; background: linear-gradient(90deg, rgba(42,177,215,.35), rgba(208,58,162,.28)); box-shadow: 0 0 20px rgba(68,217,255,.12); text-align: center; text-decoration: none; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; }
.register-button:hover, .register-button:focus-visible { transform: translateY(-2px); border-color: #fff; box-shadow: 0 0 30px rgba(68,217,255,.32); }
.register-button span, .register-button small { display: block; }
.register-button span { font-size: .86rem; font-weight: 800; letter-spacing: .08em; }
.register-button small { margin-top: 2px; color: #8fc7d7; font-size: .52rem; letter-spacing: .17em; }
.back-door { position: relative; z-index: 2; display: block; width: max-content; margin: 16px auto 0; color: #8bb8c5; font-size: .67rem; text-decoration: none; border-bottom: 1px solid rgba(139, 184, 197, .3); }
.back-door:hover { color: #fff; }

.success-layout { width: min(660px, 92vw); min-height: calc(100vh - 155px); margin: 0 auto; display: grid; place-items: center; padding: 18px 0 38px; }
.success-window { width: 100%; text-align: center; }
.success-icon { position: relative; display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 10px; color: var(--green); border: 1px solid currentColor; border-radius: 50%; font-size: 1.7rem; box-shadow: 0 0 25px rgba(103, 255, 176, .25); }
.success-kicker { position: relative; margin: 0; color: #67eaff; font-size: .57rem; font-weight: 800; letter-spacing: .2em; }
.success-window h1 { position: relative; margin: 6px 0 8px; font-size: 1.65rem; }
.welcome { position: relative; margin: 0 auto 22px; color: #98adb7; font-size: .78rem; }
.welcome strong { color: #f4fbff; }
.entry-ticket { position: relative; padding: 19px 20px; overflow: hidden; border: 1px dashed rgba(118, 228, 255, .48); border-radius: 9px; background: rgba(4, 12, 20, .7); text-align: left; }
.entry-ticket::before, .entry-ticket::after { content: ""; position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #0b111c; transform: translateY(-50%); }
.entry-ticket::before { left: -8px; }.entry-ticket::after { right: -8px; }
.ticket-label { display: block; margin-bottom: 10px; color: #5bdff8; font-size: .55rem; letter-spacing: .18em; }
.ticket-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.08); }
.ticket-row span { color: #78919d; font-size: .66rem; }
.ticket-row strong { color: #f4fcff; font-family: Consolas, "Courier New", monospace; font-size: 1.12rem; letter-spacing: .08em; user-select: all; }
.ticket-row .card-number { font-size: clamp(.9rem, 3vw, 1.16rem); }
.next-notice { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 10px; margin: 18px 0; padding: 12px 14px; border: 1px solid rgba(255, 205, 108, .28); border-radius: 7px; color: #d5c6a1; background: rgba(96, 67, 15, .17); text-align: left; font-size: .7rem; line-height: 1.55; }
.next-notice b { color: #ffda83; white-space: nowrap; }
.next-button { margin-top: 4px; }

footer { display: flex; justify-content: space-between; width: min(1050px, 92vw); margin: 0 auto; padding: 0 0 15px; color: rgba(205,218,226,.48); font-size: .57rem; letter-spacing: .07em; }

@keyframes pulse { 50% { opacity: .4; transform: scale(.78); } }
@keyframes sign-flicker { 0%,7%,9%,58%,60%,100% { opacity: 1; } 8%,59% { opacity: .76; } }

@media (max-width: 820px) {
  .onboard-layout { display: flex; flex-direction: column-reverse; width: min(650px, 92vw); }
  .registration-window, .entry-notice { width: 100%; }
  .entry-notice { transform: none; }
}
@media (max-width: 540px) {
  .arcade-sign { margin-top: 12px; }
  .onboard-layout, .success-layout { min-height: auto; padding-top: 8px; }
  .registration-window { padding: 24px 18px; border-radius: 12px; }
  .registration-form { grid-template-columns: 1fr; }
  .field, .field-wide, .pin-field, .field-confirm { grid-column: 1; max-width: none; }
  .counter-header { align-items: flex-start; }
  .open-badge { position: absolute; right: 0; top: -8px; font-size: .54rem; }
  .counter-header h2 { font-size: 1.16rem; }
  .ticket-row { display: block; }
  .ticket-row strong { display: block; margin-top: 5px; word-break: break-all; }
  .next-notice { grid-template-columns: 1fr; }
  footer { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}