/* TraderMap header v2: grouped navigation, animated ChartRider entry, single Trade menu */
.tm-head { position: sticky; top: 0; z-index: 300; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
/* blur lives on a pseudo-element: a backdrop-filter on the header itself would trap the fixed mobile menu inside it */
.tm-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 28, 41, 0.84); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.tm-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(241,194,125,.45) 22%, rgba(63,224,176,.35) 60%, transparent); opacity: .7; pointer-events: none; }
.tm-head-in { position: relative; max-width: 1760px; margin: 0 auto; height: 60px; padding: 0 18px; display: flex; align-items: center; gap: 14px; }
.tm-head .brand { flex: 0 0 auto; display: flex; align-items: center; padding-right: 8px; }
.tm-head a { text-decoration: none; }

.tm-nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; }
.tm-nav .nl { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border: 0; border-radius: 999px; background: none; color: #aebfca; font: 500 0.86rem/1 var(--sans); cursor: pointer; white-space: nowrap; transition: color .15s, background .15s; }
.tm-nav .nl:hover, .tm-nav .dd.open > .nl { color: #fff; background: rgba(255,255,255,.07); }
.tm-nav .nl.active, .tm-nav .dd.has-active > .nl { color: #fff; background: rgba(241,194,125,.13); box-shadow: inset 0 0 0 1px rgba(241,194,125,.38); }
.tm-nav .chev { width: 10px; height: 10px; opacity: .7; transition: transform .18s; }
.tm-nav .dd.open .chev { transform: rotate(180deg); }

.dd { position: relative; }
.dd-panel { position: absolute; left: 0; top: calc(100% + 12px); min-width: 310px; padding: 8px; background: #0e2434; border: 1px solid var(--line-light); border-radius: 18px; box-shadow: 0 28px 56px -14px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.2); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top left; transition: opacity .16s, transform .16s, visibility .16s; z-index: 5; }
.dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.dd.open > .dd-panel { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (min-width: 1081px) { .dd:hover > .dd-panel { opacity: 1; visibility: visible; transform: none; } .dd:hover .chev { transform: rotate(180deg); } .dd:hover > .nl { color: #fff; background: rgba(255,255,255,.07); } }
.di { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; color: #e4f0f5; }
.di:hover, .di:focus-visible { background: rgba(255,255,255,.07); }
.di b { font: 600 0.9rem/1.2 var(--sans); }
.di small { color: var(--dim); font-size: 0.76rem; line-height: 1.3; }
.di.active { background: rgba(241,194,125,.1); } .di.active b { color: var(--gold); }

/* ChartRider: the one item that is allowed to shout */
.tm-nav .nl.game { margin-left: 8px; padding: 0 14px 0 6px; overflow: hidden; color: #fff; font-weight: 700; background: linear-gradient(135deg, rgba(241,194,125,.22), rgba(63,224,176,.16)); box-shadow: inset 0 0 0 1px rgba(241,194,125,.6); }
.tm-nav .nl.game::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.3) 50%, transparent 68%); transform: translateX(-130%); animation: crSheen 4s ease-in-out infinite; pointer-events: none; }
.tm-nav .nl.game:hover { background: linear-gradient(135deg, rgba(241,194,125,.34), rgba(63,224,176,.24)); box-shadow: inset 0 0 0 1px var(--gold), 0 8px 22px -8px rgba(241,194,125,.6); transform: translateY(-1px); }
.tm-nav .nl.game.active { box-shadow: inset 0 0 0 1.5px var(--gold); }
.tm-nav .nl.game em { font: 800 0.58rem/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; font-style: normal; background: var(--gold); color: #1a1205; padding: 3px 6px; border-radius: 999px; }
.rider { width: 38px; height: 24px; overflow: visible; flex: 0 0 auto; }
.rider .track { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rider .ride { fill: #fff; stroke: #0b1c29; stroke-width: 1.2; }
@keyframes crSheen { 0%, 58% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

.head-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.trade { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px 0 17px; border: 0; border-radius: 999px; background: var(--gold); color: #1a1205; font: 700 0.86rem/1 var(--sans); cursor: pointer; transition: filter .15s, transform .15s; }
.trade:hover, .dd.open > .trade { filter: brightness(1.08); transform: translateY(-1px); }
.trade .chev { width: 10px; height: 10px; transition: transform .18s; } .dd.open > .trade .chev { transform: rotate(180deg); }
.dd-right .dd-panel { left: auto; right: 0; transform-origin: top right; min-width: 290px; }
.panel-note { padding: 8px 14px 6px; color: var(--dim); font-size: .72rem; letter-spacing: .02em; }
.partner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 12px; color: #fff; border: 1px solid transparent; margin-top: 4px; }
.partner b { font: 700 .95rem/1 var(--sans); } .partner span { font: 700 .72rem/1 var(--sans); padding: 5px 9px; border-radius: 999px; }
.partner.hl { background: rgba(63,224,176,.08); border-color: rgba(63,224,176,.3); } .partner.hl span { background: rgba(63,224,176,.18); color: var(--buy); }
.partner.bx { background: rgba(241,194,125,.08); border-color: rgba(241,194,125,.32); } .partner.bx span { background: rgba(241,194,125,.2); color: var(--gold); }
.partner:hover { filter: brightness(1.25); }

.lang { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px 0 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); background: rgba(255,255,255,.03); }
.lang:hover, .lang:focus-within { border-color: var(--line-light); color: #fff; }
.lang svg { width: 15px; height: 15px; flex: 0 0 auto; }
.tm-head .lang-select { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0 14px 0 0; border-radius: 0; color: #e4f0f5; font: 600 .78rem/1 var(--sans); cursor: pointer; outline: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238aa6b6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right center; }
.tm-head .lang-select option { background: #0e2434; color: #e4f0f5; }

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; margin-left: auto; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.04); cursor: pointer; }
.nav-toggle span { display: block; height: 2px; border-radius: 2px; background: #e4f0f5; transition: transform .2s, opacity .2s; }
.tm-head.menu-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .tm-head.menu-open .nav-toggle span:nth-child(2) { opacity: 0; } .tm-head.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-partners { display: none; }

@media (max-width: 1080px) {
  .tm-head-in { height: 56px; gap: 10px; }
  .nav-toggle { display: flex; }
  .head-right { margin-left: 0; }
  .head-right .dd-right { display: none; }
  .tm-nav { position: fixed; left: 0; right: 0; top: 57px; bottom: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px 16px 28px; background: #0b1c29; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .18s, transform .18s, visibility .18s; }
  .tm-head.menu-open .tm-nav { opacity: 1; visibility: visible; transform: none; }
  .tm-nav > * { flex-shrink: 0; }
  .tm-nav .nl { height: 46px; font-size: 1rem; padding: 0 14px; justify-content: flex-start; }
  .tm-nav .nl.game { order: -1; margin: 0 0 8px; height: 56px; font-size: 1.05rem; }
  .tm-nav .dd > .nl { color: var(--gold); font: 700 .72rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; height: 34px; pointer-events: none; background: none !important; box-shadow: none !important; }
  .tm-nav .chev { display: none; }
  .dd-panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent; padding: 0 0 8px; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
  .dd-panel::before { display: none; }
  .di { background: rgba(255,255,255,.04); }
  .nav-partners { display: grid; gap: 6px; margin-top: 10px; }
  .nav-partners .panel-note { padding: 0 2px; }
  body.menu-lock { overflow: hidden; }
}
@media (max-width: 520px) { .dd-panel { grid-template-columns: 1fr; } .tm-head-in { padding: 0 12px; } .lang svg { display: none; } }
@media (prefers-reduced-motion: reduce) { .tm-nav .nl.game::after { animation: none; } .rider animateMotion { display: none; } }