/* Coder's Brand Games — estilo común (/_sdk/cb.css, contrato §6).
   Variables --cb-* y clases .cb-btn, .cb-btn--primary, .cb-panel, .cb-modal, .cb-chip para menús, HUD y ventanas.
   Fuentes propias (OFL): Outfit (texto) y Space Grotesk (títulos y cifras), auto-alojadas en /_sdk/fuentes/. */
@font-face { font-family: "CB Outfit"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/_sdk/fuentes/outfit-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "CB Outfit"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/_sdk/fuentes/outfit-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "CB Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/_sdk/fuentes/grotesk-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "CB Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/_sdk/fuentes/grotesk-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --cb-bg: #05060b;
  --cb-bg-2: #0a0d1a;
  --cb-surface: rgba(16, 20, 38, .62);
  --cb-surface-2: rgba(26, 32, 60, .72);
  --cb-line: rgba(150, 175, 255, .14);
  --cb-line-2: rgba(150, 175, 255, .26);
  --cb-text: #eaf0ff;
  --cb-muted: #8f9abd;
  --cb-cyan: #38e8ff;
  --cb-violet: #a66bff;
  --cb-pink: #ff5fd2;
  --cb-ok: #3cf2a0;
  --cb-warn: #ffc94a;
  --cb-danger: #ff5a7a;
  --cb-grad: linear-gradient(135deg, var(--cb-cyan), var(--cb-violet));
  --cb-glow: 0 0 0 1px rgba(56, 232, 255, .35), 0 8px 32px -6px rgba(56, 232, 255, .35), 0 8px 40px -10px rgba(166, 107, 255, .45);
  --cb-radius: 18px;
  --cb-radius-sm: 12px;
  --cb-blur: blur(18px) saturate(1.4);
  --cb-font: "CB Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cb-font-display: "CB Grotesk", "CB Outfit", ui-sans-serif, system-ui, sans-serif;
  --cb-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- piezas ---------- */
.cb-panel {
  background: var(--cb-surface); border: 1px solid var(--cb-line); border-radius: var(--cb-radius);
  backdrop-filter: var(--cb-blur); -webkit-backdrop-filter: var(--cb-blur);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 24px 60px -24px rgba(0, 0, 0, .7);
  color: var(--cb-text); font-family: var(--cb-font);
}
.cb-btn {
  --b: var(--cb-line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: 0 1.2em; border-radius: 999px; border: 1px solid var(--b);
  background: var(--cb-surface-2); color: var(--cb-text); text-decoration: none; cursor: pointer;
  font: 600 15px/1 var(--cb-font); letter-spacing: .01em; white-space: nowrap; user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform .15s var(--cb-ease), box-shadow .2s var(--cb-ease), border-color .2s, background .2s;
}
.cb-btn:hover { border-color: rgba(56, 232, 255, .55); box-shadow: 0 0 24px -6px rgba(56, 232, 255, .5); }
.cb-btn:active { transform: scale(.97); }
.cb-btn:focus-visible { outline: 2px solid var(--cb-cyan); outline-offset: 3px; }
.cb-btn[disabled] { opacity: .45; pointer-events: none; }
.cb-btn--primary {
  border: 0; color: #050713; background: var(--cb-grad); box-shadow: var(--cb-glow);
  font-weight: 700;
}
.cb-btn--primary:hover { filter: brightness(1.08); box-shadow: var(--cb-glow), 0 0 40px -4px rgba(166, 107, 255, .6); }
.cb-btn--ghost { background: transparent; }
.cb-btn--big { min-height: 58px; padding: 0 2em; font-size: 19px; }
.cb-btn--block { display: flex; width: 100%; }
.cb-btn--reward::before { content: "🎬"; }

.cb-chip {
  display: inline-flex; align-items: center; gap: .5em; min-height: 36px; padding: 0 .9em 0 .4em;
  border-radius: 999px; border: 1px solid var(--cb-line-2); background: var(--cb-surface);
  backdrop-filter: var(--cb-blur); -webkit-backdrop-filter: var(--cb-blur);
  color: var(--cb-text); font: 500 14px/1 var(--cb-font); cursor: pointer; text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.cb-chip:hover { border-color: rgba(56, 232, 255, .5); box-shadow: 0 0 20px -8px var(--cb-cyan); }
.cb-chip__ico { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(56, 232, 255, .12); color: var(--cb-cyan); }
.cb-chip__dot { width: 8px; height: 8px; margin-left: .4em; border-radius: 50%; background: var(--cb-ok); box-shadow: 0 0 10px var(--cb-ok); }
.cb-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cb-grad); color: #050713; font-weight: 800; font-size: 13px; }

.cb-muted { color: var(--cb-muted); }
.cb-small { font-size: 13px; }
.cb-title { font-family: var(--cb-font-display); letter-spacing: -.02em; }
.cb-grad-text { background: var(--cb-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* botón «← Juegos» */
.cb-home {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 8px; border-radius: 999px;
  background: var(--cb-surface); border: 1px solid var(--cb-line-2); color: var(--cb-text); text-decoration: none;
  backdrop-filter: var(--cb-blur); -webkit-backdrop-filter: var(--cb-blur); font: 600 14px/1 var(--cb-font);
  transition: border-color .2s, box-shadow .2s;
}
.cb-home:hover { border-color: rgba(56, 232, 255, .55); box-shadow: 0 0 20px -6px var(--cb-cyan); }
.cb-home--float { position: fixed; z-index: 2147482000; top: max(10px, env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); }
.cb-logo { width: 24px; height: 24px; flex: none; }

/* avisos */
.cb-toasts { position: fixed; z-index: 2147483000; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.cb-toast {
  padding: 12px 16px; border-radius: 14px; background: rgba(12, 16, 32, .88); border: 1px solid var(--cb-line-2);
  backdrop-filter: var(--cb-blur); -webkit-backdrop-filter: var(--cb-blur); color: var(--cb-text);
  font: 500 15px/1.35 var(--cb-font); text-align: center; box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .8), 0 0 24px -12px var(--cb-cyan);
  opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .25s var(--cb-ease), transform .25s var(--cb-ease);
}
.cb-toast--in { opacity: 1; transform: none; }

/* ventanas */
.cb-modal {
  position: fixed; inset: 0; z-index: 2147482500; display: grid; place-items: center; padding: 16px;
  background: rgba(3, 4, 10, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .22s var(--cb-ease); font-family: var(--cb-font); color: var(--cb-text);
}
.cb-modal--in { opacity: 1; }
.cb-modal__card { position: relative; width: min(100%, 400px); padding: 32px 26px 22px; text-align: center; transform: translateY(14px) scale(.98); transition: transform .3s var(--cb-ease); overflow: hidden; }
.cb-modal__card::before { content: ""; position: absolute; inset: -40% -20% auto; height: 60%; background: radial-gradient(closest-side, rgba(166, 107, 255, .28), transparent); pointer-events: none; }
.cb-modal--in .cb-modal__card { transform: none; }
.cb-modal__card h2 { position: relative; margin: 12px 0 8px; font: 700 24px/1.15 var(--cb-font-display); letter-spacing: -.02em; }
.cb-modal__card p { position: relative; margin: 0 0 18px; line-height: 1.5; }
.cb-modal__logo .cb-logo { width: 46px; height: 46px; filter: drop-shadow(0 0 14px rgba(56, 232, 255, .5)); }
.cb-modal__x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--cb-muted); font-size: 26px; line-height: 1; cursor: pointer; }
.cb-modal__x:hover { color: var(--cb-text); background: rgba(255, 255, 255, .06); }
.cb-gbtn { position: relative; display: flex; justify-content: center; min-height: 44px; margin: 0 0 14px; }
.cb-modal__err { color: var(--cb-danger); font-size: 14px; }
.cb-modal__family { position: relative; display: inline-block; margin: 2px 0 14px; color: var(--cb-muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.cb-modal__family:hover { color: var(--cb-cyan); }
.cb-modal__fine { font-size: 12px !important; color: var(--cb-muted); margin: 6px 0 0 !important; }
.cb-modal__fine a { color: var(--cb-muted); }
.cb-spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--cb-line-2); border-top-color: var(--cb-cyan); animation: cb-spin .8s linear infinite; }
@keyframes cb-spin { to { transform: rotate(360deg); } }

/* anuncio simulado (modo de prueba) */
.cb-adsim { position: fixed; inset: 0; z-index: 2147483100; display: grid; place-items: center; background: #000c; font-family: var(--cb-font); color: var(--cb-text); }
.cb-adsim__box { display: grid; gap: 14px; justify-items: center; padding: 28px 34px; border-radius: var(--cb-radius); background: var(--cb-surface-2); border: 1px dashed var(--cb-line-2); }
.cb-adsim__tag { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--cb-warn); }
.cb-adsim__n { font: 700 54px/1 var(--cb-font-display); }
.cb-adsim__bar { width: 220px; height: 6px; border-radius: 3px; background: var(--cb-line); overflow: hidden; }
.cb-adsim__bar i { display: block; height: 100%; background: var(--cb-grad); animation: cb-adbar 3s linear forwards; }
@keyframes cb-adbar { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .cb-btn, .cb-toast, .cb-modal, .cb-modal__card { transition: none; }
}