:root{
  --chs-primary:#1f5e63;  /* teal */
  --chs-accent:#fda048;   /* orange */
  --chs-teal:#41bcc4;     /* alt teal */
  --chs-plum:#6c6186;
  --chs-olive:#3f5130;
  --chs-sand:#e2c89f;
  --chs-paper:#f1ebe2;
  --pad:16px;
}
html,body{ margin:0; }
body.chs-kiosk-lock{ overflow:hidden !important; touch-action:none; }
#chs-kiosk-root{ margin:0; padding:0; }
.chs-kiosk{ position:fixed; inset:0; background:var(--chs-primary); color:#fff; overflow:hidden; z-index:2147483000; }

/* Top bar - hidden */
.chs-top { display: none !important; }

/* Card stack */
.deck{ position:absolute; inset:0; display:grid; place-items:center; }
.card{ position:absolute; width:92vw; height:82vh; max-width:980px; border-radius:28px; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.55); background:#111; touch-action:none;
  display:flex; flex-direction:column;
}
.card.next{ transform: translateY(12px) scale(.98); opacity:.8; }

/* Image square */
.card img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; flex-shrink:0; }

/* Meta */
.meta{ background:var(--chs-primary); color:#fff; padding:20px 20px; text-align:center; flex:1; display:flex; flex-direction:column; justify-content:flex-start; }
.name{ font-size:clamp(34px,6vw,68px); font-weight:900; color:#fff; }
.sub{ font-size:clamp(18px,3vw,26px); font-weight:600; opacity:.95; margin-top:8px; color:#fff; }

/* Swipe badges */
.badge-like, .badge-nope{
  position:absolute; top:18px; padding:6px 12px; border:4px solid; font-weight:900; font-size:22px; transform:rotate(-14deg); letter-spacing:2px; border-radius:8px;
  opacity:0; transition:opacity .15s ease;
}
.badge-like{ left:18px; color:#FDA048; border-color:#FDA048; }
.badge-nope{ right:18px; color:#41Bcc4; border-color:#41Bcc4; transform:rotate(14deg); }

/* Info FAB */
.qr-fab{ position:fixed; right:18px; bottom:18px; width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:#FDA048; color:#000; font-weight:900; box-shadow:0 10px 24px rgba(0,0,0,.35); z-index:2147483646; cursor:pointer; }

/* FULL-SCREEN ATTRACTOR with vignette + animated CTA */
.attractor{
  position:fixed;
  inset:0;
  display:none; /* .show toggles it on */
  align-items:center;
  justify-content:center;
  background:var(--chs-primary);
  z-index:2147483647;
  overflow:hidden;
}
.attractor.show{ display:flex; }

/* Subtle vignette/spotlight */
.attractor::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.0) 40%),
             radial-gradient(ellipse at center, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}

.attractor-box{
  width:100vw; height:100vh; padding:0; background:transparent; border-radius:0; box-shadow:none; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:16px;
}

/* brand line */
.attractor-brand{
  font-weight:900; letter-spacing:.5px; margin:0;
  font-size:clamp(28px,6vw,72px);
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}

/* rotating message line */
.attractor-msg{
  line-height:1.1; max-width:92vw; margin:0 auto;
  font-size:clamp(22px,5vw,56px);
  font-weight:800;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
  animation: ctaPulse 2.2s ease-in-out infinite;
}

/* gentle nudge every 8s */
@keyframes ctaPulse{
  0%,100%{ transform:scale(1); opacity:1; }
  40%{ transform:scale(1.025); opacity:0.98; }
  60%{ transform:scale(1.03); opacity:1; }
}

/* fade transition for rotating lines */
.fade-enter{ opacity:0; transform:translateY(6px); }
.fade-enter-active{ opacity:1; transform:translateY(0); transition:opacity .4s ease, transform .4s ease; }
.fade-exit{ opacity:1; transform:translateY(0); }
.fade-exit-active{ opacity:0; transform:translateY(-6px); transition:opacity .35s ease, transform .35s ease; }

/* simple tap-hand made in CSS (no asset) */
.tap-hand{
  position:relative; width:22px; height:22px; border:3px solid var(--chs-accent); border-radius:6px; transform:rotate(20deg);
  box-shadow:0 0 0 3px rgba(253,160,72,.2);
}
.tap-hand::after{
  content:""; position:absolute; left:50%; top:-12px; width:3px; height:12px; background:var(--chs-accent); border-radius:2px;
  transform:translateX(-50%);
}
.tap-hand-bounce{ animation: tapBounce 8s infinite; }
@keyframes tapBounce{
  0%,86%{ transform:translateY(0) rotate(20deg); }
  89%{ transform:translateY(4px) rotate(20deg); }
  92%{ transform:translateY(0) rotate(20deg); }
  95%{ transform:translateY(4px) rotate(20deg); }
  98%,100%{ transform:translateY(0) rotate(20deg); }
}

/* Modals */
.modal{ position:fixed; inset:0; display:none; align-items:flex-start; justify-content:center; background:rgba(0,0,0,.7); z-index:2147483647; overflow:auto; -webkit-overflow-scrolling:touch;}
.modal.show{ display:flex; }
.modal-box{ background:var(--chs-paper); padding:20px; border-radius:12px; max-width:900px; width:90vw; color:var(--chs-primary); max-height:85vh; display:flex; flex-direction:column; text-align:center; }

.details-title{ font-size:28px; font-weight:900; margin-bottom:6px; }
.details-sub{ opacity:.9; }
.details-image{ width:100%; height:auto; border-radius:8px; margin:10px 0; display:block; }
.details-holder{ display:flex; flex-direction:column; gap:12px; max-height:70vh; overflow:auto; -webkit-overflow-scrolling:touch; }

.modal-close{
  position:fixed; top:12px; right:12px; width:44px; height:44px; border-radius:999px;
  background:var(--chs-accent); color:#1D2327; border:0; font-size:26px; font-weight:900;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.35);
  z-index:2147483648; cursor:pointer;
}

.modal.qr-only { align-items:center !important; justify-content:center !important; }
.modal.qr-only .modal-box { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.modal.qr-only .modal-box img { display:block; margin:0 auto 16px auto; max-width:80vw; height:auto; }

.btn{ background:var(--chs-accent); color:#1D2327; border:0; padding:12px 18px; border-radius:16px; font-weight:700; cursor:pointer; }
.qr-holder{ background:#fff; padding:12px; border-radius:12px; display:inline-block; }
.qr-fab { pointer-events:auto; }