:root{
    --btn-size: 60px;      /* launcher size */
    --rect-w: 110px;       /* rectangle width */
    --rect-h: 90px;        /* rectangle height */
    --rect-radius: 14px;   /* rectangle corner radius */
    --icon-size: 46px;     /* icon inside rectangle */
    --radius: 160px;       /* distance from center */
    --x-offset: 0px;       /* move circle horizontally */
    --y-offset: 0px;       /* move circle vertically */
  }

  body{ margin:0; background:#111; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; }

  /* ===== Right-side GIF launcher ===== */
  .launcher{
    position:fixed;
    top:50%;
    right:1px; left:auto;
    transform:translateY(-50%);
    width:var(--btn-size);
    height:var(--btn-size);
    z-index:1000;
  }
  .launcher-btn{
    width:100%; height:100%;
    background:url("https://static.gwvkyk.com/media/e36e006a85986824cb836.gif") center/cover no-repeat;
    cursor:pointer;
    animation:float 3s ease-in-out infinite;
  }
  @keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

  /* ===== Overlay ===== */
  .menu-overlay{
    position:fixed; inset:0;
    background:rgba(0,0,0,.45);
    opacity:0; pointer-events:none;
    transition:opacity .2s ease;
    z-index:2000;
  }
  .menu-overlay.show{ opacity:1; pointer-events:auto; }

  /* ===== Centered menu ===== */
  .menu-center{
    position:fixed;
    top:calc(50vh + var(--y-offset));
    left:calc(50vw + var(--x-offset));
    transform:translate(-50%,-50%);
    width:0; height:0;
    z-index:2001;
    opacity:0; pointer-events:none;
    transition:opacity .2s ease;
  }
  .menu-center.show{ opacity:1; pointer-events:auto; }

  /* Rectangle buttons */
  .menu-center a{
    position:absolute;
    top:50%; left:50%;
    width:var(--rect-w);
    height:var(--rect-h);
    border-radius:var(--rect-radius);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:8px;
    background:linear-gradient(to bottom, #707070, #454545);
    box-shadow:0 10px 24px rgba(0,0,0,.35);
    opacity:0; pointer-events:none;
    transform:translate(-50%,-50%) scale(.7);
    transition:transform .28s ease, opacity .2s ease;
  }
  .menu-center.show a{
    opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1);
  }
  .menu-center a:hover{
    transform:translate(-50%,-50%) scale(1.06);
  }

  /* Icon inside */
  .menu-center a img{
    width:var(--icon-size);
    height:var(--icon-size);
    object-fit:contain;
  }

  /* Label */
  .menu-center a span{
    color:#fff;
    font-size:14px;
    font-weight:600;
    letter-spacing:.2px;
    text-shadow:0 1px 2px rgba(0,0,0,.35);
  }

  /* ===== Circle Placement for 5 items ===== */
  .menu-center.show a[class*="angle-"]{
    transform:
      translate(-50%,-50%)
      rotate(var(--a))
      translate(var(--radius))
      rotate(calc(-1 * var(--a)));
  }

  /* 5 items: each 72 degrees apart (360/5) */
  .menu-center.show .angle-1 { --a: -90deg;  transition-delay:.05s; }
  .menu-center.show .angle-2 { --a: -18deg;  transition-delay:.08s; }
  .menu-center.show .angle-3 { --a:  54deg;  transition-delay:.11s; }
  .menu-center.show .angle-4 { --a: 126deg;  transition-delay:.14s; }
  .menu-center.show .angle-5 { --a: 198deg;  transition-delay:.17s; }

  /* Mobile */
  @media (max-width:768px){
    :root{
      --btn-size:74px;
      --rect-w: 100px;
      --rect-h: 84px;
      --icon-size: 44px;
      --radius: 140px;
    }
  }