/* Fin del Juego - estilos de categoria
   Compartido por 5 paginas. Bloque movido tal cual desde el HTML,
   sin reordenar ninguna regla. */

:root{
  --bg:#05080d; --bg-elev:#0b1119; --bg-elev-2:#0f1826; --bg-elev-3:#131f30;
  --line: rgba(255,255,255,.08); --line-strong: rgba(127,198,255,.25);
  --electric:#2f8dff; --electric-2:#6ac8ff; --electric-glow: rgba(47,141,255,.35);
  --ice:#bee7ff; --white:#e8eef4; --gray:#93a3bd; --gray-dim:#7d8ba6;
  --maxw: 1280px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{ background:var(--bg); color:var(--white); font-family:'Inter',sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
h1,h2,h3,h4{ font-family:'Orbitron',sans-serif; font-weight:800; line-height:1.15; }
::selection{ background:var(--electric); color:#000; }
body::before{ content:""; position:fixed; inset:0; background: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(47,141,255,.12), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 10%, rgba(106,200,255,.07), transparent 55%); pointer-events:none; z-index:0; }
header{ position:relative; background:var(--bg); border-bottom:1px solid var(--line); }
.header-top{ display:flex; align-items:stretch; height:84px; }
.header-hamburger{ flex-shrink:0; width:76px; display:flex; align-items:center; justify-content:center; background:var(--bg); border:none; border-right:1px solid var(--line); color:var(--white); transition:background .2s ease; }
.header-hamburger:hover{ background:var(--bg-elev); }
.header-hamburger .bars{ display:flex; flex-direction:column; gap:5px; }
.header-hamburger .bars span{ display:block; width:24px; height:3px; background:var(--white); }
.header-logo-block{ flex:1; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:0 32px; overflow:hidden; min-width:0; }
.header-logo-block img{ height:68px; width:auto; max-width:100%; object-fit:contain; }
.header-nav-row{ background:var(--bg); border-top:1px solid var(--line); }
.nav-row-main{ display:flex; align-items:stretch; gap:0; height:44px; border-bottom:1px solid var(--line); }
.nav-links-scroll{ flex:1; min-width:0; display:flex; align-items:center; justify-content:flex-start; gap:2px; overflow-x:auto; scrollbar-width:none; }
.nav-links-scroll::-webkit-scrollbar{ display:none; }
.nav-links-scroll a{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--white); padding:8px 14px; white-space:nowrap; position:relative; transition:color .2s ease; }
.nav-links-scroll a::after{ content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; background:var(--electric-2); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.nav-links-scroll a:hover{ color:var(--electric-2); }
.nav-links-scroll a:hover::after{ transform:scaleX(1); }
.nav-row-platforms{ display:flex; align-items:center; justify-content:flex-start; gap:8px; height:46px; overflow-x:auto; scrollbar-width:none; }
.nav-row-platforms::-webkit-scrollbar{ display:none; }
.nav-row-platforms a{ display:flex; align-items:center; gap:7px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-dim); padding:7px 12px; white-space:nowrap; border:1px solid transparent; transition:all .2s ease; }
.nav-row-platforms a svg{ width:15px; height:15px; flex-shrink:0; }
.nav-row-platforms a:hover{ color:var(--electric-2); border-color:var(--line-strong); background:var(--bg-elev); }
.nav-row-platforms a[href$="gears-eday.html"]{ color:#ff5a5a; border-color:rgba(200,32,32,.55); background:linear-gradient(180deg,rgba(200,32,32,.18),rgba(200,32,32,.05)); }
.nav-row-platforms a[href$="gears-eday.html"]:hover{ color:#ff7a7a; border-color:#ff3b3b; background:rgba(200,32,32,.26); }
:root[data-theme="light"] .nav-row-platforms a[href$="gears-eday.html"]{ color:#b81c1c; border-color:rgba(184,28,28,.45); }
.nav-row-platforms a.active{ color:var(--electric-2); border-color:var(--line-strong); background:var(--bg-elev); }
main{ position:relative; z-index:1; }
.cat-head{ padding:44px 24px 26px; border-bottom:1px solid var(--line); }
.breadcrumb{ display:flex; align-items:center; gap:8px; margin-bottom:20px; font-family:'Rajdhani',sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-dim); }
.breadcrumb a{ color:var(--gray); transition:color .2s ease; }
.breadcrumb a:hover{ color:var(--electric-2); }
.breadcrumb svg{ width:12px; height:12px; }
.cat-tag{ display:inline-flex; align-items:center; gap:8px; margin-bottom:16px; padding:6px 13px; border:1px solid var(--line-strong); background:linear-gradient(180deg, rgba(47,141,255,.14), rgba(47,141,255,.03)); font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.14em; font-size:12px; text-transform:uppercase; color:var(--electric-2); }
.cat-tag svg{ width:16px; height:16px; }
.cat-title{ font-size:clamp(30px,5vw,48px); color:var(--white); margin-bottom:10px; }
.cat-sub{ font-family:'Rajdhani',sans-serif; font-weight:600; font-size:14px; letter-spacing:.04em; text-transform:uppercase; color:var(--gray-dim); }
.cat-body{ padding:36px 24px 20px; }
.news-grid{ display:flex; flex-direction:column; gap:16px; max-width:840px; margin:0 auto; }
.news-card{ display:flex; border:1px solid var(--line); background:var(--bg-elev); overflow:hidden; transition:border-color .2s ease, transform .2s ease; }
.news-card:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.news-thumb{ flex:0 0 250px; position:relative; overflow:hidden; align-self:stretch; min-height:150px; }
.news-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.news-body{ flex:1; padding:18px 22px; display:flex; flex-direction:column; justify-content:center; }
.tag-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.tag{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--electric-2); border:1px solid var(--line-strong); padding:3px 8px; }
.news-body h4{ font-family:'Inter',sans-serif; font-weight:700; font-size:16.5px; margin:0 0 10px; line-height:1.35; }
.date-txt{ font-family:'Rajdhani',sans-serif; font-size:12.5px; color:var(--gray-dim); font-weight:600; }
.empty-msg{ display:none; text-align:center; color:var(--gray); font-size:16px; padding:60px 20px; border:1px dashed var(--line-strong); background:var(--bg-elev); }
.more-row{ display:flex; justify-content:center; margin-top:40px; }
.btn{ display:inline-flex; align-items:center; gap:10px; font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:14px; padding:13px 26px; background:var(--electric); color:#03070c; border:1px solid var(--electric); clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%); transition:all .2s ease; }
.btn:hover{ background:var(--electric-2); box-shadow:0 0 24px var(--electric-glow); }
.btn svg{ width:16px; height:16px; }
footer{ border-top:1px solid var(--line); background:var(--bg-elev); padding:52px 0 24px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap:32px; padding-bottom:36px; border-bottom:1px solid var(--line); }
.footer-brand p{ color:var(--gray); font-size:13.5px; margin-top:14px; max-width:280px; }
.footer-logo{ height:42px; width:auto; object-fit:contain; }
.social-row{ display:flex; gap:10px; margin-top:20px; }
.icon-btn{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--gray); background:transparent; transition:all .2s ease; }
.icon-btn:hover{ border-color:var(--electric); color:var(--electric-2); box-shadow:0 0 0 3px var(--electric-glow); }
.icon-btn svg{ width:17px; height:17px; }
.footer-col h5{ font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:12.5px; color:var(--gray); margin-bottom:14px; }
.footer-col a{ display:block; color:var(--gray); font-size:13.5px; padding:5px 0; transition:color .2s ease;}
.footer-col a:hover{ color:var(--electric-2); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:22px; font-size:12.5px; color:var(--gray-dim); font-family:'Rajdhani',sans-serif; letter-spacing:.03em; }
.footer-bottom .legal a{ color:var(--gray-dim); margin-left:18px; }
.footer-bottom .legal a:hover{ color:var(--electric-2); }
.mobile-drawer{ position:fixed; top:174px; left:0; right:0; bottom:0; background:rgba(5,8,13,.98); backdrop-filter: blur(10px); z-index:99; padding:24px; transform:translateX(-100%); transition:transform .3s ease; overflow-y:auto; }
.mobile-drawer.open{ transform:translateX(0); }
.mobile-drawer a{ display:block; padding:16px 4px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:19px; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line); color:var(--white); text-align:left; }
.mobile-drawer .plat-label{ font-family:'Rajdhani',sans-serif; font-size:12px; letter-spacing:.14em; color:var(--gray-dim); text-transform:uppercase; margin:24px 0 4px; font-weight:700; text-align:left; }
@media (max-width:1024px){ .footer-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:768px){
  .footer-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-brand{ grid-column:1/-1; }
  .footer-bottom{ flex-direction:column; gap:10px; align-items:flex-start; }
  .header-top{ height:66px; }
  .header-hamburger{ width:60px; }
  .header-hamburger .bars span{ width:20px; }
  .header-logo-block{ gap:16px; padding:0 18px; }
  .header-logo-block img{ height:50px; }
  .nav-row-main{ height:40px; }
  .nav-row-platforms{ height:42px; }
  .nav-row-platforms a{ font-size:11.5px; padding:6px 10px; }
  .mobile-drawer{ top:148px; }
  .news-thumb{ flex-basis:200px; }
}
@media (max-width:560px){
  .news-card{ flex-direction:column; }
  .news-thumb{ flex-basis:auto; width:100%; height:180px; min-height:0; }
  .news-body{ padding:16px 18px; }
}
@media (max-width:480px){
  .cat-head{ padding:36px 16px 22px; }
  .cat-body{ padding:28px 16px 20px; }
  .header-logo-block{ gap:10px; padding:0 14px; }
  .header-logo-block img{ height:42px; }
}

.header-logo-block .brand-wm{ font-family:'Orbitron',sans-serif; font-weight:900; letter-spacing:1.5px; font-size:clamp(18px,3vw,27px); line-height:1; white-space:nowrap; background:linear-gradient(120deg,#6ac8ff,#2f8dff 55%,#bee7ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.footer-wm{ display:inline-block; font-family:'Orbitron',sans-serif; font-weight:900; letter-spacing:1px; font-size:22px; background:linear-gradient(120deg,#6ac8ff,#2f8dff 55%,#bee7ff); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ===== Header de una sola fila (solo escritorio; movil queda igual) ===== */
.nav-search-link{ display:none; }
/* ===== Menu lateral estilo limpio + glow azul electrico (Kotaku-like) ===== */
.mobile-drawer{ top:0; bottom:0; z-index:200; padding:0 0 40px; background:rgba(6,10,16,.985); }
.mobile-drawer.open{ box-shadow: inset -1px 0 0 rgba(47,141,255,.4), 6px 0 30px -8px rgba(47,141,255,.26); }
.drawer-head{ position:relative; padding:14px 20px 16px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.drawer-logo{ height:28px; width:auto; display:block; margin-top:42px; }
.drawer-close{ position:absolute; top:14px; right:14px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; color:var(--white); border-radius:50%; transition:color .2s ease, background .2s ease; }
.drawer-close:hover{ color:var(--electric-2); background:rgba(47,141,255,.12); }
.drawer-close svg{ width:20px; height:20px; }
.mobile-drawer a{ font-family:'Inter',sans-serif; font-weight:600; font-size:15.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--white); padding:15px 22px; border-bottom:1px solid var(--line); transition:color .2s ease, background .2s ease, padding-left .2s ease; }
.mobile-drawer a:hover{ color:var(--electric-2); background:rgba(47,141,255,.07); padding-left:28px; text-shadow:0 0 14px rgba(47,141,255,.55); }
.mobile-drawer .plat-label{ font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.2em; font-weight:700; color:var(--gray-dim); text-transform:uppercase; padding:24px 22px 8px; margin:0; }
@media (min-width:769px){
  header{ display:flex; flex-wrap:wrap; align-items:center; padding-inline:max(24px, calc((100% - var(--maxw))/2 + 24px)); }
  .header-top{ display:contents; }
  .header-nav-row{ display:contents; }
  .header-hamburger{ height:66px; width:62px; border-right:1px solid var(--line); flex-shrink:0; }
  .header-logo-block{ flex:0 0 auto; justify-content:flex-start; padding:0 10px 0 16px; overflow:visible; }
  .header-logo-block img{ height:40px !important; }
  .nav-row-main{ flex:1 1 auto; height:66px; border-bottom:none; align-items:center; padding:0; max-width:none; }
  .nav-links-scroll{ flex:0 1 auto; overflow:visible; }
  .nav-links-scroll a{ font-size:14px; padding:8px 15px; }
  .theme-toggle{ margin-left:auto; height:66px; border-left:none; }
  .nav-search, .nav-search-link{ flex-shrink:0; }
  .nav-search-link{ display:flex; align-items:center; justify-content:center; width:46px; height:66px; color:var(--white); border-left:1px solid var(--line); transition:color .2s ease, background .2s ease; }
  .nav-search-link svg{ width:16px; height:16px; }
  .nav-search-link:hover{ color:var(--electric-2); background:var(--bg-elev); }
  .nav-search-toggle{ height:66px; }
  .nav-row-platforms{ flex:0 0 100%; max-width:none; padding:0; height:46px; border-top:1px solid var(--line); justify-content:flex-start; }
  .mobile-drawer{ top:0; right:auto; width:33.333%; }
}
@media (min-width:1025px){
  .mobile-drawer{ width:20%; }
}

/* ===== Tema claro (por defecto es oscuro) ===== */
:root[data-theme="light"]{
  --bg:#e9eef5;
  --bg-elev:#ffffff;
  --bg-elev-2:#f2f6fb;
  --bg-elev-3:#e6edf6;
  --line: rgba(12,22,38,.12);
  --line-strong: rgba(37,110,190,.32);
  --ice:#123f66;
  --white:#0c1420;
  --gray:#41506a;
  --gray-dim:#5c6c85;
  --electric-glow: rgba(47,141,255,.22);
  --electric-2:#123f66;
}
:root[data-theme="light"] body::before{ opacity:.5; }
:root[data-theme="light"] .article-body p{ color:#2a3542; }
:root[data-theme="light"] .article-body p strong{ color:#0c1420; }
:root[data-theme="light"] .mobile-drawer{ background:rgba(233,238,245,.985); }
:root[data-theme="light"] .tag, :root[data-theme="light"] .eyebrow, :root[data-theme="light"] .article-cat, :root[data-theme="light"] .cat-tag, :root[data-theme="light"] .hero-content .cat{ color:#1c5aa0; }
:root[data-theme="light"] .trailer-footer h4{ color:#e8eef4; }
:root[data-theme="light"] .header-logo-block img, :root[data-theme="light"] .footer-brand img, :root[data-theme="light"] .drawer-logo{ filter:invert(1) hue-rotate(180deg); }
/* ===== Boton de cambio de tema ===== */
.theme-toggle{ flex-shrink:0; width:44px; height:100%; display:flex; align-items:center; justify-content:center; background:transparent; border:none; border-left:1px solid var(--line); color:var(--white); transition:background .2s ease, color .2s ease; }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle:hover{ background:var(--bg-elev); color:var(--electric-2); }
.theme-toggle .moon{ display:none; }
:root[data-theme="light"] .theme-toggle .sun{ display:none; }
:root[data-theme="light"] .theme-toggle .moon{ display:block; }
.drawer-theme{ display:flex; align-items:center; gap:12px; width:100%; background:transparent; border:none; border-top:1px solid var(--line); margin-top:14px; color:var(--white); font-family:'Inter',sans-serif; font-weight:600; font-size:15.5px; letter-spacing:.06em; text-transform:uppercase; padding:18px 22px; cursor:pointer; transition:color .2s ease, background .2s ease, padding-left .2s ease; }
.drawer-theme:hover{ color:var(--electric-2); background:rgba(47,141,255,.07); padding-left:28px; }
.drawer-theme svg{ width:18px; height:18px; flex-shrink:0; }
.drawer-theme .moon{ display:none; }
.drawer-theme .lbl-dark{ display:none; }
:root[data-theme="light"] .drawer-theme .sun{ display:none; }
:root[data-theme="light"] .drawer-theme .moon{ display:block; }
:root[data-theme="light"] .drawer-theme .lbl-light{ display:none; }
:root[data-theme="light"] .drawer-theme .lbl-dark{ display:inline; }

/* ---- Circulo "Anadenos en Google" (fuentes preferidas) en el menu ---- */
.drawer-google{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:26px 20px 14px; }
.drawer-google .dg-lb{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gray-dim); }
.gsource-circle{ position:relative; display:inline-block; width:56px; height:56px; border-radius:50%; overflow:hidden; box-shadow:0 4px 18px rgba(66,133,244,.4); transition:transform .2s ease; }
.gsource-circle:hover{ transform:scale(1.06); }
.gsource-circle::before{ content:""; position:absolute; inset:-40%; background:conic-gradient(from 0deg,#4285F4,#EA4335,#FBBC05,#34A853,#4285F4); animation:gspin 5.5s linear infinite; }
.gsc-face{ position:absolute; inset:3px; z-index:1; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; }
.gsc-face svg{ width:24px; height:24px; }
@keyframes gspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .gsource-circle::before{ animation:none; } }

/* fila inferior del menu: tema (izq) + Google (der) en dos columnas */
.drawer-bottom{ display:flex; align-items:center; justify-content:flex-start; gap:16px; border-top:1px solid var(--line); margin-top:14px; padding:14px 22px 8px; }
.drawer-bottom .drawer-theme{ width:auto; flex:0 0 auto; border-top:none; margin-top:0; padding:8px 8px; }
.drawer-bottom .drawer-theme:hover{ padding-left:8px; }
.gsource-circle{ width:44px; height:44px; }

/* Footer siempre en modo oscuro, sin importar el tema */
:root[data-theme="light"] footer{ --bg:#05080d; --bg-elev:#0b1119; --bg-elev-2:#0f1826; --line:rgba(255,255,255,.08); --line-strong:rgba(127,198,255,.25); --white:#e8eef4; --gray:#93a3bd; --gray-dim:#7d8ba6; --electric-2:#6ac8ff; }
:root[data-theme="light"] .footer-brand img{ filter:none; }