/* ProRetro · motion.css
   Capa final (se carga después de main.css). Solo anima transform/opacity
   para que se mantenga fluido en equipos modestos.
   Índice: 1 Fondo ambiental · 2 Superficies · 3 Transiciones de página ·
           4 Navegación (dock y pestañas) · 5 Botones · 6 Tarjetas · 7 Detalle */

@property --m1{syntax:"<color>";inherits:true;initial-value:#4a5a52}
@property --m2{syntax:"<color>";inherits:true;initial-value:#3d4d5a}
@property --m3{syntax:"<color>";inherits:true;initial-value:#52474f}
@property --m4{syntax:"<color>";inherits:true;initial-value:#4a5a52}
@property --m5{syntax:"<color>";inherits:true;initial-value:#3d4d5a}
@property --shade{syntax:"<number>";inherits:true;initial-value:0}

:root{
  --pr-ease:cubic-bezier(.22,.72,.22,1);
  --pr-out:cubic-bezier(.2,.8,.2,1);
  --pr-spring:cubic-bezier(.34,1.5,.5,1);
}

/* ============ 1 · Fondo ambiental (malla de color como Apple Music) ============ */
.app-atmosphere{background:#090c0b!important}
.app-atmosphere::before,.app-atmosphere::after{display:none!important}
.app-stage::before,.app-stage::after{display:none!important}

.mesh{
  position:absolute;inset:0;overflow:hidden;isolation:isolate;
  opacity:0;visibility:hidden;transition:opacity 1.1s var(--pr-ease);
}
.mesh.is-on{opacity:1;visibility:visible}
.mesh.is-top{z-index:2}
.mesh.no-trans{transition:none}
.mesh i{
  position:absolute;display:block;z-index:0;border-radius:50%;opacity:1;
  background:radial-gradient(closest-side,var(--c) 0%,color-mix(in srgb,var(--c) 62%,transparent) 44%,transparent 100%);
  will-change:transform;
}
.mesh i:nth-child(1){--c:var(--m1);left:-24vmax;top:-30vmax;width:90vmax;height:70vmax;animation:mesh-a 34s ease-in-out infinite alternate}
.mesh i:nth-child(2){--c:var(--m2);right:-26vmax;top:-22vmax;width:80vmax;height:76vmax;animation:mesh-b 43s ease-in-out infinite alternate}
.mesh i:nth-child(3){--c:var(--m3);right:-20vmax;bottom:-34vmax;width:92vmax;height:68vmax;animation:mesh-c 51s ease-in-out infinite alternate}
.mesh i:nth-child(4){--c:var(--m4);left:-30vmax;bottom:-28vmax;width:84vmax;height:72vmax;animation:mesh-d 40s ease-in-out infinite alternate}
.mesh i:nth-child(5){--c:var(--m5);left:20vw;top:14vh;width:58vmax;height:46vmax;opacity:.6;animation:mesh-e 57s ease-in-out infinite alternate}
@keyframes mesh-a{to{transform:translate3d(16vw,12vh,0) rotate(42deg) scale(1.2)}}
@keyframes mesh-b{to{transform:translate3d(-14vw,16vh,0) rotate(-36deg) scale(1.15)}}
@keyframes mesh-c{to{transform:translate3d(-18vw,-14vh,0) rotate(30deg) scale(1.22)}}
@keyframes mesh-d{to{transform:translate3d(15vw,-12vh,0) rotate(-44deg) scale(1.12)}}
@keyframes mesh-e{to{transform:translate3d(-10vw,10vh,0) rotate(64deg) scale(1.3)}}

/* Velo de legibilidad y grano (evita bandas en los degradados) */
.mesh::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(130% 100% at 50% 40%,transparent 46%,rgba(0,0,0,.26) 100%),
    linear-gradient(180deg,rgba(6,8,7,.02),rgba(4,6,5,.30));
}
.mesh::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

html.pr-lite .mesh i:nth-child(n+4){display:none}
html.pr-lite .mesh i{animation:none}
body.player-active .mesh i,body.modal-open .mesh i,body.report-modal-open .mesh i{animation-play-state:paused}
body.player-native-fullscreen .app-atmosphere,body.player-fullscreen-fallback .app-atmosphere{visibility:hidden}

/* ============ 2 · Superficies translúcidas: el color se ve a través ============ */
.media-shell{
  background:linear-gradient(180deg,rgba(20,24,22,.44),rgba(10,13,11,.56))!important;
  border-color:rgba(255,255,255,.16)!important;
  box-shadow:0 34px 90px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(0,0,0,.18)!important;
}
.library-sidebar{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.16))!important}
.media-workspace{background:transparent!important}
.media-workspace::before,.media-workspace::after{display:none!important}

/* ============ 3 · Transiciones entre páginas ============ */
@view-transition{navigation:auto}

.workspace-scroll{view-transition-name:page}
@media (min-width:821px){.workspace-scroll{border-radius:0 0 var(--radius-window) 0}}
html[data-vt-morph] .system-hero{view-transition-name:card-hero}

::view-transition-old(page){animation:pr-page-out .16s ease-in both}
::view-transition-new(page){animation:pr-page-in .38s var(--pr-out) .04s both}
@keyframes pr-page-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes pr-page-in{from{opacity:0;transform:translateY(14px)}}

/* Pestañas: el contenido se desliza hacia el lado de la pestaña elegida */
html[data-vt=tab-fwd]::view-transition-old(page){animation-name:pr-slide-out-l}
html[data-vt=tab-fwd]::view-transition-new(page){animation-name:pr-slide-in-r}
html[data-vt=tab-back]::view-transition-old(page){animation-name:pr-slide-out-r}
html[data-vt=tab-back]::view-transition-new(page){animation-name:pr-slide-in-l}
@keyframes pr-slide-out-l{to{opacity:0;transform:translateX(-44px)}}
@keyframes pr-slide-in-r{from{opacity:0;transform:translateX(52px)}}
@keyframes pr-slide-out-r{to{opacity:0;transform:translateX(44px)}}
@keyframes pr-slide-in-l{from{opacity:0;transform:translateX(-52px)}}

/* Entrar a un detalle se siente como acercarse; volver, como alejarse */
html[data-vt=deeper]::view-transition-old(page){animation-name:pr-zoom-away}
html[data-vt=deeper]::view-transition-new(page){animation-name:pr-zoom-in}
html[data-vt=shallower]::view-transition-old(page){animation-name:pr-zoom-in-out}
html[data-vt=shallower]::view-transition-new(page){animation-name:pr-zoom-back}
@keyframes pr-zoom-away{to{opacity:0;transform:scale(.97)}}
@keyframes pr-zoom-in{from{opacity:0;transform:scale(1.03)}}
@keyframes pr-zoom-in-out{to{opacity:0;transform:scale(1.03)}}
@keyframes pr-zoom-back{from{opacity:0;transform:scale(.97)}}

/* Ficha de consola → encabezado de la consola */
::view-transition-group(card-hero){animation-duration:.62s;animation-timing-function:var(--pr-out);border-radius:18px;overflow:clip}
::view-transition-old(card-hero),::view-transition-new(card-hero){width:100%;height:100%;object-fit:cover}

/* Sin View Transitions (Firefox) y al entrar o salir de /game/: entrada y salida con CSS */
html.pr-enter .workspace-scroll{animation:pr-enter .5s var(--pr-out) both}
html.pr-leave .workspace-scroll{animation:pr-leave .17s ease-in both}
@keyframes pr-enter{from{opacity:0;transform:translateY(14px)}}
@keyframes pr-leave{to{opacity:0;transform:translateY(-8px)}}

/* ============ 4 · Navegación: el indicador se desliza entre secciones ============ */
/* El estado activo sale de <html data-section>, así existe desde el primer pintado. */
html[data-section=home] .quick-dock a[data-nav-group=home],
html[data-section=games] .quick-dock a[data-nav-group=games],
html[data-section=emulators] .quick-dock a[data-nav-group=emulators],
html[data-section=downloads] .quick-dock a[data-nav-group=downloads],
html[data-section=account] .quick-dock a[data-nav-group=account]{
  background:#f6f7f5;color:#161916;box-shadow:0 8px 22px rgba(0,0,0,.30),0 0 0 1px rgba(255,255,255,.16);
  view-transition-name:dock-pill;
}
.topbar-tab.is-active{view-transition-name:tab-pill}
::view-transition-group(dock-pill),::view-transition-group(tab-pill){animation-duration:.5s;animation-timing-function:var(--pr-spring)}
.quick-dock a{transition:background .22s var(--pr-ease),color .22s var(--pr-ease),transform .3s var(--pr-spring)}
.quick-dock a:active{transform:scale(.88)!important}
.topbar-tab{transition:background .22s var(--pr-ease),color .22s var(--pr-ease),transform .3s var(--pr-spring)}
.topbar-tab:active{transform:scale(.95)}

/* ============ 5 · Botones ============ */
.button,.filter-chip,.pagination-page,.pagination-arrow,.history-button,.favorite-detail,.community-discord{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .32s var(--pr-spring),background-color .22s var(--pr-ease),color .22s var(--pr-ease),border-color .22s var(--pr-ease),box-shadow .3s var(--pr-ease),opacity .2s ease;
}
.button:active,.filter-chip:active,.pagination-page:active,.pagination-arrow:active,.history-button:active,.favorite-detail:active,.community-discord:active{
  transform:scale(.94)!important;transition-duration:.09s;
}
.button:hover,.favorite-detail:hover,.community-discord:hover{transform:translateY(-2px)}
.button.primary:hover,.button.accent:hover{box-shadow:0 12px 30px -8px color-mix(in srgb,var(--ambient-a,#fff) 85%,transparent),0 0 0 1px rgba(255,255,255,.5)}

/* Onda desde el punto exacto del toque */
.button::after,.filter-chip::after,.pagination-page::after,.pagination-arrow::after,.history-button::after,.favorite-detail::after,.community-discord::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:0;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),rgba(255,255,255,.42) 0,rgba(255,255,255,.18) 36%,transparent 62%);
  transform:scale(.2);
}
.button.primary::after,.button.accent::after,.favorite-detail.is-favorite::after,.pagination-page.is-active::after{
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),rgba(20,26,22,.22) 0,rgba(20,26,22,.08) 40%,transparent 64%);
}
.is-rippling::after{animation:pr-ripple .62s var(--pr-out)}
@keyframes pr-ripple{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(2.6)}}

