.main-menu { position: fixed; inset: 0; z-index: 40; overflow: auto; padding: max(var(--sx-space-6), env(safe-area-inset-top)) max(var(--sx-space-6), env(safe-area-inset-right)) max(var(--sx-space-4), env(safe-area-inset-bottom)) max(var(--sx-space-6), env(safe-area-inset-left)); background: var(--sx-color-void); color: var(--sx-color-text); }
.main-menu.hidden, .main-menu[hidden], .main-menu .hidden, .main-menu [hidden] { display: none !important; }
.main-menu-header, .main-menu-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--sx-space-6); }
.main-menu-header .spintrix-wordmark { font-size: clamp(36px, 5vw, 76px); }
.main-menu-player { display: flex; gap: var(--sx-space-4); align-items: center; text-align: left; max-width: 460px; }
.main-menu-player > span { display: grid; gap: var(--sx-space-1); }
.main-menu-player > span:nth-child(2) { min-width: 0; flex: 1; }
.main-menu-player [data-menu-name] { overflow-wrap: anywhere; }
.main-menu-player [data-menu-initials] { width: 48px; height: 48px; flex: 0 0 auto; }
.main-menu-player progress { width: 120px; height: 8px; accent-color: var(--sx-color-cyan); }
.main-menu-content { max-width: 1280px; margin: var(--sx-space-8) auto; }
.main-menu-actions { display: grid; gap: var(--sx-space-3); width: min(480px, 100%); }
.main-menu button { min-height: 48px; border: 1px solid var(--sx-color-border-active); border-radius: var(--sx-radius-lg); background: var(--sx-color-surface); color: var(--sx-color-text); cursor: pointer; }
.main-menu-actions button, .main-menu-mode-grid button { display: flex; gap: var(--sx-space-5); align-items: center; text-align: left; padding: var(--sx-space-4); }
.main-menu button > .sx-icon { width: 32px; height: 32px; color: var(--sx-color-cyan); flex: 0 0 auto; }
.main-menu button > span:nth-child(2) { flex: 1; display: grid; gap: var(--sx-space-1); }
.main-menu button strong { font-size: var(--sx-type-title); }
.main-menu button small { color: var(--sx-color-text-secondary); font-weight: normal; line-height: var(--sx-line-body); }
.main-menu button:focus-visible { outline: var(--sx-focus-width) solid var(--sx-color-cyan); outline-offset: 3px; }
.main-menu-actions [data-menu-action="modes"] { background: var(--sx-color-cyan-soft); border-color: var(--sx-color-cyan); }
.main-menu-view { max-width: 1100px; }
.main-menu-view h1 { margin: var(--sx-space-5) 0; }
.main-menu-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sx-space-4); }
.main-menu-mode-group { margin-bottom: var(--sx-space-8); }
.main-menu-mode-group h2 { color: var(--sx-color-cyan); }
.main-menu-mode-grid button strong { font-size: var(--sx-type-body); }
.main-menu [data-menu-body] > .panel { margin-bottom: var(--sx-space-4); }
.main-menu-footer { color: var(--sx-color-text-secondary); font-size: var(--sx-type-label); }
.main-menu-footer nav { display: flex; flex-wrap: wrap; gap: var(--sx-space-2); }
.main-menu-footer button { font-size: var(--sx-type-label); padding: var(--sx-space-2) var(--sx-space-3); }
body.main-menu-visible { overflow: hidden; }
#mobileMainMenuBtn, #aboutGameBtn { display: none; }
@media (max-width: 860px), (pointer: coarse) {
  #menuMainMenuBtn { display: none; }
  #mobileMainMenuBtn, #aboutGameBtn { display: grid; }
}
body.main-menu-visible > .mobile-dock, body.main-menu-visible > .mobile-menu-btn, body.main-menu-visible > .mobile-pause-btn { display: none; }
@media (max-width: 800px) { .main-menu-header { align-items: flex-start; flex-direction: column; } .main-menu-mode-grid { grid-template-columns: 1fr; } .main-menu-footer { align-items: flex-start; flex-direction: column; } .main-menu-player { width: 100%; } .main-menu-content { margin: var(--sx-space-6) auto; } }
@media (max-height: 500px) and (min-width: 600px) { .main-menu-header { flex-direction: row; } .main-menu-header .spintrix-wordmark { font-size: 36px; } .main-menu-actions { width: 100%; grid-template-columns: 1fr 1fr; } .main-menu-mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Background artwork → restrained ambient motion → readable interactive UI. */
.main-menu { display: flex; flex-direction: column; isolation: isolate; }
.main-menu-background { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.main-menu-arena { width: 100%; height: 100%; opacity: .9; }
.main-menu-background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--sx-color-void) 0%, rgba(5,7,13,.8) 30%, rgba(5,7,13,.1) 75%), linear-gradient(0deg, var(--sx-color-void), transparent 35%); }
.main-menu-header { width: 100%; max-width: 1500px; margin: 0 auto; }
.main-menu-content { width: 100%; flex: 1; }
.main-menu-header .spintrix-wordmark { filter: drop-shadow(var(--sx-glow-ui)); }
.main-menu-player { padding: var(--sx-space-4); border-color: var(--sx-color-cyan) !important; background: var(--sx-color-overlay) !important; }
.main-menu-player [data-menu-name] { font-size: var(--sx-type-body); color: var(--sx-color-cyan-highlight); }
.main-menu-player [data-menu-country] { font-size: var(--sx-type-body); }
.main-menu-player [data-menu-xp] { font-size: var(--sx-type-label); }
.main-menu-player [data-menu-level] { white-space: nowrap; }
.main-menu-actions button { background: var(--sx-color-overlay); border-left: 3px solid var(--sx-color-cyan); transition: border-color var(--sx-duration-fast), background var(--sx-duration-fast), transform var(--sx-duration-fast); }
.main-menu-actions [data-menu-action="modes"] { background: linear-gradient(100deg, var(--sx-color-cyan-soft), var(--sx-color-surface-interactive)); border: 1px solid var(--sx-color-cyan); box-shadow: var(--sx-glow-cyan); }
.main-menu button:hover { border-color: var(--sx-color-cyan); background-color: var(--sx-color-surface-interactive); }
.main-menu-actions button:hover { transform: translateX(3px); }
.main-menu-actions button strong { text-transform: uppercase; font-family: var(--sx-font-display); letter-spacing: .025em; }
.main-menu-view { padding: var(--sx-space-6); background: var(--sx-color-overlay); border: 1px solid var(--sx-color-border-active); border-radius: var(--sx-radius-lg); box-shadow: var(--sx-shadow-panel); }
.main-menu-mode-grid button { align-items: flex-start; min-height: 145px; background: linear-gradient(145deg, var(--sx-color-cyan-soft), var(--sx-color-surface)); border-top: 2px solid var(--sx-color-cyan); }
.main-menu-mode-grid button:nth-child(2) { border-color: var(--sx-color-purple); background: linear-gradient(145deg, var(--sx-color-purple-soft), var(--sx-color-surface)); }
.main-menu-mode-grid button:nth-child(2) .sx-icon { color: var(--sx-color-purple-highlight); }
.main-menu-footer { width: 100%; max-width: 1500px; margin: var(--sx-space-6) auto 0; }
.main-menu-footer button { background: var(--sx-color-overlay); }
.main-menu .panel { max-width: 100%; }
.main-menu [data-menu-body] > [data-menu-action="play"] { min-width: 180px; background: var(--sx-color-cyan-soft); border-color: var(--sx-color-cyan); }
.menu-ball { animation: menu-float 7s ease-in-out infinite alternate; }
.menu-energy { animation: menu-energy 5s ease-in-out infinite alternate; }
@keyframes menu-float { to { transform: translate(0,-12px); } }
@keyframes menu-energy { from { opacity: .45; } to { opacity: 1; } }
.main-menu.hidden .menu-ball, .main-menu.hidden .menu-energy { animation-play-state: paused; }
.reduced-motion .main-menu *, .low-fx .main-menu *, .performance-particles-off .menu-stars { animation: none !important; }
.reduced-motion .main-menu button, .low-fx .main-menu button { transition: none; }
.performance-particles-off .menu-stars { display: none; }
.low-fx .main-menu-header .spintrix-wordmark, .performance-glow-off .main-menu-header .spintrix-wordmark { filter: none; }
.low-fx .main-menu button, .performance-glow-off .main-menu button { box-shadow: none; }
.low-fx .menu-energy, .performance-post-off .menu-energy { display: none; }
@media (prefers-reduced-motion: reduce) { .main-menu * { animation: none !important; transition: none !important; } }
@media (max-width: 800px) { .main-menu { padding: max(var(--sx-space-4), env(safe-area-inset-top)) max(var(--sx-space-4), env(safe-area-inset-right)) max(var(--sx-space-4), env(safe-area-inset-bottom)) max(var(--sx-space-4), env(safe-area-inset-left)); } .main-menu-header { gap: var(--sx-space-4); } .main-menu-header .spintrix-wordmark { font-size: 46px; } .main-menu-actions { width: 100%; } .main-menu-actions button strong { font-size: var(--sx-type-body); } .main-menu-view { padding: var(--sx-space-4); } .main-menu-mode-grid button { min-height: 100px; } .main-menu-background::after { background: linear-gradient(0deg, var(--sx-color-void), rgba(5,7,13,.65)); } .main-menu-arena { width: 170%; transform: translateX(-38%); opacity: .55; } .main-menu-player { gap: var(--sx-space-3); } .main-menu-player progress { width: 85px; } }
@media (max-height: 500px) and (min-width: 600px) { .main-menu-header .spintrix-wordmark { font-size: 36px; } .main-menu-player { padding: var(--sx-space-2); } .main-menu-player [data-menu-initials] { width: 36px; height: 36px; } .main-menu-actions button { padding: var(--sx-space-3); } }

.main-menu-footer nav{margin-inline-start:auto;justify-content:flex-end}
@media(max-width:620px){.main-menu-footer nav{width:100%;justify-content:flex-end}}