/* f2 · Taquilla y escenario del bot (#stepScreen-6).
   Usa las variables y piezas de f2.css. El escenario en sí está en character-preview.css;
   aquí van las escenas, la tarjeta de «tu bot» (para todas las pantallas), el mini-escenario
   fijo, el selector y el botón fijo. Móvil primero; dos columnas desde 960 px. */

/* ---- Escenas: imagen, luz y posición del podio (centro a 1 − foot del alto de la imagen) ---- */
[data-f2-scene]{
  --f2-scene-img:url(/assets/f2/escenario-arena-640.webp);
  --f2-scene-img-hd:url(/assets/f2/escenario-arena-1080.webp);
  --f2-scene-foot:.192;
  --f2-scene-ring:.73;
  --f2-scene-rgb:56,214,255;
  --f2-scene-ink:#06153a;
}
[data-f2-scene="real"]{
  --f2-scene-img:url(/assets/f2/escenario-real-640.webp);
  --f2-scene-img-hd:url(/assets/f2/escenario-real-1080.webp);
  --f2-scene-foot:.274;
  --f2-scene-ring:.66;
  --f2-scene-rgb:255,200,92;
  --f2-scene-ink:#1b0c40;
}
[data-f2-scene="isla"]{
  --f2-scene-img:url(/assets/f2/escenario-isla-640.webp);
  --f2-scene-img-hd:url(/assets/f2/escenario-isla-1080.webp);
  --f2-scene-foot:.212;
  --f2-scene-ring:.65;
  --f2-scene-rgb:74,236,206;
  --f2-scene-ink:#2a1458;
}
/* Fondo de escena anclado abajo: se desplaza lo justo para que el centro del podio quede a
   --f2-floor (fracción del ancho) del borde inferior, sea cual sea el alto de la caja. */
.f2-scene-bg{
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  aspect-ratio:640/1132;
  background:var(--f2-scene-ink) var(--f2-scene-img) center/100% 100% no-repeat;
  transform:translateY(calc((var(--f2-scene-foot) - var(--f2-floor,.25)/1.76875)*100%));
  pointer-events:none;
}
@media(min-resolution:1.5dppx),(min-width:960px){
  #stepScreen-6 .f2-stage-bg,.f2-botcard--hero .f2-scene-bg{background-image:var(--f2-scene-img-hd)}
}

