/* ═══════════════════════════════════════════════
   J1: GUEST BLOCK OF THE GAME PAGES (fragments/game-guest-cta)
   Used by /tombola, /koleso, /kvizy, /kvizy/{slug}, /obchod and /hry for logged-out visitors, in place of the action
   (spin, ticket, quiz). Built from the tombola guest card. It takes its colours from the tokens every game page already
   defines on its body class (--surface, --line, --muted, --text, --blue); the fallbacks are the same values.
   ═══════════════════════════════════════════════ */

.game-guest-cta {
  background: var(--surface, #18233d);
  border: 1px solid var(--line, rgba(255, 255, 255, .08));
  border-radius: var(--radius, 18px);
  color: var(--text, #eef3ff);
  padding: 20px 22px;
  margin: 0 0 20px;
}

.game-guest-cta .ggc-title {
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, .08));
}

.game-guest-cta .ggc-lines {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.game-guest-cta .ggc-lines li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted, #9bacd3);
}

.game-guest-cta .ggc-lines li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: var(--blue-l, #6b96ff);
}

/* K17: the link of the shop line (and any link inside the lines): the block's own text colour, semibold, underlined, never split over two
   lines - "Pozrieť Obchod →" moves to the next line as a whole. A keyboard focus (:focus-visible) draws an outline in currentColor; a
   mouse hover or click adds nothing. No colour that is not already in this file. */
.game-guest-cta .ggc-lines a,
.game-guest-cta .ggc-lines a:hover,
.game-guest-cta .ggc-lines a:active,
.game-guest-cta .ggc-lines a:visited {
  color: var(--text, #eef3ff);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.game-guest-cta .ggc-lines a:focus:not(:focus-visible) {
  outline: none;
}

.game-guest-cta .ggc-lines a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

.game-guest-cta .ggc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.game-guest-cta .ggc-btn {
  flex: 1 1 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  font-family: "Cabinet Grotesk", sans-serif;
  font-weight: 800;
  font-size: 14px;
  text-align: center;
  text-decoration: none !important;
  transition: filter .15s, border-color .15s, color .15s;
}

.game-guest-cta .ggc-btn--primary {
  background: var(--blue, #3d6df2);
  border: 1px solid var(--blue, #3d6df2);
  color: #fff;
}

.game-guest-cta .ggc-btn--primary:hover {
  filter: brightness(1.1);
  color: #fff;
}

.game-guest-cta .ggc-btn--secondary {
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line, rgba(255, 255, 255, .08));
  color: var(--muted, #9bacd3);
  font-weight: 700;
}

.game-guest-cta .ggc-btn--secondary:hover {
  border-color: rgba(255, 255, 255, .2);
  color: var(--text, #eef3ff);
}

/* Standing alone on a wide page (the quiz list, the shop, the hub): a compact card in the middle, not a 1000 px strip. */
.shop-wrap > .game-guest-cta,
.kvizy-wrap > .game-guest-cta,
.hry-wrap > .game-guest-cta {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 480px) {
  .game-guest-cta {
    padding: 18px 16px;
  }

  .game-guest-cta .ggc-btn {
    flex-basis: 100%;
  }
}