/* Compact legacy category navigation. */
:root{--tag-pink:#fc39b3}
.site-nav{padding:12px 6px;scrollbar-width:thin;scrollbar-color:#555 var(--nav)}
.site-nav nav{gap:0}
.site-nav .nav-item{height:26px;min-height:26px;padding:3px 8px;gap:9px;border-radius:4px;font:700 15px/20px Arial,sans-serif;text-transform:uppercase;letter-spacing:0}
.site-nav .nav-item .icon{width:17px;height:17px;flex:0 0 17px}
.site-nav .nav-item[data-tag-theme="pink"] span{color:var(--tag-pink)}
.site-nav .nav-caption{margin:12px 8px 5px;font-size:11px;line-height:18px;text-transform:uppercase}
@media(min-width:761px){
  body.nav-fixed{--nav-width:210px}
  .nav-fixed .site-nav{position:fixed;top:58px;left:0;width:210px;height:calc(100dvh - 58px);transition:none;transform:none;visibility:visible}
  .nav-fixed .site-shell{padding-left:210px}
  .nav-fixed .site-nav .nav-item span,.nav-fixed .site-nav .nav-caption{display:block}
  .nav-fixed .menu-toggle,.nav-fixed .nav-scrim{display:none}
  .nav-fixed .site-nav .nav-item span{min-width:0;white-space:normal;line-height:16px}
  .nav-fixed .site-nav .nav-item{height:auto;min-height:26px}
}
@media(max-width:760px){
  .site-nav .nav-item{height:auto;min-height:30px;padding:5px 10px}
  .site-nav .nav-item span{white-space:normal}
}

/* Text-only category labels in the expanded navigation. */
.nav-fixed .site-nav .nav-text-only .nav-item .icon,.nav-open .site-nav .nav-text-only .nav-item .icon{display:none}
@media(max-width:760px){.site-nav .nav-text-only .nav-item .icon{display:none}}

/* Original Mario lettering and the 12x16 sprite from the legacy menu. */
.site-nav .nav-item.nav-mario{gap:4px}
.site-nav .nav-mario i{font-style:normal}
.site-nav .nav-mario-color-0{color:#00cc00}
.site-nav .nav-mario-color-1{color:#00ccff}
.site-nav .nav-mario-color-2{color:#ffcc33}
.site-nav .nav-mario-color-3{color:#ff3333}
.site-nav .nav-mario-sprite{width:12px;height:16px;max-width:none;flex:0 0 12px;image-rendering:pixelated;filter:url(#nav-mario-background)}

/* Header-matching separator and copyright after four 20px text lines. */
.site-nav .nav-divider{display:none;flex:0 0 auto;height:0;border-top:1px solid var(--header-line);margin:12px 8px}
.site-nav .nav-footer{margin:80px 8px 0;padding:0;font-size:11px;line-height:20px}
.nav-fixed .site-nav .nav-divider,.nav-open .site-nav .nav-divider,.nav-fixed .site-nav .nav-footer{display:block}
@media(max-width:760px){.site-nav .nav-divider{display:block}}

/* Boys category keeps a distinct blue label in both languages. */
.site-nav .nav-item[href$="/tags/boys"] span{color:#39a5f5}

/* Shift menu text by two CSS millimetres without moving collapsed icons. */
.site-nav .nav-item>span{margin-left:2mm}
.site-nav .nav-caption,.site-nav .nav-footer{padding-left:2mm}

/* Lilac edge light on charcoal: pointer and keyboard focus share the same treatment. */
#site-nav .nav-item{position:relative;transition:background-color 140ms ease,box-shadow 140ms ease,color 140ms ease}
#site-nav .nav-item>span{transition:transform 140ms ease}
#site-nav .nav-item:is(:hover,:focus-visible){
  background:linear-gradient(90deg,rgba(191,139,255,.22),rgba(191,139,255,.055)22px,rgba(191,139,255,.035)),#1a1d21;
  color:#f6eeff;
  box-shadow:inset 3px 0 0 #bf8bff,inset 0 0 0 1px rgba(195,150,255,.48),0 2px 8px rgba(0,0,0,.22),0 0 12px rgba(191,139,255,.14);
}
#site-nav .nav-item:focus-visible{outline:2px solid #d9b8ff;outline-offset:2px}
.nav-fixed #site-nav .nav-item,.nav-open #site-nav .nav-item{padding-right:23px}
.nav-fixed #site-nav .nav-item::after,.nav-open #site-nav .nav-item::after{
  content:'›';position:absolute;right:8px;top:50%;font:700 22px/1 Arial,sans-serif;
  color:#d4acff;opacity:0;transform:translate(-3px,-50%);pointer-events:none;
  transition:opacity 140ms ease,transform 140ms ease;
}
.nav-fixed #site-nav .nav-item:is(:hover,:focus-visible)::after,.nav-open #site-nav .nav-item:is(:hover,:focus-visible)::after{opacity:1;transform:translate(0,-50%)}
.nav-fixed #site-nav .nav-item:is(:hover,:focus-visible)>span,.nav-open #site-nav .nav-item:is(:hover,:focus-visible)>span{transform:translateX(2px)}
@media(prefers-reduced-motion:reduce){
  #site-nav .nav-item,#site-nav .nav-item>span,#site-nav .nav-item::after{transition:none}
  .nav-fixed #site-nav .nav-item:is(:hover,:focus-visible)>span,.nav-open #site-nav .nav-item:is(:hover,:focus-visible)>span{transform:none}
}

/* Game pages use a drawer only: no collapsed icon rail or reserved column. */
body[data-nav-mode="game"]{--nav-width:0px}
body[data-nav-mode="game"] .site-nav{
  position:fixed;top:58px;left:0;width:min(230px,calc(100vw - 24px));
  height:calc(100vh - 58px);height:calc(100dvh - 58px);
  transform:translateX(-100%);visibility:hidden;
  transition:transform .18s ease,visibility .18s;z-index:45;
  overscroll-behavior:contain;
}
body[data-nav-mode="game"].nav-open .site-nav{transform:translateX(0);visibility:visible}
body[data-nav-mode="game"].nav-open .nav-scrim{
  display:block;position:fixed;inset:58px 0 0;border:0;padding:0;
  background:#0008;z-index:44;cursor:pointer;
}
@media(min-width:761px) and (max-width:980px){
  body[data-nav-mode="game"].nav-open .main-content{padding-left:24px;padding-right:24px}
}
@media(max-width:760px){
  body[data-nav-mode="game"] .site-nav{top:56px;height:calc(100vh - 56px);height:calc(100dvh - 56px)}
  body[data-nav-mode="game"].nav-open .nav-scrim{top:56px}
}
@media(prefers-reduced-motion:reduce){body[data-nav-mode="game"] .site-nav{transition:none}}