/* COSM-GAME unified desktop header v9 — About visible
   This is the one desktop header surface used by Home, archives, search,
   Game Profile, Codes, Guide and News pages. Existing mobile navs stay intact. */

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}

.cg-desktop-header-zone{display:none;}

@keyframes cg-unified-nav-march{
  to{background-position:8px 0,-8px 100%,0 -8px,100% 8px,0 0;}
}

@media (min-width:861px){
  /* Keep the desktop layout viewport width identical on every route.
     Without a permanent scrollbar gutter, navigating between a page that
     needs a vertical scrollbar and one that does not shifts centered
     content horizontally by roughly half the scrollbar width. */
  html{
    overflow-y:scroll!important;
    scrollbar-gutter:stable;
  }
  /* Match the homepage's patterned field behind the bar, removing the old
     full-width black/nav band entirely. */
  .cg-desktop-header-zone{
    display:block;
    position:sticky;
    top:0;
    z-index:1000;
    width:100%;
    padding:14px 0;
    margin:0;
    background:#080b12;
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2217.32%22%20height%3D%2230.00%22%20viewBox%3D%220%200%2017.32%2030.00%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%234b8bf4%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220.14%22%3E%3Cpolygon%20points%3D%22-8.66%2C-25.00%200.00%2C-20.00%200.00%2C-10.00%20-8.66%2C-5.00%20-17.32%2C-10.00%20-17.32%2C-20.00%22%20/%3E%3Cpolygon%20points%3D%228.66%2C-25.00%2017.32%2C-20.00%2017.32%2C-10.00%208.66%2C-5.00%20-0.00%2C-10.00%200.00%2C-20.00%22%20/%3E%3Cpolygon%20points%3D%2225.98%2C-25.00%2034.64%2C-20.00%2034.64%2C-10.00%2025.98%2C-5.00%2017.32%2C-10.00%2017.32%2C-20.00%22%20/%3E%3Cpolygon%20points%3D%22-17.32%2C-10.00%20-8.66%2C-5.00%20-8.66%2C5.00%20-17.32%2C10.00%20-25.98%2C5.00%20-25.98%2C-5.00%22%20/%3E%3Cpolygon%20points%3D%220.00%2C-10.00%208.66%2C-5.00%208.66%2C5.00%200.00%2C10.00%20-8.66%2C5.00%20-8.66%2C-5.00%22%20/%3E%3Cpolygon%20points%3D%2217.32%2C-10.00%2025.98%2C-5.00%2025.98%2C5.00%2017.32%2C10.00%208.66%2C5.00%208.66%2C-5.00%22%20/%3E%3Cpolygon%20points%3D%22-8.66%2C5.00%200.00%2C10.00%200.00%2C20.00%20-8.66%2C25.00%20-17.32%2C20.00%20-17.32%2C10.00%22%20/%3E%3Cpolygon%20points%3D%228.66%2C5.00%2017.32%2C10.00%2017.32%2C20.00%208.66%2C25.00%20-0.00%2C20.00%200.00%2C10.00%22%20/%3E%3Cpolygon%20points%3D%2225.98%2C5.00%2034.64%2C10.00%2034.64%2C20.00%2025.98%2C25.00%2017.32%2C20.00%2017.32%2C10.00%22%20/%3E%3Cpolygon%20points%3D%22-17.32%2C20.00%20-8.66%2C25.00%20-8.66%2C35.00%20-17.32%2C40.00%20-25.98%2C35.00%20-25.98%2C25.00%22%20/%3E%3Cpolygon%20points%3D%220.00%2C20.00%208.66%2C25.00%208.66%2C35.00%200.00%2C40.00%20-8.66%2C35.00%20-8.66%2C25.00%22%20/%3E%3Cpolygon%20points%3D%2217.32%2C20.00%2025.98%2C25.00%2025.98%2C35.00%2017.32%2C40.00%208.66%2C35.00%208.66%2C25.00%22%20/%3E%3C/g%3E%3C/svg%3E"),
      radial-gradient(circle at 15% 0%, rgba(75,139,244,0.10), transparent 40%),
      radial-gradient(circle at 85% 15%, rgba(124,92,255,0.08), transparent 40%);
    background-repeat:repeat, no-repeat, no-repeat;
    background-size:17.32px 30.00px, auto, auto;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:#e8ebf1;
  }

  /* The old per-template desktop nav remains in the DOM for mobile only. */
  body > nav.nav{display:none!important;}

  /* Same visible panel width as the homepage: 1180 shell minus 32px each side. */
  .cg-desktop-header{
    width:calc(100% - 64px);
    max-width:1116px;
    height:62px;
    margin:0 auto;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:20px;
    background:#111825;
    border:1px solid rgba(255,255,255,.07);
    border-radius:12px;
    box-sizing:border-box;
    box-shadow:none;
  }

  .cg-desktop-brand{
    display:flex!important;
    align-items:center!important;
    gap:11px!important;
    flex:0 0 auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:none!important;
    color:#fff!important;
    text-decoration:none!important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
    font-size:16.5px!important;
    line-height:1!important;
    font-weight:700!important;
    letter-spacing:.005em!important;
  }
  .cg-desktop-brand img{
    display:block!important;
    width:30px!important;
    height:30px!important;
    min-width:30px!important;
    min-height:30px!important;
    flex:0 0 30px!important;
    object-fit:cover!important;
    border-radius:9px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    box-shadow:none!important;
  }

  .cg-desktop-menu{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    flex:1 1 auto!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
  .cg-desktop-menu > a{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:34px!important;
    padding:8px 13px!important;
    margin:0!important;
    border:0!important;
    border-radius:8px!important;
    color:#93a0b8!important;
    text-decoration:none!important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
    font-size:13px!important;
    line-height:18px!important;
    font-weight:500!important;
    background-color:transparent!important;
    background-image:
      linear-gradient(90deg,#4b8bf4 50%,transparent 50%),
      linear-gradient(90deg,#4b8bf4 50%,transparent 50%),
      linear-gradient(0deg,#4b8bf4 50%,transparent 50%),
      linear-gradient(0deg,#4b8bf4 50%,transparent 50%),
      linear-gradient(180deg,rgba(75,139,244,.06),rgba(75,139,244,.06))!important;
    background-repeat:repeat-x,repeat-x,repeat-y,repeat-y,no-repeat!important;
    background-size:8px 1px,8px 1px,1px 8px,1px 8px,100% 100%!important;
    background-position:0 0,0 100%,0 0,100% 0,0 0!important;
    animation:cg-unified-nav-march .7s infinite linear!important;
    box-shadow:none!important;
    transition:color .15s ease!important;
  }
  .cg-desktop-menu > a:hover{color:#fff!important;}
  .cg-desktop-menu > a.active,
  .cg-desktop-menu > a[aria-current="page"]{
    color:#fff!important;
    font-weight:600!important;
    background-image:
      linear-gradient(90deg,#4b8bf4 50%,transparent 50%),
      linear-gradient(90deg,#4b8bf4 50%,transparent 50%),
      linear-gradient(0deg,#4b8bf4 50%,transparent 50%),
      linear-gradient(0deg,#4b8bf4 50%,transparent 50%),
      linear-gradient(180deg,rgba(75,139,244,.20),rgba(75,139,244,.20))!important;
  }

  /* Existing renderer order is Latest, Games, Upcoming, Codes, Guides, News,
     About. Reorder visually to the homepage order without touching renderer logic. */
  /* Fixed button widths stop the whole menu from jumping sideways when a
     different item becomes active/bold after navigation. */
  .cg-desktop-menu .cg-desktop-home{order:0;width:63px!important;}
  .cg-desktop-menu a[href="/updates/"]{order:1;width:65px!important;}
  .cg-desktop-menu a[href="/games/"]{order:2;width:66px!important;}
  .cg-desktop-menu a[href="/codes/"]{order:3;width:64px!important;}
  .cg-desktop-menu a[href="/guides/"]{order:4;width:70px!important;}
  .cg-desktop-menu a[href="/news/"]{order:5;width:61px!important;}
  .cg-desktop-menu a[href="/upcoming/"]{order:6;width:91px!important;}
  .cg-desktop-menu a[href="/about/"]{order:7;width:65px!important;display:inline-flex!important;}

  .cg-desktop-search{
    flex:0 0 262px!important;
    width:262px!important;
    height:36px!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    margin:0!important;
    padding:0 12px!important;
    background:rgba(0,0,0,.28)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    border-radius:9px!important;
    box-sizing:border-box!important;
    box-shadow:none!important;
    transition:border-color .18s ease,box-shadow .18s ease!important;
  }
  .cg-desktop-search:hover{border-color:rgba(255,255,255,.13)!important;}
  .cg-desktop-search:focus-within{
    border-color:rgba(75,139,244,.55)!important;
    box-shadow:0 0 0 3px rgba(75,139,244,.12)!important;
  }
  .cg-desktop-search-icon{
    width:13px!important;
    height:13px!important;
    flex:0 0 13px!important;
    color:#6b7794!important;
    display:block!important;
  }
  .cg-desktop-search:focus-within .cg-desktop-search-icon{color:#4b8bf4!important;}
  .cg-desktop-search input{
    flex:1 1 auto!important;
    width:100%!important;
    min-width:0!important;
    height:34px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    color:#eef2ff!important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
    font-size:12.5px!important;
    line-height:34px!important;
    font-weight:400!important;
    box-shadow:none!important;
  }
  .cg-desktop-search input::placeholder{color:#66708a!important;opacity:1!important;}

  /* Keep non-home desktop content on the same 1180px shell as the homepage. */
  .page-wrap{
    width:100%!important;
    max-width:1180px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:32px!important;
    padding-right:32px!important;
  }

  @media (max-width:1120px){
    .cg-desktop-header{width:calc(100% - 48px);padding-left:12px;padding-right:12px;gap:14px;}
    .cg-desktop-menu{gap:5px!important;}
    .cg-desktop-menu > a{padding-left:9px!important;padding-right:9px!important;font-size:12px!important;}
    .cg-desktop-search{flex-basis:210px!important;width:210px!important;}
  }

  @media (prefers-reduced-motion:reduce){
    .cg-desktop-menu > a{animation:none!important;}
  }
}