/* ATC v4.4 navigation behavior and geometry, in the Games palette. */
.site-header { position:sticky; top:0; z-index:60; }
.mobile-menu { position:fixed; top:var(--sticky-header,var(--header)); max-height:calc(100svh - var(--sticky-header,var(--header)) - 12px); overflow-y:auto; overscroll-behavior:contain; z-index:61; }
.account-mobile nav { max-height:calc(100svh - var(--sticky-header,var(--header)) - 12px); overflow-y:auto; overscroll-behavior:contain; }
.game-nav { top:var(--sticky-header,var(--header)); }
/* Reserve the existing portrait size so late image loading cannot move section stops. */
.titan-layout figure img { aspect-ratio:5 / 6; }
html { scroll-padding-top:calc(var(--sticky-header,var(--header)) + 80px); }
.section-rail { position:fixed; right:12px; top:50svh; transform:translateY(-50%) translateZ(0); z-index:50; width:160px; max-height:calc(100svh - 210px); pointer-events:none; }
.section-rail::before { content:''; position:absolute; right:-10px; top:0; bottom:0; width:28px; pointer-events:auto; }
.rail-links { position:relative; max-height:calc(100svh - 210px); overflow-y:auto; overflow-x:hidden; scrollbar-width:none; opacity:0; transition:opacity .8s cubic-bezier(.3,.7,.3,1); pointer-events:none; }
.section-rail[data-visible="true"] .rail-links,.section-rail:focus-within .rail-links { opacity:1; }
.section-rail .rail-link { position:relative; display:flex; align-items:center; justify-content:flex-end; gap:12px; width:100%; min-height:44px; padding:4px 8px; border:0; background:transparent; color:#fff; font:11px/1.25 var(--body); letter-spacing:.06em; text-transform:uppercase; text-align:right; cursor:pointer; box-sizing:border-box; pointer-events:none; }
.section-rail[data-visible="true"] .rail-link,.section-rail:focus-within .rail-link { pointer-events:auto; }
.rail-link span { position:relative; z-index:1; padding:3px 5px; background:transparent; text-shadow:0 1px 3px #000; }
.rail-link i { position:relative; flex:0 0 6px; height:6px; border-radius:50%; background:#8191a9; }
.rail-link:not(:last-child)::after { content:''; position:absolute; width:1px; height:calc(100% - 6px); top:calc(50% + 3px); right:10.5px; background:#56637a; }
.section-rail .rail-link[aria-current="location"] { color:var(--blue); font-weight:700; }
.rail-link[aria-current="location"] i { background:var(--blue); box-shadow:0 0 9px var(--blue); }
.section-rail .rail-link:hover:not([aria-current="location"]) { color:var(--purple); }
.rail-link:hover:not([aria-current="location"]) i { background:var(--purple); box-shadow:0 0 8px var(--accent); }
.rail-link:focus-visible { outline-offset:-3px; }
.rail-glow { position:absolute; right:2px; width:18px; height:18px; border-radius:50%; background:radial-gradient(circle,#fff,transparent 66%); filter:blur(3px); opacity:.8; transform:translateY(-50%); pointer-events:none; transition:top .2s cubic-bezier(.3,.7,.3,1); }
@media(max-width:800px) {
  .site-header { gap:10px; padding-inline:14px; }
  .site-header .header-link { padding-left:10px; margin-left:auto; white-space:nowrap; font-size:10px; }
  .account-mobile { flex-shrink:0; }
  .account-mobile summary { white-space:nowrap; min-height:44px; padding:10px 4px; font-size:13px; }
  .section-rail { right:4px; width:148px; }
  .rail-link span { max-width:114px; opacity:1; }
}
@media(prefers-reduced-motion:reduce) { .rail-links,.rail-glow { transition:none; } }