/* The guest "create your free account" pop-up (is-back/play/guest.js). */

.rk-guest-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box; overflow: hidden;
  background: rgba(4, 7, 12, .78);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: rk-guest-fade .25s ease-out both;
}
.rk-guest-box {
  position: relative; width: 100%; max-width: 440px; box-sizing: border-box;
  max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 30px 28px 22px; text-align: center; color: #e6edf3;
  background: linear-gradient(160deg, rgba(31,111,235,.2), rgba(0,255,204,.08) 45%, rgba(22,27,34,.96) 70%), #161b22;
  border: 1px solid rgba(0,255,204,.4); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 50px rgba(0,255,204,.15);
  animation: rk-guest-pop .45s cubic-bezier(.2,1.4,.4,1) both;
}
.rk-guest-glow {
  position: absolute; inset: -40% -20% auto; height: 70%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(240,192,64,.22), transparent);
}
.rk-guest-emoji { position: relative; font-size: 46px; line-height: 1; animation: rk-guest-bounce 1.6s ease-in-out .4s infinite; }
.rk-guest-title { position: relative; margin: 12px 0 8px; font-size: 22px; font-weight: 800; color: #fff; line-height: 1.2; }
.rk-guest-text { position: relative; margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: #c9d1d9; }
.rk-guest-perks { position: relative; list-style: none; margin: 0 0 20px; padding: 0; text-align: left; display: grid; gap: 8px; }
.rk-guest-perks li {
  display: flex; gap: 11px; align-items: center; padding: 9px 12px; border-radius: 10px;
  background: rgba(13,17,23,.7); border: 1px solid #21262d;
  animation: rk-guest-slide .4s ease-out both;
}
.rk-guest-perks li:nth-child(2) { animation-delay: .07s; }
.rk-guest-perks li:nth-child(3) { animation-delay: .14s; }
.rk-guest-perks li:nth-child(4) { animation-delay: .21s; }
.rk-guest-perk-icon { font-size: 21px; flex: 0 0 auto; }
.rk-guest-perks strong { display: block; font-size: 14px; color: #f0f6fc; }
.rk-guest-perks small { display: block; font-size: 12px; color: #8b949e; margin-top: 1px; }
.rk-guest-cta {
  position: relative; display: block; padding: 14px 18px; border-radius: 12px;
  font-size: 16px; font-weight: 800; color: #0d1117; text-decoration: none;
  background: linear-gradient(135deg, #00ffcc, #3fb9ff);
  box-shadow: 0 8px 26px rgba(0,255,204,.35);
  animation: rk-guest-pulse 2.4s ease-in-out 1s infinite;
  transition: transform .15s;
}
.rk-guest-cta:hover, .rk-guest-cta:focus-visible { transform: translateY(-2px); outline: none; }
.rk-guest-login { position: relative; display: block; margin-top: 12px; font-size: 14px; color: #58a6ff; text-decoration: none; font-weight: 600; }
.rk-guest-login:hover { text-decoration: underline; }
.rk-guest-later {
  position: relative; margin-top: 10px; background: none; border: none; cursor: pointer;
  color: #8b949e; font-size: 13px; font-family: inherit; padding: 6px 10px;
}
.rk-guest-later:hover { color: #e6edf3; }
.rk-guest-confetti {
  position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; pointer-events: none;
  animation: rk-guest-fall 2.8s cubic-bezier(.25,.6,.4,1) both;
}
@keyframes rk-guest-fade { from { opacity: 0; } }
@keyframes rk-guest-pop { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes rk-guest-slide { from { opacity: 0; transform: translateX(-10px); } }
@keyframes rk-guest-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px) rotate(-6deg); } }
@keyframes rk-guest-pulse { 0%, 100% { box-shadow: 0 8px 26px rgba(0,255,204,.35), 0 0 0 0 rgba(0,255,204,.45); } 50% { box-shadow: 0 8px 26px rgba(0,255,204,.35), 0 0 0 12px rgba(0,255,204,0); } }
@keyframes rk-guest-fall { to { transform: translate(var(--drift), 105vh) rotate(var(--spin)); opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .rk-guest-overlay, .rk-guest-box, .rk-guest-emoji, .rk-guest-perks li, .rk-guest-cta { animation: none; }
}

/* Match queue: the guest's banner above the tutorials */
.rk-guest-banner {
  display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 11px 14px;
  border-radius: 10px; background: linear-gradient(135deg, rgba(240,192,64,.14), rgba(188,140,255,.12));
  border: 1px solid rgba(240,192,64,.4); font-size: 13px; line-height: 1.45; color: #e6edf3;
}
.rk-guest-banner button {
  flex: 0 0 auto; margin-left: auto; padding: 7px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid #2ea043; background: #238636; color: #fff; font-weight: 700; font-size: 13px; font-family: inherit;
}
.rk-guest-banner button:hover { background: #2ea043; }

/* Phones (portrait, and landscape's short height): the pop-up fits the visible screen and
   scrolls inside, its links/buttons are full tap targets, and the banner stacks its button. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  .rk-guest-overlay {
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .rk-guest-box { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 24px 18px 14px; -webkit-overflow-scrolling: touch; }
  .rk-guest-cta { padding: 15px 18px; }
  .rk-guest-login, .rk-guest-later {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px;
  }
  .rk-guest-login { margin-top: 6px; }
  .rk-guest-later { margin-top: 0; font-size: 14px; }
  .rk-guest-banner { flex-wrap: wrap; font-size: 14px; }
  .rk-guest-banner button { width: 100%; min-height: 44px; margin-left: 0; font-size: 15px; touch-action: manipulation; }
  @media (max-height: 500px) {
    .rk-guest-box { padding-top: 16px; }
    .rk-guest-emoji { font-size: 34px; }
    .rk-guest-title { margin: 8px 0 6px; font-size: 19px; }
    .rk-guest-text { margin-bottom: 12px; }
    .rk-guest-perks { grid-template-columns: 1fr 1fr; margin-bottom: 14px; }
  }
}