/* MENU BUTTON AND MENU PANEL */

/* SECTION 00 SG MENU FONT DEFAULT */
:root{--sgMenuFontFamily:inherit;}

/* SECTION 01 SG MENU GRID AND CELLS MUST STRETCH */
.gameHeader .barGrid{height:100%;align-items:stretch;}
.gameHeader .barGrid .barLeft{height:100%;display:flex;align-items:stretch;}
.gameHeader .barGrid .barTitle{display:flex;align-items:center;justify-content:center;}
.gameHeader .barGrid .barRight{display:flex;align-items:center;justify-content:flex-end;}

/* SECTION 02 SG MENU BUTTON FULL HEIGHT CLICK TARGET */
.sgMenuBtn{display:flex;align-items:center;justify-content:center;width:64px;height:100%;padding:0;margin:0;background:transparent;border:0;cursor:pointer;border-radius:0;user-select:none;pointer-events:auto;-webkit-tap-highlight-color:transparent;}

/* SECTION 03 SG MENU BUTTON HOVER AND FOCUS */
.sgMenuBtn:hover{background:#2f2f2f;}
.sgMenuBtn:focus{outline:none;}
.sgMenuBtn:focus-visible{background:#353535;box-shadow:0 0 0 2px rgba(255,255,255,0.18) inset;}

/* SECTION 04 SG MENU ICON THREE LINES */
.sgMenuIcon{position:relative;display:block;width:22px;height:16px;}
.sgMenuIcon::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:currentColor;border-radius:2px;box-shadow:0 7px 0 currentColor,0 14px 0 currentColor;}

/* SECTION 05 SG MENU COLOR INHERIT HEADER COLOR */
.gameHeader .sgMenuBtn{color:inherit;}

/* SECTION 06 SG MENU OPEN STATE VISUAL */
.sgMenuOpen .sgMenuBtn{background:#3a3a3a;}

/* SECTION 07 SG MENU OVERLAY ROOT */
.sgMenuOverlay{position:fixed;inset:0;display:none;z-index:12000;pointer-events:none;}

/* SECTION 08 SG MENU OPEN STATE SHOW OVERLAY */
.sgMenuOpen .sgMenuOverlay{display:block;pointer-events:auto;}

/* SECTION 09 SG MENU BACKDROP DISABLED */
.sgMenuBackdrop{display:none;}

/* SECTION 10 SG MENU PANEL */
.sgMenuPanel{position:fixed;top:var(--sgMenuTop,64px);left:var(--sgMenuLeft,12px);width:min(360px,calc(100vw - 24px));background:#2b2b2b;border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,0.45);padding:10px 14px 12px 14px;color:#ffffff;font-family:var(--sgMenuFontFamily,inherit);}

/* SECTION 10A SG MENU FONT INHERIT LOCK */
.sgMenuPanel *{font-family:inherit;}

/* SECTION 10B SG MENU NO TEXT HIGHLIGHT */
.sgMenuPanel,.sgMenuPanel *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}


/* SECTION 11 SG MENU HEADER */
.sgMenuHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px 0;}
.sgMenuHeaderLabel{font-size:14px;line-height:1;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:#cfcfcf;}

/* SECTION 12 SG MENU HOME LINK */
.sgMenuHome{font-size:11px;line-height:1;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#bdbdbd;text-decoration:none;padding:6px 8px;border-radius:8px;margin-top:-4px;}
.sgMenuHome:hover{background:#3a3a3a;}

/* SECTION 12A SG MENU COLUMNS */
.sgMenuCols{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* SECTION 13 SG MENU COLUMN TITLE */
.sgMenuColTitle{font-size:18px;line-height:1.1;font-weight:800;margin:4px 0 8px 0;padding:0 0 8px 0;border-bottom:1px solid #444444;}

/* SECTION 14 SG MENU ITEM BASE */
.sgMenuItem{display:flex;align-items:center;gap:8px;min-height:36px;padding:7px 10px;border-radius:10px;color:inherit;text-decoration:none;font-size:clamp(14px,1.9vw,16px);line-height:1.2;cursor:pointer;margin-left:-4px;}

/* SECTION 15 SG MENU ITEM HOVER */
.sgMenuItem:hover{background:#3a3a3a;}

/* SECTION 16 SG MENU ITEM ACTIVE */
.sgMenuItem.isActive{background:#444444;}

/* SECTION 17 SG MENU ITEM DISABLED */
.sgMenuItem.isDisabled{color:#9a9a9a;cursor:default;pointer-events:none;}

/* SECTION 18 SG MENU ICON SLOT */
.sgMenuItemIcon{display:inline-flex;align-items:center;justify-content:center;width:18px;min-width:18px;}

/* SECTION 19 SG MENU RESPONSIVE ONE COLUMN */
@media (max-width:420px){.sgMenuPanel{left:10px;top:10px;width:calc(100vw - 20px);} .sgMenuCols{grid-template-columns:1fr;}}

/* SECTION 20 SG MENU NO SCROLL LOCK */
.sgMenuOpen{overflow:auto;}