/* where2drink — guest app.
   Dark by decision, not by preference: this is read at arm's length in a dim
   bar, on a phone held one-handed. Large type, high contrast, and every
   interactive target at least 48px tall so it survives a crowded room. */

:root {
  --bg: #0d0b0f;
  --surface: #17131c;
  --surface-2: #201a27;
  --line: #322a3b;
  --text: #f4efe9;
  --muted: #a79eb0;
  --accent: #f5a623;
  --accent-soft: #ffc76b;
  --danger: #ff8a7a;
  --nav-h: 62px;
  --pad: 18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  overscroll-behavior-y: none;
}

.app {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
}

/* ---------- generic blocks ---------- */

.screen {
  padding: calc(var(--pad) + env(safe-area-inset-top)) var(--pad) var(--pad);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100vh;
}

.screen--centred {
  justify-content: center;
  text-align: center;
}

/* Campaign copy arrives as plain text with real newlines — the bot sends it
   with no parse mode — so it is inserted as text and wrapped here, never as
   HTML. */
.copy {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 17px;
  color: var(--text);
}

.copy--lead {
  font-size: 20px;
  line-height: 1.35;
}

.copy--muted { color: var(--muted); }

.notice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 14px 16px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}

.error {
  background: rgba(255, 138, 122, 0.10);
  border: 1px solid rgba(255, 138, 122, 0.35);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--danger);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.spacer { flex: 1 1 auto; }

/* ---------- controls ---------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: #1a1206;
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.45; }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  font-weight: 600;
}

.btn--call {
  flex-direction: column;
  gap: 2px;
  min-height: 76px;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.btn--call .btn__number {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
}

.btn-row { display: flex; flex-direction: column; gap: 12px; }

.input {
  width: 100%;
  min-height: 56px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 20px;
}

.input:focus {
  outline: none;
  border-color: var(--accent);
}

.input::placeholder { color: #6d6478; }

/* ---------- login ---------- */

.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

/* The wordmark is 1200x600, not a square app icon: width-driven with height
   derived, and no corner rounding — that belonged to the rounded-square icon
   this replaced and would clip the mark's own edges here. max-width keeps it
   inside the narrowest handset we support rather than overflowing the screen
   padding. */
.brand img {
  width: 200px;
  max-width: 62vw;
  height: auto;
  border-radius: 0;
}

.countdown {
  font-variant-numeric: tabular-nums;
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  color: var(--accent-soft);
  letter-spacing: 0.04em;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 7px;
}

.dots i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.3;
  animation: pulse 1.2s infinite;
}
.dots i:nth-child(2) { animation-delay: 0.2s; }
.dots i:nth-child(3) { animation-delay: 0.4s; }

@keyframes pulse { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .dots i { animation: none; opacity: 0.6; }
}

/* ---------- main app ---------- */

.main {
  padding: calc(var(--pad) + env(safe-area-inset-top)) var(--pad)
           calc(var(--nav-h) + 24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100vh;
}

.qr-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  /* The code is square and has to be shown whole — a barman scans it off the
     screen. Taking the full column width means that in landscape the card is
     taller than the viewport and the bottom of the code sits behind the nav,
     where nothing can read it. Capping against the viewport height only bites
     when the screen is shorter than it is wide; in portrait, on every size
     tested, the width is the smaller of the two and this changes nothing.
     dvh second so browsers that have it use the visible height rather than the
     URL-bar-hidden one. */
  align-self: center;
  width: 100%;
  max-width: calc(100vh - 190px);
  max-width: calc(100dvh - 190px);
}

.qr-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}

.qr-fallback {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #3a3340;
}

.qr-fallback .btn { max-width: 220px; }

.qr-fallback__text {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
}

.balance {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  padding: 6px 0;
}

.balance__value {
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.balance__word {
  font-size: 22px;
  color: var(--muted);
}

.balance--big { padding: 28px 0; }
.balance--big .balance__value { font-size: 84px; }

.bars { display: flex; flex-direction: column; gap: 12px; }

.bar {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}

.bar__name {
  font-size: 19px;
  font-weight: 700;
  margin: 0 0 4px;
}

.bar__address {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

a.bar .bar__address { color: var(--accent-soft); text-decoration: underline; }

/* ---------- bottom nav ---------- */

.nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: flex;
  background: rgba(19, 15, 24, 0.96);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  backdrop-filter: blur(12px);
}

.nav__inner {
  display: flex;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.nav button {
  flex: 1 1 0;
  /* A flex item's default min-width is auto, so a label wider than its share
     refuses to shrink and pushes the row past the screen: at 200% browser zoom
     "Оферта" is clipped and FAQ falls off the edge entirely, unreachable. With
     this the five tabs always divide the width, and a label too wide for its
     share is ellipsised instead — the icon still says which tab it is. */
  min-width: 0;
  min-height: var(--nav-h);
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nav button svg { width: 22px; height: 22px; fill: currentColor; }

.nav button span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Narrower than the five labels need — a small phone at 200% browser zoom.
   Ellipsis alone would leave "Бары" and "Баланс" both reading "Б…", so the
   icons carry it instead. Every real portrait width tested (360, 375, 390) is
   well above this, and so is a 320px phone. */
@media (max-width: 300px) {
  .nav button span { display: none; }
  .nav button svg { width: 26px; height: 26px; }
}

.nav button[aria-selected="true"] { color: var(--accent); }

/* ---- call-first login -------------------------------------------------- */

/* Palette taken from the brand marks themselves (docs/raw/w2d_b.svg,
   w2d_w.svg): ink #1e1e1e, accent #fff000, ground #fff. */
:root {
  --ink: #1e1e1e;
  --accent: #fff000;
  --ground: #fff;
}

/* Names the operation before the instruction below it gives an order. Sized
   modestly on purpose: it sits above the .digit, which is the one element on
   this screen that must dominate, and a heading scaled to compete with it would
   cost the guest the only thing they may have to carry to their dialpad. */
.call-heading {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--text);
}

.call-title {
  margin: 0 0 .35em;
  text-align: center;
  opacity: .8;
}

/* The number is read off the screen and dialled, so it is set large, in a
   tabular face, and never wrapped mid-number. */
.call-number {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.call-press {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  margin: 1em 0;
}

/* The one thing the guest may have to carry to their dialpad themselves, when
   their dialler drops the DTMF suffix. It gets the accent and a size nothing
   else on the screen competes with. */
.digit {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  background: var(--accent);
  border-radius: .15em;
  padding: .05em .25em;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* The brief moment between the login screen mounting and /api/auth/start
   answering. Quieter than .dots because nothing has gone wrong and the guest
   has nothing to do yet. */
.dots-quiet {
  min-height: 2rem;
  opacity: .35;
}