/* Swing 02 — one button material for the whole game. Source: Figma DS03 "Glass Slab / Menu" (smooth optical glass,
   hover = brighter glass, active = accent #c7fc68, slow glide). Joey's additions: a fine gritty micro-grain on the glass,
   a bevelled 3D edge, and a real indicator lamp in the middle of primary buttons that lights on hover and press.
   Every button keeps its own layout; this layer only changes the material. Dark glass stays dark. */
:root{--gb-ink:var(--rt-ui-ink,#f0f6f2);--gb-accent:var(--rt-ui-accent,#c7fc68);--gb-yellow:var(--rt-ui-yellow,#ffda39);--gb-ease:cubic-bezier(.22,.61,.36,1)}
.gb{position:relative;isolation:isolate;overflow:hidden;transform-style:preserve-3d;
  background:linear-gradient(180deg,rgba(233,238,242,.075),rgba(233,238,242,.025) 42%,rgba(0,0,0,.18) 100%),rgba(5,8,15,.62) !important;
  border:1px solid rgba(233,238,242,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.55),inset 1px 0 0 rgba(255,255,255,.06),inset -1px 0 0 rgba(0,0,0,.25),0 10px 30px rgba(0,0,0,.45);
  transition:transform .9s var(--gb-ease),box-shadow .9s var(--gb-ease),border-color .9s var(--gb-ease),background .9s var(--gb-ease),color .9s var(--gb-ease)}
/* the grain: a real noise layer in the glass, not a blur */
.gb::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");background-size:160px 160px}
/* the specular streak: glides across on hover, never snaps */
.gb::after{content:"";position:absolute;inset:-40% -60%;z-index:-1;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.11) 50%,transparent 58%);transform:translateX(-45%);transition:transform 1.8s var(--gb-ease),opacity .9s var(--gb-ease);opacity:.0}
.gb:hover{border-color:rgba(233,238,242,.34) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.6),0 16px 40px rgba(0,0,0,.5),0 0 0 1px rgba(199,252,104,.08)}
.gb:hover::after{transform:translateX(45%);opacity:1}
.gb:active{transform:translateY(1px) scale(.992);box-shadow:inset 0 2px 6px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.06),0 4px 14px rgba(0,0,0,.4)}
.gb[aria-pressed="true"],.gb.selected,.gb[aria-current="true"]{border-color:rgba(199,252,104,.55) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.55),0 0 0 1px rgba(199,252,104,.18),0 0 26px rgba(199,252,104,.14),0 10px 30px rgba(0,0,0,.45)}
/* the lamp: a small real-looking indicator bulb, cold when off, lime when the button is live */
.gb-lamp{position:absolute;left:50%;bottom:7px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 40% 35%,#8a9690,#2a332e 70%);box-shadow:inset 0 0 1px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.45);transition:background .9s var(--gb-ease),box-shadow .9s var(--gb-ease)}
.gb:hover .gb-lamp,.gb[aria-pressed="true"] .gb-lamp,.gb.selected .gb-lamp,.gb:focus-visible .gb-lamp{background:radial-gradient(circle at 40% 35%,#f4ffd6,var(--gb-accent) 55%,#5c8a16 100%);box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 6px rgba(199,252,104,.9),0 0 18px rgba(199,252,104,.55),0 0 34px rgba(199,252,104,.25)}
.gb[aria-pressed="true"] .gb-lamp,.gb.selected .gb-lamp{background:radial-gradient(circle at 40% 35%,#fff7cc,var(--gb-yellow) 55%,#8a6a00 100%);box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 6px rgba(255,218,57,.9),0 0 18px rgba(255,218,57,.5)}
/* primary (PLAY) keeps its lime fill: the glass material sits over it as a clear coat */
.gb.gb-primary{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.04) 45%,rgba(0,0,0,.12)),var(--gb-accent) !important;color:#05070a !important;border-color:rgba(255,255,255,.35) !important}
.gb.gb-primary::before{opacity:.14}
.gb.gb-primary .gb-lamp{background:radial-gradient(circle at 40% 35%,#fff,#1e3a06 70%)}
.gb.gb-primary:hover .gb-lamp{background:radial-gradient(circle at 40% 35%,#ffffff,#f4ffd6 55%,#2f5a0a 100%);box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 8px #fff,0 0 20px rgba(255,255,255,.6)}
/* transparent variant: the ones Joey liked — same bevel, barely-there fill, for secondary rows */
.gb.gb-clear{background:linear-gradient(180deg,rgba(233,238,242,.05),rgba(233,238,242,.0) 50%,rgba(0,0,0,.08)),rgba(5,8,15,.18) !important;backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1)}
@media (prefers-reduced-motion:reduce){.gb,.gb::after,.gb-lamp{transition:none}.gb:hover::after{transform:none}}