*{box-sizing:border-box}
:root{
  --bg:#080b12;--panel:#0d121c;--panel2:#111925;--line:rgba(255,255,255,.08);
  --text:#f4f7fb;--muted:#7f8b9e;--cyan:#5be7ff;--blue:#448cff;--violet:#8b5cf6;
  --green:#82e676;--red:#ff657d;--amber:#f4c56a
}
html{background:var(--bg)}body{margin:0;min-height:100vh;background:
radial-gradient(circle at 80% 0%,rgba(68,140,255,.13),transparent 30%),
radial-gradient(circle at 35% 15%,rgba(139,92,246,.08),transparent 26%),
linear-gradient(180deg,#090d15,#070a10);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif}
button,input,a{font:inherit}.hidden{display:none!important}.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:99;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:24px 17px;z-index:20;
background:rgba(7,10,16,.84);backdrop-filter:blur(18px);border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;padding:3px 7px 28px}.brand-orb{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
font-size:20px;font-weight:900;background:linear-gradient(145deg,var(--cyan),var(--blue) 58%,var(--violet));color:#061018;box-shadow:0 10px 35px rgba(68,140,255,.28)}
.brand strong{display:block;font-size:17px;letter-spacing:2px}.brand span{display:block;color:#566176;font-size:9px;letter-spacing:1.8px;margin-top:4px}
.primary-nav,.filters{display:grid;gap:6px}.nav-item,.filter{display:flex;align-items:center;gap:11px;width:100%;border:1px solid transparent;background:transparent;color:#8995a8;
padding:11px 12px;border-radius:11px;cursor:pointer;text-align:left}.nav-item span{width:19px;color:#5c6a7d;font-size:17px}.nav-item b{flex:1;font-size:12px}.nav-item em{
min-width:22px;height:20px;padding:0 6px;border-radius:8px;display:grid;place-items:center;background:#182334;color:#8fa7c5;font-size:9px;font-style:normal}
.nav-item:hover,.filter:hover{background:rgba(255,255,255,.035);color:#fff}.nav-item.active{color:#fff;background:linear-gradient(90deg,rgba(68,140,255,.16),rgba(91,231,255,.04));
border-color:rgba(91,231,255,.12)}.nav-item.active span{color:var(--cyan)}.side-label{margin:29px 12px 10px;color:#485468;font-size:9px;font-weight:800;letter-spacing:1.7px}
.filter{padding:9px 12px;font-size:11px}.filter i{width:7px;height:7px;border:1px solid #526074;border-radius:50%}.filter.active{color:#c9f7ff}.filter.active i{border:0;background:var(--cyan);box-shadow:0 0 13px var(--cyan)}
.server-card{position:absolute;left:18px;right:18px;bottom:19px;display:flex;align-items:center;gap:11px;border:1px solid var(--line);background:rgba(255,255,255,.025);
padding:12px;border-radius:12px}.pulse{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 5px rgba(244,197,106,.08)}.server-card b{display:block;font-size:10px}
.server-card span{display:block;color:#596579;font-size:9px;margin-top:3px}.stage{min-width:0}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;gap:22px;
padding:0 28px;position:sticky;top:0;z-index:18;background:rgba(8,11,18,.76);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.crumb{font-size:10px;color:#49556a;letter-spacing:1.3px}.topbar strong{font-size:10px;letter-spacing:1.4px;color:#a7b3c6}.top-actions{display:flex;gap:8px;align-items:center;flex:1;justify-content:flex-end}
.search{width:min(470px,53vw);height:40px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid rgba(91,231,255,.14);background:#0c131e;border-radius:11px}
.search span{font-size:20px;color:#4c6077}.search input{width:100%;border:0;outline:0;background:transparent;color:#eaf6ff;font-size:12px}.search input::placeholder{color:#4f5e72}
.icon-btn{width:41px;height:41px;border-radius:11px;border:1px solid var(--line);background:#0c131e;color:#9ab0c9;cursor:pointer;font-size:18px}.icon-btn:hover{color:#fff;border-color:rgba(91,231,255,.3)}
main{max-width:1650px;margin:auto;padding:28px 31px 56px}.view{display:none}.view.active{display:block}.hero{position:relative;height:430px;overflow:hidden;border-radius:22px;border:1px solid var(--line);
background:linear-gradient(135deg,#142035,#090e17);background-position:center;background-size:cover;box-shadow:0 35px 80px rgba(0,0,0,.32)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,9,14,.96) 0%,rgba(6,9,14,.72) 43%,rgba(6,9,14,.16) 78%),
linear-gradient(0deg,rgba(6,9,14,.5),transparent 45%)}.hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;width:min(690px,74%);height:100%;padding:48px}
.micro{font-size:9px;letter-spacing:1.8px;font-weight:800;color:var(--cyan)}.hero h1{font-size:49px;line-height:1.02;margin:10px 0 12px;max-width:670px;letter-spacing:-1.5px}
.hero p{font-size:13px;color:#96a4b7;margin:0 0 16px}.req-pill{width:max-content;max-width:100%;padding:7px 10px;border:1px solid rgba(91,231,255,.15);background:rgba(8,15,24,.65);border-radius:10px;color:#a8c5d8;font-size:10px;margin-bottom:24px}
.hero-actions{display:flex;gap:9px}.primary-btn,.ghost-btn{height:42px;padding:0 17px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;font-size:10px;letter-spacing:.5px;cursor:pointer}
.primary-btn{border:0;background:linear-gradient(100deg,var(--cyan),#5aa8ff);color:#041018;box-shadow:0 12px 30px rgba(91,231,255,.14)}.primary-btn:hover{filter:brightness(1.09);transform:translateY(-1px)}
.ghost-btn{border:1px solid rgba(255,255,255,.11);background:rgba(12,18,28,.78);color:#c7d4e5}.ghost-btn:hover{border-color:rgba(91,231,255,.3);color:#fff}.hero-stats{position:absolute;right:29px;bottom:29px;z-index:3;display:flex;gap:8px}
.hero-stats div{min-width:93px;padding:12px 14px;border:1px solid var(--line);background:rgba(8,11,18,.76);backdrop-filter:blur(10px);border-radius:12px}.hero-stats span,.summary span,.dialog-stats span{display:block;color:#59667a;font-size:8px;letter-spacing:1px}
.hero-stats b{display:block;margin-top:3px;font-size:15px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:36px 0 17px}.section-head h2,.library-banner h2{margin:4px 0 0;font-size:24px;letter-spacing:-.5px}
.link-btn{border:0;background:transparent;color:#6fb8ff;font-size:10px;cursor:pointer}.link-btn:hover{color:#b9f5ff}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:16px}
.game-card{overflow:hidden;border-radius:15px;border:1px solid var(--line);background:linear-gradient(180deg,#101824,#0c121b);box-shadow:0 12px 30px rgba(0,0,0,.14);transition:.2s ease}
.game-card:hover{transform:translateY(-4px);border-color:rgba(91,231,255,.2);box-shadow:0 20px 45px rgba(0,0,0,.28)}.cover{height:154px;position:relative;overflow:hidden;background:#111927;cursor:pointer}
.cover img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s}.game-card:hover .cover img{transform:scale(1.045);filter:brightness(1.08)}.cover::after{content:"";position:absolute;inset:48% 0 0;background:linear-gradient(transparent,#0e1622)}
.type-tag{position:absolute;left:10px;top:10px;z-index:2;padding:5px 7px;border-radius:8px;background:rgba(7,12,20,.78);backdrop-filter:blur(7px);border:1px solid rgba(255,255,255,.1);font-size:8px;color:#b9d7ea}
.card-body{padding:13px}.card-body h3{font-size:14px;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-meta{font-size:10px;color:#657388}.compat{margin:11px 0 10px;padding:8px 9px;border-radius:9px;background:#0a1018;border:1px solid rgba(91,231,255,.08)}
.compat span{display:block;color:#566477;font-size:8px;letter-spacing:.9px}.compat b{display:block;color:#9dc4d8;font-size:10px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px}.card-stats div{padding:8px;background:#090f17;border-radius:9px;border:1px solid rgba(255,255,255,.055);text-align:center}.card-stats b{display:block;font-size:13px}.card-stats span{display:block;color:#536075;font-size:7px;letter-spacing:.8px;margin-top:2px}.card-stats .bad b{color:var(--red)}
.card-actions{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:9px}.download-btn,.req-btn{height:37px;border-radius:9px;font-size:9px;font-weight:800;cursor:pointer}.download-btn{display:grid;place-items:center;text-decoration:none;border:0;background:linear-gradient(100deg,#5ce5ff,#4f94ff);color:#06111c}.req-btn{padding:0 12px;border:1px solid var(--line);background:#121c28;color:#8fa8bd}.req-btn:hover{color:#fff;border-color:rgba(91,231,255,.25)}
.library-banner{display:flex;justify-content:space-between;align-items:end;gap:25px;padding:24px 0 20px;border-bottom:1px solid var(--line);margin-bottom:19px}.library-banner p{margin:6px 0 0;color:#6c798d;font-size:11px;max-width:720px}.summary{display:flex;gap:8px}
.summary div{min-width:92px;padding:11px 13px;text-align:right;border:1px solid var(--line);border-radius:11px;background:#0b111a}.summary b{display:block;font-size:15px}.alert,.privacy-note{padding:12px 14px;margin-bottom:16px;border-radius:10px;border:1px solid rgba(255,101,125,.22);background:rgba(255,101,125,.08);font-size:11px;color:#e8a3af}
.privacy-note{border-color:rgba(91,231,255,.14);background:rgba(91,231,255,.045);color:#738aa0}.privacy-note b{color:#b9d7e8}.download-list{display:grid;gap:9px}.download-row{display:grid;grid-template-columns:minmax(200px,1.25fr) 150px minmax(190px,1fr) minmax(230px,1.15fr);gap:15px;align-items:center;
padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:#0c131d}.download-row.mine{border-left:3px solid var(--cyan)}.download-game b{display:block;font-size:12px}.download-game small,.device small{display:block;color:#5c697d;font-size:9px;margin-top:4px}
.device b{font-size:10px}.progress-head{display:flex;justify-content:space-between;font-size:8px;color:#66758a;margin-bottom:6px}.bar{height:7px;border-radius:5px;overflow:hidden;background:#070b11}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--blue));transition:.3s}.complete .bar i{background:linear-gradient(90deg,#71df75,#b3e66b)}
.destination{font-size:9px;color:#6c7c90;line-height:1.45}.status-label{font-size:9px;color:#a5bdd1;margin-bottom:5px}.empty{padding:35px;border:1px dashed #253247;border-radius:13px;text-align:center;color:#4f5d71}
.game-dialog{width:min(980px,94vw);max-height:90vh;padding:0;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:#0b111a;color:#eef6ff;box-shadow:0 40px 100px rgba(0,0,0,.7);overflow:auto}.game-dialog::backdrop{background:rgba(0,0,0,.76);backdrop-filter:blur(6px)}
.dialog-close{position:fixed;margin:16px 0 0 calc(min(980px,94vw) - 58px);z-index:5;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:rgba(9,14,22,.86);color:#c2d2e3;cursor:pointer}
.dialog-cover{height:270px;background:#111927 center/cover no-repeat;position:relative}.dialog-cover::after{content:"";position:absolute;inset:20% 0 0;background:linear-gradient(transparent,#0b111a)}.dialog-content{padding:0 30px 30px;margin-top:-50px;position:relative;z-index:2}
.dialog-content h2{font-size:32px;margin:6px 0 8px}.dialog-desc{color:#7d8b9f;font-size:11px;max-width:740px}.dialog-stats{display:flex;gap:8px;margin:18px 0 27px}.dialog-stats div{min-width:105px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#0a1018}.dialog-stats b{display:block;margin-top:4px;font-size:13px}
.req-header{display:flex;justify-content:space-between;align-items:end;border-top:1px solid var(--line);padding-top:20px}.req-header h3{margin:4px 0 0;font-size:20px}.platform-badge{padding:7px 9px;border-radius:9px;border:1px solid rgba(91,231,255,.15);color:#9dcce0;background:rgba(91,231,255,.045);font-size:9px}
.requirements{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px}.requirements article{border:1px solid var(--line);background:#090f17;border-radius:13px;padding:14px}.requirements h4{font-size:9px;letter-spacing:1.5px;color:#718096;margin:0 0 10px}.requirements ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.requirements li{font-size:10px;color:#a8b6c8;line-height:1.45;padding-left:15px;position:relative}.requirements li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);position:absolute;left:0;top:5px}.requirements article:nth-child(2) li::before{background:var(--violet)}
.req-note{color:#65758a;font-size:9px;margin:12px 0 6px}.source-link{font-size:9px;color:#61bff5;text-decoration:none}.source-link:hover{text-decoration:underline}.dialog-actions{margin-top:20px;display:flex}.toast{position:fixed;top:20px;left:50%;z-index:1000;transform:translate(-50%,-150%);opacity:0;
padding:13px 18px;border:1px solid rgba(130,230,118,.35);border-radius:11px;background:#0f2115;color:#c9fbc6;box-shadow:0 18px 50px rgba(0,0,0,.5);font-size:11px;font-weight:800;transition:.28s}.toast.show{transform:translate(-50%,0);opacity:1}
@media(max-width:1080px){.shell{grid-template-columns:78px minmax(0,1fr)}.sidebar{padding:22px 10px}.brand{justify-content:center;padding-inline:0}.brand>div:last-child,.nav-item b,.nav-item em,.side-label,.filter{display:none}.nav-item{justify-content:center}.server-card{left:10px;right:10px;justify-content:center}.server-card>div:last-child{display:none}.download-row{grid-template-columns:1fr 1fr}.destination{grid-column:1/-1}}
@media(max-width:700px){.shell{display:block}.sidebar{position:relative;height:auto;display:flex;align-items:center;padding:10px 12px;gap:10px}.brand{padding:0}.brand-orb{width:35px;height:35px;border-radius:10px}.primary-nav{display:flex;flex:1}.nav-item{padding:9px}.server-card{position:static;width:auto;padding:9px}.topbar{height:auto;padding:11px 13px;flex-direction:column;align-items:stretch}.top-actions{width:100%}.search{width:100%}
main{padding:16px 13px 38px}.hero{height:360px}.hero-copy{width:95%;padding:27px}.hero h1{font-size:35px}.hero-stats{display:none}.game-grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px}.cover{height:112px}.library-banner{align-items:flex-start;flex-direction:column}.summary{width:100%}.summary div{flex:1;text-align:left}.requirements{grid-template-columns:1fr}.download-row{grid-template-columns:1fr}.destination{grid-column:auto}.dialog-content{padding:0 18px 22px}.dialog-cover{height:210px}.dialog-content h2{font-size:26px}.dialog-close{right:4vw;margin-left:0}}

/* GAMEHUB V11.1 - LOGO PERSONALIZADO */
.brand-logo-wrap{
  width:58px;
  height:58px;
  border-radius:16px;
  overflow:hidden;
  flex:0 0 58px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,rgba(91,231,255,.08),rgba(68,140,255,.08));
  border:1px solid rgba(91,231,255,.18);
  box-shadow:0 12px 34px rgba(0,0,0,.36),0 0 24px rgba(68,140,255,.10);
}
.brand-logo{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media(max-width:1080px){
  .brand-logo-wrap{width:48px;height:48px;flex-basis:48px;border-radius:14px}
}
@media(max-width:700px){
  .brand-logo-wrap{width:40px;height:40px;flex-basis:40px;border-radius:12px}
}

/* GAMEHUB V11.2 - GIF REAL ANIMADO */
.brand-logo-wrap{
  width:66px;
  height:66px;
  flex-basis:66px;
  border-radius:18px;
  overflow:hidden;
  background:#101014;
  box-shadow:
    0 12px 34px rgba(0,0,0,.42),
    0 0 26px rgba(255,193,7,.10);
}
.brand-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
@media(max-width:1080px){
  .brand-logo-wrap{width:54px;height:54px;flex-basis:54px}
}
@media(max-width:700px){
  .brand-logo-wrap{width:44px;height:44px;flex-basis:44px}
}