/* ---- Tarjeta de «tu bot» (contrato de DIRECCION.md §7) ---- */
.f2-botcard{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(var(--f2-scene-rgb),.45);
  background:var(--f2-scene-ink);
  color:var(--f2-text);
  text-align:start;
  box-shadow:0 12px 32px rgba(2,8,23,.5),0 0 28px -14px rgba(var(--f2-scene-rgb),.8);
}
.f2-botcard-tag{display:flex;align-items:baseline;gap:6px;min-inline-size:0;max-inline-size:100%}
.f2-botcard-eyebrow{flex:none;color:rgb(var(--f2-scene-rgb));font-size:.66rem;font-weight:800;letter-spacing:.1em;line-height:1.2;text-transform:uppercase}
/* El aspecto va junto a «Tu bot», arriba: el podio queda limpio. */
.f2-botcard-outfit{min-inline-size:0;overflow:hidden;color:#fff;font-size:.72rem;font-weight:700;line-height:1.2;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}
.f2-botcard-outfit::before{content:"·";margin-inline-end:6px;color:rgba(255,255,255,.55)}
/* Brillo que cruza la tarjeta cuando el bot «llega» a la pantalla siguiente (lo anima f2-taquilla.js). */
.f2-botcard-shine{position:absolute;inset-block:0;inset-inline-start:0;z-index:2;inline-size:34%;opacity:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);pointer-events:none}
.f2-botcard-name{display:block;overflow:hidden;color:#fff;font-weight:800;line-height:1.2;letter-spacing:.01em;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}
.f2-botcard-meta{display:flex;flex-wrap:wrap;gap:6px}
.f2-botcard-stat{display:inline-flex;align-items:center;gap:4px;min-block-size:24px;padding:2px 9px;border:1px solid rgba(203,222,255,.3);border-radius:var(--f2-radius-pill);background:rgba(4,10,28,.66);color:#edf6ff;font-size:.72rem;font-weight:700;line-height:1.2;white-space:nowrap}
.f2-botcard-stat .bot-icon{width:13px;height:13px;color:var(--f2-cyan)}
.f2-botcard-stat--crowns{border-color:rgba(255,209,102,.5);color:#ffe7ad}
.f2-botcard-stat--crowns .bot-icon{color:var(--f2-gold)}
.f2-botcard-skin{display:block;max-inline-size:none;user-select:none;pointer-events:none}
.f2-botcard.is-artless .f2-botcard-skin{visibility:hidden}

/* Mini: franja con el busto sobre la escena, el nombre y el nivel. */
.f2-botcard--mini{
  display:flex;
  align-items:center;
  gap:12px;
  block-size:var(--f2-card-h,84px);
  padding-inline-end:14px;
  border-radius:var(--f2-radius-m);
}
.f2-botcard--mini .f2-botcard-scene{position:absolute;inset:0;z-index:-2;background:var(--f2-scene-ink) var(--f2-scene-img) center 34%/cover no-repeat}
.f2-botcard--mini .f2-botcard-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,10,28,.05) 0%,rgba(4,10,28,.82) 52%,rgba(4,10,28,.94) 100%)}
[dir="rtl"] .f2-botcard--mini .f2-botcard-shade{transform:scaleX(-1)}
.f2-botcard--mini .f2-botcard-art{position:relative;flex:none;block-size:100%;aspect-ratio:1/1;overflow:hidden}
/* Busto: f2-taquilla.js mide la figura y deja su tope, su centro y el aumento; sin medida, valores medios. */
.f2-botcard--mini .f2-botcard-skin{
  position:absolute;
  inline-size:calc(var(--f2-bust-k,2.6)*100%);
  block-size:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  object-position:center bottom;
  left:calc(50% - var(--f2-bust-cx,.52)*var(--f2-bust-k,2.6)*100%);
  top:calc(9% - var(--f2-bust-t,.05)*var(--f2-bust-k,2.6)*100%);
  filter:drop-shadow(0 6px 10px rgba(2,8,23,.55));
}
.f2-botcard--mini .f2-botcard-copy{display:grid;gap:3px;min-inline-size:0;flex:1 1 auto}
.f2-botcard--mini .f2-botcard-name{font-size:1.06rem}

