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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #eef4f9;
}

.screen {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  padding:
    max(5%, env(safe-area-inset-top, 0px))
    max(5%, env(safe-area-inset-right, 0px))
    max(5%, env(safe-area-inset-bottom, 0px))
    max(5%, env(safe-area-inset-left, 0px));
  background:
    radial-gradient(ellipse 70% 50% at 50% 20%, rgba(255, 255, 255, 0.95) 0%, transparent 60%),
    linear-gradient(180deg, #f8fbfd 0%, #eef4f9 45%, #e8f0f7 100%);
}

.grid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(0, 123, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 123, 255, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  animation: gridMove 24s linear infinite;
}

@keyframes gridMove {
  to { transform: translateY(56px); }
}

.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 2px solid rgba(0, 123, 255, 0.1);
  transform: translate(-50%, -50%);
  animation: ringPulse 3.5s ease-in-out infinite;
}

.ring-1 { width: 50vmin; height: 50vmin; }
.ring-2 { width: 66vmin; height: 66vmin; animation-delay: 0.5s; opacity: 0.7; }
.ring-3 { width: 82vmin; height: 82vmin; animation-delay: 1s; opacity: 0.45; }

@keyframes ringPulse {
  50% { transform: translate(-50%, -50%) scale(1.03); opacity: 0.75; }
}

.flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(40, 167, 69, 0.18) 0%, transparent 55%);
  opacity: 0;
  pointer-events: none;
}

.flash.active { animation: flashBurst 0.85s ease-out forwards; }

@keyframes flashBurst {
  from { opacity: 0.7; }
  to { opacity: 0; }
}

/* เลขคิวอยู่กึ่งกลางจอ — โลโก้+ข้อความอยู่เหนือเลข */
.number-anchor {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
}

.stack-above {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(90vw, 520px);
  margin-bottom: 2.5vh;
}

.logo {
  width: clamp(140px, 16vw, 260px);
  height: auto;
  margin-bottom: 1vh;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.brand-tag {
  font-family: "Mitr", sans-serif;
  font-size: clamp(0.8rem, 1.5vw, 1.05rem);
  font-weight: 500;
  color: #28a745;
  margin-bottom: 1.2vh;
}

.queue-label {
  font-family: "Mitr", sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  font-weight: 500;
  color: #5a6a7a;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  margin: 0;
}

#qText {
  font-size: var(--num-size, 50vmin);
  line-height: 0.85;
  color: var(--num-green);
  text-shadow: 0 6px 20px rgba(21, 131, 72, 0.25);
  white-space: nowrap;
}

#qText.idle:not(.zero) { animation: breathe 2.8s ease-in-out infinite; }

@keyframes breathe {
  50% { transform: scale(1.015); }
}

#qText.pop { animation: numberPop 0.75s cubic-bezier(0.22, 1.2, 0.36, 1) forwards; }

@keyframes numberPop {
  0% { transform: scale(0.55); opacity: 0; }
  55% { transform: scale(1.04); }
  100% { transform: scale(1); opacity: 1; }
}

#qText.zero {
  color: #c5d3de;
  text-shadow: none;
  animation: none;
}