/* The Games menu (assets/games-menu.js): open, the header's Games item becomes a tab that runs down into a panel hanging
   from the header's bottom rule (Shaun, 2026-10-29: "a beautiful design solution on how to tie a submenu into a header").
   The tab and panel share one surface and one #292929 rule (the header's own), so the tab reads as the header folding
   open; inside, the games.php icons and taglines. */
.gm-caret{position:relative;top:1.5px;flex:none;margin-left:4px;transition:transform .15s ease}   /* on the lowercase letters' middle, not the capitals' (Shaun: "arrows ... too high?"): measured 1.2px low, plus a touch for the arrow's heavy top */
body.redesign-v2 .lp-top-nav [data-gm-ready]{gap:0}   /* the lobby's nav items space icon and label 8px apart; the caret has its own 4px */
.gm-open .gm-caret,.gm-tab .gm-caret{transform:rotate(180deg)}
.gm-tab:not([hidden]) .gm-caret{animation:gm-flip .15s ease-out}   /* turns over as the tab appears, rather than flipping */
@keyframes gm-flip{from{transform:none}to{transform:rotate(180deg)}}

/* the tab: drawn over the trigger, in its type, down to the header's rule, cutting through it into the panel */
.gm-tab{position:fixed;z-index:calc(var(--muck-z-menu,1000) + 1);display:block;box-sizing:border-box;border:1px solid #292929;border-bottom:0;border-radius:8px 8px 0 0;background:var(--muck-surface-1,#141414);color:#d8bd84;text-decoration:none;white-space:nowrap}
.gm-tab[hidden]{display:none}
.gm-tab-label{display:flex;align-items:center}

.gm-menu{position:fixed;z-index:var(--muck-z-menu,1000);width:min(768px,calc(100vw - 32px));box-sizing:border-box;border:1px solid #292929;border-radius:0 0 14px 14px;background:var(--muck-surface-1,#141414);box-shadow:0 28px 60px -20px rgb(0 0 0 / .85);overflow:clip;animation:gm-drop .16s ease-out}
.gm-menu[hidden]{display:none}
@keyframes gm-drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gm-menu,.gm-tab .gm-caret{animation:none}}
.gm-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--muck-space-2,8px);padding:var(--muck-space-5,20px) var(--muck-space-4,16px) var(--muck-space-4,16px)}
.gm-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.gm-col+.gm-col{padding-left:var(--muck-space-2,8px);border-left:1px solid #1f1f1d}
.gm-col-title{margin:0 0 var(--muck-space-2,8px);padding:0 var(--muck-space-2,8px);color:var(--muck-text-3,#8a8a84);font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.gm-item{display:flex;align-items:center;gap:var(--muck-space-3,12px);padding:var(--muck-space-2,8px);border-radius:10px;color:inherit;text-decoration:none;transition:background .15s ease}
.gm-icon{flex:none;width:44px;height:44px;border-radius:10px;background:#0b0b0b}
.gm-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.gm-text b{color:#ecebe4;font:650 13px/1.25 Inter,system-ui,sans-serif;white-space:nowrap}
.gm-text span{overflow:hidden;color:#8d8d86;font:500 12px/1.3 Inter,system-ui,sans-serif;white-space:nowrap;text-overflow:ellipsis}
.gm-item:hover{background:#1e1e1b}
.gm-item:hover b{color:#d8bd84}
.gm-item[aria-current=page]{background:#2c281e}
.gm-item[aria-current=page] b{color:#d8bd84}
.gm-item:focus-visible,.gm-all:focus-visible{outline:2px solid var(--muck-gold,#ffd34f);outline-offset:-2px}
.gm-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--muck-space-3,12px);padding:var(--muck-space-3,12px) var(--muck-space-6,24px);border-top:1px solid #222220;background:#111110;color:#8d8d86;font:500 12px/1.3 Inter,system-ui,sans-serif}
.gm-all{color:#d8bd84;font:650 13px/1 Inter,system-ui,sans-serif;text-decoration:none}
.gm-all:hover{color:#fff1b8}
@media(max-width:760px){
 .gm-cols{grid-template-columns:1fr;gap:var(--muck-space-3,12px)}
 .gm-col+.gm-col{padding-left:0;border-left:0}
}