/* Hero: el bot de cuerpo entero sobre el podio, con nombre, nivel y coronas. */
.f2-botcard--hero{
  --f2-floor:.2;
  display:block;
  inline-size:100%;
  max-inline-size:340px;
  margin-inline:auto;
  aspect-ratio:3/4;
  border-radius:var(--f2-radius-l);
}
.f2-botcard--hero .f2-botcard-art{position:absolute;inset:0;z-index:-1;overflow:hidden}
.f2-botcard--hero :is(.f2-botcard-halo,.f2-botcard-fog,.f2-botcard-shadow){position:absolute;left:50%;bottom:0;margin-bottom:calc(var(--f2-floor)*100%);border-radius:50%}
.f2-botcard--hero .f2-botcard-halo{width:calc(var(--f2-scene-ring)*100%);aspect-ratio:1/.25;transform:translate(-50%,50%);background:radial-gradient(closest-side,rgba(var(--f2-scene-rgb),.6),rgba(var(--f2-scene-rgb),.2) 58%,transparent)}
.f2-botcard--hero .f2-botcard-shadow{width:44%;aspect-ratio:1/.17;transform:translate(-50%,46%);background:radial-gradient(closest-side,rgba(2,6,18,.8),rgba(2,6,18,.4) 55%,transparent)}
.f2-botcard--hero .f2-botcard-fog{width:calc(var(--f2-scene-ring)*72%);aspect-ratio:1/.2;transform:translate(-50%,58%);background:radial-gradient(closest-side,rgba(var(--f2-scene-rgb),.5),rgba(var(--f2-scene-rgb),.16) 55%,transparent)}
.f2-botcard--hero .f2-botcard-figure{position:absolute;inset:24% 0 0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(var(--f2-floor)*100%)}
.f2-botcard--hero .f2-botcard-skin{
  flex:0 0 auto;
  inline-size:auto;
  block-size:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  object-position:center bottom;
  transform-origin:50% 100%;
  translate:var(--f2-dx,0%) var(--f2-dy,0%);
  scale:var(--f2-k,1);
  -webkit-mask-image:linear-gradient(to bottom,#000 var(--f2-fade-from,80%),transparent var(--f2-fade-to,99%));
  mask-image:linear-gradient(to bottom,#000 var(--f2-fade-from,80%),transparent var(--f2-fade-to,99%));
}
.f2-botcard--hero .f2-botcard-copy{position:absolute;inset-inline:0;inset-block-start:0;display:grid;justify-items:center;gap:6px;padding:16px 14px 0;text-align:center}
.f2-botcard--hero .f2-botcard-tag{padding:4px 12px;border-radius:var(--f2-radius-pill);background:rgba(4,10,28,.7)}
.f2-botcard--hero .f2-botcard-name{max-inline-size:100%;font-size:1.5rem;text-shadow:0 2px 14px rgba(2,8,23,.9)}
.f2-botcard--hero .f2-botcard-meta{justify-content:center}
.f2-botcard--hero.is-photo .f2-botcard-skin{border-radius:50%;-webkit-mask-image:radial-gradient(circle closest-side,#000 68%,transparent 100%);mask-image:radial-gradient(circle closest-side,#000 68%,transparent 100%)}
/* Figura sin pies en la imagen del catálogo: la luz del podio cubre el corte. */
.f2-botcard--hero.is-cut .f2-botcard-fog{width:calc(var(--f2-scene-ring)*62%);aspect-ratio:1/.3;transform:translate(-50%,50%);background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(var(--f2-scene-rgb),.9) 26%,rgba(var(--f2-scene-rgb),.4) 60%,transparent)}

/* ---- Lienzo de la pantalla ---- */
/* --f2-bleed: margen lateral del contenedor de la página; las filas que se deslizan, el
   mini-escenario y la barra fija lo cruzan para llegar al borde de la pantalla.
   --f2-mini-h: alto del mini-escenario fijo; el centinela del escenario y el salto a las pestañas lo usan. */
#stepScreen-6{--f2-bleed:16px;--f2-mini-h:128px}
#stepScreen-6.active{align-items:stretch;justify-content:flex-start;gap:0;padding-block:6px 0}
#stepScreen-6 .f2-locker{display:block;width:100%;max-width:1180px;margin-inline:auto}
#stepScreen-6 .fn-customizer-right{position:relative;padding:0;border:0;border-radius:0;background:none;text-align:start}
#stepScreen-6 .fn-customizer-right .stage-inner-hud{margin-bottom:12px}
#stepScreen-6 .f2-locker-title{margin:0;font-size:clamp(1.5rem,6.4vw,1.9rem);font-weight:800;line-height:1.12;letter-spacing:-.02em;text-align:center}
#stepScreen-6 .f2-locker-sub{max-width:none;margin:4px 0 12px;color:var(--f2-text-soft);font-size:.86rem;line-height:1.4;text-align:center}
/* En una columna el escenario no pasa de 480 px: más ancho, el podio se come a la figura. */
#stepScreen-6 .f2-stage-card{max-width:480px;margin:0 auto 14px}

/* ---- Mini-escenario fijo: ancla de alto cero para no mover la página ---- */
#stepScreen-6 .f2-ministage-anchor{position:sticky;inset-block-start:0;z-index:40;block-size:0}
#stepScreen-6 .f2-ministage{
  position:absolute;
  inset-inline:calc(var(--f2-bleed)*-1);
  inset-block-start:0;
  block-size:var(--f2-mini-h);
  padding:8px var(--f2-bleed);
  background:#050b1a;
  box-shadow:0 16px 22px -10px rgba(2,8,23,.95);
  opacity:0;
  visibility:hidden;
  transform:translateY(-104%);
  transition:transform var(--f2-med) var(--f2-ease),opacity var(--f2-fast) linear,visibility 0s linear var(--f2-med);
}
#stepScreen-6 .f2-ministage.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
#stepScreen-6 .f2-ministage .f2-botcard--mini{--f2-card-h:calc(var(--f2-mini-h) - 16px);padding-inline-end:64px}
#stepScreen-6 .f2-ministage .f2-botcard--mini .f2-botcard-name{font-size:1.2rem}
#stepScreen-6 .f2-ministage-hit{position:absolute;inset:8px var(--f2-bleed);display:flex;align-items:center;justify-content:flex-end;padding:0;padding-inline-end:14px;border:0;border-radius:var(--f2-radius-m);background:none;color:#04213a;cursor:pointer}
#stepScreen-6 .f2-ministage-hit>[data-icon]{inline-size:38px;block-size:38px;border-radius:50%;background:linear-gradient(180deg,#c3f3ff,#45cdf5);box-shadow:var(--f2-glow-cyan)}
/* Centinela del mini-escenario: un punto sobre el pie del escenario, tan arriba como alto es el
   mini. Cuando sale por arriba de la pantalla, el escenario grande ya cabe entero bajo el mini. */
#stepScreen-6 .f2-stage-foot{position:absolute;inset-inline-start:0;inset-block-end:calc(var(--f2-mini-h) - 2px);inline-size:1px;block-size:1px;opacity:0;pointer-events:none}

/* ---- Selector ---- */
#stepScreen-6 .f2-picker{min-width:0}
/* Filas de fichas que se deslizan: nada de cuatro líneas de botones. */
#stepScreen-6 .f2-chiprow{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  /* El relleno vertical deja ver el contorno de foco; el margen negativo lo compensa. */
  margin:-6px calc(var(--f2-bleed)*-1);
  padding:8px var(--f2-bleed);
  border:0;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
#stepScreen-6 .f2-chiprow::-webkit-scrollbar{display:none}
#stepScreen-6 .f2-chiprow>*{flex:0 0 auto;scroll-snap-align:start}
/* Al saltar al selector, las pestañas quedan justo debajo del mini-escenario fijo. */
/* La página ya reserva 24 px arriba (scroll-padding-top): con este margen, las fichas quedan a 4 px del mini. */
#stepScreen-6 .fn-custom-tabs-bar{margin-bottom:6px;scroll-margin-top:calc(var(--f2-mini-h) - 28px)}
#stepScreen-6 .fn-menu-tab{
  min-height:46px;
  padding:0 18px;
  border:1px solid var(--f2-stroke);
  border-radius:var(--f2-radius-pill);
  background:rgba(13,24,48,.8);
  color:var(--f2-text-soft);
  font-size:.9rem;
  font-weight:700;
  white-space:nowrap;
}
#stepScreen-6 .fn-menu-tab:hover{color:#fff;background:#14233f}
#stepScreen-6 .fn-menu-tab.active{border-color:transparent;background:linear-gradient(180deg,#c3f3ff,#5ad6fa);color:#04213a;box-shadow:0 6px 20px rgba(56,214,255,.3)}
#stepScreen-6 .f2-tab-settings{border-style:dashed;border-color:var(--f2-stroke-strong);color:var(--f2-cyan)}
#stepScreen-6 .f2-tab-settings.active{border-style:solid}

#stepScreen-6 .f2-filter-row{display:flex;align-items:center;gap:8px;margin-bottom:12px}
#stepScreen-6 .f2-filter-row .f2-chiprow{flex:1 1 auto;min-width:0;margin-inline:-4px calc(var(--f2-bleed)*-1);padding-inline:4px var(--f2-bleed)}
#stepScreen-6 .locker-quick-filters{margin-bottom:0}
#stepScreen-6 .f2-search-toggle{
  display:inline-grid;
  place-items:center;
  flex:none;
  inline-size:44px;
  block-size:44px;
  padding:0;
  border:1px solid var(--f2-stroke-strong);
  border-radius:50%;
  background:rgba(13,24,48,.8);
  color:var(--f2-cyan);
}
#stepScreen-6 .f2-search-toggle[aria-expanded="true"]{background:var(--f2-cyan);color:#04213a}
#stepScreen-6 .filter-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:0 13px;
  border:1px solid var(--f2-stroke);
  border-radius:var(--f2-radius-pill);
  background:transparent;
  color:var(--f2-text-dim);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.03em;
  white-space:nowrap;
}
#stepScreen-6 .filter-chip.active{border-color:var(--f2-stroke-strong);background:rgba(141,229,255,.12);color:#dff6ff}
#stepScreen-6 .filter-chip .bot-icon{width:14px;height:14px}
#stepScreen-6 .locker-toolbar{margin-bottom:12px}
#stepScreen-6 .locker-search-wrap{flex-wrap:nowrap;flex:1 1 auto}
#stepScreen-6 .locker-search-wrap>.form-input{min-height:46px;border-radius:14px;font-size:16px}
#stepScreen-6 .locker-search-wrap>.btn{min-height:46px;border-radius:14px}

