/**
 * Ponoki — consent gate (see shared/components/consent-gate.js).
 *
 * Loaded on every page, including the game pages, which do NOT load
 * tokens.css. So every custom property here carries a literal fallback, the
 * same way seo-block.css does: on home the design tokens win, on a game page
 * the fallbacks do, and both render correctly.
 *
 * One dialog, both surfaces. There is deliberately no banner or bottom-sheet
 * variant: games are position:fixed full-viewport layouts with controls at
 * every edge, so any anchored panel buries a control in most of them. The
 * dialog waits for a touch instead. See the module header for the numbers.
 */

.cg-modal {
  --cg-card: var(--color-bg-card, hsl(230, 25%, 13%));
  --cg-text: var(--color-text-primary, hsl(220, 20%, 92%));
  --cg-muted: var(--color-text-muted, hsl(220, 15%, 55%));
  --cg-accent: var(--color-accent, hsl(185, 70%, 55%));

  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  color: var(--cg-text);
  background: var(--cg-card);
  border: 1px solid hsla(220, 20%, 60%, 0.18);
  box-sizing: border-box;

  max-width: 22.5rem;
  width: calc(100% - 2rem);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  text-align: center;

  display: flex;
  flex-direction: column;
  gap: 0.7rem;

  /* margin:auto is what centres an open <dialog>, and it is stated here
     rather than inherited: base.css carries a `* { margin: 0 }` reset that
     wipes the UA value, which pinned the card to the top of the screen and
     clipped it. Game pages do not load base.css, so this also keeps both
     surfaces behaving identically. */
  margin: auto;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}

.cg-modal::backdrop {
  background: hsla(230, 35%, 5%, 0.86);
}

/* Focus is placed on the card so a screen reader announces the title before
   the choices, instead of dropping straight onto the Terms link. It is not a
   tab stop, so it needs no ring. */
.cg-modal:focus {
  outline: none;
}

.cg-title {
  font-family: var(--font-display, 'DM Sans', system-ui, sans-serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.15rem;
}

.cg-body {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--cg-muted);
  margin: 0;
}

.cg-adults {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--cg-text);
  margin: 0;
}

.cg-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: 0.78rem;
  margin: 0;
}

.cg-links a {
  color: var(--cg-accent);
  text-decoration: none;
}

.cg-links a:hover,
.cg-links a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The stats question. A framed block rather than a checkbox: a checkbox is a
   thing to ignore, a named question with two buttons under it is a thing you
   answer. Nothing here is ever pre-selected. */
.cg-stats {
  background: hsla(230, 22%, 40%, 0.16);
  border-radius: 10px;
  padding: 0.65rem 0.7rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cg-stats strong {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cg-text);
}

.cg-stats span {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--cg-muted);
}

/* Equal weight, equal width, same row. Refusing must never cost more than
   accepting — do not shrink, grey out, or demote the ghost button. */
.cg-choices {
  display: flex;
  gap: 0.5rem;
}

.cg-btn {
  flex: 1 1 0;
  min-width: 0;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.25;
  padding: 0.6rem 0.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 120ms ease;
}

.cg-btn:active {
  transform: scale(0.97);
}

.cg-btn-primary {
  background: var(--cg-accent);
  color: hsl(230, 40%, 8%);
}

.cg-btn-ghost {
  background: transparent;
  border-color: hsla(220, 16%, 62%, 0.4);
  color: var(--cg-text);
}

.cg-btn:focus-visible,
.cg-back:focus-visible,
.cg-links a:focus-visible {
  outline: 2px solid var(--cg-accent);
  outline-offset: 2px;
}

/* The way out on a game page. Muted and borderless so it reads as "cancel",
   never as a third answer: the real refusal is "Agree, no stats", which sits
   above at full weight. Do not promote this to look like the buttons. */
.cg-back {
  font-family: inherit;
  font-size: 0.76rem;
  color: var(--cg-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.35rem 0.5rem;
  margin: 0 auto;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .cg-back:hover {
    color: var(--cg-text);
  }
}

/* Static line at the foot of a game's article, for someone who reads the page
   and never touches the game. Ordinary prose in normal flow: it cannot
   overlap anything, and its links are real links. */
.cg-note {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid hsla(220, 20%, 60%, 0.12);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-text-muted, hsl(220, 15%, 55%));
}

.cg-note a {
  color: var(--color-accent, hsl(185, 70%, 55%));
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cg-btn {
    transition: none;
  }
}