/* ------------------------------------------------------------------
   Look: AT ONE BANGBUA after dark. Colours are the bar's own lights:
   violet room, pink and cyan tubes, the green window frame, the red
   box sign, and the black/white checker pillars.
   ------------------------------------------------------------------ */
:root {
  --night: #140a24;
  --night-2: #1e1035;
  --night-deep: #0c0616;
  --line: #3b2a5e;
  --pink: #ff4fb0;
  --cyan: #4fe3ff;
  --lime: #8dff72;
  --sign: #ff2e3b;
  --fg: #f5eeff;
  --muted: #a898c9;

  --display: 'Mitr', 'Anuphan', sans-serif;
  --text: 'Anuphan', system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--fg);
  background:
    radial-gradient(70% 45% at 0% 0%, rgb(255 79 176 / .16), transparent 70%),
    radial-gradient(60% 40% at 100% 100%, rgb(79 227 255 / .10), transparent 70%),
    var(--night);
  background-attachment: fixed;
  font: 400 17px/1.55 var(--text);
  font-feature-settings: 'tnum' 1;
}
button, input { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- panels ---------- */
.slip {
  position: relative;
  background: var(--night-2);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* a lit white board for QR codes: phone cameras need dark-on-light */
.qr-board {
  background: #fff;
  color: var(--night);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .2), 0 0 26px rgb(79 227 255 / .35);
}

/* shop name set like the red box sign above the stage */
.lockup {
  display: inline-block;
  background: var(--sign);
  color: #fff;
  font: 700 1.05rem/1.1 var(--text);
  letter-spacing: -.01em;
  padding: .45rem .65rem .4rem;
  border-radius: 2px;
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .18), 0 0 22px rgb(255 46 59 / .55);
}

/* black and white checks, after the pillars in the shop */
.checker {
  --sq: 10px;
  height: calc(var(--sq) * 2);
  background: repeating-conic-gradient(#fff 0 25%, var(--night) 0 50%) 0 0 / calc(var(--sq) * 2) calc(var(--sq) * 2);
}

/* the one neon sign: whatever song is on */
.neon-title {
  color: #ffe3f3;
  text-shadow: 0 0 2px #fff, 0 0 9px var(--pink), 0 0 20px var(--pink), 0 0 42px rgb(255 79 176 / .55);
}

/* ---------- queue tickets ---------- */
.ticket {
  display: grid;
  grid-template-columns: 4.2rem 1fr auto;
  align-items: center;
  min-height: 4.6rem;
  background: rgb(255 255 255 / .04);
  border-radius: 12px;
}
.ticket__no {
  align-self: stretch;
  display: grid;
  place-items: center;
  font: 700 1.25rem/1 var(--text);
  color: var(--cyan);
  text-shadow: 0 0 10px rgb(79 227 255 / .7);
  border-right: 1px dashed var(--line);
}
.ticket__body { padding: .7rem .9rem .7rem 1rem; min-width: 0; }
.ticket__title {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ticket__by { margin: .15rem 0 0; font-size: .86rem; color: var(--muted); }
.ticket__side { padding-right: 1.1rem; display: flex; align-items: center; gap: .5rem; }

/* who asked: a small neon tag */
.stamp {
  display: inline-block;
  padding: .15em .65em;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--pink);
  font-weight: 600;
  font-size: .78rem;
  line-height: 1.35;
  white-space: nowrap;
  max-width: 11em;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 8px rgb(255 79 176 / .6);
}
.stamp--mine { color: var(--lime); background: rgb(141 255 114 / .1); text-shadow: 0 0 8px rgb(141 255 114 / .6); }

.icon-btn {
  appearance: none;
  border: 0;
  background: transparent;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--muted);
  cursor: pointer;
}
.icon-btn:hover { background: rgb(255 255 255 / .08); color: var(--fg); }
.icon-btn svg { width: 18px; height: 18px; }

/* ---------- buttons & fields ---------- */
.btn {
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: .8rem 1.4rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--pink);
  color: #22061a;
  box-shadow: 0 0 18px rgb(255 79 176 / .45);
  line-height: 1.2;
  text-decoration: none;
  display: inline-block;
}
.btn:disabled { opacity: .5; cursor: default; }
.btn--light { background: var(--fg); color: var(--night); box-shadow: none; }
.btn--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--muted); }

.field { display: block; }
.field__label { display: block; font-size: .86rem; font-weight: 600; margin-bottom: .35rem; color: var(--muted); }
.input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #0f0719;
  color: var(--fg);
  padding: .75rem .9rem;
  font-size: 1rem;
}
.input::placeholder { color: #6f6190; }
.input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgb(79 227 255 / .2), 0 0 16px rgb(79 227 255 / .3); }

/* ---------- progress ---------- */
.progress { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress > i { display: block; height: 100%; width: 0; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); transition: width 1s linear; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translate(-50%, 140%);
  background: #2a1645;
  color: var(--fg);
  box-shadow: 0 0 0 1px var(--line), 0 0 22px rgb(255 79 176 / .3);
  padding: .8rem 1.2rem;
  border-radius: 12px;
  max-width: min(92vw, 30rem);
  font-weight: 600;
  z-index: 50;
  transition: transform .25s ease;
}
.toast.is-on { transform: translate(-50%, 0); }
.toast--error { background: var(--sign); color: #fff; }

/* new ticket lands in the queue */
@keyframes drop-in {
  from { transform: translateY(-14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.is-new { animation: drop-in .45s cubic-bezier(.2,.9,.3,1.2); }

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