/* Rejilla: tres columnas en móvil, tarjetas cuadradas, sin desplazamiento propio. */
#stepScreen-6 .cosmetic-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  min-height:0;
  max-height:none;
  overflow:visible;
  padding:0;
}
#stepScreen-6 .cosmetic-item{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(141,229,255,.14);
  border-radius:16px;
  background:radial-gradient(circle at 50% 28%,var(--rarity-color,#254867),#0d1830 78%);
  transition:none;
}
#stepScreen-6 .cosmetic-item:hover{border-color:var(--f2-stroke-strong)}
#stepScreen-6 .cosmetic-item img{position:absolute;inset:0;width:100%;height:100%;padding:6px 6px 22px;object-fit:contain}
#stepScreen-6 .cosmetic-item-name{
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  padding:16px 6px 6px;
  overflow:hidden;
  background:linear-gradient(180deg,transparent,rgba(5,11,26,.92) 58%);
  color:#eaf2ff;
  font-size:.68rem;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* Elegido: anillo cian y marca. */
#stepScreen-6 .cosmetic-item.selected{border-color:var(--f2-cyan);box-shadow:0 0 0 2px var(--f2-cyan),0 10px 26px rgba(56,214,255,.34)}
#stepScreen-6 .cosmetic-item.selected::after{
  content:"";
  position:absolute;
  inset-block-start:6px;
  inset-inline-end:6px;
  inset-inline-start:auto;
  inline-size:22px;
  block-size:22px;
  border-radius:50%;
  background:var(--f2-cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304213a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;
  box-shadow:0 2px 8px rgba(2,8,23,.5);
}
/* Esqueletos mientras llega el catálogo: un solo latido para toda la rejilla. */
#stepScreen-6 .cosmetic-grid[aria-busy="true"]{animation:f2-skeleton 1s ease-in-out infinite alternate}
#stepScreen-6 .f2-skeleton{aspect-ratio:1/1;border:1px solid rgba(141,229,255,.1);border-radius:16px;background:linear-gradient(160deg,#16274a,#0d1830)}
#stepScreen-6 .f2-skeleton-status{position:absolute;inline-size:1px;block-size:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes f2-skeleton{from{opacity:.5}to{opacity:1}}
#stepScreen-6 .cosmetic-grid .ui-list-state{border-radius:16px}

/* Ajustes: pestaña secundaria con grupos claros. */
#stepScreen-6 .config-params-grid{grid-template-columns:minmax(0,1fr);gap:0}
#stepScreen-6 .config-params-grid .form-group{margin-bottom:12px;padding:14px;border:1px solid var(--f2-stroke);border-radius:var(--f2-radius-m);background:rgba(13,24,48,.6)}
#stepScreen-6 .config-params-grid label{color:var(--f2-text-soft);font-size:.72rem;font-weight:800;letter-spacing:.06em}
#stepScreen-6 .config-params-grid :is(.form-input,.form-select){min-height:48px;border-radius:12px;font-size:16px}
#stepScreen-6 .f2-field-note{margin:8px 0 0;color:var(--f2-text-dim);font-size:.72rem;line-height:1.4}
#stepScreen-6 .quiz-pills-row{gap:6px;margin:2px 0 0}
#stepScreen-6 .quiz-pill{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 12px;border:1px solid var(--f2-stroke);border-radius:var(--f2-radius-pill);background:transparent;color:var(--f2-text-soft);font-size:.74rem;font-weight:700}
#stepScreen-6 .quiz-pill.active{border-color:var(--f2-cyan);background:rgba(141,229,255,.14);color:#fff}
#stepScreen-6 .f2-status-preview{display:grid;gap:4px;margin:0}
#stepScreen-6 .f2-status-preview-label{color:var(--f2-text-dim);font-size:.7rem;font-weight:700}
#stepScreen-6 .f2-status-preview .fn-plate-status{margin:0;padding:8px 12px;border-radius:12px;background:rgba(4,10,28,.7);color:#d6e3f7;font-size:.74rem;line-height:1.5;overflow-wrap:anywhere}
#stepScreen-6 .f2-locker-footnote{margin:16px 0 0;color:var(--f2-text-dim);font-size:.7rem;line-height:1.55}

/* ---- Botón fijo ---- */
#stepScreen-6 .f2-locker-cta{
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:6px 10px;
  margin:18px calc(var(--f2-bleed)*-1) 0;
  padding:26px var(--f2-bleed) calc(12px + var(--f2-safe-b));
  border:0;
  background:linear-gradient(180deg,rgba(5,11,26,0),rgba(5,11,26,.94) 36%);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  pointer-events:none;
}
#stepScreen-6 .f2-locker-cta>*{pointer-events:auto}
#stepScreen-6 .f2-locker-back{flex:none;inline-size:56px;min-width:0;min-height:58px;padding:0;border:1px solid var(--f2-stroke-strong);border-radius:16px;background:rgba(13,24,48,.92);color:var(--f2-text-soft)}
#stepScreen-6 .f2-locker-back>.i18n-text{position:absolute;inline-size:1px;block-size:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#stepScreen-6 #btnLaunchFreeTrialStep{inline-size:100%;min-width:0;margin:0;padding-inline:14px;font-size:1rem;letter-spacing:.02em;line-height:1.2}
#stepScreen-6 .f2-locker-next{grid-column:1/-1;margin:0;color:var(--f2-text-soft);font-size:.76rem;font-weight:600;line-height:1.3;text-align:center}
html[dir="rtl"] #stepScreen-6 :is(.f2-locker-back,#btnLaunchFreeTrialStep) :is([data-icon="arrow-left"],[data-icon="arrow-right"])>.bot-icon{scale:-1 1}
/* El aviso por defecto promete «sin registro»: solo se enseñan los estados reales de guardado. */
#stepScreen-6 .editor-save-status{margin:10px 0 0;text-align:center}
#stepScreen-6 .editor-save-status[data-i18n="guest.prepare"]{display:none}

