:root { --rr-safe-t: env(safe-area-inset-top, 0px); --rr-safe-r: env(safe-area-inset-right, 0px); --rr-safe-b: env(safe-area-inset-bottom, 0px); --rr-safe-l: env(safe-area-inset-left, 0px); --rr-gap: 10px; --rr-btn: 46px; } body.rr-menu-standalone { padding-top: calc(var(--rr-btn) + 8px + var(--rr-safe-t)); } #rrMenuBtn { position: absolute; top: calc(var(--rr-gap) + var(--rr-safe-t)); right: calc(var(--rr-gap) + var(--rr-safe-r)); z-index: 6; display: none; align-items: center; justify-content: center; width: var(--rr-btn); height: var(--rr-btn); margin: 0; padding: 0; appearance: none; -webkit-appearance: none; border: 1px solid var(--stroke, rgba(120, 190, 230, .28)); border-radius: 13px; background: var(--panel, rgba(8, 20, 32, .82)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .34); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: border-color .12s ease, transform .08s ease; } body.rr-menu-ready #rrMenuBtn { display: flex; } #rrMenuBtn:active { transform: translateY(1px); } #rrMenuBtn:focus-visible { outline: 2px solid var(--cyan, #4fe3ff); outline-offset: 2px; } #rrMenuBtn .rrmenu-bars { position: relative; display: block; width: 22px; height: 16px; pointer-events: none; } #rrMenuBtn .rrmenu-bars i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .35); transition: transform .24s cubic-bezier(.2, .8, .25, 1), opacity .16s ease; } #rrMenuBtn .rrmenu-bars i:nth-child(1) { top: 0; } #rrMenuBtn .rrmenu-bars i:nth-child(2) { top: 7px; } #rrMenuBtn .rrmenu-bars i:nth-child(3) { top: 14px; } body.rr-menu-open #rrMenuBtn { border-color: var(--stroke-hot, rgba(255, 190, 61, .55)); } body.rr-menu-open #rrMenuBtn .rrmenu-bars i:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.rr-menu-open #rrMenuBtn .rrmenu-bars i:nth-child(2) { opacity: 0; } body.rr-menu-open #rrMenuBtn .rrmenu-bars i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } #rrMenuPanel { position: absolute; top: calc(var(--rr-btn) + var(--rr-gap) * 1.6 + var(--rr-safe-t)); right: calc(var(--rr-gap) + var(--rr-safe-r)); z-index: 5; width: min(272px, calc(100% - var(--rr-gap) * 2 - var(--rr-safe-l) - var(--rr-safe-r))); max-height: calc(100vh - var(--rr-btn) - var(--rr-gap) * 4 - var(--rr-safe-t) - var(--rr-safe-b)); max-height: calc(100dvh - var(--rr-btn) - var(--rr-gap) * 4 - var(--rr-safe-t) - var(--rr-safe-b)); display: flex; flex-direction: column; gap: 6px; padding: 10px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--stroke, rgba(120, 190, 230, .28)); border-radius: var(--r-m, 14px); background: var(--panel-2, rgba(12, 29, 45, .92)); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-14px); transition: transform .26s cubic-bezier(.2, .8, .25, 1), opacity .18s ease, visibility 0s linear .26s; } body.rr-menu-open #rrMenuPanel { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition: transform .26s cubic-bezier(.2, .8, .25, 1), opacity .18s ease, visibility 0s; } .rrmenu-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 11px 12px; border: 1px solid var(--stroke, rgba(120, 190, 230, .28)); border-radius: var(--r-s, 8px); background: rgba(6, 16, 26, .6); color: var(--ink, #eaf6ff); text-decoration: none; font: 700 11px var(--font-d, 'Orbitron', system-ui, sans-serif); letter-spacing: .12em; text-transform: uppercase; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: border-color .12s ease, background .12s ease, color .12s ease, transform .08s ease; } .rrmenu-link .ic { flex: 0 0 auto; width: 18px; text-align: center; font-size: 14px; line-height: 1; letter-spacing: 0; } .rrmenu-link:hover { border-color: var(--stroke-hot, rgba(255, 190, 61, .55)); background: rgba(20, 44, 66, .7); color: #fff; } .rrmenu-link:active { transform: translateY(1px); } .rrmenu-link:focus-visible { outline: 2px solid var(--cyan, #4fe3ff); outline-offset: 2px; } .rrmenu-link[aria-current="page"] { border-color: var(--stroke-hot, rgba(255, 190, 61, .55)); color: var(--amber, #ffbe3d); } @media (max-width: 360px) { :root { --rr-btn: 44px; } .rrmenu-link { font-size: 10px; letter-spacing: .1em; } } @media (prefers-reduced-motion: reduce) { #rrMenuPanel { transition: opacity .01s linear, visibility 0s linear .01s; } body.rr-menu-open #rrMenuPanel { transition: opacity .01s linear, visibility 0s; } #rrMenuBtn, #rrMenuBtn .rrmenu-bars i, .rrmenu-link { transition: none; } }