/* f2 · Cuenta de Epic del bot y nick del jugador (#stepScreen-4 y #stepScreen-5).
   Usa las variables y piezas de f2.css. Móvil primero (360-430 px): en 360×640 caben, sin
   desplazar, la tarjeta del bot, el titular, los tres micro-pasos y el botón principal.
   El paso de Epic se pinta por estado: f2-epic.js pone data-f2-state en #stepScreen-4
   (handoff, preparing, ready, waiting, linked, idle) y data-f2-error con el motivo del fallo.
   Propiedades lógicas en todo: el árabe se refleja solo. */

/* ============================== Paso de Epic ============================== */
#stepScreen-4 .f2e{display:flex;flex-direction:column;gap:12px;inline-size:100%;max-inline-size:540px;margin-inline:auto;text-align:start}
#stepScreen-4 .f2e>*{min-inline-size:0;margin-block:0}
#stepScreen-4 .f2e-bot{order:1}
#stepScreen-4 .f2e-head{order:2}
#stepScreen-4 #inAppBrowserCard,#stepScreen-4 #credentialRecoveryIntro{order:3}
#stepScreen-4 .new-account-alert-banner,#stepScreen-4 #epicLinkModeTabs{order:4}
#stepScreen-4 #epicBotGuide{order:5}
#stepScreen-4 #linkPane-oauth{order:6}
#stepScreen-4 #linkedAccountCard{order:7}
#stepScreen-4 .f2e-help{order:8}
#stepScreen-4 #linkPane-manual{order:9}
.f2e-sr{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- Su bot: hueco de la tarjeta f2 y, si queda vacío, el aviso con su misma imagen ---- */
#stepScreen-4 .f2e-bot{display:none}
#stepScreen-4[data-f2-bot] .f2e-bot{display:block}
#stepScreen-4 .f2e-bot [data-f2-botcard]:not(:empty)+.epic-bot-ready{display:none!important}
.epic-bot-ready{display:flex;align-items:center;gap:12px;padding-block:8px;padding-inline:8px 14px;border:1px solid var(--f2-stroke);border-radius:var(--f2-radius-m);background:linear-gradient(100deg,rgba(56,214,255,.12),rgba(155,123,255,.07) 60%,rgba(13,24,48,.6)),var(--f2-panel-solid);box-shadow:0 10px 28px rgba(2,8,23,.35)}
.epic-bot-ready-art{position:relative;flex:0 0 64px;inline-size:64px;block-size:64px;overflow:hidden;border-radius:14px;border:1px solid var(--f2-stroke-strong);background:radial-gradient(70% 60% at 50% 18%,rgba(141,229,255,.5),transparent 72%),linear-gradient(180deg,#16335a,#0a1630)}
.epic-bot-ready-art::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:26%;background:linear-gradient(180deg,transparent,rgba(5,11,26,.7))}
/* Busto: la imagen es de cuerpo entero; se amplía desde la cabeza. */
.epic-bot-ready img{inline-size:100%;block-size:100%;object-fit:contain;transform:scale(1.6);transform-origin:50% 4%}
.epic-bot-ready-copy{min-inline-size:0}
.epic-bot-ready h3{margin:0;color:var(--f2-text);font-size:.86rem;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.epic-bot-ready p{margin:2px 0 0;color:var(--f2-text-dim);font-size:.74rem;font-weight:500;line-height:1.35;overflow-wrap:anywhere}

/* ---- Titular con la mascota ---- */
.f2e-head{display:flex;align-items:center;gap:12px}
.f2e-head-art{flex:0 0 auto;display:block}
.f2e-pose{--f2-mascot-h:78px;display:none}
#stepScreen-4 .f2e-pose-link{display:block}
#stepScreen-4[data-f2-state="linked"] .f2e-pose-link{display:none}
/* En espera la mascota es la que asoma sobre el código: el titular gana todo el ancho. */
#stepScreen-4[data-f2-state="waiting"] .f2e-head-art{display:none}
#stepScreen-4[data-f2-state="linked"] .f2e-pose-ok{display:block}
.f2e-head-copy{flex:1 1 auto;min-inline-size:0}
#stepScreen-4 .step-giant-title{max-inline-size:none;margin:0;font-size:clamp(1.34rem,6vw,1.95rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;text-align:start;text-wrap:balance;overflow-wrap:anywhere}
#stepScreen-4 .step-giant-title span{color:inherit}
#stepScreen-4 .f2e-t{display:none}
#stepScreen-4:not([data-trial-journey]) .f2e-t-classic,
#stepScreen-4[data-trial-journey] .f2e-t-intro{display:inline}
#stepScreen-4 .f2e-t-classic>span:last-child{color:var(--f2-cyan)}
#stepScreen-4[data-f2-state="waiting"] .f2e-t,
#stepScreen-4[data-f2-state="linked"] .f2e-t{display:none}
#stepScreen-4[data-f2-state="waiting"] .f2e-t-wait,
#stepScreen-4[data-f2-state="linked"] .f2e-t-linked{display:inline}
#stepScreen-4 .step-short-sub{max-inline-size:none;margin:6px 0 0;color:var(--f2-text-soft);font-size:.86rem;line-height:1.45;text-align:start}
#stepScreen-4[data-trial-journey] .step-short-sub,
#stepScreen-4[data-f2-state="waiting"] .step-short-sub,
#stepScreen-4[data-f2-state="linked"] .step-short-sub{display:none}
.f2e-wait-note,.f2e-linked-sub{display:none;margin:6px 0 0;color:var(--f2-text-soft);font-size:.84rem;font-weight:600;line-height:1.4}
#stepScreen-4[data-f2-state="waiting"] .f2e-wait-note{display:flex;align-items:baseline;gap:8px}
#stepScreen-4[data-f2-state="linked"] .f2e-linked-sub{display:block}
.f2e-live-dot{position:relative;flex:0 0 9px;inline-size:9px;block-size:9px;border-radius:50%;background:var(--f2-mint);transform:translateY(-1px)}
.f2e-live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--f2-mint);animation:f2e-ping 1.6s var(--f2-ease) infinite}
/* Celebración al vincular: la mascota y el titular entran con un salto. */
#stepScreen-4[data-f2-celebrate] .f2e-pose-ok{animation:f2e-pop 520ms var(--f2-ease) both}
#stepScreen-4[data-f2-celebrate] .f2e-t-linked{display:inline-block;animation:f2-rise var(--f2-med) var(--f2-ease) both}
.f2e-confetti-host{position:fixed;inset:0;z-index:10000;pointer-events:none;overflow:hidden}

/* ---- Tres micro-pasos ---- */
#stepScreen-4 .epic-bot-guide{padding:10px 12px;border:1px solid var(--f2-stroke);border-radius:var(--f2-radius-m);background:rgba(13,24,48,.55)}
.epic-guide-steps{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:9px;margin:0;padding:0;list-style:none}
.epic-guide-step{position:relative;display:flex;flex-direction:row;align-items:flex-start;gap:10px;min-inline-size:0}
/* Hilo que une los números: es un único recorrido corto. Baja de cada número al siguiente,
   mida lo que mida el texto del paso. */
.epic-guide-step:not(:last-child)::after{content:"";position:absolute;inset-block:28px -7px;inset-inline-start:12px;inline-size:2px;border-radius:2px;background:rgba(141,229,255,.28)}
.epic-guide-num{position:static;display:grid;place-items:center;flex:0 0 26px;inline-size:26px;block-size:26px;border-radius:50%;background:linear-gradient(180deg,#c3f3ff,#45cdf5);color:#04213a;font-size:.8rem;font-weight:800;line-height:1;box-shadow:0 0 0 3px rgba(56,214,255,.14)}
.epic-guide-num .f2e-num-done{display:none}
.epic-guide-num .bot-icon{inline-size:14px;block-size:14px;stroke-width:3}
.epic-guide-step p{flex:1 1 auto;min-inline-size:0;margin:0;padding-block-start:3px;color:var(--f2-text);font-size:.88rem;font-weight:700;line-height:1.3}
.epic-guide-step strong{font-weight:800}
.epic-guide-step small{display:block;margin-block-start:2px;color:var(--f2-text);font-size:.82rem;font-weight:600;line-height:1.35}
.epic-guide-step-key strong{color:var(--f2-cyan)}
/* Ya ha abierto Epic: el primer paso queda hecho. */
#stepScreen-4[data-f2-state="waiting"] .epic-guide-step:first-child .epic-guide-num{background:var(--f2-mint);box-shadow:0 0 0 3px rgba(121,224,183,.16)}
#stepScreen-4[data-f2-state="waiting"] .epic-guide-step:first-child .f2e-num{display:none}
#stepScreen-4[data-f2-state="waiting"] .epic-guide-step:first-child .f2e-num-done{display:inline-flex}
#stepScreen-4[data-f2-state="waiting"] .epic-guide-step:first-child p{color:var(--f2-text-dim)}
#stepScreen-4[data-f2-state="waiting"] #epicBotGuide{order:7}
#stepScreen-4[data-f2-state="idle"] #epicBotGuide,
#stepScreen-4[data-f2-error] #epicBotGuide{order:7}

/* ---- Enlace con Epic: botón principal, confianza y código ---- */
#stepScreen-4 #linkPane-oauth.active{display:flex;flex-direction:column;gap:10px}
#stepScreen-4 .oauth-polling-box{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;border:0;border-radius:0;background:none;text-align:center}
#stepScreen-4 .oauth-polling-box>*{margin:0;min-inline-size:0}
#stepScreen-4[data-trial-journey] .device-code-header{display:none}
#stepScreen-4 .device-code-header{order:-4;justify-content:flex-start;color:var(--f2-text-soft);font-weight:700}
#stepScreen-4 .device-code-actions{display:block}
#stepScreen-4 .f2-cta{border:0;text-transform:none}
#stepScreen-4 .f2-cta:hover:not(:disabled){background:linear-gradient(180deg,#d5f7ff 0%,#8de5ff 55%,#5ad5f7 100%);box-shadow:var(--f2-glow-cyan),inset 0 1px 0 rgba(255,255,255,.7)}
#stepScreen-4 #epicVerifyLinkBtn{min-block-size:58px;padding-block:12px;font-size:1.06rem;line-height:1.2}
#stepScreen-4 #epicVerifyLinkBtn .bot-icon{inline-size:20px;block-size:20px;stroke-width:2.4}
/* Recorrido clásico: el rótulo lleva la dirección entera («…EPICGAMES.COM/ACTIVATE») y en el
   móvil no debe partirse a mitad de palabra. */
@media (max-width:680px){
  #stepScreen-4:not([data-trial-journey]) #epicVerifyLinkBtn{font-size:.9rem}
  #stepScreen-4:not([data-trial-journey]) #epicVerifyLinkLabel{overflow-wrap:normal;word-break:normal}
}
#epicVerifyLinkBtn[aria-disabled="true"]{opacity:.9;cursor:progress;pointer-events:none}
#epicVerifyLinkBtn[aria-disabled="true"]>[data-icon]{display:none}
#epicVerifyLinkBtn[aria-disabled="true"]::before{content:"";flex:0 0 16px;inline-size:16px;block-size:16px;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
/* Ya abierto: volver a abrirlo sigue a mano, pero deja de ser lo que más pesa. */
#stepScreen-4[data-f2-state="waiting"] #epicVerifyLinkBtn{min-block-size:52px;background:rgba(56,214,255,.1);color:var(--f2-cyan);box-shadow:inset 0 0 0 1.5px var(--f2-stroke-strong);font-size:.94rem}
#stepScreen-4[data-f2-state="waiting"] #epicVerifyLinkBtn::after{display:none}

/* Confianza: un escudo y tres frases ciertas, junto al botón. */
.f2e-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1px 6px;margin:0;padding:0;list-style:none;color:var(--f2-text-soft);font-size:.72rem;font-weight:600;line-height:1.45}
.f2e-trust li{display:inline-flex;align-items:center;gap:5px;min-inline-size:0;text-align:center}
.f2e-trust li:not(:last-child)::after{content:"·";margin-inline-start:1px;color:var(--f2-text-dim);font-weight:800}
.f2e-trust-icon{color:var(--f2-mint)}
.f2e-trust-icon .bot-icon{inline-size:14px;block-size:14px;stroke-width:2.2}

/* En el móvil, una sola línea con el escudo; las otras dos frases siguen para los lectores de
   pantalla y, a la vista, en el desplegable «¿Por qué otra cuenta?», que dice lo mismo. */
@media (max-width:480px){
  .f2e-trust{font-size:.76rem}
  .f2e-trust li:not(:first-child){position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .f2e-trust li:first-child::after{display:none}
}

/* Código: en pequeño mientras no se ha salido a Epic. */
.f2e-code{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 10px;padding:8px 12px;border:1px dashed rgba(141,229,255,.26);border-radius:14px;background:rgba(7,17,42,.45)}
#stepScreen-4 .device-code-label{margin:0;color:var(--f2-text-dim);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
#stepScreen-4 .device-code-value{margin:0;color:var(--f2-text);font-family:inherit;font-size:1.06rem;font-weight:800;letter-spacing:.14em;line-height:1.2;font-variant-numeric:tabular-nums}
#stepScreen-4 .device-code-timer{margin:0!important;color:var(--f2-text-dim)!important;font-size:.74rem!important;font-weight:600;font-variant-numeric:tabular-nums}
.f2e-renewed{display:none;flex:1 0 100%;margin:0;color:var(--f2-mint);font-size:.74rem;font-weight:700}
#stepScreen-4[data-f2-renewed] .f2e-renewed{display:block}
.f2e-peek{display:none}
#stepScreen-4 .device-code-hint{max-inline-size:none;margin:0!important;color:var(--f2-text-dim)!important;font-size:.74rem!important;line-height:1.4}
.f2e-secondary{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 18px}
.f2e-secondary .home-text-action{min-block-size:44px;padding:4px 2px;color:var(--f2-text-soft);font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;text-decoration-color:rgba(141,229,255,.3)}
.f2e-secondary .home-text-action:hover{color:var(--f2-cyan)}
.f2e-secondary .bot-icon{inline-size:14px;block-size:14px}
#stepScreen-4 #btnCancelEpicPolling{color:var(--f2-text-dim)}
/* Antes de salir a Epic no hay «otro código» que probar. */
#stepScreen-4[data-f2-state="ready"] #f2EpicNewCode{display:none}

/* Preparando el código: sin acciones que aún no sirven y con el hueco del código latiendo. */
#stepScreen-4[data-f2-state="preparing"] :is(#btnCopyEpicCode,#f2EpicNewCode,#epicCodeHint,#epicCodeCountdown,.f2e-renewed){display:none!important}
#stepScreen-4[data-f2-state="preparing"] .device-code-value{color:transparent;border-radius:8px;background:linear-gradient(90deg,rgba(141,229,255,.12),rgba(141,229,255,.3),rgba(141,229,255,.12));animation:f2e-breathe 1.2s ease-in-out infinite;user-select:none}

/* ---- Esperando a que confirme en Epic: el código manda ---- */
#stepScreen-4[data-f2-state="waiting"] .f2e-code{order:-3;flex-direction:column;align-items:center;gap:4px;margin-block-start:52px;padding:16px 14px 12px;border:1px solid var(--f2-stroke-strong);border-radius:var(--f2-radius-m);background:radial-gradient(80% 90% at 50% 0%,rgba(56,214,255,.16),transparent 70%),var(--f2-panel-solid);box-shadow:var(--f2-shadow-card)}
#stepScreen-4[data-f2-state="waiting"] .device-code-value{font-size:clamp(1.9rem,9.4vw,2.6rem);letter-spacing:.12em;text-shadow:0 0 22px rgba(56,214,255,.35)}
#stepScreen-4[data-f2-state="waiting"] .f2e-peek{--f2-mascot-h:60px;display:block;position:absolute;inset-block-end:calc(100% - 3px);inset-inline-end:18px;animation:f2e-peek 3.8s ease-in-out infinite}
#stepScreen-4[data-f2-state="waiting"] #epicCodeHint{order:-2;color:var(--f2-text-soft)!important;font-size:.8rem!important}
#stepScreen-4[data-f2-state="waiting"] .device-code-actions{order:-1}
#stepScreen-4[data-f2-state="waiting"] .f2e-trust{order:2}

/* ---- Sin código: un botón que pide otro ---- */
/* Con un código a la vista (también al cambiar una cuenta ya vinculada) no hay dos botones
   principales: el que pide otro código espera a «Cancelar» o «Probar con otro código». */
#stepScreen-4:is([data-f2-state="preparing"],[data-f2-state="ready"],[data-f2-state="waiting"]) #oauthStartBox{display:none}
#stepScreen-4[data-trial-journey] .oauth-center-hero{padding:0;border:0;border-radius:0;background:none}
#stepScreen-4[data-trial-journey] :is(.oauth-shield-badge,.oauth-hero-copy){display:none}
#stepScreen-4[data-trial-journey] .oauth-hero-row{display:block}
#stepScreen-4[data-trial-journey] #btnStartEpicDeviceCode{display:flex;inline-size:100%;min-block-size:58px;font-size:1.02rem}
#stepScreen-4 .oauth-center-hero{margin:0;border-color:var(--f2-stroke);border-radius:var(--f2-radius-m);background:rgba(13,24,48,.6)}
#stepScreen-4 .oauth-shield-badge{color:var(--f2-mint)}
#stepScreen-4 .oauth-shield-badge .bot-icon{inline-size:28px;block-size:28px}
/* Con la cuenta ya vinculada, pedir otro código es una salida discreta (en todos los recorridos). */
#stepScreen-4[data-f2-state="linked"] #linkPane-oauth{order:8}
#stepScreen-4[data-f2-state="linked"] .oauth-center-hero{padding:0;border:0;background:none}
#stepScreen-4[data-f2-state="linked"] :is(.oauth-shield-badge,.oauth-hero-copy){display:none}
#stepScreen-4[data-f2-state="linked"] .oauth-hero-row{display:block;text-align:center}
#stepScreen-4[data-f2-state="linked"] #btnStartEpicDeviceCode{display:inline-flex;inline-size:auto;min-block-size:44px;padding-block:6px;border-color:transparent;background:none;box-shadow:none;color:var(--f2-text-dim);font-size:.76rem;font-weight:600;text-decoration:underline;text-decoration-color:rgba(141,229,255,.3);text-underline-offset:5px}
#stepScreen-4[data-f2-state="linked"] #btnStartEpicDeviceCode:hover{background:none;color:var(--f2-cyan)}
#stepScreen-4[data-f2-state="linked"] #btnStartEpicDeviceCode::after{display:none}
#stepScreen-4[data-f2-state="linked"] .f2e-help{display:none}

/* ---- Fallos, en la propia pantalla ---- */
.f2e-error{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid rgba(255,143,163,.5);border-radius:var(--f2-radius-m);background:linear-gradient(135deg,rgba(255,143,163,.12),rgba(13,24,48,.72));text-align:start}
.f2e-error-icon{display:grid;place-items:center;flex:0 0 34px;inline-size:34px;block-size:34px;border-radius:50%;background:rgba(255,143,163,.16);color:var(--f2-rose)}
.f2e-error-icon .bot-icon{inline-size:18px;block-size:18px;stroke-width:2.2}
.f2e-error-copy{flex:1 1 180px;min-inline-size:0}
.f2e-error strong{display:block;color:var(--f2-text);font-size:.92rem;font-weight:800;line-height:1.25}
.f2e-error p{margin:3px 0 0;color:var(--f2-text-soft);font-size:.8rem;line-height:1.45}
.f2e-error .btn{margin-inline-start:auto}
/* Va debajo del botón que lo resuelve, para no empujarlo fuera de la pantalla. Sin conexión
   el código sigue a la vista y nada funciona hasta que vuelva la red: ese aviso va arriba. */
#stepScreen-4 #f2EpicError{order:1}
#stepScreen-4[data-f2-error="offline"] #f2EpicError{order:-1}
/* Caducar es normal: se avisa en tono de información, no de avería. */
#stepScreen-4[data-f2-error="expired"] .f2e-error{border-color:var(--f2-stroke-strong);background:linear-gradient(135deg,rgba(56,214,255,.12),rgba(13,24,48,.72))}
#stepScreen-4[data-f2-error="expired"] .f2e-error-icon{background:rgba(56,214,255,.16);color:var(--f2-cyan)}

/* ---- Ayuda desplegable ---- */
#stepScreen-4 .f2e-help{display:none;border:1px solid var(--f2-stroke);border-radius:14px;background:rgba(13,24,48,.42);overflow:hidden}
#stepScreen-4[data-trial-journey]:not([data-f2-state="linked"],[data-f2-state="handoff"]) .f2e-help{display:block}
.f2e-help details+details{border-block-start:1px solid var(--f2-stroke)}
#stepScreen-4 .epic-guide-why{margin:0;border:0}
#stepScreen-4 .epic-guide-why summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-block-size:44px;padding:10px 14px;color:var(--f2-cyan);font-size:.84rem;font-weight:700;line-height:1.3;cursor:pointer;list-style:none}
#stepScreen-4 .epic-guide-why summary::-webkit-details-marker{display:none}
#stepScreen-4 .epic-guide-why summary::after{content:"";flex:0 0 8px;inline-size:8px;block-size:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--f2-fast) var(--f2-ease)}
#stepScreen-4 .epic-guide-why[open] summary::after{transform:translateY(2px) rotate(-135deg)}
#stepScreen-4 .epic-guide-why p{margin:0;padding:0 14px 10px;color:var(--f2-text-soft);font-size:.8rem;line-height:1.5}
#stepScreen-4 .epic-guide-why p:last-child{padding-block-end:14px}

/* ---- Cuenta vinculada ---- */
#stepScreen-4 .linked-account-card{margin:0;padding:8px 14px;border:1px solid rgba(121,224,183,.45);border-radius:var(--f2-radius-m);background:linear-gradient(135deg,rgba(121,224,183,.14),rgba(13,24,48,.7))}
#stepScreen-4 .linked-account-header{margin:0;gap:4px 12px}
#stepScreen-4 .badge-verified{display:inline-flex;align-items:center;gap:6px;color:var(--f2-mint);font-size:.82rem;font-weight:800}
#stepScreen-4 .btn-link-reset{min-block-size:44px;color:var(--f2-text-soft);font-size:.78rem}
/* Identificadores y secretos enmascarados: siguen en la página para app.js; no aportan nada a quien juega. */
#stepScreen-4 .linked-account-grid{display:none}

/* ---- Recuperación de credenciales y aviso de la cuenta nueva (recorrido clásico) ---- */
#stepScreen-4 .credential-recovery-intro,#stepScreen-4 .new-account-alert-banner{margin:0;text-align:start}
#stepScreen-4 .new-account-alert-banner{border-color:var(--f2-stroke);border-radius:var(--f2-radius-m);background:rgba(13,24,48,.6)}
#stepScreen-4 .alert-banner-title{color:var(--f2-cyan)}
#stepScreen-4 .segmented-tabs{margin:0}

/* ---- Navegador integrado de TikTok, Instagram, Facebook o Snapchat ---- */
.inapp-handoff-card{display:grid;gap:12px;padding:14px;border:1px solid var(--f2-stroke-strong);border-radius:var(--f2-radius-l);background:radial-gradient(90% 70% at 100% 0%,rgba(56,214,255,.18),transparent 70%),var(--f2-panel-solid);box-shadow:var(--f2-shadow-card);text-align:start}
.inapp-handoff-lead{display:flex;align-items:center;gap:12px}
.inapp-handoff-mascot{--f2-mascot-h:104px;flex:0 0 auto}
.inapp-handoff-copy{min-inline-size:0}
.inapp-handoff-card h3{margin:0 0 6px;color:var(--f2-text);font-size:1.02rem;font-weight:800;line-height:1.22;letter-spacing:-.015em;text-wrap:balance}
.inapp-handoff-card p{margin:0;color:var(--f2-text-soft);font-size:.8rem;line-height:1.45}
.inapp-handoff-ios{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--f2-stroke-strong);border-radius:14px;background:rgba(56,214,255,.1);color:var(--f2-text)!important;font-size:.88rem!important;font-weight:700;line-height:1.3!important}
.inapp-handoff-menu{display:grid;place-items:center;flex:0 0 auto;inline-size:40px;block-size:32px;border-radius:10px;background:linear-gradient(180deg,#c3f3ff,#45cdf5);color:#04213a;animation:f2e-nudge 1.6s ease-in-out infinite}
.inapp-handoff-menu .bot-icon{inline-size:20px;block-size:20px;stroke-width:3}
.inapp-handoff-actions{display:grid;gap:8px}
.inapp-handoff-actions .btn{inline-size:100%;min-block-size:52px}
.inapp-handoff-actions .f2-cta{min-block-size:58px}
/* Sin botón directo (iOS), copiar el enlace es la acción principal. */
#btnInAppOpenBrowser[hidden]+#btnInAppCopyLink{border:0;background:linear-gradient(180deg,#c3f3ff 0%,#6fdfff 55%,#45cdf5 100%);color:#04213a;font-size:1rem;font-weight:800;box-shadow:var(--f2-glow-cyan),inset 0 1px 0 rgba(255,255,255,.7)}
.inapp-handoff-actions .home-text-action{min-block-size:44px;justify-self:center;color:var(--f2-text-dim)}
/* El aviso manda: el titular del paso espera a que la persona elija. */
#stepScreen-4[data-f2-state="handoff"] .f2e-head{display:none}

/* ---- Pie: «Atrás» discreto y el botón de seguir, a todo el ancho al encenderse ---- */
#stepScreen-4 .step-nav-footer,#stepScreen-5 .step-nav-footer{align-items:center;justify-content:flex-start;gap:6px 10px;inline-size:100%;max-inline-size:540px;margin:14px auto 0;padding:0;border:0}
:is(#stepScreen-4,#stepScreen-5) .step-nav-footer>[data-goto-step]{flex:0 0 auto;min-block-size:44px;padding:8px 12px;border-color:transparent;background:none;color:var(--f2-text-dim);font-size:.76rem}
:is(#stepScreen-4,#stepScreen-5) .step-nav-footer>[data-goto-step]:hover{background:rgba(13,24,48,.6);color:var(--f2-text-soft)}
:is(#stepScreen-4,#stepScreen-5) .step-nav-footer>.f2-cta{order:-1;flex:1 1 100%;min-block-size:56px;margin:0;padding-inline:16px;border:0;font-size:.98rem;line-height:1.2}
:is(#stepScreen-4,#stepScreen-5) .step-nav-footer>.f2-cta:hover:not(:disabled){background:linear-gradient(180deg,#d5f7ff 0%,#8de5ff 55%,#5ad5f7 100%);box-shadow:var(--f2-glow-cyan),inset 0 1px 0 rgba(255,255,255,.7)}
:is(#stepScreen-4,#stepScreen-5) .step-nav-footer>.f2-cta:disabled{opacity:1;background:rgba(20,35,63,.9);color:var(--f2-text-dim);filter:none;box-shadow:inset 0 0 0 1px var(--f2-stroke);font-size:.8rem;font-weight:700}
/* En el recorrido de la prueba, el candado del paso de Epic sobra: manda «Abrir Epic». */
#stepScreen-4[data-trial-journey] #btnNextFromEpicLink:disabled{display:none}
#stepScreen-4 #legacyHostingAction{order:-1;flex:1 1 100%;min-block-size:52px;margin:0}
/* En árabe «Atrás» apunta a la derecha y «seguir», a la izquierda. */
html[dir="rtl"] :is(#stepScreen-4,#stepScreen-5) .step-nav-footer :is([data-icon="arrow-left"],[data-icon="arrow-right"])>.bot-icon{scale:-1 1}
#stepScreen-4 #legacyHostingStatus{max-inline-size:540px;margin:10px auto 0;text-align:start}

/* ============================== Nick del jugador ============================== */
#stepScreen-5 .f2n{display:flex;flex-direction:column;gap:12px;inline-size:100%;max-inline-size:540px;margin-inline:auto;text-align:start}
/* El titular va primero en el documento; a la vista, la tarjeta del bot queda encima. */
.f2n-bot{order:1;display:flex;flex-direction:column;gap:8px}
.f2n-head{order:2}
#stepScreen-5 .nick-input-box-3d{order:3}
.f2n-done{align-self:flex-start;max-inline-size:100%;white-space:normal}
.f2n-done .bot-icon{inline-size:14px;block-size:14px;stroke-width:2.6}
.f2n-head{display:flex;align-items:center;gap:12px}
.f2n-mascot{--f2-mascot-h:88px;flex:0 0 auto}
.f2n-head-copy{flex:1 1 auto;min-inline-size:0}
#stepScreen-5 .step-giant-title{max-inline-size:none;margin:0;font-size:clamp(1.34rem,6vw,1.95rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;text-align:start;text-wrap:balance;overflow-wrap:anywhere}
.f2n-why{display:flex;align-items:flex-start;gap:7px;margin:7px 0 0;color:var(--f2-text-soft);font-size:.86rem;font-weight:600;line-height:1.35}
.f2n-why>[data-icon]{color:var(--f2-cyan);margin-block-start:1px}
.f2n-why .bot-icon{inline-size:16px;block-size:16px}
#stepScreen-5 .nick-input-box-3d{max-inline-size:none;margin:0;padding:0;border:0;border-radius:0;background:none}
#stepScreen-5 .nick-box-label{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#stepScreen-5 .input-with-btn{flex-wrap:nowrap;gap:8px}
/* Campo grande: 16 px o más para que iOS no amplíe la página al enfocarlo. */
#stepScreen-5 #ownerEpicUsernameInput{flex:1 1 0;inline-size:auto;min-inline-size:0;min-block-size:58px;padding:12px 16px;border:1.5px solid var(--f2-stroke-strong);border-radius:16px;background:rgba(5,11,26,.72);color:var(--f2-text);font-size:1.12rem;font-weight:700;letter-spacing:.01em;transition:border-color var(--f2-fast) var(--f2-ease),box-shadow var(--f2-fast) var(--f2-ease)}
#stepScreen-5 #ownerEpicUsernameInput::placeholder{color:var(--f2-text-dim);font-size:.94rem;font-weight:500;letter-spacing:0}
#stepScreen-5 #ownerEpicUsernameInput:focus{border-color:var(--f2-cyan-hot);box-shadow:0 0 0 4px rgba(56,214,255,.18)}
#stepScreen-5 .f2n-verify{flex:0 0 auto;min-inline-size:58px;max-inline-size:44%;min-block-size:58px;padding-inline:16px;border:0;border-radius:16px;background:linear-gradient(180deg,#c3f3ff 0%,#6fdfff 55%,#45cdf5 100%);color:#04213a;font-size:.86rem;font-weight:800;box-shadow:var(--f2-glow-cyan),inset 0 1px 0 rgba(255,255,255,.7);transition:transform var(--f2-fast) var(--f2-ease),filter var(--f2-fast) var(--f2-ease)}
#stepScreen-5 .f2n-verify:hover:not(:disabled){background:linear-gradient(180deg,#d5f7ff 0%,#8de5ff 55%,#5ad5f7 100%)}
#stepScreen-5 .f2n-verify:active{transform:translateY(1px) scale(.985)}
#stepScreen-5 .f2n-verify:disabled{opacity:.75;cursor:progress}
/* Verificado: el campo queda en verde y «Verificar» cede el protagonismo al botón de seguir. */
#stepScreen-5[data-f2-verified] #ownerEpicUsernameInput{border-color:var(--f2-mint);box-shadow:0 0 0 4px rgba(121,224,183,.14)}
#stepScreen-5[data-f2-verified] .f2n-verify{background:rgba(121,224,183,.14);color:var(--f2-mint);box-shadow:inset 0 0 0 1.5px rgba(121,224,183,.5)}
#ownerSearchFeedback{min-block-size:24px;margin-block-start:8px;color:var(--f2-text-soft);font-size:.88rem;font-weight:600;line-height:1.4}
#ownerSearchFeedback:empty{min-block-size:0;margin:0}
.f2n-line{display:flex;align-items:flex-start;gap:7px;margin:0}
.f2n-line>[data-icon]{flex:0 0 auto;margin-block-start:2px}
.f2n-line .bot-icon{inline-size:17px;block-size:17px;stroke-width:2.2}
.f2n-line strong{font-weight:800;overflow-wrap:anywhere}
#ownerSearchFeedback[data-state="found"]{color:var(--f2-mint)}
#ownerSearchFeedback[data-state="searching"]{color:var(--f2-cyan)}
#ownerSearchFeedback[data-state="searching"] .bot-icon{animation:bot-icon-rotate 1.1s linear infinite;transform-origin:center}
#ownerSearchFeedback:is([data-state="missing"],[data-state="error"],[data-state="empty"]) .f2n-line{color:var(--f2-rose)}
#ownerSearchFeedback[data-state="choices"] .f2n-line{color:var(--f2-text)}
.f2n-hint{margin:4px 0 0;padding-inline-start:24px;color:var(--f2-text-soft);font-size:.8rem;font-weight:500;line-height:1.45}
#stepScreen-5 .epic-player-results{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-block:10px 0}
#stepScreen-5 .epic-player-results .btn{justify-content:flex-start;min-block-size:48px;padding-inline:14px;border-color:var(--f2-stroke-strong);border-radius:14px;background:rgba(13,24,48,.7);color:var(--f2-text);font-size:.88rem;font-weight:700;text-align:start}
#stepScreen-5 .epic-player-results .btn:hover{border-color:var(--f2-cyan);background:rgba(56,214,255,.1)}
.f2n-help{margin-block-start:6px}
.f2n-help summary{display:inline-flex;align-items:center;gap:8px;min-block-size:44px;color:var(--f2-cyan);font-size:.82rem;font-weight:700;cursor:pointer;list-style:none}
.f2n-help summary::-webkit-details-marker{display:none}
.f2n-help summary::after{content:"";inline-size:7px;block-size:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--f2-fast) var(--f2-ease)}
.f2n-help[open] summary::after{transform:translateY(2px) rotate(-135deg)}
#stepScreen-5 .nick-help{margin:0 0 4px;color:var(--f2-text-soft);font-size:.8rem;line-height:1.5}
#stepScreen-5 #btnNextFromOwnerNick:not(:disabled){animation:f2e-pop 420ms var(--f2-ease) both}

/* ============================== Escritorio ============================== */
@media (min-width:760px){
  #stepScreen-4 .f2e,#stepScreen-5 .f2n{gap:16px}
  .f2e-pose{--f2-mascot-h:112px}
  .f2n-mascot{--f2-mascot-h:120px}
  .f2e-head,.f2n-head{gap:18px}
  #stepScreen-4 .step-giant-title,#stepScreen-5 .step-giant-title{font-size:2.15rem}
  .epic-bot-ready-art{flex-basis:72px;inline-size:72px;block-size:72px}
  .epic-bot-ready h3{font-size:.95rem}
  .epic-bot-ready p{font-size:.8rem}
  #stepScreen-4 .epic-bot-guide{padding:14px 16px}
  .epic-guide-steps{gap:11px}
  .epic-guide-step:not(:last-child)::after{inset-block-end:-9px}
  .epic-guide-step p{font-size:.95rem}
  .epic-guide-step small{font-size:.82rem}
  .f2e-trust{font-size:.78rem}
  #stepScreen-4 #epicVerifyLinkBtn{min-block-size:62px;font-size:1.12rem}
  .inapp-handoff-card{padding:20px}
  .inapp-handoff-mascot{--f2-mascot-h:132px}
  /* Con sitio, «Atrás» y el botón de seguir comparten fila. */
  :is(#stepScreen-4,#stepScreen-5) .step-nav-footer{flex-wrap:nowrap;margin-block-start:18px}
  :is(#stepScreen-4,#stepScreen-5) .step-nav-footer>.f2-cta,#stepScreen-4 #legacyHostingAction{order:0;flex:1 1 auto}
}

/* En el móvil «Verificar» es un botón cuadrado con la lupa (el texto sigue para los lectores
   de pantalla) y el campo conserva su ancho: el nombre y su marcador se leen enteros. */
@media (max-width:480px){
  #stepScreen-5 .f2n-verify{padding-inline:0}
  #stepScreen-5 .f2n-verify .bot-icon{inline-size:22px;block-size:22px;stroke-width:2.4}
  #stepScreen-5 .f2n-verify :is(.i18n-text,.ui-label){position:absolute;inline-size:1px;block-size:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* Pantallas bajas (360×640): se aprieta lo justo para que el botón principal no baje. */
@media (max-width:430px) and (max-height:700px){
  #stepScreen-4 .f2e{gap:10px}
  .f2e-pose{--f2-mascot-h:68px}
  .epic-bot-ready-art{flex-basis:56px;inline-size:56px;block-size:56px}
  .epic-bot-ready p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
  /* Con su bot ya arriba (tarjeta f2 de 72-96 px), la mascota del titular sobra: el titular
     gana el ancho y el botón sube. La de la celebración sí se queda. */
  #stepScreen-4[data-f2-bot]:not([data-f2-state="linked"]) .f2e-head-art{display:none}
  /* Fallo compacto: título y texto cortos, el icono más pequeño. */
  .f2e-error{gap:8px;padding:9px 12px}
  .f2e-error-icon{flex-basis:28px;inline-size:28px;block-size:28px}
  .f2e-error p{font-size:.76rem;line-height:1.4}
}

@keyframes f2e-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}
@keyframes f2e-pop{0%{transform:scale(.86)}60%{transform:scale(1.05)}100%{transform:none}}
@keyframes f2e-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes f2e-peek{0%,100%{transform:translateY(5px)}50%{transform:translateY(0)}}
@keyframes f2e-nudge{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-3px)}}
[dir="rtl"] .inapp-handoff-menu{animation-name:f2e-nudge-rtl}
@keyframes f2e-nudge-rtl{0%,100%{transform:translate(0,0)}50%{transform:translate(-3px,-3px)}}

@media (prefers-reduced-motion:reduce){
  .f2e-live-dot::after,.f2e-peek,.inapp-handoff-menu,#epicVerifyLinkBtn[aria-disabled="true"]::before,
  #stepScreen-4[data-f2-state="preparing"] .device-code-value,#stepScreen-4[data-f2-celebrate] :is(.f2e-pose-ok,.f2e-t-linked),
  #stepScreen-5 #btnNextFromOwnerNick:not(:disabled),#ownerSearchFeedback[data-state="searching"] .bot-icon{animation:none!important}
  #stepScreen-4 .epic-guide-why summary::after,.f2n-help summary::after{transition:none}
}