/* Antes de tocar este archivo: no dupliques un selector que ya existe (busca primero con
   grep/Ctrl+F), reutiliza las variables de --root en vez de escribir un hex nuevo, y si
   añades un @media agrúpalo junto al componente al que afecta en vez de al final del archivo.

   Identidad de marca: verde neón sobre fondo muy oscuro (ver variables --np-* de abajo).
   El morado anterior se ha sustituido por completo — si ves un hex morado nuevo en un PR,
   es un despiste, no una decisión de diseño. Usa --np-green para CTAs/acentos principales,
   --np-green-bright solo para los momentos más destacados (glow, hover intenso) y
   --np-green-soft para detalles secundarios/degradados, para que no quede todo plano. */
:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--np-bg);
  color: var(--np-text);

  --np-green: #20F6A5;
  --np-green-bright: #39FBB1;
  --np-green-soft: #58F39F;

  --np-green-rgb: 32, 246, 165;
  --np-green-bg: rgba(var(--np-green-rgb), .08);
  --np-green-border: rgba(var(--np-green-rgb), .35);
  --np-green-glow: rgba(var(--np-green-rgb), .22);
  --np-on-green: #02110B;
  --np-btn-gradient: linear-gradient(100deg, #1CF5AA 0%, #35F7A8 48%, #61F59E 100%);
  --np-btn-gradient-hover: linear-gradient(100deg, #2BFFB6 0%, #48FBB2 50%, #72F6A8 100%);
  --np-btn-border: rgba(80, 255, 183, .65);
  --np-green-dark: #0A2A22;
  --np-green-darker: #071A16;

  --np-bg: #050D10;
  --np-bg-top-bottom: #020608;
  --np-bg-center-glow: rgba(18, 58, 49, .28);
  --np-bg-2: #0B1513;
  --np-surface: #0F191C;

  /* Tarjetas: un degradado casi imperceptible (no el degradado marcado de antes, que
     desentonaba entre secciones) — misma superficie en todas partes en vez de cada
     componente con su propio tono. */
  --np-card: linear-gradient(145deg, rgba(17, 31, 32, .96), rgba(10, 21, 23, .96));
  --np-card-hover: linear-gradient(145deg, rgba(20, 37, 36, .98), rgba(12, 25, 26, .98));
  --np-card-dark: #0C1618;
  --panel-border: rgba(89, 164, 137, .20);
  --panel-border-strong: rgba(66, 210, 154, .30);

  --np-text: #F4F7F6;
  --np-text-muted: #A2B0AD;
  --np-text-dim: #758581;

  /* Alias de los tokens que ya usaba el resto del CSS, para que todo lo que ya escribía
     var(--focus-ring)/var(--border-subtle)/var(--text-muted) herede la identidad nueva sin
     tocar cada regla una a una. (Antes estaban definidos de forma circular —
     "--focus-ring: var(--focus-ring)"— así que en la práctica no aplicaban ningún color.) */
  --focus-ring: var(--np-green);
  --border-subtle: rgba(255, 255, 255, .07);
  --text-muted: var(--np-text-muted);
}

/* Aspecto elegido en el pie de página (palette.js pone data-palette en <html>). «Neón» es la identidad de marca y no necesita bloque: son los valores de :root.
   Solo cambia el color de acento y el contraste; los colores con significado (peligro, avisos, estados) y el arte no se tocan. */
:root[data-palette='soft'] {
  --np-green: #4DD6A0;
  --np-green-bright: #66E0B0;
  --np-green-soft: #78DDB4;
  --np-green-rgb: 77, 214, 160;
  --np-green-border: rgba(77, 214, 160, .32);
  --np-green-glow: rgba(77, 214, 160, .14);
  --np-btn-gradient: linear-gradient(100deg, #45C795 0%, #4DD6A0 50%, #6BDCAE 100%);
  --np-btn-gradient-hover: linear-gradient(100deg, #55D6A4 0%, #5FE0AC 50%, #7DE3B8 100%);
  --np-btn-border: rgba(120, 221, 180, .55);
}
:root[data-palette='contrast'] {
  --np-green: #3DFFB8;
  --np-green-bright: #7BFFD0;
  --np-green-soft: #8CFFD6;
  --np-green-rgb: 61, 255, 184;
  --np-green-border: rgba(61, 255, 184, .75);
  --np-green-glow: rgba(61, 255, 184, .10);
  --np-btn-gradient: linear-gradient(100deg, #3DFFB8 0%, #3DFFB8 100%);
  --np-btn-gradient-hover: linear-gradient(100deg, #7BFFD0 0%, #7BFFD0 100%);
  --np-btn-border: #FFFFFF;
  --np-on-green: #000000;
  --np-bg: #000000;
  --np-bg-top-bottom: #000000;
  --np-bg-center-glow: rgba(0, 0, 0, 0);
  --np-text: #FFFFFF;
  --np-text-muted: #DCE6E3;
  --np-text-dim: #BFCDC9;
  --panel-border: rgba(170, 235, 210, .6);
  --panel-border-strong: rgba(170, 235, 210, .85);
  --border-subtle: rgba(255, 255, 255, .35);
  --focus-ring: #FFFFFF;
}

* { box-sizing: border-box; }

::-webkit-scrollbar { background: #061012; width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: #1A3C34; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background: #23614F; }

body { margin: 0; min-width: 320px; overflow-x: clip; background: var(--np-bg); color: var(--np-text); }

.brand { color: #fff; font-size: 1.45rem; font-weight: 800; letter-spacing: -.06em; text-decoration: none; }
.brand-text span { color: var(--np-green); }
nav { display: flex; gap: 1.5rem; }
nav a { color: var(--np-text-muted); font-size: .92rem; text-decoration: none; }
nav a:hover { color: #fff; }
.account-nav { align-items: center; display: flex; gap: .7rem; }
.account-nav a:not(.account-action) { color: #dee8e4; font-size: .82rem; font-weight: 650; text-decoration: none; }
.account-nav a:not(.account-action):hover { color: var(--np-green-soft); }
.account-email { color: #cfd8d5; font-size: .82rem; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-button { background: transparent; border: 0; color: var(--np-text-muted); cursor: pointer; font: inherit; font-size: .92rem; padding: 0; }
.nav-button:hover { color: #fff; }

main { margin: 0 auto; max-width: 1160px; padding: 0 2rem 4rem; }
.hero { max-width: 760px; padding: 6.5rem 0 8rem; }
.eyebrow { color: var(--np-green-soft); font-size: .74rem; font-weight: 800; letter-spacing: .14em; margin: 0 0 .8rem; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(2.8rem, 7vw, 5.7rem); letter-spacing: -.07em; line-height: .95; margin-bottom: 1.5rem; }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); letter-spacing: -.045em; margin-bottom: .35rem; }
.hero-copy { color: #c2ccc9; font-size: 1.16rem; line-height: 1.65; max-width: 570px; }
.primary-button { background: var(--np-btn-gradient); border: 1px solid var(--np-btn-border); border-radius: 999px; box-shadow: 0 0 14px rgba(var(--np-green-rgb), .16), inset 0 1px 0 rgba(255, 255, 255, .3); color: var(--np-on-green); display: inline-block; font-weight: 750; margin-top: 1.1rem; padding: .85rem 1.25rem; text-decoration: none; transition: box-shadow .18s ease, filter .18s ease, transform .18s ease; }
.primary-button:hover, .primary-button:focus-visible { background: var(--np-btn-gradient-hover); box-shadow: 0 0 20px rgba(var(--np-green-rgb), .28), inset 0 1px 0 rgba(255, 255, 255, .35); transform: translateY(-1px); }

.catalog { border-top: 1px solid var(--border-subtle); padding-top: 4rem; }
.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 1.75rem; }
.game-count { color: var(--np-text-muted); font-size: .86rem; }
.game-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.game-card { background: var(--np-card); border: 1px solid var(--panel-border); border-radius: 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .025); min-height: 250px; overflow: hidden; padding: 1.4rem; position: relative; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.card-link { color: inherit; display: block; text-decoration: none; }
.card-link:hover .game-card { background: var(--np-card-hover); border-color: rgba(57, 251, 177, .25); transform: translateY(-3px); }
.game-card::before { background: linear-gradient(135deg, var(--np-green) 0%, var(--np-green-soft) 100%); content: ""; height: 6px; left: 0; position: absolute; right: 0; top: 0; }
.game-cover { border-radius: .65rem; display: block; height: 128px; object-fit: cover; width: 100%; }
.game-cover-placeholder { background: linear-gradient(135deg, var(--np-green-dark) 0%, var(--np-surface) 100%); }
.game-card h3 { font-size: 1.32rem; letter-spacing: -.03em; margin: 1.25rem 0 .55rem; }
.game-card p { color: #b6c2be; line-height: 1.55; }
.game-meta { align-items: center; color: var(--text-muted); display: flex; font-size: .83rem; gap: .55rem; margin-top: 1.5rem; }
.access-type { background: rgba(0, 245, 155, .12); border: 1px solid var(--np-green-border); border-radius: 999px; color: var(--np-green-soft); font-size: .72rem; font-weight: 800; letter-spacing: .05em; padding: .3rem .55rem; }
.card-genres { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.card-genres span { color: #8d9995; font-size: .76rem; }
.empty-state { border: 1px dashed #3a4441; border-radius: 1rem; color: var(--text-muted); padding: 2rem; }

.developer-banner { background: linear-gradient(115deg, var(--np-bg-2), var(--np-surface)); border: 1px solid var(--border-subtle); border-radius: 1.25rem; margin-top: 4rem; padding: 2.5rem; }
.developer-banner p:not(.eyebrow) { color: #c4d0cc; line-height: 1.6; max-width: 600px; }
.developer-banner .primary-button { margin-top: 1.2rem; }

.game-page { max-width: 860px; padding-top: 4rem; }
.loading-state, .availability-note { color: var(--text-muted); }
.game-detail-intro { border-bottom: 1px solid var(--border-subtle); padding: 2.5rem 0 3rem; }
.game-detail-intro h1 { font-size: clamp(3rem, 8vw, 6.2rem); }
.game-detail-summary { color: #c9d5d1; font-size: 1.25rem; line-height: 1.65; max-width: 700px; }
.game-detail-cover { border: 1px solid var(--border-subtle); border-radius: 1rem; display: block; margin-top: 2rem; max-height: 400px; object-fit: cover; width: 100%; }
.game-detail-info { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; padding: 1.5rem 0; }
.developer-credit { color: #bcd8cd; margin: 0; }
.developer-profile-link { color: var(--np-green-soft); font-weight: 800; text-decoration: none; }
.developer-profile-link:hover, .developer-profile-link:focus-visible { color: var(--np-green-bright); text-decoration: underline; }
.genre-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.genre-list span { background: var(--np-green-dark); border-radius: 999px; color: var(--np-green-soft); font-size: .82rem; padding: .33rem .62rem; }
.game-detail-content { max-width: 700px; padding: 2.5rem 0 4rem; }
.game-detail-content p:not(.eyebrow) { color: #c1cdc8; line-height: 1.7; }

.auth-page { align-items: center; display: flex; justify-content: center; min-height: calc(100vh - 100px); padding-bottom: 5rem; padding-top: 3rem; }
.auth-card { background: rgba(16, 28, 25, .92); border: 1px solid var(--border-subtle); border-radius: 1.25rem; box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .22); max-width: 500px; padding: 2.4rem; width: 100%; }
.auth-card h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
.auth-intro { color: #c2ccc9; line-height: 1.6; }
.auth-form { display: grid; gap: 1rem; margin-top: 2rem; }
.auth-form label { color: #dbe5e2; display: grid; font-size: .9rem; font-weight: 650; gap: .45rem; }
.auth-form input { background: #0b1513; border: 1px solid #2c3835; border-radius: .65rem; color: var(--np-text); font: inherit; padding: .8rem .9rem; width: 100%; }
.auth-form input:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--np-green-bg); outline: 0; }
.auth-form .primary-button { border: 0; cursor: pointer; font: inherit; justify-self: start; }
.auth-form .primary-button:disabled { cursor: wait; opacity: .65; }
.field-hint { color: #8b968f; font-size: .8rem; margin: -.45rem 0 0; }
.auth-message { color: #ffb7cb; min-height: 1.3rem; margin: 0; }
.auth-alternate { color: #b6c2bd; margin: 1.75rem 0 0; }
.auth-alternate a { color: var(--np-green-soft); }

/* Portada pública: base visual sin arte externo ni portadas ficticias. */
nav { align-items: center; gap: 1.35rem; }
.catalog-search { align-items: center; background: #0d1614; border: 1px solid #1c2724; border-radius: .5rem; color: #8b968f; display: flex; gap: .55rem; margin-left: 1.25rem; padding: .63rem .8rem; width: 300px; }
.catalog-search span { font-size: 1.15rem; line-height: .8; }
.catalog-search input { background: transparent; border: 0; color: var(--np-text); font: inherit; font-size: .84rem; outline: 0; width: 190px; }
.catalog-search input::placeholder { color: #6f7a75; }
.home-hero { align-items: stretch; border-bottom: 1px solid #1a2422; display: grid; grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr); min-height: 465px; overflow: hidden; }
.hero-copy-wrap { align-self: center; max-width: 640px; padding: 5.5rem 2rem 5rem 0; position: relative; z-index: 1; }
.hero-kicker { background: var(--np-green-dark); border: 1px solid var(--np-green-border); border-radius: 999px; color: var(--np-green-soft); display: inline-block; font-size: .68rem; font-weight: 750; letter-spacing: .04em; padding: .55rem .8rem; }
.home-hero h1 { font-size: clamp(3.2rem, 5.6vw, 5.8rem); margin: 1.35rem 0; }
.home-hero h1 span { color: var(--np-green); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem; }
.primary-button span { font-size: 1.2rem; margin-left: .35rem; }
.secondary-button { background: linear-gradient(180deg, #142023, #10191C); border: 1px solid rgba(127, 164, 154, .32); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); color: #f2f5f4; display: inline-block; font-weight: 700; padding: .82rem 1.25rem; text-decoration: none; transition: background .18s ease, border-color .18s ease; }
.secondary-button:hover, .secondary-button:focus-visible { background: #182725; border-color: rgba(49, 240, 168, .4); }
.hero-art-space { background: radial-gradient(circle at 52% 45%, rgba(0, 245, 155, .18), transparent 22%), linear-gradient(135deg, #0d1a17, #0b100f 55%, #0f1c19); border-left: 1px solid #1c2724; min-height: 440px; overflow: hidden; position: relative; }
.hero-art-space::after { background: linear-gradient(90deg, #07100f, transparent 28%, transparent 75%, #07100f); content: ''; inset: 0; pointer-events: none; position: absolute; }
.hero-art-space p { bottom: 1.7rem; color: #a8b6b1; font-size: .8rem; left: 2rem; letter-spacing: .08em; margin: 0; position: absolute; text-transform: uppercase; z-index: 2; }
.art-grid { background-image: linear-gradient(rgba(0, 245, 155, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 245, 155, .12) 1px, transparent 1px); background-size: 34px 34px; inset: 0; opacity: .45; position: absolute; transform: perspective(430px) rotateX(56deg) scale(1.6) translateY(25%); }
.art-orbit { border: 1px solid rgba(0, 245, 155, .3); border-radius: 50%; position: absolute; }
.orbit-one { height: 340px; left: 18%; top: 8%; width: 340px; }
.orbit-two { border-color: rgba(50, 230, 161, .22); height: 510px; left: 1%; top: -13%; width: 510px; }
.value-row { border-bottom: 1px solid #1e2b28; display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); padding: 1.35rem 0; }
.value-row article { border-right: 1px solid #24332f; padding: .35rem 1.25rem; }
.value-row article:first-child { padding-left: 0; }
.value-row article:last-child { border: 0; }
.value-row strong { color: #e7f2ee; display: block; font-size: .9rem; }
.value-row span { color: #93a09b; font-size: .82rem; }
.catalog { padding-top: 3.8rem; }
.game-cover-placeholder { background: linear-gradient(135deg, #131e1b, #0e1614); border: 1px solid #263531; }

/* Composición de portada inspirada en la referencia, sin recursos gráficos externos. */
.home-main { max-width: 1400px; }
.home-main .home-hero { grid-template-columns: 42% 58%; min-height: 470px; }
.home-main .hero-copy-wrap { padding-left: .2rem; padding-right: 2.5rem; }
.home-main .hero-copy { font-size: 1rem; max-width: 520px; }
.home-main .hero-art-space { min-height: 470px; }
.hero-project-card { align-items: center; background: rgba(14, 25, 21, .94); border: 1px solid rgba(255, 255, 255, .08); border-radius: .7rem; bottom: 1.4rem; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3); display: grid; gap: .75rem; grid-template-columns: 78px 1fr auto; padding: .7rem; position: absolute; right: 1.4rem; width: min(420px, calc(100% - 2.8rem)); z-index: 3; }
.hero-project-cover { background: linear-gradient(135deg, #123328, #0e1a17); border: 1px solid #2c3a36; border-radius: .45rem; height: 64px; }
.hero-project-card span { color: #9aa8a3; display: block; font-size: .61rem; letter-spacing: .08em; margin-bottom: .25rem; }
.hero-project-card strong { display: block; font-size: .9rem; }
.hero-project-card small { color: #9ba7a2; display: block; font-size: .72rem; margin-top: .22rem; }
.hero-project-card a { background: var(--np-green); border-radius: .42rem; color: #03110D; font-size: .75rem; font-weight: 750; padding: .62rem .7rem; text-decoration: none; white-space: nowrap; }
.home-main .value-row { grid-template-columns: repeat(4, 1fr); }
.home-main .value-row article { min-height: 52px; padding-left: 1.1rem; position: relative; }
.home-main .value-row article::before { background: var(--np-green); border-radius: 50%; box-shadow: 0 0 0 4px var(--np-green-bg); content: ''; height: 7px; left: 0; position: absolute; top: .52rem; width: 7px; }
.home-main .catalog { border: 0; padding-top: 2.25rem; }
.home-main .game-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.home-main .game-card { border-radius: .6rem; min-height: 210px; padding: .8rem; }
.home-main .game-cover { border-radius: .38rem; height: 116px; }
.home-main .game-card::before { display: none; }
.home-main .game-card h3 { font-size: .93rem; margin: .8rem 0 .35rem; }
.home-main .game-card p { font-size: .76rem; margin-bottom: .5rem; }
.home-main .game-meta { font-size: .7rem; margin-top: .55rem; }
.home-main .access-type { font-size: .6rem; padding: .22rem .38rem; }
.project-slot { border-color: var(--np-green-border); border-style: dashed; display: grid; opacity: .82; transition: border-color .18s ease, opacity .18s ease; }
.project-slot:hover { border-color: var(--np-green); opacity: 1; }
.project-slot::before { opacity: .45; }
.project-slot p { align-self: center; color: #83908c; font-size: .78rem; text-align: center; }
.project-slot .game-cover-placeholder { align-items: center; background: linear-gradient(135deg, var(--np-green-darker) 0%, #0d1614 100%); display: flex; justify-content: center; position: relative; }
.project-slot .game-cover-placeholder::after { color: var(--np-green-border); content: '+'; font-size: 2rem; font-weight: 300; line-height: 1; }
.discovery-bottom { display: grid; gap: 2.5rem; grid-template-columns: 1.45fr .85fr; margin-top: 3.25rem; }
.discovery-bottom h2 { font-size: 1.7rem; }
.category-slots { display: grid; gap: .6rem; grid-template-columns: repeat(6, 1fr); margin-top: 1.35rem; }
[id^="genero-"] { scroll-margin-top: 5rem; }
.category-slots a {
  text-decoration: none;
  align-content: center;
  aspect-ratio: 1 / 1;
  background: #101a18;
  border: 1px solid #24322f;
  border-radius: .75rem;
  color: #c2d0cc;
  display: grid;
  font-size: .74rem;
  font-weight: 700;
  gap: .6rem;
  justify-items: center;
  padding: .85rem .5rem;
  text-align: center;
  transition: border-color .18s ease, transform .18s ease;
}
.category-slots a:hover { border-color: var(--np-green-border); transform: translateY(-2px); }
.category-slots a::before {
  align-items: center;
  background: var(--np-green-dark);
  border: 1px solid var(--np-green-border);
  border-radius: 50%;
  color: var(--np-green-soft);
  display: flex;
  font-size: 1.1rem;
  height: 2.4rem;
  justify-content: center;
  width: 2.4rem;
}
/* El icono va con el género (data-genre), no con la posición: la lista cambia según lo que más se mueve. */
.category-slots a[data-genre="action"]::before { content: '⚔'; }
.category-slots a[data-genre="adventure"]::before { content: '✦'; }
.category-slots a[data-genre="rpg"]::before { content: '♜'; }
.category-slots a[data-genre="strategy"]::before { content: '♟'; }
.category-slots a[data-genre="simulation"]::before { content: '⚙'; }
.category-slots a[data-genre="horror"]::before { content: '☠'; }
.category-slots a[data-genre="platformer"]::before { content: '⇧'; }
.category-slots a[data-genre="puzzle"]::before { content: '◈'; }
.category-slots a[data-genre="racing"]::before { content: '➤'; }
.category-slots a[data-genre="sports"]::before { content: '◎'; }
.category-slots a[data-genre="survival"]::before { content: '✚'; }
.category-slots a[data-genre="narrative"]::before { content: '✎'; }
.account-action { background: var(--np-btn-gradient); border-radius: .48rem; color: var(--np-on-green) !important; font-weight: 750; padding: .65rem .9rem; }

@media (max-width: 1050px) {
  .home-main .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .category-slots { grid-template-columns: repeat(3, 1fr); }
  .catalog-search { display: none; }
}

/* Header horizontal de densidad alta, inspirado en la referencia visual. */
.site-header .brand { flex: 0 0 auto; font-size: 1.32rem; gap: .48rem; }
.site-header .brand::before { font-size: 1.32rem; }
.site-header .primary-nav { align-items: center; display: flex; flex: 0 0 auto; gap: 2.2rem; justify-content: flex-start; }
.site-header .primary-nav > a { color: #e6ede9; font-size: .81rem; font-weight: 700; white-space: nowrap; }
.site-header .primary-nav > a:first-child { color: #e6ede9; }
.site-header .primary-nav > a:hover { color: var(--np-green); }
.nav-chevron { color: #a4b1ac; font-size: 1rem; padding-left: .25rem; }
.header-tools { align-items: center; display: flex; flex: 1 1 auto; gap: 1rem; justify-content: flex-end; min-width: 0; }
.site-header .catalog-search { margin-left: 0; width: min(27vw, 350px); }
.site-header .catalog-search input { flex: 1; min-width: 0; width: auto; }
.search-icon { font-size: 1.25rem !important; transform: translateY(-1px); }
.catalog-search kbd { background: #0f1a18; border: 1px solid #23312d; border-radius: .25rem; color: #93a19c; font-family: inherit; font-size: .61rem; padding: .18rem .3rem; white-space: nowrap; }
.publish-link { background: var(--np-btn-gradient); border-radius: .5rem; box-shadow: 0 0 18px var(--np-green-glow), inset 0 1px rgba(255, 255, 255, .25); color: #03110D; font-size: .78rem; font-weight: 750; padding: .77rem 1.18rem; text-decoration: none; transition: box-shadow .18s ease, filter .18s ease; white-space: nowrap; }
.publish-link:hover { box-shadow: 0 0 24px var(--np-green-glow), inset 0 1px rgba(255, 255, 255, .25); filter: brightness(1.06); }
.theme-symbol { color: #ebf3f0; font-size: 1.2rem; line-height: 1; padding: .25rem; }
.profile-menu, .notifications-menu { position: relative; }
.notification-toggle { align-items: center; color: #e7efec; cursor: pointer; display: flex; height: 34px; justify-content: center; list-style: none; position: relative; width: 31px; }
.notification-toggle::-webkit-details-marker { display: none; }
.notification-toggle:hover { color: var(--np-green-soft); }
.notification-toggle:focus-visible { border-radius: .4rem; outline: 2px solid var(--np-green); outline-offset: .12rem; }
.notification-bell-icon { height: 1.16rem; width: 1.16rem; }
.notification-unread-count { align-items: center; background: #ef4c72; border: 1px solid #07100f; border-radius: 999px; box-shadow: 0 0 .55rem rgba(239, 76, 114, .48); color: #fff; display: inline-flex; font-size: .54rem; font-weight: 900; height: .92rem; justify-content: center; min-width: .92rem; padding: 0 .15rem; position: absolute; right: .02rem; top: .08rem; }
.notification-unread-count[hidden] { display: none; }
.notifications-popover { background: rgba(11, 21, 19, .97); border: 1px solid #263531; border-radius: .75rem; box-shadow: 0 18px 42px rgba(0, 0, 0, .45); max-height: min(440px, calc(100vh - 6rem)); overflow: auto; padding: .72rem; position: absolute; right: -2rem; top: calc(100% + .65rem); width: min(370px, calc(100vw - 2rem)); z-index: 20; }
.notifications-popover h2 { color: #ebf5f1; font-size: .92rem; margin: .1rem .25rem .6rem; }
.notifications-list { display: grid; gap: .28rem; }
.notifications-empty { color: #96a29d; font-size: .76rem; margin: .35rem .15rem; }
.notification-item { align-items: flex-start; border-radius: .55rem; color: #c5d2ce; display: grid; gap: .6rem; grid-template-columns: .9rem minmax(0, 1fr); padding: .65rem .6rem; text-decoration: none; white-space: normal; }
.notification-item:hover { background: var(--np-green-bg); color: #f0fbf6; }
.notification-item.is-unread { background: rgba(0, 245, 155, .07); }
.notification-marker { color: var(--np-green); font-size: .8rem; line-height: 1.15rem; text-align: center; }
.notification-item.is-unread .notification-marker { color: var(--np-green-bright); text-shadow: 0 0 .5rem var(--np-green-glow); }
.notification-copy { display: grid; gap: .16rem; min-width: 0; }
.notification-copy strong { font-size: .82rem; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.notification-copy small { color: #929e99; font-size: .7rem; }
.notifications-actions { border-top: 1px solid rgba(154, 167, 163, .28); margin-top: .5rem; padding: .6rem .12rem .05rem; }
.notifications-actions button { background: transparent; border: 0; color: var(--np-green-soft); cursor: pointer; font: inherit; font-size: .8rem; font-weight: 800; padding: .25rem; }
.notifications-actions button:hover { color: var(--np-green-bright); text-decoration: underline; }
.notifications-actions button:disabled { cursor: wait; opacity: .65; }
.profile-avatar { align-items: center; background: linear-gradient(135deg, #d29a73, #2d4f43 58%, #12221e); border: 2px solid var(--np-green); border-radius: 50%; color: #fff; cursor: pointer; display: flex; font-size: .74rem; font-weight: 800; height: 34px; justify-content: center; list-style: none; width: 34px; }
.profile-avatar::-webkit-details-marker { display: none; }
.profile-avatar img { border-radius: inherit; display: block; height: 100%; object-fit: cover; width: 100%; }
.profile-avatar.is-default-avatar { background: transparent; border: 0; }
.profile-popover { background: #0b1512; border: 1px solid #263531; border-radius: .7rem; box-shadow: 0 18px 42px rgba(0, 0, 0, .45); display: grid; gap: .55rem; min-width: 205px; padding: .85rem; position: absolute; right: 0; top: calc(100% + .65rem); z-index: 10; }
.profile-popover strong { color: #e6f2ee; font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-popover .profile-popover-name { color: #e6f2ee; font-size: .75rem; font-weight: 800; overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: nowrap; }
.profile-popover .profile-popover-name:hover { color: var(--np-green-soft); text-decoration: underline; }
.profile-popover small { color: #93a09b; font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-popover a, .profile-popover button { background: transparent; border: 0; color: #bdcac6; cursor: pointer; font: inherit; font-size: .78rem; padding: .35rem 0; text-align: left; text-decoration: none; }
.profile-popover a:hover, .profile-popover button:hover { color: var(--np-green-soft); }
.visually-hidden { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (max-width: 1220px) {
  .site-header { gap: 1.65rem; }
  .site-header .primary-nav { gap: 1.15rem; }
  .site-header .catalog-search { width: 230px; }
}

@media (max-width: 900px) {
  .site-header { gap: 1rem; }
  .theme-symbol { display: none; }
  .site-header .primary-nav { gap: 1.3rem; }
  .site-header .catalog-search { display: none; }
}

@media (max-width: 700px) {
  .home-main .home-hero { grid-template-columns: 1fr; }
  .home-main .hero-copy-wrap { padding-right: 0; }
  .home-main .hero-art-space { min-height: 315px; }
  .home-main .value-row { grid-template-columns: 1fr 1fr; }
  .home-main .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .discovery-bottom { grid-template-columns: minmax(0, 1fr); }
  .hero-project-card { grid-template-columns: 55px 1fr; }
  .hero-project-card a { display: none; }
}

/* Ajuste de fidelidad: reproduce el ritmo, proporción y densidad de la referencia sin utilizar imágenes. */
body {
  background:
    linear-gradient(180deg, var(--np-bg-top-bottom) 0%, rgba(2, 8, 10, .5) 8%, transparent 20%),
    linear-gradient(180deg, var(--np-bg-top-bottom) 0%, #041013 22%, #071416 45%, #071416 60%, #041014 82%, var(--np-bg-top-bottom) 100%);
  background-attachment: fixed;
}
.brand { align-items: center; display: inline-flex; font-size: 1.48rem; gap: .55rem; letter-spacing: -.055em; }
.brand::before {
  background: linear-gradient(135deg, var(--np-green-bright) 0%, var(--np-green) 50%, var(--np-green-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  content: '∞';
  display: inline-block;
  filter: drop-shadow(0 0 6px var(--np-green-glow));
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
}
.site-header nav { flex: 1; justify-content: flex-end; }
.site-header nav > a { color: #dee8e4; font-size: .82rem; font-weight: 650; }
.site-header nav > a:first-child { color: var(--np-green-soft); }
.catalog-search input { width: 240px; }
.account-email { display: none; }
.nav-button { background: #0e1614; border: 1px solid #23302c; border-radius: .5rem; font-size: .75rem; padding: .58rem .7rem; }
.account-action { border-radius: .48rem; box-shadow: 0 0 18px var(--np-green-glow); font-size: .78rem; padding: .72rem 1rem; }
.home-main { padding-top: 0; }
.home-main .home-hero { background: transparent; border: 0; border-radius: 0; min-height: 472px; }
.home-main .hero-copy-wrap { align-self: stretch; background: linear-gradient(90deg, var(--np-bg) 0%, var(--np-bg) 78%, rgba(7, 16, 15, .72) 100%); display: flex; flex-direction: column; justify-content: center; padding-bottom: 4.7rem; padding-top: 3rem; }
.hero-kicker { background: var(--np-green-dark); border-color: var(--np-green-border); color: var(--np-green-soft); font-size: .69rem; letter-spacing: 0; padding: .52rem .8rem; width: fit-content; }
.home-main .home-hero h1 { font-size: clamp(2.9rem, 3.9vw, 4rem); line-height: 1.03; margin: 1.2rem 0 1rem; max-width: 535px; }
.home-main .home-hero h1 span { background: linear-gradient(90deg, var(--np-green-bright), var(--np-green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-main .hero-copy { color: #b6c3bf; font-size: 1.03rem; line-height: 1.65; max-width: 505px; }
.hero-actions { margin-top: 1.45rem; }
.home-main .primary-button { background: var(--np-btn-gradient); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 0 24px var(--np-green-glow); padding: .92rem 1.35rem; }
.secondary-button { padding: .9rem 1.3rem; }
.home-main .hero-art-space { background: radial-gradient(circle at 58% 34%, rgba(0, 245, 155, .22), transparent 25%), linear-gradient(135deg, #0c2119 0%, #123328 38%, #0e1a17 76%, #081211 100%); overflow: hidden; }
.hero-art-space::after { background: linear-gradient(90deg, var(--np-bg) 0%, rgba(7, 16, 15, .16) 18%, transparent 60%, rgba(8, 17, 16, .35) 100%); z-index: 2; }
.hero-art-space > p { bottom: auto; color: rgba(228, 245, 238, .6); font-size: .63rem; left: auto; letter-spacing: .14em; right: 1.5rem; top: 1.45rem; z-index: 3; }
.hero-aurora { border-radius: 50%; filter: blur(12px); opacity: .7; position: absolute; }
.aurora-one { background: radial-gradient(ellipse, rgba(210, 255, 240, .8), rgba(0, 245, 155, .32) 39%, transparent 70%); height: 330px; right: 10%; top: -42px; width: 460px; }
.aurora-two { background: radial-gradient(ellipse, rgba(50, 230, 161, .5), transparent 68%); bottom: -80px; height: 300px; left: 14%; width: 410px; }
.hero-stars { background-image: radial-gradient(#e8fff2 1px, transparent 1.5px), radial-gradient(#c7ffe4 .7px, transparent 1px); background-position: 0 0, 43px 56px; background-size: 98px 98px, 136px 136px; inset: 0; opacity: .46; position: absolute; }
.mountain-range { bottom: -8px; position: absolute; transform-origin: bottom; width: 120%; }
.mountains-back { background: linear-gradient(155deg, transparent 0 23%, rgba(29, 66, 55, .82) 23.3% 39%, transparent 39.3%), linear-gradient(25deg, transparent 0 38%, rgba(24, 58, 48, .84) 38.3% 58%, transparent 58.3%), linear-gradient(148deg, transparent 0 55%, rgba(18, 46, 39, .96) 55.3% 74%, transparent 74.3%); height: 255px; left: -11%; opacity: .9; }
.mountains-front { background: linear-gradient(158deg, transparent 0 18%, rgba(8, 20, 17, .94) 18.5% 43%, transparent 43.5%), linear-gradient(23deg, transparent 0 39%, rgba(7, 17, 15, .98) 39.5% 61%, transparent 61.5%), linear-gradient(151deg, transparent 0 56%, rgba(6, 15, 13, .98) 56.5% 78%, transparent 78.5%); height: 185px; left: 1%; }
.hero-project-card { background: rgba(9, 18, 16, .92); border-color: var(--np-green-border); border-radius: .55rem; bottom: 1.25rem; box-shadow: 0 16px 34px rgba(0, 0, 0, .4); right: 1.25rem; }
.hero-project-cover { background: linear-gradient(145deg, #123328, #0e1a17 58%, #0a2a22); border-color: rgba(0, 245, 155, .2); }
.hero-project-card a { background: var(--np-btn-gradient); box-shadow: 0 0 16px var(--np-green-glow); color: #03110D; }
.home-main .value-row { background: var(--np-bg); gap: 0; padding: 1.25rem 0; }
.home-main .value-row article { border-color: #1a2521; padding-bottom: .4rem; padding-top: .4rem; }
.home-main .value-row strong { font-size: .82rem; }
.home-main .value-row span { display: block; margin-top: .22rem; }
.home-main .catalog { padding-top: 2.7rem; }
.section-heading h2 { font-size: 1.35rem; }
.home-main .game-grid { gap: .85rem; }
.home-main .game-card { background: #0e1614; border-color: #202d29; box-shadow: 0 8px 22px rgba(0, 0, 0, .12); }
.home-main .game-cover-placeholder { background: linear-gradient(135deg, #123328, #0e1a17); }
.home-main .game-card p { color: #b3c0bb; }
.discovery-bottom { border-top: 1px solid #1a2521; padding-top: 2.7rem; }
.category-slots a { background: #0e1614; border-color: #202d29; box-shadow: 0 6px 16px rgba(0, 0, 0, .14); }
.category-slots a::before { background: var(--np-green-darker); border-color: var(--np-green-border); }

/* Correcciones de proporción y alineación del hero. */
.site-header {
  align-items: center;
  background: var(--np-bg-top-bottom);
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: none;
  padding: 0 clamp(1.5rem, 4.25vw, 4.1rem);
  gap: 3.25rem;
  height: 72px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.home-main .hero-actions { align-items: center; gap: 1rem; margin-top: 1.55rem; }
.home-main .hero-actions > a { align-items: center; box-sizing: border-box; display: inline-flex; height: 48px; justify-content: center; margin: 0; min-width: 188px; padding: 0 1.1rem; }
.home-main .hero-actions .primary-button { border-radius: .45rem; box-shadow: none; gap: .3rem; isolation: isolate; position: relative; }
.home-main .hero-actions .primary-button::before { background: radial-gradient(ellipse, rgba(0, 255, 136, .45) 0%, rgba(0, 245, 155, .24) 40%, transparent 72%); content: ''; filter: blur(8px); inset: -13px -26px; pointer-events: none; position: absolute; z-index: -1; }
.home-main .hero-actions .primary-button::after { border: 1px solid rgba(210, 255, 235, .28); border-radius: inherit; content: ''; inset: 0; pointer-events: none; position: absolute; }
.home-main .hero-actions .primary-button span { font-size: 1rem; margin: 0; }
.home-main .hero-actions .secondary-button { border-radius: .45rem; line-height: 1; padding: 0 1.1rem; }

/* Hero continuo: el panel panorámico entra bajo el contenido en lugar de formar dos cajas. */
.home-main .home-hero { grid-template-columns: 46% 54%; isolation: isolate; }
.home-main .hero-copy-wrap { background: linear-gradient(90deg, var(--np-bg) 0%, var(--np-bg) 67%, rgba(7, 16, 15, .76) 82%, transparent 100%); padding-right: 1.75rem; z-index: 3; }
.home-main .hero-art-space { border-left: 0; margin-left: -84px; padding-left: 84px; z-index: 1; }
.home-main .hero-actions > a { width: 194px; }
.hero-carousel-controls { bottom: 1.35rem; display: flex; gap: .5rem; left: 1.4rem; position: absolute; z-index: 4; }
.hero-carousel-controls button { align-items: center; background: rgba(9, 18, 16, .76); border: 1px solid rgba(221, 248, 234, .18); border-radius: 50%; color: #eafdf3; display: flex; font-size: 1.45rem; height: 27px; justify-content: center; line-height: 1; opacity: .82; padding: 0 0 .16rem; width: 27px; }
.hero-carousel-controls button:disabled { cursor: not-allowed; }

/* Metadatos de descubrimiento en las tarjetas del catálogo: cintas colgando del borde
   superior de la portada (izquierda = estado de descubrimiento, derecha = creador/IA), con
   un icono en vez de una palabra larga — el texto completo sigue disponible como title/
   aria-label para quien pase el ratón o use lector de pantalla. Colores sólidos y saturados
   a propósito (nada de transparencias ni tonos pastel): tienen que leerse igual de bien sobre
   cualquier portada, no solo sobre fondos oscuros. Sobresalen un poco por encima de la
   portada (top negativo) para dar sensación de placa/pin en vez de quedar planas contra la
   imagen — de ahí que la tarjeta pase a overflow:visible y sea la portada quien recorta sus
   propias esquinas. */
.home-main .game-card { overflow: visible; padding-bottom: 1.85rem; }
.home-main .game-cover { border-radius: .65rem .65rem 0 0; }
.catalog-badge {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  clip-path: polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%);
  color: #fff;
  display: flex;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45));
  font-size: .95rem;
  font-weight: 800;
  height: 2.05rem;
  justify-content: center;
  left: .85rem;
  line-height: 1;
  position: absolute;
  top: -.275rem;
  width: 1.7rem;
  z-index: 3;
}
.badge-in-development { background: #F59E0B; color: #241804; }
.badge-demo-available { background: #06B6D4; }
.badge-new { background: var(--np-green); color: #03110D; }
.badge-update { background: #2563EB; }
.badge-popular { background: #EF4444; }
.production-badge {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  clip-path: polygon(0 0, 100% 0, 100% 76%, 50% 100%, 0 76%);
  color: #fff;
  display: flex;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45));
  font-size: .92rem;
  font-weight: 800;
  height: 2.05rem;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: .85rem;
  top: -.275rem;
  width: 1.7rem;
  z-index: 3;
}
.production-individual { background: #475C99; }
.production-studio { background: #0E9AAD; }
.production-ai-assisted { background: #0FAE7A; }
.production-ai-generative { background: #E83E8C; }
.production-aaa-verified { background: #E0A72C; color: #241804; }
.production-featured-creator { background: var(--np-green-bright); color: #03110D; }
.production-rising-talent { background: #22D3AA; color: #04211a; }
.production-verified { background: #38BDF8; }
.production-badge-detail { background: var(--np-green-dark); position: static; }
.game-engagement { bottom: .7rem; color: #a2afa9; display: flex; font-size: .69rem; gap: .7rem; left: .8rem; position: absolute; }

/* El hero funciona como una escena continua: arte a la derecha y máscara circular hacia el texto. */
.home-main .home-hero { display: block; min-height: 476px; position: relative; }
.home-main .hero-art-space { bottom: 0; left: 30%; margin-left: 0; padding-left: 0; position: absolute; right: 0; top: 0; width: auto; }
.home-main .hero-art-space::after { background: radial-gradient(ellipse 64% 126% at 0% 48%, var(--np-bg) 0%, rgba(7, 16, 15, .98) 27%, rgba(7, 16, 15, .75) 43%, rgba(7, 16, 15, .22) 65%, transparent 80%), linear-gradient(90deg, rgba(7, 16, 15, .46), transparent 52%, rgba(7, 16, 15, .3)); }
.home-main .hero-copy-wrap { background: transparent; box-sizing: border-box; height: 100%; padding-right: 0; position: relative; width: min(48%, 610px); z-index: 4; }
.home-main .value-row { background: transparent; border: 0; display: flex; gap: 1.15rem; margin-top: 2rem; padding: 0; width: 650px; }
.home-main .value-row article { border: 0; flex: 0 0 145px; min-height: 42px; padding: .12rem 0 .12rem 1.05rem; }
.home-main .value-row article::before { left: 0; top: .45rem; }
.home-main .value-row strong { font-size: .74rem; }
.home-main .value-row span { font-size: .66rem; line-height: 1.4; margin-top: .2rem; }
.home-main .home-hero { border-bottom: 1px solid #1a2925; }

/* Cambio de tonalidad al pasar del hero al catálogo. Solo la primera sección (Destacados)
   pega directamente con el hero de arriba — Tendencia y Catálogo, al venir después, necesitan
   su propio espacio y separador como cualquier otra sección apilada. */
.catalog-zone { padding: 2.65rem 0 4.25rem; position: relative; }
.catalog-zone .catalog:first-child { border-top: 0; padding-top: 0; }
.catalog-zone .developer-banner { margin-top: 4rem; }

.hero-project-cover.has-cover { background-position: center; background-size: cover; }

@media (max-width: 1050px) {
  .home-main .hero-copy-wrap { width: min(59%, 610px); }
  .home-main .hero-art-space { left: 20%; }
  .home-main .value-row { gap: .75rem; width: auto; }
  .home-main .value-row article { flex-basis: 125px; }
}

@media (max-width: 700px) {
  .home-main .hero-art-space { left: 0; opacity: .5; }
  .home-main .hero-copy-wrap { width: 100%; }
  .home-main .value-row { flex-wrap: wrap; width: 100%; }
  .home-main .value-row article { flex: 1 1 42%; }
}

@media (max-width: 1050px) {
  .site-header .primary-nav { gap: 1.6rem; }
  .catalog-search { width: 220px; }
  .catalog-search input { width: 165px; }
}

.admin-page { max-width: 1400px; padding-top: 2.75rem; }
.admin-heading, .dash-heading { border-bottom: 1px solid var(--border-subtle); padding-bottom: 1.75rem; }
.admin-heading h1, .dash-heading h1 { font-size: clamp(2.1rem, 4vw, 3.1rem); }
.admin-intro, .dash-intro { color: #c2ccc9; }
.creator-page.is-dashboard { max-width: 1400px; padding-top: 2.75rem; }
.admin-next { background: linear-gradient(115deg, var(--np-bg-2), var(--np-surface)); border: 1px solid var(--border-subtle); border-radius: 1.25rem; max-width: 700px; padding: 2rem; }
.admin-next p:not(.eyebrow) { color: #c4d0cc; line-height: 1.6; }
.admin-game-search { color: #d5e0dc; display: grid; font-size: .78rem; font-weight: 800; gap: .4rem; margin: 0 0 .7rem; max-width: 410px; }
.admin-game-search input { background: #0a1513; border: 1px solid #2c3a36; border-radius: .55rem; color: #f2f0f7; font: inherit; padding: .7rem .8rem; }
.admin-game-search input:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--np-green-bg); outline: 0; }
.danger-button { background: rgba(128, 40, 60, .78); border: 1px solid rgba(246, 121, 145, .48); border-radius: .65rem; color: #fff1f4; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 800; padding: .7rem 1rem; }
.danger-button:hover, .danger-button:focus-visible { background: rgba(165, 54, 78, .9); border-color: rgba(255, 158, 177, .78); }
.danger-button:disabled { cursor: wait; opacity: .6; }
.creator-game-actions { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: end; }
.creator-game-item.is-trashed { opacity: .84; }

/* Dashboard compacto compartido: sidebar con secciones + contadores, contenido en filas.
   Lo usan tanto /admin como /creator — de ahí el prefijo neutro en vez de "admin-". */
.dash { align-items: start; display: grid; gap: 1.1rem; grid-template-columns: 235px minmax(0, 1fr); margin-top: 1.6rem; }
.dash-sidebar { background: var(--np-card); border: 1px solid var(--panel-border); border-radius: .85rem; display: flex; flex-direction: column; overflow: hidden; position: sticky; top: 1rem; }
.dash-identity { border-bottom: 1px solid var(--border-subtle); padding: 1rem 1.05rem; }
.dash-identity strong { color: #f2eef9; display: block; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-identity span { color: var(--text-muted); display: block; font-size: .66rem; margin-top: .2rem; }
.dash-nav { display: grid; gap: .18rem; padding: .7rem .55rem; }
.dash-nav-item { align-items: center; background: transparent; border: 0; border-radius: .42rem; color: #c9c6d5; cursor: pointer; display: flex; font: inherit; font-size: .78rem; gap: .6rem; min-height: 2.4rem; padding: 0 .65rem; text-align: left; text-decoration: none; width: 100%; }
.dash-nav-item:hover { background: var(--np-green-bg); color: #fff; }
.dash-nav-item.is-active { background: linear-gradient(90deg, rgba(0, 245, 155, .18), rgba(0, 245, 155, .05)); box-shadow: inset 2px 0 var(--np-green); color: #fff; font-weight: 800; }
.dash-nav-icon { color: var(--np-green-soft); display: inline-flex; flex: 0 0 auto; font-size: 1rem; justify-content: center; width: 1.1rem; }
.dash-nav-count { align-items: center; background: rgba(105, 117, 164, .29); border-radius: 999px; color: #e7e2f4; display: inline-flex; font-size: .6rem; height: 1.2rem; justify-content: center; margin-left: auto; min-width: 1.2rem; padding: 0 .32rem; }
.dash-nav-count.has-items { background: rgba(239, 76, 114, .8); color: #fff; }
.dash-main { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.dash-main > * { min-width: 0; }
.dash-section { display: none; scroll-margin-top: 5rem; }
.dash-section.is-active { display: block; }
.dash-section-card { background: var(--np-card); border: 1px solid var(--panel-border); border-radius: .85rem; padding: 1.2rem 1.3rem; }
.dash-section-card h2 { font-size: 1.05rem; margin: 0 0 1rem; }

.dash-stat-grid { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); margin-bottom: 1rem; }
.dash-stat { background: linear-gradient(155deg, #101c19, #0d1614); border: 1px solid rgba(154, 167, 163, .3); border-radius: .58rem; padding: .8rem .95rem; }
.dash-stat strong { color: #fbf9ff; display: block; font-size: 1.5rem; letter-spacing: -.02em; }
.dash-stat span { color: var(--text-muted); display: block; font-size: .66rem; margin-top: .2rem; }
.creator-badge { margin-top: .6rem; }
.creator-badge > summary { cursor: pointer; font-weight: 600; }
.creator-badge-body { display: grid; gap: .8rem; padding-top: .6rem; }
.creator-badge-options { align-items: end; display: flex; flex-wrap: wrap; gap: .8rem; }
.creator-badge-options label { display: grid; gap: .25rem; }
.creator-badge-preview { background: repeating-conic-gradient(#1b2724 0 25%, #14201d 0 50%) 0 0 / 18px 18px; border-radius: .6rem; padding: .8rem; width: fit-content; }
.creator-badge-preview img { display: block; }
.creator-badge-snippets { display: grid; gap: .8rem; }
.creator-badge-snippet { display: grid; gap: .3rem; }
.creator-badge-snippet textarea { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; width: 100%; }
.creator-badge-snippet button { justify-self: start; }
.admin-project-table-wrap { overflow-x: auto; margin-bottom: 1rem; }
.admin-project-table { border-collapse: collapse; min-width: 32rem; width: 100%; }
.admin-project-table th, .admin-project-table td { border-bottom: 1px solid rgba(154, 167, 163, .22); font-size: .8rem; padding: .35rem .6rem; text-align: right; }
.admin-project-table th:first-child, .admin-project-table td:first-child { text-align: left; }
.admin-project-table th { color: var(--text-muted); font-weight: 600; }
.admin-project-metric { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem; margin: .3rem 0 0; }
.admin-project-metric meter { height: .6rem; min-width: 8rem; width: 40%; }
.admin-project-manual { color: var(--text-muted); margin: .4rem 0 1rem; padding-left: 1.2rem; }
.dash-stat.needs-attention strong { color: #ff8fa8; }
.dash-stat.is-clickable { color: inherit; cursor: pointer; display: block; text-decoration: none; transition: border-color .16s ease, transform .16s ease; }
.dash-stat.is-clickable:hover, .dash-stat.is-clickable:focus-visible { border-color: var(--np-green-border); box-shadow: 0 0 18px var(--np-green-glow); transform: translateY(-2px); }

.dash-row-list { display: grid; gap: .55rem; }
.dash-row { align-items: center; background: rgba(9, 18, 16, .55); border: 1px solid var(--border-subtle); border-radius: .55rem; display: flex; flex-wrap: wrap; gap: .7rem; justify-content: space-between; padding: .65rem .85rem; }
.dash-row-copy { min-width: 0; }
.dash-row-title { color: #f0edf8; display: block; font-size: .82rem; font-weight: 700; }
.dash-row-meta { color: var(--text-muted); display: block; font-size: .68rem; margin-top: .18rem; }
.admin-permissions { border-top: 1px solid var(--line, rgba(255,255,255,.12)); display: grid; gap: .7rem; margin-top: .7rem; padding-top: .7rem; }
.admin-permissions fieldset { border: 1px solid var(--line, rgba(255,255,255,.12)); border-radius: 10px; display: grid; gap: .4rem; margin: 0; padding: .6rem .8rem; }
.admin-permissions legend { font-size: .72rem; font-weight: 800; letter-spacing: .06em; padding: 0 .35rem; text-transform: uppercase; }
.admin-permissions label { align-items: center; cursor: pointer; display: flex; font-size: .82rem; gap: .5rem; }
.admin-permissions-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.admin-backup-line.is-warning { color: #ffb86b; }
.admin-user-search { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 .8rem; }
.admin-user-search input { flex: 1 1 220px; }
.admin-sanction-form { align-items: center; display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.admin-sanction-form input[type="number"] { width: 90px; }
.admin-sanction-form input:not([type="number"]) { flex: 1 1 200px; }
.admin-sanction-history { display: grid; flex: 1 1 100%; font-size: .78rem; gap: .35rem; list-style: none; margin: .5rem 0 0; padding: 0; }
.admin-sanction-history li { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; }
.dash-row.is-sanctioned { border-color: rgba(255, 107, 107, .55); }
.dash-row-note { background: var(--np-green-bg); border: 1px solid var(--np-green-border); border-radius: .4rem; color: var(--np-green-soft); font-size: .7rem; line-height: 1.4; margin-top: .35rem; max-width: 34rem; padding: .35rem .55rem; }
.dash-row-link { color: var(--np-green-soft); display: inline-block; font-size: .68rem; margin-top: .3rem; overflow-wrap: anywhere; }
.dash-row-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .4rem; }
.dash-row-actions .secondary-button, .dash-row-actions .primary-button, .dash-row-actions .danger-button { cursor: pointer; font-size: .7rem; margin: 0; padding: .5rem .75rem; }
.dash-row-badge-select { align-items: center; display: flex; gap: .4rem; }
.dash-row-badge-select select { background: #0a1513; border: 1px solid #2c3a36; border-radius: .4rem; color: #f2f0f7; font: inherit; font-size: .68rem; padding: .4rem .5rem; }
.dash-row-empty { color: var(--text-muted); font-size: .8rem; padding: .6rem 0; }
.dash-game-card { display: grid; gap: .5rem; }
.creator-games { display: grid; gap: 1.3rem; grid-template-columns: minmax(0, 1fr); }
.creator-game-group, .creator-game-detail { min-width: 0; }
.creator-game-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: .6rem; }
.creator-game-head h3 { align-items: baseline; display: flex; font-size: 1rem; gap: .5rem; margin: 0; }
.creator-game-count { color: var(--np-text-muted); font-size: .8rem; font-weight: 600; }
.creator-game-arrows { display: flex; gap: .4rem; }
.creator-game-arrows[hidden] { display: none; }
.creator-game-arrow { background: transparent; border: 1px solid var(--panel-border); border-radius: 50%; color: var(--np-text-muted); cursor: pointer; font-size: 1.1rem; height: 2rem; line-height: 1; width: 2rem; }
.creator-game-arrow:hover:not(:disabled) { border-color: var(--np-green-border); color: var(--np-text); }
.creator-game-arrow:disabled { cursor: default; opacity: .35; }
.creator-game-track { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x proximity; scrollbar-width: thin; }
.creator-game-tile { background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .7rem; color: inherit; cursor: pointer; display: grid; flex: 0 0 11.5rem; font: inherit; gap: 0; grid-template-rows: auto 1fr; overflow: hidden; padding: 0; scroll-snap-align: start; text-align: left; transition: border-color .15s ease, transform .15s ease; }
.creator-game-tile:hover, .creator-game-tile:focus-visible { border-color: var(--np-green-border); transform: translateY(-2px); }
.creator-game-tile[aria-pressed='true'] { border-color: var(--np-green); box-shadow: 0 0 0 1px var(--np-green); }
.creator-game-cover { align-items: center; aspect-ratio: 16 / 9; background: rgba(255, 255, 255, .04); color: var(--np-text-dim); display: flex; font-size: .75rem; justify-content: center; overflow: hidden; }
.creator-game-cover img { display: block; height: 100%; object-fit: cover; width: 100%; }
.creator-game-tile-info { display: grid; gap: .25rem; padding: .6rem .7rem .75rem; }
.creator-game-tile-info strong { font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }
.creator-game-tile-info small { color: var(--np-text-muted); font-size: .72rem; line-height: 1.3; }
.creator-game-status { background: rgba(255, 255, 255, .06); border-radius: .5rem; color: var(--np-text-muted); font-size: .66rem; font-weight: 700; justify-self: start; padding: .1rem .5rem; }
.creator-game-tile.is-published .creator-game-status { background: var(--np-green-bg); color: var(--np-green-soft); }
.creator-game-tile.is-pending-review .creator-game-status { background: rgba(255, 212, 121, .12); color: #ffd479; }
.creator-game-tile.is-rejected .creator-game-status, .creator-game-tile.is-suspended .creator-game-status { background: rgba(255, 139, 139, .12); color: #ff8b8b; }
.creator-game-note { color: #ff8b8b; }
.creator-game-detail { scroll-margin-top: 5rem; }
.dash-hero { border: 1px solid var(--border-subtle); border-radius: 1rem; display: grid; gap: 1.2rem; overflow: hidden; padding: 1.75rem; position: relative; }
.dash-hero > * { position: relative; }
.dash-hero-banner { background: center / cover no-repeat; inset: 0; opacity: .28; position: absolute; }
.dash-hero-banner::after { background: linear-gradient(90deg, var(--np-bg) 8%, transparent 80%); content: ''; inset: 0; position: absolute; }
.dash-hero-identity { align-items: center; display: flex; flex-wrap: wrap; gap: 1.2rem 1.5rem; }
.dash-hero .dash-hero-emblem { border-radius: 1rem; flex: 0 0 auto; height: 5.5rem; width: 5.5rem; }
.dash-hero .dash-hero-emblem.is-monogram { font-size: 1.9rem; }
.dash-hero-copy { display: grid; flex: 1 1 18rem; gap: .35rem; min-width: 0; }
.dash-hero-copy h1 { margin: 0; overflow-wrap: anywhere; }
.dash-hero-copy .dash-intro { margin: 0; }
.dash-hero-stats { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: .4rem 0 0; padding: 0; }
.dash-hero-stats li { align-items: baseline; background: rgba(255, 255, 255, .05); border: 1px solid var(--border-subtle); border-radius: 999px; display: flex; gap: .45rem; padding: .25rem .8rem; }
.dash-hero-stats strong { color: var(--np-green-soft); font-size: 1rem; }
.dash-hero-stats span { color: var(--np-text-muted); font-size: .78rem; }
.dash-hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.dash-hero-actions .primary-button { margin-top: 0; }
.dash-section-card > .creator-guide-hint { margin: .7rem 0 0; }
.dash-section-card > .creator-others-note { margin: .7rem 0 1.2rem; }
.creator-guide-link { color: var(--np-green-soft); font-weight: 650; text-underline-offset: .15em; }
@media (max-width: 700px) { .dash-hero { padding: 1.2rem; } .dash-hero .dash-hero-emblem { height: 4.2rem; width: 4.2rem; } }
.dash-game-card .creator-metadata, .dash-game-card .creator-updates { margin-left: .15rem; }

@media (max-width: 900px) {
  .dash { grid-template-columns: 1fr; }
  .dash-sidebar { position: static; }
  .dash-nav { display: flex; flex-wrap: wrap; gap: .3rem; padding: .6rem; }
  .dash-nav-item { flex: 1 1 8rem; min-height: 2.2rem; }
}

@media (max-width: 600px) {
  .site-header, main { padding-left: 1.25rem; padding-right: 1.25rem; }
  nav { gap: .9rem; }
  .catalog-search { display: none; }
  .home-hero { grid-template-columns: 1fr; }
  .hero-copy-wrap { padding: 4.5rem 0 3rem; }
  .hero-art-space { border-left: 0; min-height: 240px; }
  .value-row { grid-template-columns: 1fr; padding: 1rem 0; }
  .value-row article, .value-row article:first-child { border-bottom: 1px solid #24332f; border-right: 0; padding: .7rem 0; }
  .hero { padding: 4.5rem 0 5rem; }
  .section-heading { align-items: start; flex-direction: column; gap: .5rem; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Portada panorámica: una escena continua, no dos tarjetas enfrentadas. */
.home-main .home-hero {
  background: var(--np-bg);
  border-bottom: 1px solid #1a2925;
  border-radius: 0 0 1rem 1rem;
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .18);
  min-height: 500px;
  overflow: hidden;
}

.home-main .hero-copy-wrap {
  align-items: flex-start;
  display: flex;
  justify-content: center;
  padding: 3.7rem 0 3.5rem;
  width: min(45%, 610px);
}

.home-main .home-hero h1 {
  font-size: clamp(2.75rem, 4.2vw, 4.15rem);
  letter-spacing: -.06em;
  line-height: 1.28;
  margin: 1.05rem 0 .9rem;
  max-width: 560px;
}

.home-main .hero-copy { font-size: .98rem; line-height: 1.58; max-width: 485px; }

.home-main .hero-actions { gap: .7rem; margin-top: 1.35rem; }
.home-main .hero-actions > a {
  align-items: center;
  border-radius: .5rem;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  margin: 0;
  padding: 0 1rem;
  width: 190px;
}
.home-main .hero-actions .primary-button { font-size: .84rem; }
.home-main .hero-actions .secondary-button { font-size: .84rem; }

.home-main .value-row {
  gap: .7rem;
  margin-top: 1.45rem;
  max-width: 585px;
  width: 100%;
}
.home-main .value-row article { flex: 1 1 0; min-width: 0; padding-left: .92rem; }
.home-main .value-row strong { font-size: .72rem; }
.home-main .value-row span { font-size: .62rem; line-height: 1.32; }

.home-main .hero-art-space {
  /* El Hero conserva un único negro de base: el arte es una capa, no un panel azul. */
  background: transparent;
  border: 0;
  border-radius: 0 0 1rem 0;
  clip-path: none;
  left: 35%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .08) 5%, rgba(0, 0, 0, .48) 13%, rgba(0, 0, 0, .82) 20%, #000 28%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .08) 5%, rgba(0, 0, 0, .48) 13%, rgba(0, 0, 0, .82) 20%, #000 28%, #000 100%);
}

/* Cuando haya una portada real, ocupa el paisaje sin cambiar la composición. */
.hero-art-space.hero-has-cover::before {
  background-image: linear-gradient(90deg, rgba(7, 16, 15, .22), rgba(7, 16, 15, .02)), var(--hero-cover);
  background-position: center;
  background-size: cover;
  content: '';
  inset: 0;
  position: absolute;
}

.home-main .hero-art-space::after {
  background: radial-gradient(ellipse 76% 138% at -5% 49%, var(--np-bg) 0%, var(--np-bg) 27%, rgba(7, 16, 15, .93) 40%, rgba(7, 16, 15, .47) 53%, rgba(7, 16, 15, .1) 66%, transparent 76%);
  filter: blur(12px);
  inset: -1.25rem -1rem;
  transform: translateX(-.3rem);
}

.home-main .hero-art-space > p { right: 1.5rem; top: 1.35rem; }
.hero-project-card { z-index: 4; }
.hero-carousel-controls { z-index: 5; }

/* Catálogo: portada pegada a la tarjeta, datos en una franja inferior constante. */
.home-main .game-grid { align-items: stretch; gap: .85rem; }
.home-main .card-link { display: block; height: 100%; min-width: 0; }
.home-main .game-card {
  background: #0e1614;
  border-color: #223530;
  border-radius: .65rem;
  display: flex;
  flex-direction: column;
  height: 278px;
  min-height: 0;
  overflow: visible;
  padding: 0;
}
.home-main .game-card::before { display: none; }
.home-main .game-cover {
  border: 0;
  border-radius: .65rem .65rem 0 0;
  flex: 0 0 139px;
  height: 139px;
  object-fit: cover;
  width: 100%;
}
.home-main .game-cover-placeholder { background: linear-gradient(135deg, #123328, #0e1a17 57%, #0a2a22); }
/* Al pasar el ratón la tarjeta se levanta y la portada gana brillo, pero la portada NO se agranda: estas tarjetas dejan sobresalir las chapas de arriba
   (overflow: visible), y con el zoom del 2,5 % la imagen se salía 2 px por cada lado y por encima del marco redondeado. */
.home-main .game-card:hover .game-cover { filter: brightness(1.1); }
.home-main .game-card:hover { box-shadow: 0 12px 26px rgba(0, 0, 0, .28), 0 0 0 1px rgba(57, 251, 177, .14); }
.home-main .game-cover { transition: filter .2s ease; }
.home-main .catalog-badge { left: .7rem; }
.home-main .card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: .72rem .8rem .7rem;
}
.home-main .game-card h3 {
  font-size: .9rem;
  line-height: 1.2;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-main .game-categories {
  color: #979dae;
  font-size: .7rem;
  line-height: 1.35;
  margin: .3rem 0 0;
  min-height: 1.9em;
  overflow: hidden;
}
.home-main .card-footer { align-items: center; display: flex; justify-content: space-between; margin-top: auto; min-height: 26px; }
.home-main .game-engagement { align-items: center; bottom: auto; color: #aab0bf; display: flex; font-size: .69rem; gap: .65rem; left: auto; position: static; }
.home-main .interaction-stat { align-items: center; display: inline-flex; gap: .27rem; }
.interaction-stat { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 0; }
.interaction-stat:disabled { cursor: default; opacity: .55; }
.home-main .interaction-icon { display: inline-block; height: .82rem; position: relative; width: .82rem; }
.home-main .interaction-favorite .interaction-icon::before { color: #b7bdcb; content: '♡'; font-size: 1.08rem; left: -.05rem; line-height: .68; position: absolute; top: 0; transition: color .15s ease; }
.home-main .interaction-favorite:hover .interaction-icon::before, .home-main .interaction-favorite:focus-visible .interaction-icon::before { color: #e0f5ea; }
.home-main .interaction-favorite.is-favorited .interaction-icon::before { color: var(--np-green); content: '♥'; }
.home-main .interaction-comment .interaction-icon::before { border: 1.25px solid #b7bdcb; border-radius: .18rem; content: ''; height: .54rem; left: .04rem; position: absolute; top: .08rem; transition: border-color .15s ease; width: .69rem; }
.home-main .interaction-comment .interaction-icon::after { border-bottom: 1.25px solid #b7bdcb; border-left: 1.25px solid #b7bdcb; bottom: .08rem; content: ''; height: .18rem; left: .18rem; position: absolute; transform: skewY(-28deg); transition: border-color .15s ease; width: .18rem; }
.home-main .interaction-comment:hover .interaction-icon::before, .home-main .interaction-comment:focus-visible .interaction-icon::before { border-color: #e0f5ea; }
.home-main .interaction-comment:hover .interaction-icon::after, .home-main .interaction-comment:focus-visible .interaction-icon::after { border-color: #e0f5ea; }
.home-main .developer-avatar {
  align-items: center;
  background: linear-gradient(135deg, var(--np-green), #0f6b4e);
  border: 1px solid rgba(246, 245, 255, .55);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #0e1614;
  color: #fff;
  display: inline-flex;
  flex: 0 0 25px;
  font-size: .52rem;
  font-weight: 850;
  height: 25px;
  justify-content: center;
  letter-spacing: -.04em;
  overflow: hidden;
  width: 25px;
}
.home-main .developer-avatar img { height: 100%; object-fit: cover; width: 100%; }
.home-main .project-slot { opacity: .73; }
.home-main .project-slot .game-categories { max-width: 150px; }

@media (max-width: 1050px) {
  .home-main .hero-copy-wrap { padding-left: 0; width: min(57%, 610px); }
  .home-main .hero-art-space { left: 22%; }
  .home-main .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .home-main .home-hero { min-height: 540px; }
  .home-main .hero-copy-wrap { padding: 3rem 0 2rem; width: 100%; }
  .home-main .hero-art-space { left: 0; opacity: .42; }
  .home-main .value-row { gap: .8rem; max-width: 460px; }
  .home-main .value-row article { flex-basis: 42%; }
  .home-main .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-main .game-card { height: 260px; }
  .home-main .game-cover { flex-basis: 125px; height: 125px; }
}

/* El Hero es una franja de página, no una tarjeta dentro del contenido. */
.home-main { --hero-gutter: max(2rem, calc((100vw - 1400px) / 2 + 2rem)); }
.home-main .home-hero {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}
.home-main .hero-copy-wrap {
  max-width: none;
  padding-left: var(--hero-gutter);
  padding-right: 0;
  width: calc(45% + var(--hero-gutter));
}
.home-main .hero-art-space {
  border-radius: 0;
  left: 35%;
  right: 0;
}

@media (max-width: 700px) {
  .home-main { --hero-gutter: 1.25rem; }
  .home-main .hero-copy-wrap { padding-left: var(--hero-gutter); padding-right: var(--hero-gutter); width: 100%; }
  .home-main .hero-art-space { left: 0; }
}

/* Cuadrícula común: el texto pertenece al contenedor; solo el arte rompe hacia la derecha. */
.home-main { --hero-gutter: 0px; }
.home-main .home-hero {
  margin-left: 0;
  margin-right: 0;
  overflow: visible;
  width: 100%;
}
.home-main .hero-copy-wrap {
  padding-left: 0;
  width: 45%;
}
.home-main .hero-art-space {
  left: 31%;
  right: calc((1400px - 100vw) / 2 - 2rem);
}

/* La información queda junto a la portada sin un hueco excesivo. */
.home-main .game-card { height: 250px; }
.home-main .game-cover { flex-basis: 132px; height: 132px; }
.home-main .card-content { padding: .6rem .75rem; }
.home-main .game-categories { margin-top: .22rem; }
.home-main .card-footer { margin-top: .55rem; }

@media (max-width: 700px) {
  .home-main { --hero-gutter: 0px; }
  .home-main .hero-copy-wrap { padding-left: 0; padding-right: 0; width: 100%; }
  .home-main .hero-art-space { right: -2rem; }
  .home-main .game-card { height: 242px; }
  .home-main .game-cover { flex-basis: 122px; height: 122px; }
}

@media (max-width: 1400px) {
  .home-main .hero-art-space { right: -2rem; }
}

@media (max-width: 600px) {
  .home-main .hero-art-space { right: -1.25rem; }
}

/* Ajuste geométrico del Hero: la ilustración nace bajo el texto y se abre hacia la derecha. */
.home-main .home-hero { min-height: 580px; }
.home-main .hero-copy-wrap { padding-bottom: 4.6rem; padding-top: 4.8rem; }
.home-main .hero-art-space {
  clip-path: ellipse(90% 105% at 100% 50%);
  left: 4%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .08) 10%, rgba(0, 0, 0, .3) 24%, rgba(0, 0, 0, .58) 40%, rgba(0, 0, 0, .82) 54%, #000 68%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .08) 10%, rgba(0, 0, 0, .3) 24%, rgba(0, 0, 0, .58) 40%, rgba(0, 0, 0, .82) 54%, #000 68%, #000 100%);
}
.home-main .hero-art-space::after {
  background: radial-gradient(ellipse 78% 138% at -11% 50%, var(--np-bg) 0%, var(--np-bg) 28%, rgba(7, 16, 15, .94) 42%, rgba(7, 16, 15, .52) 56%, rgba(7, 16, 15, .16) 70%, transparent 82%);
  filter: blur(14px);
}

@media (max-width: 700px) {
  .home-main .home-hero { min-height: 540px; }
  .home-main .hero-copy-wrap { padding-bottom: 3rem; padding-top: 3.5rem; }
  .home-main .hero-art-space { clip-path: none; left: 0; }
}

/* Transición más recogida: protege por completo el bloque textual y suaviza el final inferior. */
.home-main .hero-art-space {
  clip-path: ellipse(78% 118% at 100% 50%);
  left: 32%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .1) 5%, rgba(0, 0, 0, .48) 13%, rgba(0, 0, 0, .84) 22%, #000 34%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .1) 5%, rgba(0, 0, 0, .48) 13%, rgba(0, 0, 0, .84) 22%, #000 34%, #000 100%);
}
.home-main .hero-art-space::after {
  background: linear-gradient(180deg, transparent 0%, transparent 73%, rgba(7, 16, 15, .18) 79%, rgba(7, 16, 15, .72) 89%, var(--np-bg) 97%, var(--np-bg) 100%), radial-gradient(ellipse 49% 138% at -14% 50%, var(--np-bg) 0%, var(--np-bg) 29%, rgba(7, 16, 15, .9) 42%, rgba(7, 16, 15, .44) 54%, rgba(7, 16, 15, .08) 64%, transparent 72%);
  filter: blur(12px);
}
.hero-art-space.hero-has-cover::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 75%, rgba(0, 0, 0, .78) 84%, rgba(0, 0, 0, .28) 93%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 75%, rgba(0, 0, 0, .78) 84%, rgba(0, 0, 0, .28) 93%, transparent 100%);
}

@media (max-width: 700px) {
  .home-main .hero-art-space { clip-path: none; left: 0; }
}

/* Acabado orgánico del arte y controles del proyecto destacado. */
.home-main .hero-art-space {
  bottom: 1.45rem;
  clip-path: ellipse(80% 122% at 103% 44%);
}
.home-main .hero-art-space::after {
  background: linear-gradient(180deg, transparent 0%, transparent 67%, rgba(7, 16, 15, .14) 74%, rgba(7, 16, 15, .63) 84%, var(--np-bg) 96%, var(--np-bg) 100%), radial-gradient(ellipse 51% 142% at -12% 45%, var(--np-bg) 0%, var(--np-bg) 30%, rgba(7, 16, 15, .88) 42%, rgba(7, 16, 15, .42) 54%, rgba(7, 16, 15, .08) 65%, transparent 73%);
}

.hero-project-card {
  align-items: center;
  background: rgba(9, 18, 16, .66);
  backdrop-filter: blur(12px);
  border-color: rgba(213, 247, 231, .16);
  border-radius: .75rem;
  bottom: 3.1rem;
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .26);
  gap: 1rem;
  grid-template-columns: 96px minmax(0, 1fr);
  min-height: 132px;
  padding: .9rem 1rem;
  right: 4.25rem;
  width: 370px;
}
.hero-project-cover { border-radius: .5rem; height: 96px; }
.hero-project-info { align-items: flex-start; display: flex; flex-direction: column; min-width: 0; }
.hero-project-card span { font-size: .58rem; margin-bottom: .3rem; }
.hero-project-card strong { font-size: .94rem; line-height: 1.2; }
.hero-project-card small { font-size: .69rem; line-height: 1.35; margin-top: .25rem; }
.hero-project-card a {
  align-items: center;
  border-radius: .4rem;
  display: inline-flex;
  font-size: .68rem;
  margin-top: .55rem;
  padding: .48rem .65rem;
}

.hero-carousel-nav {
  align-items: center;
  bottom: 2.45rem;
  display: flex;
  gap: .7rem;
  position: absolute;
  right: 29rem;
  z-index: 5;
}
.hero-carousel-controls { bottom: auto; display: flex; gap: .42rem; left: auto; position: static; }
.hero-carousel-controls button {
  background: rgba(8, 17, 15, .6);
  border-color: rgba(224, 250, 238, .2);
  height: 29px;
  width: 29px;
}
.hero-carousel-indicators { align-items: center; display: flex; gap: .38rem; }
.hero-carousel-indicator {
  background: rgba(224, 227, 249, .32);
  border: 0;
  border-radius: 999px;
  height: 5px;
  padding: 0;
  transition: background .2s ease, transform .2s ease;
  width: 5px;
}
.hero-carousel-indicator.is-active { background: var(--np-green); box-shadow: 0 0 8px var(--np-green-glow); transform: scale(1.18); }

@media (max-width: 900px) {
  .home-main .hero-art-space { bottom: 0; }
  .hero-project-card { bottom: 2.2rem; right: 2rem; width: min(370px, calc(100% - 4rem)); }
  .hero-carousel-nav { bottom: 2.4rem; right: min(27rem, calc(100% - 2rem)); }
}

@media (max-width: 700px) {
  .home-main .hero-art-space { bottom: 0; }
  .hero-project-card { grid-template-columns: 72px minmax(0, 1fr); min-height: 106px; right: 1.25rem; width: min(340px, calc(100% - 2.5rem)); }
  .hero-project-cover { height: 72px; }
  .hero-carousel-nav { bottom: 1.35rem; left: 1.25rem; right: auto; }
}

/* Máscaras reales del arte: una elipse oblicua a la izquierda y transparencia vertical abajo. */
.home-main .hero-art-space {
  clip-path: ellipse(90% 150% at 115% 32%);
  -webkit-mask-image: linear-gradient(98deg, transparent 0%, rgba(0, 0, 0, .08) 10%, rgba(0, 0, 0, .42) 24%, rgba(0, 0, 0, .78) 38%, #000 48%, #000 100%), linear-gradient(180deg, #000 0%, #000 69%, rgba(0, 0, 0, .78) 80%, rgba(0, 0, 0, .32) 90%, transparent 98%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  mask-image: linear-gradient(98deg, transparent 0%, rgba(0, 0, 0, .08) 10%, rgba(0, 0, 0, .42) 24%, rgba(0, 0, 0, .78) 38%, #000 48%, #000 100%), linear-gradient(180deg, #000 0%, #000 69%, rgba(0, 0, 0, .78) 80%, rgba(0, 0, 0, .32) 90%, transparent 98%);
}
.home-main .hero-art-space::after {
  background: none;
  filter: none;
  transform: none;
}
.hero-art-space.hero-has-cover::before {
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 700px) {
  .home-main .hero-art-space { clip-path: none; }
}

/* Correcciones de acabado del Hero: sin panel izquierdo y con transparencia real. */
.home-main .hero-copy-wrap,
.home-main .hero-copy-wrap::before,
.home-main .hero-copy-wrap::after,
.home-main .value-row,
.home-main .value-row::before,
.home-main .value-row::after {
  background: transparent;
  box-shadow: none;
}

.home-main .hero-art-space {
  /* Sin clip-path: el arco y el final inferior pierden opacidad de verdad. */
  clip-path: none;
  -webkit-mask-image: radial-gradient(ellipse 116% 175% at 123% 32%, #000 0%, #000 56%, rgba(0, 0, 0, .92) 63%, rgba(0, 0, 0, .62) 70%, rgba(0, 0, 0, .28) 77%, rgba(0, 0, 0, .07) 83%, transparent 88%), linear-gradient(to bottom, #000 0%, #000 69%, rgba(0, 0, 0, .78) 80%, rgba(0, 0, 0, .32) 90%, transparent 98%);
  -webkit-mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 116% 175% at 123% 32%, #000 0%, #000 56%, rgba(0, 0, 0, .92) 63%, rgba(0, 0, 0, .62) 70%, rgba(0, 0, 0, .28) 77%, rgba(0, 0, 0, .07) 83%, transparent 88%), linear-gradient(to bottom, #000 0%, #000 69%, rgba(0, 0, 0, .78) 80%, rgba(0, 0, 0, .32) 90%, transparent 98%);
  mask-size: 100% 100%, 100% 100%;
  mask-repeat: no-repeat;
  mask-composite: intersect;
}

/* La tarjeta y sus controles se desplazan ahora como un único conjunto. */
.hero-carousel-overlay {
  bottom: 3.1rem;
  position: absolute;
  right: 4.25rem;
  width: 370px;
  z-index: 5;
}
.hero-carousel-overlay .hero-project-card {
  bottom: auto;
  position: relative;
  right: auto;
  width: 100%;
}
.hero-carousel-overlay .hero-carousel-nav {
  bottom: auto;
  justify-content: flex-start;
  margin-top: .7rem;
  position: relative;
  right: auto;
}

/* Verde neón intenso a la izquierda, más suave a la derecha. */
.home-main .hero-actions .primary-button {
  background: var(--np-btn-gradient);
}
.home-main .home-hero h1 span {
  background: linear-gradient(to right, var(--np-green-bright) 0%, var(--np-green) 62%, var(--np-green-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* El contenido no es un panel: hereda sin matices el fondo único del Hero. */
.home-main .hero-copy-wrap,
.home-main .value-row {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.home-main .hero-copy-wrap::before,
.home-main .hero-copy-wrap::after,
.home-main .value-row::before,
.home-main .value-row::after {
  content: none !important;
}
.home-main .home-hero h1 {
  font-size: clamp(2.7rem, 3.55vw, 3.65rem);
}

/* El hero ya no lleva superficie propia: el único fondo es el degradado del body,
   visible de principio a fin sin ningún panel plano tapándolo por encima. */
.home-main .home-hero {
  background-color: transparent;
}
.home-main .hero-copy-wrap {
  background-color: transparent !important;
  background-image: none !important;
}

/* Ventajas del Hero: más bajas, compactas y con una señal visual por beneficio. */
.home-main .value-row {
  align-items: center;
  gap: 1.28rem;
  margin-left: .3rem;
  margin-top: 2.35rem;
  max-width: 650px;
  transform: translateY(1.45rem);
}
.home-main .value-row .value-item {
  align-items: flex-start;
  display: grid;
  gap: .55rem;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  padding-left: 0;
}
.home-main .value-row .value-item::before { display: none; }
.home-main .value-row .value-icon {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  font-size: .95rem;
  height: 1.2rem;
  justify-content: center;
  line-height: 1;
  margin-top: .02rem;
  width: 1.2rem;
}
.home-main .value-row .value-text { display: block; min-width: 0; }
.home-main .value-row .value-text > span { display: block; }
.home-main .value-row .value-free .value-icon { color: #4be5b5; }
.home-main .value-row .value-feedback .value-icon { color: #f2c463; }
.home-main .value-row .value-evolve .value-icon { color: #53c8ef; }
.home-main .value-row .value-talent .value-icon { color: #b8df6d; }

/* Selector de idioma: compacto en la barra y consistente con el menú de perfil. */
.language-selector { align-items: center; display: inline-flex; }
.day-state {
  align-items: center;
  display: inline-flex;
  font-size: 1.15rem;
  height: 32px;
  justify-content: center;
  text-shadow: 0 0 12px currentColor;
  width: 28px;
}
.day-state.is-morning { color: #f4c66f; }
.day-state.is-day { color: #f9dc7c; }
.day-state.is-evening { color: #e69a79; }
.day-state.is-night { color: #6b9b8f; }
.language-menu { position: relative; }
.language-trigger {
  align-items: center;
  background: rgba(11, 21, 19, .74);
  border: 1px solid rgba(154, 167, 163, .2);
  border-radius: .45rem;
  color: #e3ede9;
  cursor: pointer;
  display: inline-flex;
  font-size: .72rem;
  font-weight: 780;
  gap: .32rem;
  list-style: none;
  min-height: 32px;
  padding: 0 .48rem;
}
.language-trigger::-webkit-details-marker { display: none; }
.language-trigger:hover { border-color: var(--np-green-border); color: #fff; }
.language-menu[open] .language-trigger { border-color: var(--np-green); }
.language-chevron { border-bottom: 1.5px solid currentColor; border-right: 1.5px solid currentColor; color: #8fa39a; display: inline-block; font-size: 0; height: .38rem; margin: -.1rem .1rem 0 .2rem; transform: rotate(45deg); vertical-align: middle; width: .38rem; }
.language-popover {
  background: rgba(11, 21, 19, .96);
  backdrop-filter: blur(14px);
  border: 1px solid #263531;
  border-radius: .65rem;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .42);
  display: grid;
  gap: .15rem;
  min-width: 168px;
  padding: .4rem;
  position: absolute;
  right: 0;
  top: calc(100% + .55rem);
  z-index: 20;
}
.language-choice {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: .4rem;
  color: #cbd6d1;
  cursor: pointer;
  display: grid;
  font: inherit;
  font-size: .76rem;
  gap: .48rem;
  grid-template-columns: 1.2rem 1fr 1rem;
  padding: .48rem .5rem;
  text-align: left;
}
.language-choice:hover, .language-choice[aria-checked="true"] { background: var(--np-green-bg); color: #fff; }
.language-check { color: var(--np-green-soft); font-weight: 900; text-align: right; }

/* Espacio de creador y cola manual de moderación. */
.creator-page { display: grid; gap: 1rem; margin: 0 auto; max-width: 980px; padding: 3.25rem 2rem 5rem; }
.creator-panel { background: var(--np-card); border: 1px solid var(--panel-border); border-radius: .8rem; padding: 1.35rem; }
.creator-panel h1, .creator-panel h2, .creator-panel h3 { margin-top: 0; }
.creator-panel > p { color: #b6c3bd; line-height: 1.55; }
.creator-shortcuts { display: flex; flex-wrap: wrap; gap: .7rem; }
.creator-shortcuts a { align-items: center; display: inline-flex; justify-content: center; min-height: 2.8rem; text-decoration: none; }
.creator-form { display: grid; gap: .9rem; margin-top: 1.2rem; max-width: 700px; }
.creator-form label { color: #d2e0da; display: grid; font-size: .82rem; font-weight: 700; gap: .42rem; }
.creator-form input, .creator-form textarea, .creator-form select { background: #0a1513; border: 1px solid #2c3a36; border-radius: .5rem; color: #f2f0f7; font: inherit; padding: .72rem .8rem; }
.creator-form input[type="file"] { color: #b3c0ba; cursor: pointer; padding: .42rem; }
.creator-form input[type="file"]::file-selector-button { background: var(--np-green-dark); border: 1px solid var(--np-green-border); border-radius: .35rem; color: var(--np-green-soft); cursor: pointer; font: inherit; font-size: .75rem; font-weight: 700; margin-right: .7rem; padding: .45rem .6rem; }
.creator-form textarea { min-height: 112px; resize: vertical; }
.creator-form input:focus, .creator-form textarea:focus, .creator-form select:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--np-green-bg); outline: 0; }
.creator-form select[multiple] { min-height: 9.5rem; padding: .35rem; }
.creator-form select[multiple] option { border-radius: .28rem; padding: .42rem .5rem; }
.creator-form .primary-button { border: 0; cursor: pointer; justify-self: start; }
.creator-games { padding-bottom: .8rem; }
.creator-game-list, .review-list { display: grid; gap: .7rem; }
.creator-game-item, .review-item { align-items: center; border-top: 1px solid var(--border-subtle); display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; padding: .9rem 0; }
.creator-game-item h3, .review-item h3 { margin-bottom: .25rem; }
.creator-game-item p, .review-item p { color: #a6b2ac; font-size: .82rem; margin: 0; }
.creator-game-metadata, .review-metadata { color: var(--np-green-soft) !important; font-size: .74rem !important; margin-top: .4rem !important; }
.creator-metadata { grid-column: 1 / -1; }
.creator-metadata summary { color: var(--np-green-soft); cursor: pointer; font-size: .78rem; font-weight: 700; width: fit-content; }
.creator-metadata[open] summary { margin-bottom: .15rem; }
.creator-collapsible-fields { border-top: 1px solid #223530; grid-column: 1 / -1; margin-top: .3rem; padding-top: .8rem; }
.creator-collapsible-fields summary { color: var(--np-green-soft); cursor: pointer; font-size: .78rem; font-weight: 700; width: fit-content; }
.creator-collapsible-fields[open] summary { margin-bottom: .6rem; }
.creator-collapsible-fields label { margin-top: .6rem; }
.creator-form-subheading { border-top: 1px solid #223530; color: #c7d3ce; font-size: .74rem; font-weight: 800; letter-spacing: .04em; margin: 1.1rem 0 0; padding-top: .9rem; text-transform: uppercase; }
summary + .creator-form-subheading { border-top: 0; margin-top: 0; padding-top: 0; }
.creator-metadata-form { margin-top: .7rem; max-width: 520px; }
.creator-updates { margin-top: .7rem; max-width: 520px; }
.creator-updates-list { display: grid; gap: .6rem; margin-bottom: 1rem; }
.creator-update-item { align-items: start; background: #0a1513; border: 1px solid #2c3a36; border-radius: .5rem; display: flex; gap: .75rem; justify-content: space-between; padding: .7rem .8rem; }
.creator-update-item strong { color: #e9f5f0; display: block; font-size: .82rem; }
.creator-update-item p { color: #a4b0aa; font-size: .76rem; margin: .3rem 0 0; }
.creator-update-item .danger-button { flex: 0 0 auto; font-size: .72rem; padding: .5rem .7rem; }
.creator-form label[hidden] { display: none; }
.creator-game-item .secondary-button, .review-actions .secondary-button { cursor: pointer; font-size: .75rem; padding: .6rem .75rem; }
.creator-status { border: 1px solid currentColor; border-radius: 999px; font-size: .7rem; font-weight: 800; padding: .35rem .55rem; white-space: nowrap; }
.creator-status.is-draft { color: #a7b3ae; }
.creator-status.is-pending_review { color: #e9c16d; }
.creator-status.is-published { color: var(--np-green-soft); }
.creator-status.is-rejected { color: #f28d9a; }
.review-note { color: #efb0ba !important; grid-column: 1 / -1; }
.creator-message { background: rgba(175, 67, 94, .14); border: 1px solid rgba(243, 133, 154, .34); border-radius: .55rem; color: #ffc2cb; padding: .8rem; }
.floating-notice {
  align-items: start;
  background: rgba(47, 18, 31, .97);
  border: 1px solid rgba(246, 128, 151, .66);
  border-radius: .7rem;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .48);
  color: #ffe2e7;
  display: flex;
  font-size: .85rem;
  gap: 1rem;
  line-height: 1.4;
  max-width: min(390px, calc(100vw - 2rem));
  padding: .85rem .9rem .85rem 1rem;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
}
.floating-notice.is-success { background: rgba(10, 54, 39, .97); border-color: rgba(91, 220, 158, .7); color: #d4ffe8; }
.floating-notice.is-warning { background: rgba(70, 53, 14, .97); border-color: rgba(239, 196, 90, .74); color: #fff1c4; }
.floating-notice-icon { align-items: center; border: 1px solid currentColor; border-radius: 50%; display: inline-flex; flex: 0 0 auto; font-size: .73rem; font-weight: 900; height: 1.25rem; justify-content: center; line-height: 1; margin-top: .05rem; width: 1.25rem; }
.floating-notice.is-error .floating-notice-icon { color: #ffabbc; }
.floating-notice.is-success .floating-notice-icon { color: #8af0bb; }
.floating-notice.is-warning .floating-notice-icon { color: #f6d273; }
.floating-notice.is-link { cursor: pointer; }
.floating-notice.is-link:hover { filter: brightness(1.12); }
.floating-notice-link { align-items: start; color: inherit; display: flex; flex: 1; gap: 1rem; text-decoration: none; }
.floating-notice-link:hover .floating-notice-go { transform: translateX(3px); }
.floating-notice-link:focus-visible { border-radius: .4rem; outline: 2px solid currentColor; outline-offset: 3px; }
.floating-notice-go { align-self: center; flex: 0 0 auto; font-size: 1.3rem; line-height: 1; opacity: .8; transition: transform .12s; }
.floating-notice button { background: transparent; border: 0; color: currentColor; cursor: pointer; font-size: 1.3rem; line-height: .8; padding: .1rem; }

/* Una portada real sustituye por completo el arte de reserva; nunca se mezclan ambos. */
.hero-art-space.hero-has-cover { background: var(--np-bg) !important; }
.hero-art-space.hero-has-cover > .hero-aurora,
.hero-art-space.hero-has-cover > .hero-stars,
.hero-art-space.hero-has-cover > .mountain-range { opacity: 0; }
.hero-art-space.hero-has-cover > p { display: none; }
.review-item small { color: #9dab9f; display: block; margin-top: .4rem; }
.review-item a { color: var(--np-green-soft); display: inline-block; font-size: .75rem; margin-top: .55rem; overflow-wrap: anywhere; }
.review-actions { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end; }
.review-actions .primary-button { border: 0; cursor: pointer; font-size: .75rem; margin: 0; padding: .68rem .8rem; }
.featured-position-label { color: #c2ccc7; display: grid; font-size: .72rem; font-weight: 700; gap: .3rem; }
.admin-recognition-badge { align-items: end; display: flex; gap: .55rem; }
.admin-recognition-badge label { color: #c2ccc7; display: grid; font-size: .72rem; font-weight: 700; gap: .3rem; }
.admin-recognition-badge select { background: #0a1513; border: 1px solid #2c3a36; border-radius: .45rem; color: #f2f0f7; font: inherit; padding: .5rem .6rem; }
.admin-recognition-badge .secondary-button { cursor: pointer; font-size: .75rem; margin: 0; padding: .55rem .8rem; }
.review-change-note { background: var(--np-green-bg); border: 1px solid var(--np-green-border); border-radius: .5rem; color: var(--np-green-soft); font-size: .78rem; line-height: 1.5; margin-top: .5rem; padding: .5rem .7rem; }
.featured-position-label select { background: #0a1513; border: 1px solid #2c3a36; border-radius: .42rem; color: #f2f0f7; font: inherit; padding: .45rem .55rem; }

@media (max-width: 700px) {
  .creator-page { padding: 2rem 1.25rem 4rem; }
  .creator-game-item, .review-item { align-items: start; grid-template-columns: 1fr; }
  .review-actions { justify-content: flex-start; }
}

@media (max-width: 700px) {
  .language-trigger { min-height: 30px; }
  .language-popover { right: 0; }
}

@media (max-width: 900px) {
  .hero-carousel-overlay {
    bottom: 2.2rem;
    right: 2rem;
    width: min(370px, calc(100% - 4rem));
  }
}

@media (max-width: 700px) {
  .hero-carousel-overlay {
    bottom: 1.35rem;
    right: 1.25rem;
    width: min(340px, calc(100% - 2.5rem));
  }
  .hero-carousel-overlay .hero-project-card {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 106px;
  }
  .home-main .hero-art-space { clip-path: none; }
}

/* Interacciones de comunidad: contenido visible solo tras pasar la moderación. */
.game-favorite-panel { align-items: center; display: flex; gap: .55rem; margin-left: auto; }
.favorite-button {
  align-items: center;
  background: var(--np-green-bg);
  border: 1px solid var(--np-green-border);
  border-radius: .55rem;
  color: var(--np-green-soft);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: .8rem;
  font-weight: 750;
  gap: .35rem;
  min-height: 2.35rem;
  padding: 0 .8rem;
  text-decoration: none;
}
.favorite-button:hover { background: rgba(0, 245, 155, .16); border-color: var(--np-green); color: #fff; }
.favorite-button.is-favorited { background: rgba(0, 255, 136, .2); border-color: var(--np-green-bright); color: #d8ffec; }
.favorite-button:disabled { cursor: wait; opacity: .68; }
.game-library-panel { align-items: center; display: flex; gap: .55rem; }
.library-button {
  align-items: center;
  background: rgba(51, 107, 149, .14);
  border: 1px solid rgba(103, 173, 221, .4);
  border-radius: .55rem;
  color: #b8ddff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: .8rem;
  font-weight: 750;
  min-height: 2.35rem;
  padding: 0 .8rem;
  text-decoration: none;
}
.library-button:hover { background: rgba(55, 125, 178, .3); border-color: #8ed0ff; color: #fff; }
.library-button.is-in-library { background: rgba(66, 140, 183, .22); border-color: rgba(139, 216, 255, .7); color: #e5f6ff; }
.library-button:disabled { cursor: wait; opacity: .68; }
.game-wishlist-panel { align-items: center; display: flex; gap: .55rem; }
.wishlist-button { align-items: center; background: rgba(176, 124, 255, .12); border: 1px solid rgba(176, 124, 255, .42); border-radius: .55rem; color: #dcc8ff; cursor: pointer; display: inline-flex; font: inherit; font-size: .8rem; font-weight: 750; min-height: 2.35rem; padding: 0 .8rem; text-decoration: none; }
.wishlist-button:hover { background: rgba(176, 124, 255, .26); border-color: #c9a6ff; color: #fff; }
.wishlist-button.is-wishlisted { background: rgba(176, 124, 255, .28); border-color: rgba(201, 166, 255, .8); color: #f3eaff; }
.wishlist-button:disabled { cursor: wait; opacity: .68; }
.my-dashboard-wishlist-status { color: var(--text-muted); font-size: .72rem; }
.favorite-count { align-items: center; background: rgba(255, 255, 255, .06); border: 1px solid var(--border-subtle); border-radius: 999px; color: #d8e9e0; display: inline-flex; font-size: .78rem; font-variant-numeric: tabular-nums; font-weight: 700; gap: .32rem; padding: .32rem .7rem; }
.favorite-count::before { color: #ff8fae; content: '♥'; font-size: .85rem; line-height: 1; }
.game-community { border-top: 1px solid var(--border-subtle); max-width: 700px; padding: 2.25rem 0 5rem; }
.community-heading { align-items: baseline; display: flex; gap: .7rem; justify-content: space-between; }
.community-heading h2 { margin: 0; }
.comment-count { color: var(--text-muted); font-size: .82rem; }
.comment-form { display: grid; gap: .65rem; margin: 1.25rem 0 2rem; }
.comment-form label { color: #d4e2dc; display: grid; font-size: .8rem; font-weight: 750; gap: .45rem; }
.comment-form textarea {
  background: #0a1513;
  border: 1px solid #2c3a36;
  border-radius: .6rem;
  color: #f2f0f7;
  font: inherit;
  line-height: 1.5;
  min-height: 108px;
  padding: .72rem .8rem;
  resize: vertical;
}
.comment-form textarea:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--np-green-bg); outline: 0; }
.comment-form .primary-button { border: 0; cursor: pointer; justify-self: start; }
.comment-form .primary-button:disabled { cursor: wait; opacity: .7; }
.comment-hint, .comment-sign-in, .comment-empty { color: var(--text-muted); font-size: .82rem; line-height: 1.5; margin: 0; }
.comment-sign-in { background: var(--np-green-bg); border: 1px solid var(--np-green-border); border-radius: .6rem; margin: 1.15rem 0 1.7rem; padding: .8rem .9rem; }
.comment-sign-in a { color: var(--np-green-soft); font-weight: 800; }
.comment-list { display: grid; gap: .7rem; }
.comment-item { background: rgba(11, 21, 19, .78); border: 1px solid #263531; border-radius: .7rem; padding: .9rem 1rem; }
.comment-item-header { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; }
.comment-author { align-items: center; display: inline-flex; gap: .45rem; }
.comment-author-link { align-items: center; color: inherit; display: inline-flex; gap: .45rem; text-decoration: none; }
.comment-author-link:hover strong, .comment-author-link:focus-visible strong { color: var(--np-green-soft); text-decoration: underline; }
.comment-author-link:focus-visible, .developer-profile-link:focus-visible { border-radius: .2rem; outline: 2px solid var(--np-green); outline-offset: .16rem; }
.comment-avatar { align-items: center; background: linear-gradient(135deg, #d29a73, #2d4f43); border-radius: 50%; color: #fff; display: inline-flex; font-size: .62rem; font-weight: 850; height: 1.55rem; justify-content: center; overflow: hidden; width: 1.55rem; }
.comment-avatar img { height: 100%; object-fit: cover; width: 100%; }
.comment-item-header strong { color: #e8f2ed; font-size: .82rem; }
.comment-date { color: #909c96; font-size: .73rem; }
.comment-status { background: rgba(231, 183, 81, .14); border: 1px solid rgba(231, 183, 81, .36); border-radius: 999px; color: #f2ce76; font-size: .67rem; font-weight: 800; padding: .22rem .45rem; }
.comment-body { color: #c3d0ca; line-height: 1.55; margin: .55rem 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.comment-report { background: transparent; border: 0; color: #93a19c; cursor: pointer; font: inherit; font-size: .7rem; margin-top: .7rem; padding: 0; }
.comment-report:hover { color: var(--np-green-soft); text-decoration: underline; }
.comment-report:disabled { cursor: wait; opacity: .65; }
.comment-delete { margin-left: .9rem; }
.comment-delete:hover { color: #ffb3c1; }
.comment-review-body { color: #dde9e4 !important; line-height: 1.5; margin-top: .45rem !important; white-space: pre-wrap; }

@media (max-width: 700px) {
  .game-favorite-panel { margin-left: 0; }
  .game-library-panel { width: 100%; }
  .game-community { padding-bottom: 3.5rem; }
}

/* Perfil de jugador: alias público y biblioteca privada de favoritos. */
.profile-page { margin: 0 auto; max-width: 980px; padding: 3.2rem 2rem 5rem; }
.profile-heading { max-width: 680px; }
.profile-heading h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); margin: .35rem 0 .8rem; }
.profile-heading > p:not(.eyebrow), .profile-favorites > p { color: #b8c4bf; line-height: 1.6; }
.profile-account-summary { background: rgba(11, 21, 19, .76); border: 1px solid #263531; border-radius: .7rem; display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.2rem; padding: .82rem .9rem; }
.profile-account-summary div { min-width: 0; }
.profile-account-summary span { color: #8f9c96; display: block; font-size: .66rem; font-weight: 720; letter-spacing: .03em; text-transform: uppercase; }
.profile-account-summary strong { color: #e9f5f0; display: block; font-size: .82rem; margin-top: .28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-editor, .profile-favorites { background: var(--np-card); border: 1px solid var(--panel-border); border-radius: .95rem; margin-top: 1.75rem; padding: 1.3rem; }
.profile-form { align-items: center; display: grid; gap: 1.3rem; grid-template-columns: 112px minmax(0, 1fr); }
.profile-avatar-preview { align-items: center; background: linear-gradient(135deg, #d29a73, #2d4f43 58%, #12221e); border: 3px solid var(--np-green); border-radius: 50%; color: #fff; display: flex; font-size: 2.15rem; font-weight: 850; height: 104px; justify-content: center; overflow: hidden; width: 104px; }
.profile-avatar-preview img { height: 100%; object-fit: cover; width: 100%; }
.profile-avatar-preview.is-default-avatar { background: transparent; border: 0; }
.profile-fields { display: grid; gap: .9rem; max-width: 620px; }
.profile-fields label { color: #d4e2dc; display: grid; font-size: .82rem; font-weight: 750; gap: .42rem; }
.profile-fields input[type="text"] { background: #0a1513; border: 1px solid #2c3a36; border-radius: .5rem; color: #f2f0f7; font: inherit; padding: .72rem .8rem; }
.profile-fields input[type="text"]:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--np-green-bg); outline: 0; }
.profile-fields input[type="file"] { color: #b3c0ba; cursor: pointer; }
.profile-fields input[type="file"]::file-selector-button { background: var(--np-green-dark); border: 1px solid var(--np-green-border); border-radius: .35rem; color: var(--np-green-soft); cursor: pointer; font: inherit; font-size: .75rem; font-weight: 700; margin-right: .7rem; padding: .45rem .6rem; }
.profile-field-hint { color: #8f9c96; font-size: .73rem; font-weight: 500; line-height: 1.4; }
.profile-upload-status { background: #10201a; border: 1px solid #2c4a3d; border-radius: .45rem; color: #c4e5d5; font-size: .72rem; font-weight: 600; line-height: 1.4; margin: .1rem 0 0; padding: .45rem .55rem; }
.profile-upload-status.is-ready { color: var(--np-green-soft); }
.profile-upload-status.is-loading { border-color: var(--np-green); color: #d8ffe8; }
.profile-upload-status.is-success { border-color: rgba(87, 205, 155, .54); color: #aeeacb; }
.profile-upload-status.is-error { background: rgba(84, 26, 40, .46); border-color: rgba(239, 128, 151, .62); color: #ffc2cd; }
.profile-fields .primary-button { border: 0; cursor: pointer; justify-self: start; }
.profile-fields .primary-button:disabled { cursor: wait; opacity: .7; }
.profile-favorites h2 { margin: 0; }
.profile-favorites-grid { display: grid; gap: .8rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.2rem; }
.profile-favorite-card { background: #0a1210; border: 1px solid #223530; border-radius: .65rem; color: inherit; overflow: hidden; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.profile-favorite-card:hover { border-color: var(--np-green-border); box-shadow: 0 0 18px var(--np-green-glow); transform: translateY(-2px); }
.profile-favorite-card img, .profile-favorite-cover-placeholder { background: linear-gradient(135deg, #123328, #0e1a17); display: block; height: 120px; object-fit: cover; width: 100%; }
.profile-favorite-card > div:last-child { padding: .75rem; }
.profile-favorite-card h3 { color: #eef7f2; font-size: .9rem; margin: 0; }
.profile-favorite-card p { color: #a6b2ac; font-size: .75rem; margin: .35rem 0 0; }
.profile-empty { margin-bottom: 1rem; }

@media (max-width: 700px) {
  .profile-page { padding: 2rem 1.25rem 4rem; }
  .profile-form { align-items: start; grid-template-columns: 1fr; }
  .profile-favorites-grid { grid-template-columns: 1fr; }
}

/* Mi NodusPlay: centro personal para descubrir y gestionar la actividad propia. */
.my-nodusplay-page { margin: 0 auto; max-width: 1560px; padding: 2.5rem clamp(1.25rem, 3.2vw, 3.5rem) 5.5rem; }
.my-nodus-hero {
  background: linear-gradient(125deg, #081512 0%, #0a1815 62%, #0c2a20 100%);
  border: 1px solid var(--np-green-border);
  border-radius: 1.1rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, .9fr);
  min-height: 340px;
  overflow: hidden;
  padding: 3rem clamp(1.35rem, 4vw, 4rem) 5.9rem;
  position: relative;
}
.my-nodus-hero::before {
  background: radial-gradient(ellipse 63% 135% at 94% 40%, rgba(0, 245, 155, .32) 0%, rgba(0, 255, 136, .16) 34%, rgba(10, 26, 21, .08) 59%, transparent 75%), radial-gradient(ellipse 34% 60% at 79% 73%, rgba(50, 230, 161, .22), transparent 70%);
  content: '';
  inset: 0;
  position: absolute;
}
.my-nodus-hero::after {
  background: linear-gradient(90deg, #081512 0%, rgba(8, 21, 18, .93) 36%, rgba(8, 21, 18, .36) 66%, transparent 100%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.my-nodus-copy { align-self: center; max-width: 660px; position: relative; z-index: 2; }
.my-nodus-copy h1 { font-size: clamp(2.4rem, 4.3vw, 4.25rem); letter-spacing: -.055em; line-height: 1.03; margin: .5rem 0 .9rem; }
.my-nodus-copy h1 span { background: linear-gradient(90deg, var(--np-green-bright) 0%, var(--np-green) 62%, var(--np-green-soft) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.my-nodus-copy > p:not(.eyebrow) { color: #c2ccc6; font-size: 1rem; line-height: 1.6; margin: 0; max-width: 555px; }
.my-nodus-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.45rem; }
.my-nodus-actions .primary-button, .my-nodus-actions .secondary-button { margin: 0; }
.my-nodus-visual { align-items: center; display: flex; justify-content: center; min-height: 170px; position: relative; z-index: 2; }
.my-nodus-visual::before, .my-nodus-visual::after { border: 1px solid rgba(0, 245, 155, .18); border-radius: 50%; content: ''; position: absolute; }
.my-nodus-visual::before { height: 220px; width: 220px; }
.my-nodus-visual::after { height: 300px; opacity: .56; width: 300px; }
.my-user-avatar { align-items: center; background: linear-gradient(135deg, #d29a73, #2d4f43 52%, #12221e); border: 3px solid var(--np-green); border-radius: 50%; box-shadow: 0 0 0 10px var(--np-green-bg), 0 1.4rem 3rem rgba(0, 0, 0, .38); color: #fff; display: flex; font-size: 3.7rem; font-weight: 850; height: 145px; justify-content: center; overflow: hidden; position: relative; width: 145px; z-index: 1; }
.my-user-avatar img { height: 100%; object-fit: cover; width: 100%; }
.my-user-avatar.is-default-avatar { background: transparent; border: 0; }
.my-nodus-stats { backdrop-filter: blur(12px); background: rgba(8, 18, 16, .7); border: 1px solid rgba(0, 245, 155, .16); border-radius: .75rem; bottom: 1.15rem; display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); left: 3rem; position: absolute; right: 3rem; z-index: 3; }
.my-stat { min-width: 0; padding: .85rem 1.1rem; position: relative; }
.my-stat + .my-stat::before { background: rgba(154, 167, 163, .2); bottom: .68rem; content: ''; left: 0; position: absolute; top: .68rem; width: 1px; }
.my-stat strong { color: #eff8f3; display: block; font-size: 1.12rem; }
.my-stat span { color: #a3b0aa; display: block; font-size: .72rem; margin-top: .12rem; }
.my-nodus-navigator { align-items: center; background: linear-gradient(110deg, rgba(14, 26, 22, .92), rgba(10, 20, 17, .92)); border: 1px solid #263531; border-radius: .9rem; display: flex; gap: 1.25rem; justify-content: space-between; margin-top: 1.15rem; padding: 1rem 1.25rem; }
.my-nodus-navigator .eyebrow { font-size: .64rem; margin: 0 0 .22rem; }
.my-nodus-navigator h2 { font-size: 1rem; margin: 0; }
.my-nodus-nav-links { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end; }
.my-nodus-nav-link { align-items: center; background: rgba(0, 245, 155, .08); border: 1px solid var(--np-green-border); border-radius: .48rem; color: #d7e6df; display: inline-flex; font-size: .76rem; font-weight: 760; min-height: 2.1rem; padding: 0 .75rem; text-decoration: none; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.my-nodus-nav-link:hover { background: rgba(0, 245, 155, .18); border-color: var(--np-green); color: #fff; }
.my-nodus-nav-link.is-projects { background: rgba(0, 255, 136, .14); border-color: var(--np-green-bright); }
.my-game-shelf { background: linear-gradient(135deg, rgba(11, 21, 19, .82), rgba(9, 17, 15, .64)); border: 1px solid #223530; border-radius: 1rem; margin-top: 1.15rem; padding: 1.35rem; }
.my-project-shelf { background: linear-gradient(126deg, rgba(10, 42, 34, .78), rgba(9, 17, 15, .82) 58%); border-color: var(--np-green-border); margin-top: 1.45rem; }
.my-recycle-bin { background: rgba(20, 18, 18, .66); border-color: rgba(128, 94, 94, .38); }
.my-shelf-heading { align-items: end; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1.05rem; }
.my-shelf-heading h2 { font-size: 1.45rem; margin: 0; }
.my-shelf-heading p { color: #a3b0aa; font-size: .82rem; margin: .35rem 0 0; }
.my-shelf-link { color: var(--np-green-soft); font-size: .78rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.my-shelf-link:hover { color: var(--np-green-bright); text-decoration: underline; }
.my-game-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(200px, 235px)); justify-content: start; }
.my-game-card { background: var(--np-card); border: 1px solid var(--panel-border); border-radius: .72rem; color: inherit; display: block; min-width: 0; overflow: hidden; position: relative; text-decoration: none; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
.my-game-card:hover { background: var(--np-card-hover); border-color: rgba(57, 251, 177, .25); transform: translateY(-3px); }
.my-game-card > img, .my-game-cover-placeholder { background: linear-gradient(135deg, #123328, #0e1a17 55%, #0a2a22); display: block; height: 132px; object-fit: cover; transition: filter .2s ease, transform .2s ease; width: 100%; }
.my-game-card:hover > img { filter: brightness(1.08); transform: scale(1.018); }
.my-game-card .catalog-badge { left: .7rem; top: 0; }
.my-game-content { padding: .72rem .75rem .68rem; }
.my-game-content h3 { color: #eef7f2; font-size: .88rem; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-project-title { color: inherit; text-decoration: none; }
.my-project-title:hover { color: var(--np-green-soft); text-decoration: underline; }
.my-game-content > p { color: #a2afa9; font-size: .7rem; margin: .28rem 0 .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-game-footer { align-items: center; color: #afbcb6; display: flex; font-size: .68rem; gap: .55rem; }
.my-project-footer { margin-bottom: .7rem; }
.my-project-status { color: var(--np-green-soft); font-weight: 760; }
.my-project-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.my-project-actions .secondary-button, .my-project-actions .danger-button { align-items: center; border-radius: .42rem; cursor: pointer; display: inline-flex; font-size: .68rem; justify-content: center; margin: 0; min-height: 2rem; padding: .35rem .55rem; text-decoration: none; }
.my-project-actions .danger-button { border: 1px solid rgba(210, 103, 127, .62); }
.my-project-actions button:disabled { cursor: wait; opacity: .65; }
.my-recycle-list { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.my-recycle-item { align-items: center; background: rgba(9, 15, 13, .62); border: 1px solid rgba(103, 91, 91, .42); border-radius: .65rem; display: flex; gap: 1rem; justify-content: space-between; padding: .82rem .9rem; }
.my-recycle-item h3 { color: #e9f3ed; font-size: .86rem; margin: 0; }
.my-recycle-item p { color: #a4b0aa; font-size: .7rem; margin: .22rem 0 0; }
.my-developer-avatar { align-items: center; background: linear-gradient(135deg, #2d6e8f, #0f6b4e); border: 1px solid rgba(213, 242, 227, .3); border-radius: 50%; color: #fff; display: inline-flex; font-size: .53rem; font-weight: 850; height: 1.45rem; justify-content: center; margin-left: auto; overflow: hidden; width: 1.45rem; }
.my-developer-avatar img { height: 100%; object-fit: cover; width: 100%; }
.my-shelf-empty { color: #a3b0aa; line-height: 1.55; margin: 0 0 .85rem; max-width: 650px; }
.my-nodus-sign-in { display: block; min-height: auto; }

@media (max-width: 1200px) {
  .my-game-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 220px)); }
}

@media (max-width: 800px) {
  .my-nodusplay-page { padding: 1.8rem 1.25rem 4rem; }
  .my-nodus-hero { grid-template-columns: 1fr; min-height: 0; padding: 2.2rem 1.35rem 5.85rem; }
  .my-nodus-visual { display: none; }
  .my-nodus-hero::after { background: linear-gradient(90deg, #081512 0%, rgba(8, 21, 18, .8) 64%, rgba(8, 21, 18, .5) 100%); }
  .my-nodus-stats { left: 1.35rem; right: 1.35rem; }
  .my-nodus-navigator { align-items: start; flex-direction: column; }
  .my-nodus-nav-links { justify-content: flex-start; }
  .my-game-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

@media (max-width: 560px) {
  .my-nodus-copy h1 { font-size: 2.35rem; }
  .my-nodus-stats { grid-template-columns: repeat(2, 1fr); }
  .my-stat:nth-child(3)::before { display: none; }
  .my-stat { padding: .58rem .75rem; }
  .my-stat:nth-child(3), .my-stat:nth-child(4) { border-top: 1px solid rgba(195, 201, 228, .15); }
  .my-game-shelf { padding: 1.1rem; }
  .my-shelf-heading { align-items: start; }
  .my-shelf-heading > .my-shelf-link { margin-top: .2rem; }
  .my-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-game-card > img, .my-game-cover-placeholder { height: 112px; }
  .my-recycle-item { align-items: start; flex-direction: column; }
}

/* Mi NodusPlay: dashboard personal. */
.my-nodusplay-page { max-width: 1840px; padding: 1.25rem clamp(1rem, 2.15vw, 2.4rem) 3.5rem; }
.my-nodus-dashboard { align-items: start; display: grid; gap: 1rem; grid-template-columns: 210px minmax(0, 1fr) 292px; }
.my-dashboard-sidebar, .my-dashboard-section, .my-dashboard-widget { background: var(--np-card); border: 1px solid var(--panel-border); border-radius: .75rem; box-shadow: 0 .7rem 2rem rgba(0, 0, 0, .16); }
.my-dashboard-sidebar { display: flex; flex-direction: column; min-height: calc(100vh - 8.1rem); overflow: hidden; position: sticky; top: 1rem; }
.my-sidebar-user { border-bottom: 1px solid rgba(96, 109, 151, .26); padding: 1.05rem 1rem .9rem; }
.my-sidebar-user-header { align-items: center; display: grid; gap: .16rem .65rem; grid-template-columns: 3.1rem minmax(0, 1fr); }
.my-dashboard-avatar { background: linear-gradient(135deg, #0f6b4e, #0a2a22); border: 2px solid var(--np-green); border-radius: 50%; box-shadow: 0 0 0 3px var(--np-green-bg), 0 0 1.1rem var(--np-green-glow); grid-row: 1 / span 2; height: 3rem; overflow: hidden; width: 3rem; }
.my-dashboard-avatar img { height: 100%; object-fit: cover; width: 100%; }
.my-sidebar-user-header strong { color: #f2eef9; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-sidebar-user-header span { color: #9d9aaf; font-size: .64rem; }
/* Mismo relleno sólido que el resto de botones principales (antes usaba un degradado con transparencia y se veía más apagado). */
.my-sidebar-edit { align-items: center; background: var(--np-btn-gradient); border: 1px solid var(--np-btn-border); border-radius: .38rem; box-shadow: 0 0 14px rgba(var(--np-green-rgb), .16), inset 0 1px 0 rgba(255, 255, 255, .3); color: var(--np-on-green); display: flex; font-size: .66rem; font-weight: 780; justify-content: center; margin-top: .85rem; min-height: 2rem; text-decoration: none; transition: box-shadow .18s ease, filter .18s ease; }
.my-sidebar-edit:hover, .my-sidebar-edit:focus-visible { background: var(--np-btn-gradient-hover); box-shadow: 0 0 20px rgba(var(--np-green-rgb), .28), inset 0 1px 0 rgba(255, 255, 255, .35); }
.my-dashboard-navigation { display: grid; gap: .18rem; padding: .75rem .55rem; }
.my-dashboard-nav-item, .my-dashboard-signout { align-items: center; background: transparent; border: 0; border-radius: .42rem; color: #c9c6d5; display: flex; font: inherit; font-size: .72rem; gap: .62rem; min-height: 2.45rem; padding: 0 .68rem; text-align: left; text-decoration: none; width: 100%; }
/* Un color por icono: --tone lo fija data-tone (iconTones en my-nodusplay.js); sin tono se usa el verde de siempre. */
[data-tone='green'] { --tone: #3ddc97; }
[data-tone='blue'] { --tone: #65a9ff; }
[data-tone='pink'] { --tone: #fc5e9a; }
[data-tone='cyan'] { --tone: #5fd8ff; }
[data-tone='violet'] { --tone: #b794ff; }
[data-tone='amber'] { --tone: #f7bd4f; }
[data-tone='orange'] { --tone: #ff8a5c; }
[data-tone='rose'] { --tone: #ff7a7a; }
[data-tone='slate'] { --tone: #a9b1c9; }
[data-tone='teal'] { --tone: #4fd1c5; }
[data-tone='lime'] { --tone: #b5e55c; }
.my-dashboard-nav-item:hover, .my-dashboard-signout:hover { background: color-mix(in srgb, var(--tone, var(--np-green)) 12%, transparent); color: #fff; }
.my-dashboard-nav-item.is-active { background: linear-gradient(90deg, color-mix(in srgb, var(--tone, var(--np-green)) 22%, transparent), color-mix(in srgb, var(--tone, var(--np-green)) 5%, transparent)); box-shadow: inset 2px 0 var(--tone, var(--np-green)); color: #fff; font-weight: 800; }
.my-dashboard-icon { align-items: center; color: var(--tone, var(--np-green-soft)); display: inline-flex; flex: 0 0 auto; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 1.1rem; justify-content: center; line-height: 1; width: 1.15rem; }
.my-dashboard-nav-count { align-items: center; background: rgba(105, 117, 164, .29); border-radius: 999px; color: #e7e2f4; display: inline-flex; font-size: .62rem; height: 1.25rem; justify-content: center; margin-left: auto; min-width: 1.25rem; padding: 0 .35rem .1rem; }
.my-sidebar-bottom { border-top: 1px solid rgba(96, 109, 151, .26); display: grid; gap: .16rem; margin-top: auto; padding: .7rem .55rem; }
.my-dashboard-signout { cursor: pointer; }
.my-sidebar-creator-cta { background: radial-gradient(ellipse 120% 95% at 8% 100%, rgba(0, 245, 155, .28), transparent 66%), #0e1c18; border-top: 1px solid var(--np-green-border); padding: 1rem; }
.my-sidebar-creator-cta strong { color: #faf7ff; display: block; font-size: .78rem; }
.my-sidebar-creator-cta p { color: #bbb4cc; font-size: .66rem; line-height: 1.42; margin: .35rem 0 .75rem; }
.my-sidebar-creator-cta .primary-button { align-items: center; border-radius: .38rem; display: flex; font-size: .68rem; justify-content: center; margin: 0; min-height: 2.25rem; padding: 0 .65rem; text-decoration: none; }
.my-dashboard-main { display: grid; gap: 1rem; min-width: 0; }
.my-dashboard-header { padding: .8rem .1rem .1rem; }
.my-dashboard-header h1 { color: #f6f3fb; font-size: clamp(2rem, 3.5vw, 3.05rem); letter-spacing: -.052em; line-height: 1; margin: 0; }
.my-dashboard-header h1 span { background: linear-gradient(90deg, var(--np-green-bright) 0%, var(--np-green-soft) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.my-dashboard-header > p { color: #b7b3c4; font-size: .86rem; margin: .62rem 0 1.1rem; }
.my-dashboard-stats { display: grid; gap: .62rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.my-dashboard-stat { align-items: center; background: linear-gradient(155deg, #101c19, #0d1614); border: 1px solid rgba(154, 167, 163, .3); border-radius: .58rem; display: grid; gap: .12rem .55rem; grid-template-columns: 1.65rem minmax(0, 1fr); min-height: 3.9rem; padding: .7rem .76rem; }
.my-dashboard-stat .my-dashboard-icon { color: var(--tone, var(--np-green-soft)); font-size: 1.55rem; grid-row: 1 / span 2; width: 1.4rem; }
.my-dashboard-stat strong { color: #fbf9ff; font-size: 1.1rem; line-height: 1; }
.my-dashboard-stat span { color: #b1adbd; font-size: .62rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-dashboard-section { padding: 1rem 1.05rem; }
.my-dashboard-section-heading { align-items: start; display: flex; gap: .75rem; justify-content: space-between; margin-bottom: .85rem; }
.my-dashboard-section-heading > div > div { align-items: center; display: flex; gap: .5rem; }
.my-dashboard-section-heading h2 { color: #f5f2fa; font-size: 1rem; margin: 0; }
.my-dashboard-section-heading p { color: #aaa7b8; font-size: .66rem; line-height: 1.35; margin: .18rem 0 0 1.65rem; }
.my-dashboard-section-heading > .primary-button { border-radius: .4rem; font-size: .67rem; margin: 0; min-height: 2rem; padding: 0 .65rem; text-decoration: none; white-space: nowrap; }
.my-dashboard-count-link { background: rgba(71, 82, 120, .42); border: 1px solid rgba(118, 133, 181, .45); border-radius: .4rem; color: #eeeaff; font-size: .65rem; font-weight: 750; padding: .47rem .62rem; white-space: nowrap; }
.my-dashboard-projects { background: linear-gradient(135deg, rgba(10, 42, 34, .86), rgba(9, 17, 15, .96) 62%); border-color: var(--np-green-border); }
.my-dashboard-project-list { display: grid; gap: .62rem; }
.my-dashboard-project { align-items: stretch; background: rgba(9, 18, 16, .76); border: 1px solid #263531; border-radius: .55rem; display: grid; gap: .78rem; grid-template-columns: 190px minmax(0, 1fr) auto; min-height: 7.2rem; overflow: hidden; padding-right: .75rem; }
.my-dashboard-cover { background: linear-gradient(135deg, #1d2c56, #281b53); display: block; min-height: 100%; overflow: hidden; }
.my-dashboard-cover img { height: 100%; object-fit: cover; transition: transform .2s ease; width: 100%; }
.my-dashboard-cover:hover img { transform: scale(1.04); }
.my-dashboard-cover-placeholder { align-items: center; color: var(--np-green-soft); display: flex; font-size: 2rem; height: 100%; justify-content: center; }
.my-dashboard-project-copy { align-self: center; min-width: 0; padding: .65rem 0; }
.my-dashboard-project-title { color: #faf8ff; display: block; font-size: .84rem; font-weight: 820; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.my-dashboard-project-title:hover { color: var(--np-green-soft); text-decoration: underline; }
.my-dashboard-tags { display: flex; flex-wrap: wrap; gap: .24rem; margin-top: .35rem; }
.my-dashboard-tags span { background: rgba(70, 81, 118, .46); border: 1px solid rgba(110, 126, 174, .34); border-radius: 999px; color: #c2c2d2; font-size: .56rem; line-height: 1; padding: .27rem .4rem; }
.my-dashboard-project-copy > p { color: #b7b2c2; display: -webkit-box; font-size: .67rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.42; margin: .45rem 0; overflow: hidden; }
.my-dashboard-project-status { align-items: center; display: flex; gap: .55rem; }
.my-dashboard-project-status .creator-status { font-size: .57rem; }
.my-dashboard-project-status small { color: #8f8b9d; font-size: .57rem; }
.my-dashboard-project-actions { align-items: center; align-self: center; display: grid; gap: .35rem; grid-template-columns: repeat(2, minmax(0, 1fr)) 1.9rem; width: 14.4rem; }
.my-dashboard-project-actions .secondary-button, .my-dashboard-trash-item .secondary-button, .my-dashboard-completion .secondary-button { align-items: center; border-radius: .36rem; display: inline-flex; font-size: .6rem; justify-content: center; margin: 0; min-height: 1.8rem; padding: 0 .43rem; text-decoration: none; white-space: nowrap; }
.my-dashboard-delete-action { align-items: center; background: rgba(45, 55, 86, .64); border: 1px solid rgba(95, 110, 157, .5); border-radius: .36rem; color: #e4dff0; cursor: pointer; display: flex; grid-column: 3; grid-row: 1 / span 2; height: 100%; justify-content: center; }
.my-dashboard-delete-action:hover { background: rgba(255, 139, 139, .18); border-color: rgba(255, 139, 139, .5); color: #ff8b8b; }
.my-dashboard-trash-icon { height: 1.1rem; width: 1.1rem; }
.my-dashboard-delete-action:disabled, .my-dashboard-project-actions button:disabled { cursor: wait; opacity: .6; }
.my-dashboard-favorites { background: linear-gradient(155deg, rgba(14, 27, 22, .95), rgba(9, 17, 15, .94)); }
.my-dashboard-favorite-list { display: flex; gap: .62rem; overflow-x: auto; padding: .05rem .05rem .42rem; scrollbar-color: var(--np-green) transparent; }
.my-dashboard-favorite { background: #0e1a17; border: 1px solid rgba(0, 245, 155, .22); border-radius: .5rem; flex: 0 0 112px; overflow: hidden; position: relative; }
.my-dashboard-favorite-cover { aspect-ratio: 16 / 10; background: linear-gradient(135deg, #233967, #351c58); display: block; }
.my-dashboard-favorite-cover img { height: 100%; object-fit: cover; width: 100%; }
.my-dashboard-favorite-toggle { align-items: center; background: rgba(20, 12, 22, .82); border: 1px solid rgba(246, 116, 160, .62); border-radius: 50%; color: #ff5894; cursor: pointer; display: flex; font-size: .8rem; height: 1.55rem; justify-content: center; position: absolute; right: .34rem; top: .34rem; width: 1.55rem; }
.my-dashboard-favorite-toggle:hover { background: #7e2d69; color: #fff; }
/* Medidas en píxeles enteros (círculo de 26 px, estrella de 14 px) y la estrella subida 1 px, porque sus puntas inferiores pesan más: queda centrada de verdad. */
.my-dashboard-favorite-toggle { box-sizing: border-box; font-size: 0; height: 26px; padding: 0; width: 26px; }
.my-dashboard-favorite-toggle .ui-glyph { height: 14px; transform: translateY(-1px); width: 14px; }
.my-dashboard-favorite-toggle:disabled { cursor: wait; opacity: .6; }
.my-dashboard-favorite-copy { padding: .5rem .52rem .56rem; }
.my-dashboard-favorite-copy strong { color: #f5f2fb; display: block; font-size: .66rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-dashboard-favorite-copy span { color: #a8a4b7; display: block; font-size: .56rem; margin-top: .22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-dashboard-library { background: linear-gradient(145deg, rgba(16, 33, 53, .94), rgba(10, 17, 31, .96)); border-color: rgba(68, 134, 183, .38); }
.my-dashboard-library-list { display: flex; gap: .62rem; overflow-x: auto; padding: .05rem .05rem .42rem; scrollbar-color: #4c9bd2 transparent; }
.my-dashboard-library-card { background: #101b2e; border: 1px solid rgba(68, 111, 151, .58); border-radius: .52rem; flex: 0 0 128px; overflow: hidden; position: relative; }
.my-dashboard-library-cover { aspect-ratio: 16 / 10; background: linear-gradient(135deg, #1c3b62, #1d2858); display: block; overflow: hidden; }
.my-dashboard-library-cover img { height: 100%; object-fit: cover; transition: transform .2s ease; width: 100%; }
.my-dashboard-library-card:hover .my-dashboard-library-cover img { transform: scale(1.04); }
.my-dashboard-library-copy { padding: .5rem .52rem .58rem; }
.my-dashboard-library-title { color: #f1f5ff; display: block; font-size: .67rem; font-weight: 820; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.my-dashboard-library-title:hover { color: #bae6ff; text-decoration: underline; }
.my-dashboard-library-copy .my-dashboard-tags { margin-top: .27rem; min-height: 1.25rem; }
.my-dashboard-library-copy .my-dashboard-tags span { font-size: .48rem; padding: .19rem .3rem; }
.my-dashboard-library-status { appearance: none; background: rgba(39, 81, 115, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m2 2 4 4 4-4' fill='none' stroke='%23dff4ff' stroke-linecap='round' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .38rem center / .55rem; border: 1px solid rgba(106, 178, 222, .46); border-radius: .32rem; color: #e1f4ff; cursor: pointer; font: inherit; font-size: .53rem; margin-top: .32rem; max-width: 100%; padding: .3rem 1.2rem .3rem .38rem; width: 100%; }
.my-dashboard-library-status:focus { border-color: #9fdbff; box-shadow: 0 0 0 2px rgba(105, 193, 245, .16); outline: 0; }
.my-dashboard-library-status:disabled { cursor: wait; opacity: .6; }
.my-dashboard-library-remove { align-items: center; background: rgba(18, 31, 49, .88); border: 1px solid rgba(127, 188, 228, .48); border-radius: 50%; color: #b9e5ff; cursor: pointer; display: flex; font-size: 1rem; height: 1.5rem; justify-content: center; line-height: 1; padding: 0; position: absolute; right: .34rem; top: .34rem; width: 1.5rem; }
.my-dashboard-library-remove:hover { background: #4d7da0; border-color: #d5f2ff; color: #fff; }
.my-dashboard-library-remove:disabled { cursor: wait; opacity: .6; }
.my-dashboard-recycle { background: linear-gradient(150deg, rgba(30, 20, 24, .78), rgba(14, 19, 17, .9)); border-color: rgba(132, 90, 90, .39); }
/* La nota de los 30 días no puede quedar pegada a la caja de debajo. */
.my-dashboard-recycle > .field-hint { line-height: 1.5; margin: .2rem 0 1rem; }
.my-dashboard-trash-empty { align-items: center; background: rgba(9, 17, 15, .56); border: 1px dashed rgba(154, 167, 163, .4); border-radius: .52rem; display: grid; gap: .1rem .8rem; grid-template-columns: 2.3rem minmax(0, 1fr); min-height: 4.5rem; padding: .65rem .8rem; }
.my-dashboard-trash-empty .my-dashboard-icon { color: #798a83; font-size: 1.8rem; grid-row: 1 / span 2; width: 2rem; }
.my-dashboard-trash-empty strong { color: #eeeaf6; font-size: .73rem; }
.my-dashboard-trash-empty p { color: #a39ead; font-size: .62rem; margin: 0; }
.my-dashboard-trash-list { display: grid; gap: .55rem; }
.my-dashboard-trash-item { align-items: center; background: rgba(9, 17, 15, .58); border: 1px solid rgba(111, 91, 91, .44); border-radius: .48rem; display: flex; justify-content: space-between; padding: .6rem .7rem; }
.my-dashboard-trash-item strong { color: #f0ecf7; display: block; font-size: .72rem; }
.my-dashboard-trash-item span { color: #aaa3b7; display: block; font-size: .58rem; margin-top: .15rem; }
.my-dashboard-trash-item > div:last-child { display: flex; gap: .35rem; }
.my-dashboard-trash-item .danger-button { border-radius: .36rem; font-size: .59rem; margin: 0; min-height: 1.8rem; padding: 0 .45rem; }
.my-dashboard-empty { color: #aca8b9; font-size: .72rem; line-height: 1.55; margin: .4rem 0 .8rem; }
.my-dashboard-rail { display: grid; gap: 1rem; min-width: 0; }
.my-dashboard-widget { padding: .9rem; }
.my-dashboard-widget .my-dashboard-section-heading { margin-bottom: .7rem; }
.my-dashboard-widget .my-dashboard-section-heading h2 { font-size: .83rem; }
.my-dashboard-percent { color: var(--np-green-soft); font-size: .7rem; font-weight: 840; }
.my-dashboard-meter { background: #0a1512; border: 1px solid rgba(154, 167, 163, .35); border-radius: 999px; height: .46rem; overflow: hidden; }
.my-dashboard-meter span { background: linear-gradient(90deg, var(--np-green), var(--np-green-bright)); border-radius: inherit; display: block; height: 100%; transition: width .25s ease; }
.my-dashboard-checklist { display: grid; gap: .38rem; list-style: none; margin: .75rem 0; padding: 0; }
.my-dashboard-checklist li { align-items: center; color: #a6a2b5; display: flex; font-size: .62rem; gap: .45rem; }
.my-dashboard-checklist .my-dashboard-icon { color: #707a9a; font-size: .8rem; width: .9rem; }
.my-dashboard-checklist li.is-done { color: #d5d0df; }
.my-dashboard-checklist li.is-done .my-dashboard-icon { color: #48d991; }
.my-dashboard-completion .secondary-button { width: 100%; }
.my-dashboard-checklist a { color: #d8f5e6; text-decoration: none; }
.my-dashboard-checklist a:hover, .my-dashboard-checklist a:focus-visible { color: var(--np-green-soft); text-decoration: underline; }
.my-dashboard-reward { align-items: center; background: rgba(154, 167, 163, .08); border: 1px dashed rgba(154, 167, 163, .35); border-radius: .45rem; color: #a6a2b5; display: flex; font-size: .6rem; gap: .4rem; line-height: 1.35; margin: .2rem 0 0; padding: .45rem .55rem; }
.my-dashboard-reward .my-dashboard-icon { color: #707a9a; }
.my-dashboard-reward.is-unlocked { background: var(--np-green-bg); border: 1px solid var(--np-green-border); color: var(--np-green-soft); font-weight: 700; }
.my-dashboard-reward.is-unlocked .my-dashboard-icon { color: #f2c463; }
.my-dashboard-phase-done { align-items: center; column-gap: .5rem; display: grid; grid-template-columns: auto 1fr auto; row-gap: .5rem; }
.my-dashboard-phase-done .my-dashboard-icon { color: #48d991; }
.my-dashboard-phase-done strong { color: #d5d0df; font-size: .68rem; }
.my-dashboard-phase-done > span:not(.my-dashboard-icon) { color: var(--np-green-soft); font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.my-dashboard-phase-done .my-dashboard-reward { grid-column: 1 / -1; margin: 0; }
.my-dashboard-all-done { color: var(--np-green-soft); text-align: center; }
.my-dashboard-compact-list { display: grid; gap: .5rem; }
.my-dashboard-compact-game { align-items: center; display: grid; gap: .46rem; grid-template-columns: 1.45rem 3.6rem minmax(0, 1fr) auto; min-height: 2.65rem; }
.my-dashboard-compact-game:has(> .my-dashboard-compact-cover:first-child) { grid-template-columns: 3.6rem minmax(0, 1fr) auto; }
.my-dashboard-compact-cover { background: #253862; border-radius: .32rem; display: block; height: 2.25rem; overflow: hidden; }
.my-dashboard-compact-cover img { height: 100%; object-fit: cover; width: 100%; }
.my-dashboard-rank { align-items: center; background: rgba(76, 85, 128, .62); border-radius: 50%; color: #e9e4f4; display: flex; font-size: .58rem; height: 1.35rem; justify-content: center; width: 1.35rem; }
.my-dashboard-compact-title { color: #ebe8f2; display: block; font-size: .64rem; font-weight: 760; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.my-dashboard-compact-title:hover { color: var(--np-green-soft); text-decoration: underline; }
.my-dashboard-compact-game .my-dashboard-tags { gap: .18rem; margin-top: .22rem; }
.my-dashboard-compact-game .my-dashboard-tags span { font-size: .49rem; padding: .2rem .3rem; }
.my-dashboard-add-favorite { align-items: center; background: rgba(48, 56, 87, .6); border: 1px solid rgba(116, 132, 186, .52); border-radius: .32rem; color: #ded8ec; cursor: pointer; display: flex; font-size: .95rem; height: 1.7rem; justify-content: center; width: 1.7rem; }
.my-dashboard-add-favorite:hover { background: rgba(0, 245, 155, .22); border-color: var(--np-green); color: #fff; }
.my-dashboard-add-favorite:disabled { cursor: wait; opacity: .65; }
.my-dashboard-compact-metric { color: #b9b3ca; font-size: .58rem; white-space: nowrap; }
.my-dashboard-widget-empty { color: #a8a4b5; font-size: .66rem; line-height: 1.5; margin: 0; }
.my-nodus-sign-in { background: var(--np-card); border: 1px solid var(--panel-border); border-radius: .75rem; padding: 2rem; }

@media (max-width: 1320px) {
  .my-nodus-dashboard { grid-template-columns: 195px minmax(0, 1fr) 270px; }
  .my-dashboard-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .my-dashboard-project { grid-template-columns: 170px minmax(0, 1fr); padding-right: .65rem; }
  .my-dashboard-project-actions { grid-column: 2; justify-self: start; width: 14.4rem; }
  .my-dashboard-project-copy { padding-bottom: 0; }
}

@media (max-width: 1050px) {
  .my-nodus-dashboard { grid-template-columns: 195px minmax(0, 1fr); }
  .my-dashboard-rail { grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-dashboard-completion { grid-row: span 2; }
  .my-dashboard-sidebar { grid-row: span 2; }
}

@media (max-width: 760px) {
  .my-nodusplay-page { padding: 1rem .75rem 3rem; }
  .my-nodus-dashboard { grid-template-columns: minmax(0, 1fr); }
  .my-dashboard-sidebar { min-height: 0; position: static; }
  .my-sidebar-user { align-items: center; display: flex; gap: .9rem; justify-content: space-between; }
  .my-sidebar-user-header { flex: 1; }
  .my-sidebar-edit { flex: 0 0 auto; margin: 0; padding: 0 .65rem; }
  .my-dashboard-navigation { display: flex; flex-wrap: wrap; gap: .28rem; padding: .55rem; }
  .my-dashboard-nav-item { flex: 1 1 8rem; min-height: 2.2rem; }
  .my-sidebar-bottom { display: flex; padding: .55rem; }
  .my-sidebar-bottom > * { flex: 1; }
  .my-sidebar-creator-cta { display: none; }
  .my-dashboard-main, .my-dashboard-rail { grid-column: auto; }
  .my-dashboard-rail { grid-template-columns: 1fr; }
  .my-dashboard-completion { grid-row: auto; }
  .my-dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .my-dashboard-header h1 { font-size: 2rem; }
  .my-dashboard-header > p { font-size: .76rem; }
  .my-dashboard-section { padding: .8rem; }
  .my-dashboard-project { grid-template-columns: 104px minmax(0, 1fr); }
  .my-dashboard-project-actions { gap: .28rem; width: 100%; }
  .my-dashboard-project-actions .secondary-button { font-size: .56rem; }
  .my-dashboard-favorite { flex-basis: 104px; }
  .my-dashboard-library-card { flex-basis: 116px; }
  .my-dashboard-trash-item { align-items: start; flex-direction: column; gap: .6rem; }
}

/* Ficha de juego: producto, comunidad y creador en una misma experiencia. */
.game-page { margin: 0; max-width: none; padding: 0 0 5rem; }
.game-detail-shell { margin: 0 auto; max-width: 2100px; padding: 0 clamp(2rem, 4vw, 5rem); }
.game-hero { background: var(--np-bg); isolation: isolate; margin-inline: calc(50% - 50vw); min-height: clamp(20rem, 24vw, 23rem); overflow: hidden; position: relative; width: 100vw; }
.game-hero-owner-actions { display: flex; gap: .5rem; position: absolute; right: clamp(1rem, 3vw, 2.5rem); top: 1rem; z-index: 2; }
.game-hero-edit-link { align-items: center; backdrop-filter: blur(8px); background: rgba(9, 18, 16, .72); border: 1px solid rgba(213, 247, 231, .34); border-radius: .5rem; color: #f1f9f5; display: inline-flex; font-size: .76rem; font-weight: 750; gap: .35rem; padding: .55rem .8rem; text-decoration: none; transition: background .18s ease; white-space: nowrap; }
.game-hero-edit-link:hover { background: rgba(0, 245, 155, .28); }
.game-hero-cover { height: 100%; inset: 0; object-fit: cover; object-position: center; position: absolute; width: 100%; z-index: -2; }
.game-hero-overlay { background: linear-gradient(90deg, rgba(6, 15, 14, .98) 0%, rgba(7, 16, 15, .89) 29%, rgba(7, 16, 15, .47) 55%, rgba(7, 16, 15, .08) 86%), linear-gradient(0deg, rgba(6, 14, 13, .98) 0%, rgba(6, 14, 13, .31) 37%, rgba(6, 14, 13, .13) 100%), radial-gradient(ellipse 72% 105% at 86% 48%, transparent 20%, rgba(4, 11, 10, .3) 100%); inset: 0; pointer-events: none; position: absolute; z-index: -1; }
.game-hero-copy { align-content: start; box-sizing: border-box; display: grid; justify-items: start; margin: 0 auto; max-width: 2100px; min-height: inherit; padding: clamp(1rem, 2.5vw, 2rem) clamp(2rem, 4vw, 5rem); position: relative; width: 100%; }
.game-breadcrumbs { align-items: center; color: #a4b1ac; display: flex; flex-wrap: wrap; font-size: .72rem; gap: .4rem; margin-bottom: clamp(.65rem, 1.25vw, 1rem); }
.game-breadcrumbs a { color: #c0ccc6; text-decoration: none; }
.game-breadcrumbs a:hover { color: var(--np-green-soft); text-decoration: underline; }
.game-breadcrumbs strong { color: #eef6f1; font-weight: 760; }
.game-breadcrumbs span:not(:last-of-type) { color: #6f7c76; }
.game-hero-access { background: var(--np-green-bg); border: 1px solid var(--np-green-border); border-radius: 999px; color: var(--np-green-soft); font-size: .68rem; font-weight: 800; letter-spacing: .035em; padding: .36rem .62rem; text-transform: uppercase; }
.game-hero h1 { color: #fff; font-size: clamp(2.65rem, 4.1vw, 4.3rem); font-weight: 900; letter-spacing: -.03em; line-height: .9; margin: .75rem 0 .7rem; max-width: 11ch; text-shadow: 0 .18rem 1.6rem rgba(0, 0, 0, .52), 0 0 2.5rem var(--np-green-glow); text-transform: uppercase; }
.game-preview-banner { background: rgba(255, 190, 70, .14); border: 1px solid rgba(255, 190, 70, .55); border-radius: .5rem; color: #ffd78a; font-size: .8rem; font-weight: 700; line-height: 1.45; margin: 0 0 .9rem; max-width: 39rem; padding: .55rem .8rem; }
.game-hero-byline { color: #c9d6d0; font-size: .86rem; margin: 0; text-shadow: 0 .1rem .8rem rgba(0, 0, 0, .62); }
.game-hero-byline a { color: #e9f3ee; font-weight: 700; text-decoration: none; }
.game-hero-byline a:hover { text-decoration: underline; }
.game-hero-summary { color: #e2eae5; font-size: clamp(.92rem, 1.25vw, 1.08rem); line-height: 1.58; margin: 0; max-width: 39rem; text-shadow: 0 .1rem .8rem rgba(0, 0, 0, .62); }
.game-hero-tags { display: flex; flex-wrap: wrap; gap: .42rem; margin-top: 1.15rem; }
.game-hero-tags span { backdrop-filter: blur(8px); background: rgba(10, 21, 18, .72); border: 1px solid rgba(222, 247, 236, .18); border-radius: .42rem; color: #e0ece6; font-size: .67rem; font-weight: 700; padding: .38rem .58rem; }
.game-hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.2rem; }
.game-primary-action, .game-sidebar-primary-action { align-items: center; background: var(--np-btn-gradient); border: 1px solid var(--np-btn-border); border-radius: .5rem; box-shadow: 0 0 14px rgba(var(--np-green-rgb), .16); color: var(--np-on-green); display: inline-flex; font-size: .82rem; font-weight: 850; justify-content: center; min-height: 2.7rem; padding: 0 1rem; text-decoration: none; transition: filter .18s ease, transform .18s ease; }
.game-primary-action:hover, .game-sidebar-primary-action:hover { filter: brightness(1.06); transform: translateY(-1px); }
.game-primary-action.is-unavailable, .game-sidebar-primary-action.is-unavailable { background: linear-gradient(112deg, rgba(10, 42, 34, .82), rgba(15, 107, 78, .82)); box-shadow: none; color: #fff; cursor: not-allowed; opacity: .72; }
.game-hero-actions .game-favorite-panel, .game-hero-actions .game-library-panel, .game-hero-actions .game-wishlist-panel { margin: 0; }
.game-hero-actions .wishlist-button { backdrop-filter: blur(8px); background: rgba(24, 14, 40, .69); border-color: rgba(201, 166, 255, .5); color: #f3eaff; min-height: 2.7rem; }
.game-hero-actions .wishlist-button.is-wishlisted { background: rgba(120, 76, 190, .5); border-color: rgba(214, 186, 255, .85); }
.game-hero-actions .favorite-button, .game-hero-actions .library-button { backdrop-filter: blur(8px); background: rgba(9, 18, 16, .69); border-color: rgba(213, 247, 231, .34); color: #f1f9f5; min-height: 2.7rem; }
.game-hero-actions .favorite-button.is-favorited { background: rgba(0, 255, 136, .28); border-color: var(--np-green-bright); }
.game-hero-actions .library-button.is-in-library { background: rgba(66, 116, 164, .42); border-color: rgba(154, 217, 255, .65); }
.game-hero-actions .favorite-count { color: #d8e9e0; }
.game-hero-availability { color: #cfdbd4; font-size: .76rem; line-height: 1.4; max-width: 18rem; }
.game-section-tabs { background: linear-gradient(135deg, rgba(14, 25, 21, .78), rgba(9, 17, 15, .78)); border: 1px solid #263531; border-bottom: 1px solid #253430; border-radius: .7rem .7rem 0 0; display: flex; gap: 1.4rem; margin: -.15rem 0 0; overflow-x: auto; padding: 0 .9rem; scrollbar-width: thin; }
.game-section-tabs a { border-bottom: 2px solid transparent; color: #a4b1ab; flex: 0 0 auto; font-size: .78rem; font-weight: 760; padding: .74rem 0 .68rem; text-decoration: none; transition: color .16s ease, border-color .16s ease; }
.game-section-tabs a:hover, .game-section-tabs a:focus-visible { color: #eafff2; }
.game-section-tabs a.is-active { border-color: var(--np-green); color: #eafff2; }
.game-detail-layout { align-items: start; display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 2fr) minmax(18rem, .82fr); margin-top: 0; }
.game-detail-main { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.game-detail-main > * { min-width: 0; }
.game-media-section { background: var(--np-card); border: 1px solid var(--panel-border); border-radius: .8rem; margin-bottom: 1.1rem; padding: .85rem; position: relative; }
.game-media-placeholder { align-items: center; border: 1px dashed var(--np-green-border); border-radius: .6rem; color: var(--text-muted); display: flex; flex-direction: column; gap: .5rem; justify-content: center; min-height: 200px; padding: 1.5rem; text-align: center; }
.game-media-placeholder-icon { color: #4a6a5f; font-size: 1.8rem; }
.game-media-placeholder p { font-size: .78rem; letter-spacing: .03em; margin: 0; text-transform: uppercase; }
.game-media-form { background: #0a1513; border: 1px solid #2c3a36; border-radius: .6rem; display: grid; gap: .5rem; grid-template-columns: auto 1fr auto; margin: 0 0 .8rem; padding: .8rem; }
.game-media-form select, .game-media-form input { background: #0a1513; border: 1px solid #2c3a36; border-radius: .45rem; color: #f2f0f7; font: inherit; font-size: .78rem; padding: .55rem .6rem; }
.game-media-form .secondary-button { cursor: pointer; font-size: .76rem; margin: 0; padding: .55rem .9rem; }
.game-media-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.game-media-item { background: #0a1512; border: 1px solid #223530; border-radius: .65rem; margin: 0; overflow: hidden; position: relative; }
.game-media-item a { display: block; }
.game-media-item img { aspect-ratio: 16 / 10; display: block; height: auto; object-fit: cover; width: 100%; }
.game-media-video-embed { aspect-ratio: 16 / 9; }
.game-media-video-embed iframe { border: 0; display: block; height: 100%; width: 100%; }
.game-media-video-link { align-items: center; aspect-ratio: 16 / 10; color: var(--np-green-soft); display: flex; flex-direction: column; gap: .4rem; justify-content: center; text-decoration: none; }
.game-media-video-icon { font-size: 1.6rem; }
.game-media-delete { align-items: center; background: rgba(9, 18, 16, .8); border: 1px solid rgba(213, 247, 231, .34); border-radius: 50%; color: #f1f9f5; cursor: pointer; display: flex; font-size: 1rem; height: 1.7rem; justify-content: center; line-height: 1; padding: 0; position: absolute; right: .4rem; top: .4rem; width: 1.7rem; }
.game-media-delete:hover { background: rgba(200, 60, 90, .55); }

@media (max-width: 600px) {
  .game-media-form { grid-template-columns: 1fr; }
}
.game-overview-section { background: var(--np-card); border: 1px solid var(--panel-border); border-radius: .7rem; margin-top: 0; padding: 1.3rem; }
/* Pegada a la barra de pestañas: las esquinas de arriba van rectas y sin borde superior (la barra ya lo pone), para que las dos cajas encajen como una sola. */
.game-section-tabs + .game-overview-section { border-radius: 0 0 .7rem .7rem; border-top: 0; }
.game-overview-section h2, .game-related-section h2 { color: #f5fbf7; font-size: 1.25rem; letter-spacing: -.025em; margin: 0 0 .85rem; }
.game-overview-section > p { color: #c7d3cd; font-size: .92rem; line-height: 1.7; margin: 0; white-space: pre-wrap; }
.game-real-highlights { display: grid; gap: .62rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.35rem; }
.game-real-highlights article { align-items: center; background: linear-gradient(135deg, rgba(14, 31, 26, .78), rgba(10, 20, 17, .78)); border: 1px solid #263531; border-radius: .62rem; display: flex; gap: .65rem; min-height: 4.2rem; padding: .65rem; }
.game-highlight-icon .ui-glyph { height: 1.05rem; width: 1.05rem; }
.game-highlight-icon { align-items: center; background: var(--np-green-bg); border: 1px solid var(--np-green-border); border-radius: .45rem; color: var(--np-green-soft); display: flex; flex: 0 0 auto; font-size: 1rem; height: 2.05rem; justify-content: center; width: 2.05rem; }
.game-real-highlights strong, .game-real-highlights span { display: block; }
/* El recuadro del icono es un span: la regla de arriba lo dejaba en block y el dibujo quedaba pegado a la esquina en vez de centrado. */
.game-real-highlights .game-highlight-icon { display: flex; }
.game-real-highlights strong { color: #ebf5f0; font-size: .66rem; }
.game-real-highlights article div span { color: #a3b0aa; font-size: .59rem; line-height: 1.35; margin-top: .15rem; }

/* Requisitos del sistema */
.game-requirements-section { border-top: 1px solid #223530; margin-top: 1.2rem; padding: 1.5rem .15rem .4rem; }
.game-requirements-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .3rem; }
.game-requirements-column { background: var(--np-card); border: 1px solid var(--panel-border); border-radius: .7rem; padding: 1rem; }
.game-requirements-column h3 { color: #dbe8e2; font-size: .82rem; margin: 0 0 .7rem; }
.game-requirements-row { border-top: 1px solid rgba(154, 167, 163, .18); display: grid; gap: .65rem; grid-template-columns: minmax(5.5rem, .8fr) minmax(0, 1fr); padding: .5rem 0; }
.game-requirements-row:first-of-type { border-top: 0; padding-top: 0; }
.game-requirements-row span { color: #97a49e; font-size: .68rem; }
.game-requirements-row strong { color: #dde9e3; font-size: .72rem; font-weight: 650; text-align: right; }

/* Reseñas y actualizaciones, en dos columnas */
.game-reviews-updates-grid { border-top: 1px solid #223530; display: grid; gap: 1.4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.2rem; padding: 1.5rem .15rem .4rem; }
.game-reviews-updates-grid:has(> :only-child) { grid-template-columns: 1fr; }
.game-reviews-section h2, .game-updates-section h2 { color: #f5fbf7; font-size: 1.1rem; letter-spacing: -.02em; margin: 0 0 .85rem; }
.game-reviews-summary { align-items: center; display: flex; gap: 1.1rem; margin-bottom: 1rem; }
.game-reviews-average { align-items: center; display: grid; flex: 0 0 auto; justify-items: center; }
.game-reviews-average strong { color: #fff; font-size: 1.8rem; letter-spacing: -.03em; }
.game-reviews-average strong small { color: #9ca9a3; font-size: .8rem; font-weight: 600; letter-spacing: 0; margin-left: .1rem; }
.game-reviews-average span { color: #9ca9a3; font-size: .68rem; margin-top: .15rem; }
.review-score { color: var(--np-green); font-size: .85rem; font-weight: 800; white-space: nowrap; }
.review-score small { color: #9ca9a3; font-size: .68rem; font-weight: 600; margin-left: .05rem; }
.game-reviews-distribution { display: grid; flex: 1; gap: .2rem; max-width: 22rem; min-width: 0; }
.game-reviews-distribution-row { align-items: center; display: grid; gap: .5rem; grid-template-columns: 1.1rem 1fr 1.4rem; }
.game-reviews-distribution-row span { color: #97a49e; font-size: .62rem; }
.game-reviews-distribution-row span:last-child { text-align: right; }
.game-reviews-bar { background: rgba(154, 167, 163, .2); border-radius: 999px; display: block; height: .38rem; overflow: hidden; }
.game-reviews-bar span { background: linear-gradient(90deg, var(--np-green), var(--np-green-bright)); display: block; height: 100%; }
.review-form { background: var(--np-bg-2); border: 1px solid var(--border-subtle); border-radius: .7rem; display: grid; gap: .6rem; margin-bottom: 1.1rem; padding: .9rem 1rem; }
.review-form-hint { color: #9ca9a3; font-size: .78rem; margin: 0; }
.score-rating-input { display: flex; flex-wrap: wrap; gap: .3rem; }
.score-rating-input button { background: transparent; border: 1px solid #2c3a36; border-radius: .45rem; color: #dfe9e4; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700; min-width: 2.1rem; padding: .35rem .2rem; }
.score-rating-input button:hover { border-color: var(--np-green); }
.score-rating-input button.is-selected { background: var(--np-green); border-color: var(--np-green); color: #07110d; }
.review-form textarea { background: #0a1513; border: 1px solid #2c3a36; border-radius: .55rem; color: #f2f0f7; font: inherit; min-height: 72px; padding: .6rem .7rem; resize: vertical; }
.review-form .primary-button { border: 0; cursor: pointer; justify-self: start; }
.review-list-public { display: grid; gap: .65rem; }
.review-item-public { background: var(--np-bg-2); border: 1px solid var(--border-subtle); border-radius: .6rem; padding: .75rem .9rem; }
.review-item-public .comment-item-header { justify-content: space-between; }

/* Changelog público */
.game-updates-list-public { display: grid; gap: .7rem; }
.game-update-item-public { background: var(--np-bg-2); border: 1px solid var(--border-subtle); border-radius: .6rem; padding: .8rem .95rem; }
.game-update-header { align-items: center; display: flex; gap: .55rem; justify-content: space-between; }
.game-update-header strong { background: var(--np-green-bg); border-radius: .35rem; color: var(--np-green-soft); font-size: .68rem; font-weight: 800; padding: .2rem .45rem; }
.game-update-header span { color: #8b9793; font-size: .66rem; }
.game-update-item-public h3 { color: #edf6f0; font-size: .84rem; margin: .5rem 0 .3rem; }
.game-update-item-public p { color: #b5c1ba; font-size: .74rem; line-height: 1.5; margin: 0; white-space: pre-wrap; }

@media (max-width: 700px) {
  .game-requirements-grid { grid-template-columns: 1fr; }
  .game-reviews-updates-grid { grid-template-columns: 1fr; }
  .game-reviews-summary { align-items: start; flex-direction: column; }
}
.game-detail-sidebar { display: grid; gap: 1rem; min-width: 0; position: sticky; top: 5.5rem; }
.game-sidebar-card { background: var(--np-card); border: 1px solid var(--panel-border); border-radius: .8rem; overflow: hidden; padding: 1rem; }
.game-access-card { border-color: var(--np-green-border); }
/* La portada llena todo el ancho de la caja, con la proporción de 16:9 que se pide al subirla (antes se centraba encogida en 150 px de alto).
   Esquinas curvas y un relieve «hundido» que va FUERA de la imagen (la sombra y el hilo de luz del propio recuadro, que siguen la curva): así se ve igual
   con portadas claras u oscuras y nunca se pinta sobre la imagen. Dentro solo hay un sombreado suave en la parte baja. */
.game-access-cover { background: var(--np-bg); border-radius: .75rem; box-shadow: 0 1px 0 rgba(255, 255, 255, .1), 0 3px 6px rgba(0, 0, 0, .55); margin: -1rem -1rem 1rem; overflow: hidden; padding: 0; position: relative; }
.game-access-cover::after { background: linear-gradient(to top, rgba(0, 0, 0, .35), transparent); bottom: 0; content: ''; height: 16px; left: 0; pointer-events: none; position: absolute; right: 0; }
.game-access-cover img { aspect-ratio: 16 / 9; display: block; height: auto; object-fit: cover; width: 100%; }
.game-access-heading { align-items: baseline; display: flex; gap: .7rem; justify-content: space-between; }
.game-access-heading h2, .game-creator-card h2 { color: #f3fbf6; font-size: .94rem; margin: 0; }
.game-access-heading strong { color: var(--np-green-soft); font-size: .88rem; }
.game-access-card > p { color: #a3b0aa; font-size: .68rem; line-height: 1.5; margin: .45rem 0 .85rem; }
.game-sidebar-primary-action { margin-bottom: .9rem; width: 100%; }
.game-sidebar-note { color: #a2ada6; font-size: .7rem; line-height: 1.5; margin: 0 0 .85rem; }
.game-metadata-list { border-top: 1px solid rgba(154, 167, 163, .22); display: grid; gap: .85rem; padding-top: .95rem; }
.game-metadata-row { display: grid; gap: .22rem; }
.game-metadata-row span { color: #97a49e; font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.game-metadata-row strong { color: #dde9e3; font-size: .78rem; font-weight: 690; line-height: 1.35; text-align: left; }
.game-sidebar-link { border-top: 1px solid rgba(154, 167, 163, .22); color: var(--np-green-soft); display: block; font-size: .69rem; font-weight: 780; margin-top: .85rem; padding-top: .8rem; text-decoration: none; }
.game-sidebar-link:hover { color: var(--np-green-bright); text-decoration: underline; }
.game-sidebar-actions { border-top: 1px solid rgba(154, 167, 163, .22); display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin-top: .85rem; padding-top: .85rem; }
.game-sidebar-actions .secondary-button { align-items: center; display: inline-flex; font-size: .72rem; justify-content: center; margin: 0; padding: .62rem .5rem; }
.game-creator-card { padding-top: 0; }
.game-creator-banner { display: block; height: 4.65rem; margin: 0 -1rem .9rem; object-fit: cover; width: calc(100% + 2rem); }
.game-creator-identity { align-items: center; display: flex; gap: .7rem; margin-top: .85rem; }
.game-creator-identity img { background: #101c19; border: 2px solid var(--np-green); border-radius: 50%; box-shadow: 0 0 0 3px var(--np-green-bg); height: 2.8rem; object-fit: cover; width: 2.8rem; }
.game-creator-identity strong, .game-creator-identity a { color: #eef6f1; display: block; font-size: .76rem; font-weight: 820; text-decoration: none; }
.game-creator-identity a:hover { color: var(--np-green-soft); text-decoration: underline; }
.game-creator-identity span { color: #a1aca5; display: block; font-size: .61rem; margin-top: .16rem; }
.game-creator-bio { color: #b5c1ba; font-size: .67rem; line-height: 1.52; margin: .85rem 0; }
.game-creator-stats { display: flex; gap: .6rem; }
.game-creator-stats span { border-left: 1px solid rgba(154, 167, 163, .3); color: #bdc9c3; font-size: .6rem; padding-left: .6rem; }
.game-creator-stats span:first-child { border-left: 0; padding-left: 0; }
.game-community { border-top: 1px solid #223530; margin-top: 1.2rem; max-width: none; padding: 1.5rem .15rem 1.2rem; }
.game-community .community-heading h2 { color: #f2faf5; font-size: 1.2rem; }
.game-related-section { border-top: 1px solid #223530; margin-top: 1.2rem; padding: 1.5rem .15rem .4rem; }
.game-related-heading { align-items: center; display: flex; gap: .7rem; justify-content: space-between; margin-bottom: .85rem; }
.game-related-heading h2 { margin: 0; }
.game-related-nav { display: flex; flex: 0 0 auto; gap: .45rem; }
.game-related-nav button { align-items: center; background: rgba(14, 25, 21, .82); border: 1px solid var(--np-green-border); border-radius: 50%; color: #e0f5ea; cursor: pointer; display: flex; font-size: 1.1rem; height: 2rem; justify-content: center; line-height: 1; padding: 0 0 .1rem; width: 2rem; }
.game-related-nav button:hover { background: var(--np-green-bg); border-color: var(--np-green); }
.game-related-nav button:disabled { cursor: not-allowed; opacity: .35; }
.game-related-list { display: flex; gap: .7rem; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; }
/* El carril con scroll recorta lo que sobresale por arriba: las etiquetas de la tarjeta (.card-badges) asoman unos píxeles sobre la caja de la imagen, como en la portada, y el carril las cortaba.
   El relleno superior les deja sitio y el margen negativo mantiene la separación de siempre. */
.game-related-list { margin-top: -.6rem; padding-top: .6rem; }
.game-related-list::-webkit-scrollbar { display: none; }
.game-related-card { background: var(--np-card); border: 1px solid var(--panel-border); border-radius: .58rem; color: inherit; flex: 0 0 200px; overflow: hidden; scroll-snap-align: start; text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.game-related-card:hover { border-color: var(--np-green-border); transform: translateY(-2px); }
.game-related-card img, .game-related-placeholder { background: linear-gradient(135deg, #123328, #0e1a17); display: block; height: 7rem; object-fit: cover; width: 100%; }
.game-related-placeholder { align-items: center; color: var(--np-green-soft); display: flex; font-size: 1.8rem; justify-content: center; }
.game-related-card > div { padding: .52rem .58rem .6rem; }
.game-related-card strong { color: #eef7f2; display: block; font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-related-card span, .game-related-card small { color: #a4b0aa; display: block; font-size: .57rem; margin-top: .24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-related-card small { color: #a8d9c4; }

/* Explorar proyectos: mismas tarjetas que el inicio, pero en filas horizontales, con un
   filtro por género en una barra lateral y un selector de orden arriba del contenido. */
.explore-page { max-width: none; padding-left: 2.5rem; padding-right: 2.5rem; width: 100%; }
.explore-layout { align-items: flex-start; display: flex; gap: 2.5rem; }
.explore-sidebar { flex: 0 0 210px; max-height: calc(100vh - 6.5rem); overflow-y: auto; position: sticky; top: 5.5rem; transition: flex-basis .2s ease; }
.explore-sidebar-toggle { align-items: center; background: rgba(14, 25, 21, .82); border: 1px solid var(--np-green-border); border-radius: 50%; color: #e0f5ea; cursor: pointer; display: flex; font-size: 1.05rem; height: 2rem; justify-content: center; line-height: 1; margin-bottom: .9rem; padding: 0 0 .1rem; width: 2rem; }
.explore-sidebar-toggle:hover { background: var(--np-green-bg); border-color: var(--np-green); }
.explore-sidebar.is-collapsed { flex-basis: 2.6rem; overflow: visible; }
.explore-sidebar.is-collapsed .explore-filters { display: none; }
.explore-filters { display: flex; flex-direction: column; }
.explore-clear-filters { background: none; border: 0; color: var(--np-green-soft); cursor: pointer; font-size: .78rem; padding: 0 0 .9rem; text-align: left; text-decoration: underline; }
.explore-clear-filters:hover { color: var(--np-green-bright); }
.explore-filter-section { border-top: 1px solid var(--border-subtle); padding: .85rem 0; }
.explore-filter-section:first-of-type { border-top: 0; padding-top: 0; }
.explore-filter-section summary { align-items: center; color: var(--np-green-soft); cursor: pointer; display: flex; font-size: .74rem; font-weight: 800; justify-content: space-between; letter-spacing: .1em; list-style: none; text-transform: uppercase; }
.explore-filter-section summary::-webkit-details-marker { display: none; }
.explore-filter-section summary > span:first-child { flex: 1; }
.explore-filter-count { background: var(--np-green); border-radius: 999px; color: #04130e; font-size: .66rem; font-weight: 800; letter-spacing: 0; line-height: 1; margin-right: .5rem; min-width: 1.15rem; padding: .18rem .4rem; text-align: center; }
.explore-filter-section summary::after { content: '+'; font-size: 1rem; font-weight: 400; }
.explore-filter-section[open] summary::after { content: '−'; }
.explore-filter-chips { display: flex; flex-direction: column; gap: .3rem; margin-top: .65rem; }
.explore-filter-chip { background: transparent; border: 1px solid transparent; border-radius: .45rem; color: #b6c2be; cursor: pointer; font: inherit; font-size: .82rem; padding: .42rem .6rem; text-align: left; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.explore-filter-chip:hover { background: rgba(var(--np-green-rgb), .08); color: #e0f5ea; }
.explore-filter-chip.is-active { background: var(--np-green-bg); border-color: var(--np-green-border); color: var(--np-green-soft); font-weight: 700; }
.explore-content { flex: 1; min-width: 0; }
.explore-toolbar { align-items: center; display: flex; justify-content: space-between; margin-bottom: 1.75rem; min-height: 2.1rem; }
.explore-sort-label { align-items: center; color: var(--np-text-muted); display: flex; font-size: .8rem; gap: .55rem; }
.explore-sort-label select { background: #0d1614; border: 1px solid #1c2724; border-radius: .45rem; color: var(--np-text); cursor: pointer; font: inherit; font-size: .82rem; padding: .45rem .6rem; }
.explore-page .game-grid { grid-template-columns: repeat(auto-fill, 220px); justify-content: start; }
.explore-page .explore-row { margin-bottom: 2.4rem; }
.explore-page .explore-row .game-related-list { padding-bottom: .4rem; scroll-snap-type: x proximity; }
.explore-page .explore-row .game-related-list .card-link { flex: 0 0 208px; scroll-snap-align: start; width: 208px; }
.explore-page .loading-state, .explore-page .empty-state { color: #a9b6b0; padding: 2.5rem 0; text-align: center; }

.my-sidebar-user-link { color: inherit; text-decoration: none; }
.my-sidebar-user-link:hover, .my-sidebar-user-link:focus-visible { color: var(--np-green-soft); text-decoration: underline; }

/* Insignias sobre la portada: una tira con todas las activas, siempre en el mismo orden
   (ver cardBadges() en game-card.js). Cada cinta deja de posicionarse sola y pasa a fluir en la tira. */
.card-badges { align-items: flex-start; display: flex; gap: .3rem; left: .85rem; position: absolute; top: -.275rem; z-index: 3; }
.card-badges .card-badge { position: static; }
.public-profile-game-card .card-badges { gap: clamp(.15rem, 1.6cqw, .3rem); left: clamp(.5rem, 4.5cqw, .9rem); top: 0; }
@container (max-width: 130px) {
  .public-profile-game-card .card-badge:nth-child(n+3) { display: none; }
}

/* Insignias de reconocimiento: emblemas en la esquina inferior izquierda de la imagen, con forma y
   color propios para no confundirse con las cintas de arriba. */
.card-cover { flex: none; position: relative; }
.card-insignia { bottom: .5rem; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .65)); height: 2rem; left: .55rem; position: absolute; width: 2rem; z-index: 3; }
.card-insignia svg { display: block; height: 100%; overflow: visible; width: 100%; }
.insignia-shape { stroke: rgba(255, 255, 255, .8); stroke-linejoin: round; stroke-width: 1.4; }
.insignia-glyph.is-filled { stroke: none; }
.insignia-glyph.is-stroked { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.7; }
.insignia-aaa-verified .insignia-shape { fill: #E0A72C; }
.insignia-aaa-verified .insignia-glyph { fill: #241804; }
.insignia-featured-creator .insignia-shape { fill: var(--np-green); }
.insignia-featured-creator .insignia-glyph { fill: #03110D; }
.insignia-rising-talent .insignia-shape { fill: #22D3AA; }
.insignia-rising-talent .insignia-glyph { stroke: #04211a; }
.insignia-verified .insignia-shape { fill: #38BDF8; }
.insignia-verified .insignia-glyph { stroke: #fff; }
.public-profile-game-card .card-insignia { bottom: calc(100% - 60.6cqw + .4rem); height: clamp(1.4rem, 15cqw, 2.3rem); left: clamp(.5rem, 4.5cqw, .9rem); width: clamp(1.4rem, 15cqw, 2.3rem); }

/* Cursor de mano en todo lo que se puede pulsar. Selectores de baja especificidad: cualquier
   regla más concreta (por ejemplo cursor: wait mientras carga) sigue mandando sobre esta. */
a[href], button, summary, select, label[for], [role="button"], input[type="checkbox"], input[type="radio"], input[type="file"], input[type="submit"], input[type="range"] { cursor: pointer; }
button:disabled, input:disabled, select:disabled, [aria-disabled="true"] { cursor: not-allowed; }

/* Reportar contenido: botón discreto y diálogo. */
.report-button { align-items: center; background: transparent; border: 1px solid rgba(246, 121, 145, .35); border-radius: .5rem; color: #ffb3c1; cursor: pointer; display: inline-flex; font: inherit; font-size: .8rem; font-weight: 700; gap: .3rem; padding: .5rem .8rem; }
.profile-blocked-users { border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: .6rem; margin-top: 1.5rem; padding-top: 1.2rem; }
.profile-blocked-list { display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.profile-blocked-list li { align-items: center; display: flex; gap: .8rem; justify-content: space-between; }
.public-profile-blocked-notice { color: var(--text-muted); font-size: .85rem; }
.report-button:hover, .report-button:focus-visible { background: rgba(165, 54, 78, .25); border-color: rgba(255, 158, 177, .7); }
.report-dialog { background: #0d1a17; border: 1px solid #263531; border-radius: .8rem; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .6); color: var(--np-text); max-width: min(30rem, calc(100vw - 2rem)); padding: 1.3rem 1.4rem; width: 100%; }
.report-dialog::backdrop { background: rgba(2, 8, 10, .72); }
.report-dialog h2 { font-size: 1.15rem; margin: 0 0 .3rem; }
.report-dialog label { display: grid; font-size: .82rem; gap: .35rem; margin-top: .9rem; }
.report-dialog select, .report-dialog textarea { background: #0a1513; border: 1px solid #2c3a36; border-radius: .5rem; color: var(--np-text); font: inherit; padding: .6rem .7rem; resize: vertical; }
.report-dialog-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.2rem; }
.legal-page:has(.tool-grid) { max-width: 62rem; }
.tool-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); list-style: none; margin: .9rem 0 0; padding: 0; }
.tool-card { margin: 0; }
.tool-card a { align-items: center; background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .85rem; color: inherit; display: flex; gap: .9rem; height: 100%; padding: .8rem 1rem; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.tool-card a:hover, .tool-card a:focus-visible { border-color: var(--np-green-border); transform: translateY(-2px); }
.tool-icon { align-items: center; background: #f4f7f6; border-radius: .8rem; display: grid; flex: 0 0 3.5rem; height: 3.5rem; justify-items: center; overflow: hidden; padding: .35rem; width: 3.5rem; }
.tool-icon img { display: block; height: 100%; object-fit: contain; width: 100%; }
.tool-icon.is-mono { background: hsl(var(--tool-hue, 160) 42% 26%); color: #fff; font-size: 1.5rem; font-weight: 800; padding: 0; }
.tool-text { display: grid; gap: .2rem; min-width: 0; }
.tool-text strong { font-size: 1rem; }
.tool-text span { color: var(--np-text-muted); font-size: .85rem; line-height: 1.45; }
.first-game-page { max-width: 50rem; }
.fg-toolbar { background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .85rem; display: grid; gap: .8rem; margin: 1.2rem 0 1.4rem; padding: .9rem 1rem; }
.fg-progress-text { color: var(--np-text-muted); font-size: .88rem; margin: .35rem 0 0; }
.fg-bar { background: rgba(255, 255, 255, .08); border-radius: 999px; height: .5rem; overflow: hidden; }
.fg-bar span { background: var(--np-green, #3ddc84); border-radius: 999px; display: block; height: 100%; transition: width .25s ease; width: 0; }
.fg-os { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; }
.fg-os span { color: var(--np-text-muted); font-size: .88rem; margin-right: .3rem; }
.fg-os button { background: transparent; border: 1px solid var(--border-subtle); border-radius: 999px; color: inherit; cursor: pointer; font: inherit; padding: .3rem .9rem; }
.fg-os button[aria-pressed='true'] { background: rgba(var(--np-green-rgb, 61, 220, 132), .18); border-color: var(--np-green-border, #3ddc84); }
.fg-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
.fg-actions [hidden], .fg-toolbar[hidden] { display: none; }
.fg-reset { background: none; border: 0; color: var(--np-text-muted); cursor: pointer; font: inherit; text-decoration: underline; }
.fg-steps { counter-reset: none; display: grid; gap: 1rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.fg-step { background: rgba(255, 255, 255, .025); border: 1px solid var(--border-subtle); border-radius: .9rem; padding: 1rem 1.2rem; scroll-margin-top: 5rem; }
.fg-step.is-done { border-color: var(--np-green-border, #3ddc84); }
.fg-step-head { align-items: center; display: flex; gap: .8rem; }
.fg-step-head h2 { margin: 0; }
.fg-number { align-items: center; background: rgba(var(--np-green-rgb, 61, 220, 132), .18); border-radius: 50%; display: inline-flex; flex: 0 0 2rem; font-weight: 800; height: 2rem; justify-content: center; width: 2rem; }
.fg-step.is-done .fg-number { background: var(--np-green, #3ddc84); color: #06130c; }
.fg-body { margin-top: .6rem; }
.fg-done { align-items: center; color: var(--np-text-muted); display: inline-flex; gap: .4rem; margin-top: .4rem; }
.fg-copy { background: rgba(0, 0, 0, .35); border: 1px solid var(--border-subtle); border-radius: .7rem; margin: .7rem 0; overflow: hidden; }
.fg-copy.is-prompt { border-color: var(--np-green-border, #3ddc84); }
.fg-copy-head { align-items: center; background: rgba(255, 255, 255, .04); color: var(--np-text-muted); display: flex; font-size: .8rem; justify-content: space-between; padding: .35rem .7rem; }
.fg-copy-button { background: transparent; border: 1px solid var(--border-subtle); border-radius: 999px; color: inherit; cursor: pointer; font: inherit; padding: .1rem .7rem; }
.fg-copy pre { margin: 0; overflow-x: auto; padding: .7rem .9rem; white-space: pre-wrap; word-break: break-word; }
.fg-copy code { color: #e6f2ec; font-size: .9rem; line-height: 1.55; }
.fg-note { border-left: 3px solid var(--np-green-border, #3ddc84); margin: .7rem 0; padding: .2rem 0 .2rem .8rem; }
.fg-note.is-warn { border-left-color: #f2b84b; }
.first-game-page[data-os='windows'] [data-os='mac'], .first-game-page[data-os='mac'] [data-os='windows'] { display: none; }
.app-dialog { min-width: min(22rem, calc(100vw - 2rem)); }
.app-dialog-message { font-size: 1rem; line-height: 1.5; margin: 0; white-space: pre-line; }
.app-dialog-input { background: #0a1513; border: 1px solid #2c3a36; border-radius: .5rem; color: var(--np-text); font: inherit; margin-top: .9rem; padding: .6rem .7rem; width: 100%; }

/* Pie de página y páginas legales. */
.site-footer { border-top: 1px solid var(--border-subtle); color: var(--np-text-muted); font-size: .84rem; margin: 2.5rem auto 0; max-width: 1400px; padding: 2.4rem 2rem 1.6rem; }
.footer-main { align-items: start; display: grid; gap: 2rem 2.5rem; grid-template-columns: minmax(14rem, 1.25fr) minmax(0, 3.5fr); }
.footer-brand .brand { display: inline-flex; margin-bottom: .7rem; }
.footer-brand p { color: var(--np-text-muted); line-height: 1.6; margin: 0; max-width: 24rem; }
/* La regla general de los enlaces del pie (gris, y verde al pasar el ratón) teñía la palabra «Nodus» de la marca: la marca conserva su blanco. */
.site-footer .brand, .site-footer .brand:hover, .site-footer .brand:focus-visible { color: #fff; }
.footer-platforms { margin-top: 1.1rem; max-width: 24rem; }
.footer-brand .footer-platforms-label { color: var(--np-text); font-size: .72rem; font-weight: 800; letter-spacing: .08em; margin: 0 0 .6rem; text-transform: uppercase; }
.footer-platforms ul { display: flex; flex-wrap: wrap; gap: .5rem .5rem; list-style: none; margin: 0; padding: 0; }
.footer-platforms li { align-items: center; background: rgba(255, 255, 255, .04); border: 1px solid var(--border-subtle); border-radius: 999px; display: inline-flex; font-size: .76rem; gap: .4rem; padding: .22rem .65rem .22rem .28rem; }
.footer-platforms img { background: #f4f7f6; border-radius: 50%; height: 22px; object-fit: contain; padding: 2px; width: 22px; }
.footer-platforms small { color: var(--np-text-muted); display: block; font-size: .68rem; line-height: 1.5; margin-top: .6rem; opacity: .85; }
.footer-links { align-items: start; display: grid; gap: 1.6rem 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footer-column h2 { border-bottom: 1px solid var(--border-subtle); color: var(--np-text); font-size: .74rem; font-weight: 800; letter-spacing: .08em; margin: 0 0 .85rem; padding-bottom: .65rem; text-transform: uppercase; }
.footer-column ul { display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.footer-bottom { align-items: center; border-top: 1px solid var(--border-subtle); display: flex; flex-wrap: wrap; font-size: .78rem; gap: .6rem 1.5rem; justify-content: space-between; margin-top: 2rem; padding-top: 1.1rem; }
@media (max-width: 980px) { .footer-main { grid-template-columns: 1fr; } .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .site-footer { padding: 1.8rem 1rem 1.4rem; } }
@media (max-width: 340px) { .footer-links { grid-template-columns: 1fr; } }
.site-footer a { color: var(--np-text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--np-green-soft); }
.appearance-picker { align-items: center; display: inline-flex; flex-wrap: wrap; gap: .3rem .5rem; }
.appearance-picker button { background: transparent; border: 1px solid var(--panel-border); border-radius: 999px; color: var(--np-text-muted); cursor: pointer; font: inherit; padding: .15rem .65rem; }
.appearance-picker button:hover { border-color: var(--np-green-border); color: var(--np-text); }
.appearance-picker button[aria-pressed='true'] { background: var(--np-green-bg); border-color: var(--np-green-border); color: var(--np-green-soft); }
.legal-page { max-width: 46rem; padding-bottom: 3rem; padding-top: 2.5rem; }
.legal-page h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 .4rem; }
.legal-page h2 { color: #f1faf4; font-size: 1.1rem; margin: 2rem 0 .5rem; }
.legal-page p, .legal-page li { color: #c1cdc8; line-height: 1.7; }
.legal-page ul { margin: .4rem 0; padding-left: 1.3rem; }
.legal-page a { color: var(--np-green-soft); }
.legal-updated { color: var(--np-text-muted); font-size: .85rem; margin: 0 0 1rem; }
.legal-intro { font-size: 1.05rem; }

/* Zona de peligro de los ajustes de perfil (eliminar cuenta). */
.profile-danger-zone { border: 1px solid rgba(246, 121, 145, .35); border-radius: .7rem; margin-top: 1.5rem; padding: 1rem 1.2rem; }
.profile-danger-zone h2 { color: #ffb3c1; font-size: 1.03rem; margin: 0 0 .3rem; }
.profile-danger-form { align-items: end; display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .8rem; }
.profile-danger-form label { display: grid; font-size: .8rem; gap: .35rem; }
.profile-danger-form input { background: #0a1513; border: 1px solid #2c3a36; border-radius: .5rem; color: var(--np-text); font: inherit; padding: .6rem .7rem; }

/* Etiquetas del creador (estilo visual, tecnología, experiencia): casillas en forma de chips. */
.creator-tag-group { border: 1px solid var(--border-subtle); border-radius: .6rem; margin: 0; min-width: 0; padding: .7rem .9rem .85rem; }
.creator-tag-group legend { color: var(--np-green-soft); font-size: .78rem; font-weight: 800; letter-spacing: .06em; padding: 0 .4rem; text-transform: uppercase; }
.creator-tag-group .field-hint { margin: 0 0 .6rem; }
.creator-tag-options { display: flex; flex-wrap: wrap; gap: .4rem; }
.creator-tag-option { align-items: center; background: rgba(14, 25, 21, .82); border: 1px solid #263531; border-radius: 999px; cursor: pointer; display: inline-flex; font-size: .78rem; gap: .35rem; padding: .3rem .7rem; }
.creator-tag-option:has(input:checked) { background: var(--np-green-bg); border-color: var(--np-green-border); color: var(--np-green-soft); }
.creator-tag-option:has(input:disabled) { cursor: not-allowed; opacity: .45; }
.creator-tag-option input { accent-color: var(--np-green); margin: 0; }
@media (max-width: 900px) {
  .explore-layout { align-items: stretch; flex-direction: column; gap: 1.25rem; }
  .explore-content { width: 100%; }
  .explore-sidebar { flex-basis: auto; max-height: none; position: static; width: 100%; }
  .explore-filter-chips { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .explore-page { padding-left: 1.25rem; padding-right: 1.25rem; }
  .explore-page .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explore-page .explore-row .game-related-list .card-link { flex-basis: 168px; width: 168px; }
  .explore-toolbar { align-items: flex-start; flex-direction: column; gap: .6rem; }
}

/* Navegación compacta y orden de lectura adaptativo para móvil y tableta. */
.mobile-navigation { display: none; position: relative; }
.mobile-navigation > summary { align-items: center; background: rgba(13, 24, 20, .78); border: 1px solid var(--np-green-border); border-radius: .45rem; color: #e7f5ee; cursor: pointer; display: flex; height: 2.05rem; justify-content: center; list-style: none; width: 2.1rem; }
.mobile-navigation > summary::-webkit-details-marker { display: none; }
.mobile-navigation > summary:hover, .mobile-navigation[open] > summary { border-color: var(--np-green); color: #fff; }
.mobile-navigation-panel { background: rgba(10, 18, 16, .98); border: 1px solid #263531; border-radius: .7rem; box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, .46); display: grid !important; gap: .12rem !important; min-width: 13.75rem; padding: .45rem; position: absolute; right: 0; top: calc(100% + .6rem); width: max-content; z-index: 80; }
.mobile-navigation-panel > a { border-radius: .42rem; color: #d5e2dc !important; font-size: .78rem !important; padding: .62rem .68rem; text-decoration: none; }
.mobile-navigation-panel > a:hover { background: var(--np-green-bg); color: #fff !important; }
.mobile-navigation-panel > a.mobile-navigation-action { background: linear-gradient(115deg, var(--np-green), #28E7A1); color: #03110D !important; font-weight: 800; margin-top: .2rem; text-align: center; }
.game-mobile-card { display: none; }

@media (max-width: 960px) {
  .game-detail-shell { padding-left: clamp(1rem, 3vw, 1.5rem); padding-right: clamp(1rem, 3vw, 1.5rem); }
  .game-detail-layout { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .game-detail-sidebar { display: none; }
  .game-mobile-card { display: block; margin-top: .9rem; }
  .game-detail-main > .game-mobile-card.game-access-card { order: initial; }
  .game-section-tabs { margin-top: .9rem; }
  .game-real-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .site-header { gap: .45rem; height: 64px; min-width: 0; padding-left: .8rem; padding-right: .8rem; }
  .site-header .brand { font-size: 1.08rem; gap: .35rem; min-width: 0; }
  .site-header .brand::before { font-size: 1.1rem; }
  .site-header .primary-nav, .site-header .catalog-search, .site-header .publish-link, .site-header .day-state { display: none; }
  .site-header .header-tools { flex: 0 1 auto; gap: .28rem; justify-content: flex-end; min-width: 0; }
  .mobile-navigation { display: block; position: static; }
  /* El menú se ancla al ancho de la pantalla (no al botón): con «Comunidad» o «Recursos» abiertos crecía hacia la izquierda y se cortaba. */
  .mobile-navigation-panel { grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: stretch; left: auto; max-height: calc(100vh - 5rem); min-width: 0; overflow-y: auto; right: .6rem; text-align: left; top: calc(100% + .3rem); width: min(14.5rem, calc(100vw - 1.2rem)); }
  .mobile-navigation-panel > a { text-align: left; }
  .mobile-navigation-panel .nav-menu-panel { min-width: 0; padding: .2rem 0 .2rem .4rem; }
  .mobile-navigation-panel .nav-menu > summary { color: #d5e2dc; display: flex; font-size: .78rem; font-weight: 700; justify-content: space-between; padding: .62rem .68rem; text-align: left; }
  .site-header .language-trigger { background: transparent; border-color: transparent; min-height: 2rem; padding: 0 .18rem; }
  .site-header .language-trigger > span:nth-child(2), .site-header .language-chevron { display: none; }
  .site-header .account-nav { gap: .1rem; }
  .site-header .profile-avatar { height: 32px; width: 32px; }
  .site-header .notification-toggle { height: 32px; width: 28px; }
  .site-header .account-nav.is-guest-nav { display: none; }
  .notifications-popover { right: -2.5rem; }
  .profile-popover { right: -.45rem; }

  .game-page { overflow-x: clip; }
  .game-detail-shell { padding-left: .75rem; padding-right: .75rem; }
  .game-hero { min-height: 0; }
  .game-hero-copy { min-height: 0; padding: 1rem .95rem 1.35rem; }
  .game-breadcrumbs { margin-bottom: 1.1rem; }
  .game-hero h1 { margin: .5rem 0 .6rem; }
  .game-hero-actions { gap: .48rem; margin-top: 1rem; }
  .game-hero-actions .game-primary-action { flex: 1 1 100%; }
  .game-hero-actions .game-library-panel, .game-hero-actions .game-favorite-panel, .game-hero-actions .game-wishlist-panel { flex: 1 1 calc(50% - .25rem); min-width: 0; }
  .game-hero-actions .favorite-count { display: none; }
  .game-real-highlights { grid-template-columns: 1fr; }
  .game-detail-layout { margin-top: 0; }
}

@media (max-width: 390px) {
  .site-header .brand { font-size: 1rem; }
  .mobile-navigation-panel { min-width: 0; }
}

@media (max-width: 980px) {
  .game-detail-layout { grid-template-columns: minmax(0, 1fr) 17.5rem; }
  .game-hero { min-height: 23rem; }
  .game-real-highlights { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .game-page { padding-top: 0; }
  .game-detail-shell { padding: 0 .75rem; }
  .game-hero { min-height: 31rem; }
  .game-hero-cover { object-position: 62% center; }
  .game-hero-overlay { background: linear-gradient(90deg, rgba(6, 15, 14, .95), rgba(6, 15, 14, .63) 73%, rgba(6, 15, 14, .32)), linear-gradient(0deg, rgba(6, 14, 13, .98), rgba(6, 14, 13, .16) 65%); }
  .game-hero-copy { padding: 1rem; }
  .game-breadcrumbs { margin-bottom: 3.25rem; }
  .game-hero h1 { font-size: clamp(2.65rem, 13vw, 4.15rem); max-width: 10ch; }
  .game-hero-summary { font-size: .9rem; }
  .game-hero-actions { align-items: stretch; }
  .game-primary-action { flex: 1 1 100%; }
  .game-hero-actions .game-library-panel, .game-hero-actions .game-favorite-panel, .game-hero-actions .game-wishlist-panel { flex: 1 1 auto; }
  .game-hero-actions .favorite-button, .game-hero-actions .library-button, .game-hero-actions .wishlist-button { justify-content: center; width: 100%; }
  .game-detail-layout { grid-template-columns: 1fr; margin-top: .85rem; }
  .game-detail-sidebar { position: static; }
  .game-access-card { order: -1; }
  .game-section-tabs { gap: 1rem; }
  .game-related-card { flex-basis: 170px; }
}

@media (max-width: 430px) {
  .game-hero { min-height: 36rem; }
  .game-hero-owner-actions { flex-direction: column; }
  .game-hero-edit-link { font-size: .68rem; padding: .48rem .65rem; }
  .game-breadcrumbs { font-size: .64rem; margin-bottom: 3rem; }
  .game-hero-tags span { font-size: .61rem; }
  .game-related-list { gap: .5rem; }
  .game-related-card img, .game-related-placeholder { height: 6.2rem; }
}

/* Ajustes de identidad pública. */
.profile-settings-form { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
.profile-media-settings { align-items: end; display: grid; gap: .85rem 1rem; grid-template-columns: 112px minmax(0, 1fr); }
.profile-banner-preview { background: radial-gradient(ellipse 72% 130% at 82% 35%, rgba(0, 245, 155, .3), rgba(10, 42, 34, .32) 44%, #0a1210 79%); border: 1px solid #263531; border-radius: .7rem; grid-column: 1 / -1; height: 168px; overflow: hidden; position: relative; }
.profile-banner-preview::after { background: linear-gradient(90deg, rgba(8, 18, 16, .35), transparent 60%, rgba(8, 18, 16, .13)); content: ''; inset: 0; pointer-events: none; position: absolute; }
.profile-banner-preview img { height: 100%; object-fit: cover; width: 100%; }
.profile-banner-upload-trigger { align-items: center; background: rgba(9, 18, 16, .78); border: 2px solid var(--np-green-border); border-radius: 50%; box-shadow: 0 0 0 7px var(--np-green-bg), 0 .7rem 1.8rem rgba(0, 0, 0, .4); color: #fff; cursor: pointer; display: flex; font-size: 2rem; font-weight: 350; height: 3.6rem; justify-content: center; left: 50%; line-height: 1; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: background .2s ease, box-shadow .2s ease, transform .2s ease; width: 3.6rem; z-index: 2; }
.profile-banner-upload-trigger:hover, .profile-banner-upload-trigger:focus-visible { background: var(--np-green); box-shadow: 0 0 0 7px var(--np-green-glow), 0 .7rem 1.8rem rgba(0, 0, 0, .4); color: #03110D; outline: 0; transform: translate(-50%, -50%) scale(1.06); }
.profile-media-settings .profile-avatar-preview { height: 104px; margin-top: -4.2rem; position: relative; width: 104px; z-index: 1; }
.profile-media-settings label { color: #d4e2dc; display: grid; font-size: .82rem; font-weight: 750; gap: .42rem; }
.profile-media-settings label:last-child { grid-column: 1 / -1; }
/* El campo del banner caía en la columna estrecha del avatar y solo se veía porque el campo nativo se salía de ella: ahora ocupa toda la fila. */
.profile-media-settings > label:nth-child(4) { grid-column: 1 / -1; }
.profile-media-settings input[type="file"] { color: #b3c0ba; cursor: pointer; }
.profile-media-settings input[type="file"]::file-selector-button { background: var(--np-green-dark); border: 1px solid var(--np-green-border); border-radius: .35rem; color: var(--np-green-soft); cursor: pointer; font: inherit; font-size: .75rem; font-weight: 700; margin-right: .7rem; padding: .45rem .6rem; }
.profile-main-fields { display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.profile-main-fields > label:nth-child(3) { grid-column: 1 / -1; }
.profile-main-fields textarea { background: #0a1513; border: 1px solid #2c3a36; border-radius: .5rem; color: #f2f0f7; font: inherit; line-height: 1.5; min-height: 90px; padding: .72rem .8rem; resize: vertical; }
.profile-main-fields textarea:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px var(--np-green-bg); outline: 0; }
.profile-avatar-preference { border: 1px solid #263531; border-radius: .7rem; display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin: 0; padding: .85rem 1rem 1rem; }
.profile-avatar-preference legend { color: #eaf5ee; font-size: 1rem; font-weight: 800; padding: 0 .35rem; }
.profile-avatar-preference > .profile-field-hint { flex: 0 0 100%; margin: -.1rem 0 .1rem; }
.profile-avatar-preference > label { align-items: center; background: #0a1512; border: 1px solid #223530; border-radius: .5rem; color: #d0dcd6; cursor: pointer; display: inline-flex; font-size: .8rem; font-weight: 720; gap: .42rem; padding: .5rem .65rem; }
.profile-avatar-preference > label:has(input:checked) { background: var(--np-green-bg); border-color: var(--np-green-border); color: #eafff2; }
.profile-avatar-preference input { accent-color: var(--np-green); }
.profile-interests-settings, .profile-privacy-settings, .profile-links-settings { border: 1px solid #263531; border-radius: .7rem; margin: 0; padding: 1rem; }
.profile-interests-settings legend { color: #eaf5ee; font-size: 1rem; font-weight: 800; padding: 0 .35rem; }
.profile-interests-settings > label { align-items: center; background: #0a1512; border: 1px solid #223530; border-radius: 999px; color: #c5d1cb; cursor: pointer; display: inline-flex; font-size: .75rem; gap: .35rem; margin: .25rem .2rem .15rem 0; padding: .38rem .6rem; }
.profile-interests-settings > label:has(input:checked) { background: var(--np-green-bg); border-color: var(--np-green-border); color: #eafff2; }
.profile-interests-settings input { accent-color: var(--np-green); }
.profile-privacy-settings { max-width: 370px; }
.profile-privacy-settings select { background: #0a1513; border: 1px solid #2c3a36; border-radius: .5rem; color: #f2f0f7; font: inherit; margin-top: .42rem; padding: .62rem .72rem; width: 100%; }
.profile-follow-requests { border: 1px solid #263531; border-radius: .7rem; max-width: 620px; padding: 1rem; }
.profile-follow-requests h2 { font-size: 1rem; margin: 0; }
.profile-follow-requests-list { display: grid; gap: .6rem; margin-top: .75rem; }
.profile-follow-requests-list > .profile-field-hint { margin: 0; }
.profile-follow-request { align-items: center; background: #0a1512; border: 1px solid #203029; border-radius: .58rem; display: grid; gap: .65rem; grid-template-columns: 2.35rem minmax(0, 1fr) auto; padding: .58rem; }
.profile-follow-request > img { border-radius: 50%; height: 2.35rem; object-fit: cover; width: 2.35rem; }
.profile-follow-request > div:nth-child(2) { display: grid; gap: .12rem; min-width: 0; }
.profile-follow-request strong { color: #e9f3ed; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-follow-request span { color: #a5b1ab; font-size: .68rem; }
.profile-follow-request > div:last-child { display: flex; gap: .4rem; }
.profile-follow-request button { cursor: pointer; font-size: .7rem; padding: .42rem .52rem; }
.profile-request-approve { border: 0; margin: 0; }
.profile-request-reject { margin: 0; }
.profile-links-settings h2 { font-size: 1rem; margin: 0; }
.profile-links-grid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: .9rem; }
.profile-links-grid label { color: #d4e2dc; display: grid; font-size: .78rem; font-weight: 750; gap: .38rem; }
.profile-links-grid input { background: #0a1513; border: 1px solid #2c3a36; border-radius: .5rem; color: #f2f0f7; font: inherit; padding: .62rem .72rem; }
.profile-settings-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.profile-settings-actions .primary-button { border: 0; cursor: pointer; margin: 0; }
.profile-settings-actions .secondary-button { margin: 0; }

/* Perfil público: identidad gaming y portfolio, sin inventar datos sociales. */
.public-profile-page { margin: 0 auto; max-width: 1536px; padding: 0 3rem 5rem; }
.public-profile-hero { background: #081512; border-bottom: 1px solid #22322d; border-radius: 0 0 .9rem .9rem; min-height: 284px; overflow: hidden; position: relative; }
.public-profile-banner, .public-profile-banner-placeholder { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.public-profile-banner-placeholder { background: radial-gradient(ellipse 55% 115% at 75% 18%, rgba(0, 245, 155, .3), transparent 62%), radial-gradient(ellipse 55% 130% at 93% 82%, rgba(50, 230, 161, .26), transparent 69%), linear-gradient(112deg, #081512 8%, #0e1c19 52%, #0a2a22 100%); }
.public-profile-hero::before { background: radial-gradient(ellipse 48% 155% at 94% 22%, rgba(0, 255, 136, .16), transparent 67%); content: ''; inset: 0; position: absolute; z-index: 1; }
.public-profile-hero::after { background: linear-gradient(90deg, rgba(6, 16, 15, .96) 0%, rgba(7, 17, 16, .89) 27%, rgba(8, 18, 17, .54) 54%, rgba(8, 18, 17, .2) 82%, rgba(8, 18, 17, .34) 100%), linear-gradient(0deg, rgba(6, 15, 14, .65), transparent 45%); content: ''; inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.public-profile-identity { align-items: flex-start; display: flex; gap: 1.5rem; left: 3rem; max-width: min(700px, calc(100% - 6rem)); position: absolute; top: 2.35rem; z-index: 2; }
.public-profile-avatar { align-items: center; background: linear-gradient(135deg, #d29a73, #0f6b4e 55%, #0a2a22); border: 3px solid var(--np-green); border-radius: 50%; box-shadow: 0 0 0 2px #0a1512, 0 0 22px var(--np-green-glow), 0 0 42px rgba(0, 245, 155, .28); color: #fff; display: flex; flex: 0 0 auto; font-size: 3.45rem; font-weight: 850; height: 134px; justify-content: center; overflow: visible; position: relative; width: 134px; }
.public-profile-avatar img { border-radius: 50%; height: 100%; object-fit: cover; overflow: hidden; width: 100%; }
.public-profile-avatar.is-default-avatar { background: transparent; border-color: var(--np-green); }
.public-profile-presence { background: var(--np-green-bright); border: 3px solid #081512; border-radius: 50%; bottom: 5px; box-shadow: 0 0 0 3px var(--np-green-bg), 0 0 12px var(--np-green-glow); height: 20px; position: absolute; right: 5px; width: 20px; z-index: 2; }
.public-profile-copy { min-width: 0; padding-top: .15rem; }
.public-profile-copy h1 { align-items: center; color: #f7fdf9; display: flex; flex-wrap: wrap; font-size: clamp(1.9rem, 3vw, 2.3rem); gap: .55rem; margin: 0; }
.public-creator-badge { align-items: center; background: var(--np-green); border-radius: 50%; color: #03110D; display: inline-flex; font-size: .72rem; height: 1.35rem; justify-content: center; width: 1.35rem; }
.public-profile-username { color: #c1cdc7; font-size: .82rem; margin: .18rem 0 .52rem; }
.public-profile-bio { color: #dcece5; font-size: .86rem; line-height: 1.5; margin: 0; max-width: 490px; }
.public-profile-meta { color: #bec9c3; display: flex; flex-wrap: wrap; font-size: .73rem; gap: .55rem 1.05rem; margin-top: .72rem; }
.public-profile-creator-meta { color: var(--np-green-soft); }
.public-profile-copy .secondary-button { align-items: center; display: inline-flex; font-size: .73rem; margin: 0 0 .78rem; padding: .52rem .75rem; }
.public-profile-stats { backdrop-filter: blur(14px); background: rgba(8, 18, 16, .72); border: 1px solid rgba(0, 245, 155, .16); border-radius: .65rem; bottom: 1.15rem; display: flex; position: absolute; right: 2rem; z-index: 2; }
.public-profile-stats a { color: inherit; min-width: 86px; padding: .7rem .95rem; position: relative; text-align: center; text-decoration: none; }
.public-profile-stats a + a::before { background: rgba(154, 167, 163, .22); bottom: .6rem; content: ''; left: 0; position: absolute; top: .6rem; width: 1px; }
.public-profile-stats strong { color: #f9fdfa; display: block; font-size: 1.06rem; }
.public-profile-stats span { color: #bdc9c3; display: block; font-size: .67rem; margin-top: .14rem; }
.public-profile-tabs { background: rgba(11, 21, 19, .72); border: 1px solid #223530; border-radius: .62rem; display: flex; gap: .1rem; margin: 1rem 0; overflow-x: auto; padding: 0 .5rem; }
.public-profile-tabs a { border-bottom: 3px solid transparent; color: #b6c2bc; font-size: .78rem; font-weight: 760; padding: .77rem 1rem .66rem; text-decoration: none; white-space: nowrap; }
.public-profile-tabs a:first-child, .public-profile-tabs a:hover { border-color: var(--np-green); color: #e0fbec; }
.public-profile-overview { display: grid; gap: 1rem; grid-template-columns: minmax(230px, .28fr) minmax(0, .55fr) minmax(240px, .27fr); }
.public-profile-side, .public-profile-main, .public-profile-right { display: grid; align-content: start; gap: 1rem; }
.public-profile-card, .public-profile-games-section { background: linear-gradient(145deg, #101c19, #0c1614); border: 1px solid #223530; border-radius: .7rem; box-shadow: 0 10px 25px rgba(0, 0, 0, .12); padding: 1rem; }
.public-profile-card h2, .public-profile-games-section h2 { color: #f1faf4; font-size: 1.03rem; margin: 0; }
.public-profile-card-header { align-items: center; display: flex; justify-content: space-between; }
.public-profile-visibility-toggle { align-items: center; background: none; border: 0; border-radius: 999px; color: var(--text-muted); cursor: pointer; display: inline-flex; flex: none; padding: .3rem; }
.public-profile-visibility-toggle:hover { background: rgba(255, 255, 255, .06); color: var(--np-green-soft); }
.public-profile-visibility-toggle .ui-icon { height: 1.05rem; width: 1.05rem; }
.public-profile-game-card-wrap { position: relative; }
.public-profile-game-toggle { background: rgba(10, 16, 14, .78); position: absolute; right: .5rem; top: .5rem; z-index: 2; }
.public-profile-game-toggle:hover { background: rgba(10, 16, 14, .92); }
.public-profile-game-card-wrap.is-hidden-from-profile .game-card { opacity: .55; }
.public-profile-game-hidden-badge { background: var(--np-green); border-radius: .3rem; color: #032015; display: none; font-size: .68rem; font-weight: 800; left: .5rem; padding: .15rem .4rem; position: absolute; top: .5rem; z-index: 2; }
.public-profile-game-card-wrap.is-hidden-from-profile .public-profile-game-hidden-badge { display: block; }
.public-profile-card p { font-size: .82rem; line-height: 1.58; margin: 0; }
.public-profile-about { color: #cedad4; white-space: pre-wrap; }
.public-profile-muted, .public-profile-empty { color: #a6b2ac; line-height: 1.55; margin: .82rem 0 0; }
.public-profile-interest-chips { display: flex; flex-wrap: wrap; gap: .42rem; margin-top: .9rem; }
.public-profile-interest-chips span { background: linear-gradient(135deg, #123328, #0e1a17); border: 1px solid #2c4a3f; border-radius: 999px; color: #d0e2d9; font-size: .68rem; padding: .3rem .54rem; }
.public-profile-interests-empty { font-size: .75rem !important; }
.public-profile-quote { background: var(--np-green-bg); border: 1px solid var(--np-green-border); border-radius: .55rem; color: #d4ece1; margin: 1rem 0 0; padding: .75rem .8rem .75rem 1.1rem; position: relative; }
.public-profile-quote::before { color: var(--np-green-soft); content: '“'; font-size: 1.5rem; left: .45rem; line-height: 1; position: absolute; top: .6rem; }
.public-profile-quote p { font-size: .74rem; line-height: 1.55; }
.public-profile-links-list { display: grid; gap: .38rem; margin-top: .78rem; }
.public-profile-links-list a { align-items: center; color: var(--np-green-soft); display: flex; font-size: .78rem; gap: .55rem; overflow-wrap: anywhere; text-decoration: none; }
.public-profile-links-list a:hover { color: #fff; text-decoration: underline; }
.public-profile-link-icon { align-items: center; background: #142520; border-radius: .34rem; color: var(--np-green-soft); display: inline-flex; flex: 0 0 auto; font-size: .68rem; height: 1.25rem; justify-content: center; width: 1.25rem; }
.public-profile-section-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: .85rem; }
.public-profile-games-grid { display: grid; gap: .65rem; grid-template-columns: repeat(auto-fit, minmax(max(130px, calc((100% - 2.6rem) / 5)), 1fr)); justify-content: start; max-width: 1100px; width: 100%; }
.public-profile-game-card { aspect-ratio: 1 / 1.08; background: #0a1210; border: 1px solid #223530; border-radius: .55rem; color: inherit; container-type: inline-size; display: block; min-height: 0; overflow: hidden; position: relative; text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.public-profile-game-card:hover { border-color: var(--np-green-border); box-shadow: 0 0 18px var(--np-green-glow); }
/* La imagen ocupa la parte de arriba con la misma proporción apaisada que en la home (≈1,65:1: alto = 60,6% del ancho) y la información va debajo, sin taparla. */
.public-profile-game-card > img, .public-profile-game-placeholder { background: linear-gradient(135deg, #123328, #0e1a17 55%, #0a2a22); display: block; height: 60.6cqw; inset: 0 0 auto 0; object-fit: cover; position: absolute; width: 100%; }
.public-profile-game-card .catalog-badge, .public-profile-game-card .production-badge { font-size: clamp(.74rem, 6.5cqw, 1.15rem); height: clamp(1.6rem, 15cqw, 2.6rem); top: 0; width: clamp(1.35rem, 12cqw, 2.1rem); }
.public-profile-game-card .catalog-badge { left: clamp(.5rem, 4.5cqw, .9rem); }
.public-profile-game-card .production-badge { right: clamp(.5rem, 4.5cqw, .9rem); }
.public-profile-game-content { background: linear-gradient(to bottom, #0d1a16, #0a1210); bottom: 0; box-shadow: inset 0 1px 0 rgba(223, 255, 240, .1); box-sizing: border-box; display: flex; flex-direction: column; height: calc(100% - 60.6cqw); justify-content: flex-start; left: 0; min-height: 0; padding: .48rem .62rem .44rem; position: absolute; right: 0; z-index: 1; }
.public-profile-game-content h3 { color: #edf6f0; font-size: .76rem; line-height: 1.15; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.public-profile-game-content > p { color: #a2afa9; font-size: .64rem; line-height: 1.2; margin: .16rem 0 .28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.public-profile-game-metadata { align-items: center; color: #c1cdc7; display: flex; font-size: clamp(.6rem, 7cqw, .92rem); gap: .35rem; margin-top: .28rem; }
.public-profile-developer { align-items: center; background: linear-gradient(135deg, #2d6e8f, #0f6b4e); border-radius: 50%; color: #fff; display: inline-flex; flex: none; font-size: clamp(.45rem, 6cqw, .75rem); font-weight: 850; height: clamp(1.15rem, 15cqw, 2.1rem); justify-content: center; margin-left: auto; overflow: hidden; width: clamp(1.15rem, 15cqw, 2.1rem); }
.public-profile-developer img { height: 100%; object-fit: cover; width: 100%; }
.public-profile-new-project { align-items: center; aspect-ratio: 1 / 1.08; background: #0a1512; border: 1px dashed var(--np-green-border); border-radius: .55rem; color: var(--np-green-soft); display: grid; gap: .22rem; justify-items: center; min-height: 0; padding: .75rem .45rem; text-align: center; text-decoration: none; transition: background .2s ease, border-color .2s ease; }
.public-profile-new-project:hover { background: var(--np-green-bg); border-color: var(--np-green); }
.public-profile-new-project strong { font-size: .72rem; }
.public-profile-new-project small { color: #a4b0aa; font-size: .6rem; line-height: 1.35; max-width: 125px; }
.new-project-symbol { align-items: center; border: 1px solid var(--np-green); border-radius: 50%; display: inline-flex; font-size: 1.15rem; height: 1.8rem; justify-content: center; width: 1.8rem; }
.public-profile-game-slot { aspect-ratio: 1 / 1.08; container-type: inline-size; background: linear-gradient(145deg, rgba(18, 33, 28, .44), rgba(10, 18, 16, .72)); border: 1px dashed rgba(69, 98, 88, .36); border-radius: .55rem; min-height: 0; overflow: hidden; position: relative; }
.public-profile-game-slot::before { background: linear-gradient(135deg, rgba(0, 245, 155, .1), rgba(50, 230, 161, .03)); content: ''; inset: 0 0 auto; height: 60.6cqw; position: absolute; }
.public-profile-game-slot::after { background: linear-gradient(90deg, rgba(154, 192, 178, .16), rgba(154, 192, 178, .04)); border-radius: 999px; content: ''; height: .46rem; left: .65rem; position: absolute; right: 28%; top: calc(60.6cqw + .86rem); }
@container (max-width: 130px) {
  .public-profile-game-card .public-profile-game-content > p { display: none; }
}
.public-profile-activity-list { display: grid; gap: .25rem; margin-top: .75rem; }
.public-profile-activity-item { align-items: center; border-radius: .48rem; color: inherit; display: flex; gap: .6rem; padding: .52rem .35rem; text-decoration: none; }
.public-profile-activity-item:hover { background: var(--np-green-bg); }
.public-profile-activity-icon { align-items: center; background: #16261f; border-radius: .42rem; color: var(--np-green-soft); display: inline-flex; flex: 0 0 auto; font-size: .84rem; height: 1.85rem; justify-content: center; width: 1.85rem; }
.public-profile-activity-icon.favorite { color: #ff6f9a; }
.public-profile-activity-copy { display: grid; gap: .16rem; min-width: 0; }
.public-profile-activity-copy strong { color: #d4e2dc; font-size: .73rem; font-weight: 680; line-height: 1.35; }
.public-profile-activity-copy small { color: #92a19a; font-size: .66rem; }
.public-profile-not-found { margin: 2rem auto; max-width: 540px; }

/* Perfil público: misma escena continua que la portada, con la ilustración escapando solo a la derecha. */
.public-profile-page {
  --public-profile-gutter: clamp(2.5rem, 3vw, 3.75rem);
  margin: 0;
  max-width: none;
  padding: 0 var(--public-profile-gutter) 5rem;
}
.public-profile-hero {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
  margin-right: calc(-1 * var(--public-profile-gutter));
  min-height: 450px;
  overflow: visible;
}
.public-profile-hero::before { content: none; }
.public-profile-hero::after {
  content: none;
}
.public-profile-banner-frame {
  bottom: 0;
  height: 100%;
  inset: auto 0 0 auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 75%;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 117% 162% at 118% 25%, #000 0%, #000 72%, rgba(0, 0, 0, .88) 78%, rgba(0, 0, 0, .5) 85%, rgba(0, 0, 0, .17) 92%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: radial-gradient(ellipse 117% 162% at 118% 25%, #000 0%, #000 72%, rgba(0, 0, 0, .88) 78%, rgba(0, 0, 0, .5) 85%, rgba(0, 0, 0, .17) 92%, transparent 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
.public-profile-banner {
  display: block;
  height: 100%;
  inset: auto;
  object-fit: cover;
  object-position: center right;
  position: static;
  width: 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 14%, rgba(0, 0, 0, .9) 31%, rgba(0, 0, 0, .55) 58%, rgba(0, 0, 0, .2) 80%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(to bottom, #000 0%, #000 14%, rgba(0, 0, 0, .9) 31%, rgba(0, 0, 0, .55) 58%, rgba(0, 0, 0, .2) 80%, transparent 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
.public-profile-identity {
  align-items: flex-start;
  gap: 2.15rem;
  left: .55rem;
  max-width: min(52%, 760px);
  top: 45%;
  transform: translateY(-50%);
}
.public-profile-avatar { height: 178px; width: 178px; }
.public-profile-copy { display: flex; flex-direction: column; min-height: 210px; padding-top: 0; }
.ui-icon { display: block; fill: none; flex: 0 0 auto; height: 1em; width: 1em; }
.public-profile-copy .secondary-button { align-items: center; align-self: flex-start; border-radius: .42rem; display: inline-flex; gap: .45rem; justify-content: center; margin-bottom: 1.23rem; padding: .52rem .72rem; }
.public-profile-edit-icon { height: .95rem; width: .95rem; }
.public-profile-actions { align-items: start; display: grid; justify-items: start; margin-bottom: 1.23rem; min-height: 2.2rem; }
.public-profile-actions .secondary-button { margin-bottom: 0; }
.public-profile-follow-button { border-color: var(--np-green-border); color: #d8f5e6; }
.public-profile-follow-button:hover { background: var(--np-green-bg); border-color: var(--np-green); }
.public-profile-follow-button.is-following { background: rgba(0, 245, 155, .16); border-color: var(--np-green-border); }
.public-profile-follow-button.is-pending { background: rgba(164, 122, 36, .16); border-color: rgba(244, 196, 89, .62); color: #ffe2a2; }
.public-profile-follow-button:disabled { cursor: wait; opacity: .68; }
.public-profile-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; }
.public-profile-alerts-button { align-items: center; border-color: var(--np-green-border); color: #d8f5e6; display: inline-flex; justify-content: center; padding-left: .7rem; padding-right: .7rem; }
.public-profile-alerts-button .public-profile-follow-icon { margin: 0; }
.public-profile-alerts-button:hover { background: var(--np-green-bg); border-color: var(--np-green); }
.public-profile-alerts-button.is-active { background: rgba(0, 245, 155, .16); color: var(--np-green-soft); }
.public-profile-alerts-button.is-active svg path { fill: currentColor; fill-opacity: .25; }
.public-profile-alerts-button:disabled { cursor: wait; opacity: .68; }
.public-profile-follow-icon { height: .92rem; width: .92rem; }
.public-profile-follow-feedback { color: #ffb8c7; font-size: .67rem; line-height: 1.25; margin-top: .28rem; max-width: 220px; }
.public-profile-support-action { margin-top: -.72rem; }
.public-profile-support-button { background: linear-gradient(105deg, rgba(0, 245, 155, .9), rgba(0, 255, 136, .88)); border-color: var(--np-green-border); box-shadow: 0 0 18px var(--np-green-glow); color: #03110D; }
.public-profile-support-button:hover { background: linear-gradient(105deg, rgba(0, 255, 136, .98), rgba(50, 230, 161, .96)); border-color: var(--np-green-bright); color: #03110D; }
.public-profile-support-icon { height: .9rem; width: .9rem; }
.public-profile-private-note { color: #cdf0dd; font-size: .77rem; font-weight: 700; margin: .44rem 0 0; }
.public-profile-overview.is-private { grid-template-columns: minmax(285px, 340px) minmax(0, 1fr); }
.public-profile-private-card { align-content: center; display: grid; min-height: 170px; }
.public-creator-badge { background: none; border: 0; box-shadow: none; color: rgba(255, 255, 255, .94); flex: 0 0 1.48rem; height: 1.48rem; isolation: isolate; margin-top: .08em; padding: .29rem; position: relative; width: 1.48rem; }
/* Insignia de creador con identidad propia: hexágono "nodo" con aro degradado, interior oscuro y check neón. */
.public-creator-badge { color: var(--np-green-bright); filter: drop-shadow(0 0 .32rem var(--np-green-glow)); }
.public-creator-badge::before { background: linear-gradient(135deg, var(--np-green-bright) 0%, var(--np-green) 50%, #0f6b4e 100%); clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); content: ''; inset: 0; position: absolute; z-index: -2; }
.public-creator-badge::after { background: linear-gradient(160deg, #0b2a22 0%, #04130f 100%); clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); content: ''; inset: 2px; position: absolute; z-index: -1; }
.public-creator-badge .ui-icon { height: 100%; stroke: currentColor; width: 100%; }
.public-creator-badge .ui-icon path { stroke-width: 2.4; }
.public-profile-username { margin: .3rem 0 .72rem; }
.public-profile-meta { margin-top: auto; padding-top: .7rem; transform: translateY(10px); }
.public-profile-meta > span { align-items: center; display: inline-flex; gap: .34rem; }
.public-profile-meta-icon { color: var(--np-green-soft); height: .94rem; width: .94rem; }
.public-profile-stats {
  backdrop-filter: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  bottom: 2.3rem;
  left: 44%;
  right: auto;
  transform: none;
}
.public-profile-stats a { min-width: 90px; padding: .34rem 1rem; }
.public-profile-stats a + a::before { background: linear-gradient(to bottom, transparent, rgba(154, 167, 163, .5), transparent); bottom: -.1rem; top: -.1rem; }
.public-profile-stats strong { font-size: 1.23rem; letter-spacing: -.02em; }
.public-profile-stats span { color: #c5d1cb; font-size: .69rem; margin-top: .2rem; }
.public-profile-tabs {
  background: #0e1a17;
  border-color: #263531;
  box-shadow: 0 .45rem 1.2rem rgba(0, 0, 0, .16);
  border-radius: .6rem;
  display: flex;
  gap: .1rem;
  margin: .45rem 0 1rem;
  max-width: 100%;
  padding: 0 .35rem;
  position: relative;
  width: 100%;
  z-index: 4;
}
.public-profile-tab {
  align-items: center;
  border-bottom: 3px solid transparent;
  color: #c1cdc7;
  display: inline-flex;
  font-size: .76rem;
  font-weight: 730;
  gap: .48rem;
  justify-content: flex-start;
  min-width: 0;
  padding: .98rem .72rem .85rem;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
}
.public-profile-tab:not(.is-pending):hover { color: #eafff2; }
.public-profile-tab.is-active { border-color: var(--np-green); color: var(--np-green-soft); }
.public-profile-tab.is-pending { color: #7a8983; cursor: default; opacity: .72; }
.public-profile-tab-icon { color: var(--np-green-soft); font-size: 1rem; height: 1rem; line-height: .8; width: 1rem; }
.public-profile-tab.is-pending .public-profile-tab-icon { color: #899690; }
.public-profile-overview { grid-template-columns: minmax(285px, 340px) minmax(0, 1fr) minmax(285px, 340px); }
.public-profile-side .public-profile-card { min-height: 260px; }
.public-profile-right .public-profile-card { min-height: 280px; }
.public-profile-activity-icon .ui-icon { height: 1rem; width: 1rem; }
.public-profile-achievements { background: linear-gradient(145deg, #101c19, #0c1614); border: 1px solid #223530; border-radius: .7rem; box-shadow: 0 10px 25px rgba(0, 0, 0, .12); padding: 1rem; }
.public-profile-achievements h2 { color: #f1faf4; font-size: 1.03rem; margin: 0; }
.public-profile-achievements-list { column-gap: .5rem; display: grid; row-gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); margin-top: .85rem; }
.public-profile-achievement { align-items: center; cursor: default; display: flex; gap: .55rem; min-width: 0; position: relative; }
.public-profile-achievement:focus-visible { border-radius: .45rem; outline: 2px solid var(--np-green-bright); outline-offset: 3px; }
.public-profile-achievement-icon { align-items: center; background: linear-gradient(145deg, #123328, #0e1a17); border: 1px solid var(--np-green-border); border-radius: .45rem; box-shadow: inset 0 0 0 1px var(--np-green-bg), 0 .3rem .75rem rgba(0, 0, 0, .2); color: var(--np-green-soft); display: inline-flex; flex: 0 0 auto; height: 2.25rem; justify-content: center; transform: rotate(45deg); width: 2.25rem; }
.public-profile-achievement-icon .ui-icon { height: 1.22rem; transform: rotate(-45deg); width: 1.22rem; }
.public-profile-achievement-icon.is-trophy { border-color: #d8a454; color: #ffd27c; }
.public-profile-achievement-icon.is-heart { border-color: #bd577d; color: #ff92af; }
.public-profile-achievement > span:nth-child(2) { display: grid; gap: .12rem; min-width: 0; }
.public-profile-achievement strong { color: #e2efe8; font-size: .7rem; line-height: 1.2; }
.public-profile-achievement-tip { background: #0a1311; border: 1px solid #2c4a40; border-radius: .45rem; bottom: calc(100% + .45rem); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); color: #d6e4dc; font-size: .72rem; left: 0; line-height: 1.35; max-width: min(17rem, 80vw); opacity: 0; padding: .45rem .6rem; pointer-events: none; position: absolute; transform: translate(var(--tip-shift, 0px), 4px); transition: opacity .12s ease, transform .12s ease; width: max-content; z-index: 20; }
.public-profile-achievement:hover .public-profile-achievement-tip, .public-profile-achievement:focus .public-profile-achievement-tip { opacity: 1; transform: translate(var(--tip-shift, 0px), 0); }
@media (prefers-reduced-motion: reduce) { .public-profile-achievement-tip { transition: none; } }
.public-profile-achievement.is-locked .public-profile-achievement-icon, .public-profile-achievement.is-locked strong { opacity: .6; }
.public-profile-achievement.is-locked .public-profile-achievement-icon { background: #101a18; border-color: #2c3a36; box-shadow: none; color: #8b988f; }
.public-profile-achievement.is-locked strong { color: #b2c2b9; }

.public-profile-achievement.is-unlocked .public-profile-achievement-icon { box-shadow: inset 0 0 0 1px var(--np-green-bg), 0 .3rem .8rem rgba(0, 0, 0, .28), 0 0 .8rem var(--np-green-glow); }
.public-profile-achievement.is-unlocked .is-compass { border-color: #4dcad0; color: #74f2f0; }
.public-profile-achievement.is-unlocked .is-heart { border-color: #d85f86; color: #ff9eb9; }
.public-profile-achievement.is-unlocked .is-activity { border-color: #70a4f5; color: #a7c8ff; }
.public-profile-achievement.is-unlocked .is-trophy { border-color: #d8a454; color: #ffd27c; }
.public-profile-achievement.is-unlocked .is-shield { border-color: #66a6ff; color: #a5cbff; }
.public-profile-achievement.is-unlocked .is-rating { border-color: var(--np-green-bright); color: var(--np-green-soft); }

@media (max-width: 1180px) {
  /* Tablets need content-driven height too, including landscape orientation. */
  .public-profile-hero { min-height: 450px; padding: 1.5rem var(--public-profile-gutter) 1.25rem 0; }
  .public-profile-identity { position: relative; inset: auto; max-width: 100%; transform: none; gap: 1.5rem; }
  .public-profile-copy { overflow-wrap: anywhere; }
  .public-profile-stats { position: relative; inset: auto; transform: none; margin: 2rem 0 0; justify-content: flex-end; }
  .public-profile-overview { grid-template-columns: minmax(220px, 31%) minmax(0, 1fr); }
  .public-profile-right { grid-column: 1 / -1; }
  .public-profile-activity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-profile-games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 850px) {
  .profile-main-fields, .profile-links-grid { grid-template-columns: 1fr; }
  .public-profile-page { --public-profile-gutter: 1.5rem; }
  .public-profile-tabs { display: flex; overflow-x: auto; padding: 0 .35rem; width: 100%; }
  .public-profile-tab { flex: 0 0 auto; }
  .public-profile-games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .profile-account-summary { grid-template-columns: 1fr; }
  .profile-media-settings { grid-template-columns: 1fr; }
  .profile-media-settings .profile-avatar-preview { margin-top: -3.4rem; }
  .profile-media-settings label:last-child { grid-column: auto; }
  .public-profile-page { --public-profile-gutter: 1rem; padding-bottom: 4rem; }
  .public-profile-hero { min-height: 470px; padding-top: 1.2rem; }
  .public-profile-hero::after { content: none; }
  .public-profile-banner-frame { height: 300px; max-height: 64%; inset: 0 0 auto; top: 0; width: 100%; -webkit-mask-image: none; mask-image: none; }
  .public-profile-banner { height: 100%; inset: auto; top: auto; width: 100%; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, .52) 75%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0, 0, 0, .52) 75%, transparent 100%); }
  .public-profile-identity { align-items: flex-start; flex-direction: column; gap: .75rem; inset: auto; max-width: 100%; transform: none; }
  .public-profile-copy { min-height: 0; }
  .public-profile-meta { margin-top: .72rem; padding-top: 0; transform: none; }
  .public-profile-avatar { height: 100px; width: 100px; }
  .public-profile-copy h1 { font-size: 1.75rem; }
  .public-profile-stats { inset: auto; margin-top: 1.5rem; transform: none; }
  .public-profile-stats a { flex: 1; min-width: 0; padding: .62rem .25rem; }
  .public-profile-overview { grid-template-columns: 1fr; }
  .public-profile-right { grid-column: auto; }
  .public-profile-games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-profile-activity-list { grid-template-columns: 1fr; }
}

.admin-news-form { display: grid; gap: .7rem; margin: .8rem 0 1.2rem; }
.admin-news-form label { display: grid; font-size: .8rem; gap: .3rem; }
.admin-news-form textarea { font: inherit; resize: vertical; }
.news-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.news-grid-list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.news-card { background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .9rem; color: inherit; display: flex; flex-direction: column; overflow: hidden; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.news-card:hover, .news-card:focus-visible { border-color: var(--np-green); transform: translateY(-2px); }
.news-cover { aspect-ratio: 16 / 9; background: linear-gradient(135deg, rgba(0, 245, 155, .12), rgba(90, 60, 160, .2)); overflow: hidden; width: 100%; }
.news-cover img { display: block; height: 100%; object-fit: cover; width: 100%; }
.news-card-copy { display: grid; gap: .35rem; padding: .85rem .95rem 1rem; }
.news-card-copy h3 { font-size: 1rem; line-height: 1.25; margin: 0; }
.news-card-copy p { color: var(--text-muted); font-size: .82rem; line-height: 1.4; margin: 0; }
.news-date { color: var(--np-green); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.news-strip .section-heading .secondary-button { white-space: nowrap; }
.news-page { padding-top: 2rem; }
/* Las páginas de contenido (mascotas, creadores, escaparate, eventos…) van centradas y con margen a los lados; antes solo lo tenían noticias, foro y colecciones y, en pantallas anchas, el resto quedaba pegado al borde. */
.news-page.home-main { margin: 0 auto; max-width: 1160px; padding-left: 2rem; padding-right: 2rem; }
@media (max-width: 700px) { .news-page.home-main { padding-left: 1.25rem; padding-right: 1.25rem; } }

/* Icono «i» con la explicación en un globo (public/info-tip.js): sustituye a los párrafos de ayuda para que la página quede limpia. */
.info-tip { align-items: center; color: var(--text-muted, #9aa7a3); cursor: help; display: inline-flex; flex: none; font-size: .72rem; font-weight: 400; letter-spacing: 0; line-height: 1; position: relative; text-transform: none; vertical-align: middle; }
.info-tip:focus-visible { outline: 2px solid var(--np-green-bright, #61f59e); outline-offset: 2px; border-radius: 50%; }
.info-tip-mark { align-items: center; border: 1.5px solid currentColor; border-radius: 50%; display: inline-flex; font-size: .68rem; font-style: italic; font-weight: 800; height: 1.05rem; justify-content: center; transition: color .15s ease, background .15s ease; width: 1.05rem; }
.info-tip:hover .info-tip-mark, .info-tip:focus .info-tip-mark { background: rgba(var(--np-green-rgb), .14); color: var(--np-green-soft, #7be8b0); }
.info-tip-text { background: #0b1412; border: 1px solid rgba(154, 167, 163, .45); border-radius: .55rem; bottom: calc(100% + .5rem); box-shadow: 0 10px 28px rgba(0, 0, 0, .55); color: #dfe9e4; font-size: .76rem; font-style: normal; font-weight: 500; left: 50%; line-height: 1.45; opacity: 0; padding: .55rem .7rem; pointer-events: none; position: absolute; text-align: left; transform: translateX(-50%); transition: opacity .15s ease; visibility: hidden; white-space: normal; width: max-content; max-width: min(300px, 78vw); z-index: 60; }
.info-tip:hover .info-tip-text, .info-tip:focus .info-tip-text { opacity: 1; visibility: visible; }
.info-tip.is-start .info-tip-text { left: 0; transform: none; }
.info-tip.is-end .info-tip-text { left: auto; right: 0; transform: none; }
.info-tip.is-below .info-tip-text { bottom: auto; top: calc(100% + .5rem); }
@media (prefers-reduced-motion: reduce) { .info-tip-text, .info-tip-mark { transition: none; } }
.news-article { margin: 0 auto; max-width: 46rem; }
.news-article h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin: .3rem 0 .6rem; }
.news-lead { color: var(--text-muted); font-size: 1.1rem; line-height: 1.5; }
.news-back { color: var(--text-muted); display: block; font-size: .85rem; margin-bottom: .8rem; text-decoration: none; }
.news-article .news-date { display: block; }
.news-article-cover { border-radius: .9rem; margin: 1.2rem 0; }
.news-body { display: grid; font-size: 1rem; gap: 1rem; line-height: 1.7; margin-top: 1.2rem; }
.news-body p, .news-body ul, .news-body ol, .news-body blockquote, .news-body h2, .news-body h3 { margin: 0; }
.news-body h2 { font-size: 1.45rem; line-height: 1.25; margin-top: .6rem; }
.news-body h3 { font-size: 1.15rem; line-height: 1.3; margin-top: .3rem; }
.news-body ul, .news-body ol { display: grid; gap: .4rem; padding-left: 1.4rem; }
.news-body a { color: var(--np-green-soft); text-decoration: underline; text-underline-offset: .15em; }
.news-body blockquote { border-left: 3px solid var(--np-green-border); color: var(--np-text-muted); font-style: italic; padding: .2rem 0 .2rem 1rem; }
.news-figure { display: grid; gap: .4rem; margin: .4rem 0; }
.news-figure img { border-radius: .7rem; display: block; height: auto; max-width: 100%; }
.news-figure figcaption { color: var(--np-text-dim); font-size: .8rem; text-align: center; }
.news-game-card { align-items: center; background: var(--np-green-bg); border: 1px solid var(--np-green-border); border-radius: .9rem; display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; justify-content: space-between; margin-top: 1.8rem; padding: 1rem 1.2rem; }
.news-game-card .news-game-link { margin-top: 0; }
#news-page { margin: 0 auto; max-width: 1160px; padding-left: 2rem; padding-right: 2rem; }
@media (max-width: 700px) { #news-page { padding-left: 1.25rem; padding-right: 1.25rem; } }
.news-heading { align-items: baseline; display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; }
.news-heading h1 { flex-basis: 100%; margin: 0; }
.news-intro { color: var(--np-text-muted); flex: 1 1 18rem; margin: 0; }
.news-rss { color: var(--np-text-muted); font-size: .82rem; }
.news-rss:hover { color: var(--np-green-soft); }
.news-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0; }
.news-filter { background: transparent; border: 1px solid var(--panel-border); border-radius: 999px; color: var(--np-text-muted); cursor: pointer; font: inherit; font-size: .82rem; padding: .35rem .85rem; }
.news-filter:hover { border-color: var(--np-green-border); color: var(--np-text); }
.news-filter[aria-pressed='true'] { background: var(--np-green-bg); border-color: var(--np-green-border); color: var(--np-green-soft); }
.news-featured { margin-bottom: 1rem; }
.news-featured:empty { display: none; }
.news-card-featured { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.news-card-featured .news-card-copy { align-content: center; gap: .6rem; padding: 1.4rem; }
.news-card-featured h3 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.2; }
.news-card-featured p { font-size: .95rem; }
.news-card-featured .news-card-cover { height: 100%; }
@media (max-width: 760px) { .news-card-featured { grid-template-columns: 1fr; } }
.news-meta { align-items: center; color: var(--np-text-muted); display: flex; flex-wrap: wrap; font-size: .72rem; gap: .2rem .7rem; margin: 0; }
.news-category { color: var(--np-green); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.news-meta .news-date { color: var(--np-text-muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
.news-article .news-meta { font-size: .8rem; }
.news-article .news-date { display: inline; }
.news-byline { color: var(--np-text-dim); font-size: .85rem; margin: 0; }
.news-more { display: block; margin: 1.4rem auto 0; }
.news-share { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem 1rem; margin-top: 1.4rem; }
.news-share-note { color: var(--np-green-soft); font-size: .82rem; }
.news-related { border-top: 1px solid var(--border-subtle); margin-top: 2.2rem; padding-top: 1.4rem; }
.news-related h2 { font-size: 1.1rem; margin: 0 0 .9rem; }
.news-related .news-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.news-game-link { display: inline-block; margin-top: 1.6rem; }
/* Foros de debate */
#forum-page { margin: 0 auto; max-width: 1000px; padding-left: 2rem; padding-right: 2rem; }
@media (max-width: 700px) { #forum-page { padding-left: 1.25rem; padding-right: 1.25rem; } }
.forum-heading .forum-new { margin: 0 0 0 auto; }
.forum-heading { margin-bottom: 1rem; }
.forum-as-team { align-items: center; color: var(--np-text-muted); display: flex !important; font-size: .85rem; gap: .5rem; }
.forum-as-team input { height: 1.1rem; width: 1.1rem; }
.forum-breadcrumbs { align-items: center; background: rgba(255, 255, 255, .04); border: 1px solid var(--border-subtle); border-radius: .6rem; color: var(--np-text-muted); display: flex; flex-wrap: wrap; font-size: .85rem; gap: .2rem .55rem; margin-bottom: .9rem; padding: .5rem .85rem; }
.forum-breadcrumbs-bottom { margin: 1rem 0 0; }
.forum-breadcrumbs a { color: var(--np-green-soft); text-decoration: none; }
.forum-breadcrumbs a:hover { text-decoration: underline; }
.forum-breadcrumbs a:hover { color: var(--np-green-soft); }
.forum-crumb-current { color: var(--np-text); overflow-wrap: anywhere; }
.forum-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; justify-content: space-between; margin: 1rem 0; }
.forum-search { display: flex; gap: .5rem; }
.forum-search input { background: var(--np-surface); border: 1px solid var(--panel-border); border-radius: 999px; color: var(--np-text); font: inherit; font-size: .85rem; min-width: 14rem; padding: .4rem .9rem; }
.forum-quicklinks { align-items: center; display: flex; flex-wrap: wrap; font-size: .82rem; gap: .4rem 1rem; }
.forum-quicklinks a { color: var(--np-green-soft); }
.forum-controls { display: flex; justify-content: flex-end; margin: .4rem 0 .8rem; }
.forum-controls select { background: var(--np-surface); border: 1px solid var(--panel-border); border-radius: 999px; color: var(--np-text); font: inherit; font-size: .82rem; padding: .3rem .8rem; }
.forum-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0; }
.forum-group { margin-bottom: 1.2rem; }
.forum-group-head { background: linear-gradient(90deg, rgba(var(--np-green-rgb), .16), rgba(var(--np-green-rgb), .04)); border: 1px solid var(--border-subtle); border-bottom: 0; border-radius: .8rem .8rem 0 0; padding: .55rem 1rem; }
.forum-group-head h2 { font-size: .95rem; margin: 0; }
.forum-table { border: 1px solid var(--border-subtle); border-radius: 0 0 .8rem .8rem; overflow: hidden; }
.forum-threads { border-radius: .8rem; margin-bottom: 1rem; }
.forum-table-head, .forum-row { align-items: center; display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem 13rem; padding: .6rem 1rem; }
.forum-table-head { background: rgba(255, 255, 255, .04); color: var(--np-text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.forum-row { border-top: 1px solid var(--border-subtle); }
.forum-row.is-pinned { background: rgba(var(--np-green-rgb), .05); }
.forum-row.is-unread .forum-forum-link, .forum-row.is-unread .forum-thread-link { font-weight: 800; }
.forum-num { color: var(--np-text-muted); font-size: .85rem; text-align: center; }
.forum-cell-main { align-items: flex-start; display: flex; gap: .7rem; min-width: 0; }
.forum-icon { color: var(--np-text-dim); flex: 0 0 auto; font-size: .9rem; line-height: 1.5; width: 1.1rem; }
.forum-icon.is-unread { color: var(--np-green); }
.forum-forum-link, .forum-thread-link { color: var(--np-text); font-weight: 650; overflow-wrap: anywhere; text-decoration: none; }
.forum-forum-link:hover, .forum-thread-link:hover { color: var(--np-green-soft); }
.forum-row-meta { color: var(--np-text-muted); font-size: .78rem; line-height: 1.4; margin: .15rem 0 0; }
.forum-row-meta a { color: var(--np-text-muted); }
.forum-row-meta > * { margin-right: .35rem; }
.forum-subforums { color: var(--np-text-muted); font-size: .78rem; margin: .25rem 0 0; }
.forum-thread-title { align-items: center; display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.forum-last { color: var(--np-text-muted); display: grid; font-size: .76rem; gap: .1rem; line-height: 1.35; min-width: 0; }
.forum-last-title { color: var(--np-text); font-size: .82rem; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.forum-stats { color: var(--np-text-muted); display: flex; flex-wrap: wrap; font-size: .82rem; gap: .4rem 1.4rem; margin: 1rem 0 0; }
.forum-prefix { background: rgba(255, 255, 255, .08); border-radius: .4rem; color: var(--np-text); font-size: .68rem; font-weight: 800; padding: .08rem .45rem; text-transform: uppercase; }
.forum-prefix.is-solved { background: var(--np-green-bg); color: var(--np-green-soft); }
.forum-prefix.is-question { background: rgba(255, 212, 121, .14); color: #ffd479; }
.forum-prefix.is-demo { background: rgba(120, 180, 255, .16); color: #a9cdff; }
@media (max-width: 760px) {
  .forum-table-head { display: none; }
  .forum-row { grid-template-columns: 1fr; gap: .3rem; }
  .forum-num { display: none; }
}
.forum-post { display: grid; gap: 0; grid-template-columns: 11rem minmax(0, 1fr); padding: 0; overflow: hidden; }
.forum-author-card { align-content: start; background: rgba(255, 255, 255, .025); border-right: 1px solid var(--border-subtle); display: grid; gap: .3rem; justify-items: center; padding: 1rem .8rem; text-align: center; }
.forum-author-card small { color: var(--np-text-muted); font-size: .72rem; }
.forum-author-name { color: var(--np-text); font-size: .88rem; font-weight: 700; overflow-wrap: anywhere; text-decoration: none; }
.forum-avatar-large { border-radius: 50%; height: 3.6rem; object-fit: cover; width: 3.6rem; }
.forum-post-main { min-width: 0; padding: .9rem 1.1rem 1rem; }
.forum-thread-meta { align-items: center; color: var(--np-text-muted); display: flex; flex-wrap: wrap; font-size: .78rem; gap: .25rem .8rem; margin: 0 0 .8rem; }
@media (max-width: 640px) {
  .forum-post { grid-template-columns: 1fr; }
  .forum-author-card { border-bottom: 1px solid var(--border-subtle); border-right: 0; grid-template-columns: auto 1fr; justify-items: start; text-align: left; }
  .forum-avatar-large { height: 2.4rem; width: 2.4rem; }
}
.forum-structure { border: 1px solid var(--border-subtle); border-radius: .7rem; margin-bottom: .8rem; padding: .8rem 1rem; }
.forum-structure h4 { margin: 0 0 .5rem; }
.news-more[hidden], .forum-more[hidden] { display: none; }
.forum-heading .news-intro { flex: 1 1 22rem; }
.news-filters select { background: var(--np-surface); border: 1px solid var(--panel-border); border-radius: 999px; color: var(--np-text); font: inherit; font-size: .82rem; margin-left: auto; padding: .3rem .8rem; }
.forum-list { display: grid; gap: .5rem; }
.forum-thread { align-items: center; background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .75rem; color: inherit; display: flex; gap: 1rem; justify-content: space-between; padding: .85rem 1rem; text-decoration: none; transition: border-color .15s ease; }
.forum-thread:hover, .forum-thread:focus-visible { border-color: var(--np-green-border); }
.forum-thread.is-pinned { border-color: var(--np-green-border); }
.forum-thread-main { display: grid; gap: .3rem; min-width: 0; }
.forum-thread-main strong { font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.forum-thread-meta { align-items: center; color: var(--np-text-muted); display: flex; flex-wrap: wrap; font-size: .75rem; gap: .25rem .7rem; margin: 0; }
.forum-thread-count { color: var(--np-text-muted); flex: 0 0 auto; font-size: .78rem; }
.forum-badge { background: rgba(255, 255, 255, .07); border-radius: .5rem; color: var(--np-text-muted); font-size: .66rem; font-weight: 700; padding: .1rem .5rem; }
.forum-badge-team { background: var(--np-green-bg); color: var(--np-green-soft); }
.forum-badge-warn { background: rgba(255, 212, 121, .14); color: #ffd479; }
.forum-form { display: grid; gap: .8rem; }
.forum-form label { color: var(--np-text-muted); display: grid; font-size: .85rem; gap: .35rem; }
.forum-form input, .forum-form select, .forum-form textarea { background: var(--np-surface); border: 1px solid var(--panel-border); border-radius: .5rem; color: var(--np-text); font: inherit; padding: .6rem .75rem; }
.forum-form textarea { resize: vertical; }
.forum-thread-head h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.2; margin: .4rem 0 .8rem; overflow-wrap: anywhere; }
.forum-thread-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.forum-posts { display: grid; gap: .8rem; }
.forum-post { background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .8rem; padding: .9rem 1.1rem 1rem; }
.forum-post.is-pending { border-color: rgba(255, 212, 121, .4); }
.forum-post.is-hidden, .forum-post.is-deleted { opacity: .75; }
.forum-post-head { align-items: center; color: var(--np-text-muted); display: flex; flex-wrap: wrap; font-size: .78rem; gap: .3rem .8rem; margin-bottom: .6rem; }
.forum-author { align-items: center; display: inline-flex; gap: .5rem; }
.forum-author a { color: var(--np-text); font-weight: 700; text-decoration: none; }
.forum-avatar { border-radius: 50%; height: 1.7rem; object-fit: cover; width: 1.7rem; }
.forum-post-body { margin-top: 0; }
.forum-post-actions { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .7rem; }
.forum-link { background: none; border: 0; color: var(--np-text-muted); cursor: pointer; font: inherit; font-size: .78rem; padding: 0; text-decoration: underline; text-underline-offset: .15em; }
.forum-link:hover { color: var(--np-green-soft); }
.forum-link-danger:hover { color: #ff8b8b; }
.forum-reply { border-top: 1px solid var(--border-subtle); margin-top: 1.6rem; padding-top: 1.2rem; }
.forum-reply h2 { font-size: 1.05rem; margin: 0; }
/* Colecciones de la comunidad */
#collections-page { margin: 0 auto; max-width: 1160px; padding-left: 2rem; padding-right: 2rem; }
@media (max-width: 700px) { #collections-page { padding-left: 1.25rem; padding-right: 1.25rem; } }
.collection-card { background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .9rem; color: inherit; display: flex; flex-direction: column; overflow: hidden; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.collection-card:hover, .collection-card:focus-visible { border-color: var(--np-green-border); transform: translateY(-2px); }
.collection-mosaic { aspect-ratio: 16 / 9; background: rgba(255, 255, 255, .04); display: grid; gap: 2px; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); overflow: hidden; }
.collection-mosaic img { display: block; height: 100%; object-fit: cover; width: 100%; }
.collection-mosaic.has-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.collection-mosaic.has-2 { grid-template-rows: 1fr; }
.collection-mosaic.has-3 img:first-child { grid-row: span 2; }
.collection-card-copy { display: grid; gap: .3rem; padding: .85rem .95rem 1rem; }
.collection-card-copy h3 { font-size: 1rem; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.collection-card-owner, .collection-card-description { color: var(--np-text-muted); font-size: .8rem; line-height: 1.4; margin: 0; }
/* Avisos globales del equipo: caja flotante arriba, en el centro. */
.site-announcements { display: grid; gap: .5rem; justify-items: center; left: 50%; max-width: min(40rem, calc(100vw - 1.5rem)); pointer-events: none; position: fixed; top: .75rem; transform: translateX(-50%); width: 100%; z-index: 1200; }
.site-announcement { align-items: center; border: 1px solid; border-radius: .8rem; box-shadow: 0 8px 28px rgba(0, 0, 0, .45); display: flex; font-size: .92rem; gap: .8rem; line-height: 1.4; padding: .7rem .9rem .7rem 1.1rem; pointer-events: auto; width: 100%; }
.site-announcement p { flex: 1; margin: 0; }
.site-announcement.is-green { background: #0d3a2a; border-color: #20f6a5; color: #d9fff0; }
.site-announcement.is-yellow { background: #3d3207; border-color: #ffd479; color: #fff1c9; }
.site-announcement.is-red { background: #4a1414; border-color: #ff8b8b; color: #ffe0e0; }
.site-announcement-close { background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 1.4rem; line-height: 1; padding: 0 .2rem; }
.ann-preview { box-shadow: none; max-width: 40rem; }
.ann-colors { display: flex; flex-wrap: wrap; gap: .6rem; }
.ann-swatch { align-items: center; border: 1px solid; border-radius: 999px; cursor: pointer; display: inline-flex; gap: .4rem; padding: .25rem .8rem; }
.ann-swatch.is-green { background: #0d3a2a; border-color: #20f6a5; color: #d9fff0; }
.ann-swatch.is-yellow { background: #3d3207; border-color: #ffd479; color: #fff1c9; }
.ann-swatch.is-red { background: #4a1414; border-color: #ff8b8b; color: #ffe0e0; }
@media (max-width: 1000px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .news-grid { grid-template-columns: 1fr; } }
.report-dialog { max-height: calc(100vh - 2rem); overflow-y: auto; }
.report-choose { font-size: .82rem; font-weight: 700; margin: .9rem 0 .3rem; }
.report-reasons { display: grid; gap: .6rem; }
.report-reasons fieldset { border: 1px solid #263531; border-radius: .6rem; display: grid; gap: .1rem; margin: 0; padding: .4rem .7rem .6rem; }
.report-reasons legend { color: var(--np-green); font-size: .68rem; font-weight: 800; letter-spacing: .06em; padding: 0 .3rem; text-transform: uppercase; }
.report-dialog label.report-reason-option { align-items: center; cursor: pointer; display: flex; gap: .55rem; margin-top: .35rem; }
.delete-account-dialog { background: #0d1a17; border: 1px solid rgba(255, 107, 107, .5); border-radius: .8rem; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .6); color: var(--np-text); max-width: min(30rem, calc(100vw - 2rem)); padding: 1.3rem 1.4rem; width: 100%; }
.delete-account-dialog::backdrop { background: rgba(2, 8, 10, .78); }
.delete-account-dialog h2 { color: #ff9a9a; font-size: 1.2rem; margin: 0 0 .4rem; }
.delete-account-dialog ul { display: grid; font-size: .85rem; gap: .3rem; margin: .6rem 0 .9rem; padding-left: 1.1rem; }
.delete-account-dialog label { display: grid; font-size: .82rem; gap: .35rem; margin-top: .8rem; }
.delete-account-dialog input[type="password"] { background: #0a1513; border: 1px solid #2c3a36; border-radius: .5rem; color: var(--np-text); font: inherit; padding: .6rem .7rem; }
.delete-account-dialog label.delete-dialog-check { align-items: center; cursor: pointer; display: flex; gap: .55rem; }
.delete-dialog-error { color: #ff8b8b; font-size: .8rem; margin: .5rem 0 0; min-height: 1em; }
.profile-privacy { border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: .6rem; margin-top: 1.5rem; padding-top: 1.2rem; }
.profile-privacy-form { display: grid; gap: .55rem; }
.profile-privacy-option { align-items: center; cursor: pointer; display: flex; font-size: .9rem; gap: .55rem; }
.public-profile-contact { color: var(--np-green); text-decoration: none; }
.appeal-page { margin: 0 auto; max-width: 44rem; padding: 2rem 1rem 4rem; }
.appeal-wrapper { display: grid; gap: 1rem; }
.appeal-card { background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .9rem; display: grid; gap: .7rem; padding: 1.1rem 1.2rem; }
.appeal-card h2 { font-size: 1.15rem; margin: 0; }
.appeal-form { display: grid; gap: .8rem; }
.appeal-form label { display: grid; font-size: .85rem; gap: .35rem; }
.appeal-form textarea { background: #0a1513; border: 1px solid #2c3a36; border-radius: .5rem; color: var(--np-text); font: inherit; padding: .6rem .7rem; resize: vertical; }
.appeal-message { background: rgba(255, 255, 255, .04); border-radius: .6rem; margin: 0; padding: .7rem .8rem; white-space: pre-line; }
.appeal-status { font-weight: 800; margin: 0; }
.appeal-status-accepted { color: #7dffb8; }
.appeal-status-rejected { color: #ff8b8b; }
.appeal-status-open { color: #ffd479; }
.appeal-answer { border-left: 3px solid var(--np-green); margin: 0; padding-left: .8rem; }
.appeal-evidence { display: flex; flex-wrap: wrap; gap: .5rem; }
.appeal-evidence img { border: 1px solid var(--border-subtle); border-radius: .5rem; height: 5.5rem; object-fit: cover; width: 8rem; }
.auth-appeal-link { color: var(--np-green); font-weight: 800; }
.admin-appeal-evidence { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.admin-appeal-evidence img { border-radius: .4rem; height: 4.5rem; object-fit: cover; width: 7rem; }
.admin-appeal-message { flex: 1 1 100%; margin: .4rem 0 0; white-space: pre-line; }
.unique-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.unique-medal { align-items: center; background: linear-gradient(135deg, rgba(255, 200, 70, .14), rgba(255, 140, 40, .06)); border: 1px solid rgba(255, 200, 70, .5); border-radius: .8rem; display: flex; gap: .8rem; padding: .8rem .95rem; }
.unique-medal.is-free { background: rgba(255, 255, 255, .03); border: 1px dashed var(--border-subtle); }
.unique-medal-icon { align-items: center; background: radial-gradient(circle at 35% 30%, #fff1b3, #f0b429 55%, #b7791f); border-radius: 50%; box-shadow: 0 0 .9rem rgba(255, 190, 60, .45); color: #5a3a00; display: inline-flex; flex: none; font-size: 1.25rem; height: 2.6rem; justify-content: center; width: 2.6rem; }
.unique-medal.is-free .unique-medal-icon { background: transparent; box-shadow: none; color: var(--text-muted); border: 1px dashed var(--border-subtle); }
.unique-medal strong { display: block; font-size: .92rem; }
.unique-medal small { color: var(--text-muted); display: block; font-size: .76rem; line-height: 1.35; margin-top: .15rem; }
.unique-holder { color: #ffd479; font-size: .74rem; margin-top: .3rem; }
.unique-holder a { color: inherit; font-weight: 800; }
.unique-free-tag { color: var(--np-green); display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .08em; margin-top: .3rem; }
.hall-page { padding-top: 2rem; }
.hall-intro { color: var(--text-muted); max-width: 42rem; }
.hall-subtitle { font-size: 1.15rem; margin: 2rem 0 .8rem; }
.public-profile-unique { display: grid; gap: .6rem; margin-bottom: 1.4rem; }
.unique-see-all { color: var(--np-green); font-size: .82rem; }
.catalog-search { position: relative; }
.search-results { background: #0d1a17; border: 1px solid #263531; border-radius: .8rem; box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .55); left: 0; max-height: 70vh; min-width: min(24rem, 90vw); overflow-y: auto; padding: .4rem; position: absolute; right: 0; top: calc(100% + .4rem); z-index: 60; }
.search-section-title { color: var(--np-green); font-size: .64rem; font-weight: 800; letter-spacing: .08em; margin: .5rem .5rem .2rem; text-transform: uppercase; }
.search-result { align-items: center; border-radius: .5rem; color: inherit; display: flex; gap: .6rem; padding: .4rem .5rem; text-decoration: none; }
.search-result:hover, .search-result:focus-visible { background: rgba(0, 245, 155, .12); outline: none; }
.search-result img, .search-result-icon { border-radius: .35rem; flex: none; height: 2.2rem; object-fit: cover; width: 3.4rem; }
.search-result img.is-round { border-radius: 50%; width: 2.2rem; }
.search-result-icon { align-items: center; background: rgba(255, 255, 255, .06); display: inline-flex; justify-content: center; }
.search-result-copy { display: grid; min-width: 0; }
/* `.catalog-search span` (más arriba) ponía line-height .8 a todos los span de la caja, y con eso título y subtítulo del resultado se pisaban. */
.catalog-search .search-result-copy { font-size: inherit; line-height: 1.3; }
.search-result-copy strong { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-copy small { color: var(--text-muted); font-size: .7rem; }
.search-empty { color: var(--text-muted); font-size: .82rem; margin: .6rem; }
.interaction-rating { align-items: center; color: #ffd479; cursor: default; display: inline-flex; font-size: .78rem; font-weight: 800; gap: .2rem; margin-left: auto; }
.messages-link { align-items: center; color: inherit; display: inline-flex; font-size: 1.9rem; padding: 0 .5rem; position: relative; text-decoration: none; }
/* .account-nav a:not(.account-action) fija font-size: .82rem para los enlaces de texto del menú; el sobre es un icono, no texto,
   así que necesita más especificidad aquí para no heredar ese tamaño pequeño. 1.9rem iguala la altura de tinta real del glifo ✉
   (que solo ocupa ~60% de su caja de fuente) con la del icono ⚿ de la campanita, medido a pixel con un canvas, no a ojo. */
.account-nav a.messages-link { font-size: 1.9rem; }
.messages-link-badge { background: var(--np-green); border-radius: 999px; color: #032015; font-size: .62rem; font-weight: 800; padding: 0 .3rem; position: absolute; right: -.1rem; top: -.35rem; }
.messages-page { margin: 0 auto; max-width: 62rem; padding: 1.5rem 1rem 3rem; }
.messages-layout { display: grid; gap: 1rem; grid-template-columns: minmax(15rem, 20rem) 1fr; min-height: 60vh; }
.messages-side h1 { font-size: 1.3rem; margin: 0 0 .8rem; }
.message-list { display: grid; gap: .3rem; }
.message-list-item { align-items: center; border: 1px solid transparent; border-radius: .7rem; color: inherit; display: flex; gap: .6rem; padding: .5rem .6rem; text-decoration: none; }
.message-list-item:hover, .message-list-item.is-active { background: rgba(255, 255, 255, .05); border-color: var(--border-subtle); }
.message-list-item.is-unread strong { color: #fff; }
.message-list-copy { display: grid; flex: 1; min-width: 0; }
.message-list-copy strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-list-copy small { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-avatar { border-radius: 50%; flex: none; height: 2.4rem; object-fit: cover; width: 2.4rem; }
.message-unread-badge { background: var(--np-green); border-radius: 999px; color: #032015; font-size: .7rem; font-weight: 800; padding: .05rem .4rem; }
.message-thread { background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .9rem; display: flex; flex-direction: column; min-height: 60vh; }
.message-thread-header { align-items: center; border-bottom: 1px solid var(--border-subtle); display: flex; flex-wrap: wrap; gap: .6rem; padding: .7rem .9rem; }
.message-thread-header a { color: inherit; font-weight: 800; text-decoration: none; }
.message-thread-tools { display: flex; gap: .5rem; margin-left: auto; }
.message-log { display: flex; flex: 1; flex-direction: column; gap: .5rem; max-height: 55vh; overflow-y: auto; padding: 1rem; }
.message-bubble { border-radius: .9rem; max-width: 80%; padding: .5rem .8rem; }
.message-bubble p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.message-bubble small { color: var(--text-muted); font-size: .66rem; }
.message-bubble.is-mine { align-self: flex-end; background: rgba(0, 245, 155, .16); border: 1px solid rgba(0, 245, 155, .35); }
.message-bubble.is-theirs { align-self: flex-start; background: rgba(255, 255, 255, .06); }
.message-seen { color: var(--np-green); }
.message-form { border-top: 1px solid var(--border-subtle); display: flex; gap: .6rem; padding: .7rem; }
.message-form textarea { background: #0a1513; border: 1px solid #2c3a36; border-radius: .6rem; color: var(--np-text); flex: 1; font: inherit; padding: .55rem .7rem; resize: none; }
.message-cannot-send, .message-empty-thread { color: var(--text-muted); font-size: .85rem; padding: 1rem; }
.public-profile-message-button { white-space: nowrap; }
.admin-message-snapshot { flex: 1 1 100%; font-size: .78rem; margin-top: .4rem; }
.admin-message-snapshot p { margin: .2rem 0; white-space: pre-wrap; }
@media (max-width: 760px) { .messages-layout { grid-template-columns: 1fr; } .messages-layout.has-thread .messages-side { display: none; } .message-bubble { max-width: 92%; } }
.nav-menu { position: relative; }
.nav-menu > summary { align-items: center; cursor: pointer; display: inline-flex; gap: .4rem; list-style: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-caret { border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; display: inline-block; height: .42rem; margin-top: -.2rem; opacity: .75; transform: rotate(45deg); transition: transform .18s ease, margin .18s ease; width: .42rem; }
.nav-menu[open] > summary .nav-caret { margin-top: .2rem; transform: rotate(-135deg); }
.nav-menu-panel { background: #0d1a17; border: 1px solid #263531; border-radius: .8rem; box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .55); display: grid; gap: .1rem; left: 50%; min-width: 17rem; padding: .5rem; position: absolute; top: calc(100% + .7rem); transform: translateX(-50%); z-index: 70; }
.nav-menu-panel a, .nav-menu-soon { align-items: center; border-radius: .5rem; color: inherit; display: flex; font-size: .85rem; gap: .6rem; justify-content: space-between; padding: .45rem .6rem; text-decoration: none; }
.nav-menu-panel a:hover, .nav-menu-panel a:focus-visible { background: rgba(0, 245, 155, .12); outline: none; }
.nav-menu-soon { color: var(--text-muted); cursor: default; }
.nav-menu-soon small { background: rgba(255, 255, 255, .07); border-radius: 999px; font-size: .62rem; font-weight: 700; padding: .05rem .45rem; }
.nav-menu-group { color: var(--np-green); font-size: .62rem; font-weight: 800; letter-spacing: .08em; margin: .55rem .6rem .15rem; text-transform: uppercase; }
.mobile-navigation-panel .nav-menu-panel { border: 0; box-shadow: none; left: 0; position: static; transform: none; }
.spotlight-grid { display: grid; gap: 1.6rem 1rem; padding-top: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 16rem)); justify-content: start; }
.spotlight-card { grid-template-columns: minmax(0, 1fr); background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .9rem; display: grid; gap: .6rem; padding: 1rem; }
.spotlight-card.is-sponsored { border-color: rgba(255, 200, 70, .55); }
.spotlight-head { align-items: center; color: inherit; display: flex; gap: .7rem; text-decoration: none; }
.spotlight-head img { border-radius: 50%; flex: none; height: 3rem; object-fit: cover; width: 3rem; }
.spotlight-head > div { min-width: 0; }
.spotlight-head strong, .spotlight-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spotlight-head small { color: var(--text-muted); }
/* «Patrocinado»: una chapita dorada ladeada en la esquina superior derecha, sobresaliendo del borde, con sombra y brillo para dar sensación de relieve. */
.spotlight-card { position: relative; }
.spotlight-badge { align-items: center; background: linear-gradient(145deg, #ffe58f 0%, #f4b13a 55%, #d98f16 100%); border: 1.5px solid #fff1b8; border-radius: 999px; box-shadow: 0 6px 14px rgba(0, 0, 0, .55), 0 0 0 1px rgba(120, 72, 0, .55), inset 0 1px 1px rgba(255, 255, 255, .75), inset 0 -2px 3px rgba(150, 90, 0, .45); color: #3a2600; display: inline-flex; flex: none; font-size: .58rem; font-weight: 850; gap: .25rem; letter-spacing: .07em; padding: .22rem .6rem .22rem .5rem; position: absolute; right: -.6rem; text-transform: uppercase; top: -.7rem; transform: rotate(5deg); white-space: nowrap; z-index: 2; }
.spotlight-badge::before { content: '★'; font-size: .7rem; line-height: 1; }
.spotlight-bio { color: var(--text-muted); font-size: .84rem; margin: 0; }
/* Emblema del creador (logo o monograma con iniciales): escaparate y ajustes de perfil */
.creator-emblem { align-items: center; border-radius: .65rem; display: inline-grid; flex: none; height: 2.5rem; justify-items: center; overflow: hidden; width: 2.5rem; }
.creator-emblem.is-monogram { background: hsl(var(--emblem-hue, 160) 42% 24%); border: 1px solid hsl(var(--emblem-hue, 160) 45% 38%); color: hsl(var(--emblem-hue, 160) 85% 84%); font-size: .82rem; font-weight: 850; letter-spacing: .02em; }
.creator-emblem.has-logo { background: rgba(255, 255, 255, .06); border: 1px solid var(--border-subtle); }
.creator-emblem img, .spotlight-head .creator-emblem img { border-radius: 0; height: 100%; object-fit: contain; width: 100%; }
.spotlight-emblem { margin-left: auto; }
.game-creator-identity .creator-emblem { display: inline-grid; margin: 0 0 0 auto; }
.game-creator-identity .creator-emblem img { background: none; border: 0; border-radius: 0; box-shadow: none; height: 100%; object-fit: contain; width: 100%; }
.public-profile-copy .profile-emblem { font-size: .78rem; height: 2.3rem; width: 2.3rem; }
.public-profile-copy .profile-emblem img { border: 0; border-radius: 0; height: 100%; width: 100%; }
.profile-logo-row { align-items: center; display: flex; flex-wrap: wrap; gap: .8rem; }
.profile-logo-row .creator-emblem { height: 3.4rem; width: 3.4rem; }
.spotlight-games { display: flex; gap: .4rem; }
.spotlight-game { flex: 1 1 0; min-width: 0; }
.spotlight-game img { aspect-ratio: 16 / 9; border-radius: .4rem; display: block; height: auto; object-fit: cover; width: 100%; }
.collection-button, .share-button { align-items: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22); border-radius: .55rem; color: inherit; cursor: pointer; display: inline-flex; font: inherit; font-size: .8rem; font-weight: 750; min-height: 2.35rem; padding: 0 .8rem; }
.game-hero-actions .collection-button, .game-hero-actions .share-button { backdrop-filter: blur(8px); background: rgba(9, 18, 16, .69); border-color: rgba(213, 247, 231, .34); min-height: 2.7rem; }
.game-collection-panel, .game-share-panel { align-items: center; display: flex; }
.collection-choices { display: grid; gap: .3rem; margin: .8rem 0; max-height: 40vh; overflow-y: auto; }
.collection-create { display: flex; gap: .5rem; margin-bottom: .8rem; }
.collection-create input, .collection-edit input, .collection-edit select { background: #0a1513; border: 1px solid #2c3a36; border-radius: .5rem; color: var(--np-text); flex: 1; font: inherit; padding: .5rem .65rem; }
.collection-edit { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.collection-header { margin-bottom: 1rem; }
.collection-owner { color: var(--np-green); font-size: .85rem; text-decoration: none; }
.public-profile-collections { display: grid; gap: .6rem; }
.public-profile-collection { background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .7rem; color: inherit; display: grid; gap: .15rem; padding: .7rem .85rem; text-decoration: none; }
.public-profile-collection:hover { border-color: var(--np-green); }
.public-profile-collection small { color: var(--np-green); }
.creator-stats { margin-top: .6rem; }
.creator-stats summary { cursor: pointer; font-weight: 700; }
.creator-stats-cards { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin: .7rem 0; }
.creator-stat { background: rgba(255, 255, 255, .04); border-radius: .6rem; display: grid; padding: .5rem .7rem; }
.creator-stat strong { font-size: 1.15rem; }
.creator-stat span { color: var(--text-muted); font-size: .7rem; }
.creator-chart { align-items: flex-end; display: flex; gap: 2px; height: 4.5rem; }
.creator-chart-bar { background: var(--np-green); border-radius: 2px 2px 0 0; flex: 1; min-height: 2px; opacity: .85; }
.creator-chart-title { color: var(--text-muted); font-size: .72rem; margin: .7rem 0 .25rem; }
.subscription-card { background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .9rem; display: grid; gap: .4rem; padding: 1.1rem 1.2rem; }
.subscription-card h2 { font-size: 1.15rem; margin: 0; }
.subscription-price { font-size: 1.05rem; font-weight: 800; margin: 0; }
.subscription-status { color: var(--np-green); font-weight: 700; margin: 0; }
.subscription-status.is-canceling { color: #ffd479; }
.subscription-status.is-ended { color: var(--text-muted); }
.subscription-actions { margin-top: .4rem; }
.subscription-payments { border-collapse: collapse; width: 100%; }
.subscription-payments th, .subscription-payments td { border-bottom: 1px solid var(--border-subtle); padding: .5rem .4rem; text-align: left; }
.admin-spotlight-form { align-items: center; }
.contact-quick-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.contact-quick { background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .8rem; color: inherit; display: grid; gap: .2rem; padding: .8rem .95rem; text-decoration: none; }
.contact-quick:hover { border-color: var(--np-green); }
.contact-quick span { color: var(--text-muted); font-size: .8rem; }
.contact-form { display: grid; gap: .8rem; max-width: 40rem; }
.contact-form label { display: grid; font-size: .85rem; gap: .3rem; }
.contact-form input:not([type="checkbox"]), .contact-form select, .contact-form textarea { background: #0a1513; border: 1px solid #2c3a36; border-radius: .5rem; color: var(--np-text); font: inherit; padding: .55rem .7rem; }
.contact-form textarea { resize: vertical; }
.contact-trap { height: 0; left: -9999px; opacity: 0; overflow: hidden; position: absolute; width: 0; }
.contact-form label.contact-consent { align-items: flex-start; display: flex; gap: .55rem; }
.sitemap-page ul { display: grid; gap: .35rem; list-style: none; padding-left: 0; }
.sitemap-page a { color: var(--np-green); }
.preorder-card { background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .9rem; color: inherit; display: flex; flex-direction: column; overflow: hidden; text-decoration: none; }
.preorder-card:hover { border-color: #b07cff; }
.preorder-cover { position: relative; }
.preorder-ribbon { background: #b07cff; border-radius: 999px; color: #1b0a33; font-size: .62rem; font-weight: 800; left: .6rem; letter-spacing: .07em; padding: .15rem .55rem; position: absolute; top: .6rem; }
.preorder-pill { background: rgba(176, 124, 255, .22); border: 1px solid rgba(201, 166, 255, .6); border-radius: 999px; color: #f3eaff; font-size: .78rem; font-weight: 800; padding: .35rem .8rem; }
.creator-preorder-fields { display: grid; gap: .5rem; }
.unique-requirement { color: var(--text-muted); display: block; font-size: .7rem; margin-top: .2rem; }
.hall-fairplay { color: var(--text-muted); font-size: .8rem; max-width: 42rem; }
.help-search { display: block; margin: 1rem 0; }
.help-search input { background: #0a1513; border: 1px solid #2c3a36; border-radius: .7rem; color: var(--np-text); font: inherit; font-size: 1rem; padding: .8rem 1rem; width: 100%; }
.help-topics { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.help-topic { background: rgba(255, 255, 255, .05); border: 1px solid var(--border-subtle); border-radius: 999px; color: inherit; font-size: .8rem; padding: .3rem .8rem; text-decoration: none; }
.help-topic:hover { border-color: var(--np-green); }
.help-category { margin-bottom: 1.6rem; scroll-margin-top: 5rem; }
.help-item { background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .7rem; margin-bottom: .5rem; padding: .1rem .9rem; }
.help-item summary { cursor: pointer; font-weight: 700; padding: .7rem 0; }
.help-item[open] { border-color: rgba(0, 245, 155, .4); }
.help-item p { color: var(--text-muted); line-height: 1.6; margin: 0 0 .9rem; }
.help-contact { align-items: center; border-top: 1px solid var(--border-subtle); display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; padding-top: 1.4rem; }
.help-contact h2 { margin: 0; }
.status-banner { align-items: center; border: 1px solid rgba(0, 245, 155, .5); border-radius: .9rem; display: flex; font-size: 1.05rem; gap: .7rem; padding: 1rem 1.2rem; }
.status-banner.is-degraded { border-color: rgba(255, 180, 60, .6); }
.status-dot { color: var(--np-green); }
.is-degraded .status-dot { color: #ffb43c; }
.status-list { display: grid; gap: .5rem; margin: 1rem 0; }
.status-row { align-items: center; background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .7rem; display: flex; gap: 1rem; justify-content: space-between; padding: .8rem 1rem; }
.status-row small { color: var(--text-muted); display: block; }
.status-pill { border-radius: 999px; font-size: .72rem; font-weight: 800; padding: .2rem .7rem; }
.status-pill.is-operational { background: rgba(0, 245, 155, .15); color: var(--np-green); }
.status-pill.is-down { background: rgba(255, 90, 90, .18); color: #ff8b8b; }
.status-pill.is-not_configured { background: rgba(255, 255, 255, .07); color: var(--text-muted); }
.suggestion-builder { background: rgba(0, 245, 155, .04); border: 1px solid rgba(0, 245, 155, .3); border-radius: .9rem; display: grid; gap: .8rem; padding: 1rem; }
.suggestion-rules { background: rgba(255, 200, 70, .08); border-left: 3px solid #ffd479; border-radius: .5rem; padding: .7rem .9rem; }
.suggestion-rules p { font-size: .85rem; margin: .3rem 0 0; }
.suggestion-example { color: var(--text-muted); font-style: italic; }
.suggestion-items { display: grid; gap: .7rem; }
.suggestion-input-card { background: #0d1a17; border: 1px solid #263531; border-radius: .7rem; display: grid; gap: .5rem; padding: .7rem .8rem; }
.suggestion-input-head { align-items: center; display: flex; gap: .6rem; }
.suggestion-number { color: var(--np-green); font-size: .8rem; }
.suggestion-input-head select { margin-left: auto; }
.suggestion-remove { background: transparent; border: 0; color: var(--text-muted); cursor: pointer; font-size: 1.3rem; line-height: 1; }
.suggestion-remove:hover { color: #ff8b8b; }
.admin-suggestion-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 1rem; }
.admin-suggestion-tabs .is-active { border-color: var(--np-green); color: var(--np-green); }
.suggestion-card { background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .8rem; display: grid; gap: .6rem; margin-bottom: .8rem; padding: .9rem 1rem; }
.suggestion-item { align-items: center; background: rgba(255, 255, 255, .03); border-left: 3px solid #ffd479; border-radius: .5rem; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; padding: .6rem .8rem; }
.suggestion-item.is-yes { border-left-color: var(--np-green); }
.suggestion-item.is-no { border-left-color: #ff8b8b; opacity: .8; }
.suggestion-item.is-later { border-left-color: #8ed0ff; }
.suggestion-item.is-in_progress { border-left-color: #c9a4ff; }
.suggestion-item.is-done { border-left-color: var(--np-green); opacity: .7; }
.suggestion-item-copy { display: grid; flex: 1 1 260px; gap: .15rem; }
.suggestion-kind { color: var(--text-muted); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.suggestion-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.message-safety { align-items: center; background: rgba(255, 200, 70, .08); border: 1px solid rgba(255, 200, 70, .4); border-radius: .8rem; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; margin-bottom: 1rem; padding: .8rem 1rem; }
.message-safety p { font-size: .82rem; margin: .25rem 0 0; max-width: 46rem; }
.profile-popover-group { border-top: 1px solid rgba(255, 255, 255, .08); display: grid; gap: .1rem; margin-top: .3rem; padding-top: .3rem; }
.profile-popover-group:empty { display: none; }
.profile-popover-group > a { align-items: center; display: flex; justify-content: space-between; }
.profile-popover-badge { background: var(--np-green); border-radius: 999px; color: #032015; font-size: .68rem; font-weight: 800; padding: 0 .4rem; }
.medal-glyph { height: 1.45rem; width: 1.45rem; }
.unique-medal.is-free { background: linear-gradient(135deg, rgba(255, 200, 70, .07), rgba(255, 140, 40, .03)); border: 1px dashed rgba(255, 200, 70, .35); }
.unique-medal.is-free .unique-medal-icon { background: radial-gradient(circle at 35% 30%, #fff1b3, #f0b429 55%, #b7791f); border: 0; box-shadow: none; color: #5a3a00; filter: saturate(.55) brightness(.8); opacity: .75; }
.subscription-extras { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.subscription-extra { background: rgba(255, 255, 255, .03); border: 1px dashed var(--border-subtle); border-radius: .7rem; display: grid; gap: .2rem; padding: .7rem .9rem; }
.nav-menu-soon-tag { background: rgba(255, 255, 255, .07); border-radius: 999px; color: var(--text-muted); font-size: .62rem; font-weight: 700; justify-self: start; padding: .05rem .5rem; }
.catalog-search kbd { min-width: 3.2rem; text-align: center; }
.security-block { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border, rgba(255,255,255,.12)); }
.security-block h3 { margin: 0 0 .35rem; font-size: 1rem; }
.security-ok { color: #6fd28f; font-weight: 600; }
.security-secret { display: block; margin: .5rem 0; padding: .5rem .75rem; border-radius: 8px; background: rgba(255,255,255,.08); word-break: break-all; user-select: all; }
.security-code-list { margin: .5rem 0; padding: .75rem; border-radius: 8px; background: rgba(255,255,255,.08); columns: 2; font-size: 1rem; }
.security-sessions { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .5rem; }
.security-sessions li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tour-dialog { max-width: min(30rem, calc(100vw - 2rem)); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 1.5rem; background: var(--surface, #1b1d2a); color: inherit; }
.tour-dialog::backdrop { background: rgba(0,0,0,.6); }
.tour-actions { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1rem; }
.creator-verified-note { color: #6fd28f; font-weight: 600; }
.creator-verification-status { padding: .5rem .75rem; border-radius: 8px; background: rgba(255,255,255,.08); }
.event-phase { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: rgba(255,255,255,.1); }
.event-phase.is-active { background: rgba(111,210,143,.2); color: #6fd28f; }
.event-phase.is-upcoming { background: rgba(240,192,64,.18); color: #f0c040; }
.event-theme { font-weight: 600; }
.event-enter { margin: 1.5rem 0; padding: 1rem; border-radius: 12px; background: rgba(255,255,255,.05); }
.event-enter-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .35rem 0; }
.admin-winners { display: grid; gap: .5rem; margin-top: .75rem; }
.explore-saved { margin: 0 0 1rem; padding: .75rem; border-radius: 12px; background: rgba(255,255,255,.05); }
.explore-saved h3 { margin: 0 0 .5rem; font-size: 1rem; }
.explore-saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.explore-saved-list li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.explore-saved-apply { background: none; border: 0; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0; }
.explore-saved-alerts { font-size: .85rem; opacity: .85; }
.explore-saved-remove { margin-left: auto; background: none; border: 0; color: inherit; font-size: 1.2rem; cursor: pointer; }
.explore-saved-form { display: grid; gap: .5rem; margin-top: .75rem; }
.creator-revenue-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; margin: 1rem 0; }
.creator-revenue-card { display: grid; gap: .25rem; padding: 1rem; border-radius: 12px; background: rgba(255,255,255,.06); }
.creator-revenue-card strong { font-size: 1.6rem; }
.creator-revenue-card.is-pending { opacity: .6; border: 1px dashed rgba(255,255,255,.25); }
.creator-revenue-label { font-size: .85rem; opacity: .8; }
.creator-revenue-notice { padding: .75rem 1rem; border-radius: 10px; background: rgba(240,192,64,.12); }
.creator-revenue-payments { padding-left: 1.2rem; }
.game-translate { margin-top: .5rem; }

.review-list-toolbar { display: flex; justify-content: flex-end; margin: .5rem 0; }
.review-list-toolbar label { align-items: center; color: var(--text-muted); display: flex; font-size: .85rem; gap: .5rem; }
.review-groups { display: grid; gap: 1.2rem; margin-top: .8rem; }
.review-group-title { background: none; border: 0; color: var(--np-green-soft); cursor: pointer; display: block; font-size: .82rem; font-weight: 800; letter-spacing: .1em; margin: 0 0 .5rem; padding: 0; text-transform: uppercase; }
.review-group-title:hover, .review-group-title:focus-visible { color: var(--np-green); text-decoration: underline; }
h3.review-group-title { cursor: default; }
h3.review-group-title:hover { text-decoration: none; }
.review-group .review-list-public { gap: .6rem; }
.review-expanded { border-top: 1px solid var(--border-subtle); margin-top: 1.4rem; padding-top: 1.2rem; }
.review-expanded .review-list-public { gap: .6rem; margin-top: .5rem; }
.review-show-more { margin-top: .9rem; }
.creator-links { border: 1px solid var(--border-subtle); border-radius: .8rem; display: grid; gap: .7rem; margin: 0; padding: .9rem 1rem; }
.creator-links legend { font-weight: 700; padding: 0 .4rem; }
.creator-links-list { display: grid; gap: .7rem; }
.creator-link-row { background: rgba(255, 255, 255, .03); border-radius: .6rem; display: grid; gap: .5rem; padding: .6rem; }
.creator-link-main { display: grid; gap: .4rem; grid-template-columns: 1fr 1fr auto; }
.creator-link-main [data-role="url"], .creator-link-main [data-role="label"] { grid-column: 1 / -1; }
.creator-link-remove { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: 1.3rem; grid-column: 3; grid-row: 1; }
.creator-form .creator-tag-option { display: inline-flex; font-weight: 600; }
.creator-link-remove:hover { color: #ff8b8b; }
.creator-link-embed { display: grid; gap: .4rem; }
.creator-embed-status.is-verified { color: var(--np-green-soft); }
.game-links-list { display: grid; gap: .5rem; margin-top: .6rem; }
.admin-embed-review { align-items: center; background: rgba(255, 255, 255, .04); border-radius: .5rem; display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem .7rem; }
.admin-embed-review code { overflow-wrap: anywhere; }
.admin-embed-ok { color: var(--np-green-soft); font-weight: 700; }
.admin-embed-pending { color: #ffd479; font-weight: 700; }
.play-page { padding: 1.5rem clamp(1rem, 4vw, 3rem) 4rem; }
.play-shell { display: grid; gap: 1rem; margin: 0 auto; max-width: 1200px; }
.play-heading h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0; }
.play-developer { color: var(--text-muted); margin: .2rem 0 0; }
.play-stage { align-items: center; aspect-ratio: 16 / 9; background: #050908; border: 1px solid var(--border-subtle); border-radius: .9rem; display: flex; flex-direction: column; gap: .8rem; justify-content: center; max-height: 78vh; overflow: hidden; position: relative; width: 100%; }
.play-stage-cover { filter: brightness(.45) blur(1px); height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.play-stage-start, .play-stage-hint { position: relative; z-index: 1; }
.play-stage-start { font-size: 1.15rem; padding: .9rem 2rem; }
.play-stage-hint { font-size: .8rem; margin: 0; max-width: 32rem; text-align: center; }
.play-stage.is-playing { background: #000; display: block; }
.play-stage iframe { border: 0; height: 100%; width: 100%; }
.play-stage:fullscreen { max-height: none; }
.play-toolbar, .play-actions, .play-fallback { align-items: center; display: flex; flex-wrap: wrap; gap: .7rem; }
.play-fallback-hint, .play-rating { color: var(--text-muted); font-size: .85rem; }
.play-preview-banner, .play-mobile-notice { background: rgba(255, 200, 70, .1); border-left: 3px solid #ffd479; border-radius: .5rem; margin: 0; padding: .6rem .9rem; }
.play-more h2 { font-size: 1.1rem; }
/* Proponer un juego (/propose-game): reutiliza la maquetación de las páginas de texto, pero sus botones conservan su color. */
.propose-page a.primary-button { color: var(--np-on-green); }
.propose-page .propose-form { margin-top: 1.5rem; }
.propose-list { list-style: none; padding: 0; margin: .6rem 0; display: grid; gap: .6rem; }
.propose-list li { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); border-radius: .6rem; padding: .7rem .9rem; }
/* Reclamar ficha (/games/:slug/claim). */
.claim-code { font-family: ui-monospace, Consolas, monospace; width: 100%; max-width: 30rem; }
.claim-steps { line-height: 1.8; padding-left: 1.3rem; }
.claim-steps li { margin-bottom: .6rem; }
.claim-page .secondary-button, .claim-page .game-sidebar-link { display: inline-block; margin: .3rem .5rem .3rem 0; }
/* Ayuda y comprobación de la dirección de integración (formulario de enlaces del creador). */
.creator-embed-tips { margin: .5rem 0; }
.creator-embed-tips summary { cursor: pointer; color: var(--np-green-soft); }
.creator-embed-check-box { margin: .5rem 0; }
.creator-embed-check.is-ok { color: var(--np-green-soft); }
/* Fila de botones de la vista general del creador: "Publicar juego" + "Proponer el juego de otra persona". */
.creator-cta-row { align-items: center; display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.1rem; }
.creator-cta-row .primary-button { margin-top: 0; }
/* Portada: contador + botón "Ver todos" en la cabecera del catálogo. */
.section-heading-side { align-items: center; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-end; }
/* Visor de imágenes de la galería del juego (lightbox con flechas). */
body.has-image-viewer { overflow: hidden; }
.image-viewer { align-items: center; background: rgba(4, 9, 8, .92); display: flex; inset: 0; justify-content: center; position: fixed; z-index: 1000; }
.image-viewer-image { border-radius: .5rem; box-shadow: 0 10px 50px rgba(0, 0, 0, .6); max-height: 88vh; max-width: min(94vw, 1400px); object-fit: contain; }
.image-viewer-counter { bottom: 1rem; color: #d7e6df; font-size: .9rem; left: 0; margin: 0; position: absolute; right: 0; text-align: center; }
.image-viewer-button { align-items: center; background: rgba(20, 34, 30, .85); border: 1px solid rgba(213, 247, 231, .3); border-radius: 999px; color: #f1f9f5; cursor: pointer; display: flex; font-size: 1.5rem; height: 2.8rem; justify-content: center; line-height: 1; position: absolute; width: 2.8rem; }
.image-viewer-button:hover, .image-viewer-button:focus-visible { background: rgba(0, 255, 136, .28); border-color: var(--np-green-bright); outline: none; }
.image-viewer-close { right: 1rem; top: 1rem; }
.image-viewer-previous { left: 1rem; top: 50%; transform: translateY(-50%); }
.image-viewer-next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .image-viewer-previous { left: .4rem; } .image-viewer-next { right: .4rem; } }

/* Títulos permanentes del perfil: el color sube de nivel con las victorias (bronce, plata, oro, diamante). */
.permanent-medal { --tier: #cd7f32; --tier-soft: rgba(205, 127, 50, .16); align-items: center; background: linear-gradient(135deg, var(--tier-soft), rgba(255, 255, 255, .02)); border: 1px solid var(--tier); border-radius: .8rem; display: flex; gap: .8rem; padding: .8rem .95rem; }
.permanent-medal strong { display: block; font-size: .92rem; }
.permanent-medal small { color: var(--text-muted); display: block; font-size: .76rem; line-height: 1.35; margin-top: .15rem; }
.permanent-medal-icon { align-items: center; background: radial-gradient(circle at 35% 30%, #fff, var(--tier) 60%, rgba(0, 0, 0, .35)); border-radius: 50%; box-shadow: 0 0 .9rem var(--tier-soft); color: #1a1208; display: inline-flex; flex: none; height: 2.6rem; justify-content: center; width: 2.6rem; }
.permanent-medal-icon .medal-glyph { height: 1.4rem; width: 1.4rem; }
.permanent-medal-count { color: var(--tier); display: block; font-size: .8rem; font-weight: 750; margin-top: .3rem; }
.permanent-medal-next { color: var(--text-muted); display: block; font-size: .72rem; margin-top: .1rem; }
.permanent-medal.tier-bronze { --tier: #cd7f32; --tier-soft: rgba(205, 127, 50, .16); }
.permanent-medal.tier-silver { --tier: #c3ccd6; --tier-soft: rgba(195, 204, 214, .16); }
.permanent-medal.tier-gold { --tier: #ffd24a; --tier-soft: rgba(255, 210, 74, .18); }
.permanent-medal.tier-diamond { --tier: #57d8ff; --tier-soft: rgba(87, 216, 255, .2); box-shadow: 0 0 1.3rem rgba(87, 216, 255, .28); }
.permanent-medal.tier-diamond .permanent-medal-icon { background: radial-gradient(circle at 35% 30%, #ffffff, #8fe7ff 45%, #2a8fd6); box-shadow: 0 0 1.1rem rgba(87, 216, 255, .6); }

/* Buscador dentro de cada grupo de etiquetas del formulario de publicar. */
.creator-tag-search { margin: .3rem 0 .6rem; max-width: 22rem; width: 100%; }
.creator-form .creator-tag-option[hidden], .creator-tag-option[hidden] { display: none; }

/* Cola de etiquetas propuestas (Administración → Revisiones). */
.admin-tag-suggestion { align-items: end; display: flex; flex-wrap: wrap; gap: .6rem .9rem; margin-top: .6rem; }
.admin-tag-suggestion label { display: grid; font-size: .78rem; gap: .25rem; }
.admin-tag-suggestion input, .admin-tag-suggestion select { min-width: 12rem; }
.creator-tag-suggest { margin-top: .3rem; }
.creator-tag-pending { background: rgba(255, 210, 74, .12); border: 1px dashed rgba(255, 210, 74, .5); border-radius: 999px; display: inline-block; font-size: .78rem; margin: .3rem .4rem 0 0; padding: .15rem .6rem; }

/* Plataformas del juego: chips de la cabecera de la ficha, distintos de las etiquetas. */
.game-hero-tags .game-hero-platform { border-color: rgba(87, 216, 255, .5); color: #c6f0ff; }

/* Panel de seguridad: estado del modo emergencia. */
.admin-security-status { background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .1); border-radius: .7rem; margin-bottom: 1.2rem; padding: .9rem 1.1rem; }
.admin-security-status.is-active { background: rgba(255, 70, 90, .08); border-color: rgba(255, 110, 130, .6); }
.admin-security-status strong { display: block; font-size: 1.02rem; }
.admin-security-status.is-active strong { color: #ff8fa1; }
.dash-row.is-muted { opacity: .65; }
.dash-row input[type="checkbox"] { height: 1.1rem; width: 1.1rem; }
.admin-security-status button { margin: .7rem 0 .4rem; }

/* El aviso de galería vacía debe desaparecer (atributo hidden) cuando ya hay imágenes; su display:flex lo anulaba. */
.game-media-placeholder[hidden] { display: none; }

/* Contador de favoritos dentro del propio botón «Añadir a favoritos»: corazón de color y número en una pastilla con aire. */
.favorite-button { gap: .55rem; }
.favorite-button .favorite-label { align-items: center; display: inline-flex; gap: .4rem; }
.favorite-button .favorite-heart { align-items: center; color: #ff8fae; display: inline-flex; font-size: 1rem; line-height: 1; }
.favorite-button.is-favorited .favorite-heart { color: #ff5c86; text-shadow: 0 0 .5rem rgba(255, 92, 134, .55); }
.favorite-button .favorite-count { align-items: center; background: rgba(0, 0, 0, .34); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; box-sizing: border-box; display: inline-flex; font-size: .78rem; font-weight: 700; height: 1.5rem; justify-content: center; line-height: 1; min-width: 1.9rem; padding: 0 .55rem; }
.favorite-button .favorite-count::before { content: none; }

/* Reordenar la galería (solo quien gestiona el juego): flechas abajo del elemento y arrastrar y soltar. */
.game-media-item.is-reorderable { cursor: default; }
.game-media-grip { align-items: center; background: rgba(9, 18, 16, .8); border: 1px solid rgba(213, 247, 231, .34); border-radius: .35rem; color: #f1f9f5; cursor: grab; display: flex; font-size: 1rem; height: 1.7rem; justify-content: center; left: .4rem; line-height: 1; position: absolute; top: .4rem; user-select: none; width: 1.9rem; z-index: 2; }
.game-media-grip:active { cursor: grabbing; }
.game-media-item.is-dragging { opacity: .45; outline: 2px dashed var(--np-green-bright); }
.game-media-move { align-items: center; background: rgba(9, 18, 16, .8); border: 1px solid rgba(213, 247, 231, .34); border-radius: 50%; bottom: .4rem; color: #f1f9f5; cursor: pointer; display: flex; font-size: 1.15rem; height: 1.7rem; justify-content: center; line-height: 1; padding: 0; position: absolute; width: 1.7rem; z-index: 2; }
.game-media-earlier { left: .4rem; }
.game-media-later { right: .4rem; }
.game-media-move:hover:not(:disabled) { background: rgba(0, 255, 136, .35); border-color: var(--np-green-bright); }
.game-media-move:disabled { cursor: default; opacity: .3; }

/* Vídeos de la galería: miniatura con ▶ y visor a pantalla completa, como las imágenes. */
.game-media-video-thumb { background: #0a1512; border: 0; cursor: pointer; display: block; padding: 0; position: relative; width: 100%; }
.game-media-video-thumb img { aspect-ratio: 16 / 10; display: block; height: auto; object-fit: cover; width: 100%; }
.game-media-video-thumb:not(:has(img)) { aspect-ratio: 16 / 10; }
.game-media-video-thumb .game-media-video-icon { align-items: center; background: rgba(9, 18, 16, .72); border: 1px solid rgba(213, 247, 231, .5); border-radius: 50%; color: #f1f9f5; display: flex; font-size: 1.2rem; height: 3rem; justify-content: center; left: 50%; padding-left: .15rem; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 3rem; }
.game-media-video-thumb:hover .game-media-video-icon { background: rgba(0, 255, 136, .4); }
.image-viewer-stage { align-items: center; display: flex; justify-content: center; }
.video-consent { align-items: center; background: #0c1311; border: 1px dashed #2a3a35; border-radius: .6rem; color: #e2ece7; display: grid; gap: .6rem; justify-items: center; max-width: min(94vw, 34rem); padding: 1.6rem 1.4rem; text-align: center; }
.video-consent p { color: #9fb0a9; font-size: .85rem; line-height: 1.5; margin: 0; }
.video-consent-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: .3rem; }
.image-viewer-video { aspect-ratio: 16 / 9; background: #000; border: 0; border-radius: .5rem; max-height: 88vh; width: min(94vw, 1200px); }

/* Primera vez en el espacio de creador: separar el botón de sus notas. */
.creator-panel .primary-button + .field-hint { margin-top: .9rem; }
.creator-start-custom { margin-top: .6rem; }
.creator-start-custom summary { cursor: pointer; }

/* Los enlaces de las páginas de texto (.legal-page a) teñían de verde el texto de los botones verdes: se mantiene el color oscuro del botón. */
.legal-page a.primary-button { color: var(--np-on-green); }

/* Botones verdes de las páginas de texto (ayuda, contacto, proponer, reclamar): mismo tamaño y grosor que los botones de la web (el genérico era de 16 px). */
.legal-page a.primary-button, .legal-page button.primary-button { font-size: .88rem; font-weight: 700; padding: .7rem 1.25rem; }

/* Etiquetas destacadas en la tarjeta del juego: chips de texto bajo el título. */
.card-highlights { display: flex; flex-wrap: wrap; gap: .25rem; margin: .32rem 0 0; }
.card-highlights span { background: rgba(87, 216, 255, .12); border: 1px solid rgba(87, 216, 255, .35); border-radius: 999px; color: #c6f0ff; font-size: .62rem; font-weight: 650; line-height: 1; padding: .2rem .5rem; white-space: nowrap; }

/* Si alguna tarjeta de la lista lleva etiquetas destacadas, todas las tarjetas de esa lista se hacen un poco más altas (para que quepa la fila
   de chips sin descuadrar los bordes). Las listas sin ninguna mantienen la altura de siempre. */
.home-main :is(.game-grid, .game-related-list):has(.card-highlights) .game-card { height: 276px; }
@media (max-width: 700px) {
  .home-main :is(.game-grid, .game-related-list):has(.card-highlights) .game-card { height: 268px; }
}
/* Cuadro de confirmación de contraseña del panel de administración. */
.admin-reauth { background: #0e1614; border: 1px solid rgba(255, 255, 255, .16); border-radius: .8rem; color: #e8f3ee; max-width: 26rem; padding: 1.3rem 1.4rem; width: calc(100% - 2rem); }
.admin-reauth::backdrop { background: rgba(0, 0, 0, .65); }
.admin-reauth h2 { margin: 0 0 .4rem; }
.admin-reauth label { display: grid; gap: .3rem; margin: .8rem 0; }
.admin-reauth button { margin: .4rem .6rem 0 0; }

/* Portada en pantallas estrechas: el texto arriba y, debajo, el arte con la tarjeta «Proyecto del día» y su selector.
   Antes el arte quedaba detrás del texto y los iconos de «100% gratis…» tapaban la tarjeta. Va al final para ganar a las capas anteriores. */
@media (max-width: 900px) {
  .home-main .home-hero { display: flex; flex-direction: column; min-height: 0; }
  .home-main .hero-copy-wrap { height: auto; padding: 3rem 0 1.4rem; width: 100%; }
  .home-main .value-row { flex-wrap: wrap; margin-left: 0; margin-top: 1.6rem; max-width: none; transform: none; width: 100%; }
  .home-main .value-row article { flex: 1 1 42%; }
  .home-main .hero-art-space {
    -webkit-mask-image: none; mask-image: none;
    border-radius: .9rem; bottom: auto; clip-path: none; left: auto; margin-bottom: 1.6rem; min-height: 21rem; opacity: 1;
    overflow: hidden; position: relative; right: auto; top: auto; width: 100%;
  }
  .home-main .hero-art-space::after { background: linear-gradient(180deg, transparent 35%, rgba(7, 16, 15, .8) 100%); filter: none; }
  .home-main .hero-art-space .hero-carousel-overlay { bottom: 1rem; left: 1rem; right: 1rem; width: auto; }
}

/* Directorio de creadores (/creators). */
.creator-directory-search { background: #0a1513; border: 1px solid #2c3a36; border-radius: .6rem; color: #f2f0f7; font: inherit; margin: 0 0 1.1rem; max-width: 26rem; padding: .6rem .8rem; width: 100%; }
.creator-directory-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.creator-directory-card { background: rgba(255, 255, 255, .03); border: 1px solid var(--border-subtle); border-radius: .9rem; color: inherit; display: grid; gap: .7rem; padding: .9rem; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.creator-directory-card:hover, .creator-directory-card:focus-visible { border-color: var(--np-green-border); outline: none; transform: translateY(-2px); }
.creator-directory-head { align-items: center; display: flex; gap: .75rem; }
.creator-directory-avatar { border-radius: 50%; flex: 0 0 auto; height: 3rem; object-fit: cover; width: 3rem; }
.creator-directory-name { display: grid; gap: .1rem; min-width: 0; }
.creator-directory-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-directory-verified { color: var(--np-green); font-size: .7rem; font-weight: 700; }
.creator-directory-stats { color: var(--text-muted); font-size: .78rem; }
.creator-directory-covers { display: grid; gap: .4rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.creator-directory-covers img { aspect-ratio: 16 / 10; border-radius: .5rem; object-fit: cover; width: 100%; }
.collab-card-wrap { align-content: start; display: grid; gap: .4rem; min-width: 0; }
.collab-claimed { color: var(--np-green); font-size: .74rem; font-weight: 700; margin: 0; }
.game-hero-byline a { text-decoration: underline; }

/* La cabecera con el menú completo (ahora incluye «Creadores») no cabe por debajo de ~1000 px: se montaba el selector de idioma y la cuenta sobre
   el menú. En esos anchos se usa el menú de hamburguesa (el mismo del móvil) y el botón «Publicar proyecto» de la cabecera se quita (la acción
   sigue en el menú, en Mi NodusPlay y en la portada). */
@media (max-width: 1500px) {
  .site-header .publish-link { display: none; }
}
/* El buscador de la cabecera se encogía mal y se montaba sobre «Comunidad» y «Recursos» entre ~1000 y ~1300 px: por debajo de 1100 px se quita
   (la ventana de búsqueda sigue con Ctrl+K) y por encima ocupa solo el hueco que queda. */
@media (max-width: 1180px) {
  .site-header .catalog-search { display: none; }
}
@media (min-width: 1181px) {
  .site-header .catalog-search { width: clamp(9rem, calc(27vw - 145px), 350px); }
  .site-header .catalog-search input { min-width: 0; width: auto; }
}
@media (max-width: 1000px) {
  .site-header .primary-nav, .site-header .catalog-search, .site-header .day-state { display: none; }
  .mobile-navigation { display: block; position: static; }
  .mobile-navigation-panel { grid-template-columns: minmax(0, 1fr); justify-content: stretch; justify-items: stretch; left: auto; max-height: calc(100vh - 6rem); min-width: 0; overflow-y: auto; right: .6rem; text-align: left; top: calc(100% + .3rem); width: min(14.5rem, calc(100vw - 1.2rem)); }
  .mobile-navigation-panel > a { text-align: left; }
  .mobile-navigation-panel .nav-menu-panel { min-width: 0; padding: .2rem 0 .2rem .4rem; }
  .mobile-navigation-panel .nav-menu > summary { color: #d5e2dc; display: flex; font-size: .78rem; font-weight: 700; justify-content: space-between; padding: .62rem .68rem; text-align: left; }
}

/* Páginas de contenido (noticias, eventos, Sala de la fama, creadores): con pantalla estrecha el contenido no puede pegarse a los bordes. */
@media (max-width: 900px) {
  main.catalog-zone { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* «Iniciar sesión» / «Crear cuenta» de la cabecera no se parten en dos líneas cuando el hueco es justo. Solo los enlaces directos de la cabecera: los de dentro de la campanita
   y del menú de la cuenta son paneles con texto largo, que tiene que partirse en líneas. */
.site-header .account-nav > a { white-space: nowrap; }

/* Lupa de la cabecera: donde la caja de búsqueda no cabe (≤ 1100 px), un botón con la lupa abre la caja como una barra bajo la cabecera. */
.search-toggle { display: none; }
@media (max-width: 1180px) {
  .site-header .search-toggle { align-items: center; background: transparent; border: 1px solid transparent; border-radius: .5rem; color: #dfe9e4; cursor: pointer; display: inline-flex; font: inherit; font-size: 1.3rem; height: 2rem; justify-content: center; line-height: 1; padding: 0; width: 2rem; }
  .site-header .search-toggle:hover, .site-header .search-toggle[aria-expanded="true"] { border-color: var(--np-green-border); color: #fff; }
  .site-header .catalog-search.is-open { background: #0d1a17; border-color: #263531; box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .55); display: flex !important; left: .75rem; margin: 0; position: fixed; right: .75rem; top: 76px; width: auto; z-index: 90; }
  .site-header .catalog-search.is-open input { font-size: 1rem; }
  .site-header .catalog-search.is-open kbd { display: none; }
}
@media (max-width: 760px) {
  .site-header .catalog-search.is-open { top: 68px; }
}

/* Pegar etiquetas (public/tag-import.js). */
.tag-import-tools { background: rgba(255, 255, 255, .03); border: 1px dashed var(--np-green-border); border-radius: .7rem; display: grid; gap: .5rem; margin: .4rem 0; padding: .8rem; }
.tag-import-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-import-dialog { background: #0d1a17; border: 1px solid #263531; border-radius: .9rem; color: var(--np-text); max-width: min(40rem, calc(100vw - 1.5rem)); padding: 0; width: 100%; }
.tag-import-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.tag-import-box { display: grid; gap: .8rem; max-height: calc(100vh - 3rem); overflow-y: auto; padding: 1.2rem; }
.tag-import-text { background: #0a1513; border: 1px solid #2c3a36; border-radius: .6rem; color: #f2f0f7; font: inherit; min-height: 8rem; padding: .7rem; resize: vertical; width: 100%; }
.tag-import-list { display: grid; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.tag-import-list label { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; }
.tag-import-note { color: #ffd78a; display: block; }
.tag-import-unknown { color: var(--text-muted); margin: 0; }
.tag-import-dialog h3, .tag-import-dialog h4 { margin: 0; }

/* Vista previa al pasar el ratón sobre una tarjeta del catálogo (ver attachHoverPreview en game-card.js). */
:is(.card-cover, .card-peek-cover) .card-preview { border-radius: .65rem .65rem 0 0; inset: 0; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; transition: opacity .3s ease; z-index: 1; }
:is(.card-cover, .card-peek-cover) .card-preview.is-ready { opacity: 1; }
:is(.card-cover, .card-peek-cover) .card-preview iframe { border: 0; height: 130%; left: -15%; position: absolute; top: -15%; width: 130%; }
:is(.card-cover, .card-peek-cover) .card-preview-sound { align-items: center; background: rgba(8, 14, 12, .72); border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; bottom: 8px; color: #fff; cursor: pointer; display: inline-flex; height: 32px; justify-content: center; padding: 0; position: absolute; right: 8px; width: 32px; z-index: 3; }
:is(.card-cover, .card-peek-cover) .card-preview-sound:hover, :is(.card-cover, .card-peek-cover) .card-preview-sound:focus-visible { background: rgba(8, 14, 12, .92); border-color: var(--accent, #4ade80); }
:is(.card-cover, .card-peek-cover) .card-preview-sound svg { fill: currentColor; height: 18px; width: 18px; }

/* Icono «más» en SVG (ver public/icons.js): centrado exacto dentro de botones y círculos. */
.ui-plus { fill: none; flex: none; height: 1em; stroke: currentColor; stroke-linecap: round; stroke-width: 2.6; width: 1em; }
.with-plus { align-items: center; display: inline-flex; gap: .45rem; justify-content: center; }
.my-dashboard-add-favorite .ui-plus { height: .9rem; width: .9rem; }
.library-button .ui-plus { height: .95rem; margin-right: .4rem; width: .95rem; }
.new-project-symbol .ui-plus { height: 1rem; width: 1rem; }
.profile-banner-upload-trigger .ui-plus { height: 1.6rem; stroke-width: 2; width: 1.6rem; }

/* Panel de administración, sección «Game Master» (public/admin-gm.js). */
.gm-summary { font-weight: 700; margin: .4rem 0; }
.gm-status { background: rgba(85, 217, 138, .12); border: 1px solid rgba(85, 217, 138, .4); border-radius: .6rem; margin: .4rem 0 1rem; padding: .55rem .8rem; }
.gm-status.is-error { background: rgba(242, 92, 92, .12); border-color: rgba(242, 92, 92, .5); }
.gm-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.gm-card { background: rgba(255, 255, 255, .03); border: 1px solid rgba(154, 167, 163, .28); border-radius: .8rem; display: grid; gap: .7rem; padding: 1rem; align-content: start; }
.gm-card h3 { margin: 0; }
.gm-row { align-items: flex-end; display: flex; flex-wrap: wrap; gap: .6rem; }
.gm-field { display: grid; font-size: .74rem; gap: .25rem; }
.gm-check { align-items: center; display: flex; font-size: .78rem; }
.gm-danger { border-color: rgba(242, 92, 92, .55); color: #f0a0a0; }

/* Mi NodusPlay, «Mis proyectos»: orden, contador y «Ver más». */
.my-dashboard-projects-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem 1rem; justify-content: space-between; margin: .2rem 0 .8rem; }
.my-dashboard-projects-count { color: var(--text-muted, #9aa7a3); font-size: .75rem; }
.my-dashboard-projects-toolbar label { align-items: center; display: flex; font-size: .75rem; gap: .5rem; }
.my-dashboard-more { display: block; margin: .9rem auto 0; }

/* Portada con sesión iniciada: bienvenida con el avatar redondo y el punto de «en línea». */
.hero-welcome { align-items: center; display: flex; gap: 1.3rem; margin: 1.35rem 0; }
.hero-welcome h1 { font-size: clamp(2.3rem, 4.4vw, 4.4rem); line-height: 1.05; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.hero-welcome h1 small { color: #c2ccc9; display: block; font-size: .32em; font-weight: 650; letter-spacing: .01em; margin-bottom: .35rem; }
.hero-avatar { border-radius: 50%; display: block; flex: none; height: clamp(5.2rem, 8vw, 7.4rem); position: relative; width: clamp(5.2rem, 8vw, 7.4rem); }
.hero-avatar img { border: 3px solid var(--np-green-border); border-radius: 50%; box-shadow: 0 0 0 5px var(--np-green-bg), 0 10px 28px rgba(0, 0, 0, .45); display: block; height: 100%; object-fit: cover; width: 100%; }
.hero-avatar-online { background: var(--np-green-bright); border: 3px solid #081512; border-radius: 50%; bottom: 4%; box-shadow: 0 0 0 3px var(--np-green-bg), 0 0 12px var(--np-green-glow); height: 22%; position: absolute; right: 4%; width: 22%; }
@media (max-width: 560px) { .hero-welcome { align-items: flex-start; flex-direction: column; gap: .9rem; } }

/* Rincón de la portada: tarjetas que la persona fija junto a su bienvenida (public/home-corner.js). */
.hero-welcome { flex-wrap: wrap; }
.home-corner { flex: 1 1 180px; min-width: 0; }
.home-corner-host { display: grid; gap: .5rem; justify-items: start; position: relative; }
.home-corner-list { display: grid; gap: .45rem; max-width: 280px; position: relative; width: 100%; }
.home-corner-edit { align-items: center; background: #0d1614; border: 1px solid rgba(154, 167, 163, .5); border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); color: #eafdf3; cursor: pointer; display: inline-flex; height: 1.7rem; justify-content: center; padding: 0; position: absolute; right: -.5rem; top: -.5rem; width: 1.7rem; z-index: 2; }
.home-corner-edit:hover, .home-corner-edit:focus-visible { border-color: var(--np-green-border); color: var(--np-green-soft); }
.ui-edit { fill: none; height: .9rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: .9rem; }
.home-chip { align-items: center; background: rgba(9, 18, 16, .72); border: 1px solid rgba(154, 167, 163, .3); border-radius: .75rem; color: inherit; display: flex; gap: .55rem; max-width: 280px; min-width: 0; padding: .4rem .6rem; text-decoration: none; width: 100%; transition: border-color .18s ease, transform .18s ease; }
a.home-chip:hover, a.home-chip:focus-visible { border-color: var(--np-green-border); transform: translateY(-1px); }
.home-chip.is-highlight { border-color: rgba(244, 177, 58, .65); box-shadow: 0 0 0 1px rgba(244, 177, 58, .2); }
.home-chip-mark { align-items: center; background: var(--np-green-bg); border-radius: 50%; color: var(--np-green-soft); display: inline-flex; flex: none; font-size: 1rem; height: 2rem; justify-content: center; width: 2rem; }
.home-chip-mark.has-art { background: none; height: 2.2rem; width: 2.2rem; }
.home-chip-body { display: grid; min-width: 0; }
.home-chip-body small { color: var(--text-muted, #9aa7a3); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.home-chip-body strong { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-chip-body span { color: #c2ccc9; font-size: .68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-corner-add { align-items: center; background: rgba(9, 18, 16, .55); border: 1px dashed rgba(154, 167, 163, .5); border-radius: .75rem; color: #c2ccc9; cursor: pointer; display: flex; gap: .55rem; justify-content: flex-start; max-width: 280px; padding: .5rem .7rem; width: 100%; }
.home-corner-add:hover, .home-corner-add:focus-visible { border-color: var(--np-green-border); }
.home-corner-add span { font-size: .74rem; }
.home-corner-panel { background: #0d1614; border: 1px solid rgba(154, 167, 163, .4); border-radius: .8rem; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); display: grid; gap: .55rem; left: 0; max-width: 92vw; padding: .9rem; position: absolute; top: calc(100% + .4rem); width: 470px; z-index: 40; }
.home-corner-options { display: grid; gap: .4rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .home-corner-options { grid-template-columns: minmax(0, 1fr); } }
.home-corner-panel h3 { margin: 0; }
.home-corner-option { align-items: center; display: flex; font-size: .8rem; gap: .4rem; line-height: 1.25; }
.home-corner-option.is-select { align-items: stretch; display: grid; gap: .3rem; }
.home-corner-option select { max-width: 100%; width: 100%; }
.home-corner-actions { display: flex; gap: .5rem; }

/* Ventajas de la cabecera: iconos SVG nítidos y centrados dentro de su círculo (antes eran caracteres de texto). */
.home-main .value-row .value-item { grid-template-columns: 1.7rem minmax(0, 1fr); }
.home-main .value-row .value-icon { font-size: 0; height: 1.6rem; margin-top: 0; width: 1.6rem; }
.home-main .value-row .value-icon svg { fill: none; height: .92rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: .92rem; }
/* Medidas en píxeles enteros (círculo de 26 px, icono de 14 px: 5 px de margen exacto a cada lado): con medidas en rem el redondeo dejaba el icono medio píxel
   descentrado según la pantalla. Además, una estrella «pesa» hacia abajo (sus puntas inferiores son más anchas), así que se sube 1 px. */
.home-main .value-row .value-item { grid-template-columns: 28px minmax(0, 1fr); }
.home-main .value-row .value-icon { box-sizing: border-box; height: 26px; width: 26px; }
.home-main .value-row .value-icon svg { height: 14px; width: 14px; }
.home-main .value-row .value-talent .value-icon svg { transform: translateY(-1px); }
.home-main .value-row { transform: translateY(23px); }

/* Iconos SVG de la tabla compartida (public/icon-paths.js), que sustituyen a caracteres de texto (⌕ ✉ ↗ ‹ › ☀ ☾ ⌂ ▣ ♥ …) en la cabecera, la portada y Mi NodusPlay. */
.ui-glyph { display: block; fill: none; flex: none; height: 1em; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: 1em; }
.ui-glyph.is-filled { fill: currentColor; }
.search-icon { align-items: center; display: inline-flex; font-size: 1.15rem !important; transform: none; }
.search-toggle .ui-glyph { height: 1.25rem; width: 1.25rem; }
.day-state .ui-glyph { filter: drop-shadow(0 0 6px currentColor); }
.messages-link .ui-glyph { height: 1.45rem; width: 1.45rem; }
.primary-button span svg { display: inline-block; height: .9em; vertical-align: -.12em; width: .9em; }
.hero-carousel-controls button { font-size: 1rem; padding: 0; }
.hero-carousel-controls button .ui-glyph { height: .95rem; width: .95rem; }
.explore-sidebar-toggle { padding: 0; }
.explore-sidebar-toggle .ui-glyph { height: 1rem; width: 1rem; }

/* Campos de archivo en el idioma de la web (public/file-inputs.js): el campo real queda escondido pero enfocable y se muestra un botón propio. */
.file-field { align-items: center; display: inline-flex; flex-wrap: wrap; gap: .5rem .7rem; max-width: 100%; position: relative; }
.file-native { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
.file-button { background: var(--np-green-dark); border: 1px solid var(--np-green-border); border-radius: .35rem; color: var(--np-green-soft); cursor: pointer; font: inherit; font-size: .75rem; font-weight: 700; padding: .45rem .7rem; transition: border-color .12s, box-shadow .12s; user-select: none; }
.file-field:hover .file-button { border-color: var(--np-green); }
.file-native:focus-visible ~ .file-button { outline: 2px solid var(--np-green-bright); outline-offset: 2px; }
.file-name { color: #b3c0ba; font-size: .8rem; min-width: 0; overflow-wrap: anywhere; }
.file-field.has-files .file-name { color: #e2efe8; }
.file-field.is-drag .file-button { border-color: var(--np-green-bright); box-shadow: 0 0 0 3px var(--np-green-glow); }
.file-field.is-disabled .file-button { cursor: not-allowed; opacity: .5; }

/* Botón «Reportar» de la página de mascotas (public/pets-report.js). */
.pet-report { align-items: center; border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, .1)); display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; justify-content: space-between; margin-top: 2rem; padding-top: 1.1rem; }
.pet-report p { margin: .15rem 0 0; }
.report-menu { max-width: min(30rem, calc(100vw - 2rem)); }
.report-menu-body, .report-menu-player { display: grid; gap: .7rem; }
.report-menu-option { background: rgba(255, 255, 255, .04); border: 1px solid var(--border-subtle, rgba(255, 255, 255, .12)); border-radius: .6rem; color: inherit; cursor: pointer; display: grid; gap: .15rem; padding: .7rem .85rem; text-align: left; text-decoration: none; }
.report-menu-option:hover, .report-menu-option:focus-visible { border-color: var(--np-green-border); }
.report-menu-option strong { font-size: .95rem; }
.report-menu-option small { color: var(--np-text-muted, #a2b0ad); font-size: .78rem; line-height: 1.35; }
.arena-report { justify-self: start; margin: .3rem 0; }
.auth-check { align-items: flex-start; display: flex !important; font-size: .85rem; gap: .6rem; line-height: 1.4; }
.auth-check input { flex: 0 0 auto; height: 1.1rem; margin-top: .15rem; width: 1.1rem; }
.auth-check a { color: var(--np-green-soft); text-decoration: underline; }
.report-what-happens { color: var(--np-green-soft); display: inline-block; font-size: .82rem; margin: .1rem 0 .4rem; text-decoration: underline; }

/* Vista ampliada de una tarjeta (public/card-peek.js): capa fija centrada sobre la tarjeta, con la misma forma pero más grande. */
.card-peek { background: #0e1614; border: 1px solid rgba(var(--np-green-rgb), .35); border-radius: .9rem; box-shadow: 0 22px 60px rgba(0, 0, 0, .65); color: inherit; display: block; overflow: hidden; position: fixed; text-decoration: none; transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; will-change: transform, opacity; z-index: 90; }
/* El contenido (texto y capturas) aparece un instante después de que la tarjeta empiece a crecer, para que el zoom no «salte» con todo ya dibujado. */
.card-peek-body { transition: opacity .24s ease .1s; }
.card-peek:not(.is-open) .card-peek-body { opacity: 0; }
.card-peek.is-closing { opacity: 0 !important; pointer-events: none; transform: scale(.96) !important; transition: transform .15s ease, opacity .12s ease; }
.card-peek-cover { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #123328, #0e1a17); overflow: hidden; position: relative; }
.card-peek-cover > img { display: block; height: 100%; object-fit: cover; width: 100%; }
/* Las etiquetas de la tarjeta asoman sobre la imagen; en la ampliada, que recorta lo que sobresale, van dentro de la portada. */
.card-peek-cover .card-badges { left: .6rem; top: .6rem; }
.card-peek-cover .card-insignia { bottom: .6rem; left: .6rem; }
.card-peek-body { display: grid; gap: .55rem; padding: .8rem .9rem .9rem; }
.card-peek-body h3 { color: #f5fbf7; font-size: 1rem; line-height: 1.25; margin: 0; }
.card-peek-developer { color: #8fa39b; font-size: .72rem; margin: -.3rem 0 0; }
.card-peek-summary { -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: #c7d3cd; display: -webkit-box; font-size: .8rem; line-height: 1.5; margin: 0; overflow: hidden; }
.card-peek-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.card-peek-chips span { background: rgba(255, 255, 255, .07); border: 1px solid rgba(154, 167, 163, .3); border-radius: 999px; color: #dfe9e4; font-size: .68rem; font-weight: 600; padding: .15rem .55rem; }
.card-peek-shots { display: grid; gap: .35rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-peek-shots[hidden] { display: none; }
.card-peek-shots img { aspect-ratio: 16 / 10; background: #0a1210; border-radius: .4rem; display: block; object-fit: cover; width: 100%; }
@media (prefers-reduced-motion: reduce) { .card-peek { transition: none; } }

/* Calendario de lanzamientos (public/calendar.js). */
.calendar-bar { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.2rem; }
#calendar-page .section-heading h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.1; }
.calendar-month { font-size: 1.3rem; margin: 0 .3rem; min-width: 11rem; text-align: center; }
.calendar-month::first-letter { text-transform: uppercase; }
.calendar-step { font-size: 1.1rem; line-height: 1; min-width: 2.4rem; padding: .45rem .7rem; }
.calendar-now { margin-left: auto; }
.calendar-list { display: grid; gap: .9rem; }
.calendar-day { align-items: start; display: grid; gap: 1rem; grid-template-columns: 4.6rem minmax(0, 1fr); }
.calendar-date { background: rgba(255, 255, 255, .04); border: 1px solid rgba(154, 167, 163, .25); border-radius: .7rem; display: grid; justify-items: center; padding: .55rem .3rem; text-align: center; }
.calendar-date strong { color: #f5fbf7; font-size: 1.5rem; line-height: 1; }
.calendar-date span { color: var(--text-muted, #9aa7a3); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.calendar-date small { color: var(--text-muted, #9aa7a3); font-size: .62rem; text-transform: capitalize; }
.calendar-day.is-today .calendar-date { border-color: var(--np-green, #00f59b); box-shadow: 0 0 0 1px rgba(var(--np-green-rgb), .35); }
.calendar-day.is-past .calendar-date strong { color: #aeb9b4; }
.calendar-entries { display: grid; gap: .6rem; }
.calendar-entry { align-items: stretch; background: linear-gradient(155deg, #101c19, #0d1614); border: 1px solid rgba(154, 167, 163, .25); border-radius: .8rem; color: inherit; display: grid; gap: .9rem; grid-template-columns: 9.5rem minmax(0, 1fr); overflow: hidden; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.calendar-entry:hover, .calendar-entry:focus-visible { border-color: rgba(var(--np-green-rgb), .5); transform: translateY(-1px); }
.calendar-cover { background: linear-gradient(135deg, #123328, #0e1a17); display: block; min-height: 5.6rem; }
.calendar-cover img { display: block; height: 100%; object-fit: cover; width: 100%; }
.calendar-copy { display: grid; gap: .3rem; padding: .7rem .9rem .7rem 0; }
.calendar-copy strong { color: #f5fbf7; font-size: 1rem; line-height: 1.25; }
.calendar-meta { color: var(--text-muted, #9aa7a3); font-size: .74rem; }
.calendar-summary { -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #c7d3cd; display: -webkit-box; font-size: .82rem; line-height: 1.45; overflow: hidden; }
.calendar-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.calendar-chip, .calendar-type { border-radius: 999px; font-size: .66rem; font-weight: 700; padding: .12rem .55rem; }
.calendar-chip { background: rgba(255, 255, 255, .07); border: 1px solid rgba(154, 167, 163, .3); color: #dfe9e4; }
.calendar-type.is-release { background: rgba(var(--np-green-rgb), .16); color: #7be8b0; }
.calendar-type.is-preorder { background: rgba(244, 177, 58, .18); color: #ffd37a; }
.calendar-type.is-jam { background: rgba(139, 92, 246, .22); color: #cdb8ff; }
.calendar-type.is-event { background: rgba(92, 188, 245, .2); color: #9fd8ff; }
.calendar-empty { display: grid; gap: .7rem; justify-items: start; }
.calendar-empty .empty-state { margin: 0; }
@media (max-width: 640px) {
  .calendar-day { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .calendar-date { align-items: baseline; display: flex; gap: .5rem; justify-content: flex-start; padding: .35rem .7rem; }
  .calendar-entry { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .calendar-month { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .calendar-entry { transition: none; } }

/* Carril «Próximos lanzamientos» de la portada (public/launches.js): tarjetas de siempre con la fecha de salida sobre la portada. */
.launches-strip .game-related-list .card-link { flex: 0 0 208px; scroll-snap-align: start; width: 208px; }
.launches-strip .game-related-nav { display: flex; gap: .4rem; }
.launches-strip .game-related-nav[hidden] { display: none; }
.card-release-date { background: rgba(8, 14, 12, .82); border: 1px solid rgba(255, 255, 255, .22); border-radius: .45rem; bottom: .5rem; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .02em; padding: .18rem .5rem; position: absolute; right: .5rem; text-transform: uppercase; z-index: 3; }
.card-release-date.is-preorder { background: rgba(244, 177, 58, .92); border-color: transparent; color: #241804; }
@media (max-width: 600px) { .launches-strip .game-related-list .card-link { flex-basis: 168px; width: 168px; } }

/* Panel «Automatización»: estado de cada tarea del servidor. */
.admin-task-status { align-self: center; border-radius: 999px; font-size: .68rem; font-weight: 800; padding: .15rem .6rem; white-space: nowrap; }
.admin-task-status.is-ok { background: rgba(var(--np-green-rgb), .16); color: #7be8b0; }
.admin-task-status.is-failed { background: rgba(242, 92, 92, .2); color: #ffb0b0; }
.admin-task-status.is-never, .admin-task-status.is-disabled { background: rgba(154, 167, 163, .18); color: #c3ccc8; }
.dash-row-meta.is-ok { color: #7be8b0; }

/* Menú lateral del panel de administración por grupos desplegables. */
.dash-nav-group { border-top: 1px solid rgba(154, 167, 163, .15); display: grid; gap: .15rem; margin-top: .3rem; padding-top: .3rem; }
.dash-nav-group > summary { align-items: center; color: var(--text-muted, #9aa7a3); cursor: pointer; display: flex; font-size: .68rem; font-weight: 800; gap: .5rem; letter-spacing: .08em; list-style: none; min-height: 2rem; padding: 0 .65rem; text-transform: uppercase; user-select: none; }
.dash-nav-group > summary::-webkit-details-marker { display: none; }
.dash-nav-group > summary::after { border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; content: ''; height: .4rem; margin-left: auto; transform: rotate(45deg); transition: transform .15s ease; width: .4rem; }
.dash-nav-group[open] > summary::after { transform: rotate(-135deg); }
.dash-nav-group > summary .dash-nav-count { margin-left: .2rem; }
.dash-nav-group > summary:hover { color: #fff; }
.dash-nav-group > .dash-nav-item { margin-left: .35rem; }
@media (max-width: 900px) { .dash-nav-group { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .dash-nav-group > summary::after { transition: none; } }

.dash-nav-search { padding: .7rem .75rem 0; }
.dash-nav-search input { background: #0a1513; border: 1px solid #2c3a36; border-radius: .5rem; box-sizing: border-box; color: #f2f0f7; font: inherit; font-size: .78rem; padding: .5rem .65rem; width: 100%; }
.dash-nav-search input:focus { border-color: var(--np-green-border); outline: 0; }
.dash-nav-empty { color: var(--text-muted, #9aa7a3); font-size: .74rem; margin: .4rem .65rem; }
.dash-nav-item[hidden], .dash-nav-group[hidden], .dash-nav-empty[hidden] { display: none; }

/* Anuncio semanal del grupo de Steam (panel «Automatización»). */
.admin-weekly-post { align-items: stretch; display: grid; gap: .6rem; }
.admin-weekly-field { display: grid; gap: .3rem; }
.admin-weekly-field input, .admin-weekly-field textarea { background: #0a1513; border: 1px solid #2c3a36; border-radius: .5rem; box-sizing: border-box; color: #e8f1ed; font: inherit; font-size: .78rem; padding: .5rem .65rem; width: 100%; }
.admin-weekly-field textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.45; resize: vertical; }
.admin-weekly-field .secondary-button { justify-self: start; }

/* Gratis en Steam (public/steam-free.js): página /free y franja de la portada. */
#free-page .section-heading h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.1; }
.free-section { margin-bottom: 2rem; }
.free-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.free-card { background: linear-gradient(155deg, #101c19, #0d1614); border: 1px solid rgba(154, 167, 163, .25); border-radius: .8rem; display: grid; overflow: hidden; }
.free-card.is-ended { opacity: .8; }
.free-cover { aspect-ratio: 460 / 215; background: linear-gradient(135deg, #123328, #0e1a17); display: block; overflow: hidden; }
.free-cover img { display: block; height: 100%; object-fit: cover; width: 100%; }
.free-copy { display: grid; gap: .45rem; padding: .8rem .9rem .9rem; }
.free-copy h3 { color: #f5fbf7; font-size: 1rem; line-height: 1.25; margin: 0; }
.free-meta { color: var(--text-muted, #9aa7a3); font-size: .74rem; margin: 0; }
.free-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.free-actions .primary-button, .free-actions .secondary-button { font-size: .78rem; margin: 0; padding: .5rem .9rem; }
.free-disclaimer { max-width: 60ch; }
.news-steam-card .news-game-link { align-self: start; }

/* Alojar el juego en NodusPlay (formulario del creador) */
.creator-hosted { display: grid; gap: .6rem; padding: 1rem; border: 1px dashed var(--np-green-border); border-radius: 12px; }
.creator-hosted h3 { margin: 0; }
.creator-hosted-list { margin: .25rem 0 0; padding-left: 1.2rem; display: grid; gap: .45rem; font-size: .95em; }
.creator-hosted-build { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; }

/* Formulario del juego: un grupo de campos por tarjeta, con número y título, para no mezclarlos */
.creator-group { display: grid; gap: .9rem; padding: 1.25rem; margin: 1.1rem 0; border: 1px solid rgba(var(--np-green-rgb), .18); border-radius: 14px; background: var(--np-surface, rgba(255, 255, 255, .02)); }
.creator-group > * { margin: 0; }
.creator-group-title { display: flex; align-items: center; gap: .6rem; margin: 0 0 .1rem; font-size: 1.1rem; }
.creator-group-number { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--np-green-bg); border: 1px solid var(--np-green-border); color: var(--np-green); font-size: .9rem; font-weight: 700; }
.creator-group-hint { color: rgba(255, 255, 255, .62); font-size: .92rem; }
.creator-group > label { display: grid; gap: .35rem; }
.creator-group .creator-hosted { margin-top: .4rem; }

/* Panel «Conexiones» */
.dash-toolbar { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: end; margin: .75rem 0 1rem; }
.dash-toolbar-field { display: grid; gap: .25rem; font-size: .9rem; }
.dash-toolbar-field:has(input[type="checkbox"]) { display: flex; align-items: center; gap: .4rem; }
.dash-details { border: 1px solid rgba(var(--np-green-rgb), .18); border-radius: 12px; padding: .5rem .9rem; margin: .5rem 0; }
.dash-details > summary { cursor: pointer; font-weight: 600; padding: .35rem 0; }

/* Página /free: tablero de ofertas */
.free-hero { display: flex; align-items: center; gap: 1.1rem; margin: .5rem 0 1.25rem; padding: 1.25rem 1.4rem; border: 1px solid var(--np-green-border); border-radius: 16px; background: linear-gradient(135deg, rgba(var(--np-green-rgb), .10), rgba(10, 21, 23, .6)); }
.free-hero-icon { color: var(--np-green); display: grid; place-items: center; width: 68px; height: 68px; border-radius: 18px; background: var(--np-green-bg); border: 1px solid var(--np-green-border); flex: none; }
.free-hero-text h1 { margin: 0 0 .2rem; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: .02em; }
.free-hero-sub { margin: 0; color: rgba(255, 255, 255, .7); }
.free-hero-count { margin: .5rem 0 0; color: var(--np-green); font-weight: 700; }
.free-hero-updated { margin: .15rem 0 0; color: rgba(255, 255, 255, .5); font-size: .85rem; }
.free-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin-bottom: 1.25rem; }
.free-stat { display: grid; gap: .15rem; padding: .9rem 1rem; border: 1px solid rgba(var(--np-green-rgb), .18); border-radius: 14px; background: var(--np-surface, rgba(255, 255, 255, .02)); }
.free-stat strong { font-size: 1.6rem; color: var(--np-green); line-height: 1.1; }
.free-stat span { color: rgba(255, 255, 255, .65); font-size: .88rem; }
.free-controls { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.free-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.free-chip { border: 1px solid rgba(var(--np-green-rgb), .3); background: transparent; color: inherit; border-radius: 999px; padding: .4rem .9rem; font: inherit; font-size: .9rem; cursor: pointer; }
.free-chip.is-active { background: var(--np-green-bg); border-color: var(--np-green); color: var(--np-green); font-weight: 700; }
.free-chip.is-disabled { opacity: .45; cursor: default; border-style: dashed; }
.free-sort, .free-hide-claimed { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.free-board { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.free-deal { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(var(--np-green-rgb), .22); border-radius: 16px; background: linear-gradient(155deg, #101c19, #0d1614); }
.free-deal.is-ended { opacity: .82; }
.free-deal.is-claimed { border-color: var(--np-green); }
.free-deal-cover { position: relative; display: block; aspect-ratio: 460 / 215; background: linear-gradient(135deg, #123328, #0e1a17); overflow: hidden; }
.free-deal-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.free-deal-badges { position: absolute; left: .55rem; top: .55rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.free-tag { padding: .15rem .55rem; border-radius: 6px; font-size: .7rem; font-weight: 800; letter-spacing: .06em; background: rgba(5, 13, 16, .85); border: 1px solid rgba(255, 255, 255, .2); color: #fff; }
.free-tag.is-now { background: var(--np-green); color: var(--np-on-green, #02110B); border-color: var(--np-green); }
.free-tag.is-f2p { background: rgba(88, 150, 255, .9); border-color: transparent; }
.free-tag.is-ended { background: rgba(120, 120, 120, .85); }
.free-tag.is-claimed { background: var(--np-green-bg); color: var(--np-green); border-color: var(--np-green); }
.free-deal-body { display: flex; flex: 1; flex-direction: column; gap: .55rem; padding: .95rem 1rem 1rem; }
.free-deal-body h3 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.free-deal-desc { margin: 0; color: rgba(255, 255, 255, .62); font-size: .88rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.free-deal-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .65rem; }
.free-deal-old { color: rgba(255, 255, 255, .45); }
.free-deal-now { color: var(--np-green); font-size: 1.25rem; }
.free-deal-save { color: var(--np-green); font-size: .8rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.free-deal-time { margin: 0; color: rgba(255, 255, 255, .5); font-size: .82rem; }
.free-deal-actions { display: grid; gap: .5rem; margin-top: auto; }
.free-deal-actions .primary-button, .free-deal-actions .secondary-button { text-align: center; justify-content: center; }
.free-deal-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }
.free-deal-row .secondary-button { border-radius: 12px; min-height: 40px; padding: .45rem .8rem; font-size: .86rem; line-height: 1.15; }
.free-disclaimer { max-width: none; margin-top: 1.5rem; }
.free-deal-claim.is-on { border-color: var(--np-green); color: var(--np-green); }
@media (max-width: 560px) { .free-hero { flex-direction: column; align-items: flex-start; } .free-stats { grid-template-columns: repeat(2, 1fr); } }

/* Cuenta atrás de las ofertas con fecha de fin (Epic) */
.free-deal-countdown { margin: 0; font-weight: 700; color: var(--np-green); font-size: .9rem; }
.free-deal-progress { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.free-deal-progress span { display: block; height: 100%; border-radius: inherit; background: var(--np-btn-gradient, var(--np-green)); }
.free-tag.is-soon { background: rgba(200, 160, 60, .92); color: #1a1200; border-color: transparent; }
.free-deal.is-soon { border-style: dashed; }

/* Escaparate de creadores arriba de «Creadores» (bloque patrocinado) */
.creators-showcase { margin: .5rem 0 2rem; padding: 1.1rem 1.2rem 1.3rem; border: 1px solid rgba(200, 160, 60, .45); border-radius: 16px; background: linear-gradient(145deg, rgba(200, 160, 60, .08), rgba(10, 21, 23, .55)); }
.creators-showcase-head { display: grid; gap: .25rem; margin-bottom: .9rem; }
.creators-showcase-head h2 { margin: 0; font-size: 1.25rem; }
.creators-showcase-head p { margin: 0; }
.creators-showcase-tag { justify-self: start; padding: .1rem .55rem; border-radius: 6px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: rgba(200, 160, 60, .9); color: #1a1200; }

/* Filtros de /free: cada uno se activa o se quita por separado */
.free-chips { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; }
.free-chip-group { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.free-chip-label { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.free-chip:not(.is-active):not(.is-disabled) { opacity: .6; border-style: dashed; }
.free-reset { background: none; border: 0; color: var(--np-green); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; padding: 0; }

/* Botones de las tarjetas de /free: compactos y sobrios (nada de píldoras gigantes) */
.free-deal-actions { gap: .45rem; }
.free-deal-actions .primary-button, .free-deal-actions .secondary-button { display: flex; align-items: center; justify-content: center; margin: 0; min-height: 38px; padding: .4rem .9rem; border-radius: 10px; font-size: .9rem; line-height: 1.1; text-align: center; white-space: nowrap; }
.free-deal-actions .primary-button { background: var(--np-green); border-color: var(--np-green); box-shadow: none; font-weight: 700; letter-spacing: .01em; }
.free-deal-actions .primary-button:hover, .free-deal-actions .primary-button:focus-visible { background: var(--np-green-bright); box-shadow: 0 0 0 3px rgba(var(--np-green-rgb), .22); transform: none; }
.free-deal-actions .secondary-button { background: rgba(255, 255, 255, .03); box-shadow: none; font-weight: 600; }
.free-deal-actions .secondary-button:hover, .free-deal-actions .secondary-button:focus-visible { background: rgba(var(--np-green-rgb), .08); }
.free-deal-row { grid-template-columns: 1fr 1fr; gap: .45rem; }
.free-deal-row .secondary-button { min-height: 36px; padding: .35rem .6rem; font-size: .84rem; }
.free-deal-arrow { margin-left: .3rem; opacity: .75; }

/* Página /free: panel de filtros lateral como el de Explorar */
.free-layout { margin-top: .5rem; }
.free-sidebar { flex-basis: 250px; }
.free-search { background: #0d1614; border: 1px solid #1c2724; border-radius: .5rem; color: var(--np-text); font: inherit; font-size: .86rem; margin-bottom: .9rem; padding: .55rem .7rem; width: 100%; }
.free-search:focus { border-color: var(--np-green); outline: none; }
.explore-filter-chip.is-disabled { cursor: default; opacity: .45; }
.free-result-count { color: var(--np-text-muted); font-size: .85rem; }
.free-saved-list li { display: flex; flex-wrap: wrap; gap: .25rem .6rem; align-items: center; }
.free-board { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.free-toolbar { margin-bottom: 1.1rem; }

/* Final de la portada: cifras, comunidad y franja para creadores */
.home-stats { align-content: center; background: radial-gradient(120% 90% at 100% 0%, rgba(var(--np-green-rgb), .12), transparent 60%), linear-gradient(135deg, #101b17, #0c1512); border: 1px solid #263531; border-radius: .95rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .04); display: grid; gap: 1.1rem; padding: 1.4rem 1.5rem 1.5rem; }
.home-stats[hidden] { display: none; }
.home-stats .eyebrow { margin: 0; }
.home-stats-grid { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-stat { background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .06); border-radius: .75rem; align-items: center; column-gap: .75rem; display: grid; grid-template-columns: auto minmax(0, 1fr); padding: .7rem .8rem; transition: border-color .2s ease, transform .2s ease; }
.home-stat:hover { border-color: var(--np-green-border); transform: translateY(-2px); }
.home-online { align-items: baseline; background: rgba(var(--np-green-rgb), .07); border: 1px solid var(--np-green-border); border-radius: .75rem; display: flex; flex-wrap: wrap; gap: .1rem .55rem; margin: 0; padding: .7rem .9rem; }
.home-online strong { color: #f5fbf7; font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1; }
.home-online span:not(.home-online-dot) { color: #c4d0cc; font-size: .86rem; }
.home-online small { color: #7f918b; font-size: .74rem; margin-left: auto; }
.home-online-dot { align-self: center; animation: home-online-pulse 2s ease-out infinite; background: var(--np-green); border-radius: 50%; box-shadow: 0 0 0 0 rgba(var(--np-green-rgb), .6); height: .6rem; width: .6rem; }
@keyframes home-online-pulse { 70% { box-shadow: 0 0 0 .5rem rgba(var(--np-green-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--np-green-rgb), 0); } }
@media (prefers-reduced-motion: reduce) { .home-online-dot { animation: none; } }
.home-stat-icon { align-items: center; background: rgba(var(--np-green-rgb), .12); border: 1px solid var(--np-green-border); border-radius: .6rem; color: var(--np-green); display: inline-flex; font-size: 1.05rem; height: 2.1rem; grid-row: 1 / 3; justify-content: center; width: 2.1rem; }
.home-stat strong { color: #f5fbf7; font-size: 1.6rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.home-stat-label { color: #94a69f; font-size: .78rem; line-height: 1.3; }
.category-slots a small { color: #7f918b; font-size: .66rem; font-weight: 600; margin-top: -.35rem; }
.home-community { border-top: 1px solid #1a2521; margin-top: 3rem; padding-top: 2.4rem; }
.home-community[hidden] { display: none; }
.home-community-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 1.3rem; }
.home-community-box { background: #0e1614; border: 1px solid #202d29; border-radius: .85rem; padding: 1.2rem 1.3rem; }
.home-community-box[hidden] { display: none; }
.home-community-box h3 { font-size: 1.05rem; margin: 0 0 .8rem; }
.home-community-box ul { display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.home-community-box li { display: grid; gap: .15rem; }
.home-community-box li a { color: #e6f0eb; font-weight: 600; text-decoration: none; }
.home-community-box li a:hover { color: var(--np-green); }
.home-community-box li small { color: #7f918b; font-size: .74rem; }
.home-community-box li p { color: #b6c3be; font-size: .86rem; line-height: 1.45; margin: 0; }
.home-review-stars { color: #ffd479; font-size: .78rem; font-weight: 700; }
.home-community-more { color: var(--np-green-soft); display: inline-block; font-size: .85rem; margin-top: .9rem; }
.developer-banner { align-items: center; display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; justify-content: space-between; margin-top: 3rem; padding: 1.6rem 2rem; }
.developer-banner h2 { font-size: 1.5rem; margin: .2rem 0 .7rem; }
.developer-steps { color: #c4d0cc; counter-reset: step; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.developer-steps li { counter-increment: step; font-size: .9rem; }
.developer-steps li::before { color: var(--np-green); content: counter(step) '. '; font-weight: 800; }
.developer-banner .primary-button { margin-top: 0; }
.catalog-zone .developer-banner { margin-top: 3rem; }


/* Ficha propia de cada oferta: datos de la tienda en etiquetas, texto nuestro y nota del equipo */
.free-deal-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .1rem 0 .15rem; }
.free-deal-chip { background: rgba(255, 255, 255, .06); border: 1px solid rgba(154, 167, 163, .28); border-radius: 999px; color: #d2ddd8; font-size: .68rem; font-weight: 600; padding: .12rem .55rem; }
.free-deal-chip.is-good { background: rgba(var(--np-green-rgb), .13); border-color: var(--np-green-border); color: var(--np-green-soft); }
.free-deal-chip.is-muted { color: #8fa09a; }
.free-deal-note { background: rgba(var(--np-green-rgb), .07); border-left: 3px solid var(--np-green); border-radius: .3rem; color: #d7e4de; font-size: .82rem; line-height: 1.45; margin: .35rem 0; padding: .45rem .65rem; }

/* El texto con degradado (background-clip: text) se recorta en el borde de su caja, y con el espaciado negativo de los titulares la última letra sobresale un poco:
   se le da un margen interior a la derecha (compensado con un margen negativo para no mover nada) para que no se coma el último píxel del nick. */
.my-nodus-copy h1 span, .my-dashboard-header h1 span, .home-main .home-hero h1 span { margin-right: -.12em; padding-right: .12em; }

/* Generador de contraseñas del registro */
.password-generator { display: grid; gap: .6rem; justify-items: start; }
.password-generator[hidden], .password-generated[hidden] { display: none; }
.password-generated { background: #0c1311; border: 1px dashed #2a3a35; border-radius: .6rem; display: grid; gap: .5rem; justify-items: start; padding: .8rem .9rem; width: 100%; }
.password-generated code { color: var(--np-green); font-size: 1.05rem; letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }

/* Formulario de acceso: ver contraseña, mayúsculas, fortaleza y coincidencia */
.password-field { display: block; position: relative; }
.password-field input { padding-right: 5.2rem; width: 100%; }
.password-toggle { background: transparent; border: 0; color: var(--np-green-soft); cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; padding: .3rem .5rem; position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); }
.password-toggle:hover, .password-toggle:focus-visible { color: var(--np-green); }
.password-caps { color: #ffd479; display: block; font-size: .76rem; margin-top: .25rem; }
.password-caps[hidden] { display: none; }
.password-strength { align-items: center; display: flex; gap: .6rem; margin-top: -.3rem; }
.password-strength-bar { background: #1b2724; border-radius: 999px; display: block; flex: 1; height: .32rem; overflow: hidden; position: relative; }
.password-strength-bar::after { background: #e5736e; border-radius: inherit; content: ''; height: 100%; left: 0; position: absolute; top: 0; transition: width .2s ease, background .2s ease; width: 8%; }
.password-strength[data-level="-1"] .password-strength-bar::after { width: 0; }
.password-strength[data-level="1"] .password-strength-bar::after { background: #f0b848; width: 45%; }
.password-strength[data-level="2"] .password-strength-bar::after { background: #9bd96f; width: 72%; }
.password-strength[data-level="3"] .password-strength-bar::after { background: var(--np-green); width: 100%; }
.password-strength small { color: #9fb0a9; font-size: .76rem; min-width: 7rem; text-align: right; }
.password-match { display: block; font-size: .78rem; min-height: 1em; }
.password-match.is-ok { color: var(--np-green-soft); }
.password-match.is-bad { color: #e5736e; }

/* Alias del registro: disponibilidad en vivo */
.username-status[data-state="ok"] { color: var(--np-green-soft); }
.username-status[data-state="bad"] { color: #e5736e; }

/* QR de la verificación en dos pasos (fondo blanco para que se pueda escanear) */
.security-qr { background: #fff; border-radius: .6rem; padding: .7rem; width: max-content; }
.security-qr img { display: block; height: 200px; width: 200px; }
.security-qr:empty { display: none; }

/* Ajustes del perfil: menú lateral con secciones (reutiliza el diseño del panel del creador) */
.profile-page.is-dashboard { max-width: 1280px; }
.profile-page.is-dashboard .profile-heading { max-width: none; }
.profile-dash { margin-top: 1.6rem; }
.profile-dash .dash-section > * + * { margin-top: 1.1rem; }
.profile-dash .profile-editor { margin-top: 0; }