/* Portada de Coder's Brand Games — usa las variables de /_sdk/cb.css */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0; min-height: 100vh; background: var(--cb-bg); color: var(--cb-text);
  font: 400 16px/1.55 var(--cb-font); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- fondo ---------- */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bg::before, .bg::after {
  content: ""; position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(80px); opacity: .32;
  animation: drift 38s ease-in-out infinite alternate; will-change: transform;
}
.bg::before { background: radial-gradient(closest-side, #1fb6ff, transparent); top: -35vmax; left: -20vmax; }
.bg::after { background: radial-gradient(closest-side, #7b3dff, transparent); top: -10vmax; right: -35vmax; animation-delay: -12s; }
.bg__grid {
  position: absolute; left: -50%; right: -50%; bottom: -10vh; height: 70vh; transform: perspective(600px) rotateX(62deg); transform-origin: 50% 100%;
  background-image: linear-gradient(rgba(56, 232, 255, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(166, 107, 255, .14) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: linear-gradient(to top, #000 0%, transparent 85%); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  animation: gridmove 6s linear infinite; opacity: .55;
}
@keyframes drift { to { transform: translate3d(8vmax, 6vmax, 0) scale(1.1); } }
@keyframes gridmove { to { background-position: 0 64px, 0 0; } }

/* ---------- cabecera ---------- */
.top { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); background: rgba(5, 6, 11, .55); border-bottom: 1px solid var(--cb-line); }
.top .wrap { display: flex; align-items: center; gap: 12px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand .cb-logo { width: 30px; height: 30px; filter: drop-shadow(0 0 10px rgba(56, 232, 255, .45)); }
.brand b { font: 700 18px/1 var(--cb-font-display); letter-spacing: -.01em; }
.brand small { display: block; font: 600 10px/1 var(--cb-font); letter-spacing: .32em; color: var(--cb-cyan); margin-top: 3px; }
.livepill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cb-line); font-size: 13px; color: var(--cb-muted); white-space: nowrap; }
.livepill b { color: var(--cb-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cb-ok); box-shadow: 0 0 0 0 rgba(60, 242, 160, .6); animation: pulse 2s infinite; flex: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(60, 242, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(60, 242, 160, 0); } }
.lang { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--cb-line); }
.lang button { border: 0; background: transparent; color: var(--cb-muted); font: 600 12px/1 var(--cb-font); letter-spacing: .06em; padding: 7px 10px; border-radius: 999px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--cb-surface-2); color: var(--cb-text); box-shadow: 0 0 0 1px var(--cb-line-2) inset; }
@media (max-width: 640px) { .livepill { display: none; } .brand small { letter-spacing: .24em; } .cb-userchip span:last-child { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

/* ---------- hero ---------- */
.hero { padding: clamp(28px, 6vw, 72px) 0 clamp(36px, 6vw, 64px); }
.hero .wrap { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: 1fr 1.15fr; gap: 56px; } .hero__art { order: 2; } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--cb-cyan); font: 600 12px/1 var(--cb-font); letter-spacing: .22em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--cb-grad); border-radius: 2px; }
.hero h1 { margin: 0; font: 700 clamp(40px, 7.4vw, 82px)/.98 var(--cb-font-display); letter-spacing: -.035em; }
.hero h1 span { background: linear-gradient(120deg, #fff 10%, var(--cb-cyan) 55%, var(--cb-violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { margin: 18px 0 26px; max-width: 34em; color: #c3cbe6; font-size: clamp(16px, 2.1vw, 19px); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(150, 175, 255, .08); border: 1px solid var(--cb-line); color: #b9c2e2; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.tag--live { color: var(--cb-ok); border-color: rgba(60, 242, 160, .3); background: rgba(60, 242, 160, .08); }
.tag--mp { color: var(--cb-cyan); border-color: rgba(56, 232, 255, .3); }
.hero__art { position: relative; display: block; border-radius: 24px; text-decoration: none; transform: perspective(1200px) rotateY(-6deg) rotateX(2deg); transition: transform .6s var(--cb-ease); }
.hero__art:hover { transform: perspective(1200px) rotateY(0) rotateX(0) translateY(-4px); }
@media (max-width: 899px) { .hero__art { transform: none; } }
.hero__art::before { content: ""; position: absolute; inset: -1px; border-radius: 25px; padding: 1px; background: linear-gradient(135deg, rgba(56, 232, 255, .9), rgba(166, 107, 255, .2) 40%, rgba(166, 107, 255, .9)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 2; pointer-events: none; }
.hero__art::after { content: ""; position: absolute; inset: 8% 6% -8%; z-index: -1; background: var(--cb-grad); filter: blur(60px); opacity: .35; border-radius: 50%; }
.hero__art .cover { border-radius: 24px; }
.hero__play { position: absolute; z-index: 3; right: 18px; bottom: 18px; }

/* portada de cada juego (imagen o respaldo) */
.cover { position: relative; aspect-ratio: 1200 / 630; overflow: hidden; background: #0b0f20; isolation: isolate; }
.cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--cb-ease), opacity .4s; }
.cover img.cargando { opacity: 0; }
.cover--fallback { background:
  radial-gradient(120% 90% at 85% 10%, color-mix(in srgb, var(--c, #38e8ff) 55%, transparent), transparent 60%),
  radial-gradient(90% 80% at 0% 100%, rgba(166, 107, 255, .45), transparent 60%),
  linear-gradient(160deg, #0d1228, #070912); }
.cover--fallback::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(circle at 70% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(circle at 70% 30%, #000, transparent 75%); }
.cover__name { position: absolute; left: 6%; bottom: 10%; right: 6%; font: 700 clamp(22px, 4vw, 40px)/1 var(--cb-font-display); letter-spacing: -.03em; color: #fff; text-shadow: 0 0 30px color-mix(in srgb, var(--c, #38e8ff) 70%, transparent); }
.cover__mono { position: absolute; right: -2%; top: -14%; font: 700 clamp(120px, 22vw, 240px)/1 var(--cb-font-display); color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--c, #38e8ff) 50%, transparent); opacity: .5; }

/* ---------- ventajas ---------- */
.perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 clamp(40px, 6vw, 64px); }
.perk { display: flex; gap: 12px; align-items: center; padding: 14px 16px; }
.perk i { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: rgba(56, 232, 255, .1); color: var(--cb-cyan); font-style: normal; font-size: 18px; }
.perk b { display: block; font-weight: 600; font-size: 15px; }
.perk span { color: var(--cb-muted); font-size: 13px; }
@media (max-width: 720px) { .perks { grid-template-columns: 1fr; } .perk { padding: 10px 14px; } }

/* ---------- secciones ---------- */
.sec { margin: 0 0 clamp(48px, 7vw, 80px); }
.sec__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.sec h2 { margin: 0; font: 700 clamp(26px, 3.6vw, 36px)/1.1 var(--cb-font-display); letter-spacing: -.025em; }
.sec h2 + p { margin: 6px 0 0; color: var(--cb-muted); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cb-line); background: transparent; color: var(--cb-muted); font: 500 14px/1 var(--cb-font); cursor: pointer; transition: all .2s; }
.filters button:hover { color: var(--cb-text); border-color: var(--cb-line-2); }
.filters button[aria-pressed="true"] { color: #050713; background: var(--cb-text); border-color: transparent; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.card { position: relative; display: flex; flex-direction: column; text-decoration: none; border-radius: var(--cb-radius); overflow: hidden; transition: transform .35s var(--cb-ease), box-shadow .35s var(--cb-ease), border-color .3s; content-visibility: auto; contain-intrinsic-size: 300px 330px; }
.card:hover, .card:focus-visible { transform: translateY(-6px); border-color: rgba(56, 232, 255, .45); box-shadow: 0 24px 60px -22px rgba(56, 232, 255, .45), 0 18px 50px -30px rgba(166, 107, 255, .8); outline: none; }
.card:hover .cover img { transform: scale(1.05); }
.card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.card h3 { margin: 0; font: 700 20px/1.2 var(--cb-font-display); letter-spacing: -.015em; }
.card p { margin: 0; color: var(--cb-muted); font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.card__live { position: absolute; z-index: 2; top: 12px; left: 12px; background: rgba(5, 6, 11, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.card__go { position: absolute; z-index: 2; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--cb-grad); color: #050713; font-size: 16px; opacity: 0; transform: scale(.8); transition: all .3s var(--cb-ease); box-shadow: var(--cb-glow); }
.card:hover .card__go, .card:focus-visible .card__go { opacity: 1; transform: none; }
@media (hover: none) { .card__go { opacity: 1; transform: none; } }
.card--soon { border-style: dashed; pointer-events: none; }
.card--soon .cover { filter: saturate(.6); }
.card--soon .card__go { display: none; }
.badge-soon { position: absolute; z-index: 2; top: 12px; left: 12px; }

/* ---------- anuncio ---------- */
.ad { margin: 0 auto clamp(48px, 7vw, 80px); text-align: center; }
.ad__label { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #5b6488; margin-bottom: 6px; }
.ad ins { display: block; min-height: 100px; }

/* ---------- clasificaciones ---------- */
.boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.board { padding: 18px; }
.board header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.board h3 { margin: 0; font: 600 17px/1.2 var(--cb-font-display); }
.board h3 small { display: block; color: var(--cb-muted); font: 400 13px/1.3 var(--cb-font); margin-top: 2px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .25); border: 1px solid var(--cb-line); }
.seg button { border: 0; background: transparent; color: var(--cb-muted); font: 500 12px/1 var(--cb-font); padding: 6px 9px; border-radius: 999px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--cb-surface-2); color: var(--cb-text); }
.board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: r; }
.board li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14.5px; }
.board li:nth-child(odd) { background: rgba(150, 175, 255, .04); }
.board li.me { background: rgba(56, 232, 255, .1); box-shadow: 0 0 0 1px rgba(56, 232, 255, .3) inset; }
.board .rk { font: 700 14px/1 var(--cb-font-display); color: var(--cb-muted); text-align: center; }
.board li:nth-child(1) .rk { color: #ffd65a; } .board li:nth-child(2) .rk { color: #d6e0ff; } .board li:nth-child(3) .rk { color: #ffa86b; }
.board .val { font: 600 14px/1 var(--cb-font-display); font-variant-numeric: tabular-nums; }
.board .empty { color: var(--cb-muted); font-size: 14px; padding: 18px 4px; text-align: center; }

/* ---------- guardar progreso ---------- */
.saveband { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; padding: clamp(22px, 4vw, 34px); overflow: hidden; }
.saveband::before { content: ""; position: absolute; inset: -60% -10% auto 40%; height: 200%; background: radial-gradient(closest-side, rgba(166, 107, 255, .3), transparent); pointer-events: none; }
.saveband h2 { font-size: clamp(22px, 3vw, 30px) !important; }
.saveband p { margin: 6px 0 0; color: var(--cb-muted); max-width: 40em; }
@media (max-width: 640px) { .saveband { grid-template-columns: 1fr; } }

/* ---------- pie ---------- */
.foot { border-top: 1px solid var(--cb-line); padding: 28px 0 40px; color: var(--cb-muted); font-size: 14px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot a, .foot button.linklike { color: var(--cb-muted); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
.foot a:hover, .foot button.linklike:hover { color: var(--cb-text); }

/* ---------- páginas legales ---------- */
.doc { padding: clamp(28px, 5vw, 56px) 0 64px; }
.doc article { max-width: 780px; margin: 0 auto; padding: clamp(22px, 4vw, 44px); }
.doc h1 { margin: 0 0 6px; font: 700 clamp(30px, 5vw, 44px)/1.05 var(--cb-font-display); letter-spacing: -.03em; }
.doc .upd { color: var(--cb-muted); font-size: 14px; margin: 0 0 28px; }
.doc h2 { margin: 30px 0 10px; font: 600 21px/1.25 var(--cb-font-display); }
.doc p, .doc li { color: #c9d0ea; }
.doc a { color: var(--cb-cyan); }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 10px 0; }
.doc th, .doc td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--cb-line); vertical-align: top; }
.doc th { color: var(--cb-text); font-weight: 600; }
.doc .tablewrap { overflow-x: auto; }
.pendiente { background: rgba(255, 201, 74, .15); color: var(--cb-warn); padding: 0 4px; border-radius: 4px; }

/* aparición suave */
.rise { animation: rise .7s var(--cb-ease) both; }
.rise-2 { animation-delay: .08s; } .rise-3 { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}