/* Keystone Black Friday Popup - brand colours read from keystoneescaperooms.com */
.kbf-overlay{
  --kbf-blue:#0D5CAE; --kbf-blue-dark:#094584; --kbf-blue-light:#4A90E2;
  --kbf-charcoal:#2C2C2C; --kbf-yellow:#FFCC00; --kbf-white:#fff; --kbf-live:#ff3b30;
  --kbf-head:"Montserrat",system-ui,"Segoe UI",Arial,sans-serif;
  --kbf-mono:"Roboto Mono",ui-monospace,Consolas,monospace;
  position:fixed;inset:0;z-index:2147483000;display:none;align-items:center;justify-content:center;
  padding:12px;background:rgba(10,18,32,.78);backdrop-filter:blur(3px);
}
.kbf-overlay *{box-sizing:border-box}
.kbf-overlay.kbf-open{display:flex;animation:kbfFade .25s ease-out}
.kbf-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.kbf-card{
  position:relative;z-index:1;width:100%;max-width:450px;overflow:hidden;text-align:center;color:var(--kbf-white);
  border-radius:18px;padding:18px 24px 16px;font-family:var(--kbf-head);
  background:radial-gradient(120% 80% at 50% 0%,var(--kbf-blue) 0%,var(--kbf-blue-dark) 55%,var(--kbf-charcoal) 100%);
  box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 2px rgba(74,144,226,.45),0 0 40px rgba(13,92,174,.55);
  animation:kbfPop .4s cubic-bezier(.2,.9,.3,1.25);
}
.kbf-card::before{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);
  transform:skewX(-20deg);animation:kbfShine 4.5s ease-in-out infinite;pointer-events:none;
}
.kbf-overlay .kbf-close{
  position:absolute;top:8px;right:10px;width:30px;height:30px;padding:0;border:0;border-radius:50%;cursor:pointer;z-index:3;
  background:rgba(255,255,255,.14);color:#fff;font-size:22px;line-height:1;
}
.kbf-overlay .kbf-close:hover{background:rgba(255,255,255,.28)}
.kbf-live{
  display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;margin-bottom:8px;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);
  font:700 11px/1 var(--kbf-mono);letter-spacing:2px;text-transform:uppercase;
}
.kbf-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--kbf-live);box-shadow:0 0 0 0 rgba(255,59,48,.8);animation:kbfPulseDot 1.2s infinite}
.kbf-overlay .kbf-top{margin:0 0 2px;padding:0;font-family:var(--kbf-head);font-size:25px;line-height:1.1;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:#fff}
.kbf-top span{color:var(--kbf-yellow)}
.kbf-overlay .kbf-mid-big{
  margin:2px 0 0;padding:0;font-size:56px;line-height:1;font-weight:900;letter-spacing:-2px;color:var(--kbf-yellow);
  text-shadow:0 0 22px rgba(255,204,0,.55),0 3px 0 rgba(0,0,0,.25);animation:kbfGlow 2s ease-in-out infinite;
}
.kbf-overlay .kbf-mid-sub{margin:0 0 8px;padding:0;font-size:20px;line-height:1.1;font-weight:800;text-transform:uppercase;color:#fff}
.kbf-overlay .kbf-code-line{display:inline-block;vertical-align:middle;margin:0 8px 8px 0;padding:0;font:500 12px/1.2 var(--kbf-mono);letter-spacing:1px;text-transform:uppercase;opacity:.85;color:#fff}
.kbf-code{
  display:inline-block;vertical-align:middle;margin:0 0 8px;padding:6px 14px;border:2px dashed var(--kbf-yellow);border-radius:9px;
  font:700 20px/1 var(--kbf-mono);letter-spacing:3px;color:var(--kbf-yellow);background:rgba(0,0,0,.35);cursor:pointer;
}
.kbf-timer{margin:0 0 8px}
.kbf-timer small{display:block;font:500 10px/1 var(--kbf-mono);letter-spacing:1.5px;text-transform:uppercase;opacity:.8;margin-bottom:4px}
.kbf-clock{display:inline-flex;gap:6px}
.kbf-clock b{
  min-width:48px;padding:5px 4px;border-radius:7px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.18);
  font:700 19px/1 var(--kbf-mono);color:#fff;
}
.kbf-clock em{display:block;font:500 8px/1 var(--kbf-mono);letter-spacing:1px;margin-top:3px;opacity:.7;font-style:normal}
.kbf-overlay .kbf-valid{margin:0 0 10px;padding:0;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#fff}
.kbf-valid span{color:var(--kbf-yellow)}
.kbf-overlay a.kbf-btn{
  display:block;padding:13px 16px;border-radius:11px;text-decoration:none;text-transform:uppercase;letter-spacing:1px;
  font:700 17px/1 var(--kbf-mono);color:#fff;background:linear-gradient(180deg,var(--kbf-blue-light),var(--kbf-blue));
  border:2px solid rgba(255,255,255,.55);box-shadow:0 6px 20px rgba(74,144,226,.55);
  animation:kbfBtnPulse 1.6s ease-in-out infinite;transition:transform .15s;
}
.kbf-overlay a.kbf-btn:hover{transform:translateY(-2px) scale(1.02);color:#fff}
@keyframes kbfFade{from{opacity:0}to{opacity:1}}
@keyframes kbfPop{from{opacity:0;transform:scale(.85) translateY(14px)}to{opacity:1;transform:none}}
@keyframes kbfShine{0%,60%{left:-60%}100%{left:140%}}
@keyframes kbfPulseDot{0%{box-shadow:0 0 0 0 rgba(255,59,48,.8)}70%{box-shadow:0 0 0 10px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}
@keyframes kbfGlow{0%,100%{text-shadow:0 0 14px rgba(255,204,0,.4),0 3px 0 rgba(0,0,0,.25)}50%{text-shadow:0 0 34px rgba(255,204,0,.85),0 3px 0 rgba(0,0,0,.25)}}
@keyframes kbfBtnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@media (max-width:480px){
  .kbf-card{padding:16px 14px 14px}
  .kbf-overlay .kbf-top{font-size:21px}.kbf-overlay .kbf-mid-big{font-size:48px}.kbf-overlay .kbf-mid-sub{font-size:17px}
  .kbf-code{font-size:18px;padding:5px 12px}.kbf-clock b{min-width:44px;font-size:17px}
}
@media (max-height:520px){ /* very short screens (phone sideways): shrink a bit more so everything fits */
  .kbf-card{transform:scale(.82);transform-origin:center}
  .kbf-overlay{align-items:flex-start;overflow:auto}
}
@media (prefers-reduced-motion:reduce){.kbf-overlay *,.kbf-card::before{animation:none!important}}