/* Fin del Juego - estilos de nota
   Compartido por 13 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; --article-w: 760px;
}
*{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;}
ul{list-style: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; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.nav-links-scroll::-webkit-scrollbar{ display:none; }
.nav-links-scroll a{ scroll-snap-align:start; }
.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-search{ position:relative; flex-shrink:0; }
.nav-search-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; }
.nav-search-toggle svg{ width:16px; height:16px; }
.nav-search-toggle:hover{ background:var(--bg-elev); color:var(--electric-2); }
.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); }
main{ position:relative; z-index:1; }
.article-head{ border-bottom:1px solid var(--line); padding:40px 0 32px; }
.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; }
.article-cat{ display:inline-flex; align-items:center; gap:8px; margin-bottom:18px; padding:5px 12px; 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); }
.article-cat svg{ width:14px; height:14px; }
.article-title{ font-size:clamp(30px,5vw,54px); color:var(--white); max-width:960px; margin-bottom:22px; }
.article-meta{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; font-family:'Rajdhani',sans-serif; font-weight:600; font-size:13.5px; letter-spacing:.04em; color:var(--gray-dim); text-transform:uppercase; }
.article-meta span{ display:flex; align-items:center; gap:7px; }
.article-meta svg{ width:14px; height:14px; }
.article-author strong{ color:var(--gray); font-weight:700; }
.article-cover{ margin-top:36px; border:1px solid var(--line); overflow:hidden; position:relative; }
.article-cover img{ width:100%; height:auto; max-height:520px; object-fit:cover; }
.article-cover figcaption{ padding:12px 16px; background:var(--bg-elev); font-family:'Rajdhani',sans-serif; font-size:12px; color:var(--gray); letter-spacing:.03em; border-top:1px solid var(--line); }
.article-body{ max-width:var(--article-w); margin:0 auto; padding:44px 0 20px; }
.article-lead{ font-size:20px; line-height:1.55; color:var(--ice); font-weight:500; margin-bottom:32px; padding-left:18px; border-left:3px solid var(--electric); }
.article-body p{ font-size:17px; line-height:1.75; color:#c7d0dd; margin-bottom:24px; }
.article-body h2{ font-family:'Orbitron',sans-serif; font-size:22px; color:var(--white); margin:38px 0 18px; display:flex; align-items:center; gap:12px; }
.article-body h2 .dash{ width:24px; height:3px; background:var(--electric); display:inline-block; }
.article-figure{ margin:36px 0; }
.article-figure img{ width:100%; border:1px solid var(--line); }
.article-figure figcaption{ margin-top:12px; padding-bottom:14px; border-bottom:1px solid var(--line); font-family:'Rajdhani',sans-serif; font-size:12.5px; color:var(--gray); letter-spacing:.03em; text-align:center; }
.article-video{ max-width:var(--article-w); margin:40px auto; }
.article-video .video-frame{ position:relative; width:100%; padding-top:56.25%; border:1px solid var(--line-strong); overflow:hidden; background:#000; box-shadow:0 0 0 1px rgba(47,141,255,.08) inset, 0 14px 34px rgba(0,0,0,.5); }
.article-video .video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.article-video figcaption{ margin-top:12px; padding-bottom:14px; border-bottom:1px solid var(--line); font-family:'Rajdhani',sans-serif; font-size:12.5px; color:var(--gray); letter-spacing:.03em; text-align:center; }
.article-quote{ margin:34px 0; padding:24px 28px; border:1px solid var(--line-strong); background:var(--bg-elev); font-size:19px; line-height:1.5; color:var(--ice); font-style:italic; }
.article-quote cite{ display:block; margin-top:12px; font-style:normal; font-family:'Rajdhani',sans-serif; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-dim); }
.article-tags{ max-width:var(--article-w); margin:20px auto 0; display:flex; gap:10px; flex-wrap:wrap; padding-top:28px; border-top:1px solid var(--line); }
.article-tags .t{ font-family:'Rajdhani',sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); border:1px solid var(--line-strong); padding:6px 12px; transition:all .2s ease; }
.article-tags .t:hover{ color:var(--electric-2); border-color:var(--electric); }
.back-row{ max-width:var(--article-w); margin:36px auto 0; }
.btn-back{ display:inline-flex; align-items:center; gap:10px; font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:13.5px; padding:12px 20px; border:1px solid var(--line-strong); color:var(--white); transition:all .2s ease; }
.btn-back:hover{ border-color:var(--electric); color:var(--electric-2); }
.btn-back 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; }
.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-logo{ height:42px; width:auto; object-fit:contain; }
  .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-links-scroll a:last-child{ padding-right:16px; }
  .nav-row-platforms{ height:42px; }
  .nav-row-platforms a{ font-size:11.5px; padding:6px 10px; }
  .mobile-drawer{ top:148px; }
  .article-cover img{ max-height:280px; }
}
@media (max-width:480px){
  .wrap{ padding:0 16px; }
  .header-logo-block{ gap:10px; padding:0 14px; }
  .header-logo-block img{ height:42px; }
  .article-body p{ font-size:16px; }
  .article-lead{ font-size:18px; }
}

.related{ max-width:var(--article-w); margin:44px auto 0; padding-top:28px; border-top:1px solid var(--line); }
.related h2{ font-family:'Orbitron',sans-serif; font-weight:800; font-size:18px; color:var(--white); margin-bottom:18px; display:flex; align-items:center; gap:12px; }
.related h2 .dash{ width:24px; height:3px; background:var(--electric); display:inline-block; }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.related-card{ display:block; border:1px solid var(--line); background:var(--bg-elev); transition:border-color .2s ease, transform .2s ease; }
.related-card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.related-thumb{ height:100px; position:relative; overflow:hidden; }
.related-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.related-name{ display:block; padding:12px 14px; font-family:'Inter',sans-serif; font-weight:700; font-size:13px; line-height:1.35; color:var(--white); }
@media (max-width:640px){ .related-grid{ grid-template-columns:1fr; } }

.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; }