/* Guest entry panel. Deliberately reuses the .csg-auth-required visual language
   (same overlay, card, lock badge, gold primary button) so one-click entry reads as
   part of CSGuessr rather than a bolted-on screen. */
.csg-guest-entry{
  position:fixed;
  inset:0;
  z-index:530000;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  padding:18px;
  background:#02070be0;
  backdrop-filter:blur(9px);
  opacity:0;
  transition:opacity .24s ease;
  zoom:var(--csg-ui-overlay-zoom,1);
}
.csg-guest-entry.visible{opacity:1}
.csg-guest-card{
  width:min(470px,calc(100vw - 36px));
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--yellow,#f6c945) 42%,#3d505b);
  border-radius:16px;
  background:linear-gradient(155deg,#13212a 0%,#0b141b 62%,#080e13 100%);
  color:#eaf1f4;
  box-shadow:0 34px 110px #000e,0 0 42px color-mix(in srgb,var(--yellow,#f6c945) 13%,transparent),inset 0 1px #ffffff10;
  transform:translateY(10px) scale(.985);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
  zoom:var(--csg-ui-scale,1);
}
.csg-guest-entry.visible .csg-guest-card{transform:none}
.csg-guest-card header{display:grid;grid-template-columns:44px minmax(0,1fr) 38px;gap:12px;align-items:center;padding:18px 19px 14px;border-bottom:1px solid #ffffff10}
.csg-guest-mark{width:42px;height:42px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--yellow,#f6c945) 48%,#3b4d57);border-radius:12px;background:color-mix(in srgb,var(--yellow,#f6c945) 10%,#0c161d);color:var(--yellow,#f6c945)}
.csg-guest-mark svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.csg-guest-card small{display:block;color:var(--yellow,#f6c945);font-size:7px;font-weight:950;letter-spacing:.16em}
.csg-guest-card h2{margin:4px 0 0;font:850 28px/.95 var(--font-display,'Barlow Condensed',sans-serif);text-transform:uppercase}
.csg-guest-card header>button{width:36px;height:36px;border:1px solid #334650;border-radius:10px;background:#101b22;color:#9cacb4;font-size:21px;cursor:pointer}
.csg-guest-body{padding:17px 20px 4px}
.csg-guest-body>p{margin:0 0 13px;color:#98a8b1;font-size:11px;line-height:1.6}
.csg-guest-field{display:block}
.csg-guest-field>span{display:block;margin-bottom:6px;color:#8ea0a9;font-size:8px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}
.csg-guest-field input{
  width:100%;
  box-sizing:border-box;
  min-height:46px;
  padding:0 13px;
  border:1px solid #3b4e59;
  border-radius:10px;
  background:#0a1218;
  color:#eaf1f4;
  font:600 15px var(--font-body,Inter,Arial,sans-serif);
}
.csg-guest-field input:focus{outline:none;border-color:var(--yellow,#f6c945);box-shadow:0 0 0 3px #f6c94526}
.csg-guest-note{margin:10px 0 0;color:#7f9099;font-size:10px;line-height:1.55}
.csg-guest-error{margin:10px 0 0;color:#ff8f86;font-size:10.5px;line-height:1.5;min-height:0}
/* grid-template-columns is declared explicitly: the shipped app stylesheet puts a
   multi-column grid on bare `footer`, which otherwise collapses the primary button to
   its intrinsic width. auth-required.css declares its own columns for the same reason. */
.csg-guest-card footer{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;padding:15px 20px 19px}
.csg-guest-play{
  min-height:48px;
  border:1px solid #ffe58a;
  border-radius:10px;
  background:linear-gradient(145deg,#ffe57c,#f4c542 48%,#d69b17);
  color:#0b1014;
  font-size:10px;
  font-weight:950;
  letter-spacing:.08em;
  cursor:pointer;
  box-shadow:inset 0 1px #fffbd0,0 0 25px #f4c54232;
}
.csg-guest-play[disabled]{opacity:.62;cursor:progress}
.csg-guest-alt{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;padding-top:3px}
.csg-guest-alt button{
  background:none;
  border:0;
  padding:6px 2px;
  color:#9cacb4;
  font-size:10px;
  font-weight:800;
  letter-spacing:.03em;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.csg-guest-alt button:hover{color:#eaf1f4}
@media(max-width:520px){
  .csg-guest-entry{padding:10px}
  .csg-guest-card{width:100%}
  .csg-guest-card h2{font-size:24px}
  .csg-guest-alt{gap:12px}
}
@media(prefers-reduced-motion:reduce){.csg-guest-entry,.csg-guest-card{transition:none}}