/* FLUX Games — tema neón. Se carga después de styles.css y lo sobrescribe. */

/* Login gate */
body.auth-pending #shell{display:none}
.login-gate{display:none;position:fixed;inset:0;z-index:9999;background:var(--flux-bg);background:radial-gradient(ellipse 120% 80% at 50% 30%,#141a4d 0%,#070a1f 60%);place-items:center;font-family:var(--flux-font);color:var(--flux-text)}
body.auth-pending .login-gate{display:grid}
.login-gate-content{text-align:center;padding:2rem;max-width:420px}
.login-gate-logo{width:180px;margin-bottom:1.5rem;filter:drop-shadow(0 0 24px rgba(139,92,255,.4))}
.login-gate-content h1{font-size:1.6rem;font-weight:800;margin:0 0 .75rem;background:var(--flux-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.login-gate-content p{color:var(--flux-dim);margin:0 0 1.25rem;line-height:1.5}
.login-gate-content .flux-cta{display:inline-block;padding:.75rem 2rem;border-radius:8px;background:var(--flux-grad);color:#fff;font-weight:700;text-decoration:none;font-size:1rem;transition:transform .15s,box-shadow .15s}
.login-gate-content .flux-cta:hover{transform:translateY(-2px);box-shadow:0 4px 20px rgba(139,92,255,.5)}
.login-gate-small{font-size:.85rem;color:var(--flux-dim);margin-top:1rem}
:root{
  --flux-bg:#070a1f;--flux-bg-2:#0b0f2c;--flux-panel:#0e1333;--flux-panel-2:#141a42;
  --flux-line:rgba(130,140,255,.18);--flux-line-strong:rgba(150,160,255,.32);
  --flux-text:#eef1ff;--flux-dim:#9aa3cc;
  --flux-cyan:#22e4ff;--flux-blue:#3b7bff;--flux-violet:#8b5cff;--flux-pink:#ff3fb4;
  --flux-grad:linear-gradient(135deg,#22e4ff,#3b7bff 35%,#8b5cff 65%,#ff3fb4);
  --flux-grad-x:linear-gradient(90deg,#22e4ff,#3b7bff,#8b5cff,#ff3fb4,#22e4ff);
  --flux-font:'Exo 2','Segoe UI',system-ui,sans-serif;
  --bg:var(--flux-bg);--panel:var(--flux-panel);--control:var(--flux-panel-2);--text:var(--flux-text);--dim:var(--flux-dim);
  --orange:var(--flux-violet);--yellow:var(--flux-cyan);--selection:var(--flux-grad);
}
html,body{background:var(--flux-bg);color:var(--flux-text)}
body,button,input,select,textarea{font-family:var(--flux-font)}
::selection{background:#8b5cff66}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--flux-cyan);outline-offset:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ui-icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Fondo vivo */
.shell,.overlay{background:radial-gradient(ellipse 120% 80% at 50% -10%,#141a4d 0%,var(--flux-bg) 60%)}
.shell::before,.shell::after{content:'';position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:blur(90px);opacity:.55}
.shell::before{width:60vw;height:60vw;left:-15vw;top:-25vw;background:radial-gradient(circle,#3b2bff 0%,transparent 65%);animation:flux-drift-a 22s ease-in-out infinite alternate}
.shell::after{width:55vw;height:55vw;right:-18vw;bottom:-30vw;background:radial-gradient(circle,#c02a9b 0%,transparent 65%);opacity:.4;animation:flux-drift-b 26s ease-in-out infinite alternate}
@keyframes flux-drift-a{to{transform:translate(18vw,10vw) scale(1.15)}}
@keyframes flux-drift-b{to{transform:translate(-20vw,-12vw) scale(1.1)}}

/* Barra superior */
.topbar{height:64px;background:linear-gradient(180deg,rgba(10,13,40,.92),rgba(7,10,31,.7));backdrop-filter:blur(14px);border-bottom:0;padding-right:clamp(12px,3vw,48px)}
.topbar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--flux-grad-x);background-size:200% 100%;opacity:.85;box-shadow:0 0 12px #8b5cff,0 0 2px #22e4ff;animation:flux-flow 8s linear infinite}
@keyframes flux-flow{to{background-position:200% 0}}
.brand-slot{width:196px;height:58px;padding:2px;background:none!important;border:0}
.brand-logo{filter:drop-shadow(0 0 10px rgba(139,92,255,.5)) drop-shadow(0 0 22px rgba(34,228,255,.2));animation:flux-logo-glow 4s ease-in-out infinite alternate}
@keyframes flux-logo-glow{to{filter:drop-shadow(0 0 14px rgba(255,63,180,.55)) drop-shadow(0 0 28px rgba(34,228,255,.3))}}
.presets{gap:6px;padding:4px}
.preset{font:600 17px var(--flux-font);color:#d6dbff;border:1.5px solid transparent;border-radius:11px;padding:7px 18px;background:none;transition:color .2s,background .2s,box-shadow .2s,border-color .2s}
.preset:hover{color:#fff;background:rgba(139,92,255,.12);border-color:rgba(139,92,255,.35)}
.preset.active{color:#fff;border-color:var(--flux-cyan);background:linear-gradient(180deg,rgba(34,228,255,.16),rgba(59,123,255,.08));box-shadow:0 0 14px rgba(34,228,255,.45),inset 0 0 10px rgba(34,228,255,.18)}
.system{gap:12px;font:600 18px var(--flux-font);color:#e6e9ff}
.system button{display:inline-grid;place-items:center;font-size:24px;min-width:40px;height:40px;border-radius:10px;color:#e6e9ff;transition:color .2s,background .2s}
.system button:hover{color:var(--flux-cyan);background:rgba(34,228,255,.08)}
.account-link{display:inline-flex;align-items:center;gap:8px;font:600 15px var(--flux-font);color:#fff;padding:8px 16px;border-radius:10px;border:1.5px solid transparent;background:linear-gradient(var(--flux-bg-2),var(--flux-bg-2)) padding-box,var(--flux-grad) border-box;box-shadow:0 0 14px rgba(34,228,255,.25)}
.account-link:hover{background:linear-gradient(#141a48,#141a48) padding-box,var(--flux-grad) border-box;box-shadow:0 0 20px rgba(139,92,255,.5)}
.account-link .ui-icon{font-size:17px;color:var(--flux-cyan)}
.topbar .language-label,.info-header .language-label{border:1px solid var(--flux-line-strong);border-radius:10px;background:var(--flux-bg-2)}
.language-label:focus-within{outline-color:var(--flux-cyan)}

/* Cabecera de la biblioteca */
.library{padding:18px clamp(16px,3vw,44px) 24px;scrollbar-color:#4a4f9a transparent}
.library::-webkit-scrollbar-thumb,.filters::-webkit-scrollbar-thumb{background:linear-gradient(#22e4ff,#8b5cff)}
.flux-heading{position:relative;z-index:6;display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin:0 0 18px}
.flux-heading-icon{width:34px;height:26px;fill:none;stroke:var(--flux-cyan);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(34,228,255,.6))}
.flux-heading-text{display:flex;align-items:baseline;gap:10px}
.flux-heading h2{margin:0;font:700 clamp(20px,2vw,26px) var(--flux-font);color:#fff;letter-spacing:.2px}
.flux-count{font:600 12px var(--flux-font);color:var(--flux-dim);padding:3px 9px;border:1px solid var(--flux-line);border-radius:999px;white-space:nowrap}
.flux-subtitle{margin:0;padding-left:18px;border-left:1px solid var(--flux-line-strong);color:var(--flux-dim);font:500 15px var(--flux-font)}
.flux-search{display:flex;align-items:center;gap:10px;margin-left:auto;width:min(390px,100%);height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--flux-line-strong);background:rgba(10,14,40,.75);color:var(--flux-dim);transition:border-color .2s,box-shadow .2s}
.flux-search:focus-within{border-color:var(--flux-cyan);box-shadow:0 0 0 3px rgba(34,228,255,.15),0 0 18px rgba(34,228,255,.25);color:var(--flux-cyan)}
.flux-search .ui-icon{font-size:19px}
.flux-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:#fff;font:500 15px var(--flux-font)}
.flux-search input::placeholder{color:#7f88b8}
.flux-search input:focus-visible{outline:0}
#filters-toggle{position:relative;display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--flux-line-strong);background:rgba(10,14,40,.75);color:#fff;font:600 15px var(--flux-font);transition:border-color .2s,box-shadow .2s}
#filters-toggle:hover,#filters-toggle[aria-expanded=true]{border-color:var(--flux-violet);box-shadow:0 0 16px rgba(139,92,255,.35)}
#filters-toggle .ui-icon{font-size:18px}
#filters-toggle .chevron{transition:transform .2s}
#filters-toggle[aria-expanded=true] .chevron{transform:rotate(180deg)}
.filters-dot{position:absolute;top:8px;left:30px;width:8px;height:8px;border-radius:50%;background:var(--flux-pink);box-shadow:0 0 8px var(--flux-pink)}
.flux-heading .catalog-search:not([hidden]){position:absolute;right:0;top:calc(100% + 8px);z-index:30;display:grid;gap:10px;width:min(320px,calc(100vw - 32px));padding:16px;border-radius:14px;border:1px solid var(--flux-line-strong);background:rgba(13,17,48,.97);backdrop-filter:blur(16px);box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 24px rgba(139,92,255,.25);color:var(--flux-dim);font:600 13px var(--flux-font);animation:flux-pop .16s ease-out}
@keyframes flux-pop{from{opacity:0;transform:translateY(-6px)}}
.catalog-search label{display:grid;gap:6px}
.catalog-search select,.sort-toolbar select{width:100%;max-width:none;padding:9px 10px;border-radius:9px;border:1px solid var(--flux-line-strong);background:#0a0e2a;color:#fff;font:500 14px var(--flux-font)}
.flux-heading .sort-toolbar{display:grid;gap:6px;justify-content:stretch;padding:0;color:inherit;font:inherit}
.flux-heading .sort-toolbar[hidden]{display:none}
#filters-clear{margin-top:2px;padding:9px;border-radius:9px;border:1px solid var(--flux-line);background:none;color:var(--flux-cyan);font:600 13px var(--flux-font)}
#filters-clear:hover{background:rgba(34,228,255,.08)}

/* Portadas */
.cover-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 16px;padding:6px 4px 24px}
.cover-grid.animate-in .cover-entry{animation:flux-card-in .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:min(calc(var(--i,0) * 18ms),360ms)}
@keyframes flux-card-in{from{opacity:0;transform:translateY(14px) scale(.97)}}
.cover{border:1.5px solid var(--flux-line);border-radius:12px;background:var(--flux-panel);box-shadow:0 10px 24px rgba(0,0,0,.45);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,border-color .22s}
.cover-art{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cover-name{min-height:52px;padding:8px;background:linear-gradient(0deg,#0b0f2c 78%,rgba(11,15,44,.9));border-top:1px solid var(--flux-line);color:#f2f4ff;font:600 15px/1.2 var(--flux-font)}
.cover:hover,.cover.selected,.cover:focus-visible{border:1.5px solid transparent;background:linear-gradient(var(--flux-panel),var(--flux-panel)) padding-box,var(--flux-grad-x) border-box;background-size:100% 100%,300% 100%;animation:flux-border 3s linear infinite;transform:translateY(-6px) scale(1.03);box-shadow:0 0 0 1px rgba(34,228,255,.25),0 0 22px rgba(139,92,255,.55),0 0 42px rgba(34,228,255,.22),0 18px 30px rgba(0,0,0,.55);outline:0}
@keyframes flux-border{to{background-position:0 0,300% 0}}
.cover:hover .cover-name,.cover.selected .cover-name{color:#fff;text-shadow:0 0 12px rgba(34,228,255,.45)}
.cover-labels{top:8px;left:7px;right:7px;gap:4px}
.cover-labels .cover-badge{display:block;min-width:0;max-width:none;flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal;padding:3px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(8,10,32,.72);backdrop-filter:blur(6px);color:#fff;font:600 10.5px/1.25 var(--flux-font);letter-spacing:.1px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.cover-labels .badge-mode::before{content:'';display:inline-block;width:6px;height:6px;margin:0 5px 1px 0;border-radius:50%;background:var(--flux-cyan);box-shadow:0 0 6px var(--flux-cyan);vertical-align:middle}
.cover-labels .badge-mode{flex-shrink:.15}
.cover-labels .badge-genre{flex:0 1 auto;background:rgba(70,40,150,.62);border-color:rgba(160,120,255,.45)}
.home-favorite{border-radius:50%;background:rgba(8,10,32,.8);border:1px solid var(--flux-pink);color:#ff7ccc;box-shadow:0 0 10px rgba(255,63,180,.45)}
.empty{color:var(--flux-dim)}
.pagination button,.pagination select{border-radius:10px;border:1px solid var(--flux-line-strong);background:var(--flux-bg-2);color:#fff;font-family:var(--flux-font)}
.pagination button:hover:not(:disabled){border-color:var(--flux-cyan);box-shadow:0 0 12px rgba(34,228,255,.3)}

/* Panel lateral, barra inferior y menú */
.filters{background:rgba(10,13,38,.88);border-right:1px solid var(--flux-line);backdrop-filter:blur(12px)}
.filters h2{font-family:var(--flux-font);font-weight:700}
.filter-choice{border:1px solid transparent;border-radius:10px}
.filter-choice:hover,.filter-choice.active{background:rgba(139,92,255,.14);border-image:none;border-color:rgba(139,92,255,.45)}
.filter-choice.active{color:var(--flux-cyan)}
.source-label select,.language-select{border-radius:9px;border-color:var(--flux-line-strong);background:#0a0e2a;color:#fff}
.legal-links{border-top-color:var(--flux-line)}
.legal-links a,#report-link{color:#9fb3ff}
.bottombar{background:linear-gradient(0deg,rgba(10,13,40,.95),rgba(7,10,31,.8));border-top:1px solid var(--flux-line)}
.bottom-actions button:hover{background:rgba(139,92,255,.16);border-image:none;border-color:rgba(139,92,255,.45);border-radius:10px}
.bottom-help{color:var(--flux-dim)}
kbd{background:var(--flux-grad);color:#fff}
.bottom-help kbd{background:#27306a}
.menu{background:linear-gradient(180deg,rgba(16,20,58,.97),rgba(7,10,31,.98));border-left:1px solid var(--flux-line-strong);backdrop-filter:blur(18px);box-shadow:-24px 0 60px rgba(0,0,0,.6),-2px 0 24px rgba(139,92,255,.25)}
.menu h2{font:800 28px var(--flux-font);background:var(--flux-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.menu button,.menu a{border-radius:10px;font-family:var(--flux-font);font-weight:600}
.menu button:hover,.menu a:hover{border-color:var(--flux-violet);background:rgba(139,92,255,.1)}
.card-context-menu{background:rgba(13,17,48,.98);border:1px solid var(--flux-line-strong);border-radius:12px;color:var(--flux-dim);box-shadow:0 14px 35px rgba(0,0,0,.7),0 0 20px rgba(139,92,255,.25)}
.card-context-menu button,.card-context-menu a{font-family:var(--flux-font)}
.card-context-menu button:hover,.card-context-menu a:hover{background:rgba(139,92,255,.18)}
.card-context-menu .card-menu-stars button{color:#ffd166}

/* Ficha de juego */
.detail-backdrop{opacity:.42}
.detail-backdrop:after{background:linear-gradient(0deg,var(--flux-bg) 0%,rgba(7,10,31,.92) 38%,rgba(7,10,31,.35) 85%)}
#detail .back{border-color:var(--flux-line-strong);background:rgba(13,17,48,.85);backdrop-filter:blur(10px);font-family:var(--flux-font)}
#detail .back:hover{border-color:var(--flux-cyan);box-shadow:0 0 14px rgba(34,228,255,.35)}
.detail-info h2,#detail .detail-info h2{color:#fff;font-family:var(--flux-font);font-weight:800;text-shadow:0 0 22px rgba(139,92,255,.5)}
.meta strong{color:var(--flux-cyan);font-family:var(--flux-font);letter-spacing:.6px}
#detail .detail-actions a{border:1px solid var(--flux-line-strong);border-radius:11px;background:rgba(14,19,51,.85);color:#fff;font-family:var(--flux-font);font-weight:600}
#detail .detail-actions a:hover{border-color:var(--flux-violet);box-shadow:0 0 16px rgba(139,92,255,.45)}
#detail .detail-actions a:first-child{border-color:transparent;background:var(--flux-grad);background-size:200% 100%;color:#fff;box-shadow:0 0 20px rgba(139,92,255,.5);animation:flux-flow 6s linear infinite}
.detail-cover,#detail #detail-cover{border:1.5px solid var(--flux-line-strong);border-radius:14px;background-color:var(--flux-panel);box-shadow:0 0 30px rgba(139,92,255,.3),0 18px 40px rgba(0,0,0,.6)}
#detail-favorite{border:1px solid var(--flux-pink);border-radius:10px;background:rgba(255,63,180,.08);color:#ff9ad6;font-family:var(--flux-font)}
#detail-favorite[aria-pressed="true"]{background:rgba(255,63,180,.22);color:#fff;box-shadow:0 0 14px rgba(255,63,180,.4)}
.rating-star{color:#ffd166}
#technical-sheet,.detail-gallery{border-color:var(--flux-line)}
#technical-sheet h3,.detail-gallery h3,.detail-comments h3{color:#fff;font-family:var(--flux-font)}
.detail-comments label,.comment strong{color:var(--flux-cyan)}
.detail-comments textarea{border-radius:10px;border:1px solid var(--flux-line-strong);background:#0a0e2a;color:#fff}
.detail-comments button,.detail-comments a{color:#fff}
.detail-comments button{border-radius:10px;border:0;background:var(--flux-grad)}
.detail-footer,#detail .detail-footer{background:linear-gradient(0deg,rgba(10,13,40,.95),rgba(7,10,31,.8))}
.detail-footer #detail-edit{color:var(--flux-cyan)}

/* Páginas informativas */
.info-page{background:radial-gradient(ellipse 120% 70% at 50% -10%,#141a4d,var(--flux-bg) 60%);color:var(--flux-text);font-family:var(--flux-font)}
.info-header{border-bottom:1px solid var(--flux-line-strong)}
.info-header img{width:180px;height:56px}
.info-header a,.info-main a,.info-footer a{color:#9fb3ff}
.info-main h1{background:var(--flux-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.info-main h2{color:#fff}
.info-main p,.info-main li{color:#c7cdee}
.eyebrow{color:var(--flux-cyan)}
.notice{border-color:var(--flux-line-strong);border-radius:12px;background:rgba(14,19,51,.8)}
.info-footer{border-top-color:var(--flux-line-strong)}
.flux-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:12px;background:var(--flux-grad);background-size:200% 100%;color:#fff!important;font:700 16px var(--flux-font);text-decoration:none!important;box-shadow:0 0 20px rgba(139,92,255,.45);transition:transform .2s,box-shadow .2s}
.flux-cta:hover{transform:translateY(-2px);box-shadow:0 0 28px rgba(34,228,255,.5)}
.flux-cta.secondary{background:rgba(14,19,51,.85);border:1px solid var(--flux-line-strong);box-shadow:none}
.flux-cta.secondary:hover{border-color:var(--flux-cyan);box-shadow:0 0 16px rgba(34,228,255,.3)}
.account-card{display:grid;gap:14px;justify-items:start}
.account-card p{margin:0}
.account-actions{display:flex;flex-wrap:wrap;gap:12px}
.account-small{font-size:15px!important;color:var(--flux-dim)!important}
#message{color:var(--flux-cyan)}

@media(max-width:1100px){
  .topbar .brand-slot{position:static;transform:none;order:-1;flex:none;width:130px;height:44px;margin-right:6px}  .preset{padding:7px 12px}
}
@media(max-width:850px){
  .flux-subtitle{display:none}
  .flux-search{order:5;width:auto;margin-left:0;flex:1 1 160px}
  #filters-toggle{order:6}
  .cover-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px 12px}
}
@media(max-width:600px){
  .shell{display:flex;flex-direction:column}
  .topbar{flex:none;height:auto;min-height:64px;flex-wrap:wrap;row-gap:2px;padding:6px 10px}
  .topbar .system{height:42px}
  .middle,.middle.panels-expanded{flex:1 1 auto;height:auto;min-height:0}
  .bottombar.panels-hidden{position:absolute;left:0;right:0;bottom:0}
  .account-link{padding:6px 10px;font-size:13px}
  .preset{padding:6px 11px;font-size:15px}
  .cover-labels .badge-genre{display:none}
}
@media(prefers-reduced-motion:reduce){
  .shell::before,.shell::after,.topbar::after,.brand-logo,.cover-entry,.cover:hover,.cover.selected,.cover:focus-visible,#detail .detail-actions a:first-child{animation:none!important}
}