/* Selección: los chips y el favorito responden con un pequeño rebote */
.filter-chip.is-active{animation:pr-pop .42s var(--pr-spring)}
html:not(.pr-enter) .favorite-detail.is-favorite .favorite-symbol{animation:pr-heart .6s var(--pr-spring)}
@keyframes pr-pop{0%{transform:scale(.9)}60%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes pr-heart{0%{transform:translateY(-.5px) scale(.5) rotate(-18deg)}55%{transform:translateY(-.5px) scale(1.35) rotate(8deg)}100%{transform:translateY(-.5px) scale(1) rotate(0)}}

/* ============ 6 · Tarjetas ============ */
.game-card,.system-card{
  transition:transform .34s var(--pr-out),border-color .22s ease,box-shadow .3s var(--pr-out);
}
.game-card:active,.system-card:active{
  transform:perspective(900px) translateY(-1px) scale(.968)!important;transition-duration:.09s;
}
/* Foco de luz que sigue al puntero, con el brillo del color de la consola */
.game-art.has-artwork::before,.system-card-bg.has-artwork::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,38%),rgba(255,255,255,.24),color-mix(in srgb,var(--a,#fff) 22%,transparent) 42%,transparent 68%);
  transition:opacity .3s ease;animation:none;transform:none;
}
.game-card:hover .game-art::before,.system-card:hover .system-card-bg::before{opacity:1}
/* Teclado o mando: anillo que pulsa una vez al seleccionar */
.game-card:focus-visible,.system-card:focus-visible,.game-card.gamepad-hover,.system-card.gamepad-hover{animation:pr-ring .8s var(--pr-out)}
@keyframes pr-ring{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--a,#fff) 70%,transparent),0 18px 38px rgba(0,0,0,.36)}
  100%{box-shadow:0 0 0 14px transparent,0 18px 38px rgba(0,0,0,.36)}
}
.game-open,.system-arrow{transition:opacity .3s ease,transform .38s var(--pr-out)}

/* ============ 7 · Detalle de juego y consola: entrada orquestada ============ */
.game-hero-left>*,.system-hero-inner>*{animation:pr-rise .7s var(--pr-out) both}
.game-hero-left>:nth-child(2),.system-hero-inner>:nth-child(2){animation-delay:.08s}
.game-hero-left>:nth-child(3),.system-hero-inner>:nth-child(3){animation-delay:.16s}
.game-hero-left>:nth-child(4),.system-hero-inner>:nth-child(4){animation-delay:.24s}
@keyframes pr-rise{from{opacity:0;transform:translateY(16px)}}

/* ============ Accesibilidad ============ */
@media (prefers-reduced-motion:reduce){
  .mesh i{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  html.pr-enter .workspace-scroll,.game-hero-left>*,.system-hero-inner>*{animation:none}
  .is-rippling::after{animation:none}
}
@media (hover:none){
  .game-card:hover .game-art::before,.system-card:hover .system-card-bg::before{opacity:0}
}

/* ============ 8 · Dock, encabezado y buscador: cristal translúcido ============ */
.quick-dock{
  background:rgba(14,18,16,.34)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.13)!important;
}
/* El botón de ayuda ya no lleva círculo oscuro: igual que el resto de iconos */
.quick-dock .report-dock-button,.report-dock-button{
  background:transparent!important;border:0!important;box-shadow:none!important;color:#c4cac5;
}
.quick-dock .report-dock-button:hover,.quick-dock .report-dock-button:focus-visible{background:rgba(255,255,255,.1)!important;color:#fff}

.site-header{
  background:linear-gradient(180deg,rgba(6,9,7,.30),rgba(6,9,7,.18))!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
}
.catalog-toolbar{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.05))!important;
  border:1px solid rgba(255,255,255,.17)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:0 12px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.14);
}
.search-box{background:rgba(255,255,255,.13)!important;border:1px solid rgba(255,255,255,.15);transition:background .2s ease,border-color .2s ease,box-shadow .25s ease}
.search-box:focus-within{background:rgba(255,255,255,.19)!important;border-color:rgba(255,255,255,.36);box-shadow:0 0 0 4px color-mix(in srgb,var(--ambient-a,#fff) 30%,transparent)}
.search-box input{color:#fff}
.search-box input::placeholder{color:rgba(255,255,255,.66)}
.catalog-toolbar .filter-chip{background:rgba(255,255,255,.09)}
.catalog-toolbar .filter-chip.is-active{background:rgba(255,255,255,.24);color:#fff}
@media (max-width:820px){
  .site-header{
    background:linear-gradient(180deg,rgba(6,9,7,.46),rgba(6,9,7,.30))!important;
    -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  }
}

/* ============ 9 · Paneles emergentes: cristal con el color del fondo ============ */
.description-modal-backdrop,.report-modal-backdrop{
  background:radial-gradient(90% 75% at 50% 35%,color-mix(in srgb,var(--ambient-a,#6c7570) 22%,rgba(4,6,5,.58)),rgba(3,5,4,.84))!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.15) brightness(.72)!important;backdrop-filter:blur(12px) saturate(1.15) brightness(.72)!important;
}
.description-dialog,.report-dialog,.profile-edit-dialog,.account-auth-dialog{
  background:
    radial-gradient(120% 85% at 0% 0%,color-mix(in srgb,var(--ambient-a,#7d8580) 30%,transparent),transparent 62%),
    radial-gradient(110% 85% at 100% 100%,color-mix(in srgb,var(--ambient-b,#4c544f) 26%,transparent),transparent 60%),
    linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 44%),
    rgba(16,20,18,.78)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 44px 120px rgba(0,0,0,.58),0 0 0 1px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.22),0 0 100px -30px color-mix(in srgb,var(--ambient-a,#7d8580) 75%,transparent)!important;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
}
html.pr-lite .description-dialog,html.pr-lite .report-dialog,html.pr-lite .profile-edit-dialog,html.pr-lite .account-auth-dialog{
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
html.pr-lite .description-modal-backdrop,html.pr-lite .report-modal-backdrop{
  -webkit-backdrop-filter:blur(6px) brightness(.7)!important;backdrop-filter:blur(6px) brightness(.7)!important;
}

.description-modal.is-open .description-dialog,
.report-modal:not([hidden]) .report-dialog{animation:pr-dialog-in .46s var(--pr-spring) both}
.report-modal:not([hidden]) .report-modal-backdrop{animation:pr-fade-in .3s ease both}
@keyframes pr-dialog-in{from{opacity:0;transform:translateY(22px) scale(.95)}}
@keyframes pr-fade-in{from{opacity:0}}
@keyframes pr-sheet-up{from{opacity:.4;transform:translateY(100%)}}

.description-dialog-head,.report-dialog-head{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:1px solid rgba(255,255,255,.09)!important}
.description-dialog-head span,.report-topline{color:rgba(255,255,255,.72)!important;letter-spacing:.14em}
.description-dialog-head h2,.report-dialog h2{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.description-dialog-body{color:#d3d9d5}
.description-close,.report-close{
  width:38px!important;height:38px!important;display:grid;place-items:center;padding:0;border-radius:50%!important;
  background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.16)!important;color:#fff!important;
  transition:background .2s ease,transform .35s var(--pr-spring)!important;
}
.description-close:hover,.report-close:hover{background:rgba(255,255,255,.2)!important;transform:rotate(90deg)}
.description-close:active,.report-close:active{transform:scale(.9)!important}

/* Centro de ayuda */
.help-shortcuts button{
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04))!important;
  border:1px solid rgba(255,255,255,.14)!important;border-radius:16px!important;color:#fff;
  transition:transform .3s var(--pr-out),border-color .2s ease,box-shadow .3s ease!important;
}
.help-shortcuts button:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.34)!important;box-shadow:0 16px 34px -14px color-mix(in srgb,var(--ambient-a,#fff) 80%,transparent)}
.help-shortcuts button:active{transform:scale(.97)}
.help-shortcuts button span{color:rgba(255,255,255,.66)}
.report-type{
  background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:14px!important;
  transition:transform .28s var(--pr-out),background .2s ease,border-color .2s ease,box-shadow .3s ease!important;
}
.report-type:hover{background:rgba(255,255,255,.12)!important;transform:translateY(-2px)}
.report-type:has(input:checked){
  background:linear-gradient(160deg,color-mix(in srgb,var(--ambient-a,#fff) 42%,rgba(255,255,255,.12)),rgba(255,255,255,.06))!important;
  border-color:rgba(255,255,255,.5)!important;box-shadow:0 12px 30px -12px color-mix(in srgb,var(--ambient-a,#fff) 85%,transparent);
}
.report-type-icon{background:rgba(255,255,255,.14);border-radius:7px;padding:2px 6px;color:#fff}
.report-step{background:rgba(255,255,255,.13)!important;border:1px solid rgba(255,255,255,.14)}
.report-field input,.report-field textarea{
  background:rgba(0,0,0,.24)!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:14px!important;color:#fff;
  transition:border-color .2s ease,box-shadow .25s ease,background .2s ease;
}
.report-field input::placeholder,.report-field textarea::placeholder{color:rgba(255,255,255,.5)}
.report-field input:focus,.report-field textarea:focus{outline:none;background:rgba(0,0,0,.32)!important;border-color:rgba(255,255,255,.4)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--ambient-a,#fff) 30%,transparent)}
.report-cancel{background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.14)!important;color:#fff!important}
.report-submit{background:linear-gradient(135deg,#fff,#dde5df)!important;color:#121614!important;box-shadow:0 12px 30px -10px color-mix(in srgb,var(--ambient-a,#fff) 85%,transparent)}
.report-cancel,.report-submit{transition:transform .3s var(--pr-spring),background .2s ease}
.report-cancel:active,.report-submit:active{transform:scale(.95)}
@media (max-width:620px){
  .help-shortcuts{display:grid;grid-template-columns:1fr;gap:8px}
  .report-modal{align-items:end;padding:0}
  .report-dialog{width:100%!important;max-height:92dvh!important;border-radius:26px 26px 0 0!important}
  .report-modal:not([hidden]) .report-dialog{animation-name:pr-sheet-up;animation-timing-function:var(--pr-out);animation-duration:.45s}
}

/* ============ 10 · Editor de perfil ============ */
body .profile-edit-modal{padding:24px}
body .profile-edit-dialog{
  display:flex!important;flex-direction:column;width:min(940px,calc(100vw - 48px))!important;max-width:none!important;
  height:min(720px,calc(100dvh - 48px));max-height:none!important;overflow:hidden!important;border-radius:28px!important;padding:0!important;
}
body .profile-edit-dialog .description-dialog-head{flex:none;align-items:center;padding:20px 26px 16px!important}
body .profile-edit-dialog .description-dialog-head h2{font-size:26px;letter-spacing:-.035em}
body .profile-edit-dialog .description-dialog-head span{font-size:11px;font-weight:800}
body .profile-edit-dialog .description-dialog-body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:0!important;overflow:hidden!important}
body .profile-edit-form{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0;gap:0!important;margin:0}

/* Un único scroll (el de la zona de edición) */
body .profile-character-editor{
  flex:1 1 auto;min-height:0;display:grid!important;grid-template-columns:270px minmax(0,1fr)!important;gap:20px!important;
  align-items:start;padding:20px 26px!important;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent;
}
body .profile-edit-dialog .profile-avatar-preview-panel{
  position:sticky!important;top:0!important;display:grid!important;justify-items:center;gap:14px!important;padding:20px 16px!important;text-align:center;
  border:1px solid rgba(255,255,255,.14)!important;border-radius:22px!important;
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--ambient-a,#5865f2) 38%,transparent),transparent 70%),linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px -22px rgba(0,0,0,.6);
}
body .profile-avatar-preview-panel strong{font-size:15px;color:#fff}
body .profile-avatar-preview-panel span{font-size:12px;line-height:1.5;color:rgba(255,255,255,.66)}
body .profile-character-controls{min-width:0;display:grid;gap:14px}

body .profile-edit-dialog .profile-editor-tabs{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important;margin:0!important;padding:4px!important;
  border:1px solid rgba(255,255,255,.12)!important;border-radius:16px!important;background:rgba(0,0,0,.26)!important;position:static!important;
}
body .profile-edit-dialog .profile-editor-tab{
  min-width:0!important;min-height:40px!important;padding:0 8px!important;border:0;border-radius:12px!important;background:transparent!important;
  color:rgba(255,255,255,.7)!important;font-size:12px!important;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  transition:background .22s ease,color .22s ease,transform .3s var(--pr-spring);
}
body .profile-edit-dialog .profile-editor-tab:hover{color:#fff!important;background:rgba(255,255,255,.08)!important}
body .profile-edit-dialog .profile-editor-tab.is-active{
  color:#fff!important;background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.12))!important;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3)!important;
}
body .profile-edit-dialog .profile-editor-tab:active{transform:scale(.95)}
body .profile-editor-pane{display:grid;gap:12px;min-width:0}
body .profile-editor-pane.is-active{animation:pr-rise .35s var(--pr-out) both}

body .profile-edit-dialog .profile-editor-section{
  padding:16px!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:20px!important;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025))!important;
}
body .profile-editor-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px!important}
body .profile-edit-dialog .profile-editor-label span{font-size:11px!important;font-weight:800;letter-spacing:.14em;color:#fff}
body .profile-edit-dialog .profile-editor-label small{font-size:12px!important;color:rgba(255,255,255,.58);text-align:right}

body .profile-character-grid{
  grid-template-columns:repeat(auto-fill,minmax(82px,1fr))!important;gap:10px!important;max-height:none!important;overflow:visible!important;padding:2px!important;
}
body .profile-character-option{
  border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  transition:transform .28s var(--pr-spring),background .2s ease,border-color .2s ease,box-shadow .25s ease;
}
body .profile-character-option:hover{transform:translateY(-3px) scale(1.03);background:rgba(255,255,255,.1)}
body .profile-character-option.is-selected{border-color:#fff;background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.08));box-shadow:0 0 0 3px rgba(255,255,255,.2),0 14px 30px -12px color-mix(in srgb,var(--ambient-a,#fff) 80%,transparent)}
body .profile-character-option:active{transform:scale(.94)}

body .profile-color-row{grid-template-columns:1fr!important;gap:12px!important}
body .profile-color-palette{
  display:grid!important;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:10px!important;padding:14px!important;
  border:1px solid rgba(255,255,255,.1)!important;border-radius:16px!important;background:rgba(0,0,0,.2)!important;
}
body .profile-banner-swatches,body .profile-frame-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:10px;padding:2px}
body .profile-color-swatch{width:100%!important;height:auto!important;aspect-ratio:1;max-width:46px;border:2px solid rgba(255,255,255,.14);border-radius:12px;justify-self:center;transition:transform .25s var(--pr-spring),border-color .2s ease,box-shadow .25s ease}
body .profile-color-swatch:hover{transform:scale(1.12)}
body .profile-color-swatch:active{transform:scale(.92)}
body .profile-color-swatch.is-selected{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.24),0 8px 18px -6px var(--swatch)}
body .profile-color-custom{
  display:grid;grid-template-columns:52px minmax(0,1fr)!important;gap:14px!important;align-items:center;padding:12px 14px!important;
  border:1px solid rgba(255,255,255,.1)!important;border-radius:16px!important;background:rgba(255,255,255,.05)!important;
}
body .profile-color-picker-wrap{width:52px!important;height:52px!important;border-radius:14px!important;border:2px solid rgba(255,255,255,.22)!important}
body .profile-color-custom-copy strong{font-size:13px!important;color:#fff}
body .profile-color-custom-copy small{font-size:12px!important;color:rgba(255,255,255,.58)}
body .profile-color-hex{height:36px!important;margin-top:6px;padding:0 12px!important;border-radius:11px!important;font-size:13px!important;letter-spacing:.06em;background:rgba(0,0,0,.28)!important;border:1px solid rgba(255,255,255,.14)!important}
body .profile-color-hex:focus{outline:none;border-color:rgba(255,255,255,.45)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--ambient-a,#fff) 30%,transparent)}

body .profile-frame-color-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
body .profile-frame-color-block{display:grid;gap:10px;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(0,0,0,.18);min-width:0}
body .profile-frame-color-block>strong{font-size:13px;color:#fff}

body .profile-transform-grid{grid-template-columns:1fr!important;gap:10px!important}
body .profile-transform-control{padding:14px!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:16px!important;background:rgba(0,0,0,.18)!important}
body .profile-transform-head span{font-size:13px!important;color:#fff}
body .profile-transform-head output{font-size:13px!important;color:rgba(255,255,255,.7)}
body .profile-transform-control input[type=range]{height:6px!important;accent-color:#fff}
body .profile-transform-reset{margin-top:12px;min-height:40px!important;padding:0 16px!important;border-radius:12px!important;font-size:12px!important;background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.14)!important;color:#fff!important}
body .profile-transform-reset:hover{background:rgba(255,255,255,.18)!important}

body .profile-edit-dialog .account-form-message{margin:0 26px 8px}
body .profile-edit-dialog .profile-editor-actions{
  position:static!important;flex:none;display:flex!important;justify-content:flex-end;gap:10px!important;margin:0!important;
  padding:14px 26px calc(14px + env(safe-area-inset-bottom))!important;border-top:1px solid rgba(255,255,255,.1)!important;
  background:rgba(8,11,9,.34)!important;
}
body .profile-edit-dialog .profile-editor-actions .button{min-height:46px!important;min-width:130px;padding:0 22px;font-size:14px!important;border-radius:14px}
body .profile-edit-dialog .profile-editor-actions .button.primary{min-width:190px}

@media (max-width:980px) and (min-width:821px){
  body .profile-character-editor{grid-template-columns:220px minmax(0,1fr)!important;gap:16px!important}
}

/* Móvil: hoja inferior con vista previa fija arriba */
@media (max-width:820px){
  body .profile-edit-modal{padding:0;align-items:end}
  body .profile-edit-dialog{width:100%!important;height:min(94dvh,780px);border-radius:26px 26px 0 0!important;border-bottom:0!important}
  body .profile-edit-modal.is-open .profile-edit-dialog{animation:pr-sheet-up .45s var(--pr-out) both}
  body .profile-edit-dialog .description-dialog-head{padding:16px 18px 12px!important}
  body .profile-edit-dialog .description-dialog-head h2{font-size:22px}
  body .profile-character-editor{display:flex!important;flex-direction:column;gap:12px!important;padding:0 14px 14px!important}
  body .profile-edit-dialog .profile-avatar-preview-panel{
    position:sticky!important;top:0!important;z-index:6;display:grid!important;grid-template-columns:74px minmax(0,1fr)!important;justify-items:start;align-items:center;gap:14px!important;
    margin:0 -14px;padding:12px 14px!important;border-radius:0!important;border-width:0 0 1px 0!important;text-align:left;
    background:linear-gradient(180deg,rgba(14,18,16,.82),rgba(14,18,16,.66))!important;
    -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:none;
  }
  body .profile-avatar-preview-panel .profile-avatar-preview{width:74px!important;height:74px!important}
  body .profile-avatar-preview-panel span{font-size:12px}
  body .profile-character-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
  body .profile-edit-dialog .profile-editor-section{padding:14px!important}
  body .profile-edit-dialog .profile-editor-label small{display:none}
  body .profile-frame-color-grid{grid-template-columns:1fr}
  body .profile-edit-dialog .profile-editor-actions{display:grid!important;grid-template-columns:1fr 1.7fr;gap:10px!important;padding:12px 14px calc(12px + env(safe-area-inset-bottom))!important}
  body .profile-edit-dialog .profile-editor-actions .button{min-width:0;width:100%;min-height:48px!important}
}
@media (max-width:380px){
  body .profile-character-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* Ajustes finos del editor (especificidad frente a reglas antiguas) */
body .profile-edit-dialog .description-dialog-head{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:1px solid rgba(255,255,255,.1)!important}
body .profile-edit-dialog .description-dialog-head span{color:rgba(255,255,255,.72)!important}
body .profile-edit-dialog .profile-editor-actions .button.subtle{background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.17)!important;color:#fff!important}
body .profile-edit-dialog .profile-editor-actions .button.subtle:hover{background:rgba(255,255,255,.18)!important}
@media (max-width:820px){
  body .profile-edit-dialog .profile-editor-actions{display:grid!important;grid-template-columns:1fr 1.7fr!important}
  body .profile-edit-dialog .profile-avatar-preview-panel{background:linear-gradient(180deg,rgba(14,18,16,.58),rgba(14,18,16,.42))!important}
}
body .profile-character-controls{width:100%;max-width:100%;align-self:stretch}
body .profile-frame-custom{
  grid-template-columns:44px minmax(0,1fr) auto!important;gap:12px!important;min-height:56px!important;padding:8px 12px!important;
  border:1px solid rgba(255,255,255,.1)!important;border-radius:14px!important;background:rgba(255,255,255,.05)!important;cursor:pointer;
}
body .profile-frame-custom input{width:44px!important;height:40px!important;border-radius:10px;cursor:pointer}
body .profile-frame-custom span{font-size:13px!important;color:#fff}
body .profile-frame-custom b{font-size:12px!important;letter-spacing:.06em;color:rgba(255,255,255,.7)}
body .profile-frame-swatches,body .profile-banner-swatches{margin-bottom:2px}
/* Los iconos del dock no necesitan su propio desenfoque (el dock ya lo aplica) */
.quick-dock .report-dock-button,.quick-dock a{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.report-type .report-type-icon{display:inline-flex!important;width:auto!important;min-width:0;justify-self:start;align-self:start;padding:2px 7px;font-size:10px;letter-spacing:.06em}

/* ============ Correcciones v2.1 ============ */
/* main.css fuerza "backdrop-filter:none" en el dock (ajuste de rendimiento antiguo): se anula solo para el dock */
.quick-dock{-webkit-backdrop-filter:blur(18px) saturate(1.5)!important;backdrop-filter:blur(18px) saturate(1.5)!important}

/* Editor: las filas ya no se reparten el alto sobrante (las pestañas se deformaban) */
body .profile-character-controls{align-content:start!important;grid-auto-rows:max-content}

/* Color personalizado del banner (tenía el selector nativo sin estilo) */
body .profile-banner-custom{
  display:grid!important;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 14px;cursor:pointer;
  border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.04);transition:background .2s ease,border-color .2s ease;
}
body .profile-banner-custom:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
body .profile-banner-custom input[type=color]{width:52px;height:44px;padding:0;border:2px solid rgba(255,255,255,.22);border-radius:12px;background:none;cursor:pointer}
body .profile-banner-custom input[type=color]::-webkit-color-swatch-wrapper{padding:0}
body .profile-banner-custom input[type=color]::-webkit-color-swatch{border:0;border-radius:9px}
body .profile-banner-custom input[type=color]::-moz-color-swatch{border:0;border-radius:9px}
body .profile-banner-custom span{font-size:13px;font-weight:500;color:#fff}
body .profile-banner-custom b{font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;color:rgba(255,255,255,.7)}

/* Móvil: vista previa fija y opaca (el desenfoque no funciona dentro de un panel que ya lo usa y dejaba ver el contenido
   por detrás); las pestañas quedan pegadas justo debajo. */
@media (max-width:820px){
  body .profile-edit-dialog .profile-avatar-preview-panel{
    height:84px;grid-template-columns:60px minmax(0,1fr)!important;padding:12px 14px!important;z-index:7;
    background:#16191a!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:1px solid rgba(255,255,255,.1)!important;
  }
  body .profile-avatar-preview-panel .profile-avatar-preview{width:60px!important;height:60px!important;font-size:60px}
  body .profile-avatar-preview-copy strong{font-size:14px}
  body .profile-avatar-preview-copy span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:3px;font-size:12px;line-height:1.4}
  body .profile-edit-dialog .profile-editor-tabs{position:sticky!important;top:84px!important;z-index:6!important;background:#16191a!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (max-width:420px){
  body .profile-banner-custom{grid-template-columns:52px minmax(0,1fr)}
  body .profile-banner-custom b{grid-column:2;margin-top:-8px}
  body .profile-edit-dialog .profile-editor-tab{font-size:11px!important;letter-spacing:.03em!important;padding:0 4px!important}
}

/* ============ Recuperación de acceso y seguridad de la cuenta ============ */
.auth-link,.account-form .auth-link{
  width:fit-content;min-height:0!important;height:auto!important;padding:2px 0!important;margin:0;border:0!important;border-bottom:1px solid rgba(255,255,255,.22)!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;color:rgba(255,255,255,.72)!important;font-size:13px;font-weight:500;cursor:pointer;
  transition:color .2s ease,border-color .2s ease;
}
.auth-link:hover{color:#fff!important;border-bottom-color:#fff!important}
.account-form .auth-link{justify-self:start}
.button.danger{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.4);color:#fecaca}
.button.danger:hover{background:rgba(248,113,113,.22);border-color:rgba(248,113,113,.7)}
.button.danger.account-submit{background:#dc2626;border-color:transparent;color:#fff}
.button.danger.account-submit:hover{background:#ef4444}
.account-form-message[data-type="success"]{border-color:rgba(74,222,128,.4)!important;background:rgba(74,222,128,.08)!important;color:#bbf7d0!important}

.profile-security{display:grid;gap:18px}
.security-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.security-card{
  position:relative;display:grid;align-content:start;gap:12px;padding:22px;border-radius:20px;
  border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
}
.security-card h3{font-size:17px;letter-spacing:-.02em;color:#fff}
.security-card p{color:#aab1ac;font-size:14px;line-height:1.55}
.security-card strong{color:#fff}
.security-card code{padding:2px 7px;border-radius:7px;background:rgba(255,255,255,.1);font-size:12.5px;color:#fff}
.security-state{
  width:fit-content;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.1em;
  border:1px solid rgba(255,255,255,.18);color:#c9cfca;background:rgba(255,255,255,.06);
}
.security-card.is-ok{border-color:rgba(74,222,128,.32)}
.security-card.is-ok .security-state{color:#86efac;border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.1)}
.security-card.is-warn{border-color:rgba(251,191,36,.34)}
.security-card.is-warn .security-state{color:#fcd34d;border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.1)}
.security-steps{display:grid;gap:8px;margin:0;padding-left:20px;color:#c9cfca;font-size:14px;line-height:1.5}
.security-steps li::marker{color:#8a928d;font-weight:700}
.security-steps a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.security-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.security-actions .button{min-height:42px;padding:0 16px;font-size:13px}
@media (max-width:980px){.security-grid{grid-template-columns:1fr}}

/* ============ Accesibilidad, rendimiento y alcance ============ */
/* Enlace para saltar al contenido (visible solo con el teclado) */
.skip-link{
  position:fixed;left:16px;top:-64px;z-index:10000;padding:12px 18px;border-radius:12px;background:#fff;color:#0b0b0c;
  font:700 14px/1 Inter,system-ui,sans-serif;text-decoration:none;box-shadow:0 12px 34px rgba(0,0,0,.5);transition:top .2s ease;
}
.skip-link:focus{top:16px;outline:3px solid #7c8cff;outline-offset:2px}
main:focus{outline:none}

/* Foco visible para quien navega con teclado o mando */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 5px rgba(124,140,255,.55);
}
.search-box input:focus-visible,.report-field input:focus-visible,.report-field textarea:focus-visible{box-shadow:none}

/* Objetivos táctiles de al menos 44 px en pantallas táctiles */
@media (pointer:coarse){
  .filter-chip,.pagination-page,.pagination-arrow,.history-button,.auth-link{min-height:44px;min-width:44px}
  .auth-link{display:inline-flex;align-items:center}
  .quick-dock a,.quick-dock button{min-width:44px;min-height:44px}
  .button{min-height:44px}
}

/* Control de pausa del carrusel */
.feature-carousel-toggle{
  display:inline-grid;place-items:center;flex:none;width:34px;height:34px;margin-right:4px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;
  transition:background .2s ease,transform .3s var(--pr-spring,cubic-bezier(.34,1.5,.5,1));
}
.feature-carousel-toggle:hover{background:rgba(255,255,255,.18)}
.feature-carousel-toggle:active{transform:scale(.9)}
.feature-carousel-toggle svg{width:15px;height:15px}
.feature-carousel-toggle .icon-play,.feature-carousel.is-user-paused .feature-carousel-toggle .icon-pause{display:none}
.feature-carousel.is-user-paused .feature-carousel-toggle .icon-play{display:block}
@media (pointer:coarse){.feature-carousel-toggle{width:44px;height:44px}}

/* Las tarjetas fuera de pantalla no se dibujan hasta que se acercan (catálogos grandes) */
.game-card,.system-card{content-visibility:auto;contain-intrinsic-size:auto 260px}