/* Horizons Roleplay: the site header (Oct 2026).
   The crest hangs in the middle; the pages sit to its left as leaning outlined
   tabs; the radio, Discord, Join Server (when queueing is open to you) and the
   account control sit to its right. Signed out the account control is Steam's
   own "Sign in"; signed in it is one chip, the menu lines and your Steam
   picture, opening a menu attached underneath it. header.js runs the menu.
   Sharp 3px corners throughout (--r). Loaded after styles.css. */

.navbar { --r: 3px; }

/* ---- three zones: the left group, the crest's own space, the right group,
   so nothing can slide under the crest whatever the width ---- */
.navbar .bar.hz { display: grid; grid-template-columns: minmax(0, 1fr) 470px minmax(0, 1fr); gap: 0; }
.hz .hl { grid-column: 1; display: flex; align-items: center; gap: 26px; min-width: 0; }
.hz .hr { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }
.hz .hl > *, .hz .hr > * { flex-shrink: 0; }
/* the lit edge adds 10px under the 62px bar, so the header reads as 72px:
   the groups sit 5px low to be centred in that, with equal room above and
   below them */
.hz .hl, .hz .hr { position: relative; top: 5px; }
.hz .fmwidget, .hz .navdiscord, .hz .steamnav, .hz .joinslot { margin-left: 0; }