@media(max-width:380px){
  #stepScreen-6{--f2-bleed:12px}
}
@media(max-width:340px){
  /* Móviles muy estrechos: el botón sigue en una línea en los veinte idiomas. */
  #stepScreen-6 #btnLaunchFreeTrialStep{font-size:.84rem}
}
@media(min-width:681px){
  /* Desde aquí el contenedor de la página deja 24 px a cada lado. */
  #stepScreen-6{--f2-bleed:24px}
}
@media(max-height:700px){
  /* Pantallas bajas: el escenario y el botón caben sin desplazar. */
  #stepScreen-6 .f2-locker-sub{display:none}
  #stepScreen-6 .f2-locker-title{margin-bottom:10px}
  #stepScreen-6{--f2-mini-h:112px}
}
@media(min-width:600px){
  #stepScreen-6 .cosmetic-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
}
@media(min-width:960px){
  #stepScreen-6.active{padding-block:20px 0}
  #stepScreen-6 .fn-customizer-right{
    display:grid;
    grid-template-columns:minmax(360px,440px) minmax(0,1fr);
    grid-template-rows:auto auto auto 1fr auto;
    column-gap:36px;
    align-items:start;
  }
  #stepScreen-6 .fn-customizer-right>*{grid-column:2}
  #stepScreen-6 .f2-ministage-anchor{display:none}
  #stepScreen-6 .f2-stage-card{grid-column:1;grid-row:1/-1;position:sticky;top:20px;max-width:none;margin:0}
  #stepScreen-6 .f2-locker-title{font-size:2.3rem;text-align:start}
  #stepScreen-6 .f2-locker-sub{margin-bottom:18px;font-size:.98rem;text-align:start}
  #stepScreen-6 .f2-chiprow{flex-wrap:wrap;margin:0;padding:0;overflow:visible}
  /* Los filtros fluyen junto al botón de búsqueda: la segunda fila empieza en el mismo borde. */
  #stepScreen-6 .f2-filter-row{flex-wrap:wrap;align-items:center}
  #stepScreen-6 .f2-filter-row .f2-chiprow{display:contents}
  #stepScreen-6 .fn-custom-tabs-bar{margin-bottom:12px;scroll-margin-top:24px}
  #stepScreen-6 .f2-picker{grid-row:4;padding-block-end:132px}
  #stepScreen-6 .cosmetic-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
  #stepScreen-6 .cosmetic-item-name{font-size:.74rem}
  #stepScreen-6 .config-params-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
  #stepScreen-6 .f2-status-group{grid-column:1/-1}
  /* Misma celda que el selector: el botón queda fijo abajo mientras se recorre la rejilla. */
  #stepScreen-6 .f2-locker-cta{grid-row:4;align-self:end;inset-block-end:0;margin:0;padding:34px 0 16px}
  #stepScreen-6 .f2-locker-back{inline-size:auto;padding:0 20px}
  #stepScreen-6 .f2-locker-back>.i18n-text{position:static;inline-size:auto;block-size:auto;margin:0;overflow:visible;clip-path:none}
  #stepScreen-6 #btnLaunchFreeTrialStep{font-size:1.06rem}
  #stepScreen-6 .f2-locker-next{text-align:end}
  #stepScreen-6 .editor-save-status{grid-row:5;text-align:end}
}
@media(prefers-reduced-motion:reduce){
  #stepScreen-6 .f2-ministage{transition:none}
  #stepScreen-6 .cosmetic-grid[aria-busy="true"]{animation:none}
}

/* La cabecera con fases es ya lo primero de la taquilla: va en el flujo, sin el hueco ni la
   posición absoluta que el armazón usaba para subirla por encima de la vista previa antigua
   (pisaba el titular en el móvil). */
@media (max-width:900px){
  #view-deploy #stepScreen-6>.fn-ingame-menu-shell.f2-locker{padding-block-start:0}
  #view-deploy #stepScreen-6 .f2-locker .f2-hud{position:static;block-size:auto;margin:0 0 12px;padding:0 4px}
}