/* Branding de Drag Gambit (mismos tokens que theme.tres y el feature graphic). */
@font-face {
  font-family: "Baloo 2";
  src: url("Baloo2.ttf") format("truetype");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --pink: #ff2d9e;
  --cream: #fff4fa;
  --gold: #f5c542;
  --gold-shadow: #b8860b;
  --gold-text: #4a2a05;
  --magenta-dark: #8f0f57;
}

* { box-sizing: border-box; margin: 0; }

html, body { min-height: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 48px 16px;
  background: var(--pink) url("hex.svg") center top / 78px 135px repeat;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 500;
  color: var(--cream);
  text-align: center;
}

.crown {
  width: min(52vw, 240px);
  height: auto;
  filter: drop-shadow(5px 6px 0 var(--magenta-dark));
}

.wordmark {
  font-size: clamp(44px, 13vw, 72px);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 4px 5px 0 var(--magenta-dark);
}
.wordmark span { color: var(--gold); }

.btn {
  display: inline-block;
  padding: 18px 40px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--gold-text);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 7px 0 var(--gold-shadow);
  transition: transform 80ms, box-shadow 80ms;
}
.btn:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--gold-shadow); }

.note {
  max-width: 320px;
  font-size: 17px;
  line-height: 1.35;
  text-shadow: 2px 2px 0 var(--magenta-dark);
}

/* Idioma: solo se ve el texto del navegador (español mientras carga el JS). */
body:not([data-lang]) [data-en],
body[data-lang="es"] [data-en],
body[data-lang="en"] [data-es] { display: none; }

/* Plataforma: el aviso de iPhone solo en iPhone, el botón en el resto. */
.only-ios { display: none; }
body[data-platform="ios"] .only-ios { display: block; }
body[data-platform="ios"] .not-ios { display: none; }