/* ---- the pages: leaning outlined tabs, the page you are on lit ---- */
.hz .navtabs { gap: 8px; }
.hz .navtabs a { display: flex; align-items: center; height: 36px; padding: 0 20px; isolation: isolate;
  font-family: "Oswald", Arial, sans-serif; font-style: italic; font-size: 14px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; color: #AEB6C4; transition: color .2s ease; }
.hz .navtabs a:hover, .hz .navtabs a.active { color: #FFFFFF; text-decoration: none; }
.hz .navtabs a::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-18deg);
  border-radius: var(--r); border: 1.5px solid transparent; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.hz .navtabs a:hover::before { border-color: rgba(255, 255, 255, 0.18); }
.hz .navtabs a.active::before { border-color: #2E8CFF; background: rgba(46, 140, 255, 0.1);
  box-shadow: 0 0 14px rgba(46, 140, 255, 0.45), inset 0 0 10px rgba(46, 140, 255, 0.18); }
.hz .navtabs a::after { display: none; }

/* ---- the chips on the right ---- */
.hz .fmwidget, .hz .navdiscord, .hz .navmenu, .hz .steamnav, .hz .joinnav { border-radius: var(--r); }
.hz .fmwidget.icon { width: 38px; padding: 0; justify-content: center; }
.hz .fmwidget.icon .fmsong { display: none; }
.hz .fmwidget.icon img { height: 22px; }
.hz .fmwidget.icon .eqmini { padding: 0 3px; }
.hz .fmwidget.icon .eqmini i:nth-child(n+9) { display: none; }
.hz .navdiscord.icon { width: 38px; padding: 0; justify-content: center; }
.hz .navdiscord.icon svg { width: 20px; height: 20px; fill: currentColor; }
/* the owner-test Join Server control (queue-web.js) sits in the same row */
.hz .qwpanel { border-radius: var(--r); }
/* #steamNav stays put for queue-web.js, which inserts Join Server before it;
   header.js swaps only what is inside (Sign in, or the account chip) */
.hz .acct { display: contents; }

/* ---- the account chip: the lines first, then the Steam picture ---- */
.menuwrap { position: relative; display: inline-flex; }
.navmenu { position: relative; display: inline-flex; align-items: center; gap: 11px; height: 38px; box-sizing: border-box;
  cursor: pointer; padding: 0 6px 0 11px; white-space: nowrap; font: 600 13.5px "Inter", Arial, sans-serif; color: #E4EEFF;
  background: #10141F; border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.navmenu:hover { border-color: #2E8CFF; box-shadow: 0 0 14px rgba(46, 140, 255, 0.35); }
.navmenu:focus-visible { outline: 2px solid #8CC3FF; outline-offset: 2px; }
.navmenu .mav { width: 26px; height: 26px; border-radius: min(4px, var(--r)); display: block; flex-shrink: 0; object-fit: cover; background: #1A2233; }
.navmenu span.mav { display: flex; align-items: center; justify-content: center; font: 600 14px "Oswald", Arial, sans-serif; color: #9CC6FF; }
.navmenu .lines { position: relative; display: block; width: 17px; height: 14px; flex-shrink: 0; }
.navmenu .lines i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 1px; background: #E4EEFF;
  transition: transform .26s cubic-bezier(.3, .9, .3, 1), opacity .18s ease, top .26s cubic-bezier(.3, .9, .3, 1); }
.navmenu .lines i:nth-child(1) { top: 1px; }
.navmenu .lines i:nth-child(2) { top: 6px; }
.navmenu .lines i:nth-child(3) { top: 11px; }
.navmenu[aria-expanded="true"] .lines i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.navmenu[aria-expanded="true"] .lines i:nth-child(2) { opacity: 0; }
.navmenu[aria-expanded="true"] .lines i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* open, the chip and the menu are one shape with one outline: the chip's
   bottom opens, a neck the chip's width carries the outline down past the
   other header buttons, and the menu slides out from under it */
.menuwrap.open .navmenu { z-index: 62; background: #0E121B; box-shadow: none; border-color: rgba(46, 140, 255, 0.6);
  border-bottom-color: #0E121B; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hmneck { position: absolute; top: calc(100% - 1px); right: 0; z-index: 62; box-sizing: border-box; width: var(--bw, 72px); height: 12px;
  background: #0E121B; border-left: 1px solid rgba(46, 140, 255, 0.6); border-right: 1px solid rgba(46, 140, 255, 0.6);
  transform-origin: top; animation: hmdrop .1s ease-out both; }
@keyframes hmdrop { from { transform: scaleY(0); } }
.hmenu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 61; width: 272px; box-sizing: border-box; padding: 8px;
  background: #0E121B; border: 1px solid rgba(46, 140, 255, 0.6); border-radius: var(--r); border-top-right-radius: 0;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); font-family: "Inter", Arial, sans-serif; text-align: left;
  animation: hmslide .22s cubic-bezier(.3, .9, .3, 1) .06s both; }
@keyframes hmslide { from { clip-path: inset(0 0 100% 0); transform: translateY(-8px); } to { clip-path: inset(0 0 0 0); transform: none; } }
.hmscroll { max-height: calc(100vh - 106px); overflow-y: auto; overscroll-behavior: contain; }
@keyframes hmitem { from { opacity: 0; transform: translateY(-5px); } }
.hmscroll > * { animation: hmitem .24s ease both; }
@keyframes hmout { to { opacity: 0; transform: translateY(-6px); } }
.hmenu.out, .hmneck.out { animation: hmout .16s ease forwards; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hmenu, .hmneck, .hmscroll > *, .navmenu .lines i { animation: none !important; transition: none !important; } }

.hmhead { display: flex; align-items: center; gap: 12px; padding: 8px 8px 12px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.hmhead .av { width: 40px; height: 40px; border-radius: min(6px, var(--r)); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; background: #1A2233; object-fit: cover; font: 600 18px "Oswald", Arial, sans-serif; color: #9CC6FF; }
.hmname { display: block; font: 600 16px "Oswald", Arial, sans-serif; letter-spacing: .5px; color: #FFFFFF; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmsub { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 12px; color: #8C95A8; }
.hmsub i { width: 7px; height: 7px; border-radius: 50%; background: #3DC97A; box-shadow: 0 0 7px rgba(61, 201, 122, 0.8); }
.hmlabel { display: block; padding: 8px 10px 4px; font: 600 10.5px "Oswald", Arial, sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: #6E7688; }
.hmi { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 10px; border-radius: min(6px, var(--r)); cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: #C9CFDB; text-decoration: none; transition: background-color .14s ease, color .14s ease; }
.hmi:hover, .hmi:focus-visible { background: #141C2C; color: #FFFFFF; text-decoration: none; outline: none; }
.hmi svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.hmi svg.fill { fill: currentColor; stroke: none; }
.hmi img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.hmi .ext { width: 13px; height: 13px; margin-left: auto; opacity: .5; }
.hmi.out { color: #E58A82; }
.hmi.out:hover { background: rgba(224, 87, 78, 0.1); color: #FF9E96; }
.hmsep { height: 1px; margin: 6px 4px; background: rgba(255, 255, 255, 0.07); }

/* ---- narrower screens: chips step into the menu ---- */
@media (max-width: 1280px) {
  body.hdr-in .hz .navdiscord { display: none; }   /* into the menu, which only exists signed in */
  .hz .hl { gap: 18px; }
}
/* too narrow to hang the crest between the groups: it shrinks to the left of
   the bar, as on phones, and the rim runs unbroken */
@media (max-width: 1120px) {
  .navbar .bar.hz { display: flex; gap: 22px; }
  /* left: auto matters: the centred crest's left: 50% otherwise survives the
     switch to relative and pushes it half the bar to the right, over the tabs
     (it did, Oct 2026, on everything from tablets down) */
  .hz .navbrand { position: relative; left: auto; top: 5px; transform: none; order: -1; }
  .hz .navbrand img { height: 36px; filter: none; }
  .hz .hr { margin-left: auto; }
  .navwing .nwm::after { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 860px) { .hz .steamnav.signchip { display: inline-flex; } }
@media (max-width: 700px) {
  body.hdr-in .hz .hl, .hz .fmwidget, .hz .navdiscord, .hz .joinslot { display: none; }
  .hz .navtabs a { padding: 0 14px; }
}
@media (max-width: 560px) { .hz .steamnav.signchip { display: none; } }
/* ---- phones (user, Oct 30 2026: "the header needs improved, I still want
   the logo centred"; "too sharp of an angle") ----
   The desktop look, folded down: the crest in the middle, hanging through the
   lit edge, which breaks behind it; a menu key on the left (the account chip
   when signed in, else the pages key header.js adds, of the same lines) and
   the HorizonsFM button on the right. The page tabs live in the menu. The
   edge's corners are drawn at a fixed size here, so they keep a gentle slope
   instead of squeezing steeper as the screen narrows. */
.hz .menuwrap.pm { display: none; }
.hmi.on { color: #FFFFFF; background: rgba(46, 140, 255, 0.12); box-shadow: inset 2px 0 0 #2E8CFF; }
@media (max-width: 520px) {
  .navbar .bar.hz { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 50px; align-items: center; gap: 10px; height: 50px; }   /* a fixed row: the hanging crest must not grow it */
  .hz .hl { display: none; }
  .hz .hr, .hz .acct { display: contents; }
  .hz .hr > :not(.fmwidget):not(.acct), .hz .acct > :not(.menuwrap) { display: none; }
  /* left: the menu key; right: the radio; both centred in the bar and its lit lip */
  /* the keys sit midway between the top of the screen and the edge under them (user, Oct 30 2026) */
  .hz .menuwrap { grid-column: 1; grid-row: 1; justify-self: start; position: relative; top: 13px; z-index: 7; }   /* over the edge below; its drawer over the radio key */
  .hz .menuwrap.pm { display: inline-flex; }
  .hz .navmenu.pm { width: 38px; padding: 0 0 6px; justify-content: center; }
  /* signed in, the account chip shows only its lines, the same key as signed
     out, so the crest stays centred at full size (the drawer shows the avatar) */
  .hz .navmenu .mav { display: none; }
  .hz .navmenu:not(.pm) { width: 38px; padding: 0 0 6px; justify-content: center; }
  .hz .fmwidget { grid-column: 3; grid-row: 1; justify-self: end; position: relative; top: 13px; z-index: 6; display: inline-flex; }
  .hz .fmwidget.icon { width: 38px; padding-bottom: 6px; }
  .hz .fmwidget.icon img { height: 20px; }
  /* the corner keys take the header's own shape (user, Oct 30 2026): square
     corners, and the bottom edge angled like the edge's corner below them,
     the left key's falling to the left, the right key's to the right. The
     outline is two clipped layers, so the angled side has one too. */
  .hz .navmenu, .hz .fmwidget.icon { height: 38px; border: 0; border-radius: 0; background: none; box-shadow: none; isolation: isolate;
    --kb: rgba(255, 255, 255, 0.16); --kf: #10141F; }
  .hz .navmenu { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), 0 100%); }
  .hz .fmwidget.icon { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 11px)); }
  .hz .navmenu::before, .hz .fmwidget.icon::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--kb); clip-path: inherit; transition: background-color .2s ease; }
  .hz .navmenu::after, .hz .fmwidget.icon::after { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--kf); clip-path: inherit; }
  .hz .navmenu:hover, .hz .fmwidget.icon:hover, .hz .navmenu[aria-expanded="true"] { --kb: #2E8CFF; box-shadow: none; }
  /* the radio key's level bars ride its angled bottom edge */
  .hz .fmwidget.icon .eqmini { height: 7px; padding: 0 4px; bottom: 1px; transform: skewY(16deg); transform-origin: 100% 100%; }
  /* the crest, centred, hanging through the edge as it does on desktop: as
     large as the room between the two keys allows, up to 60px tall (user:
     "banner needs to be larger"; it was 44), its top set so the edge passes
     just under HORIZONS, 60% of the way down */
  .navbar { --crest-h: min(60px, calc((100vw - 128px) / 4.18)); }
  .hz .navbrand { grid-column: 2; grid-row: 1; justify-self: center; align-self: start; position: relative; left: auto; top: 0; transform: none; margin-top: calc(61px - var(--crest-h) * 0.6); z-index: 5; }
  .hz .navbrand img { height: var(--crest-h); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)); }
  /* the menu: a drawer from the left edge of the screen over a dimmed page
     (user, Oct 30 2026), not a dropdown under the key */
  body.hm-open { overflow: hidden; }
  .hz .hmneck { display: none; }
  .hz .menuwrap.open .navmenu { z-index: auto; }   /* under the drawer, which has its own close key */
  .hz .hmdim { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(3, 5, 9, 0.62); animation: hmdimin .24s ease both; }
  .hz .hmenu { position: fixed; top: 0; bottom: 0; left: 0; right: auto; z-index: 61; width: min(300px, 84vw); padding: 0; display: flex; flex-direction: column;
    border: 0; border-right: 1px solid rgba(46, 140, 255, 0.5); border-radius: 0; box-shadow: 14px 0 40px rgba(0, 0, 0, 0.55);
    animation: hmdrawer .28s cubic-bezier(.3, .9, .3, 1) both; }
  .hz .hmenu.out { animation: hmdrawerout .18s ease forwards; }
  .hz .hmdim.out { animation: hmdimout .18s ease forwards; pointer-events: none; }
  .hz .hmtop { display: flex; flex: none; align-items: center; justify-content: space-between; height: 64px; padding: 0 12px 0 16px; box-sizing: border-box;
    border-bottom: 1px solid rgba(46, 140, 255, 0.3); }
  .hz .hmtop img { height: 34px; width: auto; display: block; }
  .hz .hmclose { display: flex; align-items: center; justify-content: center; width: 38px; height: 34px; padding: 0; cursor: pointer; color: #E4EEFF;
    background: #10141F; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r); }
  .hz .hmclose svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .hz .hmscroll { flex: 1; min-height: 0; max-height: none; padding: 10px 10px 24px; }
  .hz .hmi { height: 46px; font-size: 15px; }
  /* the lit edge: one flat run with a break behind the crest, and a corner at
     each side dropping 20px over 71px (about 16 degrees; it was near 50 on a
     phone, the desktop corners squeezed into half the width) */
  .navwing { --gap: calc(var(--crest-h, 44px) * 4.18 + 12px); }   /* the crest is 4.18 times as wide as it is tall */
  .navwing svg { display: none; }
  .navwing .nwm { flex: 1 1 auto; }
  /* the line runs on behind the crest (user, Oct 30 2026), no break */
  .navwing .nwm::after { left: 70px; right: 70px; -webkit-mask-image: none; mask-image: none; }
  .navwing::before, .navwing::after { content: ""; position: absolute; top: 0; z-index: 1; width: 72px; height: 34px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='34' viewBox='0 0 72 34'%3E%3Cpath d='M0 10H71L0 30Z' fill='%230A0D14'/%3E%3Cpath d='M71.5 11L0 31' fill='none' stroke='%232E8CFF' stroke-width='2'/%3E%3C/svg%3E") no-repeat 0 0 / 72px 34px; }
  .navwing::before { left: 0; }
  .navwing::after { right: 0; transform: scaleX(-1); }
}
/* the smallest phones: a size down */
@media (max-width: 374px) {
  .navbar .wrap { padding: 0 12px; }
  .navbar { --crest-h: min(60px, calc((100vw - 120px) / 4.18)); }
  .hz .navmenu .mav { display: none; }
  .hz .navmenu:not(.pm) { width: 38px; padding: 0 0 6px; justify-content: center; }
}

/* the drawer (phones) and its dimmed page */
.hmtop, .hmdim { display: none; }
@keyframes hmdrawer { from { transform: translateX(-100%); } }
@keyframes hmdrawerout { to { transform: translateX(-100%); } }
@keyframes hmdimin { from { opacity: 0; } }
@keyframes hmdimout { to { opacity: 0; } }