/* f2 · Armazón del recorrido: fondo global, cabecera compacta, progreso por fases, idioma y avisos.
   Usa las variables y piezas de f2.css. Alcance: solo #view-deploy (embudo), la barra de idioma
   y los avisos (#toastContainer). El panel (#view-control), la tarjeta de pago (#trialPaywallCard)
   y los diálogos de oferta no cambian de aspecto. Las hojas de cada pantalla (f2-<pantalla>.css)
   se cargan después y pueden afinar cualquier regla con la misma especificidad. */

/* ---------------------------------------------------------------- 1. Fondo
   Capa fija con la imagen propia, fundida con --bg por dos velos que dejan ver las estelas
   de luz y mantienen el texto por encima de AA. Va en el ::before de la propia vista (sin
   :has): solo existe mientras se ve el embudo y el panel conserva su fondo. #view-deploy no
   lleva transformaciones, así que position:fixed se refiere a la ventana. El lienzo de puntos
   (#bgRisingDotsCanvas) ya no se inicia y styles.css lo oculta: no cuesta nada en el móvil. */
#view-deploy.active::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(130% 75% at 50% 0%,rgba(5,11,26,.2),rgba(5,11,26,.62) 72%),
    linear-gradient(180deg,rgba(8,13,23,.5) 0%,rgba(8,13,23,.18) 50%,rgba(8,13,23,.55) 100%),
    url("/assets/f2/fondo-vertical-640.webp") 70% 72%/cover no-repeat,
    var(--bg,#080d17)}
@media (min-width:641px) and (max-width:899px){
  #view-deploy.active::before{background:
    radial-gradient(130% 75% at 50% 0%,rgba(5,11,26,.2),rgba(5,11,26,.62) 72%),
    linear-gradient(180deg,rgba(8,13,23,.5) 0%,rgba(8,13,23,.18) 50%,rgba(8,13,23,.55) 100%),
    url("/assets/f2/fondo-vertical-1080.webp") 70% 72%/cover no-repeat,var(--bg,#080d17)}
}
@media (min-width:900px){
  #view-deploy.active::before{background:
    radial-gradient(90% 80% at 40% 10%,rgba(5,11,26,.18),rgba(5,11,26,.66) 78%),
    linear-gradient(180deg,rgba(8,13,23,.5) 0%,rgba(8,13,23,.2) 50%,rgba(8,13,23,.6) 100%),
    url("/assets/f2/fondo-ancho-1280.webp") center bottom/cover no-repeat,var(--bg,#080d17)}
}
@media (min-width:1400px){
  #view-deploy.active::before{background:
    radial-gradient(90% 80% at 40% 10%,rgba(5,11,26,.18),rgba(5,11,26,.66) 78%),
    linear-gradient(180deg,rgba(8,13,23,.5) 0%,rgba(8,13,23,.2) 50%,rgba(8,13,23,.6) 100%),
    url("/assets/f2/fondo-ancho-1920.webp") center bottom/cover no-repeat,var(--bg,#080d17)}
}

/* ---------------------------------------------------------------- 2. Idioma
   Píldora compacta en la esquina final (a la izquierda en árabe): globo + idioma actual +
   flecha. Fuera del flujo mientras se ve el embudo, así no empuja el contenido; en el resto
   de vistas (panel) sigue en su fila de siempre. El texto «Idioma» queda para los lectores
   (el <select> además lleva aria-label). Sin tocar el marcado: el icono de idiomas se
   sustituye por un globo dibujado con máscara. */
.language-bar{display:flex;justify-content:flex-end;align-items:center;max-width:1280px;margin:0 auto;padding:10px 16px 0;font-size:.8rem}
body:has(> #mainContent > #view-deploy.active)>.language-bar{position:absolute;z-index:6;inset-block-start:calc(env(safe-area-inset-top,0px) + 12px);inset-inline-end:max(16px,calc((100vw - 1280px) / 2 + 16px));max-width:none;margin:0;padding:0}
body:has(> #mainContent > #view-deploy.active)>.language-bar+.container{padding-block-start:0}
.language-bar label{position:relative;display:inline-flex;align-items:center;gap:0;min-block-size:34px;padding:0;border:1px solid rgba(141,229,255,.28);border-radius:999px;background:rgba(10,20,40,.78);color:var(--f2-text,#f3f7ff);box-shadow:0 6px 18px rgba(2,8,23,.35);transition:border-color 160ms,background-color 160ms}
.language-bar label:hover{border-color:rgba(141,229,255,.55);background:rgba(16,30,58,.88)}
.language-bar label:focus-within{outline:2px solid var(--f2-cyan,#8de5ff);outline-offset:2px}
.language-bar label>[data-icon]{display:none}
.language-bar label>[data-i18n]{position:absolute;inline-size:1px;block-size:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.language-bar label::before,.language-bar label::after{content:"";position:absolute;inset-block-start:50%;translate:0 -50%;background:currentColor;pointer-events:none;-webkit-mask:var(--f2-lang-icon) center/contain no-repeat;mask:var(--f2-lang-icon) center/contain no-repeat}
.language-bar label::before{inset-inline-start:11px;inline-size:16px;block-size:16px;color:var(--f2-cyan,#8de5ff);--f2-lang-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E")}
.language-bar label::after{inset-inline-end:11px;inline-size:12px;block-size:12px;color:var(--f2-text-dim,#93a7c6);--f2-lang-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
/* Área táctil de 44 px: el select sobresale 5 px por arriba y por abajo de la píldora de 34.
   Los nombres largos (Norsk bokmål, Ελληνικά) se recortan dentro del ancho máximo. */
.language-bar select{min-width:0;max-width:170px;min-height:44px;margin-block:-5px;padding-block:0;padding-inline:34px 30px;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:16px;font-weight:700;line-height:1;text-overflow:ellipsis;cursor:pointer;-webkit-appearance:none;appearance:none;color-scheme:dark}
.language-bar select:hover{border-color:transparent}
.language-bar select:focus-visible{outline:none}
.language-bar select option{background:#0d1830;color:#f3f7ff}
@media (max-width:600px){
  .language-bar{padding:8px 12px 0}
  .language-bar select{max-width:146px;font-size:16px}
  body:has(> #mainContent > #view-deploy.active)>.language-bar{inset-block-start:calc(env(safe-area-inset-top,0px) + 7px);inset-inline-end:12px}
}

/* ---------------------------------------------------------------- 3. Cabecera con fases
   Marca pequeña + tres fases (Crea tu bot → Conéctalo → Juega). El contador «Paso X de N»
   sigue en el DOM: en el recorrido de la prueba solo lo leen los lectores de pantalla; en el
   recorrido clásico (editar, recuperar, bots adicionales) no hay fases y el contador se ve.
   En el móvil solo se rotula la fase en curso, en una línea y a 12,5 px; las demás son barras
   (las terminadas, con su marca de hecho). */
#view-deploy .f2-hud{position:relative;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:14px;margin:0 0 22px;padding:0 0 16px;border-bottom:1px solid rgba(141,229,255,.1);text-align:start}
#view-deploy .f2-hud-brand{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;color:var(--f2-text);font-size:.78rem;font-weight:800;letter-spacing:.08em;line-height:1}
#view-deploy .f2-hud-mark{display:block;inline-size:28px;block-size:28px;object-fit:contain}
#view-deploy .f2-hud .f2-phases{flex:1 1 auto;grid-auto-columns:minmax(0,1fr);min-inline-size:0;max-inline-size:560px;margin-inline-start:auto;gap:10px}
#view-deploy .f2-hud .f2-phase{position:relative;display:block;min-inline-size:0;padding-block-start:13px;color:var(--f2-text-dim);font-size:.8rem;font-weight:800;line-height:1.2;letter-spacing:.01em;text-transform:none;text-align:center}
#view-deploy .f2-hud .f2-phase>span{display:flex;justify-content:center;align-items:center;text-wrap:balance}
#view-deploy .f2-hud .f2-phase::before,#view-deploy .f2-hud .f2-phase::after{content:"";position:absolute;inset-inline:0;inset-block-start:0;block-size:6px;border-radius:999px}
#view-deploy .f2-hud .f2-phase::before{background:rgba(141,229,255,.14)}
#view-deploy .f2-hud .f2-phase::after{background:linear-gradient(90deg,var(--f2-cyan-hot),var(--f2-cyan));transform:scaleX(var(--f2-phase-scale,0));transform-origin:left center}
html[dir="rtl"] #view-deploy .f2-hud .f2-phase::after{background:linear-gradient(270deg,var(--f2-cyan-hot),var(--f2-cyan));transform-origin:right center}
#view-deploy .f2-hud .f2-phase[data-state="current"]{color:var(--f2-text)}
#view-deploy .f2-hud .f2-phase[data-state="current"]::after{box-shadow:0 0 12px rgba(56,214,255,.55)}
#view-deploy .f2-hud .f2-phase[data-state="done"]{color:var(--f2-mint)}
#view-deploy .f2-hud .f2-phase[data-state="done"]::after{background:var(--f2-mint);transform:none}
#view-deploy .f2-hud .f2-phase[data-state="done"]>span::before{content:"";flex:0 0 auto;display:inline-block;inline-size:.36em;block-size:.72em;margin-inline-end:.45em;border:solid currentColor;border-width:0 .16em .16em 0;transform:translateY(-.1em) rotate(45deg)}
/* Contador: solo para lectores en el recorrido de la prueba. */
#view-deploy .f2-hud .step-hud-brand[data-journey-counter="trial"]{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Recorrido clásico: sin fases; marca al principio y contador al final, como siempre. */
#view-deploy[data-f2-journey="classic"] .f2-hud .f2-phases{display:none}
#view-deploy[data-f2-journey="classic"] .f2-hud .step-hud-brand{margin-inline-start:auto}
#view-deploy .f2-hud-note{flex:0 0 auto;padding:5px 10px;border:1px solid rgba(141,229,255,.22);border-radius:999px;color:var(--f2-cyan);font-size:.72rem;font-weight:800;letter-spacing:.04em;white-space:nowrap}
@media (max-width:680px){
  #view-deploy .f2-hud{flex-wrap:wrap;gap:0 10px;margin-block-end:16px;padding-block-end:12px}
  #view-deploy .f2-hud-word{display:none}
  #view-deploy .f2-hud-mark{inline-size:26px;block-size:26px}
  #view-deploy .f2-hud .f2-phases{flex-basis:0;max-inline-size:none;gap:6px}
  #view-deploy .f2-hud .f2-phase{font-size:.78rem;letter-spacing:0}
  #view-deploy .f2-hud .f2-phase>span{white-space:nowrap}
  /* Solo la fase en curso lleva rótulo; puede ocupar el hueco de las vecinas, que no lo
     tienen. La primera se alinea al principio, la última al final y la del medio al centro. */
  #view-deploy .f2-hud .f2-phase:first-child>span{justify-content:flex-start}
  #view-deploy .f2-hud .f2-phase:last-child>span{justify-content:flex-end}
  #view-deploy .f2-hud .f2-phase:not([data-state="current"])>span{visibility:hidden}
  #view-deploy .f2-hud .f2-phase[data-state="done"]>span{visibility:visible;justify-content:center;inline-size:1.1em;margin-inline:auto;overflow:hidden;color:transparent}
  #view-deploy .f2-hud .f2-phase[data-state="done"]>span::before{margin:0;border-color:var(--f2-mint)}
  /* «30 min en el servidor» (pantalla 7) sigue a la vista: una ficha pequeña bajo las fases. */
  #view-deploy #stepScreen-7 .f2-hud::after{content:"";order:2;flex-basis:100%}
  #view-deploy .f2-hud-note{order:3;margin-block-start:10px;margin-inline-start:36px;padding:3px 9px;font-size:.7rem}
}
/* Taquilla (pantalla 6) en una columna: su cabecera vive en la columna de la derecha, que en
   el móvil va después de la vista previa (~650 px más abajo). Se sube a lo alto de la
   pantalla, encima de la vista previa, sin tocar el marcado de la taquilla. */
@media (max-width:900px){
  #view-deploy #stepScreen-6>.fn-ingame-menu-shell{position:relative;padding-block-start:56px}
  #view-deploy #stepScreen-6 .f2-hud{position:absolute;inset-block-start:0;inset-inline:0;block-size:44px;margin:0;padding:0 4px;border:0}
  #view-deploy[data-f2-journey="classic"] #stepScreen-6 .f2-hud .step-hud-brand{white-space:nowrap}
}

/* ---------------------------------------------------------------- 4. Tarjeta y entrada
   Vidrio f2 sin desenfoque de fondo (más barato en móvil y sin bloque contenedor para los
   elementos fijos de cada pantalla). La portada conserva sus márgenes (las reseñas sangran
   con --reviews-bleed). */
#view-deploy .step-stage-box{background:linear-gradient(180deg,rgba(16,29,56,.8) 0%,rgba(9,18,38,.86) 100%);border:1px solid var(--f2-stroke);border-radius:var(--f2-radius-l);box-shadow:var(--f2-shadow-card),inset 0 1px 0 rgba(255,255,255,.05)}
/* Hueco arriba para la píldora del idioma (34 px desde 7 px en el móvil; 46 px desde 12 px
   en escritorio), que ya no ocupa una fila propia. */
#view-deploy .step-screen.active{padding-block-start:calc(env(safe-area-inset-top,0px) + 60px)}
@media (max-width:680px){
  #view-deploy .step-screen.active{padding-block-start:calc(env(safe-area-inset-top,0px) + 48px)}
  #view-deploy .step-stage-box:not(.hero-stage){padding:18px 16px 20px;border-radius:22px}
}
/* Entrada suave al cambiar de pantalla: solo opacidad (200 ms). Sin transformación, los
   elementos fijos de cada pantalla (.f2-sticky) no saltan durante la entrada, y el foco y el
   desplazamiento al inicio no se ven afectados. Sustituye en el embudo a interface-enter de
   motion.css (esta regla es más específica y gana). La portada queda fuera para no retrasar
   su primer pintado. */
@media (prefers-reduced-motion:no-preference){
  #view-deploy .step-screen.active:not(#stepScreen-1)>*{animation:f2-screen-in 200ms var(--f2-ease) backwards}
  #view-deploy .step-screen.active .f2-hud .f2-phase[data-state="current"]::after{animation:f2-phase-grow 700ms var(--f2-ease) 160ms backwards}
}
@keyframes f2-screen-in{from{opacity:0}}
@keyframes f2-phase-grow{from{transform:scaleX(0)}}

/* ---------------------------------------------------------------- 5. Botones del embudo
   Solo CSS, sin tocar el marcado: el CTA dorado de las pantallas (.btn-gold, y el principal
   de la prueba, .btn-primary.btn-lg) toma el aspecto .f2-cta; .btn-glass es el secundario de
   vidrio; lo bloqueado se ve claramente distinto y sin brillo. La tarjeta de pago queda fuera
   (el oro es para pagar y lo lleva su propia hoja). */
#view-deploy :is(.btn.btn-gold,.btn.btn-primary.btn-lg):not(:where(#trialPaywallCard *)){position:relative;overflow:hidden;isolation:isolate;min-block-size:54px;border:0;border-radius:16px;background:linear-gradient(180deg,#c3f3ff 0%,#6fdfff 55%,#45cdf5 100%);color:#04213a;font-weight:800;letter-spacing:.01em;box-shadow:var(--f2-glow-cyan),inset 0 1px 0 rgba(255,255,255,.7);transition:transform var(--f2-fast) var(--f2-ease),box-shadow var(--f2-fast) var(--f2-ease),filter var(--f2-fast) var(--f2-ease);-webkit-tap-highlight-color:transparent}
#view-deploy :is(.btn.btn-gold,.btn.btn-primary.btn-lg):not(:where(#trialPaywallCard *))::after{content:"";position:absolute;z-index:-1;inset-block:0;inset-inline-start:-60%;inline-size:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:f2-shine 4.2s var(--f2-ease) infinite;pointer-events:none}
#view-deploy :is(.btn.btn-gold,.btn.btn-primary.btn-lg):not(:where(#trialPaywallCard *)):hover:not(:disabled){background:linear-gradient(180deg,#d2f7ff 0%,#80e4ff 55%,#52d3f8 100%);border-color:transparent;filter:brightness(1.03);transform:translateY(-1px);box-shadow:var(--f2-glow-cyan),0 14px 36px rgba(56,214,255,.3),inset 0 1px 0 rgba(255,255,255,.75)}
#view-deploy :is(.btn.btn-gold,.btn.btn-primary.btn-lg):not(:where(#trialPaywallCard *)):active:not(:disabled){transform:translateY(1px) scale(.985)}
#view-deploy .btn:focus-visible:not(:where(#trialPaywallCard *)){outline:3px solid #fff;outline-offset:3px}
/* Secundario de vidrio. */
#view-deploy .btn.btn-glass:not(:where(#trialPaywallCard *)){border:1px solid rgba(141,229,255,.2);border-radius:14px;background:rgba(141,229,255,.06);color:var(--f2-text-soft);box-shadow:none}
#view-deploy .btn.btn-glass:not(:where(#trialPaywallCard *)):hover:not(:disabled){border-color:rgba(141,229,255,.42);background:rgba(141,229,255,.11);color:var(--f2-text)}
/* Bloqueado (puerta sin cumplir o desactivado): borde discontinuo, sin degradado ni brillo.
   Un botón ocupado (aria-busy) conserva su aspecto, solo atenuado. */
#view-deploy .btn:is(:disabled,.btn-locked-gate):not([aria-busy="true"]):not(:where(#trialPaywallCard *)){border:1px dashed rgba(141,229,255,.3);background:rgba(15,26,48,.92);color:#a9bad2;box-shadow:none;filter:none;opacity:1;transform:none;cursor:not-allowed}
#view-deploy .btn:is(:disabled,.btn-locked-gate):not([aria-busy="true"]):not(:where(#trialPaywallCard *))::after{display:none}
#view-deploy .btn[aria-busy="true"]:not(:where(#trialPaywallCard *)){opacity:.78;cursor:progress}
#view-deploy .btn[aria-busy="true"]:not(:where(#trialPaywallCard *))::after{display:none}
@media (max-width:680px){
  #view-deploy :is(.btn.btn-gold,.btn.btn-primary.btn-lg):not(:where(#trialPaywallCard *)){min-block-size:56px;font-size:.92rem}
  #view-deploy .btn.btn-glass:not(:where(#trialPaywallCard *)){min-block-size:48px}
}

/* ---------------------------------------------------------------- 6. Avisos (toasts)
   Vidrio oscuro con un icono por tipo: punto cian (informativo), marca verde (hecho) y «!»
   sobre fondo rosado (error), para no confundir un error con una confirmación. En el móvil
   van arriba, de uno en uno; un error que aún se está leyendo no lo sustituye un aviso
   informativo (showToast + BotF2Shell), y todos se cierran al tocarlos. */
.toast{position:relative;padding:13px 16px;padding-inline-start:44px;border:1px solid rgba(141,229,255,.24);border-radius:14px;background:rgba(12,22,44,.96);color:var(--f2-text,#f3f7ff);box-shadow:0 18px 50px rgba(2,8,23,.6);font-weight:600;line-height:1.5}
.toast::before{content:"";position:absolute;inset-inline-start:19px;inset-block-start:calc(13px + .75em - 5px);inline-size:10px;block-size:10px;border-radius:50%;background:var(--f2-cyan,#8de5ff);box-shadow:0 0 0 4px rgba(141,229,255,.14)}
.toast[data-type="success"]{border-color:rgba(121,224,183,.55)}
.toast[data-type="success"]::before{inset-inline-start:14px;inset-block-start:calc(13px + .75em - 10px);inline-size:20px;block-size:20px;background:var(--f2-mint,#79e0b7) 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='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:none}
.toast[data-type="error"]{border-color:rgba(255,143,163,.7);background:linear-gradient(90deg,rgba(88,22,44,.97),rgba(40,18,40,.97))}
.toast[data-type="error"]::before{content:"!";inset-inline-start:14px;inset-block-start:calc(13px + .75em - 10px);display:grid;place-items:center;inline-size:20px;block-size:20px;background:var(--f2-rose,#ff8fa3);box-shadow:none;color:#3a0716;font-size:13px;font-weight:900;line-height:1}
@media (max-width:680px){
  .toast-container{inset-block-start:calc(env(safe-area-inset-top,0px) + 8px);inset-block-end:auto;inset-inline:12px;right:12px;left:12px;bottom:auto;width:auto;max-width:none}
  .toast{font-size:.9rem}
}
@media (prefers-reduced-motion:no-preference){
  .toast{animation:f2-toast-in 200ms var(--f2-ease) both}
}
@keyframes f2-toast-in{from{opacity:0;transform:translateY(8px)}}
@media (max-width:680px) and (prefers-reduced-motion:no-preference){
  .toast{animation-name:f2-toast-down}
}
@keyframes f2-toast-down{from{opacity:0;transform:translateY(-10px)}}

@media (prefers-reduced-motion:reduce){
  #view-deploy .btn:not(:where(#trialPaywallCard *))::after{animation:none!important}
  #view-deploy .btn:not(:where(#trialPaywallCard *)),#view-deploy .btn:not(:where(#trialPaywallCard *)):is(:hover,:active){transition:none;transform:none}
}